/* roulang page: index */
:root {
            --brand-gradient: linear-gradient(135deg, #6366F1 0%, #EC4899 50%, #F97316 100%);
            --glow-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.3);
        }
        html { scroll-behavior: smooth; }
        .bg-brand-gradient { background: var(--brand-gradient); }
        .text-brand-gradient {
            background: var(--brand-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .card-hover-effect {
            transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
        }
        .card-hover-effect:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
        }