.blog-main{padding:72px 0 100px}
.blog-hero{padding:74px 0 46px;border-bottom:1px solid var(--line)}
.blog-hero h1{font-size:clamp(2.8rem,7vw,6rem);line-height:.95;letter-spacing:-.06em;margin:8px 0 22px;max-width:950px}
.blog-hero .gradient-text{background:linear-gradient(90deg,#fff 12%,var(--accent) 62%,var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.blog-hero p{max-width:820px;color:var(--muted);font-size:1.08rem}
.blog-toolbar{display:grid;grid-template-columns:1fr auto auto;gap:12px;margin:34px 0 28px}
.search-box,.filter-select{border:1px solid var(--line);background:rgba(255,255,255,.035);color:#fff;border-radius:16px;padding:14px 16px;outline:none}
.search-box:focus,.filter-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(67,230,215,.1)}
.filter-select option{background:#08111f;color:#fff}
.blog-section-title{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:760;margin:36px 0 14px}
.article-list{display:grid;gap:15px}
.article-card{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;text-decoration:none;background:linear-gradient(145deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:22px;padding:25px 28px;transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease}
.article-card:hover{transform:translateY(-4px);border-color:rgba(67,230,215,.48);background:linear-gradient(145deg,rgba(67,230,215,.08),rgba(90,167,255,.045));box-shadow:0 18px 55px rgba(0,0,0,.22)}
.article-card h2,.article-card h3{margin:5px 0 8px;font-size:clamp(1.25rem,2vw,1.65rem);letter-spacing:-.025em}
.article-card p{margin:0;color:var(--muted);max-width:900px}
.article-card-meta{display:flex;gap:9px;flex-wrap:wrap;color:#9ab0c8;font-size:.8rem;margin-bottom:4px}
.article-card-arrow{font-size:1.6rem;color:var(--accent)}
.article-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.article-tags span{font-size:.72rem;border:1px solid rgba(90,167,255,.24);border-radius:999px;padding:5px 9px;color:#b9cbe0;background:rgba(90,167,255,.045)}
.featured-card{border-color:rgba(67,230,215,.26);padding:31px}
.empty-state{display:none;color:var(--muted);padding:26px;border:1px dashed var(--line);border-radius:18px}
@media(max-width:780px){.blog-toolbar{grid-template-columns:1fr}.article-card{grid-template-columns:1fr}.article-card-arrow{display:none}}