.article-hero{background:var(--section-alt);padding:100px 0 50px;text-align:center}
.article-hero h1{font-size:clamp(1.5rem,3vw,2.2rem);max-width:800px;margin:0 auto .8rem}
.article-meta{font-size:.88rem;color:#777}
.article-meta a{color:var(--primary)}
.article-content{max-width:780px;margin:0 auto;padding:50px 20px}
.article-content p{margin-bottom:1.2rem;font-size:1.02rem;line-height:1.8;color:#333}
.article-content h2{font-size:1.45rem;margin:2rem 0 .8rem;color:var(--heading)}
.article-content h3{font-size:1.2rem;margin:1.6rem 0 .6rem;color:var(--heading)}
.article-content a{color:var(--primary);font-weight:500}
.article-content ul,.article-content ol{margin:1rem 0 1.2rem 1.5rem}
.article-content li{margin-bottom:.5rem;line-height:1.7}
.article-cta{background:var(--highlight);border-left:4px solid var(--primary);padding:24px 28px;border-radius:0 var(--radius) var(--radius) 0;margin:2rem 0}
.article-cta p{margin-bottom:.8rem;font-weight:600;color:var(--heading)}
.article-cta a{color:var(--primary);font-weight:700}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px;margin-top:2rem}
.blog-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:transform .3s}
.blog-card:hover{transform:translateY(-4px)}
.blog-card-body{padding:24px}
.blog-card-body h2{font-size:1.1rem;margin-bottom:.5rem}
.blog-card-body h2 a{color:var(--heading);text-decoration:none}
.blog-card-body h2 a:hover{color:var(--primary)}
.blog-card-body p{font-size:.9rem;color:#666;line-height:1.5}
.blog-card-body .read-more{display:inline-block;margin-top:.8rem;color:var(--primary);font-weight:600;font-size:.9rem}
.blog-hero{background:var(--section-alt);padding:100px 0 50px;text-align:center}
.blog-hero h1{font-size:clamp(1.6rem,3vw,2.4rem)}
.blog-hero p{color:#555;max-width:600px;margin:.8rem auto 0}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:3rem;flex-wrap:wrap}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .2s}
.pagination a{background:var(--card);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.pagination a:hover{background:var(--primary);color:#fff}
.pagination span.current{background:var(--primary);color:#fff}