/* Unitbase — gedeelde stijl voor unitbase.nl en unitpass.nl.
   Vormtaal van de praatplaat: lichte grond, zware kop, witte vlakken,
   het beeldmerk alleen op licht. Beweging volgt KADER §3b. */

/* LETTERTYPES — op unitbase.nl zelf, niet bij Google (14-10-2026). Elke bezoeker zou anders zijn
   IP-adres aan de lettertypedienst van Google geven, en de privacyverklaring belooft dat
   er geen derde meekijkt. Archivo en IBM Plex Sans staan onder de SIL Open Font License 1.1, die
   zelf hosten toestaat mits de licentie meegaat: fonts/OFL-Archivo.txt en fonts/OFL-IBM-Plex-Sans.txt.
   De woff2-bestanden zijn ONGEWIJZIGD overgenomen van wat Google serveert (latin en latin-ext),
   met dezelfde unicode-range — geen eigen subset, zodat de gereserveerde naam "Plex" niet geraakt wordt. */
/* Archivo · latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo · latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans · latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans · latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans · latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans · latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans · latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans · latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --inkt:#0b1b2b;
  --primair:#1b6ef3;
  --primair-diep:#155ed6;
  --ok:#09724c;
  --oranje:#c2410c;
  --wattpass:#e0a800;
  --grond:#f2f4f7;
  --vlak:#ffffff;
  --rand:#e3e8ef;
  --gedempt:#5e6a7e;
  --wit-zacht:rgba(255,255,255,.66);
  --wit-rand:rgba(255,255,255,.14);

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --r-kaart:14px; --r-groot:20px; --r-pil:999px;
  --duur-druk:120ms; --duur-klein:160ms; --duur-paneel:220ms;
  --curve:cubic-bezier(.23,1,.32,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--grond); color:var(--inkt);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

.kolom{max-width:1180px; margin:0 auto; padding-inline:40px}
@media (max-width:760px){ .kolom{padding-inline:22px} }

.band{padding-block:118px}
.band.wit{background:var(--vlak)}
.band.inkt{background:var(--inkt); color:#fff}
.band.blauw{background:var(--primair); color:#fff}
.band.smal{padding-block:88px}
@media (max-width:760px){ .band{padding-block:68px} .band.smal{padding-block:56px} }

h1,h2,h3{font-family:var(--display); letter-spacing:-.03em; margin:0; line-height:1.07}
h1{font-size:clamp(2.35rem,4.5vw,3.85rem); font-weight:800; font-variation-settings:"wdth" 93}
h2{font-size:clamp(2.1rem,4.1vw,3.3rem); font-weight:800; font-variation-settings:"wdth" 95}
h3{font-size:22px; font-weight:700; letter-spacing:-.022em}

.oog{font-size:11.5px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--primair); margin:0 0 20px}
.band.inkt .oog{color:rgba(255,255,255,.80)}
.lead{font-size:19.5px; color:var(--gedempt); max-width:60ch; margin:26px 0 0; line-height:1.68}
.band.inkt .lead,.band.blauw .lead{color:var(--wit-zacht)}
.voetnoot{font-size:14px; color:var(--gedempt); margin:52px 0 0; max-width:76ch}
.band.inkt .voetnoot{color:rgba(255,255,255,.74)}
.band.blauw .oog,.band.blauw .voetnoot{color:#fff}

.knop{
  display:inline-flex; align-items:center; gap:9px;
  font-size:16px; font-weight:600; padding:15px 28px;
  border-radius:var(--r-pil); border:0; background:var(--primair); color:#fff;
  text-decoration:none; cursor:pointer;
  transition:transform var(--duur-druk) var(--curve), background-color var(--duur-klein) ease;
}
.knop:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .knop:hover{background:var(--primair-diep)} }
.knop.stil{background:transparent; color:var(--inkt); box-shadow:inset 0 0 0 1.5px var(--rand)}
@media (hover:hover) and (pointer:fine){ .knop.stil:hover{background:#e9edf3} }
.band.inkt .knop,.band.blauw .knop{background:#fff; color:var(--inkt)}
@media (hover:hover) and (pointer:fine){ .band.inkt .knop:hover,.band.blauw .knop:hover{background:#eaf0f9} }
.band.inkt .knop.stil,.band.blauw .knop.stil{background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px var(--wit-rand)}
@media (hover:hover) and (pointer:fine){ .band.inkt .knop.stil:hover,.band.blauw .knop.stil:hover{background:rgba(255,255,255,.08)} }
.knoppen{display:flex; flex-wrap:wrap; gap:14px; margin-top:42px}

/* balk */
.balk{position:sticky; top:0; z-index:20; background:rgba(242,244,247,.88); backdrop-filter:blur(12px); border-bottom:1px solid var(--rand)}
.balk .kolom{display:flex; align-items:center; gap:36px; padding-block:16px}
.logo{display:flex; align-items:center; gap:11px; text-decoration:none}
.logo svg{width:30px; height:auto; display:block}
.logo span{font-family:var(--display); font-weight:800; font-size:21px; letter-spacing:-.04em}
.logo .suffix{font-weight:500; color:var(--gedempt); letter-spacing:-.02em}
.balk nav{display:flex; align-items:center; gap:28px; font-size:15px; margin-left:auto}
.balk nav a:not(.knop){color:var(--gedempt); text-decoration:none; transition:color var(--duur-klein) ease}
@media (hover:hover) and (pointer:fine){ .balk nav a:not(.knop):hover{color:var(--inkt)} }
.balk .knop{padding:11px 21px; font-size:15px}
.balk .inlog{font-weight:600; color:var(--inkt)!important}
@media (max-width:1000px){ .balk nav a:not(.knop):not(.inlog){display:none} }
@media (max-width:600px){ .balk nav .inlog{display:none} }

/* hero */
.hero{padding-block:96px 84px}
.hero .kolom{display:grid; grid-template-columns:1.08fr .92fr; gap:52px; align-items:center}
@media (max-width:980px){ .hero{padding-block:70px 56px} .hero .kolom{grid-template-columns:1fr; gap:48px} }
.merkvlak{position:relative; display:flex; justify-content:center}
.merkvlak .raster{
  position:absolute; left:-4%; top:-14%; width:46%; aspect-ratio:1/.62;
  background-image:radial-gradient(var(--rand) 1.7px, transparent 1.7px);
  background-size:26px 26px; opacity:0;
  animation:rasterIn 320ms var(--curve) 40ms forwards;
}
@keyframes rasterIn{to{opacity:1}}

/* merk + lijntekening */
.merk{width:100%; max-width:420px; height:auto; display:block; position:relative}
.tekening{width:100%; max-width:520px; height:auto; display:block; position:relative; overflow:visible}
@media (max-width:980px){ .tekening{max-width:430px} .merkvlak{justify-content:flex-start} }
.dos{
  transform-box:fill-box; transform-origin:bottom center;
  opacity:0; transform:translateY(26px) scale(.97);
  animation:dosIn 280ms var(--curve) forwards;
  animation-delay:calc(140ms + var(--i) * 95ms);
}
@keyframes dosIn{ to{opacity:1; transform:translateY(0) scale(1)} }
.grond{stroke-dasharray:500; stroke-dashoffset:500; animation:lijnIn 420ms var(--curve) 60ms forwards}
@keyframes lijnIn{ to{stroke-dashoffset:0} }

/* vertrouwensbalk */
.vertrouwen{background:var(--vlak); border-block:1px solid var(--rand)}
.vertrouwen .kolom{display:grid; grid-template-columns:repeat(4,1fr); gap:34px; padding-block:30px}
@media (max-width:860px){ .vertrouwen .kolom{grid-template-columns:repeat(2,1fr); gap:24px} }
.vpunt{display:flex; gap:11px; align-items:flex-start; font-size:15px; line-height:1.5; color:var(--gedempt)}
.vpunt b{color:var(--inkt); font-weight:600}
.vpunt::before{content:""; flex:0 0 8px; height:8px; border-radius:2px; background:var(--primair); margin-top:8px}

/* kaarten */
.rij{display:grid; gap:20px; margin-top:52px; grid-template-columns:repeat(var(--n,3),1fr)}
@media (max-width:1040px){ .rij{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .rij{grid-template-columns:1fr} }
.kaart{
  background:var(--vlak); border:1px solid var(--rand); border-radius:var(--r-kaart);
  padding:30px 26px 28px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:12px;
  transition:border-color var(--duur-klein) ease, transform var(--duur-klein) var(--curve);
}
.band.wit .kaart{background:var(--grond); border-color:transparent}
/* Een kaart houdt zijn eigen vlak, dus ook zijn eigen tekstkleur —
   anders erft de kop het wit van een donkere band en valt hij weg. */
.band.inkt .kaart,.band.blauw .kaart{color:var(--inkt); border-color:transparent}
.kaart::before{
  content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--rand);
  transform:scaleX(0); transform-origin:left center; transition:transform 380ms var(--curve);
}
.rij.gezien .kaart::before{transform:scaleX(1)}
.rij.gezien .kaart:nth-child(2)::before{transition-delay:80ms}
.rij.gezien .kaart:nth-child(3)::before{transition-delay:160ms}
.rij.gezien .kaart:nth-child(4)::before{transition-delay:240ms}
.rij.gezien .kaart:nth-child(5)::before{transition-delay:320ms}
.kaart.k-blauw::before{background:var(--primair)}
.kaart.k-inkt::before{background:var(--inkt)}
.kaart.k-groen::before{background:var(--ok)}
.kaart.k-oranje::before{background:var(--oranje)}
.kaart.k-geel::before{background:var(--wattpass)}
.kaart p{margin:0; font-size:15.5px; color:var(--gedempt); line-height:1.6}
.kaart .sluit{margin-top:auto; padding-top:18px}
.kaart a.door{font-size:15px; font-weight:600; color:var(--primair); text-decoration:none; display:inline-flex; gap:7px; align-items:center}
@media (hover:hover) and (pointer:fine){
  .kaart:hover{border-color:#cfd7e3; transform:translateY(-2px)}
  .band.wit .kaart:hover{border-color:var(--rand)}
  .kaart a.door:hover{gap:11px; transition:gap var(--duur-klein) var(--curve)}
}

/* film */
.film{
  display:block; width:100%; height:auto; margin-top:48px;
  border-radius:var(--r-groot); border:1px solid var(--rand);
  background:var(--grond); box-shadow:0 26px 60px -40px rgba(11,27,43,.45);
}

/* beloftes */
.beloftes{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px}
@media (max-width:900px){ .beloftes{grid-template-columns:1fr} }
.belofte{background:var(--grond); border-radius:var(--r-groot); padding:36px 32px 34px}
.belofte .nr{font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.06em; color:var(--primair); display:block; margin-bottom:18px}
.belofte h3{margin-bottom:12px}
.belofte p{margin:0; font-size:16px; color:var(--gedempt); line-height:1.65}
.belofte.kern{background:var(--inkt); color:#fff}
.belofte.kern .nr{color:#8fb9ff}
.belofte.kern h3{color:#fff}
.belofte.kern p{color:rgba(255,255,255,.88)}

/* twee kolommen + paneel */
.twee{display:grid; grid-template-columns:1fr 1fr; gap:76px; align-items:center}
@media (max-width:940px){ .twee{grid-template-columns:1fr; gap:46px} }
.paneel{background:var(--vlak); border:1px solid var(--rand); border-radius:18px; box-shadow:0 24px 54px -34px rgba(11,27,43,.4); overflow:hidden}
.paneel-kop{padding:20px 26px; border-bottom:1px solid var(--rand); display:flex; align-items:center; justify-content:space-between; gap:16px}
.paneel-kop b{font-family:var(--display); font-size:17px; font-weight:700; letter-spacing:-.02em}
.teller{font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:-.02em; color:var(--primair); font-variant-numeric:tabular-nums}
.regel{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:15px 26px; border-bottom:1px solid #eef1f5; font-size:15.5px;
}
.paneel.gezien .regel{opacity:1; transform:none}
.paneel.gezien .regel:nth-child(2){transition-delay:90ms}
.paneel.gezien .regel:nth-child(3){transition-delay:180ms}
.paneel.gezien .regel:nth-child(4){transition-delay:270ms}
.paneel.gezien .regel:nth-child(5){transition-delay:360ms}
.paneel.gezien .regel:nth-child(6){transition-delay:450ms}
.paneel.gezien .regel:nth-child(7){transition-delay:540ms}
.paneel.gezien .regel:nth-child(8){transition-delay:630ms}
.regel:last-child{border-bottom:0}
.regel .lab{color:var(--gedempt)}
.regel .waarde{font-weight:600; font-variant-numeric:tabular-nums}
.vinkje,.signaal{display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:14.5px}
.vinkje{color:var(--ok)} .signaal{color:var(--oranje)}
.vinkje::before,.signaal::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.punten{list-style:none; margin:30px 0 0; padding:0; display:flex; flex-direction:column; gap:16px}
.punten li{display:flex; gap:13px; font-size:16.5px; line-height:1.6}
.punten li::before{content:""; flex:0 0 7px; height:7px; border-radius:50%; background:var(--primair); margin-top:11px}
.band.blauw .punten li::before{background:rgba(255,255,255,.6)}

/* uitgelicht blok */
.uitgelicht{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
@media (max-width:940px){ .uitgelicht{grid-template-columns:1fr; gap:40px} }
.pas{
  background:var(--vlak); border-radius:var(--r-groot); padding:30px 30px 26px;
  box-shadow:0 26px 60px -34px rgba(11,27,43,.5); color:var(--inkt); max-width:420px;
}
.pas-label{font-size:12.5px; color:var(--gedempt); margin:0 0 4px}
.pas-uitgever{font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-.02em; margin:0 0 22px}
.pas-adres{font-family:var(--display); font-weight:800; font-size:24px; letter-spacing:-.03em; line-height:1.15; margin:0 0 6px}
.pas-plaats{font-size:14.5px; color:var(--gedempt); margin:0 0 22px}
.pas-voet{border-top:1px solid var(--rand); padding-top:16px; font-size:13.5px; color:var(--gedempt)}

/* tarief */
.tarief{display:flex; flex-wrap:wrap; align-items:center; gap:36px; justify-content:space-between;
  background:var(--vlak); border:1px solid var(--rand); border-radius:18px; padding:34px 38px; margin-top:44px}
.prijs{font-family:var(--display); font-weight:800; font-size:44px; letter-spacing:-.04em; line-height:1}
.prijs small{font-family:var(--sans); font-size:15px; font-weight:500; color:var(--gedempt); letter-spacing:0; margin-left:10px}

/* slot */
.slot{text-align:center}
.slot .merk{max-width:150px; margin:0 auto 34px}
.slot .lead{margin-inline:auto}
.slot .knoppen{justify-content:center}
.slotmerk rect{opacity:0}
.slotmerk.gezien rect{opacity:1}

/* voet */
.voet{background:var(--inkt); color:#fff}
.voet .kolom{padding-block:58px 32px}
.voetgrid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px}
@media (max-width:860px){ .voetgrid{grid-template-columns:1fr 1fr; gap:34px} }
.voetgrid h4{font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); margin:0 0 16px}
.voetgrid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.voetgrid a{color:var(--wit-zacht); text-decoration:none; font-size:15px}
@media (hover:hover) and (pointer:fine){ .voetgrid a:hover{color:#fff} }
.voet-over{font-size:15px; color:var(--wit-zacht); line-height:1.65; margin:16px 0 0; max-width:36ch}
.voet-slot{margin-top:44px; padding-top:24px; border-top:1px solid var(--wit-rand); display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; font-size:13.5px; color:rgba(255,255,255,.42)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .knop,.kaart,.kaart a.door{transition:none}
  .knop:active,.kaart:hover{transform:none}
  .dos,.merkvlak .raster,.grond{animation:none; opacity:1; transform:none; stroke-dashoffset:0}
  .kaart::before{transition:none; transform:scaleX(1)}
  .regel{opacity:1; transform:none; transition:none}
  .slotmerk rect{opacity:1}
}

/* de toegangstekening */
.tekenvlak{margin:48px 0 0; background:#fff; border-radius:18px; padding:34px 34px 24px;
  box-shadow:0 30px 60px -40px rgba(0,0,0,.55)}
.tekenvlak img{display:block; width:100%; height:auto}
.tekenvlak figcaption{margin-top:20px; padding-top:18px; border-top:1px solid var(--rand);
  font-size:14.5px; color:var(--gedempt)}
@media (max-width:760px){ .tekenvlak{padding:18px 16px 14px; border-radius:14px} }

/* ankers niet onder de vaste balk laten vallen */
section[id], header[id]{scroll-margin-top:96px}
@media (max-width:760px){ section[id], header[id]{scroll-margin-top:78px} }