/* =====================================================================
   SUBPAGINA'S — geladen na style.css
   ===================================================================== */
.menu{gap:28px}
.menu > a.active::after,.menu .dd > a.active::after{width:100%}

/* Pagina-hero (Rhenac: compacte donkere kop + kruimelpad) */
.phero{background:var(--night);color:#fff;position:relative;overflow:hidden;padding:200px 0 110px}
.phero .rings{width:900px;right:-260px;top:-360px}
.phero .rings.l{width:700px;left:-380px;right:auto;top:120px}
.phero .wrap{position:relative}
.phero h1{color:#fff;font-size:clamp(34px,4.4vw,56px);line-height:1.1;max-width:820px}
.phero h1 .hl{color:var(--accent)}
.phero .sub{color:rgba(255,255,255,.85);font-size:18px;max-width:640px;margin-top:20px}
.crumbs{display:flex;gap:10px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:22px}
.crumbs a{color:var(--accent)}
.crumbs a:hover{text-decoration:underline}
.phero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:center}
.phero-grid > *{min-width:0}
.phero-grid .shot{margin-bottom:0}
.after-shot{padding-top:110px}

.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.btn-dark{background:var(--night);color:#fff}
.btn-dark:hover{background:#23513D}
.btn-line{border-color:var(--night);color:var(--night)}
.btn-line:hover{background:var(--night);color:#fff}
.dark .btn-line,.phero .btn-line{border-color:rgba(255,255,255,.5);color:#fff}
.dark .btn-line:hover,.phero .btn-line:hover{background:#fff;color:var(--night)}
.h3u{font-size:clamp(24px,2.6vw,32px);line-height:1.3}
.h3u::after{content:"";display:block;width:120px;height:2px;background:var(--accent-2);margin:18px 0 22px}
.center .h3u::after{margin-left:auto;margin-right:auto}
.dark .h3u::after{background:var(--accent)}
.split > *{min-width:0}
.split.rev > :first-child{order:2}
.dark p.lead{color:rgba(255,255,255,.8)}

/* Galerij (Rhenac: rij van 4 beelden) */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:70px}
.gallery figure{border-radius:14px;overflow:hidden;aspect-ratio:1.35;position:relative;background:var(--grey)}
.gallery img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .8s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{position:absolute;left:10px;bottom:10px;background:rgba(20,35,28,.85);color:#fff;font-size:12px;font-weight:600;padding:5px 10px;border-radius:14px}

/* Voordelen (Rhenac: donkere sectie met 2×2 witte kaarten) */
.adv{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:60px;position:relative}
.adv .card{background:#fff;color:var(--ink);border-radius:14px;padding:40px 40px 44px;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.adv .card:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(0,0,0,.8)}
.adv .card h3{font-size:24px;color:var(--night)}
.adv .card h3::after{content:"";display:block;width:58px;height:2px;background:var(--accent-2);margin:14px 0 18px}
.adv .card p{color:var(--ink-2);font-size:15px}
.adv .card.hl{background:var(--accent)}
.adv .card.hl h3::after{background:var(--night)}
.adv .card.hl p{color:var(--night)}
.adv.three{grid-template-columns:repeat(3,1fr)}
.greybg .adv .card{border:1px solid var(--grey-2)}

/* Stappen-lijst */
.steps{margin-top:50px;counter-reset:st}
.steps li{list-style:none;display:grid;grid-template-columns:80px 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--grey-2);counter-increment:st}
.steps li:last-child{border-bottom:1px solid var(--grey-2)}
.steps li::before{content:counter(st,decimal-leading-zero);font-size:34px;font-weight:700;color:var(--accent-2);line-height:1}
.steps h4{font-size:20px;margin-bottom:6px}
.steps p{color:var(--ink-2);font-size:15px}

/* Kerncijfers-balk */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);background:var(--night);border-radius:14px;border-top:3px solid var(--accent);position:relative;z-index:5;box-shadow:0 30px 60px -25px rgba(20,35,28,.55)}
.kpis div{padding:34px 30px;color:#fff;border-right:1px solid rgba(255,255,255,.1)}
.kpis div:last-child{border-right:0}
.kpis b{display:block;font-size:34px;font-weight:600;line-height:1;color:var(--accent)}
.kpis span{display:block;font-size:14px;color:rgba(255,255,255,.8);margin-top:10px}

/* Specificaties-tabel */
.spec{width:100%;border-collapse:collapse;margin-top:40px;font-size:15px}
.spec th,.spec td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--grey-2);vertical-align:top}
.spec th{width:34%;color:var(--night);font-weight:600}
.spec td{color:var(--ink-2)}
.spec tr:hover td,.spec tr:hover th{background:var(--grey)}

/* FAQ */
.faq{margin:50px auto 0;display:grid;gap:12px;max-width:860px}
.faq details{background:#fff;border:1px solid var(--grey-2);border-radius:14px;transition:border-color .3s}
.faq details[open]{border-color:var(--accent-2)}
.faq summary{list-style:none;cursor:pointer;padding:22px 26px;font-weight:600;font-size:17px;color:var(--night);display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:26px;font-weight:400;color:var(--accent-2);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 26px 24px;color:var(--ink-2)}

/* Doelgroep-tegels */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px}
.tile{position:relative;border-radius:14px;overflow:hidden;min-height:440px;display:flex;align-items:flex-end;color:#fff;isolation:isolate}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s var(--ease)}
.tile::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,35,28,.95) 25%,rgba(20,35,28,.15));z-index:-1}
.tile:hover img{transform:scale(1.06)}
.tile div{padding:34px}
.tile h3{color:#fff;font-size:24px}
.tile p{color:rgba(255,255,255,.85);font-size:15px;margin:10px 0 18px}
.tile .more{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:600;font-size:15px}
.tile .more svg{width:16px;height:16px;transition:transform .3s}
.tile:hover .more svg{transform:translateX(4px)}

/* Prijzen */
.billing{display:inline-flex;background:var(--grey);border-radius:40px;padding:5px;margin-top:30px}
.billing button{border:0;background:none;font:inherit;font-weight:600;font-size:14px;padding:10px 20px;border-radius:40px;cursor:pointer;color:var(--ink-2)}
.billing button.on{background:var(--night);color:#fff}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}
.plan{background:#fff;border:1px solid var(--grey-2);border-radius:6px;padding:40px 34px;display:flex;flex-direction:column;position:relative;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.plan:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(20,35,28,.35)}
.plan.pop{background:var(--night);color:#fff;border-color:var(--night)}
.plan.pop h3,.plan.pop .price b{color:#fff}
.plan .tag{position:absolute;top:-13px;left:34px;background:var(--accent);color:var(--night);font-size:12px;font-weight:700;padding:5px 12px;border-radius:20px;letter-spacing:.04em;text-transform:uppercase}
.plan h3{font-size:24px}
.plan .for{font-size:14px;color:var(--muted);margin-top:6px}
.plan.pop .for{color:rgba(255,255,255,.65)}
.price{margin:26px 0 6px;display:flex;align-items:baseline;gap:6px}
.price b{font-size:44px;font-weight:700;color:var(--night);line-height:1}
.price span{font-size:14px;color:var(--muted)}
.plan.pop .price span{color:rgba(255,255,255,.65)}
.plan ul{list-style:none;margin:26px 0 30px;display:grid;gap:12px;font-size:15px;flex:1;align-content:start}
.plan li{display:flex;gap:10px}
.plan li svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--accent-2)}
.plan.pop li svg{color:var(--accent)}
.plan .btn{justify-content:center}
.addons{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.addon{border:1px solid var(--grey-2);border-radius:6px;padding:28px;background:#fff}
.addon h4{font-size:20px}
.addon p{font-size:14px;color:var(--ink-2);margin-top:8px}
.addon b{display:block;margin-top:16px;color:var(--night)}

/* Formulier */
.form{background:#fff;border-radius:6px;padding:44px;box-shadow:0 30px 60px -30px rgba(20,35,28,.35);border:1px solid var(--grey-2)}
.form h3{font-size:24px;margin-bottom:6px}
.form .hint{font-size:14px;color:var(--muted);margin-bottom:26px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:6px;margin-bottom:16px}
.field > label{font-size:13px;font-weight:600;color:var(--night)}
.field input:not([type=checkbox]),.field select,.field textarea{font:inherit;font-size:15px;padding:13px 14px;border:1px solid var(--grey-2);border-radius:14px;background:var(--paper);color:var(--ink);transition:border-color .2s,box-shadow .2s;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(191,227,204,.25)}
.field textarea{min-height:120px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{display:flex;align-items:center;gap:8px;border:1px solid var(--grey-2);border-radius:30px;padding:9px 14px;font-size:14px;font-weight:500;cursor:pointer;transition:.2s}
.chips input{accent-color:var(--accent-2)}
.chips label:has(input:checked){border-color:var(--accent-2);background:rgba(191,227,204,.12)}
.form .btn{width:100%;justify-content:center;margin-top:8px}
.form .small{font-size:12px;color:var(--muted);margin-top:14px;text-align:center}
.contact-list{list-style:none;display:grid;gap:22px;margin-top:34px}
.contact-list li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start}
.contact-list .ic{width:48px;height:48px;border-radius:50%;background:var(--grey);display:grid;place-items:center;color:var(--accent-2)}
.contact-list .ic svg{width:20px;height:20px}
.contact-list b{display:block;color:var(--night)}
.contact-list span{color:var(--ink-2);font-size:15px}

/* Kennisbank */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.filters button{font:inherit;font-size:14px;font-weight:600;border:1px solid var(--grey-2);background:#fff;color:var(--ink-2);padding:10px 18px;border-radius:30px;cursor:pointer;transition:.2s}
.filters button.on,.filters button:hover{background:var(--night);border-color:var(--night);color:#fff}
.ncard .meta{font-size:12px;color:var(--muted);margin-top:14px}
.ncard.hide{display:none}
.feature-post{display:grid;grid-template-columns:1.2fr 1fr;border-radius:14px;overflow:hidden;background:var(--night);color:#fff;margin-top:50px}
.feature-post .img{position:relative;min-height:360px}
.feature-post img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature-post .tx{padding:50px;align-self:center}
.feature-post h3{color:#fff;font-size:30px;margin:12px 0 16px}
.feature-post p{color:rgba(255,255,255,.8)}

/* Over ons */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:60px}
.value{border-top:2px solid var(--accent-2);padding-top:24px}
.value h4{font-size:20px;margin-bottom:10px}
.value p{font-size:15px;color:var(--ink-2)}
.timeline{margin-top:60px;position:relative;display:grid;gap:40px}
.timeline::before{content:"";position:absolute;left:134px;top:8px;bottom:8px;width:2px;background:rgba(255,255,255,.12)}
.tl{display:grid;grid-template-columns:110px 1fr;gap:66px;position:relative}
.tl b{font-size:18px;color:var(--accent);font-weight:700}
.tl::after{content:"";position:absolute;left:129px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(191,227,204,.2)}
.tl h4{color:#fff;font-size:20px;margin-bottom:6px}
.tl p{color:rgba(255,255,255,.8);font-size:15px;max-width:620px}

/* Cases */
.case{display:grid;grid-template-columns:1fr 1fr;border-radius:14px;overflow:hidden;background:var(--grey);margin-top:30px}
.case:nth-child(even) .img{order:2}
.case .img{position:relative;min-height:340px}
.case .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case .tx{padding:50px}
.case h3{font-size:26px;margin:10px 0 14px}
.case p{color:var(--ink-2)}
.case .res{display:flex;gap:30px;margin-top:26px}
.case .res b{display:block;font-size:30px;color:var(--accent-2);line-height:1}
.case .res span{font-size:13px;color:var(--ink-2)}
.dark + .cta,.greybg + .cta{padding-top:120px}
.ph-note{display:inline-block;font-size:12px;font-weight:600;color:#9a6b00;background:#fff4d6;border:1px dashed #e7b84a;padding:4px 10px;border-radius:20px}

@media (max-width:1024px){
  .phero-grid,.feature-post,.case{grid-template-columns:1fr}
  .phero-grid .shot{margin-bottom:0}
  .after-shot{padding-top:80px}
  .gallery,.kpis,.values{grid-template-columns:1fr 1fr}
  .kpis div:nth-child(2){border-right:0}
  .adv.three,.tiles,.plans,.addons{grid-template-columns:1fr 1fr}
  .case:nth-child(even) .img{order:0}
  .split.rev > :first-child{order:0}
}
@media (max-width:640px){
  .phero{padding:150px 0 60px}
  .adv,.adv.three,.tiles,.plans,.addons,.values,.frow{grid-template-columns:1fr}
  .adv .card,.form,.case .tx,.feature-post .tx{padding:28px 24px}
  .kpis div{padding:22px 18px}
  .kpis b{font-size:26px}
  .steps li{grid-template-columns:52px 1fr;gap:14px}
  .steps li::before{font-size:26px}
  .timeline::before{left:10px}
  .tl{grid-template-columns:1fr;gap:4px;padding-left:34px}
  .tl::after{left:5px}
  .spec th{width:auto;display:block;padding-bottom:0;border:0}
  .spec td{display:block}
}

/* Onepager */
html{scroll-padding-top:84px}
.page-home .tiles .tile{min-height:400px}

/* Juridische pagina's */
.legal{display:grid;grid-template-columns:260px 1fr;gap:70px;align-items:start}
.legal > *{min-width:0}
.toc{position:sticky;top:110px;border-left:2px solid var(--grey-2);padding-left:20px}
.toc b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.toc ol{list-style:none;display:grid;gap:8px;font-size:14px;counter-reset:t}
.toc li{counter-increment:t}
.toc a{color:var(--ink-2);display:block;transition:color .2s}
.toc a::before{content:counter(t) ". ";color:var(--accent-2);font-weight:600}
.toc a:hover{color:var(--night)}
.doc-body{max-width:760px;counter-reset:h}
.doc-body .meta{font-size:14px;color:var(--muted);margin-bottom:26px}
.doc-body .notice{background:#fff4d6;border:1px dashed #e7b84a;color:#7a5500;border-radius:14px;padding:16px 20px;font-size:14px;margin-bottom:40px}
.doc-body h2{font-size:24px;margin:50px 0 14px;counter-increment:h;scroll-margin-top:100px}
.doc-body h2::before{content:counter(h) ". ";color:var(--accent-2)}
.doc-body h3{font-size:18px;margin:26px 0 8px}
.doc-body p,.doc-body li{color:var(--ink-2);font-size:16px}
.doc-body p{margin-bottom:14px}
.doc-body ul{padding-left:22px;margin:0 0 16px;display:grid;gap:6px}
.doc-body a{color:var(--accent-2);text-decoration:underline}
.doc-body table{width:100%;border-collapse:collapse;margin:10px 0 20px;font-size:15px}
.doc-body th,.doc-body td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--grey-2);vertical-align:top;color:var(--ink-2)}
.doc-body th{color:var(--night);background:var(--grey)}
.ph{background:#fff4d6;color:#7a5500;padding:1px 6px;border-radius:3px;font-weight:600;font-size:.92em}
@media (max-width:1024px){.legal{grid-template-columns:1fr;gap:30px}.toc{position:static}}
@media (max-width:640px){.doc-body table{display:block;overflow-x:auto;font-size:14px}.doc-body th,.doc-body td{min-width:130px;padding:10px}.doc-body{overflow-wrap:anywhere}}

/* Hero-knoppen: primair + App Store */
.hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px}
.hero .hero-btns .btn{margin-top:0}
.btn-store{background:#0b1a13;color:#fff;border:1.5px solid rgba(191,227,204,.35);padding:9px 20px 9px 16px}
.btn-store:hover{border-color:var(--accent);background:#0f2219}
.btn-store svg{width:24px;height:24px}
.btn-store:hover svg{transform:none}
.btn-store span{display:flex;flex-direction:column;line-height:1.1;font-size:17px;font-weight:700}
.btn-store small{font-size:11px;font-weight:500;opacity:.75}

/* iPhone-frame voor app-screenshots */
.phone-wrap{display:flex;justify-content:center;gap:24px;align-items:flex-end}
.phone-shot{width:290px;max-width:46%;aspect-ratio:780/1787;border-radius:46px;border:10px solid #0b1a13;background:#0b1a13;overflow:hidden;position:relative;box-shadow:0 40px 80px -30px rgba(0,0,0,.75),0 0 0 1px rgba(191,227,204,.18)}
.phone-shot{container-type:inline-size}
.phone-shot::before{content:"";position:absolute;top:2.4cqw;left:50%;transform:translateX(-50%);width:31%;height:7.4cqw;border-radius:4cqw;background:#050d09;z-index:4}
.phone-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
/* Statusbalk zoals op een echte iPhone: de screenshots komen uit de webversie en hebben daar een lege strook */
.phone-shot::after{content:"9:41";position:absolute;top:0;left:0;right:0;height:5.2%;display:flex;align-items:center;padding:0 0 0 11%;font:700 4.6cqw/1 Manrope,system-ui,sans-serif;letter-spacing:.01em;color:#fff;z-index:3;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 12' fill='%23fff'%3E%3Crect x='0' y='8' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='.8'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='.8'/%3E%3Cpath d='M29 3.2a9.5 9.5 0 0 1 12.4 0l-1.3 1.4a7.6 7.6 0 0 0-9.8 0zM31.4 5.9a6 6 0 0 1 7.6 0l-1.3 1.4a4.1 4.1 0 0 0-5 0zM33.8 8.6a2.4 2.4 0 0 1 2.8 0l-1.4 1.6z'/%3E%3Crect x='46.5' y='1' width='18' height='10' rx='3' fill='none' stroke='%23fff' stroke-opacity='.5'/%3E%3Crect x='48.3' y='2.8' width='13' height='6.4' rx='1.6'/%3E%3Crect x='65.6' y='4' width='1.6' height='4' rx='.8' fill-opacity='.5'/%3E%3C/svg%3E") no-repeat right 9% center/auto 30%}
.phone-shot.second{transform:translateY(-40px)}
.todo-phone img{opacity:.35}
.todo-phone p{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#fff;gap:6px;padding:20px}
.todo-phone small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border:1px dashed rgba(191,227,204,.6);padding:5px 10px;border-radius:30px;justify-self:center}
@media (max-width:640px){.phone-shot{width:220px;max-width:70%}.phone-shot.second{display:none}}

/* ---------- De hele keten (home) ---------- */
.keten-kop{max-width:760px}
.keten{counter-reset:stap;margin-top:40px}
.kstap{display:grid;grid-template-columns:1fr 1.3fr;gap:70px;align-items:center;padding:70px 0;border-top:1px solid var(--grey-2)}
.kstap:first-child{border-top:0}
.kstap:nth-child(even) .ktekst{order:2}
.kstap:nth-child(even){grid-template-columns:1.3fr 1fr}
.knum{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);margin-bottom:14px}
.knum b{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--night);color:var(--geel);font-size:14px;letter-spacing:0}
.kstap h3{font-size:clamp(24px,2.6vw,30px);line-height:1.25}
.kstap p{color:var(--ink-2);margin-top:14px;max-width:480px}
.kstap ul{list-style:none;margin-top:18px;display:grid;gap:8px;font-size:15px;color:var(--ink-2)}
.kstap li{display:flex;gap:10px}
.kstap li::before{content:"";flex:none;width:7px;height:7px;border-radius:2px;background:var(--geel);margin-top:9px}
.kbeeld{position:relative}
.kbeeld .phone-wrap{justify-content:flex-start}
.kbeeld .phone-shot{width:250px}
.kduo{display:grid;grid-template-columns:1fr auto;gap:0;align-items:end}
.kduo .shot{margin-right:-60px}
.kduo .phone-shot{position:relative;z-index:2;width:220px;max-width:none;margin-bottom:-30px}
.ktag{display:inline-block;margin-top:18px;font-size:12px;font-weight:600;color:var(--accent-2);background:#e3efe6;border-radius:30px;padding:5px 12px}

/* ---------- Vergelijking (home) ---------- */
.vgl-wrap{margin-top:56px;background:#fff;border-radius:16px;box-shadow:0 30px 60px -40px rgba(20,35,28,.35);overflow:hidden}
.vgl{width:100%;border-collapse:collapse;font-size:15px}
.vgl th,.vgl td{padding:16px 22px;text-align:left;border-top:1px solid var(--grey)}
.vgl thead th{border-top:0;background:var(--night);color:#fff;font-size:14px;font-weight:700}
.vgl thead th.vd{color:var(--geel)}
.vgl td:first-child{font-weight:600;color:var(--ink)}
.vgl td:first-child small{display:block;font-weight:400;color:var(--ink-2);font-size:13px;margin-top:2px}
.vgl td.c{width:170px;text-align:center;color:var(--muted);font-size:14px}
.vgl td.vd{background:#f3f8f4;color:var(--accent-2);font-weight:700}
.vgl .ja::before{content:"✓";font-weight:800}
.vgl .groep td{background:var(--grey);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:10px 22px}
.vgl-noot{font-size:13px;color:var(--ink-2);margin-top:16px}

@media (max-width:1024px){
  .kstap,.kstap:nth-child(even){grid-template-columns:1fr;gap:40px;padding:56px 0}
  .kstap:nth-child(even) .ktekst{order:0}
  .kduo .shot{margin-right:-40px}
}
@media (max-width:640px){
  .kduo{grid-template-columns:1fr}
  .kduo .shot{margin-right:0}
  .kduo .phone-shot{display:none}
  .vgl th,.vgl td{padding:12px 12px}
  .vgl td.c{width:88px;font-size:13px}
}

/* Hero-kop op vier regels (26 sep 2026) */
.hero h1 span:nth-child(4) i{animation-delay:.36s}

/* GIS-pakketten naast Velddesk (home, vergelijking) */
.gis-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.gis{background:#fff;border-radius:14px;padding:26px 24px}
.gis h4{font-size:19px;margin-bottom:12px}
.gis p{font-size:14px;color:var(--ink-2);line-height:1.6}
.gis p+p{margin-top:10px;padding-top:10px;border-top:1px solid var(--grey)}
.gis b{color:var(--ink)}
.vgl td.c.vd:not(.ja){color:var(--muted);font-weight:500}
@media (max-width:1024px){.gis-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.gis-grid{grid-template-columns:1fr}}

/* App-rondleiding: elk app-scherm groot in beeld */
.tour .split{align-items:center}
.tour .split + .split{margin-top:130px}
.tour .phone-shot{width:320px;max-width:80%}
.tour .checks{color:var(--ink-2);--c:var(--accent-2)}
@media (max-width:900px){.tour .split + .split{margin-top:80px}.tour .phone-wrap{margin-top:30px}}

/* Functieraster (4x3) op de app-pagina */
.fraster{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:60px}
.fcel{background:#fff;border:1px solid var(--grey-2);border-radius:14px;padding:28px 24px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.fcel:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(20,35,28,.45)}
.fic{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--night);color:var(--accent)}
.fic svg{width:24px;height:24px}
.fcel h3{font-size:17px;color:var(--night);margin-top:18px}
.fcel p{font-size:14px;color:var(--ink-2);margin-top:8px;line-height:1.55}
@media (max-width:1000px){.fraster{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.fraster{grid-template-columns:1fr;gap:14px}.fcel{display:grid;grid-template-columns:46px 1fr;column-gap:16px;padding:20px}.fcel .fic{grid-row:span 2}.fcel h3{margin-top:2px}}

/* Vergelijking met vier kolommen (Waarom Velddesk): op smalle schermen horizontaal scrollen */
.vgl-wrap.breed{overflow-x:auto;-webkit-overflow-scrolling:touch}
.vgl.v4{min-width:760px}
.vgl.v4 td.c,.vgl.v4 th.c{width:130px}

/* Vergelijkingstabel: grotere vinkjes, rondjes en streepjes */
.vgl td.c{font-size:20px;line-height:1;vertical-align:middle}
.vgl .ja::before{font-size:24px;color:var(--accent-2)}
.vgl td.c.vd.ja::before{color:var(--accent-2)}
.vgl td.c:not(.ja){color:#9aa59d}
.vgl td:first-child small{font-size:13px;line-height:1.4}

/* Werkwijze: stappenbalk en "Jij"-regel per stap */
.wstrip{display:grid;grid-template-columns:repeat(7,1fr);background:var(--night);border-radius:14px;border-top:3px solid var(--accent);overflow:hidden;box-shadow:0 30px 60px -25px rgba(20,35,28,.55)}
.wstrip a{padding:20px 16px;color:#fff;font-size:14px;font-weight:600;border-right:1px solid rgba(255,255,255,.1);transition:background .2s}
.wstrip a:last-child{border-right:0}
.wstrip a:hover{background:rgba(255,255,255,.06)}
.wstrip b{display:block;font-size:22px;color:var(--accent);margin-bottom:4px}
.kjij{margin-top:18px;padding:12px 16px;background:var(--grey);border-left:3px solid var(--accent-2);border-radius:0 10px 10px 0;font-size:15px}
.kjij b{display:inline-block;margin-right:8px;color:var(--night)}
.klink{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-weight:600;color:var(--accent-2)}
.klink svg{width:16px;height:16px;transition:transform .3s}
.klink:hover svg{transform:translateX(4px)}
.kstap{scroll-margin-top:100px}
@media (max-width:900px){.wstrip{grid-template-columns:repeat(4,1fr)}.wstrip a{border-bottom:1px solid rgba(255,255,255,.1)}}
@media (max-width:560px){.wstrip{grid-template-columns:1fr 1fr}}

/* Oplossingen als productkaarten met echte schermen */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px}
.pcard{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;color:var(--ink);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pcard:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(0,0,0,.6)}
.pc-vis{height:230px;background:#e9eee7;position:relative;overflow:hidden}
.pc-shot img{position:absolute;left:28px;top:28px;width:560px;max-width:none;border-radius:10px;box-shadow:0 18px 40px -18px rgba(20,35,28,.45);transition:transform .6s var(--ease)}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pc-phone{display:flex;justify-content:center;background:linear-gradient(160deg,#dfe8de,#c9d8cb)}
.pc-phone .phone-shot{width:170px;max-width:none;margin-top:26px;border-width:7px;border-radius:30px;flex:none}
.pcard:hover .pc-shot img,.pcard:hover .pc-img img{transform:scale(1.04)}
.pc-tx{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.pc-tx h3{font-size:21px;color:var(--night)}
.pc-tx p{font-size:15px;color:var(--ink-2);margin:10px 0 18px;flex:1}
.pc-tx .more{display:inline-flex;align-items:center;gap:8px;color:var(--accent-2);font-weight:600;font-size:15px}
.pc-tx .more svg{width:16px;height:16px;transition:transform .3s}
.pcard:hover .more svg{transform:translateX(4px)}
@media (max-width:1000px){.pcards{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.pcards{grid-template-columns:1fr}}