/**
 * Heeiz Content Hub — CSS
 * مركز المحتوى: مقالات، أكاديمية، أخبار، أدلة، حالات دراسية، أدوات
 */

/* ─── Hub Variables ─── */
:root {
  --hub-accent:      #10646b;
  --hub-accent-2:    #1a9aa6;
  --hub-bg:          #f8fafb;
  --hub-white:       #ffffff;
  --hub-border:      rgba(0,0,0,0.07);
  --hub-border-dark: rgba(0,0,0,0.12);
  --hub-text:        #0f1923;
  --hub-muted:       #6b7280;
  --hub-radius:      16px;
  --hub-card-shadow: 0 2px 16px rgba(0,0,0,0.06);
  --hub-card-hover:  0 8px 40px rgba(16,100,107,0.12);
}

/* ══════════════════════════════════════
   READING PROGRESS BAR (Single Article)
   ══════════════════════════════════════ */
.reading-progress {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--hub-accent), var(--hub-accent-2), #f59e0b);
  z-index: 9999;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* ══════════════════════════════════════
   HUB HERO
   ══════════════════════════════════════ */
.hub-hero {
  background: var(--heeiz-teal-950, #030e16);
  padding-block: var(--space-20, 5rem) var(--space-16, 4rem);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.hub-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% -5%,
    rgba(26,154,166,0.22) 0%, transparent 65%);
  pointer-events: none;
}

.hub-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-inline: auto;
}

.hub-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 999px;
  color: var(--hub-accent-2);
  font-size: 0.825rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-6, 1.5rem);
  backdrop-filter: blur(6px);
}

.hub-hero-eyebrow .dot {
  width: 6px; height: 6px;
  background: #22c55e;
  border-radius: 50%;
  animation: hubPulse 2s ease-in-out infinite;
}

@keyframes hubPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.85); }
}

.hub-hero-title {
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5, 1.25rem);
}

.hub-hero-title em {
  font-style: normal;
  color: var(--hub-accent-2);
}

.hub-hero-lead {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(255,255,255,0.58);
  line-height: 1.75;
  max-width: 560px;
  margin-inline: auto;
}

/* ══════════════════════════════════════
   SEARCH + FILTER TABS
   ══════════════════════════════════════ */
.hub-filters {
  background: var(--hub-white);
  border-bottom: 1px solid var(--hub-border);
  position: sticky;
  top: 72px;
  z-index: 40;
}

.hub-filters-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
  padding-block: var(--space-5, 1.25rem);
}

/* Search */
.hub-search-wrap {
  position: relative;
  max-width: 560px;
  margin-inline: auto;
  width: 100%;
}

.hub-search-icon {
  position: absolute;
  inset-inline-start: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hub-muted);
  pointer-events: none;
}

.hub-search-input {
  width: 100%;
  padding: 14px 18px 14px 52px;
  border: 1.5px solid var(--hub-border-dark);
  border-radius: 999px;
  background: var(--hub-bg);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--hub-text);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

[dir="rtl"] .hub-search-input { padding-inline: 52px 18px; }
[dir="ltr"] .hub-search-input { padding-inline: 18px 52px; }
[dir="rtl"] .hub-search-icon { inset-inline-start: auto; inset-inline-end: 18px; }

.hub-search-input:focus {
  border-color: var(--hub-accent);
  box-shadow: 0 0 0 3px rgba(16,100,107,0.12);
}

.hub-search-clear {
  position: absolute;
  inset-inline-end: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--hub-muted);
  display: none;
  padding: 4px;
}

/* Filter Tabs */
.hub-tabs {
  display: flex;
  gap: var(--space-2, 0.5rem);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  justify-content: center;
}

.hub-tabs::-webkit-scrollbar { display: none; }

.hub-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--hub-border-dark);
  background: transparent;
  color: var(--hub-muted);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.hub-tab:hover {
  border-color: var(--hub-accent);
  color: var(--hub-accent);
  background: rgba(16,100,107,0.06);
}

.hub-tab.active {
  background: var(--hub-accent);
  border-color: var(--hub-accent);
  color: #fff;
}

.hub-tab-count {
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(255,255,255,0.25);
  padding: 1px 6px;
  border-radius: 999px;
}

.hub-tab.active .hub-tab-count { background: rgba(255,255,255,0.25); }
.hub-tab:not(.active) .hub-tab-count { background: var(--hub-border-dark); color: var(--hub-muted); }

/* ══════════════════════════════════════
   FEATURED ARTICLE CARD
   ══════════════════════════════════════ */
.hub-featured-section {
  background: var(--hub-bg);
  padding-block: var(--space-12, 3rem);
}

.hub-featured-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--hub-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-6, 1.5rem);
}

.hub-featured-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hub-border);
}

.hub-featured-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  border-radius: var(--hub-radius);
  overflow: hidden;
  background: var(--heeiz-ink-900, #080f1c);
  border: 1px solid rgba(255,255,255,0.06);
  min-height: 380px;
}

.hub-featured-image {
  position: relative;
  overflow: hidden;
}

.hub-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.hub-featured-card:hover .hub-featured-image img {
  transform: scale(1.04);
}

.hub-featured-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, var(--heeiz-ink-900, #080f1c));
}

.hub-featured-body {
  padding: var(--space-10, 2.5rem) var(--space-8, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hub-featured-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-4, 1rem);
  width: fit-content;
}

.hub-featured-title {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  margin-bottom: var(--space-4, 1rem);
}

.hub-featured-excerpt {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.75;
  margin-bottom: var(--space-6, 1.5rem);
}

.hub-featured-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  font-size: 0.825rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: var(--space-5, 1.25rem);
}

.hub-featured-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ══════════════════════════════════════
   ARTICLE CARDS GRID
   ══════════════════════════════════════ */
.hub-grid-section {
  background: var(--hub-bg);
  padding-block: var(--space-6, 1.5rem) var(--space-16, 4rem);
}

.hub-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8, 2rem);
}

.hub-grid-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--hub-text);
}

.hub-result-count {
  font-size: 0.875rem;
  color: var(--hub-muted);
}

.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5, 1.25rem);
}

/* Article Card */
.article-card {
  background: var(--hub-white);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius);
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  display: flex;
  flex-direction: column;
}

.article-card:hover {
  border-color: rgba(16,100,107,0.35);
  box-shadow: var(--hub-card-hover);
  transform: translateY(-4px);
}

.article-card-image {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--hub-bg);
}

.article-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.article-card:hover .article-card-image img {
  transform: scale(1.06);
}

.article-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(16,100,107,0);
  transition: background 0.3s;
}

.article-card:hover .article-card-image::after {
  background: rgba(16,100,107,0.1);
}

.article-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--hub-bg), rgba(16,100,107,0.08));
  font-size: 2.5rem;
}

.article-card-body {
  padding: var(--space-5, 1.25rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.article-card-type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-3, 0.75rem);
  width: fit-content;
}

/* Type color variants */
.type-articles   { background: rgba(16,100,107,0.1);  color: var(--hub-accent); }
.type-academy    { background: rgba(124,58,237,0.1);  color: #7c3aed; }
.type-news       { background: rgba(239,68,68,0.1);   color: #ef4444; }
.type-guides     { background: rgba(245,158,11,0.1);  color: #d97706; }
.type-case-studies { background: rgba(16,185,129,0.1); color: #059669; }
.type-tools      { background: rgba(59,130,246,0.1);  color: #2563eb; }

.article-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--hub-text);
  line-height: 1.45;
  margin-bottom: var(--space-2, 0.5rem);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
  transition: color 0.2s;
}

.article-card-title:hover { color: var(--hub-accent); }

.article-card-excerpt {
  font-size: 0.875rem;
  color: var(--hub-muted);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  margin-bottom: var(--space-4, 1rem);
}

.article-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3, 0.75rem);
  border-top: 1px solid var(--hub-border);
  font-size: 0.8rem;
  color: var(--hub-muted);
}

.article-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
}

.article-card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.article-card-read {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--hub-accent);
  font-weight: 600;
  text-decoration: none;
  transition: gap 0.2s;
}

.article-card-read:hover { gap: 8px; }

/* Infinite scroll sentinel */
#hubSentinel {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hub-loading-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--hub-border);
  border-top-color: var(--hub-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}

.hub-loading-spinner.active { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }

/* No results */
.hub-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-20, 5rem) var(--space-8, 2rem);
  color: var(--hub-muted);
}

.hub-no-results-icon { font-size: 3rem; margin-bottom: var(--space-4, 1rem); }
.hub-no-results h3 { font-size: 1.2rem; font-weight: 700; color: var(--hub-text); margin-bottom: 8px; }

/* ══════════════════════════════════════
   SKELETON LOADING
   ══════════════════════════════════════ */
.skeleton-card {
  background: var(--hub-white);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius);
  overflow: hidden;
}

.skeleton-image {
  aspect-ratio: 16/9;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}

.skeleton-body { padding: var(--space-5, 1.25rem); }

.skeleton-line {
  height: 12px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 6px;
  margin-bottom: 10px;
}

.skeleton-line.sm  { width: 40%; height: 10px; }
.skeleton-line.lg  { width: 85%; height: 16px; }
.skeleton-line.xl  { width: 100%; }
.skeleton-line.md  { width: 70%; }

@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ══════════════════════════════════════
   ACADEMY SECTION
   ══════════════════════════════════════ */
.hub-academy-section {
  background: var(--heeiz-ink-950, #020709);
  padding-block: var(--space-16, 4rem);
}

.hub-section-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--hub-accent-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-3, 0.75rem);
}

.hub-section-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin-bottom: var(--space-3, 0.75rem);
}

.hub-section-title.dark { color: var(--hub-text); }

.hub-section-desc {
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: var(--space-10, 2.5rem);
}

.hub-section-desc.dark { color: var(--hub-muted); }

.academy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5, 1.25rem);
}

.academy-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--hub-radius);
  padding: var(--space-6, 1.5rem);
  transition: background 0.25s, border-color 0.25s;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}

.academy-card:hover {
  background: rgba(26,154,166,0.08);
  border-color: rgba(26,154,166,0.25);
}

.academy-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: rgba(124,58,237,0.15);
  color: #a78bfa;
  width: fit-content;
}

.academy-card-icon {
  font-size: 2rem;
}

.academy-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
}

.academy-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  margin-top: auto;
  padding-top: var(--space-4, 1rem);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.academy-card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.academy-progress-bar {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}

.academy-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--hub-accent), var(--hub-accent-2));
  border-radius: 2px;
  transition: width 0.6s ease;
}

/* ══════════════════════════════════════
   TOOLS SECTION
   ══════════════════════════════════════ */
.hub-tools-section {
  background: var(--hub-white);
  padding-block: var(--space-16, 4rem);
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4, 1rem);
}

.tool-card {
  background: var(--hub-bg);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius);
  padding: var(--space-5, 1.25rem);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.tool-card:hover {
  border-color: var(--hub-accent);
  box-shadow: var(--hub-card-hover);
  transform: translateY(-3px);
}

.tool-card-icon {
  width: 48px; height: 48px;
  background: rgba(16,100,107,0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.tool-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--hub-text);
}

.tool-card-desc {
  font-size: 0.825rem;
  color: var(--hub-muted);
  line-height: 1.6;
  flex: 1;
}

.tool-card-cta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--hub-accent);
}

/* ══════════════════════════════════════
   NEWSLETTER SECTION
   ══════════════════════════════════════ */
.hub-newsletter-section {
  background: var(--hub-bg);
  padding-block: var(--space-16, 4rem);
  border-top: 1px solid var(--hub-border);
}

.hub-newsletter-inner {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
}

.hub-newsletter-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4, 1rem);
}

.hub-newsletter-title {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 800;
  color: var(--hub-text);
  margin-bottom: var(--space-3, 0.75rem);
}

.hub-newsletter-desc {
  color: var(--hub-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: var(--space-6, 1.5rem);
}

.hub-newsletter-form {
  display: flex;
  gap: var(--space-3, 0.75rem);
}

.hub-newsletter-form input {
  flex: 1;
  padding: 13px 18px;
  border: 1.5px solid var(--hub-border-dark);
  border-radius: 999px;
  background: var(--hub-white);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--hub-text);
  outline: none;
  transition: border-color 0.2s;
}

.hub-newsletter-form input:focus { border-color: var(--hub-accent); }

.hub-newsletter-form button {
  padding: 13px 28px;
  background: var(--hub-accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
}

.hub-newsletter-form button:hover {
  background: var(--hub-accent-2);
  transform: scale(1.02);
}

/* ══════════════════════════════════════
   SINGLE ARTICLE LAYOUT
   ══════════════════════════════════════ */
.single-article-wrap {
  background: var(--hub-white);
  min-height: 100vh;
}

/* Breadcrumbs */
.article-breadcrumbs {
  background: var(--hub-bg);
  border-bottom: 1px solid var(--hub-border);
  padding-block: var(--space-3, 0.75rem);
}

.breadcrumbs-list {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  flex-wrap: wrap;
  list-style: none;
  padding: 0; margin: 0;
  font-size: 0.825rem;
  color: var(--hub-muted);
}

.breadcrumbs-list a {
  color: var(--hub-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumbs-list a:hover { color: var(--hub-accent); }

.breadcrumbs-sep {
  color: var(--hub-border-dark);
}

.breadcrumbs-current {
  color: var(--hub-text);
  font-weight: 600;
}

/* Article Hero */
.article-hero {
  position: relative;
  background: var(--heeiz-ink-900, #080f1c);
  padding-block: var(--space-16, 4rem);
  overflow: hidden;
}

.article-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.article-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
}

.article-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--heeiz-ink-900, #080f1c) 0%, rgba(8,15,28,0.6) 100%);
}

.article-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

.article-hero-type { margin-bottom: var(--space-5, 1.25rem); }

.article-hero-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5, 1.25rem);
}

.article-hero-excerpt {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
  margin-bottom: var(--space-6, 1.5rem);
  max-width: 680px;
}

.article-hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-5, 1.25rem);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  flex-wrap: wrap;
}

.article-hero-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.article-author-mini {
  display: flex;
  align-items: center;
  gap: 8px;
}

.article-author-mini-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(26,154,166,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.article-author-mini-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Key Points (summary box) */
.article-key-points {
  background: rgba(16,100,107,0.07);
  border: 1px solid rgba(16,100,107,0.2);
  border-radius: 12px;
  padding: var(--space-6, 1.5rem);
  margin-bottom: var(--space-8, 2rem);
}

.article-key-points h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--hub-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-4, 1rem);
  display: flex;
  align-items: center;
  gap: 6px;
}

.article-key-points ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.article-key-points li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--hub-text);
  line-height: 1.6;
}

.article-key-points li::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--hub-accent);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 7px;
}

/* 3-Column Article Layout */
.article-body-wrap {
  padding-block: var(--space-12, 3rem);
}

.article-layout {
  display: grid;
  grid-template-columns: 56px 1fr 260px;
  gap: var(--space-8, 2rem);
  align-items: start;
}

/* Share Sidebar (left column) */
.article-share-sidebar {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3, 0.75rem);
}

.share-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--hub-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

.share-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--hub-border);
  background: var(--hub-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--hub-muted);
  text-decoration: none;
}

.share-btn:hover {
  border-color: var(--hub-accent);
  color: var(--hub-accent);
  box-shadow: 0 2px 12px rgba(16,100,107,0.15);
  transform: scale(1.08);
}

.share-divider {
  width: 1px; height: 24px;
  background: var(--hub-border);
}

/* Article Main Content */
.article-content-main {
  min-width: 0;
}

/* Article typography */
.article-prose {
  font-size: 1.05rem;
  line-height: 1.85;
  color: #1a2332;
}

.article-prose h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--hub-text);
  margin-top: var(--space-10, 2.5rem);
  margin-bottom: var(--space-4, 1rem);
  padding-bottom: var(--space-3, 0.75rem);
  border-bottom: 2px solid var(--hub-border);
  line-height: 1.3;
  scroll-margin-top: 100px;
}

.article-prose h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--hub-text);
  margin-top: var(--space-8, 2rem);
  margin-bottom: var(--space-3, 0.75rem);
  scroll-margin-top: 100px;
}

.article-prose p {
  margin-bottom: var(--space-5, 1.25rem);
}

.article-prose a {
  color: var(--hub-accent);
  text-decoration: underline;
  text-decoration-color: rgba(16,100,107,0.3);
  transition: text-decoration-color 0.2s;
}

.article-prose a:hover { text-decoration-color: var(--hub-accent); }

.article-prose ul,
.article-prose ol {
  padding-inline-start: 1.5rem;
  margin-bottom: var(--space-5, 1.25rem);
}

.article-prose li { margin-bottom: 6px; }

.article-prose blockquote {
  border-inline-start: 4px solid var(--hub-accent);
  padding-inline-start: var(--space-5, 1.25rem);
  margin-inline-start: 0;
  margin-bottom: var(--space-5, 1.25rem);
  color: #4a5568;
  font-style: italic;
}

.article-prose img {
  width: 100%;
  border-radius: 12px;
  margin-block: var(--space-6, 1.5rem);
}

.article-prose pre {
  background: var(--heeiz-ink-900, #080f1c);
  color: #e2e8f0;
  border-radius: 10px;
  padding: var(--space-5, 1.25rem);
  overflow-x: auto;
  font-size: 0.875rem;
  margin-bottom: var(--space-5, 1.25rem);
}

.article-prose code {
  background: rgba(16,100,107,0.1);
  color: var(--hub-accent);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.875em;
}

.article-prose pre code {
  background: none;
  color: inherit;
  padding: 0;
}

/* TOC Sidebar (right column) */
.article-toc-sidebar {
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
  /* Subtle scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(16,100,107,0.25) transparent;
}
.article-toc-sidebar::-webkit-scrollbar { width: 4px; }
.article-toc-sidebar::-webkit-scrollbar-track { background: transparent; }
.article-toc-sidebar::-webkit-scrollbar-thumb {
  background: rgba(16,100,107,0.25);
  border-radius: 2px;
}

.toc-widget {
  background: var(--hub-bg);
  border: 1px solid var(--hub-border);
  border-radius: 14px;
  padding: var(--space-5, 1.25rem);
}

.toc-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--hub-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-4, 1rem);
  display: flex;
  align-items: center;
  gap: 6px;
}

.toc-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toc-item a {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--hub-muted);
  text-decoration: none;
  transition: all 0.2s;
  line-height: 1.4;
  border-inline-start: 2px solid transparent;
}

.toc-item a:hover {
  color: var(--hub-accent);
  background: rgba(16,100,107,0.05);
}

.toc-item.active a {
  color: var(--hub-accent);
  background: rgba(16,100,107,0.08);
  border-inline-start-color: var(--hub-accent);
  font-weight: 600;
}

.toc-item.h3 a { padding-inline-start: 20px; font-size: 0.8rem; }

.toc-progress {
  margin-top: var(--space-4, 1rem);
  padding-top: var(--space-4, 1rem);
  border-top: 1px solid var(--hub-border);
}

.toc-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--hub-muted);
  margin-bottom: 6px;
}

.toc-progress-bar {
  height: 4px;
  background: var(--hub-border);
  border-radius: 2px;
  overflow: hidden;
}

.toc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--hub-accent), var(--hub-accent-2));
  border-radius: 2px;
  transition: width 0.2s;
}

/* Article Author Box */
.article-author-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5, 1.25rem);
  background: var(--hub-bg);
  border: 1px solid var(--hub-border);
  border-radius: 14px;
  padding: var(--space-6, 1.5rem);
  margin-top: var(--space-12, 3rem);
}

.article-author-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(16,100,107,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.5rem;
}

.article-author-avatar img { width: 100%; height: 100%; object-fit: cover; }

.article-author-info h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--hub-text);
  margin-bottom: 2px;
}

.article-author-info .author-role {
  font-size: 0.825rem;
  color: var(--hub-accent);
  font-weight: 600;
  margin-bottom: var(--space-2, 0.5rem);
}

.article-author-info p {
  font-size: 0.875rem;
  color: var(--hub-muted);
  line-height: 1.65;
}

/* Related Articles */
.article-related {
  background: var(--hub-bg);
  padding-block: var(--space-12, 3rem);
  border-top: 1px solid var(--hub-border);
}

.article-related-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--hub-text);
  margin-bottom: var(--space-8, 2rem);
}

.article-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5, 1.25rem);
}

/* Tags */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  margin-top: var(--space-8, 2rem);
  padding-top: var(--space-6, 1.5rem);
  border-top: 1px solid var(--hub-border);
}

.article-tag {
  padding: 4px 12px;
  background: var(--hub-bg);
  border: 1px solid var(--hub-border-dark);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--hub-muted);
  text-decoration: none;
  transition: all 0.2s;
}

.article-tag:hover {
  background: rgba(16,100,107,0.08);
  border-color: var(--hub-accent);
  color: var(--hub-accent);
}

/* ══════════════════════════════════════
   TRENDING SECTION
   ══════════════════════════════════════ */
.hub-trending-section {
  background: var(--hub-white);
  padding-block: var(--space-14, 3.5rem);
  border-top: 1px solid var(--hub-border);
}

.trending-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.trending-item {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  padding: var(--space-4, 1rem);
  background: var(--hub-bg);
  border: 1px solid var(--hub-border);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s;
}

.trending-item:hover {
  border-color: rgba(16,100,107,0.3);
  box-shadow: var(--hub-card-shadow);
  transform: translateX(-3px);
}

.trending-num {
  font-size: 1.4rem;
  font-weight: 900;
  color: rgba(16,100,107,0.15);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: center;
}

.trending-content { flex: 1; min-width: 0; }

.trending-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--hub-text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trending-meta {
  font-size: 0.78rem;
  color: var(--hub-muted);
  margin-top: 3px;
  display: flex;
  gap: var(--space-3, 0.75rem);
}

.trending-image {
  width: 72px; height: 54px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.trending-image img { width: 100%; height: 100%; object-fit: cover; }

/* ══════════════════════════════════════
   HUB SECTION WRAPPER (layout helper)
   ══════════════════════════════════════ */
.hub-two-col {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-10, 2.5rem);
  align-items: start;
}

.hub-sidebar-sticky { position: sticky; top: 100px; }

/* ══════════════════════════════════════
   RESPONSIVE — Content Hub
   ══════════════════════════════════════ */
@media (max-width: 1024px) {
  .article-layout {
    grid-template-columns: 1fr;
  }
  .article-share-sidebar {
    position: static;
    flex-direction: row;
    justify-content: flex-start;
  }
  .share-label { writing-mode: horizontal-tb; transform: none; }
  .article-toc-sidebar {
    position: static;
    order: -1;
  }
  .toc-widget { background: rgba(16,100,107,0.05); }

  .hub-two-col { grid-template-columns: 1fr; }
  .hub-sidebar-sticky { position: static; }

  .tools-grid { grid-template-columns: repeat(2, 1fr); }
  .academy-grid { grid-template-columns: repeat(2, 1fr); }
  .hub-grid { grid-template-columns: repeat(2, 1fr); }
  .article-related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .hub-filters { position: static; }
  .hub-featured-card { grid-template-columns: 1fr; min-height: auto; }
  .hub-featured-image { aspect-ratio: 16/9; }
  .hub-featured-image::after { background: linear-gradient(to top, var(--heeiz-ink-900) 0%, rgba(8,15,28,0.3) 100%); }
  .hub-grid { grid-template-columns: 1fr; }
  .academy-grid { grid-template-columns: 1fr; }
  .article-related-grid { grid-template-columns: 1fr; }
  .hub-newsletter-form { flex-direction: column; }
  .hub-newsletter-form button { width: 100%; }
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
  .article-hero { padding-block: var(--space-10, 2.5rem); }
  .article-author-box { flex-direction: column; }
}

@media (max-width: 480px) {
  .tools-grid { grid-template-columns: 1fr; }
  .hub-tabs { justify-content: flex-start; }
  .hub-featured-body { padding: var(--space-6, 1.5rem); }
}

/* ══════════════════════════════════════════════════════
   HERO STATS STRIP
   ══════════════════════════════════════════════════════ */
.hub-hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% -5%,
    rgba(26,154,166,0.22) 0%, transparent 65%);
  pointer-events: none;
}

.hub-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6, 1.5rem);
  flex-wrap: wrap;
  margin-top: var(--space-10, 2.5rem);
  padding: var(--space-5, 1.25rem) var(--space-8, 2rem);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl, 20px);
  backdrop-filter: blur(8px);
}

.hub-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.hub-hero-stat-num {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hub-hero-stat-lbl {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}

.hub-hero-stat-sep {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.12);
}

/* ══════════════════════════════════════════════════════
   ARTICLE CARDS (new hc-card design)
   ══════════════════════════════════════════════════════ */
.hub-grid .hc-card,
.hc-card {
  display: flex;
  flex-direction: column;
  background: var(--hub-white);
  border: 1.5px solid var(--hub-border);
  border-radius: var(--hub-radius);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.hc-card:hover {
  border-color: rgba(16,100,107,0.3);
  box-shadow: 0 12px 40px rgba(16,100,107,0.1);
  transform: translateY(-4px);
}

.hc-card-img {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--hub-bg);
  flex-shrink: 0;
}

.hc-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.hc-card:hover .hc-card-img img {
  transform: scale(1.07);
}

.hc-card-no-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--hub-bg), rgba(16,100,107,0.08));
  font-size: 2.8rem;
}

.hc-card-type-badge {
  position: absolute;
  inset-block-start: var(--space-3, 0.75rem);
  inset-inline-start: var(--space-3, 0.75rem);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.hc-card-body {
  padding: var(--space-5, 1.25rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hc-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--hub-text);
  line-height: 1.45;
  margin-bottom: var(--space-2, 0.5rem);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}

.hc-card:hover .hc-card-title { color: var(--hub-accent); }

.hc-card-excerpt {
  font-size: 0.85rem;
  color: var(--hub-muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  margin-bottom: var(--space-4, 1rem);
}

.hc-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3, 0.75rem);
  border-top: 1px solid var(--hub-border);
  font-size: 0.78rem;
  color: var(--hub-muted);
}

.hc-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
}

.hc-card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hc-card-read {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--hub-accent);
  font-weight: 600;
  font-size: 0.82rem;
  transition: gap 0.2s;
  white-space: nowrap;
}

.hc-card:hover .hc-card-read { gap: 7px; }

/* Grid subtitle */
.hub-grid-sub {
  font-size: 0.85rem;
  color: var(--hub-muted);
  margin-top: 3px;
}

/* ══════════════════════════════════════════════════════
   FEATURED CARD — improvements
   ══════════════════════════════════════════════════════ */
.hub-featured-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(8,15,28,0.15) 0%,
    rgba(8,15,28,0.85) 70%,
    #080f1c 100%
  );
}

.hub-featured-type-wrap {
  margin-bottom: var(--space-4, 1rem);
}

.hub-featured-author {
  display: flex;
  align-items: center;
  gap: 5px;
}

.hub-featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  background: var(--hub-accent, #10646b);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 999px;
  transition: background 0.2s, gap 0.2s;
  margin-top: var(--space-5, 1.25rem);
}

.hub-featured-card:hover .hub-featured-cta {
  background: var(--hub-accent-2, #1a9aa6);
  gap: 12px;
}

/* ══════════════════════════════════════════════════════
   CATEGORIES QUICK-BROWSE
   ══════════════════════════════════════════════════════ */
.hub-cats-section {
  background: var(--hub-white);
  padding-block: var(--space-16, 4rem);
  border-top: 1px solid var(--hub-border);
}

.hub-cats-intro {
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: var(--space-12, 3rem);
}

.hub-cats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4, 1rem);
}

.hub-cat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-6, 1.5rem);
  background: var(--hub-bg);
  border: 1.5px solid var(--hub-border);
  border-radius: var(--hub-radius);
  text-decoration: none;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s, background 0.25s;
}

.hub-cat-card:hover {
  border-color: rgba(16,100,107,0.3);
  box-shadow: 0 8px 32px rgba(16,100,107,0.08);
  transform: translateY(-3px);
  background: #fff;
}

.hub-cat-icon {
  font-size: 1.9rem;
  line-height: 1;
  width: 52px;
  height: 52px;
  background: rgba(16,100,107,0.08);
  border-radius: var(--radius-md, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hub-cat-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--hub-text);
  line-height: 1.3;
}

.hub-cat-desc {
  font-size: 0.83rem;
  color: var(--hub-muted);
  line-height: 1.55;
  flex: 1;
}

.hub-cat-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3, 0.75rem);
  border-top: 1px solid var(--hub-border);
  margin-top: auto;
}

.hub-cat-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--hub-muted);
}

.hub-cat-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(16,100,107,0.08);
  color: var(--hub-accent);
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
}

.hub-cat-card:hover .hub-cat-arrow {
  background: var(--hub-accent);
  color: #fff;
  transform: translateX(-3px);
}

/* ══════════════════════════════════════════════════════
   ACADEMY CARD — improved with thumbnail support
   ══════════════════════════════════════════════════════ */
.academy-card-thumb {
  position: relative;
  aspect-ratio: 16/8;
  overflow: hidden;
  border-radius: var(--hub-radius) var(--hub-radius) 0 0;
  margin: calc(-1 * var(--space-6, 1.5rem)) calc(-1 * var(--space-6, 1.5rem)) 0;
}

.academy-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.academy-card:hover .academy-card-thumb img {
  transform: scale(1.06);
}

.academy-card-thumb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(8,15,28,0.9) 0%,
    rgba(8,15,28,0.4) 60%,
    transparent 100%
  );
}

.academy-card-icon-bg {
  width: 60px;
  height: 60px;
  background: rgba(124,58,237,0.12);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.academy-card-icon {
  font-size: 1.8rem;
}

.academy-card-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3, 0.75rem);
}

.academy-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  width: fit-content;
}

.academy-card-badge.diff-beginner     { background: rgba(22,163,74,0.15);  color: #16a34a; }
.academy-card-badge.diff-intermediate { background: rgba(234,179,8,0.15);  color: #ca8a04; }
.academy-card-badge.diff-advanced     { background: rgba(239,68,68,0.15);  color: #dc2626; }

/* fallback if no diff class */
.academy-card-badge:not([class*="diff-"]) {
  background: rgba(124,58,237,0.15);
  color: #a78bfa;
}

.academy-card-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--hub-accent-2, #1a9aa6);
  margin-top: auto;
  padding-top: var(--space-3, 0.75rem);
  border-top: 1px solid rgba(255,255,255,0.07);
  transition: gap 0.2s;
}

.academy-card:hover .academy-card-cta { gap: 9px; }

/* ══════════════════════════════════════════════════════
   NEWSLETTER — dark variant
   ══════════════════════════════════════════════════════ */
.hub-newsletter-section {
  background: var(--heeiz-ink-950, #020709);
  padding-block: var(--space-20, 5rem);
  border-top: none;
  position: relative;
  overflow: hidden;
}

.hub-newsletter-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 100%,
    rgba(26,154,166,0.14) 0%, transparent 70%);
  pointer-events: none;
}

.hub-newsletter-inner {
  position: relative;
  z-index: 1;
  max-width: 580px;
  margin-inline: auto;
  text-align: center;
}

.hub-newsletter-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  background: rgba(26,154,166,0.12);
  border: 1px solid rgba(26,154,166,0.25);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--hub-accent-2, #1a9aa6);
  margin-bottom: var(--space-6, 1.5rem);
}

.hub-newsletter-title {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin-bottom: var(--space-4, 1rem);
}

.hub-newsletter-desc {
  color: rgba(255,255,255,0.55);
  font-size: 0.98rem;
  line-height: 1.7;
  margin-bottom: var(--space-8, 2rem);
}

.hub-newsletter-form {
  display: flex;
  gap: var(--space-3, 0.75rem);
}

.hub-newsletter-form input {
  flex: 1;
  padding: 14px 20px;
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  font-family: inherit;
  font-size: 0.95rem;
  color: #fff;
  outline: none;
  transition: border-color 0.2s;
}

.hub-newsletter-form input::placeholder { color: rgba(255,255,255,0.38); }
.hub-newsletter-form input:focus { border-color: var(--hub-accent-2, #1a9aa6); }

.hub-newsletter-form button {
  padding: 14px 28px;
  background: var(--hub-accent, #10646b);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
}

.hub-newsletter-form button:hover {
  background: var(--hub-accent-2, #1a9aa6);
  transform: scale(1.02);
}

.hub-newsletter-note {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  margin-top: var(--space-4, 1rem);
}

/* ══════════════════════════════════════════════════════
   ARTICLE HERO — more immersive
   ══════════════════════════════════════════════════════ */
.article-hero {
  position: relative;
  background: #040c18;
  padding-block: var(--space-20, 5rem) var(--space-16, 4rem);
  overflow: hidden;
  min-height: 62vh;
  display: flex;
  align-items: center;
}

.article-hero-bg img {
  opacity: 0.28;
  filter: blur(2px) saturate(1.2);
}

.article-hero-overlay {
  background: linear-gradient(
    to top,
    #040c18 0%,
    rgba(4,12,24,0.7) 50%,
    rgba(4,12,24,0.35) 100%
  );
}

.article-hero-inner {
  max-width: 760px;
}

.article-hero-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-5, 1.25rem);
  flex-wrap: wrap;
}

.article-hero-diff {
  padding: 3px 12px;
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.article-hero-title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-5, 1.25rem);
}

.article-hero-excerpt {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: rgba(255,255,255,0.62);
  line-height: 1.75;
  margin-bottom: var(--space-7, 1.75rem);
  max-width: 620px;
}

.article-hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  flex-wrap: wrap;
}

.article-hero-meta-sep {
  color: rgba(255,255,255,0.2);
  font-size: 1.1rem;
  line-height: 1;
}

.article-hero-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.article-author-mini-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.article-author-mini-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  line-height: 1;
}

.article-author-mini-role {
  font-size: 0.73rem;
  color: rgba(255,255,255,0.4);
  line-height: 1;
}

/* Hero action buttons */
.article-hero-actions {
  display: flex;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-7, 1.75rem);
  flex-wrap: wrap;
}

.article-hero-video-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: background 0.2s;
}

.article-hero-video-btn:hover { background: rgba(255,255,255,0.16); }

.article-hero-video-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Scroll indicator */
.article-hero-scroll {
  position: absolute;
  bottom: var(--space-6, 1.5rem);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  animation: heroScrollBounce 2s ease-in-out infinite;
}

@keyframes heroScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
  50%       { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

/* ══════════════════════════════════════════════════════
   ARTICLE KEY POINTS — improved
   ══════════════════════════════════════════════════════ */
.article-key-points {
  background: rgba(16,100,107,0.05);
  border: 1.5px solid rgba(16,100,107,0.18);
  border-inline-start: 4px solid var(--hub-accent, #10646b);
  border-radius: 14px;
  padding: var(--space-6, 1.5rem);
  margin-bottom: var(--space-8, 2rem);
}

.article-key-points-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--hub-accent, #10646b);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: var(--space-4, 1rem);
}

.article-key-points ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.article-key-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--hub-text);
  line-height: 1.6;
}

.article-key-points li::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--hub-accent, #10646b);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 8px;
}

/* ══════════════════════════════════════════════════════
   ARTICLE AUTHOR BOX — improved
   ══════════════════════════════════════════════════════ */
.article-author-box {
  background: #f8fafb;
  border: 1.5px solid var(--hub-border);
  border-radius: 16px;
  padding: var(--space-6, 1.5rem);
  margin-top: var(--space-12, 3rem);
  overflow: hidden;
}

.article-author-box-header {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hub-muted, #6b7280);
  margin-bottom: var(--space-4, 1rem);
  padding-bottom: var(--space-3, 0.75rem);
  border-bottom: 1px solid var(--hub-border);
}

.article-author-box-body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5, 1.25rem);
}

.article-author-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(16,100,107,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 3px solid white;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.article-author-avatar img { width: 100%; height: 100%; object-fit: cover; }

.article-author-info h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--hub-text);
  margin-bottom: 3px;
}

.article-author-info .author-role {
  font-size: 0.8rem;
  color: var(--hub-accent);
  font-weight: 600;
  margin-bottom: var(--space-3, 0.75rem);
}

.article-author-info p {
  font-size: 0.875rem;
  color: var(--hub-muted);
  line-height: 1.65;
}

/* ══════════════════════════════════════════════════════
   TOC META LIST (dl/dt/dd)
   ══════════════════════════════════════════════════════ */
.toc-meta-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.toc-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.83rem;
}

.toc-meta-row dt {
  color: var(--hub-muted);
  font-weight: 400;
}

.toc-meta-row dd {
  color: var(--hub-text);
  font-weight: 600;
  margin: 0;
}

.toc-widget-meta { margin-top: var(--space-4, 1rem); }

/* Back to resources link */
.toc-back-link {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: var(--space-4, 1rem);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: rgba(16,100,107,0.06);
  border: 1px solid rgba(16,100,107,0.12);
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--hub-accent);
  text-decoration: none;
  transition: background 0.2s, gap 0.2s;
}

.toc-back-link:hover {
  background: rgba(16,100,107,0.1);
  gap: 10px;
}

/* ══════════════════════════════════════════════════════
   RELATED ARTICLES — improved
   ══════════════════════════════════════════════════════ */
.article-related {
  background: var(--hub-bg);
  padding-block: var(--space-16, 4rem);
  border-top: 1px solid var(--hub-border);
}

.article-related-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8, 2rem);
  gap: var(--space-4, 1rem);
}

.article-related-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--hub-text);
}

.article-related-all {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--hub-accent);
  text-decoration: none;
  transition: gap 0.2s;
}

.article-related-all:hover { gap: 9px; }

.article-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5, 1.25rem);
}

/* Related article card */
.related-card {
  display: flex;
  flex-direction: column;
  background: var(--hub-white);
  border: 1.5px solid var(--hub-border);
  border-radius: var(--hub-radius);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.related-card:hover {
  border-color: rgba(16,100,107,0.3);
  box-shadow: 0 10px 36px rgba(16,100,107,0.1);
  transform: translateY(-4px);
}

.related-card-img {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--hub-bg);
}

.related-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.related-card:hover .related-card-img img {
  transform: scale(1.07);
}

.related-card-no-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--hub-bg), rgba(16,100,107,0.08));
  font-size: 2.5rem;
}

.related-card-type {
  position: absolute;
  inset-block-start: var(--space-2, 0.5rem);
  inset-inline-start: var(--space-2, 0.5rem);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  backdrop-filter: blur(4px);
}

.related-card-body {
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  flex: 1;
}

.related-card-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.related-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--hub-text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}

.related-card:hover .related-card-title { color: var(--hub-accent); }

.related-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  font-size: 0.75rem;
  color: var(--hub-muted);
  margin-top: auto;
  padding-top: var(--space-3, 0.75rem);
  border-top: 1px solid var(--hub-border);
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — NEW COMPONENTS
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hub-cats-grid { grid-template-columns: repeat(3, 1fr); }
  .hub-hero-stats { gap: var(--space-4, 1rem); }
  .hub-hero-stat-sep { display: none; }
}

@media (max-width: 768px) {
  .hub-hero-stats {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    gap: var(--space-4, 1rem);
    padding: var(--space-5, 1.25rem);
  }
  .hub-hero-stat-sep { display: none; }
  .hub-cats-grid { grid-template-columns: repeat(2, 1fr); }
  .hub-grid .hc-card,
  .hc-card { width: 100%; }
  .article-hero { min-height: auto; padding-block: var(--space-14, 3.5rem); }
  .article-hero-title { font-size: clamp(1.7rem, 6vw, 2.4rem); }
  .article-author-box-body { flex-direction: column; }
  .article-related-grid { grid-template-columns: repeat(2, 1fr); }
  .article-related-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .hub-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hub-cats-grid { grid-template-columns: 1fr; }
  .hub-newsletter-form { flex-direction: column; }
  .hub-newsletter-form button { width: 100%; justify-content: center; }
  .article-related-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   TAXONOMY ARCHIVE — content_type
   ══════════════════════════════════════════════════════ */

/* ── Hero ── */
.tax-hero {
  background: var(--heeiz-teal-950, #030e16);
  padding-block: 5rem 4rem;
  position: relative;
  overflow: hidden;
}

.tax-hero-glow {
  position: absolute;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tax-color, #1a9aa6) 0%, transparent 70%);
  opacity: 0.12;
  top: -200px;
  inset-inline-end: -120px;
  pointer-events: none;
  filter: blur(40px);
}

.tax-hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.tax-hero-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-12, 3rem);
  align-items: center;
}

.tax-hero-content { max-width: 640px; }

.tax-hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--space-6, 1.5rem);
}
.tax-hero-breadcrumb a {
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  transition: color 0.2s;
}
.tax-hero-breadcrumb a:hover { color: rgba(255,255,255,0.7); }
.tax-hero-breadcrumb span[aria-current] { color: rgba(255,255,255,0.65); }

.tax-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.04);
  margin-bottom: var(--space-5, 1.25rem);
  backdrop-filter: blur(8px);
}

.tax-hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tax-color, #1a9aa6);
  box-shadow: 0 0 6px var(--tax-color, #1a9aa6);
  animation: taxDotPulse 2s ease-in-out infinite;
}
@keyframes taxDotPulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.tax-hero-heading {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  margin-bottom: var(--space-4, 1rem);
}

.tax-hero-icon {
  font-size: 3.5rem;
  line-height: 1;
  filter: drop-shadow(0 0 16px var(--tax-color, #1a9aa6));
}

.tax-hero-title {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.tax-hero-desc {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  margin-bottom: var(--space-8, 2rem);
  max-width: 520px;
}

.tax-hero-stats {
  display: flex;
  align-items: center;
  gap: var(--space-6, 1.5rem);
  margin-bottom: var(--space-8, 2rem);
}

.tax-hero-stat strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.tax-hero-stat span {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
}
.tax-hero-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.1);
}

.tax-hero-actions {
  display: flex;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}

/* Decorative watermark number */
.tax-hero-deco {
  text-align: center;
  position: relative;
}
.tax-hero-deco-num {
  font-size: clamp(6rem, 12vw, 10rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--tax-color, #1a9aa6) 0%, transparent 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.25;
  letter-spacing: -0.04em;
  user-select: none;
}
.tax-hero-deco-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  margin-top: 4px;
  user-select: none;
}

/* ── Type Navigation ── */
.tax-type-nav {
  background: rgba(3,14,22,0.95);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top: 72px;
  z-index: 90;
  backdrop-filter: blur(12px);
}

.tax-type-nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding-block: var(--space-3, 0.75rem);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tax-type-nav-inner::-webkit-scrollbar { display: none; }

.tax-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
  border: 1px solid transparent;
}
.tax-type-pill:hover {
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.06);
}
.tax-type-pill.active {
  color: #fff;
  background: rgba(var(--pill-c, 26,154,166), 0.15);
  border-color: var(--pill-c, rgba(26,154,166,0.4));
  /* fallback for non-color() browsers */
  background: color-mix(in srgb, var(--pill-c, #1a9aa6) 15%, transparent);
  border-color: color-mix(in srgb, var(--pill-c, #1a9aa6) 40%, transparent);
}
.tax-type-pill-count {
  font-size: 0.7rem;
  background: rgba(255,255,255,0.08);
  padding: 1px 6px;
  border-radius: 100px;
  color: rgba(255,255,255,0.4);
}

/* ── Featured Article ── */
.tax-featured-section {
  background: var(--hub-bg, #f8fafb);
  padding-block: var(--space-12, 3rem);
}

.tax-featured-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tax-color, #10646b);
  margin-bottom: var(--space-5, 1.25rem);
}

.tax-featured-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--hub-border, rgba(0,0,0,0.07));
  text-decoration: none;
  background: white;
  box-shadow: 0 4px 32px rgba(0,0,0,0.06);
  transition: box-shadow 0.3s, transform 0.3s;
  min-height: 400px;
}
.tax-featured-card:hover {
  box-shadow: 0 12px 56px rgba(0,0,0,0.12);
  transform: translateY(-3px);
}

.tax-featured-img {
  position: relative;
  overflow: hidden;
}
.tax-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.tax-featured-card:hover .tax-featured-img img {
  transform: scale(1.04);
}
.tax-featured-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to inline-start,
    rgba(248,250,251,0.12) 0%,
    transparent 50%
  );
}

.tax-featured-body {
  padding: var(--space-8, 2rem) var(--space-10, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}

.tax-featured-top {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}

.tax-featured-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--tax-color, #10646b) 10%, transparent);
  color: var(--tax-color, #10646b);
  border: 1px solid color-mix(in srgb, var(--tax-color, #10646b) 20%, transparent);
}

.tax-featured-read-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--hub-muted, #6b7280);
}

.tax-featured-title {
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: var(--hub-text, #0f1923);
  line-height: 1.35;
  letter-spacing: -0.02em;
  transition: color 0.2s;
}
.tax-featured-card:hover .tax-featured-title {
  color: var(--tax-color, #10646b);
}

.tax-featured-excerpt {
  font-size: 0.95rem;
  color: var(--hub-muted, #6b7280);
  line-height: 1.7;
  flex: 1;
}

.tax-featured-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 1rem);
  padding-top: var(--space-4, 1rem);
  border-top: 1px solid var(--hub-border, rgba(0,0,0,0.07));
  flex-wrap: wrap;
}

.tax-featured-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  font-size: 0.8rem;
  color: var(--hub-muted, #6b7280);
}
.tax-featured-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.tax-featured-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--tax-color, #10646b);
  color: #fff;
  transition: opacity 0.2s, transform 0.2s;
}
.tax-featured-card:hover .tax-featured-cta-btn {
  opacity: 0.85;
  transform: translateX(-3px);
}

/* ── Grid Section ── */
.tax-grid-section {
  background: white;
  padding-block: var(--space-12, 3rem) var(--space-16, 4rem);
}

.tax-grid-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4, 1rem);
  margin-bottom: var(--space-10, 2.5rem);
}

.tax-grid-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tax-color, #10646b);
  margin-bottom: var(--space-2, 0.5rem);
  display: flex;
  align-items: center;
  gap: 6px;
}

.tax-grid-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--hub-text, #0f1923);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.tax-grid-count {
  font-size: 0.85rem;
  color: var(--hub-muted, #6b7280);
  white-space: nowrap;
  padding: 6px 14px;
  border: 1px solid var(--hub-border, rgba(0,0,0,0.07));
  border-radius: 100px;
  background: var(--hub-bg, #f8fafb);
}
.tax-grid-count span {
  font-weight: 700;
  color: var(--hub-text, #0f1923);
}

/* Cards grid */
.tax-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5, 1.25rem);
}

.tax-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hub-border, rgba(0,0,0,0.07));
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  background: white;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.tax-card:hover {
  border-color: color-mix(in srgb, var(--tax-color, #10646b) 40%, transparent);
  box-shadow: 0 8px 40px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}

.tax-card-img {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--hub-bg, #f8fafb);
}
.tax-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.tax-card:hover .tax-card-img img { transform: scale(1.05); }

.tax-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5, 1.25rem);
  gap: var(--space-2, 0.5rem);
}

.tax-card-excerpt {
  font-size: 0.78rem;
  color: var(--hub-muted, #6b7280);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tax-card-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--hub-text, #0f1923);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}
.tax-card:hover .tax-card-title { color: var(--tax-color, #10646b); }

.tax-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
  margin-top: auto;
  padding-top: var(--space-4, 1rem);
  border-top: 1px solid var(--hub-border, rgba(0,0,0,0.07));
}

.tax-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  font-size: 0.75rem;
  color: var(--hub-muted, #6b7280);
}
.tax-card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tax-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--tax-color, #10646b);
  white-space: nowrap;
}

/* ── Pagination ── */
.tax-pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--space-12, 3rem);
}
.tax-pagination .page-numbers {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}
.tax-pagination .page-numbers li { display: flex; }
.tax-pagination .page-numbers a,
.tax-pagination .page-numbers span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding-inline: 12px;
  border-radius: 10px;
  border: 1px solid var(--hub-border, rgba(0,0,0,0.07));
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hub-muted, #6b7280);
  text-decoration: none;
  background: var(--hub-bg, #f8fafb);
  transition: all 0.2s;
  justify-content: center;
}
.tax-pagination .page-numbers a:hover {
  border-color: var(--tax-color, #10646b);
  color: var(--tax-color, #10646b);
  background: color-mix(in srgb, var(--tax-color, #10646b) 5%, white);
}
.tax-pagination .page-numbers .current {
  background: var(--tax-color, #10646b);
  border-color: var(--tax-color, #10646b);
  color: #fff;
}
.tax-pagination svg { flex-shrink: 0; }

/* ── Empty state ── */
.tax-empty {
  text-align: center;
  padding-block: var(--space-20, 5rem);
}
.tax-empty-icon {
  font-size: 4rem;
  margin-bottom: var(--space-5, 1.25rem);
}
.tax-empty h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--hub-text, #0f1923);
  margin-bottom: var(--space-2, 0.5rem);
}
.tax-empty p {
  color: var(--hub-muted, #6b7280);
  margin-bottom: var(--space-6, 1.5rem);
}

/* ── Explore other types ── */
.tax-explore-section {
  background: var(--heeiz-ink-900, #080f1c);
  padding-block: var(--space-16, 4rem);
}

.tax-explore-header {
  margin-bottom: var(--space-10, 2.5rem);
}
.tax-explore-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tax-color, #1a9aa6);
  margin-bottom: var(--space-2, 0.5rem);
}
.tax-explore-title {
  font-size: clamp(1.4rem, 3vw, 1.875rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}

.tax-explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3, 0.75rem);
}

.tax-explore-card {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  text-decoration: none;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.tax-explore-card:hover {
  background: color-mix(in srgb, var(--ec, #1a9aa6) 8%, transparent);
  border-color: color-mix(in srgb, var(--ec, #1a9aa6) 30%, transparent);
  transform: translateX(-3px);
}

.tax-explore-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px var(--ec, #1a9aa6));
}

.tax-explore-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tax-explore-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}
.tax-explore-desc {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tax-explore-count {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
}

.tax-explore-arrow {
  color: rgba(255,255,255,0.25);
  flex-shrink: 0;
  transition: color 0.2s, transform 0.2s;
}
.tax-explore-card:hover .tax-explore-arrow {
  color: var(--ec, #1a9aa6);
  transform: translateX(-3px);
}

/* ── Footer CTA ── */
.tax-cta-section {
  background: var(--heeiz-teal-950, #030e16);
  padding-block: var(--space-20, 5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.tax-cta-glow {
  position: absolute;
  width: 700px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(26,154,166,0.15) 0%, transparent 70%);
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.tax-cta-inner { position: relative; z-index: 1; max-width: 560px; margin-inline: auto; }
.tax-cta-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--heeiz-teal-400, #4dc6d0);
  margin-bottom: var(--space-4, 1rem);
}
.tax-cta-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: var(--space-4, 1rem);
}
.tax-cta-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
  margin-bottom: var(--space-8, 2rem);
}
.tax-cta-actions {
  display: flex;
  gap: var(--space-3, 0.75rem);
  justify-content: center;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════
   TAXONOMY ARCHIVE — RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .tax-hero-inner { grid-template-columns: 1fr; }
  .tax-hero-deco { display: none; }
  .tax-featured-card { grid-template-columns: 1fr; min-height: auto; }
  .tax-featured-img { aspect-ratio: 16/9; }
  .tax-grid { grid-template-columns: repeat(2, 1fr); }
  .tax-explore-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .tax-hero { padding-block: 3.5rem 3rem; }
  .tax-hero-title { font-size: 2.25rem; }
  .tax-hero-stats { gap: var(--space-4, 1rem); }
  .tax-type-nav { top: 60px; }
  .tax-grid { grid-template-columns: 1fr; }
  .tax-grid-header { align-items: flex-start; flex-direction: column; gap: var(--space-3, 0.75rem); }
  .tax-explore-grid { grid-template-columns: 1fr; }
  .tax-featured-body { padding: var(--space-6, 1.5rem); }
  .tax-cta-actions { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {
  .tax-hero-heading { flex-direction: column; align-items: flex-start; gap: var(--space-2, 0.5rem); }
  .tax-hero-icon { font-size: 2.5rem; }
  .tax-hero-stats { flex-wrap: wrap; gap: var(--space-4, 1rem); }
  .tax-hero-stat-divider { display: none; }
  .tax-hero-actions { flex-direction: column; }
  .tax-pagination .page-numbers { gap: 4px; }
}