/* ============================================================================
   Arena4Ai — site v2
   Design foundation ported from .silk-design/assets/foundation.css to vanilla
   CSS (no Tailwind). Token architecture, fluid type scale, radius scale and the
   three component recipes are kept 1:1 in spirit; the `@theme inline` block is
   dropped because there is no Tailwind build here.

   Skin: "neon" (radius 0.5rem, recessed inner-glow cards, solid + halo buttons)
   — chosen to match the product's own TRON-cyan UI.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. tokens */

:root {
  /* the 9 colour roles */
  --background:         #04070d;
  --card:               #0a121e;
  --foreground:         #d7e9f2;
  --primary-cta:        #22e3ff;
  --primary-cta-text:   #02060c;
  --secondary-cta:      #0b1522;
  --secondary-cta-text: #bcd8e6;
  --accent:             #1f3f52;
  --background-accent:  #ff7a18;   /* the amber "4" in ARENA4AI / team B */

  --muted: #7fa6b8;

  /* one knob drives the whole radius scale */
  --radius:    0.5rem;
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  --width-content: clamp(40rem, 72.5vw, 100rem);

  /* fluid type — every size is a clamp, never a fixed px */
  --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
  --text-xs:  clamp(0.54rem, 0.72vw, 0.72rem);
  --text-sm:  clamp(0.615rem, 0.82vw, 0.82rem);
  --text-base:clamp(0.69rem, 0.92vw, 0.92rem);
  --text-lg:  clamp(0.75rem, 1vw, 1rem);
  --text-xl:  clamp(0.825rem, 1.1vw, 1.1rem);
  --text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
  --text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
  --text-4xl: clamp(1.5rem, 2vw, 2rem);
  --text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
  --text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
  --text-7xl: clamp(3rem, 4vw, 4rem);
  --text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
  --text-9xl: clamp(5.25rem, 7vw, 7rem);

  --font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-tight: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* signature easings (effects.md) */
  --ease-wipe:    cubic-bezier(0.76, 0, 0.24, 1);
  --ease-content: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-slide:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-settle:  cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 1440px) and (min-width: 769px) {
  :root { --width-content: 87.5vw; }
}

@media (max-width: 768px) {
  :root {
    --text-2xs: 2.5vw;  --text-xs: 2.75vw; --text-sm: 3vw;    --text-base: 3.25vw;
    --text-lg: 3.5vw;   --text-xl: 4.25vw; --text-2xl: 5vw;   --text-3xl: 6vw;
    --text-4xl: 7vw;    --text-5xl: 7.5vw; --text-6xl: 8.5vw; --text-7xl: 10vw;
    --text-8xl: 12vw;   --text-9xl: 14vw;
    --width-content: 86vw;
  }
}

/* ------------------------------------------------------- 2. reset + chrome */

*, *::before, *::after { box-sizing: border-box; }

* {
  scrollbar-width: thin;
  scrollbar-color: rgb(34 227 255 / 0.3) transparent;
}

html {
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
  /* NOTE: deliberately no `scroll-behavior: smooth` — Lenis owns scrolling. */
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-tight);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
::selection { background: var(--primary-cta); color: var(--primary-cta-text); }

:focus-visible {
  outline: 2px solid var(--primary-cta);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--primary-cta); color: var(--primary-cta-text);
  padding: 0.6rem 1rem; border-radius: var(--radius-sm);
  font: 700 0.8rem/1 var(--font-mono); letter-spacing: 0.08em;
}
.skip-link:focus { top: 1rem; }

/* --------------------------------------------------------- 3. layout atoms */

.wrap {
  width: var(--width-content);
  margin-inline: auto;
}

/* Stacking model — this is what makes the footer reveal-from-behind work:
   `main` is opaque and sits above a viewport-fixed footer, so the footer is
   only visible once the page has scrolled past main into the reserved slot.
   The ambient background lives INSIDE main so it still shows behind content. */
main { position: relative; z-index: 1; isolation: isolate; background: var(--background); }
main > section, main > span { position: relative; z-index: 1; }

section { position: relative; }
.section { padding-block: clamp(5rem, 11vh, 9rem); }
.section--tall { padding-block: clamp(7rem, 16vh, 14rem); }

.stack   { display: flex; flex-direction: column; gap: clamp(1rem, 1.6vw, 1.5rem); }
.center  { align-items: center; text-align: center; }

.rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 90%, transparent), transparent);
}

/* --------------------------------------------------- 4. typographic pieces */

.kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: 600 var(--text-xs)/1 var(--font-mono);
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--primary-cta);
}
.kicker::before {
  content: ""; width: 5px; height: 5px; rotate: 45deg;
  background: var(--primary-cta);
  box-shadow: 0 0 10px var(--primary-cta);
}
.kicker--amber { color: var(--background-accent); }
.kicker--amber::before { background: var(--background-accent); box-shadow: 0 0 10px var(--background-accent); }

.eyebrow {
  font: 500 max(0.66rem, var(--text-2xs))/1.5 var(--font-mono);
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted);
}

.h1 { font-size: var(--text-8xl); font-weight: 600; }
.h2 { font-size: var(--text-6xl); }
.h3 { font-size: var(--text-3xl); }

.lede {
  font-size: var(--text-xl);
  color: color-mix(in srgb, var(--foreground) 74%, transparent);
  max-width: 46ch;
  line-height: 1.55;
}
.center .lede { margin-inline: auto; }

.mono { font-family: var(--font-mono); }
.hl   { color: var(--primary-cta); }
.hl-a { color: var(--background-accent); }
.dim  { color: var(--muted); }

/* the accent-font slot: one word per headline, never body copy */
.accent-word {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--primary-cta);
}

/* ------------------------------------------------------------- 5. surfaces */

.card {
  position: relative;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: var(--radius-lg);
  /* NEON skin — recessed inner glow */
  box-shadow:
    inset 0 0 30px 0 color-mix(in srgb, var(--primary-cta) 4%, transparent),
    inset 0 1px 0 0 color-mix(in srgb, var(--foreground) 8%, transparent),
    0 4px 12px -4px rgb(0 0 0 / 0.6);
}

.card-pad { padding: clamp(1.25rem, 1.8vw, 1.75rem); }

/* pointer-tracked conic border glow (BorderGlow.tsx, ported to vanilla) */
.glow { --start: 0; --active: 0; --spread: 44; --bw: 1.5px; }
.glow::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  border: var(--bw) solid transparent;
  background: conic-gradient(from calc((var(--start) - var(--spread)) * 1deg),
      transparent 0turn,
      var(--primary-cta) 0.06turn,
      var(--background-accent) 0.12turn,
      transparent 0.18turn);
  opacity: var(--active);
  transition: opacity 0.45s ease;
  -webkit-mask:
     linear-gradient(#000 0 0) padding-box,
     linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
     linear-gradient(#000 0 0) padding-box,
     linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}

/* ------------------------------------------------------------- 6. buttons */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.95em 1.6em;
  border: 0; border-radius: var(--radius-sm);
  font: 700 var(--text-sm)/1 var(--font-mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: transform 0.35s var(--ease-content), box-shadow 0.35s ease, background 0.2s ease, color 0.2s ease;
  will-change: transform;
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--primary {
  background: var(--primary-cta);
  color: var(--primary-cta-text);
  /* colour-matched halo ramp — what makes a button look lit, not flat */
  box-shadow:
    color-mix(in srgb, var(--background) 20%, transparent) 0 3px 1px 0 inset,
    color-mix(in srgb, var(--primary-cta) 22%, transparent) 0 0.84px 0.5px -0.3px,
    color-mix(in srgb, var(--primary-cta) 20%, transparent) 0 3.6px 2.2px -0.9px,
    color-mix(in srgb, var(--primary-cta) 18%, transparent) 0 10px 6px -1.6px,
    color-mix(in srgb, var(--primary-cta) 16%, transparent) 0 27px 16px -2.2px,
    color-mix(in srgb, var(--primary-cta) 14%, transparent) 0 50px 30px -2.5px;
}
.btn--primary:hover { background: color-mix(in srgb, var(--primary-cta) 88%, #fff); }

.btn--ghost {
  background: var(--secondary-cta);
  color: var(--secondary-cta-text);
  border: 1px solid color-mix(in srgb, var(--accent) 80%, transparent);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.35);
}
.btn--ghost:hover {
  color: var(--foreground);
  border-color: color-mix(in srgb, var(--primary-cta) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-cta) 18%, transparent),
              0 6px 26px -8px color-mix(in srgb, var(--primary-cta) 40%, transparent);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.center .btn-row { justify-content: center; }

/* ------------------------------------------------------------ 7. reveals */

/* the ONE reveal config, used everywhere */
[data-reveal] {
  opacity: 0;
  transition:
    opacity 0.6s var(--ease-content) var(--d, 0s),
    transform 0.6s var(--ease-content) var(--d, 0s),
    filter 0.6s var(--ease-content) var(--d, 0s);
  will-change: opacity, transform;
}
[data-reveal="slide-up"]  { transform: translateY(20px); }
[data-reveal="fade-blur"] { filter: blur(10px); }
[data-reveal="scale"]     { transform: scale(0.96); }
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* word-stagger heading — hidden only when JS is present to un-hide it */
html.js [data-split] { opacity: 0; transition: opacity 0.6s var(--ease-content); }
html.js [data-split].is-in { opacity: 1; }


.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.split-word > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 0.6s var(--ease-slide);
  transition-delay: calc(var(--i) * 0.04s);
}
.is-in .split-word > span,
.split-in .split-word > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .split-word > span { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ------------------------------------------------------- 8. page furniture */

/* loader — brand panel with a clip-path name wipe, then lift */
#loader {
  position: fixed; inset: 0; z-index: 999;
  background: var(--background);
  display: grid; place-items: center;
  transition: transform 1s var(--ease-wipe);
}
#loader.done { transform: translateY(-101%); }
#loader .lm {
  font: 700 var(--text-5xl)/1 var(--font-mono);
  letter-spacing: 0.22em;
  clip-path: inset(0 100% 0 0);
  animation: wipe 1.1s var(--ease-wipe) forwards;
}
#loader .bar {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--primary-cta);
  transform: scaleX(0); transform-origin: 0 50%;
  animation: fill 1.1s var(--ease-wipe) forwards, retract 0.5s var(--ease-wipe) 1.1s forwards;
}
@keyframes wipe    { to { clip-path: inset(0 0 0 0); } }
@keyframes fill    { to { transform: scaleX(1); } }
@keyframes retract { to { transform-origin: 100% 50%; transform: scaleX(0); } }

/* navbar — floating pill, transparent over the hero, frosts on scroll */
.nav {
  position: fixed; inset: 0.9rem 0 auto; z-index: 100;
  display: flex; justify-content: center;
  pointer-events: none;
}
.nav-inner {
  pointer-events: auto;
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem);
  width: var(--width-content);
  padding: 0.6rem 0.7rem 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.5s ease, border-color 0.5s ease, backdrop-filter 0.5s ease, box-shadow 0.5s ease;
}
.nav.stuck .nav-inner {
  background: color-mix(in srgb, var(--card) 72%, transparent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 10px 40px -18px rgb(0 0 0 / 0.9);
}
.wordmark {
  font: 700 var(--text-base)/1 var(--font-mono);
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--foreground);
}
.nav-links { display: flex; gap: clamp(0.9rem, 1.8vw, 1.8rem); margin-left: auto; }
.nav-links a {
  font: 500 var(--text-xs)/1 var(--font-mono);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  transition: color 0.25s ease;
  /* The text box is only ~10px tall at this size with line-height 1, far too
     small to hit reliably. Padding grows the click target to ~36px; the
     matching negative margin keeps the visual layout unchanged. */
  display: inline-flex; align-items: center;
  padding: 0.8rem 0.45rem;
  margin: -0.8rem -0.45rem;
}
.nav-links a:hover { color: var(--primary-cta); }
.nav .btn { padding: 0.7em 1.1em; }
@media (max-width: 860px) { .nav-links { display: none; } .nav-inner { margin-left: auto; } }

/* ----------------------------------------------------------- 9. background */

/* An absolutely-positioned box spanning `main`, holding a sticky 100vh layer.
   That reads as a fixed background while staying strictly inside main — a truly
   fixed layer would paint over the footer that sits behind the end of the page. */
.bg {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none; user-select: none;
  background: var(--background);
}
.bg-layer { position: sticky; top: 0; height: 100vh; width: 100%; }
.bg .grid {
  position: absolute; inset: -10%;
  background-image:
    linear-gradient(color-mix(in srgb, var(--primary-cta) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--primary-cta) 6%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 10%, transparent 72%);
}
.bg .veil {
  position: absolute; border-radius: 100%; filter: blur(90px);
}
.bg .veil-1 {
  width: 70vw; height: 46vw; left: -14vw; top: -18vw;
  background: color-mix(in srgb, var(--primary-cta) 12%, transparent);
  animation: drift 26s ease-in-out infinite alternate;
}
.bg .veil-2 {
  width: 52vw; height: 38vw; right: -12vw; top: 22vh;
  background: color-mix(in srgb, var(--background-accent) 8%, transparent);
  animation: drift 34s ease-in-out infinite alternate-reverse;
}
@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(4vw, 5vh, 0) scale(1.12); }
}
/* film grain — SVG turbulence, no asset to download */
.bg .grain {
  position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay;
  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='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- 10. hero */

.hero {
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: clamp(6rem, 12vh, 9rem);
  padding-bottom: clamp(3rem, 6vh, 5rem);
}
.hero .h1 { max-width: 15ch; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; } .hero-aside { display: none; } }

/* hero content entrance — fires on load, not on scroll: it is already in view */
.hero [data-enter] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.8s var(--ease-content) var(--d, 0s),
              transform 0.8s var(--ease-content) var(--d, 0s);
}
.hero.entered [data-enter] { opacity: 1; transform: none; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.42rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  font: 500 max(0.64rem, var(--text-2xs))/1 var(--font-mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
.chip b { color: var(--foreground); font-weight: 600; }
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary-cta);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-cta) 70%, transparent);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.scroll-hint {
  position: absolute; left: 50%; bottom: 1.6rem; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.scroll-hint .line {
  width: 1px; height: 42px;
  background: linear-gradient(var(--primary-cta), transparent);
  animation: slide-down 2.2s ease-in-out infinite;
}
@media (max-width: 768px) { .scroll-hint { display: none; } }

@keyframes slide-down {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --------------------------------------------------------- 11. the terminal */

.term {
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  background: #060b13;
  overflow: hidden;
  box-shadow: 0 30px 70px -40px rgb(0 0 0 / 0.9),
              inset 0 1px 0 color-mix(in srgb, var(--foreground) 7%, transparent);
}
.term-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--card) 80%, transparent);
}
.term-bar i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 90%, transparent); }
.term-bar .t {
  margin-left: 0.4rem;
  font: 500 var(--text-2xs)/1 var(--font-mono);
  letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase;
}
.term-bar .copy {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font: 600 var(--text-2xs)/1 var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); padding: 0.3rem 0.5rem; border-radius: var(--radius-sm);
  transition: color 0.2s ease, background 0.2s ease;
}
.term-bar .copy:hover { color: var(--primary-cta); background: color-mix(in srgb, var(--primary-cta) 10%, transparent); }
.term pre {
  margin: 0; padding: clamp(0.9rem, 1.4vw, 1.3rem);
  overflow-x: auto;
  font: 400 var(--text-base)/1.85 var(--font-mono);
  color: color-mix(in srgb, var(--foreground) 85%, transparent);
  tab-size: 2;
}
.term pre .p  { color: var(--primary-cta); }        /* prompt $ */
.term pre .c  { color: color-mix(in srgb, var(--muted) 80%, transparent); font-style: italic; } /* comment */
.term pre .f  { color: var(--background-accent); }  /* flag */

/* ------------------------------------------------------ 12. video billboard */

.billboard-wrap { perspective: 1600px; }
.billboard {
  position: relative;
  transform-style: preserve-3d;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary-cta) 22%, transparent);
  background: #01040a;
  box-shadow: 0 60px 120px -60px color-mix(in srgb, var(--primary-cta) 45%, transparent),
              0 30px 80px -40px rgb(0 0 0 / 0.95);
}
.billboard video, .billboard img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.billboard .veil-top {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--primary-cta) 8%, transparent), transparent 45%);
}
.play {
  position: absolute; inset: 0; margin: auto;
  width: clamp(4.5rem, 7vw, 6.5rem); height: clamp(4.5rem, 7vw, 6.5rem);
  display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--primary-cta) 60%, transparent);
  background: color-mix(in srgb, var(--background) 55%, transparent);
  backdrop-filter: blur(6px);
  color: var(--primary-cta);
  transition: transform 0.4s var(--ease-content), background 0.3s ease, opacity 0.4s ease;
}
.play:hover { transform: scale(1.08); background: color-mix(in srgb, var(--primary-cta) 18%, transparent); }
.play svg { width: 34%; height: 34%; margin-left: 8%; }
.play.hidden { opacity: 0; pointer-events: none; }

.vid-controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  background: linear-gradient(transparent, rgb(1 4 10 / 0.85));
}
.vid-controls button {
  background: color-mix(in srgb, var(--background) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  color: var(--foreground);
  border-radius: var(--radius-sm); cursor: pointer;
  padding: 0.4rem 0.7rem;
  font: 600 var(--text-2xs)/1 var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.vid-controls button:hover { color: var(--primary-cta); border-color: color-mix(in srgb, var(--primary-cta) 60%, transparent); }
.vid-controls .track { flex: 1; height: 2px; background: color-mix(in srgb, var(--accent) 80%, transparent); border-radius: 2px; overflow: hidden; }
.vid-controls .track i { display: block; height: 100%; width: 0; background: var(--primary-cta); box-shadow: 0 0 10px var(--primary-cta); }

/* -------------------------------------------------------- 13. word-fill copy */

.wordfill {
  font-family: var(--font-tight);
  font-size: var(--text-5xl);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.wordfill span { opacity: 0.14; transition: opacity 0.25s linear; }
.wordfill span.on { opacity: 1; }

/* -------------------------------------------------------------- 14. the loop */

.loop-layout {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.loop-head { position: sticky; top: 22vh; }
@media (max-width: 900px) {
  .loop-layout { grid-template-columns: 1fr; }
  .loop-head { position: static; }
}

.loop { display: grid; gap: 0; position: relative; }
.loop::before {
  content: ""; position: absolute; left: clamp(1.05rem, 1.6vw, 1.35rem); top: 0.4rem; bottom: 0.4rem;
  width: 1px; background: color-mix(in srgb, var(--accent) 60%, transparent);
}
.loop .rail {
  position: absolute; left: clamp(1.05rem, 1.6vw, 1.35rem); top: 0.4rem;
  width: 1px; background: linear-gradient(var(--primary-cta), var(--background-accent));
  transform-origin: top; transform: scaleY(0);
  box-shadow: 0 0 12px color-mix(in srgb, var(--primary-cta) 60%, transparent);
}
.step {
  display: grid;
  grid-template-columns: clamp(2.1rem, 3.2vw, 2.7rem) 1fr;
  gap: clamp(1rem, 2vw, 2rem);
  padding-block: clamp(1.1rem, 2.2vh, 1.8rem);
  align-items: start;
}
.step .n {
  width: clamp(2.1rem, 3.2vw, 2.7rem); height: clamp(2.1rem, 3.2vw, 2.7rem);
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 80%, transparent);
  background: var(--background);
  font: 700 var(--text-xs)/1 var(--font-mono);
  color: var(--muted);
  transition: color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.step.lit .n {
  color: var(--primary-cta);
  border-color: var(--primary-cta);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-cta) 10%, transparent),
              0 0 24px -4px var(--primary-cta);
}
.step h3 { font-size: var(--text-2xl); margin-bottom: 0.3rem; }
.step p  { font-size: var(--text-lg); color: color-mix(in srgb, var(--foreground) 66%, transparent); max-width: 62ch; }

/* --------------------------------------------------------------- 15. bento */

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.75rem, 1.1vw, 1.15rem);
}
.bento > * { grid-column: span 2; }
.bento .w-3 { grid-column: span 3; }
.bento .w-4 { grid-column: span 4; }
.bento .w-6 { grid-column: span 6; }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > *, .bento .w-3, .bento .w-4, .bento .w-6 { grid-column: span 2; }
}

.tile { display: flex; flex-direction: column; gap: 0.6rem; overflow: hidden; }
.tile h3 { font-size: var(--text-2xl); }
.tile p  { font-size: var(--text-base); color: color-mix(in srgb, var(--foreground) 62%, transparent); }
.tile .tag {
  font: 600 max(0.64rem, var(--text-2xs))/1 var(--font-mono);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--primary-cta);
}
.tile .tag.amber { color: var(--background-accent); }

/* live widget: vertical marquee of normalized events */
.stream {
  position: relative; height: 9.5rem; overflow: hidden;
  margin-top: auto;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}
.stream .track { animation: marquee-y 22s linear infinite; }
.stream .row {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.3rem 0;
  font: 400 var(--text-2xs)/1.4 var(--font-mono);
  color: var(--muted);
}
.stream .row b {
  font-weight: 600; letter-spacing: 0.08em;
  padding: 0.16rem 0.4rem; border-radius: 3px;
  background: color-mix(in srgb, var(--primary-cta) 12%, transparent);
  color: var(--primary-cta);
}
.stream .row.b b { background: color-mix(in srgb, var(--background-accent) 14%, transparent); color: var(--background-accent); }
@keyframes marquee-y { to { transform: translateY(-50%); } }

/* live widget: score bars */
.bars { display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto; }
.bars .b { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 0.6rem; align-items: center; }
.bars .b span { font: 500 var(--text-2xs)/1 var(--font-mono); color: var(--muted); }
.bars .b .t { grid-column: 1 / -1; height: 3px; background: color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 3px; overflow: hidden; }
.bars .b .t i {
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: var(--primary-cta);
  box-shadow: 0 0 10px color-mix(in srgb, var(--primary-cta) 70%, transparent);
  transition: width 1.1s var(--ease-settle) var(--bd, 0s);
}
.bars .b.amber .t i { background: var(--background-accent); box-shadow: 0 0 10px color-mix(in srgb, var(--background-accent) 70%, transparent); }
.is-in .bars .b .t i { width: var(--w); }

/* live widget: providers orbit-lite */
.providers { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; }
.providers span {
  padding: 0.35rem 0.6rem; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  font: 500 var(--text-2xs)/1 var(--font-mono); color: var(--muted);
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-content);
}
.tile:hover .providers span { color: var(--foreground); border-color: color-mix(in srgb, var(--primary-cta) 45%, transparent); }
.tile:hover .providers span:nth-child(2n) { transform: translateY(-3px); }

/* -------------------------------------------------------- 16. shot showcase */

.shot {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  background: #01040a;
  box-shadow: 0 40px 90px -50px rgb(0 0 0 / 0.95);
}
.shot img { width: 100%; }
.shot figcaption {
  padding: 0.75rem 1rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  font: 500 var(--text-2xs)/1.5 var(--font-mono);
  letter-spacing: 0.1em; color: var(--muted);
}
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.9rem, 1.6vw, 1.6rem); align-items: start; }
@media (max-width: 900px) { .shots { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- 17. req table */

.req { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.req th, .req td {
  text-align: left; padding: 0.85rem 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  vertical-align: top;
}
.req th {
  font: 600 var(--text-2xs)/1 var(--font-mono);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.req td:first-child { font-family: var(--font-mono); color: var(--foreground); white-space: nowrap; }
.req td:last-child  { color: color-mix(in srgb, var(--foreground) 62%, transparent); }
.req tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

/* --------------------------------------------------------------- 18. footer */

/* reveal-from-behind: the page scrolls up like a sheet over a fixed footer */
.footer-slot { position: relative; z-index: 0; }
.footer {
  position: fixed; bottom: 0; left: 0; width: 100%;
  z-index: -1;
  padding-block: clamp(2.5rem, 5vh, 4rem) clamp(1.25rem, 2.5vh, 2rem);
  background: var(--background);
  border-top: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.footer-top {
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(1.5rem, 4vh, 3rem);
}
.footer-top .stack { align-items: flex-start; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-links a {
  font: 500 var(--text-xs)/1 var(--font-mono);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  transition: color 0.25s ease;
}
.footer-links a:hover { color: var(--primary-cta); }

/* giant auto-fitting wordmark, canvas-measured to span the container exactly */
.brandmark {
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 0.78;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: color-mix(in srgb, var(--foreground) 9%, transparent);
  user-select: none;
  margin-bottom: clamp(0.75rem, 2vh, 1.5rem);
}
.brandmark em { font-style: normal; color: color-mix(in srgb, var(--background-accent) 34%, transparent); }

.footer-legal {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font: 400 var(--text-2xs)/1.6 var(--font-mono);
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}

/* ---------------------------------------------------------------- 19. misc */

.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.cta-panel {
  position: relative; overflow: hidden;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--primary-cta) 22%, transparent);
  background:
    radial-gradient(ellipse 70% 130% at 50% 120%, color-mix(in srgb, var(--primary-cta) 14%, transparent), transparent 70%),
    var(--card);
}
.cta-panel::after {
  content: ""; position: absolute; inset: auto 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary-cta), var(--background-accent), transparent);
  opacity: 0.7;
}

.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }