/* Mobile-specific hero adjustments consolidated here */
@media (max-width: 640px) {
  .hero-mobile-spacer {
    display: block;
    height: 160px;
    width: 100%;
  }

  /* Mobile-only: align photo at the bottom and apply zoom (center horizontally, bottom vertically)
     If you prefer the photo nudged up instead, use: object-position: center 25% !important; */
  .hero-bg-img {
    object-fit: cover;
    object-position: center bottom !important;
    /* mobile: reduced zoom (40% smaller than 2x -> 1.2) */
  /* mobile: increased zoom (default) */
  transform: scale(1.3);
    transform-origin: 50% 100%;
    transition: transform 280ms ease;
    will-change: transform;
    width: 100%;
    height: 100%;
    display: block;
  }

  /* Keep the mobile-specific hero offset */
  .hero-mobile-offset {
    margin-top: calc(9.25rem - 5mm) !important;
  }
  /* helper classes to toggle zoom state on mobile */
  .hero-bg-img.zoom-100 { transform: scale(1) !important; }
  .hero-bg-img.zoom-120 { transform: scale(1.2) !important; }
}

@media (min-width: 641px) {
  .hero-mobile-spacer { display: none; }
  .hero-mobile-offset { margin-top: 0 !important; }
}

/* Default hero image behaviour for larger viewports - no zoom */
.hero-bg-img {
  object-fit: cover;
  object-position: center 35% !important;
  /* desktop: no zoom (only mobile is zoomed) */
  transform: none;
  transition: none;
  width: 100%;
  height: 100%;
  display: block;
}

/* If you are not using Tailwind CSS build tools, remove these lines. */

/* Je eigen custom CSS kan hieronder */
body {
  font-family: Inter, system-ui, Arial, sans-serif;
  background: #0B0B12;
  color: #fff;
  line-height: 1.6;
}
.text-gradient {
  background-image: linear-gradient(90deg, #818cf8, #d8b4fe);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.glow {
  box-shadow: 0 0 40px rgba(99,102,241,.35), 0 0 80px rgba(168,85,247,.25);
}
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 1.5rem;
}
.hp-wrap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Voeg een zwarte achtergrond toe aan de headerbalk */
.div.flex.h-16.items-center.justify-between {
  background-color: #000;
}
/* Alternatief voor Tailwind: als je geen custom selector wilt gebruiken, kun je een extra class toevoegen in de HTML, bijvoorbeeld 'headerbar', en dan .headerbar { background-color: #000; } gebruiken. */