.hero { display: grid; gap: 10px; padding-top: 8px; }
.tool-content .hero h1 { margin: 0; font-size: clamp(30px, 6vw, 52px); line-height: 1.15; display: flex; flex-wrap: wrap; align-items: center; gap: .25em; }
.chip { display: inline-block; border-radius: .22em; padding: .08em .32em .12em; background: var(--accent); color: var(--accent-ink); font-size: .82em; line-height: 1; }
.lead { margin: 0; color: var(--muted); }
.privacy {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; max-width: fit-content; font-weight: 700; border-radius: 12px; padding: 10px 14px;
  background: color-mix(in srgb, var(--ok) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--line));
}
.privacy svg { flex: none; color: var(--ok); margin-top: 3px; }
.search-bar { display: block; width: 100%; margin: 24px 0 8px; font-size: 16px; padding: 12px 16px !important; border-radius: 12px !important; }
.cat h2 { font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 24px 0 10px; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.tool-card {
  display: block; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px 16px 22px;
  color: var(--ink); text-decoration: none; overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tool-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--cat, var(--accent)); }
.tool-card:hover { border-color: var(--cat, var(--accent)); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.tool-card h3 { margin: 0 0 4px; font-size: 16px; font-weight: 900; display: flex; align-items: center; gap: 8px; }
.tool-card p { margin: 0; font-size: 13px; color: var(--muted); }
.badge { font-family: var(--f-mono); font-size: 11px; font-weight: 700; color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 0 8px; }
.cat-image { --cat: var(--svg); }
.cat-text { --cat: var(--accent); }
.cat-dev { --cat: var(--ok); }
.cat-audio { --cat: var(--warn); }
.no-result { color: var(--muted); text-align: center; padding: 32px 0; }