/* roulang page: index */
:root {
      --color-brand-start: #0052FF;
      --color-brand-end: #00D2D3;
      --color-accent-gold: #FF9F1C;
      --color-accent-green: #10B981;
      --color-bg-mist: #F8FAFC;
      --color-obsidian: #0B1120;
    }
    body {
      background-color: var(--color-bg-mist);
      color: #1E293B;
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
      overflow-x: hidden;
    }
    .badge-pill {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
      line-height: 1rem;
      background: rgba(0, 82, 255, 0.08);
      color: #0052FF;
      border: 1px solid rgba(0, 82, 255, 0.2);
    }
    .badge-gold {
      background: rgba(255, 159, 28, 0.12);
      color: #D97706;
      border: 1px solid rgba(255, 159, 28, 0.3);
    }
    .badge-green {
      background: rgba(16, 185, 129, 0.12);
      color: #059669;
      border: 1px solid rgba(16, 185, 129, 0.3);
    }
    .tech-card {
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .tech-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 25px -5px rgba(0, 82, 255, 0.08), 0 8px 10px -6px rgba(0, 82, 255, 0.04);
      border-color: rgba(0, 82, 255, 0.3);
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 30%, rgba(0, 210, 211, 0.15) 0%, rgba(0, 82, 255, 0.08) 50%, transparent 75%);
    }