/* Custom Color Palette */
        :root {
            --color1: #131417;
            --color2: #1b383f;
            --color3: #2c6375;
            --color4: #429bb0;
            --color5: #59dbf6;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--color1);
            color: #ffffff;
            line-height: 1.6;
        }
        
        /* Custom Components */
        .bg-primary { background-color: var(--color1); }
        .bg-secondary { background-color: var(--color2); }
        .bg-tertiary { background-color: var(--color3); }
        .bg-accent { background-color: var(--color4); }
        .bg-highlight { background-color: var(--color5); }
        
        .text-primary { color: var(--color1); }
        .text-secondary { color: var(--color2); }
        .text-tertiary { color: var(--color3); }
        .text-accent { color: var(--color4); }
        .text-highlight { color: var(--color5); }
        
        .border-accent { border-color: var(--color4); }
        .border-highlight { border-color: var(--color5); }
        
        /* Hover effects */
        .hover-accent:hover { background-color: var(--color4); }
        .hover-highlight:hover { background-color: var(--color5); }
        .hover-text-accent:hover { color: var(--color4); }
        .hover-text-highlight:hover { color: var(--color5); }
        
        /* Custom animations */
        .fade-in {
            animation: fadeIn 0.8s ease-in;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .card-hover {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }
        
        /* Gradient backgrounds */
        .gradient-bg {
            background: linear-gradient(135deg, var(--color2) 0%, var(--color3) 100%);
        }
        
        .gradient-accent {
            background: linear-gradient(135deg, var(--color4) 0%, var(--color5) 100%);
        }
        
        /* Form styling */
        .form-input {
            background-color: var(--color2);
            border: 2px solid var(--color3);
            color: white;
            transition: all 0.3s ease;
        }
        
        .form-input:focus {
            outline: none;
            border-color: var(--color4);
            box-shadow: 0 0 0 3px rgba(89, 219, 246, 0.1);
        }
        
        /* Navigation */
        .nav-link {
            position: relative;
            transition: color 0.3s ease;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 0;
            background-color: var(--color5);
            transition: width 0.3s ease;
        }
        
        .nav-link:hover::after {
            width: 100%;
        }