.text-center { text-align: center; }

.screenshots-hero { padding-bottom: 4rem; }
.screenshots-hero .hero-tagline { margin: 2rem auto 0; }
.screenshots-main { padding-bottom: 8rem; }

.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.screenshot-card {
  appearance: none;
  width: 100%;
  padding: 0;
  overflow: hidden;
  text-align: left;
  color: var(--text-main);
  background: var(--bg-card-outer);
  border: 1px solid var(--hairline);
  border-radius: 1.25rem;
  cursor: zoom-in;
  transition: transform 0.4s var(--ease-fluid), border-color 0.4s ease, box-shadow 0.4s ease;
}

.screenshot-card:hover {
  transform: translateY(-6px);
  border-color: rgba(98, 230, 247, 0.45);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.screenshot-card:focus-visible { outline: 2px solid var(--accent-slate); outline-offset: 4px; }
.screenshot-card-featured { grid-column: 1 / -1; }
.screenshot-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #020b12; }
.screenshot-card > span { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.35rem 1.5rem 1.5rem; }
.screenshot-card strong { font-size: 1.05rem; }
.screenshot-card small { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }

.screenshot-lightbox {
  width: min(92vw, 1500px);
  max-width: none;
  padding: 0;
  overflow: visible;
  color: var(--text-main);
  background: #080d12;
  border: 1px solid var(--hairline);
  border-radius: 1rem;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7);
}

.screenshot-lightbox::backdrop { background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(10px); }
.screenshot-lightbox figure { margin: 0; }
.screenshot-lightbox img { display: block; width: 100%; max-height: 82vh; object-fit: contain; border-radius: 1rem 1rem 0 0; }
.screenshot-lightbox figcaption { padding: 1rem 1.25rem; color: var(--text-muted); }
.lightbox-close { position: absolute; top: -1rem; right: -1rem; z-index: 2; width: 2.75rem; height: 2.75rem; border: 1px solid var(--hairline); border-radius: 50%; color: var(--text-main); background: #111820; font-size: 1.75rem; line-height: 1; cursor: pointer; }

@media (max-width: 768px) {
  .screenshots-main { padding-bottom: 5rem; }
  .screenshot-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .screenshot-card-featured { grid-column: auto; }
  .lightbox-close { top: 0.75rem; right: 0.75rem; }
}