/* ================= RESPONSIVE SYSTEM ================= */

@media (max-width: 1100px) {
    nav {
        padding-left: clamp(14px, 4vw, 36px);
        padding-right: clamp(14px, 4vw, 36px);
    }

    section,
    .hero,
    footer {
        padding-left: clamp(14px, 5vw, 44px);
        padding-right: clamp(14px, 5vw, 44px);
    }
}

@media (max-width: 860px) {
    nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    nav > div:last-child {
        width: 100%;
        justify-content: flex-start;
        gap: 6px 12px;
    }

    .grid,
    .kpi-row,
    .dashboard-grid,
    .tech-grid,
    .profile-grid,
    .analytics-grid {
        grid-template-columns: 1fr;
    }

    .command-table {
        display: block;
        overflow-x: auto;
    }
}

@media (max-width: 620px) {
    section {
        padding-top: 46px;
        padding-bottom: 46px;
    }

    .hero {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .panel,
    .card {
        border-radius: 14px;
    }

    .btn {
        width: 100%;
    }

    .top-action-grid {
        grid-template-columns: 1fr;
    }
}