/* roulang page: index */
:root {
            --brand-gradient: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
            --glow-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.25);
        }
        .brand-gradient-bg { background: var(--brand-gradient); }
        .brand-gradient-text {
            background: var(--brand-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .glow-hover:hover {
            box-shadow: var(--glow-shadow);
            transform: translateY(-3px);
        }
        details summary::-webkit-details-marker { display: none; }

/* roulang page: category2 */
:root {
      --brand-gradient: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
      --glow-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.25);
    }
    .brand-gradient-bg { background: var(--brand-gradient); }
    .brand-gradient-text {
      background: var(--brand-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .glow-hover:hover {
      box-shadow: 0 0 0 1px #8B5CF6, 0 10px 25px -5px rgba(139, 92, 246, 0.25);
    }
    details summary::-webkit-details-marker { display: none; }

/* roulang page: category1 */
:root {
            --brand-gradient: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
            --glow-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.25);
        }
        .brand-gradient-bg { background: var(--brand-gradient); }
        .brand-gradient-text {
            background: var(--brand-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .glow-hover:hover {
            box-shadow: 0 0 0 1px #8B5CF6, var(--glow-shadow);
        }
        /* Details Summary Accordion Animation */
        details[open] summary svg {
            transform: rotate(180deg);
        }
        details summary::-webkit-details-marker {
            display: none;
        }

/* roulang page: category3 */
:root {
            --brand-gradient: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
            --glow-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.25);
        }
        .brand-gradient-bg { background: var(--brand-gradient); }
        .brand-gradient-text {
            background: var(--brand-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .glow-hover:hover {
            box-shadow: 0 0 0 1px #8B5CF6, 0 12px 25px -4px rgba(139, 92, 246, 0.25);
            transform: translateY(-2px);
        }
        details summary::-webkit-details-marker {
            display: none;
        }
        details[open] summary svg {
            transform: rotate(180deg);
        }

/* roulang page: category4 */
:root {
            --brand-gradient: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
            --glow-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.25);
        }
        .brand-gradient-bg { background: var(--brand-gradient); }
        .brand-gradient-text {
            background: var(--brand-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .glow-hover:hover {
            box-shadow: 0 0 0 1px #8B5CF6, 0 12px 28px -5px rgba(139, 92, 246, 0.25);
        }
        details summary::-webkit-details-marker { display: none; }
        details[open] summary svg { transform: rotate(180deg); }