/* Home */
.home { --home-width: min(1340px, 100% - 100px); }
.eyebrow { display: inline-flex; margin-bottom: 14px; color: #fff; font: 500 14px/30px var(--font-body); letter-spacing: 0; }
.eyebrow::before { content: "["; margin-right: 3px; }
.eyebrow::after { content: "]"; margin-left: 3px; }

/* Buttons */
.btn-coral {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  align-self: flex-start;
  min-width: 216px;
  margin-top: 39px;
  padding: 15px 26px 16px 30px;
  border: 1px solid var(--coral);
  border-radius: 15px;
  background: var(--coral);
  color: #fff;
  line-height: 27px;
  letter-spacing: .01em;
  transition: background-color .3s, border-color .3s;
}
.btn-coral:hover { background: #f57e7e; border-color: #f57e7e; }
.btn-coral .icon { width: 11.4px; height: 11.4px; margin-top: 2px; }
.btn-outline .icon { margin-top: 3px; }

/* Hero slider */
.hero { padding: 20px 20px 0; }
.hero__slides { display: grid; isolation: isolate; }
.slide {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  min-height: 855px;
  /* Mirrors the original: 10.5% left inset, content capped at 1340px and centred on wide screens. */
  padding: 15px calc(15px + max(0px, (89.5% - 1355px) / 2)) 15px calc(10.5% + max(0px, (89.5% - 1355px) / 2));
  overflow: hidden;
  border-radius: 25px;
  opacity: 0;
  visibility: hidden;
  isolation: isolate;
  transition: opacity 1.2s ease-in-out, visibility 0s 1.2s;
}
.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #313131 url(../../img/home/hero-bg.jpg) center / cover;
  background-blend-mode: overlay;
}
.slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity 1.2s ease-in-out, visibility 0s; }
.slide.is-active::before { animation: hero-zoom 8s ease-out both; }
.slide.is-active .hero__copy { animation: hero-copy 1.2s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes hero-zoom { to { transform: scale(1.045); } }
@keyframes hero-copy { from { opacity: 0; transform: translateY(24px); } }
.hero__copy { display: flex; flex: 1; flex-direction: column; justify-content: center; min-width: 0; padding: 20px; }
.hero__title { color: #fff; font: 400 80px/90px var(--font-heading); letter-spacing: -2.4px; }
.hero__text { max-width: 60%; margin-top: 19px; color: #fff; font-size: 32px; line-height: 36px; }
.hero__counter {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 500px;
  padding: 9px 43px 9px 31px;
  border-radius: 25px;
  background: #fff;
}
.hero__counter strong { width: max-content; background: var(--grad-teal); -webkit-background-clip: text; background-clip: text; color: transparent; font: 600 50px/50px var(--font-heading); letter-spacing: -1.5px; }
.hero__counter span { margin-top: 10px; color: #333; font: 400 20px/25px var(--font-heading); letter-spacing: -.6px; }
.hero__dots { display: flex; justify-content: center; align-items: center; height: 52px; }
.hero__dots button { display: grid; place-items: center; width: 28px; height: 36px; padding: 0; border: 0; background: none; }
.hero__dots button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #8e9a9f; transition: background-color .25s; }
.hero__dots button[aria-current="true"]::before { background: #6ce0ca; }
.hero__dots button:hover::before { background: #c3f6eb; }

/* Course lists */
.home .section-title { max-width: 1320px; margin-inline: auto; }
.home__offline-title { margin-top: 57px; margin-bottom: 49px; }
.home__online-title { margin-top: 93px; }
.home .course-grid { width: var(--home-width); }
.home__offer { display: block; width: fit-content; margin: 70px auto 49px; }
.home__offer img { display: block; }

/* About */
.home-about { display: grid; grid-template-columns: 1fr 1fr; width: var(--home-width); margin: 171px auto 0; }
.home-about > div { padding: 10px; }
.home-about__title { margin-bottom: 50px; color: #fff; font-size: 80px; line-height: 90px; letter-spacing: -4px; }
.home-about__stat { display: flex; justify-content: center; gap: 30px; max-width: 66%; }
.home-about__stat strong { padding-right: 10px; font: 700 120px/108px var(--font-body); letter-spacing: -6px; color: #1f1f1f; background: linear-gradient(106deg, #8258c8, #2c84c8); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 2px transparent; }
.home-about__stat span { display: flex; align-items: flex-end; flex: 1 1 0; color: #adadad; font: 600 20px/30px "Roboto Slab", sans-serif; }
.home-about__text { color: #fff; font-weight: 400; }
.home-about__text strong { font-weight: 700; }
.home-about__text p + p { margin-top: 30px; }
.home-about__text .btn-outline { margin-top: 40px; font-weight: 500; }

/* Scrolling band */
.home-band { position: relative; margin-top: 150px; }
.home-band__glow { position: absolute; top: -35vw; left: -35%; z-index: -1; width: 100%; max-width: none; pointer-events: none; }
/* Dark slanted bar that forms the angled top edge of the FAQ panel */
.home-band::after { content: ""; position: absolute; top: calc(100% + 20px); left: 20px; right: 17px; height: 130px; background: #1a1a1a; transform: rotate(-2.07deg); }
.home-band .marquee { margin: 0; width: calc(100% + 10px); margin-left: -5px; }

/* FAQ */
.faq {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  margin: 120px 20px 0;
  padding: 150px max(40px, (100% - 1340px) / 2);
  overflow: hidden;
  border-radius: 25px;
  background: #1a1a1a;
}
.faq__lines { width: 400px; margin: 60px 0 0 -230px; }
.faq__content { padding: 20px; }
.faq__title { width: calc(100% + 34px); color: #fff; font-size: 60px; line-height: 70px; letter-spacing: -3px; }
.faq__title .eyebrow { display: block; }
.faq__title a { color: var(--teal); font-weight: 700; }
.faq__list { margin-top: 35px; }
.faq__list details { border-bottom: 1px solid #434343; }
.faq__list summary {
  position: relative;
  display: block;
  padding: 35px 29px 35px 0;
  color: #fff;
  font: 600 30px/35px Roboto, sans-serif;
  letter-spacing: -.9px;
  list-style: none;
  cursor: pointer;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  background: #111;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1017 1000'%3E%3Cpath transform='matrix(1 0 0 -1 0 850)' d='M823 817c73 71 195 20 195-81v-772c0-63-52-114-115-114h-788c-103 0-154 124-80 196z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1017 1000'%3E%3Cpath transform='matrix(1 0 0 -1 0 850)' d='M823 817c73 71 195 20 195-81v-772c0-63-52-114-115-114h-788c-103 0-154 124-80 196z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.faq__list details[open] summary { color: var(--teal); }
.faq__list details[open] summary::after {
  background: var(--teal);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 982 1000'%3E%3Cpath transform='matrix(1 0 0 -1 0 850)' d='M32 660c-69 71-19 190 81 190l757-1c62 0 112-50 112-112l-1-775c-1-100-123-150-193-78z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 982 1000'%3E%3Cpath transform='matrix(1 0 0 -1 0 850)' d='M32 660c-69 71-19 190 81 190l757-1c62 0 112-50 112-112l-1-775c-1-100-123-150-193-78z'/%3E%3C/svg%3E");
}
.faq__list details p { padding: 0 44px 54px 0; color: #fff; font: 400 16px/30px Roboto, sans-serif; }

/* Trainers */
.trainers { width: var(--home-width); margin: 151px auto 0; }
.trainers__heading { display: grid; grid-template-columns: 1fr 1fr; }
.trainers__heading > * { padding: 20px; }
.trainers__heading > p { padding-top: 101px; }
.trainers__title { color: #fff; font-size: 93px; line-height: 108.5px; letter-spacing: -4.65px; }
.trainers__title, .trainers .eyebrow { display: block; }
.trainers__brand { width: fit-content; padding-right: 5px; color: #1f1f1f; background: linear-gradient(102deg, #8258c8, #2c84c8); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 2px transparent; font: 700 87px/87px var(--font-body); letter-spacing: -4.35px; }
.trainer-list { display: flex; gap: 20px; padding: 10px; }
.trainer { flex: 1; margin: 0; text-align: center; }
.trainer img { display: block; width: 100%; margin-bottom: 15px; }
.trainer strong { display: block; margin-bottom: 4px; color: #fff; font: 600 22px/27.5px Roboto, sans-serif; letter-spacing: -1.1px; }
.trainer span { display: block; color: #fff; }

/* Numbers */
.numbers {
  display: grid;
  grid-template-columns: 20.03fr 21.32fr 15.1fr 23.6fr 20fr;
  align-items: start;
  margin: 150px max(20px, (100% - 1566px) / 2) 0;
  padding: 77px max(40px, (min(100% - 40px, 1566px) - 1340px) / 2) 149px;
  border: 1px solid #3f3f3f;
  border-radius: 25px;
}
.numbers__item { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 10px; }
.numbers__item:nth-child(-n+4)::after { content: ""; position: absolute; top: 12px; right: 0; width: 2px; height: 108px; background: #3c3c3c; }
.numbers__item:nth-child(4) { align-items: center; gap: 17px; }
.numbers__item span { color: #adadad; font: 400 16px/24px "Roboto Slab", sans-serif; }
.numbers__value {
  width: fit-content;
  color: #1f1f1f;
  background: linear-gradient(127deg, #45d0bd, #44b6e9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px transparent;
  font: 600 73px/73px var(--font-heading);
}
.numbers__item:nth-child(2) .numbers__value { font-size: 68px; line-height: 68px; }
.numbers__value--purple { font-size: 62px; line-height: 62px; background-image: linear-gradient(123deg, #8258c8, #2c84c8); }
.numbers__item:nth-child(4) > * { align-self: flex-start; margin-left: 6px; }
.numbers__title { margin-left: 18px; padding: 10px; color: #fff; font-size: 45px; line-height: 52.5px; letter-spacing: -2.25px; }
.numbers__title span { background: linear-gradient(102deg, #8258c8, #2c84c8); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Reviews */
.reviews { margin: 150px 20px 0; }
.reviews__header { padding: 160px 20px 53px; border-radius: 25px 25px 0 0; background: #ecf0f4; text-align: center; }
.reviews__header img { display: block; margin: 3px auto 47px; }
.reviews__title { max-width: none; padding-inline: 20%; }
.reviews__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; padding: 0 max(40px, (100% - 1580px) / 2) 80px; background: #ecf0f4; }
.reviews__column { display: grid; gap: 20px; padding: 10px; }
.review { margin: 0; padding: 70px 50px 55px; border-radius: 25px; background: #fff; color: #222; font-weight: 400; }
.review::before { content: ""; display: block; height: 30px; margin: 0 0 27px; background: url(../../img/home/stars.png) left 11px / 71px 12px no-repeat; }
.review__name { text-align: center; }
.review__name strong { font-weight: 700; }
.review__name--spaced { margin-bottom: 30px; }

@media (max-width: 767px) {
  .home { --home-width: calc(100% - 40px); }
  .slide { flex-direction: column; justify-content: flex-end; gap: 18px; min-height: 659px; padding: 15px 15px 15px 37px; }
  .hero__copy { width: auto; }
  .hero__title { font-size: 35px; line-height: 39.375px; letter-spacing: -1.05px; }
  .hero__counter { align-self: stretch; width: auto; padding: 9px 20px 9px 9px; }
  .hero__counter span { font-size: 16px; line-height: 20px; }
  .home .section-title { width: calc(100% - 60px); }
  .home__offline-title { margin-top: 47px; }
  .home__offer { width: calc(100% - 60px); }
  .home__offer img { width: 100%; }

  .home-about { grid-template-columns: 1fr; margin-top: 101px; }
  .home-about__title { font-size: 40px; line-height: 48px; letter-spacing: -2px; }
  .home-about__stat strong { font-size: 85px; line-height: 76.5px; letter-spacing: -4.25px; }

  .home-band { margin-top: 80px; }
  .home-band::after { right: 20px; }
  .faq { grid-template-columns: 1fr; padding: 150px 20px; }
  .faq__lines { width: 270px; margin: 60px 0 20px -42px; }
  .faq__title { font-size: 32px; line-height: 40px; letter-spacing: -1.6px; }
  .faq__list summary { font-size: 25px; line-height: 29.17px; letter-spacing: -.75px; }

  .trainers { margin-top: 81px; }
  .trainers__heading { grid-template-columns: minmax(0, 1fr); }
  .trainers__title { font-size: 93px; line-height: 116.25px; }
  .trainers__heading > p { padding-top: 101px; font-size: 140px; line-height: 140px; letter-spacing: -7px; white-space: nowrap; }
  .trainer-list { flex-direction: column; }
  .trainer strong { line-height: 29.6px; }

  .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 80px; padding: 77px 20px 149px; }
  .numbers__item { overflow: hidden; }
  .numbers__item:nth-child(4)::after { content: none; }
  .numbers__value, .numbers__item:nth-child(2) .numbers__value, .numbers__value--purple { font-size: 60px; line-height: 60px; }
  .numbers__item:nth-child(4) { align-items: flex-start; }
  .numbers__item:nth-child(4) > * { margin-left: 0; }
  .numbers__title { grid-column: 1 / -1; line-height: 56.25px; }

  .reviews { margin-top: 80px; }
  .home .reviews__title { width: auto; }
  .reviews__grid { grid-template-columns: 1fr; padding: 0 20px 48px; }
  .reviews__column:nth-child(n+3) { display: none; }
  .reviews__column + .reviews__column { margin-top: -20px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .slide { flex-direction: column; justify-content: flex-end; gap: 18px; }
  .hero__copy { width: auto; }
  .hero__counter { align-self: flex-start; width: min(500px, 100%); }
}