/* ═══════════════════════════════════════════════════════════════
   gastroCarrier landing — база: токены, сброс, шапка, hero
   Палитра канона: тёмный тактический HUD.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Фоны */
  --bg-lowest: #050d25;
  --bg: #0a122a;
  --bg-low: #131a33;
  --bg-surface: #171e37;
  --bg-high: #212942;
  --bg-bright: #313852;
  /* Текст */
  --text: #dbe1ff;
  --text-dim: #8a93c4;
  --text-warm: #e1bfb5;
  /* Акценты */
  --cyan: #00eefc;
  --cyan-soft: #00dbe9;
  --cyan-bright: #7df4ff;
  --orange: #ff6b35;
  --orange-tint: #ffb59d;
  --amber: #ffb95a;
  --amber-deep: #d48900;
  /* Радиусы: два шага системы. Контейнеры (карточки, блоки, баннеры) —
     14, мелкий UI (кнопки, поля, теги, тултипы) — 8. Пилюли (999px) и
     круги (50%) — формы, а не шаги; миниатюры продукта (демо-канбан,
     ICAO-чипы, флаги) держат свои радиусы как часть «скриншота». */
  --radius: 8px;
  --radius-lg: 14px;
  --header-h: 80px;
  /* Полная высота fixed-шапки: app-бар + командная строка + hazard-линия
     + линия флагов с картинкой мачты. Точная высота ставится из JS
     (она зависит от натуральной пропорции мачты); значение ниже —
     no-JS фолбэк. */
  --header-total: 198px;
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Plus Jakarta Sans", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, .brand-name, .metric-value {
  font-family: var(--font-display);
}

/* Единый карточный заголовок — все h3 внутри карточек лендинга.
   Кегль и вес одни для всех, обычный регистр (капс остаётся только у
   мелких лейблов-надзаголовков). Цвет — роль секции, задаётся отдельно. */
.card-title {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* Единый карточный бодитекст: кегль, интерлиньяж и цвет одни для всех
   карточек лендинга. Лид-тексты (hero-sub, section-desc, CTA) крупнее —
   это отдельный тир иерархии, они токеном не покрываются. */
.card-text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-dim);
}

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

button { font: inherit; cursor: pointer; }

.container { width: min(1200px, 92%); margin-inline: auto; }
.container-wide { width: min(1360px, 96%); margin-inline: auto; }

/* Цветовые хелперы */
.text-cyan { color: var(--cyan); }
.text-cyan-bright { color: var(--cyan-bright); }
.text-orange { color: var(--orange); }
.text-amber { color: var(--amber); }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.dot-cyan { background: var(--cyan); }
.dot-orange { background: var(--orange); }
.dot-ping { animation: ping 1.6s ease-out infinite; }

@keyframes ping {
  0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ─── Шапка ─────────────────────────────────────────────────── */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(5, 13, 37, 0.9);
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 24px rgba(5, 13, 37, 0.85);
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand { display: flex; align-items: center; gap: 10px; }

.brand-mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: var(--orange);
  color: #2a1800;
  font-size: 20px;
}

/* Знак-катапульта в шапке: inline-SVG заполняет бейдж целиком. */
.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--radius);
}

/* Бегущая посадочная полоса: шевроны катапульты засвечиваются по очереди
   слева-направо (по направлению «взлёта») — как гонка огней на полосе
   авианосца. Только transform/opacity — дёшево для композитора;
   transform-box: fill-box нужен, чтобы scale шёл от центра каждого
   шеврона, а не от всего SVG-холста. */
.brand-mark .chev {
  opacity: 0.45;
  transform-box: fill-box;
  transform-origin: center;
  animation: catapult-chase 3s linear infinite;
}

.brand-mark .chev.c2 { animation-delay: 1.0s; }
.brand-mark .chev.c3 { animation-delay: 2.0s; }

@keyframes catapult-chase {
  0%, 33%, 100% { opacity: 0.45; transform: scale(1); }
  15%           { opacity: 1;    transform: scale(1.22); }
}

/* Маячок-«чип» в шапке: живёт между знаком-катапультой и названием как
   неоновый разделитель. Переиспользует ключи dot-glow/dot-ring из
   .pulse-dot, но внутри .brand — обычный flex-элемент (align-items:center
   строки ставит его на уровень шевронов, тёмная полоса занимает ровно
   середину бейджа). Селектор с двумя классами — перекрывает позиционные
   правила .pulse-dot независимо от порядка в файле. Точка синхронна
   с гонкой шевронов (3 с), чтобы знак дышал в одном ритме. */
.brand .brand-live {
  --dot-color: var(--cyan-bright);
  position: static;
  transform: none;
  width: 7px;
  height: 7px;
  flex: none;
  animation-duration: 3s;
}

.brand .brand-live::after { animation-duration: 3s; }

.brand-text { display: flex; flex-direction: column; gap: 1px; }

/* Название в две строки: Gastro / Carrier — компактный «шильдик» корабля.
   Версия живёт в копирайте футера (footerCopy), шапку не утяжеляет. */
.brand-name {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.main-nav { display: flex; gap: 6px; }

.nav-link {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  text-align: center; /* двухстрочные подписи («... <br> ...») по центру */
  color: var(--text-dim);
  padding: 7px 12px;
  border-radius: var(--radius);
  transition: color 0.2s, background 0.2s;
}

.nav-link:hover { color: var(--text); background: var(--bg-surface); }
.nav-link.is-active { color: var(--cyan); background: var(--bg-high); }

.header-actions { display: flex; align-items: center; gap: 8px; }

/* Командная строка под app-баром: кнопки входа в компоненты флота.
   z-index выше флаговой линии: transform у .btn:hover создаёт stacking
   context, и без этого CSS-тултипы кнопок накрывались бы флагами. */
.action-bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 9px 0;
  border-top: 1px solid rgba(219, 225, 255, 0.07);
}

/* Выбор языка на компактных экранах (на десктопе язык выбирают флагами
   на мачте, список скрыт). Нативный select: родной пикер телефона
   доступен с клавиатуры из коробки; стрелку рисуем сами (appearance
   none убирает системную), в тон дизайна. */
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  display: none;
  background: var(--bg-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23DBE1FF' stroke-opacity='0.55' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center;
  border: 1px solid rgba(219, 225, 255, 0.14);
  border-radius: 999px;
  padding: 5px 30px 5px 13px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s;
}

.lang-select:hover { border-color: rgba(0, 238, 252, 0.4); }

/* Тост «выберите свой язык»: однократная подсказка на компактных экранах,
   элемент создаёт JS (в HTML его нет — без JS подсказки не нужно).
   Плашка висит под шапкой (top от --header-total, который синхронит
   main.js под высоту мачты), тап по ней её закрывает. */
.lang-toast {
  position: fixed;
  top: calc(var(--header-total, 180px) + 12px);
  right: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-high);
  border: 1px solid rgba(0, 238, 252, 0.35);
  border-radius: var(--radius);
  padding: 9px 14px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.lang-toast.is-shown { opacity: 1; transform: translateY(0); }

/* Клавиатурный фокус: тонкое циановое кольцо для таба по любому
   интерактивному элементу (ссылки, кнопки, флаги, select). Мышь кольцо
   не показывает — в этом смысл :focus-visible. Поля формы исключены:
   у них свой видимый фокус-стиль (циановый бордер + подсветка). */
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.cta-input:focus-visible { outline: none; }

.hazard-strip {
  height: 4px;
  background: linear-gradient(90deg, var(--orange), var(--cyan), var(--orange));
  opacity: 0.85;
}

/* ─── Парад флагов: гирлянда на фале (верёвке) под hazard-линией ───
   Фал — провисающая SVG-дуга; флаги крепятся вдоль неё через --arc
   (вертикальное смещение, повторяющее кривую). Активные флаги (data-lang)
   переключают язык; остальные — заглушки. */

.flag-line {
  position: relative;
  display: block;
  background: rgba(5, 13, 37, 0.6);
}

/* Верхушка мачты: PNG во всю ширину экрана в натуральных пропорциях
   (без кропа) — высота линии равна высоте самой картинки. */
.flag-mast {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* Слой гирлянды поверх мачты: фал + флаги. Вертикально — заметно ниже
   середины картинки мачты: верхний padding сдвигает центр вниз
   (174px сверху против 0 снизу → центр на ~87px ниже середины). */
.flag-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap; /* на узких экранах гирлянда переносится на вторую «верёвку» */
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 174px 12px 0;
}

/* Чипы на картинке мачты: абсолютные, с тем же верхним отступом (56px),
   который был у чипа в hero-блоке. Сворачиваются вместе с линией
   флагов при скролле. Слева — платформенный (cyan), справа —
   брендовый (orange). */
.flag-badge,
.flag-badge-right {
  position: absolute;
  top: 56px;
  z-index: 2; /* поверх картинки мачты, но под слоем флагов */
  max-width: min(680px, 92vw);
}

.flag-badge { left: 24px; }

/* Правый чип в одну строку, по центру отрезка «центр мачты — правый
   край экрана» (75% ширины), выровнен по этой точке. */
.flag-badge-right {
  left: 75%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Сам фал: растянутая на всю ширину дуга, провисающая к центру.
   Привязан к верхнему краю флагов: центр контента оверлея лежит на
   50% + половина padding-top (174/2 = 87px), минус половина высоты
   флага (20px) → 50% + 67px. При изменении padding-top оверлея
   корректируется и это смещение. По краям фал укорочен на 30px
   с каждой стороны — концы верёвки не доходят до краёв экрана. */
.flag-rope {
  position: absolute;
  top: calc(50% + 57px);
  left: 30px;
  width: calc(100% - 60px);
  height: 40px; /* viewBox 0..40 (1:1 с пикселями): концы на -9, провис до 30 */
  pointer-events: none;
}

.flag {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 40px; /* слот «вымпела»: флаг висит вниз, крепясь к фалу сверху */
  cursor: pointer;
  transition: transform 0.2s;
  user-select: none;
  transform: translateY(var(--arc, 0px)) rotate(-2deg);
}

/* Смещения по дуге фала: чем ближе к центру, тем ниже точка крепления.
   Группы зеркальны относительно центра гирлянды (23 флага, центр #12);
   nth-of-type — т.к. SVG фала стоит первым элементом в контейнере. */
.flag:nth-of-type(n + 9):nth-of-type(-n + 15) { --arc: 14px; }
.flag:nth-of-type(n + 7):nth-of-type(-n + 8),
.flag:nth-of-type(n + 16):nth-of-type(-n + 17) { --arc: 12px; }
.flag:nth-of-type(n + 5):nth-of-type(-n + 6),
.flag:nth-of-type(n + 18):nth-of-type(-n + 19) { --arc: 10px; }
.flag:nth-of-type(n + 3):nth-of-type(-n + 4),
.flag:nth-of-type(n + 20):nth-of-type(-n + 21) { --arc: 6px; }
.flag:nth-of-type(2),
.flag:nth-of-type(22) { --arc: 3px; }

/* Само полотнище: горизонтальный флаг, повёрнутый на 90° —
   так на параде флаги висят с фала вдоль верёвки. */
.flag img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 27px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(5, 13, 37, 0.6);
  transform: translate(-50%, -50%) rotate(90deg);
  /* Колыхание на ветру: размашистое покачивание полотнища вдоль своей оси. */
  animation: flag-sway 2.6s ease-in-out infinite;
}

/* Развёртка фаз по гирлянде: соседние флаги колышутся не в такт. */
.flag:nth-of-type(3n) img { animation-delay: -0.9s; }
.flag:nth-of-type(3n + 1) img { animation-delay: -1.7s; }

@keyframes flag-sway {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(90deg) skewY(3deg) scaleY(1);
  }
  50% {
    transform: translate(-50%, -50%) rotate(90deg) skewY(-3deg) scaleY(0.92);
  }
}

.flag:hover { transform: translateY(var(--arc, 0px)) rotate(0) scale(1.22); }

/* Активный язык: крупнее остальных + циановая «точка крепления» на фале. */
.flag.is-active {
  transform: translateY(var(--arc, 0px)) rotate(0) scale(1.16);
  z-index: 2;
}

/* Анимацию колыхания отключаем для пользователей с reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .flag img {
    animation: none;
  }
}

.flag.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  transform: translateX(-50%);
  width: 7px;
  height: 5px;
  border-radius: 2px;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(0, 238, 252, 0.8);
}

/* Подсказка на флаге (нативное название языка / «скоро»): чистый CSS. */
.flag[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  z-index: 60;
  padding: 6px 10px;
  border-radius: var(--radius);
  background: var(--bg-bright);
  border: 1px solid rgba(0, 238, 252, 0.25);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.68rem;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(5, 13, 37, 0.7);
  opacity: 0;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.flag[data-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Парадная настройка: при скролле вниз гирлянда сворачивается
   (вместе с картинкой мачты), шапка поджимается. Точную стартовую
   высоту сворачивания задаёт JS (990px — лишь запас для no-JS),
   поэтому анимация идёт плавно, без «рывка на последних пикселях». */
.flag-line {
  max-height: 900px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.45s ease, opacity 0.4s ease, padding 0.45s ease;
}

/* Тултипы флагов не должны обрезаться контейнером гирлянды:
   при наведении на неё разрешаем видимый оверфлоу. */
.flag-line:hover {
  overflow: visible;
}

body.flags-hidden .flag-line {
  max-height: 0;
  opacity: 0;
  padding-block: 0;
}

body.flags-hidden {
  --header-total: 135px; /* шапка без гирлянды: app-бар + командная строка + hazard */
}

/* ─── Кнопки ────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--radius);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }

.btn-orange {
  background: var(--orange);
  color: #2a1800;
  box-shadow: 0 0 16px rgba(255, 107, 53, 0.45);
}
.btn-orange:hover { background: var(--orange-tint); }

.btn-cyan {
  background: var(--bg-high);
  color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 238, 252, 0.2);
}
.btn-cyan:hover { background: var(--bg-bright); }

.btn-ghost {
  background: var(--bg-surface);
  color: var(--text);
}
.btn-ghost:hover { background: var(--bg-high); }

.btn-lg { padding: 14px 26px; font-size: 0.86rem; }
.btn-sm { padding: 7px 14px; font-size: 0.68rem; }
.btn-block { width: 100%; }

/* Подсказка при наведении: чистый CSS через data-tip атрибут. */
.btn[data-tip] { position: relative; }

.btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  padding: 7px 12px;
  border-radius: var(--radius);
  background: var(--bg-bright);
  border: 1px solid rgba(0, 238, 252, 0.25);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(5, 13, 37, 0.7);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.btn[data-tip]:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Hero ──────────────────────────────────────────────────── */

.hero {
  position: relative;
  /* Щедрый отступ от мачты: заголовок не прилипает к разделительной
     линии шапки даже сразу после разворачивания гирлянды. */
  padding: calc(var(--header-total) + 96px) 0 80px;
  background: var(--bg-lowest);
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  top: 25%; left: 50%;
  width: 700px; height: 700px;
  transform: translate(-50%, -50%);
  background: rgba(0, 238, 252, 0.05);
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.hero-glow-right {
  left: auto; right: -80px; top: -120px;
  background: rgba(255, 107, 53, 0.1);
}

.hero-inner { position: relative; display: flex; flex-direction: column; gap: 32px; }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.badge-cyan { background: var(--bg-high); color: var(--cyan); }
.badge-amber { background: var(--bg-surface); color: var(--amber); }
.badge-orange { background: var(--orange); color: #2a1800; }
/* Тот же фон, что у cyan-чипа, но текст ярко-оранжевый. */
.badge-orange-text { background: var(--bg-high); color: var(--orange); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 44px;
  align-items: start;
}

.hero-title {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-transform: uppercase;
}

/* Строка-приглашение над именем бренда — тем же шрифтом, что и
   заголовки секций (как «Три экрана выдачи — три палубы…»). */
.hero-kicker {
  display: block;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
}

/* Имя бренда — главный дисплейный акцент hero-блока. */
.hero-brand {
  display: block;
  font-size: 1.55em;
  letter-spacing: 0.02em;
  line-height: 1.02;
}

.hero-title .accent-orange { color: var(--orange); }

.hero-sub {
  margin-top: 18px;
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 60ch;
}

/* Метрики */

.metrics {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.metric {
  background: var(--bg-surface);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.metric-label {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.metric-value {
  font-size: 1.35rem; /* крупные проверяемые цифры hero: 20+ языков, 0 установок, 4 пресета */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.metric-note { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }

/* Вышка в hero: ширина задаёт контейнер, по центру ячейки;
   пульсирующие маячки привязаны к нему в процентах. */
.hero-visual {
  position: relative;
  width: 80%;
  margin-inline: auto;
}

/* Вышка в hero: тон углов ≈ --bg, секция тоже — --bg, картинка
   «плывёт» на фоне страницы бесшовно: без бордера, радиуса и тени
   (решение владельца). Маячки-пульсации позиционированы в
   процентах от контейнера и от правки не зависят. */
.hero-visual-img {
  display: block;
  width: 100%;
}

/* Маячок на картинке вышки: точка + расходящееся кольцо.
   Позиция (--x/--y) и цвет (--dot-color) — инлайн в HTML,
   в процентах от контейнера, поэтому сужение экранов не сдвигает
   их с мест на самой картинке. --dot-delay разводит фазы. */
.pulse-dot {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot-color, var(--cyan));
  box-shadow: 0 0 10px var(--dot-color, var(--cyan));
  transform: translate(-50%, -50%);
  animation: dot-glow 2s ease-in-out infinite;
  animation-delay: var(--dot-delay, 0s);
  pointer-events: none;
}

.pulse-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid var(--dot-color, var(--cyan));
  animation: dot-ring 2s ease-out infinite;
  animation-delay: var(--dot-delay, 0s);
}

@keyframes dot-glow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes dot-ring {
  0% { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ─── Базовые секции ────────────────────────────────────────── */

.section { padding: 88px 0; scroll-margin-top: calc(var(--header-total) + 8px); }

.bg-lowest { background: var(--bg-lowest); }
.bg-low { background: var(--bg-low); }
.bg-surface { background: var(--bg-surface); }

.section-head { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.section-head.center { margin-inline: auto; text-align: center; align-items: center; }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section-title {
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-transform: uppercase;
}

.section-desc { color: var(--text-dim); font-size: 1rem; max-width: 70ch; }

/* ─── Адаптив (база) ────────────────────────────────────────── */

@media (max-width: 1180px) {
  .main-nav { display: none; }
  .btn-ghost.header-hide { display: none; }
  /* Единая граница «компактного режима» шапки: nav уходит — приходит
     выпадающий список языков (см. комментарий у .lang-select). */
  .lang-select { display: inline-block; }

  /* Чипы на мачте перестают делить строку: правый прибит к 75% с nowrap
     и наезжает на левый (тот упирается в max-width 680 + left 24) уже
     с ~1160px. Снимаем абсолютную привязку к 75% — второй чип уходит
     под первый, у того же левого края. 88px = 56px первого чипа
     + его высота (~24px) + зазор. */
  .flag-badge-right {
    left: 24px;
    top: 88px;
    transform: none;
    white-space: normal;
  }
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .action-bar { justify-content: flex-start; overflow-x: auto; }
}

@media (max-width: 560px) {
  .metrics { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
}