/* ==========================================================================
   ОСНОВА: шрифты, сброс, типографика
   ========================================================================== */

/* --- Шрифты ---------------------------------------------------------------
   Geologica — заголовки и цифры, Golos Text — текст.
   Файлы вариативные: один файл покрывает начертания от 400 до 700,
   поэтому подключений мало, а весит меньше, чем отдельные файлы.

   Подмножества: кириллица, расширенная кириллица и латиница.
   Латиница нужна не для английских слов, а для знака ₽ и цифр.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/geologica-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/geologica-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/geologica-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  /* Здесь живёт знак рубля (U+20BD) — без этого подключения цены
     отрисовались бы системным шрифтом и выбивались из вёрстки. */
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/geologica-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/golos-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/golos-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/golos-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/golos-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* --- Сброс ----------------------------------------------------------------- */

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

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Якорные ссылки не должны прятать заголовок под липкой шапкой. */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;

  /*
     СЛУЧАЙНЫЙ ЗУМ ОТ ДВОЙНОГО КАСАНИЯ.

     manipulation разрешает всё привычное — прокрутку вдоль и поперёк
     и увеличение двумя пальцами, — но выключает увеличение по двойному
     касанию. Именно оно и срабатывает случайно: человек два раза быстро
     тыкает в ссылку, страница прыгает в масштаб, и он не понимает, что
     произошло и как вернуть.

     ЧЕГО ЗДЕСЬ НАМЕРЕННО НЕТ. Полного запрета масштабирования —
     ни через pan-x pan-y, ни через user-scalable=no в мета-теге.
     Так делать не принято, и вот почему:

       · Safari на iPhone такой запрет игнорирует с десятой версии —
         Apple считает его нарушением доступности;
       · Google снижает за него оценку страницы в разделе
         «Специальные возможности»;
       · и главное: пожилой заказчик разводит страницу пальцами, чтобы
         прочитать телефон. Отняв это, вы теряете не «случайный зум»,
         а звонок.

     Случайное увеличение при этом всё равно не происходит: двойное
     касание выключено здесь, а поля формы не приближают экран потому,
     что у них кегль 16 px (см. components.css).
  */
  touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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


/* ===========================================================================
   ПОВЕДЕНИЕ НА ТЕЛЕФОНЕ
   ---------------------------------------------------------------------------
   Три вещи, из-за которых сайт на телефоне ведёт себя раздражающе.
   Все три лечатся здесь, разом для всего сайта.
   ========================================================================= */

/* 1. СЛУЧАЙНОЕ ДВОЙНОЕ КАСАНИЕ БОЛЬШЕ НЕ УВЕЛИЧИВАЕТ СТРАНИЦУ.

      Браузер на телефоне ждёт после каждого касания: вдруг сейчас будет
      второе, и надо приблизить страницу. Из-за этого кнопки отзываются
      с задержкой, а если палец случайно стукнул дважды — страница
      прыгает и увеличивается.

      manipulation говорит браузеру: на этом элементе двойное касание
      увеличением не считается, нажимай сразу. Пальцами страницу
      по-прежнему можно приблизить — эта возможность не отключается,
      она нужна людям со слабым зрением. */
a,
button,
label,
summary,
input,
select,
textarea,
[role='button'] {
  touch-action: manipulation;
}

/* 2. СЕРЫЙ ПРЯМОУГОЛЬНИК ПРИ НАЖАТИИ.

      По умолчанию телефон подсвечивает нажатое место мутно-серой
      заливкой, которая не имеет отношения к оформлению сайта.
      Убирать её совсем не стоит — тогда пропадёт отклик на нажатие
      и кажется, что сайт завис. Меняем на еле заметный фирменный синий. */
a,
button,
label,
summary,
[role='button'] {
  -webkit-tap-highlight-color: rgba(10, 44, 86, 0.08);
}

/* 3. ПОЛЯ ФОРМЫ НЕ ДОЛЖНЫ ПРИБЛИЖАТЬ СТРАНИЦУ.

      Правило iPhone: если шрифт в поле меньше 16 пикселей, при нажатии
      на поле браузер приближает страницу, чтобы текст было видно.
      Обратно он её не отдаляет — человек остаётся на увеличенной
      странице и дальше ищет кнопку.

      Поэтому 16 пикселей — это не оформление, а нижняя граница.
      Любое новое поле на сайте должно быть не меньше.

      Правило намеренно записано голыми тегами, без классов: так любой
      класс поля его перебьёт. Это подстраховка для новых полей, а не
      способ навязать размер уже существующим — у .field__input свои 17px,
      и они остаются. */
input,
textarea,
select {
  font-size: max(16px, 1em);
}

/* Скрытый элемент должен исчезать и внутри сеток, где display переопределён */
[hidden] { display: none !important; }

a {
  color: var(--blue-hover);
  text-decoration: none;
  transition: color var(--ease), background-color var(--ease), border-color var(--ease);
}
a:hover { color: var(--navy); }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input, button, textarea, select { font-family: inherit; font-size: inherit; }
input::placeholder, textarea::placeholder { color: var(--text-placeholder); }

ul, ol { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Видно только программе чтения с экрана — для заголовков и подписей. */
/*
   Текст только для программ чтения с экрана: на странице его не видно,
   но озвучивается он как обычный.

   ВАЖНО ПРО position. Элемент вынут из потока, и отсчитывается он от
   ближайшего родителя с position. Если такого родителя нет, отсчёт идёт
   от всей страницы — и подпись, лежащая внутри горизонтальной ленты,
   оказывается по её координате: например, на 1385-м пикселе.

   Страница из-за этого становится шире экрана, и телефон отдаляет её
   целиком, чтобы вместить. Содержимое сжимается в узкую колонку, а справа
   остаётся пустое поле. Ровно это и происходило на странице услуги.

   Поэтому родителям таких подписей ниже задан position: relative —
   тогда подпись остаётся внутри своего блока и ничего не растягивает.
*/
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Видимая рамка при переходе с клавиатуры — в макете этого не было,
   но без неё сайтом нельзя пользоваться без мыши. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Тонкая полоса прокрутки внутри горизонтальных лент. */
.scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.scroll-x::-webkit-scrollbar { height: 6px; }
.scroll-x::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-pill);
}


/* --- Анимации -------------------------------------------------------------- */

/* Кольцо вокруг главной плавающей кнопки — тихо привлекает внимание,
   пока список каналов свёрнут. Цвет фирменный синий, а не зелёный:
   раньше пульсировала кнопка WhatsApp, теперь на её месте общая. */
@keyframes floatPulse {
  0%   { box-shadow: var(--shadow-float), 0 0 0 0    rgba(30, 138, 90, 0.45); }
  70%  { box-shadow: var(--shadow-float), 0 0 0 14px rgba(30, 138, 90, 0); }
  100% { box-shadow: var(--shadow-float), 0 0 0 0    rgba(30, 138, 90, 0); }
}

@keyframes menuFade {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* --- Каркас страницы -------------------------------------------------------- */

/* Секция: фон во всю ширину экрана, содержимое — по центру.
   В макете страница была шириной 1440; здесь фон тянется дальше,
   а сам контент остаётся той же ширины. */
.section {
  padding: var(--pad-y) var(--pad-x);
}

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

/* Чередование фонов, как в макете */
.section--white  { background: var(--bg); border-bottom: 1px solid var(--line); }
.section--soft   { background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.section--dark   { background: var(--navy); background-image: var(--stripes); }
.section--cta    { background: var(--bg-cta); border-top: 3px solid var(--accent); }