/* ============================================================
   VAEL — AI game copilot · anime-mecha / sci-fi tech-art
   Palette (elizaOS-matched): orange #FF5800 (lead) · blue #0B35F1 (support)
                sand #D7D5CA (neutral) · white (text) · graphite #161616
   Two ALTERNATING section modes, BOTH dark:
     .ta  Type A — deep cinematic anime scenes (parallax depth)
     .tb  Type B — calm graphite w/ atmospheric depth (no flat fill)
   Type: Saira (powerful technical grotesk) for display,
         Space Grotesk for body, JetBrains Mono for HUD micro-labels.
   ============================================================ */

:root{
  /* fixed brand palette */
  --orange:    #ff5800;
  --orange-hi: #ff7a33;
  --orange-dk: #d44900;
  --blue:      #0b35f1;
  --blue-hi:   #2f55ff;
  --white:     #ffffff;
  --graphite:  #161616;
  --grey:      #d2d2d2;
  --sand:      #d7d5ca;            /* elizaOS warm neutral */
  --sand-dim:  rgba(215,213,202,.62);

  --glow:      rgba(255,88,0,.5);
  --blue-glow: rgba(11,53,241,.5);

  /* semantic tokens — overridden per section mode (defaults = Type A deep) */
  --bg:    #07090d;
  --bg-2:  #0c0f15;
  --ink:   #f4f6f9;
  --ink-2: #aab4c1;
  --muted: #6c7682;
  --line:  rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.20);
  --panel: rgba(255,255,255,.035);
  --panel-bd: rgba(255,255,255,.12);

  --eq-speed:1; --eq-amp:1; --parallax:1;
  --maxw:1240px; --r:3px;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --sans:"Space Grotesk", system-ui, -apple-system, sans-serif;
  --display:"Saira", "Space Grotesk", system-ui, sans-serif;
}

/* ---- section MODES (both dark, different depth) ---- */
.ta{
  --bg:#07090d; --bg-2:#0c0f15;
  --ink:#f4f6f9; --ink-2:#aeb8c4; --muted:#727c89;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20);
  --panel:rgba(255,255,255,.04); --panel-bd:rgba(255,255,255,.12);
  background:var(--bg); color:var(--ink);
}
.tb{
  /* graphite, lifted vs Type A so the rhythm still reads */
  --bg:#101216; --bg-2:#15181e;
  --ink:#eef1f5; --ink-2:#a4aeba; --muted:#6f7682;
  --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.18);
  --panel:rgba(255,255,255,.028); --panel-bd:rgba(255,255,255,.10);
  background:var(--bg); color:var(--ink);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  margin:0; background:#07090d; color:#f4f6f9;
  font-family:var(--sans); font-size:17px; line-height:1.6; letter-spacing:.01em;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--orange); color:#fff; }
:focus-visible{ outline:2px solid var(--blue-hi); outline-offset:3px; }

/* global sci-fi "screen" overlay — unifies the whole site, subtle */
body::before, body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:200; }
body::before{ /* scanlines */
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
  opacity:.55; mix-blend-mode:overlay; }
body::after{ /* edge vignette */
  background:radial-gradient(130% 100% at 50% 42%, transparent 58%, rgba(0,0,0,.5) 100%); }
@media (prefers-reduced-motion: reduce){ body::before{ display:none; } }

/* ---------- type ---------- */
.kicker{
  font-family:var(--mono); font-size:12.5px; font-weight:700;
  letter-spacing:.32em; text-transform:uppercase; color:var(--orange);
  display:inline-flex; align-items:center; gap:.7em;
}
.kicker::before{ content:""; width:26px; height:2px; background:var(--orange); box-shadow:0 0 10px var(--glow); }
.kicker.center::before{ display:none; }

h1,h2,h3{ font-family:var(--display); font-weight:800; letter-spacing:-.015em; line-height:1.0; margin:0; text-wrap:balance; }
h2{ font-size:clamp(32px,4.8vw,62px); }
h3{ font-size:21px; font-weight:700; letter-spacing:-.01em; }
p{ margin:0; }
.lead{ font-size:clamp(16px,1.5vw,19px); color:var(--ink-2); max-width:60ch; text-wrap:pretty; }
em.hl{ font-style:normal; color:var(--orange); font-weight:600; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; position:relative; z-index:5; }
section{ position:relative; }
.section-pad{ padding:clamp(80px,11vh,148px) 0; }
.eyebrow-row{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:26px; }
.eyebrow-row .idx{ font-family:var(--mono); font-size:12.5px; color:var(--sand-dim); letter-spacing:.2em; }

/* hairline seam between section modes — dual orange→blue */
.seam{ height:2px; border:0; margin:0; position:relative; z-index:6;
  background:linear-gradient(90deg, transparent, var(--orange) 38%, var(--blue) 62%, transparent);
  opacity:.7; }

/* ---------- buttons ---------- */
.btn{
  --bh:52px; display:inline-flex; align-items:center; gap:.6em;
  height:var(--bh); padding:0 24px; font-family:var(--mono); font-weight:700; font-size:14px;
  letter-spacing:.04em; text-transform:uppercase; border:1px solid transparent; border-radius:var(--r);
  cursor:pointer; position:relative; white-space:nowrap; overflow:hidden;
  transition:transform .18s, box-shadow .25s, background .2s, border-color .2s, color .2s;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:var(--orange); color:#fff;
  box-shadow:0 10px 30px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:hover{ background:var(--orange-hi); box-shadow:0 16px 44px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,.35); transform:translateY(-2px); }
/* ghost button carries the BLUE support accent */
.btn-ghost{ background:transparent; border-color:var(--line-2); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--blue-hi); color:var(--blue-hi); box-shadow:0 0 0 1px var(--blue-hi), 0 14px 40px -16px var(--blue-glow); }
.btn .ico{ width:16px; height:16px; }

/* ============================================================
   NAV — dark glass
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; padding:16px 32px;
  transition:background .3s, border-color .3s, backdrop-filter .3s, padding .3s;
  border-bottom:1px solid transparent; color:#fff;
}
.nav.scrolled{
  background:rgba(8,10,14,.72); backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:rgba(255,255,255,.08); padding-top:12px; padding-bottom:12px;
}
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:800; letter-spacing:.06em; }
.brand .mark{ width:28px; height:28px; position:relative; flex:0 0 auto; }
.brand .mark svg{ display:block; width:100%; height:100%;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.45)); }
.brand b{ font-size:19px; letter-spacing:.12em; }
.brand b em{ color:var(--orange); font-style:normal; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; opacity:.85; transition:color .2s,opacity .2s; }
.nav-links a:hover{ color:var(--orange); opacity:1; }
.nav-actions{ display:flex; align-items:center; gap:14px; }
.nav-status{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.85; display:flex; align-items:center; gap:7px; }
.nav-status .dot{ width:7px; height:7px; border-radius:50%; background:var(--blue-hi); box-shadow:0 0 9px var(--blue-hi); animation:pulseDot 2.4s infinite; }
@keyframes pulseDot{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* ============================================================
   HUD PANEL SYSTEM — corner brackets + lit edges (no pseudo conflict)
   corner ticks are drawn as 8 layered background gradients
   ============================================================ */
.hud, .live-cell{
  --hud:var(--line-2);
  background-color:var(--panel);
  background-image:
    linear-gradient(var(--hud),var(--hud)), linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)), linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)), linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)), linear-gradient(var(--hud),var(--hud));
  background-repeat:no-repeat;
  background-size:14px 2px,2px 14px, 14px 2px,2px 14px, 14px 2px,2px 14px, 14px 2px,2px 14px;
  background-position:
    left 10px top 10px, left 10px top 10px,
    right 10px top 10px, right 10px top 10px,
    left 10px bottom 10px, left 10px bottom 10px,
    right 10px bottom 10px, right 10px bottom 10px;
  transition:border-color .25s, transform .25s, box-shadow .25s, background-color .25s, --hud .25s;
}

/* ============================================================
   TYPE A — cinematic anime scenes (layered parallax)
   stylized: flat colour bands, crisp silhouettes, orange+blue rim
   ============================================================ */
.scene{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.scene > *{ position:absolute; will-change:transform; }
.stars{ inset:-6% 0; background-image:
  radial-gradient(1.5px 1.5px at 18% 24%, rgba(255,255,255,.85), transparent),
  radial-gradient(1.5px 1.5px at 68% 14%, rgba(255,255,255,.6), transparent),
  radial-gradient(1.3px 1.3px at 42% 9%, rgba(255,255,255,.7), transparent),
  radial-gradient(1.3px 1.3px at 85% 30%, rgba(255,255,255,.5), transparent),
  radial-gradient(1.3px 1.3px at 9% 13%, rgba(255,255,255,.55), transparent),
  radial-gradient(1.6px 1.6px at 55% 22%, rgba(47,85,255,.75), transparent),
  radial-gradient(1.4px 1.4px at 30% 33%, rgba(47,85,255,.45), transparent); }

/* SUNSET / above-the-clouds (hero + final) */
.scene-sun{ background:
  radial-gradient(120% 80% at 22% 8%, rgba(11,53,241,.20), transparent 52%),
  linear-gradient(180deg, #060810 0%, #0a1322 30%, #1b1b2b 52%, #3a2733 70%, #7a3d1c 88%, #b85619 100%); }
.scene-sun .sun{ left:54%; top:30%; width:240px; height:240px; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle at 46% 42%, #ffe6c4, #ff8a3a 38%, #ff5800 66%, #9c2c00 100%);
  box-shadow:0 0 120px 36px rgba(255,90,20,.42), inset -16px -20px 50px rgba(120,30,0,.5); }
.scene-sun .sun-rim{ left:54%; top:30%; width:300px; height:300px; transform:translate(-50%,-50%); border-radius:50%;
  border:2px solid rgba(255,170,90,.4); filter:blur(1px); }
.scene-sun .band{ left:-10%; right:-10%; height:120px; border-radius:50%; filter:blur(2px); }
.scene-sun .b1{ top:42%; background:linear-gradient(180deg, rgba(255,120,40,.22), transparent); height:200px; }
.scene-sun .cloud{ left:-12%; right:-12%; border-radius:50% 50% 0 0/100% 100% 0 0; }
.scene-sun .c-far{ bottom:30%; height:130px; background:#27313f;
  box-shadow:0 -2px 0 rgba(255,140,70,.45); filter:blur(.5px); opacity:.85;
  clip-path:polygon(0 60%,8% 40%,20% 55%,32% 30%,46% 52%,60% 28%,74% 50%,88% 35%,100% 55%,100% 100%,0 100%); }
.scene-sun .c-mid{ bottom:8%; height:200px; background:#161f2c;
  box-shadow:0 -2px 0 rgba(255,120,50,.5);
  clip-path:polygon(0 55%,12% 30%,26% 50%,40% 22%,55% 48%,70% 24%,84% 46%,100% 28%,100% 100%,0 100%); }
.scene-sun .c-near{ bottom:-6%; height:230px; background:#080e13;
  box-shadow:0 -3px 0 rgba(255,100,40,.4);
  clip-path:polygon(0 50%,16% 22%,34% 46%,52% 18%,70% 44%,86% 20%,100% 42%,100% 100%,0 100%); }

/* CANYON / burned (how it works) */
.scene-canyon{ background:
  radial-gradient(100% 70% at 78% 6%, rgba(11,53,241,.16), transparent 50%),
  linear-gradient(180deg, #080d14 0%, #0f1f2a 40%, #2a2622 66%, #5e3318 88%, #93491a 100%); }
.scene-canyon .ridge{ left:-6%; right:-6%; bottom:38%; height:200px; background:#162330; filter:blur(.6px); opacity:.82;
  clip-path:polygon(0 70%,14% 40%,28% 62%,44% 30%,60% 58%,78% 34%,92% 56%,100% 44%,100% 100%,0 100%); }
.scene-canyon .wall{ bottom:-4%; width:48%; height:74%; background:linear-gradient(180deg,#14212c,#080e13); }
.scene-canyon .wall.l{ left:-4%; clip-path:polygon(0 0,100% 18%,82% 100%,0 100%); box-shadow:inset -2px 0 0 rgba(255,110,40,.4); }
.scene-canyon .wall.r{ right:-4%; clip-path:polygon(0 18%,100% 0,100% 100%,18% 100%); box-shadow:inset 2px 0 0 rgba(255,110,40,.4); }
.scene-canyon .fall{ left:50%; top:18%; width:4px; height:54%; transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, rgba(190,215,245,.7) 40%, transparent); filter:blur(1px); }
.scene-canyon .glowline{ left:0; right:0; bottom:34%; height:2px; background:linear-gradient(90deg,transparent,var(--orange),transparent); filter:blur(1px); }

/* ICE cave (kept for completeness) */
.scene-ice{ background:linear-gradient(180deg, #08121b 0%, #0d2030 42%, #0a1a26 74%, #060f17 100%); }
.scene-ice .shard{ background:linear-gradient(180deg, rgba(110,160,255,.3), rgba(28,56,96,.5) 60%, rgba(8,18,30,.72)); filter:blur(1px); }
.scene-ice .s-l1{ left:-4%; bottom:-2%; width:30%; height:88%; clip-path:polygon(0 0,100% 26%,70% 100%,0 100%); }
.scene-ice .s-r1{ right:-4%; bottom:-2%; width:30%; height:92%; clip-path:polygon(0 26%,100% 0,100% 100%,30% 100%); }
.scene-ice .glowline{ left:0; right:0; top:40%; height:2px; background:linear-gradient(90deg,transparent,var(--blue-hi),transparent); filter:blur(1px); }
.scene-ice .mist{ left:0; right:0; bottom:0; height:46%; background:radial-gradient(70% 100% at 50% 100%, rgba(110,150,200,.26), transparent 72%); filter:blur(6px); }

/* ART scene (final CTA) — darkened anime/mecha key-art background */
.scene-art{ background:#05070b; }
.scene-art .art-img{ inset:0;
  background:url('images/final-art.jpg') 60% 32%/cover no-repeat;
  transform:scale(1.04); will-change:transform;
  animation:artDrift 34s ease-in-out infinite alternate; }
.scene-art .art-grade{ inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(5,7,12,.72) 0%, rgba(5,7,12,.42) 26%, rgba(5,7,12,.5) 60%, rgba(4,6,10,.95) 100%),
    radial-gradient(120% 90% at 50% 44%, rgba(4,6,11,.36), transparent 66%),
    radial-gradient(120% 80% at 16% 6%, rgba(11,53,241,.18), transparent 52%),
    radial-gradient(90% 60% at 70% 40%, rgba(255,88,0,.10), transparent 66%); }
@keyframes artDrift{ 0%{ transform:scale(1.04); } 100%{ transform:scale(1.1) translate(-1.4%,-1%); } }
@media (prefers-reduced-motion: reduce){ .scene-art .art-img{ animation:none; } }

/* shared cinematic overlays */
.scene .grain{ inset:0; mix-blend-mode:overlay; opacity:.4; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.scene .vig{ inset:0; background:radial-gradient(120% 92% at 50% 40%, transparent 50%, rgba(0,0,0,.64) 100%); }
.scene-fade{ position:absolute; left:0; right:0; height:140px; z-index:1; pointer-events:none; }
.scene-fade.top{ top:0; background:linear-gradient(180deg, var(--bg), transparent); }
.scene-fade.bottom{ bottom:0; background:linear-gradient(0deg, var(--bg), transparent); }

/* ============================================================
   SCENE DETAIL — anime-mecha / sci-fi tech-art enrichment
   volumetric god-rays · light shaft · atmospheric haze strata ·
   distant mecha skyline · drifting embers (all CSS, screen-blend)
   ============================================================ */
@keyframes rayspin{ to{ transform:translate(-50%,-50%) rotate(1turn); } }
@keyframes emberDrift{ from{ transform:translate3d(0,9px,0); } to{ transform:translate3d(0,-15px,0); } }

/* ---- SUNSET scene (hero + final) ---- */
.scene-sun .rays{ left:54%; top:30%; width:1600px; height:1600px; transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,162,86,.13) 0deg 2.6deg, transparent 2.6deg 12deg);
  -webkit-mask-image:radial-gradient(circle, #000 5%, rgba(0,0,0,.42) 22%, transparent 56%);
  mask-image:radial-gradient(circle, #000 5%, rgba(0,0,0,.42) 22%, transparent 56%);
  mix-blend-mode:screen; opacity:.6; animation:rayspin 150s linear infinite; }
.scene-sun .shaft{ inset:0;
  background:
    linear-gradient(180deg, rgba(255,176,96,.14) 0%, transparent 42%),
    radial-gradient(58% 42% at 54% 30%, rgba(255,128,52,.20), transparent 66%),
    radial-gradient(40% 24% at 54% 30%, rgba(47,85,255,.12), transparent 70%);
  mix-blend-mode:screen; opacity:.85; }
.scene-sun .haze{ left:0; right:0; top:34%; bottom:0;
  background:repeating-linear-gradient(180deg, rgba(255,150,80,.05) 0 2px, transparent 2px 30px);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 38%, #000 76%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 38%, #000 76%, transparent);
  mix-blend-mode:screen; opacity:.6; }
.scene-sun .skyline{ left:-4%; right:-4%; bottom:20%; height:150px;
  background:linear-gradient(180deg, #0a121e, #060a11);
  box-shadow:0 -1px 0 rgba(255,124,52,.55), 0 0 26px rgba(11,53,241,.18);
  filter:blur(.3px); opacity:.92;
  clip-path:polygon(
    0 64%,3% 64%,3% 40%,5% 40%,5% 64%,9% 64%,10% 30%,11% 30%,11% 64%,
    16% 64%,16% 48%,18% 48%,18% 20%,19% 20%,19% 48%,22% 48%,22% 64%,
    28% 64%,29% 52%,30% 52%,30% 12%,31% 12%,31% 52%,33% 52%,33% 64%,
    40% 64%,40% 44%,43% 44%,43% 64%,48% 64%,49% 34%,50% 34%,50% 64%,
    56% 64%,56% 50%,58% 50%,58% 26%,59% 26%,59% 50%,62% 50%,62% 64%,
    69% 64%,70% 38%,71% 38%,71% 64%,77% 64%,77% 46%,79% 46%,79% 18%,
    80% 18%,80% 46%,83% 46%,83% 64%,90% 64%,91% 30%,92% 30%,92% 64%,
    97% 64%,97% 50%,100% 50%,100% 100%,0 100%); }
.scene-sun .sparks{ inset:0; opacity:.8;
  background-image:
    radial-gradient(2px 2px at 20% 70%, rgba(255,150,80,.9), transparent),
    radial-gradient(1.5px 1.5px at 64% 58%, rgba(255,200,140,.8), transparent),
    radial-gradient(1.5px 1.5px at 38% 82%, rgba(255,130,60,.7), transparent),
    radial-gradient(2px 2px at 82% 74%, rgba(47,85,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 50% 66%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.5px 1.5px at 10% 60%, rgba(255,170,90,.6), transparent);
  animation:emberDrift 14s ease-in-out infinite alternate; }

/* ---- CANYON scene (how it works) ---- */
.scene-canyon .rays{ left:50%; top:-10%; width:1200px; height:1100px; transform:translateX(-50%);
  background:repeating-conic-gradient(from 178deg at 50% 0%,
    rgba(190,215,245,.10) 0deg 2.2deg, transparent 2.2deg 9deg);
  -webkit-mask-image:radial-gradient(80% 90% at 50% 0%, #000 0%, transparent 70%);
  mask-image:radial-gradient(80% 90% at 50% 0%, #000 0%, transparent 70%);
  mix-blend-mode:screen; opacity:.5; }
.scene-canyon .haze{ left:0; right:0; top:30%; bottom:0;
  background:repeating-linear-gradient(180deg, rgba(190,210,240,.04) 0 2px, transparent 2px 28px);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 40%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 40%, transparent);
  mix-blend-mode:screen; opacity:.5; }
.scene-canyon .skyline{ left:-4%; right:-4%; bottom:34%; height:120px;
  background:linear-gradient(180deg, #101b26, #0a131c);
  box-shadow:0 -1px 0 rgba(255,124,52,.4); opacity:.8; filter:blur(.3px);
  clip-path:polygon(0 70%,8% 40%,12% 64%,20% 30%,26% 60%,34% 34%,40% 58%,
    48% 28%,54% 56%,62% 36%,70% 60%,78% 32%,86% 58%,94% 40%,100% 62%,100% 100%,0 100%); }
.scene-canyon .sparks{ inset:0; opacity:.7;
  background-image:
    radial-gradient(1.5px 1.5px at 30% 60%, rgba(190,215,245,.8), transparent),
    radial-gradient(2px 2px at 66% 52%, rgba(255,140,70,.7), transparent),
    radial-gradient(1.5px 1.5px at 48% 70%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 80% 64%, rgba(47,85,255,.6), transparent);
  animation:emberDrift 16s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce){
  .scene-sun .rays, .scene-sun .sparks, .scene-canyon .sparks{ animation:none; }
}

/* ============================================================
   HERO ARENA — esports battle montage (supported games)
   cross-fading key-art (Dota 2 · Valorant · LoL · Apex) with
   ken-burns push, readability scrim, brand duotone grade, and
   tactical HUD: tech grid, scan sweep, lock-on reticle, frame
   ============================================================ */
.scene-arena{ background:#05070b; }
.scene-arena .arena-slide{ inset:0; background-position:center; background-size:cover; background-repeat:no-repeat;
  opacity:0; transform:scale(1.05); will-change:opacity, transform;
  animation:arenaCycle 32s cubic-bezier(.45,0,.2,1) infinite; }
.scene-arena .s0{ background-image:url('images/dota2.webp');  background-position:50% 42%; animation-delay:-0s; }
.scene-arena .s1{ background-image:url('images/valorant.jpg'); background-position:54% 40%; animation-delay:-8s; }
.scene-arena .s2{ background-image:url('images/lol.jpg');      background-position:50% 38%; animation-delay:-16s; }
.scene-arena .s3{ background-image:url('images/apex.webp');    background-position:52% 40%; animation-delay:-24s; }
@keyframes arenaCycle{
  0%{ opacity:0; transform:scale(1.05) translateX(-1.2%); }
  3%{ opacity:1; }
  22%{ opacity:1; }
  26%{ opacity:0; transform:scale(1.18) translateX(2%); }
  100%{ opacity:0; transform:scale(1.18) translateX(2%); }
}
/* brand duotone grade — unifies the 4 differently-coloured key-arts */
.scene-arena .arena-grade{ inset:0; z-index:1; pointer-events:none; mix-blend-mode:color; opacity:.16;
  background:linear-gradient(120deg, rgba(255,88,0,.9), rgba(11,53,241,.9)); }
/* readability scrim + cinematic vignette */
.scene-arena .arena-scrim{ inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(5,7,11,.96) 0%, rgba(5,7,11,.8) 28%, rgba(5,7,11,.34) 56%, rgba(5,7,11,.5) 100%),
    linear-gradient(180deg, rgba(5,7,11,.55) 0%, transparent 24%, transparent 56%, rgba(5,7,11,.85) 100%),
    radial-gradient(120% 100% at 68% 42%, transparent 48%, rgba(5,7,11,.5) 100%); }
.scene-arena .grain{ z-index:2; }
.scene-arena .vig{ z-index:2; }
/* tactical tech grid */
.scene-arena .arena-grid{ inset:0; z-index:3; pointer-events:none; opacity:.4;
  background-image:
    linear-gradient(rgba(47,85,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,85,255,.16) 1px, transparent 1px);
  background-size:48px 48px, 48px 48px;
  -webkit-mask-image:radial-gradient(120% 90% at 62% 50%, #000 28%, transparent 78%);
  mask-image:radial-gradient(120% 90% at 62% 50%, #000 28%, transparent 78%); }
/* scan sweep */
.scene-arena .arena-scan{ left:0; right:0; height:40%; top:-40%; z-index:3; pointer-events:none; opacity:.5;
  background:linear-gradient(180deg, transparent, rgba(120,180,255,.10) 60%, rgba(170,215,255,.38) 92%, transparent);
  animation:arenaScan 7s linear infinite; }
@keyframes arenaScan{ 0%{ transform:translateY(0);} 100%{ transform:translateY(360%);} }
/* lock-on reticle that re-locks on each game */
.scene-arena .reticle{ z-index:4; width:122px; height:122px; margin:-61px 0 0 -61px; left:60%; top:46%; pointer-events:none;
  animation:reticleTrack 32s cubic-bezier(.65,0,.2,1) infinite; }
.scene-arena .reticle::before{ content:""; position:absolute; inset:0; border-radius:50%;
  border:1.5px solid rgba(255,88,0,.85); box-shadow:0 0 18px rgba(255,88,0,.4), inset 0 0 18px rgba(255,88,0,.18);
  animation:reticlePulse 2.4s ease-in-out infinite; }
.scene-arena .reticle::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(#ff5800,#ff5800) 50% 0/2px 24px no-repeat,
    linear-gradient(#ff5800,#ff5800) 50% 100%/2px 24px no-repeat,
    linear-gradient(#ff5800,#ff5800) 0 50%/24px 2px no-repeat,
    linear-gradient(#ff5800,#ff5800) 100% 50%/24px 2px no-repeat; opacity:.9; }
@keyframes reticlePulse{ 0%,100%{ transform:scale(.9); opacity:.7;} 50%{ transform:scale(1.06); opacity:1;} }
@keyframes reticleTrack{
  0%{ left:60%; top:48%; } 22%{ left:62%; top:46%; }
  25%{ left:73%; top:40%; } 47%{ left:71%; top:42%; }
  50%{ left:57%; top:55%; } 72%{ left:59%; top:53%; }
  75%{ left:80%; top:46%; } 97%{ left:78%; top:48%; }
  100%{ left:60%; top:48%; }
}
/* viewport HUD corner frame */
.scene-arena .arena-frame{ inset:18px; z-index:4; pointer-events:none; --hc:rgba(255,255,255,.55);
  background-image:
    linear-gradient(var(--hc),var(--hc)),linear-gradient(var(--hc),var(--hc)),
    linear-gradient(var(--hc),var(--hc)),linear-gradient(var(--hc),var(--hc)),
    linear-gradient(var(--hc),var(--hc)),linear-gradient(var(--hc),var(--hc)),
    linear-gradient(var(--hc),var(--hc)),linear-gradient(var(--hc),var(--hc));
  background-repeat:no-repeat;
  background-size:30px 2px,2px 30px, 30px 2px,2px 30px, 30px 2px,2px 30px, 30px 2px,2px 30px;
  background-position:left top,left top, right top,right top, left bottom,left bottom, right bottom,right bottom; }
/* cycling NOW PLAYING game tag (top-left, clear of copy) */
.scene-arena .arena-tag{ z-index:5; left:34px; top:96px; pointer-events:none;
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  display:flex; align-items:center; gap:12px; }
.scene-arena .arena-tag .live{ display:flex; align-items:center; gap:7px; color:var(--orange); font-weight:700; }
.scene-arena .arena-tag .live i{ width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 10px var(--glow); animation:pulseDot 1.6s infinite; }
.scene-arena .arena-tag .gname{ position:relative; width:200px; height:1.25em; }
.scene-arena .arena-tag .gname span{ position:absolute; left:0; top:0; opacity:0; white-space:nowrap; color:#fff; font-weight:700; animation:tagCycle 32s infinite; }
.scene-arena .arena-tag .gname span:nth-child(1){ animation-delay:-0s; }
.scene-arena .arena-tag .gname span:nth-child(2){ animation-delay:-8s; }
.scene-arena .arena-tag .gname span:nth-child(3){ animation-delay:-16s; }
.scene-arena .arena-tag .gname span:nth-child(4){ animation-delay:-24s; }
@keyframes tagCycle{ 0%{opacity:0} 3%{opacity:1} 22%{opacity:1} 26%{opacity:0} 100%{opacity:0} }
@media (prefers-reduced-motion: reduce){
  .scene-arena .arena-slide{ animation:none; }
  .scene-arena .s0{ opacity:1; transform:scale(1.05); }
  .scene-arena .arena-scan, .scene-arena .reticle, .scene-arena .reticle::before,
  .scene-arena .arena-tag .gname span{ animation:none; }
  .scene-arena .arena-tag .gname span:nth-child(1){ opacity:1; }
}

/* ============================================================
   TYPE B — calm graphite w/ atmospheric depth (NOT flat)
   layered: tech dot-grid · soft orange+blue ambient mounds ·
            faint blueprint horizon · ambient orb · screen vignette
   ============================================================ */
.tb-grid{ position:absolute; inset:-14%; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.11) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(11,53,241,.10) 1px, transparent 1.6px);
  background-size:26px 26px, 26px 26px;
  background-position:0 0, 13px 13px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 120%, #000 0%, rgba(0,0,0,.5) 44%, transparent 76%);
  mask-image:radial-gradient(120% 80% at 50% 120%, #000 0%, rgba(0,0,0,.5) 44%, transparent 76%);
  opacity:.6; }
.tb-hills{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.tb-hills span{ position:absolute; left:-12%; right:-12%; border-radius:50% 50% 0 0/100% 100% 0 0; filter:blur(8px); }
.tb-hills .h1{ bottom:-34%; height:66%; background:radial-gradient(60% 100% at 50% 100%, rgba(255,88,0,.14), transparent 70%); }
.tb-hills .h2{ bottom:-30%; height:54%; left:-34%; right:36%; background:radial-gradient(60% 100% at 50% 100%, rgba(11,53,241,.16), transparent 68%); }
/* faint blueprint horizon line sweeping across the band */
.tb::after{ content:""; position:absolute; left:0; right:0; bottom:20%; height:1px; z-index:0; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(11,53,241,.32) 30%, rgba(255,88,0,.28) 70%, transparent); opacity:.5; }
.tb-orb{ position:absolute; z-index:0; width:420px; height:420px; border-radius:50%; pointer-events:none; filter:blur(6px);
  background:radial-gradient(circle at 40% 36%, rgba(255,88,0,.12), transparent 60%); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ min-height:100svh; display:flex; align-items:center; padding:120px 0 80px; }
.hero .wrap{ display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center; max-width:1360px; }
.hero-copy{ max-width:740px; }
.hero h1{ font-size:clamp(27px,3vw,36px); letter-spacing:-.01em; line-height:1.2; margin:0; }
.hero h1 .o{ color:var(--orange); text-shadow:0 0 40px var(--glow); }
.hero .tag{ font-family:var(--mono); font-weight:700; text-transform:uppercase; letter-spacing:.18em;
  font-size:clamp(13px,1.5vw,16px); color:var(--ink-2); margin:20px 0 0; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.hero .tag .sep{ width:6px; height:6px; background:var(--orange); border-radius:50%; }
.hero .lead{ margin-top:20px; font-size:clamp(11px,1.1vw,15px); line-height:1.5; }
@media (max-width:1000px){ .hero .lead{ font-size:15px; } }
@media (max-width:620px){ .hero-br{ display:none; } }
.hero-cta{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; align-items:center; }
.hero-meta{ display:flex; gap:28px; margin-top:36px; flex-wrap:wrap; }
.hero-meta .m b{ font-family:var(--display); font-size:27px; font-weight:800; display:block; }
.hero-meta .m span{ font-size:12px; color:var(--muted); letter-spacing:.06em; font-family:var(--mono); text-transform:uppercase; }
.hero-stage{ position:relative; height:520px; display:flex; align-items:center; justify-content:center; }
.platforms{ display:flex; gap:9px; align-items:center; font-family:var(--mono); font-size:12px; color:var(--sand-dim); letter-spacing:.1em; }
.platforms svg{ width:15px; height:15px; opacity:.8; }
.trust-line{ display:inline-flex; gap:9px; align-items:center; margin-top:22px; font-family:var(--mono); font-size:12px;
  color:var(--sand-dim); letter-spacing:.08em; text-decoration:none; transition:color .2s; }
.trust-line svg{ width:16px; height:16px; opacity:.85; flex:none; }
.trust-line svg.verified-badge{ width:18px; height:18px; opacity:1; }
.trust-line:hover{ color:var(--orange); }
.hud-readout{ position:absolute; z-index:5; right:32px; bottom:30px; font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; color:var(--sand-dim); text-align:right; line-height:1.85; opacity:.9; }
.hud-readout .v{ color:var(--orange); }
.hud-readout div:nth-child(2) .v{ color:var(--blue-hi); }

/* ============================================================
   MARQUEE (kept)
   ============================================================ */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0; overflow:hidden; position:relative; z-index:5; }
.marquee .row{ display:flex; gap:50px; width:max-content; animation:slide 34s linear infinite; }
.marquee:hover .row{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee .it{ font-family:var(--mono); font-weight:700; font-size:18px; letter-spacing:.04em; color:var(--ink-2);
  text-transform:uppercase; display:flex; align-items:center; gap:14px; white-space:nowrap; }
.marquee .it::after{ content:"·"; color:var(--orange); margin-left:14px; }

/* ============================================================
   MECHA FRAME — chamfered "armour plate" clip for cards + tiers
   variants switch via body[data-frame]; default = bevel
   ============================================================ */
:root{ --frame-cut:18px;
  --frame-clip:polygon(0 0, calc(100% - var(--frame-cut)) 0, 100% var(--frame-cut), 100% 100%, var(--frame-cut) 100%, 0 calc(100% - var(--frame-cut))); }
body[data-frame="plate"]{ --frame-clip:polygon(var(--frame-cut) 0, calc(100% - var(--frame-cut)) 0, 100% var(--frame-cut), 100% 100%, 0 100%, 0 var(--frame-cut)); }
body[data-frame="notch"]{ --frame-clip:polygon(var(--frame-cut) 0, calc(100% - var(--frame-cut)) 0, 100% var(--frame-cut), 100% calc(100% - var(--frame-cut)), calc(100% - var(--frame-cut)) 100%, var(--frame-cut) 100%, 0 calc(100% - var(--frame-cut)), 0 var(--frame-cut)); }

/* ============================================================
   FEATURE GRID
   ============================================================ */
.feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:54px; }
/* feature cards — mecha plate: chamfered corners, lit duotone edge, scan-beam */
.card{ position:relative; isolation:isolate; border:0; border-radius:0;
  padding:30px 28px 34px; --fill:#13161c;
  background:linear-gradient(135deg, rgba(255,88,0,.6), rgba(255,255,255,.16) 42%, rgba(11,53,241,.55));
  clip-path:var(--frame-clip);
  transition:transform .25s, filter .25s, background .3s, box-shadow .25s; }
.card::before{ content:""; position:absolute; inset:1.5px; z-index:-1; background:var(--fill); clip-path:var(--frame-clip); }
.card::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  clip-path:var(--frame-clip); mix-blend-mode:screen; transform:translateX(-120%);
  background:linear-gradient(115deg, transparent 42%, rgba(255,150,80,.5) 50%, transparent 58%); }
.card:hover{ transform:translateY(-4px);
  background:linear-gradient(135deg, var(--orange), rgba(255,255,255,.32) 45%, var(--blue-hi));
  box-shadow:0 18px 44px -22px var(--glow); }
.card:hover::after{ opacity:1; animation:scanCard 1.25s linear infinite; }
@keyframes scanCard{ 0%{ transform:translateX(-120%);} 100%{ transform:translateX(120%);} }
.card .num{ font-family:var(--mono); font-size:12px; color:var(--sand-dim); letter-spacing:.2em; }
.card .ic{ width:42px; height:42px; margin:18px 0 20px; color:var(--orange); }
.card h3{ font-size:19px; margin-bottom:10px; }
.card p{ color:var(--ink-2); font-size:15px; line-height:1.55; }
.card .glowline{ display:none; }

/* ============================================================
   STEPS
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:54px; }
.step{ position:relative; padding-top:26px; border-top:1px solid var(--line-2); }
.step .n{ font-family:var(--mono); font-weight:800; font-size:13px; color:var(--orange); letter-spacing:.2em; }
.step h3{ font-size:22px; margin:16px 0 10px; }
.step p{ color:var(--ink-2); font-size:15px; }

/* ============================================================
   VOICE (kept)
   ============================================================ */
.voice .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.voice-stage{ position:relative; height:440px; display:flex; align-items:center; justify-content:center; }
.callouts{ display:flex; flex-direction:column; gap:12px; margin-top:30px; }
.callout{ display:flex; align-items:center; gap:14px; background:rgba(10,16,22,.6); border:1px solid var(--line-2);
  border-left:2px solid var(--orange); border-radius:var(--r); padding:13px 16px; backdrop-filter:blur(8px);
  font-size:15px; opacity:0; transform:translateX(-12px); }
.callout.show{ opacity:1; transform:none; transition:opacity .5s, transform .5s; }
.callout .who{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); flex:0 0 auto; }
.callout em{ font-style:normal; color:var(--orange-hi); }

/* ============================================================
   METRICS (kept)
   ============================================================ */
.metric-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:50px; }
.metric{ background:var(--bg-2); padding:38px 26px; }
.metric b{ font-family:var(--display); font-weight:800; font-size:clamp(40px,5.4vw,62px); line-height:1; letter-spacing:-.02em; display:block; }
.metric b .u{ color:var(--orange); }
.metric span{ display:block; margin-top:14px; font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; color:var(--ink-2); text-transform:uppercase; }

/* ============================================================
   PRICING
   ============================================================ */
.tiers{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:54px; align-items:stretch; max-width:840px; margin-left:auto; margin-right:auto; }
.tier{ position:relative; isolation:isolate; display:flex; flex-direction:column; border:0; border-radius:0;
  padding:32px 30px 34px; --fill:#13161c;
  background:linear-gradient(135deg, rgba(255,88,0,.6), rgba(255,255,255,.16) 42%, rgba(11,53,241,.55));
  clip-path:var(--frame-clip);
  transition:transform .25s, background .3s, box-shadow .25s; }
.tier::before{ content:""; position:absolute; inset:1.5px; z-index:-1; background:var(--fill); clip-path:var(--frame-clip); }
.tier::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  clip-path:var(--frame-clip); mix-blend-mode:screen; transform:translateX(-120%);
  background:linear-gradient(115deg, transparent 42%, rgba(255,150,80,.5) 50%, transparent 58%); }
.tier:hover{ transform:translateY(-4px);
  background:linear-gradient(135deg, var(--orange), rgba(255,255,255,.3) 45%, var(--blue-hi)); }
.tier:hover::after{ opacity:1; animation:scanCard 1.25s linear infinite; }
.tier.feature{ --fill:#19110f;
  background:linear-gradient(135deg, var(--orange), rgba(255,190,130,.55) 46%, var(--orange-dk));
  box-shadow:0 24px 64px -30px var(--glow); }
.tier .badge{ position:absolute; top:16px; right:18px; z-index:4; background:var(--orange); color:#fff;
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding:5px 11px; border-radius:2px; box-shadow:0 6px 18px -6px var(--glow); }
.tier .pname{ font-family:var(--mono); font-weight:800; font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); }
.tier .price{ font-family:var(--display); font-weight:800; font-size:48px; letter-spacing:-.02em; margin:18px 0 4px; }
.tier .price span{ font-size:15px; color:var(--muted); letter-spacing:0; font-family:var(--mono); }
.tier .price span.amt{ font-size:inherit; color:inherit; letter-spacing:inherit; font-family:var(--display); font-weight:inherit; }
.tier .pdesc{ color:var(--ink-2); font-size:14px; min-height:42px; }
.tier ul{ list-style:none; padding:0; margin:24px 0 28px; display:flex; flex-direction:column; gap:12px; }
.tier li{ display:flex; gap:11px; font-size:14.5px; color:var(--ink-2); align-items:flex-start; }
.tier li svg{ width:16px; height:16px; color:var(--orange); flex:0 0 auto; margin-top:3px; }
.tier .btn{ margin-top:auto; justify-content:center; }

/* ============================================================
   FAQ (kept)
   ============================================================ */
.faq-list{ margin-top:46px; border-top:1px solid var(--line); }
.faq{ border-bottom:1px solid var(--line); }
.faq button{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; background:none; border:0; color:inherit; cursor:pointer; text-align:left; padding:26px 4px; font-family:var(--display); font-weight:700; font-size:clamp(16px,2vw,21px); }
.faq button .q{ display:flex; gap:16px; align-items:baseline; }
.faq button .q i{ color:var(--orange); font-style:normal; font-size:13px; font-family:var(--mono); }
.faq .pm{ flex:0 0 auto; width:20px; height:20px; position:relative; }
.faq .pm::before,.faq .pm::after{ content:""; position:absolute; background:var(--orange); transition:transform .3s, opacity .3s; }
.faq .pm::before{ left:0; right:0; top:50%; height:2px; transform:translateY(-50%); }
.faq .pm::after{ top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%); }
.faq.open .pm::after{ transform:translateX(-50%) scaleY(0); opacity:0; }
.faq .ans{ overflow:hidden; max-height:0; transition:max-height .4s ease; }
.faq .ans p{ padding:0 4px 26px; color:var(--ink-2); max-width:74ch; font-size:15.5px; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{ min-height:92svh; display:flex; align-items:center; overflow:hidden; }
.final .wrap{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.final h2{ font-size:clamp(40px,7vw,92px); line-height:.96; margin:22px 0 0; }
.final h2 .o{ color:var(--orange); text-shadow:0 0 42px var(--glow); }
.final .lead{ margin:26px auto 0; text-align:center; }
.final .hero-cta{ justify-content:center; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ border-top:1px solid var(--line); padding:54px 0 40px; }
.foot .wrap{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:flex-start; }
.foot .brand b{ font-size:17px; }
.foot-cols{ display:flex; gap:60px; flex-wrap:wrap; }
.foot-col h4{ font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--sand-dim); margin:0 0 16px; }
.foot-col a{ display:block; font-size:14px; color:var(--ink-2); margin-bottom:10px; transition:color .2s; }
.foot-col a:hover{ color:var(--orange); }
.foot-col a .ico{ width:20px; height:20px; }
.foot-col a.icon-link{ display:inline-flex; align-items:center; justify-content:center; padding:10px; margin:-10px 0 0 -10px; }
.foot-base{ border-top:1px solid var(--line); margin-top:46px; padding-top:24px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-family:var(--mono); font-size:12px; color:var(--sand-dim); letter-spacing:.06em; }

/* ============================================================
   reveal
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:1000px){
  .hero .wrap,.voice .wrap{ grid-template-columns:1fr; }
  .hero .wrap>*,.voice .wrap>*{ min-width:0; }
  .hero-stage{ height:420px; order:-1; } .voice-stage{ height:380px; }
  .hero-stage,.voice-stage{ overflow:hidden; }
  .section-pad{ overflow-x:clip; }
  .feat-grid,.tiers,.steps{ grid-template-columns:1fr 1fr; }
  .metric-grid{ grid-template-columns:1fr 1fr; }
  .nav-links{ display:none; }
}
@media (max-width:620px){
  body{ font-size:16px; } .wrap{ padding:0 20px; } .nav{ padding:14px 20px; }
  .tiers,.steps,.metric-grid{ grid-template-columns:1fr; }
  .hero-meta{ gap:18px; } .nav-status{ display:none; }
  /* feature cards: horizontal swipe carousel, contained within the screen */
  .feat-grid{
    display:flex; gap:14px; grid-template-columns:none;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    margin:54px -20px 0; padding:4px 20px 10px;
    scrollbar-width:none;
  }
  .feat-grid::-webkit-scrollbar{ display:none; }
  .feat-grid>*{ flex:0 0 80%; min-width:0; margin-top:0; scroll-snap-align:start; }
}

/* ============================================================
   hero chip · live strip · games · how-state mascots
   ============================================================ */
.chip{ display:inline-flex; align-items:center; gap:11px; margin-top:32px;
  font-family:var(--mono); font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); border:1px solid var(--line-2); border-radius:999px; padding:10px 18px; background:var(--panel); }
.chip i{ width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 10px 1px var(--glow); flex:0 0 auto; }
.chip em{ font-style:normal; color:var(--orange); }

/* live metrics strip */
.live-strip{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:50px; }
.live-cell{ position:relative; border:1px solid var(--panel-bd); border-radius:var(--r); padding:44px 38px; overflow:hidden; backdrop-filter:blur(3px); }
.live-cell .lab{ font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:9px; }
.live-cell .lab .dot{ width:8px; height:8px; border-radius:50%; background:var(--orange); box-shadow:0 0 10px 1px var(--glow); animation:pulseDot 2.2s infinite; }
.live-cell b{ font-family:var(--display); font-weight:800; font-size:clamp(46px,6vw,80px); line-height:1; letter-spacing:-.02em; display:block; margin-top:18px; }
.live-cell b .u{ color:var(--orange); }
/* the live "now playing" cell carries the BLUE support accent */
.live-cell:nth-child(2){ --hud:var(--blue); border-color:rgba(11,53,241,.32); }
.live-cell:nth-child(2) .lab .dot{ background:var(--blue-hi); box-shadow:0 0 10px 1px var(--blue-glow); }
.live-cell:nth-child(2) b{ color:var(--blue-hi); text-shadow:0 0 34px var(--blue-glow); }
.live-cell .sub{ margin-top:15px; font-size:14.5px; color:var(--ink-2); max-width:34ch; }
.live-cell #liveNow{ transition:opacity .35s; }

/* games grid — full-bleed real game art, HUD corners ON TOP */
.games-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:54px; }
.game{ position:relative; display:block; aspect-ratio:3/4; border:1px solid var(--panel-bd);
  border-radius:var(--r); overflow:hidden; --hud:var(--line-2);
  transition:border-color .25s, transform .25s, box-shadow .25s; }
/* the artwork fills the whole frame */
.game .shot{ position:absolute; inset:0; z-index:0; background-image:var(--shot);
  background-size:cover; background-position:center; transform:scale(1.001);
  transition:transform .5s ease, filter .3s; }
.game:hover .shot{ transform:scale(1.06); }
/* bottom scrim so the label stays readable over any art */
.game::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:62%; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, rgba(5,7,11,.94) 6%, rgba(5,7,11,.55) 42%, transparent 100%); }
/* HUD corner brackets drawn OVER the image */
.game .frame{ position:absolute; inset:0; z-index:3; pointer-events:none;
  background-image:
    linear-gradient(var(--hud),var(--hud)), linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)), linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)), linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)), linear-gradient(var(--hud),var(--hud));
  background-repeat:no-repeat;
  background-size:16px 2px,2px 16px, 16px 2px,2px 16px, 16px 2px,2px 16px, 16px 2px,2px 16px;
  background-position:
    left 9px top 9px, left 9px top 9px,
    right 9px top 9px, right 9px top 9px,
    left 9px bottom 9px, left 9px bottom 9px,
    right 9px bottom 9px, right 9px bottom 9px;
  transition:background-image .25s; }
.game .meta{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 16px 16px; display:flex; flex-direction:column; gap:5px; }
.game .gname{ font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.01em; line-height:1.2; color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.6); }
.game .tag-live{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); display:flex; align-items:center; gap:7px; }
.game .tag-live i{ width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 8px var(--glow); }
.game .badge-soon{ position:absolute; top:12px; left:12px; z-index:3; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(8,10,14,.66); border:1px solid var(--line-2); border-radius:2px; padding:4px 8px; backdrop-filter:blur(4px); }
/* available game — orange HUD */
.game.live{ --hud:var(--orange); border-color:var(--orange); box-shadow:0 18px 52px -28px var(--glow); }
.game.live:hover{ transform:translateY(-4px); }
/* coming-soon games — desaturated, lit up on hover */
.game.dim .shot{ filter:saturate(.55) brightness(.62); }
.game.dim:hover{ --hud:var(--blue-hi); border-color:rgba(47,85,255,.5); transform:translateY(-4px); }
.game.dim:hover .shot{ filter:saturate(.9) brightness(.82); }

/* how-it-works — real app screenshots framed with HUD corners */
.steps.shots{ gap:28px; }
.steps.shots .step{ border-top:0; padding-top:0; }
.shot-card{ position:relative; margin:0 0 22px; aspect-ratio:16/10; overflow:hidden;
  border:1px solid var(--panel-bd); border-radius:var(--r); background:#07090d;
  --hud:var(--line-2); box-shadow:0 22px 60px -34px rgba(0,0,0,.9);
  transition:border-color .25s, transform .25s, box-shadow .25s; }
.shot-card img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block; }
.shot-card .shot-frame{ position:absolute; inset:0; z-index:3; pointer-events:none;
  background-image:
    linear-gradient(var(--hud),var(--hud)), linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)), linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)), linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)), linear-gradient(var(--hud),var(--hud));
  background-repeat:no-repeat;
  background-size:18px 1px,1px 18px, 18px 1px,1px 18px, 18px 1px,1px 18px, 18px 1px,1px 18px;
  background-position:
    left 9px top 9px, left 9px top 9px,
    right 9px top 9px, right 9px top 9px,
    left 9px bottom 9px, left 9px bottom 9px,
    right 9px bottom 9px, right 9px bottom 9px;
  transition:background-image .25s; }
.shot-card .shot-badge{ position:absolute; top:11px; left:11px; z-index:4;
  font-family:var(--mono); font-weight:800; font-size:12px; letter-spacing:.16em;
  color:var(--orange); padding:4px 8px; border-radius:2px;
  background:rgba(7,9,13,.66); border:1px solid rgba(255,88,0,.4);
  backdrop-filter:blur(4px); }
.step:hover .shot-card{ --hud:var(--orange); border-color:rgba(255,88,0,.55);
  transform:translateY(-4px); box-shadow:0 26px 64px -30px var(--glow); }
@media (max-width:1000px){ .steps.shots{ gap:32px 20px; } }

/* clickable screenshots */
.shot-card{ cursor:zoom-in; }
.shot-card .shot-zoom{ position:absolute; top:11px; right:11px; z-index:4;
  width:26px; height:26px; border-radius:2px; display:grid; place-items:center;
  background:rgba(7,9,13,.66); border:1px solid rgba(255,88,0,.4);
  backdrop-filter:blur(4px); opacity:0; transform:scale(.85);
  transition:opacity .2s ease, transform .2s ease; pointer-events:none; }
.shot-card .shot-zoom::before, .shot-card .shot-zoom::after{ content:"";
  position:absolute; background:var(--orange); }
.shot-card .shot-zoom::before{ width:11px; height:2px; }
.shot-card .shot-zoom::after{ width:2px; height:11px; }
.step:hover .shot-zoom{ opacity:1; transform:scale(1); }

/* ============================================================
   LIGHTBOX — click a screenshot to enlarge
   ============================================================ */
.lightbox{ position:fixed; inset:0; z-index:9500; display:flex;
  align-items:center; justify-content:center; padding:5vmin;
  background:rgba(4,5,8,.86); backdrop-filter:blur(8px) saturate(.9);
  opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s; }
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox-figure{ position:relative; margin:0; max-width:min(1240px,92vw);
  max-height:88vh; border:1px solid rgba(255,88,0,.45); border-radius:var(--r);
  overflow:hidden; box-shadow:0 40px 120px -40px rgba(0,0,0,.95);
  transform:scale(.94); opacity:0; transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.lightbox.open .lightbox-figure{ transform:scale(1); opacity:1; }
.lightbox-figure img{ display:block; max-width:100%; max-height:88vh;
  width:auto; height:auto; object-fit:contain; }
.lightbox-frame{ position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--orange),var(--orange)), linear-gradient(var(--orange),var(--orange)),
    linear-gradient(var(--orange),var(--orange)), linear-gradient(var(--orange),var(--orange)),
    linear-gradient(var(--orange),var(--orange)), linear-gradient(var(--orange),var(--orange)),
    linear-gradient(var(--orange),var(--orange)), linear-gradient(var(--orange),var(--orange));
  background-repeat:no-repeat;
  background-size:2px 22px,22px 2px, 2px 22px,22px 2px, 2px 22px,22px 2px, 2px 22px,22px 2px;
  background-position:
    left 9px top 9px, left 9px top 9px,
    right 9px top 9px, right 9px top 9px,
    left 9px bottom 9px, left 9px bottom 9px,
    right 9px bottom 9px, right 9px bottom 9px; }
.lightbox-cap{ position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:18px 16px 12px; font-family:var(--mono); font-weight:800;
  font-size:12px; letter-spacing:.16em; color:var(--orange);
  text-transform:uppercase;
  background:linear-gradient(transparent, rgba(4,5,8,.82)); }
.lightbox-close{ position:absolute; top:max(16px,3vmin); right:max(16px,3vmin);
  z-index:9600; width:46px; height:46px; border-radius:3px; cursor:pointer;
  background:rgba(7,9,13,.7); border:1px solid rgba(255,88,0,.5);
  backdrop-filter:blur(4px); display:grid; place-items:center;
  transition:border-color .2s ease, background .2s ease; }
.lightbox-close:hover{ border-color:var(--orange); background:rgba(255,88,0,.14); }
.lightbox-close::before, .lightbox-close::after{ content:""; position:absolute;
  width:18px; height:2px; background:var(--orange); }
.lightbox-close::before{ transform:rotate(45deg); }
.lightbox-close::after{ transform:rotate(-45deg); }
@media (hover:hover) and (pointer:fine){
  .shot-card, .lightbox, .lightbox-close{ cursor:none; }
}

@media (max-width:1000px){
  .games-grid{ grid-template-columns:repeat(3,1fr); }
  .live-strip{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .games-grid{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   GLOBAL LOCK-ON CURSOR — the hero reticle, now following the mouse
   site-wide. Only on devices with a real pointer.
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  /* Hide the system cursor everywhere — the reticle replaces it. !important +
     universal selector so class rules (.btn, .shot-card zoom-in, .auth-* etc.)
     can't bring the default arrow/pointer back on clickable elements. */
  html, body, *, *::before, *::after{ cursor:none !important; }

  .cursor-reticle{
    position:fixed; top:0; left:0; width:42px; height:42px;
    z-index:9700; pointer-events:none; opacity:0;
    transition:opacity .25s ease, width .16s ease, height .16s ease;
    will-change:transform;
  }
  .cursor-reticle.on{ opacity:1; }
  /* ring */
  .cursor-reticle::before{ content:""; position:absolute; inset:0; border-radius:50%;
    border:1.5px solid rgba(255,88,0,.9);
    box-shadow:0 0 14px rgba(255,88,0,.45), inset 0 0 12px rgba(255,88,0,.16);
    transition:border-color .16s ease, box-shadow .16s ease; }
  /* crosshair ticks */
  .cursor-reticle::after{ content:""; position:absolute; inset:0;
    background:
      linear-gradient(#ff5800,#ff5800) 50% 0/2px 11px no-repeat,
      linear-gradient(#ff5800,#ff5800) 50% 100%/2px 11px no-repeat,
      linear-gradient(#ff5800,#ff5800) 0 50%/11px 2px no-repeat,
      linear-gradient(#ff5800,#ff5800) 100% 50%/11px 2px no-repeat; opacity:.9; }
  /* lock-on over interactive targets */
  .cursor-reticle.lock{ width:58px; height:58px; }
  .cursor-reticle.lock::before{ border-color:rgba(255,88,0,1);
    box-shadow:0 0 22px rgba(255,88,0,.6), inset 0 0 16px rgba(255,88,0,.26); }
  /* click recoil */
  .cursor-reticle.click{ width:34px; height:34px; }
}