/* ============================================================
   SECTIONS — стили секций в порядке страницы
   ============================================================ */

/* inverted-угол (вогнутый) на стыке двух фонов — CSS-маска */
.notch { position: absolute; width: 40px; height: 40px; pointer-events: none; }
.notch--bl { /* нижний-левый: заливка = фон СНИЗУ, вырез под верхним слоем */
  -webkit-mask: radial-gradient(circle 40px at 100% 0, transparent 99%, #000 100%);
          mask: radial-gradient(circle 40px at 100% 0, transparent 99%, #000 100%);
}
.notch--br {
  -webkit-mask: radial-gradient(circle 40px at 0 0, transparent 99%, #000 100%);
          mask: radial-gradient(circle 40px at 0 0, transparent 99%, #000 100%);
}

/* ============ СТЕКОВЫЙ СКРОЛЛ: секции-слои наезжают стопкой ============ */
/* Каждая секция — sticky-слой. top задаётся из JS: 0 для секций ≤ вьюпорта,
   отрицательный (vh − высота) для высоких — тогда липнет НИЗ секции и её контент
   не обрезается на мобиле. z-index возрастает к последней: следующая наезжает на
   предыдущую и перекрывает её. Стыки ВСТЫК — без margin/зазоров: подложка страницы
   (--page-bg) нигде не проглядывает, сквозь скруглённый верх-правый угол видна
   предыдущая секция, а не фон. Прокрутка нативная, без скроллджекинга. */
.stack {
  position: sticky; top: 0;
  border-radius: var(--r-card) var(--r-card) 0 0;   /* оба верхних угла скруглены */
  scroll-margin-top: 0;                 /* якорь ведёт ровно туда, где секция залипает */
  /* GPU-слой на каждую sticky-панель: скролл композитится на видеокарте, без
     main-thread-репейнта → подложка страницы НЕ мелькает в стыках при быстром скролле
     (прежняя размытая box-shadow заставляла перерисовывать 10 слоёв каждый кадр — шов
     и «зазоры-мельки» шли отсюда; тень убрана, слой промоутится). */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* hero — та же GPU-промоция, чтобы первый слой не мелькал под problems */
.hero { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.hero     { z-index: 1; }
.problems { z-index: 2; }
.services { z-index: 3; }
.cases    { z-index: 4; }
.process  { z-index: 5; }
.island   { z-index: 6; }
.pricing  { z-index: 7; }
.faq      { z-index: 8; }
.cta      { z-index: 9; }
.footer   { z-index: 10; }

@media (prefers-reduced-motion: reduce) {
  /* обычный поток: без залипания и наезда; небольшой зазор под язычок, ничего не ломается */
  .hero, .stack { position: relative !important; top: auto !important; }
  .stack { margin-top: 46px; }
}

/* ============ ЯЗЫЧОК-ПАПКА: единый силуэт с карточкой ============ */
/* Язычок вырастает из САМОГО ЛЕВОГО угла карточки: его левая грань = левая грань
   карточки (одна сплошная вертикаль сверху вниз). Верх-левый угол скруглён радиусом
   карточки; справа — ВОГНУТОЕ (обратное) скругление, как выемка у папки, сделанное
   radial-gradient-маской псевдоэлемента. Одна заливка (--tab-bg = цвет верхней кромки
   панели), один силуэт — без шва и щели между язычком и карточкой. */
/* левый край язычка = левый край КОНТЕНТ-колонки (одна вертикаль с заголовками секции),
   а не край полноширинной панели — тогда язычок сидит ровно в верх-левом углу карточки
   контента и читается как папка на всех ширинах (на 1920 больше не «уезжает» к краю экрана).
   Значение повторяет центрирование .container: отступ слева = margin центрирования + гаттер. */
.fold-tab {
  position: absolute; top: 0; z-index: 5;
  left: calc(max(0px, (100vw - var(--container) - var(--gutter-desktop) * 2) / 2) + var(--gutter-desktop));
  transform: translateY(-100%);
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 26px;
  background: var(--tab-bg, var(--c-white)); color: var(--tab-fg, var(--c-primary));
  border-radius: var(--r-card) 0 0 0;
  font-size: var(--text-xs); font-weight: 500; white-space: nowrap; line-height: 1;
  pointer-events: none; user-select: none;
}
.fold-tab::before {                       /* точка-маркер после текста */
  content: ""; order: 2; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tab-dot, var(--lav-accent)); flex: none;
}
/* вогнутая выемка справа: квадрат в цвет язычка с вырезанной верх-правой четвертью —
   контур язычка плавно перетекает в верхнюю грань карточки */
.fold-tab::after {
  content: ""; position: absolute; right: -24px; bottom: 0; width: 24px; height: 24px;
  background: var(--tab-bg, var(--c-white));
  -webkit-mask: radial-gradient(circle 24px at 100% 0, transparent 99%, #000 100%);
          mask: radial-gradient(circle 24px at 100% 0, transparent 99%, #000 100%);
}

/* цвет каждого язычка = цвет верхней кромки его панели (единый силуэт).
   Для градиентных панелей (services/island) — реальный цвет кромки в точке примыкания. */
/* цвет язычка = верхняя кромка панели. Светлые секции — светлый blue + текст blue-700;
   тёмные (кейсы/остров на --grad-brand) — blue-700 + текст on-brand. */
.problems { --tab-bg: var(--blue-100);     --tab-fg: var(--blue-700); --tab-dot: var(--blue-500); }
.services { --tab-bg: var(--blue-50);      --tab-fg: var(--blue-700); --tab-dot: var(--blue-500); }
.cases    { --tab-bg: var(--blue-700);     --tab-fg: var(--on-brand); --tab-dot: var(--blue-300); }
.process  { --tab-bg: var(--blue-100);     --tab-fg: var(--blue-700); --tab-dot: var(--blue-500); }
.island   { --tab-bg: var(--blue-700);     --tab-fg: var(--on-brand); --tab-dot: var(--blue-300); }
.pricing  { --tab-bg: var(--blue-50);      --tab-fg: var(--blue-700); --tab-dot: var(--blue-500); }
.faq      { --tab-bg: var(--blue-100);     --tab-fg: var(--blue-700); --tab-dot: var(--blue-500); }
.cta      { --tab-bg: var(--blue-50);      --tab-fg: var(--blue-700); --tab-dot: var(--blue-500); }

/* ============ 1. ХЕДЕР ============ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: 24px; padding-bottom: 20px;
  transition: padding var(--t-base), background-color var(--t-base), backdrop-filter var(--t-base), border-color var(--t-base);
  border-bottom: 1px solid transparent;
}
/* мутный ликвид-гласс при скролле: blur + полупрозрачная заливка + тонкая граница */
.site-header.is-scrolled {
  padding-top: 12px; padding-bottom: 12px;
  background: rgba(241,245,248,.88);   /* --blue-50 @ 88% (ТЗ 3.1) */
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.header__brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand-img { display: block; height: 44px; width: auto; }
.footer__brand .brand-img { height: 36px; margin-bottom: 14px; }
@media (max-width: 600px) { .brand-img { height: 36px; } }
.brand-logo { font-size: 26px; font-weight: 700; letter-spacing: -0.04em; color: var(--c-ink); }
.nav-open .brand-logo { color: var(--c-white); }
.brand-sub { font-size: 11px; color: var(--c-primary); letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }

/* центральная белая пилюля-меню в вырезе */
.header__nav {
  background: var(--c-white); border-radius: var(--r-pill);
  padding: 6px 8px; display: flex; align-items: center; gap: 2px;
  box-shadow: var(--shadow-card);
}
.header__nav a {
  font-size: var(--menu-size); line-height: var(--menu-lh); font-weight: 500;
  color: var(--muted); padding: 10px 16px; border-radius: var(--r-pill);   /* ТЗ 3.1: пункты меню --muted */
  transition: color var(--t-base), background-color var(--t-base);
}
.header__nav a:hover { color: var(--blue-700); background: var(--blue-100); }
.header__cta { display: flex; align-items: center; gap: 10px; flex: none; }
.header__cta .btn { padding: 13px 22px; min-height: 44px; }

.burger { display: none; width: 48px; height: 48px; border-radius: var(--r-pill);
  background: var(--c-white); align-items: center; justify-content: center; }
.burger svg { width: 24px; height: 24px; color: var(--c-primary); }

/* мобильное меню */
.mobile-menu {
  position: fixed; inset: 0; z-index: 60; background: var(--grad-brand);
  color: var(--on-brand); padding: 88px 24px 32px; display: none; flex-direction: column;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu__close { position: absolute; top: 26px; right: 20px; width: 48px; height: 48px;
  border-radius: var(--r-pill); background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; }
.mobile-menu__close svg { width: 24px; height: 24px; color: var(--on-brand); }
.mobile-menu a.m-link { font-size: 28px; font-weight: 500; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.mobile-menu__foot { margin-top: auto; display: flex; flex-direction: column; gap: 16px; padding-top: 24px; }
.mobile-menu__phone { font-size: 22px; font-weight: 500; }

/* ---------- ХЕДЕР: выпадающее меню «Услуги» (единая шапка, tyaga-rw2) ----------
   Перенесено из uslugi.css, чтобы мега-меню работало и на главной,
   которая uslugi.css не подключает. Дубль в uslugi.css идентичен — безвреден. */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop__trigger { display: inline-flex; align-items: center; gap: 6px; }
.nav-drop__trigger::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-base); opacity: .7;
}
.nav-drop:hover .nav-drop__trigger::after,
.nav-drop:focus-within .nav-drop__trigger::after { transform: rotate(225deg) translateY(2px); }
.mega {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
  width: min(760px, 90vw); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-lg); padding: 26px 28px 20px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 26px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
  transition-delay: 300ms; /* grace-период: при уходе курсора панель закрывается не мгновенно */
  z-index: 55;
}
/* hover-мост: невидимый слой на самом .nav-drop (он всегда интерактивен, в отличие
   от .mega с pointer-events:none в закрытом виде) перекрывает зазор между «Услуги»
   и панелью — курсор доходит до пунктов, не «проваливаясь» мимо hover-области */
.nav-drop::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 26px; z-index: 56;
}
.nav-drop:hover .mega, .nav-drop:focus-within .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
  transition-delay: 0ms; /* открытие мгновенное, задержка только при закрытии */
}
.mega__col h4 { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--blue-500); font-weight: 500; margin-bottom: 6px; padding: 0 12px; }
.mega a {
  display: block; padding: 9px 12px; border-radius: var(--r-xs);
  font-size: var(--text-sm); font-weight: 500; color: var(--blue-900);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.mega a:hover { background: var(--blue-100); color: var(--blue-700); }
.mega__all { grid-column: 1 / -1; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.mega__all a { display: inline-flex; align-items: center; gap: 8px; color: var(--blue-700); font-weight: 500; }
.mega__all a::after { content: "→"; }

/* ============ 2. HERO — full-bleed видео + мозаика белых плашек ============ */
.hero {
  position: sticky;
  /* Первый экран занимает ВЕСЬ вьюпорт + клиренс на язычок следующей секции (46px),
     чтобы ни тело второй секции, ни её fold-tab не выглядывали при загрузке.
     dvh — динамический вьюпорт: на мобиле учитывает адресную строку браузера
     (герой = ровно видимая область в любой момент). 100vh — фолбэк для старых браузеров. */
  min-height: calc(100vh + 48px);
  min-height: calc(100dvh + 48px);
  display: flex; align-items: center;
  padding: 128px 0 72px; overflow: hidden; background: var(--blue-50);
}
/* видео на ВСЮ секцию (замена = подмена /hero.mp4 + /hero-poster.jpg, тот же путь).
   Футаж владельца в родной dusty-blue гамме (v20) — фильтры не нужны. */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* скрим: сверху светлый (под ink-логотип в хедере); ниже — тонировка фиолетом,
   чтобы БЕЛЫЕ плашки читались поверх СВЕТЛОГО голографического футажа владельца */
/* низ героя ПЛАВНО уходит в подложку страницы (--page-bg), а не в тёмную «муть»:
   так стык герой→подложка→панель читается чисто, без паразитных тёмных полос */
/* скрим в синих тонах — контраст белых плашек поверх видео */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(241,245,248,.42) 0%,
      rgba(44,63,78,.14) 15%,
      rgba(31,44,54,.34) 52%,
      rgba(31,44,54,.30) 70%,
      rgba(241,245,248,.55) 100%),
    radial-gradient(120% 82% at 74% 46%, rgba(61,85,104,.35) 0%, rgba(61,85,104,0) 62%);
}
.hero__wrap { position: relative; z-index: 3; width: 100%; }

/* МОЗАИКА: белые вырезанные плашки, собранные как пазл (швы = вырезы) */
.hero-mosaic {
  position: relative;
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
  align-items: stretch;
  max-width: 1040px;
}
/* плашки: непрозрачный белый + чёткий край (обводка + усиленная тень) на светлом видео */
.m-plate {
  background: var(--surface); border-radius: var(--r-card); position: relative;
  border: 1px solid rgba(61,85,104,.10);
  box-shadow: 0 24px 60px rgba(31,44,54,.24), 0 2px 8px rgba(31,44,54,.12);
}

/* главная плашка: H1 + подзаголовок + CTA. Верх-левый угол квадратный — язычок
   продолжает левую грань плашки одной линией (папка). */
.m-main {
  grid-column: 1; grid-row: 1 / span 2;
  padding: 46px 46px 40px; display: flex; flex-direction: column; justify-content: center;
  border-top-left-radius: 0;
}
/* язычок-папка героя: из левого угла плашки, скруглён верх-левый, справа вогнутая выемка */
.m-tab {
  position: absolute; top: 0; left: 0; transform: translateY(-100%);
  height: 44px; display: inline-flex; align-items: center;
  background: var(--surface); color: var(--blue-700);
  border-radius: var(--r-card) 0 0 0; padding: 0 24px 0 40px;
  font-size: var(--text-xs); font-weight: 500; white-space: nowrap; line-height: 1;
}
.m-tab::after { content: ""; position: absolute; right: -22px; bottom: 0; width: 22px; height: 22px; background: var(--surface);
  -webkit-mask: radial-gradient(circle 22px at 100% 0, transparent 99%, #000 100%);
          mask: radial-gradient(circle 22px at 100% 0, transparent 99%, #000 100%); }

.hero__title { display: block; }
.hero__title .line { display: block; }
.hero__title .line--indent { margin-left: 1.1em; }
.hero__sub { margin-top: 22px; color: var(--c-muted); font-size: var(--text-lg); line-height: var(--text-lg-lh); max-width: 520px; }
.hero__actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero__micro { margin-top: 18px; font-size: var(--text-xs); color: var(--c-muted); }
.hero__micro b { color: var(--blue-900); font-weight: 500; }   /* ТЗ 3.2: «15 минут» --blue-900 */

/* плашка-награда (широкая, верх правого кластера) + кубок свешивается */
.m-award {
  grid-column: 2 / span 2; grid-row: 1;
  padding: 26px 30px; display: flex; flex-direction: column; justify-content: center; min-height: 148px;
}
.m-award__big { font-size: 40px; line-height: 1; font-weight: 500; color: var(--blue-700); letter-spacing: -.03em; }   /* ТЗ 3.2: крупная цифра карточки-показателя --blue-700 */
.m-award__cap { margin-top: 8px; font-size: var(--text-md); color: var(--c-muted); }
.m-award__cap b { color: var(--c-primary); font-weight: 500; }

/* две факт-плашки в нижнем ряду правого кластера */
.m-fact { padding: 24px 26px; display: flex; flex-direction: column; justify-content: center; }
.m-fact--b { grid-column: 2; grid-row: 2; }
.m-fact--c { grid-column: 3; grid-row: 2; }
.m-fact__num { display: block; font-size: 34px; line-height: 1; font-weight: 500; color: var(--c-primary); letter-spacing: -.02em; margin-bottom: 8px; }
.m-fact__txt { font-size: var(--text-sm); line-height: 1.35; color: var(--c-muted); }
.m-fact__txt b { color: var(--c-ink); font-weight: 500; }

/* ============ КАРУСЕЛЬ УСЛУГ в hero (заменяет плашку-награду) ============ */
/* та же ячейка сетки, что и m-award: верх правого кластера, 2 колонки */
.m-svc {
  grid-column: 2 / span 2; grid-row: 1;
  position: relative; min-height: 196px; padding: 0;
  overflow: visible;                                   /* 3D-арт свешивается за угол */
}
/* 3D-арт: ФИКСИРОВАННАЯ зона за верх-правым углом (как раньше кубок) → ноль CLS */
.m-svc__art { position: absolute; top: -44px; right: -26px; width: 150px; height: 180px; z-index: 2; pointer-events: none; }
.m-svc__obj {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transform: scale(.9);
  transition: opacity .55s cubic-bezier(.25,.1,.25,1), transform .55s cubic-bezier(.25,.1,.25,1);
  will-change: opacity, transform;
}
.m-svc__obj.is-active { opacity: 1; transform: scale(1); }
/* eyebrow сверху-слева; не перехватывает клик — уходит на слайд-ссылку под ним */
.m-svc__eyebrow { position: absolute; top: 22px; left: 30px; z-index: 3; font-size: var(--text-xs); color: var(--c-muted); pointer-events: none; }
.m-svc__count b { color: var(--blue-700); font-weight: 500; font-variant-numeric: tabular-nums; }
/* область слайдов = вся карточка; слайды наложены для crossfade; активный кликабелен целиком */
.m-svc__viewport { position: absolute; inset: 0; }
.m-svc__slide {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 48px 128px 50px 30px;                       /* справа — клиренс под арт, снизу — под навигацию */
  text-decoration: none; color: inherit;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .5s cubic-bezier(.25,.1,.25,1), transform .5s cubic-bezier(.25,.1,.25,1);
  will-change: opacity, transform;
}
.m-svc__slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.m-svc__name { font-size: var(--text-lg); line-height: 1.15; font-weight: 500; color: var(--blue-900); letter-spacing: -.01em; transition: color var(--t-fast); }
.m-svc__pain { font-size: var(--text-sm); line-height: 1.38; color: var(--c-muted); }
.m-svc:hover .m-svc__slide.is-active .m-svc__name { color: var(--blue-700); }
/* навигация снизу: стрелки + точки; поверх ссылки, своя кликабельность */
.m-svc__nav { position: absolute; left: 30px; right: 30px; bottom: 18px; z-index: 4; display: flex; align-items: center; gap: 12px; }
.m-svc__arrow {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(61,85,104,.18); background: var(--surface-2); color: var(--blue-700); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.m-svc__arrow:hover { background: var(--blue-700); color: var(--on-brand); border-color: var(--blue-700); }
.m-svc__arrow:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }
.m-svc__dots { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.m-svc__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: rgba(61,85,104,.22); cursor: pointer; transition: background var(--t-fast), width var(--t-fast); }
.m-svc__dot.is-active { width: 20px; background: var(--blue-700); }
.m-svc__dot:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .m-svc__obj, .m-svc__slide { transition: none; } }

/* 3D-объекты ПОВЕРХ мозаики (свешиваются за края плашек) */
.obj--kubok  { width: 138px; top: -46px; right: -30px; }         /* на m-award (в hero больше не используется) */
.obj--koltsa { width: 128px; bottom: -46px; right: -40px; }      /* на m-fact--c */

/* курсор — у кнопки «Получить расчёт проекта», чуть наезжает (правка 2) */
.hero__actions { position: relative; }
.hero__actions .obj--kursor { width: 94px; left: 250px; bottom: -42px; top: auto; right: auto; z-index: 9; }

/* ============ 3. ПРОБЛЕМА → РЕШЕНИЕ ============ */
.problems { background: var(--blue-100); padding: 110px 0 130px; }
/* Свечение секции смещаем от верх-левого угла (там сидит язычок «Подход»): у самой
   кромки фон должен читаться ровным blue-100 = цвет язычка. Эффект сохранён, просто
   центр глоу уходит в тело секции, а не под язычок. */
.stack .sec-aura::before { top: 12%; left: 8%; }   /* блоб в теле секции: кромка у язычка чистая (problems/cta/us-pain) */
/* ТЗ 1.5: контейнер шапки секции не должен обрезать заголовок по 820px и
   плодить лишние переносы — h2 дышит до 1040px, а длинную строку описания
   держим короче (820px) для читаемости. */
.section-head { max-width: 1040px; margin-bottom: 48px; }
.section-head .h2 { margin-bottom: 0; max-width: 1040px; }
.section-head__sub { margin-top: 20px; font-size: var(--text-lg); line-height: var(--text-lg-lh); color: var(--c-muted); max-width: 820px; text-wrap: pretty; }

.problem-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: start; }
.pcard {
  background: var(--c-white); border-radius: var(--r-card); padding: 32px 30px;
  position: relative; min-height: 340px; display: flex; flex-direction: column;
  /* лёгкая резт-тень: карточки отрываются от плавающей ауры секции (этап 3) */
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.pcard--offset1 { margin-top: 44px; }
.pcard--offset2 { margin-top: 22px; }
.pcard--offset3 { margin-top: 56px; }
/* карточка с 3D-иконкой, свешивающейся за верхний край */
.pcard--obj { padding-top: 54px; }
/* иконки свешиваются за ВЕРХ-ЛЕВЫЙ угол (в основном наружу) — заголовок ниже, не перекрыт */
.pcard--obj .obj--ic { width: 90px; top: -44px; left: -24px; }
.pcard__pain { font-size: var(--h4-size); line-height: var(--h4-lh); font-weight: 500; color: var(--c-ink); margin-bottom: 14px; }
.pcard__sol { font-size: var(--text-md); line-height: var(--text-md-lh); color: var(--c-muted); }
.pcard__sol b { color: var(--blue-900); font-weight: 500; }   /* ТЗ 3.3: выделения --blue-900, не акцент */

/* лид-карточка (без заголовка) — мягкий синий градиент вместо фиолетового */
.pcard--grad {
  background: var(--grad-soft); color: var(--blue-900); overflow: visible;
  justify-content: flex-end; border: 1px solid var(--line);
}
.pcard--grad .pcard__lead { font-size: var(--text-md); line-height: 1.4; font-weight: 500; position: relative; z-index: 2; }

/* крупные 3D по краям секции проблем — свешиваются за грид */
.problems .obj--spiral { width: 210px; top: -64px; left: -74px; z-index: 6; }
.problems .obj--plisse { width: 176px; top: -58px; right: -64px; z-index: 6; }

/* ============ 4. УСЛУГИ ============ */
/* ТЗ 3.4: секция «Что мы делаем — и сколько это стоит» — СВЕТЛАЯ (--blue-50). */
.services { background: var(--blue-50); color: var(--blue-900); padding: 120px 0; }
/* эффект «воды» убран целиком (правка владельца) — canvas удалён из разметки и JS.
   Правый край круга срезается глобальным overflow-x:clip (html,body). */
.services .container { position: relative; z-index: 1; }
.services .section-head { position: relative; }
.services .eyebrow { color: var(--blue-700); }
.services .section-head__sub { color: var(--muted); }
.svc-group { position: relative; margin-top: 56px; }
/* спасательный круг: КРУПНЫЙ ЧЁТКИЙ фоновый объект справа, на четверть за правым краем.
   Без blur и без приглушения (правка владельца): объект резкий. z-0 — за контентом. */
/* круг — фоновый параллакс: смещение только через transform (JS, translate3d),
   привязано к прогрессу прокрутки секции. z-0 — всегда за карточками услуг. */
.svc-krug {
  position: absolute; z-index: 0; top: 40px; right: -250px; width: 620px;
  pointer-events: none; user-select: none; opacity: 1;
  will-change: transform;
  filter: drop-shadow(0 34px 70px rgba(61,85,104,.3));   /* новый ассет в палитре */
}
.svc-group__title { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.svc-group__title .tag {
  background: var(--blue-200);
  border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 8px 16px; font-size: var(--text-xs); font-weight: 500; color: var(--blue-700);
}
.svc-group__title .cnt { color: var(--muted); font-size: var(--text-xs); }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 26px 26px 24px; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base), background-color var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
/* верхняя полоса-акцент, проявляется на hover (в синей шкале) */
.svc::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--blue-400), var(--blue-600));
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-base); }
.svc:hover { transform: translateY(-6px); background: var(--surface);
  border-color: var(--blue-300); box-shadow: var(--shadow-md); }
.svc:hover::before { transform: scaleX(1); }
.svc__name { font-size: var(--h4-size); line-height: var(--h4-lh); font-weight: 500; margin-bottom: 12px; color: var(--blue-900); }
.svc__desc { font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--muted); flex: 1; }
/* ТЗ 3.4: цена --blue-700, насыщенное начертание */
.svc__price { margin-top: 20px; display: inline-flex; align-self: flex-start;
  background: var(--blue-100); color: var(--blue-700); border-radius: var(--r-pill);
  padding: 9px 16px; font-size: var(--text-sm); font-weight: 500; transition: background-color var(--t-base), color var(--t-base); }
.svc:hover .svc__price { background: var(--blue-200); color: var(--blue-700); }
.svc-extra { margin-top: 40px; font-size: var(--text-md); color: var(--muted); }
.svc-extra a { color: var(--blue-600); border-bottom: 1px solid var(--blue-300); }
.svc-extra a:hover { color: var(--blue-700); }

/* ============ 5. КЕЙСЫ («что менялось в цифрах») ============ */
/* язычок — в общей системе (.sec-tab, белый как панель); правка 6 */
/* ТЗ 3.5: секция кейсов — ТЁМНАЯ на --grad-brand, текст --on-brand */
.cases { background: var(--grad-brand); color: var(--on-brand); padding: 70px 0 100px; }
.cases .section-head__sub { color: rgba(246,249,251,.8); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 36px 0 40px; }
.filter {
  border-radius: var(--r-pill); padding: 11px 20px; font-size: var(--text-xs); font-weight: 500;
  background: transparent; color: var(--on-brand); border: 1px solid rgba(255,255,255,.3);
  transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base);
}
.filter.is-active { background: var(--on-brand); color: var(--blue-700); border-color: var(--on-brand); }
.filter:hover:not(.is-active) { color: var(--on-brand); border-color: rgba(255,255,255,.55); }

.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* ТЗ 3.5: карточки кейсов — полупрозрачный белый 12% на тёмном фоне, граница белым 24% */
.case {
  position: relative; border-radius: var(--r-pill); overflow: visible;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
  color: var(--on-brand); aspect-ratio: 1 / 1.12;
  padding: 30px; display: flex; flex-direction: column; justify-content: space-between;
  transition: transform var(--t-base);
}
.case.is-hidden { display: none; }
.case__brand { font-size: var(--h4-size); font-weight: 500; position: relative; z-index: 2; max-width: 66%; }
.case__tag { font-size: var(--text-2xs); color: rgba(246,249,251,.7); margin-top: 4px; }
.case__metric { position: relative; z-index: 2; }
/* ТЗ 3.5: метрики «7 мес / ×3 / 3 года» — тёплый --buff-300 на холодном фоне */
.case__num { font-size: 54px; line-height: 1; font-weight: 500; letter-spacing: -0.03em; color: var(--buff-300); }
.case__desc { font-size: var(--text-sm); line-height: var(--text-sm-lh); color: rgba(246,249,251,.85); margin-top: 10px; max-width: 90%; }
/* 3D-объект кейса — в СВОБОДНОЙ зоне верх-правого угла карточки (правка владельца):
   бренд слева (max-width 66%), метрика и описание снизу — объект свешивается за верх-правый
   угол и НЕ перекрывает ни заголовок, ни цифру, ни текст. */
.obj--case { width: 104px; top: -16px; right: -6px; left: auto; margin: 0; z-index: 8; transition: transform var(--t-slow); }
.case:hover .obj--case { transform: scale(1.06) rotate(-3deg); }
.obj--smartfon { width: 92px; }
.obj--chemodan { width: 100px; }
.cases__all { display: flex; justify-content: center; margin-top: 44px; }

/* ============ 6. КАК МЫ РАБОТАЕМ ============ */
.process { background: var(--blue-100); padding: 110px 0; }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }

/* «ПОЛОТНО» (правка 9): иридесцентный шёлк проплывает по секции при доскролле,
   за ним проявляются карточки. Только transform/opacity → без лагов.
   .silk = окно-клип (overflow hidden), ::before = сама шёлковая полоса. */
.silk { position: absolute; inset: 0; overflow: hidden; z-index: 4; pointer-events: none; opacity: 0; }
.silk::before {
  content: ""; position: absolute; top: -12%; bottom: -12%; left: 0; width: 66%;
  background: linear-gradient(105deg,
    rgba(185,200,212,0) 0%, rgba(220,230,237,.55) 24%, rgba(255,255,255,.9) 46%,
    rgba(185,200,212,.6) 62%, rgba(143,163,180,.4) 80%, rgba(143,163,180,0) 100%);
  filter: blur(6px); transform: translateX(-135%) skewX(-8deg);
}
.process.is-swept .silk { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .process.is-swept .silk::before { animation: silkSweep 1.5s cubic-bezier(.5,0,.2,1) forwards; }
  @keyframes silkSweep {
    0%   { transform: translateX(-135%) skewX(-8deg); opacity: 0; }
    12%  { opacity: 1; }
    86%  { opacity: 1; }
    100% { transform: translateX(235%) skewX(-8deg); opacity: 0; }
  }
  .process .step { opacity: 0; transform: translateY(20px); }
  .process.is-swept .step { animation: stepRise .65s cubic-bezier(.16,1,.3,1) forwards; }
  .process.is-swept .step:nth-child(1) { animation-delay: .20s; }
  .process.is-swept .step:nth-child(2) { animation-delay: .40s; }
  .process.is-swept .step:nth-child(3) { animation-delay: .60s; }
  .process.is-swept .step:nth-child(4) { animation-delay: .30s; }
  .process.is-swept .step:nth-child(5) { animation-delay: .50s; }
  .process.is-swept .step:nth-child(6) { animation-delay: .70s; }
  @keyframes stepRise { to { opacity: 1; transform: none; } }
}
.step {
  background: var(--c-white); border-radius: var(--r-card); padding: 30px;
  position: relative; z-index: 2; transition: transform var(--t-base), box-shadow var(--t-base);
}
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
/* ТЗ 3.6: плашка «Этап 01…06» — фон --buff-300, текст --buff-ink */
.step__num { font-size: 14px; font-weight: 500; color: var(--buff-ink);
  background: var(--buff-300); border-radius: var(--r-pill); padding: 6px 14px; display: inline-block; }
.step__time { float: right; font-size: var(--text-xs); color: var(--c-muted); padding-top: 6px; }
.step__title { font-size: var(--h4-size); line-height: var(--h4-lh); font-weight: 500; margin: 20px 0 12px; }
.step__desc { font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--c-muted); }

/* ============ 7. TRUST-МАРКИЗА ============ */
/* маркиза встроена как ВЕРХНЯЯ КРОМКА секции отзывов (правка владельца): прозрачный фон
   поверх градиента острова, тонкая нижняя линия-разделитель. Не висит в пустоте. */
.marquee-wrap { background: transparent; padding: 22px 0; overflow: hidden;
  position: relative; z-index: 2; border-bottom: 1px solid rgba(255,255,255,.14); }
.marquee { display: flex; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
  .marquee { animation: scrollx 40s linear infinite; }
  .marquee-wrap:hover .marquee { animation-play-state: paused; }
}
@keyframes scrollx { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__item {
  display: inline-flex; align-items: center; gap: 10px; color: var(--on-brand);
  font-size: var(--text-lg); font-weight: 500; padding: 0 28px; white-space: nowrap;
}
.marquee__item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-300); flex: none; }

/* ============ 8. ОСТРОВ: КЛИЕНТЫ + ОТЗЫВЫ ============ */
/* padding-top:0 — сверху секции стоит маркиза-кромка; воздух до контента даёт .container */
.island { background: var(--grad-brand); color: var(--on-brand); padding: 0 0 110px; }
.island .container { padding-top: 84px; position: relative; }
/* ладонь: у самого заголовка, на его высоте (правка владельца: заполняет прежний
   пустой прямоугольник справа от заголовка). Параллакс приглушён (data-parallax 0.05),
   чтобы объект не «сползал» вниз и не оголял пустоту наверху. */
/* ладонь: в пустой зоне СПРАВА от текстового блока, на уровне заголовка/абзаца,
   ВЫШЕ карточек отзывов, целиком во вьюпорте (значения выверены замером по кадру). */
.island .obj--ladon { width: 400px; top: -6px; left: auto; right: 24px; z-index: 8;
  filter: drop-shadow(0 22px 40px rgba(31,44,54,.4)) drop-shadow(0 4px 12px rgba(61,85,104,.3)); }
.island .section-head { max-width: 820px; }
.island .section-head__sub { color: rgba(255,255,255,.8); }

.slider { position: relative; margin-top: 44px; overflow: hidden; }
.slider__track { display: flex; gap: 24px; transition: transform var(--t-slow); }
@media (prefers-reduced-motion: reduce) { .slider__track { transition: none; } }
/* ровно 2 отзыва на экран (десктоп), без обрезки краем; на планшете/мобиле — 1 */
.review {
  flex: 0 0 calc((100% - 24px) / 2); background: var(--surface); color: var(--blue-900);
  border-radius: var(--r-card); padding: 34px 36px; display: flex; flex-direction: column;
}
.review__head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.review__ava { width: 64px; height: 64px; border-radius: 50%; flex: none;
  background: var(--grad-brand); color: var(--on-brand); display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 500; }
.review__co { font-size: var(--h4-size); font-weight: 500; }
.review__role { font-size: var(--text-xs); color: var(--c-muted); }
.review__text { font-size: var(--text-md); line-height: var(--text-md-lh); }
.review__meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
/* ТЗ 3.7: теги под отзывом — фон --blue-200, текст --blue-700 */
.review__meta .chip { background: var(--blue-200); color: var(--blue-700); }
.slider__nav { display: flex; gap: 12px; margin-top: 32px; }
.slider__nav .icon-btn { background: rgba(255,255,255,.16); color: var(--on-brand); }
.slider__nav .icon-btn:hover { background: rgba(255,255,255,.28); }
.slider__nav .icon-btn:disabled { opacity: .4; cursor: default; }

/* полоса ниш (вместо логотипов) */
.niches { margin-top: 64px; }
.niches__title { font-size: var(--text-md); color: rgba(255,255,255,.7); margin-bottom: 18px; }
.niches__grid { display: flex; flex-wrap: wrap; gap: 12px; }
.niche {
  background: rgba(255,255,255,.12); border-radius: var(--r-md);
  padding: 14px 22px; font-size: var(--text-md); font-weight: 500; color: var(--on-brand);
  transition: background-color var(--t-base);
}
.niche:hover { background: rgba(255,255,255,.2); }

/* ============ 9. ЦЕНЫ ============ */
.pricing { background: var(--blue-50); padding: 100px 0; }
.pricing__top-notch { position: absolute; top: 0; left: 0; right: 0; height: 40px; }
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.price {
  background: var(--c-white); border-radius: var(--r-card); padding: 32px 28px;
  display: flex; flex-direction: column; transition: transform var(--t-base), box-shadow var(--t-base);
}
.price:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
/* ТЗ 3.8: выделенный тариф «Рост» — белая карточка с рамкой 2px --blue-700 (не тёмная) */
.price--feat {
  background: var(--surface); color: var(--blue-900); position: relative; z-index: 2;
  padding-top: 40px;
  border: 2px solid var(--blue-700);
  box-shadow: var(--shadow-lg);
}
/* бейдж выгоды — фон --buff-300, текст --buff-ink (ТЗ 3.8) */
.price__badge {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: var(--buff-300);
  color: var(--buff-ink); border-radius: var(--r-pill); padding: 9px 18px;
  font-size: var(--text-xs); font-weight: 500;
  box-shadow: var(--shadow-sm);
}
.price__badge svg { width: 15px; height: 15px; }
/* мягкий пульс-glow (синий, без цветных фиолетовых теней; off при reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  .price--feat { animation: featPulse 3s ease-in-out infinite; }
  @keyframes featPulse {
    0%, 100% { box-shadow: 0 22px 54px -20px rgba(31,44,54,.14); }
    50%      { box-shadow: 0 30px 84px -14px rgba(31,44,54,.22); }
  }
  .price__badge { animation: badgeBob 3s ease-in-out infinite; }
  @keyframes badgeBob { 0%,100%{ transform: translateX(-50%) translateY(0); } 50%{ transform: translateX(-50%) translateY(-3px); } }
}
.price__name { font-size: var(--h4-size); font-weight: 500; }
.price__tag { font-size: var(--text-xs); color: var(--c-muted); margin-top: 4px; }
.price--feat .price__tag { color: var(--muted); }
.price__val { font-size: 34px; font-weight: 500; letter-spacing: -0.02em; margin: 20px 0 4px; }
/* ТЗ 3.8: цены --blue-700 */
.price__val { color: var(--blue-700); }
.price__val span { font-size: var(--text-md); color: var(--muted); font-weight: 500; }
.price--feat .price__val span { color: var(--muted); }
.price__list { margin: 20px 0 24px; display: flex; flex-direction: column; gap: 12px; }
.price__list li { font-size: var(--text-sm); line-height: 1.4; display: flex; gap: 10px; align-items: flex-start; color: var(--blue-900); }
.price--feat .price__list li { color: var(--blue-900); }
/* ТЗ 3.8: маркеры пунктов в тарифах — тёплый --buff-300 */
.price__list svg { width: 18px; height: 18px; color: var(--buff-300); flex: none; margin-top: 2px; }
.price .btn { margin-top: auto; }
/* ТЗ 3.8: кнопка выделенного тарифа — заливка --blue-700 */
.price--feat .btn { background: var(--blue-700); color: var(--on-brand); }
.price--feat .btn:hover { background: var(--blue-800); }
.pricing__note { margin-top: 32px; font-size: var(--text-sm); color: var(--c-muted); max-width: 780px; }

/* ============ 10. FAQ ============ */
.faq { background: var(--blue-100); padding: 100px 0; }
.faq__list { max-width: 900px; margin: 48px auto 0; }
.faq__item { border-bottom: 1px solid var(--line); transition: background-color var(--t-base); }
/* ТЗ 3.9: раскрытый вопрос — сменой фона на --surface-2 (единый способ, без оранжевого).
   Только цвет+радиус, геометрия текста не меняется. */
.faq__item.is-open { background: var(--surface-2); border-radius: var(--r-md); border-bottom-color: transparent; }
.faq__q {
  width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 24px; font-size: var(--h4-size); line-height: 1.25; font-weight: 500; color: var(--c-ink);
}
.faq__q .ic { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--c-lilac-150);
  display: flex; align-items: center; justify-content: center; color: var(--c-primary);
  transition: transform var(--t-base), background-color var(--t-base); }
.faq__item.is-open .faq__q .ic { transform: rotate(45deg); background: var(--blue-700); color: var(--on-brand); }
.faq__q .ic svg { width: 22px; height: 22px; }
.faq__a { overflow: hidden; max-height: 0; transition: max-height var(--t-slow); }
.faq__a-inner { padding: 4px 24px 28px; font-size: var(--text-md); line-height: 1.55; color: var(--c-muted); max-width: 760px; }

/* ============ 11. CTA + ФОРМА ============ */
.cta { background: var(--blue-50); padding: 100px 0 120px; }
.cta__head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end; margin-bottom: 44px; }
.cta__note { font-size: var(--text-md); line-height: 1.5; color: var(--muted); }
.cta__note b { color: var(--blue-900); font-weight: 500; }   /* ТЗ 3.10: выделение --blue-900 */
/* ТЗ 3.10: строка про свободные слоты — --buff-500 (читаемый оранжевый текст на светлом) */
.cta__slots { margin-top: 12px; color: var(--buff-500); font-weight: 500; }
/* форма у́же контейнера и прижата ВПРАВО — слева открывается свободная зона под трубку
   (раньше форма занимала всю ширину, трубке негде было встать, кроме края вьюпорта). */
.form { background: var(--c-white); border-radius: var(--r-card); padding: 40px; box-shadow: var(--shadow-card); position: relative; z-index: 2; max-width: 940px; margin-left: auto; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--text-xs); color: var(--c-muted); padding-left: 4px; }
/* ТЗ 3.10: поля — фон --surface-2, граница --line, текст --blue-900, плейсхолдер --muted */
.field input, .field select, .field textarea {
  height: 56px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--surface-2); padding: 0 24px; font-size: var(--text-md); color: var(--blue-900);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.field textarea { height: auto; min-height: 110px; padding: 16px 24px; border-radius: var(--r-md); resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
/* ТЗ 3.10: фокус — граница --blue-600, кольцо rgba(240,153,79,.35) */
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(240,153,79,.35); }
.field.is-error input, .field.is-error select, .field.is-error textarea { border-color: var(--error); }
.field__err { font-size: var(--text-2xs); color: var(--error); padding-left: 4px; min-height: 0; }

.checks-title { font-size: var(--text-md); font-weight: 500; margin: 6px 0 14px; }
.checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 20px; margin-bottom: 20px; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--text-sm); color: var(--c-ink); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
/* ТЗ 3.10: чекбоксы — заливка --blue-700, белая галочка */
.check .box { width: 20px; height: 20px; border-radius: 4px; border: 2px solid var(--blue-700);
  flex: none; display: flex; align-items: center; justify-content: center; margin-top: 1px; transition: background-color var(--t-fast); }
.check .box svg { width: 14px; height: 14px; color: var(--on-brand); transform: scale(0); transition: transform var(--t-fast); }
.check input:checked + .box { background: var(--blue-700); }
.check input:checked + .box svg { transform: scale(1); }
.check input:focus-visible + .box { outline: 3px solid var(--focus); outline-offset: 3px; }

.consent { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-xs); color: var(--c-muted); margin-bottom: 12px; cursor: pointer; }
.consent a { color: var(--c-primary); border-bottom: 1px solid var(--c-lilac-400); }
.form__submit { margin-top: 12px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form__foot { font-size: var(--text-2xs); color: var(--c-muted); max-width: 380px; }
.form.is-sending button[type="submit"] { opacity: .7; pointer-events: none; }
.form-success { display: none; text-align: center; padding: 30px 10px; }
.form-success.is-on { display: block; }
/* ТЗ 3.10: экран «Заявка принята» — иконка и заголовок --success */
.form-success .ic { width: 72px; height: 72px; border-radius: 50%; background: var(--blue-100);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--success); }
.form-success h3 { color: var(--success); }
.form-success .ic svg { width: 36px; height: 36px; }
.form-success h3 { font-size: var(--h3-size); line-height: var(--h3-lh); margin-bottom: 12px; }
.form-success p { color: var(--c-muted); max-width: 460px; margin: 0 auto; }
/* трубка: целиком во вьюпорте у левого края, вертикально на уровне верхней трети
   формы (ряд Email/Телефон). z-1 (под формой z-2): бо́льшая часть в левом поле,
   правый край уходит за форму — поля ввода не перекрыты, карточка сверху. */
/* трубка: в свободной зоне СЛЕВА от формы, целиком во вьюпорте (left>0), вертикально —
   верхняя треть формы (ряды Имя/Email). z-3 (над карточкой): лёгкое декоративное наложение
   на левый край карточки формы, но поля/подписи (начинаются с padding 40px) не перекрыты. */
.cta .obj--trubka { width: 275px; top: 330px; right: auto; z-index: 3;
  /* left = левый край КОНТЕНТ-колонки (как у язычка) → трубка всегда в зоне слева от формы
     на любой ширине (на 1920 не «уезжает» в пустое левое поле). Правый край заходит на
     ~22px на угол карточки формы; поля ввода (padding 40px) не перекрыты. */
  left: calc(max(0px, (100vw - var(--container) - var(--gutter-desktop) * 2) / 2) + var(--gutter-desktop));
  filter: drop-shadow(0 24px 44px rgba(31,44,54,.28)) drop-shadow(0 4px 12px rgba(61,85,104,.4)); }
.form .obj--chat { width: 104px; top: -42px; right: -20px; z-index: 8; }

/* ============ 12. ФУТЕР ============ */
/* футер — верхний слой стопки: наезжает на #contact, встык (без margin) */
/* ТЗ 3.11: футер — фон --blue-800, текст --on-brand */
.footer { background: var(--blue-800); color: var(--on-brand); padding: 80px 0 40px;
  border-radius: var(--r-card) var(--r-card) 0 0; position: relative; z-index: 10;
  transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .footer { margin-top: 46px; } }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer__brand .brand-logo { color: var(--on-brand); }
.footer__desc { margin-top: 16px; font-size: var(--text-sm); color: rgba(246,249,251,.78); max-width: 340px; }
.footer__rating { margin-top: 18px; font-size: var(--text-sm); color: var(--on-brand); display: flex; gap: 16px; flex-wrap: wrap; }
/* ТЗ 3.11: цифры «4,9» и «ТОП-20» — --buff-300 */
.footer__rating b { font-weight: 500; color: var(--buff-300); }
.contact-cards { display: flex; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.ccard { background: var(--grad-glass); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-md);
  padding: 18px 20px; display: flex; align-items: center; gap: 14px; }
.ccard .ic { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center; }
.ccard .ic svg { width: 22px; height: 22px; color: var(--on-brand); }
.ccard b { display: block; font-size: var(--text-md); }
.ccard span { font-size: var(--text-2xs); color: rgba(255,255,255,.7); }
.footer__col h3 { font-size: var(--text-md); line-height: var(--text-md-lh); letter-spacing: 0; margin-bottom: 16px; color: rgba(255,255,255,.72); font-weight: 500; }
.footer__col a { display: block; padding: 7px 0; font-size: var(--text-sm); color: rgba(246,249,251,.9); transition: color var(--t-base); }
.footer__col a:hover { color: var(--on-brand); }
.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a { width: 44px; height: 44px; border-radius: var(--r-sm); background: rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center; transition: background-color var(--t-base); }
.socials a:hover { background: rgba(255,255,255,.26); }
/* ТЗ 4: иконки соцсетей --on-brand 80%, hover --buff-300 */
.socials svg { width: 20px; height: 20px; color: var(--on-brand); opacity: .8; transition: color var(--t-base), opacity var(--t-base); }
.socials a:hover svg { color: var(--buff-300); opacity: 1; }
.footer__legal { border-top: 1px solid rgba(255,255,255,.16); padding-top: 24px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: var(--text-2xs); color: rgba(255,255,255,.55); }
.footer__legal a { color: rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.2); }
/* «Настройки cookie» — кнопка, оформленная как правовая ссылка (ТЗ 4.2) */
.cookie-reopen { background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.2); }
.cookie-reopen:hover { color: #fff; }

/* cookie — согласие с равнозначными кнопками (ТЗ 4.2) */
/* фон --surface, граница --line, тень --shadow-md, ссылка --blue-600 */
.cookie { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 70; max-width: 760px; margin-inline: auto;
  background: var(--surface); color: var(--blue-900); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-lg);
  padding: 18px 22px; display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; font-size: var(--text-2xs); }
.cookie.is-hidden { display: none; }
.cookie__body { flex: 1 1 320px; min-width: 0; }
.cookie__text { color: var(--muted); line-height: 1.5; }
.cookie a { color: var(--blue-600); text-decoration: underline; }
.consent a { text-decoration: underline; }
/* панель категорий (по кнопке «Настроить») */
.cookie__cats { display: grid; gap: 9px; margin-top: 14px; }
.cookie__cats[hidden] { display: none; }
.cookie__cat { display: flex; align-items: flex-start; gap: 9px; color: var(--blue-900); font-size: var(--text-2xs); line-height: 1.45; cursor: pointer; }
.cookie__cat input { margin-top: 1px; width: 18px; height: 18px; accent-color: var(--blue-700); flex: none; cursor: pointer; }
.cookie__cat input:disabled { cursor: default; }
.cookie__cat b { color: var(--blue-700); font-weight: 500; }
/* кнопки: «Принять» и «Отклонить» одного размера и заметности; «Настроить» — третья опция */
.cookie__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cookie__actions .btn { padding: 11px 22px; min-height: 44px; }
.cookie__actions .btn[hidden] { display: none; }
@media (max-width: 639px) {
  /* компактная карточка снизу: текст + 3 кнопки в плотном ряду, без пустот.
     Ключ: сбрасываем flex-basis:320px у body (в колонке он раздувал высоту). */
  .cookie { flex-direction: column; align-items: stretch; gap: 12px;
            left: 12px; right: 12px; bottom: 12px; padding: 14px 16px; border-radius: var(--r-md); }
  .cookie__body { flex: 0 0 auto; }
  .cookie__text { font-size: 13px; line-height: 1.4; }
  .cookie__cats { margin-top: 10px; gap: 8px; }
  .cookie__actions { gap: 8px; }
  .cookie__actions .btn { flex: 1 1 0; min-height: 42px; padding: 9px 12px; font-size: 14px; white-space: nowrap; }
}