/* roulang page: index */
:root {
            --primary: #1E40AF;
            --accent: #0284C7;
            --inspect: #0D9488;
            --bg-light: #F8FAFC;
            --text-main: #0F172A;
            --text-muted: #334155;
            --radius-card: 16px;
            --shadow-subtle: 0 4px 25px -2px rgba(15, 23, 42, 0.06);
        }
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--bg-light); color: var(--text-main); line-height: 1.6; }
        .card-custom { background: #FFFFFF; border-radius: var(--radius-card); box-shadow: var(--shadow-subtle); border: 1px solid #E2E8F0; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
        .card-custom:hover { transform: translateY(-4px); box-shadow: 0 20px 30px -10px rgba(30, 64, 175, 0.12); border-color: #CBD5E1; }
        .btn-primary { background: linear-gradient(135deg, #1E40AF, #0284C7); color: #fff; transition: all 0.25s ease; min-height: 44px; }
        .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 8px 18px -4px rgba(2, 132, 199, 0.45); }
        .progress-ring { transform: rotate(-90deg); transform-origin: 50% 50%; }
        .faq-content { max-height: 0; overflow: hidden; transition: max-height 0.35s ease-out; }
        .faq-open .faq-content { max-height: 240px; }
        .faq-open .faq-icon { transform: rotate(180deg); }