/* Lucide-aligned icon helpers for static landing (stroke 1.75, sizes 16/20/24) */
:root {
  --icon-muted: #8b97ab;
  --icon-active: #f4f7fb;
  --icon-brand: #00ff88;
  --nzo-icon-stroke: 1.75;
}

.nzo-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: var(--nzo-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--icon-muted);
}

.nzo-icon-sm { width: 16px; height: 16px; }
.nzo-icon-md { width: 20px; height: 20px; }
.nzo-icon-lg { width: 24px; height: 24px; }

.nzo-icon-active { color: var(--icon-active); }
.nzo-icon-brand { color: var(--icon-brand); }

/* Docs: mesmo glifo BookOpen — acento de marca em hover/activo */
a[data-cta="docs"] {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

a[data-cta="docs"] .nzo-icon-docs {
  color: var(--icon-muted);
  transition: color 0.15s ease;
}

a[data-cta="docs"]:hover .nzo-icon-docs,
a[data-cta="docs"]:focus-visible .nzo-icon-docs,
a[data-cta="docs"].active .nzo-icon-docs {
  color: var(--icon-brand);
}

.lang-trigger-icon.nzo-icon {
  color: var(--icon-muted);
}

.lang-trigger:hover .lang-trigger-icon.nzo-icon,
.lang-trigger[aria-expanded="true"] .lang-trigger-icon.nzo-icon {
  color: var(--icon-brand);
}

.footer-socials a .nzo-icon {
  color: var(--icon-muted);
  transition: color 0.15s ease;
}

.footer-socials a:hover .nzo-icon,
.footer-socials a:focus-visible .nzo-icon {
  color: var(--icon-brand);
}