/* roulang page: index */
:root {
      --color-brand: #00B368;
      --color-brand-hover: #009657;
      --color-accent: #FF7A00;
      --color-accent-hover: #ea580c;
      --color-dark: #0A2518;
      --color-slate-text: #0F172A;
      --color-body-text: #475569;
      --color-muted: #94A3B8;
      --color-bg-light: #F8FAFC;
    }
    
    html {
      scroll-behavior: smooth;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    }

    body {
      background-color: var(--color-bg-light);
      color: var(--color-body-text);
      line-height: 1.7;
    }

    .btn-brand-primary {
      background-color: var(--color-accent);
      color: #ffffff;
      transition: all 0.25s ease-in-out;
    }
    .btn-brand-primary:hover {
      background-color: var(--color-accent-hover);
      transform: translateY(-2px);
      box-shadow: 0 10px 18px -4px rgba(255, 122, 0, 0.35);
    }
    .btn-brand-primary:active {
      transform: scale(0.98);
    }

    .btn-brand-secondary {
      background-color: var(--color-brand);
      color: #ffffff;
      transition: all 0.25s ease-in-out;
    }
    .btn-brand-secondary:hover {
      background-color: var(--color-brand-hover);
      transform: translateY(-2px);
      box-shadow: 0 10px 18px -4px rgba(0, 179, 104, 0.35);
    }

    .badge-label {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.85rem;
      border-radius: 9999px;
      font-size: 0.825rem;
      font-weight: 600;
    }

    .card-modern {
      background: #ffffff;
      border-radius: 1rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .card-modern:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    }

    /* 手风琴动画 */
    .faq-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease-out;
    }
    .faq-item.active .faq-content {
      max-height: 320px;
    }
    .faq-item.active .faq-icon {
      transform: rotate(180deg);
    }

    /* 轮播指示点 */
    .hero-slide {
      display: none;
      opacity: 0;
      transition: opacity 0.6s ease-in-out;
    }
    .hero-slide.active {
      display: block;
      opacity: 1;
    }

    /* 抽屉导航遮罩 */
    .drawer-open {
      overflow: hidden;
    }