/*
  Azatora Premium Minimalist Design System
*/

:root {
  /* Colors — light theme */
  --bg-main: #ffffff;
  --bg-light: #f8fafc;
  --bg-lighter: #e2e8f0;
  --text-main: #0f172a;
  --text-muted: #64748b;
  /* Единственный акцент сайта — бренд-синий Kumo: и заливки (кнопки,
     чекбоксы, фокус, активные состояния), и текст (ссылки, наведение). */
  --accent: var(--kumo-brand);
  --border: rgba(15, 23, 42, 0.1);
  --glass-bg: rgba(0, 0, 0, 0.03);

  /* Typography */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing & Utilities */
  /* 1280px, а не 1200: при 1200 боковое оглавление статьи вылезало за левую
     грань контейнера примерно на 45px. Ширина подобрана так, чтобы оглавление
     вставало ровно по грани, а не «немного за пределами» — см. .article__toc-rail. */
  --container-width: 1280px;
  /* Колонка чтения: текст статьи, текст страницы «Компания». В rem, а не в ch,
     потому что от неё считается положение бокового оглавления, а ch зависит
     от шрифта элемента и в общем calc ведёт себя непредсказуемо. */
  --reading-width: 43rem;
  --toc-width: 11.25rem;

  /* Высота шапки. Раньше 80px были рассыпаны по семи местам (сама шапка,
     scroll-padding, hero, мобильное меню, .section--top) и разъезжались при
     любой правке — теперь один источник.
     58px + 1px нижней границы = 59px, как в шапке Onlink.
     --header-offset — полная занимаемая высота: шапка position: fixed, и всё,
     что встаёт под ней, обязано учитывать ещё и границу. Прежние 80px были
     как раз без неё, то есть на 1px залезали под шапку. */
  --header-h: 58px;
  --header-offset: calc(var(--header-h) + 1px);

  /* Кнопки — палитра Kumo, дизайн-системы Cloudflare (github.com/cloudflare/kumo):
     цвета из packages/kumo/src/styles/theme-kumo.css, формулы оттенков —
     из packages/kumo/src/components/button/button.tsx (getEmphasisStyle). */
  --kumo-brand: oklch(0.5772 0.2324 260);
  --kumo-brand-top: color-mix(in oklch, var(--kumo-brand), white 15%);   /* верх градиента */
  --kumo-brand-light: color-mix(in oklch, var(--kumo-brand), white 30%); /* блик; верх на hover */
  --kumo-brand-ring: color-mix(in oklch, var(--kumo-brand), black 10%);  /* контур */
  /* Контур вторичных кнопок. У Kumo это полупрозрачный oklch(14.5% 0 0 / 0.1)
     ring СНАРУЖИ элемента; у нас border внутри (размеры уже подогнаны), и
     полупрозрачный border темнел бы на hover и под тенью — сквозь него
     просвечивают серый фон и тень. Поэтому непрозрачный цвет, в который их
     ring складывается на белом фоне — замерено: #e6e6e6. */
  --kumo-line-solid: #e6e6e6;
  --kumo-tint: oklch(97% 0 0);                /* фон вторичных на hover */
  --kumo-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  /* Остальная палитра Kumo: поля, чекбоксы, метки, подложка диалога. */
  --kumo-hairline: oklch(93.5% 0 0);                 /* контур чекбокса */
  --kumo-contrast: oklch(8.5% 0 0);                  /* отмеченный чекбокс */
  --kumo-focus: oklch(15% 0 0);                      /* кольцо фокуса полей */
  --kumo-fill: oklch(92.2% 0 0);                     /* заливка метки-чипа */
  --kumo-fill-text: oklch(26.9% 0 0);                /* текст на этой заливке */
  --kumo-recessed: oklch(96% 0 0);                   /* подложка диалога */
  --kumo-overlay: oklch(97.5% 0 0);                  /* подсветка пункта меню */
  --kumo-placeholder: oklch(70.8% 0 0);
  --kumo-danger: oklch(63.7% 0.237 25.331);          /* контур поля с ошибкой */
  --kumo-danger-text: oklch(50.5% 0.213 27.518);     /* текст ошибки */
  --kumo-shadow-dialog: 0 20px 25px -5px rgb(0 0 0 / 0.03), 0 8px 10px -6px rgb(0 0 0 / 0.03);
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-offset);
  background: var(--bg-main);
}

html.nav-open,
body.nav-open {
  overflow: hidden !important;
  touch-action: none;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-family);
  background: #ffffff;
  background-attachment: fixed;
  color: var(--text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* Typography Classes */
h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  margin-bottom: 1.5rem;
}

h2 {
  font-size: clamp(2rem, 3vw, 2.5rem);
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Layout Utilities */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: 6rem 0;
}

/* Текст только для скринридеров и поисковиков: на экране его нет, но из
   разметки и порядка чтения он не пропадает (стандартный приём вместо
   display: none, который прячет текст и от вспомогательных технологий). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  /* Сплошной, а не прозрачный: шапка фиксированная, и сквозь прозрачную
     при прокрутке просвечивал контент под ней. */
  background: var(--bg-main);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  /* Система отсчёта для меню: оно центрируется по контейнеру (см. .nav ниже). */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

/* Логотип в шапке. Класс .logo в разметке идёт только в паре с .nav-logo,
   и та при равной специфичности объявлена позже — поэтому отдельного правила
   для .logo нет, оно всё равно ничего бы не задавало.
   36px — логотип в футере (.brand-logo) подогнан под ЭТУ высоту, а не
   наоборот. */
.nav-logo {
  height: 36px;
  width: auto;
  /* Небольшой сдвиг вниз от центра строки .header-inner — чисто визуальная
     подстройка, на раскладку и высоту шапки не влияет. */
  position: relative;
  top: 2px;
}

.nav, .footer-nav {
  display: flex;
  gap: 2rem;
}

/* Меню по центру ШАПКИ, а не между соседями. Было margin-inline: auto, но auto-поля
   делят только остаток места: блок кнопок справа (≈150px) шире логотипа (≈31px), и
   меню уезжало влево ровно на половину разницы — замерено 59px. Ещё и «плавало» бы,
   меняйся ширина сторон. absolute + left: 50% + translateX(-50%) ставит его в
   настоящий центр контейнера при любых соседях. Так же сделано в шапке Onlink
   (backend/app/api/endpoints/proverka.py, .topbar-nav) — там мы этот приём и взяли.
   Ниже 769px ЭТОТ ЖЕ элемент становится выдвижным меню (position: fixed) и обязан
   сбросить transform: сброс стоит в блоке до него. */
.nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

/* Только ПРЯМЫЕ дети: внутри .nav на мобильном жила кнопка «Связаться», и как
   десцендантный селектор это правило при специфичности (0,1,1) перебивало её
   собственную (0,1,0) — кнопка молча рендерилась чужим шрифтом. Кнопка теперь
   в шапке, но ограничение оставляем: правило про пункты меню, а не про всё,
   что окажется внутри. */
.nav > a, .footer-nav > a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-main);
  text-decoration: none;
  transition: color 0.2s, opacity 0.2s;
}

.nav > a:hover, .footer-nav > a:hover,
.nav > a:active, .footer-nav > a:active {
  color: var(--accent);
}

.header-actions {
  display: flex;
  align-items: center;
  /* 8px, как между кнопками в шапке Onlink (.topbar-auth): до появления
     глобуса в контейнере была одна кнопка и зазор ни на что не влиял. */
  gap: 8px;
}

/* Переключатель языка в шапке — единственный на сайте: из футера его убрали,
   чтобы не дублировать одно и то же. Пункты меню — .lang-switch-item. */
.header-lang {
  position: relative;
  display: inline-flex;
}

/* Кнопка с глобусом. Геометрию берёт у .topbar-icon-btn, а скругление и
   ховер — у круглых кнопок соцсетей в футере (.site-footer-social a), чтобы
   это читалось как одна и та же кнопка-иконка на сайте. */
.header-lang-btn {
  border-radius: 9px;
}

.header-lang-btn svg {
  width: 15px;
  height: 15px;
}

/* Пока список открыт, фон обычный, без ховерного оттенка — так у Kumo
   (data-[state=open]:bg-kumo-base). */
.header-lang.open .header-lang-btn {
  background-color: var(--bg-main);
}

.header-lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  bottom: auto;
  /* По центру кнопки, как в футере. */
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  display: none;
  flex-direction: column;
  min-width: 110px;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.1);
  z-index: 200;
}

.header-lang.open .header-lang-menu {
  display: flex;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 8px;
  /* Стиль primary-кнопки Kumo: вертикальный градиент от бренд-синего,
     осветлённого на 15%, к чистому; однопиксельный блик сверху (inset-тень),
     контур — бренд, затемнённый на 10%; лёгкая тень под кнопкой.
     У Kumo контур — ring (box-shadow снаружи, места не занимает), а градиент
     лежит отдельным <span> внутри кнопки. Здесь то же одним элементом:
     контур — border 1px того же цвета (так уже подогнанные высоты кнопок не
     меняются), градиент — background-image. Выглядит так же: тёмный край 1px
     и блик сразу под ним. */
  background-color: var(--kumo-brand);
  background-image: linear-gradient(to bottom, var(--kumo-brand-top), var(--kumo-brand));
  box-shadow: inset 0 1px 0 0 var(--kumo-brand-light), var(--kumo-shadow-xs);
  color: #ffffff !important;
  font-size: 0.875rem;
  font-weight: 500;
  /* line-height: 1 (а не унаследованный от body 1.6) убирает лишнюю
     «воздушную» высоту строки — тогда высота кнопки складывается только из
     padding, шрифта и границы: 8+8+14+1+1 = 32px, вровень с кнопкой-глобусом
     рядом (.topbar-icon-btn — 32×32). */
  line-height: 1;
  text-decoration: none;
  border: 1px solid var(--kumo-brand-ring);
  transition: all 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
  /* Кнопки «Связаться» бывают и <button> (открывают форму заявки), а у кнопок,
     в отличие от ссылок, шрифт по умолчанию системный, а не унаследованный. */
  font-family: inherit;
}

/* Как у Kumo на hover: верх градиента светлеет до тона блика. */
.btn-primary:hover {
  background-image: linear-gradient(to bottom, var(--kumo-brand-light), var(--kumo-brand));
  color: #ffffff !important;
}

/* Kumo: ring-2 цвета контура. 1px контура уже даёт border, ещё 1px — снаружи. */
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--kumo-brand-ring), inset 0 1px 0 0 var(--kumo-brand-light), var(--kumo-shadow-xs);
}

/* Кнопки-иконки — secondary-кнопка Kumo: белый фон, тонкий контур, лёгкая
   тень, на hover светло-серый фон. Контур у Kumo — ring снаружи, здесь border
   (чтобы не менять подогнанные размеры) — см. --kumo-line-solid. */
.topbar-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--kumo-line-solid);
  background: var(--bg-main);
  box-shadow: var(--kumo-shadow-xs);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.topbar-icon-btn:hover {
  background-color: var(--kumo-tint);
}

.lang-switch-item {
  background: transparent;
  color: var(--text-main);
  border: none;
  padding: 5px 8px;
  text-align: center;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.lang-name-native {
  font-size: 0.8125rem; /* 13px */
  color: var(--text-main);
  line-height: 1.2;
  transition: color 0.15s;
}

.lang-name-en {
  display: block;
  font-size: 0.6875rem; /* 11px */
  color: var(--text-muted);
  line-height: 1.2;
  transition: color 0.15s;
}

.lang-switch-item:hover .lang-name-native {
  color: var(--accent);
}

.lang-switch-item:hover .lang-name-en {
  color: var(--accent);
  opacity: 0.85;
}

.lang-switch-item.active .lang-name-native {
  color: var(--accent);
  font-weight: 600;
}

.lang-switch-item.active .lang-name-en {
  color: var(--accent);
  opacity: 0.85;
}

.mobile-menu-btn {
  display: none;
  /* Крупнее, чем базовые 32px у .topbar-icon-btn — на мобильном это
     основная кнопка навигации, ей нужна цель побольше под палец. */
  width: 40px;
  height: 40px;
}

.burger-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.burger-icon-bar {
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: top .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}

.burger-icon-bar:nth-child(1) { top: 3px; }
.burger-icon-bar:nth-child(2) { top: 9px; }
.burger-icon-bar:nth-child(3) { top: 15px; }

.mobile-menu-btn.open .burger-icon-bar:nth-child(1) { top: 9px; transform: rotate(45deg); }
.mobile-menu-btn.open .burger-icon-bar:nth-child(2) { opacity: 0; }
.mobile-menu-btn.open .burger-icon-bar:nth-child(3) { top: 9px; transform: rotate(-45deg); }

/* Hero Section */
.hero {
  margin-top: var(--header-offset);
  min-height: calc(100vh - var(--header-offset));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  animation: fade-up 600ms ease-out both;
}

.hero-content {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.hero__title {
  margin: 0;
  font-size: clamp(2rem, 4vw + 0.5rem, 3.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-align: center;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Footer (Onlink style, dark theme) */
.site-footer {
  /* Шаг вертикального ритма футера: строка текста 14px с межстрочным 1.6.
     На него опираются колонка «Контакты» и колонка с адресом, чтобы их
     строки стояли на одних уровнях (см. .site-footer-contacts ниже). */
  --footer-line: calc(14px * 1.6);
  background: var(--bg-main);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* Та же геометрия, что у общего .container (шапка и весь
   контент страниц), а не собственные 1180/28: те расходились с шапкой на
   ~14px и логотип в футере визуально съезжал вправо от логотипа шапки. */
.site-footer-shell {
  /* Токен, а не число: футер обязан совпадать по грани с шапкой, а при
     зашитом 1200px расширение контейнера разъехало их на 40px. */
  max-width: var(--container-width);
  margin: 0 auto;
  padding-inline: 24px;
  display: flex;
  justify-content: space-between;
  /* stretch, а не start: колонки получают высоту всей строки (=высота самой
     высокой колонки, обычно «Контакты» с адресом в 3 строки), иначе бейджу
     Astana Hub ниже не от чего оттолкнуться, чтобы прижаться к низу. */
  align-items: stretch;
  gap: 40px;
  padding-block: 64px;
}

.site-footer-col-brand {
  margin-right: 20px;
  display: flex;
  flex-direction: column;
}

/* Astana Hub Badge */
.astanahub-badge {
  border-radius: 0;
  padding: 0;
  margin-top: 48px;
  border: none;
  background: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

/* На десктопе прижимаем бейдж к низу колонки — вровень с адресом во второй
   колонке. margin-top: 48px выше остаётся для мобильного блока
   (.site-footer-mobile-brand — там колонка не растянута по высоте, auto там
   ничего не даст без flex-контекста, поэтому переопределяем адресно). */
.site-footer-col-brand .astanahub-badge {
  margin-top: auto;
}

/* Нижний край бейджа держит margin-top: auto выше — но только пока колонка
   растянута чужой высотой. Когда брендовая колонка сама оказывается самой
   высокой (так вышло, когда из «Ресурсов» ушли «Проекты»), свободного места
   не остаётся, auto схлопывается в ноль и бейдж прилипает к логотипу —
   замерено, просвет падал с 44px до 14px.

   Отступ снизу у логотипа задаёт этому просвету пол: он входит в собственную
   высоту колонки, поэтому строка футера не может стать ниже, чем «логотип +
   48px + бейдж». Есть лишняя высота — auto по-прежнему уводит бейдж вниз
   и ровняет его с последней строкой соседней колонки. */
.site-footer-col-brand .site-footer-brand-link {
  /* flex, чтобы картинка перестала быть строчной: у строчного бокса снизу
     остаётся место под нижние выносные элементы, и просвет выходил не 48px,
     а 56 — на глаз незаметно, но значение в CSS переставало означать то,
     что видно на экране. */
  display: flex;
  margin-bottom: 48px;
}

.astanahub-badge:hover {
  opacity: 0.75;
}

.astanahub-logo {
  height: 36px;
  width: auto;
  align-self: flex-start;
}

.astanahub-text {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
  /* Тот же line-height, что у .site-footer-address рядом — иначе при
     одинаковом font-size строки бейджа визуально гуще, чем у адреса. */
  line-height: 1.6;
}

@media (max-width: 900px) {
  .site-footer-col-brand { margin-right: 80px; }
}
@media (max-width: 720px) {
  .site-footer-shell {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
  }
}
@media (max-width: 640px) {
  .site-footer-shell { padding-block-start: 32px; }
}
@media (max-width: 480px) {
  /* 32px — тот же отступ, что и от текста Astana Hub до заголовка
     «Контакты» (.site-footer-shell padding-block-start выше): было 20px,
     колонки стояли теснее, чем блок с логотипом над ними. */
  .site-footer-shell { grid-template-columns: 1fr; gap: 32px; }
}

/* Распорка вместо заголовка: неразрывный пробел даёт строке высоту, но на
   экране ничего не видно. Так адрес во второй колонке «Контактов» встаёт
   вровень с телефоном в первой. */
.site-footer-heading--ghost::before { content: "\00a0"; }

.site-footer-heading {
  /* 20px, а не 12px: заголовки отодвинуты от своих списков. Заодно на столько
     же подрастает ряд, а вместе с ним и просвет от логотипа до бейджа Astana
     Hub — тот прижат к низу колонки. */
  margin: 0 0 20px;
  font-size: 14px;
  font-weight: 600;
  /* Явно, а не из общего правила h1..h4: класс висит и на распорке-<p>, а та
     без этого брала line-height 1.6 от body и была на 5.6px выше заголовка. */
  line-height: 1.2;
  color: var(--text-main);
  letter-spacing: 0.01em;
}

.site-footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.site-footer-list a {
  /* Как .nav a: серый по умолчанию, белый при наведении. */
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.site-footer-list a:hover, .site-footer-list a:active {
  color: var(--text-main);
}

.site-footer-contact-sub {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  opacity: .75;
  margin-top: 2px;
}

.site-footer-address {
  color: var(--text-muted);
  font-size: 14px;
  line-height: var(--footer-line);
}

/* Колонка-флекс, чтобы соцкнопки прижимались к её низу (margin-top: auto). */
.site-footer-contacts {
  display: flex;
  flex-direction: column;
}

/* «Контакты» и адрес — один вертикальный ритм: каждая строка и зазор между
   пунктами равны одному шагу. Тогда телефон стоит вровень с первой строкой
   адреса, а почта — с последней. Раньше строка ссылки была 26px против 22.4px
   у адреса, и почта уезжала на 5px ниже БИН.
   Ритм задан только этой колонке: у «Ресурсов» свой, более плотный список. */
.site-footer-contacts .site-footer-list,
.site-footer-contacts .site-footer-contact-sub {
  line-height: var(--footer-line);
}

/* Шрифт именно списку, а не только ссылкам внутри: высоту строки <li> задаёт
   его собственный шрифт, а он до этого оставался 16px от body — строка выходила
   25.6px вместо 22.4px, и почта уезжала ниже адреса. */
.site-footer-contacts .site-footer-list { font-size: 14px; }

.site-footer-contacts .site-footer-contact-sub { margin-top: 0; }

.site-footer-contacts .site-footer-list-wide { gap: var(--footer-line); }

.site-footer-list-wide { gap: 20px; }

/* Колонка с адресом — колонка-флекс, чтобы копирайт прижимался к её низу. */
.site-footer-col-address {
  display: flex;
  flex-direction: column;
}

/* Копирайт стоит под адресом и прижат к низу колонки: колонки растянуты на
   высоту ряда, поэтому он встаёт вровень с «Конфиденциальностью» в «Ресурсах»
   и с соцкнопками в «Контактах». */
.site-footer-copy {
  margin: auto 0 0;
  /* Просвет от адреса задан паддингом, а не отступом: отступ сверху здесь auto
     и на десктопе съедает всё свободное место. Паддинг живёт внутри блока, низ
     текста остаётся на низу колонки, а на узком экране, где колонка не
     растянута и auto схлопывается в ноль, строка не липнет к БИН. */
  padding-top: 14px;
  /* 14px — как у адреса рядом и текста Astana Hub; на мобильном ниже 16px,
     тоже вровень с ними. */
  font-size: 14px;
  color: var(--text-muted);
}

.site-footer-social {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Прижаты к низу колонки «Контакты». Колонки растянуты на высоту ряда,
     поэтому низ кнопок совпадает с последним пунктом «Ресурсов». */
  margin-top: auto;
}

/* Secondary-кнопка Kumo — как .topbar-icon-btn. */
.site-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--bg-main);
  border: 1px solid var(--kumo-line-solid);
  box-shadow: var(--kumo-shadow-xs);
  color: var(--text-muted);
  transition: all 0.2s;
}

.site-footer-social a:hover {
  background-color: var(--kumo-tint);
}

.site-footer-social svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* Mobile brand (shown above columns on <=640px) */
.site-footer-mobile-brand { display: none; }
/* 36px — как .nav-logo в шапке. */
.site-footer-mobile-brand .brand-logo { height: 36px; width: auto; }
/* Паддинг — из общего .container (24px), переопределять не нужно: теперь
   это тот же отступ, что и у .site-footer-shell (см. брейкпоинт 900px). */

@media (max-width: 640px) {
  .site-footer-col-brand { display: none; }
  .site-footer-mobile-brand { display: block; padding-top: 32px; }

  /* Базовые 48px рассчитаны на десктопную колонку; в столбик просвет от
     логотипа до бейджа выбивался из общего шага между блоками (32px). */
  .site-footer-mobile-brand .astanahub-badge { margin-top: 24px; }
  /* Распорка вместо заголовка нужна только когда «Контакты» и адрес стоят
     рядом: в столбик они идут друг под другом, и пустая строка превращается
     в дыру на треть экрана. */
  .site-footer-heading--ghost { display: none; }

  /* margin-top: auto прижимает соцкнопки к низу только в растянутой колонке.
     В столбик колонка по высоте контента, auto схлопывается в ноль, и кнопки
     липли прямо к почте. */
  .site-footer-social { margin-top: 20px; }

  .site-footer-heading { font-size: 16px; }
  .site-footer-list a { font-size: 16px; }
  .site-footer-address { font-size: 16px; line-height: 1.6; }
  .site-footer-contact-sub { font-size: 13px; }
  .astanahub-text { font-size: 16px; }
  .site-footer-copy { font-size: 16px; }
}

/* Responsive */
@media (max-width: 992px) {
  h1 { font-size: 3rem; }
}

/* Меню вне потока не раздвигает соседей, и на узких экранах логотип с кнопками
   заезжают под него. В этой полосе возвращаемся к центрированию в потоке: на пару
   десятков пикселей мимо центра, зато без наложения. Выше — на всех настоящих
   десктопных ширинах — работает абсолютное правило.
   Объявлено ДО блока ≤768px, чтобы выдвижное меню всё равно побеждало. */
@media (max-width: 1023px) {
  .nav {
    position: static;
    transform: none;
    margin-inline: auto;
  }
}

@media (max-width: 768px) {
  .nav {
    position: fixed;
    top: var(--header-offset);
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(100vh - var(--header-offset));
    height: calc(100dvh - var(--header-offset));
    z-index: 100;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    border-bottom: none;
    /* Своей верхней границы у выдвижного меню нет: оно встаёт вплотную под
       шапку (top: --header-offset уже учитывает её нижнюю границу), и вторая
       линия ложилась встык к первой — вместе они читались как одна жирная
       двухпиксельная. Разделитель даёт border-bottom самой .header. */
    border-top: none;
    margin-inline: 0;
    overflow-y: auto;
    box-sizing: border-box;
  }
  .nav.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }
  .nav > a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 14px 20px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: none;
    font-size: 17px;
    color: var(--text-main);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
  }
  .nav > a:hover, .nav > a:active {
    background: rgba(0, 0, 0, 0.04);
    color: var(--accent);
  }
  .mobile-menu-btn {
    display: flex;
  }
  /* Переключатель языка показывается в шапке только при открытом мобильном
     меню. Класс nav-open вешает на <body> тот же обработчик, что открывает
     меню, — отдельного состояния для этого заводить не пришлось. */
  .header-lang {
    display: none;
  }
  body.nav-open .header-lang {
    display: inline-flex;
  }
  /* Кнопка языка вровень с бургером: тот на мобильном 40×40 (крупнее базовых
     32px — основная кнопка навигации), и стоящий рядом глобус при 32px
     смотрелся мельче соседа. Иконка внутри тоже подрастает. */
  .header-lang-btn {
    width: 40px;
    height: 40px;
  }
  .header-lang-btn svg {
    width: 18px;
    height: 18px;
  }
  /* Класс общий для обоих переключателей — в шапке и в футере, так что текст
     в списке подрастает сразу в двух местах. Центрирование внутри пункта тут
     не задаётся: оно идёт от базового правила .lang-switch-item и раньше
     сбивалось влево отдельным мобильным переопределением в блоке футера. */
  .lang-name-native {
    font-size: 15px;
  }
  .lang-name-en {
    font-size: 13px;
  }
  /* Справа налево: бургер, «Связаться», а при открытом меню ещё и глобус.
     Порядок задаёт сама разметка, margin-left: auto прижимает группу к бургеру —
     иначе space-between у .header-inner увёл бы её в середину строки (выдвижное
     меню — fixed и из потока выпадает, так что в строке остаются логотип,
     кнопки и бургер). */
  .header-actions {
    margin-left: auto;
  }
  /* Вровень с бургером и глобусом — те на мобильном 40×40. */
  .header-contact-btn {
    height: 40px;
  }
  .header-inner {
    gap: 8px;
  }

}


/* ─────────────────────────────────────────────────────────────
   Медиа: templates/media/list.html и detail.html
   По образцу блога Onlink (onlink.kz/blog): сетка карточек в две
   колонки, у статьи текст до 68 знаков и «прилипающее» оглавление, «Другие статьи»
   сеткой, на телефоне лентой со свайпом. Цвета и размеры на токенах Azatora.
   ───────────────────────────────────────────────────────────── */

/* Первый блок под фиксированной шапкой: секция сама отвечает за отступ
   (страница «О компании»). */
.section--top { margin-top: var(--header-offset); padding-top: 3rem; }

/* Шапка списка: заголовок и строка под ним, по центру на всех ширинах —
   как и ряд чипов под ней, так весь верх страницы читается одним блоком. */
.page-head {
  max-width: var(--container-width);
  margin: var(--header-offset) auto 0;
  padding: 72px 1.5rem 40px;
  text-align: center;
}

.page-head__title {
  margin: 0;
  font-size: clamp(2rem, 1.6vw + 1.6rem, 3.25rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.page-head__lede {
  max-width: 60ch;
  /* auto по бокам, иначе ограниченный по ширине абзац прижимался бы влево
     внутри отцентрованной шапки. */
  margin: 14px auto 0;
  font-size: clamp(0.9375rem, 0.3vw + 0.85rem, 1.125rem);
  line-height: 1.6;
  color: var(--text-muted);
}

.posts { max-width: var(--container-width); margin: 0 auto; padding: 0 1.5rem 96px; }

/* Заголовков на списках нет, поэтому отступ сверху держит сам список: иначе
   карточки уезжают под фиксированную шапку сайта. */
.posts--top { margin-top: var(--header-offset); padding-top: 72px; }

.posts__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 24px;
}

/* Лента «Медиа»: карточки мельче и с квадратным кадром. Материалов в ленте
   много и они разнородные, а широкие карточки 16:10 по две в ряд читались
   как альбом, а не как лента. Отдельный класс, а не правка .posts__grid:
   на списке решений карточки крупные намеренно, их всего две. */
.feed-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 20px;
}

.feed-grid .post__media { aspect-ratio: 1 / 1; }

/* Ниже 1024px три колонки дают карточку уже 220px — заголовок в ней ломается
   на пять строк. Объявлено ДО мобильного блока, где .posts__grid встаёт
   в одну колонку: там побеждает он, и это правильно. */
@media (max-width: 1023px) {
  .feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Карточка целиком ссылка: кликается вся, а не только заголовок. */
.post { display: flex; flex-direction: column; min-width: 0; color: inherit; }
.post:hover .post__title { color: var(--accent); }
.post:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 16px; }

/* Место обложки в карточке блога, проектов и решений. Самих картинок сейчас нет:
   вместо них серая заливка того же размера — блоки на месте, раскладка не прыгает. */
.post__media,
.more__media {
  display: block;
  aspect-ratio: 16 / 10;
  /* Квадрат у лент «Другие статьи» и «Другие проекты» — как в ленте «Медиа».
     Базовое 16:10 остаётся у карточек списка решений, они крупные и широкие. */
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-lighter);
}

/* Тип материала над заголовком карточки: «Статья», «Проект», а у внешних ещё
   и источник со стрелкой — чтобы клик наружу не был неожиданностью. */
.post__kind {
  display: block;
  margin-top: 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
}

.post__source { color: var(--text-muted); font-weight: 400; }

.post__kind + .post__title { margin-top: 6px; }

.post__title {
  margin: 16px 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: color 0.2s;
}

.post__text { display: block; margin-top: 8px; font-size: 0.9375rem; line-height: 1.55; color: var(--text-muted); }

/* Фильтр по рубрикам: по центру над сеткой, появляется только при двух и более рубриках. */
.chip-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 2.5rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* По образцу Badge у Kumo: заливка вместо контура, полное скругление,
     мелкий текст средней жирности. Отступы крупнее их: у Kumo метка не
     кликается, а наш чип — ссылка-фильтр, ей нужна цель под палец. */
  padding: 6px 12px;
  border: 0;
  border-radius: 9999px;
  background: var(--kumo-fill);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--kumo-fill-text);
  transition: color 0.2s, background-color 0.2s;
}

.chip:hover { color: var(--text-main); background-color: color-mix(in srgb, var(--kumo-fill) 88%, black); }
.chip.is-active { color: #fff; background: var(--accent); }
.chip__count { font-size: 0.75rem; opacity: 0.7; }

.empty-state { padding: 4rem 0; text-align: center; color: var(--text-muted); }

.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 3rem; }

.pager__link {
  /* Вторичная кнопка Kumo: белый фон, контур-хайрлайн, та же лёгкая тень,
     на hover светло-серый фон. */
  padding: 8px 16px;
  border: 1px solid var(--kumo-line-solid);
  border-radius: 9999px;
  background: var(--bg-main);
  box-shadow: var(--kumo-shadow-xs);
  font-size: 0.875rem;
  transition: background-color 0.2s;
}

.pager__link:hover { background-color: var(--kumo-tint); }
.pager__status { font-size: 0.8125rem; color: var(--text-muted); }

/* Статья */
.article { max-width: var(--container-width); margin: var(--header-offset) auto 0; padding: 48px 1.5rem 0; }
.article__head { margin-bottom: 32px; }

/* Раньше низ страницы держал призыв под ней. Его больше нет, и отступ нужен
   только там, где под статьёй нет ленты «Другие …»: у неё свой отступ снизу. */
.article:not(:has(+ .more)) { padding-bottom: 96px; }

.article__title {
  max-width: 46ch;
  margin: 0;
  font-size: clamp(1.75rem, 1.1vw + 1.4rem, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.article__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; font-size: 0.9375rem; color: var(--text-muted); }

/* Начало материала вместо обложки: дата, под ней заголовок, вокруг воздух.
   Обложка занимала здесь около 275px по высоте, и без неё страница начиналась
   бы сразу с текста. Отступы сверху и снизу одинаковые, чтобы заголовок стоял
   в середине этого блока, а не прижимался к тексту. */
.article__head--hero {
  padding-block: 40px 48px;
}

.article__head--hero .article__meta {
  justify-content: center;
  margin: 0 0 16px;
}
.article__meta a:hover { color: var(--accent); }

/* Шапка по центру: статья блога и страница кейса. Ширину заголовку и лиду задаёт
   max-width, поэтому одного text-align мало — их надо центрировать ещё и полями,
   а мета-строку (она flex) выравнивать по главной оси. */
.article__head--center {
  text-align: center;
  /* Не шире обложки: заголовок во всю ширину контейнера торчал за её края,
     и страница читалась как три разные по ширине полосы. */
  max-width: 60rem;
  margin-inline: auto;
}

.article__head--center .article__title { margin-inline: auto; }

.article__head--center .article__meta { justify-content: center; }

/* Обложка на странице статьи, кейса и решения — серая заливка тех же размеров,
   что фото на странице «Компания» (.company__photo): 60rem по центру и кадр 5:2.
   Раньше она занимала всю ширину контейнера и была заметно крупнее, хотя это
   один и тот же по смыслу блок на всех внутренних страницах.
   На телефоне пропорция своя, см. блок ≤768px. */
.article__cover {
  max-width: 60rem;
  margin-inline: auto;
  aspect-ratio: 5 / 2;
  overflow: hidden;
  border-radius: 16px;
  background: var(--bg-lighter);
}

.article__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 48px;
  align-items: start;
  margin-top: 48px;
}

.article__body--single { grid-template-columns: minmax(0, 1fr); }
.article__text { max-width: 68ch; }

/* Страница материала: одна колонка по центру под обложкой, как на странице
   «Компания». Раньше здесь была сетка с оглавлением сбоку, и та своей колонкой
   сдвигала текст влево: обложка стояла по центру, текст нет, страница выходила
   скошенной. Ширина в знаках, а не в пикселях — длинная строка читается тяжело
   при любой ширине экрана. */
.article__reading {
  /* Система отсчёта для оглавления слева. */
  position: relative;
  max-width: var(--reading-width);
  margin: 48px auto 0;
}

/* Страница материала: заголовок и обложка по ширине текста, одной колонкой.
   Ширина задана одним токеном, поэтому у всех трёх блоков она совпадает точно.
   Ограничение только здесь: на странице кейса и решения текст идёт двумя
   колонками и шире, там обложка по ширине текста была бы уже самого текста. */
.article--reading .article__head--center,
.article--reading .article__cover {
  max-width: var(--reading-width);
}

/* Оглавление слева от текста. position: absolute, а не ячейка сетки: в потоке
   оглавление занимало бы свою ширину и уводило колонку из центра страницы —
   ровно то, из-за чего страница выглядела скошенной.

   Левый край оглавления совпадает с левой гранью контейнера — той же, по
   которой выровнены логотип в шапке и первая колонка футера. Отступ до текста
   поэтому не подбирается на глаз, а вычисляется: половина свободного места
   вокруг колонки чтения минус ширина самого оглавления. Если поменяется ширина
   контейнера или колонки, выравнивание сохранится само.

   Порог 1280px: ниже контейнер перестаёт быть полной ширины, свободного места
   слева не хватает и оглавление полезло бы за край окна (замерено). Там оно
   возвращается в поток над текстом. */
@media (min-width: 1280px) {
  .article__toc-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(
      (var(--container-width) - 3rem - var(--reading-width)) / 2 - var(--toc-width) + 100%
    );
    /* Узкая колонка намеренно: длинные названия разделов переносятся раньше
       и читаются столбиком, а не тянутся в одну строку почти до текста. */
    width: var(--toc-width);
    margin-bottom: 0;
  }

  .article__toc-rail .article__toc {
    position: sticky;
    top: calc(var(--header-offset) + 24px);
  }
}

/* Оглавление материала. Узкие экраны: обычный блок над текстом. Широкие: колонка
   слева, вплотную к тексту (см. блок min-width ниже). */
.article__toc-rail { margin-bottom: 32px; }

/* Оглавление едет вместе с чтением: список разделов и подсвеченный текущий на месте,
   где бы вы ни были в длинном документе (подсветку ставит script.js). */
.article__aside { position: sticky; top: calc(var(--header-offset) + 24px); }
.toc__list { margin: 0; padding: 0; list-style: none; }

.toc__link {
  display: block;
  padding: 8px 0 8px 13px;
  border-left: 2px solid var(--border);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text-muted);
  transition: color 140ms ease, border-color 140ms ease;
}

.toc__link:hover { color: var(--text-main); }
.toc__link.is-active { border-left-color: var(--accent); color: var(--text-main); font-weight: 500; }

/* Текст статьи из редактора */
.prose { font-size: 1.0625rem; line-height: 1.7; color: var(--text-main); }
.prose > * + * { margin-top: 20px; }

.prose h2 {
  margin-top: 36px;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  scroll-margin-top: calc(var(--header-offset) + 24px);
}

.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 24px; font-size: 1.0625rem; line-height: 1.35; }
.prose h2 + *,
.prose h3 + * { margin-top: 10px; }  /* подзаголовок ближе к своему тексту */
/* Подчёркивание как у Link в Kumo: тоньше и ближе к тексту. */
.prose a { color: var(--accent); text-decoration: underline;
           text-underline-offset: 0.15em; text-decoration-thickness: 0.0625em; }
.prose a:hover { text-decoration-color: var(--text-main); }
.prose ul,
.prose ol { padding-left: 1.5rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.5rem; }
.prose blockquote { padding-left: 1.25rem; border-left: 3px solid var(--accent); color: var(--text-muted); font-style: italic; }
.prose img { max-width: 100%; height: auto; border-radius: 0.75rem; }
.prose hr { margin-block: 2.5rem; border: 0; border-top: 1px solid var(--border); }

/* Другие статьи: маленькие карточки, дорога обратно в блог, а не второй список. */
.more { max-width: var(--container-width); margin: 0 auto; padding: 64px 1.5rem 96px; }
.more__title { margin: 0 0 24px; font-size: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem); font-weight: 600; letter-spacing: -0.01em; }
.more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* На компьютере обёртки как бы нет: карточки прямые ячейки сетки. Настоящий блок
   она получает только в ленте на телефоне. */
.more__track { display: contents; }
.more__card { display: flex; flex-direction: column; min-width: 0; color: inherit; }
.more__media { aspect-ratio: 1 / 1; border-radius: 12px; }
.more__card-title { margin-top: 12px; font-size: 0.9375rem; font-weight: 500; line-height: 1.35; transition: color 0.2s; }
/* Строка под заголовком: дата у «Других статей». У «Других проектов» её нет. */
.more__card-text { display: block; margin-top: 6px; font-size: 0.8125rem; line-height: 1.4; color: var(--text-muted); }
.more__card:hover .more__card-title { color: var(--accent); }

@media (max-width: 900px) {
  /* Одна колонка: оглавление встаёт НАД текст и перестаёт липнуть. */
  .article__body { grid-template-columns: 1fr; gap: 32px; }
  .article__aside { position: static; order: -1; }

  /* Лента со свайпом вместо сетки: нативный scroll-snap, карточка сама себе слайд. */
  .more__grid {
    display: block;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1.5rem;
    scrollbar-width: none;
    margin-inline: -1.5rem;
    padding: 0 1.5rem 4px;
  }

  .more__grid::-webkit-scrollbar { display: none; }
  .more__track { display: flex; }
  /* Хвостовой отступ: прокрутка не учитывает padding справа, без него лента упирается в край. */
  .more__track::after { content: ""; flex: 0 0 1.5rem; }
  .more__card + .more__card { margin-left: 16px; }
  .more__card { flex: 0 0 82%; max-width: 420px; scroll-snap-align: start; }
}

@media (max-width: 640px) {
  .page-head { padding: 48px 1.5rem 28px; }
  .posts--top { padding-top: 48px; }
  .posts { padding-bottom: 64px; }
  .posts__grid { grid-template-columns: 1fr; gap: 28px; }
  .article { padding-top: 32px; }
  .article:not(:has(+ .more)) { padding-bottom: 64px; }
  .article__cover { aspect-ratio: 16 / 9; }
  .prose { font-size: 1rem; }
  .more { padding: 48px 1.5rem 64px; }
}

/* ─────────────────────────────────────────────────────────────
   Форма заявки «Связаться»: templates/partials/lead_dialog.html
   Визуальный язык взят у модалки формы ожидания Onlink (карточка 16px,
   размытая подложка), но на токенах Azatora.
   ───────────────────────────────────────────────────────────── */

/* Фон под открытой формой не прокручивается (класс ставит script.js). */
html.lead-open { overflow: hidden; }

.lead-dialog {
  /* Сам <dialog> прозрачный и без отступов: клик мимо карточки попадает
     в него (в подложку), по этому признаку script.js закрывает форму. */
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  width: min(420px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overflow: visible;
  color: var(--text-main);

  /* Поле телефона (static/vendor/intl-tel-input) красится через свои
     переменные. Задаём их на <dialog>, а не на поле: список стран живёт
     внутри <dialog>, но вне карточки, и наследует их отсюда. */
  --iti-border-color: var(--kumo-line-solid);
  --iti-hover-color: var(--kumo-tint);
  --iti-icon-color: var(--text-muted);
  --iti-country-selector-bg: var(--bg-main);
}

.lead-dialog::backdrop {
  /* У Kumo подложка светлая и без размытия: серый --color-kumo-recessed
     под 80%. */
  background: color-mix(in srgb, var(--kumo-recessed) 80%, transparent);
}

.lead-dialog[open] { animation: lead-pop 150ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.lead-dialog[open]::backdrop { animation: lead-fade 180ms ease-out both; }

.lead-dialog__card {
  position: relative;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--bg-main);
  /* Карточка диалога Kumo: радиус 12px, контур-хайрлайн и мягкая тень
     вместо прежней плотной. */
  border: 1px solid var(--kumo-line-solid);
  border-radius: 12px;
  padding: 28px 24px 24px;
  box-shadow: var(--kumo-shadow-dialog);
}

/* При открытии фокус стоит на самой карточке (autofocus в шаблоне): рамка
   фокуса на ней не нужна, это не элемент управления. */
.lead-dialog__card:focus { outline: none; }

.lead-dialog__title {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
}

.lead-dialog__lede {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

.lead-form {
  /* position: relative, чтобы поле-ловушка (.form-trap) не уезжало за форму. */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.lead-field { display: flex; flex-direction: column; gap: 6px; }

.lead-field__label { font-size: 0.875rem; font-weight: 500; color: var(--text-main); }

.lead-field__input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  /* Как input у Kumo: белый фон и контур КОЛЬЦОМ (box-shadow), а не border.
     Высота задана явно, поэтому отказ от border её не меняет. */
  border: 0;
  border-radius: 8px;
  background: var(--bg-main);
  box-shadow: 0 0 0 1px var(--kumo-line-solid);
  color: var(--text-main);
  font: inherit;
  font-size: 0.875rem;
  outline: none;
  transition: box-shadow 0.16s;
}

.lead-field__input::placeholder { color: var(--kumo-placeholder); }

.lead-field__input--area {
  height: auto;
  min-height: 76px;
  padding: 8px 12px;
  line-height: 1.5;
  resize: vertical;
}

.lead-field__input:focus {
  /* Кольцо фокуса у Kumo нейтральное, 1.5px почти-чёрным под 50%: синий у
     них — цвет заливок, а не состояний ввода. */
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--kumo-focus) 50%, transparent);
}

.lead-field__input[aria-invalid="true"] { box-shadow: 0 0 0 1px var(--kumo-danger); }

/* Обёртка поля телефона у виджета по умолчанию inline-block: растягиваем
   её на всю ширину колонки, как остальные поля. */
.lead-field .iti { display: block; width: 100%; }

/* Список стран — по образцу выпадающего меню Kumo (Dropdown): панель
   rounded-lg с контуром-хайрлайном и тенью shadow-lg, пункты rounded-md с
   подсветкой overlay.
   Селекторы начинаются с .lead-dialog намеренно: CSS виджета подгружается
   на лету и встаёт в каскаде ПОСЛЕ style.css, так что при равной
   специфичности побеждал бы он. */
.lead-dialog .iti__country-selector {
  padding: 4px;
  background: var(--bg-main);
  border: 1px solid var(--kumo-line-solid);
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  overflow: hidden;
}

.lead-dialog .iti__country-list { max-height: 240px; }

.lead-dialog .iti__country {
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--text-main);
}

.lead-dialog .iti__dial-code { color: var(--text-muted); }

.lead-dialog .iti__search-input {
  border-radius: 6px;
  font-size: 0.875rem;
}

/* iOS увеличивает масштаб страницы, когда фокус уходит в поле со шрифтом
   меньше 16px, и обратно сам не возвращает. 16px там, где экран сенсорный:
   на десктопе поля остаются 14px, как у Kumo. */
@media (pointer: coarse) {
  .lead-field__input,
  .iti__search-input { font-size: 16px; }
}

.lead-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
  cursor: pointer;
}

.lead-consent__box {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  /* У Kumo отмеченный чекбокс почти чёрный (--color-kumo-contrast), не синий. */
  accent-color: var(--kumo-contrast);
  cursor: pointer;
}

.lead-form__error { margin: 0; font-size: 0.8125rem; line-height: 1.4; color: var(--kumo-danger-text); }

.lead-form__submit { width: 100%; height: 40px; font-size: 0.9375rem; }

.lead-form__submit:disabled,
.lead-form__submit:disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
  background-image: linear-gradient(to bottom, var(--kumo-brand-top), var(--kumo-brand));
}

.lead-dialog__done { padding: 8px 0 4px; }

/* Поле-ловушка для ботов (templates/honeypot/honeypot_field.html). */
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@keyframes lead-pop {
  /* Появление как у Kumo: масштаб 0.9 -> 1, без сдвига. */
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: none; }
}

@keyframes lead-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lead-dialog[open],
  .lead-dialog[open]::backdrop { animation: none; }
}


/* ─────────────────────────────────────────────────────────────
   Страница «Компания»: templates/core/company.html
   Сверху фото (или серая заглушка той же формы), под ним текст одной колонкой
   по центру страницы. На телефоне фото разворачивается во всю ширину экрана.
   ───────────────────────────────────────────────────────────── */

.company__photo {
  width: 100%;
  /* Уже контейнера: под фото идёт колонка чтения, и полоса во всю ширину
     рядом с ней смотрелась несоразмерно. Шире текста фото остаётся намеренно —
     так видно, что это главный элемент страницы, а не иллюстрация к абзацу. */
  max-width: 60rem;
  margin-inline: auto;
  /* 5:2, а не 3:1 — при ширине контейнера полоса выходила слишком узкой.
     На планшете и телефоне свои пропорции, см. медиазапросы ниже. */
  aspect-ratio: 5 / 2;
  margin-bottom: 3rem;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--bg-lighter);
}

/* На десктопе фото любой пропорции заполняет рамку и обрезается по центру:
   иначе высота полосы зависела бы от того, что именно загрузили в админке,
   и вертикальный снимок увёл бы весь текст под сгиб. */
.company__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Текст одной колонкой по центру страницы. Ширину держим в знаках, а не в
   пикселях: длинная строка читается тяжело, насколько бы широк ни был экран.
   Сами строки остаются по левому краю — по центру стоит колонка, а не текст. */
.company__text {
  max-width: var(--reading-width);
  margin-inline: auto;
}

.company__text p {
  font-size: 1.0625rem;
  line-height: 1.75;
}

.company__text p + p { margin-top: 1rem; }

.company__text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 768px) {
  .company__photo { margin-bottom: 2rem; }
}

/* Планшет и телефон: фото во всю ширину экрана, без полей и скруглений.
   Вырываемся из паддингов .container отрицательными полями ровно на их величину
   (1.5rem) — уже контейнера окно и так занимает всю ширину, так что фото
   ложится точно по краям. Через 100vw было бы короче, но он считает и полосу
   прокрутки, а это горизонтальный скролл на узком окне десктопа. */
@media (max-width: 1023px) {
  /* Фото во всю ширину примыкает к шапке сайта: отступ сверху у секции только
     отодвигал бы его от неё. Селектор с .company, чтобы не трогать .section--top
     на других страницах. */
  .company.section--top {
    padding-top: 0;
  }

  .company__photo {
    width: auto;
    /* Во всю ширину экрана — ограничение по ширине здесь только мешало бы. */
    max-width: none;
    margin-inline: -1.5rem;
    border-radius: 0;
    /* Во всю ширину фото показываем целиком, как есть: рамка подстраивается
       под него, а не оно под рамку, поэтому обрезать нечего. Высоту задаёт
       само изображение (height: auto ниже), а до его загрузки — атрибуты
       width/height в разметке, чтобы страница не прыгала. */
    aspect-ratio: auto;
  }

  .company__photo img {
    height: auto;
  }

  /* У заглушки изображения нет, и без пропорции она схлопнулась бы в ноль.
     Полоса стала шире, поэтому и кадр выше: 5:2 во всю ширину выглядит уже
     не полосой, а щелью. */
  .company__photo--empty {
    aspect-ratio: 2 / 1;
  }
}

@media (max-width: 640px) {
  /* На телефоне и 2:1 вырождается в узкую полосу — даём заглушке форму снимка. */
  .company__photo--empty { aspect-ratio: 3 / 2; }
}


/* ─────────────────────────────────────────────────────────────
   Проекты: templates/projects/list.html и detail.html
   Каркас общий с блогом (.posts, .post, .article, .more): карточка списка
   и шапка кейса целиком оттуда. Здесь только своё: разделы кейса, скриншоты,
   отзыв клиента и факты о проекте справа.
   ───────────────────────────────────────────────────────────── */

.case__section + .case__section { margin-top: 40px; }

.case__section-title {
  margin: 0 0 12px;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Скриншоты проекта. Самих картинок сейчас нет — как и у обложек, на их месте
   серая заливка. Раньше высоту задавала сама картинка (height: auto), поэтому
   пустой блок схлопнулся бы: держим кадр пропорцией, как в карточках. */
.case__shots { display: grid; gap: 28px; margin-top: 40px; }
.case__shot { margin: 0; }

.case__shot-media {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-lighter);
}

.case__shot figcaption { margin-top: 10px; font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); }

/* Отзыв клиента: как цитата в тексте статьи, только крупнее. */
.case__quote { margin: 40px 0 0; padding-left: 1.25rem; border-left: 3px solid var(--accent); }
.case__quote blockquote { margin: 0; font-size: 1.1875rem; line-height: 1.6; }
.case__quote figcaption { margin-top: 12px; font-size: 0.9375rem; color: var(--text-muted); }

/* Факты о проекте: как контакты на странице «Компания», без подложки. */
/* Факты о проекте в начале текста, а не колонкой сбоку: сбоку они своей шириной
   уводили колонку из центра страницы. Строятся в ряд и переносятся сами, сколько
   бы их ни было — от двух (клиент и год) до пяти (плюс отрасль, направление,
   ссылка). Черта снизу отделяет их от первого раздела кейса. */
.case__facts {
  /* Столбцы по ширине содержимого, а весь ряд по центру колонки чтения: при
     равных долях (1fr) короткий «Год» получал столько же места, сколько
     «Оптовая торговля», и между значениями зияли дыры. Внутри столбца текст
     остаётся по левому краю — подпись и значение должны стоять друг под другом.
     flex, а не grid: на узком экране столбцы переносятся сами, сколько бы их
     ни было. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Зазор между столбцами растёт вместе с экраном: на десктопе столбцы должны
     читаться как отдельные, на телефоне такой же зазор съел бы всю строку. */
  gap: 1.75rem clamp(2.5rem, 6.5vw, 6.5rem);
  margin: 0 0 2.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--border);
}

.case__facts dt { margin-bottom: 4px; font-size: 0.75rem; color: var(--text-muted); }
.case__facts dd { margin: 0; font-size: 0.9375rem; line-height: 1.6; }
.case__facts a { color: var(--accent); transition: color 0.2s; }
.case__facts a:hover { color: var(--text-main); }


/* ─────────────────────────────────────────────────────────────
   Решения: templates/solutions/list.html и detail.html
   Каркас общий с блогом и проектами (.posts, .article, .more). Здесь только своё:
   крупные карточки решений в списке, кнопка в шапке страницы решения и блоки
   «Знакомо?», «Возможности», «Как внедряем».
   ───────────────────────────────────────────────────────────── */

.solution__lede {
  max-width: 60ch;
  margin: 16px 0 0;
  font-size: clamp(1rem, 0.3vw + 0.95rem, 1.1875rem);
  line-height: 1.6;
  color: var(--text-muted);
}

.solutions__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }

/* Карточка целиком ссылка, как в блоге и проектах. */
.solution-card { display: flex; flex-direction: column; min-width: 0; color: inherit; }
.solution-card:hover .solution-card__name { color: var(--accent); }
.solution-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 16px; }

.solution-card__name {
  margin: 20px 0 0;
  font-size: clamp(1.375rem, 0.8vw + 1.15rem, 1.875rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  transition: color 0.2s;
}

.solution__eyebrow { margin: 0 0 12px; font-size: 0.9375rem; font-weight: 600; color: var(--accent); }
.solution__cta { height: 44px; margin-top: 28px; padding: 0 24px; font-size: 0.9375rem; }

.solution__block { margin-top: 72px; }

.solution__block-title {
  margin: 0 0 28px;
  font-size: clamp(1.375rem, 0.8vw + 1.15rem, 1.875rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

/* «Знакомо?»: с чем приходят клиенты, по пункту в колонке. */
.solution__pains {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.solution__pains li { padding-top: 16px; border-top: 2px solid var(--accent); font-size: 1.0625rem; line-height: 1.55; }

/* Возможности: плитки с тонкой рамкой, без подложки. */
.solution__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.solution__feature { padding: 24px; border: 1px solid var(--border); border-radius: 16px; }

/* Как внедряем: шаги в ряд, номер «01» ставит счётчик списка. */
.solution__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.solution__step { padding-top: 16px; border-top: 1px solid var(--border); counter-increment: step; }

.solution__step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
}

.solution__item-title { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.solution__item-text { margin: 8px 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--text-muted); }

@media (max-width: 900px) {
  .solution__pains { grid-template-columns: 1fr; }

  .solution__features,
  .solution__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .solutions__grid { grid-template-columns: 1fr; gap: 32px; }
  .solution__block { margin-top: 56px; }

  .solution__features,
  .solution__steps { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────────────────────
   Правовые документы: templates/legal/document.html, ссылка на политику в форме
   заявки и строка про оферту в футере.
   ───────────────────────────────────────────────────────────── */

.legal-doc { padding-bottom: 96px; }

.lead-consent__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}

.lead-consent__link:hover { color: var(--accent); }


@media (max-width: 640px) {
  .legal-doc { padding-bottom: 64px; }
}