:root {
            --bg-color: #030305;
            --neon-cyan: #00F3FF;
            --neon-magenta: #FF003C;
            --text-main: #FFFFFF;
            --text-dim: #888899;
            --glass-bg: rgba(10, 10, 15, 0.6);
            --transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }
        body { background: var(--bg-color); color: var(--text-main); font-family: 'Space Grotesk', sans-serif; overflow-x: hidden; line-height: 1.6; }
        h1, h2, h3, .logo { font-family: 'Syncopate', sans-serif; text-transform: uppercase; }

        /* HEAVY VPS LOAD: Moving 3D Cyber-Grid Background */
        .cyber-grid-wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -2; perspective: 1000px; overflow: hidden; background: radial-gradient(circle at center, #111 0%, #000 100%); }
        .cyber-grid { position: absolute; width: 200%; height: 200%; bottom: -50%; left: -50%; background-image: 
            linear-gradient(var(--neon-cyan) 1px, transparent 1px), linear-gradient(90deg, var(--neon-magenta) 1px, transparent 1px);
            background-size: 60px 60px; opacity: 0.15; transform: rotateX(75deg); animation: speedGrid 10s linear infinite; }
        @keyframes speedGrid { 0% { transform: rotateX(75deg) translateY(0); } 100% { transform: rotateX(75deg) translateY(60px); } }

        /* Ambient Glow Nodes */
        .glow-node { position: fixed; border-radius: 50%; filter: blur(100px); z-index: -1; opacity: 0.2; animation: pulseGlow 8s infinite alternate; }
        .glow-1 { width: 500px; height: 500px; background: var(--neon-magenta); top: -10%; left: -10%; }
        .glow-2 { width: 600px; height: 600px; background: var(--neon-cyan); bottom: -20%; right: -10%; animation-delay: -4s; }
        @keyframes pulseGlow { 0% { opacity: 0.1; transform: scale(0.8); } 100% { opacity: 0.3; transform: scale(1.2); } }

        /* Tech Navigation */
        nav { padding: 25px 5%; display: flex; justify-content: space-between; align-items: center; position: fixed; width: 100%; top: 0; z-index: 1000; background: linear-gradient(to bottom, rgba(3,3,5,0.9), transparent); border-bottom: 1px solid rgba(0, 243, 255, 0.1); backdrop-filter: blur(10px); }
        .logo { font-size: 1.2rem; font-weight: 700; letter-spacing: 2px; color: var(--text-main); text-shadow: 0 0 10px var(--neon-cyan); }
        .nav-links a { color: var(--text-main); text-decoration: none; margin-left: 40px; font-weight: 600; font-size: 0.8rem; letter-spacing: 2px; transition: var(--transition); position: relative; }
        .nav-links a:hover { color: var(--neon-magenta); text-shadow: 0 0 15px var(--neon-magenta); }

        /* 5 GIANT SECTIONS */
        section { min-height: 100vh; padding: 160px 8% 100px; display: flex; flex-direction: column; justify-content: center; position: relative; }

        /* HERO: High Speed Impact */
        .hero { align-items: flex-start; }
        .glitch-title { font-size: clamp(3rem, 8vw, 6.5rem); font-weight: 700; line-height: 1; margin-bottom: 30px; position: relative; text-shadow: 2px 2px 0px var(--neon-cyan), -2px -2px 0px var(--neon-magenta); }
        .hero-sub { font-size: 1.3rem; max-width: 600px; color: var(--text-dim); margin-bottom: 50px; border-left: 2px solid var(--neon-magenta); padding-left: 20px; }
        
        .btn-neon { padding: 20px 45px; background: transparent; color: var(--text-main); font-family: 'Syncopate', sans-serif; font-size: 0.9rem; font-weight: 700; border: 1px solid var(--neon-cyan); position: relative; cursor: pointer; transition: var(--transition); overflow: hidden; display: inline-block; text-decoration: none; box-shadow: 0 0 15px rgba(0, 243, 255, 0.2), inset 0 0 15px rgba(0, 243, 255, 0.1); }
        .btn-neon::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.4), transparent); transition: var(--transition); }
        .btn-neon:hover { background: var(--neon-cyan); color: #000; box-shadow: 0 0 30px var(--neon-cyan), 0 0 60px var(--neon-cyan); border-color: var(--neon-cyan); transform: skewX(-10deg); }
        .btn-neon:hover::before { left: 100%; transition: 0.5s; }

        /* 3D CARDS (Services) */
        .section-heading { font-size: 3rem; margin-bottom: 60px; color: var(--text-main); display: inline-block; border-bottom: 4px solid var(--neon-magenta); padding-bottom: 10px; }
        .grid-3d { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; perspective: 1000px; }
        .card-3d { background: var(--glass-bg); padding: 50px 40px; border: 1px solid rgba(255,255,255,0.05); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); transform-style: preserve-3d; border-top: 1px solid var(--neon-cyan); position: relative; overflow: hidden; }
        .card-3d:hover { transform: translateZ(30px) rotateX(5deg) rotateY(-5deg); box-shadow: -20px 20px 50px rgba(0, 243, 255, 0.15), inset 0 0 20px rgba(0, 243, 255, 0.05); border-color: var(--neon-cyan); }
        .card-3d h3 { font-size: 1.5rem; margin-bottom: 20px; color: var(--neon-cyan); letter-spacing: 1px; transform: translateZ(20px); }
        .card-3d p { color: var(--text-dim); transform: translateZ(10px); }

        /* DIRECTOR / VISION (Abstract Geometry) */
        .vision-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
        .abstract-cube { width: 300px; height: 300px; position: relative; transform-style: preserve-3d; animation: rotateCube 15s infinite linear; margin: 0 auto; }
        .face { position: absolute; width: 300px; height: 300px; border: 2px solid var(--neon-magenta); background: rgba(255, 0, 60, 0.05); box-shadow: inset 0 0 40px rgba(255, 0, 60, 0.2); }
        .front  { transform: translateZ(150px); border-color: var(--neon-cyan); background: rgba(0, 243, 255, 0.05); }
        .back   { transform: rotateY(180deg) translateZ(150px); }
        .right  { transform: rotateY(90deg) translateZ(150px); }
        .left   { transform: rotateY(-90deg) translateZ(150px); }
        .top    { transform: rotateX(90deg) translateZ(150px); }
        .bottom { transform: rotateX(-90deg) translateZ(150px); }
        @keyframes rotateCube { 0% { transform: rotateX(0deg) rotateY(0deg); } 100% { transform: rotateX(360deg) rotateY(360deg); } }

        .vision-text h2 { font-size: 2.5rem; margin-bottom: 10px; text-shadow: 0 0 10px var(--neon-cyan); }
        .vision-text h3 { color: var(--neon-magenta); font-size: 1rem; margin-bottom: 30px; letter-spacing: 3px; }
        .vision-text p { color: var(--text-dim); font-size: 1.1rem; margin-bottom: 20px; }

        /* FAQ (Neon Accordions) */
        .faq-box { background: var(--glass-bg); margin-bottom: 20px; border: 1px solid rgba(255,255,255,0.05); border-left: 4px solid var(--neon-cyan); transition: var(--transition); }
        .faq-box:hover { border-left-color: var(--neon-magenta); background: rgba(255, 0, 60, 0.05); box-shadow: 0 0 20px rgba(255, 0, 60, 0.1); transform: translateX(10px); }
        .faq-head { padding: 30px; cursor: pointer; font-family: 'Syncopate', sans-serif; font-size: 1rem; color: var(--text-main); }
        .faq-body { padding: 0 30px 30px; color: var(--text-dim); }

        /* TERMINAL FORM (Intake) */
        .form-section { background: rgba(5, 5, 8, 0.9); border-top: 1px solid var(--neon-magenta); box-shadow: 0 -20px 50px rgba(255, 0, 60, 0.1); }
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px; }
        input, select, textarea { width: 100%; padding: 20px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); color: var(--text-main); font-family: 'Space Grotesk', sans-serif; font-size: 1rem; transition: var(--transition); border-radius: 0; }
        input:focus, select:focus, textarea:focus { outline: none; border-color: var(--neon-cyan); box-shadow: inset 0 0 10px rgba(0, 243, 255, 0.2); }
        select option { background: #000; color: #fff; }

        /* FOOTER */
        footer { padding: 100px 8% 50px; background: #000; border-top: 1px solid rgba(255,255,255,0.05); display: grid; grid-template-columns: 2fr 1fr; gap: 80px; position: relative; z-index: 10; }
        .f-brand { font-family: 'Syncopate', sans-serif; font-size: 1.5rem; color: var(--text-main); margin-bottom: 30px; text-shadow: 0 0 10px var(--neon-cyan); }
        .f-data p { color: var(--text-dim); margin-bottom: 15px; font-size: 1rem; }
        .f-data strong { color: var(--neon-cyan); font-weight: 600; margin-right: 10px; }
        .h-row { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px dashed rgba(255,255,255,0.1); color: var(--text-dim); }

        @media (max-width: 1024px) { 
            .vision-wrap, footer { grid-template-columns: 1fr; }
            .form-grid { grid-template-columns: 1fr; }
            .nav-links { display: none; }
            .abstract-cube { transform: scale(0.7); }
        }