/* TOKORA — публичный сайт. Тёмная тема «международная курьерская сеть»: координатная сетка, точечный глобус
   с маршрутами, мотивы авианакладной (моно-поля, перфорация, штрихкод), остановки маршрута.
   Акцент приходит из настроек: --accent, --accent-rgb, --on-accent, --accent-text (см. src/render.js). */

@property --glow {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

:root {
  --accent: #ff5a1f;
  --accent-rgb: 255, 90, 31;
  --on-accent: #0b0a09;
  --accent-text: #ff5a1f;

  --bg: #0b0a09;
  --bg-2: #0f0d0b;
  --panel: #12100e;
  --panel-2: #171411;
  --line: rgba(255, 236, 220, 0.08);
  --line-2: rgba(255, 236, 220, 0.13);
  --line-3: rgba(255, 236, 220, 0.22);
  --text: #f4efe9;
  --text-2: #c4bbb1;
  --muted: #a1988e;
  --dim: #877e75;
  --danger: #ff6b5e;

  /* Unbounded — широкий геометрический гротеск с полной кириллицей: заголовки и крупные цифры. */
  --f-display: 'Unbounded', 'Arial Black', 'Manrope', system-ui, sans-serif;
  --f-num: 'Unbounded', 'Arial Black', 'Manrope', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* viewport-fit=cover: страница рисуется и под вырезом, и под полоской «домой» — поля берём из env().
     --bar-h — строка шапки с логотипом, --header-h — всё, что шапка занимает сверху (с вырезом):
     от неё отступают первый экран, якоря, липкие колонки и линия прогресса. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --bar-h: 60px;
  --header-h: calc(var(--bar-h) + var(--safe-t));
  /* Поле: на телефоне до 20px (на 320 — 16px), с 500px — прежние 4vw, не шире 56px */
  --gutter: clamp(16px, max(4vw, min(5vw, 20px)), 56px);
  --maxw: 1600px;
  --side-w: 236px;
  /* Ритм секций: на телефоне 48px сверху и снизу, на широком — как раньше (7vw, до 112px) */
  --sec-pad: clamp(48px, 7vw, 112px);
  --gap: clamp(12px, 1.3vw, 18px);
  --r: 14px;
  --r-sm: 10px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 600px) {
  :root { --bar-h: 64px; }
}
@media (min-width: 900px) {
  :root { --bar-h: 76px; }
}
/* Телефон боком: высота дороже ширины — шапка ниже */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --bar-h: 56px; }
}
@media (min-width: 2200px) {
  :root { --maxw: 1840px; }
  html { font-size: 112.5%; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
  scrollbar-gutter: stable;
  background: var(--bg);
  color-scheme: dark;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: clip;
  color: var(--text);
  font: 400 1rem/1.65 var(--f-body);
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
main:focus { outline: none; }

/* ---------- Утилиты ---------- */
/* Длинное слово (render.js оборачивает слова от 15 букв): переносится по слогам, если не влезает в строку.
   У самих заголовков переносов нет — иначе браузер режет и обычные слова («Официаль-ный»). */
.hy { -webkit-hyphens: auto; hyphens: auto; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  top: calc(12px + var(--safe-t));
  left: max(16px, env(safe-area-inset-left));
  z-index: 100;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  /* Спрятана целиком выше окна — и выше выреза */
  transform: translateY(calc(-100% - 24px - var(--safe-t)));
  transition: transform 0.2s;
}
.skip:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  /* viewport-fit=cover: в альбомной ориентации iPhone поля не уже выреза или «островка». */
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.sl { color: var(--accent-text); white-space: nowrap; }
em.accent { font-style: normal; color: var(--accent-text); }

.i { width: 1.25em; height: 1.25em; flex: none; }

.dot {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.85);
}
.dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(var(--accent-rgb), 0.7);
  border-radius: 50%;
  animation: pulse 2.4s var(--ease) infinite;
}

/* Ореол расходится не дальше зазора до текста (12px у статусов) */
@keyframes pulse {
  from { transform: scale(0.5); opacity: 1; }
  to { transform: scale(1.75); opacity: 0; }
}

.chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 28px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: 600 0.72rem/1.25 var(--f-mono);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Скобки по углам — рамка сканера: два угла (по умолчанию) или четыре (.brk--4). */
.brk { position: relative; }
.brk::after {
  --c: rgba(var(--accent-rgb), 0.75);
  --s: 12px;
  --w: 1.5px;
  content: '';
  position: absolute;
  inset: var(--o, -1px);
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(var(--c) 0 0) top left / var(--s) var(--w) no-repeat,
    linear-gradient(var(--c) 0 0) top left / var(--w) var(--s) no-repeat,
    linear-gradient(var(--c) 0 0) bottom right / var(--s) var(--w) no-repeat,
    linear-gradient(var(--c) 0 0) bottom right / var(--w) var(--s) no-repeat;
}
.brk--4::after {
  --s: 16px;
  background:
    linear-gradient(var(--c) 0 0) top left / var(--s) var(--w) no-repeat,
    linear-gradient(var(--c) 0 0) top left / var(--w) var(--s) no-repeat,
    linear-gradient(var(--c) 0 0) top right / var(--s) var(--w) no-repeat,
    linear-gradient(var(--c) 0 0) top right / var(--w) var(--s) no-repeat,
    linear-gradient(var(--c) 0 0) bottom left / var(--s) var(--w) no-repeat,
    linear-gradient(var(--c) 0 0) bottom left / var(--w) var(--s) no-repeat,
    linear-gradient(var(--c) 0 0) bottom right / var(--s) var(--w) no-repeat,
    linear-gradient(var(--c) 0 0) bottom right / var(--w) var(--s) no-repeat;
}

/* ---------- Фон страницы: свечение, координатная сетка, шум ---------- */
.page-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1200px 760px at 78% -12%, rgba(var(--accent-rgb), 0.08), transparent 62%),
    radial-gradient(900px 700px at -10% 110%, rgba(var(--accent-rgb), 0.05), transparent 60%);
}
.page-fx > span { position: absolute; inset: 0; }

.page-fx__grid {
  display: none;
  background-image:
    linear-gradient(rgba(255, 236, 220, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 236, 220, 0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 35%, #000 25%, transparent 85%);
  mask-image: radial-gradient(ellipse 90% 80% at 50% 35%, #000 25%, transparent 85%);
}
.fx-grid .page-fx__grid { display: block; }

.page-fx__noise {
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.is-paused .ticker__track { animation-play-state: paused; }

/* ---------- Глобус первого экрана (неподвижный рисунок; в «Полных» поверх рисует холст) ---------- */
.globe { overflow: visible; pointer-events: none; }
.globe :is(circle, ellipse, line, path) { vector-effect: non-scaling-stroke; }
.globe__stop--hot { stop-color: var(--accent); stop-opacity: 0.16; }
.globe__stop--mid { stop-color: var(--accent); stop-opacity: 0.045; }
.globe__stop--off { stop-color: var(--bg); stop-opacity: 0; }
.globe__stop--rim { stop-color: var(--accent); stop-opacity: 0.55; }
.globe__disc {
  fill: var(--bg-2);
  fill: url(#tk-globe-fill) var(--bg-2);
  stroke: rgba(255, 236, 220, 0.1);
  stroke-width: 1px;
}
.globe__grid { fill: none; stroke: rgba(255, 236, 220, 0.075); stroke-width: 1px; }
.globe__rim { fill: none; stroke: url(#tk-globe-rim) rgba(var(--accent-rgb), 0.3); stroke-width: 1.5px; }
.globe__arc {
  fill: none;
  stroke: rgba(var(--accent-rgb), 0.62);
  stroke-width: 1.25px;
  stroke-linecap: round;
  stroke-dasharray: 2 7;
}
.globe__node { fill: var(--bg); stroke: rgba(var(--accent-rgb), 0.8); stroke-width: 1.5px; }
.globe__home-ring { fill: rgba(var(--accent-rgb), 0.08); stroke: rgba(var(--accent-rgb), 0.45); stroke-width: 1px; }
.globe__home { fill: var(--accent); filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.9)); }

/* ---------- Маршрут боковой навигации: линия, пунктир поверх и остановки ---------- */
.route { overflow: visible; pointer-events: none; }
.route path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.route__line { stroke: rgba(255, 236, 220, 0.12); stroke-width: 1px; }
.route__glow { stroke: rgba(var(--accent-rgb), 0.5); stroke-width: 1.25px; stroke-dasharray: 2 8; }
.route__stop { fill: var(--bg); stroke: rgba(var(--accent-rgb), 0.7); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }

/* ---------- Кнопки ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 14px 28px;
  border: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  font: 700 0.82rem/1.2 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s, filter 0.25s;
}
.btn .i { width: 1.25rem; height: 1.25rem; }

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 14px 34px -16px rgba(var(--accent-rgb), 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.38) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease);
}
.btn--primary:focus-visible { outline: 2px solid var(--on-accent); outline-offset: -6px; }
.btn--primary > * { position: relative; }

.btn--ghost {
  background: rgba(255, 236, 220, 0.03);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-3);
}
.btn__arrow { transition: transform 0.3s var(--ease); }

/* Наведение — только там, где оно есть: на касаниях :hover «залипает» после тапа (блик, подсветка). */
@media (hover: hover) {
  .btn--primary:hover { filter: brightness(1.08) saturate(1.05); box-shadow: 0 18px 40px -14px rgba(var(--accent-rgb), 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
  .btn--primary:hover::before { transform: translateX(120%); }
  .btn--ghost:hover {
    background: rgba(var(--accent-rgb), 0.07);
    color: var(--accent-text);
    box-shadow: inset 0 0 0 1px var(--accent);
  }
  .btn:hover .btn__arrow { transform: translateY(2px); }
}
/* Нажатие — цветом, без сдвига: отклик виден на касании и в режиме без движения. */
.btn--primary:active { filter: brightness(0.9); }
.btn--ghost:active {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-text);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.btn--sm { min-height: 44px; padding: 10px 18px; border-radius: 9px; font-size: 0.74rem; }
.btn--block { width: 100%; }

@media (max-width: 479px) {
  .btns > .btn { flex: 1 1 100%; }
}

/* ---------- Шапка ---------- */
.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  /* Под вырезом (полноэкранный режим, альбомная ориентация) — только фон шапки, строка ниже */
  padding-top: var(--safe-t);
}
.hdr::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s, border-color 0.35s, backdrop-filter 0.35s;
}
.hdr.is-scrolled::before,
.menu-open .hdr::before {
  background: rgba(11, 10, 9, 0.8);
  border-color: var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
/* Без JS класс is-scrolled не появится — фон у шапки сразу, иначе текст страницы идёт под логотипом. */
@media (scripting: none) {
  .hdr::before {
    background: rgba(11, 10, 9, 0.8);
    border-color: var(--line);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
  }
}

.hdr__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 16px);
  height: var(--bar-h);
}

/* Логотип — ссылка на главную: зона касания не меньше 44px */
.logo { display: inline-flex; align-items: center; gap: 12px; min-width: 0; min-height: 44px; -webkit-tap-highlight-color: transparent; }
.logo__mark {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 40px;
  height: 40px;
  padding-inline: 10px;
  border-radius: 11px;
  background: var(--accent);
  color: var(--on-accent);
  font: 700 1.05rem/1 var(--f-display);
  box-shadow: 0 8px 24px -8px rgba(var(--accent-rgb), 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.logo__text { display: grid; min-width: 0; }
.logo__name,
.logo__tag { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.logo__name { font: 600 1rem/1.15 var(--f-display); letter-spacing: 0.08em; text-transform: uppercase; }
.logo__tag {
  margin-top: 3px;
  color: var(--dim);
  font: 500 0.6rem/1.3 var(--f-mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.hdr__right { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 28px); flex: none; margin-left: auto; }

.hdr__status {
  display: none;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font: 500 0.7rem/1 var(--f-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hdr__status .dot { margin-right: 2px; }
.clock { display: none; color: var(--text-2); font-variant-numeric: tabular-nums; }
.js .clock { display: inline; }
.js .clock + .hdr__text::before { content: '·'; margin-right: 10px; color: var(--dim); }

.hdr__cta { display: none; }

@media (min-width: 640px) {
  .hdr__cta { display: inline-flex; }
}
/* Без боковой навигации кнопка в шапке не дублирует такую же рядом: пока открыто меню (в нём своя) и пока
   на экране главная кнопка первого экрана (site.js, .is-hero-cta). Место за ней остаётся — шапка не прыгает. */
@media (max-width: 1199px) {
  .hdr__cta { transition: background-color 0.25s, color 0.25s, box-shadow 0.25s, filter 0.25s, opacity 0.25s, visibility 0s; }
  .menu-open .hdr__cta { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s; }
}
@media (max-width: 899px) {
  .hdr.is-hero-cta .hdr__cta { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s; }
}
@media (min-width: 1000px) {
  .hdr__status { display: flex; }
}
@media (max-width: 479px) {
  .logo__tag { display: none; }
}

/* ---------- Меню (бургер) ---------- */
.burger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  padding-left: 14px;
  border-radius: var(--r-sm);
  list-style: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text);
  font: 600 0.68rem/1 var(--f-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: box-shadow 0.25s, color 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.burger::-webkit-details-marker { display: none; }
@media (hover: hover) {
  .burger:hover { box-shadow: inset 0 0 0 1px var(--accent); }
}
.burger:active,
.menu[open] .burger { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-text); }
.burger:active { background: rgba(var(--accent-rgb), 0.1); }
.burger__icon { display: grid; place-items: center; width: 44px; height: 44px; }
.burger__icon span,
.burger__icon span::before,
.burger__icon span::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease), width 0.3s var(--ease), background-color 0.2s;
}
.burger__icon span { position: relative; }
.burger__icon span::before,
.burger__icon span::after { content: ''; position: absolute; left: 0; }
.burger__icon span::before { top: -6px; }
.burger__icon span::after { top: 6px; width: 12px; }
.menu[open] .burger__icon span { background: transparent; }
.menu[open] .burger__icon span::before { transform: translateY(6px) rotate(45deg); }
.menu[open] .burger__icon span::after { width: 20px; transform: translateY(-6px) rotate(-45deg); }
/* «Сдержанные»: значок меняется без поворота */
html[data-motion='reduced'] .burger__icon span,
html[data-motion='reduced'] .burger__icon span::before,
html[data-motion='reduced'] .burger__icon span::after { transition-property: background-color; }

@media (max-width: 479px) {
  .burger { padding-left: 0; }
  .burger__text { display: none; }
}

/* Открытое меню держит страницу: класс menu-open ставит site.js (событие toggle у <details>),
   :has — то же без JS. */
html.menu-open,
html:has(.menu[open]) { overflow: hidden; }

/* Панель — лист на весь экран под шапкой: колонка, разделы сверху, кнопка и контакты прижаты к низу. */
.menu__panel {
  position: fixed;
  inset: 0;
  z-index: -2;
  display: flex;
  flex-direction: column;
  padding-top: var(--header-h);
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(900px 600px at 100% 0%, rgba(var(--accent-rgb), 0.12), transparent 60%),
    var(--bg);
}
/* Открытие — ключевыми кадрами (работает везде). Закрытие — переходом: ::details-content держит
   содержимое видимым, пока панель гаснет (Chrome 131+, Safari 18.4+; где нет — меню просто закрывается). */
.menu[open] .menu__panel { animation: menu-in 0.38s var(--ease); }
.menu::details-content { transition: content-visibility 0.28s allow-discrete; }
.menu:not([open]) .menu__panel {
  opacity: 0;
  translate: 0 -12px;
  pointer-events: none;
  transition: opacity 0.22s ease-in, translate 0.28s var(--ease);
}
/* Без движения — закрывается сразу (::details-content не попадает под общий «*» в конце файла) */
html[data-motion='off'] .menu::details-content { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .menu::details-content { transition: none; }
}

@keyframes menu-in {
  from { opacity: 0; translate: 0 -12px; }
}
@keyframes menu-fade {
  from { opacity: 0; }
}
@keyframes menu-row {
  from { opacity: 0; translate: 0 14px; }
}

/* «Сдержанные» — только затухание; «Выключены» и системный reduce гасят длительности в конце файла. */
html[data-motion='reduced'] .menu[open] .menu__panel { animation-name: menu-fade; }
html[data-motion='reduced'] .menu:not([open]) .menu__panel { translate: none; }

.menu__in {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 32px;
  flex: 1 0 auto;
  padding-block: clamp(16px, 4vw, 28px) max(28px, calc(var(--safe-b) + 16px));
}
.menu__title,
.sidenav__title {
  color: var(--dim);
  font: 500 0.7rem/1.4 var(--f-mono);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.menu__list { margin-top: 10px; }
.menu__list > li { border-bottom: 1px solid var(--line); }
/* Строка раздела: крупная, во всю ширину, с подложкой на нажатие (заходит в поле страницы на 12px). */
.menu__link {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  margin-inline: -12px;
  padding: 12px;
  border-radius: var(--r-sm);
  font: 600 clamp(1.2rem, 4.4vw + 0.2rem, 2.35rem)/1.15 var(--f-display);
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
  transition: color 0.25s, background-color 0.25s;
  -webkit-tap-highlight-color: transparent;
}
/* Стрелка-шеврон справа: строка читается как переход */
.menu__link::after {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  margin: 0 6px 0 auto;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  color: var(--dim);
  rotate: 45deg;
  transition: color 0.25s, translate 0.3s var(--ease);
}
.menu__label { min-width: 0; }
.menu__num { flex: none; width: 2.2em; color: var(--accent-text); font: 500 0.72rem/1 var(--f-mono); letter-spacing: 0.1em; }
@media (hover: hover) {
  .menu__link:hover { color: var(--accent-text); }
  .menu__link:hover::after { color: var(--accent-text); translate: 3px 0; }
}
.menu__link:active { background: rgba(var(--accent-rgb), 0.1); color: var(--accent-text); }
/* Текущий раздел (подсветка site.js): акцент, подложка-градиент и точка вместо шеврона */
.menu__link[aria-current] {
  color: var(--accent-text);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.1), transparent 75%);
}
.menu__link[aria-current]::after {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.85);
  rotate: none;
}
.menu__home {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  margin-top: 8px;
  font: 600 clamp(1.2rem, 4.4vw + 0.2rem, 2.2rem)/1.15 var(--f-display);
  letter-spacing: -0.015em;
}
.menu__home .i { color: var(--accent-text); transform: scaleX(-1); }
.menu__side { display: grid; gap: 14px; align-content: end; }
.menu__side > .btn { min-height: 56px; }
.menu__status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  color: var(--muted);
  font: 500 0.7rem/1.4 var(--f-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* «Полные»: строки разделов входят лесенкой вслед за панелью */
.m-on .menu[open] .menu__list > li { animation: menu-row 0.5s var(--ease) backwards; animation-delay: calc(60ms + var(--mi, 0) * 35ms); }
.menu__list > li:nth-child(2) { --mi: 1; }
.menu__list > li:nth-child(3) { --mi: 2; }
.menu__list > li:nth-child(4) { --mi: 3; }
.menu__list > li:nth-child(5) { --mi: 4; }
.menu__list > li:nth-child(6) { --mi: 5; }
.menu__list > li:nth-child(7) { --mi: 6; }
.menu__list > li:nth-child(n + 8) { --mi: 7; }

@media (min-width: 900px) {
  .menu__in {
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
    grid-template-rows: none;
    align-content: start;
    gap: clamp(40px, 6vw, 120px);
    padding-block: 56px;
  }
  .menu__side { align-content: start; }
}
/* Телефон боком: разделы в две колонки, контакты ниже — меньше прокрутки на низком экране */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 899px) {
  .menu__in { grid-template-rows: none; gap: 24px; }
  .menu__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .menu__link { min-height: 52px; font-size: 1.15rem; }
}
@media (min-width: 1200px) {
  .has-sidenav .menu { display: none; }
}

/* Строки контактов: меню, подвал, плавающая кнопка, блок контактов */
.mcontacts,
.fcontacts,
.fcard,
.clist { display: grid; gap: 8px; }

.mcontacts__row,
.fcontacts__row,
.fcard__row,
.clist__row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  transition: border-color 0.25s, background-color 0.25s, color 0.25s;
}
.mcontacts__body,
.fcontacts__body,
.fcard__body,
.clist__body { display: grid; gap: 2px; flex: 1; min-width: 0; }
.mcontacts__label,
.fcontacts__label,
.fcard__label,
.clist__label {
  color: var(--dim);
  font: 500 0.64rem/1.4 var(--f-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.mcontacts__value,
.fcontacts__value,
.fcard__value,
.clist__value { font-weight: 700; overflow-wrap: anywhere; }
.mcontacts__icon,
.fcard__icon,
.clist__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: var(--r-sm);
  background: rgba(var(--accent-rgb), 0.07);
  color: var(--accent-text);
}
.mcontacts__go,
.fcontacts__go,
.fcard__go,
.clist__go { color: var(--dim); transition: transform 0.25s var(--ease), color 0.25s; }
/* Наведение — только с мышью: на касании :hover «залипает» после тапа (и после возврата из мессенджера). */
@media (hover: hover) {
  a:hover > .mcontacts__go,
  a:hover > .fcontacts__go,
  a:hover > .fcard__go,
  a:hover > .clist__go { color: var(--accent-text); transform: translateX(3px); }
}
a:focus-visible > :is(.mcontacts__go, .fcontacts__go, .fcard__go, .clist__go) { color: var(--accent-text); }

.mcontacts__row { min-height: 60px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(255, 236, 220, 0.02); -webkit-tap-highlight-color: transparent; }
@media (hover: hover) {
  a.mcontacts__row:hover { border-color: rgba(var(--accent-rgb), 0.5); }
}
a.mcontacts__row:active { border-color: rgba(var(--accent-rgb), 0.6); background: rgba(var(--accent-rgb), 0.1); }

/* ---------- Первый экран ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(100svh, 1040px);
  padding-block: calc(var(--header-h) + clamp(32px, 7vh, 88px)) clamp(56px, 9vh, 104px);
  overflow: clip;
}
/* Первый экран вместе с бегущей строкой помещается в окно */
.hero:has(+ .ticker) { min-height: min(calc(100svh - 68px), 980px); }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 236, 220, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 236, 220, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 62% 45%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 65% at 62% 45%, #000 20%, transparent 78%);
}
.hero__glow {
  position: absolute;
  top: 38%;
  right: -14%;
  width: min(1200px, 110vw);
  aspect-ratio: 1;
  translate: 0 -50%;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.04) 55%, transparent 75%);
}
/* Глобус на широком экране: Москва (узел 602,318 из 1000) стоит в промежутке между заголовком и карточкой,
   чуть левее её края, — хаб и пульс отправок видны, восточные маршруты уходят под полупрозрачную карточку.
   --hx — левый край карточки: та же раскладка, что у .hero__layout (колонки 1.12fr / 0.88fr, зазор 6cqi). */
.hero__globe {
  --gw: clamp(640px, 58vw, 1120px);
  --hc: calc(min(100%, var(--maxw)) - 2 * var(--gutter));
  --hg: clamp(40px, var(--hc) * 0.06, 120px);
  --hx: calc((100% - var(--hc)) / 2 + (var(--hc) - var(--hg)) * 0.56 + var(--hg));
  position: absolute;
  top: calc(36% - var(--gw) * 0.318);
  left: calc(var(--hx) - var(--hg) * 0.6 - var(--gw) * 0.602);
  width: var(--gw);
  max-width: none;
  height: auto;
  aspect-ratio: 1;
}
/* На узком — по центру за заголовком, приглушённо, чтобы текст оставался контрастным. Порог — с запасом
   на полосу прокрутки до двух колонок .hero__layout (контейнер ≥ 900px): в одной колонке карточка под текстом. */
@media (max-width: 999px) {
  .hero__globe {
    top: calc(var(--header-h) - 18vw);
    right: auto;
    left: 50%;
    width: max(520px, 140vw);
    translate: -50% 0;
    opacity: 0.6;
  }
  .hero__glow { top: 22%; right: auto; left: 50%; translate: -50% -50%; }
}

.hero__wrap { container: hero / inline-size; }
.hero__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(44px, 7vw, 64px); }
.hero__text { container: herotext / inline-size; min-width: 0; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  padding: 8px 18px 8px 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 999px;
  background: rgba(11, 10, 9, 0.6);
  color: var(--accent-text);
  font: 500 0.66rem/1.5 var(--f-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero__badge-text { display: inline-flex; flex-wrap: wrap; column-gap: 0.75em; }
.hero__badge-part { white-space: nowrap; }
/* Узкий экран: части — строками, без висящей «·»; вместо «таблетки» в две строки — скруглённая плашка */
@media (max-width: 479px) {
  .hero__badge { align-items: flex-start; border-radius: var(--r-sm); }
  .hero__badge .dot { margin-top: 0.42em; }
  .hero__badge-sep { display: none; }
}

.hero__title {
  margin-block: clamp(22px, 3vw, 34px);
  /* --fit — ширина самого длинного слова в «средних буквах» (render.js): слово целиком влезает в строку. */
  font: 700 clamp(1.6rem, min(13cqi, calc(92cqi / var(--fit, 6))), 8rem)/1 var(--f-display);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.hero__title:first-child { margin-top: 0; }
.hero__line { display: block; }
.hero__line--accent { color: var(--accent-text); text-shadow: 0 0 48px rgba(var(--accent-rgb), 0.3); }
/* Контур без «швов»: обводка рисуется под заливкой цветом фона, поэтому пересечения контуров
   вариативного шрифта внутри букв не видны, снаружи остаётся ровная линия. */
.hero__line--outline {
  color: var(--bg);
  -webkit-text-stroke: max(2.5px, 0.026em) var(--accent-text);
  paint-order: stroke fill;
}
@supports not (-webkit-text-stroke: 1px red) {
  .hero__line--outline { color: var(--accent-text); }
}

.hero__lead {
  max-width: 54ch;
  color: var(--text-2);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.75;
}
.hero__text .btns { margin-top: clamp(28px, 4vw, 44px); }

/* Телефон: заголовок плотнее (кегль — прежний расчёт по --fit: он рассчитан на широкий Unbounded),
   отступы и подзаголовок компактнее. Заголовок, подзаголовок и обе кнопки — в первом экране. */
@container herotext (max-width: 599px) {
  .hero__title {
    margin-block: clamp(18px, 6cqi, 26px);
    letter-spacing: -0.03em;
  }
  .hero__lead { line-height: 1.62; }
  .hero__text .btns { margin-top: 26px; }
}

/* Телефон боком: заголовок слева, подзаголовок справа по нижней строке, кнопки в ряд под ними —
   всё в первом экране высотой ~390px. Размер заголовка — от высоты окна и ширины половины.
   С 1000px у первого экрана своя раскладка в две колонки (текст и карточка) — её не трогаем. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 999px) {
  .hero,
  .hero:has(+ .ticker) { min-height: 0; padding-block: calc(var(--header-h) + 18px) 40px; }
  .hero__text:has(> .hero__title):has(> .hero__lead) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(24px, 5cqi, 56px);
    align-items: end;
  }
  .hero__text:has(> .hero__lead) > * { grid-column: 1 / -1; }
  .hero__text:has(> .hero__lead) > .hero__badge { justify-self: start; }
  .hero__text:has(> .hero__lead) > .hero__title {
    grid-column: 1;
    margin-block: 16px 0;
    font-size: clamp(1.4rem, min(13svh, 42cqi / var(--fit, 6)), 4.5rem);
  }
  .hero__text:has(> .hero__title) > .hero__lead { grid-column: 2; font-size: 0.95rem; line-height: 1.6; }
  .hero__text .btns { margin-top: 20px; }
  .hero__text .btns > .btn { min-height: 50px; }
}

@container hero (min-width: 900px) {
  .hero__layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
    align-items: center;
    column-gap: clamp(40px, 6cqi, 120px);
  }
  .hero__layout--solo,
  .hero__layout--card { grid-template-columns: minmax(0, 1fr); }
}
.hero__layout--solo .hero__text { max-width: 1100px; }
.hero__layout--card .hcard { width: 100%; max-width: 620px; }

/* Карточка первого экрана */
/* Карточка первого экрана — «авианакладная»: шапка с номером, моно-поля, перфорация, штрихкод. */
.hcard {
  --pad: clamp(20px, 7cqi, 40px);
  position: relative;
  container: hcard / inline-size;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background:
    radial-gradient(420px circle at 100% 0%, rgba(var(--accent-rgb), 0.11), transparent 60%),
    linear-gradient(165deg, rgba(255, 236, 220, 0.05), rgba(255, 236, 220, 0.01) 45%),
    rgba(17, 15, 13, 0.62);
  box-shadow: 0 50px 120px -50px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 236, 220, 0.05);
  /* Матовое стекло: маршруты и посылки глобуса просвечивают мягко, текст накладной остаётся чётким */
  -webkit-backdrop-filter: blur(4px) saturate(1.15);
  backdrop-filter: blur(4px) saturate(1.15);
}
.hcard::after { --o: -7px; }
.hcard__awb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--line-2);
  border-radius: var(--r) var(--r) 0 0;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.1), transparent 70%);
  color: var(--muted);
  font: 500 0.62rem/1.4 var(--f-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hcard__awb-type { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-text); }
.hcard__awb-type .i { width: 15px; height: 15px; }
.hcard__awb-no { color: var(--text-2); letter-spacing: 0.16em; font-variant-numeric: tabular-nums; }
.hcard__main { padding: var(--pad); }
.hcard__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.hcard__label,
.hcard__status {
  color: var(--accent-text);
  font: 500 0.7rem/1.4 var(--f-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.hcard__status { display: inline-flex; align-items: center; gap: 12px; }
.hcard__value {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: 20px;
  padding-bottom: 22px;
  font: 600 clamp(2rem, calc(128cqi / var(--len, 4)), 6.75rem)/0.95 var(--f-num);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.hcard__value::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.8);
}
.hcard__top + .hcard__value { margin-top: 26px; }
.hcard__value:first-child { margin-top: 0; }
.hcard__pre { margin: 0.14em 0.14em 0 0; color: var(--accent-text); font-size: 0.3em; line-height: 1; letter-spacing: 0; }
.hcard__suf { margin: 0.1em 0 0 0.1em; color: var(--accent-text); font-size: 0.4em; line-height: 1; letter-spacing: 0; }
.hcard__note { margin-top: 20px; max-width: 44ch; color: var(--text-2); font-size: 0.98rem; }
.hcard__main > :first-child { margin-top: 0; }

.hcard__facts {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px dashed rgba(255, 236, 220, 0.2);
}
/* Перфорация: полукруглые вырезы по краям линии отрыва (вне сетки — абсолютные). */
.hcard__facts::before,
.hcard__facts::after {
  content: '';
  position: absolute;
  top: -10px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--bg);
}
.hcard__facts::before { left: -11px; clip-path: inset(0 0 0 50%); }
.hcard__facts::after { right: -11px; clip-path: inset(0 50% 0 0); }
.hcard__fact {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px var(--pad);
  border-bottom: 1px solid var(--line-2);
}
.hcard__fact:nth-child(odd) { border-right: 1px solid var(--line-2); }
.hcard__fact:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.hcard__fact-label {
  color: var(--dim);
  font: 500 0.64rem/1.4 var(--f-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hcard__fact-value { font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.hcard__fact:last-child,
.hcard__fact:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.hcard__fact.is-accent .hcard__fact-value { color: var(--accent-text); }
.hcard__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px var(--pad);
  border-top: 1px solid var(--line-2);
  font: 500 0.66rem/1.5 var(--f-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
/* Штрихкод отправления */
.hcard__code {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  padding: 14px var(--pad) 16px;
  border-top: 1px solid var(--line-2);
}
.hcard__bars {
  flex: 1;
  min-width: 0;
  height: 28px;
  opacity: 0.55;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, var(--text-2) 9px 10px, transparent 10px 23px, var(--text-2) 23px 25px, transparent 25px 37px),
    repeating-linear-gradient(90deg, var(--text-2) 0 1px, transparent 1px 3px, var(--text-2) 3px 6px, transparent 6px 8px,
      var(--text-2) 8px 9px, transparent 9px 12px, var(--text-2) 12px 14px, transparent 14px 15px, var(--text-2) 15px 16px, transparent 16px 19px);
  -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent);
  mask-image: linear-gradient(90deg, #000 70%, transparent);
}
.hcard__code-no {
  flex: none;
  color: var(--dim);
  font: 500 0.62rem/1 var(--f-mono);
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}

/* Телефон: моно-подписи не мельче 11px — мельче они читаются как шум, а не как сведения */
@media (max-width: 599px) {
  .hcard__fact-label,
  .hcard__code-no { font-size: 0.6875rem; letter-spacing: 0.14em; }
}

@container hcard (max-width: 340px) {
  .hcard__facts { grid-template-columns: minmax(0, 1fr); }
  .hcard__fact:nth-child(odd) { border-right: 0; }
  .hcard__fact:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line-2); }
  .hcard__code-no { display: none; }
}

/* ---------- Бегущая строка ---------- */
.ticker {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line-2);
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.06), transparent 25%, transparent 75%, rgba(var(--accent-rgb), 0.06)),
    rgba(13, 11, 10, 0.75);
}
.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: min(120px, 10vw);
  pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.ticker__track { display: flex; width: max-content; animation: marquee var(--dur, 40s) linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; flex: none; }
.ticker__item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 30px;
  color: var(--text-2);
  font: 500 0.74rem/1 var(--f-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Разделитель — остановка маршрута: кольцо с точкой, между остановками — пунктир. */
.ticker__sep {
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.1), 0 0 12px rgba(var(--accent-rgb), 0.5);
}
.ticker__sep::before {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  width: 22px;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(var(--accent-rgb), 0.55) 0 3px, transparent 3px 6px);
}

/* Телефон: строка ниже и плотнее, пунктир между остановками короче */
@media (max-width: 599px) {
  .ticker__item { gap: 14px; padding: 15px 20px; font-size: 0.68rem; letter-spacing: 0.18em; }
  .ticker__sep { width: 9px; height: 9px; }
  .ticker__sep::before { right: calc(100% + 8px); width: 14px; }
}

@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- Раскладка с боковой навигацией ---------- */
.main--offset { padding-top: var(--header-h); }
.layout__content { min-width: 0; }
.sidenav { display: none; }

@media (min-width: 1200px) {
  .layout--side .layout__in {
    --side-gap: clamp(56px, 5vw, 112px);
    display: grid;
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    column-gap: var(--side-gap);
  }
  .layout--side .sidenav { display: block; }
}

.sidenav__in {
  --side-h: calc(100svh - var(--header-h));
  position: sticky;
  top: var(--header-h);
  display: flex;
  flex-direction: column;
  height: var(--side-h);
  padding-block: clamp(48px, 9vh, 96px) 32px;
}
/* Много разделов на невысоком экране — список прокручивается, заголовок и статус остаются на месте.
   Поля по 6px (с компенсацией отступами) — чтобы рамка фокуса у ссылок не обрезалась. */
.sidenav__list {
  display: grid;
  gap: 2px;
  min-height: 0;
  margin: 20px 0 0 -6px;
  padding: 6px 28px 6px 6px;
  overflow-y: auto;
  scrollbar-width: thin;
}
/* Подписи разделов — одна гарнитура, начертание и разрядка для кириллицы и латиницы (FAQ):
   моноширинный шрифт «табло вылетов», без синтеза жирного. */
.sidenav__link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  padding-block: 6px;
  color: var(--muted);
  font: 500 0.76rem/1.3 var(--f-mono);
  font-synthesis: none;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.25s;
}
.sidenav__num { flex: none; width: 1.9em; color: var(--dim); font: 500 0.66rem/1 var(--f-mono); letter-spacing: 0.06em; }
.sidenav__bar {
  flex: none;
  width: 18px;
  height: 1px;
  background: var(--line-3);
  transition: width 0.45s var(--ease), background-color 0.3s, box-shadow 0.3s;
}
.sidenav__label { min-width: 0; overflow-wrap: anywhere; }
.sidenav__link:hover { color: var(--text); }
.sidenav__link:hover .sidenav__bar { width: 28px; background: var(--muted); }
.sidenav__link[aria-current] { color: var(--text); }
.sidenav__link[aria-current] .sidenav__num { color: var(--accent-text); }
.sidenav__link[aria-current] .sidenav__bar {
  width: 46px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.8);
}
.sidenav__status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line-2);
  color: var(--accent-text);
  font: 500 0.66rem/1.5 var(--f-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
/* Маршрут в промежутке между навигацией и содержимым. Ширина — 1/10 высоты, как у viewBox 100×1000:
   при preserveAspectRatio="none" остановки остаются кругами. */
.sidenav__route {
  position: absolute;
  top: 0;
  right: calc(-0.5 * var(--side-gap, 72px) - var(--side-h) * 0.05);
  width: calc(var(--side-h) * 0.1);
  height: 100%;
  max-width: none;
}

/* ---------- Секции ---------- */
.sec { container: blk / inline-size; padding-block: var(--sec-pad); }
.layout__content > .sec:first-child { padding-top: clamp(48px, 7vw, 104px); }
.layout__content .hero { min-height: 0; padding-block: var(--sec-pad); }
.layout__content .wrap { padding-inline: 0; }

.sec-head { max-width: 980px; margin-bottom: clamp(28px, 5vw, 64px); }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--accent-text);
  font: 500 0.7rem/1.5 var(--f-mono);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: '';
  flex: none;
  width: 36px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 7px);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6);
}
.eyebrow--plain::before { display: none; }

.sec-title {
  margin-top: clamp(12px, 1.6vw, 18px);
  font: 600 clamp(1.7rem, 5.2cqi, 3.9rem)/1.1 var(--f-display);
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.sec-title:first-child { margin-top: 0; }
.sec-sub {
  max-width: 62ch;
  margin-top: clamp(14px, 1.6vw, 20px);
  color: var(--text-2);
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.7;
}

/* Телефон: подпись компактнее — меньше разрядка и черта, подзаголовок плотнее */
@container blk (max-width: 599px) {
  .eyebrow { gap: 12px; letter-spacing: 0.24em; }
  .eyebrow::before { width: 26px; }
  .sec-sub { line-height: 1.65; }
}

/* Огромный номер секции (.ms-num вставляет motion.js первым в шапку секции, только в «Полных» и только
   если подпись начинается с номера: «03 / Как мы работаем») — декор, который не ложится на текст:
   - широкая шапка — номер в своей колонке справа, по центру шапки; тексту оставлено место справа;
   - узкая липкая колонка FAQ — небольшой номер справа в строке подписи, низом по её строке;
   - телефон — номера нет: он уже есть в подписи, рядом он повторялся бы («03 / … 03») и отнимал у подписи
     ширину (на 320 она рвалась на две строки).
   Сдвиг от прокрутки свой (sec-num, sec-num-up): номер только всплывает от покоя вверх, в поле секции, —
   на карточки под шапкой не заезжает. Селекторы сильнее .m-on .ms-num из motion.css.
   --num-k — ширина двух цифр в кеглях: у Unbounded «03»…«06» — 1.70–1.72 (самые широкие), «12» — 1.29;
   запасные шрифты (пока Unbounded не пришёл) уже. */
.m-on .sec-head.ms-has-num {
  --num-f: clamp(6rem, 16cqi, 13rem);
  --num-k: 1.75;
  --num-w: calc(var(--num-f) * var(--num-k) + clamp(20px, 2.5cqi, 40px));
  max-width: calc(980px + var(--num-w));
  /* Короткая шапка (один заголовок) не ниже 0.7 высоты номера: он выступает под ней не больше чем
     на 0.12 кегля — меньше отступа шапки до содержимого */
  min-height: calc(var(--num-f) * 0.56);
  padding-right: var(--num-w);
}
.m-on .is-center .sec-head.ms-has-num { padding-left: var(--num-w); }
.m-on .sec-head.ms-has-num > .ms-num {
  font-size: var(--num-f);
  animation-name: sec-num;
}

@container blk (max-width: 599px) {
  .m-on .sec-head.ms-has-num {
    max-width: none;
    min-height: 0;
    padding-inline: 0;
  }
  .m-on .sec-head.ms-has-num > .ms-num { display: none; }
}
@container blk (min-width: 940px) {
  /* Липкая колонка стоит на 40px ниже шапки — номер (выше подписи на ~2/3 кегля) под шапку не уходит */
  .m-on .faq--split .sec-head.ms-has-num {
    --num-f: 4rem;
    --num-w: calc(var(--num-f) * var(--num-k) + 10px);
    max-width: none;
    min-height: 0;
    padding-inline: 0;
  }
  .m-on .faq--split .sec-head.ms-has-num > .ms-num {
    top: 0;
    translate: 0 calc(1.05rem - 100%);
    background-image: linear-gradient(180deg, rgba(var(--accent-rgb), 0.24), rgba(var(--accent-rgb), 0.06) 75%, transparent);
    animation-name: sec-num-up;
  }
  .m-on .faq--split .sec-head.ms-has-num > .ms-num + * { padding-right: var(--num-w); }
}

/* Номер только всплывает (от покоя вверх): вниз, к содержимому под шапкой, не съезжает никогда */
@keyframes sec-num {
  from { transform: none; }
  to { transform: translateY(-40%); }
}
@keyframes sec-num-up {
  from { transform: none; }
  to { transform: translateY(-30%); }
}

.prose {
  max-width: 70ch;
  color: var(--text-2);
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.prose p + p { margin-top: 1.1em; }

/* Сетки карточек: data-mid — колонки на средней ширине, data-wide — на широкой */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }

@container blk (min-width: 600px) {
  .grid:not([data-mid='1']) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Три элемента на средней ширине (до трёх колонок): без одинокой карточки в половине ряда.
   Тарифы — столбиком (выделенный остаётся посередине), последний отзыв — на всю ширину. Три тарифа
   в ряд помещаются уже с 820px (ноутбук 1280 с боковой навигацией) — там сравнение рядом. */
@container blk (min-width: 600px) and (max-width: 819px) {
  .plans[data-mid='3'] { grid-template-columns: minmax(0, 1fr); }
}
@container blk (min-width: 820px) and (max-width: 899px) {
  .plans[data-mid='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container blk (min-width: 600px) and (max-width: 899px) {
  .quotes[data-mid='3'] > :last-child:nth-child(odd),
  .team > :last-child:nth-child(odd),
  .cards[data-mid='3'] > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Планшет: карточки по три уже помещаются — три в ряд вместо пары и одинокой карточки под ней (от 760px:
   уже колонка давала по 3–4 слова в строке) */
@container blk (min-width: 760px) and (max-width: 899px) {
  .cards[data-mid='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards[data-mid='3'] > :last-child:nth-child(odd) { grid-column: auto; }
}
@container blk (min-width: 900px) {
  .grid[data-mid='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--tight[data-wide='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container blk (min-width: 1180px) {
  .grid[data-wide='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Лента на телефоне (.rail[data-rail] в render.js: отзывы, тарифы): карточки листаются вбок с привязкой,
   следующая выглядывает. Лента выходит за поля страницы до краёв экрана, карточка встаёт по полю.
   Работает без JS; точки и активную карточку добавляет motion.js. Поля сверху и снизу — место для тени
   и скобок, отрицательные отступы возвращают раскладку на место. */
@container blk (max-width: 599px) {
  .rail {
    --rail-l: max(var(--gutter), env(safe-area-inset-left));
    --rail-r: max(var(--gutter), env(safe-area-inset-right));
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    gap: 12px;
    margin: -10px calc(-1 * var(--rail-r)) -22px calc(-1 * var(--rail-l));
    padding: 10px var(--rail-r) 22px var(--rail-l);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--rail-l) var(--rail-r);
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  /* Видна одна карточка: равная высота ничего не выравнивает, а короткому тарифу давала пустую полосу
     между списком и кнопкой — каждая карточка своей высоты, кнопка сразу под содержимым. */
  .rail { align-items: start; }
  .rail > * { scroll-snap-align: start; }
  .rail .plan__btn { margin-top: 4px; }
  .rail:focus-visible { outline-offset: -4px; border-radius: var(--r); }
}

/* ---------- Карточки ---------- */
.cards[data-mid='1'],
.quotes[data-mid='1'] { max-width: 680px; }

/* Общая основа карточек: тонкая рамка, светлый блик по верхней кромке, свечение за курсором (--mx/--my). */
.card,
.quote {
  --o: 7px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background:
    radial-gradient(460px circle at var(--mx, 50%) var(--my, -30%), rgba(var(--accent-rgb), calc(0.14 * var(--glow))), transparent 62%),
    linear-gradient(180deg, rgba(255, 236, 220, 0.03), transparent 45%),
    var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 236, 220, 0.04);
  transition: transform 0.45s var(--ease), border-color 0.35s, box-shadow 0.45s, --glow 0.45s;
}
/* Наведение — только с мышью: на касании :hover «залипает» после тапа. Фокус внутри подсвечивает рамку. */
@media (hover: hover) {
  .card:hover,
  .quote:hover {
    --glow: 1;
    border-color: rgba(var(--accent-rgb), 0.36);
    box-shadow: 0 34px 70px -42px rgba(var(--accent-rgb), 0.6), inset 0 1px 0 rgba(255, 236, 220, 0.05);
  }
  .card:hover { transform: translateY(-4px); }
  .card:hover::before { width: calc(100% - 48px); }
  .card:hover .card__icon { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
}
.card:has(:focus-visible) { border-color: rgba(var(--accent-rgb), 0.36); }
/* «Выключены», «Сдержанные» и системное уменьшение движения: наведение на карточки (здесь, тарифы, команда)
   без сдвигов и масштаба — меняется только цвет. */
html:is([data-motion='off'], [data-motion='reduced']) :is(.card, .plan):hover,
html:is([data-motion='off'], [data-motion='reduced']) .member:hover .member__img,
html:is([data-motion='off'], [data-motion='reduced']) :is(.card__btn:hover, .card__btn:focus-visible) .card__arrow { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html :is(.card, .plan):hover,
  html .member:hover .member__img,
  html :is(.card__btn:hover, .card__btn:focus-visible) .card__arrow { transform: none; }
}

.card {
  --pad: clamp(22px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--pad);
}
.card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 24px;
  width: 40px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.8);
  transition: width 0.6s var(--ease);
}

.card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
/* Зарплата — главный факт вакансии: крупная плашка с тенью-свечением. */
.card__top .chip {
  margin-left: auto;
  min-height: 32px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 8px 22px -10px rgba(var(--accent-rgb), 0.9);
}
.card__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.03));
  color: var(--accent-text);
  box-shadow: inset 0 1px 0 rgba(255, 236, 220, 0.06);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.card__icon .i { width: 26px; height: 26px; }
.card__title {
  font: 800 clamp(1.14rem, 1.5vw, 1.3rem)/1.25 var(--f-body);
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.card__text { color: var(--text-2); font-size: 0.97rem; line-height: 1.65; overflow-wrap: anywhere; }
/* Перед кнопкой — чуть больше воздуха: кнопки в ряду стоят по нижнему краю, текст к ним не липнет. */
.card__text:not(:last-child) { padding-bottom: 6px; }
.card__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  margin-top: auto;
  padding: 10px 10px 10px 18px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: var(--r-sm);
  background: rgba(var(--accent-rgb), 0.03);
  color: var(--accent-text);
  font: 700 0.8rem/1.2 var(--f-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.25s, border-color 0.25s;
}
.card__arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.14);
  transition: background-color 0.25s, color 0.25s, transform 0.25s var(--ease);
}
.card__arrow .i { width: 18px; height: 18px; }
@media (hover: hover) {
  .card__btn:hover { background: rgba(var(--accent-rgb), 0.08); border-color: var(--accent); }
  .card__btn:hover .card__arrow { background: var(--accent); color: var(--on-accent); transform: translateX(2px); }
}
.card__btn:focus-visible { background: rgba(var(--accent-rgb), 0.08); border-color: var(--accent); }
.card__btn:focus-visible .card__arrow { background: var(--accent); color: var(--on-accent); transform: translateX(2px); }
.card__btn:active { background: rgba(var(--accent-rgb), 0.14); }

/* Телефон: те же карточки плотнее. Вакансии (с кнопкой) — столбиком, кнопка во всю ширину. */
@container blk (max-width: 599px) {
  .card { --o: 6px; --pad: 20px; gap: 12px; padding: 22px var(--pad) var(--pad); }
  .card::before { left: 20px; }
  .card__top { align-items: center; margin-bottom: 4px; }
  .card__icon { width: 48px; height: 48px; border-radius: 12px; }
  .card__icon .i { width: 23px; height: 23px; }
  .card__title { font-size: 1.12rem; }
  .card__text { font-size: 0.95rem; line-height: 1.6; }
  .card__btn { min-height: 52px; }

  /* Без кнопок (преимущества, география) — компактно: иконка и заголовок одной строкой (заголовок по центру
     плитки), текст под ними во всю ширину карточки — колонка рядом с плиткой давала по 3–4 слова в строке.
     Плашка, если есть, — над заголовком. По колонкам раскладываются только свои части карточки: слои,
     которые вставляет motion.js (кромка нажатия, рябь, луч сканера), остаются поверх всей карточки. */
  .cards--plain .card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-content: start;
    align-items: center;
    gap: 12px 14px;
    padding: 18px 18px 20px;
  }
  .cards--plain .card__top { display: contents; }
  .cards--plain .card__icon { grid-area: 1 / 1; width: 44px; height: 44px; border-radius: 11px; }
  .cards--plain .card__icon .i { width: 21px; height: 21px; }
  .cards--plain .card:has(> .card__top > .chip) .card__icon { grid-row: 1 / span 2; align-self: start; }
  .cards--plain .card > .card__title,
  .cards--plain .card__top > .chip { grid-column: 2; }
  .cards--plain .card > .card__text { grid-column: 1 / -1; }
  .cards--plain .card:not(:has(> .card__title)) > .card__text { grid-column: 2; } /* без заголовка — рядом с плиткой */
  .cards--plain .card__top > .chip { justify-self: start; min-height: 26px; margin: 0 0 -4px; padding: 4px 11px; font-size: 0.72rem; }
  .cards--plain .card__title { font-size: 1.05rem; }
  .cards--plain .card__text { font-size: 0.93rem; }
  .cards--plain .card.card--noicon > :is(.card__title, .card__text),
  .cards--plain .card.card--noicon .card__top > .chip { grid-column: 1 / -1; }
}

/* ---------- О нас ---------- */
.sec-head + .about__text { margin-top: calc(-1 * clamp(10px, 2vw, 28px)); }
.about__text { margin-bottom: clamp(32px, 4.5vw, 56px); }
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }

@container blk (min-width: 860px) {
  .about__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .about__grid--stats,
  .about__grid--hl { grid-template-columns: minmax(0, 1fr); }
}

/* Сверху — схема хабов, снизу читается по-русски: «Работаем с» над «2016 года». */
.about__hl {
  --o: -1px;
  container: hl / inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  grid-template-areas: 'map' 'text';
  gap: 12px;
  min-height: 240px;
  padding: clamp(24px, 3.4vw, 44px);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  /* Точечная «карта»: равномерные точки, гаснущие к краю, и тёплое свечение снизу. */
  background:
    radial-gradient(560px circle at 0% 100%, rgba(var(--accent-rgb), 0.16), transparent 62%),
    radial-gradient(circle, rgba(255, 236, 220, 0.09) 1px, transparent 1.6px) 0 0 / 14px 14px,
    var(--panel);
}
.about__year {
  color: var(--accent-text);
  font: 600 clamp(3.25rem, calc(80cqi / var(--len, 4)), 8.5rem)/0.85 var(--f-num);
  letter-spacing: -0.04em;
  text-shadow: 0 0 60px rgba(var(--accent-rgb), 0.35);
  overflow-wrap: anywhere;
}
.about__hl-text { grid-area: text; display: grid; gap: 12px; min-width: 0; }
/* Подпись рядом с числом, а если не помещается — целиком строкой ниже (flex-wrap), не по буквам */
.about__hl-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; min-width: 0; }
.about__year { flex: none; max-width: 100%; }
.about__label { min-width: 0; }
.about__caption {
  color: var(--dim);
  font: 500 0.66rem/1.4 var(--f-mono);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.about__label { font: 600 1.15rem/1.2 var(--f-display); letter-spacing: 0.02em; }

/* Схема хабов: Москва и партнёрские хабы, пунктир перелётов — как сеть на глобусе первого экрана */
.hubmap {
  grid-area: map;
  align-self: start;
  justify-self: end;
  width: min(100%, 380px);
  height: auto;
  margin-bottom: 8px;
  overflow: visible;
}
.hubmap__arc {
  fill: none;
  stroke: rgba(var(--accent-rgb), 0.55);
  stroke-width: 1px;
  stroke-dasharray: 2 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.hubmap__pin { fill: var(--panel); stroke: rgba(var(--accent-rgb), 0.8); stroke-width: 1.25px; vector-effect: non-scaling-stroke; }
.hubmap__ring { fill: rgba(var(--accent-rgb), 0.08); stroke: rgba(var(--accent-rgb), 0.45); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.hubmap__home { fill: var(--accent); filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.8)); }
.hubmap__code { fill: var(--muted); font: 500 9px var(--f-mono); letter-spacing: 0.14em; }
.hubmap__code--home { fill: var(--accent-text); }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.stats[data-n='1'] { grid-template-columns: minmax(0, 1fr); }
.stats > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.about__grid--stats .stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.about__grid--stats .stats > .stat:last-child:nth-child(odd) { grid-column: auto; }

.stat {
  container: stat / inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 140px;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 236, 220, 0.03), transparent 60%), var(--panel);
}
.stat::before {
  content: '';
  position: absolute;
  top: -1px;
  left: clamp(18px, 2.4vw, 28px);
  width: 26px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--accent);
}
/* --len — самое длинное значение в сетке (render.js): у всех показателей один размер цифр, и он влезает.
   Число не рвётся посреди разрядов; очень длинное нечисловое значение переносится. */
.stat__value {
  display: flex;
  align-items: flex-start;
  font: 600 clamp(1.25rem, calc(150cqi / var(--len, 4)), 3rem)/0.95 var(--f-num);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.stat__num[data-count] { white-space: nowrap; }
.stat__suf { margin-left: 0.06em; color: var(--accent-text); font-size: 0.6em; line-height: 1; letter-spacing: 0; }
.stat__label {
  color: var(--muted);
  font: 500 0.68rem/1.55 var(--f-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.stat { transition: border-color 0.35s; }
@media (hover: hover) {
  .stat:hover { border-color: rgba(var(--accent-rgb), 0.3); }
}

.about__extra {
  margin-top: clamp(28px, 4vw, 48px);
  padding-left: 22px;
  border-left: 1px dashed rgba(var(--accent-rgb), 0.65);
}

/* Телефон: показатели плотнее — две колонки без лишней высоты, плашка года ниже */
@container blk (max-width: 599px) {
  .about__hl { gap: 10px 14px; min-height: 0; padding: 22px 20px 24px; }
  .hubmap { width: min(100%, 320px); justify-self: center; }
  .stat { gap: 14px; min-height: 112px; padding: 18px 16px 16px; }
  .stat::before { left: 16px; }
  .stat__label { font-size: 0.6875rem; letter-spacing: 0.1em; }
}

/* ---------- Шаги ---------- */
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px var(--gap); max-width: 720px; }
.step { position: relative; padding-left: 64px; }
/* Перегон до следующей остановки — пунктир, гаснущий к концу. */
.step::before {
  content: '';
  position: absolute;
  top: 50px;
  bottom: -30px;
  left: 21.5px;
  width: 1px;
  background: repeating-linear-gradient(180deg, var(--accent) 0 5px, transparent 5px 10px);
  -webkit-mask-image: linear-gradient(#000 40%, rgba(0, 0, 0, 0.3));
  mask-image: linear-gradient(#000 40%, rgba(0, 0, 0, 0.3));
}
.step:last-child::before { display: none; }
.step:only-child::before { display: none !important; }
.step__head { position: absolute; top: 0; left: 0; }
.step__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(var(--accent-rgb), 0.6);
  border-radius: 50%;
  background: var(--bg);
  color: var(--accent-text);
  font: 600 0.78rem/1 var(--f-mono);
  box-shadow: 0 0 0 4px var(--bg), 0 0 22px rgba(var(--accent-rgb), 0.25);
  transition: background-color 0.3s, color 0.3s;
}
@media (hover: hover) {
  .step:hover .step__num { background: var(--accent); color: var(--on-accent); }
}
.step__title {
  padding-top: 10px;
  font: 800 1.15rem/1.25 var(--f-body);
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}
.step__text { margin-top: 10px; color: var(--text-2); font-size: 0.97rem; line-height: 1.65; overflow-wrap: anywhere; }
.step__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--text-2);
  font: 500 0.66rem/1.4 var(--f-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.step__meta .i { width: 14px; height: 14px; color: var(--accent-text); }

@container blk (min-width: 900px) {
  .steps { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); max-width: none; row-gap: 56px; }
  .step { padding: 70px 8px 0 0; }
  .step::before {
    top: 21.5px;
    right: calc(-1 * var(--gap) + 6px);
    bottom: auto;
    left: 58px;
    width: auto;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 10px);
    -webkit-mask-image: linear-gradient(90deg, #000 40%, rgba(0, 0, 0, 0.3));
    mask-image: linear-gradient(90deg, #000 40%, rgba(0, 0, 0, 0.3));
  }
  .step:last-child::before {
    display: block;
    right: 0;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent);
    mask-image: linear-gradient(90deg, #000, transparent);
  }
  .step__title { padding-top: 0; }
}
/* Телефон: маршрут плотнее, текст шире */
@container blk (max-width: 599px) {
  .steps { row-gap: 30px; }
  .step { padding-left: 60px; }
  .step::before { bottom: -24px; }
  .step__text { font-size: 0.95rem; line-height: 1.6; }
  .step__meta { margin-top: 12px; }
}

/* ---------- Тарифы ---------- */
.plans[data-mid='1'] { max-width: 480px; }
.plan {
  --o: 7px;
  --pad: clamp(24px, 3vw, 36px);
  container: plan / inline-size;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: var(--pad);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 236, 220, 0.03), transparent 40%), var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 236, 220, 0.04);
  transition: border-color 0.3s, transform 0.45s var(--ease);
}
.plan--featured {
  border-color: rgba(var(--accent-rgb), 0.7);
  background:
    radial-gradient(520px circle at 50% -10%, rgba(var(--accent-rgb), 0.2), transparent 62%),
    var(--panel-2);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.2), 0 44px 90px -44px rgba(var(--accent-rgb), 0.7);
}
@media (hover: hover) {
  .plan:hover { border-color: var(--line-3); transform: translateY(-3px); }
  .plan--featured:hover { border-color: var(--accent); }
}
.plan:has(:focus-visible) { border-color: var(--line-3); }
.plan--featured:has(:focus-visible) { border-color: var(--accent); }
.plan--featured::before {
  content: '';
  position: absolute;
  top: -1px;
  right: 24px;
  left: 24px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.9);
}
.plan__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.plan__name {
  font: 600 0.74rem/1.4 var(--f-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.plan__price {
  position: relative;
  display: grid;
  gap: 10px;
  padding-bottom: 22px;
  border-bottom: 1px dashed var(--line-3);
}
/* Перфорация, как у накладной первого экрана: полукруглые вырезы на краях линии отрыва под ценой.
   Полукруг целиком внутри рамки карточки: ничего не выступает за неё, лента [data-rail] на широком
   экране не считается прокручиваемой (motion.js сравнивает scrollWidth с clientWidth). */
.plan__price::before,
.plan__price::after {
  content: '';
  position: absolute;
  bottom: -10.5px;
  width: 11px;
  height: 20px;
  border: 1px solid var(--line);
  background: var(--bg);
}
.plan__price::before { left: calc(-1 * var(--pad) - 1px); border-left: 0; border-radius: 0 10px 10px 0; }
.plan__price::after { right: calc(-1 * var(--pad) - 1px); border-right: 0; border-radius: 10px 0 0 10px; }
.plan--featured .plan__price::before,
.plan--featured .plan__price::after { border-color: rgba(var(--accent-rgb), 0.7); }
/* Под ценой ничего нет — и линии отрыва нет: она вела бы в пустоту. */
.plan__price:last-child { padding-bottom: 0; border-bottom: 0; }
.plan__price:last-child::before,
.plan__price:last-child::after { display: none; }
/* Тарифы в ряд: у цены без периода («по запросу») место под строку периода — линии отрыва и вырезы
   соседних карточек на одной высоте. */
@container blk (min-width: 820px) {
  .plans:not([data-mid='1']) > .plan > .plan__price:not(:last-child):not(:has(> .plan__period)) {
    padding-bottom: calc(22px + 10px + 0.72rem * 1.4);
  }
}
.plan__amount {
  font: 600 clamp(1.5rem, 10cqi, 2.6rem)/1.1 var(--f-num);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.plan--featured .plan__amount { color: var(--accent-text); }
.plan__period { color: var(--muted); font: 500 0.72rem/1.4 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; }
.plan__period::before { content: '/ '; color: var(--accent-text); }
.plan__desc { color: var(--text-2); font-size: 0.97rem; }
.plan__features { display: grid; gap: 12px; }
.plan__features li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.97rem; overflow-wrap: anywhere; }
.plan__features .i {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-text);
}
.plan--featured .plan__features .i { background: var(--accent); color: var(--on-accent); }
.plan__btn { margin-top: auto; }
/* Узкая карточка (три в ряд на ноутбуке 1280 с боковой навигацией, лента на телефоне): длинная подпись
   («Откликнуться») держится в одну строку */
@container plan (max-width: 300px) {
  .plan__btn { gap: 10px; padding-inline: 14px; letter-spacing: 0.05em; }
}
.pricing__note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 36px);
  color: var(--text-2);
}
.pricing__note .i { margin-top: 0.2em; color: var(--accent-text); }

/* Планшет: тарифы столбиком во всю ширину — внутри две колонки: цена и описание слева, что входит —
   справа за пунктиром. Последняя строка гибкая: кнопка стоит по низу, пустые строки нулевые
   (row-gap 0, отступы — полями). */
@container blk (min-width: 600px) and (max-width: 819px) {
  .plans[data-mid='3'] > .plan:has(> .plan__features) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto auto 1fr;
    gap: 0 clamp(28px, 5cqi, 48px);
  }
  .plans[data-mid='3'] > .plan:has(> .plan__features) > * { grid-column: 1; }
  .plans[data-mid='3'] > .plan:has(> .plan__features) > :not(:last-child, .plan__features) { margin-bottom: 18px; }
  .plans[data-mid='3'] > .plan > .plan__features {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    padding-left: clamp(24px, 4cqi, 40px);
    border-left: 1px dashed var(--line-3);
  }
  .plans[data-mid='3'] > .plan > .plan__btn { align-self: end; }
  .plans[data-mid='3'] > .plan:has(> .plan__features) .plan__price::after { display: none; }
}

/* Телефон: тарифы — лента (.rail), карточка плотнее */
@container blk (max-width: 599px) {
  .plan { --o: 6px; --pad: 22px; gap: 16px; }
  .plan__price { padding-bottom: 18px; }
  .plan__features { gap: 10px; }
  .plan__features li { font-size: 0.95rem; }
  /* Узкая карточка ленты: длинная подпись («Откликнуться») держится в одну строку */
  .plan__btn { gap: 10px; padding-inline: 14px; letter-spacing: 0.05em; }
}

/* ---------- Команда ---------- */
.team[data-mid='1'] { max-width: 360px; }
.member { display: flex; flex-direction: column; gap: 20px; }
.member__media {
  --o: 8px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel-2);
}
.member__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.9);
  transition: filter 0.6s var(--ease), transform 0.9s var(--ease);
}
@media (hover: hover) {
  .member:hover .member__img { filter: none; transform: scale(1.04); }
  .member:hover .member__media { border-color: rgba(var(--accent-rgb), 0.36); }
}
.member__mono {
  container: mono / inline-size;
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  background:
    radial-gradient(circle at 50% 115%, rgba(var(--accent-rgb), 0.3), transparent 60%),
    repeating-linear-gradient(-45deg, rgba(255, 236, 220, 0.025) 0 2px, transparent 2px 12px),
    linear-gradient(180deg, var(--panel-2), var(--panel));
}
.member__initials {
  color: transparent;
  font: 600 34cqi/1 var(--f-num);
  letter-spacing: -0.02em;
  -webkit-text-stroke: 1.5px rgba(var(--accent-rgb), 0.85);
  transition: color 0.5s var(--ease), text-shadow 0.5s;
}
@media (hover: hover) {
  .member:hover .member__initials { color: rgba(var(--accent-rgb), 0.18); text-shadow: 0 0 40px rgba(var(--accent-rgb), 0.4); }
}
.member__glyph { width: 30%; height: auto; aspect-ratio: 1; color: rgba(var(--accent-rgb), 0.7); }
.member__id {
  position: absolute;
  bottom: 22px;
  left: 28px;
  color: var(--dim);
  font: 500 0.64rem/1 var(--f-mono);
  letter-spacing: 0.24em;
}
.member__body { display: grid; align-content: start; gap: 8px; min-width: 0; }
.member__role {
  color: var(--accent-text);
  font: 500 0.68rem/1.5 var(--f-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
/* Длинная фамилия (.hy из render.js) переносится по слогам с дефисом (lang="ru"), а не рвётся посреди
   слога; короткие куски вроде «ВА-» не отрываются. overflow-wrap — запас для слов без переносов. */
.member__name {
  font: 800 1.2rem/1.2 var(--f-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
  hyphenate-limit-chars: 9 4 4;
}
.member__text { color: var(--text-2); font-size: 0.95rem; line-height: 1.6; overflow-wrap: anywhere; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tags li {
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: rgba(255, 236, 220, 0.02);
  color: var(--text-2);
  font: 500 0.62rem/1.4 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* Телефон и планшет: компактные строки — монограмма или фото слева, имя, роль и теги справа (на планшете —
   в две колонки). Лента здесь хуже: людей ищут глазами, и все видны сразу без пролистывания; плитка
   во всю ширину занимала экран на человека. */
@container blk (max-width: 899px) {
  .team { gap: 10px; }
  .team[data-mid='1'] { max-width: none; }
  .member {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 12px 16px 14px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: linear-gradient(180deg, rgba(255, 236, 220, 0.03), transparent 60%), var(--panel);
    box-shadow: inset 0 1px 0 rgba(255, 236, 220, 0.04);
  }
  .member__media { border-radius: var(--r-sm); }
  .team .member .member__media.brk--4::after { --s: 9px; --tx-brk: 9px; --o: 4px; }
  .member__img { object-position: 50% 25%; }
  .member__initials { -webkit-text-stroke-width: 1.25px; }
  .member__id { display: none; }
  .member__body { gap: 5px; padding-top: 4px; }
  .member__role { font-size: 0.6875rem; letter-spacing: 0.12em; }
  .member__name { font-size: 1rem; letter-spacing: 0.03em; }
  .member__text { font-size: 0.9rem; line-height: 1.55; }
  .tags { margin-top: 4px; }
}
/* Один человек на широком экране — та же строка крупнее: фото слева, текст справа, а не одинокая плитка
   у левого края и пустые две трети ряда. */
@container blk (min-width: 900px) {
  .team[data-mid='1'] { max-width: 760px; }
  .team[data-mid='1'] > .member { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: 40px; }
}

/* ---------- Отзывы ---------- */
.quote__fig {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  padding: clamp(24px, 2.8vw, 32px);
}
/* Верхняя строка: кавычка слева, звёзды справа — оценка не съедает высоту карточки. */
.quote__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 30px; }
.quote__mark {
  height: 0.42em;
  color: var(--accent-text);
  font: 700 4.5rem/0.85 var(--f-display);
  text-shadow: 0 0 30px rgba(var(--accent-rgb), 0.4);
}
.quote__stars { display: flex; gap: 3px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--line-3); }
.quote__stars .i { width: 14px; height: 14px; }
.quote__stars .is-on { color: var(--accent-text); }
.quote__text { flex: 1; font-size: 1.04rem; line-height: 1.7; overflow-wrap: anywhere; }
.quote__by { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px dashed var(--line-2); }
.quote__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-text);
  font: 600 0.82rem/1 var(--f-display);
  letter-spacing: 0.02em;
}
.quote__who { display: grid; gap: 2px; min-width: 0; }
.quote__name { font-weight: 800; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.quote__meta {
  color: var(--muted);
  font: 500 0.66rem/1.5 var(--f-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.quote__meta-part { display: inline-block; }

/* Телефон: отзывы — лента (.rail), карточка плотнее */
@container blk (max-width: 599px) {
  .quote { --o: 6px; }
  .quote__fig { gap: 14px; padding: 22px 20px 20px; }
  .quote__mark { font-size: 3.75rem; }
  .quote__text { font-size: 0.98rem; line-height: 1.65; }
  .quote__by { padding-top: 14px; }
  .quote__avatar { width: 40px; height: 40px; }
}

/* Чек-лист (отзывы без авторов и оценок, render.js → checklist): панель-накладная с шапкой, ячейки
   с галочкой и номером. Линии между ячейками — тенью 1px вправо и вниз: у крайних её срезает
   overflow списка, поэтому сетка ровная при любом числе колонок. Последний пункт добирает ряд до конца. */
.reqs {
  --o: -1px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background:
    radial-gradient(560px circle at 100% 0%, rgba(var(--accent-rgb), 0.08), transparent 60%),
    linear-gradient(180deg, rgba(255, 236, 220, 0.03), transparent 40%),
    var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 236, 220, 0.04);
}
.reqs__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line-2);
  border-radius: var(--r) var(--r) 0 0;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.1), transparent 70%);
  color: var(--muted);
  font: 500 0.62rem/1.4 var(--f-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.reqs__type { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-text); }
.reqs__type .i { width: 15px; height: 15px; }
.reqs__count { color: var(--text-2); letter-spacing: 0.16em; font-variant-numeric: tabular-nums; }
.reqs__list { gap: 0; overflow: hidden; border-radius: 0 0 var(--r) var(--r); }
/* Галочка, текст и номер — по одной линии: первая строка текста и номер стоят по центру плитки
   (--tile), сколько бы строк ни было у пункта и у соседа по ряду. */
.req {
  --tile: 36px;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 24px 26px;
  box-shadow: 1px 1px 0 var(--line-2);
  transition: background-color 0.3s;
}
.req__check {
  display: grid;
  place-items: center;
  width: var(--tile);
  height: var(--tile);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.03));
  color: var(--accent-text);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.req__check .i { width: 18px; height: 18px; }
.req__text {
  padding-top: 6px;
  padding-top: max(0px, calc((var(--tile) - 1lh) / 2));
  font: 600 1.05rem/1.45 var(--f-body);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.req__no {
  padding-top: calc((var(--tile) - 1em) / 2);
  color: var(--dim);
  font: 500 0.66rem/1 var(--f-mono);
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .req:hover { background-color: rgba(var(--accent-rgb), 0.045); }
  .req:hover .req__check { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
  .req:hover .req__no { color: var(--accent-text); }
}

@container blk (min-width: 600px) {
  .reqs__list:not([data-mid='1']) > .req:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container blk (min-width: 900px) {
  .reqs__list[data-mid='3'] > .req:last-child:nth-child(n) { grid-column: auto; }
  .reqs__list[data-mid='3'] > .req:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .reqs__list[data-mid='3'] > .req:last-child:nth-child(3n + 2) { grid-column: span 2; }
}
@container blk (min-width: 1180px) {
  .reqs__list[data-wide='4'] > .req:last-child:nth-child(n) { grid-column: auto; }
  .reqs__list[data-wide='4'] > .req:last-child:nth-child(4n + 1) { grid-column: 1 / -1; }
  .reqs__list[data-wide='4'] > .req:last-child:nth-child(4n + 2) { grid-column: span 3; }
  .reqs__list[data-wide='4'] > .req:last-child:nth-child(4n + 3) { grid-column: span 2; }
}
/* Телефон: компактные строки списка */
@container blk (max-width: 599px) {
  .reqs__bar { padding: 11px 18px; }
  .req { --tile: 32px; gap: 14px; padding: 15px 18px 15px 16px; }
  .req__check { border-radius: 9px; }
  .req__check .i { width: 16px; height: 16px; }
  .req__text { font-size: 0.97rem; line-height: 1.4; }
  .req__no { font-size: 0.6875rem; letter-spacing: 0.1em; }
}

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); }
.faq .sec-head { margin-bottom: 0; }

@container blk (min-width: 940px) {
  .faq--split .faq { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); align-items: start; }
  .faq--split .faq__head { position: sticky; top: calc(var(--header-h) + 40px); }
  /* Номер секции стоит над подписью и всплывает ещё выше — липкая колонка ниже на его выступ,
     иначе цифры уходят под шапку */
  .m-on .faq--split .faq__head.ms-has-num { top: calc(var(--header-h) + 56px); }
  .faq--split .sec-title { font-size: clamp(1.9rem, 3.6cqi, 3.5rem); }
}

.faq__list { border-top: 1px solid var(--line-2); }
.faq__item { border-bottom: 1px solid var(--line-2); }
.faq__q {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 2px;
  list-style: none;
  font: 700 clamp(1rem, 1.35vw, 1.14rem)/1.4 var(--f-body);
  transition: color 0.25s;
}
details > .faq__q { cursor: pointer; }
.faq__q::-webkit-details-marker { display: none; }
.faq__num { flex: none; width: 2.4em; color: var(--accent-text); font: 500 0.72rem/1 var(--f-mono); letter-spacing: 0.08em; }
.faq__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.faq__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--accent-text);
  transition: transform 0.35s var(--ease), background-color 0.3s, color 0.3s, border-color 0.3s;
}
.faq__icon .i { width: 18px; height: 18px; }
@media (hover: hover) {
  details > .faq__q:hover { color: var(--accent-text); }
  details > .faq__q:hover .faq__icon { border-color: rgba(var(--accent-rgb), 0.6); }
}
details > .faq__q:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); }
details > .faq__q:focus-visible .faq__icon { border-color: var(--accent); }
.faq__item[open]:not(.is-closing) .faq__icon {
  transform: rotate(45deg);
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.faq__a { overflow: hidden; }
.faq__a-in { max-width: none; padding: 0 56px 26px calc(2.4em + 18px); }

/* Узко: ответ — под текстом вопроса, а не под номером (номер — колонка 2.4em, отступ — как у вопроса) */
@container blk (max-width: 520px) {
  .faq__a-in { padding: 0 0 22px calc(0.72rem * 2.4 + 14px); }
}
/* Телефон: строка вопроса — крупная цель касания (≥ 60px), иконка чуть меньше */
@container blk (max-width: 599px) {
  .faq__q { gap: 14px; min-height: 64px; padding: 16px 0; }
  .faq__icon { width: 36px; height: 36px; }
  .faq__icon .i { width: 16px; height: 16px; }
}

/* ---------- Призыв к действию ---------- */
.cta {
  --o: 0px;
  position: relative;
  display: grid;
  gap: 32px;
  overflow: hidden;
  padding: clamp(32px, 6vw, 80px);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: var(--r);
  background:
    radial-gradient(760px circle at 88% 30%, rgba(var(--accent-rgb), 0.22), transparent 60%),
    linear-gradient(135deg, var(--panel-2), var(--bg-2));
}
/* Кромка конверта авиапочты: чередование акцента и светлых полос. */
.cta::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 6px;
  background: repeating-linear-gradient(-45deg, var(--accent) 0 10px, transparent 10px 16px, rgba(255, 236, 220, 0.55) 16px 26px, transparent 26px 32px);
  opacity: 0.8;
}
.cta__fx {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.28) 1px, transparent 1.7px) 0 0 / 16px 16px;
  -webkit-mask-image: radial-gradient(70% 90% at 92% 40%, #000, transparent 75%);
  mask-image: radial-gradient(70% 90% at 92% 40%, #000, transparent 75%);
}
.cta__body { position: relative; max-width: 900px; }
.cta__title {
  margin-top: 16px;
  font: 600 clamp(1.8rem, 5.4cqi, 4.25rem)/1.08 var(--f-display);
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.cta__title:first-child { margin-top: 0; }
.cta__text { max-width: 56ch; margin-top: 18px; color: var(--text-2); font-size: clamp(1rem, 1.3vw, 1.15rem); }
.cta__btns { position: relative; }

@container blk (min-width: 980px) {
  .cta { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .cta__btns { flex-direction: column; align-items: stretch; }
}
/* Телефон: поля панели по сетке страницы, кнопки во всю ширину. Подпись главной кнопки («Написать
   в Telegram») держится в одну строку и на 320: поля кнопки и разрядка меньше, на самом узком — и поля панели. */
@container blk (max-width: 599px) {
  .cta { gap: 26px; padding: 30px 22px 36px; }
  .cta__text { margin-top: 14px; font-size: 0.98rem; }
  .cta__btns > .btn { flex: 1 1 100%; gap: 10px; padding-inline: 16px; letter-spacing: 0.05em; }
}
@container blk (max-width: 359px) {
  .cta { padding-inline: 18px; }
  .cta__btns > .btn { padding-inline: 12px; }
}

/* ---------- Текст ---------- */
.sec--text.is-center .sec-head,
.sec--text.is-center .textblk { margin-inline: auto; text-align: center; }
.sec--text.is-center .eyebrow { justify-content: center; }

/* ---------- Контакты и форма ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap) clamp(24px, 3vw, 44px); align-items: start; }

@container blk (min-width: 920px) {
  .contact--split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.contact--form .formbox { max-width: 780px; }
.contact--list .clist { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

.clist__row {
  min-height: 78px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
}
@media (hover: hover) {
  a.clist__row:hover { border-color: rgba(var(--accent-rgb), 0.5); background: var(--panel-2); }
}
a.clist__row:focus-visible { border-color: rgba(var(--accent-rgb), 0.5); background: var(--panel-2); }
a.clist__row:active { background: var(--panel-2); }
.clist__icon { width: 46px; height: 46px; }
.clist__value { font-size: 1.04rem; }

/* Телефон: строки контактов ниже, рамка формы с ровными полями внутри */
@container blk (max-width: 599px) {
  .clist__row { gap: 14px; min-height: 68px; padding: 12px 16px 12px 12px; }
  .clist__icon { width: 44px; height: 44px; }
  .clist__value { font-size: 1rem; }
  .formbox { padding: 22px 18px 20px; }
  .formbox__title { margin-bottom: 18px; }
}
@container blk (max-width: 340px) {
  .clist__row { gap: 12px; padding-right: 12px; }
  .clist__icon { width: 40px; height: 40px; }
  .clist__value { font-size: 0.94rem; }
  .formbox { padding-inline: 16px; }
}

.formbox {
  --o: -1px;
  container: formbox / inline-size;
  padding: clamp(22px, 3.2vw, 40px);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background:
    radial-gradient(520px circle at 100% 0%, rgba(var(--accent-rgb), 0.09), transparent 60%),
    linear-gradient(180deg, rgba(255, 236, 220, 0.035), transparent 40%),
    var(--panel);
}
.formbox__title {
  margin-bottom: 24px;
  color: var(--accent-text);
  font: 500 0.72rem/1.5 var(--f-mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

@container formbox (min-width: 520px) {
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--wide,
  .form__consent,
  .form__foot { grid-column: 1 / -1; }
}

.field { display: grid; align-content: start; gap: 8px; min-width: 0; }
.field__label {
  color: var(--text-2);
  font: 500 0.66rem/1.4 var(--f-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.field__req { margin-left: 4px; color: var(--accent-text); }
.field__control {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: rgba(11, 10, 9, 0.7);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.4;
  appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.field__control::placeholder { color: var(--dim); opacity: 1; }
.field__control:hover { border-color: var(--line-3); }
.field__control:focus { outline: none; border-color: var(--accent-text); background: rgba(11, 10, 9, 0.92); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.2); }
.field__control[aria-invalid='true'] { border-color: var(--danger); }
textarea.field__control { min-height: 124px; resize: vertical; }
.field__select { position: relative; }
.field__select select { padding-right: 48px; cursor: pointer; }
.field__select .i { position: absolute; top: 50%; right: 16px; width: 18px; height: 18px; translate: 0 -50%; color: var(--accent-text); pointer-events: none; }
select.field__control option { background: #15120f; color: var(--text); }
.field__err { color: var(--danger); font-size: 0.85rem; line-height: 1.4; }

.check { display: flex; align-items: flex-start; gap: 12px; color: var(--text-2); font-size: 0.9rem; line-height: 1.5; cursor: pointer; }
/* Касание: строка согласия в одну строку (телефон боком) — зона касания не ниже 44px, раскладка та же */
@media (pointer: coarse) {
  .check { margin-block: -11px; padding-block: 11px; }
}
.check__box {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1px solid var(--line-3);
  border-radius: 6px;
  background: rgba(11, 10, 9, 0.7);
  appearance: none;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.check__box::before {
  content: '';
  width: 11px;
  height: 6px;
  border: solid var(--on-accent);
  border-width: 0 0 2px 2px;
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transition: transform 0.2s var(--ease);
}
.check__box:checked { border-color: var(--accent); background: var(--accent); }
.check__box:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1); }
.check__box[aria-invalid='true'] { border-color: var(--danger); }
.check a { color: var(--accent-text); text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), 0.5); text-underline-offset: 3px; }
.check a:hover { text-decoration-color: currentColor; }
.form__consent .field__err { margin: 8px 0 0 34px; }

.hp { position: absolute; top: auto; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form__foot { display: grid; gap: 12px; margin-top: 4px; }
.form__status { color: var(--text-2); font-size: 0.92rem; }
.form.is-loading .btn { cursor: progress; filter: saturate(0.6) brightness(0.9); }
.form.is-loading .btn .i { animation: charge 0.9s ease-in-out infinite; }

@keyframes charge {
  50% { opacity: 0.25; transform: scale(0.85); }
}

.flash {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
  padding: 14px 16px;
  border: 1px solid;
  border-radius: var(--r-sm);
  font-weight: 600;
  line-height: 1.45;
}
.flash .i { margin-top: 1px; }
.flash--ok { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.08); }
.flash--ok .i { color: var(--accent-text); }
.flash--error { border-color: rgba(255, 107, 94, 0.5); background: rgba(255, 107, 94, 0.08); }
.flash--error .i { color: var(--danger); }

.form-done { display: grid; justify-items: start; gap: 20px; padding-block: 12px 4px; outline: none; }
.form-done::before {
  content: '✓';
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font: 800 1.6rem/1 var(--f-body);
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.14), 0 0 40px rgba(var(--accent-rgb), 0.5);
}
.form-done p { font: 600 clamp(1.15rem, 2.2vw, 1.5rem)/1.3 var(--f-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }

.map {
  --o: 0px;
  height: clamp(300px, 36vw, 460px);
  margin-top: clamp(24px, 3vw, 40px);
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--panel);
}
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.35) contrast(1.05); }

/* ---------- Подвал ---------- */
.ftr {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  /* Снизу — полоска «домой» (viewport-fit=cover): знак не уходит под неё */
  padding-block: clamp(48px, 7vw, 96px) var(--safe-b);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(13, 11, 10, 0.92) 40%);
}
.ftr__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 40px); }
.ftr__brand { display: grid; align-content: start; justify-items: start; gap: 22px; min-width: 0; }
.ftr .logo__name { white-space: normal; overflow-wrap: anywhere; }
.ftr__status {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font: 500 0.68rem/1.5 var(--f-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.ftr__h {
  margin-bottom: 18px;
  color: var(--dim);
  font: 500 0.68rem/1.4 var(--f-mono);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.ftr__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.ftr__links a { color: var(--text-2); font-weight: 600; transition: color 0.2s; }
@media (hover: hover) {
  .ftr__links a:hover { color: var(--accent-text); }
}
.ftr__links a:active { color: var(--accent-text); }
.fcontacts { gap: 12px; }
.fcontacts__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 9px; color: var(--accent-text); }
.fcontacts__icon .i { width: 18px; height: 18px; }
.fcontacts__value { color: var(--text-2); font-size: 0.95rem; }
a.fcontacts__row:hover .fcontacts__value { color: var(--text); }
.fcontacts__go { display: none; }

@media (min-width: 760px) {
  .ftr__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.7fr) minmax(0, 1.2fr); }
  .ftr__links { grid-template-columns: minmax(0, 1fr); }
}
/* Телефон: колонки — разделы накладной под пунктирной линией отрыва, кнопка во всю ширину */
@media (max-width: 759px) {
  .ftr__col { padding-top: 24px; border-top: 1px dashed var(--line-2); }
  .ftr__h { margin-bottom: 8px; }
  .ftr__links { gap: 0 24px; }
}
@media (max-width: 479px) {
  .ftr__brand > .btn { justify-self: stretch; min-height: 52px; }
}
/* Последний блок — призыв с той же кнопкой: на телефоне вторая оранжевая кнопка сразу под ним лишняя,
   контакты подвала ниже ведут туда же. */
@media (max-width: 759px) {
  .ftr--after-cta .ftr__brand > .btn { display: none; }
}
/* Касание на широком экране (телефон боком, планшет): ссылки — строками по 44px, и колонка разделов
   в одну строку растягивала подвал на 2–3 экрана. Знак с кнопкой — строкой сверху, под ним разделы
   в две колонки и контакты. */
@media (min-width: 760px) and (max-width: 1199px) and (pointer: coarse) {
  .ftr__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ftr__brand { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
  .ftr__brand > .btn { margin-left: auto; }
  .ftr__links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
}
/* Касание: ссылки и строки контактов не ниже 44px */
@media (max-width: 759px), (pointer: coarse) {
  .ftr__links a { display: flex; align-items: center; min-height: 44px; -webkit-tap-highlight-color: transparent; }
  .fcontacts__row { min-height: 48px; }
  .ftr__privacy { display: inline-flex; align-items: center; min-height: 44px; }
}

.ftr__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-block: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
}
.ftr__legalbox { display: grid; gap: 6px; }
.ftr__legal { color: var(--dim); font: 500 0.7rem/1.6 var(--f-mono); letter-spacing: 0.06em; }
.ftr__privacy { color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), 0.6); text-underline-offset: 4px; }
.ftr__privacy:hover { color: var(--accent-text); }
.ftr__mark {
  margin: 8px 0 -0.14em;
  padding-inline: 8px;
  overflow: hidden;
  color: transparent;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-rgb), 0.04) 60%, transparent 92%);
  -webkit-background-clip: text;
  background-clip: text;
  font: 700 min(calc(96cqi / (var(--len, 6) * 1.05)), 22rem)/0.9 var(--f-display);
  letter-spacing: -0.02em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}

/* ---------- Плавающая кнопка связи ---------- */
/* Без JS кнопки нет (hidden). С JS site.js уводит её (.is-away), пока на экране главные кнопки первого экрана,
   призыва и контактов, список контактов или подвал, пока открыто меню и пока страницу быстро листают вниз —
   кнопка не закрывает ни текст, ни кнопки, ни поля формы, ни последний экран. Отступ снизу — над полосой «домой». */
.fab {
  position: fixed;
  right: max(16px, calc(env(safe-area-inset-right) + 8px));
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
  z-index: 40;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 12px;
}
.fab.is-open { z-index: 60; } /* затемнение и панель — над шапкой */
.fab__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  box-shadow: 0 12px 30px -8px rgba(var(--accent-rgb), 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: transform 0.25s var(--ease), box-shadow 0.25s, opacity 0.25s, scale 0.3s var(--ease), translate 0.3s var(--ease), visibility 0s;
  -webkit-tap-highlight-color: transparent;
}
/* Ушла: не видна, не нажимается, не в порядке Tab (visibility — после затухания). */
.fab.is-away .fab__btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  scale: 0.6;
  translate: 0 18px;
  transition: opacity 0.18s, scale 0.22s ease-in, translate 0.22s ease-in, visibility 0s 0.22s;
}
/* Затемнение вокруг открытой панели на телефоне; тап по нему закрывает панель (site.js). */
@media (max-width: 599px) {
  .fab__btn { width: 56px; height: 56px; }
  .fab::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(6, 5, 4, 0.62);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0s 0.25s;
  }
  .fab.is-open::before { opacity: 1; visibility: visible; transition: opacity 0.3s; }
}
.fab__btn::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  border-radius: 50%;
  animation: ring 2.8s var(--ease) infinite;
}
.fab__btn:hover { transform: translateY(-2px) scale(1.04); }
.fab__btn:focus-visible { outline-offset: 5px; }
.fab__btn .i { grid-area: 1 / 1; width: 26px; height: 26px; transition: opacity 0.2s, transform 0.3s var(--ease); }
.fab__close { opacity: 0; transform: rotate(-90deg); }
.fab__btn[aria-expanded='true'] .fab__open { opacity: 0; transform: rotate(90deg); }
.fab__btn[aria-expanded='true'] .fab__close { opacity: 1; transform: none; }
.fab__btn[aria-expanded='true']::before { animation: none; opacity: 0; }

@keyframes ring {
  0% { transform: scale(0.9); opacity: 1; }
  70%, 100% { transform: scale(1.35); opacity: 0; }
}

.fab__panel {
  width: min(340px, calc(100vw - 32px));
  padding: 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: rgba(18, 16, 14, 0.97);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform-origin: bottom right;
  transition: opacity 0.25s, transform 0.3s var(--ease);
}
@starting-style {
  .fab__panel { opacity: 0; transform: translateY(10px) scale(0.98); }
}
.fab__title {
  margin-bottom: 12px;
  color: var(--dim);
  font: 500 0.66rem/1.4 var(--f-mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.fcard { gap: 4px; max-height: min(62vh, 470px); overflow-y: auto; }
.fcard__row { padding: 9px 10px; border: 1px solid transparent; border-radius: var(--r-sm); }
@media (hover: hover) {
  a.fcard__row:hover { border-color: rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.06); }
}
a.fcard__row:focus-visible { border-color: rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.06); }
.fcard__icon { width: 36px; height: 36px; }
.fcard__icon .i { width: 18px; height: 18px; }
.fcard__value { font-size: 0.92rem; }
.fcard__item--main > .fcard__row { border-color: rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.06); }
.fcard__item--main .fcard__icon { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }

/* ---------- Политика и 404 ---------- */
.doc { max-width: calc(880px + 2 * var(--gutter)); padding-block: clamp(28px, 7vw, 96px) clamp(48px, 7vw, 96px); }
.back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-bottom: clamp(24px, 5vw, 56px);
  padding-block: 8px;
  color: var(--text-2);
  font: 500 0.72rem/1.4 var(--f-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.back:hover { color: var(--accent-text); }
.doc__title {
  margin-top: 18px;
  font: 600 clamp(1.6rem, 4.8vw, 3rem)/1.12 var(--f-display);
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* На широком экране слово целиком помещается — без переносов, строки выровнены */
@media (min-width: 600px) {
  .doc__title { hyphens: manual; text-wrap: balance; }
}
.doc__body { margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line-2); }
.doc__empty { margin-top: 32px; color: var(--text-2); }

.nf {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 20px;
  min-height: min(78svh, 820px);
  padding-block: clamp(40px, 8vw, 64px);
}
/* Телефон: кнопка возврата во всю ширину, под большой палец */
@media (max-width: 479px) {
  .nf { gap: 16px; }
  .nf .btns { justify-self: stretch; }
}
.nf__code {
  display: flex;
  color: var(--bg);
  /* Телефон — почти во всю ширину строки; невысокое окно (телефон боком) — от высоты */
  font: 700 clamp(5.5rem, min(31vw, 40svh), 16rem)/0.85 var(--f-num);
  letter-spacing: -0.05em;
  /* Как у контурной строки первого экрана: обводка под заливкой — без швов вариативного шрифта. */
  -webkit-text-stroke: 3px var(--accent-text);
  paint-order: stroke fill;
}
.nf__code span:nth-child(2) { color: var(--accent-text); -webkit-text-stroke: 0; text-shadow: 0 0 60px rgba(var(--accent-rgb), 0.5); }
.nf__title { font: 600 clamp(1.8rem, 4.6vw, 3.4rem)/1.1 var(--f-display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.nf__text { max-width: 52ch; color: var(--text-2); }
.nf .btns { margin-top: 12px; }

/* ---------- Появление при прокрутке (только с JS и без reduced motion) ---------- */
.js [data-reveal].is-pending { opacity: 0; }
.js [data-reveal].is-in { animation: reveal 0.9s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }

@keyframes reveal {
  from { opacity: 0; translate: 0 28px; }
  to { opacity: 1; translate: none; }
}
/* Узкий экран — одна колонка: каждый блок появляется, как только вошёл, без задержки по номеру, короче. */
@media (max-width: 599px) {
  .js [data-reveal].is-in { animation-duration: 0.5s; animation-delay: 0s; }
  @keyframes reveal {
    from { opacity: 0; translate: 0 16px; }
    to { opacity: 1; translate: none; }
  }
}
/* «Сдержанные» — только мягкое затухание, без подъёма. */
html[data-motion='reduced'].js [data-reveal].is-in { animation-name: reveal-fade; }
@keyframes reveal-fade {
  from { opacity: 0; }
}

/* ---------- Меньше движения ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ticker__track,
  .dot::after,
  .fab__btn::before { animation: none !important; }
  .dot::after,
  .fab__btn::before { display: none; }
  .js [data-reveal].is-pending { opacity: 1; }
}

/* ---------- Режимы движения (<html data-motion>, настройка «Анимации»; motion-boot.js сводит системный
   reduce к off). off — как блок prefers-reduced-motion выше; reduced — без фоновых циклов,
   остаются только мягкие появления. ---------- */
html[data-motion='off'] { scroll-behavior: auto; }
html[data-motion='off'] *,
html[data-motion='off'] *::before,
html[data-motion='off'] *::after {
  animation-duration: 0.01ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
}
html[data-motion='off'] .ticker__track,
html[data-motion='off'] .dot::after,
html[data-motion='off'] .fab__btn::before { animation: none !important; }
html[data-motion='off'] .dot::after,
html[data-motion='off'] .fab__btn::before { display: none; }
html[data-motion='off'].js [data-reveal].is-pending { opacity: 1; }
html[data-motion='reduced'] .ticker__track,
html[data-motion='reduced'] .dot::after { animation: none; }
html[data-motion='reduced'] .fab__btn::before { animation: none; opacity: 0; }
html[data-motion='reduced'] .fab.is-away .fab__btn { scale: none; translate: none; } /* только затухание */