/* =========================================================
   Страница «О нас»
   ========================================================= */

/* ---------- Верх страницы ---------- */
.about-top { display: flex; margin: 22rem 0 44rem; }
.about-title { font-family: var(--font-text); font-weight: 300; line-height: 120%; color: var(--c-text); font-size: 22rem; max-width: 100%; margin: 0 0 20rem; padding: 0 10rem; }
.about-lead { font-weight: 400; line-height: 140%; color: var(--c-text); max-width: 660rem; margin-left: auto; margin-right: auto; font-size: 14rem; margin-bottom: 40rem; padding: 0 10rem; }
@media (min-width: 768px) and (max-width: 991px) {
  .about-top { margin: 22rem 0 32rem; }
  .about-title { font-size: 40rem; line-height: 48rem; margin: 0 0 16rem; text-align: center; }
  .about-lead { font-size: 16rem; line-height: 24rem; text-align: center; margin-bottom: 32rem; }
}
@media (min-width: 992px) {
  .about-title { font-size: 60rem; max-width: none; margin: 0 0 40rem; text-align: center; padding: 0; }
  .about-lead { font-size: 20rem; margin-bottom: 80rem; text-align: center; padding: 0; }
}
/* В оригинале верхний отступ 22rem схлопывается с нижним отступом шапки (38rem);
   у нас main не даёт отступам схлопнуться, поэтому на планшете и десктопе он обнуляется. */
@media (min-width: 768px) {
  .about-top { margin-top: 0; }
}
@media (max-width: 767px) {
  .about-top { margin: 22rem 0 20rem; }
  .about-lead br { display: none; }
}

/* ---------- Три карточки ---------- */
.about-cards { margin: 80rem 0; }
.about-cards__slider { width: 100%; }
.about-cards .swiper-slide { height: auto; }
.about-card { background: #fff; border-radius: 30rem; padding: 30rem 40rem; display: flex; flex-direction: column; height: 100%; }
.about-card__title { font-weight: 700; font-size: 30rem; line-height: 140%; color: var(--c-text); margin-bottom: 20rem; }
.about-card__text { font-size: 16rem; line-height: 140%; color: var(--c-text); }
.about-card__text p { margin: 0 0 20rem; }
.about-card__text p:last-child { margin-bottom: 0; }
@media (max-width: 992px) {
  .about-cards { margin: 32rem 0; }
  .about-card { padding: 20rem; }
  .about-card__title { font-size: 18rem; margin-bottom: 16rem; }
  .about-card__text { font-size: 14rem; line-height: 20rem; }
}
@media (min-width: 768px) and (max-width: 991px) { .about-card { border-radius: 20rem; } }
@media (max-width: 767px) {
  .about-card { padding: 10rem; border-radius: 10rem; }
  .about-card__title { padding-left: 10rem; padding-right: 10rem; font-size: 18rem; margin-bottom: 10rem; }
  .about-card__text { padding-left: 10rem; padding-right: 10rem; font-size: 12rem; margin-bottom: 18rem; }
  .about-card__text:last-child { margin-bottom: 0; }
}

/* ---------- Большой блок: изображение и текст ---------- */
.about-media {
  position: relative;
  border-radius: 30rem;
  overflow: hidden;
  height: 742rem;
  background:
    radial-gradient(42% 60% at 50% 46%, rgba(150, 192, 204, .38) 0%, rgba(150, 192, 204, 0) 100%),
    radial-gradient(30% 40% at 18% 70%, rgba(232, 76, 97, .22) 0%, rgba(232, 76, 97, 0) 100%),
    linear-gradient(180deg, #04131A 0%, #0A2936 52%, #020A0E 100%);
}
.about-media::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 2; background: linear-gradient(180deg, rgba(2, 10, 14, 0) 0%, rgba(2, 10, 14, .82) 100%); pointer-events: none; }
.about-media__dev { position: absolute; bottom: 0; left: 50%; width: auto; max-width: none; z-index: 1; transition: transform .5s; }
.about-media__dev--center { height: 92%; transform: translateX(-56%); }
.about-media__dev--left { height: 72%; transform: translateX(-138%); filter: brightness(.62); }
.about-media__dev--right { height: 72%; transform: translateX(38%); filter: brightness(.62); }
.about-media__slogan { position: absolute; z-index: 3; left: 0; right: 0; bottom: 62rem; text-align: center; font-family: var(--font-main); font-weight: var(--fw-regular); font-size: 46rem; line-height: 56rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .78); white-space: nowrap; }
.about-tech__bottom { margin-top: 80rem; display: flex; }
.about-tech__left { flex-grow: 0; flex-shrink: 0; max-width: 320rem; }
.about-tech__title { font-weight: 700; font-size: 30rem; line-height: 140%; color: var(--c-text); margin-bottom: 20rem; }
.about-tech__right { margin-left: auto; max-width: 876rem; font-size: 16rem; line-height: 140%; color: var(--c-text); transition: max-height .5s; }
.about-tech__button { display: none; padding: 8rem; border: 0; background: none; }
.about-tech__button svg { width: 16rem; height: 9rem; }
@media (max-width: 992px) {
  .about-media { height: 404rem; }
  .about-media__slogan { bottom: 32rem; font-size: 25rem; line-height: 30rem; }
  .about-tech__bottom { margin-top: 40rem; gap: 70rem; }
  .about-tech__left { width: 355rem; }
  .about-tech__title { font-size: 24rem; line-height: 33rem; }
  .about-tech__right { max-width: 380rem; }
}
@media (max-width: 767px) {
  .about-media { height: 168rem; border-radius: 30rem; }
  .about-media__slogan { bottom: 12rem; font-size: 11rem; line-height: 14rem; }
  .about-tech__bottom { flex-direction: column; gap: 40rem; }
  .about-tech__left { width: 100%; max-width: 100%; }
  .about-tech__title { font-size: 18rem; line-height: 25rem; }
  .about-tech__right {
    max-width: 100%;
    max-height: 110rem;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to top, #0000 1.25em, #000 15.25em), linear-gradient(to top, #0000, #000 10ch);
    mask-image: linear-gradient(to top, #0000 1.25em, #000 15.25em), linear-gradient(to top, #0000, #000 10ch);
  }
  .about-tech__right.is-open { max-height: 1400rem; -webkit-mask-image: none; mask-image: none; }
  .about-tech__button { display: block; margin: -8rem auto 0; transition: transform .3s; }
  .about-tech__right.is-open ~ .about-tech__button { transform: rotate(180deg); }
}

/* ---------- Слайдер фактов о бренде ---------- */
.about-facts { overflow: hidden; }
.about-facts__slider { margin: 0 -10%; }
.about-facts__slider::before,
.about-facts__slider::after { content: ''; width: 374rem; height: 100%; position: absolute; top: 0; z-index: 2; pointer-events: none; }
.about-facts__slider::before { background: linear-gradient(90deg, #F7F6F8, rgba(247, 246, 248, 0)); left: 5%; }
.about-facts__slider::after { background: linear-gradient(-90deg, #F7F6F8, rgba(247, 246, 248, 0)); right: 5%; }
.about-fact { display: block; transition: transform .3s; border-radius: 20rem; overflow: hidden; position: relative; color: #fff; }
.about-fact__bg {
  height: 428rem;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(34% 62% at 76% 52%, rgba(232, 76, 97, .55) 0%, rgba(232, 76, 97, 0) 100%),
    radial-gradient(40% 70% at 70% 40%, rgba(150, 192, 204, .30) 0%, rgba(150, 192, 204, 0) 100%),
    linear-gradient(110deg, #1C1B1D 0%, #0B2733 58%, #121A1F 100%);
}
.about-fact__bg img { position: absolute; right: -30rem; bottom: -40rem; height: 440rem; width: auto; max-width: none; }
.about-fact__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(41, 40, 42, .78) 0%, rgba(41, 40, 42, .45) 46%, rgba(41, 40, 42, 0) 72%); }
.about-fact__logo { position: absolute; left: 42rem; top: 42rem; width: 110rem; color: #fff; }
.about-fact__logo svg { width: 100%; height: auto; }
.about-fact__meta { position: absolute; bottom: 45rem; left: 35rem; display: flex; flex-direction: column; gap: 10rem; padding-left: 18rem; max-width: 54%; }
.about-fact__label { font-family: var(--font-main); font-weight: var(--fw-regular); font-size: 19rem; line-height: 16rem; color: #fff; flex-direction: row; justify-content: center; align-items: center; padding: 11rem 18rem; background: var(--c-accent); border-radius: 37rem; width: 186rem; display: flex; margin-left: -18rem; }
.about-fact__title { font-family: var(--font-accent); font-weight: var(--fw-accent); font-size: 26rem; line-height: 32rem; text-transform: uppercase; color: #fff; }
.about-fact__text { font-family: var(--font-main); font-weight: var(--fw-regular); font-size: 18rem; line-height: 23rem; color: #fff; }
.about-facts__dots { display: flex; margin-top: 18rem; justify-content: center; gap: 10rem; }
.about-facts__dots.swiper-pagination-lock { display: none; }
.about-facts__dots span { width: 10px; height: 10px; border: 1px solid #909090; border-radius: 50%; background: transparent; opacity: 1; margin: 0 !important; cursor: pointer; }
.about-facts__dots span.swiper-pagination-bullet-active { background-color: #909090; }
@media (min-width: 768px) {
  .about-facts__slider .swiper-slide .about-fact { transform: scale(.8) translateY(10%); transform-origin: right top; }
  .about-facts__slider .swiper-slide.swiper-slide-active .about-fact { transform-origin: center top; transform: scale(1); }
  .about-facts__slider .swiper-slide.swiper-slide-active + .swiper-slide .about-fact { transform-origin: left top; }
}
@media (max-width: 991px) {
  .about-facts__slider { margin: 0; }
  .about-facts__slider::before { left: -5%; width: 100rem; }
  .about-facts__slider::after { right: -5%; width: 100rem; }
}
@media (max-width: 767px) {
  .about-facts__slider { margin: 0; padding: 0 12rem; }
  .about-facts__slider::before,
  .about-facts__slider::after { display: none; }
  .about-fact__bg { height: 180rem; }
  .about-fact__bg img { right: 4rem; bottom: -16rem; height: 186rem; }
  .about-fact__logo { width: 60rem; left: 20rem; top: 10rem; }
  .about-fact__meta { gap: 4rem; bottom: 15rem; left: 0; width: 100%; max-width: 66%; }
  .about-fact__label { font-size: 12rem; line-height: 14rem; padding: 3rem 6rem; width: 110rem; margin-left: -6rem; }
  .about-fact__title { font-family: var(--font-main); font-weight: var(--fw-regular); font-size: 16rem; line-height: 20rem; text-transform: none; }
  .about-fact__text { font-size: 10rem; line-height: 13rem; }
  .about-facts__dots { margin-top: 10rem; }
  .about-facts__dots span { width: 6px; height: 6px; }
}

/* ---------- Вертикальные карточки ---------- */
.about-services { margin: 80rem 0; }
.about-services__slider { margin-top: 80rem; }
.about-service {
  border: 0;
  padding: 0;
  width: 100%;
  border-radius: 30rem;
  overflow: hidden;
  position: relative;
  height: 570rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-text);
  background:
    radial-gradient(70% 40% at 50% 34%, rgba(150, 192, 204, .42) 0%, rgba(150, 192, 204, 0) 100%),
    linear-gradient(180deg, #123240 0%, #0A1D25 100%);
}
.swiper-slide:nth-child(even) .about-service {
  background:
    radial-gradient(70% 40% at 50% 34%, rgba(232, 76, 97, .38) 0%, rgba(232, 76, 97, 0) 100%),
    linear-gradient(180deg, #2B2A2D 0%, #151416 100%);
}
.about-service img { position: absolute; z-index: 1; top: 4%; left: 50%; width: 118%; max-width: none; height: auto; transform: translateX(-50%); transition: transform .5s; }
.about-service:hover img { transform: translateX(-50%) scale(1.06); }
.about-service::before { content: ''; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .28) 46%, rgba(0, 0, 0, .86) 78%); }
.about-service__title { margin-top: auto; position: relative; z-index: 3; font-size: 20rem; line-height: 140%; text-align: center; color: #fff; margin-bottom: 20rem; padding: 0 12rem; }
.about-service__text { position: relative; z-index: 3; font-size: 16rem; line-height: 140%; text-align: center; color: #fff; margin-bottom: 60rem; padding: 0 12rem; }
@media (max-width: 992px) {
  .about-services { margin: 72rem 0; }
  .about-services__slider { margin-top: 32rem; }
  .about-service { height: 307rem; }
  .about-service__title { font-size: 14rem; line-height: 20rem; }
  .about-service__text { font-size: 12rem; line-height: 16rem; margin-bottom: 30rem; }
}

/* ---------- Карточка с приглашением ---------- */
.about-info { margin: 80rem 0; }
.about-info__box { border-radius: 30rem; background-color: #fff; width: 1100rem; display: flex; margin: 0 auto; overflow: hidden; }
.about-info__detail { flex-grow: 0; flex-shrink: 0; position: relative; z-index: 2; width: 542rem; padding: 40rem 50rem 50rem; border-radius: 30rem; background-color: #fff; }
.about-info__title { font-weight: 700; font-size: 30rem; line-height: 140%; color: var(--c-text); margin-bottom: 20rem; }
.about-info__text { font-size: 16rem; line-height: 140%; color: var(--c-text); margin-bottom: 60rem; }
.about-info__mobile { display: none; margin-bottom: 10rem; }
.about-info__mobile img { width: 100%; height: auto; aspect-ratio: 654 / 349; object-fit: cover; border-radius: 10rem; }
.about-info__media { flex-grow: 1; flex-shrink: 1; width: 654rem; margin-left: -100rem; border-radius: 30rem; }
.about-info__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.about-info .btn { font-size: 18rem; padding: 10rem 24rem; }
@media (max-width: 992px) {
  .about-info { margin: 72rem 0; }
  .about-info__box { width: 620rem; }
  .about-info__detail { width: 310rem; height: max-content; padding: 30rem; border-radius: 20rem; }
  .about-info__title { font-size: 18rem; line-height: 140%; margin-bottom: 10rem; }
  .about-info__text { font-size: 14rem; line-height: 20rem; margin-bottom: 32rem; }
  .about-info__media { width: 100%; margin-left: -80rem; border-radius: 20rem; }
}
@media (max-width: 767px) {
  .about-info__box { width: 100%; }
  .about-info__detail { width: 100%; padding: 20rem; }
  .about-info__title { padding-top: 10rem; padding-left: 10rem; padding-right: 10rem; }
  .about-info__text { font-size: 12rem; line-height: 16rem; margin-bottom: 40rem; padding-left: 10rem; padding-right: 10rem; }
  .about-info__text br { display: none; }
  .about-info__mobile { display: block; }
  .about-info__media { display: none; }
  .about-info .btn { width: 100%; font-size: 13rem; padding: 3rem 8rem; }
}