:root {
      --bg: #020c1b;
      --bg-light: #0a192f;
      --fg: #f8fafc;
      --muted: #94a3b8;
      --accent-emerald: #10b981;
      --accent-gold: #d4af37;
      --card: rgba(17, 34, 64, 0.6);
      --border: rgba(212, 175, 55, 0.2);
    }

    body {
      font-family: 'Inter', sans-serif;
      background-color: var(--bg);
      color: var(--fg);
      overflow-x: hidden;
    }

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

    /* Luxury Background Pattern */
    .luxury-bg {
      background-image: 
        radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.05) 0%, transparent 40%);
    }

    /* Scroll Reveal */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
    }
    .reveal.active { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }

    /* Glass Morphism Cards */
    .glass-card {
      background: var(--card);
      backdrop-filter: blur(12px);
      border: 1px solid var(--border);
      transition: all 0.4s ease;
    }
    .glass-card:hover {
      border-color: rgba(212, 175, 55, 0.5);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
      transform: translateY(-5px);
    }

    /* Gold Gradient Text */
    .text-gradient-gold {
      background: linear-gradient(to right, var(--accent-gold), #f7e7a4, var(--accent-gold));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* Buttons */
    .btn-luxury {
      background: linear-gradient(135deg, #d4af37 0%, #fceabb 50%, #d4af37 100%);
      color: #020c1b;
      font-weight: 600;
      padding: 14px 32px;
      border-radius: 4px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
    }
    .btn-luxury:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5);
    }

    .btn-outline {
      border: 1px solid var(--accent-gold);
      color: var(--accent-gold);
      padding: 12px 30px;
      border-radius: 4px;
      transition: all 0.3s ease;
    }
    .btn-outline:hover {
      background: rgba(212, 175, 55, 0.1);
    }

    /* Forms */
    .form-input-luxury {
      background: rgba(10, 25, 47, 0.8);
      border: 1px solid rgba(148, 163, 184, 0.2);
      color: var(--fg);
      transition: all 0.3s ease;
    }
    .form-input-luxury:focus {
      border-color: var(--accent-emerald);
      box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
      outline: none;
    }

    /* Slider Dots */
    .slider-dot { transition: all 0.3s ease; }
    .slider-dot.active { background-color: var(--accent-gold); transform: scale(1.2); }

    /* Accordion */
    .accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
    }
    .accordion-item.open .accordion-content { max-height: 500px; }
    .accordion-item.open .accordion-icon { transform: rotate(45deg); color: var(--accent-gold); }

    /* Centered Logo Header Layout */
    .header-center-layout {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
    }

    @media (max-width: 1024px) {
      .header-center-layout {
        display: flex;
        justify-content: space-between;
      }
    }
  
    /* ===== MODAL BACKGROUND ===== */
.modal {
    display: none;
    position: fixed;
    z-index: 999;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    animation: fadeIn 0.3s ease-in-out;
}

/* ===== MODAL CONTENT ===== */
.modal-content {
    background-color: #222;
    margin: auto;
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
    text-align: left;
    position: relative;
    animation: slideDown 0.3s ease-in-out;
}

/* ===== CLOSE BUTTON ===== */
.close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 22px;
    cursor: pointer;
    font-weight: bold;
}

.close:hover {
    color: red;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes slideDown {
    from {transform: translateY(-20px); opacity: 0;}
    to {transform: translateY(0); opacity: 1;}
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
    .modal-content {
        padding: 20px;
    }
}