/* Simple, clean gallery styling */
:root{
  --bg:#0b0b0c;
  --card:#141416;
  --text:#f5f5f7;
  --muted:#b3b3b3;
  --accent:#9ae6b4;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.title{font-size:clamp(20px,3vw,28px);letter-spacing:.4px;font-weight:700}
.grid{
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:18px;
}
@media (min-width:640px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1024px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.card{
  background:linear-gradient(180deg,#18181b, #121214);
  border:1px solid #222326;
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  border-color:#2c2d31;
}
.card img{
  width:100%;height:220px;object-fit:cover;display:block;filter:saturate(1.02) contrast(1.05);
}
.card-body{padding:14px 16px 16px}
.card-title{font-weight:700;font-size:18px;margin:0 0 6px 0}
.card-meta{color:var(--muted);font-size:13px;margin:0}
.footer{margin-top:28px;color:var(--muted);font-size:13px;opacity:.9}
.badge{font-size:12px;padding:4px 8px;border-radius:999px;background:#1f2937;border:1px solid #2f3642}
.btn{color:#fff; 
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:12px;border:1px solid #273041;background:#171a1f;
  font-size:14px;cursor:pointer;
}
.btn:hover{border-color:#344052}
.brand{display:flex;align-items:center;gap:10px}
.brand-dot{width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 4px rgba(154,230,180,.18)}
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.8);
  display:none;align-items:center;justify-content:center;padding:24px;z-index:50;
}
.modal.open{display:flex}
.modal-content{max-width:min(95vw,1100px);max-height:85vh;background:#0f1114;border:1px solid #2a2f39;border-radius:16px;overflow:hidden}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #1f2430}
.modal-title{font-size:14px;color:var(--muted)}
.modal-body{padding:0}
.modal-body img{display:block;max-height:78vh;max-width:100%;width:auto;height:auto;object-fit:contain;margin:0 auto}
.close{cursor:pointer;border:0;background:transparent;font-size:22px;color:#cfcfcf;padding:6px 10px}

/* Button hover + pop animation update */

.btn{
  color:#fff;
  transition: transform .15s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.btn:hover{
  transform: translateY(-1px) scale(1.03);
  background:#1d2430;
  border-color:#3a475a;
  box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 3px rgba(154,230,180,.18);
}
.btn:active{
  transform: translateY(0) scale(0.98);
  box-shadow:none;
}


/* Extra spacing below description before button */

.card-body .btn{
  margin-top:10px;
}