@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --bg: #060712;
  --bg-deep: #03040b;
  --panel: rgba(15, 17, 35, 0.78);
  --panel-solid: #101225;
  --line: rgba(148, 163, 184, 0.16);
  --line-bright: rgba(84, 247, 219, 0.35);
  --text: #f4f7ff;
  --muted: #aab1c8;
  --cyan: #4ff8d2;
  --cyan-dark: #19bda3;
  --purple: #ba63ff;
  --gold: #ffd66b;
  --font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", var(--font-body);
  --shell: min(1180px, calc(100vw - 48px));
  --radius: 24px;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; overflow-x: hidden; color: var(--text); background: var(--bg); font-family: var(--font-body); line-height: 1.6; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 15% 20%, rgba(106, 48, 170, .12), transparent 25%), radial-gradient(circle at 85% 55%, rgba(29, 211, 176, .08), transparent 24%); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
::selection { color: #06100e; background: var(--cyan); }

.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: 8px; left: 8px; z-index: 100; padding: 10px 14px; color: #07110f; background: var(--cyan); border-radius: 8px; transform: translateY(-150%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; border-bottom: 1px solid transparent; transition: background .25s, border-color .25s, backdrop-filter .25s; }
.site-header.scrolled { background: rgba(5, 6, 16, .82); border-color: var(--line); backdrop-filter: blur(18px); }
.nav-shell { width: var(--shell); height: 82px; margin: auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; height: 60px; }
.brand img { width: auto; height: 54px; }
.primary-nav { display: flex; align-items: center; gap: 30px; font-size: .86rem; font-weight: 600; color: #c7cce0; }
.primary-nav > a:not(.button) { transition: color .2s; }
.primary-nav > a:not(.button):hover { color: var(--cyan); }
.menu-toggle { display: none; border: 0; background: none; padding: 8px; }
.menu-toggle > span:not(.sr-only) { display: block; width: 24px; height: 2px; margin: 5px; background: white; transition: transform .2s, opacity .2s; }

.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; color: var(--text); font-family: var(--font-display); font-size: .9rem; font-weight: 700; letter-spacing: .02em; transition: transform .2s, box-shadow .2s, border-color .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 42px; padding: 0 18px; color: #08110f; border: 0; background: linear-gradient(120deg, var(--cyan), #7cf2e0); }
.button-primary { color: #07110f; border-color: transparent; background: linear-gradient(120deg, #40eec8, #6cfce0 48%, #af8cff); box-shadow: 0 12px 36px rgba(62, 238, 201, .18); }
.button-primary:hover { box-shadow: 0 15px 40px rgba(62, 238, 201, .3); }
.button-primary svg { width: 18px; fill: currentColor; }
.button-ghost { background: rgba(8, 10, 24, .45); backdrop-filter: blur(8px); }
.button-ghost:hover { border-color: rgba(186, 99, 255, .55); background: rgba(42, 25, 67, .45); }
.button-large { min-width: 220px; min-height: 56px; }

/* Hero: editorial split on top, centered artwork (with docked info tab) below.
   --hero-w sets the artwork width. */
.hero { --hero-w: min(780px, 100%); position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr; justify-items: center; gap: 56px; padding: 124px max(24px, calc((100vw - 1320px)/2)) 96px; isolation: isolate; background: #060713; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 180px; z-index: -1; background: linear-gradient(transparent, var(--bg)); }
/* Clean theme-color backdrop: no imagery, just two faint brand glows. */
.hero-nebula { position: absolute; inset: 0; z-index: -3; background: radial-gradient(ellipse 55% 60% at 12% 30%, rgba(79,248,210,.08), transparent 70%), radial-gradient(ellipse 55% 60% at 88% 55%, rgba(186,99,255,.1), transparent 70%), #060713; }
/* Editorial split: headline left, gradient hairline, copy + tags right; the
   two halves are vertically centered against each other. */
.hero-content { position: relative; z-index: 3; width: min(1040px, 100%); display: grid; grid-template-columns: minmax(0, 1.35fr) 1px minmax(0, .75fr); align-items: center; column-gap: 40px; }
.hero-lead { order: 1; }
.hero-content::before { content: ""; order: 2; align-self: stretch; width: 1px; background: linear-gradient(180deg, transparent, rgba(79,248,210,.7) 25%, rgba(186,99,255,.7) 80%, transparent); }
.hero-side { order: 3; }
.hero-content .eyebrow { margin-bottom: 26px; }
.hero-copy em { font-style: normal; color: transparent; background: linear-gradient(90deg, var(--cyan), var(--purple)); background-clip: text; -webkit-background-clip: text; font-weight: 700; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.hero-tags li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(12,15,32,.6); color: #e6ebf8; font-size: .8rem; font-weight: 600; letter-spacing: .01em; }
.hero-tags li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.hero-tags li:nth-child(2)::before { background: #8edfe7; box-shadow: 0 0 10px #8edfe7; }
.hero-tags li:nth-child(3) { border-color: rgba(186,99,255,.4); background: rgba(186,99,255,.1); }
.hero-tags li:nth-child(3)::before { background: var(--purple); box-shadow: 0 0 10px var(--purple); }
.eyebrow, .kicker { margin: 0 0 20px; color: var(--cyan); font-size: .74rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid rgba(79,248,210,.22); border-radius: 999px; background: rgba(5, 12, 20, .44); backdrop-filter: blur(10px); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(79,248,210,.12), 0 0 15px var(--cyan); }
.hero h1, h2, h3, blockquote { font-family: var(--font-display); }
.hero h1 { margin: 0; font-size: clamp(2rem, 3.1vw, 2.75rem); line-height: 1.12; letter-spacing: -.035em; text-transform: uppercase; text-shadow: 0 10px 50px rgba(0,0,0,.35); }
.hero h1 .h1-line { white-space: nowrap; }
.hero h1 .h1-accent { display: inline-block; white-space: nowrap; color: transparent; background: linear-gradient(90deg, var(--cyan), #a9e7ee 48%, var(--purple)); background-clip: text; -webkit-background-clip: text; font-size: .74em; margin-top: .5em; letter-spacing: -.02em; }
.hero-copy { margin: 0; color: #e1e6f4; font-size: 1.2rem; font-weight: 500; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-proof { width: min(560px, 100%); display: flex; align-items: center; margin: 40px 0 0; padding: 0; list-style: none; }
.hero-proof-visual { z-index: 2; margin: 0; }
/* One frosted-glass capsule holds all three highlights; spacing separates them. */
.hero-proof { width: fit-content; max-width: 100%; gap: 30px; padding: 12px 26px 12px 14px; border: 1px solid transparent; border-radius: 999px; background: linear-gradient(135deg, rgba(16,19,40,.78), rgba(10,12,28,.62)) padding-box, linear-gradient(90deg, rgba(79,248,210,.55), rgba(142,223,231,.3) 50%, rgba(186,99,255,.6)) border-box; box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.05), -10px 0 30px rgba(79,248,210,.06), 10px 0 30px rgba(186,99,255,.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
/* Dock the capsule to the artwork frame as an attached info tab.
   It overlaps only the frame's 1px bottom border so the two edges merge;
   no artwork is covered. */
.hero-proof.hero-proof-visual { position: relative; order: 2; margin-top: -1px; width: 100%; max-width: none; justify-content: space-evenly; gap: 16px; padding: 14px 24px 15px; border: 1px solid rgba(255,255,255,.16); border-top: 0; border-radius: 0 0 28px 28px; background: linear-gradient(135deg, rgba(79,248,210,.16), rgba(15,17,35,.94) 32%, rgba(15,17,35,.94) 68%, rgba(186,99,255,.18)); box-shadow: 0 28px 55px rgba(0,0,0,.5), -12px 10px 40px rgba(79,248,210,.08), 12px 10px 40px rgba(186,99,255,.1); }
.hero-proof li { --proof: var(--cyan); display: flex; align-items: center; gap: 11px; min-width: 0; padding: 0; text-align: left; }
.hero-proof li:nth-child(2) { --proof: #8edfe7; }
.hero-proof li:nth-child(3) { --proof: var(--purple); }
.proof-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--proof) 12%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--proof) 30%, transparent), 0 0 18px color-mix(in srgb, var(--proof) 22%, transparent); }
.proof-icon svg { width: 16px; height: 16px; fill: none; stroke: var(--proof); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-proof strong, .hero-proof span { display: block; white-space: nowrap; }
.hero-proof strong { color: #f8faff; font-family: var(--font-display); font-size: 1rem; letter-spacing: .01em; }
.hero-proof span { margin-top: 2px; color: #bcc4da; font-size: .85rem; font-weight: 500; }
.hero-proof-visual .proof-icon { width: 40px; height: 40px; }
.hero-proof-visual .proof-icon svg { width: 18px; height: 18px; }
.hero-visual { position: relative; z-index: 1; width: var(--hero-w); display: flex; flex-direction: column; }
.hero-visual .hero-card { order: 1; }
.visual-glow { position: absolute; inset: 5%; filter: blur(45px); background: conic-gradient(from 100deg, rgba(79,248,210,.25), rgba(186,99,255,.4), rgba(79,248,210,.2)); }
.hero-card { position: relative; overflow: hidden; padding: 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 28px; background: linear-gradient(135deg, rgba(79,248,210,.25), rgba(15,17,35,.8) 32%, rgba(186,99,255,.24)); box-shadow: 0 45px 90px rgba(0,0,0,.55), -15px 0 60px rgba(79,248,210,.1), 15px 0 60px rgba(186,99,255,.12); }
.hero-card img { width: 100%; height: auto; border-radius: 21px; }
/* Square the frame's bottom corners so the docked info tab continues the
   frame edge-to-edge; the tab carries the rounded bottom corners. */
.hero-card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.hero-card::after { content: ""; position: absolute; inset: 8px; border-radius: 21px; background: linear-gradient(120deg, rgba(255,255,255,.1), transparent 25%, transparent 70%, rgba(79,248,210,.08)); pointer-events: none; }
.scroll-cue { position: absolute; left: 50%; bottom: 28px; display: flex; align-items: center; gap: 10px; color: #7f879f; font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; transform: translateX(-50%); }
.scroll-cue span { width: 1px; height: 28px; background: linear-gradient(var(--cyan), transparent); }

.section { position: relative; padding: 118px 24px; }
.section-heading { width: min(760px, 100%); margin: 0 auto 62px; text-align: center; }
.section-heading-left { width: var(--shell); text-align: left; }
.section-heading h2, .trust-copy h2, .final-cta h2 { margin: 0 0 22px; font-size: clamp(2.5rem, 5vw, 4.6rem); line-height: 1.02; letter-spacing: -.055em; }
.section-heading > p:last-child, .trust-copy > p { color: var(--muted); font-size: 1.03rem; }
.experience { width: var(--shell); margin: auto; padding-left: 0; padding-right: 0; }
.showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.feature { position: relative; min-height: 520px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(20,22,44,.92), rgba(8,10,24,.82)); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.feature-wide { grid-column: 1 / -1; min-height: 0; }
.feature-wide .feature-copy { max-width: 720px; }
.feature-copy { position: relative; z-index: 2; padding: 42px; }
.feature-number { color: var(--cyan); font-family: var(--font-display); font-size: .7rem; font-weight: 700; letter-spacing: .2em; }
.feature h3 { margin: 17px 0 14px; font-size: 1.7rem; line-height: 1.1; letter-spacing: -.035em; }
.feature p { margin: 0; color: var(--muted); }
.feature-media { min-width: 0; }
.game-window { margin: 0 40px 40px; overflow: hidden; border: 1px solid rgba(79,248,210,.22); border-radius: 18px; background: #050711; box-shadow: 0 35px 80px rgba(0,0,0,.4), 0 0 40px rgba(79,248,210,.08); }
.window-bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--line); color: #6e7690; font-size: .55rem; letter-spacing: .14em; }
.window-bar i { width: 7px; height: 7px; border-radius: 50%; background: #32364a; }
.window-bar i:first-child { background: #a54a8e; }
.window-bar span { margin-left: auto; }
.game-window img { width: 100%; height: auto; }
.feature-art { padding-bottom: 250px; }
.customization-fan { position: absolute; inset: auto 0 -115px; height: 360px; display: flex; align-items: flex-start; justify-content: center; background: radial-gradient(ellipse at center, rgba(187,96,255,.18), transparent 62%); }
.customization-fan img { position: absolute; width: 150px; filter: drop-shadow(0 20px 25px rgba(0,0,0,.5)); }
.customization-fan img:nth-child(1) { transform: translateX(-125px) rotate(-16deg); }
.customization-fan img:nth-child(2) { z-index: 2; transform: translateY(-25px); }
.customization-fan img:nth-child(3) { transform: translateX(125px) rotate(16deg); }
.feature-social { background: radial-gradient(circle at 50% 88%, rgba(43,208,181,.18), transparent 40%), linear-gradient(145deg, rgba(20,22,44,.92), rgba(8,10,24,.82)); }
.avatar-row { position: absolute; inset: auto 24px 32px; display: grid; grid-template-columns: repeat(4, 112px); justify-content: center; gap: 12px 14px; }
.avatar-row img { width: 112px; height: 150px; object-fit: cover; border: 2px solid rgba(79,248,210,.34); border-radius: 60px 60px 18px 18px; box-shadow: 0 14px 28px rgba(0,0,0,.45); }
.avatar-row img:nth-child(even) { border-color: rgba(186,99,255,.4); }

.throwables { width: var(--shell); margin: auto; padding-left: 0; padding-right: 0; }
.throwables-heading { display: grid; grid-template-columns: 1fr minmax(360px, .8fr); align-items: end; gap: 80px; margin-bottom: 54px; }
.throwables-heading h2 { margin: 0; font-size: clamp(3rem, 6.7vw, 6.7rem); line-height: .82; letter-spacing: -.07em; text-transform: uppercase; }
.throwables-heading h2 span { color: transparent; background: linear-gradient(90deg, var(--cyan), #87dfe9 42%, var(--purple)); background-clip: text; -webkit-background-clip: text; }
.throwables-intro > p { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.8; }
.throwable-stage { position: relative; min-height: 610px; display: grid; grid-template-columns: .72fr 1.28fr; overflow: hidden; border: 1px solid rgba(79,248,210,.22); border-radius: 30px; background: radial-gradient(circle at 76% 42%, rgba(186,99,255,.2), transparent 30%), radial-gradient(circle at 55% 92%, rgba(255,83,29,.15), transparent 29%), linear-gradient(135deg, #0c1021, #080914 62%, #150a20); box-shadow: inset 0 1px rgba(255,255,255,.05), 0 35px 90px rgba(0,0,0,.28); }
.stage-grid { position: absolute; inset: 0; opacity: .19; pointer-events: none; background-image: linear-gradient(rgba(79,248,210,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(79,248,210,.12) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(110deg, black, transparent 70%); }
.stage-copy { position: relative; z-index: 5; align-self: center; padding: 62px 0 100px 24px; }
.stage-label { display: inline-flex; align-items: center; gap: 9px; color: #8ee4d2; font-size: .65rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.stage-label i { width: 7px; height: 7px; border-radius: 50%; background: #ff784f; box-shadow: 0 0 14px #ff5b2e; }
.stage-count { margin: 64px 0 8px; color: #626b84; font-family: var(--font-display); font-size: .65rem; letter-spacing: .15em; }
.stage-copy h3 { margin: 0; font-size: clamp(2.3rem, 3.5vw, 3.9rem); line-height: .91; letter-spacing: -.06em; text-transform: uppercase; }
/* Second line is a block so "the impossible." always holds together on one
   line, giving a clean two-line title instead of breaking into three. */
.stage-copy h3 span { display: block; white-space: nowrap; color: var(--cyan); }
.stage-copy > p:not(.stage-count) { max-width: 390px; margin: 24px 0 28px; color: #9ca5bd; font-size: .86rem; }
.stage-art { position: relative; min-width: 0; }
.fighter-jet-strike { position: absolute; z-index: 1; top: 1%; right: 2%; width: 50%; aspect-ratio: 816 / 364; filter: drop-shadow(0 18px 25px rgba(0,0,0,.58)) drop-shadow(0 0 18px rgba(79,248,210,.18)); animation: fighter-jet-flight 6s ease-in-out infinite; }
.throwable-jet { width: 100%; height: 100%; object-fit: contain; }
.jet-missile { position: absolute; z-index: -1; left: 47%; top: 66%; width: 42px; height: 9px; border: 1px solid rgba(255,255,255,.72); border-radius: 3px 70% 70% 3px; background: linear-gradient(180deg, #f4f7ff, #79859a 52%, #20283b); box-shadow: 0 0 8px rgba(255,255,255,.7); opacity: 0; transform: rotate(24deg); transform-origin: right center; animation: fighter-missile-launch 6s cubic-bezier(.32,.02,.78,.38) infinite; }
.jet-missile::before { content: ""; position: absolute; right: 34px; top: 1px; width: 78px; height: 5px; border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(186,99,255,.32), #ff6a2b 78%, #fff2a6); filter: blur(1px); transform-origin: right center; }
.jet-missile::after { content: ""; position: absolute; left: -3px; top: -4px; width: 11px; height: 17px; clip-path: polygon(100% 35%, 100% 65%, 0 100%, 28% 50%, 0 0); background: #8d9ab0; }
.helicopter-strike { position: absolute; z-index: 3; top: 32%; right: 17%; width: 20%; aspect-ratio: 864 / 446; filter: drop-shadow(0 18px 24px rgba(0,0,0,.58)) drop-shadow(0 0 15px rgba(186,99,255,.24)); animation: helicopter-hover-attack 4.8s ease-in-out infinite; }
.throwable-helicopter { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; }
.helicopter-rotor-motion { position: absolute; z-index: 3; top: 0; left: 1%; width: 98%; height: 38%; overflow: hidden; border-radius: 50%; background: repeating-linear-gradient(90deg, transparent 0 8%, rgba(238,255,252,.2) 11%, rgba(79,248,210,.45) 13%, transparent 16% 25%); background-size: 38% 100%; mix-blend-mode: screen; filter: blur(2px); opacity: .68; mask-image: radial-gradient(ellipse at 50% 50%, black 12%, rgba(0,0,0,.85) 48%, transparent 72%); animation: helicopter-rotor-flow .16s linear infinite; pointer-events: none; }
.helicopter-rotor-motion::after { content: ""; position: absolute; top: 72%; left: 48%; width: 9%; height: 20%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.92), rgba(79,248,210,.65) 28%, transparent 70%); filter: blur(1px); animation: helicopter-hub-flicker .12s steps(2, end) infinite; }
.helicopter-rotor-wash { position: absolute; z-index: 1; left: 22%; right: 15%; bottom: -5%; height: 12%; border: 2px solid rgba(79,248,210,.24); border-radius: 50%; filter: blur(2px); opacity: .16; animation: helicopter-rotor-wash 1s linear infinite; }
.helicopter-muzzle { position: absolute; z-index: 4; top: 59%; right: 7%; width: 30px; height: 16px; clip-path: polygon(0 30%, 44% 36%, 70% 0, 76% 38%, 100% 50%, 76% 62%, 70% 100%, 44% 64%, 0 70%); background: radial-gradient(circle at left, #fffbd0, #ffb22c 38%, #ff5528 68%, transparent 72%); filter: drop-shadow(0 0 7px #ff7438); opacity: 0; animation: helicopter-muzzle-burst 4.8s steps(1, end) infinite; }
.helicopter-rocket { position: absolute; z-index: 3; top: 61%; right: 4%; width: 27px; height: 6px; border-radius: 60% 2px 2px 60%; background: linear-gradient(180deg, #f5f7ff, #738095 58%, #20273a); box-shadow: 0 0 6px rgba(255,255,255,.65); opacity: 0; }
.helicopter-rocket::before { content: ""; position: absolute; right: 22px; top: 1px; width: 45px; height: 4px; border-radius: 50%; background: linear-gradient(90deg, transparent, #ff6938 72%, #fff4a8); filter: blur(1px); }
.helicopter-rocket-one { animation: helicopter-rocket-salvo-one 4.8s cubic-bezier(.2,.7,.5,1) infinite; }
.helicopter-rocket-two { top: 67%; animation: helicopter-rocket-salvo-two 4.8s cubic-bezier(.2,.7,.5,1) infinite; }
.throwable-king, .throwable-bike { object-fit: contain; filter: drop-shadow(0 30px 35px rgba(0,0,0,.5)); }
.throwable-king { position: absolute; z-index: 2; top: auto; bottom: 56px; left: -4%; width: 42%; height: 80%; object-position: center bottom; animation: none; }
.biker-strike { position: absolute; z-index: 2; right: 12%; bottom: 11%; width: 60%; height: 46%; animation: throwable-drive 5s ease-in-out infinite; }
.throwable-bike { position: relative; z-index: 2; width: 100%; height: 100%; object-position: right bottom; }
.sequence-track { position: absolute; z-index: 6; inset: auto 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); background: rgba(5,7,17,.78); backdrop-filter: blur(12px); }
.sequence-track span { position: relative; padding: 20px 24px; color: #778097; font-size: .65rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.sequence-track span + span { border-left: 1px solid var(--line); }
.sequence-track i { margin-right: 8px; color: var(--cyan); font-style: normal; }
.throwable-roster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.throwable-card { position: relative; min-height: 520px; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(155deg, #12182d, #080914 72%); transition: transform .25s, border-color .25s, box-shadow .25s; }
.throwable-card:hover { transform: translateY(-5px); border-color: rgba(79,248,210,.32); box-shadow: 0 20px 44px rgba(0,0,0,.3); }
.throwable-card::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 46%, rgba(4,5,12,.06) 63%, rgba(4,5,12,.34) 100%); }
.throwable-card-art { position: relative; z-index: 2; inset: auto; flex: 0 0 360px; display: grid; place-items: center; min-width: 0; margin: 8px 8px 0; padding: 12px 18px; overflow: hidden; border-radius: 15px 15px 10px 10px; background: none; }
/* No backdrop disc behind characters: the blurred circle read as an ugly halo
   around the cutouts (same artifact once removed from table throwables). */
.throwable-card-art::before { content: none; display: none; }
.throwable-card img { position: relative; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; filter: drop-shadow(0 18px 24px rgba(0,0,0,.44)); transition: transform .3s; }
.throwable-card:hover img { transform: scale(1.018); }
.throwable-card-copy { position: relative; z-index: 3; flex: 1; width: 100%; padding: 17px 20px 21px; border-top: 1px solid rgba(79,248,210,.14); background: linear-gradient(180deg, rgba(8,9,20,.95), rgba(8,9,20,.99)); box-shadow: 0 -14px 30px rgba(8,9,20,.42); }
.throwable-card span { display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border: 1px solid rgba(79,248,210,.2); border-radius: 999px; background: rgba(79,248,210,.07); color: var(--cyan); font-size: .7rem; font-weight: 800; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; }
.throwable-card h3 { margin: 8px 0 0; font-size: 1.05rem; }
.throwable-card p { margin: 8px 0 0; color: #c3cbe0; font-size: .875rem; font-weight: 500; line-height: 1.6; }
.throwable-card p strong { color: var(--cyan); font-weight: 800; letter-spacing: .04em; }
.throwable-card-chef p strong { color: #ffffff; }
.throwable-card-ufo .throwable-card-art::before { background: rgba(80,255,152,.12); box-shadow: 0 0 42px rgba(80,255,152,.1); }
.throwable-card-nicky .throwable-card-art::before { background: rgba(186,99,255,.12); box-shadow: 0 0 42px rgba(186,99,255,.1); }
.throwable-card-husband .throwable-card-art::before { background: rgba(79,248,210,.1); box-shadow: 0 0 42px rgba(186,99,255,.12); }
.throwable-card-chef .throwable-card-art::before { background: rgba(255,103,70,.1); }
.throwable-card-hero .throwable-card-art::before { background: rgba(80,137,255,.12); }
.throwable-card-bonk .throwable-card-art::before { background: rgba(255,190,58,.12); }
.throwable-card-iggy { container-type: inline-size; }
.throwable-card-iggy .throwable-card-art::before { background: rgba(255,71,173,.1); }
.throwable-card-iggy p { white-space: normal; overflow-wrap: break-word; }
.throwable-card-daddy .throwable-card-art::before { background: rgba(93,245,220,.1); }
.throwables-note { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 25px 0 0; color: #7e879f; font-size: .72rem; text-align: center; }
.throwables-note span { color: var(--cyan); }
@keyframes throwable-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes throwable-drive { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-8px); } }
@keyframes fighter-jet-flight { 0%, 100% { transform: translate3d(10px, 0, 0) rotate(-1deg); } 50% { transform: translate3d(-12px, 8px, 0) rotate(1deg); } }
@keyframes fighter-missile-launch {
  0%, 29% { opacity: 0; transform: translate3d(0, 0, 0) rotate(24deg) scale(.75); }
  31% { opacity: 1; transform: translate3d(0, 0, 0) rotate(24deg) scale(1); }
  46% { opacity: 1; transform: translate3d(145px, 70px, 0) rotate(24deg) scale(.9); }
  52%, 100% { opacity: 0; transform: translate3d(205px, 100px, 0) rotate(24deg) scale(.72); }
}
@keyframes helicopter-hover-attack {
  0%, 100% { transform: translate3d(0, 2px, 0) rotate(.5deg); }
  38% { transform: translate3d(-7px, -8px, 0) rotate(-1deg); }
  43% { transform: translate3d(-13px, -7px, 0) rotate(-2.5deg); }
  49% { transform: translate3d(-6px, -6px, 0) rotate(.8deg); }
  58% { transform: translate3d(-11px, -4px, 0) rotate(-2deg); }
  66% { transform: translate3d(-3px, -3px, 0) rotate(.5deg); }
}
@keyframes helicopter-rotor-flow {
  from { background-position: 0 0; }
  to { background-position: 38% 0; }
}
@keyframes helicopter-hub-flicker {
  0%, 100% { opacity: .45; transform: scaleX(.7); }
  50% { opacity: 1; transform: scaleX(1.35); }
}
@keyframes helicopter-rotor-wash {
  0% { opacity: .3; transform: scaleX(.55) scaleY(.65); }
  100% { opacity: 0; transform: scaleX(1.25) scaleY(1.7); }
}
@keyframes helicopter-muzzle-burst {
  0%, 41%, 45%, 53%, 57%, 100% { opacity: 0; transform: scale(.5); }
  42%, 44%, 54%, 56% { opacity: 1; transform: scale(1.2); }
}
@keyframes helicopter-rocket-salvo-one {
  0%, 41% { opacity: 0; transform: translate3d(0, 0, 0) rotate(7deg) scale(.7); }
  43% { opacity: 1; transform: translate3d(12px, -1px, 0) rotate(-5deg) scale(1); }
  58% { opacity: 1; transform: translate3d(150px, -24px, 0) rotate(-5deg) scale(.82); }
  62%, 100% { opacity: 0; transform: translate3d(200px, -34px, 0) rotate(-5deg) scale(.65); }
}
@keyframes helicopter-rocket-salvo-two {
  0%, 53% { opacity: 0; transform: translate3d(0, 0, 0) rotate(12deg) scale(.7); }
  55% { opacity: 1; transform: translate3d(12px, 1px, 0) rotate(-2deg) scale(1); }
  70% { opacity: 1; transform: translate3d(145px, -14px, 0) rotate(-2deg) scale(.82); }
  74%, 100% { opacity: 0; transform: translate3d(195px, -22px, 0) rotate(-2deg) scale(.65); }
}

.modes { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #080916; }
/* The rivalry artwork is a centred poster with its own wordmark baked in, so it
   cannot work as a faded backdrop behind a heading - two titles compete and the
   symmetrical composition gets sliced in half. It is promoted here to a framed
   panel that occupies the column the mode list was already leaving empty. */
.modes-layout { position: relative; z-index: 2; width: min(1320px, calc(100vw - 48px)); margin: auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 46px; }
.modes-art { position: relative; margin: 0; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: #05060f; box-shadow: 0 26px 60px rgba(0,0,0,.42); }
/* Shown whole at its native 16:9. Cropping this artwork to a taller panel zooms
   it in and cuts the outer two players out of a deliberately symmetrical
   composition, so the frame matches the image rather than the reverse. */
.modes-art img { display: block; width: 100%; height: auto; aspect-ratio: 1024 / 576; object-fit: contain; }
.modes-body { min-width: 0; }
.modes .section-heading { width: auto; margin-bottom: 28px; }
.modes .section-heading h2 { max-width: 100%; }
.mode-list { position: relative; z-index: 2; width: auto; margin: 0; display: grid; gap: 12px; }
.mode-list article { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 22px; max-width: 100%; padding: 24px 26px; border: 1px solid var(--line); border-radius: 18px; background: rgba(12,14,29,.86); backdrop-filter: blur(12px); transition: border-color .2s, transform .2s, background .2s; }
.mode-list article:hover { transform: translateX(5px); border-color: rgba(79,248,210,.3); background: rgba(17,21,40,.9); }
.mode-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(79,248,210,.25); border-radius: 14px; color: var(--cyan); background: rgba(79,248,210,.06); font-size: 1.25rem; }
.mode-list h3 { margin: 0 0 4px; font-size: 1.05rem; }
.mode-list p { margin: 0; color: var(--muted); font-size: .85rem; }
.mode-tag { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: #8f97af; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ---- Live demo -------------------------------------------------------
   Self-contained block: own classes only, so no other section is affected.
   Video renders at its natural aspect ratio (width-driven, no crop). */
.live-demo { width: var(--shell); margin: auto; padding-left: 0; padding-right: 0; }
.live-demo .kicker { display: inline-flex; align-items: center; gap: 9px; }
.demo-frame { width: min(1080px, 100%); margin: 0 auto; overflow: hidden; border: 1px solid rgba(79,248,210,.24); border-radius: 22px; background: #050711; box-shadow: 0 35px 80px rgba(0,0,0,.45), 0 0 42px rgba(79,248,210,.08); }
.demo-bar { height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.demo-bar i { width: 8px; height: 8px; border-radius: 50%; background: #32364a; }
.demo-bar i:first-child { background: #a54a8e; }
.demo-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid rgba(79,248,210,.22); border-radius: 999px; background: rgba(79,248,210,.07); color: var(--cyan); font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.demo-video { display: block; width: 100%; height: auto; background: #000; }
.demo-frame figcaption { padding: 14px 18px; border-top: 1px solid var(--line); color: #7e879f; font-size: .7rem; text-align: center; }

.fair-play { width: var(--shell); margin: auto; padding-left: 0; padding-right: 0; }
.trust-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; padding: 70px; border: 1px solid var(--line-bright); border-radius: 30px; background: radial-gradient(circle at 0 0, rgba(79,248,210,.1), transparent 36%), radial-gradient(circle at 100% 100%, rgba(186,99,255,.11), transparent 38%), rgba(12,14,28,.72); }
.trust-copy h2 { font-size: clamp(2.4rem, 4vw, 4rem); }
/* Top-align the left column: the card column is much taller now, and centring
   left a large empty gap above the art. Aligns the art's top edge with the top
   of the first row of cards. Single-column layouts are unaffected. */
.trust-copy { align-self: start; }
/* Left-column art above the kicker. Same framed treatment as .trust-card-art so
   the two read as a set. 2.4:1 centred crop of the 16:9 source trims only the
   empty black above/below the table -> report -> server artwork. */
.trust-copy-art { display: block; width: 100%; height: auto; aspect-ratio: 2.4 / 1; object-fit: cover; object-position: center; margin: 0 0 34px; border: 1px solid var(--line); border-radius: 14px; background: #070914; }
.text-link { display: inline-flex; gap: 8px; margin-top: 18px; color: var(--cyan); font-weight: 700; }
.text-link span { transition: translate .2s; }
.text-link:hover span { translate: 5px 0; }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trust-grid article { min-height: 180px; padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: rgba(6,8,19,.52); }
.trust-grid article > span { color: var(--cyan); font-size: 1.4rem; }
.trust-grid h3 { margin: 20px 0 8px; font-size: 1rem; }
.trust-grid p { margin: 0; color: #929ab3; font-size: .78rem; }
/* Fifth card spans the 2-column grid so the 2x2 block stays intact. */
.trust-grid .trust-card-wide { grid-column: 1 / -1; min-height: 0; }
.trust-grid .trust-card-wide p { line-height: 1.7; }
/* Banner art inside the reporting card only. 3:1 crop of the 16:9 source:
   the pipeline artwork sits in the vertical middle with empty black above and
   below, so a centred cover crop trims only empty space. Scoped to this card,
   so the .trust-art diagrams below the grid are untouched. */
.trust-grid .trust-card-art { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; object-position: center; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 12px; background: #070914; }
.trust-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.trust-tags li { display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border: 1px solid rgba(79,248,210,.22); border-radius: 999px; background: rgba(79,248,210,.07); color: var(--cyan); font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
/* ---- Fair-play diagrams ---------------------------------------------
   Spans both panel columns so the pair reads as one wide band closing the
   section. Unlike the pitch deck, this panel is tinted rather than near-black,
   so the artwork's own dark background would show as two visible rectangles;
   each image is therefore faded on all four sides into the panel. The two
   facing inner edges fade far more shallowly (4%) than the outer ones (18%)
   so the halves still read as one continuous spread.
   The negative top margin cancels most of the panel's 80px row gap, which
   would otherwise strand the band well below the content it illustrates. */
.trust-art { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; margin-top: -46px; }
.trust-art img { display: block; width: 100%; height: auto; opacity: .92; }
.trust-art img:first-child {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.trust-art img:last-child {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 82%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 82%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.assurance-panel { position: relative; overflow: hidden; margin-top: 20px; padding: 42px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg, rgba(15,18,36,.94), rgba(7,9,21,.9)); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 24px 70px rgba(0,0,0,.18); }
.assurance-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .23; background-image: linear-gradient(rgba(79,248,210,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(79,248,210,.08) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(135deg, black, transparent 55%); }
.assurance-panel > * { position: relative; z-index: 1; }
.assurance-header { display: grid; grid-template-columns: 1fr minmax(280px, 480px); align-items: end; gap: 48px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.assurance-label { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; color: var(--cyan); font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.assurance-label span { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(79,248,210,.1), 0 0 14px rgba(79,248,210,.7); }
.assurance-header h3 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -.045em; }
.assurance-header > p { margin: 0; color: #858da6; font-size: .78rem; line-height: 1.7; }
.assurance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 1px; background: var(--line); }
.assurance-grid article { display: grid; grid-template-columns: 46px 1fr auto; align-items: start; gap: 16px; min-width: 0; padding: 28px 24px; background: #0b0d1c; }
.assurance-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(79,248,210,.22); border-radius: 12px; color: var(--cyan); background: rgba(79,248,210,.055); }
.assurance-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.assurance-grid h4 { margin: 1px 0 7px; font-family: var(--font-display); font-size: .94rem; }
.assurance-grid p { margin: 0; color: #858da6; font-size: .74rem; line-height: 1.65; }
.assurance-state { align-self: start; padding: 5px 8px; border: 1px solid rgba(79,248,210,.15); border-radius: 999px; color: #83decb; background: rgba(79,248,210,.045); font-size: .53rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
/* One image rather than the pair used by .trust-art, so it is centred and
   capped near half the panel instead of filling the row - a single 1024px
   source stretched edge to edge would upscale and dominate the claim list it
   is meant to support. Negative margins let the art's own dark padding sit in
   the whitespace the grid already leaves above the footer. */
.assurance-art { display: grid; justify-items: center; margin: -30px 0 -28px; }
.assurance-art img {
  display: block; width: min(560px, 100%); height: auto; opacity: .92;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.assurance-footer { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-top: 30px; }
.assurance-footer p { margin: 0; color: #858da6; font-size: .78rem; }
.assurance-footer strong { color: #e9ecf6; }
.assurance-footer > div { display: flex; gap: 10px; }
.assurance-footer .button { min-height: 43px; padding-inline: 17px; font-size: .74rem; }

/* The source art is 1024x576. Stretching it edge-to-edge on a wide display
   scaled it past 2x and it visibly softened, so the image column is capped near
   its native width and the section background carries the full bleed instead.
   Sharpness here is a resolution problem, not a styling one - no filter can
   restore detail that upscaling never had. */
.quote-section { display: grid; grid-template-rows: auto auto; justify-items: center; padding: 0 0 clamp(28px, 4vw, 54px); overflow: hidden; border-block: 1px solid var(--line); background: var(--bg-deep); }
.quote-figure { position: relative; grid-row: 2; width: min(1180px, calc(100vw - 48px)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.quote-section img, .quote-overlay { width: 100%; }
/* contain + native ratio: shown whole, never cropped, never upscaled past ~1.15x. */
.quote-section img { display: block; height: auto; aspect-ratio: 1024 / 576; object-fit: contain; }
.quote-overlay { position: absolute; inset: 0; z-index: 1; height: auto; pointer-events: none; background: linear-gradient(0deg, rgba(3,4,11,.42), transparent 26%, transparent 84%, rgba(3,4,11,.24)); }
.quote-section blockquote { position: relative; z-index: 2; grid-row: 1; width: var(--shell); margin: 0 auto; padding: 62px 0 70px; font-size: clamp(2.8rem, 5.8vw, 6rem); font-weight: 700; line-height: .92; letter-spacing: -.06em; text-align: center; text-transform: uppercase; }
.quote-section blockquote::before { content: ""; display: block; width: 64px; height: 2px; margin: 0 auto 30px; background: linear-gradient(90deg, var(--cyan), var(--purple)); box-shadow: 0 0 18px rgba(79,248,210,.38); }
.quote-section blockquote span { color: transparent; background: linear-gradient(90deg, var(--cyan), var(--purple)); background-clip: text; -webkit-background-clip: text; }

.faq { width: min(900px, calc(100vw - 48px)); margin: auto; padding-left: 0; padding-right: 0; }
.faq .section-heading { margin-bottom: 42px; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 24px 52px 24px 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 1.06rem; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span::before, .faq summary span::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 1px; background: var(--cyan); transition: transform .2s; }
.faq summary span::after { transform: rotate(90deg); }
.faq details[open] summary span::after { transform: rotate(0); }
.faq details p { max-width: 740px; margin: -4px 0 24px; color: var(--muted); font-size: .93rem; }

.final-cta { overflow: hidden; min-height: 560px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-top: 1px solid var(--line); text-align: center; background: radial-gradient(circle at center, rgba(52,202,180,.1), transparent 38%), #070814; }
.final-cta::before { content: ""; position: absolute; inset: 0; opacity: .08; background-image: linear-gradient(rgba(79,248,210,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(79,248,210,.22) 1px, transparent 1px); background-size: 55px 55px; mask-image: radial-gradient(circle, black, transparent 65%); }
.final-cta > *:not(.cta-glow) { position: relative; z-index: 2; }
.final-cta h2 { margin-bottom: 12px; }
.final-cta > p:not(.kicker) { margin: 0; color: var(--muted); }
.cta-poster-frame { position: relative; width: min(900px, calc(100vw - 48px)); margin: 34px 0; overflow: hidden; border: 1px solid rgba(79,248,210,.24); border-radius: 22px; background: #050711; box-shadow: 0 30px 75px rgba(0,0,0,.48), 0 0 42px rgba(79,248,210,.08); }
.cta-poster-frame::after { content: ""; position: absolute; top: 5%; left: 59%; z-index: 1; width: 27%; height: 19%; pointer-events: none; background: radial-gradient(ellipse at center, rgba(3,5,14,.38), transparent 74%); }
.cta-poster-logo { position: absolute; top: 3%; left: 60%; z-index: 2; width: 24%; height: auto; filter: drop-shadow(0 0 18px rgba(79,248,210,.24)); }
.cta-poster { width: 100%; height: auto; }
.final-cta small { margin-top: 17px; color: #747c95; font-size: .67rem; letter-spacing: .05em; }

.site-footer { padding: 70px max(24px, calc((100vw - 1180px)/2)) 28px; border-top: 1px solid var(--line); background: var(--bg-deep); }
.footer-brand-cluster { display: flex; align-items: flex-start; gap: 12px; }
.footer-brand { flex: 0 0 auto; }
.footer-logo { width: auto; height: 100px; object-fit: contain; }
.footer-brand p { max-width: 360px; margin: 24px 0 0; color: #7f879f; font-size: .82rem; }
.footer-foundation { width: 300px; height: auto; margin-top: 16px; object-fit: contain; object-position: left center; }
.site-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 60px; }
/* Single link column: anchor it to the footer's right edge and give it enough
   width and breathing room to read as a deliberate column, not a leftover. */
.footer-links { display: flex; justify-content: flex-end; }
.footer-links div { display: grid; align-content: start; gap: 11px; min-width: 148px; }
.footer-links strong { margin-bottom: 5px; font-family: var(--font-display); font-size: .8rem; }
.footer-links a { color: #858da6; font-size: .77rem; }
.footer-links a:hover { color: var(--cyan); }
.footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--line); color: #5f667c; font-size: .68rem; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 80; max-width: 360px; display: grid; visibility: hidden; padding: 16px 19px; border: 1px solid rgba(79,248,210,.26); border-radius: 14px; background: rgba(10,13,28,.94); box-shadow: 0 20px 50px rgba(0,0,0,.45); backdrop-filter: blur(15px); opacity: 0; pointer-events: none; transition: opacity .3s, visibility 0s linear .3s; }
.toast.visible { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
.toast strong { color: var(--cyan); font-size: .8rem; }
.toast span { color: #aab1c8; font-size: .75rem; }
.toast code { color: white; }

/* ── Private beta access gate ──────────────────────────────────────────────
   Invite-request dialog shown when a visitor clicks any "Play now" control.
   Uses the [hidden] attribute as the single source of truth for visibility so
   the markup stays inert (and untabbable) until it is opened. */
.access-modal[hidden] { display: none; }
.access-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; }
.access-modal-backdrop { position: absolute; inset: 0; background: rgba(3, 4, 11, .78); backdrop-filter: blur(6px); animation: access-fade .2s ease-out; }
.access-modal-panel { position: relative; width: min(520px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 40px; border: 1px solid var(--line-bright); border-radius: var(--radius); background: linear-gradient(160deg, rgba(18,21,44,.98), rgba(8,10,22,.98)); box-shadow: 0 30px 80px rgba(0,0,0,.6); text-align: center; animation: access-rise .25s ease-out; }
.access-modal-panel .kicker { margin: 0 0 8px; }
.access-modal-panel h2 { margin: 0 0 14px; font-size: clamp(1.5rem, 3.4vw, 1.95rem); }
.access-modal-panel > p { margin: 0 0 26px; color: var(--muted); font-size: .92rem; }
.access-modal-close { position: absolute; top: 14px; right: 16px; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.04); color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.access-modal-close:hover { color: var(--text); border-color: var(--line-bright); background: rgba(255,255,255,.08); }
.access-email { display: grid; gap: 4px; padding: 18px 22px; border-radius: 14px; color: #07110f; background: linear-gradient(120deg, #40eec8, #6cfce0 48%, #af8cff); box-shadow: 0 12px 36px rgba(62,238,201,.18); transition: transform .2s, box-shadow .2s; }
.access-email:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(62,238,201,.3); }
.access-email-label { font-family: var(--font-display); font-size: .95rem; font-weight: 700; }
.access-email-address { font-size: .82rem; font-weight: 600; opacity: .78; word-break: break-all; }
.access-copy-button { width: 100%; min-height: 46px; margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(8,10,24,.45); color: var(--text); font-family: var(--font-display); font-size: .85rem; font-weight: 700; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.access-copy-button:hover { border-color: rgba(186,99,255,.55); background: rgba(42,25,67,.45); }
.access-copy-button.copied { border-color: var(--line-bright); color: var(--cyan); }
.access-modal-panel small { display: block; margin-top: 20px; color: #747c95; font-size: .7rem; line-height: 1.5; }
@keyframes access-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes access-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .access-modal-backdrop, .access-modal-panel { animation: none; }
  .access-email:hover { transform: none; }
}

@media (max-width: 980px) {
  :root { --shell: min(100% - 36px, 760px); }
  .primary-nav { gap: 18px; }
  .primary-nav > a:not(.button) { display: none; }
  /* Stacked hero: badge, headline, accent, paragraph, then artwork + tab, all centered. */
  .hero { gap: 44px; padding-top: 120px; text-align: center; }
  .hero-content { grid-template-columns: 1fr; row-gap: 26px; justify-items: center; max-width: 680px; }
  .hero-content::before { width: 64px; height: 2px; align-self: auto; background: linear-gradient(90deg, var(--cyan), var(--purple)); }
  .hero-tags { justify-content: center; }
  .scroll-cue { display: none; }
  .game-window { min-height: 0; margin: 0 34px 34px; }
  .throwables-heading { grid-template-columns: 1fr; gap: 32px; }
  .throwable-stage { min-height: 770px; grid-template-columns: 1fr; }
  .stage-copy { align-self: start; padding: 48px 24px; }
  .stage-count { margin-top: 30px; }
  .stage-art { position: absolute; inset: 230px 0 56px 27%; }
  .throwable-roster { grid-template-columns: 1fr 1fr; }
  .trust-panel { grid-template-columns: 1fr; gap: 40px; padding: 48px; }
  /* Row gap drops to 40px here, so the band needs far less negative pull. */
  .trust-art { margin-top: -18px; }
  .assurance-header { grid-template-columns: 1fr; gap: 14px; }
  .assurance-grid { grid-template-columns: 1fr; }
  /* Below 980px there is no longer room for art and list side by side; stack
     them with the art leading, still at full opacity and uncropped horizontally. */
  .modes-layout { width: var(--shell); grid-template-columns: 1fr; gap: 30px; }
  .modes .section-heading h2, .mode-list article { max-width: 100%; }
}

@media (max-width: 700px) {
  :root { --shell: calc(100vw - 30px); --radius: 18px; }
  .site-header { position: absolute; }
  .site-header.scrolled { background: transparent; border-color: transparent; backdrop-filter: none; }
  .nav-shell { height: 68px; }
  .brand { height: 52px; }
  .brand img { height: 46px; }
  .menu-toggle { display: block; cursor: pointer; }
  .primary-nav { position: absolute; top: 68px; left: 15px; right: 15px; display: none; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: rgba(7,8,19,.97); box-shadow: 0 25px 50px rgba(0,0,0,.5); }
  .primary-nav.open { display: grid; }
  .primary-nav > a:not(.button) { display: block; padding: 8px; }
  .menu-toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hero { gap: 34px; padding: 104px 15px 64px; }
  .hero h1 { font-size: clamp(2.1rem, 9vw, 3rem); }
  .hero-content { row-gap: 20px; }
  .hero h1 .h1-line { white-space: normal; }
  .hero-copy { font-size: 1rem; }
  .hero-tags { margin-top: 16px; gap: 6px; }
  .hero-tags li { padding: 6px 10px; font-size: .72rem; }
  .hero-actions .button { width: 100%; }
  .hero-proof.hero-proof-visual { gap: 8px; padding: 12px 12px 13px; border-radius: 0 0 20px 20px; }
  .hero-card { border-radius: 20px 20px 0 0; padding: 6px; }
  .hero-card img, .hero-card::after { border-radius: 15px; }
  .hero-card::after { inset: 6px; }
  .hero-proof li { flex: 1 1 0; gap: 7px; }
  .hero-proof span { white-space: normal; line-height: 1.3; }
  .hero-proof-visual .proof-icon { width: 26px; height: 26px; }
  .hero-proof-visual .proof-icon svg { width: 13px; height: 13px; }
  .hero-proof strong { font-size: .8rem; }
  .hero-proof span { font-size: .68rem; }
  .section { padding-top: 82px; padding-bottom: 82px; }
  .section-heading { margin-bottom: 40px; }
  .showcase-grid { grid-template-columns: 1fr; }
  .feature-wide { grid-column: auto; }
  .feature-copy { padding: 30px; }
  .feature { min-height: 460px; }
  .feature-wide { min-height: 0; }
  .game-window { min-height: 0; margin: 0 20px 28px; }
  .feature-art { padding-bottom: 230px; }
  .customization-fan img { width: 120px; }
  .customization-fan img:nth-child(1) { transform: translateX(-95px) rotate(-16deg); }
  .customization-fan img:nth-child(3) { transform: translateX(95px) rotate(16deg); }
  .avatar-row { inset-inline: 12px; grid-template-columns: repeat(4, 70px); gap: 8px; }
  .avatar-row img { width: 70px; height: 100px; }
  .throwables-heading { gap: 24px; }
  .throwables-heading h2 { font-size: clamp(2.75rem, 14vw, 4rem); }
  .throwable-stage { min-height: 720px; border-radius: 20px; }
  .stage-copy { padding: 32px 24px; }
  /* Sized off viewport width so the nowrap second line still fits on phones. */
  .stage-copy h3 { font-size: clamp(1.9rem, 8.4vw, 2.8rem); }
  .stage-copy > p:not(.stage-count) { max-width: 290px; }
  .stage-art { inset: 285px -80px 58px 0; }
  .fighter-jet-strike { top: 3%; right: calc(80px + 8%); width: 48%; }
  .helicopter-strike { top: 31%; right: calc(80px + 16%); width: 20%; }
  .throwable-king { top: auto; bottom: 0; left: -5%; width: 42%; height: 72%; }
  .biker-strike { right: 14%; bottom: 16%; width: 58%; height: 38%; }
  .sequence-track span { padding: 15px 6px; text-align: center; font-size: .53rem; }
  .sequence-track i { display: block; margin: 0 0 2px; }
  .throwable-roster { grid-template-columns: 1fr 1fr; gap: 8px; }
  .throwable-card { min-height: 420px; padding: 0; }
  /* Grid rows stretch every card to the tallest sibling. That slack used to be
     absorbed by the copy panel (flex: 1), which grew downward while its text
     stayed pinned to the top - leaving a dead void under short captions and
     making the fixed-height art above it read as cropped. Give the slack to the
     art instead: it grows, stays centred, and the copy panels across a row line
     up on a shared baseline. */
  .throwable-card-art { inset: auto; flex: 1 1 auto; min-height: 270px; margin: 6px 6px 0; padding: 10px 12px; }
  .throwable-card-copy { flex: 0 0 auto; padding: 14px 14px 17px; }
  .throwable-card span { min-height: 22px; padding-inline: 8px; font-size: .58rem; letter-spacing: .09em; }
  /* Titles vary from "Bonk" to "ANSEM's BLACK BULL"; reserving two lines keeps a
     wrapped title from pushing its caption out of step with the card beside it. */
  .throwable-card h3 { margin-top: 7px; min-height: calc(2 * 1.25em); font-size: .9rem; line-height: 1.25; }
  /* Reserve room for the longest caption in the roster ("Protective Husband",
     four lines at this width) so every copy panel is the same height and the art
     blocks above them match across a row. */
  .throwable-card p { margin-top: 6px; min-height: calc(5 * 1.5em); font-size: .78rem; line-height: 1.5; }
  /* Mother Iggy's caption is the longest in the roster and is kept on a single
     line at desktop widths via a container query. In a two-up mobile grid the
     card is far too narrow for that: the clamp bottoms out at its .3rem floor
     and the generic rule above then overrides the font-size anyway, leaving
     fixed-size text on an unbreakable line that runs off the card. Let it wrap
     like every other caption here. */
  .throwable-card-iggy p { white-space: normal; font-size: .78rem; letter-spacing: 0; overflow-wrap: break-word; }
  .throwables-note { align-items: flex-start; text-align: left; }
  .modes .section-heading { padding: 0; }
  .mode-list article { grid-template-columns: 44px 1fr; gap: 14px; padding: 20px; }
  .mode-icon { width: 42px; height: 42px; }
  .mode-tag { display: none; }
  .trust-panel { gap: 35px; padding: 30px 22px; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-grid article { min-height: 150px; }
  /* Side by side on a phone each diagram would be a thumbnail with unreadable
     detail. Stack them, and swap the inner-edge fades for a single vertical
     fade now that the images meet top-to-bottom rather than left-to-right. */
  .trust-art { grid-template-columns: 1fr; gap: 0; margin-top: -10px; }
  .trust-art img:first-child,
  .trust-art img:last-child {
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  }
  .assurance-panel { padding: 28px 18px; border-radius: 18px; }
  .assurance-grid article { grid-template-columns: 42px 1fr; padding: 22px 14px; }
  /* Stacked cards leave less dead space to absorb, so the art pulls in less. */
  .assurance-art { margin: -14px 0 -12px; }
  .assurance-state { grid-column: 2; justify-self: start; }
  .assurance-footer { align-items: stretch; flex-direction: column; }
  .assurance-footer > div { display: grid; }
  .assurance-footer .button { width: 100%; }
  .quote-section { min-height: 0; height: auto; grid-template-rows: auto auto; }
  .quote-figure { width: var(--shell); border-radius: 14px; }
  .quote-section blockquote { padding: 44px 0 34px; font-size: 12.5vw; }
  .quote-section blockquote::before { margin-bottom: 22px; }
  .final-cta { padding-inline: 20px; }
  .site-footer { grid-template-columns: 1fr; gap: 35px; }
  .footer-brand-cluster { align-items: flex-start; gap: 10px; }
  .footer-logo { width: min(190px, 43vw); height: auto; }
  .footer-brand p { margin-top: 18px; }
  .footer-foundation { width: min(300px, 46vw); height: auto; margin-top: 8px; }
  /* Stacked footer: align the link column with the brand block above it. */
  .footer-links { justify-content: flex-start; }
  .footer-bottom { display: grid; gap: 8px; }
  .toast { left: 15px; right: 15px; bottom: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}