/* ==========================================================================
   Responsive — Redesign v2
   ========================================================================== */
@media (max-width: 1080px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .technology__grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: -1; max-width: 380px; margin: 0 auto 20px; }
  .hero__float-badge { display: none; }
  .about__inner { grid-template-columns: 1fr; }
  .about__media { max-width: 420px; margin: 0 auto; }
}

/* Nav switches to hamburger earlier — a 7-item pill nav + brand + CTA
   never fits comfortably on laptop widths, so hand off to the mobile
   menu well before that squeeze point instead of letting text wrap. */
@media (max-width: 1220px) {
  .brand__tagline { display: none; }

  .main-nav {
    position: fixed;
    top: 78px; left: 16px; right: 16px;
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--el-4);
    padding: 14px;
    overflow: visible;
    transform: translateY(-14px);
    opacity: 0;
    pointer-events: none;
    transition: all .25s ease;
  }
  .main-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .main-nav ul { flex-direction: column; background: none; padding: 0; gap: 2px; width: 100%; }
  .main-nav li { flex-shrink: 1; }
  .main-nav a { padding: 12px 16px; font-size: 14.5px; }
  .header-cta { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 860px) {
  :root { --section-pad-y: var(--section-pad-y-mobile); }

  .services__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .technology__grid { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .cta__inner { flex-direction: column; text-align: center; padding: 44px 28px; }
  .cta__text { flex-direction: column; }
}

@media (max-width: 600px) {
  .services__grid { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
  .reason-card { gap: 16px; }
  .reason-card__icon { width: 56px; height: 56px; }
  .reason-card__content { padding-top: 8px; }
  .site-footer__bottom-inner { flex-direction: column; text-align: center; }
  .technology { margin: 0 12px; }
  .cta { margin: 24px 12px 0; }
}