/* roulang page: index */
:root {
      --bg-dark: #0D0F17;
      --bg-surface: #151824;
      --bg-card: #1E2235;
      --border-color: #2D334D;
      --primary-purple: #7C3AED;
      --primary-indigo: #6366F1;
      --accent-gold: #F59E0B;
      --status-green: #10B981;
      --text-main: #F3F4F6;
      --text-muted: #9CA3AF;
    }
    body {
      background-color: var(--bg-dark);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.75;
      overflow-x: hidden;
    }
    .custom-scroll::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    .custom-scroll::-webkit-scrollbar-track {
      background: #0D0F17;
    }
    .custom-scroll::-webkit-scrollbar-thumb {
      background: #2D334D;
      border-radius: 3px;
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 30%, rgba(124, 58, 237, 0.22) 0%, rgba(13, 15, 23, 0) 70%);
    }
    .card-hover {
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 28px -6px rgba(124, 58, 237, 0.35);
      border-color: rgba(245, 158, 11, 0.45);
    }
    .btn-shine {
      position: relative;
      overflow: hidden;
    }
    .btn-shine::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -60%;
      width: 40%;
      height: 200%;
      background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
      transform: rotate(25deg);
      transition: all 0.65s;
    }
    .btn-shine:hover::after {
      left: 130%;
    }