/* THE SANDBOX - GOD-TIER SCROLL HERO v3 (Data Nexus) */

/* Default: Hidden on mobile */
.lex-master-container {
    display: none;
}

@media (min-width: 769px) {

    /* The Sandbox Container - FORCED ACTIVE for desktop */
    .lex-master-container {
        display: flex;
        width: 100%;
        background: transparent;
        color: #FFF;
        font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        position: relative;
        perspective: 1000px;
        transform-style: preserve-3d;
        overflow: visible; /* FIXED: Must be visible for position:sticky to work */
        z-index: 10; /* Ensure it sits above the neural background */
    }

    /* CINEMATIC FILM GRAIN (Global Overlay) */
    .lex-film-grain {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
        opacity: 0.035; /* 3.5% Opacity */
        mix-blend-mode: overlay;
    }

    /* Hide Mobile Telemetry Console on Desktop */
    .mobile-telemetry-console {
        display: none !important;
    }

    /* OBSIDIAN TINT LAYER - REMOVED FOR SEAMLESS VOID */
    .lex-master-container::before {
        display: none;
    }

    /* 4. THE BACKGROUND GRID (Spatial Floor) */
    .lex-spatial-grid {
        position: absolute;
        width: 200%;
        height: 200%;
        top: -50%;
        left: -50%;
        /* Adjusted grid to be more subtle */
        background-image: 
            linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 60px 60px;
        transform: rotateX(60deg) translateY(100px) translateZ(-200px);
        transform-origin: center center;
        /* Composite mask: Deep Fade from top (0% to 50%) to blend with Keystone */
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 20%, black 60%);
        mask-image: linear-gradient(to bottom, transparent 0%, transparent 20%, black 60%);
        pointer-events: none;
        z-index: 1; /* Above tint */
        animation: gridFloat 20s linear infinite;
    }

    /* LEFT SIDE: The Scrolling Narrative */
    .lex-left-scroll {
        width: 45%;
        padding: 0 5vw;
        position: relative;
        z-index: 2;
    }
  
    .lex-step-block {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        opacity: 0.1;
        transition: all 0.5s ease;
        padding-top: 80px; /* Safety padding for navbar clearance */
    }

    .lex-step-block:hover, .lex-step-block.active {
        opacity: 1;
    }
    
    /* Removed :first-child override to let JS/HTML control active state properly */
    /* .lex-step-block:first-child { opacity: 1; } */

    /* TYPOGRAPHY - HERO (SWISS UPDATE) */
    .lex-eyebrow {
        font-family: 'Space Mono', monospace;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #2997FF; /* Tech Blue */
        margin-bottom: 32px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        opacity: 1;
        line-height: 1.4; 
        white-space: normal;
        max-width: 100%;
        
        /* Box Removed - Clean Text Style */
        padding: 0;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
    }

    /* Blinking Status Dot */
    .lex-eyebrow::before {
        content: '';
        width: 6px;
        height: 6px;
        background-color: #2997FF;
        border-radius: 50%;
        box-shadow: 0 0 8px #2997FF;
        animation: blinkStatus 2s infinite;
    }

    @keyframes blinkStatus {
        0% { opacity: 1; }
        50% { opacity: 0.4; }
        100% { opacity: 1; }
    }

    .lex-h1 {
        font-family: 'Inter', sans-serif;
        font-size: clamp(48px, 6vw, 84px); /* Slightly larger */
        font-weight: 700; /* Bolder */
        line-height: 1.05;
        letter-spacing: -0.04em;
        margin-bottom: 32px;
        margin-left: -2px;
        color: #FFFFFF;
        text-shadow: none;
        max-width: 700px;
    }

    /* Gradient Text Highlight */
    .hero-gradient-text {
        background: linear-gradient(135deg, #FFFFFF 30%, #00FFCC 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: inline-block; /* Fix for gradient cut-off */
    }

    .lex-subtext {
        font-family: 'Inter', sans-serif;
        font-size: 20px;
        font-weight: 400; /* Regular weight for clarity */
        color: #B0B0B0; /* Premium Silver */
        line-height: 1.6;
        margin-bottom: 48px;
        max-width: 560px;
    }

    .lex-button-primary {
        background: #FFF; 
        color: #000; 
        padding: 16px 32px; 
        border-radius: 100px; 
        font-weight: 600; 
        text-decoration: none; 
        display: inline-block; 
        margin-right: 16px;
        transition: transform 0.2s;
    }
    
    .lex-button-primary:hover {
        transform: scale(1.05);
    }
  
    .lex-button-secondary {
        background: transparent; 
        color: #FFF; 
        border: 1px solid rgba(255,255,255,0.2); 
        padding: 16px 32px; 
        border-radius: 100px; 
        font-weight: 500; 
        text-decoration: none; 
        display: inline-block;
        backdrop-filter: blur(10px);
        transition: background 0.2s;
    }

    .lex-button-secondary:hover {
        background: rgba(255,255,255,0.1);
    }

    .lex-step-title {
        font-size: 32px; 
        font-weight: 500; 
        color: #FFF; 
        margin-bottom: 16px;
    }

    /* NEW BADGE STYLES */
    .lex-step-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 24px;
    }

    .lex-icon-badge {
        width: 48px;
        height: 48px;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }

    .lex-step-subtitle {
        font-size: 14px;
        letter-spacing: 1px;
        color: rgba(255,255,255,0.5);
        text-transform: uppercase;
        font-weight: 500;
    }

    .lex-metric-badge {
        margin-bottom: 24px;
        padding: 16px 24px;
        border: 1px solid;
        border-radius: 8px;
        background: rgba(0,0,0,0.4);
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 250px;
        text-align: center;
        backdrop-filter: blur(5px);
    }

    .metric-val {
        font-size: 32px;
        font-weight: 800;
        line-height: 1;
        margin-bottom: 4px;
        font-family: 'Space Mono', monospace;
    }

    .metric-lbl {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        opacity: 0.8;
    }

    .lex-human-tag {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: #FFFFFF;
        opacity: 0.8;
        padding: 8px 16px;
        background: rgba(255,255,255,0.08);
        border-radius: 100px;
        width: fit-content;
        border: 1px solid rgba(255,255,255,0.1);
    }
    
    .lex-human-tag i {
        color: #00FFCC; /* Consistent accent for human verification */
    }

    /* NEW CLEAN STYLES FOR V3 HERO COPY */
    .lex-step-eyebrow {
        font-family: 'Space Mono', monospace;
        font-size: 14px;
        margin-bottom: 24px;
        letter-spacing: 2px;
        opacity: 0.8;
        transform: translateX(-10px);
        transition: all 0.6s ease;
        display: block;
    }

    .lex-step-block.active .lex-step-eyebrow {
        transform: translateX(0);
        opacity: 1;
    }

    .lex-step-title-clean {
        font-family: 'Inter', sans-serif;
        font-size: 56px; /* Massive Scale */
        font-weight: 500; /* Sophisticated Weight */
        color: #FFFFFF;
        margin-bottom: 24px;
        letter-spacing: -0.04em; /* Tight Tracking */
        line-height: 1.05;
        margin-left: -3px; /* Optical Alignment */
        text-shadow: none !important;
    }

    .lex-step-body-clean {
        font-family: 'Inter', sans-serif;
        font-size: 20px; /* Increased Size */
        font-weight: 300; /* Light */
        color: rgba(255, 255, 255, 0.6);
        line-height: 1.6;
        max-width: 480px;
    }

    .lex-loop-text {
        font-size: 28px;
        font-weight: 600; /* Medium/Semi-bold */
        color: #FFFFFF;
        text-shadow: none;
        opacity: 0;
        transform: translateY(10px);
        font-family: 'Inter', sans-serif;
    }

    /* Loop Text Animation - Delayed Fade In */
    .lex-step-block.active .lex-loop-text {
        animation: loopTextFadeIn 1s ease forwards 0.5s; 
    }

    @keyframes loopTextFadeIn {
        to { opacity: 1; transform: translateY(0); }
    }

    /* RIGHT SIDE: The Sticky Engine */
    .lex-right-sticky {
        width: 55%;
        height: 90vh;
        position: sticky;
        top: 10vh;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2; /* Increased to sit above film grain (z=1) */
        transform-style: preserve-3d; /* Propagate 3D to children */
    }

    /* ENVIRONMENTAL LIGHTING: Soft Radial Glow behind Engine */
    .lex-right-sticky::before {
        content: '';
        position: absolute;
        top: -10%;
        right: -10%;
        width: 120%;
        height: 120%;
        background: radial-gradient(circle at 70% 30%, rgba(0, 255, 204, 0.1) 0%, transparent 60%);
        pointer-events: none;
        z-index: -1;
        mix-blend-mode: screen;
        filter: blur(60px); /* Increased blur */
        /* Mask the top edge to prevent hard lines */
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%);
        mask-image: linear-gradient(to bottom, transparent 0%, black 30%);
    }

    /* THE ENGINE GRAPHIC CONTAINER */
    .lex-loop-ring {
        width: 500px; 
        height: 500px;
        position: relative;
        z-index: 10;
        transform-style: preserve-3d;
    }

    /* Ring 1: Static Base Outline - MADE VISIBLE & GLOWING */
    .lex-loop-ring::before {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        border: 2px solid rgba(255,255,255,0.15); /* Thicker, more visible */
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(0, 255, 204, 0.1), inset 0 0 10px rgba(0, 0, 0, 0.5); /* Reduced Glow */
    }

    /* Ring 2: Rotating Dashed Outer */
    .lex-ring-dashed {
        position: absolute;
        top: -20px; left: -20px; right: -20px; bottom: -20px;
        border: 1px dashed rgba(255,255,255,0.05);
        border-radius: 50%;
        animation: spinReverse 60s linear infinite;
        pointer-events: none;
    }

    /* Ring 3: Pulse Core Inner (Original) - kept for layering */
    .lex-ring-inner {
        position: absolute;
        top: 15%; left: 15%; right: 15%; bottom: 15%;
        border: 1px solid rgba(255,255,255,0.02);
        border-radius: 50%;
        pointer-events: none;
    }

    /* 3. THE CONCENTRIC LENS (New Depth Rings) */
    .lex-lens-ring-1 {
        width: 350px; height: 350px;
        border: 1px dashed rgba(255,255,255,0.05);
        border-radius: 50%;
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        animation: spinReverse 40s linear infinite;
        pointer-events: none;
    }

    .lex-lens-ring-2 {
        width: 250px; height: 250px;
        border: 1px dotted rgba(255,255,255,0.08);
        border-radius: 50%;
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        animation: spin 60s linear infinite;
        pointer-events: none;
    }

    /* 2. THE CENTRAL DATA NEXUS (The Core) */
    .lex-data-nexus {
        width: 200px; height: 200px;
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.3;
        transform-style: preserve-3d;
        pointer-events: none;
    }

    .nexus-sphere {
        width: 100%; height: 100%;
        position: relative;
        animation: slowSpin3D 30s linear infinite;
        transform-style: preserve-3d;
    }

    .nexus-ring {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        border: 1px solid rgba(255,255,255,0.3);
        border-radius: 50%;
    }
    
    .nr-1 { transform: rotateY(0deg); }
    .nr-2 { transform: rotateY(60deg); }
    .nr-3 { transform: rotateY(120deg); }
    .nr-4 { transform: rotateX(90deg); }
    
    .nexus-core-dot {
        position: absolute;
        top: 50%; left: 50%;
        width: 10px; height: 10px;
        background: #FFF;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 20px #FFF;
        animation: pulseCore 3s ease-in-out infinite;
    }

    /* 1. THE TELEMETRY TRIANGLE (Connective Tissue) */
    .line-container {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        pointer-events: none;
    }

    .tele-line {
        position: absolute;
        height: 1px;
        background: rgba(255,255,255,0.08);
        transform-origin: top left;
        overflow: hidden;
    }

    .tele-packet {
        position: absolute;
        top: 0; left: 0;
        width: 20px; height: 2px;
        background: #FFF;
        box-shadow: 0 0 10px #FFF;
        animation: packetFlow 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    /* Line 1: Top Node (250,0) to Bottom Right (470,430) */
    .tl-1 {
        top: 0; left: 50%;
        width: 483px;
        transform: rotate(62.9deg);
    }
    .tl-1 .tele-packet { animation-delay: 0s; }

    /* Line 2: Bottom Right (470,430) to Bottom Left (30,430) */
    .tl-2 {
        top: 430px; left: 470px;
        width: 440px;
        transform: rotate(180deg);
    }
    .tl-2 .tele-packet { animation-delay: 1s; }

    /* Line 3: Bottom Left (30,430) to Top Node (250,0) */
    .tl-3 {
        top: 430px; left: 30px;
        width: 483px;
        transform: rotate(-62.9deg);
    }
    .tl-3 .tele-packet { animation-delay: 2s; }

    .lex-powered-text {
        position: absolute; 
        bottom: -60px; 
        left: 50%; 
        transform: translateX(-50%);
        font-size: 11px; 
        letter-spacing: 3px; 
        color: #22C55E; /* Base Green */
        white-space: nowrap;
        font-family: 'Space Mono', monospace;
        font-weight: 700;
        text-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* System Updating Pulse */
    .lex-powered-text::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #22C55E;
        border-radius: 50%;
        box-shadow: 0 0 8px #22C55E;
        animation: sysPulse 1.5s infinite;
    }

    @keyframes sysPulse {
        0% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.4; transform: scale(0.8); }
        100% { opacity: 1; transform: scale(1); }
    }

    /* Active Node States - Enhance Ring Connection */
    .lex-loop-ring[data-active-node="1"] .lex-node-1 {
        box-shadow: 0 0 60px rgba(0, 255, 204, 0.6), inset 0 0 30px rgba(0, 255, 204, 0.3);
        border-color: #00FFCC;
        transform: translate(-50%, -50%) scale(1.15);
        z-index: 30;
    }
    .lex-loop-ring[data-active-node="2"] .lex-node-2 {
        box-shadow: 0 0 60px rgba(138, 43, 226, 0.6), inset 0 0 30px rgba(138, 43, 226, 0.3);
        border-color: #8A2BE2;
        transform: translate(-50%, -50%) scale(1.15);
        z-index: 30;
    }
    .lex-loop-ring[data-active-node="3"] .lex-node-3 {
        box-shadow: 0 0 60px rgba(255, 69, 0, 0.6), inset 0 0 30px rgba(255, 69, 0, 0.3);
        border-color: #FF4500;
        transform: translate(-50%, -50%) scale(1.15);
        z-index: 30;
    }
    
    /* Engine Pulse Animation (Loop Closure) */
    .lex-loop-ring::after {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        border-radius: 50%;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    /* Node 1: Teal Glow */
    .lex-loop-ring[data-active-node="1"]::after {
        opacity: 1;
        animation: pulseLoopTeal 2s ease-out infinite;
    }
    
    /* Node 2: Purple Glow */
    .lex-loop-ring[data-active-node="2"]::after {
        opacity: 1;
        animation: pulseLoopPurple 2s ease-out infinite;
    }

    /* Node 3: Orange Glow */
    .lex-loop-ring[data-active-node="3"]::after {
        opacity: 1;
        animation: pulseLoopOrange 2s ease-out infinite;
    }

    /* Node 4: Green Glow (LexLoop) */
    .lex-loop-ring[data-active-node="4"]::after {
        opacity: 1;
        animation: pulseLoopGreen 2s ease-out infinite;
    }

    @keyframes pulseLoopTeal {
        0% { box-shadow: 0 0 0 rgba(0, 255, 204, 0); }
        50% { box-shadow: 0 0 100px rgba(0, 255, 204, 0.3); }
        100% { box-shadow: 0 0 0 rgba(0, 255, 204, 0); }
    }

    @keyframes pulseLoopPurple {
        0% { box-shadow: 0 0 0 rgba(138, 43, 226, 0); }
        50% { box-shadow: 0 0 100px rgba(138, 43, 226, 0.3); }
        100% { box-shadow: 0 0 0 rgba(138, 43, 226, 0); }
    }

    @keyframes pulseLoopOrange {
        0% { box-shadow: 0 0 0 rgba(255, 69, 0, 0); }
        50% { box-shadow: 0 0 100px rgba(255, 69, 0, 0.3); }
        100% { box-shadow: 0 0 0 rgba(255, 69, 0, 0); }
    }
    
    @keyframes pulseLoopGreen {
        0% { box-shadow: 0 0 0 rgba(34, 197, 94, 0); }
        50% { box-shadow: 0 0 100px rgba(34, 197, 94, 0.3); }
        100% { box-shadow: 0 0 0 rgba(34, 197, 94, 0); }
    }

    /* THE NODES */
    .lex-node {
        position: absolute;
        width: 80px; 
        height: 80px;
        display: flex; 
        align-items: center; 
        justify-content: center;
        background: #000; 
        border-radius: 50%;
        z-index: 25; /* Higher than ring elements and canvas (z=5, z=10) */
        transition: transform 0.3s ease;
    }
    
    .lex-node:hover {
        transform: scale(1.1);
        cursor: crosshair;
    }

    .lex-node-label {
        position: absolute;
        font-size: 11px; 
        font-weight: 600; 
        letter-spacing: 2px; 
        text-transform: uppercase; 
        white-space: nowrap;
        font-family: 'Inter', sans-serif;
    }

    /* NODE 1: LEXANNOTATE */
    .lex-node-1 { 
        top: 0; left: 50%; 
        transform: translate(-50%, -50%); 
        border: 1px solid rgba(0, 255, 204, 0.4); 
        box-shadow: 0 0 40px rgba(0, 255, 204, 0.15), inset 0 0 20px rgba(0, 255, 204, 0.05); 
    }
    .lex-node-1 .lex-node-label { 
        top: -35px; color: #00FFCC; text-shadow: 0 0 10px rgba(0,255,204,0.5);
    }
    .node-icon-annotate {
        width: 32px; height: 32px;
        position: relative;
    }
    .annotate-box {
        position: absolute; width: 100%; height: 100%;
        border: 1px dashed rgba(0,255,204,0.5);
        border-radius: 4px;
        overflow: hidden;
    }
    .annotate-scanline {
        position: absolute; top: 0; left: 0; width: 100%; height: 2px;
        background: #00FFCC;
        box-shadow: 0 0 8px #00FFCC;
        animation: scan 2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    }
    .annotate-corner {
        position: absolute; width: 6px; height: 6px;
        border-color: #00FFCC; border-style: solid;
        transition: all 0.3s;
    }
    .tl { top: -2px; left: -2px; border-width: 1px 0 0 1px; }
    .tr { top: -2px; right: -2px; border-width: 1px 1px 0 0; }
    .bl { bottom: -2px; left: -2px; border-width: 0 0 1px 1px; }
    .br { bottom: -2px; right: -2px; border-width: 0 1px 1px 0; }
    
    .annotate-data-bit {
        position: absolute; width: 2px; height: 2px; background: #FFF;
        opacity: 0;
        animation: dataFlicker 2s infinite;
    }

    /* NODE 2: LEXINTEL */
    .lex-node-2 { 
        top: 80%; left: 90%; /* Precisely on the ring orbit (x=450, y=400) */
        transform: translate(-50%, -50%); /* Center on the point */
        border: 1px solid rgba(138, 43, 226, 0.4); 
        box-shadow: 0 0 40px rgba(138, 43, 226, 0.15), inset 0 0 20px rgba(138, 43, 226, 0.05); 
    }
    .lex-node-2 .lex-node-label { 
        bottom: -35px; color: #8A2BE2; text-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
    }
    .node-icon-intel {
        width: 40px; height: 40px;
        display: flex; justify-content: center; align-items: center;
        position: relative;
    }
    .intel-core {
        width: 10px; height: 10px; background: #8A2BE2; border-radius: 50%;
        box-shadow: 0 0 15px #8A2BE2;
        animation: pulseCore 2s infinite;
    }
    .intel-orbit {
        position: absolute; border: 1px solid rgba(138, 43, 226, 0.3); border-radius: 50%;
    }
    .o1 { width: 100%; height: 100%; animation: spin 4s linear infinite; }
    .o2 { width: 60%; height: 60%; animation: spinReverse 3s linear infinite; border-color: rgba(138, 43, 226, 0.6); }
    .intel-sat {
        position: absolute; top: -3px; left: 50%; width: 6px; height: 6px;
        background: #FFF; border-radius: 50%; box-shadow: 0 0 5px #FFF;
    }

    /* NODE 3: LEXOPERATE */
    .lex-node-3 { 
        top: 80%; left: 10%; /* Precisely on the ring orbit (x=50, y=400) */
        transform: translate(-50%, -50%); /* Center on the point */
        border: 1px solid rgba(255, 69, 0, 0.4); 
        box-shadow: 0 0 40px rgba(255, 69, 0, 0.15), inset 0 0 20px rgba(255, 69, 0, 0.05); 
    }
    .lex-node-3 .lex-node-label { 
        bottom: -35px; color: #FF4500; text-shadow: 0 0 10px rgba(255, 69, 0, 0.5);
    }
    .node-icon-operate {
        width: 36px; height: 36px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,69,0,0.1) 0%, transparent 70%);
        position: relative; overflow: hidden;
        border: 1px solid rgba(255,69,0,0.2);
    }
    .operate-sweep {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: conic-gradient(from 0deg, transparent 70%, rgba(255, 69, 0, 0.8) 100%);
        border-radius: 50%;
        animation: spin 2s linear infinite;
    }
    .operate-blip {
        position: absolute; top: 20%; left: 60%; width: 4px; height: 4px;
        background: #FF4500; border-radius: 50%;
        box-shadow: 0 0 4px #FF4500;
        opacity: 0;
        animation: blip 2s 0.5s infinite;
    }

    /* PARTICLES */
    .ring-particle {
        position: absolute;
        top: 50%; left: 50%;
        width: 4px; height: 4px;
        background: #FFF;
        border-radius: 50%;
        box-shadow: 0 0 10px #FFF;
        opacity: 0;
        pointer-events: none;
    }
    
    .p1 { 
        width: 500px; height: 500px; 
        background: none; box-shadow: none;
        animation: particleRotate 8s linear infinite;
    }
    .p1::after {
        content: ''; position: absolute; top: 0; left: 50%;
        width: 4px; height: 4px; background: #00FFCC;
        border-radius: 50%; box-shadow: 0 0 8px #00FFCC;
    }

    .p2 { 
        width: 500px; height: 500px;
        background: none; box-shadow: none;
        animation: particleRotate 12s linear infinite reverse;
    }
    .p2::after {
        content: ''; position: absolute; top: 0; left: 50%;
        width: 3px; height: 3px; background: #8A2BE2;
        border-radius: 50%; box-shadow: 0 0 8px #8A2BE2;
    }

    /* 2. APPLY DEPTH OF FIELD (BLUR) */
    .lex-spatial-grid,
    .lex-lens-ring-1,
    .lex-lens-ring-2,
    .lex-data-nexus {
        /* filter: blur(3px); REMOVED FOR PERFORMANCE */
        opacity: 0.4;
    }

    /* 3. TAPER THE RING LIGHTS (Comet Effect) */
    .lex-ring-dashed,
    .lex-lens-ring-1,
    .lex-lens-ring-2 {
        -webkit-mask-image: linear-gradient(180deg, black 10%, transparent 90%);
        mask-image: linear-gradient(180deg, black 10%, transparent 90%);
    }

    /* 1. INJECT THE FUSION CORE */
    .lex-fusion-core { 
        width: 300px; 
        height: 300px; 
        position: absolute; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        background: radial-gradient(circle, rgba(138,43,226,0.15) 0%, rgba(0,255,204,0.05) 40%, transparent 70%); 
        animation: coreBreathe 8s ease-in-out infinite alternate; 
        z-index: 0; 
        pointer-events: none; 
    }

    /* 4. ADD THE LENS FLARE TO NODE 1 */
    .lex-flare { 
        position: absolute; 
        top: 0; 
        left: 50%; 
        transform: translateX(-50%); 
        width: 120px; 
        height: 1px; 
        background: radial-gradient(circle, #FFF 0%, rgba(0,255,204,0.8) 20%, transparent 80%); 
        box-shadow: 0 0 20px #FFF; 
        z-index: 10; 
    }

    /* TELEMETRY SCROLL INDICATOR */
    .lex-scroll-indicator {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-top: 8vh;
        opacity: 0.5;
        transition: opacity 0.3s ease;
        cursor: default;
    }
    .lex-scroll-indicator:hover {
        opacity: 1;
    }
    
    .lex-scroll-track {
        width: 1px;
        height: 60px; /* Increased height */
        background: rgba(255,255,255,0.2); /* Increased opacity */
        position: relative;
        overflow: hidden;
    }
    
    .lex-scroll-point {
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 10px; 
        background: #00FFCC;
        box-shadow: 0 0 5px #00FFCC;
        animation: scrollDrop 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
    
    .lex-scroll-text {
        font-family: 'Space Mono', monospace;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 3px;
        color: #FFF; /* Increased brightness */
    }
    
    @keyframes scrollDrop {
        0% { top: -10px; opacity: 0; }
        20% { opacity: 1; }
        80% { opacity: 1; }
        100% { top: 100%; opacity: 0; }
    }

    /* Animations */
    @keyframes coreBreathe { 
        0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); } 
        100% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 
    }
    @keyframes spin { 100% { transform: rotate(360deg); } }
    @keyframes spinReverse { 100% { transform: translate(-50%, -50%) rotate(-360deg); } }
    @keyframes slowSpin3D {
        0% { transform: translate(-50%, -50%) rotateY(0deg) rotateX(0deg); }
        100% { transform: translate(-50%, -50%) rotateY(360deg) rotateX(360deg); }
    }
    @keyframes scan { 0%, 100% { top: 0; opacity: 0.5; } 50% { top: 100%; opacity: 1; } }
    @keyframes pulseCore { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 50% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; } }
    @keyframes blip { 0% { opacity: 0; } 20% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0; } }
    @keyframes dataFlicker { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
    @keyframes particleRotate { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
    @keyframes packetFlow {
        0% { transform: translateX(-100%); opacity: 0; }
        10% { opacity: 1; }
        90% { opacity: 1; }
        100% { transform: translateX(500px); opacity: 0; }
    }
    @keyframes gridFloat {
        0% { transform: rotateX(60deg) translateY(100px) translateZ(-200px) translateY(0); }
        50% { transform: rotateX(60deg) translateY(100px) translateZ(-200px) translateY(20px); }
        100% { transform: rotateX(60deg) translateY(100px) translateZ(-200px) translateY(0); }
    }
}

/* --- NEW HERO ROI & STATS STYLING --- */
.hero-roi-container {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
    width: 100%;
    max-width: 480px;
}

.hero-roi-text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #AAA;
    line-height: 1.5;
    margin-bottom: 20px;
}

.hero-roi-text strong {
    color: #FFF;
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Stat Box within Hero */
.hero-stat-box {
    border: 1px solid;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    margin-bottom: 16px;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(5px);
}

.box-teal { border-color: rgba(0, 255, 204, 0.3); }
.box-purple { border-color: rgba(138, 43, 226, 0.3); }
.box-orange { border-color: rgba(255, 69, 0, 0.3); }

.hero-stat-val {
    font-family: 'Inter', sans-serif;
    font-size: 28px; /* Slightly smaller than solution card to fit hero */
    font-weight: 800;
    color: #FFF;
    line-height: 1;
    margin-bottom: 6px;
}

.box-teal .hero-stat-val { color: #00FFCC; text-shadow: 0 0 10px rgba(0,255,204,0.4); }
.box-purple .hero-stat-val { color: #8A2BE2; text-shadow: 0 0 10px rgba(138,43,226,0.4); }
.box-orange .hero-stat-val { color: #FF4500; text-shadow: 0 0 10px rgba(255,69,0,0.4); }

.hero-stat-label {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    color: #AAA;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Context Subtext for Hero Stats */
.hero-stat-context {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    margin-top: 8px;
    line-height: 1.4;
    font-weight: 400;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* Human Tag */
.hero-human-tag {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-human-tag i { 
    font-size: 14px; 
}

.box-teal ~ .hero-human-tag i { color: #00FFCC; }
.box-purple ~ .hero-human-tag i { color: #8A2BE2; }
.box-orange ~ .hero-human-tag i { color: #FF4500; }

/* Hero Stat Grid for Multiple Metrics */
.hero-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* Ensure single stat boxes take full width if not in grid, or handle it via context */
/* Currently existing single boxes are just divs, now we wrapped them in grid for the multi-one */
/* For the single ones, we can leave them as is, or wrap them in a grid with 1 column if we wanted consistency */
/* But since I only changed the LexOperate one, I'll just style the grid */

@media (max-width: 1400px) {
    /* Stack them if space is tight on smaller desktops */
    .hero-stat-grid {
        grid-template-columns: 1fr;
    }
}