/* ================================================================
   FunZone — landing page. Handcrafted, on-brand: warm paper,
   crayon accents, dotted whiteboard, spring motion.
   ================================================================ */
:root{
  --paper:#f7f5ef;
  --paper-2:#fffdf7;
  --ink:#16161d;
  --ink-soft:#4a4a58;
  --coral:#ff5d5d;
  --gold:#ffc53d;
  --mint:#22d3a6;
  --sky:#38bdf8;
  --violet:#a78bfa;
  --line: rgba(22,22,29,.10);
  --shadow-sm: 0 4px 14px -6px rgba(22,22,29,.22);
  --shadow: 0 22px 60px -22px rgba(22,22,29,.42);
  --shadow-lg: 0 40px 90px -30px rgba(22,22,29,.5);
  --r: 22px;
  --display:'Space Grotesk', system-ui, sans-serif;
  --hand:'Caveat', cursive;
  --body:'Inter', system-ui, sans-serif;
  --ease-spring: cubic-bezier(.2,.9,.25,1.2);
  --maxw: 1120px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body{
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--body);
  font-size:17px; line-height:1.6; overflow-x:hidden;
  background-image:radial-gradient(var(--line) 1.4px, transparent 1.4px);
  background-size:26px 26px;
}
a{ color:inherit; }
h1,h2,h3{ font-family:var(--display); font-weight:700; letter-spacing:-.02em; line-height:1.02; margin:0; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.scrawl{ font-family:var(--hand); font-weight:700; }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; backdrop-filter:blur(10px) saturate(1.3);
  background:linear-gradient(to bottom, rgba(247,245,239,.86), rgba(247,245,239,0));
  transition:background .3s, box-shadow .3s;
}
.nav.stuck{ background:rgba(247,245,239,.9); box-shadow:0 1px 0 var(--line); }
.brand{ display:flex; align-items:center; gap:.5rem; font-family:var(--display); font-weight:700; font-size:20px; text-decoration:none; }
.brand .mk{ font-size:22px; transform:rotate(-8deg); display:inline-block; }
.nav-cta{
  font-family:var(--display); font-weight:600; font-size:15px; text-decoration:none;
  background:var(--ink); color:#fff; padding:.55rem 1.05rem; border-radius:999px;
  transition:transform .18s var(--ease-spring), box-shadow .18s; box-shadow:var(--shadow-sm);
}
.nav-cta:hover{ transform:translateY(-2px) scale(1.03); box-shadow:var(--shadow); }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:150px 0 70px; text-align:center; overflow:hidden; }
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:14px;
  color:var(--ink-soft); background:var(--paper-2); border:1px solid var(--line);
  padding:.4rem .9rem; border-radius:999px; box-shadow:var(--shadow-sm); margin-bottom:26px;
}
.hero .eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(34,211,166,.2); }
.hero h1{
  font-size:clamp(46px, 9vw, 104px); line-height:.94;
}
.hero h1 .alive{ position:relative; white-space:nowrap; }
.hero h1 .alive .word{ color:var(--coral); }
.hero h1 .underline{
  position:absolute; left:-2%; right:-2%; bottom:-.06em; height:.34em; z-index:-1;
}
.hero .sub{
  max-width:620px; margin:26px auto 0; font-size:clamp(17px,2.3vw,21px); color:var(--ink-soft);
}
.hero .cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
.btn{
  font-family:var(--display); font-weight:600; font-size:17px; text-decoration:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:.55rem; padding:.95rem 1.6rem; border-radius:999px;
  border:1px solid transparent; transition:transform .18s var(--ease-spring), box-shadow .2s, background .2s;
}
.btn-primary{ background:var(--ink); color:#fff; box-shadow:var(--shadow); }
.btn-primary:hover{ transform:translateY(-3px) scale(1.03); }
.btn-primary .arrow{ transition:transform .2s var(--ease-spring); }
.btn-primary:hover .arrow{ transform:translateX(4px); }
.btn-ghost{ background:var(--paper-2); color:var(--ink); border-color:var(--line); box-shadow:var(--shadow-sm); }
.btn-ghost:hover{ transform:translateY(-3px); }

/* floating crayon doodles in the hero */
.doodle{ position:absolute; pointer-events:none; opacity:.9; }
.doodle.d1{ top:120px; left:6%; width:90px; color:var(--gold); animation:float 7s ease-in-out infinite; }
.doodle.d2{ top:210px; right:7%; width:76px; color:var(--sky); animation:float 6s ease-in-out infinite reverse; }
.doodle.d3{ bottom:90px; left:12%; width:66px; color:var(--violet); animation:float 8s ease-in-out infinite; }
.doodle.d4{ top:300px; right:16%; width:54px; color:var(--mint); animation:float 5.5s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(0);} 50%{ transform:translateY(-16px) rotate(6deg);} }

/* ---------- Video / live demo frame ---------- */
.showcase{ padding:20px 0 40px; }
.frame{
  position:relative; max-width:1000px; margin:0 auto; border-radius:28px; overflow:hidden;
  background:var(--paper-2); box-shadow:var(--shadow-lg); border:1px solid var(--line);
}
.frame .bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); background:rgba(255,253,247,.8); }
.frame .bar i{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.frame .bar .r{ background:#ff5f57; } .frame .bar .y{ background:#febc2e; } .frame .bar .g{ background:#28c840; }
.frame .bar .label{ margin-left:10px; font-size:13px; color:var(--ink-soft); font-family:var(--display); font-weight:500; }
.frame video{ display:block; width:100%; height:auto; background:var(--paper); }
.frame .demo-embed{ position:relative; width:100%; aspect-ratio:16/9; background:var(--paper); }
.frame .demo-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.demo-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; cursor:pointer; background:linear-gradient(160deg, rgba(255,253,247,.4), rgba(247,245,239,.7));
  z-index:2; transition:opacity .4s;
}
.demo-overlay.gone{ opacity:0; pointer-events:none; }
.demo-overlay .play{ width:74px; height:74px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:26px; box-shadow:var(--shadow); transition:transform .2s var(--ease-spring); }
.demo-overlay:hover .play{ transform:scale(1.08); }
.demo-overlay .cap{ font-family:var(--hand); font-size:26px; color:var(--ink); }

/* ---------- Section scaffolding ---------- */
section{ position:relative; }
.band{ padding:88px 0; }
.kicker{ font-family:var(--hand); font-size:26px; color:var(--coral); display:block; margin-bottom:6px; }
.h-section{ font-size:clamp(32px,5vw,52px); max-width:16ch; }
.lead{ color:var(--ink-soft); font-size:19px; max-width:56ch; margin-top:16px; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s var(--ease-spring); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Feature cards ---------- */
.features{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:48px; }
.card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:30px;
  box-shadow:var(--shadow-sm); transition:transform .25s var(--ease-spring), box-shadow .25s;
  position:relative; overflow:hidden;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.card .ic{ font-size:34px; display:inline-grid; place-items:center; width:64px; height:64px; border-radius:18px; margin-bottom:16px; }
.card h3{ font-size:24px; margin-bottom:8px; }
.card p{ color:var(--ink-soft); margin:0; font-size:16.5px; }
.card .blob{ position:absolute; right:-40px; top:-40px; width:130px; height:130px; border-radius:50%; opacity:.14; filter:blur(6px); }
.card.c1 .ic{ background:rgba(255,93,93,.14); } .card.c1 .blob{ background:var(--coral); }
.card.c2 .ic{ background:rgba(56,189,248,.14); } .card.c2 .blob{ background:var(--sky); }
.card.c3 .ic{ background:rgba(167,139,250,.16); } .card.c3 .blob{ background:var(--violet); }
.card.c4 .ic{ background:rgba(34,211,166,.16); } .card.c4 .blob{ background:var(--mint); }

/* ---------- Mechanic strip (draw → alive) ---------- */
.mech{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.step{ text-align:center; padding:26px; }
.step .n{ font-family:var(--hand); font-size:30px; color:var(--gold); }
.step .em{ font-size:52px; display:block; margin:6px 0 12px; }
.step h4{ font-family:var(--display); font-weight:700; font-size:20px; margin:0 0 6px; }
.step p{ color:var(--ink-soft); margin:0; font-size:15.5px; }

/* ---------- Toolbelt ---------- */
.tools{ display:flex; flex-wrap:wrap; gap:12px; margin-top:40px; justify-content:center; }
.chip{
  display:inline-flex; align-items:center; gap:.6rem; background:var(--paper-2); border:1px solid var(--line);
  padding:.7rem 1.1rem; border-radius:999px; font-family:var(--display); font-weight:600; font-size:16px;
  box-shadow:var(--shadow-sm); transition:transform .18s var(--ease-spring);
}
.chip:hover{ transform:translateY(-3px) rotate(-1.5deg); }
.chip .e{ font-size:20px; }
.chip small{ color:var(--ink-soft); font-weight:500; font-size:13.5px; }

/* ---------- Philosophy band ---------- */
.philo{ background:var(--ink); color:var(--paper); border-radius:36px; margin:0 24px; padding:80px 40px; text-align:center; }
.philo h2{ font-size:clamp(34px,6vw,68px); color:var(--paper); }
.philo h2 em{ font-family:var(--hand); font-style:normal; color:var(--gold); }
.philo p{ color:rgba(247,245,239,.7); max-width:52ch; margin:20px auto 0; font-size:19px; }

/* ---------- Sound feature ---------- */
.sound-row{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.eq{ display:flex; align-items:flex-end; gap:7px; height:150px; padding:24px; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); }
.eq span{ flex:1; border-radius:8px 8px 3px 3px; background:linear-gradient(var(--sky), var(--violet)); animation:bar 1.4s ease-in-out infinite; }
.eq span:nth-child(2n){ background:linear-gradient(var(--coral), var(--gold)); animation-duration:1.1s; }
.eq span:nth-child(3n){ background:linear-gradient(var(--mint), var(--sky)); animation-duration:1.7s; }
@keyframes bar{ 0%,100%{ height:22%; } 50%{ height:92%; } }

/* ---------- Final CTA ---------- */
.final{ text-align:center; padding:110px 0 60px; }
.final h2{ font-size:clamp(40px,8vw,92px); }
.final .sub{ color:var(--ink-soft); font-size:20px; margin:18px auto 34px; max-width:46ch; }

/* ---------- Footer ---------- */
.foot{ border-top:1px solid var(--line); padding:36px 0; margin-top:40px; }
.foot .wrap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; color:var(--ink-soft); font-size:15px; }
.foot a{ text-decoration:none; font-weight:600; }
.foot .made{ font-family:var(--hand); font-size:20px; color:var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .features{ grid-template-columns:1fr; }
  .mech{ grid-template-columns:1fr; }
  .sound-row{ grid-template-columns:1fr; }
  .philo{ padding:60px 24px; margin:0 16px; }
  .nav-cta{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}