.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 24px; }
.tool-card { background: var(--panel); border: 1px solid var(--border-light); border-radius: 14px; padding: 22px; text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 12px; transition: border-color 0.18s, background 0.18s, transform 0.14s; }
.tool-card:hover { border-color: var(--accent2); background: var(--card-hover); transform: translateY(-2px); }
.tool-card-header { display: flex; align-items: center; gap: 12px; }
.tool-logo { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 0.9rem; flex-shrink: 0; color: #fff; }
.tool-logo.blue { background: linear-gradient(135deg, #0284c7, #0369a1); }
.tool-logo.purple { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.tool-card h2 { font-size: 1rem; font-weight: 700; line-height: 1.2; }
.tool-card p { font-size: 0.84rem; color: var(--muted); line-height: 1.55; flex: 1; }
.tool-card-cta { font-size: 0.78rem; font-weight: 600; color: var(--accent2); margin-top: auto; }
.tool-card.blue-cta .tool-card-cta { color: var(--accent); }
.hub-header .logo { background: linear-gradient(135deg, #0f172a, #1e293b); border: 1px solid var(--border-light); font-size: 0.7rem; }
.tools-heading { margin-top: 0; }
.tools-footer-link { color: var(--accent); text-decoration: none; }
.tools-footer-link:hover { text-decoration: underline; }
@media (max-width: 640px) { .tools-grid { grid-template-columns: 1fr; } }