/* roulang page: index */
:root {
      --bg-primary: #FFFFFF;
      --bg-alt: #F8FAFC;
      --bg-dark: #090D16;
      --text-main: #0F172A;
      --text-muted: #64748B;
      --accent: #06B6D4;
      --accent-green: #10B981;
    }
    body {
      color: var(--text-main);
      background-color: var(--bg-primary);
      overflow-x: hidden;
      font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    }
    .custom-scrollbar::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 9999px;
    }
    .hero-glow {
      background: radial-gradient(circle at 50% 30%, rgba(6, 182, 212, 0.12) 0%, rgba(15, 23, 42, 0) 65%);
    }
    .card-stack-left {
      transform: perspective(1000px) rotateY(10deg) rotateZ(-3deg) scale(0.92);
      transition: all 0.4s ease;
    }
    .card-stack-right {
      transform: perspective(1000px) rotateY(-10deg) rotateZ(3deg) scale(0.92);
      transition: all 0.4s ease;
    }
    .card-stack-center {
      transform: perspective(1000px) translateZ(30px) scale(1);
      transition: all 0.4s ease;
    }
    .card-stack-left:hover, .card-stack-right:hover, .card-stack-center:hover {
      transform: perspective(1000px) translateY(-8px) scale(1.02);
      z-index: 30;
    }
    .flow-line::after {
      content: '';
      position: absolute;
      top: 50%;
      right: -24px;
      width: 24px;
      height: 2px;
      background: linear-gradient(90deg, #06B6D4, rgba(6, 182, 212, 0.1));
    }
    @media (max-width: 1024px) {
      .card-stack-left, .card-stack-right, .card-stack-center {
        transform: none !important;
      }
      .flow-line::after {
        display: none;
      }
    }