/* roulang page: index */
:root {
      --primary-gradient: linear-gradient(135deg, #00D084 0%, #00C4CC 100%);
      --dark-card: #111C2E;
      --card-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
      --card-shadow-hover: 0 20px 40px -10px rgba(0, 208, 132, 0.18);
    }
    html {
      scroll-behavior: smooth;
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    }
    .custom-gradient-bg {
      background: linear-gradient(135deg, #0B1320 0%, #152238 100%);
    }
    .badge-glow {
      background: rgba(0, 208, 132, 0.12);
      border: 1px solid rgba(0, 208, 132, 0.3);
    }
    .card-hover {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .card-hover:hover {
      transform: translateY(-5px);
      box-shadow: var(--card-shadow-hover);
    }
    .hero-mask {
      background: linear-gradient(to right, rgba(11, 19, 32, 0.95) 0%, rgba(11, 19, 32, 0.75) 50%, rgba(11, 19, 32, 0.4) 100%);
    }
    .text-gradient {
      background: linear-gradient(135deg, #00D084 0%, #00C4CC 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }