/* ==========================================================================
   ENTERSIGHT — бренд-система для сайта
   Источники: Entersight Brandbook (Figma), entersight.ru, ux-ui-layout-system
   Шрифт: Gilroy (Regular / Medium / SemiBold)
   Подключение: <link rel="stylesheet" href="/css/entersight-tokens.css">
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ШРИФТЫ
   Файлы положить в /fonts/. Пути ниже — относительно этого CSS-файла.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy_regular.woff2') format('woff2'),
       url('../fonts/gilroy_regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy_medium.woff2') format('woff2'),
       url('../fonts/gilroy_medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy_semibold.woff2') format('woff2'),
       url('../fonts/gilroy_semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. ТОКЕНЫ
   -------------------------------------------------------------------------- */
:root {
  /* --- Фирменные цвета (брендбук, стр. 16) --- */
  --es-blue: #00A3FF;          /* entersight blue — PANTONE 2995 C */
  --es-white: #FFFFFF;         /* WHITE C */
  --es-light-gray: #F3F3F3;    /* LIGHT GRAY — PANTONE 649 C */

  /* --- Цвета подбрендов (брендбук, стр. 17). Только как акцент раздела --- */
  --es-green: #00C798;         /* бухгалтерия — 3395 C */
  --es-purple: #7F00E3;        /* финтех — 266 C */
  --es-bright-green: #93D700;  /* логистика — 375 C */
  --es-bright-orange: #FF441B; /* контрагенты — 172 C */

  /* --- Нейтральные --- */
  --es-gray-700: #313131;      /* основной текст */
  --es-gray-600: #474747;      /* текст на цветном фоне, второй уровень */
  --es-gray-500: #6B6B6B;
  --es-gray-400: #888888;      /* второстепенный текст */
  --es-gray-300: #BCBCBC;      /* placeholder, disabled-текст */
  --es-gray-200: #DCDCDC;      /* границы */
  --es-gray-100: #F3F3F3;      /* заливка блоков */
  --es-gray-50:  #F8F8F9;      /* фон страницы */

  /* --- Системные (интерфейс, статусы) --- */
  --es-info: #00A3FF;
  --es-success: #00CB91;
  --es-alert: #E53835;
  --es-warning: #FFA800;

  /* --- Семантические роли (использовать в вёрстке в первую очередь) --- */
  --es-bg: var(--es-white);
  --es-bg-muted: var(--es-gray-50);
  --es-bg-fill: var(--es-gray-100);
  --es-bg-inverse: var(--es-gray-700);
  --es-text: var(--es-gray-700);
  --es-text-secondary: var(--es-gray-400);
  --es-text-placeholder: var(--es-gray-300);
  --es-text-inverse: var(--es-white);
  --es-border: var(--es-gray-200);
  --es-border-strong: var(--es-gray-300);
  --es-accent: var(--es-blue);
  --es-accent-hover: #0090E0;
  --es-accent-active: #007DC4;
  --es-accent-soft: #E5F6FF;
  --es-focus-ring: rgba(0, 163, 255, .35);

  /* --- Градиенты (брендбук, стр. 18) — только близкие оттенки --- */
  --es-gradient-blue: linear-gradient(135deg, #00A3FF 0%, #4FC3FF 100%);
  --es-gradient-green: linear-gradient(135deg, #00C798 0%, #6BE3C0 100%);
  --es-gradient-gray: linear-gradient(135deg, #F3F3F3 0%, #FFFFFF 100%);

  /* --- Типографика: семейство и начертания --- */
  --es-font: 'Gilroy', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --es-fw-regular: 400;   /* наборный текст */
  --es-fw-medium: 500;    /* мелкие заголовки, кнопки, меню */
  --es-fw-semibold: 600;  /* акцидентные заголовки */

  /* --- Типографическая шкала: font-size / line-height (desktop) --- */
  --es-h1-size: 48px;   --es-h1-lh: 56px;
  --es-h2-size: 36px;   --es-h2-lh: 44px;
  --es-h3-size: 28px;   --es-h3-lh: 36px;
  --es-h4-size: 24px;   --es-h4-lh: 32px;
  --es-h5-size: 20px;   --es-h5-lh: 28px;
  --es-body-lg-size: 18px; --es-body-lg-lh: 28px;
  --es-body-size: 16px;    --es-body-lh: 24px;
  --es-body-sm-size: 14px; --es-body-sm-lh: 20px;
  --es-caption-size: 12px; --es-caption-lh: 16px;
  --es-button-size: 16px;  --es-button-lh: 24px;

  --es-ls-tight: -0.02em;  /* H1–H2 */
  --es-ls-normal: -0.01em; /* H3–H5 */
  --es-ls-wide: 0.04em;    /* надзаголовки капсом */

  /* --- Отступы: шаг 4px --- */
  --es-space-1: 4px;
  --es-space-2: 8px;
  --es-space-3: 12px;
  --es-space-4: 16px;
  --es-space-5: 20px;
  --es-space-6: 24px;
  --es-space-7: 32px;
  --es-space-8: 40px;
  --es-space-9: 48px;
  --es-space-10: 64px;
  --es-space-11: 80px;
  --es-space-12: 96px;
  --es-space-13: 120px;

  /* --- Вертикальный ритм --- */
  --es-gap-inline: var(--es-space-2);    /* внутри компонента */
  --es-gap-title: var(--es-space-4);     /* заголовок → описание */
  --es-gap-related: var(--es-space-6);   /* описание → контент */
  --es-gap-block: var(--es-space-7);     /* блок → блок */
  --es-section-y: var(--es-space-12);    /* вертикальный отступ секции */
  --es-section-y-lg: var(--es-space-13); /* между крупными разделами */

  /* --- Сетка и контейнер --- */
  --es-container: 1200px;
  --es-columns: 12;
  --es-grid-gap: 24px;
  --es-page-x: 40px;         /* боковые отступы страницы */
  --es-measure: 68ch;        /* ширина основного текста, 60–80 знаков */
  --es-measure-narrow: 46ch; /* ширина заголовка */

  /* --- Скругления (мягкие) --- */
  --es-radius-sm: 8px;
  --es-radius-md: 12px;   /* кнопки, поля */
  --es-radius-lg: 16px;   /* карточки */
  --es-radius-xl: 24px;   /* крупные блоки, медиа */
  --es-radius-pill: 999px;

  /* --- Тени --- */
  --es-shadow-sm: 0 2px 8px rgba(49, 49, 49, .06);
  --es-shadow-md: 0 8px 24px rgba(49, 49, 49, .08);
  --es-shadow-lg: 0 16px 48px rgba(49, 49, 49, .10);

  /* --- Размеры контролов --- */
  --es-control-h: 52px;      /* кнопки и поля (desktop и mobile) */
  --es-control-h-sm: 44px;   /* компактные кнопки, мин. тап-таргет */
  --es-control-px: 28px;
  --es-border-w: 1px;
  --es-transition: 160ms ease;

  /* --- Иконки --- */
  --es-icon-sm: 16px;   /* при тексте 12–14 */
  --es-icon-md: 20px;   /* внутри кнопки, при тексте 16 */
  --es-icon-lg: 24px;   /* базовый интерфейсный размер */
  --es-icon-xl: 32px;   /* контентная иконка в карточке */
  --es-icon-2xl: 48px;  /* крупная контентная иконка */
  --es-icon-box: 48px;  /* плашка под контентную иконку */

  /* --- Логотип (брендбук, стр. 9–10) --- */
  --es-logo-min-w: 120px;    /* полная версия, цифра */
  --es-sign-min-w: 30px;     /* только знак, цифра */
  --es-logo-clearance: 0.6em; /* охранное поле ≈ высота «E» текстовой части */
}

/* Точки перелома (медиазапросы; переменные в @media не работают)
   desktop ≥1200 · laptop 1024–1199 · tablet 768–1023 · mobile ≤767 */

@media (max-width: 1199px) {
  :root { --es-page-x: 32px; --es-container: 100%; }
}

@media (max-width: 1023px) { /* tablet */
  :root {
    --es-h1-size: 40px; --es-h1-lh: 48px;
    --es-h2-size: 32px; --es-h2-lh: 40px;
    --es-h3-size: 26px; --es-h3-lh: 34px;
    --es-section-y: var(--es-space-11);
    --es-section-y-lg: var(--es-space-12);
    --es-page-x: 24px;
  }
}

@media (max-width: 767px) { /* mobile */
  :root {
    --es-h1-size: 32px; --es-h1-lh: 40px;
    --es-h2-size: 28px; --es-h2-lh: 36px;
    --es-h3-size: 24px; --es-h3-lh: 32px;
    --es-h4-size: 20px; --es-h4-lh: 28px;
    --es-h5-size: 18px; --es-h5-lh: 26px;
    --es-body-lg-size: 16px; --es-body-lg-lh: 24px;
    --es-columns: 4;
    --es-grid-gap: 16px;
    --es-page-x: 16px;
    --es-section-y: var(--es-space-9);
    --es-section-y-lg: var(--es-space-11);
    --es-gap-block: var(--es-space-6);
  }
}

/* --------------------------------------------------------------------------
   3. БАЗА
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--es-font);
  font-weight: var(--es-fw-regular);
  font-size: var(--es-body-size);
  line-height: var(--es-body-lh);
  color: var(--es-text);
  background: var(--es-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

::selection { background: var(--es-accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--es-accent);
  outline-offset: 2px;
  border-radius: var(--es-radius-sm);
}

/* --------------------------------------------------------------------------
   4. ТИПОГРАФИКА
   -------------------------------------------------------------------------- */
h1, .es-h1, h2, .es-h2, h3, .es-h3, h4, .es-h4, h5, .es-h5 {
  margin: 0;
  font-weight: var(--es-fw-semibold);
  text-wrap: pretty;
}
h1, .es-h1 { font-size: var(--es-h1-size); line-height: var(--es-h1-lh); letter-spacing: var(--es-ls-tight); text-wrap: balance; }
h2, .es-h2 { font-size: var(--es-h2-size); line-height: var(--es-h2-lh); letter-spacing: var(--es-ls-tight); text-wrap: balance; }
h3, .es-h3 { font-size: var(--es-h3-size); line-height: var(--es-h3-lh); letter-spacing: var(--es-ls-normal); }
h4, .es-h4 { font-size: var(--es-h4-size); line-height: var(--es-h4-lh); letter-spacing: var(--es-ls-normal); }
h5, .es-h5 { font-size: var(--es-h5-size); line-height: var(--es-h5-lh); letter-spacing: var(--es-ls-normal); font-weight: var(--es-fw-medium); }

p { margin: 0; }

.es-body-lg { font-size: var(--es-body-lg-size); line-height: var(--es-body-lg-lh); }
.es-body    { font-size: var(--es-body-size);    line-height: var(--es-body-lh); }
.es-body-sm { font-size: var(--es-body-sm-size); line-height: var(--es-body-sm-lh); }
.es-caption { font-size: var(--es-caption-size); line-height: var(--es-caption-lh); color: var(--es-text-secondary); }

/* Надзаголовок секции — «мы разложили / учёт по полочкам» */
.es-eyebrow {
  font-size: var(--es-body-sm-size);
  line-height: var(--es-body-sm-lh);
  font-weight: var(--es-fw-medium);
  letter-spacing: var(--es-ls-wide);
  text-transform: uppercase;
  color: var(--es-accent);
}

.es-muted { color: var(--es-text-secondary); }
.es-measure { max-width: var(--es-measure); }
.es-measure-narrow { max-width: var(--es-measure-narrow); }

/* Вертикальный ритм текстового блока: H → 16 → описание → 24 → контент */
.es-stack     { display: flex; flex-direction: column; gap: var(--es-gap-title); }
.es-stack-md  { display: flex; flex-direction: column; gap: var(--es-gap-related); }
.es-stack-lg  { display: flex; flex-direction: column; gap: var(--es-gap-block); }

/* --------------------------------------------------------------------------
   5. ССЫЛКИ
   -------------------------------------------------------------------------- */
a { color: var(--es-accent); text-decoration: none; transition: color var(--es-transition); }
a:hover { color: var(--es-accent-hover); }
a:active { color: var(--es-accent-active); }

.es-link { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.es-link:hover { border-bottom-color: transparent; }

.es-link-quiet { color: var(--es-text); }
.es-link-quiet:hover { color: var(--es-accent); }

/* Ссылка «подробнее →» */
.es-link-arrow {
  display: inline-flex; align-items: center; gap: var(--es-space-2);
  font-weight: var(--es-fw-medium);
}
.es-link-arrow::after { content: '→'; transition: transform var(--es-transition); }
.es-link-arrow:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. КНОПКИ — высота 52, скругление 12
   -------------------------------------------------------------------------- */
.es-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--es-space-2);
  height: var(--es-control-h);
  padding: 0 var(--es-control-px);
  border: var(--es-border-w) solid transparent;
  border-radius: var(--es-radius-md);
  font-family: var(--es-font);
  font-size: var(--es-button-size);
  line-height: var(--es-button-lh);
  font-weight: var(--es-fw-medium);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--es-transition), color var(--es-transition),
              border-color var(--es-transition), box-shadow var(--es-transition);
}
.es-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--es-focus-ring); }

.es-btn--primary { background: var(--es-accent); color: #fff; }
.es-btn--primary:hover { background: var(--es-accent-hover); color: #fff; }
.es-btn--primary:active { background: var(--es-accent-active); }

.es-btn--secondary { background: transparent; color: var(--es-text); border-color: var(--es-border-strong); }
.es-btn--secondary:hover { border-color: var(--es-accent); color: var(--es-accent); }

.es-btn--ghost { background: var(--es-bg-fill); color: var(--es-text); }
.es-btn--ghost:hover { background: #E9E9EA; }

.es-btn--inverse { background: #fff; color: var(--es-gray-700); }
.es-btn--inverse:hover { background: var(--es-gray-100); }

.es-btn--sm { height: var(--es-control-h-sm); padding: 0 var(--es-space-5); }
.es-btn--block { width: 100%; }
.es-btn[disabled], .es-btn--disabled {
  background: var(--es-gray-100); color: var(--es-text-placeholder);
  border-color: transparent; cursor: not-allowed;
}

@media (max-width: 767px) {
  .es-btn { width: 100%; }
  .es-btn--auto { width: auto; }
}

/* --------------------------------------------------------------------------
   7. ПОЛЯ ФОРМ
   -------------------------------------------------------------------------- */
/* Граница поля = внутренний ring (box-shadow inset), фокус —
   ring 2px цветом акцента. Никаких border-* — геометрия не «дёргается».   */
.es-field { display: flex; flex-direction: column; gap: var(--es-space-2); }
.es-field__row { display: flex; align-items: center; gap: var(--es-space-2); justify-content: space-between; }

.es-label {
  font-size: var(--es-body-sm-size);
  line-height: var(--es-body-sm-lh);
  font-weight: var(--es-fw-medium);
  color: var(--es-gray-700);
}
.es-label__optional { font-weight: var(--es-fw-regular); color: var(--es-text-secondary); }

.es-input, .es-textarea, .es-select {
  width: 100%;
  height: var(--es-control-h);
  padding: 0 var(--es-space-4);
  font-family: var(--es-font);
  font-size: var(--es-body-size);
  line-height: var(--es-body-lh);
  color: var(--es-text);
  background: var(--es-bg);
  border: 0;
  border-radius: var(--es-radius-md);
  box-shadow: inset 0 0 0 1px var(--es-border-strong);
  transition: box-shadow var(--es-transition), background var(--es-transition), color var(--es-transition);
  appearance: none;
}
.es-textarea { height: auto; min-height: 120px; padding: var(--es-space-3) var(--es-space-4); resize: vertical; }
.es-select {
  padding-right: var(--es-space-9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23888888'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--es-space-4) center;
  background-size: 20px 20px;
}

.es-input::placeholder, .es-textarea::placeholder { color: var(--es-text-placeholder); }
.es-input:hover, .es-textarea:hover, .es-select:hover { box-shadow: inset 0 0 0 1px var(--es-gray-400); }

.es-input:focus, .es-textarea:focus, .es-select:focus,
.es-input:focus-visible, .es-textarea:focus-visible, .es-select:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--es-accent);
}

/* Ошибка */
.es-input--error, .es-textarea--error, .es-select--error { box-shadow: inset 0 0 0 1px var(--es-alert); }
.es-input--error::placeholder { color: #F0A3A1; }
.es-input--error:hover, .es-textarea--error:hover { box-shadow: inset 0 0 0 1px var(--es-alert); }
.es-input--error:focus, .es-textarea--error:focus, .es-select--error:focus { box-shadow: inset 0 0 0 2px var(--es-alert); }

/* Успех */
.es-input--success { box-shadow: inset 0 0 0 1px var(--es-success); }
.es-input--success:focus { box-shadow: inset 0 0 0 2px var(--es-success); }

/* Только для чтения / выключено */
.es-input[readonly] { background: var(--es-gray-50); box-shadow: inset 0 0 0 1px var(--es-border); }
.es-input[disabled], .es-textarea[disabled], .es-select[disabled] {
  background: var(--es-gray-50);
  color: var(--es-text-placeholder);
  box-shadow: inset 0 0 0 1px var(--es-border);
  cursor: not-allowed;
}

/* Поле с иконкой или приставкой: обёртка держит ring, input внутри прозрачный */
.es-input-group {
  display: flex; align-items: center; gap: var(--es-space-2);
  height: var(--es-control-h);
  padding: 0 var(--es-space-4);
  background: var(--es-bg);
  border-radius: var(--es-radius-md);
  box-shadow: inset 0 0 0 1px var(--es-border-strong);
  transition: box-shadow var(--es-transition);
  color: var(--es-text-secondary);
}
.es-input-group:focus-within { box-shadow: inset 0 0 0 2px var(--es-accent); }
.es-input-group--error { box-shadow: inset 0 0 0 1px var(--es-alert); }
.es-input-group > .es-input,
.es-input-group > input {
  height: 100%; padding: 0; box-shadow: none; background: transparent; border-radius: 0; flex: 1 1 auto;
  font-family: var(--es-font); font-size: var(--es-body-size); line-height: var(--es-body-lh); color: var(--es-text); border: 0;
}
.es-input-group > input:focus { outline: none; box-shadow: none; }
.es-input-group__addon { flex: none; font-size: var(--es-body-size); color: var(--es-text-secondary); white-space: nowrap; }

/* Чекбокс и радио */
.es-check { display: flex; align-items: flex-start; gap: var(--es-space-3); }
.es-check input[type="checkbox"], .es-check input[type="radio"] {
  appearance: none;
  width: 20px; height: 20px; margin: 2px 0 0; flex: none;
  background: var(--es-bg);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--es-border-strong);
  transition: background var(--es-transition), box-shadow var(--es-transition);
  cursor: pointer;
}
.es-check input[type="radio"] { border-radius: 50%; }
.es-check input:checked {
  background: var(--es-accent) no-repeat center / 20px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5 8.4 13.4 14.5 6.9'/%3E%3C/svg%3E");
  box-shadow: none;
}
.es-check input[type="radio"]:checked { background-image: none; box-shadow: inset 0 0 0 6px var(--es-bg), inset 0 0 0 20px var(--es-accent); }
.es-check input:focus-visible { outline: 2px solid var(--es-accent); outline-offset: 2px; }
.es-check input[disabled] { background: var(--es-gray-100); box-shadow: inset 0 0 0 1px var(--es-border); cursor: not-allowed; }
.es-check__text { font-size: var(--es-body-size); line-height: var(--es-body-lh); }
.es-check__hint { font-size: var(--es-body-sm-size); line-height: var(--es-body-sm-lh); color: var(--es-text-secondary); }

.es-hint { font-size: var(--es-body-sm-size); line-height: var(--es-body-sm-lh); color: var(--es-text-secondary); }
.es-error { font-size: var(--es-body-sm-size); line-height: var(--es-body-sm-lh); color: var(--es-alert); }
.es-counter { font-size: var(--es-caption-size); line-height: var(--es-caption-lh); color: var(--es-text-secondary); }

/* Индикаторы состояния внутри поля — Heroicons 20 solid, inline SVG:
   ошибка — exclamation-circle (color: var(--es-alert)),
   успех  — check-circle (color: var(--es-success)),
   стрелка select — chevron-down. Галочка чекбокса — короткий штрих,
   а не иконка — так она точно центруется в квадрате 20×20.
   Другие наборы в формах не используются.                                  */
.es-input-icon { width: var(--es-icon-md); height: var(--es-icon-md); flex: none; display: block; fill: currentColor; }
.es-input-icon--error { color: var(--es-alert); }
.es-input-icon--success { color: var(--es-success); }

/* --------------------------------------------------------------------------
   8. КАРТОЧКИ
   -------------------------------------------------------------------------- */
.es-card {
  display: flex;
  flex-direction: column;
  gap: var(--es-space-4);
  padding: var(--es-space-7);
  background: var(--es-bg);
  border: var(--es-border-w) solid var(--es-border);
  border-radius: var(--es-radius-lg);
}
.es-card--fill { background: var(--es-bg-fill); border-color: transparent; }
.es-card--raised { border-color: transparent; box-shadow: var(--es-shadow-md); }
.es-card--interactive { transition: box-shadow var(--es-transition), transform var(--es-transition); cursor: pointer; }
.es-card--interactive:hover { box-shadow: var(--es-shadow-md); transform: translateY(-2px); }
.es-card--compact { padding: var(--es-space-6); gap: var(--es-space-3); }

.es-card__icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--es-radius-md);
  background: var(--es-accent-soft);
  color: var(--es-accent);
}
.es-card__title { font-size: var(--es-h5-size); line-height: var(--es-h5-lh); font-weight: var(--es-fw-medium); }
.es-card__text { font-size: var(--es-body-size); line-height: var(--es-body-lh); color: var(--es-text-secondary); }

/* Чип / тег */
.es-chip {
  display: inline-flex; align-items: center; gap: var(--es-space-2);
  height: 32px; padding: 0 var(--es-space-3);
  border-radius: var(--es-radius-sm);
  background: var(--es-bg-fill);
  font-size: var(--es-body-sm-size); line-height: var(--es-body-sm-lh);
  font-weight: var(--es-fw-medium); color: var(--es-gray-600);
}

/* Список с маркерами-галочками */
.es-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--es-space-3); }
.es-list li { position: relative; padding-left: var(--es-space-6); }
.es-list li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--es-accent);
}

/* --------------------------------------------------------------------------
   9. СЕТКА, КОНТЕЙНЕР, СЕКЦИИ
   -------------------------------------------------------------------------- */
.es-container {
  width: 100%;
  max-width: var(--es-container);
  margin-inline: auto;
  padding-inline: var(--es-page-x);
}

.es-grid {
  display: grid;
  grid-template-columns: repeat(var(--es-columns), minmax(0, 1fr));
  gap: var(--es-grid-gap);
}

/* Ширина в колонках: .es-col-6 и т.д. На mobile всё в одну колонку. */
.es-col-1  { grid-column: span 1; }
.es-col-2  { grid-column: span 2; }
.es-col-3  { grid-column: span 3; }
.es-col-4  { grid-column: span 4; }
.es-col-5  { grid-column: span 5; }
.es-col-6  { grid-column: span 6; }
.es-col-7  { grid-column: span 7; }
.es-col-8  { grid-column: span 8; }
.es-col-9  { grid-column: span 9; }
.es-col-10 { grid-column: span 10; }
.es-col-12 { grid-column: span 12; }

@media (max-width: 1023px) {
  .es-col-3 { grid-column: span 6; }
  .es-col-4 { grid-column: span 6; }
  .es-col-5, .es-col-7, .es-col-8, .es-col-9, .es-col-10 { grid-column: span 12; }
}
@media (max-width: 767px) {
  [class*='es-col-'] { grid-column: span 4; }
}

/* Авто-раскладка карточек, когда точное число колонок не важно */
.es-cards { display: grid; gap: var(--es-grid-gap); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.es-section { padding-block: var(--es-section-y); }
.es-section--lg { padding-block: var(--es-section-y-lg); }
.es-section--muted { background: var(--es-bg-muted); }
.es-section--inverse { background: var(--es-bg-inverse); color: var(--es-text-inverse); }
.es-section--inverse .es-card__text, .es-section--inverse .es-muted { color: rgba(255,255,255,.7); }

.es-section__head { display: flex; flex-direction: column; gap: var(--es-gap-title); margin-bottom: var(--es-gap-block); max-width: var(--es-measure); }

/* --------------------------------------------------------------------------
   10. ИКОНКИ
   Интерфейсные — Heroicons (github.com/tailwindlabs/heroicons):
     Outline 24 по умолчанию, Solid 20 для активных состояний. Micro не используем.
     Меню, кнопки, поля, аккордеоны, стрелки, статусы, закрытие, поиск.
   Контентные — Phosphor (phosphoricons.com):
     Regular для 20–24, Duotone для 32–48. Один вариант начертания на страницу.
     Карточки услуг, преимущества, интеграции, разделы функциональности.
   Наборы не смешиваются внутри одной секции. Только inline SVG / спрайт
   с currentColor — никаких PNG. stroke-width у outline не правим.
   -------------------------------------------------------------------------- */
.es-icon {
  width: var(--es-icon-lg); height: var(--es-icon-lg);
  flex: none; display: block;
  fill: none; stroke: currentColor; /* Heroicons outline */
  color: inherit;
}
.es-icon--sm { width: var(--es-icon-sm); height: var(--es-icon-sm); }
.es-icon--md { width: var(--es-icon-md); height: var(--es-icon-md); }
.es-icon--xl { width: var(--es-icon-xl); height: var(--es-icon-xl); }
.es-icon--2xl { width: var(--es-icon-2xl); height: var(--es-icon-2xl); }

/* Контентная иконка Phosphor: заливка, не обводка */
.es-icon--content { fill: currentColor; stroke: none; }

/* Иконка рядом с текстом: gap 8, размер = line-height строки */
.es-icon-text { display: inline-flex; align-items: center; gap: var(--es-space-2); }

/* Плашка под контентную иконку (48×48, радиус 12) */
.es-icon-box {
  width: var(--es-icon-box); height: var(--es-icon-box);
  flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--es-radius-md);
  background: var(--es-accent-soft);
  color: var(--es-accent);
}
.es-icon-box--green  { background: #E5F9F4; color: var(--es-green); }
.es-icon-box--purple { background: #F2E5FD; color: var(--es-purple); }
.es-icon-box--lime   { background: #F4FBE5; color: #6FA300; }
.es-icon-box--orange { background: #FFEBE7; color: var(--es-bright-orange); }
.es-icon-box--plain  { background: var(--es-bg-fill); color: var(--es-text); }

/* --------------------------------------------------------------------------
   11. ЛОГОТИП
   Правила: не менять пропорции и цвета; охранное поле ≈ высота «E»;
   минимум 120px (лого) / 30px (знак); на цветном фоне — белая версия.
   -------------------------------------------------------------------------- */
.es-logo { display: inline-block; min-width: var(--es-logo-min-w); margin: var(--es-logo-clearance); }
.es-logo img, .es-logo svg { height: auto; width: 100%; }
.es-logo--sign { min-width: var(--es-sign-min-w); }