/* ============================================================
   BASE
============================================================ */
body { font-family: 'Inter', sans-serif; }
.font-serif { font-family: 'Playfair Display', serif; }
html { scroll-behavior: smooth; }

/* ============================================================
   COMPONENTS
============================================================ */

/* Gold gradient button */
.btn-gold {
    background: linear-gradient(135deg, #C9A84C 0%, #E8D5A3 50%, #C9A84C 100%);
    background-size: 200% auto;
    transition: background-position 0.4s ease, transform 0.2s ease;
}
.btn-gold:hover {
    background-position: right center;
    transform: translateY(-1px);
}

/* Divider */
.divider { width: 50px; height: 1px; background: #C9A84C; margin: 0 auto; }

/* ============================================================
   NAVBAR
============================================================ */
#navbar { transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease; }

/* ============================================================
   ARMADA / PRODUCT CARDS
============================================================ */
.product-card .card-img { transition: transform 0.6s ease; }
.product-card:hover .card-img { transform: scale(1.04); }

/* ============================================================
   FAQ ACCORDION
============================================================ */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-answer.open { max-height: 200px; }
.faq-icon { transition: transform 0.3s ease; display: inline-block; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* ============================================================
   PRICE TABLE
============================================================ */
.price-row:hover td { background: rgba(201, 168, 76, 0.04); }

/* ============================================================
   ANIMATIONS
============================================================ */
.fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}