/* roulang page: index */
:root {
      --color-brand: #1E293B;
      --color-dark: #0B0F19;
      --color-accent: #059669;
      --color-bg: #F8F9FA;
      --color-text: #0F172A;
      --color-muted: #475569;
      --color-border: #E2E8F0;
    }
    body {
      background-color: var(--color-bg);
      color: var(--color-text);
      font-feature-settings: "cv02", "cv03", "cv04", "cv11";
      overflow-x: hidden;
    }
    .video-hero-overlay {
      background: linear-gradient(180deg, rgba(11, 15, 25, 0.88) 0%, rgba(15, 23, 42, 0.82) 50%, rgba(11, 15, 25, 0.95) 100%);
    }
    .hairline-card {
      border: 1px solid rgba(226, 232, 240, 0.85);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hairline-card:hover {
      border-color: rgba(5, 150, 105, 0.4);
      transform: translateY(-2px);
      box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.08);
    }
    .pulse-ring {
      box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.7);
      animation: pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
    }
    @keyframes pulse {
      to {
        box-shadow: 0 0 0 14px rgba(5, 150, 105, 0);
      }
    }
    .custom-scroll::-webkit-scrollbar {
      height: 6px;
    }
    .custom-scroll::-webkit-scrollbar-thumb {
      background: #CBD5E1;
      border-radius: 9999px;
    }