@media (max-width: 900px) {
    .header {
        flex-direction: column;
        gap: 15px;
    }

    .header nav {
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero {
        grid-template-columns: 1fr;
        padding: 45px 6%;
    }

    .hero-text h1 {
        font-size: 34px;
    }

    .service-grid {
        grid-template-columns: 1fr;
    }

    .login-wrapper {
        grid-template-columns: 1fr;
    }

    .login-info {
        padding: 35px;
    }

    .layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
    }

    .main {
        padding: 18px;
    }

    .topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

@media (max-width: 520px) {
    .hero-actions {
        flex-direction: column;
    }

    .login-card {
        padding: 28px;
    }

    table {
        font-size: 13px;
    }
}