/* ========================================
   ASMOD - Dark Green Theme CSS
   ======================================== */
html { scroll-behavior: smooth; }

/* ── Header ── */
#site-header { background: rgba(245,249,244,0.88); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid rgba(27,94,32,0.06); }
#site-header.scrolled { background: rgba(255,255,255,0.97); box-shadow: 0 4px 30px rgba(0,0,0,0.08); }

/* ── Mobile menu ── */
#mobile-menu.open { transform: translateX(0) !important; }
#mobile-toggle.open .mobile-line:nth-child(1) { transform: rotate(45deg) translate(4px, 5px); }
#mobile-toggle.open .mobile-line:nth-child(2) { opacity: 0; }
#mobile-toggle.open .mobile-line:nth-child(3) { transform: rotate(-45deg) translate(4px, -5px); }

/* ── Reveal (anime.js) ── */
.a-hidden { opacity: 0; }
.a-up { opacity: 0; transform: translateY(50px); }
.a-left { opacity: 0; transform: translateX(-60px); }
.a-right { opacity: 0; transform: translateX(60px); }
.a-scale { opacity: 0; transform: scale(0.85); }

/* ── Stagger ── */
.stagger > *:nth-child(1) { --delay: 0; }
.stagger > *:nth-child(2) { --delay: 80ms; }
.stagger > *:nth-child(3) { --delay: 160ms; }
.stagger > *:nth-child(4) { --delay: 240ms; }
.stagger > *:nth-child(5) { --delay: 320ms; }
.stagger > *:nth-child(6) { --delay: 400ms; }
.stagger > *:nth-child(7) { --delay: 480ms; }
.stagger > *:nth-child(8) { --delay: 560ms; }

/* ── Card hover ── */
.card-lift { transition: transform 0.45s cubic-bezier(0.4,0,0.2,1), box-shadow 0.45s cubic-bezier(0.4,0,0.2,1); }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 20px 50px -12px rgba(27,94,32,0.15); }

.card-bar { position: relative; overflow: hidden; }
.card-bar::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #1B5E20, #43A047, #66BB6A); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); }
.card-bar:hover::after { transform: scaleX(1); }

/* ── Image zoom ── */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform 0.7s cubic-bezier(0.4,0,0.2,1); }
.img-zoom:hover img { transform: scale(1.08); }

/* ── Gallery ── */
.gallery-card { position: relative; overflow: hidden; border-radius: 20px; cursor: pointer; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.gallery-card:hover img { transform: scale(1.1); }
.gallery-card .g-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,46,13,0.9) 0%, transparent 60%); display: flex; align-items: flex-end; padding: 24px; opacity: 0; transition: opacity 0.4s ease; }
.gallery-card:hover .g-overlay { opacity: 1; }

/* ── Lightbox ── */
.lightbox { position: fixed; inset: 0; background: rgba(10,46,13,0.97); z-index: 9999; display: none; align-items: center; justify-content: center; cursor: zoom-out; backdrop-filter: blur(30px); }
.lightbox.active { display: flex; }
.lightbox img { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }

/* ── Forms ── */
.form-field { width: 100%; padding: 14px 18px; border: 2px solid #d4ecd2; border-radius: 14px; font-family: 'Inter',sans-serif; font-size: 0.95rem; transition: all 0.3s ease; background: white; color: #0c1810; }
.form-field:focus { outline: none; border-color: #1B5E20; box-shadow: 0 0 0 4px rgba(27,94,32,0.1); }

/* ── Specs table ── */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid #d4ecd2; }
.spec-table td { padding: 14px 0; font-size: 0.9rem; }
.spec-table td:first-child { font-weight: 600; color: #0c1810; width: 40%; }
.spec-table td:last-child { color: #6B7280; }

/* ── Size buttons ── */
.size-btn { padding: 10px 20px; border: 2px solid #d4ecd2; border-radius: 14px; cursor: pointer; font-family: 'Inter',sans-serif; font-size: 0.9rem; font-weight: 600; transition: all 0.3s; background: white; color: #0c1810; }
.size-btn:hover, .size-btn.active { border-color: #1B5E20; background: rgba(27,94,32,0.06); color: #1B5E20; }

/* ── Thumbs ── */
.thumb-item { border-radius: 10px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: all 0.3s; }
.thumb-item.active, .thumb-item:hover { border-color: #1B5E20; }

/* ── Gradient text ── */
.text-gradient { background: linear-gradient(135deg, #43A047, #66BB6A, #A5D6A7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ── FAQ ── */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1), padding 0.3s ease; padding: 0 24px; }
.faq-answer.open { max-height: 500px; padding: 0 24px 24px; }
.faq-chevron { transition: transform 0.3s ease; }
.faq-chevron.open { transform: rotate(180deg); }

/* ── Counter ── */
.counter { display: inline-block; }

/* ── CTA Banner ── */
.cta-banner { position: relative; overflow: hidden; }
.cta-banner::before { content:''; position: absolute; top: -50%; right: -20%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%); border-radius: 50%; }
.cta-banner::after { content:''; position: absolute; bottom: -40%; left: -15%; width: 350px; height: 350px; background: radial-gradient(circle, rgba(102,187,106,0.08) 0%, transparent 70%); border-radius: 50%; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #eef7ed; }
::-webkit-scrollbar-thumb { background: #43A047; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #1B5E20; }

/* ── Page enter ── */
body { opacity: 0; }

/* ── WhatsApp ── */
.wa-float { position: fixed; bottom: 24px; right: 24px; z-index: 999; width: 60px; height: 60px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(37,211,102,0.35); transition: all 0.3s; }
.wa-float:hover { transform: scale(1.1); box-shadow: 0 8px 30px rgba(37,211,102,0.5); }

/* ── Feature icon pulse ── */
@keyframes icon-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.icon-float { animation: icon-float 3s ease-in-out infinite; }