/* roulang page: index */
:root {
            --brand-gradient: linear-gradient(135deg, #1E1B4B 0%, #31104B 100%);
            --cta-gradient: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);
        }
        .bg-aurora-gradient { background: var(--brand-gradient); }
        .bg-cta-gradient { background: var(--cta-gradient); }
        .text-gradient {
            background: linear-gradient(135deg, #818CF8 0%, #F472B6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .card-custom {
            border-radius: 1.5rem;
            border: 1px solid rgba(226, 232, 240, 0.8);
            box-shadow: 0 20px 25px -5px rgba(226, 232, 240, 0.5), 0 8px 10px -6px rgba(226, 232, 240, 0.5);
            transition: all 0.3s ease-out;
        }
        .card-custom:hover {
            transform: translateY(-6px);
            box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.15);
        }
        .dark-card-custom {
            border-radius: 1.5rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(30, 41, 59, 0.7);
            backdrop-filter: blur(12px);
            transition: all 0.3s ease-out;
        }
        .dark-card-custom:hover {
            transform: translateY(-6px);
            border-color: rgba(99, 102, 241, 0.4);
            box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.2);
        }