@charset "UTF-8";
/* ==========================================================================
   Zoom-бот — Страница 1
   Дизайн-система: rlz/DESIGN.md + rlz/design-tokens.json
   Вёрстка 24 секций по макетам Страница 1/sections/*.png
   ========================================================================== */

/* ---------- 1. Токены ---------------------------------------------------- */
:root {
  /* палитра дизайн-системы (rlz) */
  --color-canvas: #fff;
  --color-canvas-2: #1f1d1e;
  --color-surface: #e4d8fd;
  --color-surface-2: #dfe1e6;
  --color-surface-3: #c1c7cf;
  --color-accent: #7e43ff;
  --color-text-muted: #4c24a3;
  --color-ink: #26114a;

  /* продуктовые и статусные цвета из макетов (не акценты UI) */
  --brand-zoom: #2d8cff;
  --brand-zoom-dk: #0b6ae4;
  --brand-tg: #2aa3ef;
  --brand-tg-dk: #1a86d9;
  --brand-max: #8b5cf6;
  --brand-max-dk: #6532e8;
  --brand-ok: #22c55e;
  --brand-warn: #f59e0b;
  --brand-err: #ef4444;

  /* границы (rlz) */
  --border-pale: 1px solid #ecedf3;
  --border-light: 1px solid #dfe1e7;
  --border-ghost: 1px solid rgba(18, 55, 105, .08);

  /* радиусы (rlz) */
  --r-xs: .375rem;
  --r-sm: .5rem;
  --r-md: 1rem;
  --r-lg: 1.5rem;
  --r-xl: 1.75rem;
  --r-huge: 2.5rem;
  --r-pill: 100vw;

  /* тени — многослойные, низкой непрозрачности */
  --shadow-card:
    0 1px 2px rgba(38, 17, 74, .04),
    0 4px 10px rgba(38, 17, 74, .04),
    0 12px 28px rgba(38, 17, 74, .05);
  --shadow-float:
    0 2px 6px rgba(38, 17, 74, .05),
    0 10px 24px rgba(38, 17, 74, .07),
    0 28px 60px rgba(38, 17, 74, .08);
  --shadow-tile:
    0 1px 2px rgba(38, 17, 74, .05),
    0 6px 16px rgba(38, 17, 74, .07);
  --shadow-btn-tg:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 2px 6px rgba(26, 134, 217, .18),
    0 10px 22px rgba(26, 134, 217, .26),
    0 18px 40px rgba(26, 134, 217, .16);
  --shadow-btn-max:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    0 2px 6px rgba(80, 64, 230, .18),
    0 10px 22px rgba(80, 64, 230, .28),
    0 18px 40px rgba(80, 64, 230, .16);

  /* сетка */
  --page: 1440px;
  --content: 1276px;   /* медиана замеров по 24 макетам */
  --gutter: 24px;
  --card-inset: 32px;
  --sec-pad: 96px;

  /* типографика */
  --font: 'Google Sans', 'Poppins', sans-serif;
  --ease: cubic-bezier(.6, .6, 0, 1);
}

/* ---------- 2. Сброс и база ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
b, strong { font-weight: 700; }

::selection { background: var(--color-surface); color: var(--color-ink); }

:where(a, button, summary):focus-visible {
  outline: .125rem solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---------- 3. Типографика ----------------------------------------------- */
.h1, .h2, .h3 { margin: 0; color: var(--color-ink); letter-spacing: -.02em; overflow-wrap: break-word; }
p, li, td, th, summary, .txt, .lead { overflow-wrap: break-word; }

.h1 {
  font-size: clamp(30px, 2.1vw + 16px, 44px);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -.02em;
}
.h2 {
  font-size: clamp(27px, 1.9vw + 15px, 40px);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.02em;
}
.h3 {
  font-size: clamp(18px, .35vw + 16px, 20px);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -.01em;
}
.h2--sm { font-size: clamp(24px, 1.4vw + 14px, 32px); }

.lead {
  font-size: clamp(16px, .3vw + 15px, 18px);
  line-height: 1.6;
  color: var(--color-ink);
}
.txt { color: var(--color-ink); }
.txt--sm { font-size: 15px; line-height: 1.5; color: var(--color-ink); }
.txt--xs { font-size: 13px; line-height: 1.3; color: var(--color-ink); }
.accent { color: #26114a; }
.stack > * + * { margin-top: 18px; }
.stack--tight > * + * { margin-top: 12px; }
.stack--wide > * + * { margin-top: 26px; }

/* ---------- 4. Каркас ---------------------------------------------------- */
.page { max-width: var(--page); margin: 0 auto; position: relative; }

.sec { position: relative; overflow-x: clip; }

.sec__inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: var(--sec-pad) var(--gutter);
  position: relative;
  z-index: 1;
}

/* белая секция */
.sec--plain { background: var(--color-canvas); }

/* Герой: градиентная подложка-карточка, как первый экран главной. */
.sec--hero { padding: 0 16px; margin-top: 16px; }
/* На широком экране карточка главной — ровно 1440px; .page ограничен 1440,
   поэтому герой выходит за него на свои боковые поля. */
@media (min-width: 1472px) { .sec--hero { margin-inline: -16px; } }
.sec--hero > .sec__inner {
  border-radius: 56px;
  background:
    radial-gradient(50% 74.51% at 50% 100%, #ffffff80 24.09%, #ffffff29),
    linear-gradient(180deg, #efefff 0%, #e9e2ffcc 15.89%, #ffe1f1cc 62.5%, #fff6f5 100%);
  max-width: none;
  padding-bottom: clamp(64px, 7vw, 112px);
  padding-inline: clamp(24px, 5vw, 88px);
  overflow: hidden;
}
.sec--hero > .sec__inner > * { max-width: var(--content); margin-inline: auto; }

/* секция с градиентной подложкой-карточкой */
.sec--card { padding: 0 var(--card-inset); }
.sec--card > .sec__inner {
  border-radius: var(--r-huge);
  background:
    radial-gradient(120% 88% at 76% 44%, rgba(251, 227, 247, .78) 0%, rgba(251, 227, 247, 0) 60%),
    radial-gradient(90% 70% at 12% 8%, rgba(232, 231, 253, .9) 0%, rgba(232, 231, 253, 0) 70%),
    linear-gradient(178deg, #f1f0fd 0%, #f6f2fd 46%, #fdf6f7 100%);
  max-width: none;
  padding-block: clamp(64px, 7vw, 112px);
  padding-inline: clamp(24px, 5vw, 88px);
  overflow: hidden;
}
/* внутренняя ширина контента внутри карточки */
.sec--card > .sec__inner > * { max-width: var(--content); margin-inline: auto; }

/* узкая карточка (секции 16, 22) */
/* Секция 2 идёт сразу за героем: её верхний отступ на 35% меньше обычного. */
/* Секция 2 — единственная белая карточка (по правке владельца), остальные с градиентом. */
#sec-02 > .sec__inner { background: var(--color-canvas); }
#sec-02 > .sec__inner { padding-top: calc(clamp(64px, 7vw, 112px) * .65); }
/* Стык секций 2 и 3: оба отступа на 30% меньше (было 101 + 96 = 197px). */
#sec-02 > .sec__inner { padding-bottom: calc(clamp(64px, 7vw, 112px) * .7); }
/* Секция 8: верхний отступ карточки на 30% меньше. */
#sec-08 > .sec__inner { padding-top: calc(clamp(64px, 7vw, 112px) * .7); }
#sec-08 .split { align-items: start; } /* колонки от верха, иначе текст центрируется по картинке */
/* Низ секции обрезан по картинке: телефон в файле кончается ровным срезом,
   и нижний отступ карточки (101px) читался как пустая полоса. */
#sec-08 > .sec__inner { padding-bottom: 0; }
#sec-03 > .sec__inner { padding-top: calc(var(--sec-pad) * .7); }
.sec--card-narrow { padding: 0 clamp(24px, 6vw, 100px); }

/* карточка на белом с рамкой (секция 19) */
.sec--outline > .sec__inner {
  border-radius: var(--r-huge);
  border: var(--border-pale);
  background: var(--color-canvas);
  max-width: none;
  padding-inline: clamp(24px, 5vw, 88px);
}
.sec--outline > .sec__inner > * { max-width: var(--content); margin-inline: auto; }

/* полноширинная карточка (секция 20) */
.sec--bleed { padding: 0; }
.sec--bleed > .sec__inner { border-radius: 0; }
#sec-20 > .sec__inner {
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(253, 231, 240, .95) 0%, rgba(253, 231, 240, 0) 70%),
    linear-gradient(180deg, #eeeafc 0%, #f4effc 45%, #fdf1f4 100%);
}
#sec-20 .faq { max-width: 840px; }

/* двухколоночная раскладка */
.split {
  display: grid;
  /* в макетах медиа-колонка занимает ~53% пары */
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.split--top { align-items: start; }
.split--text { align-items: center; }

.col-text { min-width: 0; }
.col-media { min-width: 0; position: relative; }
.media-stack { overflow: visible; }

/* ---------- 5. Шапка ------------------------------------------------------ */
/* Шапка один в один с главной (замерено в браузере на recording-bot.ru):
   не липкая, лежит поверх карточки героя на 16px ниже её верха; плашка 57px,
   фон rgba(255,255,255,.4) + blur(6px), радиус 16, зазор 28, без рамки. */
.nav-wrap {
  position: absolute;
  top: 32px;
  left: 0;
  right: 0;
  z-index: 60;
  padding: 0 16px;
  pointer-events: none;
}
.nav {
  pointer-events: auto;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 57px;
  padding: 0 12px;
  background: rgba(255, 255, 255, .4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 0;
  border-radius: 16px;
  box-shadow:
    0 100px 80px rgba(0, 0, 0, .07),
    0 30px 24px rgba(0, 0, 0, .04),
    0 12.5px 10px rgba(0, 0, 0, .04),
    0 4.5px 3.5px rgba(0, 0, 0, .03);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.nav__brand img { width: 32px; height: 32px; border-radius: 6px; }
/* Разделитель главной: штрих 1×20 после бренда. */
.nav__brand::after {
  content: '';
  width: 1px;
  height: 20px;
  margin-left: 16px;
  background: rgba(32, 9, 83, .1);
}
/* Слово-марка повторяет .skb-wordmark главной: Rec обычным, Bot жирным. */
.wordmark { font-size: 1.3rem; font-weight: 500; line-height: 1; color: #231645;
  letter-spacing: -.01em; white-space: nowrap; }
.wordmark strong { font-weight: 800; }
.nav__links { display: flex; gap: 20px; }
.nav__links a {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-ink);
  white-space: nowrap;
  transition: color .2s ease;
}
.nav__links a:hover { color: var(--color-accent); }
.nav__act { display: flex; gap: 12px; flex: none; }
.nav__act .btn--sm { height: 46px; padding: 0 26px; font-size: 16px; }
.nav__act .lbl-m { display: none; }
.nav__burger {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  border: var(--border-pale);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.nav__burger span {
  display: block; width: 17px; height: 2px;
  background: var(--color-ink); border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s ease;
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-drop {
  pointer-events: auto;
  display: none;
  max-width: 1010px;
  margin: 10px auto 0;
  padding: 16px;
  background: #fff;
  border: var(--border-pale);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
}
.nav-drop.is-open { display: block; }
.nav-drop a.nav-drop__link {
  display: block;
  padding: 12px 8px;
  font-size: 16px;
  color: var(--color-ink);
  border-bottom: var(--border-pale);
}
.nav-drop__btns { display: grid; gap: 10px; margin-top: 14px; }

/* ---------- 6. Кнопки ----------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow .45s var(--ease), transform .45s var(--ease), filter .45s var(--ease);
}
.btn img, .btn .bi { width: 21px; height: 21px; flex: none; }
.btn .bi { display: block; }
.btn:hover { transform: translateY(-1px); filter: saturate(108%); }
.btn:active { transform: translateY(0); }

.btn--tg { background: linear-gradient(135deg, #35a8f0 0%, #1a7fd8 100%); box-shadow: var(--shadow-btn-tg); }
.btn--max { background: linear-gradient(90deg, #304DFF 0%, #7F3CE6 100%); box-shadow: var(--shadow-btn-max); }
.btn--zoom { background: linear-gradient(135deg, #4f9cff 0%, #0b6ae4 100%); box-shadow: var(--shadow-btn-tg); }
.btn--sm { height: 46px; padding: 0 20px; font-size: 15px; }
.btn--wide { width: 100%; }
.btn--caps { text-transform: uppercase; letter-spacing: .04em; font-size: 15px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 16px; }
.cta-row--center { justify-content: center; }

/* ---------- 7. Бейдж ------------------------------------------------------ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 18px 0 12px;
  border-radius: var(--r-pill);
  background: #fff;
  border: var(--border-pale);
  box-shadow: var(--shadow-tile);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-ink);
}
.eyebrow img { width: auto; height: 22px; }
.eyebrow--tint { background: var(--color-surface); border-color: transparent; box-shadow: none; }

/* ---------- 8. Плитка с иконкой ------------------------------------------- */
.tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: #fff;
  border: var(--border-pale);
  box-shadow: var(--shadow-tile);
  overflow: hidden;
}
.tile img { width: 66%; height: 66%; object-fit: contain; }
.tile--40 { width: 40px; height: 40px; border-radius: 12px; }
.tile--48 { width: 48px; height: 48px; border-radius: 14px; }
.tile--64 { width: 64px; height: 64px; border-radius: 18px; }
.tile--72 { width: 72px; height: 72px; border-radius: 20px; }
.tile--round { border-radius: var(--r-pill); }
.tile--flat { box-shadow: none; }
/* Секция 2: у иконок уже нарисована своя плашка, поэтому картинка занимает
   весь блок (cover режет лишний воздух), а фон самого тайла не нужен. */
#sec-02 .tile { background: transparent; border: 0; width: 56px; height: 56px; }
#sec-02 .tile img { width: 100%; height: 100%; object-fit: contain; }
.tile--violet { background: #f1ebff; border-color: transparent; }
.tile--blue { background: #e8f1ff; border-color: transparent; }
.tile--green { background: #e9f9ef; border-color: transparent; }
.tile--orange { background: #fff2e3; border-color: transparent; }
.tile--red { background: #ffecec; border-color: transparent; }
.tile--plain { background: transparent; border-color: transparent; box-shadow: none; }
.tile--plain img { width: 100%; height: 100%; }

/* большая «марка» секции — синий квадрат Zoom */
.mark { width: 68px; height: 68px; border-radius: 20px; overflow: hidden; }
.mark img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- 9. Строка «иконка + текст» ------------------------------------ */
.bullet { display: flex; gap: 18px; align-items: flex-start; }
.bullet__body { min-width: 0; padding-top: 2px; }
.bullet-list { display: grid; gap: 22px; }

/* ---------- 10. Карточка --------------------------------------------------- */
.card {
  background: #fff;
  border: var(--border-pale);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 26px 28px;
}
.card--row { display: flex; gap: 20px; align-items: flex-start; }
.card--pad-lg { padding: 32px 34px; }
.card--ghost { background: rgba(255, 255, 255, .62); }
.card-list { display: grid; gap: 18px; }

/* ---------- 11. Шаги ------------------------------------------------------ */
.steps { display: grid; }
.steps__item {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  border-bottom: var(--border-pale);
}
.steps__item:last-child { border-bottom: 0; }
.steps__num {
  width: 34px; height: 34px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, #4f9cff, #0b6ae4);
  color: #fff;
  font-size: 15px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- 12. Список с галочками ---------------------------------------- */
.checks { display: grid; gap: 16px; }
.checks li { display: flex; gap: 14px; align-items: flex-start; }
.checks .ico {
  flex: none; width: 22px; height: 22px; margin-top: 3px;
  display: inline-flex; align-items: center; justify-content: center;
}
.checks .ico svg { width: 18px; height: 18px; }
.checks--violet .ico { color: var(--color-accent); }
.checks--green .ico { color: var(--brand-ok); }

/* ---------- 13. Заметка --------------------------------------------------- */
.note {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 24px;
  border-radius: var(--r-md);
  background: #f3f1ff;
}
.note--blue { background: #eaf2ff; }
.note--red { background: #fdeeee; }
.note--soft { background: rgba(255, 255, 255, .66); border: var(--border-pale); }
.note__ico { flex: none; width: 34px; height: 34px; }
.note__ico img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- 14. Плашки-чипы ----------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px;
  border: var(--border-pale);
  border-radius: var(--r-md);
  background: #fff;
  font-size: 13px;
  line-height: 1.3;
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
}
.chip img { width: 22px; height: 22px; flex: none; }
.chip--bare { border: 0; box-shadow: none; background: transparent; padding: 0 0; }
/* Белая пилюля с мягкой тенью — как бейджи-«таблетки» на странице. */
.chip--pill {
  display: inline-flex;
  width: fit-content;
  padding: 11px 20px 11px 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: #fff;
  font-size: 14px;
  box-shadow: var(--shadow-float);
}
.chips--bare { gap: 28px; }

/* ---------- 15. Таблицы --------------------------------------------------- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  font-size: 15px;
}
.tbl th, .tbl td { padding: 17px 22px; text-align: left; vertical-align: middle; }
.tbl thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brand-zoom-dk);
  background: #fbfbfe;
  border-bottom: var(--border-pale);
}
.tbl thead th span { display: block; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--color-ink); margin-top: 3px; }
.tbl thead th.is-bot { color: var(--color-accent); }
.tbl tbody tr + tr td { border-top: var(--border-pale); }
.tbl td:first-child { color: var(--color-ink); font-weight: 500; }
.tbl td.is-muted { color: var(--color-ink); }
.tbl .rowico { display: inline-flex; align-items: center; gap: 12px; }
.tbl .rowico img { width: 22px; height: 22px; flex: none; }


/* ---------- 16. FAQ -------------------------------------------------------- */
.faq { display: grid; gap: 18px; }
.faq__item {
  background: #fff;
  border: var(--border-pale);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.faq__item > summary {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 26px;
  cursor: pointer;
  list-style: none;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__q { flex: 1; min-width: 0; }
.faq__q h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; }
.faq__sign {
  position: relative;
  flex: none; width: 26px; height: 26px; margin-top: 3px;
  border-radius: var(--r-pill);
  color: var(--brand-zoom);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 14px; height: 2px;
  background: currentColor; border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: opacity .3s var(--ease), transform .35s var(--ease);
}
.faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__sign { background: var(--color-accent); color: #fff; }
.faq__item[open] .faq__sign::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
.faq__a { padding: 0 26px 24px 70px; color: var(--color-ink); font-size: 15px; line-height: 1.6; }
.faq__item.no-ico .faq__a { padding-left: 26px; }

/* ---------- 17. Сетки ------------------------------------------------------ */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

/* карточка «кому это нужно» */
.who {
  display: flex; gap: 22px; align-items: flex-start;
  padding: 26px 28px;
  border: var(--border-pale);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
  height: 100%;
}
.who__t { font-size: 18px; font-weight: 700; line-height: 1.35; margin-bottom: 6px; }

/* карточка со статистикой */
.stat {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 30px 32px;
  min-height: 220px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 85% 20%, rgba(252, 226, 246, .95) 0%, rgba(252, 226, 246, 0) 62%),
    linear-gradient(135deg, #eeeaff 0%, #f6f0fb 55%, #fdeef5 100%);
}
.stat__avatars { display: flex; margin-bottom: 18px; }
.stat__avatars img {
  /* в макете 80px внешним диаметром, белое кольцо и перекрытие ~36% */
  width: 66px; height: 66px; flex: none;
  border: 3px solid #fff;
  border-radius: 50%;
  margin-right: -24px;
}
.stat__avatars img:last-child { margin-right: 0; }
.stat__n { font-size: clamp(24px, 1.6vw + 14px, 32px); font-weight: 700; line-height: 1.15; }
.stat__img { position: absolute; right: 18px; bottom: 10px; width: 150px; }

/* ссылки-строки (секция 23) */
.links { background: #fff; border: var(--border-pale); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.links a {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  font-size: 15px;
  color: var(--color-ink);
  border-bottom: var(--border-pale);
  transition: background .2s ease;
}
.links a:last-child { border-bottom: 0; }
.links a:hover { background: #fbfaff; }
.links a img { width: 26px; height: 26px; flex: none; }
.links a .arr { margin-left: auto; color: var(--color-ink); }

/* ---------- 18. Иллюстрация ----------------------------------------------- */
.media { display: flex; align-items: center; justify-content: center; }
.media img { width: 100%; height: auto; }
.media--bleed img { width: 100%; }
.media--sm img { max-width: 88%; margin: 0 auto; }

/* декоративная графика позади телефона */
.media-stack { position: relative; display: flex; align-items: center; justify-content: center; }
.media-stack__bg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.media-stack__bg img { width: 108%; max-width: none; opacity: .96; }
.media-stack__fg { position: relative; z-index: 1; }

/* ---------- 19. Телефон (секции 01, 12) ------------------------------------ */
.phone {
  width: 330px;
  max-width: 100%;
  border-radius: 46px;
  padding: 11px;
  background: linear-gradient(155deg, #4a4a52 0%, #17171b 24%, #2a2a31 60%, #101014 100%);
  box-shadow:
    0 4px 10px rgba(20, 12, 40, .18),
    0 22px 44px rgba(20, 12, 40, .26),
    0 44px 90px rgba(20, 12, 40, .22);
}
.phone__scr {
  position: relative;
  border-radius: 36px;
  background: #0c0c11;
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
  min-height: 660px;
  display: flex;
  flex-direction: column;
}
.phone__notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 44%; height: 24px; background: #0c0c11; border-radius: var(--r-pill); z-index: 3;
}
.phone__status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px 6px;
  font-size: 13px; font-weight: 500;
}
.phone__status .sig { display: inline-flex; gap: 4px; align-items: center; opacity: .95; }
.phone__status .sig i { display: block; width: 4px; background: #fff; border-radius: 1px; }
.phone__status .sig i:nth-child(1) { height: 5px; }
.phone__status .sig i:nth-child(2) { height: 7px; }
.phone__status .sig i:nth-child(3) { height: 9px; }
.phone__status .sig i:nth-child(4) { height: 11px; }
.phone__status .bat { width: 24px; height: 12px; border: 1.5px solid rgba(255,255,255,.9); border-radius: 3px; position: relative; }
.phone__status .bat::after { content: ""; position: absolute; inset: 2px; background: #fff; border-radius: 1px; }
.phone__hdr {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px 14px;
  background: #14141a;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.phone__back { font-size: 20px; color: rgba(255,255,255,.72); line-height: 1; }
.phone__ttl { font-size: 15px; font-weight: 700; line-height: 1.2; }
.phone__sub { font-size: 12px; color: rgba(255, 255, 255, .45); }
.phone__av {
  margin-left: auto; width: 38px; height: 38px; border-radius: var(--r-pill);
  background: var(--brand-zoom); display: flex; align-items: center; justify-content: center;
}
.phone__av img { width: 20px; height: 20px; }
.phone__body { flex: 1; padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.bub {
  max-width: 88%;
  padding: 11px 14px;
  border-radius: 16px;
  background: #1b1b23;
  font-size: 13px;
  line-height: 1.5;
}
.bub--out { align-self: flex-end; background: #1d3a72; color: #dbe7ff; }
.bub--out .lnk { color: #9dc4ff; word-break: break-all; }
.bub__from { color: #4a9eff; font-weight: 700; margin-bottom: 4px; font-size: 13px; }
.bub__time { display: block; text-align: right; font-size: 11px; color: rgba(255, 255, 255, .42); margin-top: 5px; }
.bub__file { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.bub__file .ic { width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--brand-zoom); display: flex; align-items: center; justify-content: center; flex: none; }
.bub__file .ic img { width: 21px; height: 21px; }
.bub__file .nm { font-size: 13px; line-height: 1.3; word-break: break-all; }
.bub__file .sz { font-size: 12px; color: rgba(255, 255, 255, .45); }
.phone__rows { display: grid; gap: 14px; padding: 4px 4px 10px; }
.phone__row { display: flex; align-items: center; gap: 12px; font-size: 13px; color: rgba(255, 255, 255, .86); }
.phone__row img { width: 20px; height: 20px; flex: none; }

/* ---------- 20. Отдельные секции ------------------------------------------ */
/* 01 — герой */
/* по макету нижний блок 05-й уже колонок и центрирован */
#sec-05 > .sec__inner > .cta-row { max-width: 1020px; margin-inline: auto; }
/* Плашка под шагами: отступ от колонок вдвое меньше (был 56). */
#sec-05 > .sec__inner > .card { margin-top: 28px; }

#sec-01 .sec__inner { padding-top: 105px; } /* шапка 89px + зазор 32 (был 63) */
/* Низ героя обрезан по контенту: нижний отступ карточки (100px) и прозрачный
   воздух под телефоном в картинке (~72px) давали 209px пустоты. */
#sec-01 .sec__inner { padding-bottom: 24px; }
#sec-01 .col-media { margin-bottom: -72px; }
#sec-01 .h1 { font-size: clamp(28px, 1.9vw + 14px, 40px); max-width: 660px; }
/* мера набора по макету: строки буллетов обрываются раньше графики */
#sec-01 .hero-note { max-width: 500px; }
/* Кнопки героя одной ширины: inline-grid жмётся по содержимому, а колонки 1fr
   равняются по самой широкой — по «Открыть бота в Telegram». */
#sec-01 .cta-row,
#sec-02 .cta-row,
#sec-04 .cta-row,
#sec-05 .cta-row,
#sec-08 .cta-row,
#sec-09 .cta-row,
#sec-10 .cta-row,
#sec-11 .cta-row,
#sec-13 .cta-row,
#sec-14 .cta-row,
#sec-18 .cta-row,
#sec-24 .cta-row { display: grid;
  /* Две колонки, пока каждая вмещает самую длинную надпись («Открыть бота в
     Telegram» — 262px вместе с иконкой и полями). На планшете колонка текста
     сужается до ~400px, две кнопки туда не влезают, и ряд сам встаёт в столбик
     вместо того, чтобы резать надписи (white-space: nowrap не переносит). */
  grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
  width: min(100%, 576px); justify-items: start; }
/* В один столбец кнопка не растягивается на всю колонку: 500px+ кнопка читается
   как баннер. В двух колонках ограничение не срабатывает — там колонка уже 340. */
@media (min-width: 900px) {
  #sec-01 .cta-row > .btn, #sec-02 .cta-row > .btn, #sec-04 .cta-row > .btn,
  #sec-05 .cta-row > .btn, #sec-08 .cta-row > .btn, #sec-09 .cta-row > .btn,
  #sec-10 .cta-row > .btn, #sec-11 .cta-row > .btn, #sec-13 .cta-row > .btn,
  #sec-14 .cta-row > .btn, #sec-18 .cta-row > .btn, #sec-24 .cta-row > .btn {
    width: 100%; max-width: 340px; }
}
.cta-row--center { justify-items: center; }
/* Колонка секции 2 на 24px уже героя — ряд кнопок выходит в зазор между
   колонками, чтобы кнопки были ровно по 280, как в герое. */
@media (min-width: 1280px) {
  #sec-02 .cta-row, #sec-08 .cta-row, #sec-09 .cta-row,
  #sec-11 .cta-row, #sec-13 .cta-row, #sec-14 .cta-row,
  #sec-18 .cta-row, #sec-24 .cta-row { width: 576px; max-width: none; }
}
/* Герой: один снимок вместо пары «фон + свёрстанный телефон». Держим его
   строго в колонке: вылет вправо на узком десктопе (1024–1280) срезал
   правый край рисунка о границу окна. Воздух нарисован внутри картинки. */
.hero-shot { display: flex; justify-content: center; align-items: center; }
.hero-shot img { width: 100%; max-width: 100%; height: auto; }
/* Герой: картинка на 28% шире колонки и сдвинута вправо — рисунок с воздухом
   по краям, а карточка режет вылет своим overflow: hidden. */
#sec-01 .hero-shot img { width: 119%; max-width: none; transform: translate(8%, 0); }
/* Колонки героя прижаты к верху: при центрировании высокая картинка
   отодвигала текст вниз, и зазор под шапкой раздувался до 140px. */
#sec-01 .split { align-items: start; }
/* Колонки поровну: картинка крупнее на 22%, а заголовок ещё держится
   в две строки — при .95fr и уже он ломался на три. */
.split--wide-media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#sec-01 .hero-note {
  display: flex; align-items: center; gap: 14px;
  margin-top: 30px; padding: 18px 22px;
  border: var(--border-pale); border-radius: var(--r-md);
  color: var(--color-ink); font-size: 15px;
  background: #fff;
}
#sec-01 .hero-note img { width: 26px; height: 26px; }

/* 06 — таблица «что / формат» */
.fmt { display: grid; gap: 12px; }
/* Строка «ключ — значение» одной плашкой: фон общий, ключ и значение внутри. */
.fmt__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  background: #f2f5fc;
  font-size: 15px;
}
.fmt__k { color: var(--brand-zoom-dk); font-weight: 500; }
.fmt__v { color: var(--color-ink); }

/* 07 — двойная заметка */
.note-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.note-split > div { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; }
.note-split > div + div { border-left: var(--border-light); }

/* 16 — итоговая плашка */
.price-note {
  display: flex; gap: 22px; align-items: center;
  margin-top: 26px; padding: 24px 30px;
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, #eef1ff 0%, #f3f0fe 55%, #fdeff6 100%);
}
.price-note img.sh { width: 62px; flex: none; }
.price-note img.hg { width: 92px; margin-left: auto; flex: none; }

/* 19 — колонка приватности */
.privacy {
  padding: 34px 36px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(85% 75% at 82% 12%, rgba(240, 232, 253, .95) 0%, rgba(240, 232, 253, 0) 68%),
    linear-gradient(155deg, #eceefe 0%, #f2eefc 52%, #fbf2f8 100%);
  height: 100%;
}

/* 23 — мелкие плашки */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.trust .chip { flex-direction: column; align-items: flex-start; gap: 14px; min-height: 118px; justify-content: center; }

/* ---------- 21. Утилиты ---------------------------------------------------- */
.center { text-align: center; }
.center .cta-row { justify-content: center; }
.mx-auto { margin-inline: auto; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; } .mt-56 { margin-top: 56px; }
.mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; }
.maxw-720 { max-width: 720px; } .maxw-640 { max-width: 640px; } .maxw-560 { max-width: 560px; }

/* ---------- 22. Респонсив -------------------------------------------------- */
@media (max-width: 1279px) {
  :root { --sec-pad: 80px; --card-inset: 24px; }
  .nav__links { gap: 16px; }
  .nav__links a { font-size: 14px; }
}

@media (max-width: 1099px) {
  .nav__links { display: none; }
  .nav__act { display: none; }
  .nav__burger { display: flex; }

  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  :root { --sec-pad: 64px; }
  .split,
  .split--wide-media { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .col-media { order: 2; }
  .col-text { order: 1; }
  .media img, .media--bleed img { width: 100%; max-width: 560px; margin-inline: auto; }
  .media--sm img { max-width: 420px; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .note-split { grid-template-columns: minmax(0, 1fr); }
  .note-split > div + div { border-left: 0; border-top: var(--border-light); }
  #sec-01 .sec__inner { padding-top: 96px; }
  .phone { width: 300px; margin-inline: auto; }
  .stat__img { width: 118px; }
}

@media (max-width: 719px) {
  :root { --sec-pad: 52px; --gutter: 18px; --card-inset: 14px; }
  /* +10px к H1 на мобильном: слагаемое прибавлено ко всем трём значениям clamp,
     чтобы прирост был ровно 10px на любой ширине, а не только в середине диапазона. */
  #sec-01 .h1 { font-size: clamp(34px, 6.4vw + 10px, 42px); max-width: 100%; }
  .hero-shot img { max-width: 460px; }
  #sec-01 .hero-shot img { width: 100%; max-width: 460px; transform: none; }
  #sec-01 .col-media { margin-bottom: 0; }
  #sec-01 .sec__inner { padding-bottom: 48px; }
  .media-stack__bg img { width: 100%; }
  .phone { width: min(300px, 88vw); }
  .tbl .rowico img { width: 20px; height: 20px; }
  body { font-size: 16px; }
  .sec--card > .sec__inner,
  .sec--outline > .sec__inner { border-radius: var(--r-xl); }
  .btn { width: 100%; height: 54px; }
  .cta-row { gap: 12px; }
  .cta-row .btn { flex: 1 1 100%; }
  #sec-01 .cta-row,
  #sec-02 .cta-row,
  #sec-04 .cta-row,
  #sec-05 .cta-row,
  #sec-08 .cta-row,
  #sec-09 .cta-row,
  #sec-10 .cta-row,
  #sec-11 .cta-row,
  #sec-13 .cta-row,
  #sec-14 .cta-row,
  #sec-18 .cta-row,
  #sec-24 .cta-row { grid-template-columns: 1fr; width: 100%; }
  .card { padding: 22px 20px; }
  .card--pad-lg { padding: 24px 22px; }
  .privacy { padding: 26px 22px; }
  .bullet { gap: 14px; }
  .steps__item { grid-template-columns: 52px 1fr; gap: 14px; padding: 18px 0; }
  .tile { width: 48px; height: 48px; }
  .tile--64, .tile--72 { width: 56px; height: 56px; }
  .mark { width: 58px; height: 58px; border-radius: 17px; }
  .faq__item > summary { padding: 20px 18px; gap: 14px; }
  .faq__a { padding: 0 18px 20px 18px; }
  .who { padding: 22px 20px; gap: 16px; }
  .price-note { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 20px; }
  .price-note img.hg { margin-left: 0; }
  .chips--bare { gap: 16px; }
  .trust { grid-template-columns: minmax(0, 1fr); }
  .trust .chip { flex-direction: row; align-items: center; min-height: 0; }
}

/* таблицы → карточки на мобильном */
@media (max-width: 639px) {
  .tbl { display: block; box-shadow: none; background: transparent; }
  .tbl thead { display: none; }
  .tbl tbody { display: grid; gap: 14px; }
  .tbl tr {
    display: block;
    background: #fff;
    border: var(--border-pale);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
    padding: 6px 16px 12px;
  }
  .tbl tbody tr + tr td { border-top: 0; }
  .tbl td { display: block; padding: 10px 0; border-top: var(--border-pale) !important; }
  .tbl td:first-child { border-top: 0 !important; font-weight: 700; font-size: 16px; padding-top: 12px; }
  .tbl td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-ink);
    margin-bottom: 3px;
  }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- 12. Подвал сайта --------------------------------------------- */
.pfooter {
  border-top: var(--border-light);
  padding: 48px var(--card-inset) 56px;
  background: var(--color-canvas);
}
.pfooter__inner {
  max-width: var(--content);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pfooter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}
.pfooter__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
}
.pfooter__brand img { border-radius: var(--r-xs); }
.pfooter__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.pfooter__links a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 15px;
}
.pfooter__links a:hover,
.pfooter__brand:hover { text-decoration: underline; }
.pfooter__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #6b6577;
}

/* ---------- 13. Cookie-баннер -------------------------------------------- */
/* Ключ согласия общий с остальным сайтом (assets/js/cookie.js), поэтому
   принявший баннер на главной здесь его уже не увидит. */
/* Оформление — как на главной (assets/css/custom.css): тонкая тёмная полоса
   во всю ширину внизу, а не светлая карточка по центру. */
.skb-cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 20px;
  background: #1c1c1e;
  color: #c7c7cc;
  font-size: 13px;
  line-height: 1.25;
}
.skb-cookie[hidden] { display: none; }
.skb-cookie-text { margin: 0; font-size: 13px; line-height: 1.25; color: #c7c7cc; }
.skb-cookie-text a { color: #3b9bff; text-decoration: none; }
.skb-cookie-text a:hover { text-decoration: underline; }
.skb-cookie-btn {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 8px 26px;
  border: 0;
  border-radius: 9px;
  background: #0a84ff;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
}
.skb-cookie-btn:hover { background: #0a74e0; }
@media (max-width: 560px) {
  .skb-cookie { padding: 7px 12px; gap: 10px; font-size: 12px; }
  .skb-cookie-text { font-size: 12px; }
  .skb-cookie-btn { padding: 7px 18px; font-size: 13px; }
  .skb-cookie-extra { display: none; }
}

@media (max-width: 639px) {
  .pfooter { padding: 36px 20px 44px; }
}

/* ---------- 14. Шапка: ступени сжатия главной (замерено в браузере) ----------
   ≥992  — бренд + ссылки + кнопки;
   768–991 — бренд + кнопки, ссылки скрыты (плашка 62px, отступы 8/8/8/16);
   ≤767  — только две кнопки во всю ширину (плашка 54px, кнопки 38px, 14.4px).
   Бургера и выпадающего меню на главной нет — здесь тоже не показываем. */
@media (max-width: 991px) {
  .nav__links,
  .nav__burger,
  .nav-drop { display: none !important; }
  .nav__brand::after { display: none; }
  .nav__act { display: flex; }
  .nav { width: fit-content; height: 62px; padding: 8px 8px 8px 16px; }
  .nav-wrap { top: 8px; padding: 0 8px; }
  .sec--hero { padding: 0 8px; margin-top: 15px; }
  #sec-01 .sec__inner { padding-top: 104px; }
}
@media (max-width: 767px) {
  .nav__brand { display: none; }
  .nav-wrap { top: 24px; padding: 0 12px; }
  .nav { width: 100%; height: 54px; padding: 8px 10px; }
  .nav__act { width: 100%; gap: 10px; }
  .nav__act .btn--sm {
    flex: 1 1 0; min-width: 0; width: auto;
    height: 38px; padding: 0 10px;
    font-size: 14.4px; text-transform: none; letter-spacing: 0;
  }
  .nav__act .lbl-d { display: none; }
  .nav__act .lbl-m { display: inline; }
  #sec-01 .sec__inner { padding-top: 96px; }
}

/* ---------- 15. Герой на планшете и мобиле: картинка между заголовком и текстом ----
   Колонка текста «растворяется» (display: contents), её дети становятся
   элементами сетки героя, и картинку можно поставить третьей — сразу под h1.
   Разметка не меняется, десктоп не затронут. */
@media (max-width: 899px) {
  #sec-01 .split { gap: 0; }
  #sec-01 .col-text { display: contents; }
  #sec-01 .mark { order: 1; }
  #sec-01 .h1 { order: 2; }
  #sec-01 .col-media { order: 3; margin: 0 0 32px; }
  #sec-01 .bullet-list { order: 4; }
  #sec-01 .cta-row { order: 5; }
  #sec-01 .hero-note { order: 6; }
}

/* Секция 4: картинка по центру относительно колонки карточек, как в макете. */
#sec-04 .split--top { align-items: center; }
#sec-04 .cta-row--center,
#sec-05 .cta-row--center { margin-inline: auto; }

/* ---------- 16. Размытые формы в фоне карточки (по мотивам героя главной) ----
   Шесть косых белых лучей .hero-background-light главной + два цветных пятна
   с blur — чтобы плоский градиент карточки получил глубину. Слой лежит под
   контентом (z-index: -1 внутри контекста .sec__inner), клики не ловит. */
.sec--card > .sec__inner > .glow { position: absolute; inset: 0; max-width: none; margin: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; }
.glow i, .glow b {
  position: absolute; display: block; opacity: 0;
  animation: glow-pulse 3s linear infinite;
}
.glow i { width: 132px; background: radial-gradient(116.3% 50% at 0% 50%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); }
.glow i:nth-child(1) { height: 1328px; left: -61px; top: -264px; transform: rotate(-30deg); animation-delay: 1s; }
.glow i:nth-child(2) { height: 1360px; left: 10px;  top: -460px; transform: rotate(-22deg); animation-delay: .5s; }
.glow i:nth-child(3) { height: 1198px; left: 66px;  top: -698px; transform: rotate(-15deg); }
.glow i:nth-child(4) { height: 1198px; right: 66px; top: -698px; transform: rotate(-165deg); }
.glow i:nth-child(5) { height: 1360px; right: 10px; top: -460px; transform: rotate(-158deg); animation-delay: .5s; }
.glow i:nth-child(6) { height: 1328px; right: -61px; top: -264px; transform: rotate(-150deg); animation-delay: 1s; }
.glow b { border-radius: 50%; filter: blur(60px); animation-duration: 6s; }
.glow b:nth-of-type(1) { width: 520px; height: 420px; right: -80px; top: -120px; background: radial-gradient(closest-side, rgba(126, 67, 255, .28), rgba(126, 67, 255, 0)); }
.glow b:nth-of-type(2) { width: 460px; height: 380px; right: 26%; bottom: -160px; background: radial-gradient(closest-side, rgba(255, 102, 193, .26), rgba(255, 102, 193, 0)); animation-delay: 2s; }
@keyframes glow-pulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .glow i, .glow b { animation: none; opacity: .6; } }

/* ---------- 17. Секция 10: колонки в столбик, по центру -------------------
   Текст и картинка идут одна под другой на всю ширину карточки, содержимое
   выровнено по центру. Сетка .split схлопывается в одну колонку. */
#sec-10 .split {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: 32px;
}
/* Колонка текста «растворяется», её дети становятся элементами сетки — так
   картинку можно поставить сразу под заголовок, не трогая разметку. */
#sec-10 .col-text { display: contents; }
#sec-10 .mark { order: 1; margin-bottom: 0; }
#sec-10 .h2 { order: 2; margin-bottom: 0; margin-top: -13px; }
#sec-10 .lead { order: 3; max-width: 900px; margin: 0; }
/* В файле картинки сверху и снизу по ~11,5% прозрачных полей — визуально они
   раздували зазор до 109px при 32px по вёрстке. Подтягиваем отрицательным
   отступом в % (считается от ширины, как и масштаб самой картинки). */
#sec-10 .col-media { order: 4; width: 100%; margin-block: -5.3%; }
#sec-10 .col-media img { margin-inline: auto; }
#sec-10 .stack { order: 5; max-width: 900px; margin-bottom: 0; }
#sec-10 .cta-row { order: 6; }
/* Фон карточки — по правке владельца. */
#sec-10 > .sec__inner { background: #F2F8FD; padding-top: calc(clamp(64px, 7vw, 112px) * .5); }

/* Секция 9: картинка обрезана по контенту и увеличена ~на 40%. Колонка медиа
   расширена, картинка прижата к правому краю и вынесена в боковое поле —
   вылет влево наползал бы на текст. */
#sec-09 .split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
#sec-09 .col-media { justify-content: flex-end; }
#sec-09 .col-media img { width: 106%; max-width: none; transform: translateX(clamp(0px, 5vw - 32px, 80px)); }
@media (max-width: 899px) {
  #sec-09 .split { grid-template-columns: minmax(0, 1fr); }
  #sec-09 .col-media { justify-content: center; }
  #sec-09 .col-media img { width: 100%; max-width: 560px; transform: none; }
}

/* ---------- 18. Секция 12: раскладка и таблица по эталону -----------------
   Текстовой колонке отдано больше места — иначе ячейки таблицы ломались на
   две строки. Таблица компактнее: меньше отступы, тоньше иконки, шапка
   в одну строку. Справа — готовая картинка вместо свёрстанного телефона. */
#sec-12 .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
#sec-12 .col-media img { width: 100%; max-width: 480px; margin-inline: auto; }
#sec-12 .tbl { font-size: 14px; }
#sec-12 .tbl th,
#sec-12 .tbl td { padding: 12px 16px; }
#sec-12 .tbl thead th { font-size: 11px; letter-spacing: .06em; padding-block: 14px; }
#sec-12 .tbl thead th b { display: block; font-weight: 700; white-space: nowrap; }
#sec-12 .tbl thead th span { font-size: 12px; margin-top: 2px; white-space: nowrap; }
#sec-12 .tbl td { white-space: nowrap; }
#sec-12 .tbl td.is-wrap { white-space: normal; }
#sec-12 .tbl .rowico { gap: 10px; }
#sec-12 .tbl .rowico img { width: 26px; height: 26px; object-fit: contain; }
@media (max-width: 1279px) {
  #sec-12 .tbl { font-size: 13px; }
  #sec-12 .tbl th, #sec-12 .tbl td { padding: 10px 12px; }
}
@media (max-width: 899px) {
  #sec-12 .split { grid-template-columns: minmax(0, 1fr); }
  #sec-12 .tbl td { white-space: normal; }
}

/* Секция 14: фон карточки под фон самой картинки (у неё он 240,246,253). */
#sec-14 > .sec__inner { background: #EFF5FE; }
/* Верхнее поле карточки на 30px меньше обычного: над иконкой Zoom оставалась
   пустая полоса. */
#sec-14 > .sec__inner { padding-top: calc(clamp(64px, 7vw, 112px) - 30px); }
/* Картинка крупнее колонки и вынесена в правое поле карточки: вылет за её
   границу срезался бы overflow: hidden, а вылет влево наползал на текст. */
#sec-14 .split { grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); }
#sec-14 .col-media { justify-content: flex-end; }
/* Картинка перекрывает колоночный зазор слева и внутреннее поле карточки
   справа, поэтому она шире своей колонки, но не задевает текст. */
#sec-14 .col-media img { max-width: none;
  --bleed-l: clamp(16px, 3vw, 44px);
  --bleed-r: clamp(24px, 5vw, 88px);
  width: calc(100% + var(--bleed-l) + var(--bleed-r));
  margin-left: calc(-1 * var(--bleed-l));
  margin-right: calc(-1 * var(--bleed-r)); }
#sec-14 .cta-row { width: min(100%, 576px); }
/* Плашка «Важно» стоит на голубой карточке: розовая подложка на ней читалась
   как грязь, поэтому фон белый, а сигнал держат иконка и красный текст «Важно». */
#sec-14 .note--red { background: var(--color-canvas); }
@media (max-width: 899px) {
  #sec-14 .split { grid-template-columns: minmax(0, 1fr); }
  #sec-14 .col-media { justify-content: center; }
  #sec-14 .col-media img { width: 100%; max-width: 560px; transform: none;
    margin-left: 0; margin-right: 0; }
}

/* Секция 15: заголовок отбит от плиток на 40px (утилиты .mb-40 в наборе нет). */
#sec-15 .center.mb-40 { margin-bottom: 40px; }
/* Последний ряд: плашка со статистикой ровняется по высоте соседних плиток
   (118px), поэтому своей min-height у неё нет, а робот уменьшен под эту высоту. */
#sec-15 .stat { min-height: 0; height: 100%; padding: 20px 26px; justify-content: center; }
#sec-15 .stat__n { font-size: clamp(20px, 1.1vw + 12px, 26px); }
#sec-15 .stat__img { width: 104px; right: 16px; bottom: 4px; }


/* ---------- Секция 16: витрина пакетов, перенесена с главной -----------------
   Вёрстка .pk-* повторяет index.html + assets/css/custom.css один в один:
   правится прайс — правятся оба файла. */
.pk-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .pk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Число колонок = числу карточек; снимут пакет — здесь должно стать 3. */
@media (min-width: 1200px) { .pk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

.pk-card { position: relative; display: grid; grid-template-rows: auto auto auto 1fr; row-gap: 22px;
  background: #FDFCFE; border-radius: 28px; padding: 36px 32px 34px;
  box-shadow: 0 24px 60px -34px rgba(0, 60, 140, .28); }

/* Строки всех карточек ходят вместе: надпись, цена, кнопка и «Этого хватит на:»
   стоят на одной горизонтали независимо от того, сколько строк занял текст. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1200px) {
    .pk-grid { grid-template-rows: repeat(4, auto); }
    .pk-card { grid-row: span 4; grid-template-rows: subgrid; }
  }
}
/* Рамка съедает 2px внутри, поэтому padding уменьшен на те же 2px. */
.pk-card.is-popular { border: 2px solid #0064FF; padding: 38px 30px 32px; }
.pk-badge { position: absolute; top: -14px; left: 32px; background: #0064FF; color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .12em; padding: 7px 14px; border-radius: 999px;
  text-transform: uppercase; }
.pk-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: #0064FF;
  text-transform: uppercase; }
/* Место под надпись у популярной карточки: сама надпись вынесена в пилюлю над
   рамкой, но строку в сетке занимать обязана — иначе цена встанет выше соседей. */
.pk-eyebrow.is-ghost { visibility: hidden; }
.pk-price-wrap { display: flex; flex-direction: column; gap: 8px; }
.pk-price { font-size: 52px; font-weight: 800; color: #00214F; letter-spacing: -.035em; line-height: 1; }
.pk-period { font-size: 19px; font-weight: 700; color: #0064FF; }
.pk-note { font-size: 15px; color: #7C8598; }
.pk-cta { display: block; text-align: center; padding: 16px; border-radius: 14px;
  background: #0064FF; font-weight: 700; font-size: 16px; color: #fff; text-decoration: none;
  transition: background .15s ease; }
.pk-cta:hover { background: #0050CC; color: #fff; }
.pk-incl { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; border-top: 1px solid #E1E8F5;
  align-self: start; }
.pk-incl-title { font-size: 15px; color: #7C8598; padding-top: 12px; }
.pk-incl-item { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; font-weight: 600;
  color: #00214F; line-height: 1.45; }
.pk-check { color: #0064FF; font-size: 17px; flex: 0 0 auto; }
/* Плашка про срок жизни минут идёт после карточек, а не вплотную к ним. */
#sec-16 .price-note { margin-top: 40px; }
/* Плашка про срок жизни минут — белая: градиентная подложка сливалась с
   фоном карточки и читалась как пятно под пакетами. */
#sec-16 .price-note { background: var(--color-canvas); box-shadow: var(--shadow-card); }
/* Витрине нужна вся ширина карточки: при ограничении --content четыре пакета
   сжимались до 266px и цена «1 140 ₽» вставала в две строки. */
#sec-16 > .sec__inner > .pk-grid { max-width: none; }
/* Утилиты .mb-40 в наборе нет: заголовок иначе лежит на пилюле «Платите меньше». */
#sec-16 .center.mb-40 { margin-bottom: 40px; }

/* Секция 17: у пунктов списка подложки нет, а иконка вдвое крупнее —
   было 48px плитки при картинке в 66% (≈32px), стало 64px на всю плитку. */
#sec-17 .card-list .tile { background: transparent; border: 0; box-shadow: none;
  width: 45px; height: 45px; }
#sec-17 .card-list .tile img { width: 100%; height: 100%; }
/* Строка пункта: иконка и текст по одной оси, шрифт крупнее базового .txt--sm. */
#sec-17 .card-list .card--row { align-items: center; }
#sec-17 .card-list .txt--sm { font-size: 19px; line-height: 1.3; }

/* Секция 18: фон карточки взят из самой картинки (её подложка E6F1FD),
   поэтому иллюстрация садится на секцию без видимого шва. */
#sec-18 > .sec__inner { background: #E6F1FD; }
/* Верхнее поле карточки срезано: над иконкой висела пустая полоса. */
#sec-18 > .sec__inner { padding-top: max(32px, calc(clamp(64px, 7vw, 112px) - 54px)); }

/* Секция 19: пункты списка без подложек под иконками, шрифт крупнее базового
   .txt--sm — как в секции 17. */
#sec-19 .card-list .tile { background: transparent; border: 0; box-shadow: none; }
#sec-19 .card-list .card--row { align-items: center; }
#sec-19 .card-list .txt--sm { font-size: 19px; line-height: 1.3; }

/* Секция 19 по эталону: заголовок занимает первую строку левой колонки, а
   карточка приватности стоит во второй строке — её верх совпадает с первым
   пунктом списка, а не с шапкой, и она тянется на всю высоту списка. */
#sec-19 .split { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr; align-items: stretch; row-gap: 32px; }
#sec-19 .col-head { grid-column: 1; grid-row: 1; }
#sec-19 .col-text { grid-column: 1; grid-row: 2; }
#sec-19 .col-media { grid-column: 2; grid-row: 2; align-items: stretch; }
#sec-19 .privacy { display: flex; flex-direction: column; }
/* Карточка секции без обводки: рамка на белом фоне только резала полосу. */
#sec-19 > .sec__inner { border: 0; }
@media (max-width: 899px) {
  #sec-19 .split { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  #sec-19 .col-head, #sec-19 .col-text, #sec-19 .col-media { grid-column: 1; grid-row: auto; }
}

/* ---------- Аккордеон FAQ с главной (assets/css/custom.css, .skb-faq*) ------
   Перенесён один в один, кроме шрифта: страница живёт на своём наборе, и
   тянуть ради блока второе семейство незачем — наследуем от body. */
.skb-faq { display: flex; flex-direction: column; gap: 14px; }
.skb-faq-item { border: 1px solid #ecedf3; border-radius: 16px; background: #fff; overflow: hidden;
  transition: border-color .2s, box-shadow .2s; }
.skb-faq-item[open] { border-color: #c4dde5; box-shadow: 0 8px 26px #b9aad814; }
.skb-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 18px; padding: 20px 24px;
  font-weight: 600; font-size: 1.08rem; color: var(--color-ink); }
.skb-faq-item summary::-webkit-details-marker { display: none; }
.skb-faq-item summary:focus-visible { outline: 2px solid #005EFE; outline-offset: 2px; border-radius: 12px; }
.skb-faq-ic { flex: none; position: relative; width: 22px; height: 22px; }
.skb-faq-ic::before, .skb-faq-ic::after { content: ""; position: absolute; background: #005EFE; border-radius: 2px; }
.skb-faq-ic::before { top: 10px; left: 3px; width: 16px; height: 2px; }
.skb-faq-ic::after { top: 3px; left: 10px; width: 2px; height: 16px; transition: transform .25s ease; }
.skb-faq-item[open] .skb-faq-ic::after { transform: rotate(90deg); }
.skb-faq-a { margin: 0; padding: 0 24px 22px; color: var(--color-ink); font-size: 1.02rem; line-height: 1.6; max-width: 680px; }
@media (prefers-reduced-motion: reduce) { .skb-faq-item, .skb-faq-ic::after { transition: none; } }

/* Секция 21: шапка отбита от аккордеона на 40px (утилиты .mb-40 в наборе нет,
   зазор был нулевой, и первая плашка липла к подзаголовку). */
#sec-21 .split.mb-40 { margin-bottom: 40px; }

/* ---------- Секция 23 по эталону 23.png ------------------------------------
   Правая колонка — сетка: в первом ряду квадрат с ботом и список документов,
   во втором на всю ширину плашка со щитом. */
#sec-23 .about-media { display: grid; grid-template-columns: minmax(0, .48fr) minmax(0, .52fr);
  gap: 20px; }
#sec-23 .about-bot { border-radius: 24px; aspect-ratio: 1 / 1; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 6%;
  background:
    radial-gradient(70% 60% at 78% 22%, rgba(253, 236, 245, .95) 0%, rgba(253, 236, 245, 0) 70%),
    linear-gradient(150deg, #f6f2fe 0%, #fbf4fb 55%, #fdf3f4 100%); }
#sec-23 .about-bot img { width: 100%; height: 100%; object-fit: contain; }
/* Список документов ровняется по верху соседнего квадрата и не тянется вниз. */
#sec-23 .links { align-self: start; border-radius: 20px; }
#sec-23 .links a { padding: 14px 16px; gap: 12px; font-size: 14px; line-height: 1.3; }
#sec-23 .links a img { width: 22px; height: 22px; }
#sec-23 .about-shield { grid-column: 1 / -1; border-radius: 24px; overflow: hidden; }
#sec-23 .about-shield img { display: block; width: 100%; height: auto; }
@media (max-width: 899px) {
  #sec-23 .about-media { grid-template-columns: minmax(0, 1fr); }
  #sec-23 .about-bot { aspect-ratio: 16 / 11; }
}

/* Секция 24: фон карточки взят из подложки самой иллюстрации. */
#sec-24 > .sec__inner { background: #FBF1F9; }

/* Иконки секции 23 не квадратные по своей форме: жёсткие width/height в чипах и
   ссылках плющили их, поэтому вписываем по большей стороне. */
#sec-23 .chip img, #sec-23 .links a img { object-fit: contain; }
/* Стык секций 19-21-23: вертикальные поля вдвое меньше обычных. */
#sec-19 > .sec__inner { padding-bottom: calc(var(--sec-pad) * .5); }
#sec-21 > .sec__inner { padding-top: calc(var(--sec-pad) * .5);
  padding-bottom: calc(var(--sec-pad) * .5); }
#sec-23 > .sec__inner { padding-top: calc(var(--sec-pad) * .5); }

/* Секция 24: у пунктов нет белых подложек под иконками, иконка занимает плитку
   целиком. Однострочный пункт ровняется с иконкой по центру, многострочные —
   по верхней строке. */
#sec-24 .bullet-list .tile { background: transparent; border: 0; box-shadow: none;
  width: 36px; height: 36px; }  /* на 35% меньше базовых 56px */
#sec-24 .bullet-list .tile img { width: 100%; height: 100%; object-fit: contain; }
#sec-24 .bullet:last-child { align-items: center; }
#sec-24 .bullet:last-child .bullet__body { padding-top: 0; }

/* ---------- Футер с главной (assets/css/custom.css, .skb-footer*) -----------
   Перенесён один в один, кроме двух вещей: шрифт наследуется от страницы и
   верхней разделительной линии нет — по правке владельца. */
.skb-footer { background: #fff; padding: 40px 24px; }
.skb-footer-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.skb-footer-row1 { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.skb-footer-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  color: #231645; font-weight: 800; font-size: 1.25rem; }
.skb-footer-logo-img { width: 36px; height: 36px; border-radius: 8px; }
.skb-footer-link { color: #615e6e; text-decoration: none; font-size: 1rem; }
.skb-footer-link:hover { color: #005EFE; }
.skb-footer-row2 { color: #9a98a6; font-size: .92rem; border-top: 1px solid #f0f0f5; padding-top: 16px; }
/* Верхнее поле карточки CTA на 40px меньше обычного. */
#sec-24 > .sec__inner { padding-top: max(32px, calc(clamp(64px, 7vw, 112px) - 40px)); }
/* Нижнее поле карточки срезано на 93px: под иллюстрацией висела пустая полоса. */
#sec-24 > .sec__inner { padding-bottom: max(16px, calc(clamp(64px, 7vw, 112px) - 93px)); }

/* Секция 8 на мобиле: картинка встаёт сразу под заголовок — тем же приёмом,
   что и в герое (колонка текста «растворяется», детям задаётся порядок).
   Десктоп не затронут. */
@media (max-width: 899px) {
  #sec-08 .split { gap: 0; }
  #sec-08 .col-text { display: contents; }
  #sec-08 .mark { order: 1; }
  #sec-08 .h2 { order: 2; }
  #sec-08 .col-media { order: 3; margin: 0 0 28px; }
  #sec-08 .stack { order: 4; }
  #sec-08 .cta-row { order: 5; }
  /* На мобиле белая пилюля упиралась в скруглённый низ карточки и сливалась с
     фоном страницы. Оставляем только информацию под кнопками, без плашки. */
  #sec-08 .chip--pill {
    order: 6;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin-bottom: 16px;
  }
}

/* Секция 9 на мобиле: картинка встаёт после чипов, перед текстом. */
@media (max-width: 899px) {
  #sec-09 .split { gap: 0; }
  #sec-09 .col-text { display: contents; }
  /* col-text здесь display:contents, поэтому плашка становится прямым элементом
     грида .split и растягивается на всю дорожку. Прижимаем к началу строки. */
  #sec-09 .eyebrow { order: 1; justify-self: start; }
  #sec-09 .h2 { order: 2; }
  #sec-09 .chips { order: 3; }
  #sec-09 .col-media { order: 4; margin: 0 0 28px; }
  #sec-09 .stack { order: 5; }
  #sec-09 .cta-row { order: 6; }
}

/* Секция 18 на мобиле: иллюстрация поднимается под заголовок, перед списком. */
@media (max-width: 899px) {
  #sec-18 .split { gap: 0; }
  #sec-18 .col-text { display: contents; }
  #sec-18 .tile--72 { order: 1; justify-self: start; }
  #sec-18 .h2 { order: 2; }
  #sec-18 .col-media { order: 3; margin: 0 0 28px; }
  #sec-18 .checks { order: 4; }
  #sec-18 .cta-row { order: 5; }
}

/* ---------- Планшет: 720-1279 ----------------------------------------------
   Сброс героя раньше начинался только с 719px, и на 720-899 картинка шириной
   119% колонки (колонка здесь во всю ширину) вылезала за карточку на 90px —
   правый край телефона срезался её overflow: hidden. */
@media (min-width: 720px) and (max-width: 899px) {
  #sec-01 .hero-shot img { width: 100%; max-width: 560px; transform: none; }
  #sec-01 .col-media { margin-bottom: 0; }
}
/* На 900-1279 колонки снова две, но узкие: вылет 119% + 8% срезал телефон о
   правую границу карточки. Оставляем небольшой вылет, картинка входит целиком. */
@media (min-width: 900px) and (max-width: 1279px) {
  #sec-01 .hero-shot img { width: 108%; transform: translate(4%, 0); }
}

/* ---------- Подвал сайта (единый для всех страниц) -------------------------
   Вариант 1d «Компактный — статьи тегами» из Footer variants.dc.html.
   Значения перенесены из исходника один в один (размеры, цвета, отступы).
   Заданы явно, без var(): подвал стоит на страницах с тремя разными наборами
   токенов (главная, статьи, юридические) и обязан выглядеть одинаково везде.
   Отличие от макета одно: там подвал — карточка с радиусом 20px на сером
   полотне холста; на сайте это полоса во всю ширину, содержимое ограничено
   1280px — как и ширина артборда. */
.rb-footer{background:#fff;color:#14162b;padding:44px 64px 28px;
  -webkit-font-smoothing:antialiased;}
/* !important здесь вынужденно: в assets/css/custom.css главной висит сквозное
   `body,h1..h6,p,a,button,li,… {font-family:'Google Sans'!important}`, и без
   этого <p> и <a> подвала отрисовывались Google Sans вместо Manrope.
   Правило ограничено подвалом и ничего за его пределами не задевает. */
.rb-footer,.rb-footer *{font-family:'Manrope',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif!important;}
.rb-footer *{box-sizing:border-box;}
.rb-footer__inner{max-width:1280px;margin:0 auto;}
/* Второй селектор поднимает специфичность до (0,2,1): в assets/css/embeds.css
   есть `a:not([class]){text-decoration:underline}` с той же (0,1,1), и он
   подключён ПОСЛЕ custom.css — при равной специфичности побеждал он, из-за чего
   теги и ссылки на документы (у них нет class) отрисовывались подчёркнутыми. */
.rb-footer a,
.rb-footer a:not([class]){text-decoration:none;}
.rb-footer a:hover,
.rb-footer a:not([class]):hover{color:#26114a;text-decoration:none;}

/* верхняя строка: бренд + теги */
.rb-footer__top{display:flex;gap:56px;align-items:flex-start;}
.rb-footer__brand{display:flex;align-items:center;gap:12px;padding-top:2px;color:inherit;flex:none;}
.rb-footer__mark{width:34px;height:34px;border-radius:8px;background:#0b5cff;
  display:grid;place-items:center;color:#fff;font:800 14px/1 'Manrope',sans-serif;flex:none;}
.rb-footer__name{font:700 20px/1 'Manrope',sans-serif;letter-spacing:-0.01em;white-space:nowrap;}
.rb-footer__name b{font-weight:800;}
.rb-footer__brand:hover .rb-footer__name{color:#0b5cff;}

.rb-footer__tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;flex:1;}
.rb-footer__tags a{display:inline-block;font:500 14px/1 'Manrope',sans-serif;color:#3d4453;
  padding:9px 14px;border-radius:999px;background:#f4f5f8;transition:background .15s,color .15s;}
.rb-footer__tags a:hover{background:#e9ebf1;color:#26114a;}

/* нижняя строка */
.rb-footer__bottom{margin-top:32px;padding-top:22px;border-top:1px solid #e8eaef;
  display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;}
.rb-footer__legalcol{display:flex;flex-direction:column;gap:8px;}
.rb-footer__copy{margin:0;font:400 14px/1.5 'Manrope',sans-serif;color:#6b7280;}
.rb-footer__legal{margin:0;font:400 13px/1.5 'Manrope',sans-serif;color:#9aa1af;}
.rb-footer__docs{display:flex;gap:22px;flex-wrap:wrap;}
.rb-footer__docs a{font:500 14px/1 'Manrope',sans-serif;color:#6b7280;}

@media (max-width:900px){
  .rb-footer{padding:36px 24px 24px;}
  .rb-footer__top{flex-direction:column;gap:24px;}
  .rb-footer__tags{flex:none;}
  .rb-footer__bottom{flex-direction:column;align-items:flex-start;gap:18px;}
}
@media (max-width:560px){
  .rb-footer{padding:32px 18px 22px;}
  .rb-footer__tags{gap:8px;}
  .rb-footer__tags a{padding:9px 13px;font-size:13.5px;}
  .rb-footer__docs{gap:18px;}
}

/* ---------- Единый размер H2 (правка владельца) ----------------------------
   Все H2 страницы приведены к 46px на десктопе. Формула, а не жёсткие 46px:
   плоское значение раздуло бы заголовки и на телефоне (там сейчас 28px).
   clamp достигает ровно 46px при ширине окна от 1348px и вниз масштабируется.
   Перечислены и посекционные переопределения — у них ID-специфичность, простым
   `.h2` их не перебить. */
.h2{font-size:clamp(28px, 2.3vw + 15px, 46px);line-height:1.14;}

/* ---------- Размер H1 (правка владельца) -----------------------------------
   60px / line-height 60px на десктопе. Формула, а не плоские 60px: заголовок
   первого экрана на телефоне должен оставаться читаемым (60px там дали бы
   ~6 символов в строке). clamp достигает ровно 60px от ширины окна 1324px,
   `line-height:1` при 60px кегля — это и есть 60px, и он верно сжимается ниже.
   Перечислен и `#sec-01 .h1`: у него ID-специфичность, простым `.h1` не перебить. */
.h1,
#sec-01 .h1{font-size:clamp(32px, 3.4vw + 15px, 60px);line-height:1;}

/* ---------- Цвет текста на побочных страницах (правило владельца) ----------
   Основной текст статей — только #26114a (--color-ink). Приглушённые серые
   на отдельных элементах были расхождением: шапки таблиц (#84899d), ответы
   FAQ (#5c5b6e), подписи под ценой (#7C8598) и .accent (--color-text-muted).
   Цветные акценты не трогаем: белый на кнопках, синие/фиолетовые метки-ключи
   и цены — это осознанные акценты, а не основной текст. */
.tbl thead th,
.faq-row__a,
.pk-note,
.pk-incl-title,
.bullet__body,
.accent{color:#26114a;}

/* ---------- Кнопки Telegram/MAX в попапе ----------------------------------
   Попап перенесён с главной как есть, его кнопки опираются на .skb-nav-btn*,
   которые живут в assets/css/custom.css главной. Здесь их не было — кнопки
   отрисовывались голым текстом. Правила скопированы один в один. */
.skb-nav-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 26px; border-radius:999px; white-space:nowrap; cursor:pointer;
  font-family:'Google Sans','Poppins',sans-serif; font-weight:700; font-size:1rem; line-height:1;
  color:#fff !important; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease; }
.skb-nav-btn__ico{ width:22px; height:22px; flex:0 0 auto; display:block; object-fit:contain !important; }
.skb-nav-btn--tg{ background:linear-gradient(135deg,#35a8f0 0%,#1a7fd8 100%);
  letter-spacing:.04em; text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 12px 28px rgba(26,134,217,.35); }
.skb-nav-btn--tg:hover{ filter:brightness(1.06); transform:translateY(-2px); }
.skb-nav-btn--max{ background:linear-gradient(90deg,#304DFF 0%,#7F3CE6 100%);
  box-shadow:0 10px 24px rgba(80,64,230,.32); }
.skb-nav-btn--max:hover{ filter:brightness(1.06); transform:translateY(-2px); }

/* ---------- Контекстные ссылки между статьями (правило владельца 10.09.2026) ----
   Подчёркнутая, жирная, #005efe; при наведении #fa090a. Класс, а не голый <a>:
   на главной живёт a:not([class]), в статьях a{color:inherit} — оба обходим. */
a.rb-link,a.rb-link:visited{color:#005efe;font-weight:700;text-decoration:underline;text-underline-offset:2px;}
a.rb-link:hover{color:#fa090a;}