/* ============================================================================
 * blocks.css - оформление блоков страницы. Один блок - один раздел файла.
 *
 * ШИРИНА. Каждый блок занимает всю рабочую зону: ширину держит .container из
 * base.css, воздух - паддинги. Узкой колонки текста посреди широкого экрана в
 * проекте нет по прямому требованию владельца.
 *
 * ЦВЕТ. Ни одного литерала: только роли из tokens.css. Литерал здесь пережил бы
 * смену темы и остался бы, например, тёмным текстом на тёмном фоне - в консоли
 * при этом тишина.
 *
 * СЕТКИ. В базовом слое каждая сетка - одна колонка. Многоколоночная раскладка
 * появляется только внутри min-width: 480 / 768 / 1024 / 1280.
 * ========================================================================== */

/* =============================================================== hero-brand = */

.hero-brand {
  position: relative;
  overflow: hidden;
  padding-block: clamp(40px, 6vw, 84px);
  background:
    radial-gradient(90% 120% at 8% 0%, var(--c-glow-a), transparent 58%),
    radial-gradient(80% 110% at 100% 10%, var(--c-glow-b), transparent 55%),
    var(--c-bg);
  border-bottom: 1px solid var(--c-line-soft);
}

/*
 * ЗДЕСЬ СТОЯЛА ТОНКАЯ СЕТКА НА ФОНЕ ГЕРОЯ - ДВА ПОВТОРЯЮЩИХСЯ ГРАДИЕНТА ПО 64px.
 * Убрана 29.08.2026 по замеру: с ней страница переставала отрисовываться, как
 * только её прокручивали. Браузер отдавал белый кадр и не успевал закончить
 * отрисовку за пять секунд - при живом DOM, без единой ошибки в консоли.
 * Бисекция по правилам файла назвала виновника однозначно: снять это правило -
 * прокрутка рисуется, вернуть - снова белое поле.
 *
 * Урок общий: плиточный градиент на большой площади стоит дорого, а платит за
 * него посетитель кадрами, которых не видит никто из тех, кто смотрит на макет.
 * «Крипто-техническую» ноту держат два радиальных свечения ниже - они дешёвые.
 */

.hero-brand__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

.hero-brand__text { min-width: 0; }

.hero-brand__title {
  font-size: var(--t-hero);
  color: var(--c-text-strong);
  text-wrap: balance;
}

.hero-brand__lead {
  margin-top: var(--sp-4);
  font-size: var(--t-lead);
  color: var(--c-body);
}

.hero-brand__cta { margin-top: var(--sp-5); }

.hero-brand__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: 0;
  padding: 1px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: var(--c-line-soft);
  overflow: hidden;
}

.hero-brand__fact {
  display: grid;
  gap: 4px;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface);
}

.hero-brand__fact-label {
  color: var(--c-dim);
  font-size: var(--t-tiny);
  font-weight: var(--fw-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-brand__fact-value {
  margin: 0;
  color: var(--c-text);
  font-size: var(--t-small);
  font-weight: var(--fw-semi);
}

/* Последняя строка карточки - про лицензию, и она про отсутствие документа.
   Бирюзовый акцент «про деньги» тут был бы неуместен: значение подсвечивается
   янтарным, цветом оговорки. */
.hero-brand__fact:last-child .hero-brand__fact-value { color: var(--c-warn); }

@media (min-width: 480px) {
  .hero-brand__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .hero-brand__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: var(--sp-8); }
  .hero-brand__facts { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================= page-heading = */

.page-heading {
  padding-block: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px);
  background:
    radial-gradient(70% 130% at 0% 0%, var(--c-glow-a), transparent 60%),
    var(--c-bg);
  border-bottom: 1px solid var(--c-line-soft);
}

.page-heading__inner { min-width: 0; }

.page-heading__title {
  color: var(--c-text-strong);
  text-wrap: balance;
}

.page-heading__lead {
  margin-top: var(--sp-4);
  font-size: var(--t-lead);
  color: var(--c-body);
}

/* =========================================================== key-takeaways = */

.key-takeaways { padding-block: var(--sp-section) 0; }

.key-takeaways__card {
  position: relative;
  padding: var(--sp-5);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-xl);
  background:
    linear-gradient(180deg, var(--c-accent-soft), transparent 40%),
    var(--c-surface);
}

.key-takeaways__title {
  margin-bottom: var(--sp-4);
  font-size: var(--t-h2);
}

.key-takeaways__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
}

.key-takeaways__item {
  position: relative;
  min-width: 0;
  padding-left: var(--sp-6);
  color: var(--c-body);
}

/* Галочка рисуется рамками, а не знаком из шрифта: символ ✓ в разных системах
   имеет разную ширину и сбивает выключку левого края списка. */
.key-takeaways__item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--c-money);
  border-bottom: 2px solid var(--c-money);
  transform: rotate(-45deg);
}

@media (min-width: 768px) {
  .key-takeaways__card { padding: var(--sp-7); }
  .key-takeaways__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-6); }
}

/* ============================================================= facts-table = */

.facts-table { padding-block: var(--sp-section) 0; }

.facts-table__title { margin-bottom: var(--sp-4); }

.facts-table__wrap { background: var(--c-surface); }

.facts-table__table { min-width: 420px; }

.facts-table__label {
  width: 42%;
  color: var(--c-dim);
  font-weight: var(--fw-med);
}

.facts-table__value {
  color: var(--c-text);
  font-weight: var(--fw-semi);
}

.facts-table__row:nth-child(even) .facts-table__label,
.facts-table__row:nth-child(even) .facts-table__value { background: var(--c-surface-2); }

.facts-table__source {
  margin-top: var(--sp-3);
  color: var(--c-dim);
  font-size: var(--t-tiny);
}

/* ============================================================ prose-section = */

.prose-section__title {
  margin-bottom: var(--sp-4);
  text-wrap: balance;
}

.prose-section__body { color: var(--c-body); }

.prose-section__p { font-size: var(--t-body); }

.prose-section__link {
  color: var(--c-money);
  font-weight: var(--fw-med);
  text-decoration: underline;
  text-decoration-color: var(--c-money-line);
  text-decoration-thickness: 1px;
}
.prose-section__link:hover {
  color: var(--c-money);
  text-decoration-color: currentColor;
}

.prose-section__takeaway {
  display: block;
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--c-money);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--c-money-soft);
  color: var(--c-text);
}

.prose-section__takeaway-label {
  color: var(--c-money);
  font-weight: var(--fw-bold);
}

/* Секции прозы чередуются подложкой. Чередование заявлено - значит, оно обязано
   быть настоящим: модификатор, который ничего не меняет, выглядит как забытая
   работа и делает страницу монотонной. */
.prose-section:nth-of-type(even) { background: var(--c-bg-alt); }

/*
 * ЗАГОЛОВОК УХОДИТ В ЛЕВУЮ РЕЛЬСУ, ТЕКСТ ЗАНИМАЕТ ОСТАЛЬНОЕ - ОТ 1024px.
 *
 * Так решаются сразу две вещи, которые иначе спорят друг с другом. Блок обязан
 * занимать всю рабочую зону, а строка прозы в 1200 пикселей - это полторы сотни
 * знаков, то есть чтение, на котором глаз теряет начало следующей строки.
 *
 * Узкого контейнера с полем справа здесь нет намеренно: пустой жёлоб в треть
 * экрана читается как незагрузившийся блок. Левая колонка - не поле, а рельса:
 * в ней стоит заголовок раздела, и он остаётся на виду, пока читаешь раздел.
 * Строка при этом выходит около девяноста знаков - ровно то, что нужно.
 */
@media (min-width: 1024px) {
  .prose-section > .container {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    column-gap: var(--sp-8);
    align-items: start;
  }
  .prose-section__title {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    top: calc(var(--header-h) + var(--sp-5));
    margin-bottom: 0;
  }
  .prose-section__body { grid-column: 2; grid-row: 1; }
  .prose-section__takeaway { grid-column: 2; grid-row: 2; }
}

/* ============================================================== pros-cons == */

.pros-cons { padding-block: var(--sp-section) 0; }

.pros-cons__title { margin-bottom: var(--sp-5); }

.pros-cons__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}

.pros-cons__col {
  min-width: 0;
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.pros-cons__col--pros { border-color: var(--c-money-line); background: var(--c-good-soft); }
.pros-cons__col--cons { border-color: var(--c-accent-line); background: var(--c-bad-soft); }

.pros-cons__col-title {
  margin-bottom: var(--sp-4);
  font-size: var(--t-h4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pros-cons__col--pros .pros-cons__col-title { color: var(--c-good); }
.pros-cons__col--cons .pros-cons__col-title { color: var(--c-bad); }

.pros-cons__list { display: grid; gap: var(--sp-3); }

.pros-cons__item {
  position: relative;
  padding-left: var(--sp-5);
  color: var(--c-body);
  font-size: var(--t-small);
}
.pros-cons__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.pros-cons__col--pros .pros-cons__item::before { background: var(--c-good); }
.pros-cons__col--cons .pros-cons__item::before { background: var(--c-bad); }

@media (min-width: 768px) {
  .pros-cons__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
}

/* =========================================================== how-to-steps == */

.how-to-steps { margin-top: var(--sp-section); }

.how-to-steps__title { margin-bottom: var(--sp-5); }

.how-to-steps__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  counter-reset: шаг;
}

.how-to-steps__step {
  position: relative;
  min-width: 0;
  padding: var(--sp-5);
  padding-top: var(--sp-7);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  counter-increment: шаг;
}

/*
 * Номер шага - псевдоэлемент со счётчиком, а не цифра в тексте. Цифра в разметке
 * была бы числом на странице, которое приёмка обязана проследить до факта, и
 * порядковый номер выглядел бы как ссылка на пункт правил, которого нет.
 */
.how-to-steps__step::before {
  content: counter(шаг);
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-size: var(--t-tiny);
  font-weight: var(--fw-bold);
}

.how-to-steps__step-title {
  margin-bottom: var(--sp-2);
  font-size: var(--t-h4);
  color: var(--c-text);
}

.how-to-steps__step-text { color: var(--c-body); font-size: var(--t-small); }

@media (min-width: 768px) {
  .how-to-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .how-to-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =============================================================== link-hub == */

.link-hub { padding-block: var(--sp-section) 0; }

.link-hub__title { margin-bottom: var(--sp-3); }

.link-hub__intro {
  margin-bottom: var(--sp-5);
  color: var(--c-body);
  font-size: var(--t-lead);
}

.link-hub__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
}

.link-hub__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-width: 0;
  padding: var(--sp-5);
  padding-right: var(--sp-7);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  color: var(--c-body);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.link-hub__card:hover {
  border-color: var(--c-accent-line);
  background: var(--c-surface-2);
  color: var(--c-body);
}

.link-hub__label {
  color: var(--c-text);
  font-size: var(--t-h4);
  font-weight: var(--fw-semi);
  line-height: 1.3;
}
.link-hub__card:hover .link-hub__label { color: var(--c-accent-hi); }

.link-hub__desc { font-size: var(--t-small); line-height: 1.5; color: var(--c-dim); }

.link-hub__go {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--c-dim);
  border-right: 2px solid var(--c-dim);
  transform: rotate(45deg);
}
.link-hub__card:hover .link-hub__go { border-color: var(--c-accent); }

@media (min-width: 768px) {
  .link-hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .link-hub__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================ faq-accordion = */

.faq-accordion { padding-block: var(--sp-section) 0; }

.faq-accordion__title { margin-bottom: var(--sp-5); }

.faq-accordion__list {
  display: grid;
  gap: var(--sp-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  padding: var(--sp-2);
}

.faq-accordion__qa {
  border-radius: var(--r-md);
  background: var(--c-surface-2);
}
.faq-accordion__qa[open] { background: var(--c-surface-3); }

.faq-accordion__q {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: 52px;
  padding: var(--sp-4) var(--sp-5);
  color: var(--c-text);
  font-weight: var(--fw-semi);
  cursor: pointer;
  list-style: none;
}
.faq-accordion__q::-webkit-details-marker { display: none; }
.faq-accordion__q:hover { color: var(--c-text-strong); }

.faq-accordion__q-text { flex: 1 1 auto; min-width: 0; }

/* Плюс, который становится минусом. Псевдоэлемент, а не иконка: один запрос
   меньше, и он не может не доехать. */
.faq-accordion__q::after {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 5px;
  background:
    linear-gradient(var(--c-accent), var(--c-accent)) center/14px 2px no-repeat,
    linear-gradient(var(--c-accent), var(--c-accent)) center/2px 14px no-repeat;
  transition: transform var(--dur) var(--ease);
}
.faq-accordion__qa[open] .faq-accordion__q::after {
  background: linear-gradient(var(--c-accent), var(--c-accent)) center/14px 2px no-repeat;
  transform: rotate(180deg);
}

.faq-accordion__a {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--c-body);
}

/* ================================================================ cta-band = */

.cta-band {
  margin-top: var(--sp-section);
  background:
    radial-gradient(70% 140% at 20% 0%, var(--c-glow-a), transparent 60%),
    var(--c-bg-alt);
  border-block: 1px solid var(--c-line-soft);
}

.cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: center;
}

.cta-band__text { min-width: 0; }

.cta-band__title { font-size: var(--t-h2); }

.cta-band__lead { margin-top: var(--sp-3); color: var(--c-body); }

.cta-band__action { display: grid; gap: var(--sp-3); justify-items: start; }

.cta-band__note { color: var(--c-dim); font-size: var(--t-tiny); }

@media (min-width: 1024px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--sp-8); }
  .cta-band__action { justify-items: stretch; }
  .cta-band__cta { width: 100%; }
}

/* ================================================================= rg-note = */

.rg-note {
  display: block;
  margin-top: var(--sp-section);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--c-line-soft);
  background: var(--c-bg);
}

.rg-note__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: center;
}

.rg-note__text { color: var(--c-dim); font-size: var(--t-small); }

.rg-note__link {
  justify-self: start;
  color: var(--c-money);
  font-size: var(--t-small);
  font-weight: var(--fw-semi);
}
.rg-note__link:hover { color: var(--c-money); }

@media (min-width: 768px) {
  .rg-note__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-6); }
}

/* ====================================================== last-updated-stamp = */

/*
 * Блок остался в библиотеке, но на страницах этого сайта его нет: печать даты
 * выводит layout, один раз и внизу. Оформление держится здесь на случай, если блок
 * поставят на страницу руками - тогда он хотя бы не будет выглядеть сломанным.
 */
.last-updated-stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-dim);
  font-size: var(--t-tiny);
}
.last-updated-stamp__date { color: var(--c-text); font-weight: var(--fw-semi); }
.last-updated-stamp__icon { display: inline-flex; }

/* ========================================================= СНИМКИ ЭКРАНА === *
 *
 * Картинка идёт во всю ширину рабочей зоны - требование владельца к блокам. Рамка и
 * скругление нужны потому, что кадры сняты с тёмного интерфейса: без границы снимок
 * сливается с фоном страницы, и читателю не видно, где кончается сайт и начинается
 * чужой скриншот.
 */

.shot {
  margin: 0;
  padding-block: var(--sp-6);
}

.shot__img {
  width: 100%;
  height: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--c-shadow-md);
}

.shot__caption {
  margin-top: var(--sp-3);
  color: var(--c-dim);
  font-size: var(--t-small);
  line-height: 1.5;
}

/* ============================================================ ГАЛЕРЕЯ ====== *
 *
 * Рельса, а не столбик: три снимка шириной в страницу, поставленные друг под друга,
 * дают экран прокрутки пустоты между абзацами.
 *
 * Прокрутка рельсы работает БЕЗ JS - это overflow-x и scroll-snap, а не скрипт.
 * role и tabindex на обёртке обязательны: без них рельса недоступна с клавиатуры.
 * Это типовой незаметный дефект - обёрнуто много, доступно ничего.
 */

.gallery {
  padding-block: var(--sp-7);
}

.gallery:nth-of-type(even) { background: var(--c-bg-alt); }

.gallery__title {
  font-size: var(--t-h2);
  line-height: 1.3;
  margin-bottom: var(--sp-3);
}

.gallery__intro {
  color: var(--c-body);
  margin-bottom: var(--sp-5);
}

.gallery__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(88%, 620px);
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-3);
  scrollbar-width: thin;
}

.gallery__rail:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 4px;
}

.gallery__item {
  margin: 0;
  scroll-snap-align: start;
  min-width: 0;
}

.gallery__img {
  width: 100%;
  height: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
}

.gallery__caption {
  margin-top: var(--sp-2);
  color: var(--c-dim);
  font-size: var(--t-small);
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .gallery__rail { grid-auto-columns: min(62%, 720px); }
}

/* ================================================== ГЛАВНАЯ: ПЕРВЫЙ ЭКРАН == *
 *
 * Отдельный вид только для главной. Внутренние страницы открываются спокойным
 * hero-brand; здесь сайт представляется, и первый экран имеет право быть громче.
 *
 * СВЕЧЕНИЕ - ДВА РАДИАЛЬНЫХ ПЯТНА, А НЕ ПЛИТКА. ЗАМЕР 29.08.2026: плиточный
 * повторяющийся градиент на фоне героя вешал отрисовку - страница отдавала белый
 * кадр при прокрутке при живом DOM и чистой консоли. Два неповторяющихся пятна
 * такого не дают: браузер рисует их один раз.
 *
 * Свечение лежит в отдельном слое с pointer-events:none и aria-hidden - оно не
 * ловит клики и не читается скринридером.
 */

.hero-home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--sp-8) var(--sp-7);
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-line-soft);
}

.hero-home__glow {
  position: absolute;
  /*
   * ПО ГОРИЗОНТАЛИ СЛОЙ НЕ ВЫЛЕЗАЕТ ЗА ОКНО. Сначала здесь стояло -10% с обеих
   * сторон, чтобы у пятен не было видно края. Приёмка на это ответила
   * предупреждением: «содержимое шире окна на 36px, но скролла нет» - то есть
   * переполнение спрятано клипом, а не отсутствует. Свод такое пропускает, но
   * просит посмотреть глазами, и предупреждение пришлось бы объяснять каждый
   * прогон. Пятна и так гаснут внутри: их центры на 22% и 82%, до краёв они не
   * доходят. Вертикальный вылет оставлен - он ширину документа не двигает.
   */
  inset: -20% 0 auto 0;
  height: 120%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48% 55% at 22% 18%, var(--c-glow-a), transparent 70%),
    radial-gradient(42% 50% at 82% 30%, var(--c-glow-b), transparent 72%);
}

.hero-home__inner {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--sp-4);
}

/*
 * Ширина ограничена у ОБЁРТКИ первого экрана, а не у абзаца.
 *
 * В23 запрещает max-width на p и h1-h6 - и разрешает его на контейнерах, ГЕРОЯХ,
 * модалках и карточках сетки, перечисляя их поимённо. Разница не формальная: правило
 * владельца про то, чтобы текст страницы шёл по ширине сайта, а не жался в колонку;
 * первый экран - не текст страницы, это его вывеска. Без ограничения лид растягивался
 * на 1200px, то есть около ста двадцати знаков в строке при рекомендованных 95.
 */
@media (min-width: 1024px) {
  .hero-home__inner {
    max-width: 62rem;
    margin-inline: auto;
  }
}

.hero-home__logo {
  width: 200px;
  height: auto;
  margin-bottom: var(--sp-2);
}

/* ---- чипы над заголовком ---- */

.hero-home__badges,
.hero-home__offers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-home__badge {
  padding: 6px 14px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-body);
  font-size: var(--t-tiny);
  letter-spacing: 0.01em;
}

.hero-home__title {
  font-size: var(--t-hero);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
}

.hero-home__lead {
  color: var(--c-body);
  font-size: var(--t-lead);
  margin: 0;
}

/* ---- чипы с числами предложения: акцентные, их читают первыми ---- */

.hero-home__offer {
  padding: 8px 16px;
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-pill);
  background: var(--c-accent-soft);
  color: var(--c-text-strong);
  font-size: var(--t-small);
  font-weight: var(--fw-bold);
}

/* ---- вердикт словами вместо балла ---- */

.hero-home__verdict {
  max-width: 62ch;
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--c-money);
  border-radius: var(--r-sm);
  background: var(--c-money-soft);
  color: var(--c-text);
  font-size: var(--t-small);
  line-height: 1.55;
  text-align: left;
}

/*
 * max-width здесь законен: В23 запрещает его на p и h1-h6 как РАСКЛАДКУ прозы,
 * а это врезка-карточка - свод называет карточки среди законных мест прямо.
 */

.hero-home__verdict-label {
  display: block;
  color: var(--c-money);
  font-size: var(--t-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.hero-home__cta { margin-top: var(--sp-2); }

/* ---- полоса ключевых значений ---- */

.hero-home__stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  margin: var(--sp-7) 0 0;
}

.hero-home__stat {
  padding: var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
}

.hero-home__stat-label {
  color: var(--c-dim);
  font-size: var(--t-tiny);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hero-home__stat-value {
  margin: 4px 0 0;
  color: var(--c-text-strong);
  font-size: var(--t-h4);
  font-weight: var(--fw-bold);
  line-height: 1.35;
}

@media (min-width: 480px) {
  .hero-home__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .hero-home { padding-block: var(--sp-9) var(--sp-8); }
  .hero-home__logo { width: 240px; }
}

@media (min-width: 1024px) {
  .hero-home__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================ ХАБ С РАЗБИВКОЙ ПО ГРУППАМ === *
 *
 * Секции наследуют сетку карточек у link-hub целиком - у них общий класс
 * .link-hub__grid. Своего здесь только заголовок группы, счётчик и разделитель:
 * вторая сетка карточек рядом с первой разошлась бы с ней при первой же правке.
 */

.link-hub--sections .link-hub__intro { margin-bottom: var(--sp-6); }

.hub-sec { margin-top: var(--sp-7); }
.hub-sec:first-of-type { margin-top: 0; }

.hub-sec__title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-1);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--t-h3);
  line-height: 1.3;
}

.hub-sec__desc {
  margin: 0 0 var(--sp-4);
  color: var(--c-dim);
  font-size: var(--t-small);
  line-height: 1.5;
}