/* roulang page: index */
:root {
      --primary-green: #00D084;
      --primary-blue: #0EA5E9;
      --deep-dark: #0B132B;
      --panel-navy: #1C2541;
      --bg-slate: #F8FAFC;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.68;
      background-color: var(--bg-slate);
      color: #1E293B;
      overflow-x: hidden;
    }
    .hero-banner-bg {
      background-image: linear-gradient(135deg, rgba(11, 19, 43, 0.92) 0%, rgba(28, 37, 65, 0.88) 100%), url('/assets/images/c72dccedfc2427cd.jpg');
      background-size: cover;
      background-position: center;
    }
    .badge-pill {
      display: inline-flex;
      align-items: center;
      padding: 0.35rem 0.85rem;
      border-radius: 9999px;
      font-size: 0.825rem;
      font-weight: 600;
      letter-spacing: 0.02em;
    }
    .gradient-border-card {
      position: relative;
      background: #FFFFFF;
      border-radius: 1.25rem;
      transition: all 0.28s ease;
    }
    .gradient-border-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 36px -6px rgba(14, 165, 233, 0.18);
    }
    .code-box {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 0.875rem;
      line-height: 1.6;
    }