/* roulang page: index */
:root {
      --primary-navy: #0B192C;
      --secondary-dark: #060D17;
      --cyber-cyan: #008DDA;
      --alert-amber: #FF6500;
      --bg-light: #F4F6F9;
      --text-main: #1E293B;
      --text-muted: #64748B;
      --border-color: rgba(11, 25, 44, 0.08);
    }
    html { scroll-behavior: smooth; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
    body { background-color: var(--bg-light); color: var(--text-main); margin: 0; padding: 0; }
    .hero-bg {
      background: linear-gradient(135deg, rgba(6, 13, 23, 0.92) 0%, rgba(11, 25, 44, 0.85) 100%), url('/assets/images/00e6964dcd579474.jpg') center/cover no-repeat;
    }
    .dark-board-bg {
      background: radial-gradient(circle at 50% 50%, #0c203a 0%, #060D17 100%);
    }
    .custom-card {
      background: #FFFFFF;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(11, 25, 44, 0.04);
      transition: all 0.25s ease;
    }
    .custom-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(11, 25, 44, 0.08);
      border-color: rgba(0, 141, 218, 0.35);
    }
    .cyan-glow:hover {
      box-shadow: 0 0 16px rgba(0, 141, 218, 0.35);
    }
    .badge-amber {
      background: rgba(255, 101, 0, 0.1);
      color: #FF6500;
      border: 1px solid rgba(255, 101, 0, 0.25);
    }
    .badge-cyan {
      background: rgba(0, 141, 218, 0.1);
      color: #008DDA;
      border: 1px solid rgba(0, 141, 218, 0.25);
    }