/* Декоративные векторы (напр. .about-us__v88) выходят за правый край и раньше
   давали горизонтальную прокрутку: страница уезжала вбок и выглядела сломанной.
   На мобильной версии такой запрет стоял всегда, здесь его не было. */
html, body { overflow-x: hidden; max-width: 100%; }

/* Основные стили */

body {
  font-family: 'Geologica', system-ui, sans-serif;
  font-size: 16px;
  color: var(--color-text);
  background: var(--color-bg-light);
  overflow-x: hidden;
}

.container {
  max-width: 1408px;
  margin: 0 auto;
  padding: 0 256px;
}

/* ===== CARDS ===== */
.cards {
  position: relative;
  background: #5941F2;
  min-height: 1182px;
}

/* ——— Карточки предметов (геометрия из Figma сохранена 1:1) ——— */
.scard {
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: 23px 23px 24px;
  background: #F2F2F2;
  border-radius: 45px;
  z-index: 4;
  overflow: hidden;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              background 0.4s ease;
}
.scard:hover {
  transform: translateY(-10px);
  background: #FFFFFF;
  box-shadow: 0 34px 64px -28px rgba(9, 4, 120, 0.55);
}

.scard--395 { width: 328px; height: 456px; left: 256px;  top: 203px; }
.scard--403 { width: 328px; height: 579px; left: 616px;  top: 203px; }
.scard--405 { width: 328px; height: 579px; left: 977px;  top: 203px; }
.scard--407 { width: 328px; height: 579px; left: 1336px; top: 203px; }
.scard--399 { width: 328px; height: 363px; left: 256px;  top: 686px; }
.scard--401 { width: 687px; height: 231px; left: 977px;  top: 818px; }

/* Пилюля с названием предмета */
.scard__pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 49.37px;
  padding: 0 22px;
  border-radius: 35px;
  background: #ABA0F2;
  font-family: 'Geologica', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #FFFFFF;
  white-space: nowrap;
  transition: background 0.46s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.scard:hover .scard__pill { background: #5941F2; }

/* Область под фото: пока фото нет — видна подпись-заглушка */
.scard__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 74px;
  margin-top: 16px;
  border-radius: 28px;
  overflow: hidden;
  background: #E4E1F5;
}
.scard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.scard:hover .scard__img { transform: scale(1.06); }
.scard__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed #ABA0F2;
  border-radius: 28px;
  font-family: 'Geologica', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #7C71B8;
  letter-spacing: 0.02em;
}
/* если картинка загрузилась — заглушку прячем (см. скрипт в index.html) */
.scard__media.has-img .scard__ph { display: none; }
.scard__media:not(.has-img) .scard__img { opacity: 0; }

.scard__desc {
  margin-top: 15px;
  font-family: 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 19px;
  color: #3C3A56;
}
.scard--compact .scard__desc { margin-top: 12px; }

.scard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.scard__tags span {
  display: inline-flex;
  align-items: center;
  height: 25px;
  padding: 0 11px;
  border-radius: 13px;
  background: rgba(89, 65, 242, 0.1);
  font-family: 'Geologica', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
  color: #5941F2;
}

.scard__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  margin-top: auto;
  padding: 0;
  border: 1.5px solid #5941F2;
  border-radius: 22px;
  background: transparent;
  font-family: 'Geologica', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 19px;
  color: #5941F2;
  cursor: pointer;
  transition: background 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.scard__cta svg { width: 18px; height: 18px; transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); }
.scard__cta:hover { background: #5941F2; color: #FFFFFF; }
.scard__cta:hover svg { transform: translateX(3px); }
/* отступ сверху, чтобы кнопка не липла к тегам на высоких карточках */
.scard__tags + .scard__cta { margin-top: 16px; }

/* ——— Широкий баннер «остальные предметы» ——— */
.scard--wide {
  flex-direction: row;
  align-items: center;
  gap: 32px;
  padding: 30px 36px;
}
.scard__wtext { flex: 1 1 auto; }
.scard__wtitle {
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 33px;
  color: #171A2C;
}
.scard__wdesc {
  margin-top: 9px;
  font-family: 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  color: #3C3A56;
}
.scard__wcta {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 54px;
  padding: 0 30px;
  border: none;
  border-radius: 27px;
  background: #5941F2;
  font-family: 'Geologica', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.scard__wcta svg { width: 19px; height: 19px; transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); }
.scard__wcta:hover { background: #2402FF; }
.scard__wcta:hover svg { transform: translateX(3px); }

/* Подзаголовок секции */
.cards__sub {
  position: absolute;
  left: calc(50% - 704px);
  top: 152px;
  width: 640px;
  font-family: 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 23px;
  color: rgba(255, 255, 255, 0.82);
  z-index: 4;
}

/* Декоративные векторы cards section */
.cards__v80 {
  position: absolute;
  top: 608px;
  left: 1376px;
  width: 573.45px;
  height: 714.54px;
  pointer-events: all;   /* включаем ховер на самом векторе */
  overflow: visible;
  z-index: 3;
  cursor: default;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.9s ease;
}

.cards__v81 {
  position: absolute;
  top: 756px;
  left: -297px;
  width: 1024.33px;
  height: 768.17px;
  pointer-events: all;
  overflow: visible;
  z-index: 3;
  cursor: default;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.9s ease;
}

/* Ховер на каждом векторе отдельно — сильное смещение */
.cards:not(.cards--near-pricing) .cards__v80:hover {
  transform: translateX(220px) translateY(30px) rotate(15deg);
  opacity: 0.4;
}

.cards:not(.cards--near-pricing) .cards__v81:hover {
  transform: translateX(-220px) translateY(30px) rotate(-13deg);
  opacity: 0.4;
}

/* После скролла до прайса — векторы полностью уходят */
.cards--near-pricing .cards__v80 {
  transform: translateX(600px) translateY(80px) rotate(25deg);
  opacity: 0;
  pointer-events: none;
}

.cards--near-pricing .cards__v81 {
  transform: translateX(-600px) translateY(80px) rotate(-22deg);
  opacity: 0;
  pointer-events: none;
}

/* Затухалка карточного блока → следующая секция (Rectangle 425) */
.cards__fade {
  position: absolute;
  top: 1182px;
  left: -24px;
  width: 1972px;
  height: 1059px;
  background: linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Декоративный Vector 82: top -277px, rotate -64.37deg */
.cards__vec {
  position: absolute;
  top: 0px;
  left: 790px;
  width: 1137px;
  height: 759px;
  pointer-events: none;
  overflow: visible;
}

/* Заголовок: left calc(50% - 188.5px - 515.5px) = calc(50% - 704px) */
.cards__title {
  position: absolute;
  width: 377px;
  left: calc(50% - 704px);
  top: 87px;
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: 46.7692px;
  line-height: 58px;
  color: #ffffff;
}

/* Мини-карточка формата (top-right секции) */
.cards__route-card {
  position: absolute;
  width: 241.64px;
  min-height: 112.19px;
  left: 1423px;
  top: 76px;
  background: #ffffff;
  border-radius: 25.89px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 5;
  box-shadow: 0 20px 46px -24px rgba(9, 4, 120, 0.6);
}

.cards__route-tag {
  width: 121.68px;
  height: 27.04px;
  background: rgba(171, 160, 242, 0.48);
  border-radius: 19.54px;
  font-family: 'Geologica', sans-serif;
  font-weight: 500;
  font-size: 10.356px;
  line-height: 13px;
  color: #0D05F2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cards__route-text {
  width: 208.85px;
  font-family: 'Geologica', sans-serif;
  font-weight: 500;
  font-size: 15.534px;
  line-height: 19px;
  color: #000000;
}

/* ===== ЛИНИИ (chart) в секции cards ===== */
.cards__line {
  position: absolute;
  height: 0;
  border: 0.5px solid #FFFFFF;
  opacity: 0.6;
}

.cards__line--v {
  width: 380px;
  top: 992px;
  transform: rotate(-90deg);
}

.cards__line--h {
  left: 590px;
}

/* ===== О НАС / ТАРИФЫ ===== */
.about {
  position: relative;
  background: #FFFFFF;
  min-height: 1640px;
}

/* ===== ФЛИП КАРТОЧЕК (индивидуально ↔ группа) ===== */

/* Обёртки-стороны: занимают весь about */
.about__face {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* Face-divs сами НЕ перехватывают события — только rcards.
   Без этого .about__face--back (выше в z-стеке) убивает mousemove на карточках. */
.about__face--front,
.about__face--back {
  pointer-events: none;
}

/* Явно включаем события на rcards переднего лица в обычном режиме.
   Без явного значения Chrome не пропускает события через pointer-events:none родителя. */
.about__face--front .about__rcard {
  pointer-events: auto;
}

/* Переворот: карточка уходит ребром и возвращается уже другой стороной.
   rotateY вместо scaleX — движение читается как поворот, а не как схлопывание. */
.about__face { perspective: 1600px; }
.about__face .about__rcard {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Задняя сторона — спрятана */
.about__face--back .about__rcard {
  transform: rotateY(90deg);
  opacity: 0;
  transition: transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.34s ease;
}
.about__face--back .about__rcard--367 { transition-delay: 0.34s, 0.34s; }
.about__face--back .about__rcard--368 { transition-delay: 0.44s, 0.44s; }
.about__face--back .about__rcard--369 { transition-delay: 0.54s, 0.54s; }

/* Передняя — видна */
.about__face--front .about__rcard {
  transform: rotateY(0deg);
  opacity: 1;
  transition: transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.34s ease;
  pointer-events: auto;
}
.about__face--front .about__rcard--367 { transition-delay: 0.34s, 0.44s; }
.about__face--front .about__rcard--368 { transition-delay: 0.44s, 0.54s; }
.about__face--front .about__rcard--369 { transition-delay: 0.54s, 0.64s; }

/* Групповой режим — стороны меняются местами */
.about--group-mode .about__face--front .about__rcard { transform: rotateY(-90deg); opacity: 0; }
.about--group-mode .about__face--front .about__rcard--367 { transition-delay: 0s, 0.1s; }
.about--group-mode .about__face--front .about__rcard--368 { transition-delay: 0.1s, 0.2s; }
.about--group-mode .about__face--front .about__rcard--369 { transition-delay: 0.2s, 0.3s; }

.about--group-mode .about__face--back .about__rcard { transform: rotateY(0deg); opacity: 1; }
.about--group-mode .about__face--back .about__rcard--367 { transition-delay: 0.34s, 0.34s; }
.about--group-mode .about__face--back .about__rcard--368 { transition-delay: 0.44s, 0.44s; }
.about--group-mode .about__face--back .about__rcard--369 { transition-delay: 0.54s, 0.54s; }

/* Переключатель «индивидуально ↔ мини-группа» */
/* ——— Сегментированный переключатель формата занятий ———
   Ползунок стоит под активной опцией, поэтому видно текущий режим,
   а не «куда переключиться». */
.about__seg {
  position: absolute;
  /* был слева на уровне заголовка и налезал на него: заголовок занимает
     x 410–1510, переключатель — 260–703. Поднят над заголовком по центру. */
  top: 14px;
  left: calc(50% - 222px);
  display: inline-flex;
  padding: 6px;
  border: 1.8px solid #DAD5F6;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 14px 34px -18px rgba(43, 27, 158, 0.55);
  z-index: 10;
}

.about__seg-thumb {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 214px;
  height: 50px;
  border-radius: 999px;
  background: #5941F2;
  box-shadow: 0 10px 22px -10px rgba(43, 27, 158, 0.7);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}
.about__seg.is-group .about__seg-thumb { transform: translateX(214px); }

.about__seg-b {
  position: relative;
  z-index: 1;
  width: 214px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0;
  border: none;
  background: none;
  border-radius: 999px;
  font-family: 'Geologica', sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 21px;
  color: #6B6785;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.35s ease;
}
.about__seg-b.is-active { color: #FFFFFF; }
.about__seg-b:not(.is-active):hover { color: #14102E; }

.about__seg-ico {
  flex: none;
  width: 22px;
  height: 22px;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.about__seg-ico svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor;
}
.about__seg-b.is-active .about__seg-ico { transform: scale(1.1); }


/* Смена подзаголовка при переключении режима */
.about__sub {
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.about__sub.is-swap { opacity: 0; transform: translateY(-6px); }

/* Пилюля-заголовок (Rectangle 447) */
.about__pill {
  position: absolute;
  width: 1104px;
  height: 97px;
  left: calc(50% - 552px);
  top: 104px;
  background: #5941F2;
  border-radius: 79px;
}

/* Заголовок */
.about__title {
  position: absolute;
  width: 1100px;
  left: calc(50% - 550px);
  top: 96px;
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: 58px;
  line-height: 66px;
  color: #14102E;
  text-align: center;
}

.about__sub {
  position: absolute;
  width: 900px;
  left: calc(50% - 450px);
  top: 244px;
  font-family: 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 30px;
  color: #5C5A6E;
  text-align: center;
}

.about__art {
  position: absolute;
  left: 1452px;
  top: 60px;
  width: 168px;
  height: 168px;
  object-fit: contain;
}

/* Карточки тарифов */
.about__card {
  position: absolute;
  top: 271px;
  height: 505px;
  border-radius: 25px;
  transition: box-shadow 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Обводка при наведении на карточку с ценой */
.about__rcard:hover .about__card--367,
.about__rcard:hover .about__card--369 {
  box-shadow: 0px 0px 95.24px rgba(0,0,0,0.15), 0 0 0 3px #5941F2;
}
.about__rcard:hover .about__card--368 {
  box-shadow: 0px 0px 95px rgba(0,0,0,0.25), 0 0 0 3px rgba(255,255,255,0.85);
}

.about__card--367 {
  width: 323px;
  left: 413px;
  background: #FFFFFF;
  box-shadow: 0px 0px 95.2411px rgba(0, 0, 0, 0.15);
}

.about__card--368 {
  width: 325px;
  left: 797px;
  background: linear-gradient(135deg,
    #5941F2 17%,
    #0D05F2 100%);
  box-shadow: 0px 0px 95px rgba(0, 0, 0, 0.25);
}

.about__card--369 {
  width: 328px;
  left: 1184px;
  background: #FFFFFF;
  box-shadow: 0px 0px 93.7326px rgba(0, 0, 0, 0.15);
}

/* Кнопки под карточками (Rectangle 421 и 423) */
.about__btn {
  position: absolute;
  height: 70px;
  top: 789px;
  background: #7663F2;
  box-shadow: 0px 0px 95px rgba(0, 0, 0, 0.25);
  border-radius: 25px;
  cursor: pointer;
  outline: none;
  transition: outline-color 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), outline-offset 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.about__btn--421 { width: 323px; left: 413px; }
.about__btn--423 { width: 323px; left: 1189px; }

/* Hover через JS-класс is-hovered (надёжнее CSS :hover + pointer-events) */
.about__rcard--367.is-hovered .about__btn--421,
.about__rcard--369.is-hovered .about__btn--423 {
  outline: 2.5px solid #FFFFFF;
  outline-offset: 3px;
}

.about__rcard--368.is-hovered .about__btn--420 {
  outline: 2.5px solid #5941F2;
  outline-offset: 3px;
}

.about__btn--420 {
  width: 325px;
  left: 797px;
  background: #FFFFFF;
  box-shadow: 0px 0px 95.2411px rgba(0,0,0,0.13);
  outline: none;
}

/* Кружки-иконки на кнопках */
.about__circle {
  position: absolute;
  width: 47px;
  height: 47px;
  top: 800px;
  border-radius: 300px;
}

.about__circle--452 { left: 1067px; background: #5941F2; }
.about__circle--453 { left: 1456px; background: #FFFFFF; }

/* Цены на кнопках */
.about__price {
  position: absolute;
  top: 802px;
  height: 43px;
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: 34.4px;
  line-height: 43px;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}

.about__price--421 { width: 174px; left: 488px;  color: #FFFFFF;  }
.about__price--420 { width: 175px; left: 857px;  color: #0D05F2;  }
.about__price--423 { width: 196px; left: 1240px; color: #FFFFFF;  }

/* Тексты скидок в кружках */
.about__discount {
  position: absolute;
  top: 816px;
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
}

.about__discount--452 { width: 33px; left: 1074px; color: #FFFFFF;  }
.about__discount--453 { width: 32px; left: 1464px; color: #5941F2; }

/* Маркеры-точки карточек тарифов */
.about__dot {
  position: absolute;
  width: 6px;
  height: 36px;
  left: calc(50% - 524px); /* 436px at 1920px */
  font-family: 'Geologica', sans-serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 40px;
  color: #000000;
}

/* Текст-список карточек тарифов */
.about__card-list--367,
.about__card-list--368,
.about__card-list--369 {
  position: absolute;
  width: 257px;
  top: 378px;
  font-family: 'Geologica', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
}

.about__card-list--367 { left: 453px;  color: #000000; }
.about__card-list--368 { left: 837px;  color: #FFFFFF; }
.about__card-list--369 { left: 1224px; color: #000000; }

/* Маркеры карточки 368 (белые) и 369 (чёрные) */
.about__dot--368 { left: 820px;  color: #FFFFFF; }
.about__dot--369 { left: 1207px; color: #000000; }



/* Бейджи (Frame 31/29/30) */
.about__badge {
  position: absolute;
  top: 287px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about__badge--31 {
  width: 90.45px;
  height: 60.34px;
  left: 441px;
  background: #ABA0F2;
  border: 0.54px solid #5941F2;
  box-shadow: 0px 0px 16.192px 2.01143px rgba(57, 40, 242, 0.25);
}

.about__badge--29 {
  width: 91.45px;
  height: 60.34px;
  left: 825px;
  background: #7663F2;
  border: 0.543px solid #FFFFFF;
  box-shadow: 1.358px 1.358px 7.198px rgba(0, 0, 0, 0.25);
}

.about__badge--30 {
  width: 109.45px;
  height: 60px;
  left: 1212px;
  background: #ABA0F2;
  border: 0.54px solid #5941F2;
  box-shadow: 0px 0px 16.192px 2.01143px rgba(57, 40, 242, 0.25);
}

/* Текст внутри бейджа */
.about__badge-text {
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  font-size: 21.7292px;
  line-height: 26px;
  text-align: center;
}

.about__badge-text--dark  { color: #5941F2; }
.about__badge-text--light { color: #FFFFFF; }

/* ===== REPULSION: обёртки карточек ===== */
.about__rcard {
  position: absolute;
  top: 340px;
  height: 1015px;
}

.about__rcard--367 { left: 284px;  width: 420px; }
.about__rcard--368 { left: 750px;  width: 420px; top: 315px; height: 1065px; }
.about__rcard--369 { left: 1216px; width: 420px; }

/* tn-atom: слой для GSAP-смещения */
.about__rcard .tn-atom {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Карточка: внутри rcard занимает весь контейнер */
.about__rcard .about__card {
  top:   0   !important;
  left:  0   !important;
  width: 100% !important;
}

/* Бейджи: top 287−271=16px, left 28px от края */
.about__rcard .about__badge {
  top:  16px !important;
  left: 28px !important;
}

/* Точки-маркеры: left 23px от края */
.about__rcard .about__dot {
  left: 23px !important;
}
.about__rcard .about__dot--368 { left: 23px !important; }
.about__rcard .about__dot--369 { left: 23px !important; }

/* Текст-список: top 378−271=107px, left 40px */
.about__rcard .about__card-list--367,
.about__rcard .about__card-list--368,
.about__rcard .about__card-list--369 {
  top:  107px !important;
  left:  40px !important;
}

/* Кнопки: опущены на 22px */
.about__rcard .about__btn {
  top: 540px !important;
}
.about__rcard--367 .about__btn--421 { left: 0   !important; }
.about__rcard--368 .about__btn--420 { left: 0   !important; }
.about__rcard--369 .about__btn--423 { left: 5px !important; }

/* Цены: сдвинуты вместе с кнопками */
.about__rcard .about__price              { top: 553px !important; }
.about__rcard--367 .about__price--421    { left:  75px !important; }
.about__rcard--368 .about__price--420    { left:  60px !important; }
.about__rcard--369 .about__price--423    { left:  56px !important; }

/* Кружки скидок: сдвинуты вместе с кнопками */
.about__rcard .about__circle             { top: 551px !important; }
.about__rcard--368 .about__circle--452   { left: 270px !important; }
.about__rcard--369 .about__circle--453   { left: 272px !important; }

/* Тексты скидок: сдвинуты вместе с кнопками */
.about__rcard .about__discount           { top: 567px !important; }
.about__rcard--368 .about__discount--452 { left: 277px !important; }
.about__rcard--369 .about__discount--453 { left: 280px !important; }

/* Pointer-events: скрытые карточки не перехватывают события */
.about__face--back .about__rcard                     { pointer-events: none; }
.about--group-mode .about__face--front .about__rcard { pointer-events: none; }
.about--group-mode .about__face--back .about__rcard  { pointer-events: all;  }

/* ===== FEATURES ===== */
/* features: page 967→1600px → height 633px */
.features {
  position: relative;
  height: 633px;
  overflow: hidden;
  z-index: 2;
}

/* Заголовок: top 1086 - 967 = 119px */
.features__title {
  position: absolute;
  width: 608px;
  left: calc(50% - 304px);
  top: 119px;
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: 46.7692px;
  line-height: 58px;
  color: #5941F2;
  text-align: center;
}

/* Пилюли/круги: top 1229 - 967 = 262px */
/* Эллипс-рамка: top 1264.04 - 967 = 297px */
/* Текст поверх пилюли 387 */
/* Иконки Vector 61/62: top 1307.48 - 967 = 340px */
/* ===== ШАПКА ===== */
.header {
  position: relative;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__blob {
  position: absolute;
  bottom: -60px;
  width: 340px;
  height: 260px;
  background: var(--color-primary-mid);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  opacity: 0.85;
}

.header__blob--left  { left: -80px; }
.header__blob--right { right: -80px; transform: scaleX(-1); }

.header__center {
  display: flex;
  align-items: center;
  gap: 28px;
  position: relative;
  z-index: 1;
}

.header__circle {
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  color: #FFFFFF;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.5, 1),
              opacity 0.24s ease, background 0.24s ease, box-shadow 0.24s ease;
}
.header__circle--light { background: #ABA0F2; }
.header__circle--dark  { background: #7663F2; }
.header__circle svg { width: 38px; height: 38px; fill: none; stroke: currentColor; }

.header__circle:hover { background: #5941F2; transform: translateY(-4px) scale(1.09); box-shadow: 0 14px 30px rgba(57, 40, 242, 0.35); }
.header__circle:active { transform: translateY(-1px) scale(0.97); }
.header__circle:focus-visible { outline: 3px solid #0D05F2; outline-offset: 4px; }

/* подпись при наведении */
.header__circle::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  padding: 7px 14px;
  border-radius: 999px;
  background: #14102E;
  font-family: 'Geologica', sans-serif;
  font-weight: 500; font-size: 15px; line-height: 18px;
  color: #FFFFFF;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.header__circle:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── свёрнутое состояние ── */
.header { transition: none; }
.is-folded .header__circle:nth-of-type(1) { transform: translateX(345px) scale(0.18); opacity: 0; }
.is-folded .header__circle:nth-of-type(2) { transform: translateX(229px) scale(0.18); opacity: 0; transition-delay: 0.05s; }
.is-folded .header__circle:nth-of-type(3) { transform: translateX(-229px) scale(0.18); opacity: 0; transition-delay: 0.05s; }
.is-folded .header__circle:nth-of-type(4) { transform: translateX(-345px) scale(0.18); opacity: 0; }
.is-folded .header__circle::after { opacity: 0 !important; }
.header__logo { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; }
.is-folded .header__logo { transform: scale(0.4); opacity: 0; transition-delay: 0.1s; }

/* ── плавающие кнопки справа: наверх + меню ── */
.fab {
  position: fixed;
  right: 26px;
  top: 20px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.fab__b {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #5941F2;
  color: #FFFFFF;
  box-shadow: 0 10px 28px rgba(57, 40, 242, 0.34);
  opacity: 0;
  transform: translateX(30px) scale(0.7);
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.34, 1.3, 0.5, 1);
}
.fab__b--top { width: 72px; height: 72px; }
.fab__b--top img { width: 34px; height: 34px; }
.fab__b--menu { width: 62px; height: 62px; }
.fab__b--menu svg { width: 28px; height: 28px; }
.is-folded .fab__b { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; }
.is-folded .fab__b--top { transition-delay: 0.16s; }
.is-folded .fab__b--menu { transition-delay: 0.22s; }
.fab__b:hover { transform: scale(1.08); }

/* ── шторка разделов ── */
.nav-ov { position: fixed; inset: 0; z-index: 70; }
.nav-ov__backdrop { position: absolute; inset: 0; background: rgba(20, 16, 46, 0.5); opacity: 0; transition: opacity 0.28s ease; }
.nav-ov.is-on .nav-ov__backdrop { opacity: 1; }
.nav-ov__panel {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 400px;
  box-sizing: border-box;
  padding: 96px 40px 40px;
  display: flex; flex-direction: column; gap: 4px;
  background: #FFFFFF;
  box-shadow: -22px 0 56px rgba(43, 27, 158, 0.18);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-ov.is-on .nav-ov__panel { transform: translateX(0); }
.nav-ov__panel a {
  padding: 17px 0;
  border-bottom: 1px solid #ECEAF6;
  font-family: 'Geologica', sans-serif;
  font-weight: 500; font-size: 21px; line-height: 26px;
  color: #201F2B; text-decoration: none;
  transition: color 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-ov__panel a:hover { color: #5941F2; }
.nav-ov__cab {
  margin-top: 22px; padding: 19px 0 !important;
  border: none !important; border-radius: 999px;
  background: #5941F2; color: #FFFFFF !important;
  text-align: center; font-weight: 600 !important;
}
.nav-ov__cab:hover { background: #4A2AE8; color: #FFFFFF !important; }
.nav-ov__x {
  position: absolute; right: 30px; top: 30px;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: none; border-radius: 50%;
  background: #F2F0FC; color: #5941F2; cursor: pointer;
}
.nav-ov__x svg { width: 24px; height: 24px; }

@media (prefers-reduced-motion: reduce) {
  .header__circle, .header__logo, .fab__b, .nav-ov__panel, .nav-ov__backdrop { transition: none; }
}

.header__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  border-radius: 47px;
  width: 272px;
  height: 94px;
  flex-shrink: 0;
  transition: background 0.2s;
}

.header__logo:hover { background: var(--color-primary-hover); }

/* ===== ОБЩИЙ ВРАППЕР (hero + features) ===== */
.intro-wrap {
  position: relative;
}

/* Фоновые векторы — координаты: page top − 110px (высота header) */
.bg-vec {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.bg-vec--83 {
  top: -197px;
  left: -172px;
  width: 1224.75px;
  height: 1240.06px;
}

.bg-vec--82 {
  top: 11.34px;
  left: 1275.37px;
  width: 990.14px;
  height: 955.5px;
}

.bg-vec--80 {
  top: 751px;
  left: 1269px;
  width: 730.25px;
  height: 909.91px;
  transform: rotate(-50.42deg);
}

/* Затухалка Rectangle 419: page top 530 → wrap-relative 420px */
.bg-fade {
  position: absolute;
  top: 420px;
  left: 0;
  width: 1920px;
  height: 1070px;
  background: linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  padding: 48px 0;
}

.hero__card {
  position: relative;
  width: 1408px;
  max-width: 100%;
  height: 761px;
  margin: 0 auto;
  background: linear-gradient(134deg, #5941F2 17.73%, #0D05F2 82.27%);
  border-radius: 32px;
  overflow: hidden;
  z-index: 2;
}

/* Декоративные векторы */
.hero__vec {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* Векторы внутри карточки (оригиналы из ЛОГО-2) */
.hero__vec--82 {
  top: 209.87px;
  left: -24.54px;
  width: 611.24px;
  height: 589.86px;
}


.hero__vec--83 {
  top: 100.58px;
  left: 794.86px;
  width: 756.08px;
  height: 765.53px;
}


/* Фото девушки */
.hero__photo {
  position: absolute;
  top: 33.51px;
  left: 802.44px;
  width: 566.47px;
  height: 694.44px;
  object-fit: cover;
  object-position: top center;
  /* Прежнее фото было вырезано по контуру, поэтому углы не требовались.
     Съёмочный кадр прямоугольный — без скругления он торчал квадратом
     внутри скруглённой карточки. */
  border-radius: 30px;
  z-index: 1;
}

/* Живая карточка в hero (сообщения меняются по кругу) */
.hero__route-card {
  position: absolute;
  top: 58.2px;
  left: 654.3px;
  width: 246.91px;
  /* min-height, а не height: сообщения разной длины, третья строка не должна вылезать */
  min-height: 114.63px;
  background: #ffffff;
  border-radius: 26.45px;
  z-index: 3;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 18px 44px -22px rgba(13, 5, 242, 0.45);
}

/* Фиолетовый тег-подпись */
.hero__route-tag {
  align-self: flex-start;
  min-width: 124.33px;
  height: 27.63px;
  padding: 0 13px;
  background: rgba(171, 160, 242, 0.48);
  border-radius: 19.97px;
  font-family: 'Geologica', sans-serif;
  font-weight: 500;
  font-size: 10.58px;
  line-height: 13px;
  color: #0D05F2;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Текст сообщения */
.hero__route-text {
  width: 213.4px;
  font-family: 'Geologica', sans-serif;
  font-weight: 500;
  font-size: 15.87px;
  line-height: 20px;
  color: #000000;
}

/* Смена сообщений: уходит вверх с затуханием, приходит снизу */
.hero__route-tag,
.hero__route-text {
  transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero__route-card.is-swap .hero__route-tag,
.hero__route-card.is-swap .hero__route-text {
  opacity: 0;
  transform: translateY(-7px);
}

/* Кнопки */
.hero__btn {
  position: absolute;
  top: 512.33px;
  height: 49.38px;
  border-radius: 35.27px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geologica', sans-serif;
  font-weight: 500;
  font-size: 15.87px;
  line-height: 20px;
  z-index: 2;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.hero__btn:hover { opacity: 0.85; }

/* Оставить заявку: left 84.65, width 177.24 */
.hero__btn--white {
  left: 84.65px;
  width: 177.24px;
  background: #ffffff;
  color: #000000;
}

/* Наши преподаватели: left 301.58, width 292.76 */
.hero__btn--ghost {
  left: 301.58px;
  width: 292.76px;
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
}

/* Прямоугольники — матовое стекло */
.hero__rect {
  position: absolute;
  top: 582px;
  width: 177.24px;
  height: 146.38px;
  border-radius: 35.27px;
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1;
}

/* Числа статистики */
.hero__stat-num {
  position: absolute;
  top: 604.92px;
  height: 39px;
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  font-size: 32.72px;
  line-height: 39px;
  color: #ffffff;
  z-index: 2;
  white-space: nowrap;
}

/* Описания статистики */
.hero__stat-desc {
  position: absolute;
  top: 652.54px;
  width: 134.92px;
  font-family: 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 10.58px;
  line-height: 13px;
  color: #ffffff;
  z-index: 2;
}

/* Заголовок — flex-колонка, позиция из Figma */
.hero__title {
  position: absolute;
  top: 98px;
  left: 45px;
  display: flex;
  flex-direction: column;
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  color: #ffffff;
}

/* ТВОИ ЗАНАНИЯ — 96px, lh 87%, w 737 */
.hero__t1 {
  display: block;
  width: 700px;
  font-size: 96px;
  line-height: 0.87;
}

/* В ПРАВИЛЬНЫХ — 75px, lh 100%, w 817, смещение -149px, right */
.hero__t2 {
  display: block;
  position: relative;
  left: -192px;
  width: 817px;
  font-size: 75px;
  line-height: 1.0;
  text-align: right;
}

/* РУКАХ — 75px, lh 100%, w 817, смещение -248px, right */
.hero__t3 {
  display: block;
  position: relative;
  left: -288px;
  width: 817px;
  font-size: 75px;
  line-height: 1.0;
  text-align: right;
}

/* ===== MENTORS / НАСТАВНИКИ ===== */
.mentors {
  position: relative;
  height: 880px;
}

/* Градиентная карточка (Rectangle 448) */
.mentors__card {
  position: absolute;
  width: 1408px;
  height: 700px;
  left: 256px;
  top: 0;
  background: linear-gradient(149.51deg, #7663F2 15.46%, #2200FF 84.54%);
  border-radius: 50px;
}

/* Белая пилюля под заголовок (Rectangle 370) */
.mentors__title-pill,
.mentors__title {
  z-index: 4;
}
.mentors__title-pill {
  position: absolute;
  width: 710px;
  height: 69px;
  left: 605px;
  top: 43px;
  background: #FFFFFF;
  border-radius: 49px;
}

/* Заголовок «Выбери своего наставника!» */
.mentors__title {
  position: absolute;
  width: 677px;
  left: calc(50% - 677px / 2 + 5.5px);
  top: 48px;
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: 46.7692px;
  line-height: 58px;
  color: #5941F2;
  text-align: center;
}

/* Белый круг «?» (Ellipse 48) */
.mentors__qcircle {
  position: absolute;
  width: 70px;
  height: 70px;
  left: 1516px;
  top: 42px;    /* 3816 − 3774 */
  background: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.mentors__qmark {
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: 46.7692px;
  line-height: 1;
  color: #5941F2;
}

/* Кнопка «Больше» (Rectangle 452) */
.mentors__more {
  position: absolute;
  width: 120px;
  height: 21px;
  left: 900px;
  top: 600px;
  background: #F5F5F5;
  border-radius: 28px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mentors__more:hover {
  background: #e8e8e8;
}

.mentors__more-text {
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  color: #2402FF;
}

/* Кнопки-навигаторы (Rectangle 450/451) */
.mentors__nav {
  box-sizing: border-box;
  position: absolute;
  width: 41px;
  height: 440px;
  top: 155px;
  background: transparent;
  border: 3px solid #FFFFFF;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 5;
}

.mentors__nav:hover {
  background: rgba(255, 255, 255, 0.12);
}

.mentors__nav--left  { left: 324px;  }
.mentors__nav--right { left: 1559px; }

/* Стрелки-треугольники (Polygon 1/2) */
.mentors__nav-arrow {
  display: block;
  width: 22px;
  height: 22px;
  background: #FFFFFF;
  flex-shrink: 0;
}

/* Левая стрелка ◁ — вершина слева */
.mentors__nav-arrow--left {
  clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
}

/* Правая стрелка ▷ — вершина справа */
.mentors__nav-arrow--right {
  clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
}

/* ——— Фото-карточки наставников ——— */
.mentors__photo {
  box-sizing: border-box;
  position: absolute;
  width: 210px;
  height: 264px;
  top: 193px;   /* 3967 − 3774 = 193px */
  border: 8px solid #7360EB;
  border-radius: 26px;
  overflow: hidden;
  z-index: 2;
}

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

/* Сдвиг фото на 9px влево по Figma */
.mentors__photo--41 { left: 445px;  }
.mentors__photo--42 { left: 712px;  }
.mentors__photo--43 { left: 979px;  }
.mentors__photo--44 { left: 1246px; }

/* ——— Крылья вокруг фото (Vector 904 shape) ——— */
/*
   Vector 904 path (35×107): (0,26.58)→(35,0)→(35,107)→(0,80.42)
   As %-clip-path:
     LEFT  (35×107): polygon(0% 24.84%, 100% 0%, 100% 100%, 0% 75.16%)
     RIGHT (35×107): mirror X
     TOP   (107×35): -90° CCW rotation of shape → polygon(75.16% 0%, 100% 100%, 0% 100%, 24.84% 0%)
     BOTTOM(107×35): +90° CW  rotation of shape → polygon(0% 0%, 100% 0%, 75.16% 100%, 24.84% 100%)

   Each wing overlaps the photo border by exactly 8px (= border-width),
   so the overlap is hidden behind the photo (z-index 2 > wing z-index 1).
*/
.mentors__wing {
  position: absolute;
  background: #ABA0F2;
  z-index: 1;   /* behind photo (z-index:2) — overlap portion is hidden */
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mentors__wing-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  /* shift icon toward the wider (base) edge so it's visually centered */
  position: relative;
  z-index: 2;
}

/* TOP: 107×35, wide bottom at photo_top + 8px overlap, points up */
.mentors__wing-top {
  width: 107px;
  height: 35px;
  top: 166px;   /* 3929−3763=166; bottom=201, photo top=193 → 8px overlap */
  clip-path: polygon(75.16% 0%, 100% 100%, 0% 100%, 24.84% 0%);
}
.mentors__wing-top--1 { left: 496px;  }
.mentors__wing-top--2 { left: 763px;  }
.mentors__wing-top--3 { left: 1030px; }
.mentors__wing-top--4 { left: 1297px; }

/* BOTTOM: 107×35, wide top at nameplate_bottom − 8px, points down */
.mentors__wing-bottom {
  width: 107px;
  height: 35px;
  top: 471px;   /* 4234−3763=471; nameplate bottom=479 → 8px overlap */
  clip-path: polygon(0% 0%, 100% 0%, 75.16% 100%, 24.84% 100%);
}
.mentors__wing-bottom--1 { left: 496px;  }
.mentors__wing-bottom--2 { left: 763px;  }
.mentors__wing-bottom--3 { left: 1030px; }
.mentors__wing-bottom--4 { left: 1297px; }

/* LEFT: 35×107, wide right at photo_left − 27px, 8px behind photo */
.mentors__wing-left {
  width: 35px;
  height: 107px;
  top: 283px;   /* 4046−3763=283 */
  clip-path: polygon(0% 24.84%, 100% 0%, 100% 100%, 0% 75.16%);
}
.mentors__wing-left--1 { left: 418px;  }  /* 445−35+8=418 */
.mentors__wing-left--2 { left: 685px;  }
.mentors__wing-left--3 { left: 952px;  }
.mentors__wing-left--4 { left: 1219px; }

/* RIGHT: 35×107, wide left at photo_right − 8px, points right */
.mentors__wing-right {
  width: 35px;
  height: 107px;
  top: 283px;
  clip-path: polygon(100% 24.84%, 0% 0%, 0% 100%, 100% 75.16%);
}
.mentors__wing-right--1 { left: 647px;  }  /* 445+210−8=647 */
.mentors__wing-right--2 { left: 914px;  }
.mentors__wing-right--3 { left: 1181px; }
.mentors__wing-right--4 { left: 1448px; }

/* ——— Таблички с именами внизу фото ——— */
.mentors__nameplate {
  position: absolute;
  width: 210px;
  height: 64px;
  top: 415px;   /* 4178−3763=415 */
  background: #F2F2F2;
  /* border-top = separator line between photo and name (as requested) */
  border: 8px solid #7360EB;
  border-radius: 0 0 26.1px 26.1px;
  box-sizing: border-box;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mentors__nameplate-text {
  font-family: 'Geologica', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 21px;
  color: #7360EB;
  text-align: center;
}

.mentors__nameplate--1 { left: 445px;  }
.mentors__nameplate--2 { left: 712px;  }
.mentors__nameplate--3 { left: 979px;  }
.mentors__nameplate--4 { left: 1246px; }

/* ===== MENTORS — GRID PANEL (разворачивается по «Больше») ===== */

/* Секция: плавное расширение */
.mentors {
  transition: height 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Grid-панель: по умолчанию скрыта */
.mentors__grid-panel {
  position: absolute;
  left: 256px;
  top: 0;
  width: 1408px;
  /* 4 ряда × 420px + 3 × 34px отступов + 148px сверху + запас снизу */
  height: 1992px;
  background: linear-gradient(149.51deg, #7663F2 15.46%, #2200FF 84.54%);
  border-radius: 50px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 1;
}

/* Развёрнутое состояние */
.mentors--expanded {
  height: 2172px;
}

.mentors--expanded .mentors__grid-panel {
  opacity: 1;
  pointer-events: all;
}

/* Скрываем карусель при разворачивании */
.mentors--expanded .mentors__card,
.mentors--expanded .mentors__photo,
.mentors--expanded .mentors__slider,
.mentors--expanded .mentors__nav,
.mentors--expanded .mentors__wing,
.mentors--expanded .mentors__nameplate,
.mentors--expanded .mentors__tagline {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* В развёрнутом виде управление одно — кнопка «Свернуть список» ниже сетки,
   дублирующая ссылка «Все наставники» прячется */
.mentors--expanded .mentors__more {
  opacity: 0;
  pointer-events: none;
}

/* ——— Декоративные векторы секции наставников ——— */
.mentors__v86,
.mentors__v85 {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* Vector 86 — справа */
.mentors__v86 {
  width: 990.14px;
  height: 955.5px;
  left: 1240px;
  top: 83px;
  opacity: 0.46;
}

/* Vector 85 — слева */
.mentors__v85 {
  width: 554.28px;
  height: 690.65px;
  left: -190px;
  top: -142px;
  opacity: 0.46;
}

/* Секция не обрезает векторы + плавный переход от белого блока тарифов */
.mentors {
  overflow: visible;
  background: linear-gradient(to bottom, #FFFFFF 0px, #F2F2F2 60px, #F2F2F2 100%);
}

.mentors__slider {
  position: absolute;
  left: 429px;
  top: 140px;
  width: 1062px;
  /* 420px карточки × 1.06 у активной (и 1.1 на ховере) не помещались в 440 —
     низ центральной карточки срезался, и выглядело это как будто её режет
     кнопка «Подобрать репетитора». */
  height: 474px;
  overflow: hidden;
  z-index: 3;
  user-select: none;
  -webkit-user-select: none;
}

.mentors__track {
  display: flex;
  gap: 112px;
  padding-top: 22px;
  padding-left: 20px;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ——— Карточка преподавателя (tcard) ———
   Один в один с мобильной: белый паттерн со школьными иконками — фон
   карточки, фото сверху, внизу белая панель с отступом 12px, чтобы
   паттерн читался рамкой. */
.tcard {
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 266px;
  height: 420px;
  /* Паттерн живёт только в зоне фото (.tcard::before). Раньше он был ещё и
     на всей карточке, другого масштаба — на границе читались два разных фона. */
  background: #FFFFFF;
  border-radius: 24.9375px;
  box-shadow: 0 8px 20px rgba(20, 8, 90, 0.18);
  overflow: hidden;
  cursor: pointer;
}
.tcard > * { position: absolute; }

.tcard__photo {
  width: 266px;
  height: 216px;
  left: 0;
  top: 0;
  object-fit: cover;
  object-position: center top;
  border-radius: 24.9375px 24.9375px 0 0;
  display: block;
  /* Маску растворения убрали: снимки и так вырезаны по контуру, а полупрозрачный
     низ кадра просвечивал паттерном прямо по человеку. */
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Зона под фото: там паттерн крупный и хорошо заметный, плюс еле уловимая
   подсветка под предмет, который ведёт преподаватель. Ниже, под именем и
   плашками, остаётся только слабый паттерн самой карточки. */
.tcard::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 216px;
  z-index: 0;
  background:
    linear-gradient(180deg, var(--subj, rgba(89, 65, 242, 0.10)) 0%, rgba(255, 255, 255, 0) 78%),
    url('../icons/card-pattern-strong.svg') repeat;
  background-size: auto, 138px 138px;
  border-radius: 24.9375px 24.9375px 0 0;
  pointer-events: none;
}
.tcard__photo { z-index: 1; }
.tcard[data-subj="Математика"]     { --subj: rgba(89, 65, 242, 0.14); }
.tcard[data-subj="Русский язык"]   { --subj: rgba(226, 85, 122, 0.13); }
.tcard[data-subj="Физика"]         { --subj: rgba(46, 139, 242, 0.14); }
.tcard[data-subj="Информатика"]    { --subj: rgba(23, 179, 163, 0.13); }
.tcard[data-subj="Обществознание"] { --subj: rgba(242, 160, 61, 0.15); }
.tcard:hover .tcard__photo { transform: scale(1.04); }

/* Кадр Элины: 34% поднимали её слишком высоко — голова упиралась в верх
   карточки. 12% опускает снимок обратно, оставляя воздух над головой. */
.tcard__photo[src*="elina"] { object-position: center 12%; }

/* Катя, Ангелина и София Е. сняты крупным планом: при кропе «cover» в широкую
   зону 266×216 от них оставалась одна голова. Показываем кадр целиком —
   он вписывается по высоте, по бокам остаётся паттерн карточки. */
.tcard__photo[src*="ekaterina"],
.tcard__photo[src*="angelina"],
.tcard__photo[src*="sofia-e"] {
  object-fit: contain;
  object-position: center bottom;
}

/* Фото Александра снято крупным планом: при 50% кроп срезал макушку.
   Опускаем кадр в рамке (меньше процент — человек ниже), чтобы голова
   помещалась целиком. */
.tcard__photo[src*="alexander"] { object-position: center 10%; }

.tcard__body {
  left: 12px;
  top: 222px;
  width: 242px;
  height: 188px;
  background: #FFFFFF;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tcard__name {
  position: static;
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 23px;
  text-align: center;
  color: #2402FF;
}

.tcard__tags {
  position: static;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 7px;
}

.tcard__tag {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  border: 1.6px solid #5941F2;
  border-radius: 52.6549px;
  background: #FFFFFF;
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  line-height: 16px;
  white-space: nowrap;
  color: #5941F2;
}

.tcard__stats {
  position: static;
  width: 232px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.tcard__stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 20px;
  color: #2402FF;
}
.tcard__stat--exp { font-size: 12.5px; line-height: 15px; font-weight: 500; }
.tcard__stat img { display: block; }
.tcard__stat--rate img { width: 19px; height: 19px; }
.tcard__stat--exp img { width: 17.4px; height: 14px; }

.tcard__note {
  position: static;
  font-family: 'Geologica', sans-serif;
  font-weight: 500; font-size: 12px; line-height: 15px;
  color: #7B69F3;
  text-align: center;
}

/* Состояния карусели */
.tcard {
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease, filter 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Центральная — крупнее и в фокусе (как активный слайд на телефоне) */
.tcard--active {
  transform: scale(1.06);
  opacity: 1;
  box-shadow: 0 16px 38px rgba(20, 8, 90, 0.32);
  z-index: 2;
}
.tcard--active:hover {
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 22px 50px rgba(20, 8, 90, 0.38);
}

/* Боковые — мельче и приглушены прозрачностью.
   Grayscale-фильтр убран: он мутил белый паттерн карточки. */
.tcard--dim {
  opacity: 0.5;
  transform: scale(0.88);
}
.tcard--dim:hover {
  opacity: 0.9;
  transform: scale(0.94) translateY(-5px);
  box-shadow: 0 14px 34px rgba(20, 8, 90, 0.24);
  z-index: 3;
}

/* Подпись под синим блоком */
.mentors__tagline {
  position: absolute;
  width: 579px;
  left: calc(50% - 579px / 2 - 0.5px);
  top: 726px;
  font-family: 'Geologica', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
  text-align: center;
  color: #000000;
  z-index: 4;
}

/* Кнопка фильтра (слева от заголовка) */
.mentors__filtercircle {
  position: absolute;
  width: 70px;
  height: 70px;
  left: 395px;
  top: 42px;
  background: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
  transition: background 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mentors__filtercircle:hover {
  background: #f0eeff;
}

/* ——— Сетка «Все наставники» внутри развёрнутой панели ——— */
.mentors__grid {
  position: absolute;
  left: 60px;
  top: 148px;
  width: 1288px;
  display: grid;
  grid-template-columns: repeat(4, 266px);
  justify-content: space-between;
  gap: 34px 0;
}
.mentors__grid .tcard { cursor: pointer; }
/* в сетке состояния карусели не нужны */
.mentors__grid .tcard--active,
.mentors__grid .tcard--dim {
  transform: none;
  opacity: 1;
  filter: none;
  box-shadow: 0 0 0 2px #D6CFFA;
}
.mentors__grid .tcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 2.5px #FFFFFF, 0 16px 40px rgba(0, 0, 0, 0.28);
}

/* высота панели считается от числа рядов — задаём с запасом под 14 карточек */
/* Это правило перебивает высоту, заданную выше: при 15 наставниках сетка
   заканчивается на 1930px, и на 1822px последний ряд торчал из панели. */
.mentors__grid-panel { height: 1990px; min-height: 0; }

/* ——— Счётчик активного фильтра на кнопке ——— */
.mentors__filtercircle { position: absolute; border: none; padding: 0; }
.mentors__fcount {
  position: absolute;
  right: -4px; top: -4px;
  min-width: 24px; height: 24px;
  padding: 0 6px;
  display: none;
  align-items: center; justify-content: center;
  border-radius: 12px;
  background: #2402FF;
  font-family: 'Geologica', sans-serif;
  font-weight: 700; font-size: 12px; line-height: 15px;
  color: #FFFFFF;
}
.mentors__filtercircle.has-filter .mentors__fcount { display: flex; }

.mentors__qcircle { border: none; padding: 0; cursor: pointer; transition: transform 0.3s cubic-bezier(0.22,0.61,0.36,1), background 0.25s ease; }
.mentors__qcircle:hover,
.mentors__filtercircle:hover { transform: scale(1.07); }

/* «По этому предмету пока нет наставников» */
.mentors__empty {
  position: absolute;
  left: 429px; top: 330px; width: 1062px;
  text-align: center;
  font-family: 'Geologica', sans-serif;
  font-weight: 500; font-size: 22px; line-height: 28px;
  color: #FFFFFF;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 4;
}
.mentors__empty.is-on { opacity: 1; }

/* Стрелки: гасим на краях вместо inline-стилей */
.mentors__nav { transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22,0.61,0.36,1), background 0.25s ease; }
.mentors__nav.is-off { opacity: 0.35; }

/* ——— CTA «Подобрать репетитора» ——— */
.mentors__cta {
  position: absolute;
  left: calc(50% - 152px);
  top: 622px;
  width: 304px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: none;
  border-radius: 31px;
  background: #FFFFFF;
  font-family: 'Geologica', sans-serif;
  font-weight: 600; font-size: 18px; line-height: 22px;
  color: #2402FF;
  cursor: pointer;
  z-index: 6;
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.6);
  transition: transform 0.35s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.35s ease;
}
.mentors__cta svg { width: 22px; height: 22px; transition: transform 0.4s cubic-bezier(0.22,0.61,0.36,1); }
/* развёрнутый список — стрелка смотрит вверх */
.mentors__cta.is-open svg { transform: rotate(-90deg); }
.mentors__cta:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.7); }
.mentors__cta:hover svg { transform: translateX(3px); }

.mentors__more { top: 826px; left: calc(50% - 78px); width: 156px; height: 34px; }
.mentors--expanded .mentors__cta { top: 2048px; z-index: 10; }

/* ══════════════ Модалки наставников ══════════════ */
.mov {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}
.mov.is-open { opacity: 1; pointer-events: auto; }
.mov__bd { position: absolute; inset: 0; background: rgba(9, 4, 120, 0.6); }

.mov__card {
  position: relative;
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 32px;
  box-shadow: 0 40px 90px -30px rgba(9, 4, 120, 0.7);
  transform: translateY(26px) scale(0.97);
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.32s ease;
  font-family: 'Geologica', sans-serif;
}
.mov.is-open .mov__card { transform: none; opacity: 1; }

.mov__card--narrow { width: 620px; max-height: 82vh; overflow-y: auto; padding: 30px 34px 34px; }

.mov__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mov__title { font-weight: 700; font-size: 26px; line-height: 32px; color: #14102E; }
.mov__x {
  flex: none;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: #EDEAFB; color: #5941F2;
  font-size: 17px; line-height: 1; cursor: pointer;
  transition: background 0.38s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mov__x:hover { background: #DCD6FA; transform: rotate(90deg); }
.mov__x--float { position: absolute; right: 20px; top: 20px; z-index: 3; background: #FFFFFF; }

.mov__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.mov__chip {
  height: 44px; padding: 0 20px;
  border: 1.5px solid #DAD5F6; border-radius: 22px;
  background: #FFFFFF;
  font-family: inherit; font-weight: 500; font-size: 15px; line-height: 18px;
  color: #5941F2; cursor: pointer;
  transition: background 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mov__chip:hover { border-color: #5941F2; }
.mov__chip.is-on { background: #5941F2; border-color: #5941F2; color: #FFFFFF; }
.mov__hint { margin-top: 18px; font-weight: 400; font-size: 15px; line-height: 20px; color: #6B6880; }

.mov__steps { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.mov__step { display: flex; gap: 14px; }
.mov__step-n {
  flex: none; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #EDEAFB;
  font-weight: 700; font-size: 16px; color: #5941F2;
}
.mov__step p { font-weight: 400; font-size: 16px; line-height: 22px; color: #3C3A56; }
.mov__step b { font-weight: 600; color: #14102E; }
.mov__ok {
  margin-top: 26px; width: 100%; height: 56px;
  border: none; border-radius: 28px;
  background: #5941F2; color: #FFFFFF;
  font-family: inherit; font-weight: 600; font-size: 17px;
  cursor: pointer;
  transition: background 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mov__ok:hover { background: #2402FF; }

/* ——— Профиль наставника ———
   Горизонтальная фиолетовая карточка: слева человек на БЕЛОЙ подложке
   (снимки — вырезки с прозрачным фоном), справа текстовый столбец.
   Раскладка потоковая (flex), а не абсолютная: описания у преподавателей
   разной длины, и на фиксированных координатах текст обрезался. */
.mov__card--mentor {
  width: min(1040px, 94vw);
  max-height: 90vh;
  min-height: 560px;
  padding: 0;
  border-radius: 44px;
  background: linear-gradient(134deg, #6E57F6 0%, #5B3DF2 58%, #4B2FE8 100%);
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.mcard__ph {
  position: relative;
  flex: none;
  width: 380px;
  margin: 26px 0 26px 26px;
  border-radius: 32px;
  background: #FFFFFF;
  overflow: hidden;
}
/* absolute — иначе height:100% у img разрешается в auto (высота панели тоже
   auto), картинка отдаёт свою натуральную высоту и раздувает карточку */
.mcard__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
  display: block;
}

.mcard__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 52px 52px 44px 44px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.mcard__close {
  position: absolute;
  right: 26px; top: 26px;
  width: 54px; height: 54px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  font-family: 'Geologica', sans-serif;
  font-weight: 700; font-size: 26px; line-height: 54px;
  cursor: pointer;
  z-index: 4;
  transition: background 0.3s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mcard__close:hover { background: rgba(255, 255, 255, 0.32); transform: rotate(90deg); }

.mcard__name {
  padding-right: 70px;
  font-family: 'Geologica', sans-serif;
  font-weight: 700; font-size: 40px; line-height: 46px;
  color: #FFFFFF;
}

.mcard__stats {
  display: flex; align-items: center; gap: 30px;
  flex-wrap: wrap;
}
.mcard__stat {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Geologica', sans-serif;
  font-weight: 700; font-size: 23px; line-height: 24px;
  color: #FFFFFF;
}
.mcard__stat--exp { font-size: 17.5px; line-height: 18px; }
.mcard__stat img { display: block; filter: brightness(0) invert(1); }
.mcard__stat--rate img { width: 24px; height: 24px; }
.mcard__stat--exp img { width: 22.4px; height: 18px; }

.mcard__note {
  font-family: 'Geologica', sans-serif;
  font-weight: 500; font-size: 16px; line-height: 20px;
  color: #D6CEFF;
}

.mcard__desc {
  font-family: 'Geologica', sans-serif;
  font-weight: 400; font-size: 20px; line-height: 28px;
  color: rgba(255, 255, 255, 0.92);
}

.mcard__tags {
  display: flex; flex-wrap: wrap;
  gap: 10px;
}
.mcard__tag {
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  height: 40px;
  padding: 0 18px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 70px;
  font-family: 'Rubik', sans-serif;
  font-weight: 700; font-size: 16.6px; line-height: 20px;
  white-space: nowrap;
  color: #FFFFFF;
  background: transparent;
}

.mcard__cta {
  box-sizing: border-box;
  align-self: flex-start;
  margin-top: auto;
  display: flex; align-items: center; justify-content: center;
  min-width: 219px; height: 68px;
  padding: 0 34px;
  background: #FFFFFF;
  border: none;
  border-radius: 70px;
  box-shadow: 0 14px 30px -14px rgba(12, 4, 70, 0.65);
  font-family: 'Geologica', sans-serif;
  font-weight: 700; font-size: 22px; line-height: 25px;
  color: #4B2FE8;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mcard__cta:hover { background: #EDEAFB; transform: translateY(-3px); }

/* На узких/низких экранах карточка складывается в столбец */
@media (max-width: 900px), (max-height: 620px) {
  .mov__card--mentor { flex-direction: column; min-height: 0; }
  .mcard__ph { width: auto; height: 300px; margin: 20px 20px 0; }
  .mcard__photo { object-position: center 6%; }
  .mcard__body { padding: 26px 28px 30px; }
  .mcard__name { font-size: 30px; line-height: 34px; }
  .mcard__desc { font-size: 17px; line-height: 24px; }
  .mcard__cta { margin-top: 8px; height: 58px; font-size: 19px; }
}

/* ══════════════════ ОТЗЫВЫ ══════════════════ */
.reviews {
  position: relative;
  height: 1640px;
  margin-top: 40px;
  margin-bottom: 40px;
}

/* ——— Фон секции: иконки + завитушки ———
   Иконки тайлятся тем же паттерном, что и карточки преподавателей.
   Маска гасит их у верхней и нижней границы, чтобы стык секций
   оставался чистым, а под текстом отзывов паттерн не мешал читать. */
.reviews__pattern {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url('../icons/card-pattern.svg') repeat;
  background-size: 210px 210px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom,
     rgba(0,0,0,0) 0px, rgba(0,0,0,1) 220px,
     rgba(0,0,0,1) calc(100% - 200px), rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom,
     rgba(0,0,0,0) 0px, rgba(0,0,0,1) 220px,
     rgba(0,0,0,1) calc(100% - 200px), rgba(0,0,0,0) 100%);
}

/* Завитушки: часть намеренно уходит за края холста */
.reviews__vec {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* слева вверху, заходит под первый столбец кружков */
.reviews__vec--1 {
  left: -272px;
  top: 96px;
  width: 777px;
  opacity: 0.3;
  transform: translateY(var(--py, 0px)) rotate(-6deg);
}

/* справа, между видео и текстовыми отзывами */
.reviews__vec--2 {
  left: 1512px;
  top: 640px;
  width: 691px;
  opacity: 0.26;
  transform: translateY(var(--py, 0px));
}

/* слева внизу — уводит взгляд в блок «О нас» */
.reviews__vec--3 {
  left: -168px;
  top: 1108px;
  width: 516px;
  opacity: 0.24;
  transform: translateY(var(--py, 0px)) scaleX(-1) rotate(8deg);
}

/* --py задаёт скрипт параллакса; will-change держит слой на GPU */
.reviews__vec { will-change: transform; }

/* Фиолетовая пилюля (Rectangle 455) */
.reviews__title-pill {
  position: absolute;
  width: 301px;
  height: 69px;
  left: calc(50% - 301px / 2);
  top: 64px;
  background: #5941F2;
  border-radius: 49.0485px;
  z-index: 2;
}

/* Заголовок «Отзывы!» */
.reviews__title {
  position: absolute;
  width: 230px;
  left: calc(50% - 230px / 2 + 12px);
  top: 69px;
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: 46.7692px;
  line-height: 58px;
  color: #FFFFFF;
  text-align: center;
  z-index: 3;
}

.reviews__sub {
  position: absolute;
  width: 900px;
  left: calc(50% - 450px);
  top: 156px;
  font-family: 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 27px;
  text-align: center;
  color: #5C5A6E;
  z-index: 2;
}

/* ——— Сетка видео-отзывов 3×2 ——— */
.reviews__grid {
  position: absolute;
  left: 256px;
  top: 244px;
  width: 1408px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 74px 60px;
  z-index: 2;
}

.rcard {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ——— Превью: круглый кадр в градиентном кольце ——— */
.rcard__media {
  position: relative;
  width: 320px;
  height: 320px;
  padding: 0;
  border: none;
  border-radius: 50%;
  /* кольцо = градиентная подложка, видимая в зазоре 5px вокруг видео */
  background: linear-gradient(145deg, #9587F2 0%, #5941F2 46%, #2402FF 100%);
  cursor: pointer;
  overflow: visible;
  box-shadow: 0 24px 50px -24px rgba(43, 27, 158, 0.55);
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rcard__media:hover {
  transform: translateY(-9px);
  box-shadow: 0 36px 70px -22px rgba(43, 27, 158, 0.68),
              0 0 0 1px rgba(89, 65, 242, 0.18);
}

.rcard__loop {
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 0;
  /* размер задаём явно: у <video> (replaced element) width:auto берёт
     натуральный размер кадра, а не считается из inset — видео вылезало */
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border-radius: 50%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rcard__media:hover .rcard__loop { transform: scale(1.05); }

/* Тонкая внешняя дуга: две части окружности, медленно вращаются.
   Живее сплошной обводки и не бьёт по глазам. */
.rcard__ring {
  position: absolute;
  inset: -16px;
  z-index: 1;
  border-radius: 50%;
  border: 1.6px solid transparent;
  border-top-color: rgba(118, 99, 242, 0.5);
  border-bottom-color: rgba(118, 99, 242, 0.5);
  pointer-events: none;
  animation: rcardSpin 26s linear infinite;
  transition: border-color 0.5s ease;
}
.rcard__media:hover .rcard__ring {
  border-top-color: #5941F2;
  border-bottom-color: #5941F2;
}

@keyframes rcardSpin { to { transform: rotate(360deg); } }

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

/* Кнопка play по центру: стекло с тёмной подложкой — читается на любом кадре */
.rcard__sound {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(20, 16, 46, 0.32);
  border: 1.6px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 22px -8px rgba(20, 16, 46, 0.5);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #FFFFFF;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              background 0.4s ease, border-color 0.4s ease;
}
.rcard__sound svg { width: 27px; height: 27px; margin-left: 3px; }
.rcard__media:hover .rcard__sound {
  transform: scale(1.1);
  background: rgba(89, 65, 242, 0.85);
  border-color: #FFFFFF;
}

.rcard__head {
  margin-top: 20px;
  max-width: 340px;
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  text-align: center;
  color: #14102E;
}
.rcard__text {
  margin-top: 8px;
  max-width: 340px;
  font-family: 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  color: #6B6880;
}

/* ——— Текстовые отзывы ——— */
.reviews__mlabel {
  position: absolute;
  left: calc(50% - 450px);
  top: 1252px;
  width: 900px;
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
  text-align: center;
  color: #14102E;
  z-index: 2;
}

.reviews__msgs {
  position: absolute;
  left: 256px;
  top: 1330px;
  width: 1408px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  z-index: 2;
}

.rmsg {
  box-sizing: border-box;
  margin: 0;
  padding: 26px 26px 28px;
  background: #FFFFFF;
  border-radius: 26px;
  box-shadow: 0 18px 44px -22px rgba(43, 27, 158, 0.4);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.5s ease;
}
.rmsg:hover { transform: translateY(-8px); box-shadow: 0 28px 58px -24px rgba(43, 27, 158, 0.55); }

.rmsg__head { display: flex; align-items: center; gap: 13px; }
.rmsg__ava {
  flex: none;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #EDEAFB;
  font-family: 'Geologica', sans-serif;
  font-weight: 700; font-size: 20px; color: #5941F2;
}
.rmsg__who {
  display: flex; flex-direction: column;
  font-family: 'Geologica', sans-serif;
  font-weight: 700; font-size: 18px; line-height: 22px; color: #14102E;
}
.rmsg__who i { font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; color: #8B88A0; }
.rmsg__text {
  margin-top: 16px;
  font-family: 'Geologica', sans-serif;
  font-weight: 400; font-size: 15.5px; line-height: 23px;
  color: #3C3A56;
}

/* ——— Модалка просмотра видео со звуком ——— */
.rvid {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.rvid.is-open { opacity: 1; pointer-events: auto; }
.rvid__bd { position: absolute; inset: 0; background: rgba(9, 4, 120, 0.75); }
.rvid__box {
  position: relative;
  transform: scale(0.96);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rvid.is-open .rvid__box { transform: none; }
.rvid__player {
  max-width: 82vw;
  max-height: 82vh;
  border-radius: 24px;
  background: #000000;
  display: block;
}
.rvid__x {
  position: absolute;
  right: -20px; top: -20px;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: #FFFFFF; color: #5941F2;
  font-size: 19px; cursor: pointer;
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rvid__x:hover { transform: rotate(90deg); }

/* ===================================================
   О НАС (новый блок)
   =================================================== */
.about-us {
  position: relative;
  height: 700px;
}

/* Декоративная кривая (Vector 88) */
.about-us__v88 {
  position: absolute;
  width: 990.14px;
  height: 955.5px;
  left: 1378.37px;
  top: -11.66px;
  transform: rotate(6.36deg);
  z-index: 0;
  pointer-events: none;
}

/* Фоновые градиентные круги справа (Ellipse 188/189) */
.about-us__blob {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
}

.about-us__blob--189 {
  width: 632px;
  height: 632px;
  left: 1004px;
  top: 0px;
  background: radial-gradient(50% 50% at 50% 50%, #7663F2 85.1%, rgba(118, 99, 242, 0) 100%);
}

.about-us__blob--188 {
  width: 560px;
  height: 560px;
  left: 1040px;
  top: 36px;
  background: linear-gradient(180deg, #9587F2 0%, #5941F2 69.71%);
}

/* Заголовок «О НАС» */
.about-us__heading {
  position: absolute;
  width: 339px;
  left: calc(50% - 610px);
  top: 53px;
  font-family: 'Geologica', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 64px;
  line-height: 80px;
  color: #000000;
  margin: 0;
  z-index: 1;
}

/* Подзаголовок */
.about-us__desc {
  position: absolute;
  width: 419px;
  left: calc(50% - 610px);
  top: 150px;
  font-family: 'Geologica', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  color: #000000;
  margin: 0;
  z-index: 1;
}

/* Плитки-цифры (бенто, как в мобильной версии) */
.about-us__bento {
  position: absolute;
  left: calc(50% - 610px);
  top: 236px;
  width: 626px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  z-index: 1;
}

.abtile {
  box-sizing: border-box;
  min-height: 152px;
  padding: 22px 24px 24px;
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  font-family: 'Geologica', sans-serif;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.45s ease;
}
.about-us.is-in .abtile { opacity: 1; transform: none; }
.about-us.is-in .abtile:nth-child(1) { transition-delay: 0.05s; }
.about-us.is-in .abtile:nth-child(2) { transition-delay: 0.14s; }
.about-us.is-in .abtile:nth-child(3) { transition-delay: 0.23s; }
.about-us.is-in .abtile:nth-child(4) { transition-delay: 0.32s; }
.abtile:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(43, 27, 158, 0.55); }

.abtile--lilac  { background: #EDEBF9; color: #14102E; }
.abtile--violet { background: linear-gradient(160deg, #7663F2 0%, #5941F2 100%); color: #FFFFFF; }

.abtile__ico {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #7663F2;
  margin-bottom: 12px;
}
.abtile--violet .abtile__ico { background: rgba(255, 255, 255, 0.2); }

.abtile b {
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: #5941F2;
}
.abtile--violet b { color: #FFFFFF; }
.abtile span:last-child {
  margin-top: 4px;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: #5C5A6E;
}
.abtile--violet span:last-child { color: rgba(255, 255, 255, 0.86); }

/* Фото преподавателя (image 41) */
.about-us__photo {
  position: absolute;
  width: 400px;
  height: 548px;
  left: 1120px;
  top: 69px;
  object-fit: cover;
  border-radius: 26.1009px;
  z-index: 1;
}

/* Аватар-бейдж поверх фото (Ellipse 206 + Ellipse 14 + Vector 61/62) */
.about-us__avatar-bg {
  box-sizing: border-box;
  position: absolute;
  width: 138px;
  height: 138px;
  left: 1038px;
  top: 104px;
  background: #7663F2;
  border: 4.45161px solid #ABA0F2;
  border-radius: 50%;
  z-index: 2;
}

.about-us__avatar-ring {
  box-sizing: border-box;
  position: absolute;
  width: 109.03px;
  height: 109.03px;
  left: 1052.47px;
  top: 118.47px;
  border: 5.20829px solid #FFFFFF;
  border-radius: 50%;
  z-index: 3;
}

.about-us__avatar-v61 {
  position: absolute;
  width: 58.08px;
  height: 50.67px;
  left: 1078.01px;
  top: 147.71px;
  z-index: 4;
}

.about-us__avatar-v62 {
  position: absolute;
  width: 21.53px;
  height: 21.77px;
  left: 1116.78px;
  top: 147.71px;
  z-index: 4;
}

/* Сетка точек 4×4 под фото (Ellipse 190-205) */
.about-us__dots {
  position: absolute;
  left: 1075px;
  top: 506px;
  display: grid;
  grid-template-columns: repeat(4, 9px);
  grid-template-rows: repeat(4, 9px);
  column-gap: 23px;
  row-gap: 11px;
  z-index: 1;
}

.about-us__dot {
  width: 9px;
  height: 9px;
  background: #D9D9D9;
  opacity: 0.63;
  border-radius: 50%;
}

/* ===================================================
   О НАС — старый блок (не используется, разметка удалена)
   =================================================== */
.about {
  position: relative;
  height: 680px;
  overflow: hidden;
  background: #FFFFFF;
}

/* Градиентный blob-эллипс (Ellipse 189) — правая часть фона */
.about__blob {
  position: absolute;
  width: 740px;
  height: 740px;
  right: -80px;
  top: -80px;
  background: radial-gradient(50% 50% at 50% 50%, #C8C0FF 0%, rgba(200, 192, 255, 0) 100%);
  border-radius: 50%;
  z-index: 0;
}

/* Фото преподавателя */
.about__photo {
  position: absolute;
  width: 400px;
  height: 548px;
  right: 256px;
  top: 66px;
  object-fit: cover;
  border-radius: 24px;
  z-index: 2;
}

/* Аватар-круг (Ellipse 206 — фиолетовый + Ellipse 14 — белое кольцо) */
.about__avatar {
  position: absolute;
  width: 138px;
  height: 138px;
  right: 506px;
  top: 466px;
  background: linear-gradient(149.51deg, #7663F2 15.46%, #2200FF 84.54%);
  border-radius: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 9px #FFFFFF;
  overflow: hidden;
}

.about__avatar-v61 {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 20px;
  left: 12px;
  opacity: 0.7;
}

.about__avatar-v62 {
  position: absolute;
  width: 90px;
  height: 90px;
  bottom: 12px;
  right: 8px;
  opacity: 0.7;
}

/* Декоративная кривая Vector 88 */
.about__v88 {
  position: absolute;
  width: 220px;
  height: 590px;
  left: 110px;
  top: 40px;
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}

/* Заголовок "О НАС" */
.about__heading {
  position: absolute;
  left: 256px;
  top: 80px;
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 1.1;
  color: #5941F2;
  z-index: 2;
}

/* Описание под заголовком */
.about__desc {
  position: absolute;
  left: 256px;
  top: 200px;
  width: 560px;
  font-family: 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 30px;
  color: #2D2D2D;
  z-index: 2;
}

/* Общие статы */
.about__stat {
  position: absolute;
  left: 310px;
  font-family: 'Geologica', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 25px;
  color: #1A1A1A;
  z-index: 2;
}
.about__stat::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #5941F2;
  border-radius: 50%;
  margin-right: 14px;
  vertical-align: middle;
  margin-left: -30px;
}

.about__stat--1 { top: 300px; }
.about__stat--2 { top: 346px; }
.about__stat--3 { top: 392px; }
.about__stat--4 { top: 438px; }

/* Маленький акцент-круг (Ellipse 187) для поддержки 24/7 */
.about__bullet {
  position: absolute;
  left: 256px;
  top: 440px;
  width: 62px;
  height: 62px;
  background: linear-gradient(149.51deg, #7663F2 15.46%, #2200FF 84.54%);
  border-radius: 50%;
  z-index: 2;
  opacity: 0.18;
}

/* Сетка точек 4×4 */
.about__dots {
  position: absolute;
  left: 256px;
  top: 520px;
  display: grid;
  grid-template-columns: repeat(4, 12px);
  grid-template-rows: repeat(4, 12px);
  gap: 14px;
  z-index: 2;
}
.about__dot {
  width: 8px;
  height: 8px;
  background: #5941F2;
  border-radius: 50%;
  opacity: 0.35;
}

/* ===================================================
   CTA
   =================================================== */
.cta {
  position: relative;
  height: 321px;
  margin-top: 34px;
  margin-bottom: 60px;
}

/* Градиентная карточка (Rectangle 4170) */
.cta__card {
  position: absolute;
  width: 1408px;
  height: 321px;
  left: 256px;
  top: 0px;
  background: linear-gradient(130.32deg, #7663F2 22.56%, #2200FF 149.55%);
  border-radius: 50px;
  z-index: 0;
}

/* Заголовок «Готов начать подготовку?» */
.cta__heading {
  position: absolute;
  width: 634px;
  left: calc(50% - 317px);
  top: 41px;
  font-family: 'Geologica', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 48px;
  line-height: 60px;
  text-align: center;
  color: #FFFFFF;
  margin: 0;
  z-index: 2;
}

/* Подзаголовок «Оставь заявку и мы подберем программу обучения» */
.cta__sub {
  position: absolute;
  width: 607px;
  left: calc(50% - 303px);
  top: 101px;
  font-family: 'Geologica', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 24px;
  line-height: 30px;
  text-align: center;
  color: #FFFFFF;
  margin: 0;
  z-index: 2;
}

/* Белая кнопка-пилюля (Rectangle 4171) */
.cta__btn-wrap {
  position: absolute;
  width: 815px;
  height: 94px;
  left: calc(50% - 406.5px);
  top: 169px;
  background: #FFFFFF;
  border-radius: 106px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  cursor: pointer;
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cta__btn-wrap:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 48px rgba(89,65,242,0.35);
}

/* Текст «Записаться на пробный урок!» */
.cta__btn-text {
  font-family: 'Geologica', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 48px;
  line-height: 60px;
  color: #624CF5;
  pointer-events: none;
}


/* ===================================================
   FOOTER
   =================================================== */
.footer {
  position: relative;
  height: 547px;
  background: #5941F2;
  overflow: hidden;
}

/* Логотип: кольцо вокруг иконки (Ellipse 14) */
.footer__logo-ring {
  box-sizing: border-box;
  position: absolute;
  left: 66px;
  top: 39px;
  width: 92.58px;
  height: 92.58px;
  border: 4.42248px solid #FFFFFF;
  border-radius: 50%;
}

/* Логотип: иконка (белые Vector 61/62) */
.footer__logo-icon {
  position: absolute;
  left: 87.69px;
  top: 63.84px;
  width: 49.32px;
  height: 43.02px;
}

.footer__logo-icon--small {
  left: 120.61px;
  top: 63.84px;
  width: 18.28px;
  height: 18.48px;
}

/* Логотип: декоративные акценты по бокам от словесного знака (Vector 63 / Vector) */
.footer__wordmark-accent {
  position: absolute;
  top: 66.04px;
}

.footer__wordmark-accent--left {
  left: 168.75px;
  top: 61.26px;
  width: 32.37px;
  height: 33.47px;
}

.footer__wordmark-accent--right {
  left: 383.56px;
  top: 61.42px;
  width: 34.22px;
  height: 32.34px;
}

/* Логотип: словесный знак "ИНТЕГРАЛ" */
.footer__wordmark {
  position: absolute;
  left: 210.07px;
  top: 62.63px;
  width: 166.26px;
  height: 40.65px;
}

/* Логотип: подпись "онлайн" / "школа" в два ряда */
.footer__tagline {
  position: absolute;
  left: 174.11px;
  top: 91.41px;
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: #FFFFFF;
  margin: 0;
}

/* Заголовки колонок навигации */
.footer__col-heading {
  position: absolute;
  width: 247px;
  font-family: 'Geologica', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 30px;
  text-align: center;
  color: #FFFFFF;
  margin: 0;
}

/* Списки ссылок под заголовками */
.footer__col-links {
  position: absolute;
  width: 247px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}
.footer__col-links a {
  font-family: 'Geologica', sans-serif;
  font-weight: 300;
  font-size: 24px;
  line-height: 52px;
  text-align: center;
  color: #B1A5FF;
  text-decoration: none;
  transition: color 0.25s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.footer__col-links a:hover { color: #FFFFFF; transform: translateX(3px); }

.footer__col-heading--about, .footer__col-links--about { left: calc(50% - 395px); }
.footer__col-heading--about { top: 51px; }
.footer__col-links--about   { top: 93px; }

.footer__col-heading--edu, .footer__col-links--edu { left: calc(50% - 28px); }
.footer__col-heading--edu { top: 51px; }
.footer__col-links--edu   { top: 93px; }

.footer__col-heading--students, .footer__col-heading--parents { left: calc(50% + 339px); }
.footer__col-heading--students { top: 51px; }
.footer__col-heading--parents  { top: 188px; }

/* Плашки-заглушки (Rectangle 4176-4183) */
.footer__badge {
  position: absolute;
  width: 70px;
  height: 70px;
  background: #FFFFFF;
  border-radius: 10px;
}

.footer__badge--1 { left: calc(50% + 411px); }
.footer__badge--2 { left: calc(50% + 514px); }

.footer__badge-row--1 { top: 98px; }
.footer__badge-row--2 { top: 243px; }

/* Телефон + кнопка обратного звонка */
.footer__phone {
  position: absolute;
  display: block;
  width: 247px;
  left: calc(50% - 828px);
  top: 161px;
  font-family: 'Geologica', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 30px;
  text-decoration-line: underline;
  color: #FFFFFF;
  margin: 0;
}

.footer__callback-btn {
  position: absolute;
  width: 336px;
  height: 57px;
  left: calc(50% - 872px);
  top: 202px;
  background: #FFFFFF;
  border-radius: 106px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.footer__callback-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}

.footer__callback-text {
  font-family: 'Geologica', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 30px;
  color: #5941F2;
  pointer-events: none;
}

/* Соцсети */
.footer__social {
  position: absolute;
  width: 48px;
  height: 48px;
  display: block;
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.footer__social:hover { transform: scale(1.08); }

.footer__social img {
  width: 100%;
  height: 100%;
}

.footer__social-row--1 { top: 109px; }
.footer__social-row--2 { top: 254px; }

.footer__social--tg  { left: calc(50% + 422px); }
.footer__social--max { left: calc(50% + 525px); color: #5941F2; }
.footer__social--max svg { width: 100%; height: 100%; }

/* Юридическая информация */
.footer__legal {
  position: absolute;
  width: 672px;
  left: 66px;
  top: 353px;
  font-family: 'Geologica', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 24px;
  line-height: 30px;
  color: #B1A5FF;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.footer__legal a {
  color: #B1A5FF;
  text-decoration-line: underline;
  transition: color 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.footer__legal a:hover { color: #FFFFFF; }
.footer__legal span { color: #9F93F0; }

.footer__address {
  position: absolute;
  width: 672px;
  left: 384px;
  top: 466px;
  font-family: 'Geologica', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 24px;
  line-height: 30px;
  color: #B1A5FF;
  margin: 0;
}

.footer__contact-label {
  position: absolute;
  width: 672px;
  left: 1043px;
  top: 462px;
  font-family: 'Geologica', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 24px;
  line-height: 30px;
  color: #B1A5FF;
  margin: 0;
}

.footer__contact-email {
  position: absolute;
  width: 672px;
  left: 1043px;
  top: 500px;
  font-family: 'Geologica', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 24px;
  line-height: 30px;
  color: #B1A5FF;
  text-decoration: none;
}

/* Ссылки «Партнёрская программа» / «Образовательная лицензия» */
.footer__link {
  position: absolute;
  width: 377px;
  left: calc(50% + 360px);
  font-family: 'Geologica', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 30px;
  color: #FFFFFF;
  text-decoration: none;
  margin: 0;
}

.footer__link--partners { top: 355px; }
.footer__link--license  { top: 390px; }

/* ══════════════════ ТАРИФЫ: карточка (десктоп) ══════════════════ */
.about__rcard .tn-atom { display: flex; }

.dplan {
  box-sizing: border-box;
  display: flex; flex-direction: column;
  width: 100%;
  padding: 32px 30px 34px;
  background: #FFFFFF;
  border-radius: 32px;
  box-shadow: 0 22px 60px rgba(43, 27, 158, 0.13);
}

.dplan--hit {
  background: linear-gradient(160deg, #6A4CF5 0%, #4A2AE8 55%, #3A1FD8 100%);
  box-shadow: 0 26px 68px rgba(43, 27, 158, 0.34);
}

.about__rcard:hover .dplan { box-shadow: 0 22px 60px rgba(43, 27, 158, 0.20), 0 0 0 3px #5941F2; }
.about__rcard:hover .dplan--hit { box-shadow: 0 26px 68px rgba(43, 27, 158, 0.40), 0 0 0 3px rgba(255,255,255,0.85); }

.dplan__top { display: flex; align-items: center; justify-content: center; gap: 10px; }

.dplan__badge {
  padding: 11px 26px;
  border-radius: 17px;
  background: #EDEAFB;
  font-family: 'Rubik', sans-serif;
  font-weight: 700; font-size: 21px; line-height: 25px;
  color: #5941F2;
}
.dplan--hit .dplan__badge { background: #FFFFFF; }

.dplan__hit {
  padding: 9px 16px;
  border-radius: 14px;
  background: #14102E;
  font-family: 'Geologica', sans-serif;
  font-weight: 700; font-size: 14px; line-height: 16px;
  letter-spacing: 0.04em; color: #FFFFFF;
}

/* Акцент: сколько занятий всего, под ним — сколько в неделю */
.dplan__total {
  margin-top: 18px;
  text-align: center;
  font-family: 'Geologica', sans-serif;
  font-weight: 700; font-size: 38px; line-height: 44px;
  color: #14102E;
  white-space: nowrap;
}
.dplan--hit .dplan__total { color: #FFFFFF; }

.dplan__week {
  margin-top: 4px;
  text-align: center;
  font-family: 'Geologica', sans-serif;
  font-weight: 500; font-size: 17px; line-height: 22px;
  color: #5941F2;
}
.dplan--hit .dplan__week { color: rgba(255, 255, 255, 0.9); }

.dplan__desc {
  margin-top: 13px;
  text-align: center;
  font-family: 'Geologica', sans-serif;
  font-weight: 400; font-size: 15px; line-height: 21px;
  color: #6B6880;
}
.dplan--hit .dplan__desc { color: rgba(255, 255, 255, 0.85); }

.dplan__art { width: 150px; height: 150px; margin: 14px auto 4px; object-fit: contain; }

.dplan__feats { margin: 0; padding: 0; list-style: none; }
.dplan__feats li {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 0;
  border-bottom: 1px solid #ECEAF6;
  font-family: 'Geologica', sans-serif;
  font-weight: 400; font-size: 16px; line-height: 21px;
  color: #201F2B;
}
.dplan__feats li:last-child { border-bottom: none; }
.dplan--hit .dplan__feats li { color: #FFFFFF; border-bottom-color: rgba(255, 255, 255, 0.18); }

.dplan__ico {
  flex: 0 0 40px; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 13px; background: #EDEAFB; color: #5941F2;
}
.dplan__ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; }
.dplan--hit .dplan__ico { background: rgba(255, 255, 255, 0.17); color: #FFFFFF; }

/* Цена за одно занятие + скидка — строкой над кнопкой */
.dplan__rate {
  margin-top: auto; padding-top: 20px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Geologica', sans-serif;
  font-weight: 500; font-size: 16px; line-height: 20px;
  color: #6B6880; white-space: nowrap;
}
.dplan--hit .dplan__rate { color: rgba(255, 255, 255, 0.88); }
.dplan__rate--plain { font-weight: 400; }

.dplan__off {
  padding: 5px 12px; border-radius: 999px; background: #5941F2;
  font-family: 'Geologica', sans-serif;
  font-weight: 700; font-size: 14px; line-height: 17px; color: #FFFFFF;
}
.dplan--hit .dplan__off { background: #FFFFFF; color: #4A2AE8; }

/* Кнопка с ценой внутри */
.dplan__btn {
  box-sizing: border-box;
  width: 100%;
  margin-top: 14px; height: 68px; padding: 0 8px 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1.8px solid #5941F2; border-radius: 999px;
  background: transparent;
  font-family: 'Geologica', sans-serif;
  color: #5941F2; text-decoration: none; cursor: pointer;
  transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease,
              transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dplan__btn-t { font-weight: 600; font-size: 18px; line-height: 23px; white-space: nowrap; }
.dplan__btn-p {
  display: inline-flex; align-items: center;
  height: 50px; padding: 0 20px;
  border-radius: 999px;
  background: #5941F2; color: #FFFFFF;
  font-weight: 700; font-size: 21px; line-height: 26px; white-space: nowrap;
  transition: background 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dplan__btn:hover { background: #5941F2; color: #FFFFFF; transform: translateY(-2px); }
.dplan__btn:hover .dplan__btn-p { background: #FFFFFF; color: #5941F2; }

.dplan--hit .dplan__btn { background: #FFFFFF; border-color: #FFFFFF; color: #4A2AE8; }
.dplan--hit .dplan__btn-p { background: #4A2AE8; color: #FFFFFF; }
.dplan--hit .dplan__btn:hover { background: #EDEAFB; }
.dplan--hit .dplan__btn:hover .dplan__btn-p { background: #14102E; color: #FFFFFF; }

/* ── нижняя плашка с преимуществами ── */
.dtrust {
  position: absolute;
  left: calc(50% - 676px);
  top: 1450px;
  width: 1352px;
  box-sizing: border-box;
  margin: 0; padding: 24px 40px;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  background: #FFFFFF;
  border-radius: 28px;
  box-shadow: 0 18px 44px rgba(43, 27, 158, 0.10);
}
.dtrust li {
  display: flex; align-items: center; gap: 13px;
  font-family: 'Geologica', sans-serif;
  font-weight: 500; font-size: 17px; line-height: 21px;
  color: #2A2838;
}
.dtrust li + li { border-left: 1px solid #ECEAF6; padding-left: 40px; }
.dtrust__ico {
  flex: 0 0 36px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px; background: #EDEAFB; color: #5941F2;
}
.dtrust__ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; }


/* ══════════════ «Твой балл станет выше»: 4 круга, один раскрыт ══════════════ */
.features__row {
  position: absolute;
  left: calc(50% - 648.5px);
  top: 262px;
  width: 1297px;
  height: 223px;
  display: flex;
  gap: 45px;
}

.ffact {
  position: relative;
  flex: 0 0 223px;
  height: 223px;
  display: flex;
  align-items: center;
  padding: 0;
  border: none;
  border-radius: 300px;
  cursor: pointer;
  overflow: hidden;
  color: #FFFFFF;
  text-align: left;
  transition: flex-basis 0.42s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s ease;
}
.ffact--1 { background: #5941F2; }
.ffact--2 { background: #2200FF; }
.ffact--3 { background: #7663F2; }
.ffact--4 { background: #6E5AEE; }

.ffact.is-open { flex-basis: 492px; cursor: default; }
.ffact:not(.is-open):hover { transform: scale(1.05); }

/* иконка: в закрытом состоянии по центру круга, в раскрытом уезжает влево */
.ffact__circle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 162px; height: 162px;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  transition: left 0.42s cubic-bezier(0.4, 0, 0.2, 1), transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
.ffact__circle svg { width: 78px; height: 78px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ffact.is-open .ffact__circle { left: 30px; transform: translateX(0); }

/* текст появляется только у раскрытой */
.ffact__body {
  position: absolute;
  left: 214px;
  width: 254px;
  opacity: 0;
  transform: translateX(-14px);
  pointer-events: none;
  transition: opacity 0.28s ease 0.14s, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.14s;
}
.ffact.is-open .ffact__body { opacity: 1; transform: translateX(0); }
.ffact__body > * { display: block; }

/* заголовок дублировал бы название секции — он нужен только на мобильной пилюле */
.ffact__head { display: none; }

.ffact__num {
  font-family: 'Rubik', sans-serif;
  font-weight: 700; font-size: 58px; line-height: 64px;
}
.ffact__desc {
  margin-top: 6px;
  font-family: 'Geologica', sans-serif;
  font-weight: 400; font-size: 18px; line-height: 24px;
  color: rgba(255, 255, 255, 0.92);
}

@media (prefers-reduced-motion: reduce) {
  .ffact, .ffact__circle, .ffact__body { transition: none; }
}

/* ══════════════════ ЗАЯВКА — Frame 3908 (десктоп 1:1) ══════════════════
   Канвас 1920 зумится через html{zoom}, поэтому fixed-оверлей считается
   в тех же координатах — отдельный зум-контейнер, как на мобилке, не нужен.
   Размеры и цвета взяты из Figma-спеки; шрифт — Geologica, как весь сайт
   (в спеке Montserrat, но он остался от старой версии лендинга). */
.ov--lead { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.ov--lead.is-open { pointer-events: auto; }
.ov--lead .ov__bd {
  position: absolute; inset: 0;
  background: rgba(9, 4, 120, 0.55);
  opacity: 0; transition: opacity 0.3s ease;
}
.ov--lead.is-open .ov__bd { opacity: 1; }

.ov--lead .ov__scroll {
  position: absolute; inset: 0;
  overflow-y: auto;
  display: flex; justify-content: center;
  padding: 40px 0;
}

.lead {
  position: relative;
  display: flex;
  width: 1146px;
  min-height: 760px;
  margin: auto 0;
  border-radius: 28px;
  background: #FFFFFF;
  overflow: hidden;
  font-family: 'Geologica', sans-serif;
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ov--lead.is-open .lead { opacity: 1; transform: none; }

.lead__col { flex: 1; padding: 38px 48px 34px; }

/* ── правая панель с фото ── */
.lead__side {
  position: relative;
  flex: none;
  width: 540px;
  background: #5A45FF;
  overflow: hidden;
}
.lead__squiggle { position: absolute; left: -120px; top: -60px; width: 420px; pointer-events: none; }
.lead__pill {
  position: absolute; left: 40px; top: 40px; z-index: 2;
  padding: 13px 24px;
  border-radius: 999px;
  background: #FFFFFF;
  font-weight: 500; font-size: 16px; line-height: 19px;
  color: #171A2C;
}
/* фото упирается в правый край исходника — уводим срез за границу панели */
/* Раньше здесь была вырезанная по контуру картинка, поэтому её сажали
   в угол панели. Съёмочный кадр прямоугольный — растягиваем на всю панель. */
.lead__boy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.lead__x {
  position: absolute; right: 32px; top: 32px; z-index: 3;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: none; border-radius: 50%;
  background: #FFFFFF; color: #5A45FF;
  box-shadow: 0 6px 18px rgba(23, 26, 44, 0.18);
  cursor: pointer;
}
.lead__x svg { width: 24px; height: 24px; }

/* ── форма ── */
.lead__title { font-weight: 700; font-size: 36px; line-height: 44px; color: #171A2C; }
.lead__sub { margin-top: 10px; font-weight: 400; font-size: 17px; line-height: 21px; color: #3C4052; }
.lead__pitch { margin-top: 6px; font-weight: 400; font-size: 17px; line-height: 21px; color: #3C4052; }
.lead__pitch b { font-weight: 600; color: #2200FF; }

.lead__ctx[hidden] { display: none; }
.lead__ctx {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding: 13px 16px;
  border-radius: 12px; background: #F1EFFF;
  font-weight: 400; font-size: 15px; line-height: 19px; color: #3C4052;
}
.lead__ctx b { font-weight: 600; color: #2200FF; }
.lead__ctx svg { flex: none; width: 18px; height: 18px; color: #5A45FF; }

.lead__row { display: flex; gap: 36px; margin-top: 20px; }

.lead__inp {
  height: 58px; padding: 0 18px;
  border: 1.5px solid #D9DBE7; border-radius: 12px;
  background: #FFFFFF;
  font-family: inherit; font-weight: 400; font-size: 17px; line-height: 21px;
  color: #171A2C; outline: none;
  transition: border-color 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lead__inp::placeholder { color: #A4A8B5; }
.lead__inp:focus { border-color: #5A45FF; }
.lead__inp--name { width: 230px; }
.lead__inp--wide { width: 100%; height: 56px; margin-top: 8px; font-size: 16px; line-height: 20px; }

.lead__sel { position: relative; width: 244px; }
.lead__sel .lead__inp { width: 100%; padding-right: 46px; -webkit-appearance: none; appearance: none; }
.lead__sel .lead__inp.is-empty { color: #A4A8B5; }
.lead__chev { position: absolute; right: 18px; top: 50%; margin-top: -4px; width: 16px; height: 8px; pointer-events: none; }

.lead__label { margin-top: 22px; font-weight: 400; font-size: 17px; line-height: 21px; color: #171A2C; }

.lead__chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.lead__chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 24px;
  border: 1.5px solid #5A45FF; border-radius: 22px;
  background: #FFFFFF;
  font-family: inherit; font-weight: 400; font-size: 15px; line-height: 18px;
  color: #5A45FF; cursor: pointer;
  transition: background 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lead__chip.is-on { padding-right: 8px; background: #5A45FF; color: #FFFFFF; }
.lead__tick {
  display: none; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF;
}
.lead__chip.is-on .lead__tick { display: flex; }
.lead__tick svg { width: 10px; height: 8px; }

/* Кнопка «Ещё N» — раскрывает остальные предметы */

/* Появление доп. чипов */
@keyframes leadChipIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

.lead__ways { display: flex; gap: 15px; margin-top: 12px; }
.lead__way {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0;
  border: 1.5px solid #D9DBE7; border-radius: 12px;
  background: #FFFFFF;
  font-family: inherit; font-weight: 400; font-size: 15px; line-height: 18px;
  color: #171A2C; cursor: pointer;
  transition: border-color 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lead__way-i { flex: none; width: 20px; height: 20px; color: #5A45FF; }
.lead__way.is-on { border: 1.7px solid #5A45FF; color: #5A45FF; }

.lead__flabel { display: block; margin-top: 20px; font-weight: 400; font-size: 14px; line-height: 17px; color: #3C4052; }

.lead__btn {
  width: 100%; height: 60px; margin-top: 20px;
  border: none; border-radius: 14px;
  background: #5A45FF;
  font-family: inherit; font-weight: 700; font-size: 18px; line-height: 22px;
  color: #FFFFFF; cursor: pointer;
  transition: background 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lead__btn:hover { background: #4A2AE8; }
.lead__btn[disabled] { opacity: 0.6; cursor: default; }

.lead__consent { display: flex; align-items: center; gap: 12px; margin-top: 16px; cursor: pointer; }
.lead__consent input { position: absolute; width: 0; height: 0; opacity: 0; }
.lead__box {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: 1.4px solid #7C8190; border-radius: 6px; background: #FFFFFF;
  transition: background 0.16s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.16s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lead__box svg { width: 10px; height: 8px; opacity: 0; }
.lead__consent input:checked + .lead__box { background: #5A45FF; border-color: #5A45FF; }
.lead__consent input:checked + .lead__box svg { opacity: 1; }
.lead__consent-t { font-weight: 400; font-size: 12.5px; line-height: 15px; color: #555A6A; }
.lead__consent-t a { color: #555A6A; text-decoration: underline; }
/* без согласия заявка не уходит — подсвечиваем, иначе непонятно, что мешает */
.lead__consent.is-bad .lead__box { border-color: #E0344B; box-shadow: 0 0 0 4px rgba(224, 52, 75, 0.14); }
.lead__consent.is-bad .lead__consent-t { color: #E0344B; }

.lead__err { margin-top: 12px; font-weight: 400; font-size: 14px; line-height: 18px; color: #E0344B; }

.lead__done[hidden] { display: none; }
.lead__done {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 130px 20px; text-align: center;
}
.lead__done-ico {
  display: flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; border-radius: 50%; background: #5A45FF;
}
.lead__done-ico svg { width: 40px; height: 40px; }
.lead__done-h { font-weight: 700; font-size: 30px; line-height: 36px; color: #171A2C; }
.lead__done-t { font-weight: 400; font-size: 18px; line-height: 24px; color: #3C4052; }
.lead__done .lead__btn { width: 300px; }

/* Ссылка «Открыть чат» на экране «Заявка принята» — тот же вид, что и кнопка */
.lead__btn--chat {
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.lead__done .lead__btn--chat + .lead__btn {
  margin-top: 12px;
  background: #EFEDFB;
  color: #4A2AE8;
}
.lead__done .lead__btn--chat + .lead__btn:hover { background: #E2DEF8; }


@media (prefers-reduced-motion: reduce) {
  .lead, .ov--lead .ov__bd { transition: none; }
}

/* ══════════════════ ЧАСТЫЕ ВОПРОСЫ (десктоп: две колонки) ══════════════════ */
.c-faq {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  width: 1520px;
  margin: 40px auto 90px;
}

.c-faq__promo {
  flex: none;
  box-sizing: border-box;
  width: 560px;
  padding: 52px 48px 48px;
  border-radius: 36px;
  background: linear-gradient(142deg, #6248F5 0%, #4A2BE8 52%, #3A1CD6 100%);
  box-shadow: 0 22px 54px rgba(48, 24, 190, 0.28);
}
.c-faq__title { font-family: 'Geologica', sans-serif; font-weight: 700; font-size: 58px; line-height: 62px; color: #FFFFFF; }
.c-faq__promo-h { margin-top: 30px; font-family: 'Geologica', sans-serif; font-weight: 600; font-size: 20px; line-height: 26px; color: #FFFFFF; }
.c-faq__promo-t { margin-top: 4px; font-family: 'Geologica', sans-serif; font-weight: 400; font-size: 18px; line-height: 24px; color: rgba(255, 255, 255, 0.78); }
.c-faq__promo-btns { display: flex; gap: 16px; margin-top: 28px; }
.c-faq__promo-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  height: 64px; padding: 0;
  border: 1.8px solid rgba(255, 255, 255, 0.55);
  border-radius: 17px;
  background: none;
  font-family: 'Geologica', sans-serif; font-weight: 500; font-size: 18px; line-height: 22px;
  color: #FFFFFF; text-decoration: none; cursor: pointer;
  transition: background 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.c-faq__promo-btn svg { flex: none; width: 22px; height: 22px; }
.c-faq__promo-btn:hover { background: rgba(255, 255, 255, 0.16); border-color: #FFFFFF; }

.c-faq__panel {
  flex: 1;
  box-sizing: border-box;
  padding: 26px;
  border-radius: 32px;
  background: #F4F2FE;
}
.c-faq__list { display: flex; flex-direction: column; gap: 12px; }

.c-faq__item {
  border: 1.4px solid transparent;
  border-radius: 18px;
  background: #FFFFFF;
  transition: border-color 0.36s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.c-faq__item.is-open { border-color: #DED7FB; box-shadow: 0 8px 22px rgba(64, 40, 200, 0.08); }
.c-faq__item.is-extra { display: none; }
.c-faq__list.is-full .c-faq__item.is-extra { display: block; }

.c-faq__q {
  width: 100%;
  display: flex; align-items: center; gap: 18px;
  padding: 24px 28px;
  border: none; background: none; text-align: left; cursor: pointer;
}
.c-faq__qt { font-family: 'Geologica', sans-serif; font-weight: 600; font-size: 19px; line-height: 25px; color: #201F2B; }
.c-faq__pm {
  flex: none; margin-left: auto;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #EFECFD; color: #5941F2;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.24s ease;
}
.c-faq__pm svg { width: 19px; height: 19px; }
.c-faq__item.is-open .c-faq__pm { transform: rotate(45deg); background: #DED7FB; }

.c-faq__wrap {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.c-faq__item.is-open .c-faq__wrap { grid-template-rows: 1fr; }
.c-faq__a { overflow: hidden; }
.c-faq__a p {
  padding: 0 28px 24px;
  font-family: 'Geologica', sans-serif; font-weight: 400; font-size: 17px; line-height: 25px; color: #55596B;
}

.c-faq__more {
  width: 100%; height: 54px; margin-top: 16px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 0; border: none; background: none;
  font-family: 'Geologica', sans-serif; font-weight: 500; font-size: 17px; line-height: 22px;
  color: #5941F2; cursor: pointer;
}
.c-faq__more svg { width: 17px; height: 10px; transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
.c-faq__more.is-up svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .c-faq__wrap, .c-faq__pm, .c-faq__more svg { transition: none; }
}

/* ═══════════════════ ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ ═══════════════════
   Класс .reveal вешает скрипт по списку селекторов — разметку не трогаем.
   Появление сделано анимацией, а не переходом: после её окончания transform
   возвращается к обычному значению, и hover-эффекты карточек продолжают
   работать (с transition их бы намертво перебил animation-fill-mode). */
.reveal { opacity: 0; }
.reveal.is-in {
  opacity: 1;
  animation: revealUp 0.78s cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-delay: var(--rd, 0s);
  /* backwards обязателен: у соседних карточек анимация стартует с задержкой
     (--rd), и без него блок всё это время рисуется уже непрозрачным, а потом
     скачком уходит в 0 — это и давало моргание при скролле. */
  animation-fill-mode: backwards;
}

@keyframes revealUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Заголовки въезжают чуть мягче и без сдвига вбок */
.reveal--soft.is-in { animation-name: revealSoft; animation-duration: 0.9s; }
@keyframes revealSoft {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; animation: none; }
}


/* ════════════════════════════════════════════════════════════
   НОВЫЕ ДЕСКТОПНЫЕ СЕКЦИИ (перенос с мобильной версии).
   В отличие от старых секций свёрстаны обычным потоком внутри
   центрированного контейнера 1408px — новых Figma-координат под
   1920-канвас для них нет, а поток проще поддерживать.
   ════════════════════════════════════════════════════════════ */

.offers__in, .why__in, .say__in, .fun__in {
  width: 1408px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Общий заголовок новых секций */
.offers__title, .why__title, .say__title, .fun__title {
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 56px;
  color: #14102E;
  text-align: center;
}
.offers__title span, .say__title span, .fun__title span { color: #5941F2; }

.offers__sub, .why__sub, .say__sub, .fun__sub {
  margin-top: 14px;
  font-family: 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 25px;
  color: #5B5876;
  text-align: center;
}

/* ─────────── АКТИВНЫЕ ПРЕДЛОЖЕНИЯ ─────────── */
.offers {
  position: relative;
  padding: 104px 0 116px;
  background: #F2F2F2;
}

.offers__row {
  margin-top: 54px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.ocard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 320px;
  padding: 32px 200px 32px 34px;
  border-radius: 38px;
  background: #FFFFFF;
  box-shadow: 0 26px 54px -34px rgba(43, 27, 158, 0.42);
  overflow: hidden;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ocard:hover {
  transform: translateY(-10px);
  box-shadow: 0 44px 78px -34px rgba(43, 27, 158, 0.55);
}

.ocard__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: #EDEBF9;
  font-family: 'Geologica', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #5941F2;
}
.ocard__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #5941F2;
  animation: ocardPulse 2.4s ease-in-out infinite;
}
@keyframes ocardPulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.35); opacity: 0.55; }
}

.ocard__title {
  margin-top: 18px;
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: 25px;
  line-height: 31px;
  color: #14102E;
}
.ocard__desc {
  margin-top: 12px;
  font-family: 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
  color: #4A4763;
}

.ocard__btn {
  /* в потоке, а не absolute: длинное описание залезало под кнопку */
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 22px;
  border: none;
  border-radius: 999px;
  background: #5941F2;
  color: #FFFFFF;
  font-family: 'Geologica', sans-serif;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ocard__desc { margin-bottom: auto; }
.ocard__btn svg { width: 18px; height: 18px; transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
.ocard__btn:hover { background: #4A2AE8; }
.ocard__btn:hover svg { transform: translateX(4px); }

.ocard__art {
  position: absolute;
  right: 18px;
  top: 50%;
  width: 168px;
  height: 242px;
  margin-top: -121px;
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ocard__art svg { width: 100%; height: 100%; display: block; }
.ocard:hover .ocard__art { transform: translateY(-8px) rotate(-3deg); }
.ocard__art .c-offers__diver,
.ocard__art img {
  position: absolute;
  left: 50%; top: 46%;
  width: 118px;
  transform: translate(-50%, -50%);
}

/* ─────────── МЫ НЕ КУРСЫ ─────────── */
.why {
  position: relative;
  padding: 104px 0 112px;
  background: #FFFFFF;
}

.why__grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 26px;
}
/* верхний ряд — три карточки, нижний — две пошире (бенто) */
.why__grid .wcard:nth-child(-n+3) { grid-column: span 2; }
.why__grid .wcard:nth-child(n+4)  { grid-column: span 3; }

.wcard {
  position: relative;
  min-height: 244px;
  padding: 30px 32px;
  border-radius: 34px;
  background: #F5F4FC;
  border: 1.5px solid #E7E4F7;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              background 0.5s ease, border-color 0.5s ease,
              box-shadow 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wcard:hover {
  transform: translateY(-8px);
  background: #FFFFFF;
  border-color: #C9C0F5;
  box-shadow: 0 30px 60px -34px rgba(43, 27, 158, 0.45);
}

.wcard__ico {
  width: 62px; height: 62px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 20px;
  background: #5941F2;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wcard__ico svg { width: 30px; height: 32px; display: block; }
.wcard:hover .wcard__ico { transform: rotate(-8deg) scale(1.06); }

.wcard__title {
  margin-top: 20px;
  font-family: 'Geologica', sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 27px;
  color: #14102E;
}
.wcard__desc {
  margin-top: 10px;
  font-family: 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
  color: #4A4763;
}

/* ─────────── НАШИ РЕПЕТИТОРЫ ГОВОРЯТ ─────────── */
.say {
  position: relative;
  padding: 104px 0 110px;
  background: #F2F2F2;
  overflow: hidden;
}

.sayrow {
  position: relative;
  margin-top: 72px;
  display: flex;
  align-items: center;
  gap: 56px;
}
.sayrow--2 { flex-direction: row-reverse; }

/* Кружок под фото преподавателя (фото ещё не сняты) */
.sayrow__ph {
  position: relative;
  flex: none;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: #DCD7F7;
  border: 1.6px dashed #ABA0F2;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sayrow:hover .sayrow__ph { transform: scale(1.03); }
/* Кружок с реальным фото: пунктирная рамка-заглушка больше не нужна.
   Все снимки сняты на белом фоне, поэтому подложка тоже белая — иначе
   по краю кружка виден стык фона фотографии и сиреневой заливки. */
.sayrow__ph--has {
  border: none;
  background: #FFFFFF;
  box-shadow: 0 0 0 1.6px #DCD7F7, 0 20px 44px -26px rgba(43, 27, 158, 0.45);
  /* без overflow:hidden — он обрезал плашку с цитатой,
     само фото скруглено собственным border-radius */
}
.sayrow__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  display: block;
  border-radius: 50%;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sayrow:hover .sayrow__img { transform: scale(1.05); }

/* Фото Сани прислано вырезанным по контуру — ему нужен кроп «в полный рост
   кружка», а не как у студийных снимков с фоном */
.sayrow__img--cut { object-position: center 6%; }

.sayrow__ph-t {
  font-family: 'Geologica', sans-serif;
  font-weight: 500; font-size: 14px;
  color: #6C63A8;
  letter-spacing: 0.02em;
}

.sayrow__badge {
  position: absolute;
  right: -72px; top: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 18px 38px -22px rgba(43, 27, 158, 0.5);
  font-family: 'Geologica', sans-serif;
  font-weight: 600; font-size: 14px; line-height: 18px;
  color: #14102E;
  white-space: nowrap;
}
.sayrow--2 .sayrow__badge { right: auto; left: -72px; }
/* У Сани кадр обрезан «в полный рост кружка», голова стоит у самого верха —
   плашка на позиции по умолчанию ложилась ему на лоб. Опускаем её вниз кружка,
   там белая рубашка и ничего не перекрывается. */
.sayrow--3 .sayrow__badge { top: auto; bottom: 24px; }
.sayrow__badge img { width: 20px; height: 20px; }

.sayrow__quote {
  position: relative;
  flex: 1 1 auto;
  padding: 40px 46px 38px;
  border-radius: 34px;
  background: #FFFFFF;
  box-shadow: 0 28px 60px -38px rgba(43, 27, 158, 0.45);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sayrow:hover .sayrow__quote {
  transform: translateY(-6px);
  box-shadow: 0 42px 76px -38px rgba(43, 27, 158, 0.55);
}
.sayrow--2 .sayrow__quote { background: #EDEBF9; }

.sayrow__mark { position: absolute; left: 34px; top: -16px; width: 44px; }
.sayrow__text {
  font-family: 'Geologica', sans-serif;
  font-weight: 400; font-size: 20px; line-height: 29px;
  color: #14102E;
}
.sayrow__name {
  display: block; margin-top: 20px;
  font-family: 'Geologica', sans-serif;
  font-weight: 700; font-size: 17px; color: #5941F2;
}
.sayrow__role {
  display: block; margin-top: 3px;
  font-family: 'Geologica', sans-serif;
  font-style: normal; font-weight: 400; font-size: 14px; color: #6B6785;
}
.sayrow__arrow {
  position: absolute;
  right: -30px; bottom: -34px;
  width: 96px;
  opacity: 0.85;
  pointer-events: none;
}
.sayrow--2 .sayrow__arrow { right: auto; left: -30px; transform: scaleX(-1); }

/* ─────────── УЧЁБА — ЭТО НЕ ТОЛЬКО СЕРЬЁЗНО ─────────── */
.fun {
  position: relative;
  padding: 100px 0 112px;
  background: #FFFFFF;
}

.fun__row {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.funcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 26px;
  border-radius: 34px;
  background: #F5F4FC;
  border: 1.5px solid #E7E4F7;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              background 0.5s ease;
}
.funcard:hover {
  transform: translateY(-10px);
  background: #FFFFFF;
  box-shadow: 0 36px 68px -34px rgba(43, 27, 158, 0.5);
}

.funcard__media {
  height: 196px;
  border-radius: 24px;
  overflow: hidden;
  background: #E4E1F5;
}
.funcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.funcard:hover .funcard__media img { transform: scale(1.06); }

.funcard__title {
  margin-top: 18px;
  font-family: 'Geologica', sans-serif;
  font-weight: 700; font-size: 20px; line-height: 26px;
  color: #14102E;
}
.funcard__title span { display: block; color: #5941F2; }

.funcard__desc {
  margin-top: 10px;
  flex: 1 1 auto;
  font-family: 'Geologica', sans-serif;
  font-weight: 400; font-size: 14.5px; line-height: 20px;
  color: #4A4763;
}

.funcard__btn {
  margin-top: 18px;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 20px;
  border: none; border-radius: 999px;
  background: #EDEBF9;
  color: #5941F2;
  font-family: 'Geologica', sans-serif;
  font-weight: 500; font-size: 14.5px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.funcard__btn svg { width: 17px; height: 17px; transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
.funcard__btn:hover { background: #5941F2; color: #FFFFFF; }
.funcard__btn:hover svg { transform: translateX(4px); }


/* ─── Полоса прогресса чтения ─── */
.readbar {
  position: fixed;
  left: 0; top: 0;
  width: 100%;
  height: 3px;
  z-index: 999;
  background: linear-gradient(90deg, #7663F2, #2402FF);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ─── Шапка прячется при скролле вниз ─── */
.header {
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.35s ease;
}
.header.is-hidden {
  transform: translateY(-120%);
  opacity: 0;
}

/* FAB чуть подрастает, когда ушли далеко от начала страницы */
.fab { transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
.fab.is-lifted { transform: scale(1.06); }

/* ─── Единый ховер кнопок со стрелкой ─── */
.ocard__btn, .funcard__btn, .scard__cta, .mentors__cta, .cta__btn {
  transition: background 0.3s ease, color 0.3s ease,
              transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ocard__btn:hover, .funcard__btn:hover, .scard__cta:hover,
.mentors__cta:hover, .cta__btn:hover {
  transform: translateY(-2px);
}


/* ─────────── НАША ШКОЛА (фотогалерея) ─────────── */
.school {
  position: relative;
  padding: 104px 0 112px;
  background: #F2F2F2;
}

.school__title, .school__sub { text-align: center; }
.school__title {
  font-family: 'Geologica', sans-serif;
  font-weight: 700; font-size: 46px; line-height: 56px; color: #14102E;
}
.school__title span { color: #5941F2; }
.school__sub {
  margin-top: 14px;
  font-family: 'Geologica', sans-serif;
  font-weight: 400; font-size: 18px; line-height: 25px; color: #5B5876;
}

/* Бенто: крупный кадр слева на две строки, четыре поменьше справа.
   Сетка уже контейнера — на всю 1408 плитки выходили слишком широкими,
   лица резались и не было главного кадра. */
.school__grid {
  width: 1140px;
  margin: 52px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 236px;
  gap: 20px;
}
.school__cell--hero { grid-column: span 2; grid-row: span 2; }

.school__cell {
  position: relative;
  margin: 0;
  border-radius: 32px;
  overflow: hidden;
  background: #E4E1F5;
  box-shadow: 0 24px 50px -32px rgba(43, 27, 158, 0.42);
}
.school__cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* кадры вертикальные, в горизонтальной плитке центр приходился на корпус
     и головы срезало — поднимаем точку кадрирования */
  object-position: center 16%;
  display: block;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.school__cell--hero img { object-position: center 30%; }
.school__cell:hover img { transform: scale(1.06); }

/* Главный кадр — единственный с затемнением и подписью: он и держит акцент */
.school__cell--hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(180deg, rgba(20, 16, 46, 0) 0%, rgba(20, 16, 46, 0.72) 100%);
  pointer-events: none;
}
.school__cap {
  position: absolute;
  left: 32px; right: 32px; bottom: 30px;
  z-index: 1;
  font-family: 'Geologica', sans-serif;
  font-weight: 700; font-size: 27px; line-height: 33px;
  color: #FFFFFF;
  text-shadow: 0 2px 18px rgba(20, 16, 46, 0.5);
}
.school__cap span {
  display: block;
  margin-top: 8px;
  font-weight: 400; font-size: 15.5px; line-height: 21px;
  color: rgba(255, 255, 255, 0.85);
}

/* ── Панель вместо четырёх мелких кадров ── */
.school__cell--panel {
  grid-column: span 2;
  grid-row: span 2;
  box-sizing: border-box;
  padding: 40px 42px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(146deg, #6E57F6 0%, #5B3DF2 56%, #4B2FE8 100%);
  color: #FFFFFF;
  overflow: hidden;
}
.school__cell--panel::before {
  /* мягкое свечение в углу, чтобы плоская заливка не смотрелась «картонкой» */
  content: '';
  position: absolute;
  right: -90px; top: -110px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.spanel__kicker {
  align-self: flex-start;
  padding: 7px 16px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.16);
  font-family: 'Geologica', sans-serif;
  font-weight: 600; font-size: 13px; line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.spanel__title {
  margin-top: 16px;
  font-family: 'Geologica', sans-serif;
  font-weight: 700; font-size: 34px; line-height: 40px;
  color: #FFFFFF;
}

.spanel__list {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.spanel__it {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.35s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.spanel__it:hover { background: rgba(255, 255, 255, 0.2); transform: translateX(4px); }

.spanel__t {
  font-family: 'Geologica', sans-serif;
  font-weight: 400; font-size: 14.5px; line-height: 19px;
  color: rgba(255, 255, 255, 0.86);
}
.spanel__t b {
  display: block;
  margin-bottom: 3px;
  font-weight: 700; font-size: 17px; line-height: 22px;
  color: #FFFFFF;
}

.spanel__viz {
  flex: none;
  width: 74px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  overflow: hidden;
}

/* 1. эквалайзер: «голос преподавателя» */
.spanel__viz--wave { gap: 4px; }
.spanel__viz--wave i {
  display: block;
  width: 4px;
  border-radius: 3px;
  background: #FFFFFF;
  animation: spanel-eq 1.1s ease-in-out infinite alternate;
}
.spanel__viz--wave i:nth-child(1) { height: 12px; animation-delay: -0.9s; }
.spanel__viz--wave i:nth-child(2) { height: 24px; animation-delay: -0.7s; }
.spanel__viz--wave i:nth-child(3) { height: 34px; animation-delay: -0.5s; }
.spanel__viz--wave i:nth-child(4) { height: 20px; animation-delay: -0.3s; }
.spanel__viz--wave i:nth-child(5) { height: 30px; animation-delay: -0.15s; }
.spanel__viz--wave i:nth-child(6) { height: 16px; animation-delay: -0.05s; }
.spanel__viz--wave i:nth-child(7) { height: 10px; }
@keyframes spanel-eq {
  from { transform: scaleY(0.35); }
  to   { transform: scaleY(1); }
}

/* 2. доска: линия «рисуется» по кругу */
.spanel__viz--board svg { width: 52px; height: 36px; }
.spanel__ink {
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: spanel-draw 4.2s ease-in-out infinite;
}
@keyframes spanel-draw {
  0%   { stroke-dashoffset: 140; }
  45%  { stroke-dashoffset: 0; }
  75%  { stroke-dashoffset: 0; opacity: 1; }
  92%  { stroke-dashoffset: 0; opacity: 0; }
  93%  { stroke-dashoffset: 140; opacity: 0; }
  100% { stroke-dashoffset: 140; opacity: 1; }
}

/* 3. шкала прогресса: заполняется до 92 и держится */
.spanel__viz--bar {
  position: relative;
  padding: 0 12px;
  justify-content: flex-start;
}
.spanel__viz--bar::before {
  content: '';
  position: absolute;
  left: 12px; right: 12px;
  height: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.3);
}
.spanel__viz--bar i {
  position: relative;
  height: 8px;
  width: 0;
  border-radius: 6px;
  background: #FFFFFF;
  animation: spanel-fill 4.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
@keyframes spanel-fill {
  0%   { width: 0; }
  40%  { width: calc(100% - 6px); }
  85%  { width: calc(100% - 6px); }
  100% { width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .spanel__viz--wave i,
  .spanel__ink,
  .spanel__viz--bar i { animation: none; }
  .spanel__ink { stroke-dashoffset: 0; }
  .spanel__viz--bar i { width: calc(100% - 6px); }
}

.school__facts {
  width: 1140px;
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 26px 34px;
  border-radius: 28px;
  background: #FFFFFF;
  box-shadow: 0 24px 50px -34px rgba(43, 27, 158, 0.4);
}
.school__facts li { display: flex; flex-direction: column; gap: 4px; }
.school__facts b {
  font-family: 'Geologica', sans-serif;
  font-weight: 700; font-size: 32px; line-height: 38px; color: #5941F2;
}
.school__facts span {
  font-family: 'Geologica', sans-serif;
  font-weight: 400; font-size: 14.5px; line-height: 19px; color: #4A4763;
}


/* ── «Другой предмет»: чип-раскрывашка со стрелкой ── */
.lead__chip--other {
  gap: 8px;
  border-style: dashed;
}
.lead__chip-a {
  width: 14px; height: 9px;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lead__chip--other[aria-expanded="true"] .lead__chip-a { transform: rotate(180deg); }
.lead__chip--other.is-on { border-style: solid; }

.lead__other { margin-top: 14px; }
.lead__other-hint {
  margin-top: 8px;
  font-family: 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 18px;
  color: #6B6880;
}