/* ══════════════════════════════════════════════════════════════
   ВФЦ — Восточный финансовый центр
   Токены перенесены из дизайн-системы Figma (коллекции Primitives / Semantic).
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── цвет: примитивы ── */
  --neutral-0: #FFFFFF;
  --neutral-50: #FBFBFB;
  --neutral-200: #D9D9D9;
  --neutral-300: #E9E9E9;
  --neutral-500: #707070;
  --neutral-900: #000000;

  --blue-50: #EBF1FF;
  --blue-200: #CCD1E7;
  --blue-300: #97B7FF;
  --blue-400: #6A97F8;
  --blue-500: #3877FF;
  --blue-600: #154ECA;
  --blue-700: #0E2FB4;
  --blue-800: #062E85;
  --blue-900: #010818;

  --status-red: #E5484D;
  --status-red-on-dark: #FF9592;
  --status-green: #30A46C;

  /* ── цвет: роли ── */
  --bg-page: var(--neutral-50);
  --bg-inverse: var(--blue-900);

  --surface: var(--neutral-0);
  --surface-subtle: var(--blue-50);
  --surface-glass: rgba(0, 0, 0, .06);
  --surface-on-dark: rgba(255, 255, 255, .05);
  --surface-on-dark-strong: rgba(255, 255, 255, .16);

  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-500);
  --text-accent: var(--blue-600);
  --text-accent-strong: var(--blue-700);
  --text-accent-bright: var(--blue-500);
  --text-inverted: var(--neutral-0);
  --text-inverted-secondary: var(--neutral-300);
  --text-inverted-muted: var(--blue-200);
  --text-inverted-subtle: rgba(233, 233, 233, .7);
  --text-placeholder: rgba(255, 255, 255, .5);
  --text-disabled: var(--neutral-500);

  --border-default: var(--blue-200);
  --border-accent: var(--blue-600);
  --border-accent-subtle: var(--blue-300);
  --border-accent-light: var(--blue-400);
  --border-accent-translucent: rgba(151, 183, 255, .2);
  --border-inverse: var(--blue-800);
  --border-on-dark-subtle: rgba(255, 255, 255, .2);
  --border-on-dark: rgba(255, 255, 255, .3);
  --border-on-dark-strong: rgba(255, 255, 255, .35);
  --border-divider: rgba(0, 0, 0, .2);
  --border-on-light-subtle: var(--blue-50);   /* #FBFBFB совпадал с фоном — линии не было видно */
  --border-focus: var(--blue-500);

  --action-primary: var(--blue-600);
  --action-primary-hover: var(--blue-700);
  --action-primary-pressed: var(--blue-800);
  --action-primary-disabled: var(--blue-200);
  --action-secondary-hover: var(--blue-50);
  --action-on-dark-hover: rgba(255, 255, 255, .16);

  --icon-primary: var(--neutral-900);
  --icon-accent: var(--blue-600);
  --icon-on-dark: var(--neutral-0);
  --decor-dots: var(--neutral-200);

  /* ── градиенты ── */
  --grad-section-dark: linear-gradient(140deg, #1B308E 0%, #080D38 100%);
  --grad-section-deep: linear-gradient(140deg, #2038A2 0%, #0B1144 100%);
  --grad-card-light: linear-gradient(90deg, #EFF4FF 0%, #B9CEFD 100%);
  --grad-button: linear-gradient(135deg, #1E14B0 0%, #2A196A 100%);
  --grad-button-border: linear-gradient(135deg, rgba(170,147,255,1) 0%, rgba(255,255,255,.51) 100%);

  /* ── скругления ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 500px;

  /* ── сетка ──
     Макет 1366: контентная зона 1234, боковые поля по 66.
     Выше 1366 контент фиксируется и центрируется, тянется только фон. */
  --container: 1234px;
  --container-max: 1360px;
  /* Слои: следующая секция приподнимается на предыдущую скруглённой шапкой.
     В макете блок 01 наезжает на первый экран на 145px. */
  --overlap: clamp(36px, 7vw, 96px);
  --section-radius: clamp(20px, 2.93vw, 40px);
  --gutter: calc(66 * var(--u));

  /* ── единая шкала отступов ──
     Нижняя граница clamp работает на мобильном — за ней и следим. */
  --sp-section: clamp(56px, 8.8vw, 120px);
  --sp-block: clamp(32px, 3.5vw, 48px);
  --sp-head: clamp(24px, 2.35vw, 32px);
  --sp-eyebrow: clamp(16px, 1.75vw, 24px);
  --sp-head-gap: clamp(24px, 2.93vw, 40px);   /* надзаголовок -> заголовок, единый по всему сайту */
  --sp-card: clamp(20px, 2.3vw, 31px);

  /* ── типографика ── */
  --font-text: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-text);   /* в макете крупные заголовки — тот же Onest */

  --fs-display: clamp(38px, 5.13vw, 70px);   /* 70px на 1366 — из макета */
  --fs-h1: clamp(32px, 3.37vw, 46px);
  --fs-h2: clamp(26px, 2.93vw, 40px);
  --fs-h2-lg: clamp(28px, 3.37vw, 46px);
  --fs-h3: clamp(20px, 1.9vw, 26px);
  --fs-lead: clamp(15px, 1.17vw, 16px);
  --fs-body: clamp(14px, 1.1vw, 15px);
  --fs-small: 13px;
  --fs-eyebrow: 12px;

  /* ── движение ──
     Плавные появления и быстрая отзывчивость интерфейса — это разные кривые. */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-ui: cubic-bezier(.23, 1, .32, 1);
  --dur-reveal: 980ms;
  --dur-ui: 190ms;

  --header-h: 86px;

  /* ── единица макета ──
     1u = 1px на опорной ширине фрейма. Ниже опорной всё сжимается
     пропорционально, выше 1520 фиксируется. Промежуточных состояний,
     которые надо отдельно чинить, при таком подходе просто нет.
     Опорные ширины взяты из фреймов макета: 1366 / 768 / 375. */
  --u: clamp(.9444px, 0.0732vw, 1.113px);

  /* ── высота первого экрана ──
     Значение в переменной, а не в правиле: скрипт перезаписывает её реальным
     замером окна. Здесь — лестница на случай, если скрипт не отработал. */
  --hero-vh: 100vh;
  --hero-safe: 0px;
}
@supports (height: 100svh) { :root { --hero-vh: 100svh; } }
@supports (height: 100dvh) { :root { --hero-vh: 100dvh; } }

/* Боковое поле в макете своё у каждой версии: 66 / 40 / 16 — не пропорция, а решение дизайна */
/* Единица планшетного фрейма (768). Ниже 768 её нельзя уменьшать дальше:
   иначе на 601-767 текст падает до 9-14px, мельче мобильного. */
@media (max-width: 1024px) { :root { --u: max(1px, 0.13021vw); --gutter: calc(40 * var(--u)); --section-radius: calc(30 * var(--u)); --overlap: calc(30 * var(--u)); --sp-head-gap: calc(40 * var(--u)); } }
@media (max-width: 600px)  { :root { --u: clamp(0.9333px, 0.26667vw, 1.15px); --gutter: calc(16 * var(--u)); --overlap: calc(40 * var(--u)); --sp-head-gap: calc(24 * var(--u)); } }

/* ══════════════ БАЗА ══════════════ */

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

/* Цвет холста. Safari на iOS красит им зону под нижней панелью — полоску
   у индикатора home. Пока холст брал цвет у body (--bg-page, почти белый),
   под панелью на тёмном первом экране светилась белая полоса. Body рисует
   светлый фон поверх, на вид страница та же — меняются только края. */
html { background: var(--bg-inverse); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
/* авторский display перебивает [hidden] из браузерных стилей — возвращаем приоритет атрибуту */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.skip-link {
  position: absolute; left: 50%; top: 8px; z-index: 100;
  transform: translate(-50%, -200%);
  padding: 10px 18px; border-radius: var(--radius-full);
  background: var(--action-primary); color: var(--text-inverted);
  transition: transform var(--dur-ui) var(--ease-ui);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

.container {
  width: min(100% - var(--gutter) * 2, var(--container-max));
  margin-inline: auto;
}
@media (min-width: 1367px) { .container { width: min(100% - var(--gutter) * 2, var(--container-max)); } }

/* ══════════════ ТИПОГРАФИКА БЛОКОВ ══════════════ */

.eyebrow, .chip {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow { color: var(--text-secondary); }

.chip {
  display: inline-block;
  padding: 12px 18px;
  border-radius: var(--radius-full);
  background: var(--surface-on-dark);
  border: 1px solid var(--border-on-dark-subtle);
  color: var(--text-inverted-muted);
}

.section__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.17;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.section__title em { font-style: normal; color: var(--text-accent); }
.section--dark .section__title em,
.section--deep .section__title em { color: var(--text-accent-bright); }

.section__title--center { font-size: var(--fs-h2-lg); text-align: center; max-width: 942px; margin-inline: auto; }
.section__subtitle {
  font-family: var(--font-text);
  font-size: clamp(24px, 2.86vw, 39px); font-weight: 500; line-height: 1.2;
  color: var(--text-primary);
}
.section__subtitle em { font-style: normal; color: var(--blue-600); }

/* Блок 05: «Восточная биржа» отдельной строкой, «работает уже сегодня» — второй.
   Описание встаёт в правую колонку той же сетки, что и плашки ниже,
   поэтому его края совпадают с плашкой 02. */
#exchange .section__subtitle em { display: block; }
#exchange .section__head--split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 4.4vw, 60px);
}
.section__lead {
  font-size: calc(20 * var(--u)); line-height: 1.5; color: var(--text-secondary);
  text-wrap: pretty;
}
/* Описание рядом с подзаголовком: в макете 20/1.4 основным цветом. */
.section__head--split .section__lead {
  font-size: clamp(15px, 1.46vw, 20px); line-height: 1.4; color: var(--text-primary);
}
/* Короткий вариант заголовка блока 02 — только мобильная, см. @media 600. */
.title__narrow { display: none; }

.section__lead--center {
  text-align: center; margin-inline: auto; max-width: 690px;
  /* центрированный вариант читается крупнее из-за ширины — ступень вниз */
  font-size: calc(18 * var(--u));
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 600;                    /* Onest SemiBold — из макета */
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--text-accent);
}

.accent { color: var(--text-accent); }

/* ══════════════ СЕКЦИИ ══════════════ */

.section {
  position: relative; padding-block: var(--sp-section);
  scroll-margin-top: calc(var(--header-h) + 24px);   /* якорь не прячет заголовок под фиксированный хедер */
}
.section--light { background: var(--bg-page); }
/* Тёмные секции держат декоративные свечения, вынесенные за свои границы —
   без обрезки они дают горизонтальную прокрутку всей страницы.
   clip вместо hidden: не создаёт скролл-контейнер и не ломает sticky. */
.section--dark,
.section--deep { overflow: clip; color: var(--text-inverted); }
.section--dark { background: var(--grad-section-dark); }
/* Карта почти чёрная — синий градиент давал резкий стык по краю полотна.
   В макете под картой ровный --blue-900, подсветку держит только .glow. */
.section--night { background: var(--blue-900); }

/* Блок 06 повторяет шапку блока 02: от верха секции до чипа те же 54. */

/* И больше воздуха от подзаголовка до формы — в макете 78. */
#contact .form { margin-top: clamp(40px, 5.7vw, 78px); }
.section--deep { background: var(--grad-section-deep); }

/* 02 — в макете это не полноширинная секция, а скруглённая карточка по ширине
   контентной зоны (1234 из 1366, радиус 40). Сама секция становится светлой
   подложкой; градиент, радиус и внутренние отступы уезжают на .section__card.
   Соседние отступы подрезаны, чтобы зазоры совпали с макетом (32 / 83). */
.section--card { background: var(--bg-page); padding-block: clamp(24px, 3vw, 41px); }
.section:has(+ .section--card) { padding-bottom: clamp(48px, 5.3vw, 72px); }
.section--card + .section { padding-top: clamp(28px, 3.1vw, 42px); }

.section__card {
  position: relative; isolation: isolate; overflow: clip;
  padding: clamp(24px, 3.95vw, 54px);
  border-radius: clamp(20px, 2.93vw, 40px);
  background: var(--grad-section-deep);
}
.section__card > .section__head { margin-top: 0; }
/* Стеклянные карточки из макета: белый 16%, обводка 20%, лёгкое размытие фона */
.section__card .card {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .2);
  backdrop-filter: blur(2px);
}

.section--tight { padding-top: 0; }

/* Скруглённая шапка с наездом на предыдущую секцию. Без прилипания:
   на странице в 10 000px девять липких блоков сделали бы прокрутку вязкой. */
.section--rounded {
  /* Без z-index: секции и так позиционированы, поэтому следующая рисуется
     поверх предыдущей по порядку в документе — наезд работает, а нижний
     край тени накрывается следующей секцией и не даёт серой полосы. */
  position: relative;
  margin-top: calc(-1 * var(--overlap));
  border-top-left-radius: var(--section-radius);
  border-top-right-radius: var(--section-radius);
}
/* Наезд съедает низ предыдущей секции — возвращаем ей этот отступ. */
.section:has(+ .section--rounded) { padding-bottom: calc(var(--sp-section) + var(--overlap)); }

.section--dark .section__lead,
.section--deep .section__lead { color: var(--text-inverted-muted); }

.section__head { margin-top: var(--sp-head-gap); }
.section__head--split {
  display: grid; grid-template-columns: minmax(0, 430fr) minmax(0, 584fr);
  gap: clamp(24px, 4vw, 96px); align-items: start;
}
@media (min-width: 1025px) {
  #map .section__head--split,
  #world .section__head--split {
    grid-template-columns: minmax(0, min(calc(700 * var(--u)), 60%)) minmax(0, 1fr);
    gap: calc(80 * var(--u));
  }
}
.section__head--center {
  display: flex; flex-direction: column; align-items: center;
  gap: 0;
  text-align: center; margin-top: 0;
}
.section__head--center > * + * { margin-top: var(--sp-head-gap); }
.section__head--center .section__lead { margin-top: clamp(14px, 1.75vw, 24px); }

.split {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 80px); align-items: end;
  margin-top: var(--sp-head-gap);
}
/* Сетка направлений и «хвост» надзаголовка живут только в узких макетах. */
.exchange__tags { display: none; }
.split__aside-lead { display: block; }
#news .split__aside .accent { display: block; }

.split__aside {
  font-size: clamp(15px, 1.46vw, 20px); font-weight: 500; line-height: 1.4;
  color: var(--text-secondary);
  text-align: right;
}

.rule { height: 1px; margin: var(--sp-block) 0 0; border: 0; background: var(--border-divider); opacity: .18; }
.rule--full { margin-block: var(--sp-block); }

/* Свечение рисуем радиальным градиентом, а не filter: blur().
   В WebKit размытие дочернего элемента протекает мимо скруглённых углов
   родителя: по краям тёмной секции проступала светлая подложка. Градиент
   даёт тот же ореол, живёт внутри скругления и не создаёт слой для GPU.
   Размеры — с запасом на бывший blur(90px): диаметр вырос на 3σ с каждой
   стороны, смещения пересчитаны так, чтобы центр пятна остался на месте. */
.glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  opacity: .5;
}
.glow--right {
  right: -195px; top: calc(34% - 135px); width: 578px; height: 578px;
  background: radial-gradient(closest-side,
    var(--blue-400) 0%, var(--blue-400) 7%, rgba(106, 151, 248, .34) 55%, rgba(106, 151, 248, 0) 100%);
}
.glow--top {
  right: calc(8% - 135px); top: -285px; width: 664px; height: 664px;
  background: radial-gradient(closest-side,
    var(--blue-800) 0%, var(--blue-800) 19%, rgba(6, 46, 133, .34) 55%, rgba(6, 46, 133, 0) 100%);
}

/* ══════════════ КНОПКИ И ССЫЛКИ ══════════════ */

.btn {
  --btn-bg: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: calc(47 * var(--u)); padding: 0 calc(31 * var(--u));
  border: 1px solid transparent; border-radius: var(--radius-full);
  background: var(--btn-bg);
  font-family: var(--font-ui); font-size: calc(16 * var(--u)); font-weight: 400; line-height: 1.2;
  cursor: pointer; text-align: center;
  transition: background var(--dur-ui) var(--ease-ui),
              border-color var(--dur-ui) var(--ease-ui),
              transform 120ms var(--ease-ui),
              box-shadow var(--dur-ui) var(--ease-ui);
}
.btn:active { transform: scale(.975); }

.btn--primary {
  background: var(--grad-button);
  border: 1px solid transparent;
  color: var(--text-inverted);
  position: relative;
}
.btn--primary::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--grad-button-border); opacity: .35;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.btn--primary:hover { box-shadow: 0 8px 24px rgba(21, 78, 202, .45); }
.btn--primary:active { box-shadow: none; }

.btn--outline {
  color: var(--text-inverted);
  border-color: var(--border-on-dark-strong);
}
.btn--outline:hover { background: var(--surface-on-dark); }
.btn--outline:active { background: var(--surface-on-dark-strong); }

.btn--glass {
  background: var(--surface-glass);
  border-color: var(--border-on-dark);
  color: var(--text-inverted);
  padding: calc(10 * var(--u)) calc(14 * var(--u)); font-size: calc(14 * var(--u));
  backdrop-filter: blur(8px);
}
.btn--glass:hover { background: var(--action-on-dark-hover); }

.btn--submit { width: 100%; margin-top: 22px; }

/* контурная кнопка-ссылка со стрелкой */
.link-btn {
  display: inline-flex; align-items: center; gap: calc(14 * var(--u));
  min-height: calc(47 * var(--u)); padding: 0 calc(24 * var(--u));
  border: 1px solid var(--border-accent-translucent);
  border-radius: var(--radius-full);
  font-family: var(--font-ui); font-size: calc(16 * var(--u)); font-weight: 500; line-height: 1.2;
  transition: background var(--dur-ui) var(--ease-ui),
              border-color var(--dur-ui) var(--ease-ui),
              transform 120ms var(--ease-ui);
}
.link-btn__arrow {
  width: 18px; height: 1px; background: currentColor; flex-shrink: 0;
  position: relative;
  transition: transform var(--dur-ui) var(--ease-ui);
}
.link-btn__arrow::after {
  content: ''; position: absolute; right: 0; top: 50%;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.link-btn:hover { background: var(--action-secondary-hover); border-color: var(--border-accent-light); }
.link-btn:hover .link-btn__arrow { transform: translateX(4px); }
.link-btn:active { transform: scale(.985); background: var(--surface-subtle); border-color: var(--border-accent); }
.link-btn--wide { padding-inline: calc(31 * var(--u)); }

.section--dark .link-btn,
.section--deep .link-btn { border-color: var(--border-on-dark-subtle); color: var(--text-inverted); }
.section--dark .link-btn:hover,
.section--deep .link-btn:hover { background: var(--surface-on-dark); border-color: var(--border-on-dark); }

.text-link {
  font-family: var(--font-ui); font-size: 15px; font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui);
}
.text-link:hover { color: var(--text-accent); border-bottom-color: currentColor; }

/* ══════════════ ХЕДЕР ══════════════ */

.header {
  position: fixed; inset: 0 0 auto; z-index: 60;
  padding-block: 22px;
  transform: translateZ(0);            /* iOS: без этого дёргается при сворачивании адресной строки */
  transition: background var(--dur-ui) var(--ease-ui),
              box-shadow var(--dur-ui) var(--ease-ui);
}
.header.is-stuck {
  background: rgba(1, 8, 24, .82);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07);
}
.header__inner { display: flex; align-items: center; gap: 24px; }
.header--solid {
  background: rgba(1, 8, 24, .92);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07);
}

.logo { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo__mark { display: block; width: 32px; height: 32px; color: var(--text-inverted); }
.logo__text { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.logo__name {
  font-family: var(--font-ui); font-size: calc(20 * var(--u)); font-weight: 600; letter-spacing: -.01em;
  line-height: 1.2;                    /* 20 x 1.2 = 24 — высота строки как у дескриптора */
  color: var(--text-inverted);
}
.logo__sub {
  max-width: calc(113 * var(--u)); font-size: calc(10 * var(--u)); line-height: 1.2;   /* 2 строки x 12 = 24 */
  color: var(--text-inverted-subtle);
}

.nav { margin-inline: auto; }
.nav__list { display: flex; gap: calc(47 * var(--u)); }
.nav__link {
  position: relative;
  font-family: var(--font-ui); font-size: calc(14 * var(--u)); font-weight: 400;
  color: var(--text-inverted);
  transition: color var(--dur-ui) var(--ease-ui);
}
.nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-ui) var(--ease-ui);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--text-accent-bright); }

.header__cta { flex-shrink: 0; }

.burger {
  display: none; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--border-on-dark); border-radius: var(--radius-full);
  background: var(--surface-glass); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger__line {
  width: 16px; height: 1.5px; background: var(--text-inverted); border-radius: 2px;
  transition: transform var(--dur-ui) var(--ease-ui), opacity var(--dur-ui) var(--ease-ui);
}
.burger[aria-expanded="true"] .burger__line:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 55;
  background: var(--grad-section-dark);
  padding-top: calc(var(--header-h) + 12px);
  overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__inner { display: flex; flex-direction: column; gap: 32px; padding-bottom: 40px; }
.mobile-menu__list { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu__list a {
  display: block; padding: 16px 0;
  font-size: 22px; font-weight: 500; color: var(--text-inverted);
  border-bottom: 1px solid var(--border-on-dark-subtle);
}
/* Под последним пунктом линия ничего не разделяет. */
.mobile-menu__list li:last-child a { border-bottom: 0; }
.mobile-menu__cta { width: 100%; }

/* ══════════════ ПЕРВЫЙ ЭКРАН ══════════════ */

.hero {
  position: relative; isolation: isolate;
  min-height: calc(var(--hero-vh) + var(--overlap) + var(--hero-safe));
  display: flex; align-items: flex-end;
  padding-top: calc(var(--header-h) + 40px);
  /* Экран занимает вьюпорт целиком, а контент прижат к низу: доля отступа
     держится одинаковой на любой высоте окна, поэтому блок не «всплывает». */
  padding-bottom: calc(clamp(40px, 7svh, 96px) + var(--overlap) + var(--hero-safe));
  background: var(--bg-inverse);
  color: var(--text-inverted);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(21,26,37,.55) 0%, rgba(21,26,37,.15) 42%, rgba(21,26,37,.92) 100%);
}
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 80px); align-items: end;
}
.hero__title {
  max-width: calc(600 * var(--u));
  font-family: var(--font-text);
  font-size: calc(58 * var(--u));       /* Onest Bold 58/0.88 — из макета */
  font-weight: 700; line-height: .88; letter-spacing: -.02em;
}
/* В макете первое слово залито акцентом, остальное белым */
.hero__title-accent { color: var(--text-accent-bright); }
.hero__title-rest { color: var(--text-inverted); }
.hero__rule { display: none; }
.hero__lead {
  max-width: calc(675 * var(--u)); margin-top: calc(26 * var(--u));
  font-size: calc(26 * var(--u)); line-height: 1.28;
  color: var(--text-inverted);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: calc(29 * var(--u)); margin-top: calc(67 * var(--u)); }
/* Кнопки первого экрана — крупнее остальных: это главный призыв на странице. */
.hero__actions .btn {
  min-height: calc(58 * var(--u)); padding: 0 calc(34 * var(--u));
  font-size: calc(18 * var(--u));
}
.hero__note {
  position: relative; padding-left: calc(11 * var(--u));
  font-size: calc(18 * var(--u)); line-height: 1.28;
  color: var(--text-inverted-secondary);
}
.hero__note::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px;
  background: var(--text-accent-bright);
}

/* ══════════════ 01 — О ЦЕНТРЕ ══════════════ */
/* Числа из макета: шапка 554 + 157 + 529, фото 1246x666,
   цитата 876 (знак 40 + 25 + текст), подпись 274 справа по нижнему краю. */

.eyebrow--plain {
  font-family: var(--font-text);
  font-size: calc(12 * var(--u)); font-weight: 400; letter-spacing: .1em;
  color: var(--text-primary);
}

.about__head {
  display: grid; grid-template-columns: minmax(0, 554fr) minmax(0, 529fr);
  gap: calc(157 * var(--u));
  margin-top: var(--sp-head-gap);
}
.about__title {
  font-family: var(--font-text);
  font-size: calc(39 * var(--u)); font-weight: 500; line-height: 1.2;
  color: var(--text-primary);
}
.about__title em { display: block; font-style: normal; color: var(--blue-600); }
.about__lead {
  font-size: calc(20 * var(--u)); line-height: 1.4;
  color: var(--text-primary);
}
.about__lead--compact { display: none; }   /* в мобильном макете свой, короткий текст */

.about__media { margin-top: calc(38 * var(--u)); }
/* Фото в макете чистое: ни затемнения, ни текста поверх. */
.about__photo {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1246 / 666; object-fit: cover;
  border-radius: var(--radius-lg);
}

.about__caption {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(24px, 4vw, 83px);
  margin-top: calc(52 * var(--u));
}
.about__quote  { order: 1; }
.about__source { order: 2; }
/* Выделения и «В. В. Путина:» — только в мобильном макете. */
.about__source-vv { display: none; }
.about__hl { font-weight: inherit; color: inherit; }
.about__quote { display: flex; align-items: flex-start; gap: calc(25 * var(--u)); max-width: calc(876 * var(--u)); }
.about__mark { flex-shrink: 0; width: calc(40 * var(--u)); height: auto; color: var(--blue-600); }
.about__quote-text {
  font-size: calc(24 * var(--u)); line-height: 1.4;
  color: var(--text-primary);
}
/* Синяя волна по цитате: широкая полоса акцента внутри обычного текста,
   градиент обрезан по глифам. Класс вешает JS — без него цвет обычный,
   поэтому текст виден всегда, даже если скрипт не отработал. */
.about__quote-text.is-sweepable {
  background-image: linear-gradient(100deg,
    var(--text-primary) 0 34%,
    var(--blue-600) 46% 54%,
    var(--text-primary) 66% 100%);
  background-size: 320% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  transition: background-position 2.4s cubic-bezier(.33, 0, .2, 1);
}
.about__quote-text.is-swept { background-position: 0 0; }
.about__source {
  position: relative; flex-shrink: 0;
  width: calc(274 * var(--u)); padding-top: calc(15 * var(--u));
  font-size: calc(20 * var(--u)); line-height: 1.4;
  text-align: right; color: var(--text-primary);
}
/* Короткая синяя черта над подписью — 64px, прижата вправо. */
.about__source::before {
  content: ''; position: absolute; right: 0; top: 0;
  width: calc(64 * var(--u)); height: 3px; background: var(--blue-600);
}

/* ══════════════ КАРТОЧКИ ══════════════ */

.cards { display: grid; gap: clamp(16px, 2.3vw, 31px); margin-top: var(--sp-block); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  display: flex; flex-direction: column;
  padding: var(--sp-card);
  border: 1px solid var(--border-on-dark-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-on-dark);
}
.card__icon { align-self: flex-start; height: clamp(48px, 5vw, 68px); width: auto; color: var(--border-accent-subtle); }
.card__title {
  margin-top: clamp(20px, 2.3vw, 31px);
  font-family: var(--font-text);
  font-size: calc(26 * var(--u)); font-weight: 500; line-height: 1.1;
}
.card__text {
  margin-top: calc(14 * var(--u));
  font-size: calc(18 * var(--u)); line-height: 1.4;
  color: var(--text-inverted-muted);
}
/* В макете кнопки всех трёх карточек стоят на одной линии, сколько бы строк
   ни занял текст: прижимаем их к низу колонки, минимальный зазор — на тексте. */
.card__text { margin-bottom: clamp(24px, 3.4vw, 46px); }
.card > .link-btn { margin-top: auto; align-self: flex-start; }

/* ══════════════ МАТРИЦА 03 ══════════════ */

.matrix {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--sp-block);
  border-top: 1px solid var(--border-default);
}
.matrix__item {
  padding: clamp(20px, 2.6vw, 34px) clamp(16px, 2vw, 28px) clamp(24px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--border-default);
}
.matrix__item:not(:nth-child(3n)) { border-right: 1px solid var(--border-default); }
.matrix__item:not(:nth-child(3n)) { padding-right: clamp(16px, 2.3vw, 30px); }
.matrix__item:not(:nth-child(3n+1)) { padding-left: clamp(16px, 2.3vw, 30px); }
.matrix__num {
  font-family: var(--font-ui); font-weight: 300;
  font-size: calc(60 * var(--u)); line-height: .9; letter-spacing: -.05em;
  color: var(--text-accent);
}
.matrix__title {
  margin-top: calc(24 * var(--u));
  font-family: var(--font-text);
  font-size: calc(22 * var(--u)); font-weight: 500; line-height: 1.2;
}
.matrix__text { margin-top: calc(11 * var(--u)); font-size: calc(17 * var(--u)); line-height: 1.4; color: var(--text-primary); }

/* ══════════════ КАРТОЧКА СТАТУСА ══════════════ */

.status {
  display: grid; grid-template-columns: minmax(0, 285px) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 155px);
  margin-top: var(--sp-block);
  padding: clamp(24px, 3vw, 42px);
  border-radius: var(--radius-lg);
  background: var(--grad-card-light);
}
.status__label { font-size: clamp(18px, 1.75vw, 24px); font-weight: 500; letter-spacing: -.01em; }
.status__dots {
  margin-top: clamp(24px, 6vw, 84px);
  width: 103px; height: 60px;
  background-image: radial-gradient(circle, var(--decor-dots) 2px, transparent 2px);
  background-size: 11px 8px;
}
.status__eyebrow {
  font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary);
}
.status__title {
  margin-top: 20px;
  font-size: clamp(18px, 1.9vw, 26px); font-weight: 500; line-height: 1.35; letter-spacing: -.01em;
  color: var(--text-accent);
  max-width: calc(710 * var(--u));   /* в макете колонка 710, а не вся ширина */
}
.status__note { margin-top: 16px; max-width: calc(710 * var(--u)); font-size: clamp(15px, 1.46vw, 20px); line-height: 1.5; color: var(--text-secondary); }

/* ══════════════ 04 — КАРТА ══════════════ */

.map-holder { margin-top: var(--sp-block); }
.map-note {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start;
  max-width: calc(760 * var(--u)); margin-top: var(--sp-head);
  font-size: clamp(14px, 1.32vw, 18px); line-height: 1.6; color: var(--text-inverted-subtle);
}
.map-note svg { width: 24px; height: 24px; color: var(--text-accent-bright); }

/* ══════════════ 05 — БИРЖА ══════════════ */

.panels {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 4.4vw, 60px);
  margin-top: var(--sp-block);
}
.panel {
  padding: clamp(24px, 3vw, 41px) clamp(20px, 3.4vw, 46px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.panel__num {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(30px, 3.2vw, 44px); line-height: 1; letter-spacing: -.02em;
  color: var(--text-accent);
}
.panel__title {
  margin-top: clamp(16px, 1.8vw, 24px);
  font-size: clamp(17px, 1.6vw, 22px); font-weight: 600; line-height: 1.25;
}
/* В макете пункт начинается синим тире, между пунктами — тонкая линия. */
.panel__list { display: flex; flex-direction: column; margin-top: clamp(16px, 1.5vw, 20px); }
.panel__list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px;
  padding: 18px 0;
  font-size: calc(18 * var(--u)); line-height: 1.4; color: var(--text-primary);
  border-bottom: 1px solid var(--border-on-light-subtle);
}
.panel__list li::before {
  content: ''; width: 14px; height: 2px; margin-top: .62em;
  background: var(--text-accent);
}
.panel__list li:last-child { border-bottom: 0; padding-bottom: 0; }

.exchange__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px, 1.8vw, 22px);
  margin-top: var(--sp-block);
}
.exchange__actions .text-link { margin-left: auto; }

/* ══════════════ 06 — ФОРМА ══════════════ */

.field__input, .option, .consent, .btn--submit,
.center__head, .filter { scroll-margin-top: calc(var(--header-h) + 24px); }

/* В макете форма уже контентной зоны: 1122 из 1234, колонки 406 и 666.
   Жёсткий предел, а не доля, — иначе на 1920 кнопка раздувается во всю ширину. */
.form {
  display: grid; grid-template-columns: minmax(0, 406fr) minmax(0, 666fr);
  gap: clamp(24px, 3.7vw, 50px);
  width: min(100%, 1122px);
  margin: var(--sp-block) auto 0;
}
.form__options { min-width: 0; margin: 0; padding: 0; border: 0; }
.form__legend { padding: 0; margin-bottom: 22px; font-size: clamp(16px, 1.32vw, 18px); font-weight: 500; }

.option {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; margin-bottom: 16px;
  border: 1px solid var(--border-on-dark); border-radius: var(--radius-md);
  background: var(--surface-on-dark);
  cursor: pointer;
  transition: background var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui);
}
.option:last-child { margin-bottom: 0; }
.option:hover { border-color: var(--border-on-dark-strong); }
/* Прозрачный поверх маркера, а не схлопнутый в ноль: так он остаётся
   настоящей кликабельной целью и виден вспомогательным технологиям. */
.option { position: relative; }
.option__input {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer;
}
.option__mark {
  position: relative; flex-shrink: 0; pointer-events: none;   /* клик должен доходить до input */
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--border-on-dark);
  transition: border-color var(--dur-ui) var(--ease-ui);
}
.option__mark::after {
  content: ''; position: absolute; inset: 50% auto auto 50%;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--icon-on-dark);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--dur-ui) var(--ease-ui);
}
.option__input:checked ~ .option__mark { border-color: var(--text-inverted); }
.option__input:checked ~ .option__mark::after { transform: translate(-50%, -50%) scale(1); }
.option:has(.option__input:checked) { background: var(--surface-on-dark-strong); border-color: var(--border-on-dark-strong); }
.option__input:focus-visible ~ .option__mark { outline: 2px solid var(--border-focus); outline-offset: 3px; }
.option__label { font-size: var(--fs-body); pointer-events: none; }

.form__panel {
  padding: clamp(20px, 2.3vw, 31px);
  border: 1px solid var(--border-on-dark-subtle); border-radius: var(--radius-lg);
  background: var(--surface-on-dark);
}
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field__input {
  width: 100%; padding: 17px 20px;
  border: 1px solid var(--border-on-dark); border-radius: var(--radius-md);
  background: var(--surface-on-dark);
  color: var(--text-inverted);
  font-family: var(--font-text); font-size: 16px;   /* 16px — иначе iOS зумит при фокусе */
  transition: border-color var(--dur-ui) var(--ease-ui), background var(--dur-ui) var(--ease-ui);
}
.field__input::placeholder { color: var(--text-placeholder); }
.field__input:hover { border-color: var(--border-on-dark-strong); }
.field__input:focus {
  outline: 0; border-color: var(--border-focus); border-width: 2px; padding: 16px 19px;
  background: var(--surface-on-dark-strong);
}
.field__input--area { resize: vertical; min-height: 120px; }
.field.is-invalid .field__input { border-color: var(--status-red-on-dark); }
.field__error { display: block; margin-top: 6px; font-size: 12px; color: var(--status-red-on-dark); }

.consent { position: relative; display: flex; align-items: flex-start; gap: 10px; margin-top: 24px; cursor: pointer; }
.consent__input {
  position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; margin: 0; opacity: 0; cursor: pointer;
}
.consent__mark {
  position: relative; flex-shrink: 0; margin-top: 1px; pointer-events: none;
  width: 20px; height: 20px; border-radius: var(--radius-xs);
  border: 1.5px solid var(--border-on-dark);
  transition: background var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui);
}
.consent__mark::after {
  content: ''; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px;
  border-right: 2px solid var(--icon-on-dark); border-bottom: 2px solid var(--icon-on-dark);
  transform: rotate(45deg) scale(0); transform-origin: center;
  transition: transform var(--dur-ui) var(--ease-ui);
}
.consent__input:checked ~ .consent__mark { background: var(--action-primary); border-color: var(--action-primary); }
.consent__input:checked ~ .consent__mark::after { transform: rotate(45deg) scale(1); }
.consent__input:focus-visible ~ .consent__mark { outline: 2px solid var(--border-focus); outline-offset: 3px; }
.consent.is-invalid .consent__mark { border-color: var(--status-red-on-dark); }
.consent__label { font-size: var(--fs-small); line-height: 1.5; color: var(--text-inverted-muted); pointer-events: none; }
.consent__label a {
  pointer-events: auto; position: relative; z-index: 1;
  color: var(--text-inverted); text-decoration: underline; text-underline-offset: 3px;
}
.consent__label a:hover { color: var(--text-accent-bright); }
.consent__error { margin-top: 8px; }

/* Пустым статус не занимает места — иначе под кнопкой висит лишний отступ.
   Элемент остаётся в потоке (не display:none), чтобы aria-live не потерялся. */
/* Приманка для роботов: убрана из потока и с экрана, но остаётся в форме.
   display:none не берём — часть рассыльщиков такие поля пропускает. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { margin-top: 0; font-size: var(--fs-small); }
.form__status:not(:empty) { margin-top: 14px; }
.form__status.is-ok { color: var(--status-green); }
.form__status.is-error { color: var(--status-red-on-dark); }

/* ══════════════ 07 — НОВОСТИ ══════════════ */

/* Сетка новостей подстраивается под их число: админка добавляет и убирает
   карточки, и раскладка не должна разваливаться ни на одной, ни на семи. */
.news {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.3vw, 30px);
  margin-top: var(--sp-block);
  align-items: stretch;
}
/* Правила по числу карточек живут только на десктопе: на планшете и мобильной
   новости идут одной колонкой, и там подстраивать нечего. Медиазапрос нужен
   ещё и потому, что :has повышает вес селектора — без него эти строки
   перебивали бы одноколоночную раскладку ниже по файлу. */
@media (min-width: 1025px) {
  /* Одна — во всю ширину; две и четыре — по две в ряд, иначе остаётся дыра. */
  .news:has(> :nth-child(1):last-child) { grid-template-columns: minmax(0, 1fr); }
  .news:has(> :nth-child(2):last-child),
  .news:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 7, 10, 13… — последняя карточка осталась бы одна в ряду: растягиваем её. */
  .news:has(> :nth-child(7)) .news__item:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}
.news__item { display: flex; }
.news-card {
  display: flex; flex-direction: column; width: 100%;
  padding: clamp(20px, 2.3vw, 30px);
  border: 1px solid var(--border-default); border-radius: 30px;
  background: var(--surface);
}

/* Карточка новости из макета: дата синяя 18, заголовок 20, снизу источник 18 серым.
   Ссылки «Читать» в макете нет — вместо неё подпись, откуда новость. */
.news-card__date {
  font-family: var(--font-ui); font-size: clamp(15px, 1.32vw, 18px); font-weight: 500;
  line-height: 1.4; color: var(--text-accent);
}
.news-card__title {
  margin-top: 22px; font-size: clamp(16px, 1.46vw, 20px); font-weight: 500; line-height: 1.4;
  color: var(--text-primary);
}
/* Заголовок-ссылка: появляется, когда в админке у новости указан адрес. */
.news-card__link { color: inherit; text-decoration: none; }
.news-card__link:hover { color: var(--text-accent); }
.news-card__link::after { content: ''; position: absolute; inset: 0; }
.news-card { position: relative; }
.news-card__source {
  margin-top: 22px; font-size: clamp(15px, 1.32vw, 18px); line-height: 1.4;
  color: var(--text-secondary);
}

/* ══════════════ 08 — МИРОВОЙ ОПЫТ ══════════════ */

.world {
  display: grid; grid-template-columns: minmax(0, 339px) minmax(0, 1fr);
  gap: clamp(24px, 4.3vw, 59px);
}
.world__label {
  font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--text-primary);
}
.world__label--list { padding-left: 20px; margin-bottom: 22px; }

.filters { margin-top: 22px; display: flex; flex-direction: column; gap: 9px; }
.filter {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 15px 23px;
  border: 1px solid var(--border-on-light-subtle); border-radius: var(--radius-md);
  background: transparent; cursor: pointer;
  font-size: calc(18 * var(--u)); text-align: left;
  transition: background var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui),
              border-color var(--dur-ui) var(--ease-ui);
}
.filter__count { color: var(--text-secondary); flex-shrink: 0; }
.filter:hover { background: var(--action-secondary-hover); }
.filter.is-active { background: var(--surface-subtle); color: var(--text-accent); font-weight: 500; }
.filter.is-active .filter__count { color: var(--text-accent); }

.world__sources {
  margin-top: clamp(24px, 3.4vw, 47px); padding: 28px;
  border-radius: var(--radius-lg); background: var(--surface-subtle);
  font-size: var(--fs-small); line-height: 1.6; color: var(--text-secondary);
}

.centers { display: flex; flex-direction: column; }
.center {
  border-top: 1px solid var(--border-on-light-subtle);
  transition: background var(--dur-ui) var(--ease-ui);
}
.center:last-child { border-bottom: 1px solid var(--border-on-light-subtle); }
.center__head {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 22px 20px; border: 0; background: transparent; cursor: pointer; text-align: left;
  /* кнопка внутри h3 наследует жирность заголовка — сбрасываем, вес задаёт .center__name */
  font-weight: 400;
  transition: background var(--dur-ui) var(--ease-ui);
}
@media (hover: hover) {
  .center__head:hover { background: var(--action-secondary-hover); }
}
/* Название и город — колонкой: в макете город стоит под названием, не рядом. */
.center__id { display: flex; flex-direction: column; min-width: 0; }
.center__name { font-size: clamp(17px, 1.6vw, 22px); font-weight: 500; letter-spacing: -.01em; }
.center__place { margin-top: 4px; font-size: calc(16 * var(--u)); color: var(--text-secondary); }
.center__since {
  margin-left: auto; flex-shrink: 0;
  padding: 6px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-full);
  font-size: calc(14 * var(--u)); color: var(--text-secondary);
}
.center__toggle {
  position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border-default); background: transparent;
  transition: background var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui);
}
.center__toggle::before, .center__toggle::after {
  content: ''; position: absolute; inset: 50% auto auto 50%;
  background: var(--icon-accent);
  transition: transform var(--dur-ui) var(--ease-ui), background var(--dur-ui) var(--ease-ui);
}
.center__toggle::before { width: 12px; height: 1.5px; transform: translate(-50%, -50%); }
.center__toggle::after { width: 1.5px; height: 12px; transform: translate(-50%, -50%); }
.center.is-open .center__toggle { background: var(--action-primary); border-color: var(--action-primary); }
.center.is-open .center__toggle::before,
.center.is-open .center__toggle::after { background: var(--icon-on-dark); }
.center.is-open .center__toggle::after { transform: translate(-50%, -50%) scaleY(0); }
.center.is-open { background: var(--surface-subtle); }
.center.is-open .center__name { color: var(--text-accent); }

.center__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease-out); }
.center.is-open .center__panel { grid-template-rows: 1fr; }
.center__inner { overflow: hidden; }
.center__content { padding: 0 20px 24px; }
.center__stats { display: flex; flex-wrap: wrap; gap: 10px; }
.center__stat {
  padding: 5px 12px; border: 1px solid var(--border-accent-light); border-radius: var(--radius-full);
  font-size: var(--fs-small); color: var(--text-accent);
}
.center__stat--since { display: none; }
.center__desc { margin-top: 18px; font-size: var(--fs-body); line-height: 1.6; color: var(--text-secondary); }

/* ══════════════ ФУТЕР ══════════════ */

.footer {
  padding-block: clamp(40px, 4.4vw, 60px);
  background: var(--grad-section-dark);
  color: var(--text-inverted);
}
.footer__top {
  display: grid; grid-template-columns: minmax(0, 274px) auto auto minmax(0, 306px);
  gap: clamp(24px, 3.5vw, 48px);
  justify-content: space-between;
}
.footer__brand { max-width: 274px; }
.footer__about {
  margin-top: 22px; font-size: var(--fs-small); line-height: 1.6;
  color: var(--text-inverted-muted);
}
.footer__title {
  font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-inverted-subtle);
}
.footer__links { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.footer__links a, .footer__links span {
  font-size: 14px; line-height: 1.45; color: var(--text-inverted);
  transition: color var(--dur-ui) var(--ease-ui);
}
.footer__links a:hover { color: var(--text-accent-bright); }

.tags { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  padding: 5px 12px; border: 1px solid var(--border-on-dark-subtle); border-radius: var(--radius-full);
  font-size: var(--fs-small); color: var(--text-inverted-secondary);
}
.footer__note {
  margin-top: 24px; font-size: var(--fs-small); line-height: 1.6;
  color: var(--text-inverted-subtle);
}
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center;
  margin-top: clamp(32px, 3.2vw, 44px); padding-top: 18px;
  border-top: 1px solid var(--border-on-dark-subtle);
}
.footer__copy { font-size: var(--fs-small); color: var(--text-inverted-subtle); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 16px 47px; margin-left: auto; }
.footer__legal a {
  font-size: var(--fs-small); color: var(--text-inverted-subtle);
  transition: color var(--dur-ui) var(--ease-ui);
}
.footer__legal a:hover { color: var(--text-inverted); }

/* ══════════════ ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ ══════════════
   Скрываем только когда JS жив: без него контент виден сразу. */

.js [data-anim] { opacity: 0; will-change: opacity, transform; }
.js [data-anim="up"] { transform: translateY(20px); }
.js [data-anim="fade"] { transform: none; }
.js [data-anim].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--anim-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ══════════════════════════════════════════════════════════════
   АДАПТИВ
   Пороги взяты от контента: меню перестаёт помещаться на 1120,
   трёхколоночные сетки ломаются на 900, две колонки — на 720.
   ══════════════════════════════════════════════════════════════ */

/* Планшет: числа взяты из фрейма teblet 768, а не пересчитаны с десктопа */
@media (min-width: 720px) and (max-width: 1024px) {
  .about__photo { aspect-ratio: 1240 / 663; }
}

@media (max-width: 1024px) {
  /* Планшет и мобильная собраны иначе десктопа: описание идёт под заголовком
     на всю ширину и текст в нём короче; подпись стоит НАД цитатой, синим,
     под ней тонкая линия; в цитате три фразы выделены; знака кавычки нет. */
  .section { padding-top: calc(40 * var(--u)); padding-bottom: calc(72 * var(--u)); }
  .section:has(+ .section--card),
  .section:has(+ .section--rounded) { padding-bottom: calc(72 * var(--u)); }
  .section--card + .section { padding-top: calc(40 * var(--u)); }
  #news { padding-bottom: calc(32 * var(--u)); }

  .about__head { grid-template-columns: minmax(0, 1fr); gap: calc(29 * var(--u)); }

  /* Блок 08 в одну колонку: «Регионы» с фильтрами сверху,
     список центров, источники в конце. */
  .world { grid-template-columns: 1fr; }
  .world { row-gap: 0; }
  .world__filters { display: contents; }
  .world__filters > .world__label { order: 1; }
  .filters { order: 2; margin-top: calc(18 * var(--u)); flex-direction: row; flex-wrap: wrap; }
  .world__label--list { padding-left: 0; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: calc(18 * var(--u)); }
  .footer__legal { margin-left: 0; }
  .filter { width: auto; }
  .world__list { order: 3; margin-top: calc(40 * var(--u)); }
  .world__sources { order: 4; margin-top: calc(28 * var(--u)); }

  .about__title { font-size: calc(32 * var(--u)); }
  .about__lead--wide { display: none; }
  .about__lead--compact { display: block; font-size: calc(17 * var(--u)); line-height: 1.5; }
  .about__media { margin-top: calc(30 * var(--u)); }
  .about__caption { flex-direction: column; align-items: stretch; gap: calc(11 * var(--u)); margin-top: calc(30 * var(--u)); }
  .about__mark { display: none; }
  .about__quote { order: 2; gap: 0; max-width: none; }
  .about__quote-text { font-size: calc(20 * var(--u)); line-height: 1.5; }
  .about__hl { font-weight: 600; color: var(--blue-600); }
  .about__source {
    order: 1; width: auto; padding: 0 0 calc(11 * var(--u));
    border-bottom: 1px solid var(--border-default);
    font-size: calc(20 * var(--u)); font-weight: 500; line-height: 1.4;
    text-align: left; color: var(--text-accent-strong);
  }
  .about__source::before { display: none; }
  .about__source-vv { display: inline; }

  .hero__title { font-size: calc(42 * var(--u)); max-width: calc(488 * var(--u)); display: flex; flex-direction: column; }
  .hero__lead  { font-size: calc(18 * var(--u)); max-width: calc(479 * var(--u)); margin-top: calc(16 * var(--u)); }
  .hero__actions { gap: calc(15 * var(--u)); margin-top: calc(42 * var(--u)); }
  .hero__note {
    width: calc(157 * var(--u)); padding-left: 0; padding-top: calc(8 * var(--u));
    font-size: calc(12 * var(--u)); text-align: right;
  }
  .hero__note::before { left: auto; right: 0; top: 0; bottom: auto; width: calc(45 * var(--u)); height: 1px; }
}

@media (max-width: 1120px) {
  :root { --header-h: 88px; }
  .nav, .header__cta { display: none; }
  .burger { display: flex; }
  .header__inner { justify-content: space-between; }
  .logo__sub { display: block; }   /* в мобильном макете дескриптор виден */
}

@media (max-width: 1000px) {
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; max-width: 460px; }
  .footer__col--wide { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  .cards--3, .news { grid-template-columns: minmax(0, 1fr); }

  /* Блок 03: «Перспективы» в узких макетах нет — заголовком становится
     «Что изменит Восточный финансовый центр», вторая часть синяя. */
  #prospects .display,
  #news .display { display: none; }
  #prospects .split,
  #news .split { display: block; }
  #prospects .split__aside,
  #news .split__aside {
    font-family: var(--font-text);
    font-size: calc(32 * var(--u)); font-weight: 500; line-height: 1.2;
    text-align: left; color: var(--text-primary);
  }
  #prospects .split__aside-lead,
  #news .split__aside-lead { display: inline; }
  #prospects .split__aside .accent,
  #news .split__aside .accent { display: inline; color: var(--blue-600); }

  /* Блок 05: «ДЕЙСТВУЕТ» тоже нет. Порядок из макета — надзаголовок,
     заголовок, линия, строка про торги, сетка направлений, плашки. */
  #exchange .container { display: flex; flex-direction: column; }
  #exchange .split { display: contents; }
  #exchange .display { display: none; }
  #exchange .eyebrow { order: 1; }
  #exchange .section__head--split { order: 2; display: block; }
  #exchange .section__head--split .section__lead { display: none; }
  #exchange .section__subtitle { font-size: calc(32 * var(--u)); }
  #exchange .rule { order: 3; margin-top: calc(13 * var(--u)); }
  #exchange .split__aside {
    order: 4; margin-top: calc(13 * var(--u));
    text-align: left; font-size: calc(18 * var(--u)); font-weight: 400; line-height: 1.4;
    color: var(--text-primary);
  }
  #exchange .split__aside-lead { display: inline; }
  #exchange .exchange__tags { order: 5; }
  #exchange .panels { order: 6; }
  #exchange .exchange__actions { order: 7; }

  .exchange__tags {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: calc(37 * var(--u));
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md); overflow: clip;
  }
  .exchange__tags li {
    padding: calc(10 * var(--u)); min-height: calc(39 * var(--u));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-ui); font-size: calc(14 * var(--u)); letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-accent);
  }
  .exchange__tags li:nth-child(odd) { border-right: 1px solid var(--border-default); }
  .exchange__tags li:nth-child(n+3) { border-top: 1px solid var(--border-default); }

  /* Блок 02 идёт во всю ширину: у секции нет боковых отступов, скругление
     и фон живут на самой карточке, шапка выровнена по левому краю. */
  .section--card { position: relative; margin-top: calc(-1 * var(--overlap)); padding: 0; }
  .section--card > .container { width: 100%; }
  .section__card {
    padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(72 * var(--u));
    border-radius: var(--section-radius) var(--section-radius) 0 0;
  }
  .section__card .section__head--center { align-items: flex-start; text-align: left; }
  .section__card .section__title--center { text-align: left; max-width: none; margin-inline: 0; }
  /* Блок 02 здесь полноширинный тёмный, поэтому стык с блоком 03 тоже
     скруглён. На десктопе блок 02 — карточка внутри светлой секции,
     там скруглять нечего. */
  .section--card + .section {
    position: relative;
    margin-top: calc(-1 * var(--overlap));
    padding-top: calc(40 * var(--u));
    border-top-left-radius: var(--section-radius);
    border-top-right-radius: var(--section-radius);
  }
  .cards--3 > :last-child, .news__item:last-child { grid-column: 1 / -1; }
  /* В планшетном и мобильном фреймах пункты идут одной колонкой,
     номер стоит слева от текста и уменьшен с 60 до 35. */
  .matrix { grid-template-columns: minmax(0, 1fr); }
  .matrix__item,
  .matrix__item:not(:nth-child(3n)),
  .matrix__item:not(:nth-child(3n+1)) {
    display: grid; grid-template-columns: calc(43 * var(--u)) minmax(0, 1fr);
    column-gap: calc(24 * var(--u)); align-items: start;
    border-right: 0; padding-left: 0; padding-right: 0;
    padding-top: calc(30 * var(--u)); padding-bottom: calc(30 * var(--u));
  }
  .matrix__num { grid-row: 1 / span 2; font-size: calc(35 * var(--u)); letter-spacing: -.05em; }
  .matrix__title { grid-column: 2; margin-top: 0; }
  .matrix__text { grid-column: 2; }
  .section__head--split, .split { grid-template-columns: minmax(0, 1fr); align-items: start; gap: calc(20 * var(--u)); }
  /* «Перейти на сайт» не помещается в строку с кнопками — уводим её
     на отдельную строку и прижимаем влево, а не вправо. */
  #exchange .exchange__actions .text-link {
    flex-basis: 100%; margin-left: 0; text-align: left;
    margin-top: calc(14 * var(--u));
  }
  .split__aside { text-align: left; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__note { padding-left: 18px; }
  .form { grid-template-columns: 1fr; }
  .about__head { grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 3vw, 28px); }
  .about__caption { flex-direction: column; align-items: flex-start; gap: 24px; }
  .about__source { width: auto; text-align: left; padding-top: 14px; }
  .about__source::before { right: auto; left: 0; }
  .status { grid-template-columns: 1fr; gap: calc(24 * var(--u)); }
  .status__dots { display: none; }
  .status__label   { font-size: calc(24 * var(--u)); }
  .status__eyebrow { font-size: calc(12 * var(--u)); }
  .status__title   { font-size: calc(20 * var(--u)); max-width: none; }
  .status__note    { font-size: calc(16 * var(--u)); max-width: none; }
}

/* Мобильный: композиция первого экрана в макете другая —
   заголовок в две строки разного кегля, лида нет, кнопки прижаты к низу. */
@media (max-width: 600px) {
  /* Мобильный макет: заголовок с чертой и подписью стоят плотной группой
     вверху (зазоры 12), кнопки прижаты к низу. Грид с align-content:
     space-between растаскивал свободное место между всеми строками —
     отсюда и разъехавшиеся отступы. Колонка на флексе делает ровно то,
     что в макете: группа сверху, кнопки на margin-top:auto. */
  /* В мобильном фрейме контент секции начинается в 37px от её верха,
     снизу 100, а следующая секция наезжает на 40. */
  /* «Статус / 2026» в мобильном макете — простая карточка с отступом 16,
     без колонки с точками: заголовок, надзаголовок, синий текст, сноска. */
  .status { grid-template-columns: 1fr; gap: calc(30 * var(--u)); padding: calc(16 * var(--u)); }
  .status__dots { display: none; }
  .status__label { font-size: calc(24 * var(--u)); }
  .status__eyebrow { font-size: calc(12 * var(--u)); }
  .status__title { font-size: calc(19 * var(--u)); }
  .status__note { font-size: calc(16 * var(--u)); }

  /* Нижний отступ больше верхнего: следующая секция скруглённая и наезжает
     на предыдущую на --overlap (40), поэтому чистый зазор = 90 − 40. */
  .section { padding-top: calc(37 * var(--u)); padding-bottom: calc(90 * var(--u)); }
  .section--card { padding: 0; }
  /* Верх карточки = padding-top обычной секции (37): у блока 02 видимый край —
     это край карточки, а не секции, иначе eyebrow сидит выше, чем в остальных. */
  .section__card { padding: calc(37 * var(--u)) calc(16 * var(--u)) calc(72 * var(--u)); }
  /* #news и #world — одна светлая зона, но зазор до её второй половины
     держим таким же, как между блоками. */
  #news { padding-bottom: calc(48 * var(--u)); }
  /* Перед подвалом наезда нет — компенсировать нечего, отступ меньше межблочного. */
  main > .section:last-child { padding-bottom: calc(64 * var(--u)); }

  /* Блок 08 на мобилке: заголовок и описание крупнее, фильтры мельче —
     табы перетягивали на себя внимание с шапки блока. */
  .section__title { font-size: calc(30 * var(--u)); }
  .section__head--split .section__lead { font-size: calc(19 * var(--u)); }
  .panel__title { font-size: calc(22 * var(--u)); }
  /* «и финансовых организаций» растягивает заголовок блока 02 на пять строк. */
  .title__wide { display: none; }
  .title__narrow { display: inline; }
  .filter { font-size: calc(16 * var(--u)); padding: calc(13 * var(--u)) calc(18 * var(--u)); }
  /* Кнопка отправки на мобильной во всю ширину — сообщение под ней
     выравниваем по её центру, иначе висит прижатым влево. */
  .form__status { text-align: center; }

  /* Год основания уводим из строки центра внутрь раскрывающейся панели:
     длинные подписи вроде «с дек. 2025» выдавливали плюс на вторую строку. */
  .center__since { display: none; }
  .center__stat--since { display: inline-block; }
  .section:has(+ .section--card),
  .section:has(+ .section--rounded) { padding-bottom: calc(90 * var(--u)); }
  .section--card + .section { padding-top: calc(37 * var(--u)); }

  .hero {
    align-items: stretch;
    padding-top: calc(103 * var(--u));
    /* Запас --hero-safe сюда намеренно не входит: кнопки прижаты к низу
       кадра, и ничего страшного, если нижняя уходит под адресную строку. */
    padding-bottom: calc(26 * var(--u) + var(--overlap));
    /* Запас поверх вьюпорта. Мобильные браузеры отдают высоту с точностью
       до нескольких пикселей и пересчитывают её при движении адресной строки,
       поэтому ровно 100dvh иногда оставляет снизу светлую полоску следующей
       секции. 32px запаса гарантируют, что её край всегда ниже среза. */
    --hero-safe: 48px;
  }
  .hero__inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero__content { display: contents; }

  .hero__title {
    order: 1; max-width: none; margin-top: 0;
    display: flex; flex-direction: column; gap: calc(4 * var(--u));
  }
  .hero__title-accent { font-size: calc(62 * var(--u)); text-align: center; }
  .hero__title-rest   { font-size: calc(32 * var(--u)); text-align: center; }

  .hero__rule {
    order: 2; display: block; width: calc(295 * var(--u)); height: 1px;
    margin: calc(12 * var(--u)) auto 0; background: var(--border-on-dark-subtle);
  }
  .hero__lead { display: none; }            /* в мобильном макете лида нет */
  .hero__note {
    order: 3; width: calc(320 * var(--u)); margin: calc(12 * var(--u)) auto 0;
    padding: 0; font-size: calc(18 * var(--u)); text-align: center;
  }
  .hero__note::before { display: none; }
  .hero__actions {
    order: 4; margin-top: auto; padding-top: calc(40 * var(--u));
    flex-direction: column; gap: calc(13 * var(--u));
  }
  .hero__actions .btn { width: 100%; }
}

/* С 601 до 900 подпись уже не помещается рядом с кнопками и падает под них
   узкой колонкой в шесть строк. В этом диапазоне убираем её совсем. */
@media (min-width: 601px) and (max-width: 1024px) {
  .hero__note { display: none; }
  /* в планшетном фрейме блока новостей нет — кегль подобран под ширину карточки */
  .news-card__title { font-size: clamp(16px, calc(18 * var(--u)), 20px); }
}

@media (max-width: 720px) {
  .cards--3, .news { grid-template-columns: 1fr; }
  .cards--3 > :last-child, .news__item:last-child { grid-column: auto; }
  .matrix { grid-template-columns: 1fr; }
  .matrix__item,
  .matrix__item:nth-child(odd), .matrix__item:nth-child(even) {
    border-right: 0; padding-left: 0; padding-right: 0;
  }
  .matrix__item { column-gap: calc(12 * var(--u)); }
  /* В одну колонку линия под последним пунктом лишняя: она ничего не разделяет,
     а только отбивает список от карточки статуса. */
  .matrix__item:last-child { border-bottom: 0; }
  .panels { grid-template-columns: 1fr; }
  .form__grid { grid-template-columns: 1fr; }
  /* На мобильной от планшета отличаются только кегли и пропорция снимка. */
  .about__title { font-size: calc(30 * var(--u)); }
  #prospects .split__aside,
  #news .split__aside,
  #exchange .section__subtitle { font-size: calc(30 * var(--u)); }
  .eyebrow__tail { display: none; }

  .section__head--center { align-items: flex-start; text-align: left; }
  .section__title--center { text-align: left; max-width: none; margin-inline: 0; }
  .section__lead--center { text-align: left; margin-inline: 0; max-width: none; }
  .about__title em { display: inline; }        /* на мобильной переносится по ширине */
  .about__lead--compact { font-size: calc(16 * var(--u)); line-height: 1.5; }
  .about__head { gap: calc(17 * var(--u)); }
  .about__media { margin-top: calc(42 * var(--u)); }
  .about__caption { margin-top: calc(17 * var(--u)); }
  .about__quote-text { font-size: calc(18 * var(--u)); }
  .about__source { font-size: calc(17 * var(--u)); }
  .exchange__actions { flex-direction: column; align-items: stretch; }
  .exchange__actions .link-btn { justify-content: center; }
  /* Кнопки в колонку и на всю ширину — ссылка под ними ровняется по центру. */
  #exchange .exchange__actions .text-link { margin-left: 0; text-align: center; padding-top: 4px; }
  .center { margin-inline: calc(-1 * var(--gutter)); }
  .center__head { flex-wrap: wrap; padding-inline: var(--gutter); }
  .center__id { order: 1; }
  /* Плашка с годом скрыта — вправо толкаем сам плюс. */
  .center__toggle { order: 3; margin-left: auto; }
  .center__content { padding-inline: var(--gutter); }

  .footer__top { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
}

@media (max-width: 480px) {
  .status { padding: 24px 20px; }
  .form__panel { padding: 18px; }
  /* «Перспективы» — одно длинное слово: на 38px оно шире колонки 343
     и давало горизонтальный вылет. Опускаем нижнюю границу кегля. */
  .display { letter-spacing: -.02em; font-size: clamp(30px, 9.2vw, 38px); }
}

/* ══════════════ ДЕСКТОП: РИТМ ШАПКИ СЕКЦИИ ══════════════ */
/* Надзаголовок подтягиваем к верху секции, а заголовок наоборот отодвигаем
   от него — так шапка читается как группа, а не как три равноудалённые строки.
   Секциям с наездом к отступу прибавляется сама величина наезда, иначе
   контент уедет под предыдущий блок. Адресуемся по id, чтобы не спорить
   с правилами блока 02 и его соседа. */
@media (min-width: 1025px) {
  #about, #exchange, #contact, #news, #prospects, #world, #map {
    padding-top: clamp(34px, 3.95vw, 54px);
  }
  /* Нижний отступ был равен верхнему из --sp-section (120) — между блоками
     набегало больше двухсот пикселей. Разводим верх и низ. */
  .section { padding-bottom: clamp(48px, 6.2vw, 84px); }
  .section--card { padding-bottom: 0; }
}

/* ══════════════ ПРАВОВЫЕ СТРАНИЦЫ ══════════════ */

.legal { padding-block: calc(var(--header-h) + 48px) clamp(56px, 8vw, 110px); background: var(--bg-page); }
.legal__inner { max-width: calc(820 * var(--u)); }
.legal__back {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-ui); font-size: var(--fs-small); color: var(--text-secondary);
  transition: color var(--dur-ui) var(--ease-ui);
}
.legal__back:hover { color: var(--text-accent); }
.legal__title {
  margin-top: clamp(20px, 2.6vw, 34px);
  font-family: var(--font-text);
  font-size: clamp(26px, 2.86vw, 39px); font-weight: 500; line-height: 1.2;
  color: var(--text-primary);
}
.legal__meta { margin-top: 14px; font-size: var(--fs-small); color: var(--text-secondary); }
.legal__lead {
  margin-top: clamp(20px, 2.4vw, 30px);
  font-size: clamp(15px, 1.46vw, 19px); line-height: 1.55; color: var(--text-primary);
}
.legal h2 {
  margin-top: clamp(32px, 4vw, 54px);
  font-size: clamp(18px, 1.75vw, 24px); font-weight: 600; line-height: 1.3;
  color: var(--text-primary);
}
.legal h3 {
  margin-top: clamp(20px, 2.2vw, 28px);
  font-size: clamp(16px, 1.32vw, 18px); font-weight: 600; color: var(--text-primary);
}
.legal p, .legal li { font-size: clamp(14px, 1.17vw, 16px); line-height: 1.65; color: var(--text-secondary); }
.legal p { margin-top: 14px; }
.legal ul, .legal ol { margin-top: 14px; padding-left: 22px; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li { margin-top: 8px; }
.legal li::marker { color: var(--text-accent); }
.legal a { color: var(--text-accent); text-decoration: underline; text-underline-offset: 3px; }
/* Места, которые заполняет заказчик перед публикацией. */
.legal mark {
  background: var(--blue-50); color: var(--blue-700);
  padding: 1px 6px; border-radius: 4px; font-weight: 500;
}
.legal__note {
  margin-top: clamp(32px, 4vw, 54px); padding: clamp(18px, 2.3vw, 28px);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  background: var(--surface);
}
.legal__note p { margin-top: 0; }

/* ══════════════ ПОП-АП ЗАЯВКИ ══════════════ */

.modal {
  width: min(560px, calc(100vw - 32px));
  max-height: min(760px, calc(100svh - 32px));
  padding: 0; border: 0; border-radius: var(--radius-lg);
  background: none; color: var(--text-inverted);
  overflow: visible;
}
.modal::backdrop { background: rgba(1, 8, 24, .72); backdrop-filter: blur(6px); }
.modal[open] { animation: modal-in .28s var(--ease-out); }
.modal[open]::backdrop { animation: fade-in .28s var(--ease-out); }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes fade-in  { from { opacity: 0; } }

.form--modal {
  position: relative;
  display: block; width: 100%;
  max-height: min(760px, calc(100svh - 32px));
  overflow-y: auto; overscroll-behavior: contain;
  margin: 0;
  padding: clamp(22px, 3.4vw, 34px);
  border: 1px solid var(--border-on-dark-subtle); border-radius: var(--radius-lg);
  background: var(--grad-section-dark);
}
.modal__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--border-on-dark-subtle); border-radius: 50%;
  background: var(--surface-on-dark); color: var(--text-inverted);
  cursor: pointer;
  transition: background var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui);
}
.modal__close:hover { background: var(--surface-on-dark-strong); border-color: var(--border-on-dark); }
.modal__title {
  padding-right: 44px;
  font-family: var(--font-text); font-size: clamp(20px, 2.1vw, 26px); font-weight: 500; line-height: 1.2;
}
.modal__lead { margin-top: 8px; font-size: var(--fs-small); color: var(--text-inverted-muted); }

/* Внутри поп-апа форма идёт одной колонкой. */
.form--modal .form__grid { margin-top: 16px; gap: 12px; }
.form--modal .field__input { padding: 13px 16px; }
.form--modal .field__input--area { min-height: 84px; }
.form--modal .consent { margin-top: 16px; }
.form--modal .btn--submit { margin-top: 16px; }


@media (max-width: 600px) {
  .modal { width: calc(100vw - 24px); max-height: calc(100svh - 24px); }
  .form--modal { max-height: calc(100svh - 24px); padding: 20px 16px; }
  .form--modal .form__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .modal[open], .modal[open]::backdrop { animation: none; }
}

/* Вертикальный кадр — строго до 719: с 720 включается горизонтальный. */
@media (max-width: 719px) {
  .about__photo { aspect-ratio: 641 / 770; }
}

/* ══════════════ ПЛАВНОЕ БУРГЕР-МЕНЮ ══════════════ */
/* hidden переключался мгновенно — панель появлялась рывком.
   Теперь она проявляется и уезжает, а hidden снимается после перехода. */
.mobile-menu {
  opacity: 0; transform: translateY(-10px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.mobile-menu.is-open { opacity: 1; transform: none; }
.mobile-menu__list li,
.mobile-menu__cta {
  opacity: 0; transform: translateY(10px);
  transition: opacity .34s var(--ease-out), transform .34s var(--ease-out);
  transition-delay: var(--menu-delay, 0ms);
}
.mobile-menu.is-open .mobile-menu__list li,
.mobile-menu.is-open .mobile-menu__cta { opacity: 1; transform: none; }
.burger__line { transition: transform var(--dur-ui) var(--ease-ui); }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu__list li,
  .mobile-menu__cta { transition: none; }
}