body {
  min-height: 100vh;
  margin: 0;
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 42% 44% at 18% 37%, rgba(106,31,212,.30), transparent 70%),
    radial-gradient(ellipse 43% 50% at 78% 24%, rgba(80,20,180,.17), transparent 72%),
    linear-gradient(180deg, #06030d 0%, #070310 46%, #04020a 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .7;
  background-image:
    radial-gradient(circle at 12% 13%, rgba(255,255,255,.78) 0 1px, transparent 1.7px),
    radial-gradient(circle at 24% 24%, rgba(196,152,255,.7) 0 1px, transparent 1.7px),
    radial-gradient(circle at 44% 10%, rgba(255,255,255,.55) 0 1px, transparent 1.6px),
    radial-gradient(circle at 67% 17%, rgba(218,180,255,.5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 89% 28%, rgba(255,255,255,.45) 0 1px, transparent 1.6px);
  background-size: 260px 210px, 310px 270px, 360px 300px, 300px 250px, 390px 320px;
}

body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background-image:
    radial-gradient(circle at 35% 45%, rgba(255, 255, 255, 0.9) 0 1.5px, transparent 2px),
    radial-gradient(circle at 75% 65%, rgba(225, 190, 255, 0.85) 0 1.5px, transparent 2px),
    radial-gradient(circle at 50% 85%, rgba(255, 255, 255, 0.8) 0 1px, transparent 2px),
    radial-gradient(circle at 15% 75%, rgba(210, 160, 255, 0.9) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.95) 0 2px, transparent 3px) !important;
  background-size: 400px 400px, 350px 350px, 450px 450px, 300px 300px, 500px 500px !important;
  animation: sparkleTwinkle 4s ease-in-out infinite alternate !important;
}

@keyframes sparkleTwinkle {
  0% {
    opacity: 0.3;
    transform: scale(0.98);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.01);
  }
  100% {
    opacity: 0.4;
    transform: scale(1);
  }
}

.bg-sparkle-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  user-select: none;
  z-index: -1;
  overflow: hidden;
}

.bg-sparkle {
  position: absolute;
  color: #e2b6ff;
  text-shadow: 0 0 8px #a855f7, 0 0 16px #c084fc, 0 0 24px #7c3aed;
  animation: sparkleTwinkleBg 7s infinite ease-in-out;
  opacity: 0;
}

@keyframes sparkleTwinkleBg {
  0%, 100% {
    transform: scale(0.2) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.4) rotate(90deg);
    opacity: 1;
  }
}

.bg-sp-1  { top: 12%; left: 8%;   font-size: 22px; animation-delay: 0s; }
.bg-sp-2  { top: 25%; right: 12%; font-size: 16px; animation-delay: 1.8s; }
.bg-sp-3  { top: 45%; left: 18%;  font-size: 28px; animation-delay: 3.5s; }
.bg-sp-4  { top: 58%; right: 22%; font-size: 14px; animation-delay: 0.8s; }
.bg-sp-5  { top: 75%; left: 8%;   font-size: 20px; animation-delay: 5.1s; }
.bg-sp-6  { top: 82%; right: 15%; font-size: 26px; animation-delay: 2.7s; }
.bg-sp-7  { top: 10%; right: 32%; font-size: 18px; animation-delay: 6.0s; }
.bg-sp-8  { top: 90%; left: 42%;  font-size: 15px; animation-delay: 4.2s; }
.bg-sp-9  { top: 5%;  left: 48%;  font-size: 16px; animation-delay: 2.1s; }
.bg-sp-10 { top: 35%; left: 5%;   font-size: 24px; animation-delay: 4.8s; }
.bg-sp-11 { top: 38%; right: 8%;  font-size: 19px; animation-delay: 1.1s; }
.bg-sp-12 { top: 65%; left: 32%;  font-size: 17px; animation-delay: 3.0s; }
.bg-sp-13 { top: 70%; right: 38%; font-size: 21px; animation-delay: 5.7s; }
.bg-sp-14 { top: 88%; right: 5%;  font-size: 13px; animation-delay: 0.4s; }
.bg-sp-15 { top: 20%; left: 30%;  font-size: 25px; animation-delay: 6.4s; }
.bg-sp-16 { top: 52%; right: 45%; font-size: 15px; animation-delay: 1.4s; }