/* roulang page: index */
:root {
      --primary-color: #0D1117;
      --accent-color: #059669;
      --bg-light: #F8F9FA;
      --card-border: #E2E8F0;
      --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    body {
      background-color: #FFFFFF;
      color: #1E293B;
      font-family: system-ui, -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }
    .custom-container {
      max-width: 1240px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
    .chip-card {
      transition: var(--transition-smooth);
      border: 1px solid var(--card-border);
    }
    .chip-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.08);
      border-color: #CBD5E1;
    }
    .custom-section {
      padding-top: 5rem;
      padding-bottom: 5rem;
    }
    @media (max-width: 768px) {
      .custom-section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
      }
    }
    .focus-ring:focus {
      outline: 2px solid #059669;
      outline-offset: 2px;
    }