/* roulang page: index */
:root {
      --color-primary: #0284C7;
      --color-primary-dark: #0369A1;
      --color-accent: #10B981;
      --color-bg-dark: #0B1528;
      --color-panel: #0F172A;
      --color-text-light: #F8FAFC;
      --color-text-muted: #94A3B8;
      --color-border-dark: rgba(255, 255, 255, 0.08);
      --font-stack: system-ui, -apple-system, "PingFang SC", "HarmonyOS Sans", "Microsoft YaHei", sans-serif;
    }
    
    html {
      scroll-behavior: smooth;
      font-family: var(--font-stack);
    }
    
    body {
      background-color: #F8FAFC;
      color: #1E293B;
      line-height: 1.75;
      overflow-x: hidden;
    }

    .tabular-numbers {
      font-feature-settings: "tnum";
      font-variant-numeric: tabular-nums;
    }

    .radar-pulse {
      position: relative;
    }
    .radar-pulse::after {
      content: '';
      position: absolute;
      top: -4px; right: -4px; bottom: -4px; left: -4px;
      border-radius: 9999px;
      border: 1px solid #10B981;
      animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    }

    @keyframes pulse-ring {
      0% { transform: scale(0.9); opacity: 0.8; }
      100% { transform: scale(1.6); opacity: 0; }
    }

    .grid-glow-card {
      transition: all 0.25s ease-in-out;
      border: 1px solid rgba(226, 232, 240, 0.8);
    }
    .grid-glow-card:hover {
      border-color: #0284C7;
      transform: translateY(-2px);
      box-shadow: 0 12px 24px -10px rgba(2, 132, 199, 0.15);
    }

    .dark-glow-card {
      transition: all 0.25s ease-in-out;
      border: 1px solid rgba(255, 255, 255, 0.07);
    }
    .dark-glow-card:hover {
      border-color: rgba(14, 165, 233, 0.5);
      box-shadow: 0 10px 30px -10px rgba(14, 165, 233, 0.2);
    }