/* ============================================================
   A.ION-FIT — DESIGN TOKENS v1.1 (FINAL)
   Изменения к v1.0 (все — по итогам ревизии контраста и техпроверки):
   1. Амплитуда светлого градиента снижена (.55 -> .30) — текст на фоне проходит AA.
   2. Тёмный градиент обрезан на #2C1A62 — оранжевый держит AA во всём диапазоне.
   3. Saira Condensed удалена из стека (нет кириллицы). Fallback — PT Sans Narrow.
   4. Плашка «Спорт для жизни» инвертируется в dark и .surface-deep (было 1.04:1).
   5. Срез угла разведён с тенью и фокусом (двухслойная схема .cut / .cut__inner).
   6. background-attachment: fixed убран (баг iOS + перерисовка на Android).
   7. Добавлен слой зерна (запечённый тайл) — против бандинга и «CSS-градиента».
   8. font-variant-numeric: tabular-nums вынесен на все ценовые классы.
   9. Курсив выключен как приём (нет кириллического курсива в бесплатной паре).
   ИСТОЧНИК ИСТИНЫ ПО ЦВЕТУ — ЭТОТ ФАЙЛ. Расхождения в других документах — ошибка.
   ============================================================ */

/* ------------------------------------------------------------
   1. ПРИМИТИВЫ — ЦВЕТ
   ------------------------------------------------------------ */
:root {
  /* --- Violet (бренд). Единый тон OKLCH H=288. Логотип = 600 --- */
  --violet-50:  #F6F6FF;
  --violet-100: #EBEAFF;
  --violet-200: #D8D6FE;
  --violet-300: #C1BCF9;
  --violet-400: #A097E7;
  --violet-500: #796ACE;
  --violet-600: #5640A8;  /* ← КАНОН ЛОГОТИПА (был #555175) */
  --violet-700: #442D8D;  /* ← КАНОН ЗАГОЛОВКОВ */
  --violet-800: #33206F;
  --violet-900: #251653;
  --violet-950: #150C34;
  --violet-legacy-logo: #555175; /* только сверка со старыми макетами */

  /* --- Orange (второй бренд-цвет). H=42 --- */
  --orange-50:  #FFF0EA;
  --orange-100: #FFE3D8;
  --orange-200: #FFCAB5;
  --orange-300: #FFAD8D;
  --orange-400: #FC8B5D;
  --orange-500: #F26A2D;  /* канон */
  --orange-600: #D9581B;
  --orange-700: #BE4A0E;
  --orange-800: #963A0B;  /* orange-ink: оранжевый как цвет буквы, AA */
  --orange-900: #712D0E;
  --orange-950: #401705;

  /* --- Neutral. Биполярная шкала: тёплый светлый край -> холодный тёмный --- */
  --neutral-50:  #FEF6F2;
  --neutral-100: #F8EEEA;
  --neutral-200: #E9DEDD;
  --neutral-300: #D2CACC;
  --neutral-400: #AEA8B0;
  --neutral-500: #87848E;
  --neutral-600: #66646F;
  --neutral-700: #494753;
  --neutral-800: #302E3C;
  --neutral-900: #191626;  /* ink, плашка */
  --neutral-950: #0A0815;
  --white: #FEFEFE;
  --black: #000000;

  /* --- Semantic (ТОЛЬКО UI-состояния форм. В контенте не используются) --- */
  --success-300: #89D293; --success-500: #39A552; --success-700: #10712E; --success-50: #EBF7EC;
  --warning-300: #E5B562; --warning-500: #B5820C; --warning-700: #7A5604; --warning-50: #FBF2E5;
  --danger-300:  #FFA09C; --danger-500:  #E75157; --danger-700:  #A42A32; --danger-50:  #FFEFEE;
  --info-300:    #71C8FF; --info-500:    #0096D8; --info-700:    #006592; --info-50:    #E8F6FF;
}

/* ------------------------------------------------------------
   2. ГРАДИЕНТЫ
   ------------------------------------------------------------ */
:root {
  --grad-angle: 145deg;

  /* 2.1 Светлая поверхность. Самая тёмная точка ~#B6AACD:
     text-primary 8.1:1 / text-secondary 4.2:1 / heading 4.8:1 — все AA.
     text-muted и accent на градиент НЕ ставятся (2.7:1 и 1.4:1). */
  --grad-surface-light:
    radial-gradient(120% 90% at 100% 0%,
      rgba(51, 32, 111, 0.30) 0%,
      rgba(121, 106, 206, 0.18) 32%,
      rgba(121, 106, 206, 0.00) 62%),
    radial-gradient(95% 80% at 88% 34%,
      rgba(160, 151, 231, 0.26) 0%,
      rgba(160, 151, 231, 0.00) 60%),
    radial-gradient(110% 85% at 58% 108%,
      rgba(243, 218, 221, 0.85) 0%,
      rgba(243, 218, 221, 0.00) 65%),
    linear-gradient(var(--grad-angle),
      #FFF9F5 0%, #FDF2EE 38%, #F6ECF7 74%, #EDE6FC 100%);

  /* 2.2 Тёмная поверхность. Светлый конец обрезан на #2C1A62,
     чтобы orange-400 держал >=5.7:1 во всём диапазоне. */
  --grad-surface-deep:
    radial-gradient(100% 85% at 8% 100%,
      rgba(242, 106, 45, 0.16) 0%,
      rgba(242, 106, 45, 0.00) 58%),
    radial-gradient(120% 95% at 92% 4%,
      rgba(121, 106, 206, 0.42) 0%,
      rgba(86, 64, 168, 0.16) 40%,
      rgba(86, 64, 168, 0.00) 70%),
    linear-gradient(var(--grad-angle),
      #150C34 0%, #1C1140 38%, #251653 72%, #2C1A62 100%);

  --grad-accent: linear-gradient(135deg, #FC8B5D 0%, #F26A2D 45%, #D9581B 100%);

  --grad-hairline:
    linear-gradient(90deg,
      rgba(86, 64, 168, 0.00) 0%, rgba(86, 64, 168, 0.35) 18%,
      rgba(242, 106, 45, 0.55) 50%, rgba(86, 64, 168, 0.35) 82%,
      rgba(86, 64, 168, 0.00) 100%);

  --grad-scrim-deep:
    linear-gradient(180deg,
      rgba(21, 12, 52, 0.00) 0%, rgba(21, 12, 52, 0.55) 55%, rgba(21, 12, 52, 0.88) 100%);

  /* Зерно: ЗАПЕЧЁННЫЙ тайл 128x128, не feTurbulence.
     Подложить путь после сборки ассетов. */
  --noise-tile: url("/img/noise-128.png");
  --noise-opacity: .03;
}

/* ------------------------------------------------------------
   3. ТИПОГРАФИКА
   ------------------------------------------------------------ */
:root {
  /* Saira Condensed УДАЛЕНА: покрытие latin/latin-ext/vietnamese, кириллицы нет. */
  --font-display: "Oswald", "PT Sans Narrow", "Arial Narrow", sans-serif;
  --font-text: "Inter", "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "Cascadia Mono", monospace;

  /* Размеры. Верхняя граница display опущена под русские заголовки. */
  --fs-display: clamp(2.75rem, 1.55rem + 5.30vw, 6.00rem);  /* 44 → 96 */
  --fs-h1:      clamp(2.00rem, 1.30rem + 3.10vw, 3.75rem);  /* 32 → 60 */
  --fs-h2:      clamp(1.63rem, 1.20rem + 1.90vw, 2.75rem);  /* 26 → 44 */
  --fs-h3:      clamp(1.375rem, 1.07rem + 1.36vw, 2.19rem); /* 22 → 35 */
  --fs-h4:      clamp(1.188rem, 1.00rem + 0.79vw, 1.63rem); /* 19 → 26 */
  --fs-h5:      clamp(1.063rem, 0.96rem + 0.46vw, 1.31rem);
  --fs-h6:      clamp(1.000rem, 0.94rem + 0.28vw, 1.13rem);
  --fs-body-lg: clamp(1.125rem, 1.03rem + 0.42vw, 1.375rem);
  --fs-body:    clamp(1.0625rem, 0.99rem + 0.30vw, 1.125rem); /* 17 → 18 */
  --fs-body-sm: clamp(0.938rem, 0.91rem + 0.12vw, 1.000rem);
  --fs-caption: 0.875rem;
  --fs-overline: 0.813rem;
  --fs-button:  clamp(0.938rem, 0.90rem + 0.19vw, 1.063rem);

  --lh-display: 0.94; --lh-tight: 1.06; --lh-heading: 1.14;
  --lh-snug: 1.28; --lh-body: 1.62; --lh-relaxed: 1.72; --lh-flat: 1.00;

  --ls-display: -0.025em; --ls-h1: -0.02em; --ls-h2: -0.018em; --ls-h3: -0.015em;
  --ls-h4: -0.01em; --ls-body: 0em; --ls-body-sm: 0.005em; --ls-caption: 0.01em;
  --ls-overline: 0.14em; --ls-button: 0.02em;

  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* Меры пересчитаны под кириллицу (+15% длины строки). */
  --measure-prose: 66ch;
  --measure-lead: 46ch;
  --measure-display: 22ch;
}

/* ------------------------------------------------------------
   4. СЕТКА, КОНТЕЙНЕРЫ, ОТСТУПЫ
   ------------------------------------------------------------ */
:root {
  --space-0: 0; --space-1: .25rem; --space-2: .5rem; --space-3: .75rem;
  --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem;
  --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-11: 6rem;
  --space-12: 8rem; --space-13: 10rem;

  --container-wide: 90rem;    /* 1440 */
  --container-page: 78.5rem;  /* 1256 */
  --container-content: 68rem; /* 1088 */
  --container-prose: 44rem;   /*  704 */
  --container-narrow: 34rem;  /*  544 */

  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  --grid-cols: 12;
  --grid-gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);

  --section-y-sm: clamp(2.5rem, 1.6rem + 4.0vw, 4rem);
  --section-y:    clamp(4rem, 2.4rem + 7.1vw, 7.5rem);
  --section-y-lg: clamp(5.5rem, 3.0rem + 11.1vw, 11rem);
  --block-gap:    clamp(1.5rem, 1.0rem + 2.2vw, 3rem);
  --stack-gap:    var(--space-5);

  --header-h: 4.5rem;      /* 72 desktop */
  --header-h-mobile: 3.5rem;

  --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200;
  --z-overlay: 300; --z-modal: 400; --z-toast: 500;
}

/* ------------------------------------------------------------
   5. ФОРМА: радиусы, обводки, тени, блюр
   ------------------------------------------------------------ */
:root {
  --radius-none: 0;
  --radius-xs: .25rem; --radius-sm: .5rem; --radius-md: .75rem;
  --radius-lg: 1.25rem; --radius-xl: 1.5rem; --radius-2xl: 2rem;
  --radius-3xl: 2.5rem; --radius-pill: 999px;

  /* Фирменный срез угла. Угол клина совпадает с геометрией крыла знака. */
  --cut: 2rem;
  --cut-sm: 1.25rem;
  --chevron-angle: 28deg;

  --stroke-hair: 1px; --stroke-thin: 1.5px; --stroke-bold: 2px; --stroke-heavy: 3px;

  --shadow-xs: 0 1px 2px rgba(37,22,83,.06);
  --shadow-sm: 0 2px 6px rgba(37,22,83,.07), 0 1px 2px rgba(37,22,83,.05);
  --shadow-md: 0 8px 20px -6px rgba(37,22,83,.14), 0 2px 6px -2px rgba(37,22,83,.08);
  --shadow-lg: 0 20px 44px -12px rgba(37,22,83,.20), 0 6px 14px -6px rgba(37,22,83,.10);
  --shadow-xl: 0 36px 72px -20px rgba(21,12,52,.28), 0 10px 24px -10px rgba(21,12,52,.14);
  --shadow-accent: 0 10px 28px -10px rgba(242,106,45,.50);
  --shadow-inset: inset 0 1px 0 rgba(254,254,254,.55);

  --blur-sm: 8px; --blur-md: 16px; --blur-lg: 28px;
  --blur-glass: saturate(150%) blur(14px);
}

/* ------------------------------------------------------------
   6. МОУШН
   ------------------------------------------------------------ */
:root {
  --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 220ms;
  --dur-slow: 340ms; --dur-slower: 520ms; --dur-reveal: 680ms;

  --ease-standard: cubic-bezier(.2,0,0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in: cubic-bezier(.7,0,.84,0);
  --ease-inout: cubic-bezier(.65,0,.35,1);
  --ease-gentle: cubic-bezier(.33,0,.15,1);
  --stagger: 60ms;

  --t-color: color var(--dur-fast) var(--ease-standard),
             background-color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard);
  --t-transform: transform var(--dur-base) var(--ease-out);
  --t-shadow: box-shadow var(--dur-base) var(--ease-out);
}

/* ============================================================
   7. СЕМАНТИКА — СВЕТЛАЯ ТЕМА (основная)
   ============================================================ */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg: var(--neutral-100);
  --bg-gradient: var(--grad-surface-light);
  --bg-subtle: var(--neutral-200);
  --surface: var(--neutral-50);
  --surface-cool: var(--violet-50);
  --surface-raised: #FFFFFF;
  --surface-sunken: var(--neutral-200);
  --surface-deep: var(--violet-950);
  --surface-deep-gradient: var(--grad-surface-deep);
  --surface-glass: rgba(254,246,242,.72);

  --text-primary: var(--neutral-900);   /* 15.6 на bg / 8.1 на пике градиента */
  --text-secondary: var(--neutral-700); /*  8.0 /  4.2 */
  --text-muted: var(--neutral-600);     /*  5.1 / НЕ на градиенте */
  --text-disabled: var(--neutral-500);
  --text-heading: var(--violet-700);    /*  9.2 /  4.8 */
  --text-accent: var(--orange-800);     /*  6.3 / НЕ на градиенте */
  --text-accent-lg: var(--orange-700);  /* только >=24px или >=19px bold, на карточке */
  --text-inverse: var(--violet-50);
  --text-link: var(--violet-700);
  --text-link-hover: var(--violet-600);

  --border: rgba(37,22,83,.12);
  --border-strong: var(--neutral-500);  /* 3.2:1 */
  --border-input: var(--neutral-400);
  --border-accent: var(--orange-500);
  --divider: rgba(37,22,83,.10);

  --accent: var(--orange-500);
  --accent-hover: var(--orange-600);
  --accent-active: var(--orange-700);
  --accent-subtle: var(--orange-100);
  --accent-contrast: var(--neutral-900); /* 5.8:1. БЕЛЫЙ ЛЕЙБЛ ЗАПРЕЩЁН — 3.0:1 */
  --accent-gradient: var(--grad-accent);

  --action: var(--violet-600);
  --action-hover: var(--violet-700);
  --action-active: var(--violet-800);
  --action-contrast: var(--white);      /* 7.7:1 */
  --action-subtle: var(--violet-100);

  --focus-ring: var(--violet-700);      /* 9.2:1. Оранжевое кольцо на светлом = 2.7 — нельзя */
  --focus-ring-offset: var(--neutral-50);
  --focus-ring-width: 3px;
  --focus-ring-offset-width: 2px;

  --success: var(--success-700); --success-bg: var(--success-50);
  --warning: var(--warning-700); --warning-bg: var(--warning-50);
  --danger:  var(--danger-700);  --danger-bg:  var(--danger-50);
  --info:    var(--info-700);    --info-bg:    var(--info-50);
  --on-status: var(--white);

  --badge-bg: var(--neutral-900);
  --badge-text: var(--white);
  --logo-fill: var(--violet-600);
  --logo-mark: var(--neutral-900);

  --marker-yes: var(--orange-500);
  --marker-no: var(--violet-700);
  --marker-neutral: var(--neutral-500);
}

/* ============================================================
   8. СЕМАНТИКА — ТЁМНАЯ ТЕМА
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: var(--violet-950);
  --bg-gradient: var(--grad-surface-deep);
  --bg-subtle: #1C1140;
  --surface: var(--violet-900);
  --surface-cool: #2C1A62;
  --surface-raised: var(--violet-800);
  --surface-sunken: #0E0826;
  --surface-glass: rgba(21,12,52,.68);

  --text-primary: var(--violet-50);
  --text-secondary: var(--violet-200);
  --text-muted: var(--violet-300);
  --text-disabled: var(--violet-400);
  --text-heading: var(--violet-50);
  --text-accent: var(--orange-400);     /* НЕ orange-500: он даёт 4.0 на светлом крае градиента */
  --text-accent-lg: var(--orange-500);
  --text-inverse: var(--neutral-900);
  --text-link: var(--orange-300);
  --text-link-hover: var(--orange-200);

  --border: rgba(193,188,249,.16);
  --border-strong: var(--violet-500);
  --border-input: var(--violet-600);
  --border-accent: var(--orange-400);
  --divider: rgba(193,188,249,.12);

  --accent: var(--orange-500);
  --accent-hover: var(--orange-400);
  --accent-active: var(--orange-300);
  --accent-subtle: rgba(242,106,45,.16);
  --accent-contrast: var(--neutral-900);

  --action: var(--violet-400);
  --action-hover: var(--violet-300);
  --action-active: var(--violet-200);
  --action-contrast: var(--violet-950);
  --action-subtle: rgba(121,106,206,.22);

  --focus-ring: var(--orange-400);      /* 7.9:1 */
  --focus-ring-offset: var(--violet-950);

  --success: var(--success-300); --success-bg: rgba(16,113,46,.20);
  --warning: var(--warning-300); --warning-bg: rgba(122,86,4,.22);
  --danger:  var(--danger-300);  --danger-bg:  rgba(164,42,50,.22);
  --info:    var(--info-300);    --info-bg:    rgba(0,101,146,.22);
  --on-status: var(--violet-950);

  /* ИНВЕРСИЯ ПЛАШКИ. В v1.0 было #191626 на #150C34 = 1.04:1 — невидимо. */
  --badge-bg: var(--violet-50);
  --badge-text: var(--neutral-900);

  --logo-fill: var(--violet-50);
  --logo-mark: var(--violet-50);

  --marker-yes: var(--orange-400);
  --marker-no: var(--violet-300);
  --marker-neutral: var(--violet-400);

  --shadow-xs: 0 1px 2px rgba(5,2,16,.40);
  --shadow-sm: 0 2px 6px rgba(5,2,16,.45), 0 1px 2px rgba(5,2,16,.35);
  --shadow-md: 0 8px 20px -6px rgba(5,2,16,.55), 0 2px 6px -2px rgba(5,2,16,.40);
  --shadow-lg: 0 20px 44px -12px rgba(5,2,16,.62), 0 6px 14px -6px rgba(5,2,16,.42);
  --shadow-xl: 0 36px 72px -20px rgba(5,2,16,.72), 0 10px 24px -10px rgba(5,2,16,.48);
  --shadow-inset: inset 0 1px 0 rgba(193,188,249,.14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--violet-950); --bg-gradient: var(--grad-surface-deep); --bg-subtle: #1C1140;
    --surface: var(--violet-900); --surface-cool: #2C1A62; --surface-raised: var(--violet-800);
    --surface-sunken: #0E0826; --surface-glass: rgba(21,12,52,.68);
    --text-primary: var(--violet-50); --text-secondary: var(--violet-200);
    --text-muted: var(--violet-300); --text-disabled: var(--violet-400);
    --text-heading: var(--violet-50); --text-accent: var(--orange-400);
    --text-accent-lg: var(--orange-500); --text-inverse: var(--neutral-900);
    --text-link: var(--orange-300); --text-link-hover: var(--orange-200);
    --border: rgba(193,188,249,.16); --border-strong: var(--violet-500);
    --border-input: var(--violet-600); --border-accent: var(--orange-400);
    --divider: rgba(193,188,249,.12);
    --accent-hover: var(--orange-400); --accent-active: var(--orange-300);
    --accent-subtle: rgba(242,106,45,.16);
    --action: var(--violet-400); --action-hover: var(--violet-300);
    --action-active: var(--violet-200); --action-contrast: var(--violet-950);
    --action-subtle: rgba(121,106,206,.22);
    --focus-ring: var(--orange-400); --focus-ring-offset: var(--violet-950);
    --success: var(--success-300); --warning: var(--warning-300);
    --danger: var(--danger-300); --info: var(--info-300); --on-status: var(--violet-950);
    --badge-bg: var(--violet-50); --badge-text: var(--neutral-900);
    --logo-fill: var(--violet-50); --logo-mark: var(--violet-50);
    --marker-yes: var(--orange-400); --marker-no: var(--violet-300);
    --marker-neutral: var(--violet-400);
  }
}

/* ============================================================
   9. БАЗОВЫЕ ПРИМЕНЕНИЯ
   ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--header-h) + var(--space-4));
}

body {
  position: relative;
  background-color: var(--bg);
  background-image: var(--bg-gradient);
  /* background-attachment: fixed УБРАН: баг iOS Safari + перерисовка вьюпорта на Android */
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--fw-regular);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Зерно поверх фона: дизеринг против бандинга + снимает вид «CSS-градиента» */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--noise-tile);
  background-repeat: repeat;
  opacity: var(--noise-opacity);
  mix-blend-mode: overlay;
}

/* --- Типографические классы --- */
.t-display { font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); text-transform: uppercase;
  max-width: var(--measure-display); font-style: normal; text-wrap: balance; }
.t-h1 { font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h1); line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1); text-transform: uppercase; text-wrap: balance; }
.t-h2 { font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h2); line-height: var(--lh-heading);
  letter-spacing: var(--ls-h2); text-transform: uppercase; text-wrap: balance; }
.t-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: var(--ls-h3); }
.t-h4 { font-family: var(--font-text); font-weight: var(--fw-semibold);
  font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: var(--ls-h4); }
.t-h5 { font-family: var(--font-text); font-weight: var(--fw-semibold);
  font-size: var(--fs-h5); line-height: var(--lh-snug); }
.t-h6 { font-family: var(--font-text); font-weight: var(--fw-semibold);
  font-size: var(--fs-h6); line-height: var(--lh-snug); }
.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); max-width: var(--measure-lead); }
.t-body    { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure-prose); }
.t-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); letter-spacing: var(--ls-body-sm); }
.t-caption { font-size: var(--fs-caption); line-height: 1.45; letter-spacing: var(--ls-caption); color: var(--text-muted); }
.t-overline{ font-family: var(--font-display); font-size: var(--fs-overline);
  font-weight: var(--fw-medium); line-height: 1.2; letter-spacing: var(--ls-overline);
  text-transform: uppercase; color: var(--text-muted); }
.t-button  { font-family: var(--font-display); font-size: var(--fs-button);
  font-weight: var(--fw-semibold); line-height: 1; letter-spacing: var(--ls-button);
  text-transform: uppercase; }

/* Цитата — БЕЗ курсива. Кириллического курсива в бесплатной паре нет,
   Inter Italic на русском выглядит как подделанный наклон.
   Выделение: кегль + отбивка + волосяная линейка слева. */
.t-quote { font-family: var(--font-text); font-style: normal;
  font-size: var(--fs-body-lg); line-height: var(--lh-relaxed);
  max-width: var(--measure-lead); padding-inline-start: var(--space-5);
  border-inline-start: var(--stroke-heavy) solid var(--accent); }

/* Все числа — табличные. Обязательно для цен, метрик, шкал. */
.t-metric, .t-price, .t-num, table td, table th {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.t-metric { font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h1); line-height: var(--lh-flat);
  letter-spacing: var(--ls-h1); color: var(--accent); }
.t-price  { font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h2); line-height: var(--lh-flat); color: var(--text-primary); }
.t-price__period { display: block; margin-block-start: var(--space-2);
  font-family: var(--font-text); font-size: var(--fs-body);
  font-weight: var(--fw-semibold); color: var(--text-secondary); }

/* --- Фокус --- (только клавиатура на кнопках/ссылках; текстовые поля без
   колец — Chromium вешает :focus-visible на них и от клика) */
:where(a, button, select, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset-width);
  border-radius: var(--radius-sm);
}
:where(input, textarea):focus-visible {
  outline: none;
}

/* --- Контейнеры --- */
.container { width: 100%; margin-inline: auto; padding-inline: var(--gutter);
  max-width: calc(var(--container-page) + var(--gutter) * 2); }
.container--content { max-width: calc(var(--container-content) + var(--gutter) * 2); }
.container--prose   { max-width: calc(var(--container-prose) + var(--gutter) * 2); }
.container--narrow  { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.container--wide    { max-width: calc(var(--container-wide) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }
.section--sm { padding-block: var(--section-y-sm); }
.section--lg { padding-block: var(--section-y-lg); }
:where(.section, section)[id] { scroll-margin-block-start: calc(var(--header-h) + var(--space-4)); }

/* --- ФИРМЕННЫЙ СРЕЗ УГЛА (двухслойно) ---
   clip-path обрезает box-shadow и outline. Поэтому срез живёт на ВНУТРЕННЕМ слое,
   а тень и кольцо фокуса — на внешнем врапере. */
.cut { position: relative; border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); }
.cut__inner {
  border-radius: inherit;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  overflow: hidden;
}
.cut--bl > .cut__inner {
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
/* .cut:focus-within удалён: подсветка целого блока при фокусе внутри — по просьбе заказчика. */

/* --- Гранёный шеврон (замена типографской стрелки) --- */
.chevron { clip-path: polygon(0 0, 28% 0, 100% 50%, 28% 100%, 0 100%, 72% 50%); }

/* --- Инверсная секция внутри светлой темы --- */
.surface-deep {
  background-color: var(--surface-deep);
  background-image: var(--surface-deep-gradient);
  color: var(--violet-50);
  --text-primary: var(--violet-50);
  --text-secondary: var(--violet-200);
  --text-muted: var(--violet-300);
  --text-heading: var(--violet-50);
  --text-accent: var(--orange-400);
  --border: rgba(193,188,249,.16);
  --border-strong: var(--violet-500);
  --focus-ring: var(--orange-400);
  --marker-no: var(--violet-300);
  /* Плашка инвертируется и здесь — иначе пропадает в футере */
  --badge-bg: var(--violet-50);
  --badge-text: var(--neutral-900);
  --logo-fill: var(--violet-50);
  --logo-mark: var(--violet-50);
}

/* --- Плашка «Спорт для жизни» / теги --- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--badge-bg); color: var(--badge-text);
  font-family: var(--font-display); font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline); text-transform: uppercase;
}

/* --- Кнопки --- */
.btn { display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); min-height: 2.75rem; padding: var(--space-3) var(--space-6);
  border: 0; cursor: pointer; transition: var(--t-color), var(--t-transform);
  font-family: var(--font-display); font-size: var(--fs-button);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-button);
  text-transform: uppercase; border-radius: var(--radius-xs); }
.btn--primary { background: var(--accent); color: var(--accent-contrast);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--secondary { background: transparent; color: var(--action);
  box-shadow: inset 0 0 0 var(--stroke-thin) var(--border-strong); }
.btn--ghost { background: transparent; color: var(--text-primary); }

/* ------------------------------------------------------------
   10. REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: .01ms; --dur-fast: .01ms; --dur-base: .01ms;
    --dur-slow: .01ms; --dur-slower: .01ms; --dur-reveal: .01ms; --stagger: 0ms;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------
   11. FORCED COLORS
   ------------------------------------------------------------ */
@media (forced-colors: active) {
  :where(a, button):focus-visible { outline: 3px solid CanvasText; }
  .cut__inner, .chevron, .btn--primary { clip-path: none; border: 1px solid CanvasText; }
  body::before { display: none; }
}