:root { --bg:#08090c; --text:#e9e7df; --muted:#878982; --acid:#d7f84a; --line:rgba(233,231,223,.18); --mono:'DM Mono', monospace; --display:'Space Grotesk', sans-serif; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); }
body { overflow:hidden; font-family:var(--display); cursor:crosshair; }
button, a { color:inherit; font:inherit; }
button { cursor:crosshair; }
#space { position:fixed; inset:0; width:100%; height:100%; display:block; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.07; z-index:1; 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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }
.site-header, .site-footer, main { position:relative; z-index:2; }
.site-header { position:fixed; inset:0 0 auto; height:72px; padding:0 4.5vw; display:flex; justify-content:space-between; align-items:center; }
.brand { display:flex; align-items:center; gap:13px; color:var(--text); font-size:12px; font-weight:600; letter-spacing:.22em; text-decoration:none; }
.brand-mark { position:relative; width:27px; height:20px; display:block; }
.brand-mark i { position:absolute; display:block; width:11px; height:11px; border:1px solid var(--acid); transform:rotate(45deg); }
.brand-mark i:nth-child(1) { top:0; left:0; } .brand-mark i:nth-child(2) { top:8px; left:8px; opacity:.7; } .brand-mark i:nth-child(3) { top:0; left:16px; opacity:.35; }
.header-meta, .site-footer, .signal-readout, .coordinate, .corner-mark, .email-label, .email-tip { font-family:var(--mono); font-size:9px; letter-spacing:.13em; color:var(--muted); }
.header-meta { display:flex; align-items:center; gap:14px; } .status-dot { width:5px; height:5px; border-radius:50%; background:var(--acid); box-shadow:0 0 10px var(--acid); }
.hero { position:relative; height:100vh; min-height:650px; }
.signal-readout { position:absolute; top:91px; left:4.5vw; display:flex; gap:20px; } .signal-readout span:last-child { color:var(--acid); }
.contact-trigger { position:fixed; left:4.5vw; bottom:74px; z-index:4; width:27px; height:27px; padding:0; border:1px solid rgba(215,248,74,.7); border-radius:50%; background:rgba(8,9,12,.5); color:var(--acid); } .trigger-core { position:absolute; inset:8px; border:1px solid var(--acid); border-radius:50%; transition:transform .3s, background .3s; } .contact-trigger:hover .trigger-core { transform:scale(.55); background:var(--acid); } .trigger-label { position:absolute; left:38px; top:7px; color:#60645d; font:9px var(--mono); letter-spacing:.15em; opacity:.8; }
.coordinate { position:fixed; right:4.5vw; top:42%; writing-mode:vertical-rl; display:flex; gap:14px; align-items:center; }
.coordinate small { color:#4f554c; font-size:7px; letter-spacing:.17em; }
.corner-mark { position:fixed; color:#4c504c; } .corner-mark--a { top:28%; right:5%; } .corner-mark--b { bottom:8%; right:5%; } .corner-mark--b b { padding:0 7px; color:#30352f; font-weight:400; } .corner-mark--b span { transition:color .2s, text-shadow .2s; } .corner-mark--b span.is-active { color:var(--acid); text-shadow:0 0 12px rgba(215,248,74,.75); }
.site-footer { position:fixed; inset:auto 0 0; height:31px; padding:0 4.5vw; display:flex; justify-content:space-between; align-items:center; color:#555951; }
.email-popover { position:fixed; z-index:5; pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.8); transition:opacity .35s, transform .5s cubic-bezier(.2,.8,.2,1); display:flex; flex-direction:column; gap:8px; padding:16px 19px; background:rgba(12,14,15,.85); border:1px solid var(--acid); box-shadow:0 0 30px rgba(215,248,74,.12); }
.email-popover.is-visible { opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto; } .email-popover.is-fading { opacity:0; transform:translate(-50%,-50%) scale(.92); pointer-events:none; }
.email-popover a { color:var(--acid); font-size:16px; text-decoration:none; } .email-popover a:hover { text-decoration:underline; } .email-tip { color:#73776f; font-size:8px; }
@media (max-width:700px) { .header-meta { display:none; } .signal-readout { left:9vw; } .coordinate, .corner-mark { display:none; } .site-footer { padding:0 9vw; font-size:8px; } .contact-trigger { left:9vw; } }