/* ============================================================
   Truth or Dare: Spin the Bottle — by NeuralPath Technologies
   "A neon sign at a house party." Dark is the brand, not a mode.
   Glow is the elevation system, not shadow. (Brief §4)
   Poppins. Built to feel alive + playable.
   ============================================================ */

:root {
  /* backgrounds */
  --bg:#0A0A14; --bg-2:#0E0E1B; --surface:#14141F; --surface-2:#1B1B29;
  --overlay:rgba(6,6,12,.72);

  /* accents */
  --pink:#FF3D77; --amber:#FFC93F; --amber-2:#FFA83F; --cyan:#3FC1FF;
  --violet:#8B5CF6; --mint:#4ADE80; --sky:#38BDF8; --danger:#FF6B4A;

  /* text */
  --ink:#FFFFFF; --ink-2:#C8C8D4; --ink-3:#7D7D8C; --line:#242433; --line-2:#30303F;

  --cta:linear-gradient(115deg,#FF3D77 0%,#FFA83F 60%,#FFC93F 100%);

  --display:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"Space Mono", ui-monospace, "SF Mono", monospace;

  --maxw:1120px; --pad:clamp(20px,5vw,40px);

  /* glow elevation (brief §4.4) — pair each with its accent rgb */
  --focus:#FFC93F; --select-bg:rgba(255,61,119,.28);
  color-scheme: dark;
}

* { box-sizing:border-box; }
body {
  font-family:var(--body); color:var(--ink); background:var(--bg);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 1;
  background-image:
    radial-gradient(760px 520px at 82% -6%, rgba(139,92,246,.20), transparent 60%),
    radial-gradient(680px 480px at 6% 4%, rgba(255,61,119,.14), transparent 60%);
  background-attachment:fixed;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }

.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section { padding-block:clamp(56px,9vw,100px); position:relative; }
.tnum { font-variant-numeric:tabular-nums; }

.eyebrow {
  font-family:var(--mono); font-size:.71rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amber); display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before { content:""; width:20px; height:1px; background:currentColor; opacity:.55; }
.arrow { display:inline-block; transition:transform .3s cubic-bezier(.22,1,.36,1); }
a:hover .arrow { transform:translate(3px,-3px); }

/* accent-hue helper — set on chips/cards to theme glow + text */
.h-pink   { --hue:var(--pink);   --hrgb:255,61,119; }
.h-amber  { --hue:var(--amber);  --hrgb:255,201,63; }
.h-cyan   { --hue:var(--cyan);   --hrgb:63,193,255; }
.h-violet { --hue:var(--violet); --hrgb:139,92,246; }
.h-mint   { --hue:var(--mint);   --hrgb:74,222,128; }
.h-sky    { --hue:var(--sky);    --hrgb:56,189,248; }

/* ---------- nav ---------- */
.nav {
  position:sticky; top:0; z-index:50; padding-block:12px;
  background:color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid transparent; transition:border-color .3s;
}
.nav.is-stuck { border-bottom-color:var(--line); }
.nav__inner { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:inline-flex; align-items:center; gap:11px; }
.brand__mark { width:40px; height:40px; border-radius:12px; flex:none; box-shadow:0 0 22px rgba(255,61,119,.5); }
.brand__name { font-weight:800; font-size:1.02rem; letter-spacing:-.02em; }
.brand__tag { display:block; font-family:var(--mono); font-size:.54rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:1px; }
.nav__links { display:flex; align-items:center; gap:22px; }
.nav__links a { font-size:.9rem; font-weight:600; color:var(--ink-2); transition:color .2s; }
.nav__links a:hover { color:var(--ink); }
.nav__up { display:inline-flex; align-items:center; gap:6px; }
.nav__cta {
  color:#180008 !important; font-weight:700; font-size:.88rem; padding:10px 18px; border-radius:999px;
  background:var(--cta); box-shadow:0 0 24px rgba(255,61,119,.5); transition:transform .18s, box-shadow .2s;
}
.nav__cta:hover { transform:translateY(-1px); box-shadow:0 0 30px rgba(255,61,119,.7); }

/* ---------- HERO ---------- */
.hero { position:relative; overflow:hidden; padding-top:clamp(30px,6vw,58px); padding-bottom:clamp(60px,10vw,104px); }
.hero__bloom {
  position:absolute; z-index:0; pointer-events:none; inset:-20% -10% auto -10%; height:120%;
  background:
    radial-gradient(48% 42% at 70% 30%, rgba(139,92,246,.34), transparent 62%),
    radial-gradient(44% 40% at 26% 22%, rgba(255,61,119,.28), transparent 62%),
    radial-gradient(40% 40% at 50% 82%, rgba(63,193,255,.16), transparent 66%);
  filter:saturate(120%);
}
.hero__grid { position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,4vw,56px); align-items:center; }

/* scattered idle line-icons around the wordmark */
.spark { position:absolute; z-index:1; opacity:.85; pointer-events:none; filter:drop-shadow(0 0 8px currentColor); }
.spark svg { width:100%; height:100%; }
.spark.s1 { top:2%;  left:40%; width:30px; color:var(--cyan);   animation:floaty 5.2s ease-in-out infinite; }
.spark.s2 { top:16%; left:2%;  width:26px; color:var(--amber);  animation:floaty 6.1s ease-in-out .4s infinite; }
.spark.s3 { top:44%; left:44%; width:22px; color:var(--pink);   animation:floaty 5.6s ease-in-out .8s infinite; }
.spark.s4 { top:6%;  left:88%; width:24px; color:var(--mint);   animation:floaty 6.6s ease-in-out .2s infinite; }
.spark.s5 { top:60%; left:6%;  width:20px; color:var(--violet); animation:floaty 5.9s ease-in-out 1s infinite; }
@keyframes floaty { 0%,100%{ transform:translateY(0) rotate(-4deg);} 50%{ transform:translateY(-10px) rotate(4deg);} }

.wordmark { display:grid; gap:2px; line-height:.94; }
.wordmark span { font-weight:800; letter-spacing:-.02em; text-transform:uppercase; }
.wordmark .w-truth { font-size:clamp(2.6rem,12vw,5rem); color:#EAF6FF; text-shadow:0 0 6px rgba(63,193,255,.9), 0 0 30px rgba(63,193,255,.55); }
.wordmark .w-or    { font-size:clamp(1rem,3.4vw,1.5rem); color:var(--ink-2); letter-spacing:.4em; padding-left:.2em; }
.wordmark .w-dare  { font-size:clamp(2.6rem,12vw,5rem); color:#FFEAF1; text-shadow:0 0 6px rgba(255,61,119,.9), 0 0 30px rgba(255,61,119,.55); }
.ribbon {
  display:inline-block; margin-top:16px; font-family:var(--mono); font-weight:700; font-size:clamp(.8rem,2.4vw,1rem);
  letter-spacing:.22em; text-transform:uppercase; color:#1a1206;
  background:linear-gradient(120deg,#FFD666,var(--amber)); padding:7px 16px; border-radius:999px;
  box-shadow:0 0 26px rgba(255,201,63,.5); transform:rotate(-1.5deg);
}
.hero__sub { margin-top:22px; max-width:34em; font-size:clamp(1rem,1.5vw,1.16rem); color:var(--ink-2); line-height:1.62; }
.hero__cta { margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.trust { margin-top:22px; display:flex; flex-wrap:wrap; gap:10px 18px; font-size:.85rem; color:var(--ink-2); }
.trust span { display:inline-flex; align-items:center; gap:8px; font-weight:600; }
.trust .g { font-size:1rem; }

/* store badges */
.stores { display:flex; flex-wrap:wrap; gap:12px; }
.store {
  position:relative; display:inline-flex; align-items:center; gap:11px; padding:11px 17px; border-radius:14px; color:#fff;
  background:var(--surface); border:1px solid var(--line-2); box-shadow:0 0 0 rgba(0,0,0,0); transition:transform .18s, box-shadow .2s, border-color .2s;
}
.store:hover { transform:translateY(-2px); border-color:rgba(255,201,63,.5); box-shadow:0 0 22px rgba(255,201,63,.22); }
.store svg { width:22px; height:22px; flex:none; }
.store .s1 { display:block; font-size:.62rem; letter-spacing:.04em; opacity:.72; }
.store .s2 { display:block; font-size:.98rem; font-weight:700; letter-spacing:-.01em; margin-top:1px; }
.store__soon {
  position:absolute; top:-9px; right:-8px; font-family:var(--mono); font-size:.53rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#180008; background:var(--amber);
  padding:3px 7px; border-radius:999px; box-shadow:0 0 14px rgba(255,201,63,.6);
}

/* ============================================================
   THE SIGNATURE — live spin-the-bottle (hero, playable)
   ============================================================ */
.game {
  position:relative; border-radius:26px; padding:clamp(18px,3vw,26px);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid var(--line-2);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06), 0 0 60px -20px rgba(139,92,246,.4);
  backdrop-filter:blur(6px);
}
.game__stage { position:relative; width:min(360px,84vw); margin:2px auto 0; aspect-ratio:1; }
.wheel { position:absolute; inset:0; }
.wheel svg { width:100%; height:100%; display:block; overflow:visible; }
.bottle {
  transform-box:view-box; transform-origin:150px 150px;
  transition:transform 3.4s cubic-bezier(.16,.84,.28,1); will-change:transform;
  filter:drop-shadow(0 0 10px rgba(255,201,63,.7));
}
.seat { transition:opacity .25s; }
.seat.on .seat__ring { stroke:var(--amber); filter:drop-shadow(0 0 8px rgba(255,201,63,.9)); }
.seat.on .seat__lbl { fill:#fff; }
.game__hub {
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
}
.hub-num { font-family:var(--mono); font-weight:700; font-size:.72rem; color:var(--ink-3); letter-spacing:.14em; text-transform:uppercase; }

.game__ui { margin-top:16px; }
.mode { display:flex; gap:8px; justify-content:center; margin-bottom:14px; }
.mode button {
  font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line-2); padding:8px 14px; border-radius:999px;
  transition:all .2s;
}
.mode button[aria-pressed="true"] { color:#0A0A14; background:var(--cta); border-color:transparent; box-shadow:0 0 18px rgba(255,61,119,.45); }
.spin-btn {
  width:100%; justify-content:center; font-family:var(--display); font-weight:800; font-size:1.05rem; letter-spacing:.02em;
  color:#180008; background:var(--cta); border:none; border-radius:16px; padding:15px; cursor:pointer;
  box-shadow:0 0 30px rgba(255,61,119,.5); transition:transform .12s, box-shadow .2s; display:flex; align-items:center; gap:9px;
}
.spin-btn:hover { box-shadow:0 0 40px rgba(255,61,119,.7); }
.spin-btn:active { transform:scale(.97); }
.spin-btn[disabled] { opacity:.6; cursor:progress; }

/* result card (flips up under the wheel) */
.result {
  margin-top:14px; border-radius:18px; border:1px solid var(--line-2); background:var(--surface);
  padding:18px 18px 16px; opacity:0; transform:translateY(10px); transition:opacity .35s, transform .35s, border-color .3s, box-shadow .3s;
  min-height:0;
}
.result.show { opacity:1; transform:none; }
.result.truth { border-color:rgba(63,193,255,.5); box-shadow:0 0 34px -12px rgba(63,193,255,.6); }
.result.dare  { border-color:rgba(255,61,119,.5); box-shadow:0 0 34px -12px rgba(255,61,119,.6); }
.result__top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.result__kind { font-family:var(--mono); font-weight:700; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; }
.result.truth .result__kind { color:var(--cyan); }
.result.dare  .result__kind { color:var(--pink); }
.result__who { font-size:.78rem; color:var(--ink-3); font-weight:600; }
.result__txt { margin-top:9px; font-size:1.08rem; font-weight:500; line-height:1.4; color:#fff; text-wrap:balance; min-height:2.5em; }
.result__row { margin-top:14px; display:flex; gap:9px; }
.reroll {
  font-size:.82rem; font-weight:700; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line-2);
  border-radius:11px; padding:9px 14px; transition:all .2s; display:inline-flex; align-items:center; gap:7px;
}
.reroll:hover { color:#fff; border-color:var(--line-2); background:var(--bg-2); }
.reroll .free { font-family:var(--mono); font-size:.6rem; color:var(--mint); letter-spacing:.06em; }
.game__hint { margin-top:12px; text-align:center; font-size:.76rem; color:var(--ink-3); }
@media (prefers-reduced-motion: reduce) {
  .bottle { transition:transform .3s ease; } .spark { animation:none !important; }
}

/* ---------- moving category marquee (alive band) ---------- */
.marquee { position:relative; overflow:hidden; padding-block:16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); }
.marquee::before, .marquee::after { content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none; }
.marquee::before { left:0; background:linear-gradient(90deg,var(--bg-2),transparent); }
.marquee::after { right:0; background:linear-gradient(270deg,var(--bg-2),transparent); }
.marquee__track { display:flex; gap:14px; width:max-content; animation:scrollx 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state:paused; }
@keyframes scrollx { to { transform:translateX(-50%); } }
.mchip {
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap; font-weight:700; font-size:.9rem;
  padding:9px 16px; border-radius:999px; background:var(--surface); border:1px solid rgba(var(--hrgb),.35);
  color:#fff; box-shadow:0 0 14px -4px rgba(var(--hrgb),.5);
}
.mchip .dot { width:8px; height:8px; border-radius:50%; background:var(--hue); box-shadow:0 0 8px var(--hue); }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation:none; flex-wrap:wrap; width:auto; justify-content:center; } .marquee::before,.marquee::after{display:none;} }

/* ---------- section head ---------- */
.head { max-width:46rem; }
.head h2 { font-weight:800; font-size:clamp(1.75rem,3.8vw,2.6rem); letter-spacing:-.03em; margin-top:14px; }
.head p { margin-top:13px; font-size:1.04rem; color:var(--ink-2); line-height:1.65; }
.head--center { margin-inline:auto; text-align:center; }
.head--center .eyebrow { justify-content:center; }

/* ---------- how it works (steps) ---------- */
.steps { margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.step { position:relative; padding:26px 22px; border-radius:18px; background:var(--surface); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); transition:transform .25s, border-color .25s; }
.step:hover { transform:translateY(-4px); border-color:var(--line-2); }
.step__n { font-family:var(--mono); font-weight:700; font-size:.82rem; color:#0A0A14; background:var(--cta); width:36px; height:36px; border-radius:11px; display:grid; place-items:center; box-shadow:0 0 20px rgba(255,61,119,.45); }
.step h3 { font-size:1.08rem; font-weight:700; margin-top:16px; }
.step p { margin-top:8px; font-size:.92rem; color:var(--ink-2); line-height:1.55; }
.step__arrow { position:absolute; top:38px; right:-12px; color:var(--ink-3); font-size:20px; z-index:2; }
.step:last-child .step__arrow { display:none; }

/* ---------- feature grid ---------- */
.features { margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feat {
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:24px 22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04); transition:transform .28s cubic-bezier(.22,1,.36,1), border-color .28s, box-shadow .28s;
}
.feat:hover { transform:translateY(-6px); border-color:rgba(var(--hrgb,255,201,63),.5); box-shadow:0 0 34px -14px rgba(var(--hrgb,255,201,63),.7); }
.feat__ic { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:24px; background:rgba(var(--hrgb,255,201,63),.12); border:1px solid rgba(var(--hrgb,255,201,63),.3); box-shadow:0 0 16px -6px rgba(var(--hrgb,255,201,63),.7); }
.feat h3 { font-size:1.14rem; font-weight:700; letter-spacing:-.01em; margin-top:16px; }
.feat p { margin-top:8px; color:var(--ink-2); font-size:.93rem; line-height:1.58; }
.feat .tag-soon { position:absolute; top:16px; right:16px; font-family:var(--mono); font-size:.54rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); background:rgba(255,201,63,.12); border:1px solid rgba(255,201,63,.3); padding:3px 8px; border-radius:999px; }

/* ---------- categories grid ---------- */
.cats { margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cat {
  position:relative; border-radius:18px; padding:22px 20px; background:var(--surface); overflow:hidden;
  border:1px solid rgba(var(--hrgb),.4); box-shadow:0 0 26px -16px rgba(var(--hrgb),.9); transition:transform .25s, box-shadow .25s;
}
.cat::before { content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 100% 0%, rgba(var(--hrgb),.18), transparent 55%); pointer-events:none; }
.cat:hover { transform:translateY(-5px); box-shadow:0 0 34px -10px rgba(var(--hrgb),.8); }
.cat__top { display:flex; align-items:center; gap:11px; }
.cat__dot { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-size:17px; background:rgba(var(--hrgb),.16); border:1px solid rgba(var(--hrgb),.4); flex:none; }
.cat h3 { font-size:1.05rem; font-weight:700; letter-spacing:-.01em; }
.cat .tag { font-family:var(--mono); font-size:.56rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--hue); }
.cat p { margin-top:11px; font-size:.88rem; color:var(--ink-2); line-height:1.55; position:relative; }
.cat.wide { grid-column:span 1; }
.cat__flag { display:inline-block; margin-top:12px; font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.06em; color:var(--mint); background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.3); padding:4px 9px; border-radius:999px; }

/* ---------- showcase (photo + copy) ---------- */
.showcase { margin-top:48px; display:grid; gap:clamp(38px,7vw,80px); }
.show-row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,58px); align-items:center; }
.show-row:nth-child(even) .show-visual { order:-1; }
.show-copy h3 { font-size:clamp(1.35rem,2.6vw,1.95rem); font-weight:800; letter-spacing:-.02em; margin-top:12px; }
.show-copy > p { margin-top:13px; color:var(--ink-2); font-size:1.02rem; line-height:1.68; max-width:44ch; }
.show-copy ul { margin-top:18px; display:grid; gap:11px; padding:0; list-style:none; }
.show-copy li { display:flex; gap:11px; align-items:flex-start; font-size:.96rem; color:var(--ink-2); line-height:1.5; }
.show-copy li .ck { color:var(--mint); font-weight:800; flex:none; }
.photo { position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--line-2); box-shadow:0 30px 70px -40px #000, 0 0 50px -26px rgba(139,92,246,.7); aspect-ratio:4/3; }
.photo img { width:100%; height:100%; object-fit:cover; }
.photo::after { content:""; position:absolute; inset:0; background:linear-gradient(205deg, rgba(255,61,119,.12), rgba(10,10,20,.62)); }
.photo--tall { aspect-ratio:3/4; }
.photo__badge {
  position:absolute; z-index:2; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:9px;
  background:color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter:blur(10px);
  border:1px solid var(--line-2); border-radius:14px; padding:10px 13px; font-weight:700; font-size:.82rem; box-shadow:0 0 24px -10px rgba(0,0,0,.9);
}
.photo__badge small { display:block; font-size:.62rem; color:var(--ink-3); font-weight:600; }
.photo__badge .ic { width:28px; height:28px; border-radius:9px; display:grid; place-items:center; font-size:15px; background:rgba(255,61,119,.14); border:1px solid rgba(255,61,119,.34); }

/* ---------- safety band ---------- */
.safety {
  position:relative; border-radius:26px; overflow:hidden; padding:clamp(30px,5vw,52px);
  background:linear-gradient(155deg, #12122a, #17102a 55%, #0c0c1a); border:1px solid var(--line-2);
  box-shadow:0 40px 90px -50px #000;
}
.safety::before { content:""; position:absolute; inset:0; background:radial-gradient(560px 300px at 88% 8%, rgba(74,222,128,.22), transparent 60%); pointer-events:none; }
.safety__in { position:relative; display:grid; grid-template-columns:1.25fr 1fr; gap:38px; align-items:center; }
.safety .eyebrow { color:var(--mint); }
.safety h2 { font-weight:800; font-size:clamp(1.6rem,3.4vw,2.35rem); letter-spacing:-.03em; margin-top:12px; }
.safety p { margin-top:13px; color:var(--ink-2); font-size:1.02rem; line-height:1.65; max-width:44ch; }
.safety__list { display:grid; gap:11px; padding:0; list-style:none; }
.safety__list li { display:flex; gap:11px; align-items:flex-start; font-size:.96rem; color:#E7E7EF; }
.safety__list .ck { color:var(--mint); font-weight:800; flex:none; }
.safety__row { margin-top:22px; }

/* ---------- ambient video band ---------- */
.vibe { position:relative; overflow:hidden; }
.vibe__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.9; }
.vibe::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,10,20,.72), rgba(10,10,20,.86)); }
.vibe__in { position:relative; z-index:2; text-align:center; max-width:44rem; margin-inline:auto; }
.vibe h2 { font-weight:800; font-size:clamp(1.7rem,4vw,2.7rem); letter-spacing:-.03em; }
.vibe p { margin-top:14px; color:var(--ink-2); font-size:1.06rem; line-height:1.6; }
.vibe__row { margin-top:26px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---------- pricing ---------- */
.pricing { margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:840px; }
.plan { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:28px; }
.plan.pro { border-color:rgba(255,201,63,.5); box-shadow:0 0 40px -18px rgba(255,201,63,.7); }
.plan .tier { font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.plan .price { font-weight:800; font-size:2rem; letter-spacing:-.02em; margin-top:8px; }
.plan .price small { font-size:.9rem; color:var(--ink-2); font-weight:600; }
.plan ul { margin-top:18px; display:grid; gap:11px; padding:0; list-style:none; }
.plan li { display:flex; gap:10px; font-size:.94rem; color:var(--ink-2); line-height:1.5; }
.plan li .ck { color:var(--mint); font-weight:800; flex:none; }
.plan .badge-soon { position:absolute; top:-11px; right:22px; font-family:var(--mono); font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#180008; background:var(--amber); padding:4px 10px; border-radius:999px; box-shadow:0 0 16px rgba(255,201,63,.5); }

/* ---------- download band ---------- */
.download { text-align:center; }
.download__card { position:relative; overflow:hidden; border-radius:30px; padding:clamp(38px,6vw,64px);
  background:linear-gradient(150deg,#1a0f28,#28102e 55%,#0e0c1c); border:1px solid var(--line-2); box-shadow:0 40px 90px -50px #000; }
.download__card::before { content:""; position:absolute; inset:0; background:
  radial-gradient(420px 240px at 14% 16%, rgba(255,61,119,.28), transparent 60%),
  radial-gradient(420px 240px at 86% 84%, rgba(63,193,255,.2), transparent 60%); pointer-events:none; }
.download__in { position:relative; }
.download h2 { font-weight:800; font-size:clamp(1.85rem,4vw,2.8rem); letter-spacing:-.03em; }
.download p { margin-top:13px; color:var(--ink-2); font-size:1.05rem; max-width:36rem; margin-inline:auto; line-height:1.6; }
.download .stores { justify-content:center; margin-top:26px; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:.95rem; border-radius:999px; padding:13px 22px; transition:transform .16s, box-shadow .2s, background .2s; cursor:pointer; border:none; }
.btn--primary { color:#180008; background:var(--cta); box-shadow:0 0 28px rgba(255,61,119,.5); }
.btn--primary:hover { transform:translateY(-2px); box-shadow:0 0 38px rgba(255,61,119,.7); }
.btn--wire { color:#fff; border:1px solid var(--line-2); background:rgba(255,255,255,.05); }
.btn--wire:hover { background:rgba(255,255,255,.1); transform:translateY(-2px); }
.btn--mint { color:#08160e; background:linear-gradient(135deg,#6EE7A0,var(--mint)); box-shadow:0 0 26px rgba(74,222,128,.45); }
.btn--mint:hover { transform:translateY(-2px); }
.btn--ghost { color:var(--ink); border:1px solid var(--line-2); background:var(--surface); }
.btn--ghost:hover { border-color:rgba(255,201,63,.5); }
.btn--block { width:100%; justify-content:center; }

/* ---------- FAQ ---------- */
.faq { margin-top:44px; display:grid; gap:13px; max-width:840px; }
.faq details { background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:2px 22px; transition:border-color .2s; }
.faq details[open] { border-color:rgba(255,201,63,.4); }
.faq summary { cursor:pointer; list-style:none; padding:18px 0; font-weight:700; font-size:1.02rem; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:1.5rem; line-height:1; color:var(--amber); font-weight:300; transition:transform .25s; flex:none; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { padding:0 2px 20px; margin:0; color:var(--ink-2); line-height:1.7; font-size:.97rem; }
.faq details p a { color:var(--cyan); font-weight:600; }

/* ---------- footer ---------- */
.foot { background:var(--bg-2); border-top:1px solid var(--line); padding-block:52px 38px; color:var(--ink); }
.foot__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; }
.foot__brand { display:flex; align-items:center; gap:11px; }
.foot__brand img { width:36px; height:36px; border-radius:11px; }
.foot__brand .nm { font-weight:800; font-size:1.02rem; }
.foot__blurb { margin-top:15px; max-width:34ch; color:var(--ink-2); font-size:.9rem; line-height:1.6; }
.foot__col h4 { font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; }
.foot__col a { display:block; font-size:.9rem; color:var(--ink-2); margin-bottom:10px; transition:color .2s; }
.foot__col a:hover { color:var(--amber); }
.foot__legal { margin-top:40px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.78rem; color:var(--ink-3); line-height:1.6; }
.foot__legal a { color:var(--ink-2); } .foot__legal a:hover { color:var(--amber); }
.foot__disc { margin-top:14px; font-size:.74rem; color:var(--ink-3); max-width:78ch; line-height:1.6; }

/* ---------- sticky mobile CTA bar ---------- */
.dockbar { display:none; }
@media (max-width:700px) {
  .dockbar {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; gap:12px; align-items:center; justify-content:space-between;
    padding:11px 16px calc(11px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--bg) 88%, transparent);
    backdrop-filter:blur(14px); border-top:1px solid var(--line-2);
  }
  .dockbar .lbl { font-weight:800; font-size:.9rem; }
  .dockbar .lbl small { display:block; font-size:.66rem; color:var(--ink-3); font-weight:600; }
  .dockbar .btn { padding:11px 18px; }
  body { padding-bottom:72px; }
}

/* ---------- legal / long-form ---------- */
.legal-head { padding-block:clamp(38px,7vw,60px) 6px; }
.legal-head h1 { font-weight:800; font-size:clamp(1.85rem,4vw,2.7rem); letter-spacing:-.03em; margin-top:13px; }
.legal-head .meta { margin-top:10px; color:var(--ink-2); font-size:.9rem; }
.legal-head .lede { margin-top:20px; max-width:62ch; color:var(--ink-2); font-size:1.04rem; line-height:1.8; }
.legal { padding-block:14px clamp(60px,9vw,96px); }
.legal__grid { display:grid; grid-template-columns:220px 1fr; gap:52px; align-items:start; }
.legal__nav { position:sticky; top:86px; display:grid; gap:2px; }
.legal__nav a { font-size:.85rem; color:var(--ink-3); padding:8px 0 8px 14px; border-left:2px solid var(--line); transition:color .2s, border-color .2s; }
.legal__nav a:hover { color:var(--amber); border-color:var(--amber); }
.legal__col { max-width:640px; }
.legal__col h2 { font-size:1.28rem; font-weight:800; letter-spacing:-.01em; margin-top:52px; padding-bottom:14px; border-bottom:1px solid var(--line); scroll-margin-top:86px; }
.legal__col h2:first-child { margin-top:0; }
.legal__col h3 { font-size:1.02rem; font-weight:700; margin-top:30px; }
.legal__col p { margin-top:18px; color:var(--ink-2); font-size:1.0rem; line-height:1.85; }
.legal__col ul { margin-top:18px; padding-left:24px; display:grid; gap:12px; }
.legal__col li { color:var(--ink-2); font-size:1.0rem; line-height:1.75; padding-left:4px; }
.legal__col li::marker { color:var(--ink-3); }
.legal__col strong { color:var(--ink); font-weight:700; }
.legal__col a { color:var(--cyan); font-weight:600; }
.legal__col a:hover { text-decoration:underline; }
.callout { margin-top:22px; margin-bottom:8px; padding:18px 20px; border-radius:14px; background:rgba(74,222,128,.08); border:1px solid rgba(74,222,128,.28); color:#D8F5E4; font-size:.96rem; line-height:1.7; }
.callout.amber { background:rgba(255,201,63,.08); border-color:rgba(255,201,63,.3); color:#F7E9C4; }
.callout.pink { background:rgba(255,61,119,.08); border-color:rgba(255,61,119,.3); color:#F9D6E1; }
.callout b { font-weight:800; color:#fff; }
.legal__table-wrap { margin-top:16px; overflow-x:auto; border-radius:14px; border:1px solid var(--line); }
.legal__table { width:100%; min-width:480px; border-collapse:collapse; font-size:.9rem; }
.legal__table th, .legal__table td { padding:12px 15px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.legal__table th { background:var(--surface-2); color:#fff; font-weight:700; font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; }
.legal__table tr:last-child td { border-bottom:none; }
.legal__table td { color:var(--ink-2); }

/* ---------- reveal ---------- */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; } }

/* ---------- focus ---------- */
:focus-visible { outline:3px solid var(--amber); outline-offset:2px; border-radius:4px; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .features, .cats { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 880px) {
  .hero__grid { grid-template-columns:1fr; }
  .game { max-width:440px; margin-inline:auto; }
  .show-row { grid-template-columns:1fr; gap:24px; }
  .show-visual { order:-1; }
  .steps { grid-template-columns:1fr; }
  .step__arrow { display:none; }
  .pricing { grid-template-columns:1fr; }
  .safety__in { grid-template-columns:1fr; gap:24px; }
  .foot__grid { grid-template-columns:1fr 1fr; }
  .foot__brand-col { grid-column:1 / -1; }
  .legal__grid { grid-template-columns:1fr; gap:8px; }
  .legal__nav { position:static; flex-wrap:wrap; display:flex; gap:8px 18px; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:8px; }
  .legal__nav a { border-left:none; padding-left:0; }
}
@media (max-width: 560px) {
  .nav__links a:not(.nav__cta):not(.nav__up) { display:none; }
  .nav__inner { gap:10px; } .nav__links { gap:12px; }
  .brand__tag { display:none; }
  .features, .cats { grid-template-columns:1fr; }
  .foot__grid { grid-template-columns:1fr; }
  .spark.s3, .spark.s5 { display:none; }
}