/* ==========================================================================
   КАРКАС: верхняя строка, шапка, меню, футер, плавающие кнопки
   ==========================================================================
   Эти блоки одинаковы на всех девяти страницах. В макете они были
   скопированы в каждый файл — здесь описаны один раз.
   ========================================================================== */


/* ==========================================================================
   ВЕРХНЯЯ СТРОКА
   ========================================================================== */

/* --- ВЕРХНЯЯ СТРОКА ---------------------------------------------------------
   Служебная полоса: город, часы работы, телефон. Она НЕ навигация, и ростом
   с навигацию быть не должна — иначе на телефоне две полосы съедают пятую
   часть экрана ещё до заголовка.

   Размер плавающий, от телефона к большому монитору:

       экран      полоса
       390        ~36 px
       768        ~38 px
       1280       ~42 px
       1920       ~44 px

   Считается это само, через clamp: отступы и кегль растут вместе с шириной
   экрана. Отдельных правил под каждый размер не нужно — правило одно.
---------------------------------------------------------------------------- */

.topbar {
  background: var(--navy-deep);
  color: var(--on-dark-body);
  font-size: clamp(11px, 0.85vw, 12.5px);
  padding: clamp(6px, 0.55vw, 9px) var(--pad-x);
}

.topbar__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  justify-content: space-between;
}

.topbar__right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}

.topbar__badge { color: var(--on-dark-bright); }

.topbar__phone {
  position: relative;
  min-height: clamp(22px, 1.8vw, 30px);
  display: inline-flex;
  align-items: center;
  font-size: clamp(12px, 0.95vw, 13px);
  color: var(--on-dark);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.topbar__phone:hover { color: var(--accent-soft); }

/* Короткий вариант текста — только на телефоне */
.topbar__wide   { display: inline; }
.topbar__narrow { display: none; }

@media (max-width: 640px) {
  .topbar__wide   { display: none; }
  .topbar__narrow { display: inline; }
}


/* ==========================================================================
   ШАПКА
   ========================================================================== */

.header {
  position: relative;
  z-index: 40;
  background: var(--navy);
  padding: var(--pad-head) var(--pad-x);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
}

/* --- Логотип --------------------------------------------------------------- */

/* Логотип — только надпись и подпись под ней. Квадрата с цифрой 70 больше
   нет: цифра уже стоит в самом названии, и повторять её незачем. */
.logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* --- НАЗВАНИЕ И ПОДПИСЬ ПОД НИМ --------------------------------------------
   Подпись растянута ровно по ширине названия — так, как собирают логотипы:
   две строки одинаковой длины читаются как один цельный знак, а не как
   надпись со случайным довеском снизу.

   ПОЧЕМУ РАЗМЕР ПОДПИСИ ЗАДАН ДОЛЕЙ, А НЕ СВОИМИ ПИКСЕЛЯМИ.
   Раньше у названия и у подписи были РАЗНЫЕ формулы размера, и на разной
   ширине экрана они менялись каждая по-своему. Промежуток между буквами,
   подобранный для широкого экрана, на узком растягивал подпись за край
   названия на 12 точек — замерено. Теперь размер подписи — доля от размера
   названия, пропорция постоянна везде, и один промежуток подходит всегда.

   Числа не на глаз: ширину обеих надписей замерили в браузере
   (185,41 и 164,16 точки при кегле 19) и посчитали, сколько добавить
   на каждый из 22 знаков. Меняете текст подписи или шрифт — промежуток
   надо пересчитать заново.
---------------------------------------------------------------------------- */

.logo__text {
  display: flex;
  flex-direction: column;
  gap: 5px;

  /*
     Это размер НАЗВАНИЯ. Подпись отсчитывается от него.

     Нижняя граница 16.3, а не 15 как раньше. Причина: подпись теперь
     доля от названия (0.516), и при 15 она получалась 7.74 точки —
     мельче, чем была. При 16.3 подпись выходит ровно 8.4, как в макете,
     а название на телефоне становится чуть крупнее. Места хватает:
     замерено на экране 375 — логотип 159 точек, свободно ещё 136.
  */
  font-size: clamp(16.3px, 1.5vw, 19px);
}

.logo__brand {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1em;
  line-height: 1;
  color: var(--on-dark);
  letter-spacing: 0.03em;
}

.logo__tagline {
  display: block;
  font-size: 0.516em;
  line-height: 1;
  color: var(--on-dark-dim);
  text-transform: uppercase;
  white-space: nowrap;

  /* Промежуток подобран так, чтобы строка дотянулась до края названия */
  letter-spacing: 0.2136em;

  /* CSS добавляет промежуток и ПОСЛЕ последней буквы. Без этой строки
     подпись оказалась бы шире названия ровно на один промежуток. */
  margin-right: -0.2136em;
}

/* --- Навигация -------------------------------------------------------------- */

.nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 26px);
  font-size: clamp(13px, 1.05vw, 15px);
}

.nav a { color: var(--on-dark-nav); }
.nav a:hover { color: var(--on-dark); }
.nav a[aria-current='page'] { color: var(--on-dark); font-weight: 500; }

/* --- Кнопка «Бесплатный замер» в шапке --------------------------------------
   Белая кнопка на тёмной шапке. Раньше на этом месте был телефон —
   он остался в верхней строке и в кнопках сбоку экрана.

   Цвета и скругление берутся из токенов, а не вписаны числами: белый,
   фирменный синий и оттенок при наведении уже описаны в tokens.css,
   и кнопка меняется вместе со всем сайтом из одного места.
---------------------------------------------------------------------------- */

.header__cta {
  flex: 0 0 auto;
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 22px;
  border-radius: var(--r);
  background: var(--on-dark);
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.18s ease;
}

.header__cta:hover { background: var(--on-dark-bright); }

/* На узких экранах надпись мельчает, чтобы не поджимать меню */
@media (max-width: 1439px) { .header__cta { font-size: 14px; } }
@media (max-width: 1279px) { .header__cta { font-size: 13.5px; } }

/* --- Кнопка «бургер» --------------------------------------------------------- */

.burger {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: var(--r);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: var(--glass-2);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.burger:hover { background: var(--glass-hover-2); }

.burger span {
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--on-dark);
}

/* Переключение «полное меню ↔ бургер».
   В макете это были пресеты «1280» и «834»; порог между ними — 1080px. */
/* Порог 1079, а не 1023 как в присланной вёрстке: именно здесь меню
   сворачивается в бургер. Спрячь кнопку позже — на промежутке 1024–1079
   она осталась бы висеть рядом с бургером в одиночестве. */
@media (max-width: 1079px) {
  .nav,
  .header__cta { display: none; }
  .burger { display: flex; }
}


/* ==========================================================================
   МОБИЛЬНОЕ МЕНЮ
   ========================================================================== */

.menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--navy-menu);
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2.4vw, 32px) var(--pad-x);
  animation: menuFade 0.2s ease-out;
  overscroll-behavior: contain;
}

/* Меню закрыто — элемента просто нет в разметке (его добавляет скрипт),
   но на случай отключённого JS прячем и так. */
.menu[hidden] { display: none; }

.menu__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-line-3);
}

.menu__phone { display: flex; align-items: center; }

.menu__phone-text { display: flex; flex-direction: column; gap: 3px; }

.menu__phone-num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--on-dark);
  letter-spacing: 0.03em;
}

.menu__phone-hours { font-size: 11.5px; line-height: 1; color: var(--on-dark-dim); }

.menu__close {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-line-2);
  background: var(--glass);
  color: var(--on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu__close:hover { background: var(--glass-line); }

.menu__list {
  flex: 1;
  min-height: 0;
  overflow: hidden auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 0 12px;
}

.menu__link {
  flex: 0 0 auto;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  border-radius: var(--r);
  background: var(--glass-card);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--on-dark);
}
.menu__link:hover {
  background: rgba(255, 255, 255, 0.11);
  color: var(--on-dark);
}

.menu__link-lead {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  color: var(--accent-soft);
}

.menu__link-label {
  flex: 1;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.menu__link-arrow { display: flex; color: var(--accent-soft); }

.menu__foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--glass-line-3);
}

.menu__row { display: flex; gap: 10px; }

.menu__btn {
  flex: 1;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: var(--r);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
}

.menu__btn--tel {
  background: var(--glass-2);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--on-dark);
}

.menu__btn--wa {
  background: rgba(37, 211, 102, 0.14);
  border: 1px solid rgba(37, 211, 102, 0.32);
  color: var(--green-wa-text);
}

.menu__cta {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--on-dark);
  border-radius: var(--r);
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
}

/* Пока меню открыто — страница под ним не прокручивается */
/* Меню раскрыто — страница под ним стоит. Основную работу делает скрипт
   (assets/js/modules/scroll-lock.js): одного overflow: hidden на iPhone
   не хватает, страница всё равно уезжает под пальцем. Эта строка —
   подстраховка на компьютере, если стили из скрипта почему-то не легли. */
body.is-menu-open { overflow: hidden; }


/* ==========================================================================
   ПЛАВАЮЩИЕ КНОПКИ
   ========================================================================== */

/* ==========================================================================
   ПЛАВАЮЩИЕ КНОПКИ СВЯЗИ
   --------------------------------------------------------------------------
   Видна одна кнопка. По нажатию над ней раскрываются остальные — снизу
   вверх, по очереди, с небольшой задержкой между ними. Так глаз успевает
   заметить, что кнопок стало несколько, и это не выглядит рывком.

   Раньше все четыре висели столбиком и занимали половину высоты экрана.
   ========================================================================== */

.floating {
  position: fixed;

  /*
   |  Три размера столбика — в одном месте.
   |
   |  Главная кнопка крупнее кнопок каналов намеренно: она видна всегда
   |  и по ней чаще всего попадают пальцем. Но размеры теперь названы
   |  переменными, а не вписаны по месту: по ним равняется ещё и ширина
   |  списка, а разойтись этим числам нельзя — столбик сразу станет
   |  кривым (см. .floating__list).
   */
  --fab-main: clamp(52px, 4.2vw, 60px);  /* главная кнопка */
  --fab-item: clamp(48px, 3.8vw, 56px);  /* кнопка канала  */
  --fab-gap:  clamp(8px, 0.9vw, 12px);   /* просвет между ними */

  /* Про --lock-gap. Пока страница заблокирована, полоса прокрутки на
     компьютере исчезает и окно становится шире на её ширину. Содержимому
     страницы это возмещают отступом, но панели отступ не поможет: она
     отмеряется не от страницы, а от края окна, который только что уехал,
     и прыгает вправо на 15 точек — прямо под рукой у человека, который
     её и открыл. Скрипт отдаёт сюда ширину исчезнувшей полосы, панель
     на столько же сдвигается обратно и остаётся на месте.
     Ничего не заблокировано — переменной нет, в дело идёт запасной 0. */
  right: calc(clamp(12px, 1.7vw, 26px) + var(--lock-gap, 0px));

  bottom: clamp(12px, 1.7vw, 26px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--fab-gap);
  align-items: flex-end;
}

/* --- ЗАТЕМНЕНИЕ ФОНА ПРИ РАСКРЫТИИ -----------------------------------------
   Список раскрыт — страница за ним гаснет. Цвет, плотность и размытие взяты
   у модального окна один в один (.modal::backdrop в components.css), чтобы
   оба затемнения на сайте выглядели одинаково. Поменяете там — поменяйте
   и здесь, иначе разъедется.

   Слой нарисован псевдоэлементом самой панели. Отрицательный индекс убирает
   его ЗА кнопки, но панель целиком по-прежнему выше страницы, — поэтому
   кнопки остаются поверх затемнения без единого лишнего z-index.
---------------------------------------------------------------------------- */

.floating::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background: rgba(6, 20, 40, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}

.floating.is-open::before {
  opacity: 1;

  /* Нажатие по затемнению закрывает список. Ловит его скрипт: слой —
     часть панели, поэтому целью события приходит сама панель. */
  pointer-events: auto;
}

/* --- Список каналов --------------------------------------------------------- */

/*
   Список вынут из потока и висит НАД главной кнопкой.

   Так сделано не ради красоты: если оставить его в потоке, свёрнутые
   кнопки продолжают занимать место, и четыре невидимых круга ловят
   нажатия мышью в углу экрана — по ссылкам под ними становится
   не попасть. Абсолютное положение эту проблему снимает начисто.
*/
.floating__list {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--fab-gap));
  display: flex;
  flex-direction: column;
  gap: var(--fab-gap);

  /*
   |  Ширина ровно как у главной кнопки, кружки внутри — по центру.
   |
   |  Раньше список равнялся по правому краю, и все кнопки вставали
   |  правыми краями вровень. Выглядело это криво: главная кнопка шире
   |  остальных на четыре точки, и её середина уезжала влево на две.
   |  Глаз ловит именно середину кружка, а не край, — столбик читался
   |  как сбитый.
   |
   |  Теперь все пять кружков стоят на одной вертикальной оси, а разница
   |  в размере остаётся и работает как задумано: главная кнопка крупнее.
   */
  width: var(--fab-main);
  align-items: center;
}

/* Свёрнуто — не ловим нажатия. Прозрачности для этого мало:
   невидимый элемент по-прежнему перехватывает мышь. */
.js .floating:not(.is-open) .floating__list { pointer-events: none; }

/*
   Всё свёрнутое состояние ниже завязано на класс js у страницы.

   Его ставит короткий скрипт в самом верху <head> — до того, как браузер
   начнёт рисовать. Поэтому кнопки скрыты с первого же кадра и не успевают
   мелькнуть. Если скрипты не работают, класса не будет, и кнопки останутся
   видны все — как обычные ссылки.
*/

/* --- Кнопка канала ---------------------------------------------------------- */

.floating__btn {
  position: relative;
  width: var(--fab-item);
  height: var(--fab-item);
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-float);

  /* Плавность нужна только при раскрытии и сворачивании. На первую
     отрисовку она не влияет: браузер не анимирует начальное состояние. */
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(.22, 1, .36, 1),
              background var(--ease);
}

/* Свёрнуто */
.js .floating__btn {
  opacity: 0;
  transform: translateY(10px) scale(0.85);
}

/* Раскрыто */
.js .floating.is-open .floating__btn {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Задержка по очереди. Считаем от конца списка, потому что нижняя кнопка
   ближе всего к главной — она и появляется первой, остальные догоняют. */
.js .floating.is-open .floating__btn:nth-last-child(1) { transition-delay: 0s;    }
.js .floating.is-open .floating__btn:nth-last-child(2) { transition-delay: 0.05s; }
.js .floating.is-open .floating__btn:nth-last-child(3) { transition-delay: 0.10s; }
.js .floating.is-open .floating__btn:nth-last-child(4) { transition-delay: 0.15s; }

.floating__btn:hover { color: var(--on-dark); }

/* --- ФИРМЕННЫЕ ЗНАКИ НА КНОПКАХ ---------------------------------------------

   На кнопках лежат настоящие знаки мессенджеров — файлами из assets/img.
   Приходят они в двух видах, и разница видна ниже:

     СО СВОИМ ФОНОМ — MAX, Telegram, звонок. Это готовые круглые значки,
     их цвет уже внутри файла. Такой знак занимает кнопку целиком, и
     заливка кнопке не нужна — она остаётся только на время загрузки,
     чтобы на месте знака не мигало белое пятно. Цвета совпадают
     с фирменными точь-в-точь: у звонка #0A2C56 — это наш --navy,
     у Telegram нижняя точка градиента #229ED9 — это --telegram.

     БЕЗ ФОНА — WhatsApp. Знак приходит зелёным силуэтом, а кнопка сама
     зелёная того же оттенка: положи как есть — и знак исчезнет. Поэтому
     он ложится поверх заливки и перекрашивается в белый (см. ниже).

   Круглую форму знакам задаёт border-radius на самой картинке, а НЕ
   overflow: hidden на кнопке: иначе обрезалась бы подпись, она вынесена
   левее кнопки.
-------------------------------------------------------------------------- */

.floating__btn--whatsapp { background: var(--whatsapp); }
.floating__btn--whatsapp:hover { background: var(--whatsapp-hover); }

.floating__btn--telegram { background: var(--telegram); }
.floating__btn--telegram:hover { background: var(--telegram-hover); }

.floating__btn--max { background: var(--max-blue); }
.floating__btn--max:hover { background: var(--max-blue-hover); }

/*
 |  Звонок. Кружок у знака залит фирменным синим.
 |
 |  Светлого ободка здесь БОЛЬШЕ НЕТ, и возвращать его не надо.
 |
 |  Ставился он от того, что синий кружок сливался с тёмными секциями.
 |  Опасение оказалось напрасным: кнопки каналов видны только в раскрытом
 |  списке, а раскрытый список гасит страницу за собой (.floating::before).
 |  Фон под кнопкой всегда притушен, и синий кружок на нём читается —
 |  на какой бы секции его ни открыли.
 |
 |  А вот сам ободок был виден везде, вопреки расчёту: одна кнопка из
 |  четырёх ходила в белой оправе и выбивалась из ряда.
 |
 |  Тень теперь ровно та же, что у остальных кнопок, — отдельного
 |  правила ей не нужно, всё берётся из .floating__btn.
 */
.floating__btn--phone { background: var(--navy); }
.floating__btn--phone:hover { background: var(--blue-hover); }

/* Знак со своим фоном — во всю кнопку */
.floating__logo {
  width: 100%;
  height: 100%;
  flex: 0 0 auto;
  display: block;
  border-radius: 50%;
  transition: filter var(--ease);
}

/*
 |  Знак без фона — поверх заливки кнопки, размером как прежний
 |  рисованный значок, чтобы в ряду ничего не съехало.
 |
 |  Перекрашиваем в белый: brightness(0) делает знак чёрным, не трогая
 |  прозрачность, а invert(1) — белым. Без этого зелёный знак WhatsApp
 |  пропал бы на зелёной кнопке того же оттенка.
 */
.floating__logo--glyph {
  width: 52%;
  height: 52%;
  border-radius: 0;
  filter: brightness(0) invert(1);
}

/*
 |  Наведение. Там, где знак закрывает кнопку целиком, менять заливку
 |  бессмысленно — её не видно, поэтому светлеет сам знак. Под знаком
 |  без фона заливка на виду: темнеет она, а знак остаётся белым.
 */
.floating__btn:hover .floating__logo { filter: brightness(1.1); }
.floating__btn:hover .floating__logo--glyph { filter: brightness(0) invert(1); }

/* --- Подпись рядом с кнопкой ------------------------------------------------
   Появляется при наведении мышью. На телефоне не показывается: там нет
   наведения, а место подпись занимает. */

.floating__tip {
  position: absolute;
  right: calc(100% + 10px);
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  background: var(--navy);
  color: var(--on-dark);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  box-shadow: var(--shadow-float);
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity var(--ease), transform var(--ease);
}

@media (hover: hover) {
  .floating__btn:hover .floating__tip { opacity: 1; transform: translateX(0); }
}

@media (hover: none) {
  .floating__tip { display: none; }
}

/* --- Главная кнопка ---------------------------------------------------------
   Всегда на месте, не двигается при открытии — чтобы палец не промахнулся
   мимо неё, когда захочет закрыть. Меняется только значок внутри. */

.floating__toggle {
  /* Скрыта, пока не известно, что скрипты работают. Без них нажимать
     на неё было бы некому, а кнопки каналов и так все на виду.
     Показывает её правило .js ниже. */
  display: none;

  position: relative;
  width: var(--fab-main);
  height: var(--fab-main);
  flex: 0 0 auto;
  border: none;
  border-radius: 50%;

  /* Фирменный зелёный — тот же, что у цен, подтверждений и кружка
     с галочкой на «Спасибо». Синий здесь не годился: на тёмных секциях
     кнопка сливалась с фоном и её было не видно. Зелёный читается
     и на синем, и на белом. */
  background: var(--green);

  color: var(--on-dark);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-float);
  transition: background var(--ease);

  /* Мягкое кольцо привлекает внимание, пока кнопка закрыта */
  animation: floatPulse 2.6s ease-out infinite;
}

.js .floating__toggle { display: flex; }

.floating__toggle:hover { background: var(--green-hover); }

.floating__toggle:focus-visible {
  outline: 2px solid var(--on-dark);
  outline-offset: 3px;
}

/* Открыто — кольцо больше не нужно, оно уже сработало */
.floating.is-open .floating__toggle { animation: none; }

/* Два значка лежат друг на друге, виден один */
.floating__toggle-ico {
  position: absolute;
  display: flex;
  transition: opacity 0.2s ease, transform 0.28s cubic-bezier(.22, 1, .36, 1);
}

.floating__toggle-ico--close { opacity: 0; transform: rotate(-90deg) scale(0.6); }

.floating.is-open .floating__toggle-ico--chat  { opacity: 0; transform: rotate(90deg) scale(0.6); }
.floating.is-open .floating__toggle-ico--close { opacity: 1; transform: rotate(0) scale(1); }

/* Выключены анимации в системе — всё появляется сразу, без движения */
@media (prefers-reduced-motion: reduce) {
  .floating__btn,
  .floating::before,
  .floating__toggle-ico { transition: none; }
  .floating__toggle { animation: none; }
  .js .floating.is-open .floating__btn { transition-delay: 0s; }
}


/* ==========================================================================
   ФУТЕР
   ========================================================================== */

.footer {
  background: var(--navy-deep);
  padding: clamp(32px, 4vw, 64px) var(--pad-x);
}

.footer__inner { max-width: var(--wrap); margin-inline: auto; }

.footer__grid {
  display: grid;
  /* Бренд и три колонки ссылок. Была ещё одна — «Бизнес-услуги», —
     но парные страницы для организаций с сайта убраны. */
  grid-template-columns: minmax(260px, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 44px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--glass-line-3);
}

@media (max-width: 1079px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 640px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 26px;
    padding-bottom: 26px;
  }
}

/* --- Колонка с логотипом ------------------------------------------------------ */

.footer__brand { display: flex; align-items: center; margin-bottom: 12px; }

/* Размер названия. Подпись ниже отсчитывается от него. */
.footer__brand-text { display: flex; flex-direction: column; gap: 5px; font-size: 16px; }

.footer__brand-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1em;
  line-height: 1;
  color: var(--on-dark);
  letter-spacing: 0.03em;
}

/* Подпись в подвале — так же вровень с названием. Промежуток другой:
   в подвале название 16 точек, а не 19, и пропорция иная. */
.footer__tagline {
  display: block;
  font-size: 0.525em;
  line-height: 1;
  color: var(--on-dark-dim);
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.1993em;
  margin-right: -0.1993em;
}

.footer__descr {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--on-dark-text);
  max-width: 40ch;
}

/* --- Колонки ссылок ------------------------------------------------------------ */

.footer__title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-dark-dim-2);
  margin-bottom: 14px;
}

/*
   ПРОСВЕТ МЕЖДУ ССЫЛКАМИ ПОДВАЛА

   Было: у каждой ссылки min-height 38 точек плюс 9 просвета — 47 на строку.
   На одиннадцати услугах колонка вытягивалась на полтысячи точек, и подвал
   выходил выше многих страниц сайта. Ссылки стояли так далеко друг от друга,
   что список переставал читаться списком: глаз не видел их одной группой.

   Стало: высоту задаёт сам текст, просвет 2 точки — около 26 на строку.
   Колонка услуг ужалась вдвое и сравнялась по высоте с контактами,
   а подвал перестал быть отдельным экраном.

   Крупная область нажатия при этом НЕ ПОТЕРЯНА. Она нужна пальцу, а не
   мыши, и живёт отдельным правилом в pages.css: там для сенсорных экранов
   у этих же ссылок min-height 48 точек. Файл подключается позже, поэтому
   на телефоне победит он — как и задумано.
*/
.footer__links { display: flex; flex-direction: column; gap: 2px; }

.footer__links a {
  display: flex;
  align-items: center;
  padding: 4px 0;
  font-size: 14px;
  color: var(--on-dark-link);
}
.footer__links a:hover { color: var(--on-dark); }

/* --- Контакты в футере ---------------------------------------------------------- */

.footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 13.5px;
  color: var(--on-dark-link);
}

.footer__contact { display: flex; flex-direction: column; gap: 4px; }
.footer__contact-label { font-size: 12px; color: var(--on-dark-dim); }

.footer__contact-phone {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--on-dark);
}

.footer__contacts a:not(.footer__contact-phone) { color: var(--on-dark-link); }
.footer__contacts a:hover { color: var(--on-dark); }

/* --- Нижняя строка -------------------------------------------------------------- */

.footer__bottom {
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: 12px;
  color: var(--on-dark-dim-2);
}
.footer__bottom a { color: var(--on-dark-dim-2); }
.footer__bottom a:hover { color: var(--on-dark-link); }


/* --- ТЕЛЕФОН, ПОВЁРНУТЫЙ НАБОК ----------------------------------------------
   В альбомном положении экрана по высоте остаётся 340–420 точек. Шапка
   и служебная полоса в обычном размере съедают там треть, и от страницы
   почти ничего не видно. Поэтому в этом положении они прижимаются.

   Условие простое: экран лежит на боку и в высоту меньше 500 точек.
   Проверку на сенсорный экран не ставим намеренно — короткое окно на
   компьютере страдает от высокой шапки ровно так же, и прижать её там
   тоже правильно. Ноутбук 1366×768 под правило не попадает.
---------------------------------------------------------------------------- */

@media (max-height: 500px) and (orientation: landscape) {
  .topbar {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .topbar__phone { min-height: 20px; }

  .header { padding-top: 8px; padding-bottom: 8px; }
}