/* =========================================================================
   ЗВУК И СВЕТ ИНЖИНИРИНГ — дизайн-система
   Перенесено из макета Claude Design «Светозвук Инжиниринг.dc.html».
   Единица cqi макета заменена на vw: в макете фрейм 1440px с
   container-type:inline-size, поэтому 1cqi === 1vw при том же вьюпорте.
   ========================================================================= */

/* Шрифты вынесены в fonts.css и подключаются условно — см. inc/header.php.
   Пока файлов нет, работает системный фолбэк из --sans / --display. */

:root {
  --ink: #0B0F14;
  --ink-soft: #131A22;
  --ink-line: #242E3A;
  --brand: #12385F;
  --brand-600: #0E2C4B;
  --brand-50: #EEF3F8;
  --accent: #FF8A00;
  --accent-600: #E67A00;
  --accent-50: #FFF4E6;
  --accent-text: #A85200;   /* оранжевый для текста на светлом фоне, контраст ~7:1 */
  --bg: #FFFFFF;
  --bg-alt: #F5F7FA;
  --line: #E3E8EE;
  --line-dash: #C9D3DE;
  /* Поля форм. Белое поле с границей --line на белой подложке сливалось
     с фоном: поля было не видно, пока не кликнешь. Поэтому у поля своя
     заливка и своя, более тёмная граница. */
  --field-bg: #F2F5F9;
  --field-line: #B4C1D0;
  --field-line-hover: #8E9DAE;
  /* Внутренний отступ карточки формы. Вынесен в переменную: на первом экране
     по нему выравнивается левая колонка, иначе текст слева и заголовок формы
     стоят на разной высоте. */
  --lf-pad: clamp(24px, 2.6vw, 32px);
  --text: #10151B;
  --text-muted: #5C6875;
  --text-soft: #667380;
  --invert: #FFFFFF;
  --invert-muted: #A8B3C0;
  --success: #16805A;
  --danger: #D93A3E;
  --danger-soft: #E29396;
  --warning: #C77700;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(16,21,27,.06), 0 2px 8px rgba(16,21,27,.04);
  --shadow-md: 0 4px 12px rgba(16,21,27,.08), 0 12px 32px rgba(16,21,27,.06);
  --shadow-cta: 0 8px 24px rgba(255,138,0,.28);

  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --display: 'Manrope', 'Inter', system-ui, sans-serif;

  --pad-x: clamp(16px, 1.7vw, 24px);
  --sec-y: clamp(56px, 6.7vw, 96px);
  --head-gap: clamp(28px, 2.8vw, 40px);
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/28px var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
* { text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; hyphens: none; text-wrap: balance; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); }
a:hover { color: var(--brand-600); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.section--dark :focus-visible, .footer :focus-visible { outline-color: var(--accent); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Ссылка «Перейти к содержимому» должна появляться при переходе с клавиатуры —
   иначе она бесполезна: её не видит ни мышь, ни клавиатура. */
a.visually-hidden:focus, a.visually-hidden:focus-visible {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  width: auto; height: auto; margin: 0; clip: auto; overflow: visible;
  padding: 12px 18px; border-radius: var(--r-sm);
  background: var(--brand); color: #fff; text-decoration: none;
  font: 600 15px/22px var(--sans); box-shadow: var(--shadow-md);
}

/* ---------- Каркас ---------- */
.container { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad-x); }

.section { padding: var(--sec-y) 0; background: var(--bg); }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--ink); }
.section--tight { padding: clamp(48px, 5vw, 72px) 0; }
.section--facts { background: var(--ink); border-top: 1px solid var(--ink-line); padding: clamp(32px, 3.4vw, 48px) 0; }

.sec-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--head-gap); }
.overline {
  font: 600 clamp(12px, .9vw, 13px)/16px var(--sans);
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.overline--accent { color: var(--accent); }
.h2 {
  font: 700 clamp(26px, 2.8vw, 40px)/1.2 var(--display);
  letter-spacing: -.01em; color: var(--brand);
}
.h2--invert { color: var(--invert); }
.h2--gap { margin-bottom: var(--head-gap); }
.h3 { font: 700 clamp(20px, 1.7vw, 24px)/1.3 var(--display); color: var(--text); }
.lead { font: 400 clamp(16px, 1.2vw, 17px)/28px var(--sans); color: var(--text-muted); }
.lead--invert { color: var(--invert-muted); }
.note { font: 400 13px/19px var(--sans); color: var(--text-muted); }

.grid { display: grid; gap: 24px; }
.grid--250 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 16px; }
.grid--260 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grid--280 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid--300 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid--320 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--400 { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
.grid--210 { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.grid--200 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

@media (max-width: 520px) {
  .grid--400, .grid--320, .grid--300 { grid-template-columns: 1fr; }
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 32px; border-radius: var(--r-sm); border: none;
  font: 600 16px/24px var(--sans); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn--primary { background: var(--accent); color: #10151B; box-shadow: var(--shadow-cta); }
.btn--primary:hover { background: var(--accent-600); color: #10151B; transform: translateY(-1px); }
.btn--sec { background: transparent; border: 1.5px solid var(--brand); color: var(--brand); padding: 0 28px; }
.btn--sec:hover { background: var(--brand); color: #fff; }
.btn--sec-dark { background: transparent; border: 1.5px solid rgba(255,255,255,.35); color: #fff; padding: 0 28px; }
.btn--sec-dark:hover { background: rgba(255,255,255,.08); border-color: #fff; color: #fff; }
.btn--block { width: 100%; }
/* Кнопка до согласия на обработку данных неактивна. Гасили прозрачностью —
   надпись становилась нечитаемой и кнопка выглядела сломанной. Задаём
   приглушённые, но контрастные цвета: текст остаётся разборчивым. */
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; transform: none; }
.btn--primary:disabled, .btn--primary[aria-disabled="true"] {
  background: #FFE0BA; color: #6B4A12; box-shadow: none;
}
.btn--primary:disabled:hover, .btn--primary[aria-disabled="true"]:hover {
  background: #FFE0BA; color: #6B4A12; transform: none;
}
.btn--sec:disabled, .btn--sec[aria-disabled="true"] { opacity: .6; }
/* На тёмной подложке светлая плашка смотрелась бы ярче активной кнопки,
   поэтому там неактивное состояние приглушаем, сохраняя читаемый текст. */
.lf--dark .btn--primary:disabled, .lf--dark .btn--primary[aria-disabled="true"],
.section--dark .btn--primary:disabled, .section--dark .btn--primary[aria-disabled="true"] {
  background: #4A3A22; color: #F2CFA2;
}

@media (max-width: 480px) {
  .btn { width: 100%; padding: 0 20px; }
  .hero__actions .btn { width: 100%; }
}

/* ---------- Шапка ---------- */
.header {
  position: sticky; top: 0; z-index: 75; height: 88px;
  display: flex; align-items: center; margin-bottom: -88px;
  background: transparent;
  transition: height .18s ease, background .18s ease, box-shadow .18s ease;
}
.header__in {
  max-width: 1240px; margin: 0 auto; width: 100%; padding: 0 var(--pad-x);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(12px, 1.5vw, 24px);
}
.header.is-scrolled { height: 64px; background: var(--bg); box-shadow: var(--shadow-sm); }

/* Страницы без тёмного hero: шапка сразу светлая и не наезжает на контент.
   Без этого белый логотип и меню оказываются на белом фоне. */
.header--solid { background: var(--bg); box-shadow: var(--shadow-sm); margin-bottom: 0; }

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.logo__mark {
  width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--brand);
  display: grid; place-items: center; color: var(--accent);
  font: 800 15px/1 var(--display); flex-shrink: 0;
}
.logo__text { display: flex; flex-direction: column; gap: 2px; }
.logo__name {
  font: 800 clamp(13px, 1.05vw, 15px)/20px var(--display);
  letter-spacing: .02em; color: #fff; white-space: nowrap;
}
.logo__sub { font: 400 11px/14px var(--sans); color: var(--invert-muted); white-space: nowrap; }
.header.is-scrolled .logo__name, .header--solid .logo__name { color: var(--brand); }
.header.is-scrolled .logo__sub, .header--solid .logo__sub { color: var(--text-muted); }

/* gap сжимается на средних ширинах: логотип, меню, телефон с режимом работы
   и кнопка звонка вместе переставали помещаться в контейнер 1240px,
   и кнопка упиралась в правый край. */
.nav { display: flex; gap: clamp(12px, 1.25vw, 20px); align-items: center; flex-shrink: 1; min-width: 0; }
.nav a {
  font: 500 15px/23px var(--sans); color: #fff;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.header.is-scrolled .nav a, .header--solid .nav a { color: var(--text); }
.nav a:hover { color: var(--accent); }

.header__right { display: flex; align-items: center; gap: clamp(10px, 1vw, 16px); flex-shrink: 0; }
.header__phone { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.header__phone a {
  font: 700 clamp(16px, 1.35vw, 19px)/24px var(--display);
  color: #fff; text-decoration: none; white-space: nowrap;
}
.header__phone span { font: 400 12px/16px var(--sans); color: var(--invert-muted); }
.header.is-scrolled .header__phone a, .header--solid .header__phone a { color: var(--brand); }
.header.is-scrolled .header__phone span, .header--solid .header__phone span { color: var(--text-muted); }
/* Почта в шапке: наследует мелкий шрифт строки с режимом работы,
   иначе её перехватило бы правило .header__phone a (крупный телефон). */
.header__phone a.header__mail {
  font: 400 12px/16px var(--sans); color: var(--invert-muted);
  text-decoration: none; white-space: nowrap;
}
.header__phone a.header__mail:hover { color: #fff; }
.header.is-scrolled .header__phone a.header__mail,
.header--solid .header__phone a.header__mail { color: var(--text-muted); }
.header.is-scrolled .header__phone a.header__mail:hover,
.header--solid .header__phone a.header__mail:hover { color: var(--brand); }
/* Режим работы в шапке показываем только когда он действительно помещается:
   при 1281–1400px содержимое становилось шире контейнера 1240px и кнопка
   «Заказать звонок» упиралась в край экрана. */
@media (max-width: 1400px) { .header__regime { display: none; } }

.header__cta {
  display: inline-flex; align-items: center; height: 48px; padding: 0 20px;
  border-radius: var(--r-sm); background: transparent; cursor: pointer; white-space: nowrap;
  border: 1.5px solid rgba(255,255,255,.35); color: #fff; font: 600 15px/22px var(--sans);
  transition: border-color .18s ease, color .18s ease;
}
.header.is-scrolled .header__cta, .header--solid .header__cta { border-color: var(--brand); color: var(--brand); }

.burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-sm); cursor: pointer;
  background: transparent; border: 1.5px solid rgba(255,255,255,.35);
  color: #fff; font: 400 18px/1 var(--sans);
}
.header.is-scrolled .burger, .header--solid .burger { border-color: var(--line); color: var(--text); }

@media (max-width: 1239px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 767px) {
  .header__phone, .header__cta, .logo__sub { display: none; }
}

/* Мобильное меню */
.mobile-menu {
  position: fixed; inset: 0; z-index: 80; background: var(--ink);
  padding: 24px; display: flex; flex-direction: column; gap: 24px;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__top { display: flex; justify-content: space-between; align-items: center; }
.mobile-menu__title { font: 800 15px/20px var(--display); color: #fff; }
.mobile-menu__close {
  background: none; border: none; color: #fff;
  font: 400 28px/1 var(--sans); cursor: pointer; padding: 8px; min-width: 44px; min-height: 44px;
}
.mobile-menu nav { display: flex; flex-direction: column; gap: 20px; }
.mobile-menu nav a { font: 600 20px/28px var(--display); color: #fff; text-decoration: none; }
.mobile-menu__foot { margin-top: auto; display: flex; flex-direction: column; gap: 16px; }
.mobile-menu__phone { font: 700 24px/30px var(--display); color: #fff; text-decoration: none; }
.mobile-menu__mail { font: 400 16px/24px var(--sans); color: var(--invert-muted); text-decoration: none; }
.mobile-menu__mail:hover { color: #fff; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--ink); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,15,20,.94) 0%, rgba(11,15,20,.72) 55%, rgba(11,15,20,.45) 100%);
}
.hero__scrim--budget {
  background: linear-gradient(90deg, rgba(11,15,20,.94) 0%, rgba(11,15,20,.74) 55%, rgba(11,15,20,.5) 100%);
}
.hero__scrim--business {
  background: linear-gradient(90deg, rgba(11,15,20,.94) 0%, rgba(11,15,20,.7) 55%, rgba(11,15,20,.4) 100%);
}
.hero__in {
  position: relative; max-width: 1240px; margin: 0 auto;
  padding: calc(88px + clamp(32px, 3.4vw, 56px)) var(--pad-x) clamp(48px, 5.5vw, 80px);
}
.hero__grid { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.hero__head { flex: 1 1 100%; display: flex; flex-direction: column; gap: 18px; }
/* min-width: 0 обязателен: у флекс-элемента по умолчанию min-width:auto,
   и на узких экранах (360px) форма не сжималась до ширины контейнера —
   правый край карточки уходил за пределы экрана и срезался. */
.hero__body { flex: 1.4 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hero__form { flex: 1 1 360px; min-width: 0; max-width: 520px; }
.hero__form--wide { max-width: 540px; }

/* Пока колонки стоят рядом, опускаем левый текст на внутренний отступ формы
   (плюс её рамка): так первая строка абзаца и заголовок формы оказываются
   на одной линии. Когда форма переносится под текст, отступ не нужен. */
@media (min-width: 900px) {
  .hero__grid .hero__body { padding-top: calc(var(--lf-pad) + 1px); }
}

.hero h1 {
  font: 800 clamp(32px, 3.9vw, 56px)/1.1 var(--display);
  letter-spacing: -.02em; color: #fff; max-width: 34ch;
}
.hero--budget h1 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.12; max-width: 42ch; }
.hero--business h1 { font-size: clamp(32px, 3.7vw, 54px); max-width: 42ch; }
.hero__lead {
  font: 400 clamp(17px, 1.4vw, 20px)/1.6 var(--sans);
  color: var(--invert-muted); max-width: 52ch;
}
.hero__lead--bright { color: #fff; }
.hero__lead strong { font-weight: 600; }

.bullets { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.bullet { display: flex; gap: 10px; align-items: flex-start; max-width: 30ch; }
.bullet__mark { color: var(--accent); font: 700 15px/23px var(--sans); }
.bullet span:last-child { font: 400 clamp(14px, 1.05vw, 15px)/23px var(--sans); color: #fff; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- Блок фактов ---------- */
.facts { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.fact { display: flex; flex-direction: column; gap: 8px; padding-left: 24px; border-left: 1px solid var(--ink-line); }
.fact__n {
  font: 800 clamp(36px, 3.6vw, 52px)/1.05 var(--display);
  letter-spacing: -.02em; color: var(--accent); font-variant-numeric: tabular-nums;
}
.fact__t { font: 400 clamp(14px, 1.05vw, 15px)/23px var(--sans); color: var(--invert-muted); }

/* ---------- Карточки-сегменты ---------- */
.seg {
  position: relative; overflow: hidden; border-radius: var(--r-lg); min-height: 380px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(24px, 2.8vw, 40px); text-decoration: none;
}
.seg::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,15,20,.35) 0%, rgba(11,15,20,.92) 68%);
}
.seg__in { position: relative; display: flex; flex-direction: column; gap: 16px; }
.seg__badge {
  align-self: flex-start; border-radius: var(--r-full); background: rgba(255,255,255,.14);
  color: #fff; font: 600 12px/16px var(--sans); letter-spacing: .06em;
  text-transform: uppercase; padding: 7px 14px;
}
.seg h3 { font: 700 clamp(22px, 2vw, 28px)/1.25 var(--display); color: #fff; }
.seg p { font: 400 clamp(16px, 1.2vw, 17px)/28px var(--sans); color: var(--invert-muted); max-width: 44ch; }
.seg__list { display: flex; flex-direction: column; gap: 10px; }
.seg__list div { display: flex; gap: 10px; }
.seg__list span:first-child { color: var(--accent); font: 700 14px/22px var(--sans); }
.seg__list span:last-child { font: 400 clamp(14px, 1.05vw, 15px)/22px var(--sans); color: #fff; }
.seg__cta {
  margin-top: 8px; display: inline-flex; align-items: center; align-self: flex-start;
  height: 56px; padding: 0 28px; border-radius: var(--r-sm);
  background: var(--accent); color: #10151B; font: 600 16px/24px var(--sans);
  transition: background .18s ease;
}
.seg:hover .seg__cta { background: var(--accent-600); }

/* ---------- Карточки ---------- */
.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: clamp(24px, 2.2vw, 32px); display: flex; flex-direction: column; gap: 16px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* Иконка раздела. Подложку и размер держим одинаковыми у карточек, плиток
   и мини-блоков: раньше это были юникод-символы разного кегля, и блоки
   выглядели неровно. */
.card__icon, .tile__icon, .mini__icon {
  width: 48px; height: 48px; min-width: 48px; border-radius: var(--r-full);
  background: var(--brand-50); color: var(--brand);
  display: grid; place-items: center;
}
.card__icon svg, .tile__icon svg, .mini__icon svg {
  width: 24px; height: 24px; display: block;
}
.card:hover .card__icon, .tile:hover .tile__icon { background: var(--brand); color: #fff; }
.card__icon, .tile__icon { transition: background-color .2s ease, color .2s ease; }
/* Карточки со значком выравниваем по центру: значок, заголовок и описание
   на одной оси. Карточки без значка (со списками ссылок, адресами) остаются
   выключкой влево — там центр мешал бы читать. */
.card--center, .mini--center { align-items: center; text-align: center; }
/* На телефоне центрированные плитки заметно вытягиваются по высоте:
   восемь карточек в один столбец — три экрана прокрутки. Поэтому короткие
   плитки ставим по две в ряд, а отступы и значок делаем компактнее. */
@media (max-width: 560px) {
  .grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grid--compact .mini { padding: 18px 12px; gap: 10px; }
  .grid--compact .mini__title { font: 600 14px/20px var(--sans); }
  .mini--center .mini__icon, .card--center .card__icon {
    width: 40px; height: 40px; min-width: 40px;
  }
  .mini--center .mini__icon svg, .card--center .card__icon svg { width: 22px; height: 22px; }
  .card--center { padding: 22px 18px; gap: 12px; }
}
.tile { align-items: center; text-align: center; }
.card p { font: 400 clamp(16px, 1.2vw, 17px)/28px var(--sans); color: var(--text-muted); }

.tile {
  text-align: left; cursor: pointer; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 24px; display: flex; flex-direction: column; gap: 12px;
  font-family: var(--sans); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-dash); }
.tile__title { font: 700 clamp(17px, 1.35vw, 19px)/27px var(--display); color: var(--text); }
.tile__items { font: 400 13px/19px var(--sans); color: var(--text-muted); }

.mini {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px;
  display: flex; flex-direction: column; gap: 12px; background: var(--bg);
}
.mini__title { font: 600 clamp(16px, 1.2vw, 17px)/26px var(--sans); color: var(--text); }

/* ---------- Кейсы ---------- */
.case {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.case:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.case__body { padding: 24px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.badge {
  align-self: flex-start; border-radius: var(--r-full); background: var(--brand-50);
  color: var(--brand); font: 600 12px/16px var(--sans); padding: 6px 12px;
}
.case h3 { font: 700 clamp(19px, 1.5vw, 22px)/1.3 var(--display); color: var(--text); }
.case__rows { display: flex; flex-direction: column; gap: 10px; }
.case__row { display: grid; grid-template-columns: 88px 1fr; gap: 12px; }
.case__row--wide { grid-template-columns: 92px 1fr; }
.case__k { font: 600 13px/19px var(--sans); color: var(--text-muted); }
.case__v { font: 400 clamp(14px, 1.05vw, 15px)/22px var(--sans); color: var(--text); }
.case__result {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  font: 800 clamp(20px, 1.8vw, 26px)/1.25 var(--display); color: var(--accent-text);
}
/* Логотип заказчика вместо иллюстрации, пока нет фотографий объекта. */
.case__logo {
  aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 32px;
  background: var(--bg); border-bottom: 1px solid var(--line);
  /* Без этого высокий логотип растягивает блок сильнее пропорции 4:3. */
  min-height: 0; overflow: hidden;
}
.case__logo img { width: auto; height: auto; max-width: 70%; max-height: 120px; object-fit: contain; }
/* Фото объекта в карточке кейса: снимок на всю ширину, логотип заказчика в углу. */
.case__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; min-height: 0;
  background: var(--bg-alt); border-bottom: 1px solid var(--line);
}
.case__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.case__mark {
  position: absolute; left: 12px; bottom: 12px; height: 48px; max-width: 60%;
  padding: 6px 10px; border-radius: var(--r-sm); background: #fff;
  display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.case__mark img { max-height: 36px; max-width: 120px; width: auto; height: auto; object-fit: contain; }
.case__mark--dark { background: var(--brand); }
.case__credit {
  position: absolute; right: 8px; top: 8px; padding: 3px 6px; border-radius: 4px;
  font: 400 11px/1.2 var(--sans); color: #fff; background: rgba(0,0,0,.5);
}
.case__logo--dark, .client__logo--dark { background: var(--brand); }

/* Блок «Нам доверяют». */
.clients { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); }
.client {
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg);
  padding: 16px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; text-align: center;
}
.client__logo {
  width: 100%; height: 72px; margin-bottom: 8px; border-radius: var(--r-sm);
  display: grid; place-items: center; padding: 6px;
}
.client__logo img { max-width: 100%; max-height: 60px; object-fit: contain; }
.client__name { font: 600 13px/18px var(--sans); color: var(--text); }
.client__city { font: 400 12px/16px var(--sans); color: var(--text-muted); }

/* Карточка объекта (для /business/) */
.obj {
  text-align: left; cursor: pointer; padding: 0; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  display: flex; flex-direction: column; font-family: var(--sans);
  transition: transform .2s ease, box-shadow .2s ease;
}
.obj:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.obj__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.obj__title { font: 700 clamp(17px, 1.35vw, 19px)/27px var(--display); color: var(--text); }
.obj__text { font: 400 clamp(14px, 1.05vw, 15px)/22px var(--sans); color: var(--text-muted); }
.obj__more { font: 600 clamp(14px, 1.05vw, 15px)/22px var(--sans); color: var(--brand); }

/* Иллюстрация объекта: фотография, если файл есть, иначе градиент с пиктограммой. */
.obj__media { display: block; position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; }
.obj__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.obj:hover .obj__photo { transform: scale(1.03); }
.obj__photo { transition: transform .35s ease; }

/* ---------- Заглушки изображений ----------
   Градиенты стоят вместо фотографий: макет отдан без фотоматериала.
   При появлении снимков блок заменяется на <picture> с теми же пропорциями. */
/* display:block обязателен: внутри .obj заглушка лежит в <span>,
   а на инлайновом элементе width и aspect-ratio не работают. */
.scene { display: block; position: relative; width: 100%; }
.scene--4x3 { aspect-ratio: 4/3; }
.scene--16x10 { aspect-ratio: 16/10; }
/* Пиктограмма поверх градиента: сама заглушка остаётся фоном, иконка центрируется. */
.scene--icon { display: grid; place-items: center; }
.scene__icon { width: clamp(52px, 24%, 76px); height: auto; color: rgba(255,255,255,.58); }
.obj:hover .scene__icon { color: rgba(255,255,255,.72); }
.scene__icon { transition: color .2s ease; }
.scene--hall { background: radial-gradient(140% 90% at 50% 118%,rgba(255,138,0,.20),transparent 62%),conic-gradient(from 202deg at 26% -12%,rgba(255,205,140,.30) 0 5deg,transparent 6deg),conic-gradient(from 158deg at 74% -12%,rgba(255,205,140,.24) 0 4deg,transparent 5deg),linear-gradient(180deg,transparent 58%,rgba(255,138,0,.10) 58% 66%,transparent 66%),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 2px,transparent 2px 15px),linear-gradient(180deg,#101822,#0B0F14); }
.scene--school { background: radial-gradient(120% 80% at 50% 115%,rgba(255,255,255,.14),transparent 60%),conic-gradient(from 190deg at 50% -10%,rgba(255,255,255,.16) 0 8deg,transparent 10deg),linear-gradient(180deg,transparent 54%,rgba(18,56,95,.55) 54%),repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 2px,transparent 2px 18px),linear-gradient(180deg,#1B2836,#0F151C); }
.scene--theatre { background: conic-gradient(from 200deg at 50% -8%,rgba(255,205,140,.22) 0 6deg,transparent 8deg),linear-gradient(180deg,transparent 46%,rgba(18,56,95,.45) 46%),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 2px,transparent 2px 14px),linear-gradient(180deg,#141A24,#0B0F14); }
.scene--restaurant { background: radial-gradient(70% 60% at 30% 30%,rgba(255,138,0,.28),transparent 65%),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 20px),linear-gradient(160deg,#1A1B20,#0E1116); }
.scene--club { background: radial-gradient(40% 60% at 50% 100%,rgba(255,138,0,.40),transparent 60%),radial-gradient(30% 40% at 20% 10%,rgba(18,56,95,.60),transparent 60%),repeating-linear-gradient(75deg,rgba(255,255,255,.06) 0 2px,transparent 2px 18px),linear-gradient(180deg,#151A24,#0B0F14); }
.scene--karaoke { background: radial-gradient(50% 50% at 70% 40%,rgba(255,138,0,.30),transparent 60%),radial-gradient(40% 40% at 25% 65%,rgba(18,56,95,.50),transparent 60%),linear-gradient(180deg,#161A22,#0B0F14); }
.scene--banquet { background: radial-gradient(60% 50% at 50% 20%,rgba(255,205,140,.22),transparent 62%),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px),linear-gradient(180deg,#1A2028,#0C1015); }
.scene--conf { background: linear-gradient(180deg,transparent 52%,rgba(18,56,95,.50) 52%),repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 2px,transparent 2px 22px),radial-gradient(60% 40% at 50% 12%,rgba(255,255,255,.14),transparent 60%),linear-gradient(180deg,#182130,#0C1117); }
.scene--hotel { background: linear-gradient(180deg,transparent 58%,rgba(18,56,95,.45) 58%),radial-gradient(50% 40% at 30% 25%,rgba(255,138,0,.20),transparent 62%),linear-gradient(180deg,#171D26,#0B0F14); }
.scene--sport { background: radial-gradient(80% 60% at 50% 10%,rgba(255,255,255,.16),transparent 60%),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,transparent 2px 40px),linear-gradient(180deg,#141C26,#0B0F14); }
.scene--mall { background: repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 3px,transparent 3px 34px),radial-gradient(60% 50% at 50% 0%,rgba(255,255,255,.18),transparent 60%),linear-gradient(180deg,#151B24,#0B0F14); }
.scene--hero-home { background: radial-gradient(140% 90% at 50% 118%,rgba(255,138,0,.20),transparent 62%),conic-gradient(from 202deg at 26% -12%,rgba(255,205,140,.30) 0 5deg,transparent 6deg),conic-gradient(from 158deg at 74% -12%,rgba(255,205,140,.24) 0 4deg,transparent 5deg),conic-gradient(from 186deg at 46% -14%,rgba(255,255,255,.14) 0 3deg,transparent 4deg),linear-gradient(180deg,transparent 58%,rgba(255,138,0,.10) 58% 66%,transparent 66%),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 2px,transparent 2px 15px),linear-gradient(180deg,#101822,#0B0F14); }
.scene--hero-budget { background: radial-gradient(120% 80% at 50% 115%,rgba(255,255,255,.14),transparent 60%),conic-gradient(from 190deg at 50% -10%,rgba(255,255,255,.16) 0 8deg,transparent 10deg),linear-gradient(180deg,transparent 54%,rgba(18,56,95,.55) 54%),repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 2px,transparent 2px 18px),linear-gradient(180deg,#1B2836,#0F151C); }
.scene--hero-business { background: radial-gradient(55% 45% at 18% 22%,rgba(255,138,0,.34),transparent 62%),radial-gradient(45% 40% at 82% 28%,rgba(18,56,95,.55),transparent 64%),repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 24px),linear-gradient(165deg,#181C25,#0B0F14); }

/* ---------- Сравнение ---------- */
.cmp { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 2.2vw, 28px); border-radius: var(--r-md); }
.cmp--bad { border: 1px dashed var(--line-dash); }
.cmp--good { background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.cmp__label { font: 600 clamp(12px, .9vw, 13px)/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.cmp--bad .cmp__label { color: var(--text-soft); }
.cmp--good .cmp__label { color: var(--brand); }
.cmp__row { display: flex; gap: 12px; }
.cmp__row span:first-child { font: 700 15px/26px var(--sans); flex-shrink: 0; }
.cmp--bad .cmp__row span:first-child { color: var(--danger-soft); }
.cmp--good .cmp__row span:first-child { color: var(--success); }
.cmp__row span:last-child { font: 400 clamp(16px, 1.2vw, 17px)/26px var(--sans); }
.cmp--bad .cmp__row span:last-child { color: var(--text-soft); }
.cmp--good .cmp__row span:last-child { color: var(--text); }

/* ---------- Проблема/решение ---------- */
.pr { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: stretch; }
.pr__problem { padding: 24px; display: flex; gap: 14px; align-items: flex-start; }
.pr__mark { color: var(--warning); font: 700 17px/27px var(--sans); flex-shrink: 0; }
.pr__title { font: 700 clamp(17px, 1.35vw, 19px)/27px var(--display); color: var(--text-muted); }
.pr__sub { font: 400 clamp(14px, 1.05vw, 15px)/23px var(--sans); color: var(--text-soft); }
.pr__solution {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 24px; display: flex; gap: 14px; align-items: flex-start;
}
.pr__ok { color: var(--success); font: 700 17px/28px var(--sans); flex-shrink: 0; }
.pr__solution div:last-child { font: 400 clamp(16px, 1.2vw, 17px)/28px var(--sans); color: var(--text); }

/* ---------- Таймлайн ---------- */
.step { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 2px dashed var(--line); }
.step__n {
  width: 44px; height: 44px; border-radius: var(--r-full); border: 1.5px solid var(--brand);
  display: grid; place-items: center; font: 700 17px/1 var(--display); color: var(--brand);
}
.step__title { font: 700 clamp(17px, 1.35vw, 19px)/27px var(--display); color: var(--text); }
.step__text { font: 400 clamp(14px, 1.05vw, 15px)/23px var(--sans); color: var(--text-muted); }
/* --accent (#FF8A00) на белом даёт 2.3:1 при норме 4.5:1.
   Для текста на светлом фоне используем тёмный оттенок того же тона. */
.step__time { font: 600 clamp(14px, 1.05vw, 15px)/23px var(--sans); color: var(--accent-text); }

/* ---------- Списки ---------- */
.docs { display: grid; gap: 12px 40px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.docs__row { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.docs__row span:first-child { color: var(--brand); font: 400 16px/26px var(--sans); }
.docs__row span:last-child { font: 400 clamp(16px, 1.2vw, 17px)/26px var(--sans); color: var(--text); }

/* Ровно 8 в ряд на десктопе: 16 логотипов дают два полных ряда без «хвоста». */
.brands { display: grid; gap: 16px; grid-template-columns: repeat(8, 1fr); }
@media (max-width: 1100px) { .brands { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px)  { .brands { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
.brand {
  height: 84px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  display: grid; place-items: center; background: var(--bg-alt);
}
.brand span { font: 400 11px/1 var(--mono); color: #7A8794; }
/* Логотипы разной формы: широкие упираются в ширину, квадратные — в высоту.
   Обесцвечиваем не полностью, иначе светлые марки почти пропадают. */
.brand img {
  max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(.85); opacity: .8;
  transition: filter .2s ease, opacity .2s ease;
}
.brand:hover img { filter: none; opacity: 1; }

.callout {
  background: var(--accent-50); border-radius: var(--r-md); padding: 24px;
  font: 500 clamp(16px, 1.2vw, 17px)/28px var(--sans); color: var(--text); max-width: 70ch;
}

.pkg {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(24px, 2.2vw, 32px);
  display: flex; flex-direction: column; gap: 16px; background: var(--bg);
}
.pkg h3 { font: 700 clamp(20px, 1.7vw, 24px)/1.3 var(--display); color: var(--brand); }
.pkg__who { font: 600 clamp(14px, 1.05vw, 15px)/23px var(--sans); color: var(--text-muted); }
.pkg__what { font: 400 clamp(16px, 1.2vw, 17px)/28px var(--sans); color: var(--text); }
.pkg__price {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  font: 800 clamp(22px, 1.9vw, 26px)/1.2 var(--display); color: var(--brand);
}

.loss {
  background: var(--ink-soft); border: 1px solid var(--ink-line); border-radius: var(--r-md);
  padding: clamp(24px, 2.2vw, 32px); display: flex; flex-direction: column; gap: 14px;
}
.loss__title { font: 700 clamp(19px, 1.5vw, 22px)/1.3 var(--display); color: #fff; }
.loss__text { font: 400 clamp(16px, 1.2vw, 17px)/28px var(--sans); color: var(--invert-muted); }

.srv { border-left: 1px solid var(--ink-line); padding-left: 24px; display: flex; flex-direction: column; gap: 10px; }
.srv div { font: 600 clamp(16px, 1.2vw, 17px)/26px var(--sans); color: #fff; }

.ru-box {
  flex: 1 1 320px; background: var(--accent-50); border-radius: var(--r-md);
  padding: clamp(24px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 14px;
}
.ru-box__title { font: 700 clamp(17px, 1.35vw, 19px)/27px var(--display); color: var(--text); }
.ru-box__row { display: flex; gap: 10px; }
.ru-box__row span:first-child { color: var(--warning); font: 700 15px/26px var(--sans); }
.ru-box__row span:last-child { font: 400 clamp(16px, 1.2vw, 17px)/26px var(--sans); color: var(--text); }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; }
.faq__item { border-top: 1px solid var(--line); }
.faq__q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 24px 56px 24px 0; position: relative;
  font: 600 clamp(17px, 1.35vw, 18px)/27px var(--sans); color: var(--text);
}
.faq__sign {
  position: absolute; right: 0; top: 24px; width: 20px; height: 20px;
  display: grid; place-items: center; font: 400 22px/1 var(--sans); color: var(--brand);
  transition: transform .2s ease;
}
.faq__q[aria-expanded="true"] .faq__sign { transform: rotate(45deg); }
.faq__a { padding: 0 0 24px; max-width: 760px; font: 400 clamp(16px, 1.2vw, 17px)/28px var(--sans); color: var(--text-muted); }
.faq__a[hidden] { display: none; }

/* ---------- Контакты ---------- */
.split { display: flex; flex-wrap: wrap; gap: 40px; }
.split--center { align-items: center; }
.split__text { flex: 1 1 380px; display: flex; flex-direction: column; gap: 20px; }
.split__text--narrow { flex: 1 1 340px; }
.split__form { flex: 1 1 420px; max-width: 560px; }
.split__form--wide { flex: 1 1 440px; max-width: 600px; }
.contacts__phone { font: 700 clamp(26px, 2.4vw, 32px)/1.2 var(--display); color: #fff; text-decoration: none; }
.contacts__phone--sm { font-size: clamp(24px, 2.2vw, 30px); }
.contacts__mail { font: 400 clamp(16px, 1.2vw, 17px)/28px var(--sans); color: var(--invert-muted); }
.contacts__mail-link { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.contacts__mail-link:hover { border-bottom-color: #fff; }
.chips { display: flex; gap: 12px; flex-wrap: wrap; }
.chip {
  height: 44px; padding: 0 20px; border-radius: var(--r-full); border: 1px solid var(--ink-line);
  color: #fff; display: inline-flex; align-items: center;
  font: 500 15px/22px var(--sans); text-decoration: none;
}
.chip:hover { color: #fff; border-color: var(--accent); }

.magnet { border-radius: var(--r-lg); padding: clamp(24px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 24px; }
.magnet--brand { background: var(--brand-50); }
.magnet--accent { background: var(--accent-50); }
.magnet h2 { color: var(--brand); }
.magnet--accent h2 { color: var(--text); }

/* ---------- Форма (LeadForm) ---------- */
.lf { border-radius: var(--r-lg); padding: var(--lf-pad); }
.lf--dark { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); }
/* Светлая форма часто стоит на белой секции: без тени её край не читался. */
.lf--light { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.lf--brand { background: var(--brand-50); border: 1px solid var(--line); }
.lf--accent { background: var(--accent-50); border: 1px solid var(--line); }
.lf--row { padding: clamp(20px, 2.2vw, 28px); }

.lf__in { display: flex; flex-direction: column; gap: 20px; }
.lf__head { display: flex; flex-direction: column; gap: 8px; }
.lf__title { font: 600 clamp(17px, 1.35vw, 19px)/27px var(--display); color: var(--text); }
.lf__sub, .lf__caption { color: var(--text-muted); }
.lf__sub { font: 400 15px/23px var(--sans); max-width: 46ch; }
.lf__caption { font: 400 13px/19px var(--sans); }
.lf--dark .lf__title { color: #fff; }
.lf--dark .lf__sub, .lf--dark .lf__caption { color: var(--invert-muted); }

.lf__alert {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 14px 16px; border-radius: var(--r-sm);
  background: rgba(217,58,62,.10); border: 1px solid rgba(217,58,62,.45);
  font: 500 15px/22px var(--sans); color: var(--danger);
}
.lf--dark .lf__alert { background: rgba(217,58,62,.18); color: #FFC9CB; border-color: rgba(217,58,62,.55); }
.lf__alert-phone { font: 700 17px/24px var(--display); color: var(--danger); text-decoration: none; white-space: nowrap; }
.lf--dark .lf__alert-phone { color: #fff; }

.lf__grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.lf--row .lf__grid { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.lf__field { display: flex; flex-direction: column; gap: 8px; }
.lf__label { font: 500 15px/22px var(--sans); color: var(--text); }
.lf--dark .lf__label { color: #fff; }

.lf__input, .lf__select, .lf__area {
  height: 56px; padding: 0 16px; border-radius: var(--r-sm); width: 100%;
  background-color: var(--field-bg); border: 1.5px solid var(--field-line); color: var(--text);
  font: 400 17px/24px var(--sans); outline: none; appearance: none;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.lf__input:hover, .lf__select:hover, .lf__area:hover { border-color: var(--field-line-hover); }
/* На цветной подложке (brand/accent) поле, наоборот, делаем белым —
   иначе серое поле сливается уже с ней. */
.lf--brand .lf__input, .lf--brand .lf__select, .lf--brand .lf__area,
.lf--accent .lf__input, .lf--accent .lf__select, .lf--accent .lf__area {
  background-color: #fff;
}
.lf__area { height: auto; min-height: 96px; padding: 14px 16px; resize: vertical; line-height: 26px; }
/* Только background-color: шорткат background сбросил бы background-repeat
   и background-position, и стрелка списка размножилась бы плиткой по полю. */
.lf--dark .lf__input, .lf--dark .lf__select, .lf--dark .lf__area {
  background-color: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff;
}
.lf__input:focus, .lf__select:focus, .lf__area:focus {
  background-color: #fff; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(18,56,95,.16);
}
/* В тёмной теме текст поля белый, поэтому светлую заливку из общего правила
   нужно перебить — иначе на фокусе получается белое на белом. */
.lf--dark .lf__input:focus, .lf--dark .lf__select:focus, .lf--dark .lf__area:focus {
  background-color: rgba(255,255,255,.12); border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.16);
}
::placeholder { color: var(--text-soft); }
.lf--dark ::placeholder { color: var(--invert-muted); }
.lf__select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6875' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}
.lf--dark .lf__select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A8B3C0' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Выпадающий список рисует система, и он наследует цвет текста от select.
   В тёмной теме это давало белые пункты на белом фоне — не видно ничего.
   Задаём цвет и фон пунктов явно. */
.lf__select option {
  color: var(--text);
  background-color: #fff;
}
.lf__select option:disabled { color: var(--text-soft); }

.lf__input.is-invalid, .lf__select.is-invalid, .lf__area.is-invalid { border-color: var(--danger); }
.lf__err { font: 400 13px/19px var(--sans); color: var(--danger); }
.lf--dark .lf__err { color: #FF9EA1; }

.lf__file {
  position: relative; min-height: 56px; display: flex; align-items: center;
  padding: 0 16px; border-radius: var(--r-sm);
  border: 1.5px dashed var(--field-line-hover); background: var(--field-bg);
  transition: border-color .15s ease, background-color .15s ease;
}
.lf__file:hover { border-color: var(--brand); background: #fff; }
.lf--dark .lf__file { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.04); }
.lf__file.is-over { border-color: var(--accent); background: rgba(255,138,0,.08); }
.lf__file span { font: 400 15px/22px var(--sans); color: var(--text-muted); }
.lf--dark .lf__file span { color: var(--invert-muted); }
.lf__file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.lf__consents { display: flex; flex-direction: column; gap: 12px; }
.lf__check {
  position: relative;
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  min-height: 44px; padding: 2px 0;
}
.lf__box {
  width: 22px; height: 22px; min-width: 22px; border-radius: 5px; margin-top: 1px;
  border: 1.5px solid var(--field-line-hover); background: #fff; color: #fff;
  display: grid; place-items: center; font: 700 13px/1 var(--sans);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.lf__check:hover .lf__box { border-color: var(--brand); }
.lf--dark .lf__box { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.08); }
.lf__check input { position: absolute; opacity: 0; width: 0; height: 0; }
.lf__check input:checked + .lf__box { background: var(--brand); border-color: var(--brand); }
.lf__check input:checked + .lf__box::after { content: '✓'; }
.lf__check input:focus-visible + .lf__box { outline: 2px solid var(--brand); outline-offset: 2px; }
.lf.is-hint .lf__check input:not(:checked) + .lf__box { box-shadow: 0 0 0 3px rgba(217,58,62,.25); }
.lf__consent-text { font: 400 13px/19px var(--sans); color: var(--text-muted); }
.lf--dark .lf__consent-text { color: var(--invert-muted); }
.lf__consent-text a { color: var(--brand); text-decoration: underline; }
.lf--dark .lf__consent-text a { color: #fff; }
.lf__hint { font: 500 13px/19px var(--sans); color: var(--danger); }
.lf--dark .lf__hint { color: #FF9EA1; }
.lf__hint[hidden] { display: none; }

.lf__btn-wrap { display: flex; align-items: flex-end; }
.lf__btn { width: 100%; }
.lf--row .lf__btn { width: auto; min-width: 200px; }

/* Состояния после отправки */
.lf__state { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.lf__state[hidden] { display: none; }
.lf__state-icon {
  width: 48px; height: 48px; border-radius: var(--r-full);
  display: grid; place-items: center; color: #fff; font: 700 24px/1 var(--display);
}
.lf__state-icon--ok { background: var(--success); }
.lf__state-icon--err { background: var(--danger); }
.lf__state-phone { font: 700 22px/28px var(--display); color: var(--brand); text-decoration: none; }
.lf--dark .lf__state-phone { color: #fff; }
.lf__ghost {
  background: none; border: none; padding: 0; color: var(--brand);
  font: 600 15px/22px var(--sans); text-decoration: underline; cursor: pointer;
}
.lf--dark .lf__ghost { color: var(--invert-muted); }
.lf__form[hidden] { display: none; }
.lf__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Плавающие элементы ---------- */
.fab-wrap {
  position: fixed; right: 20px; bottom: 24px; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.fab {
  width: 56px; height: 56px; border-radius: var(--r-full); border: none;
  background: var(--brand); color: #fff; font: 400 22px/1 var(--sans);
  cursor: pointer; box-shadow: 0 8px 24px rgba(16,21,27,.28);
}
.fab-list { display: flex; flex-direction: column; gap: 8px; }
.fab-list[hidden] { display: none; }
.fab-list a {
  height: 44px; padding: 0 18px; border-radius: var(--r-full); background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  display: inline-flex; align-items: center; font: 600 14px/22px var(--sans);
  color: var(--text); text-decoration: none;
}

.mobilebar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
  height: 60px; background: var(--ink); border-top: 1px solid var(--ink-line);
}
.mobilebar a, .mobilebar button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 15px/22px var(--sans); text-decoration: none; border: none; cursor: pointer;
}
.mobilebar a { color: #fff; background: transparent; border-right: 1px solid var(--ink-line); }
.mobilebar button { background: var(--accent); color: #10151B; }
@media (max-width: 767px) {
  .mobilebar.is-visible { display: flex; }
  body.has-mobilebar { padding-bottom: 60px; }
  .fab-wrap { bottom: 76px; right: 16px; }
}

/* ---------- Cookie ---------- */
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--ink-soft); border-top: 1px solid var(--ink-line);
  padding: 16px var(--pad-x);
}
.cookie[hidden] { display: none; }
.cookie__in {
  max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap;
  gap: 16px; align-items: center; justify-content: space-between;
}
.cookie__text { font: 400 13px/19px var(--sans); color: var(--invert-muted); max-width: 70ch; }
.cookie__text a { color: #fff; text-decoration: underline; }
.cookie__actions { display: flex; gap: 12px; align-items: center; }
.cookie__accept {
  height: 44px; padding: 0 24px; border: none; border-radius: var(--r-sm);
  background: var(--accent); color: #10151B; font: 600 15px/22px var(--sans); cursor: pointer;
}
.cookie__more { font: 600 15px/22px var(--sans); color: var(--invert-muted); text-decoration: underline; }
@media (max-width: 767px) { .cookie { bottom: 60px; } }

/* ---------- Модальное окно ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100; background: rgba(11,15,20,.72);
  display: grid; place-items: center; padding: 24px; overflow-y: auto;
}
.modal[hidden] { display: none; }
.modal__box { width: 100%; max-width: 460px; background: #fff; border-radius: var(--r-lg); padding: 8px; }
.modal__top { display: flex; justify-content: flex-end; padding: 8px 8px 0; }
.modal__close {
  background: none; border: none; font: 400 24px/1 var(--sans);
  color: var(--text-muted); cursor: pointer; min-width: 44px; min-height: 44px;
}
.modal__body { padding: 0 8px 8px; }
/* Окно само даёт белую подложку: вторая рамка и тень у формы внутри лишние. */
.modal__body .lf { border: 0; box-shadow: none; }
body.is-locked { overflow: hidden; }

/* ---------- Футер ---------- */
.footer { background: var(--ink); padding: clamp(48px, 5vw, 72px) 0 32px; }
.footer__grid { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__brand { display: flex; align-items: center; gap: 12px; }
.footer__name { font: 800 15px/20px var(--display); color: #fff; }
.footer__about { font: 400 13px/19px var(--sans); color: var(--invert-muted); max-width: 34ch; }
.footer__soc { display: flex; gap: 8px; }
.footer__soc a {
  width: 36px; height: 36px; border-radius: var(--r-full); border: 1px solid var(--ink-line);
  display: grid; place-items: center; color: #fff; font: 400 13px/1 var(--sans); text-decoration: none;
}
.footer__label {
  font: 600 clamp(12px, .9vw, 13px)/16px var(--sans);
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.footer__col a { font: 400 15px/23px var(--sans); color: var(--invert-muted); text-decoration: none; }
.footer__col a:hover { color: #fff; }
.footer__phone { font: 700 19px/27px var(--display) !important; color: #fff !important; }
.footer__col > div:not(.footer__label):not(.footer__brand):not(.footer__soc) {
  font: 400 15px/23px var(--sans); color: var(--invert-muted);
}
.footer__bottom {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--ink-line);
  display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between;
}
.footer__req { display: flex; flex-direction: column; gap: 4px; font: 400 13px/19px var(--sans); color: var(--text-muted); }
.footer__req a { color: inherit; text-decoration: none; }
.footer__req a:hover { color: var(--invert-muted); }
.footer__offer { font: 400 13px/19px var(--sans); color: var(--text-muted); max-width: 34ch; }

/* ---------- Служебные страницы ---------- */
.page-narrow { max-width: 760px; margin: 0 auto; }
.page-narrow h1 { font: 800 clamp(28px, 3vw, 44px)/1.15 var(--display); color: var(--brand); margin-bottom: 20px; }
.page-narrow h2 { font: 700 clamp(20px, 2vw, 26px)/1.25 var(--display); color: var(--text); margin: 32px 0 12px; }
.page-narrow p, .page-narrow li { font: 400 17px/28px var(--sans); color: var(--text); }
.page-narrow ul { padding-left: 22px; }
.crumbs { font: 400 14px/22px var(--sans); color: var(--text-muted); padding: 20px 0 0; }
.crumbs--hero { padding: 0 0 14px; color: rgba(255,255,255,.62); }
.crumbs--hero a { color: rgba(255,255,255,.62); }
.crumbs--hero a:hover { color: #fff; }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand); }

/* Экраны 320–374px (iPhone SE первого поколения, компактные Android):
   название в логотипе и длинные надписи на кнопках не помещались в строку
   и выталкивали содержимое за край экрана. */
@media (max-width: 374px) {
  .logo__name { white-space: normal; }
  .logo { min-width: 0; flex-shrink: 1; }
  .logo__text { min-width: 0; }
}
@media (max-width: 480px) {
  .btn { height: auto; min-height: 56px; white-space: normal; padding-top: 10px; padding-bottom: 10px; }
}

/* На телефоне по этим ссылкам звонят и пишут пальцем, а высота строки
   текста меньше рекомендованных 44px — увеличиваем область нажатия,
   не трогая вид на десктопе. */
@media (max-width: 767px) {
  .contacts__phone, .contacts__mail-link {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .contacts__mail-link { padding: 4px 0; }
}

/* Чужое модальное окно из контейнера GTM.
   Тег рисует поверх сайта «Проверка безопасности. Подтвердите, что вы
   не робот» (#rvInteractionPopup) и перекрывает первый экран. Контейнер
   не трогаем — там настроены цели, поэтому гасим окно на стороне сайта.
   Сам тег при этом отрабатывает, и цели продолжают считаться. */
#rvInteractionPopup,
#rvInteractionPopup .rv-card { display: none !important; visibility: hidden !important; }

/* ---------- Таблицы ----------
   Обёртка .tw раньше не имела стилей: таблица сроков реакции вылезала
   за край экрана и на телефоне появлялась горизонтальная прокрутка.
   Таблицу реквизитов (.req) не трогаем — у неё свой мобильный вид. */
.tw { width: 100%; }
.tw > table:not(.req) {
  width: 100%; border-collapse: collapse; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
.tw > table:not(.req) th,
.tw > table:not(.req) td {
  padding: 14px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.tw > table:not(.req) thead th {
  font: 600 14px/22px var(--sans); color: var(--text-muted);
  background: var(--bg-alt); white-space: nowrap;
}
.tw > table:not(.req) td { font: 400 15px/23px var(--sans); color: var(--text); }
.tw > table:not(.req) tbody tr:last-child td { border-bottom: 0; }

/* На телефоне три колонки не помещаются: строку показываем карточкой,
   а названия колонок подставляем из атрибута data-l. */
@media (max-width: 640px) {
  .tw > table:not(.req),
  .tw > table:not(.req) tbody,
  .tw > table:not(.req) tr,
  .tw > table:not(.req) td { display: block; width: auto; }
  .tw > table:not(.req) { border: 0; }
  .tw > table:not(.req) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tw > table:not(.req) tr {
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--bg); margin-bottom: 12px; padding: 4px 0;
  }
  .tw > table:not(.req) td {
    display: flex; gap: 14px; align-items: baseline;
    border-bottom: 0; padding: 8px 16px;
  }
  .tw > table:not(.req) td::before {
    content: attr(data-l); flex: 0 0 40%;
    font: 600 13px/21px var(--sans); color: var(--text-muted);
  }
}

/* ---------- Страница контактов ---------- */
.req { border-collapse: collapse; width: 100%; background: var(--bg); }
.req th, .req td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.req th {
  font: 600 14px/22px var(--sans); color: var(--text-muted);
  width: 38%; white-space: nowrap; background: var(--bg-alt);
}
.req td { font: 400 15px/23px var(--sans); color: var(--text); }
.req tr:last-child th, .req tr:last-child td { border-bottom: 0; }
@media (max-width: 560px) {
  .req th, .req td { display: block; width: auto; white-space: normal; }
  .req th { border-bottom: 0; padding-bottom: 2px; }
}

.map { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--bg-alt); }
.map__stub {
  min-height: 260px; display: flex; flex-direction: column; gap: 16px;
  align-items: center; justify-content: center; padding: 32px; text-align: center;
}
.map__text { display: flex; flex-direction: column; gap: 6px; font: 400 17px/26px var(--sans); color: var(--text); }
.map iframe { display: block; width: 100%; height: 420px; border: 0; }