/* ms-landing.css — стили лендинга главной, scoped под .ms-landing,
   чтобы не конфликтовать с общей шапкой base.css. Генерится из
   lab-tokens.css + инлайн-стилей макета. Не править вручную. */

/* ================================================================
   ЛАБОРАТОРИЯ · ДИЗАЙН-СИСТЕМА
   Токены и базовые компоненты для построения страниц сайта.
   Версия: base-2 (от 2026-05-01)
   ================================================================ */

/* ───────── 1. ШРИФТЫ ─────────
   Подключение через Google Fonts. На проде стоит загружать локально
   через @font-face, чтобы не зависеть от внешнего CDN. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');


/* ───────── 2. ДИЗАЙН-ТОКЕНЫ ─────────
   Все цвета, отступы, скругления и тени собраны как CSS-переменные.
   На любой странице доступны через var(--token-name). */
:root {

  /* ───── Палитра ───── */

  /* Основные фоны */
  --bg:          #fafbfc;   /* фон страницы */
  --bg-card:     #ffffff;   /* фон карточки/таблицы/любой "поднятой" поверхности */
  --bg-alt:      #f4f5f7;   /* фон второстепенных элементов (чипы, фильтры) */
  --bg-subtle:   #f8f9fb;   /* фон шапки таблицы и групповых заголовков */

  /* Текст */
  --ink:         #0a0e1a;   /* основной — заголовки, числа, важное */
  --ink-soft:    #3a3f4d;   /* подзаголовок, второстепенный текст */
  --mute:        #6b7280;   /* подписи, метаданные */
  --mute-soft:   #9aa1ad;   /* плейсхолдеры, разделители */

  /* Границы */
  --border:        #e5e7eb;  /* обычная граница */
  --border-strong: #d1d5db;  /* акцентная граница (на кнопках, инпутах) */

  /* Акцент — индиго (главный бренд-цвет) */
  --accent:       #4338ca;
  --accent-hover: #3730a3;
  --accent-soft:  #eef2ff;   /* светлый фон акцента (chip-active, hover-зоны) */

  /* Семантические статусы */
  --ok:        #047857;   --ok-soft:    #d1fae5;   /* "В наличии", успех */
  --warn:      #b45309;   --warn-soft:  #fef3c7;   /* "Дозревает", предупреждение, акция */
  --bad:       #b91c1c;   --bad-soft:   #fee2e2;   /* "Скоро будет", ошибка */
  --info:      #1d4ed8;   --info-soft:  #dbeafe;   /* информация, "Уведомить" */


  /* ───── Размеры ───── */

  /* Высоты системных зон */
  --h-topbar:  56px;
  --h-input:   36px;       /* инпуты, мелкие кнопки в шапке */
  --h-button:  38px;       /* стандартные кнопки в плашках */
  --h-stepper: 32px;       /* кнопки таблицы, степпер */

  /* Боковая колонка */
  --rail-w:    320px;

  /* Скругления */
  --r-sm:      4px;        /* бейджи, чипы */
  --r-md:      6px;        /* кнопки в строках */
  --r-lg:      8px;        /* кнопки в шапках, инпуты */
  --r-xl:      10px;       /* карточки */
  --r-2xl:     12px;       /* большие карточки, таблица */


  /* ───── Тени ───── */
  --shadow-card:   0 1px 2px rgba(10,14,26,0.04);
  --shadow-button: 0 1px 2px rgba(10,14,26,0.06);
  --shadow-footer: 0 -1px 2px rgba(10,14,26,0.03);
}


/* ───────── 3. БАЗА ─────────
   Сброс и базовая типографика. Применяется на всех страницах. */
.ms-landing *, .ms-landing *::before, .ms-landing *::after { box-sizing: border-box; }

.ms-landing, .ms-landing {
  margin: 0;
  padding: 0;
}

.ms-landing {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Все цифры по умолчанию — табличные (одинаковая ширина), чтобы не дёргалось */
.ms-landing .tabular { font-variant-numeric: tabular-nums; }

/* Моноширинный — для артикулов, цифр, кодов */
.ms-landing .mono {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}


/* ───────── 4. ТИПОГРАФИКА ─────────
   Стандартные классы для текста.
   Соответствуют размерам, использованным в base-2. */

.ms-landing h1, .ms-landing .h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--ink);
}
.ms-landing h2, .ms-landing .h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.ms-landing h3, .ms-landing .h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.ms-landing .text-mute { color: var(--mute); }
.ms-landing .text-mute-sm { color: var(--mute); font-size: 12px; }
.ms-landing .text-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mute);
}


/* ───────── 5. КНОПКИ ─────────
   Базовые классы. Все кнопки — без подчёркивания, c наследованием шрифта. */
.ms-landing .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--h-button);
  padding: 0 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.ms-landing .btn:hover { background: var(--bg-alt); }

.ms-landing .btn-primary {
  background: var(--accent);
  color: #fff;
  border: 0;
  font-weight: 600;
  padding: 0 18px;
}
.ms-landing .btn-primary:hover { background: var(--accent-hover); }

.ms-landing .btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--mute);
}
.ms-landing .btn-ghost:hover { background: var(--bg-alt); color: var(--ink-soft); }

.ms-landing .btn-sm {
  height: var(--h-stepper);
  padding: 0 12px;
  font-size: 12.5px;
}
.ms-landing .btn-icon {
  width: var(--h-button);
  padding: 0;
  flex-shrink: 0;
}


/* ───────── 6. БЕЙДЖИ ─────────
   Цветные плашки для статусов и категорий. */
.ms-landing .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  font-weight: 500;
}
.ms-landing .badge .dot {
  width: 5px;
  height: 5px;
  border-radius: 3px;
  background: currentColor;
}
.ms-landing .badge.ok { background: var(--ok-soft);   color: var(--ok); }
.ms-landing .badge.warn { background: var(--warn-soft); color: var(--warn); }
.ms-landing .badge.bad { background: var(--bad-soft);  color: var(--bad); }
.ms-landing .badge.info { background: var(--info-soft); color: var(--info); }


/* ───────── 7. ИНПУТЫ ───────── */
.ms-landing .input {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--h-input);
  padding: 0 12px;
  border-radius: var(--r-lg);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--mute);
  font-size: 13px;
}
.ms-landing .input input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  color: var(--ink);
  padding: 0;
  min-width: 0;
}
.ms-landing .input input::placeholder { color: var(--mute); }

.ms-landing .kbd {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  color: var(--mute-soft);
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-card);
}


/* ───────── 8. ЧИПЫ ФИЛЬТРОВ ───────── */
.ms-landing .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--ink-soft);
  border-radius: var(--r-md);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.ms-landing .chip:hover { background: var(--bg-alt); }
.ms-landing .chip.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.ms-landing .chip.dashed {
  border-style: dashed;
  background: transparent;
}


/* ───────── 9. КАРТОЧКИ ───────── */
.ms-landing .card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
}
.ms-landing .card-rail {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 14px;
}


/* ───────── 10. ШАПКА (TOPBAR) ───────── */
.ms-landing .topbar {
  height: var(--h-topbar);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}
.ms-landing .topbar .nav { display: flex; gap: 4px; }
.ms-landing .topbar .nav-item {
  padding: 7px 12px;
  border-radius: var(--r-md);
  color: var(--mute);
  font-weight: 500;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ms-landing .topbar .nav-item:hover { background: var(--bg-alt); color: var(--ink-soft); }
.ms-landing .topbar .nav-item.active { color: var(--ink); background: var(--bg-alt); }


/* Логотип ─────────────────────────────────────────────────────── */
.ms-landing .logo { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.ms-landing .logo-mark {
  width: 26px;
  height: 26px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--accent), #6366f1);
  display: grid;
  place-items: center;
}
.ms-landing .logo-name {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.3px;
  color: var(--ink);
}


/* Индикатор версии макета (для дизайн-режима) */
.ms-landing .ver-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--mute);
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.ms-landing .ver-pill .v { color: var(--accent); }


/* ───────── 11. PAGEHEAD (заголовок страницы) ───────── */
.ms-landing .pagehead .crumbs {
  font-size: 12px;
  color: var(--mute);
  margin-bottom: 6px;
}
.ms-landing .pagehead .crumbs .sep { margin: 0 6px; color: var(--mute-soft); }
.ms-landing .pagehead .title-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* "Pill" с количеством — рядом с заголовком */
.ms-landing .sku-pill {
  height: 22px;
  padding: 0 8px;
  background: var(--bg-alt);
  color: var(--mute);
  border-radius: var(--r-sm);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}


/* ───────── 12. ТАБЛИЦА КАТАЛОГА ───────── */
.ms-landing .tbl-card { overflow: hidden; }
.ms-landing .tbl-card table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.ms-landing .tbl-card thead tr {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  height: 40px;
}
.ms-landing .tbl-card th {
  text-align: left;
  padding: 0 16px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  user-select: none;
}
.ms-landing .tbl-card th .th-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 16px;
}
.ms-landing .tbl-card th[data-align="right"] .th-inner {
  justify-content: flex-end;
  padding-right: 0;
}
.ms-landing .tbl-card th.active-sort {
  background: var(--bg-alt);
  color: var(--ink);
}
.ms-landing .tbl-card tbody td { background: var(--bg-card); }
.ms-landing .tbl-card tbody tr:hover td { background: var(--bg-alt); }


/* Заголовок группы (категории) ─────────────────────────────── */
.ms-landing .group-head td {
  background: var(--bg-subtle);
  padding: 0 16px;
  height: 40px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
.ms-landing .group-head .gh-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
}
.ms-landing .group-head .chev {
  color: var(--ink-soft);
  display: inline-grid;
  place-items: center;
  transition: transform 0.18s;
}
.ms-landing .group-head.collapsed .chev { transform: rotate(-90deg); }
.ms-landing .group-head .name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.ms-landing .group-head .cnt { font-size: 12px; color: var(--mute); }
.ms-landing .group-head .sum {
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  color: var(--ink-soft);
  font-weight: 500;
}
.ms-landing .group-head .sum-lbl {
  color: var(--mute-soft);
  margin-right: 4px;
}


/* ───────── 13. STEPPER (− N +) ─────────
   Используется в ячейке "В корзину" и любых других местах,
   где нужен компактный счётчик количества. */
.ms-landing .stepper {
  display: inline-flex;
  align-items: center;
  height: var(--h-stepper);
  border: 1px solid var(--accent);
  border-radius: 7px;
  background: var(--bg-card);
  overflow: hidden;
}
.ms-landing .stepper button {
  width: var(--h-stepper);
  height: var(--h-stepper);
  min-width: var(--h-stepper);
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
  display: grid;
  place-items: center;
}
.ms-landing .stepper button.plus {
  background: var(--accent);
  color: #fff;
}
.ms-landing .stepper .qty {
  width: 44px;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  border-left: 1px solid var(--accent-soft);
  border-right: 1px solid var(--accent-soft);
  height: var(--h-stepper);
  display: grid;
  place-items: center;
}


/* ───────── 14. ПЛАШКА КОРЗИНЫ (FOOTER) ─────────
   Появляется только когда в корзине ≥1 товар.
   Класс .is-hidden — slide down, всё скрывается. */
.ms-landing .footer {
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: var(--shadow-footer);
  position: sticky;
  bottom: 0;
  z-index: 5;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.ms-landing .footer.is-hidden {
  transform: translateY(100%);
  pointer-events: none;
  box-shadow: none;
}
.ms-landing .footer .lbl {
  font-size: 11.5px;
  color: var(--mute);
  font-weight: 500;
}
.ms-landing .footer .v1 { font-size: 14px; font-weight: 600; margin-top: 1px; }
.ms-landing .footer .v2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 1px;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}
.ms-landing .footer .vsep {
  width: 1px;
  height: 28px;
  background: var(--border);
}


/* ───────── 15. CTA-КАРТОЧКА В БОКОВОЙ ─────────
   Рекламное место. По умолчанию — самореклама "Сделай свой прайс".
   Когда клиент покупает подписку — на это место встаёт его баннер. */
.ms-landing .card-cta {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  border: 0;
  color: #fff;
  padding: 16px;
  border-radius: var(--r-xl);
}
.ms-landing .card-cta .eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
}
.ms-landing .card-cta .title {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: #fff;
}
.ms-landing .card-cta .sub {
  margin-top: 4px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.85);
}
.ms-landing .card-cta .btn {
  margin-top: 10px;
  height: 28px;
  padding: 0 12px;
  background: rgba(255,255,255,0.95);
  color: #6366f1;
  border: 0;
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.ms-landing .card-cta .btn:hover { background: #fff; }


/* ───────── 16. ПРОМО-ВСТАВКА В ТАБЛИЦУ ─────────
   Акция питомника-владельца между категориями.
   НЕ реклама других питомников — это собственное предложение. */
.ms-landing .ad-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background:
    linear-gradient(90deg, rgba(99,102,241,0.05) 0%, rgba(168,85,247,0.04) 100%),
    var(--bg-card);
  border-left: 3px solid var(--accent);
  cursor: pointer;
  transition: filter 0.15s;
}
.ms-landing .ad-banner:hover { filter: brightness(1.02); }
.ms-landing .ad-banner .ad-photo {
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  flex-shrink: 0;
  background-color: var(--bg-alt);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border);
  filter: saturate(0.92);
}
.ms-landing .ad-banner .ad-text { flex: 1; min-width: 0; }
.ms-landing .ad-banner .ad-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--warn);
  font-weight: 700;
  margin-bottom: 4px;
}
.ms-landing .ad-banner .ad-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--warn);
  box-shadow: 0 0 0 3px rgba(180,83,9,0.15);
}
.ms-landing .ad-banner .ad-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.ms-landing .ad-banner .ad-sub {
  font-size: 12px;
  color: var(--mute);
  margin-top: 3px;
  line-height: 1.4;
}
.ms-landing .ad-banner .ad-sub b { color: var(--accent); font-weight: 600; }


/* ───────── 17. КОЛОНКА «ПРОШЛЫЙ ЗАКАЗ» ─────────
   В шапке колонки — кнопка "Повторить заказ" (массовое добавление).
   В строках — компактный бейдж "↺ N" (клик — добавить N в корзину). */
.ms-landing .last-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  background: rgba(99,102,241,0.08);
  color: var(--accent);
  border: 1px solid rgba(99,102,241,0.18);
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.ms-landing .last-pill:hover {
  background: rgba(99,102,241,0.16);
  border-color: rgba(99,102,241,0.35);
}
.ms-landing .last-pill::before {
  content: '↺';
  font-size: 12px;
  font-family: inherit;
  line-height: 1;
}
.ms-landing .last-pill .qty { font-weight: 700; }
.ms-landing .last-empty {
  display: inline-block;
  font-size: 13px;
  color: var(--mute-soft);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}


/* ───────── 18. ЧАТ С МЕНЕДЖЕРОМ ─────────
   Используется в боковой колонке.
   Шапка фиксирована сверху чата, поле ввода — снизу,
   история сообщений скроллится между ними. */
.ms-landing .chat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ms-landing .chat-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-subtle);
  flex-shrink: 0;
}
.ms-landing .chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), #6366f1);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  position: relative;
}
.ms-landing .chat-avatar::after {
  content: '';
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-radius: 5px;
  background: #10b981;
  border: 2px solid var(--bg-subtle);
}
.ms-landing .chat-meta { min-width: 0; flex: 1; }
.ms-landing .chat-meta .nm {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.ms-landing .chat-meta .role {
  font-size: 11px;
  color: var(--mute);
  margin-top: 1px;
}
.ms-landing .chat-body {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  background: var(--bg-card);
  min-height: 0;
}
.ms-landing .chat-day {
  text-align: center;
  font-size: 10px;
  color: var(--mute-soft);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 4px 0 2px;
}
.ms-landing .msg {
  max-width: 82%;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.4;
}
.ms-landing .msg .time {
  display: block;
  font-size: 10px;
  margin-top: 3px;
  opacity: 0.65;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
.ms-landing .msg.them {
  align-self: flex-start;
  background: var(--bg-alt);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.ms-landing .msg.me {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ms-landing .msg.me .time { color: rgba(255,255,255,0.8); }
.ms-landing .chat-input {
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  flex-shrink: 0;
}
.ms-landing .chat-input input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: transparent;
  padding: 6px 0;
}
.ms-landing .chat-input button {
  width: var(--h-stepper);
  height: var(--h-stepper);
  border: 0;
  border-radius: var(--r-md);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ms-landing .chat-input button:hover { background: var(--accent-hover); }


/* ───────── 19. ЛАЙОУТ "КАТАЛОГ + БОКОВАЯ" ─────────
   Стандартная двухколоночная структура. */
.ms-landing .body-wrap {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr var(--rail-w);
  gap: 16px;
  padding: 16px 24px 24px;
  align-items: start;
}
.ms-landing .col-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ms-landing .col-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Прилипает к шапке. Чат внутри занимает всё оставшееся место. */
  position: sticky;
  top: 72px;
  height: calc(100vh - var(--h-topbar) - 64px - 32px);
  max-height: calc(100vh - var(--h-topbar) - 64px - 32px);
}


/* ───────── 20. АДАПТИВ ─────────
   На узких экранах боковая колонка скрывается, чат — через FAB. */
@media (max-width: 1280px) {
  .ms-landing .body-wrap { grid-template-columns: 1fr; }
  .ms-landing .col-rail { display: none; }
}


/* ===== инлайн-стили лендинга (scoped) ===== */

/* ═══════════════════════════════════════════════════════════
   ms-landing — посадочная для МойСклада
   ═══════════════════════════════════════════════════════════ */

/* кнопки-ссылки (btn на <a>) не должны подчёркиваться */
.ms-landing a.btn { text-decoration: none; }

.ms-landing .topbar .spacer { flex: 1; }
.ms-landing .topbar .topbar-links { display: flex; gap: 4px; }
@media (max-width: 900px) { .ms-landing .topbar .topbar-links { display: none; } }

/* breadcrumb-полоска под топбаром */
.ms-landing .subbar {
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  padding: 8px 24px;
  font-size: 12.5px;
  display: flex; align-items: center; gap: 8px;
  color: var(--mute);
}
.ms-landing .subbar .crumb-sep { color: var(--mute-soft); }
.ms-landing .subbar a { color: var(--mute); text-decoration: none; }
.ms-landing .subbar a:hover { color: var(--accent); }
.ms-landing .subbar .current { color: var(--ink); font-weight: 600; }
.ms-landing .subbar .ms-dot {
  width: 6px; height: 6px; border-radius: 3px;
  background: var(--ok);
  margin-right: 4px;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.92); }
}

/* ─── HERO ─────────────────────────────────────────────── */
.ms-landing .hero {
  padding: 64px 24px 72px;
  background:
    radial-gradient(60% 70% at 90% 0%, var(--accent-soft) 0%, transparent 60%),
    radial-gradient(40% 50% at 0% 100%, rgba(168,85,247,0.06) 0%, transparent 65%),
    var(--bg);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.ms-landing .hero-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px; align-items: center;
}
.ms-landing .hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid rgba(67,56,202,0.18);
  color: var(--accent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 22px;
}
.ms-landing .hero-tag-mark {
  width: 18px; height: 18px;
  border-radius: 4px;
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ms-landing .hero h1.lead {
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -1.6px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 22px;
}
.ms-landing .hero h1.lead .hl {
  background: linear-gradient(120deg, var(--accent) 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ms-landing .hero-lead-text {
  font-size: 17px; line-height: 1.55;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 0 28px;
}
.ms-landing .hero-lead-text b { color: var(--ink); font-weight: 600; }
.ms-landing .hero-ctas {
  display: flex; gap: 12px; flex-wrap: wrap;
  align-items: center;
}
.ms-landing .btn-xl {
  height: 52px;
  padding: 0 22px;
  font-size: 15px;
}
.ms-landing .hero-trust {
  margin-top: 22px;
  display: flex; gap: 18px; flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  color: var(--mute);
}
.ms-landing .hero-trust .check {
  display: inline-flex; align-items: center; gap: 6px;
}
.ms-landing .hero-trust .check::before {
  content: '';
  width: 16px; height: 16px;
  background: var(--ok-soft);
  border-radius: 8px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5l2 2 4-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}

/* ─── HERO PREVIEW — переключаемые табы ─── */
.ms-landing .preview-wrap {
  position: relative;
}
.ms-landing .preview-tabs {
  display: flex; gap: 4px;
  padding: 4px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  margin-bottom: 14px;
}
.ms-landing .preview-tab {
  flex: 1;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--r-md);
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--mute);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.ms-landing .preview-tab:hover { color: var(--ink-soft); }
.ms-landing .preview-tab.active {
  background: var(--bg-card);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(10,14,26,0.08);
}
.ms-landing .preview-tab.active svg { color: var(--accent); }

.ms-landing .preview-pane { display: none; }
.ms-landing .preview-pane.active { display: block; }

/* ─── ДИАГРАММА: МойСклад ↔ Лаборатория ↔ клиенты ─── */
.ms-landing .diagram {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 28px 24px;
  box-shadow: 0 16px 36px -10px rgba(67,56,202,0.18), 0 2px 6px rgba(10,14,26,0.04);
  position: relative;
}
.ms-landing .diagram-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}
.ms-landing .diagram-node {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--r-xl);
  padding: 18px 14px;
  text-align: center;
  position: relative;
  min-height: 132px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
}
.ms-landing .diagram-node.ms {
  border-color: rgba(67,56,202,0.3);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg-card) 70%);
}
.ms-landing .diagram-node.lab {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.ms-landing .diagram-node-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  margin-bottom: 4px;
}
.ms-landing .diagram-node-icon.ms-icon {
  background: linear-gradient(135deg, #4338ca, #6366f1);
}
.ms-landing .diagram-node-icon.lab-icon {
  background: linear-gradient(135deg, #6366f1, #a855f7);
}
.ms-landing .diagram-node-icon.client-icon {
  background: linear-gradient(135deg, #047857, #065f46);
}
.ms-landing .diagram-node-name {
  font-size: 13.5px; font-weight: 700;
  letter-spacing: -0.2px;
}
.ms-landing .diagram-node-meta {
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--mute);
  font-weight: 500;
}
.ms-landing .diagram-node.lab .diagram-node-meta { color: rgba(255,255,255,0.6); }
.ms-landing .diagram-node.ms .diagram-node-meta { color: var(--accent); }

/* стрелка */
.ms-landing .diagram-arrow {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 60px;
}
.ms-landing .diagram-arrow-line {
  position: relative;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--ok));
  border-radius: 1px;
}
.ms-landing .diagram-arrow-line::after {
  content: '';
  position: absolute; right: -6px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 7px solid var(--ok);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.ms-landing .diagram-arrow-line.reverse {
  background: linear-gradient(90deg, var(--ok), var(--accent));
}
.ms-landing .diagram-arrow-line.reverse::after {
  right: auto; left: -6px;
  border-left: 0;
  border-right: 7px solid var(--accent);
}
.ms-landing .diagram-arrow-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.ms-landing .diagram-arrow-label.success { color: var(--ok); }

/* ─── HERO — OAUTH FLOW VARIANT ─── */
.ms-landing .oauth-flow {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 28px 24px;
  box-shadow: 0 16px 36px -10px rgba(67,56,202,0.18), 0 2px 6px rgba(10,14,26,0.04);
}
.ms-landing .oauth-flow-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 18px;
  text-align: center;
}
.ms-landing .oauth-step {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 8px;
  position: relative;
  transition: all 0.2s ease;
}
.ms-landing .oauth-step:last-child { margin-bottom: 0; }
.ms-landing .oauth-step.active {
  background: var(--accent-soft);
  border-color: rgba(67,56,202,0.3);
  box-shadow: 0 4px 12px -4px rgba(67,56,202,0.15);
}
.ms-landing .oauth-step.done {
  background: var(--ok-soft);
  border-color: rgba(4,120,87,0.2);
}
.ms-landing .oauth-step-num {
  width: 28px; height: 28px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
  background: var(--bg-alt);
  color: var(--mute);
}
.ms-landing .oauth-step.active .oauth-step-num {
  background: var(--accent);
  color: #fff;
}
.ms-landing .oauth-step.done .oauth-step-num {
  background: var(--ok);
  color: #fff;
}
.ms-landing .oauth-step.done .oauth-step-num::before {
  content: '✓';
  font-size: 14px;
}
.ms-landing .oauth-step.done .oauth-step-num span { display: none; }
.ms-landing .oauth-step-body { flex: 1; min-width: 0; }
.ms-landing .oauth-step-title {
  font-size: 14px; font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
  letter-spacing: -0.1px;
}
.ms-landing .oauth-step-meta {
  font-size: 12px; color: var(--mute);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.ms-landing .oauth-step-time {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  color: var(--ok);
  background: var(--bg-card);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.ms-landing .oauth-step.done .oauth-step-time {
  background: var(--ok);
  color: #fff;
  border-color: var(--ok);
}
.ms-landing .oauth-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ms-landing .oauth-flow-foot {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12px; color: var(--mute);
}
.ms-landing .oauth-flow-foot b { color: var(--ok); font-weight: 700; }

/* ─── HERO — SCREENSHOT VARIANT ─── */
.ms-landing .screenshot {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow: 0 16px 36px -10px rgba(67,56,202,0.18), 0 2px 6px rgba(10,14,26,0.04);
  overflow: hidden;
}

/* ─── ИНФОГРАФИЧНЫЙ СКРИНШОТ — обёртка с аннотациями ─── */
.ms-landing .screenshot-infographic {
  position: relative;
  padding: 24px 110px 24px 80px;
}
.ms-landing .screenshot-infographic .screenshot {
  position: relative;
  z-index: 1;
}
.ms-landing .annotation {
  position: absolute;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--accent);
  background: var(--bg-card);
  border: 1px solid rgba(67,56,202,0.25);
  padding: 6px 10px;
  border-radius: 999px;
  z-index: 2;
  box-shadow: 0 4px 10px -2px rgba(67,56,202,0.18);
  white-space: nowrap;
  display: flex; align-items: center; gap: 5px;
}
.ms-landing .annotation .ann-dot {
  width: 5px; height: 5px;
  border-radius: 3px;
  background: var(--accent);
}
.ms-landing .annotation::before {
  content: '';
  position: absolute;
  width: 32px; height: 1px;
  background: rgba(67,56,202,0.4);
}
.ms-landing .annotation::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 3px;
  border: 2px solid var(--bg);
}

/* левые аннотации */
.ms-landing .annotation.left {
  right: calc(100% - 76px);
  text-align: right;
}
.ms-landing .annotation.left::before {
  left: calc(100% + 3px);
  top: 50%;
  transform: translateY(-50%);
}
.ms-landing .annotation.left::after {
  left: calc(100% + 35px);
  top: 50%;
  transform: translateY(-50%);
}

/* правые аннотации */
.ms-landing .annotation.right {
  left: calc(100% - 106px);
}
.ms-landing .annotation.right::before {
  right: calc(100% + 3px);
  top: 50%;
  transform: translateY(-50%);
}
.ms-landing .annotation.right::after {
  right: calc(100% + 35px);
  top: 50%;
  transform: translateY(-50%);
}

/* позиции */
.ms-landing .ann-1 { top: 70px; }
.ms-landing .ann-2 { top: 130px; }
.ms-landing .ann-3 { top: 200px; }
.ms-landing .ann-4 { top: 295px; }

.ms-landing .annotation.live { color: var(--ok); border-color: rgba(4,120,87,0.3); }
.ms-landing .annotation.live .ann-dot { background: var(--ok); animation: r-pulse 1.6s ease-in-out infinite; }
.ms-landing .annotation.live::before { background: rgba(4,120,87,0.4); }
.ms-landing .annotation.live::after { background: var(--ok); }

@media (max-width: 1080px) {
  .ms-landing .screenshot-infographic { padding: 0; }
  .ms-landing .annotation { display: none; }
}
.ms-landing .screenshot-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}
.ms-landing .screenshot-dot {
  width: 9px; height: 9px; border-radius: 5px;
  background: var(--border-strong);
}
.ms-landing .screenshot-url {
  margin-left: 10px; flex: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--mute);
  background: var(--bg-card);
  padding: 4px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  text-align: center;
  max-width: 280px;
}
.ms-landing .screenshot-url .accent { color: var(--accent); font-weight: 600; }
.ms-landing .screenshot-table { font-size: 13px; }
.ms-landing .screenshot-thead {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr 80px 90px 90px;
  padding: 11px 16px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--mute);
}
.ms-landing .screenshot-thead > div:nth-child(n+3) { text-align: right; }
.ms-landing .screenshot-row {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr 80px 90px 90px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.ms-landing .screenshot-row:last-child { border-bottom: 0; }
.ms-landing .screenshot-row.selected {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.ms-landing .screenshot-name {
  font-weight: 600; color: var(--ink); font-size: 13.5px;
}
.ms-landing .screenshot-name small {
  display: block;
  font-style: italic; font-weight: 400;
  font-size: 11px; color: var(--mute); margin-top: 2px;
}
.ms-landing .screenshot-mod { font-size: 12.5px; color: var(--ink-soft); }
.ms-landing .screenshot-stock {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px; color: var(--ink-soft);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ms-landing .screenshot-price {
  font-weight: 700; font-size: 14px; color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ms-landing .screenshot-status { display: flex; justify-content: flex-end; }
.ms-landing .screenshot-foot {
  padding: 11px 14px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px;
}
.ms-landing .screenshot-foot .label { color: var(--mute); }
.ms-landing .screenshot-foot .value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700; color: var(--ink);
}
.ms-landing .screenshot-foot .live-tag {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; font-weight: 700;
  color: var(--ok);
  letter-spacing: 0.4px;
}
.ms-landing .screenshot-foot .live-tag::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 3px;
  background: var(--ok);
  animation: pulse 1.6s ease-in-out infinite;
}

/* ─── ОБЩИЕ СЕКЦИИ ─────────────────────────────────────── */
.ms-landing section.land {
  padding: 80px 24px;
  border-bottom: 1px solid var(--border);
}
.ms-landing section.land.tinted { background: var(--bg-subtle); }
.ms-landing section.land .inner { max-width: 1200px; margin: 0 auto; }
.ms-landing .land-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.ms-landing .land-eyebrow::before {
  content: ''; width: 18px; height: 2px;
  background: var(--accent); border-radius: 1px;
}
.ms-landing .land-title {
  font-size: 38px; font-weight: 700;
  letter-spacing: -1px; line-height: 1.1;
  color: var(--ink);
  margin: 0 0 16px;
  max-width: 720px;
}
.ms-landing .land-sub {
  font-size: 16px; line-height: 1.55;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 0 40px;
}
.ms-landing .land-sub b { color: var(--ink); font-weight: 600; }

/* ─── РАСШИРЕННЫЙ БЛОК «ЧТО УВИДЯТ КЛИЕНТЫ» ─── */
.ms-landing .demo-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: 0 16px 36px -10px rgba(67,56,202,0.12), 0 2px 6px rgba(10,14,26,0.04);
}
.ms-landing .demo-block-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 22px 28px;
  background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
}
.ms-landing .demo-block-head-text {
  display: flex; align-items: center; gap: 14px;
}
.ms-landing .demo-block-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--accent), #6366f1);
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 6px 14px -4px rgba(67,56,202,0.4);
}
.ms-landing .demo-block-title {
  font-size: 17px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.3px;
  margin-bottom: 2px;
}
.ms-landing .demo-block-sub {
  font-size: 13.5px; color: var(--ink-soft);
}
.ms-landing .demo-block-sub b { color: var(--ink); }
.ms-landing .demo-block-cta {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px;
  padding: 0 18px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--r-lg);
  font: inherit;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.ms-landing .demo-block-cta:hover { background: var(--accent-hover); }

.ms-landing .demo-block-body {
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.ms-landing .demo-block-features {
  display: flex; flex-direction: column;
  gap: 16px;
}
.ms-landing .demo-feat {
  display: flex; gap: 14px;
}
.ms-landing .demo-feat-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ms-landing .demo-feat-title {
  font-size: 14.5px; font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
  letter-spacing: -0.1px;
}
.ms-landing .demo-feat-text {
  font-size: 13px; color: var(--ink-soft);
  line-height: 1.5;
}
.ms-landing .demo-feat-text b { color: var(--ink); font-weight: 600; }

.ms-landing .demo-block-promo {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  color: #fff;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  border-top: 1px solid var(--border);
}
.ms-landing .demo-block-promo-text-title {
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: 4px;
  color: #fff;
}
.ms-landing .demo-block-promo-text-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}
.ms-landing .demo-block-promo-text-sub b { color: #fff; font-weight: 600; }
.ms-landing .demo-block-promo-cta {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px;
  padding: 0 20px;
  background: #fff;
  color: var(--accent);
  border: 0;
  border-radius: var(--r-lg);
  font: inherit;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.ms-landing .demo-block-promo-cta:hover { background: rgba(255,255,255,0.92); }

/* ─── РАСШИРЕННЫЙ БЛОК «ЧТО УВИДЯТ КЛИЕНТЫ» — конец ─── */

/* ─── HERO (компактный — для МС-страницы) ───────────── */
.ms-landing .hero.hero-compact {
  padding: 48px 24px 56px;
}
.ms-landing .hero.hero-compact h1.lead {
  font-size: 48px;
  margin: 14px 0 14px;
  letter-spacing: -1.4px;
}
.ms-landing .hero.hero-compact .hero-lead-text {
  font-size: 16px;
  margin: 0 0 22px;
}

/* ─── РУТИНА — двухколонник с действием (новая версия) ─── */
.ms-landing .routine-section {
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.ms-landing .routine-section .inner {
  position: relative;
  max-width: 1200px;
}
.ms-landing .routine-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.ms-landing .routine-text-title {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -1.6px;
  line-height: 1.04;
  margin: 0 0 20px;
  color: var(--accent);
}
.ms-landing .routine-text-body {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 0 22px;
}
.ms-landing .routine-text-body b { color: var(--ink); font-weight: 600; }
.ms-landing .routine-trust {
  display: flex; gap: 18px; flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  color: var(--mute);
}
.ms-landing .routine-trust .check {
  display: inline-flex; align-items: center; gap: 6px;
}
.ms-landing .routine-trust .check::before {
  content: '';
  width: 16px; height: 16px;
  background: var(--ok-soft);
  border-radius: 8px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5l2 2 4-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}

/* Карточки источников справа */
.ms-landing .routine-sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ms-landing .r-src-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 22px 20px 20px;
  position: relative;
  transition: all 0.2s ease;
  box-shadow: 0 8px 24px -8px rgba(10,14,26,0.10), 0 1px 2px rgba(10,14,26,0.04);
  display: flex; flex-direction: column;
  cursor: pointer;
}
.ms-landing .r-src-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(67,56,202,0.22), 0 2px 6px rgba(10,14,26,0.04);
}
.ms-landing .r-src-card.dashed {
  border-style: dashed;
}
.ms-landing .r-src-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.ms-landing .r-src-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 6px 14px -4px rgba(10,14,26,0.18);
}
.ms-landing .r-src-icon.excel {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
}
.ms-landing .r-src-icon.ms {
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
}
.ms-landing .r-src-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  padding: 3px 7px;
  border-radius: var(--r-sm);
  background: var(--bg-alt);
  color: var(--mute);
}
.ms-landing .r-src-tag.live {
  background: var(--ok-soft);
  color: var(--ok);
  display: inline-flex; align-items: center; gap: 5px;
}
.ms-landing .r-src-tag.live::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 3px;
  background: var(--ok);
  animation: r-pulse 1.6s ease-in-out infinite;
}
@keyframes r-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.92); }
}
.ms-landing .r-src-title {
  font-size: 16px; font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin: 0 0 4px;
}
.ms-landing .r-src-sub {
  font-size: 12.5px; color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 12px;
  flex: 1;
}
.ms-landing .r-src-sub b { color: var(--ink); }
.ms-landing .r-src-formats {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.ms-landing .r-src-format {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; font-weight: 600;
  padding: 2px 6px; border-radius: var(--r-sm);
  background: var(--bg-alt); color: var(--mute);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.ms-landing .r-src-bullets {
  list-style: none; padding: 0; margin: 0 0 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.ms-landing .r-src-bullets li {
  font-size: 12px; color: var(--ink-soft);
  display: flex; align-items: flex-start; gap: 7px;
  line-height: 1.4;
}
.ms-landing .r-src-bullets li::before {
  content: '';
  width: 13px; height: 13px;
  background: var(--ok-soft);
  border-radius: 7px;
  flex-shrink: 0; margin-top: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5l2 2 4-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}
.ms-landing .r-src-cta {
  width: 100%;
  height: 38px;
  border-radius: var(--r-lg);
  font-size: 12.5px; font-weight: 600;
  font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}
.ms-landing .r-src-cta.primary {
  background: var(--accent);
  color: #fff;
}
.ms-landing .r-src-cta.primary:hover {
  background: var(--accent-hover);
}
.ms-landing .r-src-cta.outline {
  background: var(--bg-card);
  color: var(--ink);
  border-color: var(--border-strong);
}
.ms-landing .r-src-cta.outline:hover {
  background: var(--bg-alt);
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 1080px) {
  .ms-landing .routine-grid { grid-template-columns: 1fr; gap: 36px; }
  .ms-landing .routine-text-title { font-size: 40px; letter-spacing: -1.1px; }
}
@media (max-width: 560px) {
  .ms-landing .routine-sources { grid-template-columns: 1fr; }
  .ms-landing .routine-text-title { font-size: 32px; letter-spacing: -0.8px; }
}

/* ─── ВЫБОР ИСТОЧНИКА — две плашки в блоке Подключение ─── */
.ms-landing .source-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 880px;
}
.ms-landing .src-pick-card {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--r-2xl);
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  box-shadow: 0 6px 18px -8px rgba(10,14,26,0.08);
}
.ms-landing .src-pick-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(67,56,202,0.22), 0 1px 2px rgba(10,14,26,0.04);
}
.ms-landing .src-pick-card.highlighted {
  border-color: rgba(67,56,202,0.3);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg-card) 70%);
}
.ms-landing .src-pick-card.highlighted:hover {
  border-color: var(--accent);
}
.ms-landing .src-pick-icon {
  width: 52px; height: 52px;
  border-radius: 13px;
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 6px 14px -4px rgba(10,14,26,0.18);
}
.ms-landing .src-pick-icon.excel {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
}
.ms-landing .src-pick-icon.ms {
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
}
.ms-landing .src-pick-body {
  flex: 1; min-width: 0;
}
.ms-landing .src-pick-title {
  font-size: 18px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.3px;
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 10px;
}
.ms-landing .src-pick-badge {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 3px 7px;
  border-radius: var(--r-sm);
  background: var(--ok-soft);
  color: var(--ok);
  display: inline-flex; align-items: center; gap: 4px;
}
.ms-landing .src-pick-badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 3px;
  background: var(--ok);
  animation: r-pulse 1.6s ease-in-out infinite;
}
.ms-landing .src-pick-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--mute);
  letter-spacing: 0.2px;
}
.ms-landing .src-pick-arrow {
  color: var(--mute);
  flex-shrink: 0;
  transition: color 0.15s, transform 0.2s;
}
.ms-landing .src-pick-card:hover .src-pick-arrow {
  color: var(--accent);
  transform: translateX(3px);
}
.ms-landing .src-pick-card.highlighted .src-pick-arrow { color: var(--accent); }

@media (max-width: 720px) {
  .ms-landing .source-pick { grid-template-columns: 1fr; }
  .ms-landing .src-pick-card { padding: 18px 20px; gap: 14px; }
  .ms-landing .src-pick-icon { width: 44px; height: 44px; }
  .ms-landing .src-pick-title { font-size: 16px; }
}

/* ─── КЕЙС — реальный пример с человеком ─── */
.ms-landing .case-section .inner { max-width: 1100px; }
.ms-landing .case-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 0;
  overflow: hidden;
  box-shadow: 0 16px 36px -10px rgba(67,56,202,0.10), 0 1px 2px rgba(10,14,26,0.04);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
.ms-landing .case-body {
  padding: 36px 40px;
  display: flex; flex-direction: column;
  justify-content: center;
}
.ms-landing .case-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 5px 12px;
  border-radius: 999px;
  align-self: flex-start;
  margin-bottom: 18px;
}
.ms-landing .case-tag .case-tag-dot {
  width: 5px; height: 5px;
  border-radius: 3px;
  background: var(--accent);
}
.ms-landing .case-quote {
  font-size: 21px;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 500;
  margin: 0 0 22px;
  letter-spacing: -0.3px;
  position: relative;
  padding-left: 18px;
}
.ms-landing .case-quote::before {
  content: '«';
  position: absolute;
  left: -10px; top: -16px;
  font-size: 56px;
  color: var(--accent);
  font-weight: 700;
  line-height: 1;
}
.ms-landing .case-quote b { color: var(--ink); font-weight: 700; }
.ms-landing .case-author {
  display: flex; align-items: center; gap: 12px;
}
.ms-landing .case-avatar {
  width: 42px; height: 42px;
  border-radius: 21px;
  background: linear-gradient(135deg, #4338ca, #6366f1);
  display: grid; place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.ms-landing .case-author-info { font-size: 13.5px; }
.ms-landing .case-author-name {
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1px;
}
.ms-landing .case-author-meta {
  color: var(--mute);
  font-size: 12.5px;
}
.ms-landing .case-stats {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg-subtle) 100%);
  padding: 36px 40px;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 22px;
  border-left: 1px solid var(--border);
}
.ms-landing .case-stat-direction {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 5px;
}
.ms-landing .case-stat-row {
  display: flex; align-items: baseline;
  gap: 12px;
}
.ms-landing .case-stat-num {
  font-size: 30px; font-weight: 700;
  letter-spacing: -0.7px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ms-landing .case-stat-num-old {
  font-size: 16px;
  color: var(--mute-soft);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.ms-landing .case-stat-label {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 6px;
  line-height: 1.4;
}
.ms-landing .case-stat-label b { color: var(--ink); font-weight: 600; }
.ms-landing .case-stat-divider {
  height: 1px;
  background: rgba(67,56,202,0.15);
}

@media (max-width: 1080px) {
  .ms-landing .case-card { grid-template-columns: 1fr; }
  .ms-landing .case-stats { border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 720px) {
  .ms-landing .case-body, .ms-landing .case-stats { padding: 28px 24px; }
  .ms-landing .case-quote { font-size: 17px; }
}

/* ─── ОДИНОЧНАЯ КАРТОЧКА МС (когда карточка одна) ─── */
.ms-landing .routine-sources-single {
  grid-template-columns: 1fr;
}
.ms-landing .r-src-card-solo {
  padding: 32px 30px 28px;
  border-color: rgba(67,56,202,0.25);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg-card) 50%);
}
.ms-landing .r-src-card-solo:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(67,56,202,0.28), 0 2px 6px rgba(10,14,26,0.04);
}
.ms-landing .r-src-card-solo .r-src-icon {
  width: 52px; height: 52px;
  border-radius: 13px;
}
.ms-landing .r-src-title-solo {
  font-size: 22px;
  letter-spacing: -0.4px;
  margin-bottom: 8px;
}
.ms-landing .r-src-sub-solo {
  font-size: 14px;
  margin-bottom: 16px;
}
.ms-landing .r-src-bullets-solo {
  gap: 10px;
  margin-bottom: 20px;
}
.ms-landing .r-src-bullets-solo li {
  font-size: 13.5px;
  line-height: 1.5;
}
.ms-landing .r-src-bullets-solo li::before {
  width: 16px; height: 16px;
  background-size: 12px;
}
.ms-landing .r-src-cta-solo {
  height: 48px;
  font-size: 14px;
  font-weight: 700;
}
.ms-landing .r-src-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 12.5px; color: var(--mute);
}
.ms-landing .r-src-foot b { color: var(--ink); font-weight: 600; }
.ms-landing .r-src-foot-dot {
  width: 7px; height: 7px;
  border-radius: 4px;
  background: var(--ok);
  animation: r-pulse 1.6s ease-in-out infinite;
}

.ms-landing .sync-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.ms-landing .sync-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 28px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
  position: relative;
}
.ms-landing .sync-card-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.ms-landing .sync-card-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ms-landing .sync-card-direction {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--mute);
}
.ms-landing .sync-card-name {
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin-top: 2px;
}
.ms-landing .sync-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.ms-landing .sync-list li {
  display: flex; align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-subtle);
  border-radius: var(--r-lg);
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.45;
}
.ms-landing .sync-list li::before {
  content: '';
  width: 18px; height: 18px;
  background: var(--ok-soft);
  border-radius: 9px;
  flex-shrink: 0; margin-top: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5l2 2 4-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}
.ms-landing .sync-list li b { color: var(--ink); font-weight: 600; }
.ms-landing .sync-list li code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 3px;
}
.ms-landing .sync-card-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
  color: var(--mute);
}
.ms-landing .sync-card-foot .live-dot {
  width: 7px; height: 7px; border-radius: 4px;
  background: var(--ok);
  animation: pulse 1.6s ease-in-out infinite;
}

/* ─── 4 шага запуска ─────────────────────────────────── */
.ms-landing .setup {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ms-landing .setup-step {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 22px;
  box-shadow: var(--shadow-card);
  position: relative;
}
.ms-landing .setup-step::after {
  content: '';
  position: absolute;
  right: -7px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  background: var(--bg);
  border-right: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: translateY(-50%) rotate(45deg);
  z-index: 1;
}
.ms-landing .setup-step:last-child::after { display: none; }
.ms-landing .setup-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.ms-landing .setup-title {
  font-size: 16px; font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin-bottom: 6px;
}
.ms-landing .setup-text {
  font-size: 13px; color: var(--ink-soft);
  line-height: 1.5;
}
.ms-landing .setup-time {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600;
  color: var(--ok);
  background: var(--ok-soft);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* ─── ЧТО ПОЛУЧИТ КЛИЕНТ ─────────────────────────────── */
.ms-landing .benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ms-landing .benefit {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 28px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s, transform 0.2s;
}
.ms-landing .benefit:hover {
  border-color: rgba(67,56,202,0.25);
  transform: translateY(-2px);
}
.ms-landing .benefit-icon {
  width: 44px; height: 44px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-md);
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.ms-landing .benefit-title {
  font-size: 17px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}
.ms-landing .benefit-text {
  font-size: 14px; color: var(--ink-soft);
  line-height: 1.55;
}
.ms-landing .benefit-text b { color: var(--ink); }

/* ─── СРАВНЕНИЕ: ДО / ПОСЛЕ ──────────────────────────── */
.ms-landing .compare-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: stretch;
}
.ms-landing .compare-col {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.ms-landing .compare-col.before {
  border-color: rgba(185,28,28,0.2);
  background: linear-gradient(180deg, var(--bad-soft) 0%, var(--bg-card) 30%);
}
.ms-landing .compare-col.after {
  border-color: rgba(67,56,202,0.25);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg-card) 30%);
}
.ms-landing .compare-col-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.ms-landing .compare-col-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-sm);
}
.ms-landing .compare-col.before .compare-col-tag { background: var(--bad-soft); color: var(--bad); }
.ms-landing .compare-col.after .compare-col-tag { background: var(--accent-soft); color: var(--accent); }
.ms-landing .compare-col-title {
  font-size: 16px; font-weight: 700;
  color: var(--ink);
  margin-left: auto;
}
.ms-landing .compare-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.ms-landing .compare-list li {
  display: flex; gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.ms-landing .compare-list li::before {
  content: '';
  width: 18px; height: 18px;
  border-radius: 9px;
  flex-shrink: 0; margin-top: 1px;
}
.ms-landing .compare-col.before .compare-list li::before {
  background: var(--bad-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23b91c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l6 6M9 3l-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}
.ms-landing .compare-col.after .compare-list li::before {
  background: var(--ok-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5l2 2 4-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}
.ms-landing .compare-list li b { color: var(--ink); font-weight: 600; }
.ms-landing .compare-arrow {
  display: flex; align-items: center;
  font-size: 32px;
  color: var(--accent);
  font-weight: 300;
}

/* ─── FAQ ────────────────────────────────────────────── */
.ms-landing .faq { max-width: 820px; margin: 0 auto; }
.ms-landing .faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.ms-landing .faq-item:hover { border-color: rgba(67,56,202,0.18); }
.ms-landing .faq-item[open] { border-color: var(--accent); }
.ms-landing .faq-q {
  padding: 18px 22px;
  font-size: 15.5px; font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; gap: 16px;
  list-style: none;
  letter-spacing: -0.2px;
}
.ms-landing .faq-q::-webkit-details-marker { display: none; }
.ms-landing .faq-q::after {
  content: '';
  margin-left: auto;
  width: 22px; height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.ms-landing .faq-item[open] .faq-q::after { transform: rotate(180deg); }
.ms-landing .faq-a {
  padding: 0 22px 22px;
  font-size: 14px; color: var(--ink-soft);
  line-height: 1.6;
}
.ms-landing .faq-a b { color: var(--ink); font-weight: 600; }
.ms-landing .faq-a code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: var(--r-sm);
}

/* ─── ЦЕНА (минималистичный блок) ────────────────────── */

/* ─── СЕТКА ТАРИФОВ (4 колонки) ─────────────────────── */
.ms-landing .pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: stretch;
}
.ms-landing .tariff-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 26px 22px 24px;
  display: flex; flex-direction: column;
  position: relative;
  transition: all 0.2s ease;
  box-shadow: 0 6px 18px -8px rgba(10,14,26,0.08);
}
.ms-landing .tariff-card:hover {
  border-color: rgba(67,56,202,0.3);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(67,56,202,0.18), 0 1px 2px rgba(10,14,26,0.04);
}
.ms-landing .tariff-card.popular {
  border-color: rgba(67,56,202,0.35);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg-card) 50%);
}
.ms-landing .tariff-card.premium {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.ms-landing .tariff-badge {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 4px 10px -2px rgba(67,56,202,0.3);
}
.ms-landing .tariff-card.premium .tariff-badge {
  background: linear-gradient(135deg, #c4b5fd 0%, #a855f7 100%);
  color: #1e1b4b;
}
.ms-landing .tariff-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.ms-landing .tariff-card.popular .tariff-name { color: var(--accent); }
.ms-landing .tariff-card.premium .tariff-name { color: rgba(255,255,255,0.6); }
.ms-landing .tariff-price {
  display: flex; align-items: baseline;
  gap: 5px;
  margin-bottom: 4px;
}
.ms-landing .tariff-price-value {
  font-size: 36px; font-weight: 700;
  letter-spacing: -1px;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ms-landing .tariff-card.premium .tariff-price-value { color: #fff; }
.ms-landing .tariff-price-period {
  font-size: 13px;
  color: var(--mute);
}
.ms-landing .tariff-card.premium .tariff-price-period { color: rgba(255,255,255,0.5); }
.ms-landing .tariff-tagline {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 18px;
  line-height: 1.4;
  min-height: 36px;
}
.ms-landing .tariff-card.premium .tariff-tagline { color: rgba(255,255,255,0.7); }

.ms-landing .tariff-features {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: flex; flex-direction: column;
  gap: 9px;
  flex: 1;
}
.ms-landing .tariff-features li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.ms-landing .tariff-features li::before {
  content: '';
  width: 14px; height: 14px;
  background: var(--ok-soft);
  border-radius: 7px;
  flex-shrink: 0; margin-top: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5l2 2 4-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}
.ms-landing .tariff-card.premium .tariff-features li { color: rgba(255,255,255,0.75); }
.ms-landing .tariff-card.premium .tariff-features li::before {
  background-color: rgba(110,231,183,0.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236ee7b7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5l2 2 4-5'/%3E%3C/svg%3E");
}
.ms-landing .tariff-features li b { color: var(--ink); font-weight: 600; }
.ms-landing .tariff-card.premium .tariff-features li b { color: #fff; }
.ms-landing .tariff-features li.highlight {
  position: relative;
  padding: 8px 10px;
  margin: 0 -10px;
  background: rgba(168,85,247,0.12);
  border-radius: var(--r-md);
  border-left: 2px solid #a855f7;
}
.ms-landing .tariff-features li.highlight::before {
  background-color: rgba(196,181,253,0.25);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23c4b5fd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5l2 2 4-5'/%3E%3C/svg%3E");
}

.ms-landing .tariff-cta {
  width: 100%;
  height: 44px;
  border-radius: var(--r-lg);
  font-family: inherit;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--ink);
}
.ms-landing .tariff-cta:hover {
  background: var(--bg-alt);
  border-color: var(--accent);
  color: var(--accent);
}
.ms-landing .tariff-card.popular .tariff-cta {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.ms-landing .tariff-card.popular .tariff-cta:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}
.ms-landing .tariff-card.premium .tariff-cta {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
  font-weight: 700;
}
.ms-landing .tariff-card.premium .tariff-cta:hover {
  background: rgba(255,255,255,0.92);
  color: var(--accent);
}

.ms-landing .pricing-foot {
  display: flex; align-items: center; justify-content: center;
  gap: 24px; flex-wrap: wrap;
  margin-top: 28px;
  font-size: 13px;
  color: var(--mute);
}
.ms-landing .pricing-foot .check {
  display: inline-flex; align-items: center; gap: 6px;
}
.ms-landing .pricing-foot .check::before {
  content: '✓';
  color: var(--ok);
  font-weight: 700;
}

@media (max-width: 1080px) {
  .ms-landing .pricing-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ms-landing .pricing-grid { grid-template-columns: 1fr; }
}

.ms-landing .pricing-strip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 32px 40px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  box-shadow: var(--shadow-card);
}
.ms-landing .pricing-num {
  display: flex; align-items: baseline;
  gap: 6px;
}
.ms-landing .pricing-num-value {
  font-size: 44px; font-weight: 700;
  letter-spacing: -1.2px;
  color: var(--ink);
  line-height: 1;
}
.ms-landing .pricing-num-period {
  font-size: 14px;
  color: var(--mute);
}
.ms-landing .pricing-text-title {
  font-size: 17px; font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}
.ms-landing .pricing-text-sub {
  font-size: 13.5px; color: var(--ink-soft);
  line-height: 1.5;
}

/* ─── ФИНАЛЬНЫЙ CTA ──────────────────────────────────── */
.ms-landing .final-cta {
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(99,102,241,0.18) 0%, transparent 60%),
    linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  color: #fff;
  padding: 80px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ms-landing .final-cta::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(168,85,247,0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(99,102,241,0.12) 0%, transparent 40%);
  pointer-events: none;
}
.ms-landing .final-cta-inner { position: relative; max-width: 720px; margin: 0 auto; }
.ms-landing .final-cta h2 {
  font-size: 40px; font-weight: 700;
  letter-spacing: -1.1px; line-height: 1.1;
  margin: 0 0 18px;
  color: #fff;
}
.ms-landing .final-cta p {
  font-size: 17px;
  color: rgba(255,255,255,0.75);
  line-height: 1.55;
  margin: 0 0 36px;
  max-width: 520px;
  margin-left: auto; margin-right: auto;
}
.ms-landing .final-cta .btn {
  background: #fff;
  color: var(--accent);
  border: 0;
  font-weight: 700;
}
.ms-landing .final-cta .btn:hover { background: rgba(255,255,255,0.92); }
.ms-landing .final-cta .btn-ghost-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}
.ms-landing .final-cta .btn-ghost-light:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.ms-landing .final-trust {
  margin-top: 28px;
  display: flex; gap: 24px; flex-wrap: wrap;
  align-items: center; justify-content: center;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.ms-landing .final-trust .check {
  display: inline-flex; align-items: center; gap: 6px;
}
.ms-landing .final-trust .check::before {
  content: '✓';
  color: #6ee7b7;
  font-weight: 700;
}

/* ─── FOOTER ─────────────────────────────────────────── */
.ms-landing .site-foot {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 32px 24px;
}
.ms-landing .site-foot-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  font-size: 13px; color: var(--mute);
}
.ms-landing .site-foot-inner b { color: var(--ink-soft); font-weight: 600; }
.ms-landing .site-foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.ms-landing .site-foot-links a {
  color: var(--ink-soft); text-decoration: none; font-weight: 500;
}
.ms-landing .site-foot-links a:hover { color: var(--accent); }

/* ─── ADAPTIVE ───────────────────────────────────────── */
@media (max-width: 1080px) {
  .ms-landing .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .ms-landing .diagram-row { grid-template-columns: 1fr; gap: 16px; }
  .ms-landing .diagram-arrow { width: 100%; flex-direction: row; }
  .ms-landing .diagram-arrow-line { transform: rotate(90deg); width: 40px; }
  .ms-landing .sync-grid, .ms-landing .benefits, .ms-landing .compare-pair, .ms-landing .setup { grid-template-columns: 1fr; }
  .ms-landing .setup-step::after { display: none; }
  .ms-landing .compare-arrow { display: none; }
  .ms-landing .pricing-strip { grid-template-columns: 1fr; gap: 16px; text-align: center; }
  .ms-landing .demo-block-body { grid-template-columns: 1fr; gap: 24px; }
  .ms-landing .demo-block-head { grid-template-columns: 1fr; }
  .ms-landing .demo-block-promo { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ms-landing .hero { padding: 44px 18px 56px; }
  .ms-landing .hero h1.lead { font-size: 38px; letter-spacing: -1.2px; }
  .ms-landing section.land { padding: 56px 18px; }
  .ms-landing .land-title { font-size: 28px; letter-spacing: -0.7px; }
  .ms-landing .diagram { padding: 22px 18px; }
  .ms-landing .final-cta { padding: 56px 20px; }
  .ms-landing .final-cta h2 { font-size: 28px; letter-spacing: -0.8px; }
  .ms-landing .pricing-strip { padding: 22px; }
  .ms-landing .pricing-num-value { font-size: 36px; }
}


/* ===== full-width: убрать правый rail и зажим колонки на главной ===== */
.body-wrap:has(.ms-landing) { grid-template-columns: 1fr; gap: 0; }
.body-wrap:has(.ms-landing) .col-rail { display: none; }
.body-wrap:has(.ms-landing) .col-main { padding: 0; max-width: none; }