body {
  isolation: isolate;
  background: #06060e;
}

.cosmic-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 25% 18%, #181126 0%, transparent 55%), #06060e;
}

.cosmic-background::before {
  content: "";
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(ellipse at 24% 30%, rgba(114, 61, 168, .24), transparent 43%),
    radial-gradient(ellipse at 77% 57%, rgba(48, 77, 139, .21), transparent 42%),
    radial-gradient(ellipse at 49% 82%, rgba(153, 102, 84, .10), transparent 35%);
  animation: nebula-drift 38s ease-in-out infinite alternate;
}

#cosmic-starfield {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hero {
  background: radial-gradient(ellipse at 50% 55%, rgba(29, 18, 41, .28), transparent 72%);
}

.hero::before {
  background: radial-gradient(ellipse at 50% 62%, rgba(87, 51, 115, .15), transparent 65%);
}

.feature {
  background: linear-gradient(100deg, rgba(12, 11, 22, .65), rgba(29, 17, 41, .40) 52%, rgba(8, 9, 19, .65));
}

.closing {
  background: radial-gradient(ellipse at bottom, rgba(51, 28, 68, .40), transparent 70%);
}

.copy, .quote, .hero .tagline {
  text-shadow: 0 2px 14px rgba(3, 2, 10, .8);
}

@keyframes nebula-drift {
  from { transform: translate3d(-1%, 0, 0) scale(1); opacity: .72; }
  to { transform: translate3d(3%, -2%, 0) scale(1.06); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cosmic-background::before { animation: none; }
}