/* ═══════════════════════════════════════════════════════════════════════════
   NexaCard — nexacard.css
   Utility-hybrid stylesheet with nx- prefix.
   Aesthetic: clean fintech/data-journalism — white, deep navy, electric cyan.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Custom Properties ──────────────────────────────────────────────────── */
:root {
  /* Palette */
  --nx-white:        #ffffff;
  --nx-bg:           #f8fafc;
  --nx-bg-alt:       #f1f5f9;
  --nx-surface:      #e2e8f0;
  --nx-navy-950:     #0f172a;
  --nx-navy-900:     #1e293b;
  --nx-navy-800:     #334155;
  --nx-navy-600:     #475569;
  --nx-navy-400:     #94a3b8;
  --nx-navy-200:     #cbd5e1;
  --nx-navy-100:     #e2e8f0;
  --nx-cyan:         #06b6d4;
  --nx-cyan-dark:    #0891b2;
  --nx-cyan-light:   #67e8f9;
  --nx-cyan-muted:   rgba(6, 182, 212, 0.1);
  --nx-cyan-border:  rgba(6, 182, 212, 0.3);
  --nx-green:        #10b981;
  --nx-amber:        #f59e0b;
  --nx-red:          #ef4444;

  /* Typography */
  --nx-font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nx-mono:      'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Type scale */
  --nx-text-2xs:   0.65rem;
  --nx-text-xs:    0.75rem;
  --nx-text-sm:    0.8125rem;
  --nx-text-base:  1rem;
  --nx-text-md:    1.125rem;
  --nx-text-lg:    1.25rem;
  --nx-text-xl:    1.5rem;
  --nx-text-2xl:   2rem;
  --nx-text-3xl:   2.5rem;
  --nx-text-4xl:   3.25rem;
  --nx-text-display: clamp(2.5rem, 5vw + 1rem, 4.5rem);

  /* Spacing */
  --nx-1:   0.25rem;
  --nx-2:   0.5rem;
  --nx-3:   0.75rem;
  --nx-4:   1rem;
  --nx-5:   1.25rem;
  --nx-6:   1.5rem;
  --nx-8:   2rem;
  --nx-10:  2.5rem;
  --nx-12:  3rem;
  --nx-16:  4rem;
  --nx-20:  5rem;
  --nx-24:  6rem;

  /* Layout */
  --nx-max-w:    1240px;
  --nx-gutter:   clamp(1rem, 4vw, 2.5rem);
  --nx-radius:   4px;
  --nx-radius-md: 6px;
  --nx-radius-lg: 10px;

  /* Borders */
  --nx-border:       1px solid var(--nx-navy-100);
  --nx-border-cyan:  1px solid var(--nx-cyan-border);
  --nx-border-navy:  1px solid var(--nx-navy-800);

  /* Shadows */
  --nx-shadow-sm:  0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --nx-shadow-md:  0 4px 12px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04);
  --nx-shadow-lg:  0 8px 24px rgba(15,23,42,0.12);
  --nx-shadow-cyan: 0 0 0 3px rgba(6,182,212,0.15);

  /* Transitions */
  --nx-ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --nx-fast:     120ms;
  --nx-normal:   200ms;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--nx-font);
  font-size: var(--nx-text-base);
  color: var(--nx-navy-900);
  background: var(--nx-white);
  line-height: 1.6;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
::selection { background: var(--nx-cyan-muted); color: var(--nx-cyan-dark); }

/* ── Skip Link ───────────────────────────────────────────────────────────── */
.nx-skip-link {
  position: absolute; top: -100%; left: var(--nx-4);
  padding: var(--nx-2) var(--nx-6);
  background: var(--nx-cyan); color: var(--nx-navy-950);
  font-weight: 700; font-size: var(--nx-text-sm);
  border-radius: var(--nx-radius); z-index: 9999;
  transition: top var(--nx-fast);
}
.nx-skip-link:focus { top: var(--nx-2); }
:focus-visible {
  outline: 2px solid var(--nx-cyan);
  outline-offset: 2px;
  border-radius: var(--nx-radius);
}

/* ── Container ───────────────────────────────────────────────────────────── */
.nx-container {
  width: 100%;
  max-width: var(--nx-max-w);
  margin-inline: auto;
  padding-inline: var(--nx-gutter);
}

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.nx-topbar {
  background: var(--nx-navy-950);
  padding: var(--nx-2) var(--nx-gutter);
  text-align: center;
}
.nx-topbar-text {
  font-family: var(--nx-mono);
  font-size: var(--nx-text-2xs);
  color: var(--nx-cyan-light);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.nx-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nx-white);
  border-bottom: var(--nx-border);
  box-shadow: var(--nx-shadow-sm);
}
.nx-header-inner {
  display: flex;
  align-items: center;
  gap: var(--nx-8);
  height: 60px;
}

/* ── Logo ────────────────────────────────────────────────────────────────── */
.nx-logo {
  display: flex;
  align-items: center;
  gap: var(--nx-2);
  flex-shrink: 0;
  text-decoration: none;
}
.nx-logo-mark { color: var(--nx-cyan); display: flex; }
.nx-logo-name {
  font-family: var(--nx-mono);
  font-size: var(--nx-text-lg);
  font-weight: 600;
  color: var(--nx-navy-950);
  letter-spacing: -0.03em;
}

/* ── Mobile toggle ───────────────────────────────────────────────────────── */
.nx-mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--nx-2);
  margin-left: auto;
  border-radius: var(--nx-radius);
}
.nx-toggle-bar {
  display: block;
  width: 20px; height: 2px;
  background: var(--nx-navy-900);
  border-radius: 1px;
  transition: transform var(--nx-fast), opacity var(--nx-fast);
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nx-nav {
  display: flex;
  align-items: center;
  gap: var(--nx-1);
  margin-left: auto;
}
.nx-nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--nx-1);
  padding: var(--nx-2) var(--nx-3);
  font-size: var(--nx-text-sm);
  font-weight: 500;
  color: var(--nx-navy-600);
  border-radius: var(--nx-radius);
  white-space: nowrap;
  transition: color var(--nx-fast), background var(--nx-fast);
}
.nx-nav-link:hover,
.nx-nav-link.nx-active {
  color: var(--nx-cyan-dark);
  background: var(--nx-cyan-muted);
}
.nx-nav-dropdown { position: relative; }
.nx-nav-dropdown-btn { cursor: pointer; }
.nx-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + var(--nx-2));
  left: 50%;
  transform: translateX(-50%);
  min-width: 210px;
  background: var(--nx-white);
  border: var(--nx-border);
  border-radius: var(--nx-radius-md);
  padding: var(--nx-2);
  box-shadow: var(--nx-shadow-lg);
  z-index: 200;
  flex-direction: column;
  gap: var(--nx-1);
}
.nx-nav-dropdown:hover .nx-dropdown-panel,
.nx-nav-dropdown:focus-within .nx-dropdown-panel {
  display: flex;
}
.nx-dropdown-item {
  display: block;
  padding: var(--nx-2) var(--nx-4);
  font-size: var(--nx-text-sm);
  color: var(--nx-navy-600);
  border-radius: var(--nx-radius);
  transition: color var(--nx-fast), background var(--nx-fast);
}
.nx-dropdown-item:hover {
  color: var(--nx-cyan-dark);
  background: var(--nx-cyan-muted);
}

/* ── Main ────────────────────────────────────────────────────────────────── */
.nx-main { flex: 1; }

/* ── Loading ─────────────────────────────────────────────────────────────── */
.nx-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: var(--nx-5);
}
.nx-loading-bar {
  width: 200px; height: 3px;
  background: var(--nx-navy-100);
  border-radius: var(--nx-radius);
  overflow: hidden;
  position: relative;
}
.nx-loading-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--nx-cyan), transparent);
  animation: nx-shimmer 1.2s ease infinite;
}
.nx-loading-label {
  font-family: var(--nx-mono);
  font-size: var(--nx-text-xs);
  color: var(--nx-navy-400);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@keyframes nx-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
@keyframes nx-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nx-animate { animation: nx-fade-in 0.25s var(--nx-ease) both; }

/* ── Grid Utilities ──────────────────────────────────────────────────────── */
.nx-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--nx-5); }
.nx-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nx-5); }
.nx-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--nx-4); }
.nx-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--nx-4); }
.nx-span-2 { grid-column: span 2; }

/* ── Typography Utilities ────────────────────────────────────────────────── */
.nx-text-cyan    { color: var(--nx-cyan); }
.nx-text-cyan-dk { color: var(--nx-cyan-dark); }
.nx-text-navy    { color: var(--nx-navy-950); }
.nx-text-medium  { color: var(--nx-navy-600); }
.nx-text-muted   { color: var(--nx-navy-400); }
.nx-text-white   { color: var(--nx-white); }
.nx-mono         { font-family: var(--nx-mono); }
.nx-uppercase    { text-transform: uppercase; letter-spacing: 0.07em; }

/* ── Section ─────────────────────────────────────────────────────────────── */
.nx-section {
  padding-block: var(--nx-16);
  border-bottom: var(--nx-border);
}
.nx-section-alt { background: var(--nx-bg); }
.nx-section-dark { background: var(--nx-navy-950); }

.nx-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--nx-8);
  gap: var(--nx-4);
  flex-wrap: wrap;
}
.nx-section-label {
  font-family: var(--nx-mono);
  font-size: var(--nx-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nx-cyan);
  margin-bottom: var(--nx-2);
  display: block;
}
.nx-section-title {
  font-size: var(--nx-text-xl);
  font-weight: 700;
  color: var(--nx-navy-950);
  letter-spacing: -0.02em;
}

/* ── Badge / Tag ─────────────────────────────────────────────────────────── */
.nx-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15em 0.6em;
  font-family: var(--nx-mono);
  font-size: var(--nx-text-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--nx-cyan-muted);
  color: var(--nx-cyan-dark);
  border: var(--nx-border-cyan);
  border-radius: var(--nx-radius);
  cursor: default;
}
.nx-badge:hover { background: var(--nx-cyan); color: var(--nx-navy-950); cursor: pointer; }
.nx-badge-navy {
  background: var(--nx-navy-900);
  color: var(--nx-cyan-light);
  border-color: var(--nx-navy-800);
}
.nx-badge-outline {
  background: transparent;
  color: var(--nx-navy-400);
  border-color: var(--nx-navy-200);
}
.nx-badge-outline:hover { color: var(--nx-navy-900); border-color: var(--nx-navy-600); background: transparent; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.nx-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--nx-2);
  padding: 0.55em 1.4em;
  font-family: var(--nx-font);
  font-size: var(--nx-text-sm);
  font-weight: 600;
  border-radius: var(--nx-radius-md);
  cursor: pointer;
  transition: all var(--nx-fast) var(--nx-ease);
  border: 1.5px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.nx-btn-primary {
  background: var(--nx-cyan);
  color: var(--nx-navy-950);
  border-color: var(--nx-cyan);
}
.nx-btn-primary:hover {
  background: var(--nx-cyan-dark);
  border-color: var(--nx-cyan-dark);
  box-shadow: var(--nx-shadow-cyan);
  transform: translateY(-1px);
}
.nx-btn-secondary {
  background: transparent;
  color: var(--nx-cyan-dark);
  border-color: var(--nx-cyan-border);
}
.nx-btn-secondary:hover {
  background: var(--nx-cyan-muted);
  border-color: var(--nx-cyan);
}
.nx-btn-ghost {
  background: transparent;
  color: var(--nx-navy-600);
  border-color: var(--nx-navy-200);
}
.nx-btn-ghost:hover {
  color: var(--nx-navy-900);
  border-color: var(--nx-navy-400);
  background: var(--nx-bg);
}
.nx-btn-dark {
  background: var(--nx-navy-900);
  color: var(--nx-white);
  border-color: var(--nx-navy-900);
}
.nx-btn-dark:hover { background: var(--nx-navy-800); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.nx-hero {
  background: var(--nx-navy-950);
  border-bottom: 2px solid var(--nx-cyan);
  padding-block: var(--nx-20);
  position: relative;
  overflow: hidden;
}
.nx-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 80% 50%, rgba(6,182,212,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 300px 300px at 10% 90%, rgba(8,145,178,0.05) 0%, transparent 60%);
  pointer-events: none;
}
/* Grid overlay */
.nx-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(6,182,212,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,182,212,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.nx-hero-inner {
  max-width: var(--nx-max-w);
  margin-inline: auto;
  padding-inline: var(--nx-gutter);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--nx-16);
  align-items: center;
}
.nx-hero-content {}
.nx-hero-eyebrow {
  font-family: var(--nx-mono);
  font-size: var(--nx-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nx-cyan);
  margin-bottom: var(--nx-4);
  display: flex;
  align-items: center;
  gap: var(--nx-3);
}
.nx-hero-eyebrow::before {
  content: '';
  display: block;
  width: 24px; height: 1px;
  background: var(--nx-cyan);
}
.nx-hero-title {
  font-size: var(--nx-text-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--nx-white);
  margin-bottom: var(--nx-5);
}
.nx-hero-title span { color: var(--nx-cyan); }
.nx-hero-subtitle {
  font-size: var(--nx-text-md);
  color: var(--nx-navy-400);
  line-height: 1.65;
  max-width: 500px;
  margin-bottom: var(--nx-8);
}
.nx-hero-actions {
  display: flex;
  gap: var(--nx-3);
  flex-wrap: wrap;
}
.nx-hero-data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nx-3);
  flex-shrink: 0;
}
.nx-data-cell {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(6,182,212,0.15);
  border-radius: var(--nx-radius-md);
  padding: var(--nx-4) var(--nx-5);
  min-width: 110px;
}
.nx-data-cell-value {
  font-family: var(--nx-mono);
  font-size: var(--nx-text-2xl);
  font-weight: 600;
  color: var(--nx-cyan);
  display: block;
  letter-spacing: -0.02em;
}
.nx-data-cell-label {
  font-size: var(--nx-text-xs);
  color: var(--nx-navy-400);
  margin-top: var(--nx-1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Article Card ────────────────────────────────────────────────────────── */
.nx-card {
  background: var(--nx-white);
  border: var(--nx-border);
  border-radius: var(--nx-radius-md);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color var(--nx-fast), box-shadow var(--nx-normal), transform var(--nx-normal);
  overflow: hidden;
}
.nx-card:hover {
  border-color: var(--nx-cyan-border);
  box-shadow: var(--nx-shadow-md), var(--nx-shadow-cyan);
  transform: translateY(-2px);
}
.nx-card-stripe {
  height: 3px;
  background: linear-gradient(90deg, var(--nx-cyan), var(--nx-cyan-light));
}
.nx-card-body {
  padding: var(--nx-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--nx-3);
}
.nx-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nx-3);
}
.nx-card-date {
  font-family: var(--nx-mono);
  font-size: var(--nx-text-xs);
  color: var(--nx-navy-400);
}
.nx-card-title {
  font-size: var(--nx-text-md);
  font-weight: 700;
  line-height: 1.3;
  color: var(--nx-navy-950);
  flex: 1;
  transition: color var(--nx-fast);
  letter-spacing: -0.01em;
}
.nx-card:hover .nx-card-title { color: var(--nx-cyan-dark); }
.nx-card-excerpt {
  font-size: var(--nx-text-sm);
  color: var(--nx-navy-600);
  line-height: 1.6;
  flex: 1;
}
.nx-card-footer {
  padding: var(--nx-3) var(--nx-5);
  border-top: var(--nx-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nx-3);
}
.nx-card-author {
  font-family: var(--nx-mono);
  font-size: var(--nx-text-xs);
  color: var(--nx-navy-400);
}
.nx-card-readtime {
  font-family: var(--nx-mono);
  font-size: var(--nx-text-xs);
  color: var(--nx-navy-400);
}

/* ── Featured Card ───────────────────────────────────────────────────────── */
.nx-card-featured {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 1fr 2fr;
}
.nx-card-featured .nx-card-stripe { display: none; }
.nx-card-featured-panel {
  background: var(--nx-navy-950);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--nx-12);
  position: relative;
  overflow: hidden;
}
.nx-card-featured-panel::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(6,182,212,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,182,212,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}
.nx-card-featured-icon {
  font-size: 4rem;
  position: relative;
  z-index: 1;
  opacity: 0.6;
}
.nx-card-featured .nx-card-body {
  padding: var(--nx-8);
  justify-content: center;
}
.nx-card-featured .nx-card-title {
  font-size: var(--nx-text-2xl);
  letter-spacing: -0.02em;
}

/* ── Category Header ─────────────────────────────────────────────────────── */
.nx-cat-header {
  background: var(--nx-bg);
  border-bottom: var(--nx-border);
  padding-block: var(--nx-16);
}
.nx-cat-header-inner {}
.nx-cat-label {
  font-family: var(--nx-mono);
  font-size: var(--nx-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nx-cyan);
  margin-bottom: var(--nx-3);
}
.nx-cat-title {
  font-size: var(--nx-text-3xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--nx-navy-950);
  margin-bottom: var(--nx-3);
}
.nx-cat-desc {
  font-size: var(--nx-text-md);
  color: var(--nx-navy-600);
  max-width: 560px;
}
.nx-cat-count {
  font-family: var(--nx-mono);
  font-size: var(--nx-text-xs);
  color: var(--nx-navy-400);
  margin-top: var(--nx-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Filter Bar ──────────────────────────────────────────────────────────── */
.nx-filter-bar {
  display: flex;
  gap: var(--nx-2);
  flex-wrap: wrap;
  margin-top: var(--nx-6);
}
.nx-filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 0.9em;
  font-family: var(--nx-mono);
  font-size: var(--nx-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1.5px solid var(--nx-navy-200);
  border-radius: var(--nx-radius);
  color: var(--nx-navy-600);
  background: transparent;
  cursor: pointer;
  transition: all var(--nx-fast);
}
.nx-filter-btn:hover,
.nx-filter-btn.nx-active {
  background: var(--nx-cyan);
  border-color: var(--nx-cyan);
  color: var(--nx-navy-950);
}

/* ── Article Page ────────────────────────────────────────────────────────── */
.nx-article-page {
  max-width: 780px;
  margin-inline: auto;
  padding: var(--nx-12) var(--nx-gutter);
}
.nx-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--nx-2);
  flex-wrap: wrap;
  margin-bottom: var(--nx-6);
}
.nx-breadcrumb-item {
  font-family: var(--nx-mono);
  font-size: var(--nx-text-xs);
  color: var(--nx-navy-400);
  letter-spacing: 0.04em;
}
.nx-breadcrumb-item a { color: var(--nx-cyan-dark); transition: opacity var(--nx-fast); }
.nx-breadcrumb-item a:hover { opacity: 0.7; text-decoration: underline; }
.nx-breadcrumb-sep { color: var(--nx-navy-200); }
.nx-article-header {
  padding-bottom: var(--nx-8);
  margin-bottom: var(--nx-8);
  border-bottom: var(--nx-border);
}
.nx-article-meta {
  display: flex;
  align-items: center;
  gap: var(--nx-4);
  flex-wrap: wrap;
  margin-bottom: var(--nx-5);
}
.nx-article-date,
.nx-article-readtime,
.nx-article-author {
  font-family: var(--nx-mono);
  font-size: var(--nx-text-xs);
  color: var(--nx-navy-400);
  letter-spacing: 0.05em;
}
.nx-article-title {
  font-size: var(--nx-text-4xl);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--nx-navy-950);
  margin-bottom: var(--nx-4);
}
.nx-article-lede {
  font-size: var(--nx-text-lg);
  color: var(--nx-navy-600);
  line-height: 1.65;
  border-left: 3px solid var(--nx-cyan);
  padding-left: var(--nx-5);
}
.nx-article-body {
  font-size: var(--nx-text-base);
  color: var(--nx-navy-800);
  line-height: 1.8;
}
.nx-article-body p { margin-bottom: var(--nx-5); }
.nx-article-body h2 {
  font-size: var(--nx-text-xl);
  font-weight: 700;
  color: var(--nx-navy-950);
  letter-spacing: -0.02em;
  margin-top: var(--nx-10);
  margin-bottom: var(--nx-4);
  padding-bottom: var(--nx-3);
  border-bottom: var(--nx-border);
}
.nx-article-body h3 {
  font-size: var(--nx-text-lg);
  font-weight: 700;
  color: var(--nx-cyan-dark);
  margin-top: var(--nx-8);
  margin-bottom: var(--nx-3);
  font-family: var(--nx-mono);
  letter-spacing: -0.01em;
}
.nx-article-body ul, .nx-article-body ol {
  list-style: revert;
  padding-left: var(--nx-6);
  margin-block: var(--nx-5);
}
.nx-article-body li { margin-bottom: var(--nx-2); }
.nx-article-body strong { color: var(--nx-navy-950); font-weight: 700; }
.nx-article-body em { color: var(--nx-cyan-dark); font-style: normal; font-family: var(--nx-mono); font-size: 0.95em; }
.nx-article-body blockquote {
  border-left: 3px solid var(--nx-cyan);
  margin-block: var(--nx-8);
  padding: var(--nx-5) var(--nx-6);
  background: var(--nx-bg);
  border-radius: 0 var(--nx-radius-md) var(--nx-radius-md) 0;
}
.nx-article-footer {
  margin-top: var(--nx-12);
  padding-top: var(--nx-8);
  border-top: var(--nx-border);
}
.nx-back-link {
  font-family: var(--nx-mono);
  font-size: var(--nx-text-sm);
  font-weight: 600;
  color: var(--nx-navy-400);
  letter-spacing: 0.04em;
  transition: color var(--nx-fast);
}
.nx-back-link:hover { color: var(--nx-cyan-dark); }

/* ── Related Section ─────────────────────────────────────────────────────── */
.nx-related { margin-top: var(--nx-12); }
.nx-related-title {
  font-size: var(--nx-text-xl);
  font-weight: 700;
  color: var(--nx-navy-950);
  margin-bottom: var(--nx-6);
  letter-spacing: -0.02em;
}

/* ── Category Grid (home) ────────────────────────────────────────────────── */
.nx-cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--nx-4);
}
.nx-cat-tile {
  background: var(--nx-white);
  border: var(--nx-border);
  border-radius: var(--nx-radius-md);
  padding: var(--nx-5) var(--nx-4);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--nx-fast), box-shadow var(--nx-normal), transform var(--nx-normal);
}
.nx-cat-tile:hover {
  border-color: var(--nx-cyan-border);
  box-shadow: var(--nx-shadow-md);
  transform: translateY(-2px);
}
.nx-cat-tile-icon {
  display: block;
  font-size: 1.75rem;
  margin-bottom: var(--nx-3);
}
.nx-cat-tile-name {
  font-size: var(--nx-text-sm);
  font-weight: 700;
  color: var(--nx-navy-950);
  display: block;
  margin-bottom: var(--nx-1);
  letter-spacing: -0.01em;
}
.nx-cat-tile-count {
  font-family: var(--nx-mono);
  font-size: var(--nx-text-xs);
  color: var(--nx-navy-400);
}

/* ── Static Pages ────────────────────────────────────────────────────────── */
.nx-static-page {
  max-width: 780px;
  margin-inline: auto;
  padding: var(--nx-16) var(--nx-gutter);
}
.nx-static-header {
  padding-bottom: var(--nx-8);
  margin-bottom: var(--nx-10);
  border-bottom: var(--nx-border);
}
.nx-static-label {
  font-family: var(--nx-mono);
  font-size: var(--nx-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nx-cyan);
  margin-bottom: var(--nx-3);
  display: block;
}
.nx-static-title {
  font-size: var(--nx-text-3xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--nx-navy-950);
  margin-bottom: var(--nx-4);
}
.nx-static-subtitle {
  font-size: var(--nx-text-md);
  color: var(--nx-navy-600);
  line-height: 1.65;
}
.nx-static-section { margin-bottom: var(--nx-10); }
.nx-static-section-title {
  font-size: var(--nx-text-lg);
  font-weight: 700;
  color: var(--nx-navy-950);
  margin-bottom: var(--nx-4);
  letter-spacing: -0.01em;
}
.nx-static-body {
  font-size: var(--nx-text-base);
  color: var(--nx-navy-600);
  line-height: 1.8;
}
.nx-static-body p { margin-bottom: var(--nx-4); }
.nx-contact-panel {
  background: var(--nx-bg);
  border: var(--nx-border);
  border-radius: var(--nx-radius-lg);
  padding: var(--nx-8);
  text-align: center;
  margin-top: var(--nx-8);
}
.nx-contact-email {
  display: inline-block;
  font-family: var(--nx-mono);
  font-size: var(--nx-text-xl);
  font-weight: 600;
  color: var(--nx-cyan-dark);
  margin-block: var(--nx-5);
}
.nx-contact-email:hover { color: var(--nx-cyan); }

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.nx-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
  padding: var(--nx-24) var(--nx-gutter);
}
.nx-not-found-code {
  font-family: var(--nx-mono);
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 800;
  color: var(--nx-navy-100);
  letter-spacing: -0.06em;
  line-height: 1;
  margin-bottom: var(--nx-4);
}
.nx-not-found-title {
  font-size: var(--nx-text-2xl);
  font-weight: 700;
  color: var(--nx-navy-950);
  margin-bottom: var(--nx-4);
}
.nx-not-found-sub {
  color: var(--nx-navy-600);
  margin-bottom: var(--nx-8);
  max-width: 400px;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.nx-footer {
  background: var(--nx-navy-950);
  border-top: 2px solid var(--nx-cyan);
  margin-top: auto;
}
.nx-footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--nx-10);
  padding-block: var(--nx-12);
}
.nx-footer-logo {
  font-family: var(--nx-mono);
  font-size: var(--nx-text-xl);
  font-weight: 700;
  color: var(--nx-white);
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: var(--nx-4);
}
.nx-footer-tagline {
  font-size: var(--nx-text-sm);
  color: var(--nx-navy-400);
  line-height: 1.6;
  margin-bottom: var(--nx-3);
}
.nx-footer-disclosure {
  font-family: var(--nx-mono);
  font-size: var(--nx-text-xs);
  color: var(--nx-navy-600);
  letter-spacing: 0.04em;
  margin-bottom: var(--nx-4);
}
.nx-footer-badges { display: flex; gap: var(--nx-2); flex-wrap: wrap; }
.nx-footer-heading {
  font-family: var(--nx-mono);
  font-size: var(--nx-text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nx-navy-600);
  margin-bottom: var(--nx-4);
}
.nx-footer-col { display: flex; flex-direction: column; gap: var(--nx-1); }
.nx-footer-link {
  font-size: var(--nx-text-sm);
  color: var(--nx-navy-400);
  padding-block: var(--nx-1);
  transition: color var(--nx-fast);
}
.nx-footer-link:hover { color: var(--nx-cyan); }
.nx-footer-bottom {
  border-top: 1px solid var(--nx-navy-800);
}
.nx-footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nx-4);
  padding-block: var(--nx-5);
}
.nx-footer-copy,
.nx-footer-note {
  font-family: var(--nx-mono);
  font-size: var(--nx-text-xs);
  color: var(--nx-navy-600);
  letter-spacing: 0.04em;
}

/* ── "See all" link ──────────────────────────────────────────────────────── */
.nx-see-all {
  font-family: var(--nx-mono);
  font-size: var(--nx-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nx-cyan-dark);
  white-space: nowrap;
  transition: color var(--nx-fast);
}
.nx-see-all:hover { color: var(--nx-cyan); }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--nx-bg); }
::-webkit-scrollbar-thumb {
  background: var(--nx-navy-200);
  border-radius: 4px;
  border: 2px solid var(--nx-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--nx-navy-400); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .nx-hero-inner { grid-template-columns: 1fr; max-width: 640px; }
  .nx-hero-data  { grid-template-columns: repeat(4, 1fr); }
  .nx-card-featured { grid-column: span 2; grid-template-columns: 1fr; }
  .nx-card-featured-panel { display: none; }
  .nx-cat-grid { grid-template-columns: repeat(3, 1fr); }
  .nx-grid-3, .nx-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .nx-footer-inner { grid-template-columns: 1fr 1fr; }
  .nx-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .nx-mobile-toggle { display: flex; }
  .nx-nav {
    display: none;
    position: absolute;
    top: 60px; left: 0; right: 0;
    background: var(--nx-white);
    border-bottom: var(--nx-border);
    padding: var(--nx-4) var(--nx-gutter);
    flex-direction: column;
    align-items: flex-start;
    margin-left: 0;
    z-index: 99;
  }
  .nx-nav.nx-open { display: flex; }
  .nx-nav-link { width: 100%; padding: var(--nx-3) var(--nx-4); }
  .nx-nav-dropdown { width: 100%; }
  .nx-dropdown-panel {
    position: static; transform: none;
    box-shadow: none; border-radius: var(--nx-radius-md);
    background: var(--nx-bg); min-width: unset; width: 100%;
    display: none;
  }
  .nx-nav-dropdown:hover .nx-dropdown-panel,
  .nx-nav-dropdown:focus-within .nx-dropdown-panel { display: none; }
  .nx-nav-dropdown.nx-open .nx-dropdown-panel { display: flex; flex-direction: column; gap: 0; }
  .nx-grid-3, .nx-grid-4, .nx-grid-2 { grid-template-columns: 1fr; }
  .nx-card-featured { grid-column: 1 / -1; }
  .nx-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .nx-hero-data { grid-template-columns: 1fr 1fr; }
  .nx-hero-actions { flex-direction: column; align-items: flex-start; }
  .nx-footer-inner { grid-template-columns: 1fr; gap: var(--nx-8); }
  .nx-footer-brand { grid-column: 1 / -1; }
  .nx-footer-bottom-inner { flex-direction: column; text-align: center; }
  .nx-section { padding-block: var(--nx-10); }
}
@media (max-width: 480px) {
  .nx-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .nx-hero-data { grid-template-columns: 1fr 1fr; }
  .nx-article-title { font-size: var(--nx-text-3xl); }
}