/* ============================================================
   НЬЮ-ССТ — новая главная страница (mainpage) · СВЕТЛАЯ ТЕМА (D1)
   Подключается ОДНОЙ строкой ПОСЛЕ base.css и landing.css:
     <link rel="stylesheet" href="assets/css/mainpage.css">

   Тема: светлая (фон #f6f8fc, карточки #ffffff, текст #0f1b2d,
   акцент #1a56db/#3b82f6, CTA-градиент #1a56db→#7c3aed,
   hairlines #e2e8f0). Шапка/футер остаются тёмными (v-канон) —
   стыки закрыты градиентными мостами (см. §2 и §8b).

   Механика: СКОУП-ТОКЕНЫ. Глобальные токены base.css НЕ трогаем;
   внутри <main class="mp"> переопределяем их светлыми значениями.
   Инлайн-фрагменты M8 (glue, quick-answer, #mp-tech2027) едят те же
   var()-токены → светлеют автоматически. Захардкоженные тёмные
   значения перекрыты в §8a селекторами повышенной специфичности
   (main.mp … — файл грузится ДО инлайн-<style> в <head>).

   Правила файла:
   • БЭМ-префикс mp-*, скоуп — <main class="mp"> (нав/футер — v-канон).
   • Ноль внешних шрифтов/библиотек; только системные стеки.
   • Движения — только transform/opacity (+цветовые переходы без reflow).
   • FAQ — CSS-only (details/summary), без JS.
   • Контрасты — WCAG AA: текст ≥4.5:1 (расчёты в D1_LIGHT_THEME.md).
   • Адаптив: 320 / 390 / 768 / 1024 / 1440 (mobile-first).
   ============================================================ */

/* ---------------- 0. Скоуп и локальные токены ---------------- */
.mp {
  /* ритм секций */
  --mp-section-pad: 64px;
  --mp-head-mb: 36px;
  --mp-gap: 20px;

  /* светлые тени — «бумажный» подъём вместо тёмного glass */
  --mp-shadow-rest: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.07);
  --mp-shadow-hover: 0 2px 6px rgba(15, 23, 42, 0.06), 0 18px 44px rgba(15, 23, 42, 0.13);

  /* системный mono — для нумерации/сигилов (не внешний шрифт) */
  --mp-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  /* === СВЕТЛЫЕ ПЕРЕОПРЕДЕЛЕНИЯ ТОКЕНОВ САЙТА (только внутри .mp) === */
  /* фон-лестница: страница → альт-полоса → карточка */
  --bg-0: #f6f8fc;
  --bg-1: #eef2f9;
  --bg-2: #ffffff;
  --bg-3: #e8edf6;

  /* акценты: синий канон + фиолетовый завершение */
  --cyan: #1a56db;              /* основной акцент/ссылки: 6.2:1 на #fff */
  --cyan-soft: rgba(26, 86, 219, 0.08);
  --violet: #7c3aed;
  --magenta: #7c3aed;
  --grad-accent: linear-gradient(120deg, #1a56db 0%, #3b82f6 55%, #7c3aed 100%);
  --grad-cta: linear-gradient(120deg, #1a56db 0%, #7c3aed 100%);

  /* текст: 16.3 / 8.2 / 5.4 контраста на #f6f8fc */
  --text: #0f1b2d;
  --text-dim: #3f4c63;
  --text-faint: #5a677e;

  /* поверхности и волосяные линии */
  --glass: #ffffff;
  --glass-strong: #ffffff;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  /* эффекты: мягкие цветные ауры вместо неона */
  --glow-cyan: 0 0 40px rgba(26, 86, 219, 0.10);
  --glow-violet: 0 0 40px rgba(124, 58, 237, 0.12);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 32px rgba(15, 23, 42, 0.08);

  /* непрозрачный светлый фон контейнера прячет тёмный ambient body */
  background: var(--bg-0);
  color: var(--text);
}

/* ---------------- 1. Каркас секций ---------------- */
.mp-section {
  padding: var(--mp-section-pad) 0;
  position: relative;
}

/* чередование фонов: база #f6f8fc (сквозной фон .mp)
   ↔ приподнятая полоса #eef2f9 с волосяными границами */
.mp-section--alt {
  background: linear-gradient(180deg, var(--bg-1) 0%, rgba(238, 242, 249, 0.35) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* уплотнённая секция (CTA-вставки и служебные блоки) */
.mp-section--tight { padding: calc(var(--mp-section-pad) * 0.5) 0; }

/* голова секции */
.mp-head {
  max-width: 820px;
  margin-bottom: var(--mp-head-mb);
}
.mp-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.mp-head--center .mp-lead {
  margin-left: auto;
  margin-right: auto;
}

/* kicker — капсульная надстрочка (светлая mp-версия) */
.mp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mp-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  background: var(--cyan-soft);
  border: 1px solid rgba(26, 86, 219, 0.22);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.mp-kicker--violet {
  color: #6d28d9;
  background: rgba(109, 40, 217, 0.08);
  border-color: rgba(109, 40, 217, 0.28);
}

/* заголовок h2 секции */
.mp-title {
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.16;
  font-weight: 750;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}

/* лид-абзац секции */
.mp-lead {
  font-size: clamp(15.5px, 1.5vw, 18px);
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 760px;
}

/* градиентный акцент в тексте (только span внутри заголовков) */
.mp-grad {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* подпись-капшн */
.mp-note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-faint);
}

/* ---------------- 2. Hero (светлый, синяя радиальная аура) ---------------- */
.mp-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 56px;
  background:
    /* МОСТ сверху: бесшовное продолжение тёмной шапки (V2: старт 0.96 = цвет
       .v-nav) → затухание к светлому (~116px) */
    linear-gradient(180deg,
      rgba(8, 9, 13, 0.96) 0px,
      rgba(8, 9, 13, 0.42) 44px,
      rgba(8, 9, 13, 0) 116px),
    /* лёгкая синяя аура */
    radial-gradient(640px 420px at 82% -12%, rgba(59, 130, 246, 0.16), transparent 60%),
    radial-gradient(720px 480px at 8% 6%, rgba(124, 58, 237, 0.10), transparent 62%),
    radial-gradient(900px 540px at 50% 118%, rgba(26, 86, 219, 0.08), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
  border-bottom: 1px solid var(--border);
}

/* едва заметная инженерная сетка сверху, растворяется вниз (маска) */
.mp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 75%);
}
.mp-hero > .container {
  position: relative;
  z-index: 1;
}

.mp-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.mp-hero__inner > * { min-width: 0; }

.mp-hero__title {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  max-width: 560px;
  text-wrap: balance;
}
.mp-hero__lead {
  font-size: clamp(15.5px, 1.6vw, 19px);
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 640px;
  margin: 0 0 26px;
}
.mp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.mp-hero__note {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-faint);
}

/* правая панель — «стек продуктов»: белая карточка с аурой */
.mp-hero__panel {
  position: relative;
  overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--mp-shadow-hover), var(--glow-violet);
  transition: border-color 0.22s, box-shadow 0.22s;
}
.mp-hero__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(420px 260px at 6% -10%, rgba(59, 130, 246, 0.10), transparent 60%),
    radial-gradient(460px 300px at 106% 110%, rgba(124, 58, 237, 0.10), transparent 60%);
}
.mp-hero__panel:hover {
  border-color: rgba(26, 86, 219, 0.30);
  box-shadow: var(--mp-shadow-hover), var(--glow-violet), var(--glow-cyan);
}
.mp-hero__panel > * { position: relative; z-index: 1; }

/* полоса фактов внутри hero */
.mp-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 14px;
  margin-top: 40px;
}
.mp-stat { min-width: 0; }
.mp-stat__value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mp-stat__label {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 4px;
  line-height: 1.45;
  min-height: 37px; /* 2 строки фикс — ровные тайлы (V2 г) */
}

/* появление hero при загрузке — только transform/opacity */
@media (prefers-reduced-motion: no-preference) {
  .mp-hero__copy > * {
    animation: mp-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }
  .mp-hero__copy > *:nth-child(2) { animation-delay: 0.07s; }
  .mp-hero__copy > *:nth-child(3) { animation-delay: 0.14s; }
  .mp-hero__copy > *:nth-child(4) { animation-delay: 0.21s; }
  .mp-hero__copy > *:nth-child(5) { animation-delay: 0.28s; }
  .mp-hero__copy > *:nth-child(6) { animation-delay: 0.35s; }
  .mp-hero__panel {
    animation: mp-rise 0.6s 0.18s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }
  .mp-hero__stats {
    animation: mp-rise 0.6s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }
}
@keyframes mp-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------------- 3. Кнопки (mp-канон, метрики v-btn) ---------------- */
.mp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: var(--radius-md);
  min-height: 48px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease,
    background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.mp-btn--primary {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: 0 8px 28px rgba(79, 70, 229, 0.30);
}
.mp-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(26, 86, 219, 0.35);
  color: #fff;
  filter: brightness(1.06);
}
.mp-btn--ghost {
  background: #ffffff;
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.mp-btn--ghost:hover {
  background: #f1f5fb;
  color: var(--text);
  transform: translateY(-1px);
}
/* варианты для размещения на градиенте */
.mp-btn--light {
  background: #fff;
  color: #0f1b2d;
}
.mp-btn--light:hover {
  transform: translateY(-2px);
  color: #0f1b2d;
  box-shadow: 0 10px 30px rgba(8, 9, 13, 0.25);
}
.mp-btn--ghost-light {
  background: rgba(8, 9, 13, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
}
.mp-btn--ghost-light:hover {
  background: rgba(8, 9, 13, 0.32);
  color: #fff;
  transform: translateY(-1px);
}
.mp-btn--lg {
  padding: 16px 34px;
  font-size: 16px;
  min-height: 56px;
  border-radius: var(--radius-md);
}

/* ---------------- 4. Карточные сетки ---------------- */
.mp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mp-gap);
}
.mp-grid .mp-card,
.mp-grid .mp-cell { height: 100%; }

/* сервисная карточка: нумерация + тег, без клише-иконок */
.mp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--mp-shadow-rest);
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
/* градиентная «нить» по верхней кромке — проявляется при hover */
.mp-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--grad-accent);
  opacity: 0;
  transform: scaleX(0.35);
  transform-origin: left center;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.mp-card:hover {
  transform: translateY(-4px);
  border-color: rgba(26, 86, 219, 0.35);
  box-shadow: var(--mp-shadow-hover), var(--glow-cyan);
}
.mp-card:hover::after {
  opacity: 1;
  transform: scaleX(1);
}
.mp-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.mp-card__num {
  font-family: var(--mp-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cyan);
}
.mp-card__tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.mp-card__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 8px;
}
.mp-card__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0;
}
.mp-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cyan);
  text-decoration: none;
}
.mp-card__link::after {
  content: "→";
  display: inline-block;
  transition: transform 0.18s ease;
}
.mp-card__link:hover { color: #1d4ed8; }
.mp-card__link:hover::after { transform: translateX(3px); }
.mp-card__link--pin { margin-top: auto; padding-top: 16px; }

/* технологическая ячейка — плотнее и «инженернее» */
.mp-cell {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--mp-shadow-rest);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease,
    box-shadow 0.2s ease;
}
.mp-cell:hover {
  transform: translateY(-2px);
  border-color: rgba(26, 86, 219, 0.35);
  background: #ffffff;
  box-shadow: var(--mp-shadow-hover);
}
.mp-cell__mark {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-family: var(--mp-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cyan);
  background: linear-gradient(135deg, rgba(26, 86, 219, 0.10), rgba(124, 58, 237, 0.10));
  border: 1px solid rgba(26, 86, 219, 0.20);
}
.mp-cell__body { min-width: 0; }
.mp-cell__body b {
  display: block;
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--text);
}
.mp-cell__body small {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-faint);
  margin-top: 2px;
}

/* ---------------- 5. Шаги-таймлайн ---------------- */
.mp-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  counter-reset: mp-step;
}
.mp-step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  padding-bottom: 26px;
}
/* вертикальная градиент-рельса между узлами (скрывается у последнего) */
.mp-step::after {
  content: "";
  position: absolute;
  top: 50px;
  bottom: 2px;
  left: 21px;
  width: 2px;
  background: linear-gradient(180deg, rgba(26, 86, 219, 0.4), rgba(124, 58, 237, 0.4));
}
.mp-step:last-child { padding-bottom: 0; }
.mp-step:last-child::after { display: none; }

.mp-step__node {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mp-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  box-shadow: 0 0 0 5px var(--bg-0); /* отступ рельсы от узла */
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.mp-step__body { min-width: 0; }
.mp-step:hover .mp-step__node {
  border-color: rgba(26, 86, 219, 0.55);
  color: #1d4ed8;
  transform: scale(1.06);
}
.mp-step__meta {
  display: block;
  font-family: var(--mp-mono);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.mp-step__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 6px;
}
.mp-step__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0;
  max-width: 520px;
}

/* ---------------- 6. FAQ — CSS-only (details/summary) ---------------- */
.mp-faq {
  max-width: 800px;
}
.mp-faq__item {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: var(--mp-shadow-rest);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.mp-faq__item:hover { border-color: var(--border-strong); }
.mp-faq__item[open] {
  border-color: rgba(26, 86, 219, 0.28);
  background: var(--glass-strong);
  box-shadow: var(--mp-shadow-hover);
}
.mp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 17px 20px;
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  list-style: none;
  min-height: 48px; /* тап-норма */
}
.mp-faq__q::-webkit-details-marker { display: none; }
.mp-faq__q::after {
  content: "+";
  flex: none;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-dim);
  transition: transform 0.2s ease, color 0.2s ease;
}
.mp-faq__item[open] .mp-faq__q::after {
  transform: rotate(45deg);
  color: var(--cyan);
}
.mp-faq__a {
  padding: 0 20px 18px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-dim);
}
.mp-faq__a a { color: var(--cyan); }

/* ---------------- 7. CTA-блоки ---------------- */
/* белая карточка с градиентной кромкой (середина страницы) */
.mp-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 36px 22px;
  text-align: center;
}
.mp-cta--glass {
  border: 1px solid transparent;
  background:
    radial-gradient(600px 300px at 12% 0%, rgba(59, 130, 246, 0.12), transparent 60%),
    radial-gradient(600px 340px at 92% 100%, rgba(124, 58, 237, 0.12), transparent 60%),
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    var(--grad-accent) border-box;
  box-shadow: var(--mp-shadow-rest);
}
/* финальный — сплошной градиент #1a56db → #7c3aed */
.mp-cta--solid {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: 0 20px 60px rgba(79, 70, 229, 0.32);
}
.mp-cta--solid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 280px at 85% -10%, rgba(255, 255, 255, 0.18), transparent 60%),
    radial-gradient(560px 320px at 8% 110%, rgba(8, 9, 13, 0.22), transparent 62%);
}
.mp-cta > * { position: relative; z-index: 1; }

.mp-cta__kicker {
  display: inline-block;
  font-family: var(--mp-mono);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 14px;
  color: var(--cyan);
}
.mp-cta--solid .mp-cta__kicker { color: rgba(255, 255, 255, 0.92); }
.mp-cta__title {
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.16;
  font-weight: 750;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}
.mp-cta__text {
  font-size: clamp(14.5px, 1.4vw, 17px);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 640px;
  margin: 0 auto 24px;
}
.mp-cta--solid .mp-cta__text { color: rgba(255, 255, 255, 0.92); }
.mp-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.mp-cta__note {
  margin-top: 16px;
  color: var(--text-faint);
  font-size: 12.5px;
}
.mp-cta--solid .mp-cta__note { color: rgba(255, 255, 255, 0.86); }
.mp-cta__note a { color: inherit; text-decoration: underline; }
.mp-cta--solid .mp-cta__note a { color: #fff; }

/* ---------------- 8. Focus-visible (светлый акцент) ---------------- */
.mp a:focus-visible,
.mp button:focus-visible,
.mp summary:focus-visible,
.mp input:focus-visible {
  outline: 2px solid rgba(26, 86, 219, 0.65);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ============================================================
   8a. ИНТЕГРАЦИЯ M8 (инлайн-фрагменты index-new.html) → светлая
   Файл грузится ДО инлайн-<style> в <head>, поэтому равная
   специфичность проиграла бы — здесь повышенная (main.mp / .mp .x).
   Токены в var() уже светлые (§0); ниже — только захардкоженное.
   ============================================================ */

/* глобальный a:hover (#7DF3FF из base.css) внутри .mp — тёмно-синий */
.mp a:hover { color: #1d4ed8; }

/* quick-answer (инлайн-канон в <head>) */
main.mp .mp-hero__panel .quick-answer { background: #f8fafc; }
.mp .qa-links a { border-bottom-color: rgba(15, 27, 45, 0.35); }

/* M3 · услуги (glue): тёмная подложка полосы и cyan-хвосты */
main.mp .mp-services {
  background: linear-gradient(180deg, #eef2f9 0%, #f6f8fc 100%);
}
main.mp .mp-services__kicker { border-color: rgba(26, 86, 219, 0.24); }
main.mp .mp-service-card { box-shadow: var(--mp-shadow-rest); }
main.mp .mp-service-card:hover {
  border-color: rgba(26, 86, 219, 0.35);
  box-shadow: var(--mp-shadow-hover);
}
main.mp .mp-service-card__fact {
  background: rgba(26, 86, 219, 0.05);
  border-color: rgba(26, 86, 219, 0.16);
}
main.mp .mp-service-card__name a:hover,
main.mp .mp-service-card__name a:focus-visible,
main.mp .mp-service-card__go:hover,
main.mp .mp-services__extra-title a:hover { color: #1d4ed8; }
main.mp .mp-services__cta-btn:hover { box-shadow: 0 12px 36px rgba(26, 86, 219, 0.35); }

/* M4 · экосистема (glue) */
main.mp .mp-bridge { background: #f8fafc; }
main.mp .mp-bridge__link:hover { color: #1d4ed8; }
main.mp .mp-eco .mp-btn { box-shadow: 0 8px 28px rgba(79, 70, 229, 0.30); }
main.mp .mp-eco .mp-btn:hover { box-shadow: 0 12px 36px rgba(26, 86, 219, 0.38); }

/* M6 · доверие: локальные --mp-* захардкожены тёмными — светлые значения */
.mp .mp-trust {
  --mp-accent: #6d28d9;             /* фиолетовый канон секции, 6.6:1 на #fff */
  --mp-accent-soft: rgba(109, 40, 217, 0.08);
  --mp-bg: #eef2f9;
  --mp-card: #ffffff;
  --mp-border: #e2e8f0;
  --mp-text: #0f1b2d;
  --mp-dim: #3f4c63;
  --mp-faint: #5a677e;
  box-shadow: inset 0 1px 0 var(--border), inset 0 -1px 0 var(--border);
}
.mp .mp-trust .mp-kicker { border-color: rgba(109, 40, 217, 0.28); }
.mp .mp-trust .mp-lic__tag--self {
  color: #047857;
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(5, 150, 105, 0.32);
}
.mp .mp-trust .mp-lic__tag--partner { border-color: rgba(109, 40, 217, 0.30); }
.mp .mp-trust .mp-case__meta { border-left-color: rgba(109, 40, 217, 0.35); }
.mp .mp-trust .mp-check {
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.08), rgba(109, 40, 217, 0.02));
  border-color: rgba(109, 40, 217, 0.24);
}
.mp .mp-trust .mp-check__links a { background: #ffffff; }
.mp .mp-trust .mp-check__links a:hover { border-color: rgba(109, 40, 217, 0.45); }

/* R2 · «Разделы» (хабы, инлайн-стили): vars уже светлые; чиним
   белый-на-белом бордер плиток (инлайн → нужен !important) + hover-подъём */
.mp #sections-hubs a {
  border-color: #e2e8f0 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.mp #sections-hubs a:hover {
  transform: translateY(-3px);
  border-color: #c7d2e4 !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
}

/* v-примитивы внутри .mp (лид-форма, финальный CTA, бейджи hero) */
.mp .v-kicker { border-color: rgba(26, 86, 219, 0.24); }
.mp .v-kicker--violet {
  color: #6d28d9;
  background: rgba(109, 40, 217, 0.08);
  border-color: rgba(109, 40, 217, 0.28);
}
.mp .v-badge { background: #ffffff; }
.mp .v-card:hover {
  border-color: rgba(26, 86, 219, 0.35);
  box-shadow: var(--mp-shadow-hover), var(--glow-cyan);
}
.mp .v-btn--ghost { background: #ffffff; }
.mp .v-btn--ghost:hover { background: #f1f5fb; }
.mp .v-btn--cta:hover { box-shadow: 0 12px 36px rgba(26, 86, 219, 0.35); }
.mp .v-field input,
.mp .v-field textarea,
.mp .v-field select {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: var(--text);
}
.mp .v-field input:focus,
.mp .v-field textarea:focus,
.mp .v-field select:focus {
  border-color: rgba(26, 86, 219, 0.55);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.14);
}
.mp .v-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a56db' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.mp .v-field select option { background: #ffffff; color: #0f1b2d; }
.mp input[type="checkbox"] { accent-color: #1a56db !important; }
.mp .v-cta-band {
  background:
    radial-gradient(600px 300px at 12% 0%, rgba(59, 130, 246, 0.10), transparent 60%),
    radial-gradient(600px 340px at 92% 100%, rgba(124, 58, 237, 0.10), transparent 60%),
    #ffffff;
}

/* ============================================================
   8b. ГРАДИЕНТНЫЕ МОСТЫ (тёмная шапка/футер ↔ светлое тело)
   Верхний — внутри .mp-hero (первый слой background, §2):
   rgba(8,9,13,.55) → 0 за ~110px, контент начинается ниже зоны.
   Нижний — перед футером: затухание хабов в тёмный (~110px).
   ============================================================ */
.mp #sections-hubs { position: relative; }
.mp #sections-hubs::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  background: linear-gradient(180deg,
    rgba(8, 9, 13, 0) 0%,
    rgba(8, 9, 13, 0.05) 40%,
    rgba(8, 9, 13, 0.55) 76%,
    rgba(8, 9, 13, 0.96) 100%);
  pointer-events: none;
}

/* ============================================================
   АДАПТИВ — 320 / 390 / 768 / 1024 / 1440 (mobile-first)
   ============================================================ */

/* --- 320+ (база) — всё одноколоночное, тап-зоны ≥44px --- */

/* --- ≥390: просторнее дыхание, факты в 2 колонки остаются --- */
@media (min-width: 390px) {
  .mp { --mp-section-pad: 68px; }
  .mp-hero { padding: 68px 0 60px; }
  .mp-btn { min-height: 48px; }
}

/* --- ≥768: двухколоночные сетки, FAQ-границы, CTA-простор --- */
@media (min-width: 768px) {
  .mp {
    --mp-section-pad: 80px;
    --mp-head-mb: 44px;
    --mp-gap: 20px;
  }
  .mp-hero { padding: 84px 0 72px; }
  .mp-hero__inner { gap: 44px; }
  .mp-hero__panel { max-width: 620px; }
  .mp-hero__stats { grid-template-columns: repeat(4, 1fr); gap: 20px 20px; }
  .mp-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .mp-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .mp-card { padding: 26px; }
  /* шаги: сетка карточек 2×2, рельса выключена */
  .mp-steps { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .mp-step { grid-template-columns: 44px 1fr; padding-bottom: 0; }
  .mp-step::after { display: none; }
  .mp-faq__q { padding: 18px 22px; }
  .mp-faq__a { padding: 0 22px 18px; }
  .mp-cta { padding: 44px 36px; }
}

/* --- ≥1024: полные сетки, hero 2 колонки, горизонтальный таймлайн --- */
@media (min-width: 1024px) {
  .mp {
    --mp-section-pad: 96px;
    --mp-head-mb: 48px;
  }
  .mp-hero { padding: 96px 0 84px; }
  .mp-hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
  }
  .mp-hero__panel { max-width: none; }
  .mp-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .mp-grid--4 { grid-template-columns: repeat(4, 1fr); }
  /* таймлайн: 4 в ряд; 5-й шаг — лента на всю ширину (1024–1279) */
  .mp-steps { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .mp-steps .mp-step:nth-child(5) { grid-column: 1 / -1; }
  /* V3 P1-1: реанимировать статичные рельсы на десктопе (в ≥768 выключены,
     геометрия этого блока была мёртвым кодом); последний шаг без рельсы,
     в раскладке 4+N четвёртый — конец ряда, его рельса тоже выключена */
  .mp-step::after { display: block; }
  .mp-step:last-child::after { display: none; }
  .mp-steps .mp-step:nth-child(4)::after { display: none; }
  .mp-step {
    grid-template-columns: 1fr;
    gap: 0;
    padding-bottom: 0;
  }
  .mp-step::after {
    top: 21px;
    bottom: auto;
    left: 54px;
    right: -18px;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, rgba(26, 86, 219, 0.4), rgba(124, 58, 237, 0.4));
  }
  .mp-step__node { margin-bottom: 16px; }
  .mp-step__text { max-width: none; }
  .mp-cta { padding: 56px 48px; }
  /* финальный CTA: текст слева, действия справа */
  .mp-cta--solid .mp-cta__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    text-align: left;
  }
  .mp-cta--solid .mp-cta__main { max-width: 640px; }
  .mp-cta--solid .mp-cta__text { margin-left: 0; }
  .mp-cta--solid .mp-cta__actions {
    flex-direction: column;
    align-items: stretch;
    min-width: 260px;
  }
  .mp-cta--solid .mp-cta__note { text-align: left; }
}

/* --- ≥1280 (V3 P1-1): таймлайн в один ряд — все 5 шагов соединены рельсами --- */
@media (min-width: 1280px) {
  .mp-steps { grid-template-columns: repeat(5, 1fr); }
  .mp-steps .mp-step:nth-child(5) { grid-column: auto; }
  .mp-steps .mp-step:nth-child(4)::after { display: block; }
}

/* --- ≥1440: больше воздуха, контейнер остаётся 1180 (канон) --- */
@media (min-width: 1440px) {
  .mp { --mp-section-pad: 104px; }
  .mp-hero { padding: 110px 0 96px; }
  .mp-hero__stats { margin-top: 44px; }
}

/* ============================================================
   PREFERS-REDUCED-MOTION — движения выключены, цвета остаются
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .mp *,
  .mp *::before,
  .mp *::after {
    animation: none !important;
    transition: none !important;
  }
  .mp .mp-card:hover,
  .mp .mp-cell:hover,
  .mp .mp-btn:hover,
  .mp .mp-step:hover .mp-step__node,
  .mp #sections-hubs a:hover {
    transform: none;
  }
  .mp .mp-card:hover::after {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   M9 QA FIX (2026-09-18) — шапка на главной (наследованные дефекты live)
   1) white-space:nowrap — на macOS-шрифтах пункты «Экосистема ВЫШКА»,
      «Разработка ПО», «Защита ИИ», «О компании» переносились на 2 строки
      (61px в баре 68px) во всём desktop-диапазоне.
   2) 861–1139px — полному меню нужно ~1134px, оно не помещалось
      (горизонтальный overflow + скверненный текст). Включаем бургер тем же
      паттерном, что штатный блок ≤860px в base.css (меню — по клику).
   Скоуп: действует только на страницах, подключающих mainpage.css (главная).
   Шапка остаётся тёмной (v-канон) — в светлую тему не переводится.
   ============================================================ */
.v-nav__links a { white-space: nowrap; }

/* ≥1180: компактные метрики пунктов — однострочное меню помещается
   в контейнер 1180 (натуральная ширина строк на macOS-шрифтах ~1284px) */
@media (min-width: 1180px) {
  .v-nav__inner { gap: 18px; }
  .v-nav__links { gap: 2px; }
  .v-nav__links a { font-size: 13.5px; padding: 9px 8px; }
  .v-nav__tel a { font-size: 13.5px; padding: 9px 7px; }
  .v-nav__cta { margin-left: 8px; }
  .v-nav__cta .v-btn { padding: 10px 16px; font-size: 14px; }
}

@media (min-width: 861px) and (max-width: 1179px) {
  .v-nav__links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: rgba(11, 13, 20, 0.97);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-bottom: 1px solid var(--border);
    padding: 14px 22px 20px;
    gap: 6px;
  }
  .v-nav__links.is-open { display: flex; }
  .v-nav__links a { padding: 13px 14px; font-size: 16px; }
  .v-nav__cta { margin: 8px 0 0; }
  .v-burger { display: grid; place-items: center; }
}

/* ============================================================
   D4 FIX (QA 2026-09-18, гейт перед деплоем) — светлые hover-состояния.

   Проблема: mp-anim.css §3 (агент D2, писался ДО светлой темы D1)
   навешивает на hover карточек ТЁМЛЫЕ тени старой темы
   (rgba(0,0,0,.35–.38) 0 12–16px 32–40px) и cyan-бордеры
   rgba(0,229,255,.3). На светлой странице это даёт «чёрные лужи»
   под карточками и неоновый cyan вместо синего акцента.
   Зафиксировано вычисленными стилями на стенде D4 (qa-screens/d4).

   Решение: перекрытие селекторами повышенной специфичности
   (mainpage.css грузится РАНЬШЕ mp-anim.css, равная специфичность
   проиграла бы). Значения — токены D1: --mp-shadow-hover (лёгкая
   двухслойная тень), синий #1a56db для обычных карточек,
   фиолетовый #6d28d9 для среза доверия (канон секции).
   Геометрия hover (translateY, transition) не тронута.
   ============================================================ */
/* услуги: возвращаем светлую тень D1 (бордер уже синий от D1) */
main.mp section.mp-services .mp-service-card:hover {
  box-shadow: var(--mp-shadow-hover);
}

/* технологии-2027: cyan-бордер → синий акцент D1 */
main.mp section#mp-tech2027 .mp-card:hover {
  border-color: rgba(26, 86, 219, 0.35);
}

/* срез доверия: светлая тень + фиолетовый бордер секции вместо cyan */
main.mp section.mp-trust .mp-stat:hover,
main.mp section.mp-trust .mp-case:hover,
main.mp section.mp-trust .mp-why__card:hover,
main.mp section.mp-trust .mp-lic__card:hover {
  box-shadow: var(--mp-shadow-hover);
  border-color: rgba(109, 40, 217, 0.35);
}

/* чипы «проверьте нас»: фиолетовый канон вместо cyan */
main.mp section.mp-trust .mp-check__links a:hover {
  border-color: rgba(109, 40, 217, 0.45);
}

/* хабы «Разделы»: тень D1 + синий ring вместо чёрной тени + cyan-ring */
main.mp section#sections-hubs a:hover {
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10),
    0 0 0 1px rgba(26, 86, 219, 0.22);
}

/* ============================================================
   D4 FIX #2 (QA 2026-09-18, retry-гейт перед деплоем) — sticky-CTA.

   Проблема: conversion.js вешает плавающую кнопку «Получить расчёт
   за 24 часа» на <body> — ВНЕ скоупа main.mp, поэтому светлые
   токены D1 на неё не действуют. Рендерится тёмная glass-плашка
   (--glass-strong, тёмный --shadow-card) с неоновым градиентом
   --grad-cta (#00C6FF→#6D5CFF, белый текст на cyan ~1.9:1) —
   остаток тёмной темы поверх светлой страницы (только ≤860px).
   Зафиксировано скриншотом qa-screens/d4/w390-sticky-cta.png.

   Решение: mainpage.css грузится ТОЛЬКО на главной, поэтому
   нескоупленный .sticky-cta здесь не задевает другие страницы
   (тот же паттерн, что M9 QA FIX для .v-nav__links выше).
   Плашка — белое матовое стекло, кнопка — светлый grad-cta D1
   #1a56db→#7c3aed (белый текст ≥4.9:1), тени — светлые токены D1.
   ============================================================ */
.sticky-cta {
  background: rgba(255, 255, 255, 0.92);
  border-color: #e2e8f0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 18px 44px rgba(15, 23, 42, 0.13);
}
.sticky-cta__text,
.sticky-cta > span {
  color: #0f1b2d;
}
.sticky-cta .v-btn--cta {
  background: linear-gradient(120deg, #1a56db 0%, #7c3aed 100%);
  box-shadow: 0 8px 28px rgba(79, 70, 229, 0.30);
}
.sticky-cta .v-btn--cta:hover {
  box-shadow: 0 12px 36px rgba(26, 86, 219, 0.35);
}

/* ============================================================
   V5 POLISH (2026-09-19) — пиксельный аудит V1/V2/V4.
   Свод: якоря под навом; CTA-доминанта B (гало+microcopy);
   мобильные CTA full-width; sticky-CTA крестик/тишина;
   ритм 96px ≥1024; единая колонка 1124@158; кнопки одной
   системы; фоны без «мигающей» полосы; статы табличные.
   ============================================================ */

/* --- V5-1 (P0, V4 P1-5): якоря секций не прячутся под sticky-навом --- */
section[id] {
  scroll-margin-top: calc(var(--nav-h, 68px) + 18px);
}

/* --- V5-2 (P0, V2 в): CTA-доминанта — вариант B «световое гало» --- */
.mp-hero__actions .mp-btn--primary {
  box-shadow:
    0 8px 28px rgba(79, 70, 229, 0.30),
    0 0 0 6px rgba(26, 86, 219, 0.10); /* halo */
}
.mp-hero__actions .mp-btn--primary:hover {
  box-shadow:
    0 12px 36px rgba(26, 86, 219, 0.35),
    0 0 0 10px rgba(26, 86, 219, 0.16);
}
.mp-hero__actions .mp-btn--primary::after {
  content: "→";
  transition: transform 0.18s ease;
}
.mp-hero__actions .mp-btn--primary:hover::after {
  transform: translateX(3px);
}
/* ghost — второй ряд: легче рамка/текст, читаемый hover */
.mp-hero__actions .mp-btn--ghost {
  border-color: var(--border);
  color: var(--text-dim);
}
.mp-hero__actions .mp-btn--ghost:hover {
  background: #e9eef7;
  border-color: #b6c3d6;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

/* --- V5-3 (P0, V4 P1-3/P1-4): мобильная типографика героя + CTA стопкой --- */
@media (max-width: 767px) {
  .mp-hero__title { font-size: 28px; line-height: 1.2; }
}
@media (max-width: 640px) {
  .mp-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .mp-hero__actions .mp-btn { width: 100%; }
}
/* 1024–1439 (V2 рецепт 3): шаг шрифта ниже роста колонки */
@media (min-width: 1024px) and (max-width: 1439px) {
  .mp-hero__title { font-size: clamp(34px, 4.2vw, 44px); }
}

/* --- V5-4 (P1, V4 P1-1/P1-2): sticky-CTA — крестик + тишина у hero/#lead.
       Логику (кнопка/IO/sessionStorage) вешает mp-anim.js v mpa2. --- */
.sticky-cta__close {
  position: absolute;
  top: -10px;
  right: -4px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f1b2d;
  font-size: 17px;
  line-height: 1;
  font-family: var(--font);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16);
}
.sticky-cta__close::before {
  content: "";
  position: absolute;
  inset: -6px; /* добор тап-зоны до ≥44px */
  border-radius: 50%;
}
.sticky-cta__close:hover { border-color: #94a3b8; }
.sticky-cta.is-muted { display: none; }   /* видны hero-CTA или #lead */
.sticky-cta.is-closed { display: none !important; } /* закрыто пользователем */

/* --- V5-5 (P2, V4 P2-1): тап-зона бургера ≥44px --- */
.v-burger { width: 44px; height: 44px; min-width: 44px; }

/* --- V5-6 (P0, V1 D-02): вертикальный ритм 96px на десктопе --- */
@media (min-width: 1024px) {
  main.mp #mp-tech2027 { padding: 96px 0; }
  main.mp section.mp-trust { padding: 96px 0; }
  main.mp #lead { padding: 96px 0; }
  main.mp section.v-section { padding: 96px 0; }
  main.mp #sections-hubs { padding: 88px 0; }
}
#sections-hubs { padding: 56px 0; } /* база (мобильный ритм) */

/* --- V5-7 (P1, V1 D-03): одна типографика H2 во всех секциях --- */
main.mp .mp-h2,
main.mp .mp-title,
main.mp .mp-services__title,
main.mp .v-h2 {
  line-height: 1.16;
  font-weight: 750;
  letter-spacing: -0.015em;
  margin-top: 0;
  margin-bottom: 14px;
}
main.mp #mp-tech2027 .mp-h2 {
  font-weight: 750;
  margin: 0 0 14px;
  letter-spacing: -0.015em;
}
main.mp #mp-tech2027 .mp-lead { margin-top: 6px; }
@media (max-width: 1100px) {
  main.mp .mp-h2,
  main.mp .mp-title,
  main.mp .mp-services__title { font-size: 36px; }
}

/* --- V5-8 (P1, V1 D-04): кнопки одной системы (высота/радиус) --- */
.v-btn { border-radius: var(--radius-md); }
.v-btn--lg {
  line-height: 1.2;
  min-height: 56px;
  font-size: 16px;
}
.mp-services__cta-btn,
.mp-cta__btn {
  min-height: 48px;
  border-radius: var(--radius-md);
}

/* --- V5-9 (P1, V1 D-06): чередование двух тонов фона, без градиентов
       между соседними похожими тонами --- */
main.mp section.mp-services { background: #eef2f9; }
main.mp section#mp-tech2027 { background: #ffffff; }
main.mp section.mp-section--alt {
  background: #eef2f9;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* --- V5-10 (P2, V1 D-09/D-10/D-11/D-13): ровные плитки и карточки --- */
main.mp .mp-trust .mp-stat__label { min-height: 96px; }
main.mp .mp-trust .mp-stat__value { font-variant-numeric: tabular-nums; }
main.mp #mp-tech2027 .mp-card { padding: 24px; }
main.mp .mp-card { padding: 24px; }
main.mp .v-cta-band { border-radius: 22px; }

/* --- V5-11 (P2, V1 D-15): плотнее ссылки футера --- */
.v-footer ul a { font-size: 15px; line-height: 24px; }
.v-footer ul li { margin-bottom: 8px; }

/* ============================================================
   V5 POLISH · V3_CARDS (2026-09-19) — карточные секции.
   P1: пришивка ссылок к низу; единый hover (lift −4 + тень
   семейства + accent-бордер); реанимация рельс ≥1024 (выше,
   в адаптиве). P2: теги/маркеры/заголовки карточек к канону.
   ============================================================ */

/* --- V3 P1-2: услуги — факт-плашка и ссылка пришиты к низу карточки --- */
main.mp .mp-service-card__fact { margin-top: auto; }
main.mp .mp-service-card__go { margin-top: 10px; }

/* --- V3 P1-3: экосистема — ссылки на одной высоте --- */
main.mp .mp-eco .mp-card__link { margin-top: auto; padding-top: 12px; }

/* --- V3 P1-4: один hover-рецепт для всех карточных семейств --- */
main.mp #mp-tech2027 .mp-card { box-shadow: var(--mp-shadow-rest); }
main.mp #mp-tech2027 .mp-card:hover {
  transform: translateY(-4px);           /* было −2 (инлайн M5) */
  box-shadow: var(--mp-shadow-hover), var(--glow-cyan);
}
main.mp .mp-trust .mp-stat:hover,
main.mp .mp-trust .mp-case:hover,
main.mp .mp-trust .mp-why__card:hover,
main.mp .mp-trust .mp-lic__card:hover {
  transform: translateY(-4px);           /* было −3 */
}
main.mp #sections-hubs a:hover {
  transform: translateY(-4px);           /* было −3 */
  border-color: rgba(26, 86, 219, 0.35) !important; /* инлайн-рамка серым */
}

/* --- V3 P2-1/P2-2/P2-4/P2-6: теги, маркеры, заголовки, хабы к канону --- */
.mp-card__tag { font-size: 11.5px; color: var(--cyan); }
main.mp #mp-tech2027 .mp-card__num {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #1a56db;
}
main.mp #mp-tech2027 .mp-h3 { font-size: 17px; }
main.mp #mp-tech2027 .mp-kicker { font-size: 12px; font-weight: 700; }
main.mp .mp-trust .mp-kicker { margin-bottom: 20px; }
main.mp .mp-trust .mp-lead { font-size: clamp(15.5px, 1.5vw, 18px); }
main.mp #sections-hubs a { border-radius: 16px !important; }
main.mp #sections-hubs a span:first-child {
  font-weight: 700 !important;
  color: var(--text, #0f1b2d) !important;
}

/* --- V3 P2-7: мобильная плитка статов №5 — не сирота (на всю ширину) --- */
@media (max-width: 600px) {
  main.mp .mp-trust .mp-stats .mp-stat:last-child { grid-column: span 2; }
}
