:root{
  --primary-color: #d90aba;
  --secondary-color: #101010;
  --third-color: #202020;
  --text-main: #ffffff;
  --text-muted: #b1b1b5;
}
body{
  background: var(--secondary-color);
  font-family: 'Poppins', sans-serif;
  color: var(--text-main);
}
#tools-section{
  max-width:1200px;
  margin:0 auto;
  padding:120px 20px 40px;
}
#tools-section h1{
  text-align:center;
  font-size:clamp(2rem,5vw,3rem);
  margin-bottom:1rem;
}
.tools-header{
  text-align:center;
  max-width:820px;
  margin:0 auto 2.5rem;
}
.tools-lede{
  color:var(--text-muted);
  font-size:1rem;
  line-height:1.6;
  margin:0.75rem auto 1.25rem;
}
.tools-highlights{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.75rem;
}
.tools-highlights span{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:var(--text-main);
  padding:0.45rem 0.75rem;
  border-radius:999px;
  font-size:0.85rem;
  letter-spacing:0.01em;
}
.tools-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin:0 auto 2rem;
  max-width:680px;
}
#tools-search,
#tools-tag-filter{
  background:var(--third-color);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:0.75rem;
  color:var(--text-main);
  font-size:1rem;
  padding:0.75rem 1rem;
  min-width:220px;
}
#tools-search::placeholder{
  color:var(--text-muted);
}
#tools-tag-filter{
  cursor:pointer;
}
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.tools-grid{
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
  justify-content:center;
}
.tool-card{
  background:var(--third-color);
  border-radius:1rem;
  overflow:hidden;
  width:300px;
  text-decoration:none;
  color:inherit;
  transition:transform .2s;
  display:flex;
  flex-direction:column;
}
.tool-card:hover{transform:translateY(-5px);}
.tool-card img{
  width:100%;
  height:180px;
  object-fit:cover;
}
.tool-body{
  padding:1rem;
  flex:1;
  display:flex;
  flex-direction:column;
}
.tool-tags{
  display:flex;
  flex-wrap:wrap;
  gap:0.4rem;
  margin-bottom:0.5rem;
}
.tool-tag{
  display:inline-block;
  background:var(--primary-color);
  color:#fff;
  padding:0.2rem 0.6rem;
  border-radius:0.5rem;
  font-size:0.75rem;
  margin:0;
}
.tool-badge{
  display:inline-block;
  font-size:0.7rem;
  padding:0.2rem 0.6rem;
  border-radius:0.5rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.tool-badge-local{
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.35);
  color:var(--text-main);
}
.tool-body h3{
  margin:0 0 0.5rem;
  font-size:1.25rem;
}
.tool-body p{
  font-size:0.9rem;
  color:var(--text-muted);
  flex:1;
}
@media(max-width:600px){
  .tool-card{width:100%;}
}