.categories{display:flex;gap:8px;margin-bottom:40px;flex-wrap:wrap}
.cat-btn{padding:8px 20px;border:1px solid var(--border);border-radius:100px;font-size:13px;font-weight:510;cursor:pointer;transition:all .2s;background:var(--surface)}
.cat-btn.active{background:var(--accent);color:var(--surface);border-color:var(--accent)}
.cat-btn:hover:not(.active){border-color:var(--muted)}

.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.article-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);transition:box-shadow .3s,transform .2s}
.article-card:hover{box-shadow:0 4px 20px oklch(0% 0 0 / 0.06);transform:translateY(-2px)}
html.dark .article-card:hover{box-shadow:0 4px 20px oklch(100% 0 0 / 0.08)}
.article-image{height:180px;background:var(--bg);overflow:hidden}
.article-image img{width:100%;height:100%;object-fit:cover}
.article-body{padding:24px}
.article-cat{font-size:11px;font-weight:510;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.article-body h3{font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-0.01em;line-height:1.3;margin-bottom:8px}
.article-body p{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:16px}
.article-meta{font-size:12px;color:var(--muted);display:flex;gap:16px}
.article-meta span{display:flex;align-items:center;gap:4px}

.guide-card{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:48px;margin-top:48px}
.guide-card h3{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-0.01em;margin-bottom:12px}
.guide-card p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:20px}
.guide-card .guide-img{border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:16/9}
.guide-card .guide-img img{width:100%;height:100%;object-fit:cover}

.btn-primary{padding:12px 24px;font-size:14px;gap:6px}

@media(max-width:820px){
  .article-grid{grid-template-columns:1fr}
  .guide-card{grid-template-columns:1fr;gap:24px}
}

@media(max-width:480px){
  .guide-card{padding:24px}
}