/* roulang page: index */
:root {
      --color-primary: #0F2537;
      --color-dark: #0A1826;
      --color-gold: #C5A880;
      --color-gold-hover: #9E7D50;
      --color-bg-light: #F9F9FB;
      --color-border: #E5E7EB;
    }
    html {
      box-sizing: border-box;
      font-size: 16px;
    }
    *, *:before, *:after {
      box-sizing: inherit;
    }
    body {
      color: #1F2937;
      background-color: #FAFAFC;
      line-height: 1.65;
    }
    .gold-gradient-text {
      background: linear-gradient(135deg, #F3DEBA 0%, #C5A880 50%, #E5C392 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .badge-gold {
      background: linear-gradient(90deg, rgba(197, 168, 128, 0.12) 0%, rgba(158, 125, 80, 0.18) 100%);
      border: 1px solid rgba(197, 168, 128, 0.35);
      color: #9E7D50;
    }
    .card-hover-shadow {
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card-hover-shadow:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 30px -10px rgba(15, 37, 55, 0.12);
      border-color: rgba(197, 168, 128, 0.6);
    }
    .clip-hero-diagonal {
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5vw), 0 100%);
    }
    @media (max-width: 768px) {
      .clip-hero-diagonal {
        clip-path: none;
      }
    }