/* ============================================================
   BASE — reset, типографика, контейнер, утилиты, кнопки, чипы
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip;
  /* Гасим эластичный overscroll (rubber-band) корневого скроллера: на macOS «дотяг»
     за нижнюю границу обнажал липкую секцию формы (белая карточка + светлый фон)
     ПОД футером — та самая светлая полоса и «хвост» из скрина владельца.
     overscroll-behavior убирает пружину; тёмный backstop-фон = цвет футера — даже
     если браузер проигнорит, за краем виден оттенок футера, а не светлая форма. */
  overscroll-behavior-y: none;
  background: var(--blue-800);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: var(--text-md);
  line-height: var(--text-md-lh);
  color: var(--c-ink);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
input, textarea, select { font-family: inherit; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* выделение текста — тёплая подсветка (раздел 4 ТЗ) */
::selection { background: var(--buff-200); color: var(--blue-900); }

/* стилизованный скроллбар (раздел 4 ТЗ) */
* { scrollbar-color: var(--blue-300) var(--blue-100); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--blue-100); }
::-webkit-scrollbar-thumb { background: var(--blue-300); border-radius: 8px; border: 3px solid var(--blue-100); }
::-webkit-scrollbar-thumb:hover { background: var(--blue-500); }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter-desktop) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
}

/* main как «прозрачная» обёртка: секции становятся детьми body — общий контейнер
   для sticky-слоёв (включая футер), чтобы последняя секция успевала залипнуть,
   пока футер наезжает сверху. */
main { display: contents; }

/* якорь под fixed-хедер */
[id] { scroll-margin-top: 108px; }

/* ---------- ЗАГОЛОВКИ ---------- */
.h1 {
  font-size: var(--h1-size); line-height: var(--h1-lh);
  letter-spacing: var(--h1-ls); font-weight: var(--h1-weight);
  text-wrap: balance;   /* равномерно распределяет слова, без висящих одиночных слов (ТЗ 1.5) */
}
.h2 {
  font-size: var(--h2-size); line-height: var(--h2-lh);
  letter-spacing: var(--h2-ls); font-weight: var(--h2-weight);
  text-wrap: balance;
}
.h3 {
  font-size: var(--h3-size); line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls); font-weight: var(--h3-weight);
}
.h4 { font-size: var(--h4-size); line-height: var(--h4-lh); font-weight: var(--h4-weight); }

/* цветовое деление заголовков — фирменный приём */
.tone-accent { color: var(--c-primary); }
.tone-ink    { color: var(--c-ink); }
.on-dark .tone-accent { color: var(--c-white); }
.on-dark { color: var(--c-white); }

.eyebrow {
  font-size: var(--text-md); line-height: var(--text-md-lh);
  color: var(--c-primary); font-weight: 500;
}
.on-dark .eyebrow { color: rgba(255,255,255,.85); }
.muted { color: var(--c-muted); }
.on-dark .muted { color: rgba(255,255,255,.7); }
/* ТЗ 2.3: на тёмных секциях подзаголовок и мелкий текст читаемы (--on-brand 78%),
   а не --muted (рассчитан на светлый фон). Модификатор .on-dark — единая точка. */
.on-dark .section-head__sub { color: rgba(246,249,251,.78); }
.on-dark .result-note { color: rgba(246,249,251,.8); }

/* ---------- КНОПКИ ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--r-pill);
  font-weight: 500; font-size: var(--menu-size); line-height: 1;
  padding: 17px 28px; min-height: 48px;
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--blue-700); color: var(--on-brand); }
.btn--primary:hover { background: var(--blue-800); }
/* вторичная — прозрачная с границей (ТЗ 3.2: «Смотреть цены», ТЗ 3.8: невыделенные тарифы) */
.btn--secondary { background: transparent; color: var(--blue-700); border: 1px solid var(--line); }
.btn--secondary:hover { background: transparent; border-color: var(--blue-600); }
/* акцентная — оранжевая (ТЗ 3.5 кнопка кейсов, ТЗ 3.10 «Отправить заявку») */
.btn--accent { background: var(--buff-300); color: var(--buff-ink); }
.btn--accent:hover { background: var(--buff-400); }
.btn--ghost-light { background: rgba(255,255,255,.14); color: var(--c-white); }
.btn--ghost-light:hover { background: rgba(255,255,255,.24); }
.btn--lg { padding: 20px 34px; min-height: 56px; font-size: var(--text-lg); }
.btn__arrow { width: 20px; height: 20px; }

/* круглая кнопка-стрелка */
.icon-btn {
  width: 48px; height: 48px; border-radius: var(--r-round);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-lilac-150); color: var(--c-primary);
  transition: background-color var(--t-fast), transform var(--t-fast);
  flex: none;
}
.icon-btn:hover { background: var(--c-lilac-300); }
.icon-btn svg { width: 22px; height: 22px; }

/* ---------- ЧИПЫ ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--r-pill);
  padding: 10px 18px; min-height: 40px;
  font-size: var(--text-xs); font-weight: 500;
  background: var(--c-lilac-100); color: var(--c-lavender);
  transition: background-color var(--t-base), color var(--t-base);
}
a.chip:hover { background: var(--c-lilac-300); color: var(--c-primary); }

/* ---------- REVEAL при скролле ---------- */
.reveal { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { transform: translateY(40px); transition: opacity var(--appear-duration) cubic-bezier(.16,1,.3,1), transform var(--appear-duration) cubic-bezier(.16,1,.3,1); }
  .reveal--left  { transform: translateX(-48px); }
  .reveal--right { transform: translateX(48px); }
  .reveal--down  { transform: translateY(-40px); }
  .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- ДЫХАНИЕ 3D + декор ---------- */
.deco { position: absolute; pointer-events: none; user-select: none; z-index: 3; }

/* 3D-объект ПОВЕРХ плашек: высокий z-index, свешивается за края, мягкий glow */
.obj {
  position: absolute; pointer-events: none; user-select: none; z-index: 8;
  /* 3D-ассеты перегенерированы в новой палитре (dusty blue) — цветокоррекция снята,
     остаётся только синий glow. */
  filter: drop-shadow(0 18px 30px rgba(31,44,54,.30)) drop-shadow(0 4px 10px rgba(61,85,104,.18));
}

@media (prefers-reduced-motion: no-preference) {
  .float { animation: floaty 6s ease-in-out infinite alternate; }
  .float--slow { animation-duration: 7s; }
  .float--fast { animation-duration: 4.4s; }
  .float--d1 { animation-delay: -1.2s; }
  .float--d2 { animation-delay: -2.6s; }
  .float--d3 { animation-delay: -3.8s; }
  /* Параллакс по скроллу JS пишет в НЕЗАВИСИМОЕ свойство translate (композитится на GPU),
     «дыхание» float остаётся чистым transform-кейфреймом (тоже композит) — два слоя
     складываются браузером. Раньше parallax шёл через calc(var(--py)) ВНУТРИ keyframe:
     CSS-переменная в анимации не композитится, поэтому каждый кадр скролла форсил
     style-recalc + main-thread-репейнт всех 13 объектов — отсюда рывки 3D-ладони в
     «Отзывах» и общий джанк скролла. Теперь оба движения на компоситоре. */
  .obj[data-parallax] { will-change: transform; }
}
@keyframes floaty { from { transform: translateY(-8px); } to { transform: translateY(8px); } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Акцент ключевого слова внутри фразы: крупнее соседнего текста, та же гарнитура
   и цвет, БЕЗ жирного и подчёркивания — солидно. Копирайтеры размечают им ключевые слова. */
.kw-accent {
  font-size: 1.15em;
  font-weight: inherit;
  font-style: inherit;
  color: inherit;
  line-height: 1;
  letter-spacing: -0.01em;
  vertical-align: baseline;
}

/* ============================================================
   ЭТАП 3 — ЭФФЕКТЫ ВАЖНЫХ СЕКЦИЙ (палитра ТЯГИ: Dusty Blue + Buff)
   Деликатное «премиум»-подчёркивание важности, эхо видео-фона формы.
   Перф: анимируем ТОЛЬКО transform/opacity (GPU, 60fps), никаких
   repaint-тяжёлых свойств. Слои absolute → ноль влияния на CLS.
   Мотор включается ТОЛЬКО в prefers-reduced-motion:no-preference —
   иначе статичный градиент (полное отключение движения).
   ============================================================ */

/* --- 1. Плавающий «дышащий» градиент фона важной секции ---
   Вставляется как <div class="sec-aura"> первым в секции (перед .container).
   Клип по скруглению секции (как .us-formmid__bg), контент поверх (z:1). */
.sec-aura {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; border-radius: inherit; pointer-events: none;
}
.sec-aura::before, .sec-aura::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(52px);
}
.sec-aura::before {
  width: 640px; height: 640px; left: -6%; top: -34%;
  background: radial-gradient(circle, rgba(143,163,180,.50) 0%, rgba(143,163,180,0) 68%);
}
.sec-aura::after {
  width: 560px; height: 560px; right: -8%; bottom: -30%;
  background: radial-gradient(circle, rgba(251,179,122,.16) 0%, rgba(251,179,122,0) 68%);
}
/* на тёмных секциях (grad-brand) — холодное свечение чуть ярче, тёплое приглушаем */
.on-dark .sec-aura::before { background: radial-gradient(circle, rgba(185,200,212,.24) 0%, rgba(185,200,212,0) 68%); }
.on-dark .sec-aura::after  { background: radial-gradient(circle, rgba(251,179,122,.12) 0%, rgba(251,179,122,0) 68%); }
/* контент секции — поверх ауры */
.sec-aura ~ .container { position: relative; z-index: 1; }
/* когда секция ауры уходит из вьюпорта — JS ставит .is-idle и дрейф blur(52px)-слоёв
   встаёт на паузу: компоситор не растеризует огромные размытия впустую вдали от экрана */
.sec-aura.is-idle::before, .sec-aura.is-idle::after { animation-play-state: paused; }

/* --- 2. Деликатное свечение ключевой карточки («важный момент») ---
   Тень СТАТИЧНА и вынесена в псевдо-слой ::after; «дышит» только его opacity
   (GPU-композит, БЕЗ per-frame repaint от анимации box-shadow). */
.is-key { position: relative; }
.is-key::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  pointer-events: none; opacity: .18;
  box-shadow: 0 24px 62px -18px rgba(61,85,104,.28), 0 0 0 1px rgba(251,179,122,.22);
}

@media (prefers-reduced-motion: no-preference) {
  .sec-aura::before { will-change: transform; animation: auraDriftA 26s ease-in-out infinite alternate; }
  .sec-aura::after  { will-change: transform; animation: auraDriftB 34s ease-in-out infinite alternate; }
  @keyframes auraDriftA {
    from { transform: translate3d(0,0,0) scale(1); }
    to   { transform: translate3d(7%, 9%, 0) scale(1.14); }
  }
  @keyframes auraDriftB {
    from { transform: translate3d(0,0,0) scale(1.06); }
    to   { transform: translate3d(-8%, -7%, 0) scale(1); }
  }
  .is-key::after { will-change: opacity; animation: keyGlow 4.5s ease-in-out infinite; }
  @keyframes keyGlow { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
}

/* ============================================================
   ЭТАП 4 — ПОП-АП «УЗНАТЬ ЦЕНУ» (.pmodal)
   Белая карточка-панель (как все формы сайта) на тёмном скриме —
   переиспользует .field/.consent/.btn без переопределений. Палитра ТЯГИ.
   Десктоп — по центру; мобайл (≤600px) — bottom-sheet снизу.
   Мотор (fade/slide) — только opacity/transform; off при reduced-motion.
   ============================================================ */
.pmodal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(31,44,54,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.pmodal.is-open { opacity: 1; visibility: visible; }
.pmodal__panel {
  position: relative; width: 100%; max-width: 460px;
  max-height: calc(100dvh - 48px); overflow-y: auto;
  background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 34px 32px 30px;
  transform: translateY(14px) scale(.98);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.pmodal.is-open .pmodal__panel { transform: none; }
.pmodal__close {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; cursor: pointer;
  background: var(--blue-100); color: var(--blue-700);
  transition: background-color var(--t-fast);
}
.pmodal__close:hover { background: var(--blue-200); }
.pmodal__close svg { width: 20px; height: 20px; }
.pmodal__eyebrow { font-size: var(--text-xs); font-weight: 500; color: var(--blue-700); margin-bottom: 8px; }
.pmodal__title { font-size: var(--h4-size); line-height: 1.15; font-weight: 500; color: var(--blue-900); letter-spacing: -.02em; }
.pmodal__svc {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  background: var(--buff-100); color: var(--buff-ink);
  border-radius: var(--r-pill); padding: 8px 16px;
  font-size: var(--text-xs); font-weight: 500;
}
.pmodal__svc .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--buff-300); flex: none; }
.pmodal__form { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.pmodal__form .field { margin: 0; }
.pmodal__form .btn { width: 100%; justify-content: center; }
.pmodal__foot { margin-top: 14px; font-size: var(--text-2xs); line-height: 1.4; color: var(--muted); text-align: center; }
/* успех */
.pmodal__success { display: none; text-align: center; padding: 14px 0 6px; }
.pmodal.is-done .pmodal__form, .pmodal.is-done .pmodal__svc, .pmodal.is-done .pmodal__eyebrow, .pmodal.is-done .pmodal__foot { display: none; }
.pmodal.is-done .pmodal__success { display: block; }
.pmodal__success-ic {
  width: 68px; height: 68px; border-radius: 50%; margin: 6px auto 18px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(79,125,106,.12); color: var(--success);
}
.pmodal__success-ic svg { width: 32px; height: 32px; }
.pmodal__success p { font-size: var(--text-md); line-height: var(--text-md-lh); color: var(--muted); margin-top: 8px; }

@media (max-width: 600px) {
  .pmodal { padding: 0; align-items: flex-end; }
  .pmodal__panel {
    max-width: 100%; border-radius: var(--r-card) var(--r-card) 0 0;
    padding: 30px 22px calc(26px + env(safe-area-inset-bottom));
    max-height: 92dvh; transform: translateY(100%);
  }
  .pmodal.is-open .pmodal__panel { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pmodal, .pmodal__panel { transition: none; }
}