/* CyberAI VPN — featured SaaS spotlight on Services page */

.svpn-spotlight {
  --svpn-cyan: #37c0ff;
  --svpn-cyan-dim: rgba(55, 192, 255, .14);
  --svpn-border: rgba(55, 192, 255, .28);
  --svpn-text: #eaf3f9;
  --svpn-muted: #a6c0d3;
  width: min(1160px, calc(100% - 32px));
  margin: 0 auto 28px;
  padding: clamp(24px, 4vw, 36px);
  border-radius: 16px;
  background:
    radial-gradient(ellipse 70% 80% at 100% 0%, rgba(55, 192, 255, .12), transparent),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(255, 138, 0, .06), transparent),
    rgba(6, 34, 55, .92);
  border: 1px solid var(--svpn-border);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .28);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 4vw, 36px);
  align-items: center;
  animation: svpn-fade-in .6s ease both;
}

@keyframes svpn-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.svpn-visual {
  position: relative;
  width: clamp(88px, 14vw, 120px);
  height: clamp(100px, 16vw, 136px);
  flex-shrink: 0;
}

.svpn-ring {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 100%;
  height: 100%;
  margin: -50% 0 0 -50%;
  border-radius: 50%;
  border: 1px solid rgba(55, 192, 255, .22);
  animation: svpn-pulse 3.2s ease-in-out infinite;
}

.svpn-ring:nth-child(2) { animation-delay: .8s; opacity: .65; }
.svpn-ring:nth-child(3) { animation-delay: 1.6s; opacity: .35; }

@keyframes svpn-pulse {
  0%, 100% { transform: scale(.85); opacity: .4; }
  50%      { transform: scale(1.08); opacity: .9; }
}

.svpn-shield {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(55, 192, 255, .35));
}

.svpn-check {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: svpn-check-draw .8s ease .4s forwards;
}

@keyframes svpn-check-draw {
  to { stroke-dashoffset: 0; }
}

.svpn-body { min-width: 0; }

.svpn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: var(--svpn-cyan-dim);
  border: 1px solid var(--svpn-border);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--svpn-cyan);
}

.svpn-title {
  margin: 0 0 10px;
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--svpn-text);
}

.svpn-title em {
  font-style: normal;
  color: var(--svpn-cyan);
}

.svpn-lead {
  margin: 0 0 16px;
  font-size: .98rem;
  line-height: 1.6;
  color: var(--svpn-muted);
  max-width: 52ch;
}

.svpn-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.svpn-stat {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(55, 192, 255, .08);
  border: 1px solid rgba(55, 192, 255, .2);
  font-size: .78rem;
  font-weight: 600;
  color: var(--svpn-text);
  letter-spacing: .02em;
}

.svpn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.svpn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: .92rem;
  font-weight: 650;
  text-decoration: none;
  transition: filter .15s, transform .15s;
}

.svpn-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

.svpn-btn--primary {
  background: linear-gradient(135deg, #0891b2, var(--svpn-cyan));
  color: #041a27;
  border: none;
}

.svpn-btn--ghost {
  background: transparent;
  color: var(--svpn-cyan);
  border: 2px solid var(--svpn-border);
}

.svpn-btn--ghost:hover {
  background: rgba(55, 192, 255, .1);
}

@media (max-width: 640px) {
  .svpn-spotlight {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .svpn-visual {
    margin: 0 auto;
  }

  .svpn-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .svpn-stats,
  .svpn-actions {
    justify-content: center;
  }

  .svpn-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svpn-spotlight,
  .svpn-ring,
  .svpn-check {
    animation: none;
  }

  .svpn-check {
    stroke-dashoffset: 0;
  }
}