/* roulang page: index */
:root {
      --primary: #00F0A8;
      --primary-dark: #05D6A0;
      --accent: #3A6DF0;
      --bg-dark: #0A0F1D;
      --surface: #131B2E;
      --surface-border: rgba(255, 255, 255, 0.08);
    }
    body {
      background-color: var(--bg-dark);
      color: #F8FAFC;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .clip-slant {
      clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
    }
    @media (max-width: 768px) {
      .clip-slant {
        clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
      }
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 30%, rgba(0, 240, 168, 0.15) 0%, rgba(58, 109, 240, 0.08) 50%, rgba(10, 15, 29, 0) 80%);
    }
    .glass-card {
      background: rgba(19, 27, 46, 0.75);
      backdrop-filter: blur(12px);
      border: 1px solid var(--surface-border);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .glass-card:hover {
      border-color: rgba(0, 240, 168, 0.4);
      transform: translateY(-3px);
      box-shadow: 0 12px 30px -10px rgba(0, 240, 168, 0.15);
    }
    .mono-num {
      font-family: 'JetBrains Mono', monospace;
    }
    .custom-scrollbar::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #1A243B;
      border-radius: 4px;
    }