/* ===== BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { overflow-x: hidden; }

/* ===== NAVBAR ===== */
#navbar {
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
#navbar.scrolled {
  background: rgba(254, 253, 248, 0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 20px rgba(26, 92, 42, 0.08);
  padding: 0;
}
.nav-title { transition: color 0.3s ease; }
#navbar.scrolled .nav-title { color: #1a5c2a; }

/* ===== HERO GEOMETRIC SHAPES ===== */
.geo-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.12;
}
.geo-circle-1 {
  width: 600px; height: 600px;
  background: #c9953a;
  top: -200px; right: -150px;
  animation: float 20s ease-in-out infinite;
}
.geo-circle-2 {
  width: 350px; height: 350px;
  background: #d4713b;
  bottom: -100px; left: -80px;
  animation: float 15s ease-in-out infinite reverse;
}
.geo-circle-3 {
  width: 180px; height: 180px;
  background: white;
  top: 40%; left: 8%;
  animation: float 12s ease-in-out infinite;
}
.geo-circle-4 {
  width: 500px; height: 500px;
  background: #c9953a;
  bottom: -200px; right: -100px;
  animation: float 18s ease-in-out infinite;
}

.geo-diamond {
  position: absolute;
  width: 80px; height: 80px;
  background: #c9953a;
  opacity: 0.15;
  transform: rotate(45deg);
}
.geo-diamond-1 { top: 20%; left: 5%; animation: spin 25s linear infinite; }
.geo-diamond-2 { top: 60%; right: 10%; width: 50px; height: 50px; background: #d4713b; animation: spin 18s linear infinite reverse; }

.geo-stripe {
  position: absolute;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
}
.geo-stripe-1 { width: 300px; top: 30%; left: 0; transform: rotate(-15deg); }
.geo-stripe-2 { width: 200px; bottom: 25%; right: 0; transform: rotate(10deg); background: rgba(201,149,58,0.2); }

.geo-dot {
  position: absolute;
  width: 12px; height: 12px;
  background: #c9953a;
  border-radius: 50%;
  opacity: 0.3;
}
.geo-dot-1 { top: 15%; right: 20%; animation: pulse-dot 3s ease-in-out infinite; }
.geo-dot-2 { bottom: 30%; left: 15%; width: 8px; height: 8px; animation: pulse-dot 4s ease-in-out infinite 1s; }
.geo-dot-3 { top: 50%; right: 5%; width: 16px; height: 16px; background: #d4713b; animation: pulse-dot 3.5s ease-in-out infinite 0.5s; }
.geo-dot-4 { bottom: 15%; left: 30%; width: 10px; height: 10px; animation: pulse-dot 5s ease-in-out infinite 2s; }
.geo-dot-5 { top: 20%; left: 10%; width: 14px; height: 14px; background: #d4713b; animation: pulse-dot 4s ease-in-out infinite; }
.geo-dot-6 { bottom: 30%; right: 5%; animation: pulse-dot 3s ease-in-out infinite 1s; }
.geo-dot-7 { top: 60%; left: 20%; width: 8px; height: 8px; background: #d4713b; animation: pulse-dot 5s ease-in-out infinite 2s; }

/* ===== ANIMATIONS ===== */
@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(20px, -30px) rotate(3deg); }
  50% { transform: translate(-15px, 20px) rotate(-2deg); }
  75% { transform: translate(25px, 10px) rotate(2deg); }
}
@keyframes spin {
  from { transform: rotate(45deg); }
  to { transform: rotate(405deg); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.4); }
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(8px); opacity: 0.4; }
}
.scroll-dot { animation: scroll-bounce 1.5s ease-in-out infinite; }

/* ===== PRODUCT CARDS ===== */
.product-card {
  background: white;
  border-radius: 20px;
  padding: 0;
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(26, 92, 42, 0.12);
}

/* ===== GALLERY ===== */
.gallery-item {
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.gallery-item:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

/* ===== SCROLL REVEAL ===== */
.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);
}
.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; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* ===== MOBILE MENU ===== */
.mobile-link {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid rgba(26, 92, 42, 0.08);
}
.mobile-link:last-child { border-bottom: none; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .geo-circle-1 { width: 300px; height: 300px; top: -100px; right: -80px; }
  .geo-circle-2 { width: 200px; height: 200px; }
  .geo-diamond { display: none; }
  .geo-stripe { display: none; }
}