/* Шрифты лежат у нас, а не на fonts.googleapis.com: два внешних подключения
   на каждой загрузке — лишняя задержка и зависимость от чужого домена
   (плюс лишний третий сторонний запрос к посетителю). Подключены только
   кириллица и латиница, остальные наборы вырезаны — они нам не нужны. */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/GolosText-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/GolosText-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/GolosText-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/GolosText-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/GolosText-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/GolosText-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/GolosText-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/GolosText-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/GolosText-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/GolosText-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/GolosText-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/GolosText-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/GolosText-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/GolosText-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/GolosText-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/GolosText-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/JetBrainsMono-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/JetBrainsMono-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/JetBrainsMono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/JetBrainsMono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/JetBrainsMono-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/JetBrainsMono-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/JetBrainsMono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/JetBrainsMono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/JetBrainsMono-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/JetBrainsMono-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/JetBrainsMono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/JetBrainsMono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/JetBrainsMono-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/JetBrainsMono-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/JetBrainsMono-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/JetBrainsMono-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/Unbounded-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/Unbounded-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/Unbounded-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/Unbounded-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/Unbounded-800-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/Unbounded-800-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/Unbounded-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/Unbounded-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/Unbounded-900-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/Unbounded-900-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/Unbounded-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/Unbounded-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   AIДиректолог — черновик лендинга (/new.html), НЕ подключено к боевому app.css.
   Задача: уйти от усреднённого «AI-стартап» вида (синий градиент, три плитки,
   центрированный герой). Три правила на всю страницу:
     1. Данные системы (цифры, названия кампаний) — моноширинным.
     2. Все числа — акцентным цветом.
     3. Наши пояснения (не данные) — с тонкой вертикальной линией слева.
   Единая шкала времени: наведение 170мс, появление 340мс, крупные блоки 520мс,
   cubic-bezier(.16,1,.3,1). Тёмный только первый экран, дальше — светлые секции.
   ========================================================================== */

:root {
  /* Тёмный первый экран — не сине-фиолетовый градиент, а почти чёрный
     "терминал/гроссбух": продукт — про деньги и цифры, акцент зелёный
     (прибыль), не голубой (как у всех AI-лендингов). */
  --hero-bg:      #0a0c0a;
  --hero-bg-2:    #0e120f;
  --hero-ink:     #eef2ef;
  --hero-muted:   #7c8b81;
  --hero-line:    #1c2620;
  --accent:       #7CFF9E;   /* акцентный — только для чисел */
  --accent-dim:   #4fbf74;
  --loss:         #ff6b5c;

  /* Бренд-синий из основного сайта — только для кнопок/ссылок, не для фона */
  --brand:        #2f6bff;
  --brand-hover:  #1d54e0;

  /* Светлые секции ниже героя */
  --ink:          #14181f;
  --text:         #2b3340;
  --muted:        #667085;
  --bg:           #ffffff;
  --bg-soft:      #f6f7f9;
  --line:         #e6e8ec;

  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo,
          Consolas, 'Liberation Mono', monospace;
  --sans: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --heading: 'Unbounded', var(--sans);

  /* Единая шкала анимации на весь сайт — только эти три значения */
  --t-hover: 170ms;
  --t-appear: 340ms;
  --t-block: 520ms;
  --ease: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* Данные системы — правило 1: моноширинный шрифт */
.data, .mono { font-family: var(--mono); }

/* Числа — правило 2: акцентный цвет. Применяется точечно через класс,
   не глобально на все .data — не любая моноширинная строка есть число. */
.num { color: var(--accent); font-weight: 600; }
.num.loss { color: var(--loss); }

/* Наши пояснения — правило 3: тонкая линия слева, не рамка/фон */
.note {
  border-left: 2px solid var(--hero-line);
  padding-left: 16px;
  color: var(--hero-muted);
}
.note.on-light { border-left-color: var(--line); color: var(--muted); }

.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Движение: только эти примитивы, ни одной библиотеки ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-appear) var(--ease), transform var(--t-appear) var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-reveal-row] {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-appear) var(--ease), transform var(--t-appear) var(--ease);
}
[data-reveal-row].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-reveal-row] {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .count { transition: none !important; }
}

/* ================= Хедер (тёмный, на первом экране) ================= */
.hero-header {
  position: relative; z-index: 5;
  padding: 22px 0;
}
.hero-header .inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.logo {
  font-family: var(--mono); font-size: 18px; font-weight: 700;
  color: var(--hero-ink); letter-spacing: -.01em;
  display: flex; align-items: center; gap: 10px;
}
.logo .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
/* «AIДиректолог» слитно (латиница+кириллица) читалось плохо — разделили
   точкой по образцу «Контрагент·AI», латинскую часть подкрасили акцентом. */
.logo .ai { color: var(--accent); }
.hero-nav { display: flex; gap: 10px; align-items: center; }
.hero-nav a.link {
  color: var(--hero-muted); font-size: 14px; padding: 8px 4px;
  transition: color var(--t-hover) var(--ease);
}
.hero-nav a.link:hover { color: var(--hero-ink); }

/* На узких экранах логотип + "Войти" + "Начать бесплатно" не помещаются в
   одну строку — кнопка обрезалась за краем экрана БЕЗ горизонтальной
   прокрутки страницы (right=425px при viewport=390px, не поймать на глаз,
   только замером). Убираем второстепенную кнопку и сжимаем шрифт. */
@media (max-width: 480px) {
  .hero-nav .btn-ghost { display: none; }
  .hero-nav .btn { padding: 9px 14px; font-size: 13.5px; }
  .logo { font-size: 15px; gap: 8px; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 8px; cursor: pointer;
  font-size: 14.5px; font-weight: 600; font-family: var(--sans);
  padding: 11px 18px; background: var(--brand); color: #fff;
  transition: background var(--t-hover) var(--ease), transform var(--t-hover) var(--ease),
              border-color var(--t-hover) var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--brand-hover); }
.btn:active { transform: scale(.98); }
.btn-ghost {
  background: transparent; color: var(--hero-ink); border-color: var(--hero-line);
}
.btn-ghost:hover { border-color: var(--hero-muted); }
.btn-block { width: 100%; }
/* Тарифы: один акцентный цвет — только у выделенного плана; у остальных
   приглушённая кнопка, чтобы в ряду не было трёх разных цветов подряд. */
.btn-muted { background: var(--bg-soft); color: var(--ink); border-color: var(--line); }
.btn-muted:hover { background: var(--line); }

/* ================= Герой ================= */
.hero {
  position: relative;
  background: radial-gradient(1200px 500px at 15% -10%, var(--hero-bg-2), var(--hero-bg) 60%);
  color: var(--hero-ink);
  padding-bottom: 48px;
  overflow: hidden;
}
/* тонкая сетка гроссбуха на фоне — не иллюстрация, паттерн */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--hero-line) 1px, transparent 1px);
  background-size: 100% 44px;
  opacity: .35;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding-top: 36px;
}
/* Пустое место справа от заголовка (821px из 1440 при одной колонке) —
   таблица переезжает вправо от текста, а не под него: герой становится
   вдвое ниже (высоты складываются не суммой, а максимумом) и первый
   экран собирается симметрично по смыслу — асимметрично по ширине.
   Правая колонка не у́же 470px: при 460px таблица получала внутренний
   горизонтальный скроллбар прямо на первом экране (замер: scrollWidth
   ledger-scroll > clientWidth при 1440) — колонку расширили, а не таблицу
   сжали до нечитаемости. */
@media (min-width: 800px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 580px);
    align-items: center;
    gap: 44px;
    padding-top: 28px;
  }
  .ledger-wrap { margin-top: 0; }
}

.eyebrow {
  font-family: var(--mono); font-size: 12.5px; color: var(--accent);
  text-transform: uppercase; letter-spacing: .12em;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--accent-dim);
}

/* Асимметрия: заголовок не по центру, узкая колонка слева, а не во всю ширину */
h1.hero-title {
  font-family: var(--heading);
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.02;
  letter-spacing: -.02em;
  font-weight: 800;
  margin: 0 0 18px;
  max-width: 18ch;
}
h1.hero-title .thin { font-weight: 400; color: var(--hero-muted); }

.hero-lead {
  font-size: 16.5px; line-height: 1.55; color: var(--hero-muted);
  max-width: 40ch; margin: 0 0 22px;
}
.hero-lead b { color: var(--hero-ink); font-weight: 600; }

/* Планка входа: набрана крупнее лида — это тот факт, ради которого
   человек и читает страницу дальше. */
.hero-claim {
  font-size: 17.5px; line-height: 1.5; color: var(--hero-muted);
  max-width: 40ch; margin: 0 0 24px; padding-left: 14px;
  border-left: 3px solid var(--brand);
}
.hero-claim b { color: var(--hero-ink); font-weight: 700; }

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 0; }
.btn-lg { padding: 14px 24px; font-size: 15.5px; }

.hero-cta-note {
  font-family: var(--mono); font-size: 12.5px; color: var(--hero-muted);
  margin-top: 12px;
}

/* --- Гроссбух: асимметрия за счёт ширины, а не отрицательных отступов ---
   Первая версия выталкивала карточку отрицательным margin-right за край
   вьюпорта — сама страница не скроллилась (проверка на 390px проходила),
   но итоговая цифра ROMI в подвале карточки физически рендерилась ЗА
   пределами экрана и не была доступна даже прокруткой (scrollWidth ==
   clientWidth — скроллить нечего, контент просто обрезан). Прежде чем
   решить, что дело в вёрстке "на глаз", измерил getBoundingClientRect()
   ROMI-числа в реальном браузере: right=1477px при viewport=1440px.
   Асимметрия здесь и так есть без риска — герой уже у́же (13ch/46ch), а
   карточка на всю ширину контейнера; специальный чуть более широкий
   контейнер только для героя усиливает эффект, оставаясь безопасно внутри
   экрана на любой ширине. */
.hero .container { max-width: 1320px; }

.ledger-wrap {
  position: relative;
  margin-top: 8px;
}
/* Карточка — обычной ширины (100% родителя), шапка и подвал в ней всегда
   видны целиком. Прокручивается ТОЛЬКО .ledger-scroll внутри (см. ниже) —
   на узких экранах это настоящая прокрутка отдельных строк таблицы, а не
   способ увидеть итоговую цифру ROMI. */
.ledger {
  border: 1px solid var(--hero-line);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  backdrop-filter: blur(2px);
  overflow: hidden;
}
.ledger-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ledger-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid var(--hero-line);
  font-family: var(--mono); font-size: 12px; color: var(--hero-muted);
}
.ledger-head .status {
  display: inline-flex; align-items: center; gap: 6px;
}
.ledger-head .status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: pulse 2s var(--ease) infinite;
}
@media (prefers-reduced-motion: reduce) { .ledger-head .status::before { animation: none; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

table.ledger-table {
  width: 100%; min-width: 430px; border-collapse: collapse; font-size: 13px;
}
.ledger-table th {
  text-align: left; font-family: var(--mono); font-weight: 500; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--hero-muted);
  padding: 9px 12px; border-bottom: 1px solid var(--hero-line);
  white-space: nowrap;
}
.ledger-table td {
  padding: 11px 12px; border-bottom: 1px solid var(--hero-line);
  font-family: var(--mono); color: var(--hero-ink);
  white-space: nowrap;
}
.ledger-table tbody tr:last-child td { border-bottom: 0; }
.ledger-table td.num { text-align: right; }
.tag-cls {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 4px; font-size: 11px; font-weight: 700;
  font-family: var(--mono);
}
.tag-a { background: rgba(124,255,158,.12); color: var(--accent); }
.tag-b { background: rgba(255,255,255,.08); color: var(--hero-muted); }
.tag-c { background: rgba(255,107,92,.12); color: var(--loss); }

.ledger-foot {
  /* flex-wrap + свой отступ, а не только justify-content: если места вдруг
     не хватит — ROMI переносится строкой ниже, а не обрезается за краем
     (см. комментарий у .ledger-scroll: один раз уже обрезалась молча). */
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 6px 16px;
  padding: 14px 18px; border-top: 1px solid var(--hero-line);
  font-family: var(--mono); font-size: 12px; color: var(--hero-muted);
}
.ledger-foot .romi-big {
  font-size: 22px; color: var(--accent); font-weight: 700; white-space: nowrap;
}

.demo-label {
  font-family: var(--mono); font-size: 11.5px; color: var(--hero-muted);
  margin-top: 10px; display: flex; align-items: center; gap: 8px;
}
.demo-label .sq {
  width: 8px; height: 8px; border: 1px solid var(--hero-muted); flex-shrink: 0;
}

@media (max-width: 860px) {
  .ledger-scroll { margin-right: -24px; }
  .hero-nav .link { display: none; }
}

/* ================= Числовая полоса доверия (числа, не иконки) ================= */
.trust-strip {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* асимметрия: разделители, а не карточки со скруглением и тенью */
}
.trust-item {
  padding: 34px 26px;
  border-left: 1px solid var(--line);
}
.trust-item:first-child { border-left: 0; }
.trust-item .n {
  font-family: var(--mono); font-size: 52px; font-weight: 700;
  color: var(--brand); letter-spacing: -.03em; line-height: 1;
  margin-bottom: 12px;
}
.trust-item .d { font-size: 14px; color: var(--muted); line-height: 1.45; max-width: 26ch; }

@media (max-width: 860px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(2n+1) { border-left: 0; }
  .trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ================= Секции (светлые) ================= */
.section { padding: 84px 0; }
.section-alt { background: var(--bg-soft); }
.kicker {
  font-family: var(--mono); font-size: 12px; color: var(--brand);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px;
}
.section-title {
  font-family: var(--heading);
  font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; letter-spacing: -.01em;
  color: var(--ink); margin: 0; max-width: 16ch;
}

/* Вариант A заголовка секции — h2 слева, пояснение справа. Только для
   двух ключевых разделов (сравнение, тарифы) — не на всю страницу подряд. */
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; margin-bottom: 48px; flex-wrap: wrap;
}
.section-head .aside {
  font-size: 14.5px; color: var(--muted); max-width: 34ch;
  text-align: right;
}
@media (max-width: 720px) { .section-head .aside { text-align: left; } }

/* Вариант B — заголовок на всю ширину, подзаголовок под ним (не сбоку) */
.section-head-stack { margin-bottom: 44px; max-width: 620px; }
.section-head-stack .section-title { max-width: none; margin: 0 0 12px; }
.section-head-stack .section-sub {
  font-size: 15px; color: var(--muted); margin: 0; max-width: 56ch; line-height: 1.55;
}

/* Вариант C — заголовок узкой колонкой рядом с первым элементом контента.
   Колонка не у́же 250px и кегль меньше: Unbounded очень широкий, слово
   «спрашивают» при 34px вылезало из колонки и наезжало на список FAQ. */
.faq-layout { display: grid; grid-template-columns: minmax(250px, 300px) 1fr; gap: 48px; align-items: start; }
.faq-heading .section-title {
  max-width: none;
  font-size: clamp(20px, 2vw, 26px);
  overflow-wrap: break-word;
}
@media (max-width: 720px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-heading { margin-bottom: 8px; }
}

/* ---------------- Как это работает: горизонтальная сетка 3×2 ----------------
   Вертикальный журнал на десктопе оставлял пустой правую половину экрана и
   заставлял долго крутить вниз. Номер шага — с линией-продолжением: читается
   как этапы одного процесса, а не шесть одинаковых карточек (рамок нет). */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 44px;
}
.step {
  padding: 20px 22px; margin: -20px -22px;
  border-radius: 14px;
  /* opacity в t-appear — это часть reveal-анимации; подъём и тень в t-hover —
     реакция на курсор (как подсветка шага в Контрагент·AI). */
  transition: opacity var(--t-appear) var(--ease),
              transform var(--t-hover) var(--ease),
              background var(--t-hover) var(--ease),
              box-shadow var(--t-hover) var(--ease);
}
.step:hover {
  background: var(--bg);
  box-shadow: 0 14px 34px rgba(20, 24, 31, .09);
  transform: translateY(-3px);
}
.step .step-n {
  font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--brand);
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
}
.step .step-n::after {
  content: ""; height: 1px; background: var(--line); flex: 1;
  transition: background var(--t-hover) var(--ease);
}
.step:hover .step-n::after { background: var(--brand); }
.step h3 { font-size: 16.5px; margin: 0 0 8px; color: var(--ink); }
.step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
@media (max-width: 1000px) { .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; } }
@media (max-width: 620px)  { .steps-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---------------- Сравнение: настоящая таблица, не рерайт ledger'а ---------------- */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
table.compare { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14.5px; }
.compare thead th {
  text-align: left; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); font-weight: 500;
  padding: 14px 18px; background: var(--bg-soft); border-bottom: 1px solid var(--line);
}
.compare thead th.us { color: var(--brand); }
.compare td {
  padding: 15px 18px; border-bottom: 1px solid var(--line); color: var(--text);
  transition: background var(--t-hover) var(--ease);
}
.compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody tr:hover td { background: #fff; }
.compare td.us { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.compare td:first-child { color: var(--muted); }

/* ---------------- Тарифы: асимметрия веса, не одинаковые карточки ---------------- */
.plans-grid {
  display: grid;
  /* Четыре тарифа: выделенный чуть шире остальных, но не в полтора раза —
     на четырёх колонках такой перекос ломает сетку. */
  grid-template-columns: 1fr 1.12fr 1fr 1fr;
  gap: 16px;
}
@media (max-width: 1180px) {
  .plans-grid { grid-template-columns: repeat(2, 1fr); }
}
.plan-col {
  padding: 34px 28px 32px;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex; flex-direction: column;
  /* opacity в t-appear — reveal при прокрутке; подъём/тень/рамка в t-hover —
     реакция на курсор. */
  transition: opacity var(--t-appear) var(--ease),
              transform var(--t-hover) var(--ease),
              box-shadow var(--t-hover) var(--ease),
              border-color var(--t-hover) var(--ease);
}
.plan-col:hover {
  transform: translateY(-4px);
  border-color: #c9cfd9;
  box-shadow: 0 16px 38px rgba(20, 24, 31, .10);
}
.plan-col.featured:hover {
  border-color: var(--brand);
  box-shadow: 0 20px 44px rgba(47, 107, 255, .18);
}
/* Выделенный тариф — не чёрная плита («выглядит как отключённый»), а
   белая карточка с акцентной рамкой, мягкой тенью и плашкой. Плашка
   обязательна: без подписи выделение читается как «другой», а не «лучший». */
.plan-col.featured {
  background: var(--bg);
  border: 2px solid var(--brand);
  box-shadow: 0 14px 36px rgba(47, 107, 255, .12);
  position: relative; z-index: 1;
}
.plan-col.featured::before {
  content: "Выбирают чаще";
  position: absolute; top: -13px; left: 26px;
  background: var(--brand); color: #fff;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .02em; padding: 5px 12px; border-radius: 20px;
}
.plan-col .p-name { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.plan-col .p-for { font-size: 13px; color: var(--muted); min-height: 34px; }
.plan-col .p-price {
  font-family: var(--mono); font-weight: 700; letter-spacing: -.02em;
  margin: 18px 0 4px; color: var(--brand);
}
.plan-col:not(.featured) .p-price { font-size: 30px; }
.plan-col.featured .p-price { font-size: 38px; }
.plan-col .p-fee { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.plan-col ul { list-style: none; margin: 0 0 26px; padding: 0; font-size: 13.5px; flex-grow: 1; }
.plan-col ul li { padding: 6px 0 6px 20px; position: relative; }
.plan-col ul li::before { content: "+"; position: absolute; left: 0; color: var(--brand); font-family: var(--mono); }
.plan-col ul li.off { color: var(--muted); }
.plan-col ul li.off::before { content: "–"; color: var(--line); }

.plans-note {
  margin-top: 20px; font-size: 13.5px; color: var(--muted); max-width: 62ch;
}

@media (max-width: 860px) {
  .plans-grid { grid-template-columns: 1fr; }
}

/* ---------------- FAQ: ответы — наши пояснения, тонкая линия ---------------- */
.faq-list { max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 20px 32px 20px 0; position: relative;
  font-size: 16px; font-weight: 600; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 20px; color: var(--muted);
  transition: transform var(--t-hover) var(--ease);
}
.faq-item[open] summary::after { content: "+"; transform: translateY(-50%) rotate(45deg); }
.faq-item .answer { padding: 0 24px 22px 0; margin: 0 0 0 2px; font-size: 14.5px; }

/* ---------------- Контакты: живой человек, а не «команда профессионалов» ---------------- */
.contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.ccard {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
  transition: border-color var(--t-hover) var(--ease),
              transform var(--t-hover) var(--ease),
              box-shadow var(--t-hover) var(--ease);
}
.ccard:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(20, 24, 31, .07);
}
.ccard .cico {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  background: rgba(47, 107, 255, .09); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.ccard b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.ccard .cval { display: block; font-family: var(--mono); font-size: 13px; color: var(--brand); margin-top: 3px; }
.ccard .cnote { display: block; font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.contacts-sub { font-size: 14.5px; color: var(--muted); max-width: 60ch; margin: 0 0 26px; }
.contacts-block + .contacts-block { margin-top: 44px; }
.contacts-block .block-title { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }

/* ---------------- CTA-полоса ---------------- */
.cta-band {
  background: var(--ink); color: #fff;
  border-radius: 14px; padding: 56px 40px; text-align: center;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--hero-line) 1px, transparent 1px);
  background-size: 100% 44px; opacity: .25;
  mask-image: radial-gradient(circle at 50% 0%, black, transparent 70%);
}
.cta-band * { position: relative; }
.cta-band h2 { font-family: var(--heading); font-size: clamp(20px, 2.6vw, 28px); margin: 0 0 12px; color: #fff; }
.cta-band p { color: rgba(255,255,255,.6); margin: 0 0 26px; font-size: 15.5px; }
.cta-band .btn { background: var(--accent, #7CFF9E); color: #08130d; }
.cta-band .btn:hover { background: #93ffb2; }

/* ================= Футер ================= */
.footer { padding: 48px 0 32px; border-top: 1px solid var(--line); }
.footer-grid { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
.footer-disclaimer { font-size: 12.5px; color: var(--muted); max-width: 46ch; line-height: 1.6; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { font-size: 13.5px; color: var(--muted); }
.footer-links a:hover { color: var(--ink); }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted); font-family: var(--mono);
}

@media (max-width: 720px) {
  .section { padding: 56px 0; }
}

/* ---------- Блок «Из блога» на лендинге ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.blog-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.blog-card h3 { font-size: 17px; line-height: 1.35; color: var(--ink); margin: 0; }
.blog-card p { font-size: 14px; color: var(--muted); margin: 0; flex-grow: 1; }
.blog-card .blog-go { font-size: 14px; font-weight: 600; color: var(--brand); }
.blog-all { margin-top: 26px; font-size: 15px; }
.blog-all a { color: var(--brand); font-weight: 600; text-decoration: none; }
.blog-all a:hover { text-decoration: underline; }

/* ---------- Блок «Что входит в работу» ---------- */
.scope-grid {
  display: grid;
  /* Ровно две колонки: карточек четыре, и auto-fit раскладывал их 3+1 —
     одинокая карточка во втором ряду выглядит как недоделка. */
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 760px) {
  .scope-grid { grid-template-columns: 1fr; }
}
.scope-card {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.scope-card h3 {
  font-size: 18px;
  margin: 0 0 10px;
  color: var(--ink);
  letter-spacing: -.2px;
}
.scope-card p { margin: 0; color: var(--text); font-size: 15.5px; line-height: 1.7; }
.scope-note { margin-top: 22px; max-width: 860px; }

/* ---------- Посадочные страницы услуг (генерируются pages-src/build.py) ---------- */
.lp-body { background: var(--bg); }
.lp-header { background: var(--hero-bg); padding: 14px 0; }
.lp-header .inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lp-main { max-width: 900px; padding-top: 40px; padding-bottom: 64px; }
.lp-crumbs { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
.lp-crumbs a { color: var(--brand); text-decoration: none; }
.lp-h1 {
  font-family: var(--heading);
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.1; letter-spacing: -1.5px;
  color: var(--ink); margin: 0 0 16px;
}
.lp-lead { font-size: 18px; line-height: 1.65; color: var(--text); margin: 0 0 24px; max-width: 720px; }
.lp-cta-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.lp-cta-note { font-size: 14px; color: var(--muted); }
.lp-block { margin-top: 44px; }
.lp-block h2 {
  font-family: var(--heading);
  font-size: 24px; letter-spacing: -.5px; color: var(--ink); margin: 0 0 14px;
}
.lp-block p { font-size: 16px; line-height: 1.75; color: var(--text); margin: 0 0 14px; }
.lp-block b { color: var(--ink); }
.lp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 18px; }
.lp-plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; background: #fff; }
.lp-plan.featured { border-color: var(--brand); box-shadow: 0 6px 24px rgba(47,107,255,.08); }
.lp-plan-name { font-weight: 700; font-size: 17px; color: var(--ink); }
.lp-plan-for { font-size: 13.5px; color: var(--muted); margin: 4px 0 12px; min-height: 38px; }
.lp-price { font-family: var(--heading); font-size: 26px; color: var(--ink); }
.lp-period { font-size: 14px; color: var(--muted); font-family: var(--sans); }
.lp-fee { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.lp-feats { list-style: none; padding: 0; margin: 14px 0 18px; font-size: 14px; }
.lp-feats li { padding: 5px 0 5px 22px; position: relative; color: var(--text); }
.lp-feats li.yes::before { content: "✓"; position: absolute; left: 0; color: var(--accent-dim); font-weight: 700; }
.lp-feats li.no::before { content: "—"; position: absolute; left: 0; color: var(--muted); }
.lp-feats li.no { color: var(--muted); }
.lp-cta {
  margin-top: 48px; padding: 32px; border-radius: var(--radius);
  background: var(--hero-bg); color: var(--hero-ink); text-align: center;
}
.lp-cta h2 { font-family: var(--heading); font-size: 24px; margin: 0 0 8px; color: #fff; }
.lp-cta p { color: var(--hero-muted); margin: 0 0 18px; }
.lp-others { margin-top: 34px; font-size: 14.5px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }
.lp-others a { color: var(--brand); text-decoration: none; }
.scope-links { margin-top: 14px; font-size: 15px; color: var(--muted); }
.scope-links a { color: var(--brand); text-decoration: none; font-weight: 600; }
.scope-links a:hover { text-decoration: underline; }

/* Блок с главным возражением бизнеса — перед таблицей сравнения */
.objection {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px; margin-bottom: 26px;
}
.objection p { margin: 0; line-height: 1.65; color: var(--muted); }
.objection b { color: var(--ink); }
.objection-note { margin-top: 12px !important; font-size: 14.5px; }