/* ==========================================================================
   Rocket Six — landing page
   Palette, radii and glow language are lifted from the desktop client
   (lib/core/theme/app_colors.dart and lib/core/widgets/glow_fx.dart) so the
   site and the app read as the same product.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  /* Surfaces — straight from AppColors */
  --bg: #070c12;
  --nav: #091019;
  --panel: #0e1621;
  --panel-hover: #141e2b;
  --panel-light: #111b28;
  --border: #1a2737;

  /* Brand */
  --primary: #7b4dff;
  --primary-light: #9a7aff;
  --primary-muted: #292047;
  --violet: #c86bff;
  --pink: #ff63c3;
  --blue: #73a8ff;
  --star: #f0e5ff;

  /* Text */
  --text: #f4f6fa;
  --text-2: #a0abba;
  --text-3: #667386;

  /* Semantic */
  --success: #39d98a;
  --warning: #ffb648;
  --danger: #ff5f6d;

  /* Geometry — the app rounds its cards at 12 */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(96px, 13vw, 190px);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
}

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

html {
  scroll-behavior: smooth;
  /* The pinned flow section is the only place that needs the offset */
  scroll-padding-top: 90px;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-variation-settings: 'wdth' 108;
}

p {
  margin: 0;
}

::selection {
  background: color-mix(in oklab, var(--primary) 55%, transparent);
  color: #fff;
}

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

.wrap {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform 0.25s var(--ease);
}
.skip-link:focus-visible {
  transform: none;
}

/* ------------------------------------------------------------ typography */
.h2 {
  font-size: clamp(2.1rem, 5.4vw, 4.25rem);
  max-width: 18ch;
  text-wrap: balance;
}
.h2 em {
  font-style: normal;
  background-image: linear-gradient(100deg, var(--violet), var(--primary-light) 55%, var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  color: var(--text-2);
  font-size: 1.05rem;
  max-width: 54ch;
}
.lead b {
  color: var(--text);
  font-weight: 600;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--panel) 80%, transparent);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-light);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent);
  animation: pulse 2.6s var(--ease-in-out) infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent);
  }
  50% {
    opacity: 0.55;
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 4%, transparent);
  }
}

.section__head {
  margin-bottom: clamp(44px, 6vw, 78px);
}

/* --------------------------------------------------------- global layers */
.fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.fx--stars {
  position: fixed;
  z-index: 0;
  opacity: 0.85;
}
.fx--hero {
  z-index: 1;
}

/* The soft light that trails the pointer — the web echo of CursorFlowField */
.cursor-glow {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 620px;
  height: 620px;
  margin: -310px 0 0 -310px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--primary) 26%, transparent) 0%,
    color-mix(in oklab, var(--violet) 10%, transparent) 34%,
    transparent 68%
  );
  transition: opacity 0.5s var(--ease);
  will-change: transform;
}

/* Film grain keeps the big flat gradients from banding. It sits above the
   content but below the nav, so it grades the whole page at once.
   Deliberately static: an animated grain covering 4× the viewport was
   repainting a full-screen texture six times a second for an effect nobody
   consciously sees. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.03;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

main,
.footer {
  position: relative;
  z-index: 3;
}

/* --------------------------------------------------------------- intro -- */
.intro {
  display: none;
}
html.js .intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  /* The curtain, not this element, is the opaque plate — so wiping the
     curtain away actually uncovers the hero instead of more black. */
  background: transparent;
}
html.js.reduced .intro,
html.intro-done .intro {
  display: none;
}

.intro__inner {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 26px;
}
.intro__mark {
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 0 26px color-mix(in oklab, var(--primary) 55%, transparent));
}
/* Matches the traced path length, so the draw finishes exactly on the beat
   instead of completing early and idling. */
.intro__stroke {
  stroke-dasharray: 336;
  stroke-dashoffset: 336;
}
.intro__meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-3);
}
.intro__count {
  color: var(--primary-light);
  font-variant-numeric: tabular-nums;
}
.intro__curtain {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--bg);
  transform-origin: top;
  pointer-events: none;
}

/* ----------------------------------------------------------------- nav -- */
.nav {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(16px, 4vw, 44px);
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
  padding: 14px 16px;
  margin-top: 16px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition:
    background 0.4s var(--ease),
    border-color 0.4s var(--ease),
    backdrop-filter 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
.nav.is-stuck {
  /* A backdrop blur is re-evaluated on every scrolled frame, so it is kept
     narrow and unsaturated — the bar is only 60px tall, and the cost scales
     with the area behind it. */
  background: color-mix(in oklab, var(--nav) 82%, transparent);
  border-color: color-mix(in oklab, #fff 7%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px -22px #000;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
}
.brandmark {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 12px color-mix(in oklab, var(--primary) 45%, transparent));
  transition: transform 0.5s var(--ease);
}
.nav__brand:hover .brandmark {
  transform: rotate(-6deg) scale(1.06);
}
.nav__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}
.nav__wordmark span {
  color: var(--primary-light);
}

.nav__links {
  display: flex;
  gap: 30px;
  font-size: 0.92rem;
  color: var(--text-2);
}
.nav__links a {
  position: relative;
  padding: 4px 0;
  transition: color 0.3s var(--ease);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--violet), var(--primary));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.42s var(--ease);
}
.nav__links a:hover {
  color: var(--text);
}
.nav__links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__burger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--panel);
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 16px;
  height: 1.5px;
  margin: 3px auto;
  background: var(--text);
  transition: transform 0.35s var(--ease), opacity 0.2s;
}
.nav__burger[aria-expanded='true'] span:first-child {
  transform: translateY(2.2px) rotate(45deg);
}
.nav__burger[aria-expanded='true'] span:last-child {
  transform: translateY(-2.3px) rotate(-45deg);
}

/* -------------------------------------------------------------- buttons -- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.94rem;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.btn--lg {
  padding: 17px 34px;
  font-size: 1.02rem;
}

.btn--primary {
  color: #fff;
  background: linear-gradient(100deg, var(--primary) 0%, var(--violet) 100%);
  box-shadow:
    0 12px 34px -14px color-mix(in oklab, var(--primary) 90%, transparent),
    inset 0 1px 0 color-mix(in oklab, #fff 30%, transparent);
}
.btn--primary:hover {
  box-shadow:
    0 20px 50px -14px color-mix(in oklab, var(--primary) 95%, transparent),
    inset 0 1px 0 color-mix(in oklab, #fff 40%, transparent);
}

/* SheenSweepPainter, as a CSS band */
.btn__sheen {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    transparent 35%,
    color-mix(in oklab, #fff 38%, transparent) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
}
.btn--primary:hover .btn__sheen {
  animation: sheen 0.85s var(--ease) forwards;
}
@keyframes sheen {
  to {
    transform: translateX(120%);
  }
}

.btn--ghost {
  color: var(--text);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--panel) 70%, transparent);
}
.btn--ghost:hover {
  border-color: color-mix(in oklab, var(--primary-light) 55%, transparent);
  background: var(--panel-hover);
  box-shadow: 0 0 30px -10px color-mix(in oklab, var(--primary) 60%, transparent);
}

/* ---------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: clamp(130px, 17vh, 190px) 0 clamp(80px, 10vh, 130px);
  overflow: clip;
}
/* Two real columns, not a floating overlay. The app window used to be
   absolutely positioned, which meant nothing stopped it from landing on top
   of the tagline once the copy grew or the viewport narrowed. As a grid item
   it simply cannot overlap. */
.hero__layout {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(30px, 4vw, 70px);
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}
.hero__inner {
  min-width: 0;
}

.hero__aurora {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* No `filter: blur()` here on purpose. A 46vw blurred surface is one of the
   most expensive things a page can composite, and it has to be re-rasterised
   the moment the layer is touched — which is exactly what the scroll parallax
   does. The multi-stop radial gradients below fake the same gaussian falloff
   for free, and the hero holds 60fps because of it. */
.blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.blob--a {
  top: -12%;
  left: -6%;
  width: 46vw;
  height: 46vw;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--primary) 46%, transparent) 0%,
    color-mix(in oklab, var(--primary) 24%, transparent) 26%,
    color-mix(in oklab, var(--primary) 8%, transparent) 50%,
    transparent 72%
  );
}
.blob--b {
  top: 8%;
  right: -14%;
  width: 42vw;
  height: 42vw;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--pink) 26%, transparent) 0%,
    color-mix(in oklab, var(--pink) 13%, transparent) 28%,
    color-mix(in oklab, var(--pink) 4%, transparent) 52%,
    transparent 72%
  );
}
.blob--c {
  bottom: -22%;
  left: 26%;
  width: 52vw;
  height: 40vw;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--blue) 20%, transparent) 0%,
    color-mix(in oklab, var(--blue) 10%, transparent) 30%,
    transparent 70%
  );
}

/* Perspective floor, the classic esports horizon.
   The scroll is a transform on an inner layer rather than an animated
   `background-position` — a moving background repaints the whole surface every
   frame, a translated layer is handed to the compositor once. */
.hero__grid {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 46vh;
  overflow: hidden;
  transform: perspective(340px) rotateX(62deg);
  transform-origin: bottom;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 82%);
  mask-image: linear-gradient(to top, #000 0%, transparent 82%);
  opacity: 0.5;
}
.hero__grid i {
  position: absolute;
  top: -62px;
  right: 0;
  bottom: 0;
  left: 0;
  background-image:
    linear-gradient(color-mix(in oklab, var(--primary-light) 22%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--primary-light) 22%, transparent) 1px, transparent 1px);
  background-size: 62px 62px;
  will-change: transform;
  animation: floor 9s linear infinite;
}
@keyframes floor {
  to {
    transform: translateY(62px);
  }
}

.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 40%, transparent 40%, color-mix(in oklab, var(--bg) 88%, transparent) 100%),
    linear-gradient(to bottom, transparent 60%, var(--bg) 100%);
}

/* Sized so the longest word ("ROCKET", ~4.2em wide at this weight and width
   axis) always fits the column beside the app window. A word that no longer
   fits cannot wrap any more — it would overflow instead — so this ceiling is
   load-bearing and has to be re-checked if the display font ever changes. */
.hero__title {
  font-size: clamp(2.6rem, 8.4vw, 7.5rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 118;
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.hero__line {
  display: block;
}
.hero__line--accent {
  background-image: linear-gradient(96deg, var(--violet) 0%, var(--primary-light) 40%, var(--blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Per-character wrappers produced by the splitter.
   `nowrap` on the word is not cosmetic: each character is its own
   inline-block, and the line breaker is allowed to break between two of
   those — which is how "ROCKET" ended up as "ROCK / ET". */
.char {
  display: inline-block;
}
.word {
  display: inline-block;
  white-space: nowrap;
}

/* --------------------------------------------------------- gradient text --
   `background-clip: text` stops clipping to a descendant the moment that
   descendant is transformed — which is exactly what the reveal animation does,
   so a split gradient headline renders as nothing at all.
   The fix: each piece carries its own copy of the gradient, sized to the whole
   line and offset to its own position, so the sweep stays continuous while
   every piece is free to move. `paintGradients()` in main.js writes the four
   custom properties below. */
.grad-piece {
  background-size: var(--grad-w, 100%) var(--grad-h, 100%);
  background-position: var(--grad-x, 0px) var(--grad-y, 0px);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__line--accent .grad-piece {
  text-shadow: 0 0 48px color-mix(in oklab, var(--primary) 42%, transparent);
}

.hero__tagline {
  max-width: 52ch;
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  color: var(--text-2);
  margin-bottom: 38px;
}

.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 26px;
  margin-bottom: 44px;
}
.auth {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.auth__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.auth__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--panel) 75%, transparent);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-2);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
    transform 0.3s var(--ease), background 0.3s var(--ease);
}
.auth__chip:hover {
  color: var(--text);
  border-color: color-mix(in oklab, var(--primary-light) 50%, transparent);
  background: var(--panel-hover);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  font-size: 0.88rem;
  color: var(--text-3);
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero__trust li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}
.hero__trust b {
  color: var(--text-2);
  font-weight: 600;
}

/* ------------------------------------------------------- hero app mock -- */
.hero__app {
  position: relative;
  min-width: 0;
  pointer-events: none;
}

.app-window {
  position: relative;
  border: 1px solid color-mix(in oklab, var(--primary-light) 26%, transparent);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, #111a28 0%, #0b121d 55%, #101421 100%);
  box-shadow:
    0 60px 120px -40px #000,
    0 0 0 1px color-mix(in oklab, #fff 4%, transparent) inset;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}
/* RankEnergyFrame: the pulsing accent ring around a live card */
.app-window__glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--primary-light) 34%, transparent),
    inset 0 0 34px -6px color-mix(in oklab, var(--primary) 55%, transparent);
  will-change: opacity;
  animation: energy 4.6s var(--ease-in-out) infinite;
}
@keyframes energy {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

.app-window__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid color-mix(in oklab, #fff 6%, transparent);
  background: color-mix(in oklab, var(--nav) 70%, transparent);
}
.app-window__icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  object-fit: cover;
}
.app-window__title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.app-window__dots {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.app-window__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in oklab, #fff 14%, transparent);
}

.app-window__body {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 12px;
  padding: 14px;
}
.app-panel {
  padding: 14px;
  border: 1px solid color-mix(in oklab, #fff 7%, transparent);
  border-radius: var(--r);
  background: color-mix(in oklab, var(--panel) 88%, transparent);
}
.app-panel--queue {
  grid-row: span 2;
  background: linear-gradient(
    155deg,
    color-mix(in oklab, var(--primary) 22%, var(--panel)),
    var(--panel) 70%
  );
}
.app-panel__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.app-panel__value {
  display: block;
  margin: 6px 0 2px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.app-panel__meta {
  display: block;
  font-size: 0.74rem;
  color: var(--success);
}
.app-bar {
  margin-top: 12px;
  height: 4px;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, #fff 8%, transparent);
  overflow: hidden;
}
.app-bar i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--violet));
  transform-origin: left;
  animation: fill 2.4s var(--ease) infinite;
}
@keyframes fill {
  0% { transform: scaleX(0.15); }
  70%, 100% { transform: scaleX(1); }
}

.voice-list {
  margin-top: 10px;
  display: grid;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-2);
}
.voice-list li {
  display: flex;
  align-items: center;
  gap: 9px;
}
.ring {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in oklab, #fff 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, #fff 12%, transparent);
}
.ring--talk {
  background: color-mix(in oklab, var(--success) 30%, transparent);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--success) 60%, transparent);
  animation: talk 1.6s var(--ease-in-out) infinite;
}
@keyframes talk {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--success) 55%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--success) 0%, transparent);
  }
}

.track-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 9px;
  font-size: 0.82rem;
  color: var(--text-3);
}
.track-row b {
  color: var(--text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.track-row b.up {
  color: var(--success);
}

.badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--nav) 88%, transparent);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  box-shadow: 0 20px 40px -22px #000;
}
.badge--live {
  top: -18px;
  left: -22px;
}
.badge--live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 9px var(--danger);
  animation: pulse 1.8s infinite;
}
.badge--nobot {
  bottom: -16px;
  right: 8%;
  color: var(--primary-light);
  border-color: color-mix(in oklab, var(--primary) 45%, transparent);
}

/* ----------------------------------------------------------- scroll cue -- */
.scroll-cue {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
}
.scroll-cue__line {
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, transparent, var(--primary-light));
  overflow: hidden;
  position: relative;
}
.scroll-cue__line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--star);
  animation: cue 2.2s var(--ease-in-out) infinite;
}
@keyframes cue {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* ------------------------------------------------------------- marquee -- */
.marquee {
  position: relative;
  z-index: 4;
  padding: 22px 0;
  border-block: 1px solid var(--border);
  background: color-mix(in oklab, var(--nav) 60%, transparent);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: color-mix(in oklab, var(--text) 26%, transparent);
  white-space: nowrap;
  will-change: transform;
}
.marquee__track i {
  font-style: normal;
  font-size: 0.5em;
  color: var(--primary);
}

/* ------------------------------------------------------------- no bots -- */
.compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(18px, 3vw, 40px);
  margin-top: clamp(44px, 6vw, 74px);
}
.compare__col {
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--panel) 62%, transparent);
}
.compare__col--old {
  color: var(--text-3);
  filter: saturate(0.15);
  transition: filter 0.6s var(--ease), opacity 0.6s var(--ease);
  opacity: 0.72;
}
.compare__col--old:hover {
  filter: saturate(0.4);
  opacity: 0.9;
}
.compare__col--new {
  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--primary) 16%, transparent), transparent 60%),
    radial-gradient(120% 90% at 0% 100%, color-mix(in oklab, var(--pink) 10%, transparent), transparent 60%),
    color-mix(in oklab, var(--panel) 80%, transparent);
  box-shadow: 0 40px 90px -50px color-mix(in oklab, var(--primary) 90%, transparent);
}
.compare__head {
  margin-bottom: 22px;
  font-size: 1.25rem;
  font-variation-settings: 'wdth' 100;
}
.compare__col--new .compare__head {
  color: var(--primary-light);
}
.compare__list {
  display: grid;
  gap: 14px;
  font-size: 0.95rem;
}
.compare__list li {
  position: relative;
  padding-left: 28px;
  line-height: 1.55;
}
.compare__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 2px;
  background: currentColor;
  opacity: 0.5;
}
.compare__col--new .compare__list li::before {
  top: 0.45em;
  width: 13px;
  height: 13px;
  background: none;
  border-left: 2px solid var(--success);
  border-bottom: 2px solid var(--success);
  transform: rotate(-45deg) translateY(-2px);
  opacity: 1;
}
.compare__list code {
  padding: 2px 6px;
  border-radius: 5px;
  background: color-mix(in oklab, #fff 6%, transparent);
  font-family: var(--font-mono);
  font-size: 0.86em;
}
.compare__vs {
  display: grid;
  place-items: center;
}
.compare__vs span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--nav);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

/* ----------------------------------------------------------- bento grid -- */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
}
.card {
  position: relative;
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, #111a28 0%, #0b121d 58%, #101421 100%);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  will-change: transform;
}
.card--wide {
  grid-column: span 2;
}
.card--tall {
  grid-row: span 2;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 40px 80px -46px color-mix(in oklab, var(--primary) 85%, transparent);
}

/* CornerWashDecoration + the cursor spotlight, in one layer */
.card__frame {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, #fff 7%, transparent);
  background:
    radial-gradient(
      340px circle at var(--mx, 50%) var(--my, 0%),
      color-mix(in oklab, var(--primary) 22%, transparent),
      transparent 62%
    ),
    radial-gradient(120% 100% at 100% 0%, color-mix(in oklab, var(--violet) 11%, transparent), transparent 58%),
    radial-gradient(120% 100% at 0% 100%, color-mix(in oklab, var(--blue) 8%, transparent), transparent 58%);
  transition: box-shadow 0.45s var(--ease);
}
.card:hover .card__frame {
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--primary-light) 34%, transparent),
    inset 0 0 40px -12px color-mix(in oklab, var(--primary) 50%, transparent);
}

.card__body {
  padding: clamp(24px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 12px;
}
.card__ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: var(--r);
  border: 1px solid color-mix(in oklab, var(--primary-light) 28%, transparent);
  background: color-mix(in oklab, var(--primary) 15%, transparent);
  color: var(--primary-light);
}
.card__ico svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card h3 {
  font-size: 1.32rem;
  font-variation-settings: 'wdth' 100;
}
.card p {
  color: var(--text-2);
  font-size: 0.95rem;
  max-width: 46ch;
}

.card__viz--wave {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 54px;
  margin-top: auto;
  padding-top: 18px;
}
.card__viz--wave i {
  flex: 1;
  min-height: 4px;
  border-radius: var(--r-pill);
  background: linear-gradient(to top, var(--primary), var(--violet));
  transform-origin: bottom;
  animation: wave 1.5s var(--ease-in-out) infinite alternate;
  animation-delay: calc(var(--i, 0) * -0.12s);
  opacity: 0.85;
}
@keyframes wave {
  from { transform: scaleY(0.16); }
  to { transform: scaleY(1); }
}

.card__viz--overlay {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding: 14px;
  border: 1px solid color-mix(in oklab, #fff 8%, transparent);
  border-radius: var(--r);
  background: color-mix(in oklab, #05080d 70%, transparent);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-2);
}
.ov-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ov-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
}
.ov-dot--talk {
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}
.ov-row--score {
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text);
}
.ov-row--score em {
  font-style: normal;
  color: var(--primary-light);
  margin-inline: 6px;
}

/* --------------------------------------------------------------- modes -- */
.modes__switch {
  position: relative;
  display: inline-flex;
  padding: 5px;
  margin-bottom: clamp(30px, 4vw, 46px);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--panel) 70%, transparent);
}
.modes__switch button {
  position: relative;
  z-index: 1;
  padding: 11px 30px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--text-3);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.35s var(--ease);
}
.modes__switch button.is-active {
  color: #fff;
}
.modes__pill {
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(100deg, var(--primary), var(--violet));
  box-shadow: 0 8px 24px -10px color-mix(in oklab, var(--primary) 90%, transparent);
  transition: transform 0.55s var(--ease), width 0.55s var(--ease);
}

.modes__stage {
  position: relative;
}
.modes__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(28px, 3.4vw, 48px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background:
    radial-gradient(110% 90% at 100% 0%, color-mix(in oklab, var(--primary) 12%, transparent), transparent 62%),
    color-mix(in oklab, var(--panel) 62%, transparent);
}
.modes__panel[hidden] {
  display: none;
}
.modes__copy h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-bottom: 14px;
}
.modes__copy p {
  color: var(--text-2);
  margin-bottom: 22px;
  max-width: 46ch;
}
.ticks {
  display: grid;
  gap: 11px;
  font-size: 0.93rem;
  color: var(--text-2);
}
.ticks li {
  position: relative;
  padding-left: 26px;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--primary-light);
  border-bottom: 2px solid var(--primary-light);
  transform: rotate(-45deg);
}

.modes__viz {
  display: grid;
  place-items: center;
  min-height: 240px;
}
.pitch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 16 / 10;
  padding: 22px;
  border: 1px solid color-mix(in oklab, var(--primary-light) 22%, transparent);
  border-radius: var(--r);
  background: color-mix(in oklab, #060a10 70%, transparent);
}
.pitch__line {
  position: absolute;
  left: 50%;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: color-mix(in oklab, var(--primary-light) 30%, transparent);
}
.team {
  display: grid;
  gap: 12px;
}
.team i {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  animation: bob 3.4s var(--ease-in-out) infinite;
}
.team i:nth-child(2) { animation-delay: -1.1s; }
.team i:nth-child(3) { animation-delay: -2.2s; }
@keyframes bob {
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(4px); }
}
.team--blue i {
  background: var(--blue);
  box-shadow: 0 0 16px color-mix(in oklab, var(--blue) 70%, transparent);
}
.team--orange i {
  background: var(--warning);
  box-shadow: 0 0 16px color-mix(in oklab, var(--warning) 70%, transparent);
}

.draft {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  font-size: 0.92rem;
  color: var(--text-2);
}
.draft li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: color-mix(in oklab, #060a10 60%, transparent);
}
.draft span {
  padding: 3px 8px;
  border-radius: 6px;
  background: color-mix(in oklab, var(--primary) 26%, transparent);
  color: var(--primary-light);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.draft b {
  color: var(--text);
}
.draft .is-live {
  border-color: color-mix(in oklab, var(--primary) 55%, transparent);
  box-shadow: 0 0 26px -10px color-mix(in oklab, var(--primary) 90%, transparent);
  animation: energy 2.4s var(--ease-in-out) infinite;
}

/* ---------------------------------------------------------------- flow -- */
.flow {
  position: relative;
  /* Height drives the pinned horizontal travel; JS reads it off the track. */
  padding-block: 0;
}
.flow__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 5vh, 60px);
  overflow: hidden;
}
.flow__head .h2 {
  max-width: 22ch;
}
.flow__track {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  padding-inline: max(calc(50vw - var(--wrap) / 2), var(--gutter));
  width: max-content;
  will-change: transform;
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: clamp(260px, 30vw, 380px);
  padding: clamp(26px, 2.6vw, 36px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, #111a28 0%, #0b121d 60%, #101421 100%);
  transition: border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.step:hover {
  border-color: color-mix(in oklab, var(--primary) 50%, transparent);
  box-shadow: 0 30px 70px -44px color-mix(in oklab, var(--primary) 95%, transparent);
}
.step__no {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  color: var(--primary-light);
}
.step h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-variation-settings: 'wdth' 100;
}
.step p {
  color: var(--text-2);
  font-size: 0.94rem;
}
.step--end {
  border-color: color-mix(in oklab, var(--primary) 45%, transparent);
  background:
    radial-gradient(120% 100% at 100% 0%, color-mix(in oklab, var(--primary) 18%, transparent), transparent 62%),
    linear-gradient(150deg, #111a28, #0b121d);
}

/* ---------------------------------------------------------------- orgs -- */
.orgs {
  overflow: clip;
}
.orgs__wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.orgs__points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 30px;
  margin-top: 40px;
}
.orgs__points h4 {
  margin-bottom: 6px;
  font-size: 1.02rem;
  font-variation-settings: 'wdth' 100;
}
.orgs__points p {
  color: var(--text-3);
  font-size: 0.9rem;
}

.orgs__visual {
  perspective: 1200px;
}
.org-card {
  position: relative;
  padding: 22px;
  border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, #141026 0%, #0b121d 55%, #14101f 100%);
  box-shadow: 0 60px 120px -50px #000;
  transform-style: preserve-3d;
  will-change: transform;
}
.org-card__glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--violet) 34%, transparent),
    inset 0 0 40px -8px color-mix(in oklab, var(--violet) 45%, transparent);
  animation: energy 5.2s var(--ease-in-out) infinite;
}
.org-card__banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border-radius: var(--r);
  background:
    radial-gradient(90% 140% at 100% 0%, color-mix(in oklab, var(--pink) 30%, transparent), transparent 60%),
    radial-gradient(90% 140% at 0% 100%, color-mix(in oklab, var(--primary) 40%, transparent), transparent 62%),
    #0d0a18;
}
.org-card__tag {
  padding: 7px 12px;
  border: 1px solid color-mix(in oklab, var(--violet) 45%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in oklab, #000 35%, transparent);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--violet);
}
.org-card__id strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
}
.org-card__id span {
  font-size: 0.76rem;
  color: var(--text-3);
}

.org-card__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.org-stat {
  padding: 12px;
  border: 1px solid color-mix(in oklab, #fff 6%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--panel) 75%, transparent);
  text-align: center;
}
.org-stat span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.org-stat b {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}

.org-ranks {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.org-ranks li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--panel) 60%, transparent);
  font-size: 0.86rem;
  color: var(--text-2);
}
.org-ranks i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--c);
  box-shadow: 0 0 10px var(--c);
}
.org-ranks span {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-3);
}

.org-ach {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.ach {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--panel) 70%, transparent);
  font-size: 0.76rem;
  color: var(--text-2);
}
.ach--new {
  border-color: color-mix(in oklab, var(--violet) 50%, transparent);
  color: var(--violet);
  box-shadow: 0 0 22px -8px var(--violet);
}

.org-seats {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.org-seats__bar {
  height: 6px;
  margin-bottom: 8px;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, #fff 7%, transparent);
  overflow: hidden;
}
.org-seats__bar i {
  display: block;
  height: 100%;
  width: 70%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--violet), var(--pink));
  transform: scaleX(0);
  transform-origin: left;
}

/* --------------------------------------------------------------- stats -- */
.stats {
  padding-block: clamp(50px, 6vw, 80px);
  border-block: 1px solid var(--border);
  background: color-mix(in oklab, var(--nav) 55%, transparent);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 112;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, var(--text), var(--primary-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ----------------------------------------------------------------- cta -- */
.cta {
  position: relative;
  padding-block: clamp(110px, 15vw, 200px);
  text-align: center;
  overflow: clip;
}
.cta__aurora {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(120vw, 1400px);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, color-mix(in oklab, var(--primary) 40%, transparent), transparent 72%),
    radial-gradient(closest-side at 30% 60%, color-mix(in oklab, var(--pink) 24%, transparent), transparent 70%);
  filter: blur(70px);
  opacity: 0.55;
  pointer-events: none;
}
.cta__inner {
  position: relative;
  z-index: 2;
}
.cta__title {
  font-size: clamp(4rem, 17vw, 14rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 120;
  line-height: 0.86;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  background-image: linear-gradient(180deg, var(--text) 20%, var(--primary-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cta__sub {
  max-width: 46ch;
  margin: 22px auto 38px;
  color: var(--text-2);
  font-size: 1.06rem;
}
.cta__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.cta__note {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* -------------------------------------------------------------- footer -- */
.footer {
  border-top: 1px solid var(--border);
  background: var(--nav);
  padding-top: clamp(56px, 7vw, 90px);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 54px;
}
.footer__brand p {
  margin-top: 16px;
  max-width: 38ch;
  color: var(--text-3);
  font-size: 0.9rem;
}
.footer__col {
  display: grid;
  align-content: start;
  gap: 11px;
  font-size: 0.9rem;
  color: var(--text-3);
}
.footer__col h5 {
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
}
.footer__col a {
  width: fit-content;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.footer__col a:hover {
  color: var(--text);
  transform: translateX(3px);
}
.footer__base {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-block: 22px;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-3);
}
.footer__disclaimer {
  max-width: 52ch;
}
.footer__base a {
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.footer__base a:hover {
  color: var(--text);
}

/* -------------------------------------------------------- progression -- */
/* One accent per rarity, straight from the client's ladder
   (lib/features/rewards/presentation/reward_rarity_style.dart). Every glow on
   a card is mixed from these two custom properties, so a legendary quest here
   is the colour it is in the app — and a new tier is two lines, not a
   rewrite. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

[data-rarity] {
  --accent: #8fa3bc;
  --accent-hot: #cbd7e6;
}
[data-rarity='rare'] {
  --accent: #3da9ff;
  --accent-hot: #8fd4ff;
}
[data-rarity='epic'] {
  --accent: #7b4dff;
  --accent-hot: #b79cff;
}
[data-rarity='legendary'] {
  --accent: #ffc24b;
  --accent-hot: #ffe9a8;
}
[data-rarity='mythic'] {
  --accent: #ff3d71;
  --accent-hot: #ffb03d;
}

.prog {
  display: grid;
  grid-template-columns: minmax(230px, 0.78fr) 1.22fr;
  gap: clamp(14px, 2vw, 22px);
}
.prog__level,
.quest {
  position: relative;
  padding: clamp(22px, 2.6vw, 32px);
  padding-top: 48px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(90% 130% at 50% 125%, color-mix(in oklab, var(--primary) 13%, transparent), transparent 62%),
    linear-gradient(180deg, #060a11 0%, #0a1120 60%, #070c14 100%);
}

.prog__level {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 3px;
  text-align: center;
}

/* r = 52 in a 120 box, so the circumference is 2πr ≈ 326.7 — the dash offset
   is the one number the level ring needs, and --fill is the only thing that
   ever changes. */
.xp-ring {
  display: grid;
  place-items: center;
  position: relative;
  width: clamp(126px, 13vw, 164px);
  aspect-ratio: 1;
  margin-bottom: 8px;
}
.xp-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
.xp-ring circle {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}
.xp-ring__track {
  stroke: color-mix(in oklab, #fff 8%, transparent);
}
.xp-ring__fill {
  stroke: var(--primary-light);
  stroke-dasharray: 326.7;
  stroke-dashoffset: calc(326.7 * (1 - var(--fill, 0)));
  filter: drop-shadow(0 0 9px color-mix(in oklab, var(--primary) 75%, transparent));
}
/* The number is the only item in the flow, so it sits on the exact centre of
   the ring. The label is taken out of the flow underneath it — with both in
   the grid, the two auto rows stretch and push the number off centre. */
.xp-ring b {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 4vw, 3.1rem);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.xp-ring span {
  position: absolute;
  left: 50%;
  bottom: 19%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}

.prog__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  font-variation-settings: 'wdth' 108;
}
.prog__xp {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-3);
}
.prog__xp b {
  color: var(--primary-light);
}
.prog__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.prog__facts li {
  display: grid;
  gap: 3px;
}
.prog__facts b {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.prog__facts span {
  font-size: 0.68rem;
  line-height: 1.3;
  color: var(--text-3);
}
.prog__season {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--text-2);
}
.prog__season i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 10px var(--success);
}

/* ------------------------------------------------------- quest board -- */
.quest {
  display: grid;
  align-content: start;
  gap: 11px;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
/* A finished quest is loud on purpose — in the app it is the one card with
   something to pick up. */
.quest[data-state='ready'] {
  border-color: color-mix(in oklab, var(--accent) 50%, transparent);
  box-shadow: 0 0 60px -26px var(--accent);
}
.quest__top {
  display: flex;
  align-items: center;
  gap: 13px;
}
.quest__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: var(--r);
  border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  background: color-mix(in oklab, var(--accent) 15%, transparent);
  color: var(--accent-hot);
  box-shadow: 0 0 30px -10px var(--accent);
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.quest__ico svg,
.shelf-tile__ico svg,
.chip svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.quest__ico svg {
  width: 25px;
  height: 25px;
}
.quest__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.quest h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-variation-settings: 'wdth' 104;
  line-height: 1.1;
}
.quest > p {
  color: var(--text-2);
  font-size: 0.95rem;
}
.quest__bar {
  height: 9px;
  margin-top: 6px;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, #fff 7%, transparent);
  overflow: hidden;
}
.quest__bar i,
.shelf-tile__bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent), var(--accent-hot));
  box-shadow: 0 0 18px -3px var(--accent);
}
.quest__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-3);
}
.quest__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.quest__state {
  margin-left: auto;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.quest[data-state='ready'] .quest__state {
  border-color: transparent;
  background: linear-gradient(120deg, var(--accent), var(--accent-hot));
  color: #0a0f17;
  font-weight: 700;
  box-shadow: 0 0 30px -8px var(--accent);
}
.quest[data-state='claimed'] .quest__state {
  border-color: color-mix(in oklab, var(--success) 45%, transparent);
  color: var(--success);
}

/* ------------------------------------------------------------- chips -- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--panel) 70%, transparent);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.chip svg {
  width: 13px;
  height: 13px;
}
.chip--rarity {
  border-color: color-mix(in oklab, var(--accent) 50%, transparent);
  background: color-mix(in oklab, var(--accent) 13%, transparent);
  color: var(--accent-hot);
}
.chip--streak {
  border-color: color-mix(in oklab, var(--warning) 45%, transparent);
  color: var(--warning);
}
.chip--xp {
  border-color: color-mix(in oklab, var(--primary-light) 45%, transparent);
  color: var(--primary-light);
}
.chip--reward {
  border-color: color-mix(in oklab, var(--violet) 45%, transparent);
  color: var(--violet);
  text-transform: none;
  letter-spacing: 0.04em;
}
.chip[hidden] {
  display: none;
}

/* ------------------------------------------------------------- shelf -- */
.shelf {
  margin-top: clamp(36px, 5vw, 60px);
}
.shelf__head {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}
.shelf__head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 106;
}
.shelf__head p {
  max-width: 58ch;
  color: var(--text-2);
  font-size: 0.95rem;
}
.shelf__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.shelf-tile {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: color-mix(in oklab, var(--panel) 65%, transparent);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}
.shelf-tile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
  box-shadow: 0 0 38px -16px var(--accent);
}
.shelf-tile__ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 4px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in oklab, var(--accent) 38%, transparent);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--accent-hot);
}
.shelf-tile__ico svg {
  width: 19px;
  height: 19px;
}
.shelf-tile b {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
}
.shelf-tile__cat {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.shelf-tile__bar {
  display: block;
  height: 6px;
  margin-top: 6px;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, #fff 7%, transparent);
  overflow: hidden;
}
.shelf-tile__num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-2);
}
.shelf-tile--done {
  border-color: color-mix(in oklab, var(--accent) 42%, transparent);
}
.shelf-tile--done .shelf-tile__num {
  color: var(--accent-hot);
}
/* A secret achievement keeps its rarity and nothing else — the app masks the
   name until it is unlocked, and so does the shelf. */
.shelf-tile--secret b,
.shelf-tile--secret .shelf-tile__num {
  color: var(--text-3);
}
.shelf-tile--secret b {
  filter: blur(4px);
  user-select: none;
}
.shelf-tile--secret .shelf-tile__ico {
  color: var(--text-3);
  border-color: var(--border);
  background: color-mix(in oklab, #fff 4%, transparent);
}

.stage__label {
  position: absolute;
  top: 14px;
  left: 16px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---------------------------------------------------------- languages -- */
.langs__head {
  max-width: 62ch;
}
.langs__title {
  max-width: 22ch;
}
/* Block-level on purpose: the cycled names differ wildly in width
   ("English" against "Español (Latinoamérica)"), and on its own line a swap
   cannot reflow the words above it. */
.langs__cycle {
  display: grid;
  overflow: hidden;
}
.langs__cycle-item {
  grid-area: 1 / 1;
  background-image: linear-gradient(100deg, var(--violet), var(--primary-light) 55%, var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.langs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.lang {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: color-mix(in oklab, var(--panel) 55%, transparent);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease),
    transform 0.35s var(--ease);
}
.lang:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--primary-light) 45%, transparent);
  background: var(--panel-hover);
}
.lang b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  font-variation-settings: 'wdth' 100;
  letter-spacing: -0.01em;
}
.lang span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.lang--rtl b {
  direction: rtl;
}

/* ------------------------------------------------------------- legal -- */
/* Privacy and Terms ship without any JavaScript: nothing on those pages is
   animated, so they carry neither the `js` class nor a CDN script, and they
   render identically with scripting switched off. */
.legal-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--nav) 92%, transparent);
  backdrop-filter: blur(18px);
}
.legal {
  max-width: 78ch;
  margin-inline: auto;
  padding: clamp(48px, 8vw, 96px) var(--gutter) clamp(60px, 9vw, 120px);
}
.legal__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}
.legal h1 {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.5vw, 3.2rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 108;
  line-height: 1.05;
}
.legal__meta {
  margin-top: 14px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-3);
}
.legal h2 {
  margin-top: 44px;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 104;
}
.legal h3 {
  margin-top: 26px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.legal p,
.legal li {
  margin-top: 12px;
  color: var(--text-2);
  font-size: 0.96rem;
  line-height: 1.72;
}
.legal ul {
  margin-top: 6px;
  padding-left: 20px;
  list-style: disc;
}
.legal li::marker {
  color: var(--primary-light);
}
.legal a {
  color: var(--primary-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal a:hover {
  color: var(--violet);
}
.legal strong {
  color: var(--text);
  font-weight: 600;
}
.legal__box {
  margin-top: 24px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: color-mix(in oklab, var(--panel) 65%, transparent);
}
.legal__box p:first-child {
  margin-top: 0;
}
/* Beats `.legal ul` on specificity — the chips are navigation, not prose. */
.legal ul.legal__toc {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
}
.legal__toc li {
  margin-top: 0;
}
.legal__toc a {
  display: inline-block;
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--panel) 70%, transparent);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--text-2);
  text-decoration: none;
}
.legal__toc a:hover {
  border-color: color-mix(in oklab, var(--primary-light) 50%, transparent);
  color: var(--text);
}

/* ------------------------------------------------- pre-animation states -- */
html.js .reveal-up,
html.js [data-split] {
  opacity: 0;
}
html.js .hero__app,
html.js .org-card,
html.js .card,
html.js .compare__vs {
  opacity: 0;
}
/* Once GSAP has taken over (or failed), nothing stays hidden. */
html.js.fx-ready .reveal-up,
html.js.fx-ready [data-split],
html.js.fx-ready .hero__app,
html.js.fx-ready .org-card,
html.js.fx-ready .card,
html.js.fx-ready .compare__vs {
  opacity: 1;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .hero__layout {
    grid-template-columns: 1fr;
  }
  .hero__app {
    width: min(100%, 620px);
    margin: 8px auto 0;
  }
  .badge--live {
    left: 0;
  }
  /* The mock now sits in the flow at the bottom of the hero, where the cue
     would land on top of it. */
  .scroll-cue {
    display: none;
  }
  .orgs__wrap {
    grid-template-columns: 1fr;
  }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .nav__links {
    position: absolute;
    inset: calc(100% + 10px) 0 auto;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: color-mix(in oklab, var(--nav) 96%, transparent);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 60px -30px #000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  }
  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__links a {
    padding: 11px 12px;
    border-radius: var(--r-sm);
  }
  .nav__burger {
    display: block;
  }
  .nav__cta {
    display: none;
  }

  .bento {
    grid-template-columns: 1fr 1fr;
  }
  .card--wide,
  .card--tall {
    grid-column: auto;
    grid-row: auto;
  }
  .compare {
    grid-template-columns: 1fr;
  }
  .compare__vs {
    transform: rotate(90deg);
  }
  .modes__panel {
    grid-template-columns: 1fr;
  }
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .orgs__points {
    grid-template-columns: 1fr;
  }
  .prog {
    grid-template-columns: 1fr;
  }
  .shelf__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .flow__sticky {
    height: auto;
    position: static;
    padding-block: var(--section-y);
  }
  .flow__track {
    flex-direction: column;
    width: auto;
    padding-inline: var(--gutter);
    transform: none !important;
  }
  .step {
    width: auto;
  }
}

@media (max-width: 640px) {
  .bento {
    grid-template-columns: 1fr;
  }
  .shelf__grid {
    grid-template-columns: 1fr;
  }
  .quest__meta {
    flex-direction: column;
    gap: 3px;
  }
  .quest__state {
    margin-left: 0;
  }
  .footer__grid {
    grid-template-columns: 1fr;
  }
  .hero__actions {
    align-items: stretch;
    flex-direction: column;
  }
  .btn--primary {
    justify-content: center;
  }
  .cursor-glow {
    display: none;
  }
}

/* -------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .fx,
  .grain,
  .cursor-glow {
    display: none;
  }
  html.js .reveal-up,
  html.js [data-split],
  html.js .hero__app,
  html.js .org-card,
  html.js .card,
  html.js .compare__vs {
    opacity: 1;
  }
}