/* Viggo Studio 2026 — homepage */
body.s26-home{background:var(--ink)}
.hero{background:var(--ink);color:#fff;min-height:100svh;display:grid;align-content:end;padding:120px clamp(18px,4vw,56px) 5vh;position:relative;overflow:hidden;isolation:isolate}
.hero h1{font-size:clamp(68px,11.7vw,330px);line-height:.84;margin:0 0 4vh;position:relative;z-index:2;color:#fff}
.hero h1 .l{display:block;white-space:nowrap;overflow:hidden;padding-top:.04em}
.hero h1 .l i{display:block;font-style:normal;transform:translateY(108%);animation:up 1.4s var(--ease) forwards;animation-delay:calc(.2s + var(--i)*.16s)}
.hero h1 .l:nth-child(2) i{color:var(--lime)}
@keyframes up{to{transform:none}}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;position:relative;z-index:2;opacity:0;animation:fade 1.2s 1s forwards}
@keyframes fade{to{opacity:1}}
.hero-foot p{max-width:46ch;color:#aab1be;font-size:clamp(17px,1.4vw,21px);line-height:1.5;margin:0 0 26px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
body.s26 .hero .button.ghost{background:transparent;color:#fff;border-color:#ffffff55}
body.s26 .hero .button.ghost:hover{background:#fff;color:var(--ink)}
.hero-price{text-align:right}
.hero-price small{display:block;font:700 clamp(22px,2vw,32px)/1 var(--font-d);text-transform:uppercase;color:#8c95a5}
.hero-price b{display:block;font:700 clamp(80px,9.5vw,160px)/.82 var(--font-d);color:var(--lime)}
.hero-price>span{display:block;font:400 15px var(--font-b);color:#8c95a5;text-transform:none;margin-top:8px}
.orb{position:absolute;z-index:0;right:-14vw;top:2vh;width:64vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#5a70ff,var(--blue) 42%,#050a3a 74%);box-shadow:0 0 200px 40px #1d3bff55;will-change:transform;transform:translate3d(calc(var(--mx,0)*34px),calc(var(--my,0)*34px - var(--sy,0)*.12px),0) scale(calc(1 + var(--hp,0)*.55));opacity:calc(1 - var(--hp,0)*.75)}
/* scroll-scène */
.stage{height:400vh;background:var(--blue);color:#fff;position:relative}
.pin{position:sticky;top:0;height:100svh;overflow:hidden}
.stage .pin{display:grid;place-items:center}
.stack{position:relative;width:min(44vw,560px);aspect-ratio:1.25;margin-left:24vw;transform-style:preserve-3d;transform:perspective(1700px) rotateX(58deg) rotateZ(calc(-38deg + var(--p,0)*76deg)) translateY(calc(var(--p,0)*-3vh))}
.layer{position:absolute;inset:0;border-radius:18px;border:2px solid #fff;display:grid;place-items:center;font:700 clamp(40px,6vw,96px) var(--font-d);text-transform:uppercase;transform:translateZ(calc(var(--z)*var(--p,0)*170px - 30px));box-shadow:0 40px 80px -30px #000a}
.layer:nth-child(1){--z:0;background:var(--ink);color:var(--lime)}
.layer:nth-child(2){--z:1;background:#ffffff26;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.layer:nth-child(3){--z:2;background:var(--lime);color:var(--ink)}
.caps{position:absolute;left:clamp(18px,4vw,56px);bottom:11vh;width:min(560px,86vw);height:60vh}
.cap{position:absolute;left:0;bottom:0;width:100%;opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease);pointer-events:none}
.cap.on{opacity:1;transform:none;pointer-events:auto}
.cap h2{font-size:clamp(52px,7.4vw,124px);margin:0 0 16px;color:#fff;line-height:.86}
.cap p{color:#dfe4ff;font-size:clamp(17px,1.4vw,21px);line-height:1.5;max-width:40ch;margin:0 0 14px}
.cap a{color:var(--lime);font-weight:700;text-decoration:none}
.dots{position:absolute;right:clamp(18px,4vw,56px);top:50%;transform:translateY(-50%);display:grid;gap:12px}
.dots i{width:10px;height:10px;border-radius:50%;border:2px solid #fff;transition:background .4s,transform .4s}
.dots i.on{background:var(--lime);border-color:var(--lime);transform:scale(1.35)}
/* prijs */
.price{background:var(--paper);padding:18vh clamp(18px,4vw,56px);display:grid;grid-template-columns:1.2fr 1fr;gap:6vw;align-items:end;overflow:hidden}
.price h2{font-size:clamp(120px,24vw,420px);line-height:.78;margin:0}
.price h2 em{font-style:normal;display:block;font-size:.2em;line-height:1;color:var(--blue);margin-bottom:.35em}
.price h2 small{font-size:.38em;vertical-align:top;margin-right:.06em;line-height:1.5;display:inline-block}
.price ul{list-style:none;padding:0;margin:30px 0}
.price li{padding:16px 0;border-top:1px solid #06080c26;font-weight:600;font-size:20px}
.price li:last-child{border-bottom:1px solid #06080c26}
.price p{line-height:1.55;max-width:44ch;font-size:19px}
@media(max-width:850px){.price{grid-template-columns:1fr;gap:40px}}
/* proces */
.proc{height:480vh;background:var(--ink);color:#fff;position:relative}
.proc-head{position:absolute;top:15vh;left:clamp(18px,4vw,56px);right:clamp(18px,4vw,56px);z-index:2}
.proc-head h2{font-size:clamp(48px,7.4vw,130px);margin:0;color:#fff;line-height:.86}
.proc-head h2 span{color:var(--lime);display:block}
.track{position:absolute;bottom:9vh;left:0;display:flex;gap:2vw;padding:0 clamp(18px,4vw,56px);width:max-content;transform:translateX(calc(var(--p,0)*-1*(var(--tw,1200px) - 100vw + 8vw)));will-change:transform}
.step{flex:0 0 min(78vw,520px);height:min(46vh,430px);border:1px solid #ffffff2e;border-radius:24px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(160deg,#ffffff12,transparent)}
.step b{font:700 clamp(100px,14vw,210px)/.8 var(--font-d);color:transparent;-webkit-text-stroke:1.5px var(--lime)}
.step small{color:var(--lime);font-weight:700;font-size:16px}
.step h3{font-size:clamp(32px,3.6vw,56px);margin:6px 0 10px;color:#fff}
.step p{color:#aab1be;line-height:1.5;margin:0;max-width:38ch;font-size:18px}
.bar{position:absolute;left:0;bottom:0;height:5px;background:var(--lime);width:calc(var(--p,0)*100%)}
/* hosting */
.host{background:var(--paper);padding:18vh clamp(18px,4vw,56px)}
.host h2{font-size:clamp(64px,12.5vw,230px);margin:0 0 7vh;line-height:.84}
.host h2 span{color:var(--blue)}
.host-grid{display:grid;grid-template-columns:1fr 1fr;gap:6vw}
.host-grid p{font-size:clamp(19px,1.7vw,24px);line-height:1.5;margin:0}
.host-grid .text-link{display:inline-block;margin-top:24px;color:var(--ink);font-weight:700}
.check-list span{display:block;padding:18px 0;border-top:1px solid #06080c26;font-weight:600;font-size:20px}
.check-list span:last-child{border-bottom:1px solid #06080c26}
.check-list span::before{content:"+ ";color:var(--blue)}
@media(max-width:850px){.host-grid{grid-template-columns:1fr;gap:30px}}
/* cta */
.cta{background:var(--lime);padding:16vh 0 0;overflow:hidden;color:var(--ink)}
.cta h2{font-size:clamp(64px,13.4vw,250px);line-height:.84;padding:0 clamp(18px,4vw,56px);margin:0 0 6vh}
.cta .button{margin:0 clamp(18px,4vw,56px)}
.marq{margin-top:14vh;background:var(--ink);color:var(--lime);padding:22px 0;white-space:nowrap;overflow:hidden;font:700 clamp(32px,4.4vw,64px)/1 var(--font-d);text-transform:uppercase}
.marq div{display:inline-block;animation:mq 30s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
@media(max-width:900px){.hero h1 .l{white-space:normal}}
@media(max-width:700px){.stack{margin-left:0;width:78vw;transform:perspective(1200px) rotateX(58deg) rotateZ(calc(-38deg + var(--p,0)*76deg)) translateY(-14vh)}.caps{bottom:7vh}.dots{display:none}.hero-price{text-align:left}}
@media(prefers-reduced-motion:reduce){.hero h1 .l i{transform:none}.hero-foot{opacity:1}.stage,.proc{height:auto}.pin{position:static;height:auto;padding:12vh 0}.stage .pin{display:block}.stack{display:none}.caps{position:static;height:auto;padding:0 clamp(18px,4vw,56px)}.cap{position:static;opacity:1;transform:none;margin-bottom:40px}.proc-head,.track{position:static;transform:none;width:auto}.track{flex-wrap:wrap;padding-top:30px}.proc-head{padding:0 clamp(18px,4vw,56px)}.dots,.bar{display:none}.step{height:auto;min-height:260px}}