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

:root { --night:#0b1020; --ink:#eff4ff; --muted:#9aa6bf; --line:rgba(190,210,244,.17); --lime:#c6ff55; --blue:#88a9ff; --mono:'DM Mono',monospace; --sans:'Manrope',ui-sans-serif,sans-serif; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { background:var(--night); color:var(--ink); font-family:var(--sans); overflow-x:hidden; }
.noise { position:fixed; inset:0; opacity:.045; pointer-events:none; 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='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.shell { width:min(1220px,calc(100% - 64px)); min-height:100vh; margin:auto; display:flex; flex-direction:column; position:relative; }
.nav { height:98px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:lowercase; }
.wordmark { display:flex; gap:11px; align-items:center; color:var(--ink); text-decoration:none; font-weight:500; }
.mark { display:flex; gap:3px; align-items:end; height:20px; }
.mark span { display:block; width:4px; background:var(--lime); transform:skew(-25deg); }
.mark span:nth-child(1){height:9px}.mark span:nth-child(2){height:15px}.mark span:nth-child(3){height:20px}
.status { color:var(--muted); display:flex; gap:8px; align-items:center; }
.status i,.announce-dot { width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(198,255,85,.09); }
.hero { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,8vw,130px); align-items:center; padding:clamp(60px,10vh,110px) 0 74px; }
.copy { position:relative; z-index:2; animation:rise .8s cubic-bezier(.2,.8,.2,1) both; }
.eyebrow { margin:0 0 24px; color:var(--lime); font:11px var(--mono); letter-spacing:.09em; }
h1 { margin:0; max-width:600px; font-size:clamp(48px,6.4vw,92px); line-height:.98; letter-spacing:-.07em; font-weight:700; }
h1 em { color:var(--lime); font-style:normal; }
.lede { max-width:430px; margin:30px 0 35px; color:var(--muted); font-size:16px; line-height:1.65; }
.announce { display:flex; align-items:center; gap:11px; color:var(--ink); font:11px var(--mono); }
.announce strong { color:var(--lime); font-weight:400; }.slash { color:#4a5875; }
.radar { width:min(100%,520px); aspect-ratio:1; justify-self:end; position:relative; border-radius:50%; background:radial-gradient(circle at center,rgba(136,169,255,.13),transparent 34%),radial-gradient(circle,transparent 47%,rgba(136,169,255,.04) 48%,transparent 49%); animation:float 7s ease-in-out infinite; }
.radar:before,.radar:after { content:""; position:absolute; inset:12%; border:1px solid rgba(136,169,255,.12); border-radius:50%; }
.radar:after { inset:26%; }
.radar-glow { position:absolute; inset:34%; border-radius:50%; background:var(--lime); filter:blur(42px); opacity:.16; }
.orbit { position:absolute; inset:0; border:1px solid var(--line); border-radius:50%; transform:rotate(-26deg) scaleY(.34); }
.orbit-one { animation:spin 18s linear infinite; }.orbit-two { inset:14%; transform:rotate(42deg) scaleY(.28); animation:spin 13s linear infinite reverse; }.orbit-three { inset:28%; transform:rotate(84deg) scaleY(.42); animation:spin 11s linear infinite; }
.crosshair { position:absolute; background:var(--line); }.crosshair-x{left:0;right:0;top:50%;height:1px}.crosshair-y{top:0;bottom:0;left:50%;width:1px}
.sweep { position:absolute; width:50%; height:50%; left:50%; top:50%; transform-origin:0 0; background:linear-gradient(45deg,transparent 0 47%,rgba(198,255,85,.2)); clip-path:polygon(0 0,100% 0,0 100%); animation:sweep 5s linear infinite; }
.radar-core { position:absolute; left:50%;top:50%; transform:translate(-50%,-50%); width:94px;height:94px;border-radius:50%; border:1px solid rgba(198,255,85,.7); background:#111a2d; box-shadow:0 0 0 10px rgba(198,255,85,.04),0 0 40px rgba(198,255,85,.18); display:grid; place-content:center; text-align:center; }
.radar-core span { color:var(--lime); font-size:22px; letter-spacing:-.1em; }.radar-core small { color:var(--muted); font:8px/1.35 var(--mono); margin-top:6px; }
.route { position:absolute; display:flex; align-items:center; gap:8px; color:var(--muted); font:10px var(--mono); }.route b { width:8px;height:8px;background:var(--blue);border-radius:50%;box-shadow:0 0 0 4px rgba(136,169,255,.12); }.route-one{top:17%;left:56%}.route-two{right:5%;top:64%}.route-three{left:8%;bottom:19%}.route-two b{background:var(--lime)}
.coordinate { position:absolute; color:#566582; font:9px var(--mono); letter-spacing:.08em; }.coord-top{top:4%;left:50%;transform:translateX(-50%)}.coord-bottom{bottom:4%;left:50%;transform:translateX(-50%);color:var(--lime)}
.footer { display:flex; align-items:center; gap:18px; padding:22px 0 29px; color:#596782; font:10px var(--mono); }.footer-line { height:1px; flex:1; background:var(--line); }
@keyframes spin { to{transform:rotate(334deg) scaleY(.34)} } @keyframes sweep { to{transform:rotate(360deg)} } @keyframes float { 50%{transform:translateY(-10px)} } @keyframes rise { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@media (max-width:760px) { .shell{width:min(100% - 36px,520px)} .nav{height:76px}.status{font-size:0}.status i{font-size:initial}.hero{grid-template-columns:1fr;gap:35px;padding:58px 0 55px}.radar{width:92%;justify-self:center}.lede{font-size:15px}.footer{font-size:9px} }
@media (prefers-reduced-motion:reduce) { .copy,.radar,.orbit,.sweep{animation:none}.sweep{display:none} }