/* ==========================================================
   Knotello — coming soon
   Brand tokens (subset of the Knotello design system)
   ========================================================== */
:root{
  --berry:#E0538A; --berry-soft:#FBD8E5; --berry-deep:#B23C6C;
  --teal:#17A2A2;  --teal-soft:#C6E8E8;
  --gold:#F4A93B;  --gold-soft:#FCE7BD;
  --sage:#7FB682;  --lavender:#A99AE0;

  --ink:#2E2822; --ink-soft:#6B6154; --ink-faint:#9A8A72;
  --cream:#E7DECC; --cream-2:#F4EEE1; --paper:#FFF9F0;
  --line:#EADFCB; --white:#FFFFFF;

  --font-logo:'Dancing Script','Segoe Script',cursive;
  --font-display:'Quicksand',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,sans-serif;
  --font-hand:'Caveat','Comic Sans MS',cursive;

  --shadow-card:0 24px 60px -28px rgba(46,40,34,.32), 0 4px 14px -6px rgba(46,40,34,.12);
  --shadow-soft:0 10px 26px -14px rgba(46,40,34,.30);
  --shadow-sticker:0 8px 20px -8px rgba(224,83,138,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(60% 55% at 15% 0%, var(--berry-soft) 0%, transparent 58%),
    radial-gradient(55% 55% at 90% 8%, var(--teal-soft) 0%, transparent 55%),
    radial-gradient(70% 60% at 80% 100%, var(--gold-soft) 0%, transparent 60%),
    radial-gradient(60% 60% at 5% 95%, #E3DDF6 0%, transparent 60%),
    var(--cream-2);
  min-height:100svh;
  overflow-x:hidden;
}

/* ---------- floating doodles ---------- */
.doodles{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden}
.doodle{position:absolute; opacity:.85; filter:drop-shadow(0 8px 14px rgba(46,40,34,.10));
  animation:float 12s ease-in-out infinite, spin 26s linear infinite;}
.d1{width:74px; top:14%;  left:9%;  animation-duration:13s,30s}
.d2{width:92px; top:70%;  left:6%;  opacity:.7;  animation-duration:15s,34s; animation-direction:normal,reverse}
.d3{width:118px;top:22%;  right:8%; opacity:.65; animation:float 14s ease-in-out infinite}
.d4{width:88px; top:74%;  right:9%; opacity:.7;  animation-duration:16s,38s}
.d5{width:44px; top:12%;  right:26%;opacity:.9;  animation:twinkle 5s ease-in-out infinite}
.d6{width:40px; top:82%;  left:32%; opacity:.85; animation:float 9s ease-in-out infinite}
.d7{width:56px; top:44%;  left:3%;  opacity:.6;  animation-duration:14s,32s; animation-direction:reverse,normal}
.d8{width:34px; top:60%;  right:20%;opacity:.85; animation:twinkle 6.5s ease-in-out infinite .6s}

@keyframes float{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-22px) rotate(6deg)}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes twinkle{
  0%,100%{transform:scale(.85) rotate(0deg); opacity:.55}
  50%{transform:scale(1.15) rotate(20deg); opacity:1}
}

/* ---------- stage ---------- */
.stage{position:relative; z-index:1; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px; padding:40px 22px;}

.card{
  width:min(560px,100%);
  background:linear-gradient(180deg,var(--paper),var(--white));
  border:1px solid var(--line);
  border-radius:34px;
  box-shadow:var(--shadow-card);
  padding:46px 40px 40px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}

.eyebrow{
  font-family:var(--font-display); font-weight:700; font-size:12px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--berry-deep);
  background:var(--berry-soft); border:1px solid #F3C4D6;
  padding:7px 16px; border-radius:999px;
  box-shadow:var(--shadow-sticker);
}

/* ---------- logo ---------- */
.logo{display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:6px}
.mark{width:88px; height:88px; animation:sway 6s ease-in-out infinite; transform-origin:50% 70%}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.wordmark{
  font-family:var(--font-logo); font-weight:600; font-size:clamp(58px,13vw,84px);
  line-height:.9; color:var(--ink); margin:2px 0 0;
}
.swash{width:min(280px,80%); height:auto; margin-top:-4px}

/* ---------- copy ---------- */
.headline{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(26px,5.4vw,34px); color:var(--ink);
  margin:22px 0 0; letter-spacing:.005em;
}
.sub{
  font-family:var(--font-body); font-size:clamp(15px,3.6vw,17px);
  line-height:1.6; color:var(--ink-soft); margin:12px 0 0; max-width:38ch;
}
.hand{display:inline-block; font-family:var(--font-hand); font-weight:700;
  font-size:1.5em; color:var(--berry); margin-top:6px}

/* ---------- socials ---------- */
.socials{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:32px}
.soc{
  width:52px; height:52px; display:grid; place-items:center;
  border-radius:999px; color:var(--ink);
  background:var(--white); border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.soc svg{width:24px; height:24px}
.soc:hover{transform:translateY(-4px) scale(1.06)}
.soc:active{transform:scale(.94)}
.soc[data-brand="ig"]:hover{background:var(--berry);color:#fff;border-color:var(--berry)}
.soc[data-brand="tt"]:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.soc[data-brand="fb"]:hover{background:#2F6BD8;color:#fff;border-color:#2F6BD8}
.soc[data-brand="wa"]:hover{background:var(--sage);color:#fff;border-color:var(--sage)}
.soc[data-brand="yt"]:hover{background:var(--berry-deep);color:#fff;border-color:var(--berry-deep)}
.soc[data-brand="th"]:hover{background:var(--teal);color:#fff;border-color:var(--teal)}

/* ---------- email pill ---------- */
.mailpill{
  display:inline-flex; align-items:center; gap:9px; margin-top:26px;
  font-family:var(--font-display); font-weight:600; font-size:15px;
  color:var(--ink); text-decoration:none;
  background:var(--gold-soft); border:1px solid #EFD5A2;
  padding:11px 20px; border-radius:999px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.mailpill svg{width:20px; height:20px; color:var(--terracotta,#C1734B)}
.mailpill:hover{transform:translateY(-3px); box-shadow:var(--shadow-soft)}
.mailpill:active{transform:scale(.97)}

/* ---------- footer ---------- */
.foot{
  display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center;
  font-family:var(--font-display); font-weight:500; font-size:12.5px;
  letter-spacing:.02em; color:var(--ink-faint); text-align:center;
}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(16px); animation:rise .8s cubic-bezier(.2,.8,.2,1) .1s forwards}
@keyframes rise{to{opacity:1; transform:none}}

/* ---------- responsive ---------- */
@media (max-width:480px){
  .card{padding:38px 22px 32px; border-radius:28px}
  .socials{gap:11px}
  .soc{width:48px;height:48px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .doodle,.mark,.reveal{animation:none !important}
  .reveal{opacity:1; transform:none}
}