/* NetPro SaaS visual layer — keeps hybrid/main layout, adds dark tech polish */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

.np-root[data-theme="dark"] {
  --np-accent: #f97316;
  --np-bg: #030712;
  --np-bg2: #0b1220;
  --np-glass: rgba(3, 7, 18, 0.82);
  --np-text: #f1f5f9;
  --np-muted: #94a3b8;
  --np-line: rgba(255, 255, 255, 0.08);
  --np-display: "Space Grotesk", "Noto Sans Hebrew", system-ui, sans-serif;
}

.np-root[data-theme="dark"] .np-body {
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -15%, rgba(139, 92, 246, 0.22), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 10%, rgba(34, 211, 238, 0.08), transparent 50%),
    linear-gradient(180deg, #0b1220 0%, #030712 100%);
}

.np-root[data-theme="dark"] .np-intro,
.np-root[data-theme="dark"] .np-services-10,
.np-root[data-theme="dark"] .np-section {
  background: transparent;
}

.np-root[data-theme="dark"] .np-svc-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

.np-root[data-theme="dark"] .np-svc-card:hover {
  border-color: rgba(139, 92, 246, 0.45);
  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.12);
}

.np-root[data-theme="dark"] .np-svc-card__icon {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
}

.np-root[data-theme="dark"] .np-section-title,
.np-root[data-theme="dark"] .np-intro-title,
.np-root[data-theme="dark"] .np-sector-title,
.np-root[data-theme="dark"] .np-kicker {
  font-family: var(--np-display);
}

.np-root[data-theme="dark"] .np-kicker {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(139, 92, 246, 0.35);
  background: rgba(139, 92, 246, 0.1);
  color: #c4b5fd;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.np-root[data-theme="dark"] .np-cta-panel {
  border-color: rgba(139, 92, 246, 0.35);
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.6), rgba(3, 7, 18, 0.9));
}

.np-root[data-theme="dark"] .np-glass,
.np-root[data-theme="dark"] .np-glass-strip {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.np-root[data-theme="dark"] .np-media-tile,
.np-root[data-theme="dark"] .np-video-frame {
  background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 50%, #030712 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--np-radius);
}

.np-root[data-theme="dark"] .np-hero-full__shade {
  background: linear-gradient(
    180deg,
    rgba(3, 7, 18, 0.35) 0%,
    transparent 40%,
    transparent 70%,
    rgba(3, 7, 18, 0.5) 100%
  );
}

.np-root[data-theme="dark"] .np-header--home.is-scrolled,
.np-root[data-theme="dark"] .np-header--home,
.np-root[data-theme="dark"] .np-header.is-scrolled {
  background: var(--np-bg2);
  background-color: var(--np-bg2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.np-root[data-theme="dark"] .np-mega {
  background: rgba(11, 18, 32, 0.98);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.np-root[data-theme="dark"] .np-trust-bar-ph {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #64748b;
}

/* Tech stack band (homepage optional block) */
.np-tech-stack {
  padding: 2.5rem 0;
  border-block: 1px solid var(--np-line);
}

.np-tech-stack-label {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--np-muted);
  margin: 0 0 1.25rem;
}

.np-tech-stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.65rem;
  max-width: 720px;
  margin-inline: auto;
}

.np-tech-pill {
  padding: 0.65rem 0.5rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--np-muted);
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: rgba(255, 255, 255, 0.03);
  transition:
    border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.np-root[data-theme="dark"] .np-tech-pill:hover {
  border-color: rgba(34, 211, 238, 0.4);
  color: #f1f5f9;
}