@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/manrope-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;
}

/* ==========================================================================
   zoomarketing.ru — design tokens
   Цвета сняты пипеткой с макета первого экрана.
   Спецификация: 13-design-system.md
   ========================================================================== */

:root {
  /* --- Цвет: акцент ---------------------------------------------------- */
  --lime-500: #BFDC04;   /* заливки, primary-кнопка, графика */
  --lime-600: #A8C303;   /* hover primary */
  --lime-700: #6F7F00;   /* ЕДИНСТВЕННЫЙ лайм, допустимый для текста на светлом (4,6:1) */
  --lime-100: #F1F9D7;   /* светлые подложки, бейджи */

  /* --- Цвет: графит ---------------------------------------------------- */
  --ink-900: #091729;    /* тёмные кнопки, круги иконок, тёмные секции */
  --ink-800: #16263A;    /* тёмные карточки поверх фото */
  --ink-700: #081528;    /* заголовки */

  /* --- Цвет: нейтральные ------------------------------------------------ */
  --gray-500: #73767E;   /* основной серый текст */
  --gray-300: #ADB4BD;   /* обводка secondary-кнопки */
  --gray-200: #D6DAE2;   /* хайрлайны, обводки полей */

  /* --- Цвет: фоны ------------------------------------------------------- */
  --bg-000: #FFFFFF;
  --bg-100: #F7F7F9;
  --bg-200: #F3F5F9;
  --decor:  #EFF0F6;     /* водяной знак (лапа), декоративные формы */
  --page-gradient: linear-gradient(180deg, #F7F7F9 0%, #F3F5F9 100%);

  /* --- Цвет: служебное --------------------------------------------------- */
  --danger: #D64545;

  /* --- Инверсия для тёмных секций --------------------------------------- */
  --on-dark-text: #FFFFFF;
  --on-dark-muted: rgba(255, 255, 255, .64);
  --on-dark-border: rgba(255, 255, 255, .12);

  /* --- Типографика ------------------------------------------------------- */
  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --fs-h1: clamp(40px, 5.4vw, 84px);
  --fs-h2: clamp(32px, 3.4vw, 56px);
  --fs-h3: clamp(26px, 2.4vw, 40px);
  --fs-h4: clamp(22px, 1.8vw, 28px);
  --fs-metric: clamp(36px, 4vw, 64px);
  --fs-lead: clamp(18px, 1.3vw, 20px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-caption: 13px;

  --lh-tight: 1.02;
  --lh-heading: 1.15;
  --lh-body: 1.6;

  --tr-display: -0.025em;
  --tr-heading: -0.015em;
  --tr-caps: 0.08em;

  /* --- Пространство (шаг 8) ---------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  --container: 1280px;
  --gutter: 32px;
  --pad-x: 24px;              /* мобайл; 40px планшет, 64px десктоп */
  --section-y: 96px;

  /* --- Радиусы ------------------------------------------------------------ */
  --r-pill: 999px;
  --r-input: 14px;
  --r-card: 24px;
  --r-card-lg: 32px;
  --r-panel: 40px;

  /* --- Тени --------------------------------------------------------------- */
  --shadow-soft: 0 8px 24px -12px rgba(9, 23, 41, .10);
  --shadow-card: 0 24px 48px -24px rgba(9, 23, 41, .18);
  --border-hair: 1px solid var(--gray-200);

  /* --- Моушен ------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro: 150ms;
  --dur-base: 400ms;
  --dur-scene: 700ms;
  --stagger: 70ms;

  /* --- Управляющие размеры ------------------------------------------------ */
  --btn-h: 56px;
  --field-h: 56px;
  --header-h: 72px;
  --tap-min: 44px;
}

@media (min-width: 768px)  { :root { --pad-x: 40px; } }
@media (min-width: 1024px) { :root { --pad-x: 64px; --section-y: 128px; } }

/* --- Базовые правила, вытекающие из системы ------------------------------ */

body {
  background: var(--page-gradient);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

/* Числа не должны дёргаться при анимации счётчиков */
.metric, .fact-card__value, td[data-num] {
  font-variant-numeric: tabular-nums;
}

/* Фокус виден всегда. Лайм для фокуса не используем — на светлом не читается. */
:focus-visible {
  outline: 3px solid var(--ink-900);
  outline-offset: 2px;
}

/* Тёмные секции */
.section--dark {
  background: var(--ink-900);
  color: var(--on-dark-text);
}
.section--dark .muted { color: var(--on-dark-muted); }
.section--dark .accent { color: var(--lime-500); }  /* на тёмном лайм ~9:1 — можно текстом */

/* Уважение к настройкам движения */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--dur-micro) !important;
    scroll-behavior: auto !important;
  }
}