/* roulang page: index */
:root {
      --color-primary: #12151A;
      --color-cyan: #00F2B3;
      --color-orange: #FF5A36;
      --color-violet: #5B21B6;
      --color-bg-light: #F8F9FB;
      --color-text-dark: #1F2937;
      --color-text-muted: #6B7280;
    }
    html {
      scroll-behavior: smooth;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }
    body {
      color: #1F2937;
      background-color: #0B0E14;
      line-height: 1.75;
      letter-spacing: 0.02em;
    }
    .neon-border-cyan {
      box-shadow: 0 0 20px rgba(0, 242, 179, 0.15);
      border: 1px solid rgba(0, 242, 179, 0.3);
    }
    .neon-border-orange {
      box-shadow: 0 0 20px rgba(255, 90, 54, 0.2);
      border: 1px solid rgba(255, 90, 54, 0.35);
    }
    .hero-mask {
      background: linear-gradient(180deg, rgba(11, 14, 20, 0.78) 0%, rgba(11, 14, 20, 0.95) 100%);
    }
    .card-hover-trans {
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    }
    .card-hover-trans:hover {
      transform: translateY(-5px);
    }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease-out, opacity 0.3s ease;
      opacity: 0;
    }
    .faq-item.active .faq-answer {
      max-height: 300px;
      opacity: 1;
    }
    .faq-item.active .faq-arrow {
      transform: rotate(180deg);
    }