/* =========================================================
   PAGES.CSS — Composants
   Bento, empilement collant, verre dépoli, dégradés animés.
   ========================================================= */

@property --ang{ syntax:"<angle>"; inherits:false; initial-value:0deg }
@keyframes spin{ to{ --ang:360deg } }
@keyframes line-up{ from{ opacity:0; transform:translateY(38px) } to{ opacity:1; transform:none } }
@keyframes breathe{ to{ transform:translate(9vmax,7vmax) scale(1.2); opacity:.6 } }

/* --- Décalage en cascade (--i posé dans le HTML) -------- */
.rise{ --i:0 }

/* --- Pastille d'étiquette ------------------------------- */
.tag{ display:inline-flex; align-items:center; gap:.45rem;
  font-size:var(--t-label); font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  padding:.3rem .7rem; border-radius:8px;
  background:var(--green-bg); color:var(--green); margin-bottom:var(--s-3) }
.section--dark .tag,.pagehead .tag{ background:rgba(14,138,92,.20); color:#5FD6A0 }

/* --- Texte accentué (ex-dégradé, désormais monochrome) -- */
.grad{ color:var(--orange) }

/* --- Icône de tuile ------------------------------------- */
.tile__ico{ display:grid; place-items:center; width:48px; height:48px;
  border-radius:14px; margin-bottom:var(--s-3);
  background:var(--bg,rgba(0,194,255,.12)); color:var(--fg,var(--cyan-dark));
  transition:transform .5s var(--ease-spring) }
.tile__ico svg{ width:24px; height:24px }
.tile:hover .tile__ico{ transform:scale(1.1) rotate(-6deg) }
.tile--wide .tile__ico{ background:rgba(0,194,255,.16); color:var(--cyan) }

/* --- Corps de réponse FAQ, ouverture animée ------------- */
.faq__body{ display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .4s var(--ease-out) }
.faq__item[open] .faq__body{ grid-template-rows:1fr }
.faq__body > *{ overflow:hidden }

/* --- Utilitaires ---------------------------------------- */
.lede{ font-size:var(--t-lede); font-weight:400; line-height:1.6; color:var(--text);
  max-width:62ch; margin-block:var(--s-3) var(--s-5) }
.section--dark .lede{ color:#9FB4D4 }
.small{ font-size:var(--t-small); color:var(--slate) }
.section--dark .small{ color:#8399BB }
.center{ text-align:center }
.eyebrow,.secnum{ letter-spacing:.02em }
.secnum{ font-size:1.125rem; font-weight:700; color:var(--orange) }
.eyebrow{ display:inline-flex; align-items:center; gap:.6rem;
  font-size:var(--t-label); font-weight:600; text-transform:uppercase;
  color:var(--green); margin-bottom:var(--s-3) }
.eyebrow::before{ content:""; width:1.75rem; height:2px; background:var(--green) }
.link{ color:var(--green); font-weight:600;
  background-image:linear-gradient(var(--green),var(--green));
  background-size:0 2px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .35s var(--ease-out) }
.link:hover{ background-size:100% 2px }

/* =========================================================
   NAVIGATION — verre dépoli qui se densifie au défilement
   ========================================================= */
/* z-index 960 : le panneau du menu (.nav__links, imbriqué ici) doit
   passer AU-DESSUS de .nav__overlay (940), sinon le voile intercepte
   les taps sur les liens et le menu se ferme sans naviguer. */
.nav{ position:sticky; top:0; z-index:960;
  background:rgba(11,27,58,.55);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease-out), border-color .4s }
.nav.is-stuck{ background:rgba(11,27,58,.93); border-bottom-color:rgba(255,255,255,.09) }
.nav__inner{ display:flex; align-items:center; justify-content:space-between;
  min-height:var(--nav-h); gap:var(--s-3) }
.nav__logo{ display:flex; align-items:center; gap:.6rem; flex-shrink:0 }
.nav__logo svg{ transition:transform .6s var(--ease-spring) }
.nav__logo:hover svg{ transform:rotate(90deg) }
.nav__name{ font-weight:800; font-size:.9rem; color:#fff; line-height:1.15;
  max-width:9ch; letter-spacing:-.025em }
.nav__name b{ color:var(--cyan) }

.nav__burger{ width:48px; height:48px; display:grid; place-content:center; gap:5px }
.nav__burger span{ display:block; width:24px; height:2px; background:#fff; border-radius:2px;
  transition:transform .35s var(--ease-spring), opacity .2s }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* Panneau du menu mobile — fond OPAQUE, hauteur plein écran,
   fermeture explicite (croix + voile). Le flou n'est qu'un bonus. */
.nav__links{
  position:fixed;
  inset:0 0 0 auto;
  width:min(86vw,360px);
  height:100vh;             /* repli anciens navigateurs */
  height:100dvh;
  background:#0B1B3A;        /* OPAQUE — jamais de transparence ici */
  padding:var(--s-6) var(--s-4) var(--s-5);
  display:flex;
  flex-direction:column;
  gap:.25rem;
  overflow-y:auto;
  overscroll-behavior:contain;
  transform:translateX(100%);
  visibility:hidden;        /* fermé = aussi hors du parcours clavier */
  transition:transform .4s var(--ease-out), visibility 0s linear .4s;
  z-index:950;
  box-shadow:-16px 0 48px rgba(0,0,0,.5);
}
.nav__links.is-open{ transform:none; visibility:visible; transition-delay:0s }

/* Le flou est un bonus, jamais une dépendance */
@supports (backdrop-filter:blur(1px)){
  .nav__links{ background:rgba(11,27,58,.97);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px) }
}

.nav__close{
  align-self:flex-end;
  display:grid; place-items:center;
  width:44px; height:44px;
  margin-bottom:var(--s-4);
  border-radius:50%;
  background:rgba(255,255,255,.09);
  color:#fff;
  transition:background .3s, transform .3s var(--ease-spring);
}
.nav__close svg{ width:20px; height:20px }
.nav__close:hover{ background:rgba(255,255,255,.16); transform:rotate(90deg) }

.nav__overlay{
  position:fixed; inset:0;
  background:rgba(4,10,24,.72);
  z-index:940;
  opacity:0;
  transition:opacity .35s var(--ease-out);
}
.nav__overlay.is-open{ opacity:1 }
/* Le bouton WhatsApp flottant ne doit pas transparaître sous le voile */
.nav__overlay.is-open ~ .wa-float{ visibility:hidden }

.nav__links a{ color:#fff; font-weight:700; font-size:1.15rem; padding:.85rem 0;
  border-bottom:1px solid rgba(255,255,255,.08); letter-spacing:-.025em }
.nav__cta{ margin-top:var(--s-4); border-bottom:0 !important; text-align:center }

@media(min-width:1000px){
  .nav__burger{ display:none }
  .nav__close, .nav__overlay{ display:none }
  .nav__name{ max-width:none; font-size:1rem }
  .nav__links{
    position:static; width:auto; height:auto; background:none;
    padding:0; overflow:visible; transform:none;
    box-shadow:none; z-index:auto; visibility:visible;
    flex-direction:row; align-items:center; gap:var(--s-5);
  }
  @supports (backdrop-filter:blur(1px)){
    .nav__links{ background:none; backdrop-filter:none; -webkit-backdrop-filter:none }
  }
  .nav__links a{ font-size:.95rem; padding:.35rem 0; border:0; position:relative }
  .nav__links a:not(.nav__cta)::after{ content:""; position:absolute; left:0; bottom:0;
    height:2px; width:100%; background:var(--cyan);
    transform:scaleX(0); transform-origin:100% 50%;
    transition:transform .4s var(--ease-out) }
  .nav__links a:not(.nav__cta):hover::after{ transform:scaleX(1); transform-origin:0 50% }
  .nav__cta{ margin:0; padding:.65rem 1.35rem !important; min-height:44px }
}

/* =========================================================
   HERO — parallaxe, lueur qui respire, titre en cascade
   ========================================================= */
.hero{ position:relative; isolation:isolate; background:var(--navy); overflow:clip }
.hero__bg{ position:absolute; inset:-10% 0 0; z-index:-3 }
.hero__bg img{ width:100%; height:110%; object-fit:cover }

@supports (animation-timeline:scroll()){
  .hero__bg{ animation:parallax linear both;
    animation-timeline:scroll(root block); animation-range:0 90vh }
  @keyframes parallax{ to{ transform:translateY(13%) scale(1.06) } }
}

.hero::after{ content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(180deg,rgba(11,27,58,.92) 0%,rgba(11,27,58,.55) 42%,
    rgba(11,27,58,.97) 100%) }
.hero::before{ content:""; position:absolute; z-index:-1; pointer-events:none;
  width:60vmax; height:60vmax; left:-18vmax; top:-22vmax; border-radius:50%;
  background:radial-gradient(circle,rgba(0,194,255,.22),transparent 62%);
  animation:breathe 11s ease-in-out infinite alternate }

.hero__content{ padding-block:var(--s-8) var(--s-6); color:#fff; position:relative }
.hero h1{ color:#fff }
.hero h1 span{ display:block; opacity:0; animation:line-up .9s var(--ease-out) both }
.hero h1 span:nth-child(1){ animation-delay:.1s }
.hero h1 span:nth-child(2){ animation-delay:.22s }
.hero h1 em{ font-style:normal; color:var(--cyan) }

.hero__sub{ color:#C3D3EC; max-width:50ch; margin-block:var(--s-4) var(--s-5);
  font-size:clamp(1.02rem,2vw,1.18rem);
  opacity:0; animation:line-up .9s var(--ease-out) .36s both }
.hero .btn-group{ opacity:0; animation:line-up .9s var(--ease-out) .48s both }
.hero__note{ margin-top:var(--s-4); font-size:var(--t-small); color:var(--yellow);
  font-weight:700; display:flex; align-items:center; gap:.55rem;
  opacity:0; animation:line-up .9s var(--ease-out) .6s both }
.hero__note::before{ content:""; flex-shrink:0; width:7px; height:7px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 0 rgba(22,199,132,.7);
  animation:ping 2.2s ease-out infinite }
@keyframes ping{ 70%,100%{ box-shadow:0 0 0 11px rgba(22,199,132,0) } }

/* --- Bloc offre : carte blanche, propre et minimale ----- */
.aanbod{ margin-bottom:var(--s-6);
  opacity:0; animation:line-up .7s var(--ease-out) .5s both }
.aanbod__glow{ display:none }

.aanbod__in{ background:var(--white);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--s-5); box-shadow:var(--shadow-sm) }

.aanbod__head{ margin-bottom:var(--s-4); padding-bottom:var(--s-4);
  border-bottom:1px solid var(--border) }
.aanbod__badge{ display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--t-label); font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  color:var(--green); padding:.3rem .7rem; border-radius:8px; background:var(--green-bg) }
.aanbod__badge::before{ content:""; width:6px; height:6px; border-radius:50%;
  background:var(--green) }

.aanbod__kop{ margin-top:.9rem; font-weight:700; color:var(--navy);
  font-size:clamp(1.375rem,1.1rem + 1.1vw,1.625rem); line-height:1.3; letter-spacing:-.02em }
.aanbod__kop b{ white-space:nowrap; font-size:1.35em; font-weight:700; color:var(--orange) }
.aanbod__kop span{ display:block; margin-top:.35rem; font-weight:400;
  font-size:1rem; letter-spacing:0; color:var(--text) }

.aanbod__lijst{ display:grid; gap:.75rem }
.aanbod__lijst li{ position:relative; padding-left:1.9rem;
  font-size:var(--t-small); font-weight:400; color:var(--text); line-height:1.5 }
.aanbod__lijst li::before{ content:""; position:absolute; left:0; top:.05em;
  width:1.25rem; height:1.25rem; border-radius:6px; background:var(--green-bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8A5C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / .8rem no-repeat }
@media(min-width:820px){
  .aanbod__lijst{ grid-template-columns:repeat(2,1fr); gap:.8rem var(--s-5) }
}
/* Carte offre reprise dans l'en-tête des sous-pages */
.pagehead .aanbod{ margin-block:var(--s-5) 0; max-width:760px;
  animation-delay:.15s }

/* =========================================================
   BARRE DE CONFIANCE — compteurs animés
   ========================================================= */
.trust{ background:var(--navy-2); padding-block:var(--s-5);
  position:relative; overflow:hidden }
.trust::after{ content:""; position:absolute; inset:0; background:var(--grain);
  opacity:.05; pointer-events:none }
.trust__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-4);
  text-align:center; position:relative }
.trust__grid b{ display:block; font-weight:800; font-size:clamp(1.5rem,4.5vw,2.3rem);
  letter-spacing:-.045em;
  background:linear-gradient(135deg,var(--yellow),var(--orange));
  -webkit-background-clip:text; background-clip:text; color:transparent }
.trust__grid span{ font-size:.8rem; color:#93A9CC; overflow-wrap:break-word; hyphens:auto }
@media(min-width:768px){ .trust__grid{ grid-template-columns:repeat(4,minmax(0,1fr)) } }

/* =========================================================
   BENTO — six avantages, tailles inégales
   ========================================================= */
.bento{ display:grid; gap:var(--s-2); grid-template-columns:1fr }
.tile{ position:relative; overflow:hidden; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--s-5);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out),
             border-color .4s }
.tile::before{ content:""; position:absolute; inset:0; opacity:0;
  background:radial-gradient(340px circle at var(--mx) var(--my),
    rgba(0,194,255,.1), transparent 62%);
  transition:opacity .45s }
.tile:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent }
.tile:hover::before{ opacity:1 }
.tile .ruit{ margin-bottom:var(--s-3) }
.tile h3{ margin-bottom:.45rem }
.tile p{ font-size:.95rem; color:var(--slate); position:relative }

.tile--wide{ background:var(--navy); border-color:var(--navy) }
.tile--wide h3{ color:#fff; font-size:clamp(1.25rem,3vw,1.6rem) }
.tile--wide p{ color:#9FB4D4; font-size:1rem }
.tile--wide::after{ content:""; position:absolute; right:-24%; bottom:-52%;
  width:74%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(0,194,255,.3),transparent 66%) }

@media(min-width:640px){ .bento{ grid-template-columns:repeat(2,1fr); gap:var(--s-3) } }
@media(min-width:1000px){
  .bento{ grid-template-columns:repeat(4,1fr) }
  .tile--wide{ grid-column:span 2 }
}

/* --- Bandeau illustré de section (home) ---------------- *
   Même traitement que .split__img : coins arrondis, ombre
   discrète, voile dégradé pour fondre l'image dans la section. */
.sectiebeeld{ position:relative; margin-block:var(--s-5) var(--s-3);
  border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow) }
.sectiebeeld img{ width:100%; height:auto; object-fit:cover; aspect-ratio:12/5 }
.sectiebeeld::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg,transparent 55%,rgba(11,27,58,.24)) }
@media(max-width:560px){ .sectiebeeld img{ aspect-ratio:3/2 } }

/* =========================================================
   ÉTAPES — cartes qui s'empilent au défilement
   ========================================================= */
.steps{ display:grid; gap:var(--s-3) }
.step{ background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--s-5) }
.step__n{ display:grid; place-items:center; width:52px; height:52px;
  background:var(--c); color:var(--t); font-weight:800; font-size:1.3rem;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); margin-bottom:var(--s-3) }
.step h3{ margin-bottom:.4rem }
.step p{ font-size:.95rem; color:var(--slate) }
@media(min-width:1000px){
  .steps{ grid-template-columns:repeat(4,1fr); align-items:start }
  .step{ position:sticky; top:calc(var(--nav-h) + 24px) }
  .step:nth-child(2){ top:calc(var(--nav-h) + 40px) }
  .step:nth-child(3){ top:calc(var(--nav-h) + 56px) }
  .step:nth-child(4){ top:calc(var(--nav-h) + 72px) }
}

/* =========================================================
   THÉORIE
   ========================================================= */
.theorie{ overflow:clip }
.theorie__grid{ display:grid; gap:var(--s-6) }
.theorie p{ color:#9FB4D4 }
.ticks{ display:grid; gap:.75rem; margin-block:var(--s-4) }
.ticks li{ position:relative; padding-left:1.75rem; font-size:.97rem; color:#C3D3EC }
.ticks li::before{ content:""; position:absolute; left:0; top:.52em;
  width:.6rem; height:.6rem; background:var(--yellow);
  transform:rotate(45deg); border-radius:1px }
.theorie .btn{ margin-top:var(--s-4) }
.theorie__viz{ background:linear-gradient(150deg,#0e2449,#0a1a38);
  border:1px solid rgba(255,255,255,.07); border-radius:var(--radius-xl);
  padding:var(--s-4); box-shadow:var(--shadow-lg) }
@media(min-width:1000px){
  .theorie__grid{ grid-template-columns:1fr 1.08fr; gap:var(--s-7); align-items:center }
}

/* =========================================================
   CATÉGORIES
   ========================================================= */
.cats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-2) }
.cat{ position:relative; overflow:hidden; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--s-3); color:var(--navy);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out),
             border-color .35s }
.cat::after{ content:""; position:absolute; inset:auto auto -40% -30%;
  width:100%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(0,194,255,.14),transparent 66%);
  opacity:0; transition:opacity .45s, transform .6s var(--ease-out) }
.cat:hover{ transform:translateY(-6px); border-color:transparent; box-shadow:var(--shadow) }
.cat:hover::after{ opacity:1; transform:translate(14%,-14%) }
.cat svg{ width:42px; height:42px; margin-bottom:var(--s-3); color:var(--navy);
  transition:transform .5s var(--ease-spring) }
.cat:hover svg{ transform:translateX(6px) }
.cat b{ font-size:1.35rem; display:block; line-height:1; letter-spacing:-.035em }
.cat span{ font-size:.78rem; color:var(--slate); display:block; margin-bottom:.6rem;
  overflow-wrap:break-word; hyphens:auto }
.cat p{ font-size:.86rem; color:var(--slate); position:relative }
.cat--hl{ background:linear-gradient(160deg,#FFFBF0,#fff); border-color:var(--yellow) }
@media(min-width:768px){ .cats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-3) }
  .cat{ padding:var(--s-4) } }

/* =========================================================
   TARIFS
   ========================================================= */
.prices{ display:grid; grid-auto-flow:column; grid-auto-columns:84%;
  gap:var(--s-3); overflow-x:auto; scroll-snap-type:x mandatory;
  padding:var(--s-2) var(--s-3) var(--s-4);
  margin-inline:calc(var(--s-3) * -1); scrollbar-width:none }
.prices::-webkit-scrollbar{ display:none }
.price{ scroll-snap-align:center; position:relative; isolation:isolate;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--s-5);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out) }
.price:hover{ transform:translateY(-6px); box-shadow:var(--shadow) }
.price h3{ font-size:1.05rem; min-height:2.5em }
.price p{ font-size:.87rem; color:var(--slate) }
.price__amt{ font-weight:800; font-size:clamp(1.9rem,5vw,2.5rem); color:var(--navy);
  margin-block:.5rem .7rem; line-height:1; letter-spacing:-.05em }
.price__amt del{ display:block; font-size:.92rem; font-weight:700; color:var(--slate);
  letter-spacing:-.01em; text-decoration-thickness:2px; margin-bottom:.2rem }
.price__amt .per{ display:block; font-size:.78rem; font-weight:600; color:var(--slate);
  letter-spacing:0; margin-top:.4rem }

.price--hl{ border-color:transparent }
.price--hl::before{ content:""; position:absolute; inset:-2px; z-index:-1;
  border-radius:calc(var(--radius-lg) + 2px);
  background:conic-gradient(from var(--ang),var(--orange),var(--yellow),
    var(--cyan),var(--orange)) }
@media(prefers-reduced-motion:no-preference){
  .price--hl::before{ animation:spin 6s linear infinite }
}
.price__tag{ position:absolute; top:-.8rem; left:var(--s-4);
  background:var(--orange); color:#fff; font-weight:700; font-size:.68rem;
  letter-spacing:.08em; text-transform:uppercase; padding:.3rem .8rem;
  border-radius:var(--radius-pill); box-shadow:0 6px 18px -6px rgba(255,107,53,.8) }
@media(min-width:768px){
  .prices{ grid-auto-flow:row; grid-template-columns:repeat(3,1fr);
    grid-auto-columns:auto; overflow:visible; margin-inline:0; padding-inline:0 }
  .price--hl{ transform:scale(1.04) }
  .price--hl:hover{ transform:scale(1.04) translateY(-6px) }
}

/* --- Liste des prix indicatifs par catégorie (home) ---- */
.prijslijst{ display:grid; gap:.5rem; margin-block:var(--s-4) var(--s-3) }
.prijslijst__rij{ display:grid; grid-template-columns:2.75rem 1fr auto;
  align-items:center; gap:.15rem var(--s-3);
  padding:var(--s-3) var(--s-4);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .3s, transform .35s var(--ease-out) }
.prijslijst__rij:hover{ border-color:var(--cyan); transform:translateX(4px) }
.prijslijst__rij b{ font-size:.95rem; font-weight:800; color:var(--navy);
  letter-spacing:-.03em }
.prijslijst__rij span{ font-size:.9rem; color:var(--slate);
  overflow-wrap:break-word; hyphens:auto }
.prijslijst__rij em{ font-style:normal; font-weight:800; color:var(--navy);
  font-size:.95rem; letter-spacing:-.02em; white-space:nowrap; text-align:right }
@media(min-width:640px){
  .prijslijst{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem var(--s-4) }
}

/* --- Grille des 16 catégories (page tarieven) ---------- */
.cattar{ display:grid; grid-template-columns:1fr; gap:var(--s-2);
  margin-block:var(--s-5) var(--s-4) }
.cattar__item{ display:grid; grid-template-columns:auto 1fr;
  column-gap:var(--s-3); row-gap:.1rem; align-content:center;
  padding:var(--s-4);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  transition:border-color .35s, transform .4s var(--ease-out), box-shadow .4s var(--ease-out) }
.cattar__item:hover{ border-color:transparent; transform:translateY(-4px);
  box-shadow:var(--shadow) }
.cattar__ico{ grid-row:1 / span 3; align-self:center;
  display:grid; place-items:center; width:48px; height:48px;
  border-radius:14px; background:var(--green-bg); color:var(--cyan-dark) }
.cattar__ico svg{ width:28px; height:28px }
.cattar__code{ font-weight:800; font-size:1.05rem; color:var(--navy);
  letter-spacing:-.03em; align-self:end }
.cattar__naam{ font-size:.84rem; color:var(--slate);
  overflow-wrap:break-word; hyphens:auto }
.cattar__prijs{ font-style:normal; font-weight:800; font-size:1.1rem;
  color:var(--navy); letter-spacing:-.02em; margin-top:.25rem }
@media(min-width:680px){ .cattar{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(min-width:1040px){ .cattar{ grid-template-columns:repeat(3,minmax(0,1fr)) } }

/* =========================================================
   VILLES
   ========================================================= */
.steden{ position:relative; isolation:isolate; overflow:clip }
.steden::before{ content:""; position:absolute; inset:0; z-index:-2;
  background:url("../img/steden-nacht.webp") center/cover no-repeat }
.steden::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(11,27,58,.94),rgba(11,27,58,.8)) }
.steden__list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.4rem var(--s-3); margin-block:var(--s-4) }
.steden__list a{ display:flex; align-items:center; gap:.6rem; color:#fff;
  font-weight:700; font-size:.97rem; padding:.5rem .6rem; border-radius:10px;
  letter-spacing:-.02em; transition:background .3s, transform .35s var(--ease-out), color .3s }
.steden__list a:hover{ background:rgba(255,255,255,.08); transform:translateX(5px);
  color:var(--yellow) }
.steden__list .ruit{ width:.45rem; height:.45rem }
@media(min-width:640px){ .steden__list{ grid-template-columns:repeat(3,1fr) } }
@media(min-width:1000px){ .steden__list{ grid-template-columns:repeat(5,1fr) } }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ display:grid; gap:.6rem }
.faq__item{ background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  transition:border-color .35s, box-shadow .35s }
.faq__item[open]{ border-color:var(--green); box-shadow:var(--shadow-sm) }
.faq__item summary{ list-style:none; cursor:pointer; padding:var(--s-4);
  font-weight:700; font-size:1.02rem; color:var(--navy); letter-spacing:-.025em;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  min-height:56px }
.faq__item summary::-webkit-details-marker{ display:none }
.faq__item summary::after{ content:""; width:.6rem; height:.6rem; flex-shrink:0;
  border-right:2.5px solid var(--orange); border-bottom:2.5px solid var(--orange);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .4s var(--ease-spring) }
.faq__item[open] summary::after{ transform:rotate(-135deg) translateY(-2px) }
.faq__item p{ padding:0 var(--s-4) var(--s-4); font-size:.96rem; color:var(--slate) }

/* =========================================================
   CTA FINAL
   ========================================================= */
.cta-final{ position:relative; overflow:clip; background:var(--navy);
  color:#fff; padding-block:var(--s-7) }
.cta-final::before{ content:""; position:absolute; z-index:0; border-radius:50%;
  width:70vmax; height:70vmax; left:50%; top:50%; translate:-50% -50%;
  background:radial-gradient(circle,rgba(255,107,53,.2),transparent 62%);
  animation:breathe 13s ease-in-out infinite alternate }
.cta-final .wrap{ position:relative; z-index:1 }
.cta-final h2{ color:#fff }
.cta-final p{ color:#9FB4D4; max-width:46ch; margin:var(--s-3) auto var(--s-5) }

/* =========================================================
   PIED DE PAGE
   ========================================================= */
.foot{ background:#08132B; color:#8399BB; padding-block:var(--s-6) var(--s-3) }
.foot__grid{ display:grid; gap:var(--s-5) }
.foot__name{ font-weight:800; font-size:1.1rem; color:#fff; margin-bottom:.5rem;
  letter-spacing:-.03em }
.foot__name b{ color:var(--cyan) }
.foot__h{ font-weight:700; font-size:.72rem; color:#fff; letter-spacing:.16em;
  text-transform:uppercase; margin-bottom:.7rem }
.foot a{ transition:color .3s }
.foot a:hover{ color:var(--cyan) }
.foot__bottom{ border-top:1px solid rgba(255,255,255,.07);
  margin-top:var(--s-5); padding-top:var(--s-4) }
.foot__social{ display:grid; gap:.25rem; font-size:var(--t-small) }
.foot__social a{ display:inline-flex; align-items:center; gap:.5rem;
  min-height:44px; transition:color .3s }
.foot__social svg{ flex-shrink:0 }
/* En dessous de 1000px le bouton WhatsApp flottant est visible :
   on dégage de la place sous le pied de page pour qu'il ne couvre rien. */
@media(max-width:999px){ .foot{ padding-bottom:calc(58px + var(--s-4)) } }
@media(min-width:768px){ .foot__grid{ grid-template-columns:repeat(3,1fr); gap:var(--s-6) } }
@media(min-width:1000px){ .foot__grid{ grid-template-columns:1.5fr repeat(4,1fr) } }

/* =========================================================
   PAGE TARIFS
   ========================================================= */

/* --- En-tête de page ------------------------------------ */
.pagehead{ background:var(--navy); color:#C3D3EC; position:relative; overflow:clip;
  padding-block:calc(var(--s-7) + 1rem) var(--s-6) }
.pagehead::before{ content:""; position:absolute; z-index:0; border-radius:50%;
  width:56vmax; height:56vmax; right:-20vmax; top:-26vmax;
  background:radial-gradient(circle,rgba(0,194,255,.2),transparent 62%);
  animation:breathe 12s ease-in-out infinite alternate; pointer-events:none }
.pagehead .wrap{ position:relative; z-index:1 }
.pagehead .tag{ background:rgba(0,194,255,.16); color:var(--cyan) }
.pagehead h1{ color:#fff }
.pagehead__sub{ color:#9FB4D4; max-width:52ch; margin-top:var(--s-4);
  font-size:clamp(1.02rem,2vw,1.15rem) }
.pagehead__badge{ display:inline-flex; align-items:center; flex-wrap:wrap;
  gap:.25rem .6rem; max-width:100%;
  margin-top:var(--s-4); padding:.7rem 1.2rem; border-radius:var(--radius);
  background:rgba(255,197,66,.14); border:1px solid rgba(255,197,66,.35);
  color:var(--yellow); font-size:.92rem; font-weight:600 }
.pagehead__badge b{ color:#fff; font-weight:800 }

/* Téléphone en paysage (viewport court) : hero et en-tête de page ne
   réservent plus une grande hauteur en haut, sinon le contenu passe
   sous la ligne de flottaison. Placé après .hero__content et .pagehead
   pour l'emporter sur eux. */
@media (orientation:landscape) and (max-height:520px){
  .hero__content{ padding-block:var(--s-5) var(--s-4) }
  .pagehead{ padding-block:var(--s-5) var(--s-4) }
}

/* --- Barre d'onglets, collante sous la nav -------------- */
.tabsbar{ position:sticky; top:var(--nav-h); z-index:700;
  background:rgba(245,247,250,.9); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line) }
.tabs{ display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none;
  padding-block:.7rem; scroll-padding-inline:var(--s-3) }
.tabs::-webkit-scrollbar{ display:none }
.tab{ flex:0 0 auto; display:grid; gap:.1rem; text-align:left;
  padding:.6rem 1rem; border-radius:var(--radius); background:#fff;
  border:1.5px solid var(--line); color:var(--slate);
  transition:border-color .3s, background .3s, transform .3s var(--ease-out) }
.tab b{ font-size:1rem; font-weight:800; color:var(--navy); letter-spacing:-.03em;
  line-height:1.1 }
.tab span{ font-size:.72rem; white-space:nowrap }
.tab:hover{ transform:translateY(-2px) }
.tab.is-active{ background:var(--navy); border-color:var(--navy) }
.tab.is-active b{ color:var(--yellow) }
.tab.is-active span{ color:#9FB4D4 }

/* --- Grille de formules --------------------------------- */
.prices--grid{ display:grid; grid-auto-flow:row;
  grid-template-columns:1fr; grid-auto-columns:auto;
  overflow:visible; margin-inline:0; padding-inline:0 }
.price__btn{ width:100%; margin-top:var(--s-3); font-size:.92rem; min-height:48px }
@media(min-width:600px){ .prices--grid{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1000px){ .prices--grid{ grid-template-columns:repeat(3,1fr) } }
@media(min-width:768px){ .prices--grid .price--hl{ transform:none }
  .prices--grid .price--hl:hover{ transform:translateY(-6px) } }

/* --- Prix sur demande ----------------------------------- */
.opaanvraag{ background:linear-gradient(155deg,#fff,var(--mist));
  border:1.5px dashed var(--line); border-radius:var(--radius-xl);
  padding:var(--s-6) var(--s-4); text-align:center; max-width:640px; margin-inline:auto }
.opaanvraag h3{ font-size:clamp(1.3rem,4vw,1.75rem); margin-block:.4rem var(--s-3) }
.opaanvraag p{ color:var(--slate); max-width:46ch; margin:0 auto var(--s-5) }
.opaanvraag .btn-group{ justify-content:center }

/* --- Inclus / non inclus -------------------------------- */
.incl{ display:grid; gap:var(--s-3) }
.incl__box{ background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--s-5) }
.incl__box h3{ margin-bottom:var(--s-3) }
.incl__box ul{ display:grid; gap:.7rem }
.incl__box li{ position:relative; padding-left:1.9rem; font-size:.95rem; color:var(--ink) }
.incl__box li::before{ position:absolute; left:0; top:0; width:1.25rem; height:1.25rem;
  border-radius:50%; display:grid; place-items:center; font-size:.7rem; font-weight:800 }
.incl__box--yes{ border-left:4px solid var(--green) }
.incl__box--yes li::before{ content:"✓"; background:rgba(22,199,132,.15); color:var(--green-2) }
.incl__box--no{ border-left:4px solid var(--orange) }
.incl__box--no li::before{ content:"✕"; background:rgba(255,107,53,.14); color:var(--orange-2) }
@media(min-width:768px){ .incl{ grid-template-columns:repeat(2,1fr); gap:var(--s-4) } }

/* --- Frais CBR ------------------------------------------ */
.cbr{ display:grid; gap:.5rem; margin-block:var(--s-4) var(--s-3) }
.cbr__row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.2rem var(--s-3);
  align-items:center; padding:var(--s-3) var(--s-4);
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius) }
.cbr__naam{ color:#fff; font-weight:600; font-size:.97rem; hyphens:auto }
.cbr__aan{ grid-column:1; font-size:.75rem; color:#8399BB; letter-spacing:.06em;
  text-transform:uppercase }
.cbr__prijs{ grid-row:1 / span 2; font-size:1.15rem; font-weight:800; color:var(--yellow);
  letter-spacing:-.03em }

/* --- Calculateur ---------------------------------------- */
.calc{ margin-top:var(--s-6); background:linear-gradient(155deg,#102850,#0a1a38);
  border:1px solid rgba(255,255,255,.09); border-radius:var(--radius-xl);
  padding:var(--s-5) var(--s-4); box-shadow:var(--shadow-lg) }
.calc__head h3{ color:#fff }
.calc__head .small{ margin-top:.3rem }
.calc__body{ display:grid; gap:var(--s-3); margin-block:var(--s-4) }
.calc__field{ display:grid; gap:.4rem }
.calc__field > span{ font-size:.78rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#8399BB }
.calc__field select,.calc__field input{
  font:inherit; font-size:.97rem; color:#fff; min-height:48px;
  background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.14);
  border-radius:var(--radius); padding:.7rem 1rem; width:100%;
  transition:border-color .3s, background .3s }
.calc__field select:focus,.calc__field input:focus{
  border-color:var(--cyan); background:rgba(255,255,255,.1); outline:none }
.calc__field option{ color:#0B1B3A }
.calc__check{ display:flex; align-items:center; gap:.7rem; font-size:.95rem; color:#C3D3EC;
  cursor:pointer; padding:.4rem 0 }
.calc__check input{ width:22px; height:22px; accent-color:var(--cyan); cursor:pointer }
.calc__lijnen{ display:grid; gap:.55rem; padding-top:var(--s-4);
  border-top:1px solid rgba(255,255,255,.1) }
.calc__lijnen li{ display:flex; justify-content:space-between; gap:var(--s-3);
  font-size:.93rem; color:#9FB4D4 }
.calc__lijnen li span{ min-width:0; overflow-wrap:break-word; hyphens:auto }
.calc__lijnen b{ color:#fff; font-weight:600; white-space:nowrap }
.calc__totaal{ display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:.4rem var(--s-3); margin-top:var(--s-4); padding-top:var(--s-4);
  border-top:2px solid rgba(255,197,66,.3) }
.calc__totaal span{ font-size:.82rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#8399BB }
.calc__totaal b{ font-size:clamp(1.5rem,5.5vw,2.4rem); font-weight:800;
  letter-spacing:-.045em; margin-left:auto;
  background:linear-gradient(135deg,var(--yellow),var(--orange));
  -webkit-background-clip:text; background-clip:text; color:transparent }
.calc__disclaimer{ margin-top:var(--s-3); line-height:1.5 }
@media(min-width:700px){
  .calc{ padding:var(--s-6) }
  .calc__body{ grid-template-columns:1.6fr 1fr; align-items:end }
  .calc__check{ grid-column:1 / -1 }
}

/* =========================================================
   PAGE OVER ONS
   ========================================================= */

/* --- Bloc texte + image --------------------------------- */
.split{ display:grid; gap:var(--s-5); align-items:center }
.split__img{ border-radius:var(--radius-xl); overflow:hidden;
  box-shadow:var(--shadow); position:relative }
.split__img img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3 }
.split__img::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(160deg,transparent 55%,rgba(11,27,58,.28));
  pointer-events:none }
.split p + p{ margin-top:var(--s-3) }
@media(min-width:900px){
  .split{ grid-template-columns:1fr 1fr; gap:var(--s-7) }
  .split--reverse .split__img{ order:-1 }
}

/* Puces claires sur fond clair */
.ticks--dark li{ color:var(--ink) }
.ticks--dark li::before{ background:var(--orange) }

/* --- Grille des villes ---------------------------------- */
.stadgrid{ display:grid; grid-template-columns:1fr; gap:.6rem;
  margin-top:var(--s-4) }
.stadgrid__item a{ display:grid; grid-template-columns:auto 1fr; gap:.2rem .8rem;
  align-items:center; padding:var(--s-3) var(--s-4);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .35s, transform .4s var(--ease-out), box-shadow .4s var(--ease-out) }
.stadgrid__item a:hover{ border-color:var(--cyan); transform:translateY(-3px);
  box-shadow:var(--shadow-sm) }
.stadgrid__item .ruit{ grid-row:1 / span 2; width:.6rem; height:.6rem }
.stadgrid__item b{ font-size:1.02rem; font-weight:700; color:var(--navy);
  letter-spacing:-.025em; line-height:1.2 }
.stadgrid__item span{ font-size:.78rem; color:var(--slate) }
@media(min-width:600px){ .stadgrid{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1000px){ .stadgrid{ grid-template-columns:repeat(3,1fr) } }

/* --- Engagements ---------------------------------------- */
.beloften{ display:grid; gap:var(--s-3) }
.belofte{ background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--s-4);
  border-left:4px solid var(--yellow) }
.belofte .ruit{ margin-bottom:var(--s-2) }
.belofte h3{ margin-bottom:.3rem; font-size:1.05rem }
.belofte p{ font-size:.93rem; color:var(--slate) }
@media(min-width:640px){ .beloften{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1000px){ .beloften{ grid-template-columns:repeat(4,1fr) } }

/* --- Hoofdinstructeurs --------------------------------- */
.instructeurs{ display:grid; gap:var(--s-3); margin-block:var(--s-4) }
.instructeur{ display:flex; flex-direction:column; align-items:stretch;
  gap:.4rem; background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--s-5) }
.instructeur__ruit{ align-self:flex-start;
  display:grid; place-items:center; width:46px; height:46px;
  margin-bottom:.6rem; background:var(--yellow); color:var(--navy);
  font-weight:700; font-size:1.1rem; line-height:1;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%) }
.instructeur__naam{ font-size:1.1rem; font-weight:700; color:var(--navy);
  letter-spacing:-.02em; line-height:1.2 }
.instructeur__rol{ font-size:var(--t-small); color:var(--slate) }
.instructeur__link{ margin-top:.8rem }
@media(min-width:640px){
  .instructeurs{ grid-template-columns:repeat(2,1fr); gap:var(--s-4) }
  .instructeur__link{ margin-top:auto; align-self:flex-start }
}

/* --- Mentions d'entreprise ------------------------------ */
.bedrijf{ display:grid; gap:0; margin-block:var(--s-4) var(--s-3);
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden }
.bedrijf > div{ display:grid; grid-template-columns:1fr; gap:.15rem;
  padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--line) }
.bedrijf > div:last-child{ border-bottom:0 }
.bedrijf > div:nth-child(odd){ background:var(--mist) }
.bedrijf dt{ font-size:.75rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--slate) }
.bedrijf dd{ font-size:.98rem; font-weight:600; color:var(--navy) }
@media(min-width:640px){
  .bedrijf > div{ grid-template-columns:16rem 1fr; gap:var(--s-3); align-items:baseline }
}

/* =========================================================
   PAGE CONTACT
   ========================================================= */

/* --- Bloc WhatsApp -------------------------------------- */
.wa-block{ display:grid; gap:var(--s-3); align-items:center;
  background:linear-gradient(150deg,#F0FBF6,#fff);
  border:1.5px solid rgba(22,199,132,.3); border-radius:var(--radius-xl);
  padding:var(--s-5) var(--s-4) }
.wa-block__ico{ display:grid; place-items:center; width:56px; height:56px;
  border-radius:18px; background:var(--green); color:#fff;
  box-shadow:0 10px 26px -8px rgba(22,199,132,.6) }
.wa-block__ico svg{ width:30px; height:30px }
.wa-block__txt{ min-width:0 }
.wa-block h2{ font-size:clamp(1.25rem,3.5vw,1.65rem); margin-bottom:.35rem }
.wa-block p{ font-size:.95rem; color:var(--slate) }
@media(min-width:820px){
  .wa-block{ grid-template-columns:auto 1fr auto; gap:var(--s-4);
    padding:var(--s-5) var(--s-6) }
}

/* --- Formulaire ----------------------------------------- */
.form{ display:grid; gap:var(--s-4); background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-xl);
  padding:var(--s-5) var(--s-4) }
@media(min-width:700px){ .form{ padding:var(--s-6) } }

.form__trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.form__row{ display:grid; gap:var(--s-4) }
@media(min-width:600px){ .form__row{ grid-template-columns:1fr 1fr } }

.field{ display:grid; gap:.4rem }
.field label{ font-size:.88rem; font-weight:600; color:var(--navy) }
.req{ color:var(--orange) }

.field input, .field select, .field textarea{
  font:inherit; font-size:1rem; color:var(--ink);
  background:var(--mist); border:1.5px solid var(--line);
  border-radius:var(--radius); padding:.85rem 1rem; width:100%;
  min-height:52px; transition:border-color .25s, background .25s, box-shadow .25s }
.field textarea{ min-height:auto; resize:vertical; line-height:1.6 }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--cyan); background:#fff;
  box-shadow:0 0 0 4px rgba(0,194,255,.13) }
.field input::placeholder, .field textarea::placeholder{ color:#94A3B8 }

.field.is-error input, .field.is-error select, .field.is-error textarea{
  border-color:var(--orange); background:#FFF7F4 }
.field__err{ font-size:.83rem; font-weight:600; color:var(--orange-2);
  display:flex; align-items:center; gap:.4rem }
.field__err::before{ content:"!"; display:grid; place-items:center;
  width:1.05rem; height:1.05rem; border-radius:50%; flex-shrink:0;
  background:var(--orange); color:#fff; font-size:.72rem; font-weight:800 }

/* Champ « pièce d'identité » : contrôle personnalisé, libellés en néerlandais
   (le sélecteur de fichier natif n'est pas traduisible en HTML/CSS) */
.filefield{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  background:var(--mist); border:1.5px solid var(--line);
  border-radius:var(--radius); padding:.6rem .65rem; min-height:52px;
  cursor:pointer; transition:border-color .25s, background .25s, box-shadow .25s }
.filefield:focus-within{ border-color:var(--cyan); background:#fff;
  box-shadow:0 0 0 4px rgba(0,194,255,.13) }
.filefield input[type=file]{ position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0 }
.filefield__btn{ font-size:.9rem; font-weight:600; color:var(--navy);
  padding:.5rem .95rem; background:#fff; border:1.5px solid var(--line);
  border-radius:var(--radius-pill); flex-shrink:0; transition:border-color .25s }
.filefield:hover .filefield__btn{ border-color:var(--cyan) }
.filefield__name{ font-size:.95rem; color:var(--slate); overflow-wrap:anywhere }
.field__hint{ font-size:.83rem; color:var(--slate); line-height:1.5 }

/* Case à cocher RGPD */
.field--check{ gap:.5rem }
.check{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.75rem;
  align-items:start; cursor:pointer; font-size:.9rem;
  font-weight:400; color:var(--ink); line-height:1.5; overflow-wrap:break-word }
.check input{ width:22px; height:22px; min-height:auto; margin-top:.1rem;
  accent-color:var(--cyan); cursor:pointer; padding:0 }
.field--check.is-error .check span{ color:var(--orange-2) }

.form__submit{ justify-self:start; min-width:200px; position:relative }
@media(max-width:599px){ .form__submit{ justify-self:stretch; width:100% } }
.form__submit:disabled{ opacity:.75; cursor:wait }
/* Libellé du bouton : « Bezig met versturen… » ne doit pas passer à la ligne */
.form__submit-txt{ white-space:nowrap }
.form__spinner{ width:17px; height:17px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:draai .7s linear infinite }
@keyframes draai{ to{ transform:rotate(360deg) } }

.form__status{ padding:var(--s-4); border-radius:var(--radius);
  font-size:.95rem; line-height:1.55 }
.form__status.is-ok{ background:#E9FAF3; border:1.5px solid var(--green);
  color:#0B6B47 }
.form__status.is-fout{ background:#FFF1EC; border:1.5px solid var(--orange);
  color:#9A3412 }

/* --- Cartes de coordonnées ------------------------------ */
.contactkaarten{ display:grid; gap:var(--s-3); margin-top:var(--s-4) }
.contactkaart{ background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09); border-radius:var(--radius-lg);
  padding:var(--s-4); display:grid; gap:.35rem; align-content:start }
.contactkaart__label{ font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cyan) }
.contactkaart a, .contactkaart > span:not(.contactkaart__label){
  font-size:1.02rem; font-weight:700; color:#fff; letter-spacing:-.02em;
  word-break:break-word }
.contactkaart a{ display:flex; align-items:center; min-height:44px }
.contactkaart a:hover{ color:var(--yellow) }
@media(min-width:768px){ .contactkaarten{ grid-template-columns:repeat(3,1fr) } }

/* =========================================================
   PAGES JURIDIQUES — algemene voorwaarden & privacyverklaring
   ========================================================= */
.inhoud{ background:var(--mist); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--s-4) var(--s-5);
  margin-bottom:var(--s-6) }
.inhoud__kop{ font-size:var(--t-label); font-weight:600; letter-spacing:.02em;
  text-transform:uppercase; color:var(--green); margin-bottom:var(--s-2) }
.inhoud__lijst{ display:grid; gap:.45rem }
.inhoud__lijst a{ color:var(--navy); font-weight:500 }
.inhoud__lijst a:hover{ color:var(--green); text-decoration:underline }

.juridisch h2{ margin-top:var(--s-6); margin-bottom:var(--s-3) }
.juridisch > h2:first-child{ margin-top:0 }
.juridisch p{ margin-bottom:var(--s-3) }
.juridisch strong{ font-weight:700; color:var(--navy) }
.juridisch a{ color:var(--green); font-weight:500; text-decoration:underline }
.juridisch ol,.juridisch ul{ margin:0 0 var(--s-3) 1.4rem; display:grid; gap:.55rem }
.juridisch ol{ list-style:decimal }
.juridisch ul{ list-style:disc }
.juridisch li{ padding-left:.2rem; line-height:1.6 }
.juridisch em{ display:block; margin-top:var(--s-5); color:var(--slate); font-style:italic }
.juridisch__tabel{ overflow-x:auto; margin-bottom:var(--s-3) }
.juridisch__tabel table{ width:100%; border-collapse:collapse; font-size:.95rem }
.juridisch__tabel th,.juridisch__tabel td{ padding:.6rem .85rem;
  border:1px solid var(--border); text-align:left; vertical-align:top;
  overflow-wrap:break-word; hyphens:auto }
.juridisch__tabel thead th{ background:var(--mist); color:var(--navy); font-weight:700 }
@media(min-width:768px){ .juridisch ol,.juridisch ul{ margin-left:1.75rem } }

/* =========================================================
   SECTION VOORRANGSTRAJECT
   ========================================================= */

.vt{ position:relative; overflow:clip }
.vt::before{ content:""; position:absolute; z-index:0; border-radius:50%;
  width:64vmax; height:64vmax; right:-28vmax; top:-30vmax; pointer-events:none;
  background:radial-gradient(circle,rgba(255,197,66,.13),transparent 62%);
  animation:breathe 14s ease-in-out infinite alternate }
.vt .wrap{ position:relative; z-index:1 }

/* Respiration entre les sous-blocs — le principal défaut à corriger */
.vt__head{ margin-bottom:var(--s-6) }
.vt__profielen{ margin-bottom:var(--s-7) }
.vt__eerst{ margin-bottom:var(--s-7) }
.vt__incl{ margin-bottom:var(--s-7) }
.vt__stappen-blok{ margin-bottom:var(--s-7) }

.vt__sub{ font-size:clamp(1.3rem,3.5vw,1.75rem); color:#fff;
  margin-bottom:var(--s-5) }

/* --- 1 · Cartes profil --------------------------------- */
.vt__profielen{ display:grid; gap:var(--s-3); grid-template-columns:1fr }
@media(min-width:700px){ .vt__profielen{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1000px){
  .vt__profielen{ grid-template-columns:repeat(3,1fr); gap:var(--s-4) }
}

.vt-card{ position:relative; overflow:hidden; isolation:isolate;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-xl);
  padding:var(--s-5) var(--s-4) var(--s-4);
  transition:transform .55s var(--ease-out), border-color .4s,
             background .4s, box-shadow .55s var(--ease-out) }

/* Halo qui suit le curseur */
.vt-card::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0),
    rgba(255,197,66,.14), transparent 60%);
  transition:opacity .45s }
.vt-card:hover{ transform:translateY(-8px);
  background:rgba(255,255,255,.07);
  border-color:rgba(255,197,66,.4);
  box-shadow:0 22px 48px -22px rgba(0,0,0,.7) }
.vt-card:hover::before{ opacity:1 }

/* Numéro en losange, en filigrane */
.vt-card__num{ display:block; font-size:2.6rem; font-weight:800;
  line-height:1; letter-spacing:-.06em; margin-bottom:var(--s-3);
  background:linear-gradient(140deg,var(--yellow),var(--orange));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:transform .55s var(--ease-spring) }
.vt-card:hover .vt-card__num{ transform:translateX(6px) }

.vt-card h3{ color:#fff; font-size:1.15rem; margin-bottom:.6rem;
  letter-spacing:-.03em }
.vt-card p{ color:#9FB4D4; font-size:.94rem; line-height:1.65 }

/* --- 2 · Bloc d'honnêteté ------------------------------ */
.vt__eerst{ display:grid; gap:var(--s-4);
  background:linear-gradient(140deg,rgba(255,197,66,.13),rgba(255,197,66,.04));
  border:1px solid rgba(255,197,66,.32);
  border-left:5px solid var(--yellow);
  border-radius:var(--radius-xl);
  padding:var(--s-5) var(--s-4) }
.vt__eerst-ico{ display:grid; place-items:center; width:52px; height:52px;
  flex-shrink:0; border-radius:16px;
  background:var(--yellow); color:var(--navy) }
.vt__eerst-ico svg{ width:26px; height:26px }
.vt__eerst h3{ color:var(--yellow); font-size:clamp(1.1rem,3vw,1.4rem);
  margin-bottom:.7rem; letter-spacing:-.03em }
.vt__eerst p{ color:#DCE6F5; font-size:.97rem; line-height:1.7 }
.vt__eerst p + p{ margin-top:var(--s-3) }
.vt__eerst strong{ color:#fff }
@media(min-width:760px){
  .vt__eerst{ grid-template-columns:auto 1fr; gap:var(--s-5);
    padding:var(--s-6) var(--s-5) }
}

/* --- 3 · Inclus / non inclus sur fond sombre ----------- */
.vt__incl{ align-items:stretch }          /* hauteurs égales */
.vt__incl .incl__box{ height:100%;
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.1) }
.vt__incl .incl__box h3{ color:#fff }
.vt__incl .incl__box li{ color:#C3D3EC }

/* --- 4 · Étapes en frise ------------------------------- */
.vt__stappen{ display:grid; gap:var(--s-4); position:relative;
  counter-reset:none }

/* Rail vertical sur mobile */
.vt__stappen::before{ content:""; position:absolute; left:21px; top:14px;
  bottom:14px; width:2px;
  background:linear-gradient(180deg,var(--yellow),rgba(255,197,66,.15)) }

.vt-stap{ display:grid; grid-template-columns:44px 1fr; gap:var(--s-3);
  align-items:start; position:relative }
.vt-stap__n{ display:grid; place-items:center; width:44px; height:44px;
  background:var(--yellow); color:var(--navy);
  font-weight:800; font-size:1.05rem;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  position:relative; z-index:1;
  transition:transform .5s var(--ease-spring) }
.vt-stap:hover .vt-stap__n{ transform:rotate(90deg) }
.vt-stap p{ color:#C3D3EC; font-size:.96rem; line-height:1.6;
  padding-top:.7rem }

/* Frise horizontale à partir de 1000 px */
@media(min-width:1000px){
  .vt__stappen{ grid-template-columns:repeat(5,1fr); gap:var(--s-3) }
  .vt__stappen::before{ left:0; right:0; top:22px; bottom:auto;
    width:auto; height:2px;
    background:linear-gradient(90deg,var(--yellow),rgba(255,197,66,.15)) }
  .vt-stap{ grid-template-columns:1fr; gap:var(--s-3) }
  .vt-stap__n{ margin-inline:auto }
  .vt-stap p{ padding-top:0; text-align:center; font-size:.9rem }
}

/* --- 5 · Prix et actions ------------------------------- */
.vt__prijs{ background:linear-gradient(150deg,#102850,#0a1a38);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-xl);
  padding:var(--s-5) var(--s-4);
  box-shadow:var(--shadow-lg) }
.vt__prijs h3{ color:#fff; font-size:clamp(1.2rem,3.2vw,1.55rem);
  margin-bottom:.7rem }
.vt__prijs p{ color:#9FB4D4; font-size:.98rem; line-height:1.7;
  max-width:56ch; margin-bottom:var(--s-4) }
.vt__prijs .vt-bedrag{ display:block; font-size:clamp(1.9rem,6vw,2.6rem);
  font-weight:800; letter-spacing:-.05em; margin-bottom:.4rem;
  background:linear-gradient(135deg,var(--yellow),var(--orange));
  -webkit-background-clip:text; background-clip:text; color:transparent }
@media(min-width:760px){ .vt__prijs{ padding:var(--s-6) } }