:root {
  --bg: #f7f8f5;
  --bg2: #eef0ea;
  --fg: #0e110d;
  --fg2: #3a3f37;
  --fg3: #7a8075;
  --neon: #39e06e;
  --neon-dim: #1db852;
  --neon-pale: #d4f5e0;
  --neon-glow: rgba(57,224,110,0.35);
  --border: rgba(57,224,110,0.25);
  --grid: rgba(57,224,110,0.07);
  --mono: 'JetBrains Mono', monospace;
  --head: 'Space Grotesk', sans-serif;
  --body: 'Outfit', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}
* { position: relative; z-index: 1; }
h1,h2,h3,h4 { font-family: var(--head); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
a { color: var(--neon-dim); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 800px; margin: 0 auto; padding: 0 32px; }

/* NAV */
nav.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,248,245,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(57,224,110,0.15);
  padding: 14px 0;
}
nav.site-nav .nav-inner { display:flex; align-items:center; justify-content:space-between; }
.nav-logo { font-family: var(--mono); font-size:13px; font-weight:500; color:var(--fg2); text-decoration:none; letter-spacing:0.05em; }
.nav-logo span { color: var(--neon-dim); }
.nav-links { display:flex; align-items:center; gap:24px; }
.nav-links a { font-family:var(--head); font-size:14px; color:var(--fg2); font-weight:500; text-decoration:none; }
.nav-links a:hover { color:var(--neon-dim); }
.nav-links a.active { color:var(--neon-dim); }
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--neon); color:var(--fg);
  font-family:var(--head); font-weight:600; font-size:14px;
  padding:10px 22px; border-radius:6px; border:none;
  text-decoration:none; cursor:pointer;
  transition:transform 0.15s, box-shadow 0.15s;
  box-shadow:0 0 24px var(--neon-glow);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 0 40px var(--neon-glow); text-decoration:none; }
.btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--fg2);
  font-family:var(--head); font-weight:500; font-size:14px;
  padding:9px 20px; border-radius:6px;
  border:1.5px solid rgba(0,0,0,0.12);
  text-decoration:none; cursor:pointer;
  transition:border-color 0.15s, color 0.15s;
}
.btn-outline:hover { border-color:var(--neon-dim); color:var(--neon-dim); text-decoration:none; }

/* LABEL */
.label {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:0.12em;
  color:var(--neon-dim); background:var(--neon-pale);
  border:1px solid var(--border);
  padding:4px 12px; border-radius:100px;
}
.label::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--neon); box-shadow:0 0 8px var(--neon); animation:blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* BREADCRUMB */
.breadcrumb { padding:16px 0; font-family:var(--mono); font-size:12px; color:var(--fg3); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.breadcrumb a { color:var(--fg3); text-decoration:none; }
.breadcrumb a:hover { color:var(--neon-dim); }
.breadcrumb span { opacity:0.4; }

/* ARTICLE CARD */
.article-card {
  background:white; border:1px solid rgba(0,0,0,0.07); border-radius:16px;
  overflow:hidden; transition:box-shadow 0.2s, border-color 0.2s;
  text-decoration:none; display:block; color:var(--fg);
}
.article-card:hover { box-shadow:0 8px 40px rgba(57,224,110,0.12); border-color:var(--border); text-decoration:none; }
.article-card .card-body { padding:28px 28px 24px; }
.article-card .card-tag { font-family:var(--mono); font-size:10px; color:var(--neon-dim); background:var(--neon-pale); padding:3px 10px; border-radius:100px; text-transform:uppercase; letter-spacing:0.08em; display:inline-block; margin-bottom:14px; }
.article-card h2 { font-size:20px; margin-bottom:10px; line-height:1.25; }
.article-card p { font-size:14px; color:var(--fg2); line-height:1.6; margin-bottom:18px; }
.article-card .card-meta { font-family:var(--mono); font-size:11px; color:var(--fg3); display:flex; gap:16px; }
.article-card .read-time::before { content:'⏱ '; }

/* ARTICLE PAGE */
.article-hero { padding:80px 0 48px; }
.article-hero .article-tag { margin-bottom:20px; }
.article-hero h1 { font-size:clamp(28px,4vw,52px); margin-bottom:20px; max-width:800px; }
.article-hero .article-lead { font-size:19px; color:var(--fg2); max-width:700px; line-height:1.7; margin-bottom:28px; }
.article-meta { display:flex; gap:20px; align-items:center; flex-wrap:wrap; font-family:var(--mono); font-size:12px; color:var(--fg3); padding:20px 0; border-top:1px solid rgba(0,0,0,0.07); border-bottom:1px solid rgba(0,0,0,0.07); }
.article-meta .author { display:flex; align-items:center; gap:10px; }
.article-meta .author-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--neon-pale),var(--neon)); display:flex; align-items:center; justify-content:center; font-family:var(--head); font-weight:700; font-size:13px; color:var(--fg); flex-shrink:0; }

/* TOC */
.toc { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:24px 28px; margin:40px 0; }
.toc h4 { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--fg3); margin-bottom:16px; }
.toc ol { padding-left:20px; display:flex; flex-direction:column; gap:8px; }
.toc ol li a { font-family:var(--head); font-size:15px; color:var(--fg2); font-weight:500; text-decoration:none; }
.toc ol li a:hover { color:var(--neon-dim); }

/* ARTICLE BODY */
.article-body { padding:48px 0 80px; }
.article-content h2 { font-size:clamp(22px,3vw,32px); margin:48px 0 18px; padding-top:8px; }
.article-content h3 { font-size:clamp(18px,2.5vw,24px); margin:32px 0 14px; color:var(--fg2); }
.article-content p { margin-bottom:20px; }
.article-content ul, .article-content ol { margin:0 0 24px 24px; display:flex; flex-direction:column; gap:10px; }
.article-content li { font-size:16px; color:var(--fg2); }
.article-content strong { color:var(--fg); font-weight:600; }
.article-content code { font-family:var(--mono); font-size:13px; background:var(--bg2); border:1px solid rgba(0,0,0,0.08); padding:2px 7px; border-radius:4px; color:var(--neon-dim); }
.article-content pre { background:var(--fg); color:white; border-radius:12px; padding:24px; margin:24px 0; overflow-x:auto; font-family:var(--mono); font-size:13px; line-height:1.7; }
.article-content pre code { background:none; border:none; padding:0; color:var(--neon); }
.article-content blockquote { border-left:3px solid var(--neon); padding:16px 24px; background:var(--neon-pale); border-radius:0 12px 12px 0; margin:28px 0; font-style:italic; color:var(--fg2); }
.article-content .tip { background:white; border:1px solid var(--border); border-radius:12px; padding:20px 24px; margin:28px 0; }
.article-content .tip::before { content:'💡 '; }
.article-content .tip-title { font-family:var(--head); font-weight:600; margin-bottom:8px; }
.article-content table { width:100%; border-collapse:collapse; margin:28px 0; font-size:15px; }
.article-content th { background:var(--fg); color:white; padding:12px 16px; text-align:left; font-family:var(--head); font-size:13px; }
.article-content td { padding:12px 16px; border-bottom:1px solid rgba(0,0,0,0.06); color:var(--fg2); }
.article-content tr:hover td { background:var(--bg2); }

/* FAQ */
.faq-section { margin:60px 0; }
.faq-section h2 { font-size:clamp(22px,3vw,34px); margin-bottom:32px; }
.faq-item { border-bottom:1px solid rgba(0,0,0,0.07); padding:20px 0; }
.faq-question { font-family:var(--head); font-weight:600; font-size:17px; margin-bottom:12px; display:flex; gap:12px; }
.faq-question::before { content:'Q'; font-family:var(--mono); font-size:11px; background:var(--neon-pale); color:var(--neon-dim); padding:3px 8px; border-radius:4px; flex-shrink:0; margin-top:3px; }
.faq-answer { font-size:15px; color:var(--fg2); line-height:1.7; padding-left:32px; }

/* AUTHOR BIO */
.author-bio { background:white; border:1px solid rgba(0,0,0,0.07); border-radius:16px; padding:28px 32px; margin:48px 0; display:flex; gap:24px; align-items:flex-start; }
.author-bio .bio-avatar { width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg,var(--neon-pale),var(--neon)); display:flex; align-items:center; justify-content:center; font-family:var(--head); font-weight:700; font-size:20px; color:var(--fg); flex-shrink:0; }
.author-bio .bio-name { font-family:var(--head); font-weight:700; font-size:18px; margin-bottom:4px; }
.author-bio .bio-title { font-family:var(--mono); font-size:11px; color:var(--neon-dim); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px; }
.author-bio .bio-text { font-size:14px; color:var(--fg2); line-height:1.6; }

/* CTA BLOCK */
.cta-block { background:var(--fg); color:white; border-radius:20px; padding:48px 48px; margin:60px 0; text-align:center; }
.cta-block h3 { font-size:clamp(22px,3vw,36px); color:white; margin-bottom:16px; }
.cta-block p { color:rgba(255,255,255,0.65); margin-bottom:32px; font-size:16px; max-width:500px; margin-left:auto; margin-right:auto; }
.cta-block .btn-primary { font-size:16px; padding:16px 36px; }

/* RELATED */
.related-articles { padding:60px 0 80px; border-top:1px solid rgba(0,0,0,0.07); }
.related-articles h3 { font-size:24px; margin-bottom:32px; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

/* BLOG HERO */
.blog-hero { padding:100px 0 64px; }
.blog-hero h1 { font-size:clamp(36px,5vw,64px); margin-bottom:20px; }
.blog-hero p { font-size:18px; color:var(--fg2); max-width:560px; }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:60px 0; }
.blog-grid .featured { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:0; }
.blog-grid .featured .card-body { padding:40px; }
.blog-grid .featured h2 { font-size:28px; }

/* FOOTER */
footer.site-footer { padding:32px 0; border-top:1px solid rgba(0,0,0,0.07); }
footer.site-footer .footer-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
footer.site-footer span { font-family:var(--mono); font-size:12px; color:var(--fg3); }

/* RESPONSIVE */
@media (max-width:768px) {
  .container, .container-narrow { padding:0 20px; }
  .blog-hero { padding:70px 0 48px; }
  .blog-grid { grid-template-columns:1fr; }
  .blog-grid .featured { grid-column:auto; grid-template-columns:1fr; }
  .article-hero { padding:60px 0 32px; }
  .article-hero h1 { font-size:28px; }
  .related-grid { grid-template-columns:1fr; }
  .cta-block { padding:32px 24px; }
  .author-bio { flex-direction:column; }
  .nav-links .hide-mobile { display:none; }
  .toc { padding:18px 20px; }
}