:root { --ink:#eaf0ef; --muted:#a2b0ad; --acid:#ccff00; --dark:#071110; --line:rgba(218,245,240,.16); }
* { box-sizing:border-box; }
html { background:var(--dark); }
body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(circle at 78% 43%, #123a32 0, #091b19 25%, transparent 48%), #071110; font-family:Manrope, sans-serif; overflow-x:hidden; }
.page-shell { position:relative; min-height:100vh; max-width:1510px; margin:auto; padding:30px clamp(24px, 6vw, 94px) 25px; display:flex; flex-direction:column; isolation:isolate; }
.page-shell::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.12; background-image:linear-gradient(var(--line) 1px, transparent 1px),linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:74px 74px; mask-image:linear-gradient(to bottom,black,transparent 75%); }
.nav { height:45px; display:flex; justify-content:space-between; align-items:center; }
.brand { color:var(--ink); font-size:18px; font-weight:800; letter-spacing:2.8px; text-decoration:none; display:flex; align-items:center; gap:11px; }
.brand-mark { width:25px; height:25px; display:flex; gap:3px; align-items:flex-end; transform:skewY(-27deg); }
.brand-mark i { display:block; width:6px; background:var(--acid); border-radius:1px; } .brand-mark i:nth-child(1){height:13px}.brand-mark i:nth-child(2){height:20px}.brand-mark i:nth-child(3){height:25px}
.nav-status, .eyebrow, .visual-label, footer { font-family:"DM Mono", monospace; letter-spacing:.08em; }
.nav-status { color:var(--muted); font-size:10px; text-transform:uppercase; display:flex; align-items:center; gap:8px; }
.nav-status b { width:7px; height:7px; display:block; border-radius:50%; background:var(--acid); box-shadow:0 0 12px var(--acid); }
.hero { flex:1; display:flex; align-items:center; min-height:620px; position:relative; }
.copy { width:64%; position:relative; z-index:2; padding:55px 0; }
.eyebrow { font-size:11px; font-weight:500; color:var(--acid); letter-spacing:.19em; margin:0 0 22px; }
h1 { margin:0; max-width:850px; font-size:clamp(47px, 5.25vw, 83px); line-height:1.05; letter-spacing:-.065em; font-weight:700; }
h1 em { font-family:Georgia, serif; font-weight:400; letter-spacing:-.075em; color:#d1f8ed; }
.intro { max-width:460px; color:var(--muted); line-height:1.7; font-size:15px; margin:28px 0 30px; }
.notify-form { display:flex; width:min(460px, 100%); border:1px solid rgba(216,255,243,.28); padding:5px; background:rgba(2,15,13,.45); backdrop-filter:blur(8px); }
input { min-width:0; flex:1; color:var(--ink); background:transparent; border:0; outline:0; padding:13px 15px; font:13px Manrope,sans-serif; } input::placeholder{color:#82918e}
button { color:#14200c; background:var(--acid); border:0; padding:0 19px; cursor:pointer; font:700 12px Manrope,sans-serif; transition:transform .2s, box-shadow .2s; } button:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 rgba(204,255,0,.28); } button span{font-size:17px; vertical-align:-1px; margin-left:7px}
.form-note { color:#81918e; font-size:10px; margin:12px 0 0 4px; }.form-note.success{color:var(--acid)}
.visual { position:absolute; width:min(50vw, 680px); height:600px; right:-4vw; top:50%; transform:translateY(-50%); perspective:900px; }
.glow { position:absolute; width:390px; height:230px; bottom:105px; left:130px; background:rgba(61,231,178,.24); filter:blur(90px); border-radius:50%; }
.glass-cube { position:absolute; width:260px; height:260px; left:185px; top:153px; transform-style:preserve-3d; transform:rotateX(8deg) rotateY(-25deg) rotateZ(-6deg); animation:float 7s ease-in-out infinite; }
.cube-face { position:absolute; border:1px solid rgba(212,255,241,.48); background:linear-gradient(135deg,rgba(200,255,241,.26),rgba(72,158,139,.03)); backdrop-filter:blur(8px); }
.front { width:230px; height:230px; display:grid; place-items:center; transform:translateZ(60px); box-shadow:inset 0 0 55px rgba(190,255,228,.1),0 0 45px rgba(95,255,193,.12); }.front span { font-family:Georgia,serif; font-size:123px; color:var(--acid); text-shadow:0 0 26px rgba(204,255,0,.42); transform:translateZ(5px); }
.side { width:120px; height:230px; transform:rotateY(90deg) translateZ(170px); transform-origin:left; background:linear-gradient(90deg,rgba(102,235,193,.21),rgba(12,43,37,.25)); }.top { width:230px; height:120px; transform:rotateX(90deg) translateZ(60px); transform-origin:top; background:rgba(164,255,223,.18); }
.orbit { position:absolute; border:1px solid rgba(179,255,230,.24); border-radius:50%; transform:rotateX(68deg) rotateZ(-20deg); }.orbit-one { width:520px; height:520px; top:40px; left:22px; }.orbit-two { width:390px; height:390px; top:105px; left:87px; border-style:dashed; animation:spin 16s linear infinite; }
.orbital-dot { position:absolute; width:11px; height:11px; border-radius:50%; background:var(--acid); box-shadow:0 0 20px var(--acid); }.dot-one{top:112px;left:170px}.dot-two{bottom:95px;right:78px;width:7px;height:7px;background:#9ffff0}
.visual-label { position:absolute; bottom:28px; left:177px; color:#8ea9a2; font-size:9px; }.visual-label span{display:inline-block;width:32px;height:1px;background:#77948d;vertical-align:middle;margin:0 8px}
footer { border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:space-between; color:#82918e; font-size:9px; } footer p{margin:0} footer div{display:flex;gap:10px} footer a{color:#aebdb9;text-decoration:none} footer a:hover{color:var(--acid)}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes float { 50% { transform:rotateX(8deg) rotateY(-25deg) rotateZ(-3deg) translateY(-14px); } } @keyframes spin { to { transform:rotateX(68deg) rotateZ(340deg); } }
@media (max-width:760px){ .page-shell{padding:22px 24px}.nav-status{font-size:8px}.hero{min-height:690px;align-items:flex-start}.copy{width:100%;padding-top:91px}.visual{opacity:.66;right:-180px;top:62%;transform:translateY(-50%) scale(.7);transform-origin:center}.intro{font-size:14px;max-width:390px} h1{font-size:clamp(43px,13vw,62px)}footer{font-size:8px;gap:15px;align-items:flex-end}footer div{flex-direction:column;align-items:flex-end;gap:5px}footer span{display:none} }
@media (max-width:390px){.notify-form{flex-direction:column;padding:6px}.notify-form button{height:45px}.copy{padding-top:70px}}