@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&display=swap');
        
        :root {
            --cyber-blue: #00d4ff;
            --cyber-pink: #ff0080;
            --cyber-green: #39ff14;
            --cyber-purple: #b300ff;
            --cyber-orange: #ff3300;
            --cyber-yellow: #ffff00;
            --cyber-violet: #8a00ff;
            --cyber-lime: #ccff00;
        }
        
        * {
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Rajdhani', sans-serif;
            background: 
                linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)),
                url('https://preview.redd.it/i50tlz0frw881.jpg?width=640&crop=smart&auto=webp&s=b2ca22d81b586b8af2ed79b3cbbcbabe08426749');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            color: #00ff41;
            overflow-x: hidden;
            min-height: 100vh;
            text-shadow: 
                2px 2px 0px #000000,
                -2px -2px 0px #000000,
                2px -2px 0px #000000,
                -2px 2px 0px #000000,
                0 0 15px #00ff41,
                0 0 25px #00ff41;
            transition: all 0.5s ease;
        }
        
        /* Ensure all sections have the background */
        section, header, footer {
            position: relative;
        }
        
        section::before, header::before, footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: inherit;
            z-index: -1;
        }
        

        
        .cyber-grid {
            /* Grid pattern removed - only cyberpunk city background */
        }
        
        /* Grid animations removed */
        
        .neon-text {
            text-shadow: 
                2px 2px 0px #000000,
                -2px -2px 0px #000000,
                2px -2px 0px #000000,
                -2px 2px 0px #000000,
                0 0 15px #00ff41,
                0 0 25px #00ff41,
                0 0 35px #00ff41;
        }
        
        .cyber-border {
            border: 3px solid transparent;
            background: linear-gradient(45deg, var(--cyber-blue), var(--cyber-pink), var(--cyber-purple), var(--cyber-lime)) border-box;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: exclude;
            mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            position: relative;
        }
        
        .cyber-border::before {
            content: '';
            position: absolute;
            inset: -3px;
            padding: 3px;
            background: linear-gradient(45deg, var(--cyber-blue), var(--cyber-pink), var(--cyber-purple), var(--cyber-lime));
            border-radius: inherit;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            animation: borderRotate 4s linear infinite;
        }
        
        @keyframes borderRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .glitch {
            position: relative;
            animation: glitch 2s infinite;
        }
        
        @keyframes glitch {
            0%, 100% { transform: translate(0); }
            20% { transform: translate(-2px, 2px); }
            40% { transform: translate(-2px, -2px); }
            60% { transform: translate(2px, 2px); }
            80% { transform: translate(2px, -2px); }
        }
        
        .floating {
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        .pulse-border {
            animation: pulseBorder 2s infinite;
        }
        
        @keyframes pulseBorder {
            0% { 
                box-shadow: 
                    0 0 20px var(--cyber-blue),
                    0 0 40px rgba(0, 212, 255, 0.3),
                    inset 0 0 20px rgba(0, 212, 255, 0.1);
            }
            33% { 
                box-shadow: 
                    0 0 30px var(--cyber-pink),
                    0 0 60px rgba(255, 0, 128, 0.4),
                    inset 0 0 30px rgba(255, 0, 128, 0.1);
            }
            66% { 
                box-shadow: 
                    0 0 25px var(--cyber-purple),
                    0 0 50px rgba(179, 0, 255, 0.4),
                    inset 0 0 25px rgba(179, 0, 255, 0.1);
            }
            100% { 
                box-shadow: 
                    0 0 20px var(--cyber-blue),
                    0 0 40px rgba(0, 212, 255, 0.3),
                    inset 0 0 20px rgba(0, 212, 255, 0.1);
            }
        }
        
        .service-card {
            background: 
                linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 20, 0, 0.9) 100%);
            backdrop-filter: blur(15px);
            border: 2px solid #00ff41;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0, 255, 65, 0.2);
        }
        
        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 0, 128, 0.1), transparent);
            transition: left 0.6s;
        }
        
        .service-card:hover::before {
            left: 100%;
        }
        
        .service-card:hover {
            transform: translateY(-15px) scale(1.03);
            box-shadow: 
                0 25px 50px rgba(0, 255, 65, 0.4),
                0 0 40px rgba(0, 255, 65, 0.3),
                inset 0 1px 0 rgba(0, 255, 65, 0.2);
            border-color: #39ff14;
            background: 
                linear-gradient(135deg, rgba(0, 20, 0, 0.95) 0%, rgba(0, 40, 0, 0.9) 100%);
        }
        
        .converter-display {
            background: 
                linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(0, 20, 0, 0.9));
            border: 2px solid #00ff41;
            font-family: 'Orbitron', monospace;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 30px rgba(0, 255, 65, 0.3);
        }
        
        .converter-display::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: 
                radial-gradient(circle, rgba(255,0,128,0.1) 0%, transparent 70%);
            animation: converterGlow 6s ease-in-out infinite;
        }
        
        @keyframes converterGlow {
            0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.5; }
            50% { transform: rotate(180deg) scale(1.1); opacity: 0.8; }
        }
        
        .btn-cyber {
            background: linear-gradient(45deg, #00ff41, #39ff14, #00cc33);
            border: 2px solid #00ff41;
            color: #000000;
            font-weight: 900;
            text-transform: uppercase;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            text-shadow: 0 0 10px rgba(0,0,0,0.8);
            box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
        }
        
        .btn-cyber:hover {
            transform: scale(1.08) translateY(-2px);
            box-shadow: 
                0 0 40px #00ff41,
                0 0 60px #39ff14,
                0 10px 30px rgba(0,0,0,0.5);
            border-color: #39ff14;
            background: linear-gradient(45deg, #39ff14, #00ff41, #00cc33);
        }
        
        .btn-cyber::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
            transition: left 0.6s;
        }
        
        .btn-cyber:hover::before {
            left: 100%;
        }
        
        .btn-cyber::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(45deg, var(--cyber-lime), var(--cyber-yellow));
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .btn-cyber:active::after {
            opacity: 0.3;
        }
        
        .matrix-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
            opacity: 0.4;
        }
        
        /* Cyberpunk Scrollbar Styles */
        ::-webkit-scrollbar {
            width: 12px;
        }
        
        ::-webkit-scrollbar-track {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 20, 0, 0.8));
            border-radius: 10px;
            border: 1px solid rgba(0, 255, 65, 0.2);
        }
        
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, var(--cyber-blue), var(--cyber-green), var(--cyber-pink));
            border-radius: 10px;
            border: 2px solid rgba(0, 0, 0, 0.3);
            box-shadow: 
                0 0 10px var(--cyber-blue),
                0 0 20px rgba(0, 212, 255, 0.3),
                inset 0 0 10px rgba(255, 255, 255, 0.1);
            animation: scrollGlow 3s ease-in-out infinite;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, var(--cyber-pink), var(--cyber-purple), var(--cyber-lime));
            box-shadow: 
                0 0 15px var(--cyber-pink),
                0 0 30px rgba(255, 0, 128, 0.5),
                inset 0 0 15px rgba(255, 255, 255, 0.2);
            transform: scale(1.1);
        }
        
        ::-webkit-scrollbar-thumb:active {
            background: linear-gradient(180deg, var(--cyber-lime), var(--cyber-yellow), var(--cyber-orange));
            box-shadow: 
                0 0 20px var(--cyber-lime),
                0 0 40px rgba(204, 255, 0, 0.6);
        }
        
        ::-webkit-scrollbar-corner {
            background: rgba(0, 0, 0, 0.9);
        }
        
        @keyframes scrollGlow {
            0%, 100% { 
                box-shadow: 
                    0 0 10px var(--cyber-blue),
                    0 0 20px rgba(0, 212, 255, 0.3),
                    inset 0 0 10px rgba(255, 255, 255, 0.1);
            }
            33% { 
                box-shadow: 
                    0 0 15px var(--cyber-green),
                    0 0 25px rgba(57, 255, 20, 0.4),
                    inset 0 0 15px rgba(255, 255, 255, 0.15);
            }
            66% { 
                box-shadow: 
                    0 0 12px var(--cyber-pink),
                    0 0 22px rgba(255, 0, 128, 0.35),
                    inset 0 0 12px rgba(255, 255, 255, 0.12);
            }
        }
        
        /* Firefox Scrollbar */
        html {
            scrollbar-width: thin;
            scrollbar-color: var(--cyber-blue) rgba(0, 0, 0, 0.9);
        }
        
        @media (max-width: 768px) {
            /* Mobile optimization */
            
            body {
                background: 
                    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)),
                    url('https://i.pinimg.com/1200x/6d/4b/9a/6d4b9af9bb6b66e09a30e378a8d05426.jpg');
                background-size: auto; /* Native resolution without scaling */
                background-position: center center;
                background-repeat: repeat; /* Creates seamless pattern */
                background-attachment: scroll; /* Better performance on mobile */
                min-height: 100vh;
                text-shadow: 
                    1px 1px 0px #000000,
                    -1px -1px 0px #000000,
                    1px -1px 0px #000000,
                    -1px 1px 0px #000000,
                    0 0 5px #00ff41;
            }
            
            /* Mobile background at native resolution */
            
            ::-webkit-scrollbar {
                width: 6px;
            }
            
            .neon-text {
                text-shadow: 
                    1px 1px 0px #000000,
                    -1px -1px 0px #000000,
                    1px -1px 0px #000000,
                    -1px 1px 0px #000000,
                    0 0 8px #00ff41,
                    0 0 12px #00ff41;
            }
            
            h1, h2, h3, h4, h5, h6 {
                text-shadow: 
                    1px 1px 0px #000000,
                    -1px -1px 0px #000000,
                    1px -1px 0px #000000,
                    -1px 1px 0px #000000,
                    0 0 8px currentColor !important;
            }
            
            /* Mobile hero section */
            .floating {
                animation: none; /* Disable floating animation on mobile */
            }
            
            .glitch {
                animation: none; /* Disable glitch effect on mobile */
            }
            
            /* Mobile service cards */
            .service-card {
                backdrop-filter: none; /* Better performance */
                background: rgba(0, 0, 0, 0.9);
            }
            
            .service-card::before {
                display: none; /* Disable hover effects on mobile */
            }
            
            .service-card:hover {
                transform: none; /* Disable hover transforms on mobile */
            }
            
            /* Mobile converter */
            .converter-display::before {
                display: none; /* Disable background animation */
            }
            
            /* Mobile buttons */
            .btn-cyber::before {
                display: none; /* Disable button animations on mobile */
            }
            
            .btn-cyber:hover {
                transform: scale(1.02); /* Subtle hover effect */
            }
            
            /* Mobile text sizing */
            .text-5xl {
                font-size: 2.5rem !important;
            }
            
            .text-8xl {
                font-size: 3.5rem !important;
            }
            
            .text-4xl {
                font-size: 2rem !important;
            }
            
            .text-7xl {
                font-size: 3rem !important;
            }
            
            .text-2xl {
                font-size: 1.5rem !important;
            }
            
            .text-3xl {
                font-size: 1.75rem !important;
            }
            
            .text-5xl {
                font-size: 2.25rem !important;
            }
            
            /* Mobile spacing */
            .py-20 {
                padding-top: 3rem !important;
                padding-bottom: 3rem !important;
            }
            
            .mb-16 {
                margin-bottom: 2rem !important;
            }
            
            .mb-8 {
                margin-bottom: 1.5rem !important;
            }
            
            /* Mobile grid */
            .grid-cols-1 {
                gap: 1rem !important;
            }
            
            /* Mobile navigation */
            nav {
                padding: 1rem !important;
            }
            
            /* Mobile converter inputs */
            #mxnInput, #usdInput {
                font-size: 1.25rem !important;
                padding: 0.75rem !important;
            }
            
            /* Disable pulse animation on mobile */
            .pulse-border {
                animation: none;
                box-shadow: 0 0 15px rgba(0, 255, 65, 0.3);
            }
        }