/* ========================================
   MOBILE RESPONSIVENESS (PHONES & TABLETS)
   ======================================== */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
        padding: 15px;
        gap: 15px;
    }
    
    .nav-center {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    
    .nav-right {
        width: 100%;
        justify-content: center;
    }
    
    .hero-modern {
        margin: 40px auto;
    }
    
    .hero-title {
        font-size: 36px;
    }
    
    .hero-subtitle {
        font-size: 16px;
    }
    
    .hero-actions {
        flex-direction: column;
        width: 100%;
        padding: 0 20px;
    }
    
    .btn-modern-primary, .btn-modern-secondary {
        width: 100%;
    }
    
    .dashboard-wrapper {
        flex-direction: column;
        height: auto;
    }
    
    .dashboard-sidebar {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    
    .dashboard-main {
        padding: 20px;
    }
    
    .page-topbar {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bento-item {
        padding: 20px;
    }
}