/* roulang page: index */
:root {
      --bg-dark: #090d16;
      --card-dark: #131d2e;
      --cyan-tech: #06b6d4;
      --teal-glow: #14b8a6;
      --line-subtle: rgba(148, 163, 184, 0.15);
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: #090d16;
      color: #cbd5e1;
      overflow-x: hidden;
      margin: 0;
      padding: 0;
      line-height: 1.6;
    }
    .tech-pattern {
      background-image: radial-gradient(rgba(6, 182, 212, 0.12) 1px, transparent 1px);
      background-size: 28px 28px;
    }
    .glass-nav {
      background: rgba(9, 13, 22, 0.88);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .spec-card-hover {
      transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.28s;
    }
    .spec-card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 32px -8px rgba(6, 182, 212, 0.18);
      border-color: rgba(6, 182, 212, 0.5);
    }
    .hero-mask {
      background: linear-gradient(180deg, rgba(9, 13, 22, 0.75) 0%, rgba(9, 13, 22, 0.95) 100%);
    }
    .accordion-content {
      transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
    }
    .accordion-item.active .accordion-content {
      max-height: 280px;
      opacity: 1;
    }
    .accordion-item.active .accordion-arrow {
      transform: rotate(180deg);
    }