/* Делай Движ — дизайн-токены лендинга.
   Источник: «Брендбук — визуал» (08.11.2026) и замеры макетов (09.11.2026).
   Шрифты положить локально в /fonts (woff2, Google Fonts, лицензия OFL), не подключать с серверов Google. */

@font-face { font-family: "Sofia Sans Extra Condensed"; src: url("../fonts/SofiaSansExtraCondensed-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Jura"; src: url("../fonts/Jura-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Jura"; src: url("../fonts/Jura-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Pangolin"; src: url("../fonts/Pangolin-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* Цвета: 60 % крем, 30 % оранжевый, 10 % хаки */
  --cream: #FFF9EB;        /* фон страниц, карточки, шапка */
  --cream-shade: #F4ECDC;  /* складки бумаги, разделители */
  --paper-white: #FEFDF7;  /* светлый текст на хаки */
  --orange: #FF7700;       /* акцент, кнопки, фон блоков */
  --orange-deep: #EB6A03;  /* жёсткие тени, hover */
  --orange-red: #FD3A01;   /* полоска «гофрокартон» за фото ведущих */
  --khaki: #454335;        /* основной тёмный: текст, тёмные блоки */
  --khaki-deep: #3B392C;   /* складки на тёмной бумаге */
  --ink: #2A2118;          /* затемнение под модальным окном */
  --stone: #CFCAB7;        /* приглушённые карточки */

  /* Шрифты */
  --font-head: "Sofia Sans Extra Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Jura", "Exo 2", system-ui, sans-serif;
  --font-hand: "Pangolin", "Neucha", cursive;

  /* Шкала текста: телефон → компьютер */
  --fs-h1: clamp(56px, 9vw, 120px);
  --fs-h2: clamp(40px, 5.5vw, 72px);
  --fs-h3: clamp(24px, 2.4vw, 32px);
  --fs-body: clamp(18px, 1.4vw, 20px);  /* не меньше 18 px: аудитория 40+ */
  --fs-hand: clamp(20px, 2vw, 28px);
  --lh-head: 0.9;
  --lh-body: 1.55;
  --measure: 65ch;

  /* Формы и тени */
  --radius-card: 26px;
  --radius-pill: 999px;
  --border-w: 2.5px;
  --shadow-hard: 0 7px 0 var(--orange-deep);  /* под кремовыми карточками и оранжевыми кнопками */
  --shadow-hard-dark: 0 7px 0 var(--khaki);   /* под оранжевыми карточками */
  --btn-h: 56px;                              /* минимум 48 px */

  /* Сетка */
  --gutter: 16px;
  --container: 1200px;
}

/* Контраст (WCAG):
   крем на оранжевом ≈ 2,5:1 — только гигантские заголовки;
   хаки на оранжевом ≈ 3,7:1 — только крупно (от 24 px жирным), длинные абзацы на оранжевом не ставить;
   хаки на креме ≈ 9,5:1 — основной текст. */

body { background: var(--cream); color: var(--khaki); font: 500 var(--fs-body)/var(--lh-body) var(--font-body); }
h1, h2, h3 { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; line-height: var(--lh-head); }
mark { background: none; color: var(--orange); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--btn-h); padding: 0 32px;
  border-radius: var(--radius-pill); font: 800 22px/1 var(--font-head); text-transform: uppercase;
  border: var(--border-w) solid var(--khaki); transition: transform .12s, box-shadow .12s; }
.btn--primary { background: var(--orange); color: var(--khaki); box-shadow: 0 6px 0 var(--khaki); }
.btn--dark { background: var(--khaki); color: var(--paper-white); box-shadow: 0 6px 0 var(--ink); }
.btn--outline { background: transparent; color: var(--khaki); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--khaki); }

.card { background: var(--cream); border: var(--border-w) solid var(--khaki); border-radius: var(--radius-card); box-shadow: var(--shadow-hard); padding: 28px; }
.sticker { font-family: var(--font-hand); border: 1.5px dashed var(--khaki); border-radius: var(--radius-pill); padding: 2px 12px; transform: rotate(-2deg); display: inline-block; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }