@media (max-width: 1024px) {
    .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 768px) {
    .header-inner{flex-direction:column}
    .main-nav{flex-wrap:wrap;justify-content:center;gap:16px}
    .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
    .hero{padding:48px 24px}
    .hero h1{font-size:2rem}
}
@media (max-width: 480px) {
    .container{padding:0 16px}
    .card{padding:16px}
    .search-box input{padding:12px 20px;font-size:1rem}
}