/* =========================================================
   Identi Media — stijl
   Kleuren en lettertypes staan bovenaan als variabelen.
   ========================================================= */

@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/montserrat-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/montserrat-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/montserrat-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:italic;font-weight:800;font-display:swap;src:url("../fonts/montserrat-latin-800-italic.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:900;font-display:swap;src:url("../fonts/montserrat-latin-900-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:italic;font-weight:900;font-display:swap;src:url("../fonts/montserrat-latin-900-italic.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-latin-600-normal.woff2") format("woff2")}

:root{
  /* Kleuren */
  --nacht:#0A0E1A;        /* achtergrond */
  --nacht-2:#0D1222;      /* tweede achtergrond */
  --vlak:#111729;         /* kaarten */
  --blauw:#087BFF;        /* Identi-blauw */
  --blauw-licht:#2B8FFF;
  --blauw-zacht:#7FB8FF;  /* links */
  --wit:#FFFFFF;
  --tekst-zacht:#C9D2E3;
  --tekst-stil:#9FB0CC;
  --tekst-klein:#8492AE;
  --lijn:rgba(255,255,255,.10);
  --lijn-sterk:rgba(255,255,255,.20);
  --verloop:linear-gradient(120deg,#0B3FA8 0%,#087BFF 60%,#2EB8FF 100%);

  /* Lettertypes */
  --kop:"Montserrat",Arial,Helvetica,sans-serif;
  --tekst:"Inter","Helvetica Neue",Arial,sans-serif;

  /* Maten */
  --breed:1240px;
  --rand:max(16px,4vw);
  --sectie:clamp(72px,9vw,120px);
  --radius:22px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--nacht);color:var(--wit);font-family:var(--tekst);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--blauw-zacht)}
a:hover{color:var(--wit)}
:focus-visible{outline:3px solid var(--blauw);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--kop);font-weight:900;letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0}
.verborgen{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Layout */
.wrap{max-width:var(--breed);margin:0 auto}
.band{padding-left:var(--rand);padding-right:var(--rand)}
.sectie{padding-block:var(--sectie)}
.sectie--donker{background:var(--nacht-2);border-top:1px solid rgba(255,255,255,.06)}
.label{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tekst-stil)}
.label--blauw{color:var(--blauw)}
.accent{color:var(--blauw);font-style:italic}
.kop-xl{font-size:clamp(44px,6.8vw,100px);line-height:.96}
.kop-l{font-size:clamp(34px,4.4vw,60px);line-height:1.03}
.kop-m{font-size:clamp(28px,3.4vw,46px);line-height:1.05}
.intro{font-size:clamp(17px,1.4vw,19px);color:var(--tekst-zacht);max-width:32em}
.zacht{color:var(--tekst-zacht)}

/* Header */
.kop-balk{position:sticky;top:0;z-index:50;background:rgba(10,14,26,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:16px}
.merk{display:flex;align-items:center;gap:10px;text-decoration:none}
.merk img{width:42px;height:auto}
.merk span{font-family:var(--kop);font-weight:900;font-size:19px;letter-spacing:.02em;color:var(--wit)}
.merk b{color:var(--blauw);font-weight:900}
.nav-links{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:500}
.nav-links a{color:var(--tekst-zacht);text-decoration:none}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--wit)}
.nav-links a[aria-current="page"]:not(.knop){box-shadow:inset 0 -2px 0 var(--blauw)}
.portal-link{display:flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--lijn-sterk);border-radius:999px}
.menu-knop{display:none;background:none;border:1px solid var(--lijn-sterk);color:var(--wit);border-radius:999px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer;align-items:center;gap:8px}

/* Knoppen */
.knop{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--blauw);color:var(--wit);padding:16px 28px;border-radius:999px;font-weight:600;text-decoration:none;border:0;font:inherit;font-weight:600;cursor:pointer;transition:background .2s,transform .2s}
.knop:hover{background:var(--blauw-licht);color:var(--wit);transform:translateY(-1px)}
.knop--klein{padding:10px 20px;font-size:15px}
.knop--rand{background:transparent;border:1px solid var(--lijn-sterk)}
.knop--rand:hover{background:rgba(255,255,255,.06)}
.knop--nacht{background:var(--nacht)}
.knop--nacht:hover{background:#1a2238}
.knop--glans::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));transform:translateX(-120%);animation:glans 3.2s ease-in-out infinite}
@keyframes glans{0%{transform:translateX(-120%)}55%,100%{transform:translateX(260%)}}
.knoppen{display:flex;flex-wrap:wrap;gap:14px}
.pijl-link{font-weight:600;text-decoration:none}

/* Hero */
.hero{padding-block:clamp(72px,9vw,120px) clamp(64px,7vw,96px)}
.hero-grid{display:flex;flex-wrap:wrap;align-items:center;gap:56px}
.hero-tekst{flex:999 1 540px;min-width:0;position:relative}
.hero-tekst > *{position:relative}
.hero-swoosh{position:absolute!important;left:-40px;top:-80px;width:400px;max-width:70%;opacity:.9;pointer-events:none}
.hero-label{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.puls{width:8px;height:8px;border-radius:50%;background:var(--blauw);animation:puls 2s ease-in-out infinite}
@keyframes puls{0%,100%{box-shadow:0 0 0 0 rgba(8,123,255,.6)}50%{box-shadow:0 0 0 8px rgba(8,123,255,0)}}
.hero .kop-xl{font-size:clamp(42px,5.6vw,84px)}
.hero .intro{margin-top:28px}
.hero .knoppen{margin-top:40px}
.regel{display:block;overflow:hidden;padding-bottom:.06em}
.regel > span{display:block}
.hero-media{flex:1 1 360px;min-width:0;display:flex;justify-content:center;position:relative;padding:20px 0}
.gloed{position:absolute;inset:10% 5%;background:radial-gradient(closest-side,rgba(8,123,255,.35),rgba(8,123,255,0));filter:blur(10px);pointer-events:none}
.zweef-a{animation:zweefA 6s ease-in-out infinite}
.zweef-b{animation:zweefB 7s ease-in-out infinite;margin:60px 0 0 -30px}
@keyframes zweefA{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-14px) rotate(-6deg)}}
@keyframes zweefB{0%,100%{transform:translateY(0) rotate(5deg)}50%{transform:translateY(12px) rotate(5deg)}}

/* Videokaart */
.video-kaart{position:relative;width:240px;max-width:46%;aspect-ratio:9/16;border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px rgba(0,0,0,.5);background:var(--vlak);padding:0;cursor:pointer;color:var(--wit);font:inherit;text-align:left}
.video-kaart video{width:100%;height:100%;object-fit:cover}
.video-kaart .speel{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;background:rgba(10,14,26,.75);display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.video-kaart:hover .speel{background:var(--blauw);transform:scale(1.08)}
.video-kaart .naam{position:absolute;left:12px;bottom:18px;font-size:12px;font-weight:600;background:rgba(10,14,26,.75);padding:5px 10px;border-radius:999px;max-width:calc(100% - 76px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.video-paar{display:flex;gap:16px}
.video-paar .video-kaart{width:50%;max-width:none;box-shadow:none;border-radius:22px}
.video-paar .video-kaart:nth-child(2){margin-top:56px}
.video-paar--om .video-kaart:nth-child(1){margin-top:56px}
.video-paar--om .video-kaart:nth-child(2){margin-top:0}

/* Lopende band */
.band-loop{border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:22px 0;overflow:hidden}
.band-loop-rij{display:flex;gap:48px;width:max-content;font-family:var(--kop);font-weight:800;font-size:clamp(20px,2vw,26px);text-transform:uppercase;white-space:nowrap;color:#5C6B88;animation:loop 30s linear infinite}
.band-loop-rij i{color:var(--blauw);font-style:normal}
.band-loop-rij .wit{color:var(--wit)}
@keyframes loop{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Deuren (home) */
.deuren{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.deur{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:380px;border-radius:24px;overflow:hidden;border:1px solid var(--lijn);color:var(--wit);text-decoration:none;background:var(--vlak);transition:transform .3s,border-color .3s}
.deur:hover{transform:translateY(-4px);border-color:rgba(8,123,255,.7);color:var(--wit)}
.deur > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;transition:transform .6s,opacity .3s}
.deur:hover > img{transform:scale(1.04);opacity:.6}
.deur::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,26,0) 30%,rgba(10,14,26,.95));z-index:1}
.deur--blauw{background:var(--verloop);border-color:rgba(8,123,255,.5)}
.deur--blauw::before{display:none}
.deur--blauw > img{inset:auto -60px auto auto;top:20px;width:360px;height:auto;object-fit:contain;opacity:.35}
.deur-tekst{position:relative;z-index:2;padding:28px;display:flex;flex-direction:column;gap:6px}
.deur-tekst strong{font-family:var(--kop);font-weight:900;font-size:clamp(26px,2.4vw,30px);line-height:1.05}
.deur-tekst span{color:var(--blauw-zacht);font-weight:600;font-size:15px}
.deur--blauw .deur-tekst span{color:var(--wit)}

/* Paginakop */
.pagina-kop{overflow:hidden;padding-block:clamp(72px,8vw,104px) clamp(40px,5vw,72px);position:relative}
.pagina-kop .kop-xl{max-width:13em}
.pagina-kop .intro{margin-top:24px}
.pagina-kop .swoosh-deco{position:absolute;right:-40px;top:-60px;width:460px;max-width:60%;opacity:.45;pointer-events:none}
.kop-rij{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:28px}

/* Cases */
.cases{display:flex;flex-direction:column;gap:clamp(80px,9vw,120px)}
.case{display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.case:nth-child(even){flex-direction:row-reverse}
.case-media,.case-tekst{flex:1 1 420px;min-width:0}
.case h2{font-size:clamp(36px,3.6vw,48px);line-height:1;margin-top:12px}
.case-tekst > p.zacht{margin-top:20px;max-width:30em}
.tags{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.15);font-size:14px}
.resultaat{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
.groot-getal{font-family:var(--kop);font-weight:900;font-size:clamp(48px,5vw,64px);line-height:1;font-variant-numeric:tabular-nums;background:linear-gradient(100deg,#FFFFFF 30%,#4FA6FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.resultaat p{margin-top:8px;font-weight:500}
.bron{display:block;margin-top:4px;font-size:13px;color:var(--tekst-klein)}

/* Afsluiter */
.afsluiter{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid rgba(255,255,255,.12);padding-top:56px}
.afsluiter h2{max-width:16em}
.blauw-blok{position:relative;overflow:hidden;border-radius:28px;padding:56px max(24px,4vw);background:var(--verloop);display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}
.blauw-blok > img{position:absolute;right:-60px;top:-40px;width:420px;opacity:.25;pointer-events:none}
.blauw-blok > *:not(img){position:relative}
.blauw-blok h2{max-width:14em}

/* Kaarten (Herken je dit) */
.raster-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}
.vraag-kaart{padding:28px;border-radius:20px;border:1px solid var(--lijn);background:var(--vlak);font-family:var(--kop);font-weight:800;font-size:22px;line-height:1.2;min-height:150px;display:flex;align-items:flex-start}
.vraag-kaart--blauw{border-color:rgba(8,123,255,.5);background:linear-gradient(160deg,#0F2A5C,var(--vlak))}

/* Diensten */
.diensten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:40px}
.dienst{display:flex;flex-direction:column;gap:12px;border-top:2px solid var(--blauw);padding-top:24px}
.dienst strong{font-family:var(--kop);font-weight:800;font-size:24px}

/* Pakketten */
.pakketten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:16px;align-items:stretch}
.pakket{position:relative;display:flex;flex-direction:column;gap:18px;padding:36px 30px;border-radius:24px;border:1px solid rgba(255,255,255,.12);background:var(--vlak)}
.pakket--uitgelicht{border-color:var(--blauw);background:linear-gradient(165deg,#0F2A5C,var(--vlak) 70%);box-shadow:0 20px 60px rgba(8,123,255,.2)}
.pakket-badge{position:absolute;top:-14px;left:30px;background:var(--blauw);padding:4px 14px;border-radius:999px;font-size:13px;font-weight:600}
.pakket-nr{font-family:var(--kop);font-weight:800;font-size:14px;color:var(--blauw)}
.pakket h3{font-size:34px;line-height:1}
.pakket-voor{color:var(--tekst-zacht)}
.pakket ul{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--lijn);display:flex;flex-direction:column;gap:10px;flex-grow:1;font-size:16px}
.pakket li{display:flex;gap:10px;align-items:flex-start}
.pakket li svg{flex:none;margin-top:5px;color:var(--blauw)}
.pakket .knop{width:100%}

/* Stappen */
.stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));border-top:1px solid rgba(255,255,255,.12)}
.stappen li{padding:28px 24px 0 0;display:flex;flex-direction:column;gap:10px}
.stap-nr{font-family:var(--kop);font-weight:800;font-size:15px;color:var(--blauw)}
.stappen strong{font-family:var(--kop);font-weight:800;font-size:22px}
.stappen span:last-child{color:var(--tekst-zacht);font-size:15px}

/* Vragen */
.vragen-grid{display:flex;flex-wrap:wrap;gap:56px}
.vragen-grid > div:first-child{flex:1 1 300px;min-width:0}
.vragen{flex:999 1 540px;min-width:0;border-top:1px solid rgba(255,255,255,.12)}
.vragen details{border-bottom:1px solid rgba(255,255,255,.12)}
.vragen summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;gap:20px;font-family:var(--kop);font-weight:800;font-size:clamp(18px,1.6vw,21px)}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"+";color:var(--blauw);font-size:26px;line-height:1;transition:transform .25s}
.vragen details[open] summary::after{transform:rotate(45deg)}
.vragen details p{padding:0 0 24px;color:var(--tekst-zacht);max-width:36em}

/* Over ons */
.over-grid{display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.over-grid figure{flex:1.3 1 520px;min-width:0;margin:0}
.over-grid figure img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:24px}
.over-tekst{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:32px}
.over-tekst > p{font-size:clamp(18px,1.5vw,20px);color:var(--tekst-zacht);max-width:28em}
.team{border-top:1px solid rgba(255,255,255,.12)}
.team-lid{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.team-lid strong{font-family:var(--kop);font-weight:800;font-size:22px}
.team-lid span{color:var(--tekst-stil);font-size:15px}

/* Contact */
.contact-grid{display:flex;flex-wrap:wrap;gap:64px}
.contact-tekst{flex:1 1 400px;min-width:0;position:relative}
.contact-tekst > *{position:relative}
.contact-gegevens{margin-top:44px;border-top:1px solid rgba(255,255,255,.12)}
.contact-gegevens div{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.contact-gegevens dt{color:var(--tekst-stil)}
.contact-gegevens dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.contact-gegevens a{color:var(--wit);text-decoration:none}
.formulier{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:16px;padding:clamp(24px,3vw,36px);border-radius:24px;background:var(--vlak);border:1px solid var(--lijn)}
.veld-rij{display:flex;flex-wrap:wrap;gap:16px}
.veld{flex:1 1 200px;display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--tekst-zacht)}
.veld input,.veld textarea{background:var(--nacht);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:14px;color:var(--wit);font:inherit;font-size:16px;font-weight:400;width:100%}
.veld input:focus,.veld textarea:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px rgba(8,123,255,.25)}
.veld textarea{resize:vertical;min-height:96px}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-size:14px;font-weight:600;color:var(--tekst-zacht);margin-bottom:10px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chips span{display:inline-block;padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.2);font-size:14px;cursor:pointer;transition:background .2s,border-color .2s}
.chips input:checked + span{background:var(--blauw);border-color:var(--blauw);font-weight:600}
.chips input:focus-visible + span{outline:3px solid var(--blauw);outline-offset:2px}
.form-noot{font-size:13px;color:var(--tekst-klein)}
.form-melding{padding:14px 16px;border-radius:12px;font-size:15px}
.form-melding--goed{background:rgba(8,123,255,.15);border:1px solid rgba(8,123,255,.5)}
.form-melding--fout{background:rgba(255,90,90,.12);border:1px solid rgba(255,90,90,.45)}
.honing{position:absolute;left:-9999px}


/* Zelf samenstellen */
.samensteller{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.samensteller-velden{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:26px;padding:clamp(24px,3vw,36px);border-radius:24px;background:var(--vlak);border:1px solid var(--lijn)}
.samensteller-samenvatting{flex:1 1 300px;min-width:0;position:sticky;top:96px;display:flex;flex-direction:column;gap:16px;padding:clamp(24px,3vw,32px);border-radius:24px;background:linear-gradient(165deg,#0F2A5C,var(--vlak) 75%);border:1px solid rgba(8,123,255,.5)}
.samensteller-samenvatting ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.samensteller-samenvatting li{display:flex;gap:10px;font-size:16px;color:var(--tekst-zacht)}
.samensteller-samenvatting li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--blauw);margin-top:9px}
.samensteller-samenvatting .knop{width:100%}
.keuze legend{font-family:var(--kop);font-weight:800;font-size:18px;color:var(--wit);margin-bottom:12px}
@media (max-width:900px){.samensteller-samenvatting{position:static}}

/* Wat klanten zeggen */
.reviews-sectie[hidden]{display:none}
.reviews-kop{margin-top:14px;max-width:14em}
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px;margin-top:clamp(36px,4vw,56px)}
.review{position:relative;margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:clamp(26px,3vw,36px);background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--radius);overflow:hidden}
.review::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--verloop)}
.review-teken{font-family:var(--kop);font-weight:900;font-size:72px;line-height:.6;color:var(--blauw);height:28px}
.review blockquote{margin:0}
.review blockquote p{font-size:clamp(17px,1.3vw,19px);line-height:1.6;color:var(--wit)}
.review figcaption{display:flex;flex-direction:column;gap:2px;padding-top:20px;border-top:1px solid var(--lijn)}
.review figcaption strong{font-family:var(--kop);font-weight:800;font-size:15px}
.review figcaption span{font-size:14px;color:var(--tekst-stil)}

/* Tekstpagina's */
.tekstpagina{max-width:760px}
.tekstpagina h1{font-size:clamp(36px,4.6vw,60px);line-height:1.02}
.tekstpagina .bijgewerkt{margin-top:14px;color:var(--tekst-stil);font-size:15px}
.tekstpagina h2{font-size:24px;margin:44px 0 12px;letter-spacing:0}
.tekstpagina h3{font-size:19px;margin:28px 0 8px;letter-spacing:0}
.tekstpagina p,.tekstpagina li{color:var(--tekst-zacht)}
.tekstpagina p + p{margin-top:12px}
.tekstpagina ul,.tekstpagina ol{padding-left:22px}
.tekstpagina li + li{margin-top:6px}
.tekstpagina .kader{margin-top:32px;padding:22px 24px;border-radius:16px;background:var(--vlak);border:1px solid var(--lijn)}

/* Footer */
.voet{padding-block:64px 32px;border-top:1px solid rgba(255,255,255,.08)}
.voet-slogan{font-family:var(--kop);font-weight:900;font-size:clamp(44px,9vw,140px);line-height:.9;letter-spacing:-.03em;color:#1A2340}
.voet-slogan em{color:var(--blauw);font-style:normal}
.voet-kolommen{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:32px;font-size:14px;color:var(--tekst-stil)}
.voet-kolommen div{display:flex;flex-direction:column;gap:6px}
.voet-kolommen strong{color:var(--wit);font-weight:600;margin-bottom:4px}
.voet-kolommen a{color:var(--tekst-stil);text-decoration:none}
.voet-kolommen a:hover{color:var(--wit)}
.voet-onder{margin-top:40px;font-size:13px;color:var(--tekst-klein)}

/* Videospeler (pop-up) */
.speler{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;margin:0;color:var(--wit)}
.speler::backdrop{background:rgba(5,7,14,.88);backdrop-filter:blur(6px)}
.speler-binnen{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:max(56px,env(safe-area-inset-top,0px)) 16px 24px}
.speler video{height:min(86vh,900px);width:auto;max-width:100%;aspect-ratio:9/16;border-radius:22px;background:#000;object-fit:contain}
.speler-sluit{position:fixed;top:max(16px,env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));width:48px;height:48px;border-radius:50%;border:1px solid var(--lijn-sterk);background:rgba(10,14,26,.8);color:var(--wit);cursor:pointer;display:flex;align-items:center;justify-content:center}
.speler-sluit:hover{background:var(--blauw)}

/* Mobiele knop onderin */
.mobiel-cta{display:none}

/* 404 */
.leeg{min-height:60vh;display:flex;flex-direction:column;justify-content:center;gap:24px}

/* Paginaovergang */
body.vertrekt main{opacity:0;transition:opacity .22s ease}

/* ---------- Mobiel ---------- */
@media (max-width:900px){
  .menu-knop{display:inline-flex}
  .nav{flex-wrap:wrap}
  .nav-links{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 0 16px}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 0;border-bottom:1px solid var(--lijn);font-size:18px}
  .nav-links a[aria-current="page"]:not(.knop){box-shadow:none;color:var(--blauw)}
  .nav-links .portal-link{border:0;border-bottom:1px solid var(--lijn);border-radius:0;padding:14px 0}
  .nav-links .knop{margin-top:16px;border-bottom:0}
  .mobiel-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:linear-gradient(180deg,rgba(10,14,26,0),rgba(10,14,26,.95) 35%)}
  .mobiel-cta .knop{width:100%}
  body{padding-bottom:84px}
  .hero-swoosh{width:260px;top:-56px;left:-20px}
  .zweef-b{margin:48px 0 0 -24px}
  .case:nth-child(even){flex-direction:row}
  .deur{min-height:300px}
}
@media (max-width:520px){
  .video-paar{gap:10px}
  .video-paar .video-kaart:nth-child(2){margin-top:32px}
  .video-paar--om .video-kaart:nth-child(1){margin-top:32px}
  .team-lid{flex-direction:column;gap:2px}
}

/* Minder beweging */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}