:root{
  --bg:#0a0f22; --ink:#eaf2ff; --muted:#a6b3cc; --accent:#35b6ff; --accent-2:#6ee7ff; --glass:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:radial-gradient(1200px 600px at 50% -10%, #122047, #0a0f22 70%);} 
.bg{position:fixed; inset:0; z-index:-2; display:grid; place-items:center; overflow:hidden}
.bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.05) brightness(.85); transform:scale(1.02)}
.bg .overlay{position:absolute; inset:0; background:radial-gradient(60% 40% at 50% 20%, rgba(20,40,80,.6) 0%, rgba(10,15,34,.7) 50%, rgba(10,15,34,.9) 100%), linear-gradient(180deg, rgba(14,23,48,.4), rgba(10,15,34,.9));}
.particles{position:absolute; inset:0; overflow:hidden; z-index:-1}
.particles span{position:absolute; width:4px; height:4px; background:var(--accent); border-radius:50%; opacity:.5; box-shadow:0 0 8px var(--accent), 0 0 18px var(--accent-2); animation:float 10s linear infinite}
@keyframes float{from{transform:translateY(100vh)} to{transform:translateY(-10vh)}}
.particles span:nth-child(1){left:8%;animation-duration:11s}
.particles span:nth-child(2){left:18%;animation-duration:13s;animation-delay:1s}
.particles span:nth-child(3){left:28%;animation-duration:9s;animation-delay:2s}
.particles span:nth-child(4){left:38%;animation-duration:12s;animation-delay:3s}
.particles span:nth-child(5){left:48%;animation-duration:10s;animation-delay:4s}
.particles span:nth-child(6){left:58%;animation-duration:12s;animation-delay:2s}
.particles span:nth-child(7){left:68%;animation-duration:9s;animation-delay:1s}
.particles span:nth-child(8){left:78%;animation-duration:13s;animation-delay:3s}
.particles span:nth-child(9){left:88%;animation-duration:11s;animation-delay:4s}
.particles span:nth-child(10){left:94%;animation-duration:10s;animation-delay:2s}
.center{min-height:100dvh; display:grid; place-items:center; text-align:center; padding:clamp(20px,4vw,48px)}
h1{margin:0 0 10px; font-weight:800; font-size:clamp(28px,5vw,64px); letter-spacing:.2px; line-height:1.08; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35)}
h1 span{display:block; font-weight:600; opacity:.9}
h1 strong{display:inline-block; background:linear-gradient(90deg,#6ee7ff,#35b6ff,#8bb3ff); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 8px 30px rgba(53,182,255,.45))}
.lead{margin:6px auto 18px; max-width:820px; color:var(--muted); font-weight:500; font-size:clamp(14px,2.2vw,18px)}
.status{display:inline-flex; gap:10px; align-items:center; background:var(--glass); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:10px 14px; color:#cee5ff; font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.18); backdrop-filter:blur(8px)}
.status .dot{width:10px; height:10px; border-radius:50%; background:#34d399; box-shadow:0 0 10px #34d399, 0 0 24px #34d399aa; animation:ping 1.6s infinite}
@keyframes ping{0%{transform:scale(1);opacity:1}80%{transform:scale(1.5);opacity:.2}100%{transform:scale(1);opacity:1}}
.foot{text-align:center; color:#93a7c6; font-size:13px; padding:10px 12px 24px}
