/* roulang page: index */
:root {
      --primary-cyan: #0EA5E9;
      --primary-dark: #0B0F17;
      --card-bg: #111418;
      --border-color: #1E293B;
      --text-muted: #94A3B8;
      --text-light: #F8FAFC;
    }
    html {
      scroll-behavior: smooth;
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    }
    body {
      background-color: #07090D;
      color: #E2E8F0;
      line-height: 1.8;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .custom-scrollbar::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #334155;
      border-radius: 3px;
    }
    .hero-bg-overlay {
      background: linear-gradient(180deg, rgba(7, 9, 13, 0.85) 0%, rgba(11, 15, 23, 0.95) 100%), url('/assets/images/739a3a35b4a9b585.webp');
      background-size: cover;
      background-position: center;
    }
    .tech-grid-bg {
      background-image: radial-gradient(rgba(14, 165, 233, 0.12) 1px, transparent 0);
      background-size: 28px 28px;
    }
    .card-border {
      border: 1px solid #1E293B;
      transition: border-color 0.25s ease, transform 0.25s ease;
    }
    .card-border:hover {
      border-color: #0EA5E9;
      transform: translateY(-2px);
    }