:root{--navy:#030615;--cyan:#25dcff;--violet:#9d5cff;--pink:#ff4fc3;--green:#19efa0;--gold:#ffd05b}
body{background:radial-gradient(circle at 78% 5%,#242061 0,#07112d 29%,#020510 72%)}
body:before{content:"";position:fixed;inset:-35%;z-index:-2;background:conic-gradient(from 40deg,#00e5ff16,#a94dff20,#ff3eb514,#00f09d18,#00e5ff16);filter:blur(70px);animation:nebula 22s linear infinite}
#stars{opacity:.82}.top{height:92px;background:#03071bdc;backdrop-filter:blur(24px);border-bottom-color:#67ddff24;box-shadow:0 12px 50px #0006}
.brand{position:relative;display:block;padding:5px 14px;border-radius:18px;background:linear-gradient(120deg,#12e8ff0c,#b848ff12,#18ef9e0c);border:1px solid #70e4ff20}
.brand:after{content:"";position:absolute;inset:-1px;border-radius:18px;background:linear-gradient(90deg,#25e9ff,#a65aff,#ff50be,#22eaa0);z-index:-1;filter:blur(11px);opacity:.36;animation:brandGlow 4s ease-in-out infinite}.brand img{width:270px;max-height:70px;filter:drop-shadow(0 0 15px #33e7ff55) saturate(1.2)}
.space-scene{width:min(46vw,640px);aspect-ratio:1;position:relative;margin:auto;perspective:1100px;transform-style:preserve-3d;animation:float 5s ease-in-out infinite;background:radial-gradient(circle,#2f89ff2b 0,#9e44ff15 34%,transparent 68%)}
.orbit-halo{position:absolute;inset:5%;border-radius:50%;background:conic-gradient(from 0deg,#23eaff00,#23eaff88,#a64dff18,#ff54c788,#15f4a400,#23eaff88);filter:blur(22px);animation:spin 13s linear infinite}
.space-scene .planet{position:absolute;inset:31%;z-index:6;border-radius:50%;background:radial-gradient(circle at 28% 20%,#84fff7,#1680c9 28%,#311873 58%,#020714 78%);box-shadow:0 0 35px #2deaff,0 0 95px #8353ff88,inset -18px -20px 35px #000b;display:grid;place-items:center;overflow:hidden;animation:planetSpin 18s linear infinite}
.space-scene .planet:before{content:"";position:absolute;inset:-25%;background:repeating-linear-gradient(112deg,transparent 0 17px,#6dfff722 18px 21px);transform:rotate(-15deg);animation:clouds 12s linear infinite}.space-scene .planet img{width:87%;height:87%;object-fit:contain;position:relative;z-index:3;filter:drop-shadow(0 0 12px #fff8)}.planet-core{position:absolute;inset:31%;border-radius:50%;box-shadow:0 0 30px 12px #1fffe988}
.timeline{position:absolute;inset:8%;border-radius:50%;border:1px solid #55eaff80;transform-style:preserve-3d;box-shadow:0 0 25px #00d5ff31,inset 0 0 25px #994fff22}.timeline-a{animation:orbitSpin 24s linear infinite}.timeline-b{inset:17%;border-color:#bd58ff88;animation:ringB 15s linear infinite}.timeline-c{inset:24%;border-color:#ff5fc688;animation:ringC 19s linear infinite}
.timeline-b:before,.timeline-c:before{content:"";position:absolute;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 12px 5px currentColor;left:8%;top:18%}
.timeline button{--a:calc(var(--i)*30deg);position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px;border-radius:50%;border:1px solid #78efff;background:linear-gradient(145deg,#112f5f,#0a0d2a);color:#fff;font-weight:900;transform:rotate(var(--a)) translateX(clamp(220px,18.5vw,270px)) rotate(calc(-1*var(--a)));box-shadow:0 0 18px #19e6ff77,inset 0 0 17px #8a4fff33;cursor:pointer}.timeline button span{display:grid;place-items:center;width:100%;height:100%;animation:counterSpin 24s linear infinite}.timeline button:nth-child(3n+2){border-color:#bd6cff;box-shadow:0 0 20px #a94fff88}.timeline button:nth-child(3n){border-color:#39f0ad;box-shadow:0 0 20px #22eaa088}
.space-label{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);text-align:center;padding:9px 18px;border-radius:99px;background:#05081bcc;border:1px solid #63e9ff55;box-shadow:0 0 24px #6b4dff4a;z-index:8;white-space:nowrap}.space-label strong,.space-label span{display:block}.space-label strong{letter-spacing:.18em;font-size:11px;color:#6df5ff}.space-label span{font-size:11px;color:#bdafd4;margin-top:3px}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes orbitSpin{to{transform:rotate(360deg)}}@keyframes counterSpin{to{transform:rotate(-360deg)}}@keyframes planetSpin{to{transform:rotate(360deg)}}@keyframes clouds{to{transform:rotate(345deg)}}@keyframes ringB{from{transform:rotateX(68deg) rotateZ(25deg)}to{transform:rotateX(68deg) rotateZ(385deg)}}@keyframes ringC{from{transform:rotateY(68deg) rotateZ(-20deg)}to{transform:rotateY(68deg) rotateZ(340deg)}}@keyframes nebula{to{transform:rotate(360deg)}}@keyframes brandGlow{50%{opacity:.78;filter:blur(15px)}}
@media(max-width:900px){.top{height:76px}.brand{padding:2px 8px}.brand img{width:195px}.space-scene{width:min(92vw,530px);margin-top:30px}.timeline button{transform:rotate(var(--a)) translateX(min(40vw,220px)) rotate(calc(-1*var(--a)));width:52px;height:52px;margin:-26px;font-size:11px}}
@media(max-width:520px){.space-scene{margin-bottom:18px}.timeline button{transform:rotate(var(--a)) translateX(min(39vw,182px)) rotate(calc(-1*var(--a)));width:45px;height:45px;margin:-22.5px;font-size:9px}.space-label{bottom:-2%}}@media(prefers-reduced-motion:reduce){.timeline,.timeline button span,.space-scene .planet,.orbit-halo,body:before{animation-duration:60s!important}}