:root { color-scheme: light; }
html, body { height: 100%; }
img { max-width: 100%; height: auto; display: block; }

/* Premium polish */
.card {
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 1.25rem;
  box-shadow: 0 20px 50px rgba(2, 132, 199, 0.08), 0 8px 24px rgba(0,0,0,0.06);
}
.glass {
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.75);
}
.pill {
  border-radius: 9999px;
  border: 1px solid rgba(100,116,139,0.35);
  padding: 0.4rem 0.75rem;
  white-space: nowrap;
}
.pill--active {
  background: #0ea5e9;
  color: white;
  border-color: #0ea5e9;
}
.shadow-soft { box-shadow: 0 14px 44px rgba(2,132,199,.12); }

/* Stronger hero overlay for contrast */
.hero-overlay-pro{
  background:
    radial-gradient(1200px 600px at 18% 100%, rgba(2,132,199,0.28), rgba(2,132,199,0) 58%),
    linear-gradient(180deg, rgba(4,7,20,0.55), rgba(4,7,20,0.06) 40%, rgba(4,7,20,0.0)),
    linear-gradient(0deg, rgba(4,7,20,0.35), rgba(4,7,20,0.0) 60%);
}

/* Hide scrollbars on iOS/Android for the pill row */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Lightbox – use safe viewport height where supported */
.lightbox-img {
  max-height: 90vh;
  max-width: 95vw;
}
@supports (height: 100svh) {
  .lightbox-img { max-height: 90svh; }
}

/* Prevent tiny devices from oversized paddings */
@media (max-width: 360px) {
  .tight-pad { padding-left: .5rem; padding-right: .5rem; }
}