/* Digivisor homepage: hero, scrollverhaal, rol, werkwijze, aanbod, over, contact */

/* hero */
.hero{position:relative;overflow:hidden;margin-top:calc(var(--hh) * -1);padding-top:var(--hh)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.hero .wrap{width:100%;position:relative;z-index:1;padding-block:clamp(40px,min(11vw,9vh),150px) clamp(48px,min(8vw,8vh),110px)}
.h1{font-size:clamp(56px,min(12.6vw,19.5vh),204px);font-weight:800;letter-spacing:-.058em;line-height:.86}
.sub{font-size:clamp(28px,min(5.2vw,8vh),78px);font-weight:800;letter-spacing:-.048em;line-height:1;color:#58647F;margin-top:clamp(14px,1.6vw,22px)}
.hero-foot{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:end;margin-top:clamp(28px,min(6vw,6vh),80px)}
.lead{font-size:clamp(19px,1.7vw,23px);font-weight:500;line-height:1.45;color:var(--zacht);max-width:34ch}
.acts{display:flex;flex-wrap:wrap;gap:22px 30px;align-items:center;justify-content:flex-end}
.meta{position:absolute;right:var(--gut);bottom:28px;font-size:13px;font-weight:500;color:var(--mist-2);z-index:1}

/* hero blijft staan, het scrollverhaal schuift er als wit vlak overheen */
.curtain{position:relative}
.curtain .hero{position:sticky;top:0;z-index:0}
.curtain .hero .wrap{transform-origin:50% 0}

/* scrollverhaal: van losse punten naar een lijn */
.story{height:280vh;position:relative;background:var(--wit);color:var(--ink);z-index:2;clip-path:inset(0 var(--in2,0px) 0 var(--in2,0px) round var(--r2,0px) var(--r2,0px) 0 0)}
.story .pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden;padding-top:var(--hh);box-sizing:border-box}
.story .wrap{width:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.story .eb{color:var(--ink-muted)}
.story .body-l{color:var(--ink-body);margin-top:26px}
.story .txt{display:grid}
.story .txt > div{grid-area:1/1;transition:opacity .45s var(--ease),transform .7s var(--ease)}
.story .txt .b{opacity:0;transform:translateY(28px);visibility:hidden;transition:opacity .45s var(--ease),transform .7s var(--ease),visibility 0s .45s}
.story.done .txt .a1{opacity:0;transform:translateY(-28px)}
.story.done .txt .b{opacity:1;transform:none;visibility:visible;transition:opacity .45s var(--ease) .1s,transform .7s var(--ease) .1s,visibility 0s}
.stage{position:relative;height:min(520px,62svh);overflow:hidden;list-style:none;margin:0;padding:0}
.item{position:absolute;left:0;top:0;width:100%;height:48px;display:flex;align-items:center;will-change:transform}
.item::after{content:"";position:absolute;left:28px;right:0;bottom:0;height:1px;background:var(--wit-hair);opacity:var(--lo,0)}
.item .lab{display:inline-flex;align-items:center;gap:14px;font-size:clamp(16px,1.4vw,19px);font-weight:700;letter-spacing:-.015em;white-space:nowrap}
.item .lab::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--ink);flex-shrink:0}
.item.hot .lab::before{background:var(--verm)}
.item .own{position:absolute;right:0;font-size:14px;font-weight:500;color:var(--ink-muted);white-space:nowrap}
.stage .rule{position:absolute;left:5.5px;top:24px;width:1px;background:#D5D8DF;transform-origin:top;transform:scaleY(var(--rp,1))}

/* wat ik doe */
.rol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:start}
.rol .body-l{margin-top:30px}
.takes{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.takes li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px 14px;padding:26px 0;border-bottom:1px solid var(--hair)}
.takes li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--verm);margin-top:10px}
.takes h3{font-size:clamp(21px,2vw,26px);font-weight:700;letter-spacing:-.025em;line-height:1.2}
.takes p{grid-column:2;color:var(--mist);font-size:16px;line-height:1.55}

/* werkwijze: horizontale tijdlijn die meeschuift met verticaal scrollen */
.hz{position:relative}
.hz .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(32px,6vh,80px);padding-top:var(--hh);box-sizing:border-box}
.track{position:relative;display:flex;width:max-content;padding-inline:var(--gut);will-change:transform;list-style:none;margin:0}
.track .rail2,.track .tf{position:absolute;left:var(--gut);right:0;top:6px;height:1px;background:var(--hair)}
.track .tf{background:var(--verm);transform-origin:left center;transform:scaleX(var(--p,1))}
.panel{position:relative;width:min(540px,78vw);flex-shrink:0;padding:52px 56px 0 0;display:flex;flex-direction:column;gap:16px}
.panel .mk{position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;background:var(--verm)}
.panel .bn{font-size:clamp(110px,14vw,220px);font-weight:800;letter-spacing:-.07em;line-height:.78;color:#17264D;font-variant-numeric:tabular-nums;margin-bottom:8px}
.panel h3{font-size:clamp(28px,3vw,42px);font-weight:800;letter-spacing:-.04em;line-height:1}
.panel p{font-size:18px;line-height:1.55;color:var(--mist);max-width:36ch}

/* witte vlakken vouwen open */
.light{background:var(--wit);clip-path:inset(0 var(--in,0px) round var(--r,0px))}

/* aanbod */
.offer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:16px;margin-top:clamp(48px,6vw,80px)}
.card{border:1px solid var(--wit-hair);padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column;gap:22px;min-width:0}
.card.main{background:var(--nacht);border-color:var(--nacht);color:var(--papier);--fg:var(--papier);--on:var(--ink)}
.card .tag{font-size:14px;font-weight:700;color:var(--ink-muted)}
.card.main .tag{color:var(--mist)}
.card h3{font-size:clamp(28px,3vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1}
.price{font-size:clamp(22px,2vw,26px);font-weight:700;letter-spacing:-.02em}
.price small{font-size:15px;font-weight:500;color:var(--ink-muted);letter-spacing:0}
.card.main .price small{color:var(--mist)}
.card ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.card li{display:flex;gap:14px;align-items:baseline;font-size:16px;line-height:1.5;color:var(--ink-body)}
.card.main li{color:var(--zacht)}
.card li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--verm);flex-shrink:0;transform:translateY(-2px)}
.card .btn{align-self:flex-start;margin-top:auto}
.note{margin-top:28px;font-size:15px;color:var(--ink-muted);display:flex;gap:12px;align-items:baseline;max-width:70ch}
.note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--verm);flex-shrink:0;transform:translateY(-2px)}

/* vergelijking */
.vgl{border-top:1px solid var(--wit-hair)}
.tbl-x{overflow-x:auto;margin-top:clamp(44px,6vw,72px)}
.vgl table{width:100%;min-width:760px;border-collapse:collapse}
.vgl th,.vgl td{text-align:left;padding:22px 16px;border-bottom:1px solid var(--papier-hair);vertical-align:middle}
.vgl thead th{font-size:14px;font-weight:700;color:var(--ink-muted);border-bottom-color:var(--ink)}
.vgl thead th.us{color:var(--ink)}
.vgl tbody th{font-size:18px;font-weight:500;letter-spacing:-.01em;width:34%}
.vgl td{text-align:center;width:16.5%}
.vgl thead th:not(:first-child){text-align:center}
.vgl td.us{background:rgba(229,83,45,.06)}
.v{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:middle}
.v.ja{background:var(--verm)}
.v.nee{box-shadow:inset 0 0 0 1.5px #A69E8C}
.v.deels{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px var(--ink)}
.legend{display:flex;flex-wrap:wrap;gap:28px;margin-top:22px;font-size:14px;color:var(--ink-muted)}
.legend span{display:inline-flex;align-items:center;gap:10px}

/* over Daan */
.over{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,120px);align-items:center}
.portrait{position:relative;aspect-ratio:4/5;max-width:100%;background:var(--nacht-hi)}
.portrait img{position:absolute;inset:0}
.quote{font-size:clamp(34px,4.2vw,62px);font-weight:800;letter-spacing:-.045em;line-height:1;margin:0}
.over .body-l{margin-top:32px;display:grid;gap:18px}

/* inzichten */
.inz-kop{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:24px}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:start}
.side{margin-top:36px;display:grid;gap:26px}
.side .lbl{font-size:14px;font-weight:700;color:var(--mist-2);display:block;margin-bottom:6px}
.side .val{font-size:22px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.side .val a{text-decoration:none}
.copy{background:none;border:0;color:var(--mist);font:500 14px var(--f);cursor:pointer;padding:6px 0;text-decoration:underline;text-underline-offset:4px}
.cform{display:grid;gap:22px;position:relative}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
.send{display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.status{font-size:15px;color:var(--mist);min-height:1.5em}
.status.err{color:var(--papier)}
.status.err::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--verm);margin-right:10px;vertical-align:1px}

@media (max-width:980px){
  .hero-foot,.rol,.over,.contact{grid-template-columns:minmax(0,1fr)}
  .acts{justify-content:flex-start}
  .story .wrap{grid-template-columns:minmax(0,1fr);gap:clamp(16px,3svh,28px);align-content:center}
  .story .h2{font-size:clamp(34px,min(10vw,6.2svh),60px)}
  .story .eb{margin-bottom:12px}
  .story .body-l{font-size:clamp(15px,2.1svh,18px);margin-top:14px}
  .stage{height:min(400px,40svh)}
  .item{height:min(40px,4.2svh)}
  .item .lab{font-size:clamp(14px,1.9svh,17px);gap:12px}
  .item .lab::before{width:10px;height:10px}
  .item::after{left:24px}
  .stage .rule{left:4.5px;top:calc(min(40px,4.2svh) / 2)}
  .offer{grid-template-columns:minmax(0,1fr)}
  .portrait{max-width:420px}
  .meta{display:none}
}
@media (max-width:560px){
  .row2{grid-template-columns:minmax(0,1fr)}
  .story{height:240vh}
}
/* zonder scriptanimaties: alles gewoon onder elkaar */
@media (prefers-reduced-motion:reduce){
  .story{height:auto}
  .story .pin{position:relative;height:auto;padding-block:96px}
  .hz .pin{position:relative;height:auto;padding-block:96px}
  .track{width:auto;flex-wrap:wrap;gap:40px 0}
  .curtain .hero{position:relative}
}