/* roulang page: index */
:root {
      --color-primary: #0C231E;
      --color-dark: #080E0C;
      --color-gold-start: #DFBA73;
      --color-gold-end: #C59A45;
      --color-bg-soft: #F6F8F6;
      --color-text-main: #121C18;
      --color-text-sub: #56635E;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    html {
      scroll-behavior: smooth;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }
    body {
      background-color: #FAFCFA;
      color: var(--color-text-main);
      overflow-x: hidden;
    }
    .gold-gradient-bg {
      background: linear-gradient(135deg, #DFBA73 0%, #C59A45 100%);
    }
    .gold-gradient-text {
      background: linear-gradient(135deg, #DFBA73 0%, #C59A45 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .glass-nav {
      background: rgba(12, 35, 30, 0.94);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .card-shadow {
      box-shadow: 0 12px 32px -4px rgba(12, 35, 30, 0.06), 0 4px 12px -2px rgba(12, 35, 30, 0.03);
      transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card-shadow:hover {
      transform: translateY(-4px);
      box-shadow: 0 24px 48px -8px rgba(12, 35, 30, 0.12);
    }
    .luxury-badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 14px;
      border-radius: 9999px;
      background: rgba(223, 186, 115, 0.12);
      border: 1px solid rgba(223, 186, 115, 0.35);
      color: #9C7324;
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.05em;
    }
    .luxury-badge-dark {
      background: rgba(223, 186, 115, 0.14);
      border: 1px solid rgba(223, 186, 115, 0.3);
      color: #DFBA73;
    }
    details summary::-webkit-details-marker {
      display: none;
    }