/* =====================================================================
   ТЕРМОС — Design System (single source of truth)
   Тёмная «cinema» гамма + оранжевый #FF6B00, glass, премиум-изинг.
   Vanilla CSS custom properties — портируется в тему WordPress как есть.
   Кириллица: Unbounded (display) + Manrope (body).
   ===================================================================== */

:root {
  /* ---------- Цвет: светлая тема (белый фон, оранжевый акцент) ---------- */
  --bg-deep:        #eef0f4;   /* самый дальний слой / тёмное чередование */
  --bg:             #ffffff;   /* базовый фон body */
  --bg-2:           #f5f6f9;   /* секции-чередование */
  --surface:        #ffffff;                     /* карточка */
  --surface-2:      #f7f8fb;                      /* карточка ховер/выше */
  --surface-solid:  #ffffff;                      /* непрозрачная карточка */
  --surface-border: rgba(15, 20, 30, 0.10);       /* hairline-бордер */
  --border-strong:  rgba(15, 20, 30, 0.18);

  /* ---------- Цвет: акцент (оранжевая шкала вокруг #FF6B00) ---------- */
  --accent-50:  #fff3e8;
  --accent-100: #ffe0c7;
  --accent-200: #ffc299;
  --accent-300: #ff9f5e;
  --accent-400: #ff8330;
  --accent-500: #ff6b00;   /* бренд */
  --accent-600: #e85f00;
  --accent-700: #c24e00;
  --accent:     var(--accent-500);
  --accent-2:   var(--accent-300);          /* светлый край градиента */
  --accent-grad: linear-gradient(135deg, var(--accent-500), var(--accent-300));
  --accent-glow: rgba(255, 107, 0, 0.45);
  --on-accent:  #1a0d00;                     /* текст на оранжевой кнопке */

  /* ---------- Цвет: текст (тёмный на белом) ---------- */
  --text:       #14161c;
  --text-dim:   #586074;
  --text-muted: #8a91a0;

  /* ---------- Цвет: семантика ---------- */
  --success: #2fbf71;
  --warning: #ffb020;
  --danger:  #ff5466;
  --info:    #4d9fff;

  /* ---------- Типографика ---------- */
  --font-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
  --font:         'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* модульная шкала (rem, база 16px) */
  --fs-eyebrow: 0.8125rem;   /* 13 — лейблы/надзаголовки */
  --fs-sm:      0.875rem;    /* 14 */
  --fs-base:    1rem;        /* 16 — тело */
  --fs-lg:      1.125rem;    /* 18 — крупное тело */
  --fs-xl:      1.375rem;    /* 22 — подзаголовок */
  --fs-h3:      clamp(1.375rem, 2.4vw, 1.75rem);
  --fs-h2:      clamp(1.875rem, 3.6vw, 2.75rem);
  --fs-h1:      clamp(2.25rem, 5vw, 3.5rem);
  --fs-display: clamp(2.6rem, 6vw, 4.6rem);  /* hero H1 / большие цифры */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.6;
  --tracking-tight: -0.03em;
  --tracking-label:  0.08em;

  /* ---------- Сетка / ширины ---------- */
  --maxw:        1180px;   /* контентный контейнер */
  --maxw-narrow: 760px;    /* лонгрид/текст */
  --gutter:      24px;

  /* ---------- Отступы (ритм 4/8) ---------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;
  --section-y: clamp(64px, 10vw, 128px);  /* вертикальный отступ секций */

  /* ---------- Радиусы ---------- */
  --radius-sm:   8px;
  --radius:      16px;   /* база (карточки/кнопки) */
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* ---------- Тени / glow ---------- */
  --shadow-sm:  0 1px 3px rgba(15, 20, 30, 0.08), 0 6px 16px rgba(15, 20, 30, 0.05);
  --shadow-md:  0 12px 32px -10px rgba(15, 20, 30, 0.14);
  --shadow-lg:  0 30px 70px -20px rgba(15, 20, 30, 0.20);
  --shadow-glow: 0 12px 34px -10px var(--accent-glow);

  /* ---------- Стекло (glass) ---------- */
  --glass-blur: 12px;

  /* ---------- Движение ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* премиум «expo.out» */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.18s;
  --dur-mid:  0.3s;
  --dur-slow: 0.5s;

  /* ---------- Слои ---------- */
  --z-bg: 0;  --z-base: 2;  --z-sticky: 40;  --z-header: 100;
  --z-overlay: 500;  --z-modal: 1000;
}

/* =====================================================================
   Базовая типографика
   ===================================================================== */
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 800;
  margin: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-dim);
}
.accent-text {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =====================================================================
   Компоненты-примитивы (классы .ds-*)
   ===================================================================== */

/* Контейнер */
.ds-wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.ds-wrap--narrow { max-width: var(--maxw-narrow); }

/* Кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: var(--radius-pill);
  font: 600 var(--fs-base)/1 var(--font);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              background var(--dur-fast), border-color var(--dur-fast);
}
.btn--primary { background: var(--accent-grad); color: var(--on-accent); box-shadow: var(--shadow-glow); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px var(--accent-glow); }
.btn--ghost {
  background: var(--surface); border-color: var(--surface-border);
  color: var(--text); backdrop-filter: blur(var(--glass-blur));
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-2); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Glass-карточка (iPhone frosted glass) */
.card {
  position: relative;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.28));
  backdrop-filter: blur(22px) saturate(185%);
  -webkit-backdrop-filter: blur(22px) saturate(185%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius); padding: var(--space-6);
  box-shadow: 0 14px 38px -16px rgba(15, 20, 30, 0.22),
              inset 0 1px 0 rgba(255, 255, 255, 0.95),
              inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid), background var(--dur-mid);
}
.card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 22px 48px -18px rgba(15, 20, 30, 0.24),
              inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Бейдж / чип */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--surface-border); background: var(--surface);
  font-size: var(--fs-eyebrow); color: var(--text-dim);
  backdrop-filter: blur(var(--glass-blur));
}

/* Поля форм */
.input, .textarea {
  width: 100%; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--surface-border);
  color: var(--text); font: 400 var(--fs-base) var(--font);
  transition: border-color var(--dur-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:focus, .textarea:focus { outline: none; border-color: var(--accent); }
.label { display: block; margin-bottom: 6px; font-size: var(--fs-sm); color: var(--text-dim); }

/* Числа-метрики (tabular) */
.metric { font-family: var(--font-display); font-weight: 800; color: var(--accent-2);
          font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* =====================================================================
   Доступность
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}