/* ============================================================
   EVERYX — site styles, built on the Everyx Design System
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* PRIMARY (фиолетовый) */
  --primary-950:#160824; --primary-900:#231040; --primary-800:#2E1555;
  --primary-700:#3D1C6E; --primary-600:#482973; --primary-500:#5C3690;
  --primary-400:#7A57AA; --primary-300:#9E82C5; --primary-200:#C3ADDE;
  --primary-100:#E4D8F2; --primary-50:#F3EEF9;

  /* ACCENT (оранжевый) — overridable via [data-accent] */
  --accent-600:#C47B00; --accent-500:#FF9100; --accent-400:#FFB040;
  --accent-300:#FFC570; --accent-200:#FFE0A8; --accent-100:#FFF2D8; --accent-50:#FFF9EE;

  /* NEUTRAL */
  --neutral-950:#0D0D0D; --neutral-900:#1A1A1A; --neutral-800:#2E2E2E;
  --neutral-700:#454545; --neutral-600:#5C5C5C; --neutral-500:#737373;
  --neutral-400:#8F8F8F; --neutral-300:#ADADAD; --neutral-200:#CECECE;
  --neutral-100:#E8E8E8; --neutral-50:#F5F5F5; --neutral-0:#FFFFFF;

  --success-500:#1A8554; --success-100:#D3EFDE;
  --warning-500:#C07B1A; --warning-100:#FDEFD3;
  --error-500:#C22B2B;   --error-100:#FDD3D3;
  --info-500:#1A6DA8;    --info-100:#D3E7F8;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --space-20:80px; --space-24:96px;

  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px;
  --radius-2xl:24px; --radius-full:9999px;

  --shadow-sm:0 1px 3px rgba(15,27,45,.08),0 1px 2px rgba(15,27,45,.04);
  --shadow-md:0 4px 12px rgba(15,27,45,.10),0 2px 4px rgba(15,27,45,.06);
  --shadow-lg:0 12px 32px rgba(15,27,45,.12),0 4px 8px rgba(15,27,45,.06);
  --shadow-xl:0 24px 48px rgba(15,27,45,.16),0 8px 16px rgba(15,27,45,.08);

  --font-sans:'Montserrat',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Courier New',monospace;

  --text-xs:12px; --text-sm:14px; --text-base:16px; --text-lg:18px; --text-xl:20px;
  --text-2xl:24px; --text-3xl:30px; --text-4xl:36px; --text-5xl:48px; --text-6xl:60px; --text-7xl:72px;

  --leading-tight:1.2; --leading-snug:1.35; --leading-normal:1.5;
  --leading-relaxed:1.65; --leading-loose:1.8;

  --maxw:1200px;
}

/* Accent themes (Tweak) */
[data-accent="amber"]  { --accent-600:#C47B00; --accent-500:#FF9100; --accent-400:#FFB040; --accent-200:#FFE0A8; --accent-100:#FFF2D8; --accent-50:#FFF9EE; }
[data-accent="teal"]   { --accent-600:#0B7A6B; --accent-500:#11A892; --accent-400:#4CC9B6; --accent-200:#B3EBE2; --accent-100:#DCF6F1; --accent-50:#EEFBF9; }
[data-accent="coral"]  { --accent-600:#C23B52; --accent-500:#F25C73; --accent-400:#F78A9B; --accent-200:#FBCDD5; --accent-100:#FDE6EA; --accent-50:#FEF3F5; }
[data-accent="lime"]   { --accent-600:#5E8C00; --accent-500:#8BC400; --accent-400:#A9D63F; --accent-200:#DCF0A8; --accent-100:#EDF8D3; --accent-50:#F7FCEC; }

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-sans);
  background:var(--neutral-0);
  color:var(--neutral-900);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--space-6); }
.wrap-narrow { max-width:760px; margin:0 auto; padding:0 var(--space-6); }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-sans); font-weight:600; font-size:var(--text-sm);
  padding:var(--space-3) var(--space-5); border-radius:var(--radius-full);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:all .15s; white-space:nowrap; line-height:1;
}
.btn-lg { padding:var(--space-4) var(--space-8); font-size:var(--text-base); }
.btn-accent { background:var(--accent-500); color:#fff; }
.btn-accent:hover { background:var(--accent-600); }
.btn-dark { background:var(--primary-900); color:#fff; }
.btn-dark:hover { background:var(--primary-800); }
.btn-light { background:#fff; color:var(--primary-900); border-color:var(--neutral-200); }
.btn-light:hover { border-color:var(--primary-300); color:var(--primary-700); }
.btn-ghost { background:transparent; color:var(--primary-700); }
.btn-ghost:hover { background:var(--primary-50); }
.btn-outline-light { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.btn-outline-light:hover { background:rgba(255,255,255,.10); border-color:#fff; }

/* ── NAVBAR ── */
.nav {
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.88); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--neutral-100);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:72px; gap:var(--space-6); }
.nav-logo { display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.nav-logo svg, .nav-logo img { display:block; height:30px; width:auto; }
.nav-links { display:flex; align-items:center; gap:var(--space-1); list-style:none; }
.nav-link {
  padding:var(--space-2) var(--space-4); border-radius:var(--radius-md);
  font-size:var(--text-sm); font-weight:500; color:var(--neutral-700);
  text-decoration:none; transition:all .15s;
}
.nav-link:hover { background:var(--neutral-50); color:var(--primary-900); }
.nav-link.active { color:var(--primary-700); font-weight:600; background:var(--primary-50); }
.nav-actions { display:flex; align-items:center; gap:var(--space-3); flex-shrink:0; }
.nav-burger { display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--primary-900); }

/* ── HERO ── */
.hero { position:relative; background:var(--primary-950); color:#fff; overflow:hidden; }
.hero::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 80% -10%, color-mix(in oklch, var(--accent-500) 28%, transparent), transparent 60%),
    radial-gradient(700px 500px at 0% 110%, var(--primary-700), transparent 55%);
  opacity:.9;
}
.hero-inner { position:relative; padding:var(--space-24) 0; }
.eyebrow {
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--text-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-400); margin-bottom:var(--space-5);
}
.eyebrow::before { content:""; width:24px; height:2px; background:var(--accent-500); }
.hero h1 {
  font-size:clamp(var(--text-4xl),6vw,var(--text-7xl)); font-weight:900;
  letter-spacing:-.04em; line-height:1.04; text-wrap:balance; max-width:14ch;
}
.hero h1 em { font-style:normal; color:var(--accent-400); }
.hero-lead { font-size:var(--text-xl); color:var(--primary-200); max-width:54ch; margin-top:var(--space-6); line-height:var(--leading-relaxed); }
.hero-cta { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-8); }

/* ── SECTION ── */
.section { padding:var(--space-24) 0; }
.section.tight { padding:var(--space-16) 0; }
.section.alt { background:var(--neutral-50); }
.section.dark { background:var(--primary-950); color:#fff; }
.section-head { max-width:60ch; margin-bottom:var(--space-12); }
.section-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.kicker {
  display:inline-block; font-size:var(--text-xs); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-600); margin-bottom:var(--space-4);
}
.dark .kicker { color:var(--accent-400); }
.section-title {
  font-size:clamp(var(--text-3xl),4vw,var(--text-5xl)); font-weight:900;
  letter-spacing:-.035em; color:var(--primary-950); line-height:1.08; text-wrap:balance;
}
.dark .section-title { color:#fff; }
.section-sub { font-size:var(--text-lg); color:var(--neutral-600); margin-top:var(--space-4); line-height:var(--leading-relaxed); }
.dark .section-sub { color:var(--primary-200); }

/* ── CARDS ── */
.card {
  background:#fff; border:1px solid var(--neutral-100); border-radius:var(--radius-xl);
  overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .2s, transform .2s;
  display:flex; flex-direction:column;
}
a.card { text-decoration:none; color:inherit; }
.card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.card-img { width:100%; aspect-ratio:16/9; position:relative; overflow:hidden; background:var(--primary-900); }
.card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.article-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.card-body { padding:var(--space-5); display:flex; flex-direction:column; flex:1; }
.card-tag {
  display:inline-flex; align-items:center; align-self:flex-start; padding:3px var(--space-3);
  background:var(--accent-100); color:var(--accent-600); border-radius:var(--radius-full);
  font-size:var(--text-xs); font-weight:600; letter-spacing:.03em; margin-bottom:var(--space-3);
}
.card-title {
  font-size:var(--text-lg); font-weight:700; color:var(--primary-900);
  line-height:var(--leading-snug); margin-bottom:var(--space-3); letter-spacing:-.01em;
}
.card-excerpt { font-size:var(--text-sm); color:var(--neutral-600); line-height:var(--leading-relaxed); margin-bottom:var(--space-4); }
.card-meta {
  display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-xs);
  color:var(--neutral-400); border-top:1px solid var(--neutral-50); padding-top:var(--space-4); margin-top:auto;
}
.card-meta-dot { color:var(--neutral-200); }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--space-6); }
.card-grid.cols-2 { grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); }

/* Featured / research variants */
.card-featured { background:var(--primary-900); color:#fff; }
.card-featured .card-title { color:#fff; }
.card-featured .card-excerpt { color:var(--primary-200); }
.card-featured .card-meta { color:var(--primary-300); border-color:var(--primary-700); }
.card-featured .card-tag { background:var(--accent-500); color:#fff; }
.card-research { border-left:4px solid var(--primary-500); }
.card-research .card-body { padding:var(--space-6); }
.card-research-icon { width:44px; height:44px; background:var(--primary-50); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-4); font-size:20px; }
.card-research-label { font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--primary-500); margin-bottom:var(--space-2); }

/* Placeholder imagery */
.ph {
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
  background:
    linear-gradient(135deg, var(--primary-100), var(--primary-50)),
    repeating-linear-gradient(45deg, rgba(0,0,0,.025) 0 10px, transparent 10px 20px);
  color:var(--primary-400); font-size:var(--text-xs); font-weight:600; letter-spacing:.04em;
  width:100%; height:100%; text-align:center; padding:var(--space-4);
}
.ph svg { width:34px; height:34px; opacity:.55; }
.ph.dark { background:linear-gradient(135deg, var(--primary-800), var(--primary-900)); color:var(--primary-300); }
.ph.accent { background:linear-gradient(135deg, var(--accent-200), var(--accent-100)); color:var(--accent-600); }

/* ── CHIPS / FILTERS ── */
.chips { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.chip {
  padding:var(--space-2) var(--space-4); border-radius:var(--radius-full);
  font-size:var(--text-sm); font-weight:600; background:var(--neutral-50);
  color:var(--neutral-600); border:1px solid var(--neutral-100); cursor:pointer; transition:all .15s;
}
.chip:hover { border-color:var(--primary-300); color:var(--primary-700); }
.chip.active { background:var(--primary-900); color:#fff; border-color:var(--primary-900); }

/* ── BADGES ── */
.badge { display:inline-flex; align-items:center; padding:3px var(--space-2); border-radius:var(--radius-sm); font-size:11px; font-weight:700; letter-spacing:.02em; }
.badge-new { background:var(--accent-500); color:#fff; }
.badge-popular { background:var(--warning-500); color:#fff; }
.badge-research { background:var(--primary-900); color:#fff; }

/* ── STAT ── */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--space-6); }
.stat { text-align:left; }
.stat-num { font-size:clamp(var(--text-4xl),5vw,var(--text-6xl)); font-weight:900; letter-spacing:-.04em; color:var(--primary-900); line-height:.95; }
.dark .stat-num { color:#fff; }
.stat-num span { color:var(--accent-500); }
.dark .stat-num span { color:var(--accent-400); }
.stat-label { font-size:var(--text-sm); color:var(--neutral-500); margin-top:var(--space-3); line-height:var(--leading-relaxed); max-width:26ch; }
.dark .stat-label { color:var(--primary-200); }

/* ── FEATURE TILES ── */
.feature { background:#fff; border:1px solid var(--neutral-100); border-radius:var(--radius-xl); padding:var(--space-8); transition:all .2s; }
.feature:hover { border-color:var(--primary-200); box-shadow:var(--shadow-md); }
.feature-ico { width:52px; height:52px; border-radius:var(--radius-lg); background:var(--accent-100); color:var(--accent-600); display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-5); }
.feature-ico svg { width:26px; height:26px; }
.feature h3 { font-size:var(--text-xl); font-weight:700; color:var(--primary-900); letter-spacing:-.01em; margin-bottom:var(--space-3); }
.feature p { font-size:var(--text-sm); color:var(--neutral-600); line-height:var(--leading-relaxed); }

/* ── TABLE ── */
.table-wrap { overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--neutral-100); }
.tbl { width:100%; border-collapse:collapse; background:#fff; font-size:var(--text-sm); }
.tbl thead { background:var(--primary-900); }
.tbl thead th { padding:var(--space-3) var(--space-4); text-align:left; color:var(--primary-200); font-size:var(--text-xs); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.tbl tbody tr { border-bottom:1px solid var(--neutral-50); }
.tbl tbody tr:last-child { border-bottom:none; }
.tbl tbody td { padding:var(--space-3) var(--space-4); color:var(--neutral-800); }
.tbl tbody tr.is-active { background:var(--accent-50); }
.tbl tbody tr.is-active td { color:var(--primary-900); font-weight:600; }

/* ── CALLOUT ── */
.callout { padding:var(--space-5) var(--space-6); border-radius:var(--radius-lg); margin:var(--space-6) 0; display:flex; gap:var(--space-4); }
.callout-ico { flex-shrink:0; margin-top:2px; }
.callout-ico svg { width:22px; height:22px; }
.callout-title { font-size:var(--text-base); font-weight:700; margin-bottom:var(--space-1); }
.callout-text { font-size:var(--text-sm); line-height:var(--leading-relaxed); }
.callout-info { background:var(--info-100); } .callout-info .callout-title,.callout-info .callout-ico{ color:var(--info-500); } .callout-info .callout-text{ color:#1A3D5C; }
.callout-success { background:var(--success-100); } .callout-success .callout-title,.callout-success .callout-ico{ color:var(--success-500); } .callout-success .callout-text{ color:#0A3D20; }
.callout-warning { background:var(--warning-100); } .callout-warning .callout-title,.callout-warning .callout-ico{ color:var(--warning-500); } .callout-warning .callout-text{ color:#5C3E0A; }

/* ── BREADCRUMB ── */
.crumb { display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-6); font-size:var(--text-sm); }
.crumb a { color:var(--primary-500); text-decoration:none; }
.crumb a:hover { color:var(--primary-700); text-decoration:underline; }
.crumb-sep { color:var(--neutral-300); }
.crumb .current { color:var(--neutral-700); font-weight:500; }

/* ── PAGE HEADER (catalog) ── */
.page-head { background:var(--primary-950); color:#fff; padding:var(--space-20) 0 var(--space-16); position:relative; overflow:hidden; }
.page-head::before { content:""; position:absolute; inset:0; background:radial-gradient(700px 400px at 90% 0%, color-mix(in oklch, var(--accent-500) 22%, transparent), transparent 60%); }
.page-head .wrap { position:relative; }
.page-head h1 { font-size:clamp(var(--text-4xl),5vw,var(--text-6xl)); font-weight:900; letter-spacing:-.04em; line-height:1.05; max-width:18ch; }
.page-head p { font-size:var(--text-lg); color:var(--primary-200); margin-top:var(--space-5); max-width:60ch; line-height:var(--leading-relaxed); }

/* ── PAGINATION ── */
.pager { display:flex; align-items:center; gap:var(--space-1); justify-content:center; margin-top:var(--space-12); }
.pager button { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-md); font-size:var(--text-sm); font-weight:600; cursor:pointer; border:none; background:transparent; color:var(--neutral-700); font-family:var(--font-sans); transition:all .15s; }
.pager button:hover { background:var(--neutral-100); }
.pager button.active { background:var(--primary-900); color:#fff; }

/* ── CTA BAND ── */
.cta-band { background:var(--primary-900); border-radius:var(--radius-2xl); padding:var(--space-16); position:relative; overflow:hidden; color:#fff; }
.cta-band::before { content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 100% 0%, color-mix(in oklch, var(--accent-500) 30%, transparent), transparent 60%); }
.cta-band > * { position:relative; }

/* ── FOOTER ── */
.footer { background:var(--primary-950); color:var(--primary-200); padding:var(--space-20) 0 var(--space-10); }
.footer-top { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--space-10); padding-bottom:var(--space-12); border-bottom:1px solid var(--primary-800); }
.footer-brand svg, .footer-brand img { height:32px; margin-bottom:var(--space-5); }
.footer-brand p { font-size:var(--text-sm); line-height:var(--leading-relaxed); max-width:34ch; color:var(--primary-300); }
.footer-col h4 { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.1em; color:var(--primary-400); margin-bottom:var(--space-4); font-weight:700; }
.footer-col a { display:block; text-decoration:none; color:var(--primary-200); font-size:var(--text-sm); padding:var(--space-2) 0; transition:color .15s; }
.footer-col a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:var(--space-8); gap:var(--space-4); flex-wrap:wrap; }
.footer-bottom p { font-size:var(--text-xs); color:var(--primary-400); }

/* ── MOBILE ── */
@media (max-width:920px) {
  .nav-links { display:none; }
  .nav-burger { display:flex; }
  /* Keep the primary CTA visible in the header row instead of hiding it behind
     the burger — a hidden-behind-burger CTA is a recurring mobile UX defect
     on this platform's client sites (see CLAUDE.md mobile-nav gotcha). */
  .nav-actions .btn { padding:8px 14px; font-size:var(--text-sm); }
  .nav.open .nav-links {
    display:flex; position:absolute; top:72px; left:0; right:0; flex-direction:column;
    background:#fff; padding:var(--space-4); gap:var(--space-1); border-bottom:1px solid var(--neutral-100); box-shadow:var(--shadow-lg);
  }
  .footer-top { grid-template-columns:1fr 1fr; gap:var(--space-8); }
  .section { padding:var(--space-16) 0; }
  .hero-inner { padding:var(--space-16) 0; }
}
@media (max-width:560px) {
  .wrap, .wrap-narrow { padding:0 var(--space-4); }
  .card-grid, .card-grid.cols-2 { grid-template-columns:minmax(0, 1fr); }
  .card { min-width:0; }
  .footer-top { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
}

/* ── HERO STRIP ── */
.hero-strip { display:flex; flex-wrap:wrap; gap:var(--space-10); margin-top:var(--space-16); padding-top:var(--space-8); border-top:1px solid rgba(255,255,255,.12); }
.hero-strip-item { display:flex; flex-direction:column; gap:4px; }
.hero-strip-item strong { font-size:var(--text-xl); font-weight:800; color:#fff; letter-spacing:-.02em; }
.hero-strip-item span { font-size:var(--text-sm); color:var(--primary-300); max-width:28ch; }

/* ── ADVANTAGES ── */
.adv-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-16); }
.checklist { list-style:none; margin-top:var(--space-6); display:flex; flex-direction:column; gap:var(--space-4); }
.checklist li { position:relative; padding-left:var(--space-8); font-size:var(--text-base); color:var(--neutral-700); line-height:var(--leading-relaxed); }
.checklist li::before {
  content:""; position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:var(--radius-full);
  background:var(--accent-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C47B00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* ── CTA BAND grid ── */
.cta-band-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:var(--space-12); align-items:center; }
.cta-mini { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-xl); padding:var(--space-6); backdrop-filter:blur(6px); }
.cta-mini-row { display:flex; align-items:center; justify-content:space-between; padding:var(--space-3) 0; border-bottom:1px solid rgba(255,255,255,.10); }
.cta-mini-row:last-child { border-bottom:none; }
.cta-mini-row span { font-size:var(--text-sm); color:var(--primary-200); }
.cta-mini-row strong { font-size:var(--text-lg); font-weight:800; color:#fff; }
.cta-mini-row.hl strong { color:var(--accent-400); }

/* ── SECTION HEAD ROW ── */
.section-head-row { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap; }

@media (max-width:920px) {
  .adv-grid { grid-template-columns:1fr; gap:var(--space-12); }
  .cta-band-grid { grid-template-columns:1fr; gap:var(--space-8); }
  .cta-band { padding:var(--space-10); }
  .hero-strip { gap:var(--space-6); margin-top:var(--space-12); }
}

/* ── READING PROGRESS ── */
.progress-wrap { position:fixed; top:0; left:0; right:0; height:3px; background:transparent; z-index:70; }
.progress-fill { height:100%; width:0; background:linear-gradient(to right, var(--accent-400), var(--accent-600)); transition:width .1s linear; }

/* ── ARTICLE HERO ── */
.article-hero { background:var(--primary-950); color:#fff; padding:var(--space-16) 0 var(--space-12); position:relative; overflow:hidden; }
.article-hero::before { content:""; position:absolute; inset:0; background:radial-gradient(700px 400px at 85% 0%, color-mix(in oklch, var(--accent-500) 20%, transparent), transparent 60%); }
.article-hero .wrap-narrow { position:relative; }
.article-tag { display:inline-flex; align-items:center; gap:var(--space-2); padding:4px var(--space-4); border-radius:var(--radius-full); background:var(--accent-500); color:#fff; font-size:var(--text-xs); font-weight:700; letter-spacing:.04em; margin-bottom:var(--space-5); }
.article-hero h1 { font-size:clamp(var(--text-4xl),5vw,var(--text-6xl)); font-weight:900; letter-spacing:-.04em; line-height:1.08; text-wrap:balance; }
.article-hero .lead { font-size:var(--text-xl); color:var(--primary-200); margin-top:var(--space-5); line-height:var(--leading-relaxed); }
.article-byline { display:flex; align-items:center; gap:var(--space-4); margin-top:var(--space-8); font-size:var(--text-sm); color:var(--primary-300); }
.article-avatar { width:44px; height:44px; border-radius:var(--radius-full); background:var(--primary-700); display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; }
.article-cover { aspect-ratio:21/9; border-radius:var(--radius-2xl); overflow:hidden; margin:calc(var(--space-12) * -0.5) auto var(--space-12); max-width:900px; box-shadow:var(--shadow-xl); position:relative; z-index:2; }

/* ── ARTICLE BODY ── */
.article-body { color:var(--neutral-800); line-height:var(--leading-relaxed); }
.article-body > * + * { margin-top:0; }
.article-body h2 { font-size:clamp(var(--text-2xl),3.5vw,var(--text-4xl)); font-weight:800; color:var(--primary-900); line-height:var(--leading-snug); letter-spacing:-.03em; margin-top:var(--space-12); margin-bottom:var(--space-5); text-wrap:pretty; }
.article-body h3 { font-size:clamp(var(--text-xl),2.5vw,var(--text-2xl)); font-weight:700; color:var(--primary-900); line-height:var(--leading-snug); letter-spacing:-.02em; margin-top:var(--space-10); margin-bottom:var(--space-4); text-wrap:pretty; }
.article-body p { font-size:var(--text-lg); line-height:var(--leading-loose); margin-bottom:var(--space-5); color:var(--neutral-800); }
.article-body p.lead { font-size:var(--text-xl); color:var(--neutral-700); line-height:var(--leading-relaxed); margin-bottom:var(--space-8); }
.article-body ul, .article-body ol { margin:0 0 var(--space-6) var(--space-6); }
.article-body li { font-size:var(--text-lg); line-height:var(--leading-relaxed); margin-bottom:var(--space-3); color:var(--neutral-800); }
.article-body blockquote { border-left:4px solid var(--accent-500); padding:var(--space-5) var(--space-6); background:var(--neutral-50); border-radius:0 var(--radius-lg) var(--radius-lg) 0; margin:var(--space-8) 0; }
.article-body blockquote p { font-size:var(--text-xl); font-style:italic; color:var(--primary-800); font-weight:500; line-height:var(--leading-relaxed); margin-bottom:var(--space-3); }
.article-body blockquote cite { font-size:var(--text-sm); color:var(--neutral-500); font-style:normal; }
.article-body figure { margin:var(--space-8) 0; }
.article-body figure .ph { aspect-ratio:16/9; border-radius:var(--radius-xl); }
.article-body figcaption { font-size:var(--text-sm); color:var(--neutral-400); margin-top:var(--space-3); text-align:center; }
.article-body img { border-radius:var(--radius-xl); }

/* pull stats inside article */
.article-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin:var(--space-8) 0; }
.article-stat { background:var(--primary-50); border-radius:var(--radius-xl); padding:var(--space-6); text-align:center; }
.article-stat .as-num { font-size:var(--text-4xl); font-weight:900; letter-spacing:-.03em; color:var(--primary-900); line-height:1; }
.article-stat .as-num span { color:var(--accent-500); }
.article-stat .as-label { font-size:var(--text-sm); color:var(--neutral-600); margin-top:var(--space-2); }

@media (max-width:560px){ .article-stats{ grid-template-columns:1fr; } }

/* utility */
.muted { color:var(--neutral-500); }
.center { text-align:center; }
.mt-2{margin-top:var(--space-2)} .mt-4{margin-top:var(--space-4)} .mt-6{margin-top:var(--space-6)} .mt-8{margin-top:var(--space-8)} .mt-12{margin-top:var(--space-12)}
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--space-6); }
.grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--space-6); }
.grid-4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-6); }