/* Декоративные "пятна" по секциям — мягкие, полностью внутри границ, без обрезки на швах */
/* 1) гасим старые пятна из site.css (этот файл грузится позже, теми же селекторами) */
.sec::before, .sec-alt::before { content: none; }

/* база: две фигуры на секцию (кроме #hero — свой фон, и #final — тёмный) */
.sec:not(#hero):not(#final)::before,
.sec:not(#hero):not(#final)::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 20%;
  left: 5%;
  width: calc(var(--w) * var(--blob-scale, 1));
  height: calc(var(--h) * var(--blob-scale, 1));
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent 72%);
  --dx: 8px; --dy: 22px; --s0: .88; --s1: 1.10;
}

/* 4) контент выше пятен */
.sec > .wrap { position: relative; z-index: 1; }

/* 2-3) позиции, размеры, формы и цвет строго внутри секции (top 14–57%, размер < 46%) */
#stats::before{left:4%;top:16%;--w:clamp(160px,26vw,420px);--h:42%;border-radius:50%;--c:rgba(91,94,240,.16);}
#stats::after{right:5%;top:52%;--w:clamp(140px,20vw,320px);--h:34%;border-radius:62% 38% 55% 45% / 48% 58% 42% 52%;--c:rgba(139,124,255,.14);--dx:10px;--dy:26px;}

#pain::before{left:30%;top:18%;--w:clamp(180px,28vw,460px);--h:44%;border-radius:42% 58% 38% 62% / 55% 40% 60% 45%;--c:rgba(255,111,216,.12);}
#pain::after{left:6%;top:50%;--w:clamp(150px,22vw,360px);--h:36%;border-radius:70% 30% 50% 50% / 40% 60% 40% 60%;--c:rgba(63,114,255,.13);--dx:6px;}

#how::before{right:3%;top:15%;--w:clamp(200px,30vw,480px);--h:45%;border-radius:50%;--c:rgba(139,124,255,.16);}
#how::after{right:30%;top:54%;--w:clamp(140px,20vw,300px);--h:32%;border-radius:58% 42% / 45% 55%;--c:rgba(255,140,90,.12);--dx:12px;--dy:18px;}

#features::before{left:5%;top:17%;--w:clamp(190px,28vw,440px);--h:44%;border-radius:45% 55% 40% 60% / 50% 45% 55% 50%;--c:rgba(91,94,240,.15);}
#features::after{right:6%;top:56%;--w:clamp(150px,22vw,340px);--h:32%;border-radius:50%;--c:rgba(255,111,216,.11);--dx:7px;}

#audience::before{left:38%;top:16%;--w:clamp(170px,25vw,400px);--h:40%;border-radius:62% 38% 55% 45% / 48% 58% 42% 52%;--c:rgba(63,114,255,.14);}
#audience::after{left:4%;top:53%;--w:clamp(140px,20vw,310px);--h:33%;border-radius:70% 30% 50% 50% / 40% 60% 40% 60%;--c:rgba(139,124,255,.13);--dx:9px;--dy:24px;}

#trust::before{right:5%;top:15%;--w:clamp(200px,30vw,470px);--h:45%;border-radius:50%;--c:rgba(255,140,90,.12);}
#trust::after{right:30%;top:55%;--w:clamp(150px,22vw,350px);--h:33%;border-radius:42% 58% 38% 62% / 55% 40% 60% 45%;--c:rgba(91,94,240,.14);--dx:5px;}

#soon::before{left:4%;top:20%;--w:clamp(180px,27vw,430px);--h:42%;border-radius:45% 55% 40% 60% / 50% 45% 55% 50%;--c:rgba(255,111,216,.12);}
#soon::after{right:5%;top:56%;--w:clamp(140px,21vw,330px);--h:31%;border-radius:50%;--c:rgba(63,114,255,.13);--dx:11px;--dy:20px;}

#pricing::before{left:40%;top:16%;--w:clamp(190px,28vw,450px);--h:44%;border-radius:62% 38% 55% 45% / 48% 58% 42% 52%;--c:rgba(139,124,255,.15);}
#pricing::after{left:7%;top:54%;--w:clamp(150px,22vw,340px);--h:33%;border-radius:70% 30% 50% 50% / 40% 60% 40% 60%;--c:rgba(255,140,90,.11);--dx:8px;}

#faq::before{right:6%;top:15%;--w:clamp(170px,25vw,410px);--h:40%;border-radius:50%;--c:rgba(91,94,240,.14);}
#faq::after{right:31%;top:57%;--w:clamp(140px,20vw,300px);--h:31%;border-radius:42% 58% 38% 62% / 55% 40% 60% 45%;--c:rgba(255,111,216,.12);--dx:13px;--dy:26px;}

/* 5) мягкий дрейф при скролле — только transform, привязан к проходу секции по вьюпорту */
@keyframes blob-drift {
  from { transform: translate3d(var(--dx), var(--dy), 0) scale(var(--s0)); }
  to   { transform: translate3d(calc(var(--dx) * -1), calc(var(--dy) * -1), 0) scale(var(--s1)); }
}

@supports (animation-timeline: view()) {
  .sec:not(#hero):not(#final)::before,
  .sec:not(#hero):not(#final)::after {
    animation: blob-drift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sec:not(#hero):not(#final)::before,
  .sec:not(#hero):not(#final)::after { animation: none; }
}

/* 6) мобильные: размер пятен уменьшаем примерно на 35%, позиции те же — всё остаётся внутри */
@media (max-width: 760px) {
  :root { --blob-scale: .65; }
}