/* roulang page: index */
:root {
      --color-bg-deep: #0a1128;
      --color-surface-slate: #0f172a;
      --color-card-border: rgba(148, 163, 184, 0.15);
      --color-cyan-glow: rgba(6, 182, 212, 0.35);
      --color-blue-accent: #2563eb;
      --radius-card-large: 1.5rem;
      --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    body {
      background-color: #0b1120;
      color: #cbd5e1;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* 工业质感渐变光晕背景 */
    .industrial-hero-glow {
      background: radial-gradient(circle at 75% 30%, rgba(6, 182, 212, 0.18) 0%, rgba(37, 99, 235, 0.08) 40%, transparent 75%),
                  radial-gradient(circle at 20% 80%, rgba(16, 185, 129, 0.06) 0%, transparent 50%);
    }

    .badge-pill-cyan {
      display: inline-flex;
      align-items: center;
      padding: 0.3rem 0.85rem;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.025em;
      border-radius: 9999px;
      background: rgba(6, 182, 212, 0.12);
      color: #38bdf8;
      border: 1px solid rgba(56, 189, 248, 0.35);
      box-shadow: 0 0 12px rgba(6, 182, 212, 0.15);
    }

    .badge-pill-emerald {
      display: inline-flex;
      align-items: center;
      padding: 0.3rem 0.85rem;
      font-size: 0.75rem;
      font-weight: 600;
      border-radius: 9999px;
      background: rgba(16, 185, 129, 0.12);
      color: #34d399;
      border: 1px solid rgba(52, 211, 153, 0.35);
    }

    .badge-pill-amber {
      display: inline-flex;
      align-items: center;
      padding: 0.3rem 0.85rem;
      font-size: 0.75rem;
      font-weight: 600;
      border-radius: 9999px;
      background: rgba(245, 158, 11, 0.12);
      color: #fbbf24;
      border: 1px solid rgba(251, 191, 36, 0.35);
    }

    .tech-card {
      background: rgba(15, 23, 42, 0.75);
      border: 1px solid rgba(148, 163, 184, 0.16);
      backdrop-filter: blur(12px);
      transition: var(--transition-smooth);
    }

    .tech-card:hover {
      transform: translateY(-5px);
      border-color: rgba(6, 182, 212, 0.45);
      box-shadow: 0 15px 30px -10px rgba(6, 182, 212, 0.18);
    }

    .tech-card-light {
      background: #ffffff;
      border: 1px solid rgba(226, 232, 240, 0.9);
      transition: var(--transition-smooth);
    }

    .tech-card-light:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 32px -10px rgba(15, 23, 42, 0.08);
      border-color: rgba(6, 182, 212, 0.6);
    }

    .gradient-brand-btn {
      background: linear-gradient(135deg, #06b6d4 0%, #2563eb 100%);
      transition: all 0.25s ease;
    }

    .gradient-brand-btn:hover {
      opacity: 0.92;
      box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
      transform: translateY(-1px);
    }

    .stat-number-glow {
      text-shadow: 0 0 24px rgba(6, 182, 212, 0.3);
    }

    /* 手风琴折叠平滑过渡 */
    details summary::-webkit-details-marker {
      display: none;
    }