/* ============================================================
   SPARKL — marketing v2  ·  warm-noir, living-foil
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* palette */
  --terra:#C66544; --terra-deep:#A8442A; --terra-lit:#D77A55;
  --magenta:#FF4FB7; --cyan:#5BD8FF; --gold:#FFD23A;
  --cream:#F2F3F5; --noir:#100A14; --void:#050308;
  --green:#46D58A;

  --cream-70:rgba(242,243,245,.70);
  --cream-60:rgba(242,243,245,.60);
  --cream-45:rgba(242,243,245,.45);
  --cream-12:rgba(242,243,245,.12);
  --cream-08:rgba(242,243,245,.08);

  /* type */
  --display:'Space Grotesk', system-ui, sans-serif;
  --body:'Inter', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;

  /* motion */
  --ease-foil:cubic-bezier(0.22,1,0.36,1);
  --ease-soft:cubic-bezier(0.4,0,0.2,1);

  /* spacing (8pt) */
  --space-section:clamp(120px,14vh,200px);
  --gutter:clamp(20px,5vw,80px);
  --maxw:1320px;

  --foil-angle:120deg;
}

@property --foil-angle{ syntax:'<angle>'; inherits:false; initial-value:120deg; }

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--body);
  background:var(--void);
  color:var(--cream);
  line-height:1.55;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01";
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; color:inherit; }

/* keyboard focus — always visible, even when the custom cursor is active (WCAG 2.4.7) */
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px; }
body.has-cursor a:focus-visible,
body.has-cursor button:focus-visible,
body.has-cursor input:focus-visible{ cursor:auto; }

/* skip-to-content (WCAG 2.4.1) */
.skip-link{
  position:fixed; top:10px; left:10px; z-index:10002;
  transform:translateY(-150%); transition:transform .2s var(--ease-soft);
  background:var(--terra); color:#fff; padding:10px 16px; border-radius:10px;
  font-family:var(--display); font-weight:600; font-size:.9rem;
}
.skip-link:focus{ transform:translateY(0); }

.num,.mono,.countup{ font-variant-numeric:tabular-nums lining-nums; }
.mono{ font-family:var(--mono); letter-spacing:-.01em; }

/* ---------- layout ---------- */
.section{ position:relative; padding-block:var(--space-section); }
.grid{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:repeat(12,1fr);
  column-gap:clamp(16px,2.4vw,32px);
}

/* ---------- type system ---------- */
.eyebrow{
  font-family:var(--display); font-weight:600;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream-60);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow__tick{ width:18px; height:2px; background:var(--terra); border-radius:2px; box-shadow:0 0 10px rgba(198,101,68,.7); }

h1,h2,h3{ font-family:var(--display); font-weight:700; line-height:1.02; letter-spacing:-.03em; }
h2{ font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.05; }
h3{ font-size:1.12rem; letter-spacing:-.02em; font-weight:600; }
.muted{ color:var(--cream-70); }

.sec-head{ grid-column:1 / -1; margin-bottom:clamp(40px,6vw,72px); max-width:34ch; }
.sec-head h2{ margin-top:.6rem; }

/* ============================================================
   GLOBAL OVERLAYS
   ============================================================ */
.grain{ position:fixed; }
.grain-layer{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background:rgba(0,0,0,0);
  filter:url(#grainFilter);
}
/* fallback raster-ish grain via repeating gradient if filter unsupported is fine — keep filter */
.grain-layer::after{ content:""; position:absolute; inset:0; backdrop-filter:none; }

.progress{ position:fixed; inset:0 0 auto 0; height:3px; z-index:10000; background:transparent; }
.progress__bar{
  display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--terra),var(--magenta),var(--cyan));
}

/* custom cursor — a single glowing spark (no ring) */
.cursor{
  position:fixed; top:0; left:0; z-index:10001; pointer-events:none;
  width:13px; height:13px; border-radius:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, var(--terra-lit) 0%, rgba(255,138,101,.6) 38%, rgba(255,138,101,0) 70%);
  box-shadow:0 0 14px 3px rgba(255,138,101,.55), 0 0 4px 1px rgba(255,255,255,.5);
  mix-blend-mode:screen;
  transition:width .2s var(--ease-soft), height .2s, box-shadow .2s, background .2s;
}
.cursor.is-hover{
  width:24px; height:24px;
  background:radial-gradient(circle, var(--magenta) 0%, rgba(255,79,183,.5) 40%, rgba(255,79,183,0) 72%);
  box-shadow:0 0 20px 5px rgba(255,79,183,.5), 0 0 5px 1px rgba(255,255,255,.5);
}
body.has-cursor, body.has-cursor *{ cursor:none; }
@media (pointer:coarse){ .cursor{ display:none; } body.has-cursor, body.has-cursor *{ cursor:auto; } }

/* ---------- aurora glow ---------- */
.aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.aurora__blob{
  position:absolute; border-radius:50%;
  filter:blur(90px); opacity:.5; will-change:transform;
}
.aurora__blob--terra{ width:46vw; height:46vw; background:radial-gradient(circle,rgba(198,101,68,.85),transparent 65%); top:-12%; left:8%; }
.aurora__blob--magenta{ width:38vw; height:38vw; background:radial-gradient(circle,rgba(255,79,183,.55),transparent 65%); top:18%; right:6%; opacity:.4; }
.aurora__blob--cyan{ width:34vw; height:34vw; background:radial-gradient(circle,rgba(91,216,255,.45),transparent 65%); bottom:-10%; left:30%; opacity:.32; }

/* warm top vignette on major sections */
.section::before{
  content:""; position:absolute; inset:0 0 auto 0; height:340px; z-index:0; pointer-events:none;
  background:radial-gradient(120% 100% at 50% -10%,rgba(198,101,68,.16),transparent 70%);
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:16px var(--gutter);
  transition:background .4s var(--ease-soft),backdrop-filter .4s,border-color .4s,padding .4s;
  border-bottom:1px solid transparent;
}
.nav.is-solid{
  background:rgba(16,10,20,.62);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--cream-08);
  padding-block:11px;
}
.nav__brand{ display:flex; align-items:center; gap:9px; }
/* at the very top the big hero lockup carries the brand; the compact nav brand fades in on scroll */
#nav > .nav__brand{ opacity:0; pointer-events:none; transition:opacity .35s var(--ease-soft); }
#nav.is-solid > .nav__brand{ opacity:1; pointer-events:auto; }
.spark-mark{ display:grid; place-items:center; filter:drop-shadow(0 0 7px rgba(198,101,68,.55)); }
.spark-img{ width:30px; height:auto; display:block; }
.footer .spark-img{ width:24px; }
.close__sparkimg{ width:clamp(96px,12vw,140px); height:auto; display:block; filter:drop-shadow(0 6px 30px rgba(198,101,68,.5)); }
.wordmark{ font-family:var(--display); font-weight:700; font-size:1.32rem; letter-spacing:-.04em; }
.nav__links{ display:flex; gap:30px; margin-left:auto; margin-right:6px; }
.nav__links a{ position:relative; font-size:.92rem; color:var(--cream-70); padding:4px 0; transition:color .2s; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-1px; height:1.5px; width:100%; background:var(--terra); transform:scaleX(0); transform-origin:0; transition:transform .28s var(--ease-foil); }
.nav__links a:hover{ color:var(--cream); }
.nav__links a:hover::after{ transform:scaleX(1); }
@media(max-width:760px){ .nav__links{ display:none; } }

/* language switcher (EN / FR flags) */
.lang{ display:flex; align-items:center; gap:5px; }
.lang__btn{ display:flex; align-items:center; padding:3px; background:transparent; border:0; cursor:pointer; border-radius:5px; opacity:.42; transition:opacity .2s var(--ease-soft),transform .2s var(--ease-soft); line-height:0; }
.lang__btn:hover{ opacity:.85; transform:translateY(-1px); }
.lang__btn.is-active{ opacity:1; }
.lang__btn svg{ display:block; width:22px; height:auto; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.lang__btn.is-active svg{ box-shadow:0 0 0 1.5px rgba(242,243,245,.55); }
@media(max-width:760px){ .lang{ margin-left:auto; } .nav{ gap:14px; } }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--display); font-weight:600; font-size:.92rem; border-radius:999px; transition:transform .16s var(--ease-soft),background .2s,box-shadow .2s,border-color .2s; cursor:pointer; }
.btn--pill{
  background:linear-gradient(180deg,var(--terra-lit),var(--terra));
  color:#fff; padding:10px 20px; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 6px 22px rgba(198,101,68,.35), inset 0 1px 0 rgba(255,255,255,.25);
  white-space:nowrap;
}
@media(max-width:420px){ .btn--pill{ padding:9px 15px; font-size:.92rem; } }
.btn--pill:hover{ box-shadow:0 10px 34px rgba(198,101,68,.5), inset 0 1px 0 rgba(255,255,255,.3); transform:translateY(-1px); }
.btn--ghost{ padding:11px 20px; color:var(--cream); border:1px solid var(--cream-12); background:rgba(242,243,245,.03); }
/* Discord CTAs */
.btn--discord{ display:inline-flex; align-items:center; gap:9px; }
.btn--discord .ico-discord{ display:block; flex:0 0 auto; }
.btn--cta{ font-weight:600; }
.btn--lg{ padding:14px 30px; font-size:1.04rem; }
.hero__soon{ margin:14px 0 0; font-size:.82rem; letter-spacing:.02em; color:var(--cream-60); }
.btn--ghost:hover{ border-color:rgba(242,243,245,.28); background:rgba(242,243,245,.06); }
.btn__play{ width:0; height:0; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent var(--terra-lit); }

.appstore{
  display:inline-flex; align-items:center; gap:11px;
  background:#000; border:1px solid rgba(242,243,245,.16);
  border-radius:14px; padding:9px 18px; transition:transform .16s var(--ease-soft),border-color .2s,box-shadow .2s;
}
.appstore:hover{ border-color:rgba(242,243,245,.4); transform:translateY(-1px); box-shadow:0 10px 30px rgba(0,0,0,.5); }
/* pre-launch: visibly inert, no scroll-jump, matches the 'coming soon' reality */
.appstore--soon{ opacity:.78; cursor:default; }
.appstore--soon:hover{ transform:none; border-color:rgba(242,243,245,.16); box-shadow:none; }
.appstore__icon{ display:grid; place-items:center; color:var(--cream); }
.appstore__txt{ display:flex; flex-direction:column; line-height:1.05; }
.appstore__txt small{ font-size:.62rem; letter-spacing:.04em; color:var(--cream-70); text-transform:uppercase; }
.appstore__txt strong{ font-family:var(--display); font-weight:600; font-size:1.06rem; letter-spacing:-.02em; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ min-height:100svh; display:flex; align-items:center; padding-top:clamp(120px,16vh,200px); padding-bottom:clamp(60px,10vh,120px); }
.hero::before{ height:60%; }
.hero__grid{ align-items:center; row-gap:60px; position:relative; z-index:1; }
.hero__copy{ grid-column:1 / 8; }
.hero__stage{ grid-column:8 / 13; position:relative; min-height:520px; }
@media(max-width:980px){
  .hero__copy{ grid-column:1 / -1; }
  .hero__stage{ grid-column:1 / -1; min-height:480px; }
}

/* hero brand lockup — anchors the brand at the very top of the page */
.hero__brand{ display:flex; width:max-content; max-width:100%; align-items:center; gap:13px; margin-bottom:24px; }
.hero__brand-mark{ width:clamp(42px,4.6vw,56px); height:auto; display:block; filter:drop-shadow(0 0 14px rgba(198,101,68,.55)); }
.hero__brand-word{ font-family:var(--display); font-weight:700; font-size:clamp(2rem,3.8vw,2.9rem); letter-spacing:-.045em; color:var(--cream); line-height:1; }

.hero__headline{
  font-size:clamp(2.7rem,5.4vw,4.6rem); letter-spacing:-.035em; line-height:1.0;
  margin:1.1rem 0 1.4rem; max-width:18ch;
}
.hero__headline .line{ display:block; overflow:clip; }
/* deliberate inline accent — gradient only on a non-wrapping phrase so the color stop never bisects a word */
.bleed{ color:transparent; background:linear-gradient(96deg,var(--terra-lit),var(--magenta)); -webkit-background-clip:text; background-clip:text; white-space:nowrap; }
.hero__sub{ font-size:clamp(1.02rem,1.5vw,1.18rem); color:var(--cream-70); max-width:50ch; margin-bottom:2rem; }
.hero__cta{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }

/* per-letter / per-line reveal */
.hero__headline .line{ transform:translateY(110%); opacity:0; }
.no-motion .hero__headline .line{ transform:none; opacity:1; }

/* ---------- foil card (hero + reusable) ---------- */
.foilcard{
  position:relative; width:min(78%,330px); margin-inline:auto;
  border-radius:22px; overflow:hidden;
  transform:perspective(1100px) rotateX(var(--rx,4deg)) rotateY(var(--ry,-8deg));
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8), 0 0 0 1px var(--cream-08);
  transition:transform .25s var(--ease-soft);
  will-change:transform;
}
.foilcard__img,.foilcard>img{ display:block; width:100%; }
.foilcard__img{ aspect-ratio:480/1043; }
.foilcard img{ width:100%; height:auto; display:block; border-radius:22px; }

/* living foil layer */
.foilcard__foil{
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(var(--foil-angle),
      transparent 18%,
      rgba(198,101,68,.55) 34%,
      rgba(255,79,183,.6) 50%,
      rgba(91,216,255,.55) 66%,
      transparent 82%);
  background-size:230% 230%;
  mix-blend-mode:color-dodge;
  opacity:calc(.18 + var(--pf,0) * .55);
  transition:opacity .25s var(--ease-soft);
}
.foilcard__glare{
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(140px 140px at var(--mx,50%) var(--my,40%),rgba(255,255,255,.35),transparent 70%);
  mix-blend-mode:soft-light; opacity:.8;
}

/* floating fragments */
.frag{
  position:absolute; display:flex; flex-direction:column; gap:3px;
  padding:13px 16px; border-radius:16px; z-index:3;
  will-change:transform;
}
.glass{
  background:rgba(28,18,30,.55);
  backdrop-filter:blur(9px) saturate(1.3);
  -webkit-backdrop-filter:blur(9px) saturate(1.3);
  border:1px solid var(--cream-12);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.75);
}
.frag__label{ font-family:var(--display); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cream-60); }
.frag__value{ font-family:var(--display); font-weight:700; font-size:1.3rem; letter-spacing:-.02em; }
.frag__value--sm{ font-size:.96rem; }
.frag__delta{ font-size:.78rem; font-weight:600; }
.frag__delta--up{ color:var(--green); }
.frag__delta--down{ color:#FF6B6B; }
/* tucked to the card's top-right and bottom-left corners — clear of the center art */
.frag--portfolio{ top:2%; right:-8%; }
.frag--grail{ bottom:4%; left:-8%; }
@media(max-width:560px){
  .frag--portfolio{ right:0; } .frag--grail{ left:0; }
  .frag__value{ font-size:1.05rem; }
}

/* chips */
.chip{ font-family:var(--display); font-weight:600; font-size:.62rem; letter-spacing:.08em; padding:3px 8px; border-radius:999px; text-transform:uppercase; }
.chip--ready{ color:var(--green); background:rgba(70,213,138,.14); border:1px solid rgba(70,213,138,.4); }
.chip--near{ color:var(--cyan); background:rgba(91,216,255,.12); border:1px solid rgba(91,216,255,.35); }
.chip--far{ color:var(--cream-60); background:var(--cream-08); border:1px solid var(--cream-12); }
.chip--terra{ color:var(--terra-lit); background:rgba(198,101,68,.16); border:1px solid rgba(198,101,68,.45); }

.scroll-hint{ position:absolute; left:var(--gutter); bottom:30px; z-index:2; display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cream-45); }
.scroll-hint span{ width:1px; height:30px; background:linear-gradient(var(--terra),transparent); animation:scrollpulse 2.4s var(--ease-soft) infinite; }
@keyframes scrollpulse{ 0%,100%{ opacity:.3; transform:scaleY(.6); } 50%{ opacity:1; transform:scaleY(1); } }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust{ padding-block:clamp(50px,8vh,90px); }
.trust::before{ display:none; }
.trust__lede{ grid-column:1 / -1; font-family:var(--display); font-weight:500; font-size:clamp(1.1rem,2.4vw,1.7rem); letter-spacing:-.02em; max-width:24ch; margin-bottom:36px; }
.trust__lede b{ color:var(--cream); font-weight:600; }
.trust__soon{ display:block; margin-top:12px; font-family:var(--display); font-weight:500; font-size:clamp(.72rem,1vw,.82rem); letter-spacing:.04em; color:var(--cream-45); }
.game-tick{ position:relative; }
.game-tick.lit::before{ content:""; position:absolute; left:0; top:-7px; width:100%; height:2px; background:var(--terra); border-radius:2px; transform:scaleX(0); transform-origin:0; animation:tickdraw .5s var(--ease-foil) forwards; }
@keyframes tickdraw{ to{ transform:scaleX(1); } }
.trust__stats{ grid-column:1 / -1; list-style:none; display:flex; flex-wrap:wrap; gap:clamp(16px,2.4vw,38px); align-items:center; }
.trust__stats li{ display:flex; align-items:center; gap:clamp(12px,1.4vw,20px); color:var(--cream-70); font-size:.96rem; }
.trust__stats .num{ font-family:var(--display); font-weight:700; color:var(--cream); font-size:1.15rem; margin-right:.4em; }
.trust__stats .div{ width:1px; height:26px; background:var(--cream-12); transform:scaleY(0); transform-origin:50%; }
.trust__stats li:last-child .div{ display:none; }
.in-view .div{ animation:divdraw .5s var(--ease-foil) .15s forwards; }
@keyframes divdraw{ to{ transform:scaleY(1); } }
/* mobile: separators bunched left + wasted space right — stack one stat per line, drop the dividers */
@media(max-width:620px){
  .trust__stats{ flex-direction:column; align-items:flex-start; gap:14px; }
  .trust__stats li{ width:100%; }
  .trust__stats .div{ display:none; }
}

/* ============================================================
   PINNED DEMO
   ============================================================ */
.pinned{ position:relative; background:var(--void); }
.pinned__driver{ height:520vh; position:relative; }
.pinned__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
}
.pinned__copy{ grid-column:1; padding-left:var(--gutter); max-width:430px; justify-self:start; position:relative; z-index:4; }
.pinned__beats{ position:relative; margin-top:1.2rem; min-height:230px; }
.beat{ position:absolute; inset:0; opacity:0; transform:translateY(18px); transition:opacity .5s var(--ease-foil),transform .5s var(--ease-foil); pointer-events:none; }
.beat.is-active{ opacity:1; transform:none; }
/* no-JS fallback: with JS disabled the first beat (and its callout) stay readable */
html:not(.js) .beat[data-beat="0"]{ opacity:1; transform:none; }
html:not(.js) .callout[data-callout="0"]{ opacity:1; transform:none; }
.beat h2{ font-size:clamp(1.7rem,3vw,2.7rem); margin-bottom:1rem; }
.beat p{ color:var(--cream-70); max-width:42ch; }
/* per-beat phone shot — desktop uses the single cycling device, mobile shows one shot per beat */
/* height:auto overrides the img's HTML height attr (which was beating aspect-ratio and rendering a 260x1043 strip). The shots are already 480x1043, so natural ratio is correct + undistorted. */
.beat__shot{ display:none; width:min(260px,68vw); height:auto; border-radius:30px; background:#000; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.08), 0 30px 70px -30px rgba(0,0,0,.85); }

/* device */
.device{
  grid-column:2; position:relative; z-index:3; justify-self:center;
  /* CSS iPhone frame — true app screen AR (480/1043); bezel + radius drawn here, not baked in */
  width:clamp(250px,26vw,330px); aspect-ratio:480/1043;
  background:linear-gradient(155deg,#1b1b21 0%,#0c0c10 55%,#050507 100%);
  border-radius:clamp(40px,4vw,52px);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.07), inset 0 0 0 6px #050506;
  transform:perspective(1400px) rotateX(var(--drx,0deg)) rotateY(var(--dry,0deg));
  transition:transform .3s var(--ease-soft);
  filter:drop-shadow(0 50px 90px rgba(0,0,0,.7));
  will-change:transform;
}
.device__screens{ position:absolute; inset:clamp(7px,.72vw,10px); overflow:hidden; background:#000; border-radius:clamp(30px,3.2vw,42px); }
/* raw screens fill the bezel cleanly — cover crops a hair of status-bar/home-indicator, never distorts */
.screen{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transform:scale(1.02); transition:opacity .6s var(--ease-foil),transform .6s var(--ease-foil); will-change:opacity; }
.screen.is-active{ opacity:1; transform:scale(1); }
/* (No CSS Dynamic Island: the raw screenshots already include the real iOS status bar + island.) */

/* callouts */
.callouts{ grid-column:3; justify-self:end; padding-right:var(--gutter); position:relative; width:100%; height:100%; z-index:4; }
.callout{
  position:absolute; right:var(--gutter); width:230px; padding:14px 16px; border-radius:16px;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; transform:translateX(20px); transition:opacity .5s var(--ease-foil),transform .5s var(--ease-foil); pointer-events:none;
}
.callout.is-active{ opacity:1; transform:none; }
.callout[data-callout="0"]{ top:24%; }
.callout[data-callout="1"]{ top:34%; }
.callout[data-callout="2"]{ top:30%; }
.callout[data-callout="3"]{ top:40%; }
.callout[data-callout="4"]{ top:46%; }
.callout b{ font-family:var(--display); font-size:1.05rem; letter-spacing:-.02em; }
.callout small{ font-size:.74rem; color:var(--cream-60); }
.callout .pos{ color:var(--green); }
.lead-line{ position:absolute; right:100%; top:50%; width:0; height:1px; background:linear-gradient(90deg,transparent,rgba(198,101,68,.7)); transition:width .5s var(--ease-foil) .1s; }
.callout.is-active .lead-line{ width:clamp(24px,5vw,80px); }
@media(max-width:1080px){ .callouts{ display:none; } .pinned__stage{ grid-template-columns:1fr auto; } .callout{ display:none; } }
@media(max-width:760px){
  /* unpin on mobile: the scroll-pinned 100vh stage clipped longer copy and felt weird.
     Let it flow as a normal stacked section — device on top, all five beats readable below. */
  .pinned__driver{ height:auto; }
  .pinned__stage{ position:static; height:auto; min-height:0; overflow:visible;
    grid-template-columns:1fr; justify-items:center; text-align:center; padding-block:56px; gap:0; }
  .pinned__copy{ grid-column:1; padding:0 var(--gutter); max-width:none; margin-top:0; justify-self:stretch; }
  .pinned__beats{ position:static; min-height:0; margin-top:0; display:flex; flex-direction:column; gap:60px; }
  .beat{ position:static; inset:auto; opacity:1; transform:none; pointer-events:auto; display:flex; flex-direction:column; align-items:center; gap:22px; }
  .beat p{ margin-inline:auto; }
  .device{ display:none; }              /* desktop-only cycling phone; mobile shows .beat__shot per beat */
  .beat__shot{ display:block; }
}

/* step dots */
.steps{ position:absolute; left:50%; bottom:34px; transform:translateX(-50%); display:flex; gap:18px; list-style:none; z-index:5; }
.steps li{ display:flex; align-items:center; gap:7px; font-family:var(--display); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-45); transition:color .3s; }
/* only the FIRST span is the dot — the second span is the text label (was being squashed to a 6px circle) */
.steps li > span:first-child{ width:6px; height:6px; flex:0 0 auto; border-radius:50%; background:var(--cream-12); transition:background .3s,box-shadow .3s,transform .3s; }
.steps li.is-active{ color:var(--cream); }
.steps li.is-active > span:first-child{ background:var(--terra); box-shadow:0 0 10px rgba(198,101,68,.8); transform:scale(1.3); }
@media(max-width:760px){ .steps{ display:none; } } /* unpinned mobile stage: hide the absolute step rail (it stacked on itself) */
@media(max-width:560px){ .steps li{ font-size:0; gap:0; } .steps{ gap:12px; } }

/* ============================================================
   FOIL MOMENT
   ============================================================ */
.foilmoment{ min-height:100svh; display:flex; align-items:center; justify-content:center; gap:clamp(40px,7vw,120px); padding-inline:var(--gutter); background:var(--void); flex-wrap:wrap; }
.foilmoment::before{ display:none; }
.foilmoment__card{ flex:0 0 auto; width:clamp(240px,30vw,360px); }
.foilmoment__card img{ width:100%; height:auto; display:block; border-radius:22px; }
.foilmoment__copy{ flex:0 1 30ch; max-width:30ch; z-index:2; }
.foilmoment__copy h2{ font-size:clamp(1.7rem,3.4vw,2.9rem); margin:.8rem 0; }
.foilmoment__price{ font-family:var(--display); font-weight:600; color:var(--cream-70); }
.foilmoment__price .num{ color:var(--cream); }
@media(max-width:760px){ .foilmoment{ flex-direction:column; } .foilmoment__copy{ text-align:center; } }

/* ============================================================
   FEATURE GRID (bento)
   ============================================================ */
.bento{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cell{
  position:relative; border-radius:22px; overflow:hidden; padding:20px;
  background:rgba(22,14,24,.6); border:1px solid var(--cream-08);
  display:flex; flex-direction:column; gap:14px;
  transition:transform .3s var(--ease-foil),border-color .3s,box-shadow .3s;
}
.cell:hover{ transform:translateY(-4px); border-color:var(--cream-12); box-shadow:0 30px 70px -30px rgba(0,0,0,.8); }
/* uniform crop: a consistent portrait window that shows the TOP of each phone screen, never squished */
/* full app screenshot, edge-to-edge — portrait cell matches the screen, so no crop and no letterbox */
.cell__crop{ position:relative; aspect-ratio:480/1043; border-radius:14px; overflow:hidden; background:#08060c; }
.cell__crop img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-foil),filter .3s; }
.cell:hover .cell__crop img{ transform:scale(1.04); filter:brightness(1.08); }
.cell__txt h3{ margin-bottom:.3rem; }
.cell__txt p{ font-size:.88rem; color:var(--cream-70); }
/* cursor spotlight */
.spotlight::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:0; transition:opacity .3s; background:radial-gradient(260px 260px at var(--mx,50%) var(--my,50%),rgba(255,79,183,.16),transparent 60%); }
.spotlight:hover::after{ opacity:1; }
@media(max-width:900px){ .bento{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .bento{ grid-template-columns:repeat(2,1fr); gap:12px; } .cell{ padding:12px; gap:10px; } .cell__txt h3{ font-size:1rem; } .cell__txt p{ font-size:.82rem; } }

/* ============================================================
   THE HUNT
   ============================================================ */
.hunt__grid{ align-items:center; row-gap:48px; position:relative; z-index:1; }
.hunt__copy{ grid-column:1 / 6; }
.hunt__desk{ grid-column:7 / 13; border-radius:22px; padding:18px; }
@media(max-width:980px){ .hunt__copy,.hunt__desk{ grid-column:1 / -1; } }
.hunt__copy h2{ margin:1rem 0; }
.hunt__copy p{ color:var(--cream-70); max-width:40ch; }
.hunt__summary{ margin-top:1.4rem; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-family:var(--display); }
.hunt__summary .num{ font-weight:700; color:var(--terra-lit); font-size:1.1rem; }
.hunt__deskhead{ display:flex; justify-content:space-between; padding:6px 10px 14px; border-bottom:1px solid var(--cream-08); }
.hunt__rows{ list-style:none; display:flex; flex-direction:column; }
.hrow{ display:grid; grid-template-columns:1.4fr 1fr auto auto; align-items:center; gap:14px; padding:14px 10px; border-bottom:1px solid var(--cream-08); }
.hrow:last-child{ border-bottom:none; }
.hrow__name{ font-family:var(--display); font-weight:500; font-size:.92rem; letter-spacing:-.01em; }
.hrow__bar{ position:relative; height:6px; border-radius:999px; background:var(--cream-08); overflow:hidden; }
.hrow__bar i{ position:absolute; inset:0; transform-origin:0; transform:scaleX(0); border-radius:999px; transition:transform 1.1s var(--ease-foil),background .4s; background:linear-gradient(90deg,var(--terra-deep),var(--terra-lit)); }
.hrow__price{ display:flex; flex-direction:column; text-align:right; line-height:1.15; }
.hrow__price b{ font-family:var(--display); font-weight:700; }
.hrow__price small{ color:var(--cream-70); font-size:.72rem; }
.chip--state{ color:var(--cream-60); background:var(--cream-08); border:1px solid var(--cream-12); transition:all .35s var(--ease-foil); min-width:56px; text-align:center; }
/* truthful resting colors without JS, keyed off data-state */
.hrow[data-state="near"] .chip--state{ color:var(--cyan); background:rgba(91,216,255,.12); border-color:rgba(91,216,255,.4); }
.hrow[data-state="ready"] .chip--state{ color:var(--green); background:rgba(70,213,138,.16); border-color:rgba(70,213,138,.5); }
/* progress fill on reveal */
.hrow.show .hrow__bar i{ transform:scaleX(calc(var(--pct,0)/100)); }
.hrow.is-near .hrow__bar i{ background:linear-gradient(90deg,var(--terra),var(--cyan)); }
.hrow.is-near .chip--state{ color:var(--cyan); background:rgba(91,216,255,.12); border-color:rgba(91,216,255,.4); }
.hrow.is-ready .hrow__bar i{ background:linear-gradient(90deg,var(--terra),var(--green)); }
.hrow.is-ready .chip--state{ color:var(--green); background:rgba(70,213,138,.16); border-color:rgba(70,213,138,.5); animation:readypulse 1.6s var(--ease-soft) infinite; }
@keyframes readypulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(70,213,138,.4); } 50%{ box-shadow:0 0 0 6px rgba(70,213,138,0); } }
@media(max-width:560px){ .hrow{ grid-template-columns:1fr auto auto; } .hrow__bar{ display:none; } }

/* ============================================================
   COMPLETION REWARD (gold)
   ============================================================ */
.reward{ background:radial-gradient(120% 80% at 50% 40%,rgba(26,18,12,.9),var(--void)); }
.reward::before{ display:none; }
.reward__inner{ max-width:980px; margin-inline:auto; padding-inline:var(--gutter); position:relative;
  display:flex; align-items:center; justify-content:center; gap:clamp(40px,7vw,100px); flex-wrap:wrap; }
.reward__shot{ position:relative; flex:0 0 auto; width:clamp(230px,28vw,320px); }
.reward__shot img{ width:100%; height:auto; display:block; border-radius:30px; box-shadow:0 50px 90px -30px rgba(0,0,0,.8),0 0 0 1px var(--cream-08); }
.reward__burst{ position:absolute; left:50%; top:46%; width:10px; height:10px; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; }
.reward.is-done .reward__burst{ animation:burst .9s var(--ease-foil); }
@keyframes burst{ 0%{ box-shadow:0 0 0 0 rgba(255,210,58,.6),0 0 0 0 rgba(255,79,183,.4); opacity:1; } 100%{ box-shadow:0 0 0 120px rgba(255,210,58,0),0 0 0 180px rgba(255,79,183,0); opacity:0; } }
.reward__copy{ flex:0 1 34ch; max-width:34ch; }
.reward__set{ font-size:clamp(2rem,4.6vw,3.2rem); margin:.4rem 0 .8rem; }
.reward__line{ color:var(--cream-70); margin-top:.4rem; }
@media(max-width:760px){ .reward__inner{ flex-direction:column; text-align:center; } }

/* ============================================================
   GAMES REEL
   ============================================================ */
.games{ overflow:hidden; }
.reel{ margin-top:10px; overflow-x:auto; scrollbar-width:none; padding:40px var(--gutter); -webkit-overflow-scrolling:touch; }
.reel::-webkit-scrollbar{ display:none; }
.reel__track{ display:flex; gap:28px; width:max-content; perspective:1400px; }
.reel__card{ flex:0 0 auto; width:clamp(190px,22vw,250px); }
/* full card-detail screens — shown whole, never cropped */
.reel__card img{ width:100%; height:auto; border-radius:18px; box-shadow:0 30px 70px -30px rgba(0,0,0,.8),0 0 0 1px var(--cream-08); transition:transform .3s var(--ease-soft); display:block; }
.reel__card figcaption{ margin-top:14px; font-family:var(--display); font-size:.82rem; color:var(--cream-60); letter-spacing:-.01em; }
.reel__card figcaption .mono{ color:var(--terra-lit); font-size:.74rem; }

/* ============================================================
   QUOTES
   ============================================================ */
.quotes{ background:var(--void); }
.quote{ grid-column:span 6; margin-bottom:14px; }
.quote--lead{ grid-column:1 / 9; margin-bottom:60px; }
.quote p{ font-family:var(--display); font-weight:500; letter-spacing:-.02em; line-height:1.2; font-size:clamp(1.2rem,2.2vw,1.7rem); }
.quote--lead p{ font-size:clamp(1.9rem,4.4vw,3.1rem); line-height:1.08; }
.quote em{ font-style:normal; color:transparent; background:linear-gradient(96deg,var(--terra-lit),var(--magenta)); -webkit-background-clip:text; background-clip:text; }
.quote cite{ display:block; margin-top:1rem; font-style:normal; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--cream-45); }
@media(max-width:760px){ .quote,.quote--lead{ grid-column:1 / -1; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq__list{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:0 56px; margin-top:14px; }
.faq__item{ border-top:1px solid var(--cream-08); padding:22px 2px; }
.faq__item h3{ font-family:var(--display); font-weight:600; font-size:clamp(1.02rem,1.5vw,1.2rem); letter-spacing:-.01em; margin-bottom:9px; color:var(--cream); }
.faq__item p{ color:var(--cream-70); font-size:.97rem; line-height:1.55; max-width:48ch; }
@media(max-width:760px){ .faq__list{ grid-template-columns:1fr; gap:0; } }

/* ============================================================
   CTA CLOSE
   ============================================================ */
.close{ text-align:center; background:radial-gradient(110% 90% at 50% 30%,var(--noir),var(--void) 70%); padding-top:clamp(120px,16vh,200px); }
.close::before{ display:none; }
.close__inner{ position:relative; z-index:2; max-width:680px; margin:0 auto; padding-inline:var(--gutter); }
.close__spark{ display:block; width:130px; height:130px; margin:0 auto 18px; filter:drop-shadow(0 0 18px rgba(198,101,68,.6)); animation:sparkidle 4s var(--ease-soft) infinite; }
.close__sparkimg{ width:130px !important; height:130px; object-fit:contain; display:block; }
@keyframes sparkidle{ 0%,100%{ filter:drop-shadow(0 0 14px rgba(198,101,68,.5)); } 50%{ filter:drop-shadow(0 0 26px rgba(198,101,68,.85)); } }
.wordmark--xl{ display:block; font-size:clamp(3rem,9vw,6rem); letter-spacing:-.05em; line-height:1; margin-bottom:.4rem; }
.close__tag{ font-family:var(--display); font-weight:500; font-size:clamp(1.1rem,2.4vw,1.5rem); color:var(--cream-70); letter-spacing:-.02em; margin-bottom:2.4rem; }
.close__ask{ font-family:var(--display); font-weight:600; font-size:clamp(1.25rem,2.6vw,1.85rem); color:var(--cream); letter-spacing:-.02em; margin:0 0 1.4rem; }
.close__cta{ display:flex; gap:18px; justify-content:center; align-items:center; flex-wrap:wrap; }
.close__cta .appstore--soon{ opacity:.62; }
.close__soon{ flex-basis:100%; font-size:.9rem; letter-spacing:.04em; color:var(--cream-70); margin:6px 0 0; text-transform:uppercase; }

/* ---------- footer ---------- */
.footer{ margin-top:clamp(80px,12vh,160px); border-top:1px solid var(--cream-08); padding-top:34px; padding-bottom:40px; }
.footer__grid{ align-items:center; row-gap:18px; }
.footer .nav__brand{ grid-column:1 / 4; }
.footer__links{ grid-column:4 / 10; display:flex; gap:24px; justify-content:center; flex-wrap:wrap; }
.footer__links a{ font-size:.86rem; color:var(--cream-60); transition:color .2s; }
.footer__links a:hover{ color:var(--cream); }
.footer__legal{ grid-column:10 / 13; text-align:right; color:var(--cream-70); font-size:.74rem; }
@media(max-width:760px){ .footer .nav__brand,.footer__links,.footer__legal{ grid-column:1 / -1; justify-content:flex-start; text-align:left; } }

/* ---------- sticky mobile cta ---------- */
.sticky-cta{ position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); transform:translate(-50%,140px); z-index:900; padding:14px 28px; border-radius:999px; white-space:nowrap; font-family:var(--display); font-weight:600; font-size:.98rem; color:#fff; background:linear-gradient(180deg,var(--terra-lit),var(--terra)); box-shadow:0 12px 30px rgba(198,101,68,.45); transition:transform .4s var(--ease-foil); -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:transform; }
.sticky-cta.show{ transform:translate(-50%,0); }
@media(min-width:761px){ .sticky-cta{ display:none; } }

/* ============================================================
   REVEAL baseline (IntersectionObserver)
   ============================================================ */
.reveal{ opacity:0; transform:translateY(24px) scale(.98); transition:opacity .68s var(--ease-foil),transform .68s var(--ease-foil); }
.reveal.in-view{ opacity:1; transform:none; }

/* overflow guard for line reveals */
.line{ will-change:transform; }

/* ============================================================
   REDUCED MOTION — settled defaults
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero__headline .line{ opacity:1 !important; transform:none !important; }
  .aurora__blob{ animation:none !important; }
  .screen{ transition:opacity .3s linear; }
  .scroll-hint span{ animation:none; }
  .close__spark,.chip--state,.hrow.is-ready .chip--state{ animation:none !important; }
  .foilcard__foil{ opacity:.22; }
  .hrow__bar i{ transform:scaleX(calc(var(--pct,0)/100)) !important; transition:none; }
}

/* progressive-enhanced scrubbed effects (off main thread where supported) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .foilcard__foil{
      animation:foilsweep linear both;
      animation-timeline:view();
      animation-range:entry 10% exit 90%;
    }
    @keyframes foilsweep{
      from{ --foil-angle:60deg; }
      to{ --foil-angle:300deg; }
    }
  }
}
/* touch / no-pointer idle shimmer */
@media (hover:none){
  .foilcard__foil{ animation:shimmer 6s linear infinite; }
  @keyframes shimmer{ 0%{ --foil-angle:0deg; background-position:0% 50%; } 100%{ --foil-angle:360deg; background-position:200% 50%; } }
}