/* =========================================================
   ФОНОВЫЕ ГРАДИЕНТЫ (v3): переходы «от стороны к стороне»
   Подключается последним, работает и в тёмной, и в светлой теме.

   Идея: фон не залит одним цветом, а «течёт» — по странице идёт
   мягкая смена оттенков, и у каждой секции своё направление
   градиента, поэтому при скролле картинка меняется.
   ========================================================= */

:root {
  /* тёмная тема: холодный индиго → тёмный фон → тёплый оранжевый */
  --grad-a: rgba(91, 140, 255, .16);
  --grad-b: rgba(255, 106, 31, .14);
  --grad-c: rgba(168, 85, 247, .12);
  --grad-d: rgba(61, 220, 151, .07);
}

/* --- общее полотно страницы: диагональная смена от угла к углу --- */
body {
  background-image:
    linear-gradient(118deg,
      rgba(10, 18, 38, 0) 0%,
      rgba(14, 26, 56, .55) 22%,
      rgba(8, 13, 23, 0) 48%,
      rgba(30, 18, 40, .5) 74%,
      rgba(10, 14, 26, 0) 100%),
    linear-gradient(245deg,
      var(--grad-a) 0%,
      transparent 42%,
      transparent 58%,
      var(--grad-b) 100%);
  background-attachment: fixed, fixed;
}

.bg-layer {
  background:
    /* верх-лево → низ-право */
    linear-gradient(140deg, rgba(91, 140, 255, .10) 0%, transparent 40%, rgba(255, 106, 31, .10) 100%),
    /* низ-лево → верх-право */
    linear-gradient(40deg, rgba(168, 85, 247, .09) 0%, transparent 45%, rgba(91, 140, 255, .08) 100%),
    radial-gradient(1200px 700px at 80% -5%, rgba(91, 140, 255, .16), transparent 62%),
    radial-gradient(900px 600px at 5% 20%, rgba(255, 106, 31, .12), transparent 60%),
    linear-gradient(180deg, var(--ink-950), var(--ink-900) 40%, var(--ink-950));
}

/* --- у каждой секции свой градиент «от края к краю» --- */
.section,
.hero,
.cta {
  position: relative;
  isolation: isolate;
}

.section::before,
.hero::before,
.cta::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* 01 Проблема и 05 Процесс: холодный слева → тёплый справа */
#problem::before,
#process::before {
  background: linear-gradient(100deg,
    rgba(91, 140, 255, .10) 0%,
    rgba(91, 140, 255, .03) 35%,
    transparent 55%,
    rgba(255, 106, 31, .08) 100%);
}

/* 02 Цифры: поперёк, светлое пятно по центру */
#numbers::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 179, 71, .07) 30%,
    rgba(255, 255, 255, .03) 50%,
    rgba(91, 140, 255, .08) 72%,
    transparent 100%);
}

/* 03 Кто что делает и 08 Видео: тёплый слева → холодный справа */
#who::before,
#demo::before {
  background: linear-gradient(260deg,
    rgba(255, 106, 31, .09) 0%,
    transparent 45%,
    rgba(91, 140, 255, .09) 100%);
}

/* 04 Услуги: фиолетовый → оранжевый по диагонали */
#services::before {
  background: linear-gradient(135deg,
    rgba(168, 85, 247, .10) 0%,
    transparent 45%,
    rgba(255, 106, 31, .10) 100%);
}

/* 06 Кейсы: зелёно-холодный → тёплый */
#cases::before {
  background: linear-gradient(200deg,
    rgba(61, 220, 151, .07) 0%,
    transparent 40%,
    rgba(255, 106, 31, .09) 100%);
}

/* 07 GEO: пурпур → индиго поперёк */
#geo::before {
  background: linear-gradient(95deg,
    rgba(91, 140, 255, .12) 0%,
    transparent 42%,
    rgba(168, 85, 247, .12) 100%);
}

/* 09 Обо мне и 12 Заявка: самый насыщенный, два угла */
#about::before {
  background: linear-gradient(160deg,
    rgba(91, 140, 255, .09) 0%,
    transparent 50%,
    rgba(255, 179, 71, .09) 100%);
}
.cta::before {
  background: linear-gradient(120deg,
    rgba(255, 106, 31, .12) 0%,
    transparent 45%,
    rgba(91, 140, 255, .12) 100%);
}

/* 10 Отзывы и 11 FAQ: спокойные, чтобы текст читался */
#reviews::before,
#faq::before {
  background: linear-gradient(90deg,
    rgba(168, 85, 247, .05) 0%,
    transparent 50%,
    rgba(91, 140, 255, .06) 100%);
}

/* --- крупные размытые световые пятна по краям страницы --- */
.bg-layer::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(46vw 46vw at -8% 8%, var(--grad-a), transparent 60%),
    radial-gradient(40vw 40vw at 108% 28%, var(--grad-b), transparent 62%),
    radial-gradient(44vw 44vw at 82% 92%, var(--grad-c), transparent 64%),
    radial-gradient(38vw 38vw at 6% 78%, var(--grad-d), transparent 66%);
  filter: blur(30px);
}

/* --- светлая пурпурная тема: те же направления, но пастельно --- */
[data-theme="light"] {
  --grad-a: rgba(99, 102, 241, .20);
  --grad-b: rgba(168, 85, 247, .20);
  --grad-c: rgba(192, 38, 211, .14);
  --grad-d: rgba(56, 189, 248, .14);
}

[data-theme="light"] body {
  background-image:
    linear-gradient(115deg, rgba(124, 58, 237, .07) 0%, transparent 34%, rgba(56, 189, 248, .06) 68%, transparent 100%),
    linear-gradient(250deg, rgba(236, 72, 153, .06) 0%, transparent 45%, rgba(99, 102, 241, .07) 100%);
  background-attachment: fixed, fixed;
}

[data-theme="light"] .bg-layer {
  background:
    linear-gradient(140deg, rgba(124, 58, 237, .10) 0%, transparent 42%, rgba(56, 189, 248, .10) 100%),
    linear-gradient(40deg, rgba(236, 72, 153, .07) 0%, transparent 48%, rgba(124, 58, 237, .08) 100%),
    linear-gradient(180deg, #ffffff, #f7f3ff 45%, #fbf9ff);
}

[data-theme="light"] #problem::before,
[data-theme="light"] #process::before {
  background: linear-gradient(100deg, rgba(99, 102, 241, .09) 0%, transparent 50%, rgba(168, 85, 247, .09) 100%);
}
[data-theme="light"] #numbers::before {
  background: linear-gradient(90deg, transparent 0%, rgba(168, 85, 247, .07) 30%, rgba(56, 189, 248, .06) 70%, transparent 100%);
}
[data-theme="light"] #who::before,
[data-theme="light"] #demo::before {
  background: linear-gradient(260deg, rgba(236, 72, 153, .07) 0%, transparent 48%, rgba(99, 102, 241, .08) 100%);
}
[data-theme="light"] #services::before {
  background: linear-gradient(135deg, rgba(168, 85, 247, .10) 0%, transparent 48%, rgba(56, 189, 248, .09) 100%);
}
[data-theme="light"] #cases::before {
  background: linear-gradient(200deg, rgba(16, 185, 129, .07) 0%, transparent 45%, rgba(168, 85, 247, .08) 100%);
}
[data-theme="light"] #geo::before {
  background: linear-gradient(95deg, rgba(99, 102, 241, .10) 0%, transparent 45%, rgba(192, 38, 211, .09) 100%);
}
[data-theme="light"] #about::before {
  background: linear-gradient(160deg, rgba(124, 58, 237, .08) 0%, transparent 52%, rgba(56, 189, 248, .08) 100%);
}
[data-theme="light"] .cta::before {
  background: linear-gradient(120deg, rgba(124, 58, 237, .10) 0%, transparent 48%, rgba(56, 189, 248, .10) 100%);
}
[data-theme="light"] #reviews::before,
[data-theme="light"] #faq::before {
  background: linear-gradient(90deg, rgba(168, 85, 247, .05) 0%, transparent 50%, rgba(99, 102, 241, .05) 100%);
}

/* --- мобильные: экономим ресурсы, оставляем только общий градиент --- */
@media (max-width: 760px) {
  .section::before,
  .hero::before,
  .cta::before { display: none; }
  body { background-attachment: scroll, scroll; }
  .bg-layer::after { filter: blur(20px); }
}

/* --- уважаем настройку «меньше движения» --- */
@media (prefers-reduced-motion: reduce) {
  body { background-attachment: scroll, scroll; }
}

/* --- печать: никаких градиентов --- */
@media print {
  body, .bg-layer, .section::before, .hero::before, .cta::before { background: none !important; }
  .bg-layer::after { display: none; }
}