:root {
  --bg1: #0f1020;
  --bg2: #101223;
  --fg: #e7e9ee;
  --muted: #9aa3b2;
  --accent: #6aa2ff;
  --accent2: #8b5cf6;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, -apple-system, system-ui, Segoe UI, Roboto, sans-serif;
  color: var(--fg);
  background: radial-gradient(1200px 800px at 20% 10%, #1b1e37 0%, transparent 60%),
              radial-gradient(900px 700px at 80% 20%, #182040 0%, transparent 60%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow-x: hidden;
}
.bg-gradient::before {
  content: "";
  position: fixed; inset: -20vmax;
  background: conic-gradient(from 180deg at 50% 50%, #6aa2ff22, #8b5cf622, #6aa2ff22);
  filter: blur(80px);
  animation: spin 40s linear infinite;
  pointer-events: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.container {
  min-height: calc(100vh - 80px);
  display: grid;
  place-content: center;
  gap: 20px;
  text-align: center;
  padding: 40px 16px;
}
.logo {
  font-weight: 800;
  letter-spacing: 0.5px;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .9;
}
 h1 {
  font-size: clamp(28px, 6vw, 56px);
  margin: 0;
}
.subtitle {
  color: var(--muted);
  margin: 0 0 8px 0;
}
.loader {
  display: inline-flex;
  gap: 10px;
  margin: 24px auto 12px;
}
.loader span {
  width: 10px; height: 10px; border-radius: 6px;
  background: radial-gradient(circle at 30% 30%, #fff, var(--accent));
  box-shadow: 0 0 20px #6aa2ff55;
  animation: bounce 1.2s ease-in-out infinite;
}
.loader span:nth-child(2) { animation-delay: .15s; background: radial-gradient(circle at 30% 30%, #fff, var(--accent2)); box-shadow: 0 0 20px #8b5cf655; }
.loader span:nth-child(3) { animation-delay: .3s; }
.loader span:nth-child(4) { animation-delay: .45s; background: radial-gradient(circle at 30% 30%, #fff, #59f); box-shadow: 0 0 20px #59f5; }

@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0) scale(1); opacity: .9; }
  40% { transform: translateY(-12px) scale(1.1); opacity: 1; }
}

.footnote { color: var(--muted); font-size: 14px; }

footer { position: fixed; left: 0; right: 0; bottom: 0; }
.marquee { overflow: hidden; white-space: nowrap; border-top: 1px solid #ffffff10; }
.track { display: inline-block; padding: 10px 0; animation: scroll 20s linear infinite; color: #b9c1d1; }
.track span { padding-left: 100vw; }
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}