/* ==========================================================================
   EngPulse — Вариант B. Яркий молодёжный лендинг (энергия школ-продавцов курсов)
   Бренд сохранён: navy #1B2A49 / coral #FF5B4A — но подан крупно и сочно.
   Mobile-first, BEM-ish, CSS custom properties. Файл 1/2 (база + верх страницы).
   ========================================================================== */

:root {
  --navy:        #1B2A49;
  --navy-800:    #131F36;
  --navy-700:    #243757;
  --navy-600:    #33486B;
  /* Два коралла с разными ролями.

     --coral — сам бренд-цвет. Он несёт ЗАЛИВКИ: кнопку, стикеры, плашки,
     свечение, маркеры, полосы. Текст поверх такой заливки берётся из
     --on-accent (тёмный бренд-цвет, 5.36:1), а НЕ белый: белый на #FF5B4A
     даёт 3.07:1 и в бренд не входит.

     --coral-text — коралл в роли ТЕКСТА на светлом фоне: ссылки, надзаголовки,
     сообщения об ошибках. Сам #FF5B4A как текст даёт 2.77:1 на кремовом.

     Раньше --coral-text служил ещё и заливкой кнопки. Это чинило надпись на
     светлом фоне ценой двух вещей: форма кнопки на тёмных секциях падала до
     2.50:1 при норме 3:1, а на странице оказывалось два разных красных рядом
     (рамка карточки — яркая, плашка на ней — тушёная). Заливки вернулись к
     бренд-цвету, меняется цвет надписи (issue #85). */
  --coral:       #FF5B4A;
  --coral-text:  #C03020;
  --coral-text-strong: #A52A1C;
  /* Текст поверх акцентной ЗАЛИВКИ. Раньше токен только использовался, а
     значения не имел: везде работал фолбэк #fff, то есть белый на ярком
     коралле — 3.07:1. Тёмный бренд-цвет даёт 5.36:1 и, в отличие от белого,
     входит в бренд. Тема пересчитывает его под свою палитру (bestTextOn). */
  --on-accent: #131F36;
  /* Осветлённый коралл для наведения. Надпись теперь тёмная, поэтому заливка
     на наведении обязана СВЕТЛЕТЬ: прежний --coral-text-strong дал бы 2.00:1
     к неви по форме и убил бы тёмную надпись. */
  --coral-hover: #FF6E5E;
  /* --coral-600 повсеместно используется как ЦВЕТ ТЕКСТА (надзаголовки,
     сообщения об ошибках). В прежнем значении #F0473A он давал 3.71:1 на белом
     и 3.14:1 на розовой подложке — то есть сообщение об ошибке само было
     нечитаемым. */
  --coral-600:   var(--coral-text);
  --coral-700:   #DA382B;
  --coral-soft:  #FFE7E2;
  --coral-tint:  #FFF1EE;
  --cream:       #F7F3EC;
  --cream-2:     #FCF9F3;
  --paper:       #FFFFFF;
  --ink:         #1B2A49;
  /* Серая шкала подтянута целиком, а не только нижняя ступень. #6B7A8D давал
     3.96:1 на кремовом при пороге 4.5. Поднять один --ink-50 было бы мало:
     ступени по воспринимаемой светлоте стали бы 0.156 и 0.091 — третья
     ступень теряет треть, и приглушённый текст сливается с основным.
     Со сдвигом обеих ступени снова ровные (0.126 и 0.121), а --ink-70
     попутно уходит с 6.86 на 7.84.
     --ink-50 = #616E85 проходит на всех подложках сайта (4.66 на кремовом,
     5.15 на белом, 4.52 на голубом). Предлагавшийся #647087 — первое
     значение, переступившее порог на кремовом, — на голубом даёт 4.38. */
  --ink-70:      #3E4C64;
  --ink-50:      #616E85;
  --line:        rgba(27, 42, 73, .12);
  --line-soft:   rgba(27, 42, 73, .07);

  --shadow-sm: 0 2px 10px rgba(27, 42, 73, .06);
  --shadow:    0 18px 44px rgba(27, 42, 73, .10);
  --shadow-lg: 0 36px 90px rgba(27, 42, 73, .20);
  --shadow-coral: 0 16px 34px rgba(255, 91, 74, .34);
  --shadow-hard: 6px 6px 0 var(--navy);
  --shadow-hard-coral: 6px 6px 0 var(--coral);

  --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; --r-pill: 999px;

  --container: 1180px;
  --header-h: 76px;

  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* Атрибут hidden обязан прятать элемент. Браузерное правило [hidden]{display:none}
   имеет нулевую специфичность, поэтому ЛЮБОЙ собственный display его перебивает:
   .chip задан inline-flex, и скрытый из JS чип оставался на экране. Заметить это
   трудно — код выглядит правильным, а элемент виден. То же правило уже стоит в
   админке (css/admin.css). */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px; line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
ul { margin: 0; padding: 0; list-style: none; }
/* Выделение мышью: бледная коралловая заливка с тёмным текстом — 12.06:1
   вместо 3.07:1 у белого на ярком коралле. Заодно попадает в бренд: ровно так
   же выглядит маркер .mark в заголовках. */
::selection { background: var(--coral-soft); color: var(--ink); }

/* Кольцо фокуса двухцветное: тёмное кольцо + светлый ореол.
   Коралловая обводка давала 2.77:1 к фону при пороге 3:1 (SC 1.4.11), а на
   тёмных секциях — шапке и мобильном меню — исчезала вовсе.
   Тёмный ореол, который напрашивается первым, не работает дважды: outline
   рисуется ПОВЕРХ box-shadow, поэтому ореол виден только в зазоре внутри
   кольца, а к самому кольцу он даёт 1.22:1 — две полосы одной светлоты
   сливаются в мутный бинт. Здесь наоборот: navy-кольцо читается на светлом
   (12.88 на кремовом, 4.65 даже на коралловом), белый ореол — на тёмном
   (14.25 на navy). Один селектор закрывает оба фона.
   Радиус ореола 8px обязан превышать outline-offset + ширину (2+3), иначе он
   целиком спрячется под кольцом. */
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  border-radius: 6px;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .95);
}
/* Ореол обязан пережить СОБСТВЕННЫЕ тени элемента. У :focus-visible
   специфичность (0,1,0), ровно как у .btn--primary с её box-shadow —
   и та, идя ниже по файлу, затирала ореол. На светлых секциях это сходило с
   рук (тёмное кольцо и так видно), а на тёмной секции оставалась navy-обводка
   на navy-фоне: контраст 1.00, то есть фокуса нет вовсе. Замерено на
   /uchenikam: без этого правила кнопка «Смотреть курсы» на тёмной секции
   теряет фокус целиком, а соседняя .btn--ghost-light (у неё своей тени нет) —
   нет. Селектор с классом поднимает специфичность до (0,2,0).
   Свечение кнопки при этом на время фокуса пропадает — оно декоративное, а
   кольцо нет. */
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .95);
}

/* В режиме принудительных цветов система рисует фокус сама, а наш белый ореол
   там превращается в сплошную заливку поверх соседей. */
@media (forced-colors: active) {
  :focus-visible,
  .btn:focus-visible,
  a:focus-visible,
  button:focus-visible { outline-color: Highlight; box-shadow: none; }
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 300;
  background: var(--navy); color: #fff; padding: 10px 18px; border-radius: var(--r-sm);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* --- Типографика -------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; }
h1 { font-size: clamp(40px, 6.6vw, 82px); }
h2 { font-size: clamp(30px, 4.4vw, 56px); }
h3 { font-size: clamp(21px, 2.2vw, 27px); letter-spacing: -0.02em; line-height: 1.12; }
p  { margin: 0; text-wrap: pretty; }

.display { font-weight: 800; letter-spacing: -0.035em; line-height: 1.0; }

.eyebrow {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--coral-600);
  display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--coral); border-radius: 3px; }
.eyebrow--light { color: #fff; }
.eyebrow--light::before { background: var(--coral); }
.eyebrow--center { justify-content: center; }

.lead { font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-70); line-height: 1.58; }

/* highlighter — коралловый маркер за словами (молодёжная фишка) */
.mark {
  position: relative; white-space: nowrap; z-index: 0;
}
.mark::before {
  content: ""; position: absolute; z-index: -1;
  left: -.08em; right: -.08em; bottom: .04em; height: .42em;
  background: var(--coral); border-radius: 4px;
  transform: rotate(-1.2deg);
}
.mark--soft::before { background: var(--coral-soft); height: .46em; }
.ink-coral { color: var(--coral); }

/* squiggle underline (простой штрих, не сложный SVG) */
.squiggle { display: inline-block; }
.squiggle svg { width: 100%; height: 14px; color: var(--coral); }

/* --- Контейнеры / секции ------------------------------------------------ */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 22px; }
.section { padding: clamp(56px, 8vw, 108px) 0; position: relative; }
.section--cream { background: var(--cream); }
.section--paper { background: var(--paper); }
.section--navy  { background: var(--navy); color: #fff; }
/* Цвет надписи поверх акцентной заливки подбирает тема (bestTextOn). Пока
   палитра дефолтная, токен не объявлен и работает запасное #fff — вид не
   меняется. Со светлым акцентом из админки (жёлтый, салатовый) белый текст
   давал бы ~1.5:1: плашка выглядела бы пустой (issue #100). */
.section--coral { background: var(--coral); color: var(--on-accent, #fff); }
.section--tint  { background: var(--coral-tint); }

.section__head { max-width: 760px; margin: 0 0 clamp(34px, 5vw, 56px); }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__title { margin: 16px 0 0; }
.section__sub { margin: 18px 0 0; }

/* reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* --- Кнопки ------------------------------------------------------------- */
.btn {
  --h: 56px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 28px;
  border: 2px solid transparent; border-radius: var(--r-pill);
  font-weight: 800; font-size: 16px; letter-spacing: -0.01em;
  transition: transform .16s var(--spring), box-shadow .18s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  /* Перенос РАЗРЕШЁН намеренно (issue #99). С white-space: nowrap min-content
     длинной надписи («Начать с экспресс-подготовки» — 375px) оказывался шире
     вьюпорта 320px. Кнопка — элемент грида, а у грид-элементов min-width по
     умолчанию равен min-content, поэтому она задавала минимум всему блоку:
     вместе с ней за край уезжали заголовок, абзац и список, которые сами
     переносятся прекрасно. body{overflow-x:hidden} эту разницу не показывал,
     а срезал — доскроллить до хвоста строки было нельзя.
     Короткие надписи как не переносились, так и не переносятся: места хватает.
     Вертикальные поля — чтобы вторая строка не липла к границе пилюли; на
     однострочных кнопках высоту держит min-height, вид не меняется. */
  white-space: normal; max-width: 100%; text-align: center;
  padding-top: 10px; padding-bottom: 10px; line-height: 1.25;
}
.btn:active { transform: translateY(1px) scale(.99); }
/* Заливка — НАСТОЯЩИЙ бренд-коралл, надпись — тёмный бренд-цвет, форму держит
   рамка неви (у .btn она уже объявлена прозрачной, ширина не меняется).

   Прежнее решение притушивало заливку до --coral-text, чтобы работала белая
   надпись. Оно чинило текст на светлом фоне и ломало форму на тёмном: #C03020
   к неви даёт 2.50:1 при норме 3:1, а на наведении #A52A1C — 2.00:1. То есть
   кнопка-деньги в тёмном герое была менее заметна, чем вторичная рядом.
   Вдобавок на сайте оказывалось ДВА коралла: рамки карточек, маркеры и
   свечение под самой кнопкой остались яркими.

   Теперь меняется белый — цвет, который в бренд не входит. Замерено:
   надпись 5.36:1, форма 12.5–14.3 на светлых подложках, 4.65 на тёмной. */
.btn--primary {
  background: var(--coral);
  color: var(--on-accent, #131F36);
  border-color: var(--navy);
  box-shadow: var(--shadow-coral);
}
.btn--primary:hover { background: var(--coral-hover); transform: translateY(-3px); box-shadow: 0 22px 40px rgba(255,91,74,.40); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-700); transform: translateY(-3px); box-shadow: var(--shadow); }
.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; transform: translateY(-3px); }
.btn--white { background: #fff; color: var(--navy); }
.btn--white:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
/* ЕДИНСТВЕННЫЙ вид вторичной кнопки на тёмном фоне. Их было три: белая
   заливка, серо-стальная полупрозрачная и контур с рамкой в 40% белого —
   последнюю на тёмно-синем почти не видно. Одна роль должна выглядеть
   одинаково, иначе человек считает их разными по смыслу.
   Рамка сплошная белая: при 34% альфы она давала около 3.4:1 к фону —
   формально проходит SC 1.4.11, но выглядит как выключенная кнопка. */
.btn--ghost-light { background: rgba(255,255,255,.10); color: #fff; border-color: #fff; }
.btn--ghost-light:hover { background: rgba(255,255,255,.22); transform: translateY(-3px); }
.btn--block { width: 100%; }
/* Поля сверху и снизу повторяют .btn: сокращённое padding: 0 34px обнуляло их
   и отменяло правку #99 ровно для тех кнопок, из-за которых она делалась, —
   у больших CTA надписи самые длинные. Замерено: надпись в четыре строки
   прижималась к границе пилюли. */
.btn--lg { --h: 62px; font-size: 17.5px; padding: 10px 34px; }

/* sticker / tag */
.sticker {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  padding: 7px 13px; border-radius: var(--r-pill);
  background: #fff; color: var(--navy); border: 2px solid var(--navy);
  box-shadow: 3px 3px 0 var(--navy);
}
.sticker--coral { background: var(--coral); color: var(--on-accent, #131F36); border-color: var(--navy); }
.sticker--navy  { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: 3px 3px 0 var(--coral); }
.sticker__emoji { font-size: 14px; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-pill);
  background: #fff; border: 1.5px solid var(--line);
  font-weight: 600; font-size: 14.5px; color: var(--navy);
}
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }

/* --- Marquee (бегущая строка) ------------------------------------------ */
.marquee {
  background: var(--navy); color: #fff; overflow: hidden;
  border-top: 3px solid var(--coral); border-bottom: 3px solid var(--coral);
  padding: 13px 0;
}
.marquee--coral { background: var(--coral); border-color: var(--navy); }
.marquee__track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: marquee 28s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--mono); font-weight: 600; font-size: 15px; letter-spacing: .04em;
  text-transform: uppercase; padding: 0 26px; display: inline-flex; align-items: center; gap: 26px;
}
.marquee__item::after { content: "✶"; color: var(--coral); font-size: 16px; }
.marquee--coral .marquee__item::after { color: var(--navy); }
@keyframes marquee { to { transform: translateX(-50%); } }
/* Бегущая строка — брендовый элемент, по требованию анимируется ВСЕГДА, в т.ч.
   при системном «уменьшить движение» (reduced-motion guard снят намеренно). */

/* --- Header ------------------------------------------------------------- */
.topbar {
  background: var(--navy); color: #fff; font-size: 13.5px; font-weight: 600;
  text-align: center; padding: 8px 22px; letter-spacing: .01em;
}
.topbar b { color: var(--coral); }
.topbar #tbDays { font-family: var(--mono); }

.header {
  position: sticky; top: 0; z-index: 120;
  background: rgba(247, 243, 236, .82); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: transform .3s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.header--scrolled { background: rgba(252, 249, 243, .92); box-shadow: var(--shadow-sm); border-color: var(--line-soft); }
.header--hidden { transform: translateY(-100%); }
.header__inner { display: flex; align-items: center; gap: 20px; height: var(--header-h); }
.header__logo { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
.header__logo img { width: 34px; height: 34px; }
.nav { display: none; gap: 4px; margin-left: 8px; }
.nav__link { padding: 9px 14px; border-radius: var(--r-pill); font-weight: 600; font-size: 15.5px; color: var(--ink-70); transition: background .16s var(--ease), color .16s var(--ease); }
.nav__link:hover { background: #fff; color: var(--navy); }
.header__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.header__cta { display: none; }

.cart-btn { position: relative; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; transition: transform .16s var(--spring), box-shadow .18s var(--ease); }
.cart-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.cart-btn img { width: 21px; height: 21px; }
.cart-btn__count { position: absolute; top: -5px; right: -5px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: var(--r-pill); background: var(--coral); color: var(--on-accent, #131F36); font-size: 12px; font-weight: 800; display: none; align-items: center; justify-content: center; border: 2px solid var(--cream); }
.cart-btn__count.is-visible { display: inline-flex; }
.burger { width: 46px; height: 46px; border-radius: 50%; background: var(--navy); display: inline-flex; align-items: center; justify-content: center; }
.burger img { width: 22px; height: 22px; filter: invert(1); }

@media (min-width: 980px) {
  .nav { display: inline-flex; }
  .header__cta { display: inline-flex; }
  .burger { display: none; }
}

/* --- Mobile menu -------------------------------------------------------- */
/* Закрытое меню уезжало за экран одним трансформом и оставалось
   visibility: visible. Для браузера его ссылки — обычные фокусируемые
   элементы: на четвёртом Tab фокус проваливался в невидимое меню и блуждал
   там ещё восемь нажатий, а кольцо фокуса рисовалось за краем экрана —
   человек видел, что фокус просто пропал, и выйти мог только перезагрузкой.
   Скринридер при этом объявлял всё меню как присутствующее на странице, то
   есть навигация читалась дважды (issue #103).

   visibility убирает элемент и из порядка обхода, и из дерева доступности, и
   наследуется потомками. Задержка в transition нужна, чтобы меню успело
   доехать анимацией закрытия, а не исчезало рывком. */
.mobile-menu { position: fixed; inset: 0; z-index: 200; background: var(--navy); color: #fff; padding: 22px; transform: translateX(100%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s linear .3s; display: flex; flex-direction: column; }
.mobile-menu.is-open { transform: none; visibility: visible; transition: transform .3s var(--ease), visibility 0s linear 0s; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.mobile-menu__close { font-size: 34px; color: #fff; line-height: 1; width: 46px; height: 46px; }
.mobile-menu__nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu__link { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
/* Линия после ПОСЛЕДНЕГО пункта отделяла его от пустоты: ниже до самых кнопок
   шла тёмно-синяя полоса высотой в треть экрана, и черта висела в никуде. */
.mobile-menu__link:last-child { border-bottom: 0; }
.mobile-menu__cta { margin-top: auto; display: grid; gap: 12px; padding-top: 22px; }

/* --- HERO --------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--cream); padding: clamp(36px, 5vw, 64px) 0 clamp(48px, 6vw, 86px); }
.hero__blob { position: absolute; border-radius: 50%; filter: blur(8px); opacity: .5; pointer-events: none; }
.hero__blob--1 { width: 460px; height: 460px; right: -160px; top: -120px; background: radial-gradient(circle, var(--coral-soft), transparent 68%); opacity: .9; }
.hero__blob--2 { width: 360px; height: 360px; left: -150px; bottom: -120px; background: radial-gradient(circle, #E7EEF7, transparent 68%); }
.hero .container { position: relative; z-index: 1; }

.hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(34px, 5vw, 56px); align-items: center; }
.hero__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.hero__title { margin: 0 0 20px; }
.hero__sub { max-width: 540px; margin-bottom: 28px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.hero__note { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--ink-50); font-weight: 600; }
.hero__note .dot { width: 9px; height: 9px; border-radius: 50%; background: #28b463; box-shadow: 0 0 0 4px rgba(40,180,99,.16); }

/* hero stat strip */
.hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; padding-top: 30px; border-top: 2px dashed var(--line); }
.hstat__num { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.03em; color: var(--navy); line-height: 1; }
.hstat__num span { color: var(--coral); }
.hstat__label { margin-top: 7px; font-size: 13.5px; color: var(--ink-50); font-weight: 600; line-height: 1.3; }

/* hero media card */
.hero__media { position: relative; }
.hero-card { position: relative; background: #fff; border: 2px solid var(--navy); border-radius: var(--r-xl); box-shadow: var(--shadow-hard); padding: 22px; }
.hero-card__bar { display: flex; align-items: center; gap: 7px; margin-bottom: 18px; }
.hero-card__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.hero-card__dot:nth-child(1) { background: var(--coral); }
.hero-card__tag { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-50); letter-spacing: .04em; }
.hero-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.hero-card__title { font-size: 19px; font-weight: 800; }
.hero-card__badge { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--coral-600); background: var(--coral-tint); padding: 5px 10px; border-radius: var(--r-pill); }

.score-ring { display: flex; align-items: center; gap: 18px; padding: 16px; background: var(--cream-2); border-radius: var(--r-lg); margin-bottom: 16px; }
.ring { --val: 78; width: 92px; height: 92px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--coral) calc(var(--val) * 1%), var(--coral-soft) 0); position: relative; }
.ring::before { content: ""; position: absolute; inset: 9px; background: #fff; border-radius: 50%; }
.ring__val { position: relative; font-weight: 800; font-size: 23px; letter-spacing: -0.03em; }
.ring__val small { font-size: 13px; color: var(--ink-50); }
.score-meta__k { font-family: var(--mono); font-size: 12px; color: var(--ink-50); letter-spacing: .04em; }
.score-meta__v { font-size: 17px; font-weight: 800; margin-top: 3px; }
.score-meta__hint { font-size: 13.5px; color: var(--ink-50); margin-top: 4px; }

.weak { display: grid; gap: 11px; }
.weak__title { font-family: var(--mono); font-size: 12px; color: var(--ink-50); letter-spacing: .04em; margin-bottom: 2px; }
.bar { display: grid; grid-template-columns: 92px 1fr 42px; align-items: center; gap: 11px; }
.bar__name { font-size: 14px; font-weight: 600; }
.bar__track { height: 9px; border-radius: var(--r-pill); background: var(--coral-soft); overflow: hidden; }
.bar__fill { height: 100%; width: 0; background: var(--coral); border-radius: var(--r-pill); transition: width 1s var(--ease); }
/* Второе состояние полосы (#110, п.1): тона #FF5B4A и #28b463 различаются
   между собой на 1.14:1 — то есть по светлоте это одна и та же полоска, и на
   солнце, и при дейтеранопии. Добавляем штриховку: признак геометрический и
   виден даже на монохромном экране. */
.bar__fill--ok {
  background-color: #28b463;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, .38) 0 5px,
    rgba(255, 255, 255, 0) 5px 10px
  );
}
.bar__pct { font-size: 13px; font-weight: 700; color: var(--ink-50); text-align: right; }

/* floating sticker on hero card */
.hero-card__float { position: absolute; z-index: 3; }
.hero-card__float--1 { top: -18px; right: -14px; transform: rotate(7deg); }
.hero-card__float--2 { bottom: -16px; left: -16px; transform: rotate(-6deg); }

@media (min-width: 880px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; }
}
@media (max-width: 520px) {
  .hero__stats { grid-template-columns: 1fr 1fr; }
  .hero__stats .hstat:last-child { grid-column: span 2; }
}

/* --- Social-proof band -------------------------------------------------- */
.proof { background: var(--navy); color: #fff; }
.proof__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
.pstat { text-align: center; }
.pstat__num { font-size: clamp(34px, 5vw, 56px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: #fff; }
.pstat__num span { color: var(--coral); }
.pstat__label { margin-top: 10px; font-size: 14.5px; color: rgba(255,255,255,.66); font-weight: 600; }
.proof__note { margin-top: 30px; text-align: center; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: rgba(255,255,255,.5); }
@media (min-width: 760px) { .proof__grid { grid-template-columns: repeat(4, 1fr); } }