/* ============================================================
   Бухгалтерия360 — фирменная тема
   1. Токены    2. База    3. Типографика    4. Сетка
   5. Кнопки    6. Карточки    7. Шапка    8. Подвал
   Значения сняты с живого buh-360.ru (обмер 11.09).
   ============================================================ */

/* --- 1. Токены ------------------------------------------------ */
:root {
  /* Палитра (из бренд-бука v1.0) */
  --red:        #9F0208;
  --red-light:  #D15A5A;
  --red-mist:   #F6EBEB;
  --graphite:   #393939;
  --black:      #111111;
  --surface:    #F9F9F9;
  --white:      #FFFFFF;
  --line:       #EAEAEA;
  --line-soft:  #F1F1F1;

  /* Служебные */
  --green-deep: #284D3C;
  --green-mid:  #5C9875;
  --green-mist: #F1FCF5;
  --gold-a:     #FFB900;
  --gold-b:     #FFE128;

  --grad:       linear-gradient(-71deg, #9F0208, #D15A5A);
  --grad-100:   linear-gradient(100deg, #C2C0BC 0%, #B5B3AF 50%, #AEACA8 100%);

  /* Типографика */
  --font:        'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-accent: 'Unbounded', 'Geologica', Arial, sans-serif;

  /* Скругления и тени */
  --r-sm: 8px;
  --r-md: 10px;
  --r:    20px;
  --r-lg: 20px;
  --r-pill: 100px;
  --shadow-sm: 0 2px 8px rgba(17,17,17,.05);
  --shadow:    0 8px 28px rgba(17,17,17,.07);
  --shadow-red: 0 8px 24px rgba(159,2,8,.18);

  /* Ритм — снят с эталона */
  --container: 1160px;
  --gap: 16px;
  --section-y: 120px;   /* нижний отступ «записи» */
  --head-y: 60px;       /* отступ от шапки секции до контента */

  --ease: .3s ease;
}

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

/* `scroll-padding-top` — чтобы якорные переходы не уезжали под липкую шапку.
   Шапка 80px на десктопе и 64px на телефоне, воздух 4px сверху. Правило
   раньше стояло только в планшетной ветке responsive.css, и на десктопе
   клик по «Получить консультацию» ставил шапку секции «Контакты» на 2px от
   верха окна — ровно под шапкой сайта (замер 13.09, 1024 и 1440). */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--graphite);
  background: var(--white);
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--red); text-decoration: none; transition: color var(--ease); }
a:hover { color: var(--red-light); }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }

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

/* --- 3. Типографика ------------------------------------------- */
h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-accent);
  font-weight: 700;
  line-height: 1.2;
  color: var(--graphite);
}

/* H1 48/58 Unbounded — с эталона */
h1 { font-size: clamp(30px, 3.34vw, 48px); line-height: 1.21; }

/* H2 секций 38/46 Unbounded */
h2 { font-size: clamp(25px, 2.64vw, 38px); line-height: 1.21; }

/* Заголовки карточек 18/21.6 Geologica 600 */
h3 { font-size: 18px; line-height: 1.2; font-family: var(--font); font-weight: 600; }
h4 { font-size: 16px; font-family: var(--font); font-weight: 500; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Описание секции справа — 20/24 Geologica 300 */
.lead {
  font-weight: 300;
  font-size: 20px;
  line-height: 1.2;
  color: var(--graphite);
}
.lead--sm { font-size: 16px; line-height: 1.4; }

.muted { color: #777; }
.accent { color: var(--red); }
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- 4. Сетка ------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 48px);
  margin: 0 auto;
  padding: 0 24px;
}
.container--wide { max-width: 1328px; }

/* «Запись» страницы: контент + нижний отступ 120.
   `--section-pad-b` — отступ конкретной записи, когда он у эталона не 120:
   зазор между блоками там задан полем записи, и он разный (напр. на «Тарифах»
   между бонусами и плашкой 15px, а между калькулятором и вопросами 45).
   Значение приходит из шаблона страницы тем же `style`-аргументом, что и у
   первого экрана; по умолчанию работает общий ритм. На узком экране
   десктопный зазор не нужен — там общий ритм возвращает responsive.css. */
.section { padding: 0 0 var(--section-pad-b, var(--section-y)); }
.section--tight { padding-bottom: 60px; }
.section--surface { background: var(--surface); }
.section--mist { background: var(--red-mist); }

/* Шапка секции: пилюля сверху, ниже H2 слева и описание справа.
   Обмер эталона: пилюля y=+2 (h=29), H2 и описание стартуют на y=+51. */
.section__head { padding-bottom: var(--head-y); }
.section__head .pill { margin-top: 2px; }

.section__head__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: start;
  margin-top: 19px;
}
/* Поле H2 тоже задано на эталоне вручную, и от него зависит перенос строк.
   У главной ширины разошлись по модификаторам (ниже), у отраслевых — приходят
   переменной из шаблона: там у каждого раздела своя (замер с эталона). */
.section__head__grid h2 { max-width: var(--h2-w, 725px); min-height: var(--h2-min-h, 0px); }
/* Ширины и позиции лидов у эталона заданы полями вручную (замер по каждому разделу):
   --lead-w — ширина поля (от неё зависит перенос), --lead-mr — сдвиг от правого края. */
.section__head__grid .lead { width: var(--lead-w, 375px); margin-right: var(--lead-mr, 4px); }
.section__head--narrow .section__head__grid .lead { width: 275px; margin-right: 4px; }
.section__head--lead336 { --lead-w: 336px; }
.section__head--lead366 { --lead-w: 366px; --lead-mr: -52px; }
.section__head--lead316 { --lead-w: 316px; --lead-mr: -28px; }
.section__head--lead337 { --lead-w: 337px; --lead-mr: -4px; }
.section__head--end .section__head__grid { align-items: end; }
/* Шапка БЕЗ плашки — только `/why` («Ниши» и «Больше, чем просто цифры»).
   У эталона плашки у этих разделов нет вовсе, и H2 стоит на +2 от верха
   секции, а не на +51 (плашка 32.8 + отступ сетки 19). Высоту поля H2 эталон
   тоже задаёт вручную — её запас приходит тем же `--h2-min-h`, что у «Тарифов»
   (там поле 138 при тексте 92, здесь 96 при 94). Общий ряд шапок остальных
   страниц правило не трогает.

   Верхний отступ задан `padding`, а не `margin`: плашки в разметке нет, и
   сетка стала первым ребёнком шапки — `margin-top` у неё схлопнулся бы наружу
   (через шапку и контейнер) и не вошёл бы в высоту секции. Замер 15.09:
   с `margin-top` голова выходила 154 при эталонных 156. */
.section__head--nopill { padding-top: 2px; }
.section__head--nopill .section__head__grid { margin-top: 0; }
/* У эталона поле h2 задано вручную (592px) — там перенос на вторую строку. */
.section__head--process .section__head__grid h2 { max-width: var(--h2-w, 592px); }
/* Поля h2 у эталона заданы вручную и у каждого раздела свои (замер: 664, 625, 625,
   625, 625, 725, 592, 601, 666, 705, 705). На перенос влияет только это поле, и
   почти везде он совпадает с нашим дефолтом 725px — кроме «Кейсов»: там поле
   601px, из-за чего у эталона «— » закрывает первую строку, а не «— в».
   Значения — запасные: на отраслевых страницах поле приходит переменной. */
.section__head--cases .section__head__grid h2 { max-width: var(--h2-w, 601px); }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--20 { gap: 20px; }

@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* Иконка-обёртка для инлайновых SVG из buh360_icon() */
.icon { display: inline-flex; }
.icon svg { display: block; }

/* --- 5. Кнопки ------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease);
  white-space: nowrap;
}
/* Красный градиент лежит на ::before, а не на самой кнопке: переход градиент→сплошной
   цвет браузер не интерполирует и кнопка на 3–4 кадра проваливается в белый фон
   (градиент исчез, серый ещё прозрачен). Кросфейд по opacity — анимируется.
   Рамка снята: ::before с inset:0 покрывает padding-box, и под 1px прозрачной рамки
   проступала бы тёмная графитовая окантовка. Снятый 1px скомпенсирован padding'ом,
   размеры кнопок остаются прежними (у .hero__text и .cta__form свои padding — не тронуты). */
.btn--primary { background-color: var(--graphite); background-image: none; color: var(--white); box-shadow: var(--shadow-red);
                position: relative; z-index: 0; border: 0; padding: 15px 29px; }
.btn--primary::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: var(--grad); opacity: 1; transition: opacity var(--ease); }
.btn--primary:hover { background: var(--graphite); color: var(--white); box-shadow: var(--shadow); }   /* подъёма нет — как у эталона */
.btn--primary:hover::before { opacity: 0; }
.btn--primary.header-btn { padding: 0 21px; }   /* 20px + 1px снятой рамки сбоку */
.btn--ghost { background: transparent; color: var(--graphite); border-color: #D8D8D8; }
.btn--ghost:hover { background: var(--graphite); color: var(--white); border-color: var(--graphite); }
.btn--white { background: var(--white); color: var(--graphite); }
.btn--white:hover { background: var(--graphite); color: var(--white); }
.btn--outline-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn--outline-white:hover { background: var(--white); color: var(--red); }
.btn--pill { border-radius: var(--r-pill); }
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- 6. Карточки ---------------------------------------------- */
.card {
  background: var(--surface);
  border-radius: var(--r);
  padding: 24px;
  transition: transform var(--ease), box-shadow var(--ease);
}
.card__title { margin-bottom: 10px; }
.card__text { font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--graphite); margin: 0; }
.card--accent { background: var(--grad); color: var(--white); }
.card--accent .card__title, .card--accent h3 { color: var(--white); }
.card--accent .card__text { color: rgba(255,255,255,.9); }

/* Пилюля-надзаголовок секции. Эталон (Tilda-атом кнопки): строка текста 24.8px
   + контентный padding 2px 24px + внешний слой 2px по кругу — отсюда высота 32.8
   и ширина 124 + 48 + 4 = 176 («Способы связи», замер 14.09).
   Кольцо у эталона — тот же золотой градиент Тильды, что у пилюли hero
   (`sections.css`), и тоже 2px, а не сплошной цвет: пиксельная проба живой
   страницы 14.09 дала по кромке #FFBD04 слева → #FFDF3F справа, что сходится с
   `313.56deg #FFE128 → #FFB900` (расчёт по проекции совпал с пробой).
   Здесь раньше стояла рамка 1px #E3C88A: бокс выходил на 2px уже эталонного
   (174 вместо 176), а кольцо — бледнее и тоньше. */
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 24px;
  border: 2px solid var(--gold-a);   /* фолбэк, если маска не поддержана */
  border-radius: var(--r-pill);
  /* Пилюли эталона набраны Involve 600, а не основной гарнитурой: замер
     живого сайта 14.09 — «Способы связи» 176px при тексте 124, «Мы на карте»
     155 при 103. На Geologica тот же текст на 3–4px уже, поэтому семейство
     задано явно, а не через `--font` (ширину задаёт шрифт, ширина меняет
     перенос — как у полей H2). */
  font-family: 'Involve', 'Geologica', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24.8px;
  color: rgba(57,57,57,.8);
  background: transparent;
}
/* Кольцо-градиент: рисуем на ::before и вырезаем середину маской, чтобы нутро
   осталось прозрачным. Без рамки те же 4px по кругу даёт padding 4px 26px —
   геометрия та же, что 2px 24px + border 2px. Приём тот же, что у `.hero__pill`. */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .pill { border: 0; padding: 4px 26px; }
  .pill::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(313.56deg, #FFE128 0%, #FFB900 100%);
    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    -webkit-mask-clip: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    mask-clip: content-box, border-box;
    mask-composite: exclude;
    pointer-events: none;
  }
}
.pill svg { color: var(--gold-a); }

/* Метка на карточке (Стройка, 1С:БО и т.п.) */
.tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--graphite);
  border: 1px solid #DCDCDC;
  border-radius: var(--r-pill);
  padding: 5px 14px;
  background: var(--white);
}

/* --- 7. Шапка ------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  /* Доля непрозрачности — 80 %, просвет 20 % (задача РП
     rp-0110-wp-header-transparency-3, 01.10; цифра Павла: «Сделай 20 %»).
     История: .94 (6 %) → .98 (2 %, rp-…-transparency) → .85 (15 %, rp-…-2) → .80 (20 %).
     Размытие и насыщенность подложки не менялись. Мобильное меню
     (`.mobile-nav`, непрозрачный `var(--white)`) не трогаем. */
  background: rgba(255,255,255,.80);
  backdrop-filter: saturate(180%) blur(12px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  min-height: 80px;
}
.site-header__logo {
  /* `position: relative` нужен псевдоэлементу-маске ниже: без него его
     `inset: 0` отсчитался бы от `.site-header` (sticky = позиционирован)
     и красный слой лёг бы на всю ширину шапки. */
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /* Переход ссылки — как у эталона: `a.header-logo` на buh-360.ru имеет
     `transition: transform .3s, filter .3s`. Фильтра у нас больше нет
     (красный даётся маской), поэтому в переходе остался только `transform`. */
  transition: transform .3s;
}
/* Эталон: логотип 200×40 (файл 180×31), nav стартует на x=409. */
.site-header__logo img {
  width: 200px;
  height: auto;
  transition: opacity .3s;
}
/* Лого под курсором уходит в фирменный красный и приподнимается на 2 px.
   Форма красного слоя берётся маской из того же `logo-h.svg`: в файле 31
   path с единственным `fill="#393939"` на прозрачном фоне, то есть чистый
   монохром без подложки, — из него маска читает альфу. Заливка — брендовый
   `#9F0208`, поэтому цвет под курсором брендовый **по построению**, а не
   подогнанный: у прежней цепочки фильтра (стрелка FAQ) он уезжал в `#C7241C`.
   Маска растянута на весь бокс ссылки (`100% 100%`) — бокс тот же, что у
   `img`, так что форма совпадает на всех широтах, включая `height: 32px`
   на телефоне. Показывается кроссфейдом: `img` гаснет, слой проявляется —
   и переход идёт серый→красный, без проезда через посторонние оттенки,
   который давал интерполятор фильтра.
   Разметка и `logo-h.svg` не менялись вовсе: это псевдоэлемент.
   `pointer-events: none` — чтобы ссылка оставалась кликабельной по всей площади.
   Задачи РП: rp-0110-wp-logo-hover-red (01.10, красный по `:hover`/`:focus-visible`),
   -red-2 (01.10, фильтр и `translateY(-2px)` на ссылке по образцу живого эталона)
   и -red-3 (01.10, решение Павла: строго брендовый `#9F0208`, способ — маска). */
.site-header__logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #9F0208;
  -webkit-mask-image: url(../img/logo-h.svg);
  mask-image: url(../img/logo-h.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.site-header__logo:hover,
.site-header__logo:focus-visible { transform: translateY(-2px); }
.site-header__logo:hover img,
.site-header__logo:focus-visible img { opacity: 0; }
.site-header__logo:hover::after,
.site-header__logo:focus-visible::after { opacity: 1; }

.site-header__nav { display: flex; gap: 32px; margin-left: 69px; }
.site-header__nav a {
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--graphite);
  position: relative;
}
.site-header__nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease);
}
.site-header__nav a:hover { color: var(--red); }
.site-header__nav a:hover::after { transform: scaleX(1); }

/* Эталон справа: телефон (145) → 16 → кнопка (154) → 16 → MAX (40) → 8 → вход (40). */
.site-header__contacts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.header-phone { font-size: 16px; font-weight: 400; line-height: normal; color: var(--graphite); white-space: nowrap; margin-right: 8px; }
.header-phone:hover { color: var(--red); }
.header-btn { padding: 0 20px; height: 40px; font-size: 16px; font-weight: 600; line-height: 16px; border-radius: var(--r-sm); margin-right: 8px; }
.header-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--graphite); }
.header-icon svg, .header-icon img { width: 32px; height: 32px; }
.header-icon:hover { color: var(--red); }

/* Подъём −2px у телефона, кнопки и обеих иконок шапки — задача РП
   rp-0510-wp-header-hover-lift (05.10.2026, решение Павла 12:02).
   Жест не новый: лого шапки уже приподнимается на те же 2px под курсором
   (`.site-header__logo:hover`, строка выше), правка распространяет его на
   остальную правую часть шапки — «единообразно», как просил Павел.
     • `transition` у `.header-phone`/`.header-icon` перекрывает правило `a`
       (main.css:77), поэтому `color var(--ease)` в списке обязателен —
       иначе монохромный глиф входа теряет плавное покраснение;
     • у `.header-btn` transition НЕ переписываем: он уже задан `.btn`
       (background, color, border-color, transform, box-shadow) вместе с
       переходом `::before`; добавлен только hover-сдвиг;
     • тень иконок: на боксе 40×40 без скругления `box-shadow` давал
       квадратную плашку (примерка варианта V1), поэтому иконке задано
       `border-radius: 50%` — тень читается мягким кругом, а клавиатурная
       обводка становится круглой вместо скруглённого прямоугольника.
       Тень ослаблена против черновой `0 6px 14px .18` → `0 4px 10px .10`
       (примерка V4: в полосе шапки читается спокойнее).
   Красный по наведению и логика кнопки (градиент/фон) не тронуты. */
.header-phone { transition: color var(--ease), transform var(--ease); }
.header-phone:hover { transform: translateY(-2px); }
.header-btn:hover { transform: translateY(-2px); }
.header-icon {
  border-radius: 50%;
  transition: color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.header-icon:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, .10); }

.burger { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; gap: 5px; background: none; border: 0; cursor: pointer; padding: 0 8px; }
.burger span { display: block; height: 2px; background: var(--graphite); border-radius: 2px; }

/* Мобильное меню — раскрывается бургером */
.mobile-nav { border-top: 1px solid var(--line); background: var(--white); }
.mobile-nav__inner { display: grid; gap: 18px; padding-top: 20px; padding-bottom: 24px; }
.mobile-nav__inner > a:not(.btn) {
  font-size: 18px;
  font-weight: 500;
  color: var(--graphite);
}

/* --- 8. Подвал ------------------------------------------------ */
/* Перенесено дословно из блока эталона `tilda-footer-008`
   (скоуп `#tilda-footer-008` → `.site-footer`); графику бейджа и соцсетей
   эталон тоже красит фильтром, а не цветом. */
.site-footer {
  /* 30px прозрачной полосы над тёмным подвалом — это НЕ часть блока
     `tilda-footer-008`, а padding-top записи эталона `rec2444586891`
     (класс `t-rec_pt_30`, `padding-top: 30px`, фон прозрачный), которая лежит
     ВЫШЕ скоупа блока и потому при переносе не попала. Замер эталона:
     низ сетки блога 10180.3 → запись 10300.3 (padding-bottom секции 120px)
     → +30px → `#tilda-footer-008` 10330.3 с фоном `rgb(57,57,57)`.
     Именно margin, а не padding: фон графитовый на самом `.site-footer`,
     и padding-top растянул бы тёмное на эти 30px вверх. */
  margin: 30px 0 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--graphite);
  font-family: var(--font);
  color: var(--white);
  /* ЭТАЛОН наследует `line-height: normal` от базовой типографики Тильды,
     у нас `body { line-height: 1.5 }` (24px при 16px). Без сброса копирайт
     и ссылка на политику выходили выше эталонных на 3px (21 против 18).
     См. тот же приём для блоков секций — mkblocks.py, «Базовая линия». */
  line-height: normal;
}
.site-footer * { margin: 0; padding: 0; box-sizing: border-box; }

.site-footer .footer-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 20px 0 20px;
}

/* Верхняя часть */
.site-footer .footer-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 32px;
}

/* Левая часть */
.site-footer .footer-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 0 auto;
  max-width: 320px;
}

.site-footer .footer-logo {
  height: 64px;
  width: auto;
  /* Вынужденное отступление от дословного копирования: у эталона логотип
     (321px) переполняет родителя `.footer-left` (max-width: 320px). Наш
     глобальный ресет `img { max-width: 100% }` (main.css, строка 71) режет
     его до 301px — снимаем ограничение адресно, только для логотипа футера. */
  max-width: none;
  object-fit: contain;
  align-self: flex-start;
  margin-left: -20px;
  transition: transform .3s ease;
  cursor: pointer;
}
.site-footer .footer-logo:hover { transform: translateY(-3px); }

.site-footer .footer-tagline {
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  line-height: 1.4;
}

/* Плашка «Официальный партнёр» с градиентной обводкой */
.site-footer .footer-partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  padding: 12px 16px;
  align-self: flex-start;
  position: relative;
  background: var(--graphite);
  z-index: 1;
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: pointer;
}
.site-footer .footer-partner-badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(255,185,0,.25);
}
.site-footer .footer-partner-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  padding: 2px;
  background: linear-gradient(25deg, #FFB900, #FFE128);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
  pointer-events: none;
  transition: opacity .3s ease;
}
.site-footer .footer-partner-badge:hover::before { opacity: .85; }

.site-footer .footer-partner-icon {
  width: auto;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform .3s ease;
}
.site-footer .footer-partner-badge:hover .footer-partner-icon { transform: scale(1.08); }

.site-footer .footer-partner-text { display: flex; flex-direction: column; gap: 2px; }
.site-footer .footer-partner-title {
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  line-height: 1.2;
  transition: color .3s ease;
}
.site-footer .footer-partner-badge:hover .footer-partner-title { color: #FFE128; }
.site-footer .footer-partner-subtitle {
  font-weight: 300;
  font-size: 16px;
  color: rgba(255,255,255,.8);
  line-height: 1.2;
}

/* Правая часть */
.site-footer .footer-right {
  display: flex;
  flex-direction: row;
  gap: 40px;
  flex: 1;
  justify-content: flex-end;
}
.site-footer .footer-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 140px;
}
.site-footer .footer-column-title {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 4px;
}

/* Общие стили для ссылок и span в колонках */
.site-footer .footer-link {
  font-weight: 300;
  font-size: 16px;
  color: #fff;
  opacity: .8;
  text-decoration: none;
  line-height: 1.4;
  transition: opacity .3s ease;
  cursor: default;
}
.site-footer a.footer-link:hover { opacity: 1; cursor: pointer; }

/* Отступ перед линией */
.site-footer .footer-bottom-section { padding-top: 28px; }

.site-footer .footer-bottom-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.site-footer .footer-copyright {
  font-weight: 300;
  font-size: 14px;
  color: #fff;
  opacity: .8;
}
.site-footer .footer-policy {
  font-weight: 300;
  font-size: 14px;
  color: #fff;
  opacity: .8;
  text-decoration: none;
  transition: opacity .3s ease;
}
.site-footer .footer-policy:hover { opacity: 1; }

.site-footer .footer-divider {
  width: 100%;
  height: 1px;
  background-color: rgba(255,255,255,.2);
  margin: 0;
}

.site-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}
.site-footer .footer-legal {
  font-weight: 300;
  font-size: 14px;
  color: #fff;
  opacity: .8;
  line-height: 1.5;
}

.site-footer .footer-socials { display: flex; align-items: center; gap: 16px; }
.site-footer .footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform .3s ease;
}
.site-footer .footer-social-link:hover { transform: translateY(-3px); }
.site-footer .footer-social-icon {
  width: auto;
  height: 28px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  cursor: pointer;
}

/* Адаптивность */
@media (max-width: 960px) {
  .site-footer .footer-container { padding: 32px 10px 0 10px; }
  .site-footer .footer-top { flex-direction: column; gap: 32px; }
  .site-footer .footer-right { justify-content: flex-start; flex-wrap: wrap; gap: 24px; }
  .site-footer .footer-column { min-width: 120px; }
}
@media (max-width: 640px) {
  .site-footer .footer-container { padding: 24px 10px 0 10px; }
  .site-footer .footer-right { flex-direction: column; gap: 20px; }
  .site-footer .footer-bottom-top { flex-direction: column; align-items: flex-start; }
  .site-footer .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* --- Адаптив (база) ------------------------------------------- */
@media (max-width: 1200px) {
  :root { --container: 940px; --section-y: 80px; --head-y: 40px; }
  /* 13.10.2026 (задача rp-1013-wp-model-keysy): в меню шапки добавлен пятый
     пункт — «Кейсы» («Блог» переименован в «Статьи»). Несжимаемая строка шапки
     выросла на ширину нового пункта, поэтому в полосе 981–1200px зазор nav
     ужат 22px → 16px — вместе с блоком иконок (responsive.css, скрыт до 1200px)
     строка снова сходится на всей полосе без перелива и переносов. */
  .site-header__nav { margin-left: 32px; gap: 16px; }
  .section__head__grid { grid-template-columns: 1fr; gap: 16px; }
  .section__head__grid h2 { max-width: none; }
  .section__head__grid .lead,
  .section__head--narrow .section__head__grid .lead { width: auto; max-width: 560px; margin-right: 0; }
}

@media (max-width: 980px) {
  :root { --container: 720px; }
  .site-header__nav { display: none; }
  .burger { display: flex; }
  /* Шапка как на эталоне Тильды: на планшете и телефоне — только лого и бургер
     (телефон, CTA и иконки кабинета уезжали за вьюпорт и давали гориз. прокрутку). */
  .site-header__contacts > .header-phone,
  .site-header__contacts > .header-btn,
  .site-header__contacts > .header-icon { display: none; }
}

@media (max-width: 640px) {
  :root { --container: 100%; --section-y: 60px; --head-y: 28px; }
  .container { padding: 0 16px; }
  .site-header__inner { min-height: 64px; }
  .header-phone { display: none; }
  .site-header__logo img { height: 32px; }
}