:root{--brand-blue:#0B3A66;--brand-red:#C72942;--text:#1f2937;--muted:#4b5563;--border:#e5e7eb;--bg:#f5f7fa}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.65}
.wrap{max-width:920px;margin:0 auto;padding:24px 16px 60px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.logo{font-weight:900;font-size:28px;text-decoration:none}
.logo-blue{color:var(--brand-blue)}.logo-red{color:var(--brand-red)}
.nav a{color:var(--brand-blue);font-weight:700;text-decoration:none;margin-left:12px;font-size:14px}
.hero h1{margin:0 0 8px;color:var(--brand-blue);font-size:34px;line-height:1.15}
.hero p{margin:0 0 18px;color:var(--muted);font-size:17px}
.grid{display:grid;gap:14px}
.card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px 18px}
.card h2{margin:0 0 6px;font-size:20px}
.card h2 a{color:var(--brand-blue);text-decoration:none}
.card p{margin:0;color:var(--muted);font-size:15px}
.meta{font-size:13px;color:#6b7280;margin:0 0 10px}
.article{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px 20px}
.article h1{margin:0 0 8px;color:var(--brand-blue);font-size:30px;line-height:1.2}
.article h2{margin:22px 0 8px;color:var(--brand-blue);font-size:22px}
.article p,.article li{color:var(--text);font-size:16px}
.article a{color:var(--brand-blue);font-weight:700}
.cta{display:inline-block;margin-top:8px;background:var(--brand-blue);color:#fff !important;text-decoration:none;padding:10px 14px;border-radius:999px;font-weight:800}
.foot{margin-top:34px;padding-top:16px;border-top:1px solid var(--border);color:#6b7280;font-size:13px;text-align:center}
.foot a{color:var(--brand-blue);font-weight:700;text-decoration:none;margin:0 4px}
.tool-chip{display:inline-block;background:#EDF4FF;color:var(--brand-blue);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800;margin-bottom:8px}
@media(max-width:640px){.hero h1,.article h1{font-size:26px}}

.blog-hero{background:linear-gradient(135deg,#0B3A66 0%,#1e5a8a 55%,#C72942 140%);color:#fff;border-radius:18px;padding:28px 22px;margin-bottom:22px}
.blog-hero h1{margin:0 0 8px;font-size:34px;line-height:1.15;color:#fff}
.blog-hero p{margin:0;color:rgba(255,255,255,.9);font-size:17px;max-width:640px}
.blog-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.blog-stats span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700}
.blog-controls{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px;align-items:center}
.blog-controls input[type="search"]{
  flex:1;min-width:200px;border:1px solid var(--border);border-radius:12px;padding:12px 14px;font:inherit;background:#fff
}
.tool-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.tool-filters button{
  border:1px solid var(--border);background:#fff;color:var(--brand-blue);border-radius:999px;padding:8px 12px;
  font-weight:700;font-size:13px;cursor:pointer
}
.tool-filters button.is-active,.tool-filters button:hover{background:#EDF4FF;border-color:#93c5fd}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:28px 0 10px}
.section-head h2{margin:0;color:var(--brand-blue);font-size:22px}
.section-head a{font-size:13px;font-weight:700;color:var(--brand-blue);text-decoration:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.card{transition:transform .15s, box-shadow .15s}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(15,23,42,.08)}
.card .kind{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#6b7280;margin-bottom:6px}
.hidden-card{display:none !important}
.empty-state{display:none;background:#fff;border:1px dashed var(--border);border-radius:14px;padding:22px;text-align:center;color:var(--muted)}
.empty-state.show{display:block}