/* ================================
   NEUROFISSION - RESPONSIVE DESIGN - PERFORMANCE OPTIMIZED
   ================================ */

/* Mobile First - Simplified Breakpoints for Performance */

/* Mobile (up to 767px) */
@media (max-width: 767px) {
    body { font-size: 14px; overflow-x: hidden; }
    .container-fluid { padding: 0 1rem; }
    .section, .section-padding { padding: 2.5rem 0; }
    
    /* Better touch targets */
    .btn, button, .nav-link, .hamburger-trigger {
        min-height: 44px !important;
        min-width: 44px !important;
        touch-action: manipulation;
    }
    
    /* Form improvements */
    input, textarea, select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 12px !important;
        border-radius: 8px !important;
    }
    
    /* Images and media */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Better scrolling */
    .container, .container-fluid {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Center all content on mobile */
    .container, .container-fluid {
        text-align: center;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Center all sections and content */
    .section {
        text-align: center;
    }
    
    .row {
        justify-content: center;
        text-align: center;
    }
    
    .col-lg-6, .col-md-6, .col-sm-12, [class*="col-"] {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    /* Typography - Optimized */
    h1 { font-size: 1.75rem !important; line-height: 1.2; }
    h2 { font-size: 1.5rem !important; line-height: 1.3; }
    h3 { font-size: 1.25rem !important; }
    p { font-size: 14px; line-height: 1.5; }
    
    /* Components */
    .btn { padding: 12px 20px; font-size: 14px; min-height: 44px; }
    .card { padding: 1rem; margin-bottom: 1rem; }
    
    /* Layout - Single column */
    .stats-grid, .services-grid, .industry-grid, .tools-categories { 
        grid-template-columns: 1fr !important; 
        gap: 1rem !important; 
    }
    
    /* Navigation */
    .navbar-brand { font-size: 1.1rem !important; }
    .navbar-logo { width: 32px !important; height: 32px !important; }
    
    /* Hide desktop navigation on mobile */
    .desktop-nav {
        display: none !important;
    }
    
    /* Hamburger Menu Mobile Fix */
    .hamburger-menu {
        display: block !important;
        position: relative !important;
        z-index: 1001 !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }
    
    .hamburger-trigger { 
        width: 44px !important; 
        height: 44px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
    }
    
    /* Ensure navbar content maintains proper layout */
    .modern-navbar .navbar-content,
    .modern-navbar .d-flex {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    /* Hero - Centered */
    .hero-section { 
        padding: 100px 0 60px 0; 
        text-align: center;
    }
    .hero-headline { 
        font-size: 1.75rem !important; 
        text-align: center;
    }
    .hero-connector { 
        font-size: 1.2rem !important; 
        text-align: center;
    }
    .hero-subheadline { 
        font-size: 14px !important; 
        text-align: center;
        margin: 0 auto 2rem auto;
        max-width: 90%;
    }
    .hero-content {
        flex-direction: column; 
        text-align: center; 
        gap: 2rem; 
        align-items: center;
    }
    .hero-cta { 
        flex-direction: column; 
        gap: 1rem; 
        align-items: center;
        justify-content: center;
    }
    .hero-cta .btn { 
        width: 100%; 
        max-width: 280px; 
        margin: 0 auto;
    }
    
    /* Footer - Mobile ultra-compact */
    .footer { 
        padding: 0.75rem 0 0.5rem 0; 
        margin-top: auto;
        background: #1a1a2e;
        color: white;
        text-align: center !important;
        border-top: 1px solid rgba(102, 126, 234, 0.15);
    }
    
    .footer .container,
    .footer .container-fluid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 0.5rem !important;
        padding: 0 1rem !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Ultra compact brand */
    .footer-brand {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin: 0;
    }
    
    .footer-logo {
        width: 20px;
        height: 20px;
    }
    
    .footer-text {
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.6);
        line-height: 1.2;
        margin: 0;
        text-align: center;
    }
    
    /* Compact links row */
    .footer-links {
        display: flex !important;
        flex-direction: row !important;
        gap: 1.25rem !important;
        margin: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .footer .footer-links a,
    .footer-links a {
        font-size: 0.75rem !important;
        color: rgba(255, 255, 255, 0.7) !important;
        text-decoration: none !important;
        padding: 0.25rem 0 !important;
        transition: color 0.3s ease !important;
        text-align: center !important;
    }
    
    .footer .footer-links a:hover,
    .footer-links a:hover {
        color: white !important;
    }
    
    /* Compact social icons */
    .footer-social {
        display: flex;
        gap: 0.75rem;
        margin: 0;
        justify-content: center;
    }
    
    .footer-social a {
        width: 28px;
        height: 28px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.8rem;
        transition: all 0.3s ease;
    }
    
    .footer-social a:hover {
        background: rgba(102, 126, 234, 0.3);
        color: white;
    }
    
    /* Tools and canvas - Mobile optimized */
    .tools-track { grid-template-columns: 1fr; gap: 1rem; }
    .tool-item { padding: 1rem; }
    
    /* Solutions section - Centered */
    .solutions-section {
        padding: 2.5rem 0;
        text-align: center;
    }
    
    .solutions-section .solution-card {
        padding: 1.5rem;
        margin: 0 auto 2rem auto;
        text-align: center;
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        max-width: 100%;
    }
    
    .solutions-section .row {
        margin: 0;
        justify-content: center;
        text-align: center;
    }
    
    .solutions-section .col-md-6 {
        padding: 1rem;
        margin-bottom: 2rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .solution-row {
        text-align: center;
        margin-bottom: 3rem;
    }
    
    /* Mobile/Tablet: Move canvas below text for all solution rows */
    .solution-row .row {
        flex-direction: column !important;
    }
    
    .solution-row .col-lg-6:first-child {
        order: 2 !important; /* Move image/canvas after text */
    }
    
    .solution-row .col-lg-6:last-child {
        order: 1 !important; /* Move text before image/canvas */
        margin-bottom: 2rem;
    }
    
    /* For reverse rows, text is already first in HTML, so keep natural order */
    .solution-row.reverse .col-lg-6:first-child {
        order: 1 !important; /* Text stays first */
    }
    
    .solution-row.reverse .col-lg-6:last-child {
        order: 2 !important; /* Canvas goes after text */
    }
    
    .solution-content {
        text-align: center;
        padding: 1rem;
    }
    
    .solution-content h3 {
        text-align: center;
        margin-bottom: 1rem;
    }
    
    .solution-content p {
        text-align: center;
        margin: 0 auto;
        max-width: 90%;
    }
    
    /* Additional mobile sections - All centered */
    .stats-section {
        padding: 2rem 0;
        background: rgba(255, 255, 255, 0.8);
        text-align: center;
    }
    
    .stat-item {
        background: white;
        padding: 1.5rem;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        text-align: center;
        margin: 0 auto 1rem auto;
        max-width: 280px;
    }
    
    .stat-number {
        font-size: 2rem !important;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 0.5rem;
        text-align: center;
    }
    
    .stat-label {
        font-size: 0.9rem;
        color: var(--text-secondary);
        text-align: center;
    }
    
    /* Services section mobile - Centered */
    .services-section {
        padding: 2.5rem 0;
        text-align: center;
    }
    
    .service-card {
        padding: 1.5rem;
        margin: 0 auto 1.5rem auto;
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(102, 126, 234, 0.1);
        text-align: center;
        max-width: 320px;
    }
    
    .service-card h4 {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
        color: var(--text-primary);
        text-align: center;
    }
    
    .service-card p {
        font-size: 0.9rem;
        line-height: 1.5;
        color: var(--text-secondary);
        text-align: center;
    }
    
    /* Section headers - Centered */
    .section-header {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .section-title {
        text-align: center;
        margin-bottom: 1rem;
    }
    
    .section-subtitle {
        text-align: center;
        margin: 0 auto;
        max-width: 90%;
    }
    
    /* Tools section - Centered */
    .tools-showcase-section {
        text-align: center;
    }
    
    .tools-categories {
        justify-content: center;
        text-align: center;
    }
    
    .tools-track {
        justify-content: center;
        text-align: center;
    }
    
    .tool-item {
        text-align: center;
        margin: 0 auto;
    }
    
    /* Contact form */
    .contact-section { flex-direction: column; padding: 3rem 0; }
    .contact-info { margin-bottom: 2.5rem; text-align: center; }
    .form-row { flex-direction: column; gap: 1.5rem; }
    .form-group input, .form-group textarea { 
        padding: 12px 16px; font-size: 15px; min-height: 48px; 
    }
    .btn-submit { width: 100%; min-height: 50px; }
    
    /* Mobile chatbot and floating elements */
    .html-chatbot {
        width: calc(100vw - 2rem);
        height: calc(100vh - 120px);
        bottom: 10px;
        right: 1rem;
        left: 1rem;
        border-radius: 16px;
        max-height: 500px;
    }
    
    .floating-bot {
        width: 56px;
        height: 56px;
        bottom: 20px;
        right: 20px;
    }
    
    .bot-content-display {
        right: 1rem;
        left: 1rem;
        width: auto;
        max-width: none;
        bottom: 90px;
        max-height: 200px;
        border-radius: 12px;
    }
    
    /* Service showcase mobile optimization */
    .service-showcase-item {
        display: flex !important; /* Override grid layout */
        flex-direction: column !important;
        grid-template-columns: none !important; /* Reset grid */
        gap: 1.5rem !important;
        margin-bottom: 2.5rem !important;
        padding: 1.5rem !important;
        text-align: center !important;
    }
    
    .service-visual {
        margin-bottom: 1.5rem !important;
        order: 1 !important;
        width: 100% !important;
        max-width: 300px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .service-content {
        order: 2 !important;
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        text-align: center !important;
        padding: 0 !important;
    }
    
    .service-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 1rem !important;
    }
    
    .service-icon-large {
        margin-bottom: 0.75rem !important;
        margin-right: 0 !important;
    }
    
    .service-capabilities {
        justify-content: center !important;
        text-align: center !important;
    }
    
    .capability-item {
        margin: 0.25rem !important;
        font-size: 14px !important;
    }
    
    /* Mobile neural network background */
    .neural-network-bg {
        opacity: 0.3;
    }
    
    .neural-network-bg .neuron {
        width: 4px;
        height: 4px;
    }
    
    /* Services Hero Section Mobile Optimization */
    .services-hero-section {
        min-height: 80vh !important;
        padding: 60px 0 40px 0 !important;
    }
    
    .services-hero-section .row {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .services-hero-section .col-lg-6:first-child {
        order: 1 !important;
        margin-bottom: 2rem !important;
    }
    
    .services-hero-section .col-lg-6:last-child {
        order: 2 !important;
    }
    
    .hero-content {
        text-align: center !important;
        padding: 0 1rem !important;
    }
    
    .hero-title {
        font-size: 2rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-description {
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin-bottom: 2rem !important;
        max-width: 400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .hero-stats {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 1.5rem !important;
        margin-bottom: 2rem !important;
        flex-wrap: wrap !important;
    }
    
    .stat-item {
        min-width: 80px !important;
        text-align: center !important;
    }
    
    .stat-number {
        font-size: 1.8rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .stat-label {
        font-size: 14px !important;
    }
    
    .hero-actions {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
    }
    
    .hero-actions .btn {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 !important;
    }
    
    .hero-visual {
        max-width: 300px !important;
        margin: 0 auto !important;
        height: 250px !important;
    }
    
    .ai-visualization {
        transform: scale(0.8) !important;
    }
    
    /* Hide complex animations on small screens */
    .knowledge-graph-container,
    .ai-assistant-container {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(102, 126, 234, 0.1);
        border-radius: 12px;
    }
    
    /* CTA Section Text Visibility Fix */
    .cta-section {
        color: white !important;
    }
    
    .cta-section h2,
    .cta-content h2 {
        color: white !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    }
    
    .cta-section p,
    .cta-content p {
        color: rgba(255, 255, 255, 0.95) !important;
        font-size: 18px !important;
        line-height: 1.6 !important;
        margin-bottom: 2rem !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .cta-buttons {
        display: flex !important;
        gap: 1rem !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    
    /* General Text Visibility Fixes */
    .section {
        color: inherit !important;
    }
    
    .text-center {
        text-align: center !important;
    }
    
    /* Ensure all paragraphs are visible */
    p {
        opacity: 1 !important;
        display: block !important;
    }
    
    /* Ensure buttons are visible */
    .btn {
        opacity: 1 !important;
        display: inline-flex !important;
        visibility: visible !important;
    }
    
    /* Very small screens optimization */
    @media (max-width: 360px) {
        body { font-size: 13px; }
        .section, .section-padding { padding: 1.5rem 0; }
        .hero-section { padding: 80px 0 40px 0 !important; }
        .hero-headline { font-size: 1.5rem !important; }
        .btn { padding: 10px 20px !important; font-size: 14px !important; }
        .container-fluid { padding: 0 0.75rem; }
        
        /* Simplify service showcase items for very small screens */
        .service-showcase-item {
            display: flex !important; /* Override grid layout */
            flex-direction: column !important;
            grid-template-columns: none !important; /* Reset grid */
            gap: 1rem !important;
            margin-bottom: 2rem !important;
            padding: 1rem !important;
            max-width: 300px !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        
        .service-visual {
            display: none !important; /* Hide complex animations on tiny screens */
        }
        
        .service-content {
            width: 100% !important;
            max-width: 280px !important;
            margin: 0 auto !important;
            padding: 0 !important;
            text-align: center !important;
        }
        
        .service-header {
            flex-direction: column !important;
            align-items: center !important;
            text-align: center !important;
            margin-bottom: 1rem !important;
        }
        
        .service-icon-large {
            margin-bottom: 0.5rem !important;
            font-size: 1.5rem !important;
        }
        
        .service-capabilities {
            display: none !important; /* Hide detailed capabilities on tiny screens */
        }
        
        .service-description {
            font-size: 14px !important;
            line-height: 1.4 !important;
            margin-bottom: 1rem !important;
            max-width: 250px !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        
        .service-title {
            font-size: 1.1rem !important;
            margin-bottom: 0.5rem !important;
        }
        
        .service-category {
            font-size: 12px !important;
        }
        
        /* Services Hero - Very Small Screens */
        .services-hero-section {
            min-height: 70vh !important;
            padding: 50px 0 30px 0 !important;
        }
        
        .hero-title {
            font-size: 1.5rem !important;
            margin-bottom: 0.75rem !important;
        }
        
        .hero-description {
            font-size: 14px !important;
            max-width: 280px !important;
            margin-bottom: 1.5rem !important;
        }
        
        .hero-stats {
            gap: 1rem !important;
            margin-bottom: 1.5rem !important;
        }
        
        .stat-number {
            font-size: 1.5rem !important;
        }
        
        .stat-label {
            font-size: 12px !important;
        }
        
        .hero-visual {
            display: none !important; /* Hide complex animation on tiny screens */
        }
        
        .hero-badge {
            font-size: 12px !important;
            padding: 0.5rem 1rem !important;
        }
        
        /* CTA Section - Very Small Screens */
        .cta-section {
            padding: 3rem 0 !important;
        }
        
        .cta-content h2 {
            font-size: 1.5rem !important;
            margin-bottom: 1rem !important;
        }
        
        .cta-content p {
            font-size: 14px !important;
            max-width: 280px !important;
            margin-bottom: 1.5rem !important;
        }
        
        .cta-buttons {
            flex-direction: column !important;
            gap: 0.75rem !important;
        }
        
        .cta-buttons .btn {
            width: 100% !important;
            max-width: 280px !important;
            margin: 0 auto !important;
        }
        
        /* Hamburger Menu - Very Small Screens */
        .hamburger-menu {
            display: block !important;
            position: relative !important;
            z-index: 1002 !important;
            flex-shrink: 0 !important;
        }
        
        .hamburger-trigger {
            width: 40px !important;
            height: 40px !important;
            padding: 8px !important;
            border-radius: 8px !important;
            background: rgba(255, 255, 255, 0.1) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
        }
        
        .hamburger-line {
            width: 18px !important;
            height: 2px !important;
            background: white !important;
            margin: 1.5px 0 !important;
        }
        
        /* Ensure navbar layout doesn't break */
        .modern-navbar .navbar-content {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            gap: 1rem !important;
        }
        
        .navbar-brand {
            flex: 1 !important;
            max-width: calc(100% - 50px) !important;
        }
    }
}

/* Tablet (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
    .container-fluid { padding: 0 2rem; max-width: 100%; margin: 0 auto; }
    .section, .section-padding { padding: 4rem 0; }
    
    h1 { font-size: 2.5rem !important; }
    h2 { font-size: 2rem !important; }
    h3 { font-size: 1.75rem !important; }
    
    .btn { padding: 15px 28px; font-size: 16px; min-height: 50px; }
    .navbar-brand { font-size: 1.4rem; }
    
    .hero-section { padding: 160px 0 100px 0; }
    .hero-headline { font-size: 2.5rem !important; }
    .hero-connector { font-size: 1.8rem !important; }
    .hero-subheadline { font-size: 16px !important; }
    
    /* Two column layout */
    .stats-grid, .services-grid { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 2rem !important; 
    }
    .industry-grid { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 1.5rem !important; 
    }
    
    /* Tablet: Move canvas below text for all solution rows */
    .solution-row .row {
        flex-direction: column !important;
    }
    
    .solution-row .col-lg-6:first-child {
        order: 2 !important; /* Move image/canvas after text */
    }
    
    .solution-row .col-lg-6:last-child {
        order: 1 !important; /* Move text before image/canvas */
        margin-bottom: 2rem;
    }
    
    /* For reverse rows, text is already first in HTML, so keep natural order */
    .solution-row.reverse .col-lg-6:first-child {
        order: 1 !important; /* Text stays first */
    }
    
    .solution-row.reverse .col-lg-6:last-child {
        order: 2 !important; /* Canvas goes after text */
    }
    
    /* Services Hero Tablet Optimization */
    .services-hero-section {
        min-height: 90vh !important;
        padding: 80px 0 60px 0 !important;
    }
    
    .hero-title {
        font-size: 2.5rem !important;
        margin-bottom: 1.25rem !important;
    }
    
    .hero-description {
        font-size: 18px !important;
        max-width: 500px !important;
        margin: 0 auto 2.5rem auto !important;
    }
    
    .hero-stats {
        gap: 2rem !important;
        justify-content: center !important;
        margin-bottom: 2.5rem !important;
    }
    
    .hero-actions {
        flex-direction: row !important;
        gap: 2rem !important;
        justify-content: center !important;
    }
    
    .hero-actions .btn {
        width: auto !important;
        max-width: none !important;
    }
    
    /* Footer Tablet Layout */
    .footer {
        text-align: center !important;
        padding: 1.5rem 0 !important;
    }
    
    .footer .container-fluid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.5rem !important;
        text-align: center !important;
    }
    
    .footer-brand {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 1rem !important;
        justify-content: center !important;
    }
    
    .footer-links {
        display: flex !important;
        flex-direction: row !important;
        gap: 1.5rem !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    
    .footer-social {
        display: flex !important;
        gap: 1.5rem !important;
        justify-content: center !important;
    }
}

/* Desktop (1200px+) */
@media (min-width: 1200px) {
    .container-fluid { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
    .section, .section-padding { padding: 6rem 0; }
    
    h1 { font-size: 3.5rem; }
    h2 { font-size: 2.75rem; }
    h3 { font-size: 2.125rem; }
    
    .btn { padding: 18px 36px; font-size: 18px; min-height: 56px; }
    .navbar-brand { font-size: 1.8rem; }
    .nav-link { font-size: 16px; padding: 12px 20px !important; }
    
    .hero-section { padding: 200px 0 140px 0; }
    .hero-headline { font-size: 3.5rem !important; }
    .hero-connector { font-size: 2.5rem !important; }
    .hero-subheadline { font-size: 18px !important; }
    
    .hero-content { flex-direction: row; }
    .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
    .services-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
    .industry-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
    
    /* Show hamburger on all screen sizes */
    .hamburger-menu {
        display: block !important;
        position: relative !important;
        z-index: 1001 !important;
        flex-shrink: 0 !important;
    }
    
    /* Hide desktop navigation - keeping hamburger only */
    .desktop-nav {
        display: none !important;
    }
    
    /* Footer Desktop Layout */
    .footer {
        text-align: left !important;
        padding: 2rem 0 !important;
    }
    
    .footer .container-fluid {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 2rem !important;
        text-align: left !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
    }
    
    .footer-brand {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 1rem !important;
        flex: 1 !important;
    }
    
    .footer-logo {
        flex-shrink: 0 !important;
    }
    
    .footer-text {
        font-size: 0.9rem !important;
        color: rgba(255, 255, 255, 0.8) !important;
        white-space: nowrap !important;
    }
    
    .footer-links {
        display: flex !important;
        flex-direction: row !important;
        gap: 2rem !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-shrink: 0 !important;
    }
    
    .footer-links a {
        font-size: 0.9rem !important;
        padding: 0.5rem 1rem !important;
        white-space: nowrap !important;
    }
    
    .footer-social {
        display: flex !important;
        gap: 1rem !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-shrink: 0 !important;
    }
}

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .container-fluid { max-width: 1400px; }
    h1 { font-size: 4rem; }
    h2 { font-size: 3rem; }
    .hero-headline { font-size: 4rem !important; }
    .hero-connector { font-size: 2.8rem !important; }
}

/* Navigation - All Screen Sizes */
.hamburger-menu { 
    display: block !important; 
    position: relative !important;
    z-index: 1001 !important;
}

/* Navigation Menu - All Screen Sizes */
.mobile-nav-menu {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: rgba(15, 23, 42, 0.98); backdrop-filter: blur(20px);
    z-index: 999; display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    transform: translateY(-100%); transition: transform 0.3s ease;
}

.mobile-nav-menu.active { 
    transform: translateY(0); 
}

.mobile-nav-menu .nav-link,
.mobile-nav-menu .hover-nav-link {
    font-size: 1.5rem; color: white; margin: 1rem 0;
    padding: 1rem 2rem; border-radius: 12px;
    min-height: 60px; width: 250px; text-align: center;
    text-decoration: none; transition: all 0.3s ease;
}

.mobile-nav-menu .nav-link:hover,
.mobile-nav-menu .hover-nav-link:hover {
    background: rgba(102, 126, 234, 0.2); color: #60a5fa;
}

/* Performance Optimizations */
@media (max-width: 768px) {
    .animate-fadeInUp, .animate-fadeInLeft, .animate-fadeInRight { animation-duration: 0.4s; }
    .hover-lift:hover, .hover-scale:hover, .card-3d:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .hover-lift:hover, .hover-scale:hover, .hover-rotate:hover { transform: none; }
    .btn:hover { transform: none; }
    .btn { min-height: 44px; min-width: 44px; }
    .nav-link { min-height: 44px; display: flex; align-items: center; }
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .section, .section-padding { padding: 2rem 0; }
    .hero-section { padding: 80px 0 40px 0; min-height: 350px; }
    .hero-headline { font-size: 1.5rem !important; }
    .hero-connector { font-size: 1rem !important; }
    .hero-subheadline { font-size: 13px !important; }
}