/* roulang page: index */
:root {
      --primary: #0E63FF;
      --primary-dark: #0840a8;
      --secondary: #10B981;
      --warning: #F59E0B;
      --dark-slate: #0F172A;
      --light-bg: #F8FAFC;
      --border-color: #E2E8F0;
    }
    html {
      scroll-behavior: smooth;
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
      letter-spacing: 0.015em;
    }
    .hero-bg {
      background-image: linear-gradient(to right, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.78)), url('/assets/images/fa91a5059ec4c1b1.webp');
      background-size: cover;
      background-position: center;
    }
    .glass-card {
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(12px);
      border: 1px solid var(--border-color);
    }
    .hover-card {
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .hover-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 24px -6px rgba(14, 99, 255, 0.12);
      border-color: #bfdbfe;
    }