/* ==========================================================================
   1440px — the 1920px layout scaled down by 0.75
   Generated from style.css: every px value is multiplied by 0.75
   (1px hairlines are left untouched).
   ========================================================================== */
@media (max-width: 1919px) {
  .btn {
      gap: 30px;
      min-width: 215.25px;
      padding: 18px 13.5px 18px 22.5px;
      border-radius: 3.75px;
      font-size: 12px;
  }

  .btn--dark {
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
  }

  .header {
      gap: 30px;
      padding: 30px;
  }

  .header__logo img {
      width: 109.5px;
  }

  .header__right {
      gap: 45px;
  }

  .nav__list {
      gap: 10.5px;
  }

  .nav__link {
      font-size: 13.25px;
  }

  .nav__dropdown {
      top: calc(100% + 10.5px);
      min-width: 172.5px;
      padding: 4.5px;
      border-radius: 4.5px;
      backdrop-filter: blur(10.5px);
      -webkit-backdrop-filter: blur(10.5px);
  }

  .nav__dropdown::before {
      height: 10.5px;
  }

  .nav__dropdown-link {
      padding: 8.25px 10.5px;
      border-radius: 3px;
      font-size: 11.25px;
  }

  .burger {
      width: 29.25px;
      height: 29.25px;
      border-radius: 4.5px;
  }

  .burger img {
    width: 14px;
    height: auto;
  }

  .hero {
      min-height: 480px;
      padding: 135px 30px 37.5px;
  }

  .hero__title {
      max-width: 603.75px;
      font-size: 60px;
  }

  .hero__bottom {
      gap: 30px;
  }

  .stats {
      gap: 15px;
  }

  .stats__item {
      gap: 22.5px;
  }

  .stats__circle {
      width: 97.5px;
      height: 97.5px;
      border-radius: 750px;
  }

  .stats__value {
      font-size: 22.5px;
  }

  .stats__text {
      gap: 6px;
  }

  .stats__title {
      font-size: 22.5px;
  }

  .stats__desc {
      max-width: 172.5px;
      font-size: 12px;
  }

  .stats__desc:last-child {
      max-width: 150px;
  }

  .hero__subtitle {
      max-width: 465px;
      margin-bottom: 33px;
      font-size: 41.25px;
  }

  .hero__buttons {
      gap: 19.5px;
  }

  .hero__btn-small {
      min-width: 207px;
  }

  .about {
      padding: 108.75px 30px 165px;
  }

  .about::before {
      bottom: -105px;
  }

  .about__title {
      max-width: 870px;
      margin-bottom: 202.5px;
      font-size: 90px;
  }

  .about__text {
      max-width: 326.25px;
  }

  .about__desc {
      margin-bottom: 22.5px;
      font-size: 13.5px;
  }

  .services {
      padding-bottom: 112.5px;
  }

  .services__head {
      gap: 30px;
      margin-bottom: 45px;
      padding-left: 11.25px;
      padding-right: 30px;
  }

  .services__title {
      font-size: 33.75px;
  }

  .services__nav {
      gap: 6px;
  }

  .slider-btn {
      width: 37.5px;
      height: 37.5px;
  }

  .services__slider .swiper-slide {
      width: 421.5px;
  }

  .service-card {
      height: 564.75px;
      padding: 0 24px 33.75px;
      border-radius: 7.5px;
  }

  .service-card__top {
      left: 15px;
      right: 15px;
  }

  .service-card__cell {
      gap: 22.5px;
      padding: 8.25px 15px 8.25px 0;
  }

  .service-card__cell--right {
      gap: 3.75px;
      padding: 16.5px 0 16.5px 15px;
  }

  .service-card__num {
      font-size: 56.25px;
  }

  .service-card__label {
      max-width: 82.5px;
      font-size: 12px;
  }

  .service-card__meta {
      gap: 3.75px;
  }

  .service-card__index {
      font-size: 12px;
  }

  .service-card__btn {
      min-width: 161.25px;
      padding: 12px 12px 12px 21px;
      gap: 15px;
      font-size: 10.5px;
      transform: translate(15px, -50%);
  }

  .service-card__title {
      font-size: 30px;
  }

  .service-card__circle {
      right: 21.75px;
      bottom: 33.75px;
      width: 37.5px;
      height: 37.5px;
      transform: translateY(9px);
  }

  .service-card:hover .service-card__meta {
      transform: translateX(-7.5px);
  }

  .build {
      padding: 0 11.25px;
  }

  .build__inner {
      min-height: 825px;
      padding: 33.75px 30px 48.75px 45px;
      border-radius: 11.25px;
  }

  .build__head {
      gap: 30px;
  }

  .build__logo img {
      width: 109.5px;
  }

  .build__link {
      font-size: 15px;
  }

  .build__bottom {
      gap: 30px;
  }

  .build__title {
      max-width: 705px;
      margin-bottom: 33.75px;
      font-size: 67.5px;
  }

  .build__buttons {
      gap: 13.5px;
  }

  .build__desc {
      max-width: 286.5px;
      font-size: 12px;
      margin-right: 22.5px;
  }

  .build__desc--cta {
      max-width: 307.5px;
  }

  .way {
      padding: 108.75px 24px 142.5px;
  }

  .way__head {
      gap: 30px;
      margin-bottom: 86.25px;
  }

  .way__title {
      font-size: 33.75px;
  }

  .way__list {
      column-gap: 75px;
      row-gap: 90px;
  }

  .way-card {
      gap: 15px;
  }

  .way-card__icon {
      width: 63.75px;
      height: 63.75px;
  }

  .way-card__title {
      margin-bottom: 4.5px;
      font-size: 15px;
  }

  .way-card__text {
      padding-top: 7.5px;
  }

  .way-card__desc {
      font-size: 12px;
  }

  .grid-card {
      height: 664.5px;
      padding: 17.25px 22.5px 24px;
  }

  .grid-card__row {
      gap: 12.75px;
      margin-bottom: 26.25px;
  }

  .grid-card__num {
      font-size: 12px;
  }

  .grid-card__title {
      font-size: 24px;
  }

  .grid-card__btn {
      min-width: 225px;
  }

  .conversation {
      padding: 183.75px 18.75px 120px;
  }

  .conversation__head {
      gap: 30px;
      margin-bottom: 159.75px;
  }

  .conversation__title {
      font-size: 60px;
  }

  .conversation__second {
      padding-left: 198.75px;
  }

  .conversation__btn {
      min-width: 187.5px;
  }

  .conversation__item {
      gap: 30px;
      padding: 63.75px 0;
  }

  .conversation__main {
      gap: 161.25px;
  }

  .conversation__num {
      font-size: 15px;
  }

  .conversation__name {
      font-size: 22.5px;
  }

  .conversation__desc {
      max-width: 333.75px;
      font-size: 13.5px;
  }

  .conversation__media {
      width: 130.5px;
      height: 219px;
      border-radius: 90px;
  }

  .purpose {
      padding: 41.25px 0 30px 30px;
  }

  .purpose__head {
      gap: 30px;
      margin-bottom: 337.5px;
      padding-right: 30px;
  }

  .purpose__title {
      font-size: 75px;
  }

  .purpose__aside {
      gap: 15px;
  }

  .purpose__logo {
      width: 109.5px;
  }

  .purpose__note {
      max-width: 180px;
      font-size: 10.5px;
  }

  .purpose__nav {
      gap: 9.75px;
  }

  .purpose-btn {
      width: 48px;
      height: 48px;
  }

  .purpose__slider .swiper-slide {
      width: 360.75px;
  }

  .purpose-card {
      height: 402.75px;
      padding: 22.5px;
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
  }

  .purpose-card__title {
      margin-bottom: 18px;
      font-size: 22.5px;
  }

  .purpose-card__line {
      margin-bottom: 18px;
  }

  .purpose-card__desc {
      font-size: 13.5px;
  }

  .fill {
      padding-bottom: 135px;
  }

  .fill__inner {
      padding: 142.5px 33.75px 0;
  }

  .fill__label {
      margin-bottom: 80.25px;
      padding-bottom: 18px;
      font-size: 15px;
  }

  .fill__text {
      max-width: 857.25px;
  }

  .fill__desc {
      margin-bottom: 60px;
      font-size: 48.75px;
  }

  .fill__img {
      margin-top: 138.75px;
  }

  .faq {
      gap: 30px;
      padding: 0px 21px 165px;
  }

  .faq__title {
      margin-bottom: 48px;
      font-size: 60px;
  }

  .faq__desc {
      max-width: 324px;
      font-size: 13.5px;
  }

  .faq__btn--contact {
      min-width: 187.5px;
  }

  .faq__buttons {
      gap: 17.25px;
  }

  .faq__accordion {
      gap: 13.5px;
      max-width: 707.25px;
  }

  .faq-item {
      border-radius: 11.25px;
  }

  .faq-item__trigger {
      gap: 22.5px;
      padding: 18px 18.75px 18px 30px;
  }

  .faq-item__question {
      font-size: 16.5px;
  }

  .faq-item__icon {
      width: 42.75px;
      height: 42.75px;
  }

  .faq-item__answer {
      padding: 0 30px 21px;
      max-width: 525px;
      font-size: 13.5px;
  }

  .footer {
      margin: 0px 11.25px 19.5px;
      border-radius: 11.25px;
  }

  .footer__content {
      padding: 97.5px 37.5px 41.25px;
  }

  .footer__top {
      gap: 30px;
      margin-bottom: 105px;
  }

  .footer__links {
      gap: 97.5px;
    row-gap: 40px;
  }

  .footer__links a {
      font-size: 48.75px;
  }

  .footer__totop {
      width: 45px;
      height: 45px;
  }

  .footer__totop img {
      width: 10.5px;
      height: 10.5px;
  }

  .footer__mid {
      gap: 87px;
      padding-top: 30px;
  }

  .footer__mid-row {
      gap: 30px;
  }

  .footer__mid-right {
      gap: 30px;
  }

  .footer__contact-link {
      gap: 15px;
      margin-bottom: 67.5px;
      font-size: 18.75px;
  }

  .footer__arrow {
      width: 9.75px;
  }

  .footer__dev {
      gap: 15px;
  }

  .footer__dev-logo {
      width: 42.75px;
  }

  .footer__dev-text {
      font-size: 10.5px;
  }

  .footer__copy {
      gap: 24.75px;
      font-size: 15px;
  }

  .footer__policy {
      font-size: 12px;
      text-underline-offset: 6px;
  }

  .footer__contact-item {
      gap: 10.5px;
  }

  .footer__contact-label {
      gap: 8.25px;
      font-size: 15px;
  }
  
  .footer__contact-value {
      font-size: 26.25px;
  }

  .footer__socials {
      gap: 37.5px;
  }

  .footer__social {
      gap: 6.75px;
      font-size: 18.75px;
  }

  /* ----- Icons: the width/height attributes in the markup, scaled ----- */
  .btn__arrow {
      width: 12px;
      height: 12px;
  }

  .nav__dot svg {
      width: 3px;
      height: 3px;
  }

  .burger img {
      width: 14.25px;
      height: 8.25px;
  }

  .slider-btn img,
  .purpose-btn img,
  .service-card__circle img {
      width: 11.25px;
      height: 11.25px;
  }

  .service-card__dots {
      width: 37.5px;
      height: 9px;
  }

  .way-card__icon img {
      width: 30px;
      height: 30px;
  }

  .purpose-card__icon img {
      width: 24px;
      height: 24px;
  }

  .faq-item__icon svg {
      width: 13.5px;
      height: 13.5px;
  }

  .footer__totop img,
  .footer__arrow {
      width: 10.5px;
      height: 10.5px;
  }

  .footer__dev-logo {
      width: 42.75px;
      height: 26.25px;
  }

  .footer__contact-label img {
      width: 14.25px;
      height: 14.25px;
  }

  .footer__social img {
      width: 15.75px;
      height: 15.75px;
  }

  /* popup */
      /* popup */
    .popup__window {
        max-width: 1245px;
        max-height: 630px;
    }

    .popup__scroll {
        padding: 160px 47px 35px 40px;
    }

    .popup__close {
        top: 18px;
        right: 18px;
    }

    .popup__close img {
        width: 25px;
        height: 25px;
    }

    .popup__title {
        max-width: 278px;
        font-size: 35px;
        margin-bottom: 30px;
    }

    .popup__input {
        padding: 17px 17px 17px 21px;
        font-size: 13px;
    }

    .popup__input::placeholder, .popup__phone-hint {
        font-size: 13px !important;
    }

    .popup__form {
        gap: 8px;
    }

    .iti__country-container {
        left: 22px;
    }

    #popup-phone {
        padding-left: 45px !important;
    }

    .popup__phone-hint {
        padding-left: 48px !important;
    }

    .popup__social {
        font-size: 18px;
        gap: 8px;
    }

    .popup__socials {
        gap: 30px;   
    }

    /* menu */
    .menu__inner {
        padding: 100px 36px 36px 36px;
    }

    .menu__close {
        top: 19px;
        right: 15px;
    }

    .menu__close img {
        width: 25px;
        height: 25px;
    }

    .menu__close svg {
        width: 25px;
        height: 25px;
    }

    .menu__nav a {
        font-size: 37px;
    }

    .menu__nav {
        gap: 30px;
    }

    .menu__social {
        font-size: 18px;
        gap: 8px;
    }

    .menu__social img {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 1340px) {
    .about__title {
        max-width: 570px;
        margin-bottom: 202.5px;
        font-size: 60px;
    }

    .build__title {
        max-width: 505px;
        margin-bottom: 33.75px;
        font-size: 47.5px;
    }

    .way__list {
        grid-template-columns: repeat(3, 1fr);
    }

    .services-grid__list {
        grid-template-columns: repeat(2, 1fr);   
    }

    .conversation__media {
        display: none;
    }

    .conversation__title {
        font-size: 50px;
    }

    .purpose__title {
        font-size: 60px;
    }

    .fill__desc {
        font-size: 38.75px;
    }

    .faq {
        gap: 70px;
    }

    .faq__title {
        font-size: 50px;
    }
}

@media (max-width: 1025px) {
    .nav__list {
        display: none;
    }

    .stats {
        display: none;
    }

    .hero__subtitle {
        max-width: 354px;
    }

    .build__desc {
        display: none;
    }

    .way-card__desc br {
        display: none;
    }

    .way__list {
        column-gap: 35px;
        row-gap: 50px;
    }

    .conversation__main {
        gap: 60px;
    } 

    .conversation__title {
        font-size: 45px;
    }

    .purpose__aside {
        display: none;
    }

    .faq {
        flex-direction: column;
    }

    .faq__buttons {
        display: none;
    }

    .faq__accordion {
        max-width: 100%;
    }

    .faq-item__answer {
        max-width: 80%;
    }

    /* menu */
    .menu__nav {
        gap: 25px;
    }
}

@media (max-width: 769px) {
    .about__text {
        margin-left: 0;
    }

    .way__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .conversation__item {
        flex-direction: column;
        align-items: start;
    }

    .conversation__btn {
        display: none;
    }

    .conversation__head {
        gap: 30px;
        margin-bottom: 50px;
    }

    .conversation__desc {
        max-width: 100%;
    }

    .purpose__bottom {
        flex-direction: column;
        align-items: end;
        gap: 30px;
    }

    .purpose__nav {
        width: auto;
        margin-right: 20px;
    }

    /* the row is a column now, so flex-grow no longer gives the slider its
       width — without this Swiper measures a shrink-to-fit container */
    .purpose__slider {
        width: 100%;
    }

    /* ======================================================================
       Footer — the desktop markup is hidden and .footer-mob takes over
       ====================================================================== */
    .footer {
        display: none;
    }

    .footer-mob {
        margin: 0 15px 26px;
    }

    .footer-mob__panel {
        padding: 20px 16px 40px;
        border-radius: 16px;
        background-color: #f1f1f1;
    }

    /* ----- back-to-top + logo ----- */
    .footer-mob__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 70px;
    }

    .footer-mob__totop {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: #173145;
    }

    .footer-mob__logo {
        width: 86px;
        height: auto;
    }

    /* ----- links ----- */
    .footer-mob__links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 80px;
    }

    .footer-mob__links a {
        font-weight: 400;
        font-size: 60px;
        line-height: 115%;
        color: #173145;
        transition: opacity 0.25s ease;
    }

    /* ----- divider ----- */
    .footer-mob__divider {
        display: block;
        height: 1px;
        margin-bottom: 36px;
        background-color: rgba(23, 49, 69, 0.25);
    }

    /* ----- e-mail + phone ----- */
    .footer-mob__contacts {
        display: flex;
        align-items: flex-start;
        gap: 30px;
        margin-bottom: 83px;
    }

    .footer-mob__contact {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .footer-mob__contact-label {
        display: flex;
        align-items: start;
        gap: 8px;
        font-weight: 500;
        font-size: 16px;
        line-height: 140%;
        color: #222;
    }

    .footer-mob__contact-value {
        font-weight: 400;
        font-size: 16px;
        line-height: 125%;
        text-align: right;
        color: #222;
    }

    /* ----- dev logo + socials ----- */
    .footer-mob__bottom {
        display: flex;
        align-items: end;
        gap: 50px;
    }

    .footer-mob__dev {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .footer-mob__dev-logo {
        width: 121px;
        height: auto;
    }

    .footer-mob__dev-text {
        font-weight: 500;
        font-size: 11px;
        line-height: 114%;
        color: #959595;
    }

    .footer-mob__socials {
        display: flex;
        align-items: center;
        gap: 30px;
    }

    .footer-mob__social {
        display: inline-flex;
    }

    /* ----- copyright, outside the grey panel ----- */
    .footer-mob__legal {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-top: 85px;
        padding: 0 16px;
        font-weight: 400;
        font-size: 13px;
        line-height: 1;
        color: #222;
    }

    .footer-mob__policy {
        font-weight: 400;
        font-size: 13px;
        line-height: 100%;
        color: #acacac;
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
        text-decoration-skip-ink: none;
    }
}

@media (max-width: 570px) {
    /* header */
    .header__logo img {
        width: 100px;
        height: 27px;
    }

    .burger {
        width: 39px;
        height: 39px;
    }

    .burger img {
        width: auto;
        height: auto;
    }

    .header {
        gap: 10px;
        padding: 20px;
    }

    /* hero */
    .hero {
        padding: 117px 20px 57px;
    }

    .hero__title {
        max-width: 272px;
        font-size: 40px;
    }

    .hero__subtitle {
        font-size: 30px;
        max-width: 260px;
        margin-bottom: 30px;
    }

    .hero__buttons {
        width: 100%;
        gap: 10px;
        flex-direction: column;
    }

    .hero__cta {
        width: 100%;
    }

    .hero__buttons .btn {
        width: 100%;
    }

    .btn {
        gap: 30px;
        min-width: 215.25px;
        padding: 20px 27px 20px 29px;
        border-radius: 5px;
        font-size: 14px;
    }

    .btn__arrow {
        width: auto;
        height: auto;
    }

    /* about */
    .about {
        padding: 60px 20px 130px;
    }

    .about__title {
        max-width: 100%;
        margin-bottom: 290px;
        font-size: 45px;
    }

    .about__desc {
        font-weight: 400;
        font-size: 18px;
        line-height: 144%;
        letter-spacing: -0.03em;
        color: #4a4a4a;
        margin-bottom: 75px;
    }

    .about__text {
        max-width: 100%;
    }

    .about__btn {
        width: 100%;
    }

    .about::before {
        background: url(../assets/img/dashed-bg-mob.webp) center / cover no-repeat;
    }

    /* .services */
    .services__title {
        font-size: 35px;
        line-height: 143%;
    }

    .services__head {
        margin-bottom: 35px;
    }

    .services__nav {
        display: none;
    }

    /* Swiper is destroyed below 570px (see main.js), but its stylesheet still
       applies: overflow:hidden and the transform on .swiper-wrapper would both
       break position:sticky, so they are reset here. */
    .services__slider {
        overflow: visible;
        padding: 0 10px;
    }

    .services__slider .swiper-wrapper {
        display: flex;
        flex-direction: column;
        gap: 10px;
        height: auto;
        transform: none;
    }

    .services__slider .swiper-slide {
        width: 100%;
        height: auto;
        transform: none;
    }

    .service-card {
        height: 430px;
        padding: 0 20px 24px;
    }

    .service-card__top {
        left: 14px;
        right: 14px;
    }

    .service-card__cell {
        gap: 12px;
        padding: 14px 12px 14px 0;
    }

    .service-card__cell--right {
        padding: 14px 0 14px 12px;
    }

    .service-card__num {
        font-size: 42px;
    }

    .service-card__label {
        max-width: 70px;
        font-size: 10px;
    }

    .service-card__index {
        font-size: 12px;
    }

    .service-card__dots {
        width: 37px;
        height: auto;
    }

    .service-card__title {
        font-size: 24px;
    }

    .services {
        padding-bottom: 40px;
    }

    /* There is no hover on touch, so the button is shown outright instead of
       being revealed by .service-card:hover */
    .service-card__btn {
        min-width: 140.25px;
        padding: 12px 12px 12px 21px;
        gap: 15px;
        font-size: 10.5px;
        opacity: 1;
        transform: translate(0, -50%);
        pointer-events: auto;
    }

    .service-card__circle {
        opacity: 1;
        pointer-events: auto;
        bottom: 30.75px;
    }
    /* .build */
    .build__inner {
        min-height: 765px;
        padding: 20px;
        padding-top: 25px;
        border-radius: 10px;
    }

    .build__logo img {
        width: 70px;
        height: auto;
    }

    .build__link {
        font-size: 13px;
    }

    .build__title {
        font-size: 44px;
    }

    .build__buttons .build__btn:last-child {
        display: none;
    }

    .build__btn {
        width: 100%;
    }

    /* way */
    .way {
        padding: 65px 20px 56px;
        display: flex;
        flex-direction: column-reverse;
        gap: 50px;
    }

    .way-card {
        flex-direction: column;
        align-items: start;
        gap: 17px;
    }

    .way-card__icon {
        width: 73px;
        height: 73px;
    }

    .way-card__icon img {
        width: 34px;
        height: 34px;
    }

    .way-card__title {
        font-size: 16px;
        line-height: 97%;
        margin-bottom: 8px;
        max-width: 115px;
    }

    .way-card__desc {
        font-size: 13px;
        line-height: 131%;
        color: #606060;
    }

    .way__list {
        column-gap: 35px;
        row-gap: 70px;
    }

    .way__title {
        display: none;
    }

    .way__head {
        margin: 0;
    }

    .way .btn {
        width: 100%;
    }

    /* .services-grid */
    .services-grid__list {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }

    .services-grid {
        padding: 0 10px;
    }

    .grid-card {
        padding: 20px;
        padding-bottom: 23px;
        height: 564px;
    }

    .grid-card__btn {
        padding: 0;
        background: none;
        justify-content: center;
        font-weight: 500;
        font-size: 20px;
        text-align: center;
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-skip-ink: none;
        color: #fff;
    }

    .grid-card__btn .btn__arrow {
        display: none;
    }

    /* conversation */
    .conversation {
        padding: 40px 20px 40px;
    }

    .conversation__title {
        font-size: 35px;
    }

    .conversation__second {
        padding-left: 85px;
    }

    .conversation__slash {
        color: #B5BEC4;    
    }

    .conversation__head {
        margin-bottom: 56px;
    }

    .conversation__item {
        gap: 20px;
        padding: 40px 0;
    }

    .conversation__name {
        font-size: 20px;
        line-height: 120%;
    }

    .conversation__num {
        font-size: 14px;
    }

    .conversation__desc {
        font-size: 14px;
        line-height: 150%;
        color: #84949e;
        padding-left: 80px;
    }

    /* purpose */
    .purpose {
        padding: 34px 0 25px 20px;
    }

    .purpose__title {
        font-size: 35px;
    }

    .purpose__head {
        margin-bottom: 260px;
    }

    .purpose__nav {
        margin-right: 15px;
    }

    .purpose-btn {
        width: 42px;
        height: 42px;
    }

    .purpose__bottom {
        gap: 10px;
    }

    .purpose-card {
        height: 295px;
        padding: 22px;
        border-radius: 3px;
    }

    .purpose__slider .swiper-slide {
        width: 221px;
    }

    .purpose-card__title {
        font-size: 20px;
        line-height: 1;
        margin-bottom: 24px;
    }

    .purpose-card__line {
        margin-bottom: 21px;
    }

    .purpose-card__desc {
        font-size: 12px;
        line-height: 167%;
    }

    .purpose-card__desc br {
        display: none;
    }

    .purpose-card__desc--bold {
        display: block;
    }

    /* fill */
    .fill__inner {
        padding: 125px 20px 0;
    }

    .fill__label {
        margin-bottom: 50px;
        padding-bottom: 12px;
        font-size: 14px;
    }

    .fill__desc {
        font-size: 24px;
        line-height: 140%;
        margin-bottom: 70px;
    }

    .fill__btn {
        width: 100%;
    }

    .fill__img {
        margin-top: 70px;
        object-fit: cover;
        min-height: 400px;
    }

    .fill {
        padding-bottom: 50px;
    }

    /* faq */
    .faq {
        gap: 36px;
        padding: 0px 10px 60px;
    }

    .faq__title {
        font-size: 35px;
        margin-bottom: 22px;
    }

    .faq__slash {
        color: #b4bcc3;
    }

    .faq__left {
        padding: 0 10px;
    }

    .faq__desc {
        font-weight: 400;
        font-size: 16px;
        line-height: 150%;
        letter-spacing: -0.03em;
        color: #84949e;
        max-width: 307px;
    }

    .faq-item__trigger {
        gap: 22.5px;
        padding: 25px 20px 25px 20px;
    }

    .faq-item__question {
        font-size: 18px;
        line-height: 139%;
    }

    .faq-item__icon {
        width: 38px;
        height: 38px;
    }

    .faq-item__icon svg {
        width: 12px;
        height: 12px;
    }

    .faq-item {
        border-radius: 10px;
    }

    .faq-item__answer {
        max-width: 100%;
        padding: 0 20px 21px;
    }

    /* build */
    .build {
        padding: 0 12px;
    }

    .build__head a {
        display: none;
    }

    .build--cta  .build__title {
        font-size: 35px;
        max-width: 255px;
    }

    .build__main {
        width: 100%;
    }

    /* footer */
    .footer-mob__totop {
        width: 32px;
        height: 32px;
    }

    .footer-mob__totop img {
        width: 10px;
        height: 10px;
    }

    .footer-mob__links a {
        font-size: 40px;
        line-height: 1;
    }

    .footer-mob__contact-label img {
        width: 19px;
        height: 19px;
    }

    .footer-mob__contacts {
        gap: 16px;
    }

    /* ----- mobile CTA under the video block ----- */
    .cta-mob {
        padding: 50px 12px 100px;
    }

    .cta-mob__desc {
        margin-bottom: 30px;
        font-weight: 400;
        font-size: 16px;
        line-height: 169%;
        color: #173145;
    }

    .cta-mob__btn {
        width: 100%;
    }

    /* the same paragraph and button now live in .cta-mob */
    .build--cta .build__desc--cta,
    .build--cta .build__buttons .btn--dark {
        display: none;
    }

    /* popup */
    .popup__window {
        flex-direction: column;
        position: relative;
        max-height: 100%;
        height: auto;
    }

    .popup {
        padding: 10px;
    }

    .popup__title {
        font-size: 37px;
        line-height: 92%;
        max-width: 305px;
    }

    .popup__image::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 268px;
        background: linear-gradient(180deg, rgba(23, 49, 69, 0.5) 0%, rgba(23, 49, 69, 0) 100%);
    }

    .popup__image {
        height: 40%;
        flex-shrink: 0;
    }

    .popup__content {
        position: static;
        background: #F4F4F4;
        flex: 1;
        min-height: 0;
    }

    .popup__scroll {
        padding: 50px 20px 35px 20px;
    }

    .popup__close {
        top: 15px;
        right: 15px;
    }

    .popup__input {
        padding: 23px 23px 23px 34px;
        font-size: 18px;
        background: #fff;
    }

    .popup__input::placeholder, .popup__phone-hint {
        font-size: 18px !important;
    }

    .popup__form {
        gap: 11px;
    }

    .popup__submit {
        padding: 22px 20px 22px 32px;
    }

    .popup__socials {
        display: none;
    }

    /* menu */
    .menu__panel {
        max-width: 100%;
    }

    .menu__inner {
        padding-top: 100px;
        gap: 50px;
    }
}
/* The cards pile up on scroll. It needs room for a whole card plus the peeking
   edges of the ones below it, so on short screens they simply scroll instead. */
@media (max-width: 570px) and (min-height: 580px) {
    .services__slider {
        --deck-top: 20px;
        --deck-step: 28px;
    }

    .services__slider .swiper-slide {
        position: sticky;
    }

    .services__slider .swiper-slide:nth-child(1) {
        top: var(--deck-top);
    }

    .services__slider .swiper-slide:nth-child(2) {
        top: calc(var(--deck-top) + var(--deck-step));
    }

    .services__slider .swiper-slide:nth-child(3) {
        top: calc(var(--deck-top) + var(--deck-step) * 2);
    }

    .services__slider .swiper-slide:nth-child(4) {
        top: calc(var(--deck-top) + var(--deck-step) * 3);
    }

    .services__slider .swiper-slide:nth-child(5) {
        top: calc(var(--deck-top) + var(--deck-step) * 4);
    }
}