/* Aanvullende stijlen bovenop Tailwind (CDN) — gedeeld door alle pagina's. */

/* Originele site-achtergrond (vaste foto), met een donkere sluier voor leesbaarheid
   van tekst die niet binnen een "glass" kaart staat. De kaarten zelf zijn semi-
   transparant ("liquid glass"), de inhoud erin blijft volledig dekkend/leesbaar. */
html {
  background: #121212 url('../../images/site/supporters.png') no-repeat fixed center center;
  background-size: cover;
}

body {
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.55) 0%, rgba(10, 10, 12, 0.7) 100%);
  min-height: 100vh;
}

.glass-card {
  background: linear-gradient(145deg, rgba(40, 40, 48, 0.55), rgba(20, 20, 24, 0.55));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.glass-nav {
  background: rgba(18, 18, 18, 0.55);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hero-bg {
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.35) 0%, rgba(18, 18, 18, 0.9) 100%);
  backdrop-filter: blur(2px);
}

.hover-scale {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-scale:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -5px rgba(227, 6, 19, 0.3);
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.scroll-top.is-visible { display: inline-flex !important; }