:root {
            --primary: #0091ca;
            --primary-dark: #554FD8;
            --secondary: #4c00ff;
            --accent: #FF6B8B;
            --dark: #0A0A14;
            --dark-light: #1A1A24;
            --light: #F5F5F7;
            --text: #E2E2E2;
            --text-secondary: #A0A0B0;
            --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
            --gradient-accent: linear-gradient(135deg, var(--primary), var(--accent));
        }

        html {
            scroll-behavior: smooth;
        }

        .text-color {
            font-size: 28px;
            background: var(--gradient);
            background-clip: text;
            -webkit-text-fill-color: transparent;
        
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #257b86 0%, #007db8 100%);
            color: #f8fafc;
            overflow-x: hidden;
        }
        
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 10px;
        }
        
        ::-webkit-scrollbar-track {
            background: #1e293b;
        }
        
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(45deg, #6366f1, #8b5cf6);
            border-radius: 5px;
        }
        
        /* Gradient text */
        .gradient-text {
            background: linear-gradient(45deg, #00a2ff, #190d35, #40005e);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            background-size: 300% 300%;
            animation: gradient 8s ease infinite;
        }
        
        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        /* Floating animation */
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
        
        .floating {
            animation: float 6s ease-in-out infinite;
        }
        
        /* Glowing effect */
        .glow {
            box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
        }
        
        .glow-hover:hover {
            box-shadow: 0 0 30px rgba(99, 102, 241, 0.5);
        }
        
        /* Particle background */
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        
        .particle {
            position: absolute;
            background: linear-gradient(45deg, #6366f1, #8b5cf6);
            border-radius: 50%;
            opacity: 0.3;
        }
        
        /* Custom shapes */
        .shape-blob {
            background: linear-gradient(45deg, #6366f1, #8b5cf6);
            border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
            opacity: 0.1;
            filter: blur(40px);
        }
        
        /* Typing effect */
        .typing-container {
            display: inline-block;
        }
        
        .typing-text {
            border-right: 3px solid #6366f1;
            padding-right: 5px;
            animation: blink 1s infinite;
        }
        
        @keyframes blink {
            0%, 100% { border-color: transparent; }
            50% { border-color: #6366f1; }
        }