/* roulang page: index */
:root {
      --primary: #0F52BA;
      --primary-dark: #0A387E;
      --accent: #00D084;
      --dark: #0A0E17;
      --surface: #F8FAFC;
      --border: #E2E8F0;
    }
    html {
      scroll-behavior: smooth;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }
    body {
      background-color: #F8FAFC;
      color: #1E293B;
      overflow-x: hidden;
    }
    .hero-bg {
      background: linear-gradient(135deg, rgba(10, 14, 23, 0.88) 0%, rgba(15, 82, 186, 0.85) 100%), url('/assets/images/9dd663f999f38dc5.webp') center/cover no-repeat;
    }
    .stats-card {
      backdrop-filter: blur(12px);
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
    }
    .card-hover {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .card-hover:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 32px -6px rgba(15, 82, 186, 0.14);
    }
    .tab-content {
      display: none;
    }
    .tab-content.active {
      display: block;
      animation: fadeIn 0.4s ease-in-out;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s cubic-bezier(0, 1, 0, 1);
    }
    .faq-answer.open {
      max-height: 500px;
      transition: max-height 0.35s cubic-bezier(1, 0, 1, 0);
    }
    .badge-soft-blue {
      background-color: rgba(15, 82, 186, 0.08);
      color: #0F52BA;
      border: 1px solid rgba(15, 82, 186, 0.2);
    }