@media (max-width: 1024px) {
  .nav,
  .header__phone {
    display: none;
  }

  .burger {
    display: block;
  }

  .hero__grid,
  .about,
  .contacts {
    grid-template-columns: minmax(0, 1fr);
  }

  .cards,
  .steps,
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cards .card:last-child,
  .footer__grid > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  :root {
    --header-h: 64px;
  }

  .header__cta .btn {
    display: none;
  }

  .logo {
    font-size: 17px;
  }

  .logo__mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .hero__actions .btn,
  .requisites__head .btn {
    width: 100%;
  }

  .hero__points {
    flex-direction: column;
    gap: 12px;
  }

  .cards,
  .advantages,
  .steps,
  .about__facts,
  .form__grid,
  .requisites__list,
  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cards .card:last-child,
  .footer__grid > :first-child {
    grid-column: auto;
  }

  .advantage {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .footer {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  .call-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 45;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
      0 -1px 0 var(--line),
      0 -12px 30px -18px rgba(15, 27, 45, 0.35);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transform: translateY(110%);
    transition: transform 0.3s ease;
  }

  .call-bar.is-visible {
    transform: none;
  }

  body.menu-open .call-bar {
    transform: translateY(110%);
  }

  .call-bar .btn {
    min-height: 48px;
    padding: 10px 12px;
    font-size: 15px;
  }

  .to-top {
    bottom: calc(84px + env(safe-area-inset-bottom));
    width: 46px;
    height: 46px;
  }

  .toast {
    bottom: calc(92px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .header,
  .mobile-menu,
  .call-bar,
  .to-top,
  .toast,
  .form,
  .hero__actions {
    display: none !important;
  }

  .hero,
  .process,
  .footer {
    background: #fff !important;
    color: #000 !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}