/* ============================================================
   ZAPPROACH — 2026 UI/UX ENHANCEMENTS
   Modern design trends: glassmorphism, bento grids, aurora gradients,
   micro-interactions, scroll-driven animations, floating CTAs
   ============================================================ */

/* -----------------------------------------------------------
   ABOUT SECTION — 2026 REDESIGN
   ----------------------------------------------------------- */
.zap-about-2026 {
   padding: 140px 0 100px;
   position: relative;
   overflow: hidden;
   background: #fff;
}

/* Ambient mesh background */
.zap-about-bg-mesh {
   position: absolute;
   inset: 0;
   background-image:
      radial-gradient(circle at 15% 80%, rgba(35,60,119,0.05) 0%, transparent 50%),
      radial-gradient(circle at 85% 20%, rgba(74,108,247,0.04) 0%, transparent 50%),
      radial-gradient(circle at 50% 50%, rgba(3,26,61,0.02) 0%, transparent 60%);
   pointer-events: none;
}

/* Noise texture overlay */
.zap-about-bg-noise {
   position: absolute;
   inset: 0;
   background-image:
      linear-gradient(rgba(35,60,119,0.012) 1px, transparent 1px),
      linear-gradient(90deg, rgba(35,60,119,0.012) 1px, transparent 1px);
   background-size: 60px 60px;
   pointer-events: none;
}

/* Floating orbs */
.zap-about-orb {
   position: absolute;
   border-radius: 50%;
   pointer-events: none;
   will-change: transform;
}

.zap-about-orb-1 {
   top: -60px;
   right: -40px;
   width: 420px;
   height: 420px;
   background: radial-gradient(circle, rgba(35,60,119,0.06) 0%, transparent 70%);
   animation: zapAboutOrb1 14s ease-in-out infinite;
}

.zap-about-orb-2 {
   bottom: -80px;
   left: -60px;
   width: 360px;
   height: 360px;
   background: radial-gradient(circle, rgba(74,108,247,0.05) 0%, transparent 70%);
   animation: zapAboutOrb2 18s ease-in-out infinite;
}

.zap-about-orb-3 {
   top: 40%;
   left: 60%;
   width: 260px;
   height: 260px;
   background: radial-gradient(circle, rgba(3,26,61,0.035) 0%, transparent 70%);
   animation: zapAboutOrb1 22s ease-in-out infinite 4s;
}

@keyframes zapAboutOrb1 {
   0%, 100% { transform: translate(0, 0) scale(1); }
   33% { transform: translate(15px, -20px) scale(1.05); }
   66% { transform: translate(-10px, 15px) scale(0.97); }
}

@keyframes zapAboutOrb2 {
   0%, 100% { transform: translate(0, 0) scale(1); }
   50% { transform: translate(20px, -15px) scale(1.03); }
}

/* Section label */
.zap-about-label {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 12px;
   font-weight: 700;
   color: #233c77;
   text-transform: uppercase;
   letter-spacing: 3.5px;
   font-family: var(--tp-ff-poppins);
   background: rgba(35,60,119,0.06);
   border: 1px solid rgba(35,60,119,0.1);
   padding: 10px 22px;
   border-radius: 50px;
   margin-bottom: 24px;
}

.zap-about-label-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #233c77;
   animation: zapAboutDotPulse 2.5s ease-in-out infinite;
}

@keyframes zapAboutDotPulse {
   0%, 100% { opacity: 1; transform: scale(1); }
   50% { opacity: 0.4; transform: scale(0.7); }
}

/* Section heading */
.zap-about-heading {
   font-size: clamp(32px, 4.5vw, 52px);
   font-weight: 700;
   color: #1E293B;
   font-family: var(--tp-ff-playfair);
   line-height: 1.2;
   letter-spacing: -0.5px;
   margin: 0 0 20px;
}

.zap-about-heading-accent {
   color: #233c77;
   position: relative;
}

.zap-about-heading-accent::after {
   content: '';
   position: absolute;
   bottom: 2px;
   left: 0;
   right: 0;
   height: 8px;
   background: rgba(35,60,119,0.1);
   border-radius: 4px;
   z-index: -1;
}

/* Subtitle */
.zap-about-subtitle {
   font-size: 17px;
   color: rgba(15,23,42,0.55);
   font-family: var(--tp-ff-poppins);
   font-weight: 300;
   line-height: 1.8;
   max-width: 650px;
   margin: 0 auto;
}

/* ----- IMAGE MOSAIC ----- */
.zap-about-mosaic {
   position: relative;
   display: grid;
   grid-template-columns: 1.4fr 1fr;
   gap: 16px;
   max-width: 540px;
}

.zap-about-mosaic-main {
   grid-row: span 2;
   border-radius: 20px;
   overflow: hidden;
   position: relative;
   box-shadow: 0 20px 60px rgba(35,60,119,0.12);
}

.zap-about-mosaic-main img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.zap-about-mosaic-main:hover img {
   transform: scale(1.04);
}

/* ISO badge on image */
.zap-about-mosaic-badge {
   position: absolute;
   top: 16px;
   left: 16px;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 16px;
   background: rgba(255,255,255,0.85);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255,255,255,0.6);
   border-radius: 50px;
   font-size: 12px;
   font-weight: 600;
   color: #233c77;
   font-family: var(--tp-ff-poppins);
   box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.zap-about-mosaic-badge i {
   font-size: 14px;
}

/* Side stacked images */
.zap-about-mosaic-stack {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.zap-about-mosaic-sm {
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 12px 36px rgba(35,60,119,0.08);
   flex: 1;
}

.zap-about-mosaic-sm img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.zap-about-mosaic-sm:hover img {
   transform: scale(1.06);
}

/* Experience badge */
.zap-about-exp-badge {
   position: absolute;
   bottom: -16px;
   right: -10px;
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 16px 24px;
   background: #233c77;
   border-radius: 16px;
   box-shadow: 0 12px 40px rgba(35,60,119,0.3);
   z-index: 3;
}

.zap-about-exp-number {
   font-size: 36px;
   font-weight: 800;
   color: #fff;
   font-family: var(--tp-ff-playfair);
   line-height: 1;
}

.zap-about-exp-text {
   font-size: 12px;
   color: rgba(255,255,255,0.65);
   font-family: var(--tp-ff-poppins);
   font-weight: 400;
   line-height: 1.4;
   letter-spacing: 0.3px;
}

/* ----- RIGHT COLUMN ----- */
/* Highlight card */
.zap-about-highlight-card {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 20px 26px;
   background: #fff;
   border: 1px solid rgba(35,60,119,0.08);
   border-radius: 16px;
   margin-bottom: 32px;
   box-shadow: 0 4px 20px rgba(35,60,119,0.05);
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: default;
}

.zap-about-highlight-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 12px 40px rgba(35,60,119,0.1);
   border-color: rgba(35,60,119,0.15);
}

.zap-about-highlight-icon {
   width: 48px;
   height: 48px;
   min-width: 48px;
   background: linear-gradient(135deg, rgba(35,60,119,0.1), rgba(74,108,247,0.06));
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #233c77;
   font-size: 20px;
}

.zap-about-highlight-title {
   font-size: 16px;
   font-weight: 700;
   color: #1E293B;
   margin: 0 0 4px;
   line-height: 1.2;
   font-family: var(--tp-ff-poppins);
}

.zap-about-highlight-sub {
   font-size: 13px;
   color: rgba(15,23,42,0.45);
   margin: 0;
   line-height: 1;
   font-family: var(--tp-ff-poppins);
}

.zap-about-highlight-arrow {
   margin-left: auto;
   width: 32px;
   height: 32px;
   min-width: 32px;
   border-radius: 50%;
   background: rgba(35,60,119,0.06);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #233c77;
   font-size: 12px;
   transition: all 0.3s ease;
}

.zap-about-highlight-card:hover .zap-about-highlight-arrow {
   background: #233c77;
   color: #fff;
   transform: translateX(3px);
}

/* Description */
.zap-about-desc {
   font-size: 16px;
   color: rgba(15,23,42,0.55);
   line-height: 1.85;
   font-family: var(--tp-ff-poppins);
   font-weight: 300;
   margin-bottom: 32px;
}

/* "We Combine" title */
.zap-about-combine-title {
   font-size: 14px;
   font-weight: 700;
   color: #233c77;
   text-transform: uppercase;
   letter-spacing: 2px;
   font-family: var(--tp-ff-poppins);
   margin-bottom: 18px;
   display: flex;
   align-items: center;
   gap: 12px;
}

.zap-about-combine-title::after {
   content: '';
   flex: 1;
   height: 1px;
   background: linear-gradient(90deg, rgba(35,60,119,0.15), transparent);
}

/* Pillar items */
.zap-about-pillars {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
   margin-bottom: 32px;
}

.zap-about-pillar {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 16px;
   background: rgba(255,255,255,0.8);
   border: 1px solid rgba(35,60,119,0.07);
   border-radius: 14px;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: default;
}

.zap-about-pillar:hover {
   background: #fff;
   transform: translateY(-3px);
   box-shadow: 0 8px 28px rgba(35,60,119,0.08);
   border-color: rgba(35,60,119,0.12);
}

.zap-about-pillar-icon {
   width: 36px;
   height: 36px;
   min-width: 36px;
   border-radius: 10px;
   background: rgba(35,60,119,0.08);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #233c77;
   font-size: 14px;
   transition: all 0.3s ease;
}

.zap-about-pillar:hover .zap-about-pillar-icon {
   background: #233c77;
   color: #fff;
}

.zap-about-pillar-content strong {
   display: block;
   font-size: 13px;
   font-weight: 600;
   color: #1E293B;
   font-family: var(--tp-ff-poppins);
   margin-bottom: 3px;
   line-height: 1.3;
}

.zap-about-pillar-content span {
   font-size: 12px;
   color: rgba(15,23,42,0.4);
   font-family: var(--tp-ff-poppins);
   font-weight: 400;
   line-height: 1.3;
}

/* CTA Row */
.zap-about-cta-row {
   display: flex;
   align-items: center;
   gap: 24px;
   flex-wrap: wrap;
}

.zap-about-cta {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 16px 36px;
   background: #233c77;
   color: #fff;
   font-size: 15px;
   font-weight: 600;
   border-radius: 50px;
   text-decoration: none;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   font-family: var(--tp-ff-poppins);
   box-shadow: 0 8px 30px rgba(35,60,119,0.25);
}

.zap-about-cta:hover {
   background: #1a2e5a;
   color: #fff;
   transform: translateY(-3px);
   box-shadow: 0 16px 48px rgba(35,60,119,0.35);
}

.zap-about-cta i {
   transition: transform 0.3s ease;
}

.zap-about-cta:hover i {
   transform: translateX(4px);
}

/* Region badges */
.zap-about-regions {
   display: flex;
   gap: 10px;
}

.zap-about-region {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 16px;
   background: rgba(35,60,119,0.05);
   border: 1px solid rgba(35,60,119,0.1);
   border-radius: 50px;
   font-size: 13px;
   font-weight: 500;
   color: #233c77;
   font-family: var(--tp-ff-poppins);
}

.zap-about-region i {
   font-size: 14px;
}

/* ----- RESPONSIVE ----- */
@media (max-width: 991px) {
   .zap-about-2026 {
      padding: 100px 0 80px;
   }

   .zap-about-mosaic {
      max-width: 100%;
      margin-bottom: 20px;
   }

   .zap-about-pillars {
      grid-template-columns: 1fr;
   }

   .zap-about-heading {
      font-size: clamp(28px, 4vw, 40px);
   }

   .zap-about-exp-badge {
      bottom: -10px;
      right: 10px;
      padding: 12px 18px;
   }

   .zap-about-exp-number {
      font-size: 28px;
   }
}

@media (max-width: 575px) {
   .zap-about-mosaic {
      grid-template-columns: 1fr;
   }

   .zap-about-mosaic-main {
      grid-row: span 1;
   }

   .zap-about-mosaic-stack {
      flex-direction: row;
   }

   .zap-about-cta-row {
      flex-direction: column;
      align-items: flex-start;
   }

   .zap-about-exp-badge {
      position: relative;
      bottom: auto;
      right: auto;
      margin-top: 16px;
      display: inline-flex;
   }
}

/* -----------------------------------------------------------
   SCROLL PROGRESS BAR
   ----------------------------------------------------------- */
#scroll-progress {
   position: fixed;
   top: 0;
   left: 0;
   width: 0%;
   height: 3px;
   background: linear-gradient(90deg, #233c77 0%, #4a6cf7 50%, #233c77 100%);
   background-size: 200% 100%;
   z-index: 99999;
   transition: width 0.05s linear;
   box-shadow: 0 0 12px rgba(35, 60, 119, 0.4);
   animation: scrollGradientShift 3s linear infinite;
}

@keyframes scrollGradientShift {
   0% { background-position: 0% 0%; }
   100% { background-position: 200% 0%; }
}

/* -----------------------------------------------------------
   FLOATING ACTION ELEMENTS (Back-to-top + WhatsApp)
   ----------------------------------------------------------- */
.zap-floating-actions {
   position: fixed;
   bottom: 30px;
   right: 30px;
   z-index: 9999;
   display: flex;
   flex-direction: column;
   gap: 12px;
   align-items: center;
}

.zap-back-to-top {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: rgba(35, 60, 119, 0.9);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.15);
   color: #fff;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transform: translateY(20px);
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 8px 32px rgba(35, 60, 119, 0.3);
   pointer-events: none;
}

.zap-back-to-top.visible {
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
}

.zap-back-to-top:hover {
   background: #233c77;
   transform: translateY(-4px);
   box-shadow: 0 12px 40px rgba(35, 60, 119, 0.5);
}

.zap-whatsapp-float {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: #25D366;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   box-shadow: 0 8px 32px rgba(37, 211, 102, 0.4);
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.zap-whatsapp-float:hover {
   transform: scale(1.1) translateY(-4px);
   box-shadow: 0 12px 40px rgba(37, 211, 102, 0.6);
   color: #fff;
}

@keyframes zapWhatsappPulse {
   0%, 100% { box-shadow: 0 8px 32px rgba(37, 211, 102, 0.4); }
   50% { box-shadow: 0 8px 32px rgba(37, 211, 102, 0.4), 0 0 0 14px rgba(37, 211, 102, 0.08); }
}

/* -----------------------------------------------------------
   GLASSMORPHISM STATS COUNTER SECTION
   ----------------------------------------------------------- */
.zap-stats-section {
   background: linear-gradient(135deg, #0f1b3d 0%, #1a2e5a 50%, #233c77 100%);
   padding: 100px 0;
   position: relative;
   overflow: hidden;
}

.zap-stats-section::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 20% 50%, rgba(74, 108, 247, 0.15) 0%, transparent 60%),
               radial-gradient(ellipse at 80% 50%, rgba(35, 60, 119, 0.2) 0%, transparent 60%);
   pointer-events: none;
}

.zap-stats-section::after {
   content: '';
   position: absolute;
   inset: 0;
   background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
   background-size: 30px 30px;
   pointer-events: none;
}

.zap-stat-card {
   text-align: center;
   padding: 40px 24px;
   background: rgba(255, 255, 255, 0.06);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 20px;
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   z-index: 1;
}

.zap-stat-card:hover {
   background: rgba(255, 255, 255, 0.1);
   transform: translateY(-8px);
   border-color: rgba(255, 255, 255, 0.2);
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.zap-stat-icon {
   width: 48px;
   height: 48px;
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 20px;
   color: rgba(255, 255, 255, 0.6);
   font-size: 20px;
}

.zap-stat-number {
   font-size: 56px;
   font-weight: 800;
   color: #fff;
   font-family: var(--tp-ff-playfair);
   line-height: 1;
   margin-bottom: 8px;
   background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.zap-stat-label {
   font-size: 14px;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.5);
   text-transform: uppercase;
   letter-spacing: 3px;
   font-family: var(--tp-ff-poppins);
}

/* -----------------------------------------------------------
   TECH/TRUST MARQUEE
   ----------------------------------------------------------- */
.zap-marquee-section {
   background: linear-gradient(135deg, #FFFFFF 0%, #F0F3F8 50%, #FFFFFF 100%);
   padding: 80px 0;
   overflow: hidden;
   position: relative;
   border-top: 1px solid rgba(0, 0, 0, 0.04);
   border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.zap-marquee-track {
   display: flex;
   gap: 40px;
   animation: zapMarqueeScroll 35s linear infinite;
   width: max-content;
}

.zap-marquee-track:hover {
   animation-play-state: paused;
}

@keyframes zapMarqueeScroll {
   0% { transform: translateX(0); }
   100% { transform: translateX(-50%); }
}

.zap-marquee-item {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   padding: 14px 28px;
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(8px);
   border: 1px solid rgba(35, 60, 119, 0.08);
   border-radius: 60px;
   white-space: nowrap;
   transition: all 0.3s ease;
   cursor: default;
}

.zap-marquee-item:hover {
   background: #fff;
   border-color: rgba(35, 60, 119, 0.15);
   box-shadow: 0 8px 30px rgba(35, 60, 119, 0.08);
   transform: translateY(-2px);
}

.zap-marquee-item i {
   color: #233c77;
   font-size: 18px;
}

.zap-marquee-item span {
   font-size: 14px;
   font-weight: 600;
   color: #1E293B;
   font-family: var(--tp-ff-poppins);
   letter-spacing: 0.5px;
}

/* -----------------------------------------------------------
   BENTO GRID — "WHY ZAPPROACH"
   ----------------------------------------------------------- */
.zap-bento-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
}

@media (max-width: 991px) {
   .zap-bento-grid {
      grid-template-columns: repeat(2, 1fr);
   }
   .zap-bento-grid .zap-bento-wide {
      grid-column: span 2;
   }
}

@media (max-width: 575px) {
   .zap-bento-grid {
      grid-template-columns: 1fr;
   }
   .zap-bento-grid .zap-bento-wide {
      grid-column: span 1;
   }
}

.zap-bento-card {
   padding: 36px 30px;
   background: #fff;
   border: 1px solid rgba(35, 60, 119, 0.08);
   border-radius: 20px;
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   overflow: hidden;
}

.zap-bento-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, transparent, #233c77, transparent);
   opacity: 0;
   transition: opacity 0.4s ease;
}

.zap-bento-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 20px 60px rgba(35, 60, 119, 0.1);
   border-color: rgba(35, 60, 119, 0.15);
}

.zap-bento-card:hover::before {
   opacity: 1;
}

.zap-bento-card.featured {
   background: linear-gradient(135deg, #233c77, #1a2e5a);
   border-color: transparent;
}

.zap-bento-card.featured::before {
   background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

.zap-bento-card.featured:hover {
   box-shadow: 0 20px 60px rgba(35, 60, 119, 0.3);
}

.zap-bento-icon {
   width: 52px;
   height: 52px;
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   font-size: 22px;
}

/* -----------------------------------------------------------
   AURORA GRADIENT TEXT EFFECT
   ----------------------------------------------------------- */
.zap-aurora-text {
   background: linear-gradient(135deg, #233c77 0%, #4a6cf7 25%, #233c77 50%, #4a6cf7 75%, #233c77 100%);
   background-size: 300% 300%;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   animation: zapAuroraShift 6s ease-in-out infinite;
}

@keyframes zapAuroraShift {
   0%, 100% { background-position: 0% 50%; }
   50% { background-position: 100% 50%; }
}

/* -----------------------------------------------------------
   ANIMATED SECTION DIVIDER
   ----------------------------------------------------------- */
.zap-section-divider {
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(35, 60, 119, 0.15), rgba(74, 108, 247, 0.1), rgba(35, 60, 119, 0.15), transparent);
   background-size: 200% 100%;
   animation: zapDividerShift 4s linear infinite;
   margin: 0;
}

@keyframes zapDividerShift {
   0% { background-position: 0% 0%; }
   100% { background-position: 200% 0%; }
}

/* -----------------------------------------------------------
   ENHANCED MICRO-INTERACTIONS
   ----------------------------------------------------------- */
/* CTA hover lift */
.zaccbox-cta:hover, .zsettle-cta:hover, .zcompli-cta:hover,
.healthtech-cta:hover, .customdev-cta:hover, .infra-cta:hover {
   transform: translateY(-3px) !important;
   box-shadow: 0 16px 48px rgba(35, 60, 119, 0.35) !important;
}

/* Card hover float */
.zaccbox-card:hover, .zsettle-card:hover, .zcompli-card:hover,
.healthtech-card:hover, .customdev-card:hover, .infra-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 24px rgba(35, 60, 119, 0.08);
   border-color: rgba(35, 60, 119, 0.15) !important;
}

.zaccbox-pill:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 16px rgba(35, 60, 119, 0.08);
}

/* Smooth image hover zoom */
.tp-about-thumb-wrapper img {
   transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tp-about-thumb-wrapper:hover img {
   transform: scale(1.03);
}

/* Active nav link indicator */
.tp-header-4__menu nav ul > li > a.nav-scroll-link.active {
   color: #233c77 !important;
}

/* -----------------------------------------------------------
   SCROLL-REVEAL ANIMATION
   ----------------------------------------------------------- */
.zap-reveal {
   opacity: 0;
   transform: translateY(30px);
   transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.zap-reveal.revealed {
   opacity: 1;
   transform: translateY(0);
}

/* -----------------------------------------------------------
   FOOTER MODERNIZATION
   ----------------------------------------------------------- */
.site-footer::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

/* -----------------------------------------------------------
   RESPONSIVE ADJUSTMENTS
   ----------------------------------------------------------- */
@media (max-width: 767px) {
   .zap-stat-number {
      font-size: 40px;
   }
   .zap-floating-actions {
      bottom: 20px;
      right: 16px;
   }
   .zap-whatsapp-float {
      width: 48px;
      height: 48px;
   }
   .zap-whatsapp-float i {
      font-size: 24px;
   }
   .zap-stat-card {
      padding: 28px 16px;
   }
   .zap-stats-section {
      padding: 70px 0;
   }
   .zap-marquee-section {
      padding: 50px 0;
   }
}

@media (max-width: 991px) {
   .zap-bento-card.featured {
      grid-column: span 1;
   }
}