/* MOBILE OVERRIDE STYLES - FORCE LAYOUT FIXES */

@media screen and (max-width: 768px) {
    /* HERO SECTION COMPLETE OVERRIDE */
    section.hero {
        padding: 1rem !important;
        min-height: unset !important;
        height: auto !important;
        display: block !important;
        position: relative !important;
        margin-top: 70px !important; /* Account for fixed nav */
    }
    
    /* Hero content container */
    .hero .hero-content {
        position: relative !important;
        z-index: 2 !important;
        padding: 1rem !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* Hero title - make it smaller */
    .hero .hero-title {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
        font-weight: 700 !important;
    }
    
    /* Hero subtitle - smaller */
    .hero .hero-subtitle {
        font-size: 0.85rem !important;
        margin-bottom: 0.5rem !important;
        opacity: 0.9 !important;
    }
    
    /* Hide description and features completely */
    .hero .hero-description,
    .hero .hero-features {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* CTA Button - make it prominent */
    .hero .cta-button,
    .hero-content > button {
        display: block !important;
        width: 80% !important;
        max-width: 250px !important;
        margin: 1rem auto !important;
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        border: none !important;
        border-radius: 25px !important;
        font-weight: 600 !important;
        position: relative !important;
        z-index: 3 !important;
    }
    
    /* 3D Animation Container - COMPLETELY REDESIGN */
    .hero .hero-3d-animation {
        position: relative !important;
        width: 100% !important;
        height: 120px !important;
        max-height: 120px !important;
        margin: 1rem auto 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* Logo container - much smaller */
    .hero .logo-3d-container {
        position: relative !important;
        width: 100px !important;
        height: 100px !important;
        max-width: 100px !important;
        max-height: 100px !important;
        transform: none !important;
        margin: 0 !important;
    }
    
    /* Hide ALL animation elements */
    .hero .printer-animation-wrapper,
    .hero .printer-nozzle,
    .hero .nozzle-tip,
    .hero .nozzle-beam,
    .hero .scan-line,
    .hero .particles,
    .hero .particle,
    .hero .progress-container,
    .hero .progress-fill,
    .hero .progress-label,
    .hero .logo-wrapper,
    .hero .grid-lines,
    .hero .printing-bed {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Show ONLY the logo image */
    .hero .bearface-logo-bg {
        display: block !important;
        width: 100px !important;
        height: 100px !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        position: relative !important;
        opacity: 0.9 !important;
    }
    
    /* Ensure proper stacking */
    .hero > * {
        position: relative !important;
        z-index: 1 !important;
    }
}

/* Extra small devices */
@media screen and (max-width: 375px) {
    .hero .hero-title {
        font-size: 1.3rem !important;
    }
    
    .hero .hero-subtitle {
        font-size: 0.75rem !important;
    }
    
    .hero .hero-3d-animation {
        height: 80px !important;
    }
    
    .hero .logo-3d-container,
    .hero .bearface-logo-bg {
        width: 80px !important;
        height: 80px !important;
    }
}