/* Фон: тёмный минимал + тихо дышащие градиентные свечения (Linear/Vercel-вайб).
   Никакого видео/canvas — чистый CSS, не лагает, не отвлекает, текст читается. */
.bg-sphere {
  position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100vh;
  pointer-events: none; display: block;
}
.bg-field {
  position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -10%, #0c1024 0%, transparent 55%),
    var(--bg);
}
/* Все три свечения — ОДИН слой с тремя радиальными градиентами:
   одна композиция вместо трёх полуэкранных, никаких filter/blur/hue-rotate.
   Дыхание (opacity) и параллакс (transform от JS) идут целиком на компоновщике. */
.bg-orbs {
  position: absolute; inset: 0;
  will-change: transform, opacity;
  transform: translateY(var(--sy, 0));
  background:
    radial-gradient(28vw 28vw at 15vw calc(100% - 11vw),
      var(--purple) 0%, color-mix(in srgb, var(--purple) 38%, transparent) 32%, transparent 68%),
    radial-gradient(25vw 25vw at calc(100% - 14vw) 10vw,
      #4f6bff 0%, color-mix(in srgb, #4f6bff 38%, transparent) 32%, transparent 68%),
    radial-gradient(30vw 30vw at 55vw calc(100% - 5vw),
      var(--purple-dp) 0%, color-mix(in srgb, var(--purple-dp) 38%, transparent) 32%, transparent 68%);
  animation: orb-breathe 30s ease-in-out infinite;
}
/* пики ниже, чтобы свечение не съедало контраст текста над орбами */
@keyframes orb-breathe {
  0%,100% { opacity: .2; }
  50%     { opacity: .36; }
}

/* тонкое зерно — убирает «цифровую гладкость», добавляет дороговизны */
.bg-grain {
  position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  /* без mix-blend-mode: blend поверх анимирующихся орбов пересчитывался каждый кадр */
  opacity: .045;
}

body { background: var(--bg); }

/* убираем локальные свечения секций — фон должен быть единым (только глобальная сфера),
   иначе на границах секций видны переходы «каждого скролла» */
.cases-glow, .about-glow, .faq-glow { display: none !important; }
.process::before { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .bg-orbs { animation: none; }
}

/* cookie banner */
#cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: .9rem clamp(1.25rem, 5vw, 2rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--text-dim);
}
#cookie-banner a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#cookie-banner button {
  margin-left: auto;
  padding: .4rem 1.2rem;
  background: var(--six-eyes);
  color: #fff;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .2s;
}
#cookie-banner button:hover { opacity: .85; }