@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&display=swap');

:root{--blue:#0875ff;--cyan:#16c9ff;--green:#62f28a;--bg:#020711;--white:#f6fbff}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:var(--bg);color:var(--white);font-family:Manrope,Arial,sans-serif}

.scene{position:relative;width:100vw;height:100vh;min-height:640px;overflow:hidden;
background:
radial-gradient(circle at 50% 48%,#0b2848 0,#061526 25%,#030914 57%,#01040a 100%)}

.noise{position:absolute;inset:-50%;opacity:.035;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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)'/%3E%3C/svg%3E");
animation:noise .2s steps(2) infinite}

.grid{position:absolute;inset:-10%;opacity:.17;
background-image:linear-gradient(#1590ff20 1px,transparent 1px),linear-gradient(90deg,#1590ff20 1px,transparent 1px);
background-size:58px 58px;mask-image:radial-gradient(ellipse at center,#000 0,transparent 70%);
transform:perspective(600px) rotateX(59deg) scale(1.8) translateY(18%);
animation:gridMove 18s linear infinite}

.aurora{position:absolute;border-radius:50%;filter:blur(80px);mix-blend-mode:screen;pointer-events:none}
.aurora-a{width:45vw;height:45vw;left:-15vw;top:5vh;background:#006dff;opacity:.24;animation:floatA 11s ease-in-out infinite}
.aurora-b{width:38vw;height:38vw;right:-12vw;bottom:-12vh;background:#21e77d;opacity:.21;animation:floatB 13s ease-in-out infinite}
.aurora-c{width:30vw;height:30vw;left:36%;top:18%;background:#00b7ff;opacity:.14;animation:pulse 6s ease-in-out infinite}

.energy{position:absolute;left:50%;top:50%;height:1px;width:72vw;max-width:1000px;
background:linear-gradient(90deg,transparent,#0875ff55,#62f28a66,#0875ff55,transparent);
filter:blur(1px);transform:translate(-50%,-50%) rotate(-16deg);opacity:.7}
.energy-1{animation:energy1 8s ease-in-out infinite}
.energy-2{transform:translate(-50%,-50%) rotate(17deg);opacity:.35;animation:energy2 10s ease-in-out infinite}

.rings{position:absolute;left:50%;top:50%;width:min(70vw,820px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%}
.ring-1{width:100%;height:100%;border:1px solid #149cff1c;animation:spin 34s linear infinite}
.ring-2{width:76%;height:76%;border:1px solid #55ef8a24;border-left-color:#4ce8ff66;animation:spinR 27s linear infinite}
.ring-3{width:51%;height:51%;border:1px solid #149cff22;border-top-color:#24caff88;animation:spin 19s linear infinite}
.ring-4{width:28%;height:28%;border:1px solid #62f28a35;box-shadow:0 0 80px #0875ff20,inset 0 0 50px #62f28a0b;animation:pulse 4s ease-in-out infinite}
.orb{position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%);
border-radius:50%;background:#fff;box-shadow:0 0 8px #fff,0 0 24px #16c9ff,0 0 55px #0875ff,0 0 90px #62f28a}

.scanline{position:absolute;left:0;right:0;top:-5%;height:1px;
background:linear-gradient(90deg,transparent,#4edcff66,transparent);
box-shadow:0 0 25px #16bfff77;animation:scan 8s linear infinite}

.particles{position:absolute;inset:0;pointer-events:none}
.particle{position:absolute;width:2px;height:2px;border-radius:50%;background:#b5f3ff;box-shadow:0 0 9px #16c9ff;animation:particle linear infinite}

.hud{position:absolute;z-index:12;top:27px;font:8px 'DM Mono',monospace;letter-spacing:.14em;color:#506878}
.hud-left{left:31px}.hud-right{right:31px}
.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);margin-right:8px}

.intro{position:absolute;z-index:10;inset:0;display:flex;align-items:center;flex-direction:column;text-align:center;padding:5vh 24px 25px}
.brand{height:clamp(105px,16vh,175px);display:flex;align-items:center;justify-content:center;margin-bottom:clamp(19px,3.5vh,37px);animation:appear 1.15s cubic-bezier(.2,.8,.2,1) both}
.brand-logo{width:min(43vw,440px);max-height:175px;object-fit:contain;filter:drop-shadow(0 0 18px #0875ff45) drop-shadow(0 0 35px #54ed8730)}
.fallback-logo{display:none;font-size:clamp(82px,13vw,155px);font-weight:800;letter-spacing:-.09em;line-height:1;
background:linear-gradient(100deg,#0d7aff 10%,#11bfff 53%,#65ed88 90%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 28px #0784ff45)}
.fallback-logo span{color:#63ed89}

.eyebrow{font:500 9px 'DM Mono',monospace;letter-spacing:.22em;color:#78b9d8;display:flex;align-items:center;gap:10px;animation:rise 1s .15s both}
.eyebrow span{width:24px;height:1px;background:linear-gradient(90deg,transparent,#4de8ff)}
.eyebrow span:last-child{background:linear-gradient(90deg,#62f28a,transparent)}

h1{font-size:clamp(43px,6vw,78px);line-height:.98;letter-spacing:-.07em;margin:17px 0 19px;font-weight:700;animation:rise 1s .3s both}
h1 strong{font-weight:800;background:linear-gradient(90deg,#fff 5%,#a8e7ff 48%,#73ef91 92%);-webkit-background-clip:text;background-clip:text;color:transparent}

.intro-text{max-width:660px;color:#96aebb;font-size:clamp(13px,1.3vw,16px);line-height:1.7;margin:0;animation:rise 1s .45s both}
.intro-text b{color:#e3edf4;font-weight:700}

.sectors{margin-top:23px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 10px;color:#647d8c;font:9px 'DM Mono',monospace;letter-spacing:.08em;max-width:850px;animation:rise 1s .6s both}
.sectors i{color:#31d97d;font-style:normal}

.enter{position:relative;overflow:hidden;margin-top:33px;display:inline-flex;align-items:center;gap:25px;padding:15px 17px 15px 23px;
border:1px solid #43d8a7aa;border-radius:7px;background:linear-gradient(135deg,#ffffff0a,#ffffff03);
color:#fff;text-decoration:none;font:700 10px 'DM Mono',monospace;letter-spacing:.14em;
box-shadow:0 0 0 1px #0875ff14 inset,0 0 40px #0875ff18;backdrop-filter:blur(12px);
transition:transform .35s,border-color .35s,box-shadow .35s;animation:rise 1s .75s both}
.enter-line{position:absolute;left:-30%;top:0;width:30%;height:100%;background:linear-gradient(90deg,transparent,#fff8,transparent);transform:skewX(-20deg);animation:buttonScan 3.2s ease-in-out infinite}
.enter b{width:32px;height:32px;display:grid;place-items:center;border-radius:5px;background:linear-gradient(135deg,#0875ff,#18c6ff 55%,#55df7b);font-size:16px;box-shadow:0 0 18px #0875ff40}
.enter:hover{transform:translateY(-4px) scale(1.02);border-color:#7af0b2;box-shadow:0 15px 55px #0875ff35,0 0 35px #47e88820}

.hint{position:absolute;bottom:24px;font:8px 'DM Mono',monospace;letter-spacing:.18em;color:#506572;animation:blink 3s ease-in-out infinite}
.mouse{display:inline-block;width:10px;height:15px;border:1px solid #5de7a0;border-radius:7px;vertical-align:-4px;margin-right:8px;position:relative}
.mouse:after{content:'';position:absolute;left:4px;top:3px;width:1px;height:3px;background:#5de7a0}

.corner{position:absolute;width:31px;height:31px;border-color:#39b9ff35}
.corner-tl{top:24px;left:24px;border-top:1px solid;border-left:1px solid}.corner-tr{top:24px;right:24px;border-top:1px solid;border-right:1px solid}
.corner-bl{bottom:24px;left:24px;border-bottom:1px solid;border-left:1px solid}.corner-br{bottom:24px;right:24px;border-bottom:1px solid;border-right:1px solid}
.coordinates,.version{position:absolute;z-index:12;bottom:27px;font:8px 'DM Mono',monospace;letter-spacing:.13em;color:#415765}
.coordinates{left:30px}.coordinates span{color:#4de8ff}.version{right:30px}

@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes appear{from{opacity:0;transform:scale(.86);filter:blur(10px)}to{opacity:1;transform:none}}
@keyframes floatA{50%{transform:translate(12vw,8vh) scale(1.1)}}@keyframes floatB{50%{transform:translate(-9vw,-10vh) scale(1.12)}}
@keyframes pulse{50%{opacity:.42;transform:scale(1.08)}}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes spinR{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes scan{to{top:105%}}@keyframes gridMove{to{background-position:0 58px,58px 0}}@keyframes energy1{50%{opacity:.15;transform:translate(-50%,-50%) rotate(-16deg) scaleX(.7)}}@keyframes energy2{50%{opacity:.08;transform:translate(-50%,-50%) rotate(17deg) scaleX(.65)}}
@keyframes buttonScan{0%,20%{left:-30%}55%,100%{left:130%}}@keyframes blink{50%{opacity:.35}}@keyframes noise{50%{transform:translate(-1%,2%)}}
@keyframes particle{0%{transform:translate3d(0,0,0);opacity:.1}50%{opacity:.8}100%{transform:translate3d(12px,-35px,0);opacity:.05}}

@media(max-width:650px){
.scene{min-height:600px}.intro{padding-top:7vh}.brand{height:120px;margin-bottom:24px}.brand-logo{width:76vw}.fallback-logo{font-size:88px}
.eyebrow{font-size:8px}.eyebrow span{width:12px}h1{font-size:clamp(39px,12vw,58px)}.sectors{max-width:350px;line-height:1.8}
.enter{margin-top:29px}.rings{width:125vw}.grid{background-size:40px 40px}.hud-right{display:none}.coordinates{display:none}.version{right:18px;bottom:20px}
.corner{width:22px;height:22px}.corner-tl{top:16px;left:16px}.corner-tr{top:16px;right:16px}.corner-bl{bottom:16px;left:16px}.corner-br{bottom:16px;right:16px}
}