:root {
  --bg-a: #0ea5e9;
  /* sky */
  --bg-b: #1e3a8a;
  /* navy */
  --bg-c: #f8fafc;
  /* off-white */
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  opacity: 0.12;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
      900px 600px at 20% 15%,
      rgba(255, 255, 255, 0.55),
      transparent 60%
    ),
    radial-gradient(
      700px 500px at 85% 30%,
      rgba(14, 165, 233, 0.35),
      transparent 60%
    ),
    linear-gradient(135deg, var(--bg-b), var(--bg-a));
}

.card {
  backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}