/* ================================================
   NEUROFORGE Mobile Fix v3.0
   Loaded LAST to override all inline and page styles
   ================================================ */

/* ===== GLOBAL ===== */
html, body { overflow-x: hidden !important; max-width: 100vw !important; }

/* ===== MOBILE NAV (≤1024px) ===== */
@media (max-width: 1024px) {
    /* Menu panel: opaque, above everything — display controlled by JS */
    .nav-menu {
        flex-direction: column !important;
        z-index: 100000 !important;
        background-color: #0D0D14 !important;
    }
    /* Nav-items must be block */
    .nav-menu > .nav-item { display: block !important; width: 100% !important; }
    /* All nav-links: flex row */
    .nav-menu .nav-link {
        display: flex !important; width: 100% !important;
        padding: 18px 16px !important; font-size: 16px !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        border-radius: 0 !important; color: #B8B8C8 !important;
        text-decoration: none !important; align-items: center !important;
    }
    /* DE default */
    html:not([lang="en"]) .nav-menu .nav-link[data-lang-de] { display: flex !important; }
    html:not([lang="en"]) .nav-menu .nav-link[data-lang-en] { display: none !important; }
    html:not([lang="en"]) .nav-menu .nav-cta[data-lang-de] { display: block !important; }
    html:not([lang="en"]) .nav-menu .nav-cta[data-lang-en] { display: none !important; }
    /* EN mode */
    html[lang="en"] .nav-menu .nav-link[data-lang-en] { display: flex !important; }
    html[lang="en"] .nav-menu .nav-link[data-lang-de] { display: none !important; }
    html[lang="en"] .nav-menu .nav-cta[data-lang-en] { display: block !important; }
    html[lang="en"] .nav-menu .nav-cta[data-lang-de] { display: none !important; }
    /* Hide ZH */
    .nav-menu .nav-link[data-lang-zh] { display: none !important; }
    .nav-menu .nav-dropdown[data-lang-zh] { display: none !important; }
    /* Links WITHOUT data-lang (Pricing, FAQ) always show */
    .nav-menu .nav-link:not([data-lang-de]):not([data-lang-en]):not([data-lang-zh]) { display: flex !important; }
    /* Dropdowns */
    .nav-menu .nav-dropdown { display: none !important; }
    html:not([lang="en"]) .nav-item.active .nav-dropdown[data-lang-de] { display: block !important; }
    html[lang="en"] .nav-item.active .nav-dropdown[data-lang-en] { display: block !important; }
    html[lang="en"] .nav-item.active .nav-dropdown[data-lang-de] { display: none !important; }
    /* CTA */
    .nav-menu .nav-cta { margin: 24px 0 0 0 !important; text-align: center !important; padding: 18px 32px !important; font-size: 16px !important; }
    
    /* Dropdown items: fit in mobile width */
    .nav-menu .nav-dropdown {
        position: static !important;
        transform: none !important;
        min-width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        border: none !important;
        box-shadow: none !important;
        padding: 8px 0 !important;
        margin-left: 0 !important;
        left: 0 !important;
    }
    .nav-menu .dropdown-item {
        padding: 10px 12px !important;
        gap: 10px !important;
    }
    .nav-menu .dropdown-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
        flex-shrink: 0 !important;
    }
    .nav-menu .dropdown-content h4 { font-size: 13px !important; }
    .nav-menu .dropdown-content p { font-size: 11px !important; }
    
    /* Language switcher: prominent in mobile menu */
    .nav-menu .lang-switcher {
        display: flex !important;
        gap: 12px !important;
        margin: 20px 16px !important;
        padding: 16px 0 !important;
        border-top: 1px solid rgba(255,255,255,0.08) !important;
        justify-content: center !important;
    }
    .nav-menu .lang-btn {
        width: 40px !important;
        height: 28px !important;
        opacity: 0.6 !important;
        border-radius: 4px !important;
        border: 2px solid transparent !important;
    }
    .nav-menu .lang-btn.active {
        opacity: 1 !important;
        border-color: #E94560 !important;
    }
}

/* ===== TABLET (≤768px) ===== */
@media (max-width: 768px) {
    p,li,h1,h2,h3,h4,h5,h6,span,a,div,blockquote { overflow-wrap: break-word; word-wrap: break-word; }
    img,video,iframe,table,pre { max-width: 100% !important; }
    section { padding: 80px 0; }
    .section-header h2 { font-size: 28px !important; }
    .section-header p { font-size: 15px !important; }
    .what-is-content h2 { font-size: 28px !important; }
    .what-is-lead { font-size: 17px !important; }
    .what-is-text { font-size: 15px !important; }
    .not-is { padding: 60px 0 !important; }
    .not-is-column h3 { font-size: 20px !important; }
    .not-is-item { padding: 16px 16px !important; font-size: 15px !important; }
    .framework-intro h2 { font-size: 28px !important; }
    .framework-intro p { font-size: 15px !important; }
    .phase-content h3 { font-size: 24px !important; }
    .phase-number { font-size: 24px !important; }
    .phase-icon { font-size: 48px !important; }
    .team-card-icon { font-size: 32px !important; }
    .day-number { font-size: 36px !important; }
    .hero h1 { font-size: clamp(32px, 8vw, 48px) !important; }
    .hero-stat h3 { font-size: 36px !important; }
    .hero-floating-card p { font-size: 24px !important; }
    .price { font-size: 40px !important; }
    .founders-status h4 { font-size: 24px !important; }
    .comparison-header, .comparison-row { grid-template-columns: 1.8fr 1fr 1fr !important; }
    .comparison-header div, .comparison-row div { font-size: 13px !important; padding: 12px 10px !important; }
    .comparison-header div:first-child { display: none !important; }
    .comparison-row div:first-child { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }
    .blog-hero h1 { font-size: 28px !important; }
    .blog-subtitle { font-size: 16px !important; }
    .blog-content h2 { font-size: 24px !important; }
    .blog-content p { font-size: 16px !important; }
    .article-title { font-size: 1.6rem !important; }
    .article-body h2 { font-size: 1.2rem !important; }
}

/* ===== MOBILE (≤480px) ===== */
@media (max-width: 480px) {
    .container { padding: 0 16px !important; }
    section { padding: 60px 0 !important; }
    .section-header h2,.what-is-content h2,.framework-intro h2,#insights h2 { font-size: 22px !important; word-break: break-word; }
    section h2 { word-break: break-word; }
    .section-header p { font-size: 13px !important; }
    .hero { padding: 100px 0 60px !important; }
    .hero-grid { gap: 32px !important; }
    .hero h1 { font-size: 32px !important; }
    .hero-badge { font-size: 10px !important; padding: 6px 12px !important; margin-bottom: 16px !important; }
    .hero-claim { font-size: 12px !important; letter-spacing: 1.5px !important; }
    .hero-subtitle { font-size: 14px !important; }
    .hero-tagline { font-size: 13px !important; padding-left: 12px !important; }
    .hero-floating-card { left: 12px !important; bottom: -12px !important; padding: 14px !important; }
    .hero-floating-card h4 { font-size: 10px !important; }
    .hero-floating-card p { font-size: 20px !important; }
    .hero-stats { gap: 12px !important; }
    .hero-stat h3 { font-size: 24px !important; }
    .hero-stat p { font-size: 10px !important; }
    .hero-ctas { flex-direction: column !important; gap: 10px !important; }
    .hero-ctas .btn-primary,.hero-ctas .btn-secondary { width: 100% !important; text-align: center !important; justify-content: center !important; }
    .what-is-lead { font-size: 15px !important; }
    .what-is-text { font-size: 14px !important; }
    .what-is-point { padding: 12px 12px !important; }
    .what-is-point p { font-size: 13px !important; }
    .what-is-quote p { font-size: 16px !important; }
    .not-is { padding: 48px 0 !important; }
    .not-is-column h3 { font-size: 16px !important; flex-wrap: wrap !important; }
    .not-is-item { padding: 12px 10px !important; font-size: 13px !important; gap: 10px !important; }
    .framework-intro p { font-size: 13px !important; }
    .phase-content h3 { font-size: 20px !important; }
    .phase-number { font-size: 20px !important; }
    .phase-icon { font-size: 40px !important; }
    .phase-content p { font-size: 14px !important; }
    .team-card h3 { font-size: 16px !important; }
    .team-card p { font-size: 13px !important; }
    .team-card-icon { font-size: 28px !important; }
    .day-number { font-size: 28px !important; }
    .price { font-size: 32px !important; }
    .founders-status h4 { font-size: 20px !important; }
    .comparison-header,.comparison-row { grid-template-columns: 1.4fr 1fr 1fr !important; }
    .comparison-header div,.comparison-row div { font-size: 11px !important; padding: 8px 6px !important; }
    .nav-container { height: 60px !important; padding: 0 16px !important; }
    .nav-logo { font-size: 17px !important; }
    .nav-menu { top: 60px !important; padding: 12px !important; }
    .nav-menu .nav-link { padding: 14px 12px !important; font-size: 15px !important; }
    .nav-cta { padding: 14px 20px !important; font-size: 14px !important; }
    #insights { padding: 48px 0 !important; }
    #insights [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 20px !important; }
    #insights [style*="grid-column: 1 / -1"] { grid-column: auto !important; }
    .lead-form { padding: 0 16px !important; }
    [style*="font-size: clamp(36px"] { font-size: 22px !important; }
    .blog-hero { padding: 100px 0 48px !important; }
    .blog-hero .container { padding: 0 16px !important; }
    .blog-hero h1 { font-size: 22px !important; line-height: 1.15 !important; }
    .blog-subtitle { font-size: 14px !important; }
    .blog-meta { font-size: 12px !important; gap: 8px !important; flex-wrap: wrap !important; }
    .blog-content { padding: 32px 16px !important; }
    .blog-content h2 { font-size: 20px !important; margin: 32px 0 14px !important; }
    .blog-content h3 { font-size: 17px !important; }
    .blog-content p { font-size: 15px !important; line-height: 1.7 !important; }
    .pullquote { padding: 16px 16px !important; border-left-width: 3px !important; }
    .pullquote p { font-size: 15px !important; }
    .blog-cta { padding: 28px 16px !important; }
    .stat-card .number { font-size: 28px !important; }
    .science-box { padding: 20px 16px !important; }
    .article-hero { padding: 100px 16px 48px !important; }
    .article-title { font-size: 1.5rem !important; line-height: 1.2 !important; }
    .article-subtitle { font-size: 0.95rem !important; }
    .article-body { padding: 32px 16px 60px !important; }
    .article-body h2 { font-size: 1.15rem !important; }
    .article-body p { font-size: 0.95rem !important; }
    .nav-bar { padding: 12px 16px !important; }
    .nav-bar .nav-logo { font-size: 0.9rem !important; }
    .lang-toggle { top: 12px !important; right: 12px !important; }
    .key-number .number { font-size: 2.5rem !important; }
    .highlight-box { padding: 16px 14px !important; }
    .article-cta { padding: 28px 16px !important; }
    .author-box { padding: 20px 16px !important; }
    .article-cta-brand { font-size: 16px !important; }
}

/* ===== EXTRA SMALL (≤360px) ===== */
@media (max-width: 360px) {
    .hero h1 { font-size: 28px !important; }
    .section-header h2,.what-is-content h2,.framework-intro h2 { font-size: 20px !important; }
    .not-is-column h3 { font-size: 14px !important; }
    .blog-hero h1 { font-size: 20px !important; }
    .article-title { font-size: 1.3rem !important; }
    .price { font-size: 28px !important; }
}