.index-hero{background:#3592e2;color:#fff;padding:30px 10px;text-align:center;margin-bottom:20px}
.index-hero h1{font-size:24px;margin-bottom:8px}
.index-hero p{font-size:14px;opacity:.9}
.category-section{max-width:1000px;margin:0 auto 25px;padding:0 10px}
.category-section h2{font-size:18px;color:#333;margin-bottom:12px;padding-bottom:8px;border-bottom:3px solid #3592e2;display:inline-block}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.tool-card{background:#fff;border:1px solid #e8e8e8;border-radius:3px;padding:15px;transition:border-color .2s}
.tool-card:hover{border-color:#3592e2}
.tool-card a{display:block}
.tool-card .card-id{font-size:11px;color:#3592e2;font-weight:700;margin-bottom:4px}
.tool-card .card-title{font-size:14px;color:#333;font-weight:700;margin-bottom:4px}
.tool-card .card-desc{font-size:12px;color:#888;line-height:1.5}
.tool-card .card-tag{display:inline-block;font-size:10px;color:#fff;background:#3592e2;border-radius:2px;padding:1px 6px;margin-top:6px}
.tool-card .card-tag.orange{background:#F78015}
.tool-card .card-tag.green{background:#4caf50}
.tool-card .card-tag.purple{background:#7b1fa2}
.tool-card .card-tag.red{background:#e53935}
.tool-card .card-tag.teal{background:#00897b}
@media(max-width:768px){
  .tool-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
  .tool-card{padding:12px}
  .index-hero h1{font-size:20px}
}