:root { --cyan:#0deaff; --blue:#2877ff; --violet:#9a31ff; --coral:#ff625a; --mx:0; --my:0; }
* { box-sizing:border-box; }
html, body { width:100%; min-height:100%; margin:0; overflow:hidden; background:#020319; }
body { color:#fff; font-family:Arial, Helvetica, sans-serif; }
.scene { position:relative; isolation:isolate; width:100%; height:100svh; min-height:540px; overflow:hidden; background:radial-gradient(circle at 50% 43%,#101b70 0,#090b42 24%,#040522 52%,#01010d 100%); }
.scene:after { content:""; position:absolute; inset:0; z-index:20; pointer-events:none; background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,10,.52) 100%); box-shadow:inset 0 0 120px #000; }
.nebula { position:absolute; filter:blur(70px); opacity:.25; border-radius:50%; mix-blend-mode:screen; }
.nebula-a { width:55vw;height:34vw;left:-16vw;top:5%;background:#087cfa;transform:rotate(-20deg); }
.nebula-b { width:44vw;height:30vw;right:-15vw;top:18%;background:#8a1cff;transform:rotate(25deg); }
.stars { position:absolute;inset:-10%;background-repeat:repeat;transform:translate(calc(var(--mx) * -5px),calc(var(--my) * -5px)); }
.stars-far { opacity:.55;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.3px);background-size:61px 61px; }
.stars-near { opacity:.6;background-image:radial-gradient(circle,#72eaff 0 1px,transparent 1.5px);background-size:123px 97px;transform:translate(calc(var(--mx) * -10px),calc(var(--my) * -8px)) rotate(17deg); }
.hero { position:absolute;z-index:5;left:50%;top:46%;width:min(70vw,760px);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center; }
.logo-wrap { position:relative;width:min(48vh,46vw,470px);aspect-ratio:1;transform:translate(calc(var(--mx) * 5px),calc(var(--my) * 4px));animation:float 7s ease-in-out infinite; }
.logo { position:relative;z-index:2;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 18px rgba(19,198,255,.32)) drop-shadow(0 18px 30px rgba(0,0,0,.6)); }
.logo-halo { position:absolute;inset:17%;border-radius:50%;background:radial-gradient(circle,rgba(16,82,255,.34),rgba(16,82,255,.08) 42%,transparent 71%);box-shadow:0 0 80px rgba(35,83,255,.38);animation:pulse 4s ease-in-out infinite; }
.wordmark { margin-top:clamp(-42px,-4vh,-20px);text-align:center;position:relative;z-index:3;text-shadow:0 4px 22px #000; }
h1 { margin:0;font-size:clamp(42px,7vw,82px);line-height:.95;font-weight:900;letter-spacing:.06em;font-style:italic;transform:skew(-5deg); }
h1 span { background:linear-gradient(180deg,#fff 6%,#52e7ff 54%,#1d77ff 96%);-webkit-background-clip:text;background-clip:text;color:transparent; }
h1 b { margin-left:.04em;background:linear-gradient(180deg,#ff756d,#ff373d);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(255,71,76,.35)); }
.coordinates { margin-top:10px;color:#9cccf8;font:700 clamp(8px,1vw,11px)/1 monospace;letter-spacing:.32em;opacity:.7;white-space:nowrap; }
.coordinates i { display:inline-block;width:25px;height:1px;background:#20ddff;vertical-align:middle;margin:0 12px;box-shadow:0 0 8px #20ddff; }
.signal { position:absolute;border:1px solid rgba(31,206,255,.16);border-radius:50%;transform:rotate(-12deg); }
.signal-one { width:130%;height:54%;top:24%; }
.signal-two { width:95%;height:42%;top:30%;transform:rotate(42deg);border-color:rgba(152,50,255,.14); }
.signal span { position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 7px 3px var(--cyan),0 0 20px 5px var(--blue);animation:blink 2.6s ease-in-out infinite; }
.signal span:nth-child(1){left:7%;top:27%}.signal span:nth-child(2){right:5%;bottom:28%;animation-delay:-.8s}.signal span:nth-child(3){left:59%;bottom:-3px;animation-delay:-1.6s}
.beacon { position:absolute;z-index:3;width:9px;height:9px;border:1px solid #94efff;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px #28aaff; }
.beacon:after,.beacon:before { content:"";position:absolute;left:50%;top:50%;width:42px;height:42px;border:1px solid rgba(35,212,255,.4);border-radius:50%;transform:translate(-50%,-50%);animation:ripple 3s linear infinite; }
.beacon:after { animation-delay:-1.5s; }.beacon-a{left:11%;top:25%}.beacon-b{right:12%;top:33%}.beacon-c{left:22%;bottom:18%}.beacon-d{right:24%;bottom:16%}
.horizon { position:absolute;z-index:2;left:50%;bottom:-27vw;width:130vw;height:41vw;transform:translateX(-50%); }
.planet { position:absolute;inset:0;border-radius:50% 50% 0 0;background:radial-gradient(ellipse at 50% 0,#132358 0,#061235 35%,#020719 66%);box-shadow:0 -2px 0 #7af2ff,0 -10px 35px rgba(30,144,255,.65),0 -25px 70px rgba(48,68,255,.28); }
.atmosphere { position:absolute;z-index:2;left:9%;right:9%;top:-8px;height:30px;border-radius:50%;background:rgba(41,210,255,.15);filter:blur(12px); }
.city-lights { position:absolute;z-index:3;left:22%;right:22%;top:3%;height:18%;opacity:.45;background-image:radial-gradient(circle,#7ffcff 0 1px,transparent 1.5px);background-size:47px 23px;mask-image:linear-gradient(#000,transparent); }
footer { position:absolute;z-index:30;bottom:18px;left:50%;transform:translateX(-50%);color:rgba(183,218,255,.58);font:600 10px/1 monospace;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap; }
@keyframes float { 50%{transform:translate(calc(var(--mx) * 5px),calc(var(--my) * 4px - 10px));} }
@keyframes pulse { 50%{transform:scale(1.08);opacity:.8;} }
@keyframes blink { 50%{opacity:.3;transform:scale(.65);} }
@keyframes ripple { from{opacity:.75;transform:translate(-50%,-50%) scale(.2)}to{opacity:0;transform:translate(-50%,-50%) scale(1.8)} }
@media (max-width:640px){ .hero{top:45%;width:90vw}.logo-wrap{width:min(53vh,88vw)}.wordmark{margin-top:-36px}.coordinates{letter-spacing:.18em}.signal-one{width:112%}.horizon{bottom:-21vw;width:180vw;height:55vw}.beacon-c,.beacon-d{display:none} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important}.stars,.logo-wrap{transform:none} }