/* roulang page: index */
:root {
      --primary-dark: #121316;
      --accent-blue: #0EA5E9;
      --bg-light: #F8FAFC;
      --border-color: #E2E8F0;
      --text-main: #0F172A;
      --text-muted: #475569;
    }
    html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
    }
    body {
      color: var(--text-main);
      background-color: #ffffff;
      overflow-x: hidden;
    }
    .clip-slanted {
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%);
    }
    .clip-slanted-reverse {
      clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%);
    }
    .tabular-nums {
      font-variant-numeric: tabular-nums;
    }
    .coupon-ticket {
      background: radial-gradient(circle at 0 50%, transparent 12px, #ffffff 13px) top left,
                  radial-gradient(circle at 100% 50%, transparent 12px, #ffffff 13px) top right;
      background-size: 51% 100%;
      background-repeat: no-repeat;
    }
    .hover-lift {
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hover-lift:hover {
      transform: translateY(-4px);
    }