/* Визуальная система по скиллу landing-page-design (.claude/skills/landing-page-design).
   Один шрифт — Manrope. Размеры — шкала Tailwind, отступы — таблица B2, радиусы — Tailwind,
   тёмные фоны — только из палитры B4. Фоны однотонные, градиент — только на тексте заголовка первого экрана.
   Отступление по ТЗ: интерактивные элементы не ниже 44 px. */

@font-face { font-family: 'Manrope'; font-weight: 400; font-display: swap; src: url('../fonts/manrope-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-weight: 400; font-display: swap; src: url('../fonts/manrope-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-weight: 500; font-display: swap; src: url('../fonts/manrope-cyrillic-500-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-weight: 500; font-display: swap; src: url('../fonts/manrope-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-weight: 600; font-display: swap; src: url('../fonts/manrope-cyrillic-600-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-weight: 600; font-display: swap; src: url('../fonts/manrope-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-weight: 700; font-display: swap; src: url('../fonts/manrope-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-weight: 700; font-display: swap; src: url('../fonts/manrope-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --font: 'Manrope', system-ui, sans-serif;

  /* Цвет. Тёмные — только палитра скилла B4 */
  --dark-0: #000000;
  --dark-1: #181818;
  --dark-2: #1F1F1F;
  --dark-3: #272727;
  --dark-4: #313131;
  --on-dark: #FFFFFF;
  --on-dark-2: #A3A3A3;      /* вторичный текст на тёмном */
  --line-dark: #313131;
  --light-0: #FFFFFF;
  --light-1: #F5F5F5;
  --light-2: #EBEBEB;
  --ink: #0A0A0A;
  --ink-2: #5C5C5C;          /* вторичный текст на светлом, 6.6:1 на белом */
  --line-light: #E5E5E5;
  --line-light-strong: #A3A3A3;
  --accent: #FFF705;         /* фирменный кислотно-жёлтый PNHD */
  --on-accent: #000000;
  --success: #3F8F4E;
  --danger: #C2271D;
  --danger-bg: #FDECEA;
  --warn-bg: #FFF9C2;
  --warn-ink: #4D4A00;
  --hero-ink-from: #FFFFFF;  /* B5: градиент заголовка на тёмном */
  --hero-ink-to: #9B9B9B;

  /* Отступы — только таблица B2 */
  --s-0: 0; --s-25: 2px; --s-50: 4px; --s-75: 8px; --s-100: 12px; --s-200: 16px; --s-300: 24px;
  --s-400: 32px; --s-500: 40px; --s-600: 48px; --s-700: 64px; --s-800: 80px; --s-900: 96px;

  /* Радиусы — шкала Tailwind */
  --r-sm: 2px; --r: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-2xl: 16px; --r-3xl: 24px; --r-full: 9999px;

  /* Движение — B7 */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 500ms;
  --dur-fast: 300ms;

  --touch: 44px;   /* ТЗ: минимальная высота сенсорных целей */
  --control: 48px;
  --page-max: 1280px;
  --gutter: var(--s-200);
}

/* --- Именованные стили текста (B1). Значения — шаг шкалы и его межстрочный интервал. */
.heading-1 { font-size: 60px; line-height: 60px; font-weight: 600; }
.heading-2 { font-size: 48px; line-height: 48px; font-weight: 600; }
.heading-3 { font-size: 36px; line-height: 40px; font-weight: 600; }
.heading-4 { font-size: 30px; line-height: 36px; font-weight: 600; }
.heading-5 { font-size: 24px; line-height: 32px; font-weight: 600; }
.heading-6 { font-size: 20px; line-height: 28px; font-weight: 600; }
.title-1 { font-size: 20px; line-height: 28px; font-weight: 500; }
.title-2 { font-size: 18px; line-height: 28px; font-weight: 500; }
.title-3 { font-size: 16px; line-height: 24px; font-weight: 500; }
.title-4 { font-size: 14px; line-height: 20px; font-weight: 500; }
.title-5 { font-size: 12px; line-height: 16px; font-weight: 500; }
.body-1 { font-size: 16px; line-height: 24px; font-weight: 600; }
.body-2 { font-size: 16px; line-height: 24px; font-weight: 500; }
.body-3 { font-size: 16px; line-height: 24px; font-weight: 400; }
.body-4 { font-size: 14px; line-height: 20px; font-weight: 600; }
.body-5 { font-size: 14px; line-height: 20px; font-weight: 500; }
.body-6 { font-size: 14px; line-height: 20px; font-weight: 400; }
.button-lg { font-size: 18px; line-height: 28px; font-weight: 600; }
.button-md { font-size: 16px; line-height: 24px; font-weight: 600; }
.button-sm { font-size: 14px; line-height: 20px; font-weight: 600; }
.caption-1 { font-size: 14px; line-height: 20px; font-weight: 500; }
.caption-2 { font-size: 14px; line-height: 20px; font-weight: 400; }
.caption-3 { font-size: 12px; line-height: 16px; font-weight: 600; }
.caption-4 { font-size: 12px; line-height: 16px; font-weight: 500; }
.caption-5 { font-size: 12px; line-height: 16px; font-weight: 400; }

/* Без висячих слов (B1) */
h1, h2, h3, .heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

/* Иконки Phosphor из спрайта */
.icon { width: 20px; height: 20px; flex: none; fill: currentColor; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }

/* Появление секций при прокрутке (B7): подъём на 32 px и проявление, один раз */
.reveal { opacity: 0; transform: translateY(var(--s-400)); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: opacity var(--dur-fast) var(--ease); }
}