/* ==========================================================================
   Responsive rules — desktop, laptop, tablet, mobile
   ========================================================================== */

@media (max-width: 1080px) {
  h1 { font-size: 2.5rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
  .section { padding: 78px 0; }
  .split, .contact-grid { grid-template-columns: 1fr; gap: 34px; }
  .split__media img { height: 320px; }
  .grid--3, .grid--2 { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .vision { padding: 44px 26px; }

  .wrap { padding: 0 20px; }
  .nav { padding: 12px 0; min-height: 68px; gap: 12px; }
  .brand img { height: 40px; }
  .nav__toggle { display: block; flex: 0 0 auto; margin-left: auto; }
  .nav__cta { display: none; }
  .nav__menu {
    position: absolute;
    top: 100%; left: 20px; right: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: none;
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu a, .header.is-solid .nav__menu a { color: var(--text); padding: 13px 14px; }
  .nav__menu a.is-active::after { display: none; }
  .nav__menu a.is-active { background: rgba(255, 140, 0, 0.1); }
}

@media (max-width: 640px) {
  h2 { font-size: 1.7rem; }
  .wrap { padding: 0 18px; }
  .hero { height: 90vh; min-height: 540px; }
  .slide__inner { padding: 90px 34px 70px; }
  .hero__arrow { width: 42px; height: 42px; }
  .hero__arrow--prev { left: 10px; }
  .hero__arrow--next { right: 10px; }
  .grid--3, .grid--2, .stats { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .banner { padding: 150px 0 66px; }
  .form-card { padding: 24px; }
  .btn { padding: 13px 24px; }
  .slide__actions .btn { flex: 1 1 auto; text-align: center; }
}