/* =============================================================
   WICKFURY — full site styles (v1 AAA)
   Design tokens per WICKFURY_WEBSITE_3D_BLUEPRINT.md §1.
   Ship-first, luxury-restraint. Gold used < 10% of any screen.
   ============================================================= */

:root {
  --wf-void:        #05060a;
  --wf-black:       #0a0b10;
  --wf-carbon:      #12141c;
  --wf-graphite:    #1c1f2a;

  --wf-gold:        #d4af37;
  --wf-gold-bright: #f4d160;
  --wf-gold-deep:   #a67c1a;
  --wf-gold-glow:   rgba(212, 175, 55, 0.35);

  --wf-crimson:     #e01f2d;
  --wf-nitro:       #35c8ff;

  /* Contrast on --wf-void #05060a (measured):
       --wf-text      19.4:1  AAA
       --wf-text-dim   6.9:1  AA
       --wf-text-mute  5.3:1  AA   (was #56544c = 2.67:1 — FAILED AA and was used
                                    on the wedge caption, war note, footer links
                                    and hero hint. Accessibility is this brand's
                                    stated mission; shipping 2.67:1 was hypocrisy.) */
  --wf-text:        #f5f3ea;
  --wf-text-dim:    #9a9788;
  --wf-text-mute:   #85827a;

  /* Saira — a technical/motorsport face: squarish, slightly condensed, built for
     speed-adjacent UI. Variable, so every weight 400-800 costs ZERO extra bytes
     and ZERO extra requests (Google serves one woff2 per subset across the whole
     axis). 'Neue Machina' was removed from the fallback: it is a Pangram Pangram
     face licensed free for PERSONAL use only, and naming a paid font in a
     commercial site's stack reads badly in an audit even though we never serve it. */
  --wf-font-display: 'Saira', system-ui, -apple-system, sans-serif;
  --wf-font-body:    'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Geist Mono, NOT JetBrains Mono: JBM ships no rupee glyph (U+20B9), so the
     '₹ 2,88,700' in the price wedge (.wedge-cell .price) silently fell back to a
     system font mid-line. Geist Mono has it. */
  --wf-font-mono:    'Geist Mono', ui-monospace, monospace;

  --wf-ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --wf-ease-in:     cubic-bezier(0.6, 0, 0.5, 1);
  --wf-radius:      14px;
  --wf-hairline:    1px solid rgba(212, 175, 55, 0.18);
  --wf-container:   1180px;

  /* LABEL SCALE — every eyebrow/tag/caption used to be a hand-rolled 10 or 11px,
     which is below the ~12px floor where a wide-tracked uppercase mono stops
     being readable. One scale, used everywhere. */
  --wf-label-xs:    12px;   /* tags, chips, footer fine print */
  --wf-label-sm:    13px;   /* section eyebrows, status lines */
  --wf-label-md:    14px;   /* emphasised labels */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  background: var(--wf-void);
  color: var(--wf-text);
  font-family: var(--wf-font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color .3s var(--wf-ease); }
a:hover { color: var(--wf-gold-bright); }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }
input { font: inherit; }

/* ---------- ambient page background ---------- */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 15%, rgba(212,175,55,0.045) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(20,30,50,0.5) 0%, transparent 70%),
    var(--wf-void);
  pointer-events: none;
  z-index: -1;
}

/* ---------- typography helpers ---------- */
.mono { font-family: var(--wf-font-mono); letter-spacing: 0.02em; }
.dim  { color: var(--wf-text-dim); }
.mute { color: var(--wf-text-mute); }
.gold-word {
  background: linear-gradient(180deg, var(--wf-gold-bright) 0%, var(--wf-gold) 55%, var(--wf-gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.eyebrow {
  font-family: var(--wf-font-mono);
  font-size: var(--wf-label-sm);
  letter-spacing: 0.32em;
  color: var(--wf-gold);
  text-transform: uppercase;
}

/* ---------- buttons ---------- */
.wf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  font-family: var(--wf-font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all .35s var(--wf-ease);
  white-space: nowrap;
  border: 0;
  cursor: pointer;
}
.wf-btn-primary {
  background: linear-gradient(180deg, var(--wf-gold-bright) 0%, var(--wf-gold) 55%, var(--wf-gold-deep) 100%);
  color: #16110a;
  box-shadow:
    0 0 0 1px rgba(212,175,55,0.4),
    0 12px 30px -8px var(--wf-gold-glow),
    inset 0 1px 0 rgba(255,255,255,0.4);
}
.wf-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(244,209,96,0.7),
    0 20px 42px -6px var(--wf-gold-glow),
    inset 0 1px 0 rgba(255,255,255,0.55);
  color: #16110a;
}
.wf-btn-outline {
  border: 1px solid rgba(245,243,234,0.28);
  color: var(--wf-text);
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.wf-btn-outline:hover {
  border-color: var(--wf-gold);
  color: var(--wf-gold-bright);
  background: rgba(212,175,55,0.06);
}

/* ---------- inputs ---------- */
.wf-input {
  padding: 15px 22px;
  background: var(--wf-carbon);
  border: 1px solid var(--wf-graphite);
  border-radius: 999px;
  color: var(--wf-text);
  min-width: 260px;
  transition: border-color .3s var(--wf-ease);
}
.wf-input:focus {
  outline: none;
  border-color: var(--wf-gold);
  box-shadow: 0 0 0 3px var(--wf-gold-glow);
}

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

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   NAV
   ===================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 4vw;
  transition: background .35s var(--wf-ease), backdrop-filter .35s var(--wf-ease);
}
.nav.solid {
  background: rgba(5,6,10,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(212,175,55,0.12);
}
.nav-brand { display: flex; align-items: center; }
.nav-links {
  display: flex; align-items: center; gap: 26px;
  font-family: var(--wf-font-display);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wf-text-dim);
}
.nav-links a:hover { color: var(--wf-gold-bright); }
.nav-links .nav-mission { color: var(--wf-gold); }
.nav-links .nav-play {
  padding: 8px 14px;
  border: 1px solid var(--wf-gold);
  border-radius: 999px;
  color: var(--wf-gold-bright);
}
.nav-links .nav-play:hover { background: var(--wf-gold); color: #16110a; }
@media (max-width: 720px) {
  .nav-links { gap: 14px; }
  .nav-links a:not(.nav-play):not(.nav-mission) { display: none; }
}

/* =====================================================================
   HERO — live 3D
   ===================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 100px 4vw 40px;
}
#heroCanvas {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  display: block;
  z-index: 0;
  /* NOT `touch-action: none` — that swallowed vertical page scroll across the
     whole hero, so on a phone the first screen was a scroll trap. `pan-y` keeps
     native vertical scrolling and still lets us claim horizontal drags to spin
     the car. */
  touch-action: pan-y;
  cursor: grab;
}
#heroCanvas:active { cursor: grabbing; }

/* THE POSTER FRAME.
   `.hero-fallback` was dead code — declared in hero.js, styled nowhere — so a
   failed load (or a data-saver visitor) got an EMPTY hero. It now backs both
   cases: no WebGL, and "WebGL after intent" for slow/metered connections.
   This is the "poster frame instantly" half of SITE_INSPIRATION.md §6. */
body.no-webgl #heroCanvas,
body.hero-fallback #heroCanvas { display: none; }
body.no-webgl .hero::before,
body.hero-fallback .hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url('/assets/feature_graphic.webp') center 62%/cover no-repeat;
  /* mask it into the lower third so it sits where the 3D car would, and never
     fights the headline */
  -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 62%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 30%, #000 62%, #000 100%);
  opacity: 0.55;
  z-index: 0;
}

/* Scrim. The car now lives in the lower third (see CAM_LOOK in hero.js), so the
   top half is darkened hard to guarantee the headline reads, and the very bottom
   is faded to seat the car on the page. Without this the gold title sat directly
   on a bright crimson car body and vanished. */
.hero-fog {
  position: absolute; inset: 0;
  background:
    /* top: solid reading zone for the headline */
    linear-gradient(180deg, rgba(5,6,10,0.94) 0%, rgba(5,6,10,0.80) 32%, rgba(5,6,10,0.22) 58%, transparent 74%),
    /* focused pool right behind the copy block */
    radial-gradient(ellipse 62% 42% at 50% 34%, rgba(5,6,10,0.78), transparent 72%),
    /* bottom: seat the car into the page */
    linear-gradient(0deg, rgba(5,6,10,0.98) 0%, rgba(5,6,10,0.35) 14%, transparent 30%);
  z-index: 1;
  pointer-events: none;
}

/* Hero camera stack — video + landmark overlay + label. Ultraleap-style. */
#heroCamStack {
  position: absolute;
  top: 90px; right: 20px;
  width: 176px; height: 132px;
  z-index: 4;
  opacity: 0;
  transition: opacity .5s var(--wf-ease);
  pointer-events: none;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(212,175,55,0.5);
  box-shadow:
    0 12px 32px -14px rgba(0,0,0,0.75),
    0 0 0 3px rgba(5,6,10,0.6);
}
#heroCamStack.live { opacity: 1; }
#heroCamPip {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  filter: brightness(0.7) contrast(1.1);
}
#heroCamOverlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}
#heroCamStack .pip-label {
  position: absolute;
  top: 6px; left: 8px;
  z-index: 2;
  font-size: var(--wf-label-xs);
  letter-spacing: 0.16em;
  color: var(--wf-gold);
  padding: 3px 7px;
  background: rgba(0,0,0,0.5);
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,0.4);
}

/* Sits UNDER the camera PiP (which is under the nav), never over the headline.
   It used to be pinned at top:232px — straight through the H1's first line on
   anything under ~900px tall, permanently, with no dismiss. */
#heroCamMsg {
  position: absolute;
  top: calc(90px + 132px + 10px);   /* PiP top + PiP height + gap */
  right: 20px;
  width: 176px;
  z-index: 4;
  padding: 8px 12px;
  font-family: var(--wf-font-mono);
  font-size: var(--wf-label-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wf-text);
  background: rgba(5,6,10,0.7);
  border: 1px solid var(--wf-graphite);
  border-radius: 8px;
  text-align: center;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .35s var(--wf-ease), transform .35s var(--wf-ease);
  pointer-events: none;
}
#heroCamMsg.show { opacity: 1; transform: translateY(0); }
#heroCamMsg[data-tone="err"] { border-color: var(--wf-crimson); color: #ffb0b6; }
#heroCamMsg[data-tone="ok"]  { border-color: var(--wf-gold); }

/* ---------- hero loader (5.2MB GLB) ---------- */
.hero-loader {
  position: absolute;
  left: 50%; bottom: 16vh;
  transform: translateX(-50%);
  z-index: 4;
  display: grid; gap: 10px; justify-items: center;
  pointer-events: none;
  transition: opacity .6s var(--wf-ease);
}
.hero-loader.done { opacity: 0; }
.hero-loader-bar {
  width: min(210px, 46vw);
  height: 2px;
  background: rgba(212,175,55,0.16);
  border-radius: 2px;
  overflow: hidden;
}
.hero-loader-bar span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--wf-gold-deep), var(--wf-gold-bright));
  box-shadow: 0 0 12px var(--wf-gold-glow);
  transition: width .25s var(--wf-ease);
}
.hero-loader-txt {
  font-size: var(--wf-label-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wf-text-mute);
}
.hero-loader-txt .hl-pct { color: var(--wf-gold); margin-left: 8px; }

/* Data-saver opt-in (shown only when navigator.connection says so).
   Lives in the normal flow inside .hero-copy — as an absolutely-positioned
   z-index:4 element it landed straight on top of the CTA row and made
   "Show me your hands" unclickable.
   Adding a 6th child also pushed the hero past 100svh (measured: button at
   y=831 in an 800px viewport, clipped by .hero{overflow:hidden}), so the copy
   block tightens up in fallback mode — the only mode where this button exists. */
body.hero-fallback .hero-copy {
  margin-top: clamp(56px, 7vh, 92px);
  gap: 12px;
}
body.hero-fallback .hero-scroll { display: none; }   /* the CTA is the priority here */
.hero-datasaver {
  pointer-events: auto;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,0.5);
  background: rgba(5,6,10,0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--wf-text-dim);
  font-size: var(--wf-label-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s var(--wf-ease);
}
.hero-datasaver strong { color: var(--wf-gold-bright); font-weight: 500; }
.hero-datasaver:hover { border-color: var(--wf-gold); background: rgba(212,175,55,0.08); }
.hero-datasaver[hidden] { display: none; }

/* Hero copy — pinned to the UPPER zone so it never fights the car for pixels. */
.hero {
  align-content: start;
}
.hero-copy {
  position: relative;
  z-index: 3;
  text-align: center;
  /* 980px was TWELVE PIXELS too narrow. The h1 is authored as two lines (there's
     an explicit <br> after "Your hands"), but "are the controller." measures
     968px at the 96px cap and the content box was 980-24(padding)=956 — so it
     wrapped to a THIRD line nobody asked for. That accidental line cost 86px of
     vertical stack, and since hero.js fits the car to the band this block leaves
     free, those 86px came straight off the car. Give the authored line room.
     Phones still wrap to 3 lines, which is correct there. */
  max-width: min(1120px, 94vw);
  /* pin to the TOP of the hero (align-content:start on .hero) rather than
     centring — keeps the whole copy block in the upper zone so the car reads
     clearly in the lower third. Measured at 1512x945 the block was 521px tall in
     a 945px viewport (55%), which left the car nowhere to go: hero.js now fits
     the car to whatever band this block leaves free, so every px saved here is a
     px of car. Both values scale with vh so short laptops claw back the most. */
  margin-top: clamp(40px, 5vh, 80px);
  padding: 8px 12px 0;
  display: grid; gap: clamp(10px, 1.4vh, 16px); justify-items: center;
  /* The copy block is a transparent sheet lying on top of the canvas: its box
     (and the title's line boxes) swallowed pointer events, so only ~23% of the
     car zone actually reached the canvas and the advertised "drag to rotate"
     mostly did nothing. Let pointers fall through the text; the real controls
     opt back in below. */
  pointer-events: none;
}
.hero-copy a,
.hero-copy button,
.hero-ctas { pointer-events: auto; }
.hero-title {
  font-family: var(--wf-font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.92;
  text-transform: uppercase;
  /* capped smaller so the 3-line block clears the car (was 140px -> "CONTROLLER"
     sat on the roof). line-height tightened for a shorter stack. */
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.9;
  /* layered shadows: tight one for edge definition, wide one to punch a hole in
     whatever is behind it */
  text-shadow:
    0 2px 6px rgba(5,6,10,0.95),
    0 8px 40px rgba(5,6,10,0.9),
    0 0 90px rgba(5,6,10,0.75);
}
/* .gold-word is background-clip:text + transparent fill, so text-shadow paints
   behind the clipped glyphs and does nothing. drop-shadow() follows the actual
   glyph alpha, so it survives over a bright car body. */
.hero-title .gold-word {
  filter:
    drop-shadow(0 2px 6px rgba(5,6,10,0.95))
    drop-shadow(0 6px 28px rgba(5,6,10,0.85));
}
.hero-sub {
  max-width: 62ch;
  font-size: clamp(16px, 1.9vw, 19px);
  color: var(--wf-text-dim);
  line-height: 1.6;
}
.hero-sub strong { color: var(--wf-text); font-weight: 500; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.hero-hint {
  font-family: var(--wf-font-mono);
  font-size: var(--wf-label-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wf-text-mute);
  display: inline-flex; align-items: center; gap: 10px;
}
.hero-hint .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wf-gold); box-shadow: 0 0 8px var(--wf-gold-glow); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* SHORT viewports (most laptops are 720-800px tall). The copy block is sized off
   vw, so on a wide-but-short screen it stayed huge while the car had nowhere to
   live: at 1280x720 the block ate 503px of 720 (70%) and the car was pushed
   under the buttons AND clipped off the bottom edge. Cap the display type off
   HEIGHT here so the lower band stays real. */
@media (max-height: 820px) {
  .hero-title { font-size: clamp(38px, 5.6vw, 68px); }
  .hero-sub   { font-size: clamp(15px, 1.5vw, 16px); }
  .hero-copy  { margin-top: clamp(28px, 3.5vh, 48px); gap: clamp(8px, 1.1vh, 12px); }
}
@media (max-height: 620px) {
  .hero-title { font-size: clamp(32px, 4.6vw, 52px); }
  .hero-hint  { display: none; }   /* the affordance is nice-to-have; the car isn't */
}

/* ---------- HOLD-TO-CINEMA (Lusion Gemini pattern) ---------- */
/* Press and hold anywhere on the hero → time slows, letterbox + HUD fade in. */
.cine {
  position: absolute; inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s var(--wf-ease);
}
.cine.on { opacity: 1; }

.cine-bar {
  position: absolute; left: 0; right: 0;
  height: 12vh;
  background: #000;
  transform: scaleY(0);
  transition: transform .45s var(--wf-ease);
}
.cine-top    { top: 0;    transform-origin: top; }
.cine-bottom { bottom: 0; transform-origin: bottom; }
.cine.on .cine-bar { transform: scaleY(1); }

.cine-hud {
  position: absolute;
  inset: 14vh 6vw;
  opacity: 0;
  transition: opacity .5s var(--wf-ease) .15s;
}
.cine.on .cine-hud { opacity: 1; }

/* corner framing brackets */
.cine-br {
  position: absolute;
  width: 26px; height: 26px;
  border: 2px solid rgba(244,209,96,0.85);
}
.cine-tl  { top: 0;    left: 0;  border-right: 0; border-bottom: 0; }
.cine-tr  { top: 0;    right: 0; border-left: 0;  border-bottom: 0; }
.cine-bl  { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.cine-br2 { bottom: 0; right: 0; border-left: 0;  border-top: 0; }

.cine-meta, .cine-tc, .cine-mode {
  position: absolute;
  font-size: var(--wf-label-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wf-gold-bright);
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}
.cine-meta { top: -26px; left: 0; display: flex; align-items: center; gap: 7px; }
.cine-meta .rec {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--wf-crimson);
  box-shadow: 0 0 10px var(--wf-crimson);
  animation: pulse 1.1s ease-in-out infinite;
}
.cine-tc   { top: -26px; right: 0; color: var(--wf-text); }
.cine-mode { bottom: -26px; right: 0; }

.hero-scroll {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 5;
  font-family: var(--wf-font-mono); font-size: var(--wf-label-xs);
  letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--wf-text-mute);
  display: grid; justify-items: center; gap: 8px;
}
.hero-scroll span {
  width: 1px; height: 34px;
  background: linear-gradient(180deg, transparent, var(--wf-gold));
  animation: scrollHint 2.2s ease-in-out infinite;
}
@keyframes scrollHint {
  0%   { transform: scaleY(0);   transform-origin: top; }
  50%  { transform: scaleY(1);   transform-origin: top; }
  51%  { transform: scaleY(1);   transform-origin: bottom; }
  100% { transform: scaleY(0);   transform-origin: bottom; }
}

/* =====================================================================
   THE WAR — the wedge
   ===================================================================== */
.war {
  position: relative;
  padding: 120px 4vw;
  background:
    radial-gradient(ellipse 70% 50% at 50% 40%, rgba(212,175,55,0.05), transparent 70%),
    var(--wf-void);
  border-top: 1px solid rgba(212,175,55,0.08);
  overflow: hidden;
}
.war-inner {
  max-width: var(--wf-container);
  margin: 0 auto;
  text-align: center;
  display: grid; gap: 42px;
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s var(--wf-ease), transform .8s var(--wf-ease);
}
.war.in .war-inner { opacity: 1; transform: none; }
.war-eyebrow {
  font-family: var(--wf-font-mono);
  color: var(--wf-gold);
  font-size: var(--wf-label-sm); letter-spacing: 0.32em; text-transform: uppercase;
}
.war-title {
  font-family: var(--wf-font-display);
  font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(38px, 6.5vw, 84px);
  text-transform: uppercase;
}
.wedge {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 900px;
  margin: 20px auto 0;
  padding: 36px 30px;
  border: var(--wf-hairline);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.25));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
}
.wedge::before {
  content: '';
  position: absolute; left: 50%; top: 20%; bottom: 20%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--wf-gold), transparent);
  transform: translateX(-0.5px);
  opacity: 0;
  transition: opacity .8s var(--wf-ease) .3s;
}
.war.in .wedge::before { opacity: 1; }
.wedge-cell { text-align: center; display: grid; gap: 14px; justify-items: center; }
.wedge-sil { color: var(--wf-text-mute); width: 120px; height: 80px; display: grid; place-items: center; }
.wedge-sil.us-sil { width: 54px; height: 90px; color: var(--wf-gold); }
.wedge-cell .price {
  font-family: var(--wf-font-mono);
  font-size: clamp(24px, 4.5vw, 42px);
  letter-spacing: 0.01em;
  color: var(--wf-text);
}
.wedge-cell .cap {
  font-family: var(--wf-font-mono);
  font-size: var(--wf-label-sm);
  letter-spacing: 0.18em;
  color: var(--wf-text-mute);
  text-transform: uppercase;
  max-width: 22ch;
}
/* the * on FREE — small, gold, unmissable, and it earns the footnote below */
.price-star {
  font-size: 0.36em;
  -webkit-text-fill-color: var(--wf-gold);
  vertical-align: super;
  margin-left: 0.06em;
}
.wedge-fine {
  max-width: 62ch;
  margin: 18px auto 0;
  font-size: var(--wf-label-sm);
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--wf-text-dim);
  text-transform: none;
}
.wedge-fine .star { color: var(--wf-gold); font-weight: 700; }
.wedge-fine strong { color: var(--wf-gold-bright); font-weight: 500; }

.wedge-vs {
  font-family: var(--wf-font-display);
  color: var(--wf-gold);
  font-size: var(--wf-label-sm);
  letter-spacing: 0.14em;
  padding: 0 22px;
  opacity: 0.7;
}
.war-note {
  font-size: var(--wf-label-sm);
  letter-spacing: 0.14em;
  color: var(--wf-text-mute);
  text-transform: uppercase;
  padding: 0 20px;
}
@media (max-width: 720px) {
  .wedge { grid-template-columns: 1fr; gap: 26px; }
  .wedge::before { left: 20%; right: 20%; top: 33%; bottom: 33%; height: 1px; width: auto; background: linear-gradient(90deg, transparent, var(--wf-gold), transparent); transform: none; }
  .wedge-vs { padding: 4px 0; }
}

/* =====================================================================
   HOW IT WORKS · SPECIFICATION THEATRE (Peachweb CØNCEPT pattern)
   Sticky hero panel · big metric cards fly through on scroll.
   Section is ~300vh tall so scroll drives 3 card transitions.
   ===================================================================== */
.how-theatre {
  padding: 0;
  border-top: 1px solid rgba(212,175,55,0.08);
  background:
    radial-gradient(ellipse 60% 60% at 20% 30%, rgba(212,175,55,0.04), transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 70%, rgba(255,61,125,0.04), transparent 60%);
  position: relative;
}
.how-stage {
  position: relative;
  height: 320vh;   /* scroll length — 3 cards over ~2.2 screens */
}
.how-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 0 4vw;
  z-index: 1;
  text-align: center;
  pointer-events: none;
}
.how-sticky-inner {
  display: grid;
  justify-items: center;
  /* fades + shrinks away as the cards take the stage — no overlap collision */
  transition: opacity .7s var(--wf-ease), transform .7s var(--wf-ease), filter .7s var(--wf-ease);
}
.how-theatre.cards-live .how-sticky-inner {
  opacity: 0;
  transform: translateY(-40px) scale(0.9);
  filter: blur(6px);
}
.how-sticky .how-eyebrow {
  font-family: var(--wf-font-mono);
  color: var(--wf-gold);
  font-size: var(--wf-label-sm); letter-spacing: 0.32em; text-transform: uppercase;
  margin-bottom: 18px;
}
.how-title {
  font-family: var(--wf-font-display);
  font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(40px, 8vw, 104px);
  text-transform: uppercase;
  line-height: 0.92;
  margin-bottom: 22px;
}
.how-lede {
  max-width: 60ch;
  margin: 0 auto;
  color: var(--wf-text-dim);
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.6;
}
/* progress bar pins to the bottom of the sticky viewport so it never collides */
.how-progress {
  position: absolute;
  bottom: 8vh; left: 50%;
  transform: translateX(-50%);
  width: min(360px, 60vw);
  height: 2px;
  background: rgba(212,175,55,0.12);
  border-radius: 2px;
  overflow: hidden;
  z-index: 3;
}
.how-progress #howBar {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--wf-gold-bright), var(--wf-gold), var(--wf-gold-deep));
  transition: width .12s linear;
  box-shadow: 0 0 12px var(--wf-gold-glow);
}

/* Card layer is its own sticky viewport pinned over the sticky headline.
   Both are 100vh sticky at top:0 so they occupy the same screen — the
   headline fades out (.cards-live) exactly as the first card flies in. */
.how-flight {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-top: -100vh;   /* pull up to overlap the sticky headline's viewport */
  pointer-events: none;
  z-index: 2;
}
.theatre-card {
  position: absolute;
  top: 50%; left: 50%;
  --ty: 60vh;
  --sc: 0.88;
  transform: translate(-50%, -50%) translateY(var(--ty)) scale(var(--sc));
  width: min(560px, 88vw);
  padding: 40px 34px;
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 22px;
  background:
    radial-gradient(ellipse 80% 60% at 30% 0%, rgba(212,175,55,0.16), transparent 60%),
    linear-gradient(180deg, rgba(20,15,5,0.92) 0%, rgba(5,6,10,0.96) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 30px 80px -30px rgba(212,175,55,0.5),
    0 0 0 1px rgba(212,175,55,0.15);
  opacity: 0;
  transition: opacity .55s var(--wf-ease), transform .55s var(--wf-ease);
  pointer-events: none;
  text-align: left;
  display: grid; gap: 12px;
}
.theatre-card.in {
  opacity: 1;
  --ty: 0vh;
  --sc: 1;
  pointer-events: auto;
}
.theatre-card.out {
  opacity: 0;
  --ty: -50vh;
  --sc: 0.9;
}
.theatre-key {
  font-family: var(--wf-font-mono);
  font-size: var(--wf-label-sm); letter-spacing: 0.28em;
  color: var(--wf-gold);
  text-transform: uppercase;
}
.theatre-metric {
  font-family: var(--wf-font-display);
  font-weight: 700;
  font-size: clamp(56px, 9vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--wf-gold-bright) 0%, var(--wf-gold) 55%, var(--wf-gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.theatre-metric .unit {
  display: inline-block;
  font-size: 0.36em;
  font-family: var(--wf-font-mono);
  letter-spacing: 0.08em;
  vertical-align: 0.6em;
  margin-left: 8px;
  -webkit-text-fill-color: var(--wf-gold-bright);
  background: none;
}
.theatre-label {
  font-family: var(--wf-font-display);
  font-size: clamp(20px, 2.4vw, 26px); letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wf-text);
}
.theatre-desc {
  color: var(--wf-text-dim);
  font-size: 15px;
  line-height: 1.65;
  max-width: 46ch;
}
.theatre-desc strong { color: var(--wf-gold-bright); font-weight: 500; }

@media (max-width: 720px) {
  .how-stage { height: 340vh; }
  .theatre-card { padding: 30px 22px; }
}

/* =====================================================================
   WORLDS
   ===================================================================== */
.worlds {
  padding: 100px 4vw 40px;
  border-top: 1px solid rgba(212,175,55,0.08);
}
.worlds-eyebrow {
  font-family: var(--wf-font-mono);
  color: var(--wf-gold);
  font-size: var(--wf-label-sm); letter-spacing: 0.32em; text-transform: uppercase;
  text-align: center;
}
.worlds-title {
  font-family: var(--wf-font-display);
  font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(34px, 6vw, 84px);
  text-transform: uppercase;
  text-align: center;
  margin: 14px auto 46px;
  max-width: 18ch;
}
.worlds-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: var(--wf-container);
  margin: 0 auto;
}
.world {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: 20px;
  background: var(--wf-black);
  transition: transform .5s var(--wf-ease), box-shadow .5s var(--wf-ease);
  cursor: pointer;
}
/* ken-burns pan: the bg image is a fixed-size ::before that scales + drifts */
.world::before {
  content: '';
  position: absolute;
  inset: -6% -6% -6% -6%;
  background: var(--world-bg) center/cover no-repeat;
  transform: scale(1.05);
  transform-origin: center;
  transition: transform 1.4s var(--wf-ease), filter .6s var(--wf-ease);
  animation: kenburns 22s ease-in-out infinite alternate;
  will-change: transform;
  filter: saturate(1.05);
}
.world[data-world="dubai"]::before  { animation-delay: 0s; }
.world[data-world="delhi"]::before  { animation-delay: -7s; }
.world[data-world="manali"]::before { animation-delay: -14s; }

@keyframes kenburns {
  0%   { transform: scale(1.06) translate3d(-2%, -1%, 0); }
  50%  { transform: scale(1.12) translate3d( 2%,  1%, 0); }
  100% { transform: scale(1.06) translate3d(-2%,  2%, 0); }
}

.world:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.8), 0 0 0 1px rgba(212,175,55,0.45);
}
.world:hover::before {
  transform: scale(1.15) translate3d(0, 0, 0);
  filter: saturate(1.15) brightness(1.05);
  animation-play-state: paused;
}
.world-mask {
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(5,6,10,0.95) 0%, rgba(5,6,10,0.4) 45%, rgba(5,6,10,0.1) 100%);
  pointer-events: none;
}
.world-inner {
  position: absolute; left: 22px; right: 22px; bottom: 22px;
  z-index: 2;
  display: grid; gap: 6px;
}
.world-tag {
  font-family: var(--wf-font-mono);
  font-size: var(--wf-label-sm); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--wf-gold);
}
.world-name {
  font-family: var(--wf-font-display);
  font-size: clamp(24px, 3.4vw, 40px);
  letter-spacing: 0.02em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--wf-text);
  text-shadow: 0 4px 24px rgba(0,0,0,0.7);
}
.world-sub {
  font-size: 13px;
  color: var(--wf-text-dim);
  line-height: 1.5;
  max-width: 28ch;
}
@media (max-width: 720px) {
  .worlds-strip { grid-template-columns: 1fr; }
  .world { aspect-ratio: 16/9; }
}

/* =====================================================================
   ROADMAP · CHAPTERED SCENES (Playdate "The Season" pattern)
   Sticky full-viewport stage · one scene + copy panel per Act.
   Scroll spacers below drive which chapter is active.
   ===================================================================== */
.chapters {
  position: relative;
  border-top: 1px solid rgba(212,175,55,0.1);
  background: var(--wf-void);
}
.chapters-stage { position: relative; }
.chapter-stage-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}
.chapter-spacer { height: 100vh; }

/* --- scene art layer (crossfades) --- */
.chapter-scenes { position: absolute; inset: 0; }
.chapter-scene {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity .9s var(--wf-ease), transform 1.4s var(--wf-ease);
  background-size: cover;
  background-position: center;
  will-change: opacity, transform;
}
.chapter-scene.on { opacity: 1; transform: scale(1); }

/* Act I = a REAL screenshot of the shipped game.
   Acts II-VI = original WICKFURY key art (concept), each flagged COMING SOON.
   Never other studios' screenshots — that's their IP and it would be the one
   thing that could actually burn us. */
.chapter-scene[data-scene="1"] {
  background-image:
    linear-gradient(180deg, rgba(5,6,10,0.55), rgba(5,6,10,0.9)),
    url('/assets/screenshots/02_dubai.webp');
}
.chapter-scene[data-scene="2"] {
  background-image:
    linear-gradient(180deg, rgba(5,6,10,0.35), rgba(5,6,10,0.82)),
    url('/assets/scenes/act2_unreal.webp');
}
.chapter-scene[data-scene="3"] {
  background-image:
    linear-gradient(180deg, rgba(5,6,10,0.35), rgba(5,6,10,0.85)),
    url('/assets/scenes/act3_cricket.webp');
}
.chapter-scene[data-scene="4"] {
  background-image:
    linear-gradient(180deg, rgba(5,6,10,0.32), rgba(5,6,10,0.86)),
    url('/assets/scenes/act4_fps.webp');
}
.chapter-scene[data-scene="5"] {
  background-image:
    linear-gradient(180deg, rgba(5,6,10,0.3), rgba(5,6,10,0.84)),
    url('/assets/scenes/act5_control.webp');
}
/* Act VI — WICKFIT. No key art exists for it yet and inventing concept art for a
   product that is actually BUILT would be a downgrade: a real screenshot beats
   a render here. Until one exists, a built scene — deep green-gold (movement /
   vitality) against the brand black, so it reads as its own act rather than a
   missing image. */
.chapter-scene[data-scene="6"] {
  background:
    radial-gradient(ellipse 60% 55% at 30% 45%, rgba(212,175,55,0.13), transparent 62%),
    radial-gradient(ellipse 45% 50% at 72% 60%, rgba(80,220,160,0.07), transparent 68%),
    linear-gradient(180deg, #060b0a 0%, #070a08 55%, #05060a 100%);
}
.chapter-scene[data-scene="7"] {
  background-image:
    linear-gradient(180deg, rgba(5,6,10,0.3), rgba(5,6,10,0.86)),
    url('/assets/scenes/act6_devices.webp');
}
/* Act VIII — the open-brief chapter. No render behind it (nothing to render —
   the answer isn't decided yet). Deep gold pool + faint grid = "waiting for
   input", matches the crest+black brand, and the copy panel reads perfectly
   over it without needing photo backing. */
.chapter-scene[data-scene="8"] {
  background:
    radial-gradient(ellipse 55% 50% at 68% 55%, rgba(212,175,55,0.14), transparent 60%),
    radial-gradient(ellipse 40% 45% at 30% 40%, rgba(255,61,125,0.05), transparent 65%),
    linear-gradient(180deg, #0a0810 0%, #0a0508 60%, #05060a 100%);
}
.chapter-scene[data-scene="8"]::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(212,175,55,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 68% 55%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 68% 55%, #000 0%, transparent 75%);
  pointer-events: none;
}

/* ---- COMING SOON badge (Acts II-IV, VII) ---- */
.chapter-badge {
  position: absolute;
  top: 96px; left: 6vw;
  z-index: 5;
  display: none;
  align-items: center; gap: 9px;
  padding: 7px 15px 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,0.55);
  background: rgba(5,6,10,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--wf-font-mono);
  font-size: var(--wf-label-xs);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wf-gold-bright);
  box-shadow: 0 10px 30px -12px var(--wf-gold-glow);
}
.chapter-badge.on { display: inline-flex; animation: badgeIn .5s var(--wf-ease); }
@keyframes badgeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.chapter-badge .bdot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--wf-gold);
  box-shadow: 0 0 9px var(--wf-gold-glow);
  animation: pulse 1.8s ease-in-out infinite;
}
.chapter-badge .bsep { color: var(--wf-text-mute); }
.chapter-badge .bconcept { color: var(--wf-text-dim); letter-spacing: 0.18em; }

/* small "concept art" watermark bottom-right of the stage — honest, unobtrusive */
.chapter-concept-note {
  position: absolute;
  right: 3vw; bottom: 22px;
  z-index: 5;
  display: none;
  font-family: var(--wf-font-mono);
  font-size: var(--wf-label-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wf-text-mute);
  opacity: 0.75;
}
.chapter-concept-note.on { display: block; }

@media (max-width: 860px) {
  .chapter-badge { top: 78px; left: 8vw; font-size: 11px; letter-spacing: 0.18em; }
}

.chapter-vig {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 30% 50%, rgba(5,6,10,0.9), transparent 70%),
    linear-gradient(90deg, rgba(5,6,10,0.92) 0%, rgba(5,6,10,0.35) 45%, transparent 75%);
}

/* --- act rail (right edge) --- */
.chapter-rail {
  position: absolute;
  right: 3vw; top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: grid; gap: 14px;
}
.rail-dot {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,0.28);
  background: rgba(5,6,10,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center;
  transition: all .35s var(--wf-ease);
  cursor: pointer;
}
.rail-n {
  font-family: var(--wf-font-mono);
  font-size: var(--wf-label-xs);
  letter-spacing: 0.06em;
  color: var(--wf-text-mute);
  transition: color .35s var(--wf-ease);
}
.rail-dot:hover { border-color: var(--wf-gold); }
.rail-dot:hover .rail-n { color: var(--wf-gold-bright); }
.rail-dot.on {
  border-color: var(--wf-gold);
  background: rgba(212,175,55,0.14);
  box-shadow: 0 0 0 4px rgba(212,175,55,0.08), 0 0 20px var(--wf-gold-glow);
  transform: scale(1.12);
}
.rail-dot.on .rail-n { color: var(--wf-gold-bright); }

/* --- copy layer --- */
.chapter-copy {
  position: absolute;
  left: 6vw; top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: min(560px, 52vw);
  height: 70vh;
}
.chapter-panel {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .65s var(--wf-ease), transform .65s var(--wf-ease);
  pointer-events: none;
}
.chapter-panel.on { opacity: 1; transform: none; pointer-events: auto; }
.chapter-panel.above { transform: translateY(-40px); }

.chapter-act {
  font-size: var(--wf-label-sm); letter-spacing: 0.32em;
  color: var(--wf-text-mute);
  text-transform: uppercase;
}
.chapter-status {
  font-size: var(--wf-label-sm); letter-spacing: 0.16em;
  color: var(--wf-gold);
  text-transform: uppercase;
}
.chapter-status.is-live    { color: var(--wf-gold-bright); }
.chapter-status.is-mission { color: var(--wf-gold-bright); }
.chapter-status.is-horizon { color: var(--wf-nitro); }
.chapter-status.is-you     { color: var(--wf-gold-bright); }

/* Act VII suggestion form — reads over the gold-pool scene without a card */
.suggest-form {
  display: grid; gap: 14px;
  margin-top: 8px;
  max-width: 100%;
}
.suggest-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  max-width: 46ch;
}
.suggest-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,0.32);
  background: rgba(5,6,10,0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--wf-text-dim);
  font-family: var(--wf-font-mono);
  font-size: var(--wf-label-xs);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all .25s var(--wf-ease);
}
.suggest-chip:hover {
  border-color: var(--wf-gold);
  color: var(--wf-gold-bright);
  transform: translateY(-1px);
}
.suggest-row {
  display: grid;
  grid-template-columns: 1fr 220px auto;
  gap: 10px;
  align-items: center;
  max-width: 640px;
}
.suggest-row .wf-input { min-width: 0; }
.suggest-note {
  font-size: var(--wf-label-xs);
  letter-spacing: 0.08em;
  color: var(--wf-text-mute);
  margin-top: 2px;
}
@media (max-width: 720px) {
  .suggest-row { grid-template-columns: 1fr; }
  .suggest-row .wf-btn { justify-self: start; }
}
.chapter-name {
  font-family: var(--wf-font-display);
  font-weight: 700;
  font-size: clamp(34px, 5.2vw, 66px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-shadow: 0 6px 40px rgba(5,6,10,0.9);
}
.chapter-desc {
  color: var(--wf-text-dim);
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.65;
  max-width: 46ch;
}
.chapter-desc strong { color: var(--wf-text); font-weight: 500; }
.chapter-desc em { color: var(--wf-gold-bright); font-style: normal; }
.chapter-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.chapter-tags span {
  padding: 5px 11px;
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 999px;
  font-size: var(--wf-label-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wf-text-dim);
  background: rgba(5,6,10,0.5);
}
.chapter-icons { font-size: 26px; letter-spacing: 6px; margin-top: 6px; filter: grayscale(0.3); }

@media (max-width: 860px) {
  .chapter-copy { width: 84vw; left: 8vw; }
  .chapter-vig {
    background:
      linear-gradient(180deg, rgba(5,6,10,0.75) 0%, rgba(5,6,10,0.55) 50%, rgba(5,6,10,0.95) 100%);
  }
  .chapter-rail { right: 2vw; gap: 10px; }
  .rail-dot { width: 26px; height: 26px; }
}

/* =====================================================================
   ROADMAP — six acts (timeline summary)
   ===================================================================== */
.roadmap {
  padding: 120px 4vw 60px;
  position: relative;
  border-top: 1px solid rgba(212,175,55,0.08);
  background:
    radial-gradient(ellipse 60% 60% at 50% 20%, rgba(212,175,55,0.045), transparent 60%),
    var(--wf-void);
}
.roadmap-inner {
  max-width: var(--wf-container); margin: 0 auto;
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s var(--wf-ease), transform .8s var(--wf-ease);
}
.roadmap.in .roadmap-inner { opacity: 1; transform: none; }
.roadmap-eyebrow {
  font-family: var(--wf-font-mono);
  color: var(--wf-gold);
  font-size: var(--wf-label-sm); letter-spacing: 0.32em; text-transform: uppercase;
  text-align: center;
}
.roadmap-title {
  font-family: var(--wf-font-display);
  font-weight: 700; letter-spacing: -0.025em;
  font-size: clamp(38px, 7vw, 96px);
  text-transform: uppercase;
  text-align: center;
  margin: 14px auto 20px;
  line-height: 1;
}
.roadmap-sub {
  text-align: center;
  color: var(--wf-text-dim);
  font-size: 17px;
  margin-bottom: 60px;
}

.acts {
  list-style: none;
  position: relative;
  margin: 0 auto;
  max-width: 860px;
  padding: 20px 0;
}
.acts::before {
  content: '';
  position: absolute;
  left: 26px; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(212,175,55,0.5) 8%, rgba(212,175,55,0.5) 92%, transparent 100%);
}
.act {
  position: relative;
  padding: 26px 0 26px 68px;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .7s var(--wf-ease), transform .7s var(--wf-ease);
}
.act.in { opacity: 1; transform: none; }
.act-node {
  position: absolute;
  left: 15px; top: 34px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--wf-void);
  border: 2px solid var(--wf-gold);
  box-shadow: 0 0 0 4px rgba(5,6,10,1);
  z-index: 2;
}
.act-num {
  font-family: var(--wf-font-mono);
  font-size: var(--wf-label-sm); letter-spacing: 0.24em;
  color: var(--wf-text-mute);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.act-status {
  font-family: var(--wf-font-mono);
  font-size: var(--wf-label-sm); letter-spacing: 0.16em;
  color: var(--wf-gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.act-name {
  font-family: var(--wf-font-display);
  font-size: clamp(22px, 3.4vw, 34px);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--wf-text);
  margin-bottom: 10px;
  line-height: 1.1;
}
.act-desc {
  color: var(--wf-text-dim);
  font-size: 15px;
  line-height: 1.65;
  max-width: 60ch;
}
.act-desc strong { color: var(--wf-text); font-weight: 500; }
.act-desc em { color: var(--wf-gold-bright); font-style: normal; }

.act-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px;
}
.act-tags span {
  padding: 4px 10px;
  border: 1px solid var(--wf-graphite);
  border-radius: 999px;
  font-family: var(--wf-font-mono);
  font-size: var(--wf-label-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wf-text-dim);
}
.act-icons {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 14px;
  font-size: 24px;
  filter: grayscale(0.4);
}

/* LIVE act — subtle gold node */
.act-live .act-node {
  background: var(--wf-gold);
  box-shadow: 0 0 0 4px rgba(5,6,10,1), 0 0 24px var(--wf-gold-glow);
  animation: pulseNode 1.8s ease-in-out infinite;
}
.act-live .act-status { color: var(--wf-gold-bright); }
@keyframes pulseNode {
  0%, 100% { box-shadow: 0 0 0 4px rgba(5,6,10,1), 0 0 22px var(--wf-gold-glow); }
  50%      { box-shadow: 0 0 0 4px rgba(5,6,10,1), 0 0 44px rgba(244,209,96,0.7); }
}

/* HERO act (Gesture Control) — the WHOA card */
.act-hero {
  padding: 34px 30px 34px 68px;
  margin: 12px 0;
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 20px;
  background:
    radial-gradient(ellipse 80% 60% at 30% 0%, rgba(212,175,55,0.12), transparent 65%),
    linear-gradient(180deg, rgba(30,20,5,0.35), rgba(5,6,10,0.6));
  box-shadow: 0 30px 60px -30px rgba(212,175,55,0.35);
  position: relative;
}
.act-hero::before {
  content: 'THE MISSION';
  position: absolute;
  top: -12px; right: 20px;
  padding: 4px 12px;
  background: linear-gradient(180deg, var(--wf-gold-bright), var(--wf-gold-deep));
  color: #16110a;
  font-family: var(--wf-font-display);
  font-size: var(--wf-label-xs); letter-spacing: 0.24em;
  border-radius: 999px;
  font-weight: 700;
}
.act-hero .act-name { color: var(--wf-gold-bright); }
.act-hero .act-node {
  left: 15px; top: 42px;
  background: var(--wf-gold);
  border-color: var(--wf-gold-bright);
  animation: pulseNode 1.6s ease-in-out infinite;
}

/* HORIZON act (Everything) */
.act-horizon .act-node { border-style: dashed; }
.act-horizon .act-status { color: var(--wf-nitro); }

@media (max-width: 640px) {
  .acts::before { left: 18px; }
  .act, .act-hero { padding-left: 52px; }
  .act-node, .act-hero .act-node { left: 7px; width: 20px; height: 20px; }
  .act-hero { padding-right: 20px; }
}

/* =====================================================================
   THE MISSION — Gesture Control hype
   ===================================================================== */
.mission {
  padding: 130px 4vw 130px;
  position: relative;
  border-top: 1px solid rgba(212,175,55,0.15);
  background:
    radial-gradient(ellipse 100% 60% at 50% 50%, rgba(212,175,55,0.06), transparent 70%),
    linear-gradient(180deg, rgba(5,6,10,1), rgba(15,12,4,0.55) 50%, rgba(5,6,10,1));
  overflow: hidden;
}
.mission::before, .mission::after {
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: min(70%, 500px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--wf-gold), transparent);
}
.mission::before { top: 0; }
.mission::after  { bottom: 0; }

.mission-inner {
  max-width: 1100px; margin: 0 auto;
  text-align: center;
  display: grid; gap: 42px;
  opacity: 0; transform: translateY(24px);
  transition: opacity .9s var(--wf-ease), transform .9s var(--wf-ease);
}
.mission.in .mission-inner { opacity: 1; transform: none; }
.mission-eyebrow { color: var(--wf-gold); }
.mission-title {
  font-family: var(--wf-font-display);
  font-weight: 700; letter-spacing: -0.025em;
  font-size: clamp(38px, 7vw, 92px);
  text-transform: uppercase;
  line-height: 1;
}
.mission-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 26px;
}
.mission-col {
  padding: 30px 26px;
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: var(--wf-radius);
  background: rgba(5,6,10,0.55);
  text-align: left;
  display: grid; gap: 14px;
  transition: transform .35s var(--wf-ease), box-shadow .35s var(--wf-ease), border-color .35s var(--wf-ease);
}
.mission-col:hover {
  transform: translateY(-6px);
  border-color: var(--wf-gold);
  box-shadow: 0 24px 60px -22px var(--wf-gold-glow);
}
.mission-key {
  font-family: var(--wf-font-mono);
  color: var(--wf-gold);
  font-size: var(--wf-label-sm); letter-spacing: 0.24em; text-transform: uppercase;
}
.mission-body {
  color: var(--wf-text-dim);
  font-size: 15px;
  line-height: 1.7;
}
.mission-body strong {
  display: block;
  font-family: var(--wf-font-display);
  font-size: 22px;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--wf-text);
  margin-bottom: 6px;
}
.mission-strap {
  font-family: var(--wf-font-mono);
  font-size: clamp(18px, 2.4vw, 28px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wf-text);
  padding-top: 20px;
  line-height: 1.4;
}
@media (max-width: 720px) { .mission-cols { grid-template-columns: 1fr; } }

/* =====================================================================
   FOUNDING 1000
   ===================================================================== */
.founding {
  padding: 100px 4vw;
  border-top: 1px solid rgba(212,175,55,0.08);
}
.founding-inner {
  max-width: 720px; margin: 0 auto;
  text-align: center;
  display: grid; gap: 24px; justify-items: center;
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s var(--wf-ease), transform .8s var(--wf-ease);
}
.founding.in .founding-inner { opacity: 1; transform: none; }
.founding-eyebrow {
  font-family: var(--wf-font-mono);
  font-size: var(--wf-label-sm); letter-spacing: 0.32em;
  color: var(--wf-gold);
  text-transform: uppercase;
}
.founding-title {
  font-family: var(--wf-font-display);
  font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(32px, 5.6vw, 68px);
  text-transform: uppercase;
  line-height: 1.03;
}
.founding-sub {
  color: var(--wf-text-dim);
  max-width: 52ch;
}
.founding-sub strong { color: var(--wf-gold-bright); }
.founding-counter {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--wf-graphite);
  border-radius: 999px;
}
.founding-counter .count {
  font-family: var(--wf-font-mono);
  font-size: 24px;
  color: var(--wf-gold);
}
.founding-form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.socials {
  display: flex; gap: 22px; justify-content: center; flex-wrap: wrap;
  margin-top: 8px;
  font-size: var(--wf-label-xs); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--wf-text-mute);
}
.socials a:hover { color: var(--wf-gold-bright); }

/* =====================================================================
   CLAIM STRIP + FOOTER
   ===================================================================== */
.claim {
  text-align: center;
  padding: 60px 4vw 30px;
  border-top: 1px solid rgba(212,175,55,0.15);
  background: rgba(5,6,10,0.5);
  opacity: 0; transform: translateY(12px);
  transition: opacity .8s var(--wf-ease), transform .8s var(--wf-ease);
}
.claim.in { opacity: 1; transform: none; }
.claim-line {
  font-size: clamp(17px, 2.3vw, 26px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wf-text);
  line-height: 1.45;
  max-width: 46ch;
  margin: 0 auto;
}
.claim-sub { font-size: var(--wf-label-sm); letter-spacing: 0.24em; text-transform: uppercase; margin-top: 8px; }

.foot {
  padding: 40px 4vw 60px;
  text-align: center;
  display: grid; gap: 18px; justify-items: center;
}
.foot-brand { display: block; }
.foot-tag {
  font-size: var(--wf-label-sm); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wf-text-dim);
}
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; font-size: var(--wf-label-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--wf-text-mute); }
.foot-copy { font-size: var(--wf-label-xs); letter-spacing: 0.24em; color: var(--wf-text-mute); text-transform: uppercase; }

/* =====================================================================
   TOAST
   ===================================================================== */
.toast {
  position: fixed;
  left: 50%; bottom: 30px;
  transform: translateX(-50%) translateY(120%);
  background: var(--wf-carbon);
  border: 1px solid var(--wf-gold);
  color: var(--wf-text);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--wf-font-display);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 20px 40px -12px var(--wf-gold-glow);
  z-index: 200;
  transition: transform .5s var(--wf-ease);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* =====================================================================
   GESTURE-NAV — browse the whole site with your hand
   ===================================================================== */
/* floating toggle, bottom-right */
.gnav-toggle {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 60;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,0.5);
  background: rgba(5,6,10,0.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--wf-text);
  font-family: var(--wf-font-display);
  font-size: var(--wf-label-xs);
  letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 14px 40px -14px var(--wf-gold-glow);
  transition: all .3s var(--wf-ease);
}
.gnav-toggle:hover { border-color: var(--wf-gold); color: var(--wf-gold-bright); transform: translateY(-2px); }
.gnav-toggle .gnav-emoji { font-size: 16px; }
.gnav-toggle.active {
  background: linear-gradient(180deg, var(--wf-gold-bright), var(--wf-gold-deep));
  color: #16110a; border-color: var(--wf-gold-bright);
}
@media (max-width: 640px) { .gnav-toggle { right: 12px; bottom: 12px; padding: 10px 14px; } }

/* the gold cursor */
.gnav-cursor {
  position: fixed; top: 0; left: 0;
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;      /* centre on the point */
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s var(--wf-ease);
  will-change: transform;
}
.gnav-cursor.on { opacity: 1; }
.gnav-cursor svg { display: block; overflow: visible; }
.gnav-cursor .gnav-dwell-track { fill: none; stroke: rgba(212,175,55,0.22); stroke-width: 3; }
.gnav-cursor .gnav-dwell-fill  { fill: none; stroke: var(--wf-gold-bright); stroke-width: 3;
  transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .08s linear;
  filter: drop-shadow(0 0 6px var(--wf-gold-glow)); }
.gnav-cursor .gnav-dot { fill: var(--wf-gold-bright); filter: drop-shadow(0 0 5px var(--wf-gold-glow)); }
.gnav-cursor.pinch { transform: scale(0.8); }
.gnav-cursor.pinch .gnav-dot { fill: #fff; r: 6; }

/* highlight the element the hand is over */
.gnav-hover {
  outline: 2px solid var(--wf-gold) !important;
  outline-offset: 3px;
  border-radius: 8px;
  box-shadow: 0 0 0 6px rgba(212,175,55,0.12) !important;
}
.gnav-flash { animation: gnavFlash .3s var(--wf-ease); }
@keyframes gnavFlash {
  0% { box-shadow: 0 0 0 0 rgba(244,209,96,0.6); }
  100% { box-shadow: 0 0 0 20px rgba(244,209,96,0); }
}

/* status HUD, top-centre, only while active */
.gnav-hud {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%; transform: translateX(-50%);
  z-index: 61;
  display: none; align-items: center; gap: 12px;
  padding: 9px 10px 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,0.4);
  background: rgba(5,6,10,0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--wf-text-dim);
  font-size: var(--wf-label-xs); letter-spacing: 0.08em;
  max-width: calc(100vw - 24px);
}
body.gnav-active .gnav-hud { display: inline-flex; }
.gnav-hud .gnav-led {
  width: 8px; height: 8px; border-radius: 50%;
  background: #6df3a3; box-shadow: 0 0 10px rgba(109,243,163,0.7);
  animation: pulse 1.8s ease-in-out infinite;
}
.gnav-hud .gnav-msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gnav-hud .gnav-exit {
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--wf-graphite);
  color: var(--wf-text); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  transition: all .25s var(--wf-ease);
}
.gnav-hud .gnav-exit:hover { border-color: var(--wf-crimson); color: #ffb0b6; }
@media (max-width: 640px) {
  .gnav-hud .gnav-msg { max-width: 46vw; }
}

/* =====================================================================
   BRAND · THE WORDMARK
   ---------------------------------------------------------------------
   assets/logo.png is 1536x1536 but the actual wordmark only occupies
   998x330 at (269,573) — i.e. 21.5% of the height. Rendered naively at
   height:34px the mark came out 7.3px tall and was invisible.
   (It is also WebP bytes behind a .png name — Chromium sniffs it, but no
   image tool will open it, so we crop in CSS rather than re-encode.)

   We crop via background-size/position. Set --lh (unitless px) per usage;
   the rest is derived. calc() does unitless math then multiplies by 1px.
   ===================================================================== */
:root {
  --wf-logo-w: 998;    /* content box width  */
  --wf-logo-h: 330;    /* content box height */
  --wf-logo-x: 269;    /* content box left   */
  --wf-logo-y: 573;    /* content box top    */
  --wf-logo-f: 1536;   /* full file size     */
}
.wf-logo {
  --lh: 30;                                   /* desired rendered height, px (unitless) */
  --ls: calc(var(--lh) / var(--wf-logo-h));   /* scale ratio */
  display: block;
  flex: none;
  height: calc(var(--lh) * 1px);
  width:  calc(var(--wf-logo-w) * var(--ls) * 1px);
  background-image: url('/assets/logo.png');
  background-repeat: no-repeat;
  background-size:     calc(var(--wf-logo-f) * var(--ls) * 1px) calc(var(--wf-logo-f) * var(--ls) * 1px);
  background-position: calc(var(--wf-logo-x) * var(--ls) * -1px) calc(var(--wf-logo-y) * var(--ls) * -1px);
  /* lift the gold off dark backdrops */
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.7));
  transition: filter .35s var(--wf-ease), transform .35s var(--wf-ease);
}
a:hover > .wf-logo,
a.nav-brand:hover .wf-logo {
  filter: drop-shadow(0 2px 16px rgba(212,175,55,0.45));
}
/* size variants */
.wf-logo--nav   { --lh: 30; }
.wf-logo--mini  { --lh: 20; }
.wf-logo--foot  { --lh: 34; }
.wf-logo--hero  { --lh: 52; }
@media (max-width: 640px) {
  .wf-logo--nav  { --lh: 24; }
  .wf-logo--hero { --lh: 40; }
  .wf-logo--foot { --lh: 28; }
}

.wf-brand { display: flex; align-items: center; gap: 12px; user-select: none; position: relative; }
.wf-wrap { width: min(1120px, 92vw); margin: 0 auto; }
.wf-hairline { height: 1px; background: linear-gradient(90deg, transparent, rgba(212,175,55,0.35), transparent); border: 0; }

/* =====================================================================
   POWERED BY ASKSHIVA — engine credit
   Two forms: a per-card line inside the unreleased game/app chapters, and a
   fixed site-wide badge bottom-left. Bottom-LEFT is deliberately free real
   estate here: .gnav-toggle owns bottom-right (styles.css ~1670) and
   play.html's .dock is bottom-centre, so nothing collides on any page.
   ===================================================================== */
.chapter-credit {
  font-family: var(--wf-font-mono);
  font-size: var(--wf-label-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wf-text-mute);
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 7px;
}
.chapter-credit::before {
  content: '';
  width: 14px; height: 1px;
  background: linear-gradient(90deg, var(--wf-gold), transparent);
}
.chapter-credit strong { color: var(--wf-gold); font-weight: 500; letter-spacing: 0.12em; }

/* Fixed site-wide badge. pointer-events:none so it can never eat a click on the
   hero canvas / game beneath it; z-index sits under the gesture cursor (90) and
   under play.html's dock (20) is wrong, so keep it low but visible. */
.wf-credit {
  position: fixed;
  left: 18px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 12;
  font-family: var(--wf-font-mono);
  font-size: var(--wf-label-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wf-text-mute);
  background: rgba(5,6,10,0.55);
  border: 1px solid rgba(212,175,55,0.16);
  border-radius: 999px;
  padding: 7px 13px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  user-select: none;
}
.wf-credit strong { color: var(--wf-gold); font-weight: 500; }
@media (max-width: 640px) {
  .wf-credit { left: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 6px 10px; letter-spacing: 0.12em; }
}
/* The game owns the whole screen — don't sit a badge on top of live gameplay. */
body.racing .wf-credit { opacity: 0; transition: opacity .3s var(--wf-ease); }