/* ==========================================================
   Krijtlijn — DE SCROLLFILM (gedeeld door alle pagina's)
   Het toneel blijft in beeld staan; de scrollpositie bepaalt
   waar de apparaten staan, wat er op de schermen gebeurt en
   welke tekst ernaast staat. Het script assets/film.js stuurt
   alles aan; per pagina staat alleen de eigen inhoud en de
   standen van de apparaten in de pagina zelf.
   ========================================================== */
.film{ position:relative; --scene:85vh; height:calc(100vh + var(--scene) * var(--eind, 5)); background:var(--studio) }
@media (hover:none) and (pointer:coarse){ .film{ --scene:105vh } }
.toneel{ position:sticky; top:0; height:100vh; overflow:hidden; background-color:#04060A;
  background-image:radial-gradient(900px 600px at 78% 8%, rgba(31,120,200,.16) 0%, rgba(31,120,200,.05) 40%, transparent 68%),
    radial-gradient(700px 500px at 18% 30%, rgba(24,60,110,.14) 0%, transparent 65%),
    linear-gradient(180deg, #060910 0%, #04060A 100%) }
/* de wand: stippen en tegellijnen die met het scrollen omhoog schuiven (--wand komt uit het script) */
.toneel::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.3; z-index:1;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1.4px); background-size:26px 26px;
  background-position:0 var(--wand,0px) }
/* de wand: ribbels zoals in de oude hero-film, plus dwarslijnen die met het scrollen omhoog schuiven */
.toneel::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0px, rgba(255,255,255,.028) 1px, transparent 1px, transparent 16px),
    repeating-linear-gradient(0deg, rgba(120,190,255,.06) 0px, rgba(120,190,255,.06) 1px, transparent 1px, transparent 180px);
  background-position:0 0, 0 var(--wand,0px) }
/* zodra het script draait nemen twee echte lagen het over (.wand-a op de plek van ::before, .wand-b op die van ::after):
   die kan het script los verschuiven zonder de hele film opnieuw te laten doorrekenen. Zelfde beeld. */
.film:not(.plat) .toneel::before, .film:not(.plat) .toneel::after{ content:none }
.toneel > .wand{ position:absolute; inset:0; pointer-events:none; z-index:1 }
.toneel > .wand-a{ opacity:.3; background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1.4px); background-size:26px 26px }
.toneel > .wand-b{ background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0px, rgba(255,255,255,.028) 1px, transparent 1px, transparent 16px),
    repeating-linear-gradient(0deg, rgba(120,190,255,.06) 0px, rgba(120,190,255,.06) 1px, transparent 1px, transparent 180px) }
.toneel .lucht{ position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(900px 520px at 50% 30%, rgba(47,140,255,.1) 0%, rgba(47,140,255,.03) 45%, transparent 70%) }
.golf{ position:absolute; top:-15%; bottom:-15%; left:0; width:42%; pointer-events:none; opacity:0; z-index:3; mix-blend-mode:screen;
  background:linear-gradient(90deg, transparent 0%, rgba(110,170,255,.16) 38%, rgba(230,240,255,.2) 50%, rgba(110,170,255,.16) 62%, transparent 100%);
  transform:translateX(-120%) skewX(-18deg) }

/* lichtstrepen langs de wand (het script maakt ze aan en schuift ze omhoog met het scrollen) */
.reisstreep{ position:absolute; top:0; width:3px; height:520px; z-index:1; pointer-events:none; will-change:transform; rotate:46deg; transform-origin:center;
  background:linear-gradient(180deg, rgba(47,140,255,0) 0%, #4FD8FF 50%, rgba(47,140,255,0) 100%);
  box-shadow:0 0 18px rgba(60,200,255,.85); opacity:.9 }
.reisstreep.oneven{ height:380px; opacity:.55; rotate:-46deg }   /* het script zet .oneven om en om */
.film.plat .reisstreep{ display:none }
/* de wereld: een vast tekenvel dat op elk scherm geschaald wordt */
.wereld{ position:absolute; left:50%; top:50%; width:1440px; height:800px; z-index:2;
  transform:translate(-50%,-50%); transform-origin:center; will-change:transform }
/* Patricks keuze 5-9: geen bureau meer, de hele achtergrond is één egale wand met de schuine lichtlijnen */
.bureau, .ondergloed, .prop{ display:none }
.bureau{ position:absolute; left:-25%; right:-25%; top:64%; height:130%; transform-origin:50% 0; transform:perspective(1100px) rotateX(62deg);
  background-color:#07090E;
  background-image:linear-gradient(180deg, rgba(60,170,255,.05) 0%, rgba(60,170,255,0) 30%),
    radial-gradient(60% 40% at 50% 30%, rgba(255,255,255,.05) 0%, transparent 70%),
    repeating-linear-gradient(0deg, rgba(120,190,255,.045) 0 1px, transparent 1px 140px),
    linear-gradient(180deg, #0B0F16 0%, #07090E 50%, #030407 100%);
  /* de lichtlijnen op het blad komen naar je toe terwijl je scrolt (--vloer komt uit het script) */
  background-position:0 0, 0 0, 0 var(--vloer,0px), 0 0 }
/* (geen lichtlijn op de rand van het blad: die stond stil en viel Patrick op) */
/* de gloed onder het bureau is een licht dat met het scrollen langs de rand reist (het script zet --gloedx) */
.ondergloed{ position:absolute; left:calc(var(--gloedx, 33%) - 17%); width:34%; top:63.6%; height:6px; border-radius:50%; pointer-events:none;
  background:#6FE3FF; filter:blur(12px); opacity:.5; box-shadow:0 0 50px 22px rgba(60,200,255,.45), 0 30px 110px 40px rgba(47,140,255,.18) }
/* toetsenbord en muis op het bureau (het script maakt ze aan; ze vervagen als de film begint) */
.prop{ position:absolute; left:0; top:0; pointer-events:none; will-change:opacity }
.toetsenbord{ width:300px; height:74px; border-radius:8px; background:linear-gradient(180deg,#1A2029,#0D1117); box-shadow:0 10px 24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08) }
.toetsenbord::before{ content:''; position:absolute; inset:9px 10px 9px 10px; border-radius:4px;
  background-image:repeating-linear-gradient(90deg, #212934 0 16px, transparent 16px 20px), repeating-linear-gradient(0deg, #212934 0 12px, transparent 12px 16px);
  background-blend-mode:multiply; opacity:.9 }
.muis{ width:44px; height:70px; border-radius:22px 22px 20px 20px; background:linear-gradient(180deg,#242C37,#0F141B); box-shadow:0 8px 18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1) }
.film.plat .prop{ display:none }

/* ---------- de apparaten ---------- */
.app{ position:absolute; left:0; top:0; transform-origin:center; will-change:transform, opacity }
.app .schaduw{ position:absolute; left:4%; right:4%; bottom:-14px; height:30px; border-radius:50%; background:rgba(0,0,0,.6); filter:blur(11px); z-index:-1 }
.scherm{ position:relative; background:#05080D; overflow:hidden; box-shadow:0 22px 60px rgba(0,0,0,.65); transition:box-shadow .45s ease }
/* elk scherm heeft één of twee lagen: .inhoud (eerst) en .vlak.twee (later) */
.scherm .inhoud, .scherm .vlak{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease; background:#0A101C; overflow:hidden }
.scherm .inhoud img, .scherm .vlak img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top }
.scherm .glans{ position:absolute; inset:0; pointer-events:none; z-index:4; transition:opacity .4s;
  background:linear-gradient(112deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.035) 34%, transparent 40%) }
.app.aan .scherm .inhoud{ opacity:1 }
.app.aan.twee .scherm .inhoud{ opacity:0 }
.app.aan.twee .scherm .vlak.twee{ opacity:1 }
/* lagen met een eigen tijdvak (data-tijd): de laag die aan de beurt is ligt bovenop, de hero-laag gaat dan uit */
.app.aan .scherm .vlak.nu{ opacity:1; z-index:2 }
.app.aan .scherm:has(.vlak.nu) .inhoud{ opacity:0 }
.app.aan .scherm .glans{ opacity:.45 }
.app.aan .scherm{ box-shadow:0 22px 60px rgba(0,0,0,.65), 0 0 34px rgba(70,150,255,.35), 0 0 100px rgba(47,140,255,.22) }
.app.aan .scherm::after{ content:''; position:absolute; inset:0; background:#DCEBFF; opacity:0; pointer-events:none; z-index:5; animation:flits .55s ease-out }
@keyframes flits{ 0%{ opacity:.85 } 30%{ opacity:.15 } 55%{ opacity:.4 } 100%{ opacity:0 } }

/* het beeldscherm op een voet */
.monitor{ width:420px; height:330px }
.monitor .scherm{ width:420px; height:262px; border:7px solid #0C1017; border-radius:10px; outline:1px solid rgba(255,255,255,.16) }
.monitor .nek{ position:absolute; left:50%; top:260px; width:48px; height:46px; margin-left:-24px; background:linear-gradient(90deg,#161D29,#2C3647 50%,#161D29) }
.monitor .voet{ position:absolute; left:50%; top:302px; width:230px; height:14px; margin-left:-115px; border-radius:8px; background:linear-gradient(180deg,#232B37,#0E131B); box-shadow:0 8px 22px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06) }
/* de laptop */
.laptop{ width:600px; height:376px }
.laptop .deksel{ position:absolute; left:20px; top:0; width:560px; height:350px }
.laptop .scherm{ width:560px; height:350px; border:10px solid #10161F; border-radius:14px 14px 3px 3px; outline:1px solid rgba(255,255,255,.07) }
.laptop .scherm::before{ content:''; position:absolute; left:50%; top:1px; width:5px; height:5px; margin-left:-2px; border-radius:50%; background:#1E2836; z-index:6 }
.laptop .basis{ position:absolute; left:0; top:350px; width:600px; height:24px; border-radius:2px 2px 14px 14px;
  background:linear-gradient(180deg,#3C4859 0%,#26303F 40%,#151C27 100%); box-shadow:0 14px 30px rgba(0,0,0,.65) }
.laptop .basis::before{ content:''; position:absolute; left:50%; top:0; width:96px; height:6px; margin-left:-48px; border-radius:0 0 7px 7px; background:#0E141D }
/* de tablet */
.tablet{ width:300px; height:212px }
.tablet .scherm{ width:300px; height:212px; border:11px solid #0F151E; border-radius:20px; outline:1px solid rgba(255,255,255,.07) }
/* de telefoons */
.tel{ width:118px; height:240px }
.tel .scherm{ width:118px; height:240px; border:6px solid #0F151E; border-radius:22px; outline:1px solid rgba(255,255,255,.08) }
.tel .scherm::before{ content:''; position:absolute; left:50%; top:5px; width:32px; height:6px; margin-left:-16px; border-radius:4px; background:#05080D; z-index:6 }

/* ---------- bouwstenen voor op de schermen ---------- */
/* browserbalk boven een site */
.browserbalk{ flex:none; display:flex; align-items:center; gap:5px; padding:6px 10px; background:#121A28; border-bottom:1px solid rgba(255,255,255,.08); font:500 9px/1.2 'Inter',sans-serif; color:var(--grijs) }
.browserbalk i{ width:7px; height:7px; border-radius:50%; background:#3A4557 }
.browserbalk span{ margin-left:6px; flex:1; background:#0A101C; border-radius:5px; padding:3px 9px }
.browserbalk .live{ flex:none; margin:0; padding:2px 8px; border-radius:999px; background:rgba(47,191,113,.16); color:var(--groen); font-weight:700; opacity:calc(clamp(0, (var(--bouw,0) - .9) * 10, 1)) }
/* een site die zich van boven naar beneden opbouwt (--bouw 0..1 op de laag) */
.sitelaag{ display:flex; flex-direction:column }
.sitelaag .bouwsel{ position:relative; flex:1; overflow:hidden; clip-path:inset(0 0 calc(100% - var(--bouw,0) * 100%) 0) }
.sitelaag .bouwsel img{ position:absolute; inset:0; height:100% }
.sitelaag .scanlijn{ position:absolute; left:0; right:0; top:calc(var(--bouw,0) * 100%); height:2px; z-index:5; margin-top:-1px;
  background:linear-gradient(90deg, transparent, #BFDCFF, transparent); box-shadow:0 0 14px 3px rgba(120,180,255,.7);
  opacity:calc(min(var(--bouw,0) * 12, (1 - var(--bouw,0)) * 12, 1)) }
/* (het meescrollen van de site op het scherm is er op Patricks verzoek uit; .scrolbaar doet nu niets meer) */
.scrolbaar{ overflow:hidden }
/* een beeld dat van links naar rechts verschijnt */
/* .past: het beeld past in zijn geheel op het scherm (bv. het logo), met wat lucht eromheen */
.veeglaag.past{ background:#05080D }
.veeglaag.past img{ object-fit:contain; padding:7% 9%; box-sizing:border-box }
.veeglaag{ clip-path:inset(0 calc(100% - var(--bouw,0) * 100%) 0 0) }
/* dia's die het scherm op schuiven (data-dia op de baan) */
.dia-baan{ position:absolute; inset:0; display:flex; will-change:transform }
.dia-baan > *{ flex:none; height:100%; position:relative; overflow:hidden }
.dia-baan.n1 { width:100% } .dia-baan.n1 > *{ width:100% }
.dia-baan.n2 { width:200% } .dia-baan.n2 > *{ width:50% }
.dia-baan.n3 { width:300% } .dia-baan.n3 > *{ width:33.3333% }
.dia-baan.n4 { width:400% } .dia-baan.n4 > *{ width:25% }
.dia-baan.n5 { width:500% } .dia-baan.n5 > *{ width:20% }
.dia-baan.n6 { width:600% } .dia-baan.n6 > *{ width:16.6667% }
.dia-baan.n7 { width:700% } .dia-baan.n7 > *{ width:14.2857% }
.dia-baan .werkdia{ display:flex; flex-direction:column }
.dia-baan .werkdia .venstervak{ flex:1; position:relative; overflow:hidden }
.dia-baan .werkdia .venstervak img{ position:absolute; inset:0 }
.dia-baan .beelddia img{ object-fit:cover }
.dia-baan .beelddia.past img{ object-fit:contain; padding:14px }
/* het grafiekje met staafjes (over een dashboard heen) */
.staven{ position:absolute; right:6px; bottom:6px; width:96px; height:52px; padding:6px 7px 4px; border-radius:6px; z-index:3;
  background:rgba(10,16,28,.88); border:1px solid rgba(95,178,255,.35); display:flex; align-items:flex-end; gap:4px;
  opacity:calc(clamp(0, var(--bouw,0) * 6, 1)); box-shadow:0 6px 18px rgba(0,0,0,.5) }
.staven b{ position:absolute; left:7px; top:3px; font:700 5px/1 'Inter',sans-serif; color:var(--blauw-fel); letter-spacing:.08em; text-transform:uppercase }
.staven i{ flex:1; height:34px; border-radius:2px 2px 0 0; background:linear-gradient(180deg, var(--blauw-fel), var(--blauw-diep)); transform-origin:bottom;
  transform:scaleY(calc(var(--bouw,0) * var(--f,.5))); box-shadow:0 0 8px rgba(91,155,255,.5) }
/* onderdelen die één voor één verschijnen: --v is het moment (0..1) binnen --bouw */
.stapsgewijs > *{ opacity:calc(clamp(0, (var(--bouw,0) - var(--v,0)) * 6, 1)); transform:translateY(calc((1 - clamp(0, (var(--bouw,0) - var(--v,0)) * 6, 1)) * 8px)) }
/* de mobiele website op een telefoon */
.tel .inhoud, .tel .vlak{ padding:16px 7px 8px; display:flex; flex-direction:column; gap:5px; font-family:'Inter',sans-serif }
.mb-kop{ display:flex; align-items:center; justify-content:space-between; padding:2px 3px 4px }
.mb-kop .mb-logo{ width:30px; height:7px; border-radius:3px; background:linear-gradient(90deg,#2F6FEA,#5FB2FF) }
.mb-kop .mb-menu{ width:12px; height:8px; border-top:2px solid #8C97A8; border-bottom:2px solid #8C97A8 }
.mb-held{ border-radius:8px; padding:9px 8px; background:linear-gradient(140deg,#1B2C4C 0%,#101A2E 80%); display:flex; flex-direction:column; gap:5px }
.mb-held b{ font:700 9px/1.2 'Space Grotesk',sans-serif; color:#fff }
.mb-held small{ font-size:5.5px; color:#9DA9BA; line-height:1.3 }
.mb-held .mb-knop{ width:44px; height:11px; border-radius:4px; background:var(--blauw-diep); box-shadow:0 0 10px rgba(47,111,234,.7); margin-top:2px }
.mb-kaart{ display:flex; gap:6px; align-items:center; padding:6px 7px; border-radius:6px; background:#121A28; border:1px solid rgba(255,255,255,.08) }
.mb-kaart i{ flex:none; width:16px; height:16px; border-radius:5px; background:rgba(95,178,255,.16) }
.mb-kaart span{ display:flex; flex-direction:column; gap:3px; flex:1 }
.mb-kaart span i{ width:70%; height:4px; border-radius:2px; background:#33405A }
.mb-kaart span i + i{ width:45%; height:3px }
.mb-melding{ margin-top:auto; display:flex; align-items:center; gap:5px; padding:5px 6px; border-radius:6px; background:rgba(47,191,113,.14); border:1px solid rgba(47,191,113,.45); color:#7BE0A8; font-size:5.5px; font-weight:700 }
.mb-melding i{ width:5px; height:5px; border-radius:50%; background:var(--groen); box-shadow:0 0 6px var(--groen) }
/* de advertentie-telefoon */
.zoekbalk{ display:flex; align-items:center; gap:4px; padding:5px 7px; border-radius:999px; background:#1A2333; border:1px solid rgba(255,255,255,.12); font-size:6.5px; color:#DDE4EE; min-height:18px }
.zoekbalk svg{ flex:none }
.zoekbalk .cursor{ width:1px; height:8px; background:#DDE4EE; animation:knipper 1s steps(2) infinite }
@keyframes knipper{ to{ opacity:0 } }
.advert{ padding:7px 7px 6px; border-radius:7px; border:1px solid rgba(95,178,255,.45); background:rgba(47,111,234,.1); display:flex; flex-direction:column; gap:2px; position:relative }
.advert .chip{ font-size:4.5px; font-weight:700; color:var(--grijs); letter-spacing:.06em; text-transform:uppercase }
.advert b{ font:600 6.8px/1.25 'Space Grotesk',sans-serif; color:#8CC8FF }
.advert small{ font-size:5px; color:var(--groen) }
.advert .positie{ position:absolute; top:-6px; right:6px; background:var(--blauw-diep); color:#fff; font-size:4.5px; font-weight:700; padding:2px 6px; border-radius:999px; box-shadow:0 0 10px rgba(47,111,234,.7) }
.grafiek{ margin-top:auto; padding:6px 7px 4px; border-radius:7px; background:#121A28; border:1px solid rgba(255,255,255,.08); position:relative }
.grafiek .gl{ font-size:4.8px; color:var(--grijs); text-transform:uppercase; letter-spacing:.08em; font-weight:700 }
.grafiek .getal{ display:block; font:700 12px/1.1 'Space Grotesk',sans-serif; color:#fff; margin:1px 0 3px }
.grafiek svg{ display:block; width:100%; height:34px; overflow:visible }
.grafiek .lijn{ fill:none; stroke:var(--blauw-fel); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:100; stroke-dashoffset:100; filter:drop-shadow(0 0 3px rgba(125,178,255,.9)) }
.grafiek .vul{ fill:url(#adsvulling); opacity:0 }
/* het gesprek op de telefoon (contact) */
.chat{ background:linear-gradient(180deg,#0E1524,#0A101C); display:flex; flex-direction:column; gap:5px; padding:16px 7px 8px; font-family:'Inter',sans-serif }
.chat .cnaam{ display:flex; align-items:center; gap:5px; padding:2px 2px 6px; border-bottom:1px solid rgba(255,255,255,.08); font-size:6px; font-weight:700; color:#fff }
.chat .cnaam i{ width:12px; height:12px; border-radius:50%; background:linear-gradient(135deg,#2F6FEA,#5FB2FF) }
.chat .cnaam small{ display:block; font-size:4.5px; color:var(--groen); font-weight:600 }
.chat .bel{ max-width:86%; padding:5px 7px; border-radius:9px 9px 9px 2px; background:#1A2333; color:#DDE4EE; font-size:6px; line-height:1.35 }
.chat .bel.ik{ align-self:flex-end; border-radius:9px 9px 2px 9px; background:var(--blauw-diep); color:#fff }
.chat .cknop{ margin-top:auto; padding:6px; border-radius:7px; background:var(--blauw-diep); color:#fff; font-size:6px; font-weight:700; text-align:center; box-shadow:0 0 12px rgba(47,111,234,.7) }
/* tellers op de tablet */
.tellervlak{ padding:14px 16px; display:flex; flex-direction:column; justify-content:center; gap:7px;
  background:radial-gradient(260px 160px at 80% 10%, rgba(47,140,255,.18), transparent 70%), #0A101C }
.tellervlak .kopje{ font:700 7px/1 'Inter',sans-serif; color:var(--blauw-fel); letter-spacing:.16em; text-transform:uppercase; margin-bottom:4px }
.feitje{ display:flex; align-items:baseline; gap:8px; padding:6px 9px; border-radius:7px; background:rgba(16,24,42,.8); border:1px solid rgba(95,178,255,.2) }
.feitje b{ font:700 22px/1 'Space Grotesk',sans-serif; color:var(--blauw); min-width:2ch; text-align:right; text-shadow:0 0 16px rgba(95,178,255,.5) }
.feitje span{ font-size:8px; color:#B9C4D4; line-height:1.25 }
.feitje span em{ font-style:normal; color:#fff; font-weight:700 }
/* de stappen (hoe we werken) op een scherm */
.stapvlak{ padding:16px 18px; display:flex; flex-direction:column; justify-content:center; gap:8px;
  background:radial-gradient(260px 160px at 85% 5%, rgba(47,140,255,.16), transparent 70%), #0A101C }
.stapvlak .kopje{ font:700 8px/1 'Inter',sans-serif; color:var(--blauw-fel); letter-spacing:.16em; text-transform:uppercase; margin-bottom:2px }
.stapje{ display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:8px; background:rgba(16,24,42,.85); border:1px solid rgba(95,178,255,.18) }
.stapje b{ flex:none; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:700 11px/1 'Space Grotesk',sans-serif; color:#fff; background:var(--blauw-diep); box-shadow:0 0 12px rgba(47,111,234,.6) }
.stapje span{ font-size:9.5px; font-weight:600; color:#fff; line-height:1.2 }
.stapje small{ display:block; font-size:7px; font-weight:400; color:#9DA9BA; margin-top:2px }
.stapje .vinkje{ margin-left:auto; flex:none; width:14px; height:14px; border-radius:50%; background:rgba(47,191,113,.18); color:var(--groen); display:flex; align-items:center; justify-content:center; font-size:8px }

/* ---------- de lichtlijnen (finale op de homepagina) ---------- */
.lijnen{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:visible }
.lijnen path{ fill:none; stroke:var(--neon); stroke-width:2; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100;
  filter:drop-shadow(0 0 6px rgba(47,140,255,.9)) }
.lijnen path.stroom{ stroke:#CFE4FF; stroke-width:2.5; stroke-dasharray:6 22; opacity:0; transition:opacity .5s }
.lijnen.stroomt path.stroom{ opacity:.9; animation:stromen 1.6s linear infinite }
@keyframes stromen{ to{ stroke-dashoffset:-28 } }
.lijnen .kern{ fill:#EAF3FF; opacity:0; filter:drop-shadow(0 0 14px rgba(120,180,255,1)) drop-shadow(0 0 40px rgba(47,140,255,.9)) }
.lijnen.stroomt .kern{ opacity:1; animation:pols 2.2s ease-in-out infinite }
@keyframes pols{ 50%{ r:14 } }

/* ---------- de teksten naast het toneel ---------- */
.tekst{ position:absolute; z-index:6; left:6%; top:50%; transform:translateY(-50%); max-width:min(500px, 40%); visibility:hidden }
.tekst .binnen{ opacity:0; will-change:opacity, transform }
.tekst.rechts{ left:auto; right:6% }
.tekst.boven{ top:112px; transform:none; max-width:min(460px,38%) }
/* de introtekst staat links naast het beeldscherm (Patricks wens), niet erover */
.tekst.intro{ left:6%; top:17%; transform:none; max-width:min(600px, 42%); width:auto; text-align:left }
.tekst.intro h1{ font-size:clamp(2.2rem,5vw,3.7rem) }
.tekst.finale{ left:50%; top:23%; transform:translate(-50%,-50%); max-width:760px; width:92%; text-align:center }
.tekst.finale h2{ font-size:clamp(1.7rem,3vw,2.5rem) }
.tekst.finale .kicker{ margin-bottom:10px }
.tekst.finale .acties{ margin-top:18px }
/* onderin, gecentreerd op glas (voor scènes waar de apparaten de hele breedte nodig hebben) */
.tekst.onder{ left:50%; top:auto; bottom:5%; transform:translateX(-50%); max-width:820px; width:92%; text-align:left;
  padding:20px 26px 22px; border-radius:18px; background:rgba(12,18,30,.6); border:1px solid rgba(95,178,255,.2);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 20px 60px rgba(0,0,0,.5) }
/* bovenin, gecentreerd op glas (de apparaten staan eronder op het bureau) */
.tekst.bovenmidden{ left:50%; top:96px; transform:translateX(-50%); max-width:820px; width:92%; text-align:left;
  padding:18px 26px 20px; border-radius:18px; background:rgba(12,18,30,.62); border:1px solid rgba(95,178,255,.2);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 20px 60px rgba(0,0,0,.5) }
.tekst.bovenmidden h2{ font-size:clamp(1.4rem,2.4vw,1.9rem) }
.tekst.bovenmidden p{ margin-top:6px; font-size:.95rem }
.tekst.bovenmidden .binnen{ transform:none !important }
.tekst.onder h2{ font-size:clamp(1.5rem,2.6vw,2rem) }
.tekst.onder p{ margin-top:8px; font-size:.98rem }
.tekst.onder .binnen{ transform:none !important }   /* onderin is geen ruimte om mee te schuiven */
.tekst .kicker{ display:inline-flex; align-items:center; gap:10px; color:var(--blauw-fel); font-weight:700; letter-spacing:.16em; font-size:.74rem; text-transform:uppercase; margin-bottom:16px }
.tekst .kicker::before{ content:''; width:30px; height:3px; border-radius:2px; background:var(--blauw); box-shadow:0 0 10px rgba(91,155,255,.8) }
.tekst.intro .kicker::before, .tekst.finale .kicker::before{ display:none }
.tekst.intro .kicker{ border:1px solid rgba(91,155,255,.35); border-radius:999px; padding:8px 16px; background:rgba(12,18,29,.55); backdrop-filter:blur(6px); font-size:.66rem; letter-spacing:.11em; margin-bottom:22px; white-space:nowrap; max-width:none }   /* op één regel, mag breder zijn dan de tekstkolom */
.tekst h1{ font-size:clamp(2.3rem,5.6vw,4.2rem); line-height:1.06; text-shadow:0 4px 30px rgba(0,0,0,.6) }
.tekst h1 em, .tekst h2 em{ font-style:normal; color:var(--blauw) }
.tekst h1 .regel{ display:block; overflow:hidden }
.tekst h1 .regel span{ display:block; animation:opkomen .9s cubic-bezier(.2,.85,.25,1) .25s both }
.tekst h1 .regel:nth-child(2) span{ animation-delay:.4s }
@keyframes opkomen{ from{ transform:translateY(110%) } to{ transform:none } }
.tekst h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.1; text-shadow:0 4px 30px rgba(0,0,0,.6) }
.tekst p{ margin-top:16px; color:#C3CDDB; font-size:1.06rem; text-shadow:0 2px 14px rgba(0,0,0,.6) }
.tekst p + p{ margin-top:10px }
.tekst p b{ color:var(--krijt) }
.tekst.intro p{ margin:18px 0 0; max-width:48ch; font-size:1.08rem }
.tekst .meer{ display:inline-flex; align-items:center; gap:8px; margin:22px 22px 0 0; color:var(--blauw-fel); font-weight:600; text-decoration:none; font-size:.98rem }
.tekst .meer:hover{ color:#fff }
.tekst .meer i{ font-style:normal; transition:transform .2s }
.tekst .meer:hover i{ transform:translateX(4px) }
.tekst .meer.stil{ color:#B9C4D4 }
.tekst .acties{ margin-top:28px; justify-content:flex-start }
.tekst.finale .acties{ justify-content:center }
.tekst .teller{ font-family:'Space Grotesk',sans-serif; font-size:.8rem; font-weight:600; letter-spacing:.12em; color:var(--grijs); margin-bottom:12px }
.tekst .teller i{ font-style:normal; opacity:.45; margin:0 3px }
.tekst .stempel{ display:inline-flex; align-items:center; gap:7px; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:5px 11px; border-radius:999px; margin-bottom:10px }
.tekst .stempel.echt{ color:#7BE0A8; background:rgba(47,191,113,.12); border:1px solid rgba(47,191,113,.35) }
.tekst .stempel.proef{ color:#93A3B8; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14) }
/* een vinklijst in een tekstblok: de regels komen één voor één (data-bouw op de lijst) */
.tekst .vinklijst{ margin-top:18px; gap:11px }
.tekst .vinklijst li{ font-size:.97rem; opacity:calc(clamp(0, (var(--bouw,0) - var(--v,0)) * 5, 1)); transform:translateX(calc((1 - clamp(0, (var(--bouw,0) - var(--v,0)) * 5, 1)) * -14px)) }
/* de stappen in een tekstblok */
.tekst .stapjes{ list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:12px }
.tekst .stapjes li{ display:flex; gap:14px; align-items:flex-start; opacity:calc(clamp(0, (var(--bouw,0) - var(--v,0)) * 5, 1)); transform:translateX(calc((1 - clamp(0, (var(--bouw,0) - var(--v,0)) * 5, 1)) * -14px)) }
.tekst .stapjes b.nr{ flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:700 .9rem 'Space Grotesk',sans-serif; color:#fff; background:var(--blauw-diep); box-shadow:0 0 14px rgba(47,111,234,.6); margin-top:1px }
.tekst .stapjes strong{ display:block; color:var(--krijt); font-size:1rem }
.tekst .stapjes span{ color:#B9C4D4; font-size:.92rem }
.tekst .logootje{ display:block; height:44px; width:auto; max-width:200px; object-fit:contain; margin-bottom:12px; filter:drop-shadow(0 4px 12px rgba(0,0,0,.5)) }
.finale .glas{ position:absolute; inset:-22px -34px; border-radius:22px; z-index:-1;
  background:rgba(12,18,30,.52); border:1px solid rgba(95,178,255,.22);
  -webkit-backdrop-filter:blur(18px) saturate(1.25); backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:0 30px 90px rgba(0,0,0,.5), 0 0 60px rgba(47,140,255,.16), inset 0 1px 0 rgba(255,255,255,.08) }
.finale .binnen{ position:relative }
.finale .diensten{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px 14px; margin-top:12px; color:var(--krijt); font-weight:600; font-size:1rem }
.finale .diensten i{ font-style:normal; color:var(--blauw); opacity:.9 }
.scrolhint{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:7; color:rgba(244,246,248,.7); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; transition:opacity .4s }
.scrolhint i{ width:1px; height:28px; background:linear-gradient(180deg, var(--blauw), transparent); animation:zakken 1.6s ease-in-out infinite }
@keyframes zakken{ 0%{ transform:scaleY(0); transform-origin:top } 50%{ transform:scaleY(1); transform-origin:top } 51%{ transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } }
.film.weg .scrolhint{ opacity:0 }

/* stippen rechts: waar je bent in de film */
.stippen{ position:absolute; right:22px; top:50%; transform:translateY(-50%); z-index:7; display:flex; flex-direction:column; gap:10px }
.stippen button{ width:26px; height:24px; border:none; background:none; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; position:relative }
.stippen button i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.28); transition:transform .3s, background .3s, box-shadow .3s }
.stippen button.nu i{ background:var(--blauw); transform:scale(1.5); box-shadow:0 0 12px var(--blauw) }
.stippen button.deel{ margin-top:8px }
.stippen button.deel::before{ content:''; position:absolute; left:6px; right:6px; top:-5px; height:1px; background:rgba(255,255,255,.14) }
.stippen button span{ position:absolute; right:30px; top:50%; transform:translateY(-50%); white-space:nowrap; font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#B9C4D4; opacity:0; transition:opacity .2s; pointer-events:none }
.stippen button:hover span{ opacity:1 }

/* ---------- smal scherm: de tekst onderin op glas ---------- */
.film.smal .tekst, .film.smal .tekst.intro, .film.smal .tekst.finale, .film.smal .tekst.boven, .film.smal .tekst.rechts, .film.smal .tekst.onder, .film.smal .tekst.bovenmidden{
  left:14px; right:14px; top:auto; bottom:26px; transform:none; max-width:none; width:auto; text-align:left;
  padding:18px 20px 20px; border-radius:18px; background:rgba(12,18,30,.6); border:1px solid rgba(95,178,255,.2);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 20px 60px rgba(0,0,0,.5) }
.film.smal .tekst h1{ font-size:2rem }
.film.smal .tekst h2{ font-size:1.5rem }
.film.smal .tekst p{ font-size:.95rem; margin-top:10px }
.film.smal .tekst .kicker{ font-size:.66rem; margin-bottom:10px }
.film.smal .tekst.intro .kicker{ padding:6px 12px; font-size:.6rem; letter-spacing:.1em; white-space:normal }
.film.smal .tekst .meer{ margin-top:14px; font-size:.92rem }
.film.smal .tekst .vinklijst{ margin-top:12px; gap:8px }
.film.smal .tekst .vinklijst li{ font-size:.88rem }
.film.smal .tekst .vinklijst li:nth-child(n+4){ display:none }   /* op een telefoon drie punten, anders bedekt het paneel het scherm */
.film.smal .tekst .stapjes{ margin-top:12px; gap:8px }
.film.smal .tekst .stapjes span{ display:none }
.film.smal .finale .glas{ display:none }
.film.smal .finale .diensten{ justify-content:flex-start; font-size:.9rem; gap:4px 10px; margin-top:12px }
.film.smal .tekst .acties{ margin-top:18px }
.film.smal .tekst .acties .knop{ padding:11px 18px; font-size:.9rem }
.film.smal .stippen{ right:8px; gap:6px }
.film.smal .stippen button span{ display:none }
.film.smal .scrolhint{ display:none }

/* ---------- telefoon (10-9): compacter paneel, altijd boven de knoppenbalk van de browser ---------- */
/* 100vh is op een telefoon de hoogte zónder de balk van de browser, 100svh die mét: het verschil houden we onderin vrij.
   (Oudere browsers kennen svh niet en houden gewoon 26px.) */
.film.smal .tekst, .film.smal .tekst.intro, .film.smal .tekst.finale, .film.smal .tekst.boven, .film.smal .tekst.rechts, .film.smal .tekst.onder, .film.smal .tekst.bovenmidden{
  bottom:calc(26px + (100vh - 100svh)); padding:15px 18px 17px; will-change:opacity, transform }
.film.smal .stippen{ display:none }   /* te klein om op te tikken en ze stonden over de apparaten */
.film.smal .tekst h2{ font-size:1.32rem; line-height:1.15 }
.film.smal .tekst p{ font-size:.9rem; line-height:1.5; margin-top:8px }
.film.smal .tekst .kicker{ margin-bottom:8px }
.film.smal .tekst .teller{ font-size:.72rem; margin-bottom:6px }
.film.smal .tekst .stempel + .teller{ display:block; margin-left:0 !important }   /* bij de voorbeelden: op een eigen regel onder het stempel */
.film.smal .tekst .vinklijst{ margin-top:10px; gap:6px }
/* van elk punt alleen het vetgedrukte begin; de uitleg erachter staat op de pagina van die dienst */
.film.smal .tekst .vinklijst li span:has(b){ font-size:0 }
.film.smal .tekst .vinklijst li span:has(b) b{ font-size:.88rem }
.film.smal .tekst .meer{ margin-top:10px }
.film.smal .tekst .logootje{ height:30px; margin-bottom:8px }
.film.smal .tekst .stempel{ margin-bottom:6px }
.film.smal .alleen-breed{ display:none }

/* ---------- liggende telefoon: de brede opstelling, maar compact ---------- */
.film.liggend .stippen, .film.liggend .scrolhint{ display:none }
.film.liggend .tekst{ max-width:min(400px, 38%) }
.film.liggend .tekst.intro{ top:78px; max-width:min(400px, 44%) }
.film.liggend .tekst.boven{ top:80px }
.film.liggend .tekst h1{ font-size:1.75rem }
.film.liggend .tekst h2{ font-size:1.3rem }
.film.liggend .tekst p{ font-size:.86rem; margin-top:8px }
.film.liggend .tekst .kicker{ margin-bottom:8px }
.film.liggend .tekst.intro .kicker{ margin-bottom:12px; padding:5px 12px; font-size:.58rem; letter-spacing:.06em }
.film.liggend .tekst .teller{ margin-bottom:6px }
.film.liggend .tekst .vinklijst{ display:none }
.film.liggend .tekst .stapjes{ margin-top:10px; gap:6px }
.film.liggend .tekst .stapjes span{ display:none }
.film.liggend .tekst .meer{ margin-top:10px; font-size:.86rem }
.film.liggend .tekst .acties{ margin-top:14px }
.film.liggend .tekst .acties .knop{ padding:9px 16px; font-size:.86rem }
.film.liggend .tekst.finale{ top:56% }
.film.liggend .tekst.bovenmidden{ top:74px; padding:12px 18px 14px }
.film.liggend .tekst.onder{ padding:12px 18px 14px; bottom:4% }
.film.liggend .tekst .logootje{ display:none }
.film.liggend .alleen-breed{ display:none }
/* de gewone tekstblokken midden in het vrije stuk onder de kopbalk, en bij twee alinea's alleen de eerste */
.film.liggend .tekst:not(.intro):not(.finale):not(.bovenmidden):not(.onder):not(.boven){ top:calc(50% + 32px) }
.film.liggend .tekst h2 ~ p + p{ display:none }
/* het contactblok: kop en de twee knoppen naast elkaar (de uitleg staat onder de film nog een keer) */
.film.liggend .tekst:not(.finale):has(.acties) p:not(.kicker){ display:none }
.film.liggend .tekst .acties{ flex-wrap:nowrap; gap:10px }
.film.liggend .tekst .acties .knop{ padding:8px 13px; font-size:.8rem; white-space:nowrap }
.film.smal.kort .tekst .meer{ font-size:.84rem }

/* ---------- kleine telefoon (lager dan 640px, bv. iPhone SE): alleen de kern ---------- */
.film.smal.kort .tekst h1{ font-size:1.55rem }
.film.smal.kort .tekst h2{ font-size:1.15rem }
.film.smal.kort .tekst p{ font-size:.84rem; line-height:1.45; margin-top:6px }
.film.smal.kort .tekst .kicker{ margin-bottom:6px }
.film.smal.kort .tekst.intro .kicker{ display:none }
.film.smal.kort .tekst .vinklijst, .film.smal.kort .tekst .logootje{ display:none }
.film.smal.kort .tekst h2 ~ p + p{ display:none }
.film.smal.kort .tekst .stapjes{ margin-top:8px; gap:5px }
.film.smal.kort .tekst .stapjes b.nr{ width:24px; height:24px; font-size:.8rem }
.film.smal.kort .tekst .acties{ margin-top:12px; gap:8px }
.film.smal.kort .tekst .acties .knop{ padding:9px 14px; font-size:.84rem }
.film.smal.kort .finale .diensten{ font-size:.82rem; margin-top:8px }

/* ---------- zonder beweging (of zonder script): alles gewoon onder elkaar ---------- */
.film.plat{ height:auto !important; padding-top:100px }
.film.plat .toneel{ position:static; height:auto; overflow:visible; padding:40px 0 20px }
.film.plat .wereld, .film.plat .golf, .film.plat .stippen, .film.plat .scrolhint, .film.plat .lucht{ display:none }
.film.plat .tekst{ position:static; transform:none; visibility:visible; max-width:760px; width:auto; margin:0 auto; padding:36px 26px; text-align:left; background:none; border:none; box-shadow:none }
.film.plat .tekst .binnen{ opacity:1 !important; transform:none !important }
.film.plat .tekst .vinklijst li, .film.plat .tekst .stapjes li{ opacity:1; transform:none }
.film.plat .finale .glas{ display:none }
.film.plat .tekst.finale .diensten, .film.plat .tekst.finale .acties{ justify-content:flex-start }
@media (prefers-reduced-motion:reduce){ .tekst h1 .regel span{ animation:none } }

/* ---------- apparaten uit een foto (het bureau van Patrick) ----------
   Elk apparaat is een uitsnede uit dezelfde foto (clip-path op het beeld);
   het scherm ligt er met een perspectiefmatrix precies op. */
.app.foto{ width:var(--w); height:var(--h) }
.app.foto .beeld{ position:absolute; left:calc(-1 * var(--bx)); top:calc(-1 * var(--by)); width:var(--fw); height:auto; max-width:none; pointer-events:none;
  clip-path:var(--knipvorm, polygon(var(--knip))) }
/* een los, vrijstaand apparaat (PNG met doorzichtige achtergrond): het beeld vult het kader, geen uitsnede nodig */
.app.foto.los .beeld{ left:0; top:0; width:100%; height:100%; clip-path:none; filter:drop-shadow(0 18px 30px rgba(0,0,0,.55)) }
/* ronde schermhoeken zoals op de echte apparaten (in de platte schermmaat) */
.app.foto.los.laptop .scherm{ border-radius:8px }
.app.foto.los.tablet .scherm{ border-radius:12px }
.app.foto.los.tel .scherm{ border-radius:16px }
.app.foto.los.monitor .scherm{ border-radius:3px }
.app.foto .scherm{ position:absolute; left:0; top:0; transform-origin:0 0; border:none; outline:none; border-radius:3px; background:#05080D; box-shadow:none }
.app.foto.aan .scherm{ box-shadow:0 0 30px rgba(70,150,255,.3), 0 0 90px rgba(47,140,255,.18) }
.app.foto .scherm .inhoud, .app.foto .scherm .vlak{ background:#0A101C }
/* de foto van het hele bureau als achtergrond tijdens de hero: scherp in de wereld, vaag erachter over het hele scherm */
.fotowand{ position:absolute; left:50%; top:50%; transform-origin:center; pointer-events:none; z-index:0; object-fit:fill; max-width:none }
.fotowand-achter{ position:absolute; left:-40px; top:-40px; width:calc(100% + 80px); height:calc(100% + 80px); max-width:none; object-fit:cover; filter:blur(28px) brightness(.55); pointer-events:none; z-index:0 }
.film.smal .fotowand{ display:none }