@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300;1,9..144,600&family=Outfit:wght@300;400;500;600&display=swap');

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1), transform 0.75s cubic-bezier(0.22,1,0.36,1);
}
.reveal.from-left  { transform: translateX(-40px); }
.reveal.from-right { transform: translateX(40px); }
.reveal.visible    { opacity: 1; transform: none; }

/* ── TYPEWRITER CURSOR ── */
.tw-cursor {
  display: inline-block;
  width: 3px;
  background: var(--gold2, #d4b96a);
  margin-left: 4px;
  animation: blink 0.9s step-end infinite;
  vertical-align: baseline;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── PARTICLE CANVAS ── */
#particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ── COUNTER ANIMATION ── */
.count-up { display: inline-block; }

/* ── HOVER LIFT ── */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(4,47,35,0.12);
}

/* ── SERVICE CARD SHIMMER ── */
.svc-card {
  position: relative;
  overflow: hidden;
}
.svc-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--forest, #042f23), var(--teal, #0e5c6e));
  transition: width 0.45s cubic-bezier(0.22,1,0.36,1);
}
.svc-card:hover::after { width: 100%; }
.svc-card:hover { background: var(--cream, #f8f5ee); }

/* ── STAT NUMBER PULSE ── */
@keyframes pulse-in {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.stat-pulse { animation: pulse-in 0.6s cubic-bezier(0.22,1,0.36,1) forwards; }

/* ── HERO GRADIENT SHIFT ── */
@keyframes gradShift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.hero-animated-bg {
  background-size: 200% 200%;
  animation: gradShift 12s ease infinite;
}

/* ── SMOOTH NUMBER TICKER ── */
.ticker-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; }

/* ── FAQ ACCORDION ── */
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.22,1,0.36,1),
              padding 0.3s ease;
}
.faq-item.open .faq-a   { max-height: 400px; }
.faq-item.open .faq-arrow { transform: rotate(45deg); }
.faq-arrow { transition: transform 0.3s ease; display: inline-block; }

/* ── TESTI CARD SLIDE ── */
.tcard {
  transition: transform 0.3s ease, background 0.3s ease;
}
.tcard:hover { transform: translateY(-4px); }

/* ── PROGRESS BAR (loading feel) ── */
@keyframes progressLoad {
  from { width: 0; }
  to   { width: 100%; }
}
.progress-bar {
  height: 2px;
  background: linear-gradient(90deg, var(--forest,#042f23), var(--gold,#c4a24a), var(--teal,#0e5c6e));
  animation: progressLoad 1.2s ease forwards;
}

/* ── WAVY SECTION DIVIDER ── */
.wave-divider {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.wave-divider svg { display: block; }

/* ── FLOATING WhatsApp ── */
.wa-float {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 999;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: white;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s;
  animation: floatIn 0.8s 1.5s cubic-bezier(0.22,1,0.36,1) both;
}
.wa-float:hover { transform: scale(1.12); box-shadow: 0 8px 32px rgba(37,211,102,0.6); }
.wa-float svg   { width: 28px; height: 28px; }
@keyframes floatIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ── BACK-TO-TOP ── */
.btt-btn {
  position: fixed; bottom: 5.5rem; right: 2.1rem; z-index: 999;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--forest, #042f23); color: white; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.1rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  box-shadow: 0 2px 12px rgba(4,47,35,0.3);
}
.btt-btn.visible { opacity: 1; pointer-events: all; }
.btt-btn:hover   { transform: translateY(-3px); }