/* roulang page: index */
:root {
            --brand-navy: #0F2942;
            --brand-navy-deep: #0A1929;
            --brand-accent: #F28C28;
            --brand-accent-hover: #E07A16;
            --brand-orange: #FF6B35;
            --bg-light: #F8FAFC;
            --text-main: #0B192C;
            --text-body: #334155;
            --text-muted: #64748B;
            --border-color: #E2E8F0;
        }
        html { scroll-behavior: smooth; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--text-body); background-color: #ffffff; }
        .text-gradient { background: linear-gradient(135deg, #0F2942 0%, #1E4E79 50%, #F28C28 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .bg-gradient-brand { background: linear-gradient(135deg, #0F2942 0%, #163A5F 100%); }
        .bg-gradient-accent { background: linear-gradient(135deg, #F28C28 0%, #FF6B35 100%); }
        .card-custom { border-radius: 20px; border: 1px solid var(--border-color); background: #ffffff; transition: all 0.25s ease-in-out; box-shadow: 0 4px 20px -2px rgba(15, 41, 66, 0.05); }
        .card-custom:hover { transform: translateY(-4px); box-shadow: 0 20px 30px -10px rgba(15, 41, 66, 0.12); border-color: rgba(242, 140, 40, 0.4); }
        .badge-pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; line-height: 1.25rem; }
        .details-animated details summary::-webkit-details-marker { display: none; }
        .details-animated details[open] summary svg { transform: rotate(180deg); }