/* site/styles/site.css
   Без внешних зависимостей, без CDN, без сторонних шрифтов.
   Тема одна — светлая. Тёмной по системным настройкам больше нет:
   владелец решил, что сплошной тёмный сайт выглядит мрачно, а
   переключателя пока не хочет. Тёмное осталось вставками — класс
   .dark-band, — и там переменные переопределяются локально.

   Фирменный цвет — индиго, задан тройкой чисел --brand-rgb: от неё
   считаются все полупрозрачные оттенки, и сменить палитру значит
   поправить одну строку, а не сорок. */

/* ══════════════════════════════════════════════════════════════════════
   ТЁМНАЯ ВСТАВКА
   Светлая страница целиком выглядит пустовато, тёмная целиком — мрачно.
   Поэтому тёмным делаем острова: окно статистики, схему каскада,
   финальный призыв. Внутри вставки переменные переопределяются, и вся
   вложенная графика перекрашивается сама.
   ══════════════════════════════════════════════════════════════════════ */
.dark-band {
  --brand:            rgb(var(--brand-lift-rgb));
  --brand-hover:      rgb(var(--brand-lift-rgb));
  --brand-muted:      rgba(var(--brand-lift-rgb),.6);
  --brand-sign:       rgb(var(--brand-lift-rgb));
  --brand-tint-1:     #1c1a2b;
  --brand-tint-2:     #242236;
  --brand-tint-3:     rgba(255,255,255,.12);
  --color-bg:         #131220;
  --color-surface:    #1c1a2b;
  --color-surface-alt:#242236;
  --color-border:     rgba(255,255,255,.10);
  --color-border-faint:rgba(255,255,255,.06);
  --color-text:       #efedf8;
  --color-text-muted: #a8a4c0;
  --color-text-faint: #7d7994;
  --color-accent:     rgb(var(--brand-lift-rgb));
  --color-accent-text:#131220;
  --color-info-bg:    rgba(var(--brand-lift-rgb),.12);
  --color-info-border:rgba(var(--brand-lift-rgb),.28);
  --color-warm:       #d8a851;
  --color-warm-bg:    rgba(216,168,81,.14);
  --shadow:      0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.28);
  --shadow-hover:0 2px 8px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
  --shadow-card: 0 1px 3px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.3);

  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 30px;
  padding: 56px 46px;
  /* Мягкое свечение сверху — вставка читается частью страницы,
     а не дырой в ней */
  background-image: radial-gradient(ellipse at 50% -10%,
    rgba(var(--brand-lift-rgb),.16) 0%, transparent 60%);
}
@media (max-width: 768px) {
  .dark-band { padding: 36px 22px; border-radius: 22px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ПЕРЕМЕННЫЕ — СВЕТЛАЯ ТЕМА
   Палитра перестроена: насыщенный индиго уходит с больших площадей.
   Крупные секции — белые или очень светло-серые (#f5f5fb).
   Индиго остаётся на кнопках, ссылках, знаке, тонких акцентах.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* Шрифт: Inter первым — если установлен системно, выглядит премиально;
     если нет — падаем на системный стек. Никаких CDN-загрузок. */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', Consolas, 'Courier New', monospace;

  /* ── Фирменный сливовый — только акцент ── */
  --brand-rgb:    79,70,229;  /* от неё считаются полупрозрачные оттенки */
  --brand-lift-rgb: 151,142,255; /* тот же цвет для тёмных вставок */
  --brand:        #4f46e5;   /* основной, идёт на кнопки / ссылки / иконки / знак */
  --brand-hover:  #4338ca;   /* затемнение при ховере */
  --brand-deep:   #3730a3;     --brand-muted:  #8b84ee;   /* приглушённый: только рамки и заливки, не текст — 3.2:1 */
  --brand-sign:   #5b52d8;   /* знаки и стрелки текстом: тот же тон, но 6:1 на белом */

  /* Светлые подложки — почти нейтральные, чуть сливовые, не насыщенные.
     Разница между ними минимальная: секции «дышат», не кричат цветом. */
  --brand-tint-1: #f5f5fb;   /* самый светлый: чередующиеся секции */
  --brand-tint-2: #eeeef8;   /* чуть насыщеннее: шапка чата, хедер таблицы */
  --brand-tint-3: #e2e1f3;   /* рамки, делители внутри плашек */

  /* ── Нейтральный фон страницы — почти белый ── */
  --color-bg:          #fafafe;   /* тёплый белый, не кричит */
  --color-surface:     #ffffff;
  --color-surface-alt: #f5f5fb;   /* = brand-tint-1, единый alias */
  --color-border:      #e2e1ef;   /* светлая, еле заметная рамка */
  --color-border-faint:#eeeef8;   /* совсем тихая: внутренние делители */

  /* ── Текст — не чисто чёрный: теплее и мягче ── */
  --color-text:       #181726;     --color-text-muted: #605e78;   /* вспомогательный: подписи, плейсхолдеры */
  --color-text-faint: #6f6d7e;   /* совсем приглушённый: копирайт, даты. 4.7:1 на фоне */

  /* ── Акцент = бренд ── */
  --color-accent:      var(--brand);
  --color-accent-hover:var(--brand-hover);
  --color-accent-text: #ffffff;   /* белый текст на сливовом кнопке */

  /* ── Предупреждения / инфо — без сливы, нейтральнее ── */
  --color-warn-bg:     #fff8e1;
  --color-warn-border: #f0c040;
  --color-warn-text:   #5a4000;
  --color-info-bg:     var(--brand-tint-1);
  --color-info-border: var(--brand-tint-3);

  /* ── Тёплый вторичный акцент — только для меток/значков ── */
  --color-warm:    #96560f;
  --color-warm-rgb: 150,86,15;
  --color-warm-bg: #fbf2e6;

  /* ── Геометрия — единая система ── */
  --radius:    12px;   /* базовое скругление: кнопки, инпуты, малые карточки */
  --radius-lg: 16px;   /* крупные карточки, модали, секции */
  --radius-sm:  8px;   /* бейджи, теги */

  /* Тени минимальные: глубина без «пластмассовости».
     Принцип: первый слой — контур (1px), второй — рассеянный свет. */
  --shadow:      0 1px 2px rgba(35,34,43,.04), 0 4px 16px rgba(35,34,43,.06);
  --shadow-hover:0 2px 6px rgba(35,34,43,.07), 0 10px 28px rgba(35,34,43,.10);
  --shadow-card: 0 1px 3px rgba(35,34,43,.05), 0 8px 24px rgba(35,34,43,.07);

  /* ── Сетка ── */
  --col-text:  830px;
  /* Широкая колонка растёт вместе с монитором: на большом экране узкая
     полоса посередине выглядит бедно, а бесконечная строка не читается.
     Верхняя граница совпадает с утверждённым макетом */
  --col-wide: 1440px;
  --gap: clamp(1.25rem, 4vw, 2.5rem);

  /* ── Шкала отступов — крупнее прежней, воздух = дорого ── */
  --sp-xs:   .375rem;   /*  6px */
  --sp-sm:   .75rem;    /* 12px */
  --sp-md:   1.25rem;   /* 20px */
  --sp-lg:   2.5rem;    /* 40px */
  --sp-xl:   4rem;      /* 64px */
  --sp-2xl:  6rem;      /* 96px — между крупными секциями на десктопе */

  /* ── Типографика ── */
  --text-xs:   .75rem;
  --text-sm:   .875rem;
  --text-base: 1.0625rem;  /* 17px */
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.5rem;
}


/* ══════════════════════════════════════════════════════════════════════
   SKIP-LINK — доступность, не видна визуально пока нет фокуса
   ══════════════════════════════════════════════════════════════════════ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: .6em 1.2em;
  background: var(--color-surface);
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius);
}
.skip-link:focus { top: .5rem; left: .5rem; }

/* ══════════════════════════════════════════════════════════════════════
   СБРОС
   ══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* scroll-padding компенсирует липкую шапку (~64px) */
  scroll-padding-top: 4.5rem;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font);
  /* 17px — читабельный размер для маркетинговых текстов */
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  /* font-feature-settings для Inter: лигатуры и цифры */
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Защита от горизонтального скролла: section-wrap--alt использует
     отрицательный margin чтобы фон шёл на всю ширину —
     overflow-x: clip обрезает любой случайный выход без блокировки
     программного скролла (в отличие от overflow-x: hidden). */
  overflow-x: clip;
}
body.menu-open { overflow: hidden; }

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

a { color: var(--color-accent); }
a:hover { color: var(--color-accent-hover); }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 3px;
}
/* :not(.btn) обязателен: селектор с :visited сильнее, чем .btn--primary,
   и стоит один раз сходить в кабинет — «Начать бесплатно» становится
   посещённой ссылкой и красится тёмным по индиго. Кнопка не ссылка в
   тексте, «посещённость» для неё смысла не имеет. */
.page-main a:visited:not(.btn) { color: var(--color-text-muted); }
.page-main a:visited:not(.btn):hover { color: var(--color-accent-hover); }

/* ══════════════════════════════════════════════════════════════════════
   КОНТЕЙНЕРЫ
   ══════════════════════════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--col-text);
  margin-inline: auto;
  padding-inline: var(--gap);
}
.container--wide { max-width: var(--col-wide); }
/* Средний: список блога. Одна узкая колонка карточек посреди широкой
   страницы выглядела бедно; статье же широкая колонка вредит — мера
   строки важнее эффектности. */
.container--mid { max-width: 1160px; }

/* ══════════════════════════════════════════════════════════════════════
   ШАПКА — стеклянный фон + навигация по центру
   Логотип слева, nav по центру (margin-inline: auto), действия справа.
   Стекло (backdrop-filter: blur) читается дорого и современно.
   ══════════════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Стеклянный полупрозрачный фон — даёт ощущение глубины и лёгкости */
  background: rgba(251,251,253,.85);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  /* Тонкая нижняя граница вместо тени — минималистичнее */
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  max-width: var(--col-wide);
  /* Три колонки: лого / nav / действия.
     grid вместо flex: ровно делит пространство, nav остаётся центрированным. */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0 var(--sp-md);
  padding-block: .875rem;
  /* Боковые поля — нормальные, не прижатые к краю */
  padding-inline: var(--gap);
  margin-inline: auto;
}

/* ── Логотип ── */
.site-logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.site-logo .site-logo__svg {
  width: 1.8em;
  height: 1.8em;
  flex-shrink: 0;
}

/* ── Навигация — по центру через justify-self ── */
.site-nav {
  /* Центрирование в средней колонке grid */
  justify-self: center;
}
.site-nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .125rem 0;
}
.site-nav a {
  display: inline-block;
  padding: .35em .75em;
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: .005em;
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
}
.site-nav a:hover {
  color: var(--color-text);
  background: var(--brand-tint-1);
}
.site-nav a[aria-current] {
  color: var(--color-accent);
  background: var(--brand-tint-1);
}
.site-nav a:focus-visible { color: var(--color-accent); }

/* ── Действия справа: переключатель языка + кнопка «Войти» ── */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-shrink: 0;
  justify-self: end;
}

/* Переключатель языка — лёгкий, с рамкой, без заливки */
.lang-switch {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  padding: .3em .65em;
  border-radius: var(--radius-sm);
  transition: border-color .15s, color .15s;
  line-height: 1;
}
.lang-switch:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ── Бургер — только мобильный, четвёртая колонка ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: none; border: none;
  cursor: pointer; padding: 5px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  transition: background .15s;
}
.nav-toggle:hover { background: var(--brand-tint-1); }
.nav-toggle span {
  display: block;
  height: 1.5px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform .22s, opacity .22s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════════════════════
   КНОПКИ
   Акцент — сливовый фон, белый текст.
   Outline — рамка сливы, без заливки.
   Ghost — прозрачный, только текст.
   ══════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .6em 1.35em;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .16s, color .16s, border-color .16s, box-shadow .16s, transform .1s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

/* Акцентная кнопка: слива, белый текст — всегда */
.btn--primary {
  background: var(--brand);
  color: #ffffff;
  border-color: var(--brand);
  box-shadow: 0 1px 3px rgba(91,63,168,.20), 0 3px 10px rgba(91,63,168,.15);
}
.btn--primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(91,63,168,.28), 0 6px 18px rgba(91,63,168,.20);
}
.btn--primary:focus-visible {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: #ffffff;
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* Контурная: рамка сливы, без фона */
.btn--outline {
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.btn--outline:hover {
  background: var(--color-accent);
  color: #ffffff;
}
.btn--outline:focus-visible {
  background: var(--color-accent);
  color: #ffffff;
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Контурная-вторичная: второй призыв к действию рядом с акцентной кнопкой.
   Теперь cta-band светлый, поэтому используем нейтральную рамку. */
.btn--outline-inv {
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-text-muted);
}
.btn--outline-inv:hover {
  background: var(--brand-tint-1);
  border-color: var(--brand-muted);
  color: var(--color-text);
}
.btn--outline-inv:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Размеры */
.btn--sm  { font-size: var(--text-sm);  padding: .42em 1em;   }
.btn--lg  { font-size: var(--text-lg);  padding: .7em 1.75em; }

/* ══════════════════════════════════════════════════════════════════════
   ТИПОГРАФИКА
   Заголовки: вес 600 (не 700-800), межстрочный 1.12–1.2, -0.02em трекинг.
   Это читается тяжеловесней, чем 700, но без «рекламного» грубого удара.
   Надзаголовки (eyebrow): мелкий капс, разрядка — маркер премиума.
   ══════════════════════════════════════════════════════════════════════ */
h1 {
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  line-height: 1.12;
  font-weight: 600;
  margin: 0 0 .5em;
  letter-spacing: -.02em;
  color: var(--color-text);
}
h2 {
  font-size: clamp(1.2rem, 3vw, 1.625rem);
  font-weight: 600;
  /* Щедрый верхний отступ — воздух между секциями */
  margin: 2.5em 0 .6em;
  letter-spacing: -.015em;
  line-height: 1.2;
}
h3 {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  font-weight: 600;
  margin: 2em 0 .45em;
  letter-spacing: -.01em;
  line-height: 1.3;
}
h4 {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 1.5em 0 .35em;
}

p { margin: 0 0 1.2em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.5em; }
li { margin-bottom: .45em; }

/* Надзаголовок секции — мелкий капс с трекингом.
   Этот паттерн используется у Stripe, Linear, Notion — читается «дорого». */
.eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-accent);
  margin-bottom: .6em;
}

/* Лид (крупный вводный абзац) */
.page-lead {
  font-size: clamp(1rem, 2.2vw, 1.175rem);
  color: var(--color-text-muted);
  margin-bottom: 2em;
  line-height: 1.65;
}

/* ══════════════════════════════════════════════════════════════════════
   ОСНОВНОЙ КОНТЕНТ
   ══════════════════════════════════════════════════════════════════════ */
.page-main {
  min-height: 60vh;
  /* Крупный верхний отступ: первый контент отступает от шапки */
  padding-block: clamp(2.5rem, 6vw, var(--sp-xl));
}

/* Мета статьи */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .75rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border-faint);
}
.article-date,
.article-read,
.article-author {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}
.article-read::before,
/* Цвет не задаём: точка наследует приглушённый тон самой строки. Цветом
   рамки она получалась 1,2:1 — разделителя фактически не было видно. */
.article-author::before { content: '·'; margin-right: .5rem; }

/* ══════════════════════════════════════════════════════════════════════
   ВРЕЗКИ
   ══════════════════════════════════════════════════════════════════════ */
.note {
  margin: 2em 0;
  padding: 1em 1.25em;
  border-radius: var(--radius);
  border-left: 3px solid;
  font-size: var(--text-sm);
}
.note--info { background: var(--color-info-bg); border-color: var(--brand-muted); }
.note--warn {
  background: var(--color-warn-bg);
  border-color: var(--color-warn-border);
  color: var(--color-warn-text);
}

/* ══════════════════════════════════════════════════════════════════════
   ЦИТАТА
   ══════════════════════════════════════════════════════════════════════ */
.blockquote-wrap {
  margin: 2em 0;
}
blockquote {
  margin: 0;
  padding: 1em 1.5em;
  border-left: 3px solid var(--brand-muted);
  background: var(--brand-tint-1);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
}
blockquote p { margin: 0; }
.blockquote-wrap figcaption {
  margin-top: .5em;
  padding-left: 1.5em;
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}

/* ══════════════════════════════════════════════════════════════════════
   КОД
   ══════════════════════════════════════════════════════════════════════ */
pre {
  margin: 2em 0;
  padding: 1.25em;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-faint);
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: var(--text-sm);
  line-height: 1.6;
}
code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: var(--brand-tint-1);
  padding: .12em .38em;
  border-radius: 5px;
  border: 1px solid var(--color-border-faint);
}
pre code { background: none; padding: 0; font-size: inherit; border: none; }

/* ══════════════════════════════════════════════════════════════════════
   ТАБЛИЦА
   ══════════════════════════════════════════════════════════════════════ */
.table-wrap {
  margin: 2em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  min-width: 480px;
}
th, td {
  padding: .7em 1.1em;
  text-align: left;
  border-bottom: 1px solid var(--color-border-faint);
  vertical-align: top;
}
th {
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  /* Нейтральный фон заголовка таблицы, не насыщенная слива */
  background: var(--brand-tint-1);
  color: var(--color-text-muted);
  white-space: nowrap;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--brand-tint-1); }

/* ══════════════════════════════════════════════════════════════════════
   КАРТОЧКИ — базовые
   ══════════════════════════════════════════════════════════════════════ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 1.25rem;
  margin: 2em 0;
}
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75em;
  box-shadow: var(--shadow-card);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--brand-tint-3);
}
.card__title {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0 0 .5em;
}
.card__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   ШАГИ
   ══════════════════════════════════════════════════════════════════════ */
.steps {
  list-style: none;
  margin: 2em 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.step {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}
.step__num {
  flex-shrink: 0;
  width: 2rem; height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Кружок акцента: слива, белый текст — маленький, не перегружает */
  background: var(--brand);
  color: #ffffff;
  border-radius: 50%;
  font-weight: 700;
  font-size: var(--text-sm);
  margin-top: .1em;
}
.step__body { flex: 1; }
.step__title { display: block; font-weight: 600; margin-bottom: .25em; }
.step__text { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

/* ══════════════════════════════════════════════════════════════════════
   CTA-БЛОК внутри статьи — светлый, не сливовый
   ══════════════════════════════════════════════════════════════════════ */
.cta-block {
  margin: 3em 0;
  padding: 2.5em 2em;
  /* Нейтральный светлый фон с тонкой рамкой вместо насыщенной заливки */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-card);
}
.cta__text {
  font-size: var(--text-lg);
  margin-bottom: 1.25em;
  color: var(--color-text);
}

/* ══════════════════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════════════════ */
.faq { margin: 3em 0; }
.faq h2 { margin-top: 0; }
.faq__item:first-of-type { border-top: 1px solid var(--color-border-faint); }
.faq__item { border-bottom: 1px solid var(--color-border-faint); }
.faq__q {
  display: block;
  padding: .95em 0;
  font-weight: 600;
  font-size: var(--text-base);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 2.25em;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%; transform: translateY(-50%);
  font-size: 1.25em;
  font-weight: 300;
  color: var(--brand-sign);
  transition: transform .2s;
}
details[open] .faq__q::after { transform: translateY(-50%) rotate(45deg); }
.faq__a {
  padding: 0 0 1em;
  color: var(--color-text-muted);
  line-height: 1.65;
}
.faq__a p { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════
   ХЛЕБНЫЕ КРОШКИ
   ══════════════════════════════════════════════════════════════════════ */
.breadcrumbs { margin-bottom: 2em; }
.breadcrumbs ol {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.breadcrumbs li + li::before { content: '/'; margin-right: .5rem; }
.breadcrumbs a { color: var(--color-text-faint); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-accent); }

/* ══════════════════════════════════════════════════════════════════════
   БЛОГ
   ══════════════════════════════════════════════════════════════════════ */
.blog-list { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.blog-list h1 { margin-bottom: .6em; }
@media (min-width: 900px) {
  /* Две колонки карточек: экран занят, а не пустует по бокам */
  .blog-list { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .blog-list h1 { grid-column: 1 / -1; }
  .blog-list > p { grid-column: 1 / -1; }
  .post-card { height: 100%; }
}
.post-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color .18s, box-shadow .18s, transform .18s;
  overflow: hidden;
}
.post-card:hover {
  border-color: var(--brand-tint-3);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.post-card__link {
  display: block;
  padding: 1.5em 1.75em;
  text-decoration: none;
  color: inherit;
}
.post-card__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}
.post-card__title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin: 0 0 .3em;
  color: var(--color-text);
  letter-spacing: -.01em;
}
.post-card__meta {
  display: flex;
  align-items: center;
  gap: .5rem 1rem;
  margin-bottom: .7em;
}
.post-card__date,
.post-card__read {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.post-card__read::before { content: '·'; margin-right: .5rem; }
.post-card__lead {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   ПОДВАЛ — аккуратный, сдержанный
   Хейрлайн-разделитель снизу основного контента вместо жирной линии.
   ══════════════════════════════════════════════════════════════════════ */
.site-footer {
  border-top: 1px solid var(--color-border-faint);
  background: var(--color-surface);
  /* Крупный отступ сверху — воздух до подвала */
  padding-block: var(--sp-xl) var(--sp-lg);
  margin-top: var(--sp-2xl);
}
.site-footer__inner {
  max-width: var(--col-wide);
  margin-inline: auto;
  padding-inline: var(--gap);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: var(--sp-lg) var(--sp-xl);
  align-items: start;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.01em;
}
.footer__logo .site-logo__svg { width: 1.6em; height: 1.6em; }
.footer__tagline {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  line-height: 1.55;
}

.footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xl);
  align-items: start;
  grid-column: 2;
  grid-row: 1;
}
.footer-col { min-width: 8rem; }
.footer-col__title {
  margin: 0 0 .75em;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  /* Трекинг в заголовках колонок подвала — ещё один маркер премиума */
  letter-spacing: .1em;
  color: var(--color-text-faint);
}
.footer-col ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.footer-col a {
  text-decoration: none;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color .15s;
}
.footer-col a:hover { color: var(--color-accent); }

/* Нижняя полоса подвала — хейрлайн */
.footer__bottom {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-md) var(--sp-lg);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--color-border-faint);
}
.footer__requisites {
  font-style: normal;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.7;
  flex: 1;
}
.footer__requisites a { color: var(--color-text-faint); }
.footer__requisites a:hover { color: var(--color-accent); }
.footer__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
}
.footer__copy {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  white-space: nowrap;
}
.footer__copy a { color: var(--color-text-faint); }
.footer__copy a:hover { color: var(--color-accent); }

/* ══════════════════════════════════════════════════════════════════════
   COOKIE-БАННЕР
   ══════════════════════════════════════════════════════════════════════ */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-faint);
  box-shadow: 0 -2px 16px rgba(0,0,0,.07);
  padding: .875rem var(--gap);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex: 1;
}

/* ══════════════════════════════════════════════════════════════════════
   ГЕРОЙ ГЛАВНОЙ СТРАНИЦЫ
   ══════════════════════════════════════════════════════════════════════ */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg);
  align-items: start;
  padding-block: var(--sp-xl);
}
.hero__h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.75rem);
  line-height: 1.12;
  font-weight: 600;
  margin: 0 0 .6em;
  letter-spacing: -.025em;
  color: var(--color-text);
}
.hero__lead {
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: var(--color-text-muted);
  margin: 0 0 1.75em;
  line-height: 1.65;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.hero__risk { margin: 0; align-self: start; }

/* ══════════════════════════════════════════════════════════════════════
   ГЕРОЙ С ИЛЛЮСТРАЦИЕЙ ЧАТА
   ══════════════════════════════════════════════════════════════════════ */
.hero--chat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  /* Крупные вертикальные отступы — воздух = дорого */
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

/* Бейдж над заголовком — рамочный, не залитый.
   Залитый читается как «реклама», рамочный — как «метка» */
.hero__badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3em .9em;
  border-radius: 999px;
  margin-bottom: 1.1em;
  /* Рамка сливы, светлый фон — деликатно, не кричит */
  color: var(--color-accent);
  background: var(--brand-tint-1);
  border: 1px solid var(--brand-tint-3);
}

.hero__visual {
  display: flex;
  justify-content: center;
}

/* Окно чата */
.hero-chat__window {
  width: 100%;
  max-width: 360px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.hero-chat__bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .7rem 1rem;
  background: var(--brand-tint-1);
  border-bottom: 1px solid var(--color-border-faint);
}
.hero-chat__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-border);
}
.hero-chat__dot:first-child  { background: #ff5f57; }
.hero-chat__dot:nth-child(2) { background: #febc2e; }
.hero-chat__dot:nth-child(3) { background: #28c840; }
.hero-chat__title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-left: auto;
  margin-right: auto;
}
.hero-chat__messages {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1rem;
}
.hero-chat__bubble {
  display: flex;
  flex-direction: column;
  max-width: 80%;
  font-size: var(--text-sm);
  line-height: 1.45;
}
.hero-chat__bubble--in  { align-self: flex-start; }
.hero-chat__bubble--in span:first-child {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-faint);
  border-radius: 4px 14px 14px 14px;
  padding: .5em .85em;
  color: var(--color-text);
}
.hero-chat__bubble--out { align-self: flex-end; }
.hero-chat__bubble--out span:first-child {
  /* Исходящий пузырь — слива. Единственный крупный сливовый элемент в герое. */
  background: var(--brand);
  color: #fff;
  border-radius: 14px 4px 14px 14px;
  padding: .5em .85em;
}
.hero-chat__label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: .25em;
  align-self: flex-end;
  font-weight: 500;
}

/* Индикатор печати */
.hero-chat__typing {
  display: flex;
  gap: .3rem;
  padding: .6em .85em;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-faint);
  border-radius: 4px 14px 14px 14px;
  align-self: flex-start;
  width: fit-content;
}
.hero-chat__typing span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand-muted);
  animation: typing-dot 1.2s infinite ease-in-out;
}
.hero-chat__typing span:nth-child(2) { animation-delay: .2s; }
.hero-chat__typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typing-dot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

/* ══════════════════════════════════════════════════════════════════════
   ПОЛОСА ФАКТОВ (stats) — НЕ заливка сливой.
   Белая карточка с акцентными цифрами — так цифры выделяются.
   Заливка сливой убрана: владелец прав, это «вычурно».
   ══════════════════════════════════════════════════════════════════════ */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  /* Белая карточка с тонкой рамкой вместо фиолетовой плашки */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  /* margin-block убран — воздух создаёт section-wrap снаружи */
  margin-block: 0;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.stats__item {
  flex: 1;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1.5rem;
  text-align: center;
  /* Хейрлайн между ячейками — нейтральный */
  border-right: 1px solid var(--color-border-faint);
}
.stats__item:last-child { border-right: none; }
/* Цифры — сливовый акцент, крупные. Это единственное место сливы в stats. */
.stats__value {
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1.05;
  margin-bottom: .35em;
  letter-spacing: -.02em;
}
.stats__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════════════
   ОБЁРТКА СЕКЦИИ ГЛАВНОЙ — создаёт щедрые отступы между блоками.
   Применяется на главной странице вокруг каждого смыслового блока.
   Отступы 80–128px на десктопе — главный маркер «дорого».
   Фоновый тинт у --alt вырывается из container через отрицательный margin:
   так полоса фона идёт на всю ширину браузера, а контент остаётся в сетке.
   ══════════════════════════════════════════════════════════════════════ */
.section-wrap {
  padding-block: clamp(3rem, 7vw, 5rem);
}
/* Первая секция (hero) — асимметричный отступ: меньше сверху */
.section-wrap--hero {
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
/* Разделители между секциями — тонкий хейрлайн */
.section-wrap + .section-wrap {
  border-top: 1px solid var(--color-border-faint);
}
/* Чередующиеся секции: фон вырывается из container через отрицательный margin.
   var(--gap) = clamp(1.25rem, 4vw, 2.5rem) — боковые поля контейнера.
   Компенсируем их, чтобы фоновая полоса шла от края до края. */
.section-wrap--alt {
  background: var(--color-surface-alt);
  /* Вырываемся за боковые поля контейнера */
  margin-inline: calc(-1 * var(--gap));
  /* Возвращаем padding, чтобы контент остался с нормальными полями */
  padding-inline: var(--gap);
}

/* ══════════════════════════════════════════════════════════════════════
   КАРТОЧКИ С ИКОНКАМИ
   ══════════════════════════════════════════════════════════════════════ */
.icon-cards {
  /* Умеренный внешний отступ — воздух добавляет section-wrap */
  margin-block: 0;
}
.icon-cards__heading {
  text-align: center;
  margin-top: 0;
  margin-bottom: .35em;
}
.icon-cards__sub {
  text-align: center;
  color: var(--color-text-muted);
  margin-bottom: 2.25em;
  font-size: var(--text-base);
}
.icon-cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 1.25rem;
}
.icon-cards--3 .icon-cards__grid {
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
.icon-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.625rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.icon-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--brand-tint-3);
}
.icon-card__icon {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Лёгкий кружок с тонкой рамкой — иконка «в рамочке», не «закрашенный» круг */
  background: var(--brand-tint-1);
  border: 1px solid var(--brand-tint-3);
  border-radius: 50%;
  color: var(--brand);
  flex-shrink: 0;
}
.icon-card__title {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
  letter-spacing: -.01em;
}
.icon-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  flex: 1;
  line-height: 1.6;
}
.icon-card__note {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-top: 1px solid var(--color-border-faint);
  padding-top: .65rem;
  margin-top: auto;
}

/* ══════════════════════════════════════════════════════════════════════
   CTA-ПОЛОСА — НЕ сливовая заливка во всю ширину.
   Светлая карточка с тонкой сливовой рамкой — дорого и деликатно.
   Акцент только на кнопке и цифрах, фон нейтральный.
   ══════════════════════════════════════════════════════════════════════ */
.cta-band {
  /* margin-block убран — section-wrap добавляет воздух */
  margin-block: 0;
  border-radius: var(--radius-lg);
  /* Светлый фон с тонкой сливовой рамкой вместо сплошной заливки */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  /* Лёгкая тень — глубина без тяжести */
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.cta-band__inner {
  padding: clamp(2.75rem, 7vw, 4.5rem) clamp(1.5rem, 5vw, 3.5rem);
  text-align: center;
}
.cta-band__h2 {
  /* Цвет основного текста — не инвертируем */
  color: var(--color-text);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 600;
  margin: 0 0 .5em;
  letter-spacing: -.02em;
}
.cta-band__text {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  margin-bottom: 2em;
  line-height: 1.65;
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION HEADING — с надзаголовком-eyebrow
   ══════════════════════════════════════════════════════════════════════ */
.section-heading {
  text-align: center;
  /* Крупный отступ сверху: каждая секция начинается с воздуха */
  margin-bottom: 2.5em;
}
.section-heading .eyebrow { justify-content: center; display: flex; }
.section-heading__h2 { margin: 0 0 .4em; }
.section-heading__sub {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  margin: 0;
  max-width: 52ch;
  margin-inline: auto;
}

/* ══════════════════════════════════════════════════════════════════════
   ЧЕРЕДУЮЩИЕСЯ СЕКЦИИ — светлый серо-сливовый, не насыщенный
   ══════════════════════════════════════════════════════════════════════ */
.section--alt {
  background: var(--brand-tint-1);
  border-radius: var(--radius-lg);
  /* Крупные отступы внутри и снаружи — воздух */
  padding: clamp(2.5rem, 6vw, 3.5rem) clamp(1.25rem, 3vw, 2.25rem);
  margin-block: clamp(2rem, 5vw, 3rem);
}

/* ══════════════════════════════════════════════════════════════════════
   ПЛАШКА БЕТА-ПЕРИОДА
   ══════════════════════════════════════════════════════════════════════ */
.until-banner {
  background: var(--brand-tint-1);
  border: 1px solid var(--brand-tint-3);
  border-radius: var(--radius);
  padding: .75em 1.25em;
  margin-bottom: 2em;
  font-size: var(--text-sm);
  color: var(--color-text);
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════
   ТАРИФНЫЕ КАРТОЧКИ
   ══════════════════════════════════════════════════════════════════════ */
.pricing-grid {
  display: grid;
  /* Тарифные карточки немного шире — минимум 220px, максимум 4 в ряд */
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  /* Крупный зазор между карточками — воздух = дорого */
  gap: 1.75rem;
  /* Щедрые отступы снаружи */
  margin: 2.5em 0 3.5em;
  align-items: start;
}
.pricing-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  /* Щедрый внутренний отступ — воздух внутри карточки */
  padding: 2rem 1.75rem 1.625rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  box-shadow: var(--shadow-card);
  transition: box-shadow .18s, transform .18s;
}
.pricing-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
/* Выделенная карточка — сливовая рамка, чуть поднята */
.pricing-card--recommended {
  border-color: var(--brand);
  border-width: 2px;
  /* Лёгкое смещение выделенной карточки вверх — делает её «выше» соседей */
  margin-top: -0.5rem;
  /* Тень с оттенком сливы — маркер «выбора» */
  box-shadow: 0 4px 16px rgba(91,63,168,.12), 0 1px 3px rgba(91,63,168,.08);
}
.pricing-card--recommended:hover {
  box-shadow: 0 8px 28px rgba(91,63,168,.18), 0 2px 6px rgba(91,63,168,.12);
}
.pricing-card__ribbon {
  position: absolute;
  top: -1px;
  right: 1.25rem;
  background: var(--brand);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3em .9em;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.pricing-card__title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin: 0;
  letter-spacing: -.01em;
}
.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: .3em;
  flex-wrap: wrap;
}
.pricing-card__amount {
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.pricing-card__currency {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}
.pricing-card__period,
.pricing-card__year {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}
.pricing-card__year { margin: -.6rem 0 0; }
.pricing-card__features {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
  /* Хейрлайн-разделитель над списком фич — визуально отделяет цену от содержания */
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-faint);
}
.pricing-card__features li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-left: 1.4em;
  position: relative;
  margin: 0;
}
/* Галочка — акцентный цвет, маленькая */
.pricing-card__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: 700;
  font-size: .85em;
}
.pricing-card__btn {
  width: 100%;
  justify-content: center;
  margin-top: auto;
  /* Длинная надпись («Попробовать бесплатно») переносится, а не
     вылезает за карточку */
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  padding-inline: 0.9em;
}

/* Переключатель срока оплаты над тарифами */
.pricing-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 2em 0 0.5em;
}
.pricing-switch__btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 999px;
  padding: 0.5em 1.1em;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.pricing-switch__btn:hover { border-color: var(--brand); }
.pricing-switch__btn.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}
.pricing-card__dyn { color: var(--brand); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   UI-МАКЕТЫ — плоские иллюстрации интерфейса
   ══════════════════════════════════════════════════════════════════════ */

/* Общая шапка-titlebar */
.ui-win__bar {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .6rem .9rem;
  background: var(--brand-tint-1);
  border-bottom: 1px solid var(--color-border-faint);
}
.ui-win__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  flex-shrink: 0;
}
.ui-win__dot:nth-child(1) { background: #ff5f57; }
.ui-win__dot:nth-child(2) { background: #febc2e; }
.ui-win__dot:nth-child(3) { background: #28c840; }
.ui-win__title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-left: auto;
  margin-right: auto;
}

/* ui-composer */
.ui-composer {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  max-width: 380px;
  margin-inline: auto;
}
.ui-composer__body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.ui-composer__field {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-faint);
  border-radius: var(--radius);
  padding: .65em .9em;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text);
}
.uic__spin { color: var(--brand); font-weight: 600; }
.uic__var  { color: var(--color-warm); font-weight: 600; }
.ui-composer__meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.ui-composer__count strong { color: var(--color-text); }
.ui-composer__pause-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.ui-composer__pause-val { font-weight: 600; color: var(--brand); }
.ui-composer__slider-wrap { padding: .1rem 0; }
.ui-composer__slider-track {
  position: relative;
  height: 3px;
  background: var(--color-border);
  border-radius: 2px;
}
.ui-composer__slider-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 55%;
  background: var(--brand);
  border-radius: 2px;
}
.ui-composer__slider-thumb {
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  width: 13px; height: 13px;
  background: var(--brand);
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(91,63,168,.25);
}
.ui-composer__btn { width: 100%; justify-content: center; }

/* ui-inbox */
.ui-inbox {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  max-width: 520px;
  margin-inline: auto;
}
.ui-inbox__layout {
  display: grid;
  grid-template-columns: 160px 1fr;
  min-height: 220px;
}
.inbox__list {
  list-style: none;
  margin: 0; padding: 0;
  border-right: 1px solid var(--color-border-faint);
  overflow: hidden;
}
.inbox__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .4rem;
  padding: .65rem .75rem;
  border-bottom: 1px solid var(--color-border-faint);
  font-size: var(--text-xs);
  cursor: default;
}
.inbox__item:last-child { border-bottom: none; }
.inbox__item--active { background: var(--brand-tint-1); }
.inbox__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.inbox__dot--wa  { background: #25d366; }
.inbox__dot--tg  { background: #229ed9; }
.inbox__dot--max { background: var(--brand); }
.inbox__name {
  font-weight: 600;
  color: var(--color-text);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox__snippet {
  color: var(--color-text-faint);
  font-size: .7rem;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox__chat { display: flex; flex-direction: column; }
.inbox__chat-header {
  padding: .55rem .85rem;
  font-size: var(--text-sm);
  font-weight: 600;
  border-bottom: 1px solid var(--color-border-faint);
  color: var(--color-text);
  background: var(--color-surface-alt);
}
.inbox__messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .75rem;
}
.inbox__bubble {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  font-size: var(--text-sm);
  line-height: 1.45;
}
.inbox__bubble--in { align-self: flex-start; }
.inbox__bubble--in span:first-child {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-faint);
  border-radius: 4px 12px 12px 12px;
  padding: .4em .75em;
  color: var(--color-text);
}
.inbox__bubble--out { align-self: flex-end; }
.inbox__bubble--out span:first-child {
  background: var(--brand);
  color: #fff;
  border-radius: 12px 4px 12px 12px;
  padding: .4em .75em;
}
.inbox__ai-label {
  font-size: .68rem;
  color: var(--color-text-faint);
  margin-top: .2em;
  align-self: flex-end;
  font-weight: 500;
}

/* ui-approve */
.ui-approve {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  max-width: 380px;
  margin-inline: auto;
}
.ui-approve__body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.ui-approve__from { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.ui-approve__from strong { color: var(--color-text); }
.ui-approve__incoming {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-faint);
  border-radius: 4px 12px 12px 12px;
  padding: .5em .85em;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
}
.ui-approve__draft-lbl {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brand);
}
.ui-approve__draft {
  background: var(--brand-tint-1);
  border: 1px solid var(--brand-tint-3);
  border-radius: 12px 4px 12px 12px;
  padding: .5em .85em;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
}
.ui-approve__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.ui-approve__reject {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.ui-approve__reject:hover {
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

/* ui-keywords */
.ui-keywords {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  max-width: 380px;
  margin-inline: auto;
}
.ui-keywords__body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.kw__section { display: flex; flex-direction: column; gap: .4rem; }
.kw__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-faint);
}
.kw__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
/* Тег — рамочный вместо залитого: деликатнее */
.kw__tag {
  color: var(--brand);
  background: var(--brand-tint-1);
  border: 1px solid var(--brand-tint-3);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: .22em .65em;
  border-radius: 999px;
}
.kw__arrow { text-align: center; font-size: 1.1rem; color: var(--brand-sign); line-height: 1; }
.kw__answers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.kw__answer {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.45;
}
.kw__num {
  flex-shrink: 0;
  width: 1.35rem; height: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-tint-1);
  border: 1px solid var(--brand-tint-3);
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--brand);
  margin-top: .05em;
}

/* ══════════════════════════════════════════════════════════════════════
   АДАПТИВ
   ══════════════════════════════════════════════════════════════════════ */

/* Мобильное меню — выпадает из шапки аккуратной панелью */
@media (max-width: 780px) {
  /* Меняем grid шапки: 3 колонки -> 2 (лого + бургер) */
  .site-header__inner {
    grid-template-columns: auto 1fr auto auto;
  }
  .nav-toggle { display: flex; grid-column: 4; }
  .site-nav {
    /* Переносим навигацию в выпадающую панель */
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--sp-md) var(--gap);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    z-index: 99;
    /* Переопределяем grid-позицию: теперь панель вне потока */
    grid-column: unset;
    justify-self: unset;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: .15rem; }
  .site-nav a { padding: .5rem .5rem; font-size: var(--text-base); display: block; }

  /* Палец не мышь: на телефоне цель меньше 44 пикселей промахивается.
     Бургер был 36×36, мелкие кнопки — 31 в высоту. Размер даём отступами
     и минимальной высотой, а не шрифтом: надписи остаются прежними. */
  .nav-toggle { width: 44px; height: 44px; }
  .btn--sm { min-height: 44px; padding-block: .7em; }
  /* position: sticky уже создаёт контекст позиционирования для дочерних absolute,
     поэтому явный relative не нужен — и не ломает sticky-поведение шапки. */
}

@media (max-width: 900px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .footer-cols {
    grid-column: 1;
    grid-row: auto;
    flex-wrap: wrap;
    gap: var(--sp-lg) var(--sp-xl);
  }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__meta { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: .5rem 1rem; }
}

@media (max-width: 800px) {
  .hero {
    grid-template-columns: 1fr;
    padding-block: var(--sp-lg);
    gap: var(--sp-md);
  }
  .cards { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .hero--chat {
    grid-template-columns: 1fr;
    padding-block: clamp(2.5rem, 6vw, 4rem);
  }
  /* Картинку первой не поднимаем: на телефоне выше должен стоять
     заголовок с кнопками, а иллюстрация переписки — под ними.
     Прямое пожелание владельца от 21.08.2026. */
  .hero-chat__window { max-width: 340px; margin-inline: auto; }
}

@media (max-width: 600px) {
  .stats { flex-direction: column; }
  .stats__item { border-right: none; border-bottom: 1px solid var(--color-border-faint); }
  .stats__item:last-child { border-bottom: none; }
  .hero__badge { font-size: var(--text-xs); }
  .pricing-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .cta-block { padding: 1.5em 1em; }
  .step { gap: .75rem; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .footer-cols { flex-direction: column; gap: var(--sp-md); }
  .cta-band__actions { flex-direction: column; align-items: stretch; }
  .cta-band__actions .btn { width: 100%; justify-content: center; }
  .hero--chat .hero__actions { flex-direction: column; }
  .hero--chat .hero__actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
  .ui-inbox__layout { grid-template-columns: 1fr; }
  .inbox__list { border-right: none; border-bottom: 1px solid var(--color-border-faint); }
  .inbox__item { padding: .5rem .75rem; }

  /* Мелкий шрифт внутри макета изображает экран телефона — но на самом
     телефоне макет и так во всю ширину, и уменьшать уже нечего.
     Ниже 12 пикселей не опускаемся. */
  .inbox__snippet, .inbox__ai-label { font-size: var(--text-xs); }
}


/* ══════════════════════════════════════════════════════════════════════
   ПЕЧАТЬ
   ══════════════════════════════════════════════════════════════════════ */
@media print {
  .site-header, .site-footer, .nav-toggle,
  .breadcrumbs, .cta-block, .cookie-banner { display: none !important; }
  .page-main { padding: 0; }
  a { text-decoration: underline; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: .8em; }
}

/* Плашка «страница на другом языке».
   Внизу и ненавязчиво: это подсказка, а не модальное окно. Насильно
   никого не перебрасываем — робот с чужой локалью не проиндексировал
   бы вторую версию, а человек, открывший русскую страницу с английской
   системой, каждый раз оказывался бы не там, куда шёл. */
.lang-hint {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 900; display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 32px); flex-wrap: wrap;
  padding: 10px 12px 10px 18px;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 999px;
  box-shadow: var(--shadow-hover); font-size: 14px;
}
.lang-hint a { color: var(--color-accent); font-weight: 600; text-decoration: none; }
.lang-hint a:hover { text-decoration: underline; }
.lang-hint button {
  border: 0; background: none; cursor: pointer; padding: 2px 8px;
  color: var(--color-text-faint); font-size: 18px; line-height: 1;
}
.lang-hint button:hover { color: var(--color-text); }

/* ══════════════════════════════════════════════════════════════════════
   ВИТРИНА ГЛАВНОЙ
   Разметка и стили перенесены из утверждённого макета как есть. Чтобы
   не переписывать пять сотен строк под здешние имена переменных,
   ставим мостик: короткие имена макета получают значения из палитры
   сайта. Палитра остаётся единственным источником цвета.
   ══════════════════════════════════════════════════════════════════════ */
.showcase {
  --surface:      var(--color-surface);
  --surface-2:    var(--brand-tint-1);
  --text:         var(--color-text);
  --text-dim:     var(--color-text-muted);
  --line:         var(--color-border);
  --hair-rgb:     24,23,38;
  --brand-text:   var(--brand-hover);
  --brand-btn:    var(--brand);
  --brand-soft:   rgba(var(--brand-rgb),.10);
  --on-brand:     var(--color-accent-text);
  --night:        rgba(var(--hair-rgb),.14);
  --shadow-xl:    0 30px 70px rgba(24,23,38,.13);
  --radius:       var(--radius-lg);
  --ok-rgb:       19,122,60;
  --ok:           #137a3c;
  --bad-rgb:      178,48,36;
  --bad:          #b23024;
  --ch-wa:        #17703f;
  --ch-tg:        #1a6690;
  --ch-max:       #5c15d6;   /* фирменный фиолетовый MAX, притемнён до контраста на светлом */
}

/* Внутри тёмного острова те же имена берут тёмные значения */
.dark-band .showcase, .showcase.dark-band {
  --surface:   #1c1a2b;
  --surface-2: #242236;
  --text:      #efedf8;
  --text-dim:  #a8a4c0;
  --line:      rgba(255,255,255,.10);
  --hair-rgb:  255,255,255;
  --brand:     rgb(var(--brand-lift-rgb));
  --brand-text:rgb(var(--brand-lift-rgb));
  --brand-soft:rgba(var(--brand-lift-rgb),.16);
  --night:     rgba(0,0,0,.35);
  --shadow-xl: 0 40px 80px rgba(0,0,0,.5);
  --ok:        #6de884;
  --ok-rgb:    109,232,134;
  --bad:       #ff7a7a;
  --bad-rgb:   255,122,122;
  --ch-wa:     #3fc47a;
  --ch-tg:     #5cc0ef;
  --ch-max:    #a06bff;   /* фирменный фиолетовый MAX, осветлён для тёмной вставки */
}


/* ════════════════════════════════════════════════════════════
   БЕНТО-СЕТКА
════════════════════════════════════════════════════════════ */

.bento-header{margin-bottom:48px}
.bento-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:90px;
  gap:16px;
}

/* Плитка */
.tile{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;padding:26px;
  transition:border-color .2s,box-shadow .2s;
  position:relative;
}
.tile::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(ellipse at 20% 0%,var(--brand-soft) 0%,transparent 55%);
  pointer-events:none;opacity:0;transition:opacity .25s;
}
.tile:hover{border-color:rgba(var(--brand-rgb),.3);box-shadow:0 0 40px rgba(var(--brand-rgb),.08)}
.tile:hover::before{opacity:1}

/* Размеры плиток.
   Правило полосы: один крупный макет и две спокойные плитки рядом.
   Девять макетов подряд читались как свалка — глазу не за что зацепиться. */
.t-unified  {grid-column:span 6;grid-row:span 3}
.t-broadcast{grid-column:span 6;grid-row:span 3}
.t-numbers  {grid-column:span 3;grid-row:span 3}
.t-quiet    {grid-column:span 3;grid-row:span 3}
.t-contacts {grid-column:span 3;grid-row:span 3}
.t-api      {grid-column:span 3;grid-row:span 3}

/* Заголовок полосы: разделяет «написать первым» и «разобрать входящее» */
.bento-band{margin:40px 0 20px}
.bento-band:first-of-type{margin-top:0}
.band-title{font-size:22px;font-weight:700;letter-spacing:-.01em}
.band-sub{font-size:14.5px;color:var(--text-dim);margin-top:4px;max-width:60ch}

/* Спокойная плитка: перечисление вместо очередного макета */
.tile-facts{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.tile-fact{
  font-size:12.5px;color:var(--text-dim);padding-left:16px;position:relative;line-height:1.45;
}
.tile-fact::before{
  content:'';position:absolute;left:0;top:7px;width:6px;height:6px;
  border-radius:50%;background:rgba(var(--brand-rgb),.45);
}

.tile-name{
  font-size:15px;font-weight:700;color:var(--text);margin-bottom:7px;
}
.tile-desc{
  font-size:13px;color:var(--text-dim);line-height:1.55;
}

/* Плитка Единое окно */
.t-unified .inbox-list{
  margin-top:14px;display:flex;flex-direction:column;gap:7px;
}
.inbox-row{
  display:flex;align-items:center;gap:10px;
  background:var(--surface-2);border-radius:10px;
  padding:8px 11px;
}
.inbox-av{width:28px;height:28px;border-radius:50%;flex-shrink:0}
.inbox-n{font-size:13px;font-weight:600;color:var(--text);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox-ch-badge{font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:5px}
.inbox-time{font-size:10.5px;color:var(--text-dim);flex-shrink:0}

/* Плитка Автоответчик — схема */
.auto-scheme{
  margin-top:14px;
  display:flex;align-items:center;gap:8px;
  font-size:11.5px;color:var(--text-dim);
}
.auto-box{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:8px;padding:5px 10px;font-size:11.5px;white-space:nowrap;
}
.auto-arrow{color:var(--brand-text);font-size:12px;flex-shrink:0}

/* Плитка Ключевые слова */
.kw-rule{
  margin-top:14px;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;
}
.kw-tokens{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.kw-token{
  background:var(--brand-soft);border:1px solid rgba(var(--brand-rgb),.25);
  color:var(--brand-text);font-size:11.5px;font-weight:600;
  border-radius:6px;padding:2px 8px;
}
.kw-resp{font-size:12px;color:var(--text-dim);line-height:1.5}
.kw-spin{color:var(--brand-text);font-weight:600}

/* Плитка Бот подтверждения */
.confirm-card{
  margin-top:12px;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:12px;padding:13px 14px;
}
.tg-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.tg-av{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,#2aabee,#1a74c5);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;flex-shrink:0;
}
.tg-name{font-size:12px;font-weight:700;color:var(--text)}
.tg-sub{font-size:10.5px;color:var(--text-dim)}
.tg-msg{font-size:12px;color:var(--text-dim);line-height:1.55;margin-bottom:10px}
.tg-msg strong{color:var(--text);font-weight:600}
.tg-btns{display:flex;gap:6px;flex-wrap:wrap}
.tg-btn{
  font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:8px;cursor:default;
}
.tg-yes{background:var(--brand-btn);color:var(--on-brand)}
.tg-edit{background:var(--brand-soft);color:var(--brand-text);border:1px solid rgba(var(--brand-rgb),.25)}
.tg-no{background:rgba(var(--bad-rgb),.1);color:var(--bad);border:1px solid rgba(var(--bad-rgb),.2)}

/* Плитка Рассылки */
.bc-spin{
  margin-top:14px;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:10px;padding:10px 13px;
  font-size:12px;color:var(--text-dim);font-family:monospace;line-height:1.7;
}
.bc-var{color:var(--brand-text);font-weight:700}
.bc-meta{display:flex;gap:16px;margin-top:10px;flex-wrap:wrap}
.bc-stat{font-size:11.5px;color:var(--text-dim)}
.bc-stat strong{color:var(--brand-text);font-weight:700}

/* Плитка Тихие часы */
.quiet-clock{margin-top:14px}
.clock-bar{
  height:14px;background:var(--surface-2);border-radius:7px;
  overflow:hidden;display:flex;position:relative;
}
.clock-day{
  flex:1;background:linear-gradient(90deg,rgba(var(--brand-rgb),.25),rgba(var(--brand-rgb),.15));
  border-radius:7px;
}
.clock-night{
  width:38%;background:var(--night);
  border-left:1px solid rgba(var(--brand-rgb),.3);
  display:flex;align-items:center;justify-content:center;
}
.clock-labels{
  display:flex;justify-content:space-between;
  margin-top:6px;font-size:10.5px;color:var(--text-dim);
}
.clock-night-label{font-size:10px;color:var(--text);opacity:.75}
.quiet-note{font-size:12px;color:var(--text-dim);margin-top:8px}

/* Плитка API */
.api-chip{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--brand-soft);border:1px solid rgba(var(--brand-rgb),.2);
  color:var(--brand-text);font-size:10.5px;font-weight:700;
  border-radius:6px;padding:3px 8px;margin-top:10px;
}

/* Плитка ИИ-помощник */
.ai-features{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;
}
.ai-feat{
  display:flex;align-items:center;gap:6px;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:9px;padding:7px 12px;
  font-size:12.5px;color:var(--text-dim);
}
.ai-feat-dot{width:6px;height:6px;border-radius:50%;background:var(--brand-text);flex-shrink:0}

/* Адаптив бенто */
@media(max-width:1100px){
  .bento-grid{grid-template-columns:repeat(6,1fr)}
  .t-unified,.t-broadcast{grid-column:span 6;grid-row:span 3}
  .t-numbers,.t-quiet,.t-contacts,.t-api{grid-column:span 3;grid-row:span 3}
}
@media(max-width:700px){
  .bento-grid{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .t-unified,.t-broadcast,.t-quiet,.t-api,.t-numbers,
  .t-contacts{grid-column:span 2;grid-row:span 1}
  .band-title{font-size:19px}
  .tile{padding:20px}
}


/* ════════════════════════════════════════════════════════════
   СЕКЦИЯ СТАТИСТИКИ (макет окна приложения)
════════════════════════════════════════════════════════════ */

.stats-header{margin-bottom:42px}
.stats-caption{
  font-size:13px;color:var(--text-dim);
  margin-top:10px;font-style:italic;
}
.stats-window{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;overflow:hidden;
  box-shadow:var(--shadow-xl),0 0 0 1px rgba(var(--brand-rgb),.12);
}
.sw-topbar{
  display:flex;align-items:center;gap:12px;
  padding:14px 20px;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.sw-dots{display:flex;gap:6px}
.sw-dot{width:10px;height:10px;border-radius:50%}
.sw-title{font-size:13px;font-weight:600;color:var(--text-dim);margin-left:4px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-badge{
  font-size:11px;background:rgba(var(--ok-rgb),.07);
  color:var(--text-dim);border:1px solid rgba(var(--ok-rgb),.22);
  border-radius:6px;padding:3px 9px;font-weight:600;
  white-space:nowrap;flex-shrink:0;
}
@media(max-width:500px){.sw-badge{display:none}}
.sw-body{
  display:grid;grid-template-columns:1fr 340px;
  gap:0;min-height:380px;
}
.sw-main{padding:24px;border-right:1px solid var(--line)}
.sw-sidebar{padding:24px}

/* Ряд метрик */
.metrics-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:12px;margin-bottom:24px;
}
.metric{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;
}
.metric-label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.metric-val{font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--text);line-height:1}
.metric-delta{font-size:11px;margin-top:4px}
.delta-up{color:var(--ok)}
.delta-dn{color:var(--bad)}

/* Столбчатая диаграмма */
.bar-chart-wrap{position:relative}
.bar-chart-label{font-size:12px;color:var(--text-dim);margin-bottom:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.bar-chart{
  display:flex;align-items:flex-end;gap:8px;
  height:140px;
}
.bar-col{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
}
.bar{
  width:100%;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,var(--brand) 0%,rgba(var(--brand-rgb),.45) 100%);
  transition:opacity .2s;
}
.bar-x{font-size:10px;color:var(--text-dim);text-align:center;white-space:nowrap}

/* Кольцевая диаграмма */
.donut-wrap{display:flex;flex-direction:column;gap:20px}
.donut-label{font-size:12px;color:var(--text-dim);margin-bottom:14px;font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.donut-row{display:flex;align-items:center;gap:20px}
.donut-svg{flex-shrink:0}
.donut-legend{display:flex;flex-direction:column;gap:10px}
.legend-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-dim)}
.legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.legend-val{margin-left:auto;font-weight:700;color:var(--text);font-size:13px}

/* Спарклайн */
.sparkline-wrap{border-top:1px solid var(--line);padding-top:16px}
.sparkline-label{font-size:12px;color:var(--text-dim);font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}
.sparkline-row{display:flex;align-items:flex-end;gap:2px}
.sparkline-meta{display:flex;justify-content:space-between;margin-top:6px;font-size:10px;color:var(--text-dim)}
/* --ok подобран так, чтобы читаться и на светлой, и на тёмной палитре */
.spark-trend{font-size:11px;color:var(--ok);font-weight:600}

@media(max-width:900px){
  .sw-body{grid-template-columns:1fr}
  .sw-sidebar{border-top:1px solid var(--line);border-right:none}
  .metrics-row{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .metrics-row{grid-template-columns:1fr 1fr}
  .bar-chart{gap:4px}
}


/* ════════════════════════════════════════════════════════════
   СХЕМА КАСКАДА
════════════════════════════════════════════════════════════ */

.cascade-header{margin-bottom:48px}
.cascade-canvas{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  padding:40px 32px;
  overflow-x:auto;
}
.cascade-inner{
  display:flex;align-items:center;justify-content:center;
  gap:0;min-width:640px;
  position:relative;
}
.casc-node{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  flex-shrink:0;
}
.casc-icon{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(var(--hair-rgb),.1);
}
.casc-name{font-size:12px;font-weight:700;color:var(--text)}
.casc-sub{font-size:10.5px;color:var(--text-dim);text-align:center;max-width:80px;line-height:1.4}
/* Соединитель */
.casc-conn{
  display:flex;flex-direction:column;align-items:center;
  flex:1;min-width:60px;max-width:100px;
  position:relative;
  margin-top:-20px;/* выровнять по центру иконок */
}
.casc-line{
  width:100%;height:2px;
  background:linear-gradient(90deg,rgba(var(--brand-rgb),.4),rgba(var(--brand-rgb),.15));
  position:relative;
}
.casc-line::after{
  content:'';position:absolute;right:-1px;top:50%;transform:translateY(-50%);
  border:5px solid transparent;
  border-left:7px solid rgba(var(--brand-rgb),.5);
}
.casc-check{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  margin-top:6px;
}
.casc-badge{
  font-size:9.5px;font-weight:700;letter-spacing:.05em;
  padding:2px 7px;border-radius:5px;white-space:nowrap;
}
.casc-yes{background:rgba(var(--ok-rgb),.1);color:var(--ok);border:1px solid rgba(var(--ok-rgb),.2)}
.casc-no{background:rgba(var(--bad-rgb),.08);color:var(--bad);border:1px solid rgba(var(--bad-rgb),.18)}
.casc-bypass{
  font-size:9.5px;color:var(--text-dim);text-align:center;
  max-width:72px;line-height:1.4;margin-top:2px;
}
/* Узел «Клиент» */
.casc-start{
  width:44px;height:44px;border-radius:50%;
  background:var(--surface-2);border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}


/* ════════════════════════════════════════════════════════════
   ТРИ ДВИЖКА (чередующиеся блоки)
════════════════════════════════════════════════════════════ */

.engines-header{margin-bottom:56px}
.engine-block{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;align-items:center;
  padding:48px 0;
  border-top:1px solid var(--line);
}
.engine-block:last-child{border-bottom:1px solid var(--line)}
.engine-block.flip .eng-visual{order:-1}
.eng-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(var(--hair-rgb),.06);border:1px solid rgba(var(--hair-rgb),.1);
  color:var(--text-dim);border-radius:6px;padding:3px 9px;margin-bottom:14px;
}
.eng-tag.ai-tag{
  background:var(--brand-soft);border-color:rgba(var(--brand-rgb),.3);
  color:var(--brand-text);
}
.eng-h{font-size:clamp(22px,2.8vw,34px);color:var(--text);margin-bottom:14px}
.eng-p{font-size:15px;color:var(--text-dim);line-height:1.7;margin-bottom:20px}
.eng-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.eng-list li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:14px;color:var(--text-dim);
}
.eng-list li::before{
  content:'';width:5px;height:5px;border-radius:50%;background:var(--brand-text);
  flex-shrink:0;margin-top:8px;
}
.eng-visual{
  background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:24px;overflow:hidden;
  min-height:220px;
  position:relative;
}
.eng-visual::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 80% 20%,var(--brand-soft) 0%,transparent 60%);
  pointer-events:none;
}

/* Схема автоответчика */
.autobot-flow{
  display:flex;flex-direction:column;gap:10px;
}
.flow-step{
  display:flex;align-items:center;gap:12px;
}
.flow-box{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:10px;padding:8px 14px;
  font-size:13px;color:var(--text-dim);flex:1;
}
.flow-box.highlight{
  border-color:rgba(var(--brand-rgb),.4);color:var(--text);
  background:var(--brand-soft);
}
.flow-arrow{
  display:flex;align-items:center;justify-content:center;
  color:var(--brand-text);font-size:18px;font-weight:300;padding-left:10px;
}
.flow-pause{
  display:flex;align-items:center;gap:8px;
  padding-left:14px;
}
.pause-bar{
  height:3px;background:linear-gradient(90deg,var(--brand),transparent);
  border-radius:2px;flex:1;opacity:.5;
}
.pause-label{font-size:11px;color:var(--brand-text);white-space:nowrap}

/* Схема ключевых слов */
.kw-visual{display:flex;flex-direction:column;gap:12px}
.kw-trigger-row{display:flex;gap:6px;flex-wrap:wrap}
.kw-trigger{
  background:var(--brand-soft);border:1px solid rgba(var(--brand-rgb),.3);
  color:var(--brand-text);font-size:12px;font-weight:600;
  border-radius:7px;padding:4px 10px;
}
.kw-arrow-down{
  font-size:20px;color:var(--brand-text);text-align:center;
}
.kw-resp-box{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:10px;padding:10px 13px;
  font-size:13px;color:var(--text-dim);line-height:1.6;
}
.kw-resp-spin{color:var(--brand-text);font-weight:600}
.kw-limit{font-size:11px;color:var(--text-dim);margin-top:8px}
.kw-limit strong{color:var(--brand-text)}

/* ИИ-помощник визуал */
.ai-visual-wrap{display:flex;flex-direction:column;gap:12px}
.ai-learn-row{
  display:flex;align-items:center;gap:8px;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:10px;padding:9px 13px;
}
.ai-learn-icon{
  width:28px;height:28px;border-radius:7px;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ai-learn-text{font-size:12.5px;color:var(--text-dim)}
.ai-learn-text strong{color:var(--text);font-weight:600}
.ai-arrow-col{
  display:flex;flex-direction:column;align-items:center;
  padding:4px 0;gap:2px;
}
.ai-arrow-line{width:2px;height:16px;background:linear-gradient(180deg,var(--brand),transparent);opacity:.5;border-radius:1px}

@media(max-width:860px){
  .engine-block{grid-template-columns:1fr;gap:32px;padding:36px 0}
  .engine-block.flip .eng-visual{order:0}
}

/* Секции витрины: ширину и вертикальный ритм задаёт страница,
   внутренние отступы уже заложены в перенесённой разметке */
.showcase-section { margin: var(--sp-10, 64px) 0; }
.showcase-section .dark-band { margin: 0; }

/* На очень широких мониторах даём странице ещё немного места:
   так свёрстан утверждённый макет, и владелец отдельно отмечал,
   что раньше сайт не пользовался шириной экрана */
@media (min-width: 1600px) { :root { --col-wide: 1560px; } }
@media (min-width: 2200px) { :root { --col-wide: 1760px; } }

/* ── Нижний предел шрифта в макетах на телефоне ──────────────────────
   Макет рисовался на широком экране, и мелкие подписи там уместны:
   рядом лежит крупный текст, который задаёт масштаб. На телефоне
   макет и так во всю ширину, уменьшать уже нечего, а подписи в 9–10
   пикселей просто не читаются.

   Поднимаем только самостоятельные подписи. Цифры и дни недели внутри
   диаграмм не трогаем: там места ровно под них, и от увеличения
   столбики полезут друг на друга.

   !important здесь по делу, а не от лени: часть размеров в утверждённом
   макете прописана прямо в атрибуте style, и обычным правилом их не
   перебить. Вычищать их из разметки — значит править то, что владелец
   вычитал и принял; дешевле переопределить на одном брейкпоинте. */
@media (max-width: 700px) {
  .showcase .metric-label,
  .showcase .metric-delta,
  .showcase .spark-trend,
  .showcase .inbox-time,
  .showcase .inbox-ch-badge,
  .showcase .clock-night-label,
  .showcase .clock-labels,
  .showcase .sparkline-meta,
  .showcase .flow-box span,
  .showcase .casc-sub,
  .showcase .casc-badge,
  .showcase .eng-tag,
  .showcase .eyebrow { font-size: 11px !important; }
}