/* roulang page: index */
:root {
            --color-primary: #1E40AF;
            --color-secondary: #0284C7;
            --color-accent: #D97706;
            --color-bg: #F8FAFC;
            --color-surface: #FFFFFF;
            --color-text-main: #0F172A;
            --color-text-muted: #64748B;
            --color-border: #E2E8F0;
            --radius-box: 0.75rem;
            --shadow-subtle: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
            --shadow-elevation: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
        }

        body {
            background-color: var(--color-bg);
            color: var(--color-text-main);
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        .custom-card-shadow {
            box-shadow: var(--shadow-subtle);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .custom-card-shadow:hover {
            box-shadow: var(--shadow-elevation);
            transform: translateY(-4px);
        }

        .section-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.35rem 0.85rem;
            background-color: #EFF6FF;
            color: #1D4ED8;
            border: 1px solid #BFDBFE;
            border-radius: 9999px;
            font-size: 0.875rem;
            font-weight: 600;
            letter-spacing: 0.025em;
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease-out, padding 0.35s ease;
        }
        .accordion-content.open {
            max-height: 240px;
            padding-bottom: 1.25rem;
        }