@media (max-width: 1024px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .nav__links {
    position: fixed;
    inset: 64px 1rem auto 1rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.5rem;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .nav__links a {
    padding: 0.9rem 1rem;
    border-radius: var(--radius-sm);
  }

  .nav__links a:not(.nav__cta):hover {
    background: rgba(0, 80, 240, 0.08);
  }

  .nav__links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav__cta {
    margin-top: 0.25rem;
    text-align: center;
  }

  .nav__links .nav__lang {
    margin: 0.5rem auto 0;
  }

  .nav__links .nav__lang a,
  .nav__links .nav__lang span {
    padding: 0.65rem 1rem;
  }

  .nav__toggle {
    display: flex;
  }

  .nav__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav__toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .nav__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .hero {
    flex-direction: column;
    text-align: center;
    padding: 6.5rem 1.5rem 3rem;
    gap: 2.5rem;
  }

  .hero__lead {
    margin-inline: auto;
  }

  .hero__actions,
  .hero__pillars {
    justify-content: center;
  }

  .about,
  .contact {
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
  }

  .hero__content,
  .hero__visual,
  .about__copy,
  .contact__copy,
  .contact__form {
    flex-basis: auto;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .contact__form .btn {
    width: 100%;
  }

  .footer__links {
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 3rem 1.25rem;
  }

  .steps {
    padding-left: 0;
  }

  .footer__inner {
    flex-direction: column;
    gap: 2rem;
  }
}