/* Mobile-first responsive rules */
@media (max-width:767px){
  .nav-menu{display:none;flex-direction:column;background:#fff;position:absolute;top:64px;right:16px;padding:1rem;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,0.08)}
  .hamburger{display:block}
  .hero-grid{grid-template-columns:1fr;gap:1rem}
  .hero-content h1{font-size:2rem}
  .grid-4{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .container{padding:1rem}
}

@media (min-width:768px) and (max-width:1023px){
  .hero-grid{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .container{padding:1rem}
}

@media (min-width:1024px){
  .nav-menu{display:flex}
  .hamburger{display:none}
}