/* ==========================================================================
   SYNAPSE — services-dark.css
   Variante escura da seção "Serviços" (#services). Escopado por ID para não
   afetar nenhum outro card/section do template. Reutiliza os tokens de cor
   já definidos em hero-synapse.css (--syn-*) para manter a identidade visual.
   ========================================================================== */

#services.services--dark {
  position: relative;
  background: linear-gradient(160deg, #060B18 0%, #0B1730 55%, #10224A 100%);
  overflow: hidden;
}

/* leve textura de "rede" no fundo, sutil, sem concorrer com o conteúdo */
#services.services--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(90, 200, 250, 0.14) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.35;
}

#services.services--dark .container {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------------------
   Título e Cabeçalho da Seção
   ------------------------------------------------------------------------ */
#services.services--dark h2 {
  color: #FFFFFF !important;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  position: relative;
  display: inline-block;
}

#services.services--dark h2::after {
  content: "";
  display: block;
  width: 38px;
  height: 3px;
  background: var(--syn-signal-blue, #5AC8FA);
  border-radius: 2px;
  margin-top: 0.75rem;
}

#services.services--dark p.fs-5,
#services.services--dark .text-opacity-70 {
  color: var(--syn-mist, #A9BEDD) !important;
  opacity: 1 !important;
}

/* ------------------------------------------------------------------------
   Cards de serviço
   ------------------------------------------------------------------------ */
#services.services--dark .service-card {
  --bs-card-border-radius: 20px;
  --bs-card-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(90, 200, 250, 0.18);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s var(--syn-ease-soft, ease), box-shadow 0.3s var(--syn-ease-soft, ease),
    border-color 0.3s var(--syn-ease-soft, ease), background 0.3s var(--syn-ease-soft, ease);
  color: rgba(255, 255, 255, 0.92);
}

#services.services--dark .service-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(90, 200, 250, 0.4);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

#services.services--dark .service-card h5 {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

#services.services--dark .service-card p {
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 0.95rem;
  line-height: 1.6;
}

#services.services--dark .service-card__icon {
  width: 64px;
  height: 64px;
  background: rgba(90, 200, 250, 0.12);
  border: 1px solid rgba(90, 200, 250, 0.28);
  color: var(--syn-signal-blue, #5AC8FA);
  font-size: 1.6rem;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

#services.services--dark .service-card:hover .service-card__icon {
  background: rgba(90, 200, 250, 0.22);
  border-color: rgba(90, 200, 250, 0.5);
  transform: scale(1.05);
}

/* ------------------------------------------------------------------------
   CTA "Conheça todos os serviços"
   ------------------------------------------------------------------------ */
#services.services--dark .service-cta {
  border-color: rgba(255, 255, 255, 0.25) !important;
}

#services.services--dark .service-cta:hover {
  border-color: rgba(90, 200, 250, 0.55) !important;
}

/* ------------------------------------------------------------------------
   Responsivo — segue o mesmo breakpoint do restante do template
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  #services.services--dark .service-card {
    text-align: left;
  }
}