/* roulang page: index */
:root {
            --primary: #0B192C;
            --accent: #008B74;
            --highlight: #3A86FF;
            --bg-neutral: #F4F7F6;
            --text-main: #1E293B;
            --text-muted: #64748B;
            --border-color: #E2E8F0;
            --shadow-card: 0 4px 20px -2px rgba(11, 25, 44, 0.05);
            --shadow-hover: 0 12px 28px -4px rgba(0, 139, 116, 0.15);
        }
        * { box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
            color: var(--text-main);
            background-color: #FFFFFF;
            overflow-x: hidden;
        }
        .custom-card {
            background: #FFFFFF;
            border: 1px solid var(--border-color);
            border-radius: 0.75rem;
            box-shadow: var(--shadow-card);
            transition: all 0.25s ease-in-out;
        }
        .custom-card:hover {
            box-shadow: var(--shadow-hover);
            transform: translateY(-2px);
            border-color: rgba(0, 139, 116, 0.3);
        }
        .cta-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            padding: 0 1.5rem;
            font-weight: 600;
            border-radius: 0.5rem;
            transition: all 0.2s ease;
        }
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        .accordion-item.active .accordion-content {
            max-height: 300px;
        }
        .accordion-item.active .accordion-icon {
            transform: rotate(180deg);
        }