:root { color-scheme: dark; --paper:#e9edf2; --muted:rgba(225,232,240,.58); --hairline:rgba(225,236,247,.24); --acid:#d9ff52; --page:#080a0d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; padding:14px; overflow-x:hidden; background:var(--page); color:var(--paper); font-family:"Manrope",sans-serif; }
.hero-card { position:relative; min-height:calc(100svh - 28px); overflow:hidden; border:1px solid rgba(173,201,227,.11); border-radius:clamp(26px,3.2vw,54px); background:#07111d; isolation:isolate; }
#space { position:absolute; inset:0; z-index:-3; }
#space canvas { display:block; width:100%; height:100%; }
.vignette { position:absolute; inset:0; z-index:-2; pointer-events:none; background:linear-gradient(180deg,rgba(1,7,13,.64) 0%,transparent 34%,transparent 67%,rgba(1,5,9,.48) 100%),radial-gradient(circle at 50% 48%,transparent 35%,rgba(0,5,10,.42) 100%); }
.grain { position:absolute; inset:-40%; z-index:8; pointer-events:none; opacity:.035; 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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain .22s steps(2) infinite; }
.site-header { position:absolute; inset:0 0 auto; z-index:5; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:27px 31px; font:300 10px/1 "DM Mono",monospace; letter-spacing:.13em; }
.brand { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; }
.brand-orbit { position:relative; width:14px; height:14px; border:1px solid currentColor; border-radius:50%; }
.brand-orbit::after { content:""; position:absolute; width:20px; height:6px; left:-4px; top:4px; border-top:1px solid currentColor; border-radius:50%; transform:rotate(-22deg); }
.mission { color:var(--muted); }
.status { justify-self:end; display:flex; gap:8px; align-items:center; }
.status i { width:5px; height:5px; border-radius:50%; background:var(--acid); box-shadow:0 0 12px var(--acid); animation:pulse 2s infinite; }
.hero-title { position:absolute; z-index:3; top:38%; left:50%; width:min(92%,980px); transform:translate(-50%,-50%); text-align:center; text-shadow:0 2px 24px rgba(3,10,18,.35); }
.kicker { display:block; margin-bottom:20px; color:rgba(226,235,244,.56); font:300 9px/1 "DM Mono",monospace; letter-spacing:.3em; }
h1 { margin:0; font-size:clamp(42px,6.25vw,104px); font-weight:300; line-height:.95; letter-spacing:-.055em; }
.hero-title p { margin:18px 0 0; color:rgba(236,242,248,.78); font:300 clamp(11px,1vw,15px)/1 "DM Mono",monospace; letter-spacing:.38em; }
.hero-bottom { position:absolute; z-index:4; left:6.5%; right:6.5%; bottom:5.5%; }
.intro { margin:0 auto 20px; text-align:center; color:rgba(231,238,244,.67); font:300 9px/1.55 "DM Mono",monospace; letter-spacing:.02em; }
.orbit-scale { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--hairline); }
.orbit-scale div { position:relative; padding:13px 0 0; text-align:center; border-right:1px solid var(--hairline); }
.orbit-scale div:first-child { border-left:1px solid var(--hairline); }
.orbit-scale div::before { content:""; position:absolute; top:-3px; left:50%; width:5px; height:5px; transform:translateX(-50%); border-radius:50%; background:rgba(232,240,248,.42); }
.orbit-scale div:last-child::before { background:var(--acid); box-shadow:0 0 12px var(--acid); }
.orbit-scale span { display:block; margin-bottom:7px; color:rgba(219,229,238,.36); font:300 8px/1 "DM Mono",monospace; }
.orbit-scale strong { font:300 9px/1 "DM Mono",monospace; letter-spacing:.1em; }
.manifesto { min-height:80svh; padding:13vh 5vw 5vh; display:flex; flex-direction:column; justify-content:space-between; }
.section-mark { color:#737980; font:300 9px/1 "DM Mono",monospace; letter-spacing:.15em; }
.manifesto-copy { align-self:center; width:min(100%,1150px); }
.manifesto-copy p { margin:0; font-size:clamp(38px,6.8vw,110px); font-weight:300; line-height:1.04; letter-spacing:-.06em; }
.manifesto-copy p:nth-child(2) { color:#676d75; text-align:center; }
.manifesto-copy p:nth-child(3) { text-align:right; }
.manifesto-copy em { color:var(--acid); font-style:normal; }
.manifesto footer { display:flex; justify-content:space-between; padding-top:18px; border-top:1px solid #23262b; color:#666c73; font:300 9px/1 "DM Mono",monospace; letter-spacing:.1em; }
.loader { position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:var(--page); transition:opacity .7s ease,visibility .7s; font:300 9px/1 "DM Mono",monospace; letter-spacing:.18em; }
.loader i { position:relative; width:140px; height:1px; overflow:hidden; background:#25282d; }
.loader i::after { content:""; position:absolute; inset:0; transform-origin:left; background:var(--acid); animation:load 1.4s cubic-bezier(.7,0,.2,1) both; }
.loader.done { opacity:0; visibility:hidden; }
@keyframes load { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes pulse { 50% { opacity:.35; box-shadow:0 0 4px var(--acid); } }
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(2%,-2%)} 50%{transform:translate(-2%,2%)} 75%{transform:translate(2%,1%)} }
@media (max-width:720px) {
  body { padding:7px; }
  .hero-card { min-height:calc(100svh - 14px); border-radius:25px; }
  .site-header { padding:22px 20px; grid-template-columns:1fr 1fr; }
  .mission { display:none; }
  .hero-title { top:34%; width:94%; }
  .kicker { font-size:8px; letter-spacing:.22em; }
  h1 { font-size:clamp(42px,13vw,70px); }
  .hero-title p { font-size:9px; letter-spacing:.25em; }
  .hero-bottom { left:18px; right:18px; bottom:4%; }
  .intro { margin-bottom:16px; }
  .orbit-scale { grid-template-columns:repeat(2,1fr); }
  .orbit-scale div { padding:10px 0 9px; border-bottom:1px solid var(--hairline); }
  .orbit-scale div:nth-child(3) { border-left:1px solid var(--hairline); }
  .manifesto { padding:11vh 20px 4vh; }
  .manifesto-copy p { font-size:clamp(38px,12vw,64px); }
  .manifesto-copy p:nth-child(2),.manifesto-copy p:nth-child(3) { text-align:left; }
  .manifesto footer { flex-direction:column; gap:12px; }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.grain,.status i{animation:none} }