.blog-header{position:sticky;top:0;z-index:80;background:var(--glass);backdrop-filter:blur(18px);border-bottom:1px solid var(--border-2)}
.blog-header .container{display:flex;align-items:center;gap:18px;height:64px}
.blog-nav{margin-left:auto;display:flex;gap:6px}
.blog-nav a{padding:9px 14px;border-radius:999px;font-weight:500;color:var(--text-2)}
.blog-nav a:hover{color:var(--c-primary);background:var(--surface-2)}
.blog-header .menu-toggle{display:none;margin-left:auto;font-size:1.3rem}
.blog-article{max-width:820px;padding-top:24px;padding-bottom:40px}
.blog-cat-pill{display:inline-block;background:var(--surface-2);color:var(--c-accent);font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;padding:5px 12px;border-radius:99px;margin-bottom:10px}
.blog-article h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-bottom:8px}
.blog-meta{color:var(--text-3);font-size:.85rem;margin-bottom:18px}
.toc{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);padding:18px 22px;margin:18px 0}
.toc b{display:block;margin-bottom:8px}
.toc ol{margin:0;padding-left:20px}.toc li{margin:4px 0}.toc a{color:var(--c-primary)}
.cta-box{background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-lg);padding:22px;margin:22px 0;text-align:center}
.cta-box b{font-size:1.1rem}.cta-box p{color:var(--text-2);margin:6px 0 14px}
.blog-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:8px}
.blog-tool{display:block;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);padding:14px;transition:.2s;box-shadow:var(--shadow-sm)}
.blog-tool:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--c-primary)}
.blog-tool b{display:block;color:var(--c-primary)}.blog-tool span{font-size:.84rem;color:var(--text-2)}
.rel-blogs{list-style:none;padding:0}.rel-blogs li{padding:10px 0;border-bottom:1px solid var(--border-2)}
.rel-blogs a{font-weight:600}.rel-blogs span{color:var(--text-3);font-size:.82rem}
.article details.faq-item{cursor:pointer}
.article details.faq-item summary{list-style:none}
.article details.faq-item summary::-webkit-details-marker{display:none}
.article details.faq-item summary::before{content:"+ ";color:var(--c-primary);font-weight:800}
.article details[open].faq-item summary::before{content:"– "}
.blog-footer{background:var(--c-dark);color:#cbd5e1;padding:40px 0 24px;margin-top:40px}
.blog-footer .container{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:flex-start}
.blog-footer .logo{color:#fff}.blog-footer p{font-size:.85rem;color:#94a3b8;max-width:280px}
.bf-links{display:flex;flex-direction:column;gap:6px}.bf-links a{color:#94a3b8;font-size:.86rem}.bf-links a:hover{color:#fff}
.bf-copy{width:100%;border-top:1px solid rgba(255,255,255,.08);padding-top:16px;margin-top:6px}
/* blog index */
.bi-hero{text-align:center;padding:40px 0 24px}
.bi-hero h1{font-size:clamp(2rem,5vw,3rem);font-weight:800}
.bi-search{max-width:520px;margin:18px auto 0}
.bi-search input{width:100%;padding:14px 18px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.95rem}
.bi-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:18px 0}
.bi-chip{font-size:.82rem;font-weight:600;padding:8px 15px;border-radius:99px;background:var(--surface);border:1px solid var(--border-2);color:var(--text-2);cursor:pointer}
.bi-chip.active{background:var(--grad-brand);color:#fff;border-color:transparent}
.bi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.bi-card{display:block;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:.25s}
.bi-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.bi-card .thumb{height:120px;background:var(--grad-soft);display:flex;align-items:flex-end;padding:14px;color:#fff;font-weight:700}
.bi-card .body{padding:16px}.bi-card .body span{font-size:.72rem;font-weight:700;text-transform:uppercase;color:var(--c-accent)}
.bi-card .body h3{font-size:1.05rem;font-weight:700;margin:6px 0}.bi-card .body p{font-size:.85rem;color:var(--text-2)}
.bi-more{display:block;margin:24px auto 0;}
@media(max-width:820px){.blog-nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--surface);flex-direction:column;padding:10px;box-shadow:var(--shadow)}.blog-nav.open{display:flex}.blog-header .menu-toggle{display:block}}