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

:root {
  color-scheme: dark;
  --bg: #0b1020;
  --panel: #111a2d;
  --text: #f4f7ff;
  --muted: #aab5ca;
  --accent: #8bafff;
  --line: rgba(255,255,255,.12);
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  background: radial-gradient(ellipse at 80% 15%, #1b3156 0, transparent 36%),
              radial-gradient(ellipse at 15% 85%, #182345 0, transparent 38%), var(--bg);
  font-family: "DM Sans", sans-serif; display: grid; place-items: center; padding: 28px;
}
.page { width: min(100%, 980px); min-height: min(760px, calc(100vh - 56px)); display: flex; flex-direction: column; }
.status { display: inline-flex; align-items: center; gap: 10px; color: #c8d5ec; font-size: .75rem; letter-spacing: .16em; font-weight: 700; }
.status-dot { width: 8px; height: 8px; background: #83e1bd; border-radius: 50%; box-shadow: 0 0 16px #83e1bd80; }
.hero { margin: auto 0; padding: clamp(30px, 7vw, 78px) 0; max-width: 680px; }
.brand { font: 800 2rem Manrope, sans-serif; margin-bottom: 64px; }
.brand span, h1 span { color: var(--accent); }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; font-weight: 700; }
h1 { font: 800 clamp(3.4rem, 10vw, 7rem)/.98 Manrope, sans-serif; letter-spacing: -.075em; margin: 18px 0 28px; }
.intro { color: var(--muted); font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.8; max-width: 480px; }
.progress { width: min(100%, 360px); height: 4px; background: var(--line); border-radius: 99px; margin: 42px 0 20px; overflow: hidden; }
.progress span { display: block; width: 38%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6e91f5, #9ad9ff); animation: shimmer 2.8s ease-in-out infinite alternate; }
.meta, footer { color: #7f8da8; font-size: .8rem; }
.meta { display: flex; gap: 20px; flex-wrap: wrap; }
footer { border-top: 1px solid var(--line); padding-top: 22px; display: flex; justify-content: space-between; gap: 12px; }
@keyframes shimmer { from { width: 25%; } to { width: 55%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }