:root {
  --bg: #04050d;
  --text: #e9ecff;
  --muted: #9aa0c3;
  --violet: #8b5cf6;
  --cyan: #22d3ee;
  --magenta: #f472b6;
  --grad: linear-gradient(120deg, var(--cyan), var(--violet) 50%, var(--magenta));
}

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

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
}

h1 { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; line-height: 1.05; }

#stars { position: fixed; inset: 0; z-index: -2; }

.aurora {
  position: fixed;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(40% 35% at 20% 25%, rgba(139, 92, 246, 0.25), transparent 70%),
    radial-gradient(35% 30% at 80% 70%, rgba(34, 211, 238, 0.15), transparent 70%),
    radial-gradient(30% 25% at 60% 15%, rgba(244, 114, 182, 0.12), transparent 70%);
  filter: blur(40px);
  animation: drift 30s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes drift {
  to { transform: translate(5%, -4%) rotate(8deg) scale(1.1); }
}

.grad {
  background: var(--grad);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 6s linear infinite;
}

@keyframes shine { to { background-position: 200% center; } }

/* Hero */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1rem;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: 0.8rem;
  color: var(--cyan);
  margin: 2.5rem 0 1rem;
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse { 50% { opacity: 0.45; } }

h1 { font-size: clamp(2.8rem, 10vw, 6.5rem); margin-bottom: 1.5rem; }

.lead { font-size: clamp(1rem, 2.5vw, 1.2rem); color: var(--muted); max-width: 34rem; }

.hero > * { animation-fill-mode: both; }
.hero > :not(.planet-wrap) { opacity: 0; animation: rise 1s ease forwards; }
.hero > h1 { animation-delay: 0.15s; }
.hero > .lead { animation-delay: 0.3s; }
.hero > .eyebrow { animation: rise 1s ease forwards, pulse 3s ease-in-out 1s infinite; }

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

/* Planet */
.planet-wrap { position: relative; aspect-ratio: 1; width: min(320px, 70vw); }

.planet {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #c4b5fd, transparent 45%),
    radial-gradient(circle at 70% 75%, #0e7490, transparent 55%),
    linear-gradient(135deg, #7c3aed, #db2777);
  box-shadow:
    inset -20px -20px 50px rgba(0, 0, 0, 0.6),
    0 0 80px rgba(139, 92, 246, 0.6),
    0 0 160px rgba(34, 211, 238, 0.25);
  animation: float 8s ease-in-out infinite;
}

.ring {
  position: absolute;
  inset: -35% -55%;
  border-radius: 50%;
  border: 3px solid rgba(34, 211, 238, 0.5);
  border-top-color: transparent;
  transform: rotateX(75deg) rotateZ(-20deg);
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.4);
}

@keyframes float { 50% { transform: translateY(-12px); } }

.orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  animation: spin linear infinite;
}

.o1 { inset: 18%; animation-duration: 14s; }
.o2 { inset: 6%; animation-duration: 24s; animation-direction: reverse; }
.o3 { inset: -6%; animation-duration: 40s; }

.moon {
  position: absolute;
  top: -6px; left: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 16px var(--cyan);
}

.m2 { background: var(--magenta); box-shadow: 0 0 16px var(--magenta); width: 9px; height: 9px; }
.m3 { background: #fff; box-shadow: 0 0 14px #fff; width: 6px; height: 6px; }

@keyframes spin { to { transform: rotate(360deg); } }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero > * { opacity: 1 !important; }
}