/* ==========================================================================
   Niek Vusonikos — websites voor dakdekkers
   Bouwplaats-oranje op bitumenzwart. Eén donkere wereld, geen light-variant:
   de bezoeker kijkt 's avonds op zijn telefoon in de bus.
   ========================================================================== */

@font-face{
  font-family:"Archivo"; src:url("fonts/archivo-var.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Barlow"; src:url("fonts/barlow-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Barlow"; src:url("fonts/barlow-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Barlow"; src:url("fonts/barlow-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

:root{
  /* Bitumen, zink, krijt, hesje */
  --bitumen:#100d0b;
  --bitumen-op:#171310;
  --lood:#1e1a16;
  --zink:#2b2621;
  --lijn:#332c26;
  --krijt:#f6f2ec;
  --stof:#b0a79d;
  --stof-dim:#8b8279;
  --hesje:#ff6a15;
  --hesje-licht:#ff8a45;
  --hesje-diep:#c74d09;

  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --tekst:"Barlow","Helvetica Neue",Helvetica,Arial,sans-serif;

  --marge:clamp(20px,5vw,40px);
  --breed:1180px;
  --smal:720px;
  --radius:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bitumen);
  color:var(--krijt);
  font-family:var(--tekst);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Browser-oppervlakken meeontwerpen */
::selection{background:var(--hesje); color:#160f09}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bitumen)}
::-webkit-scrollbar-thumb{background:var(--zink); border-radius:6px; border:3px solid var(--bitumen)}
::-webkit-scrollbar-thumb:hover{background:#413a33}
:focus-visible{outline:2px solid var(--hesje); outline-offset:3px; border-radius:2px}
:root{scrollbar-color:var(--zink) var(--bitumen); caret-color:var(--hesje)}

img{max-width:100%; height:auto; display:block}
a{color:inherit}

h1,h2,h3{font-family:var(--display); font-weight:700; letter-spacing:-0.03em; line-height:1.02; margin:0; text-wrap:balance}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}

.omhulsel{width:100%; max-width:var(--breed); margin:0 auto; padding-inline:var(--marge)}
.smal{max-width:var(--smal)}

/* ---------- Knoppen ---------- */
.knop{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 26px;
  font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:-0.01em;
  text-decoration:none; border:1.5px solid transparent; border-radius:var(--radius);
  cursor:pointer; transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.knop--vol{background:var(--hesje); color:#170f08; border-color:var(--hesje)}
.knop--vol:hover{background:var(--hesje-licht); border-color:var(--hesje-licht)}
.knop--rand{background:transparent; color:var(--krijt); border-color:#4a423a}
.knop--rand:hover{border-color:var(--krijt); background:rgba(246,242,236,.06)}
.knop:active{transform:translateY(1px)}
.knop--zwart{background:#160f09; color:#ffece0; border-color:#160f09}
.knop--zwart:hover{background:#241a12; border-color:#241a12}

.icoon{width:20px; height:20px; flex:none; stroke-width:1.75; stroke:currentColor; fill:none;
  stroke-linecap:round; stroke-linejoin:round}

/* ---------- Overslaan-link ---------- */
.overslaan{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--hesje); color:#170f08; padding:12px 20px;
  border-radius:0 0 var(--radius) 0; font-weight:600; text-decoration:none;
}
.overslaan:focus{left:0}

/* ---------- Kopbalk ---------- */
.kopbalk{
  position:sticky; top:0; z-index:50;
  background:rgba(16,13,11,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--lijn);
}
.kopbalk .rij{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:62px; padding-block:10px}
.hoofdnav{display:none}
.kopacties{display:flex; align-items:center; gap:18px}
.kopknop{height:44px; min-height:44px; padding:0 20px; font-size:15px}
/* Vanaf 1140px past het menu met vijf items naast logo, nummer en knop op één regel (7 okt, Zekerheid erbij). */
@media (min-width:1140px){
  .hoofdnav{display:flex; gap:30px}
  .hoofdnav a{
    display:inline-flex; align-items:center; min-height:44px; white-space:nowrap;
    color:var(--stof); text-decoration:none; font-size:16px; font-weight:500;
  }
  .hoofdnav a:hover{color:var(--krijt)}
  .hoofdnav a[aria-current="true"]{color:var(--hesje)}
}
@media (max-width:820px){ .kopknop{display:none} }
.merk{display:inline-flex; align-items:center; text-decoration:none}
.merk__logo{display:block; height:88px; width:auto}
@media (max-width:699px){ .merk__logo{height:64px} }
@media (max-width:520px){ .merk__logo{height:52px} }
.kopbalk .bellen{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  min-height:48px; padding-left:8px;
  font-weight:600; font-size:16px; color:var(--krijt);
  font-variant-numeric:tabular-nums;
}
.kopbalk .bellen:hover{color:var(--hesje-licht)}
.kopbalk .bellen .icoon{color:var(--hesje)}

/* ---------- Hero ---------- */
.hero{position:relative; padding:clamp(56px,10vw,104px) 0 0; text-align:center}
/* Draadbollen achter de hero. Vervaagt naar de randen zodat er geen harde cirkelrand
   ontstaat, en blijft ver onder de tekst in contrast — de kop moet koning blijven. */
.bol{
  --bolschaal:0.5; --bolcentrum:0.5; --bolrijk:0;
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
  -webkit-mask-image:radial-gradient(closest-side, #000 68%, transparent 100%);
  mask-image:radial-gradient(closest-side, #000 68%, transparent 100%);
}
.hero > .omhulsel{position:relative; z-index:1}

.hero h1{font-size:clamp(34px,5.8vw,64px); font-weight:800; max-width:22ch; margin-inline:auto}
.hero h1 .tweede{display:block}
.streep{
  width:min(180px,42vw); height:3px; margin:26px auto 0; background:var(--hesje);
  border-radius:2px;
}
@media (prefers-reduced-motion:no-preference){
  /* Rust is de volle streep; de animatie opent alleen de laatste helft. Draait hij niet, dan staat hij er gewoon. */
  .streep{animation:openen .65s cubic-bezier(.16,1,.3,1)}
  @keyframes openen{from{clip-path:inset(0 52% 0 0)} to{clip-path:inset(0 0 0 0)}}
}
.hero .subkop{
  margin:26px auto 0; max-width:52ch; font-size:clamp(18px,2.4vw,21px);
  color:var(--stof); line-height:1.5;
}
.acties{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px}
.onderknop{margin-top:16px; font-size:15px; color:var(--stof-dim)}

.portret{position:relative; margin-top:clamp(40px,6vw,64px)}
.portret figure{margin:0; position:relative}
.portret img,.portret .plek{
  width:100%; aspect-ratio:16/7; object-fit:cover; border-radius:var(--radius) var(--radius) 0 0;
}
.portret::after{
  content:""; position:absolute; inset:auto 0 0 0; height:45%;
  background:linear-gradient(to bottom,rgba(16,13,11,0),var(--bitumen));
  pointer-events:none;
}
/* Fotoplaatshouder — verdwijnt zodra er een echte foto is */
.plek{
  display:grid; place-content:center; gap:8px; text-align:center;
  background:
    repeating-linear-gradient(135deg,var(--lood) 0 14px,var(--bitumen-op) 14px 28px);
  border:1px dashed #4a423a; border-bottom:none;
  color:var(--stof-dim); font-size:14px; padding:20px;
}
.plek strong{font-family:var(--display); font-weight:700; color:var(--stof); font-size:16px}

/* ---------- Secties ---------- */
/* De kopbalk staat vast, dus een sprong naar een anker moet eronder uitkomen —
   anders verdwijnt het sectielabel achter de balk. */
main > section[id]{scroll-margin-top:124px}
@media (max-width:699px){ main > section[id]{scroll-margin-top:92px} }
/* Het oranje vlak heeft minder binnenruimte dan de andere banden, dus meer marge nodig. */
main > section.zeker{scroll-margin-top:176px}
@media (max-width:699px){ main > section.zeker{scroll-margin-top:132px} }

section{padding:clamp(84px,11vw,140px) 0}
.koplabel{
  margin-bottom:16px; font-family:var(--tekst); font-size:14px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--hesje);
}
.zeker .koplabel{color:#28190d}
.sectiekop{font-size:clamp(28px,4.6vw,44px); max-width:20ch}
/* Vraag en antwoord elk op een eigen regel (7 okt): breder dan de andere koppen, anders drie regels op desktop. */
.auto .sectiekop{max-width:none; text-wrap:pretty}
.auto .sectiekop .tweede{display:block}
.inleiding{margin-top:20px; max-width:60ch; color:var(--stof); font-size:18px}

/* Sectie 2 — waar het misgaat */
.misgaat{border-top:1px solid var(--lijn)}
.misgaat ul{margin-top:44px; display:grid; gap:0}
.misgaat li{
  display:grid; grid-template-columns:24px 1fr; gap:16px; align-items:start;
  padding:18px 0; border-bottom:1px solid var(--lijn); font-size:17px;
}
.misgaat li span{max-width:68ch}
.misgaat li:first-child{border-top:1px solid var(--lijn)}
.misgaat .icoon{color:var(--hesje-diep); margin-top:3px; width:22px; height:22px}
.verlies{
  margin-top:32px; font-family:var(--display); font-weight:700;
  font-size:clamp(20px,3vw,27px); line-height:1.25; max-width:22ch; letter-spacing:-0.02em;
}

/* Sectie 3 — wat je krijgt */
.website{background:var(--bitumen-op); border-top:1px solid var(--lijn); border-bottom:1px solid var(--lijn)}
.website ul{margin-top:48px; display:grid; gap:22px 48px; grid-template-columns:1fr}
.website li{display:grid; grid-template-columns:24px 1fr; gap:14px; align-items:start}
.website .icoon{color:var(--hesje); margin-top:3px; width:22px; height:22px}
.website li b{font-weight:600; color:var(--krijt); display:block; font-size:17px}
.website li > span{color:var(--krijt); font-size:16.5px}

/* Sectie 4 — de automatisering. Zelfde ritme als de website, tegenoverliggende band. */
.auto ul{margin-top:40px; display:grid; gap:32px 48px; grid-template-columns:1fr}
.auto li{padding-top:18px; border-top:1px solid var(--lijn)}
.auto .icoon{color:var(--hesje); margin-top:3px; width:22px; height:22px}
.auto li b{font-weight:600; color:var(--krijt); display:block; font-size:17px}
.auto li > span{display:block; color:var(--stof); font-size:16.5px}
.auto .soort{display:block; margin-bottom:4px; color:var(--hesje); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase}
.auto li b{margin-bottom:4px}
.auto .teller{display:none; margin-top:12px; color:var(--stof-dim); font-size:14px; font-variant-numeric:tabular-nums}
.auto li .bericht{
  display:block; margin-top:10px; padding-left:14px; max-width:62ch;
  border-left:1px solid var(--lijn); color:var(--stof-dim); font-size:16px;
}
.nuchter{
  margin-top:32px; padding-left:18px; border-left:1px solid var(--lijn);
  color:var(--stof); font-size:16.5px; max-width:64ch;
}
.sectieknop{margin-top:40px}

/* Hero — het zoekwoord staat in de h1, maar als rustige eerste regel, niet als schreeuw. */
.hero h1 .trefwoord{
  display:block; margin-bottom:.55em;
  font-size:max(15px,.34em); font-weight:700; letter-spacing:.02em; line-height:1.2;
  color:var(--hesje);
}

/* Het Dakrapport — hét product, dus de eerste band na de hero die echt iets laat zien. */
.dakrapport{background:var(--bitumen-op); border-top:1px solid var(--lijn); border-bottom:1px solid var(--lijn)}
/* De reis van de dakdekker in vier kolommen: stap, korte uitleg, telefoon, voordeel. De rijen lopen via
   subgrid gelijk, ook in de veegrij onder 1200px, waarin de volgende kolom uitsteekt. */
.reis{
  margin-top:40px; display:grid; grid-auto-flow:column; grid-auto-columns:min(82%,330px);
  grid-template-rows:auto auto 1fr; gap:0 20px; overflow-x:auto; scroll-snap-type:x mandatory;
  margin-inline:calc(var(--marge) * -1); padding-inline:var(--marge); scroll-padding-inline:var(--marge);
  padding-bottom:6px; scrollbar-width:none; list-style:none;
}
.reis::-webkit-scrollbar{display:none}
.reis > li{grid-row:span 3; display:grid; grid-template-rows:subgrid; scroll-snap-align:start; border-top:1px solid var(--lijn); padding-top:20px}
.reis h3{display:flex; gap:14px; align-items:baseline; font-size:19px; letter-spacing:-0.01em; line-height:1.2}
.reis .nr{color:var(--hesje); font-variant-numeric:tabular-nums}
.reis > li > p{margin-top:10px; color:var(--stof); font-size:16px; max-width:40ch}
.scherm{margin:28px 0 0; width:100%}
.scherm figcaption{margin-top:22px; display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; color:var(--stof); font-size:16px}
.scherm figcaption .icoon{color:var(--hesje); margin-top:3px; width:22px; height:22px}
.scherm figcaption b{display:block; font-weight:600; color:var(--krijt); font-size:17px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* De telefoon: WhatsApp zoals het er op een telefoon in donkere modus uitziet. Alles erin schaalt mee met
   de breedte van het scherm (cqw), zodat het op elk formaat hetzelfde gesprek toont. Het achtergrondpatroon
   is eigen tekenwerk (huisje, ladder, zon, pannen), niet het behang van WhatsApp. */
.tel{padding:7px; background:#1a1714; border:1px solid var(--zink); border-radius:32px; box-shadow:0 24px 48px -20px rgba(0,0,0,.7)}
.tel-scherm{container-type:inline-size; border-radius:25px; overflow:hidden; font-family:var(--tekst); line-height:1.3}
.tel-scherm.wa{aspect-ratio:9/19; display:flex; flex-direction:column; background:#0b141a; color:#e9edef}
.tel-scherm > *{font-size:4.5cqw}
.status{height:7.8cqw; flex:none; display:flex; align-items:center; justify-content:space-between; padding:0 6cqw; background:#1f2c34; color:#e9edef; font-weight:600; font-size:3.6cqw!important; font-variant-numeric:tabular-nums}
.st-ic{display:flex; gap:1.4cqw; align-items:center}
.st-ic svg{height:2.8cqw; width:auto; fill:currentColor}
.tel-scherm.web{aspect-ratio:9/19; display:flex; flex-direction:column; background:#100d0b}
.tel-scherm.web .status{background:#100d0b}
/* Scherm 3: het hele rapport als één lange schermafbeelding. Zonder JS staat de onderkant in beeld (de
   handtekening en de akkoordknop); gesprek.js laat het van boven naar beneden doorscrollen. */
.venster{flex:1; min-height:0; position:relative; overflow:hidden}
.rapport{position:absolute; left:0; right:0; bottom:0}
.rapport img{display:block; width:100%; height:auto}
.sig-dek{display:none; position:absolute; left:11.1%; width:77.8%; top:88%; height:4%; background:#fff}
.knop-druk{position:absolute; left:10.26%; width:79.49%; top:98.06%; height:1.4%; border-radius:2.6cqw; background:rgba(0,0,0,.25); opacity:0; pointer-events:none}

.wa-kop{flex:none; display:flex; align-items:center; gap:2.6cqw; padding:1.6cqw 3.4cqw 2.6cqw 2.4cqw; background:#1f2c34}
.wa-terug{width:6cqw; height:6cqw; fill:#e9edef; flex:none}
.wa-av{flex:none; width:9cqw; height:9cqw; border-radius:50%; background:#4a1d2e; color:#f15c8c; display:grid; place-items:center; font-weight:600; font-size:4.6cqw}
.wa-naam{flex:1; min-width:0; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wa-naam.typt::after{content:"aan het typen…"; display:block; color:#8696a0; font-weight:400; font-size:.72em}
.wa-ic{display:flex; gap:4.6cqw}
.wa-ic svg{width:5.4cqw; height:5.4cqw; fill:#aebac1}

.wa-chat{flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;
  background:#0b141a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='%23ffffff' stroke-opacity='.055' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 40 34 22l20 18M18 37v20h32V37M30 57V46h8v11'/%3E%3Cpath d='M98 12v40M114 12v40M98 22h16M98 32h16M98 42h16'/%3E%3Ccircle cx='140' cy='80' r='8'/%3E%3Cpath d='M140 64v-4M140 100v-4M124 80h-4M160 80h-4'/%3E%3Cpath d='M20 100h26l-4 10H24z M33 100V86'/%3E%3Cpath d='M70 92c-8 0-12-6-8-12 2-6 10-6 12-2 4-6 14-4 14 4 6 0 8 10 0 10z'/%3E%3Cpath d='M60 130c0-6 6-12 6-12s6 6 6 12a6 6 0 0 1-12 0z'/%3E%3Cpath d='M100 120l24 0M104 126l16 0M108 132l8 0'/%3E%3Cpath d='M136 136l6 6 10-12'/%3E%3C/svg%3E") 0 0 / 42cqw 42cqw}
.wa-chat.boven{justify-content:flex-start}
.wa-stroom{display:flex; flex-direction:column; gap:1cqw; padding:2.4cqw 4cqw 2cqw}
.wa-meta{align-self:center; max-width:88%; margin:1cqw 0 2cqw; padding:1.8cqw 3cqw; border-radius:2cqw; background:#182229; color:#58bfc6; text-align:center; font-size:.8em; line-height:1.35}
.dag{align-self:center; margin:1cqw 0 1.6cqw; padding:1.2cqw 3cqw; border-radius:2cqw; background:#182229; color:#8696a0; font-size:.78em}

.bel{position:relative; max-width:86%; padding:1.6cqw 2.4cqw 1.8cqw; border-radius:2.2cqw; background:#202c33; align-self:flex-start; overflow-wrap:break-word; box-shadow:0 1px .5px rgba(11,20,26,.13)}
.bel.uit{background:#005c4b; align-self:flex-end}
.bel.kop{margin-top:1.2cqw}
.bel.in.kop{border-top-left-radius:0}
.bel.uit.kop{border-top-right-radius:0}
.bel.kop::before{content:""; position:absolute; top:0; width:2.4cqw; height:3.2cqw; background:inherit}
.bel.in.kop::before{left:-2.3cqw; clip-path:polygon(0 0,100% 0,100% 100%)}
.bel.uit.kop::before{right:-2.3cqw; clip-path:polygon(0 0,100% 0,0 100%)}
.bel .tijd{white-space:nowrap; float:right; display:inline-flex; align-items:center; gap:.8cqw; margin:1.8cqw 0 -1cqw 2.6cqw; color:rgba(233,237,239,.6); font-size:.68em; font-variant-numeric:tabular-nums}
.bel .ticks{width:3.6cqw; height:auto; fill:#53bdeb}
.bel .g{color:#25d366; font-weight:600}
.bel .meer{color:#25d366; font-weight:600}
.bel .link{color:#53bdeb; text-decoration:underline; overflow-wrap:anywhere}

.spraak{display:grid; grid-template-columns:auto auto 1fr; grid-template-rows:auto auto; align-items:center; gap:0 2.4cqw; width:72%; padding:2cqw 2.4cqw 1.4cqw}
.sp-foto{grid-row:1 / 3; position:relative; width:11cqw; height:11cqw}
.sp-foto img{width:100%; height:100%; border-radius:50%; display:block}
.sp-foto svg{position:absolute; right:-1cqw; bottom:-.6cqw; width:4.4cqw; height:4.4cqw; fill:#25d366}
.sp-play{grid-row:1; width:0; height:0; border-style:solid; border-width:2cqw 0 2cqw 3.4cqw; border-color:transparent transparent transparent #e9edef}
.sp-golf{grid-row:1; position:relative; display:flex; align-items:center; gap:.45cqw; height:6cqw}
.sp-golf i{flex:1; min-height:12%; border-radius:1cqw; background:rgba(233,237,239,.55)}
.sp-golf b{position:absolute; left:-.6cqw; top:50%; width:3cqw; height:3cqw; margin-top:-1.5cqw; border-radius:50%; background:#53bdeb}
.sp-duur{grid-row:2; grid-column:2 / 3; color:rgba(233,237,239,.6); font-size:.68em; font-variant-numeric:tabular-nums}
.spraak .tijd{grid-row:2; grid-column:3; justify-self:end; float:none; margin:0}

.bel.foto{padding:.8cqw; width:64%}
.bel.foto img{display:block; width:100%; height:auto; border-radius:1.6cqw}
.bel.foto .tijd{position:absolute; right:2.4cqw; bottom:1.8cqw; margin:0; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.8)}

.pdf{padding:.8cqw .8cqw 1.4cqw; width:78%}
.pdf-blok{display:flex; align-items:center; gap:2.6cqw; padding:2.4cqw; border-radius:1.6cqw; background:rgba(0,0,0,.2)}
.pdf-blok > span:last-child{min-width:0}
.pdf-ic{flex:none; width:8.4cqw; height:10.4cqw; border-radius:1cqw; background:#e5534b; color:#fff; display:grid; place-items:center; font-weight:700; font-size:.56em}
.pdf b{display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pdf small{display:block; color:#8696a0; font-size:.78em}
.pdf .tijd{margin-right:1.6cqw}

/* Afspelen (gesprek.js): berichten die nog moeten komen, en de typpuntjes van de bot. */
.nog{display:none!important}
.typen{display:flex; gap:1.1cqw; padding:3cqw 3.6cqw}
.typen i{width:1.8cqw; height:1.8cqw; border-radius:50%; background:#8696a0; animation:typstip 1.2s ease-in-out infinite}
.typen i:nth-child(2){animation-delay:.15s}
.typen i:nth-child(3){animation-delay:.3s}
@keyframes typstip{0%,60%,100%{opacity:.35; transform:none} 30%{opacity:1; transform:translateY(-.8cqw)}}
.opnieuw{padding:10px 18px; min-height:44px; border:1px solid var(--zink); border-radius:999px; background:transparent; color:var(--krijt); font:600 15px/1 var(--tekst); cursor:pointer; transition:border-color .2s ease}
.opnieuw:not([hidden]){display:inline-flex; align-items:center; gap:8px}
.opnieuw::before{content:"↻"; color:var(--hesje); font-size:17px}
/* Na het laatste gesprek: rustig "Scroll verder" naast "Bekijk opnieuw" (6 okt). Komt zacht binnen, het pijltje
   zakt drie keer een paar pixels en staat dan stil. Geen knop, gewoon een tekstlink in de kleur van de lopende tekst.
   De rij plakt aan de onderkant van het scherm (boven de belbalk) zolang je nog naar de telefoons kijkt, en zakt
   op zijn eigen plek zodra je verder scrolt: anders valt hij op mobiel net buiten beeld. */
.naafloop{
  position:sticky; bottom:0; z-index:5; margin-top:16px;
  margin-inline:calc(var(--marge) * -1); padding:14px var(--marge) 12px;
  background:linear-gradient(to bottom, rgba(23,19,16,0), var(--bitumen-op) 38%);
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px;
}
@media (max-width:699px){ .naafloop{bottom:calc(73px + env(safe-area-inset-bottom))} }
.naafloop:not(:has(> :not([hidden]))){display:none}
.verder:not([hidden]){display:inline-flex}
.verder{align-items:center; gap:8px; min-height:44px; color:var(--stof); font:600 15px/1 var(--tekst); text-decoration:none}
.verder .icoon{width:18px; height:18px; color:var(--hesje)}
@media (hover:hover) and (pointer:fine){.verder:hover{color:var(--krijt)}}
@media (prefers-reduced-motion:no-preference){
  .verder:not([hidden]){animation:verderIn .4s cubic-bezier(0.23,1,0.32,1) .25s both}
  .verder:not([hidden]) .icoon{animation:verderZak 1.6s cubic-bezier(0.37,0,0.63,1) .8s 3}
}
@keyframes verderIn{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
@keyframes verderZak{0%,100%{transform:none} 50%{transform:translateY(3px)}}
@media (hover:hover) and (pointer:fine){.opnieuw:hover{border-color:var(--hesje)}}
.wa-invoer{flex:none; display:flex; align-items:center; gap:1.6cqw; padding:1.6cqw 2.4cqw 3cqw; background:#0b141a}
.wa-veld{flex:1; display:flex; align-items:center; gap:2.6cqw; padding:2.2cqw 3.4cqw; border-radius:6cqw; background:#1f2c34; color:#8696a0}
.wa-veld span{flex:1}
.wa-veld svg{width:5.4cqw; height:5.4cqw; fill:currentColor}
.wa-mic{flex:none; width:10.4cqw; height:10.4cqw; border-radius:50%; background:#00a884; display:grid; place-items:center}
.wa-mic svg{width:5.4cqw; height:5.4cqw; fill:#111b21}
@media (min-width:1200px){
  .reis{grid-auto-flow:row; grid-template-columns:repeat(4,1fr); gap:0 32px; overflow:visible; margin-inline:0; padding:0}
  .reis .tel{transition:opacity .3s ease}
  .reis.speelt > li:not(.actief) .tel{opacity:.45}
}
.voorbeeldnoot{margin-top:32px; font-size:15px; color:var(--stof-dim); max-width:64ch}
.dakrapport .sectieknop{margin-top:32px}
.auto .nuchter a{color:var(--hesje-licht); text-underline-offset:3px; font-weight:600; white-space:nowrap}
.auto .nuchter a:hover{color:var(--krijt)}

/* Vragen — native details, dus toetsenbord en schermlezer werken zonder JS. */
.vragen{border-top:1px solid var(--lijn)}
.vragenlijst{margin-top:40px; max-width:820px}
.vragenlijst details{border-top:1px solid var(--lijn)}
.vragenlijst details:last-child{border-bottom:1px solid var(--lijn)}
.vragenlijst summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:64px; padding:16px 0;
  font-family:var(--display); font-weight:700; font-size:clamp(18px,2.2vw,20px); letter-spacing:-0.01em;
}
.vragenlijst summary::-webkit-details-marker{display:none}
.vragenlijst summary:hover{color:var(--hesje-licht)}
.vragenlijst summary .icoon{color:var(--hesje); transition:transform .2s cubic-bezier(.16,1,.3,1)}
.vragenlijst details[open] summary .icoon{transform:rotate(45deg)}
.vragenlijst details p{padding:0 44px 22px 0; color:var(--stof); font-size:17px; max-width:64ch}

/* Sectie 4 — de prijs. Hier gaat het oranje aan. */
.zeker{background:var(--hesje); color:#170f08; padding:clamp(56px,8vw,88px) 0}
.zekerraster{display:grid; gap:36px 56px; grid-template-columns:1fr; align-items:start}
.zeker .kolom > *:first-child{margin-top:0}
.zeker .bedrag{
  font-family:var(--display); font-weight:800; letter-spacing:-0.045em;
  font-size:clamp(52px,12vw,120px); line-height:.92;
}
.zeker .bedrag--woorden{font-size:clamp(34px,6.2vw,64px); line-height:1.0; max-width:14ch}
.zeker .bedrag--woorden .tweede{display:block}
.betaling{margin-top:32px; font-size:17px; color:#28190d; max-width:48ch}
.betaling b{font-weight:600}
.beloftes{margin-top:32px; display:grid; gap:18px; grid-template-columns:1fr}
.belofte{border-top:2px solid #170f08; padding-top:16px}
.belofte h3{font-size:19px; color:#170f08}
.belofte p{margin-top:8px; font-size:16.5px; color:#301d10; max-width:44ch}
.later{margin-top:32px; font-size:16.5px; color:#301d10; max-width:52ch}
.later b{font-weight:600; color:#170f08}
.zeker .knop--zwart{margin-top:32px}

/* Sectie 5 — wie ik ben */
.overmij{background:var(--bitumen-op); border-top:1px solid var(--lijn); border-bottom:1px solid var(--lijn)}
.overmij p{margin-top:20px; color:var(--stof); font-size:17.5px; max-width:52ch}
.overmijraster{display:grid; gap:40px; grid-template-columns:1fr; align-items:start}
.overmijraster > div > .koplabel{margin-top:0; color:var(--hesje); font-size:14px}
/* De foto heeft dezelfde ondergrond als de band, dus geen kader, geen radius:
   hij loopt in de sectie over in plaats van erop te liggen. */
/* Eén kolom: de foto mag de band niet overnemen op een tablet. */
.overmijfoto{margin:0; max-width:460px}
.overmijfoto img{display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover}
.stappen{margin-top:40px; counter-reset:stap; display:grid; gap:0; max-width:880px}
.stappen li{
  counter-increment:stap; display:grid; grid-template-columns:34px 1fr; gap:0 16px;
  padding:20px 0; border-top:1px solid var(--lijn); align-items:start;
}
.stappen li:last-child{border-bottom:1px solid var(--lijn)}
.stappen li::before{
  content:counter(stap);
  font-family:var(--display); font-weight:700; font-size:19px; color:var(--hesje);
  letter-spacing:0; padding-top:3px; font-variant-numeric:tabular-nums;
}
.stappen li::before{grid-column:1; grid-row:1}
.stappen b{grid-column:2; grid-row:1; font-weight:600; font-size:17px; line-height:1.4}
.stappen > li > span{grid-column:2; grid-row:2; display:block; margin-top:5px; color:var(--stof); font-size:16.5px; max-width:68ch}
.stappen b .todo{font-weight:600}
.mijnnummer{
  margin-top:36px; display:inline-flex; align-items:center; gap:12px; min-height:48px;
  font-family:var(--display); font-weight:700; font-size:clamp(22px,4vw,30px);
  letter-spacing:-0.02em; text-decoration:none; color:var(--krijt);
  font-variant-numeric:tabular-nums;
}
.mijnnummer .icoon{width:26px; height:26px; color:var(--hesje)}
.mijnnummer:hover{color:var(--hesje-licht)}

/* Sectie 6 — formulier */
.aanvraag{background:var(--bitumen)}
.aanvraag .raster{display:grid; gap:44px; grid-template-columns:1fr}
.aanvraag .raster > *{min-width:0}
form{margin-top:32px; display:grid; gap:18px}
label{display:block; font-size:15px; font-weight:600; color:var(--stof); margin-bottom:7px}
label .optioneel{font-weight:400; color:var(--stof-dim)}
input,select{
  width:100%; min-height:54px; padding:0 16px;
  background:var(--bitumen); color:var(--krijt);
  border:1px solid var(--lijn); border-radius:var(--radius);
  font-family:var(--tekst); font-size:17px;
  transition:border-color .16s ease, background .16s ease;
}
input::placeholder{color:var(--stof-dim)}  /* 5.07:1 op bitumen */
input:hover,select:hover{border-color:#463e37}
input:focus,select:focus{border-color:var(--hesje); background:var(--lood)}
input:focus:not(:focus-visible),select:focus:not(:focus-visible){outline:none}
select{
  appearance:none; cursor:pointer; padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a15' stroke-width='1.75'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:20px;
}
input:user-invalid{border-color:#e0552b}
.fout{display:none; margin-top:7px; font-size:14.5px; color:#ff9068}
input:user-invalid ~ .fout{display:block}
form .knop{width:100%; margin-top:6px}
.naformulier{font-size:15px; color:var(--stof-dim)}
.liever{
  border:1px solid var(--lijn); border-radius:var(--radius); padding:26px 26px 28px;
  background:var(--bitumen); align-self:start;
}
.liever .werkgebied{margin-top:16px; font-size:15px; color:var(--stof-dim)}
.liever h3{font-size:19px}
.liever p{margin-top:10px; color:var(--stof); font-size:16.5px}
.liever .knop{margin-top:18px; width:100%}
.liever .knop + .knop{margin-top:12px}
.wa{background:#1f2c22; border-color:#2f4436; color:#dcf3e4}
.wa:hover{background:#26382b; border-color:#3d5a47}
.wa .icoon{color:#4ade80}

/* Footer */
footer{border-top:1px solid var(--lijn); padding:44px 0 calc(44px + env(safe-area-inset-bottom))}
.voet{display:grid; gap:26px}
.voet__logo{display:block; height:56px; width:auto; margin-bottom:18px}
.voet .naam{font-family:var(--display); font-weight:700; font-size:17px; max-width:40ch}
.voet p,.voet a{color:var(--stof); font-size:15.5px; text-decoration:none}
.voet a:hover{color:var(--krijt); text-decoration:underline; text-underline-offset:3px}
.voetlinks{display:flex; flex-wrap:wrap; gap:4px 20px}
.voetlinks a,.voettel{display:inline-flex; align-items:center; min-height:44px}

/* Vaste balk op mobiel */
.balk{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:none; gap:10px; padding:10px var(--marge) calc(10px + env(safe-area-inset-bottom));
  background:rgba(16,13,11,.94); backdrop-filter:blur(10px); border-top:1px solid var(--lijn);
}
.balk .knop{flex:1; min-height:52px; font-size:16px; padding:0 14px}

/* Nog in te vullen — mag nooit ongemerkt live */
.todo{
  background:transparent; color:var(--hesje-licht); border:1px dashed var(--hesje-diep);
  border-radius:3px; padding:0 6px; font-size:.9em; font-weight:600; font-family:var(--tekst);
}
.zeker .todo{color:#3a2413; border-color:#8a5a2a}

/* ---------- Breekpunten ---------- */
/* De hero lijnt links uit op dezelfde marge als alle secties eronder. Zweefde hij
   gecentreerd, dan sloot hij niet aan op "Het probleem" en de koppen daarna. */
@media (min-width:700px){
  /* Net als op mobiel vult de hero het scherm onder de kopbalk (109px), zodat er geen randje van
     Het Dakrapport onder de vouw uitsteekt (7 okt, gezien op een venster van 1420x705). */
  .hero{text-align:left; min-height:calc(100svh - 109px); display:flex; flex-direction:column; justify-content:center}
  .hero h1{margin-inline:0}
  .hero .subkop{margin-inline:0}
  .hero .streep{margin-inline:0}
  .hero .acties{justify-content:flex-start}
}

/* Vanaf 1100px is er rechts ruimte voor de bol naast de tekst. Zijn middelpunt ligt
   iets buiten het canvas, zodat hij aan de rechterrand afloopt in plaats van als een
   klein rond balletje in de hoek te staan. */
@media (min-width:1340px){
  /* Op desktop is de bol geen achtergrondje maar het bewijsstuk: drie lagen, dichtere
     graaf, oplichtende knooppunten (--bolrijk). Hij krijgt meer breedte en meer hoogte,
     en het masker houdt hem gedempt op het stuk dat achter de kop langs loopt —
     de kop blijft koning. */
  .hero{padding-top:clamp(104px,8.5vw,148px); padding-bottom:clamp(36px,4.5vw,76px)}
  .bol{
    left:auto; right:0; width:58%;
    --bolschaal:0.66; --bolcentrum:1.02; --bolrijk:1;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 24%, #000 50%);
    mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 24%, #000 50%);
  }
}

/* Op een breed scherm wordt de bol begrensd door de hoogte van de hero, niet door de
   breedte. Daarom hier meer hoogte én een groter middelpunt dat verder naar rechts
   schuift: de bol groeit, maar loopt niet de kop in. */
@media (min-width:1900px){
  .hero{padding-top:clamp(148px,8vw,196px); padding-bottom:clamp(72px,4.5vw,112px)}
  .bol{
    width:52%; --bolschaal:0.78; --bolcentrum:1.02;
    /* Steiler dan op 1440: de kop staat gecentreerd en schuift op een breed scherm mee
       naar rechts, dus de linkerhelft van de bol moet daar dieper gedempt worden. */
    -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.22) 30%, #000 62%);
    mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.22) 30%, #000 62%);
  }
}

@media (min-width:700px){
  .website ul,.auto ul{grid-template-columns:1fr 1fr}
  .beloftes{grid-template-columns:1fr 1fr; gap:28px}
  .voet{grid-template-columns:1fr auto; align-items:end}
}
@media (min-width:900px){
}
@media (min-width:1000px){
  .auto ul{grid-template-columns:repeat(3,1fr); gap:40px 40px}
}
@media (min-width:900px){
  .overmijraster{grid-template-columns:1.18fr .82fr; gap:0 64px; align-items:center}
  .overmijfoto{max-width:none}
  .zekerraster{grid-template-columns:1.08fr .92fr; gap:0 64px}
  .zeker .beloftes{grid-template-columns:1fr; gap:24px}
  .aanvraag .raster{grid-template-columns:1.15fr .85fr; gap:56px; align-items:start}
  form{grid-template-columns:1fr 1fr; gap:18px 20px}
  form select{max-width:420px}
  form .breed{grid-column:1 / -1}
  form .knop{width:auto; justify-self:start; padding-inline:34px}
}
@media (max-width:699px){
  /* Op mobiel vult de tekst 82% van de hero, dus er is geen ruimte "omheen".
     Oplossing: het middelpunt van de bol buiten beeld duwen, zodat de dichte kern
     met alle kruisende lijnen wegvalt en er alleen lange, rustige bogen overblijven.
     Daarbovenop dooft een masker het midden uit, waar de tekst staat. */
  .bol{
    --bolschaal:1.05; --bolcentrum:1.30;
    -webkit-mask-image:radial-gradient(ellipse 78% 58% at 42% 50%, transparent 0%, transparent 38%, #000 100%);
    mask-image:radial-gradient(ellipse 78% 58% at 42% 50%, transparent 0%, transparent 38%, #000 100%);
  }
  body{padding-bottom:76px}
  .balk{display:flex}
  .kopbalk .bellen{font-size:15px}
  /* De hero vult het scherm tussen de kopbalk (73px) en de belbalk (73px), zodat Het Dakrapport pas
     verschijnt als je scrolt (6 okt). */
  .hero{padding-top:44px; padding-bottom:28px; min-height:calc(100svh - 146px); display:flex; flex-direction:column; justify-content:center}
  .acties{flex-direction:column}
  /* De zes automatiseringen als veegrij: één kaart per keer, de volgende steekt uit. Zelfde gebaar als
     de telefoons van Het Dakrapport erboven. */
  .auto ul{
    margin-top:40px; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(84%,330px); gap:14px;
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-inline:calc(var(--marge) * -1); padding-inline:var(--marge); scroll-padding-inline:var(--marge);
  }
  .auto ul::-webkit-scrollbar{display:none}
  .auto li{scroll-snap-align:start; padding:20px; border:1px solid var(--lijn); border-radius:var(--radius); background:var(--bitumen-op)}
  .auto .teller{display:block}
  .acties .knop{width:100%}
}

.knop:disabled,.knop:disabled:hover{
  background:var(--zink); border-color:var(--lijn); color:var(--stof);
  cursor:not-allowed; transform:none;
}