/* =========================================================================
   FITS-LIST  |  conceptsite  |  SaffrieDesign
   Zwart, goud (#D4AD6D uit het officiele logo) en wit. Mobiel eerst.
   ========================================================================= */

:root{
  --ink:#12100E; --ink-2:#0B0A09; --ink-3:#1D1A15;
  --grijs:#3B3630; --muted:#6B635A; --muted-licht:#8E857A;
  --goud:#D4AD6D; --goud-diep:#A8813F; --goud-donker:#8A6930;
  --goud-licht:#E6CFA6; --goud-zacht:#F6EDDD;
  --zand:#FAF7F2; --wit:#FFFFFF; --grey:#F1EBE1; --hairline:#E6DCCB;
  --hairline-donker:rgba(212,173,109,.22);
  --op-donker:rgba(255,255,255,.72);
  --font-h:Outfit,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-display:clamp(2.35rem,6.4vw,4.6rem);
  --fs-h1:clamp(2rem,4.6vw,3.3rem);
  --fs-h2:clamp(1.6rem,3.4vw,2.5rem);
  --fs-h3:clamp(1.18rem,1.9vw,1.45rem);
  --fs-lead:clamp(1.04rem,1.5vw,1.2rem);
  --fs-body:1rem; --fs-sm:.9rem; --fs-cap:.74rem;
  --marge:22px;                 /* een bron voor de zijmarge, zie sectie-ritme */
  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --maxw:1180px;
}
@media (min-width:760px){ :root{ --marge:40px; } }

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);background:var(--zand);color:var(--ink);
  font-size:var(--fs-body);line-height:1.68;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-h);letter-spacing:-.025em;line-height:1.1;font-weight:600}
a{color:inherit}
::selection{background:var(--goud);color:#12100E}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--marge)}
.wrap-s{max-width:860px;margin:0 auto;padding-inline:var(--marge)}

section{padding-block:clamp(58px,8.5vw,116px)}
section.tight{padding-block:clamp(40px,5vw,66px)}
.s-zand{background:var(--zand)}
.s-wit{background:var(--wit)}
.s-grey{background:var(--grey)}
.s-goud{
  background:
    radial-gradient(60% 70% at 92% 8%, rgba(212,173,109,.22), transparent 58%),
    radial-gradient(70% 80% at 0% 100%, rgba(230,207,166,.4), transparent 62%),
    linear-gradient(170deg,#FDF8F0,#F6EDDD 60%,#F2E4CC);
}
.s-goud .glas--licht{background:rgba(255,255,255,.72);backdrop-filter:blur(4px)}
.s-donker{
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(212,173,109,.10), transparent 62%),
    radial-gradient(60% 80% at 0% 100%, rgba(168,129,63,.10), transparent 60%),
    linear-gradient(165deg,#191309 0%,#12100E 55%,#1C1408 100%);
  color:var(--wit);
}
.s-donker h1,.s-donker h2,.s-donker h3,.s-donker h4{color:var(--wit)}
.s-donker p{color:var(--op-donker)}

/* ---------- label met lijntje ---------- */
.label{
  display:inline-flex;align-items:center;
  font-family:var(--font-h);font-weight:600;font-size:var(--fs-cap);
  letter-spacing:.2em;text-transform:uppercase;color:var(--goud-donker);
  background:var(--goud-zacht);border:1px solid var(--hairline);
  border-radius:var(--r-sm);padding:7px 14px;margin-bottom:20px;
  /* nooit oprekken als het label een grid- of flex-item is */
  width:fit-content;max-width:100%;justify-self:start;align-self:start;flex:none;
}
.s-donker .label,.strook .label,.hero .label,.slot .label{
  color:var(--goud);background:rgba(212,173,109,.12);border-color:var(--hairline-donker);
}

.lead{font-size:var(--fs-lead);color:var(--grijs);max-width:62ch}
.s-donker .lead{color:var(--op-donker)}
p+p{margin-top:1em}
.sub{color:var(--muted);max-width:60ch}
.s-donker .sub{color:rgba(255,255,255,.62)}

/* ---------- knoppen: alleen op echte links ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-h);font-weight:600;font-size:.96rem;
  padding:14px 26px;border-radius:var(--r-sm);text-decoration:none;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.btn svg{width:15px;height:15px;flex:none}
.btn--goud{background:var(--goud);color:#12100E}
.btn--goud:hover{background:var(--goud-licht);transform:translateY(-2px)}
.btn--lijn{border:1px solid var(--hairline-donker);color:var(--wit)}
.btn--lijn:hover{border-color:var(--goud);color:var(--goud);transform:translateY(-2px)}
.btn--lijn-donker{border:1px solid var(--hairline);color:var(--ink)}
.btn--lijn-donker:hover{border-color:var(--goud-diep);color:var(--goud-donker);transform:translateY(-2px)}
.btn-rij{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.tekstlink{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--font-h);font-weight:600;color:var(--goud-donker);white-space:nowrap;
  border-bottom:1px solid transparent;transition:border-color .18s ease,gap .18s ease;
}
.tekstlink:hover{border-color:var(--goud-diep);gap:13px}
.tekstlink svg{width:15px;height:15px;flex:none}
.s-donker .tekstlink{color:var(--goud)}
.s-donker .tekstlink:hover{border-color:var(--goud)}

/* ---------- header ---------- */
.top{
  position:sticky;top:0;z-index:90;background:rgba(11,10,9,.94);
  border-bottom:1px solid rgba(212,173,109,.14);
}
.top-in{display:flex;align-items:center;gap:28px;height:84px}
.top-logo{display:flex;align-items:center;flex:none;text-decoration:none}
.top-logo img{height:38px;width:auto;transition:opacity .2s}
.top-logo:hover img{opacity:.75}
.nav{display:none;flex:1;align-items:center;justify-content:center;gap:4px}
.nav-item{position:relative}
.nav-item > a{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  color:rgba(255,255,255,.78);font-size:.93rem;font-weight:500;letter-spacing:.01em;
  padding:10px 14px;border-radius:var(--r-sm);transition:color .18s,background .18s;
}
.nav-item > a:hover,.nav-item:focus-within > a{color:#fff;background:rgba(255,255,255,.05)}
.nav-item > a[aria-current="page"]{color:var(--goud)}
.nav-chev{
  display:inline-block;width:7px;height:7px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.6;transition:transform .25s;
}
.nav-item:hover .nav-chev,.nav-item:focus-within .nav-chev{transform:rotate(225deg) translateY(-1px)}
.top-acties{display:none;align-items:center;gap:22px;margin-left:auto}
.top-acties .btn{padding:11px 20px;font-size:.9rem}
.top-stil{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:rgba(255,255,255,.78);
  font-family:var(--font-h);font-weight:600;font-size:.9rem;transition:color .18s;
}
.top-stil .ico{width:17px;height:17px;color:var(--goud)}
.top-stil:hover{color:#fff}
.menu-knop{
  margin-left:auto;display:inline-flex;align-items:center;gap:9px;background:none;
  border:1px solid var(--hairline-donker);border-radius:var(--r-sm);color:var(--wit);
  font-family:var(--font-h);font-weight:600;font-size:.85rem;padding:9px 15px;cursor:pointer;
  position:relative;z-index:95;
}
@media (min-width:1020px){
  .nav{display:flex}
  .top-acties{display:flex}
  .menu-knop{display:none}
}

/* megamenu en submenu op desktop */
.mega{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,8px);
  min-width:300px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s cubic-bezier(.15,0,.25,1), transform .22s cubic-bezier(.15,0,.25,1), visibility 0s .22s;
}
.mega::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.has-mega .mega{left:50%;min-width:min(900px, calc(100vw - 2 * var(--marge)))}
.nav-item:hover .mega,.nav-item:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s}
.mega-in{
  background:linear-gradient(160deg,#141109,#0E0C0A);border:1px solid rgba(212,173,109,.22);
  border-radius:var(--r-lg);padding:26px;display:grid;gap:26px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.has-mega .mega-in{grid-template-columns:1.1fr 1fr .95fr}
.mega-kopje{font-family:var(--font-h);font-weight:600;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--goud);margin-bottom:10px;padding-inline:10px}
.mega-kol > a{
  display:block;text-decoration:none;color:#fff;padding:10px;border-radius:var(--r-sm);
  transition:background .18s;
}
.mega-kol > a:hover{background:rgba(212,173,109,.1)}
.mega-kol > a b{display:block;font-family:var(--font-h);font-weight:600;font-size:.98rem}
.mega-kol > a small{display:block;font-size:.8rem;color:rgba(255,255,255,.5);margin-top:2px}
.mega-cats{display:grid;grid-template-columns:1fr;gap:2px}
.mega-cats a{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:rgba(255,255,255,.85);
  font-size:.9rem;padding:8px 10px;border-radius:var(--r-sm);transition:background .18s,color .18s;
}
.mega-cats a:hover{background:rgba(212,173,109,.1);color:#fff}
.ico--mini{width:16px;height:16px;color:var(--goud)}
.mega-alle{color:var(--goud) !important;font-family:var(--font-h);font-weight:600;margin-top:6px}
.mega-alle .ico,.mega-alle svg{width:13px;height:13px}
.mega-beeld{
  position:relative;display:flex;align-items:flex-end;text-decoration:none;color:#fff;
  border-radius:var(--r-md);overflow:hidden;min-height:220px;background:#16120d;
}
.mega-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.15,0,.25,1)}
.mega-beeld:hover img{transform:scale(1.05)}
.mega-beeld span{position:relative;padding:18px;background:linear-gradient(0deg,rgba(8,7,6,.92),transparent);width:100%;display:flex;flex-direction:column;gap:4px}
.mega-beeld em{font-style:normal;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--goud);font-family:var(--font-h);font-weight:600}
.mega-beeld b{font-family:var(--font-h);font-weight:600;font-size:1rem}

/* mobiel menu: schermvullend paneel met lagen die naar rechts schuiven */
.mob{
  position:fixed;inset:0;z-index:70;overflow:hidden;
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(212,173,109,.16), transparent 60%),
    linear-gradient(160deg,#0B0A09,#1B1712 60%,#2A2318);
  opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .35s cubic-bezier(.15,0,.25,1), transform .35s cubic-bezier(.15,0,.25,1), visibility 0s .35s;
}
.mob.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mob-lagen{
  position:absolute;inset:0;display:flex;width:200%;
  transition:transform .42s cubic-bezier(.15,0,.25,1);
}
.mob.laag-open .mob-lagen{transform:translateX(-50%)}
.mob-laag{
  width:50%;flex:none;overflow-y:auto;display:none;flex-direction:column;
  padding:calc(84px + 18px) var(--marge) 34px;
}
.mob-laag--root{display:flex}
.mob-laag.is-actief{display:flex}
.mob nav{display:flex;flex-direction:column}
.mob nav a,.mob nav button{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  text-decoration:none;color:#fff;background:none;border:0;text-align:left;cursor:pointer;
  font-family:var(--font-h);font-weight:600;font-size:clamp(1.5rem,7vw,2.1rem);letter-spacing:-.025em;
  padding-block:17px;border-bottom:1px solid rgba(255,255,255,.08);
  opacity:0;transform:translateY(16px);
}
.mob nav .nav-chev{width:11px;height:11px;transform:rotate(-45deg);opacity:.7;color:var(--goud)}
.mob.open nav a,.mob.open nav button{animation:mob-erin .5s cubic-bezier(.15,0,.25,1) forwards}
.mob.open nav > :nth-child(1){animation-delay:.06s}
.mob.open nav > :nth-child(2){animation-delay:.11s}
.mob.open nav > :nth-child(3){animation-delay:.16s}
.mob.open nav > :nth-child(4){animation-delay:.21s}
@keyframes mob-erin{to{opacity:1;transform:none}}
.mob-acties{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:11px;opacity:0;transform:translateY(16px)}
.mob.open .mob-acties{animation:mob-erin .5s cubic-bezier(.15,0,.25,1) .3s forwards}
.mob-acties .btn{justify-content:center;padding:16px}
.mob-slot{margin-top:24px;font-size:var(--fs-sm);color:rgba(255,255,255,.45);display:flex;flex-wrap:wrap;gap:6px 18px}
.mob-slot a{color:var(--goud);text-decoration:none}
.mob-terug{
  align-self:flex-start;display:inline-flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;
  color:var(--goud);font-family:var(--font-h);font-weight:600;font-size:.9rem;padding:0 0 18px;
}
.mob-terug svg{width:14px;height:14px;transform:rotate(180deg)}
.mob-laag-titel{
  display:flex;flex-direction:column;gap:4px;text-decoration:none;color:#fff;
  font-family:var(--font-h);font-weight:600;font-size:clamp(1.5rem,7vw,2.1rem);letter-spacing:-.025em;
  padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:8px;
}
.mob-laag-titel span{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:600;color:var(--goud);letter-spacing:0}
.mob-laag-titel span svg{width:13px;height:13px}
.mob-groep{padding-top:16px}
.mob-kopje{font-family:var(--font-h);font-weight:600;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:6px}
.mob-groep a{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;
  font-family:var(--font-h);font-weight:500;font-size:1.12rem;padding-block:12px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
body.menu-open{overflow:hidden}
body.menu-open .actiebalk{opacity:0;pointer-events:none}
.actiebalk{transition:opacity .25s}
@media (min-width:1020px){ .mob{display:none} }

/* menuknop met kruis */
.menu-knop span{position:relative;display:block;width:17px;height:11px}
.menu-knop span::before,.menu-knop span::after{
  content:"";position:absolute;left:0;right:0;height:1.6px;background:var(--goud);
  transition:transform .3s cubic-bezier(.15,0,.25,1), top .3s cubic-bezier(.15,0,.25,1);
}
.menu-knop span::before{top:0}
.menu-knop span::after{top:9px}
.menu-knop[aria-expanded="true"] span::before{top:5px;transform:rotate(45deg)}
.menu-knop[aria-expanded="true"] span::after{top:5px;transform:rotate(-45deg)}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(62% 58% at 6% 96%, rgba(212,173,109,.20), transparent 62%),
    radial-gradient(52% 58% at 96% 2%, rgba(212,173,109,.14), transparent 64%),
    linear-gradient(140deg,#0B0A09 0%,#1B1712 55%,#2E2619 100%);
  color:var(--wit);padding-block:clamp(56px,8vw,104px) clamp(56px,8vw,96px);
  position:relative;overflow:hidden;
}
.hero h1{font-size:var(--fs-display);max-width:16ch}
.hero h1 em{font-style:normal;color:var(--goud)}
.hero .lead{margin-top:24px;max-width:52ch;color:var(--op-donker)}
.hero-grid{display:grid;gap:clamp(40px,6vw,70px);align-items:center}
@media (min-width:980px){ .hero-grid{grid-template-columns:1.05fr .95fr} }
.hero-klein{
  margin-top:38px;display:flex;flex-wrap:wrap;gap:10px 30px;
  font-size:var(--fs-sm);color:rgba(255,255,255,.6);
}
.hero-klein b{color:var(--goud);font-weight:600}

/* ---------- USP-band ---------- */
.band{background:var(--ink-3);color:var(--wit);padding-block:26px;border-block:1px solid var(--hairline-donker)}
.band-in{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 30px;align-items:baseline}
@media (min-width:860px){ .band-in{grid-template-columns:repeat(4,1fr)} }
.band-item{display:flex;align-items:baseline;gap:11px;font-size:var(--fs-sm);min-width:0}
.band-item b{font-family:var(--font-h);font-size:1.5rem;color:var(--goud);font-weight:600;letter-spacing:-.02em}
.band-item span{color:rgba(255,255,255,.66)}

/* ---------- twee routes ---------- */
.splitsing{display:grid;gap:18px}
@media (min-width:820px){ .splitsing{grid-template-columns:1fr 1fr;gap:22px} }
.route{
  display:block;text-decoration:none;border:1px solid var(--hairline);border-radius:var(--r-lg);
  background:var(--wit);overflow:hidden;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.route-in{padding:clamp(24px,3.4vw,38px)}
.route-beeld{aspect-ratio:16/9;overflow:hidden;background:#16120d;max-width:100%}
.route-beeld img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.15,0,.25,1)}
.route:hover .route-beeld img{transform:scale(1.05)}
.route:hover{border-color:var(--goud);transform:translateY(-3px);box-shadow:0 20px 44px rgba(26,24,21,.09)}
.route h3{margin:14px 0 10px;font-size:var(--fs-h3)}
.route p{color:var(--muted);font-size:var(--fs-sm)}
.route .tekstlink{margin-top:20px;font-size:.92rem}
.route-num{font-family:var(--font-h);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--goud-diep);font-weight:600}

/* ---------- kolommen ---------- */
.kols{display:grid;gap:clamp(26px,3.4vw,40px)}
@media (min-width:760px){ .kols.k2{grid-template-columns:1fr 1fr} }
@media (min-width:860px){ .kols.k3{grid-template-columns:repeat(3,1fr)} }
@media (min-width:980px){ .kols.k4{grid-template-columns:repeat(4,1fr)} }
.kol h3{font-size:var(--fs-h3);margin-bottom:9px}
.kol p{color:var(--muted);font-size:var(--fs-sm)}
.s-donker .kol p{color:rgba(255,255,255,.6)}

/* asymmetrisch blok */
.asym{display:grid;gap:clamp(30px,4.6vw,64px);align-items:start}
@media (min-width:920px){
  .asym{grid-template-columns:.85fr 1.15fr}
  .asym--om{grid-template-columns:1.15fr .85fr}
}
.asym-kop{position:sticky;top:96px}
@media (max-width:919px){ .asym-kop{position:static} }

/* ---------- genummerde stappen ---------- */
.stappen{border-top:1px solid var(--hairline);margin-top:12px}
.s-donker .stappen{border-color:var(--hairline-donker)}
.stap{
  position:relative;padding:22px 0 22px 26px;border-bottom:1px solid var(--hairline);
}
.stap::before{
  content:"";position:absolute;left:0;top:calc(22px + .55em);
  width:8px;height:8px;border-radius:50%;background:var(--goud-diep);
}
.s-donker .stap::before,.strook .stap::before{background:var(--goud)}
.s-donker .stap{border-color:var(--hairline-donker)}
.stap h3{font-size:1.06rem;margin-bottom:5px}
.stap p{color:var(--muted);font-size:var(--fs-sm)}
.s-donker .stap p{color:rgba(255,255,255,.6)}

/* ---------- tabel ---------- */
.tabel{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tabel th,.tabel td{text-align:left;padding:15px 16px;border-bottom:1px solid var(--hairline);vertical-align:top}
.tabel th{
  font-family:var(--font-h);font-weight:600;font-size:var(--fs-cap);letter-spacing:.14em;
  text-transform:uppercase;color:var(--goud-donker);border-bottom-color:var(--goud-diep);
}
.tabel td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.tabel-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.s-donker .tabel th{color:var(--goud);border-bottom-color:var(--hairline-donker)}
.s-donker .tabel td{border-bottom-color:rgba(255,255,255,.1);color:rgba(255,255,255,.72)}
.s-donker .tabel td:first-child{color:var(--wit)}

/* ---------- pakketten ---------- */
.pakketten{display:grid;gap:18px}
@media (min-width:900px){ .pakketten{grid-template-columns:repeat(3,1fr)} }
.pak{
  border:1px solid var(--hairline);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);
  background:var(--wit);display:flex;flex-direction:column;
}
.pak--uit{border-color:var(--goud-diep);box-shadow:0 20px 50px rgba(168,129,63,.13)}
.pak-naam{font-family:var(--font-h);font-weight:600;font-size:var(--fs-h3)}
.pak-prijs{font-family:var(--font-h);font-size:1.75rem;font-weight:600;color:var(--goud-donker);margin:10px 0 2px;letter-spacing:-.02em}
.pak-prijs small{display:block;font-size:.76rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-licht);margin-top:4px}
.pak ul{list-style:none;margin:20px 0 0;display:flex;flex-direction:column;gap:11px}
.pak li{position:relative;padding-left:22px;font-size:var(--fs-sm);color:var(--grijs)}
.pak li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--goud)}
.pak-merk{font-size:var(--fs-cap);letter-spacing:.2em;text-transform:uppercase;color:var(--goud-diep);font-weight:600}

/* ---------- content-wall: zie het animatieblok onderaan ---------- */
.wall{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:700px){ .wall{grid-template-columns:repeat(3,1fr);gap:16px} }
@media (min-width:1000px){ .wall{grid-template-columns:repeat(5,1fr)} }

/* ---------- case ---------- */
.cases{display:grid;gap:20px}
@media (min-width:820px){ .cases{grid-template-columns:1fr 1fr} }
.case{border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;background:var(--wit)}
.case-in{padding:clamp(20px,2.6vw,30px)}
.case-in h3{font-size:var(--fs-h3);margin-bottom:8px}
.case-in p{color:var(--muted);font-size:var(--fs-sm)}
.case-cijfers{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:20px;padding-top:18px;border-top:1px solid var(--hairline)}
.case-cijfers div b{display:block;font-family:var(--font-h);font-size:1.4rem;color:var(--goud-donker);font-weight:600;letter-spacing:-.02em}
.case-cijfers div span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-licht)}

/* ---------- quote ---------- */
.quote{max-width:24ch;font-family:var(--font-h);font-size:clamp(1.4rem,2.9vw,2.1rem);line-height:1.28;font-weight:500}
.quote-bron{margin-top:20px;font-size:var(--fs-sm);color:var(--muted)}
.s-donker .quote-bron{color:rgba(255,255,255,.55)}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{
  list-style:none;cursor:pointer;padding-block:20px;padding-right:34px;position:relative;
  font-family:var(--font-h);font-weight:600;font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:4px;top:calc(50% - 5px);width:10px;height:10px;
  border-right:1.6px solid var(--goud-diep);border-bottom:1.6px solid var(--goud-diep);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{padding-bottom:22px;color:var(--muted);font-size:var(--fs-sm);max-width:70ch}

/* ---------- formulier ---------- */
.form{display:grid;gap:16px}
@media (min-width:700px){ .form .rij2{display:grid;grid-template-columns:1fr 1fr;gap:16px} }
.veld{display:flex;flex-direction:column;gap:7px}
.veld label{font-family:var(--font-h);font-weight:600;font-size:var(--fs-sm)}
.veld input,.veld select,.veld textarea{
  font-family:var(--font);font-size:1rem;color:var(--ink);background:var(--wit);
  border:1px solid var(--hairline);border-radius:var(--r-sm);padding:13px 14px;width:100%;
}
.veld textarea{min-height:130px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:2px solid var(--goud);outline-offset:1px;border-color:var(--goud)}
.form-note{font-size:var(--fs-sm);color:var(--muted)}

/* ---------- afsluitende band ---------- */
.slotband{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(70% 90% at 8% 10%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(135deg, var(--goud-licht) 0%, var(--goud) 45%, var(--goud-diep) 100%);
  /* vaste hoogte, zodat de band op elke pagina identiek is */
  min-height:440px;display:flex;align-items:center;padding-block:48px;
}
@media (max-width:859px){
  .slotband{min-height:0;padding-block:clamp(48px,9vw,76px)}
}
.slotband-beeld{position:absolute;inset:0 0 0 50%;z-index:-1}
.slotband-beeld img{width:100%;height:100%;object-fit:cover}
.slotband-beeld::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, var(--goud) 0%, rgba(212,173,109,.72) 34%, rgba(212,173,109,.18) 100%);
}
@media (max-width:859px){
  .slotband-beeld{inset:0;opacity:.28}
  .slotband-beeld::after{background:linear-gradient(180deg, rgba(230,207,166,.85), rgba(212,173,109,.8))}
}
.slotband-in{position:relative;z-index:1;width:100%}
.slotband-tekst{max-width:min(46ch,52%)}
@media (max-width:859px){ .slotband-tekst{max-width:none} }
.slotband h2{font-size:var(--fs-h2);color:#17120A;max-width:18ch}
.slotband p{color:rgba(23,18,10,.78);margin-top:14px;max-width:46ch}
.slotband .btn--goud{background:#17120A;color:var(--goud-licht)}
.slotband .btn--goud:hover{background:#2A2013}
.slotband .btn--lijn{border-color:rgba(23,18,10,.35);color:#17120A}
.slotband .btn--lijn:hover{border-color:#17120A;color:#17120A;background:rgba(255,255,255,.28)}

/* ---------- footer ---------- */
.voet{background:var(--ink-2);color:rgba(255,255,255,.62);padding-block:clamp(46px,6vw,74px) 30px;font-size:var(--fs-sm)}
.voet-grid{display:grid;gap:34px}
@media (min-width:780px){ .voet-grid{grid-template-columns:1.4fr 1fr 1fr 1fr} }
.voet img.merk{height:34px;width:auto;margin-bottom:18px}
.voet h4{color:var(--wit);font-size:var(--fs-cap);letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px;font-weight:600}
.voet ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.voet a{text-decoration:none;transition:color .16s}
.voet a:hover{color:var(--goud)}
.voet-onder{
  margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.8rem;color:rgba(255,255,255,.4);
}
.voet-onder a{display:inline-flex;align-items:center;gap:7px}
.voet-onder img{height:13px;width:auto;opacity:.65}

/* ---------- vaste actiebalk op mobiel ---------- */
.actiebalk{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:9px;
  padding:10px var(--marge) calc(10px + env(safe-area-inset-bottom));
  background:rgba(11,10,9,.97);border-top:1px solid var(--hairline-donker);
}
.actiebalk .btn{flex:1;justify-content:center;padding:13px 10px;font-size:.88rem}
body{padding-bottom:76px}
@media (min-width:1020px){ .actiebalk{display:none} body{padding-bottom:0} }

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}

/* =========================================================================
   Iconen: Lucide (lucide.dev), ISC-licentie. De set staat in icons/ en wordt
   door build.py als sprite in elke pagina gezet. Gebruik: ic("naam").
   ========================================================================= */
.sprite{display:none}
.ico{
  width:22px;height:22px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.kol .ico{width:27px;height:27px;color:var(--goud-diep);margin-bottom:15px}
.s-donker .kol .ico{color:var(--goud)}
.ico--route{width:26px;height:26px;color:var(--goud-diep);display:block;margin-bottom:14px}
.route-num{display:block}

/* =========================================================================
   iPhone-mockup in de stijl van de bekende Dynamic Island-pen, maar in het
   zwart-goud van FITS-LIST. Alles is CSS, er zit geen screenshot in.
   De maat hangt aan de font-size van .toestel, alles binnenin rekent in em.
   ========================================================================= */
.fonen{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(12px,2.2vw,28px);perspective:1600px;
}
.foonhouder{
  transform-style:preserve-3d;
  transition:transform .5s var(--ease-uit, cubic-bezier(.15,0,.25,1));
  will-change:transform;
}

.toestel{
  --fs:clamp(3.2px,.88vmin,5.0px);
  --pad:1.25em; --radius:6.666em; --rand:.4em; --h:36;
  font-size:var(--fs);
  position:relative;flex:none;
  height:80em;aspect-ratio:37/76;
  background:#000;border-radius:var(--radius);
  box-shadow:
    0 0 .1em .25em hsl(var(--h) 18% 20%),
    0 0 0 var(--rand) hsl(var(--h) 34% 72%),
    0 4em 8em rgba(0,0,0,.55);
  --draai:0deg;
  opacity:0;transform:scale(1.12) translateY(3em) rotate(var(--draai));
  transition:opacity 1.1s cubic-bezier(.15,0,.25,1), transform 1.1s cubic-bezier(.15,0,.25,1);
  transition-delay:var(--vertraag,0s);
}
.in .toestel, .toestel.in{opacity:1;transform:scale(1) translateY(0) rotate(var(--draai))}
.toestel::before{ /* zijkant van het frame */
  content:"";position:absolute;z-index:2;
  top:var(--radius);bottom:var(--radius);
  left:calc(var(--rand) * -1);right:calc(var(--rand) * -1);
  border:.5em solid hsl(var(--h) 16% 26%);border-left-width:0;border-right-width:0;
}
.toestel--mid{--fs:clamp(3.7px,1.02vmin,5.8px)}
@media (min-width:900px){ .toestel--mid{transform-origin:bottom} }

/* knoppen op de zijkant */
.kn{
  position:absolute;z-index:3;width:.34em;
  background:hsl(var(--h) 24% 86%);
  box-shadow:inset -.12em 0 .09em #000, inset 0 .2em .09em hsl(var(--h) 30% 92%),
             inset 0 -.2em .09em hsl(var(--h) 30% 92%);
}
.kn--stil{right:100%;top:14.5em;height:3em;border-radius:.2em 0 0 .2em}
.kn--v1{right:100%;top:19.5em;height:6em;border-radius:.2em 0 0 .2em}
.kn--v2{right:100%;top:27em;height:6em;border-radius:.2em 0 0 .2em}
.kn--aan{
  left:100%;top:23em;height:9.5em;border-radius:0 .2em .2em 0;
  box-shadow:inset .12em 0 .09em #000, inset 0 .2em .09em hsl(var(--h) 30% 92%),
             inset 0 -.2em .09em hsl(var(--h) 30% 92%);
}

/* scherm */
.scherm{
  position:absolute;inset:0;overflow:hidden;
  border:var(--pad) solid #000;border-radius:var(--radius);
  display:flex;flex-direction:column;
}
.scherm::after{ /* home-streepje */
  content:"";position:absolute;z-index:6;left:32%;right:32%;bottom:.9em;
  height:.45em;border-radius:.25em;background:rgba(255,255,255,.85);
}

/* wallpaper */
.wall-bg{position:absolute;inset:0;overflow:hidden;background:#0A0806}
.wall-bg::before{
  content:"";position:absolute;inset:-8%;
  background:
    radial-gradient(120% 90% at 50% 108%, rgba(0,0,0,.92), transparent 62%),
    radial-gradient(95% 65% at 112% 96%, hsl(30 95% 52% / .75), transparent 62%),
    radial-gradient(95% 65% at -12% 96%, hsl(42 95% 58% / .6), transparent 62%),
    radial-gradient(150% 95% at 50% 86%, hsl(40 90% 78% / .95), transparent 52%);
}
.wall-bg::after{ /* trage gloed die ronddraait */
  content:"";position:absolute;inset:-45%;
  background:conic-gradient(from 0turn, transparent 0 12%, hsl(38 100% 66% / .32) 26%, transparent 42%);
  mix-blend-mode:screen;animation:wall-draai 18s linear infinite;
}
@keyframes wall-draai{to{transform:rotate(1turn)}}

/* statusbalk */
.statusbalk{
  position:absolute;z-index:4;top:1.5em;left:2.6em;right:2.6em;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-h);font-weight:600;font-size:1.2em;color:#fff;
}
.statusbalk i{display:flex;gap:.4em;align-items:center;font-style:normal}
.statusbalk i b{display:block;width:.35em;border-radius:.2em;background:#fff}
.statusbalk i b:nth-child(1){height:.4em}
.statusbalk i b:nth-child(2){height:.65em}
.statusbalk i b:nth-child(3){height:.9em}
.statusbalk i s{
  display:block;width:1.6em;height:.8em;border:.1em solid rgba(255,255,255,.7);
  border-radius:.25em;position:relative;text-decoration:none;
}
.statusbalk i s::before{content:"";position:absolute;inset:.12em;width:65%;background:#fff;border-radius:.1em}

/* Dynamic Island */
.eiland{
  position:absolute;z-index:5;top:1.1em;left:50%;
  display:flex;align-items:center;overflow:hidden;
  background:#000;color:#fff;
  width:33%;height:3.4em;border-radius:2em;
  transform:translateX(-50%);
  animation:eiland-cyclus 11s cubic-bezier(.62,0,.2,1.1) infinite;
  filter:drop-shadow(0 .8em 1.6em rgba(0,0,0,.45));
}
@keyframes eiland-cyclus{
  0%,14%   {width:33%;height:3.4em;border-radius:2em}
  24%,66%  {width:84%;height:9em;border-radius:2.8em}
  76%,100% {width:33%;height:3.4em;border-radius:2em}
}
.eiland-in{
  display:flex;align-items:center;gap:1.1em;width:100%;height:100%;
  padding:1.4em;opacity:0;
  animation:eiland-inhoud 11s linear infinite;
}
@keyframes eiland-inhoud{0%,20%{opacity:0}28%,64%{opacity:1}70%,100%{opacity:0}}
.eiland-tegel{
  flex:none;height:100%;aspect-ratio:1;border-radius:32%;
  background:radial-gradient(60% 60% at 40% 30%, hsl(38 95% 70%), hsl(24 90% 42%));
  box-shadow:inset 0 0 0 .1em rgba(255,255,255,.18);
}
.eiland-tekst{display:flex;flex-direction:column;gap:.25em;min-width:0;flex:1}
.eiland-tekst b{font-family:var(--font-h);font-size:1.45em;font-weight:600;white-space:nowrap}
.eiland-tekst span{font-size:1.2em;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eiland-golf{display:flex;align-items:flex-end;gap:.28em;height:2.6em;flex:none}
.eiland-golf b{
  display:block;width:.34em;border-radius:.2em;background:var(--goud);
  animation:golf 1s ease-in-out infinite alternate;
}
.eiland-golf b:nth-child(1){height:40%;animation-delay:-.1s}
.eiland-golf b:nth-child(2){height:90%;animation-delay:-.4s}
.eiland-golf b:nth-child(3){height:60%;animation-delay:-.7s}
.eiland-golf b:nth-child(4){height:100%;animation-delay:-.25s}
@keyframes golf{from{transform:scaleY(.35)}to{transform:scaleY(1)}}

/* springboard */
.springboard{
  position:relative;z-index:2;flex:1;display:flex;flex-wrap:wrap;align-content:flex-start;
  gap:2.5em;padding:6.5em 2.6em 2.6em;
}
.widget{
  flex-basis:100%;border-radius:2.6em;padding:2em 2.2em;
  background:linear-gradient(190deg, rgba(20,16,12,.82), rgba(20,16,12,.58));
  border:.12em solid rgba(255,255,255,.14);
  display:flex;flex-direction:column;gap:.7em;color:#fff;
  backdrop-filter:blur(.6em);
}
.widget span{font-size:1.15em;letter-spacing:.14em;text-transform:uppercase;color:var(--goud)}
.widget b{font-family:var(--font-h);font-size:2.4em;font-weight:600;letter-spacing:-.02em}
.widget i{font-style:normal;font-size:1.2em;color:rgba(255,255,255,.6)}
.appjes{display:flex;flex-wrap:wrap;gap:2.5em;flex-basis:100%}
.appje{
  flex-basis:18%;flex-grow:1;aspect-ratio:1;border-radius:26%;
  background:linear-gradient(200deg, var(--a1,#fff), var(--a2, var(--a1,#fff)));
  opacity:0;transform:scale(1.7);
}
.in .appje{animation:appje-erin .85s cubic-bezier(.15,0,.25,1) forwards}
@keyframes appje-erin{to{opacity:1;transform:scale(1)}}
.appje:nth-child(1){--a1:#D4AD6D;--a2:#8A6930;transform-origin:130% 210%;animation-delay:.30s}
.appje:nth-child(2){--a1:#6490d2;--a2:#3f63a0;transform-origin:-30% 210%;animation-delay:.36s}
.appje:nth-child(3){--a1:#a7f88f;--a2:#41c144;transform-origin:180% 200%;animation-delay:.42s}
.appje:nth-child(4){--a1:#cecdd5;--a2:#89888d;transform-origin:80% 240%;animation-delay:.48s}
.appje:nth-child(5){--a1:#1ac5fb;--a2:#1d71f2;transform-origin:-30% 240%;animation-delay:.54s}
.appje:nth-child(6){--a1:#fe9b01;--a2:#f67324;transform-origin:-130% 200%;animation-delay:.60s}
.appje:nth-child(7){--a1:#cb65f0;--a2:#8628bb;transform-origin:180% 90%;animation-delay:.66s}
.appje:nth-child(8){--a1:#f2f0eb;--a2:#c9c4ba;transform-origin:80% 110%;animation-delay:.72s}

/* schermen met inhoud (deals, voucher, dashboard) */
.ui{
  position:relative;z-index:2;flex:1;display:flex;flex-direction:column;gap:1.6em;
  padding:6.8em 2.4em 3.4em;color:#fff;
}
.ui-kop{font-family:var(--font-h);font-weight:600;font-size:2.1em;letter-spacing:-.02em}
.ui-sub{font-size:1.15em;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ui-kaart{
  border-radius:1.8em;padding:1.4em;display:flex;flex-direction:column;gap:.9em;
  background:rgba(12,10,8,.55);border:.12em solid rgba(255,255,255,.12);
  backdrop-filter:blur(.5em);
  opacity:0;transform:translateY(1.6em);
}
.in .ui-kaart{animation:kaart-erin .7s cubic-bezier(.15,0,.25,1) forwards}
.ui-kaart:nth-of-type(1){animation-delay:.35s}
.ui-kaart:nth-of-type(2){animation-delay:.48s}
.ui-kaart:nth-of-type(3){animation-delay:.61s}
@keyframes kaart-erin{to{opacity:1;transform:translateY(0)}}
.ui-foto{
  height:7.5em;border-radius:1.2em;overflow:hidden;background:#221c14;
}
.ui-foto img{width:100%;height:100%;object-fit:cover}
.ui-regel{height:.55em;border-radius:.3em;background:rgba(255,255,255,.22)}
.ui-regel.w80{width:80%} .ui-regel.w55{width:55%} .ui-regel.w40{width:40%}
.ui-pil{
  align-self:flex-start;font-family:var(--font-h);font-weight:700;
  font-size:1.05em;letter-spacing:.12em;text-transform:uppercase;
  color:#12100E;background:var(--goud);border-radius:2em;padding:.35em 1em;
}
.ui-knop{
  margin-top:auto;text-align:center;font-family:var(--font-h);font-weight:600;
  font-size:1.35em;color:#12100E;background:var(--goud);border-radius:1.1em;padding:1.1em;
}

/* QR met scanlijn */
.qr{
  margin:.6em auto;width:60%;aspect-ratio:1;background:#fff;border-radius:1.4em;padding:1.4em;
  display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:.28em;
  position:relative;overflow:hidden;
}
.qr i{background:#12100E;border-radius:.18em}
.qr i.uit{background:transparent}
.qr::after{
  content:"";position:absolute;left:0;right:0;height:22%;
  background:linear-gradient(180deg, transparent, hsl(36 100% 55% / .55), transparent);
  animation:scan 2.6s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes scan{0%{top:-25%}50%{top:100%}100%{top:-25%}}

/* staafjes in het dashboard */
.staven{display:flex;align-items:flex-end;gap:.7em;height:9em;padding-top:.6em}
.staaf{
  flex:1;border-radius:.4em .4em .1em .1em;background:linear-gradient(180deg,var(--goud),var(--goud-donker));
  transform:scaleY(0);transform-origin:bottom;
}
.in .staaf{animation:staaf-op .9s cubic-bezier(.15,0,.25,1) forwards}
.staaf:nth-child(1){height:38%;animation-delay:.45s}
.staaf:nth-child(2){height:62%;animation-delay:.53s}
.staaf:nth-child(3){height:47%;animation-delay:.61s}
.staaf:nth-child(4){height:80%;animation-delay:.69s}
.staaf:nth-child(5){height:100%;animation-delay:.77s}
@keyframes staaf-op{to{transform:scaleY(1)}}

/* =========================================================================
   Animaties bij het scrollen. Alles start pas als het in beeld komt, en
   valt helemaal weg bij prefers-reduced-motion (onderaan dit bestand).
   ========================================================================= */
[data-rev]{opacity:0;transform:translateY(22px);transition:opacity .85s cubic-bezier(.15,0,.25,1), transform .85s cubic-bezier(.15,0,.25,1)}
[data-rev].in{opacity:1;transform:none}
[data-rev="traag"]{transition-duration:1.15s}
[data-rev].in{transition-delay:calc(var(--i,0) * 70ms)}

/* koppen regel voor regel omhoog */
.rijzen{display:block;overflow:hidden}
.rijzen > span{display:block;transform:translateY(105%);transition:transform 1s cubic-bezier(.15,0,.25,1)}
.in .rijzen > span, .rijzen.in > span{transform:translateY(0)}
.in .rijzen:nth-of-type(2) > span{transition-delay:.08s}

/* tellers */
.band-item b{font-variant-numeric:tabular-nums}

/* fotoblokken */
.foto{position:relative;overflow:hidden;border-radius:var(--r-lg);background:#1a1611;max-width:100%}
.foto img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.14);transition:transform 1.4s cubic-bezier(.15,0,.25,1)}
.in .foto img, .foto.in img{transform:scale(1)}
.foto--hoog{aspect-ratio:3/4}
.foto--breed{aspect-ratio:16/10}
.foto--vol{aspect-ratio:21/9}
.foto-bijschrift{
  position:absolute;left:0;right:0;bottom:0;padding:22px;
  background:linear-gradient(0deg, rgba(8,7,6,.92) 0%, rgba(8,7,6,.62) 50%, transparent);
  color:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:9px;
}
.foto-bijschrift b{font-family:var(--font-h);font-weight:600;font-size:1.06rem;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.foto-bijschrift span{
  font-family:var(--font-h);font-weight:600;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--goud);background:rgba(11,10,9,.82);border:1px solid var(--hairline-donker);
  border-radius:var(--r-sm);padding:5px 10px;
}

/* sfeerstrook over de volle breedte */
.strook{position:relative;overflow:hidden;background:#0B0A09}
.strook-beeld{position:absolute;inset:0}
.strook-beeld img{width:100%;height:100%;object-fit:cover;opacity:.38}
.strook::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(11,10,9,.95) 18%, rgba(11,10,9,.55) 55%, rgba(11,10,9,.85));
}
.strook > .wrap{position:relative;z-index:2}

/* contentwall met echte beelden */
.tegel{
  position:relative;aspect-ratio:9/16;border-radius:var(--r-md);overflow:hidden;
  background:#16120d;border:1px solid rgba(212,173,109,.18);max-width:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  opacity:0;transform:translateY(26px) scale(.97);
  transition:opacity .8s cubic-bezier(.15,0,.25,1), transform .8s cubic-bezier(.15,0,.25,1);
}
.in .tegel{opacity:1;transform:none}
.in .tegel:nth-child(1){transition-delay:0s}
.in .tegel:nth-child(2){transition-delay:.08s}
.in .tegel:nth-child(3){transition-delay:.16s}
.in .tegel:nth-child(4){transition-delay:.24s}
.in .tegel:nth-child(5){transition-delay:.32s}
.tegel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.15,0,.25,1)}
.tegel:hover img{transform:scale(1.06)}
.tegel-tekst{
  position:relative;z-index:2;padding:14px;
  background:linear-gradient(0deg, rgba(8,7,6,.88), transparent);
}
.tegel-tekst b{display:block;font-family:var(--font-h);font-size:.86rem;color:#fff;font-weight:600}
.tegel-tekst span{font-size:.72rem;color:var(--goud)}

/* case met echte foto */
.case-beeld{aspect-ratio:16/10;max-width:100%;overflow:hidden;background:#1a1611}
.case-beeld img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.15,0,.25,1)}
.case:hover .case-beeld img{transform:scale(1.05)}

/* categoriekaart met beeld */
.catkaart{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px;color:#fff;background:#16120d;isolation:isolate;
}
.catkaart img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.3s cubic-bezier(.15,0,.25,1)}
.catkaart::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg, rgba(8,7,6,.92) 12%, rgba(8,7,6,.45) 58%, rgba(8,7,6,.15));
}
.catkaart:hover img{transform:scale(1.05)}
.catkaart .ico{color:var(--goud);width:26px;height:26px;margin-bottom:12px}
.catkaart h3{font-size:var(--fs-h3);margin-bottom:8px;color:#fff}
.catkaart p{color:rgba(255,255,255,.72);font-size:var(--fs-sm)}
.catkaart .waarom{margin-top:10px;color:var(--goud);font-size:var(--fs-sm)}

@media (prefers-reduced-motion:reduce){
  [data-rev]{opacity:1 !important;transform:none !important}
  .rijzen > span{transform:none !important}
  .label::after{transform:scaleX(1) !important}
  .tegel{opacity:1 !important;transform:none !important}
  .foto img,.toestel{opacity:1 !important;transform:none !important}
  .appje,.ui-kaart{opacity:1 !important;transform:none !important;animation:none !important}
  .staaf{transform:scaleY(1) !important;animation:none !important}
  .eiland,.eiland-in,.wall-bg::after,.qr::after,.eiland-golf b{animation:none !important}
  .eiland{width:33%;height:3.4em}
  .eiland-in{opacity:0}
}

/* =========================================================================
   Interactieve blokken: tier-ladder, routekiezer, app-kiezer, drie stappen
   ========================================================================= */
.vinklijst{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0}
.vinklijst li{display:flex;align-items:flex-start;gap:11px;font-size:var(--fs-sm);color:var(--grijs);line-height:1.5}
.vinklijst .ico{width:20px;height:20px;flex:none;color:var(--goud-diep);margin-top:1px;stroke-width:2}
.s-donker .vinklijst li{color:rgba(255,255,255,.78)}
.s-donker .vinklijst .ico{color:var(--goud)}

/* ---------- panelen die wisselen ---------- */
[data-schakel] [data-paneel]{display:none}
[data-schakel] [data-paneel].is-actief{display:grid}
[data-schakel] [data-paneel].is-actief.speel{animation:paneel-erin .55s cubic-bezier(.15,0,.25,1)}
@keyframes paneel-erin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- tier-ladder (donkere sectie) ---------- */
.tiers{border:1px solid var(--hairline-donker);border-radius:var(--r-lg);overflow:hidden;background:rgba(255,255,255,.025)}
.tier-knoppen{display:grid;grid-template-columns:repeat(2,1fr);border-bottom:1px solid var(--hairline-donker)}
@media (min-width:760px){ .tier-knoppen{grid-template-columns:repeat(4,1fr)} }
.tier-knop{
  appearance:none;background:none;border:0;border-right:1px solid var(--hairline-donker);
  padding:26px 22px 24px;text-align:left;cursor:pointer;color:#fff;font-family:var(--font-h);
  display:flex;flex-direction:column;gap:14px;position:relative;
  transition:background .3s;
}
.tier-knop:nth-child(2n){border-right:0}
@media (min-width:760px){ .tier-knop:nth-child(2n){border-right:1px solid var(--hairline-donker)} .tier-knop:last-child{border-right:0} }
.tier-knop::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--goud);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.15,0,.25,1);
}
.tier-knop:hover{background:rgba(212,173,109,.06)}
.tier-knop.is-actief{background:rgba(212,173,109,.1)}
.tier-knop.is-actief::after{transform:scaleX(1)}
.tier-knop b{font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.tier-knop small{font-family:var(--font);font-size:.82rem;color:rgba(255,255,255,.55);margin-top:-8px}
.tier-trap{display:flex;align-items:flex-end;gap:4px;height:22px}
.tier-trap i{width:7px;border-radius:2px;background:rgba(255,255,255,.16);transition:background .3s}
.tier-trap i:nth-child(1){height:30%}.tier-trap i:nth-child(2){height:55%}.tier-trap i:nth-child(3){height:78%}.tier-trap i:nth-child(4){height:100%}
.tier-knop:nth-child(1) .tier-trap i:nth-child(-n+1),
.tier-knop:nth-child(2) .tier-trap i:nth-child(-n+2),
.tier-knop:nth-child(3) .tier-trap i:nth-child(-n+3),
.tier-knop:nth-child(4) .tier-trap i:nth-child(-n+4){background:var(--goud)}
.tier-paneel{grid-template-columns:1fr;gap:clamp(26px,4vw,54px);padding:clamp(26px,4vw,46px)}
@media (min-width:860px){ .tier-paneel{grid-template-columns:1.2fr .8fr} }
.tier-tekst h3{font-size:var(--fs-h3);color:#fff;max-width:26ch;margin-bottom:12px}
.tier-tekst p{color:rgba(255,255,255,.7);max-width:56ch;margin-bottom:22px}
.tier-meters{display:flex;flex-direction:column;gap:20px;justify-content:center}
.meter span{display:block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:8px;font-family:var(--font-h);font-weight:600}
.meter i{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.meter i::after{
  content:"";position:absolute;inset:0;width:calc(var(--v,0) * 100%);border-radius:4px;
  background:linear-gradient(90deg,var(--goud-donker),var(--goud));
  transform:scaleX(0);transform-origin:left;
}
.speel .meter i::after{animation:meter-vul 1s cubic-bezier(.15,0,.25,1) .2s forwards}
@keyframes meter-vul{to{transform:scaleX(1)}}

/* ---------- routekiezer (lichte sectie) ---------- */
.routes{border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--wit);box-shadow:0 30px 70px rgba(26,24,21,.08);overflow:hidden}
.route-knoppen{display:grid;grid-template-columns:repeat(2,1fr);border-bottom:1px solid var(--hairline)}
@media (min-width:760px){ .route-knoppen{grid-template-columns:repeat(4,1fr)} }
.route-knop{
  appearance:none;background:none;border:0;border-right:1px solid var(--hairline);
  padding:22px 20px;text-align:left;cursor:pointer;color:var(--ink);font-family:var(--font-h);
  display:flex;flex-direction:column;gap:4px;position:relative;transition:background .3s;
}
.route-knop:nth-child(2n){border-right:0}
@media (min-width:760px){ .route-knop:nth-child(2n){border-right:1px solid var(--hairline)} .route-knop:last-child{border-right:0} }
.route-knop::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--goud-diep);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.15,0,.25,1);
}
.route-knop:hover{background:var(--goud-zacht)}
.route-knop.is-actief{background:var(--goud-zacht)}
.route-knop.is-actief::after{transform:scaleX(1)}
.route-knop b{font-size:1.15rem;font-weight:600;letter-spacing:-.02em}
.route-knop small{font-family:var(--font);font-size:.82rem;color:var(--muted)}
.route-schaal{padding:26px clamp(22px,4vw,46px) 0}
.route-lijn{position:relative;height:2px;background:var(--hairline);border-radius:2px}
.route-lijn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--vul,12.5%);background:var(--goud);border-radius:2px;transition:width .6s cubic-bezier(.15,0,.25,1)}
.route-marker{
  position:absolute;top:50%;left:var(--vul,12.5%);width:16px;height:16px;border-radius:50%;
  background:var(--goud);border:3px solid var(--wit);box-shadow:0 0 0 2px var(--goud-diep);
  transform:translate(-50%,-50%);transition:left .6s cubic-bezier(.15,0,.25,1);
}
.routes[data-actief="listed"] .route-lijn{--vul:12.5%}
.routes[data-actief="boosted"] .route-lijn{--vul:37.5%}
.routes[data-actief="campaign"] .route-lijn{--vul:62.5%}
.routes[data-actief="ambassador"] .route-lijn{--vul:87.5%}
.route-schaal-tekst{display:grid;grid-template-columns:repeat(4,1fr);margin-top:12px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-licht);font-family:var(--font-h);font-weight:600}
.route-schaal-tekst span{text-align:center}
.route-inhoud{display:grid;gap:clamp(24px,4vw,50px);padding:clamp(26px,4vw,46px)}
@media (min-width:860px){ .route-inhoud{grid-template-columns:1.05fr .95fr} }
.route-paneel{grid-template-columns:1fr;align-content:start;gap:0}
.route-paneel h3{font-size:var(--fs-h3);max-width:24ch;margin-bottom:12px}
.route-paneel p{color:var(--muted);max-width:52ch;margin-bottom:22px}
.route-vergelijk{border:1px solid var(--hairline);border-radius:var(--r-md);padding:24px;background:var(--zand)}
.route-vergelijk-kop{font-family:var(--font-h);font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--goud-donker);margin-bottom:16px}
.vinklijst--niveau li{color:var(--muted-licht);transition:color .35s}
.vinklijst--niveau li .ico{color:var(--hairline);transition:color .35s,transform .35s}
.vinklijst--niveau li.is-in{color:var(--ink)}
.vinklijst--niveau li.is-in .ico{color:var(--goud-diep);transform:scale(1.12)}

/* ---------- app-kiezer (donkere sectie) ---------- */
.appkiezer{display:grid;gap:clamp(30px,5vw,70px);align-items:center}
@media (min-width:900px){ .appkiezer{grid-template-columns:1.05fr .95fr} }
.app-knoppen{display:flex;flex-direction:column;border-top:1px solid var(--hairline-donker)}
.app-knop{
  appearance:none;background:none;border:0;border-bottom:1px solid var(--hairline-donker);
  padding:18px 4px;display:flex;gap:16px;align-items:flex-start;text-align:left;cursor:pointer;color:#fff;
  position:relative;transition:padding-left .35s cubic-bezier(.15,0,.25,1);
}
.app-knop .ico{width:24px;height:24px;color:rgba(255,255,255,.45);flex:none;margin-top:2px;transition:color .3s}
.app-knop b{display:block;font-family:var(--font-h);font-weight:600;font-size:1.06rem;letter-spacing:-.01em}
.app-knop small{display:block;font-size:var(--fs-sm);color:rgba(255,255,255,.5);margin-top:4px;max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.15,0,.25,1),opacity .35s;opacity:0}
.app-knop::before{content:"";position:absolute;left:0;top:0;bottom:-1px;width:2px;background:var(--goud);transform:scaleY(0);transition:transform .4s cubic-bezier(.15,0,.25,1)}
.app-knop:hover .ico{color:var(--goud)}
.app-knop.is-actief{padding-left:18px}
.app-knop.is-actief::before{transform:scaleY(1)}
.app-knop.is-actief .ico{color:var(--goud)}
.app-knop.is-actief small{max-height:80px;opacity:1}
.app-toestel .toestel{--fs:clamp(4px,1.15vmin,6.4px)}
.app-scherm{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .4s}
.app-scherm.is-actief{opacity:1;pointer-events:auto}
[data-schakel] .app-scherm{display:flex}
[data-schakel] .app-scherm.is-actief{display:flex;animation:none}
.app-scherm:not(.speel) .ui-kaart,.app-scherm:not(.speel) .staaf,.app-scherm:not(.speel) .ui-voortgang i,.app-scherm:not(.speel) .ui-tier i::after{animation:none !important}
.ui-stats{display:flex;justify-content:space-between;gap:.6em}
.ui-stats div{display:flex;flex-direction:column;gap:.2em}
.ui-stats b{font-family:var(--font-h);font-size:1.9em;font-weight:600;letter-spacing:-.02em;color:var(--goud)}
.ui-stats span{font-size:1.05em;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.12em}
.ui-rij{display:flex;justify-content:space-between;gap:1em;font-size:1.2em;border-top:1px solid rgba(255,255,255,.1);padding-top:.7em}
.ui-rij span{color:rgba(255,255,255,.5)}
.ui-rij b{font-family:var(--font-h);font-weight:600;text-align:right}
.ui-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em}
.ui-thumbs img,.ui-thumbs i{aspect-ratio:9/13;border-radius:.9em;object-fit:cover;width:100%;display:block}
.ui-thumbs i{border:.15em dashed rgba(255,255,255,.3);background:rgba(255,255,255,.04)}
.ui-voortgang{height:.7em;border-radius:.4em;background:rgba(255,255,255,.12);overflow:hidden}
.ui-voortgang i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--goud-donker),var(--goud));transform:scaleX(0);transform-origin:left}
.speel .ui-voortgang i{animation:meter-vul 1.6s cubic-bezier(.15,0,.25,1) .4s forwards}
.ui-tier{display:grid;grid-template-columns:5.5em 1fr;align-items:center;gap:1em;font-size:1.15em;padding:.45em 0}
.ui-tier span{color:rgba(255,255,255,.6)}
.ui-tier.is-nu span{color:#fff;font-weight:600}
.ui-tier i{display:block;height:.6em;border-radius:.3em;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.ui-tier i::after{content:"";position:absolute;inset:0;width:calc(var(--v) * 100%);background:var(--goud);transform:scaleX(0);transform-origin:left}
.speel .ui-tier i::after{animation:meter-vul .9s cubic-bezier(.15,0,.25,1) .3s forwards}
.ui-tier.is-nu i::after{background:linear-gradient(90deg,var(--goud-donker),var(--goud))}

/* ---------- drie stappen als fotokaarten ---------- */
.driekaarten{display:grid;gap:18px}
@media (min-width:820px){ .driekaarten{grid-template-columns:repeat(3,1fr);gap:22px} }
.driekaart{
  position:relative;overflow:hidden;border-radius:var(--r-lg);min-height:380px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:28px;color:#fff;isolation:isolate;
  background:#16120d;
}

.driekaart img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.3s cubic-bezier(.15,0,.25,1)}
.driekaart::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg, rgba(8,7,6,.94) 8%, rgba(8,7,6,.5) 55%, rgba(8,7,6,.12))}
.driekaart:hover img{transform:scale(1.06)}
.driekaart .ico{width:26px;height:26px;color:var(--goud);margin-bottom:auto}
.driekaart h3{font-size:clamp(1.3rem,2vw,1.6rem);color:#fff;margin-bottom:10px;max-width:16ch}
.driekaart p{color:rgba(255,255,255,.74);font-size:var(--fs-sm);max-width:36ch}

/* lopende band */
.band-loop{overflow:hidden;border-block:1px solid var(--hairline-donker);padding-block:18px;margin-block:clamp(40px,6vw,70px) clamp(30px,4vw,46px);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.band-loop-in{display:flex;gap:0;width:max-content;animation:loop 38s linear infinite}
.band-loop-in span{
  font-family:var(--font-h);font-weight:600;font-size:clamp(1.1rem,2.2vw,1.6rem);letter-spacing:-.01em;
  color:rgba(255,255,255,.85);padding-inline:26px;display:inline-flex;align-items:center;gap:26px;white-space:nowrap;
}
.band-loop-in span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--goud)}
@keyframes loop{to{transform:translateX(-50%)}}
.band-loop:hover .band-loop-in{animation-play-state:paused}

/* glazen tegels op donker */
.glasgrid{display:grid;gap:14px}
@media (min-width:640px){ .glasgrid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .glasgrid{grid-template-columns:repeat(3,1fr);gap:18px} }
.glasgrid--4{ }
@media (min-width:980px){ .glasgrid--4{grid-template-columns:repeat(4,1fr)} }
.glas{
  position:relative;border-radius:var(--r-md);padding:26px 24px;
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);overflow:hidden;
  transition:transform .35s cubic-bezier(.15,0,.25,1), border-color .35s;
}
.glas::before{content:"";position:absolute;inset:-40% -40% auto auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle, rgba(212,173,109,.22), transparent 65%);opacity:0;transition:opacity .4s}
.glas:hover{transform:translateY(-4px);border-color:var(--hairline-donker)}
.glas:hover::before{opacity:1}
.glas-ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(212,173,109,.12);border:1px solid var(--hairline-donker);margin-bottom:18px}
.glas-ico .ico{width:22px;height:22px;color:var(--goud)}
.glas h3{font-size:1.08rem;color:#fff;margin-bottom:7px}
.glas p{color:rgba(255,255,255,.62);font-size:var(--fs-sm)}

@media (prefers-reduced-motion:reduce){
  .band-loop-in{animation:none}
  .meter i::after,.ui-voortgang i,.ui-tier i::after{transform:none !important;animation:none !important}
  [data-schakel] [data-paneel].is-actief.speel{animation:none}
  .driekaart:nth-child(2){transform:none}
}

/* ---------- fotoband over de volle breedte, beweegt traag van links naar rechts ---------- */
.fotoband{overflow:hidden;padding-block:clamp(10px,2vw,22px)}
.fotoband-in{display:flex;gap:clamp(12px,1.6vw,22px);width:max-content;animation:fotoband 75s linear infinite;will-change:transform}
.fotoband-in.is-slow{animation-duration:110s}
.fotoband:hover .fotoband-in{animation-play-state:paused}
.fotoband-in{align-items:flex-start}
.fotoband figure{
  height:clamp(230px,26vw,340px);aspect-ratio:3/4;border-radius:var(--r-md);overflow:hidden;
  background:#16120d;flex:none;margin:0;
}
.fotoband figure:nth-child(3n+2){aspect-ratio:1}
.fotoband figure:nth-child(4n+3){aspect-ratio:4/5}
.fotoband img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes fotoband{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){ .fotoband-in{animation:none} }

/* ---------- social proof in de hero ---------- */
.proof{display:flex;align-items:center;gap:16px;margin-top:34px;flex-wrap:wrap}
.proof-gezichten{display:flex;flex:none}
.proof-gezichten img{
  width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid #17140F;
  margin-left:-10px;box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.proof-gezichten img:first-child{margin-left:0}
.proof-tekst{display:flex;flex-direction:column;gap:3px}
.proof-sterren{display:flex;align-items:center;gap:2px}
.proof-sterren b{font-family:var(--font-h);font-weight:600;color:#fff;margin-left:8px;font-size:.95rem}
.ico--ster{width:15px;height:15px;color:var(--goud);fill:var(--goud);stroke-width:1}
.proof-tekst span{font-size:var(--fs-sm);color:rgba(255,255,255,.62)}

/* ---------- lichte variant van de tegels ---------- */
.glas--licht{
  background:var(--wit);border:1px solid var(--hairline);
  box-shadow:0 12px 30px rgba(26,24,21,.05);
}
.glas--licht::before{background:radial-gradient(circle, rgba(212,173,109,.3), transparent 65%)}
.glas--licht:hover{border-color:var(--goud-diep);box-shadow:0 20px 44px rgba(26,24,21,.09)}
.glas--licht .glas-ico{background:var(--goud-zacht);border-color:var(--hairline)}
.glas--licht .glas-ico .ico{color:var(--goud-donker)}
.glas--licht h3{color:var(--ink)}
.glas--licht p{color:var(--muted)}

/* fotokaarten op een lichte sectie */
.s-zand .driekaart,.s-wit .driekaart{box-shadow:0 20px 50px rgba(26,24,21,.12)}

/* de sfeerstrook netjes uitlijnen */
.strook .asym{align-items:center}

/* app-kiezer: minder loze ruimte eronder */
.app-toestel{align-self:center}
.app-note{margin-top:22px;font-size:var(--fs-sm);color:rgba(255,255,255,.45);max-width:46ch}

/* app-kiezer op een lichte sectie */
.s-zand .app-knoppen{border-top-color:var(--hairline)}
.s-zand .app-knop{border-bottom-color:var(--hairline);color:var(--ink)}
.s-zand .app-knop .ico{color:var(--muted-licht)}
.s-zand .app-knop small{color:var(--muted)}
.s-zand .app-knop::before{background:var(--goud-diep)}
.s-zand .app-knop:hover .ico,.s-zand .app-knop.is-actief .ico{color:var(--goud-donker)}
.s-zand .app-note{color:var(--muted-licht)}

/* ---------- minder blokkig: overlopende accenten ---------- */
section{position:relative}

/* een sectie die over de rand van de vorige heen komt */
.overlap{margin-top:clamp(-120px,-9vw,-60px);position:relative;z-index:3}

/* grote zachte gouden boog als achtergrondaccent */
.boog{position:relative;overflow:hidden}
.boog::before{
  content:"";position:absolute;pointer-events:none;
  width:min(760px,80vw);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(212,173,109,.22);
  right:-18%;top:-32%;
}
.boog::after{
  content:"";position:absolute;pointer-events:none;
  width:min(520px,60vw);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(212,173,109,.14);
  right:-6%;top:-14%;
}
.boog > .wrap{position:relative;z-index:2}

/* foto die tot de rand van het scherm doorloopt */
.bleed-links{margin-left:calc(var(--marge) * -1)}
@media (min-width:1220px){ .bleed-links{margin-left:calc((100vw - var(--maxw)) / -2 - var(--marge))} }

/* zachte scheiding tussen twee lichte secties */
.s-wit + .s-zand,.s-zand + .s-wit{position:relative}

/* accentkaart met gouden vlak */
.accent{
  background:linear-gradient(150deg,var(--goud) 0%, var(--goud-diep) 55%, var(--goud-donker) 100%);
  color:#17120A;border-radius:var(--r-lg);padding:clamp(26px,4vw,44px);
}
.accent h3{color:#17120A;font-size:var(--fs-h3);margin-bottom:10px}
.accent p{color:rgba(23,18,10,.78)}
.accent .label{background:rgba(23,18,10,.1);border-color:rgba(23,18,10,.18);color:#4A3616}

/* een sectie die het hoofdstuk van hierboven voortzet: wel lucht, geen dubbele marge */
section.vervolg{padding-top:clamp(34px,5vw,64px)}
.btn--donker{background:#17120A;color:var(--goud-licht)}
.btn--donker:hover{background:#241B0F;transform:translateY(-2px)}

/* ---------- sfeer in de hero: zacht beeld plus trage gloed ---------- */
.hero-sfeer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero-sfeer img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.16;filter:grayscale(.3) contrast(1.05);
  transform:scale(1.08);
  animation:sfeer-drift 34s ease-in-out infinite alternate;
}
@keyframes sfeer-drift{
  from{transform:scale(1.08) translate3d(0,0,0)}
  to{transform:scale(1.14) translate3d(-2.5%,-1.5%,0)}
}
.hero-sfeer::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 70% at 22% 42%, rgba(11,10,9,.92) 30%, rgba(11,10,9,.55) 62%, transparent 82%),
    linear-gradient(180deg, rgba(11,10,9,.72) 0%, rgba(11,10,9,.35) 38%, rgba(11,10,9,.88) 100%);
}
/* zachte gouden lichtvegen die traag bewegen */
.hero-sfeer i{
  position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;
  background:radial-gradient(circle, rgba(212,173,109,.5), transparent 70%);
}
.hero-sfeer i:nth-of-type(1){width:46vw;aspect-ratio:1;left:-12%;bottom:-24%;animation:veeg 26s ease-in-out infinite alternate}
.hero-sfeer i:nth-of-type(2){width:38vw;aspect-ratio:1;right:-8%;top:-18%;opacity:.35;animation:veeg 32s ease-in-out infinite alternate-reverse}
@keyframes veeg{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(6%,-8%,0) scale(1.18)}
}
/* dunne gouden lijnen als raster */
.hero-lijnen{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:
    linear-gradient(90deg, rgba(212,173,109,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,173,109,.06) 1px, transparent 1px);
  background-size:33.333% 100%, 11.111% 100%;
  mask-image:linear-gradient(180deg, transparent, #000 25%, #000 65%, transparent);
}
.hero > .wrap{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){
  .hero-sfeer img,.hero-sfeer i{animation:none}
}

/* ---------- downloadblok ---------- */
.download .fonen{justify-content:flex-start}
@media (max-width:859px){ .download .fonen{justify-content:center} }
.stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.store{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  padding:11px 20px 11px 16px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.04);
  transition:border-color .2s,background .2s,transform .2s;
}
.store:hover{border-color:var(--goud);background:rgba(212,173,109,.1);transform:translateY(-2px)}
.store-merk{width:24px;height:24px;fill:currentColor;flex:none}
.store span{display:flex;flex-direction:column;line-height:1.2}
.store small{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.store b{font-family:var(--font-h);font-weight:600;font-size:1.02rem}
.stippen{display:flex;gap:8px;justify-content:center;width:100%;margin-top:26px}
.stip{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .3s,width .3s}
.stip.is-actief{background:var(--goud);width:22px;border-radius:99px}

/* koppen netjes afbreken, geen losse woorden op een regel */
h1,h2,h3,.route h3,.driekaart h3,.glas h3{text-wrap:balance}
.lead,.route p,.glas p{text-wrap:pretty}

/* de routekeuze is een eigen moment onder de hero */
.routekeuze .splitsing{gap:22px}
@media (min-width:820px){ .routekeuze .splitsing{gap:26px} }
.routekeuze .route{box-shadow:0 18px 44px rgba(26,24,21,.07)}
.routekeuze .route-beeld{aspect-ratio:3/2}
.routekeuze .route h3{font-size:clamp(1.25rem,2vw,1.55rem);max-width:18ch}

/* ---------- stappen naast elkaar ---------- */
.stapgrid{display:grid;gap:0;border-top:1px solid var(--hairline)}
@media (min-width:700px){ .stapgrid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .stapgrid{grid-template-columns:repeat(3,1fr)} }
.stapkaart{
  position:relative;padding:26px 28px 30px 26px;
  border-bottom:1px solid var(--hairline);
}
@media (min-width:700px){
  .stapkaart{border-right:1px solid var(--hairline)}
  .stapkaart:nth-child(2n){border-right:0}
}
@media (min-width:1000px){
  .stapkaart{border-right:1px solid var(--hairline)}
  .stapkaart:nth-child(2n){border-right:1px solid var(--hairline)}
  .stapkaart:nth-child(3n){border-right:0}
}
.stapkaart::before{
  content:"";position:absolute;left:26px;top:0;width:32px;height:2px;background:var(--goud);
  transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.15,0,.25,1);
}
.stapkaart.in::before{transform:scaleX(1)}
.stapkaart h3{font-size:1.08rem;margin-bottom:8px;max-width:20ch}
.stapkaart p{color:var(--muted);font-size:var(--fs-sm);max-width:34ch}
.s-donker .stapgrid,.s-donker .stapkaart{border-color:var(--hairline-donker)}
.s-donker .stapkaart p{color:rgba(255,255,255,.62)}

/* de app-kiezer meer lucht op hoe het werkt */
#app .appkiezer{gap:clamp(34px,6vw,86px)}
@media (min-width:900px){ #app .appkiezer{grid-template-columns:1fr 1fr} }
#app .app-toestel .toestel{--fs:clamp(4.4px,1.35vmin,7px)}

/* ---------- iconenpatroon uit de huisstijl ---------- */
.s-goud{position:relative}
/* alleen op de eerste gouden sectie van een hoofdstuk, niet op het vervolg */
.s-goud:not(.vervolg)::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("beeld/patroon.svg") repeat 0 0 / 420px 420px;
  opacity:.14;
  mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.s-goud > *{position:relative;z-index:1}
.slotband::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("beeld/patroon.svg") repeat 0 0 / 380px 380px;
  opacity:.16;
}

/* de twee toestellen in het downloadblok staan schuin, zoals op de vorige site */
@media (min-width:860px){
  .download .foonhouder:nth-of-type(1) .toestel{--draai:-7deg}
  .download .foonhouder:nth-of-type(2) .toestel{--draai:5deg;margin-top:34px}
}