* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #0b1120;
  color: #f8fafc;
}
.container { width: min(1400px, 94%); margin: 0 auto; padding: 40px 0 60px; }
.hero { text-align: center; margin-bottom: 32px; }
.badge {
  display: inline-block; padding: 7px 12px; border: 1px solid #334155;
  border-radius: 999px; font-size: 12px; letter-spacing: .08em; color: #cbd5e1;
}
h1 { margin: 14px 0 8px; font-size: clamp(28px, 5vw, 48px); }
p { margin: 0; color: #94a3b8; }
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.image-card {
  display: block; overflow: hidden; border: 1px solid #1e293b; border-radius: 14px;
  background: #111827; color: inherit; text-decoration: none;
  transition: transform .18s ease, border-color .18s ease;
}
.image-card:hover { transform: translateY(-3px); border-color: #64748b; }
.image-card img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: #020617;
}
.image-card span {
  display: block; padding: 11px 12px; direction: ltr; text-align: left;
  font-size: 12px; color: #cbd5e1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}