:root { --ink:#030305; --paper:#f7f7f2; --volt:#b4ff39; --violet:#8d5bff; --cyan:#1fd8ff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; overflow-x:hidden; background:radial-gradient(circle at 72% 43%, #111425 0, #05050a 29%, #030305 63%); color:var(--paper); font-family:Arial, Helvetica, sans-serif; }
.noise { position:fixed; inset:0; z-index:5; pointer-events:none; opacity:.08; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); mix-blend-mode:screen; }
.grid { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.22; background:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.07) 50%,transparent 50.2%) center/118px 118px,linear-gradient(transparent 49.8%,rgba(255,255,255,.055) 50%,transparent 50.2%) center/118px 118px; mask-image:linear-gradient(to bottom,black,transparent 75%); }
main { position:relative; z-index:1; min-height:100vh; max-width:1600px; margin:auto; padding:0 5vw; }
.nav { height:96px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.12); letter-spacing:.06em; font-size:11px; font-weight:700; }
.brand { color:var(--paper); text-decoration:none; font-size:16px; letter-spacing:-.06em; font-weight:900; transform:skew(-8deg); }
.brand-dot,.live-dot { display:inline-block; border-radius:50%; background:var(--volt); box-shadow:0 0 18px var(--volt); }
.brand-dot { width:9px; height:9px; margin:0 8px 1px 0; }
.nav-meta { color:#9d9ca6; display:flex; gap:8px; align-items:center; }
.live-dot { width:6px; height:6px; animation:blink 1s steps(2,end) infinite; }
.hero { min-height:calc(100vh - 96px); display:grid; grid-template-columns:minmax(390px,.83fr) 1.17fr; align-items:center; gap:1vw; padding:46px 0 36px; }
.hero-copy { position:relative; z-index:3; }
.eyebrow { margin:0 0 20px; color:var(--volt); font-size:11px; font-weight:800; letter-spacing:.17em; }
.eyebrow span { display:inline-block; width:26px; height:1px; background:var(--volt); vertical-align:middle; margin:0 9px 3px 0; }
h1 { margin:0; font-size:clamp(62px,8.3vw,143px); line-height:.8; letter-spacing:-.095em; font-weight:950; }
h1 em { color:var(--volt); font-style:normal; text-shadow:0 0 30px rgba(180,255,57,.17); }
h1 span { color:transparent; -webkit-text-stroke:1px rgba(247,247,242,.6); font-size:.5em; letter-spacing:-.07em; display:inline-block; margin-left:.11em; }
.intro { max-width:415px; margin:32px 0 26px; color:#b5b5bf; font-size:16px; line-height:1.5; }
.actions { display:flex; flex-wrap:wrap; gap:10px; }
.button { display:inline-flex; gap:18px; align-items:center; padding:15px 17px; border:1px solid rgba(255,255,255,.26); text-decoration:none; color:var(--paper); font-weight:800; letter-spacing:.08em; font-size:11px; transition:transform .2s,background .2s,color .2s; }
.button:hover { transform:translateY(-3px); }
.button i { font-style:normal; font-size:16px; line-height:8px; }
.primary { color:#111308; border-color:var(--volt); background:var(--volt); box-shadow:0 0 27px rgba(180,255,57,.22); }
.ghost:hover { background:var(--paper); color:var(--ink); }
.telemetry { display:flex; gap:23px; margin-top:48px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); max-width:430px; }
.telemetry div { display:grid; gap:4px; }
.telemetry b { font-size:18px; letter-spacing:-.05em; }
.telemetry span { color:#767681; font-size:8px; font-weight:700; letter-spacing:.13em; white-space:nowrap; }
.hero-art { position:relative; min-height:550px; display:flex; align-items:center; isolation:isolate; overflow:visible; }
.hero-art img { position:relative; z-index:1; width:124%; max-width:none; margin-left:-17%; mix-blend-mode:screen; filter:contrast(1.12) saturate(1.23); transform:perspective(900px) rotateY(-4deg) translate3d(var(--tilt-x,0),var(--tilt-y,0),0); animation:float 5s ease-in-out infinite; }
.art-glow { position:absolute; z-index:0; width:68%; height:62%; right:-6%; top:20%; border-radius:50%; background:radial-gradient(ellipse,rgba(67,120,255,.22),rgba(117,61,255,.11) 35%,transparent 70%); filter:blur(27px); }
.art-label { position:absolute; z-index:2; color:#b0afb9; letter-spacing:.18em; font-size:9px; font-weight:700; }
.art-label.top { top:9%; right:5%; }
.art-label.bottom { bottom:11%; right:2%; color:var(--volt); }
.particle-field { position:absolute; z-index:2; inset:0; pointer-events:none; overflow:hidden; }
.p { position:absolute; display:grid; place-items:center; width:34px; height:34px; border:1px solid currentColor; border-radius:8px; background:rgba(4,8,13,.62); font-size:9px; letter-spacing:.02em; box-shadow:0 0 18px currentColor; animation:shoot 2.4s linear infinite; }
.p1 { color:var(--volt); left:41%; top:48%; animation-delay:-.2s; }.p2 { color:var(--cyan); left:43%; top:54%; animation-delay:-.8s; }.p3 { color:#d4c2ff; left:38%; top:45%; animation-delay:-1.3s; }.p4 { color:var(--violet); left:47%; top:51%; animation-delay:-1.7s; }.p5 { color:var(--volt); left:43%; top:57%; animation-delay:-2.1s; }.p6 { color:var(--cyan); left:45%; top:44%; animation-delay:-.5s; }
.signal { margin:0 -5vw; padding:20px 5vw 27px; overflow:hidden; white-space:nowrap; border-top:1px solid rgba(255,255,255,.12); font-size:clamp(20px,2.5vw,42px); letter-spacing:-.06em; font-weight:900; }
.signal p { margin:0; animation:marquee 12s linear infinite; }.signal span { color:var(--volt); }
@keyframes float { 50% { transform:perspective(900px) rotateY(-2deg) translate3d(var(--tilt-x,0),calc(var(--tilt-y,0) - 8px),0); } }
@keyframes shoot { 0% { transform:translate3d(0,0,0) rotate(0deg) scale(.3); opacity:0; } 10% { opacity:1; } 82% { opacity:1; } 100% { transform:translate3d(340px,-145px,0) rotate(250deg) scale(1.15); opacity:0; } }
@keyframes blink { 50% { opacity:.25; } } @keyframes marquee { to { transform:translateX(-28%); } }
@media (max-width:820px) { .nav {height:70px}.nav-meta {display:none}.hero{grid-template-columns:1fr; padding-top:48px; gap:12px}.hero-copy{order:1}.hero-art{order:0;min-height:auto;height:49vw;align-items:flex-start}.hero-art img{width:126%;margin:-8% 0 0 -15%}.art-label{display:none}.telemetry{margin-top:31px}.signal{margin-top:28px}.p{width:25px;height:25px;font-size:7px}@keyframes shoot{100%{transform:translate3d(210px,-95px,0) rotate(250deg) scale(1.15);opacity:0}} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }