/*
  Azatora Premium Minimalist Design System
*/

:root {
  --border-strong: #bfbfbf;
  --hover: rgba(0, 0, 0, 0.04);
  color-scheme: light;
  /* Colors — light theme */
  --bg-main: #ffffff;
  --bg-light: #f7f7f7;
  --bg-lighter: #f0f0f0;
  /* Текст как у glimm: основной почти чёрный, приглушённый серый, без синевы. */
  --text-main: #242529;
  --text-body: #525252;
  --text-muted: #858585;
  /* Единственный акцент сайта — бренд-синий Kumo: и заливки (кнопки,
     чекбоксы, фокус, активные состояния), и текст (ссылки, наведение). */
  --accent: var(--text-main);
  --border: #ececec;
  --glass-bg: rgba(0, 0, 0, 0.03);

  /* Typography: Inter для текста, Geist Mono для кода (как у glimm). */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Кривая движения glimm: быстрый старт, мягкое торможение. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* 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: var(--bg-main);
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.1px;
  -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: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-main);
}

h1 {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  margin-bottom: 1.25rem;
}

h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin-bottom: 0.875rem;
}

h3 {
  font-size: 1.125rem;
  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 убран, перенесён в ::before, чтобы скрыть z-index: -1 */
  /* border-bottom перенесён в ::after, чтобы отрисовываться поверх выпадающего меню (z-index: -1) */
}

.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-main);
  z-index: 0;
}

.header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
  z-index: 10;
}

.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;
}

/* Навигационные ссылки в шапке на десктопе: правее логотипа. */
.nav {
  align-items: center;
  margin-left: 2.5rem;
  margin-right: auto;
}

/* Только ПРЯМЫЕ дети: внутри .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: var(--bg-main);
  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;
}

.floating-mobile-menu {
  display: none;
}

/* 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; }
}

@media (max-width: 768px) {
  .nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: auto;
    max-height: 85dvh;
    z-index: 400;
    background: var(--bg-main);
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 32px 0 96px;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15);
    border: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    margin-inline: 0;
    overflow-y: auto;
    box-sizing: border-box;
  }
  .nav.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav > a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 16px 28px;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-main);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
  }
  .nav > a:hover, .nav > a:active {
    background: var(--hover);
    color: var(--accent);
  }
  .floating-mobile-menu {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    display: flex;
    gap: 12px;
    align-items: center;
    width: max-content;
  }
  
  .floating-menu-btn {
    height: 44px;
    width: 130px;
    padding: 0 16px;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 12px;
    line-height: 1;
    font-family: inherit;
    font-weight: 500;
    font-size: 1rem;
    color: var(--text-main);
  }
  
  .burger-icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .burger-icon-bar {
    position: absolute;
    left: -3px;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background: var(--text-muted);
    transition: top .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, background .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); }
  


  .floating-contact-btn {
    height: 44px;
    min-width: 160px;
    padding: 0 24px;
    border-radius: 12px;
    font-size: 1rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  }

  /* Переключатель языка всегда виден на мобильном. */
  .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;
  }
  /* Кнопка «Связаться» в навбаре скрыта на мобильном — она теперь в плавающей панели. */
  .header-contact-btn {
    display: none;
  }
  
  /* Языковое меню на мобильном — выезжающая из-за навбара карточка. */
  .header-lang-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: calc(var(--header-offset) + 16px) 0 24px 0;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    display: flex;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.15);
    background: var(--bg-main);
    border: none;
    border-bottom: 1px solid var(--border);
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
  }
  .header-lang.open .header-lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .header-lang-menu .lang-switch-item {
    padding: 14px 24px;
    border-radius: 0;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
  }
  .header-lang-menu .lang-name-native {
    font-size: 1.125rem;
  }
  .header-lang-menu .lang-name-en {
    font-size: 0.875rem;
    margin-top: 2px;
  }
  
  .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: 100px 1.5rem 76px;
  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: 32px auto 0;
  font-size: clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
  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;
}

/* Лента «Медиа»: две карточки в ряд с квадратным кадром. Отдельный класс,
   а не правка .posts__grid: там кадр 16:10, а материалы в ленте разнородные
   и квадрат держит их в одном ритме.

   Сетка уже контейнера и стоит по центру, как заголовок и чипы над ней: на всю
   ширину две квадратные карточки вырастали до 600px, и одна занимала экран
   целиком. 820px — это карточка примерно 400px, как было при трёх колонках. */


/* Карточка целиком ссылка: кликается вся, а не только заголовок. */
.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: 12px; }

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

/* Квадрат у лент «Другие статьи» и «Другие проекты» — как в ленте «Медиа». */
.more__media {
  aspect-ratio: 1 / 1;
}

/* Тип материала над заголовком карточки: «Статья», «Проект», а у внешних ещё
   и источник со стрелкой — чтобы клик наружу не был неожиданностью. */
.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;
}

/* Ограничиваем ширину заголовков в Медиа, чтобы строки переносились раньше,
   но карточка оставалась прежней ширины. Балансируем текст для красивых строк. */
.posts--media .post__title {
  max-width: 40ch;
  text-wrap: pretty;
}

/* Для всех обложек в разделе Медиа (и на ПК, и на мобильных) используем квадратный формат */
.posts--media .post__media {
  aspect-ratio: 1 / 1;
}

/* Подзаголовок (excerpt): скрыт в плитке, виден только в режиме списка. */
.post__summary {
  display: none;
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}

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

/* Строка метаданных (дата + тип): одна строка flex, выровнены по вертикали. */
.post__meta {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 8px;
}

.post__meta .post__text {
  margin-top: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text-muted);
}

.post__meta .post__kind {
  display: flex;
  align-items: center;
  margin-top: 0;
  margin-left: 6px;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text-muted);
}

.post__meta .post__kind::before {
  content: "·";
  margin-right: 6px;
  color: var(--text-muted);
}

/* Фильтр по рубрикам и переключатель вида. */
.filter-bar {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 2.5rem;
}

.chip-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}

.layout-toggle {
  display: inline-flex;
  flex-shrink: 0;
  background: var(--kumo-fill);
  border-radius: 9999px;
  padding: 4px;
  gap: 4px;
  height: 40px; /* Явно задаем высоту, чтобы совпадало с чипами */
}

.layout-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--kumo-fill-text);
  border-radius: 9999px;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.layout-toggle__btn:hover { color: var(--text-main); }
.layout-toggle__btn.is-active {
  background: var(--bg-main);
  color: var(--text-main);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* По образцу Badge у Kumo: заливка вместо контура, полное скругление,
     мелкий текст средней жирности. Отступы крупнее их: у Kumo метка не
     кликается, а наш чип — ссылка-фильтр, ей нужна цель под палец. */
  height: 40px;
  padding: 0 16px;
  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, transform 0.16s var(--ease-out);
}

.chip { background: var(--bg-lighter); color: var(--text-body); }
.chip:hover { color: var(--text-main); background-color: #e6e6e6; }
.chip.is-active { color: var(--bg-main); background: var(--text-main); }

/* ── Список ───────────────────────────────────────────────────────────
   Альтернативный вид для .posts__grid. Показывается только на десктопе. */
@media (min-width: 901px) {
  /* Сужаем весь контейнер раздела Медиа, чтобы и плитка, и список смотрелись аккуратно и компактно. */
  .posts--media {
    max-width: 840px;
    transition: max-width 0.3s ease;
  }

  .posts--list .posts__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .posts--list .post {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 0 20px;
    align-items: stretch;
    padding: 32px 0;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
  }
  .posts--list .post:last-child {
    border-bottom: none;
  }

  .posts--list .post:hover {
    border-color: var(--border);
  }

  .posts--list .post__media {
    grid-column: 1;
    grid-row: 1 / 4;
    margin: 0;
    margin-right: 12px;
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
  }

  .posts--list .post__title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 1.375rem;
    line-height: 1.35;
    align-self: start;
    max-width: 35ch;
  }

  .posts--list .post__summary {
    display: block;
    grid-column: 2;
    grid-row: 2;
    margin: 18px 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 50ch;
    /* Обрезаем длинные подзаголовки до 4-х строк */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* .post__meta занимает в сетке место .post__kind и .post__text, которые теперь внутри неё. */
  .posts--list .post__meta {
    grid-column: 2;
    grid-row: 3;
    margin: 0;
    align-self: end;
  }

  .posts--list .post__meta .post__text,
  .posts--list .post__meta .post__kind {
    font-size: 0.9375rem;
  }
}

/* ── Список (мобилка) ─────────────────────────────────────────────────
   Компактные горизонтальные карточки: маленькая превью слева, текст справа.
   Подзаголовок скрыт — на мобилке места мало, достаточно заголовка и меты. */
@media (max-width: 900px) {
  .posts--list .posts__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .posts--list .post {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-rows: 1fr auto;
    gap: 0 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
  }
  .posts--list .post:last-child {
    border-bottom: none;
  }

  .posts--list .post__media {
    grid-column: 1;
    grid-row: 1 / 3;
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    border-radius: 10px;
    align-self: center;
  }

  .posts--list .post__title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
    align-self: start;
  }

  /* На мобилке подзаголовок скрыт: карточка компактная, места нет. */
  .posts--list .post__summary {
    display: none;
  }

  .posts--list .post__meta {
    grid-column: 2;
    grid-row: 2;
    margin: 6px 0 0;
    align-self: end;
  }

  .posts--list .post__meta .post__text,
  .posts--list .post__meta .post__kind {
    font-size: 0.8125rem;
  }
}
.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__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: 12px;
  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);
}

/* Оглавление — правый сайдбар той же ширины, что левый (--sidebar-w), от верха до низа
   окна. Колонка текста при ширине от 1280px не заходит под него: справа от неё остаётся
   место под сайдбар. Ниже 1280px сайдбара нет, и оглавление стоит над текстом. */
@media (min-width: 1280px) {
  /* С классом статьи: базовое правило .article__toc-rail (margin-bottom: 32px) идёт
     ниже и иначе перебивает этот сброс, а фиксированный сайдбар поднимается на 32px. */
  .article__reading .article__toc-rail {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: var(--sidebar-w);
    margin: 0;
    /* Слева без отступа: пункты оглавления прижаты к левому краю сайдбара. */
    padding: calc(var(--header-offset) + 24px) 24px 32px 0;
    background: var(--bg-main);
    box-sizing: border-box;
    z-index: 100;
    overflow-y: auto;
  }

  .article__toc-rail .article__toc {
    position: static;
  }
}

/* Оглавление материала. Узкие экраны: обычный блок над текстом. Широкие: колонка
   слева, вплотную к тексту (см. блок 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(--text-main); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px;
           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); }

/* Другие статьи: маленькие карточки, дорога обратно в блог, а не второй список.
   Блок той же ширины, что лента «Медиа» (820px по центру): на всю ширину
   контейнера карточки читались как второй список под статьёй, а когда материал
   находился один — он сиротливо висел у левого края полосы в 1232px.
   Колонок три: столько карточек блок и показывает, и все три должны вставать
   в ряд. Карточка от этого мельче ленты — так и надо, это дорога дальше,
   а не сама лента. */
.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(4, minmax(0, 1fr)); gap: 16px; }
/* На компьютере обёртки как бы нет: карточки прямые ячейки сетки. Настоящий блок
   она получает только в ленте на телефоне. */
.more__track { display: contents; }
.more__card { display: flex; flex-direction: column; min-width: 0; color: inherit; }

.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 48px; }
  .page-head__title { font-size: 2.25rem; }
  .page-head__lede { margin-top: 16px; max-width: 28ch; text-wrap: balance; }
  .posts--top { padding-top: 48px; }
  .posts { padding-bottom: 64px; }
  .posts__grid { grid-template-columns: 1fr; gap: 28px; }
  .article { padding-top: 32px; }
  .article__cover { aspect-ratio: 16 / 9; }
  .prose { font-size: 1rem; }
  .more { padding: 48px 1.5rem 64px; }
}

/* ─────────────────────────────────────────────────────────────
   Форма заявки «Связаться»: страница /application/
   Визуальный язык взят у Onlink (карточка 16px).
   ───────────────────────────────────────────────────────────── */

.lead-page {
  width: 100%;
}

.lead-page__body {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 1.5rem 96px;
}

.lead-page__body .lead-form {
  margin-top: 0;
}

.lead-page__body--actions {
  display: flex;
  justify-content: center;
}

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

/* Поле телефона (static/vendor/intl-tel-input) красится через свои переменные. */
.lead-form {
  --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);

  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;
  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 {
  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); }

.lead-field .iti { display: block; width: 100%; }

.lead-form .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-form .iti__country-list { max-height: 240px; }

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

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

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

@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;
  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));
}

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


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

.company__photo {
  width: 100%;
  /* По ширине текстовой колонки под ней: так фото и текст стоят одним блоком,
     а не двумя полосами разной ширины. На планшете и телефоне фото разворачивается
     во всю ширину экрана, см. медиазапросы ниже. */
  max-width: var(--reading-width);
  margin-inline: auto;
  /* 16:9 — при ширине текстовой колонки фото получает достаточно высоты,
     чтобы не выглядеть сплюснутой полосой.
     На планшете и телефоне свои пропорции, см. медиазапросы ниже. */
  aspect-ratio: 16 / 9;
  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: 12px;
  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);
}

/* Одна колонка, карточки шириной ~50% контейнера, выровнены по центру. */
.solutions__list { display: flex; flex-direction: column; align-items: center; gap: 40px; }

/* Страница решений: шапка есть, поэтому posts без --top не нужен отступ сверху */
.posts--solutions { padding-top: 0; }

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

.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; }

/* Возможности: плитки с тонкой рамкой, без подложки. Две колонки с общим отступом
   24px, как у шагов ниже: границы колонок совпадают, блоки стоят на одной сетке. */
.solution__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

/* Как внедряем: шаги в две колонки той же сетки, что и «Возможности». Номер «01»
   ставит счётчик списка. */
.solution__steps {
  display: grid;
  grid-template-columns: repeat(2, 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) {
  .solution-card { max-width: 100%; }
  .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; }
}

/* ── Полоса сверху (ПК): плавное размытие ───────────────────────
   Полоса от края боковой панели до правого края окна, без содержимого и без
   разделителя. Размытие сделано слоями: каждый слой — backdrop-filter с
   градиентной маской, так что сила размытия и непрозрачность плавно падают вниз,
   а не обрываются жёсткой кромкой. Так делают прогрессивное размытие
   (см. обсуждение в CSS-сообществе: слои с разным blur и mask-image).

   Слои — псевдоэлементы, а не вложенные блоки: родитель без backdrop-filter,
   иначе он стал бы «корнем» размытия, и слои не видели бы контент позади.
   pointer-events: none — полоса не должна перехватывать клики по контенту. */
.topstrip {
  display: none;
}

@media (min-width: 1024px) {
  .topstrip {
    display: block;
    position: fixed;
    top: 0;
    /* От левого края окна до правого: полоса идёт под сайдбаром, а логотип
       в сайдбаре стоит по её центру. Полоса ниже сайдбара (z 90 < 100), поэтому
       логотип остаётся чётким, а то, что под ним, размывает сам сайдбар. */
    left: 0;
    right: 0;
    height: var(--header-h);
    z-index: 90;
    pointer-events: none;
    /* Подложка почти прозрачная и тает ступенями по кривой, а не линейно:
       линейный переход давал видимую «полосу» там, где он заканчивался. */
    background: linear-gradient(
      to bottom,
      var(--bg-main) 0%,
      color-mix(in srgb, var(--bg-main) 88%, transparent) 20%,
      color-mix(in srgb, var(--bg-main) 62%, transparent) 42%,
      color-mix(in srgb, var(--bg-main) 32%, transparent) 64%,
      color-mix(in srgb, var(--bg-main) 10%, transparent) 84%,
      transparent 100%
    );
  }

  /* Два слоя размытия, оба слабые. Маски с несколькими опорными точками дают
     плавное затухание (ease), без жёсткого края. */
  .topstrip::before,
  .topstrip::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  .topstrip::before {
    height: var(--header-h);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.3) 65%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.3) 65%, transparent 100%);
  }

  .topstrip::after {
    height: 28px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.3) 65%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.3) 65%, transparent 100%);
  }
}

/* ── Десктоп: навигация колонкой слева ───────────────────────────
   От 1024px шапка становится боковым меню: логотип сверху, пункты столбиком,
   сразу под ними переключатель языка, внизу «Связаться». Меню — полупрозрачная
   панель с размытием поверх контента: то, что проезжает под ней при прокрутке,
   размывается и уходит.

   Центрирование идёт по всему окну, а не по области справа от меню: иначе
   контент никогда не заходил бы под панель. Планшет и телефон (до 1023px)
   остаются на верхней шапке — этот блок их не касается. */
@media (min-width: 1024px) {
  :root {
    --sidebar-w: 15rem;
    /* Полоса сверху на ПК ниже, чем шапка на телефоне (58px): 48px. Переменная
       общая, поэтому логотип в сайдбаре и отступ контента считаются от неё сами. */
    --header-h: 54px;
    /* Контент начинается под полосой, а не залезает в неё. */
    --header-offset: calc(var(--header-h) + 1px);
  }

  .header {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: var(--sidebar-w);
    /* Сплошной фон, без размытия: контент страницы под сайдбар не заходит, а
       полупрозрачный фон с размытием давал ещё темнее по краю (#131313 против
       #141414 страницы), и граница была видна в тёмной теме. */
  }

  .header::before {
    /* background-color, а не background: в тёмной теме сплошной фон через
       shorthand рисовался на 1 единицу темнее страницы, и граница была видна. */
    background-color: var(--bg-main);
  }

  /* Разделителя у панели нет: граница отделяла бы её от контента, а контент
     должен уходить под неё. */
  .header::after {
    display: none;
  }

  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    box-sizing: border-box;
    padding: 28px 24px 32px;
    gap: 0;
  }

  /* Логотип в сайдбаре — на прежнем месте, сверху с отступом 28px. Вертикально
     он не привязан к полосе сверху. */
  .nav-logo {
    top: 0;
    align-self: flex-start;
  }

  /* Пункты меню столбиком. Базовое правило уводит .nav по центру шапки и
     абсолютным позиционированием — здесь он просто часть колонки. */
  .nav {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    margin: 48px 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
  }

  /* Пункты как в glimm: просто текст, без плашек. Активный — тёмный и
     чуть жирнее, остальные серые; шаг между строками около 32px. */
  .nav > a {
    display: block;
    padding: 4px 0;
    border-radius: 0;
    font-size: 15px;
    line-height: 23px;
    letter-spacing: -0.1px;
    color: var(--text-muted);
  }

  .nav > a:hover,
  .nav > a:active {
    background: none;
    color: var(--text-main);
  }

  /* Группа без своей страницы («Решения»): подпись, не ссылка. */
  .nav-group {
    display: block;
    padding: 4px 0;
    font-size: 15px;
    line-height: 23px;
    color: var(--text-muted);
  }

  /* Подпункты: мельче основных пунктов и с отступом, как у вложенного списка. */
  /* Подпункты выровнены по левому краю основных пунктов, без отступа. */
  .nav-sub {
    display: flex;
    flex-direction: column;
    margin: 0 0 10px;
  }

  /* Номер перед подпунктом: 01, 02… — сквозной по всему меню. */
  .nav-num {
    display: inline-block;
    min-width: 1.6em;
    margin-right: 4px;
    font-variant-numeric: tabular-nums;
    opacity: 0.6;
  }

  .nav-sub a {
    display: block;
    padding: 3px 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--text-muted);
  }

  .nav-sub a:hover {
    color: var(--text-main);
  }

  .nav-sub a[aria-current="page"] {
    color: var(--text-main);
    font-weight: 500;
  }

  .nav > a[aria-current="page"] {
    background: none;
    color: var(--text-main);
    font-weight: 500;
  }

  /* Переключатели языка и темы в сайдбаре — голые значки, без рамки и фона. */
  .header-lang-btn,
  .theme-toggle {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .header-lang-btn:hover,
  .theme-toggle:hover {
    background: var(--bg-lighter);
  }

  /* Кнопки шапки становятся прямыми детьми колонки: язык идёт сразу под
     последним пунктом меню, «Связаться» прижимается к низу. */
  .header-actions {
    display: contents;
  }

  .header-tools {
    align-self: flex-start;
    margin-top: 16px;
    /* Значки без рамки: сдвиг, чтобы их край совпадал с текстом пунктов. */
    margin-left: -8px;
  }

  /* Список языков раскрывается вниз, от кнопки. */
  .header-lang-menu {
    top: calc(100% + 10px);
    bottom: auto;
    left: 0;
    transform: none;
  }

  .header-contact-btn {
    align-self: stretch;
    margin-top: auto;
  }

  /* Контент по центру окна. Отступ симметричный: слева он не даёт тексту зайти
     под сайдбар, справа уравновешивает его, поэтому центр области совпадает
     с центром окна. Полоса сверху размывает страницу, сайдбар её не перекрывает. */
  body {
    /* Сдвиг контента вправо на --content-shift: левый отступ больше на него,
       правый меньше на него. Центр области уходит вправо, сайдбар не задевается. */
    --content-shift: 0px;
    padding-left: calc(var(--sidebar-w) + var(--content-shift));
    padding-right: calc(var(--sidebar-w) - var(--content-shift));
  }
}

/* Код: Geist Mono и подложка как у glimm (#f0f0f0, радиус 3px). */
code, kbd, pre, samp {
  font-family: var(--font-mono);
}

code {
  font-size: 0.8125rem;
  background: var(--bg-lighter);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ── Движение как у glimm ─────────────────────────────────────────
   Карточки и блоки появляются с размытием и каскадом (кривая --ease-out).
   Кнопки и чипы при нажатии чуть уменьшаются. Всё отключается при
   prefers-reduced-motion. */
@keyframes glimm-fade-in {
  0% { opacity: 0; filter: blur(8px); }
  100% { opacity: 1; filter: blur(0); }
}

.post,
.more__card,
.solution-card {
  animation: glimm-fade-in 0.42s var(--ease-out) both;
}

.post:nth-child(2), .more__card:nth-child(2), .solution-card:nth-child(2) { animation-delay: 60ms; }
.post:nth-child(3), .more__card:nth-child(3), .solution-card:nth-child(3) { animation-delay: 120ms; }
.post:nth-child(4), .more__card:nth-child(4), .solution-card:nth-child(4) { animation-delay: 180ms; }
.post:nth-child(5), .more__card:nth-child(5), .solution-card:nth-child(5) { animation-delay: 240ms; }
.post:nth-child(6), .more__card:nth-child(6), .solution-card:nth-child(6) { animation-delay: 300ms; }

.btn-primary,
.chip,
.header-contact-btn {
  transition-property: color, background-color, box-shadow, transform;
  transition-duration: 0.2s;
  transition-timing-function: var(--ease-out);
}

.btn-primary:active,
.chip:active,
.header-contact-btn:active {
  transform: scale(0.96);
  transition-duration: 60ms;
}

@media (prefers-reduced-motion: reduce) {
  .post,
  .more__card,
  .solution-card {
    animation: none;
  }

  .btn-primary:active,
  .chip:active,
  .header-contact-btn:active {
    transform: none;
  }
}

/* ── ПК: меньший отступ от полосы сверху до контента ─────────────
   Верхние отступы страниц рассчитаны на мобильную шапку и крупные заголовки.
   Под полосой 48px они смотрелись пустотой, поэтому на десктопе сокращаем. */
@media (min-width: 1024px) {
  .page-head { padding-top: 40px; }
  .section--top { padding-top: 1.5rem; }
  .posts--top { padding-top: 40px; }
  .article { padding-top: 24px; }
}

/* ── ПК: футер от края сайдбара до края окна ─────────────────────
   Линия и фон футера начинаются у правого края сайдбара и тянутся до края окна,
   независимо от ширины содержимого. Отступ body справа (ширина сайдбара) футер
   перекрывает отрицательным margin. Содержимое центрируется в этой области, а не
   сдвигается: иначе левая колонка уходила бы под сайдбар. */
@media (min-width: 1024px) {
  /* Футер по-прежнему от правого края сайдбара до края окна: компенсируем
     тот же сдвиг, что и у контента. */
  .site-footer {
    margin-left: calc(-1 * var(--content-shift));
    margin-right: calc(-1 * (var(--sidebar-w) - var(--content-shift)));
  }
}

/* ── Тёмная тема ─────────────────────────────────────────────────
   Цвета задаются токенами. Без выбора пользователя тема следует системе; выбор
   кнопкой в шапке (data-theme на <html>) важнее системы. Кнопки Kumo остаются
   синими в обеих темах. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg-main: #141414;
  --bg-light: #1b1b1b;
  --bg-lighter: #242424;
  --text-main: #f0f0f0;
  --text-body: #c2c2c2;
  --text-muted: #8a8a8a;
  --border: #2c2c2c;
  --border-strong: #3a3a3a;
  --hover: rgba(255, 255, 255, 0.06);
  --glass-bg: rgba(255, 255, 255, 0.04);
  --kumo-line-solid: #2c2c2c;
  --kumo-tint: #1f1f1f;
  --kumo-overlay: #1f1f1f;
  --kumo-recessed: #1a1a1a;
  --kumo-fill: #2a2a2a;
  --kumo-fill-text: #e6e6e6;
  --kumo-hairline: #333333;
  --kumo-contrast: #e6e6e6;
  --kumo-focus: #e6e6e6;
  --kumo-placeholder: #666666;
  color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg-main: #141414;
  --bg-light: #1b1b1b;
  --bg-lighter: #242424;
  --text-main: #f0f0f0;
  --text-body: #c2c2c2;
  --text-muted: #8a8a8a;
  --border: #2c2c2c;
  --border-strong: #3a3a3a;
  --hover: rgba(255, 255, 255, 0.06);
  --glass-bg: rgba(255, 255, 255, 0.04);
  --kumo-line-solid: #2c2c2c;
  --kumo-tint: #1f1f1f;
  --kumo-overlay: #1f1f1f;
  --kumo-recessed: #1a1a1a;
  --kumo-fill: #2a2a2a;
  --kumo-fill-text: #e6e6e6;
  --kumo-hairline: #333333;
  --kumo-contrast: #e6e6e6;
  --kumo-focus: #e6e6e6;
  --kumo-placeholder: #666666;
  color-scheme: dark;
}

/* Кнопка темы: значок луны в светлой, солнца в тёмной. */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* Языки и тема — одной группой: в шапке, на ПК в сайдбаре под ссылками. */
.header-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Подпункты меню на планшете (769–1023px) — верхняя полоса без места под вложенный
   список: там их прячем. Пункты «Решения» остаются подписью без перехода. */
@media (min-width: 769px) and (max-width: 1023px) {
  .nav-sub {
    display: none;
  }
}

/* Мобильная шторка: подпункты по центру, как и основные пункты. */
@media (max-width: 768px) {
  .nav-group {
    display: block;
    padding: 16px 28px 8px;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--text-muted);
  }

  .nav-sub {
    align-items: center;
    margin: 0 0 8px;
  }

  .nav-sub a {
    padding: 10px 28px;
    font-size: 0.9375rem;
    text-align: center;
  }
}

/* ── Страница контактов (/contact/) ─────────────────────────────── */
.contact {
  max-width: 36rem;
  margin: 0 auto;
  padding: 0 1.5rem 96px;
  text-align: center;
  color: var(--text-body);
  font-size: 1rem;
  line-height: 1.6;
}

.contact__list,
.contact__socials {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 0 32px;
  list-style: none;
}

.contact__list a { font-size: 1.125rem; color: var(--text-main); }
.contact__list a:hover { color: var(--accent); }

.contact__sub {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.contact__address { margin: 0 0 32px; }

.contact__socials a { color: var(--text-main); }
.contact__socials a:hover { color: var(--accent); }

.contact__badge { display: flex; justify-content: center; margin-bottom: 32px; }

.contact__copy { margin: 0; font-size: 0.8125rem; color: var(--text-muted); }

/* Конец статьи: отступ снизу, чтобы последний раздел мог подняться к верху экрана
   при переходе по оглавлению (иначе страница упирается в низ раньше). Отступ — 40%
   высоты экрана: последний раздел поднимается почти до верха, а пустоты меньше. */
.article--reading {
  padding-bottom: 20vh;
}

/* ── Отладка вёрстки ─────────────────────────────────────────────
   Кнопка видна только при DEBUG. Включённый режим подсвечивает ярко-зелёными контурами
   сайдбары, полосу сверху и контейнеры, чтобы было видно, где что стоит. */
.debug-toggle {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 400;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--bg-main);
  color: var(--text-main);
  font: 500 12px/1 var(--font-family);
  cursor: pointer;
}

html.debug-lines .header,
html.debug-lines .sidebar-right,
html.debug-lines .topstrip,
html.debug-lines .article__toc-rail,
html.debug-lines .container,
html.debug-lines .article__reading,
html.debug-lines .page-head,
html.debug-lines .posts,
html.debug-lines .hero,
html.debug-lines .company,
html.debug-lines .lead-page,
html.debug-lines .legal-doc,
html.debug-lines .nav-sub,
html.debug-lines .nav-group,
html.debug-lines .nav > a {
  outline: 1px solid #b6ff00;
  outline-offset: -1px;
}

/* Разделы «Обзора»: по подпунктам меню. Якорь не уходит под шапку. */
.overview-section {
  margin-top: 48px;
  scroll-margin-top: calc(var(--header-offset) + 24px);
}

.overview-section__title {
  margin: 0 0 16px;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text-main);
}

.overview-section p {
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-body);
}

/* ── Страница решения: центр ───────────────────────────────────── 
   Колонка 60rem по центру, как обложка и фото на других страницах. Заголовок и кнопка
   по центру, размер заголовка поменьше. */
/* Как на «Обзоре»: обложка 60rem, текст и блоки в колонке 43rem по центру. */
.solution {
  max-width: 60rem;
}

.solution__head,
.solution__block {
  max-width: var(--reading-width);
  margin-inline: auto;
}

.solution .article__title {
  font-size: clamp(1.625rem, 0.9vw + 1.25rem, 2.125rem);
}

.solution__head .solution__lede {
  margin-inline: auto;
}

.solution__cta {
  display: flex;
  width: max-content;
  margin-inline: auto;
}

/* Пустой правый сайдбар на ПК: зеркало левого, та же ширина и фон. */
.sidebar-right {
  display: none;
}

@media (min-width: 1024px) {
  .sidebar-right {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: var(--bg-main);
    z-index: 100;
  }
}