
/* ============= RESPONSIVE ============= */
@media(max-width:1100px) {
  .main-nav {
    display: none
  }

  .burger {
    display: flex
  }

  .header-main__cta {
    display: none
  }
}

@media(max-width:1024px) {
  .hero{padding:120px 0 80px}
  .hero__grid{grid-template-columns:1fr;gap:48px}
  .hero__showcase{max-width:680px;margin:0 auto}
  .hero__slider{height:380px}

  .trust-bar__grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .trust-bar__item:nth-child(2) {
    border-right: 0
  }

  .catalog__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 240px
  }

  .cat-card--hero {
    grid-row: span 1
  }

  .cat-card--wide {
    grid-column: span 2
  }

  .product-row,
  .product-row--reverse {
    grid-template-columns: 1fr;
    gap: 32px;
    direction: ltr
  }

  .product-row--reverse>* {
    direction: ltr
  }

  .about__grid {
    grid-template-columns: 1fr;
    gap: 48px
  }

  .about__gallery {
    max-width: 480px;
    height: 420px
  }

  .adv-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .process-flow__steps {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 48px
  }

  .process-flow__line {
    display: none
  }

  .partners__inner {
    grid-template-columns: 1fr;
    padding: 36px;
    gap: 32px
  }

  .partners__head .s-title--left {
    text-align: center
  }

  .partners__head .s-label,
  .partners__desc {
    text-align: center;
    margin-left: auto;
    margin-right: auto
  }

  .portfolio__masonry {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px
  }

  .portfolio__item--tall {
    grid-row: span 1
  }

  .portfolio__item--wide {
    grid-column: span 1
  }

  .cta-card {
    grid-template-columns: 1fr
  }

  .cta-card__left {
    padding: 40px 32px
  }

  .cta-card__right {
    padding: 40px 32px
  }

  .form-app__row {
    grid-template-columns: 1fr
  }


  .faq-wrap {
    grid-template-columns: 1fr;
    gap: 40px
  }
  .faq-aside {
    position: static
  }

  .contacts__grid {
    grid-template-columns: 1fr
  }

  .reviews__grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .contact-page__grid {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .contact-page__map {
    height: 380px
  }

  .cat-sub__grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .cat-intro__grid {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .cat-benefits__grid {
    grid-template-columns: repeat(2, 1fr)
  }

}

@media(max-width:768px) {
  .container {
    padding: 0 16px
  }

  .header-top {
    display: none
  }

  .header.top-hidden {
    transform: none
  }

  .hero {
    padding: 100px 0 60px
  }

  .hero__slider{height:280px}
  .hero__thumb{height:58px}
  .hero__arrow{width:36px;height:36px}

  .hero__container-REMOVED {
    min-height: auto;
    padding-top: 120px;
    padding-bottom: 40px
  }

  .hero__title {
    font-size: 32px
  }

  .hero__btns {
    flex-direction: column
  }

  .hero__btns .btn {
    width: 100%;
    text-align: center
  }

  .trust-bar {
    margin-top: -32px
  }

  .trust-bar__grid {
    grid-template-columns: 1fr
  }

  .trust-bar__item {
    border-right: 0;
    border-bottom: 1px solid var(--d1)
  }

  .trust-bar__item:last-child {
    border: 0
  }

  .catalog__grid {
    grid-template-columns: 1fr
  }

  .cat-card--wide {
    grid-column: span 1
  }

  .product-row__img img {
    height: 260px
  }

  .about__gallery {
    height: 300px
  }

  .about__checks {
    grid-template-columns: 1fr
  }

  .about__btns {
    flex-direction: column
  }

  .adv-grid {
    grid-template-columns: 1fr
  }

  /* 2-column timeline on mobile */
  .process-flow {
    padding: 0
  }
  .process-flow__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 16px
  }
  .pstep {
    padding: 0
  }
  .pstep__circle {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    box-shadow: 0 0 0 6px var(--w)
  }
  .pstep__num {
    font-size: 10px;
    padding: 3px 7px
  }
  .pstep h4 {
    font-size: 14px;
    margin-bottom: 4px
  }
  .pstep p {
    font-size: 12px;
    line-height: 1.45
  }
  .pstep:hover .pstep__circle {
    transform: translateY(-2px);
    box-shadow: 0 0 0 6px var(--w), var(--shb)
  }
  .pstep--accent .pstep__circle {
    box-shadow: 0 0 0 6px var(--w), var(--shb)
  }

  .partners__inner {
    padding: 28px 20px
  }

  .partners__logo {
    width: 140px;
    height: 80px
  }

  .portfolio__masonry {
    grid-template-columns: 1fr
  }

  .reviews__grid {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 16px 20px;
    margin: 0 -16px
  }

  .reviews__grid::-webkit-scrollbar {
    display: none
  }

  .review-card {
    flex: 0 0 86%;
    scroll-snap-align: center
  }

  .reviews__dots {
    display: flex
  }

  .contacts__info {
    gap: 12px
  }


  .footer__grid {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .footer__bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center
  }

  .footer__bottom-links {
    flex-direction: column;
    gap: 8px
  }

  .contact-page {
    padding-bottom: 60px
  }

  .page-head {
    padding: 120px 0 80px
  }

  .page-head__title {
    letter-spacing: -.6px;
    margin-bottom: 28px
  }

  .page-head__crumbs {
    margin-bottom: 24px
  }

  .contact-page__wrap {
    margin-top: -48px;
    padding-top: 20px
  }

  .contact-info,
  .form-card {
    padding: 24px
  }

  .form-app__title {
    font-size: 20px
  }

  .contact-page__map {
    height: 300px
  }

  .cat-page > .cat-sub,
  .cat-page > .cat-intro,
  .cat-page > .cat-types,
  .cat-page > .cat-benefits,
  .cat-page > .cat-text {
    padding: 56px 0
  }

  .cat-page > .cat-sub {
    margin-top: -48px;
    padding-top: 20px
  }

  .cat-sub__grid {
    grid-template-columns: 1fr
  }

  .cat-facts {
    grid-template-columns: repeat(2, 1fr)
  }

  .cat-types__grid {
    grid-template-columns: 1fr
  }

  .types-col {
    padding: 24px
  }

  .cat-benefits__grid {
    grid-template-columns: 1fr
  }

  .cat-text__inner {
    padding: 32px 24px
  }

  .cat-text__inner::before {
    top: 28px;
    bottom: 28px
  }

  .sub-card__body {
    padding: 20px 22px 22px
  }

  .sub-card__arrow {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px
  }

  .s-header {
    flex-direction: column;
    align-items: flex-start
  }

  .s-header--center {
    align-items: center
  }

  .cta-card__left {
    padding: 32px 20px
  }

  .cta-card__right {
    padding: 32px 20px
  }

  .cta-card__stats {
    flex-wrap: wrap;
    gap: 16px
  }

  .cta-card__features {
    grid-template-columns: 1fr
  }

  .cta-stat + .cta-stat {
    padding-left: 0
  }

  .cta-stat + .cta-stat::before {
    display: none
  }
}

@media(max-width:480px) {
  .hero__title {
    font-size: 26px
  }

  .s-title {
    font-size: 22px
  }

  .partners__logo {
    width: 120px;
    height: 72px;
    padding: 12px 16px
  }

  .partners__logo img {
    max-height: 40px
  }
}