@media (max-width: 900px) {
    .topbar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .topbar-right { width:100%; justify-content:space-between; }
    .topbar nav { flex-wrap: wrap; gap: 10px; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-visual { height: 340px; }
    .device.tablet { right: 10px; }
    .device.laptop { right: 0; }
    .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
    .cta { flex-direction: column; }
    .btn { text-align: center; }
}