:root {
  --bg: #f7f9fc;
  --ink: #0a0a0a;
  --muted: #5b6573;
  --hairline: #d8dee8;
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 2rem;
  overflow: hidden;
}

/* Faint, slowly drifting glow behind the text — kept very subtle */
.glow {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 70vmax;
  height: 70vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(27, 116, 255, 0.12) 0%,
    rgba(27, 116, 255, 0) 60%
  );
  pointer-events: none;
  z-index: 0;
  animation: drift 18s ease-in-out infinite;
}

.stage {
  position: relative;
  z-index: 1;
  max-width: 640px;
  width: 100%;
  text-align: center;
}

/* Each element fades up, gently staggered */
.status,
.headline,
.lede,
.rule,
.footer {
  opacity: 0;
  animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.status  { animation-delay: 0.18s; }
.headline { animation-delay: 0.31s; }
.lede    { animation-delay: 0.44s; }
.rule    { animation-delay: 0.57s; }
.footer  { animation-delay: 0.70s; }

/* Optically centered: the wordmark's dark mass pulls the logo ~2.5%
   to the right of geometric center, so nudge it back the same amount. */
.logo {
  display: block;
  width: clamp(220px, 42vw, 320px);
  height: auto;
  margin: 0 auto 2.75rem;
  opacity: 0;
  transform: translateX(-2.5%);
  animation: logo-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
}

.status {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--muted);
  margin-bottom: 2.25rem;
}

.headline {
  font-size: clamp(1.7rem, 5vw, 2.85rem);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.lede {
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  line-height: 1.65;
  color: var(--muted);
  max-width: 46ch;
  margin: 0 auto;
}

.rule {
  border: 0;
  height: 1px;
  width: 56px;
  background: var(--hairline);
  margin: 2.75rem auto 1.5rem;
}

.footer {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: var(--muted);
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Same entrance as fade-up, but rests at the logo's optical -2.5% offset */
@keyframes logo-in {
  from {
    opacity: 0;
    transform: translate(-2.5%, 12px);
  }
  to {
    opacity: 1;
    transform: translateX(-2.5%);
  }
}

@keyframes drift {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-46%, -54%) scale(1.12);
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .glow {
    animation: none;
  }
  .logo,
  .status,
  .headline,
  .lede,
  .rule,
  .footer {
    opacity: 1;
    animation: none;
  }
}