/* ==========================================================================
   Экосистема 99Percentile – главная страница

   Источник: Figma нода 32702:3923 (1920×12395, 15 прямых детей).
   Ноды секций перечислены в _figma/02-screens/glavnaya.md, значения по
   каждой секции сняты через get_design_context, а не подобраны на глаз.

   ПРАВИЛА ФАЙЛА
   • Цвета, кегли, радиусы и отступы берутся из variables.css. Литерал
     остаётся только там, где в макете есть значение, для которого токена
     нет – каждый такой случай подписан комментарием.
   • Теней нет ни в одной секции: в макете их нет вообще (см. variables.css).
   • Hover / focus / active не описаны: в макете эти состояния не нарисованы.
     Появившийся здесь :hover – отсебятина.

   АДАПТИВ
   Мобильного макета НЕТ: нарисован только ПК 1920 (плюс единственный
   фрагмент хиро 393×669). Поэтому адаптив тут минимальный – он не
   выдумывает несуществующий мобильный дизайн, а только не даёт вёрстке
   разъехаться и убирает горизонтальный скролл. Такие правила помечены
   «[АДАПТИВ – в макете нет]».
   ========================================================================== */

.front-page {
  /* Колонка секций: gap надёжнее margin – без схлопывания и ровно
     --section-gap (140px) между каждыми соседними блоками. */
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  padding-bottom: var(--section-gap);

  /* --- Кегли, которых нет в variables.css -------------------------------- */
  /* В разборе замерена только секция 1, поэтому в токены попали H1/H3/body.
     Значения ниже сняты с конкретных нод главной. Когда дизайнер вынесет их
     в переменные Figma – переехать отсюда в variables.css. */

  --fs-section-title: 36px;   /* h2 всех секций. --fs-h2 = 28px, не подходит */
  --fs-card-lead:     32px;   /* текст карточки «Сложность поступления»      */
  --fs-card-title:    28px;   /* заголовок карточки траектории               */
  --fs-cta-title:     40px;   /* заголовок секции записи на консультацию     */
  --fs-cta-lead:      28px;   /* подзаголовок там же                         */
  --fs-eyebrow:       14px;   /* надзаголовок карточек финальной сетки       */

  /* Локальный трекинг заголовков секций главной (раньше −6 %). */
  --ls-tight: -0.02em;

  /* Радиус 24px. В variables.css: 8 / 12 / 16 / 999. Карточки секций
     «Подготовка к экзаменам», «Академические программы», «Полезные
     материалы» и финальной сетки – 24. */
  --radius-24: 24px;

  /* Прозрачность вторичного текста. В макете это opacity слоя, а не
     отдельный цвет – поэтому и здесь opacity, а не новый токен. */
  --opacity-muted: .6;
}

/* Логическое разделение секций – только через gap контейнера выше.
   margin у соседних section обнуляем, чтобы не сложилось 140+140. */
.front-page > section + section { margin-top: 0; }

/* ==========================================================================
   Общее для секций: метка раздела, заголовок, подзаголовок, кнопка справа

   Шапка повторяется в секциях 4, 5, 6, 8, 9, 11, 12 с одинаковыми
   отступами: метка → h2 16px, h2 → подзаголовок 32px, шапка → контент 48px.
   ========================================================================== */

.front-head {
  display: flex;
  /* Кнопка прижата к правому краю контейнера. В макете у секции 6 её центр
     разъезжается с подзаголовком на 8.5px, у секции 9 она на 5px выше, чем
     у секции 11 – расхождения макета. Выровнено по нижней кромке шапки. */
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
  flex-wrap: wrap;                     /* [АДАПТИВ – в макете нет] */
  margin-bottom: var(--space-48);
}

.front-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.front-head__text { min-width: 0; }

.front-head__label {
  display: flex;
  align-items: center;
  gap: var(--space-8);

  font-size: var(--fs-body);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  color: var(--color-text);

  margin-bottom: var(--space-16);
}

.front-head--center .front-head__label { justify-content: center; }

.front-head__dot {
  flex: 0 0 auto;
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

.front-head__title {
  /* Ширина текстовой ноды заголовка в макете: 1008 у секций 5, 6, 9 –
     именно она задаёт место переноса. У остальных заголовок короче и в
     1008 помещается целиком. */
  max-width: 1008px;
  font-size: var(--fs-section-title);
  /* 0.9 – так в макете у всех h2 без исключения. Значение меньше высоты
     строки шрифта, поэтому многострочные заголовки идут плотно. Это
     решение дизайнера, а не опечатка выгрузки. */
  line-height: .9;
  font-weight: var(--fw-h1);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
}

/* Вторая половина заголовка окрашена в text_blue – так в секциях 3 и 12 */
.front-head__accent { color: var(--color-link); }

.front-head__sub {
  margin-top: var(--space-32);
  max-width: 686px;                    /* ширина блока подзаголовка в макете */
  color: var(--color-text);
  opacity: var(--opacity-muted);
}

.front-head--center .front-head__sub { max-width: 761px; margin-inline: auto; }

/* Ширина подзаголовка отличается по секциям – она задаёт место переноса:
   секции 4 и 5 – 686 (значение по умолчанию выше), 6 и 9 – 647, 11 – 436. */
.front-tiles .front-head__sub { max-width: 647px; }
.front-res   .front-head__sub { max-width: 436px; }

/* --- Кнопка главной -------------------------------------------------------
   Все кнопки страницы одинаковы: высота 57, паддинги 8/20, радиус 999,
   gap 4, текст Inter Semi Bold 20 / 1.2 / −5 %. Ширина в макете задана по
   содержимому. Внутри компонента кнопки лежит слот-иконка 22×22, но во всех
   инстансах она hidden – поэтому не верстается; стрелка «→» это символ
   внутри самой текстовой строки. */

.front-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);

  height: var(--btn-height);
  padding: var(--btn-padding);
  border-radius: var(--radius-pill);

  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  font-weight: var(--fw-btn);
  letter-spacing: var(--ls-btn);

  background: var(--color-brand);
  color: var(--color-text-invert);
  white-space: nowrap;
}

/* --- Блок «вопрос + кнопка» под сетками секций 4 и 5 ---------------------- */

.front-cta-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  width: 548px;
  max-width: 100%;
}

.front-cta-note__text {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-small);
  letter-spacing: var(--ls-small);
  color: var(--color-text);
  opacity: var(--opacity-muted);
}

/* ==========================================================================
   Секция 1 – Хиро. Нода 32705:6901, 1920×946
   ========================================================================== */

.front-hero {
  position: relative;
  background: var(--color-brand);
  color: var(--color-text-invert);
}

/*
   В макете шапка лежит ПОВЕРХ синего хиро (светлая таблетка на синем), но в
   разметке темы <header> идёт до <main> и занимает первые 100px потока
   (24px отступ + 76px полосы). Дотягиваем синий вверх псевдоэлементом:
   z-index −1 оставляет шапку сверху. Править header.php / header.css нельзя,
   это общие файлы – расхождение вынесено в отчёт.
*/
.front-hero::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  /* --header-h – фактическая высота шапки (замер в main.js): на 1025–1430
     навигация вторым рядом, расчётные 100px оставляли белую щель. */
  top: calc(-1 * var(--header-h));
  height: var(--header-h);
  background: var(--color-brand);
  z-index: -1;
}

.front-hero__inner {
  display: flex;
  align-items: flex-start;
  max-width: var(--page-width);
  margin-inline: auto;

  /* Координаты макета: схема начинается на y=124 от верха страницы, её
     правый край – x=1835.24 при ширине страницы 1920, низ – y=903 при
     высоте хиро 946. Текстовая колонка начинается на x=96. */
  padding: max(16px, calc(124px - var(--header-h))) 84.76px 43px 96px;
  gap: 44.77px;
}

/* --- Хиро, левая колонка (нода 32705:6902) -------------------------------- */

.front-hero__text {
  flex: 0 1 900px;
  min-width: 0;
  margin-top: 120px;                   /* текст ниже схемы: 244 − 124 */
}

.front-hero__heads { margin-bottom: var(--space-64); }

.front-hero__title {
  color: var(--color-text-invert);
  margin-bottom: var(--space-24);
}

.front-hero__lead {
  width: 770px;
  max-width: 100%;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--fw-lead);
  letter-spacing: var(--ls-lead);
  color: var(--color-text-invert);
  margin-bottom: var(--space-32);
}

.front-hero__cards {
  display: flex;
  gap: var(--space-12);
  width: 814px;
  max-width: 100%;
  flex-wrap: wrap;                     /* [АДАПТИВ – в макете нет] */
}

/* .card и .badge приходят из base.css: замеры совпадают с нодой 32705:6908
   (padding 24, gap 12, радиус 16, фон bg_cold_light_blue). */
.front-hero__card {
  flex: 1 1 220px;
  min-width: 0;
  height: 174px;
}

.front-hero__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.front-hero__btn {
  width: var(--btn-w-hero);
  max-width: 100%;
}

/* Первая кнопка – белая заливка с тёмным текстом, вторая – синяя с белой
   обводкой 1px. Так в макете; hover не нарисован ни у одной. */
.front-hero__btn--light  { background: var(--color-bg); color: var(--color-text); }
.front-hero__btn--outline {
  background: var(--color-brand);
  color: var(--color-text-invert);
  border: 1px solid var(--color-text-invert);
}

/* --- Хиро, схема экосистемы (нода 32705:6926) -----------------------------
   Схема собрана абсолютным позиционированием: в макете это не автолэйаут, а
   вручную расставленные орбиты, узлы и бейджи.

   Единица --u равна 1/10 пикселя макета, все координаты записаны как
   calc(var(--u) * N). Так схема масштабируется одним числом, без transform,
   и её высота честно участвует в потоке. Габарит схемы 794.47 × 779.
   Использовать здесь em нельзя: в свойстве left единица em считается от
   собственного кегля элемента, а у подписей он свой. */

.front-hero__scheme {
  --u: 10px;

  position: relative;
  flex: 0 0 auto;
  width:  calc(var(--u) * 79.447);
  height: calc(var(--u) * 77.9);
}

.front-hero__ring,
.front-hero__line,
.front-hero__mline,
.front-hero__node,
.front-hero__badge,
.front-hero__pin { position: absolute; }

/* Мобильные лучи/кольцо/иконки – только ≤767px. */
.front-hero__ring--mobile,
.front-hero__mline,
.front-hero__node-icon--mob,
.front-hero__programs { display: none; }

.front-hero__node-icon--desk { display: block; }

/* Орбиты */
.front-hero__ring--outer { left: 0; top: 0; width: calc(var(--u) * 77.9); height: calc(var(--u) * 77.9); }
.front-hero__ring--mid   { left: calc(var(--u) * 7.538); top: calc(var(--u) * 7.539); width: calc(var(--u) * 62.8226); height: calc(var(--u) * 62.8226); }
.front-hero__ring--inner { left: calc(var(--u) * 21.07); top: calc(var(--u) * 21.07); width: calc(var(--u) * 35.7605); height: calc(var(--u) * 35.7605); }

/* Лучи от центра к узлам ролей */
.front-hero__line--clubs    { left: calc(var(--u) * 21.945); top: calc(var(--u) * 33.425); width: calc(var(--u) * 17.0051); height: calc(var(--u) * 5.5253); }
.front-hero__line--teachers { left: calc(var(--u) * 38.95);  top: calc(var(--u) * 33.425); width: calc(var(--u) * 17.0051); height: calc(var(--u) * 5.5253); }
.front-hero__line--academic { left: calc(var(--u) * 28.44);  top: calc(var(--u) * 38.95);  width: calc(var(--u) * 10.5098); height: calc(var(--u) * 14.4654); }
.front-hero__line--research { left: calc(var(--u) * 38.95);  top: calc(var(--u) * 38.95);  width: calc(var(--u) * 10.5098); height: calc(var(--u) * 14.4654); }
.front-hero__line--parents  { left: calc(var(--u) * 38.878); top: calc(var(--u) * 21.07);  width: calc(var(--u) * 0.144);  height: calc(var(--u) * 17.8803); }

/* Узел «Ученик» – центр схемы (нода 32705:7000) */
.front-hero__center {
  position: absolute;
  left: calc(var(--u) * 38.948);
  top:  calc(var(--u) * 32.861);
  transform: translateX(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * .7732);
}

.front-hero__avatar {
  width:  calc(var(--u) * 10.9215);
  height: calc(var(--u) * 10.9215);
  border-radius: var(--radius-pill);
}

.front-hero__center-label {
  font-size: calc(var(--u) * 2.4257);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: -.01em;
  color: var(--color-white-90);
  white-space: nowrap;
}

/* Узлы ролей: иконка и подпись под ней. В макете это два независимых слоя,
   но их центры совпадают с точностью до 0.4px – сгруппированы в один блок. */
.front-hero__node {
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * .58);
}

.front-hero__node-icon {
  width:  calc(var(--u) * 5.9923);
  height: calc(var(--u) * 5.9923);
}

.front-hero__node span {
  font-size: calc(var(--u) * 1.3531);
  line-height: calc(var(--u) * 1.8364);
  font-weight: 600;
  letter-spacing: normal;              /* трекинг у подписей ролей не задан */
  color: var(--color-white-90);
  text-align: center;
  white-space: nowrap;
}

.front-hero__node--parents  { left: calc(var(--u) * 38.95);  top: calc(var(--u) * 18.074); }
.front-hero__node--teachers { left: calc(var(--u) * 55.955); top: calc(var(--u) * 30.429); }
.front-hero__node--research { left: calc(var(--u) * 49.46);  top: calc(var(--u) * 50.419); }
.front-hero__node--academic { left: calc(var(--u) * 28.44);  top: calc(var(--u) * 50.419); }
.front-hero__node--clubs    { left: calc(var(--u) * 21.945); top: calc(var(--u) * 30.429); }

/* Бейджи-программы по среднему кольцу */
.front-hero__badge {
  display: flex;
  align-items: center;
  justify-content: center;

  width:  calc(var(--u) * 11.3081);
  height: calc(var(--u) * 3.0928);
  border-radius: calc(var(--u) * 1.5464);
  border: calc(var(--u) * .145) solid var(--color-white-55);
  background: var(--color-white-20);

  font-size: calc(var(--u) * 1.3531);
  line-height: normal;
  font-weight: 600;
  color: var(--color-text-invert);
  white-space: nowrap;
}

.front-hero__badge--sat       { left: calc(var(--u) * 33.296); top: calc(var(--u) * 5.992); }
.front-hero__badge--ielts     { left: calc(var(--u) * 46.925); top: calc(var(--u) * 9.103); }
.front-hero__badge--toefl     { left: calc(var(--u) * 57.854); top: calc(var(--u) * 17.819); }
.front-hero__badge--duolingo  { left: calc(var(--u) * 63.92);  top: calc(var(--u) * 30.414); }
.front-hero__badge--ent       { left: calc(var(--u) * 63.92);  top: calc(var(--u) * 44.393); }
.front-hero__badge--ap        { left: calc(var(--u) * 57.854); top: calc(var(--u) * 56.988); }
.front-hero__badge--ibdp      { left: calc(var(--u) * 46.925); top: calc(var(--u) * 65.704); }
.front-hero__badge--preap     { left: calc(var(--u) * 33.296); top: calc(var(--u) * 68.815); }
.front-hero__badge--research  { left: calc(var(--u) * 19.667); top: calc(var(--u) * 65.704); }
.front-hero__badge--business  { left: calc(var(--u) * 8.737);  top: calc(var(--u) * 56.988); }
.front-hero__badge--summer    { left: calc(var(--u) * 2.672);  top: calc(var(--u) * 44.393); }
.front-hero__badge--semester  { left: calc(var(--u) * 2.672);  top: calc(var(--u) * 30.414); }
.front-hero__badge--essay     { left: calc(var(--u) * 8.737);  top: calc(var(--u) * 17.819); }
.front-hero__badge--admission { left: calc(var(--u) * 19.667); top: calc(var(--u) * 9.103); }

/* Пины стран по внешнему кольцу */
.front-hero__pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * .3866);
}

.front-hero__pin img {
  width:  calc(var(--u) * 1.1598);
  height: calc(var(--u) * 1.1598);
}

.front-hero__pin span {
  font-size: calc(var(--u) * 1.3531);
  line-height: normal;
  font-weight: var(--fw-body);
  letter-spacing: normal;
  color: var(--color-white-75);
  text-align: center;
  white-space: nowrap;
}

.front-hero__pin--kz     { left: 0;                       top: calc(var(--u) * 21.746); width: calc(var(--u) * 6.7655); }
.front-hero__pin--usa    { left: calc(var(--u) * 76.257); top: calc(var(--u) * 39.723); width: calc(var(--u) * 3.1895); }
.front-hero__pin--canada { left: calc(var(--u) * 62.532); top: calc(var(--u) * 9.568);  width: calc(var(--u) * 4.8325); }
.front-hero__pin--eu     { left: calc(var(--u) * 49.775); top: calc(var(--u) * 74.131); width: calc(var(--u) * 8.1186); }
.front-hero__pin--asia   { left: calc(var(--u) * 8.312);  top: calc(var(--u) * 66.399); width: calc(var(--u) * 6.9588); }

/* ==========================================================================
   Секция 3 – «Сложность поступления». Нода 32743:5325, 1840×919
   ========================================================================== */

.front-problems__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-20);
}

.front-problems__card {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  min-height: 373.5px;                 /* Default – нода 32728:9102 и пары */
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
  overflow: hidden;
  transition: min-height .45s cubic-bezier(.22, 1, .36, 1);
}

/* Hover-заливка из макета (lin_gradient_4): rgb(242,242,248) → rgb(181,220,255)
   под углом 127.4°. Через ::before, чтобы плавно проявить поверх серого фона. */
.front-problems__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-image: linear-gradient(127.4deg,
                      rgb(242, 242, 248) 13.262%,
                      rgb(181, 220, 255) 127.31%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s cubic-bezier(.22, 1, .36, 1);
}

.front-problems__card > * { position: relative; z-index: 1; }

/* Акцент карточки – цвет плашки с номером и выделенных слов. В макете он
   закреплён за номером, менять местами нельзя. */
.front-problems__card--01 { --accent: var(--color-brand); }
.front-problems__card--02 { --accent: var(--color-purple); }
.front-problems__card--03 { --accent: var(--color-yellow); }
.front-problems__card--04 { --accent: var(--color-green); }
.front-problems__card--05 { --accent: var(--color-red); }
.front-problems__card--06 { --accent: var(--color-mint); }

.front-problems__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}

.front-problems__num {
  display: flex;
  align-items: center;
  justify-content: center;

  width:  var(--space-48);
  height: var(--space-48);
  border-radius: var(--radius-pill);
  background: var(--accent);

  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  color: var(--color-text-invert);
}

.front-problems__pic {
  align-self: center;
  max-width: 100%;
}

.front-problems__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.front-problems__text {
  font-size: var(--fs-card-lead);
  line-height: 1;
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
}

.front-problems__accent { color: var(--accent); }

/* Абзац из hover-варианта (32728:9099 и пары): в покое спрятан ниже,
   при наведении поднимается вслед за заголовком. */
.front-problems__note {
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(18px);

  font-size: 18px;
  line-height: var(--lh-h3);
  letter-spacing: -.01em;
  color: var(--color-text);

  transition:
    opacity .4s cubic-bezier(.22, 1, .36, 1),
    transform .45s cubic-bezier(.22, 1, .36, 1),
    max-height .45s cubic-bezier(.22, 1, .36, 1),
    margin-top .45s cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .front-problems__card:hover,
  .front-problems__card:focus-within {
    z-index: 1;
    min-height: 405.5px;               /* Hover – нода 32728:9099 */
  }

  .front-problems__card:hover::before,
  .front-problems__card:focus-within::before {
    opacity: 1;
  }

  /* Заголовок чуть поднимается – место для абзаца снизу. */
  .front-problems__card:hover .front-problems__body,
  .front-problems__card:focus-within .front-problems__body {
    transform: translateY(-6px);
  }

  .front-problems__card:hover .front-problems__note,
  .front-problems__card:focus-within .front-problems__note {
    margin-top: var(--space-24);
    max-height: 7.5em;
    opacity: 1;
    transform: translateY(0);
  }
}

/* На тач-устройствах hover нет – абзац всегда виден, градиент не нужен. */
@media (hover: none), (pointer: coarse) {
  .front-problems__card { min-height: 405.5px; }

  .front-problems__note {
    margin-top: var(--space-24);
    max-height: none;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Секция 4 – «Почему мы уделяем особое внимание программе AP?»
   Нода 32732:8275, 1920×780
   ========================================================================== */

.front-ap { position: relative; }

/* Line 5 (нода 32732:8273): линия во всю ширину страницы, проходит по
   центрам кружков с номерами и лежит ПОД карточками. Так в макете. */
.front-ap__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 255px;
  height: 1px;
  background: var(--color-border);
  opacity: .6;
}

.front-ap__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-32);
  align-items: start;
}

.front-ap__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}

/* Акцент колонки – цвет кружка с номером и квадрата с иконкой */
.front-ap__col--01 { --accent: var(--color-brand); }
.front-ap__col--02 { --accent: var(--color-red); }
.front-ap__col--03 { --accent: var(--color-purple); }
.front-ap__col--04 { --accent: var(--color-mint); }

.front-ap__num,
.front-team__num {
  position: relative;                  /* чтобы номер был над линией Line 5 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width:  var(--space-48);
  height: var(--space-48);
  border-radius: var(--radius-pill);
  background: var(--accent);

  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  color: var(--color-text-invert);
}

.front-ap__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);

  width: 100%;
  min-height: 326px;                   /* высота карточки в макете */
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

.front-ap__icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: 93px;
  height: 93px;
  border-radius: 15.5px;               /* в токенах такого радиуса нет */
  background: var(--accent);
}

/* Иконка карточки 04 в макете крупнее контейнера (113×106 против 93×93) –
   пустые поля SVG, графика внутрь помещается. Клип не ставим, как в макете. */
.front-ap__icon-box img { max-width: none; }

.front-ap__body { text-align: center; }

.front-ap__title {
  font-size: var(--fs-body);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  margin-bottom: var(--space-12);
}

.front-ap__desc {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-small);
  letter-spacing: var(--ls-small);
  color: var(--color-text);
  opacity: .7;                         /* именно .7, а не .6 как в шапках */
}

/* Отступ сетка → блок с вопросом. 35px – так в макете, кратности 8 нет. */
.front-ap__cta { margin-top: 35px; }

/* ==========================================================================
   Секция 5 – «Почему образовательная экосистема работает эффективнее
   отдельных курсов?». Нода 32743:5322, 1840×781
   ========================================================================== */

.front-track__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-20);
}

.front-track__card {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;

  /* В макете высота фиксированная 320 и при hover не растёт. Но уже при
     колонке уже ~420px раскрытый hover-текст требует до 436px и режется
     (замер 2026-08-06 на 1280/1440). Поэтому 320 – минимум, а не размер:
     в покое карточка неотличима от макетной, на узких экранах при hover
     ряд подрастает, но текст читается целиком. */
  height: auto;
  min-height: 320px;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--accent);
  background: var(--color-bg-soft);
  overflow: hidden;
}

/* Hover-заливка lin_gradient_4, угол как у 32732:8026. */
.front-track__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-image: linear-gradient(124.614deg,
                      rgb(242, 242, 248) 13.262%,
                      rgb(181, 220, 255) 127.31%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s cubic-bezier(.22, 1, .36, 1);
}

.front-track__card > * { position: relative; z-index: 1; }

.front-track__card--01 { --accent: var(--color-brand); }
.front-track__card--02 { --accent: var(--color-purple); }
.front-track__card--03 { --accent: var(--color-red); }
.front-track__card--04 { --accent: var(--color-mint); }

.front-track__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: 52px;
  height: 52px;
  padding: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--accent);

  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  color: var(--color-text-invert);
}

.front-track__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  transition: gap .32s cubic-bezier(.22, 1, .36, 1);
}

.front-track__title {
  font-size: var(--fs-card-title);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

/* Блок разделителя + абзаца: в покое схлопнут, при hover поднимается снизу. */
.front-track__extra {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
  width: 100%;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(14px);
  transition:
    opacity .3s cubic-bezier(.22, 1, .36, 1),
    transform .32s cubic-bezier(.22, 1, .36, 1),
    max-height .32s cubic-bezier(.22, 1, .36, 1),
    margin-top .32s cubic-bezier(.22, 1, .36, 1);
}

/* Цвет разделителя в variables.css отсутствует: он встречается ровно один
   раз, в этой карточке. */
.front-track__divider {
  width: 100%;
  height: 1px;
  background: #C8C8DC;
  flex: 0 0 auto;
}

.front-track__note {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  opacity: var(--opacity-muted);
}

@media (hover: hover) and (pointer: fine) {
  .front-track__card:hover::before,
  .front-track__card:focus-within::before {
    opacity: 1;
  }

  /* Заголовок поднимается за счёт появления блока снизу внутри fixed height. */
  .front-track__card:hover .front-track__body,
  .front-track__card:focus-within .front-track__body {
    gap: var(--space-20);
  }

  .front-track__card:hover .front-track__extra,
  .front-track__card:focus-within .front-track__extra {
    /* 160px хватало только широким колонкам: на ~420px абзац выше и резался.
       320 – потолок анимации, фактическую высоту задаёт контент. */
    max-height: 320px;
    margin-top: 0;
    opacity: 1;
    transform: translateY(0);
  }
}

/* На тач-устройствах hover нет – абзац сразу виден, размер карточки тот же. */
@media (hover: none), (pointer: coarse) {
  .front-track__body { gap: var(--space-20); }

  .front-track__extra {
    max-height: none;
    opacity: 1;
    transform: none;
  }

  .front-track__card::before { opacity: 1; }
}

.front-track__cta { margin-top: var(--space-48); }

/* ==========================================================================
   Секции 6 и 9 – плитки с картинкой и подписью
   6: «Подготовка к международным экзаменам», нода 32732:8581, 1920×662
   9: «Академические программы»,             нода 32743:5305, 1840×635
   Карточка в обеих секциях одна и та же: 445×431, радиус 24, паддинг 24,
   картинка 397×327 радиусом 24, подпись 24/1.0/−8 %.
   ========================================================================== */

.front-tiles { position: relative; }

/* Line 5 секции 6 (нода 32732:8582): та же полноширинная линия, что и в
   секции 4, но здесь она приходится на верх картинок и видна только в
   боковых полях и в 20-px зазорах между карточками. Так в макете. */
.front-tiles__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 255px;
  height: 1px;
  background: var(--color-border);
  opacity: .6;
}

/* В секции 6 отступ от подзаголовка до сетки 75px, а не 48 как везде.
   Значение из макета, выброс из общего ритма. */
.front-tiles--exams .front-head { margin-bottom: 75px; }

.front-tiles__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-20);
}

.front-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);

  padding: var(--space-24);
  border-radius: var(--radius-24);
  background: var(--color-bg-soft);
}

.front-tile__pic {
  width: 100%;
  aspect-ratio: 397 / 327;
  height: auto;
  border-radius: var(--radius-24);
  object-fit: cover;
}

.front-tile__caption {
  font-size: var(--fs-h3);
  line-height: 1;
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h1);        /* −1.92px при кегле 24 = −8 % */
  color: var(--color-text);
}

.front-tiles--exams .front-tile__caption { text-align: center; }

/* ==========================================================================
   Секция 8 – «Экосистема сильна настолько, насколько сильна команда»
   Нода 32732:8341, 1840×861
   ========================================================================== */

.front-team__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 253px;
  gap: var(--space-20);
}

.front-team__photo {
  grid-column: 2;
  grid-row: 1 / span 2;

  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.front-team__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);

  padding: var(--space-24);
  border-radius: var(--radius-lg);
}

/* Карточки 01 и 03 на холодном фоне, 02 и 04 на сером – так в макете. */
.front-team__card--cold { background: var(--color-bg-cold); }
.front-team__card--soft { background: var(--color-bg-soft); }

.front-team__card--01 { --accent: var(--color-brand);  grid-column: 1; grid-row: 1; }
.front-team__card--02 { --accent: var(--color-purple); grid-column: 1; grid-row: 2; }
.front-team__card--03 { --accent: var(--color-green);  grid-column: 3; grid-row: 1; }
.front-team__card--04 { --accent: var(--color-red);    grid-column: 3; grid-row: 2; }

.front-team__role {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
  text-align: center;
}

/* Кнопка стоит под фото-колонкой, той же ширины 600 и на 48px ниже. */
.front-team__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-48);
}

.front-team__cta .front-btn { width: 600px; max-width: 100%; }

/* ==========================================================================
   Секция 10 – «Поступление в университеты» и «Родителям»
   Нода 32732:9123, 1840×1088.5
   ========================================================================== */

.front-service__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-20);
}

.front-service__row + .front-service__row { margin-top: var(--space-20); }

.front-service__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-48);

  min-height: 534.25px;                /* высота карточки в макете */
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
  text-align: center;
}

.front-service__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  width: 100%;
}

.front-service__num {
  display: flex;
  align-items: center;
  justify-content: center;

  width:  var(--space-48);
  height: var(--space-48);
  border-radius: var(--radius-pill);
  background: var(--accent);

  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  color: var(--color-text-invert);
}

.front-service__row--01 { --accent: var(--color-red); }
.front-service__row--02 { --accent: var(--color-green); }

.front-service__title {
  font-size: var(--fs-h1);
  line-height: .9;                     /* 0.9 – так в макете */
  font-weight: var(--fw-h1);
  letter-spacing: var(--ls-h1);
  color: var(--color-text);
  margin-bottom: var(--space-24);
}

.front-service__desc {
  color: var(--color-text);
  opacity: var(--opacity-muted);
}

/* Фото-карточка: фон – градиент, само фото вырезано по контуру (PNG с
   альфой) и выходит за границы карточки. Без overflow:hidden развалится. */
.front-service__photo {
  position: relative;
  min-height: 534.25px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.front-service__photo img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

/* Фото выгружены уже обрезанными карточкой (Figma отдаёт видимую часть),
   поэтому проценты считаются от видимого куска, а не от исходного бокса.
   Карточка в макете 910×534.25. */
.front-service__photo--01 {
  background-image: linear-gradient(135.569deg,
                      rgb(255, 102, 114) 14.571%,
                      rgb(242, 171, 177) 87.989%);
}
.front-service__photo--01 img { left: 0; top: 9.733%; width: 100%; height: 90.267%; }

.front-service__photo--02 {
  background-image: linear-gradient(120.516deg,
                      rgb(83, 183, 128) 6.3367%,
                      rgb(202, 255, 226) 96.758%);
}
.front-service__photo--02 img { left: 0; top: 11.372%; width: 100%; height: 88.629%; }

/* ==========================================================================
   Секция 11 – «Полезные материалы». Нода 32743:5323, 1840×612
   ========================================================================== */

.front-res__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-20);
}

.front-res__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);

  padding: var(--space-24);
  border-radius: var(--radius-24);
  background: var(--color-bg-soft);
}

/* Белая плитка под логотип. Логотипы – растр, в макете они спозиционированы
   вручную и местами обрезаются плиткой. Проценты пересчитаны из макета. */
.front-res__logo {
  position: relative;
  width: 100%;
  aspect-ratio: 397 / 168;
  border-radius: var(--radius-24);
  background: var(--color-bg);
  overflow: hidden;
}

.front-res__logo img {
  position: absolute;
  max-width: none;
}

.front-res__logo--college-board img     { left: 7.05%;  top: -6.38%;  width: 85.89%; height: 112.76%; }
.front-res__logo--khan img              { left: 8.56%;  top: 34.09%;  width: 82.87%; height: 31.82%; }
/* .front-res__logo--essay-guy – удалено 2026-08-17 вместе с карточкой College Essay Guy. */
/* Правила --princeton удалены вместе с карточкой The Princeton Review /
   PrepScholar (заказчик, 2026-08-12). */

.front-res__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.front-res__row {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.front-res__names { flex: 1 1 auto; min-width: 0; }

.front-res__name {
  font-size: var(--fs-h3);
  line-height: 1;
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h1);        /* −1.92px при кегле 24 */
  color: var(--color-text);

  /* В макете название карточки «Официальный гайд по Digital SAT» обрезано
     многоточием по ширине строки. Воспроизводим обрезку, а не перенос. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: var(--space-12);
}

.front-res__cat {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 500;
  letter-spacing: var(--ls-small);
  color: var(--color-link);
}

.front-res__go {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width:  40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

.front-res__desc {
  color: var(--color-text);
  opacity: var(--opacity-muted);
}

/* ==========================================================================
   Секция 12 – «Часто задаваемые вопросы». Нода 32732:7178, 1065×647
   ========================================================================== */

.front-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);

  width: 1065px;                       /* ширина блока в макете */
  max-width: 100%;
  margin-inline: auto;
}

/*
   Аккордеон собран на <details>/<summary>: раскрытое состояние в макете
   нарисовано (второй вопрос), а JS главной странице не принадлежит –
   assets/js/main.js общий файл, править его нельзя.
*/
.front-faq__item {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-bg);
  background: var(--color-bg-soft);
  padding: var(--space-20);
}

.front-faq__item[open] { background: var(--color-bg-cold); }

.front-faq__q {
  display: flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
}

.front-faq__q::-webkit-details-marker { display: none; }

/* В макете левая половина строки отдана под кружок с номером, а сам вопрос
   начинается ровно с середины блока. Это не ошибка выгрузки: обе колонки
   объявлены как flex: 1 0 0. */
.front-faq__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width:  var(--space-48);
  height: var(--space-48);
  border-radius: var(--radius-pill);
  background: var(--color-brand);

  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  color: var(--color-text-invert);
}

.front-faq__side { flex: 1 1 0; min-width: 0; }

.front-faq__main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-24);
  padding-left: 10px;                  /* так в макете */
}

.front-faq__text { flex: 1 1 auto; min-width: 0; }

.front-faq__title {
  display: block;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

/* Ответ лежит внутри <summary>: в макете кружок с номером и шеврон
   выровнены по центру ВСЕЙ раскрытой карточки, а не по строке вопроса.
   Если вынести ответ за summary, выравнивание разъедется. */
.front-faq__answer {
  display: block;
  margin-top: var(--space-16);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  opacity: var(--opacity-muted);
}

.front-faq__item:not([open]) .front-faq__answer { display: none; }

.front-faq__chevron { flex: 0 0 auto; width: 40px; height: 40px; }

/* Свёрнутый и раскрытый шевроны в макете – две разные иконки (разный цвет
   круга), поэтому переключаем картинки, а не вращаем одну. */
.front-faq__item     .front-faq__chevron--up   { display: none; }
.front-faq__item[open] .front-faq__chevron--up { display: block; }
.front-faq__item[open] .front-faq__chevron--down { display: none; }

/* ==========================================================================
   Секция 13 – «Не знаете, с чего начать?» (запись на консультацию)
   Нода 32732:7143, 1920×1018
   ========================================================================== */

.front-consult {
  position: relative;
  overflow: hidden;
  background: var(--color-brand);
  color: var(--color-text-invert);
}

/* Декоративные круги. В макете их шесть, они уходят далеко за границы
   секции и обрезаются ею. Держим их в блоке ровно ширины макета, чтобы на
   широких экранах композиция не растягивалась. */
.front-consult__decor {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--page-width);
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;
}

.front-consult__decor img { position: absolute; max-width: none; }

.front-consult__decor img:nth-child(1) { left: -712px;   top: -817px;   width: 1090px;    height: 1090px;    transform: scaleY(-1); }
.front-consult__decor img:nth-child(2) { left: -676px;   top: -781px;   width: 1018px;    height: 1018px;    transform: scaleY(-1); }
.front-consult__decor img:nth-child(3) { left: -638px;   top: -743px;   width: 942px;     height: 942px;     transform: scaleY(-1); }
.front-consult__decor img:nth-child(4) { left: 866.61px; top: 151.61px; width: 1197.66px; height: 1197.66px; transform: scaleY(-1) rotate(131.66deg); }
.front-consult__decor img:nth-child(5) { left: 906.16px; top: 191.16px; width: 1118.55px; height: 1118.55px; transform: scaleY(-1) rotate(131.66deg); }
.front-consult__decor img:nth-child(6) { left: 947.91px; top: 232.92px; width: 1035.05px; height: 1035.05px; transform: scaleY(-1) rotate(131.66deg); }

.front-consult__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 66px;
  flex-wrap: wrap;                     /* [АДАПТИВ – в макете нет] */

  max-width: var(--page-width);
  margin-inline: auto;
  padding: 128px 96px;                 /* поля секции в макете */
}

/* Текст и карточка в макете дают ровно 1920 (96 + 806 + 66 + 856 + 96).
   На любом экране уже макета им разрешено сжиматься, а не переноситься –
   иначе секция ломается уже на 1905px из-за полосы прокрутки. */
.front-consult__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
  flex: 1 1 420px;
  min-width: 0;
  max-width: 806px;
}

.front-consult__title {
  font-size: var(--fs-cta-title);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h1);
  letter-spacing: var(--ls-tight);
  color: var(--color-text-invert);
}

.front-consult__lead {
  font-size: var(--fs-cta-lead);
  line-height: var(--lh-h3);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-h3);
  color: var(--color-text-invert);
}

/* Белая плашка-подсказка. В макете это не кнопка, хотя слой назван «Кнопки
   CTA»: внутри только иконка и текст, никакого действия. */
.front-consult__hint {
  display: flex;
  align-items: center;
  gap: var(--space-24);

  width: 652px;
  max-width: 100%;
  padding: var(--space-20);
  border-radius: 11.829px;             /* так в макете, токена нет */
  border: 1px solid var(--color-bg-soft);
  background: var(--color-bg);
}

.front-consult__hint-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: 93px;
  height: 93px;
  border-radius: 15.5px;
  background: var(--color-green);
}

.front-consult__hint-text {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-small);
  letter-spacing: var(--ls-small);
  color: var(--color-text);
  opacity: var(--opacity-muted);
}

/* --- Карточка с формой --------------------------------------------------- */

.front-consult__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);

  flex: 1 1 420px;
  min-width: 0;
  max-width: 856px;
  padding: var(--space-24);
  border-radius: var(--radius-24);
  background: var(--color-bg-soft);
  color: var(--color-text);
}

.front-consult__photo {
  width: 100%;
  aspect-ratio: 808 / 272;
  height: auto;
  border-radius: var(--radius-24);
  object-fit: cover;
}

.front-consult__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.front-consult__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/*
   В макете поля формы – статичные плашки с текстом, без рамок, иконок и
   состояний. Здесь они собраны настоящими input, иначе форма не работает;
   визуально плашка воспроизведена один в один.
*/
.front-consult__field {
  width: 100%;
  height: 70.25px;                     /* высота строки в макете */
  padding: var(--space-16);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-bg);

  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
}

/* Цвет плейсхолдера в макете тот же, что у обычного текста – #3A3A3A без
   прозрачности. Воспроизводим как нарисовано. */
.front-consult__field::placeholder { color: var(--color-text); opacity: 1; }

/* Списки «Экзамен» / «Программа» – как остальные плашки, со стрелкой. */
.front-consult__field--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--space-16) * 2 + 18px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4.5 6.75L9 11.25L13.5 6.75' stroke='%233A3A3A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-16) center;
  cursor: pointer;
}

.front-consult__submit { width: 100%; }

/* Ответ формы (успех/ошибка) – на синем фоне секции белым. */
.front-consult__message {
  margin-top: calc(-1 * var(--space-24));
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-text-invert);
}
.front-consult__message[hidden] { display: none; }
.front-consult__message--error { color: #ffe1e1; }

/* ==========================================================================
   Секция 14 – финальная сетка разделов. Нода 32745:5462, 1840×1246
   ========================================================================== */

.front-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-32) var(--space-24);
}

.front-nav-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;

  min-height: 394px;
  padding: var(--space-32);
  border-radius: var(--radius-24);
  background: var(--color-bg-soft);
  overflow: hidden;
}

/* Графика лежит под текстом: в макете она первая в порядке слоёв. */
.front-nav-card__media {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.front-nav-card__media img,
.front-nav-card__tile { position: absolute; max-width: none; }

.front-nav-card__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-24);
  background: var(--color-bg);
  overflow: hidden;
}

.front-nav-card__tile img { position: absolute; max-width: none; }

.front-nav-card__body,
.front-nav-card .front-btn { position: relative; }

.front-nav-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  width: 100%;
}

/* Надзаголовок и заголовок стоят ближе друг к другу (8), чем к описанию (16) */
.front-nav-card__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  width: 100%;
}

.front-nav-card__eyebrow {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-small);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-small);
  color: var(--color-text);
  opacity: .7;
}

.front-nav-card__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-h1);
  letter-spacing: var(--ls-h1);
  color: var(--color-text);
}

.front-nav-card__desc {
  max-width: 490px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-small);
  letter-spacing: var(--ls-small);
  color: var(--color-text);
}

/* Проценты пересчитаны из координат макета относительно карточки 908×394. */
.front-nav-card--exams     .front-nav-card__tile:nth-child(1) { left: 62.03%; top: 8.89%;  width: 34.25%; height: 35.70%; transform: rotate(-6.84deg); }
.front-nav-card--exams     .front-nav-card__tile:nth-child(2) { left: 42.95%; top: 54.44%; width: 34.14%; height: 35.79%; }
.front-nav-card--exams     .front-nav-card__tile:nth-child(3) { left: 80.27%; top: 44.44%; width: 34.25%; height: 35.70%; transform: rotate(-10.57deg); }

.front-nav-card--exams .front-nav-card__tile:nth-child(1) img { left: 12%;   top: 18.26%; width: 76%;    height: 63.48%; }
.front-nav-card--exams .front-nav-card__tile:nth-child(2) img { left: 7.35%; top: 12.07%; width: 85.29%; height: 75.86%; }
.front-nav-card--exams .front-nav-card__tile:nth-child(3) img { left: 0.04%; top: -7.61%; width: 100%;   height: 124.2%; }

.front-nav-card--materials .front-nav-card__tile:nth-child(1) { left: 66.75%; top: 11.01%; width: 33.04%; height: 34.44%; transform: rotate(-6.84deg); }
.front-nav-card--materials .front-nav-card__tile:nth-child(2) { left: 48.35%; top: 54.95%; width: 32.93%; height: 34.52%; }
.front-nav-card--materials .front-nav-card__tile:nth-child(3) { left: 84.35%; top: 45.31%; width: 33.04%; height: 34.44%; transform: rotate(-10.57deg); }

.front-nav-card--materials .front-nav-card__tile:nth-child(1) img { left: 7.05%;  top: -6.38%;  width: 85.89%; height: 112.76%; }
.front-nav-card--materials .front-nav-card__tile:nth-child(2) img { left: 8.56%;  top: 34.09%;  width: 82.87%; height: 31.82%; }
.front-nav-card--materials .front-nav-card__tile:nth-child(3) img { left: 18.41%; top: -19.05%; width: 63.18%; height: 138.1%; }

/* Фото карточек выгружены уже обрезанными карточкой – Figma отдаёт видимую
   часть ноды, а не исходный бокс. Поэтому проценты ниже описывают видимый
   кусок относительно карточки 908×394, а не координаты слоя из макета. */
.front-nav-card--team      .front-nav-card__media img { left: 57.93%; top: 0;     width: 42.07%; height: 100%; }
.front-nav-card--programs  .front-nav-card__media img { left: 56.61%; top: 0;     width: 43.39%; height: 100%; }
.front-nav-card--admission .front-nav-card__media img { left: 43.39%; top: 0;     width: 56.61%; height: 100%; }
.front-nav-card--parents   .front-nav-card__media img { left: 57.93%; top: 7.11%; width: 42.07%; height: 92.89%; }

/* ==========================================================================
   АДАПТИВ – в макете нет ни одного экрана, кроме 1920.
   Ниже только защита от разъезжания и горизонтального скролла.
   ========================================================================== */

/* 1024–1919: хиро НЕ перестраивается, а пропорционально сжимается – обе
   колонки рядом, как на 1920 (согласовано по скриншоту-эталону 2026-08-06).
   Единица схемы --u привязана к ширине окна: 10px на 1920 = 0.5208vw,
   поэтому схема занимает ту же долю экрана на любой ширине. Поля и зазор
   хиро сжимаются clamp'ом от макетных значений (96 / 84.76 / 44.77). */
@media (max-width: 1919px) {

  .front-hero__inner {
    padding: 24px clamp(32px, 4.41vw, 84.76px) 43px clamp(40px, 5vw, 96px);
    gap: clamp(20px, 2.33vw, 44.77px);
  }

  /* Текст забирает всё, что осталось от схемы; стартовый сдвиг вниз тоже
     сжимается вместе с масштабом. */
  .front-hero__text {
    flex: 1 1 0;
    margin-top: clamp(32px, 6.25vw, 120px);
  }

  /* Нижний предел 7.2px: при меньшей единице подписи схемы падают ниже
     10px. Недостающую ширину отдаёт текстовая колонка – она гибкая. */
  .front-hero__scheme { --u: clamp(7.2px, 0.5208vw, 10px); }

  /* Карточки «Учимся/Развиваемся/Поступаем»: в узкой колонке текст выше
     фиксированных 174px – высота становится минимумом, а не размером.
     Базис 220px ронял третью карточку на новый ряд уже при колонке 668px
     (замер на 1440) – ужат до 170, чтобы ряд из трёх жил до ~1100. */
  .front-hero__card { height: auto; min-height: 174px; flex-basis: 170px; }

  .front-consult__inner { padding-inline: var(--side-padding); }
}

/* ≤1199: рядом двум колонкам тесно, а подписи схемы при --u < 6.3px
   мельче 9px – нечитаемы. Схема уходит под текст и возвращает масштаб. */
@media (max-width: 1199px) {

  .front-hero__inner {
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: var(--space-64);
  }

  .front-hero__text  { margin-top: 0; flex: 1 1 100%; }

  .front-hero__scheme {
    --u: min(8px, (100vw - 48px) / 79.447);
    margin-inline: auto;
  }
}

/* В зоне стека (768–1199) текстовая колонка на всю ширину, а её блоки
   (лид 770, карточки 814, кнопки 485) – фиксированной ширины: прижатые
   влево, они оставляли пустую правую половину (замечание заказчика,
   2026-08-06). Центрируем содержимое хиро. Ниже 768 не трогаем – там
   мобильная вёрстка по макету 32705:7077 с блоками во всю ширину. */
@media (min-width: 768px) and (max-width: 1199px) {

  .front-hero__text { text-align: center; }

  .front-hero__lead,
  .front-hero__cards { margin-inline: auto; }

  .front-hero__cta { align-items: center; }
}

@media (max-width: 1279px) {

  .front-problems__grid,
  .front-ap__grid,
  .front-track__grid,
  .front-tiles__grid,
  .front-res__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .front-ap__rule,
  .front-tiles__rule { display: none; }

  .front-team__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .front-team__photo { grid-column: 1; grid-row: auto; aspect-ratio: 600 / 526; height: auto; }
  .front-team__card  { grid-column: 1; grid-row: auto; min-height: 253px; }

  .front-service__row,
  .front-nav-grid { grid-template-columns: minmax(0, 1fr); }

  /* Фотографии секций 10 и 14 спозиционированы под ширину макета: на узких
     экранах они лезут на текст, поэтому убираются. */
  .front-nav-card__media { display: none; }
}

@media (max-width: 767px) {

  .front-page { --fs-section-title: 28px; --fs-card-lead: 24px; --fs-cta-title: 28px; --fs-cta-lead: 20px; }

  /* Подписи кнопок в макете длинные («Получить индивидуальную стратегию →»
     – 414px) и заданы одной строкой. На 390px это шире экрана, поэтому
     здесь строка разрешена в несколько строк. */
  .front-btn {
    max-width: 100%;
    height: auto;
    min-height: var(--btn-height);
    padding: var(--space-16) var(--space-20);
    white-space: normal;
    text-align: center;
  }

  /*
     Мобильный хиро – нода 32705:7077, артборд 393×669.
     --u = 1/10 px макета при ширине контейнера = min(100%, 393px).
     Текст/CTA остаются сверху (в ноде их нет – это только схема+программы);
     схема перестраивается: одно кольцо, подписи под иконками, бейджи
     уходят в сетку «Программы и направления».
  */
  .front-hero__inner {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    padding: var(--space-32) 0 var(--space-48);
    gap: 0;
    overflow-x: clip;
  }

  .front-hero__text,
  .front-hero__heads,
  .front-hero__lead,
  .front-hero__cards,
  .front-hero__cta {
    width: 100%;
    max-width: 100%;
  }

  .front-hero__text {
    flex: 0 0 auto;
    padding-inline: var(--side-padding);
    margin-bottom: var(--space-24);
  }

  .front-hero__heads { margin-bottom: var(--space-32); }

  .front-hero__cards {
    flex-direction: column;
  }

  .front-hero__card {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .front-hero__btn { width: 100%; }

  .front-hero {
    overflow-x: clip;
  }

  /* Ширина = колонка хиро (не 100vw – иначе схема шире из‑за скроллбара). */
  .front-hero__scheme {
    container-type: inline-size;
    width: 100%;
    max-width: 393px;
    height: calc(100cqi * 39.5 / 39.3);
    margin-inline: auto;
    --u: calc(100cqi / 39.3);
  }

  .front-hero__ring--outer,
  .front-hero__ring--mid,
  .front-hero__ring--inner,
  .front-hero__line,
  .front-hero__badge,
  .front-hero__pin,
  .front-hero__node-icon--desk { display: none; }

  .front-hero__ring--mobile,
  .front-hero__mline,
  .front-hero__node-icon--mob { display: block; }

  .front-hero__programs { display: flex; }

  /* Кольцо: left 57.4 / top 63.11 / size 287.811 */
  .front-hero__ring--mobile {
    left:   calc(var(--u) * 5.74);
    top:    calc(var(--u) * 6.311);
    width:  calc(var(--u) * 28.7811);
    height: calc(var(--u) * 28.7811);
  }

  /* Лучи – координаты center-connector из 32705:7164…7168 */
  .front-hero__mline--clubs {
    left:   calc(var(--u) * 6.444);
    top:    calc(var(--u) * 16.255);
    width:  calc(var(--u) * 13.6862);
    height: calc(var(--u) * 4.4469);
  }

  .front-hero__mline--academic {
    left:   calc(var(--u) * 11.671);
    top:    calc(var(--u) * 20.702);
    width:  calc(var(--u) * 8.4586);
    height: calc(var(--u) * 11.6422);
  }

  .front-hero__mline--research {
    left:   calc(var(--u) * 20.13);
    top:    calc(var(--u) * 20.702);
    width:  calc(var(--u) * 8.4586);
    height: calc(var(--u) * 11.6422);
  }

  .front-hero__mline--teachers {
    left:   calc(var(--u) * 20.13);
    top:    calc(var(--u) * 16.255);
    width:  calc(var(--u) * 13.6862);
    height: calc(var(--u) * 4.4469);
  }

  .front-hero__mline--parents {
    left:   calc(var(--u) * 20.13);
    top:    calc(var(--u) * 6.311);
    width:  calc(var(--u) * 0.116);
    height: calc(var(--u) * 14.3906);
  }

  /* Центр «Ученик»: контейнер left 160.07 / top 158.01, аватар 87.9 */
  .front-hero__center {
    left: calc(var(--u) * 20.1285);
    top:  calc(var(--u) * 15.801);
    gap:  calc(var(--u) * 0.6223);
  }

  .front-hero__avatar {
    width:  calc(var(--u) * 8.7899);
    height: calc(var(--u) * 8.7899);
  }

  .front-hero__center-label {
    font-size: calc(var(--u) * 1.9523);
    letter-spacing: -0.03em;
  }

  /* Узлы: left = центр иконки (icon.left + 24.114), top = icon.top.
     Подпись всегда под иконкой – gap как в макете (~4.7px до текста). */
  .front-hero__node {
    gap: calc(var(--u) * 0.466);
  }

  .front-hero__node-icon {
    width:  calc(var(--u) * 4.8228);
    height: calc(var(--u) * 4.8228);
  }

  .front-hero__node span {
    font-size:   calc(var(--u) * 1.089);
    line-height: calc(var(--u) * 1.4779);
    font-weight: 600;
  }

  .front-hero__node--parents  { left: calc(var(--u) * 20.13);  top: calc(var(--u) * 3.9); }
  .front-hero__node--teachers { left: calc(var(--u) * 33.816); top: calc(var(--u) * 13.844); }
  .front-hero__node--research { left: calc(var(--u) * 28.589); top: calc(var(--u) * 29.933); }
  .front-hero__node--academic { left: calc(var(--u) * 11.671); top: calc(var(--u) * 29.933); }
  .front-hero__node--clubs    { left: calc(var(--u) * 6.444);  top: calc(var(--u) * 13.844); }

  /* Сетка программ – нода 32705:7189 */
  .front-hero__programs {
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 393px;
    margin-inline: auto;
    padding: 0 24px;
    box-sizing: border-box;
  }

  .front-hero__programs-title {
    margin: 0;
    font-size: 16px;
    line-height: normal;
    font-weight: 700;
    color: var(--color-text-invert);
  }

  .front-hero__programs-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
  }

  .front-hero__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px 12px;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.2);

    font-size: 14px;
    line-height: normal;
    font-weight: 600;
    color: var(--color-text-invert);
    white-space: nowrap;
  }

  .front-problems__grid,
  .front-ap__grid,
  .front-track__grid,
  .front-tiles__grid,
  .front-res__grid { grid-template-columns: minmax(0, 1fr); }

  .front-problems__card,
  .front-ap__card,
  .front-track__card {
    height: auto;
    min-height: 0;
  }

  .front-service__text,
  .front-service__photo { min-height: 0; }

  .front-service__photo { aspect-ratio: 910 / 534; }

  .front-consult__inner { padding-block: var(--space-64); }
  .front-consult__hint { flex-direction: column; align-items: flex-start; }

  .front-nav-card__title,
  .front-service__title { font-size: var(--fs-cta-title); }

  /* В макете под кружок с номером отведена ровно половина строки. На узком
     экране столько пустоты не остаётся – кружок прижимается к тексту. */
  .front-faq__side { flex: 0 0 auto; }
  .front-faq__main { padding-left: var(--space-12); }
}

/* ==========================================================================
   КАРТОЧКИ ФИНАЛЬНОЙ СЕТКИ: ТЕКСТ НЕ ЛЕЗЕТ НА ФОТО – 2026-08-22

   Фотографии и плитки внутри карточки расставлены в ПРОЦЕНТАХ от неё и
   сжимаются вместе с ней, а кегль заголовка (48px) и ширина описания
   (490px) были фиксированными. На 1280–1900 карточка узкая, текст остаётся
   прежним – описание «Над каждым учеником работают…» ложилось прямо на
   лицо, а логотип IELTS накрывал строку (замечание заказчика 2026-08-22).

   Лечим в тех же единицах, в которых расставлены картинки: карточка
   становится контейнером, кегль и ширина текста считаются от её ширины
   (cqi). Предел ширины текста у каждой карточки свой – по левому краю её
   фотографии из блока выше, минус небольшой зазор.

   Ниже 1280 фотографии карточек скрыты (см. медиазапрос 1279), а на 1860+
   ряд карточек шириной как в макете и заголовки в одну строку помещаются –
   там ничего не меняем. Поэтому вилка 1280–1859.
   ========================================================================== */

@media (min-width: 1280px) and (max-width: 1859px) {

  .front-nav-card {
    container-type: inline-size;
    --nav-text-max: 54cqi;
  }

  /* Фото начинается на 43.39% ширины карточки – текста остаётся меньше. */
  .front-nav-card--admission { --nav-text-max: 40cqi; }

  /* У «Экзаменов» и «Материалов» вместо фото плитки с логотипами:
     верхняя стоит на 62% и 66.75%. */
  .front-nav-card--exams     { --nav-text-max: 58cqi; }
  .front-nav-card--materials { --nav-text-max: 62cqi; }

  .front-nav-card__head,
  .front-nav-card__desc { max-width: var(--nav-text-max); }

  /* На 1920 карточка 901px: 5.2cqi = 46.9 – макетные 48 в пределах
     погрешности; на 1440 заголовок ужмётся до 34 и перестанет доставать
     до фотографии. */
  .front-nav-card__title { font-size: min(var(--fs-h1), 5.2cqi); }
}