/* blog.css — dark cinematic */
.blog-hero{
  padding:80px 0 50px;
  background:radial-gradient(ellipse 900px 500px at 50% 0%, rgba(90,181,56,.15), transparent 65%);
}
.blog-hero h1{max-width:900px;color:#fff}
.blog-hero p{font-size:19px;color:#b5babf;max-width:720px;margin-top:18px}

.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;padding:40px 0 100px}
.blog-card{
  background:var(--glass-bg);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);overflow:hidden;
  transition:all .3s var(--ease);
  display:flex;flex-direction:column;color:inherit;
}
.blog-card:hover{transform:translateY(-6px);border-color:rgba(90,181,56,.4);box-shadow:0 24px 60px rgba(0,0,0,.4)}
.blog-card__body{padding:30px;display:flex;flex-direction:column;flex:1}
.blog-card__cat{
  font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--green);font-weight:700;margin-bottom:12px;
}
.blog-card h3{margin:0 0 12px;font-size:20px;line-height:1.3;color:#fff}
.blog-card p{font-size:14px;color:#9ea2a7;margin:0 0 20px;flex:1;line-height:1.6}
.blog-card__link{
  font-family:var(--font-mono);color:var(--green);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
}

/* Article layout */
.article{max-width:780px;margin:0 auto;padding:50px 20px 100px}
.article>h1{color:#fff;font-family:var(--font-display);font-weight:400;line-height:.98;margin-bottom:18px}
.article__header{padding:60px 0 32px;text-align:left}
.article__header h1{color:#fff;font-family:var(--font-display);font-weight:400;line-height:.98}
.article__cat{
  display:inline-block;background:rgba(90,181,56,.15);color:var(--green);
  padding:7px 16px;border-radius:999px;font-family:var(--font-mono);font-size:11px;
  font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:22px;
  border:1px solid rgba(90,181,56,.3);
}
.article__meta{
  color:#6a6e73;font-family:var(--font-mono);font-size:11px;margin-top:18px;
  display:flex;gap:18px;flex-wrap:wrap;text-transform:uppercase;letter-spacing:.08em;
}
.article__body{font-size:17px;line-height:1.8;color:#c3c7cc;font-family:var(--font-body)}
.article__body h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(28px,3.6vw,40px);margin-top:2em;margin-bottom:.5em;color:#fff;line-height:1.05;
}
.article__body h3{
  font-family:var(--font-body);font-weight:800;
  font-size:clamp(20px,2.4vw,26px);margin-top:1.8em;margin-bottom:.5em;color:#fff;
}
.article__body p{margin-bottom:1.2em;color:#c3c7cc}
.article__body strong{color:#fff}
.article__body ul,.article__body ol{margin-bottom:1.3em;color:#c3c7cc}
.article__body li{margin-bottom:.5em}
.article__body a{color:var(--green);border-bottom:1px solid rgba(90,181,56,.35)}
.article__body a:hover{color:#7ed55a;border-bottom-color:var(--green)}
.article__cta{
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:#fff;padding:42px;border-radius:var(--radius);margin:48px 0;text-align:center;
  box-shadow:0 24px 60px rgba(90,181,56,.25);
}
.article__cta h3{color:#fff;margin-top:0;font-family:var(--font-body);font-weight:800}
.article__cta p{color:rgba(255,255,255,.95);margin-bottom:22px}
.article__cta .btn{background:#fff;color:var(--green-dark)}
.article__cta .btn:hover{background:#0E0F11;color:#fff}
.article__related{border-top:1px solid rgba(255,255,255,.08);margin-top:70px;padding-top:44px}
.article__related h4{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#6a6e73;margin-bottom:20px;font-weight:700}
.article__related ul{list-style:none;padding:0}
.article__related li{margin-bottom:12px}
.article__related a{font-weight:700;color:#fff}
.article__related a:hover{color:var(--green)}

/* reading progress */
.reading-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--green);z-index:200;transition:width .1s;box-shadow:0 0 12px var(--green-glow)}