/* Global Reset for Old Mobile Elements - Hide Everywhere by Default */
.mobile-cinematic-wrapper,
.mobile-interstitial,
.mobile-industry-select-container,
.mobile-editorial-index,
.mobile-bottom-sheet,
.mobile-modal-overlay,
.mobile-cta-btn,
.mobile-hero-progress-row,
.mobile-hero-engine-row,
.mobile-platform-snap-container,
.mobile-product-showcase,
.mobile-marquee-container {
    display: none !important;
}

@media (max-width: 768px) {
    /* --- GLOBAL RESETS --- */
    .mobile-cinematic-wrapper,
    .mobile-interstitial,
    .mobile-industry-select-container,
    .mobile-editorial-index,
    .mobile-bottom-sheet,
    .mobile-modal-overlay,
    .mobile-cta-btn,
    .mobile-hero-progress-row,
    .mobile-hero-engine-row,
    .mobile-platform-snap-container,
    .mobile-product-showcase,
    .mobile-marquee-container,
    .autonomous-section {
        display: none !important;
    }

    /* --- BRUTALIST COMMAND NAV (Redesign) --- */

    /* Action 1: Header Bar Alignment */
    nav {
        height: 64px !important;
        padding: 0 !important;
        background: rgba(5,5,5,0.85) !important;
        display: flex !important;
        align-items: center !important; /* Ensure vertical center */
        justify-content: center !important;
    }

    .nav-container {
        padding: 0 20px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important; /* Fill nav height */
        margin: 0 !important;
    }

    /* Logo & Menu Button Vertical Fix */
    .logo {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }
    
    .logo-img {
        height: 60px !important; /* Increased from 48px for better visibility */
        width: auto !important;
        display: block !important;
    }

    /* Hide Desktop Links & CTA completely */
    .nav-links, .nav-cta {
        display: none !important;
    }

    /* Fix Hamburger (Transparent, Clean Lines) */
    .mobile-menu-btn {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important; /* Larger hit area */
        height: 44px !important; /* Larger hit area */
        z-index: 1001 !important; /* Ensure on top */
    }
    .mobile-menu-btn i {
        font-size: 24px !important;
        color: #FFF !important;
    }

    /* Action 2: Menu Overlay Structure */
    .mobile-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: #050505 !important;
        z-index: 10000 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; /* Top align everything */
        padding: 40px 20px 40px 20px !important; /* Top padding reduced since header is inside flex */
        overflow-y: auto !important;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    }

    .mobile-menu-overlay.active {
        transform: translateX(0);
    }

    /* Overlay Header (Logo + Close) */
    .mobile-menu-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: 40px !important; /* Space before links */
    }

    .mobile-menu-close {
        background: none !important;
        border: none !important;
        color: #fff !important;
        font-size: 1.5rem !important;
        cursor: pointer !important;
        padding: 10px !important; /* Larger hit area */
    }

    /* Action 3: Brutalist Accordion Links */
    .mobile-links-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important; /* Tight stack */
        margin-top: 0 !important;
        margin-bottom: auto !important; /* Push to top */
        width: 100% !important;
    }

    .mobile-nav-group {
        width: 100% !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        padding-bottom: 12px !important;
        margin-bottom: 12px !important;
    }

    .mobile-nav-header {
        font-family: 'Inter', sans-serif !important;
        font-size: 2.25rem !important; /* Reduced from 3rem */
        line-height: 1.1 !important;
        letter-spacing: -1px !important;
        font-weight: 700 !important;
        color: #FFFFFF !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        transition: color 0.3s ease !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        cursor: pointer !important;
    }
    
    .mobile-nav-header i {
        font-size: 1.5rem !important;
        transition: transform 0.3s ease !important;
    }
    
    .mobile-nav-header.active i {
        transform: rotate(180deg) !important;
        color: #00FFCC !important;
    }

    .mobile-nav-link-direct {
        font-family: 'Inter', sans-serif !important;
        font-size: 2.25rem !important; /* Reduced from 3rem */
        line-height: 1.1 !important;
        letter-spacing: -1px !important;
        font-weight: 700 !important;
        color: #FFFFFF !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        display: block !important;
    }

    .mobile-sub-menu {
        display: none !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding-top: 16px !important;
        padding-left: 4px !important;
    }

    .mobile-sub-menu.active {
        display: flex !important;
    }

    .mobile-sub-link {
        font-family: 'Space Mono', monospace !important;
        font-size: 14px !important;
        color: #A0A0A0 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        text-decoration: none !important;
    }
    
    .mobile-sub-link:hover {
        color: #FFF !important;
    }

    /* Action 4: Sticky Action Bar */
    .mobile-action-bar {
        margin-top: 40px !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .mobile-massive-cta {
        width: 100% !important;
        height: 60px !important;
        border-radius: 50px !important;
        background-color: #FFFFFF !important;
        color: #000000 !important;
        font-size: 1.125rem !important;
        font-weight: bold !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-decoration: none !important;
        text-transform: none !important; /* Reset uppercase if inherited */
        transition: transform 0.2s ease !important;
    }
    
    .mobile-massive-cta:active {
        transform: scale(0.98) !important;
    }

    .mobile-login-btn {
        width: 100% !important;
        height: 60px !important;
        border-radius: 50px !important;
        background-color: transparent !important;
        border: 1px solid rgba(255,255,255,0.3) !important;
        color: #FFFFFF !important;
        font-size: 1.125rem !important;
        font-weight: bold !important; /* Match bold of Demo btn */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-decoration: none !important;
        text-transform: none !important;
        margin-bottom: 0 !important;
    }

    /* Force visibility of desktop main container as Flex Column */
    /* Remove all default padding to allow full bleed control */
    .lex-master-container {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
        padding-top: 0 !important; 
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    /* UNWRAP THE HERO LAYOUT (Crucial for reordering) */
    .lex-left-scroll,
    .lex-step-block.active {
        display: contents !important;
    }

    /* --- ACTION 1: HERO TYPOGRAPHY (Kill White Space) --- */
    .lex-hero-text-group {
        order: 1 !important;
        padding: 120px 20px 0 !important; /* Increased padding to clear Nav */
        text-align: center !important;
        display: block !important;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        position: relative !important;
    }

    /* Ambient "Space Light" Glow behind Text */
    .lex-hero-text-group::before {
        content: '';
        position: absolute;
        top: -30%;
        left: 50%;
        transform: translateX(-50%);
        width: 140%;
        height: 500px;
        background: radial-gradient(circle at center, rgba(0, 255, 204, 0.08) 0%, rgba(138, 43, 226, 0.05) 40%, transparent 80%);
        pointer-events: none;
        z-index: -1;
        filter: blur(40px);
    }

    .lex-eyebrow, 
    .lex-scroll-indicator {
        display: none !important;
    }

    .lex-h1 {
        font-family: 'Inter', system-ui, sans-serif !important;
        font-size: 3.25rem !important; /* Massive Impact */
        line-height: 1.05 !important;
        letter-spacing: -0.04em !important;
        font-weight: 800 !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 0 !important;
        max-width: 100% !important;
        color: #FFFFFF !important;
        /* Subtle Gradient Text Fill for Depth */
        background: linear-gradient(180deg, #FFFFFF 20%, #B0B5C0 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        /* Soft Bloom */
        filter: drop-shadow(0 0 15px rgba(255,255,255,0.15));
    }

    /* Target the gradient span specifically to make it POP */
    .hero-gradient-text {
        background: linear-gradient(90deg, #00FFCC 0%, #22C55E 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(0 0 20px rgba(0, 255, 204, 0.4)) !important;
    }

    .lex-subtext {
        font-family: 'Inter', system-ui, sans-serif !important;
        font-size: 1.05rem !important;
        line-height: 1.5 !important;
        color: #A0A5B0 !important; /* Premium Grey */
        margin-top: 20px !important;
        margin-bottom: 32px !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 85% !important;
        font-weight: 400 !important;
        letter-spacing: -0.01em !important;
    }

    /* --- ACTION 2: ANIMATION PLACEMENT & BLEED --- */
    .lex-right-sticky {
        order: 2 !important;
        width: 100vw !important;
        margin-left: 0 !important; /* Full Bleed (Parent has 0 padding) */
        margin-top: 0 !important; /* Spacing handled by subtext margin */
        position: relative !important;
        top: 0 !important;
        height: auto !important;
        overflow: hidden !important;
        padding: 0 !important;
        z-index: 1 !important;
    }

    .lex-telemetry-canvas {
        width: 100vw !important;
        margin-left: 0 !important;
        border-radius: 0 !important;
        position: relative !important;
        transform: none !important;
        height: 65vw !important;
        background: #050505 !important;
        left: 0 !important;
        border: none !important;
    }

    /* Hide Orbital Elements */
    .lex-loop-ring::before, 
    .lex-loop-ring::after, 
    .lex-ring-dashed,
    .lex-ring-inner,
    .lex-lens-ring-1,
    .lex-lens-ring-2,
    .lex-data-nexus,
    .line-container,
    .lex-node,
    .lex-powered-text,
    .lex-fusion-core,
    .lex-spatial-grid {
        display: none !important;
    }

    /* --- ACTION 3: HORIZONTAL SWIPE STAGES (REPLACED BY TELEMETRY CONSOLE) --- */
    /* Hide the old slider wrapper on mobile */
    .lex-steps-slider-wrapper {
        display: none !important;
    }

    /* --- NEW TELEMETRY CONSOLE STYLES --- */
    .mobile-telemetry-console {
        order: 3 !important;
        display: block !important;
        width: 100vw !important;
        margin-top: 20px !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* Action 1: Segmented Control (Tabs) */
    .telemetry-controls {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        border: 1px solid #222 !important;
        border-bottom: none !important;
        background: #000 !important;
    }

    .tele-tab {
        flex: 1 !important;
        background: transparent;
        border: none;
        border-right: 1px solid #222 !important;
        color: #888; /* Muted silver */
        font-family: 'Space Mono', monospace !important;
        font-size: 11px !important;
        padding: 16px 4px !important;
        text-align: center !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        outline: none !important;
        white-space: nowrap !important;
    }

    .tele-tab:last-child {
        border-right: none !important;
    }

    /* Active States */
    .tele-tab.active[data-target="0"] {
        color: #00FFCC !important;
        background: rgba(0, 255, 204, 0.1) !important;
    }
    .tele-tab.active[data-target="1"] {
        color: #8A2BE2 !important;
        background: rgba(138, 43, 226, 0.1) !important;
    }
    .tele-tab.active[data-target="2"] {
        color: #FF4500 !important;
        background: rgba(255, 69, 0, 0.1) !important;
    }

    /* Action 2: Terminal Window (Content) */
    .telemetry-terminal {
        position: relative !important;
        width: 100% !important;
        height: auto !important; /* Allow growth */
        min-height: 280px !important; 
        background: #000000 !important;
        border-top: 1px solid #222 !important;
        border-bottom: 1px solid #222 !important;
        overflow: visible !important; /* Prevent cutting off */
    }

    .tele-slide {
        display: none !important; /* Hide inactive slides completely to fix height */
        width: 100% !important;
        height: auto !important;
        padding: 32px 24px !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
        pointer-events: none !important;
        flex-direction: column !important;
        justify-content: flex-start !important; /* Align to top to prevent clipping */
    }

    .tele-slide.active {
        display: flex !important; /* Show active slide */
        position: relative !important; /* Allow it to push parent height */
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 5 !important;
        animation: fadeIn 0.3s ease forwards;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .tele-title {
        font-family: 'Inter', sans-serif !important;
        font-size: 24px !important;
        font-weight: 600 !important;
        color: #FFFFFF !important;
        margin-bottom: 16px !important;
        letter-spacing: -0.02em !important;
    }

    .tele-body {
        font-family: 'Inter', sans-serif !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: #A0A0A0 !important;
    }

    /* --- ACTION 4: BUTTONS (Liquid Metal & Glass) --- */
    .lex-hero-btn-group {
        display: none !important;
    }

    /* Force unblur on hero text in all states - AGGRESSIVE FIX */
    .lex-step-block,
    .lex-step-block *,
    .lex-hero-text-group,
    .lex-hero-text-group *, 
    .lex-h1,
    .lex-subtext,
    .hero-gradient-text {
        filter: none !important;
        opacity: 1 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: none !important;
        transition: none !important;
        text-shadow: none !important;
    }

    /* REST OF THE SECTIONS (Keep existing mobile styles) */
    .roi-strip-section {
        padding: 60px 0 !important;
        margin-top: 0 !important;
    }

    /* --- ROI GRID (Clean Vertical Strip - No Cards) --- */
    .roi-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        background: #000 !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
    }

    .roi-col {
        width: 100% !important;
        padding: 60px 20px !important;
        margin: 0 !important;
        border: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        backdrop-filter: none !important;
        
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Remove bottom border from the very last item */
    .roi-col:last-child {
        border-bottom: none !important;
    }

    /* Remove card-specific top borders */
    .roi-teal, .roi-purple, .roi-orange, .roi-green { 
        border-top: none !important;
    }

    /* Theme-specific text coloring for numbers to distinguish sections */
    .roi-teal .roi-number { color: #00FFCC !important; text-shadow: 0 0 30px rgba(0, 255, 204, 0.2) !important; }
    .roi-purple .roi-number { color: #8A2BE2 !important; text-shadow: 0 0 30px rgba(138, 43, 226, 0.2) !important; }
    .roi-orange .roi-number { color: #FF4500 !important; text-shadow: 0 0 30px rgba(255, 69, 0, 0.2) !important; }
    .roi-green .roi-number { color: #22C55E !important; text-shadow: 0 0 30px rgba(34, 197, 94, 0.2) !important; }

    .roi-number { 
        font-size: 4rem !important; /* Very large and bold */
        line-height: 1 !important;
        margin-bottom: 12px !important;
        font-weight: 800 !important;
        letter-spacing: -2px !important;
        color: #FFF; /* Fallback */
    }
    
    .roi-label {
        font-size: 12px !important;
        font-family: 'Space Mono', monospace !important;
        letter-spacing: 2px !important;
        color: #FFF !important;
        opacity: 0.8 !important;
        margin-bottom: 16px !important;
        text-transform: uppercase !important;
    }

    .roi-subtext { 
        font-size: 15px !important; 
        line-height: 1.6 !important; 
        color: #888 !important;
        max-width: 300px !important;
        font-weight: 300 !important;
    }

    /* --- PRODUCT TRANSITION SPACING OVERRIDE (Action 1 & 2) --- */
    .product-handoff {
        margin: 40px auto !important; /* Compressed margin */
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* Action 3: Hide any potential spacer divs */
    .spacer, .divider, .section-divider {
        display: none !important;
    }

    /* --- DEPLOYMENT REALITY STICKY STACK (FIXED) --- */
    /* Aggressive resets to ensure sticky context works */
    .deployment-reality-section,
    .deployment-container,
    .reality-cards-grid {
        overflow: visible !important;
        display: block !important; /* Kill Flexbox */
        height: auto !important;
        contain: none !important; /* Disable containment which blocks sticky */
    }

    .deployment-reality-section {
        padding: 60px 0 100px !important;
        position: relative !important;
        z-index: 5 !important;
    }

    /* Action 1: Typography */
    .deployment-reality-section h2, .deployment-title {
        line-height: 1.1 !important;
        text-align: center !important;
        margin-bottom: 40px !important;
        font-size: 2rem !important; /* Adjust for mobile if needed */
        max-width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .reality-cards-grid {
        padding-bottom: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    .reality-card {
        width: 100% !important;
        flex-shrink: 0 !important;
        margin-bottom: 20px !important; /* Space for scroll continuation */
        position: -webkit-sticky !important; /* Safari */
        position: sticky !important;
        z-index: 1; /* Base Z */
        
        /* Action 3: Visual Polish */
        background: #0A0A0A !important;
        box-shadow: 0px -4px 20px rgba(0,0,0,0.5) !important;
        border-radius: 12px 12px 0 0 !important; /* Rounded top only looks nice for stack */
        border: 1px solid #222 !important;
        border-bottom: none !important;
        transform: translateZ(0); /* Hardware accelerate to help sticky jitter */
    }

    /* Stack Offsets - Adjusted for better spacing */
    .reality-card:nth-child(1), .card-teal { 
        top: 100px !important; 
        z-index: 10 !important;
        border-top: 2px solid #00FFCC !important;
    }
    .reality-card:nth-child(2), .card-purple { 
        top: 160px !important; 
        z-index: 20 !important;
        border-top: 2px solid #8A2BE2 !important;
    }
    .reality-card:nth-child(3), .card-orange { 
        top: 220px !important; 
        z-index: 30 !important;
        border-top: 2px solid #FF4500 !important;
        border-bottom: 1px solid #222 !important; /* Last card closes the stack */
        border-radius: 12px !important;
        margin-bottom: 0 !important;
    }

    /* Content Alignment */
    .card-hud-header, .card-hud-body, .card-hud-footer {
        text-align: left !important;
        align-items: flex-start !important;
    }
    .card-hud-body p { max-width: 100% !important; }
    .reality-cards-grid::-webkit-scrollbar { display: none !important; }

    /* Deep Dives - Consolidate & Fix Slider Width */
    .bento-visual-stage {
        width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        right: auto !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        border-radius: 0 !important;
        height: 350px !important; /* Slightly taller for better mobile view */
        margin-bottom: 24px !important;
        
        /* Premium Tech-Slab Styling */
        background: #000 !important;
        box-shadow: 0 30px 60px -15px rgba(0,0,0,0.9) !important;
        
        /* Borders */
        border-top: 1px solid rgba(255,255,255,0.15) !important;
        border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    }

    /* Force inner images to match viewport width to prevent gaps */
    .slider-container, 
    .slider-image {
        width: 100vw !important;
        max-width: none !important;
    }

    .slider-after .slider-image, 
    .slider-after .after-overlay-ui {
        width: 100vw !important;
        max-width: none !important;
    }

    .execution-table {
        display: flex !important;
        flex-direction: column !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
    }
    .exec-col-platform { border-bottom: 1px solid rgba(255,255,255,0.1) !important; border-right: none !important; padding: 24px !important; }
    .exec-col-you { padding: 24px !important; }

    .spec-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
    .spec-item { padding: 12px 8px !important; font-size: 11px !important; }

    /* --- RECEIPTS REDESIGN (Marquee + Carousel) --- */
    
    /* Action 1: Typography */
    .rebuild-grid-header,
    .rebuild-proof-header {
        text-align: center !important;
        margin-bottom: 40px !important;
    }
    .rebuild-h2 {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
        text-align: center !important;
    }

    /* Action 2: Infinite Marquee */
    /* Hide desktop grid on mobile */
    .rebuild-industry-grid {
        display: none !important;
    }

    .mobile-marquee-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        margin-bottom: 60px !important;
        width: 100% !important;
        overflow: hidden !important;
        position: relative !important;
        /* Mask edges for fade effect */
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    }

    .marquee-track {
        display: flex !important;
        gap: 16px !important;
        width: max-content !important;
    }

    .marquee-group {
        display: flex !important;
        gap: 16px !important;
        flex-shrink: 0 !important;
    }

    .track-left .marquee-group {
        animation: scrollLeft 20s linear infinite !important;
    }

    .track-right .marquee-group {
        animation: scrollRight 25s linear infinite !important;
    }

    .marquee-pill {
        padding: 12px 20px !important;
        /* Tech-Chip Styling */
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 6px !important; /* Tech block instead of round pill */
        background: rgba(255, 255, 255, 0.03) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        
        color: #E0E0E0 !important;
        font-size: 12px !important;
        font-family: 'Space Mono', monospace !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Add "Status Light" to each pill */
    .marquee-pill::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #FFF;
        box-shadow: 0 0 8px currentColor;
    }

    /* Color Cycling for Visual Interest */
    .marquee-pill:nth-child(4n+1) { border-color: rgba(0, 255, 204, 0.3) !important; }
    .marquee-pill:nth-child(4n+1)::before { background: #00FFCC; box-shadow: 0 0 8px #00FFCC; }

    .marquee-pill:nth-child(4n+2) { border-color: rgba(138, 43, 226, 0.3) !important; }
    .marquee-pill:nth-child(4n+2)::before { background: #8A2BE2; box-shadow: 0 0 8px #8A2BE2; }

    .marquee-pill:nth-child(4n+3) { border-color: rgba(255, 69, 0, 0.3) !important; }
    .marquee-pill:nth-child(4n+3)::before { background: #FF4500; box-shadow: 0 0 8px #FF4500; }

    .marquee-pill:nth-child(4n+4) { border-color: rgba(34, 197, 94, 0.3) !important; }
    .marquee-pill:nth-child(4n+4)::before { background: #22C55E; box-shadow: 0 0 8px #22C55E; }

    /* Scanline Shine Effect */
    .marquee-pill::after {
        content: '';
        position: absolute;
        top: 0; left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
        transform: skewX(-20deg);
        animation: pillShine 3s infinite;
    }

    @keyframes pillShine {
        0% { left: -100%; }
        20% { left: 200%; }
        100% { left: 200%; }
    }

    @keyframes scrollLeft {
        from { transform: translateX(0); }
        to { transform: translateX(-100%); }
    }

    @keyframes scrollRight {
        from { transform: translateX(-100%); }
        to { transform: translateX(0); }
    }

    /* Action 3: Proof Carousel (Horizontal Snap with Focus) */
    .rebuild-cards-container {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 16px !important;
        /* Padding top/bottom for shadows, side padding for centering first card */
        padding: 40px 5vw !important; 
        width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-padding-left: 5vw !important; /* Aligns snap point */
    }

    .rebuild-cards-container::-webkit-scrollbar {
        display: none !important;
    }

    /* Target direct children cards */
    .rebuild-cards-container .reality-card {
        width: 75vw !important;
        flex-shrink: 0 !important;
        scroll-snap-align: center !important;
        
        /* Appearance */
        background: #000 !important; /* Pure black */
        border: 1px solid #222 !important;
        border-radius: 12px !important;
        
        /* Reset margins */
        margin-bottom: 0 !important;
        margin-right: 0 !important;
        
        /* Flex layout for bottom-aligned link */
        display: flex !important;
        flex-direction: column !important;
        min-height: 400px !important;
        
        /* Action 3: Focus Effect Prep (Defaults to Active for static) */
        opacity: 1 !important;
        transform: scale(1) !important;
        transition: transform 0.4s ease, opacity 0.4s ease !important;
        box-shadow: 0 10px 30px -10px rgba(0,0,0,0.8) !important;
    }

    /* Action 4: Internal Polish */
    .rebuild-cards-container .re-card-stat {
        font-size: 3rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: -0.03em !important;
        margin-bottom: 12px !important;
        margin-top: 16px !important;
        display: block !important;
    }

    .rebuild-cards-container .card-hud-footer {
        margin-top: auto !important; /* Pushes link to bottom */
        border-top: 1px solid rgba(255,255,255,0.1) !important;
        background: rgba(255,255,255,0.02) !important;
    }

    /* Ensure specific styling for Proof Cards inside carousel */
    .rebuild-cards-container .card-teal:hover, .rebuild-cards-container .card-teal:active { border-color: #00FFCC !important; }
    .rebuild-cards-container .card-purple:hover, .rebuild-cards-container .card-purple:active { border-color: #8A2BE2 !important; }
    .rebuild-cards-container .card-orange:hover, .rebuild-cards-container .card-orange:active { border-color: #FF4500 !important; }

    /* Hide Desktop Marquee container by default (in global scope, not inside media query) */

    /* --- PRODUCT NARRATIVE FLOW (Continuous Timeline Fix) --- */
    
    /* 1. Remove gaps between sections to allow line continuity */
    .product-deep-dive-section {
        padding: 0 !important;
        border: none !important;
        margin: 0 !important;
    }

    /* 2. Move spacing into the container so the line (::before) spans the full gap */
    .bento-container {
        position: relative !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        padding-left: 60px !important; /* Keep room for line */
    }

    /* 3. The Continuous Vertical Line */
    .bento-container::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 16px;
        width: 2px;
        z-index: 0;
    }

    /* 4. Per-Section Gradients for Seamless Connection */
    
    /* Teal Section: Fades in from top, transitions to Purple at bottom */
    .theme-teal .bento-container::before {
        background: linear-gradient(to bottom, 
            rgba(0, 255, 204, 0) 0%, 
            #00FFCC 5%, 
            #00FFCC 85%, 
            #8A2BE2 100%
        ) !important;
    }

    /* Purple Section: Starts Purple (matching above), transitions to Orange */
    .theme-purple .bento-container::before {
        background: linear-gradient(to bottom, 
            #8A2BE2 0%, 
            #8A2BE2 85%, 
            #FF4500 100%
        ) !important;
    }

    /* Orange Section: Starts Orange, transitions to Green (Loop), extends to bottom */
    .theme-orange .bento-container::before {
        background: linear-gradient(to bottom, 
            #FF4500 0%, 
            #FF4500 85%, 
            #22C55E 100%
        ) !important;
    }

    /* Action 2: Section Anchors (Glowing Dots) */
    .chapter-header {
        position: relative !important;
    }

    /* Target the eyebrow to place the dot */
    .chapter-eyebrow::before {
        content: '';
        position: absolute;
        left: -49px; /* Adjust based on padding (60px padding - 11px to center dot on line) */
        top: 8px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: currentColor; /* Inherits teal/purple/orange from text */
        box-shadow: 0 0 10px currentColor;
        z-index: 1;
    }

    /* Action 3: Handoff Bridges (Indent Transition Text) */
    .product-handoff {
        text-align: left !important;
        margin-left: 0 !important; /* Reset margin */
        padding-left: 0 !important; /* Alignment handled by container padding */
    }

    /* Align Arrow to the middle, away from timeline */
    .handoff-arrow {
        margin-left: 0 !important; 
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        background: transparent !important; /* Remove mask */
        position: relative;
        z-index: 2;
        margin-top: 20px !important;
    }

    /* Action 4: Full-Bleed Media with Beautiful Frame - REMOVED DUPLICATE */
    /* .bento-visual-stage rule consolidated above */

    /* Color-Coded Tech Borders & Connectors */
    .theme-teal .bento-visual-stage {
        border-top: 3px solid #00FFCC !important;
        border-bottom: 1px solid rgba(0, 255, 204, 0.3) !important;
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }
    /* Connection Nodes (Top/Bottom timeline plugs) */
    .theme-teal .bento-visual-stage::after {
        content: ''; position: absolute;
        top: -5px; bottom: -5px; left: 13px; width: 8px;
        background: radial-gradient(circle at center top, #00FFCC 3px, transparent 4px),
                    radial-gradient(circle at center bottom, #00FFCC 3px, transparent 4px);
        background-size: 8px 8px; background-repeat: no-repeat; background-position: top center, bottom center;
        z-index: 25; pointer-events: none;
        filter: drop-shadow(0 0 5px #00FFCC);
    }
    .theme-teal .bento-visual-stage::before {
        content: 'STATUS: ACTIVE';
        position: absolute; top: -12px; right: 10px;
        background: #00FFCC; color: #000;
        font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700;
        padding: 2px 6px; z-index: 20;
    }

    .theme-purple .bento-visual-stage {
        border-top: 3px solid #8A2BE2 !important;
        border-bottom: 1px solid rgba(138, 43, 226, 0.3) !important;
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }
    .theme-purple .bento-visual-stage::after {
        content: ''; position: absolute;
        top: -5px; bottom: -5px; left: 13px; width: 8px;
        background: radial-gradient(circle at center top, #8A2BE2 3px, transparent 4px),
                    radial-gradient(circle at center bottom, #8A2BE2 3px, transparent 4px);
        background-size: 8px 8px; background-repeat: no-repeat; background-position: top center, bottom center;
        z-index: 25; pointer-events: none;
        filter: drop-shadow(0 0 5px #8A2BE2);
    }
    .theme-purple .bento-visual-stage::before {
        content: 'STATUS: CONNECTED';
        position: absolute; top: -12px; right: 10px;
        background: #8A2BE2; color: #FFF;
        font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700;
        padding: 2px 6px; z-index: 20;
    }

    .theme-orange .bento-visual-stage {
        border-top: 3px solid #FF4500 !important;
        border-bottom: 1px solid rgba(255, 69, 0, 0.3) !important;
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }
    .theme-orange .bento-visual-stage::after {
        content: ''; position: absolute;
        top: -5px; bottom: -5px; left: 13px; width: 8px;
        background: radial-gradient(circle at center top, #FF4500 3px, transparent 4px),
                    radial-gradient(circle at center bottom, #FF4500 3px, transparent 4px);
        background-size: 8px 8px; background-repeat: no-repeat; background-position: top center, bottom center;
        z-index: 25; pointer-events: none;
        filter: drop-shadow(0 0 5px #FF4500);
    }
    .theme-orange .bento-visual-stage::before {
        content: 'STATUS: MONITORING';
        position: absolute; top: -12px; right: 10px;
        background: #FF4500; color: #FFF;
        font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700;
        padding: 2px 6px; z-index: 20;
    }

    /* Ensure text content is also indented properly */
    .chapter-title, .chapter-body, .spec-grid, .execution-table {
        position: relative;
        z-index: 1;
    }

    /* Hide any desktop timeline elements that might conflict */
    .desktop-timeline-node { display: none !important; }

    /* --- GLOBAL CONTAINER FIX FOR MOBILE --- */
    .container {
        padding: 0 20px !important;
    }

    /* --- AUTONOMOUS LEVELS: STACKED DECK (Vertical Sticky) --- */
    .auto-grid-container {
        display: block !important; /* Layout flow */
        overflow: visible !important; /* Allow sticky to work */
        padding-bottom: 80px !important;
        gap: 0 !important; /* Sticky handles spacing visually */
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .auto-card {
        width: 100% !important;
        min-width: 0 !important;
        /* Sticky Stack Magic */
        position: -webkit-sticky !important;
        position: sticky !important;
        z-index: 1;
        
        /* Visuals */
        background: #111 !important; /* Slightly lighter than bg */
        border: 1px solid rgba(255,255,255,0.15) !important;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.8) !important; /* Shadow up */
        border-radius: 16px !important;
        margin-bottom: 20px !important; /* Spacing */
        
        /* Reset Transforms from JS */
        opacity: 1 !important;
        transform: none !important;
        
        /* Layout */
        display: flex !important;
        flex-direction: column !important;
        padding: 24px !important;
        min-height: 300px !important; /* Ensure substantial card size */
    }

    /* Stack Offsets */
    .auto-card[data-level="1"] { top: 100px !important; z-index: 10 !important; border-top: 2px solid #5d5dff !important; }
    .auto-card[data-level="2"] { top: 120px !important; z-index: 20 !important; border-top: 2px solid #7d5dff !important; }
    .auto-card[data-level="3"] { top: 140px !important; z-index: 30 !important; border-top: 2px solid #a855f7 !important; }
    .auto-card[data-level="4"] { top: 160px !important; z-index: 40 !important; border-top: 2px solid #00f0ff !important; }
    .auto-card[data-level="5"] { top: 180px !important; z-index: 50 !important; border-top: 2px solid #00ff9d !important; margin-bottom: 0 !important; }
    
    /* --- FOOTER FIXES (Mobile) --- */
    footer {
        padding: 60px 0 40px !important;
        background: #050505 !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
    }

    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
        grid-template-columns: none !important;
    }

    .footer-col {
        width: 100% !important;
        text-align: left !important;
        padding-bottom: 20px !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    }

    .footer-col:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    .footer-col h4 {
        font-size: 1rem !important;
        color: #fff !important;
        margin-bottom: 1.5rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
    }

    .footer-col ul {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .footer-col ul li {
        margin-bottom: 12px !important;
    }

    .footer-col ul li a {
        color: #888 !important;
        text-decoration: none !important;
        font-size: 0.95rem !important;
        transition: color 0.2s ease !important;
        display: block !important;
        padding: 4px 0 !important; /* Increase tap target */
    }

    .footer-bottom {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        align-items: flex-start !important; /* Left align everything */
        margin-top: 40px !important;
        padding-top: 20px !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
    }

    .footer-bottom > div {
        justify-content: flex-start !important;
    }

    /* Stay Updated Form Fix */
    .footer-col form {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .footer-col input[type="email"] {
        width: 100% !important;
        padding: 12px 16px !important;
        height: 48px !important; /* Proper touch size */
        background: rgba(255,255,255,0.05) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        border-radius: 4px !important;
        color: #fff !important;
    }

    .footer-col button {
        width: 100% !important;
        height: 48px !important; /* Match input height */
        background: #fff !important;
        color: #000 !important;
        font-weight: 700 !important;
        border: none !important;
        border-radius: 4px !important;
    }

    /* --- ONE PLATFORM THREE PRODUCTS (Mobile Gateway Cards) --- */
    
    /* Wrapper */
    .solution-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
        padding: 0 5vw !important;
        width: 100% !important;
        grid-template-columns: none !important;
    }

    /* Hide connecting line */
    .solution-grid::before {
        display: none !important;
    }

    /* Individual Card */
    .loop-card {
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
        padding: 32px 24px !important;
        position: relative !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        min-height: auto !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Reset Hover Transform */
    .loop-card:hover {
        transform: none !important;
        background: rgba(255, 255, 255, 0.02) !important;
        box-shadow: none !important;
    }

    /* Watermarks */
    .theme-teal::before {
        content: "01";
        position: absolute; top: -20px; right: -10px;
        font-family: 'Inter', sans-serif;
        font-size: 6rem; font-weight: 900; opacity: 0.03; text-align: right; color: #FFF;
        pointer-events: none;
    }
    .theme-purple::before {
        content: "02";
        position: absolute; top: -20px; right: -10px;
        font-family: 'Inter', sans-serif;
        font-size: 6rem; font-weight: 900; opacity: 0.03; text-align: right; color: #FFF;
        pointer-events: none;
    }
    .theme-orange::before {
        content: "03";
        position: absolute; top: -20px; right: -10px;
        font-family: 'Inter', sans-serif;
        font-size: 6rem; font-weight: 900; opacity: 0.03; text-align: right; color: #FFF;
        pointer-events: none;
    }

    /* Header Group */
    .loop-card h3 {
        font-size: 1.5rem !important; 
        margin-bottom: 4px !important;
        color: #FFF !important;
    }

    .loop-tagline {
        font-size: 12px !important; 
        letter-spacing: 1px !important; 
        text-transform: uppercase !important;
        margin-bottom: 0 !important;
        display: block !important;
        opacity: 1 !important;
    }

    /* Hide Icon Box on Mobile */
    .loop-icon-box {
        display: none !important;
    }

    /* Description */
    .loop-desc {
        color: #A0A0A0 !important; 
        font-size: 14px !important; 
        line-height: 1.6 !important; 
        margin-bottom: 0 !important;
        padding-bottom: 24px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* The Divider */
    }

    /* ROI Section */
    .loop-roi {
        padding-top: 0 !important; 
        margin-top: 0 !important; 
        border-top: none !important; /* Removed default border, using desc border */
        color: #A0A0A0 !important;
        font-size: 14px !important;
        margin-bottom: 0 !important;
    }

    .loop-roi strong {
        font-size: 12px !important;
        letter-spacing: 1px !important;
        display: block !important;
        margin-bottom: 8px !important;
    }

    /* Stat Box */
    .loop-stat-box {
        background: rgba(0,0,0,0.5) !important; 
        border-radius: 8px !important; 
        padding: 24px !important; 
        text-align: center !important; 
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    /* Stat Box Borders */
    .theme-teal .loop-stat-box { border: 1px solid #00FFCC !important; }
    .theme-purple .loop-stat-box { border: 1px solid #8A2BE2 !important; }
    .theme-orange .loop-stat-box { border: 1px solid #FF4500 !important; }

    .loop-stat-val {
        font-size: 2.5rem !important; 
        font-weight: bold !important;
        color: #FFF !important;
        margin-bottom: 4px !important;
        text-shadow: none !important;
    }

    .loop-stat-lbl {
        font-size: 11px !important;
        color: #FFF !important;
        opacity: 0.9 !important;
        margin-bottom: 4px !important;
    }

    .loop-stat-context {
        font-size: 12px !important;
        color: #888 !important;
        margin: 0 !important;
        line-height: 1.4 !important;
    }

    /* Button */
    .loop-mobile-btn {
        display: block !important; /* Show on mobile */
        width: 100% !important;
        padding: 16px !important;
        background: transparent !important;
        border: 1px solid rgba(255,255,255,0.3) !important;
        border-radius: 4px !important;
        color: #FFF !important;
        text-align: center !important;
        text-decoration: none !important;
        font-family: 'Space Mono', monospace !important;
        font-size: 12px !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        margin-top: auto !important; /* Push to bottom if needed */
    }

    /* Hide Human Badge on Mobile */
    .loop-human-badge {
        display: none !important;
    }
}