/* roulang page: index */
:root {
      --bg-dark: #070d12;
      --bg-card: rgba(16, 37, 32, 0.65);
      --border-glow: rgba(16, 185, 129, 0.22);
      --border-hover: rgba(52, 211, 153, 0.55);
      --brand-green: #10B981;
      --brand-amber: #F59E0B;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      background-color: var(--bg-dark);
      color: #E2E8F0;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
    }
    .custom-card {
      background: radial-gradient(130% 100% at 50% 0%, rgba(16, 185, 129, 0.08) 0%, rgba(10, 24, 21, 0.7) 100%);
      border: 1px solid var(--border-glow);
      transition: all 0.28s ease;
    }
    .custom-card:hover {
      border-color: var(--border-hover);
      box-shadow: 0 16px 36px -10px rgba(16, 185, 129, 0.22);
      transform: translateY(-3px);
    }
    .glass-nav {
      background: rgba(7, 13, 18, 0.88);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .text-glow {
      text-shadow: 0 0 24px rgba(16, 185, 129, 0.35);
    }
    .amber-gradient {
      background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    }
    .emerald-gradient {
      background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    }