:root {
  --bg: #0a0a0a; /* Наш фірмовий темний колір */
}

/* Ставимо базовий темний фон на весь сайт, щоб не було білих дір */
body {
  background-color: var(--bg);
}

/* Контейнер фону — фіксований, позаду всього */
.sparkle-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1; /* МАГІЯ ТУТ: фон йде назад, і нам більше не треба чіпати інші блоки */
  /* background: var(--bg); - Прибрали звідси, щоб не перекривало нічого зайвого */
}

/* Три радіальних помаранчевих світіння */
.sparkle-bg .glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px); /* Збільшив розмиття, щоб світіння було більш "дорогим" і м'яким */
}
.sparkle-bg .glow-main {
  top: 30%; left: 50%;
  width: 80vw; height: 80vh; /* Використовуємо % екрану, щоб не було горизонтального скролу */
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    hsla(25, 100%, 52%, 0.12) 0%,
    hsla(30, 100%, 48%, 0.05) 40%,
    transparent 70%);
}
.sparkle-bg .glow-br {
  bottom: 0; right: 0;
  width: 60vw; height: 60vh;
  background: radial-gradient(ellipse at 80% 100%,
    hsla(30, 100%, 50%, 0.10) 0%, transparent 60%);
}
.sparkle-bg .glow-tl {
  top: -10%; left: -10%;
  width: 50vw; height: 50vh;
  background: radial-gradient(ellipse at 20% 0%,
    hsla(25, 100%, 52%, 0.08) 0%, transparent 60%);
}

/* Мерехтливі частинки (іскри) */
.sparkle-bg .particle {
  position: absolute;
  border-radius: 50%;
  animation: sparkle-twinkle var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.sparkle-bg .particle.small {
  background: hsl(38, 100%, 65%);
}
.sparkle-bg .particle.big {
  background: radial-gradient(circle,
    hsl(38, 100%, 70%) 0%,
    hsla(25, 100%, 52%, 0.5) 50%,
    transparent 100%);
  box-shadow:
    0 0 6px hsla(38, 100%, 65%, 0.6),
    0 0 12px hsla(25, 100%, 52%, 0.3);
}

/* Плаваючі орби (більші частинки) */
.sparkle-bg .orb {
  position: absolute;
  border-radius: 50%;
  animation: sparkle-float 6s ease-in-out infinite;
}
.sparkle-bg .orb-1 { left: 15%; top: 20%; width: 8px; height: 8px;
  background: radial-gradient(circle, hsl(38,100%,70%) 0%, transparent 70%);
  box-shadow: 0 0 15px hsla(25,100%,52%,.5); animation-delay: 0s; }
.sparkle-bg .orb-2 { left: 80%; top: 30%; width: 12px; height: 12px;
  background: radial-gradient(circle, hsl(30,100%,65%) 0%, transparent 70%);
  box-shadow: 0 0 20px hsla(30,100%,52%,.4); animation-delay: 1s; }
.sparkle-bg .orb-3 { left: 70%; top: 70%; width: 8px; height: 8px;
  background: radial-gradient(circle, hsl(25,100%,60%) 0%, transparent 70%);
  box-shadow: 0 0 12px hsla(25,100%,52%,.5); animation-delay: 2s; }
.sparkle-bg .orb-4 { left: 25%; top: 75%; width: 6px; height: 6px;
  background: radial-gradient(circle, hsl(35,100%,68%) 0%, transparent 70%);
  box-shadow: 0 0 10px hsla(35,100%,52%,.4); animation-delay: 3s; }

@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.2) rotate(180deg); }
}
@keyframes sparkle-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}