/* ============================================================
   CYBERSECURITY BANNER
   ============================================================ */
.cyber {
  padding: var(--section-y) 0; background: var(--bg-dark);
  position: relative; overflow: hidden;
}
.cyber::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(37,99,235,0.08), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(99,102,241,0.05), transparent 50%);
}
.cyber-mesh {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}
.cyber-body { position: relative; z-index: 1; text-align: center; }

.cyber-icon-wrap {
  width: 72px; height: 72px; border-radius: 50%;
  margin: 0 auto 24px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(96,165,250,0.25);
  background: radial-gradient(circle, rgba(59,130,246,0.08), transparent 70%);
  animation: shPulse 3s ease-in-out infinite;
}
@keyframes shPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.12); }
  50% { box-shadow: 0 0 0 18px transparent; }
}
.cyber-icon-wrap svg { width: 30px; height: 30px; stroke: var(--primary-400); stroke-width: 1.5; }

.cyber h2 {
  font-size: clamp(24px, 3.8vw, 38px); font-weight: 800;
  color: var(--text-on-dark); letter-spacing: -0.025em; margin-bottom: 12px;
}
.cyber h2 em { font-style: normal; color: var(--primary-400); }

.cyber-desc {
  font-size: 15.5px; color: var(--text-muted-dark); max-width: 540px;
  margin: 0 auto; line-height: 1.75;
}

.cyber-pills {
  display: flex; justify-content: center; gap: 12px;
  flex-wrap: wrap; margin-top: 32px;
}
.cyber-pill {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 100px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  font-size: 12.5px; font-weight: 600; color: var(--text-300);
}
.cyber-pill svg { width: 14px; height: 14px; stroke: var(--primary-400); stroke-width: 1.5; }

@media (max-width: 768px) {
  .cyber-pills { flex-direction: column; align-items: center; }
}