:root {
  --ink: #08050f;
  --panel: #0d0817;
  --paper: #f5f0ff;
  --muted: #9e95b0;
  --line: rgba(218, 202, 255, .18);
  --pink: #ff2bd6;
  --purple: #8c3cff;
  --cyan: #39f6ff;
  --lime: #caff45;
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --mono: "Cascadia Mono", "Lucida Console", "Courier New", monospace;
  --page: clamp(1.25rem, 4.2vw, 4.75rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--pink) var(--ink); }
body { margin: 0; overflow-x: hidden; color: var(--paper); background: var(--ink); font-family: var(--mono); font-size: 15px; line-height: 1.65; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
::selection { color: var(--ink); background: var(--cyan); }
.atmosphere { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px); background-size: 74px 74px; mask-image: linear-gradient(black 5%, transparent 78%); }
.glow { position: absolute; width: 52vw; aspect-ratio: 1; border-radius: 50%; filter: blur(150px); opacity: .15; }
.glow--pink { top: 48vh; left: -25vw; background: var(--pink); }
.glow--cyan { top: -28vw; right: -14vw; background: var(--cyan); }
.scanlines { position: absolute; inset: 0; opacity: .025; background: repeating-linear-gradient(to bottom, white 0, white 1px, transparent 1px, transparent 4px); }
.cursor-glow { position: fixed; z-index: 80; width: 260px; height: 260px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(57,246,255,.09), transparent 68%); transform: translate(-50%, -50%); transition: opacity .2s; }

.site-header { position: absolute; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; min-height: 92px; padding: 1.25rem var(--page); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .8rem; }
.brand__mark { display: grid; place-items: center; width: 52px; height: 43px; color: var(--ink); background: var(--cyan); clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); font-family: var(--display); font-size: .8rem; letter-spacing: -.07em; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__text strong { font-family: var(--display); font-size: .9rem; font-weight: 400; letter-spacing: .025em; }
.brand__text small { margin-top: .32rem; color: var(--muted); font-size: .52rem; letter-spacing: .12em; }
.header-status { display: flex; gap: 2.5rem; color: var(--muted); font-size: .55rem; letter-spacing: .12em; }
.header-status span:first-child { color: var(--cyan); }
.header-status i { display: inline-block; width: 6px; height: 6px; margin-right: .4rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); animation: pulse 1.6s ease-in-out infinite; }

.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr); align-items: center; min-height: 100svh; padding: 128px var(--page) 112px; overflow: hidden; }
.hero__copy { position: relative; z-index: 3; max-width: 760px; }
.eyebrow { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.45rem; color: var(--cyan); font-size: .65rem; text-transform: uppercase; letter-spacing: .18em; }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 13px var(--cyan); animation: pulse 1.6s ease-in-out infinite; }
h1, p { margin-top: 0; }
h1 { margin-bottom: 0; font-family: var(--display); font-weight: 400; line-height: .82; letter-spacing: -.055em; }
h1 { font-size: clamp(4.4rem, 10.2vw, 9.8rem); }
h1 span { color: transparent; -webkit-text-stroke: clamp(1px, .13vw, 2px) var(--pink); filter: drop-shadow(0 0 15px rgba(255,43,214,.25)); }
.hero__intro { max-width: 610px; margin: 2rem 0 0; color: #c4bbd2; font-size: clamp(.95rem, 1.4vw, 1.15rem); line-height: 1.9; }
.hero__actions { display: flex; align-items: center; gap: 2rem; margin-top: 2.25rem; }
.hero__actions > p { margin: 0; color: var(--muted); font-size: .55rem; letter-spacing: .1em; }
.hero__actions > p span { color: var(--pink); }
.status-chip { display: inline-flex; align-items: center; gap: .75rem; min-width: 205px; padding: 1rem 1.25rem; color: var(--ink); background: var(--pink); box-shadow: 10px 10px 0 rgba(140,60,255,.25); font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; }
.status-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: pulse 1.6s ease-in-out infinite; }

.hero__visual { position: relative; z-index: 2; display: grid; place-items: center; min-height: 570px; }
.deck-frame { position: relative; width: min(100%, 590px); aspect-ratio: 1; border: 1px solid rgba(57,246,255,.23); background: radial-gradient(circle, rgba(140,60,255,.13), transparent 62%); clip-path: polygon(0 0, 88% 0, 100% 12%, 100% 100%, 12% 100%, 0 88%); transition: transform .2s ease-out; }
.deck-frame::before, .deck-frame::after { content: ""; position: absolute; z-index: 3; background: var(--cyan); box-shadow: 0 0 13px var(--cyan); }
.deck-frame::before { top: -1px; left: 12%; width: 18%; height: 2px; }
.deck-frame::after { right: -1px; bottom: 17%; width: 2px; height: 20%; }
.frame-copy { position: absolute; z-index: 5; color: var(--muted); font-size: .47rem; letter-spacing: .13em; }
.frame-copy--top { top: 1rem; left: 1rem; }
.frame-copy--side { top: 1.1rem; right: -1.3rem; writing-mode: vertical-rl; }
.rabbit-hole { position: absolute; inset: 11%; display: grid; place-items: center; perspective: 850px; transform-style: preserve-3d; }
.rabbit-hole::before { content: ""; position: absolute; inset: 5%; border-radius: 50%; background: var(--pink); filter: blur(95px); opacity: .12; }
.ring { position: absolute; width: var(--size); height: var(--size); border: 1px solid var(--ring-color, rgba(57,246,255,.58)); transform: rotate(var(--rotation)) translateZ(var(--depth)); animation: tunnel var(--speed) ease-in-out infinite alternate; box-shadow: 0 0 15px rgba(57,246,255,.06), inset 0 0 15px rgba(57,246,255,.05); }
.ring--1 { --size: 90%; --rotation: 8deg; --depth: 0; --speed: 3.4s; }
.ring--2 { --size: 72%; --rotation: 20deg; --depth: 30px; --speed: 3.1s; --ring-color: rgba(255,43,214,.62); }
.ring--3 { --size: 56%; --rotation: 34deg; --depth: 60px; --speed: 2.8s; }
.ring--4 { --size: 41%; --rotation: 50deg; --depth: 90px; --speed: 2.5s; --ring-color: rgba(255,43,214,.7); }
.ring--5 { --size: 28%; --rotation: 67deg; --depth: 120px; --speed: 2.2s; }
.ring--6 { --size: 17%; --rotation: 82deg; --depth: 150px; --speed: 1.9s; --ring-color: rgba(255,43,214,.8); }
.core { position: relative; z-index: 4; display: grid; place-items: center; width: 11%; aspect-ratio: 1; color: var(--ink); border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan), 0 0 48px rgba(57,246,255,.6); font-family: var(--display); font-size: clamp(1.1rem, 2vw, 2rem); animation: corePulse 1.5s ease-in-out infinite; }
.orbit { position: absolute; z-index: 5; width: 83%; height: 29%; border: 1px solid rgba(255,43,214,.42); border-radius: 50%; transform: rotate(-17deg); animation: orbitSpin 8s linear infinite; }
.orbit--b { width: 74%; height: 24%; border-color: rgba(57,246,255,.38); transform: rotate(72deg); animation-duration: 10s; animation-direction: reverse; }
.orbit i { position: absolute; top: 50%; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 12px var(--pink); }
.orbit--b i { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.packet-card, .target-card { position: absolute; z-index: 6; padding: .8rem; border: 1px solid var(--line); background: rgba(8,5,15,.86); backdrop-filter: blur(12px); }
.packet-card { bottom: 2.1rem; left: 1.2rem; width: 172px; }
.packet-card > span, .target-card > span { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .45rem; letter-spacing: .12em; }
.packet-card strong { font-size: .78rem; font-weight: 400; }
.packet-card > div { display: flex; gap: 3px; margin-top: .55rem; }
.packet-card i { display: block; width: 19%; height: 2px; background: var(--cyan); box-shadow: 0 0 4px var(--cyan); animation: packet 1s ease-in-out infinite alternate; }
.packet-card i:nth-child(2) { animation-delay: -.2s; }.packet-card i:nth-child(3) { animation-delay: -.4s; }.packet-card i:nth-child(4) { animation-delay: -.6s; }.packet-card i:nth-child(5) { animation-delay: -.8s; }
.target-card { top: 2.8rem; right: 1.3rem; min-width: 158px; }
.target-card strong { display: block; color: var(--pink); font-family: var(--display); font-size: 1.35rem; font-weight: 400; }
.target-card small { color: var(--muted); font-size: .41rem; letter-spacing: .06em; }

.hero__meta { position: absolute; right: var(--page); bottom: 1.45rem; left: var(--page); display: grid; grid-template-columns: repeat(3, 1fr) 1.35fr; align-items: end; padding-top: 1rem; border-top: 1px solid var(--line); }
.hero__meta > div:not(.scroll-cue) { display: flex; flex-direction: column; }
.hero__meta small { color: var(--muted); font-size: .47rem; letter-spacing: .12em; }
.hero__meta strong { font-size: .68rem; font-weight: 400; }
.scroll-cue { display: flex; justify-content: end; gap: .8rem; color: var(--muted); font-size: .5rem; letter-spacing: .12em; }
.scroll-cue i { color: var(--cyan); font-size: .55rem; font-style: normal; animation: pulse 1.5s ease-in-out infinite; }

.ticker { position: relative; z-index: 10; width: 106%; margin-left: -3%; overflow: hidden; color: var(--ink); background: var(--cyan); transform: rotate(-1deg); box-shadow: 0 0 35px rgba(57,246,255,.2); }
.ticker__track { display: flex; align-items: center; gap: 2.6rem; width: max-content; padding: .72rem 0; font-family: var(--display); font-size: .78rem; letter-spacing: .08em; animation: ticker 22s linear infinite; }
.ticker__track i { font-style: normal; }

footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding: 2rem var(--page); color: var(--muted); background: #050309; font-size: .48rem; letter-spacing: .1em; }
.brand--footer .brand__mark { width: 42px; height: 35px; font-size: .65rem; }
.brand--footer .brand__text strong { color: var(--paper); font-size: .7rem; }
footer p { margin: 0; text-align: center; }
footer > a { justify-self: end; }
footer > a:hover { color: var(--cyan); }

@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@keyframes tunnel { from { transform: rotate(var(--rotation)) translateZ(var(--depth)) scale(.94); } to { transform: rotate(calc(var(--rotation) + 18deg)) translateZ(var(--depth)) scale(1.04); } }
@keyframes corePulse { 0%,100% { transform: scale(.9); } 50% { transform: scale(1.08); } }
@keyframes orbitSpin { to { transform: rotate(343deg); } }
@keyframes packet { to { opacity: .25; transform: scaleX(.5); } }
@keyframes ticker { to { transform: translateX(-50%); } }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr 1fr; }
  .hero__visual { min-height: 480px; }
  .deck-frame { width: min(100%, 470px); }
}

@media (max-width: 800px) {
  .site-header { min-height: 78px; }
  .header-status span:first-child { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 125px; padding-bottom: 150px; }
  .hero__copy { max-width: 680px; }
  .hero__visual { min-height: 510px; margin-top: 3rem; }
  .deck-frame { width: min(90vw, 510px); }
  .hero__meta { grid-template-columns: repeat(3, 1fr); }
  .scroll-cue { display: none; }
  footer { grid-template-columns: 1fr 1fr; }
  footer p { display: none; }
}

@media (max-width: 540px) {
  body { font-size: 14px; }
  .brand__text { display: none; }
  .header-status { font-size: .48rem; }
  .hero { min-height: auto; padding-top: 115px; }
  .hero__copy { width: calc(100vw - 2.5rem); }
  h1 { font-size: clamp(4rem, 21vw, 6rem); }
  .hero__intro { line-height: 1.75; }
  .hero__visual { min-height: 390px; margin-top: 2.5rem; }
  .hero__visual { width: 100%; min-width: 0; }
  .deck-frame { width: calc(100vw - 2.5rem); }
  .frame-copy--side { display: none; }
  .packet-card { bottom: .8rem; left: .7rem; width: 145px; }
  .target-card { top: 2.1rem; right: auto; left: 52%; width: 130px; min-width: 0; }
  .hero__meta { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .hero__meta > div:nth-child(2) { display: none; }
  footer { gap: 1rem; }
}

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