/* Camada visual complementar da JN — ilustrações vetoriais locais e leves */
.hero-visual::before {
  content: '';
  position: absolute;
  inset: -8% -10%;
  z-index: 0;
  pointer-events: none;
  background: url('assets/hero-infrastructure.svg') center/contain no-repeat;
  opacity: .30;
  filter: saturate(1.12) drop-shadow(0 26px 70px rgba(0, 102, 255, .12));
  transform: scale(1.03);
}

.hero-visual .visual-orbit { z-index: 1; opacity: .68; }
.hero-visual .tech-panel,
.hero-visual .floating-card { z-index: 3; }

.service-card::before {
  content: '';
  position: absolute;
  z-index: 0;
  right: -14px;
  bottom: -8px;
  width: 190px;
  height: 112px;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .14;
  filter: saturate(1.08);
  transform: translateY(8px) scale(.98);
  transition: opacity .28s ease, transform .28s ease;
  -webkit-mask-image: linear-gradient(130deg, transparent 2%, #000 38%, #000 100%);
  mask-image: linear-gradient(130deg, transparent 2%, #000 38%, #000 100%);
}

.service-card:hover::before {
  opacity: .28;
  transform: translateY(0) scale(1.02);
}

.service-card:nth-child(1)::before {
  background-image: url('assets/service-support.svg');
  width: 340px;
  height: 195px;
  right: 4px;
  bottom: 3px;
  opacity: .11;
}

.service-card:nth-child(2)::before { background-image: url('assets/service-servers.svg'); }
.service-card:nth-child(3)::before { background-image: url('assets/service-network.svg'); }
.service-card:nth-child(4)::before { background-image: url('assets/service-security.svg'); }
.service-card:nth-child(5)::before { background-image: url('assets/service-cctv.svg'); }
.service-card:nth-child(6)::before {
  background-image: url('assets/service-erp.svg');
  width: 310px;
  height: 155px;
  right: 8px;
  bottom: 7px;
  opacity: .10;
}

.service-card:nth-child(2),
.service-card:nth-child(3),
.service-card:nth-child(4),
.service-card:nth-child(5) {
  min-height: 315px;
}

.service-card:nth-child(2) .service-content,
.service-card:nth-child(3) .service-content,
.service-card:nth-child(4) .service-content,
.service-card:nth-child(5) .service-content {
  max-width: 82%;
}

/* Linha luminosa sutil para reforçar a identidade tecnológica */
.service-card::marker { display: none; }
.service-card .service-icon {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 28px rgba(8,102,255,.05);
}

@media (max-width: 980px) {
  .hero-visual::before { inset: 0; opacity: .22; }
  .service-card::before { opacity: .11; }
  .service-card:hover::before { opacity: .18; }
}

@media (max-width: 680px) {
  .hero-visual::before {
    inset: 2% -12%;
    opacity: .18;
    transform: scale(.94);
  }

  .service-card::before {
    width: 160px;
    height: 96px;
    right: -10px;
    opacity: .10;
  }

  .service-card:nth-child(1)::before,
  .service-card:nth-child(6)::before {
    width: 210px;
    height: 120px;
    opacity: .08;
  }
}

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