.intro-sec{padding-bottom:40px}
.film{position:relative;border-radius:28px;overflow:hidden;background:#0b1a33;box-shadow:0 30px 60px rgba(15,27,51,.18);container-type:inline-size}
.f-stage{position:relative;aspect-ratio:16/9;overflow:hidden;color:#fff;font-family:Inter,sans-serif}
.f-bg{position:absolute;inset:-20%;background:
  radial-gradient(40% 50% at 20% 30%,rgba(45,108,223,.55),transparent 70%),
  radial-gradient(35% 45% at 80% 70%,rgba(29,63,143,.7),transparent 70%),
  radial-gradient(25% 30% at 70% 20%,rgba(242,183,5,.18),transparent 70%),#0b1a33;
  animation:f-drift 18s ease-in-out infinite alternate}
.f-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.4px);background-size:2.4cqw 2.4cqw;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent)}
@keyframes f-drift{to{transform:translate(4%,-3%) scale(1.06)}}

.sc{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .6s}
.sc.on{opacity:1;pointer-events:auto}
.sc *{transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .7s,background .4s,color .4s}
.f-h{font-family:Lora,Georgia,serif;font-weight:600;font-size:4.4cqw;line-height:1.08;letter-spacing:-.01em;text-align:center}
.f-p{font-size:1.8cqw;color:#b9c8e6;text-align:center;margin-top:1.2cqw}
.up{opacity:0;transform:translateY(3cqw)}
.sc.on .up{opacity:1;transform:none}
.d1{transition-delay:.15s!important}.d2{transition-delay:.35s!important}.d3{transition-delay:.55s!important}.d4{transition-delay:.75s!important}.d5{transition-delay:.95s!important}.d6{transition-delay:1.15s!important}

/* 0 logo */
.lg{position:relative;width:11cqw;height:11cqw;margin:0 auto 2.4cqw;opacity:0;transform:translateY(-6cqw) scale(.6)}
.sc.on .lg{opacity:1;transform:none;transition-timing-function:cubic-bezier(.3,1.5,.5,1)}
.lg svg{width:100%;height:100%}
.ring{position:absolute;left:50%;top:50%;width:11cqw;height:11cqw;margin:-5.5cqw;border-radius:50%;border:2px solid rgba(255,255,255,.35);opacity:0}
.sc.on .ring{animation:f-ring 2.4s ease-out .6s infinite}
.sc.on .ring.r2{animation-delay:1.4s}
@keyframes f-ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}

/* 1 kaart met pins */
.s1{grid-template-columns:1fr 1fr;padding:0 6cqw;gap:4cqw;place-items:center start}
.s1 .f-h,.s1 .f-p{text-align:left}
.map{position:relative;width:34cqw;height:40cqw;justify-self:end}
.map .dot{position:absolute;width:.7cqw;height:.7cqw;border-radius:50%;background:rgba(255,255,255,.16)}
.pin{position:absolute;display:flex;align-items:center;gap:.7cqw;background:#fff;color:#0f1b33;font-weight:600;font-size:1.35cqw;padding:.6cqw 1.2cqw .6cqw .7cqw;border-radius:99px;box-shadow:0 1cqw 2.4cqw rgba(0,0,0,.35);opacity:0;transform:translateY(2cqw) scale(.7)}
.pin i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#2d6cdf;box-shadow:0 0 0 .5cqw rgba(45,108,223,.25)}
.sc.on .pin{opacity:1;transform:none;transition-timing-function:cubic-bezier(.3,1.5,.5,1)}

/* 2 pakketten */
.pk{display:grid;grid-template-columns:repeat(3,19cqw);gap:2cqw;margin-top:3cqw}
.pk div{border-radius:1.8cqw;padding:2.2cqw;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);opacity:0;transform:translateY(5cqw) rotate(-2deg)}
.pk div.mid{background:#fff;color:#0f1b33}
.pk b{display:block;font-family:Lora,serif;font-size:2.6cqw;margin-bottom:.6cqw}
.pk span{font-size:1.4cqw;opacity:.8}
.pk em{display:block;width:3.4cqw;height:3.4cqw;border-radius:1cqw;background:rgba(255,255,255,.12);margin-bottom:1.6cqw}
.pk .mid em{background:#f2b705}
.sc.on .pk div{opacity:1;transform:none}
.sc.on .pk div.mid{transform:translateY(-1.2cqw) scale(1.04)}

/* 3 telefoon */
.s3{grid-template-columns:auto auto;gap:7cqw;justify-content:center;align-content:center}
.tel{width:20cqw;height:38cqw;border-radius:3.2cqw;background:#0f1b33;border:.7cqw solid #26324c;box-shadow:0 3cqw 6cqw rgba(0,0,0,.5);position:relative;overflow:hidden;opacity:0;transform:translateY(6cqw) rotate(4deg)}
.sc.on .tel{opacity:1;transform:rotate(-3deg)}
.scr{position:absolute;inset:0;background:#f3f6fb;padding:3cqw 1.6cqw;color:#0f1b33}
.scr .bar1{height:1cqw;width:50%;background:#dbe4f5;border-radius:1cqw;margin-bottom:1.6cqw}
.scr .card{background:#fff;border-radius:1.4cqw;padding:1.4cqw;box-shadow:0 .6cqw 1.4cqw rgba(15,27,51,.08);margin-bottom:1.2cqw}
.scr .card b{display:block;font-family:Lora,serif;font-size:1.6cqw;margin-bottom:.6cqw}
.scr .ln{height:.7cqw;background:#e6ebf4;border-radius:1cqw;margin:.5cqw 0}
.scr .ln.s{width:60%}
.akk{position:absolute;left:1.6cqw;right:1.6cqw;bottom:3cqw;height:4.2cqw;border-radius:99px;background:#1d3f8f;color:#fff;display:grid;place-items:center;font-weight:600;font-size:1.5cqw}
.akk.ok{background:#1e7a5a}
.vinger{position:absolute;width:4.6cqw;height:4.6cqw;border-radius:50%;background:rgba(255,255,255,.55);border:2px solid #fff;left:60%;bottom:-6cqw;opacity:0;transition:all .8s cubic-bezier(.2,.8,.2,1)}
.vinger.tik{bottom:3cqw;opacity:1}
.vinger.druk{transform:scale(.8)}
.stappen{list-style:none;display:grid;gap:1.4cqw}
.stappen li{display:flex;align-items:center;gap:1.4cqw;font-size:2cqw;font-weight:600;color:rgba(255,255,255,.35)}
.stappen li i{width:3.6cqw;height:3.6cqw;border-radius:50%;border:2px solid rgba(255,255,255,.25);display:grid;place-items:center;font-style:normal;font-family:Lora,serif;font-size:1.8cqw}
.stappen li.aan{color:#fff}
.stappen li.aan i{background:#f2b705;border-color:#f2b705;color:#0f1b33}

/* 4 document */
.doc{position:relative;width:20cqw;height:26cqw;border-radius:1.6cqw;background:#fff;margin:0 auto 2.6cqw;padding:2.4cqw 2cqw;opacity:0;transform:translateY(5cqw) rotate(6deg);box-shadow:0 3cqw 6cqw rgba(0,0,0,.45)}
.sc.on .doc{opacity:1;transform:rotate(-2deg)}
.doc .ln{height:.9cqw;background:#e6ebf4;border-radius:1cqw;margin:.9cqw 0}
.doc .ln.t{height:1.5cqw;width:60%;background:#1d3f8f}
.doc .ln.s{width:70%}
.stempel{position:absolute;right:-3cqw;bottom:-3cqw;width:9cqw;height:9cqw;border-radius:50%;background:#1e7a5a;display:grid;place-items:center;transform:scale(0) rotate(-30deg);box-shadow:0 1.6cqw 3cqw rgba(0,0,0,.35)}
.sc.on .stempel{transform:scale(1) rotate(0);transition:transform .6s cubic-bezier(.3,1.6,.5,1) 1s}
.stempel svg{width:55%}
.s4 .f-h{font-size:3.8cqw}

/* 5 eind */
.url{display:inline-block;margin-top:2cqw;font-weight:600;font-size:2.2cqw;color:#0f1b33;background:#f2b705;padding:.9cqw 2.2cqw;border-radius:99px}

.film .ondertitel{background:#08142a;color:#fff;text-align:center;font-weight:500;font-size:clamp(14px,1.7vw,19px);padding:16px 24px;min-height:62px;display:flex;align-items:center;justify-content:center;line-height:1.4;border-top:1px solid rgba(255,255,255,.08)}
.film .ondertitel:empty:before{content:"Druk op afspelen om kennis te maken";color:#7f90b3}
.film .bar{height:3px;background:#16243f}
.film .bar i{display:block;height:100%;width:0;background:#f2b705;transition:width .4s linear}
.film .play{position:absolute;left:50%;top:64%;transform:translate(-50%,-50%);z-index:5;display:flex;align-items:center;gap:12px;border:0;cursor:pointer;background:#fff;color:#0f1b33;font:600 17px Inter,sans-serif;padding:14px 24px 14px 14px;border-radius:999px;box-shadow:0 16px 36px rgba(0,0,0,.35)}
.film .play svg{width:32px;height:32px;background:#1d3f8f;color:#fff;border-radius:50%;padding:7px}
.film.speelt .play,.film.klaar .play{display:none}
.film .poster{position:absolute;inset:0;display:grid;place-items:center;align-content:center;text-align:center;padding-bottom:8%}
.film.speelt .poster,.film.klaar .poster{display:none}
.film .mute{position:absolute;right:14px;top:14px;z-index:5;border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:50%;width:42px;height:42px;cursor:pointer;font-size:18px}
.film .cta-eind{display:none;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:2.4cqw}
.film.klaar .cta-eind{display:flex}
.film .cta-eind .btn.line{background:transparent;color:#fff!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
@media(max-width:600px){.film{border-radius:18px}.film .play{font-size:14px;padding:10px 16px 10px 10px}.film .play svg{width:26px;height:26px}.film .ondertitel{min-height:76px;padding:12px 16px}.film .cta-eind .btn{padding:8px 14px;font-size:13px}.film .mute{width:34px;height:34px;font-size:15px}}
@media (prefers-reduced-motion:reduce){.f-bg{animation:none}}

/* pratende presentator */
.spreker{position:absolute;right:3cqw;bottom:3cqw;width:18cqw;z-index:4;text-align:center;opacity:0;transform:translateY(4cqw) scale(.85);transition:opacity .6s,transform .7s cubic-bezier(.3,1.4,.5,1)}
.film.speelt .spreker,.film.klaar .spreker{opacity:1;transform:none}
.sp-svg{display:block;width:18cqw;height:18cqw;border-radius:50%;box-shadow:0 1.6cqw 3.6cqw rgba(0,0,0,.45);position:relative;z-index:1}
.sp-ring{position:absolute;left:0;top:0;width:18cqw;height:18cqw;border-radius:50%;background:rgba(242,183,5,.35);transform:scale(var(--lvl,1));transition:transform .08s}
.sp-naam{margin-top:1cqw;font-weight:600;font-size:1.6cqw;color:#fff;line-height:1.2}
.sp-naam span{display:block;font-weight:400;font-size:1.05cqw;color:#9fb3d9}
.sp-hoofd{transform-origin:100px 140px;animation:sp-knik 3.2s ease-in-out infinite}
.sp-lijf{transform-origin:100px 200px;animation:sp-adem 4s ease-in-out infinite}
@keyframes sp-knik{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2.5deg) translateY(1px)}}
@keyframes sp-adem{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.015)}}
.sp-ogen{transform-origin:100px 96px;transition:transform .07s}
.sp-ogen.knip{transform:scaleY(.12)}
.sp-mond path{display:none}
.sp-mond[data-m="0"] .m0,.sp-mond[data-m="1"] .m1,.sp-mond[data-m="2"] .m2,.sp-mond[data-m="3"] .m3{display:inline}
.film:not(.speelt) .spreker .sp-mond .m0{display:inline}
.s1{padding-right:15cqw;gap:2cqw}
.s3{padding-right:12cqw}
@media (prefers-reduced-motion:reduce){.sp-hoofd,.sp-lijf{animation:none}}