:root{--bg:#0b0d17;--fg:#f5f3ff;--accent:#a78bfa;--accent2:#38bdf8}
*{box-sizing:border-box;margin:0;padding:0}
body{min-height:100dvh;display:grid;place-items:center;background:
 radial-gradient(circle at 20% 20%,#1e1b4b 0,transparent 45%),
 radial-gradient(circle at 80% 70%,#0c4a6e 0,transparent 45%),var(--bg);
 color:var(--fg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 text-align:center;padding:2rem;overflow:hidden}
main{width:min(90vw,34rem)}
h1{font-size:clamp(2.5rem,12vw,5.5rem);letter-spacing:-.03em;line-height:1;
 background:linear-gradient(100deg,var(--accent),var(--accent2),var(--accent));
 background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
 animation:slide 6s linear infinite}
@keyframes slide{to{background-position:220% 0}}
.domain{margin-top:.6rem;font-size:.95rem;letter-spacing:.35em;text-transform:lowercase;color:#c4b5fd99}
.status{margin-top:2.2rem;font-size:1rem;color:#e9e6ffcc}
.dots i{display:inline-block;width:.32rem;height:.32rem;margin-left:.25rem;border-radius:50%;
 background:var(--accent2);animation:blink 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}
.dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.15;transform:translateY(0)}50%{opacity:1;transform:translateY(-.15rem)}}
.bar{margin:1.1rem auto 0;width:min(100%,22rem);height:.4rem;border-radius:99px;background:#ffffff1a;overflow:hidden}
.bar span{display:block;height:100%;width:5%;border-radius:99px;
 background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .6s ease}
.hint{margin-top:.9rem;font-size:.85rem;color:#a5b4fc99}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}