:root {
  --bg: #0C0C0C;
  --text: #F7FAFF;
  --muted: #9ca3af;
  --accent: #00d4ff;

  --teal: #1AFFD5;
  --teal-mid: #2B9595;
  --teal-dark: #005555;
  --teal-deep: #002E26;
  --purple: #C77DFF;
}

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

body {
  min-height: 100vh;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    /* top-right teal glow */
    radial-gradient(ellipse 55% 60% at 100% 10%, rgb(43 149 149 / 0.30), transparent 70%),
    /* bottom-left bright teal glow */
    radial-gradient(ellipse 50% 55% at 0% 100%, rgb(26 255 213 / 0.16), transparent 70%),
    /* faint purple accent, bottom-left */
    radial-gradient(ellipse 30% 35% at 3% 90%, rgb(199 125 255 / 0.08), transparent 70%),
    /* deep teal wash on the right edge */
    radial-gradient(ellipse 40% 70% at 100% 50%, var(--teal-deep), transparent 75%),
    /* dark vignette so the center stays near-black */
    radial-gradient(ellipse at center, #050a0a 30%, var(--bg) 100%);
  background-attachment: fixed;
}

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  padding: 2rem;
}


.container p {
  color: var(--muted);
}

.container h2 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;

  background: linear-gradient(
    90deg,
    #005555, #2B9595, #1AFFD5, #00d4ff, #2B9595, #005555
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  animation: flow 8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .container h2 {
    animation: none;
    filter: none;
  }
}