/**
 * Стили страницы «Главная» (новый дизайн).
 *
 * Файл подключается ТОЛЬКО на этом шаблоне. Все селекторы вложены
 * в `.home-page`, поэтому основной style.css темы не затрагивается.
 * Собран по образцу learn.css/service.css: тот же набор токенов,
 * тот же .btn, та же логика посадки под фиксированную шапку.
 *
 * Формула плавных размеров та же, что у всех страниц редизайна:
 * clamp(min, min + (max-min)/1530*100 + (max-min)/1530*vw, max) —
 * линейная интерполяция между 390px и 1920px ширины экрана.
 */

@font-face {
  font-family: "HomeUnbounded";
  src: url("../fonts/Unbounded-Medium.woff") format("woff");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HomeUnbounded";
  src: url("../fonts/Unbounded-Bold.woff") format("woff");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HomeUnbounded";
  src: url("../fonts/Unbounded-Black.woff") format("woff");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HomeManrope";
  src: url("../fonts/Manrope-Medium.woff") format("woff");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HomeManrope";
  src: url("../fonts/Manrope-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HomeManrope";
  src: url("../fonts/Manrope-Bold.woff") format("woff");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

/* --- нейтрализация основного style.css --------------------------------
   Секции здесь называются не так, как на старой главной (.hero, .studio,
   .work-description и т.п.), поэтому конфликтов классов, как на learn.css/
   service.css, тут не возникает — специально выбирал имена `.home-*`. */

/* --- токены ------------------------------------------------------------ */

.home-page {
  --white: #f5f4f2;
  --sub-white: #ffffff;
  --black: #2b2a29;
  --black-soft: #3d3b39;
  --black-5: rgba(43, 42, 41, 0.05);
  --black-14: rgba(43, 42, 41, 0.14);
  --black-30: rgba(43, 42, 41, 0.3);
  --black-50: rgba(43, 42, 41, 0.5);
  --white-14: rgba(255, 255, 255, 0.14);
  --white-22: rgba(255, 255, 255, 0.22);
  --white-38: rgba(255, 255, 255, 0.38);
  --main-color: #e31e24;
  --main-color-hover: #b4171c;
  --main-color-10: rgba(227, 30, 36, 0.1);
  --surface: #edebe8;
  --border-color: #dcd8d3;
  --text-muted: #5c5853;
  --text-mono: #8a8580;
  --text-on-dark: #b5b0aa;
  --border-on-dark: #4a4846;
  --main-font: "HomeManrope", "Manrope-Medium", system-ui, sans-serif;
  --sub-font: "HomeUnbounded", "Unbounded-Bold", sans-serif;
  --st-border-radius: clamp(20px, 17.572815534px + 0.6472491909vw, 30px);
  --radius-lg: clamp(22px, 19.0873786408px + 0.7766990291vw, 34px);
  --radius-md: clamp(18px, 15.572815534px + 0.6472491909vw, 28px);
  --radius-pill: 999px;
  --grid-gap: clamp(12px, 9.572815534px + 0.6472491909vw, 22px);
  --container-pad: clamp(20px, -4.2718446602px + 6.4724919094vw, 120px);
  --section-gap: clamp(60px, 40.5825242718px + 5.1779935275vw, 140px);
  --section-gap-sm: clamp(44px, 30.4077669903px + 3.6245954693vw, 100px);
  --fz-h1: clamp(31px, 19.5922330097px + 3.0420711974vw, 78px);
  --fz-h2: clamp(26px, 18.7184466019px + 1.9417475728vw, 56px);
  --fz-h3: clamp(20px, 16.6019417476px + 0.9061488673vw, 34px);
  --fz-h4: clamp(18px, 15.572815534px + 0.6472491909vw, 28px);
  --fz-card-title: clamp(18px, 16.786407767px + 0.3236245955vw, 23px);
  --fz-body: clamp(15px, 13.786407767px + 0.3236245955vw, 20px);
  --fz-body-sm: clamp(14px, 13.2718446602px + 0.1941747573vw, 17px);
  --fz-cta: clamp(26px, 17.7475728155px + 2.2006472492vw, 60px);
  /* новые размеры для этой страницы, посчитаны по той же формуле (390→1920px) */
  --fz-quote: clamp(20px, 16.9411764706px + 0.7843137255vw, 32px);
  /* тот же размер, что и у оригинального FAQ-аккордеона (learn.css/service.css) —
     здесь блок только перекрашен, а не пересчитан по размеру шрифта. */
  --fz-faq: clamp(16px, 14.5436893204px + 0.3883495146vw, 22px);
  --fz-num-giant: clamp(60px, 47.2549019608px + 3.2679738562vw, 110px);

  scroll-behavior: smooth;
  margin: 0;
  color: var(--black);
  font-family: var(--main-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;

  /* Отступ под фиксированную шапку — её реальную высоту на каждый момент
     проставляет assets/js/header-offset.js. Запасные значения ниже — по
     самому высокому состоянию шапки на случай, если скрипт не отработал. */
  --header-offset: 250px;
}
@media (max-width: 991.98px) {
  .home-page {
    --header-offset: 170px;
  }
}
@media (max-width: 479.98px) {
  .home-page {
    --header-offset: 120px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-page {
    scroll-behavior: auto;
  }
  .home-page *,
  .home-page *::before,
  .home-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- база --------------------------------------------------------------- */

.home-page .home-container {
  width: 100%;
  max-width: calc(1680px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  box-sizing: border-box;
}
.home-page h1,
.home-page h2,
.home-page h3,
.home-page h4 {
  margin: 0;
  font-family: var(--sub-font);
}
.home-page p {
  margin: 0;
  font-family: var(--main-font);
}
.home-page ul,
.home-page ol {
  margin-block: 0;
  padding: 0;
  list-style: none;
}
.home-page a {
  text-decoration: none;
  color: inherit;
}
.home-page img {
  max-width: 100%;
  display: block;
}
.home-page .accent {
  color: var(--main-color);
}
.home-page a:focus-visible,
.home-page button:focus-visible,
.home-page summary:focus-visible,
.home-page [tabindex]:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 3px;
  border-radius: 4px;
}
.home-page [id] {
  scroll-margin-top: calc(var(--header-offset) + 24px);
}

/* --- фото в рамке (как на других страницах редизайна) ------------------- */

.home-page .media {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: var(--surface);
}
.home-page .media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-page .media--portrait {
  aspect-ratio: 4 / 5;
}
@media (max-width: 767.98px) {
  .home-page .media--portrait {
    aspect-ratio: 4 / 3;
  }
}

/* --- кнопки (идентично learn.css/service.css) --------------------------- */

.home-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1vw, 14px);
  padding-block: clamp(6px, 0.9vw, 10px);
  padding-inline-start: clamp(22px, 2.6vw, 36px);
  padding-inline-end: clamp(6px, 0.8vw, 10px);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--main-font);
  font-weight: 700;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
  white-space: nowrap;
}
.home-page .btn__icon {
  flex-shrink: 0;
  width: clamp(32px, 2.4vw, 40px);
  height: clamp(32px, 2.4vw, 40px);
}
.home-page .btn__icon rect {
  fill: currentColor;
  fill-opacity: 0.2;
  transition: fill-opacity 0.25s ease;
}
.home-page .btn__icon path {
  fill: currentColor;
}
.home-page .btn:hover .btn__icon rect {
  fill-opacity: 0.34;
}
@media (max-width: 560px) {
  .home-page .btn {
    display: flex;
    width: 100%;
    justify-content: space-between;
    text-align: left;
    white-space: normal;
    line-height: 1.25;
  }
}
.home-page .btn--primary {
  background: var(--main-color);
  border-color: var(--main-color);
  color: var(--sub-white);
}
.home-page .btn.btn--primary:hover {
  opacity: 0.85;
}
.home-page .btn--dark {
  background: var(--black);
  border-color: var(--black);
  color: var(--sub-white);
}
.home-page .btn.btn--dark:hover {
  opacity: 0.85;
}
.home-page .btn--light {
  background: var(--sub-white);
  border-color: var(--sub-white);
  color: var(--main-color);
}
.home-page .btn.btn--light:hover {
  opacity: 0.88;
}
.home-page .btn--outline-light {
  background: transparent;
  border-color: var(--white-38);
  color: var(--sub-white);
}
.home-page .btn.btn--outline-light:hover {
  background: var(--sub-white);
  border-color: var(--sub-white);
  color: var(--black);
}

/* =========================================================================
   1. ХИРО-СЛАЙДЕР
   ========================================================================= */

.home-page .home-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 429.4757281553px + 22.0064724919vw, 900px);
  padding-block: clamp(60px, 50.2912621359px + 2.5889967638vw, 100px);
  padding-top: calc(clamp(60px, 50.2912621359px + 2.5889967638vw, 100px) + var(--header-offset));
  background: var(--black);
  color: var(--sub-white);
}
@media (max-width: 991.98px) {
  .home-page .home-hero {
    min-height: 720px;
  }
}
@media (max-width: 560px) {
  .home-page .home-hero {
    min-height: 660px;
  }
}
.home-page .home-hero__slider {
  position: absolute;
  inset: 0;
}
.home-page .home-hero__slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.home-page .home-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Общее затемнение баннеров, см. --hero-overlay в style.css. Свой градиент
     тут шёл сверху вниз и был самым светлым ровно посередине высоты — там,
     где у главной и стоит заголовок. */
  background: var(--hero-overlay);
  pointer-events: none;
}
@media (max-width: 991.98px) {
  .home-page .home-hero__overlay {
    background: var(--hero-overlay-narrow);
  }
}
.home-page .home-hero__content {
  position: relative;
  z-index: 2;
  /* max-width здесь НЕ ставить: .home-container уже даёт width:100% —
     без max-width блок остаётся единственным flex-item'ом на всю ширину
     баннера и текст естественно прижат к левому краю. Как только ширину
     блока обрезать max-width'ом, margin-inline:auto (тоже из .home-container)
     на flex-item съедает свободное место и центрирует блок по центру баннера —
     ровно так уже было и это баг, а не «текст по центру» по макету. Ограничивать
     ширину текста нужно у заголовка/лида (max-width/ch), а не у всего блока. */
  /* Текст лежит поверх слайдера. Swiper слушает свайп/драг только на своей
     обёртке — если начать жест над текстом, вместо смены слайда браузер
     выделяет текст (мышь) или просто ничего не происходит (тач). Пропускаем
     события сквозь весь блок и возвращаем их только интерактивным детям
     (кнопкам), чтобы свайп в любой точке баннера доходил до слайдера,
     а клики по кнопкам продолжали работать. */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.home-page .home-hero__content a,
.home-page .home-hero__content button {
  pointer-events: auto;
  -webkit-user-select: auto;
  user-select: auto;
}
.home-page .home-hero__title {
  /* Размеры — общие для баннеров всех страниц редизайна, см. блок --hero-* в
     style.css. --fz-h1 (до 78px) тут не подходит, это токен для более крупных
     заголовков в других блоках страницы. */
  max-width: var(--hero-title-max);
  font-family: var(--sub-font);
  font-weight: var(--hero-fw-title);
  font-size: var(--hero-fz-title);
  line-height: var(--hero-lh-title);
  letter-spacing: var(--hero-ls-title);
  text-transform: uppercase;
  margin: 0 0 clamp(18px, 1.4vw, 28px);
  text-wrap: pretty;
}
.home-page .home-hero__lead {
  max-width: var(--hero-lead-max);
  font-weight: var(--hero-fw-lead);
  font-size: var(--hero-fz-lead);
  line-height: var(--hero-lh-lead);
  color: var(--sub-white);
  margin: 0 0 clamp(24px, 2vw, 36px);
}
.home-page .home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.home-page .home-hero__pagination {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(24px, 2vw, 40px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
}
.home-page .home-hero__pagination .swiper-pagination-bullet {
  /* В общем style.css у .swiper-pagination-bullet есть padding:11px 15px
     и font-size:15px (это стиль текстовых пилюль другого слайдера) —
     обнуляем всё, что оттуда протекает, иначе точка раздувается в блин. */
  width: 12px;
  height: 12px;
  padding: 0;
  margin: 0;
  font-size: 0;
  line-height: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.55);
  opacity: 1;
  cursor: pointer;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.home-page .home-hero__pagination .swiper-pagination-bullet-active {
  width: 36px;
  background: var(--main-color);
}

/* =========================================================================
   2. «ОПЫТ, КОТОРЫЙ СТАЛ ОСНОВОЙ ОБУЧЕНИЯ» — история в три шага
   Октябрь 2026, по запросу «блок скучный, форму можно менять, цифры не
   обязательны». Было: три одинаковые белые карточки с бледной цифрой.
   Стало: графитовая полоса, под заголовком широкая картинка-настроение
   (мастерская в расфокусе, поле «Фон-полоса»), под ней шаги на красной
   линии. Шаг подписан первым словом своего текста — «Сначала / Потом /
   Поэтому», — последнее красное: это вывод.
   Картинка вписана по ширине с обрезкой сверху и снизу; её фон подогнан
   уровнями ровно под #232221, а края всё равно гасятся градиентом — на
   стыке с секцией не должно быть видно прямоугольника.
   ========================================================================= */

.home-page .home-why {
  --why-bg: #232221;
  padding-block: var(--section-gap);
  background: var(--why-bg);
  color: var(--sub-white);
}
.home-page .home-why__title {
  max-width: 780px;
  font-weight: 700;
  font-size: var(--fz-h2);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 clamp(32px, 2.6vw, 48px);
}
.home-page .home-why.has-bg .home-why__title {
  margin-bottom: clamp(8px, 1.2vw, 20px);
}
.home-page .home-why__band {
  position: relative;
  height: clamp(220px, 30.5vw, 560px);
}
.home-page .home-why__band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
.home-page .home-why__band::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--why-bg) 0%, rgba(35, 34, 33, 0) 22%, rgba(35, 34, 33, 0) 60%, var(--why-bg) 100%),
    linear-gradient(90deg, rgba(35, 34, 33, 0.5), transparent 18%, transparent 82%, rgba(35, 34, 33, 0.5));
  pointer-events: none;
}
/* Линия истории: красная черта по верху шагов, на ней точки. Шаги
   заезжают на низ картинки, чтобы полоса и линия читались одним целым. */
.home-page .home-why__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  padding-top: clamp(26px, 2.4vw, 34px);
  border-top: 2px solid var(--main-color);
}
.home-page .home-why.has-bg .home-why__steps {
  margin-top: clamp(-30px, -2vw, -16px);
}
.home-page .why-step {
  position: relative;
  min-width: 0;
}
.home-page .why-step__dot {
  position: absolute;
  left: 0;
  top: calc(clamp(26px, 2.4vw, 34px) * -1 - 10px);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--main-color);
  box-shadow: 0 0 0 6px var(--why-bg);
}
.home-page .why-step__word {
  display: block;
  margin-bottom: 12px;
  font-family: var(--sub-font);
  font-weight: 700;
  font-size: clamp(22px, 19.4509803922px + 0.6535947712vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.home-page .why-step:last-child .why-step__word {
  color: var(--main-color);
}
.home-page .why-step__text {
  max-width: 32ch;
  font-weight: 600;
  font-size: clamp(16px, 15.4901960784px + 0.1307189542vw, 18px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}
/* Телефон: шаги столбиком, линия идёт вертикально слева через точки */
@media (max-width: 767.98px) {
  .home-page .home-why__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding: 0 0 0 30px;
    border-top: 0;
  }
  .home-page .home-why.has-bg .home-why__steps {
    margin-top: -10px;
  }
  .home-page .home-why__steps::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--main-color);
  }
  .home-page .why-step__dot {
    left: -30px;
    top: 4px;
  }
}

/* =========================================================================
   3. «БОЛЕЕ 20 ЛЕТ С АВТОМОБИЛЯМИ» — фото, цитата, факты
   ========================================================================= */

.home-page .home-expertise {
  padding-block: var(--section-gap);
}
.home-page .home-expertise__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 2vw, 48px);
  align-items: start;
  margin-bottom: clamp(32px, 2.6vw, 48px);
}
@media (max-width: 767.98px) {
  .home-page .home-expertise__head {
    grid-template-columns: minmax(0, 1fr);
  }
}
.home-page .home-expertise__title {
  font-weight: 700;
  font-size: var(--fz-h2);
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.home-page .home-expertise__title .accent {
  display: inline;
}
.home-page .home-expertise__lead {
  font-size: var(--fz-body);
  line-height: 1.65;
  color: var(--text-muted);
  text-align: right;
}
@media (max-width: 767.98px) {
  .home-page .home-expertise__lead {
    text-align: left;
  }
}
.home-page .home-expertise__body {
  display: grid;
  grid-template-columns: minmax(240px, 0.62fr) minmax(280px, 1fr);
  gap: clamp(24px, 2vw, 48px);
}
@media (max-width: 767.98px) {
  .home-page .home-expertise__body {
    grid-template-columns: minmax(0, 1fr);
  }
}
.home-page .home-expertise__photo {
  aspect-ratio: 3 / 4;
}
.home-page .home-expertise__col {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.3vw, 24px);
}
.home-page .home-expertise__quote {
  position: relative;
  margin: 0;
  padding: clamp(64px, 5vw, 96px) 0 0;
}
.home-page .home-expertise__quote p {
  position: relative;
  z-index: 1;
  font-family: var(--sub-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: var(--fz-quote);
  line-height: 1.45;
  text-align: right;
}
@media (max-width: 767.98px) {
  .home-page .home-expertise__quote p {
    text-align: left;
  }
}
/* Одна открывающая кавычка сверху слева — в макете фона у цитаты не было,
   только этот значок; svg-разметка прислана заказчиком напрямую (свой
   fill-opacity уже внутри файла, поэтому просто фон, а не CSS-маска). */
.home-page .home-expertise__quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: -0.15em;
  width: clamp(140px, 11vw, 190px);
  height: calc(clamp(140px, 11vw, 190px) * 125 / 144);
  background: url("data:image/svg+xml,%3Csvg width='144' height='125' viewBox='0 0 144 125' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M112.176 15.5889L126.785 29.833C115.706 41.3988 109.619 53.7559 108.523 66.9043H128.246V107.993H87.5225V69.0957C87.5225 50.5905 95.7402 32.7549 112.176 15.5889ZM41.5029 15.9541L55.7471 29.833C44.9118 43.4684 39.068 55.7038 38.2158 66.5391H58.3037V108.358H17.2148V76.583C17.2148 63.4346 19.1019 52.3558 22.876 43.3467C26.7718 34.2158 32.9808 25.085 41.5029 15.9541Z' fill='%23E31E24' fill-opacity='0.41'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}
/* В макете это сетка 3×2, а не колонка в один ряд (в исходнике каждая
   плашка шириной 277px при контейнере 857px — три в ряд, а не одна на всю
   ширину; изначально прочитал этот блок неверно). */
.home-page .home-expertise__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(24px, 2vw, 40px);
}
@media (max-width: 767.98px) {
  .home-page .home-expertise__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 479.98px) {
  .home-page .home-expertise__facts {
    grid-template-columns: minmax(0, 1fr);
  }
}
.home-page .home-expertise__col .btn {
  align-self: flex-start;
  margin-top: 4px;
}
.home-page .home-expertise__facts li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(96px, 7.5vw, 138px);
  padding: 18px 16px;
  border-radius: var(--radius-md);
  background: var(--black);
  color: var(--sub-white);
  font-family: var(--main-font);
  font-weight: 500;
  font-size: clamp(15px, 0.4vw + 13px, 18px);
  line-height: 1.3;
  text-align: center;
}

/* =========================================================================
   3a. «ДОКАЗАТЕЛЬСТВА ВМЕСТО ОБЕЩАНИЙ» — две карточки-указателя
   ========================================================================= */

.home-page .home-proof {
  padding-block: var(--section-gap-sm);
}
.home-page .home-proof__head {
  margin-bottom: clamp(28px, 2.2vw, 44px);
}
.home-page .home-proof__title {
  max-width: 20ch;
  font-weight: 700;
  font-size: var(--fz-h2);
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.home-page .home-proof__lead {
  margin: clamp(10px, 0.8vw, 16px) 0 0;
  font-family: var(--main-font);
  font-size: var(--fz-body);
  line-height: 1.6;
  color: var(--text-muted);
}
.home-page .home-proof__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 767.98px) {
  .home-page .home-proof__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.home-page .proof-card {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1vw, 18px);
  padding: clamp(24px, 2vw, 38px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--sub-white);
}
.home-page .proof-card__title {
  font-weight: 700;
  font-size: var(--fz-h3);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.home-page .proof-card__text {
  margin: 0;
  font-family: var(--main-font);
  font-size: var(--fz-body-sm);
  line-height: 1.6;
  color: var(--text-muted);
}
.home-page .proof-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* Тёмные карточки с 3D-предметом (октябрь 2026, «скучный и пресный»).
   Предмет — сгенерированная картинка той же породы, что иконки страницы
   приложения: графит, белый контровой свет, одна деталь светится красным.
   Стоит по центру карточки ЗА текстом; края растворены круговой маской,
   поэтому собственный фон картинки (≈ #232221) не читается квадратом.
   Текст прижат к низу, под ним затемнение — читается поверх предмета. */
.home-page .proof-card--art {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  justify-content: flex-end;
  aspect-ratio: 4 / 3;
  border: 0;
  background: #232221;
  color: var(--sub-white);
}
.home-page .proof-card__art {
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 50%;
  width: 96%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: translate(-50%, -56%);
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent);
  mask-image: radial-gradient(closest-side, #000 70%, transparent);
  pointer-events: none;
}
.home-page .proof-card--art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 40%, rgba(28, 27, 25, 0.6) 66%, rgba(28, 27, 25, 0.92) 100%);
  pointer-events: none;
}
.home-page .proof-card--art .proof-card__text {
  max-width: 44ch;
  color: rgba(255, 255, 255, 0.78);
}
.home-page .proof-card--art .btn {
  margin-top: clamp(4px, 0.5vw, 8px);
}
/* Кружок стрелки здесь сплошной красный с белой стрелкой — полупрозрачный
   розовый на тёмной карточке выбивался (замечание заказчика). Только в этих
   карточках: у остальных белых кнопок сайта кружок прежний. */
.home-page .proof-card--art .btn__icon rect,
.home-page .proof-card--art .btn:hover .btn__icon rect {
  fill: var(--main-color);
  fill-opacity: 1;
}
.home-page .proof-card--art .btn__icon path {
  fill: var(--sub-white);
}
/* Ноутбук: карточки ~440px, текст занимает больше высоты — предмет мельче */
@media (min-width: 992px) and (max-width: 1299.98px) {
  .home-page .proof-card__art {
    width: 82%;
    transform: translate(-50%, -64%);
  }
}
/* Планшет: две карточки в ряд по ~330px — заголовок налезал на предмет.
   Здесь карточки одна под другой, шире и ниже, предмет поменьше. */
@media (max-width: 991.98px) {
  .home-page .home-proof__grid--art {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-page .proof-card--art {
    aspect-ratio: 16 / 10;
  }
  .home-page .proof-card__art {
    width: 68%;
    transform: translate(-50%, -62%);
  }
}
/* На узких карточках тексту и кнопке не хватает высоты — растёт по содержимому */
@media (max-width: 479.98px) {
  .home-page .proof-card--art {
    aspect-ratio: auto;
    min-height: 420px;
  }
  .home-page .proof-card__art {
    width: 120%;
    transform: translate(-50%, -62%);
  }
}

/* =========================================================================
   4. «НАПРАВЛЕНИЯ» — асимметричная сетка карточек
   ========================================================================= */

.home-page .home-directions {
  padding-block: var(--section-gap);
}
.home-page .home-directions__title {
  font-weight: 700;
  font-size: var(--fz-h2);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 clamp(28px, 2.2vw, 40px);
}
.home-page .home-directions__grid {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
}
.home-page .home-directions__row {
  display: grid;
  gap: var(--grid-gap);
  align-items: stretch;
}
.home-page .home-directions__row--top {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr);
}
.home-page .home-directions__row--bottom {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.7fr);
}
@media (max-width: 767.98px) {
  .home-page .home-directions__row--top,
  .home-page .home-directions__row--bottom {
    grid-template-columns: minmax(0, 1fr);
  }
}
.home-page .home-directions__stack {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
}
/* Когда в колонке осталась одна карточка (направлений стало три), она должна
   занять всю высоту ряда, иначе под ней зияет пустота рядом с тёмной. */
.home-page .home-directions__stack > .direction-card:only-child {
  flex: 1;
}
.home-page .direction-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2vw, 38px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1vw, 18px);
}
.home-page .direction-card__title {
  font-weight: 700;
  font-size: var(--fz-h3);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.home-page .direction-card__text {
  font-family: var(--main-font);
  font-size: var(--fz-body-sm);
  line-height: 1.6;
  max-width: 46ch;
}
.home-page .direction-card__text p + p {
  margin-top: 0.9em;
}
.home-page .direction-card .btn {
  margin-top: auto;
  align-self: flex-start;
}
.home-page .direction-card--dark {
  background: var(--black);
  color: var(--sub-white);
}
.home-page .direction-card--dark .direction-card__text {
  color: rgba(255, 255, 255, 0.79);
}
.home-page .direction-card--outline {
  border: 1px solid var(--border-color);
}
.home-page .direction-card--outline .direction-card__text {
  color: var(--text-muted);
}
.home-page .direction-card--grey {
  background: #b2b3b3;
  color: var(--sub-white);
}
.home-page .direction-card--grey .direction-card__text {
  color: rgba(255, 255, 255, 0.85);
}
.home-page .direction-card--accent {
  background: var(--main-color);
  color: var(--sub-white);
  justify-content: flex-start;
}
.home-page .direction-card--accent .direction-card__text {
  color: rgba(255, 255, 255, 0.85);
}
.home-page .direction-card--accent .btn {
  margin-top: clamp(16px, 1.3vw, 24px);
}
.home-page .direction-card--image {
  padding: 0;
  min-height: 260px;
}
.home-page .direction-card--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================================
   5. ТЁМНЫЙ ИТОГОВЫЙ БЛОК — список + фото
   ========================================================================= */

.home-page .home-practice {
  position: relative;
  overflow: hidden;
  background: var(--black);
  color: var(--sub-white);
}
/* Декоративные кольца — готовый svg от заказчика (два кропнутых круга,
   viewBox нарочно уже самих path — так и должно быть, это обрезка кадром
   из Figma, а не ошибка экспорта). Полностью белый, без затемнения. */
.home-page .home-practice__rings {
  position: absolute;
  right: -3%;
  top: 0%;
  width: 600px;
  height: auto;
  pointer-events: none;
}
@media (max-width: 767.98px) {
  .home-page .home-practice__rings {
    display: none;
  }
}
.home-page .home-practice__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--section-gap-sm) clamp(48px, 4vw, 80px);
}
.home-page .home-practice__title {
  max-width: 780px;
  font-weight: 700;
  font-size: var(--fz-h2);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 clamp(24px, 2vw, 36px);
}
.home-page .home-practice__list {
  max-width: 800px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Раньше тут была «гармошка» (details.faq-item), переиспользованная с
   страницы обучения. По правкам заказчика от 04.09.2026 блок подводит итог
   по всем направлениям — разворачивать нечего, остался простой список
   с теми же разделителями и тем же кеглем, что были у вопросов. */
.home-page .practice-item {
  border-bottom: 1px solid var(--white-14);
  padding: clamp(18px, 1.4vw, 26px) 2px;
}
.home-page .practice-item__title {
  display: block;
  font-family: var(--sub-font);
  font-weight: 700;
  font-size: var(--fz-faq);
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.home-page .practice-item__text {
  margin: 0.6em 0 0;
  font-size: var(--fz-body);
  line-height: 1.7;
  color: var(--text-on-dark);
}
.home-page .home-practice__photo {
  position: relative;
  margin-top: clamp(-64px, -5vw, -24px);
}
.home-page .home-practice__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Раньше уходило в полную прозрачность после верхних 30% — фото оставалось
     совсем незатемнённым. Теперь верх так же сливается с чёрным фоном
     секции, а дальше держится ровное затемнение по всей фотографии. */
  background: linear-gradient(180deg, var(--black) 0%, rgba(43, 42, 41, 0.45) 30%, rgba(43, 42, 41, 0.32) 100%);
  pointer-events: none;
}
.home-page .home-practice__photo img {
  width: 100%;
  height: clamp(320px, 32vw, 620px);
  object-fit: cover;
}

/* =========================================================================
   6. КРАСНЫЙ БЛОК ПРИЗЫВА (как на странице «Обучение»)
   ========================================================================= */

.home-page .cta-section {
  background: var(--surface);
  padding-block: var(--section-gap-sm) var(--section-gap);
}
.home-page .cta-card {
  position: relative;
  background: var(--main-color);
  color: var(--sub-white);
  border-radius: 56px;
  padding: var(--section-gap) 60px var(--section-gap-sm);
  text-align: center;
}
@media (max-width: 991.98px) {
  .home-page .cta-card {
    border-radius: 32px;
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media (max-width: 560px) {
  .home-page .cta-card {
    border-radius: 24px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.home-page .cta-card__badge {
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
  background: var(--sub-white);
  border-radius: var(--radius-md);
  padding: 20px 34px;
  box-shadow: 0 34px 64px -26px rgba(0, 0, 0, 0.4);
}
.home-page .cta-card__badge span {
  font-family: var(--sub-font);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--main-color);
}
@media (max-width: 700px) {
  .home-page .cta-card__badge {
    position: static;
    transform: none;
    white-space: normal;
    display: inline-block;
    margin: 0 0 26px;
  }
}
.home-page .cta-card__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 60px;
}
@media (max-width: 991.98px) {
  .home-page .cta-card__inner {
    padding: 0;
  }
}
.home-page .cta-card__title {
  font-family: var(--sub-font);
  font-weight: 800;
  font-size: var(--fz-cta);
  line-height: 1.1;
  letter-spacing: -0.038em;
  margin: 0 0 26px;
}
.home-page .cta-card__lead {
  margin: 0 0 44px;
  font-size: var(--fz-body);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
}
.home-page .cta-card__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}