@media (max-width: 1050px) {
  .header { padding: 0 4vw; }
  .menu-toggle { display: block; }
  .nav {
    position: absolute;
    top: 84px;
    left: 0;
    width: 100%;
    padding: 24px 5vw 30px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 17px;
    background: rgba(8,8,8,.98);
    border-bottom: 1px solid rgba(212,175,55,.2);
  }
  .nav.open { display: flex; }
  .nav .btn { width: 100%; }

  .hero {
    grid-template-columns: 1fr;
    padding-top: 145px;
  }
  .login-card { justify-self: start; max-width: 560px; }
  .about-grid, .product-grid { grid-template-columns: 1fr 1fr; }
  .benefits { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .header { min-height: 74px; }
  .brand-text strong { font-size: 1.05rem; }
  .brand-mark { width: 40px; height: 40px; }
  .nav { top: 74px; }

  .hero { padding: 125px 6vw 70px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .login-card { padding: 26px 20px; }

  .section, .benefits { padding: 80px 6vw; }
  .about-grid, .product-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 230px; }
  .feature-card h3 { margin-top: 35px; }

  .footer-links { flex-direction: column; gap: 10px; }
  .toast { left: 16px; right: 16px; bottom: 16px; }
}

@media (max-width: 420px) {
  h1 { font-size: 2.75rem; }
  .brand-text small { letter-spacing: .2em; }
  .section-heading h2, .benefits h2 { font-size: 2.4rem; }
}