/* roulang page: index */
:root {
            --brand-gradient: linear-gradient(135deg, #1d4ed8 0%, #0284c7 50%, #0d9488 100%);
            --brand-dark-gradient: linear-gradient(145deg, #090d16 0%, #0f172a 100%);
            --glow-border: rgba(226, 232, 240, 0.8);
        }

        .gradient-text {
            background: var(--brand-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .bg-brand-linear {
            background: var(--brand-gradient);
        }

        .card-custom {
            border: 1px solid var(--glow-border);
            box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.04), 0 20px 25px -5px rgba(15, 23, 42, 0.02);
            transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .card-custom:hover {
            transform: translateY(-4px);
            border-color: rgba(2, 132, 199, 0.4);
            box-shadow: 0 20px 35px -8px rgba(2, 132, 199, 0.12);
        }

        .btn-gradient {
            background: var(--brand-gradient);
            transition: all 0.25s ease;
        }

        .btn-gradient:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 22px rgba(29, 78, 216, 0.35);
        }

        .btn-gradient:active {
            transform: scale(0.98);
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease, opacity 0.3s ease;
            opacity: 0;
        }

        .accordion-item.active .accordion-content {
            opacity: 1;
        }

        .accordion-item.active .accordion-icon {
            transform: rotate(180deg);
        }