/* =========================================================
   AION — стили
   ========================================================= */

/* ---------- Шрифт (Montserrat, variable, self-hosted) ---------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url("fonts/montserrat-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url("fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Переменные ---------- */
:root {
  /* Цвета */
  --color-bg: #000000;
  --color-surface: #07060E;
  --color-accent: #4D3AFE;
  --color-text: #FFFFFF;
  --color-text-soft: #D6D2E4;
  --color-text-secondary: #A9A5BA;
  --color-text-meta: #77728A;
  --color-line: #1E1B2E;
  --color-border: #2A2540;

  /* Градиенты и свечения */
  --gradient-silver: linear-gradient(180deg, #FFFFFF 15%, #8E8A9C 110%);
  --gradient-btn: linear-gradient(90deg, #4D3AFE 0%, #100C34 100%);
  --btn-border: rgba(120, 100, 255, 0.5);
  /* Свечение кнопок — одинаковое на всём сайте (эталон — первый экран) */
  --btn-glow: 0 0 32px rgba(77, 58, 254, 0.45);        /* постоянное */
  --btn-glow-pulse: 0 0 40px rgba(77, 58, 254, 0.25);  /* мягкая пульсация поверх, слабее наведения */
  --btn-glow-hover: 0 0 72px rgba(77, 58, 254, 0.49);  /* при наведении и нажатии: мягче и шире (было 48px / 0.75) */
  --btn-pulse-period: 3s;
  --btn-scale-hover: 1.04;
  --btn-scale-active: 0.98;

  /* Шрифт */
  --font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;

  /* Размеры текста */
  --fs-hero-title: 80px;
  --fs-hero-subtitle: 20px;
  --fs-lead: 18px;
  --fs-nav: 13px;
  --fs-badge: 13px;
  --fs-btn-sm: 15px;
  --fs-btn-lg: 20px;

  /* Сетка */
  --container: 1240px;
  --gutter: 100px;
  --columns: 12;
  --gap: 24px;

  /* Отступы */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-36: 36px;
  --space-44: 44px;
  --space-48: 48px;
  --space-88: 88px;
  --section-gap: 240px;            /* между секциями (было 160, ×1.5) */

  /* Шапка */
  --header-top: 27px;
  --header-height: 70px;
  --header-inset: 68px; /* от краёв экрана до «пилюли» */
  --header-pad: calc(var(--gutter) - var(--header-inset)); /* логотип и кнопка — по краям контейнера */
  --nav-gap: 50px;
  --nav-to-btn: 79px;

  /* Кнопки и плашка */
  --btn-sm-height: 38px;
  --btn-sm-arrow: 11px;            /* = высоте заглавной N при --fs-btn-sm */
  --btn-lg-height: 55px;
  --badge-height: 40px;

  /* Первый экран: вертикальные отступы */
  --hero-top-gap: 169px;      /* шапка → плашка */
  --hero-title-gap: 50px;    /* плашка → заголовок */
  --hero-subtitle-gap: 15px;  /* заголовок → подзаголовок */
  --hero-text-gap: 35px;      /* подзаголовок → описание */
  --hero-btn-gap: 80px;       /* описание → кнопка */

  /* Шапка секции: метка слева, заголовок и описание справа */
  --fs-eyebrow: 16px;
  --fs-section-title: 50px;
  --section-title-lh: 61px;
  --fs-section-text: 20px;         /* Light */
  --section-text-lh: 25px;
  --section-head-offset: 385px;    /* от края контейнера до заголовка */
  --section-text-gap: 45px;        /* заголовок → описание */
  --section-content-gap: 100px;    /* описание → контент секции */

  /* Суть платформы */
  --fs-quote: 24px;
  --essence-quote-gap: 96px;       /* описание → цитата */
  --quote-indent: 45px;            /* линия → текст цитаты */
  --quote-caption-gap: 45px;       /* цитата → подпись */
  --principles-gap-top: 135px;     /* подпись → карточки */

  /* Принципы */
  --fs-principle-num: 90px;
  --fs-principle-title: 25px;
  --fs-principle-text: 20px;
  --principles-width: 1240px;
  --principles-gap: 20px;
  --principle-width: 265px;           /* свёрнутая; раскрытая забирает остальное место */
  --principle-height: 410px;          /* одинаковая у всех: отступы + цифра + заголовок + 100 + 3 строки описания */
  --principle-radius: 25px;
  --principle-pad: 45px;
  --principle-title-gap: 12px;        /* цифра → заголовок */
  --principle-dur: 0.6s;
  --principle-text-delay: 0.25s;

  /* Глобальный стандарт */
  --fs-compare-title: 24px;
  --fs-compare-num: 24px;
  --fs-compare-name: 17px;
  --fs-compare-text: 15px;
  --compare-gap-top: var(--section-content-gap); /* описание → колонки */
  --compare-pad: 45px;
  --compare-pad-market: 21px;      /* левая колонка без плашки: отступ слева меньше */
  --compare-pad-aion-right: 30px;  /* чтобы описания в карточке помещались в строку, как в макете */
  --compare-num-width: 60px;
  --compare-row-gap: 36px;
  --compare-radius: 30px;
  --compare-pair-step: 0.4s;       /* интервал между парами */
  --compare-side-step: 0.15s;      /* левая строка → правая строка */
  --compare-row-dur: 0.6s;
  --compare-row-shift: 24px;
  --compare-final-pause: 0.5s;     /* все пары появились → финал */
  --compare-final-dur: 0.9s;
  --compare-final-delay: calc(3 * var(--compare-pair-step) + var(--compare-side-step) + var(--compare-row-dur) + var(--compare-final-pause));

  /* Масштаб */
  --fs-scale-caption: 20px;
  --fs-scale-today: 16px;
  --fs-scale-number: 200px;
  --fs-scale-title: 22px;
  --fs-scale-text: 20px;
  --scale-text-lh: 27px;
  --fs-scale-row: 20px;
  --fs-scale-value: 30px;
  --scale-gap-top: var(--section-content-gap); /* описание секции → счётчик */
  --scale-number-gap: 70px;        /* подпись с точкой → цифра */
  --scale-info-gap: 100px;         /* цифра → заголовок */
  --scale-text-gap: 25px;          /* заголовок → описание */
  --scale-text-width: 400px;
  --scale-list-width: 342px;
  --scale-row-pad: 25px;           /* от текста строки до линии (и сверху) */
  --scale-slide: 2.7s;             /* автопоказ (один круг): сколько показывается цифра, столько же растёт линия */
  --scale-fade: 0.3s;

  /* Архитектура */
  --fs-arch-label: 13px;
  --fs-arch-title: 28px;
  --fs-arch-title-escrow: 30px;
  --fs-arch-text: 14px;
  --fs-arch-timer: 68px;
  --fs-arch-sla: 13px;
  --fs-arch-meta: 15px;
  --fs-arch-prompt: 16px;
  --fs-arch-answer: 14px;
  --fs-arch-city: 13px;
  --fs-arch-step: 13px;
  --fs-arch-check: 15px;
  --fs-arch-verified: 14px;
  --fs-arch-flow-label: 13px;
  --arch-gap-top: var(--section-content-gap); /* описание секции → плашки */
  --arch-gap: 20px;                /* между плашками */
  --arch-pad-y: 40px;
  --arch-pad-x: 45px;
  --arch-radius: 30px;
  --arch-label-gap: 12px;          /* метка → заголовок */
  --arch-text-gap: 18px;           /* заголовок → описание */
  --arch-text-width: 500px;
  --arch-text-width-escrow: 580px;
  --arch-cities-gap-top: 26px;     /* описание → кнопки городов */
  --arch-city-height: 36px;
  --arch-city-pad: 15px;
  --arch-city-gap: 16px;
  --arch-sla-gap: 4px;             /* таймер → SLA */
  --arch-step-height: 42px;
  --arch-step-pad: 21px;
  --arch-check-row: 36px;          /* шаг строк проверок паспорта */
  --arch-score-gap: 56px;          /* кольцо → проверки */
  --arch-voice-info: 412px;        /* ширина левой колонки агента */
  --arch-chat-gap: 53px;           /* разделитель → диалог */
  --arch-node: 100px;              /* круги в схеме эскроу */
  --arch-bg: #07060E;              /* заливка плашек, без градиента (styles.txt) */
  --fw-semibold: 600;

  /* Super App */
  --fs-superapp-item: 20px;
  --superapp-title-gap: 70px;      /* метка → заголовок */
  --superapp-list-gap: 70px;       /* описание → строки */
  --superapp-btn-gap: 70px;        /* строки → кнопка */
  --superapp-item-scale: 1.05;     /* строка при наведении */
  --superapp-row: 68px;
  --superapp-list-width: 672px;
  /* Телефон: всё считается от ширины, чтобы пропорции рамки и экрана не менялись.
     --phone-u — 1px исходной 300-пиксельной модели */
  --phone-width: 310px;
  --phone-u: calc(var(--phone-width) / 300);
  --phone-bezel: calc(10 * var(--phone-u));
  --phone-radius: calc(50 * var(--phone-u));
  --phone-tilt: perspective(1600px) rotateY(-22deg) rotateX(8deg) rotateZ(3deg);
  --superapp-float: 12px;
  --superapp-row-step: 0.4s;       /* строки загораются по очереди */

  /* Партнёрам */
  --fs-partners-num: 132px;
  --fs-partners-text: 17px;
  --partners-stats-gap: var(--section-content-gap); /* описание → цифры */
  --partners-text-gap: 50px;       /* цифра → подпись */
  --partners-btn-gap: 90px;        /* подписи → кнопка */
  --partners-col-pad: 32px;        /* от разделителя до текста */

  /* Дорожная карта */
  --fs-road-status: 12px;
  --fs-road-date: 16px;
  --fs-road-title: 30px;
  --fs-road-text: 16px;
  --fs-road-point: 14px;
  --fs-road-main: 36px;
  --fs-road-tag: 12px;
  --road-gap-top: var(--section-content-gap); /* описание секции → шкала */
  --road-dot-col: 56px;            /* колонка со шкалой */
  --road-when-col: 260px;          /* статус и дата */
  --road-metric-col: 280px;        /* главная цифра и метки */
  --road-col-gap: 32px;
  --road-row-gap: 72px;            /* между этапами */
  --road-dot: 14px;
  --road-dot-current: 20px;
  --road-line: 2px;
  --road-rise: 30px;

  /* Контакты */
  --fs-desk-label: 12px;
  --fs-desk-name: 20px;
  --fs-desk-text: 15px;
  --fs-desk-contact: 16px;
  --fs-desk-copied: 12px;
  --contacts-pad: 192px;           /* сверху и снизу секции (было 128, ×1.5) */
  /* Колонки одинаковые во всех строках таблицы (на 1440 с полосой прокрутки — 1225px):
     200 + 64 + 652 + 64 + 244 ≤ 1225 */
  --desk-name-col: 200px;          /* все названия — в 2 строки («Служба заботы / и поддержки» и т. д.) */
  --desk-text-col: 652px;          /* по самой длинной строке («…повседневной жизни,» — 650px) + запас на отрисовку шрифта */
  --desk-contacts-col: 244px;      /* по самому длинному контакту (compliance@aion.global + кнопка — 240px) */
  --desk-col-gap: 64px;            /* минимум между колонками; свободное место делится между промежутками */
  --desks-gap-top: var(--section-content-gap); /* шапка → таблица */
  --desk-pad-y: 36px;
  --desk-pad-x: 24px;
  --desk-radius: 16px;
  --desk-line: #1E1B2E;
  --desk-hover-bg: #07060E;

  /* Футер */
  --fs-footer-social: 24px;
  --fs-footer-mail: 15px;
  --fs-footer-copy: 13px;
  --fs-footer-logo: min(357px, 24.8vw); /* на всю ширину контейнера */
  --footer-pad-top: 80px;
  --footer-mails-gap: 32px;        /* соцсети → почты */
  --footer-logo-gap: 110px;        /* почты → логотип */
  --footer-copy-gap: 80px;         /* логотип → копирайт */
  --footer-pad-bottom: 48px;
  --footer-logo-rise: 80px;

  /* Скругления */
  --radius-pill: 999px;

  /* Движение — единые правила для всего сайта:
     анимируются только transform и opacity;
     кривая для движения (transform) — --ease, для прозрачности — --ease-fade */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-fade: ease;
  --dur-fast: 0.3s;
  --dur-cloud-fade: 0.6s;
  --reveal-dur: 0.7s;              /* появление при прокрутке */
  --reveal-shift: 24px;            /* подъём заголовков, описаний, блоков */
  --reveal-shift-x: 32px;          /* выезд метки секции слева */
}

/* ---------- База ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-top) + var(--header-height) + var(--space-24));
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

ul {
  list-style: none;
}

img,
svg,
canvas {
  display: block;
}

:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 4px;
}

/* Принудительный перенос только для десктопа (там, где подбором ширины не получается) */
@media (max-width: 1023px) {
  .br-desktop {
    display: none;
  }
}

/* ---------- Контейнер и сетка ---------- */
.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  column-gap: var(--gap);
}

/* ---------- Появление при прокрутке ----------
   Элементы с data-reveal скрыты до появления. Класс is-revealed и задержку --reveal-delay
   ставит main.js (initReveals): один раз, по очереди внутри секции */
.js [data-reveal] {
  opacity: 0;
  transform: var(--reveal-from);
  transition:
    opacity var(--reveal-dur) var(--ease-fade) var(--reveal-delay, 0s),
    transform var(--reveal-dur) var(--ease) var(--reveal-delay, 0s);
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

[data-reveal="up"]         { --reveal-from: translateY(var(--reveal-shift)); }      /* заголовки, описания, блоки */
[data-reveal="up-40"]      { --reveal-from: translateY(40px); }                     /* плашки архитектуры */
[data-reveal="left"]       { --reveal-from: translateX(calc(-1 * var(--reveal-shift-x))); } /* метки секций */
[data-reveal="from-left"]  { --reveal-from: translateX(-48px); }
[data-reveal="from-right"] { --reveal-from: translateX(48px); }
[data-reveal="fade"]       { --reveal-from: none; }
[data-reveal="phone"]      { --reveal-from: translateX(80px); --reveal-dur: 0.9s; }

/* Горизонтальные сдвиги не дают горизонтальной прокрутки */
main > section {
  overflow-x: clip;
}

/* ---------- Кнопки ---------- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-text);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--gradient-btn);
  box-shadow: var(--btn-glow);
  transition: transform var(--dur-fast) var(--ease);
}

/* Слои свечения поверх постоянного: ::before — мягкая пульсация, ::after — наведение.
   Оба меняют только opacity */
.btn::before,
.btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.btn::before {
  box-shadow: var(--btn-glow-pulse);
  animation: btn-pulse var(--btn-pulse-period) var(--ease-fade) infinite;
}

@keyframes btn-pulse {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

.btn::after {
  box-shadow: var(--btn-glow-hover);
  transition: opacity var(--dur-fast) var(--ease-fade);
}

/* transform не влияет на поток — соседние элементы не сдвигаются */
.btn:hover {
  transform: scale(var(--btn-scale-hover));
}

.btn:hover::after,
.btn:active::after {
  opacity: 1;
}

.btn:active {
  transform: scale(var(--btn-scale-active));
}

.btn__arrow {
  flex-shrink: 0;
  width: 8px;
  height: 14px;
}

/* В маленькой кнопке стрелка высотой с заглавную букву текста (N при 15px — 11px) */
.btn--sm .btn__arrow {
  width: calc(var(--btn-sm-arrow) * 8 / 14);
  height: var(--btn-sm-arrow);
}

.btn--sm {
  height: var(--btn-sm-height);
  padding-inline: var(--space-24);
  gap: var(--space-20);
  font-size: var(--fs-btn-sm);
}

.btn--lg {
  height: var(--btn-lg-height);
  padding-inline: var(--space-36);
  gap: var(--space-44);
  font-size: var(--fs-btn-lg);
}

/* =========================================================
   Шапка
   ========================================================= */
.header {
  position: fixed;
  top: var(--header-top);
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
}

.header__pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  margin-inline: var(--header-inset);
  padding-inline: var(--header-pad);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(7, 6, 14, 0.6) 0%, rgba(20, 14, 52, 0.6) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: auto;
}

.logo {
  flex-shrink: 0;
}

.logo__svg {
  width: 128px;
  height: 26px;
}

.nav {
  margin-left: auto;
  margin-right: var(--nav-to-btn);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}

.nav__link {
  position: relative;
  display: block;
  padding-block: var(--space-8);
  font-size: var(--fs-nav);
  color: var(--color-text);
  white-space: nowrap;
  opacity: 0.66; /* приглушённый белый ≈ второстепенный текст */
  transition: opacity var(--dur-fast) var(--ease-fade);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--color-accent);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-fade);
}

.nav__link:hover,
.nav__link.is-active {
  opacity: 1;
}

.nav__link:hover::after,
.nav__link.is-active::after {
  opacity: 1;
}

/* =========================================================
   Первый экран
   ========================================================= */
.hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
  padding-top: calc(var(--header-top) + var(--header-height) + var(--hero-top-gap));
  padding-bottom: var(--space-24);
  overflow: hidden;
  isolation: isolate;
}

/* Фон: облако частиц / запасная картинка + затемнение слева */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-bg);
}

.hero__canvas,
.hero__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__canvas {
  opacity: 0;
  transition: opacity var(--dur-cloud-fade) var(--ease-fade);
}

.hero__canvas.is-visible {
  opacity: 1;
}

.hero__fallback {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Запасной вариант: нет JS / нет WebGL (класс из main.js) */
.no-js .hero__fallback,
.hero--fallback .hero__fallback {
  background-image: url("assets/hero-fallback.jpg");
}

.no-js .hero__canvas,
.hero--fallback .hero__canvas {
  display: none;
}

.hero__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #000 20%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0) 58%);
}

/* Контент */
.hero__container {
  position: relative;
}

.hero__content {
  grid-column: 1 / span 7;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-20);
  height: var(--badge-height);
  padding-inline: var(--space-36);
  border-radius: var(--radius-pill);
  background: rgba(40, 30, 90, 0.25);
  font-size: var(--fs-badge);
  letter-spacing: 0.2em;
  white-space: nowrap;
}

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

.badge__dot {
  color: var(--color-accent);
  letter-spacing: 0;
}

.badge__text {
  color: var(--color-text-secondary);
}

.hero__title {
  margin-top: var(--hero-title-gap);
  font-size: var(--fs-hero-title);
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: 0.06em;
  background: var(--gradient-silver);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__subtitle {
  margin-top: var(--hero-subtitle-gap);
  font-size: var(--fs-hero-subtitle);
  font-weight: var(--fw-light);
  line-height: 1.2;
  letter-spacing: 0.24em;
}

.hero__text {
  max-width: 560px;
  margin-top: var(--hero-text-gap);
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: 2;
  color: var(--color-text-soft);
}

.hero__btn {
  margin-top: var(--hero-btn-gap);
}

/* =========================================================
   Шапка секции (Суть платформы, Глобальный стандарт, …)
   ========================================================= */
.section-head {
  display: grid;
  grid-template-columns: var(--section-head-offset) minmax(0, 1fr);
}

.eyebrow {
  margin-top: 21px;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: 0.15em;
  color: var(--color-accent);
}

/* Типографика — глобальные переменные в :root.
   Ширину (для переносов) и цвет секция может задать своими переменными */
.section-title {
  max-width: var(--section-title-width, none);
  font-size: var(--fs-section-title);
  font-weight: var(--fw-light);
  line-height: var(--section-title-lh);
}

.section-text {
  max-width: var(--section-text-width, none);
  margin-top: var(--section-text-gap);
  font-size: var(--fs-section-text);
  font-weight: var(--fw-light);
  line-height: var(--section-text-lh);
  color: var(--section-text-color, var(--color-text-secondary));
}

/* =========================================================
   Суть платформы
   ========================================================= */
.essence {
  /* Ширины подобраны под переносы:
     «Вы говорите голосом — AION / решает задачу» — от 760 до 964px;
     описание «…Без поиска, чатов / и посредников… моментально / организует результат» — от 823 до 841px */
  --section-title-width: 800px;
  --section-text-color: rgba(255, 255, 255, 0.7);
  --section-text-width: 832px;
  --essence-quote-gap: 80px;       /* описание → цитата */
  --principles-gap-top: 100px;     /* цитата → карточки */
  --fs-quote: 25px;
  --quote-lh: 39px;
  --quote-width: 760px;
  --quote-indent: 38px;            /* полоска → текст цитаты */
  --fs-quote-caption: 16px;
  --principle-height: 394px;
  --principle-text-gap: 90px;      /* заголовок карточки → описание */
  padding-block: var(--section-gap);
}

/* Цитата: только вертикальная фиолетовая полоска слева */
.quote {
  position: relative;
  margin-top: var(--essence-quote-gap);
  padding-left: var(--quote-indent);
}

.quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(77, 58, 254, 0.6);
}

.quote__text {
  max-width: var(--quote-width);
  font-size: var(--fs-quote);
  font-weight: var(--fw-regular);
  line-height: var(--quote-lh);
  color: var(--color-text-soft);
}

.quote__caption {
  margin-top: var(--quote-caption-gap);
  font-size: var(--fs-quote-caption);
  font-weight: var(--fw-light);
  letter-spacing: 0.2em;
  color: var(--color-accent);
}

/* ---------- Принципы ---------- */
.principles {
  display: flex;
  gap: var(--principles-gap);
  container-type: inline-size; /* 100cqw — ширина ряда, для ширины описания */
  max-width: var(--principles-width);
  margin-top: var(--principles-gap-top);
}

.principle {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Сумма flex-grow всегда 1 (0→1 у одной, 1→0 у другой), поэтому ширина ряда не меняется */
  flex: 0 0 var(--principle-width);
  min-width: 0;
  height: var(--principle-height);
  padding: var(--principle-pad);
  overflow: hidden;
  border-radius: var(--principle-radius);
  background: linear-gradient(180deg, #08070F 0%, #0C0B19 100%);
  isolation: isolate;
  cursor: default;
  transition: flex-grow var(--principle-dur) var(--ease);
}

/* Появление карточки (data-reveal) + её собственный переход ширины */
.js .principle[data-reveal] {
  transition:
    opacity var(--reveal-dur) var(--ease-fade) var(--reveal-delay, 0s),
    transform var(--reveal-dur) var(--ease) var(--reveal-delay, 0s),
    flex-grow var(--principle-dur) var(--ease);
}

.principle.is-active {
  flex-grow: 1;
}

/* Подсветка раскрытой карточки: заливка и рамка проявляются плавно */
.principle::before,
.principle::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--principle-dur) var(--ease-fade);
}

.principle::before {
  background: linear-gradient(180deg, #0A0914 0%, #13103A 100%);
}

.principle::after {
  padding: 1px;
  background: linear-gradient(180deg, rgba(77, 58, 254, 0.08) 0%, rgba(77, 58, 254, 0.8) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.principle.is-active::before,
.principle.is-active::after {
  opacity: 1;
}

.principle__num {
  position: relative;
  font-size: var(--fs-principle-num);
  font-weight: var(--fw-extralight);
  line-height: 1;
  color: rgba(255, 255, 255, 0.28);
}

/* Фиолетовая цифра — копия поверх серой (data-num), проявляется через opacity */
.principle__num::after {
  content: attr(data-num);
  position: absolute;
  inset: 0;
  color: var(--color-accent);
  opacity: 0;
  transition: opacity var(--principle-dur) var(--ease-fade);
}

.principle.is-active .principle__num::after {
  opacity: 1;
}

.principle__title {
  margin-top: var(--principle-title-gap);
  font-size: var(--fs-principle-title);
  font-weight: var(--fw-regular);
  line-height: 1.6;
}

/* Описание прижато к низу. Ширина — как в раскрытой карточке и не меняется,
   чтобы текст не перестраивался, пока карточка раскрывается */
.principle__text {
  flex-shrink: 0;
  width: calc(100cqw - 2 * var(--principle-width) - 2 * var(--principles-gap) - 2 * var(--principle-pad));
  margin-top: var(--principle-text-gap, auto); /* без переменной — прижато к низу */
  font-size: var(--fs-principle-text);
  font-weight: var(--fw-light);
  line-height: 1.3;
  color: var(--color-text-soft);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-fade);
}

.principle.is-active .principle__text {
  opacity: 1;
  transition: opacity 0.4s var(--ease-fade) var(--principle-text-delay);
}

.principle:focus-visible {
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  .section-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .eyebrow {
    margin: 0 0 var(--space-24);
  }

  .principles {
    flex-direction: column;
  }

  /* На узких экранах все карточки раскрыты */
  .principle {
    flex: none;
    height: auto;
    gap: var(--space-24);
  }

  .principle::before,
  .principle::after,
  .principle__text {
    opacity: 1;
  }

  .principle__title {
    margin-top: 0;
  }

  .principle__text {
    width: auto;
    margin-top: 0;
  }
}

/* =========================================================
   Глобальный стандарт
   ========================================================= */
.standard {
  --section-title-width: 800px;    /* «Как AION меняет глобальный / рынок услуг» — от 759 до 937px */
  padding-bottom: var(--section-gap);
}

/* Обе колонки — подсетки одной сетки на 5 строк (заголовок + 4 пункта),
   поэтому строки с одинаковым номером стоят ровно друг напротив друга */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  column-gap: var(--space-20);
  margin-top: var(--compare-gap-top);
}

.compare__col {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: var(--compare-row-gap);
  padding: var(--compare-pad);
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--compare-radius);
  transition: opacity var(--compare-final-dur) var(--ease-fade);
}

/* Фиолетовая рамка и свечение карточки — отдельный слой, проявляется через opacity */
.compare__col--aion::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(77, 58, 254, 0.7);
  border-radius: inherit;
  box-shadow: 0 0 40px rgba(77, 58, 254, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--compare-final-dur) var(--ease-fade);
}

.compare__col--market {
  padding-left: var(--compare-pad-market);
}

.compare__col--aion {
  --side: var(--compare-side-step);
  padding-right: var(--compare-pad-aion-right);
  background: #0A0912;
}

.compare__title {
  margin-bottom: 4px;
  font-size: var(--fs-compare-title);
  font-weight: var(--fw-regular);
  line-height: 1.3;
}

.compare__row {
  display: grid;
  grid-template-columns: var(--compare-num-width) minmax(0, 1fr);
  align-items: baseline;
}

.compare__num {
  font-size: var(--fs-compare-num);
  font-weight: var(--fw-extralight);
  line-height: 1;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.35);
}

.compare__col--aion .compare__num {
  color: var(--color-accent);
}

.compare__name {
  font-size: var(--fs-compare-name);
  font-weight: var(--fw-regular);
  line-height: 1.35;
}

.compare__text {
  grid-column: 2;
  margin-top: var(--space-12);
  font-size: var(--fs-compare-text);
  font-weight: var(--fw-light);
  line-height: 1.4;
  color: var(--color-text-secondary);
}

/* Анимация (класс is-shown ставит main.js один раз).
   1) строки парами: слева, через 0.15 с справа, пары через 0.4 с */
.js .compare__row {
  opacity: 0;
  transform: translateY(var(--compare-row-shift));
  transition:
    opacity var(--compare-row-dur) var(--ease-fade),
    transform var(--compare-row-dur) var(--ease);
  transition-delay: calc(var(--i) * var(--compare-pair-step) + var(--side, 0s));
}

.compare.is-shown .compare__row {
  opacity: 1;
  transform: none;
}

/* 2) после всех пар: левая колонка гаснет, карточка подсвечивается */
.compare.is-shown .compare__col--market {
  opacity: 0.45;
  transition-delay: var(--compare-final-delay);
}

.compare.is-shown .compare__col--aion::after {
  opacity: 1;
  transition-delay: var(--compare-final-delay);
}

@media (max-width: 1023px) {
  .compare {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .compare__col--market {
    padding-left: var(--compare-pad);
  }

  .compare__col--aion {
    margin-top: var(--space-20);
  }
}

/* =========================================================
   Масштаб
   ========================================================= */
.scale {
  --section-text-width: 780px;     /* переносы «…Актуальная / операционная… оцифрованные / услуги…» — от 749 до 821px */
  padding-bottom: var(--section-gap);
}

.scale__board {
  align-items: end;
  margin-top: var(--scale-gap-top);
}

.scale__slot {
  grid-column: 1 / span 7;
}

/* Стопка состояний: все в одной ячейке, видно только активное.
   Высота ячейки — по самому длинному тексту */
.scale__stack {
  display: grid;
}

.scale__stack > * {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--scale-fade) var(--ease-fade),
    visibility 0s linear var(--scale-fade);
}

/* Сначала гаснет старое, затем проявляется новое */
.scale__stack > .is-active {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--scale-fade) var(--ease-fade) var(--scale-fade),
    visibility 0s linear var(--scale-fade);
}

.scale__caption {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: var(--fs-scale-caption);
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: var(--color-text-soft);
}

.scale__today {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-scale-today);
  font-weight: var(--fw-regular);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* «В эфире»: точка с расходящимся кольцом */
.scale__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

.scale__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-accent);
  animation: scale-pulse 1.6s var(--ease) infinite;
}

@keyframes scale-pulse {
  from { transform: scale(1); opacity: 0.7; }
  to   { transform: scale(3); opacity: 0; }
}

.scale__number {
  margin-top: var(--scale-number-gap);
  min-height: 1em; /* пока данные не пришли, слот не схлопывается */
  font-size: var(--fs-scale-number);
  font-weight: var(--fw-extralight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.scale__info {
  margin-top: var(--scale-info-gap);
}

.scale__title {
  font-size: var(--fs-scale-title);
  font-weight: var(--fw-regular);
  line-height: 1.3;
}

.scale__text {
  max-width: var(--scale-text-width);
  margin-top: var(--scale-text-gap);
  font-size: var(--fs-scale-text);
  font-weight: var(--fw-light);
  line-height: var(--scale-text-lh);
  color: var(--color-text-secondary);
}

/* Список */
.scale__list {
  grid-column: 9 / span 4;
  width: 100%;
  max-width: var(--scale-list-width);
}

.scale__row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  padding-block: var(--scale-row-pad); /* от текста строки до линии */
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  background: none;
  font: inherit;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

/* Подпись и цифра приглушены (opacity), у активной строки и при наведении — полностью.
   Линия под строкой (.scale__bar) не приглушается */
.scale__row-label,
.scale__row-value {
  opacity: 0.5;
  transition: opacity var(--scale-fade) var(--ease-fade);
}

.scale__row:hover :is(.scale__row-label, .scale__row-value),
.scale__row.is-active :is(.scale__row-label, .scale__row-value) {
  opacity: 1;
}

.scale__row-label {
  font-size: var(--fs-scale-row);
  font-weight: var(--fw-light);
}

.scale__row-value {
  font-size: var(--fs-scale-value);
  font-weight: var(--fw-extralight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Линия под активной строкой: при автопоказе растёт за 4 с, иначе — на всю ширину */
.scale__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
}

.scale__row.is-active .scale__bar {
  transform: scaleX(1);
}

.scale__board.is-playing .scale__row.is-active .scale__bar {
  animation: scale-bar var(--scale-slide) linear both;
}

/* Наведение на блок — пауза автопоказа (main.js переключает по окончании линии) */
.scale__board.is-playing:hover .scale__row.is-active .scale__bar {
  animation-play-state: paused;
}

@keyframes scale-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (max-width: 1023px) {
  .scale__slot,
  .scale__list {
    grid-column: 1 / -1;
  }

  .scale__list {
    max-width: none;
    margin-top: var(--space-48);
  }

  .scale__number {
    font-size: 140px;
  }
}

/* =========================================================
   Архитектура
   Исходное состояние — «до анимации», классы is-* ставит main.js
   ========================================================= */
.arch {
  --section-title-width: 680px;    /* «3 технологических узла / AION OS» — от 605 до 751px */
  --section-text-width: 760px;     /* «…прямое действие, / надежность…» — от 704 до 832px */
  padding-bottom: var(--section-gap);
}

.arch__grid {
  display: grid;
  grid-template-columns: minmax(0, 540fr) minmax(0, 680fr);
  gap: var(--arch-gap);
  margin-top: var(--arch-gap-top);
}

/* Фон плашки — одна заливка, фиолетовый только у акцентов внутри */
.arch-card {
  display: flex;
  flex-direction: column;
  padding: var(--arch-pad-y) var(--arch-pad-x);
  border-radius: var(--arch-radius);
  background: var(--arch-bg);
}

.arch-card__label {
  font-size: var(--fs-arch-label);
  line-height: 1.6;
  letter-spacing: 0.2em;
  color: var(--color-accent);
}

.arch-card__title {
  margin-top: var(--arch-label-gap);
  font-size: var(--fs-arch-title);
  font-weight: var(--fw-light);
  line-height: 1.6;
}

.arch-escrow .arch-card__title {
  font-size: var(--fs-arch-title-escrow);
}

.arch-card__text {
  max-width: var(--arch-text-width);
  margin-top: var(--arch-text-gap);
  font-size: var(--fs-arch-text);
  font-weight: var(--fw-light);
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.arch-escrow .arch-card__text {
  max-width: var(--arch-text-width-escrow);
}

/* ---------- Голосовой агент ---------- */
.arch-voice {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, calc(var(--arch-voice-info) + var(--arch-pad-x))) minmax(0, 1fr);
}

.arch-voice__info {
  display: flex;
  flex-direction: column;
  padding-right: var(--arch-pad-x);
}

.arch-cities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--arch-city-gap);
  margin-top: var(--arch-cities-gap-top);
}

/* Наведение — проявляется яркая рамка (::before), выбранный город — ещё и заливка (::after).
   Оба слоя меняют только opacity */
.arch-city {
  position: relative;
  isolation: isolate;
  height: var(--arch-city-height);
  padding-inline: var(--arch-city-pad);
  border: 1px solid rgba(77, 58, 254, 0.35);
  border-radius: var(--radius-pill);
  background: none;
  font: inherit;
  font-size: var(--fs-arch-city);
  color: var(--color-text);
  cursor: pointer;
}

.arch-city::before,
.arch-city::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border: 1px solid var(--color-accent);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-fade);
}

.arch-city::after {
  background: #1A1660;
}

.arch-city:hover::before,
.arch-city.is-active::after {
  opacity: 1;
}

.arch-timer {
  margin-top: auto;
  padding-top: 40px;
}

.arch-timer__value {
  font-size: var(--fs-arch-timer);
  font-weight: var(--fw-extralight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.arch-timer__sla {
  margin-top: var(--arch-sla-gap);
  font-size: var(--fs-arch-sla);
  font-weight: var(--fw-light);
  color: var(--color-text-secondary);
}

.arch-voice__chat {
  padding-left: var(--arch-chat-gap);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.arch-chat__meta {
  font-size: var(--fs-arch-meta);
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Высота — на 3 строки, чтобы при печати блок не прыгал */
.arch-chat__prompt {
  min-height: calc(3 * 1.75em);
  margin-top: var(--space-12);
  font-size: var(--fs-arch-prompt);
  font-weight: var(--fw-light);
  line-height: 1.75;
  color: var(--color-text-soft);
}

.arch-chat__caret {
  display: none;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--color-accent);
  animation: arch-caret 0.9s steps(1) infinite;
}

.arch-chat__prompt.is-typing .arch-chat__caret {
  display: inline-block;
}

@keyframes arch-caret {
  50% { opacity: 0; }
}

/* Цепочка этапов */
.arch-pipe {
  display: flex;
  align-items: center;
  margin-top: 45px;
}

/* Выключенный этап приглушён (opacity), включённый — проявляется фиолетовая рамка-слой */
.arch-pipe__step {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: var(--arch-step-height);
  padding-inline: var(--arch-step-pad);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-arch-step);
  color: var(--color-text);
  white-space: nowrap;
  opacity: 0.5;
  transition: opacity 0.4s var(--ease-fade);
}

.arch-pipe__step::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border: 1px solid var(--color-accent);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s var(--ease-fade);
}

.arch-pipe__step--final::before {
  background: #1A1660;
}

.arch-pipe__step.is-on,
.arch-pipe__step.is-on::before {
  opacity: 1;
}

.arch-pipe__link {
  position: relative;
  flex: 1;
  height: 1px;
  margin-inline: 12px;
  background: rgba(255, 255, 255, 0.15);
}

.arch-pipe__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.arch-pipe__link.is-on::after {
  transform: scaleX(1);
}

/* Ответ агента */
.arch-answers {
  margin-top: 40px;
}

.arch-answer {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: var(--space-12);
  align-items: baseline;
  padding-block: 6px;
  font-size: var(--fs-arch-answer);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--color-text-soft);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dur-fast) var(--ease-fade),
    transform var(--dur-fast) var(--ease);
}

.arch-answer.is-on {
  opacity: 1;
  transform: none;
}

.arch-answer svg {
  width: 16px;
  height: 16px;
  align-self: center;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.arch-answer strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.arch-answer--highlight {
  margin: 10px 0 0 -20px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: rgba(77, 58, 254, 0.12);
}

/* ---------- Цифровой паспорт ---------- */
.arch-passport__score {
  display: flex;
  align-items: center;
  gap: var(--arch-score-gap);
  margin-top: auto;
  padding-top: 40px;
}

.arch-ring {
  position: relative;
  flex-shrink: 0;
  width: 124px;
  height: 124px;
}

.arch-ring__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.arch-ring__svg circle {
  fill: none;
  stroke-width: 4;
}

.arch-ring__track {
  stroke: rgba(255, 255, 255, 0.12);
}

.arch-ring__fill {
  stroke: var(--color-accent);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.6s var(--ease);
}

.arch-passport.is-run .arch-ring__fill {
  stroke-dashoffset: 0.2; /* 99.8% */
}

/* Блик: короткий светлый отрезок дуги, пробегает круг (двигает main.js) */
.arch-ring__glint {
  stroke: rgba(255, 255, 255, 0.85);
  stroke-linecap: round;
  stroke-dasharray: 7 93;
  stroke-dashoffset: 0;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
  /* по кругу дугу ведёт rotate вокруг центра кольца */
  transform-box: view-box;
  transform-origin: center;
}

.arch-ring__value {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: var(--fw-light);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.arch-ring__max {
  margin-top: 6px;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.arch-check {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-arch-check);
  line-height: var(--arch-check-row);
  color: var(--color-text);
  opacity: 0.3; /* до проверки приглушена */
  transition: opacity 0.4s var(--ease-fade);
}

.arch-check svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.arch-passport.is-run .arch-check {
  opacity: 1;
}

/* Проверки загораются по очереди, затем — подпись */
.arch-passport.is-run .arch-check:nth-child(1) { transition-delay: 0.6s; }
.arch-passport.is-run .arch-check:nth-child(2) { transition-delay: 1s; }
.arch-passport.is-run .arch-check:nth-child(3) { transition-delay: 1.4s; }

.arch-verified {
  margin-top: 10px;
  font-size: var(--fs-arch-verified);
  letter-spacing: 0.2em;
  color: var(--color-accent);
  opacity: 0;
  transition: opacity 0.5s var(--ease-fade);
}

.arch-passport.is-run .arch-verified {
  opacity: 1;
  transition-delay: 2s;
}

/* ---------- Эскроу ---------- */
.arch-flow {
  margin-top: auto;
  padding-top: 40px;
}

.arch-flow__track {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.arch-flow__line,
.arch-flow__fill {
  position: absolute;
  top: 50%;
  height: 1px;
}

.arch-flow__line {
  left: calc(var(--arch-node) / 2);
  right: calc(var(--arch-node) / 2);
  background: rgba(255, 255, 255, 0.15);
}

/* Фиолетовая линия за пилюлей — полной длины, растёт через scaleX (main.js) */
.arch-flow__fill {
  left: var(--arch-node);
  width: calc(100% - 2 * var(--arch-node));
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
}

.arch-flow__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--arch-node);
  height: var(--arch-node);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: #08070F;
  color: rgba(255, 255, 255, 0.55);
}

/* Подсветка узла (вспышка замка, загоревшийся «Исполнитель») — слой поверх, только opacity */
.arch-flow__glow {
  position: absolute;
  inset: -1px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  box-shadow: 0 0 32px rgba(77, 58, 254, 0.55);
  color: var(--color-accent);
  opacity: 0;
  pointer-events: none;
}

.arch-flow__node svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.arch-flow__node--escrow {
  color: var(--color-accent);
}

/* «Исполнитель» загорается за 0.4 с и тускнеет перед новым кругом за 0.6 с */
.arch-flow__node--exec .arch-flow__glow {
  transition: opacity 0.6s var(--ease-fade);
}

.arch-flow__node--exec.is-on .arch-flow__glow {
  opacity: 1;
  transition-duration: 0.4s;
}

.arch-flow__pill {
  position: absolute;
  top: 50%;
  left: var(--arch-node);
  z-index: 2;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  font-size: 16px;
  line-height: 1.4;
  transform: translate(-50%, -50%);
}

/* Финал без анимации (после неё или при «уменьшении движения») */
.arch-escrow.is-final .arch-flow__pill {
  left: calc(100% - var(--arch-node));
}

.arch-escrow.is-final .arch-flow__fill {
  transform: none;
}

.arch-flow__labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-16);
  font-size: var(--fs-arch-flow-label);
}

.arch-flow__labels span {
  display: flex;
  justify-content: center;
  width: var(--arch-node);
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .arch__grid,
  .arch-voice {
    grid-template-columns: minmax(0, 1fr);
  }

  .arch-voice__info {
    padding-right: 0;
  }

  .arch-voice__chat {
    margin-top: 40px;
    padding: 40px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .arch-pipe {
    flex-wrap: wrap;
    row-gap: var(--space-12);
  }
}

/* =========================================================
   Super App
   Анимация по классу is-shown (main.js), один раз при появлении
   ========================================================= */
.superapp {
  --section-title-width: 615px;    /* «Вся планета на ладони / в вашем Telegram» — от 595 до 638px */
  padding-bottom: var(--section-gap);
}

.superapp__content {
  grid-column: 1 / span 8;
}

.superapp__label {
  margin-top: 0;
}

.superapp__title {
  margin-top: var(--superapp-title-gap);
}

.superapp .section-text,
.superapp__list {
  max-width: var(--superapp-list-width);
}

.superapp__list {
  margin-top: var(--superapp-list-gap);
}

.superapp__item {
  display: flex;
  align-items: center;
  min-height: var(--superapp-row);
  font-size: var(--fs-superapp-item);
  color: var(--color-text);
}

.superapp__item + .superapp__item {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Текст строки: загорание — opacity, увеличение при наведении — transform.
   Масштабируется только текст — линии и соседние строки не двигаются */
.superapp__item-text {
  display: inline-block;
  transform-origin: left center;
  transition:
    opacity 0.5s var(--ease-fade),
    transform var(--dur-fast) var(--ease);
}

/* Сначала серые, затем по очереди загораются белым и остаются */
.js .superapp__item-text {
  opacity: 0.45;
}

.js .superapp.is-shown .superapp__item-text {
  opacity: 1;
  transition-delay: calc((var(--i) + 1) * var(--superapp-row-step)), 0s;
}

.superapp.is-lit .superapp__item:hover .superapp__item-text {
  transform: scale(var(--superapp-item-scale));
}

/* Размер — как у большой кнопки на первом экране */
.superapp__btn {
  margin-top: var(--superapp-btn-gap);
}

/* ---------- Телефон ---------- */
.superapp__visual {
  position: relative;
  display: grid;
  place-items: center;
  grid-column: 9 / span 4;
  align-self: center;
}

/* Фиолетовое свечение за телефоном */
.superapp__glow {
  position: absolute;
  inset: 10% -10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(77, 58, 254, 0.55), rgba(77, 58, 254, 0.15) 60%, transparent);
  filter: blur(40px);
  pointer-events: none;
}

/* Свечение проявляется вместе с телефоном (data-reveal="fade", main.js), за 1.2 с */
.superapp__glow {
  --reveal-dur: 1.2s;
}

/* Слой 1 (.superapp__rise): телефон выезжает справа — data-reveal="phone", 80px за 0.9 с */

/* Слой 2: «парение» — после того как телефон встал на место (класс is-floating, main.js) */
.superapp.is-floating .superapp__float {
  animation: superapp-float 5s var(--ease) infinite;
}

@keyframes superapp-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(-1 * var(--superapp-float))); }
}

/* Слой 3: сам телефон в перспективе */
.phone {
  position: relative;
  width: var(--phone-width);
  padding: var(--phone-bezel);
  border-radius: var(--phone-radius);
  background: linear-gradient(145deg, #3A3846 0%, #15141C 40%, #0B0A10 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 0 0 3px #050408,
    0 30px 60px rgba(0, 0, 0, 0.7),
    0 70px 120px -20px rgba(0, 0, 0, 0.9);
  transform: var(--phone-tilt);
}

.phone__screen {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--phone-radius) - var(--phone-bezel));
  background: #000;
}

.phone__screen img {
  width: 100%;
  height: auto;
}

/* Вырез «Dynamic Island» */
.phone__island {
  position: absolute;
  top: calc(12 * var(--phone-u));
  left: 50%;
  width: calc(86 * var(--phone-u));
  height: calc(25 * var(--phone-u));
  border-radius: var(--radius-pill);
  background: #000;
  transform: translateX(-50%);
}

/* Боковые кнопки */
.phone__button {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2A2834, #4A4858);
}

.phone__button--action   { left: -2px;  top: calc(110 * var(--phone-u)); height: calc(28 * var(--phone-u)); }
.phone__button--vol-up   { left: -2px;  top: calc(156 * var(--phone-u)); height: calc(52 * var(--phone-u)); }
.phone__button--vol-down { left: -2px;  top: calc(220 * var(--phone-u)); height: calc(52 * var(--phone-u)); }
.phone__button--power    { right: -2px; top: calc(180 * var(--phone-u)); height: calc(80 * var(--phone-u)); }

@media (max-width: 1023px) {
  .superapp__content,
  .superapp__visual {
    grid-column: 1 / -1;
  }

  .superapp__visual {
    margin-top: 80px;
  }

  .superapp__item {
    font-size: 18px;
  }
}

/* =========================================================
   Партнёрам
   ========================================================= */
.partners {
  --section-title-width: 610px;    /* «Подключение бизнеса / к единой экосистеме» — от 592 до 633px */
  --section-text-width: 820px;     /* «…без расходов / на рекламу… выход / на мировой рынок» — от 810 до 832px */
  padding-bottom: var(--section-gap);
}

/* Колонки неравные, как в макете: «100%» шире остальных цифр */
.partners__stats {
  display: grid;
  grid-template-columns: minmax(0, 402fr) minmax(0, 483fr) minmax(0, 355fr);
  margin-top: var(--partners-stats-gap);
}

.partners__stat {
  padding-right: var(--partners-col-pad);
}

.partners__stat:last-child {
  padding-right: 0;
}

/* Тонкие линии между колонками */
.partners__stat + .partners__stat {
  padding-left: var(--partners-col-pad);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.partners__num {
  font-size: var(--fs-partners-num);
  font-weight: var(--fw-extralight);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.partners__stat--accent .partners__num {
  color: var(--color-accent);
}

/* До двоеточия (strong) — Medium, после — Light */
.partners__text {
  margin-top: var(--partners-text-gap);
  font-size: var(--fs-partners-text);
  font-weight: var(--fw-light);
  line-height: 1.5;
}

.partners__text strong {
  font-weight: var(--fw-medium);
}

.partners__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--partners-btn-gap);
}


@media (max-width: 1023px) {
  .partners__stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .partners__stat,
  .partners__stat + .partners__stat {
    padding: 32px 0;
    border-left: 0;
  }

  .partners__stat + .partners__stat {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .partners__num {
    font-size: 96px;
  }

  .partners__text {
    margin-top: var(--space-24);
  }
}

/* =========================================================
   Дорожная карта
   Шкала и точки — по прокрутке, этапы — по появлению (main.js)
   ========================================================= */
.road {
  padding-bottom: var(--section-gap);
}

.road__timeline {
  position: relative;
  margin-top: var(--road-gap-top);
}

/* Вертикальная шкала через центры точек; top и height задаёт main.js */
.road__track {
  position: absolute;
  left: calc(var(--road-dot-col) / 2 - var(--road-line) / 2);
  width: var(--road-line);
  background: rgba(255, 255, 255, 0.12);
}

.road__fill {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: top;
}

.road__list {
  display: grid;
  row-gap: var(--road-row-gap);
}

.road-stage {
  position: relative; /* точка всегда меряется от своего этапа (main.js) */
  display: grid;
  grid-template-columns: var(--road-dot-col) var(--road-when-col) minmax(0, 1fr) var(--road-metric-col);
  column-gap: var(--road-col-gap);
  align-items: start;
}

/* Появление: проявление и подъём на 30px */
.js .road-stage {
  opacity: 0;
  transform: translateY(var(--road-rise));
  transition:
    opacity 0.7s var(--ease-fade),
    transform 0.7s var(--ease);
}

.js .road-stage.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Точка ---------- */
.road-stage__dot {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: var(--road-dot);
  height: var(--road-dot);
  /* центр точки — на уровне строки статуса */
  margin-top: calc(var(--fs-road-status) * 0.8 - var(--road-dot) / 2);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: var(--color-bg);
}

/* Закрашенная точка — слой поверх пустой, проявляется через opacity,
   когда до точки дошла линия */
.road-stage__dot::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0;
  transition: opacity 0.4s var(--ease-fade);
}

.road-stage.is-reached .road-stage__dot::before {
  opacity: 1;
}

/* Текущий этап: точка крупнее, светлая, с ореолом и пульсом «в эфире» */
.road-stage--current .road-stage__dot {
  --road-dot: var(--road-dot-current);
}

.road-stage--current .road-stage__dot::before {
  background: #CFC8FF;
  box-shadow:
    0 0 0 6px rgba(77, 58, 254, 0.25),
    0 0 24px rgba(160, 150, 255, 0.6);
}

.road-stage--current.is-reached .road-stage__dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: #CFC8FF;
  animation: road-pulse 1.8s var(--ease) infinite;
}

@keyframes road-pulse {
  from { transform: scale(1); opacity: 0.6; }
  to   { transform: scale(2.6); opacity: 0; }
}

/* ---------- Статус и дата ---------- */
.road-stage__status {
  font-size: var(--fs-road-status);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.road-stage__date {
  margin-top: 6px;
  font-size: var(--fs-road-date);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--color-text-soft);
}

/* ---------- Заголовок, описание, пункты ---------- */
.road-stage__title {
  font-size: var(--fs-road-title);
  font-weight: var(--fw-regular);
  line-height: 1.3;
}

.road-stage__text {
  margin-top: 14px;
  font-size: var(--fs-road-text);
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.road-stage__points {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  font-size: var(--fs-road-point);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--color-text-meta);
}

.road-stage__points li {
  position: relative;
  padding-left: 16px;
}

.road-stage__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ---------- Главная цифра и метки ---------- */
.road-stage__metric {
  text-align: right;
}

.road-stage__main {
  font-size: var(--fs-road-main);
  font-weight: var(--fw-extralight);
  line-height: 1.25;
}

.road-stage__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.road-stage__tags li {
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-pill);
  font-size: var(--fs-road-tag);
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.road-stage__tags li.is-highlight {
  border-color: rgba(77, 58, 254, 0.6);
  color: var(--color-text);
}

/* ---------- Будущие этапы: текст приглушён ---------- */
.road-stage--upcoming .road-stage__status {
  color: var(--color-text-meta);
}

.road-stage--upcoming .road-stage__when,
.road-stage--upcoming .road-stage__body,
.road-stage--upcoming .road-stage__metric {
  opacity: 0.6;
}

@media (max-width: 1023px) {
  .road-stage {
    grid-template-columns: 32px minmax(0, 1fr);
    row-gap: var(--space-16);
  }

  .road__track {
    left: calc(16px - var(--road-line) / 2);
  }

  .road-stage__when,
  .road-stage__body,
  .road-stage__metric {
    grid-column: 2;
  }

  .road-stage__metric {
    text-align: left;
  }

  .road-stage__tags {
    justify-content: flex-start;
  }

  .road-stage__title {
    font-size: 24px;
  }
}

/* =========================================================
   Контакты
   ========================================================= */
/* Шапка — общие классы и типографика; метка этой секции мельче */
.contacts {
  --fs-eyebrow: 12px;
  /* У секций отступ только снизу (--section-gap); гасим его у предыдущей,
     чтобы над контактами было ровно 128px */
  margin-top: calc(-1 * var(--section-gap));
  padding-block: var(--contacts-pad);
}

.contacts .eyebrow {
  letter-spacing: 0.16em;
}

/* Таблица-указатель: тонкие линии сверху, снизу и между строками */
.desks {
  margin-top: var(--desks-gap-top);
  border-bottom: 1px solid var(--desk-line);
}

.desk {
  display: grid;
  /* Все три колонки фиксированные — одинаковые во всех строках, поэтому описания стоят на одной линии.
     space-between: названия у левого края, контакты у правого, свободное место — в промежутки (от 64px) */
  grid-template-columns: var(--desk-name-col) minmax(0, var(--desk-text-col)) var(--desk-contacts-col);
  justify-content: space-between;
  column-gap: var(--desk-col-gap);
  align-items: center;
  position: relative;
  isolation: isolate;
  /* Без внутренних отступов по бокам: колонки встают по краям контента и получают всю ширину */
  padding-block: var(--desk-pad-y);
  border-top: 1px solid var(--desk-line);
}

/* Подсветка — отдельным слоем, чтобы скругление не загибало линии-разделители.
   Выступает за края строки на --desk-pad-x, чтобы не прилипать к тексту */
.desk::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--desk-pad-x));
  z-index: -1;
  border-radius: var(--desk-radius);
  background: var(--desk-hover-bg);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-fade);
}

.desk:hover::before {
  opacity: 1;
}

.desk__label {
  font-size: var(--fs-desk-label);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.desk__name {
  margin-top: 12px;
  font-size: var(--fs-desk-name);
  font-weight: var(--fw-light);
  line-height: 1.35;
  color: var(--color-text);
  opacity: 0.84; /* ≈ --color-text-soft; при наведении на строку — белый */
  transition: opacity var(--dur-fast) var(--ease-fade);
}

.desk__text {
  font-size: var(--fs-desk-text);
  font-weight: var(--fw-light);
  line-height: 1.65;
  color: var(--color-text);
  opacity: 0.66; /* ≈ --color-text-secondary; при наведении — светлее */
  transition: opacity var(--dur-fast) var(--ease-fade);
}

.desk:hover .desk__name {
  opacity: 1;
}

.desk:hover .desk__text {
  opacity: 0.84;
}

/* Контакты справа, у каждого — кнопка копирования */
.desk__contacts {
  display: grid;
  justify-items: end;
}

.desk__contacts li {
  display: flex;
  align-items: center;
  gap: 4px;
}

.desk__contacts a {
  font-size: var(--fs-desk-contact);
  font-weight: var(--fw-light);
  color: var(--color-text);
  transition: opacity var(--dur-fast) var(--ease-fade);
}

.desk__contacts a:hover {
  opacity: 0.84;
}

.desk__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--color-text);
  cursor: pointer;
  opacity: 0.47; /* ≈ --color-text-meta */
  transition: opacity var(--dur-fast) var(--ease-fade);
}

.desk__copy:hover {
  opacity: 1;
}

/* Иконка «копировать» — маской, цвет берёт из color */
.desk__copy::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("img/icon-copy.svg") center / contain no-repeat;
          mask: url("img/icon-copy.svg") center / contain no-repeat;
}

/* После клика вместо иконки — «Скопировано» (класс ставит main.js на 1.4 с) */
.desk__copy.is-copied {
  padding-inline: 8px;
  color: var(--color-accent);
  opacity: 1;
}

.desk__copy.is-copied::before {
  content: "Скопировано";
  width: auto;
  height: auto;
  background: none;
  -webkit-mask: none;
          mask: none;
  font-size: var(--fs-desk-copied);
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .desk {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-16);
  }

  .desk__contacts {
    justify-items: start;
    margin-top: 0;
  }
}

/* =========================================================
   Футер
   ========================================================= */
.footer {
  overflow: hidden;
  padding: var(--footer-pad-top) 0 var(--footer-pad-bottom);
}

/* Соцсети — строка на всю ширину контейнера */
.footer__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-16) var(--space-32);
}

.footer__social a {
  position: relative;
  padding-bottom: 12px;
  font-size: var(--fs-footer-social);
  font-weight: var(--fw-light);
  color: var(--color-text);
  opacity: 0.5;
  transition: opacity 0.4s var(--ease-fade);
}

/* Линия под ссылкой прорисовывается слева направо */
.footer__social a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.footer__social a:hover {
  opacity: 1;
}

.footer__social a:hover::after {
  transform: scaleX(1);
}

/* Почты — по центру, между ними тонкие вертикальные линии */
.footer__mails {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--space-8);
  margin-top: var(--footer-mails-gap);
  font-size: var(--fs-footer-mail);
  font-weight: var(--fw-light);
  line-height: 1.4;
}

.footer__mails li {
  padding-inline: var(--space-24);
}

.footer__mails li + li {
  border-left: 1px solid var(--desk-line);
}

.footer__mails a {
  color: var(--color-text);
  opacity: 0.47; /* ≈ --color-text-meta */
  transition: opacity var(--dur-fast) var(--ease-fade);
}

.footer__mails a:hover {
  opacity: 1;
}

/* Огромный логотип с градиентом, уходящим в чёрный */
.footer__logo {
  margin-top: var(--footer-logo-gap);
  font-size: var(--fs-footer-logo);
  font-weight: var(--fw-light);
  line-height: 0.8;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(180deg, #2A2A2E 10%, #0E0E10 75%, #000 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  user-select: none;
}

.js .footer__logo {
  opacity: 0;
  transform: translateY(var(--footer-logo-rise));
  transition:
    opacity 1.4s var(--ease-fade),
    transform 1.4s var(--ease);
}

.js .footer.is-shown .footer__logo {
  opacity: 1;
  transform: none;
}

.footer__copy {
  margin-top: var(--footer-copy-gap);
  font-size: var(--fs-footer-copy);
  font-weight: var(--fw-light);
  line-height: 1.6;
  text-align: center;
  color: var(--color-text-meta);
}

@media (max-width: 767px) {
  .footer__social {
    justify-content: flex-start;
  }

  .footer__social a {
    font-size: 18px;
  }
}

/* =========================================================
   Телефоны: те же токены, только мельче (структура — в блоках 1023px выше)
   ========================================================= */
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --section-gap: 56px;

    --header-top: 12px;
    --header-height: 56px;
    --header-inset: 12px;
    --header-pad: 12px;

    --fs-hero-title: 52px;
    --fs-hero-subtitle: 14px;
    --fs-lead: 16px;
    --fs-btn-sm: 14px;
    --fs-btn-lg: 17px;
    --btn-sm-height: 36px;
    --btn-lg-height: 50px;

    --hero-top-gap: 24px;
    --hero-title-gap: 28px;
    --hero-subtitle-gap: 12px;
    --hero-text-gap: 24px;
    --hero-btn-gap: 40px;

    --fs-eyebrow: 13px;
    --fs-section-title: 30px;
    --section-title-lh: 38px;
    --fs-section-text: 16px;
    --section-text-lh: 24px;
    --section-text-gap: 20px;
    --section-content-gap: 48px;

    --fs-quote: 18px;
    --essence-quote-gap: 48px;
    --quote-indent: 20px;
    --quote-caption-gap: 24px;
    --principles-gap-top: 48px;
    --fs-principle-num: 56px;
    --fs-principle-title: 20px;
    --fs-principle-text: 16px;
    --principle-pad: 24px;
    --principle-radius: 20px;

    --fs-compare-title: 20px;
    --fs-compare-num: 20px;
    --fs-compare-name: 16px;
    --fs-compare-text: 14px;
    --compare-pad: 24px;
    --compare-pad-market: 24px;
    --compare-pad-aion-right: 24px;
    --compare-num-width: 40px;
    --compare-row-gap: 24px;
    --compare-radius: 20px;

    --fs-scale-caption: 16px;
    --fs-scale-today: 13px;
    --fs-scale-number: 96px;
    --fs-scale-title: 18px;
    --fs-scale-text: 16px;
    --scale-text-lh: 24px;
    --fs-scale-row: 16px;
    --fs-scale-value: 24px;
    --scale-number-gap: 32px;
    --scale-info-gap: 40px;
    --scale-text-gap: 16px;
    --scale-text-width: 100%;
    --scale-list-width: 100%;
    --scale-row-pad: 16px;

    --fs-arch-title: 22px;
    --fs-arch-title-escrow: 22px;
    --fs-arch-timer: 48px;
    --arch-pad-y: 24px;
    --arch-pad-x: 20px;
    --arch-radius: 20px;
    --arch-text-width: 100%;
    --arch-text-width-escrow: 100%;
    --arch-voice-info: 100%;
    --arch-chat-gap: 24px;
    --arch-score-gap: 24px;
    --arch-node: 64px;

    --fs-superapp-item: 16px;
    --superapp-title-gap: 20px;
    --superapp-list-gap: 32px;
    --superapp-btn-gap: 32px;
    --superapp-row: 56px;
    --superapp-list-width: 100%;
    --phone-width: 240px;

    --fs-partners-num: 72px;
    --fs-partners-text: 15px;
    --partners-text-gap: 20px;
    --partners-btn-gap: 40px;
    --partners-col-pad: 0px;

    --fs-road-title: 22px;
    --fs-road-main: 26px;
    --road-dot-col: 28px;
    --road-col-gap: 16px;
    --road-row-gap: 48px;

    --fs-desk-name: 18px;
    --contacts-pad: 48px;
    --desk-pad-x: 16px;
    --desk-pad-y: 24px;

    --fs-footer-social: 18px;
    --footer-pad-top: 24px;
    --footer-logo-gap: 48px;
    --footer-copy-gap: 32px;
    --fs-badge: 11px;
  }

  /* Секции переопределяют токены у себя — перебиваем на их уровне */
  .essence {
    --essence-quote-gap: 48px;
    --principles-gap-top: 48px;
    --fs-quote: 18px;
    --quote-lh: 28px;
    --quote-indent: 20px;
    --fs-quote-caption: 13px;
    --principle-text-gap: 16px;
  }

  /* Шапка: логотип и кнопка (меню скрыто — см. блок ниже) */
  .logo__svg {
    width: 96px;
    height: 20px;
  }

  /* Первый экран */
  .hero__content {
    grid-column: 1 / -1;
  }

  .badge {
    height: auto;
    min-height: var(--badge-height);
    padding: var(--space-8) var(--space-20);
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4) var(--space-12);
    letter-spacing: 0.12em;
  }

  .badge__dot {
    display: none;
  }

  .badge__date,
  .badge__text {
    white-space: nowrap;
  }

  .hero {
    min-height: 0;
    padding-bottom: 24px;
  }

  .hero__text {
    line-height: 1.7;
  }

  /* Масштаб: в планшетном блоке размер цифры задан в px, возвращаем токен */
  .scale__number {
    font-size: var(--fs-scale-number);
  }

  /* Телефон и кнопка визуально «съедают» часть паузы — добавляем */
  .superapp {
    padding-bottom: calc(var(--section-gap) + 32px);
  }

  .superapp__item {
    padding-block: var(--space-12);
  }

  .partners {
    padding-bottom: calc(var(--section-gap) + 24px);
  }

  .road {
    padding-bottom: calc(var(--section-gap) + 32px);
  }

  .btn--lg {
    max-width: 100%;
    gap: var(--space-24);
    padding-inline: var(--space-24);
  }

  .arch-passport__score {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 28px;
  }

  /* Футер */
  .footer__mails {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__mails li {
    padding-inline: 0;
  }

  .footer__mails li + li {
    border-left: 0;
  }
}

/* Цепочка голосового агента не помещается в строку на телефонах и на 1024–1250px */
@media (max-width: 767px), (min-width: 1024px) and (max-width: 1250px) {
  .arch-pipe {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 28px;
  }

  .arch-pipe__link {
    flex: none;
    width: 1px;
    height: 14px;
    margin: 0 0 0 28px;
  }

  .arch-pipe__link::after {
    transform: scaleY(0);
    transform-origin: top;
  }

  .arch-pipe__link.is-on::after {
    transform: scaleY(1);
  }
}

/* Планшеты: пауза между шапкой и плашкой не нужна такой большой */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --hero-top-gap: 64px;
  }
}

/* Меню в шапке рассчитано на ≥1314px: ужимаем шаги, ниже 1180px прячем */
@media (max-width: 1439px) {
  :root {
    --nav-gap: 36px;
    --nav-to-btn: 48px;
  }
}

@media (max-width: 1279px) {
  :root {
    --nav-gap: 22px;
    --nav-to-btn: 24px;
  }
}

/* Меню под бургером (бургер слева от логотипа), тот же .nav раскрывается под плашкой */
.burger {
  display: none;
}

@media (max-width: 1179px) {
  .header__pill {
    position: relative;
  }

  .burger {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin-right: var(--space-8);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
  }

  .burger__line {
    width: 18px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition:
      transform var(--dur-fast) var(--ease),
      opacity var(--dur-fast) var(--ease-fade);
  }

  .is-menu-open .burger__line:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg) scaleX(1.25);
  }

  .is-menu-open .burger__line:nth-child(2) {
    opacity: 0;
  }

  .is-menu-open .burger__line:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg) scaleX(1.25);
  }

  .logo {
    margin-right: auto;
  }

  .nav {
    position: absolute;
    top: calc(100% + var(--space-8));
    left: 0;
    right: 0;
    margin: 0;
    padding: var(--space-8) calc(var(--header-pad) + 13px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    background: linear-gradient(180deg, #0a0818 0%, #130e30 100%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity var(--dur-fast) var(--ease-fade),
      transform var(--dur-fast) var(--ease),
      visibility 0s linear var(--dur-fast);
  }

  .header.is-menu-open .nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__list li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  .nav__link {
    padding-block: var(--space-16);
    font-size: 16px;
  }

  .nav__link::after {
    display: none;
  }
}

@media (max-width: 380px) {
  .logo__svg {
    width: 80px;
    height: 17px;
  }

  .header .btn--sm {
    padding-inline: var(--space-16);
    gap: var(--space-12);
  }

  .header .btn--sm .btn__arrow {
    display: none;
  }
}

@media (max-width: 340px) {
  .burger {
    width: 40px;
    height: 40px;
    margin-right: var(--space-4);
  }

  .logo__svg {
    width: 70px;
    height: 15px;
  }

  .header .btn--sm {
    padding-inline: var(--space-12);
    font-size: 13px;
  }
}

/* =========================================================
   Узкие экраны: без облака и без картинки — чёрный фон.
   «Уменьшение движения»: вместо облака — статичная картинка
   ========================================================= */
@media (max-width: 767px) {
  .hero .hero__fallback {
    background-image: none;
  }

  .hero__canvas {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* Все анимации и переходы отключены — сразу финальные состояния
     (классы финала main.js ставит без ожидания, см. REDUCED_MOTION) */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  /* Без увеличения при наведении и нажатии — остаётся только свечение */
  .btn:hover,
  .btn:active,
  .superapp.is-lit .superapp__item:hover .superapp__item-text {
    transform: none;
  }

  .hero__fallback {
    background-image: url("assets/hero-fallback.jpg");
  }

  .hero__canvas {
    display: none;
  }
}