:root {
  --bg-1: hsl(232 45% 9%);
  --bg-2: hsl(250 50% 22%);
  --fg: hsl(230 60% 96%);
  --muted: hsl(230 20% 70%);
  --accent: hsl(162 80% 55%);
  --accent-2: hsl(268 90% 68%);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: grid; place-items: center;
  font-family: 'Outfit', system-ui, sans-serif; color: var(--fg);
  background: radial-gradient(circle at 25% 15%, var(--bg-2), var(--bg-1) 65%);
  overflow: hidden;
}
body::before {
  content: ''; position: fixed; inset: -20%;
  background: conic-gradient(from 0deg, transparent, hsl(268 90% 68% / .12), transparent 40%);
  animation: spin 24s linear infinite;
}
.card {
  position: relative; text-align: center; padding: 3rem 3.5rem;
  border-radius: 28px; border: 1px solid hsl(0 0% 100% / .1);
  background: hsl(232 40% 14% / .55); backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px hsl(232 60% 3% / .6);
  animation: rise .8s cubic-bezier(.2,.8,.2,1) both;
}
.logo { display: flex; gap: 6px; justify-content: center; margin-bottom: 1.2rem; }
.logo span {
  width: 14px; height: 14px; border-radius: 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  animation: pop 1.6s ease-in-out infinite;
}
.logo span:nth-child(2) { animation-delay: .15s; }
.logo span:nth-child(3) { animation-delay: .3s; }
h1 {
  margin: 0; font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -.03em;
  background: linear-gradient(90deg, var(--fg), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sub { margin: .4rem 0 1.8rem; color: var(--muted); }
.status {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0;
  padding: .55rem 1rem; border-radius: 999px; font-size: .95rem;
  background: hsl(162 80% 55% / .1); border: 1px solid hsl(162 80% 55% / .3);
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: pulse 2s infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes pop { 50% { transform: translateY(-5px); } }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; } }