.hero,
.how,
.why,
.custom-tickets {
  overflow: hidden;
}
.hero {
  position: relative;
}

.hero::before {
  display: block;
  content: "";
  position: absolute;
  top: -150px;
  left: 50%;
  width: 170%;
  aspect-ratio: 1;
  background-image: url("../img/design/shine_double_color.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.text-blue-main {
  color: #2c75ff;
  font-family: "Onder" !important;
  font-size: 15px !important;
  line-height: 2 !important;
}

.wrapper-btn {
  justify-content: space-between;
  align-items: center;
}

.box-grd {
  position: relative;
}

.box-grd::before,
.wrapper-cards-why::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 170%;
  aspect-ratio: 1;
  background-image: url("../img/design/oreol_blue_dark.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.box-grd .mockup-text span,
.custom-tickets .mockup-text span {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 23px;
  font-weight: 900;
  color: #fff;
  font-family: "Exo2-Bold" !important;
  font-weight: 600;
}

.btn-how {
  color: #71a2ff !important;
}

.btn-how svg {
  width: auto;
}

.wrapper-mockup,
.wrapper-illustration {
  margin-top: 40px;
  width: 100%;
  height: 300px;
}

.custom-tickets .wrapper-mockup {
  height: 400px;
}

.wrapper-mockup img,
.wrapper-illustration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wrapper-cards-pain {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.card-pain {
  padding: 0 !important;
  padding: 5px;
  border-radius: 30px;
  background: linear-gradient(
    0deg,
    rgba(133, 76, 255, 0.1) 0%,
    rgba(44, 117, 255, 0.2) 100%
  );
}

.card-pain .card-pain-content {
  padding: 30px 50px !important;
}

.card-pain .number-pain {
  color: white;
  font-family: "Exo2-Bold";
  font-weight: 600;
  line-height: 1 !important;
  font-size: 23px !important;
}

.content .title-main {
  font-size: 15px !important;
  font-family: "Onder" !important;
  line-height: 2 !important;
}

.title-pains,
.title-how,
.title-why {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #fff !important;
  font-family: "Onder" !important;
  line-height: 2 !important;
}

.wrapper-cards-how {
  position: relative;
}

.wrapper-cards-how::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 170%;
  aspect-ratio: 1;
  background-image: url("../img/design/blending_mob.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.card-how {
  padding: 30px 50px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
  border-radius: 30px;
  backdrop-filter: blur(5px);
  border: 0.5px solid #ffffff1c;
}

.card-why {
  position: relative;
  padding: 30px 50px;
  border-radius: 30px;
}

.wrapper-cards-why .wrapper-card-why:nth-of-type(1) .card-why {
  background-color: #2c75ff6e;
}

.wrapper-cards-why .wrapper-card-why:nth-of-type(2) .card-why,
.wrapper-cards-why .wrapper-card-why:nth-of-type(4) .card-why {
  background-color: #08090e;
}

.wrapper-cards-why .wrapper-card-why:nth-of-type(3) .card-why {
  background-color: #854cff80;
}

.card-how-title,
.card-title-why {
  font-size: 23px;
  color: #fff;
  font-family: "Exo2-Bold" !important;
  font-weight: 600;
}

.custom-tickets,
.wrapper-mockup,
.mockup-text {
  position: relative;
}

.custom-tickets::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 190%;
  aspect-ratio: 1;
  background-image: url("../img/design/shine_rctngl_mob.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.why .card-text {
  color: white !important;
}

@media (max-width: 768px) {
  .content.pad-40 {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 0;
    min-height: 100px;
  }

  .pain .btn-width,
  .how .btn-width,
  .why .btn-width {
    width: 100% !important;
  }

  .wrapper-mockup {
    margin-top: 40px;
    width: 100%;
    height: 300px;
    opacity: 0;
    transform: translateX(80px); /* начальное смещение вправо */
    transition: opacity 2s cubic-bezier(0.4, 1.4, 0.6, 1),
      transform 2s cubic-bezier(0.4, 1.4, 0.6, 1);
  }

  .wrapper-mockup.mockup-in-view {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 390px) {
  .mockup-text {
    font-size: 20px !important;
  }
}

/* Анимация карточек секции how - начало */
/* контейнер с перспективой как раньше */
.how .wrapper-cards-how {
  perspective: 1000px;
  perspective-origin: 50% 20%;
}

/* базовый стиль карточки */
.how .card-how {
  transform-style: preserve-3d;
  transform-origin: center bottom;
  transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 420ms ease,
    filter 420ms ease, clip-path 420ms ease;
  backface-visibility: hidden;
  /* по умолчанию — без сужения верха */
  --taper: 0px;
  clip-path: polygon(
    var(--taper) 0,
    calc(100% - var(--taper)) 0,
    100% 100%,
    0 100%
  );
}

/* когда карточка «встала» (is-upright) — убираем трапецию */
.how .card-how.is-upright {
  --taper: 0px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
/* Анимация карточек секции how - конец */