/* Os cards ficam neutros; a cor aparece apenas quando o visitante passa o mouse. */
.service-card {
  background: rgba(9, 21, 42, 0.92);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card-web,
.service-card-automation,
.service-card-mobile {
  background: rgba(9, 21, 42, 0.92);
  background-image: none;
  border-color: var(--line);
  animation: none;
}

.service-card-web::before,
.service-card-automation::before,
.service-card-mobile::before {
  opacity: 0;
  animation: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.service-card-mobile::after {
  display: none;
}

.service-card:hover {
  transform: translateY(-5px);
}

.service-card-web:hover,
.service-card-automation:hover {
  border-color: rgba(2, 201, 245, 0.72);
  box-shadow: 0 18px 42px rgba(2, 201, 245, 0.15);
}

.service-card-mobile:hover {
  border-color: rgba(255, 121, 0, 0.75);
  box-shadow: 0 18px 42px rgba(255, 121, 0, 0.16);
}

.service-card-web:hover::before,
.service-card-automation:hover::before,
.service-card-mobile:hover::before {
  opacity: 1;
  transform: scale(1.13);
}

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card-web::before,
  .service-card-automation::before,
  .service-card-mobile::before { transition: none; }
}

/* Portfólio: destaque delicado somente ao passar o mouse. */
.project-card {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.project-card:hover {
  border-color: rgba(2, 201, 245, 0.52);
  box-shadow: 0 10px 28px rgba(2, 201, 245, 0.1);
}

.project-card:nth-child(2):hover {
  border-color: rgba(255, 121, 0, 0.52);
  box-shadow: 0 10px 28px rgba(255, 121, 0, 0.1);
}