/* IntraMate — gedeelde stijlen */

html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}

.display{letter-spacing:-0.045em;line-height:.95;font-weight:800}
.rot{display:inline-block;min-width:1ch}
.rule{border-top:1px solid rgba(0,0,0,.1)}
.line-mask{overflow:hidden;display:inline-block;vertical-align:top;padding-bottom:.08em}

/* interactie */
.lift{transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease}
.lift:hover{transform:translateY(-6px);box-shadow:0 24px 60px -24px rgba(0,0,0,.28)}
.btn{transition:transform .3s cubic-bezier(.2,.7,.3,1), background-color .3s ease, border-color .3s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97)}
.navlink{position:relative}
.navlink::after{content:'';position:absolute;left:0;bottom:-4px;height:2px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.navlink:hover::after{transform:scaleX(1);transform-origin:left}
.navlink[aria-current="page"]{font-weight:600}

/* accenten */
.dot-pulse{position:relative}
.dot-pulse::after{content:'';position:absolute;inset:0;border-radius:9999px;background:currentColor;
  animation:pulse 2.4s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes pulse{0%{opacity:.55;transform:scale(1)}70%,100%{opacity:0;transform:scale(3.2)}}

.shot{display:block}
.shot-wrap:hover .shot{transform:none}

.cake{display:inline-block;transform-origin:70% 90%}
.cake.pop{animation:cake .7s cubic-bezier(.2,.7,.3,1)}
@keyframes cake{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.25) rotate(-8deg)}
  60%{transform:scale(.95) rotate(6deg)}100%{transform:scale(1) rotate(0)}}

.float-a,.float-b,.float-c,.float-p{animation:float 7s ease-in-out infinite}
.float-b{animation-duration:8.5s;animation-delay:-2s}
.float-c{animation-duration:9.5s;animation-delay:-4s}
.float-p{animation-duration:8s;animation-delay:-1s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* navbar — in gewone CSS zodat de ingeladen header niet van de Tailwind-CDN afhangt */
#navbar{
  max-width:1160px; margin:0 auto; height:74px;
  padding:0 20px; border-radius:16px;
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
@media (min-width:768px){ #navbar{padding:0 24px} }
#navbar nav{display:none}
@media (min-width:1024px){
  #navbar nav{display:flex; align-items:center; gap:24px; font-size:16px}
}
@media (min-width:1200px){
  #navbar nav{gap:28px; font-size:17px}
}
#navbar nav a{white-space:nowrap}
#mobielmenu{
  max-width:1160px; margin:8px auto 0; border-radius:16px;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,.06); overflow:hidden;
}
#mobielmenu.hidden{display:none}

/* hamburger */
.burger-l{transition:transform .35s cubic-bezier(.2,.7,.3,1), opacity .2s ease}
#burger.open .burger-l:nth-child(1){transform:translateY(7px) rotate(45deg)}
#burger.open .burger-l:nth-child(2){opacity:0}
#burger.open .burger-l:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* stapelende kaarten (sticky stack) */
.stack{display:grid; gap:16px}
.stack > .stack-card{position:sticky; will-change:transform}
.stack > .stack-card:nth-child(1){top:110px}
.stack > .stack-card:nth-child(2){top:126px}
.stack > .stack-card:nth-child(3){top:142px}
.stack > .stack-card:nth-child(4){top:158px}
.stack > .stack-card:nth-child(5){top:174px}
.stack > .stack-card:nth-child(6){top:190px}
@media (max-width:767px){
  .stack > .stack-card{position:static !important; top:auto !important; transform:none !important}
}

/* artikeltekst */
.artikel-body{font-size:19px; line-height:1.72; color:rgba(0,0,0,.72)}
.artikel-body .lead{font-size:23px; line-height:1.5; color:#0B0B0B; font-weight:500; margin-bottom:32px}
.artikel-body p{margin:0 0 22px}
.artikel-body h3{font-size:26px; line-height:1.25; letter-spacing:-.02em; font-weight:700;
  color:#0B0B0B; margin:44px 0 14px}
.artikel-body strong{color:#0B0B0B; font-weight:600}
.artikel-body em{color:#00637F; font-style:normal; font-weight:600}
.artikel-body > p:last-child{margin-bottom:0}

/* faq */
.faq-item summary{list-style:none;cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .chev{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.faq-item[open] .chev{transform:rotate(180deg)}
.faq-item[open]{background:rgba(0,0,0,.02)}

#confetti{position:fixed;inset:0;pointer-events:none;z-index:60}
#progress{position:fixed;top:0;left:0;height:3px;width:100%;background:#0A87AB;
  transform:scaleX(0);transform-origin:0 50%;z-index:60}

@media (prefers-reduced-motion: reduce){
  *,*::after{animation:none!important;transition:none!important}
}