/* ============================================================================
   Навигационная консультация — деловая версия для собственников и руководителей.
   Порядок и смысл блоков — со страницы-основы zerocoder.ru/career-consultation.
   Сетка, поля, autoscale и подвал — с sites.zerocoder.ru/svoy-ii-kontur-sep26.

   Стилистика: светлая основа (#EEF1F5), насыщенный синий как акцент,
   тёмно-синий — только для отдельных контрастных секций. Три типа секций:
   .sec (светлая), .sec--soft (голубоватая подложка), .sec--dark (контрастная).
   Цвета внутри блоков не зашиты: секция задаёт набор токенов --s-*,
   компоненты красятся только через них.
   Шрифт один — Manrope.
   ============================================================================ */

/* ============================================================
   AUTOSCALE — весь макет задан в rem и пропорционально
   масштабируется по ширине экрана начиная с 1400px.
   ============================================================ */
html { font-size: 16px; }
@media (min-width: 1400px) { html { font-size: min(1.1428vw, 21px); } }
@media (max-width: 1023px)  { html { font-size: 15.5px; } }
@media (max-width: 600px)   { html { font-size: 15px; } }
@media (max-width: 380px)   { html { font-size: 14.2px; } }

/* ============================================================
   ПАЛИТРА
   ============================================================ */
:root {
  --navy:    #002158;   /* глубокий тёмно-синий: тёмные секции и текст */
  --blue-d:  #163BAC;   /* насыщенный синий */
  --blue:    #163BAC;   /* основной яркий синий: кнопки и акценты */
  --blue-lt: #2B4FC0;   /* светлый акцентный синий */
  --blue-s:  #7C93D4;   /* мягкий голубой */
  --mist:    #E4E9F0;   /* очень светлый голубой */
  --bg:      #EEF1F5;   /* светлый фон */
  --white:   #ffffff;

  /* скругления плашек и карточек: 10–15px */
  --r-xl: 0.9375rem;
  --r-lg: 0.75rem;
  --r-md: 0.625rem;

  /* поля внутри плашки первого экрана; секции повторяют их,
     поэтому весь контент стоит по одной вертикали */
  --edge:   0.75rem;
  --gutter: clamp(1.25rem, 2.6vw, 2.5rem);
  --page:   110rem;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

@media (max-width: 600px) { :root { --gutter: 0.75rem; } }

/* ------------------------------------------------------------------
   Секционные токены. Светлая секция — значение по умолчанию,
   .sec--dark переопределяет их. Один и тот же компонент работает
   и на светлом, и на тёмном фоне.
   ------------------------------------------------------------------ */
.sec, .panel-sec, body {
  --s-ink:     var(--navy);
  --s-ink2:    rgba(0, 33, 88, .72);
  --s-ink3:    rgba(0, 33, 88, .52);
  --s-acc:     var(--blue-d);
  --s-card:    var(--white);
  --s-card-2:  #F4F6F9;
  --s-line:    rgba(22, 59, 172, .16);
  --s-line-2:  rgba(22, 59, 172, .32);
  --s-wash:    rgba(22, 59, 172, .08);
  --s-shadow:  0 0.125rem 0.5rem rgba(0, 33, 88, .05);
}

.sec--dark {
  --s-ink:     var(--white);
  --s-ink2:    rgba(228, 234, 243, .80);
  --s-ink3:    rgba(228, 234, 243, .58);
  --s-acc:     #7C93D4;
  --s-card:    rgba(255, 255, 255, .07);
  --s-card-2:  rgba(255, 255, 255, .05);
  --s-line:    rgba(255, 255, 255, .15);
  --s-line-2:  rgba(255, 255, 255, .28);
  --s-wash:    rgba(255, 255, 255, .08);
  --s-shadow:  none;
}

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

html { scroll-behavior: smooth; overflow-x: clip; background-color: var(--bg); }

body {
  font-family: 'Manrope', Arial, sans-serif;
  color: var(--navy);
  line-height: 1.5;
  overflow-x: clip;
  position: relative;
  background: transparent;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

section, footer { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
a { color: inherit; }
ul, ol, dl { list-style: none; }
p, li, dd { text-wrap: pretty; }

/* ============================================================
   ФОНОВЫЙ СЛОЙ — ровная светлая подложка под всей страницей.
   Сквозных пятен и свечений здесь нет намеренно: каждая секция
   держит свой фон сама и обрезает декор по своим границам.
   ============================================================ */
.bg-fx {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--bg);
}

/* ============================================================
   ОБЩЕЕ
   ============================================================ */
.wrap {
  width: 100%; max-width: var(--page); margin: 0 auto;
  padding: 0 calc(var(--edge) + var(--gutter));
}

/* У каждой секции свой самостоятельный фон и чёткая граница: никаких
   растушёвок, отрицательных отступов и фигур, заходящих на соседний блок. */
.sec {
  padding: clamp(3rem, 6.4vw, 4.75rem) 0;
  position: relative; overflow: hidden;
  color: var(--s-ink); background: var(--bg);
}

.sec > .wrap { position: relative; z-index: 2; }

/* мягкая голубоватая подложка — смена ритма без ухода в тёмное */
.sec--soft { background: linear-gradient(180deg, var(--bg) 0%, var(--mist) 100%); }

/* контрастная тёмная секция — акцент, а не основа страницы */
.sec--dark {
  color: var(--white);
  background: linear-gradient(145deg, var(--navy) 0%, #002158 55%, var(--blue-d) 100%);
}

h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }

h2 {
  position: relative; padding-top: 1.5rem;
  font-size: clamp(1.75rem, 3.4vw, 2.875rem);
  color: var(--s-ink); max-width: 24ch; text-wrap: balance;
}

/* короткая засечка над заголовком */
h2::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: 2.5rem; height: 0.1875rem; border-radius: 0.1875rem;
  background: linear-gradient(90deg, var(--blue-d), var(--blue));
}

.sec--dark h2::before { background: linear-gradient(90deg, var(--blue-s), var(--blue)); }

/* кусок заголовка, который нельзя разрывать; ниже 700px перенос свободный */
@media (min-width: 701px) { .nw { white-space: nowrap; } }

/* мелкая подпись-метка над группой плашек */
.kicker {
  display: inline-flex; align-items: center; gap: 0.5625rem;
  font-size: 0.78125rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--s-acc);
  font-variant-numeric: tabular-nums;
  margin-bottom: 1.125rem;
}
.kicker::before { content: ''; width: 1rem; height: 0.09375rem; background: currentColor; display: block; }

.sec-lead {
  max-width: 62ch; margin-top: 1rem;
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  font-weight: 500; line-height: 1.65; color: var(--s-ink2);
}

/* ============================================================
   КНОПКИ
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  background: linear-gradient(135deg, var(--blue-lt) 0%, var(--blue) 68%, #163BAC 100%);
  color: var(--white); font-weight: 800; letter-spacing: -0.005em;
  font-size: 1.0625rem; padding: 1.25rem 3rem;
  border: 0; cursor: pointer; text-decoration: none; border-radius: var(--r-md);
  box-shadow: 0 0.375rem 0.875rem rgba(22, 59, 172, .18);
  transition: transform .2s, box-shadow .2s, background .2s;
}

.btn:hover {
  transform: translateY(-0.125rem);
  background: linear-gradient(135deg, #3a5cc4 0%, #163BAC 68%, var(--blue) 100%);
  box-shadow: 0 0.5rem 1.125rem rgba(22, 59, 172, .24);
}

.sec--dark .btn { box-shadow: none; }

.btn__ic { width: 1.25rem; height: 1.25rem; flex: none; }

.ctarow { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; margin-top: 1.75rem; }

/* на первом экране кнопка и подпись стоят в строку через вертикальный
   разделитель — как в плашке условий в блоке с ценой */
.hero .ctarow, #states .ctarow { flex-direction: row; align-items: stretch; gap: 1.125rem; }
.hero .ctarow .price, #states .ctarow .price {
  display: flex; align-items: center;
  padding-left: 1.125rem; border-left: 0.0625rem solid rgba(22, 59, 172, .26);
}

/* то же в «Для кого эта консультация» и на финальном экране; фон там тёмный,
   поэтому разделитель светлый, а не синий */
#who .ctarow, .final .ctarow { flex-direction: row; align-items: stretch; gap: 1.125rem; }
#who .ctarow .price { border-left: 0.0625rem solid var(--s-line-2); }
.final .ctarow .price { border-left: 0.0625rem solid rgba(255, 255, 255, .28); }
#who .ctarow .price, .final .ctarow .price {
  display: flex; align-items: center; padding-left: 1.125rem;
}
.price { font-size: 0.9375rem; font-weight: 600; color: var(--s-ink3); font-variant-numeric: tabular-nums; }

/* ============================================================
   ПЛАШКА ПЕРВОГО ЭКРАНА — светлое стекло поверх крупных
   синих форм. Тёмный вариант (.hero-panel--dark) стоит
   на финальном экране как контрастный акцент.
   ============================================================ */
.panel-sec { padding: 0 calc(var(--edge) + var(--gutter)); max-width: var(--page); margin: 0 auto; }
.hero { padding-top: 1.5rem; padding-bottom: 2rem; }

/* Слева чистая светлая поверхность, справа — многослойная композиция
   из крупных дуг (inline-SVG в .hero-art). Ни блюра, ни свечений:
   формы режутся по границе плашки через overflow:hidden. */
.hero-panel {
  position: relative; isolation: isolate; overflow: hidden;
  /* поле одно на все четыре стороны: фотография справа и плашки слева
     должны отступать от края блока одинаково */
  --hp-py: clamp(1.5rem, 2.8vw, 3rem);
  --hp-px: clamp(1.5rem, 2.8vw, 3rem);
  border-radius: var(--r-xl); padding: var(--hp-py) var(--hp-px);
  border: 0.0625rem solid rgba(22, 59, 172, .10);
  /* mesh-градиент: синий собран справа и вокруг фотографии и растворяется
     к центру. Видимой границы «здесь белое / здесь синее» нет.
     Ни один слой не заканчивается внутри плашки — иначе по краю читается
     светлая полоса на стыке с базовым цветом. */
  background:
    radial-gradient(46% 64% at 106% 4%,   rgba(0, 33, 88, .5) 0%, rgba(0, 33, 88, 0) 64%),
    radial-gradient(52% 70% at 112% 102%, rgba(0, 33, 88, .4) 0%, rgba(0, 33, 88, 0) 62%),
    radial-gradient(46% 64% at 98% 84%,   rgba(22, 59, 172, .78) 0%, rgba(22, 59, 172, 0) 66%),
    radial-gradient(48% 66% at 100% 18%,  rgba(22, 59, 172, .7) 0%, rgba(22, 59, 172, 0) 68%),
    radial-gradient(54% 72% at 88% 52%,   rgba(22, 59, 172, .7) 0%, rgba(22, 59, 172, 0) 70%),
    radial-gradient(64% 84% at 76% 50%,   rgba(22, 59, 172, .62) 0%, rgba(22, 59, 172, 0) 72%),
    #EEF1F5;
  background-size: 116% 116%, 116% 116%, 116% 116%, 116% 116%, 116% 116%, 116% 116%, auto;
  background-position: 100% 0%, 100% 100%, 100% 100%, 100% 0%, 100% 50%, 100% 50%, 0 0;
  animation: hero-mesh 16s ease-in-out infinite alternate;
}

/* очень медленный дрейф пятен: только смещение, без пульсации */
@keyframes hero-mesh {
  from { background-position: 100% 0%, 100% 100%, 100% 100%, 100% 0%, 100% 50%, 100% 50%, 0 0; }
  to   { background-position: 88% 12%, 92% 88%,  90% 90%,   88% 10%, 86% 42%,  84% 58%,  0 0; }
}

/* дуги очень медленно скользят по своей же окружности */
.orb { animation: orb-drift 34s ease-in-out infinite alternate; }
.orb--1 { transform-box: view-box; transform-origin: 700px 1150px; }
.orb--2 { transform-box: view-box; transform-origin: 900px -450px; animation-duration: 42s; }

@keyframes orb-drift {
  from { transform: rotate(-1.6deg); }
  to   { transform: rotate(1.6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-panel, .orb { animation: none; }
  .faq__a, .gbody { transition: none; }
}

.hero-panel { box-shadow: 0 0.75rem 2rem rgba(0, 33, 88, .08); }

/* декоративные слои прошлой версии выключены: круги и дуги выходили
   за пределы блока и давали засветы */
.panel-deco, .panel-ring { display: none; }

/* ---------- фоновая композиция первого экрана ---------- */
.hero-art {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  border-radius: inherit;
}

.hero-art svg { width: 100%; height: 100%; display: block; }










.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(18rem, 36vw, 34.5rem);
  gap: clamp(1.25rem, 2.2vw, 2.25rem); align-items: stretch;
}

.hero-left  { min-width: 0; }
.hero-right { min-width: 0; display: flex; }

.hero-badges { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; margin-bottom: 1.625rem; }

.badge {
  display: inline-flex; align-items: center; gap: 0.5625rem;
  background: var(--white); border: 0.0625rem solid rgba(22, 59, 172, .14);
  border-radius: 6.25rem; padding: 0.5625rem 1.125rem;
  font-size: 0.8125rem; font-weight: 700; color: var(--navy); letter-spacing: .01em;
}

.dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--blue); flex-shrink: 0; }

.hero-h1 {
  font-size: clamp(2rem, 4.1vw, 3.5rem);
  line-height: 1.03; letter-spacing: -0.028em; text-wrap: balance; color: var(--navy);
}

/* строки заголовка разложены вручную — иначе «направление» уходит висячим */
.hero-h1 .ln { display: block; }
/* последняя строка синим — смысловой акцент заголовка */
.hero-h1 .ln:last-child { color: var(--blue); }

.hero-lead {
  margin-top: 1.25rem; max-width: 56ch;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  font-weight: 500; line-height: 1.65; color: rgba(0, 33, 88, .76);
}

/* врезка с одной важной строкой на первом экране */
.note {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.875rem; align-items: center;
  margin-top: 1.375rem; padding: 0.875rem 1.125rem;
  background: var(--white); border: 0.0625rem solid rgba(22, 59, 172, .12);
  border-radius: var(--r-md); max-width: 34rem;
  font-size: clamp(0.875rem, 1.05vw, 0.9375rem); font-weight: 600; color: var(--navy);
}

/* 3D-иконка вместо векторного календаря: плитки-подложки нет, объект
   стоит прямо на плашке — прозрачность в WebP сохранена */
.note__ic { width: 2.75rem; height: 2.75rem; object-fit: contain; }
.note__ic--3d { width: 3rem; height: 3rem; filter: drop-shadow(0 0.375rem 0.625rem rgba(0, 33, 88, .18)); }

/* сноска идёт одной строкой — ограничение по ширине снято */
.hero-note { margin-top: 1.25rem; font-size: 0.75rem; line-height: 1.45; color: rgba(0, 33, 88, .5); }

/* мягкая маркерная подсветка названия в лиде */
.mk {
  background: linear-gradient(transparent 58%, rgba(22, 59, 172, .26) 58%);
  padding-bottom: 0.0625rem;
}
.hero-note a { color: var(--blue-d); text-underline-offset: 0.1875rem; }

/* На первом экране высоту задает левая колонка — от верхних плашек до сноски.
   Портретное фото 1100×1466 своей пропорцией тянуло строку грида выше, и блок
   кончался заметно ниже сноски. Карточка вынута из потока и растянута по
   правой колонке: своей высоты у нее теперь нет, границы приходят от левой. */
.hero .hero-right { position: relative; display: block; }
.hero .hero-card { position: absolute; inset: 0; min-height: 0; }

/* карточка во всю высоту справа — светло-серо-голубая, полупрозрачная */
.hero-card {
  flex: 1; display: flex; border-radius: var(--r-lg); overflow: hidden;
  background: rgba(228, 234, 243, .72);
  border: 0.0625rem solid rgba(255, 255, 255, .55);
  min-height: clamp(16rem, 26vw, 25rem);
  box-shadow: 0 0.75rem 1.75rem rgba(0, 33, 88, .12);
}

/* ---------- тёмный вариант плашки: финальный экран ---------- */
.hero-panel--dark {
  animation: none;                       /* mesh и его дрейф — только у первого экрана */
  border-color: rgba(255, 255, 255, .10);
  background: linear-gradient(145deg, var(--navy) 0%, #002158 55%, var(--blue-d) 100%);
  box-shadow: 0 0.75rem 2rem rgba(0, 33, 88, .18);
}

.hero-panel--dark .hero-art, .hero-panel--dark .hero-ghost { display: none; }
.hero-panel--dark .hero-lead { color: rgba(228, 234, 243, .82); }
.hero-panel--dark .hero-note { color: rgba(228, 234, 243, .58); }
.hero-panel--dark .price     { color: rgba(228, 234, 243, .62); }

.hero-panel--dark .hero-card {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: none;
}

.hero-panel--dark .slot { border-color: rgba(255, 255, 255, .22); color: rgba(228, 234, 243, .6); background: none; }

/* ============================================================
   СЛОТЫ ПОД ФОТО — место размечено сразу, картинка подставляется
   позже. Заменять .slot на <img>, а не выбрасывать.
   ============================================================ */
.slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.625rem; width: 100%; height: 100%; min-height: 100%;
  border: 0.0625rem dashed var(--s-line-2);
  border-radius: var(--r-md);
  background:
    repeating-linear-gradient(135deg, rgba(22, 59, 172, .05) 0 0.75rem, transparent 0.75rem 1.5rem),
    var(--s-card-2);
  color: var(--s-ink3); text-align: center; padding: 1.25rem;
}

/* фото первого экрана заполняет карточку целиком */
.hero-photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* слот на белой карточке первого экрана — без своей заливки */
.hero-card .slot { flex: 1; background: none; border-color: rgba(0, 33, 88, .22); color: rgba(0, 33, 88, .55); }

.slot__ic  { width: 1.625rem; height: 1.625rem; opacity: .75; }
.slot__cap { font-size: 0.75rem; line-height: 1.35; max-width: 16rem; }

.slot--wide { min-height: 11rem; }
/* плитки «как записаться»: пропорция фиксированная, иначе картинки в соседних
   карточках разъезжаются по высоте вслед за длиной подписи */
.slot--flow { flex: none; height: auto; min-height: 0; aspect-ratio: 4 / 3; }

.flow__photo {
  flex: none; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--r-md);
}
.slot--flow .slot__cap { font-size: 0.6875rem; }
.slot--portrait { min-height: 15rem; }

/* фото эксперта заполняет свою колонку целиком */
.expert__photo {
  width: 100%; height: 100%; min-height: 15rem;
  object-fit: cover; object-position: 50% 28%; border-radius: var(--r-lg);
}

/* ============================================================
   ПЛАШКИ — базовый компонент: слот под иконку 3rem + текст
   ============================================================ */
.grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

.pl {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start;
  background: var(--s-card); border: 0.0625rem solid var(--s-line); border-radius: var(--r-lg);
  padding: 1.375rem 1.5rem; box-shadow: var(--s-shadow);
  transition: border-color .2s ease, transform .2s var(--ease), box-shadow .2s ease;
}

.pl:hover {
  border-color: var(--s-line-2); transform: translateY(-0.125rem);
  box-shadow: 0 0.375rem 1rem rgba(0, 33, 88, .09);
}

.sec--dark .pl:hover { box-shadow: none; }

.pl__ico {
  width: 3rem; height: 3rem; border-radius: var(--r-md);
  background: linear-gradient(150deg, rgba(22, 59, 172, .18), rgba(22, 59, 172, .07));
  border: 0.0625rem solid var(--s-line);
  color: var(--s-acc); display: flex; align-items: center; justify-content: center;
}

.sec--dark .pl__ico { background: linear-gradient(150deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)); }

/* 3D-иконки вместо векторных: плитки-подложки нет, объект стоит на карточке */
.pl__img { width: 3.75rem; height: 3.75rem; object-fit: contain; margin: -0.375rem 0 -0.25rem -0.375rem; }

/* картинка шире стандартного слота под иконку — расширяем колонку */
.pl--img { grid-template-columns: 3.75rem 1fr; }
.pl--img .pl__img { margin: -0.25rem 0 -0.25rem 0; }

/* «кому не подойдет»: текст короткий и с иконкой в 3.75rem расходился
   по верхней линии — отбивка под векторную иконку здесь не нужна */
.pl--img--top .pl__img { margin-top: 0; }
.pl--img--top p { padding-top: 0; }

.pl--section-icon { grid-template-columns: 5rem 1fr; }
.section-icon {
  width: 5rem;
  height: 5rem;
  max-width: 100%;
  object-fit: contain;
  margin: -0.375rem 0 -0.375rem 0;
  filter: drop-shadow(0 0.5rem 0.875rem rgba(0, 10, 40, .24));
}
.pl--img--top .section-icon { margin-top: -0.375rem; }

.pl__ico svg { width: 1.5rem; height: 1.5rem; display: block; }

.pl p {
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem); font-weight: 500;
  color: var(--s-ink2); line-height: 1.6; padding-top: 0.4375rem;
}

.pl p b { color: var(--s-ink); font-weight: 700; }

/* «Узнаете себя…» — карточки по три в ряд: фото сверху, текст под ним */
.states { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }

.scard {
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--s-card); border: 0.0625rem solid var(--s-line); border-radius: var(--r-lg);
  padding: 0.875rem; box-shadow: var(--s-shadow);
  transition: border-color .2s ease, transform .2s var(--ease), box-shadow .2s ease;
}

.scard:hover {
  border-color: var(--s-line-2); transform: translateY(-0.125rem);
  box-shadow: 0 0.375rem 1rem rgba(0, 33, 88, .09);
}

.sec--dark .scard:hover { box-shadow: none; }

/* пропорция фиксированная — иначе картинки в соседних карточках разъезжаются */
.slot--card { flex: none; height: auto; min-height: 0; aspect-ratio: 4 / 3; }

.scard__img {
  flex: none; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--r-md);
}

.scard p {
  padding: 0 0.5rem 0.5rem;
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem); font-weight: 500;
  line-height: 1.6; color: var(--s-ink2);
}

.scard p b { color: var(--s-ink); font-weight: 700; }

/* плашка без иконки — одна колонка */
.pl--plain { grid-template-columns: 1fr; }
.pl--plain p { padding-top: 0; }

/* итоговая плашка во всю ширину с синей заливкой */
.pl--wide {
  grid-column: 1 / -1;
  background: linear-gradient(120deg, rgba(22, 59, 172, .12), rgba(255, 255, 255, .85));
  border-color: var(--s-line-2);
}

.sec--dark .pl--wide { background: linear-gradient(120deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04)); }

/* иконка по центру текста, а не по верхней линии */
.pl--mid { align-items: center; }
.pl--mid p { padding-top: 0; }

/* плашка во всю высоту колонки (стоит в .split рядом с врезкой и фото) */
.pl--tall { height: 100%; align-content: start; }
/* высоту пары задает эта плашка, а не фото: иконка, текст и врезка стоят
   одной группой сверху, поля 2rem — центрирование давало пустые зоны
   и сверху, и снизу */
/* группа стоит по центру плашки: на узких экранах левая карточка выше
   (лид переносится на строку больше), и прижатый вверх текст оставлял
   пустоту только снизу */
.split .pl--tall { align-content: center; padding: 2rem 1.5rem; gap: 0.875rem; }
/* вертикальные отрицательные поля иконки смещали группу вверх на 7px —
   для центрирования они не нужны, левое остается ради ровного края текста */
.split .pl--tall .pl__img { margin: 0 0 0 -0.375rem; }

/* иконка сверху, текст под ней — для узких колонок.
   align-content: start обязателен: карточки в ряду тянутся до общей высоты,
   и без него авторяды грида растягиваются, а зазор «иконка → текст»
   у каждой карточки получается свой. */
.pl--col { grid-template-columns: 1fr; gap: 0.875rem; align-content: start; }
.pl--col p { padding-top: 0; }

/* ------------------------------------------------------------------
   «Для кого эта консультация»: два ряда карточек нужно развести
   по весу. Разметку не трогаем — цепляемся за сетки внутри #who,
   id даёт специфичность выше общих правил .pl.
   ------------------------------------------------------------------ */

/* верхний ряд «подходит» — светлее, ярче, граница заметнее */
#who .grid:not(.grid--3) .pl {
  background: linear-gradient(140deg, rgba(22, 59, 172, .24), rgba(22, 59, 172, .10));
  border-color: rgba(22, 59, 172, .55);
}

#who .grid:not(.grid--3) .pl:hover { border-color: rgba(160, 172, 194, .78); }

#who .grid:not(.grid--3) .pl__ico {
  background: #163BAC; border-color: #163BAC; color: var(--white);
}

/* нижний ряд «не подойдёт» — темнее, спокойнее, граница почти не видна */
#who .grid--3 .pl {
  background: rgba(0, 33, 88, .55);
  border-color: rgba(102, 112, 133, .14);
}

#who .grid--3 .pl:hover { border-color: rgba(102, 112, 133, .26); }

#who .grid--3 .pl__ico {
  background: #667085; border-color: rgba(102, 112, 133, .2); color: #A9B3C4;
}

/* вывод абзаца — акцентной строкой, чтобы не тонул в тексте */
/* .pl .pl__accent, а не .pl__accent: у правила `.pl p` специфичность выше,
   и оно перебивало верхний отступ на .4375rem — текст сидел выше центра */
.pl .pl__accent {
  margin-top: 0.875rem; padding: 0.75rem 0.875rem;
  border-left: 0.1875rem solid var(--blue);
  border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--s-wash);
  color: var(--s-ink); font-weight: 700;
}

/* перечисление внутри плашки */
.sublist { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }

.sublist li {
  position: relative; padding-left: 1.125rem;
  font-size: clamp(0.875rem, 1.05vw, 0.9375rem); font-weight: 600;
  line-height: 1.5; color: var(--s-ink);
}

.sublist li::before {
  content: ''; position: absolute; left: 0; top: 0.5em;
  width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--blue);
}

/* ============================================================
   ДВУХКОЛОНОЧНЫЙ БЛОК: плашка-врезка слева, содержимое справа
   ============================================================ */
/* колонки ровно пополам: карточка с фото и плашка с текстом читаются как пара,
   при разной ширине они смотрелись как главная и второстепенная */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; margin-top: 1.5rem; }

.split__side {
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--s-card); border: 0.0625rem solid var(--s-line); border-radius: var(--r-xl);
  padding: 1.5rem; box-shadow: var(--s-shadow);
}

.split__lead {
  padding: 1rem 1.125rem; border-left: 0.1875rem solid var(--blue);
  border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--s-wash);
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem); font-weight: 700; line-height: 1.5; color: var(--s-ink);
}

.split__side .slot { flex: 1; }

/* фото добирает остаток высоты до соседней плашки и не задает его само:
   в свою пропорцию 900×506 оно тянуло карточку на 150px выше нужного.
   Кадр смещен к верху исходника — в узкой полосе лицо иначе срезается */
.split__photo {
  flex: 1 1 0; min-height: 0; width: 100%;
  object-fit: cover; object-position: center 22%; border-radius: var(--r-md);
}

/* ============================================================
   РЕЗУЛЬТАТ КОНСУЛЬТАЦИИ — факты слева, лист документа справа.
   Всё на общих токенах секции: те же скругления, границы, тени
   и типографика, что у остальных блоков.
   ============================================================ */

/* фон чуть светлее базового, мягкий синий свет идёт справа за документом.
   Центр пятна вынесен за правый край — иначе по краю читается ободок. */
.sec--res {
  background:
    radial-gradient(54% 80% at 106% 46%, rgba(22, 59, 172, .10) 0%, rgba(22, 59, 172, 0) 62%),
    linear-gradient(180deg, var(--white) 0%, #F7F8FA 100%);
}

/* center: после обрезки текста лист стал короче левой колонки и висел
   у верхнего края — теперь стоит по центру блока */
.res {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(1.5rem, 3vw, 3rem); align-items: center;
}

.res__left { min-width: 0; }
.res__accent { color: var(--blue); }
.res__right { min-width: 0; }

.res__facts { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.75rem; }

/* карточки с цифрами залиты голубым: на почти белой секции белая плашка
   на белом фоне не читалась */
.fact {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start;
  background: linear-gradient(140deg, #F4F6F9 0%, #E4E9F0 100%);
  border: 0.0625rem solid rgba(22, 59, 172, .3); border-radius: var(--r-lg);
  padding: 1.25rem 1.375rem;
  box-shadow: 0 0.375rem 1rem rgba(22, 59, 172, .10);
  transition: border-color .2s ease, transform .2s var(--ease);
}

.fact:hover { border-color: rgba(22, 59, 172, .5); transform: translateY(-0.125rem); }

.fact__ico {
  width: 3rem; height: 3rem; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, rgba(22, 59, 172, .18), rgba(22, 59, 172, .07));
  border: 0.0625rem solid var(--s-line); color: var(--blue);
}

.fact__ico svg { width: 1.5rem; height: 1.5rem; display: block; }

/* 3D-иконка вместо векторной: подложки нет, колонка под неё шире */
.fact:has(.fact__img) { grid-template-columns: 3.75rem 1fr; }
.fact__img { width: 3.75rem; height: 3.75rem; object-fit: contain; margin: -0.25rem 0; }

.fact__n {
  font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.15; color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.fact__t {
  margin-top: 0.4375rem;
  font-size: clamp(0.875rem, 1.05vw, 0.9375rem); font-weight: 500;
  line-height: 1.55; color: var(--s-ink2);
}

/* подпись кейса — на белой плашке, чтобы отделялась от голубой заливки */
.fact__cap {
  display: inline-block; margin-top: 0.875rem;
  padding: 0.3125rem 0.625rem; border-radius: 6.25rem;
  background: rgba(255, 255, 255, .8); border: 0.0625rem solid rgba(22, 59, 172, .16);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue-d);
}

/* ---------- лист документа ---------- */
.doc { position: relative; }

/* листы позади — только имитация стопки, высоту задаёт .doc__page */
.doc__sheet {
  position: absolute; inset: 0; z-index: 0; border-radius: var(--r-xl);
  background: var(--white); border: 0.0625rem solid var(--s-line);
}

.doc__sheet--2 { z-index: 1; opacity: .7; transform: rotate(1.6deg) translate(0.5rem, 0.5rem); }
.doc__sheet--3 { opacity: .4; transform: rotate(3.2deg) translate(1rem, 1rem); }

.doc__page {
  position: relative; z-index: 2;
  background: var(--white); border: 0.0625rem solid var(--s-line);
  border-radius: var(--r-xl); padding: clamp(1.5rem, 2.4vw, 2.25rem);
  box-shadow: 0 1rem 2.25rem rgba(0, 33, 88, .10);
  transform: rotate(-1.2deg);
}

.doc__title {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem); font-weight: 800;
  letter-spacing: -0.02em; color: var(--s-ink);
}

.doc__rule {
  display: block; width: 2.5rem; height: 0.1875rem; border-radius: 0.1875rem;
  margin: 0.625rem 0 1.25rem;
  background: linear-gradient(90deg, var(--blue-d), var(--blue));
}

/* лист показывает начало документа, дальше текст уходит под мягкую кромку */
/* обрезка по высоте и растушёвка снизу сняты: текст резюме теперь кончается
   на «реальные задачи компании», и вуаль гасила эту самую строку */
.doc__body { position: relative; }

.doc__h {
  margin: 1.125rem 0 0.375rem;
  font-size: 0.6875rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue-d);
}

.doc__h:first-child { margin-top: 0; }

.doc__body p {
  margin-bottom: 0.5rem;
  font-size: 0.75rem; font-weight: 500; line-height: 1.65; color: var(--s-ink2);
}

.doc__list { display: flex; flex-direction: column; gap: 0.3125rem; margin: 0.375rem 0 0.625rem; }

.doc__list li {
  position: relative; padding-left: 0.875rem;
  font-size: 0.75rem; font-weight: 600; line-height: 1.55; color: var(--s-ink);
}

.doc__list li::before {
  content: ''; position: absolute; left: 0; top: 0.5em;
  width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: var(--blue);
}

/* подсветка нарастает слева направо — поддерживает движение 01 → 04.
   Правило привязано к #how, соседние .sec--soft не затрагивает. */
#how {
  background:
    radial-gradient(40% 62% at 86% 40%, rgba(22, 59, 172, .10) 0%, rgba(22, 59, 172, 0) 68%),
    radial-gradient(36% 56% at 60% 36%, rgba(22, 59, 172, .05) 0%, rgba(22, 59, 172, 0) 68%),
    linear-gradient(180deg, var(--bg) 0%, var(--mist) 100%);
}

/* ============================================================
   КАК ПРОЙДЕТ КОНСУЛЬТАЦИЯ — таймлайн из четырёх этапов
   Круглые номера заходят на верхнюю границу карточек, общая тонкая
   линия идёт от центра первого узла до центра последнего. Насыщенность
   номеров растёт от 01 к 04: путь ведёт к конкретному первому шагу.
   ============================================================ */
.how-lead {
  margin-top: 1rem; max-width: 60ch;
  font-size: clamp(1rem, 1.3vw, 1.1875rem); font-weight: 600;
  line-height: 1.5; color: var(--s-ink);
}

.how-lead__acc { color: var(--blue); }

.how-note {
  margin-top: 0.375rem;
  font-size: clamp(0.875rem, 1.05vw, 0.9375rem); font-weight: 600;
  color: var(--s-ink2);
}

.tl {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem; margin-top: 2.25rem;
}

/* у каждой карточки свой отрезок: он лежит ровно на её верхней грани
   (карточка начинается на 2rem, элемент центрируем по этой линии),
   идёт от правого края круга и заканчивается точкой у правого поля.
   Линия и точка — два слоя фона одного псевдоэлемента, лишних тегов нет. */
.tl__item::after {
  content: ''; position: absolute; z-index: 1;
  top: calc(2rem - 0.25rem); height: 0.5rem;
  left: calc(1.875rem + 3.25rem + 0.375rem);
  right: 1.75rem;
  /* точка объявлена первым слоем — в CSS первый слой фона рисуется поверх,
     поэтому кружок ложится на линию, а не наоборот */
  background:
    radial-gradient(circle, var(--blue) 0.1875rem, transparent 0.1875rem) no-repeat right center / 0.5rem 0.5rem,
    linear-gradient(90deg, var(--blue), var(--blue-s)) no-repeat left center / 100% 0.09375rem;
}

.tl__item { position: relative; padding-top: 2rem; display: flex; }

.tl__node {
  position: absolute; z-index: 2; top: 0; left: 1.875rem;
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--white); font-size: 1rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(150deg, #3a5cc4, var(--blue-lt));
}

.tl__item:nth-child(2) .tl__node { background: linear-gradient(150deg, var(--blue-lt), var(--blue)); }
.tl__item:nth-child(3) .tl__node { background: linear-gradient(150deg, var(--blue), var(--blue-d)); }
.tl__item--last .tl__node      { background: linear-gradient(150deg, var(--blue-d), var(--navy)); }

.tl__card {
  position: relative; z-index: 0; flex: 1;
  display: flex; flex-direction: column; gap: 1.125rem;
  background: var(--s-card); border: 0.0625rem solid var(--s-line);
  border-radius: var(--r-lg); padding: 2rem 1.875rem 1.875rem;
  box-shadow: var(--s-shadow);
}

/* ховера у этапов нет: карточки статичные, без подъёма и подсветки */

.tl__top { display: flex; align-items: center; gap: 0.875rem; }

.tl__ico {
  width: 2.875rem; height: 2.875rem; flex: none; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--s-wash); border: 0.0625rem solid var(--s-line);
  color: var(--blue);
}

.tl__ico svg { width: 1.625rem; height: 1.625rem; display: block; }

/* 3D-иконка вместо векторной: подложки нет, объект стоит на карточке */
.tl__img { width: 3.25rem; height: 3.25rem; flex: none; object-fit: contain; margin: -0.25rem 0 -0.25rem -0.25rem; }

.tl__h {
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem); font-weight: 800;
  letter-spacing: -0.014em; line-height: 1.25; color: var(--s-ink);
}

.tl__t {
  font-size: clamp(0.8125rem, 1vw, 0.875rem); font-weight: 500;
  line-height: 1.55; color: var(--s-ink2);
}

/* финальная карточка — логическое завершение сценария */
.tl__item--last .tl__card {
  background: linear-gradient(150deg, #ffffff, var(--mist));
  border-color: rgba(22, 59, 172, .32);
  box-shadow: 0 0 0 0.25rem rgba(22, 59, 172, .05), 0 0.5rem 1.5rem rgba(22, 59, 172, .10);
}

.tl__done {
  align-self: flex-start; margin-top: -0.5rem; display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.625rem; border-radius: 6.25rem;
  background: rgba(22, 59, 172, .12); border: 0.0625rem solid rgba(22, 59, 172, .26);
  color: var(--blue-d); font-size: 0.625rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}

.tl__done svg { width: 0.75rem; height: 0.75rem; flex: none; }

/* ---------- нижняя плашка-итог ---------- */
.how-cta {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: 1.25rem; align-items: center;
  margin-top: 1.5rem; padding: 1.125rem 1.5rem;
  background: var(--s-card); border: 0.0625rem solid var(--s-line);
  border-radius: var(--r-xl); box-shadow: var(--s-shadow);
}

.how-cta__ico {
  width: 2.75rem; height: 2.75rem; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--s-wash); border: 0.0625rem solid var(--s-line); color: var(--blue);
}

.how-cta__ico svg { width: 1.5rem; height: 1.5rem; display: block; }

.how-cta__img { width: 3.25rem; height: 3.25rem; object-fit: contain; margin: -0.25rem 0 -0.25rem -0.25rem; }

.how-cta__t {
  font-size: clamp(1rem, 1.3vw, 1.1875rem); font-weight: 800;
  letter-spacing: -0.016em; line-height: 1.3; color: var(--s-ink);
}

.how-cta__s {
  margin-top: 0.25rem;
  font-size: clamp(0.8125rem, 1vw, 0.875rem); font-weight: 500;
  line-height: 1.5; color: var(--s-ink3);
}

.how-cta__act { display: flex; align-items: center; gap: 1.25rem; }
.how-cta__act .btn { padding: 0.9375rem 1.75rem; font-size: 1rem; }
.how-cta__price {
  display: flex; flex-direction: column; gap: 0; line-height: 1.35;
  padding: 0.5rem 0 0.5rem 1.25rem;
  border-left: 0.0625rem solid rgba(22, 59, 172, .26);
}
.how-cta__note { font-size: 0.75rem; font-weight: 500; color: var(--s-ink3); }

/* ============================================================
   КАЖДОМУ ЗАПРОСУ — СВОЙ РЕЗУЛЬТАТ
   ============================================================ */
.qa {
  display: flex; flex-direction: column; gap: 0.875rem;
  background: var(--s-card); border: 0.0625rem solid var(--s-line); border-radius: var(--r-lg);
  padding: 1.5rem; box-shadow: var(--s-shadow);
  transition: border-color .2s ease, transform .2s var(--ease);
}

.qa:hover { border-color: var(--s-line-2); transform: translateY(-0.125rem); }

.qa__q {
  font-size: clamp(1rem, 1.3vw, 1.1875rem); font-weight: 700; line-height: 1.35;
  letter-spacing: -0.012em; color: var(--s-acc);
}

/* подзаголовок над ответом */
.qa__lbl {
  display: block; margin-bottom: 0.375rem;
  font-size: 0.6875rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #163BAC;
}

.qa__a {
  margin-top: auto; padding: 0.875rem 1rem; border-radius: var(--r-md);
  background: var(--s-wash); border: 0.0625rem solid var(--s-line);
  font-size: clamp(0.875rem, 1.05vw, 0.9375rem); font-weight: 500; line-height: 1.65; color: var(--s-ink2);
}

/* ============================================================
   ЭКСПЕРТ
   ============================================================ */
.expert {
  display: grid; grid-template-columns: clamp(16rem, 26vw, 23rem) 1fr; gap: 1.5rem; align-items: stretch;
  background: var(--s-card); border: 0.0625rem solid var(--s-line); border-radius: var(--r-xl);
  padding: 1.375rem; margin-top: 1.5rem; box-shadow: var(--s-shadow);
}

.expert__body { display: flex; flex-direction: column; gap: 0.75rem; justify-content: center; }

/* компактные плашки специализации */
.expert__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.expert__tags li {
  padding: 0.375rem 0.75rem; border-radius: 6.25rem;
  background: var(--s-wash); border: 0.0625rem solid var(--s-line-2);
  color: var(--s-acc); font-size: 0.8125rem; font-weight: 700; letter-spacing: -0.005em;
}

.expert__role {
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem); font-weight: 700;
  letter-spacing: -0.014em; color: var(--s-acc);
}

.expert__desc { font-size: clamp(0.9375rem, 1.1vw, 1rem); font-weight: 500; line-height: 1.65; color: var(--s-ink2); }

.expert__note {
  margin-top: 0.25rem; padding: 0.875rem 1rem; border-left: 0.1875rem solid var(--blue);
  border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--s-wash);
  font-size: clamp(0.875rem, 1.05vw, 0.9375rem); font-weight: 500; line-height: 1.6; color: var(--s-ink2);
}

/* ============================================================
   ЦЕНА И ЧТО ВХОДИТ
   ============================================================ */
/* Плашка с ценой: две колонки по краям, каждая — название и мелкая подпись
   под ним. Высота держится на 7rem, раньше строки шли в три уровня
   с переносом и плашка занимала вдвое больше. */
.pricecard {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
  min-height: 7rem; margin-top: 1.25rem; padding: 1.25rem 2rem;
  border: 0.0625rem solid rgba(255, 255, 255, .16); border-radius: var(--r-xl);
  background: linear-gradient(120deg, var(--blue) 0%, #163BAC 52%, var(--blue-d) 100%);
  color: var(--white); box-shadow: 0 0.375rem 1rem rgba(22, 59, 172, .18);
}

.pricecard__side { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.pricecard__side--r { align-items: flex-end; text-align: right; }

.pricecard__name { font-size: clamp(1.0625rem, 1.5vw, 1.375rem); font-weight: 700; letter-spacing: -0.014em; }
.pricecard__sum  { font-size: clamp(1.5rem, 2.4vw, 2.125rem); font-weight: 800; letter-spacing: -0.024em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pricecard__sub  { font-size: 0.9375rem; font-weight: 500; line-height: 1.35; color: rgba(228, 234, 243, .8); }

/* колонки одной высоты: текст справа короче, но разная высота карточек
   читалась как обрыв, а не как экономия места */
.incl { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; margin-top: 0.875rem; }

.incl__col {
  background: var(--s-card); border: 0.0625rem solid var(--s-line); border-radius: var(--r-lg);
  padding: 1.25rem 1.375rem; box-shadow: var(--s-shadow);
}

/* колонки различаются заливкой, но остаются в одной стилистике */
.incl__col--no { background: linear-gradient(160deg, #F4F6F9 0%, #EEF1F5 100%); }

.incl__h {
  font-size: clamp(1rem, 1.25vw, 1.125rem); font-weight: 700;
  letter-spacing: -0.012em; margin-bottom: 0.875rem; color: var(--s-ink);
}

.ticks { display: flex; flex-direction: column; gap: 0.75rem; }

.ticks li {
  display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.875rem; align-items: start;
  font-size: clamp(0.875rem, 1.05vw, 0.9375rem); font-weight: 500; line-height: 1.65; color: var(--s-ink2);
}

/* знак в залитом кружке: тонкая линейная иконка на белой карточке терялась,
   блок читался ровным серым текстом без акцентов */
.tick {
  width: 1.75rem; height: 1.75rem; padding: 0.375rem; margin-top: 0.0625rem;
  border-radius: 50%; box-sizing: border-box;
}
.tick--yes {
  color: var(--white); background: linear-gradient(140deg, var(--blue-lt), var(--blue-d));
  box-shadow: 0 0.25rem 0.625rem rgba(22, 59, 172, .28);
}
/* «не входит» — тот же синий, но приглушенный: красный по правилу заказчика нельзя,
   а серый рядом с цветными галочками выглядел браком, а не смысловой парой */
.tick--no { color: #667085; background: #E4E9F0; box-shadow: inset 0 0 0 0.0625rem rgba(102, 112, 133, .16); }

/* условия и кнопка в одной строке — третий и последний уровень блока */
.terms {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem 2rem; margin-top: 0.875rem; padding: 1.25rem 1.75rem;
  background: linear-gradient(120deg, #F4F6F9 0%, #EEF1F5 100%);
  border: 0.0625rem solid rgba(22, 59, 172, .16); border-radius: var(--r-xl);
}

.terms__txt { min-width: 0; }
.terms__h { font-size: clamp(1rem, 1.2vw, 1.125rem); font-weight: 700; letter-spacing: -0.012em; color: var(--navy); }
.terms__p { margin-top: 0.25rem; font-size: clamp(0.875rem, 1.05vw, 0.9375rem); font-weight: 500; line-height: 1.5; color: rgba(0, 33, 88, .74); }

/* кнопка и цена в строку через вертикальный разделитель */
.terms__cta { display: flex; align-items: stretch; gap: 1.125rem; flex: none; }
.terms__cta .price {
  display: flex; align-items: center;
  padding-left: 1.125rem; border-left: 0.0625rem solid rgba(22, 59, 172, .26);
  color: rgba(0, 33, 88, .6);
}

/* заголовки колонок с меткой того же цвета, что и знаки */
.incl__h { display: flex; align-items: center; gap: 0.625rem; }
.incl__h::before {
  content: ''; flex: none; width: 0.25rem; height: 1.125rem; border-radius: 6.25rem;
  background: linear-gradient(180deg, var(--blue-lt), var(--blue-d));
}
.incl__col:last-child .incl__h::before { background: #A9B3C4; }

/* ============================================================
   КАК ЗАПИСАТЬСЯ
   ============================================================ */
.flow__card {
  display: flex; flex-direction: column; gap: 0.75rem;
  background: var(--s-card); border: 0.0625rem solid var(--s-line); border-radius: var(--r-lg);
  padding: 0.875rem; box-shadow: var(--s-shadow);
  transition: border-color .2s ease, transform .2s var(--ease);
}

.flow__card:hover { border-color: var(--s-line-2); transform: translateY(-0.125rem); }

.tag {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.75rem; border-radius: 6.25rem;
  border: 0.0625rem solid var(--s-line-2); background: var(--s-wash);
  color: var(--s-acc); font-size: 0.6875rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}

.tag__n { opacity: .6; }

.flow__card p { font-size: 0.875rem; font-weight: 500; line-height: 1.55; color: var(--s-ink2); }

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  margin-top: 1.5rem; border-radius: var(--r-xl); overflow: hidden;
  background: var(--s-card); border: 0.0625rem solid var(--s-line); box-shadow: var(--s-shadow);
}

.faq__item + .faq__item { border-top: 0.0625rem solid var(--s-line); }

.faq__q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 1.5rem; cursor: pointer; list-style: none; color: var(--s-ink);
  font-size: clamp(1rem, 1.25vw, 1.125rem); font-weight: 700;
  line-height: 1.4; letter-spacing: -0.012em;
  transition: color .2s var(--ease), background-color .2s ease;
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--s-acc); background: var(--s-wash); }

.faq__q::after {
  content: ''; flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1875rem;
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .3s var(--ease);
}

.faq__item[open] .faq__q::after { transform: rotate(45deg); }

/* ответ раскрывается плавно — тем же приёмом, что и глоссарий:
   высота живёт на max-height, скрипт подставляет scrollHeight.
   Нижний отступ перенесён на абзац, иначе он торчал бы при max-height: 0. */
.faq__a {
  padding: 0 4.5rem 0 1.5rem;
  font-size: clamp(0.875rem, 1.05vw, 0.9375rem); font-weight: 500; line-height: 1.7; color: var(--s-ink2);
}

/* класс ставит сам скрипт: без него <details> работает штатно и ответ
   виден сразу, иначе при отключённом JS он остался бы схлопнутым */
.js-faq .faq__a {
  max-height: 0; overflow: hidden;
  transition: max-height .45s cubic-bezier(.2, .8, .3, 1);
}

.faq__a > p { padding-bottom: 1.375rem; }

/* ============================================================
   НАМ ДОВЕРЯЮТ
   ============================================================ */
/* stretch, а не start: правую колонку задают документы в полную высоту,
   левая тянется за ней, иначе низ блока рвется ступенькой */
.trust { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1rem; align-items: stretch; margin-top: 1.5rem; }

/* четыре строки «цифра + описание» делят высоту поровну и вместе
   выходят ровно в высоту карточки с лицензией */
.stats { display: flex; flex-direction: column; gap: 0.75rem; }

/* поле 5px по кругу: плашка с цифрой садится вплотную к краю карточки
   и занимает её высоту, поэтому отбивку держит сама карточка, а не паддинги */
.stat {
  flex: 1; display: flex; align-items: stretch; gap: 0.875rem;
  background: var(--s-card); border: 0.0625rem solid var(--s-line); border-radius: var(--r-lg);
  padding: 0.3125rem; box-shadow: var(--s-shadow);
  transition: border-color .2s ease;
}

.stat:hover { border-color: var(--s-line-2); }

/* ширина плашки фиксированная: иначе описания начинаются на разных вертикалях */
.stat__n {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 11.75rem; padding: 0.5rem 0.75rem; border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--blue), var(--blue-d));
  color: var(--white); font-size: clamp(1.25rem, 1.85vw, 1.625rem); font-weight: 800;
  letter-spacing: -0.024em; line-height: 1.1; text-align: center;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

.stat__t {
  align-self: center; padding-right: 0.875rem;
  font-size: clamp(0.8125rem, 1vw, 0.9375rem); font-weight: 500; line-height: 1.45; color: var(--s-ink2);
}

.licence {
  display: flex; flex-direction: column;
  border: 0.0625rem solid var(--s-line); border-radius: var(--r-xl);
  background: var(--s-card); padding: 1.25rem 1.375rem; box-shadow: var(--s-shadow);
}

.licence__head { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; margin-bottom: 0.875rem; }
.licence__t { font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.014em; max-width: 26ch; color: var(--s-ink); }
/* подложка бейджа синяя: в самом PNG фон уже прозрачный (палитра + tRNS) */
.licence__badge { flex: none; width: 6.5rem; height: auto; border-radius: var(--r-md); background: #163BAC; padding: 0.375rem 0.625rem; }

.licence__docs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* страницы во всю ширину карточки и целиком: пропорция родная, 765×1085,
   contain страхует от растяжения. Высоту блока задают именно они — левая
   колонка подстраивается */
.licence__docs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; flex: 1; align-content: center; }
.licence__docs img {
  width: 100%; height: auto; aspect-ratio: 765 / 1085; object-fit: contain;
  border-radius: var(--r-md); background: #fff; border: 0.0625rem solid var(--s-line);
}

/* ============================================================
   ФИНАЛЬНЫЙ ЭКРАН
   ============================================================ */
.final { padding-top: 2rem; padding-bottom: 2.5rem; }
/* то же правило, что на первом экране: высоту задает левая колонка,
   карточка с фото вынута из потока и растянута по правой */
.final .hero-inner { align-items: stretch; }
.final .hero-right { position: relative; display: block; }
.final .hero-card { position: absolute; inset: 0; min-height: 0; }

.final-h2 {
  font-size: clamp(1.625rem, 3.1vw, 2.625rem);
  padding-top: 0; max-width: 22ch; color: var(--white);
}
.final-h2::before { display: none; }

/* ============================================================
   ГЛОССАРИЙ
   ============================================================ */
/* единый раскрывающийся список: кнопка-заголовок + тело на max-height */
.gbtn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 1.75rem; border-radius: var(--r-xl); cursor: pointer; text-align: left;
  border: 0.0625rem solid var(--s-line); background: var(--s-card); color: inherit;
  font-family: inherit; box-shadow: var(--s-shadow);
  transition: border-color .3s ease;
}

.gbtn:hover { border-color: var(--s-line-2); }

.gbtn__head { display: flex; align-items: center; gap: 0.875rem; flex-wrap: wrap; }

.gbtn__lbl {
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.2; color: var(--s-ink);
}

/* счётчик рядом с названием: сколько терминов внутри */
.gbtn__count {
  padding: 0.3125rem 0.75rem; border-radius: 6.25rem;
  background: var(--s-wash); color: var(--s-acc);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}

.gbtn__arw {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  border: 0.0625rem solid var(--s-line-2); background: transparent; color: var(--s-ink3);
  transition: transform .4s cubic-bezier(.2, .8, .3, 1), background .3s ease,
              color .3s ease, border-color .3s ease;
}

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

.gbtn:hover .gbtn__arw { color: var(--s-acc); border-color: var(--s-line-2); }

/* плюс превращается в крестик поворотом на 45° */
.gwrap.open .gbtn__arw {
  transform: rotate(45deg);
  background: var(--blue); border-color: var(--blue); color: var(--white);
}

.gbody { max-height: 0; overflow: hidden; transition: max-height .55s cubic-bezier(.2, .8, .3, 1); }

.gloss {
  margin-top: 1rem; border-radius: var(--r-xl); overflow: hidden;
  background: var(--s-card); border: 0.0625rem solid var(--s-line); box-shadow: var(--s-shadow);
}

.gloss__item { display: grid; grid-template-columns: 10rem 1fr; gap: 1.25rem; padding: 1.125rem 1.5rem; }
.gloss__item + .gloss__item { border-top: 0.0625rem solid var(--s-line); }

.gloss dt { font-size: clamp(0.9375rem, 1.1vw, 1rem); font-weight: 800; color: var(--s-acc); letter-spacing: -0.01em; }
.gloss dd { font-size: clamp(0.875rem, 1.05vw, 0.9375rem); font-weight: 500; line-height: 1.65; color: var(--s-ink2); }

/* ============================================================
   ПОПАП ЗАЯВКИ
   ============================================================ */
.popup { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.popup[hidden] { display: none; }

.popup__overlay { position: absolute; inset: 0; background: rgba(0, 33, 88, .55); }

.popup__box {
  position: relative; width: 100%; max-width: 32rem; max-height: 88vh; overflow: auto;
  padding: 2.25rem; border: 0.0625rem solid rgba(255, 255, 255, .9); border-radius: var(--r-xl);
  background: linear-gradient(140deg, #ffffff, #E4E9F0);
  box-shadow: 0 0.75rem 2rem rgba(0, 33, 88, .2);
}

.popup__close {
  position: absolute; top: 1rem; right: 1rem; width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  border: 0.0625rem solid rgba(22, 59, 172, .18); border-radius: 50%;
  background: transparent; color: rgba(0, 33, 88, .55); cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.popup__close:hover { color: var(--blue-d); border-color: var(--blue); }
.popup__close svg { width: 1.125rem; height: 1.125rem; }

.popup__title { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.018em; color: var(--navy); }
.popup__price { margin-top: 0.375rem; font-size: 0.9375rem; color: rgba(0, 33, 88, .6); }
.popup__embed { margin-top: 1.5rem; min-height: 7.5rem; }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 1200px) {
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1000px) {
  .states { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { grid-template-columns: 1fr; }
  /* в одну колонку выравнивать не с чем — карточка возвращается в поток */
  .hero .hero-right, .final .hero-right { position: static; display: flex; }
  .hero .hero-card, .final .hero-card, .hero-card { position: static; min-height: 15rem; }
  .split, .trust, .expert, .res, .incl { grid-template-columns: 1fr; }
  /* цена и условия — в одну колонку, кнопка и подпись уходят влево */
  .pricecard { flex-direction: column; align-items: flex-start; min-height: 0; }
  .pricecard__side--r { align-items: flex-start; text-align: left; }
  /* в узкой колонке кнопка и цена не встают в строку — разделитель снимается */
  .terms__cta { flex-direction: column; align-items: flex-start; gap: 0.625rem; width: 100%; }
  .terms__cta .price { padding-left: 0; border-left: 0; }
  /* в одну колонку выравнивать не с чем: фото возвращается к своей
     пропорции, иначе с flex-basis: 0 оно схлопнулось бы в полоску */
  .split__photo { flex: none; height: auto; aspect-ratio: 900 / 506; object-position: center 32%; }
  /* на узком экране лист не крутим — он должен читаться и не вылезать */
  .doc__page { transform: none; }
  .doc__sheet--2 { transform: rotate(1deg) translate(0.375rem, 0.375rem); }
  .doc__sheet--3 { display: none; }
  .tl-lead { max-width: 100%; }
  .tl { grid-template-columns: repeat(2, 1fr); row-gap: 1.75rem; }
  .how-cta { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .how-cta__act { grid-column: 1 / -1; flex-direction: row; align-items: center;
                  justify-content: flex-start; flex-wrap: wrap; gap: 0.75rem 1.25rem; }
  .grid--3 { grid-template-columns: 1fr 1fr; }
  /* колонки встают друг под друга — композиция уходит вниз, под фото */
  .hero-art { top: auto; height: 46%; border-radius: 0 0 var(--r-xl) var(--r-xl); }
  /* колонки встают друг под друга — синий собирается внизу, под фотографией.
     Только первый экран: у финального плашка тёмная, и общий селектор
     перекрашивал её в светлое, а текст на ней остаётся белым */
  .hero .hero-panel {
    background:
      radial-gradient(70% 34% at 84% 96%, rgba(0, 33, 88, .58) 0%, rgba(0, 33, 88, 0) 68%),
      radial-gradient(76% 36% at 40% 88%, rgba(22, 59, 172, .5) 0%, rgba(22, 59, 172, 0) 70%),
      radial-gradient(86% 40% at 60% 74%, rgba(160, 172, 194, .46) 0%, rgba(160, 172, 194, 0) 72%),
      #EEF1F5;
  }
}

@media (max-width: 700px) {
  .grid, .grid--3, .grid--4, .grid--5, .states, .tl, .incl, .licence__docs { grid-template-columns: 1fr; }
  /* на узком экране высоту делить не с чем — карточки идут по своему тексту */
  .stat { flex: none; }
  /* таймлайн разворачивается в вертикальный: короткий отрезок между карточками */
  .tl { row-gap: 2.5rem; }
  .tl__item::after {
    content: ''; display: block; position: absolute;
    /* центр узла: отступ слева 1.875rem + половина круга 1.625rem */
    top: auto; right: auto; left: 3.5rem; bottom: -2.5rem;
    width: 0.125rem; height: 2.5rem; transform: translateX(-50%);
    border-radius: 0.125rem;
    background: linear-gradient(180deg, var(--blue-lt), var(--blue));
  }
  .tl__item--last::after { display: none; }
  .how-cta { grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem 1.25rem; }
  .how-cta__act { align-items: stretch; flex-direction: column; gap: 0.625rem; }
  .how-cta__price { align-items: flex-start; border-left: 0; padding: 0; }
  .how-cta__act .btn { order: 3; width: 100%; }
  .how-cta__act .price { order: 1; }
  .how-cta__note { order: 2; }
  .hero-h1 .ln { display: inline; }
  .hero-h1 .ln:last-child { color: inherit; }
  .btn { width: 100%; padding: 1.0625rem 1.5rem; }
  .ctarow { align-items: stretch; text-align: center; }
  /* в узкой колонке кнопка и подпись в строку не встают */
  .hero .ctarow, #who .ctarow, #states .ctarow, .final .ctarow { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .hero .ctarow .price, #who .ctarow .price, #states .ctarow .price,
  .final .ctarow .price { padding-left: 0; border-left: 0; }
  /* строка «цифра + описание» сохраняется и на телефоне, плашка только уже */
  .stat { gap: 0.625rem; }
  .stat__n { width: 6.5rem; font-size: 1.0625rem; padding: 0.5rem 0.375rem; }
  .stat__t { padding-right: 0.5rem; }
  .licence__head { flex-direction: column; align-items: flex-start; }
  .gloss__item { grid-template-columns: 1fr; gap: 0.375rem; }
  .gbtn { padding: 1.25rem; gap: 1rem; }
  .faq__q { padding: 1.125rem; }
  .faq__a { padding: 0 1.125rem 1.25rem; }
  .popup__box { padding: 1.75rem 1.25rem; }
}

/* ============================================================
   ФУТЕР ZEROCODER (переиспользуемый блок)
   Структура — со svoy-ii-kontur-sep26, подложка тёмно-синяя:
   подвал держит нижний контрастный край страницы.
   ============================================================ */
.footer-fade { display: none; }

.footer {
  --zc-space-3: 0.75rem;
  --zc-space-4: 1rem;
  --zc-space-5: 1.5rem;
  --zc-space-6: 2rem;
  --zc-space-7: 3rem;
  --zc-space-8: 4rem;
  --zc-accent: #7C93D4;
  --zc-easing: cubic-bezier(0.22, 1, 0.36, 1);

  background: linear-gradient(160deg, #081b42 0%, #0a2455 58%, var(--navy) 100%);
  border-top: 0.0625rem solid rgba(255, 255, 255, .08);
  color: rgba(228, 234, 243, 0.7);
  padding: 3.5rem 0 var(--zc-space-6);
  font-size: 0.9375rem;
  font-family: 'Manrope', Arial, sans-serif;
}

.footer__container { max-width: var(--page); margin: 0 auto; padding: 0 calc(var(--edge) + var(--gutter)); }

.footer__top {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--zc-space-8); padding-bottom: var(--zc-space-7);
  border-bottom: 0.0625rem solid rgba(255, 255, 255, .1);
}

.footer__brand { display: flex; flex-direction: column; gap: var(--zc-space-5); }
.footer__logo { display: inline-flex; align-items: center; text-decoration: none; }
.footer__logo-img { display: block; height: 2.25rem; width: auto; max-width: 13.75rem; }
.footer__address { display: block; font-size: 0.8125rem; line-height: 1.45; color: rgba(228, 234, 243, 0.55); }

.footer__badges {
  display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem;
  background: rgba(255, 255, 255, 0.07); border-radius: var(--r-lg); width: fit-content;
}

.footer__badge-img { display: block; height: 2.75rem; width: auto; }
.footer__badge-img--rk { height: 3rem; }
.footer__badge-img--sk { height: 2.25rem; }

.footer__col { font-size: 0.9375rem; }

.footer__col h4 {
  font-size: 0.8125rem; color: rgba(228, 234, 243, 0.45); margin: 0 0 var(--zc-space-4);
  font-weight: 500; letter-spacing: 0; text-transform: none;
}

.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--zc-space-3); }
.footer__col a { color: #fff; text-decoration: none; transition: color 0.2s var(--zc-easing); }
.footer__col a:hover { color: var(--zc-accent); }

.footer__col--contacts { display: flex; flex-direction: column; gap: var(--zc-space-5); }
.footer__contact-block h4 { margin-bottom: 0.25rem; }

.footer__contact-value {
  display: inline-block; font-size: 1.5rem; font-weight: 700; color: #fff;
  letter-spacing: -0.01em; text-decoration: none; transition: color 0.2s;
}

.footer__contact-value:hover { color: var(--zc-accent); }

.footer__socials { display: flex; gap: 0.75rem; margin-top: 0.375rem; }

.footer__social {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center;
  transition: transform 0.2s var(--zc-easing), box-shadow 0.2s;
}

.footer__social--tg { background: #2aabee; }
.footer__social--wa { background: #25d366; }
.footer__social--yt { background: #ff0000; }
.footer__social--max { overflow: hidden; }
.footer__social-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.footer__social:hover { transform: translateY(-0.125rem) scale(1.06); box-shadow: 0 0.5rem 1.25rem -0.375rem rgba(0, 0, 0, 0.5); }
.footer__social svg { width: 1.375rem; height: 1.375rem; }

.footer__bottom {
  padding-top: var(--zc-space-6); display: flex; justify-content: space-between;
  gap: var(--zc-space-5); flex-wrap: wrap; font-size: 0.8125rem; color: rgba(228, 234, 243, 0.45);
}

.footer__copy { letter-spacing: 0.01em; }
.footer__legal { display: flex; gap: var(--zc-space-7); flex-wrap: wrap; }

@media (max-width: 959px) { .footer__top { grid-template-columns: 1fr 1fr; gap: var(--zc-space-6); } }
@media (max-width: 639px) { .footer__top { grid-template-columns: 1fr; } }

/* ============================================================
   КТО МЫ — блок перенесён с openai-praktikum (там он тёмный).
   Разметка и классы те же (.whois-*, .research, .clients, .gov-*,
   .media-logos, .corp-*), цвета — через секционные токены --s-*.
   Размеры и сетка сохранены, переведены в rem.
   ============================================================ */
.whois h2 { max-width: 34ch; }
.whois h2 em { font-style: normal; color: var(--blue); }

/* подзаголовки внутри секции */
.whois-h {
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: 1.15;
  color: var(--s-ink);
  margin: 4rem 0 1.5rem;
  max-width: 40ch;
  text-wrap: balance;
}

/* общая карточка блока */
.whois-lead, .whois-stat, .whois-card, .research, .gov-card, .gov__photo {
  background: var(--s-card);
  border: 1px solid var(--s-line);
  border-radius: var(--r-xl);
  box-shadow: var(--s-shadow);
}

/* --- верх: «лидеры в обучении ИИ» + две цифры --- */
.whois-top {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.125rem; margin-top: 2.5rem; align-items: stretch;
}
.whois-lead {
  background: linear-gradient(135deg, var(--white) 0%, var(--s-card-2) 100%);
  padding: 1.625rem;
  display: flex; flex-direction: column;
}
.whois-lead__label {
  font-weight: 700; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  color: var(--s-ink); margin-bottom: 1rem;
}
.whois-lead__media {
  flex: 1; min-height: 0;
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--s-line);
}
.whois-lead__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.whois-stats { display: flex; flex-direction: column; gap: 1.125rem; }
.whois-stat {
  flex: 1; display: flex; align-items: center; gap: 1.375rem;
  padding: 1.75rem 1.875rem;
  border-radius: var(--r-lg);
  transition: border-color .22s ease, box-shadow .22s ease;
}
.whois-stat:hover { border-color: var(--s-line-2); box-shadow: 0 0.75rem 2rem -1rem rgba(0, 33, 88, .25); }
.whois-stat__ico { width: 4.75rem; height: 4.75rem; min-width: 4.75rem; }
.whois-stat__ico img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0.5rem 0.75rem rgba(0, 33, 88, .18)); }
.whois-stat p {
  margin: 0; font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--s-ink);
}
.whois-stat b { color: var(--blue); font-weight: 800; font-variant-numeric: tabular-nums; }

/* --- низ: вузы и лицензии --- */
.whois-bottom {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.125rem; margin-top: 1.125rem; align-items: stretch;
}
.whois-card { padding: 1.625rem; display: flex; flex-direction: column; }
.whois-card__label {
  display: block; font-weight: 700; font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  color: var(--s-ink); margin-bottom: 1.125rem;
}
.whois-card__label--flat { margin: 0; }
.whois-card__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.125rem; }
.whois-sk { height: 3rem; width: auto; flex-shrink: 0; border-radius: 0.5rem; }

/* плитки вузов тянутся по высоте карточки, логотип целиком */
.whois-logos { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 0.875rem; }
.whois-logo {
  background: var(--white); border: 1px solid var(--s-line); border-radius: var(--r-md);
  height: 100%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.whois-logo img { width: 100%; height: 100%; object-fit: contain; padding: 0.375rem; }

.whois-lic { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.whois-lic img { width: 100%; border-radius: var(--r-md); border: 1px solid var(--s-line); }

/* --- исследование --- */
.research { display: flex; align-items: stretch; overflow: hidden; }
.research__photo { width: 42%; min-width: 20rem; flex-shrink: 0; position: relative; }
.research__photo img { width: 100%; height: 100%; object-fit: cover; }
.research__body { flex: 1; padding: 2rem; }
.research__body h4 {
  margin: 0 0 0.875rem; font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight: 700; line-height: 1.35; color: var(--s-ink);
}
.research__body p { margin: 0; max-width: 86ch; font-size: 0.9375rem; line-height: 1.75; color: var(--s-ink2); }
.research__body strong { color: var(--blue-d); }

/* --- клиенты и СМИ: логотипы на белых плитках --- */
.clients { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.75rem; }
.media-logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; }
.client, .media-logo {
  background: var(--white); border: 1px solid var(--s-line); border-radius: var(--r-md);
  aspect-ratio: 3 / 2; padding: 0.875rem;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.client:hover, .media-logo:hover { transform: translateY(-3px); box-shadow: 0 0.75rem 1.75rem -1rem rgba(0, 33, 88, .3); }
.client img, .media-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* --- госслужащие --- */
.gov { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1.125rem; align-items: stretch; }
.gov__left { display: flex; flex-direction: column; gap: 1.125rem; }
.gov-card { padding: 1.75rem 1.875rem; }
.gov-card__ico {
  width: 2.125rem; height: 2.125rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-lt), var(--blue-d));
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.9375rem; margin-bottom: 1.125rem;
}
.gov-card h4 {
  margin: 0 0 0.75rem; max-width: 72ch;
  font-size: clamp(0.9375rem, 1.25vw, 1.0625rem);
  font-weight: 700; line-height: 1.4; color: var(--s-ink);
}
.gov-card__desc { margin: 0 0 0.875rem; max-width: 72ch; font-size: 0.9375rem; line-height: 1.7; color: var(--s-ink2); }
.gov-card__desc strong { color: var(--s-ink); }
.gov-regions { padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3125rem; font-size: 0.84375rem; color: var(--s-ink2); }
.gov-regions li::before { content: "—\00a0"; color: var(--blue); }
.gov-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem 1.875rem; font-size: 0.84375rem; color: var(--s-ink2); }

.gov__photo { overflow: hidden; min-height: 25rem; }
.corp-slider { position: relative; height: 100%; min-height: 25rem; }
.corp-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.corp-slide.is-active { opacity: 1; }
.corp-slide img { width: 100%; height: 100%; object-fit: cover; }
.corp-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 2.375rem; height: 2.375rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(0, 33, 88, .72); color: var(--white);
  font-size: 0.9375rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.corp-btn:hover { background: var(--blue); }
.corp-btn--prev { left: 0.875rem; }
.corp-btn--next { right: 0.875rem; }
.corp-dots { position: absolute; left: 50%; bottom: 0.875rem; transform: translateX(-50%); display: flex; gap: 0.375rem; z-index: 2; }
.corp-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, .55); cursor: pointer; }
.corp-dot.is-active { background: var(--white); }

/* --- лайтбокс для рейтинга и лицензий --- */
.zoomable { cursor: zoom-in; transition: opacity .2s ease; }
.zoomable:hover { opacity: 0.86; }
.lightbox {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0, 33, 88, .82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center;
  padding: 2rem; cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(1100px, 92vw); max-height: 88vh; border-radius: var(--r-md); box-shadow: 0 2.5rem 5.5rem -2rem rgba(0, 0, 0, .6); }
.lightbox__close {
  position: absolute; top: 1.125rem; right: 1.125rem;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .12);
  color: var(--white); font-size: 1.375rem; line-height: 1; cursor: pointer;
}

@media (max-width: 1024px) {
  .whois-top, .whois-bottom, .gov { grid-template-columns: 1fr; }
  .clients { grid-template-columns: repeat(4, 1fr); }
  .media-logos { grid-template-columns: repeat(3, 1fr); }
  .research { flex-direction: column; }
  .research__photo { width: 100%; min-width: 0; min-height: 15rem; }
  .whois-logo { aspect-ratio: 694 / 524; height: auto; }
}
@media (max-width: 700px) {
  .whois-h { margin: 3rem 0 1.25rem; }
  .whois-top, .whois-bottom, .gov, .gov__left { gap: 0.75rem; }
  .whois-stat { padding: 1.25rem; gap: 1rem; flex-direction: column; align-items: flex-start; }
  .whois-stat__ico { width: 3.75rem; height: 3.75rem; min-width: 3.75rem; }
  .clients { grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
  .media-logos { grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
  .research__body { padding: 1.375rem; }
  .gov-card { padding: 1.375rem; }
  .gov-grid2 { grid-template-columns: 1fr; gap: 0.25rem; }
  .gov__photo, .corp-slider { min-height: 16.25rem; }
  .whois-card { padding: 1.25rem; }
}

/* перенос строки заголовка только на десктопе */
@media (max-width: 700px) { .br-desk { display: none; } }

/* ============================================================
   УРОК «ДОКУМЕНТЫ ПОД ЗАЩИТОЙ» — новые элементы поверх
   композиции консультации. Цвета только из палитры :root
   и секционных токенов --s-*.
   ============================================================ */

/* ---------- первый экран ---------- */
.hero-h1 { font-size: clamp(2.25rem, 5vw, 4.25rem); }
.hero-sub {
  margin-top: 0.875rem; max-width: 30ch;
  font-size: clamp(1.125rem, 1.8vw, 1.625rem); font-weight: 700;
  line-height: 1.25; letter-spacing: -0.016em; color: var(--navy); text-wrap: balance;
}
.hero-lead--strong { font-weight: 700; color: var(--navy); }
.hero-lead + .hero-lead { margin-top: 0.75rem; }
.price b { color: var(--s-ink); font-weight: 800; }
.hero .price b { color: var(--blue-d); }

/* ---------- зачем нужен анонимизатор ---------- */
.fact--text { margin-top: 1.5rem; align-items: center; }
.fact--text .fact__t { margin-top: 0; }

/* пара листов «до / после»: исходник чуть повернут и лежит позади */
.clean {
  display: grid; grid-template-columns: minmax(0, 1fr) 2.75rem minmax(0, 1fr);
  align-items: center; gap: 0.75rem;
}
.clean__page {
  display: flex; flex-direction: column; gap: 0.625rem;
  background: var(--white); border: 0.0625rem solid var(--s-line);
  border-radius: var(--r-xl); padding: clamp(1.125rem, 1.8vw, 1.75rem);
  box-shadow: 0 1rem 2.25rem rgba(0, 33, 88, .10);
}
.clean__page--raw  { transform: rotate(-1.6deg); }
.clean__page--done { transform: rotate(1.2deg); border-color: rgba(22, 59, 172, .32); }

.clean__bar {
  display: block; height: 0.4375rem; border-radius: 0.25rem;
  background: rgba(0, 33, 88, .09); flex: none;
}
.clean__row { display: flex; align-items: center; gap: 0.5rem; min-height: 1.5rem; }

/* данные в документе: сырые — подсвечены как найденные, очищенные — метки */
.pd {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 0.25rem 0.5rem; border-radius: 0.375rem;
  font-size: clamp(0.6875rem, 0.85vw, 0.8125rem); font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.pd--raw { color: var(--navy); background: rgba(22, 59, 172, .10); box-shadow: inset 0 0 0 0.0625rem rgba(22, 59, 172, .28); }
.pd--tag { color: var(--white); background: linear-gradient(140deg, var(--blue-lt), var(--blue-d)); letter-spacing: .04em; }

.clean__arrow {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center; color: var(--white);
  background: linear-gradient(140deg, var(--blue-lt), var(--blue-d));
  box-shadow: 0 0.5rem 1.125rem rgba(22, 59, 172, .24);
  position: relative; z-index: 2;
}
.clean__arrow svg { width: 1.25rem; height: 1.25rem; }
.clean__arrow--sm { width: 2rem; height: 2rem; }
.clean__arrow--sm svg { width: 1rem; height: 1rem; }

/* ---------- программа: семь шагов ---------- */
#program {
  background:
    radial-gradient(40% 62% at 86% 40%, rgba(22, 59, 172, .10) 0%, rgba(22, 59, 172, 0) 68%),
    radial-gradient(36% 56% at 60% 36%, rgba(22, 59, 172, .05) 0%, rgba(22, 59, 172, 0) 68%),
    linear-gradient(180deg, var(--bg) 0%, var(--mist) 100%);
}
#program .how-note b { color: var(--blue-d); font-weight: 800; }
.tl--7 { row-gap: 1.75rem; }
.tl--7 .tl__card { gap: 0.75rem; }
/* насыщенность номеров растёт от 01 к 07 */
.tl--7 .tl__item:nth-child(1) .tl__node { background: linear-gradient(150deg, #7C93D4, #3a5cc4); }
.tl--7 .tl__item:nth-child(2) .tl__node { background: linear-gradient(150deg, #3a5cc4, var(--blue-lt)); }
.tl--7 .tl__item:nth-child(3) .tl__node { background: linear-gradient(150deg, var(--blue-lt), #163BAC); }
.tl--7 .tl__item:nth-child(4) .tl__node { background: linear-gradient(150deg, #163BAC, var(--blue)); }
.tl--7 .tl__item:nth-child(5) .tl__node { background: linear-gradient(150deg, var(--blue), var(--blue-d)); }
.tl--7 .tl__item:nth-child(6) .tl__node { background: linear-gradient(150deg, var(--blue-d), #10308f); }
.tl--7 .tl__item:nth-child(7) .tl__node { background: linear-gradient(150deg, #10308f, var(--navy)); }

/* пятый шаг шире: текст слева, окна «исходник → очищено» справа */
.tl__item--wide { grid-column: span 2; }
.tl__card--split { flex-direction: row; align-items: center; gap: 1.25rem; }
.tl__txt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }

.win-pair { flex: 1.1 1 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr); align-items: center; gap: 0.5rem; }
.win {
  display: flex; flex-direction: column; gap: 0.4375rem;
  background: var(--white); border: 0.0625rem solid var(--s-line);
  border-radius: var(--r-md); padding: 0 0.625rem 0.75rem; overflow: hidden;
  box-shadow: 0 0.5rem 1.25rem rgba(0, 33, 88, .08);
}
.win__bar {
  display: flex; gap: 0.25rem; margin: 0 -0.625rem 0.25rem; padding: 0.4375rem 0.625rem;
  background: var(--s-card-2); border-bottom: 0.0625rem solid var(--s-line);
}
.win__bar i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: rgba(22, 59, 172, .3); }
.win__line { display: flex; min-height: 1.25rem; align-items: center; }
.win .pd { font-size: 0.6875rem; padding: 0.1875rem 0.375rem; }

/* ---------- что останется после урока ---------- */
.incl--cert { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 1.5rem; margin-top: 1.5rem; align-items: center; }
.incl--cert .incl__col { padding: 1.5rem 1.625rem; }

.cert-stage { display: flex; justify-content: center; padding: 1rem 0.5rem; }
.cert {
  position: relative; width: 100%; max-width: 30rem; aspect-ratio: 1.414 / 1;
  display: flex; flex-direction: column;
  padding: clamp(1.25rem, 2.2vw, 2rem);
  border-radius: var(--r-lg); color: var(--white);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(22, 59, 172, .45) 0%, rgba(22, 59, 172, 0) 60%),
    linear-gradient(145deg, var(--navy) 0%, #002158 55%, var(--blue-d) 100%);
  box-shadow: 0 1.5rem 3rem rgba(0, 33, 88, .28), 0 0 0 0.375rem rgba(255, 255, 255, .9), 0 0 0 0.4375rem var(--s-line);
  transform: rotate(-3deg);
}
.cert::after {
  content: ''; position: absolute; inset: 0.625rem; border-radius: calc(var(--r-lg) - 0.25rem);
  border: 0.0625rem solid rgba(255, 255, 255, .22); pointer-events: none;
}
.cert__top { display: flex; align-items: center; justify-content: space-between; }
.cert__logo { width: clamp(6rem, 9vw, 8rem); height: auto; }
.cert__seal {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center; color: var(--navy);
  background: linear-gradient(140deg, #ffffff, var(--mist));
}
.cert__seal svg { width: 1.25rem; height: 1.25rem; }
.cert__kind {
  margin-top: auto; font-size: 0.75rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase; color: var(--blue-s);
}
.cert__name { margin-top: 0.375rem; font-size: clamp(1.375rem, 2.3vw, 2rem); font-weight: 800; letter-spacing: -0.024em; line-height: 1.1; }
.cert__rule { display: block; width: 3rem; height: 0.1875rem; border-radius: 0.1875rem; margin: 0.75rem 0; background: var(--blue-s); }
.cert__course { font-size: clamp(0.9375rem, 1.2vw, 1.0625rem); font-weight: 700; color: rgba(228, 234, 243, .9); }
.cert__foot { display: flex; justify-content: space-between; margin-top: auto; padding-top: 1rem; }
.cert__foot .clean__bar { background: rgba(255, 255, 255, .22); height: 0.3125rem; }

.kit-lead { margin-top: 2.25rem; }
.pl__kicker {
  margin-bottom: 0.375rem; font-size: 0.75rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--s-acc);
}
.pl .pl__kicker { padding-top: 0; }
.small-note {
  margin-top: 1rem; max-width: 80ch;
  font-size: 0.8125rem; font-weight: 500; line-height: 1.55; color: var(--s-ink3);
}

/* ---------- нужен ли опыт ---------- */
.sec-lead__yes { color: var(--white); font-weight: 800; }
#who .sec-lead { font-size: clamp(1rem, 1.3vw, 1.1875rem); }
.price--2l { flex-direction: column; align-items: flex-start !important; justify-content: center; gap: 0.125rem; line-height: 1.4; }
#who .price { color: var(--s-ink2); }
#who .price b { color: var(--white); }

/* ---------- спикер ---------- */
#expert .expert { grid-template-columns: clamp(16rem, 28vw, 25rem) 1fr; align-items: start; }
#expert .expert__photo { aspect-ratio: 941 / 1226; height: auto; object-position: center top; }
.expert__tags li { line-height: 1.35; }
.regalia { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem 1.5rem; margin-top: 0.5rem; }
.regalia li {
  position: relative; padding-left: 1.125rem;
  font-size: clamp(0.875rem, 1.05vw, 0.9375rem); font-weight: 500; line-height: 1.55; color: var(--s-ink2);
}
.regalia li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 0.4375rem; height: 0.4375rem; border-radius: 50%;
  background: linear-gradient(140deg, var(--blue-lt), var(--blue-d));
}
.regalia b { color: var(--s-ink); font-weight: 700; }

/* ---------- кому полезен урок ---------- */
.states__k { margin-top: 1.75rem; margin-bottom: 0; }
.states--grp { margin-top: 0.875rem; }
.scard p { font-weight: 600; color: var(--s-ink); }

/* ---------- ограничения прототипа: мелкий текст, блок доверия ---------- */
.sec--tight { padding: 0 0 clamp(2.5rem, 5vw, 3.75rem); }
.terms--limits { justify-content: flex-start; flex-wrap: nowrap; align-items: flex-start; gap: 1rem; margin-top: 0; padding: 1.125rem 1.5rem; }
.terms__ic {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--r-md);
  display: grid; place-items: center; color: var(--blue-d);
  background: rgba(255, 255, 255, .8); border: 0.0625rem solid rgba(22, 59, 172, .16);
}
.terms__ic svg { width: 1.25rem; height: 1.25rem; }
.terms--limits .terms__h { font-size: 0.9375rem; }
.terms--limits .terms__p { font-size: 0.8125rem; line-height: 1.6; max-width: 110ch; }

/* ---------- финальный экран ---------- */
.final-h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
.final-sub {
  margin-top: 0.625rem; font-size: clamp(1.0625rem, 1.6vw, 1.5rem); font-weight: 700;
  line-height: 1.25; letter-spacing: -0.014em; color: var(--blue-s);
}
.final .note { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: var(--white); }
.final .price b { color: var(--white); }
.bonus {
  display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem;
  padding-top: 1.125rem; border-top: 0.0625rem solid rgba(255, 255, 255, .16);
  max-width: 34rem;
}
.bonus__ic { flex: none; width: 1.5rem; height: 1.5rem; color: var(--blue-s); }
.bonus p { font-size: 0.9375rem; font-weight: 500; line-height: 1.5; color: rgba(228, 234, 243, .85); }
.bonus__k { font-weight: 800; color: var(--white); }

@media (max-width: 1200px) {
  .tl__card--split { flex-direction: column; align-items: stretch; }
}
@media (max-width: 1000px) {
  .tl__item--wide { grid-column: 1 / -1; }
  .incl--cert { grid-template-columns: 1fr; }
  .regalia { grid-template-columns: 1fr; }
  #expert .expert { grid-template-columns: 1fr; }
  #expert .expert__photo { max-width: 22rem; }
}
@media (max-width: 700px) {
  .tl__item--wide { grid-column: auto; }
  .clean { grid-template-columns: 1fr; justify-items: center; }
  .clean__page { width: 100%; transform: none; }
  .clean__page--done { transform: none; }
  .clean__arrow { transform: rotate(90deg); }
  .win-pair { grid-template-columns: 1fr; justify-items: stretch; }
  .win-pair .clean__arrow { justify-self: center; }
  .cert { transform: rotate(-2deg); }
  .terms--limits { flex-direction: column; }
  #who .ctarow .price { padding-left: 0; border-left: 0; }
}

#expert .expert__role { font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 800; letter-spacing: -0.02em; color: var(--s-ink); }

/* кнопки с длинной подписью держим в одну строку */
@media (min-width: 701px) { .final .btn, .hero .btn { white-space: nowrap; } }

/* ============================================================
   ПРОГРАММА УРОКА — липкая левая колонка + вертикальный таймлайн
   справа. У .sec стоит overflow: hidden, а он делает секцию
   скролл-контейнером и ломает sticky — здесь заменён на clip.
   ============================================================ */
#program { overflow: clip; }
.prog {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start;
}
.prog__side { position: sticky; top: 2rem; }
.prog__side .how-note { margin-top: 1rem; font-size: clamp(0.9375rem, 1.2vw, 1.0625rem); }

/* вертикальный таймлайн: узел слева от карточки, линия между узлами */
.tl--v { grid-template-columns: 1fr; row-gap: 1rem; margin-top: 0; }
.tl--v .tl__item { padding-top: 0; padding-left: 4.5rem; }
.tl--v .tl__item--wide { grid-column: auto; }
.tl--v .tl__node { top: 1.5rem; left: 0; }
.tl--v .tl__item::after {
  content: ''; display: block; position: absolute; z-index: 1;
  top: calc(1.5rem + 3.25rem); bottom: calc(-1rem - 1.5rem); left: 1.625rem; right: auto;
  width: 0.125rem; height: auto; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--blue-lt), var(--blue-s));
}
.tl--v .tl__item--last::after { display: none; }
.tl--v .tl__card { padding: 1.5rem 1.75rem; }

@media (max-width: 1000px) {
  .prog { grid-template-columns: 1fr; }
  .prog__side { position: static; }
  /* кнопка уходит под карточки: сначала программа, потом действие */
  .prog { display: flex; flex-direction: column; }
  .prog__side { display: contents; }
  .prog__side .ctarow { order: 3; margin-top: 0; }
  .tl--v { order: 2; margin-top: 0.5rem; }
}
@media (max-width: 1200px) and (min-width: 1001px) {
  .tl--v .tl__card--split { flex-direction: column; align-items: stretch; }
}
@media (max-width: 700px) {
  .tl--v { row-gap: 1rem; }
  .tl--v .tl__item { padding-left: 0; padding-top: 2rem; }
  .tl--v .tl__node { top: 0; left: 1.875rem; }
  /* линия только в зазоре между карточками, поверх текста не идёт */
  .tl--v .tl__item::after { left: 3.5rem; top: auto; bottom: -1rem; height: 1rem; }
  .tl--v .tl__card { padding: 2rem 1.25rem 1.25rem; }
}

/* ============================================================
   СТИЛИСТИКА УРОКА (ТЗ 29.09): спокойная деловая страница про
   защиту данных. Светлая база, глубокий синий и графит; мятный —
   только цвет очищенного, безопасного документа: метки [ИМЯ],
   галочки, щит, «готово». Кнопки остаются глубоко-синими.
   Мятный #42DDB2 взят новым оттенком — бирюза #10a184, зелёный
   #23a55e и изумруд #0FB068 заняты соседними лендингами.
   ============================================================ */
:root {
  --graphite:   #1D2735;   /* графит: заголовки и тёмные секции */
  --graphite-2: #2A3547;
  --deep:       #002158;   /* глубокий синий */
  --mint:       #42DDB2;   /* мятный — «очищено, безопасно» */
  --mint-lt:    #D9FAF0;
  --mint-wash:  rgba(66, 221, 178, .14);
  --mint-line:  rgba(66, 221, 178, .45);
  --mint-ink:   #002158;   /* текст на мятной подложке, контраст 7:1 */
}

/* текст светлых секций — графит вместо синего */
.sec, .panel-sec, body {
  --s-ink:  var(--graphite);
  --s-ink2: rgba(29, 39, 53, .74);
  --s-ink3: rgba(29, 39, 53, .54);
}
.hero-h1, .hero-sub, .hero-lead--strong, .note, .badge, .popup__title { color: var(--graphite); }
.hero-h1 .ln:last-child { color: var(--deep); }
.hero-lead { color: rgba(29, 39, 53, .72); }
.hero-note { color: rgba(29, 39, 53, .5); }

/* засечка над заголовками и точка в плашке — мятные */
h2::before, .sec--dark h2::before { background: linear-gradient(90deg, var(--mint), #26CFA1); }
.dot { background: var(--mint); box-shadow: 0 0 0 0.1875rem var(--mint-wash); }
.mk { background: linear-gradient(transparent 58%, rgba(66, 221, 178, .38) 58%); }

/* тёмные секции: графит, уходящий в глубокий синий */
.sec--dark, .hero-panel--dark {
  background: linear-gradient(145deg, var(--graphite) 0%, #0a2c6b 55%, var(--deep) 100%);
}

/* очищенные данные — мятные метки, сырые — нейтральные */
.pd--tag { color: var(--mint-ink); background: var(--mint-lt); box-shadow: inset 0 0 0 0.0625rem var(--mint-line); }
.pd--raw { color: var(--graphite); background: rgba(29, 39, 53, .07); box-shadow: inset 0 0 0 0.0625rem rgba(29, 39, 53, .16); }
.pd--mask { width: 5.5rem; height: 1.375rem; padding: 0; background: var(--mint-lt); box-shadow: inset 0 0 0 0.0625rem var(--mint-line); }
.clean__bar { background: rgba(29, 39, 53, .08); }

/* галочки «что останется» и иконки инструментов — цвет безопасного результата */
.tick--yes { color: var(--mint-ink); background: var(--mint-lt); box-shadow: inset 0 0 0 0.0625rem var(--mint-line); }
.incl__h::before { background: var(--mint); }
.regalia li::before { background: var(--mint); }
.gov-regions li::before { color: var(--mint); }

/* таймлайн программы: номера синие, последний шаг — мятный «готово» */
.tl--7 .tl__item--last .tl__node { background: linear-gradient(150deg, #42DDB2, var(--mint)); color: var(--mint-ink); }
.tl--7 .tl__item--last .tl__card { background: linear-gradient(150deg, #ffffff, #EEFCF8); border-color: var(--mint-line); box-shadow: 0 0 0 0.25rem var(--mint-wash); }
.tl--v .tl__item:nth-last-child(2)::after { background: linear-gradient(180deg, var(--deep), var(--mint)); }

/* сертификат: печать мятная */
.cert { background:
    radial-gradient(70% 90% at 100% 0%, rgba(66, 221, 178, .22) 0%, rgba(66, 221, 178, 0) 60%),
    linear-gradient(145deg, var(--graphite) 0%, #0a2c6b 55%, var(--deep) 100%); }
.cert__seal { background: var(--mint); color: var(--mint-ink); }
.cert__kind { color: var(--mint); }
.cert__rule { background: var(--mint); }

/* ограничения прототипа: щит в мятной плашке, фон спокойный, не тревожный */
.terms--limits { background: linear-gradient(120deg, #F7F8FA 0%, #EEF1F5 100%); border-color: rgba(29, 39, 53, .10); }
.terms__ic { color: var(--mint-ink); background: var(--mint-lt); border-color: var(--mint-line); }
.terms--limits .terms__h { color: var(--graphite); }
.terms--limits .terms__p { color: rgba(29, 39, 53, .7); }

.final-sub { color: #42DDB2; }
.bonus__ic { color: var(--mint); }
.price b, .hero .price b, #program .how-note b { color: var(--deep); }
.sec--dark .price b, .final .price b { color: var(--white); }

/* ---------- первый экран: документ с закрытыми данными ---------- */
.hero-card--doc {
  align-items: center; justify-content: center; padding: clamp(1.5rem, 3vw, 2.75rem);
  background: linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(228, 234, 243, .35));
  -webkit-backdrop-filter: blur(0.25rem); backdrop-filter: blur(0.25rem);
}
.hdoc { position: relative; width: 100%; max-width: 25rem; }
.hdoc__sheet--back {
  position: absolute; inset: 0; border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .7); border: 0.0625rem solid rgba(29, 39, 53, .08);
  transform: rotate(4deg) translate(0.75rem, 0.5rem);
}
.hdoc__page {
  position: relative; display: flex; flex-direction: column; gap: 0.75rem;
  padding: clamp(1.25rem, 2.2vw, 2rem);
  background: var(--white); border-radius: var(--r-xl);
  border: 0.0625rem solid rgba(29, 39, 53, .08);
  box-shadow: 0 1.5rem 3rem rgba(29, 39, 53, .16);
  transform: rotate(-2deg);
}
.hdoc__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.375rem; }
.hdoc__head .clean__bar { height: 0.625rem; background: rgba(29, 39, 53, .16); }
.hdoc__ic {
  width: 2.25rem; height: 2.25rem; border-radius: var(--r-md); flex: none;
  display: grid; place-items: center; color: var(--deep); background: rgba(0, 33, 88, .08);
}
.hdoc__ic svg { width: 1.25rem; height: 1.25rem; }
.hdoc .pd { font-size: clamp(0.75rem, 0.9vw, 0.875rem); padding: 0.3125rem 0.625rem; }
.hdoc__shield {
  position: absolute; right: -1.25rem; bottom: -1.5rem; z-index: 2;
  width: clamp(4rem, 6vw, 5.25rem); height: clamp(4rem, 6vw, 5.25rem); border-radius: 50%;
  display: grid; place-items: center; color: var(--mint-ink);
  background: var(--mint); border: 0.3125rem solid var(--white);
  box-shadow: 0 0.75rem 1.75rem rgba(29, 39, 53, .22);
}
.hdoc__shield svg { width: 48%; height: 48%; stroke-width: 1.8; }

/* ---------- схема «документ → анонимизатор → очищенная версия → нейросеть» ---------- */
.flowx {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 1fr) 1.5rem 4.75rem 1.5rem minmax(0, 1fr) 1.5rem 4.75rem;
  gap: 0.375rem;
}
.flowx__step { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; min-width: 0; }
.flowx__doc {
  width: 100%; display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--white); border: 0.0625rem solid rgba(29, 39, 53, .12);
  border-radius: var(--r-lg); padding: 1rem 0.875rem;
  box-shadow: 0 0.75rem 1.75rem rgba(29, 39, 53, .08);
}
.flowx__doc--clean { border-color: var(--mint-line); box-shadow: 0 0 0 0.25rem var(--mint-wash), 0 0.75rem 1.75rem rgba(29, 39, 53, .08); }
.flowx__doc .pd { font-size: 0.6875rem; padding: 0.1875rem 0.4375rem; }
.flowx__doc .clean__row { min-height: 1.25rem; }
.flowx__step--node { padding-top: 3.5rem; }
.flowx__node {
  width: 4.25rem; height: 4.25rem; border-radius: 50%;
  display: grid; place-items: center; color: var(--white);
  background: linear-gradient(145deg, var(--graphite-2), var(--deep));
  box-shadow: 0 0.625rem 1.5rem rgba(0, 33, 88, .24);
}
.flowx__node--shield { background: var(--mint); color: var(--mint-ink); box-shadow: 0 0 0 0.375rem var(--mint-wash), 0 0.625rem 1.5rem rgba(29, 39, 53, .16); }
.flowx__node svg { width: 1.875rem; height: 1.875rem; }
.flowx__arr { align-self: start; padding-top: 5.125rem; display: flex; justify-content: center; color: rgba(29, 39, 53, .38); }
.flowx__arr svg { width: 1.125rem; height: 1.125rem; }
.flowx__cap {
  font-size: 0.75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  text-align: center; line-height: 1.3; color: var(--s-ink2);
}

@media (max-width: 1200px) and (min-width: 1001px) {
  .res { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .flowx { grid-template-columns: 1fr; justify-items: center; gap: 0.625rem; }
  .flowx__step { width: 100%; max-width: 20rem; }
  .flowx__step--node { padding-top: 0; }
  .flowx__arr { padding-top: 0; transform: rotate(90deg); }
  .hdoc__shield { right: -0.5rem; }
}

/* на первом экране главное — название и обещание: лид-обещание крупнее,
   пояснение про 152-ФЗ — вторым планом */
.hero-sub { white-space: nowrap; font-size: min(3.72cqw, 1.625rem); }
.hero-lead--strong { font-size: min(3.05cqw, 1.1875rem); line-height: 1.45; max-width: 58ch; }
.hero-lead--strong span { display: block; }
.hero-lead--strong + .hero-lead { font-size: clamp(0.8125rem, 1vw, 0.9375rem); margin-top: 0.875rem; max-width: 60ch; }

/* тёмные секции возвращают светлые токены: графитовые --s-ink выше
   объявлены на .sec и перебивали .sec--dark с той же специфичностью */
.sec.sec--dark {
  --s-ink:  var(--white);
  --s-ink2: rgba(228, 234, 243, .80);
  --s-ink3: rgba(228, 234, 243, .58);
}
.tl--7 .tl__item.tl__item--last:nth-child(7) .tl__node { background: linear-gradient(150deg, #42DDB2, var(--mint)); color: var(--mint-ink); }

/* ============================================================
   ПЕРВЫЙ ЭКРАН — ПРАВАЯ ЧАСТЬ (29.09, новая палитра)
   Левая колонка, тексты и сетка не тронуты: меняется только фон
   плашки справа и содержимое .hero-card. Карточка остаётся на месте
   (absolute по правой колонке), но теряет рамку и заливку — визуал
   растворяется в плашке, а не стоит картинкой в прямоугольнике.
   Палитра: синий #173F8F / #2459B8 / #6D9EEB, светлые #DCE9FA /
   #EEF4FC, графит #182233 / #566172, мятный #39CFA4 / #BDF2DF.
   ============================================================ */
.hero .hero-panel {
  animation: none;
  background:
    radial-gradient(58% 76% at 6% 6%, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, 0) 64%),
    radial-gradient(56% 72% at 96% 15%, rgba(109, 158, 235, .48) 0%, rgba(109, 158, 235, 0) 72%),
    radial-gradient(54% 72% at 78% 96%, rgba(66, 221, 178, .24) 0%, rgba(66, 221, 178, 0) 72%),
    linear-gradient(135deg, #F7FBFF 0%, #DDEBFF 54%, #BFD8FF 100%);
  border-color: rgba(23, 63, 143, .08);
  box-shadow: 0 0.75rem 2rem rgba(24, 34, 51, .06);
}
/* дуги с яркими синими узлами — от прошлой палитры, справа больше не нужны */
.hero .hero-art { display: none; }

.hero-card--viz {
  background: none; border: 0; box-shadow: none; overflow: visible;
  container-type: size;
  display: grid; place-items: center;
}

/* ---------- фон: крупные полупрозрачные геометрические слои ---------- */
.hviz__bg {
  position: absolute; inset: calc(var(--hp-py) * -1) calc(var(--hp-px) * -1) calc(var(--hp-py) * -1) -2rem;
  pointer-events: none; overflow: hidden;
}
.hviz__geo { position: absolute; display: block; }
.hviz__geo--disc {
  width: 122cqw; aspect-ratio: 1; right: -38cqw; top: -22cqh; border-radius: 50%;
  background: radial-gradient(circle at 35% 40%, rgba(220, 233, 250, .78), rgba(109, 158, 235, .18) 72%);
}
.hviz__geo--slab {
  width: 82cqw; height: 48cqh; left: 0; top: 32cqh; border-radius: 2.5rem;
  background: linear-gradient(150deg, rgba(255, 255, 255, .58), rgba(238, 244, 252, .28));
  border: 1px solid rgba(255, 255, 255, .9);
  transform: rotate(-16deg);
  box-shadow: 0 2rem 4rem rgba(23, 63, 143, .05);
  display: none;
}
.hviz__geo--slab2 {
  width: 58cqw; height: 32cqh; right: -11cqw; bottom: 4cqh; border-radius: 2rem;
  background: linear-gradient(200deg, rgba(255, 255, 255, .48), rgba(220, 233, 250, .08));
  border: 1px solid rgba(109, 158, 235, .14);
  transform: rotate(18deg);
  display: none;
}
.hviz__geo--ring {
  width: 100cqw; aspect-ratio: 1; left: 0; top: 1cqh; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .76);
  box-shadow: inset 0 0 0 1px rgba(36, 89, 184, .08);
  display: none;
}

/* ---------- сцена: 100u в ширину, 154u в высоту ---------- */
.hviz {
  --u: min(1cqw, 0.64cqh);
  position: relative; width: calc(100 * var(--u)); height: calc(154 * var(--u));
}

.hviz__podium-img,
.hviz__shield-img {
  position: absolute;
  height: auto;
  pointer-events: none;
  filter: saturate(1.05) contrast(1.02);
}
.hviz__podium-img {
  left: calc(-7 * var(--u));
  top: calc(76 * var(--u));
  width: calc(106 * var(--u));
  z-index: 4;
}
.hviz__shield-img {
  left: calc(68 * var(--u));
  top: calc(74 * var(--u));
  width: calc(30 * var(--u));
  z-index: 8;
  filter: saturate(1.04) contrast(1.02);
}

/* листы позади — стекло: белая полупрозрачная заливка + размытие */
.hviz__sheet {
  position: absolute; border-radius: calc(4 * var(--u));
  background: linear-gradient(160deg, rgba(255, 255, 255, .62), rgba(238, 244, 252, .38));
  border: 1px solid rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(23, 63, 143, .07);
  z-index: 5;
}
.hviz__sheet--2 { left: calc(23 * var(--u)); top: calc(13 * var(--u)); width: calc(70 * var(--u)); height: calc(102 * var(--u)); transform: rotate(9deg); opacity: .64; }
.hviz__sheet--1 { left: calc(13 * var(--u)); top: calc(18 * var(--u)); width: calc(74 * var(--u)); height: calc(104 * var(--u)); transform: rotate(4deg); }

/* основной документ в лёгкой перспективе */
.hviz__doc {
  position: absolute; left: calc(3 * var(--u)); top: calc(20 * var(--u));
  width: calc(78 * var(--u));
  height: calc(96 * var(--u));
  box-sizing: border-box;
  display: flex; flex-direction: column; gap: calc(3 * var(--u));
  padding: calc(6.5 * var(--u)) calc(6 * var(--u));
  background: #ffffff; border-radius: calc(4 * var(--u));
  border: 1px solid rgba(23, 63, 143, .07);
  box-shadow:
    0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(24, 34, 51, .04),
    0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(23, 63, 143, .12);
  transform: perspective(calc(240 * var(--u))) rotateY(-11deg) rotateX(5deg) rotate(-2.5deg);
  transform-origin: 60% 50%;
  z-index: 6;
}
.hviz__head { display: flex; align-items: center; gap: calc(3.5 * var(--u)); }
.hviz__col { flex: 1; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.hviz__docic {
  flex: none; width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: calc(2.6 * var(--u));
  display: grid; place-items: center; color: #2459B8;
  background: linear-gradient(150deg, #EEF4FC, #DCE9FA);
  box-shadow: inset 0 1px 0 #fff, 0 calc(1 * var(--u)) calc(2.5 * var(--u)) rgba(23, 63, 143, .12);
}
.hviz__docic svg { width: 55%; height: 55%; }
.hviz__rule { display: block; height: 1px; background: rgba(86, 97, 114, .14); margin: calc(0.5 * var(--u)) 0; }
.hviz__bar {
  display: block; flex: none; height: calc(1.9 * var(--u)); border-radius: calc(1 * var(--u));
  background: rgba(86, 97, 114, .13);
}
.hviz__bar--title { height: calc(2.6 * var(--u)); background: rgba(24, 34, 51, .22); }
.hviz__row { display: flex; align-items: center; gap: calc(2 * var(--u)); }

/* очищенные данные — единственное мятное в документе */
.hviz__tag {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: calc(1 * var(--u)) calc(2.2 * var(--u));
  border-radius: calc(1.6 * var(--u));
  font-size: calc(2.7 * var(--u)); font-weight: 800; letter-spacing: .04em; line-height: 1.2;
  color: #182233; background: #BDF2DF;
  box-shadow: inset 0 0 0 1px rgba(57, 207, 164, .55);
}
.hviz__foot { display: flex; align-items: center; gap: calc(2.5 * var(--u)); margin-top: calc(1.5 * var(--u)); }
.hviz__ok {
  width: calc(5.5 * var(--u)); height: calc(5.5 * var(--u)); border-radius: 50%;
  display: grid; place-items: center; color: #ffffff; background: #39CFA4;
}
.hviz__ok svg { width: 60%; height: 60%; stroke-width: 2.4; }

/* щит — небольшой, сбоку от документа, на стеклянной подложке */
.hviz__shield {
  position: absolute; left: calc(67 * var(--u)); top: calc(83 * var(--u));
  width: calc(28 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(8 * var(--u));
  display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(189, 242, 223, .32));
  border: 1px solid rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow:
    0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(23, 63, 143, .12),
    0 0 calc(9 * var(--u)) rgba(66, 221, 178, .22);
  z-index: 5;
  display: none;
}
.hviz__shield svg {
  width: 76%; height: auto;
  filter: drop-shadow(0 calc(1.2 * var(--u)) calc(1.6 * var(--u)) rgba(47, 184, 146, .35));
}

/* в одну колонку карточка возвращается в поток — задаём ей высоту,
   сцена сама впишется по меньшей стороне */
@media (max-width: 1000px) {
  .hero .hero-panel {
    background:
      radial-gradient(90% 40% at 70% 92%, rgba(220, 233, 250, .95) 0%, rgba(220, 233, 250, 0) 72%),
      radial-gradient(70% 30% at 20% 100%, rgba(109, 158, 235, .14) 0%, rgba(109, 158, 235, 0) 70%),
      linear-gradient(180deg, #f7f9fd 0%, #f2f6fc 100%);
  }
  .hero .hero-card.hero-card--viz { height: min(118vw, 40rem); min-height: 0; }
  .hviz__bg { display: none; }
}

/* ============================================================
   ЗАГОЛОВОК ПЕРВОГО ЭКРАНА В ОДНУ СТРОКУ
   Кегль считается от ширины левой колонки: «Документы под защитой»
   занимает ≈11.8 кегля, 8.3cqw оставляет запас. Потолок — прежний.
   На телефоне остаётся перенос, иначе строка ужимается до 28px.
   ============================================================ */
.hero .hero-left { container-type: inline-size; }
@media (min-width: 701px) {
  .hero .hero-h1 { white-space: nowrap; font-size: min(8.3cqw, 4.25rem); }
  .hero .hero-h1 .ln { display: inline; }
}

/* ============================================================
   АНИМАЦИЯ ВИЗУАЛА (скрипт в конце index.html ставит .is-anim)
   ============================================================ */
.hero-card--viz.is-anim .hviz__doc .hviz__bar { transition: width .45s cubic-bezier(.22, 1, .36, 1); }
.hviz__doc > *:not(.hviz__scan) { transition: opacity .45s ease; }
.hviz__doc.is-fade > *:not(.hviz__scan) { opacity: 0; }

/* сырые данные до очистки — нейтральная графитовая плашка */
.hviz__tag { transition: background-color .3s ease, box-shadow .3s ease, color .3s ease, transform .16s ease; }
.hviz__tag.is-raw { color: #182233; background: rgba(86, 97, 114, .10); box-shadow: inset 0 0 0 1px rgba(86, 97, 114, .22); letter-spacing: 0; font-weight: 700; }
.is-anim .hviz__tag:not(.is-show) { opacity: 0; }
.hviz__tag.is-flip { transform: scaleY(0); }
/* курсор набора */
.hviz__tag.is-typing::after {
  content: ''; display: inline-block; width: 1px; height: 1.1em; margin-left: 0.125em;
  background: #2459B8; vertical-align: -0.15em; animation: hv-caret .7s steps(1) infinite;
}
@keyframes hv-caret { 50% { opacity: 0; } }

/* сканер: тонкая мятная линия с мягким шлейфом идёт сверху вниз */
.hviz__doc { overflow: hidden; }
.hviz__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 22%;
  pointer-events: none; opacity: 0; transform: translateY(-100%);
  background: linear-gradient(180deg, rgba(189, 242, 223, 0) 0%, rgba(189, 242, 223, .55) 88%, #39CFA4 100%);
  background-size: 100% 100%;
}
.hviz__scan::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #39CFA4; box-shadow: 0 0 0.5rem rgba(57, 207, 164, .8); }
.hviz__doc.is-scan .hviz__scan { animation: hv-scan 1.5s cubic-bezier(.45, 0, .55, 1) forwards; }
@keyframes hv-scan {
  0%   { opacity: 0; transform: translateY(-100%); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(460%); }
}

/* галочка внизу листа появляется, когда данные очищены */
.hviz__ok { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease; }
.is-anim .hviz__doc:not(.is-done) .hviz__ok { transform: scale(0); opacity: 0; }

/* щит коротко «откликается» на завершение очистки */
.hviz__shield-img.is-pop { animation: hv-pop .9s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes hv-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.hviz__arr::before {
  content: none;
}

@media (prefers-reduced-motion: reduce) {
  .hviz__shield-img.is-pop, .hviz__doc.is-scan .hviz__scan { animation: none; }
}

/* ============================================================
   ВИЗУАЛЬНАЯ СИСТЕМА 30.09 — B2B / SaaS: надёжность, порядок,
   чистый интерфейс. Палитра заказчика:
   тёмно-синий #002158 · синий #163BAC · фон #EEF1F5 · карточки #FFF ·
   графит #1D2735 · вторичный #667085 · мятный #42DDB2 / #26CFA1 ·
   мятные поверхности #D9FAF0 / #EEFCF8.
   Мятный — только статусы, теги, галочки, щиты, очищенные данные,
   точки и маркеры, hover. Иллюстрация справа на первом экране
   (.hero-card--viz / .hviz*) этим блоком не затрагивается.
   ============================================================ */
:root {
  --navy: #002158; --blue-d: #163BAC; --blue: #163BAC; --blue-lt: #2B4FC0; --blue-s: #7C93D4;
  --mist: #E4E9F0; --bg: #EEF1F5; --white: #FFFFFF;
  --graphite: #1D2735; --deep: #002158; --muted: #667085;
  --mint: #42DDB2; --mint-2: #26CFA1; --mint-lt: #D9FAF0; --mint-xl: #EEFCF8;
  --mint-wash: rgba(66, 221, 178, .16); --mint-line: rgba(38, 207, 161, .5); --mint-ink: #002158;
  --line-cold: #DDE3EC;
  --r-xl: 1.375rem; --r-lg: 1.25rem; --r-md: 0.75rem;
}
html, body, .bg-fx { background: var(--bg); }

/* секционные токены: светлые */
.sec, .panel-sec, body {
  --s-ink: var(--graphite); --s-ink2: var(--muted); --s-ink3: rgba(102, 112, 133, .82);
  --s-acc: var(--blue); --s-card: var(--white); --s-card-2: #F7F8FA;
  --s-line: var(--line-cold); --s-line-2: rgba(22, 59, 172, .32);
  --s-wash: rgba(22, 59, 172, .06); --s-shadow: 0 1px 2px rgba(0, 33, 88, .04);
}
/* тёмные: #002158 */
.sec.sec--dark {
  --s-ink: #FFFFFF; --s-ink2: rgba(228, 234, 243, .78); --s-ink3: rgba(228, 234, 243, .56);
  --s-acc: var(--mint); --s-card: rgba(255, 255, 255, .05); --s-card-2: rgba(255, 255, 255, .04);
  --s-line: rgba(255, 255, 255, .12); --s-line-2: rgba(66, 221, 178, .45);
  --s-wash: rgba(255, 255, 255, .06); --s-shadow: none;
}

/* ---------- фоны секций: чередование белого и серого, без ярких градиентов ---------- */
.sec { background: var(--white); }
.sec--soft, #program { background: linear-gradient(180deg, #EEF1F5 0%, #F7F8FA 100%); }
.sec--res { background: var(--white); }
.sec--dark { background: var(--navy); }
.sec--tight { background: var(--white); }

/* тонкая интерфейсная сетка — на серых и тёмных секциях, растушёвана к краям */
.sec--soft::before, #program::before, .sec--dark::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 33, 88, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 33, 88, .045) 1px, transparent 1px);
  background-size: 3rem 3rem;
  -webkit-mask-image: radial-gradient(70% 80% at 85% 20%, #000 0%, transparent 75%);
          mask-image: radial-gradient(70% 80% at 85% 20%, #000 0%, transparent 75%);
}
.sec--dark::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
}
/* на тёмной секции — полупрозрачный круг и мятная точка на его линии */
.sec--dark::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: 34rem; height: 34rem; right: -10rem; top: -12rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .10);
  background: radial-gradient(circle at 18% 78%, var(--mint) 0 0.3125rem, transparent 0.375rem);
}

/* ---------- типографика ---------- */
h2 { color: var(--navy); }
.sec--dark h2 { color: #FFFFFF; }
/* засечка над заголовком: синяя линия + мятная точка */
h2::before, .sec--dark h2::before {
  width: 3.25rem; height: 0.1875rem;
  background:
    radial-gradient(circle, var(--mint) 0.1875rem, transparent 0.1875rem) right center / 0.375rem 0.375rem no-repeat,
    linear-gradient(90deg, var(--blue) 0, var(--blue) calc(100% - 0.75rem), transparent 0) left center / 100% 100% no-repeat;
}
.sec--dark h2::before {
  background:
    radial-gradient(circle, var(--mint) 0.1875rem, transparent 0.1875rem) right center / 0.375rem 0.375rem no-repeat,
    linear-gradient(90deg, #FFFFFF 0, #FFFFFF calc(100% - 0.75rem), transparent 0) left center / 100% 100% no-repeat;
}
.sec-lead, .how-note, .tl__t, .pl p, .scard p, .expert__desc, .regalia li, .gloss dd, .ticks li { color: var(--s-ink2); }
.scard p, .tl__h, .incl__h, .expert__role, .pl p b { color: var(--s-ink); }
.kicker { color: var(--s-acc); }
.kicker::before { background: var(--mint); height: 0.125rem; }
.pl__kicker { color: var(--blue); }
a { color: inherit; }
.hero-note a, .research__body strong { color: var(--blue); }
.mk { background: linear-gradient(transparent 60%, rgba(66, 221, 178, .42) 60%); }
.price b, .hero .price b, #program .how-note b { color: var(--blue); }
.sec--dark .price b, .final .price b { color: #FFFFFF; }

/* ---------- первый экран: левая часть в новой палитре ---------- */
.hero .hero-panel {
  background:
    radial-gradient(48% 70% at 96% 18%, rgba(220, 233, 250, .95) 0%, rgba(220, 233, 250, 0) 70%),
    radial-gradient(44% 60% at 88% 96%, rgba(109, 158, 235, .16) 0%, rgba(109, 158, 235, 0) 70%),
    radial-gradient(40% 55% at 64% 50%, rgba(238, 244, 252, .9) 0%, rgba(238, 244, 252, 0) 70%),
    linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%);
  border: 1px solid var(--line-cold); box-shadow: 0 1px 2px rgba(0, 33, 88, .04);
}
.hero-h1 { color: var(--navy); }
.hero-h1 .ln:last-child { color: var(--blue); }
.hero-sub, .hero-lead--strong { color: var(--graphite); }
.hero-lead { color: var(--muted); }
.hero-note { color: rgba(102, 112, 133, .85); }
.badge { background: #FFFFFF; border: 1px solid var(--line-cold); color: var(--navy); }
.dot { background: var(--mint); box-shadow: 0 0 0 0.1875rem var(--mint-wash); }
.note { background: #FFFFFF; border: 1px solid var(--line-cold); border-radius: var(--r-lg); color: var(--graphite); box-shadow: none; }

/* ---------- кнопки ---------- */
.btn {
  background: var(--blue); color: #FFFFFF; border-radius: 0.875rem;
  box-shadow: 0 1px 2px rgba(0, 33, 88, .12);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.btn:hover { background: #10308F; box-shadow: 0 0 0 0.25rem rgba(66, 221, 178, .22); transform: none; }
.btn__ic { color: var(--mint); }
.sec--dark .btn, .final .btn { border: 1px solid rgba(255, 255, 255, .14); box-shadow: none; }
.sec--dark .btn:hover, .final .btn:hover { background: #1f47c4; }
/* вторичная кнопка — на будущее, тот же язык */
.btn--ghost { background: transparent; color: var(--navy); border: 1px solid rgba(22, 59, 172, .35); box-shadow: none; }
.btn--ghost:hover { background: #FFFFFF; border-color: var(--blue); }

/* ---------- карточки: белые, 20–22px, холодная обводка, без тяжёлых теней ---------- */
.pl, .scard, .tl__card, .fact, .incl__col, .expert, .qa, .flow__card, .gbtn, .gloss, .faq,
.whois-lead, .whois-stat, .whois-card, .research, .gov-card, .gov__photo, .client, .media-logo, .whois-logo,
.flowx__doc, .win, .popup__box, .how-cta {
  background: #FFFFFF; border: 1px solid var(--line-cold); border-radius: var(--r-xl);
  box-shadow: 0 1px 2px rgba(0, 33, 88, .04);
}
.client, .media-logo, .whois-logo { border-radius: var(--r-md); }
.pl:hover, .scard:hover, .fact:hover, .qa:hover, .flow__card:hover, .whois-stat:hover,
.client:hover, .media-logo:hover, .gbtn:hover {
  transform: none; border-color: rgba(22, 59, 172, .35);
  box-shadow: 0 0 0 0.1875rem rgba(66, 221, 178, .14);
}
.pl--wide, .pl--plain { background: #F7F8FA; }
.sec--dark .pl, .sec--dark .pl--wide { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); box-shadow: none; }
.sec--dark .pl:hover { border-color: rgba(66, 221, 178, .45); box-shadow: none; }
.scard__img { border-radius: calc(var(--r-xl) - 0.5rem); }
.expert__photo { border-radius: calc(var(--r-xl) - 0.375rem); }
.fact { background: #F7F8FA; }

/* ---------- теги, статусы, галочки — мятные ---------- */
.expert__tags li { background: var(--mint-xl); border: 1px solid var(--mint-line); color: var(--navy); }
.gbtn__count { background: var(--mint-xl); color: var(--navy); box-shadow: inset 0 0 0 1px var(--mint-line); }
.gbtn__arw { border-color: var(--line-cold); color: var(--navy); }
.gwrap.open .gbtn__arw { background: var(--blue); border-color: var(--blue); color: #FFFFFF; }
.gloss dt { color: var(--blue); }
.gloss__item + .gloss__item { border-top-color: var(--line-cold); }
.tick--yes { color: var(--navy); background: var(--mint); box-shadow: none; }
.incl__h::before { background: var(--mint); }
.regalia li::before, .doc__list li::before { background: var(--mint); }
.gov-regions li::before { color: var(--mint-2); }
.pd--tag { color: var(--navy); background: var(--mint-lt); box-shadow: inset 0 0 0 1px var(--mint); }
.pd--raw { color: var(--graphite); background: #EEF1F5; box-shadow: inset 0 0 0 1px var(--line-cold); }
.clean__bar { background: rgba(29, 39, 53, .08); }

/* ---------- схема «документ → анонимизатор → очищенная версия → нейросеть» ---------- */
.flowx__doc--clean { border-color: var(--mint); box-shadow: 0 0 0 0.25rem rgba(66, 221, 178, .14); }
.flowx__node { background: var(--navy); color: #FFFFFF; box-shadow: none; }
.flowx__node--shield { background: var(--mint); color: var(--navy); box-shadow: 0 0 0 0.375rem rgba(66, 221, 178, .18); }
.flowx__arr { color: #A9B3C4; }
.flowx__cap { color: var(--muted); }
.clean__arrow { background: var(--blue); box-shadow: none; }

/* ---------- программа: номера тёмно-синие, линия тонкая, финиш мятный ---------- */
.tl--7 .tl__item .tl__node,
.tl--7 .tl__item:nth-child(n) .tl__node { background: var(--navy); color: #FFFFFF; box-shadow: 0 0 0 0.3125rem #F2F4F7; }
.tl--7 .tl__item.tl__item--last:nth-child(7) .tl__node { background: var(--mint); color: var(--navy); }
.tl--v .tl__item::after { width: 1px; background: #C9D2DE; }
.tl--v .tl__item:nth-last-child(2)::after { background: linear-gradient(180deg, #C9D2DE, var(--mint)); }
.tl--7 .tl__item--last .tl__card { background: #FFFFFF; border-color: var(--mint); box-shadow: 0 0 0 0.25rem rgba(66, 221, 178, .12); }
.win__bar { background: #F7F8FA; border-bottom-color: var(--line-cold); }
.win__bar i { background: #C9D2DE; }
.win__bar i:first-child { background: var(--mint); }

/* ---------- сертификат: тёмно-синий бланк, печать мятная ---------- */
.cert {
  background:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem,
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem,
    var(--navy);
  box-shadow: 0 1rem 2rem rgba(0, 33, 88, .16), 0 0 0 0.375rem #FFFFFF, 0 0 0 0.4375rem var(--line-cold);
}
.cert__seal { background: var(--mint); color: var(--navy); }
.cert__kind { color: var(--mint); }
.cert__rule { background: var(--mint); }
.cert__course { color: rgba(228, 234, 243, .86); }

/* ---------- «Кто мы» ---------- */
.whois-lead { background: #FFFFFF; }
.whois-stat b { color: var(--blue); }
.gov-card__ico { background: var(--navy); color: var(--mint); }
.corp-btn { background: rgba(0, 33, 88, .78); border-color: rgba(255, 255, 255, .4); }
.corp-btn:hover { background: var(--blue); }
.corp-dot.is-active { background: var(--mint); }
.whois h2 em { color: var(--blue); }

/* ---------- ограничения прототипа: спокойная плашка ---------- */
.terms--limits { background: #F7F8FA; border: 1px solid var(--line-cold); border-radius: var(--r-xl); }
.terms__ic { color: var(--navy); background: var(--mint-lt); border-color: var(--mint-line); }
.terms--limits .terms__h { color: var(--navy); }
.terms--limits .terms__p { color: var(--muted); }

/* ---------- финальный экран и подвал: тёмно-синий, без ярких градиентов ---------- */
.hero-panel--dark {
  background:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 3rem 3rem,
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 3rem 3rem,
    var(--navy);
  border-color: rgba(255, 255, 255, .08); box-shadow: none;
}
.hero-panel--dark .hero-card { border-color: rgba(255, 255, 255, .12); border-radius: var(--r-xl); }
.final-sub { color: var(--mint); }
.final .badge { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #FFFFFF; }
.final .note { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #FFFFFF; }
.bonus { border-top-color: rgba(255, 255, 255, .14); }
.bonus__ic { color: var(--mint); }
.footer { background: var(--navy); }

/* ---------- попап ---------- */
.popup__overlay { background: rgba(0, 33, 88, .55); }
.popup__box { border-radius: var(--r-xl); }
.popup__title { color: var(--navy); }
.popup__close { border-color: var(--line-cold); color: var(--muted); }
.popup__close:hover { color: var(--blue); border-color: var(--blue); }

/* ============================================================
   ПОЛИРОВКА 30.09 (правки заказчика: «серо, грязно, мало воздушных
   теней, мятный вперемешку с синим»)
   · Фоны: белый + очень светлый холодный #F4F7FC вместо серого,
     без сетки на светлых секциях — сетка осталась только на тёмных.
   · Мятный больше не соседствует с синим в одном элементе: кнопки,
     засечки, стрелки, hover — только синие; мятный — галочки, метки,
     щиты, статусы.
   · Тени мягкие и длинные: карточки «висят» над фоном, а не лежат.
   ============================================================ */
:root {
  --bg: #F4F7FC; --line-cold: #E3E8F1;
  --shadow-air: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 34px -18px rgba(0, 33, 88, .20);
  --shadow-air-lg: 0 1px 2px rgba(16, 24, 40, .04), 0 32px 64px -32px rgba(0, 33, 88, .26);
}
html, body, .bg-fx { background: var(--bg); }
.sec, .panel-sec, body { --s-line: var(--line-cold); --s-shadow: var(--shadow-air); }

.sec, .sec--res, .sec--tight { background: #FFFFFF; }
.sec--soft, #program { background: var(--bg); }
.sec--soft::before, #program::before { content: none; }

/* засечка — одна синяя линия, без мятной точки */
h2::before { width: 2.5rem; height: 0.1875rem; border-radius: 0.1875rem; background: var(--blue); }
.sec--dark h2::before { background: #FFFFFF; }
.kicker::before { background: currentColor; }

/* ---------- кнопки: чистый синий, белая стрелка, мягкая синяя тень ---------- */
.btn {
  background: var(--blue); border: 0; border-radius: 0.875rem;
  box-shadow: 0 1px 2px rgba(0, 33, 88, .12), 0 12px 24px -12px rgba(22, 59, 172, .65);
}
.btn__ic { color: #FFFFFF; transition: transform .2s ease; }
.btn:hover { background: #0F2F94; box-shadow: 0 1px 2px rgba(0, 33, 88, .12), 0 16px 32px -14px rgba(22, 59, 172, .75); }
.btn:hover .btn__ic { transform: translateX(0.1875rem); }
.sec--dark .btn, .final .btn { border: 0; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .45); }
.sec--dark .btn:hover, .final .btn:hover { background: #1E48C8; }

/* ---------- карточки: белые, холодная тонкая обводка, воздушная тень ---------- */
.pl, .scard, .tl__card, .fact, .incl__col, .expert, .qa, .flow__card, .gbtn, .gloss, .faq,
.whois-lead, .whois-stat, .whois-card, .research, .gov-card, .gov__photo, .client, .media-logo,
.flowx__doc, .win, .how-cta, .note, .terms--limits {
  background: #FFFFFF; border: 1px solid var(--line-cold); box-shadow: var(--shadow-air);
}
.pl--wide, .pl--plain, .fact, .terms--limits { background: #FFFFFF; }
.pl:hover, .scard:hover, .fact:hover, .qa:hover, .flow__card:hover, .whois-stat:hover,
.client:hover, .media-logo:hover, .gbtn:hover {
  border-color: rgba(22, 59, 172, .22);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 22px 44px -22px rgba(0, 33, 88, .28);
}
.sec--dark .pl, .sec--dark .pl--wide { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); box-shadow: none; }
.sec--dark .pl:hover { border-color: rgba(255, 255, 255, .28); box-shadow: none; }

/* метки данных: сырые — холодно-серые, очищенные — мятные */
.pd--raw { color: var(--graphite); background: #F1F4F9; box-shadow: inset 0 0 0 1px var(--line-cold); }
.pd--tag { color: var(--navy); background: var(--mint-lt); box-shadow: inset 0 0 0 1px rgba(38, 207, 161, .55); }
.clean__bar { background: #E9EDF4; }

/* программа: кольцо у номера — цвет фона секции, линия светлая */
.tl--7 .tl__item .tl__node, .tl--7 .tl__item:nth-child(n) .tl__node { box-shadow: 0 0 0 0.3125rem var(--bg); }
.tl--v .tl__item::after { background: #D8DFEA; }
.tl--v .tl__item:nth-last-child(2)::after { background: linear-gradient(180deg, #D8DFEA, var(--mint)); }
.win__bar { background: #F7F9FC; }
.win__bar i, .win__bar i:first-child { background: #D8DFEA; }

/* ============================================================
   ВТОРОЙ ЭКРАН — «Зачем нужен анонимизатор?»
   ============================================================ */
.why__top {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start;
}
.why__top h2 { max-width: 14ch; }
.why__lead {
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem); font-weight: 600; line-height: 1.55;
  color: var(--graphite); text-wrap: pretty;
}
.why__note {
  margin-top: 1rem; max-width: 60ch;
  font-size: clamp(0.9375rem, 1.1vw, 1rem); font-weight: 500; line-height: 1.65; color: var(--muted);
}
.why__txt .ctarow { margin-top: 1.5rem; }

/* доска со сценарием: одна большая белая поверхность на всю ширину */
.board {
  position: relative; margin-top: clamp(2.25rem, 4vw, 3.5rem);
  display: grid; grid-template-columns: 1.25fr .8fr 1.25fr .8fr; align-items: stretch;
  padding: clamp(2rem, 3.4vw, 3rem) clamp(1.5rem, 3vw, 2.75rem) clamp(1.75rem, 2.8vw, 2.5rem);
  background:
    radial-gradient(rgba(0, 33, 88, .06) 1px, transparent 1.3px) 0 0 / 1.375rem 1.375rem,
    linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%);
  border: 1px solid var(--line-cold); border-radius: 1.75rem;
  box-shadow: var(--shadow-air-lg);
}
.board__step { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.board__stage { position: relative; width: 100%; height: 15rem; display: grid; place-items: center; }

.board__doc {
  width: 100%; max-width: 16.5rem;
  display: flex; flex-direction: column; gap: 0.625rem;
  padding: 1.25rem 1.125rem;
  background: #FFFFFF; border: 1px solid var(--line-cold); border-radius: 1rem;
  box-shadow: var(--shadow-air);
  transform: rotate(-2deg);
}
.board__doc--clean {
  border-color: rgba(38, 207, 161, .6); transform: rotate(2deg);
  box-shadow: 0 0 0 0.3125rem rgba(66, 221, 178, .12), var(--shadow-air);
}
.board__doc .pd { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
.board__doc .clean__bar { height: 0.4375rem; }

/* узлы: мятный щит — анонимизатор, тёмно-синий — нейросеть, с кольцами */
.board__orb {
  position: relative; z-index: 1;
  width: 5.5rem; height: 5.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy); color: #FFFFFF;
  box-shadow: 0 0 0 0.75rem rgba(0, 33, 88, .05), 0 0 0 1.5rem rgba(0, 33, 88, .025), 0 18px 32px -16px rgba(0, 33, 88, .5);
}
.board__orb svg { width: 2.25rem; height: 2.25rem; }
.board__orb--mint {
  background: linear-gradient(160deg, #5BE6BF 0%, var(--mint-2) 100%); color: var(--navy);
  box-shadow: 0 0 0 0.75rem rgba(66, 221, 178, .14), 0 0 0 1.5rem rgba(66, 221, 178, .06), 0 18px 32px -16px rgba(38, 207, 161, .7);
}

.board__icon {
  position: relative;
  z-index: 1;
  width: 6.5rem;
  height: 6.5rem;
  object-fit: contain;
  filter: drop-shadow(0 0.875rem 1.25rem rgba(0, 33, 88, .22));
}

.board__icon--anonymizer {
  width: 10rem;
  height: 10rem;
}

.board__icon--network {
  width: 8.5rem;
  height: 8.5rem;
}

/* соединители: обычные короткие стрелки между шагами */
.board__step--node .board__stage::before,
.board__step--node .board__stage::after {
  content: ''; position: absolute; top: 50%; height: 0.625rem; transform: translateY(-50%);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 10' fill='none' stroke='%237C8BA6' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 1.5 5.5 5 2 8.5'/%3E%3C/svg%3E") right center / 0.375rem 0.625rem no-repeat,
    linear-gradient(90deg, #AEB9CC, #AEB9CC) left center / calc(100% - 0.45rem) 1px no-repeat;
}
.board__step--node .board__stage::before { left: 0.75rem; right: calc(50% + 5.75rem); }
.board__step--node .board__stage::after  { left: calc(50% + 5.75rem); right: 0.75rem; }
.board__step--node:last-child .board__stage::after { display: none; }

.board__cap {
  margin-top: 1.25rem; display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: clamp(0.875rem, 1.05vw, 1rem); font-weight: 700; color: var(--navy); text-align: center;
}
.board__n {
  display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.5rem; padding: 0 0.375rem;
  border-radius: 0.5rem; background: rgba(22, 59, 172, .08);
  font-size: 0.75rem; font-weight: 800; color: var(--blue); font-variant-numeric: tabular-nums;
}

@media (max-width: 1000px) {
  .why__top { grid-template-columns: 1fr; gap: 1rem; }
  .why__top h2 { max-width: none; }
  .board { grid-template-columns: 1fr; padding: 1.75rem 1.25rem; }
  .board__stage { height: auto; padding: 0.5rem 0; }
  .board__step--node .board__stage { height: 9.5rem; }
  /* соединители встают вертикально */
  .board__step--node .board__stage::before,
  .board__step--node .board__stage::after {
    left: 50%; right: auto; width: 1px; height: auto; transform: none;
    background: linear-gradient(180deg, #AEB9CC, #AEB9CC) center top / 1px 100% no-repeat;
  }
  .board__step--node .board__stage::before { top: 0; bottom: calc(50% + 5.75rem); }
  .board__step--node .board__stage::after  { top: calc(50% + 5.75rem); bottom: 0; }
  .board__step--node:last-child .board__stage::after { display: none; }
  .board__cap { margin: 0.75rem 0 0.5rem; }
}

/* «Кому полезен урок?»: pretty ради баланса строк уводил «готовят» на вторую
   строку. Обычный перенос; от висячих слов страхуют &nbsp; в разметке */
.scard p { text-wrap: wrap; }

/* тёмная секция: белый фон .sec из полировки перебивал .sec--dark */
.sec.sec--dark { background: var(--navy); }

/* ============================================================
   ВЫРАЗИТЕЛЬНАЯ СИСТЕМА 30.09 (ТЗ: «плоско и скучно» → AI/SaaS)
   Ритм секций: светлая сероватая #EEF1F5 → белая → насыщенная
   тёмно-синяя/градиентная. Тёмные: «Программа урока», «Нужен ли
   опыт», финал и подвал. На всех крупных фонах — мелкая сетка
   24px с растушёвкой и мягкие сине-мятные световые пятна.
   Иллюстрация справа на первом экране (.hviz*) не затрагивается.
   ============================================================ */
:root {
  --bg: #EEF1F5;
  --grid-light: rgba(0, 33, 88, .055);
  --grid-dark: rgba(255, 255, 255, .065);
  --card-edge: linear-gradient(140deg, rgba(22, 59, 172, .22), rgba(0, 33, 88, .06) 40%, rgba(66, 221, 178, .30));
  --card-edge-dark: linear-gradient(140deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04) 45%, rgba(66, 221, 178, .40));
  --shadow-air: 0 1px 2px rgba(16, 24, 40, .05), 0 18px 40px -22px rgba(0, 33, 88, .28);
  --shadow-air-lg: 0 1px 2px rgba(16, 24, 40, .05), 0 40px 80px -40px rgba(0, 33, 88, .40);
}
html, body, .bg-fx { background: var(--bg); }

/* ---------- крупная типографика ---------- */
h2 {
  font-size: clamp(2.125rem, 4.2vw, 3.625rem); letter-spacing: -0.035em; line-height: 1.04;
  padding-top: 1.75rem;
}
h2::before { width: 3rem; height: 0.25rem; border-radius: 0.25rem; background: linear-gradient(90deg, var(--blue), var(--mint)); }
.sec--dark h2::before, #program h2::before { background: linear-gradient(90deg, #FFFFFF, var(--mint)); }
.sec-lead, .why__lead { font-size: clamp(1.0625rem, 1.4vw, 1.3125rem); }
.whois-h { font-size: clamp(1.625rem, 2.8vw, 2.5rem); letter-spacing: -0.03em; }
/* акцентные слова в заголовках — плавный сине-мятный градиент */
.whois h2 em {
  font-style: normal; padding-right: .04em;
  background: linear-gradient(100deg, var(--blue) 10%, #1f7fd0 55%, var(--mint-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- фоны секций ---------- */
/* общий слой: сетка 24px, растушёвана к краям */
#why::before, #program::before, #kit::before, #who::before, #expert::before, #states::before, #whois::before, #glossary::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
  -webkit-mask-image: radial-gradient(75% 70% at 70% 30%, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 85%);
          mask-image: radial-gradient(75% 70% at 70% 30%, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 85%);
}
#program::before, #who::before {
  background-image:
    linear-gradient(var(--grid-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px);
}

/* светлые: сероватая база + световые пятна (синее и мятное) */
#why {
  background:
    radial-gradient(38% 55% at 92% 78%, rgba(66, 221, 178, .16) 0%, rgba(66, 221, 178, 0) 70%),
    radial-gradient(45% 60% at 8% 10%, rgba(22, 59, 172, .10) 0%, rgba(22, 59, 172, 0) 70%),
    var(--bg);
}
#kit {
  background:
    radial-gradient(40% 60% at 88% 30%, rgba(22, 59, 172, .12) 0%, rgba(22, 59, 172, 0) 70%),
    radial-gradient(30% 45% at 70% 80%, rgba(66, 221, 178, .14) 0%, rgba(66, 221, 178, 0) 70%),
    linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%);
}
#expert {
  background:
    radial-gradient(40% 70% at 15% 40%, rgba(22, 59, 172, .12) 0%, rgba(22, 59, 172, 0) 70%),
    radial-gradient(35% 55% at 95% 90%, rgba(66, 221, 178, .14) 0%, rgba(66, 221, 178, 0) 70%),
    var(--bg);
}
#states, #limits {
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F8FB 100%);
}
#states {
  background:
    radial-gradient(35% 40% at 100% 0%, rgba(22, 59, 172, .09) 0%, rgba(22, 59, 172, 0) 70%),
    linear-gradient(180deg, #FFFFFF 0%, #F6F8FB 100%);
}
#limits { background: #F6F8FB; }
#whois {
  background:
    radial-gradient(40% 50% at 85% 8%, rgba(66, 221, 178, .12) 0%, rgba(66, 221, 178, 0) 70%),
    radial-gradient(45% 50% at 5% 55%, rgba(22, 59, 172, .10) 0%, rgba(22, 59, 172, 0) 70%),
    var(--bg);
}
#glossary { background: #FFFFFF; }

/* насыщенные: тёмно-синий → основной синий, мятный свет в углу */
#program {
  background:
    radial-gradient(40% 45% at 12% 88%, rgba(66, 221, 178, .20) 0%, rgba(66, 221, 178, 0) 70%),
    radial-gradient(55% 65% at 92% 10%, rgba(80, 130, 230, .35) 0%, rgba(80, 130, 230, 0) 70%),
    linear-gradient(150deg, #002158 0%, #0B2D7A 45%, #163BAC 100%);
}
.sec.sec--dark#who {
  background:
    radial-gradient(45% 60% at 90% 15%, rgba(66, 221, 178, .18) 0%, rgba(66, 221, 178, 0) 70%),
    radial-gradient(50% 70% at 0% 100%, rgba(22, 59, 172, .55) 0%, rgba(22, 59, 172, 0) 70%),
    #002158;
}
#who::after { display: none; }

/* ---------- «Программа урока» на тёмном: левая колонка светлая, карточки белые ---------- */
#program {
  --s-ink: #FFFFFF; --s-ink2: rgba(228, 234, 243, .78); --s-ink3: rgba(228, 234, 243, .56); --s-acc: var(--mint);
}
#program h2 { color: #FFFFFF; }
#program .how-note { color: rgba(228, 234, 243, .8); }
#program .how-note b { color: var(--mint); }
#program .tl__card {
  --s-ink: var(--graphite); --s-ink2: #5B6577; --s-line: var(--line-cold);
  border: 1px solid transparent;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--card-edge) border-box;
  box-shadow: 0 24px 48px -28px rgba(0, 10, 40, .6);
}
#program .tl__h { color: var(--navy); font-size: clamp(1rem, 1.3vw, 1.1875rem); }
#program .tl__t { color: #5B6577; }
.tl--7 .tl__item .tl__node, .tl--7 .tl__item:nth-child(n) .tl__node {
  background: #FFFFFF; color: var(--navy);
  box-shadow: 0 0 0 0.3125rem rgba(255, 255, 255, .10), 0 10px 20px -10px rgba(0, 0, 0, .5);
}
.tl--7 .tl__item.tl__item--last:nth-child(7) .tl__node {
  background: var(--mint); color: var(--navy);
  box-shadow: 0 0 0 0.3125rem rgba(66, 221, 178, .18), 0 0 1.5rem rgba(66, 221, 178, .45);
}
.tl--v .tl__item::after { background: rgba(255, 255, 255, .22); }
.tl--v .tl__item:nth-last-child(2)::after { background: linear-gradient(180deg, rgba(255, 255, 255, .22), var(--mint)); }
.tl--7 .tl__item--last .tl__card {
  background: linear-gradient(160deg, #FFFFFF 60%, #EEFCF8) padding-box, linear-gradient(140deg, var(--mint), rgba(66, 221, 178, .2)) border-box;
  box-shadow: 0 0 0 0.25rem rgba(66, 221, 178, .12), 0 24px 48px -28px rgba(0, 10, 40, .6);
}

/* ---------- карточки: белые с тонкой градиентной кромкой и воздушной тенью ---------- */
.pl, .scard, .fact, .incl__col, .expert, .qa, .flow__card, .gbtn, .gloss,
.whois-lead, .whois-stat, .whois-card, .research, .gov-card, .note, .terms--limits, .board {
  border: 1px solid transparent;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--card-edge) border-box;
  box-shadow: var(--shadow-air);
  border-radius: 1.5rem;
}
.board {
  background:
    radial-gradient(rgba(0, 33, 88, .07) 1px, transparent 1.3px) 0 0 / 1.375rem 1.375rem padding-box,
    linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%) padding-box,
    var(--card-edge) border-box;
  box-shadow: var(--shadow-air-lg); border-radius: 2rem;
}
.client, .media-logo, .whois-logo { border-radius: 1rem; border: 1px solid rgba(0, 33, 88, .07); box-shadow: var(--shadow-air); }
.pl:hover, .scard:hover, .fact:hover, .qa:hover, .whois-stat:hover, .gbtn:hover,
.client:hover, .media-logo:hover {
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 0 0 0.25rem rgba(66, 221, 178, .12), 0 26px 50px -24px rgba(0, 33, 88, .38);
}
.scard__img { border-radius: 1rem; }

/* карточки на тёмном: стекло-лайт с градиентной кромкой */
.sec--dark .pl, .sec--dark .pl--wide {
  border: 1px solid transparent;
  background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)) padding-box, var(--card-edge-dark) border-box;
  box-shadow: 0 24px 48px -30px rgba(0, 0, 0, .55);
}
.sec--dark .pl:hover { box-shadow: 0 0 0 0.25rem rgba(66, 221, 178, .10), 0 24px 48px -30px rgba(0, 0, 0, .55); }
.sec--dark .pl p { color: rgba(228, 234, 243, .82); }
.sec--dark .pl p b { color: #FFFFFF; }
.sec-lead__yes { color: var(--mint); }

/* ---------- кнопки: синий с глубиной, на тёмном — с мятным ореолом ---------- */
.btn {
  background: linear-gradient(135deg, #1E4AD0 0%, var(--blue) 55%, #10308F 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 33, 88, .15), 0 16px 32px -14px rgba(22, 59, 172, .75);
}
.btn:hover {
  background: linear-gradient(135deg, #1A43C2 0%, #1233A0 55%, #0D2A80 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 0.25rem rgba(66, 221, 178, .18), 0 20px 36px -14px rgba(22, 59, 172, .8);
}
#program .btn, .sec--dark .btn, .final .btn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(255, 255, 255, .12), 0 18px 36px -14px rgba(0, 0, 0, .55), 0 0 2.5rem -0.5rem rgba(66, 221, 178, .35);
}

/* ---------- мятные детали: заметно, но дозированно ---------- */
.tick--yes { background: var(--mint); color: var(--navy); box-shadow: 0 0 0.875rem rgba(66, 221, 178, .45); }
.dot { box-shadow: 0 0 0 0.1875rem rgba(66, 221, 178, .2), 0 0 0.75rem rgba(66, 221, 178, .7); }
.kicker { letter-spacing: .16em; }
.expert__tags li { background: var(--mint-xl); border-color: rgba(38, 207, 161, .45); }
.regalia li::before { box-shadow: 0 0 0.5rem rgba(66, 221, 178, .6); }
.board__orb--mint { box-shadow: 0 0 0 0.75rem rgba(66, 221, 178, .14), 0 0 0 1.5rem rgba(66, 221, 178, .06), 0 0 3rem rgba(66, 221, 178, .45); }

/* ---------- сертификат и «Кто мы» ---------- */
.cert {
  background:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 1.25rem 1.25rem,
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 1.25rem 1.25rem,
    radial-gradient(60% 80% at 100% 0%, rgba(66, 221, 178, .28) 0%, rgba(66, 221, 178, 0) 65%),
    linear-gradient(150deg, #002158 0%, #163BAC 100%);
}
.whois-stat b { background: linear-gradient(100deg, var(--blue), var(--mint-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- финальный экран: градиент с мятным светом и сеткой ---------- */
.hero-panel--dark {
  background:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem,
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem,
    radial-gradient(40% 60% at 8% 100%, rgba(66, 221, 178, .22) 0%, rgba(66, 221, 178, 0) 70%),
    radial-gradient(50% 70% at 100% 0%, rgba(80, 130, 230, .45) 0%, rgba(80, 130, 230, 0) 70%),
    linear-gradient(150deg, #002158 0%, #0B2D7A 50%, #163BAC 100%);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 40px 80px -40px rgba(0, 33, 88, .6);
  border-radius: 2rem;
}
.final-h2 { font-size: clamp(2.25rem, 4.4vw, 3.75rem); letter-spacing: -0.035em; }
.hero-panel--dark .hero-card { border-radius: 1.5rem; }

/* ---------- первый экран: вокруг плашки — сетка и мягкий свет ---------- */
.panel-sec.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
  -webkit-mask-image: radial-gradient(60% 80% at 100% 50%, rgba(0, 0, 0, .75) 0%, transparent 78%);
          mask-image: radial-gradient(60% 80% at 100% 50%, rgba(0, 0, 0, .75) 0%, transparent 78%);
}
.hero .hero-panel { position: relative; z-index: 1; box-shadow: var(--shadow-air-lg); border-radius: 2rem; }

.hero .hero-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
  background-position: right top;
  opacity: .86;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 42%, #000 72%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 42%, #000 72%, transparent 100%);
}

@media (max-width: 1000px) {
  .hero .hero-panel::before {
    display: none;
  }
}

.footer {
  background:
    radial-gradient(40% 80% at 100% 0%, rgba(22, 59, 172, .6) 0%, rgba(22, 59, 172, 0) 70%),
    #002158;
}

/* ============================================================
   БОЛЬШЕ МЯТНОГО + ДЕТАЛИ В «ПРОГРАММЕ УРОКА» (30.09)
   Карточки программы: не белые, а тёмное стекло на градиенте секции.
   В каждой — мятная иконка шага, прогресс из 7 сегментов и крупный
   номер-водяной знак. Иллюстрация первого экрана не затрагивается.
   ============================================================ */
#program .tl__card {
  --s-ink: #FFFFFF; --s-ink2: rgba(228, 234, 243, .74);
  position: relative; overflow: hidden; isolation: isolate;
  padding: 1.5rem 1.75rem 1.625rem;
  border: 1px solid transparent; border-radius: 1.5rem;
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(66, 221, 178, .10) 0%, rgba(66, 221, 178, 0) 70%) padding-box,
    linear-gradient(160deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .035) 100%) padding-box,
    linear-gradient(140deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .05) 45%, rgba(66, 221, 178, .45)) border-box;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 48px -30px rgba(0, 0, 0, .6);
  transition: box-shadow .25s ease, transform .25s ease;
}
#program .tl__card:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 0.25rem rgba(66, 221, 178, .12), 0 28px 56px -30px rgba(0, 0, 0, .7);
}
/* крупный номер шага — водяной знак в правом верхнем углу */
#program .tl__card::before {
  content: attr(data-n); position: absolute; z-index: -1; right: 1.125rem; top: -0.5rem;
  font-size: 5.5rem; font-weight: 800; letter-spacing: -0.06em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .12);
  font-variant-numeric: tabular-nums; pointer-events: none;
}
/* мятная полоска у верхней кромки */
#program .tl__card::after {
  content: ''; position: absolute; left: 1.75rem; top: 0; width: 3.5rem; height: 0.1875rem;
  border-radius: 0 0 0.25rem 0.25rem; background: var(--mint);
  box-shadow: 0 0 0.875rem rgba(66, 221, 178, .7);
}
#program .tl__h { color: #FFFFFF; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); }
#program .tl__t { color: rgba(228, 234, 243, .74); }

.tl__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.25rem; }
.tl__badge {
  width: 2.5rem; height: 2.5rem; flex: none; border-radius: 0.75rem;
  display: grid; place-items: center; color: var(--mint);
  background: rgba(66, 221, 178, .12);
  box-shadow: inset 0 0 0 1px rgba(66, 221, 178, .35), 0 0 1.25rem -0.25rem rgba(66, 221, 178, .45);
}
.tl__badge svg { width: 1.25rem; height: 1.25rem; }
/* прогресс урока: закрашенные сегменты — пройденные шаги */
.tl__prog { display: flex; gap: 0.25rem; }
.tl__prog i { width: 1rem; height: 0.25rem; border-radius: 0.25rem; background: rgba(255, 255, 255, .14); }
.tl__prog i.on { background: var(--mint); box-shadow: 0 0 0.5rem rgba(66, 221, 178, .55); }

/* номера на линии: стеклянный круг с мятным кольцом */
.tl--7 .tl__item .tl__node, .tl--7 .tl__item:nth-child(n) .tl__node {
  background: #0B2D7A; color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(66, 221, 178, .55), 0 0 0 0.3125rem rgba(255, 255, 255, .06), 0 0 1.25rem -0.25rem rgba(66, 221, 178, .5);
}
.tl--7 .tl__item.tl__item--last:nth-child(7) .tl__node {
  background: var(--mint); color: var(--navy);
  box-shadow: 0 0 0 0.3125rem rgba(66, 221, 178, .2), 0 0 1.75rem rgba(66, 221, 178, .6);
}
/* линия между шагами — мятный пунктир */
.tl--v .tl__item::after, .tl--v .tl__item:nth-last-child(2)::after {
  width: 2px; background: linear-gradient(180deg, rgba(66, 221, 178, .6) 50%, transparent 0) center top / 2px 0.5rem repeat-y;
}
/* финальный шаг — мятное стекло */
.tl--7 .tl__item--last .tl__card {
  background:
    radial-gradient(70% 100% at 100% 0%, rgba(66, 221, 178, .28) 0%, rgba(66, 221, 178, 0) 70%) padding-box,
    linear-gradient(160deg, rgba(66, 221, 178, .16) 0%, rgba(255, 255, 255, .04) 100%) padding-box,
    linear-gradient(140deg, var(--mint), rgba(66, 221, 178, .25)) border-box;
  box-shadow: 0 0 0 0.25rem rgba(66, 221, 178, .12), 0 24px 48px -30px rgba(0, 0, 0, .6);
}
.tl--7 .tl__item--last .tl__badge { background: var(--mint); color: var(--navy); }
/* окна «исходник → очищено» в 5-м шаге остаются светлыми — контрастная деталь */
#program .win { box-shadow: 0 16px 32px -18px rgba(0, 0, 0, .6); }
#program .clean__arrow { background: var(--mint); color: var(--navy); box-shadow: 0 0 1rem rgba(66, 221, 178, .55); }

/* ---------- мятный по странице ---------- */
/* метки [ИМЯ] и [ТЕЛЕФОН] прямо в тексте второго экрана */
.itag {
  display: inline-block; padding: 0 0.375rem; border-radius: 0.375rem;
  background: var(--mint-lt); color: var(--navy); font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(38, 207, 161, .5);
}
/* подписи групп — мятные чипы */
.states__k, .pl__kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.75rem; border-radius: 6.25rem;
  background: var(--mint-lt); color: var(--navy);
  box-shadow: inset 0 0 0 1px rgba(38, 207, 161, .45);
  font-size: 0.75rem; letter-spacing: .12em;
}
.states__k::before, .pl__kicker::before {
  content: ''; width: 0.4375rem; height: 0.4375rem; border-radius: 50%;
  background: var(--mint-2); box-shadow: 0 0 0.5rem rgba(38, 207, 161, .8);
}
.pl__kicker { margin-bottom: 0.625rem; }
/* мятные полоски у верхней кромки карточек в светлых секциях */
.incl__col, .whois-stat, .gov-card, .expert { position: relative; }
.incl__col::after, .whois-stat::after, .gov-card::after, .expert::after {
  content: ''; position: absolute; left: 1.75rem; top: -1px; width: 3rem; height: 0.1875rem;
  border-radius: 0 0 0.25rem 0.25rem; background: var(--mint);
  box-shadow: 0 0 0.75rem rgba(66, 221, 178, .6);
}
/* световые пятна светлых секций — больше мятного */
#why {
  background:
    radial-gradient(40% 60% at 95% 85%, rgba(66, 221, 178, .24) 0%, rgba(66, 221, 178, 0) 70%),
    radial-gradient(45% 60% at 8% 10%, rgba(22, 59, 172, .10) 0%, rgba(22, 59, 172, 0) 70%),
    var(--bg);
}
#expert {
  background:
    radial-gradient(40% 70% at 15% 40%, rgba(22, 59, 172, .12) 0%, rgba(22, 59, 172, 0) 70%),
    radial-gradient(40% 60% at 95% 90%, rgba(66, 221, 178, .22) 0%, rgba(66, 221, 178, 0) 70%),
    var(--bg);
}
.board__n { background: var(--mint-lt); color: var(--navy); box-shadow: inset 0 0 0 1px rgba(38, 207, 161, .45); }
.gbtn__count { background: var(--mint); color: var(--navy); box-shadow: 0 0 0.75rem rgba(66, 221, 178, .45); }
.terms--limits { background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(140deg, rgba(66, 221, 178, .55), rgba(0, 33, 88, .06) 50%, rgba(66, 221, 178, .3)) border-box; }
.terms__ic { background: var(--mint); color: var(--navy); box-shadow: 0 0 1rem rgba(66, 221, 178, .5); }

@media (max-width: 700px) {
  #program .tl__card { padding: 2rem 1.25rem 1.25rem; }
  #program .tl__card::before { font-size: 4rem; }
  .tl__prog i { width: 0.75rem; }
}

/* ============================================================
   «ПРОГРАММА УРОКА»: ПЕРЕТЕКАЮЩИЙ ГРАДИЕНТ (30.09)
   Один высокий градиент на семь карточек: каждый слой растянут
   на 700% высоты карточки, а карточка n сдвигает его на свой
   отрезок (--y = (n−1)/6). Пятна света переходят из карточки
   в карточку, будто одно полотно под стеклом.
   Номера-водяные знаки сняты.
   ============================================================ */
#program .tl__card::before { content: none; }

#program .tl__item:nth-child(1) .tl__card { --y: 0%; }
#program .tl__item:nth-child(2) .tl__card { --y: 16.6667%; }
#program .tl__item:nth-child(3) .tl__card { --y: 33.3333%; }
#program .tl__item:nth-child(4) .tl__card { --y: 50%; }
#program .tl__item:nth-child(5) .tl__card { --y: 66.6667%; }
#program .tl__item:nth-child(6) .tl__card { --y: 83.3333%; }
#program .tl__item:nth-child(7) .tl__card { --y: 100%; }

#program .tl__card,
#program .tl__item.tl__item--last .tl__card {
  background:
    radial-gradient(38% 7% at 96% 3%,  rgba(66, 221, 178, .34) 0%, rgba(66, 221, 178, 0) 100%) 0 var(--y) / 100% 700% no-repeat padding-box,
    radial-gradient(55% 9% at 4% 18%,  rgba(96, 146, 240, .38) 0%, rgba(96, 146, 240, 0) 100%) 0 var(--y) / 100% 700% no-repeat padding-box,
    radial-gradient(48% 8% at 88% 33%, rgba(66, 221, 178, .28) 0%, rgba(66, 221, 178, 0) 100%) 0 var(--y) / 100% 700% no-repeat padding-box,
    radial-gradient(60% 9% at 12% 50%, rgba(96, 146, 240, .32) 0%, rgba(96, 146, 240, 0) 100%) 0 var(--y) / 100% 700% no-repeat padding-box,
    radial-gradient(50% 8% at 92% 66%, rgba(66, 221, 178, .32) 0%, rgba(66, 221, 178, 0) 100%) 0 var(--y) / 100% 700% no-repeat padding-box,
    radial-gradient(55% 8% at 20% 80%, rgba(120, 170, 245, .26) 0%, rgba(120, 170, 245, 0) 100%) 0 var(--y) / 100% 700% no-repeat padding-box,
    radial-gradient(75% 10% at 70% 96%, rgba(66, 221, 178, .42) 0%, rgba(66, 221, 178, 0) 100%) 0 var(--y) / 100% 700% no-repeat padding-box,
    linear-gradient(160deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .035) 100%) padding-box,
    linear-gradient(140deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .05) 45%, rgba(66, 221, 178, .45)) border-box;
}
/* финиш остаётся выделенным: мятная кромка и ореол, заливка — из общего полотна */
#program .tl__item.tl__item--last .tl__card {
  border-color: transparent;
  box-shadow: 0 0 0 0.25rem rgba(66, 221, 178, .12), 0 24px 48px -30px rgba(0, 0, 0, .6);
}

/* ============================================================
   «ПРОГРАММА УРОКА»: 3D-иконки шагов (01.10)
   ============================================================ */
#program .tl__meta {
  align-items: flex-start;
  margin-bottom: 1rem;
}

#program .tl__badge {
  width: 5rem;
  height: 5rem;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#program .tl__badge img {
  width: 5rem;
  height: 5rem;
  max-width: 100%;
  display: block;
  object-fit: contain;
  transform: none;
  filter: drop-shadow(0 0.5rem 0.875rem rgba(0, 10, 40, .24));
}

#program .tl__item.tl__item--last .tl__badge {
  background: none;
  color: inherit;
}

@media (max-width: 700px) {
  #program .tl__badge {
    width: 5rem;
    height: 5rem;
  }

  #program .tl__badge img {
    width: 5rem;
    height: 5rem;
  }
}

/* ============================================================
   ДОПОЛНИТЕЛЬНЫЕ 3D-ИКОНКИ И ВЫРАВНИВАНИЯ (01.10)
   ============================================================ */
.ticks li {
  grid-template-columns: 2.25rem 1fr;
  align-items: center;
}

.tick--img {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: 0;
  object-fit: contain;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 0.375rem 0.625rem rgba(0, 33, 88, .18));
}

.cert__seal--img {
  width: 3rem;
  height: 3rem;
  border-radius: 0;
  object-fit: contain;
  background: none;
  filter: drop-shadow(0 0.375rem 0.625rem rgba(0, 33, 88, .22));
}

.pl--kit-bonus {
  align-items: center;
}

.pl--kit-bonus > div {
  justify-self: start;
  text-align: left;
}

.pl--kit-bonus .pl__kicker {
  justify-content: center;
  align-items: center;
  height: 2.5rem;
  min-height: 0;
  box-sizing: border-box;
  padding: 0.1875rem 1rem 0;
  margin-right: 0;
  margin-left: 0;
  line-height: 1;
  letter-spacing: .04em;
}

.pl--kit-bonus .pl__kicker::before {
  content: none;
}

#who h2,
#who .sec-lead,
#who .kicker,
#who .ctarow,
#who .price {
  text-align: center;
}

#who h2 {
  margin-right: auto;
  margin-left: auto;
}

#who h2::before {
  left: 50%;
  transform: translateX(-50%);
}

#who .sec-lead {
  max-width: 76ch;
  margin-right: auto;
  margin-left: auto;
}

#who .kicker {
  display: flex;
  width: fit-content;
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
}

#who .pl--wide {
  max-width: none;
  margin-right: 0;
  margin-left: 0;
  text-align: left;
}

#who .ctarow {
  justify-content: center;
  align-items: center;
}

#who .ctarow .btn {
  flex: none;
}

#who .price--2l {
  align-items: center !important;
}

.terms--limits {
  align-items: center;
}

.terms__ic--img {
  width: 5.5rem;
  height: 5.5rem;
  border: 0;
  background: none;
  box-shadow: none;
}

.terms__ic--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.5rem 0.875rem rgba(0, 33, 88, .2));
}

.whois-stat__ico {
  width: 5.25rem;
  height: 5.25rem;
  min-width: 5.25rem;
}

.final .note {
  background: #FFFFFF;
  border-color: rgba(255, 255, 255, .92);
  color: var(--navy);
  box-shadow: 0 1rem 2rem -1.25rem rgba(0, 10, 40, .32);
}

.final .note .note__ic--3d {
  filter: drop-shadow(0 0.375rem 0.625rem rgba(0, 33, 88, .22));
}

.bonus {
  align-items: center;
  padding-top: 0;
  border-top: 0;
}

.bonus__ic--img {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
  color: inherit;
  filter: drop-shadow(0 0.5rem 0.875rem rgba(0, 10, 40, .24));
}

.final .hero-panel--dark {
  background:
    radial-gradient(40% 60% at 8% 100%, rgba(66, 221, 178, .22) 0%, rgba(66, 221, 178, 0) 70%),
    radial-gradient(50% 70% at 100% 0%, rgba(80, 130, 230, .45) 0%, rgba(80, 130, 230, 0) 70%),
    linear-gradient(150deg, #002158 0%, #0B2D7A 50%, #163BAC 100%);
}

.final .hero-panel--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
  background-position: right top;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 42%, #000 74%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 42%, #000 74%, transparent 100%);
}

@media (max-width: 700px) {
  #who .ctarow {
    align-items: center;
  }

  #who .ctarow .btn {
    width: 100%;
  }

  .terms__ic--img {
    width: 5rem;
    height: 5rem;
  }
}

/* ============================================================
   МОБИЛЬНАЯ ТИПОГРАФИКА (01.10)
   ============================================================ */
@media (max-width: 700px) {
  html {
    font-size: 16px;
  }

  .hero-sub {
    font-size: 1.125rem;
    line-height: 1.35;
    white-space: normal;
  }

  .hero-lead--strong {
    font-size: 1.1875rem;
    line-height: 1.45;
    max-width: none;
  }

  .hero-lead--strong + .hero-lead,
  .hero-lead {
    font-size: 1rem;
    line-height: 1.62;
    max-width: none;
  }

  .note,
  .price,
  .btn {
    font-size: 1rem;
  }

  .hero-note,
  .small-note,
  .how-cta__note {
    font-size: 0.875rem;
    line-height: 1.55;
  }

  .sec-lead,
  .why__lead,
  .why__note,
  .pl p,
  .scard p,
  .tl__t,
  .ticks li,
  .terms__p,
  .expert__desc,
  .expert__note,
  .regalia li,
  .gloss dd,
  .faq__a,
  .bonus p,
  .research__body p,
  .gov-card__desc,
  .gov-regions,
  .gov-grid2,
  .flow__card p,
  .board__cap {
    font-size: 1rem;
    line-height: 1.65;
  }

  .pl__kicker,
  .kicker,
  .tl__done,
  .cert__kind {
    font-size: 0.8125rem;
  }

  .tl__h,
  .incl__h,
  .terms__h,
  .faq__q,
  .gloss dt,
  .expert__role,
  .whois-stat p,
  .research__body h4,
  .gov-card h4 {
    font-size: 1.125rem;
    line-height: 1.45;
  }

  .tl__card,
  .pl,
  .scard,
  .incl__col,
  .terms--limits,
  .gloss,
  .faq__item,
  .whois-stat,
  .gov-card {
    padding-right: 1.375rem;
    padding-left: 1.375rem;
  }
}

@media (max-width: 380px) {
  html {
    font-size: 16px;
  }

  .hero-lead--strong {
    font-size: 1.03125rem;
  }
}

/* ============================================================
   HERO: ВЫДЕЛЕННОЕ ОБЕЩАНИЕ И МОБИЛЬНЫЙ CTA (01.10)
   ============================================================ */
.hero-lead--strong {
  width: fit-content;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(66, 221, 178, .78);
  border-radius: 1rem;
  color: #1d2735;
  background: linear-gradient(135deg, #B8FFE7 0%, #DDFEF4 48%, #FFFFFF 100%);
  box-shadow: 0 0 0 0.25rem rgba(66, 221, 178, .16), 0 1.25rem 2.5rem -1.75rem rgba(0, 33, 88, .38);
}

.mbr {
  display: none;
}

@media (max-width: 700px) {
  .hero-left {
    display: flex;
    flex-direction: column;
  }

  .hero-badges { order: 1; }
  .hero-h1 { order: 2; }
  .hero-sub { order: 3; }
  .hero-lead--strong { order: 4; }
  .hero .ctarow { order: 5; }
  .note { order: 6; }
  .hero-lead--desc { order: 7; }
  .hero-note { order: 8; }

  .hero-lead--strong {
    width: auto;
    padding: 1rem 0.75rem;
    border-radius: 0.875rem;
    font-size: 1.0625rem;
  }

  .hero-lead--strong span {
    display: inline;
  }

  .hero-lead--strong .mbr {
    display: block;
  }

  .hero-lead--desc {
    margin-top: 1.5rem;
  }

  .hero .ctarow .price {
    display: none;
  }
}