:root{
  --red:#cc0000;
  --black:#000;
  --white:#ffffff;
}
*{box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;margin:0;background:#111;color:#eee}
.header{background:var(--black);color:var(--white);padding:18px 20px;display:flex;align-items:center;gap:20px}
.logo{height:64px}
.site-title{font-size:20px;font-weight:700;letter-spacing:1px}
nav{background:var(--red);padding:10px;text-align:center}
nav a{color:#fff;margin:0 12px;text-decoration:none;font-weight:600}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.hero{background:linear-gradient(90deg,rgba(0,0,0,0.6),rgba(0,0,0,0.2));padding:30px;border-radius:8px;display:flex;align-items:center;gap:20px}
.hero h1{margin:0;font-size:28px;color:var(--red)}
.hero p{margin:4px 0 0; color:#ddd}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:16px}
.card{background:#222;padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.03)}
.card img{width:100%;height:160px;object-fit:cover;border-radius:6px;display:block}
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filter-btn{background:transparent;border:1px solid rgba(255,255,255,0.08);color:#fff;padding:8px 12px;border-radius:6px;cursor:pointer}
.filter-btn.active{background:var(--red);border-color:var(--red)}
.hidden{display:none !important}
.footer{background:#0b0b0b;color:#ccc;padding:18px;text-align:center;margin-top:30px}

/* hammer animation */
.tools{margin-left:auto;display:flex;gap:10px;align-items:center}
.tool{width:28px;height:28px;display:inline-block;opacity:0.95}
@keyframes swing {
  0%{transform:rotate(-15deg)}
  50%{transform:rotate(10deg)}
  100%{transform:rotate(-15deg)}
}
.tool.hammer{animation:swing 1.2s ease-in-out infinite}

/* responsive tweaks */
@media(max-width:560px){
  .hero{flex-direction:column;text-align:center}
  .tools{margin-left:0}
  .logo{height:54px}
}