/* roulang page: index */
:root {
      --bg-dark: #070a13;
      --bg-card: #0e1526;
      --bg-card-hover: #141f38;
      --primary: #00F59B;
      --primary-glow: rgba(0, 245, 155, 0.25);
      --accent-blue: #0EA5E9;
      --accent-purple: #8B5CF6;
      --text-main: #F9FAFB;
      --text-muted: #94A3B8;
      --border-line: rgba(255, 255, 255, 0.08);
      --border-active: rgba(0, 245, 155, 0.4);
    }

    html {
      scroll-behavior: smooth;
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Heiti SC", sans-serif;
      background-color: var(--bg-dark);
      color: var(--text-main);
    }

    .glow-border {
      border: 1px solid var(--border-line);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .glow-border:hover {
      border-color: var(--border-active);
      box-shadow: 0 0 25px var(--primary-glow);
    }

    .neon-text-green {
      color: #00F59B;
      text-shadow: 0 0 12px rgba(0, 245, 155, 0.35);
    }

    .neon-text-blue {
      color: #38BDF8;
      text-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
    }

    .custom-gradient-bg {
      background: radial-gradient(circle at 50% -20%, rgba(0, 245, 155, 0.12), transparent 70%),
                  radial-gradient(circle at 90% 40%, rgba(14, 165, 233, 0.08), transparent 50%),
                  #070a13;
    }

    .pulse-dot {
      animation: pulseAnimation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes pulseAnimation {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.85); }
    }