/*
  Shared page background: deep midnight blue (set as --bg on each page)
  with soft glows in the brand colours and a faint dot grid near the top.
  Both layers are fixed, so they stay put while the page scrolls (iOS included).
*/
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(55% 45% at 8% -6%, rgba(59, 130, 246, 0.32), transparent 70%),
    radial-gradient(42% 36% at 96% 4%, rgba(243, 199, 102, 0.17), transparent 70%),
    radial-gradient(50% 45% at 88% 106%, rgba(139, 92, 246, 0.22), transparent 70%),
    radial-gradient(42% 40% at -6% 92%, rgba(20, 184, 166, 0.13), transparent 70%);
}

body::after {
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.6px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 85% 60% at 50% 0%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 85% 60% at 50% 0%, #000 15%, transparent 72%);
}