/* A2Clean Service Pages – service.css */

/* ---- WhatsApp button pulse ---- */
@keyframes wa-pulse {
  0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,.5); }
  50%      { box-shadow: 0 4px 32px rgba(37,211,102,.85); }
}
.wa-pulse { animation: wa-pulse 2.5s ease-in-out infinite; }

/* ---- Hero fade-up animations ---- */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
.fu  { animation: fadeUp .6s ease both; }
.d1  { animation-delay:.07s; }
.d2  { animation-delay:.14s; }
.d3  { animation-delay:.21s; }
.d4  { animation-delay:.28s; }

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ---- FAQ accordion ---- */
.faq-body { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-item.open .faq-body { max-height: 600px; }
.faq-arrow { transition: transform .3s ease; }
.faq-item.open .faq-arrow { transform: rotate(45deg); }

/* ---- Checklist tick ---- */
.tick::before { content:'✓'; color:#3dba4e; font-weight:900; margin-right:8px; }

/* ---- Section tag ---- */
.stag {
  display: inline-block;
  background: rgba(61,186,78,.1);
  color: #2a9e3a;
  padding: 4px 14px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Sora', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.stag-dark { background: rgba(61,186,78,.15); color:#7ae880; }

/* ---- Service image hero ---- */
.svc-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---- Card shadows ---- */
.shadow-card    { box-shadow: 0 1px 3px 0 rgb(0 0 0 / .06), 0 1px 2px -1px rgb(0 0 0 / .04); }
.shadow-card-lg { box-shadow: 0 4px 16px -2px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .04); }

/* ---- Mobile: reduce hero padding ---- */
@media (max-width: 640px) {
  .hero-compact { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}

/* ---- Smooth scrolling ---- */
html { scroll-behavior: smooth; }

/* ---- Focus visible rings ---- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #3dba4e;
  outline-offset: 2px;
  border-radius: 6px;
}