:root {
  --bg: #030306;
  --red: #ff174d;
  --red-hot: #ff5b26;
  --cyan: #18e7ff;
  --gold: #ffd166;
  --text: #ffffff;
  --muted: #b9bfcc;
  --line: rgba(255,255,255,.18);
  --mx: 0;
  --my: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; overflow: hidden; color: var(--text); background: var(--bg); }
a { color: inherit; text-decoration: none; }

.gx-page, .hero { position: relative; width: 100vw; height: 100vh; min-height: 680px; overflow: hidden; isolation: isolate; }
.hero__video { position: absolute; inset: 0; z-index: -6; width: 100%; height: 100%; object-fit: cover; transform: scale(1.035) translate(calc(var(--mx) * -10px), calc(var(--my) * -7px)); filter: saturate(1.16) contrast(1.1) brightness(.62); }
.hero__shade { position: absolute; inset: 0; z-index: -5; background: radial-gradient(ellipse at 68% 30%, rgba(24,231,255,.14), transparent 24%), radial-gradient(ellipse at 75% 40%, rgba(255,23,77,.58), transparent 32%), radial-gradient(ellipse at 84% 58%, rgba(255,91,38,.2), transparent 35%), linear-gradient(90deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.36) 30%, rgba(0,0,0,.5) 58%, rgba(0,0,0,.72) 100%), radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.56) 100%); }
.hero__light { position: absolute; right: 3vw; top: 16vh; z-index: -4; width: min(38vw, 560px); aspect-ratio: 1; border: 1px solid rgba(255,23,77,.28); clip-path: polygon(50% 0, 100% 23%, 83% 100%, 17% 100%, 0 23%); box-shadow: inset 0 0 100px rgba(255,23,77,.22), 0 0 130px rgba(255,23,77,.32), 0 0 210px rgba(255,91,38,.1); opacity: .9; transform: translate(calc(var(--mx) * 16px), calc(var(--my) * 12px)) rotate(-8deg); }
.hero__grid { position: absolute; inset: auto 0 -22vh; z-index: -4; height: 42vh; 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: 84px 84px; transform: perspective(560px) rotateX(64deg); transform-origin: bottom; mask-image: linear-gradient(to top, #000, transparent 76%); animation: gridMove 14s linear infinite; }
.hero__scan { position: absolute; inset: 0; z-index: -3; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 1px, transparent 1px 6px); opacity: .12; mix-blend-mode: screen; animation: scanDrift 6s linear infinite; }
.hero__focus { position: absolute; right: -8vw; top: 8vh; z-index: -3; width: min(62vw, 840px); aspect-ratio: 1; pointer-events: none; background: radial-gradient(circle, rgba(255,23,77,.26), rgba(255,23,77,.08) 34%, transparent 64%); filter: blur(8px); transform: translate(calc(var(--mx) * 20px), calc(var(--my) * 14px)); animation: focusBreath 4.8s ease-in-out infinite; }

.topbar { position: absolute; top: 24px; left: clamp(28px, 4vw, 60px); right: clamp(28px, 4vw, 60px); z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; }
.brand__logo { display: block; width: clamp(158px, 15vw, 244px); height: auto; filter: drop-shadow(0 0 16px rgba(255,255,255,.12)); }
.topbar__nav { display: grid; gap: 13px; position: absolute; left: 0; top: 42vh; transform: translateX(-8px); }
.topbar__nav button { width: 10px; height: 10px; padding: 0; border: 1px solid rgba(255,255,255,.46); transform: rotate(45deg); background: rgba(0,0,0,.35); cursor: pointer; transition: transform .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease; }
.topbar__nav button.is-active { border-color: var(--red); background: var(--red); box-shadow: 0 0 18px rgba(255,23,77,.65); transform: rotate(45deg) scale(1.2); }
.scene-label { position: absolute; left: 22px; top: -8px; color: rgba(255,255,255,.74); font-size: 10px; font-weight: 1000; letter-spacing: .08em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.topbar__actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 5px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.2)); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.22); }
.topbar__cta { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; overflow: hidden; border: 1px solid rgba(24,231,255,.66); color: #061216; background: linear-gradient(135deg, #18e7ff 0%, #38fff1 62%, #b9fff9 100%); font-size: 13px; font-weight: 1000; text-transform: uppercase; letter-spacing: 0; box-shadow: 0 0 22px rgba(24,231,255,.28), inset 0 1px 0 rgba(255,255,255,.56), inset 0 -8px 16px rgba(0,0,0,.1); transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; }
.topbar__cta::after { content: ""; position: absolute; inset: -55% auto -55% -45%; width: 28%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); transform: skewX(-18deg); animation: shine 4.8s infinite; }
.topbar__cta:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 0 34px rgba(24,231,255,.5), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -10px 18px rgba(0,0,0,.12); }
.hud-icon { position: relative; display: inline-grid; place-items: center; width: 44px; height: 42px; padding: 0; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.42); color: #fff; cursor: pointer; backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 20px rgba(0,0,0,.22); transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.hud-icon:hover { transform: translateY(-2px); border-color: rgba(24,231,255,.72); background: rgba(24,231,255,.1); box-shadow: 0 0 24px rgba(24,231,255,.18), inset 0 1px 0 rgba(255,255,255,.14); }
.hud-icon--web span { width: 25px; height: 25px; border: 2px solid rgba(255,255,255,.88); border-radius: 50%; background: linear-gradient(90deg, transparent 46%, rgba(255,255,255,.88) 47%, rgba(255,255,255,.88) 53%, transparent 54%), linear-gradient(0deg, transparent 46%, rgba(255,255,255,.88) 47%, rgba(255,255,255,.88) 53%, transparent 54%); box-shadow: 0 0 14px rgba(255,255,255,.12); }
.hud-icon--web span::before, .hud-icon--web span::after { content: ""; position: absolute; inset: 12px 15px; border-left: 2px solid rgba(255,255,255,.82); border-right: 2px solid rgba(255,255,255,.82); border-radius: 50%; }
.sound-toggle span { position: relative; display: inline-block; width: 26px; height: 25px; }
.sound-toggle span::before { content: ""; position: absolute; left: 0; top: 5px; width: 10px; height: 14px; background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.78)); clip-path: polygon(0 28%, 38% 28%, 100% 0, 100% 100%, 38% 72%, 0 72%); }
.sound-toggle span::after { content: ""; position: absolute; right: 1px; top: 2px; width: 14px; height: 20px; border: 2px solid rgba(255,255,255,.86); border-left: 0; border-radius: 0 16px 16px 0; box-shadow: 5px 0 0 -2px rgba(255,255,255,.62); }
.sound-toggle { animation: musicPing 4.6s ease-in-out infinite; }
.sound-toggle.is-on { border-color: rgba(24,231,255,.8); background: rgba(24,231,255,.14); box-shadow: 0 0 26px rgba(24,231,255,.28), inset 0 1px 0 rgba(255,255,255,.16); animation: none; }
.sound-toggle.is-on span::after { border-color: var(--cyan); box-shadow: 5px 0 0 -2px rgba(24,231,255,.75), 10px 0 0 -4px rgba(24,231,255,.45); }

.hero__content { position: absolute; left: clamp(70px, 8vw, 128px); top: clamp(118px, 16vh, 170px); z-index: 8; display: grid; align-content: start; width: min(700px, 52vw); }
.hero__content::before { content: ""; position: absolute; z-index: -1; inset: -28px -34px -30px -38px; background: radial-gradient(ellipse at 24% 46%, rgba(0,0,0,.48), rgba(0,0,0,.24) 45%, transparent 72%); filter: blur(2px); pointer-events: none; }
.eyebrow { width: max-content; margin: 0 0 16px; padding: 8px 14px; border-left: 3px solid var(--cyan); color: var(--cyan); background: rgba(24,231,255,.08); font-size: clamp(13px, 1.1vw, 16px); font-weight: 1000; text-transform: uppercase; }
h1 { max-width: 10ch; margin: 0; font-size: clamp(62px, 6.8vw, 116px); line-height: .88; letter-spacing: 0; text-transform: uppercase; text-shadow: 0 0 24px rgba(255,23,77,.26); }
.hero__lead { max-width: 560px; margin: 18px 0 0; color: #f0f2f8; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.36; }

.benefits { display: grid; grid-template-columns: repeat(3, minmax(132px, 1fr)); gap: 11px; max-width: 610px; margin-top: 22px; }
.benefits span { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 10px 13px 10px 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(0,0,0,.48)); color: #f7f8fb; font-size: 14px; font-weight: 950; white-space: nowrap; backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -14px 24px rgba(255,23,77,.045), 0 10px 28px rgba(0,0,0,.22), 0 0 14px rgba(255,23,77,.045); }
.benefits b { display: grid; place-items: center; min-width: 38px; height: 28px; padding: 0 8px; border-radius: 999px; color: var(--cyan); background: rgba(24,231,255,.16); font-size: 10px; line-height: 1; box-shadow: inset 0 0 18px rgba(24,231,255,.12), 0 0 18px rgba(24,231,255,.14); }

.cta-deck { display: grid; grid-template-columns: minmax(360px, 540px) auto; align-items: center; gap: 14px 18px; max-width: 705px; margin-top: 28px; }
.primary-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 88px; padding: 0 38px; overflow: hidden; background: linear-gradient(135deg, #ff174d 0%, #ff3a6e 38%, #ff7a18 78%, #ffd166 120%); font-size: clamp(22px, 2.05vw, 32px); font-weight: 1000; text-transform: uppercase; clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%); box-shadow: 0 0 46px rgba(255,23,77,.66), 0 22px 64px rgba(255,74,32,.34), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -10px 0 rgba(0,0,0,.2), inset 0 0 40px rgba(255,209,102,.13); transition: transform .18s ease, filter .18s ease; }
.primary-cta:hover { transform: translateY(-2px); filter: brightness(1.1) saturate(1.05); }
.primary-cta span, .primary-cta b { position: relative; z-index: 2; }
.primary-cta b { margin-left: 14px; font-size: 1.05em; animation: arrowNudge 4s ease-in-out infinite; }
.primary-cta i { position: absolute; z-index: 1; inset: -40% auto -40% -45%; width: 26%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); transform: skewX(-18deg); animation: shine 4.2s infinite; }
.secondary-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 18px; border: 1px solid rgba(24,231,255,.62); color: var(--cyan); background: rgba(24,231,255,.055); font-size: 12px; font-weight: 1000; text-transform: uppercase; }
.cta-deck p { grid-column: 1 / -1; margin: -4px 0 0; color: rgba(255,255,255,.78); font-size: 14px; font-weight: 900; text-transform: uppercase; }

.gx-control { position: absolute; right: clamp(18px, 4vw, 68px); bottom: clamp(96px, 14vh, 154px); z-index: 4; width: min(430px, 30vw); padding: 16px; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, rgba(18,18,26,.68), rgba(6,6,10,.58)); backdrop-filter: blur(18px); box-shadow: 0 24px 76px rgba(0,0,0,.46), 0 0 30px rgba(255,23,77,.08), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 42px rgba(255,23,77,.08); transform: translate(calc(var(--mx) * -9px), calc(var(--my) * -7px)); }
.gx-control__screen { display: grid; gap: 7px; min-height: 118px; padding: 18px; border: 1px solid rgba(255,23,77,.42); background: radial-gradient(circle at 74% 22%, rgba(255,23,77,.34), transparent 32%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.34)); box-shadow: inset 0 0 42px rgba(255,23,77,.14), inset 0 1px 0 rgba(255,255,255,.12); }
.gx-control__screen span { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); animation: pulse 1.8s infinite; }
.gx-control__screen strong { align-self: end; font-size: 28px; text-transform: uppercase; }
.gx-control__screen small { color: #d9dde8; font-size: 13px; line-height: 1.35; }
.meter { display: grid; gap: 13px; margin-top: 16px; padding: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); box-shadow: inset 0 0 30px rgba(24,231,255,.06), 0 0 22px rgba(255,23,77,.06); }
.meter__row { display: grid; grid-template-columns: 126px 1fr; gap: 10px; align-items: center; color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.meter__row b { position: relative; height: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); }
.meter__row b::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--bar); background: var(--bar-color); box-shadow: 0 0 14px color-mix(in srgb, var(--bar-color), transparent 45%); }
.meter__row--regular { --bar: 82%; --bar-color: var(--red); }
.meter__row--gx { --bar: 46%; --bar-color: var(--cyan); }
.meter__row--gx b::before { animation: ramCap 2.8s ease-in-out infinite; }

.proof { position: absolute; left: clamp(70px, 8vw, 128px); bottom: 16px; z-index: 3; display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); width: min(350px, 30vw); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.045); backdrop-filter: blur(12px); opacity: .74; }
.proof div { display: grid; gap: 2px; padding: 9px 12px; background: rgba(0,0,0,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.proof strong { font-size: 20px; line-height: 1; }
.proof span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.outline-word { position: absolute; left: 50%; bottom: -1.4vw; z-index: -1; margin: 0; transform: translateX(-50%); color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.11); text-stroke: 1px rgba(255,255,255,.11); font-size: clamp(92px, 14vw, 230px); font-weight: 1000; line-height: .8; white-space: nowrap; }

@keyframes gridMove { from { background-position-y: 0; } to { background-position-y: 84px; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .58; } }
@keyframes shine { 0%,45% { left: -45%; } 60%,100% { left: 120%; } }
@keyframes ramCap { 0%,100% { width: 52%; } 50% { width: 40%; } }
@keyframes arrowNudge { 0%,82%,100% { transform: translateX(0); } 88% { transform: translateX(6px); } 94% { transform: translateX(0); } }
@keyframes scanDrift { from { transform: translateY(-24px); } to { transform: translateY(24px); } }
@keyframes focusBreath { 0%,100% { opacity: .68; transform: translate(calc(var(--mx) * 20px), calc(var(--my) * 14px)) scale(.96); } 50% { opacity: 1; transform: translate(calc(var(--mx) * 20px), calc(var(--my) * 14px)) scale(1.04); } }
@keyframes ctaBreathe { 0%,100% { box-shadow: 0 0 30px rgba(24,231,255,.38), inset 0 1px 0 rgba(255,255,255,.62), inset 0 -10px 18px rgba(0,0,0,.12); } 50% { box-shadow: 0 0 46px rgba(24,231,255,.6), 0 0 20px rgba(255,23,77,.2), inset 0 1px 0 rgba(255,255,255,.68), inset 0 -10px 18px rgba(0,0,0,.12); } }
@keyframes musicPing { 0%,72%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 20px rgba(0,0,0,.22); } 82% { box-shadow: 0 0 0 6px rgba(24,231,255,.08), 0 0 26px rgba(24,231,255,.24), inset 0 1px 0 rgba(255,255,255,.14); } }

@media (max-width: 1500px) and (min-width: 981px) {
  .hero__content { width: min(630px, 49vw); }
  h1 { font-size: clamp(58px, 6.2vw, 104px); }
  .benefits { max-width: 580px; grid-template-columns: repeat(3, minmax(128px, 1fr)); }
  .benefits span { min-height: 48px; padding: 9px 12px 9px 9px; font-size: 13px; }
  .benefits b { min-width: 38px; height: 28px; font-size: 10px; }
  .cta-deck { max-width: 590px; grid-template-columns: minmax(340px, 1fr) auto; }
  .gx-control { right: clamp(12px, 3vw, 46px); width: min(400px, 29vw); }
  .meter__row { grid-template-columns: 118px 1fr; }
}

@media (max-height: 760px) and (min-width: 981px) {
  .hero__content { top: 112px; width: min(600px, 48vw); }
  h1 { font-size: clamp(56px, 6vw, 96px); }
  .hero__lead { margin-top: 12px; font-size: clamp(16px, 1.2vw, 19px); }
  .benefits { margin-top: 16px; max-width: 550px; }
  .benefits span { min-height: 46px; font-size: 13px; }
  .cta-deck { margin-top: 18px; max-width: 560px; }
  .primary-cta { min-height: 74px; }
  .gx-control { bottom: 92px; width: min(380px, 28vw); }
  .gx-control__screen { min-height: 108px; }
  .proof { width: min(320px, 29vw); }
}

@media (max-width: 980px) {
  body { overflow: auto; }
  .gx-page, .hero { min-height: 100svh; height: auto; overflow: hidden; }
  .hero { display: grid; padding: 0 16px 22px; }
  .topbar, .hero__content, .gx-control, .proof { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; transform: none; }
  .topbar { padding: 18px 0 0; }
  .topbar__nav { display: none; }
  .hero__content { margin-top: 54px; }
  .cta-deck { grid-template-columns: 1fr auto; }
  .gx-control { margin-top: 18px; max-width: 540px; }
  .proof { margin-top: 20px; grid-template-columns: repeat(2, 1fr); }
  .outline-word { display: none; }
}

@media (max-width: 640px) {
  .hero { padding: 0 14px 18px; }
  .hero__video { filter: saturate(1.04) contrast(1.04) brightness(.48); }
  .hero__shade { background: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.48) 38%, rgba(0,0,0,.82)); }
  .hero__grid, .hero__light, .hero__scan, .hero__focus { display: none; }
  .topbar__actions { gap: 7px; padding: 5px; }
  .topbar__cta { min-height: 42px; padding: 0 13px; font-size: 12px; }
  .hud-icon { width: 42px; height: 42px; }
  .hud-icon--web { display: none; }
  .brand__logo { width: 142px; }
  .hero__content { margin-top: 44px; }
  .eyebrow { margin-bottom: 14px; font-size: 12px; }
  h1 { max-width: 11ch; font-size: clamp(48px, 15.8vw, 74px); line-height: .9; }
  .hero__lead { max-width: 34ch; font-size: 17px; }
  .benefits { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
  .benefits span { min-height: 54px; font-size: 15px; }
  .cta-deck { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .primary-cta, .secondary-cta { width: 100%; }
  .primary-cta { min-height: 72px; padding: 0 22px; font-size: clamp(20px, 6.2vw, 26px); clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
  .cta-deck p { font-size: 12px; }
  .gx-control { padding: 16px; }
  .gx-control__screen { min-height: 112px; }
  .meter__row { grid-template-columns: 112px 1fr; }
  .proof { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
/* Scene-dot interactions: NTE-style state changes without hash navigation or layout jumps. */
.hero__content,
.gx-control,
.primary-cta,
.proof,
.hero__light { transition: opacity .38s ease, transform .38s ease, filter .38s ease, box-shadow .38s ease; }

.hero[data-scene="hero"] .hero__content { filter: none; }

.hero[data-scene="control"] .hero__content { opacity: .76; transform: translateX(-10px) scale(.985); }
.hero[data-scene="control"] .gx-control { opacity: 1; transform: translate(calc(var(--mx) * -9px), calc(var(--my) * -7px)) translateY(-20px) scale(1.045); box-shadow: 0 34px 120px rgba(0,0,0,.56), 0 0 70px rgba(255,23,77,.2), inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 72px rgba(255,23,77,.15); }
.hero[data-scene="control"] .meter__row--gx b::before { animation-duration: 1.25s; }
.hero[data-scene="control"] .hero__light { opacity: 1; filter: saturate(1.25); }

.hero[data-scene="download"] .benefits { opacity: .72; }
.hero[data-scene="download"] .gx-control { opacity: .82; transform: translate(calc(var(--mx) * -9px), calc(var(--my) * -7px)) scale(.985); }
.hero[data-scene="download"] .primary-cta { transform: translateY(-3px) scale(1.035); filter: brightness(1.14) saturate(1.08); box-shadow: 0 0 52px rgba(255,23,77,.72), 0 24px 70px rgba(255,74,32,.34), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -10px 0 rgba(0,0,0,.2), inset 0 0 40px rgba(255,209,102,.14); }
.hero[data-scene="download"] .primary-cta b { animation-duration: 1.7s; }
.hero[data-scene="download"] .proof { opacity: .78; transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .hero__content,
  .gx-control,
  .primary-cta,
  .proof,
  .hero__light { transition: none; }
}