/* roulang page: index */
:root {
      --color-primary-start: #1E3A8A;
      --color-primary-end: #2563EB;
      --color-accent: #F97316;
      --color-accent-light: #FB923C;
      --bg-base: #F8FAFC;
      --card-radius: 20px;
    }
    html { scroll-behavior: smooth; }
    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--bg-base); color: #334155; }
    .brand-gradient { background: linear-gradient(135deg, var(--color-primary-start), var(--color-primary-end)); }
    .accent-gradient { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light)); }
    .card-shadow { box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05); }
    .card-shadow:hover { box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.12), 0 8px 10px -6px rgba(37, 99, 235, 0.08); transform: translateY(-4px); }
    .glass-nav { backdrop-filter: blur(12px); background-color: rgba(255, 255, 255, 0.94); border-bottom: 1px solid rgba(226, 232, 240, 0.8); }
    .badge-soft { background: rgba(37, 99, 235, 0.08); color: #2563EB; border: 1px solid rgba(37, 99, 235, 0.2); }
    .badge-accent { background: rgba(249, 115, 22, 0.1); color: #EA580C; border: 1px solid rgba(249, 115, 22, 0.25); }
    .accordion-content { transition: max-height 0.3s ease-out, opacity 0.2s ease-out; }
    .accordion-item[open] .fa-chevron-down { transform: rotate(180deg); }