/* roulang page: index */
:root {
      --primary: #0b0f19;
      --graphite: #111827;
      --accent-cyan: #06b6d4;
      --accent-violet: #8b5cf6;
      --bg-ice: #f8fafc;
      --text-main: #0f172a;
      --text-muted: #64748b;
      --border-subtle: #e2e8f0;
      --radius-box: 12px;
    }
    
    html {
      scroll-behavior: smooth;
    }
    body {
      color: #1e293b;
      background-color: #ffffff;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .custom-ring {
      background: conic-gradient(#06b6d4 0% 88%, #1e293b 88% 100%);
    }
    .nav-glass {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      background-color: rgba(255, 255, 255, 0.92);
    }
    .nav-drawer {
      transition: transform 0.3s ease-in-out;
    }
    .tab-btn.active {
      background-color: #06b6d4;
      color: #ffffff;
      border-color: #06b6d4;
    }
    .faq-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease;
    }
    .faq-item.open .faq-content {
      max-height: 280px;
    }
    .faq-item.open .faq-icon {
      transform: rotate(180deg);
    }