/* ==========================================================================
   Vasko — система управления электронной торговлей

   Дизайн-язык: серое полотно, на нём светлый лист со скруглением, в верхнюю
   кромку листа «вварены» плитки-показатели с вогнутыми углами. Дальше —
   крупная типографика, фото-панели с общим радиусом и пилюли-кнопки.

   Вогнутый угол — единственный неочевидный приём: это квадрат цвета плитки
   с вырезанной радиальным градиентом четвертью. Работает только на ПЛОСКИХ
   заливках, поэтому цвет угла всегда передаётся переменной --tile-bg.

   Скролл-зависимые эффекты — чистые функции позиции (без инерции).
   Контент прячется только при работающем JS (.js + страховка motion-fallback).
   ========================================================================== */

@font-face {
  font-family: "Onest";
  src: url("../fonts/onest.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

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

:root {
  /* Рамка вокруг листа — тот же цвет, которым бесшовно продолжается кадр
     океана, поэтому она меняется вместе со временем суток (см. --scene-bg).
     Лист держим почти белым: контраст с рамкой делает всю работу. */
  --canvas: var(--scene-bg);
  /* Ширина «широкой плашки»: плашка утверждения после первого экрана
     и плашка аудиторий обязаны быть одной ширины. */
  --w-plate: 94rem;
  --sheet: #f4f6fa;
  --paper: #ffffff;
  --ink: #14161a;
  --ink-soft: #23262c;
  --gray: #6b7280;
  --blue: #0046d1;
  --blue-deep: #00348f;
  --blue-soft: #e2eaff;
  --red: #d12300;
  --red-soft: #ffe3dc;

  --safe-top: env(safe-area-inset-top, 0px);
  --pad: clamp(1.1rem, 3.2vw, 3.2rem);
  --gap: clamp(0.5rem, 0.9vw, 0.9rem);
  /* ОДИН радиус на весь сайт: внешние углы плашек, вогнутые стыки и врезки.
     Разные величины сразу читаются как ошибка сборки, поэтому имена ниже —
     синонимы, а не отдельные значения. */
  --r: clamp(20px, 2.4vw, 32px);
  --r-sheet: var(--r);
  --r-card: var(--r);
  --r-tile: var(--r);
  --notch: var(--r);

  /* Перемычка между соседними плашками: широкий шов, мост в половину
     высоты и галтель ровно в половину шва — тогда серый канал сходит
     на нет ровно на кромке моста, без наложений. */
  --seam-gap: clamp(1.3rem, 2.6vw, 2.6rem);
  --seam-r: calc(var(--seam-gap) / 2);
  --slot: 36%;
  /* Сцена не упирается в кромку листа. Полоса сверху равна полю листа —
     тому же зазору, что виден справа от сцены: рамка вокруг фигуры
     получается одинаковой, без второго, ничем не оправданного отступа. */
  --hero-top: var(--pad);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --stagger: 70ms;

  /* Цвет бесшовного продолжения кадра — из исходников фотографий */
  --scene-bg: #003064;
}

/* Цвета бесшовного продолжения кадров — из исходников фотографий.
   Ими же закрашена рамка страницы. */
html[data-time="dawn"] { --scene-bg: #012b50; }
html[data-time="day"] { --scene-bg: #003064; }
html[data-time="dusk"] { --scene-bg: #09203a; }
html[data-time="night"] { --scene-bg: #031833; }

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

html {
  scroll-behavior: smooth;
  background: var(--canvas);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: "Manrope", system-ui, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

h1,
h2,
h3 {
  margin: 0;
  font-family: "Onest", "Manrope", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.94;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 7.4vw, 7.4rem); }
h2 { font-size: clamp(2rem, 4.6vw, 4.4rem); }

h3 {
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
}

p { margin: 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  padding: 0.7rem 1.2rem;
  color: var(--paper);
  background: var(--ink);
  border-radius: 999px;
}

.skip-link:focus-visible {
  top: calc(var(--safe-top) + 1rem);
}

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

/* --------------------------------------------------------------------------
   Полотно и лист
   -------------------------------------------------------------------------- */

.canvas {
  padding: clamp(0.6rem, 1.6vw, 1.6rem);
  padding-top: calc(var(--safe-top) + clamp(0.6rem, 1.6vw, 1.6rem));
}

/* Ряд плиток стоит НАД плашкой утверждения и вваривается в неё вогнутыми
   углами. Отступ по бокам оставляет видимыми скруглённые углы плашки —
   иначе ряд читается как отдельная полоса, а не как часть блока. */
.rail {
  /* Ряд лежит на листе, а устье паза расширяют собственные скругления
     плиток — поэтому радиус устья равен радиусу плитки. Паз здесь один,
     сверху: снизу плитки сварены с плашкой, там резать нечего. */
  --slot-bg: var(--sheet);
  --seam-mouth: var(--r-tile);
  --slot: 52%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: min(92%, 86rem);
  margin: 0 auto calc(var(--gap) * -1);
}

.tile {
  --tile-bg: var(--paper);
  color: var(--ink);
  --seam-bg: var(--tile-bg);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.4rem;
  min-height: clamp(9rem, 15vw, 14.5rem);
  padding: clamp(1rem, 1.8vw, 1.7rem) clamp(1.1rem, 2vw, 1.9rem)
    calc(clamp(1rem, 1.8vw, 1.7rem) + var(--gap));
  background: var(--tile-bg);
  border-radius: var(--r-tile) var(--r-tile) 0 0;
}

/* Единственный акцент ряда — число, а не заливка */
.tile--red .tile__value { color: var(--red); }

.tile__label {
  font-size: clamp(0.82rem, 1vw, 0.96rem);
  font-weight: 600;
  color: var(--gray);
}

.tile__note {
  margin-top: 0.5rem;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--gray);
}

.tile__value {
  font-family: "Onest", system-ui, sans-serif;
  font-size: clamp(2.2rem, 4.4vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.9;
}

/* Сварка с плашкой: квадрат цвета плитки с вырезанной четвертью. Живёт на
   отдельном элементе .weld — у самой плитки ::before/::after заняты мостами
   к соседям. Псевдоэлементы статичного .weld считают координаты от плитки. */
.tile > .weld::before,
.tile > .weld::after {
  position: absolute;
  bottom: var(--gap);
  width: var(--notch);
  height: var(--notch);
  content: "";
  pointer-events: none;
}

.tile > .weld::before {
  left: calc(var(--notch) * -1);
  width: calc(var(--notch) + 1px);
  background: radial-gradient(circle at 0 0, transparent var(--notch),
    var(--tile-bg) calc(var(--notch) + 0.5px));
}

.tile > .weld::after {
  right: calc(var(--notch) * -1);
  width: calc(var(--notch) + 1px);
  background: radial-gradient(circle at 100% 0, transparent var(--notch),
    var(--tile-bg) calc(var(--notch) + 0.5px));
}

.sheet {
  position: relative;
  padding: 0 var(--pad) var(--pad);
  background: var(--sheet);
  border-radius: var(--r-sheet);
}

/* --------------------------------------------------------------------------
   Шапка
   -------------------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 2rem);
  padding: clamp(1.1rem, 2vw, 1.8rem) 0;
}

.brand img {
  width: clamp(104px, 10vw, 148px);
  height: auto;
}

.topbar__end {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

.mailto {
  display: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray);
  transition: color 200ms ease;
}

.mailto:hover { color: var(--blue); }

@media (min-width: 720px) {
  .mailto { display: block; }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  font-size: 0.98rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 999px;
  transition: transform 200ms var(--ease), background-color 200ms ease,
    color 200ms ease, border-color 200ms ease;
}

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

.btn--lg {
  padding: 1.05rem 1.9rem;
  font-size: 1.04rem;
}

.btn--blue {
  color: var(--paper);
  background: var(--blue);
}

.btn--blue:hover { background: var(--blue-deep); }

.btn--dark {
  color: var(--paper);
  background: var(--ink);
}

.btn--dark:hover { background: var(--blue); }

.btn--paper {
  color: var(--ink);
  background: var(--paper);
}

.btn--ghost {
  border: 1.5px solid rgba(20, 22, 26, 0.22);
}

.btn--ghost:hover {
  color: var(--blue);
  border-color: var(--blue);
}

.btn--ghost-light {
  color: var(--paper);
  border: 1.5px solid rgba(255, 255, 255, 0.44);
}

.btn--ghost-light:hover {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--paper);
}

/* Круглая кнопка-стрелка — та же пилюля, свёрнутая в точку */
.pip {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  color: var(--paper);
  background: var(--ink);
  border-radius: 50%;
  flex: none;
  transition: transform 240ms var(--ease), background-color 200ms ease;
}

.pip svg {
  width: 1rem;
  height: 1rem;
}

a:hover > .pip {
  transform: rotate(45deg);
  background: var(--blue);
}

/* --------------------------------------------------------------------------
   Перемычка — плашки одного ряда СРАСТАЮТСЯ, а не лежат рядом

   Принцип: группа одноцветных плашек это СПЛОШНАЯ масса, а щели между ними
   ПРОРЕЗАНЫ пазами цвета фона. Паз — обычный прямоугольник с круглым дном:
   радиус равен половине ширины, то есть дно ровно полукруглое. Устье паза
   расширено собственными скруглениями плашек, поэтому вход в него плавный.

   Почему так, а не градиентами: у составной заливки из полос и радиальных
   градиентов стыки слоёв дают волоски и рваную дугу — «умная» математика
   тут не нужна, нужен border-radius, который браузер рисует точно.

     ::before — заполнение щели цветом плашки (ниже устья);
     ::after  — сам паз цвета фона.

   Порядок важен: ::before рисуется раньше, паз ложится поверх заполнения.

   ⚠ ГЛАВНОЕ ПРАВИЛО: срастаются только плашки ОДНОГО цвета. Паз из двух
   разных половин разрывает композицию, поэтому цвет назначается группе,
   а пазы между группами убираются (см. блок «Границы групп»).
   -------------------------------------------------------------------------- */

.seam-row {
  --seam-bg: var(--paper);
  --slot-bg: var(--sheet);
  --seam-mouth: var(--r-card);
  gap: var(--seam-gap);
}

.seam-row > * { position: relative; }

.seam-row > *::before,
.seam-row > *::after {
  position: absolute;
  right: 100%;
  content: "";
  pointer-events: none;
}

/* Заполнение щели: сверху не заходит в устье, иначе закроет собой его
   расширение. По ширине перекрывает обе кромки на пиксель — на дробных
   координатах между ним и плашкой иначе остаётся волосок. */
.seam-row > *::before {
  top: var(--seam-mouth);
  bottom: 0;
  width: calc(var(--seam-gap) + 2px);
  margin-right: -1px;
  background: var(--seam-bg);
}

/* Верхний паз: ширина ровно по щели, дно полукруглое */
.seam-row > *::after {
  top: 0;
  height: var(--slot);
  width: var(--seam-gap);
  background: var(--slot-bg);
  border-radius: 0 0 var(--seam-r) var(--seam-r);
}

/* Второй паз, снизу — только у групп с модификатором --split: соединение
   остаётся ровно по середине. Живёт на отдельном элементе, потому что у
   плашки оба псевдоэлемента уже заняты. */
.seam-row--split > *::before { bottom: var(--seam-mouth); }

.seam-row--split > * > .link::before {
  position: absolute;
  right: 100%;
  bottom: 0;
  width: var(--seam-gap);
  height: var(--slot);
  background: var(--slot-bg);
  border-radius: var(--seam-r) var(--seam-r) 0 0;
  content: "";
  pointer-events: none;
}

/* Группа с одним пазом снизу сплошная, поэтому внутренние НИЖНИЕ углы
   квадратные: между двумя скруглениями иначе остаются коцки. У плиток низ
   и так квадратный (они сварены с плашкой), а паре карточек нужно правило —
   и обязательно ПОСЛЕ `.card`, иначе сокращённый border-radius перебьёт. */
.cards .card--pair-l { border-bottom-right-radius: 0; }
.cards .card--pair-r { border-bottom-left-radius: 0; }

/* --------------------------------------------------------------------------
   Вогнутый стык — приём, на котором держится вся страница

   Плоский блок не лежит на соседней плоскости, а ВЫРЕЗАН из неё: один угол
   выпуклый, а там, где кромка блока встречает край плоскости, ставится
   квадрат цвета блока с вырезанной четвертью. Через вырез видно то, что
   лежит под блоком, — фон, фотографию, что угодно.

   Требование одно: цвет самого блока должен быть ПЛОСКИМ (--cut-bg).
   Каждая галтель заходит на пиксель ПОД блок: при дробных координатах между
   примыкающими элементами остаётся волосок фона — тот самый стыковочный
   артефакт, который видно на скруглении.
   -------------------------------------------------------------------------- */

.cut {
  --cut-bg: var(--sheet);
  position: relative;
  background: var(--cut-bg);
}

.cut::before,
.cut::after {
  position: absolute;
  z-index: -1;
  width: var(--notch);
  height: var(--notch);
  content: "";
  pointer-events: none;
}

/* Блок в левом верхнем углу: выпуклый угол снизу справа */
.cut--tl {
  border-radius: 0 0 var(--r-card) 0;
}

.cut--tl::before {
  top: 0;
  left: calc(100% - 1px);
  width: calc(var(--notch) + 1px);
  background: radial-gradient(circle at 100% 100%, transparent var(--notch),
    var(--cut-bg) calc(var(--notch) + 0.5px));
}

.cut--tl::after {
  top: calc(100% - 1px);
  height: calc(var(--notch) + 1px);
  left: 0;
  background: radial-gradient(circle at 100% 100%, transparent var(--notch),
    var(--cut-bg) calc(var(--notch) + 0.5px));
}

/* Блок в правом нижнем углу: выпуклый угол сверху слева */
.cut--br {
  border-radius: var(--r-card) 0 0 0;
}

.cut--br::before {
  right: calc(100% - 1px);
  width: calc(var(--notch) + 1px);
  bottom: 0;
  background: radial-gradient(circle at 0 0, transparent var(--notch),
    var(--cut-bg) calc(var(--notch) + 0.5px));
}

.cut--br::after {
  right: 0;
  bottom: calc(100% - 1px);
  height: calc(var(--notch) + 1px);
  background: radial-gradient(circle at 0 0, transparent var(--notch),
    var(--cut-bg) calc(var(--notch) + 0.5px));
}

/* --------------------------------------------------------------------------
   Первый экран — трёхступенчатая фигура

   Сцена лежит под всей площадью и поднимается до самой кромки листа, в зону
   шапки. Из неё вырезаны три блока, каждый на своей ступени:

     ступень 1 — действия (почта и кнопка), верх справа от логотипа;
     ступень 2 — заголовок, ниже и левее;
     ступень 3 — описание, внизу справа.

   Сетка на 12 колонок: блоки перекрываются по колонкам (7–8), иначе сцена
   распалась бы на две области, соприкасающиеся углом.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  padding-bottom: clamp(2rem, 4vw, 4rem);
}

.hero__media {
  position: relative;
  min-height: clamp(21rem, 62vw, 26rem);
  background: var(--scene-bg);
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
}

.hero__photo {
  position: absolute;
  inset: -9% 0;
  background-position: center;
  background-size: cover;
  will-change: transform;
}

html[data-time="dawn"] .hero__photo { background-image: url("../images/ocean-dawn.webp"); }
html[data-time="day"] .hero__photo { background-image: url("../images/ocean-day.webp"); }
html[data-time="dusk"] .hero__photo { background-image: url("../images/ocean-dusk.webp"); }
html[data-time="night"] .hero__photo { background-image: url("../images/ocean-night.webp"); }

@media (max-width: 900px) {
  html[data-time="dawn"] .hero__photo { background-image: url("../images/ocean-dawn-sm.webp"); }
  html[data-time="day"] .hero__photo { background-image: url("../images/ocean-day-sm.webp"); }
  html[data-time="dusk"] .hero__photo { background-image: url("../images/ocean-dusk-sm.webp"); }
  html[data-time="night"] .hero__photo { background-image: url("../images/ocean-night-sm.webp"); }
}

.hero__bar {
  display: flex;
  align-items: center;
  padding: clamp(1.1rem, 2vw, 1.8rem) 0;
}

.hero__act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem clamp(0.8rem, 2vw, 1.6rem);
  padding: clamp(1.1rem, 2vw, 1.8rem) 0;
}

.hero__title { padding: clamp(0.4rem, 1vw, 1rem) 0 clamp(1.2rem, 2.4vw, 2rem); }

.hero__title em {
  display: block;
  font-style: normal;
  color: var(--blue);
}

.hero__note {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 2vw, 1.8rem);
  padding: clamp(1.4rem, 2.4vw, 2.2rem) 0 0;
}

.hero__note p {
  max-width: 44ch;
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  color: var(--ink-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

@media (min-width: 940px) {
  .hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 0;
    min-height: clamp(33rem, 62vw, 48rem);
    padding-bottom: 0;
  }

  .hero__media {
    position: absolute;
    inset: var(--hero-top) 0 0;
    z-index: 0;
    min-height: 0;
  }

  /* Галтель верхней ступени обязана начинаться там же, где кромка сцены,
     иначе скругление окажется выше самой фотографии. */
  .hero__act::before { top: var(--hero-top); }

  .hero__bar,
  .hero__act,
  .hero__title,
  .hero__note {
    position: relative;
    z-index: 1;
  }

  /* Логотип — часть той же плоскости листа, что и блок действий: без фона
     он оказался бы прямо на сцене и в ночном кадре пропал. */
  .hero__bar {
    grid-area: 1 / 1 / 2 / 4;
    /* Перекрытие на пиксель: дробная ширина колонок оставляет между двумя
       одноцветными блоками светлый волосок. */
    margin-right: -1px;
    background: var(--sheet);
  }

  .hero__act {
    grid-area: 1 / 4 / 2 / 9;
    justify-content: flex-end;
    padding-right: clamp(1.4rem, 2.6vw, 2.4rem);
  }

  .hero__title {
    grid-area: 2 / 1 / 3 / 7;
    padding: 0 clamp(1.4rem, 2.6vw, 2.4rem) clamp(1.4rem, 2.6vw, 2.4rem) 0;
  }

  .hero__note {
    grid-area: 3 / 8 / 4 / 13;
    align-self: end;
    margin-right: -1px;
    padding: clamp(1.4rem, 2.6vw, 2.4rem) 0 0 clamp(1.4rem, 2.6vw, 2.4rem);
  }
}

/* Метка внутри сцены: время суток названо словом, а не техническим лейблом */
.scene-tag {
  position: absolute;
  top: clamp(0.8rem, 1.6vw, 1.4rem);
  right: clamp(0.8rem, 1.6vw, 1.4rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.05rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: #04351f;
  background: #7bf5c4;
  border-radius: 999px;
}

/* Карточка-фрагмент интерфейса поверх сцены */
.chip-card {
  position: absolute;
  bottom: clamp(0.8rem, 1.6vw, 1.4rem);
  left: clamp(0.8rem, 1.6vw, 1.4rem);
  z-index: 2;
  width: min(19rem, 76%);
  padding: 1.1rem 1.2rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(14px);
  /* Единственное исключение из общего радиуса: карточка втрое меньше плашек,
     и общий радиус на её кромке читается как пилюля. Задан долей от `--r`,
     чтобы не разъехался при правке основного радиуса. */
  border-radius: calc(var(--r) * 0.6);
}

.chip-card__label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gray);
}

.chip-card ul {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.chip-card li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.chip-card li span {
  margin-left: auto;
  font-weight: 500;
  color: var(--gray);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.dot--blue { background: var(--blue); }
.dot--amber { background: #e8a300; }
.dot--green { background: #12a05c; }

/* --------------------------------------------------------------------------
   Секции
   -------------------------------------------------------------------------- */

.section { padding: clamp(3rem, 6vw, 6.5rem) 0 0; }

.head {
  display: grid;
  gap: 1.4rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.8rem);
}

@media (min-width: 940px) {
  .head {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: end;
  }
}

.head__lead {
  max-width: 46ch;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  color: var(--gray);
}

.head--light .head__lead { color: rgba(255, 255, 255, 0.72); }

/* Плашка, в которую вварены плитки */
.plate {
  position: relative;
  display: grid;
  gap: clamp(1.4rem, 2.6vw, 2.4rem);
  /* Ограничение ширины — только у плашек, остальные секции идут
     во всю колонку листа. */
  max-width: min(100%, var(--w-plate));
  padding: clamp(1.8rem, 3.6vw, 3.6rem);
  margin-inline: auto;
  background: var(--paper);
  border-radius: var(--r-tile);
}

@media (min-width: 1040px) {
  .plate {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    align-items: start;
  }

  /* Утверждение — во всю ширину плашки: в половине колонки оно ломалось
     на три строки, а низ плашки оставался пустым. */
  .statement { grid-column: 1 / -1; }
}

/* Чем расплачиваются за ручную сверку — короткие строки с засечкой слева */
.costs {
  display: grid;
  gap: 0.5rem;
  align-self: end;
}

.costs li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.98rem;
  color: var(--gray);
}

/* Тире — знак, а не рамка: у него собственный цвет и он не тянется
   по высоте строки, как это делал border-left. */
.costs li::before {
  color: var(--red);
  font-weight: 700;
  content: "—";
}

.plate__answer {
  max-width: 44ch;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  color: var(--gray);
}

/* Крупное утверждение вместо картинки-заглушки */
.statement {
  font-family: "Onest", system-ui, sans-serif;
  font-size: clamp(1.7rem, 3.6vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

/* Барабан слов: высота одной строки, содержимое едет по кадрам */
.rotator {
  position: relative;
  display: inline-grid;
  height: 1em;
  overflow: hidden;
  vertical-align: bottom;
}

.rotator span {
  grid-area: 1 / 1;
  color: var(--red);
  opacity: 0;
  animation: roll 12s infinite;
}

.rotator span:nth-child(2) { animation-delay: 2.4s; }
.rotator span:nth-child(3) { animation-delay: 4.8s; }
.rotator span:nth-child(4) { animation-delay: 7.2s; }
.rotator span:nth-child(5) { animation-delay: 9.6s; }

@keyframes roll {
  0%, 18% { opacity: 1; translate: 0 0; }
  20%, 100% { opacity: 0; translate: 0 -0.9em; }
}

/* --------------------------------------------------------------------------
   Стык между произвольными плашками (.join)

   Тот же принцип, что у перемычки в ряду, но пригодный там, где соседи
   заданы явно, а не порядком в сетке: заполнение щели цветом плашки плюс
   два паза цвета фона с круглыми концами — соединение остаётся по центру.

   Элемент один на стык, поэтому у плашки не расходуются псевдоэлементы:
   сам .join — заполнение, его ::before/::after — пазы.
   Заполнение не заходит в устья (отступ на радиус плашки), иначе закроет
   собой расширение, которое дают её собственные скругления.
   -------------------------------------------------------------------------- */

.join {
  /* Цвета берутся у хозяина: заполнение — его фон, пазы — фон под ним */
  background: var(--join-bg, var(--card-bg));
  /* Задаём ДЛИНУ ПЕРЕМЫЧКИ, а не глубину пазов: плашки разного размера,
     и от глубины перемычки получались бы разной длины — по горизонтали
     одна, по вертикали другая. Пазы добирают остаток сами. */
  --join-bridge: clamp(2.2rem, 4vw, 3.6rem);
  /* Где стоит перемычка вдоль стыка. По умолчанию посередине, но если
     кромка плашки занята врезкой, перемычку надо сместить на ту часть,
     где плашка действительно своего цвета. */
  --join-at: 50%;
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.join::before,
.join::after {
  position: absolute;
  background: var(--slot-bg, var(--sheet));
  content: "";
}

.tile > .join { --join-bg: var(--tile-bg); }
.hang > .join { --join-bg: var(--hang-bg); }

/* Стык вправо */
.join--right {
  top: var(--r-card);
  bottom: var(--r-card);
  left: 100%;
  width: calc(var(--seam-gap) + 2px);
  margin-left: -1px;
}

.join--right::before,
.join--right::after {
  left: 1px;
  width: var(--seam-gap);
}

.join--right::before {
  top: calc(var(--r-card) * -1);
  bottom: calc(100% - var(--join-at) + var(--join-bridge) / 2);
  border-radius: 0 0 var(--seam-r) var(--seam-r);
}

.join--right::after {
  top: calc(var(--join-at) + var(--join-bridge) / 2);
  bottom: calc(var(--r-card) * -1);
  border-radius: var(--seam-r) var(--seam-r) 0 0;
}

/* Стык вниз */
.join--down {
  top: 100%;
  right: var(--r-card);
  left: var(--r-card);
  height: calc(var(--seam-gap) + 2px);
  margin-top: -1px;
}

.join--down::before,
.join--down::after {
  top: 1px;
  height: var(--seam-gap);
}

.join--down::before {
  left: calc(var(--r-card) * -1);
  right: calc(100% - var(--join-at) + var(--join-bridge) / 2);
  border-radius: 0 var(--seam-r) var(--seam-r) 0;
}

.join--down::after {
  left: calc(var(--join-at) + var(--join-bridge) / 2);
  right: calc(var(--r-card) * -1);
  border-radius: var(--seam-r) 0 0 var(--seam-r);
}

/* Нижняя кромка крупного блока наполовину занята врезкой, поэтому
   перемычка к нижней полосе идёт по центру СИНЕЙ части, а не плашки. */
.join--quarter { --join-at: 25%; }

/* Стык живёт там, где сосед реально рядом: широкая раскладка — свои связи,
   стопка — свои. Порядок в стопке подменяется так, чтобы срастались ТЕ ЖЕ
   пары, что и на широком экране (см. блок «Стопка»). */
.join--stack { display: none; }

@media (max-width: 1159px) {
  .join--right { display: none; }

  .join--stack { display: block; }

  /* В стопке кромка ничем не занята — перемычка снова по центру */
  .join--down { --join-at: 50%; }
}

/* --------------------------------------------------------------------------
   Возможности — композиция, а не ряд

   Крупный синий блок держит центр, в его нижний угол ВРЕЗАНА плашка
   (тот же приём, что в первом экране: `.cut--br` рисует выпуклый угол и
   два вогнутых стыка, цвет совпадает с фоном страницы). Рядом — высокая
   колонка, широкая полоса и сросшаяся тёмная пара: размеры разные,
   поэтому сетка читается как композиция.
   -------------------------------------------------------------------------- */

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

.card {
  --card-bg: var(--paper);
  --seam-bg: var(--card-bg);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.3rem, 2.2vw, 2rem);
  background: var(--card-bg);
  border-radius: var(--r-card);
}

.card p {
  font-size: 0.98rem;
  color: var(--gray);
}

/* Цепочка состояний: текст в карточке перестаёт быть одинаковым абзацем */
/* Состояния — пилюли и всегда в строку. Колонка со стрелками съедала
   высоту карточки и читалась как отдельная схема, хотя это просто набор
   значений; порядок в наборе задаёт сам порядок пилюль. */
.chain {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}

.chain li {
  padding: 0.36rem 0.72rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: 999px;
}

.card--blue .chain li,
.card--dark .chain li {
  color: var(--paper);
  background: rgba(255, 255, 255, 0.16);
}

.card__note {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.92rem;
  color: var(--blue);
}

/* Подложка иконки — суперэллипс: border-radius оставлен запасным вариантом
   на случай, если clip-path по ссылке не отработает. */
.card__icon,
.hang__mark {
  border-radius: 26%;
  clip-path: url("#superellipse-clip");
}

.card__icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 0.6rem;
  color: var(--blue);
  background: var(--blue-soft);
}

.card__icon svg {
  width: 1.9rem;
  height: 1.9rem;
}

.card--blue {
  --card-bg: var(--blue);
  color: var(--paper);
}

.card--blue p { color: rgba(255, 255, 255, 0.82); }

.card--blue .card__icon {
  color: var(--blue);
  background: var(--paper);
}

.card--dark {
  --card-bg: var(--ink);
  color: var(--paper);
}

.card--dark p { color: rgba(255, 255, 255, 0.7); }

.card--dark .card__icon {
  color: var(--paper);
  background: rgba(255, 255, 255, 0.12);
}

/* Средняя группа бенто построена на красном. Цвет назначается ГРУППЕ —
   тем же правилом, что и везде на странице: синие каналы, красное ядро,
   тёмный итог. Красный здесь не тревога, а вторая краска палитры, поэтому
   он берёт на себя всю мелкую графику группы: подложки иконок, пилюли
   состояний и подпись-вывод. */
.cards [data-join-group="core"] .card__icon,
.cards [data-join-group="core"] .chain li {
  color: var(--red);
  background: var(--red-soft);
}

.cards [data-join-group="core"] .card__note { color: var(--red); }

/* Врезка в угол синего блока: выпуклый угол сверху слева, вогнутые стыки
   по кромкам, а нижний правый угол повторяет радиус блока-хозяина —
   иначе из-под квадратного угла вылезет синий клин.
   Цвет голубой: белая врезка спорила по яркости с соседними карточками. */
.card--cut {
  --card-bg: var(--blue-soft);
  --cut-bg: var(--blue-soft);
  z-index: 2;
  border-radius: var(--r-card) 0 var(--r-card) 0;
}

.card--cut .card__icon {
  color: var(--blue);
  background: var(--paper);
}

@media (min-width: 1160px) {
  .card--big { grid-area: 1 / 1 / 3 / 3; }
  .card--cut { grid-area: 2 / 2 / 3 / 3; }
  .card--c { grid-area: 1 / 3 / 2 / 4; }
  .card--tall { grid-area: 1 / 4 / 3 / 5; }
  .card--e { grid-area: 2 / 3 / 3 / 4; }
  .card--band { grid-area: 3 / 1 / 4 / 3; }
  .card--pair-l { grid-area: 3 / 3 / 4 / 4; }
  .card--pair-r { grid-area: 3 / 4 / 4 / 5; }

  /* Крупному блоку — крупная типографика: он держит композицию */
  .card--big h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
  .card--big p { max-width: 34ch; font-size: 1.04rem; }
}

/* Сросшаяся тёмная пара — единственная перемычка в этой секции */
.card--pair-r::before,
.card--pair-r::after {
  position: absolute;
  right: 100%;
  content: "";
  pointer-events: none;
}

.card--pair-r::before {
  top: var(--r-card);
  bottom: 0;
  width: calc(var(--seam-gap) + 2px);
  margin-right: -1px;
  background: var(--seam-bg);
}

.card--pair-r::after {
  top: 0;
  height: var(--slot);
  width: var(--seam-gap);
  background: var(--sheet);
  border-radius: 0 0 var(--seam-r) var(--seam-r);
}

/* Композиция живёт только на широком экране: на среднем — две колонки,
   на узком — стопка, и врезка становится обычной плашкой. */
/* --------------------------------------------------------------------------
   Стопка: порядок подменяется, чтобы срослись те же пары, что и на широком
   экране. Иначе связанные плашки расходятся по столбцам и связь теряется.
   -------------------------------------------------------------------------- */

@media (max-width: 1159px) {
  .cards {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }

  /* Врезка идёт сразу за крупным блоком: в стопке эта пара срастается,
     как на широком экране срастались врезка и её блок-хозяин. */
  .card--big { order: 1; }
  .card--cut { order: 2; }
  .card--band { order: 3; }
  .card--c { order: 4; }
  .card--tall { order: 5; }
  .card--e { order: 6; }
  .card--pair-l { order: 7; }
  .card--pair-r { order: 8; }

  .card--big,
  .card--cut,
  .card--c,
  .card--tall,
  .card--e,
  .card--band,
  .card--pair-l,
  .card--pair-r { grid-area: auto; }
}



@media (max-width: 1159px) {
  /* Врезки в стопке нет — значит нет и её приметы, голубого оттенка: он был
     нужен, чтобы отличать врезку от блока-хозяина. Между двумя синими
     плашками он читался бы третьим, лишним цветом, а срастаться могут только
     одноцветные. Поэтому в стопке плашка обычная синяя. */
  .card--cut {
    --card-bg: var(--blue);
    --cut-bg: var(--blue);
    color: var(--paper);
    padding: clamp(1.3rem, 2.2vw, 2rem);
    border-radius: var(--r-card);
  }

  .card--cut p { color: rgba(255, 255, 255, 0.82); }

  .card--cut::before,
  .card--cut::after { display: none; }
}

/* --------------------------------------------------------------------------
   Тихая полоса: пауза между двумя плотными секциями
   -------------------------------------------------------------------------- */

.strip {
  position: relative;
  display: flex;
  align-items: center;
  /* Уже плашки (--w-plate): пауза между секциями не должна быть самым
     широким объектом страницы. */
  max-width: min(100%, 76rem);
  margin-inline: auto;
  min-height: clamp(12rem, 22vw, 19rem);
  padding: clamp(1.6rem, 4vw, 3.6rem);
  background: var(--blue) url("../images/wave-on-blue.svg") repeat;
  background-size: 200px 200px;
  border-radius: var(--r-sheet);
  overflow: hidden;
  isolation: isolate;
}

/* Заливка под текстом — не затемнение, а собственный цвет плашки: паттерн
   остаётся паттерном, а строка читается. */
.strip::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--blue) 0%, var(--blue) 54%,
    rgba(0, 70, 209, 0) 88%);
  content: "";
}

.strip__line {
  max-width: 22ch;
  font-family: "Onest", system-ui, sans-serif;
  font-size: clamp(1.6rem, 3.4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: rgba(255, 255, 255, 0.72);
}

/* Акцент — чистый белый: на паттерне светло-голубой теряется */
.strip__line em {
  font-style: normal;
  color: var(--paper);
}

/* На узкой плашке диагональная заливка не спасает: строка упирается
   в паттерн. Там заливка идёт сверху вниз, а фактура остаётся внизу. */
@media (max-width: 760px) {
  .strip {
    align-items: flex-start;
    background-size: 140px 140px;
  }

  .strip::after {
    background: linear-gradient(180deg, var(--blue) 0%, var(--blue) 58%,
      rgba(0, 70, 209, 0) 100%);
  }

  .cta {
    background-size: 140px 140px;
  }

  .cta::after {
    background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 52%,
      rgba(20, 22, 26, 0) 100%);
  }
}

/* --------------------------------------------------------------------------
   Тёмная панель: как устроено

   Карточки этапов не лежат отдельными плашками, а ВЫРАСТАЮТ из панели:
   верхняя кромка каждой уходит под неё, а по бокам стоят вогнутые углы —
   зеркало того же приёма, что у плиток над плашкой утверждения.
   -------------------------------------------------------------------------- */

.panel {
  padding: clamp(1.6rem, 3.4vw, 3.4rem);
  color: var(--paper);
  background: var(--ink);
  border-radius: var(--r-sheet);
}

.panel h2 { color: var(--paper); }

.hang-rail {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  padding: 0 var(--r-sheet);
  margin-top: calc(var(--gap) * -1);
}


/* Ряд внутри панели: не свисает, а лежит в ней — обычный радиус, без сварки */
.hang-rail--inside {
  /* Ряд лежит внутри тёмной панели — паз прорезается её цветом */
  --slot-bg: var(--ink);
  /* Та же мера ширины, что у плашки после первого экрана: на широком экране
     тройка разъезжалась во всю тёмную панель и переставала читаться группой. */
  max-width: min(100%, var(--w-plate));
  padding: 0;
  margin-top: 0;
  margin-inline: auto;
}

.hang-rail--inside .hang {
  padding-top: clamp(1.2rem, 2vw, 1.8rem);
  border-radius: var(--r-card);
}

.hang {
  --hang-bg: var(--paper);
  --seam-bg: var(--hang-bg);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: calc(clamp(1.2rem, 2vw, 1.8rem) + var(--gap))
    clamp(1.2rem, 2vw, 1.8rem) clamp(1.2rem, 2vw, 1.8rem);
  color: var(--ink);
  background: var(--hang-bg);
  border-radius: 0 0 var(--r-card) var(--r-card);
}

.hang--blue {
  --hang-bg: var(--blue);
  color: var(--paper);
}

.hang > .weld::before,
.hang > .weld::after {
  position: absolute;
  top: var(--gap);
  width: var(--notch);
  height: var(--notch);
  content: "";
  pointer-events: none;
}

.hang > .weld::before {
  left: calc(var(--notch) * -1);
  width: calc(var(--notch) + 1px);
  background: radial-gradient(circle at 0 100%, transparent var(--notch),
    var(--hang-bg) calc(var(--notch) + 0.5px));
}

.hang > .weld::after {
  right: calc(var(--notch) * -1);
  width: calc(var(--notch) + 1px);
  background: radial-gradient(circle at 100% 100%, transparent var(--notch),
    var(--hang-bg) calc(var(--notch) + 0.5px));
}

.hang ul {
  display: grid;
  gap: 0.55rem;
  font-size: 0.96rem;
}

.hang li {
  display: flex;
  gap: 0.6rem;
  color: var(--gray);
}

.hang h3 { color: inherit; }

.hang li::before {
  color: var(--blue);
  content: "—";
}

.hang--blue li { color: rgba(255, 255, 255, 0.78); }
.hang--blue li::before { color: var(--blue-soft); }

.hang__mark {
  display: inline-grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  color: var(--paper);
  background: var(--blue);
}

.hang__mark svg {
  width: 1.6rem;
  height: 1.6rem;
}

.hang--blue .hang__mark {
  color: var(--blue);
  background: var(--paper);
}

/* --------------------------------------------------------------------------
   Кому подходит — список внутри белой плашки

   Другая фактура: карточек нет вовсе, линеек тоже — колонки держит
   расстояние. Секция идёт последней содержательной, после вопросов.
   -------------------------------------------------------------------------- */

.band {
  display: grid;
  gap: clamp(1.6rem, 3.4vw, 3.4rem);
  /* Та же ширина, что у плашки после первого экрана */
  max-width: min(100%, var(--w-plate));
  padding: clamp(1.6rem, 3.4vw, 3.4rem);
  margin-inline: auto;
  background: var(--paper);
  border-radius: var(--r-sheet);
}

@media (min-width: 1040px) {
  .band { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
}

.band__head p {
  max-width: 40ch;
  margin-top: 1.2rem;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  color: var(--ink-soft);
}

.who {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.6rem);
}

@media (min-width: 680px) {
  .who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.who li {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.who p {
  font-size: 0.98rem;
  color: var(--ink-soft);
}

.who__tag {
  align-self: flex-start;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--blue);
}

/* --------------------------------------------------------------------------
   Вопросы
   -------------------------------------------------------------------------- */

/* Список занимает две трети ширины и прижат вправо: заголовок остаётся
   слева, между ними — пустая четверть, и секция читается по диагонали,
   а не сплошной лентой во всю колонку. */
.faq {
  display: grid;
  gap: 0.55rem;
}

@media (min-width: 940px) {
  .faq {
    width: 66.6667%;
    margin-left: auto;
  }
}

.faq__item {
  --seam-bg: var(--paper);
  background: var(--seam-bg);
  border-radius: var(--r-card);
  transition: background-color 240ms ease;
}

.faq__item.is-open { --seam-bg: var(--blue-soft); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  width: 100%;
  padding: clamp(1.1rem, 1.8vw, 1.5rem) clamp(1.2rem, 2vw, 1.8rem);
  font-family: "Onest", system-ui, sans-serif;
  font-size: clamp(1.02rem, 1.5vw, 1.24rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: left;
}

/* Плюс, который становится минусом: две палки на псевдоэлементах */
.faq__q i {
  position: relative;
  width: 2.3rem;
  height: 2.3rem;
  background: var(--sheet);
  border-radius: 50%;
  flex: none;
  transition: background-color 240ms ease;
}

.faq__q i::before,
.faq__q i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  content: "";
  translate: -50% -50%;
  transition: rotate 300ms var(--ease);
}

.faq__q i::after { rotate: 90deg; }

.faq__item.is-open .faq__q i { background: var(--blue); }
.faq__item.is-open .faq__q i::before,
.faq__item.is-open .faq__q i::after { background: var(--paper); }
.faq__item.is-open .faq__q i::after { rotate: 0deg; }

/* Высота переключается мгновенно (display), анимируются только
   opacity/transform: высота — свойство раскладки, её анимация тормозит. */
.faq__a {
  display: none;
  max-width: 68ch;
  padding: 0 clamp(1.2rem, 2vw, 1.8rem) clamp(1.2rem, 2vw, 1.6rem);
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 260ms ease, transform 300ms var(--ease);
}

.faq__item.is-open .faq__a {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Финальный блок — та же фигура, что в первом экране

   Фотография лежит подо всем блоком, а плашка с действиями врезана в её
   нижний правый угол: выпуклый угол сверху слева и два вогнутых стыка.
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  display: grid;
  min-height: clamp(21rem, 40vw, 34rem);
  background: var(--ink) url("../images/wave-on-ink.svg") repeat;
  background-size: 200px 200px;
  border-radius: var(--r-sheet);
  overflow: hidden;
  isolation: isolate;
}

.cta::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, var(--ink) 0%, var(--ink) 46%,
    rgba(20, 22, 26, 0) 84%);
  content: "";
}

.cta__copy {
  display: grid;
  gap: 1.1rem;
  align-content: start;
  padding: clamp(1.6rem, 3.4vw, 3.4rem);
  color: var(--paper);
}

.cta h2 {
  max-width: 16ch;
  color: var(--paper);
}

.cta__copy p {
  max-width: 44ch;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  color: rgba(255, 255, 255, 0.86);
}

.cta__panel {
  --cut-bg: var(--sheet);
  display: grid;
  gap: 1.2rem;
  align-content: end;
  padding: clamp(1.4rem, 2.6vw, 2.4rem) 0 0 clamp(1.4rem, 2.6vw, 2.4rem);
}

.cta__panel p {
  max-width: 30ch;
  font-size: 1rem;
  color: var(--ink-soft);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

@media (min-width: 820px) {
  .cta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .cta__copy { grid-area: 1 / 1; }
  .cta__panel { grid-area: 2 / 2; }
}

/* Узкий экран: врезка не нужна — блок действий становится обычной плашкой */
@media (max-width: 819px) {
  .cta__panel {
    margin: 0 clamp(0.8rem, 3vw, 1.4rem) clamp(0.8rem, 3vw, 1.4rem);
    padding: clamp(1.2rem, 4vw, 1.6rem);
    border-radius: var(--r-card);
  }

  .cta__panel::before,
  .cta__panel::after { display: none; }
}

/* --------------------------------------------------------------------------
   Подвал
   -------------------------------------------------------------------------- */

.footer {
  margin-top: var(--gap);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  color: var(--paper);
  background: var(--ink);
  border-radius: var(--r-sheet);
}

.footer__top {
  display: grid;
  gap: 1.6rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 800px) {
  .footer__top {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}

.footer__brand img {
  width: clamp(112px, 11vw, 150px);
  height: auto;
  margin-bottom: 0.9rem;
  filter: brightness(0) invert(1);
}

.footer__brand p {
  max-width: 42ch;
  font-size: 0.96rem;
  color: rgba(255, 255, 255, 0.62);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.footer__links a {
  color: rgba(255, 255, 255, 0.78);
  transition: color 200ms ease;
}

.footer__links a:hover { color: var(--paper); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  justify-content: space-between;
  padding-top: 1.4rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer__bottom a { color: rgba(255, 255, 255, 0.78); }

/* Переключатель языка. Язык — свойство страницы, а не раздел сайта, поэтому
   он стоит в подвале рядом с копирайтом, а не в шапке. Родной селект, а не
   своя выпадашка: на мобильных он открывается системным колесом. */
.footer-language select {
  padding: 0.42rem 0.8rem;
  font: inherit;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: color 200ms ease, background-color 200ms ease;
}

.footer-language select:hover {
  color: var(--paper);
  background: rgba(255, 255, 255, 0.14);
}

.footer-language select:focus-visible {
  outline: 2px solid var(--blue-soft);
  outline-offset: 2px;
}

/* Список раскрывается системным виджетом — на тёмном фоне он читается плохо */
.footer-language option {
  color: var(--ink);
  background: var(--paper);
}

/* --------------------------------------------------------------------------
   Юридические страницы
   -------------------------------------------------------------------------- */

.legal {
  max-width: 74ch;
  padding: clamp(2rem, 5vw, 4.5rem) 0;
}

.legal h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); }

.legal h2 {
  margin-top: 2.4rem;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.legal p,
.legal li {
  margin-top: 0.9rem;
  color: var(--ink-soft);
}

.legal ul {
  padding-left: 1.2rem;
  list-style: disc;
}

.legal a { color: var(--blue); }


/* --------------------------------------------------------------------------
   Границы групп: паз только внутри одноцветной группы

   Оба псевдоэлемента (заполнение и паз) рисует ПРАВЫЙ сосед пары и кладёт
   их слева от себя. Значит гасить надо оба и у того элемента, слева от
   которого соседа того же цвета нет: начало ряда, начало новой группы.

   nth-child не умеет считать через переменную, поэтому число колонок
   расписано по брейкпоинтам явно.
   -------------------------------------------------------------------------- */

.seam-row > *:first-child::before,
.seam-row > *:first-child::after,
.seam-row > *:first-child > .link { display: none; }

/* Плитки: три «единицы системы» — одна группа, ноль сверок стоит отдельно.
   Паза слева от него нет, а шов вдвое шире — пауза перед выводом. */
.rail > *:nth-child(4)::before,
.rail > *:nth-child(4)::after { display: none; }

.rail > *:nth-child(4) { margin-left: var(--seam-gap); }

/* Одна колонка: горизонтальных соседей нет — связи берут на себя .join--stack */
@media (max-width: 1159px) {
  .rail,
  .hang-rail { grid-template-columns: minmax(0, 1fr); }

  .seam-row > *::before,
  .seam-row > *::after,
  .card--pair-r::before,
  .card--pair-r::after { display: none; }

  /* Пауза перед выводом — приём ГОРИЗОНТАЛЬНОГО ряда. В стопке её нет:
     плитки и плашка идут одной цепочкой с одинаковым шагом. */
  .rail > *:nth-child(4) {
    margin-top: 0;
    margin-left: 0;
  }

  .seam-row > * > .link { display: none; }

  .cards .card--pair-l,
  .cards .card--pair-r { border-radius: var(--r-card); }
}

/* --------------------------------------------------------------------------
   Появление и параллакс
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 620ms var(--ease), translate 760ms var(--ease);
}

.js [data-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
}

.js [data-stagger] > * {
  opacity: 0;
  translate: 0 22px;
  transition: opacity 560ms var(--ease) calc(var(--i, 0) * var(--stagger)),
    translate 700ms var(--ease) calc(var(--i, 0) * var(--stagger));
}

.js [data-stagger].is-visible > * {
  opacity: 1;
  translate: 0 0;
}

/* Страховка: скрипт не доехал — контент виден как есть */
.js.motion-fallback [data-reveal],
.js.motion-fallback [data-stagger] > * {
  opacity: 1;
  translate: 0 0;
}

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

  .js [data-reveal],
  .js [data-stagger] > * {
    opacity: 1 !important;
    translate: none !important;
  }

  .rotator span { animation: none; }
  .rotator span:not(:first-child) { display: none; }
  .rotator span:first-child { opacity: 1; }

  .hero__photo { transform: none !important; }
}

/* --------------------------------------------------------------------------
   Узкие экраны
   -------------------------------------------------------------------------- */

@media (max-width: 660px) {
  .hang-rail {
    padding: 0;
    margin-top: var(--gap);
  }

  .hang {
    padding-top: clamp(1.2rem, 2vw, 1.8rem);
    border-radius: var(--r-card);
  }

  .hang > .weld { display: none; }
}

@media (max-width: 939px) {
  /* Стопка вместо ступеней: соединять нечего, сцена идёт отдельным блоком */
  .hero .cut {
    background: none;
    border-radius: 0;
  }

  .hero .cut::before,
  .hero .cut::after { display: none; }

  /* В разметке сцена идёт первой (она подложка широкой раскладки), поэтому
     в стопке порядок задаётся явно — иначе страница начинается с фотографии,
     а логотип уезжает под неё. */
  .hero {
    display: flex;
    flex-direction: column;
  }

  .hero__bar { order: 1; padding-bottom: 0; }
  .hero__act { order: 2; justify-content: flex-start; padding-bottom: 0; }


  .hero__title { order: 3; }
  .hero__media { order: 4; }
  .hero__note { order: 5; }
}

/* Средняя полоса (720–939px): ступеней уже нет, но места ещё достаточно,
   чтобы почта и кнопка стояли РЯДОМ с заголовком, а не отдельной строкой
   между знаком и заголовком — там они разрывали связку «знак → заголовок».
   Прижаты к низу своей строки, то есть к самой кромке сцены: получается
   та же диагональ «знак сверху слева → действия снизу справа», что даёт
   ступенчатая фигура на широком экране.
   Ниже 720px блок скрыт целиком (см. правило шапки). */
@media (min-width: 720px) and (max-width: 939px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  /* Раскладка задана явными областями: `order` в гриде тоже работает,
     и без явных областей строки соберутся по нему, а не по замыслу. */
  .hero__bar { grid-area: 1 / 1 / 2 / 3; }
  .hero__title { grid-area: 2 / 1 / 3 / 2; }
  .hero__media { grid-area: 3 / 1 / 4 / 3; }
  .hero__note { grid-area: 4 / 1 / 5 / 3; }

  .hero__act {
    grid-area: 2 / 2 / 3 / 3;
    align-self: end;
    justify-content: flex-end;
    padding-bottom: clamp(1.2rem, 2.4vw, 2rem);
  }
}

/* Ряд стал одноколоночным — значит в стопке ВСЕ плитки и плашка идут одной
   вертикальной цепочкой: каждая связь это мост через щель, шаг один и тот же.
   Сварка (плоское срастание кромок) здесь не работает ни у кого — она была
   приёмом ГОРИЗОНТАЛЬНОГО ряда, стоящего на плашке; в стопке её уголки просто
   торчали из плитки в пустой лист. Ряд отступает от плашки на ту же щель,
   что и плитки друг от друга, — иначе шаг цепочки сбивается на последнем звене. */
@media (max-width: 1159px) {
  .rail {
    margin-bottom: var(--seam-gap);
  }

  .rail .tile {
    padding-bottom: clamp(1rem, 1.8vw, 1.7rem);
    border-radius: var(--r-tile);
  }

  .rail .tile > .weld { display: none; }
}

/* Узкий экран: шапка это только знак. Почта скрыта тем же порогом (<720px),
   а кнопка в шапке дублирует главную кнопку, которая идёт следующим экраном, —
   в стопке она превращается в лишнюю ступень между знаком и заголовком.
   Правило узкое, только для шапки первого экрана: на юридических страницах
   шапка своя (`.topbar`), и её кнопка «На главную» обязана остаться —
   там это единственный путь назад. */
@media (max-width: 719px) {
  .hero__act { display: none; }
}

@media (max-width: 660px) {
  .rail .tile { min-height: 0; }

  .tile { gap: 0.6rem; }

  .tile__value { font-size: 2.4rem; }
  .tile__note { margin-top: 0.2rem; }
}