/* Responsive adaptations — preserve reference-inspired rhythm on smaller screens */

@media (max-width: 1024px) {
  .trust__intro,
  .quote__inner,
  .tech-layout,
  .footer__grid {
    grid-template-columns: 1fr;
  }

  .bento__item,
  .bento__item--wide {
    grid-column: span 6;
  }

  .hero__visual-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .nav__links,
  .nav__cta .btn--secondary {
    display: none;
  }

  .nav__toggle {
    display: inline-flex;
  }

  .nav__links.is-open {
    display: flex;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.75rem 1.25rem 1.25rem;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 16px 30px rgba(15, 23, 32, 0.08);
  }

  .nav__links.is-open .nav__link {
    padding: 0.9rem 0.35rem;
    border-bottom: 1px solid var(--color-border);
  }

  .nav__links.is-open .nav__link:last-child {
    border-bottom: 0;
  }

  .service-grid,
  .trust__stats,
  .tech-metrics {
    grid-template-columns: 1fr;
  }

  .bento {
    grid-template-columns: 1fr;
  }

  .bento__item,
  .bento__item--wide {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .container,
  .container--narrow {
    width: min(100% - 1.5rem, var(--container));
  }

  .hero {
    padding-top: 2.75rem;
  }

  .hero__actions,
  .cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn,
  .cta__actions .btn {
    width: 100%;
  }

  .stat-card__value {
    font-size: 2.3rem;
  }

  .cta__panel,
  .service-card,
  .bento__item,
  .tech-panel {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  .footer__bottom {
    flex-direction: column;
  }

  .modal__panel {
    padding: 1.6rem 1.2rem 1.3rem;
  }
}

@media (min-width: 861px) {
  .nav__links {
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}
