/* roulang page: index */
:root {
      --color-brand-black: #12151A;
      --color-brand-charcoal: #1E232B;
      --color-brand-dark: #0F1115;
      --color-brand-green: #00E599;
      --color-brand-green-hover: #00CC88;
      --color-brand-lightgreen: #E6FAF3;
      --color-bg-gray: #F8F9FA;
      --color-text-main: #111827;
      --color-text-muted: #4B5563;
      --color-border: rgba(0, 0, 0, 0.08);
      --radius-sm: 4px;
      --radius-md: 8px;
      --shadow-card: 0 2px 8px -2px rgba(18, 21, 26, 0.06), 0 1px 4px -1px rgba(18, 21, 26, 0.04);
      --shadow-hover: 0 12px 24px -6px rgba(18, 21, 26, 0.12), 0 4px 10px -2px rgba(0, 229, 153, 0.15);
    }
    body {
      background-color: var(--color-bg-gray);
      color: var(--color-text-main);
      overflow-x: hidden;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }
    .btn-glow {
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .btn-glow:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 229, 153, 0.3);
    }
    .card-hover {
      transition: all 0.25s ease;
      border: 1px solid var(--color-border);
    }
    .card-hover:hover {
      border-color: rgba(0, 229, 153, 0.5);
      transform: translateY(-3px);
      box-shadow: var(--shadow-hover);
    }
    .faq-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease, opacity 0.25s ease;
      opacity: 0;
    }
    .faq-item.active .faq-content {
      max-height: 280px;
      opacity: 1;
    }
    .faq-item.active .faq-icon {
      transform: rotate(180deg);
      color: #00E599;
    }