#services .card-fingerprint {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.02) 0px,
    rgba(255, 255, 255, 0.02) 1px,
    transparent 1px,
    transparent 3px
  );
  background-blend-mode: screen;
}

#services .supercharged-zone.effect-supercharged-01 {
  opacity: var(--in-view-ratio, 0);                   
  transform: scale(calc(0.98 + var(--in-view-ratio, 0) * 0.02)); 
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;

  background: linear-gradient(135deg, #0e111c, #2a3550);
  border: 1px solid #2fc646;
  animation: border-pulse-supercharged 1.8s infinite; 

  padding: 40px 30px;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0,255,200,0.1);
  color: #e0e0e0;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

#services .supercharged-zone.effect-supercharged-01:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 30px rgba(0,255,200,0.4),
    0 0 10px rgba(0,255,255,0.1) inset;
}

@keyframes border-pulse-supercharged {
  0%   { box-shadow: 0 0 0 0 rgba(47,198,70,0.3); }
  70%  { box-shadow: 0 0 0 10px rgba(47,198,70,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,198,70,0); }
}

#services .supercharged-zone.effect-supercharged-01 .card-particles {
  position: absolute;
  inset: 0;
  z-index: 3;                        
  pointer-events: none;
}

#services .supercharged-zone .card-fingerprint {
  position: absolute;
  inset: 0;
  z-index: 1;                        
  pointer-events: none;
  background: repeating-radial-gradient(
    circle at center,
    rgba(255,255,255,0.02) 0px,
    rgba(255,255,255,0.02) 1px,
    transparent 1px,
    transparent 3px
  );
  background-blend-mode: screen;
}

.card-particles {
  overflow: hidden;   
}

#services .service-card.effect-custom-02 {
  opacity: var(--in-view-ratio, 0);
  transform: scale(calc(0.98 + var(--in-view-ratio, 0) * 0.02));
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

#services .service-card.effect-custom-02:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

@keyframes border-pulse-custom-02 {
  0% {
    box-shadow: 0 0 0 0 rgba(47, 198, 70, 0.3);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(47, 198, 70, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(47, 198, 70, 0);
  }
}
#services .service-card.effect-custom-02 {
  border: 1px solid #2fc646;
  animation: border-pulse-custom-02 1.8s infinite;
}

#services .service-card.effect-custom-02 .card-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#services .service-card .card-fingerprint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0; 

  background: repeating-radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.02) 0px,
    rgba(255, 255, 255, 0.02) 1px,
    transparent 1px,
    transparent 3px
  );
  background-blend-mode: screen;

}

@media (max-width: 768px) {
  #services .service-card.effect-custom-02 {
    opacity: 1 !important;
    
    transform: scale(1) !important;
    transition: opacity 0s linear !important;
  }

  #services .service-card.effect-custom-02 .card-fingerprint {
    will-change: auto !important;
    transform: none !important;
  }
}