/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23576857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }

/* ── Navbar ── */
#navbar { background: transparent; }
#navbar.scrolled { background: rgba(253, 252, 248, 0.95); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(27, 67, 50, 0.08); }
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: #1B4332; transition: width 0.3s ease; }
.nav-link:hover::after { width: 100%; }

/* ── CTA Buttons ── */
.cta-btn { position: relative; overflow: hidden; }
.cta-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%); opacity: 0; transition: opacity 0.3s ease; }
.cta-btn:hover::before { opacity: 1; }

.cta-btn-outline { transition: all 0.3s ease; }
.cta-btn-outline:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(27, 67, 50, 0.15); }

/* ── Floating Cards ── */
.floating-card-1 { animation: float1 6s ease-in-out infinite; }
.floating-card-2 { animation: float2 5s ease-in-out infinite; }

@keyframes float1 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(1deg); }
}
@keyframes float2 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(-1deg); }
}

/* ── Marquee ── */
.marquee-track { animation: marquee 30s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Product Cards ── */
.product-card { transition: transform 0.4s ease; }
.product-card:hover { transform: translateY(-6px); }
.product-card:hover .rounded-3xl { box-shadow: 0 20px 60px rgba(27, 67, 50, 0.15); }

/* ── Gallery ── */
.gallery-item { cursor: pointer; }
.gallery-item::after { content: ''; position: absolute; inset: 0; background: rgba(27, 67, 50, 0); transition: background 0.3s ease; border-radius: 16px; }
.gallery-item:hover::after { background: rgba(27, 67, 50, 0.05); }
.gallery-item { position: relative; }

/* ── Scroll Animations ── */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { 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; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── Mobile Menu ── */
.mobile-nav-link { transition: color 0.3s ease, transform 0.3s ease; }
.mobile-nav-link:hover { transform: scale(1.05); }
#mobile-menu.open { opacity: 1 !important; pointer-events: all !important; }

.menu-line { transition: all 0.3s ease; }
#menu-btn.active .menu-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
#menu-btn.active .menu-line:nth-child(2) { opacity: 0; }
#menu-btn.active .menu-line:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); width: 20px; }

/* ── Form Focus States ── */
input:focus, textarea:focus, select:focus { background: #fff; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .floating-card-1 { position: relative; top: auto; left: auto; margin-bottom: 16px; max-width: 100%; }
    .floating-card-2 { position: relative; bottom: auto; right: auto; max-width: 100%; }
    #hero { padding-bottom: 60px; }
}

/* ── Selection ── */
::selection { background: #1B4332; color: #FDFCF8; }
</style>