:root {
  --основной-цвет: #9B7BB8;
  --основной-светлый: #D4A5C9;
  --основной-темный: #7A5A9A;
  --акцентный-цвет: #E8A4C9;
  --акцентный-розовый: #F5C6D6;
  --текст-темный: #4B296B;
  --текст-светлый: #7C5A96;
  --белый: #FFFFFF;
  --текст-основной: #4B296B;
  --текст-вторичный: #7C5A96;
  --заголовок-цвет: #3A0F5C;
  --фон-светлый: #FDF8FB;
  --фон-градиент: linear-gradient(135deg, #D4A5C9 0%, #9B7BB8 50%, #7A5A9A 100%);
  --тень: 0 4px 20px rgba(155, 123, 184, 0.2);
  --тень-при-наведении: 0 8px 30px rgba(155, 123, 184, 0.3);
  --скругление: 20px;
  --скругление-маленькое: 10px;
  --переход: all 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--текст-темный);
  background-color: var(--белый);
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--переход);
}

ul {
  list-style: none;
}

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

.контейнер {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.главный-баннер {
  padding: 28px;
  background: #fff;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  margin-top:-10px;
  /* margin: 0; */
  height: 560px;
}

.фон-баннера,
.фон-баннера img {
  width: 100%;
  height: 560px;
}

.фон-баннера img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position:  center;
}

.затемнение-баннера {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.25) 45%,
    rgba(0, 0, 0, 0.08) 100%
  );
}

.содержимое-баннера {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 120px;
  padding-right: 40px;
  max-width: 720px;
  text-align: left;
  color: #fff;
}

.кнопка-основная {
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 12px;
  background: var(--фон-градиент);
  color: var(--белый);
  box-shadow: var(--тень);
}

.кнопка-основная:hover {
  transform: translateY(-2px);
  box-shadow: var(--тень-при-наведении);
}

.кнопка {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 25px;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: var(--переход);
  border: none;
  text-align: center;
}

.кнопка-контурная {
  background: transparent;
  color: var(--основной-цвет);
  border: 2px solid var(--основной-цвет);
}

.кнопка-контурная:hover {
  background: var(--основной-цвет);
  color: var(--белый);
}

.кнопка-сертификат {
  background: var(--белый);
  color: var(--основной-темный);
  border: 2px solid var(--основной-цвет);
  margin-top: 14px;
  padding: 14px;
  text-align: center;
  border-radius: 14px;
  font-weight: 600;
}

.кнопка-ссылка {
  background: none;
  color: var(--основной-цвет);
  padding: 10px 0;
  text-decoration: underline;
}

section {
  padding: 80px 0;
}

.заголовок-секции {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 40px;
}

.линия-секции {
  width: 40px;
  height: 2px;
  background: var(--основной-цвет);
  flex-shrink: 0;
}

.название-секции {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--основной-цвет);
}

.подзаголовок-секции {
  font-size: 14px;
  color: var(--текст-светлый);
  margin-top: -24px;
  margin-bottom: 48px;
  padding-left: 92px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.секция-почему-мы {
  background: var(--фон-светлый);
  padding-top: 34px !important;
}

.список-преимуществ {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-left: 70px;
}

.список-преимуществ li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  font-size: 15px;
  line-height: 1.5;
}



.секция-преподаватели {
  background: var(--белый);
}

.слайдер-преподавателей {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
}

.кнопка-слайдера {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid var(--основной-светлый);
  background: var(--белый);
  color: var(--основной-цвет);
  cursor: pointer;
  transition: var(--переход);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.кнопка-слайдера:hover {
  background: var(--основной-цвет);
  color: var(--белый);
}

.сетка-преподавателей {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  padding: 20px 0;
  flex: 1;
}

.карточка-преподавателя {
  flex: 0 0 280px;
  background: var(--белый);
  border-radius: var(--скругление);
  overflow: hidden;
  box-shadow: var(--тень);
  text-align: center;
  transition: var(--переход);
}

.карточка-преподавателя:hover {
  transform: translateY(-5px);
  box-shadow: var(--тень-при-наведении);
}

.имя-преподавателя {
  display: block;
  padding: 15px;
  font-weight: 600;
  color: var(--основной-цвет);
  font-size: 18px;
}

.изображение-преподавателя {
  height: 340px;
  overflow: hidden;
}

.изображение-преподавателя img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.информация-преподавателя {
  padding: 20px;
}

.стиль-танца {
  font-size: 14px;
  color: var(--текст-светлый);
  margin-bottom: 15px;
  line-height: 1.4;
}

.точки-слайдера {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.точка {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--основной-светлый);
  cursor: pointer;
  transition: var(--переход);
}

.точка.активная {
  background: var(--основной-цвет);
  width: 30px;
  border-radius: 5px;
}

.секция-цены {
  background: var(--фон-светлый);
  padding-top: 100px;
}

.секция-цены .заголовок-секции {
  margin-top: 20px;
}

.содержимое-цен {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 3px;
  margin-top: 24px;
  align-items: stretch;
}

.подарочный-сертификат {
  display: flex;
  flex-direction: column;
  height: 90%;
  transform: scale(0.94);
  transform-origin: top left;
}

.сертификат-внутри {
  height: 430px;
  flex: 1;
  border-radius: 18px;
  overflow: hidden;
}

.подарочный-сертификат img {
  width: 130%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.правая-цены {
  display: flex;
  flex-direction: column;
}

.сетка-цен {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 120px;
  gap: 12px;
  margin-bottom: 32px;
}

.секция-цены .сетка-цен:first-of-type {
  margin-bottom: 44px;
}

.карточка-цены {
  min-width: 0;
  background: #fff;
  border: 1.5px solid #c79acb;
  border-radius: 16px;
  padding: 13px;
  display: flex;
  gap: 12px;
}

.лево-цены {
  min-width: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 6px;
  padding-right: 6px;
}

.число-цены {
  font-size: 60px;
  font-weight: 800;
  line-height: 1;
  color: #d7a6cf;
}

.длительность-под-числом {
  margin-top: 8px;
  font-size: 16px;
  white-space: nowrap;
}

.детали-цены {
  min-width: 150px;
  align-items: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.тип-цены {
  text-align: center;
  font-size: 17px;
  line-height: 1.15;
  font-weight: 600;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.сумма-цены {
  align-self: center;
  padding: 8px 18px;
  border: 1.5px solid #c79acb;
  border-radius: 14px;
  color: #d07fbe;
  font-weight: 700;
  white-space: nowrap;
}

.сетка-цен .ссылка-больше {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 600;
  color: #7b4a8a;
  text-decoration: none;
  background: transparent;
}

.сетка-цен .ссылка-больше:hover {
  background: rgba(199, 154, 203, 0.08);
}

.секция-атмосфера {
  background: var(--белый);
  padding: 70px 0 40px;
  position: relative;
  isolation: isolate;
  z-index: 2;
  --card-radius: 22px;
  --back-x: 51px;
  --back-y: -28px;
  --front-x: -14px;
  --front-y: 14px;
  --btn-top: -14px;
  --btn-right: -6px;
  --btn-x: 40px;
  --btn-y: -12px;
  --btn-hover-up: 6px;
  --btn-bg: transparent;
}

.секция-атмосфера .заголовок-секции {
  margin: 0 0 60px;
  position: relative;
  z-index: 5;
}

.секция-атмосфера .линия-секции {
  width: 70px;
  flex: 0 0 auto;
}

.секция-атмосфера .название-секции {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--основной-цвет);
}

.секция-атмосфера .содержимое-атмосферы {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 84px;
  align-items: start;
  margin-top: 72px;
}

.секция-атмосфера .карточка {
  position: relative;
  background: transparent;
  border: none;
  border-radius: var(--card-radius);
  padding: 0;
  min-height: 540px;
  overflow: visible;
  transition: transform 220ms ease, box-shadow 220ms ease;
  will-change: transform;
}

.секция-атмосфера .карточка::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--основной-цвет);
  border-radius: var(--card-radius);
  transform: translate(var(--back-x), var(--back-y));
  opacity: 0.34;
  pointer-events: none;
  z-index: 0;
  transition: transform 220ms ease, opacity 220ms ease;
}

.секция-атмосфера .карточка:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08);
}

.секция-атмосфера .карточка:hover::after {
  transform: translate(calc(var(--back-x) + 8px), calc(var(--back-y) - 6px));
  opacity: 0.4;
}

.секция-атмосфера .карточка-внутри,
.секция-атмосфера .медиа-контент {
  position: relative;
  z-index: 1;
  background: var(--белый);
  border: 1px solid var(--основной-цвет);
  border-radius: var(--card-radius);
  transform: translate(var(--front-x), var(--front-y));
}

.секция-атмосфера .карточка-отзыва {
  display: flex;
  flex-direction: column;
}

.секция-атмосфера .карточка-отзыва .карточка-внутри {
  min-height: 520px;
  padding: 44px 34px 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  text-align: center;
}

.секция-атмосфера .текст-отзыва p {
  margin: 0 0 22px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--текст-темный);
}

.секция-атмосфера .автор-отзыва {
  font-weight: 600;
  color: var(--основной-цвет);
}

.секция-атмосфера .карточка-фото,
.секция-атмосфера .карточка-видео {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.секция-атмосфера .карточка-фото .медиа-контент,
.секция-атмосфера .карточка-видео .медиа-контент {
  height: 520px;
  overflow: hidden;
}

.секция-атмосфера .медиа-контент img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.секция-атмосфера .медиа-контент.видео {
  position: relative;
}

.секция-атмосфера .медиа-контент.видео .кнопка-воспроизведения {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  background: rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--основной-цвет);
  font-size: 26px;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}

.секция-атмосфера .медиа-контент.видео .кнопка-воспроизведения:hover {
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(255, 255, 255, 0.92);
}

.секция-атмосфера .карточка-отзыва,
.секция-атмосфера .карточка-фото,
.секция-атмосфера .карточка-видео {
  position: relative;
}

.секция-атмосфера .кнопка.кнопка-ссылка,
.секция-атмосфера .ссылка-медиа {
  position: absolute;
  top: var(--btn-top);
  right: var(--btn-right);
  transform: translate(var(--btn-x), var(--btn-y));
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--основной-цвет);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  background: var(--btn-bg);
  border: none;
  box-shadow: none;
  padding: 8px 10px;
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 180ms ease;
}

.секция-атмосфера .кнопка.кнопка-ссылка:hover,
.секция-атмосфера .ссылка-медиа:hover {
  transform: translate(var(--btn-x), calc(var(--btn-y) - var(--btn-hover-up)));
}

.секция-атмосфера .карточка-отзыва .карточка-внутри .кнопка.кнопка-ссылка {
  transform: translate(
      calc(var(--btn-x) - var(--front-x)),
      calc(var(--btn-y) - var(--front-y))
    )
    !important;
}

.секция-вопросы {
  background: var(--белый);
}

.список-вопросов {
  margin-top: 40px;
}

.элемент-вопроса {
  background: var(--белый);
  border-radius: var(--скругление-маленькое);
  margin-bottom: 15px;
  overflow: hidden;
  box-shadow: var(--тень);
}

.вопрос {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  cursor: pointer;
  transition: var(--переход);
}

.вопрос:hover {
  background: var(--фон-светлый);
}

.иконка-вопроса {
  width: 30px;
  height: 30px;
  border: 2px solid var(--основной-цвет);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--основной-цвет);
  font-weight: 700;
  flex-shrink: 0;
}

.вопрос span:not(.иконка-вопроса) {
  flex: 1;
  font-size: 14px;
}

.вопрос i {
  color: var(--основной-цвет);
  transition: var(--переход);
}

.элемент-вопроса.активный .вопрос i {
  transform: rotate(180deg);
}

.ответ {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.элемент-вопроса.активный .ответ {
  max-height: 200px;
}

.ответ p {
  padding: 0 20px 20px 65px;
  font-size: 14px;
  color: var(--текст-светлый);
  line-height: 1.6;
}


.faq-page .элемент-вопроса {
  background: #ffffff;
  border: 1px solid rgba(155, 123, 184, 0.28);
  border-radius: 14px;
  box-shadow: none;
  margin-bottom: 12px;
  overflow: hidden;
}

.faq-page .вопрос {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  position: relative;
  padding-right: 52px;
}

.faq-page .ответ {
  max-height: 0;
  overflow: hidden;
  transition: max-height 280ms ease;
}

.faq-page .элемент-вопроса.активный .ответ {
  max-height: 320px;
}

.faq-page .ответ p {
  padding: 0 20px 18px 62px;
  font-size: 13px;
  color: var(--текст-светлый);
  line-height: 1.6;
  margin: 0;
}

.faq-page .элемент-вопроса .вопрос .faq-icon {
  flex: 0 0 auto !important;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(155, 123, 184, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--основной-цвет);
}

.faq-page .элемент-вопроса .вопрос .faq-question {
  flex: 1 1 auto !important;
  display: block;
  margin: 0;
  line-height: 1.4;
}

.faq-page .элемент-вопроса .вопрос .faq-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.faq-page .элемент-вопроса .вопрос .faq-arrow i {
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 220ms ease;
}

.faq-page .элемент-вопроса.активный .faq-arrow i {
  transform: rotate(180deg) !important;
}

.faq-page .элемент-вопроса.активный .вопрос i {
  transform: none !important;
}

.contact-form .кнопка {
  width: 100%;
  margin-top: 6px;
  border-radius: 14px;
  padding: 12px 14px;
}

.секция-страницы .заголовок-секции {
  margin-top: 60px;
}

.popup-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.16);
  z-index: 9999;
}

.popup-overlay.is-open {
  display: flex;
}

.popup-card {
  width: min(600px, 92vw);
  background: #fbf7fb;
  border: 2px solid #6b3f83;
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16);
  position: relative;
  overflow: hidden;
}

.popup-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #6b3f83;
  opacity: 0.9;
}

.popup-content {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
}

.popup-title {
  margin: 0 0 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #3b214a;
  font-size: 22px;
  line-height: 1.15;
}

.popup-text {
  margin: 0;
  color: #3b214a;
  opacity: 0.85;
  font-size: 16px;
  line-height: 1.35;
}

.popup-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.popup-logo {
  width: 160px;
  max-width: 200%;
  height: auto;
  display: block;
  transform: translateY(2px);
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.14));
}

/* .header,
header {
  overflow: visible;
} */

/* ===========================
   MEDIA QUERIES (собраны без дублей)
   =========================== */

@media (max-width: 768px) {
  .главный-баннер {
    height: 520px;
    margin: 16px;
  }

  .содержимое-баннера {
    padding-left: 24px;
    padding-right: 24px;
    max-width: 100%;
  }

  .сетка-цен {
    grid-template-columns: repeat(2, 1fr);
  }


  .главный-баннер .содержимое-баннера {
    padding: 10 20px;
    max-width: 100%;
  }
}

@media (max-width: 768px) {


  /* .заголовок-баннера {
    font-size: 28px;
  } */

  .подзаголовок-баннера {
    font-size: 16px;
  }

  .название-секции {
    font-size: 22px;
  }


  .слайдер-преподавателей {
    flex-direction: column;
  }

  .кнопка-слайдера {
    display: none;
  }

  .сетка-преподавателей {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  .карточка-преподавателя {
    scroll-snap-align: center;
  }


  .содержимое-атмосферы {
    grid-template-columns: 1fr;
  }

  .список-преимуществ {
    padding-left: 0;
  }

  .подзаголовок-секции {
    padding-left: 0;
  }
}

@media (max-width: 768px) {
  .содержимое-цен {
    grid-template-columns: 1fr;
  }

  .сертификат-внутри {
    height: 350px;
  }


  /* .секция-атмосфера .содержимое-атмосферы {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;
  } */
}

@media (max-width: 768px) {
  .главный-баннер {
    min-height: 80vh;
  }

  /* .заголовок-баннера {
    font-size: 26px;
  } */

  .кнопка {
    padding: 10px 20px;
    font-size: 12px;
  }

  .карточка-преподавателя {
    flex: 0 0 250px;
  }
}

@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body.menu-open .mobile-menu-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .элемент-вопроса {
    overflow: hidden;
  }

  .элемент-вопроса .ответ {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .3s ease, opacity .2s ease;
  }

  .элемент-вопроса.активный .ответ {
    max-height: 1200px;
    opacity: 1;
  }

  .faq-page .ответ * {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  

}

@media (max-width: 768px) {
  .popup-card {
    width: min(520px, 92vw);
  }

  .popup-content {
    grid-template-columns: 1fr;
    padding: 16px 16px 18px;
  }

  .popup-right {
    justify-content: flex-start;
    margin-top: 6px;
  }

  .popup-logo {
    width: 150px;
  }
}


@media (max-width: 768px) {
  .сетка-цен.цены-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .cert-hero {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   HERO OVERRIDES (integrated)
   - Mobile (<=820px): proper card width, no horizontal overflow,
     banner ratio + rounded corners, separate CTA under banner
   - Desktop (>=821px): image fills banner, controllable crop
   ========================================================= */

.hero-cta-mobile { display: none; }

/* ---------- MOBILE HERO ---------- */
@media (max-width: 768px) {

  /* IMPORTANT: do NOT use 100vw/calc(50% - 50vw ...) here — it causes overflow */
  .главный-баннер{
    /* width: auto !important; */
    /* max-width: 100% !important; */
    margin-top: 70px !important;   
    padding: 0 ;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }
  .главный-баннер {
    width: calc(100vw - 20px) !important; /* !!!!!!!!!!!!!! */
    max-width: none !important;
    margin-left: calc(50% - 50vw + 10px) !important;
    margin-right: calc(50% - 50vw + 20px) !important;
    margin-bottom: 0 !important;
  }

  /* frame for image */
  .главный-баннер .фон-баннера{
    position: relative;
    width: 100% !important;
    aspect-ratio: 16 / 12 !important;
    height: auto !important;
    overflow: hidden;
  }

  /* make picture/img actually fill the frame */
  .главный-баннер .фон-баннера picture,
  .главный-баннер .фон-баннера img{
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  .главный-баннер .фон-баннера img{
    object-fit: cover !important;
    object-position: center 30% !important; /* move the crop up/down */
  }

  /* overlay strictly inside frame */
  .главный-баннер .затемнение-баннера{
    inset: 0 !important;
    border-radius: inherit !important;
  }

  /* text layout */
  .главный-баннер .содержимое-баннера{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 10px 10px !important;
    height: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .главный-баннер .заголовок-баннера{
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
  }

  /* hide subtitle on mobile (as requested) */
  .главный-баннер .подзаголовок-баннера{
    display: none !important;
  }

  /* hide button inside banner: only keep CTA under banner */
  .главный-баннер .содержимое-баннера .кнопка{
    display: none !important;
  }

  /* CTA under banner */
  /* --- CTA UNDER BANNER --- */
  .hero-cta-mobile{
    display: block !important;
    padding: 5px 10px 10px  9px !important;    /* !!!!!!!!!!!!!! top right botoom left*/ 
    margin: 0 !important;
    box-sizing: border-box;

  }

  .hero-cta-mobile .кнопка{
    display: block !important;
    width: 100% !important;
    max-width: none !important;        /* если хочешь уже — уменьши */
    box-sizing: border-box;
    border-radius: 14px !important;
  }

  /* WHY section spacing */
  .секция-почему-мы .заголовок-секции{ margin-bottom: 4px !important; }
  .секция-почему-мы .подзаголовок-секции{ margin-top: 0 !important; }
}

/* ---------- DESKTOP HERO ---------- */
@media (min-width: 800px) {
  .главный-баннер{
    position: relative;
    overflow: hidden;
  }

  .главный-баннер .фон-баннера{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .главный-баннер .фон-баннера picture,
  .главный-баннер .фон-баннера img{
    width: 100%;
    height: 100%;
    display: block;
  }

  .главный-баннер .фон-баннера img{
    object-fit: cover;
    object-position: center 25% !important; /* move crop down/up on desktop */
  }
}


/* =========================================================
   TEACHERS — dots & slider controls (clean integration)
   ========================================================= */

/* Desktop: показываем только первые 3 точки */
.секция-преподаватели .точки-слайдера .точка:nth-child(n + 4) {
  display: none;
}

@media (max-width: 768px) {

  /* ========================
     DOTS (mobile = 5)
     ======================== */

  .точки-слайдера {
    position: relative;
    gap: 10px;
  }

  .секция-преподаватели .точки-слайдера .точка:nth-child(n + 4) {
    display: inline-block;
  }
  .секция-преподаватели {
    padding-top: 22px;
  }

  /* ========================
     SLIDER LAYOUT
     ======================== */

  .слайдер-преподавателей {
    position: relative;
    flex-direction: column;
    gap: 14px;
  }

  /* контейнер с карточками */
  .сетка-преподавателей {
    flex: none;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
    scroll-padding: 16px;

    /* “карман” под стрелки */
    padding: 12px 60px;
    gap: 18px;
  }

  .карточка-преподавателя {
    scroll-snap-align: center;
  }

  /* =========================================================
   TEACHERS — mobile: swipe-only (arrows OFF) + clean spacing
   ========================================================= */
@media (max-width: 768px) {

  /* Настройки: меняй тут */
  .секция-преподаватели{
    --teachers-gap: 60px;     /* расстояние между карточками */
    --teachers-pad: 16px;     /* отступы от краёв экрана */
  }

  /* Лента карточек */
  .секция-преподаватели .сетка-преподавателей{
    gap: var(--teachers-gap) !important;
    padding: 0 var(--teachers-pad) !important;
  }

  /* Полностью убираем стрелки */
  .секция-преподаватели .кнопка-слайдера{
    display: none !important;
  }
}

  /* ========================
     ARROWS (mobile overlay)
     ======================== */

  .кнопка-слайдера {
    display: flex !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;

    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    pointer-events: auto;
  }

  .кнопка-слайдера.предыдущий { left: 10px; }
  .кнопка-слайдера.следующий { right: 10px; }

  .кнопка-слайдера:active {
    transform: translateY(-50%) scale(0.96);
  }
}

/* =========================================================
   PRICES — mobile (<=768px) fixes
   ========================================================= */
@media (max-width: 768px) {
  .секция-цены {
    padding-top: 30px;   /* было 80px */
     padding-bottom: 32px;
  }

  .сетка-цен {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 14px;
  align-items: stretch;
}

  .карточка-цены {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
    padding: 8px 8px 8px 6px;
    gap: 0;
    align-items: center;
  }

  .карточка-цены * {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }


  /* Layout: gift certificate + price grid */
  .секция-цены .содержимое-цен {
    align-items: start;
    gap: 14px;
  }

  /* Gift certificate: remove scale/shift on mobile */
  .секция-цены .подарочный-сертификат {
    width: 100%;
    height: auto !important;
    transform: none !important;
    transform-origin: initial !important;
  }

  .секция-цены .подарочный-сертификат img {
    width: 100% !important; /* вместо 130% */
    height: 100%;
    object-fit: cover;
  }

  /* Certificate button: white like page background */
  .секция-цены .кнопка-сертификат {
    width: 100%;
    background: var(--белый) !important; /* или var(--фон-светлый) */
    color: var(--основной-темный);
    border: 2px solid var(--основной-цвет);
  }

  .лево-цены {
    min-width: 56px;
    padding-left: 0;
    padding-right: 0;
  }

  .число-цены {
    font-size: 32px;
   
  }

  .длительность-под-числом {
    margin-top: 4px;
    font-size: 14px;

  }

  /* Text block with type + price */
  .карточка-цены .детали-цены {
    gap: 6px;
    align-items: flex-start;
    text-align: left;
    
  }

  /* Type label: right-aligned */
  .карточка-цены .тип-цены {
    margin-left: -20px;
    font-size: 13px;
    line-height: 1.2;
    text-align: center !important;
    align-self: stretch;
  }

  .сумма-цены {
    margin-top: 4px;
    padding: 0 8px;
    font-size: 14px;
    margin-left: -30px;
  }

.секция-вопросы {
    padding-bottom: 20px;
  }

}

/* =========================================================
   ATMOSPHERE — mobile compact & unified version
   (stacked layout, compact sizes, no desktop changes)
   ========================================================= */
@media (max-width: 768px) {

  /* ========================
     SECTION SPACING
     ======================== */

  .секция-атмосфера {
    padding: 40px 0 28px;

    /* frame & offsets */
    --back-x: 12px;
    --back-y: -22px;
    --front-x: -8px;
    --front-y: 10px;
    --btn-x: 0px;
    --btn-y: -4px;
  }

  /* ========================
     SECTION TITLE
     ======================== */

  .секция-атмосфера .заголовок-секции {
    margin-bottom: 28px;
    gap: 18px;
  }

  .секция-атмосфера .линия-секции {
    width: 40px;
    height: 2px;
  }

  .секция-атмосфера .название-секции {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.15;
    text-transform: uppercase;
  }

  /* ========================
     CONTENT GRID
     ======================== */

  .секция-атмосфера .содержимое-атмосферы {
    grid-template-columns: 1fr !important;
    gap: 36px;
    margin-top: 54px;
  }

  /* ========================
     CARDS
     ======================== */

  .секция-атмосфера .карточка {
    min-height: 420px;
  }

  .секция-атмосфера .карточка-отзыва .карточка-внутри {
    min-height: 400px;
    padding: 28px 22px 24px;
    gap: 16px;
  }

  
  /* ========================
     REVIEW TEXT
     ======================== */

  .секция-атмосфера .текст-отзыва p {
    margin: 0 0 22px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--текст-темный);
  }

  .секция-атмосфера .автор-отзыва {
    font-size: 18px;
    font-weight: 600;
  }

  /* ========================
     MEDIA (PHOTO / VIDEO)
     ======================== */

  .секция-атмосфера .карточка-фото .медиа-контент,
  .секция-атмосфера .карточка-видео .медиа-контент {
    height: 400px;
  }

  .секция-атмосфера .медиа-контент.видео .кнопка-воспроизведения {
    width: 64px;
    height: 64px;
    font-size: 20px;
  }

  /* ========================
     FLOATING TEXT BUTTONS
     ======================== */

  .секция-атмосфера .кнопка.кнопка-ссылка,
  .секция-атмосфера .ссылка-медиа {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    padding: 0 !important;
    border-radius: 0 !important;

    font-size: 13px;
    font-weight: 600;
    color: var(--основной-цвет);
    text-decoration: none;
    opacity: 0.95;
  }

  .секция-атмосфера .кнопка.кнопка-ссылка:hover,
  .секция-атмосфера .ссылка-медиа:hover {
    opacity: 1;
    text-decoration: underline;
  }
  
}

@media (max-width: 820px) {

  .секция-инстаграм .контейнер,
  .секция-присоединяйся .контейнер,
  .секция-цены .контейнер,
  .секция-преподаватели .контейнер,
  .секция-атмосфера .контейнер,
  .секция-вопросы .контейнер {
    padding-left: 20px !important;   /* было 20px у .контейнер */
    padding-right: 25px !important;  /* оставляем как было */
  }

}



/* =========================================================
   PRICES — mobile fix (keep 2 cards per row, no cut)
   Only affects <=768px
   ========================================================= */
@media (max-width: 768px){

  /* 2 cards per row — оставляем как ты хочешь */
  .секция-цены .сетка-цен{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 14px !important;
  }

  /* НЕЛЬЗЯ резать содержимое карточки */
  .секция-цены .карточка-цены{
    overflow: visible !important;   /* было hidden — из-за этого режет */
    align-items: center;
    gap: 10px !important;
    padding: 10px !important;
  }

  /* Убираем отрицательные сдвиги — они и ломают */
  .секция-цены .карточка-цены .тип-цены{
    margin-left: 0 !important;
    text-align: center !important;
    align-self: stretch;
  }

  .секция-цены .карточка-цены .сумма-цены{
    margin-left: 0 !important;
  }

  /* Разрешаем правому блоку реально сжиматься (важно для grid/flex) */
  .секция-цены .карточка-цены .детали-цены{
    min-width: 0 !important;        /* перебиваем base min-width:150px */
    width: 100%;
    align-items: flex-start !important;
    text-align: center !important;
    gap: 6px;
  }

  /* Чуть компактнее типографика, чтобы в 2 колонки всё помещалось */
  .секция-цены .число-цены{ font-size: 34px !important; }
  .секция-цены .длительность-под-числом{ font-size: 12px !important; white-space: nowrap; }

  .секция-цены .тип-цены{
    font-size: 13px !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .секция-цены .сумма-цены{
    font-size: 13px !important;
    padding: 6px 10px !important;
    white-space: nowrap;
  }
}