/* =========================================
   GLOBAL MOBILE REDESIGN 2.0 (Mobile First Reset)
   ========================================= */
@media (max-width: 768px) {

    /* 1. Global Typography Reset */
    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li,
    span,
    a,
    div {
        font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
    }

    h1 {
        font-size: 2.2rem !important;
        line-height: 1.2;
        letter-spacing: -0.5px;
    }

    h2 {
        font-size: 1.8rem !important;
        letter-spacing: -0.5px;
    }

    h3 {
        font-size: 1.4rem !important;
    }

    p,
    li {
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
        color: #cbd5e1 !important;
    }

    /* 2. Container & Layout Reset */
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
    }

    .section-padding {
        padding: 50px 0 !important;
    }

    /* 3. Grid Stacking Reset */
    .grid-2,
    .grid-3,
    .grid-4,
    .bento-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    /* 4. Widget & Frame Fit */
    img,
    video,
    iframe,
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    .glass-panel,
    .glass-card,
    .feature-card {
        padding: 25px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 5. Flex Direction Flipping */
    .flex-row,
    .hero-content div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* 6. Button Sizing */
    .btn,
    button {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
}