/* GLOBAL MOBILE RESPONSIVENESS */

@media screen and (max-width: 992px) {
    /* Stack generic grid layouts */
    .hero-split,
    .content-split,
    .comparison-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        text-align: center;
    }
    
    /* Disable hover 3D tilt effects on touch devices to prevent jumping */
    .tilt-wrapper {
        perspective: none !important;
    }
    .tilt-card, .tilt-card-reverse, .holo-panel {
        transform: none !important;
        transition: none !important;
    }
    .float-3d {
        transform: none !important;
        position: static !important;
        margin-top: 20px;
    }
    
    /* Scale down typography */
    h1 { font-size: clamp(2.5rem, 8vw, 3.5rem) !important; }
    h2 { font-size: clamp(2rem, 6vw, 2.8rem) !important; }
    p { font-size: 1rem !important; }
    
    /* Adjust padding for mobile screens */
    section { padding: 80px 20px !important; }
    .v1-hero { padding: 120px 20px 60px !important; }
    
    /* Flowcharts & Diagrams */
    .flowchart {
        flex-direction: column !important;
        padding: 20px !important;
    }
    .flow-arrow {
        width: 4px !important;
        height: 40px !important;
    }
    .flow-arrow::after {
        right: -8px !important;
        top: auto !important;
        bottom: -10px !important;
        border-left: 10px solid transparent !important;
        border-right: 10px solid transparent !important;
        border-top: 15px solid #FF9900 !important;
    }
    
    /* Flywheel adjustments */
    .flywheel-container { transform: scale(0.7); margin: 20px auto !important; }
    
    /* Tables for Vs Pages */
    table { width: 100% !important; display: block; overflow-x: auto; white-space: nowrap; }
    
    /* Sticky timelines become static on mobile */
    .sticky-timeline { display: block !important; padding: 60px 20px !important; }
    .sticky-left { position: static !important; margin-bottom: 40px; }
}

@media screen and (max-width: 480px) {
    /* Extreme mobile */
    .btn { padding: 15px 30px !important; width: 100%; display: block; box-sizing: border-box; }
    .magic-img, .story-img { height: auto !important; max-height: 400px; }
    .faq-q { font-size: 1.2rem !important; }
}