/* ═══════════════════════════════════════════════════════
   animations.css — Keyframes & special effects
   (Tailwind supplement — layout/color handled by Tailwind)
   ═══════════════════════════════════════════════════════ */

/* ─── Scroll progress bar ─── */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, #F5A623, #FFCC5C);
  box-shadow: 0 0 8px rgba(245,166,35,0.6);
  z-index: 9999;
  transition: width 0.1s linear;
}

/* ─── Scroll reveal animations ─── */
.fade-up   { opacity:0; transform:translateY(32px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); }
.fade-left { opacity:0; transform:translateX(-32px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); }
.fade-right{ opacity:0; transform:translateX(32px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); }
.scale-in  { opacity:0; transform:scale(.9);         transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1); }
.fade-up.visible,.fade-left.visible,.fade-right.visible,.scale-in.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.08s; }
.delay-2 { transition-delay:.16s; }
.delay-3 { transition-delay:.24s; }
.delay-4 { transition-delay:.32s; }
.delay-5 { transition-delay:.40s; }

/* ─── Keyframes ─── */
@keyframes gradient-shift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@keyframes orb-float1 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(30px,-30px) scale(1.08); }
}
@keyframes orb-float2 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-25px,20px) scale(1.05); }
}
@keyframes hero-bg-shift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
@keyframes btn-shimmer {
  0%   { left: -80%; }
  60%  { left: 130%; }
  100% { left: 130%; }
}
@keyframes dot-drift {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(15px,-15px); }
  50%  { transform: translate(-10px,20px); }
  75%  { transform: translate(20px,10px); }
  100% { transform: translate(0,0); }
}
@keyframes badge-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.5; transform:scale(.8); }
}

/* ─── Hero decorative layer ─── */
.hero-bg-gradient {
  position:absolute; inset:0;
  background: linear-gradient(135deg,#080f1e 0%,#0f2040 40%,#152d5e 70%,#0d1f3d 100%);
  animation: hero-bg-shift 12s ease-in-out infinite alternate;
}
.hero-geo { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero-geo-circle {
  position:absolute; border-radius:50%;
  background: radial-gradient(circle,#F5A623,transparent 70%);
}
.hero-geo-circle--1 { width:700px;height:700px; top:-220px;right:-180px; opacity:.06; animation:orb-float1 10s ease-in-out infinite alternate; }
.hero-geo-circle--2 { width:450px;height:450px; bottom:-120px;left:-120px; opacity:.04; animation:orb-float2 14s ease-in-out infinite alternate; }
.hero-geo-circle--3 { width:250px;height:250px; top:30%;right:15%; opacity:.035; background:radial-gradient(circle,#1DB87E,transparent 70%); animation:orb-float1 8s ease-in-out infinite alternate-reverse; }
.hero-geo-dots {
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
  background-size: 32px 32px;
  animation: dot-drift 20s linear infinite;
}

/* ─── Hero title gradient text ─── */
.hero-title-accent {
  background: linear-gradient(135deg,#F5A623 0%,#FFCC5C 50%,#F5A623 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 4s linear infinite;
}

/* ─── Hero badge dot ─── */
.hero-badge-dot {
  width:6px; height:6px;
  background:#F5A623; border-radius:50%;
  animation: badge-pulse 2s ease-in-out infinite;
}

/* ─── Button shimmer ─── */
.btn-shimmer,
.btn-primary,
.btn-primary-lg,
.btn-primary-sm {
  position:relative; overflow:hidden;
}
.btn-shimmer::after,
.btn-primary::after,
.btn-primary-lg::after,
.btn-primary-sm::after {
  content:'';
  position:absolute; top:0; bottom:0;
  width:40%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-20deg);
  animation: btn-shimmer 3.5s ease-in-out infinite;
}

/* ─── Nav active link ─── */
.nav-link-active { color:#0F2040 !important; font-weight:700 !important; }
.nav-link-active::after {
  content:''; position:absolute;
  bottom:-4px; left:0; right:0;
  height:2px; background:#F5A623; border-radius:1px;
}

/* ─── Service card top accent bar ─── */
.card-accent-bar {
  position:absolute; top:0; left:0; right:0;
  height:3px;
  background: linear-gradient(90deg,#F5A623,#FFCC5C);
  transform: scaleX(0); transform-origin:left;
  transition: transform .3s ease;
  border-radius:999px 999px 0 0;
}
.service-card:hover .card-accent-bar { transform: scaleX(1); }

/* ─── Hamburger ─── */
.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
}
.hamburger span { display:block; width:24px; height:2px; background:#374151; border-radius:2px; transition:all .3s ease; }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ─── Mobile menu ─── */
.mobile-menu { display:none; background:#fff; border-top:1px solid #E5E7EB; padding:.5rem 0 1rem; }
.mobile-menu.open { display:block; }
.mobile-menu a { display:flex; align-items:center; justify-content:space-between; padding:.875rem 1.5rem; color:#374151; font-weight:500; font-size:.9375rem; border-bottom:1px solid #F3F4F6; transition:background .15s; text-decoration:none; }
.mobile-menu a:hover { background:#F9FAFB; color:#0F2040; }
.mobile-menu a:last-child { border-bottom:none; }
.mobile-menu-cta { padding:1rem 1.5rem .25rem; }

/* ─── Mobile CTA bar ─── */
.mobile-cta-bar {
  display:none; position:fixed; bottom:0; left:0; right:0;
  z-index:997; background:#fff; border-top:1px solid #E5E7EB;
  padding:.75rem 1rem; gap:.75rem;
  box-shadow:0 -4px 20px rgba(0,0,0,.08);
}
/* Ensure tap targets are at least 48px */
.mobile-cta-bar a { min-height:48px; }

/* ─── WhatsApp FAB ─── */
.whatsapp-fab {
  position:fixed; bottom:2rem; right:2rem; z-index:998;
  width:58px; height:58px; background:#25D366; color:#fff;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.45);
  transition:transform .2s,box-shadow .2s; text-decoration:none;
}
.whatsapp-fab:hover { transform:scale(1.1); box-shadow:0 6px 30px rgba(37,211,102,.6); }
.whatsapp-tip {
  position:absolute; right:calc(100% + .875rem); top:50%; transform:translateY(-50%);
  background:#1F2937; color:#fff; font-size:.8rem; font-weight:500;
  padding:.45rem .875rem; border-radius:.5rem; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.whatsapp-tip::after { content:''; position:absolute; right:-5px; top:50%; transform:translateY(-50%); border:5px solid transparent; border-left-color:#1F2937; border-right:none; }
.whatsapp-fab:hover .whatsapp-tip { opacity:1; }

/* ─── Scroll to top ─── */
.scroll-top-btn {
  position:fixed; bottom:2rem; left:2rem; z-index:998;
  width:42px; height:42px; background:#0F2040; color:#fff;
  border:none; border-radius:50%; font-size:1rem; cursor:pointer;
  opacity:0; transform:translateY(8px);
  transition:opacity .25s,transform .25s;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.scroll-top-btn.visible { opacity:1; transform:translateY(0); }
.scroll-top-btn:hover { background:#152D5E; }

/* ─── FAQ accordion ─── */
.faq-answer { max-height:0; overflow:hidden; transition:max-height .35s ease,padding .35s ease; padding:0 1.5rem; font-size:.9375rem; color:#4B5563; line-height:1.75; }
.faq-item.open .faq-answer { max-height:300px; padding:0 1.5rem 1.25rem; }
.faq-icon-btn { width:28px; height:28px; background:#E5E7EB; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .2s,transform .2s,color .2s; font-size:1rem; font-weight:700; color:#6B7280; cursor:pointer; }
.faq-item.open .faq-icon-btn { background:#0F2040; color:#fff; transform:rotate(45deg); }

/* ─── About photo box ─── */
.about-img-box { border-radius:1rem; overflow:hidden; aspect-ratio:4/3; position:relative; }
@media(min-width:640px){ .about-img-box { aspect-ratio:3/4; } }
.about-img-box img { width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .65s ease; display:block; }
.about-img-wrap:hover .about-img-box img { transform:scale(1.04); }
.about-float {
  position:absolute; bottom:1.5rem; right:-1.25rem;
  background:#fff; border-radius:.75rem; padding:1.125rem 1.5rem;
  box-shadow:0 8px 32px rgba(0,0,0,.12); text-align:center; min-width:120px;
}
.about-float-num { font-size:2.25rem; font-weight:900; color:#0F2040; line-height:1; }
.about-float-label { font-size:.75rem; color:#6B7280; margin-top:.25rem; }

/* ─── Process connector line ─── */
.process-connector {
  display:none;
}
@media(min-width:768px){
  .process-connector {
    display:block; position:absolute; top:28px; left:0; right:0; height:2px;
    background: linear-gradient(90deg,transparent 0%,#E5E7EB 10%,#E5E7EB 90%,transparent 100%);
    z-index:0;
  }
}

/* ─── Testimonials horizontal scroll (mobile) ─── */
.testimonials-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.testimonials-scroll::-webkit-scrollbar { display: none; }
.testimonials-scroll .testimonial-card {
  flex: 0 0 84%;
  max-width: 340px;
  scroll-snap-align: start;
}
.testimonials-scroll-hint {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  color: #9CA3AF;
  margin-top: .5rem;
  justify-content: center;
}
@media(min-width:768px) {
  .testimonials-scroll {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
    overflow-x: visible;
    padding-bottom: 0;
    margin-left: 0; margin-right: 0;
    padding-left: 0; padding-right: 0;
  }
  .testimonials-scroll .testimonial-card {
    flex: initial; max-width: none;
  }
  .testimonials-scroll-hint { display: none; }
}

/* ─── Responsive mobile ─── */
@media(max-width:768px){
  .hamburger { display:flex; }
  .mobile-cta-bar { display:flex; }
  .whatsapp-fab { bottom:5.75rem; right:1rem; }
  .scroll-top-btn { bottom:5.75rem; left:1rem; }
  body { padding-bottom:80px; }
  .about-float { right:1rem; bottom:1.5rem; padding:1rem 1.25rem; }
  .about-float-num { font-size:1.875rem; }
  .about-float-label { font-size:.7rem; }
}