/* roulang page: index */
:root {
      --color-brand: #0F3832;
      --color-brand-emerald: #135E4B;
      --color-brand-vibrant: #0A8F6C;
      --color-dark: #091D1A;
      --color-bg-gray: #F6F8F7;
      --color-text-main: #1E2923;
      --color-text-muted: #52635B;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      background-color: var(--color-bg-gray);
      color: var(--color-text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }
    .custom-shadow {
      box-shadow: 0 10px 30px -5px rgba(15, 56, 50, 0.08);
    }
    .custom-shadow-hover:hover {
      box-shadow: 0 18px 40px -5px rgba(15, 56, 50, 0.16);
      transform: translateY(-4px);
    }
    .hero-glow {
      background: radial-gradient(circle at 75% 30%, rgba(10, 143, 108, 0.28) 0%, transparent 60%);
    }
    .badge-glow {
      box-shadow: 0 0 12px rgba(10, 143, 108, 0.4);
    }
    .data-grid-border {
      border: 1px solid rgba(19, 94, 75, 0.18);
    }