/* Homepage-only styles: the tool card grid. Shared look comes from
   tokens.css + base.css. */

.site-header {
  margin-bottom: var(--space-6);
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-4);
}

/* Each card is a whole-card link. */
.tool-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s, transform 0.12s;
}

.tool-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  color: inherit;
}

.tool-card-title {
  margin: 0 0 var(--space-2);
  font-size: 1.15rem;
  color: var(--color-accent);
}

.tool-card-desc {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}