/* roulang page: index */
:root {
            --brand-navy: #004B87;
            --brand-dark: #0B131F;
            --brand-teal: #00A88F;
            --brand-slate: #0F172A;
            --brand-body: #475569;
            --brand-border: #E2E8F0;
            --brand-surface: #F8F9FA;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: var(--font-sans);
            color: var(--brand-body);
            background-color: var(--brand-surface);
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }
        .text-balance {
            text-wrap: balance;
        }
        .card-hover {
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            border: 1px solid var(--brand-border);
            box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04);
        }
        .card-hover:hover {
            transform: translateY(-2px);
            border-color: #CBD5E1;
            box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.08);
        }
        .badge-pulse {
            position: relative;
        }
        .badge-pulse::before {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--brand-teal);
            left: -12px;
            top: 50%;
            transform: translateY(-50%);
            box-shadow: 0 0 0 0 rgba(0, 168, 143, 0.7);
            animation: pulse-ring 2s infinite;
        }
        @keyframes pulse-ring {
            0% { transform: translateY(-50%) scale(0.95); box-shadow: 0 0 0 0 rgba(0, 168, 143, 0.7); }
            70% { transform: translateY(-50%) scale(1); box-shadow: 0 0 0 6px rgba(0, 168, 143, 0); }
            100% { transform: translateY(-50%) scale(0.95); box-shadow: 0 0 0 0 rgba(0, 168, 143, 0); }
        }