/* Algo Studios: algostudios.org */

/* Geist (variable, 400 to 700), served from this site so no third-party request blocks the first paint */
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/geist-v5-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/geist-v5-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #000;
  --surface: #09090b;
  --surface-2: #121216;
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.16);
  --text: #fff;
  --muted: #b8b8c4;
  --dim: #7d7d8a;
  /* Brand accent: change these two to recolor every button and highlight. */
  --accent: #6f4dff;
  --accent-hover: #8467ff;
  --accent-soft: #a996ff;
  --accent-glow: 111, 77, 255;
  --danger: #ff7a8a;
  --grad: linear-gradient(110deg, #8b6dff 10%, #22d3ee 90%);
  --radius: 18px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}
.js:not(.ready):not(.fallback) body { overflow: hidden; }

/* Smooth scrolling (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* Scrollbar */
html { scrollbar-color: #2b2b34 #000; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #2b2b34; border: 2px solid #000; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #3c3c48; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* Fine film grain behind everything: a quiet texture layer on the black */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.04;
  text-wrap: balance;
}
::selection { background: rgba(var(--accent-glow), 0.5); }
:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 8px; }

/* Wider on big screens; side padding grows with the window */
.container { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 56px); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 300;
  padding: 10px 16px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 600;
}
.skip-link:focus { top: 12px; }
.text-link { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; }

/* Intro ------------------------------------------------------------------ */
.intro {
  position: fixed; inset: 0; z-index: 200;
  display: none; place-items: center;
  background: #000;
}
.js .intro { display: grid; }
.fallback .intro { display: none; }
.intro-mark { width: 88px; height: 88px; opacity: 0.2; will-change: transform, opacity, filter; }
@media (max-width: 520px) { .intro-mark { width: 72px; height: 72px; } }

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: clamp(48px, 3.5vw, 58px); padding: 0 clamp(22px, 1.9vw, 32px); border-radius: 999px;
  border: 1px solid transparent;
  font: 600 clamp(15px, 1.05vw, 17px)/1 var(--font); white-space: nowrap; cursor: pointer;
  transition: transform 0.3s var(--ease-out), box-shadow 0.5s var(--ease-out), background-color 0.3s, border-color 0.3s;
}
.btn:active { transform: scale(0.97); }
.btn svg { margin-right: -4px; transition: transform 0.4s var(--ease-out); }
.btn:hover svg { transform: translateX(2px); }
.btn-primary {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--accent); color: #fff;
  box-shadow: 0 4px 16px 0 rgba(var(--accent-glow), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
/* Light sweep across primary buttons on hover */
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 0.9s var(--ease-out);
}
.btn-primary:hover::after { transform: translateX(110%); }
.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 6px 24px 0 rgba(var(--accent-glow), 0.6);
}
.btn-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.22); color: var(--text); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.36); }
.btn-sm { height: 42px; padding: 0 20px; font-size: 15px; }
.btn-block { width: 100%; }

/* Live player counts: purple gradient numbers */
.num-live {
  background: linear-gradient(100deg, #d4c8ff 0%, #a48bff 45%, #7653ff 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Nav -------------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s, border-color 0.4s, opacity 1s var(--ease-out), transform 0.8s var(--ease-out);
}
.js .nav { opacity: 0; transform: translateY(-8px); }
.ready .nav, .fallback .nav { opacity: 1; transform: none; }
/* Tucks away while scrolling down, comes back on the way up */
.ready .nav.nav-hidden { transform: translateY(calc(-100% - 30px)); }
.nav-inner {
  display: flex; align-items: center; gap: clamp(24px, 2.6vw, 44px); height: clamp(72px, 5.6vw, 92px);
  border: 1px solid transparent; border-radius: 32px;
  transition: max-width 0.9s var(--ease-out), height 0.9s var(--ease-out), margin-top 0.9s var(--ease-out),
    padding 0.9s var(--ease-out), gap 0.9s var(--ease-out), background-color 0.6s, border-color 0.6s, box-shadow 0.6s;
}
/* Once scrolled, the bar condenses into a slim floating glass pill */
.nav.scrolled .nav-inner {
  max-width: min(940px, calc(100% - 32px)); height: 54px; margin-top: 14px; padding: 0 7px 0 18px;
  gap: clamp(16px, 2vw, 28px);
  background: rgba(14, 14, 18, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 10px 34px -14px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.nav-inner .brand img { transition: width 0.9s var(--ease-out), height 0.9s var(--ease-out); }
.nav-inner .brand span { transition: font-size 0.9s var(--ease-out); }
.nav.scrolled .nav-inner .brand img { width: 26px; height: 26px; }
.nav.scrolled .nav-inner .brand span { font-size: 17px; }
/* In the pill, the current section gets a soft highlight instead of an underline */
.nav.scrolled .nav-links { gap: 2px; }
.nav.scrolled .nav-links a { padding: 7px 13px; border-radius: 999px; font-size: 14.5px; }
.nav.scrolled .nav-links a::after { opacity: 0; }
.nav.scrolled .nav-links a:hover { background: rgba(255, 255, 255, 0.05); }
.nav.scrolled .nav-links a[aria-current="true"] { background: rgba(255, 255, 255, 0.09); }
/* The menu button stays one modest size in both states */
.nav-cta.btn-sm { height: 40px; padding: 0 17px; font-size: 14.5px; }
.nav-cta.btn-primary { box-shadow: 0 2px 12px rgba(var(--accent-glow), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.nav-cta.btn-primary:hover { box-shadow: 0 4px 18px rgba(var(--accent-glow), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
/* The open phone menu supplies its own backdrop */
.nav.open .nav-inner {
  background: transparent; border-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px; margin-right: auto;
  font: 700 clamp(18px, 1.35vw, 22px)/1 var(--font); letter-spacing: -0.03em;
}
.nav-links { display: flex; gap: clamp(24px, 2.4vw, 40px); font-size: clamp(15px, 1.05vw, 17px); font-weight: 500; color: #d9d9e0; }
.nav-links a {
  position: relative; padding: 6px 0;
  transition: color 0.2s, background-color 0.3s, padding 0.9s var(--ease-out), font-size 0.9s var(--ease-out);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--grad);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.7s var(--ease-out), opacity 0.4s;
}
.nav-links a:hover { color: #fff; }
.nav-links a[aria-current="true"] { color: #fff; }
.nav-links a[aria-current="true"]::after { transform: scaleX(1); }

.menu-btn {
  display: none; position: relative; z-index: 2; width: 44px; height: 44px; margin-right: -10px;
  align-items: center; justify-content: center;
  background: none; border: 0; color: var(--text); border-radius: 10px; cursor: pointer;
}
.menu-bars { position: relative; width: 22px; height: 12px; }
.menu-bars span {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform 0.45s var(--ease), top 0.45s var(--ease);
}
.menu-bars span:first-child { top: 0; }
.menu-bars span:last-child { top: 10px; }
.menu-btn[aria-expanded="true"] .menu-bars span:first-child { top: 5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-bars span:last-child { top: 5px; transform: rotate(-45deg); }

/* Phone menu: full-screen black sheet with links that blur in */
.mobile-menu {
  position: fixed; inset: 0; z-index: -1;
  padding-top: 90px;
  background: rgba(0, 0, 0, 0.94);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0s 0.45s;
}
.mobile-menu .container { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu a {
  padding: 14px 0; font: 600 34px/1.1 var(--font); letter-spacing: -0.04em;
  opacity: 0; filter: blur(8px); transform: translateY(14px);
  transition: opacity 0.8s var(--ease-out), filter 0.8s var(--ease-out), transform 0.9s var(--ease-out);
}
.mobile-menu a.btn { margin-top: 20px; padding: 0 26px; height: 56px; font-size: 17px; letter-spacing: 0; }
.mobile-menu .mobile-email { margin-top: 16px; font: 500 15px/1.4 var(--font); letter-spacing: 0; color: var(--dim); }
.nav.open .mobile-menu { opacity: 1; visibility: visible; transition: opacity 0.45s var(--ease), visibility 0s; }
.nav.open .mobile-menu a {
  opacity: 1; filter: blur(0); transform: none;
  transition-delay: calc(80ms + var(--n) * 60ms);
}
.nav.open .brand { position: relative; z-index: 2; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; }
  .nav-inner { gap: 12px; height: 66px; }
  .nav.scrolled .nav-inner { max-width: calc(100% - 20px); height: 52px; margin-top: 10px; padding: 0 4px 0 16px; }
  .nav-cta.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }
  .nav.scrolled .menu-btn { margin-right: 0; }
  .nav.open .nav-cta { opacity: 0; pointer-events: none; }
}
@media (min-width: 861px) { .mobile-menu { display: none; } }
@media (max-width: 400px) { .nav-cta { display: none; } }

/* Word-by-word reveal ---------------------------------------------------- */
.w { display: inline-block; }
/* Big headings get a soft chrome fade, white into silver. The padding/margin pair
   widens the painted area so descenders (g, y, p) aren't cut off, without moving anything. */
h1[data-words] .w:not(.grad), h2[data-words] .w:not(.grad) {
  padding: 0.1em 0; margin: -0.1em 0;
  background: linear-gradient(180deg, #fff 32%, #b6b6c4 96%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.js [data-words]:not(.split) { opacity: 0; }
.js [data-words] .w {
  opacity: 0;
  filter: blur(var(--blur, 12px));
  transform: translate3d(-0.06em, 0.34em, 0);
  transition: opacity 1.1s var(--ease-out), filter 1.1s var(--ease-out), transform 1.3s var(--ease-out);
  transition-delay: calc(var(--start, 0ms) + var(--i) * var(--step, 70ms));
}
.js [data-words="fast"] { --step: 14ms; --blur: 6px; }
/* filter: none (not blur(0)) so finished words drop their extra GPU layer */
.js [data-words].in .w { opacity: 1; filter: none; transform: none; }

/* Block reveal ----------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 36px, 0) scale(0.985);
  transition-property: opacity, filter, transform, translate, border-color;
  transition-duration: 1.1s, 1.1s, 1.4s, 0.7s, 0.3s;
  transition-timing-function: var(--ease-out);
  transition-delay: var(--d, 0ms), var(--d, 0ms), var(--d, 0ms), 0s, 0s;
}
.js .reveal.in { opacity: 1; filter: none; transform: none; }

/* Cards lift gently under the cursor */
@media (hover: hover) and (pointer: fine) {
  .stat:hover, .feature:hover, .step:hover, .game-card:hover { translate: 0 -5px; }
}

.fallback [data-words] .w, .fallback .reveal, .fallback [data-words] {
  opacity: 1 !important; filter: none !important; transform: none !important;
}

/* Hero ------------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(calc(100svh - 84px), 1080px);
  display: flex; align-items: center;
  padding: clamp(112px, 15vh, 170px) 0 clamp(64px, 10vh, 120px);
}
/* Scroll parallax: JS sets --hero-p from 0 (top) to 1 (hero scrolled away) */
.hero-inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transform: translate3d(0, calc(var(--hero-p, 0) * -80px), 0);
  opacity: calc(1 - var(--hero-p, 0) * 0.9);
}
.hero-title { font-size: clamp(44px, 7.6vw, 128px); max-width: 13ch; }
/* A soft light trails the cursor across the hero. It moves with translate only,
   so following the mouse never repaints the page. It lives inside the wall layer,
   so the wall's bottom fade softens it too. */
.hero-light {
  position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none;
  width: 1100px; height: 1100px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--accent-glow), 0.16), rgba(var(--accent-glow), 0.05) 55%, transparent);
  translate: calc(var(--hx, 50vw) - 550px) calc(var(--hy, 40vh) - 550px);
  opacity: 0;
  transition: translate 1.1s var(--ease-out), opacity 1.2s var(--ease-out);
  will-change: translate;
}
@media (hover: hover) and (pointer: fine) {
  .ready .hero:hover .hero-light { opacity: 1; }
}

/* Background layer: a wall of our game screenshots tilted back in 3D,
   drifting slowly and fading into the black around the headline */
.hero-wall {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  perspective: 1100px; perspective-origin: 50% 20%;
  contain: strict;
  /* Everything back here melts into the black before the hero ends: no hard edge */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  transition: opacity 2.4s var(--ease-out) 0.4s;
}
.js .hero-wall { opacity: 0; }
.ready .hero-wall { opacity: 1; }
.wall-tilt {
  position: absolute; left: 50%; top: 44%;
  width: max(1200px, 132vw);
  transform: translate3d(-50%, calc(var(--hero-p, 0) * 140px), 0) rotateX(60deg);
  transform-origin: 50% 0;
}
.wall-plane {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 26px);
  animation: wall-drift 80s linear infinite;
  will-change: transform;
}
.wall-plane img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: clamp(10px, 1vw, 18px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0.34;
}
@keyframes wall-drift { to { transform: translateY(-50%); } }
.is-paused .wall-plane, .is-paused .ticker-track, .is-paused .grad { animation-play-state: paused; }
.hero-wall::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 48% 56% at 50% 48%, #000 30%, rgba(0, 0, 0, 0.82) 60%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 42%, rgba(0, 0, 0, 0.35) 62%, rgba(0, 0, 0, 0.35) 82%, #000 100%);
}
.grad {
  background: linear-gradient(110deg, #8b6dff 0%, #22d3ee 40%, #8b6dff 80%, #22d3ee 120%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-right: 0.04em;
  animation: shimmer 6s ease-in-out infinite alternate;
}
@keyframes shimmer { to { background-position: 100% 0; } }

/* Mouse-follow glow on cards (desktop only; JS sets --mx/--my) */
.glow { position: relative; isolation: isolate; }
.glow::before, .glow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 0.4s ease;
}
.glow::after {
  z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-glow), 0.13), transparent 45%);
}
.glow::before {
  z-index: 1; padding: 1px;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(190, 175, 255, 0.85), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (hover: hover) and (pointer: fine) {
  .glow:hover::before, .glow:hover::after { opacity: 1; }
}
.hero-sub { margin-top: clamp(22px, 2vw, 34px); max-width: 34em; font-size: clamp(17px, 1.45vw, 23px); color: #d4d4dc; line-height: 1.55; }
.hero-ctas { margin-top: clamp(32px, 3vw, 52px); display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
/* Fixed-width columns, so the row doesn't shift sideways while the numbers count up */
.hero-stats {
  margin-top: clamp(48px, 5vw, 88px); display: grid;
  grid-template-columns: repeat(2, minmax(0, clamp(150px, 15vw, 270px)));
  justify-content: center; gap: clamp(20px, 5vw, 80px);
}
.hero-num {
  font: 600 clamp(32px, 3.4vw, 58px)/1 var(--font);
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hero-label {
  margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: clamp(15px, 1.15vw, 19px); font-weight: 500; color: #d9d9e0;
}
@media (max-width: 520px) {
  .hero { padding-top: 110px; }
  .hero-ctas { width: 100%; flex-direction: column; }
  .hero-ctas .btn { width: 100%; }
  .hero-stats { margin-top: 48px; }
  .hero-label { font-size: 15px; }
}

/* Ticker ----------------------------------------------------------------- */
.ticker {
  overflow: hidden; padding: 26px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.ticker-track { display: flex; width: max-content; animation: ticker 40s linear infinite; }
.ticker-track span {
  padding-right: clamp(40px, 5vw, 96px);
  font: 700 clamp(22px, 2.6vw, 42px)/1 var(--font); letter-spacing: -0.03em;
  color: #e9e9ee; white-space: nowrap;
}
.ticker-track span:nth-child(even) { color: #6f6f7c; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Sections --------------------------------------------------------------- */
/* overflow-x: clip keeps background glows from widening the page on phones */
.section { position: relative; isolation: isolate; overflow-x: clip; padding: clamp(96px, 11vw, 200px) 0 0; }
.section-head { max-width: 880px; margin-bottom: clamp(36px, 4vw, 68px); }
.section-head::before {
  content: ""; display: block; height: 1px; margin-bottom: clamp(28px, 2.6vw, 44px);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 75%);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.8s var(--ease-out);
}
.section-head:has(.in)::before, .fallback .section-head::before { transform: scaleX(1); }
h2 { font-size: clamp(36px, 5.4vw, 88px); }
.lead { margin-top: clamp(16px, 1.6vw, 26px); font-size: clamp(17px, 1.3vw, 21px); line-height: 1.65; color: var(--muted); max-width: 36em; }

/* About + stats ---------------------------------------------------------- */
/* minmax(0, …) keeps column widths fixed no matter how wide the numbers get mid count-up */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 5vw, 104px); align-items: center; }
.about-ctas { margin-top: clamp(28px, 2.6vw, 44px); display: flex; flex-wrap: wrap; gap: 14px; }
.stat-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.5vw, 24px); }
/* Soft light behind the stat cards, so they sit on a layer instead of flat black */
.stat-grid::before {
  content: ""; position: absolute; inset: -18% -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--accent-glow), 0.2), transparent);
  filter: blur(24px);
}
.stat {
  container-type: inline-size;
  padding: clamp(26px, 2.4vw, 42px) clamp(22px, 2.2vw, 38px); border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 55%), #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 60px -30px rgba(0, 0, 0, 0.9);
}
/* Sized to the card, so the longest value ("701.5K+") always fits on one line */
.stat-num {
  font: 600 clamp(30px, 20cqi, 56px)/1 var(--font);
  letter-spacing: -0.045em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stat-desc { margin-top: clamp(12px, 1vw, 18px); font-size: clamp(15px, 1.1vw, 18px); line-height: 1.55; color: #d4d4dc; }
@media (max-width: 960px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .stat { padding: 26px 22px; }
}

/* Game cards ------------------------------------------------------------- */
.game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.5vw, 24px); }
.game-list { display: contents; }
/* 3 columns only once each card is wide enough for a full title row; 2 on tablets; 1 on phones */
@media (max-width: 1099px) { .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) { .game-grid { grid-template-columns: minmax(0, 1fr); } }

.game-card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.14);
}
.game-card:hover { border-color: rgba(255, 255, 255, 0.28); }
/* The picture itself fades out toward its bottom edge, so there's never a hard edge
   (not even a 1px sliver while it zooms on hover) where it meets the stats line */
.game-media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
/* Screenshots crossfade slowly; each one fades in only once it has loaded (no pop-in) */
.game-shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1), transform 2.4s var(--ease-out);
}
.game-shot.is-active.is-loaded { opacity: 1; }
.game-card:hover .game-shot { transform: scale(1.03); }
/* As the card arrives, the picture settles from a slight zoom, in step with the card */
.js .game-card.reveal:not(.in) .game-shot { transform: scale(1.06); }
/* The picture melts into the card, and the title row sits on its darkened lower edge */
.game-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.88) 24%, rgba(0, 0, 0, 0.35) 52%, transparent 74%);
}
.game-card { container-type: inline-size; }
.game-body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 18px;
  margin-top: -70px; padding: 0 clamp(18px, 1.6vw, 26px) clamp(18px, 1.6vw, 26px);
}
.game-head { display: flex; align-items: center; gap: 14px; height: 52px; }
.game-icon {
  flex: none; width: 52px; height: 52px; border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.65);
}
.game-titles { flex: 1; min-width: 0; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); }
.game-titles h3 { font-size: clamp(17px, 5.2cqi, 24px); letter-spacing: -0.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-by { display: flex; align-items: center; gap: 5px; min-width: 0; margin-top: 5px; font-size: 14px; line-height: 1.2; white-space: nowrap; }
.game-by-label { flex: none; color: #9a9aa8; }
.game-group-name { overflow: hidden; text-overflow: ellipsis; color: #ececf1; font-weight: 500; }
.verified { flex: none; width: 16px; height: 16px; }
.game-go {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--line-2); color: #fff;
  transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), transform 0.6s var(--ease-out);
}
.game-card:hover .game-go { transform: rotate(45deg); }
.game-card:hover .game-go { background: var(--accent); border-color: var(--accent); }
/* The top padding sits on each cell, so the vertical dividers run right up to the
   horizontal line and meet it in clean T-junctions */
.game-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0;
  border-top: 1px solid var(--line);
}
.game-stats > div { padding-top: 16px; }
/* The hover light passes over the picture too (under the text), so it's one smooth glow
   instead of stopping hard at the picture's edge */
.game-card:not(.next-card).glow::after { z-index: 0; }
.game-stats dt { font-size: 12px; color: var(--dim); }
.game-stats dd { margin: 4px 0 0; font: 600 clamp(15px, 4.8cqi, 21px)/1.2 var(--font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Under 400px wide the arrow circle steps aside (the whole card is the link), so long titles fit */
@container (max-width: 399px) { .game-go { display: none; } }
/* Narrow cards (small phones): a slightly smaller icon so the group name fits */
@container (max-width: 330px) {
  .game-head { gap: 10px; height: 46px; }
  .game-icon { width: 46px; height: 46px; border-radius: 12px; }
  .game-go { width: 30px; height: 30px; }
  .game-by { font-size: 13.5px; }
}
/* Hairline dividers between the numbers once the card has room for them */
@container (min-width: 340px) {
  .game-stats { gap: 0; }
  .game-stats > div + div { padding-left: clamp(12px, 4cqi, 18px); border-left: 1px solid var(--line); }
}

/* "Your game could be next": a card in the grid when there's a free slot beside the
   games, and a slim full-width strip when the games fill whole rows */
.next-card {
  justify-content: center; padding: clamp(24px, 2.2vw, 40px);
  border-style: dashed; border-color: rgba(255, 255, 255, 0.2); background: transparent;
}
.next-card:hover { border-color: rgba(255, 255, 255, 0.42); }
.next-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.next-text { display: flex; flex-direction: column; gap: 10px; }
.next-plus {
  flex: none; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--line-2); color: #fff;
  transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), transform 0.7s var(--ease-out);
}
.next-card:hover .next-plus { background: var(--accent); border-color: var(--accent); transform: rotate(90deg); }
.next-card h3 { font-size: clamp(20px, 1.6vw, 26px); letter-spacing: -0.02em; }
.next-card p { font-size: 15px; color: var(--muted); }
.next-link { margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; }
@media (min-width: 1100px) { .game-grid[data-rows-full~="3"] .next-card { grid-column: 1 / -1; } }
@media (min-width: 760px) and (max-width: 1099px) { .game-grid[data-rows-full~="2"] .next-card { grid-column: 1 / -1; } }
/* As a wide strip: plus, text and link sit in one row */
@container (min-width: 620px) {
  .next-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(18px, 2vw, 32px); }
  .next-plus { margin: 0; }
  .next-text { gap: 4px; }
  .next-link {
    margin: 0; height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-2);
    transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
  }
  .next-card:hover .next-link { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.32); }
}
.next-link svg { transition: transform 0.5s var(--ease-out); }
.next-card:hover .next-link svg { transform: translateX(3px); }

/* Features --------------------------------------------------------------- */
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 24px); }
@media (max-width: 980px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: minmax(0, 1fr); } }
/* Shared card surface: faint top light + inner highlight, so cards read as a raised layer */
.feature, .step, .game-card:not(.next-card) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 50%), #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 60px -30px rgba(0, 0, 0, 0.9);
}
.feature {
  padding: clamp(26px, 2.2vw, 40px) clamp(24px, 2vw, 36px); border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.feature:hover { border-color: rgba(169, 150, 255, 0.45); }
/* Small, bright icon chips: white glyph on a lit purple tile, so they read at a glance */
.feature-icon {
  width: 38px; height: 38px; margin-bottom: 20px; border-radius: 11px;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(150deg, rgba(150, 125, 255, 0.6), rgba(111, 77, 255, 0.2) 75%);
  box-shadow:
    inset 0 0 0 1px rgba(200, 188, 255, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 6px 22px -6px rgba(var(--accent-glow), 0.75);
}
.feature-icon svg { width: 18px; height: 18px; }
@media (max-width: 560px) {
  .feature-icon { width: 34px; height: 34px; margin-bottom: 16px; border-radius: 10px; }
  .feature-icon svg { width: 17px; height: 17px; }
}
.feature h3 { font-size: clamp(19px, 1.45vw, 24px); letter-spacing: -0.02em; margin-bottom: 10px; }
.feature p { font-size: clamp(15px, 1.05vw, 17px); color: var(--muted); }

/* Steps ------------------------------------------------------------------ */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 24px); }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.step { padding: clamp(26px, 2.2vw, 40px) clamp(24px, 2vw, 36px); border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.14); }
.step-num {
  display: inline-block; margin-bottom: clamp(32px, 3vw, 56px);
  font: 600 clamp(36px, 3.2vw, 56px)/1 var(--font); letter-spacing: -0.04em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step h3 { font-size: clamp(19px, 1.45vw, 24px); letter-spacing: -0.02em; margin-bottom: 10px; }
.step p { font-size: clamp(15px, 1.05vw, 17px); color: var(--muted); }

/* Sell ------------------------------------------------------------------- */
.sell {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 4.5vw, 88px); align-items: start;
  padding: clamp(26px, 3.6vw, 64px); border-radius: clamp(22px, 2vw, 32px); border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(var(--accent-glow), 0.2), transparent 65%),
    var(--surface);
}
/* A thin light slowly travels around the panel's edge */
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.sell { position: relative; isolation: isolate; }
.sell::before {
  content: ""; position: absolute; inset: -1px; z-index: 1; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--beam), transparent 0deg 270deg, rgba(var(--accent-glow), 0.55) 325deg, rgba(235, 228, 255, 0.95) 352deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: beam 11s linear infinite;
}
@keyframes beam { to { --beam: 360deg; } }
.is-paused .sell::before { animation-play-state: paused; }
/* The panel is a compact contact card, not another hero: smaller heading and copy */
.sell h2 { font-size: clamp(30px, 3.4vw, 54px); }
.sell .lead { margin-top: clamp(12px, 1.1vw, 18px); font-size: clamp(15px, 1.1vw, 18px); }
.email-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: clamp(20px, 1.8vw, 28px); }
.copy-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 12px;
  border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04);
  color: var(--muted); font: 500 13px/1 var(--font); cursor: pointer;
  transition: color 0.5s var(--ease-out), border-color 0.5s var(--ease-out), background-color 0.5s var(--ease-out),
    box-shadow 0.6s var(--ease-out), transform 0.3s var(--ease-out);
}
.copy-btn:hover { color: #fff; border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.07); }
.copy-btn:active { transform: scale(0.94); }
.copy-btn.copied {
  color: #d4c8ff; border-color: rgba(169, 150, 255, 0.55); background: rgba(var(--accent-glow), 0.16);
  box-shadow: 0 0 0 4px rgba(var(--accent-glow), 0.12);
}
.copy-btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
}
.copy-btn.copied::after { transform: translateX(120%); transition: transform 0.9s var(--ease-out); }
.copy-icons { position: relative; flex: none; width: 15px; height: 15px; }
.copy-icons svg {
  position: absolute; inset: 0;
  transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-out), filter 0.4s var(--ease-out);
}
.ic-check { opacity: 0; transform: scale(0.3) rotate(-45deg); filter: blur(3px); }
.ic-check path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.55s var(--ease-out) 0.12s; }
.copy-btn.copied .ic-copy { opacity: 0; transform: scale(0.3) rotate(45deg); filter: blur(3px); }
.copy-btn.copied .ic-check { opacity: 1; transform: none; filter: none; }
.copy-btn.copied .ic-check path { stroke-dashoffset: 0; }
.copy-labels { display: inline-grid; height: 1.25em; line-height: 1.25em; overflow: hidden; }
.copy-labels > span {
  grid-area: 1 / 1;
  transition: transform 0.6s var(--ease-out), opacity 0.4s var(--ease-out), filter 0.4s var(--ease-out);
}
.lbl-done { transform: translateY(110%); opacity: 0; filter: blur(2px); }
.copy-btn.copied .lbl-copy { transform: translateY(-110%); opacity: 0; filter: blur(2px); }
.copy-btn.copied .lbl-done { transform: none; opacity: 1; filter: none; }
.email-link {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 clamp(16px, 1.15vw, 19px)/1.2 var(--font); color: var(--text);
  border-bottom: 1px solid rgba(169, 150, 255, 0.5); padding-bottom: 4px;
  transition: border-color 0.5s var(--ease-out);
  overflow-wrap: anywhere;
}
.email-link:hover { border-color: #fff; }
.email-link svg { width: 18px; height: 18px; color: var(--accent-soft); flex: none; }

.sell-form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 13.5px; font-weight: 500; color: #d9d9e0; }
.optional { color: var(--dim); font-weight: 400; }
.field input, .field textarea {
  width: 100%; padding: 0 14px; height: 44px;
  border-radius: 10px; border: 1px solid var(--line-2);
  background: rgba(0, 0, 0, 0.6); color: var(--text);
  font: 400 15px/1.4 var(--font);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { height: auto; min-height: 92px; padding: 11px 14px; resize: vertical; }
.sell-form .btn { height: 46px; margin-top: 4px; font-size: 15px; }
.field input::placeholder, .field textarea::placeholder { color: #5d5d6a; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-glow), 0.25);
}
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field-error { font-size: 13px; color: var(--danger); }
.form-note { font-size: 13px; color: var(--dim); text-align: center; }

/* Stacked (tablet and phone): a comfortable card width instead of edge to edge */
@media (max-width: 900px) { .sell { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; } }
@media (max-width: 520px) {
  .sell { padding: 26px 18px; }
  .form-row { grid-template-columns: 1fr; }
}
/* Phones: 16px text stops iOS from zooming into a field when it's tapped */
@media (max-width: 600px) { .field input, .field textarea { font-size: 16px; } }

/* Footer ----------------------------------------------------------------- */
.footer { margin-top: clamp(96px, 11vw, 200px); padding: clamp(36px, 3vw, 56px) 0 0; border-top: 1px solid var(--line); overflow: hidden; }
.footer-word {
  margin: 48px 0 0; text-align: center; white-space: nowrap; user-select: none;
  font: 700 clamp(56px, 15.2vw, 236px)/0.78 var(--font); letter-spacing: -0.065em;
}
.footer-word span {
  display: inline-block; padding-bottom: 0.02em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 10%, rgba(255, 255, 255, 0) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* The word rises from below. The offset sits on the inner span, so the reveal
   trigger sees the word where it really is (it's the last thing on the page). */
.js .footer-word.reveal { filter: none; transform: none; transition: opacity 1.4s var(--ease-out); }
.js .footer-word.reveal span { transform: translate3d(0, 55%, 0); transition: transform 1.8s var(--ease-out); }
.js .footer-word.reveal.in span { transform: none; }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.footer-top .brand { margin-right: 0; font-size: 18px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 15px; color: #c9c9d2; }
.footer-links a:hover { color: #fff; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--dim);
}
.to-top { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); transition: color 0.3s; }
.to-top:hover { color: #fff; }
.to-top svg { transition: transform 0.5s var(--ease-out); }
.to-top:hover svg { transform: translateY(-3px); }

/* 404 -------------------------------------------------------------------- */
.lost {
  min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: 40px 16px; text-align: center;
}
.lost h1 { font-size: clamp(40px, 7vw, 72px); }
.lost p { color: var(--muted); max-width: 420px; }

/* Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .intro { display: none; }
  .js .nav { opacity: 1; transform: none; }
  .js [data-words] .w, .js .reveal, .js [data-words] { opacity: 1; filter: none; transform: none; transition: none; }
  .ticker-track, .grad { animation: none; }
  .game-shot, .game-card:hover .game-shot { transition: opacity 0.3s; transform: none; }
  .mobile-menu a { opacity: 1; filter: none; transform: none; transition: none; }
  .wall-plane { animation: none; }
  .js .hero-wall { opacity: 1; }
  .section-head::before { transform: none; transition: none; }
  .stat:hover, .feature:hover, .step:hover, .game-card:hover { translate: none; }
  .js .footer-word.reveal span { transform: none; }
  .sell::before, .hero-light { display: none; }
}