:root {
  --void: #06041a;
  --violet: #7c3aed;
  --lilac: #c4b5fd;
  --cyan: #22d3ee;
  --ice: #e8f7ff;
  --glass: rgba(255, 255, 255, 0.07);
  --glass-edge: rgba(255, 255, 255, 0.22);
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: radial-gradient(ellipse at 50% 120%, #1b0b4a 0%, var(--void) 60%);
  color: var(--ice);
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-x: hidden;
}
#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.nebula {
  position: fixed; border-radius: 50%; filter: blur(90px); opacity: 0.55; z-index: 0;
  animation: drift 24s ease-in-out infinite alternate;
}
.nebula.a { width: 46vmax; height: 46vmax; background: var(--violet); top: -14vmax; left: -12vmax; }
.nebula.b { width: 38vmax; height: 38vmax; background: var(--cyan); bottom: -16vmax; right: -10vmax; opacity: 0.35; animation-duration: 30s; }
@keyframes drift { to { transform: translate(5vmax, 4vmax) scale(1.12); } }

main {
  position: relative; z-index: 1;
  width: min(640px, 100%);
  padding: clamp(32px, 6vw, 56px);
  text-align: center;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: 28px;
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 24px 80px rgba(8, 4, 40, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
h1 {
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  background: linear-gradient(100deg, var(--lilac), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 24px;
}
p { font-size: clamp(1rem, 2.6vw, 1.15rem); line-height: 1.65; color: rgba(232, 247, 255, 0.88); }
p + p { margin-top: 16px; color: var(--cyan); font-weight: 500; }

@media (max-width: 480px) { main { border-radius: 22px; } }
@media (prefers-reduced-motion: reduce) { .nebula { animation: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  main { background: rgba(20, 12, 60, 0.85); }
}