/* roulang page: index */
/* 设计变量与补充样式 */
    :root {
      --deep-space: #0A0E17;
      --dark-card: #111827;
      --electric-cyan: #00F0FF;
      --competitive-red: #FF003C;
      --victory-gold: #FFD700;
      --text-light: #D1D5DB;
      --text-muted: #9CA3AF;
      --border-radius-card: 12px;
    }

    body {
      background-color: var(--deep-space);
      color: var(--text-light);
      font-family: 'Noto Sans SC', sans-serif;
      margin: 0;
      box-sizing: border-box;
    }

    *, *::before, *::after {
      box-sizing: inherit;
    }

    /* 自定义滚动条 */
    ::-webkit-scrollbar {
      width: 6px;
    }
    ::-webkit-scrollbar-track {
      background: #0A0E17;
    }
    ::-webkit-scrollbar-thumb {
      background: #00F0FF;
      border-radius: 3px;
    }

    /* 导航透明→实色切换 */
    .navbar-glass {
      background: rgba(10, 14, 23, 0.8);
      backdrop-filter: blur(12px);
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }
    .navbar-solid {
      background: rgba(10, 14, 23, 0.95);
      box-shadow: 0 4px 20px rgba(0, 240, 255, 0.1);
    }

    /* 霓虹发光效果 */
    .glow-cyan {
      box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
      transition: box-shadow 0.3s;
    }
    .glow-cyan:hover {
      box-shadow: 0 0 25px rgba(0, 240, 255, 0.8);
    }
    .glow-red {
      box-shadow: 0 0 15px rgba(255, 0, 60, 0.5);
    }
    .glow-red:hover {
      box-shadow: 0 0 25px rgba(255, 0, 60, 0.8);
    }

    /* 卡片边框发光 */
    .card-glow {
      border: 1px solid rgba(0, 240, 255, 0.25);
      transition: border 0.3s, box-shadow 0.3s, background 0.3s;
    }
    .card-glow:hover {
      border-color: var(--electric-cyan);
      box-shadow: 0 0 25px rgba(0, 240, 255, 0.5);
      background: rgba(17, 24, 39, 0.9);
    }

    /* 服务矩阵左上角大卡片 */
    .service-main-card {
      grid-row: span 2;
    }

    /* 数据看板中间高卡片 */
    .metric-tall {
      min-height: 180px;
    }

    /* FAQ 手风琴样式 */
    .faq-item {
      border: 1px solid rgba(0, 240, 255, 0.2);
      border-radius: 8px;
      margin-bottom: 12px;
      background: rgba(17, 24, 39, 0.6);
      backdrop-filter: blur(8px);
      transition: all 0.3s;
    }
    .faq-item.active {
      border-color: var(--electric-cyan);
      background: rgba(17, 24, 39, 0.9);
      box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
    }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
    }

    /* 像素装饰线 */
    .pixel-divider {
      height: 4px;
      background: repeating-linear-gradient(90deg, #00F0FF 0px, #00F0FF 8px, transparent 8px, transparent 16px);
      opacity: 0.7;
    }

    /* 动态数字跳动 */
    .count-up {
      font-variant-numeric: tabular-nums;
    }

    /* 移动端底部导航 */
    .mobile-nav {
      background: rgba(10, 14, 23, 0.95);
      backdrop-filter: blur(20px);
      border-top: 1px solid rgba(0, 240, 255, 0.3);
    }

    @media (max-width: 768px) {
      .hero-title {
        font-size: 2.8rem;
      }
    }