/* roulang page: index */
/* 基础重置与设计变量补充 */
    :root {
      --neon: #D71F5B;
      --cyan: #00E5FF;
      --dark: #0A0A0C;
      --card: #141418;
      --surface: #0E0E12;
      --muted: #A1A1AA;
      --light: #F5F5F7;
      --radius-lg: 16px;
      --shadow-glow: 0 0 20px rgba(215,31,91,0.5), 0 0 60px rgba(215,31,91,0.15);
    }
    * {
      box-sizing: border-box;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      background-color: var(--dark);
      color: var(--light);
      font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      line-height: 1.7;
      margin: 0;
      -webkit-font-smoothing: antialiased;
    }
    /* 自定义滚动条 */
    ::-webkit-scrollbar {
      width: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #0A0A0C;
    }
    ::-webkit-scrollbar-thumb {
      background: #D71F5B;
      border-radius: 10px;
    }
    /* 导航底部霓虹线 */
    .nav-glow-line {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, transparent 0%, #D71F5B 50%, transparent 100%);
      opacity: 0.85;
    }
    /* Hero 动态粒子背景 */
    .hero-particles {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }
    .particle {
      position: absolute;
      background: rgba(215,31,91,0.25);
      border-radius: 50%;
      width: 6px;
      height: 6px;
      animation: floatParticle 8s infinite alternate ease-in-out;
    }
    @keyframes floatParticle {
      0% { transform: translateY(0px) translateX(0px); opacity: 0.2; }
      100% { transform: translateY(-120px) translateX(40px); opacity: 0.7; }
    }
    /* 卡片悬浮微光 */
    .card-hover-glow:hover {
      border-color: rgba(215,31,91,0.7);
      box-shadow: 0 20px 40px -15px rgba(215,31,91,0.3);
      transform: translateY(-6px);
    }
    /* FAQ 手风琴动画 */
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, padding 0.4s ease;
    }
    .faq-item.active .faq-answer {
      max-height: 200px;
      padding-top: 1rem;
    }
    .faq-item.active .faq-icon {
      transform: rotate(45deg);
    }
    .faq-item.active .faq-left-bar {
      background: #D71F5B;
      box-shadow: 0 0 12px #D71F5B;
    }
    /* 按钮与交互补充 */
    .btn-primary {
      background: linear-gradient(135deg, #D71F5B 0%, #FF6B35 100%);
      transition: all 0.3s ease;
    }
    .btn-primary:hover {
      box-shadow: 0 0 25px rgba(215,31,91,0.7);
      transform: scale(1.05);
    }
    .btn-ghost {
      border: 1px solid rgba(255,255,255,0.25);
      transition: all 0.3s ease;
    }
    .btn-ghost:hover {
      border-color: #fff;
      background: rgba(255,255,255,0.05);
    }
    /* 移动端汉堡菜单 */
    .mobile-menu {
      transition: transform 0.3s ease, opacity 0.3s ease;
      transform: translateX(100%);
      opacity: 0;
      pointer-events: none;
    }
    .mobile-menu.open {
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
    }
    /* 数据计数动画模拟 */
    .counter {
      font-variant-numeric: tabular-nums;
    }