/* roulang page: index */
:root {
      --primary: #0d9488;
      --primary-dark: #0f766e;
      --primary-light: #ccfbf1;
      --secondary: #0284c7;
      --secondary-dark: #0369a1;
      --accent: #d97706;
      --dark-slate: #0f172a;
      --bg-surface: #f8fafc;
      --card-border: rgba(13, 148, 136, 0.15);
      --card-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08);
      --card-shadow-hover: 0 20px 35px -10px rgba(13, 148, 136, 0.18);
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg-surface);
      color: #334155;
      line-height: 1.7;
    }
    .hero-gradient-overlay {
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(13, 148, 136, 0.82) 60%, rgba(2, 132, 199, 0.75) 100%);
    }
    .custom-card {
      background: #ffffff;
      border: 1px solid var(--card-border);
      box-shadow: var(--card-shadow);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .custom-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--card-shadow-hover);
      border-color: rgba(13, 148, 136, 0.35);
    }
    .badge-capsule {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      font-size: 0.8125rem;
      font-weight: 600;
    }
    .badge-primary {
      background-color: #f0fdfa;
      color: #0d9488;
      border: 1px solid #99f6e4;
    }
    .badge-amber {
      background-color: #fffbeb;
      color: #b45309;
      border: 1px solid #fde68a;
    }
    .faq-accordion-header[aria-expanded="true"] .chevron-icon {
      transform: rotate(180deg);
    }