/* ============================================================
   EZlingua — онлайн-школа иностранных языков
   Дизайн-система: цвета, шрифты, тени, анимации
   ============================================================ */

/* ---------- Шрифты ---------- */

/* На Wix логотип был набран шрифтом Arsenal SC, а кнопка «Пройти тест
   бесплатно» — Montserrat Bold. Оба шрифта бесплатные и загружаются
   с Google Fonts, поэтому отдельные файлы шрифтов не нужны. */

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

:root {
  /* Ширина контентной колонки — как в оригинале */
  --site-width: 980px;

  /* Фирменные цвета */
  --purple: #7d5fff;
  --purple-hover: #4833a4;
  --purple-alt: #7151ff;
  --purple-soft: #6e4ff9;

  --peach: #ffa792;
  --peach-dark: #f5a18d;
  --mint: #8af3d2;
  --yellow: #ffd24b;
  --yellow-hover: #ce9001;

  /* Текст */
  --ink: #2d2d2d;
  --ink-deep: #281a39;
  --grey-1: #545454;
  --grey-2: #646464;
  --grey-3: #747474;

  /* Подложки */
  --white: #ffffff;
  --bg-soft: #f6f6f6;

  /* Градиенты бейджей */
  --grad-popular: linear-gradient(90deg, #60a5fa 0%, #7d5fff 56.19%);
  --grad-thrifty: linear-gradient(90deg, #45bf7b 0%, #2061b7 100%);
  --grad-thrifty-hover: linear-gradient(90deg, #4dba7d 0%, #569fff 100%);

  /* Тени */
  --shadow-card: 0 0 20px 4px rgba(0, 0, 0, 0.15);
  --shadow-card-strong: 0 0 20px 4px rgba(0, 0, 0, 0.6);

  /* Шрифтовые стеки.
     Внимание: Sora и Poppins не содержат кириллицы, поэтому русский
     текст всегда рисуется запасным шрифтом. Стеки повторяют оригинал
     буква в букву — иначе браузер подставит другой запасной шрифт,
     и текст будет иной ширины и жирности, чем на прежнем сайте. */
  --font-main: "Sora", sans-serif;
  --font-alt: "Montserrat", sans-serif;
  --font-pill: "Poppins", sans-serif;
  --font-wordmark: "Arsenal SC", "Arsenal", Georgia, serif;

  /* Высота липкой шапки — используется для отступа якорей */
  --header-height: 82px;
}

/* ---------- Сброс ---------- */

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

html {
  scroll-behavior: smooth;
  /* якоря не уезжают под липкую шапку */
  scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

/* Атрибут hidden должен побеждать наши display: block/flex/grid,
   иначе скрытые элементы (ошибки формы, ответы FAQ) видны сразу. */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p, figure {
  margin: 0;
}

/* Длинные русские слова («конфиденциальности», «Индивидуальные»)
   не помещались в строку на узких экранах и вылезали за край. */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

/* ---------- Служебное для доступности ---------- */

/* Текст только для программ чтения с экрана: уточняет,
   о каком именно курсе или преподавателе ссылка «Подробнее». */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Ссылка в начале страницы: позволяет с клавиатуры перескочить
   меню и сразу попасть в содержимое. Видна только при фокусе. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--purple);
  color: var(--white);
  font-weight: 700;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.section {
  position: relative;
}

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: all 0.2s ease, visibility 0s;
  white-space: nowrap;
}

/* Основная — сплошная фиолетовая */
.btn--solid {
  background: var(--purple);
  color: var(--white);
  border-radius: 15px;
}

.btn--solid:hover {
  background: var(--purple-hover);
  border-radius: 10px;
}

/* Вторичная — контурная фиолетовая, при наведении чернеет */
.btn--outline {
  background: rgba(36, 35, 35, 0);
  color: var(--purple);
  border: 1px solid var(--purple);
  border-radius: 15px;
}

.btn--outline:hover {
  background: #000000;
  color: var(--white);
  border-color: #000000;
  border-radius: 10px;
}

/* ---------- Шапка ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 9px 0 10px;
  background: transparent;
  transition: transform 0.3s ease;
}

/* Плавно прячется при скролле вниз, выезжает обратно при скролле вверх */
.header.is-hidden {
  transform: translateY(-115%);
}

.header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  width: min(1237px, calc(100vw - 40px));
  margin-inline: auto;
  padding: 8px 33px;
  background: var(--white);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}

/* Логотип + словесный знак */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand__mark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.brand__word {
  position: relative;
  font-family: var(--font-wordmark);
  font-size: 23px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

.brand__accent {
  color: var(--purple);
}

/* Навигация */
/* Разделы посередине, «Вход» и «Записаться» — справа, как в оригинале */
.nav {
  display: contents;
}

.nav__main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.nav__side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.nav__link {
  padding: 8px 12px;
  border-radius: 7px;
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  background: transparent;
  transition: all 0.2s ease;
}

.nav__link:hover {
  font-size: 15px;
  font-weight: 300;
  color: var(--purple);
}

/* «Вход» — жирная, чернеет при наведении */
.nav__link--login {
  font-weight: 700;
}

.nav__link--login:hover {
  background: #000000;
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
}

/* «Записаться» — фиолетовая кнопка */
.nav__cta {
  padding: 10px 20px;
  border-radius: 10px;
  background: var(--purple);
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.nav__cta:hover {
  background: var(--purple-hover);
  border-radius: 8px;
}

/* Бургер — только на узких экранах */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
}

.nav-toggle__bars::before { transform: translateY(-7px); }
.nav-toggle__bars::after  { transform: translateY(7px); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: rotate(-45deg);
}

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

.hero {
  padding: 74px 0 67px;
  overflow: hidden;
}

.hero__inner {
  position: relative;
  /* Ровно 980px содержимого: декоративные фигуры позиционируются
     от его краёв теми же числами, что в оригинале. */
  max-width: var(--site-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__title {
  width: min(943px, 100%);
  font-size: 57px;
  /* В оригинале буквы сжаты: без этого строка шире и ломается
     в другом месте. */
  letter-spacing: -0.04em;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 37px;
}

.hero__title .accent {
  color: var(--purple);
}

.hero__text {
  width: min(729px, 100%);
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  font-weight: 400;
  margin-bottom: 34px;
}

.hero__actions {
  display: flex;
  gap: 19px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero__actions .btn {
  height: 53px;
}

.hero__actions .btn--solid  { width: 164px; }
.hero__actions .btn--outline { width: 139px; }

/* Декоративные фигуры с фотографиями.
   Каждая — цветная SVG-форма, поверх неё фото, обрезанное той же формой. */
.deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.deco__shape {
  display: block;
  width: 100%;
  height: 100%;
}

.deco__photo {
  position: absolute;
  object-fit: cover;
}

/* 1 — фиолетовый скруглённый квадрат, слева вверху */
.deco--square {
  top: 6px;
  left: -117px;
  width: 68px;
  height: 68px;
  transform: rotate(80deg);
}

.deco--square .deco__shape { fill: var(--purple); }

.deco--square .deco__photo {
  /* парень чуть уменьшен и опущен в кадре, чтобы голова не упиралась
     в скруглённый угол, а ноги не торчали снизу (рамка повёрнута на 80°) */
  top: 12px;
  left: 17px;
  width: 41px;
  height: 60px;
  transform: rotate(-90deg);
}

/* На первом экране парень стоял слева в квадрате — сдвигаем правее, к центру.
   Рамка повёрнута на 80°, поэтому «вправо» задаём через translateX
   уже повёрнутого на -90° фото. */
.hero .deco--square .deco__photo {
  transform: rotate(-90deg) translateX(8px);
}

/* 2 — персиковая арка, справа вверху */
.deco--arch {
  top: -2px;
  left: 1015px;
  width: 63px;
  height: 74px;
  transform: rotate(340deg);
}

.deco--arch .deco__shape { fill: var(--peach); }

.deco--arch .deco__photo {
  top: 6px;
  left: 4px;
  width: 56px;
  height: 68px;
  /* фото обрезано прямоугольником — как маска в оригинале */
  border-radius: 0;
}

/* 3 — персиковый восьмиугольник, слева внизу */
.deco--octagon {
  top: 250px;
  left: -36px;
  width: 100px;
  height: 99px;
}

.deco--octagon .deco__shape { fill: var(--peach); }

.deco--octagon .deco__photo {
  top: 0;
  left: 3px;
  width: 94px;
  height: 99px;
  /* маска-восьмиугольник из оригинала */
  -webkit-mask-image: var(--mask-octagon);
  mask-image: var(--mask-octagon);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* 4 — мятное облако, справа внизу */
.deco--cloud {
  top: 239px;
  left: 887px;
  width: 81px;
  height: 110px;
}

.deco--cloud .deco__shape { fill: var(--mint); }

.deco--cloud .deco__photo {
  top: 0;
  left: 0;
  width: 81px;
  height: 110px;
  -webkit-mask-image: var(--mask-cloud);
  mask-image: var(--mask-cloud);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Плашка за второй строкой заголовка. Внутри прозрачная —
   на белом фоне её очерчивает мягкая тень, как в оригинале. */
.hero__plate {
  position: absolute;
  top: 78px;
  left: 368px;
  width: 428px;
  height: 62px;
  border-radius: 15px;
  box-shadow: var(--shadow-card);
  pointer-events: none;
}

/* SVG-маски из оригинала */
:root {
  --mask-octagon: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='20 20 160 160' height='200' width='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M43.463 156.537L20 100l23.463-56.537L100 20l56.537 23.463L180 100l-23.463 56.537L100 180l-56.537-23.463z'/%3E%3C/svg%3E");
  --mask-cloud: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='39.5 19.999 121 160.001' height='200' width='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M160.5 99.571c0-9.576-4.27-18.152-11.009-23.957 6.739-5.805 11.009-14.381 11.009-23.957 0-17.484-14.216-31.658-31.752-31.658-12.713 0-23.676 7.453-28.748 18.212-5.071-10.76-16.034-18.212-28.748-18.212-17.536 0-31.752 14.173-31.752 31.658 0 9.576 4.27 18.152 11.009 23.957C43.77 81.419 39.5 89.995 39.5 99.571c0 9.811 4.478 18.579 11.505 24.386-7.028 5.807-11.505 14.574-11.505 24.386C39.5 165.827 53.716 180 71.252 180c12.713 0 23.677-7.452 28.748-18.212 5.071 10.76 16.034 18.212 28.748 18.212 17.536 0 31.752-14.174 31.752-31.657 0-9.811-4.478-18.579-11.505-24.386 7.028-5.807 11.505-14.574 11.505-24.386'/%3E%3C/svg%3E");
}

/* ---------- Широкая колонка (секции шире 980px) ---------- */

.wide {
  width: 100%;
  /* 1218px содержимого, как в оригинале, плюс боковые поля */
  max-width: 1258px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* ---------- Языки и цитата ---------- */

.languages .wide {
  display: grid;
  grid-template-columns: 593fr 295fr 287fr;
  gap: 22px;
  align-items: start;
  padding-block: 6px 44px;
}

.languages__photo {
  margin: 0;
}

.languages__photo img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 15px;
}

.languages__cards {
  display: grid;
  /* тянем колонку до высоты фотографий слева и справа, а мятную
     карточку с цитатой — на весь остаток, чтобы её низ был вровень */
  align-self: stretch;
  grid-template-rows: auto 1fr;
  gap: 26px;
}

.languages__cards .card-mint {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Персиковая карточка с флагами */
.card-peach {
  background: var(--peach);
  border-radius: 15px;
  padding: 22px 25px 19px;
}

/* В оригинале круги налезают друг на друга примерно на 12px */
.flags {
  display: flex;
  gap: 0;
  margin-bottom: 14px;
}

.flags__item + .flags__item {
  margin-left: -12px;
}

.flags__item {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.flags__item img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.card-peach__text {
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
}

/* Мятная карточка с цитатой */
.card-mint {
  margin: 0;
  background: var(--mint);
  border-radius: 15px;
  padding: 18px 25px 19px;
}

.card-mint__quote {
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
}

.card-mint__author {
  margin-top: 10px;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}

/* ---------- Почему выбирают ---------- */

.why__grid {
  display: grid;
  grid-template-columns: 436fr 373fr 373fr;
  gap: 19px;
  padding-block: 36px 63px;
}

.why__title {
  font-size: 50px;
  letter-spacing: -0.0456em;
  line-height: 68.4px;
  font-weight: 700;
  margin-bottom: 16px;
}

.why__title .accent {
  color: var(--purple);
}

/* Фиолетовая карточка со статистикой.
   В оригинале цифры стоят лесенкой, а не сеткой 2x2:
   500+ слева сверху, 95% правее и ниже, 3 снова слева,
   24/7 правее в самом низу. Карточка 436x352. */
.stats {
  position: relative;
  flex: 1;
  min-height: 352px;
  background: var(--purple);
  border-radius: 30px;
  color: var(--white);
  text-align: center;
}

.stats__item {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stats__item:nth-child(1) { top: 53px;  left: 70px;  width: 118px; }
.stats__item:nth-child(2) { top: 91px;  left: 218px; width: 163px; }
.stats__item:nth-child(3) { top: 164px; left: 34px;  width: 177px; }
.stats__item:nth-child(4) { top: 236px; left: 211px; width: 177px; }

.stats__value {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: normal;
}

.stats__label {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
}

/* Карточки преимуществ — две колонки по две карточки */
.why__cards {
  display: contents;
}

.why__cards > .feature:nth-child(1) { grid-column: 2; grid-row: 1; }
.why__cards > .feature:nth-child(2) { grid-column: 2; grid-row: 2; }
.why__cards > .feature:nth-child(3) { grid-column: 3; grid-row: 1; }
.why__cards > .feature:nth-child(4) { grid-column: 3; grid-row: 2; }

.why__intro {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
}

.feature {
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 25px 33px 31px;
  transition: transform 0.4s ease;
  transform-origin: 50% 100%;
}

.feature:hover {
  transform: scale(1.02);
  z-index: 1;
}

/* Иконка: фиолетовая плитка + белый глиф поверх */
.feature__icon {
  position: relative;
  display: block;
  width: 49px;
  height: 49px;
  margin-bottom: 16px;
}

.feature__tile {
  width: 49px;
  height: 49px;
  fill: var(--purple);
  transition: transform 0.4s ease-in-out;
  transform-origin: 50% 50%;
}

.feature:hover .feature__tile {
  transform: scale(1.1);
}

.feature__glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill: var(--white);
  pointer-events: none;
}

.feature__title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 14px;
  transition: color 0.4s ease-in-out;
}

.feature:hover .feature__title {
  color: var(--purple-soft);
}

.feature__text {
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
}

/* ---------- Адаптив секций 2–3 ---------- */

@media (max-width: 1000px) {
  .languages .wide {
    grid-template-columns: 1fr 1fr;
  }

  .languages__photo--main {
    grid-column: 1 / -1;
  }

  .why__grid {
    grid-template-columns: 1fr 1fr;
  }

  .why__intro {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .why__cards > .feature:nth-child(1) { grid-column: 1; grid-row: auto; }
  .why__cards > .feature:nth-child(2) { grid-column: 2; grid-row: auto; }
  .why__cards > .feature:nth-child(3) { grid-column: 1; grid-row: auto; }
  .why__cards > .feature:nth-child(4) { grid-column: 2; grid-row: auto; }

  .why__title {
    font-size: 40px;
    text-align: center;
  }
}

@media (max-width: 700px) {
  .languages .wide,
  .why__grid {
    grid-template-columns: 1fr;
  }

  .languages__photo--main {
    grid-column: 1;
  }

  /* та же специфичность, что у правил на 1000px, иначе они перебьют эти */
  .why__cards > .feature:nth-child(1),
  .why__cards > .feature:nth-child(2),
  .why__cards > .feature:nth-child(3),
  .why__cards > .feature:nth-child(4) {
    grid-column: 1;
  }

  .languages__photo--side img {
    height: 320px;
  }

  .why__title {
    font-size: 28px;
  }

  /* Плашку статистики показываем ПОСЛЕ карточек-преимуществ, как в оригинале.
     .why__intro распускаем, чтобы заголовок и плашка стали ячейками .why__grid. */
  .why__intro { display: contents; }
  .why__title { order: 0; }
  .why__cards > .feature { order: 1; }
  .stats { order: 2; }

  /* На узком экране абсолютная раскладка не нужна — сетка «лесенкой» */
  .stats {
    min-height: 0;
    padding: 30px 22px 34px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 14px;
    align-items: start;
  }

  .stats__item,
  .stats__item:nth-child(1),
  .stats__item:nth-child(2),
  .stats__item:nth-child(3),
  .stats__item:nth-child(4) {
    position: static;
    width: auto;
  }

  /* правый столбец опущен ниже левого — лесенка из оригинала */
  .stats__item:nth-child(2),
  .stats__item:nth-child(4) {
    margin-top: 36px;
  }

  .stats__value {
    font-size: 36px;
  }

  .stats__label {
    font-size: 15px;
  }

  .feature {
    padding: 22px 24px 26px;
  }
}

.accent {
  color: var(--purple);
}

/* ---------- Тест уровня ---------- */

.level {
  padding-block: 42px 10px;
}

.level__card {
  display: grid;
  grid-template-columns: 529fr 551fr;
  align-items: stretch;
  max-width: 1080px;
  margin-inline: auto;
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.level__body {
  padding: 27px 40px 38px 62px;
  align-self: center;
}

.level__title {
  font-size: 30px;
  line-height: 1.25;
  font-weight: 700;
  margin-bottom: 17px;
}

.level__lead {
  font-size: 16px;
  line-height: 1.5;
  color: #6b7280;
  margin-bottom: 20px;
}

.level__list {
  display: grid;
  gap: 6px;
  margin-bottom: 35px;
}

.level__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 1.8;
}

/* В оригинале это плотные кружки, а не галочки */
.ico-dot {
  flex: none;
  width: 11px;
  height: 11px;
  fill: var(--purple);
}

.level__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 349px;
  max-width: 100%;
  height: 63px;
  border-radius: 10px;
  background: var(--purple);
  color: var(--white);
  font-family: var(--font-alt);
  font-size: 18px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.level__cta:hover {
  background: var(--purple-hover);
  border-radius: 7px;
}

.level__figure {
  margin: 0;
}

.level__figure img {
  width: 100%;
  height: 100%;
  min-height: 404px;
  object-fit: cover;
}

/* ---------- Как проходит обучение ---------- */

.process {
  padding-block: 60px;
}

.process__title {
  font-size: 50px;
  line-height: 1.2;
  font-weight: 700;
  max-width: 842px;
  margin-bottom: 50px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  /* Иначе браузер рисует «1.», «2.» перед кружками */
  list-style: none;
}

.step {
  position: relative;
}

/* Соединительная линия между шагами */
/* Линия между кружками: отступ слева и справа, чуть жирнее */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 42px;
  left: 102px;
  right: -12px;
  height: 3px;
  border-radius: 2px;
  background: rgba(40, 26, 57, 0.35);
}

.step__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: var(--peach);
  color: var(--white);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

/* чётные кружки — более тёмный персиковый, как в оригинале */
.step:nth-child(even) .step__badge {
  background: var(--peach-dark);
}

.step__title {
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  font-weight: 700;
  margin-bottom: 17px;
}

.step__text {
  font-size: 16px;
  line-height: 1.5;
}

/* ---------- Форма консультации ---------- */

.consult {
  padding-block: 60px;
}

.consult__inner {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 40px;
}

/* Звёздочки — над большой картинкой справа сверху, как в оригинале */
.consult__side {
  position: relative;
  flex: none;
  align-self: flex-end;
}

.consult__deco--large {
  display: block;
  width: 328px;
}

.lead {
  position: relative;
  flex: none;
  width: 440px;
  max-width: 100%;
  padding: 26px 30px 30px;
  background: var(--purple);
  border-radius: 28px;
  color: var(--white);
  overflow: hidden;
}

/* Звёздочки — справа от заголовка, внутри фиолетовой плашки, как в оригинале */
.lead__stars {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 78px;
  height: auto;
  pointer-events: none;
}

.lead__title {
  position: relative;
  max-width: calc(100% - 76px);
  font-size: 21px;
  line-height: 1.22;
  font-weight: 700;
  margin-bottom: 6px;
}

.lead__lead {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 14px;
  opacity: 0.92;
}

.field {
  margin-bottom: 9px;
}

.field__label {
  display: block;
  cursor: pointer;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
}

.field__label i {
  font-style: normal;
  opacity: 0.8;
}

.field__phone {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
}

.field__country {
  height: 40px;
  padding-inline: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}

.field__country:focus-visible {
  outline: 3px solid var(--ink-deep);
  outline-offset: 2px;
}

.field__input {
  width: 100%;
  height: 40px;
  padding-inline: 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.2s ease;
}

.field__input::placeholder {
  color: #6b7280;
}

.field__input:focus-visible {
  outline: 3px solid var(--ink-deep);
  outline-offset: 2px;
  border-color: var(--ink-deep);
}

.field__input[aria-invalid="true"] {
  border: 2px solid #b3261e;
}

/* Тёмно-красный на белой подложке: жёлтый на фиолетовом фоне формы
   давал контраст 2.94:1 — сообщение было почти не видно. */
.field__error {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--white);
  color: #b3261e;
  font-size: 13px;
  font-weight: 600;
}

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 9px 9px;
  margin: 2px 0 14px;
}

.consent__box {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--yellow);
  cursor: pointer;
}

.consent__text {
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}

.consent__text a {
  text-decoration: underline;
}

.consent .field__error {
  grid-column: 2;
  margin-top: 0;
}

.lead__submit {
  width: 100%;
  height: 46px;
  border-radius: 14px;
  background: var(--yellow);
  color: #000000;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.lead__submit:hover {
  background: var(--yellow-hover);
}

.lead__submit[disabled] {
  opacity: 0.6;
  cursor: default;
}

.lead__status:empty {
  display: none;
}

.lead__status {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
}

/* ---------- Курсы ---------- */

.courses {
  padding-block: 60px;
  /* фигуры выходят за правый край карточки, как в оригинале;
     за край экрана они выходить не должны */
  overflow-x: clip;
}

.courses__title {
  font-size: 50px;
  line-height: 1;
  font-weight: 700;
  max-width: 900px;
  margin-bottom: 40px;
}

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-bottom: 40px;
}

.tabs__pill {
  padding: 11px 26px;
  border-radius: 50px;
  background: transparent;
  color: #000000;
  font-family: var(--font-pill);
  font-size: 16px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.tabs__pill:hover,
.tabs__pill.is-active {
  background: var(--purple);
  color: var(--white);
}

.courses__grid {
  display: flex;
  flex-wrap: wrap;
  /* Промежуток шире, чем раньше: фигура выходит за правый край карточки
     на 30-60px и не должна прятаться за соседней карточкой. */
  gap: 32px 70px;
  max-width: 1160px;
}

.course--wide   { width: 530px; }
.course--narrow { width: 336px; }

/* Устройство карточки как в оригинале: текст шириной 319px укладывается
   в три строки, фигура лежит поверх и выходит за правый край плашки. */
.course {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-soft);
  border-radius: 30px;
  overflow: visible;
  transition: all 0.3s ease;
}

/* Цвет карточки — по конкретному курсу, как в оригинале, а не по размеру:
   первая широкая карточка в каждой вкладке серая, персиковая — медики,
   зеленоватая — дети, остальные светлые. */
.course--grey  { background: #c3bfc7; }
.course--peach { background: #eae0da; }
.course--green { background: #d0e0cd; }

.course:hover {
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--shadow-card-strong);
  transform: scale(1.03);
  z-index: 1;
}

/* две широкие карточки в ряд, три узкие в ряд */
.course--wide   { grid-column: span 3; }
.course--narrow { grid-column: span 2; }

.course__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.course--wide .course__body {
  min-height: 376px;
  padding: 33px 24px 19px;
}

.course--narrow .course__body {
  min-height: 445px;
  padding: 25px 24px 24px;
}

.course__title {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
}

.course--wide .course__title  { margin-bottom: 34px; }
.course--narrow .course__title { margin-bottom: 14px; }

.course--narrow .course__title {
  font-size: 24px;
}

.course__text {
  /* Ровно 319px, как в оригинале: тогда текст встаёт в три строки */
  width: min(319px, 100%);
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 19px;
}

.course__cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 134px;
  height: 39px;
  border-radius: 50px;
  background: var(--peach-dark);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.course__cta:hover {
  background: var(--purple-alt);
  border-radius: 7px;
}

/* Фигура лежит поверх карточки и выходит за её правый край */
.course__photo {
  position: absolute;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
}

.course--wide .course__photo {
  left: 335px;
  top: 50px;
  width: 231px;
  height: 326px;
}

.course--narrow .course__photo {
  left: 199px;
  top: 181px;
  width: 200px;
  height: 264px;
}

/* Исходный кадр с девочкой шире и с большими полями по бокам, поэтому
   при object-fit: contain она выходит мелкой. Расширяем рамку, чтобы
   девочка была примерно того же размера, что и на соседних карточках.
   Рамку прибиваем к низу карточки, чтобы девочка стояла на нижней границе. */
.course--green .course__photo {
  left: 100px;
  top: auto;
  bottom: 0;
  width: 312px;
  height: 268px;
}

/* Точечная подгонка отдельных фигур на десктопе (мобильную раскладку
   с её собственными правилами ниже это не трогает). */
@media (min-width: 761px) {
  /* «Общий английский» — сдвинут правее, чтобы рукав слегка выходил за правый край */
  .course__photo[src*="course-english-general"] {
    left: 309px;
  }

  /* «Английский для медиков» — тоже сдвигаем левее, картинка широкая */
  .course__photo[src*="course-english-medical"] {
    left: 150px;
  }

  /* «Английский для детей» — сдвинут левее, чтобы палец заходил на плашку */
  .course__photo[src*="course-english-kids"] {
    left: 87px;
  }

  /* «Общий турецкий» — вся поза целиком (рука в сторону + папки), крупно,
     прижата к нижнему краю карточки и чуть правее */
  .course__photo[src*="course-turkish-general"] {
    left: 132px;
    top: 93px;
    width: 440px;
    height: 283px;
  }

  /* «Литературный арабский» — крупнее, левее и ниже, к нижнему краю карточки */
  .course__photo[src*="course-arabic"] {
    left: 198px;
    top: 45px;
    width: 320px;
    height: 331px;
  }
}

/* ---------- Стоимость ---------- */

.pricing {
  padding-block: 60px;
}

/* Ряд тарифов в оригинале шире обычной колонки: четыре карточки
   293 + 303 + 293 + 303 плюс промежутки по 24px. */
.pricing .wide {
  max-width: 1304px;
}


.pricing__title {
  font-size: 50px;
  line-height: 1;
  font-weight: 700;
  text-align: center;
}

.pricing__lead {
  margin: 10px 0 44px;
  font-size: 20px;
  line-height: 1.4;
  color: var(--grey-1);
  text-align: center;
}

.plan-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
  font-size: 30px;
  font-weight: 700;
  color: var(--purple);
}

.plan-group__icon {
  width: 27px;
  height: 22px;
  fill: var(--purple);
}

/* В оригинале выделенные тарифы шире обычных: 303px против 293px.
   Позиции выделенных различаются: у индивидуальных это 2-й и 4-й,
   у мини-групп — 3-й. */
.plans.plans--individual {
  grid-template-columns: 293fr 303fr 293fr 303fr;
}

.plans.plans--groups {
  grid-template-columns: 293fr 293fr 303fr 293fr;
}

.plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
  /* бейдж «Популярный» выступает за верхний край карточки */
  padding-top: 16px;
  margin-bottom: 56px;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px 28px;
  background: var(--white);
  border: 4px solid transparent;
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.plan:hover {
  box-shadow: var(--shadow-card-strong);
}

/* выделенные тарифы — фиолетовая рамка */
.plan--popular {
  border-color: var(--purple);
}

.plan--popular:hover {
  border-color: var(--purple-alt);
}

.plan__badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 137px;
  height: 32px;
  padding-inline: 16px;
  border-radius: 30px;
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.plan__badge--popular { background-image: var(--grad-popular); }
.plan__badge--thrifty { background-image: var(--grad-thrifty); }

.plan__count {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
}

.plan__price {
  font-family: var(--font-alt);
  font-size: 30px;
  font-weight: 700;
  color: var(--purple);
  line-height: 1.1;
}

.plan__per {
  margin-top: 4px;
  font-size: 14px;
  color: var(--grey-2);
}

.plan__features {
  display: grid;
  gap: 2px;
  margin: 20px 0 24px;
}

.plan__features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 1.8;
}

/* Галочка из оригинала: левая часть персиковая, длинная — фиолетовая. */
.tick {
  flex: none;
  width: 20px;
  height: 16px;
  overflow: visible;
}

.tick__dot { fill: #281a39; }
.tick__short { fill: var(--peach-dark); }
.tick__long { fill: var(--purple-alt); }

.plan__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 39px;
  margin-top: auto;
  border-radius: 10px;
  background: var(--purple);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.plan__cta:hover {
  background: var(--purple-hover);
  border-radius: 7px;
}

.plan--popular .plan__cta { background-image: var(--grad-popular); }

/* ---------- Отзывы ---------- */

.reviews {
  padding-block: 60px;
}

/* Лента отзывов в оригинале — 1261px, шире обычной колонки. */
.reviews .wide {
  max-width: 1301px;
}

.reviews__title {
  font-size: 50px;
  letter-spacing: -0.04em;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  margin-bottom: 44px;
}

/* Карусель отзывов. В оригинале лента 1261px, карточка 338px,
   промежуток между карточками 12px, стрелки шириной 20px
   в 39px от краёв, точки 6px (активная 9px). */
.slider {
  position: relative;
}

.slider__viewport {
  overflow: hidden;
}

.slider__track {
  display: flex;
  transition: transform 0.5s ease;
}

.slider__slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 338px));
  justify-content: center;
  align-items: stretch;
  gap: 12px;
}

.slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  width: 20px;
  height: 41px;
  margin-top: -20px;
  padding: 0;
  fill: var(--peach);
  transition: opacity 0.2s ease;
}

.slider__arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

.slider__arrow:hover {
  opacity: 0.6;
}

.slider__arrow--prev { left: 39px; }
.slider__arrow--next { right: 39px; transform: scaleX(-1); }

/* Стрелки и точки нужны, только когда листов больше одного —
   их показывает скрипт, добавляя классу .slider модификатор. */
.slider.is-multi .slider__arrow { display: block; }
.slider.is-multi .slider__dots { display: flex; }

.review {
  padding: 34px 30px 30px;
  background: var(--bg-soft);
  border-radius: 30px;
}

.review__quote {
  width: 53px;
  height: 44px;
  margin-bottom: 18px;
  fill: var(--peach);
  transform: rotate(180deg);
}

.review__text {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

.review__author {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  font-weight: 700;
}

/* ---------- Отзывы: цитата + миниатюра скриншота ---------- */
/* В карточке — короткая фраза из отзыва и маленькое превью переписки.
   Клик по превью открывает оригинал целиком в оверлее .lightbox. */
.review--quote {
  display: flex;
  flex-direction: column;
}

.review--quote .review__text {
  flex: 1;               /* подвал прижимается вниз — у всех карточек в ряд он на одной линии */
}

.review__by {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}

.review__thumb {
  position: relative;
  flex: 0 0 auto;
  width: 58px;
  height: 74px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  cursor: zoom-in;
  box-shadow: 0 6px 16px rgba(40, 26, 57, 0.16);
  transition: transform 0.2s ease;
}

.review__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* значок лупы — подсказка, что превью можно открыть */
.review__thumb::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(40, 26, 57, 0.72)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

.review__thumb:hover,
.review__thumb:focus-visible {
  transform: scale(1.05);
  outline: none;
}

.review__meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.review--quote .review__author {
  margin-top: 0;
}

.review__lang {
  font-size: 12.5px;
  color: var(--grey-2);
  letter-spacing: 0.03em;
}

/* Оверлей просмотра скриншота крупнее */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(40, 26, 57, 0.82);
  backdrop-filter: blur(2px);
}

.lightbox__img {
  position: relative;
  max-width: min(440px, 92vw);
  max-height: 92vh;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  animation: lightbox-in 0.2s ease;
}

@keyframes lightbox-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.28);
}

.lightbox__close {
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 20px;
}

.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }

@media (prefers-reduced-motion: reduce) {
  .review__thumb { transition: none; }
  .lightbox__img { animation: none; }
}

.slider__dots {
  display: none;
  justify-content: center;
  gap: 3px;
  margin-top: 24px;
}

/* Кружок остаётся как в оригинале — 6px, активный 9px, — но нажимать
   можно по области 24x24: пальцем в 6 пикселей не попасть. */
.slider__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: none;
}

.slider__dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(40, 26, 57, 0.55);
  transition: all 0.3s ease;
}

.slider__dot.is-active::before {
  width: 9px;
  height: 9px;
  background: var(--purple);
}

/* ---------- Вопросы и ответы ---------- */

.faq {
  padding-block: 60px;
}

.faq__title {
  font-size: 50px;
  letter-spacing: -0.04em;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
}

.faq__list {
  max-width: 961px;
  margin-inline: auto;
  display: grid;
  gap: 14px;
}

.faq__item {
  background: var(--white);
  border-radius: 20px;
  /* тень вдвое слабее общей карточной — как в оригинале */
  box-shadow: 0 0 16px 2px rgba(0, 0, 0, 0.075);
  overflow: hidden;
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 28px;
  text-align: left;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  transition: color 0.2s ease;
}

.faq__q:hover {
  color: var(--purple);
}

.faq__chevron {
  flex: none;
  width: 24px;
  height: 24px;
  fill: var(--purple);
  transition: transform 0.3s ease;
}

.faq__q[aria-expanded="true"] .faq__chevron {
  transform: rotate(180deg);
}

.faq__a {
  padding: 0 28px 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--grey-1);
}

/* ---------- Финальный призыв ---------- */

.final {
  padding-block: 60px 80px;
  /* декоративные фигуры не должны раздвигать страницу по горизонтали */
  overflow-x: clip;
}

/* Фиолетовая карточка в оригинале 1234px — чуть шире обычной колонки. */
.final .wide {
  max-width: 1274px;
}

.final__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Раскладка по оригиналу: заголовок на 80px от верха,
     кнопка через 55px под ним, карточка 1234x377 */
  gap: 55px;
  min-height: 377px;
  padding: 80px 40px 69px;
  background: var(--purple);
  border-radius: 20px;
  overflow: hidden;
}

.final__title {
  /* Ровно 610px, как в оригинале. Автобалансировку строк не включаем:
     она сужает блок и заголовок встаёт не туда. */
  width: min(610px, 100%);
  font-size: 50px;
  letter-spacing: -0.04em;
  line-height: 1.2;
  font-weight: 700;
  color: var(--white);
  text-align: center;
}

.final__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 139px;
  height: 53px;
  border-radius: 15px;
  background: var(--white);
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
}

.final__cta:hover {
  background: #242323;
  color: var(--white);
  border-radius: 10px;
}

/* Положения декора внутри карточки — числа из оригинала */
.final__card .deco--square  { top: 48px;  left: 148px;  right: auto; bottom: auto; }

/* на сиреневом фоне фиолетовый квадрат не виден,
   поэтому в оригинале он здесь мятный */
.final__card .deco--square .deco__shape { fill: var(--mint); }

/* «Сделай первый шаг» — парня в мятном квадрате центрируем по горизонтали
   и опускаем ниже, чтобы ноги доходили до нижнего края рамки */
.final__card .deco--square .deco__photo {
  transform: rotate(-90deg) translateX(8px) translateY(1px);
}

.final__card .deco--arch    { top: 48px;  left: 1034px; right: auto; bottom: auto; }
.final__card .deco--octagon { top: 239px; left: 235px;  right: auto; bottom: auto; }
.final__card .deco--cloud   { top: 234px; left: 919px;  right: auto; bottom: auto; }

/* ---------- Футер ---------- */

.footer {
  padding-block: 50px 60px;
  background: var(--white);
  border-top: 1px solid rgba(40, 26, 57, 0.08);
}

.footer__inner {
  display: grid;
  grid-template-columns: 327fr 653fr;
  gap: 40px;
}

.footer .brand {
  margin-bottom: 18px;
}

.footer .brand__mark {
  width: 34px;
  height: 34px;
}

.footer__text {
  max-width: 327px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--grey-3);
}

.socials {
  display: flex;
  gap: 13px;
  margin: 20px 0 16px;
}

.socials a {
  display: block;
  transition: opacity 0.2s ease;
}

.socials a:hover {
  opacity: 0.65;
}

.socials svg {
  width: 20px;
  height: 20px;
  fill: var(--grey-3);
  display: block;
  transition: fill 0.2s ease;
}

.socials a:hover svg {
  fill: var(--purple);
}

.footer__mail {
  font-size: 15px;
  color: var(--grey-3);
  transition: color 0.2s ease;
}

.footer__mail:hover {
  color: var(--purple);
}

.footer__links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.foot-group__title {
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.foot-group__list {
  display: grid;
  gap: 9px;
}

.foot-group__list a {
  font-size: 15px;
  line-height: 1.4;
  color: var(--grey-3);
  transition: color 0.2s ease;
}

.foot-group__list a:hover {
  color: var(--purple);
}

/* ---------- Анимации появления (как в Wix) ---------- */

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

@keyframes ezl-expand-in {
  from { transform: scale(var(--motion-scale, 0.8)); }
  to   { transform: scale(1); }
}

@keyframes ezl-grow-in {
  from {
    opacity: 0;
    transform: translateY(var(--motion-translate-y, 120px)) scale(var(--motion-scale, 0.8));
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ezl-float-in {
  from {
    opacity: 0;
    transform: translateY(var(--motion-translate-y, 60px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* До попадания в зону видимости элемент скрыт — но только если скрипт
     работает и сможет его показать. Класс js ставится в <head> первой же
     строкой. Без скрипта класса нет, и весь текст виден сразу. */
  .js [data-motion]:not([data-motion-enter="done"]) {
    opacity: 0;
  }

  [data-motion="grow"][data-motion-enter="done"] {
    animation: ezl-fade-in 960ms cubic-bezier(0.645, 0.045, 0.355, 1) backwards,
               ezl-grow-in 1200ms cubic-bezier(0.645, 0.045, 0.355, 1) backwards;
  }

  [data-motion="float"][data-motion-enter="done"] {
    animation: ezl-float-in 1200ms cubic-bezier(0.645, 0.045, 0.355, 1) backwards;
  }

  [data-motion="expand"][data-motion-enter="done"] {
    animation: ezl-fade-in 1200ms linear backwards,
               ezl-expand-in 1200ms cubic-bezier(0.645, 0.045, 0.355, 1) backwards;
  }

  /* Фигуры уже повёрнуты — анимируем только прозрачность,
     иначе анимация масштаба сбросит поворот */
  .deco[data-motion="expand"][data-motion-enter="done"] {
    animation: ezl-fade-in 1200ms linear backwards;
  }
}

/* Элемент, попавший в зону видимости, остаётся видимым */
[data-motion][data-motion-enter="done"] {
  opacity: 1;
}

/* Если анимации отключены системно — показываем всё сразу */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-motion] {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* ---------- Кнопка «наверх» ---------- */

.to-top {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 55;
  width: 40px;
  height: 30px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* маленькая, еле заметная стрелка — как в оригинале, без кружка */
.to-top.is-visible {
  opacity: 0.35;
  visibility: visible;
}

.to-top:hover {
  opacity: 0.7;
}

.to-top svg {
  display: block;
  width: 22px;
  height: 22px;
}

/* ---------- Плавающее меню контактов (только на мобильных) ---------- */
.fab {
  display: none;
}

/* ---------- Адаптив ---------- */

@media (max-width: 1100px) {
  .header__bar {
    padding-inline: 20px;
  }

  .nav {
    gap: 0;
  }

  .nav__link {
    padding-inline: 8px;
    font-size: 15px;
  }
}

@media (max-width: 1020px) {
  .hero__inner {
    padding-inline: 20px;
  }
}

@media (max-width: 900px) {
  :root {
    --header-height: 70px;
  }

  .nav-toggle {
    display: flex;
  }

  .nav {
    display: block;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 12px;
    background: var(--white);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
  }

  .nav__main,
  .nav__side {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .nav[hidden] {
    display: none;
  }

  .nav__link,
  .nav__cta {
    text-align: center;
    font-size: 16px;
  }

  .header__bar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
  }

  /* декор прячем — на узком экране он выходит за края */
  .deco {
    display: none;
  }

  .hero__plate {
    display: none;
  }

  .hero {
    padding: 48px 0;
  }

  .hero__title {
    font-size: 38px;
  }

  .hero__text {
    font-size: 16px;
  }
}

@media (max-width: 520px) {
  .hero__title {
    font-size: 32px;
  }

  .hero__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn--solid,
  .hero__actions .btn--outline {
    width: 100%;
  }

  .brand__word {
    font-size: 18px;
  }
}

/* ---------- Адаптив секций 3–8 ---------- */

@media (max-width: 1000px) {
  .level__card {
    grid-template-columns: 1fr;
  }

  .level__body {
    padding: 32px 28px;
    order: 2;
  }

  .level__figure img {
    min-height: 260px;
    max-height: 320px;
  }

  .process__title,
  .courses__title,
  .pricing__title,
  .reviews__title,
  .faq__title,
  .final__title {
    font-size: 36px;
  }

  .steps {
    grid-template-columns: 1fr 1fr;
  }

  /* линия между шагами имеет смысл только в один ряд */
  .step::after {
    display: none;
  }

  .consult__inner {
    gap: 20px;
  }

  .consult__deco--large { width: 220px; }

  .courses__grid {
    gap: 24px 20px;
  }

  .course--wide,
  .course--narrow {
    width: calc(50% - 10px);
  }

  .plans,
  .plans.plans--individual,
  .plans.plans--groups {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .process__title,
  .courses__title,
  .pricing__title,
  .reviews__title,
  .faq__title,
  .final__title {
    font-size: 30px;
  }

  .level__title {
    font-size: 24px;
  }

  .level__cta {
    width: 100%;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .consult__deco {
    display: none;
  }

  .lead {
    width: 100%;
    padding: 26px 22px 30px;
  }

  .courses__grid {
    gap: 24px;
  }

  .course--wide,
  .course--narrow {
    width: 100%;
  }

  .course__body {
    padding: 26px 24px 20px;
  }

  /* (раскладка .course__photo и .plans задаётся ниже, в блоке «Мобильная версия») */

  /* На узком экране лист = три компактных отзыва в столбик — все помещаются на экран. */
  .slider__slide {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-inline: 16px;          /* плашки поуже */
  }
  .reviews__title { margin-bottom: 16px; }
  .review { padding: 18px 20px; border-radius: 20px; }
  .review__quote { width: 32px; height: 26px; margin-bottom: 8px; }
  .review__text { font-size: 13px; line-height: 1.45; letter-spacing: 0.02em; }
  .review__author { margin-top: 10px; font-size: 13px; line-height: 1.4; }
  .review--quote .review__author { margin-top: 0; }
  .review__by { margin-top: 16px; gap: 12px; }
  .review__thumb { width: 50px; height: 64px; }
  .review__lang { font-size: 12px; }

  .lightbox { padding: 14px; }
  .lightbox__close { top: 10px; right: 10px; width: 40px; height: 40px; }
  .lightbox__nav { width: 40px; height: 40px; }

  .slider__arrow {
    display: none;
  }

  .slider.is-multi .slider__arrow {
    display: none;
  }

  .slider__dots,
  .slider.is-multi .slider__dots {
    display: flex;
  }

  .footer__links {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .faq__q {
    padding: 18px 20px;
    font-size: 16px;
  }

  .faq__a {
    padding: 0 20px 20px;
  }

  .final__card {
    padding: 48px 24px;
  }
}


/* ============================================================
   Мобильная версия — приведено к виду оригинала
   ============================================================ */
@media (max-width: 760px) {

  /* --- Шапка: без бургера, «Вход» + «Записаться» в один ряд --- */
  .nav-toggle { display: none; }
  .header__bar {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
  }
  .nav {
    position: static;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }
  /* побеждаем глобальный [hidden]{display:none!important}, который ставит JS */
  .nav,
  .nav[hidden] { display: contents !important; }
  .nav__main { display: none; }
  .nav__side {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }
  .brand { gap: 8px; }
  .brand__word { font-size: 18px; }

  /* --- Порядок секций на мобилке: «Узнай свой уровень» — перед «Почему выбирают» --- */
  #top { display: flex; flex-direction: column; }
  .section.hero      { order: 1; }
  .section.languages { order: 2; }
  .section.level     { order: 3; }
  .section.why       { order: 4; }
  .section.process   { order: 5; }
  .section.consult   { order: 6; }
  .section.courses   { order: 7; }
  .section.pricing   { order: 8; }
  .section.reviews   { order: 9; }
  .section.faq       { order: 10; }
  .section.final     { order: 11; }

  /* --- Первый экран: декоративные фигуры в углах --- */
  .hero { padding: 28px 0 18px; }
  .hero__inner { padding-inline: 14px; }
  /* уже — чтобы фигуры по бокам помещались на экране целиком */
  .hero__title { margin-bottom: 20px; max-width: 270px; margin-inline: auto; }

  /* подсветка-плашка под «онлайн-школы» — на мобилке .hero__plate скрыт */
  .hero__title .accent {
    display: inline-block;
    background: #efecff;
    border-radius: 12px;
    padding: 2px 14px;
    box-shadow: var(--shadow-card);
    line-height: 1.15;
  }

  .deco { display: block; }            /* было спрятано */

  /* верхние фигуры крупнее и подняты на уровень середины заголовка; нижние — у краёв */
  .hero .deco--square  { top: 44px;  left: 6px;    right: auto; bottom: auto; transform: rotate(80deg) scale(0.86); }
  .hero .deco--arch    { top: 39px;  right: 8px;   left: auto;  bottom: auto; transform: rotate(340deg) scale(0.86); }
  .hero .deco--octagon { top: auto;  bottom: 54px; left: 0;     right: auto;  transform: scale(0.72); }
  .hero .deco--cloud   { top: auto;  bottom: 44px; right: 0;    left: auto;   transform: scale(0.74); }

  /* кнопки друг под другом, ниже; «Пробный урок» уже, «Вход» ещё уже */
  .hero__actions { flex-direction: column; align-items: center; gap: 10px; width: 100%; }
  .hero__actions .btn { height: 44px; }
  .hero__actions .btn--solid  { width: min(206px, 58%); }
  .hero__actions .btn--outline { width: min(164px, 46%); }

  /* --- Языки и цитата: сетка 2×2, как в оригинале --- */
  /* правая колонка (флаги) уже → левое фото шире */
  .languages .wide {
    grid-template-columns: 2fr 0.8fr;
    gap: 12px;
    align-items: stretch;
    padding-block: 18px;
  }
  /* карточки-обёртку распускаем, чтобы персик и цитата стали ячейками сетки */
  .languages__cards       { display: contents; }
  .languages .wide        { align-items: start; }
  /* порядок ячеек = порядок в DOM: [фото | флаги] / [цитата | фото девочки] */
  .languages .wide        { grid-auto-flow: row; }
  .languages__photo--main { grid-column: 1; }
  .card-peach             { grid-column: 2; }
  /* плашка цитаты — той же высоты, что фото девочки справа,
     но уже: правый край не заходит под фото (низ остаётся вровень) */
  .card-mint {
    grid-column: 1;
    align-self: stretch;
    min-height: 240px;
    margin-right: 66px;
    position: relative;
    z-index: 2;
  }
  /* фото девочки — под флагами, на уровне плашки «Владение языком»; крупное, с заходом влево */
  .languages__photo--side {
    grid-column: 2;
    align-self: stretch;
    min-height: 240px;
    width: calc(100% + 70px);
    margin-left: -70px;
  }
  .languages__photo--main img { height: 200px; min-height: 0; }
  .languages__photo--side img { height: 100%; min-height: 240px; object-fit: cover; }
  /* персиковая плашка — только флаги, по центру, без текста */
  .card-peach {
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .card-peach__text { display: none; }
  /* флаги — столбиком, как было; крупнее */
  .flags { flex-direction: column; margin-bottom: 0; }
  .flags__item { width: 66px; height: 66px; }
  .flags__item img { width: 54px; height: 54px; }
  .flags__item + .flags__item { margin-left: 0; margin-top: -12px; }
  .card-mint  { padding: 16px; border-radius: 14px; }
  .card-mint__quote { font-size: 12px; line-height: 1.35; }
  .card-mint__author { font-size: 12px; margin-top: 6px; }
  /* на узкой карточке принудительный перенос строки только мешает */
  .card-mint__quote br { display: none; }

  /* заголовок «Почему выбирают» — по левому краю, без десктопного интерлиньяжа */
  .why__title { line-height: 1.15; text-align: left; }
  .why__grid { gap: 22px; padding-block: 18px; }
  .feature__title { font-size: 20px; }

  /* единый вертикальный ритм: между всеми секциями ~36px (18 + 18) */
  .level    { padding-block: 18px; }
  .process  { padding-block: 18px; }
  .consult  { padding-block: 18px; }
  .courses  { padding-block: 18px; }
  .pricing  { padding-block: 18px; }
  .reviews  { padding-block: 18px; }
  .faq      { padding-block: 18px; }
  .final    { padding-block: 18px; }

  /* --- «Как проходит обучение»: номер слева, линия по вертикали --- */
  .process__title { margin-bottom: 30px; }
  .steps { gap: 28px; }
  .step {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    row-gap: 6px;
  }
  .step__badge {
    grid-column: 1; grid-row: 1;
    width: 46px; height: 46px;
    margin-bottom: 0;
    font-size: 20px;
  }
  .step__title {
    grid-column: 2; grid-row: 1;
    align-self: center;
    margin-bottom: 0;
    font-size: 17px;
  }
  .step__text { grid-column: 2; grid-row: 2; font-size: 15px; }
  /* между кружками: линия с отступами — кружок, зазор, линия, зазор, кружок */
  .step:not(:last-child)::after {
    display: block;
    content: "";
    top: 58px;
    bottom: -16px;
    left: 22px;
    right: auto;
    width: 2px;
    height: auto;
    border: 0;
    border-radius: 1px;
    background: rgba(40, 26, 57, 0.35);
    transform: none;
  }

  /* --- Тест уровня: заголовок слева, иллюстрация вплотную к верхнему и правому краю --- */
  .level__card { display: block; position: relative; padding: 0; }  /* overflow:hidden и border-radius — из базы */
  .level__body { padding: 24px 22px 26px; order: 0; }
  .level__figure {
    position: absolute;
    top: 0;
    right: 0;
    width: 46%;
    margin: 0;
    line-height: 0;
  }
  .level__figure img {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    object-fit: cover;
    border-radius: 0;
    display: block;
  }
  .level__title {
    padding-right: 50%;
    min-height: 104px;
    margin-bottom: 14px;
  }
  .level__lead { font-size: 15px; }
  .level__list { gap: 10px; margin-bottom: 22px; }
  .level__list li { line-height: 1.4; }
  .ico-dot { width: 16px; height: 16px; }
  .level__cta { height: 56px; }

  /* --- Курсы: вкладки и карточки --- */
  /* вкладки — единая светлая скруглённая полоса во всю ширину, в один ряд */
  .tabs__list {
    background: var(--bg-soft);
    border-radius: 50px;
    padding: 6px;
    gap: 4px;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 28px;
  }
  .tabs__pill { padding: 9px 14px; font-size: 14px; flex: 1 1 auto; text-align: center; }
  .courses__title { font-size: 26px; margin-bottom: 24px; }
  .courses__grid { gap: 18px; }
  .course { border-radius: 24px; }

  /* на мобилке меняем местами «для дизайнеров» и «для медиков» */
  #panel-english .course:nth-child(1) { order: 1; }
  #panel-english .course:nth-child(2) { order: 2; }
  #panel-english .course:nth-child(3) { order: 4; }
  #panel-english .course:nth-child(4) { order: 3; }
  #panel-english .course:nth-child(5) { order: 5; }

  .course__photo,
  .course--wide .course__photo,
  .course--narrow .course__photo {
    position: absolute;
    left: auto;
    right: -8px;
    top: auto;
    bottom: 0;
    transform: none;
    width: 40%;
    height: 210px;
  }
  .course--wide .course__body,
  .course--narrow .course__body {
    min-height: 228px;
    padding: 22px 20px 18px;
    padding-right: 39%;
  }
  .course__title,
  .course--wide .course__title,
  .course--narrow .course__title {
    font-size: 21px;
    line-height: 1.2;
    margin-bottom: 12px;
    overflow-wrap: break-word;
  }
  .course__text {
    width: 100%;
    font-size: 14px;
    margin-bottom: 14px;
  }
  /* у карточки «для детей» кадр чуть шире — но не настолько, чтобы ломать слова */
  .course--green .course__photo { width: 50%; height: 220px; right: -14px; }
  .course--green .course__body,
  .course--green.course--wide .course__body,
  .course--green.course--narrow .course__body { padding-right: 48%; }

  /* «Общий турецкий» — девушку крупнее */
  /* «Общий турецкий» — фигура девушки от середины карточки до нижнего края */
  .course__photo[src*="course-turkish-general"] {
    width: 52%;
    height: 66%;
    min-height: 230px;
    right: -6px;
    bottom: 0;
    top: auto;
    object-fit: contain;
    object-position: right bottom;
  }
  #panel-turkish .course--grey .course__body { padding-right: 50%; min-height: 320px; }

  /* --- Стоимость: тарифы в две колонки, как в оригинале --- */
  /* minmax(0,1fr): иначе цена «18 000 ₽» распирает колонки шире контейнера */
  .plans,
  .plans.plans--individual,
  .plans.plans--groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 10px;
  }
  .plan { padding: 22px 12px 18px; border-width: 3px; min-width: 0; }
  /* шапка тарифа по центру, список фич — слева (как в оригинале) */
  .plan__count,
  .plan__price,
  .plan__per { text-align: center; }
  .plan__count { font-size: 15px; }
  .plan__price { font-size: 19px; }
  .plan__per { font-size: 11px; }
  .plan__features { margin: 12px 0 14px; gap: 0; }
  .plan__features li { font-size: 12px; line-height: 1.45; gap: 6px; align-items: flex-start; }
  .plan__features .tick { flex: none; margin-top: 3px; }
  .plan__cta { height: 36px; font-size: 13px; }
  .plan__badge { min-width: 0; height: 24px; padding-inline: 12px; font-size: 12px; }
  .plan-group { font-size: 20px; }
  /* заголовок и подзаголовок «Стоимость» — по левому краю */
  .pricing__title { font-size: 28px; text-align: left; }
  .pricing__lead { font-size: 15px; text-align: left; margin: 8px 0 24px; }

  /* отступы «Стоимость» и «Отзывы» — в едином ритме (см. выше) */

  /* --- Форма консультации: без подписей над полями --- */
  .consult__side { display: none; }        /* убираем пустой flex-элемент и лишний gap */
  .lead { padding: 24px 22px 28px; }
  .lead__title { font-size: 22px; }
  .lead__title,
  .lead__lead { max-width: calc(100% - 100px); }
  .lead__stars { width: 84px; top: 14px; right: 12px; }
  .field__label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .field { margin-bottom: 12px; }

  /* поля выше и скруглённее; 16px убирает зум фокуса на iOS */
  .field__input {
    height: 52px;
    border-radius: 14px;
    font-size: 16px;
  }
  /* телефон — флаг+код и номер в одном белом скруглённом поле */
  .field__phone {
    gap: 0;
    background: var(--white);
    border-radius: 14px;
    overflow: hidden;
  }
  .field__phone .field__input { border-radius: 0; }
  .field__country {
    height: 52px;
    font-size: 16px;
    background: transparent;
    border-radius: 0;
    border-right: 1px solid #e5e7eb;
  }

  .consent { gap: 10px 12px; }
  .consent__box { width: 22px; height: 22px; }
  .lead__submit { height: 54px; border-radius: 16px; }

  /* --- Финальный блок: фигуры крупнее, кнопка с отступами сверху и снизу --- */
  .final__card {
    overflow: hidden;
    padding: 112px 20px 72px;
    gap: 34px;
    min-height: 0;
  }
  .final__title { font-size: 30px; }
  .final__cta { margin: 4px 0 8px; }
  .final__card .deco { display: block; }
  .final__card .deco--square  { top: 14px;    left: 10px;   right: auto; bottom: auto; transform: rotate(80deg)  scale(0.72); }
  .final__card .deco--arch    { top: 14px;    right: 10px;  left: auto;  bottom: auto; transform: rotate(340deg) scale(0.72); }
  .final__card .deco--octagon { bottom: 14px; left: 8px;    right: auto; top: auto;    transform: scale(0.66); }
  .final__card .deco--cloud   { bottom: 12px; right: 8px;   left: auto;  top: auto;    transform: scale(0.68); }

  /* FAQ: шеврон тёмно-серый, как в оригинале */
  .faq__chevron { fill: var(--ink); }

  /* кнопка «наверх» — выше индикатора home на телефоне */
  .to-top { bottom: 20px; }

  /* --- Плавающая кнопка «•••»: WhatsApp / Преподаватели / Цены --- */
  .fab {
    display: block;
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 70;
  }
  .fab__toggle {
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--white);
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
  }
  .fab__dots {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink);
  }
  .fab__dots::before,
  .fab__dots::after {
    content: "";
    position: absolute;
    top: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink);
  }
  .fab__dots::before { left: -11px; }
  .fab__dots::after  { left: 11px; }

  .fab__menu {
    position: absolute;
    right: 4px;
    bottom: 62px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .fab[data-open="true"] .fab__menu {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .fab[data-open="true"] .fab__toggle {
    transform: rotate(90deg);
  }
  .fab__item {
    white-space: nowrap;
    padding: 10px 16px;
    border-radius: 22px;
    background: var(--purple);
    color: var(--white);
    font-family: var(--font-alt);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--shadow-card);
    transition: background 0.2s ease;
  }
  .fab__item:hover { background: var(--purple-hover); }

  /* стрелки карусели отзывов — мельче и в поле у самого края */
  .reviews { overflow-x: clip; }
  .slider__arrow,
  .slider.is-multi .slider__arrow { display: flex; }
  .slider__arrow { width: 14px; height: 28px; margin-top: -14px; }
  .slider__arrow--prev { left: -14px; }
  .slider__arrow--next { right: -14px; }
  .slider__dot.is-active::before { background: var(--peach); }
}

@media (max-width: 400px) {
  .hero .deco--octagon { bottom: 62px; }
  .hero .deco--cloud   { bottom: 50px; }
  .faq__q { gap: 12px; }
  .course__photo,
  .course--wide .course__photo,
  .course--narrow .course__photo { height: 194px; }
  .course--green .course__photo { height: 200px; }
  .course__photo[src*="course-turkish-general"] { height: 70%; min-height: 210px; }
}


/* ---------- Внутренние страницы ---------- */

.page-head {
  padding-block: 60px 30px;
}

/* Надзаголовок «• Преподаватели» — как в оригинале */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--purple);
}

.page-head__title {
  font-size: 50px;
  line-height: 1.2;
  font-weight: 700;
}

.page-head__lead {
  max-width: 720px;
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--grey-1);
}

.legal {
  max-width: 820px;
  padding-bottom: 40px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  /* В документах встречаются длинные адреса — на узком экране
     они выходили за край страницы. */
  overflow-wrap: anywhere;
}

.legal h2 {
  margin: 32px 0 12px;
  font-size: 22px;
  line-height: 1.3;
}

.legal p {
  margin-bottom: 14px;
}

.legal a {
  color: #5b3fd6;
  text-decoration: underline;
}

@media (max-width: 760px) {
  .page-head__title {
    font-size: 30px;
  }

  .plan-group {
    font-size: 24px;
  }

  .page-head__lead {
    font-size: 16px;
  }
}


/* ---------- Карточки преподавателей ---------- */

.teachers {
  padding-block: 10px 40px;
}

.tcards {
  display: grid;
  gap: 22px;
}

.tcard {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  padding: 20px;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}

.tcard:hover {
  box-shadow: var(--shadow-card);
}

.tcard__media {
  position: relative;
}

.tcard__photo {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: center top;
  border-radius: 14px;
}

/* «Носитель языка», «5 лет опыта» — плашка поверх фотографии */
.tcard__badge {
  position: absolute;
  top: -8px;
  left: -8px;
  z-index: 2;
  padding: 9px 16px;
  border-radius: 30px;
  background: var(--white);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.tcard__body {
  display: flex;
  flex-direction: column;
  padding: 8px 10px 6px 0;
}

.tcard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.tcard__name {
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
}

.tcard__lang {
  margin-top: 6px;
  font-size: 16px;
  color: var(--grey-3);
}

.tcard__price {
  flex: none;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.tcard__price-label {
  display: block;
  font-size: 13px;
  color: var(--grey-3);
}

.tcard__price-value {
  display: block;
  margin-top: 2px;
  font-size: 19px;
  font-weight: 700;
  white-space: nowrap;
}

.tcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 16px;
}

.tcard__tag {
  padding: 7px 14px;
  border-radius: 30px;
  background: #f2f2f7;
  font-size: 13px;
  line-height: 1.2;
}

.tcard__points {
  display: grid;
  gap: 9px;
}

.tcard__points li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.4;
}

.tcard__points li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--purple);
}

.tcard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 22px;
}

.tcard__cta,
.tcard__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding-inline: 22px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.tcard__cta {
  background: var(--purple);
  color: var(--white);
}

.tcard__cta:hover {
  background: var(--purple-hover);
}

.tcard__more {
  background: var(--white);
  color: var(--ink);
  border: 1px solid #e3e3e8;
}

.tcard__more:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.tcard__chevron {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.tcard__more[aria-expanded="true"] .tcard__chevron {
  transform: rotate(-90deg);
}

/* Разворачиваемый рассказ преподавателя «о себе» — по кнопке «Подробнее».
   Плавное раскрытие: max-height анимируется, точное значение задаёт скрипт. */
.tcard__bio {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.tcard__bio-inner {
  overflow: hidden;
}

.tcard__bio p {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid #ececf1;
  font-size: 15px;
  line-height: 1.6;
  color: var(--grey-3);
}

@media (prefers-reduced-motion: reduce) {
  .tcard__bio {
    transition: none;
  }
}

@media (max-width: 900px) {
  .tcard {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .tcard__photo {
    min-height: 260px;
    max-height: 360px;
  }

  .tcard__body {
    padding: 0 4px 4px;
  }

  .tcard__name {
    font-size: 26px;
  }

  .tcard__head {
    flex-direction: column;
    gap: 14px;
  }

  .tcard__price {
    align-self: flex-start;
  }
}

@media (max-width: 520px) {
  .tcard {
    padding: 16px;
  }

  .tcard__actions .tcard__cta,
  .tcard__actions .tcard__more {
    flex: 1 1 100%;
  }
}

@media (max-width: 400px) {
  .page-head__title {
    font-size: 26px;
  }
}

/* Четырём карточкам тарифов нужно около 1264px. Ниже этого они
   распирали сетку и страница уезжала вбок — переходим на две колонки
   раньше, чем остальные блоки. */
@media (min-width: 761px) and (max-width: 1300px) {
  .plans,
  .plans.plans--individual,
  .plans.plans--groups {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   Запись на консультацию — booking.html
   ============================================================ */
.booking { padding-block: 40px 70px; }
.booking__inner { max-width: 620px; }
.booking__h1 {
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
  outline: none;
}
.booking__lead { font-size: 16px; line-height: 1.5; color: var(--grey-2); margin-bottom: 22px; }

/* Заглушка страницы записи, пока модуль в разработке */
.booking-stub {
  max-width: 560px;
  text-align: center;
  padding-block: 40px 24px;
}
.booking-stub .booking__lead { margin-bottom: 30px; }
.booking-stub__cta {
  height: 52px;
  padding-inline: 34px;
}
.booking-stub__back { margin-top: 24px; font-size: 15px; }
.booking-stub__back a { color: var(--purple); }
.booking-stub__back a:hover { color: var(--purple-hover); }

/* показываем только активный шаг */
.bstep { display: none; }
.booking__inner[data-step="1"] .bstep--1,
.booking__inner[data-step="2"] .bstep--2,
.booking__inner[data-step="3"] .bstep--3,
.booking__inner[data-step="4"] .bstep--4 { display: block; }

.bstep__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--purple);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.bstep__back:hover { color: var(--purple-hover); }

/* --- Шаг 1: карточки языков --- */
.lang-grid { display: grid; gap: 20px; margin-top: 24px; }
.lang-card {
  border: 1px solid #e6e6ea;
  border-radius: 18px;
  padding: 26px 22px 22px;
  text-align: center;
  background: var(--white);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.lang-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.lang-card__flag {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
}
.lang-card__title { font-size: 22px; font-weight: 700; color: var(--purple); margin-bottom: 6px; }
.lang-card__desc { font-size: 15px; color: var(--ink); }
.lang-card__rule { border: 0; border-top: 1px solid #ececf0; margin: 16px 0; }
.lang-card__dur { font-size: 15px; color: var(--grey-2); margin-bottom: 16px; }
.lang-card__cta { width: 100%; height: 48px; border-radius: 999px; background: var(--purple); color: var(--white); }
.lang-card__cta:hover { background: var(--purple-hover); }

/* --- Шаг 2: календарь --- */
.bcal { margin-top: 8px; }
.bcal__section { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.bcal__tz { font-size: 14px; color: var(--purple); margin-bottom: 18px; }
.bcal__nav {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; margin-bottom: 12px;
}
.bcal__nav button {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid #e0e0e6; background: var(--white);
  font-size: 18px; line-height: 1; color: var(--ink); cursor: pointer;
}
.bcal__nav button:disabled { opacity: 0.35; cursor: default; }
.bcal__month { font-size: 16px; font-weight: 600; min-width: 150px; text-align: center; }
.bcal__weekdays,
.bcal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.bcal__weekdays { margin-bottom: 6px; }
.bcal__weekdays span { text-align: center; font-size: 13px; color: var(--purple); }
.bcal__day {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: none; font: inherit; font-size: 15px; color: var(--ink);
  cursor: pointer;
}
.bcal__day--empty { visibility: hidden; }
.bcal__day--off { color: #c7c7cf; cursor: default; }
.bcal__day--free:hover { background: #f0edff; }
.bcal__day.is-active { background: var(--peach); color: var(--white); font-weight: 700; }

/* --- слоты времени --- */
.bslots { margin-top: 28px; }
.bslots__title { font-size: 17px; font-weight: 700; margin-bottom: 14px; }
.bslots__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.bslot {
  height: 46px; border-radius: 999px;
  border: 1px solid #d9d9e0; background: var(--white);
  font: inherit; font-size: 15px; color: var(--ink); cursor: pointer;
}
.bslot:hover { border-color: var(--peach); }
.bslot.is-active { background: var(--peach); border-color: var(--peach); color: var(--white); font-weight: 700; }

.bpref { margin-top: 30px; }
.bpref__h { font-size: 20px; font-weight: 700; margin-bottom: 12px; padding-top: 12px; border-top: 1px solid #ececf0; }
.bpref__label { display: block; font-size: 14px; font-weight: 600; color: var(--purple); margin-bottom: 6px; }
.bpref__select {
  width: 100%; height: 48px; padding-inline: 14px;
  border: 1px solid #d9d9e0; border-radius: 12px;
  background: var(--white); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer;
}
.bstep__next { width: 100%; height: 50px; border-radius: 999px; margin-top: 26px; background: var(--purple); color: var(--white); }
.bstep__next:hover { background: var(--purple-hover); }
.bstep__next:disabled { opacity: 0.5; cursor: default; }

/* --- Шаг 3: форма --- */
.bform__sub { font-size: 22px; font-weight: 700; margin: 22px 0 16px; }
.bform .field { margin-bottom: 18px; }
.bform .field__input {
  height: 48px; border: 1px solid #d9d9e0; border-radius: 12px; font-size: 16px;
}
.bform__area { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
.bform .field__error { background: none; padding: 4px 0; }

.bsummary { margin: 26px 0 18px; padding-top: 18px; border-top: 1px solid #ececf0; }
.bsummary__title { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.bsummary__lang { font-size: 16px; font-weight: 600; }
.bsummary__when { font-size: 16px; margin-bottom: 10px; }
.bsummary__meta { font-size: 14px; color: var(--grey-2); line-height: 1.5; }
.bform__note { font-size: 13px; color: var(--grey-2); line-height: 1.4; margin: 18px 0; }
.bform__submit { width: 100%; height: 52px; border-radius: 999px; background: var(--purple); color: var(--white); }
.bform__submit:hover { background: var(--purple-hover); }

/* --- Шаг 4: спасибо --- */
.bthanks__lead { font-size: 16px; color: var(--purple); line-height: 1.5; margin-bottom: 8px; }
.bthanks__num { font-size: 15px; margin-bottom: 6px; }
.bthanks__num span { color: var(--purple); font-weight: 700; }
.bthanks__rule { border: 0; border-top: 1px solid #ececf0; margin: 22px 0; }
.bthanks__lang { font-size: 17px; font-weight: 700; }
.bthanks__when { font-size: 16px; margin-bottom: 10px; }
.bthanks__meta { font-size: 14px; color: var(--grey-2); line-height: 1.5; margin-bottom: 16px; }
.bthanks__gcal {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--purple); font-weight: 600; text-decoration: underline;
}
.bthanks__gcal:hover { color: var(--purple-hover); }
.bthanks__price { display: grid; gap: 8px; margin: 0 0 12px; }
.bthanks__price div { display: flex; justify-content: space-between; }
.bthanks__price dt { color: var(--purple); }
.bthanks__price dd { margin: 0; color: var(--purple); }
.bthanks__total { display: flex; justify-content: space-between; font-size: 20px; font-weight: 700; margin-bottom: 26px; }
.bthanks__total span { color: var(--purple); }
.bthanks__home { display: inline-block; color: var(--purple); font-weight: 600; text-decoration: underline; }
.bthanks__home:hover { color: var(--purple-hover); }

@media (max-width: 760px) {
  .booking { padding-block: 22px 44px; }
  .booking__h1 { font-size: 30px; }
  .bslots__grid { gap: 10px; }
  .lang-card__flag { width: 84px; height: 84px; }
}