/* ===========================================================
   MotionFit download site — athletic-kinetic dark
   =========================================================== */

:root {
  --bg:        #0b0a0c;
  --bg-2:      #131013;
  --panel:     #17141a;
  --panel-2:   #1e1a22;
  --line:      rgba(255, 255, 255, 0.09);
  --line-hot:  rgba(255, 122, 24, 0.35);

  --ink:       #f6f2ec;
  --ink-mute:  #a49c98;
  --ink-faint: #8d8681;

  --flame:     #ff7a18;
  --flame-2:   #ff9a3d;
  --flame-3:   #ffb85c;
  --ember:     #ff5722;
  --lime:      #c6ff4a;

  --shadow:    0 30px 80px -30px rgba(0,0,0,0.9);
  --maxw:      1200px;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
/* Lenis drives scrolling when active — native smooth would fight it */
html.lenis-on { scroll-behavior: auto; }

/* offset in-page anchors so the sticky header doesn't cover them */
.hero, .how, .games, .showcase, .faq, .download-band { scroll-margin-top: 88px; }

/* ---------- ready·set·go preloader ---------- */
.loader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background:
    radial-gradient(900px 600px at 70% 20%, rgba(255,122,24,0.10), transparent 60%),
    var(--bg);
  transition: opacity 0.45s ease, visibility 0.45s; }
.loader.done { opacity: 0; visibility: hidden; }
.loader-inner { display: grid; justify-items: center; gap: 30px; }
.loader-logo-wrap { line-height: 0; }
.loader-logo { width: 68px; height: 68px; border-radius: 17px;
  box-shadow: 0 0 44px rgba(255,122,24,0.4), 0 14px 34px -12px rgba(0,0,0,0.8);
  animation: heartbeat 1.5s ease-in-out infinite; }
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.14); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  56% { transform: scale(1); }
}
.loader-word { font-family: 'Anton', sans-serif; font-size: clamp(56px, 13vw, 150px);
  line-height: 1; letter-spacing: 4px; text-transform: uppercase; color: var(--ink);
  opacity: 0; }
.loader-word.flame { color: var(--flame);
  text-shadow: 0 0 70px rgba(255,122,24,0.65), 0 0 24px rgba(255,122,24,0.4); }
.loader-bar { width: min(320px, 58vw); height: 3px; border-radius: 999px;
  background: rgba(255,255,255,0.08); overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--flame-3), var(--flame), var(--ember));
  box-shadow: 0 0 12px rgba(255,122,24,0.8); }

/* ---------- scroll progress ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0;
  z-index: 100; transform-origin: 0 0;
  background: linear-gradient(90deg, var(--flame-3), var(--flame) 50%, var(--ember));
  box-shadow: 0 0 14px rgba(255,122,24,0.6); }

body {
  font-family: 'Archivo', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- custom cursor ---------- */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 300;
  pointer-events: none; border-radius: 50%; display: none; }
.cursor-dot { width: 6px; height: 6px; background: var(--flame-2);
  box-shadow: 0 0 10px rgba(255,154,61,0.9); }
.cursor-ring { width: 34px; height: 34px; border: 1.5px solid rgba(255,154,61,0.6);
  transition: width 0.25s var(--ease), height 0.25s var(--ease),
              border-color 0.25s, background-color 0.25s; }
.cursor-ring.is-hover { width: 54px; height: 54px; border-color: var(--lime);
  background-color: rgba(198,255,74,0.07); }
.cursor-ring.is-down { width: 22px; height: 22px; border-color: var(--flame); }
html.cursor-on .cursor-dot, html.cursor-on .cursor-ring { display: block; }
html.cursor-on body, html.cursor-on a, html.cursor-on .btn, html.cursor-on button { cursor: none; }
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none !important; } }

/* ---------- ambient background ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background:
  radial-gradient(1100px 700px at 78% -8%, rgba(255,122,24,0.18), transparent 60%),
  radial-gradient(900px 600px at 8% 108%, rgba(255,87,34,0.10), transparent 55%),
  linear-gradient(180deg, var(--bg), var(--bg-2)); }

.bg-grain { position: absolute; inset: -200%; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 50%{transform:translate(-3%,2%)} 100%{transform:translate(2%,-2%)} }

.bg-ember { position: absolute; width: 60vw; height: 60vw; right: -12vw; top: -18vw;
  background: radial-gradient(circle, rgba(255,122,24,0.16), transparent 62%);
  filter: blur(20px); animation: pulse 9s var(--ease) infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:.85} 50%{transform:scale(1.12);opacity:1} }

/* rising ember particles (canvas, painted by JS) */
.bg-embers { position: absolute; inset: 0; width: 100%; height: 100%; }

.streak { position: absolute; height: 2px; width: 42vw; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--flame), transparent); opacity: 0.16;
  filter: blur(0.5px); transform: rotate(-18deg); }
.streak-1 { top: 22%; left: -8%; animation: slide 11s linear infinite; }
.streak-2 { top: 54%; left: 40%; width: 30vw; opacity: 0.1; animation: slide 15s linear infinite reverse; }
.streak-3 { top: 78%; left: -4%; width: 36vw; animation: slide 13s linear infinite; }
@keyframes slide { 0%{transform:translateX(-30%) rotate(-18deg)} 100%{transform:translateX(140%) rotate(-18deg)} }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center;
  gap: 24px; padding: 18px clamp(20px, 5vw, 56px);
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(11,10,12,0.82), rgba(11,10,12,0.35));
  border-bottom: 1px solid var(--line);
  transition: transform 0.4s var(--ease), padding 0.3s var(--ease), background 0.3s; }
.nav.is-scrolled { padding-top: 11px; padding-bottom: 11px;
  background: linear-gradient(180deg, rgba(11,10,12,0.94), rgba(11,10,12,0.78)); }
.nav.is-hidden { transform: translateY(-103%); }

.wordmark { font-family: 'Anton', sans-serif; font-size: 26px; letter-spacing: 0.5px;
  text-decoration: none; line-height: 1; }
.wordmark-motion { color: var(--ink); }
.wordmark-fit { color: var(--flame); }

.nav-links { margin-left: auto; display: flex; gap: 28px; }
.nav-links a { color: var(--ink-mute); text-decoration: none; font-weight: 600;
  font-size: 14.5px; letter-spacing: 0.3px; transition: color 0.2s; }
.nav-links a:hover { color: var(--ink); }
.nav-dl { padding: 9px 18px; font-size: 14px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 700;
  font-family: 'Archivo', sans-serif; text-decoration: none; cursor: pointer;
  border-radius: 12px; letter-spacing: 0.2px; border: 1px solid transparent;
  transition: transform 0.18s var(--ease), box-shadow 0.25s, background 0.25s; }

.btn-primary { position: relative; overflow: hidden; padding: 15px 26px; font-size: 16px; color: #1a0f04;
  background: linear-gradient(135deg, var(--flame-3), var(--flame) 55%, var(--ember));
  box-shadow: 0 12px 34px -10px rgba(255,122,24,0.65), inset 0 1px 0 rgba(255,255,255,0.35); }
.btn-primary:hover { transform: translateY(-2px) scale(1.02);
  box-shadow: 0 20px 46px -12px rgba(255,122,24,0.8), inset 0 1px 0 rgba(255,255,255,0.4); }
.btn-primary:active { transform: translateY(0) scale(0.99); }
.btn-lg { padding: 18px 32px; font-size: 18px; border-radius: 14px; }

/* shine sweep across primary buttons */
.btn-primary::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: -70%;
  width: 45%; transform: skewX(-22deg); pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transition: left 0.55s var(--ease); }
.btn-primary:hover::after { left: 135%; }

.btn-ghost { padding: 11px 20px; color: var(--ink); background: rgba(255,255,255,0.04);
  border-color: var(--line); }
.btn-ghost:hover { border-color: var(--line-hot); background: rgba(255,122,24,0.08); }

/* ---------- keyboard focus (a11y) ---------- */
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--flame-3); outline-offset: 3px;
  border-radius: 8px; }
.nav-links a:focus-visible { outline-offset: 4px; }

/* ---------- hero ---------- */
.hero { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(48px,8vw,96px) clamp(20px,5vw,56px);
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px,5vw,64px); align-items: center; }
/* cursor-following spotlight */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(320px 320px at var(--mx,50%) var(--my,40%), rgba(255,122,24,0.12), transparent 70%); }
.hero:hover::before { opacity: 1; }
.hero > * { position: relative; z-index: 1; }

.eyebrow { text-transform: uppercase; letter-spacing: 3px; font-size: 12.5px; font-weight: 700;
  color: var(--flame-2); margin-bottom: 20px; }
.hero-copy .eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 0 0 rgba(198,255,74,0.6); animation: livePulse 1.8s var(--ease) infinite; }
@keyframes livePulse { 0%{box-shadow:0 0 0 0 rgba(198,255,74,0.5)} 70%{box-shadow:0 0 0 8px rgba(198,255,74,0)} 100%{box-shadow:0 0 0 0 rgba(198,255,74,0)} }

.hero h1 { font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: clamp(52px, 8.2vw, 108px); line-height: 0.92; letter-spacing: 0.5px;
  text-transform: uppercase; margin-bottom: 26px; }
/* char-slam spans (added by JS) */
.hero h1 .ch { display: inline-block; will-change: transform; }
.hero h1 .hl { display: inline-block; }
.hl { color: transparent; background: linear-gradient(120deg, var(--flame-3), var(--flame) 40%, var(--ember), var(--flame-3));
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  animation: hlShift 6s var(--ease) infinite; }
@keyframes hlShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

.lede { font-size: clamp(16px,1.4vw,19px); color: var(--ink-mute); max-width: 46ch; }

.cta { margin-top: 34px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cta-meta { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-faint); font-weight: 600; }
.free, .free-b { color: var(--lime); font-weight: 800; letter-spacing: 0.5px; }

.chips { list-style: none; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.chips li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-mute);
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,0.02); }
.chips svg { width: 15px; height: 15px; color: var(--flame-2); flex-shrink: 0; }

/* hero art */
.hero-art { position: relative; min-height: 380px; perspective: 1100px; }
.frame { position: absolute; border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow); background: var(--panel);
  transform: translate3d(0,0,0) rotate(var(--rot,0deg)); transition: box-shadow 0.3s; will-change: transform; }
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.frame-tag { position: absolute; left: 12px; bottom: 12px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.5px; padding: 6px 12px; border-radius: 999px; color: var(--ink);
  background: rgba(11,10,12,0.7); border: 1px solid var(--line); backdrop-filter: blur(6px); }
.frame-main { width: 88%; top: 4%; right: 0; aspect-ratio: 16/10; --rot: 2.2deg;
  border-color: var(--line-hot); }
.frame-sub { width: 52%; bottom: 0; left: 0; aspect-ratio: 16/10; --rot: -3.5deg; z-index: 2; }
.frame-main::after, .frame-sub::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11,10,12,0.35)); }

/* live fitness HUD overlay */
.hud { position: absolute; right: -2%; bottom: 8%; z-index: 5; width: 210px;
  padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line-hot);
  background: linear-gradient(180deg, rgba(23,20,26,0.92), rgba(11,10,12,0.92));
  box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.hud-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 6px 0; }
.hud-row + .hud-row { border-top: 1px solid var(--line); }
.hud-label { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); }
.hud-val { font-size: 13px; color: var(--ink-mute); font-weight: 600; }
.hud-val b { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 22px; color: var(--flame-2); letter-spacing: 0.5px; }
.hud-wave { display: flex; align-items: flex-end; gap: 4px; height: 26px; margin-top: 10px; }
.hud-wave span { flex: 1; border-radius: 3px; background: linear-gradient(180deg, var(--flame-3), var(--ember));
  animation: bars 1.1s var(--ease) infinite; }
.hud-wave span:nth-child(2){animation-delay:.12s} .hud-wave span:nth-child(3){animation-delay:.24s}
.hud-wave span:nth-child(4){animation-delay:.36s} .hud-wave span:nth-child(5){animation-delay:.48s}
.hud-wave span:nth-child(6){animation-delay:.6s}  .hud-wave span:nth-child(7){animation-delay:.72s}
@keyframes bars { 0%,100%{height:22%} 50%{height:100%} }

/* ---------- marquee ---------- */
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(255,122,24,0.06), transparent, rgba(255,122,24,0.06));
  overflow: hidden; padding: 16px 0; }
.marquee-track { display: inline-flex; align-items: center; gap: 26px; white-space: nowrap;
  font-family: 'Anton', sans-serif; font-size: 22px; letter-spacing: 1.5px; color: var(--ink);
  animation: march 26s linear infinite; will-change: transform; }
.marquee-track .dot { color: var(--flame); font-size: 12px; }
@keyframes march { to { transform: translateX(-50%); } }

/* ---------- stats ---------- */
.stats { max-width: var(--maxw); margin: clamp(56px,8vw,90px) auto; padding: 0 clamp(20px,5vw,56px);
  display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.stat { border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px;
  background: linear-gradient(180deg, var(--panel), rgba(23,20,26,0.4)); }
.stat b { font-family: 'Anton', sans-serif; font-size: 46px; color: var(--flame-2); line-height: 1; display: block; }
.stat span { display: block; margin-top: 8px; color: var(--ink-mute); font-weight: 600; font-size: 14px; }

/* ---------- kinetic type strips ---------- */
.strip { overflow: hidden; padding: clamp(8px,1.6vw,20px) 0; pointer-events: none; user-select: none; }
.strip-track { white-space: nowrap; width: max-content; will-change: transform;
  font-family: 'Anton', sans-serif; font-size: clamp(58px, 10vw, 140px); line-height: 1.1;
  letter-spacing: 3px; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.5px rgba(246,242,236,0.17); }
.strip-fill { color: transparent; -webkit-text-stroke: 0;
  background: linear-gradient(120deg, var(--flame-3), var(--flame) 45%, var(--ember));
  -webkit-background-clip: text; background-clip: text; }
.s-dot { font-size: 0.22em; vertical-align: middle; color: var(--flame);
  -webkit-text-stroke: 0; opacity: 0.85; }

/* ---------- section heads ---------- */
.section-head { text-align: center; margin-bottom: clamp(36px,5vw,56px); }
.section-head h2, .db-copy h2 { font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: clamp(34px,5vw,64px); line-height: 0.98; text-transform: uppercase; letter-spacing: 0.5px; }
.section { max-width: var(--maxw); margin: 0 auto; }

/* ---------- motion-capture band ---------- */
.mocap-band { max-width: var(--maxw); margin: clamp(70px,10vw,120px) auto; padding: 0 clamp(20px,5vw,56px);
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px,5vw,64px); align-items: center; }
.mocap-visual { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 5/6;
  border: 1px solid var(--line-hot); box-shadow: var(--shadow); color: var(--flame);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,122,24,0.14), transparent 60%),
    linear-gradient(180deg, #14111a, #0c0a0e); }
.mocap-scanlines { position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 4px); }
.mocap-svg { position: relative; width: 100%; height: 100%; display: block; }

.mocap-svg .brackets { opacity: 0.85; animation: bracketPulse 3s var(--ease) infinite; }
@keyframes bracketPulse { 0%,100%{opacity:0.4} 50%{opacity:0.9} }

.mocap-svg .bbox { fill: none; stroke: rgba(255,122,24,0.55); stroke-width: 1.5; stroke-dasharray: 7 7;
  transform-box: fill-box; transform-origin: center; animation: bboxBreathe 4s var(--ease) infinite; }
@keyframes bboxBreathe { 0%,100%{transform:scale(1);opacity:0.6} 50%{transform:scale(1.015);opacity:0.9} }

.mocap-svg .bones { stroke: var(--flame-2); stroke-width: 3; opacity: 0.6; }
.mocap-svg .bone-head { stroke: var(--flame-2); stroke-width: 3; opacity: 0.6; }

.mocap-svg .joints circle { fill: var(--flame-3);
  transform-box: fill-box; transform-origin: center;
  animation: jointPulse 1.7s var(--ease) infinite; animation-delay: var(--jd,0ms);
  filter: drop-shadow(0 0 4px rgba(255,154,61,0.8)); }
@keyframes jointPulse { 0%,100%{transform:scale(1);opacity:0.85} 50%{transform:scale(1.55);opacity:1} }

.mocap-svg .scan { fill: var(--flame-3); opacity: 0.55;
  filter: drop-shadow(0 0 8px rgba(255,122,24,0.9));
  transform-box: view-box; transform-origin: center;
  animation: scanSweep 3.4s var(--ease) infinite; }
@keyframes scanSweep { 0%{transform:translateY(0);opacity:0} 8%{opacity:0.7} 92%{opacity:0.7} 100%{transform:translateY(405px);opacity:0} }

.mocap-rec, .mocap-kp { position: absolute; font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink); padding: 6px 11px; border-radius: 999px;
  background: rgba(11,10,12,0.72); border: 1px solid var(--line); backdrop-filter: blur(6px); }
.mocap-rec { top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 7px; }
.mocap-kp { bottom: 14px; right: 14px; color: var(--flame-2); }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3b30;
  box-shadow: 0 0 8px #ff3b30; animation: livePulse 1.4s var(--ease) infinite; }

/* ---------- how ---------- */
.how, .games { max-width: var(--maxw); margin: clamp(70px,10vw,120px) auto; padding: 0 clamp(20px,5vw,56px); }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.step { position: relative; padding: 34px 28px 30px; border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(180deg, var(--panel), rgba(23,20,26,0.35)); overflow: hidden; }
.step::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--flame), transparent); }
.step-num { font-family: 'Anton', sans-serif; font-size: 40px; color: var(--flame-2); opacity: 0.9; }
.step h3 { font-size: 21px; margin: 10px 0 8px; letter-spacing: 0.2px; }
.step p { color: var(--ink-mute); font-size: 15px; }

/* ---------- showcase ---------- */
.showcase { max-width: var(--maxw); margin: clamp(70px,10vw,120px) auto; padding: 0 clamp(20px,5vw,56px); }
.show-row { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px,5vw,60px);
  align-items: center; margin-bottom: clamp(40px,6vw,72px); }
.show-row:last-child { margin-bottom: 0; }
.show-row.reverse .show-art { order: 2; }
.show-art { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--line-hot);
  box-shadow: var(--shadow); aspect-ratio: 16/9; }
.show-img { width: 100%; height: 100%; will-change: transform; }
.show-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.show-row:hover .show-art img { transform: scale(1.05); }
.show-art::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11,10,12,0.5));
  pointer-events: none; }
.show-badge { position: absolute; top: 14px; left: 14px; z-index: 2; box-shadow: 0 6px 18px rgba(0,0,0,0.45); }
.show-kicker { text-transform: uppercase; letter-spacing: 2.5px; font-size: 12px; font-weight: 700;
  color: var(--flame-2); margin-bottom: 12px; }
.show-copy h3 { font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(30px,4vw,48px); line-height: 1; letter-spacing: 0.5px; margin-bottom: 14px; }
.show-desc { color: var(--ink-mute); font-size: clamp(15px,1.3vw,17px); max-width: 46ch; margin-bottom: 20px; }
.show-desc em { color: var(--ink); font-style: normal; font-weight: 700; }
.show-feats { list-style: none; display: grid; gap: 12px; }
.show-feats li { position: relative; padding-left: 30px; color: var(--ink); font-weight: 500; font-size: 15px; }
.show-feats li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: linear-gradient(135deg, var(--flame-3), var(--ember)); }
.show-feats li::after { content: ""; position: absolute; left: 6px; top: 8px; width: 6px; height: 3px;
  border-left: 2px solid #1a0f04; border-bottom: 2px solid #1a0f04; transform: rotate(-45deg); }

/* ---------- games ---------- */
.game-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.tilt { transform-style: preserve-3d; will-change: transform; }
.game-card { position: relative; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background: var(--panel); transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.3s; }
.game-card:hover { transform: translateY(-6px); border-color: var(--line-hot); box-shadow: var(--shadow); }
.game-shot { aspect-ratio: 16/10; overflow: hidden; border-bottom: 1px solid var(--line); }
.game-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.game-card:hover .game-shot img { transform: scale(1.06); }
.game-body { padding: 22px 22px 26px; }
.game-body h3 { font-size: 23px; margin: 12px 0 8px; letter-spacing: 0.2px; }
.game-body p { color: var(--ink-mute); font-size: 14.5px; }

/* pointer-tracking glare (element added by JS) */
.card-glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(230px 230px at var(--gx,50%) var(--gy,50%), rgba(255,255,255,0.13), transparent 65%); }
.game-card:hover .card-glare { opacity: 1; }

.badge { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.badge-live { color: var(--lime); background: rgba(11,10,12,0.78);
  border: 1px solid rgba(198,255,74,0.38); }
.badge-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 8px rgba(198,255,74,0.9); animation: livePulse 1.6s var(--ease) infinite; }
.badge-soon { color: var(--ink-mute); background: rgba(255,255,255,0.05); border: 1px solid var(--line); }

.game-card.ghost { background: repeating-linear-gradient(135deg, var(--panel), var(--panel) 12px, rgba(30,26,34,0.6) 12px, rgba(30,26,34,0.6) 24px); }
.game-card.ghost:hover { transform: none; border-color: var(--line); box-shadow: none; }
.game-card.ghost h3 { color: var(--ink); }
.game-card.ghost .game-body { padding-top: 26px; }

/* ---------- download band ---------- */
.download-band { position: relative; margin: clamp(70px,10vw,120px) auto 0; padding: clamp(56px,8vw,96px) clamp(20px,5vw,56px);
  border-top: 1px solid var(--line);
  background: radial-gradient(900px 500px at 80% 0%, rgba(255,122,24,0.14), transparent 60%); }
.db-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px,5vw,56px); align-items: center; }
.db-copy .lede { margin-top: 16px; }
.db-copy .btn-lg { margin-top: 30px; }
.db-sub { margin-top: 14px; color: var(--ink-faint); font-weight: 600; font-size: 13.5px; }
.db-privacy { margin-top: 12px; display: flex; align-items: center; gap: 8px;
  color: var(--ink-mute); font-size: 13.5px; line-height: 1.5; }
.db-privacy svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--lime); }

.notice { margin-top: 30px; padding: 18px 20px; border-radius: 14px; font-size: 14px; color: var(--ink-mute);
  background: rgba(255,122,24,0.07); border: 1px solid var(--line-hot); line-height: 1.6; }
.notice strong { color: var(--flame-3); display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.notice strong svg { width: 18px; height: 18px; flex-shrink: 0; }
.notice b { color: var(--ink); }

.reqs { list-style: none; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, var(--panel), rgba(23,20,26,0.4)); }
.reqs li { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 22px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.reqs li:last-child { border-bottom: 0; }
.reqs span { color: var(--ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; }
.reqs b { color: var(--ink); text-align: right; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: clamp(70px,10vw,120px) auto 0; padding: 0 clamp(20px,5vw,56px); }
.faq-list { display: grid; gap: 12px; }
.faq-item { border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, var(--panel), rgba(23,20,26,0.4));
  transition: border-color 0.3s var(--ease); }
.faq-item[open] { border-color: var(--line-hot); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; cursor: pointer; list-style: none;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: clamp(16px,2.2vw,18px);
  color: var(--ink); transition: color 0.2s ease; }
.faq-item summary:hover { color: var(--flame-3); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex-shrink: 0; width: 12px; height: 12px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform 0.3s var(--ease); opacity: 0.7; }
.faq-item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq-item p { padding: 0 24px 22px; color: var(--ink-mute); line-height: 1.65; font-size: 15px; }
.faq-item p b { color: var(--ink); }

/* ---------- footer ---------- */
.foot { max-width: var(--maxw); margin: 0 auto; padding: 44px clamp(20px,5vw,56px) 40px;
  border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 14px; }
.foot-giant { font-family: 'Anton', sans-serif; font-size: clamp(60px, 13.5vw, 200px);
  line-height: 0.95; text-align: center; letter-spacing: 4px; user-select: none;
  color: transparent;
  background: linear-gradient(90deg, var(--flame-3), var(--flame) 28%, var(--ember) 49.8%, rgba(255,255,255,0.06) 50.2%);
  background-size: 205% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  margin-bottom: 34px; }
.foot-inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot-mark { font-family: 'Anton', sans-serif; font-size: 22px; }
.foot-inner p { margin-right: auto; }

/* ---------- download spark burst (elements added by JS) ---------- */
.spark { position: fixed; z-index: 250; width: 9px; height: 9px; border-radius: 2px;
  pointer-events: none; }

/* ---------- reveal animations ---------- */
.reveal, .reveal-art, .reveal-up { opacity: 0; }
.reveal { transform: translateY(22px); animation: rise 0.85s var(--ease) forwards; animation-delay: var(--d, 0ms); }
.reveal-art { transform: translateY(30px) scale(0.98); animation: rise 1s var(--ease) 0.35s forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

.reveal-up { transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0ms); }
.reveal-up.in { opacity: 1; transform: none; }

/* when GSAP drives reveals, CSS transitions must not fight the tweens */
html.gsap-on .reveal-up { transition: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { min-height: 300px; margin-top: 10px; order: 2; }
  .db-inner { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .steps, .game-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .show-row, .show-row.reverse { grid-template-columns: 1fr; gap: 22px; }
  .show-row.reverse .show-art { order: 0; }
  .hud { width: 168px; right: 4%; bottom: 4%; }
  .mocap-band { grid-template-columns: 1fr; gap: 26px; }
  .mocap-visual { max-width: 360px; margin: 0 auto; width: 100%; }
}
@media (max-width: 520px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .cta { gap: 14px; }
  .frame-main { width: 92%; }
  .frame-sub { width: 58%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal, .reveal-art, .reveal-up { opacity: 1; transform: none; }
  .loader, .cursor-dot, .cursor-ring, .bg-embers { display: none !important; }
  .foot-giant { background-position: 0 0; }
}