/* =========================================================================
   nimax.ru/strategy — стили страницы. Правила: CSS-RULES.md
   Порядок: токены и reset → примитивы → блоки → медиазапросы (группами).

   Все размеры — fluid-токены в rem: значение = макету на 1440px, линейно
   уменьшается к 375px и продолжается до 1920px. Дальше вся страница
   масштабируется пропорционально через font-size на html (css/base.css).
   Хардкод в px — только для бордеров 1–2px.
   ========================================================================= */

/* ---------- Токены и reset ---------- */
.st-page {
  /* цвет */
  --st-ink: #1a2e5f;
  --st-ink-2: rgba(26, 46, 95, .78);
  --st-ink-3: #5b6788;
  --st-ink-4: rgba(26, 46, 95, .64);
  --st-bg: #f2f2f7;
  --st-white: #fff;
  --st-line: rgba(26, 46, 95, .1);
  --st-line-2: rgba(26, 46, 95, .2);
  --st-blue: #2b83e8;
  --st-blue-2: #54a4ff;
  --st-blue-3: #1e5fae;
  --st-link: #1d6cc7;
  --st-sky: #8ec1f0;
  --st-sky-2: #b9d9f6;
  --st-sky-3: #e3effb;
  --st-grad-sky: linear-gradient(225deg, #4d9dee 0%, #b2eaff 100%);
  --st-grad-hero: linear-gradient(180deg, var(--st-sky-3) 0%, var(--st-bg) 100%);

  /* форма, движение */
  --st-shadow: 0 1px 2px rgba(26, 46, 95, .06), 0 16px 40px rgba(26, 46, 95, .1); /* только для «стекла», не для белых плашек */
  --st-ease: cubic-bezier(.2, .8, .2, 1);

  /* ритм секций */
  --st-sec-t: var(--st-s-48);
  --st-sec-b: var(--st-s-96);

  /* Размеры шрифта: {375px → 1440px (макет)} → продолжение до 1920 */
  --st-fs-h1: clamp(2.125rem, 1.531rem + 2.535vw, 4.573rem); /* 34→61 */
  --st-fs-h2: clamp(1.875rem, 1.268rem + 2.592vw, 4.377rem); /* 30→57.6 */
  --st-fs-tab: clamp(1.5rem, 1.324rem + 0.7512vw, 2.225rem); /* 24→32 */
  --st-fs-h3: clamp(1.375rem, 1.225rem + 0.6385vw, 1.992rem); /* 22→28.8 */
  --st-fs-h4: clamp(1.25rem, 1.162rem + 0.3756vw, 1.613rem); /* 20→24 */
  --st-fs-h5: clamp(1.125rem, 1.037rem + 0.3756vw, 1.488rem); /* 18→22 */
  --st-fs-h6: clamp(1.062rem, 0.9965rem + 0.2817vw, 1.335rem); /* 17→20 */
  --st-fs-lead: clamp(1.062rem, 0.9767rem + 0.3662vw, 1.416rem); /* 17→20.9 */
  --st-fs-text: clamp(0.9375rem, 0.9155rem + 0.0939vw, 1.028rem); /* 15→16 */
  --st-fs-sm: clamp(0.875rem, 0.853rem + 0.0939vw, 0.9657rem); /* 14→15 */
  --st-fs-xs: clamp(0.8125rem, 0.7905rem + 0.0939vw, 0.9032rem); /* 13→14 */
  --st-fs-2xs: clamp(0.75rem, 0.728rem + 0.0939vw, 0.8407rem); /* 12→13 */
  --st-fs-num-xl: clamp(4.5rem, 3.18rem + 5.634vw, 9.94rem); /* 72→132 */
  --st-fs-num-lg: clamp(3.25rem, 2.682rem + 2.423vw, 5.589rem); /* 52→77.8 */
  --st-fs-num-md: clamp(2.125rem, 1.333rem + 3.38vw, 5.389rem); /* 34→70 */
  /* Отступы (имя = значение в макете на 1440): {375px → 1440px (макет)} → продолжение до 1920 */
  --st-s-4: 0.25rem; /* 4→4 */
  --st-s-6: clamp(0.25rem, 0.206rem + 0.1878vw, 0.4313rem); /* 4→6 */
  --st-s-8: clamp(0.375rem, 0.331rem + 0.1878vw, 0.5563rem); /* 6→8 */
  --st-s-10: clamp(0.5rem, 0.456rem + 0.1878vw, 0.6813rem); /* 8→10 */
  --st-s-12: clamp(0.625rem, 0.581rem + 0.1878vw, 0.8063rem); /* 10→12 */
  --st-s-14: clamp(0.75rem, 0.706rem + 0.1878vw, 0.9313rem); /* 12→14 */
  --st-s-16: clamp(0.75rem, 0.662rem + 0.3756vw, 1.113rem); /* 12→16 */
  --st-s-20: clamp(1rem, 0.912rem + 0.3756vw, 1.363rem); /* 16→20 */
  --st-s-24: clamp(1rem, 0.8239rem + 0.7512vw, 1.725rem); /* 16→24 */
  --st-s-28: clamp(1.25rem, 1.074rem + 0.7512vw, 1.975rem); /* 20→28 */
  --st-s-30: clamp(1.25rem, 1.03rem + 0.939vw, 2.157rem); /* 20→30 */
  --st-s-32: clamp(1.5rem, 1.324rem + 0.7512vw, 2.225rem); /* 24→32 */
  --st-s-40: clamp(1.75rem, 1.486rem + 1.127vw, 2.838rem); /* 28→40 */
  --st-s-48: clamp(2rem, 1.648rem + 1.502vw, 3.451rem); /* 32→48 */
  --st-s-56: clamp(2.25rem, 1.81rem + 1.878vw, 4.063rem); /* 36→56 */
  --st-s-60: clamp(1.5rem, 0.7077rem + 3.38vw, 4.764rem); /* 24→60 */
  --st-s-64: clamp(2.5rem, 1.972rem + 2.254vw, 4.676rem); /* 40→64 */
  --st-s-72: clamp(2.5rem, 1.796rem + 3.005vw, 5.401rem); /* 40→72 */
  --st-s-80: clamp(3rem, 2.296rem + 3.005vw, 5.901rem); /* 48→80 */
  --st-s-96: clamp(3.5rem, 2.62rem + 3.756vw, 7.127rem); /* 56→96 */
  --st-s-110: clamp(3.5rem, 2.312rem + 5.07vw, 8.396rem); /* 56→110 */
  --st-s-150: clamp(4rem, 2.107rem + 8.075vw, 11.8rem); /* 64→150 */
  /* Радиусы и размеры элементов: {375px → 1440px (макет)} → продолжение до 1920 */
  --st-r-sm: clamp(0.625rem, 0.581rem + 0.1878vw, 0.8063rem); /* 10→12 */
  --st-r-md: clamp(0.75rem, 0.662rem + 0.3756vw, 1.113rem); /* 12→16 */
  --st-r-lg: clamp(1rem, 0.8239rem + 0.7512vw, 1.725rem); /* 16→24 */
  --st-pad: clamp(1rem, 0.8239rem + 0.7512vw, 1.725rem); /* 16→24 */
  --st-icon: clamp(2.25rem, 2.162rem + 0.3756vw, 2.613rem); /* 36→40 */
  --st-logo: clamp(4.5rem, 4.104rem + 1.69vw, 6.132rem); /* 72→90 */
  --st-shot: clamp(12.5rem, 12.06rem + 1.878vw, 14.31rem); /* 200→220 */
  --st-cases-h: clamp(28rem, 25.75rem + 9.375vw, 37rem); /* мин. высота блока кейсов (≥1101px) */
  --st-avatar: clamp(6rem, 5.472rem + 2.254vw, 8.176rem); /* 96→120 */
  --st-btn-h: clamp(2.875rem, 2.743rem + 0.5634vw, 3.419rem); /* 46→52 */
  --st-dot: clamp(0.75rem, 0.706rem + 0.1878vw, 0.9313rem); /* 12→14 */
  --st-header-h: clamp(4rem, 3.648rem + 1.502vw, 5.451rem); /* 64→80 */
  --st-cross-lg: clamp(3.5rem, 2.972rem + 2.254vw, 5.676rem); /* 56→80 */
  --st-cross: clamp(2.75rem, 2.398rem + 1.502vw, 4.201rem); /* 44→60 */
  --st-hl-go: clamp(3rem, 2.824rem + 0.7512vw, 3.725rem); /* 48→56, кнопка-стрелка кейса */
  --st-hl-h: clamp(17.5rem, 16.18rem + 5.634vw, 22.94rem); /* 280→340, мин. высота строки результата */
  --st-sit-h: clamp(12.5rem, 11.62rem + 3.756vw, 16.13rem); /* 200→240 */
  --st-format-h: clamp(18.75rem, 17.67rem + 4.601vw, 23.19rem); /* 300→349 */
  --st-brief-w: clamp(21.44rem, 13.14rem + 35.4vw, 55.6rem); /* 343→720, ширина модалки брифа */

  font-family: "TT Interphases Pro", Inter, system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--st-fs-text);
  line-height: 1.5;
  color: var(--st-ink);
  background: var(--st-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.st-page,
.st-page :where(*),
.st-page :where(*)::before,
.st-page :where(*)::after { box-sizing: border-box; }
.st-page :where(p, h1, h2, h3, h4, ul, ol, li, dl, dt, dd, figure, figcaption, blockquote) { margin: 0; padding: 0; }
.st-page :where(ul, ol) { list-style: none; }
/* Переносы: абзацы без «висячих» слов, заголовки — сбалансированные строки */
.st-page :where(p, dd, li, figcaption) { text-wrap: pretty; }
.st-page :where(h1, h2, h3, h4) { text-wrap: balance; }
.st-page :where(a) { color: inherit; text-decoration: none; }
.st-page :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
.st-page :where(img, svg) { display: block; max-width: 100%; }
.st-page :where(img) { height: auto; }
.st-page :focus-visible { outline: 2px solid var(--st-blue); outline-offset: 3px; }
.st-page [id] { scroll-margin-top: var(--st-header-h); }

/* ---------- Раскладка ---------- */
/* Контейнер на всю ширину, поля как в макете: 24px на 1440 → 16px на мобильном */
.st-container {
  position: relative;
  z-index: 1;
  width: calc(100% - var(--st-pad) * 2);
  margin-inline: auto;
}

.st-section {
  position: relative;
  isolation: isolate;
  padding-block: var(--st-sec-t) var(--st-sec-b);
  background: var(--st-bg);
}
.st-section--tight { padding-top: var(--st-s-48); }
.st-section--flush { padding-top: 0; }
.st-section--bleed { padding-bottom: 0; }
.st-white { background: var(--st-white); }
.st-dark { background: var(--st-ink); color: #fff; }

.st-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--st-s-40) var(--st-s-24);
  margin-bottom: var(--st-s-48);
}
.st-head--single { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--st-s-28); }
.st-head--center {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: var(--st-s-72);
}
.st-head--center .st-text--lg { max-width: 40em; text-wrap: balance; }
.st-head--center .st-h2 { max-width: 16em; }
.st-head--rule {
  padding-bottom: var(--st-s-48);
  border-bottom: 1px solid var(--st-line-2);
  margin-bottom: var(--st-s-32);
}
.st-dark .st-head--rule { border-color: hsla(0, 0%, 100%, .2); }

.st-actions { display: flex; flex-wrap: wrap; gap: var(--st-s-12); }

/* ---------- Типографика ---------- */
.st-h1 { font-size: var(--st-fs-h1); line-height: 1; letter-spacing: -.03em; font-weight: 500; }
.st-h2 { font-size: var(--st-fs-h2); line-height: 1.04; letter-spacing: -.03em; font-weight: 500; }
.st-h3 { font-size: var(--st-fs-h4); line-height: 1.2; letter-spacing: -.01em; font-weight: 500; }
/* Абзац: единый размер для всей страницы (16px на 1440) */
.st-text { font-size: var(--st-fs-text); line-height: 1.5; color: var(--st-ink-2); }
.st-lead,
.st-text--lg { font-size: var(--st-fs-lead); line-height: 1.45; }
.st-dark .st-text { color: hsla(0, 0%, 100%, .78); }

.st-kicker { font-size: var(--st-fs-2xs); line-height: 1.3; text-transform: uppercase; letter-spacing: .08em; color: var(--st-ink-3); }
.st-kicker--light { color: hsla(0, 0%, 100%, .6); }

.st-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--st-s-8);
  padding: var(--st-s-6) var(--st-s-14);
  font-size: var(--st-fs-2xs);
  line-height: 1;
  font-weight: 400;
  color: var(--st-ink-3);
  border: 1px dashed var(--st-line-2);
  border-radius: 999px;
}
.st-tag::before { content: ""; width: .46em; height: .46em; border-radius: 50%; background: var(--st-blue); }
.st-tag--light { color: #fff; border-color: hsla(0, 0%, 100%, .3); }
.st-tag--light::before { background: var(--st-sky); }

.st-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Примитивы ---------- */
.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--st-btn-h);
  padding: 0 var(--st-s-28);
  border-radius: 999px;
  border: 1px solid var(--st-line-2);
  font-size: var(--st-fs-xs);
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--st-ink);
  transition: background .25s var(--st-ease), color .2s var(--st-ease), border-color .2s var(--st-ease);
}
.st-btn:hover { color: var(--st-blue); border-color: var(--st-blue); }
.st-btn--solid { background: var(--st-ink); border-color: var(--st-ink); color: #fff; }
.st-btn--solid:hover { background: var(--st-blue); border-color: var(--st-blue); color: #fff; }
.st-btn--white { background: var(--st-white); border-color: var(--st-white); color: var(--st-ink); }
.st-btn--white:hover { background: var(--st-sky-3); border-color: var(--st-sky-3); color: var(--st-ink); }

.st-link {
  color: var(--st-link);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .4s var(--st-ease), background-position .4s var(--st-ease);
}
.st-link:hover { background-position: 100% 100%; background-size: 0 1px; }

.st-more {
  display: inline-flex;
  align-items: center;
  gap: var(--st-s-4);
  padding: var(--st-s-6) var(--st-s-10);
  border-radius: 999px;
  background: var(--st-white);
  color: var(--st-ink);
  font-size: var(--st-fs-2xs);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 500;
  transition: color .2s var(--st-ease);
}
.st-more::after { content: "→"; transition: transform .25s var(--st-ease); }
.st-more:hover { color: var(--st-blue); }
.st-more:hover::after { transform: translate(2px, 0); }

.st-plus {
  position: relative;
  flex-shrink: 0;
  width: var(--st-icon);
  height: var(--st-icon);
  border-radius: 50%;
  border: 1px solid var(--st-line-2);
  transition: background .25s var(--st-ease), border-color .25s var(--st-ease);
}
.st-plus::before,
.st-plus::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 35%;
  height: 1.5px;
  background: var(--st-ink);
  transform: translate(-50%, -50%);
  transition: transform .4s var(--st-ease), background .25s var(--st-ease);
}
.st-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.st-plus--light { border-color: hsla(0, 0%, 100%, .3); }
.st-plus--light::before,
.st-plus--light::after { background: #fff; }

/* Перекрестье осей — SVG из макета (inline, цвет через currentColor) */
.st-cross { position: absolute; width: var(--st-cross); height: var(--st-cross); color: var(--st-ink); pointer-events: none; }

/* Уголки-«видоискатель». Цвет — локальная --corner (transparent = скрыт). */
.st-corners { position: relative; --corner: var(--st-ink); --corner-len: var(--st-s-14); --corner-inset: 0px; }
.st-corners::before {
  content: "";
  position: absolute;
  inset: var(--corner-inset);
  pointer-events: none;
  --g: linear-gradient(var(--corner), var(--corner));
  background:
    var(--g) top left / var(--corner-len) 2px,
    var(--g) top left / 2px var(--corner-len),
    var(--g) top right / var(--corner-len) 2px,
    var(--g) top right / 2px var(--corner-len),
    var(--g) bottom left / var(--corner-len) 2px,
    var(--g) bottom left / 2px var(--corner-len),
    var(--g) bottom right / var(--corner-len) 2px,
    var(--g) bottom right / 2px var(--corner-len);
  background-repeat: no-repeat;
}

.st-mesh { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.st-mesh i {
  position: absolute;
  width: 46vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent);
  opacity: .7;
  will-change: transform;
}
.st-mesh--sky i:nth-child(1) { --c: rgba(142, 193, 240, .55); top: -12vw; right: -10vw; }
.st-mesh--sky i:nth-child(2) { --c: rgba(185, 217, 246, .6); top: 8vw; right: 14vw; width: 30vw; }
.st-mesh--sky i:nth-child(3) { --c: rgba(227, 239, 251, .9); top: 30vw; left: -10vw; }
.st-mesh--sky i:nth-child(4) { --c: rgba(142, 193, 240, .25); top: 40vw; left: 30vw; width: 24vw; }

@media (prefers-reduced-motion: no-preference) {
  .st-mesh i { animation: st-mesh-a 18s var(--st-ease) infinite alternate; }
  .st-mesh i:nth-child(2n) { animation-duration: 24s; animation-direction: alternate-reverse; }
}
@keyframes st-mesh-a {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-4vw, 3vw) scale(1.12); }
}

/* =========================================================================
   Блоки
   ========================================================================= */

/* ---------- st-hero ---------- */
.st-hero {
  /* на высоту экрана под шапкой; снизу 24px до дивайдера следующей секции */
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--st-header-h));
  padding-block: var(--st-s-24);
  background: var(--st-grad-hero);
  overflow: hidden;
}
/* Заливка при скролле: фон следующей секции поднимается снизу градиентом.
   --fill (0…1) пишет JS по доле прокрутки hero; при 0 градиент целиком ниже блока. */
.st-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top,
    var(--st-bg) calc((var(--fill, 0) * 1.4 - .4) * 100%),
    rgba(242, 242, 247, 0) calc(var(--fill, 0) * 140%));
}
.st-hero__grid {
  --gap: calc(var(--st-cross-lg) / 2); /* оси обрываются у края крестика */
  flex: 1;
  display: grid;
  grid-template-rows: 1fr 1fr; /* две половины одной высоты */
}
.st-hero__top,
.st-hero__bottom {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
/* Оси: вертикаль сверху и снизу, горизонталь с разрывом под крестик */
.st-hero__top::before,
.st-hero__bottom::before { content: ""; position: absolute; left: 50%; width: 1px; background: var(--st-line-2); }
.st-hero__top::before { top: 0; bottom: var(--gap); }
.st-hero__bottom::before { top: var(--gap); bottom: 0; }
.st-hero__top::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(to right,
    var(--st-line-2) calc(50% - var(--gap)), transparent 0,
    transparent calc(50% + var(--gap)), var(--st-line-2) 0);
}
.st-hero__top {
  grid-template-rows: 1fr auto;
  row-gap: var(--st-s-24);
  padding-bottom: var(--st-s-24);
}
.st-hero__tag { grid-column: 1; grid-row: 1; align-self: start; justify-self: start; }
/* Заголовок прибит к дивайдеру (нижняя строка сетки); фактоиды в той же строке,
   выровнены по базовой линии первой строки h1 */
.st-hero__title {
  grid-column: 1;
  grid-row: 2;
  align-self: first baseline;
  padding-right: var(--st-s-40);
  font-size: var(--st-fs-h1);
}
.st-hero__stat {
  grid-column: 2;
  grid-row: 2;
  align-self: first baseline;
  padding-left: var(--st-s-32);
}
/* Три фактоида в ряд: цифры (кегль и lh h1) — на базовой линии первой строки заголовка, подписи под ними */
.st-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--st-s-32);
}
.st-hero__fact { display: flex; flex-direction: column; gap: var(--st-s-8); }
/* Кегль и lh как у h1 */
.st-hero__num {
  font-size: var(--st-fs-h1);
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: 500;
  white-space: nowrap;
  color: var(--st-blue);
  font-variant-numeric: tabular-nums;
}
.st-hero__lbl {
  max-width: 24em;
  font-size: var(--st-fs-2xs);
  line-height: 1.3;
  color: var(--st-ink-2);
}
/* Предлоги и единицы («на», «в», «раза», «%») — мелко, на той же базовой линии, что и цифра */
.st-hero__unit { font-size: var(--st-fs-h4); letter-spacing: -.01em; }
/* Источник: плашка над цифрой при наведении (для скринридера читается всегда) */
.st-hero__num { position: relative; cursor: help; }
.st-hero__src {
  position: absolute;
  bottom: 100%;
  left: 0;
  padding: var(--st-s-4) var(--st-s-10);
  border: 1px solid var(--st-line);
  border-radius: 999px;
  background: var(--st-white);
  font-size: var(--st-fs-2xs);
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--st-ink-3);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(var(--st-s-4));
  transition: opacity .2s var(--st-ease), transform .25s var(--st-ease);
}
.st-hero__num:hover .st-hero__src { opacity: 1; transform: none; }
.st-hero__cross {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--st-cross-lg);
  height: var(--st-cross-lg);
  translate: -50% -50%;
}
.st-hero__index {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--st-s-48);
  padding: var(--st-s-32) var(--st-s-40) 0 0;
}
.st-hero__index-label { color: var(--st-ink-3); }
.st-hero__index-list { display: grid; gap: var(--st-s-6); }
.st-hero__index-item a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--st-s-16);
  font-size: var(--st-fs-text);
  line-height: 1.35;
  transition: color .2s var(--st-ease);
}
.st-hero__index-item a:hover { color: var(--st-blue); }
.st-hero__index-n { width: 1.1em; font-size: var(--st-fs-2xs); color: var(--st-ink-3); font-variant-numeric: tabular-nums; }
.st-hero__index-item--session a { font-weight: 500; }
.st-hero__index-item--session .st-hero__index-n { color: var(--st-blue); }
.st-hero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--st-s-32);
  padding: var(--st-s-32) 0 0 var(--st-s-32);
}
.st-hero__aside .st-text { max-width: 30em; }

/* ---------- st-logos ---------- */
.st-logos__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding-top: var(--st-s-40);
  border-top: 1px solid var(--st-line-2);
}
.st-logos__wrap::before {
  content: "";
  position: absolute;
  inset: var(--st-s-20) auto 0 50%;
  width: 1px;
  background: var(--st-line-2);
}
.st-logos__main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--st-s-48); min-height: var(--st-cases-h); padding-right: var(--st-s-40); }
.st-logos { position: relative; display: flex; flex-wrap: wrap; gap: var(--st-s-24) var(--st-s-28); }
.st-logos__item { display: flex; flex-direction: column; gap: var(--st-s-6); width: var(--st-logo); text-align: left; }
.st-logos__media { display: block; width: var(--st-logo); height: var(--st-logo); }
.st-logos__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--st-s-12);
  border-radius: var(--st-r-sm);
  color: var(--st-ink);
  background: var(--st-white);
  transition: transform .4s var(--st-ease), background-color .3s var(--st-ease), color .3s var(--st-ease);
}
.st-logos__logo { display: block; width: 100%; height: 100%; }
.st-logos__knock { fill: var(--st-white); transition: fill .3s var(--st-ease); }
.st-logos__name { font-size: var(--st-fs-xs); line-height: 1.5; font-weight: 500; transition: color .2s var(--st-ease); }
.st-logos__item:hover .st-logos__name { color: var(--st-blue); }
.st-logos__item:hover .st-logos__tile { transform: scale(.95); }
.st-logos__item[aria-pressed="true"] .st-logos__tile { color: var(--st-white); background: var(--st-ink); transform: scale(.89); }
.st-logos__item[aria-pressed="true"] .st-logos__knock { fill: var(--st-ink); }
.st-logos__item[aria-pressed="true"]:hover .st-logos__tile { transform: scale(.86); }
/* Общие уголки-курсор: JS ставит --x/--y по активной плашке, едут по ease-out expo */
.st-logos__cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: var(--st-logo);
  height: var(--st-logo);
  transform: translate(var(--x, 0), var(--y, 0));
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .st-logos__cursor.is-ready { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
}
/* Картинки кейсов: стопкой внизу левой колонки (по нижнему краю дивайдера), смена — clip-path снизу вверх */
.st-logos__shots { display: grid; width: var(--st-shot); margin-top: auto; }
.st-logos__shot {
  grid-area: 1 / 1;
  display: block;
  overflow: hidden;
  border-radius: var(--st-r-lg);
  clip-path: inset(100% 0 0 0 round var(--st-r-lg));
  transition: clip-path 0s linear .9s; /* уходящая снимается, когда новая уже раскрылась */
}
.st-logos__shot.is-active { z-index: 1; clip-path: inset(0 0 0 0 round var(--st-r-lg)); transition: clip-path .9s cubic-bezier(.16, 1, .3, 1); }
.st-logos__shot img { width: 100%; height: auto; aspect-ratio: 1200 / 1139; object-fit: cover; transition: transform .6s var(--st-ease); }
.st-logos__shot:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .st-logos__shot { transition: none; }
  .st-logos__shot.is-active { transition: none; }
}

/* Все кейсы в одной ячейке: высоту задаёт самый высокий — при переключении блок не прыгает */
.st-logos__cases { display: grid; align-items: start; padding-left: var(--st-s-40); }

/* ---------- st-case (текст выбранного кейса) ---------- */
.st-case { grid-area: 1 / 1; }
.st-case[hidden] { display: block; visibility: hidden; pointer-events: none; }
.st-case__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--st-s-20); padding-top: var(--st-s-8); }
.st-case__title { display: flex; flex-direction: column; gap: var(--st-s-8); font-weight: 400; }
.st-case__title a { display: contents; }
.st-case__type { font-size: var(--st-fs-sm); line-height: 1.3; color: var(--st-ink-3); }
.st-case__client { font-size: var(--st-fs-h3); line-height: 1.2; font-weight: 500; transition: color .2s var(--st-ease); }
.st-case__title a:hover .st-case__client { color: var(--st-blue); }
.st-case__stats { display: flex; flex-wrap: wrap; gap: var(--st-s-32); padding-block: var(--st-s-4); }
.st-case__stat { display: flex; flex-direction: column; gap: var(--st-s-4); }
.st-case__num { font-size: var(--st-fs-h2); line-height: 1; color: var(--st-blue); }
.st-case__lbl { font-size: var(--st-fs-sm); line-height: 1.3; color: var(--st-ink-3); }
.st-case__body .st-text { max-width: 36em; font-size: var(--st-fs-lead); line-height: 1.45; color: var(--st-ink-2); }
.st-case__body .st-more { margin-top: var(--st-s-8); }
/* Стаггер: строки текста появляются по очереди при каждом показе кейса */
@media (prefers-reduced-motion: no-preference) {
  /* delay задаём отдельным свойством с той же специфичностью, иначе шорткат animation его обнуляет */
  .st-case:not([hidden]) .st-case__body > * { animation: st-case-in .7s var(--st-ease) both; animation-delay: var(--st-stagger, 0s); }
  .st-case__body > :nth-child(2) { --st-stagger: .1s; }
  .st-case__body > :nth-child(3) { --st-stagger: .2s; }
  .st-case__body > :nth-child(4) { --st-stagger: .3s; }
  .st-case__body > :nth-child(5) { --st-stagger: .4s; }
}
@keyframes st-case-in {
  from { opacity: 0; transform: translate(0, var(--st-s-24)); }
  to { opacity: 1; transform: none; }
}

/* ---------- st-hl (результаты) ----------
   Вертикальный список кейсов на navy, между кейсами дивайдеры. Вся карточка — ссылка
   (растянутый ::before у «Смотреть кейс» в правом верхнем углу).
   В покое (__face): шапка и логотип слева, крупная цифра справа (верх цифры = верх шапки).
   Шторка: оверлей __detail виден в полосе от --hl-a до --hl-b (в % высоты карточки),
   navy-крышка __face — всё вне этой полосы. Обе переменные зарегистрированы через @property
   и анимируются transition, поэтому прерванное движение плавно разворачивается с текущего места.
   JS ставит цели по направлению курсора: ведём вниз — кромки идут вниз, ведём вверх — вверх.
   .is-open — наведение/фокус/тап (проявление текста оверлея). */
@property --hl-a { syntax: "<number>"; inherits: true; initial-value: 100; }
@property --hl-b { syntax: "<number>"; inherits: true; initial-value: 100; }
.st-hl {
  --t: .7s; /* длительность шторки */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  margin-top: var(--st-s-150); /* + 48 от st-head ≈ 2 × 96 от заголовка до кейсов */
}
/* общий фон всех карточек: фото + градиент, параллакс (--shift пишет JS) */
/* inset 1px сверху/снизу: при дробной высоте карточек фото не просвечивает полоской по краю обёртки */
.st-hl__media { position: absolute; inset: 1px 0; z-index: -1; overflow: hidden; background: var(--st-grad-sky); }
.st-hl__media img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .st-hl__media img { transform: translate3d(0, calc(var(--shift, 0) * 6%), 0) scale(1.14); will-change: transform; }
}
.st-hl__card {
  --hl-a: 100; /* верхняя кромка оверлея */
  --hl-b: 100; /* нижняя кромка оверлея; a = b — оверлей скрыт */
  position: relative;
  display: grid;
  min-height: var(--st-hl-h);
  color: #fff;
  cursor: pointer;
  transition: --hl-a var(--t) var(--st-ease), --hl-b var(--t) var(--st-ease);
}
.st-hl__card.is-snap { transition: none; } /* JS: мгновенно ставит стартовую кромку перед раскрытием */
/* дивайдер над каждым кейсом (в том числе над первым) — поверх обоих слоёв */
.st-hl__card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 1px;
  background: hsla(0, 0%, 100%, .14);
  pointer-events: none;
}
/* оба слоя в одной ячейке: высота карточки = высота большего из них.
   Поля по бокам = поля st-container, поэтому текст стоит по сетке страницы */
.st-hl__face,
.st-hl__detail { grid-area: 1 / 1; padding: var(--st-s-40) var(--st-pad); }

/* navy-«крышка» над общим фото */
.st-hl__face {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: var(--st-s-40) var(--st-s-24);
  background: var(--st-ink);
  /* всё, кроме полосы [a, b]: верхний кусок + нижний кусок одним контуром */
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(var(--hl-a) * 1%), 0 calc(var(--hl-a) * 1%),
    0 calc(var(--hl-b) * 1%), 100% calc(var(--hl-b) * 1%),
    100% 100%, 0 100%
  );
}
.st-hl__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--st-s-12); }
.st-hl__type {
  padding: var(--st-s-6) var(--st-s-14);
  border-radius: 999px;
  background: rgba(142, 193, 240, .16);
  color: var(--st-sky-2);
  font-size: var(--st-fs-xs);
  line-height: 1.4;
}
.st-hl__client { font-size: var(--st-fs-h3); line-height: 1.08; letter-spacing: -.02em; font-weight: 500; }

/* логотип — в стилистике плашек st-logos: белый квадрат, знак цветом ink (currentColor) */
.st-hl__logo {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--st-logo);
  height: var(--st-logo);
  padding: var(--st-s-16);
  border-radius: var(--st-r-sm);
  color: var(--st-ink);
  background: var(--st-white);
}
.st-hl__logo-svg { display: block; width: 100%; height: 100%; }

.st-hl__stat { grid-column: 2; grid-row: 1 / 3; align-self: start; display: flex; flex-direction: column; gap: var(--st-s-16); }
.st-hl__num {
  font-size: var(--st-fs-num-xl);
  line-height: .8;
  letter-spacing: -.04em;
  font-weight: 500;
  color: var(--st-blue-2);
  font-variant-numeric: tabular-nums;
}
.st-hl__lbl { max-width: 24em; font-size: var(--st-fs-text); line-height: 1.5; color: hsla(0, 0%, 100%, .78); text-wrap: pretty; }

/* Кнопка-стрелка «Смотреть кейс» — правый верхний угол.
   Круг со стрелкой нарисован в обоих слоях (__arrow): белый в __face, ink в __detail, —
   смену цвета делает та же шторка clip-path, синхронно с кромкой оверлея.
   Сама ссылка __go прозрачная поверх: фокус + растянутый ::before на всю карточку. */
.st-hl__face,
.st-hl__detail { position: relative; }
.st-hl__arrow {
  position: absolute;
  top: var(--st-s-40);
  right: var(--st-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--st-hl-go);
  height: var(--st-hl-go);
  border-radius: 50%;
  color: var(--st-ink);
  background: var(--st-white);
}
.st-hl__detail .st-hl__arrow { color: var(--st-white); background: var(--st-ink); }
.st-hl__arrow-icon { width: 45%; height: 45%; }
.st-hl__go {
  grid-area: 1 / 1;
  z-index: 2;
  align-self: start;
  justify-self: end;
  width: var(--st-hl-go);
  height: var(--st-hl-go);
  margin: var(--st-s-40) var(--st-pad);
  border-radius: 50%;
}
.st-hl__go::before { content: ""; position: absolute; inset: 0; }

/* оверлей с подробностями */
.st-hl__detail {
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  grid-template-rows: auto 1fr;
  gap: var(--st-s-40) var(--st-s-24);
  color: var(--st-ink);
  clip-path: inset(calc(var(--hl-a) * 1%) 0 calc((100 - var(--hl-b)) * 1%) 0);
}
.st-hl__detail .st-hl__type { background: rgba(26, 46, 95, .16); color: var(--st-ink); }
/* в наведённом состоянии плашка логотипа синяя, знак белый (как выбранная плашка в st-logos) */
.st-hl__detail .st-hl__logo { color: var(--st-white); background: var(--st-ink); }

/* Задача | Результат: абзацы стоят на одной линии, фактоид результата уходит вниз карточки */
.st-hl__flow {
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--st-s-24);
  padding-right: calc(var(--st-hl-go) + var(--st-s-24)); /* место под кнопку-стрелку */
}
.st-hl__step { display: flex; flex-direction: column; gap: var(--st-s-16); }
.st-hl__flow dt { font-size: var(--st-fs-xs); line-height: 1; text-transform: uppercase; letter-spacing: .06em; color: var(--st-ink-4); }
.st-hl__flow dd { flex: 1; display: flex; flex-direction: column; gap: var(--st-s-24); font-size: var(--st-fs-text); line-height: 1.5; color: var(--st-ink-2); text-wrap: pretty; }
.st-hl__fact { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--st-s-8) var(--st-s-16); margin-top: auto; }
.st-hl__fact-num {
  font-size: var(--st-fs-num-lg);
  line-height: .8;
  letter-spacing: -.04em;
  font-weight: 500;
  color: var(--st-ink);
  font-variant-numeric: tabular-nums;
}
.st-hl__fact-lbl { max-width: 12em; color: var(--st-ink); }

@media (prefers-reduced-motion: no-preference) {
  /* содержимое оверлея проявляется вслед за шторкой — только opacity, без сдвига.
     При уходе текст не гаснет, а сбрасывается в 0 уже после того, как шторка закрылась (задержка = --t) */
  .st-hl__detail > :not(.st-hl__arrow) { opacity: 0; transition: opacity 0s linear var(--t); }
  .st-hl__card.is-open .st-hl__detail > * { opacity: 1; transition: opacity .5s var(--st-ease) .12s; }
  .st-hl__card.is-open .st-hl__flow { transition-delay: .2s; }
}
@media (prefers-reduced-motion: reduce) {
  .st-hl { --t: .01s; }
}

/* ---------- st-situations ---------- */
.st-situations {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--st-s-40) var(--st-s-24);
  align-items: start;
}
/* отступ под фиксированный навбар: он прячется только при скролле вниз, при скролле вверх возвращается и перекрывал заголовок */
.st-situations__title { position: sticky; top: calc(var(--st-header-h) + var(--st-s-32)); }
.st-situations__list { display: grid; gap: var(--st-s-16); }
.st-situation {
  display: flex;
  flex-direction: column;
  min-height: var(--st-sit-h);
  padding: var(--st-s-24);
  border-radius: var(--st-r-lg);
  background: var(--st-white);
}
.st-white .st-situation { background: var(--st-bg); }
.st-situation__n {
  padding-bottom: var(--st-s-8);
  margin-bottom: var(--st-s-16);
  border-bottom: 1px solid var(--st-line-2);
  font-size: var(--st-fs-text);
  line-height: 1.25;
  color: var(--st-blue);
  font-variant-numeric: tabular-nums;
}
.st-situation__text { margin-top: auto; padding-top: var(--st-s-32); font-size: var(--st-fs-text); line-height: 1.5; color: var(--st-ink-4); }

/* ---------- st-team ---------- */
.st-team { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; }
.st-team__media { position: relative; display: grid; overflow: hidden; background: var(--st-bg); }
/* Фото на стратега — стопкой. Смена — мягкая градиентная волна слева направо:
   выбранное (is-active) встаёт сверху, и его маска (300% ширины, размытый край) проезжает
   mask-position 100% → 0. Анимация перезапускается при каждом добавлении is-active,
   остальные фото всегда видны снизу — переключение срабатывает при любом темпе кликов. */
.st-team__shot { grid-area: 1 / 1; display: block; overflow: hidden; }
.st-team__shot.is-active { z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .st-team__shot.is-active {
    -webkit-mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
    mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
    -webkit-mask-size: 300% 100%;
    mask-size: 300% 100%;
    animation: st-team-wave 1.1s cubic-bezier(.3, 0, .2, 1) both; /* стартует сразу, мягко доезжает */
  }
}
/* 87% → 13%: край волны входит в кадр с первого кадра и уходит ровно на последнем (без «пустого» хода) */
@keyframes st-team-wave {
  from { -webkit-mask-position: 87% 0; mask-position: 87% 0; }
  to { -webkit-mask-position: 13% 0; mask-position: 13% 0; }
}
.st-team__shot img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
/* Параллакс: --shift (-1…1) пишет JS (scrub 0); картинка увеличена на 14% (запас ±7%), сдвиг ±6% */
@media (prefers-reduced-motion: no-preference) {
  .st-team__shot img {
    transform: translate3d(0, calc(var(--shift, 0) * 6%), 0) scale(1.14);
    will-change: transform;
  }
}
.st-team__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--st-s-32) var(--st-pad) var(--st-s-48);
}
.st-team__people { position: relative; display: flex; gap: var(--st-s-32); margin-top: var(--st-s-72); }
/* Общие уголки-курсор (как st-logos__cursor): JS ставит --x/--y по фото выбранного стратега */
.st-team__cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: var(--st-avatar);
  height: var(--st-avatar);
  transform: translate(var(--x, 0), var(--y, 0));
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .st-team__cursor.is-ready { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
}
/* Панели стратегов в одной ячейке (как st-case): высота — по самой высокой, блок не прыгает */
/* Цитаты стратегов в одной ячейке (как st-case): высота — по самой длинной */
.st-team__panels { display: grid; max-width: 33em; margin-top: var(--st-s-48); }
.st-team__panel { grid-area: 1 / 1; }
.st-team__panel[hidden] { display: block; visibility: hidden; pointer-events: none; }
.st-team__quote { color: var(--st-ink-4); }
/* Статьи прижаты к низу блока; заголовок и дивайдер статичны, меняется только список */
.st-team__blog { width: 100%; max-width: 33em; margin-top: auto; padding-top: var(--st-s-16); }
.st-team__blog-title { padding-bottom: var(--st-s-12); border-bottom: 1px solid var(--st-line); font-size: var(--st-fs-sm); line-height: 1.3; font-weight: 500; }
.st-team__blog-lists { display: grid; margin-top: var(--st-s-12); }
.st-team__articles { grid-area: 1 / 1; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--st-s-8) var(--st-s-20); list-style: none; font-size: var(--st-fs-sm); line-height: 1.4; visibility: hidden; }
.st-team__articles.is-active { visibility: visible; }
/* Появление как у st-case */
@media (prefers-reduced-motion: no-preference) {
  .st-team__panel:not([hidden]) > *,
  .st-team__articles.is-active { animation: st-case-in .7s var(--st-ease) both; } /* было var(--t) — у команды не задана, анимация не шла */
  .st-team__articles.is-active { animation-delay: .1s; }
}

.st-person { display: flex; flex-direction: column; align-items: center; width: var(--st-avatar); text-align: center; }
.st-person__photo { display: block; width: var(--st-avatar); height: var(--st-avatar); margin-bottom: var(--st-s-12); }
.st-person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--st-r-sm);
  background: var(--st-bg);
  transition: transform .4s var(--st-ease);
}
.st-person__name,
.st-person__role { font-size: var(--st-fs-xs); line-height: 1.3; font-weight: 500; }
.st-person__name { transition: color .2s var(--st-ease); }
.st-person__role { color: var(--st-blue); }
.st-person:hover .st-person__name { color: var(--st-blue); }
.st-person:hover .st-person__photo img { transform: scale(.95); }
.st-person[aria-pressed="true"] .st-person__photo img { transform: scale(.89); }
.st-person[aria-pressed="true"]:hover .st-person__photo img { transform: scale(.86); }

/* ---------- st-strategies + st-format ---------- */
.st-strategies__tabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: var(--st-s-72); }
/* Глазик — справа, перед разделителем (order), текст забирает остальное место */
.st-strategies__tab { display: flex; align-items: center; gap: var(--st-s-20); padding-right: var(--st-s-28); text-align: left; color: var(--st-ink); }
.st-strategies__tab + .st-strategies__tab { padding-left: var(--st-s-28); border-left: 1px solid var(--st-line-2); }
.st-strategies__eye { order: 1; }
/* Приглушается только текст — разделитель и иконка остаются читаемыми */
.st-strategies__name { flex: 1; opacity: .32; transition: opacity .3s var(--st-ease), color .2s var(--st-ease); }
.st-strategies__tab:hover .st-strategies__name { color: var(--st-blue); opacity: 1; }
.st-strategies__tab[aria-pressed="true"] .st-strategies__name { opacity: 1; color: var(--st-ink); }
.st-strategies__tab[aria-pressed="true"] .st-strategies__eye { background: var(--st-ink); border-color: var(--st-ink); color: #fff; }
.st-strategies__tab-line { display: block; }
/* Панели стоят в одной ячейке грида: высота блока = высоте большей панели, переключение без скачка */
.st-strategies__panels { display: grid; }
.st-strategies__panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--st-s-16));
  transition: opacity .4s var(--st-ease), transform .5s var(--st-ease), visibility 0s .5s;
}
.st-strategies__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .5s var(--st-ease) .1s, transform .6s var(--st-ease) .1s, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .st-strategies__panel,
  .st-strategies__panel.is-active { transform: none; transition: opacity .2s linear, visibility 0s; }
}

.st-formats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--st-s-16); align-items: start; }
.st-format {
  display: flex;
  flex-direction: column;
  min-height: var(--st-format-h);
  padding: var(--st-s-20);
  border-radius: var(--st-r-md);
  background: var(--st-white);
}
.st-white .st-format { background: var(--st-bg); }
/* Бейслайн: карточки ряда делят строки сетки (subgrid) — заголовок, описание, разделитель и кнопка на одной линии.
   Последняя строка 1fr забирает свободное место, кнопка прижата к низу. */
.st-formats:has(> .st-format:not(.st-format--wide)) { grid-auto-rows: auto auto auto 1fr; align-items: stretch; }
.st-format:not(.st-format--wide) { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
.st-format__title { font-size: var(--st-fs-h6); line-height: 1.2; letter-spacing: -.01em; font-weight: 500; margin-bottom: var(--st-s-8); }
.st-format__when { font-size: var(--st-fs-text); line-height: 1.5; }
/* Под разделителем: «Реализация» и «Что на выходе» в одной ячейке — высота зоны = большему из двух, раскрытие без скачка */
.st-format__body {
  display: grid;
  margin-top: var(--st-s-16);
  padding-top: var(--st-s-16);
  border-top: 1px solid var(--st-line-2);
}
.st-format__col,
.st-format__more { grid-area: 1 / 1; transition: opacity .35s var(--st-ease), transform .45s var(--st-ease), visibility 0s; }
.st-format__col { display: grid; align-content: start; gap: var(--st-s-4); font-size: var(--st-fs-text); line-height: 1.4; }
.st-format__more { opacity: 0; visibility: hidden; transform: translateY(var(--st-s-8)); transition-delay: 0s, 0s, .45s; }
.st-format.is-open .st-format__col { opacity: 0; visibility: hidden; transform: translateY(calc(-1 * var(--st-s-8))); transition-delay: 0s, 0s, .45s; }
.st-format.is-open .st-format__more { opacity: 1; visibility: visible; transform: none; transition-delay: .1s, .1s, 0s; }
.st-format__label { color: var(--st-ink-4); }
.st-format__links { color: var(--st-blue); font-weight: 500; }
.st-format__links a,
.st-format__text a { transition: color .2s var(--st-ease); }
.st-format__links a:hover,
.st-format__text a:hover { color: var(--st-link); }
.st-format__text { font-size: var(--st-fs-text); line-height: 1.5; }
.st-format__text a { color: var(--st-blue); }
.st-format__h { margin-top: auto; align-self: end; padding-top: var(--st-s-24); font-size: var(--st-fs-sm); font-weight: 500; }
.st-format__btn { display: flex; align-items: center; justify-content: space-between; gap: var(--st-s-12); width: 100%; }
.st-format__btn:hover .st-plus { border-color: var(--st-blue); }
.st-format__btn[aria-expanded="true"] .st-plus { background: var(--st-ink); border-color: var(--st-ink); }
.st-format__btn[aria-expanded="true"] .st-plus::before { background: #fff; }
.st-format__btn[aria-expanded="true"] .st-plus::after { background: #fff; transform: translate(-50%, -50%) rotate(0deg); }
@media (prefers-reduced-motion: reduce) {
  .st-format__col,
  .st-format__more { transform: none !important; }
}

/* Широкая карточка: одна стратегия на всю ширину сетки (вкладка «Стратегия развития сервиса»).
   Колонки без gap, отступы симметричны — разделитель ровно по центру карточки (совпадает с разделителем вкладок).
   В обеих колонках заголовок сверху, контент прижат к нижней границе. */
.st-format--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: var(--st-s-32);
}
.st-format__main,
.st-format__out { display: flex; flex-direction: column; justify-content: space-between; gap: var(--st-s-32); }
.st-format__main { padding-right: var(--st-s-48); }
.st-format__out { padding-left: var(--st-s-28); border-left: 1px solid var(--st-line-2); }
.st-format--wide .st-format__title,
.st-format__out .st-format__label { margin: 0; font-size: var(--st-fs-h3); line-height: 1.2; letter-spacing: -.01em; font-weight: 500; }
.st-format--wide .st-format__when { max-width: 32em; }
.st-format__list { display: grid; gap: var(--st-s-20); }
.st-format__item { display: grid; gap: var(--st-s-4); }
.st-format__item-title { font-size: var(--st-fs-h6); line-height: 1.3; font-weight: 500; }
.st-format__item-text { font-size: var(--st-fs-text); line-height: 1.5; color: var(--st-ink-4); }

/* ---------- st-session + st-scheme + st-fact ---------- */
/* Ритм трёх этажей: линия → заголовок (крупно, новый смысловой блок) → схема (близко, иллюстрирует заголовок) → факты (крупно, отдельный этаж со своими линиями) */
.st-session__intro { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--st-s-32); margin-bottom: var(--st-s-96); }
.st-head--rule + .st-session__intro { margin-top: calc(var(--st-s-72) - var(--st-s-32)); } /* итого от линии = 72 (32 даёт margin st-head--rule) */
.st-session__intro .st-btn { flex-shrink: 0; }

.st-scheme {
  width: 100%;
  margin: 0 auto var(--st-s-64);
}
.st-scheme__cap { display: block; text-align: center; margin-bottom: var(--st-s-32); }

/* Три смыкающихся контурных круга в ряд. D = 100% / 2.6, перекрытие соседних = 0.2D (7.69% ширины ряда).
   Содержимое крайних кругов сдвинуто от зоны перекрытия паддингами (в % ширины ряда). */
.st-scheme__grid { display: flex; justify-content: center; }
.st-scheme__circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 38.46%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(142, 193, 240, .4);
}
.st-scheme__circle + .st-scheme__circle { margin-left: -7.69%; }
.st-scheme__circle { position: relative; text-align: center; }
/* паддинг симметричный — текст строго по центру круга; 6% ряда ≈ 15% диаметра, текст не заходит в зону перекрытия */
.st-scheme__circle { padding: 0 6%; }
/* Центр — ровная окружность; внутри вдоль её линии — размытая градиентная полоса, толщина которой мягко колеблется
   «звуковой волной» (JS, data-st-wave). Полоса обрезана по кругу, поэтому линия остаётся ровной. */
.st-scheme__circle--core { gap: var(--st-s-6); border-color: var(--st-sky); isolation: isolate; }
.st-scheme__wave { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.st-scheme__wave-band { fill: var(--st-sky); opacity: .35; }
.st-scheme__wave-band--echo { fill: var(--st-blue); opacity: .3; }
.st-scheme__circle--core::after { content: ""; position: absolute; inset: 18%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(43, 131, 232, .45) 0%, rgba(43, 131, 232, 0) 70%); }
.st-scheme__core-t { font-size: var(--st-fs-tab); line-height: 1; font-weight: 500; color: var(--st-sky); }
.st-scheme__core-l { font-size: var(--st-fs-text); line-height: 1.25; color: var(--st-white); }

.st-scheme__list { display: grid; gap: var(--st-s-8); }
.st-scheme__item { font-size: var(--st-fs-text); line-height: 1.3; text-wrap: balance; color: hsla(0, 0%, 100%, .6); }
.st-scheme__item--out { font-weight: 500; color: var(--st-white); }

@media (prefers-reduced-motion: no-preference) {
  .st-scheme__circle--core::after { animation: st-breathe 4s var(--st-ease) infinite alternate; }
}
@keyframes st-breathe { from { opacity: .5; transform: scale(.85); } to { opacity: 1; transform: scale(1.1); } }


.st-session__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--st-s-32); align-items: start; }
/* Факты: текст скрыт, раскрывается при наведении (hover-устройства) или по клику/тапу (is-open + aria-expanded).
   Место под текст зарезервировано (скрыт через opacity/visibility, а не схлопнут) — высота ряда = самому длинному тексту
   и не меняется при раскрытии. На ≤720 (одна колонка) — обычный аккордеон, иначе пустые зазоры.
   Заголовок — основной цвет, текст — второстепенный; у акцентного (--accent) заголовок sky, текст основной */
.st-fact { padding-top: var(--st-s-20); border-top: 1px solid hsla(0, 0%, 100%, .2); transition: border-color .3s var(--st-ease); }
.st-fact__btn { display: flex; align-items: center; justify-content: space-between; gap: var(--st-s-16); width: 100%; text-align: left; }
.st-fact__title { font-size: var(--st-fs-text); line-height: 1.3; font-weight: 500; color: var(--st-white); transition: color .2s var(--st-ease); }
.st-fact__eye {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--st-icon);
  height: var(--st-icon);
  border-radius: 50%;
  border: 1px solid hsla(0, 0%, 100%, .3);
  color: var(--st-white);
  transition: background .25s var(--st-ease), color .2s var(--st-ease), border-color .2s var(--st-ease);
}
.st-fact__eye svg { width: 40%; height: 40%; }
.st-fact__more { opacity: 0; visibility: hidden; transform: translateY(var(--st-s-8)); transition: opacity .3s var(--st-ease), transform .3s var(--st-ease), visibility .3s; }
.st-fact__more > div { overflow: hidden; }
.st-fact__text { padding-top: var(--st-s-12); }
.st-fact__text,
.st-fact__list { font-size: var(--st-fs-xs); line-height: 1.5; color: hsla(0, 0%, 100%, .6); }
.st-fact__list li { position: relative; padding-left: 1em; }
.st-fact__list li::before { content: "—"; position: absolute; left: 0; }
.st-fact.is-open .st-fact__more { grid-template-rows: 1fr; opacity: 1; visibility: visible; transform: none; }
.st-fact.is-open { border-color: hsla(0, 0%, 100%, .6); }
.st-fact.is-open .st-fact__eye { background: var(--st-white); border-color: var(--st-white); color: var(--st-ink); }
@media (hover: hover) {
  .st-fact:hover .st-fact__more { grid-template-rows: 1fr; opacity: 1; visibility: visible; transform: none; }
  .st-fact:hover { border-color: hsla(0, 0%, 100%, .6); }
  .st-fact:hover .st-fact__eye { background: var(--st-white); border-color: var(--st-white); color: var(--st-ink); }
}
.st-fact--accent,
.st-fact--accent:hover,
.st-fact--accent.is-open { border-color: var(--st-sky); }
.st-fact--accent .st-fact__title { color: var(--st-sky); }
.st-fact--accent .st-fact__text,
.st-fact--accent .st-fact__list { color: var(--st-white); }

/* ---------- st-routes (как мы работаем; размеры текста таймлайна — свои) ---------- */
/* Шапка маршрутов липнет к верху окна в пределах блока st-routes; пока она прилипла, основной навбар скрыт (JS, data-st-sticky).
   ::before — подложка цвета фона на всю ширину окна + градиент вниз, перекрывает уезжающий под шапку контент. */
.st-routes__bar {
  --st-bar-fade: var(--st-s-48);
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-block: var(--st-s-12);
  margin-bottom: var(--st-s-80);
}
.st-routes__bar::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw) calc(-1 * var(--st-bar-fade));
  z-index: -1;
  background: linear-gradient(to bottom, var(--st-bg) calc(100% - var(--st-bar-fade)), transparent);
  pointer-events: none;
}
/* --st-routes-indent: отступ текста от линии таймлайна = отступ заголовка вкладки от начала колонки.
   Колонки шапки и таймлайна совпадают (без column-gap), поэтому заголовки вкладок и тексты шагов на одной вертикали,
   а разделители вкладок продолжаются линиями таймлайна. */
.st-routes { --st-routes-indent: var(--st-s-32); } /* = отступ в st-approach */
/* Шапка ближе к верхнему разделителю: компенсируем часть margin у st-head--rule (padding шапки нужен, когда она прилипла) */
.st-head--rule + .st-routes { margin-top: calc(-1 * var(--st-s-20)); }
/* Шапка отпускается, только когда весь таймлайн уже ушёл под неё: продлеваем контент блока (контейнер sticky)
   распоркой ::after на высоту шапки; отрицательный margin возвращает раскладку. Padding не подходит —
   sticky не заходит в padding родителя. */
.st-routes { --st-routes-bar-h: calc(2 * var(--st-s-12) + 2 * var(--st-s-4) + max(var(--st-icon), var(--st-fs-tab) * 1.1)); }
.st-routes::after { content: ""; display: block; height: var(--st-routes-bar-h); margin-bottom: calc(-1 * var(--st-routes-bar-h)); }
.st-routes__tab { display: flex; align-items: center; gap: var(--st-s-16); padding: var(--st-s-4) var(--st-s-24) var(--st-s-4) var(--st-routes-indent); color: var(--st-ink); }
.st-routes__tab + .st-routes__tab { border-left: 1px solid var(--st-line-2); }
.st-routes__eye,
.st-strategies__eye {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--st-icon);
  height: var(--st-icon);
  border-radius: 50%;
  border: 1px solid var(--st-line-2);
  color: var(--st-ink-3);
  transition: background .25s var(--st-ease), color .2s var(--st-ease), border-color .2s var(--st-ease);
}
.st-routes__eye svg,
.st-strategies__eye svg { width: 40%; height: 40%; }
.st-routes__eye { order: 1; } /* справа, перед разделителем */
.st-routes__name { flex: 1; font-size: var(--st-fs-tab); line-height: 1.1; letter-spacing: -.02em; font-weight: 500; opacity: .4; transition: opacity .3s var(--st-ease), color .2s var(--st-ease); }
.st-routes__count { flex-shrink: 0; padding: var(--st-s-6) var(--st-s-10); border-radius: 999px; border: 1px solid var(--st-line-2); font-size: var(--st-fs-2xs); line-height: 1; color: var(--st-ink-3); }
.st-routes__tab:hover .st-routes__name { color: var(--st-blue); }
.st-routes--session .st-routes__tab--session .st-routes__name,
.st-routes--all .st-routes__tab--all .st-routes__name,
.st-routes--strategy .st-routes__tab--strategy .st-routes__name { opacity: 1; }
.st-routes--session .st-routes__tab--session .st-routes__eye,
.st-routes--all .st-routes__tab--all .st-routes__eye,
.st-routes--strategy .st-routes__tab--strategy .st-routes__eye { background: var(--st-ink); border-color: var(--st-ink); color: #fff; }
/* Переключение глазика: заливка плавно (transition выше) + «моргание» иконки при активации */
@keyframes st-eye-blink {
  0%, 100% { transform: scaleY(1); }
  45% { transform: scaleY(.1); }
}
@media (prefers-reduced-motion: no-preference) {
  .st-routes--session .st-routes__tab--session .st-routes__eye svg,
  .st-routes--all .st-routes__tab--all .st-routes__eye svg,
  .st-routes--strategy .st-routes__tab--strategy .st-routes__eye svg,
  .st-strategies__tab[aria-pressed="true"] .st-strategies__eye svg { animation: st-eye-blink .45s var(--st-ease); }
}

.st-routes__grid { position: relative; }
.st-routes__lines { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
.st-routes__line { fill: none; stroke: var(--st-blue); stroke-width: 2; transition: stroke .3s var(--st-ease); }
.st-routes--session .st-routes__line--strategy,
.st-routes--strategy .st-routes__line--session { stroke: var(--st-line); }

.st-routes__list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--st-s-56) 0; }
.st-routes__step { position: relative; padding-left: var(--st-routes-indent); padding-right: var(--st-s-24); align-self: start; transition: opacity .35s var(--st-ease); }
.st-routes--session .st-routes__step--strategy,
.st-routes--strategy .st-routes__step--session { opacity: .32; }
.st-routes__dot {
  position: absolute;
  /* центр точки — на середине первой строки заголовка */
  top: calc(var(--st-fs-2xs) * 1.4 + var(--st-s-6) + var(--st-fs-h5) * .6 - var(--st-dot) / 2);
  left: 0;
  width: var(--st-dot);
  height: var(--st-dot);
  border-radius: 50%;
  background: var(--st-blue);
  transform: translateX(-50%);
}
.st-routes__step--session .st-routes__dot { background: var(--st-bg); border: 2px solid var(--st-blue); }
.st-routes__n { display: flex; align-items: baseline; gap: var(--st-s-10); margin-bottom: var(--st-s-6); font-size: var(--st-fs-2xs); line-height: 1.4; letter-spacing: .04em; color: rgba(26, 46, 95, .45); font-variant-numeric: tabular-nums; }
.st-routes__n-session { display: none; }
.st-routes--session .st-routes__n-session { display: inline; }
.st-routes--session .st-routes__n-strategy { display: none; }
.st-routes__final { color: var(--st-blue); text-transform: uppercase; letter-spacing: .08em; }
.st-routes__title { font-size: var(--st-fs-h5); line-height: 1.2; letter-spacing: -.01em; font-weight: 500; margin-bottom: var(--st-s-8); }
.st-routes__text { max-width: 21em; font-size: var(--st-fs-text); line-height: 1.5; color: var(--st-ink-3); }
.st-routes__result { margin-top: var(--st-s-6); font-size: var(--st-fs-sm); line-height: 1.5; color: var(--st-blue); }

/* ---------- st-approach ---------- */
/* Сетка в третях, как у таймлайна st-routes: заголовок во 2-й колонке, текст в 3-й,
   оба с тем же отступом от начала колонки, что и текст шагов (--st-routes-indent) */
.st-approach__list { display: grid; border-top: 1px solid var(--st-line-2); padding-left: calc(100% / 3); }
.st-approach__item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-block: var(--st-s-24); }
.st-approach__h,
.st-approach__text { padding-left: var(--st-s-32); }
.st-approach__text { padding-right: var(--st-s-24); }
.st-approach__item + .st-approach__item { border-top: 1px solid var(--st-line-2); }
.st-approach__kicker { font-size: var(--st-fs-text); line-height: 1.5; color: var(--st-blue); margin-bottom: var(--st-s-4); }

/* ---------- st-offer (что вы получите / сколько стоит) ---------- */
.st-offer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--st-s-20);
  padding: var(--st-s-32) var(--st-pad);
  aspect-ratio: 16 / 9;
  background: var(--st-grad-sky);
}
/* фон: фото + параллакс (--shift пишет JS); картинка увеличена на 14% (запас ±7%), сдвиг ±6% */
.st-offer__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.st-offer__media img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .st-offer__media img { transform: translate3d(0, calc(var(--shift, 0) * 6%), 0) scale(1.14); will-change: transform; }
}
.st-offer__frame {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  /* оси: четыре отрезка до края крестика */
  --gap: calc(var(--st-cross) / 2);
  --axis: rgba(26, 46, 95, .5);
}
.st-offer__cross { inset: 50% auto auto 50%; transform: translate(-50%, -50%); z-index: 1; }
.st-offer__cell { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--st-s-24); }
.st-offer__cell--tl { padding: 0 var(--st-s-30) var(--st-s-30) 0; }
.st-offer__cell--tr { padding: 0 0 var(--st-s-30) var(--st-s-30); }
.st-offer__cell--bl { padding: var(--st-s-30) var(--st-s-30) 0 0; }
.st-offer__cell--br { padding: var(--st-s-30) 0 0 var(--st-s-24); justify-content: flex-start; }
.st-offer__cell--tl::after,
.st-offer__cell--tr::after { content: ""; position: absolute; bottom: 0; height: 1px; background: var(--axis); }
.st-offer__cell--tl::after { left: 0; right: var(--gap); }
.st-offer__cell--tr::after { left: var(--gap); right: 0; }
.st-offer__cell--tr::before,
.st-offer__cell--br::before { content: ""; position: absolute; left: 0; width: 1px; background: var(--axis); }
.st-offer__cell--tr::before { top: 0; bottom: var(--gap); }
.st-offer__cell--br::before { top: var(--gap); bottom: 0; }

.st-offer__list { display: grid; gap: var(--st-s-6); justify-items: start; }
.st-offer__item { position: relative; }
/* пунктирное подчёркивание — подсказка, что у пункта есть описание */
.st-offer__link {
  font-size: var(--st-fs-text);
  line-height: 1.3;
  text-decoration: underline dotted var(--st-line-2);
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  transition: color .2s var(--st-ease), opacity .2s var(--st-ease), text-decoration-color .2s var(--st-ease);
}
.st-offer__link--accent { font-weight: 500; }
/* наведение: у пункта сплошное подчёркивание, остальные приглушены (синий на голубом фоне читается плохо) */
.st-offer__list:has(.st-offer__item:hover) .st-offer__link,
.st-offer__list:has(.st-offer__link:focus-visible) .st-offer__link { opacity: .45; }
.st-offer__list .st-offer__item:hover .st-offer__link,
.st-offer__list .st-offer__item .st-offer__link:focus-visible { opacity: 1; text-decoration-style: solid; text-decoration-color: currentColor; }

/* тултип: справа от пункта, «стекло» как у st-progress */
.st-offer__tip {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--st-s-16));
  z-index: 2;
  width: max-content;
  max-width: 22em;
  padding: var(--st-s-12) var(--st-s-16);
  border-radius: var(--st-r-sm);
  border: 1px solid var(--st-line);
  background: hsla(0, 0%, 100%, .82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--st-shadow);
  font-size: var(--st-fs-sm);
  line-height: 1.4;
  color: var(--st-ink-2);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(calc(var(--st-s-8) * -1), -50%);
  transition: opacity .25s var(--st-ease), transform .3s var(--st-ease), visibility 0s .3s;
}
.st-offer__item:hover .st-offer__tip,
.st-offer__link:focus-visible + .st-offer__tip {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition-delay: 0s;
}

.st-offer__prices { container-type: inline-size; display: flex; justify-content: space-between; gap: var(--st-s-24) var(--st-s-40); }
.st-offer__price { min-width: 0; font-size: var(--st-fs-text); }
.st-offer__value {
  display: flex;
  align-items: baseline;
  gap: .12em;
  /* две цены в строку ≈ 9em + зазор: кегль не больше ширины ячейки, иначе цифра вылезает за край */
  font-size: min(var(--st-fs-num-md), (100cqi - var(--st-s-40)) / 9);
  line-height: .9;
  letter-spacing: -.025em;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.st-offer__unit { font-size: .3em; line-height: 1; letter-spacing: 0; }
.st-offer__name { margin-top: var(--st-s-24); font-size: var(--st-fs-h3); line-height: 1.15; font-weight: 500; letter-spacing: -.02em; }
.st-offer__note { max-width: 18em; margin-top: var(--st-s-12); line-height: 1.5; font-weight: 500; letter-spacing: -.012em; color: rgba(26, 46, 95, .4); }
.st-offer__btn { width: 100%; }

/* ---------- st-faq ---------- */
.st-faq__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--st-s-56) var(--st-s-24); align-items: start; padding-top: var(--st-s-48); }
.st-faq__aside { display: flex; flex-direction: column; gap: var(--st-s-64); padding-top: var(--st-s-24); }
.st-contact { display: flex; flex-direction: column; gap: var(--st-s-24); }
.st-contact .st-text { max-width: 26em; }
.st-contact__links { display: flex; align-items: center; gap: var(--st-s-10); }
.st-contact .st-btn { min-height: calc(var(--st-btn-h) - var(--st-s-6)); }
.st-contact__tg {
  display: grid;
  place-items: center;
  width: calc(var(--st-btn-h) - var(--st-s-6));
  height: calc(var(--st-btn-h) - var(--st-s-6));
  border-radius: 50%;
  background: var(--st-white);
  color: var(--st-ink);
  transition: color .2s var(--st-ease);
}
.st-contact__tg svg { width: 40%; height: 40%; }
.st-contact__tg:hover { color: var(--st-blue); }

.st-faq { border-bottom: 1px solid var(--st-line-2); }
.st-faq__item { border-top: 1px solid var(--st-line-2); }
.st-faq__h { font-size: var(--st-fs-h6); line-height: 1.35; font-weight: 400; }
.st-faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--st-s-32); width: 100%; padding: var(--st-s-24) 0; transition: color .2s var(--st-ease); }
.st-faq__q:hover { color: var(--st-blue); }
.st-faq__q .st-plus { border-color: transparent; }
.st-faq__q[aria-expanded="true"] .st-plus { background: var(--st-ink); border-color: var(--st-ink); }
.st-faq__q[aria-expanded="true"] .st-plus::before { background: #fff; }
.st-faq__q[aria-expanded="true"] .st-plus::after { background: #fff; transform: translate(-50%, -50%) rotate(0deg); }
.st-faq__a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .45s var(--st-ease), visibility .45s; }
.st-faq__a > div { overflow: hidden; }
.st-faq__a p { padding: 0 var(--st-s-72) var(--st-s-28) 0; font-size: var(--st-fs-text); line-height: 1.5; color: var(--st-ink-2); }
.st-faq__item.is-open .st-faq__a { grid-template-rows: 1fr; visibility: visible; }

/* ---------- st-progress (прогресс чтения + якоря разделов) ---------- */
.st-progress {
  position: fixed;
  inset: auto 0 0;
  z-index: 150;
  pointer-events: none;
  /* «стекло» на весь блок — вместе с полосой прогресса, без просвета под ней */
  border-top: 1px solid var(--st-line);
  background: hsla(0, 0%, 100%, .82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: opacity .4s var(--st-ease), transform .4s var(--st-ease), visibility 0s 0s;
}
/* На hero прогресса нет: JS ставит is-hidden (+ inert), пока не началась вторая секция */
.st-progress.is-hidden {
  opacity: 0;
  transform: translateY(100%);
  visibility: hidden;
  transition: opacity .4s var(--st-ease), transform .4s var(--st-ease), visibility 0s .4s;
}
/* Плашка-«стекло» на всю ширину, прижата к низу. Список якорей лежит над
   строкой «Разделы» и раскрывается вверх (grid-template-rows 0fr → 1fr). */
.st-progress__inner {
  pointer-events: auto;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  padding: var(--st-s-4) var(--st-pad);
}
.st-progress__hint,
.st-progress__link {
  display: inline-flex;
  align-items: center;
  gap: var(--st-s-8);
  min-height: var(--st-icon);
  font-size: var(--st-fs-xs);
  line-height: 1;
  white-space: nowrap;
  color: var(--st-ink);
  transition: color .2s var(--st-ease), background .25s var(--st-ease), border-color .2s var(--st-ease), opacity .3s var(--st-ease), transform .4s var(--st-ease);
}
.st-progress__hint { flex-shrink: 0; font-weight: 500; }
.st-progress__hint:hover { color: var(--st-blue); }
.st-progress__link {
  padding: 0 var(--st-s-14);
  border: 1px solid var(--st-line-2);
  border-radius: 999px;
}
.st-progress__count { color: var(--st-ink-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.st-progress__chev { width: .7em; height: .7em; transition: transform .4s var(--st-ease); }
.st-progress__list {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  visibility: hidden;
  transition: grid-template-rows .45s var(--st-ease), visibility 0s .45s;
}
.st-progress__links { display: flex; flex-wrap: wrap; gap: var(--st-s-8); min-height: 0; overflow: hidden; }
/* отступ над первой строкой якорей — внутри обрезаемой области, чтобы схлопывался вместе со списком */
.st-progress__links::before { content: ""; flex-basis: 100%; height: var(--st-s-4); }
.st-progress__link { opacity: 0; transform: translateY(100%); }
.st-progress__link:hover { color: var(--st-blue); }
.st-progress__link[aria-current="true"] { background: var(--st-ink); border-color: var(--st-ink); color: #fff; }
.st-progress__n { font-size: var(--st-fs-2xs); opacity: .6; font-variant-numeric: tabular-nums; }

/* полоса прогресса; увеличенная зона наведения над ней */
.st-progress__track {
  position: relative;
  pointer-events: auto;
  height: 4px;
  background: var(--st-line);
  cursor: pointer;
}
.st-progress__track::before { content: ""; position: absolute; inset: calc(var(--st-s-12) * -1) 0 0; }
.st-progress__bar {
  position: absolute;
  inset: 0;
  background: var(--st-blue);
  transform-origin: 0 50%;
  transform: scaleX(0); /* ширину задаёт JS через transform — только композитинг */
  will-change: transform;
}

/* раскрытие: наведение на полосу/подсказку, фокус или is-open (тап) */
.st-progress:hover .st-progress__list,
.st-progress:focus-within .st-progress__list,
.st-progress.is-open .st-progress__list { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.st-progress:hover .st-progress__link,
.st-progress:focus-within .st-progress__link,
.st-progress.is-open .st-progress__link { opacity: 1; transform: none; }
.st-progress:hover .st-progress__chev,
.st-progress.is-open .st-progress__chev { transform: rotate(180deg); }
.st-progress__link:nth-child(2) { transition-delay: .03s; }
.st-progress__link:nth-child(3) { transition-delay: .06s; }
.st-progress__link:nth-child(4) { transition-delay: .09s; }
.st-progress__link:nth-child(5) { transition-delay: .12s; }
.st-progress__link:nth-child(6) { transition-delay: .15s; }
.st-progress__link:nth-child(7) { transition-delay: .18s; }
.st-progress__link:nth-child(8) { transition-delay: .21s; }
.st-progress__link:nth-child(9) { transition-delay: .24s; }
.st-progress__link:nth-child(10) { transition-delay: .27s; }
.st-progress__link:nth-child(11) { transition-delay: .3s; }

/* подсказка: стрелка «подпрыгивает» пару раз после загрузки */
@media (prefers-reduced-motion: no-preference) {
  .st-progress__chev { animation: st-nudge 1.2s var(--st-ease) .8s 3; }
}
@keyframes st-nudge {
  0%, 100% { translate: 0 0; }
  40% { translate: 0 -3px; }
}

/* ---------- Бриф: заявка с выбором пути (модалка, <dialog>) ----------
   Выбор в опциях и чипах — нативный :checked у input (ARIA даёт сам input).
   Шаги переключаются атрибутом hidden. */
.st-brief {
  width: min(100% - var(--st-pad) * 2, var(--st-brief-w));
  max-width: none;
  max-height: calc(100dvh - var(--st-pad) * 2);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--st-r-lg);
  background: var(--st-white);
  color: var(--st-ink);
  overflow: auto;
  overscroll-behavior: contain;
}
.st-brief::backdrop { background: rgba(26, 46, 95, .48); backdrop-filter: blur(6px); }
.st-brief :where(fieldset) { margin: 0; padding: 0; border: 0; min-width: 0; }
.st-brief :where(legend) { padding: 0; }
.st-brief [hidden] { display: none; }

.st-brief__form { display: flex; flex-direction: column; padding: var(--st-s-32); }

/* Ритм по близости: внутри группы 6–12, между группами 24–32, между зонами
   (шапка / шаг / действия) 32–40. */
.st-brief__head { display: flex; align-items: center; gap: var(--st-s-16); }
.st-brief__label { margin-right: auto; }
.st-brief__count { font-variant-numeric: tabular-nums; }
.st-brief__back {
  margin-right: auto;
  font-size: var(--st-fs-2xs);
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: color .2s var(--st-ease);
}
.st-brief__back::before { content: "←"; margin-right: var(--st-s-6); }
.st-brief__back:hover { color: var(--st-blue); }
.st-brief__close { display: flex; margin-block: calc(var(--st-s-8) * -1); }
.st-brief__close .st-plus { transform: rotate(45deg); }
.st-brief__close:hover .st-plus { border-color: var(--st-blue); }

.st-brief__track { height: 2px; margin-block: var(--st-s-20) var(--st-s-40); background: var(--st-line); }
.st-brief__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--st-blue);
  transform-origin: 0 50%;
  transform: scaleX(.33);
  transition: transform .45s var(--st-ease);
}

.st-brief__step { display: flex; flex-direction: column; gap: var(--st-s-32); }
/* legend не участвует в gap fieldset — отступ до контента задаём ему самому */
.st-brief__legend { display: flex; flex-direction: column; gap: var(--st-s-8); width: 100%; margin-bottom: var(--st-s-24); outline: 0; }
.st-brief__title { font-size: var(--st-fs-h3); line-height: 1.12; letter-spacing: -.02em; outline: 0; }

/* Шаг 1: карточки путей */
.st-brief__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--st-s-12); }
.st-brief__option {
  display: flex;
  flex-direction: column;
  gap: var(--st-s-8);
  min-height: 100%;
  padding: var(--st-s-20);
  border: 1px solid transparent;
  border-radius: var(--st-r-md);
  background: var(--st-bg);
  cursor: pointer;
  transition: background .25s var(--st-ease), border-color .2s var(--st-ease);
}
.st-brief__option--plain { background: none; border-color: var(--st-line-2); border-style: dashed; }
.st-brief__option:has(:checked) { background: var(--st-sky-3); border-color: var(--st-blue); border-style: solid; }
.st-brief__option:has(:focus-visible),
.st-brief__chip:has(:focus-visible) { outline: 2px solid var(--st-blue); outline-offset: 3px; }
.st-brief__option-n { margin-bottom: var(--st-s-8); font-size: var(--st-fs-2xs); color: var(--st-blue); font-variant-numeric: tabular-nums; }
.st-brief__option-title { font-size: var(--st-fs-h6); line-height: 1.2; font-weight: 500; transition: color .2s var(--st-ease); }
.st-brief__option:hover .st-brief__option-title { color: var(--st-blue); }
.st-brief__option-text { font-size: var(--st-fs-sm); line-height: 1.45; color: var(--st-ink-2); }
.st-brief__option-price { margin-top: auto; padding-top: var(--st-s-8); font-size: var(--st-fs-sm); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Шаг 2: чипы (checkbox / radio) */
.st-brief__chips { display: flex; flex-wrap: wrap; gap: var(--st-s-8); }
.st-brief__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--st-s-8);
  padding: var(--st-s-10) var(--st-s-16);
  border: 1px solid var(--st-line-2);
  border-radius: 999px;
  font-size: var(--st-fs-sm);
  line-height: 1.25;
  cursor: pointer;
  transition: background .25s var(--st-ease), color .2s var(--st-ease), border-color .2s var(--st-ease);
}
.st-brief__chip:hover { color: var(--st-blue); border-color: var(--st-blue); }
.st-brief__chip:has(:checked) { background: var(--st-ink); border-color: var(--st-ink); color: #fff; }
.st-brief__chip-n { font-size: var(--st-fs-2xs); color: var(--st-blue); font-variant-numeric: tabular-nums; }
.st-brief__chip:has(:checked) .st-brief__chip-n { color: var(--st-sky); }

.st-brief__q-title { margin-bottom: var(--st-s-12); font-size: var(--st-fs-text); font-weight: 500; }
.st-brief__result { margin-top: calc(var(--st-s-8) * -1); padding: var(--st-s-20); border-radius: var(--st-r-md); background: var(--st-sky-3); }
.st-brief__result-title { font-size: var(--st-fs-h6); font-weight: 500; color: var(--st-link); }
.st-brief__result-text { margin-top: var(--st-s-6); font-size: var(--st-fs-sm); color: var(--st-ink-2); }

/* Шаг 3: контакты */
.st-brief__edit { font-size: inherit; }
.st-brief__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--st-s-20) var(--st-s-12); }
.st-brief__field { display: flex; flex-direction: column; gap: var(--st-s-8); }
.st-brief__field--wide { grid-column: 1 / -1; }
.st-brief__field-label { font-size: var(--st-fs-xs); color: var(--st-ink-3); }
.st-brief__optional { color: var(--st-ink-4); }
.st-brief__input {
  width: 100%;
  min-height: var(--st-btn-h);
  padding: var(--st-s-12) var(--st-s-16);
  border: 1px solid transparent;
  border-radius: var(--st-r-sm);
  background: var(--st-bg);
  font: inherit;
  font-size: var(--st-fs-text);
  color: var(--st-ink);
  transition: border-color .2s var(--st-ease), background .25s var(--st-ease);
}
.st-brief__input::placeholder { color: var(--st-ink-4); }
.st-brief__input:focus { border-color: var(--st-blue); background: var(--st-white); outline: 0; }
.st-brief__input:user-invalid { border-color: var(--st-blue-3); }
.st-brief__input--area { resize: vertical; }
.st-brief__consent { display: flex; align-items: flex-start; gap: var(--st-s-10); font-size: var(--st-fs-xs); line-height: 1.45; color: var(--st-ink-3); cursor: pointer; }
.st-brief__consent input { flex-shrink: 0; width: 1.1em; height: 1.1em; margin: .15em 0 0; accent-color: var(--st-ink); }
.st-brief__error { font-size: var(--st-fs-sm); color: var(--st-ink-2); }

.st-brief__done { gap: var(--st-s-12); padding-bottom: var(--st-s-24); }

.st-brief__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--st-s-12); margin-top: var(--st-s-40); }
.st-brief__actions .st-btn:disabled { opacity: .4; cursor: not-allowed; }
.st-brief__actions .st-btn.is-loading { opacity: .6; cursor: progress; }

@media (prefers-reduced-motion: no-preference) {
  .st-brief[open] { animation: st-brief-in .45s var(--st-ease); }
  .st-brief[open]::backdrop { animation: st-brief-fade .3s var(--st-ease); }
}
@keyframes st-brief-in { from { opacity: 0; transform: translateY(var(--st-s-24)); } }
@keyframes st-brief-fade { from { opacity: 0; } }

/* Вход в бриф из других блоков */
.st-routes__cta { display: flex; justify-content: center; margin-top: var(--st-s-48); }

/* =========================================================================
   Адаптив: 1280 / 1100 / 860 / 720 / 400
   ========================================================================= */

@media (max-width: 1280px) {
  .st-formats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-routes__tab { gap: var(--st-s-10); padding-right: var(--st-s-12); }
}

@media (max-width: 1100px) {
  /* круги меньше — текст мельче и дальше от зон перекрытия */
  .st-scheme__circle { padding: 0 7.5%; }
  .st-scheme__item,
  .st-scheme__core-l { font-size: var(--st-fs-xs); }

  .st-hl__detail { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .st-hl__detail .st-hl__logo { display: none; }
  .st-hl__flow { grid-column: auto; grid-row: auto; }
  .st-head { grid-template-columns: minmax(0, 1fr); }

  .st-hero__grid { grid-template-rows: none; }
  .st-hero__top,
  .st-hero__bottom { grid-template-columns: minmax(0, 1fr); }
  .st-hero__top { grid-template-rows: none; row-gap: var(--st-s-56); }
  .st-hero__tag,
  .st-hero__title,
  .st-hero__stat { grid-column: 1; grid-row: auto; }
  .st-hero__title { padding-right: 0; }
  .st-hero__stat { padding-left: 0; }
  .st-hero__cross,
  .st-hero__top::before,
  .st-hero__bottom::before { display: none; }
  .st-hero__top::after { background: var(--st-line-2); }
  .st-hero { min-height: 0; }
  .st-hero__aside { padding: var(--st-s-32) 0 0; }
  .st-hero__index { padding: var(--st-s-48) 0 var(--st-s-56); }

  .st-logos__wrap { grid-template-columns: minmax(0, 1fr); }
  .st-logos__wrap::before { display: none; }
  .st-logos__main { min-height: 0; padding-right: 0; }
  .st-logos__cases { padding: var(--st-s-48) 0 0; }

  .st-situations { grid-template-columns: minmax(0, 1fr); }
  .st-situations__title { position: static; }

  .st-team { grid-template-columns: minmax(0, 1fr); }
  .st-team__shot img { aspect-ratio: 4 / 3; }
  .st-team__body { padding-top: var(--st-s-48); }
  .st-team__people { margin-top: var(--st-s-48); }

  .st-session__intro { flex-direction: column; }
  .st-session__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .st-head--rule + .st-routes { margin-top: 0; }
  .st-routes::after { display: none; }
  .st-approach__list { padding-left: 0; }
  .st-approach__h { padding-left: 0; }
  .st-routes__bar { position: relative; grid-template-columns: minmax(0, 1fr); gap: var(--st-s-12); padding-block: 0; margin-bottom: var(--st-s-48); }
  .st-routes__bar::before { display: none; }
  .st-routes__tab { padding-left: 0; }
  .st-routes__tab + .st-routes__tab { border-left: 0; }
  .st-routes__list { grid-template-columns: minmax(0, 1fr); gap: var(--st-s-40); padding-left: var(--st-s-8); }
  .st-routes__step { grid-column: auto !important; grid-row: auto !important; }

  .st-faq__wrap { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .st-faq__aside { gap: var(--st-s-32); padding-top: 0; }

  .st-offer { aspect-ratio: auto; }
  .st-offer__frame { grid-template-rows: auto auto; }
  .st-offer__cell--tl { gap: var(--st-s-48); }
}

@media (max-width: 860px) {
  .st-format--wide { grid-template-columns: minmax(0, 1fr); gap: var(--st-s-32); padding: var(--st-s-20); }
  .st-format__main { padding-right: 0; }
  .st-format__out { padding-left: 0; border-left: 0; }
  .st-hl__face { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .st-hl__stat { grid-column: 1; grid-row: 2; }
  .st-hl__logo { grid-row: 3; }
  .st-hl__flow { grid-template-columns: minmax(0, 1fr); }
  /* на узких экранах кнопка уходит в правый нижний угол, чтобы не наезжать на тип кейса */
  .st-hl__go { align-self: end; }
  .st-hl__arrow { top: auto; bottom: var(--st-s-40); }

  .st-strategies__tabs { grid-template-columns: minmax(0, 1fr); gap: var(--st-s-16); }
  .st-strategies__tab + .st-strategies__tab { padding-left: 0; border-left: 0; }

  /* круги в столбик, перекрытие по вертикали */
  .st-scheme__grid { flex-direction: column; align-items: center; }
  .st-scheme__circle { flex: none; width: min(100%, 22rem); padding: 0 var(--st-s-24); }
  .st-scheme__circle + .st-scheme__circle { margin: calc(min(100%, 22rem) * -.2) 0 0; }


  .st-approach__item { grid-template-columns: minmax(0, 1fr); gap: var(--st-s-12); }
  .st-approach__text { padding-left: 0; }

  .st-offer__frame { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .st-offer__cross,
  .st-offer__cell--tr,
  .st-offer__cell--bl,
  .st-offer__cell--tl::after,
  .st-offer__cell--br::before { display: none; }
  .st-offer__cell--tl { padding: 0 0 var(--st-s-32); border-bottom: 1px solid var(--axis); }
  .st-offer__cell--br { padding: var(--st-s-32) 0 0; }
  .st-offer__tip { top: calc(100% + var(--st-s-6)); left: 0; max-width: min(22em, calc(100vw - var(--st-pad) * 2)); transform: translateY(calc(var(--st-s-8) * -1)); }
  .st-offer__item:hover .st-offer__tip,
  .st-offer__link:focus-visible + .st-offer__tip { transform: none; }
}

@media (max-width: 720px) {
  .st-offer__prices { flex-direction: column; }
  .st-offer__value { font-size: var(--st-fs-num-md); }
  .st-hl__face,
  .st-hl__detail { padding-block: var(--st-s-32); }
  .st-hl__go { margin-block: var(--st-s-32); }
  .st-hl__arrow { right: var(--st-pad); bottom: var(--st-s-32); }
  .st-actions,
  .st-actions .st-btn,
  .st-session__intro .st-btn { width: 100%; }
  .st-contact__links .st-btn { flex: 1; }

  .st-formats { grid-template-columns: minmax(0, 1fr); }
  .st-format { min-height: 0; }


  .st-session__facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .st-fact { padding-block: var(--st-s-16); }
  .st-fact__more { display: grid; grid-template-rows: 0fr; opacity: 1; transform: none; transition: grid-template-rows .45s var(--st-ease), visibility .45s; }

  .st-faq__a p { padding-right: 0; }

  .st-hero__facts { grid-template-columns: minmax(0, 1fr); row-gap: var(--st-s-24); }


  /* бриф — шторка снизу, всё в одну колонку */
  .st-brief { width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: var(--st-r-lg) var(--st-r-lg) 0 0; }
  .st-brief__form { padding: var(--st-s-24) var(--st-pad); }
  .st-brief__options,
  .st-brief__fields { grid-template-columns: minmax(0, 1fr); }
  .st-brief__actions .st-btn { flex: 1; }
}

@media (max-width: 400px) {
  .st-team__people { gap: var(--st-s-16); }
}