:root{
  --color-bg:#fafaf9; --color-surface:#ffffff; --color-surface-2:#f5f5f4; --color-border:#e7e5e4;
  --color-text:#0c0a09; --color-text-muted:#57534e; --color-text-soft:#78716c;
  --color-brand:#4f46e5; --color-brand-hover:#4338ca; --color-brand-subtle:#eef2ff; --color-violet:#7c3aed;
  --color-accent:#0d9488; --color-accent-subtle:#ccfbf1; --color-danger:#dc2626; --color-warning:#d97706;
  --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px;
  --text-sm:14px; --text-base:16px; --text-lg:18px; --text-xl:20px; --text-2xl:24px; --text-3xl:30px; --text-4xl:36px; --text-5xl:48px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-full:9999px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 4px 6px -1px rgba(15,23,42,.08),0 2px 4px -2px rgba(15,23,42,.04);
  --shadow-lg:0 10px 20px -6px rgba(15,23,42,.12),0 4px 8px -4px rgba(15,23,42,.06);
  --ease-out:cubic-bezier(0.16,1,0.3,1); --d-fast:150ms; --d-base:250ms;
  --container:760px; --container-wide:1200px;
  --font-display:'Plus Jakarta Sans',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif;
}
[data-theme="dark"]{
  --color-bg:#0a0a0c; --color-surface:#15151a; --color-surface-2:#1c1c22; --color-border:#2a2a32;
  --color-text:#f5f5f4; --color-text-muted:#b8b4ae; --color-text-soft:#908a82;
  --color-brand:#818cf8; --color-brand-hover:#a5b4fc; --color-brand-subtle:#1e1b3a; --color-violet:#a78bfa;
  --color-accent:#2dd4bf; --color-accent-subtle:#134e4a;
  --shadow-lg:0 10px 30px -6px rgba(0,0,0,.6),0 4px 8px -4px rgba(0,0,0,.4);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);font-size:var(--text-base);line-height:1.7;-webkit-font-smoothing:antialiased;transition:background var(--d-base),color var(--d-base)}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.2;letter-spacing:-0.02em;font-weight:800}
a{color:var(--color-brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--space-6)}
.wrap-wide{max-width:var(--container-wide);margin:0 auto;padding:0 var(--space-6)}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--color-bg) 85%,transparent);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--color-border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:var(--container-wide);margin:0 auto;padding:0 var(--space-6)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:var(--text-xl);color:var(--color-text)}
.brand:hover{text-decoration:none}
.brand .logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--color-brand),var(--color-violet));display:grid;place-items:center;color:#fff}
.nav-right{display:flex;align-items:center;gap:var(--space-4)}
.nav-right a{color:var(--color-text-muted);font-size:var(--text-sm);font-weight:500}
.nav-right a:hover{color:var(--color-text);text-decoration:none}
.icon-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-muted);cursor:pointer}
.icon-btn:hover{color:var(--color-text);border-color:var(--color-brand)}
@media(max-width:640px){ .nav-right .hide-sm{display:none} }

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:12px 22px;border-radius:var(--radius-md);font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);transition:all var(--d-fast) var(--ease-out);cursor:pointer;border:1px solid transparent}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--color-brand);color:#fff}
.btn-primary:hover{background:var(--color-brand-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent;color:var(--color-text);border-color:var(--color-border)}
.btn-ghost:hover{border-color:var(--color-brand)}

/* Kicker / badges */
.kicker{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-brand);background:var(--color-brand-subtle);padding:6px 12px;border-radius:var(--radius-full)}
.tag{display:inline-block;font-size:12px;font-weight:700;color:var(--color-danger);background:color-mix(in srgb,var(--color-danger) 12%,transparent);padding:4px 10px;border-radius:var(--radius-full)}

/* Blog listing */
.page-head{padding:var(--space-16) 0 var(--space-8)}
.page-head h1{font-size:var(--text-5xl);letter-spacing:-0.03em;margin:var(--space-4) 0}
.page-head p{font-size:var(--text-lg);color:var(--color-text-muted);max-width:60ch}
@media(max-width:640px){ .page-head h1{font-size:var(--text-4xl)} }
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);padding-bottom:var(--space-24)}
@media(max-width:900px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.post-grid{grid-template-columns:1fr}}
.post-card.feat{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-8);align-items:center}
@media(max-width:760px){.post-card.feat{grid-template-columns:1fr}}
.post-card .thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-md);margin-bottom:var(--space-4);background:var(--color-surface-2)}
.post-card.feat .thumb{aspect-ratio:16/10;margin:0;height:100%}
.post-card{display:block;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8);transition:all var(--d-base) var(--ease-out)}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);text-decoration:none;border-color:color-mix(in srgb,var(--color-brand) 40%,var(--color-border))}
.post-card .meta{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;font-size:var(--text-sm);color:var(--color-text-soft);margin-bottom:var(--space-3)}
.post-card h2{font-size:var(--text-2xl);color:var(--color-text);margin-bottom:var(--space-3)}
.post-card p{color:var(--color-text-muted)}
.post-card .more{display:inline-block;margin-top:var(--space-4);color:var(--color-brand);font-weight:700;font-size:var(--text-sm)}

/* Article */
.article{padding:var(--space-12) 0 var(--space-24)}
.article-head{margin-bottom:var(--space-8)}
.article-head h1{font-size:var(--text-4xl);letter-spacing:-0.03em;line-height:1.15;margin:var(--space-4) 0}
@media(max-width:640px){ .article-head h1{font-size:var(--text-3xl)} }
.article-meta{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;font-size:var(--text-sm);color:var(--color-text-soft);margin-top:var(--space-4)}
.prose{font-size:var(--text-lg);color:var(--color-text)}
.prose>p{margin:var(--space-6) 0;color:var(--color-text-muted)}
.prose h2{font-size:var(--text-2xl);margin:var(--space-12) 0 var(--space-4)}
.prose h3{font-size:var(--text-xl);margin:var(--space-8) 0 var(--space-3)}
.prose strong{color:var(--color-text);font-weight:600}
.prose ul,.prose ol{margin:var(--space-4) 0;padding-left:var(--space-6);color:var(--color-text-muted)}
.prose li{margin:var(--space-2) 0}
.prose a{font-weight:600}
.lead-p{font-size:var(--text-xl)!important;color:var(--color-text)!important;line-height:1.6}
.callout{background:var(--color-surface);border:1px solid var(--color-border);border-left:4px solid var(--color-brand);border-radius:var(--radius-md);padding:var(--space-6);margin:var(--space-8) 0}
.callout .ct{font-family:var(--font-display);font-weight:800;color:var(--color-brand);margin-bottom:var(--space-2);font-size:var(--text-base)}
.callout p{margin:var(--space-2) 0 0!important;font-size:var(--text-base)!important;color:var(--color-text-muted)!important}
.tldr{background:color-mix(in srgb,var(--color-brand-subtle) 55%,var(--color-surface));border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);margin:var(--space-8) 0}
[data-theme="dark"] .tldr{background:var(--color-surface)}
.tldr h2{font-size:var(--text-lg)!important;margin:0 0 var(--space-3)!important;color:var(--color-brand)}
.tldr ul{margin:0;padding-left:var(--space-6)}
.sources{font-size:var(--text-sm);color:var(--color-text-soft);border-top:1px solid var(--color-border);margin-top:var(--space-12);padding-top:var(--space-6)}
.sources li{margin:var(--space-2) 0}
.cta-box{background:linear-gradient(135deg,var(--color-brand-subtle),var(--color-accent-subtle));border-radius:var(--radius-xl);padding:var(--space-8);margin:var(--space-12) 0;text-align:center}
[data-theme="dark"] .cta-box{background:linear-gradient(135deg,#1a1733,#0f2e2b)}
.cta-box h3{font-size:var(--text-2xl);margin-bottom:var(--space-3)}
.cta-box p{color:var(--color-text-muted);margin-bottom:var(--space-6);max-width:52ch;margin-inline:auto}

/* Footer */
footer{border-top:1px solid var(--color-border);padding:var(--space-12) 0;color:var(--color-text-soft);font-size:var(--text-sm)}
.foot-inner{max-width:var(--container-wide);margin:0 auto;padding:0 var(--space-6);display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
footer a{color:var(--color-text-muted)}

/* Article full-width 2-column layout */
.article-wrap{max-width:var(--container-wide);margin:0 auto;padding:0 var(--space-6)}
.breadcrumb{font-size:var(--text-sm);color:var(--color-text-soft);padding:var(--space-6) 0 0}
.breadcrumb a{color:var(--color-text-muted)}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--space-12);align-items:start;padding:var(--space-6) 0 var(--space-24)}
@media(max-width:980px){.article-layout{grid-template-columns:1fr;gap:var(--space-8)}}
.article-main{min-width:0}
.article-aside{position:sticky;top:84px;display:flex;flex-direction:column;gap:var(--space-6)}
@media(max-width:980px){.article-aside{position:static}}
.aside-box{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6)}
.aside-box h4{font-family:var(--font-display);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-soft);margin-bottom:var(--space-3)}
.toc a{display:block;padding:6px 0 6px var(--space-3);font-size:var(--text-sm);color:var(--color-text-muted);border-left:2px solid var(--color-border)}
.toc a:hover{color:var(--color-brand);border-color:var(--color-brand);text-decoration:none}
.aside-related a{display:block;font-size:var(--text-sm);color:var(--color-text);font-weight:600;padding:var(--space-2) 0;border-bottom:1px solid var(--color-border)}
.aside-related a:last-child{border-bottom:none}
.aside-related a:hover{color:var(--color-brand);text-decoration:none}
.aside-cta{background:linear-gradient(135deg,var(--color-brand-subtle),var(--color-accent-subtle));border:none}
[data-theme="dark"] .aside-cta{background:linear-gradient(135deg,#1a1733,#0f2e2b)}
.aside-cta p{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-4)}

/* Images */
.hero-img{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:var(--radius-xl);margin:var(--space-6) 0;background:var(--color-surface-2);display:block}
figure{margin:var(--space-8) 0}
figure img{width:100%;border-radius:var(--radius-lg);display:block;background:var(--color-surface-2)}
figcaption{font-size:var(--text-sm);color:var(--color-text-soft);text-align:center;margin-top:var(--space-2)}

/* FAQ (GEO) */
.faq{margin:var(--space-8) 0}
.faq details{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4) var(--space-6);margin-bottom:var(--space-3);background:var(--color-surface)}
.faq summary{font-family:var(--font-display);font-weight:700;cursor:pointer;color:var(--color-text);font-size:var(--text-base)}
.faq details[open] summary{margin-bottom:var(--space-3);color:var(--color-brand)}
.faq details p{margin:0!important;font-size:var(--text-base)!important;color:var(--color-text-muted)!important}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}