/* roulang page: index */
:root {
      --color-bg: #0A0D12;
      --color-card: #121820;
      --color-surface: #18202A;
      --color-border: #1E293B;
      --color-accent: #00FF88;
      --color-text: #FFFFFF;
      --color-muted: #94A3B8;
    }
    body {
      background-color: var(--color-bg);
      color: var(--color-muted);
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Inter', sans-serif;
      overflow-x: hidden;
      line-height: 1.6;
    }
    .neon-border {
      border: 1px solid rgba(30, 41, 59, 0.8);
      transition: all 0.25s ease-in-out;
    }
    .neon-border:hover {
      border-color: rgba(0, 255, 136, 0.5);
      box-shadow: 0 0 20px rgba(0, 255, 136, 0.12);
      transform: translateY(-2px);
    }
    .bg-grid {
      background-size: 40px 40px;
      background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    }
    .text-gradient {
      background: linear-gradient(135deg, #FFFFFF 30%, #00FF88 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .glow-effect {
      position: absolute;
      width: 450px;
      height: 450px;
      background: radial-gradient(circle, rgba(0, 255, 136, 0.1) 0%, rgba(124, 58, 237, 0.05) 50%, transparent 70%);
      pointer-events: none;
      filter: blur(40px);
    }