/* Landing page: tool cards. Theme comes from synthwave.css */
.tool-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.tool-card {
  --accent: var(--pink);
  display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px;
  color: var(--text); text-decoration: none;
  background: var(--surface); border: 2px solid var(--accent); border-radius: 12px;
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent);
  transition: transform .15s, box-shadow .15s;
}
.tool-card:hover, .tool-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 0 28px var(--accent), inset 0 0 18px color-mix(in srgb, var(--accent) 25%, transparent);
}
.tool-icon { font-size: 2.2rem; line-height: 1; }
.tool-name { font-size: 1.25rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hi); text-shadow: 0 0 8px var(--accent); }
.tool-desc { flex: 1; color: var(--text); opacity: .85; }
.tool-tag { align-self: flex-start; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 2px 10px; }

/* The first four tools share the synthwave look; alternate neon colours across the grid */
.tool-grid li:nth-child(2n) .tool-card { --accent: var(--cyan); }
.tool-grid li:nth-child(3n) .tool-card { --accent: var(--yellow); }

/* These two keep their own visual identity, so their cards hint at it */
.tool-card--sticks { --accent: #c1440e !important; background: #f3ecdd; color: #2c2420; }
.tool-card--sticks .tool-name { color: #2c2420; text-shadow: none; }
.tool-card--sticks .tool-desc { color: #544539; opacity: 1; }
.tool-card--escape { --accent: #00ff00 !important; background: #000; font-family: "Courier New", Courier, monospace; }
.tool-card--escape .tool-name { color: #00ff00; }
.tool-card--escape .tool-desc { color: #00ff00; }