:root {
  color-scheme: dark;
  --background: #090909;
  --surface: #171717;
  --surface-2: #202020;
  --surface-3: #262626;
  --foreground: #fafafa;
  --muted: #a3a3a3;
  --muted-2: #808080;
  --border: rgba(255, 255, 255, 0.105);
  --border-strong: rgba(255, 255, 255, 0.18);
  --blue: #4ca9ff;
  --blue-soft: rgba(45, 146, 255, 0.16);
  --green: #51b84c;
  --gold: #ffb92e;
  --purple: #a855f7;
  --red: #ef5350;
  --cyan: #2dd4bf;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.44);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--background); }
body { margin: 0; min-width: 320px; color: var(--foreground); background: var(--background); font-family: var(--font-sans); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none; background: radial-gradient(circle at 12% 8%, rgba(31, 104, 255, 0.09), transparent 25%), radial-gradient(circle at 88% 48%, rgba(49, 151, 255, 0.055), transparent 24%), #090909; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { color: inherit; font: inherit; }
button { cursor: pointer; }
p, h1, h2, h3 { margin-top: 0; }
::selection { color: #111; background: #f5f5f5; }
:focus-visible { outline: 2px solid #d4d4d4; outline-offset: 4px; }

.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: fixed; top: 12px; left: 12px; z-index: 1000; padding: 11px 15px; border-radius: 8px; color: #111; background: #fff; font-weight: 700; transform: translateY(-160%); transition: transform 180ms ease; }
.skip-link:focus { transform: translateY(0); }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.section { position: relative; padding: 124px 0; }
.section-heading { margin-bottom: 58px; }
.section-heading h2, .system-copy h2, .referral-copy h2, .faq-heading h2, .final-cta h2 { margin-bottom: 20px; font-size: clamp(2.35rem, 5vw, 4.8rem); line-height: 0.98; letter-spacing: -0.06em; }
.section-heading > p, .system-copy > p, .referral-copy > p, .faq-heading > p { color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.section-heading--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.65fr); align-items: end; gap: 70px; }
.section-heading--split > p { max-width: 570px; margin: 0 0 4px auto; }
.section-heading--center { max-width: 760px; margin-inline: auto; text-align: center; }
.section-heading--center > p:last-child { max-width: 670px; margin-inline: auto; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: #c6c6c6; font: 700 0.7rem/1.2 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.eyebrow > span { width: 7px; height: 7px; border-radius: 50%; background: #4ca9ff; box-shadow: 0 0 18px rgba(76, 169, 255, 0.9); }

.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; border: 1px solid var(--border); border-radius: 11px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 120ms var(--ease-out), box-shadow 180ms ease; }
.button--primary { border-color: #f5f5f5; color: #151515; background: #f5f5f5; box-shadow: 0 12px 30px rgba(255, 255, 255, 0.08); }
.button--secondary { color: #f5f5f5; background: #171717; }
.button--compact { min-height: 42px; padding-inline: 17px; font-size: 0.86rem; }
.button:active { transform: scale(0.975); }
.text-link { display: inline-flex; align-items: center; gap: 9px; padding-bottom: 5px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); font-weight: 700; }
.text-link span, .games-note a span { transition: transform 180ms var(--ease-out); }

/* Header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; border-bottom: 1px solid transparent; transition: border-color 220ms ease, background-color 220ms ease, backdrop-filter 220ms ease; }
.site-header.is-scrolled { border-color: var(--border); background: rgba(9, 9, 9, 0.82); backdrop-filter: blur(18px) saturate(120%); }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 84px; gap: 30px; }
.brand { display: inline-flex; width: max-content; align-items: center; gap: 12px; }
.brand img { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 11px; object-fit: cover; box-shadow: 0 0 26px rgba(39, 134, 255, 0.12); }
.brand span { display: grid; gap: 2px; }
.brand strong { font-size: 1rem; line-height: 1; letter-spacing: -0.025em; }
.brand small { color: var(--muted-2); font: 600 0.61rem/1.2 var(--font-mono); letter-spacing: 0.09em; text-transform: uppercase; }
.brand--header strong { font-size: 1.08rem; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a { position: relative; padding: 9px 0; color: #b8b8b8; font-size: 0.88rem; font-weight: 600; transition: color 160ms ease; }
.site-nav a::after { content: ""; position: absolute; right: 0; bottom: 3px; left: 0; height: 1px; background: #f5f5f5; transform: scaleX(0); transform-origin: right; transition: transform 200ms var(--ease-out); }
.header-cta { justify-self: end; }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: #171717; }
.menu-toggle > span:not(.sr-only) { display: block; width: 100%; height: 1px; margin: 4px 0; background: #f5f5f5; transition: transform 180ms ease, opacity 180ms ease; }

/* Hero */
.hero { position: relative; min-height: 900px; padding: 154px 0 0; overflow: hidden; border-bottom: 1px solid var(--border); }
.hero-grid, .roadmap-grid, .final-cta-grid, .error-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.21; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 62px 62px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.hero-grid { transform: perspective(700px) rotateX(62deg) translateY(45%); transform-origin: bottom; opacity: 0.28; }
.hero-glow { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(3px); }
.hero-glow--one { top: -220px; right: 5%; width: 630px; height: 630px; background: radial-gradient(circle, rgba(35, 121, 255, 0.14), transparent 66%); }
.hero-glow--two { bottom: -330px; left: -260px; width: 680px; height: 680px; background: radial-gradient(circle, rgba(45, 212, 191, 0.055), transparent 66%); }
.hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(480px, 1.14fr); align-items: center; gap: 50px; }
.hero-copy { position: relative; z-index: 3; padding: 30px 0 44px; }
.hero-copy h1 { max-width: 740px; margin-bottom: 28px; font-size: clamp(3.7rem, 7vw, 7.4rem); line-height: 0.88; letter-spacing: -0.078em; }
.hero-copy h1 em { color: transparent; background: linear-gradient(118deg, #fafafa 5%, #8fc9ff 50%, #4ca9ff 92%); -webkit-background-clip: text; background-clip: text; font-style: normal; }
.hero-deck { max-width: 650px; margin-bottom: 31px; color: #b4b4b4; font-size: clamp(1.03rem, 1.7vw, 1.25rem); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 26px; margin: 37px 0 27px; padding: 0; list-style: none; }
.hero-proof li { display: flex; align-items: center; gap: 10px; }
.hero-proof i { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid var(--border); border-radius: 9px; color: #f5f5f5; background: rgba(23, 23, 23, 0.8); font: 700 0.78rem/1 var(--font-mono); font-style: normal; }
.hero-proof span { color: #8b8b8b; font: 600 0.7rem/1.3 var(--font-mono); letter-spacing: 0.03em; text-transform: uppercase; }
.hero-note { display: flex; align-items: center; gap: 9px; margin-bottom: 0; color: #797979; font-size: 0.78rem; line-height: 1.5; }
.hero-note span { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid rgba(81, 184, 76, 0.25); border-radius: 50%; color: #72d86e; background: rgba(81, 184, 76, 0.08); font-size: 0.65rem; }
.hero-stage { position: relative; display: grid; min-height: 585px; place-items: center; overflow: hidden; isolation: isolate; }
.hero-stage--architecture::before { content: ""; position: absolute; z-index: 0; width: 48%; aspect-ratio: 1; border: 1px solid rgba(76, 169, 255, 0.06); border-radius: 50%; background: radial-gradient(circle, rgba(76,169,255,.045), transparent 66%); box-shadow: 0 0 90px rgba(37,139,255,.035); animation: architectureHalo 5.5s ease-in-out infinite; }
.hero-architecture { position: relative; z-index: 1; width: 118%; height: 100%; max-width: none; overflow: visible; color: #252a31; filter: drop-shadow(0 22px 50px rgba(0,0,0,.48)); }
.architecture-paths { stroke-dashoffset: 100; animation: architectureDraw 1.2s var(--ease-out) forwards; }
.architecture-pulse { opacity: .95; offset-anchor: 8px 0; offset-rotate: 0deg; }
.architecture-core { animation: architectureCore 4.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.architecture-core-shell { fill: #17191d; }
.architecture-core-edge { stroke: rgba(139, 199, 255, .24); stroke-width: .35; }
.architecture-core-label { fill: #edf7ff; font: 800 7.2px/1 var(--font-mono); letter-spacing: .09em; paint-order: stroke fill; stroke: rgba(107,183,255,.34); stroke-width: .18px; filter: drop-shadow(0 0 .7px rgba(255,255,255,.72)) drop-shadow(0 0 2.1px rgba(76,169,255,.62)); }
.architecture-core-caption { fill: #6f7783; font: 800 2.15px/1 var(--font-mono); letter-spacing: .19em; }
.architecture-node { animation: architectureNode 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.architecture-line-1 { offset-path: path("M 10 20 h 79.5 q 5 0 5 5 v 30"); animation: architecturePath 5s 1s cubic-bezier(.75,-.01,0,.99) infinite; }
.architecture-line-2 { offset-path: path("M 180 10 h -69.7 q -5 0 -5 5 v 30"); animation: architecturePath 4.5s 2.8s cubic-bezier(.75,-.01,0,.99) infinite; }
.architecture-line-3 { offset-path: path("M 130 20 v 21.8 q 0 5 -5 5 h -15"); animation: architecturePath 5.8s 1.9s cubic-bezier(.75,-.01,0,.99) infinite; }
.architecture-line-4 { offset-path: path("M 170 80 v -21.8 q 0 -5 -5 -5 h -55"); animation: architecturePath 4.8s 1.2s cubic-bezier(.75,-.01,0,.99) infinite; }
.architecture-line-5 { offset-path: path("M 135 65 h 15 q 5 0 5 5 v 10 q 0 5 -5 5 h -39.8 q -5 0 -5 -5 v -20"); animation: architecturePath 6.2s 3.6s cubic-bezier(.75,-.01,0,.99) infinite; }
.architecture-line-6 { offset-path: path("M 94.8 95 v -35"); animation: architecturePath 5.4s 2.4s cubic-bezier(.75,-.01,0,.99) infinite; }
.architecture-line-7 { offset-path: path("M 88 88 v -15 q 0 -5 -5 -5 h -10 q -5 0 -5 -5 v -5 q 0 -5 5 -5 h 17"); animation: architecturePath 5.9s 1.7s cubic-bezier(.75,-.01,0,.99) infinite; }
.architecture-line-8 { offset-path: path("M 30 30 h 25 q 5 0 5 5 v 6.5 q 0 5 5 5 h 25"); animation: architecturePath 4.6s 3.1s cubic-bezier(.75,-.01,0,.99) infinite; }
.hero-strip { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 68px; min-height: 82px; border-top: 1px solid var(--border); color: #6e6e6e; font: 700 0.64rem/1 var(--font-mono); letter-spacing: 0.12em; }
.hero-strip i { width: 3px; height: 3px; border-radius: 50%; background: #464646; }

/* Reusable icons */
.asset-icon { --mask: none; display: inline-block; width: 34px; height: 34px; color: currentColor; background: currentColor; -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; }
.asset-icon--robot { --mask: url("/assets/ui/banner/robot.svg"); }
.asset-icon--gamepad { --mask: url("/assets/ui/banner/gamepad.svg"); }
.asset-icon--cubes { --mask: url("/assets/ui/banner/cubes-stacked.svg"); }

/* Value cards */
.section--intro { background: linear-gradient(180deg, #090909, #0b0b0b); }
.value-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.value-card { position: relative; grid-column: span 3; min-height: 330px; padding: 30px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(255,255,255,.025), transparent 42%), #171717; box-shadow: inset 0 1px rgba(255,255,255,.035); }
.value-card::after { content: ""; position: absolute; right: -80px; bottom: -90px; width: 190px; height: 190px; border: 1px solid rgba(255,255,255,.04); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255,255,255,.016), 0 0 0 56px rgba(255,255,255,.009); }
.value-card--wide { grid-column: span 6; }
.value-card h3 { position: relative; z-index: 2; margin: 63px 0 13px; font-size: 1.35rem; letter-spacing: -0.035em; }
.value-card p { position: relative; z-index: 2; max-width: 410px; margin-bottom: 0; color: var(--muted); line-height: 1.65; }
.card-index { position: absolute; top: 25px; right: 27px; color: #575757; font: 700 0.62rem/1 var(--font-mono); letter-spacing: 0.11em; }
.feature-icon { position: relative; z-index: 2; display: grid; width: 66px; height: 66px; place-items: center; border: 1px solid currentColor; border-radius: 15px; background: rgba(255,255,255,.025); }
.feature-icon--game { color: #ffca3d; box-shadow: inset 0 0 28px rgba(255, 185, 46, .08); }
.feature-icon--agent { color: #43d3c7; box-shadow: inset 0 0 28px rgba(45, 212, 191, .08); }
.feature-icon--network { color: #59adff; box-shadow: inset 0 0 28px rgba(76, 169, 255, .08); }
.feature-icon .asset-icon { width: 31px; height: 31px; }
.tag-list { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 7px; margin: 26px 0 0; padding: 0; list-style: none; }
.tag-list li { padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; color: #9b9b9b; background: rgba(0,0,0,.14); font: 600 0.6rem/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.value-card--signal { grid-column: span 12; display: grid; grid-template-columns: minmax(250px, .8fr) 1.2fr; min-height: 280px; align-items: center; gap: 55px; }
.value-card--signal h3 { margin-top: 0; }
.signal-visual { position: relative; display: grid; width: min(100%, 390px); height: 180px; place-items: center; }
.signal-visual::before, .signal-visual::after, .signal-visual i { content: ""; position: absolute; border: 1px solid rgba(76,169,255,.15); border-radius: 50%; }
.signal-visual::before { width: 170px; height: 170px; }
.signal-visual::after { width: 118px; height: 118px; border-style: dashed; animation: spin 18s linear infinite; }
.signal-visual i:nth-child(1) { width: 230px; height: 96px; border-radius: 50%; transform: rotate(23deg); }
.signal-visual i:nth-child(2) { width: 230px; height: 96px; border-radius: 50%; transform: rotate(-23deg); }
.signal-visual i:nth-child(3) { width: 8px; height: 8px; border: 0; background: #4ca9ff; box-shadow: 0 0 18px #4ca9ff; transform: translate(84px, -54px); }
.signal-visual b { display: grid; z-index: 2; width: 74px; height: 74px; place-items: center; border: 1px solid rgba(76,169,255,.32); border-radius: 18px; background: #101a27; box-shadow: 0 0 35px rgba(76,169,255,.15); font: 800 1.1rem/1 var(--font-mono); animation: signalBreathe 3.4s ease-in-out infinite; }

/* Games */
.games-section { overflow: hidden; border-block: 1px solid var(--border); background: #080808; }
.games-backdrop { position: absolute; top: -180px; left: 50%; width: 1000px; height: 520px; pointer-events: none; background: radial-gradient(ellipse, rgba(74, 141, 255, 0.09), transparent 68%); transform: translateX(-50%); }
.games-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.game-card { --game: #fff; position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 20px; min-height: 208px; padding: 27px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #171717; background: linear-gradient(135deg, color-mix(in srgb, var(--game) 8%, transparent), transparent 50%), #171717; transition: transform 260ms var(--ease-out), border-color 260ms ease, box-shadow 260ms ease; }
.game-card::before { content: ""; position: absolute; inset: auto -40px -90px auto; width: 180px; height: 180px; border: 1px solid color-mix(in srgb, var(--game) 15%, transparent); border-radius: 50%; }
.game-card--stack { --game: #51b84c; }
.game-card--2048 { --game: #a855f7; }
.game-card--ninja { --game: #ef5350; }
.game-card--flappy { --game: #55baff; }
.game-card--chappy { --game: #2dd4bf; }
.game-card--runner { --game: #ffb92e; }
.game-number { position: absolute; top: 18px; right: 20px; color: #555; font: 700 .59rem/1 var(--font-mono); letter-spacing: .1em; }
.game-logo { display: grid; width: 80px; height: 80px; place-items: center; border: 1px solid var(--game); border-radius: 19px; color: var(--game); background: #202020; background: color-mix(in srgb, var(--game) 9%, #171717); box-shadow: inset 0 0 32px color-mix(in srgb, var(--game) 10%, transparent); }
.game-logo svg { width: 47px; height: 47px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.game-logo svg .fill-shape { fill: currentColor; stroke: none; }
.game-logo svg .fill-shape--alt { opacity: .75; }
.game-logo svg .eye-shape { fill: #f5f5f5; stroke: none; }
.game-logo svg .pupil-shape, .game-logo svg .eye-shape--dark { fill: #252525; stroke: none; }
.game-logo svg .snout-shape { fill: rgba(255,255,255,.36); stroke: none; }
.game-card h3 { margin-bottom: 7px; font-size: 1.24rem; letter-spacing: -.035em; }
.game-card p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.game-mode { position: absolute; right: 20px; bottom: 18px; color: color-mix(in srgb, var(--game) 75%, #a3a3a3); font: 700 .54rem/1 var(--font-mono); letter-spacing: .1em; }
.games-note { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 17px; margin-top: 18px; padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--radius); background: #131313; }
.note-mark { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; color: #d4d4d4; font: 700 .8rem/1 var(--font-mono); }
.games-note p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.games-note p strong { color: #f5f5f5; }
.games-note a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: .84rem; font-weight: 700; }

/* System */
.system-section { background: linear-gradient(180deg, #0a0a0a, #090909); }
.system-layout { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 82px; }
.system-copy > p { max-width: 570px; }
.check-list { display: grid; gap: 0; margin: 36px 0 32px; padding: 0; list-style: none; }
.check-list li { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--border); }
.check-list li:last-child { border-bottom: 1px solid var(--border); }
.check-list li > span { display: grid; width: 33px; height: 33px; place-items: center; border: 1px solid var(--border); border-radius: 8px; color: #8e8e8e; font: 700 .58rem/1 var(--font-mono); }
.check-list div { display: grid; gap: 5px; }
.check-list strong { font-size: .93rem; }
.check-list small { color: var(--muted); font-size: .79rem; line-height: 1.55; }
.command-card { position: relative; min-height: 575px; padding: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: radial-gradient(circle at 70% 10%, rgba(76,169,255,.09), transparent 28%), #151515; box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.05); }
.command-card::before { content: ""; position: absolute; inset: 0; opacity: .15; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(black, transparent 90%); }
.command-card > header, .command-card > footer { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; color: #797979; font: 700 .6rem/1 var(--font-mono); letter-spacing: .1em; }
.command-card > header span, .command-card > footer span:first-child { display: flex; align-items: center; gap: 7px; }
.command-card > header i, .command-card > footer i { width: 7px; height: 7px; border-radius: 50%; background: #5bc657; box-shadow: 0 0 12px rgba(81,184,76,.7); }
.command-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; grid-template-rows: 1fr .62fr; gap: 13px; margin: 22px 0; }
.command-grid article { border: 1px solid var(--border); border-radius: 14px; background: rgba(17,17,17,.82); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.command-gauge { grid-row: 1 / span 2; display: grid; align-content: center; justify-items: center; gap: 29px; padding: 28px; text-align: center; }
.gauge { position: relative; display: grid; width: 205px; height: 205px; place-items: center; border-radius: 50%; background: conic-gradient(#f5f5f5 0 68%, #292929 68% 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.gauge::before { content: ""; position: absolute; inset: 13px; border-radius: inherit; background: #141414; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 50px rgba(76,169,255,.04); }
.gauge::after { content: ""; position: absolute; inset: 36px; border: 1px solid var(--border); border-radius: inherit; }
.gauge span { position: absolute; z-index: 2; bottom: 52px; color: #818181; font: 700 .55rem/1 var(--font-mono); letter-spacing: .1em; }
.gauge strong { position: relative; z-index: 2; margin-top: -10px; font: 700 2.6rem/1 var(--font-sans); letter-spacing: -.08em; }
.command-gauge > div:last-child { display: grid; gap: 6px; }
.command-gauge small, .command-agents > small, .command-bars > small { color: #696969; font: 700 .55rem/1 var(--font-mono); letter-spacing: .1em; }
.command-gauge > div:last-child strong { font-size: 1rem; }
.command-gauge > div:last-child span { color: var(--muted); font-size: .7rem; }
.command-agents, .command-bars { padding: 20px; }
.node-map { position: relative; display: grid; height: 165px; place-items: center; }
.node-map::before, .node-map::after { content: ""; position: absolute; width: 70%; height: 1px; background: rgba(255,255,255,.15); }
.node-map::after { transform: rotate(90deg); }
.node-map b { display: grid; z-index: 2; width: 67px; height: 67px; place-items: center; border: 1px solid rgba(76,169,255,.32); border-radius: 16px; background: #17202c; box-shadow: 0 0 28px rgba(76,169,255,.1); font: 700 1rem/1 var(--font-mono); }
.node-map i { position: absolute; z-index: 2; width: 11px; height: 11px; border: 2px solid #676767; border-radius: 50%; background: #171717; }
.node-map i:nth-child(1) { top: 15px; }.node-map i:nth-child(2) { right: 13px; }.node-map i:nth-child(3) { bottom: 15px; }.node-map i:nth-child(4) { left: 13px; }
.command-bars > div { display: flex; height: 88px; align-items: end; gap: 7px; margin-top: 15px; }
.command-bars i { flex: 1; height: 33%; border-radius: 4px 4px 0 0; background: #4a4a4a; }
.command-bars i:nth-child(2) { height: 55%; }.command-bars i:nth-child(3) { height: 43%; }.command-bars i:nth-child(4) { height: 78%; background: #f3f3f3; }.command-bars i:nth-child(5) { height: 62%; }.command-bars i:nth-child(6) { height: 88%; background: #d4d4d4; }
.command-card > footer { padding-top: 15px; border-top: 1px solid var(--border); }

/* Referral */
.referral-section { padding-top: 36px; }
.referral-panel { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; padding: 60px; overflow: hidden; border: 1px solid var(--border); border-radius: 24px; background: radial-gradient(circle at 80% 50%, rgba(45,212,191,.08), transparent 34%), #151515; }
.referral-panel::after { content: ""; position: absolute; top: -180px; right: -180px; width: 420px; height: 420px; border: 1px solid rgba(45,212,191,.08); border-radius: 50%; box-shadow: 0 0 0 48px rgba(45,212,191,.018), 0 0 0 96px rgba(45,212,191,.01); }
.referral-copy { position: relative; z-index: 2; }
.referral-copy h2 { font-size: clamp(2.25rem, 4.4vw, 4.2rem); }
.referral-copy > p { max-width: 510px; }
.referral-disclosure { padding-top: 20px; border-top: 1px solid var(--border); color: #787878 !important; font-size: .75rem !important; line-height: 1.6 !important; }
.referral-map { position: relative; z-index: 2; display: grid; gap: 13px; align-content: center; }
.referral-map article { position: relative; display: grid; grid-template-columns: 90px 105px 1fr; align-items: center; gap: 20px; min-height: 94px; padding: 19px 24px; border: 1px solid var(--border); border-radius: 14px; background: rgba(10,10,10,.5); }
.referral-map article:nth-child(2) { width: 88%; margin-left: 8%; }
.referral-map article:nth-child(3) { width: 76%; margin-left: 16%; }
.referral-map span { color: #797979; font: 700 .57rem/1 var(--font-mono); letter-spacing: .1em; }
.referral-map strong { font-size: 1.35rem; letter-spacing: -.04em; }
.referral-map small { color: #9a9a9a; font-size: .72rem; }
.referral-map i { position: absolute; bottom: -14px; left: 48px; width: 1px; height: 14px; background: var(--border-strong); }

/* Roadmap */
.roadmap-section { overflow: hidden; border-block: 1px solid var(--border); background: #080808; }
.roadmap-grid { opacity: .18; mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent); }
.roadmap { position: relative; display: grid; gap: 0; max-width: 1000px; margin: 0 auto; }
.roadmap::before { content: ""; position: absolute; top: 30px; bottom: 90px; left: 133px; width: 1px; background: linear-gradient(#62c15d, #646464 52%, #a855f7 78%, transparent); }
.roadmap-item { display: grid; grid-template-columns: 100px 66px minmax(0, 1fr); gap: 0; min-height: 238px; }
.roadmap-date { display: grid; align-content: start; gap: 4px; padding-top: 27px; }
.roadmap-date strong { font: 700 1.02rem/1 var(--font-mono); letter-spacing: -.03em; }
.roadmap-date span { color: #666; font: 700 .58rem/1 var(--font-mono); letter-spacing: .1em; }
.roadmap-marker { position: relative; display: flex; justify-content: center; padding-top: 27px; }
.roadmap-marker i { position: relative; z-index: 2; display: block; width: 15px; height: 15px; border: 3px solid #555; border-radius: 50%; background: #090909; box-shadow: 0 0 0 6px #090909; }
.roadmap-item--live .roadmap-marker i { border-color: #68cb63; box-shadow: 0 0 0 6px #090909, 0 0 18px rgba(81,184,76,.48); }
.roadmap-item--building .roadmap-marker i { border-color: #f1f1f1; }
.roadmap-item--research .roadmap-marker i { border-color: #4ca9ff; }
.roadmap-item--conditional .roadmap-marker i { border-color: #a855f7; }
.roadmap-card { margin-bottom: 28px; padding: 27px 30px 30px; border: 1px solid var(--border); border-radius: 16px; background: rgba(23,23,23,.86); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.roadmap-card h3 { margin: 13px 0 18px; font-size: 1.45rem; letter-spacing: -.04em; }
.roadmap-card ul { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 30px; margin: 0; padding: 0; list-style: none; }
.roadmap-card li { position: relative; padding-left: 15px; color: #9d9d9d; font-size: .78rem; line-height: 1.5; }
.roadmap-card li::before { content: ""; position: absolute; top: .58em; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #555; }
.status { display: inline-flex; min-height: 24px; align-items: center; padding: 0 8px; border: 1px solid #555; border-radius: 6px; color: #a0a0a0; font: 700 .55rem/1 var(--font-mono); letter-spacing: .1em; }
.status--live { border-color: rgba(81,184,76,.38); color: #72d86e; background: rgba(81,184,76,.08); }
.status--building { border-color: rgba(255,255,255,.25); color: #eee; background: rgba(255,255,255,.05); }
.status--research { border-color: rgba(76,169,255,.4); color: #73bbff; background: rgba(76,169,255,.08); }
.status--conditional { border-color: rgba(168,85,247,.42); color: #c27dff; background: rgba(168,85,247,.08); }
.status--vision { border-color: rgba(255,185,46,.32); color: #e9bd58; background: rgba(255,185,46,.06); }

/* FAQ */
.faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; align-items: start; gap: 100px; }
.faq-heading { position: sticky; top: 130px; }
.faq-heading h2 { font-size: clamp(2.3rem, 4.4vw, 4.25rem); }
.faq-heading > p { margin-bottom: 28px; }
.faq-list { display: grid; gap: 10px; }
.faq-list details { border: 1px solid var(--border); border-radius: 14px; background: #151515; }
.faq-list summary { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 20px; padding: 0 23px; cursor: pointer; list-style: none; font-weight: 700; letter-spacing: -.02em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { position: relative; width: 24px; height: 24px; flex: 0 0 24px; border: 1px solid var(--border); border-radius: 7px; }
.faq-list summary span::before, .faq-list summary span::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 1px; background: #a7a7a7; transform: translate(-50%, -50%); transition: transform 180ms ease; }
.faq-list summary span::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-list details[open] summary span::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-list details p { margin: -6px 0 0; padding: 0 23px 24px; color: var(--muted); font-size: .89rem; line-height: 1.7; }

/* Legal summaries */
.legal-section { padding: 0 0 124px; }
.legal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.legal-grid article { scroll-margin-top: 110px; min-height: 250px; padding: 34px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #141414; }
.legal-grid .eyebrow { margin-bottom: 42px; }
.legal-grid h2 { margin-bottom: 15px; font-size: clamp(1.55rem, 2.7vw, 2.35rem); letter-spacing: -.045em; }
.legal-grid article > p:last-child { max-width: 580px; margin-bottom: 0; color: var(--muted); font-size: .83rem; line-height: 1.7; }

/* Final CTA and footer */
.final-cta { position: relative; padding: 132px 0; overflow: hidden; border-block: 1px solid var(--border); background: radial-gradient(circle at 50% 55%, rgba(44, 131, 255, 0.14), transparent 32%), #080808; }
.final-cta-grid { opacity: .26; mask-image: radial-gradient(circle, black, transparent 72%); }
.final-cta-inner { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; }
.final-cta-signal { position: relative; width: 96px; height: 96px; margin-bottom: 27px; isolation: isolate; }
.final-cta-signal::before { content: ""; position: absolute; inset: 18px; z-index: -1; border-radius: 50%; background: rgba(76,169,255,.17); filter: blur(17px); animation: finalSignalGlow 3.6s ease-in-out infinite; }
.final-cta-signal::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border: 2px solid #9ed4ff; border-radius: 50%; background: #f5f8ff; box-shadow: 0 0 10px rgba(158,212,255,.9), 0 0 30px rgba(76,169,255,.55); transform: translate(-50%, -50%); animation: finalSignalCore 2.4s ease-in-out infinite; }
.final-cta-orbit { position: absolute; border: 1px solid rgba(122,174,235,.18); border-radius: 50%; animation: finalSignalOrbit 6s linear infinite; }
.final-cta-orbit::after { content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #69b8ff; box-shadow: 0 0 12px rgba(105,184,255,.85); transform: translateX(-50%); }
.final-cta-orbit--outer { inset: 3px; border-top-color: rgba(105,184,255,.58); border-right-color: rgba(105,184,255,.32); animation-duration: 7.4s; }
.final-cta-orbit--middle { inset: 18px; border-bottom-color: rgba(45,212,191,.58); border-left-color: rgba(45,212,191,.3); animation-direction: reverse; animation-duration: 5.8s; }
.final-cta-orbit--middle::after { background: #5eead4; box-shadow: 0 0 12px rgba(94,234,212,.78); }
.final-cta-orbit--inner { inset: 32px; border-top-color: rgba(255,255,255,.5); animation-duration: 4.2s; }
.final-cta-orbit--inner::after { width: 4px; height: 4px; top: -2px; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.72); }
.final-cta .eyebrow { margin-bottom: 20px; }
.final-cta h2 { max-width: 840px; }
.final-cta-inner > p:not(.eyebrow) { max-width: 610px; margin-bottom: 30px; color: var(--muted); font-size: 1.02rem; line-height: 1.65; }
.hero-actions--center { justify-content: center; }
.final-cta-inner > small { margin-top: 22px; color: #858585; font-size: .7rem; }
.site-footer { padding: 55px 0 25px; background: #090909; }
.footer-main { display: grid; grid-template-columns: .75fr 1.3fr .8fr; align-items: start; gap: 70px; padding-bottom: 43px; }
.brand--footer img { width: 40px; height: 40px; }
.footer-main > p { max-width: 560px; margin: 0; color: #858585; font-size: .73rem; line-height: 1.7; }
.footer-main nav { display: grid; justify-content: end; gap: 10px; font-size: .75rem; font-weight: 600; }
.footer-main nav a { color: #8b8b8b; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 22px; border-top: 1px solid var(--border); color: #7d7d7d; font: 700 .58rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }

/* 404 */
.error-page { min-height: 100svh; }
.error-main { position: relative; display: grid; min-height: 100svh; place-items: center; overflow: hidden; padding: 30px; }
.error-grid { opacity: .28; mask-image: radial-gradient(circle, black, transparent 72%); }
.error-card { position: relative; z-index: 2; display: grid; width: min(680px, 100%); justify-items: center; padding: 64px; border: 1px solid var(--border); border-radius: 24px; background: radial-gradient(circle at 50% 0, rgba(76,169,255,.1), transparent 42%), #151515; box-shadow: var(--shadow); text-align: center; }
.error-card > img { width: 88px; height: 88px; margin-bottom: 25px; border: 1px solid rgba(76,169,255,.22); border-radius: 21px; object-fit: cover; }
.error-card h1 { margin-bottom: 20px; font-size: clamp(2.4rem, 6vw, 4.7rem); line-height: .98; letter-spacing: -.06em; }
.error-card > p:not(.eyebrow) { max-width: 520px; margin-bottom: 30px; color: var(--muted); line-height: 1.7; }

/* Motion */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 700ms ease, transform 800ms var(--ease-out); }
.js [data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
.js .games-grid [data-reveal]:nth-child(2), .js .value-grid [data-reveal]:nth-child(2) { transition-delay: 70ms; }
.js .games-grid [data-reveal]:nth-child(3), .js .value-grid [data-reveal]:nth-child(3) { transition-delay: 140ms; }
.js .games-grid [data-reveal]:nth-child(5) { transition-delay: 70ms; }
.js .games-grid [data-reveal]:nth-child(6) { transition-delay: 140ms; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes signalBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes architectureDraw { to { stroke-dashoffset: 0; } }
@keyframes architecturePath { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes architectureCore { 0%,100% { opacity: .94; transform: scale(1); } 50% { opacity: 1; transform: scale(1.025); } }
@keyframes architectureNode { 0%,100% { opacity: .72; transform: scale(1); } 50% { opacity: 1; transform: scale(1.22); } }
@keyframes architectureHalo { 0%,100% { opacity: .52; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes finalSignalOrbit { to { transform: rotate(360deg); } }
@keyframes finalSignalGlow { 0%,100% { opacity: .5; transform: scale(.86); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes finalSignalCore { 0%,100% { opacity: .72; transform: translate(-50%, -50%) scale(.82); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } }

@media (hover: hover) and (pointer: fine) {
  .hero-stage:hover .hero-architecture { filter: drop-shadow(0 26px 58px rgba(22, 102, 194, .13)); }
  .button--primary:hover { background: #fff; box-shadow: 0 14px 36px rgba(255,255,255,.12); transform: translateY(-2px); }
  .button--secondary:hover { border-color: var(--border-strong); background: #202020; transform: translateY(-2px); }
  .site-nav a:hover, .footer-main nav a:hover { color: #f5f5f5; }
  .site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
  .text-link:hover span, .games-note a:hover span { transform: translate(3px, -3px); }
  .game-card:hover { border-color: color-mix(in srgb, var(--game) 38%, transparent); box-shadow: 0 18px 48px color-mix(in srgb, var(--game) 8%, transparent); transform: translateY(-5px); }
  .faq-list summary:hover { background: rgba(255,255,255,.015); }
}

@media (max-width: 1050px) {
  .hero { min-height: auto; }
  .hero-layout { grid-template-columns: 1fr; gap: 10px; }
  .hero-copy { max-width: 820px; }
  .hero-stage { min-height: 610px; }
  .hero-strip { margin-top: 55px; }
  .value-card { grid-column: span 6; }
  .value-card--wide { grid-column: span 6; }
  .value-card--signal { grid-column: span 12; }
  .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-layout, .referral-panel { grid-template-columns: 1fr; }
  .system-copy { max-width: 760px; }
  .command-card { min-height: 560px; }
  .referral-panel { gap: 35px; }
  .faq-layout { gap: 55px; }
  .footer-main { grid-template-columns: 1fr 1.5fr; }
  .footer-main nav { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; }
}

@media (max-width: 820px) {
  .shell { width: min(100% - 34px, 720px); }
  .section { padding: 92px 0; }
  .header-inner { grid-template-columns: 1fr auto; min-height: 74px; }
  .menu-toggle { display: block; justify-self: end; }
  .header-cta { display: none; }
  .site-nav { position: absolute; top: 66px; right: 17px; left: 17px; display: grid; gap: 2px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: rgba(19,19,19,.97); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 180ms ease, transform 180ms var(--ease-out); }
  .site-nav a { padding: 13px 12px; border-radius: 8px; }
  .site-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  .section-heading--split { grid-template-columns: 1fr; gap: 20px; }
  .section-heading--split > p { margin-left: 0; }
  .hero { padding-top: 122px; }
  .hero-copy h1 { font-size: clamp(3.5rem, 13vw, 6.2rem); }
  .hero-stage { min-height: 520px; }
  .hero-strip { overflow: hidden; justify-content: flex-start; gap: 26px; white-space: nowrap; }
  .hero-strip span:nth-of-type(n+4), .hero-strip i:nth-of-type(n+4) { display: none; }
  .value-card--signal { grid-template-columns: 1fr; gap: 15px; }
  .value-card--signal .signal-visual { margin-inline: auto; }
  .games-note { grid-template-columns: auto 1fr; }
  .games-note a { grid-column: 2; justify-self: start; }
  .faq-layout { grid-template-columns: 1fr; }
  .faq-heading { position: static; }
  .legal-grid { grid-template-columns: 1fr; }
  .roadmap-card ul { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .shell { width: calc(100% - 28px); }
  .section { padding: 78px 0; }
  .section-heading { margin-bottom: 38px; }
  .section-heading h2, .system-copy h2, .referral-copy h2, .faq-heading h2, .final-cta h2 { font-size: clamp(2.25rem, 11vw, 3.35rem); }
  .brand img { width: 40px; height: 40px; }
  .brand small { display: none; }
  .hero { padding-top: 108px; }
  .hero-copy { padding-bottom: 20px; }
  .hero-copy h1 { margin-bottom: 23px; font-size: clamp(3.2rem, 15vw, 5.4rem); }
  .hero-deck { font-size: .98rem; }
  .hero-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .button { width: 100%; }
  .hero-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .hero-proof li:last-child { grid-column: 1 / -1; }
  .hero-note { align-items: flex-start; }
  .hero-stage { min-height: 420px; }
  .hero-architecture { width: 145%; }
  .hero-strip { min-height: 68px; margin-top: 38px; font-size: .56rem; }
  .hero-strip span:nth-of-type(n+3), .hero-strip i:nth-of-type(n+3) { display: none; }
  .value-grid, .games-grid { grid-template-columns: 1fr; }
  .value-card, .value-card--wide, .value-card--signal { grid-column: 1; }
  .value-card { min-height: 295px; padding: 25px; }
  .value-card--signal { min-height: 420px; }
  .signal-visual { height: 150px; transform: scale(.86); }
  .game-card { min-height: 178px; padding: 22px; gap: 15px; }
  .game-logo { width: 68px; height: 68px; border-radius: 16px; }
  .game-logo svg { width: 40px; height: 40px; }
  .game-mode { display: none; }
  .games-note { grid-template-columns: 1fr; padding: 20px; }
  .games-note a { grid-column: 1; }
  .command-card { min-height: auto; padding: 16px; }
  .command-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .command-gauge { grid-row: auto; min-height: 330px; }
  .gauge { width: 170px; height: 170px; }
  .gauge span { bottom: 42px; }
  .command-card > footer span:last-child { display: none; }
  .referral-section { padding-top: 0; }
  .referral-panel { padding: 32px 21px; border-radius: 19px; }
  .referral-map article, .referral-map article:nth-child(2), .referral-map article:nth-child(3) { grid-template-columns: 1fr auto; width: 100%; margin-left: 0; gap: 8px 15px; padding: 18px; }
  .referral-map article small { grid-column: 1 / -1; }
  .roadmap::before { left: 24px; }
  .roadmap-item { grid-template-columns: 49px minmax(0, 1fr); }
  .roadmap-date { grid-column: 2; grid-row: 1; display: flex; align-items: baseline; gap: 8px; padding: 0 0 12px 18px; }
  .roadmap-marker { grid-column: 1; grid-row: 1 / span 2; padding-top: 5px; }
  .roadmap-card { grid-column: 2; grid-row: 2; margin-bottom: 36px; padding: 24px 21px; }
  .faq-list summary { min-height: 70px; padding-inline: 18px; font-size: .9rem; }
  .faq-list details p { padding-inline: 18px; font-size: .82rem; }
  .final-cta { padding: 96px 0; }
  .legal-section { padding-bottom: 78px; }
  .final-cta-signal { width: 82px; height: 82px; }
  .footer-main { grid-template-columns: 1fr; gap: 27px; }
  .footer-main nav { grid-column: 1; grid-auto-flow: row; justify-content: start; }
  .error-main { padding: 14px; }
  .error-card { padding: 44px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .architecture-pulse { animation: none !important; opacity: .32; offset-distance: 55%; }
  .architecture-core, .architecture-node, .hero-stage--architecture::before { animation: none !important; }
}

@media (prefers-contrast: more) {
  :root { --muted: #c4c4c4; --muted-2: #aaa; --border: rgba(255,255,255,.25); --border-strong: rgba(255,255,255,.4); }
}