/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

/* ── Utilities ── */
.letter-spacing-wider { letter-spacing: 0.15em; }

/* ── Navbar ── */
.nav-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: transparent;
    transition: background 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}
.nav-fixed.scrolled {
    background: rgba(15, 15, 15, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #d4a853;
    transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }
.nav-logo-text { transition: color 0.3s ease; }

/* ── Hero ── */
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
    background: linear-gradient(
        135deg,
        rgba(15, 15, 15, 0.82) 0%,
        rgba(15, 15, 15, 0.55) 50%,
        rgba(184, 84, 70, 0.3) 100%
    );
}
.hero-badge {
    animation: fadeInDown 0.8s ease both;
}
.hero-bg img {
    animation: heroZoom 20s ease infinite alternate;
}

@keyframes heroZoom {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

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

/* ── Scroll Reveal ── */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ── Mobile Menu ── */
.mobile-link {
    position: relative;
}
#mobile-menu.open {
    opacity: 1;
    pointer-events: all;
}
#mobile-menu.closed {
    opacity: 0;
    pointer-events: none;
}

/* ── Product Card Hover ── */
.group:hover .group-hover\:scale-110 {
    transform: scale(1.1);
}

/* ── Form Focus ── */
input:focus, textarea:focus {
    outline: none;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .font-serif { line-height: 1.15; }
}