:root {
      --gold-primary: #C5A059;
      --gold-light: #E5C378;
      --gold-dark: #9A7B38;
      --obsidian-base: #0B0F0E;
      --obsidian-card: #121816;
      --cream-text: #FDFBF7;
    }

    * {
      box-sizing: border-box;
      -webkit-font-smoothing: antialiased;
    }

    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background-color: var(--obsidian-base);
      color: #E2E8F0;
      overflow-x: hidden;
    }

    .font-serif-luxury {
      font-family: 'Playfair Display', Georgia, serif;
    }

    .font-heritage {
      font-family: 'Cinzel', serif;
    }

    .font-mono-code {
      font-family: 'Fira Code', monospace;
    }

    .gold-gradient-text {
      background: linear-gradient(135deg, #FDFBF7 0%, #E5C378 40%, #C5A059 80%, #9A7B38 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .gold-glow {
      box-shadow: 0 0 25px -5px rgba(197, 160, 89, 0.28);
    }

    .luxury-glass {
      background: rgba(18, 24, 22, 0.88);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(197, 160, 89, 0.18);
    }

    .luxury-card {
      background: linear-gradient(180deg, rgba(20, 28, 25, 0.85) 0%, rgba(13, 18, 16, 0.98) 100%);
      border: 1px solid rgba(197, 160, 89, 0.16);
      transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .luxury-card:hover {
      border-color: rgba(197, 160, 89, 0.45);
      transform: translateY(-4px);
      box-shadow: 0 16px 35px -10px rgba(0, 0, 0, 0.8), 0 0 20px -5px rgba(197, 160, 89, 0.15);
    }

    .jali-pattern {
      background-image: radial-gradient(rgba(197, 160, 89, 0.08) 1px, transparent 0);
      background-size: 32px 32px;
    }

    input[type=range] {
      -webkit-appearance: none;
      background: #1C2622;
      height: 6px;
      border-radius: 9999px;
    }
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      height: 20px;
      width: 20px;
      border-radius: 50%;
      background: #C5A059;
      border: 3px solid #0B0F0E;
      cursor: pointer;
      box-shadow: 0 0 12px rgba(197, 160, 89, 0.8);
      transition: transform 0.15s ease;
    }
    input[type=range]::-webkit-slider-thumb:hover {
      transform: scale(1.2);
    }

    @keyframes pulse-gold {
      0% { box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.7); }
      70% { box-shadow: 0 0 0 12px rgba(197, 160, 89, 0); }
      100% { box-shadow: 0 0 0 0 rgba(197, 160, 89, 0); }
    }
    .hotspot-pulse {
      animation: pulse-gold 2s infinite;
    }

    .active-nav-link {
      color: #E5C378 !important;
      position: relative;
    }
    .active-nav-link::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 0;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, #C5A059, #E5C378);
      border-radius: 2px;
    }
.nav-item{cursor:pointer}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}