:root { color-scheme: dark; --white:#f7f8fc; --muted:#8b97aa; --cyan:#58dddf; --violet:#b875d7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--white); background:#030713; font-family:Manrope,sans-serif; }
.scene { position:fixed; inset:0; z-index:-3; background:linear-gradient(180deg,rgba(2,6,18,.12),rgba(2,6,18,.38)),url("assets/surya-cosmic-hero.png") center 42%/cover no-repeat; animation:arrive 2.2s ease-out both; }
.scene::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at center 54%,transparent 8%,rgba(1,5,15,.13) 48%,rgba(1,4,12,.58) 100%); }
.grain { position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.13; 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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); }
.page-shell { width:calc(100% - 72px); min-height:calc(100vh - 72px); margin:36px; display:grid; grid-template-rows:92px 1fr 96px; border:1px solid rgba(255,255,255,.08); background:rgba(2,7,19,.08); box-shadow:0 0 80px rgba(0,0,0,.42),inset 0 0 100px rgba(0,0,0,.16); }
header,footer { width:calc(100% - 88px); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
.brand { display:inline-flex; align-items:center; gap:12px; color:#fff; text-decoration:none; font-size:.72rem; font-weight:700; letter-spacing:.18em; }
.brand-symbol { width:31px; height:31px; display:flex; align-items:flex-end; justify-content:center; gap:3px; padding:7px; border:1px solid rgba(255,255,255,.3); }
.brand-symbol i { display:block; width:3px; background:#fff; transform:rotate(25deg); }
.brand-symbol i:nth-child(1){height:8px;opacity:.55}.brand-symbol i:nth-child(2){height:16px}.brand-symbol i:nth-child(3){height:11px;opacity:.75}
nav { display:flex; align-items:center; gap:clamp(26px,4vw,60px); }
nav a { color:#7f8ba0; text-decoration:none; font-size:.64rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; transition:color .25s ease; }
nav a:hover,nav a.active { color:#fff; }
nav a.active::after { content:""; display:block; width:14px; height:1px; margin:8px auto 0; background:var(--cyan); }
.launch-status { display:inline-flex; align-items:center; gap:8px; color:#a4afc0; font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; }
.launch-status i { width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 14px var(--cyan); animation:blink 2s infinite; }
main { position:relative; display:grid; place-items:center; min-height:590px; }
.hero { width:min(1000px,80%); text-align:center; transform:translateY(4vh); }
.overline { margin:0 0 24px; color:#a2acbd; font-size:.67rem; font-weight:500; letter-spacing:.54em; text-transform:uppercase; }
h1 { margin:0; color:#fff; font-size:clamp(3.6rem,8.2vw,9.4rem); font-weight:500; line-height:.96; letter-spacing:.28em; text-indent:.28em; text-transform:uppercase; text-shadow:0 7px 35px rgba(0,0,0,.75); }
.summary { margin:25px auto 0; color:#a6b0c0; font-size:clamp(.78rem,1vw,.96rem); line-height:1.9; letter-spacing:.12em; text-transform:uppercase; text-shadow:0 3px 18px #000; }
.progress { width:min(330px,70vw); margin:34px auto 0; }
.progress>span { display:block; height:4px; overflow:hidden; background:rgba(255,255,255,.1); }
.progress>span i { display:block; width:68%; height:100%; background:linear-gradient(90deg,var(--cyan),var(--violet)); box-shadow:0 0 18px rgba(88,221,223,.45); }
.progress small { display:block; margin-top:13px; color:#778398; font-size:.57rem; letter-spacing:.22em; text-transform:uppercase; }
.side-note { position:absolute; left:32px; top:50%; color:#627087; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; writing-mode:vertical-rl; transform:translateY(-50%) rotate(180deg); }
.side-index { position:absolute; right:32px; top:50%; display:grid; gap:14px; transform:translateY(-50%); color:#536078; font-size:.57rem; }
.side-index b { color:#fff; font-weight:600; }
.side-index b::after { content:""; display:inline-block; width:18px; height:1px; margin:0 0 3px 9px; background:var(--cyan); }
footer { color:#778398; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; }
footer div { display:grid; gap:5px; }
footer small { color:#536077; font-size:.52rem; letter-spacing:.2em; }
footer strong,footer a { color:#b9c2d1; font-size:.62rem; font-weight:500; text-decoration:none; }
.footer-right { text-align:right; }
@keyframes arrive { from{opacity:0;transform:scale(1.04)} to{opacity:1;transform:scale(1)} }
@keyframes blink { 50%{opacity:.35} }
@media (max-width:760px) {
 .page-shell{width:calc(100% - 20px);min-height:calc(100vh - 20px);margin:10px;grid-template-rows:72px 1fr 90px}
 header,footer{width:calc(100% - 34px)} nav{display:none}.brand{font-size:.64rem}.launch-status{font-size:.54rem}
 main{min-height:580px}.hero{width:94%;transform:translateY(2vh)}.overline{font-size:.54rem;letter-spacing:.3em}
 h1{font-size:clamp(3rem,15vw,5.5rem);letter-spacing:.12em;text-indent:.12em}.summary{letter-spacing:.08em}
 .side-note{display:none}.side-index{right:13px}footer>p{display:none}.scene{background-position:50% center}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}}