:root {
  --bg: #fbf7f4;
  --text: #2b2422;
  --muted: #7a6d68;
  --ring-a: #e0607e;
  --ring-b: #f29e6d;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1615;
    --text: #f3ece8;
    --muted: #a8998f;
    --ring-a: #ef7d97;
    --ring-b: #f6b48c;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
}

.logo { width: 7.5rem; height: auto; margin-bottom: 1.5rem; }
.ring { fill: none; stroke-width: 6; }
.ring-a { stroke: var(--ring-a); }
.ring-b { stroke: var(--ring-b); }

h1 {
  margin: 0;
  font-size: clamp(2rem, 7vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.lead { margin: 0.75rem 0 0; font-size: 1.15rem; }
.soon { margin: 0.25rem 0 0; color: var(--muted); }

footer {
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
  .ring-a { animation: drift-a 4s ease-in-out infinite alternate; }
  .ring-b { animation: drift-b 4s ease-in-out infinite alternate; }
  @keyframes drift-a { to { transform: translateX(4px); } }
  @keyframes drift-b { to { transform: translateX(-4px); } }
}