/* =====================================================================
   ALA International – дизайн-система
   ---------------------------------------------------------------------
   Единственный источник правды для цвета, типографики, ритма и сетки.
   Значения извлечены из существующего лендинга: визуально страница не
   меняется, но каждое значение теперь named-токен, а не литерал.

   Слои:
     1. Палитра      – сырые цвета, нигде не используются напрямую
     2. Семантика    – роли (текст, фон, граница, бренд)
     3. Типографика  – семейства, роли, ступени по брейкпоинтам
     4. Пространство – шкала отступов, радиусы, тени, движение
     5. Сетка        – контейнер и боковые поля
     6. Примитивы    – .ala-container / .ala-gutter

   Брейкпоинты (совпадают с Tailwind, на котором собран лендинг):
     sm 640, md 768, lg 1024, xl 1280, 2xl 1536
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. ПАЛИТРА
   ------------------------------------------------------------------ */
:root {
  /* ОПОРНЫЕ ЦВЕТА БРЕНДБУКА. Других базовых оттенков в палитре нет.
       #00405A, #00202D, #074A65, #7596A6
     Всё остальное ниже – либо эти же значения под ролевым именем,
     либо нейтральные (белый, чёрный, серые). Прежний ряд ярко-голубых
     (#0082c1, #3aa6d9, #7ec8ef, #006595) в брендбуке отсутствовал и
     удалён: из-за него главная, подстраницы и шапка звучали как три
     разных бренда. */
  --ala-brand-deep: #00202d; /* самый тёмный: фоны, ховер на светлом */
  --ala-brand-core: #00405a; /* основной фирменный: акцент, заливки */
  --ala-brand-mid: #074a65; /* средний: вторые плоскости, ховер */
  --ala-brand-steel: #7596a6; /* приглушённый: акцент НА ТЁМНОМ, линии */

  /* Ink – тёмный ряд для фонов.
     Опорные ступени – #00202D, #00405A и #074A65 из брендбука;
     900/850/750/700 выведены из них затемнением и нужны там, где
     нужен слой глубже фона героя (подложки под фото, футер). */
  --ala-ink-900: #00151e; /* база затемнений поверх фотографий */
  --ala-ink-850: #001b26; /* заливка блока процесса */
  --ala-ink-800: #00202d; /* фон героя – брендбук */
  --ala-ink-750: #001a25; /* футер, тёмные теги */
  --ala-ink-700: #0b2430; /* плавающая кнопка чата */
  --ala-ink-600: var(--ala-brand-core); /* инфраструктура, процесс */
  --ala-ink-500: var(--ala-brand-mid); /* баннер «о компании» */

  --ala-steel-400: var(--ala-brand-steel);

  /* Нейтральные */
  --ala-white: #ffffff;
  --ala-black: #000000;
  --ala-gray-900: #1a1a1a; /* основной текст */
  --ala-gray-200: #ececec; /* фон секции «отследить» */
  --ala-gray-150: #ededed; /* полоса логотипов клиентов */
  /* Светлая подложка выведена из #00405A разбелом, а не из чужой
     голубой шкалы: активный пункт списка ПВЗ. */
  --ala-tint-050: #eef2f4;
}

/* ---------------------------------------------------------------------
   2. СЕМАНТИЧЕСКИЕ РОЛИ
   ------------------------------------------------------------------ */
:root {
  /* Текст */
  --ala-text: var(--ala-gray-900);
  --ala-text-inverse: var(--ala-white);
  --ala-text-muted: rgba(0, 0, 0, 0.7);
  --ala-text-subtle: rgba(0, 0, 0, 0.5);
  --ala-text-on-dark: rgba(255, 255, 255, 0.9);
  --ala-text-muted-on-dark: var(--ala-steel-400);

  /* Акценты.
     На светлом фоне акцент – основной фирменный #00405A, ховер уходит
     глубже, в #00202D. На тёмном фоне ни один из них не читается, там
     работает приглушённый #7596A6 – тоже из брендбука. */
  --ala-accent: var(--ala-brand-core);
  --ala-accent-strong: var(--ala-brand-deep);
  --ala-accent-on-dark: var(--ala-brand-steel);

  /* Поверхности */
  --ala-surface: var(--ala-white);
  --ala-surface-alt: var(--ala-gray-200);
  --ala-surface-band: var(--ala-gray-150);
  --ala-surface-tint: var(--ala-tint-050);
  --ala-surface-dark: var(--ala-ink-600);
  --ala-surface-darkest: var(--ala-ink-750);

  /* Границы */
  --ala-border-light: rgba(0, 0, 0, 0.08);
  --ala-border-subtle: rgba(0, 0, 0, 0.06);
  --ala-border-on-dark: rgba(255, 255, 255, 0.12);
  --ala-border-on-dark-strong: rgba(255, 255, 255, 0.55);
  --ala-hairline: rgba(255, 255, 255, 0.08);

  /* Шапка */
  --ala-header-bg-scrolled: rgba(255, 255, 255, 0.97);
  --ala-header-border-scrolled: rgba(0, 0, 0, 0.06);
  --ala-header-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);

  /* Заливки поверх изображений */
  --ala-scrim-soft: rgba(0, 0, 0, 0.35);
  --ala-scrim-glass: rgba(0, 0, 0, 0.35);
  --ala-ink-700-glass: rgba(12, 25, 41, 0.92);

  /* Градиенты и затемнения.
     Живут здесь, а не в компонентах: это часть палитры, а не вёрстки. */
  --ala-gradient-primary: linear-gradient(
    180deg,
    var(--ala-accent),
    var(--ala-accent-strong)
  );

  /* Герой: лёгкое затемнение на широком экране, плотное – на узком,
     где текст ложится прямо на фотографию. */
  --ala-overlay-hero: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.12),
    rgba(0, 0, 0, 0.28)
  );
  --ala-overlay-hero-compact: linear-gradient(
      180deg,
      rgba(0, 21, 30, 0.72),
      rgba(0, 21, 30, 0.35) 42%,
      rgba(0, 21, 30, 0.15) 68%,
      rgba(0, 21, 30, 0.55)
    ),
    linear-gradient(
      90deg,
      rgba(0, 21, 30, 0.88),
      rgba(0, 21, 30, 0.55) 55%,
      rgba(0, 21, 30, 0.2)
    );

  /* Инфраструктура: текст слева, фура справа – затемнение уводит фото. */
  --ala-overlay-infra: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.98) 0%,
    rgba(0, 0, 0, 0.9) 30%,
    rgba(0, 0, 0, 0.45) 52%,
    rgba(0, 0, 0, 0.08) 72%,
    transparent 100%
  );
  --ala-overlay-infra-compact: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.92),
      rgba(0, 0, 0, 0.78) 45%,
      rgba(0, 0, 0, 0.55)
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.95),
      rgba(0, 0, 0, 0.72) 62%,
      rgba(0, 0, 0, 0.25)
    );

  /* Токенов --ala-footer-photo и --ala-overlay-footer больше нет:
     футер отказался от фотоподложки в пользу фирменной заливки
     #00202D с диагональным штрихом. Сам файл footer-bg-2.png остаётся
     в assets на случай, если фотография понадобится в другом блоке. */

  /* Блок процесса: тёмная база плюс два синих свечения. */
  --ala-surface-process: linear-gradient(
      180deg,
      rgba(0, 27, 38, 0.92) 0% 100%
    ),
    radial-gradient(
      circle at 80% 30%,
      rgba(117, 150, 166, 0.20) 0%,
      transparent 60%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(117, 150, 166, 0.12) 0%,
      transparent 55%
    ),
    var(--ala-ink-600);
}

/* ---------------------------------------------------------------------
   3. ТИПОГРАФИКА
   ------------------------------------------------------------------ */
:root {
  /* Брендбук называет ровно одну гарнитуру – Gilroy: жирные начертания
     под заголовки и акценты, светлые – под основной текст и интерфейс.
     Halvar Breitschrift, стоявший здесь раньше, в брендбуке не
     упоминается; из-за него подстраницы (уже переведённые на Gilroy) и
     главная набирались разными шрифтами. Все три роли ведут в Gilroy –
     роли сохранены, чтобы не переписывать каждое правило. */
  --ala-font-body: Gilroy, Manrope, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  --ala-font-display: Gilroy, Manrope, sans-serif;
  --ala-font-heading: Gilroy, Manrope, sans-serif;

  --ala-weight-medium: 500;
  --ala-weight-bold: 700;
  --ala-weight-black: 800;

  --ala-tracking-tight: -0.01em;
  --ala-tracking-tighter: -0.02em;
  --ala-tracking-title: -0.025em;
  --ala-tracking-ui: -0.04em;
  --ala-tracking-numeric: -0.06em;

  --ala-leading-flat: 0.92;
  --ala-leading-snug: 1.25;
  --ala-leading-normal: 1.4;
}

/* Типографические роли. Размер задаётся один раз здесь и меняется по
   брейкпоинтам – компонентам остаётся только сослаться на переменную.
   Ступени повторяют исходный лендинг один в один.                     */
/* НИЖНЯЯ ГРАНИЦА КЕГЛЯ – 13px.
   Ни одна роль ниже (и ни одно правило в других файлах) не опускается
   под 13px даже на самом узком экране. Раньше подписи, теги и мелкие
   кнопки жили на 10–12px: на вырост это нечитаемо, а в шапке ещё и
   рассыпало иерархию. Служебные регистры теперь начинаются с 13px и
   отделяются от основного текста не размером, а начертанием,
   разрядкой и цветом. */
:root {
  --ala-t-hero-accent: 24px;
  --ala-t-hero-light: 20px;
  --ala-t-section-title: 24px;
  --ala-t-body: 15px;
  --ala-t-caption: 13px;
  --ala-t-stat: 28px;
  --ala-t-stat-label: 13px;
  --ala-t-logo: 16px;
  --ala-logo-mark: 38px;
  --ala-t-logo-lg: 22px;
  --ala-t-feature-num: 68px;
  --ala-t-infra-num: 44px;
  --ala-t-infra-text: 13px;
  --ala-t-arrow: 44px;
  --ala-t-tag: 13px;
  --ala-t-btn: 17px;
  --ala-t-btn-sm: 13px;

  /* Служебные регистры шапки и подписей – отдельными токенами, чтобы
     «мелко в шапке» правилось в одном месте, а не по файлам. */
  --ala-t-nav: 15px;
  --ala-t-ui: 13px; /* языки, ссылка на портал */
  --ala-t-cta: 13px; /* кнопка «Стать партнёром» */
  --ala-t-eyebrow: 13px; /* надзаголовки, метки разделов */
}
@media (min-width: 640px) {
  :root {
    --ala-logo-mark: 44px;
    --ala-t-hero-accent: 27px;
    --ala-t-hero-light: 22px;
    --ala-t-section-title: 26px;
  }
}
@media (min-width: 1024px) {
  :root {
    --ala-t-hero-accent: 46px;
    --ala-t-hero-light: 38px;
    --ala-t-section-title: 44px;
    --ala-t-body: 20px;
    --ala-t-caption: 15px;
    --ala-t-stat: 44px;
    --ala-t-stat-label: 15px;
    --ala-t-logo: 22px;
    /* Знак был 64px при словесной части 24px – на глаз шапка читалась
       как «огромная пирамида и мелкие буковки». Знак ужат, а меню и
       служебные ссылки подняты: иерархия выравнивается. */
    --ala-logo-mark: 48px;
    --ala-t-nav: 17px;
    --ala-t-ui: 14px;
    --ala-t-cta: 14px;
    --ala-t-eyebrow: 14px;
    --ala-t-logo-lg: 34px;
    --ala-t-feature-num: 100px;
    --ala-t-infra-num: 72px;
    --ala-t-infra-text: 15px;
    --ala-t-arrow: 68px;
    --ala-t-tag: 13px;
    --ala-t-btn: 21px;
    --ala-t-btn-sm: 14px;
  }
}
@media (min-width: 1280px) {
  :root {
    --ala-t-hero-accent: 52px;
    --ala-t-hero-light: 44px;
    --ala-t-section-title: 48px;
    --ala-t-body: 22px;
    --ala-t-caption: 16px;
    --ala-t-stat: 54px;
    --ala-t-stat-label: 16px;
    --ala-t-feature-num: 120px;
    --ala-t-infra-num: 80px;
    --ala-t-infra-text: 16px;
    --ala-t-arrow: 82px;
    --ala-t-btn: 24px;
  }
}
@media (min-width: 1536px) {
  :root {
    --ala-t-stat: 58px;
  }
}

/* ---------------------------------------------------------------------
   4. ПРОСТРАНСТВО, РАДИУСЫ, ТЕНИ, ДВИЖЕНИЕ
   ------------------------------------------------------------------ */
:root {
  --ala-space-1: 4px;
  --ala-space-2: 8px;
  --ala-space-3: 12px;
  --ala-space-4: 16px;
  --ala-space-5: 20px;
  --ala-space-6: 24px;
  --ala-space-8: 32px;
  --ala-space-10: 40px;
  --ala-space-12: 48px;
  --ala-space-16: 64px;
  --ala-space-20: 80px;
  --ala-space-24: 96px;
  --ala-space-32: 128px;

  /* Иконки */
  --ala-icon-social: 24px;

  --ala-radius-sm: 8px;
  --ala-radius-md: 12px;
  --ala-radius-lg: 18px;
  --ala-radius-xl: 20px;
  --ala-radius-2xl: 24px;
  --ala-radius-pill: 9999px;

  --ala-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06);
  --ala-shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.12);

  --ala-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ala-duration-fast: 0.2s;
  --ala-duration-base: 0.25s;
  --ala-duration-slow: 0.4s;
  --ala-transition: var(--ala-duration-base) var(--ala-ease);

  --ala-z-base: 0;
  --ala-z-content: 10;
  --ala-z-float: 40;
  /* Выше служебных слоёв Leaflet (панели 200–600, контролы до 1000):
     карта ПВЗ иначе проезжает поверх шапки при прокрутке. */
  --ala-z-header: 1100;
  --ala-z-overlay: 1200;
}

/* ---------------------------------------------------------------------
   5. СЕТКА
   ---------------------------------------------------------------------
   Ширина колонки контента и боковые поля – в одном месте.
   ------------------------------------------------------------------ */
/* Колонка контента – 1440px.
   Была 1920px: на мониторе 1920 строка тянулась во всю ширину, из-за
   чего страница читалась как «слишком широкая» – заголовки уезжали
   на два экрана глаз, а сетки из трёх карточек расползались. 1440 –
   рабочая корпоративная колонка: на ноутбуке 1440–1600 содержимое
   стоит плотно, на большом мониторе лишнее место уходит в поля.

   Боковые поля тоже пересчитаны. Прежние 128px на 1536 отнимали у
   и без того широкой колонки больше, чем нужно; теперь верхняя
   ступень – 64px, а дальше поля растут сами по второй ветке формулы
   в .ala-container. */
:root {
  --ala-content-max: 1440px;
  --ala-gutter: 16px;
}
@media (min-width: 640px) {
  :root { --ala-gutter: 24px; }
}
@media (min-width: 1024px) {
  :root { --ala-gutter: 40px; }
}
@media (min-width: 1280px) {
  :root { --ala-gutter: 56px; }
}
@media (min-width: 1536px) {
  :root { --ala-gutter: 64px; }
}

/* ---------------------------------------------------------------------
   6. ПРИМИТИВЫ СЕТКИ
   ---------------------------------------------------------------------
   .ala-container – колонка контента.
   .ala-gutter    – полоса во всю ширину (секция с фоном): фон тянется
                    до краёв, содержимое стоит на общей вертикали.

   Оба класса считают боковое поле ОДНОЙ формулой, поэтому совпадают
   на любой ширине экрана:

       поле = max(--ala-gutter, (ширина - --ala-content-max) / 2)

   Пока экран уже ~1568px работает первая ветка (поле по брейкпоинтам),
   шире – вторая: лишнее место уходит в поля, колонка остаётся 1440px
   и стоит по центру.

   Раньше здесь были две разные схемы – контейнер центрировал колонку
   через max-width, а полоса просто добавляла поле; на широких
   мониторах они расходились на сотни пикселей.
   ------------------------------------------------------------------ */
.ala-container,
.ala-gutter {
  padding-inline: max(
    var(--ala-gutter),
    (100% - var(--ala-content-max)) / 2
  );
}

.ala-container {
  width: 100%;
}

/* Вложенный контейнер не добавляет боковое поле второй раз: внешний
   блок уже вывел содержимое на нужную вертикаль. */
.ala-gutter .ala-container,
.ala-container .ala-container,
.ala-gutter .ala-gutter {
  padding-inline: 0;
  max-width: none;
}

/* ---------------------------------------------------------------------
   7. ДОСТУПНОСТЬ
   ------------------------------------------------------------------ */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--ala-accent);
  outline-offset: 2px;
  border-radius: var(--ala-radius-sm);
}

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