/* roulang page: index */
:root {
      --primary-dark: #0B0F19;
      --cyber-emerald: #00E599;
      --cyber-emerald-hover: #00B377;
      --infra-violet: #6366F1;
      --alert-coral: #FF5C5C;
      --bg-slate: #0F172A;
      --card-bg: rgba(30, 41, 59, 0.7);
      --border-color: rgba(255, 255, 255, 0.08);
    }
    
    body {
      background-color: #070A10;
      color: #E2E8F0;
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }

    .grid-pattern {
      background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 32px 32px;
    }

    .glass-card {
      background: rgba(15, 23, 42, 0.75);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .glass-card:hover {
      border-color: rgba(0, 229, 153, 0.35);
      box-shadow: 0 10px 30px -10px rgba(0, 229, 153, 0.15);
    }

    .glow-emerald {
      box-shadow: 0 0 35px -5px rgba(0, 229, 153, 0.3);
    }

    .text-glow {
      text-shadow: 0 0 16px rgba(0, 229, 153, 0.4);
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .faq-item.active .faq-answer {
      max-height: 280px;
    }

    .faq-item.active .faq-icon {
      transform: rotate(180deg);
    }