@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&display=swap');
        
        
        .neural-factory-page {
            background: #000;
            font-family: 'Rajdhani', sans-serif;
            color: #00ffff;
            position: relative;
            margin: 0;
            padding: 0;
            width: 100%;
            height: auto;
            min-height: 100vh;
        }
        
        .neural-factory-page * {
            box-sizing: border-box;
        }
        
        
        /* Animated background */
        .neural-factory-page .bg-matrix {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 80%, #ff0080 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, #00ffff 0%, transparent 50%),
                linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
            opacity: 0.3;
            z-index: 1;
            pointer-events: none;
        }
        
        .neural-factory-page .neural-grid {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 40px 40px;
            animation: gridShift 20s linear infinite;
            z-index: 1;
            pointer-events: none;
        }
        
        @keyframes gridShift {
            0% { transform: translate(0, 0); }
            100% { transform: translate(40px, 40px); }
        }
        
        /* Main container */
        .neural-factory-page .container {
            position: relative;
            z-index: 10;
            min-height: auto;
            display: flex;
            flex-direction: column;
            margin: 0 auto;
            padding: 0 15px;
            max-width: 1200px;
            touch-action: pan-y;
        }
        
        /* Neural Factory Internal Navigation */
        .neural-factory-page .neural-nav {
            padding: 8px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(0, 255, 255, 0.3);
            position: relative;
            margin-bottom: 10px;
        }
        
        .neural-factory-page .neural-logo {
            font-family: 'Orbitron', monospace;
            font-size: 1.1rem;
            font-weight: 700;
            color: #00ffff;
            text-shadow: 0 0 8px #00ffff;
        }
        
        .neural-factory-page .neural-nav-menu {
            display: flex;
            gap: 20px;
            list-style: none;
        }
        
        .neural-factory-page .neural-nav-item {
            color: #00ffff;
            text-decoration: none;
            font-weight: 500;
            padding: 6px 12px;
            border: 1px solid transparent;
            border-radius: 4px;
            transition: all 0.3s ease;
            cursor: pointer;
            font-size: 0.9rem;
        }
        
        .neural-factory-page .neural-nav-item:hover, 
        .neural-factory-page .neural-nav-item.active {
            border-color: #00ffff;
            background: rgba(0, 255, 255, 0.1);
            text-shadow: 0 0 10px #00ffff;
        }
        
        /* Neural Hamburger Menu */
        .neural-factory-page .neural-hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
            padding: 5px;
        }
        
        .neural-factory-page .neural-hamburger span {
            width: 25px;
            height: 3px;
            background: #00ffff;
            margin: 3px 0;
            transition: 0.3s;
            box-shadow: 0 0 5px #00ffff;
        }
        
        .neural-factory-page .neural-hamburger.active span:nth-child(1) {
            transform: rotate(-45deg) translate(-5px, 6px);
        }
        
        .neural-factory-page .neural-hamburger.active span:nth-child(2) {
            opacity: 0;
        }
        
        .neural-factory-page .neural-hamburger.active span:nth-child(3) {
            transform: rotate(45deg) translate(-5px, -6px);
        }
        
        /* Neural Mobile Menu */
        .neural-factory-page .neural-mobile-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.95);
            border: 1px solid rgba(0, 255, 255, 0.3);
            border-top: none;
            backdrop-filter: blur(10px);
            z-index: 1000;
        }
        
        .neural-factory-page .neural-mobile-menu.active {
            display: block;
        }
        
        .neural-factory-page .neural-mobile-menu .neural-nav-item {
            display: block;
            margin: 0;
            padding: 15px 20px;
            border: none;
            border-bottom: 1px solid rgba(0, 255, 255, 0.2);
            border-radius: 0;
        }
        
        .neural-factory-page .neural-mobile-menu .neural-nav-item:last-child {
            border-bottom: none;
        }
        
        /* Page content */
        .neural-factory-page .page {
            display: none;
            flex: 1;
            padding: 20px;
            min-height: auto;
        }
        
        .neural-factory-page .page.active {
            display: block;
        }
        
        /* Factory Demo Layout */
        .neural-factory-page .factory-demo {
            display: grid;
            grid-template-columns: 1fr 350px;
            gap: 30px;
            max-width: 100%;
            margin: 0 auto;
            min-height: 600px;
            width: 100%;
        }
        
        /* Factory Floor Visualization */
        .neural-factory-page .factory-floor {
            background: rgba(0, 0, 0, 0.8);
            border: 2px solid #00ffff;
            border-radius: 15px;
            position: relative;
            overflow: visible;
            padding: 20px;
            height: 900px;
            touch-action: pan-y;
        }
        
        .neural-factory-page .factory-svg {
            width: 100%;
            height: 100%;
        }
        
        /* Neural Control Panel */
        .neural-factory-page .neural-panel {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        /* Circuit Board Brain */
        .neural-factory-page .brain-container {
            background: rgba(0, 0, 0, 0.9);
            border: 2px solid #00ffff;
            border-radius: 15px;
            padding: 20px;
            backdrop-filter: blur(15px);
            position: relative;
            height: 300px;
        }
        
        .neural-factory-page .circuit-brain {
            width: 100%;
            height: 100%;
        }
        
        .neural-factory-page .circuit-trace {
            stroke: #00ffff;
            stroke-width: 2;
            fill: none;
            animation: circuitPulse 3s linear infinite;
        }
        
        @keyframes circuitPulse {
            0% { stroke-dasharray: 0, 1000; }
            50% { stroke-dasharray: 500, 1000; }
            100% { stroke-dasharray: 1000, 0; }
        }
        
        .neural-factory-page .circuit-node {
            fill: #ff0080;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .neural-factory-page .circuit-node:hover {
            fill: #fff;
            filter: drop-shadow(0 0 10px #ff0080);
        }
        
        .neural-factory-page .circuit-node.active {
            fill: #00ff00;
            animation: nodeActive 1s ease-in-out infinite alternate;
        }
        
        @keyframes nodeActive {
            from { r: 4; }
            to { r: 8; }
        }
        
        /* Control Interface */
        .neural-factory-page .control-interface {
            background: rgba(0, 0, 0, 0.9);
            border: 2px solid #00ffff;
            border-radius: 15px;
            padding: 25px;
            backdrop-filter: blur(15px);
            flex: 1;
        }
        
        .neural-factory-page .interface-title {
            font-family: 'Orbitron', monospace;
            font-size: 1.3rem;
            color: #00ffff;
            text-align: center;
            margin-bottom: 20px;
            text-shadow: 0 0 10px #00ffff;
        }
        
        .neural-factory-page .equipment-controls {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 20px;
        }
        
        .neural-factory-page .equipment-btn {
            padding: 12px 15px;
            background: rgba(0, 0, 0, 0.7);
            border: 2px solid #00ffff;
            border-radius: 8px;
            color: #00ffff;
            font-family: 'Rajdhani', sans-serif;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .neural-factory-page .equipment-btn:hover {
            background: rgba(0, 255, 255, 0.1);
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
        }
        
        .neural-factory-page .equipment-btn.active {
            background: rgba(255, 0, 128, 0.2);
            border-color: #ff0080;
            color: #ff0080;
            animation: equipmentActive 2s ease-in-out infinite;
        }
        
        @keyframes equipmentActive {
            0%, 100% { box-shadow: 0 0 10px rgba(255, 0, 128, 0.5); }
            50% { box-shadow: 0 0 30px rgba(255, 0, 128, 0.8); }
        }
        
        .neural-factory-page .status-display {
            background: rgba(0, 0, 0, 0.8);
            border: 1px solid rgba(0, 255, 255, 0.3);
            border-radius: 8px;
            padding: 15px;
            height: 120px;
            overflow-y: auto;
            font-family: 'Orbitron', monospace;
            font-size: 0.85rem;
        }
        
        .neural-factory-page .status-line {
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .neural-factory-page .status-label {
            color: #00ffff;
        }
        
        .neural-factory-page .status-value {
            color: #00ff00;
            font-weight: 700;
        }
        
        .neural-factory-page .status-value.warning {
            color: #ffff00;
        }
        
        .neural-factory-page .status-value.error {
            color: #ff0080;
        }
        
        /* Factory Equipment Animations */
        .neural-factory-page .conveyor-belt {
            stroke: #888;
            stroke-width: 8;
            fill: none;
        }
        
        .neural-factory-page .conveyor-belt.running {
            stroke: #00ff00;
            animation: conveyorMove 2s linear infinite;
        }
        
        @keyframes conveyorMove {
            0% { stroke-dasharray: 0, 20; }
            100% { stroke-dasharray: 20, 20; }
        }
        
        .neural-factory-page .robot-arm {
            fill: #666;
            stroke: #00ffff;
            stroke-width: 2;
            transform-origin: center;
            transition: transform 1s ease-in-out;
        }
        
        .neural-factory-page .robot-arm.active .robot-base {
            animation: robotBaseRotation 4s ease-in-out infinite;
        }
        
        .neural-factory-page .robot-arm.active .robot-lower-arm {
            animation: robotLowerArm 3s ease-in-out infinite;
        }
        
        .neural-factory-page .robot-arm.active .robot-upper-arm {
            animation: robotUpperArm 2.5s ease-in-out infinite;
        }
        
        .neural-factory-page .robot-arm.active .robot-effector {
            animation: robotEffector 2s ease-in-out infinite;
        }
        
        @keyframes robotBaseRotation {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(45deg); }
            50% { transform: rotate(0deg); }
            75% { transform: rotate(-30deg); }
        }
        
        @keyframes robotLowerArm {
            0%, 100% { transform: rotate(0deg); }
            33% { transform: rotate(30deg); }
            66% { transform: rotate(-20deg); }
        }
        
        @keyframes robotUpperArm {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(-45deg); }
        }
        
        @keyframes robotEffector {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(90deg); }
            50% { transform: rotate(180deg); }
            75% { transform: rotate(270deg); }
        }
        
        .neural-factory-page .machine {
            fill: #444;
            stroke: #00ffff;
            stroke-width: 2;
            transition: all 0.5s ease;
        }
        
        .neural-factory-page .machine.running {
            fill: #00ff00;
            stroke: #fff;
            filter: drop-shadow(0 0 10px #00ff00);
        }
        
        .neural-factory-page .sensor {
            fill: #ff0080;
            stroke: #fff;
            stroke-width: 1;
        }
        
        .neural-factory-page .sensor.triggered {
            fill: #00ff00;
            animation: sensorBlink 1s ease-in-out infinite;
        }
        
        @keyframes sensorBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }
        
        /* Data flow lines */
        .neural-factory-page .data-flow {
            stroke: #ff0080;
            stroke-width: 3;
            fill: none;
            stroke-dasharray: 10, 5;
            animation: dataTransfer 2s linear infinite;
        }
        
        @keyframes dataTransfer {
            0% { stroke-dashoffset: 0; }
            100% { stroke-dashoffset: 15; }
        }
        
        /* Content pages styling */
        .neural-factory-page .content-page {
            max-width: 100%;
            margin: 0 auto;
            background: rgba(0, 0, 0, 0.8);
            border: 2px solid #00ffff;
            border-radius: 15px;
            padding: 40px;
            backdrop-filter: blur(10px);
            width: 100%;
        }
        
        .neural-factory-page .page-title {
            font-family: 'Orbitron', monospace;
            font-size: 2.5rem;
            font-weight: 900;
            color: #00ffff;
            text-align: center;
            margin-bottom: 30px;
            text-shadow: 0 0 20px #00ffff;
        }
        
        .neural-factory-page .section {
            margin-bottom: 40px;
        }
        
        .neural-factory-page .section h2 {
            font-family: 'Orbitron', monospace;
            font-size: 1.5rem;
            color: #ff0080;
            margin-bottom: 20px;
            border-bottom: 2px solid #ff0080;
            padding-bottom: 10px;
        }
        
        .neural-factory-page .section p {
            line-height: 1.8;
            margin-bottom: 15px;
            color: #e0e0e0;
        }
        
        .neural-factory-page .tech-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }
        
        .neural-factory-page .tech-card {
            background: rgba(0, 255, 255, 0.05);
            border: 1px solid rgba(0, 255, 255, 0.3);
            border-radius: 10px;
            padding: 20px;
            transition: all 0.3s ease;
        }
        
        .neural-factory-page .tech-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2);
            border-color: #00ffff;
        }
        
        .neural-factory-page .tech-card h3 {
            color: #00ffff;
            margin-bottom: 15px;
            font-family: 'Orbitron', monospace;
        }
        
        .neural-factory-page .code-example {
            background: rgba(0, 0, 0, 0.9);
            border: 1px solid #00ffff;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            font-family: 'Orbitron', monospace;
            font-size: 0.9rem;
            color: #00ff00;
            overflow-x: auto;
        }
        
        /* Ensure desktop scrolling works */
        @media (min-width: 801px) {
            .neural-factory-page {
                height: auto;
                overflow-y: visible;
            }
        }
        
        /* Force mobile scrolling */
        @media (max-width: 800px) {
            html, body {
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch !important;
                touch-action: pan-y !important;
                height: auto !important;
            }
            
            .neural-factory-page {
                height: auto !important;
                overflow-y: visible !important;
                position: static !important;
            }
        }
        
        /* Responsive design */
        @media (max-width: 800px) {
        .neural-factory-page .neural-logo {
                font-size: 1rem;
            }
            
        .neural-factory-page .neural-nav {
                padding: 10px 15px;
            }
            
        .neural-factory-page .neural-nav-menu {
                display: none;
            }
            
        .neural-factory-page .neural-hamburger {
                display: flex;
            }
            
        .neural-factory-page .factory-demo {
                grid-template-columns: 1fr;
                gap: 20px;
                height: auto;
                min-height: auto;
            }
            
        .neural-factory-page .factory-floor {
                height: 750px;
                min-height: 750px;
            }
            
        .neural-factory-page .neural-panel {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 15px;
                align-items: start;
            }
            
        .neural-factory-page .brain-container {
                height: 280px;
            }
            
        .neural-factory-page .control-interface {
                height: 280px;
                display: flex;
                flex-direction: column;
            }
            
        .neural-factory-page .equipment-controls {
                gap: 8px;
                flex: 1;
            }
            
        .neural-factory-page .equipment-btn {
                padding: 10px 12px;
                font-size: 0.9rem;
                min-height: 44px;
            }
            
        .neural-factory-page .interface-title {
                font-size: 1.1rem;
                margin-bottom: 15px;
            }
            
        .neural-factory-page .status-display {
                height: 80px;
                font-size: 0.8rem;
                margin-top: auto;
            }
            
        .neural-factory-page .tech-grid {
                grid-template-columns: 1fr;
            }
            
        .neural-factory-page .content-page {
                padding: 25px 20px;
            }
            
        .neural-factory-page .page-title {
                font-size: 2rem;
            }
            
            /* Mobile-optimized factory floor */
        .neural-factory-page .factory-svg {
                width: 100%;
                height: 100%;
                max-width: none;
            }
            
            /* Adjust factory layout for mobile */
        .neural-factory-page .factory-svg text {
                font-size: 8px;
            }
            
        .neural-factory-page .factory-svg .data-flow {
                stroke-width: 2;
            }
            
        .neural-factory-page .factory-svg .neural-hub {
                r: 15;
            }
            
            /* Touch-friendly controls */
        .neural-factory-page .circuit-node {
                r: 6;
            }
        }
        
        @media (max-width: 480px) {
        .neural-factory-page .neural-nav {
                padding: 15px;
            }
            
        .neural-factory-page .neural-logo {
                font-size: 1rem;
            }
            
        .neural-factory-page .factory-floor {
                height: 650px;
                min-height: 650px;
                padding: 15px;
            }
            
        .neural-factory-page .neural-panel {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
        .neural-factory-page .brain-container {
                height: 250px;
            }
            
        .neural-factory-page .control-interface {
                height: auto;
                padding: 20px;
            }
            
        .neural-factory-page .equipment-btn {
                font-size: 0.85rem;
                padding: 8px 10px;
            }
            
        .neural-factory-page .status-display {
                height: 100px;
            }
            
        .neural-factory-page .page-title {
                font-size: 1.8rem;
            }
            
        .neural-factory-page .content-page {
                padding: 20px 15px;
            }
            
            /* Very small screen factory adjustments */
        .neural-factory-page .factory-svg text {
                font-size: 6px;
            }
            
        .neural-factory-page .factory-svg .sensor {
                r: 4;
            }
            
        .neural-factory-page .factory-svg .machine {
                stroke-width: 1;
            }
        }