/*
  Все размеры заданы в vw.
  Десктоп: макет 1440px → 1px = 100vw / 1440 = 0.069444vw.
  Мобильная версия (≤ 768px): база 390px → 1px = 100vw / 390 = 0.25641vw.
*/

@font-face {
  font-family: "Gilroy";
  src:
    local("Gilroy-Regular"),
    url("fonts/Gilroy-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  src:
    local("Gilroy-Light"),
    url("fonts/Gilroy-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #f8f8f8;
  --color-surface: #ffffff;
  --color-ink: #222222;
  --color-black: #000000;
  --color-blue: #4c74f9;
  --color-blue-soft: #b1c3ff;
  --color-blue-accent: #7192ff;
  --color-lime: #d3ff36;
  --color-lime-ink: #799a04;

  --font-display: "Gilroy", "Montserrat", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, sans-serif;

  --gutter: 5.5556vw; /* 80px */
  --header-h: 6.6667vw; /* 96px */
  --radius-lg: 2.2222vw; /* 32px */
}

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

html {
  scroll-behavior: smooth;
}

/* Якорные переходы не уходят под закреплённую шапку */
section[id] {
  scroll-margin-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

/* ---------- Капсулы ---------- */

.pill,
.tag {
  display: inline-flex;
  align-items: center;
  height: 3.3333vw; /* 48px */
  padding: 0 1.5278vw; /* 22px */
  border-radius: 1.6667vw; /* 24px */
  font-family: var(--font-body);
  font-size: 1.1111vw; /* 16px */
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}

.pill {
  font-weight: 500;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.pill:focus-visible {
  outline: 0.1389vw solid var(--color-blue);
  outline-offset: 0.2083vw;
}

.pill--dark {
  background: var(--color-ink);
  color: var(--color-surface);
}

.pill--dark:hover {
  background: var(--color-blue);
}

.pill--outline {
  background: var(--color-surface);
  color: var(--color-black);
  border: 0.1042vw solid var(--color-black); /* 1.5px */
}

.pill--outline:hover {
  background: var(--color-black);
  color: var(--color-surface);
}

.tag {
  font-weight: 600;
}

.tag--blue {
  background: var(--color-blue-soft);
  color: var(--color-blue);
}

.tag--lime {
  background: var(--color-lime);
  color: var(--color-lime-ink);
}

/* ---------- Шапка (закреплена при скролле) ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-surface);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); /* 0 0 32px 32px */
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 var(--gutter);
}

.header__nav {
  display: flex;
  gap: 1.3889vw; /* 20px */
}

/* Ширины кнопок из макета — чтобы позиции совпадали независимо от рендера шрифта */
.header .pill {
  justify-content: center;
}

.pill--lesson {
  width: 14.4444vw;
} /* 208px */
.pill--services {
  width: 7.2222vw;
} /* 104px */
.pill--about {
  width: 8.125vw;
} /* 117px */
.pill--contacts {
  width: 8.6806vw;
} /* 125px */

/* ---------- Первый экран ---------- */

/* Фрейм Wireframe 55, 1440×782 (вместе с зоной шапки 96px):
   фото 648px слева, 74px отступ, текст 558px справа */
.hero {
  display: grid;
  grid-template-columns: 45vw 38.75vw; /* 648px + 558px */
  column-gap: 5.1389vw; /* 74px */
  align-items: end; /* низ текста = низ карточки */
  padding: 3.8194vw var(--gutter) 7.5vw; /* 55px … 108px (макет +30px по высоте) */
}

.hero__text {
  position: relative;
}

/* Маленький чубрик справа от «репетитор»: кадр 93×67 из квадратной картинки */
.hero__invader {
  position: absolute;
  left: 27.7083vw; /* 399px от начала заголовка */
  top: 0.8333vw; /* 12px */
  width: 6.4583vw; /* 93px */
  height: 4.6528vw; /* 67px */
  overflow: hidden;
  pointer-events: none;
}

.hero__invader img {
  position: absolute;
  left: -12.84%;
  top: -40.51%;
  width: 125.69%;
  height: 173.42%;
  max-width: none;
}

.hero__title {
  position: relative;
  width: 38.3333vw; /* 552px */
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 5.1389vw; /* 74px */
  line-height: 1.14;
  color: var(--color-ink);
}

.hero__subtitle {
  width: 38.75vw; /* 558px */
  margin: 0.9667vw 0 0; /* 13.9px — подзаголовок на 631px */
  font-size: 1.6667vw; /* 24px */
  font-weight: 400;
  line-height: normal;
  color: var(--color-ink);
}

/* Повёрнутые теги: рамки и координаты взяты из макета (относительно заголовка) */
.tag-box {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Парение: анимируется обёртка, чтобы не сбить поворот самого тега */
  animation: tag-float var(--float-duration, 3.6s) ease-in-out
    var(--float-delay, 0s) infinite alternate;
  will-change: transform;
}

@keyframes tag-float {
  from {
    transform: translate(0, 0) rotate(0deg);
  }
  to {
    transform: translate(var(--float-x, 0.1389vw), calc(-1 * var(--float-y)))
      rotate(var(--float-tilt, 1deg));
  }
}

:root {
  --float-y: 0.5556vw; /* 8px вверх */
}

/* Разные ритмы, чтобы теги парили вразнобой */
.tag-box--name {
  --float-duration: 3.4s;
  --float-delay: -0.6s;
  --float-tilt: -1deg;
}
.tag-box--exam {
  --float-duration: 4.1s;
  --float-delay: -2.1s;
  --float-x: -0.1389vw;
}
.fact--education .tag-box {
  --float-duration: 3.8s;
  --float-delay: -1.3s;
  --float-tilt: -1deg;
}
.fact--work .tag-box {
  --float-duration: 4.4s;
  --float-delay: -0.2s;
  --float-x: -0.1389vw;
}
.fact--teaching .tag-box {
  --float-duration: 3.2s;
  --float-delay: -2.7s;
}

@media (prefers-reduced-motion: reduce) {
  .tag-box {
    animation: none;
  }
}

.tag-box--name {
  left: -2.3611vw; /* -34px */
  top: -1.875vw; /* -27px */
  width: 7.6835vw; /* 110.6px */
  height: 3.7699vw; /* 54.3px */
}

.tag-box--name .tag {
  transform: rotate(-3.38deg);
}

.tag-box--exam {
  left: 29.5139vw; /* 425px */
  top: 10vw; /* 144px */
  width: 8.468vw; /* 121.9px */
  height: 3.6858vw; /* 53.1px */
}

.tag-box--exam .tag {
  transform: rotate(2.45deg);
}

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

.hero__card {
  position: relative;
  z-index: 1;
  width: 45vw; /* 648px */
  height: 38.4028vw; /* 553px */
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-blue);
}

/* Оба слоя фото в одной рамке 730×773 внутри карточки 648×553 */
.hero__photo {
  position: absolute;
  left: -2.7083vw; /* -39px */
  top: -0.8333vw; /* -12px */
  width: 50.6944vw; /* 730px */
  height: 53.6806vw; /* 773px */
  max-width: none;
  object-position: bottom;
  pointer-events: none;
}

.hero__path {
  position: absolute;
  left: -4.4809vw; /* -64.5px */
  top: 2.5938vw; /* 37.4px */
  width: 48.7771vw; /* 702.4px */
  height: 34.7333vw; /* 500.2px */
  pointer-events: none;
}

.hero__path-inner {
  position: absolute;
  inset: -0.24% -0.18% -0.25% -0.18%;
}

.hero__path-inner img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* ---------- Обо мне (фрейм 1440×673) ---------- */

.section-title {
  margin: 0.0694vw 0 0; /* 1px — компенсация метрик Gilroy */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 5.1389vw; /* 74px */
  line-height: normal;
  color: var(--color-ink);
}

.about {
  padding: 0 var(--gutter) 2.7778vw; /* … 40px */
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 9.2361vw; /* 133px — от верха секции до карточки */
}

/* Кадр 110×64 из квадратной картинки инвейдера */
.section-invader {
  position: relative;
  flex-shrink: 0;
  width: 7.6389vw; /* 110px */
  height: 4.4444vw; /* 64px */
  margin-top: 0.9028vw; /* 13px */
  overflow: hidden;
}

.section-invader img {
  position: absolute;
  left: 0;
  top: -39.06%;
  width: 100%;
  height: 171.88%;
  max-width: none;
}

/* Текст начинается в 117px от верха карточки; +1.5px компенсируют разницу
   метрик Gilroy в браузере и в Figma */
.about__card {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 34.7222vw; /* 500px */
  padding-top: 8.2292vw; /* 118.5px */
  border-radius: var(--radius-lg);
  background: var(--color-blue);
}

.about__text {
  width: 86.7361vw; /* 1249px */
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 5.1389vw; /* 74px */
  line-height: normal;
  text-align: center;
  color: var(--color-surface);
}

.about__accent {
  color: var(--color-blue-accent);
}

/* Появление текста при скролле (классы ставит script.js) */
.about__text.is-reveal .word {
  color: var(--color-blue-accent);
  transition: color 0.35s ease;
}

.about__text.is-reveal .word.is-lit {
  color: var(--color-surface);
}

@media (prefers-reduced-motion: reduce) {
  .about__text.is-reveal .word {
    transition: none;
  }
}

/* ---------- Средний балл (фрейм Wireframe 51) ---------- */

.results {
  display: grid;
  grid-template-columns: 48.0556vw 39.1667vw; /* 692px + 564px */
  grid-template-rows: 25.2778vw 17.2222vw; /* 364px + 248px */
  gap: 1.6667vw; /* 24px */
  padding: 7.4306vw var(--gutter) 6.7361vw; /* 107px … 97px (фрейм 1440×840) */
}

.results__main {
  position: relative;
  grid-row: 1 / span 2;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-ink);
}

.results__title {
  position: relative;
  z-index: 1;
  margin: 3.2639vw 0 0 3.1944vw; /* 47px (46 + 1px компенсация метрик Gilroy) / 46px */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 5.1389vw; /* 74px */
  line-height: normal;
  color: var(--color-surface);
}

.results__invader {
  position: absolute;
  left: -9.375vw; /* -135px */
  top: 14.2361vw; /* 205px */
  width: 44.3056vw; /* 638px */
  height: 44.3056vw;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

/* Карточки с цифрами */
.stat {
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 3.1944vw; /* 46px от края карточки */
}

.stat--dark {
  background: var(--color-ink);
  color: var(--color-surface);
  --value-h: 5.9722vw; /* 86px — блок цифры в макете */
}

.stat--outline {
  border: 0.1389vw solid var(--color-black); /* 2px */
  padding: 3.0556vw; /* 44px + 2px рамки = 46px, как у тёмной карточки */
  color: var(--color-ink);
  --value-h: 5.0694vw; /* 73px */
}

.stat__value {
  position: relative;
  top: 0.0694vw; /* 1px — компенсация метрик Gilroy */
  height: var(--value-h);
  margin: 0 0 1.25vw; /* 18px */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 5.1389vw; /* 74px */
  line-height: normal;
}

.stat__label {
  margin: 0;
  font-size: 1.6667vw; /* 24px */
  font-weight: 400;
  line-height: normal;
}

/* ---------- Факты: образование, работа, опыт (фрейм Wireframe 52) ---------- */

.facts {
  position: relative;
  padding: 7.7083vw 0 10.9028vw 6.0417vw; /* 111px сверху, 157px снизу (фрейм 1440×418), 87px слева */
}

/* Пунктирная линия под карточками */
.facts__path {
  position: absolute;
  left: 2.9535vw; /* 42.5px */
  top: 4.259vw; /* 61.3px */
  width: 77.8103vw; /* 1120.5px */
  height: 20.5389vw; /* 295.8px */
  pointer-events: none;
}

.facts__path-inner {
  position: absolute;
  inset: -0.42% -0.13% -0.42% -0.11%;
}

.facts__path-inner img,
.facts__path-inner svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
}

/* Пунктир «рисуется» штрих за штрихом, когда секция появляется на экране.
   is-armed ставит script.js — без скрипта стрелка просто видна целиком */
.draw-path.is-armed path {
  opacity: 0;
}

.draw-path.is-armed.is-drawn path {
  animation: dash-in 0.35s ease-out forwards; /* задержка у каждого штриха своя */
}

@keyframes dash-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .draw-path.is-armed path {
    opacity: 1;
    animation: none;
  }
}

.facts__list {
  position: relative;
  display: flex;
  gap: 2.7083vw; /* 39px */
  margin: 0;
  padding: 0;
  list-style: none;
}

.fact {
  position: relative;
}

.fact__card {
  width: 27.8472vw; /* 401px */
  height: 10.4167vw; /* 150px */
  padding: 2.2222vw; /* 32px */
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.fact--work .fact__card {
  width: 27.9861vw; /* 403px */
}

.fact__text {
  width: 21.5278vw; /* 310px */
  margin: 0;
  font-size: 1.6667vw; /* 24px */
  font-weight: 400;
  line-height: normal;
  color: var(--color-ink);
}

.fact__text strong {
  font-weight: 600;
}

/* Теги: рамки и координаты из макета, относительно своей карточки */
.fact .tag-box {
  z-index: 1;
}

.fact--education .tag-box {
  left: 9.1438vw; /* 131.7px */
  top: -1.8729vw; /* -27px */
  width: 11.0804vw; /* 159.6px */
  height: 3.9706vw; /* 57.2px */
}

.fact--education .tag {
  transform: rotate(-3.38deg);
}

.fact--work .tag-box {
  left: 13.9368vw; /* 200.7px */
  top: 8.7722vw; /* 126.3px */
  width: 14.6876vw; /* 211.5px */
  height: 4.1977vw; /* 60.4px */
}

.fact--work .tag {
  transform: rotate(3.44deg);
}

.fact--teaching .tag-box {
  left: 11.2549vw; /* 162.1px */
  top: -1.809vw; /* -26px */
  width: 12.2781vw; /* 176.8px */
  height: 3.824vw; /* 55.1px */
}

.fact--teaching .tag {
  transform: rotate(-2.33deg);
}

/* ---------- Цены (фрейм Wireframe 53, 1440×749) ---------- */

.prices {
  padding: 9.1667vw var(--gutter); /* 132px сверху и снизу */
}

.prices__grid {
  display: grid;
  grid-template-columns: 43.0556vw 43.0556vw; /* 620px × 2 */
  gap: 2.7778vw; /* 40px */
}

.price-card {
  height: 24.4444vw; /* 352px */
  padding: 3.3333vw 2.7778vw 0; /* 48px сверху, 40px по бокам */
  overflow: hidden;
  border-radius: var(--radius-lg);
  color: var(--color-surface);
}

.price-card--blue {
  background: var(--color-blue);
  --divider: rgba(255, 255, 255, 0.3);
}

.price-card--dark {
  background: var(--color-ink);
  --divider: rgba(255, 255, 255, 0.25);
}

.price-card__tag {
  display: inline-flex;
  align-items: center;
  height: 2.7778vw; /* 40px */
  padding: 0 1.5278vw; /* 22px */
  border-radius: 1.3889vw; /* 20px */
  background: var(--color-surface);
  font-size: 0.9722vw; /* 14px */
  font-weight: 600;
  line-height: 1.2;
  vertical-align: top;
}

.price-card--blue .price-card__tag {
  color: var(--color-blue);
}
.price-card--dark .price-card__tag {
  color: var(--color-ink);
}

.price-card__list {
  margin: 2.7778vw 0 0; /* 40px от тега до первой линии */
}

/* Строка: линия сверху, высота 96px до следующей линии */
.price-card__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 6.6667vw; /* 96px */
  border-top: 0.0694vw solid var(--divider); /* 1px */
}

.price-card__row dt {
  margin-top: 2.1528vw; /* 31px + 1px линии = 32px */
  font-size: 1.6667vw; /* 24px */
  font-weight: 400;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.8);
}

.price-card__row dd {
  margin: 1.875vw 0 0; /* 27px + 1px линии = 28px */
  font-size: 2.2222vw; /* 32px */
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.price-card__row dd span {
  font-size: 1.6667vw; /* 24px */
  font-weight: 400;
}

/* ---------- Ученики (фрейм Wireframe 54, 1440×977) ---------- */

.reviews {
  padding: 8.2639vw var(--gutter); /* 119px сверху и снизу */
}

/* Стопка 1280×606: карточки наложены друг на друга со сдвигом 85px */
.reviews__stack {
  position: relative;
  height: 42.0833vw; /* 606px */
}

/* Порядок папок фиксированный (--i). Раскрытая папка (.is-front)
   занимает 436px, папки после неё (.is-after) съезжают вниз на 351px;
   script.js переключает классы, а top плавно анимируется */
/* Сама карточка — прозрачный прямоугольник во всю ширину и не должна
   перехватывать мышь у карточек сзади: реагируют только цветные части */
.review {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition:
    top 0.6s cubic-bezier(0.65, 0, 0.35, 1),
    transform 0.25s ease;
}

.review__tab,
.review__body {
  pointer-events: auto;
}

.review--1 {
  --i: 0;
  z-index: 1;
}
.review--2 {
  --i: 1;
  z-index: 2;
}
.review--3 {
  --i: 2;
  z-index: 3;
}

.review {
  top: calc(var(--i) * 5.9028vw); /* шаг 85px */
}

.review.is-after {
  top: calc(var(--i) * 5.9028vw + 24.375vw); /* + 351px */
}

/* Задние карточки кликабельны и чуть приподнимаются при наведении */
.review:not(.is-front) {
  cursor: pointer;
}

.review:not(.is-front):hover {
  transform: translateY(-0.5556vw); /* 8px */
}

.review--1 {
  --review-bg: var(--color-ink);
  --review-fg: var(--color-surface);
}
.review--2 {
  --review-bg: var(--color-blue);
  --review-fg: var(--color-surface);
}
.review--3 {
  --review-bg: var(--color-lime);
  --review-fg: var(--color-ink);
}

/* Язычок 200px; нижняя часть уходит под тело карточки */
.review__tab {
  display: flex;
  align-items: flex-start; /* кнопка по умолчанию центрирует текст */
  width: 13.8889vw; /* 200px */
  height: 5.5556vw; /* 80px: 56 видно + 24 под скруглением */
  padding: 1.1111vw 0 0 3.125vw; /* 16px сверху, 45px слева */
  border: 0;
  border-radius: 1.6667vw 1.6667vw 0 0; /* 24px */
  background: var(--review-bg);
  font-family: var(--font-body);
  font-size: 1.6667vw; /* 24px */
  font-weight: 400;
  line-height: normal;
  text-align: left;
  color: var(--review-fg);
  cursor: inherit;
}

.review__tab:focus-visible {
  outline: 0.1389vw solid var(--color-ink);
  outline-offset: 0.2083vw;
}

/* Содержимое видно только у передней карточки; проявляется после того,
   как карточка доехала */
.review__content {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.review.is-front .review__content {
  opacity: 1;
  transition: opacity 0.4s ease 0.35s;
}

@media (prefers-reduced-motion: reduce) {
  .review,
  .review__content,
  .review.is-front .review__content {
    transition: none;
  }
}

.review--1 .review__tab {
  padding-left: 3.2639vw; /* 47px */
}

.review__body {
  position: absolute;
  top: 3.8889vw; /* 56px */
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4.1667vw; /* 60px */
  overflow: hidden;
  border-radius: 1.6667vw; /* 24px */
  background: var(--review-bg);
  color: var(--review-fg);
}

.review__name {
  height: 7.2222vw; /* 104px — текст начинается на 164px */
  margin: 0.0694vw 0 0; /* 1px — компенсация метрик Gilroy */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 4.1667vw; /* 60px */
  line-height: normal;
}

.review__text {
  width: 41.6667vw; /* 600px */
  margin-top: -0.0694vw; /* возврат 1px от заголовка */
  font-size: 1.6667vw; /* 24px */
  line-height: normal;
}

.review__text p {
  margin: 0;
}

.review__text p + p {
  margin-top: 1.2188em; /* пустая строка, как в макете */
}

.review__cta {
  position: absolute;
  top: 4.1667vw; /* 60px */
  right: 4.1667vw; /* 60px (left 903 + 317 = 1220) */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22.0139vw; /* 317px */
  height: 4.7222vw; /* 68px */
  border-radius: 2.3611vw; /* 34px */
  background: var(--color-surface);
  font-size: 1.6667vw; /* 24px */
  font-weight: 500;
  line-height: normal;
  color: var(--color-ink);
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.review__cta:hover {
  background: var(--color-ink);
  color: var(--color-surface);
}

.review__cta:focus-visible {
  outline: 0.1389vw solid var(--color-surface);
  outline-offset: 0.2083vw;
}

/* ---------- Подвал (фрейм 1440×753) ---------- */

.footer {
  position: relative;
  height: 52.2917vw; /* 753px */
  padding-top: 6.4583vw; /* 93px */
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-ink);
}

.footer__links {
  display: grid;
  grid-template-columns: 40.2778vw 40.2778vw; /* 580px × 2 */
  gap: 2.7778vw; /* 40px */
  justify-content: center;
}

.contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 8.3333vw; /* 120px */
  padding: 0 2.7778vw; /* 40px */
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-size: 1.6667vw; /* 24px */
  line-height: normal;
  color: var(--color-ink);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.contact-card__label {
  position: relative;
  top: 0.0694vw; /* 1px — компенсация метрик шрифта */
}

.contact-card__arrow {
  width: 2.2222vw; /* 32px */
  height: 2.2222vw;
  transition: transform 0.25s ease;
}

.contact-card:hover {
  background: var(--color-lime);
}

.contact-card:hover .contact-card__arrow {
  transform: translate(0.2778vw, -0.2778vw); /* 4px вправо-вверх */
}

.contact-card:focus-visible {
  outline: 0.1389vw solid var(--color-lime);
  outline-offset: 0.2083vw;
}

.footer__slogan {
  margin: 4.1667vw 0 0; /* 60px — текст на 273px */
  font-size: 1.6667vw; /* 24px */
  line-height: normal;
  text-align: center;
  color: var(--color-surface);
}

/* Инвейдер 934×934, верх на 213px, низ обрезан краем подвала */
.footer__invader {
  position: absolute;
  top: 14.7917vw; /* 213px */
  left: 50%;
  width: 64.8611vw; /* 934px */
  height: 64.8611vw;
  max-width: none;
  object-fit: cover;
  transform: translateX(-50%);
  pointer-events: none;
}

/* ---------- Форма записи (фрейм 1440×983) ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.signup {
  padding: 5.1389vw 0 4.4444vw; /* 74px … 64px */
}

/* По якорю #lesson — к самой панели: верхний отступ секции не показываем,
   под шапкой остаётся зазор 16px */
.signup[id] {
  scroll-margin-top: calc(var(--header-h) - 5.1389vw + 1.1111vw);
}

.signup__panel {
  height: 58.6806vw; /* 845px */
  padding: 3.1944vw var(--gutter) 0; /* 46px сверху */
  border-radius: var(--radius-lg);
  background: var(--color-ink);
  overflow: hidden;
}

.signup__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 11.3889vw; /* 164px — до формы (210 − 46) */
}

.section-title--light {
  color: var(--color-surface);
}

/* Кадр 110×68 из квадратной картинки, правый край на 1361px */
.signup__invader {
  position: relative;
  flex-shrink: 0;
  width: 7.6389vw; /* 110px */
  height: 4.7222vw; /* 68px */
  margin: 0.7639vw -0.0694vw 0 0; /* 11px сверху */
  overflow: hidden;
}

.signup__invader img {
  position: absolute;
  left: 0;
  top: -33.82%;
  width: 100%;
  height: 161.76%;
  max-width: none;
}

.signup__stack {
  position: relative;
  width: 60.5556vw; /* 872px */
  margin: 0 auto;
}

/* Голубая подложка, повёрнутая на 3.76° */
.signup__backdrop {
  position: absolute;
  inset: 0;
  border-radius: 1.9444vw; /* 28px */
  background: var(--color-blue-soft);
  transform: translate(0.0354vw, -0.1396vw) rotate(3.76deg);
}

.signup-form {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 37.0139vw; /* 533px */
  padding: 2.3611vw 3.8889vw 0; /* 34px сверху, 56px по бокам */
  border-radius: 1.9444vw; /* 28px */
  background: var(--color-surface);
}

.signup-form__title {
  width: 54.1667vw; /* 780px */
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 5.0694vw; /* 73px */
  line-height: 4.9583vw; /* 71.4px */
  letter-spacing: -0.1181vw; /* -1.7px */
  text-align: center;
  color: #1f1f1f;
}

.signup-form__chips {
  display: flex;
  gap: 0.6944vw; /* 10px */
  margin-top: 2.6528vw; /* 38.2px → ряд на 215px */
}

.chip-group {
  display: flex;
  gap: 0.6944vw; /* 10px */
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.chip-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.3333vw; /* 48px */
  padding: 0 1.6667vw; /* 24px */
  border: 0.0694vw solid #1f1f1f; /* 1px */
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 1.1111vw; /* 16px */
  font-weight: 500;
  line-height: 1.6667vw; /* 24px */
  color: #1f1f1f;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.chip--oge {
  width: 5.9028vw;
} /* 85px */
.chip--ege {
  width: 5.6944vw;
} /* 82px */
.chip--math {
  width: 10.4167vw;
} /* 150px */
.chip--cs {
  width: 11.5972vw;
} /* 167px */

.chip:hover {
  border-color: #3f76ff;
  color: #3f76ff;
}

.chip-input:checked + .chip {
  border-color: #3f76ff;
  background: #3f76ff;
  color: var(--color-surface);
}

/* Предмет не выбран при попытке отправки */
.chip-group.is-invalid .chip {
  border-color: #e5484d;
  color: #e5484d;
}

.chip-input:focus-visible + .chip {
  outline: 0.1389vw solid #3f76ff;
  outline-offset: 0.2083vw;
}

.signup-form__fields {
  display: flex;
  gap: 1.1111vw; /* 16px */
  margin-top: 1.6667vw; /* 24px */
}

.field {
  width: 25.8333vw; /* 372px */
  height: 5vw; /* 72px */
  padding: 0 2.2222vw; /* 32px */
  border: 0.0694vw solid transparent;
  border-radius: 999px;
  background: #f4f4f4;
  font-family: var(--font-body);
  font-size: 1.3889vw; /* 20px */
  color: #1f1f1f;
  outline: none;
  transition: border-color 0.2s ease;
}

.field::placeholder {
  color: #8a8a8a;
  opacity: 1;
}

.field:focus {
  border-color: #3f76ff;
}

.signup-form__submit {
  width: 52.7778vw; /* 760px */
  height: 5vw; /* 72px */
  margin-top: 1.6667vw; /* 24px */
  border: 0;
  border-radius: 999px;
  background: #3f76ff;
  font-family: var(--font-body);
  font-size: 1.5278vw; /* 22px */
  font-weight: 500;
  line-height: 2.2917vw; /* 33px */
  color: var(--color-surface);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.signup-form__submit:hover {
  background: var(--color-blue);
}

/* Пока поля не заполнены — серая, как в макете */
.signup-form__submit:disabled {
  background: #a8a8a8;
  cursor: default;
}

.signup-form__submit:focus-visible {
  outline: 0.1389vw solid #3f76ff;
  outline-offset: 0.2083vw;
}

.signup-form__note {
  margin: 1.6667vw 0 0; /* 24px */
  font-size: 0.9722vw; /* 14px */
  line-height: 1.3889vw; /* 20px */
  text-align: center;
  color: #555555;
}

.signup-form__note.is-success {
  color: #3f76ff;
  font-weight: 500;
}

.signup-form__note.is-error {
  color: #e5484d;
  font-weight: 500;
}

/* ---------- Мобильная версия (база 390px) ---------- */

@media (max-width: 768px) {
  :root {
    --gutter: 4.1026vw; /* 16px */
    --radius-lg: 6.1538vw; /* 24px */
    --float-y: 1.5385vw; /* 6px вверх */
  }

  .tag-box {
    --float-x: 0.5128vw; /* 2px */
  }

  .header__inner {
    flex-wrap: wrap;
    row-gap: 3.0769vw; /* 12px */
    height: auto;
    padding-block: 4.1026vw; /* 16px */
  }

  .header__nav {
    gap: 2.0513vw; /* 8px */
  }

  .pill,
  .tag {
    height: 10.2564vw; /* 40px */
    padding: 0 4.1026vw; /* 16px */
    border-radius: 5.1282vw; /* 20px */
    font-size: 3.5897vw; /* 14px */
  }

  .pill--outline {
    border-width: 0.3846vw; /* 1.5px */
  }

  .header .pill {
    width: auto;
  }

  .hero {
    grid-template-columns: 100%;
    row-gap: 14.359vw; /* 56px — место под тег «я дима!» */
    padding: 6.1538vw var(--gutter) 12.3077vw; /* 24px … 48px */
  }

  .hero__invader {
    left: 60vw; /* 234px — справа от «репетитор» */
    top: 1.0256vw; /* 4px */
    width: 18.4615vw; /* 72px */
    height: 13.3333vw; /* 52px */
  }

  .hero__title {
    width: auto;
    font-size: 10.2564vw; /* 40px */
  }

  .hero__subtitle {
    width: auto;
    margin-top: 4.1026vw; /* 16px */
    font-size: 4.6154vw; /* 18px */
  }

  .hero__subtitle br {
    display: none; /* на узком экране текст переносится сам */
  }

  .tag-box--name {
    left: -2.0513vw; /* -8px */
    top: -10.2564vw; /* -40px */
    width: 25.641vw; /* 100px */
    height: 12.8205vw; /* 50px */
  }

  .tag-box--exam {
    left: auto;
    right: 0;
    top: -11.2821vw; /* -44px — над заголовком, напротив «я дима!» */
    width: 28.2051vw; /* 110px */
    height: 12.8205vw; /* 50px */
  }

  .hero__card {
    width: 100%;
    height: auto;
    aspect-ratio: 648 / 553;
  }

  /* Внутри карточки — в процентах от неё (648×553), чтобы пропорции слоёв не менялись */
  .hero__photo {
    left: -6.0185%;
    top: -2.17%;
    width: 112.6543%;
    height: 139.783%;
  }

  .hero__path {
    left: -9.9576%;
    top: 6.7541%;
    width: 108.3935%;
    height: 90.4447%;
  }

  .section-title {
    font-size: 10.2564vw; /* 40px */
  }

  .about {
    padding-bottom: 12.3077vw; /* 48px */
  }

  .section-head {
    align-items: center;
    height: auto;
    margin-bottom: 6.1538vw; /* 24px */
  }

  .section-invader {
    width: 17.9487vw; /* 70px */
    height: 10.2564vw; /* 40px */
    margin-top: 0;
  }

  .about__card {
    align-items: center;
    height: auto;
    padding: 12.3077vw 6.1538vw; /* 48px 24px */
  }

  .section-title {
    margin-top: 0;
  }

  .about__text {
    width: auto;
    font-size: 7.1795vw; /* 28px */
  }

  .results {
    grid-template-columns: 100%;
    grid-template-rows: none;
    gap: 3.0769vw; /* 12px */
    padding-top: 0;
  }

  .results__main {
    grid-row: auto;
    aspect-ratio: 692 / 636;
  }

  .results__title {
    margin: 6.1538vw 0 0 6.1538vw; /* 24px */
    font-size: 9.2308vw; /* 36px */
  }

  /* Положение инвейдера в процентах от карточки 692×636 */
  .results__invader {
    left: -19.5087%;
    top: 32.2327%;
    width: 92.1965%;
    height: auto;
    aspect-ratio: 1;
  }

  .stat,
  .stat--outline {
    padding: 6.1538vw; /* 24px */
  }

  .stat--outline {
    border-width: 0.5128vw; /* 2px */
  }

  .stat__value {
    top: 0;
    height: auto;
    margin-bottom: 2.0513vw; /* 8px */
    font-size: 12.3077vw; /* 48px */
  }

  .stat__label {
    font-size: 4.1026vw; /* 16px */
  }

  .facts {
    padding: 6.1538vw var(--gutter) 12.3077vw; /* 24px … 48px */
  }

  .facts__path {
    display: none;
  }

  .facts__list {
    flex-direction: column;
    gap: 7.1795vw; /* 28px — место под теги */
  }

  .fact__card,
  .fact--work .fact__card {
    width: 100%;
    height: auto;
    padding: 6.1538vw; /* 24px */
  }

  .fact__text {
    width: auto;
    font-size: 4.6154vw; /* 18px */
  }

  .fact--education .tag-box,
  .fact--work .tag-box,
  .fact--teaching .tag-box {
    left: auto;
    right: 4.1026vw; /* 16px */
    top: -5.1282vw; /* -20px */
    width: auto;
    height: auto;
  }

  .prices {
    padding-block: 6.1538vw 12.3077vw; /* 24px … 48px */
  }

  .prices__grid {
    grid-template-columns: 100%;
    gap: 3.0769vw; /* 12px */
  }

  .price-card {
    height: auto;
    padding: 6.1538vw 6.1538vw 2.0513vw; /* 24px … 8px */
  }

  .price-card__tag {
    height: 8.2051vw; /* 32px */
    padding: 0 4.1026vw; /* 16px */
    border-radius: 4.1026vw;
    font-size: 3.5897vw; /* 14px */
  }

  .price-card__list {
    margin-top: 6.1538vw; /* 24px */
  }

  .price-card__row {
    align-items: center;
    height: 16.4103vw; /* 64px */
    border-top-width: 0.2564vw; /* 1px */
  }

  .price-card__row dt,
  .price-card__row dd {
    margin: 0;
  }

  .price-card__row dt {
    font-size: 4.6154vw; /* 18px */
  }

  .price-card__row dd {
    font-size: 6.1538vw; /* 24px */
  }

  .price-card__row dd span {
    font-size: 4.1026vw; /* 16px */
  }

  .signup {
    padding: 0 var(--gutter) 12.3077vw;
  }

  /* Сверху у секции отступа нет — только зазор 16px под шапкой */
  .signup[id] {
    scroll-margin-top: calc(var(--header-h) + 4.1026vw);
  }

  .signup__panel {
    height: auto;
    padding: 6.1538vw 4.1026vw 12.3077vw; /* 24px 16px 48px */
  }

  .signup__head {
    align-items: center;
    height: auto;
    margin-bottom: 10.2564vw; /* 40px */
  }

  .signup__invader {
    width: 17.9487vw; /* 70px */
    height: 11.0256vw; /* 43px */
    margin: 0;
  }

  .signup__stack {
    width: 100%;
  }

  .signup__backdrop {
    border-radius: 6.1538vw;
    transform: rotate(3.76deg);
  }

  .signup-form {
    height: auto;
    padding: 7.1795vw 5.1282vw 6.1538vw; /* 28px 20px 24px */
    border-radius: 6.1538vw;
  }

  .signup-form__title {
    width: auto;
    font-size: 8.2051vw; /* 32px */
    line-height: 1;
    letter-spacing: -0.1923vw;
  }

  .signup-form__chips {
    flex-direction: column;
    align-items: center;
    gap: 2.0513vw; /* 8px */
    margin-top: 6.1538vw;
  }

  .chip-group {
    gap: 2.0513vw;
  }

  .chip,
  .chip--oge,
  .chip--ege,
  .chip--math,
  .chip--cs {
    width: auto;
    height: 10.2564vw; /* 40px */
    padding: 0 4.6154vw; /* 18px */
    border-width: 0.2564vw;
    font-size: 3.5897vw; /* 14px */
    line-height: 1.2;
  }

  .signup-form__fields {
    flex-direction: column;
    width: 100%;
    gap: 2.0513vw;
    margin-top: 6.1538vw;
  }

  .field,
  .signup-form__submit {
    width: 100%;
    height: 14.359vw; /* 56px */
  }

  .field {
    padding: 0 6.1538vw;
    border-width: 0.2564vw;
    font-size: 4.1026vw; /* 16px */
  }

  .signup-form__submit {
    margin-top: 3.0769vw;
    font-size: 4.6154vw; /* 18px */
    line-height: 1.2;
  }

  .signup-form__note {
    margin-top: 4.1026vw;
    font-size: 3.0769vw; /* 12px */
    line-height: 1.3;
  }

  .reviews {
    padding-block: 6.1538vw 12.3077vw;
  }

  /* Папки идут в потоке и наезжают друг на друга: у свёрнутой видны
     язычок и полоска 48px, раскрытая задаёт высоту своим содержимым */
  .reviews__stack {
    height: auto;
  }

  .review,
  .review.is-after {
    position: relative;
    inset: auto;
  }

  .review + .review {
    margin-top: -10.2564vw; /* -40px → шаг язычков 48px */
  }

  .review:not(.is-front):hover {
    transform: none;
  }

  .review__tab,
  .review--1 .review__tab {
    width: 30.7692vw; /* 120px */
    height: 16.4103vw; /* 64px */
    padding: 2.5641vw 0 0 5.1282vw; /* 10px 20px */
    border-radius: 5.1282vw 5.1282vw 0 0;
    font-size: 4.1026vw; /* 16px */
  }

  .review__body {
    position: relative;
    top: auto;
    margin-top: -6.1538vw; /* поверх нижней части язычка */
    padding: 6.1538vw; /* 24px */
    border-radius: 5.1282vw;
  }

  .review:not(.is-front) .review__body {
    height: 12.3077vw; /* 48px — полоска свёрнутой папки */
    padding-block: 0;
  }

  /* Следующая папка наезжает на 40px — запас снизу, чтобы не закрыть кнопку */
  .review.is-front:not(:last-child) .review__body {
    padding-bottom: 16.4103vw; /* 24 + 40px */
  }

  .review__name {
    height: auto;
    margin: 0 0 4.1026vw;
    font-size: 8.2051vw; /* 32px */
  }

  .review__text {
    width: auto;
    margin-top: 0;
    font-size: 4.1026vw; /* 16px */
  }

  .review__cta {
    position: static;
    width: 100%;
    height: 14.359vw; /* 56px */
    margin-top: 6.1538vw;
    border-radius: 7.1795vw;
    font-size: 4.6154vw; /* 18px */
  }

  .footer {
    height: 150vw;
    padding: 8.2051vw var(--gutter) 0; /* 32px */
    border-radius: 6.1538vw 6.1538vw 0 0;
  }

  .footer__links {
    grid-template-columns: 100%;
    gap: 3.0769vw; /* 12px */
  }

  .contact-card {
    height: 20.5128vw; /* 80px */
    padding: 0 6.1538vw; /* 24px */
    border-radius: 6.1538vw;
    font-size: 4.6154vw; /* 18px */
  }

  .contact-card__arrow {
    width: 7.1795vw; /* 28px */
    height: 7.1795vw;
  }

  .footer__slogan {
    margin-top: 10.2564vw; /* 40px */
    font-size: 5.1282vw; /* 20px */
  }

  .footer__invader {
    top: auto;
    bottom: -30vw;
    width: 90vw;
    height: 90vw;
  }
}