/* roulang page: index */
:root {
            --color-bg-main: #F8FAFC;
            --color-text-main: #0F172A;
            --color-text-muted: #475569;
            --color-border: #E2E8F0;
            --radius-md: 0.5rem;
            --radius-lg: 0.75rem;
            --radius-xl: 1rem;
            --shadow-subtle: 0 4px 20px -4px rgba(15, 23, 42, 0.05);
            --shadow-hover: 0 12px 30px -8px rgba(15, 23, 42, 0.12);
        }

        body {
            background-color: var(--color-bg-main);
            color: var(--color-text-main);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .custom-card {
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
            box-shadow: var(--shadow-subtle);
        }
        .custom-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
        }

        .metric-number {
            font-variant-numeric: tabular-nums;
            letter-spacing: -0.03em;
        }

        /* FAQ Accordion Transitions */
        .faq-content {
            transition: max-height 0.35s ease-out, opacity 0.3s ease-out;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
        }
        .faq-item.active .faq-content {
            max-height: 300px;
            opacity: 1;
        }
        .faq-item.active .faq-icon {
            transform: rotate(180deg);
        }