/* roulang page: index */
:root {
      --primary: #0F2423;
      --primary-dark: #0A1716;
      --accent: #C5A880;
      --accent-hover: #B08E60;
      --bg-light: #F8F9FA;
      --bg-alt: #F1F3F2;
      --text-main: #1A1D1C;
      --text-body: #4A5553;
      --text-muted: #7C8885;
      --border-color: #E2E8F0;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --shadow-soft: 0 4px 20px -2px rgba(15, 36, 35, 0.08);
      --shadow-hover: 0 12px 28px -4px rgba(15, 36, 35, 0.16);
    }
    * {
      box-sizing: border-box;
      scroll-behavior: smooth;
    }
    body {
      color: var(--text-body);
      background-color: var(--bg-light);
      -webkit-font-smoothing: antialiased;
    }
    .custom-shadow {
      box-shadow: var(--shadow-soft);
    }
    .custom-shadow:hover {
      box-shadow: var(--shadow-hover);
    }
    .btn-champagne {
      background: linear-gradient(135deg, #D4AF37 0%, #C5A880 100%);
      color: #0F2423;
      font-weight: 600;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .btn-champagne:hover {
      background: linear-gradient(135deg, #C5A880 0%, #B08E60 100%);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(197, 168, 128, 0.35);
    }
    .btn-dark {
      background-color: #0F2423;
      color: #FFFFFF;
      transition: all 0.3s ease;
    }
    .btn-dark:hover {
      background-color: #1A3D34;
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(15, 36, 35, 0.25);
    }
    .nav-scrolled {
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(12px);
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    }
    .flash-sale-badge {
      background: linear-gradient(90deg, #D97706, #B45309);
    }