/* roulang page: index */
:root {
      --bg-base: #FFFFFF;
      --bg-soft: #F8F9FA;
      --brand-primary: #111318;
      --brand-accent: #00D18F;
      --brand-accent-hover: #00B87D;
      --border-light: #E5E7EB;
      --border-dark: rgba(255, 255, 255, 0.08);
      --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.04);
      --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
    }
    body {
      background-color: var(--bg-base);
      color: var(--brand-primary);
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }
    .custom-scroll::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    .custom-scroll::-webkit-scrollbar-thumb {
      background: #D1D5DB;
      border-radius: 3px;
    }
    .hero-bg {
      background: linear-gradient(180deg, rgba(11, 13, 16, 0.88) 0%, rgba(17, 19, 24, 0.94) 100%), url('/assets/images/decb6ff66aea1a8f.webp') center/cover no-repeat;
    }
    .card-transition {
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card-transition:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: #00D18F;
    }
    .glass-dark {
      background: rgba(17, 19, 24, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--border-dark);
    }