.floating-vials {
  position: absolute;
  inset: 0;
  isolation: isolate;
}
.floating-vials::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 11%;
  width: 70%;
  height: 15%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(56,185,231,.16);
  filter: blur(38px);
}
.float-vial {
  position: absolute;
  margin: 0;
  animation: vial-float 18s ease-in-out infinite alternate;
  will-change: transform;
}
.float-vial img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 14px rgba(0,0,0,.3));
  -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 87%,rgba(0,0,0,.82) 93%,transparent 100%);
  mask-image: linear-gradient(to bottom,#000 0%,#000 87%,rgba(0,0,0,.82) 93%,transparent 100%);
}
.vial-back { z-index: 1; width: 105px; height: 165px; opacity: .42; filter: blur(1.2px); }
.vial-mid { z-index: 3; width: 142px; height: 222px; opacity: .8; }
.vial-front { z-index: 5; width: 205px; height: 320px; }
.vial-one { left: 7%; top: 14%; transform: rotate(-9deg); animation-delay: -7s; animation-duration: 21s; }
.vial-two { right: 7%; top: 9%; transform: rotate(8deg); animation-delay: -13s; animation-duration: 24s; }
.vial-three { left: 17%; bottom: 7%; transform: rotate(-5deg); animation-delay: -4s; animation-duration: 20s; }
.vial-four { left: 50%; top: 46%; transform: translate(-50%,-50%) rotate(2deg); animation-name: vial-float-center; animation-duration: 22s; }
.vial-five { right: 15%; bottom: 6%; transform: rotate(5deg); animation-delay: -11s; animation-duration: 19s; }
@keyframes vial-float {
  0% { translate: 0 -7px; }
  50% { translate: 5px 5px; }
  100% { translate: -4px 11px; }
}
@keyframes vial-float-center {
  0% { transform: translate(-50%,calc(-50% - 8px)) rotate(1deg); }
  50% { transform: translate(calc(-50% + 5px),calc(-50% + 4px)) rotate(2deg); }
  100% { transform: translate(calc(-50% - 4px),calc(-50% + 10px)) rotate(0deg); }
}
@media(max-width:580px){
  .vial-back{width:72px;height:112px}.vial-mid{width:96px;height:150px}.vial-front{width:142px;height:222px}
  .vial-one{left:5%;top:16%}.vial-two{right:4%;top:12%}.vial-three{left:12%;bottom:9%}.vial-five{right:9%;bottom:7%}
}
@media(prefers-reduced-motion:reduce){.float-vial{animation:none}}

/* Compacte homepage-intro: de primaire keuzes blijven direct in beeld. */
.hero {
  min-height: 540px;
}
.hero-copy {
  padding-top: 58px;
  padding-bottom: 48px;
}
.hero h1 {
  font-size: clamp(44px,4.8vw,68px);
  line-height: .97;
}
.hero-copy .eyebrow {
  margin-bottom: 17px;
}
.hero-copy .intro {
  max-width: 560px;
  margin: 20px 0 24px;
  font-size: 16px;
  line-height: 1.55;
}
.hero-proof {
  margin-top: 34px;
}
.hero-visual {
  min-height: 540px;
}

@media(max-width:900px){
  .hero-copy{padding:52px 7vw 46px}
  .hero-visual{min-height:380px}
}

@media(max-width:580px){
  .hero-copy{padding:38px 22px 36px}
  .hero h1{font-size:clamp(38px,11.5vw,46px)}
  .hero-copy .eyebrow{margin-bottom:14px}
  .hero-copy .intro{font-size:15px;margin:17px 0 22px}
  .hero-actions{gap:18px}
  .hero-actions .button{padding:13px 15px;gap:16px}
  .hero-proof{margin-top:28px}
  .hero-visual{min-height:320px}
}