/* ==========================================================================
   ALTYN — Base styles
   Строится поверх styles/tokens.css. Мобайл-фёрст, компоненты переиспользуются
   на index.html и about.html (шапка, футер).
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
  color: var(--color-text-primary);
  background: var(--color-bg);
}

img {
  max-width: 100%;
  display: block;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h3,
h4 {
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

p {
  margin: 0;
}

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ==========================================================================
   Шапка
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-gray-300);
}

.site-header__inner {
  /* Не использует .container — шапка растягивается на всю ширину окна,
     без max-width, с фиксированным (не токенным) отступом 56px. */
  width: 100%;
  display: flex;
  align-items: center;
  /* Логотип и меню группируются у левого края с фиксированным зазором
     80px между ними (не токен, по прямому запросу), вместо разведения
     по краям. На мобильном (≤640px, см. медиа-запрос ниже) меню
     сворачивается в бургер — там нужно наоборот развести по краям,
     поэтому justify-content/gap переопределены обратно на space-between. */
  justify-content: flex-start;
  /* gap — шорткат row-gap column-gap: 80px нужен только как горизонтальный
     зазор логотип↔меню (column-gap). Если задать одним числом, тот же
     80px становится и вертикальным зазором между строками при переносе
     (flex-wrap), когда .main-nav не помещается рядом с логотипом (около
     768px) — визуально гигантский отступ вместо ожидаемых 24px. row-gap
     явно задан через --space-md, чтобы перенос использовал обычный
     внутренний ритм шапки, а не горизontal-специфичное число. */
  gap: var(--space-md) 80px;
  min-height: var(--header-height);
  padding-block: var(--space-sm);
  padding-inline: 56px;
  flex-wrap: wrap;
}

.logo {
  display: inline-flex;
  align-items: center;
}

.logo__image {
  height: 32px;
  width: auto;
}

.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.main-nav a {
  /* Литералом, без var() и без адаптации на мобильном — UI-элементы
     навигации не ужимаются на мобиле вместе с body-текстом. */
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  padding-block: 4px;
  transition: color 0.18s ease; /* было 0.15s — на 20% медленнее */
}

/* Ховер шапки отличается от футера: в покое все пункты primary; при наведении
   на навигацию остальные пункты светлеют до secondary, а наведённый остаётся
   primary — .main-nav a:hover ниже той же специфичности (0,2,1), но объявлен
   позже, поэтому перебивает общее затемнение именно для наведённого пункта. */
.main-nav:hover a {
  color: var(--color-text-secondary);
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--color-text-primary);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: var(--color-text-primary);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header.is-open .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header.is-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.site-header.is-open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Компоненты — Badge
   Переиспользуемый компонент: .badge--xs задаёт структуру (размер, форму,
   типографику), .badge--neutral — цвет. Применяются вместе:
   .badge.badge--xs.badge--neutral. Новый размер/цвет — новый модификатор
   рядом, .badge--xs/--neutral не трогать.
   ========================================================================== */

.badge--xs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 3px 4px 3px;
  border-radius: 64px;
  font-size: 10px;
  line-height: 8px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.3px;
  text-transform: lowercase;
}

.badge--neutral {
  background: var(--color-gray-300);
  color: var(--color-gray-600);
}

/* ==========================================================================
   Компоненты — Caption
   Только типографика (размер, начертание, межстрочный/межбуквенный
   интервал) — без цвета и фона. Цвет наследуется от родителя или задаётся
   отдельно там, где класс используется.
   ========================================================================== */

.caption {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-xs);
  line-height: var(--line-height-body-xs);
  letter-spacing: 0.84px; /* 7% от 12px из Figma — letter-spacing не поддерживает % */
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  min-height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
  padding-top: var(--space-header-gap);
  padding-bottom: var(--space-2xl);
}

.hero__inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

.hero__title {
  max-width: 760px;
  font-size: var(--font-size-hero-title);
  line-height: var(--line-height-hero-title);
  color: var(--color-text-primary);
}

.hero__subtitle {
  max-width: 620px;
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-subtitle);
  color: var(--color-text-secondary);
}

.hero__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  max-width: 100%;
  /* Контейнер hero_media в оригинале Figma — 1104×528px. Соотношение сторон
     задано именно под эту рамку, чтобы точные % из дизайна легли без искажений.
     Ширина не задана явно — flex-grow отдаёт блоку всё оставшееся по вертикали
     место в hero после заголовка/подзаголовка, а aspect-ratio выводит из него
     ширину; max-width подстраховывает, чтобы не вылезти за контейнер страницы. */
  aspect-ratio: 1104 / 528;
  margin-inline: auto;
}

.hero__layer {
  position: absolute;
  width: var(--w);
  height: var(--h);
  left: var(--x);
  top: var(--y);
  transition: transform 0.2s ease-out;
}

.hero__layer--desk {
  --w: 33.31%;
  --h: 74.5%;
  --x: 48.36%;
  --y: 19.53%;
  z-index: 1;
}

.hero__layer--phone {
  --w: 37.5%;
  --h: 91.29%;
  --x: 35.87%;
  --y: 6.25%;
  z-index: 2;
}

.hero__layer--coin {
  --w: 28.88%;
  --h: 68.7%;
  --x: 18.6%;
  --y: 17.44%;
  z-index: 3;
}

/* ==========================================================================
   Карточки услуг
   ========================================================================== */

.cards__grid {
  margin-top: var(--section-heading-gap);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-xl); /* 48px — десктоп, переопределяется на 1024/640px ниже */
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Без фиксированной пропорции — высота идёт от контента. .cards__grid
     растягивает элементы грида по умолчанию (align-items: stretch), поэтому
     height:100% дотягивает каждую карточку до высоты самой высокой в ряду. */
  height: 100%;
  /* Паддинги асимметричные: сверху меньше, чем по остальным сторонам —
     см. переопределения по брейкпоинтам ниже (та же логика на планшете/моб.). */
  padding-top: var(--space-lg);
  padding-inline: var(--space-xl);
  padding-bottom: var(--space-xl);
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
  transition: transform 0.15s ease;
}

/* Скоуплю через тег a — карточки на главной странице кликабельны (ссылки),
   а на about.html («Конкурентные преимущества») это простые div без
   действия, ховер-эффект им не нужен. */
a.card:hover,
a.card:focus-visible {
  transform: scale(1.03);
}

.card__icon {
  width: 80px;
  height: 80px;
  display: block;
  object-fit: contain;
}

.card__icon--cover {
  object-fit: cover;
}

.card__icon--tilt {
  transform: rotate(-6.7deg);
}

.card__title {
  margin-top: var(--card-icon-title-gap);
  font-size: var(--font-size-card-title);
  line-height: var(--line-height-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-align: center;
}

/* Вариант для блока «Конкурентные преимущества» на about.html — тот же
   токен, что у .hero__subtitle/.about-hero__lede/.governance__name.
   Медиа-запрос не нужен: --font-size-subtitle/--line-height-subtitle сами
   адаптируются (18/26 на десктопе и планшете одинаково, 16/24 мобиль). */
.card__title--sm {
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-subtitle);
}

.card__description {
  margin-top: var(--card-title-desc-gap);
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
  color: var(--color-text-secondary);
  text-align: center;
}

/* ==========================================================================
   Контентные секции (Межбанк / Юрлица / Приложение)
   ========================================================================== */

.section {
  /* padding-top отдельно от padding-bottom (своя прогрессия по прямому
     запросу: 80/56/32 — не совпадает со шкалой --space-*, задано числом). */
  padding-top: 80px;
  padding-bottom: var(--space-xl);
  scroll-margin-top: 88px;
}

/* Переиспользуемый модификатор для «секций-одиночных feature-card» —
   сейчас #mezhbank/#legal-entities/#app, в будущем любые похожие блоки
   на любой странице. Убирает padding-block самой секции (её роль здесь
   чисто семантическая/якорная — реальное визуальное наполнение и так уже
   с отступами внутри .feature-card__content) и вместо этого задаёт
   совокупный отступ между СОСЕДНИМИ такими секциями через margin-top на
   смежном селекторе — одно число на брейкпоинт, без сложения padding
   с двух сторон. Чтобы получить этот отступ между двумя блоками, обоим
   достаточно добавить класс .section--feature. */
.section--feature {
  padding-block: 0;
}

.section--feature + .section--feature {
  margin-top: var(--space-xl); /* 48px — десктоп, переопределяется на 1024/640px ниже */
}

/* Точечно уменьшаем зазор именно между #services и #mezhbank до 48px
   суммарно (по 24px с каждой стороны, было 48+48=96px) — остальные стыки
   между секциями (.section, 48px с каждой стороны) не трогаем. Работает
   на всех брейкпоинтах, включая мобильный (там у .section было 32px). */
#services {
  padding-bottom: var(--space-md);
}

#mezhbank {
  padding-top: var(--space-md);
}

.section__title {
  font-size: var(--font-size-heading-3);
  line-height: var(--line-height-heading-3);
  color: var(--color-text-primary);
}

.section__lede {
  max-width: 720px;
  margin-top: var(--content-heading-gap);
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
  color: var(--color-text-secondary);
}

.section__text + .section__text {
  margin-top: var(--content-paragraph-gap);
}

/* ==========================================================================
   Feature-card — горизонтальная карточка секций Межбанк / Юрлица / Приложение
   ========================================================================== */

.feature-card {
  display: flex;
  align-items: stretch;
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* Модификатор для блоков, где иллюстрация вылезает за край карточки
   (bleed) — см. .feature-card--bleed .feature-card__media--illustration
   ниже. position:relative здесь нужен, чтобы right у неё отсчитывался
   от этой карточки, а не от секции. Переиспользуемый паттерн для будущих
   похожих блоков (сейчас применён только к #mezhbank). */
.feature-card--bleed {
  position: relative;
}

/* Модификатор для блоков с крупным скриншотом устройства (сейчас — #app).
   .feature-card__content короче картинки телефона (после увеличения на
   20%), align-items:stretch растягивал текстовый блок вровень с ней —
   т.к. у .feature-card__content нет своего фона, это визуально ничего не
   меняло (лишнее место просто «снаружи» блока смотрится так же, как
   «внутри» его padding). center вместо stretch реально делит лишнее место
   пополам — часть уходит НАД заголовок, часть остаётся ПОД кнопкой, то
   есть зазор под кнопкой уменьшается вдвое. Сбрасываю на ≤640px — там
   .feature-card становится колонкой, и align-items начинает управлять
   шириной, а не вертикалью. */
.feature-card--device {
  align-items: center;
}

.feature-card__content {
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  /* padding-top задан отдельным токеном контентного ритма (меняется по
     брейкпоинтам независимо от padding-bottom, у которого своя логика —
     см. переопределения padding-bottom по брейкпоинтам ниже). */
  padding-top: var(--content-top-padding);
  padding-bottom: var(--space-xl);
  padding-inline: var(--space-xl);
}

/* Раз иллюстрация в bleed-варианте не в потоке (position:absolute),
   текстовая колонка не должна расползаться на всю ширину карточки —
   fix-нём на прежние ~55%, как было при flex-соседстве с картинкой. */
.feature-card--bleed .feature-card__content {
  flex-grow: 0;
}

.feature-card__media {
  flex: 1 1 45%;
  min-width: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: 2px dashed var(--color-gray-500);
}

/* Общая база для готовых (не плейсхолдерных) иллюстраций feature-card —
   единое правило для блоков типа #mezhbank/#legal-entities (текст +
   картинка, без спецэффектов). 557×557 — логический размер для retina
   @2x-исходников. Переопределяется модификаторами .feature-card--bleed
   (картинка вылезает за край) и .feature-card--device (крупный скриншот
   устройства) ниже — под свои пропорции и позиционирование. */
.feature-card__media.feature-card__media--illustration {
  align-self: center;
  min-width: 0;
  border: none;
  background: transparent;
  max-width: 557px;
  aspect-ratio: 1 / 1;
}

/* Bleed-вариант (сейчас — #mezhbank, assets/mezhbank-illustration.png):
   картинка вылезает за правый край карточки — position:absolute +
   отрицательный right, вертикаль центрируется через top:50%/translateY,
   как и было при align-self:center. overflow:hidden + border-radius на
   .feature-card--bleed обрезают лишнее по уже скруглённому углу, без
   острых артефактов. */
.feature-card--bleed .feature-card__media--illustration {
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  width: 45%;
}

/* Device-вариант (сейчас — #app, assets/mobile.png, 1384×1384 логически —
   нет подтверждения, что это @2x-исходник, поэтому используем реальный
   размер файла без деления пополам). Вертикальный сдвиг: картинка
   опускается на 1/4 своей высоты и уходит за нижний край — обрезает
   overflow:hidden на .feature-card (тот же механизм, что и у
   горизонтального bleed выше). */
.feature-card--device .feature-card__media--illustration {
  max-width: 1384px;
  transform: translateY(25%);
}

/* Картинка телефона в #app увеличена на ~20% относительно остальных
   блоков — осознанное исключение. Вместо transform:scale() (которое
   вызвало бы обрезку по бокам/сверху через overflow:hidden на
   .feature-card) перераспределяем сами колонки строки: медиа-колонка
   растёт с 45% до 54% (×1.2), текстовая сжимается с 55% до 46%, сумма
   остаётся 100% — картинка становится больше без обрезки. */
.feature-card--device .feature-card__content {
  flex: 1 1 46%;
}

.feature-card--device .feature-card__media--illustration {
  flex: 1 1 54%;
  /* align-self:flex-start перебивает align-items:center у .feature-card--device
     (см. выше) — картинка должна сидеть от верха карточки на фиксированном
     отступе, а не центрироваться вместе с текстом. transform:translateY(25%)
     (выше) сдвигает уже ОТРИСОВАННЫЕ пиксели вниз на 25% высоты картинки —
     margin-top:-71px компенсирует этот сдвиг так, чтобы РЕАЛЬНАЯ видимая
     верхняя граница картинки была ровно 72px от верха карточки (проверено
     headless-рендером на десктопной ширине: -71 + 25%×H = 72px). */
  align-self: flex-start;
  margin-top: -71px;
}

.feature-card__media-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.section__list {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  /* Пункт→пункт — общее правило контентного ритма, одинаковое для
     #legal-entities (список) и #app (нумерованный список). */
  gap: var(--content-paragraph-gap);
}

/* Заголовок→список: у #legal-entities список идёт сразу после h3, поэтому
   использует тот же токен, что и «заголовок→абзац» (.section__lede) —
   #mezhbank/#app. У #app список идёт после лид-абзаца, а не после
   заголовка напрямую — см. .section__lede + .section__list ниже. */
#legal-entities .section__list {
  margin-top: var(--content-heading-gap);
}

/* Абзац→список — только у #app, где перед списком есть .section__lede. */
#app .section__list {
  margin-top: var(--content-lede-list-gap);
}

/* Отступ цифра→текст, на 20% меньше базовых 26px (26×0.8=20.8≈21px). */
#app .section__list li {
  padding-left: 21px;
}

.section__list li {
  position: relative;
  /* padding-left = размер галочки + зазор до текста, см. переопределения
     по брейкпоинтам ниже (14+12 десктоп, 14+10 планшет, 12+8 мобильный). */
  padding-left: 26px;
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
}

/* Галочка — только для чек-листов (.section__list--check, сейчас
   #legal-entities), не для базового .section__list. Раньше это правило
   сидело на голом .section__list li::before, и .section__list--ordered
   его не полностью сбрасывал (переопределял только content/color/
   font-*) — из-за этого фон-галочка «протекала» под цифрами в #app.
   Теперь .section__list--ordered физически ни от чего общего не зависит. */
.section__list--check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  background: url("../assets/icons/check.svg") no-repeat center / contain;
}

.section__list--ordered {
  counter-reset: item;
}

.section__list--ordered li {
  counter-increment: item;
}

.section__list--ordered li::before {
  content: counter(item);
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-regular);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: var(--content-item-button-gap);
  padding: 14px 100px;
  border-radius: var(--radius-button);
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: var(--font-size-btn);
  line-height: 20px;
  font-weight: var(--font-weight-medium);
  transition: background 0.15s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--color-accent-300);
}

/* ==========================================================================
   Страница about.html — доп. блоки
   ========================================================================== */

/* ==========================================================================
   About hero (about.html) — самостоятельный блок, своя типографика и фон,
   не переиспользует .container/.hero. Двухколоночная раскладка: текст +
   иллюстрация. Структура gap внутри левой колонки: заголовок→первый абзац
   12px, первый→второй абзац 12px, второй→третий абзац 16px — всё через
   margin-top на детях (не через container gap, т.к. gap у флекс-контейнера
   не может быть разным для разных пар соседей).
   ========================================================================== */

.about-hero {
  background: var(--gradient-about-hero);
  padding-block: 80px;
}

/* .about-hero__inner совмещён с .container (в HTML: class="about-hero__inner
   container") — та же ширина контента (1104px, центрирование, паддинг 24px),
   что и во всех секциях на главной странице; фон .about-hero при этом
   остаётся на всю ширину экрана (растянутая секция-подложка). */
.about-hero__inner {
  display: flex;
  gap: 72px;
}

.about-hero__content {
  /* 2/3 ширины (flex:2 против flex:1 у .about-hero__media — та же общая
     база 0, поэтому делят доступное место в пропорции 2:1). */
  flex: 2;
  /* min-width:0 обязателен: у flex-элемента по умолчанию min-width:auto,
     он не даёт сжаться уже своего контента/дочернего .about-hero__media
     (с фикс. шириной иллюстрации 457px) — на мобильном без этого правая
     колонка вылезала за пределы экрана горизонтально, несмотря на
     max-width:100% у самой иллюстрации (он упирался в этот же неявный
     минимум родителя). */
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.about-hero__title {
  margin: 0;
  /* Единый токен с .hero__title на главной — те же переопределения по
     брейкпоинтам. */
  font-size: var(--font-size-hero-title);
  line-height: var(--line-height-hero-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.about-hero__lede {
  margin: 12px 0 0;
  /* Тот же токен, что у .hero__subtitle — жирность/цвет свои (medium,
     primary), это отличает первый абзац от двух следующих. */
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-subtitle);
  color: var(--color-text-primary);
}

.about-hero__text {
  margin: 12px 0 0;
  /* body-m — обычный текст, не подзаголовок (раньше по ошибке был
     line-height:28, как у subtitle). На мобильном font-size закреплён
     отдельно (см. медиа-запрос ниже) — намеренно НЕ падает до 14px
     вместе с остальным body-m, по прямому запросу. */
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-m);
  color: var(--color-gray-600);
}

.about-hero__text + .about-hero__text {
  /* Тот же токен, что и у .section__text + .section__text на главной —
     раньше здесь было хардкод-16px, заметно больше системного значения. */
  margin-top: var(--content-paragraph-gap);
}

.about-hero__media {
  /* 1/3 ширины — см. flex:2 у .about-hero__content выше. */
  flex: 1;
  min-width: 0; /* та же причина, что у .about-hero__content выше */
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-hero__illustration {
  /* Колонка сузилась до 1/3 — 457px фиксированной высоты больше не всегда
     помещается по ширине. width:100% + aspect-ratio:1/1 держит квадрат и
     сжимается вместе с колонкой, max-width ограничивает верхний предел
     прежним 457px там, где место есть. Этот бокс задаёт итоговый видимый
     размер иллюстрации — не меняется при переходе на два параллакс-слоя,
     поэтому общий размер не вырастет. */
  position: relative;
  width: 100%;
  max-width: 457px;
  aspect-ratio: 1 / 1;
  /* overflow:hidden убран — слои позиционируются точными координатами
     внутри бокса (как .hero__layer на главной), обрезка не нужна. */
}

.about-hero__layer {
  position: absolute;
  width: var(--w);
  height: var(--h);
  left: var(--x);
  top: var(--y);
  transition: transform 0.5s ease-out;
}

/* Точные --w/--h/--x/--y — прикидка по композиции текущего слитного
   podium.png (колонна снизу по центру, монета сверху с нахлёстом).
   Ассеты about-hero-coin.png/about-hero-column.png ещё не на месте —
   после добавления файлов проценты почти наверняка нужно будет
   подстроить под их реальные пропорции. */
.about-hero__layer--column {
  --w: 53%;
  --h: 58%;
  --x: 23%;
  --y: 42%;
  z-index: 2;
}

.about-hero__layer--coin {
  --w: 37%;
  --h: 41%;
  --x: 32%;
  --y: 1%;
  z-index: 1;
}

.about-hero__illustration:hover .about-hero__layer--coin {
  transform: translateY(-16px);
}

.about-hero__illustration:hover .about-hero__layer--column {
  transform: translateY(8px);
}

@media (max-width: 1024px) {
  .about-hero {
    padding-block: 56px;
  }

  .about-hero__inner {
    flex-direction: column;
    gap: 40px;
  }

  .about-hero__illustration {
    /* width:100% (не фикс. 457px) — на колоночной раскладке иллюстрация
       занимает всю ширину контейнера, max-width:457px (из базового
       правила) не даёт ей расти больше на широких планшетах/десктопе. */
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
  }
}

@media (max-width: 640px) {
  .about-hero {
    padding-block: 40px;
  }

  .about-hero__inner {
    gap: 32px;
  }

  /* .about-hero__title больше не переопределяется — --font-size-hero-title
     сам даёт 30/36 на мобильном. .about-hero__lede тоже не переопределяется
     — --font-size-subtitle сам даёт 16/24. Только .about-hero__text нужно
     закрепить отдельно: иначе он вместе с body-m упал бы до 14px, а по
     прямому запросу должен остаться 16px и на мобильном. */
  .about-hero__text {
    font-size: 16px;
    line-height: 24px;
  }
}

/* ==========================================================================
   Info-cards («Органы управления» + «Лицензии», about.html) — две
   равные карточки в ряд. Паддинг переиспользует паттерн .card, gap —
   паттерн .cards__grid, ничего нового в шкале отступов не вводится.
   ========================================================================== */

.info-cards {
  /* Отступ от группы серых карточек выше — тот же паттерн (токен и
     прогрессия), что у gap в .cards__grid. */
  margin-top: var(--space-xl); /* 48px десктоп */
  /* #organy-upravleniya теперь на этом div (не на <section>) — якорь из
     футера должен по-прежнему учитывать залипающую шапку. */
  scroll-margin-top: 88px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl); /* 48px — тот же паттерн, что у .cards__grid */
}

.info-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding-top: var(--space-lg);
  padding-inline: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.info-card__title {
  font-size: var(--font-size-heading-3);
  line-height: var(--line-height-heading-3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.info-card__group {
  margin-top: var(--content-heading-gap); /* 16px — заголовок → первая пара роль/имя */
}

.info-card__group + .info-card__group {
  margin-top: var(--space-md); /* 24px между парами роль/имя */
}

.info-card__license {
  margin-top: var(--content-heading-gap);
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
}

.info-card__license-text {
  flex: 1;
}

.info-card__text {
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
  color: var(--color-text-primary);
}

.info-card__meta {
  margin-top: var(--space-sm);
  font-size: var(--font-size-body-s);
  line-height: var(--line-height-body-s);
  color: var(--color-text-secondary);
}

.info-card__license-thumb {
  flex-shrink: 0;
  display: block;
  width: 120px;
  border-radius: var(--radius-s);
  overflow: hidden;
  box-shadow: 0px 4px 15px rgba(22, 21, 20, 0.03); /* тот же shadow, что у cookie-баннера */
}

.info-card__license-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1024px) {
  .info-cards {
    margin-top: var(--space-lg); /* 32px */
    gap: var(--space-lg); /* 32px */
  }

  .info-card {
    padding-top: var(--space-md);
    padding-inline: var(--space-lg);
    padding-bottom: var(--space-lg);
  }
}

@media (max-width: 640px) {
  .info-cards {
    margin-top: var(--space-md); /* 24px */
    grid-template-columns: 1fr;
    gap: var(--space-md); /* 24px */
  }

  .info-card {
    padding-top: var(--space-sm);
    padding-inline: var(--space-md);
    padding-bottom: var(--space-md);
  }

  /* На мобильном тесно располагать текст и миниатюру лицензии в ряд —
     переводим в колонку (текст сверху, картинка снизу). */
  .info-card__license {
    flex-direction: column;
    align-items: flex-start;
  }
}

.governance__role {
  /* Литералом, без var() и без адаптации — как .main-nav a/.btn. */
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.governance__name {
  margin-top: 8px;
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-subtitle);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* ==========================================================================
   Футер
   ========================================================================== */

.site-footer {
  margin-top: var(--section-footer-gap);
  background: var(--color-bg);
  color: var(--color-text-secondary);
}

.site-footer__columns {
  /* Не использует .container — растягивается на всю ширину, тот же
     принцип, что и у .site-header__inner: фиксированный отступ 56px. */
  width: 100%;
  padding-block: 40px;
  padding-inline: 56px;
  display: grid;
  /* Колонка с логотипом — 1/3 общей ширины; три оставшиеся колонки делят
     между собой вторые 2/3 поровну. 3fr : 2fr : 2fr : 2fr = 9 частей —
     3/9=1/3 у первой, 2/9 у каждой из остальных. Действует и на десктопе,
     и на планшете (см. переопределение ≤1024px ниже — оно больше не
     сворачивает раскладку в 2 колонки). */
  grid-template-columns: 3fr repeat(3, 2fr);
  align-items: start;
  gap: var(--space-xl); /* 48px — было 32px, увеличено по прямому запросу (только десктоп, см. ≤1024px ниже) */
}

.footer-col__text {
  margin-top: var(--space-sm);
  font-size: var(--font-size-body-s);
  line-height: var(--line-height-body-s);
  color: var(--color-text-secondary);
}

.footer-col__text + .footer-col__text {
  margin-top: 12px;
}

.footer-col__title {
  color: var(--color-text-primary);
  text-transform: uppercase;
}

.footer-col__list {
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col__list a {
  font-size: var(--font-size-body-s);
  line-height: var(--line-height-body-s);
  color: var(--color-text-secondary);
  transition: color 0.15s ease;
}

.footer-col__list a:hover,
.footer-col__list a:focus-visible {
  color: var(--color-text-primary);
}

/* Ссылки с бейджем («скоро» и т.п.) не должны менять цвет при наведении —
   визуально они неактивны/информационные, а не кликабельный переход. */
.footer-col__list a:has(.badge):hover,
.footer-col__list a:has(.badge):focus-visible {
  color: var(--color-text-secondary);
}

/* «Раскрытие информации» — неактивная ссылка, отдельный цвет disable. */
.footer-col__list a[aria-disabled="true"] {
  color: var(--color-text-secondary);
  cursor: default;
}

.footer-col__list a[aria-disabled="true"]:hover {
  color: var(--color-text-secondary);
}

.footer-col__list a .badge {
  margin-left: 6px;
}

.site-footer__bottom {
  width: 100%;
  padding-block: var(--space-md);
  padding-inline: 56px;
  border-top: 1px solid var(--color-gray-300);
}

.site-footer__copyright {
  /* max-width убран (раньше принудительно рвал фразу на 2 строки).
     white-space:nowrap для одной строки задаётся только на десктопе
     (см. @media (min-width: 1025px) ниже) — на планшете (641–1024px)
     фраза физически не помещается в одну строку ни при каком разумном
     размере шрифта; с nowrap это давало горизontальный скролл футера,
     поэтому там и на мобильном оставлен обычный перенос. */
  font-size: var(--font-size-body-s);
  line-height: var(--line-height-body-s);
  color: var(--color-text-disable);
}

@media (min-width: 1025px) {
  .site-footer__copyright {
    white-space: nowrap;
  }
}

@media (max-width: 1024px) {
  .site-footer__columns {
    /* На планшете 3fr/2fr/2fr/2fr с десктопа делает три колонки со
       ссылками слишком узкими — текст переносится почти на каждом слове.
       Вместо этого: 3 равные колонки, а колонка с логотипом/адресом
       занимает всю строку целиком (grid-column: 1 / -1 у .footer-col--
       brand ниже) — три остальные автоматически встают следующей строкой,
       по одной в каждую из трёх колонок сетки. */
    grid-template-columns: repeat(3, 1fr);
    padding-block: var(--space-lg); /* было 40px (число) на всех брейкпоинтах */
    gap: var(--space-lg); /* возвращаю прежние 32px — увеличенный gap (48px) только для десктопа */
  }

  .footer-col--brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .site-footer__columns {
    grid-template-columns: 1fr;
    padding-block: var(--space-md); /* было 40px (число) на всех брейкпоинтах */
    padding-inline: 24px; /* было 56px на десктопе/планшете — та же логика, что у .site-header__inner */
  }

  .site-footer__bottom {
    padding-inline: 24px;
  }

  .footer-col__list {
    /* Видимый отступ между ссылками — раньше 12px gap + 12px padding-block
       с каждой стороны давали визуально ~36px. Отступ и область клика
       разведены: gap теперь сам по себе видимый отступ (16px). */
    gap: var(--space-sm);
  }

  .footer-col__list a {
    position: relative;
    padding-block: 0;
  }

  .footer-col__list a::before {
    /* Невидимая область клика шире видимого текста, но не участвует в
       потоке/gap. ±7px с каждой стороны (14px) меньше gap (16px) —
       зоны соседних ссылок не перекрываются (нет случайных кликов не туда).
       Итоговая область клика ≈ 7+20(line-height)+7 = 34px. */
    content: "";
    position: absolute;
    top: -7px;
    bottom: -7px;
    left: 0;
    right: 0;
  }

  /* Мобильные 13px для .footer-col__list a/.footer-col__text/
     .site-footer__copyright больше не переопределяются здесь явно —
     --font-size-body-s/--line-height-body-s сами дают 13px/20px на
     этом брейкпоинте. */
}

@media (max-width: 1024px) {
  /* На этом брейкпоинте .hero__media перестаёт расти (flex:0 1 auto ниже) —
     её высоту теперь полностью определяет aspect-ratio, а не flex-grow.
     Без сброса min-height здесь .hero продолжал бы требовать ~100vh (как
     на десктопе, где именно flex-grow у .hero__media эту высоту заполнял),
     и лишнее пространство просто зависало пустым местом под картинкой —
     некому было его забирать. auto — та же логика, что уже применена для
     .hero на ≤640px. */
  .hero {
    min-height: auto;
  }

  .section {
    padding-top: 56px;
  }

  .cards__grid {
    gap: var(--space-lg); /* 32px — планшет */
  }

  .section--feature + .section--feature {
    margin-top: var(--space-lg); /* 32px — планшет */
  }

  .hero__media {
    /* flex-grow + aspect-ratio ненадёжно ведёт себя, когда max-width обрезает
       посчитанную ширину уже после того, как высота выросла под flex-grow —
       пропорции ломаются. Ниже 1024px переходим на явную ширину (без grow),
       aspect-ratio стабильно выводит из неё высоту. Сама ширина — не жёсткая
       ступенька, а один плавный clamp() на весь диапазон мобильный+планшет:
       на маленьком телефоне (~360-414px) даёт ~85-90% экрана, к 1024px
       постепенно снижается до ~635px (умеренный, не «крошечный» и не
       чрезмерно крупный размер для планшета) — без скачков на стыке 640px. */
    flex: 0 1 auto;
    /* max-width:100% из десктопной базовой стилизации всё ещё действует
       (мы не переопределяли это свойство) и на очень маленьких экранах может
       обрезать clamp() ниже задуманных 85-90% — снимаем ограничение, ширину
       здесь полностью определяет clamp(). */
    max-width: none;
    width: clamp(300px, 60vw + 100px, 650px);
  }

  /* Скоуплю через #legal-entities, чтобы не задеть нумерованный список
     в #app (.section__list--ordered) — у него своя логика отступов. */
  #legal-entities .section__list li {
    /* Планшет: галочка остаётся 14px, зазор до текста — 10px (14+10). */
    padding-left: 24px;
  }

  .card {
    padding-top: var(--space-md);
    padding-inline: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  .feature-card__content {
    padding-inline: var(--space-md);
    /* padding-top на этом брейкпоинте приходит через сам токен
       --content-top-padding (32px, см. tokens.css) — здесь переопределяем
       только padding-bottom, у которого своя, отдельная логика. */
    padding-bottom: var(--space-lg);
  }

  .btn {
    /* Было 100px на всех брейкпоинтах — на планшете уже избыточно. */
    padding: 14px var(--space-2xl);
  }
}

@media (max-width: 640px) {
  /* Колоночная раскладка (текст сверху, картинка снизу) — только на
     мобильном (≤640px). На планшете (641–1024px) feature-card остаётся
     горизонтальным, как на десктопе; исключения для конкретных блоков
     можно будет задать отдельно, если понадобятся. */
  .feature-card {
    flex-direction: column;
  }

  .feature-card--device {
    align-items: stretch;
  }

  .feature-card__media {
    aspect-ratio: 4 / 3;
    width: 100%;
    min-width: 0;
  }

  .feature-card__media.feature-card__media--illustration {
    /* В колонке (текст сверху, картинка снизу) bleed за край не нужен —
       возвращаем иллюстрацию в обычный поток на всю ширину карточки.
       aspect-ratio наследуется из базового правила выше. Класс-селектор
       той же специфичности, что и у .feature-card--bleed/--device
       модификаторов — побеждает по порядку объявления (этот блок ниже
       по файлу), без нужды в ID-хаках. */
    position: static;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
  }

  /* «72px от верха карточки» — концепция построчной раскладки (текст и
     картинка рядом). В колонке (текст сверху, картинка снизу) она не имеет
     смысла — сбрасываем margin-top/align-self к обычному поведению. */
  .feature-card--device .feature-card__media--illustration {
    margin-top: 0;
    align-self: stretch;
    /* flex:1 1 54% (базовое, десктопное) в колоночном режиме трактуется как
       доля ПО ВЫСОТЕ (главная ось в column — height), а не по ширине —
       конфликтовало с aspect-ratio на ≤640px, давая квадрат вместо 4:3.
       flex:none полностью убирает grow/shrink по главной оси. */
    flex: none;
  }

  .cards__grid {
    gap: var(--space-md); /* 24px — мобильный (по аналогии с прогрессией 48/32/24) */
  }

  .section--feature + .section--feature {
    margin-top: var(--space-md); /* 24px — мобильный */
  }

  /* Единое правило для мобильной раскладки всех иллюстрационных блоков
     (не-device): картинка визуально сдвигается вниз и уходит за нижний
     край подложки — обрезается тем же overflow:hidden на .feature-card,
     который уже есть в базовом правиле. Тот же приём, что и в десктопном
     bleed (.feature-card--bleed .feature-card__media--illustration выше
     по файлу), но по вертикали и без position:absolute (иначе картинка
     выпала бы из потока и карточка схлопнулась бы по высоте до одного
     текста). Селектор базовый (не привязан к --bleed/--device), поэтому
     действует на #mezhbank и #legal-entities одинаково и автоматически
     подхватит будущие похожие блоки; device-вариант ниже переопределяет
     это своей собственной логикой. */
  .feature-card__media.feature-card__media--illustration {
    /* margin-top компенсирует translateY: поднимает зарезервированное место
       бокса вверх на те же 50px, убирая пустой зазор перед картинкой, а
       transform по-прежнему рисует её на 50px ниже — обрезка нижнего края
       сохраняется в том же объёме, просто без пустоты сверху. */
    transform: translateY(50px);
    margin-top: -50px;
  }

  /* Device-вариант на мобиле: в отличие от десктопа/планшета (где базовое
     правило выше добавляет transform:translateY(25%), обрезающий нижнюю
     навигацию скриншота) здесь transform намеренно НЕ используется —
     обрезки по пропорции 4:3 (padding-top:75%) уже достаточно, чтобы
     скрыть нижнюю панель приложения, а лишний translateY только обрезал
     видимую часть картинки сильнее необходимого (было видно только до
     строки VKUSVILL — 51% картинки; без transform видно 62.5%, вплоть до
     строки с красной иконкой, что и требовалось). Ширина 120% +
     центрирующий отрицательный margin-left — картинка выходит за края
     карточки, обрезается overflow:hidden на .feature-card. */
  .feature-card--device .feature-card__media--illustration {
    /* margin-top:0 здесь ОБЯЗАТЕЛЕН, несмотря на то что transform убран:
       базовое правило выше (.feature-card__media.feature-card__media--
       illustration) всё равно матчит этот же элемент (оба класса совпадают
       независимо от модификатора) и задаёт margin-top:-50px для
       bleed-под-подложку эффекта (#mezhbank/#legal-entities) — оно той же
       специфичности (0,2,0) и объявлено позже раннего device-сброса
       (margin-top:0 у flex:none/align-self:stretch выше), поэтому без
       явного повторного сброса именно здесь -50px снова просочился бы и
       съел почти весь padding-bottom текста (уже дважды наступали на эти
       грабли — см. предыдущую правку). Видимый зазор от текста до картинки
       должен быть ровно padding-bottom текстового блока (var(--space-md),
       24px), без какой-либо компенсации transform (его больше нет).
       aspect-ratio здесь ненадёжен в сочетании с column+align-self:stretch
       (проверено headless-рендером — высота игнорировала aspect-ratio и
       равнялась ширине). Используем классический приём: height:0 +
       padding-top в процентах от ширины (75% = 3/4 для соотношения 4:3),
       без опоры на aspect-ratio.
       transform:none — тоже обязателен: десктопное базовое правило выше
       (без медиа-запроса) задаёт translateY(25%), и раз здесь transform
       больше ничего не переопределяет, оно продолжает действовать и на
       мобильном, сдвигая картинку вниз и обрезая лишнее. */
    margin-top: 0;
    transform: none;
    width: 120%;
    margin-left: -10%;
    position: relative;
    aspect-ratio: auto;
    height: 0;
    padding-top: 75%;
    overflow: hidden;
  }

  .feature-card--device .feature-card__media-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }

  .nav-toggle {
    display: flex;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: var(--space-sm);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-300);
    padding: var(--space-md) 24px;
  }

  .site-header.is-open .main-nav {
    display: flex;
  }

  .hero {
    min-height: auto;
    padding-bottom: var(--space-lg);
  }

  .feature-card__content {
    /* padding-top на мобильном приходит через --content-top-padding (24px,
       см. tokens.css) — отдельно не переопределяется. padding-bottom —
       самостоятельная величина (текст → картинка в колоночной раскладке),
       не завязана на токен контентного ритма: 16px для иллюстрационных
       блоков (#mezhbank, #legal-entities); #app переопределяет её отдельно
       ниже (.feature-card--device). */
    padding-bottom: 16px;
    padding-inline: var(--space-sm);
  }

  /* У #app раньше было хардкод-значение 21px, но из-за паразитного
     margin-top:-50px (см. .feature-card--device .feature-card__media--
     illustration ниже) реальный видимый отступ был всего ~12px. Починив
     margin-top, заодно перевожу отступ на токен вместо магического числа. */
  .feature-card--device .feature-card__content {
    padding-bottom: var(--space-md); /* 24px */
  }

  .hero__inner {
    gap: var(--space-md);
  }

  #legal-entities .section__list li {
    /* Мобильный: галочка уменьшается до 12px, зазор до текста — 8px (12+8). */
    padding-left: 20px;
  }

  #legal-entities .section__list li::before {
    top: 7px;
    width: 12px;
    height: 12px;
  }

  .site-header__inner {
    /* 56px десктопа/планшета съедает слишком много места на маленьком
       экране — на мобильном возвращаемся к тому же гуттеру, что и у
       .container (24px) в остальной вёрстке сайта. */
    padding-block: var(--space-xs);
    padding-inline: 24px;
    /* На мобильном меню сворачивается в бургер (.nav-toggle) — логотип и
       кнопку нужно развести по краям, а не группировать слева с 80px. */
    justify-content: space-between;
    gap: var(--space-md);
  }

  .card {
    padding-top: var(--space-sm);
    padding-inline: var(--space-md);
    padding-bottom: var(--space-md);
  }

  .btn {
    padding: 14px var(--space-lg); /* было 14px 100px фикс */
  }

  .section {
    padding-top: 32px;
    padding-bottom: var(--space-lg);
  }

  .section--feature {
    padding-block: 0; /* перебивает .section{padding-block:var(--space-lg)} выше — та же specificity, но позже в каскаде */
  }
}

/* ==========================================================================
   Cookie-баннер
   ========================================================================== */

/* [hidden] должен перебивать display:flex ниже — без этого явного правила
   атрибут hidden ничего не даёт, т.к. class-селектор с display:flex по
   специфичности выше встроенного UA-стиля [hidden]{display:none}. */
.cookie-banner[hidden] {
  display: none;
}

.cookie-banner {
  position: fixed;
  left: 56px;
  right: 56px;
  bottom: 24px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: var(--color-white);
  border-radius: var(--radius-s);
  box-shadow: 0px 4px 15px rgba(22, 21, 20, 0.03);
}

.cookie-banner__text {
  flex: 1;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-primary);
}

.cookie-banner__text a {
  text-decoration: underline;
}

.cookie-banner__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: none;
  border-radius: var(--radius-s);
  background: var(--color-accent);
  box-shadow: 0px 6px 10px rgba(255, 209, 25, 0.25);
  color: var(--color-accent-text);
  font-family: inherit;
  font-weight: var(--font-weight-medium);
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.cookie-banner__btn:hover,
.cookie-banner__btn:focus-visible {
  background: var(--color-accent-300);
}

@media (max-width: 640px) {
  .cookie-banner {
    left: 24px;
    right: 24px;
    bottom: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }

  .cookie-banner__btn {
    width: 100%;
  }
}