:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #081326;
  color: #eef5ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, #173b6b 0, #081326 48%, #050914 100%);
}

.shell {
  width: min(720px, calc(100% - 40px));
  margin: 0 auto;
  padding: 72px 0 48px;
}

.hero { text-align: center; }
.logo { width: 192px; height: 192px; border-radius: 42px; box-shadow: 0 20px 60px #0008; }
.eyebrow { margin: 28px 0 10px; color: #8ec5ff; font-size: .75rem; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(2.5rem, 8vw, 5rem); letter-spacing: -.06em; }
.intro { margin: 18px auto 0; max-width: 560px; color: #c5d7ee; font-size: 1.2rem; line-height: 1.6; }
.card { margin-top: 28px; padding: 28px; border: 1px solid #ffffff1c; border-radius: 24px; background: #102343cc; box-shadow: 0 14px 40px #0003; }
h2 { margin-top: 0; font-size: 1.2rem; }
.card p { margin-bottom: 0; color: #c5d7ee; line-height: 1.7; }
a { color: #8ec5ff; }
footer { margin-top: 42px; text-align: center; color: #c5d7ee; }
.fine-print { color: #8297b2; font-size: .8rem; }

@media (max-width: 520px) {
  .shell { padding-top: 40px; }
  .logo { width: 144px; height: 144px; }
  .card { padding: 22px; }
}