@import url(./reset.css);
@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300..700&display=swap");

/* =============== BASE =============== */
* {
  box-sizing: border-box;
}
body * {
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

/* =============== TOP/HERO =============== */
.top {
  width: 100%;
  aspect-ratio: 1.88;
  background-image: url(../img/bg.webp);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.hero {
  width: 58.6%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.head {
  font-weight: 700;
  font-size: 64px;
  line-height: 115%;
  color: #0a0b0b;
}
.desc {
  margin: 0 auto;
  width: 66%;
  font-weight: 500;
  font-size: 24px;
  line-height: 150%;
  color: #0a0b0b;
}
.top .contact {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 32px;
  gap: 12px;
  margin: 0 auto;
  width: fit-content;
  height: 62px;
  background: #124c98;
  border: 1px solid #0e71f2;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  font-size: 24px;
  line-height: 125%;
  color: #fff;
}

/* =============== HEADER =============== */
.header {
  position: absolute;
  width: 100%;
  aspect-ratio: 1440/64;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 100px;
  top: 40px;
  background: #cdcdcd;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  z-index: 1000;
}
.header .logo {
  width: 12.43%;
  height: 100%;
  background: url(../img/Logo.svg) no-repeat center/contain;
}
.header .navigation {
  display: flex;
  align-items: center;
  gap: 3.75vw;
  margin: 0;
  padding: 0;
}
.header .navigation li {
  list-style: none;
}
.header .navigation li a {
  font-weight: 600;
  font-size: 16px;
  line-height: 125%;
  color: #0a0b0b;
  text-decoration: none;
}
.header .navigation li a.active {
  color: #124c98;
}
.header .contact-us {
  display: flex;
  align-items: center;
  padding: 8px 8px 8px 24px;
  gap: 12px;
  height: 40px;
  background: #124c98;
  border: 1px solid #0e71f2;
  border-radius: 24px;
  color: #fff;
  text-decoration: none;
}
.header .burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.header .burger img {
  width: 24px;
  height: 24px;
}

/* =============== SECTION 2 =============== */
.second {
  background-color: #fff;
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.second h2 {
  font-weight: 700;
  font-size: 40px;
  line-height: 125%;
  color: #0a0b0b;
}
.second .grid {
  margin-top: 2.5vw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.second .grid .card {
  display: flex;
  align-items: center;
  padding: 20px 40px;
  gap: 16px;
  width: 511px;
  height: 140px;
  background: #cdcdcd;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 30px;
  font-weight: 500;
  font-size: 24px;
  line-height: 150%;
  color: #000;
}

/* мобильный swiper для секции 2 — по умолчанию скрыт */
.second-swiper {
  display: none;
}
.second-swiper .swiper {
  width: 100%;
}
.second-swiper .card {
  background: #cdcdcd;
  border-radius: 20px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.second-swiper .card img {
  width: 48px;
  height: 48px;
}
.second-swiper .card span {
  font-size: 16px;
  line-height: 1.5;
}

/* =============== SECTION 3 =============== */
.third {
  width: 100%;
  aspect-ratio: 1440/1006;
  background: #cdcdcd;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.third h2 {
  font-weight: 700;
  font-size: 40px;
  line-height: 125%;
  text-align: center;
  color: #0a0b0b;
  margin-bottom: 2.5vmin;
}
.third .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
.third .grid .card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 40px;
  gap: 16px;
  width: 26vw;
  aspect-ratio: 378/268;
  background: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 30px;
}
.third .grid h3 {
  font-weight: 700;
  font-size: 32px;
  line-height: 125%;
  text-align: center;
  color: #0a0b0b;
}
.third .grid p {
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: #0a0b0b;
}
.third .grid a {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 32px;
  gap: 12px;
  background: #124c98;
  border-radius: 40px;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #f2f2f2;
  text-decoration: none;
}

/* мобильный swiper для секции 3 — по умолчанию скрыт */
.third-swiper {
  display: none;
}
.third-swiper .swiper {
  width: 100%;
}
.third-swiper .card {
  background: #fff;
  border-radius: 20px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}
.third-swiper .card h3 {
  font-size: 18px;
  font-weight: 700;
}
.third-swiper .card p {
  font-size: 14px;
  line-height: 1.5;
}
.third-swiper .card a {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 16px;
  gap: 12px;
  background: #124c98;
  border-radius: 16px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.25;
  color: #f2f2f2;
  text-decoration: none;
}

/* =============== SECTION 4 (desktop) =============== */
.fourth {
  width: 100%;
  aspect-ratio: 1440/1184;
  background: url(../img/bg-man.webp) no-repeat center/cover;
  margin-top: 10vmin;
  padding-top: 20%;
  padding-left: 100px;
}
.fourth .block {
  width: 670px;
}
.fourth .block h3 {
  font-weight: 700;
  font-size: 40px;
  line-height: 125%;
  color: #fff;
}
.fourth .block ul {
  margin-top: 5vmin;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 80px 76px;
  gap: 20px;
  width: 100%;
  height: 476px;
  background: rgba(18, 76, 152, 0.7);
  backdrop-filter: blur(5px);
  border-radius: 12px;
  font-weight: 700;
  font-size: 32px;
  line-height: 125%;
  color: #fff;
  list-style: none;
}
.fourth .block ul li {
  width: 100%;
  padding: 8px 0 14px 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.95);
  position: relative;
}
.fourth .block ul li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}

/* =============== REVIEWS + FAQ (desktop base) =============== */
.fifth {
  user-select: none;
  margin-bottom: 20vmin;
}
.fifth .grid {
  margin: 15vmin auto;
  width: 80%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}
.fifth .grid .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  gap: 30px;
  width: 100%;
  background: #cdcdcd;
  border-radius: 32px;
}
.fifth .grid .card .review {
  width: 95%;
  font-weight: 400;
  font-size: 18px;
  line-height: 135%;
  color: #0a0b0b;
  min-height: 4em;
}
.fifth .grid .card .name {
  font-weight: 600;
  font-size: 24px;
  line-height: 125%;
  color: #0a0b0b;
}
.fifth .grid .card .position {
  font-weight: 400;
  font-size: 18px;
  line-height: 135%;
  color: rgba(10, 11, 11, 0.6);
}
.fifth .grid .card > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* Swiper (по умолчанию скрыт — включаем на планшете/мобилке) */
.reviews-swiper {
  display: none;
}
.reviews-swiper .swiper {
  width: 100%;
}
.reviews-swiper .card {
  background: #cdcdcd;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ====== FAQ title ====== */
.fifth h2 {
  font-weight: 700;
  font-size: 44px;
  line-height: 55px;
  text-align: center;
  color: #0a0b0b;
  margin-bottom: 60px;
}

/* ====== FAQ ====== */
.fifth .grid2 {
  width: 100%;
  user-select: none;
}
.fifth .grid2 ul {
  margin: 0 auto;
  width: 63%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 0;
}
.fifth .grid2 li {
  width: 100%;
  padding: 15px 40px;
  background: #cdcdcd;
  border-radius: 30px;
  font-weight: 500;
  font-size: 24px;
  line-height: 150%;
  color: #000;
  list-style: none;
}
.fifth .grid2 li .row {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 52px;
}
.fifth .grid2 li .row .num {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  background: #124c98;
  border-radius: 50%;
  font-family: "Exo 2", sans-serif;
  font-weight: 600;
  font-size: 36px;
  color: #fcfff4;
  flex: 0 0 52px;
}
.fifth .grid2 li .row .question {
  font-weight: 500;
  font-size: 24px;
  line-height: 150%;
  color: #000;
  flex: 1 1 auto;
  margin-right: 12px;
}
.fifth .grid2 li:not(.is-open) .row .question {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fifth .grid2 li .row .plus {
  background: transparent url(../img/plus.svg) no-repeat center/contain;
  border: 0;
  width: 32px;
  height: 32px;
  cursor: pointer;
  flex: 0 0 32px;
  margin-left: auto;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease;
}
.fifth .grid2 li .row .plus[aria-expanded="true"] {
  transform: rotate(45deg);
}
.fifth .grid2 li .answer {
  width: 100%;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.35s ease,
    opacity 0.35s ease;
  margin-left: calc(52px + 20px);
  margin-top: 8px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.fifth .grid2 li.is-open .answer {
  max-height: 500px;
  opacity: 1;
}

/* =============== SECTION 6 (CTA) =============== */
.six {
  width: 100%;
  aspect-ratio: 1444/890;
  background: url(../img/bg-woman.webp) no-repeat center/contain;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 100px;
}
.six .info {
  width: 33vw;
  display: flex;
  flex-direction: column;
  gap: 69px;
}
.six .info h3 {
  font-weight: 700;
  font-size: 40px;
  line-height: 125%;
  color: #0a0b0b;
}
.six .info a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 32px;
  gap: 12px;
  width: 100%;
  background: #124c98;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
  border-radius: 40px;
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  color: #fff;
  text-decoration: none;
}

/* =============== FOOTER (BASE) =============== */
.footer {
  width: 100%;
  aspect-ratio: 1440/264;
  background: #124c98;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer .container {
  width: 87%;
  min-height: 108px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.footer .block1 {
  display: block;
  text-align: center;
  color: #fff;
  width: 45%;
}
.footer .block1 p {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
}
.footer .block1 .link {
  margin: 8px auto 0;
  text-align: center;
}
.footer .block1 a {
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
  font-size: 10px;
  line-height: 12px;
  text-decoration: none;
  color: #fff;
}
.footer .links {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  margin: 0;
  padding: 0;
}
.footer .links li {
  list-style: none;
}
.footer .links li a {
  font-weight: 600;
  font-size: 16px;
  line-height: 125%;
  color: #fff;
  text-decoration: none;
}
.footer .block3 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer .block3 span {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: #fff;
}
.footer .block3 .subscribe {
  position: relative;
  width: 100%;
}
.footer .block3 .subscribe .input {
  padding: 10px;
  width: 100%;
  height: 35px;
  border: 0.5px solid #fff;
  border-radius: 12px;
  background: transparent;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 15px;
  color: #fff;
}
.footer .block3 .subscribe .input::placeholder {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 15px;
  color: #fff;
}
.footer .block3 .subscribe img {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
}
.footer .socials {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 94px;
  height: 30px;
}

/* =============== UNIFY CARD HEIGHTS =============== */
.third .grid,
.fifth .grid {
  align-items: stretch;
}
.third .grid .card,
.fifth .grid .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.reviews-swiper .swiper-wrapper {
  align-items: stretch;
}
.reviews-swiper .swiper-slide {
  height: auto;
  display: flex;
}
.reviews-swiper .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* =============== SWIPER NAV =============== */
.reviews-swiper .swiper-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}
.reviews-swiper .swiper-button-prev,
.reviews-swiper .swiper-button-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  --swiper-navigation-size: 18px;
  background: transparent;
  border: 2px solid #124c98;
  color: #124c98;
  position: static;
  display: flex;
  justify-content: center;
  align-items: center;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
  box-shadow: none;
}
.reviews-swiper .swiper-button-prev:hover,
.reviews-swiper .swiper-button-next:hover {
  background: rgba(14, 113, 242, 0.06);
}
.reviews-swiper .swiper-button-disabled {
  border-color: #e5e7eb !important;
  color: #9ca3af !important;
  background: transparent !important;
  cursor: default;
  opacity: 1 !important;
}
.reviews-swiper .swiper-button-prev::after,
.reviews-swiper .swiper-button-next::after {
  font-weight: 700;
}

/* ==== FIX: FAQ answer — не вылазит за пределы экрана ==== */
.fifth .grid2 li,
.fifth .grid2 li .answer {
  max-width: 100%;
  overflow-x: hidden;
}
.fifth .grid2 li .answer {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  width: fit-content;
}
.fifth .grid2 li .answer * {
  max-width: 100%;
}

/* =============== ACCESSIBILITY =============== */
@media (prefers-reduced-motion: reduce) {
  .fifth .grid2 li .row .plus {
    transition: none;
  }
  .fifth .grid2 li .answer {
    transition: none;
  }
}

/* =============== TABLET + MOBILE ≤1024px =============== */
@media (max-width: 1024px) {
  /* Header / меню */
  .header {
    top: 16px;
    padding: 12px 50px; /* 50px по бокам на планшете и мобилке (ниже переопределим для ≤719px) */
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    aspect-ratio: unset;
    min-height: 56px;
    column-gap: 12px;
  }
  .header .logo {
    width: 160px;
    height: 40px;
    background: url(../img/Logo.svg) no-repeat left center/contain;
    justify-self: start;
  }
  .desktop-nav {
    display: none !important;
  }
  .header .contact-us {
    justify-self: center;
    height: 36px;
    padding: 6px 14px;
    gap: 8px;
    font-size: 14px;
    line-height: 1;
  }
  .header .burger {
    display: inline-flex;
  }

  .menu-panel[hidden] {
    display: none !important;
  }
  .menu-panel {
    position: absolute;
    right: 50px; /* выровнено с паддингом хедера (ниже переопределим для ≤719px) */
    top: calc(100% + 12px);
    width: 240px;
    padding: 16px 16px 20px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    z-index: 1001;
  }
  .menu-panel .menu-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #0a0b0b;
  }
  .menu-panel .navigation {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 8px 0 0;
  }
  .menu-panel .navigation a.active {
    color: #124c98;
  }

  .menu-overlay[hidden] {
    display: none !important;
  }
  .menu-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1000;
  }

  /* Hero */
  .top {
    aspect-ratio: unset;
    min-height: 477px;
    padding: 104px 16px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero {
    width: 66.666%;
    gap: 20px;
    max-width: 480px;
  }
  .head {
    font-size: 32px;
    line-height: 120%;
  }
  .desc {
    width: 100%;
    font-size: 16px;
    line-height: 150%;
  }
  .top .contact {
    height: 48px;
    font-size: 16px;
    border-radius: 20px;
    padding: 12px 20px;
    width: 66.666%;
    max-width: 420px;
    margin: 0 auto;
  }

  /* Section 2 */
  .second {
    aspect-ratio: unset;
    padding: 40px 64px 24px;
  }
  .second h2 {
    font-size: 32px;
    width: 75%;
    margin: 0 auto;
    text-align: center;
  }
  .second .grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 30px;
    margin-top: 24px;
  }
  .second .grid .card {
    width: 100%;
    min-height: 180px;
    padding: 20px 16px;
    gap: 12px;
    font-size: 16px;
    border-radius: 20px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .second .grid .card img {
    width: 48px;
    height: 48px;
  }
  .second .grid .card span {
    display: block;
  }

  /* Section 3 */
  .third {
    aspect-ratio: unset;
    padding: 40px 64px;
  }
  .third h2 {
    font-size: 28px;
  }
  .third .grid {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
  }
  .third .grid .card {
    width: 100%;
    aspect-ratio: unset;
    padding: 16px;
    gap: 12px;
    border-radius: 20px;
  }
  .third .grid h3 {
    font-size: 18px;
  }
  .third .grid p {
    font-size: 14px;
    line-height: 1.4;
  }
  .third .grid a {
    font-size: 14px;
    padding: 10px 16px;
    border-radius: 16px;
  }

  /* Section 4 */
  .fourth {
    aspect-ratio: unset;
    height: 598px;
    background: url(../img/bg-man.webp) no-repeat center/cover;
    padding: 0;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .fourth .block {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
  }
  .fourth .block h3 {
    margin: 32px auto 0;
    width: 100%;
    max-width: 95%;
    font-size: 26px;
    color: #fff;
  }
  .fourth .block ul {
    width: 100%;
    max-width: 598px;
    height: 50%;
    max-height: 426px;
    padding: 80px 40px;
    gap: 20px;
    font-size: 24px;
    font-weight: 600;
    border-radius: 12px;
    margin: 36px auto 0;
    align-items: flex-start;
    text-align: left;
    background: rgba(18, 76, 152, 0.7);
    backdrop-filter: blur(5px);
    color: #fff;
  }
  .fourth .block ul li {
    padding: 10px 0 14px 44px;
  }

  /* Reviews — только Swiper */
  .fifth .grid.reviews-desktop {
    display: none !important;
  }
  .reviews-swiper {
    display: block !important;
    width: 100%;
    margin: 40px 0;
    padding: 0;
  }
  .reviews-swiper .swiper {
    width: 100%;
  }

  /* Swiper images sizes */
  .reviews-swiper .card img:first-of-type {
    width: 59px;
    height: 47px;
    object-fit: contain;
    flex: 0 0 auto;
  }
  .reviews-swiper .card img:nth-of-type(2) {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
  }
  .reviews-swiper .card .review {
    font-size: 18px;
  }
  .reviews-swiper .card .name {
    font-size: 24px;
    font-weight: 600;
  }
  .reviews-swiper .card .position {
    font-size: 18px;
    font-weight: 400;
  }

  /* FAQ */
  .fifth {
    margin-bottom: 56px;
  }
  .fifth h2 {
    font-size: 28px;
    line-height: 1.25;
    margin: 32px 0 24px;
  }
  .fifth .grid2 ul {
    width: 92%;
    gap: 12px;
  }
  .fifth .grid2 li {
    padding: 12px 16px;
    font-size: 16px;
    border-radius: 20px;
  }
  .fifth .grid2 li .row {
    gap: 12px;
    min-height: 36px;
  }
  .fifth .grid2 li .row .num {
    width: 36px;
    height: 36px;
    font-size: 20px;
    line-height: 1;
    flex: 0 0 36px;
  }
  .fifth .grid2 li .row .question {
    font-size: 16px;
    margin-right: 8px;
  }
  .fifth .grid2 li .row .plus {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }
  .fifth .grid2 li .answer {
    margin-left: calc(36px + 12px);
    font-size: 15px;
  }
  .fifth .grid2 li .answer img {
    display: none !important;
  }

  /* CTA */
  .six {
    aspect-ratio: unset;
    background-size: cover;
    background-position: center right;
    padding: 56px 64px;
    margin-top: 24px;
  }
  .six .info {
    width: 66.666%;
    max-width: 560px;
    gap: 24px;
  }
  .six .info h3 {
    font-size: 26px;
  }
  .six .info a {
    width: 66.666%;
    max-width: 420px;
    font-size: 16px;
    padding: 12px 16px;
    border-radius: 16px;
  }
}

/* =============== FOOTER: MOBILE ≤719px =============== */
@media (max-width: 719px) {
  /* HEADER: логотип 45%, скрыть "Связаться с нами" */
  .header {
    padding: 12px 16px;
    grid-template-columns: 45% auto;
  }
  .header .logo {
    width: 100%;
  }
  .header .contact-us {
    display: none;
  }
  .menu-panel {
    right: 16px;
  }

  /* типографика: 24/600 для заголовков, 16/600 для подзаголовка и CTA */
  .head,
  .second h2,
  .third h2,
  .fourth .block h3,
  .fifth h2,
  .six .info h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
  }
  .desc,
  .top .contact {
    font-size: 16px;
    font-weight: 600;
  }

  /* hero */
  .hero {
    width: 100%;
    max-width: 390px;
  }
  .top .contact {
    width: 100%;
    max-width: 390px;
  }

  /* Section 2: включаем swiper, сетку прячем,
     убираем боковые паддинги у секции — swiper от края до края */
  .second {
    padding: 32px 0 24px;
  }
  .second h2 {
    width: 100%;
    margin: 0 auto 16px;
    padding: 0 16px; /* немного воздуха для заголовка */
  }
  .second .grid {
    display: none;
  }
  .second-swiper {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  /* Section 3: включаем swiper, сетку прячем,
     swiper тоже от края до края */
  .third {
    padding: 32px 0 24px;
  }
  .third h2 {
    padding: 0 16px; /* чтобы заголовок не лип к краю */
  }
  .third .grid {
    display: none;
  }
  .third-swiper {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
  }

  /* Section 4: мобильная версия блока с мужиком —
     фон на всю ширину, текст сверху, синий блок внизу */
  .fourth {
    position: relative;
    width: 100%;
    margin: 24px 0 0;
    padding: 0;
    background: url(../img/bg-man.webp) no-repeat center/cover;
    aspect-ratio: 390/521;
    display: flex;
    align-items: stretch;
    justify-content: center;
  }
  .fourth .block {
    position: relative;
    width: 100%;
    max-width: 390px;
    margin: 0 auto;
    padding: 32px 16px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .fourth .block h3 {
    margin: 0 0 24px;
    text-align: left;
  }
  .fourth .block ul {
    margin-top: auto;
    display: flex;
    flex-direction: column;

    justify-content: space-between;
    width: 286px; /* фиксированная ширина */
    height: 204px; /* фиксированная высота */
    padding: 16px 16px 12px;
    font-size: 16px; /* базовый размер шрифта */
    gap: 8px;
    border-radius: 12px;
    background: #124c98b2;
    backdrop-filter: blur(10px);
    margin-left: auto; /* чтобы блок был по центру */
    margin-right: auto;
  }

  .fourth .block ul li {
    padding: 4px 0 4px 28px;
    font-weight: 600;
    font-size: 16px; /* сами пункты тоже 16px */
  }
  .fourth .block ul li::before {
    left: 8px;
    width: 10px;
    height: 10px;
  }

  /* Отзывы уже включены, просто ужмём отступы */
  .reviews-swiper {
    padding: 0 0 24px;
  }

  /* FAQ: вопросы в две строки (line-clamp:2), мелче типографика */
  .fifth h2 {
    margin: 24px 16px 16px;
  }
  .fifth .grid2 ul {
    width: 100%;
    padding: 0 16px 24px;
  }
  .fifth .grid2 li {
    padding: 10px 12px;
  }
  .fifth .grid2 li .row .question {
    font-size: 16px;
    line-height: 1.4;
  }
  .fifth .grid2 li:not(.is-open) .row .question {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* максимум две строки */
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .six {
    padding: 32px 16px 40px;
    justify-content: flex-end;
    background-position: center;
    background-size: cover;
    background-image: url(../img/bg-woman-mobile.jpg);
  }
  .six .info {
    width: 100%;
    max-width: 358px;
    margin: 0 auto;
    padding: 20px 16px;
    gap: 16px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 24px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  }
  .six .info h3 {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
  }
  .six .info a {
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 16px;
  }

  /* FOOTER: только блоки 1 и 3, в третьем — только соцсети */
  .footer {
    aspect-ratio: unset;
    padding: 24px 16px;
  }
  .footer .container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    place-items: center;
  }
  .footer .block1 {
    width: 100%;
  }
  .footer .links {
    display: none;
  }
  .footer .block3 {
    width: auto;
    max-width: none;
    align-items: center;
  }
  .footer .block3 span,
  .footer .block3 .subscribe {
    display: none;
  }
  .footer .socials {
    margin: 0 auto;
  }
}

/* =============== FOOTER: TABLET 720–1024px =============== */
@media (min-width: 720px) and (max-width: 1024px) {
  .footer {
    aspect-ratio: unset;
    padding: 24px 50px; /* под хедер */
  }
  .footer .container {
    width: 100%;
    display: flex;
    gap: 24px;
    align-items: flex-start;
  }

  .footer .block1 {
    width: 33%;
  }

  /* В последней колонке убираем подпись и поле подписки — остаются только соцсети */
  .footer .block3 span,
  .footer .block3 .subscribe {
    display: none;
  }

  .footer .block3 {
    width: fit-content;
    margin-left: auto;
    align-self: center;
    max-width: none;
  }

  .footer .socials {
    margin: 0 0 0 auto;
  }
}

nav li { position: relative; width: 100%; }
nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.45;
  color: #0a0b0b;
  text-decoration: none;
  white-space: nowrap;
  transition: color .3s ease;
}
nav a:hover { color: #0e71f2; }

/* шевроны */
nav .chevron { display: inline-flex; line-height: 0; transition: transform .2s ease; }

/* родитель с подменю */
nav li.has-children { position: relative; }

/* показать подменю по hover и focus-within (все уровни) */
nav li.has-children:hover > .sub-menu,
nav li.has-children:focus-within > .sub-menu {
  display: flex;
  opacity: 1;
  visibility: visible;
}

/* Базовый дропдаун (уровень 2: depth=1, выпадает вниз) */
nav .sub-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 0;
  margin: 0;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 15px 0 #0a0b0b26;
  z-index: 50;
  list-style: none;
  display: none;
  flex-direction: column;
  gap: 16px;
  transition: opacity .15s ease, visibility 0s;
  opacity: 0;
  visibility: hidden;
  min-width: 220px;
}

/* «мостик» для уровня 2 */
nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -16px;
  height: 16px;
}

/* Флайаут (уровень 3: sub-menu внутри sub-menu — вправо) */
nav .sub-menu .sub-menu {
  top: -16px;
  left: calc(100% + 16px); /* смещение вправо от родителя */
  /* чтобы перекрытия были поверх соседей */
  z-index: 60;
}

/* Мостик для флайаута (перехват hover между 2-м и 3-м уровнем) */
nav .sub-menu .sub-menu::before {
  content: "";
  position: absolute;
  top: 0; left: -16px;
  width: 16px; height: 100%;
}

/* Повороты шевронов при раскрытии */
nav li.depth-0.has-children:hover > a .chevron-down,
nav li.depth-0.has-children:focus-within > a .chevron-down {
  transform: rotate(180deg);
}
nav li.depth-1.has-children:hover > a .chevron-right,
nav li.depth-1.has-children:focus-within > a .chevron-right {
  transform: translateX(2px); /* лёгкий «толчок» вместо поворота */
}

/* сглаживание исчезновения */
@media (hover:hover) and (pointer:fine) {
  nav li.has-children > .sub-menu {
    transition: visibility .2s step-end, opacity .2s;
    opacity: 0; visibility: hidden;
  }
  nav li.has-children:hover > .sub-menu {
    opacity: 1; visibility: visible;
    transition: opacity .15s ease, visibility 0s;
  }
}

/* Уточнения для корня, чтобы горизонтальный ряд не ломался */
nav > ul { align-items: center; }
nav > ul > li { width: auto; }

.page .top {
  min-height: unset!important;
  padding: 100px 15px 30px!important;
  background: unset;
  aspect-ratio: unset;
}
.page .header {
  margin-bottom: 0;
}
.page .container {
  padding-bottom: 0;
}

.page__content {
  max-width: 1440px;
  margin: 30px auto 100px;
  padding: 0 15px;
}
.page__content p,
.page__content li {
  font-size: 18px;
}
.page__content a {
  text-decoration: underline;
}
.page__content > *:not(:last-child) {
  margin-bottom: 1em;
}