/* =========================================================================
   Screptor IT — designsysteem
   Huisstijl afgeleid uit Screptor Sales & Marketing 2026 (navy / goud / Arial).
   ========================================================================= */

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

/* ----------------------------------------------------------- tokens */
:root{
  --ink-900:#061726; --ink-850:#0A2138; --ink-800:#0E2B45; --ink-750:#0F3050;
  --ink-700:#13385A; --ink-600:#1B4A73; --brand:#133A5E;
  --gold:#F5B301; --gold-2:#F7C43B;
  --paper:#fff; --paper-2:#F6F8FA; --paper-3:#EDF1F5;
  --surface:#fff; --surface-2:#F6F8FA; --field:#fff;
  --hdr-solid:rgba(255,255,255,.88); --logo-sub:#8A6400;
  --focus:#8A6400;
  --line:#E2E7ED; --line-dark:rgba(255,255,255,.13);
  --slate:#516375; --slate-2:#5E6F82; --sky:#C4D3E2; --sky-dim:#9DB2C7;

  --wrap:1220px; --gutter:clamp(1.15rem,4vw,2.5rem);
  --r-sm:8px; --r:14px; --r-lg:22px; --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sh-1:0 1px 2px rgba(10,33,56,.05), 0 6px 20px -8px rgba(10,33,56,.12);
  --sh-2:0 2px 4px rgba(10,33,56,.06), 0 22px 48px -18px rgba(10,33,56,.28);
  --hdr:76px;
}

/* ----------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px)}
body{margin:0;background:var(--paper);color:var(--slate);
  font:400 clamp(1rem,.98rem + .12vw,1.0625rem)/1.72 Inter,Arial,"Liberation Sans",Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;color:var(--brand);font-weight:800;letter-spacing:-.022em;line-height:1.12;
  text-wrap:balance}
p,li{text-wrap:pretty}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold);color:var(--ink-900)}

/* ----------------------------------------------------------- helpers */
.wrap{width:min(100% - (var(--gutter) * 2),var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:var(--ink-900);
  padding:.85rem 1.4rem;font-weight:700;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1rem;
  font-size:.78rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--brand)}
.dark .eyebrow,.hero .eyebrow,.phero .eyebrow,.ctaband .eyebrow,.portalband .eyebrow,
.case .eyebrow,.teaser .eyebrow{color:var(--gold-2)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--gold);border-radius:2px}
.sec-head{max-width:56ch}
.sec-split{display:grid;gap:1.6rem;align-items:end}
.sec-split .sec-head{max-width:38ch;margin:0}
.sec-split .sec-aside{display:grid;gap:1rem;align-content:end}
.sec-split .sec-aside p{font-size:1.02rem;line-height:1.68;max-width:44ch}
.sec-center{max-width:44ch;margin-inline:auto;text-align:center}
.sec-center .eyebrow{justify-content:center}
.sec-head h2{font-size:clamp(1.75rem,1.1rem + 2.5vw,2.85rem)}
.sec-head .intro{margin-top:1.05rem;font-size:clamp(1.02rem,.99rem + .3vw,1.16rem);line-height:1.68}

section{padding:clamp(3.5rem,6vw,6rem) 0;scroll-margin-top:calc(var(--hdr) + 20px)}
.sec-tight{padding-block:clamp(2.75rem,5vw,4.5rem)}

/* donkere secties */
.dark{background:var(--ink-850);color:var(--sky);position:relative;isolation:isolate}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark .intro,.dark p{color:var(--sky)}
.dark::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(70% 90% at 88% 6%,rgba(28,74,115,.55),transparent 62%),
    radial-gradient(60% 80% at 4% 96%,rgba(245,179,1,.08),transparent 60%)}
.tint{background:var(--paper-2)}

/* ----------------------------------------------------------- knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.65rem;border-radius:var(--r-pill);font-weight:700;font-size:.965rem;
  letter-spacing:-.005em;transition:transform .22s var(--ease),box-shadow .22s var(--ease),
  background-color .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
  border:2px solid transparent;white-space:nowrap}
.btn svg{width:17px;height:17px;flex:0 0 auto;transition:transform .22s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--gold);color:var(--ink-900);box-shadow:0 8px 26px -10px rgba(245,179,1,.85)}
.btn-primary:hover{background:var(--gold-2);box-shadow:0 14px 34px -10px rgba(245,179,1,.95)}
.btn-dark{background:var(--brand);color:#fff}
.btn-dark:hover{background:var(--ink-700)}
.btn-ghost{border-color:rgba(255,255,255,.28);color:#fff}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-outline{border-color:var(--line);color:var(--brand);background:var(--surface)}
.btn-outline:hover{border-color:var(--brand)}
.btn-sm{padding:.6rem 1.15rem;font-size:.875rem}
.link-arrow{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;color:var(--brand);
  font-size:.94rem}
.link-arrow svg{width:16px;height:16px;transition:transform .22s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}
.dark .link-arrow,.portalband .link-arrow,.case .link-arrow,.teaser .link-arrow,
.ctaband .link-arrow,.resultbox .link-arrow{color:var(--gold)}

/* ----------------------------------------------------------- logo */
.logo{display:inline-flex;align-items:center;gap:.78rem}
.logo .mark{display:block;height:26px;width:auto;flex:0 0 auto;fill:currentColor}
.logo .mark .a{fill:var(--gold)}
.logo .wm{line-height:1.02}
.logo .wm b{display:block;font-size:1.22rem;font-weight:800;letter-spacing:.045em}
.logo .wm span{display:block;margin-top:2px;font-size:.5rem;font-weight:700;letter-spacing:.16em;
  color:var(--gold)}
.logo-light{color:#fff}
.logo-dark{color:var(--brand)}

/* ----------------------------------------------------------- header */
.hdr{position:fixed;inset:0 0 auto;z-index:100;height:var(--hdr);display:flex;align-items:center;
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
  border-bottom:1px solid transparent}
.hdr::before{content:"";position:absolute;inset:0;backdrop-filter:blur(14px);opacity:0;
  transition:opacity .3s var(--ease);background:var(--hdr-solid);z-index:-1}
.hdr.solid::before{opacity:1}
.hdr.solid{border-bottom-color:var(--line);box-shadow:0 1px 24px -8px rgba(10,33,56,.16)}
.hdr.solid .logo{color:var(--brand)}
.hdr.solid .nav>li>a,.hdr.solid .nav>li>button{color:var(--brand)}
.hdr.solid .hdr-portal{color:var(--brand);border-color:var(--line)}
.hdr.solid .burger{color:var(--brand)}
.hdr.solid .logo .wm span{color:var(--logo-sub)}
.hdr-in{display:flex;align-items:center;gap:1.5rem}
.hdr .logo{color:#fff}
.hdr-spacer{flex:1}

.navwrap{display:none}
.nav{display:flex;align-items:center;gap:.15rem}
.nav>li{position:relative}
.nav>li>a,.nav>li>button{display:inline-flex;align-items:center;gap:.35rem;padding:.6rem .85rem;
  border-radius:var(--r-sm);font-weight:600;font-size:.945rem;color:#fff;
  transition:color .2s var(--ease),background-color .2s var(--ease)}
.nav>li>a:hover,.nav>li>button:hover,.nav>li[data-open="true"]>button{color:var(--gold)}
.nav .chev{width:11px;height:11px;transition:transform .25s var(--ease);opacity:.75}
.nav>li[data-open="true"] .chev{transform:rotate(180deg)}
.nav>li>a[aria-current]{color:var(--gold)}

.mega{position:absolute;top:calc(100% + 14px);left:50%;translate:-50% 0;
  min-width:min(92vw,660px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);padding:1.35rem;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.mega::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.nav>li[data-open="true"] .mega{opacity:1;visibility:visible;transform:none}
.mega-grp+.mega-grp{margin-top:1.15rem;padding-top:1.15rem;border-top:1px solid var(--line)}
.mega-grp>p{margin:0 0 .7rem .55rem;font-size:.68rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate-2)}
.mega-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem}
.mega-list a{display:flex;gap:.85rem;padding:.7rem .6rem;border-radius:var(--r);
  transition:background-color .2s var(--ease)}
.mega-list a:hover{background:var(--paper-2)}
.mega-ic{flex:0 0 auto;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--paper-3);color:var(--brand);transition:background-color .2s var(--ease),color .2s}
.mega-list a:hover .mega-ic{background:var(--gold);color:var(--ink-900)}
.mega-ic svg{width:18px;height:18px}
.mega-txt b{display:block;font-size:.94rem;color:var(--brand);font-weight:700;line-height:1.3}
.mega-txt span{display:block;margin-top:.15rem;font-size:.82rem;color:var(--slate-2);line-height:1.45}

.hdr-actions{display:none;align-items:center;gap:.6rem}
.hdr-portal{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1rem;
  border:1.5px solid rgba(255,255,255,.3);border-radius:var(--r-pill);font-weight:600;font-size:.9rem;
  color:#fff;transition:all .22s var(--ease)}
.hdr-portal:hover{border-color:var(--gold);color:var(--gold)}
.hdr-portal svg{width:15px;height:15px}

.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  align-items:center;color:#fff;margin-left:auto}
.burger i{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .28s var(--ease),opacity .2s var(--ease)}
body.menu-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobiel paneel */
.mnav{position:fixed;inset:var(--hdr) 0 0;z-index:99;background:var(--ink-850);color:#fff;
  padding:1.5rem var(--gutter) 3rem;overflow-y:auto;opacity:0;visibility:hidden;
  transform:translateY(-10px);transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
body.menu-open .mnav{opacity:1;visibility:visible;transform:none}
body.menu-open{overflow:hidden}
.mnav details{border-bottom:1px solid var(--line-dark)}
.mnav summary{display:flex;align-items:center;justify-content:space-between;padding:1.05rem .2rem;
  font-size:1.1rem;font-weight:700;color:#fff;cursor:pointer;list-style:none}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary .chev{width:14px;height:14px;transition:transform .25s var(--ease)}
.mnav details[open] summary .chev{transform:rotate(180deg)}
.mnav .msub{padding:0 0 1rem .2rem;display:grid;gap:.1rem}
.mnav .msub a{display:block;padding:.65rem .2rem;color:var(--sky);font-size:.98rem}
.mnav .msub a:hover{color:var(--gold)}
.mnav>a.mtop{display:block;padding:1.05rem .2rem;font-size:1.1rem;font-weight:700;color:#fff;
  border-bottom:1px solid var(--line-dark)}
.mnav-cta{display:grid;gap:.7rem;margin-top:1.8rem}

/* ----------------------------------------------------------- hero */
.hero{position:relative;min-height:min(100svh,880px);display:flex;align-items:center;
  padding:calc(var(--hdr) + clamp(3rem,7vh,5rem)) 0 clamp(3rem,7vh,5rem);
  background:var(--ink-850);color:var(--sky);overflow:hidden;isolation:isolate}
.hero-canvas{position:absolute;inset:0;z-index:-2;width:100%;height:100%}
.hero-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46% 55% at 78% 28%,rgba(30,86,138,.55),transparent 66%),
    radial-gradient(38% 46% at 12% 78%,rgba(245,179,1,.11),transparent 68%),
    linear-gradient(180deg,rgba(6,23,38,.82) 0%,rgba(6,23,38,.35) 12%,transparent 30%,transparent 62%,rgba(6,23,38,.86) 100%)}
.hero-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(72% 62% at 50% 44%,#000 25%,transparent 78%)}

.hero-in{position:relative;max-width:62rem}
.hero .eyebrow{color:var(--gold-2)}
.hero h1{font-size:clamp(2.65rem,1.35rem + 5.4vw,5.15rem);line-height:.99;letter-spacing:-.038em;
  color:#fff;margin-bottom:1.6rem}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln>span{display:block;transform:translateY(105%);
  animation:lineUp .95s var(--ease) forwards;animation-delay:calc(.1s + var(--i) * .11s)}
.hero h1 .gold{background:linear-gradient(96deg,var(--gold) 6%,#FFD766 52%,var(--gold) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes lineUp{to{transform:none}}
.hero .lead{max-width:44rem;font-size:clamp(1.06rem,1rem + .55vw,1.32rem);line-height:1.62;
  color:var(--sky)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.3rem}
.hero-trust{display:flex;flex-wrap:wrap;gap:.55rem 1.6rem;margin-top:3.2rem;padding-top:1.7rem;
  border-top:1px solid var(--line-dark)}
.hero-trust li{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;
  color:var(--sky-dim)}
.hero-trust svg{width:15px;height:15px;color:var(--gold);flex:0 0 auto}
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:120px;z-index:-1;
  background:linear-gradient(180deg,transparent,var(--ink-850))}
.scroll-hint{display:none;position:absolute;left:50%;bottom:1.6rem;translate:-50% 0;display:grid;place-items:center;
  gap:.5rem;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.42);
  font-weight:700}
.scroll-hint i{display:block;width:1px;height:34px;background:linear-gradient(var(--gold),transparent);
  animation:hint 2.1s var(--ease) infinite}
@keyframes hint{0%{transform:scaleY(.2);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}
  56%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* pagina-hero */
.phero{position:relative;padding:calc(var(--hdr) + clamp(3.4rem,7vw,5.5rem)) 0 clamp(3rem,6vw,4.6rem);
  background:var(--ink-850);color:var(--sky);overflow:hidden;isolation:isolate}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(58% 78% at 84% 8%,rgba(28,78,122,.62),transparent 64%),
             radial-gradient(46% 62% at 2% 100%,rgba(245,179,1,.1),transparent 62%)}
.phero-net{position:absolute;right:-4%;top:6%;width:min(46%,520px);z-index:-1;opacity:.11;
  animation:floaty 16s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(2.5deg)}}
.phero h1{font-size:clamp(2.1rem,1.3rem + 3.5vw,3.7rem);color:#fff;letter-spacing:-.032em;
  max-width:20ch}
.phero .lead{margin-top:1.25rem;max-width:52ch;font-size:clamp(1.02rem,.98rem + .45vw,1.24rem);
  line-height:1.62;color:var(--sky)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-bottom:1.5rem;
  font-size:.8rem;color:var(--sky-dim)}
.crumbs a:hover{color:var(--gold)}
.crumbs svg{width:11px;height:11px;opacity:.5}
.crumbs [aria-current]{color:#fff;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.9rem}
.chips li{padding:.42rem .95rem;border:1px solid rgba(245,179,1,.36);background:rgba(245,179,1,.09);
  border-radius:var(--r-pill);font-size:.79rem;font-weight:700;color:var(--gold-2)}

/* ----------------------------------------------------------- stats */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stats li{background:var(--surface);padding:clamp(1.5rem,3vw,2.3rem)}
.stats .n{display:block;font-size:clamp(2.1rem,1.4rem + 2.6vw,3.1rem);font-weight:800;
  color:var(--brand);letter-spacing:-.04em;line-height:1}
.stats .n em{font-style:normal;color:var(--gold)}
.stats .k{display:block;margin-top:.5rem;font-weight:700;color:var(--brand);font-size:.98rem}
.stats .d{display:block;margin-top:.55rem;font-size:.87rem;line-height:1.55;color:var(--slate-2)}
.dark .stats{background:var(--line-dark);border-color:var(--line-dark)}
.dark .stats li{background:rgba(255,255,255,.035)}
.dark .stats .n,.dark .stats .k{color:#fff}
.dark .stats .d{color:var(--sky-dim)}

/* ----------------------------------------------------------- pillars */
.pillars{display:grid;gap:clamp(1.1rem,2vw,1.6rem);margin-top:clamp(2.2rem,4vw,3.2rem)}
.pillar{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.7rem,3vw,2.6rem);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.pillar::after{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.pillar:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:transparent}
.pillar:hover::after{transform:none}
.pillar-top{display:flex;align-items:center;gap:1rem;margin-bottom:1.3rem}
.pillar-ic{flex:0 0 auto;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  background:var(--gold);color:var(--ink-900);box-shadow:0 10px 26px -12px rgba(245,179,1,.9)}
.pillar-ic svg{width:26px;height:26px}
.pillar .kicker{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:.3rem}
.pillar h3{font-size:clamp(1.45rem,1.2rem + 1vw,1.95rem);overflow-wrap:break-word}
.pillars.p3 .pillar-top{flex-direction:column;align-items:flex-start;gap:.95rem}
.pillars.p3 .pillar h3{font-size:clamp(1.28rem,1rem + .75vw,1.55rem)}
.pillars.p3 .pillar-ic{width:48px;height:48px;border-radius:14px}
.pillars.p3 .pillar-ic svg{width:23px;height:23px}
.pillar>p{margin-bottom:1.5rem;font-size:1.02rem}
.pillar ul{display:grid;gap:.7rem;margin-bottom:1.8rem}
.pillar ul li{display:flex;gap:.7rem;font-size:.94rem;line-height:1.5;color:var(--slate)}
.pillar ul svg{width:17px;height:17px;color:var(--gold);flex:0 0 auto;margin-top:.18rem}
.dark .pillar{background:rgba(255,255,255,.045);border-color:var(--line-dark)}
.dark .pillar ul li{color:var(--sky)}
.dark .pillar:hover{background:rgba(255,255,255,.075)}

/* ----------------------------------------------------------- kaarten */
.grid{display:grid;gap:clamp(1rem,1.8vw,1.4rem);margin-top:clamp(2rem,3.6vw,3rem)}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.4vw,2rem);display:flex;flex-direction:column;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
a.card:hover{border-color:rgba(245,179,1,.55)}
.card-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:1.25rem;
  background:var(--gold);color:var(--ink-900);flex:0 0 auto;
  transition:transform .28s var(--ease)}
.card:hover .card-ic{transform:scale(1.07) rotate(-4deg)}
.card-ic svg{width:22px;height:22px}
.card h3{font-size:1.08rem;margin-bottom:.65rem;line-height:1.32}
.card p{font-size:.93rem;line-height:1.62}
.card .link-arrow{margin-top:1.15rem}
.dark .card{background:rgba(255,255,255,.045);border-color:var(--line-dark)}
.dark .card p{color:var(--sky-dim)}
.dark .card:hover{background:rgba(255,255,255,.08)}

/* uitdagingen (donker) */
.chal-foot{margin-top:clamp(1.6rem,3vw,2.4rem);padding:clamp(1.4rem,2.6vw,2rem);
  border-radius:var(--r-lg);background:rgba(245,179,1,.1);border:1px solid rgba(245,179,1,.28);
  font-size:1.04rem;line-height:1.62;color:#fff;font-weight:500}

/* segmenten */
.segs{display:grid;gap:clamp(1rem,1.8vw,1.4rem);margin-top:clamp(2rem,3.6vw,3rem)}
.seg{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surface);padding:clamp(1.6rem,2.6vw,2.1rem);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.seg:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.seg-ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:var(--gold);
  color:var(--ink-900);margin-bottom:1.3rem}
.seg-ic svg{width:24px;height:24px}
.seg h3{font-size:1.3rem;margin-bottom:.6rem}
.seg p{font-size:.94rem;flex:1}
.seg .seg-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.1rem 0 1.3rem}
.seg .seg-tags span{font-size:.74rem;font-weight:700;padding:.28rem .7rem;border-radius:var(--r-pill);
  background:var(--paper-3);color:var(--brand)}

/* ----------------------------------------------------------- stappen */
.steps{position:relative;display:grid;gap:clamp(1rem,1.8vw,1.35rem);
  margin-top:clamp(2rem,3.6vw,3rem)}
.steps::before{content:"";position:absolute;left:0;right:0;top:52px;height:2px;z-index:0;display:none;
  background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px)}
.step{position:relative;z-index:1}
.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.4vw,1.95rem);transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.step:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.step-n{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.step-n b{font-size:2.1rem;font-weight:800;color:var(--gold);letter-spacing:-.04em;line-height:1}
.step-n .si{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--gold);color:var(--ink-900)}
.step-n .si svg{width:19px;height:19px}
.step h3{font-size:1.05rem;margin-bottom:.6rem}
.step p{font-size:.91rem;line-height:1.6}
.dark .step{background:rgba(255,255,255,.045);border-color:var(--line-dark)}
.dark .step p{color:var(--sky-dim)}
.dark .step-n .si{background:rgba(255,255,255,.09);color:var(--gold)}

/* ----------------------------------------------------------- cases */
.cases{display:grid;gap:clamp(1.1rem,2vw,1.6rem);margin-top:clamp(2rem,3.6vw,3rem)}
.case{position:relative;display:flex;flex-direction:column;background:var(--ink-800);color:var(--sky);
  border:1px solid var(--line-dark);border-radius:var(--r-lg);overflow:hidden;
  padding:clamp(1.7rem,2.8vw,2.4rem);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.case::before{content:"";position:absolute;inset:0;z-index:0;opacity:.55;
  background:radial-gradient(70% 90% at 92% 4%,rgba(37,96,148,.7),transparent 62%)}
.case>*{position:relative;z-index:1}
.case:hover{transform:translateY(-5px);box-shadow:0 30px 60px -30px rgba(6,23,38,.75)}
.case .k{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.9rem;display:block}
.case h3{color:#fff;font-size:clamp(1.35rem,1.15rem + .8vw,1.75rem);margin-bottom:.55rem}
.case .sub{font-size:.95rem;color:var(--sky);font-weight:600;margin-bottom:1.1rem}
.case p{font-size:.95rem;color:var(--sky-dim);flex:1}
.case .tech{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.4rem 0}
.case .tech span{font-size:.74rem;font-weight:700;padding:.3rem .75rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.09);color:#fff}
.case .link-arrow{color:var(--gold)}

/* case-detail */
.casebody{display:grid;gap:clamp(2rem,4vw,3.5rem)}
.casebody>div{max-width:72ch}
.casebody>div.wide{max-width:none}
.casebody h2{font-size:clamp(1.5rem,1.2rem + 1.5vw,2.1rem);margin-bottom:1.1rem}

.casebody p+p{margin-top:.95rem}
.lead-bar{max-width:70ch;border-left:4px solid var(--gold);padding-left:clamp(1.1rem,2vw,1.7rem);
  font-size:clamp(1.04rem,1rem + .4vw,1.2rem);line-height:1.68;color:#3C4E60}
.dark .lead-bar{color:var(--sky)}
.numcards{display:grid;gap:1rem;margin-top:1.6rem}
.numcard{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--gold);
  border-radius:var(--r);padding:1.5rem}
.numcard b{display:block;font-size:1.15rem;color:var(--gold);letter-spacing:.05em;margin-bottom:.7rem}
.numcard h3{font-size:1.02rem;margin-bottom:.5rem}
.numcard p{font-size:.9rem;line-height:1.58}
.resultbox{background:var(--ink-850);color:#fff;border-radius:var(--r-lg);
  padding:clamp(1.7rem,3vw,2.4rem)}
.resultbox .lbl{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:.9rem}
.resultbox p{font-size:1.03rem;line-height:1.66;color:var(--sky)}

/* case-teaser (inline) */
.teaser{display:grid;gap:1.6rem;align-items:center;background:var(--ink-850);color:var(--sky);
  border-radius:var(--r-lg);padding:clamp(1.7rem,3vw,2.6rem);overflow:hidden;position:relative}
.teaser::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 100% at 95% 10%,rgba(37,96,148,.65),transparent 60%)}
.teaser>*{position:relative}
.teaser .k{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.teaser h3{color:#fff;font-size:clamp(1.3rem,1.1rem + .9vw,1.7rem);margin:.7rem 0 .7rem}
.teaser p{color:var(--sky-dim);font-size:.97rem}

/* ----------------------------------------------------------- checklist */
.checks{display:grid;gap:.75rem;margin-top:clamp(1.7rem,3vw,2.4rem)}
.checks li{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.2rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);font-size:.97rem;line-height:1.58;
  transition:border-color .22s var(--ease),transform .22s var(--ease)}
.checks li:hover{border-color:rgba(245,179,1,.6);transform:translateX(4px)}
.checks svg{width:20px;height:20px;flex:0 0 auto;color:var(--gold);margin-top:.12rem}
.dark .checks li{background:rgba(255,255,255,.045);border-color:var(--line-dark);color:var(--sky)}
.checks.c2{grid-template-columns:1fr}

/* ----------------------------------------------------------- split */
.split{display:grid;gap:clamp(1.8rem,4vw,3.5rem);align-items:start}
.split .list{display:grid;gap:.7rem;margin-top:1.5rem}
.split .list li{display:flex;gap:.75rem;font-size:.95rem;line-height:1.55}
.split .list svg{width:18px;height:18px;color:var(--gold);flex:0 0 auto;margin-top:.16rem}

/* spec-lijst */
.spec{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;margin-top:clamp(1.8rem,3vw,2.5rem)}
.spec .row{background:var(--surface);padding:clamp(1.2rem,2.2vw,1.7rem);display:grid;gap:.5rem}
.spec .row b{color:var(--brand);font-size:1.02rem}
.spec .row span{font-size:.94rem;line-height:1.6}

/* ----------------------------------------------------------- faq */
.faq{margin-top:clamp(2rem,3.5vw,2.8rem);display:grid;gap:.7rem}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease)}
.faq details[open]{border-color:rgba(245,179,1,.55);box-shadow:var(--sh-1)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.15rem clamp(1.1rem,2vw,1.5rem);cursor:pointer;font-weight:700;color:var(--brand);
  font-size:1.01rem;line-height:1.45;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq .pm{position:relative;flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  background:var(--paper-3);transition:background-color .22s var(--ease),transform .3s var(--ease)}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;inset:50% 5px auto;height:2px;
  background:var(--brand);border-radius:2px;translate:0 -50%;transition:opacity .2s,background-color .2s}
.faq .pm::after{transform:rotate(90deg)}
.faq details[open] .pm{background:var(--gold);transform:rotate(180deg)}
.faq details[open] .pm::after{opacity:0}
.faq .ans{padding:0 clamp(1.1rem,2vw,1.5rem) 1.3rem;font-size:.96rem;line-height:1.68;
  max-width:78ch}

/* ----------------------------------------------------------- partners */
.partners{display:grid;gap:1rem;margin-top:clamp(2rem,3.6vw,3rem)}
.partner{display:grid;gap:1.2rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.4vw,1.9rem);align-items:center}
.partner-h{display:flex;gap:1rem;align-items:center}
.partner-ic{width:46px;height:46px;border-radius:13px;background:var(--gold);color:var(--ink-900);
  display:grid;place-items:center;flex:0 0 auto}
.partner-ic svg{width:22px;height:22px}
.partner-h h3{font-size:1.05rem;margin-bottom:.3rem}
.partner-h p{font-size:.9rem;line-height:1.55}
.partner-names{display:flex;flex-wrap:wrap;gap:.5rem}
.partner-names span{padding:.55rem 1.1rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper-2);font-weight:700;font-size:.88rem;color:var(--brand);
  transition:border-color .22s var(--ease),transform .22s var(--ease)}
.partner-names span:hover{border-color:var(--gold);transform:translateY(-2px)}
.dark .partner{background:rgba(255,255,255,.045);border-color:var(--line-dark)}
.dark .partner-h p{color:var(--sky-dim)}
.dark .partner-names span{background:rgba(255,255,255,.07);border-color:var(--line-dark);color:#fff}

/* ----------------------------------------------------------- portalen */
.portals{display:grid;gap:1rem;margin-top:clamp(2rem,3.6vw,3rem)}
.portal{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(1.5rem,2.5vw,2.05rem);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.portal:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:rgba(245,179,1,.55)}
.portal-ic{width:48px;height:48px;border-radius:14px;background:var(--gold);color:var(--ink-900);
  display:grid;place-items:center;margin-bottom:1.2rem;transition:all .28s var(--ease)}
.portal:hover .portal-ic{transform:scale(1.07) rotate(-4deg)}
.portal-ic svg{width:23px;height:23px}
.portal h3{font-size:1.12rem;margin-bottom:.55rem}
.portal p{font-size:.93rem;flex:1}
.portal .aud{display:block;margin-top:1rem;font-size:.8rem;font-weight:600;color:var(--slate-2)}
.portal .go{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;font-weight:700;
  color:var(--brand);font-size:.93rem}
.portal .go svg{width:15px;height:15px;transition:transform .22s var(--ease)}
.portal:hover .go svg{transform:translate(3px,-3px)}
.portal.pri{background:var(--ink-850);border-color:transparent;color:var(--sky)}
.portal.pri h3{color:#fff}
.portal.pri p{color:var(--sky-dim)}
.portal.pri .portal-ic{background:var(--gold);color:var(--ink-900)}
.portal.pri .go{color:var(--gold)}
.portal.pri .aud{color:var(--sky-dim)}

.portalband{display:grid;gap:1.6rem;align-items:center;
  background:linear-gradient(120deg,var(--ink-800),var(--ink-850) 70%);
  border:1px solid var(--line-dark);border-radius:var(--r-lg);
  padding:clamp(1.7rem,3vw,2.6rem);color:var(--sky)}
.portalband h2{color:#fff;font-size:clamp(1.4rem,1.15rem + 1.1vw,1.95rem)}
.portalband .pl{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.portalband .pl a{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.15rem;
  border:1px solid var(--line-dark);border-radius:var(--r-pill);font-size:.88rem;font-weight:600;
  color:#fff;transition:all .22s var(--ease)}
.portalband .pl a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.portalband .pl svg{width:14px;height:14px}

/* ----------------------------------------------------------- quote */
.quote{position:relative;background:var(--paper-2);border-radius:var(--r-lg);
  padding:clamp(2rem,4vw,3.2rem);border:1px solid var(--line)}
.quote .mark{font-size:4.5rem;line-height:.7;color:var(--gold);font-weight:800;display:block;
  margin-bottom:.5rem}
.quote p{font-size:clamp(1.2rem,1.05rem + .9vw,1.75rem);line-height:1.4;color:var(--brand);
  font-weight:700;letter-spacing:-.02em}
.quote cite{display:block;margin-top:1.2rem;font-style:normal;font-size:.88rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--slate-2)}
.dark .quote{background:rgba(255,255,255,.05);border-color:var(--line-dark)}
.dark .quote p{color:#fff}

/* ----------------------------------------------------------- cta */
.ctaband{position:relative;overflow:hidden;border-radius:var(--r-lg);color:var(--sky);
  background:linear-gradient(135deg,#0F3050 0%,var(--ink-850) 62%,#081C31 100%);
  padding:clamp(2.2rem,4.5vw,3.8rem)}
.ctaband::before{content:"";position:absolute;inset:0;
  background:radial-gradient(52% 120% at 88% 16%,rgba(37,100,155,.6),transparent 62%)}
.ctaband>*{position:relative}
.ctaband img.net{position:absolute;right:-5%;top:-18%;width:min(38%,330px);opacity:.1;z-index:0;
  animation:floaty 18s ease-in-out infinite}
.ctaband h2{color:#fff;font-size:clamp(1.65rem,1.25rem + 2vw,2.7rem);max-width:20ch}
.ctaband p{margin-top:1.05rem;max-width:56ch;font-size:1.04rem;line-height:1.64;color:var(--sky)}
.ctaband .btns{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}

/* ----------------------------------------------------------- contact */
.cgrid{display:grid;gap:1rem}
.cbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.5vw,2rem);transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.cbox:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.cbox-ic{width:46px;height:46px;border-radius:14px;background:var(--gold);color:var(--ink-900);
  display:grid;place-items:center;margin-bottom:1.1rem}
.cbox-ic svg{width:22px;height:22px}
.cbox h3{font-size:1.05rem;margin-bottom:.5rem}
.cbox p{font-size:.92rem}
.cbox a.big{display:inline-block;margin-top:.8rem;font-size:1.06rem;font-weight:700;color:var(--brand);
  border-bottom:2px solid var(--gold);padding-bottom:2px}
.cbox a.big:hover{color:var(--gold)}

/* ----------------------------------------------------------- formulier */
.formwrap{margin-top:clamp(2rem,3.6vw,2.8rem);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(1.6rem,3vw,2.6rem)}
.fgrid{display:grid;gap:1.15rem}
.f2{grid-template-columns:1fr}
.field{display:grid;gap:.45rem}
.field label{font-size:.88rem;font-weight:700;color:var(--brand)}
.field .hint{font-size:.8rem;color:var(--slate-2);font-weight:400}
.field input,.field select,.field textarea{width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);
  border-radius:var(--r-sm);background:var(--field);font:inherit;font-size:.97rem;color:var(--brand);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(245,179,1,.16)}
.field input::placeholder,.field textarea::placeholder{color:#9BAAB9}
fieldset{border:0;padding:0;margin:0}
fieldset legend{font-size:.88rem;font-weight:700;color:var(--brand);margin-bottom:.7rem;padding:0}
.opts{display:grid;gap:.55rem}
.opt{display:flex;gap:.7rem;align-items:flex-start;padding:.8rem 1rem;border:1.5px solid var(--line);
  border-radius:var(--r-sm);cursor:pointer;font-size:.93rem;line-height:1.45;
  transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.opt:hover{border-color:var(--gold)}
.opt input{width:18px;height:18px;flex:0 0 auto;margin-top:.1rem;accent-color:#F5B301}
.opt input:checked~span{color:var(--brand);font-weight:600}
.form-foot{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  margin-top:1.6rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.form-note{font-size:.82rem;color:var(--slate-2);max-width:46ch}
.formsplit{display:grid;gap:clamp(1.6rem,3vw,2.6rem)}

/* ----------------------------------------------------------- legal */
.legal{max-width:74ch;display:grid;gap:2.2rem}
.legal h2{font-size:1.35rem;margin-bottom:.85rem}
.legal p+p{margin-top:.8rem}
.legal-note{margin-top:2.5rem;padding:1.2rem 1.4rem;border-left:4px solid var(--gold);
  background:var(--paper-2);border-radius:0 var(--r) var(--r) 0;font-size:.9rem;color:var(--slate)}

/* ----------------------------------------------------------- footer */
.ftr{background:var(--ink-900);color:var(--sky-dim);padding-top:clamp(3rem,6vw,5rem)}
.ftr-top{display:grid;gap:2.5rem;padding-bottom:clamp(2.5rem,5vw,3.5rem)}
.ftr-brand .logo{color:#fff;margin-bottom:1.2rem}
.ftr-brand p{font-size:.94rem;line-height:1.65;max-width:34ch;color:var(--sky-dim)}
.ftr-contact{display:grid;gap:.6rem;margin-top:1.5rem}
.ftr-contact a,.ftr-contact span{display:flex;align-items:center;gap:.65rem;font-size:.92rem;color:#fff}
.ftr-contact a:hover{color:var(--gold)}
.ftr-contact svg{width:16px;height:16px;color:var(--gold);flex:0 0 auto}
.ftr-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
.ftr-nav h3{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;margin-bottom:1rem}
.ftr-nav ul{display:grid;gap:.15rem}
.ftr-nav a{display:inline-block;padding-block:.34rem;font-size:.9rem;color:var(--sky-dim);
  transition:color .2s var(--ease)}
.ftr-nav a:hover{color:var(--gold)}
.ftr-bot{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;justify-content:space-between;
  padding:1.5rem 0;border-top:1px solid rgba(255,255,255,.1);font-size:.83rem}
.ftr-legal{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.ftr-legal a{display:inline-block;padding-block:.32rem}
.ftr-legal a:hover{color:var(--gold)}
.ftr-social{display:flex;gap:.6rem}
.ftr-social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);color:#fff;transition:all .22s var(--ease)}
.ftr-social a:hover{background:var(--gold);color:var(--ink-900);border-color:var(--gold);
  transform:translateY(-2px)}
.ftr-social svg{width:17px;height:17px}

/* ----------------------------------------------------------- reveal */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:calc(var(--i,0) * 85ms)}
.rv.in{opacity:1;transform:none}

/* ----------------------------------------------------------- responsive */
@media (min-width:600px){
  .g2,.checks.c2,.cgrid,.numcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .f2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:860px){
  .g3,.segs,.numcards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .portals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillars.p3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .partner{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .split,.teaser,.portalband,.formsplit{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr-top{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
  .ftr-nav{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1060px){
  .navwrap{display:block}
  .hdr-actions{display:flex}
  .burger{display:none}
  .steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps::before{display:block}
  .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mega{left:0;translate:none}
  .scroll-hint{display:grid}
  .mega-wide{min-width:720px}
}
@media (max-width:1059px){.mega{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
  .hero h1 .ln>span{transform:none}
}
@media print{
  .hdr,.mnav,.scroll-hint,.hero-canvas,.ctaband,.burger{display:none !important}
  body{color:#000}
  .dark,.hero,.phero{background:#fff !important;color:#000 !important}
}

/* ----------------------------------------------------------- statement */
.statement{position:relative;text-align:center;max-width:min(100%,920px);margin-inline:auto}
.statement p{font-size:clamp(1.9rem,1.1rem + 3.4vw,3.6rem);line-height:1.1;font-weight:800;
  letter-spacing:-.032em;color:#fff}
.statement .hl{background:linear-gradient(96deg,var(--gold) 6%,#FFD766 52%,var(--gold) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.statement .sub{margin-top:1.6rem;max-width:min(100%,58ch);margin-inline:auto;font-size:1.06rem;
  line-height:1.66;color:var(--sky);font-weight:400;letter-spacing:0}

/* logostrook / feitenstrook */
.factstrip{display:grid;gap:1px;background:var(--line-dark);border-radius:var(--r-lg);
  overflow:hidden;border:1px solid var(--line-dark)}
.factstrip div{background:rgba(255,255,255,.04);padding:1.5rem 1.4rem;text-align:center}
.factstrip b{display:block;font-size:1.5rem;font-weight:800;color:var(--gold);letter-spacing:-.03em}
.factstrip span{display:block;margin-top:.4rem;font-size:.85rem;color:var(--sky-dim);line-height:1.5}

/* compacte werkwijze-strip */
.flowstrip{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-top:1.4rem}
.flowstrip span{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:.92rem;
  color:var(--brand)}
.flowstrip b{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:var(--gold);color:var(--ink-900);font-size:.76rem}
.flowstrip svg{width:15px;height:15px;color:var(--slate-2)}
.dark .flowstrip span{color:#fff}

/* categorie-navigatie FAQ */
.catnav{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
.catnav a{padding:.5rem 1.05rem;border:1.5px solid var(--line);border-radius:var(--r-pill);
  font-size:.86rem;font-weight:700;color:var(--brand);background:var(--surface);
  transition:all .2s var(--ease)}
.catnav a:hover{border-color:var(--gold);background:var(--gold);color:var(--ink-900)}
.faq-cat{margin-top:2.6rem;scroll-margin-top:calc(var(--hdr) + 24px)}
.faq-cat>h3{font-size:1.15rem;margin-bottom:1rem;display:flex;align-items:center;gap:.7rem}
.faq-cat>h3::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--gold)}

/* techstrip op case-detail */
.techrow{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.4rem}
.techrow span{font-size:.8rem;font-weight:700;padding:.42rem .9rem;border-radius:var(--r-pill);
  background:var(--paper-3);color:var(--brand);border:1px solid var(--line)}

/* offerte/investering */
.priceblock{display:grid;gap:1rem;margin-top:clamp(1.8rem,3vw,2.6rem)}
.pricecard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.7rem}
.pricecard b{display:block;color:var(--brand);font-size:1.05rem;margin-bottom:.5rem}
.pricecard p{font-size:.93rem;line-height:1.6}
.pricecard .amt{display:block;margin-top:.9rem;font-size:1.5rem;font-weight:800;color:var(--gold);
  letter-spacing:-.03em}

@media (min-width:600px){.factstrip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:860px){
  .sec-split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:3rem}
  .priceblock{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ----------------------------------------------------------- klantlogo's */
.case-logo,.hero-logo{display:inline-flex;align-items:center;justify-content:center;
  align-self:flex-start;width:auto;flex:0 0 auto;
  background:#fff;border-radius:10px;padding:.55rem .95rem;box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
.case-logo{height:52px;margin-bottom:1.15rem}
.case-logo img{max-height:30px;max-width:130px;object-fit:contain}
.logo-row{display:block;margin-bottom:1.4rem}
.hero-logo{height:62px;padding:.6rem 1.1rem}
.hero-logo img{max-height:38px;max-width:150px;object-fit:contain}
.teaser .case-logo{height:46px;margin-bottom:.9rem}
.teaser .case-logo img{max-height:26px;max-width:115px}

/* ----------------------------------------------------------- donker thema */
:root{color-scheme:light}
[data-theme=dark]{
  color-scheme:dark;
  --ink-900:#030C15; --ink-850:#061420; --ink-800:#0A1B2A; --ink-750:#0D2234;
  --ink-700:#123049; --ink-600:#1B4A73;
  --brand:#EAF1F7;                       /* koppen */
  --paper:#0A1826; --paper-2:#0E2130; --paper-3:#13293B;
  --surface:#102434; --surface-2:#163044; --field:#0D2130;
  --line:#20374C; --line-dark:rgba(255,255,255,.14);
  --slate:#B4C3D0; --slate-2:#A2B3C2; --sky:#C4D3E2; --sky-dim:#9DB2C7;
  --gold:#F7C43B; --gold-2:#F7C43B;
  --focus:#F7C43B;
  --hdr-solid:rgba(9,22,36,.9); --logo-sub:#F7C43B;
  --sh-1:0 1px 2px rgba(0,0,0,.4), 0 6px 20px -8px rgba(0,0,0,.55);
  --sh-2:0 2px 4px rgba(0,0,0,.45), 0 22px 48px -18px rgba(0,0,0,.7);
}
[data-theme=dark] .btn-outline{background:transparent;color:var(--brand);border-color:var(--line)}
[data-theme=dark] .btn-outline:hover{border-color:var(--gold);color:var(--gold)}
/* donkere secties moeten ook in het donkere thema afwijken van de pagina */
[data-theme=dark] .dark{background:var(--ink-850)}
[data-theme=dark] .tint{background:var(--paper-2)}
[data-theme=dark] .logoplate{background:#E6EDF3}
[data-theme=dark] .hdr.solid{box-shadow:0 1px 26px -8px rgba(0,0,0,.7)}
:focus-visible{outline:3px solid var(--focus)}

/* ----------------------------------------------------- themaschakelaar */
.theme{position:relative;flex:0 0 auto}
.themebtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--line);border-radius:var(--r-sm);color:var(--slate);background:var(--surface);
  transition:border-color .18s var(--ease),color .18s var(--ease)}
.themebtn:hover{border-color:var(--brand);color:var(--brand)}
.theme-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:176px;padding:.35rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-2);display:none;z-index:120}
.theme[data-open] .theme-menu{display:block}
.theme-menu button{display:flex;align-items:center;width:100%;min-height:42px;padding:.5rem .75rem;
  border-radius:var(--r-sm);font-size:.94rem;font-weight:600;color:var(--slate);text-align:left}
.theme-menu button:hover{background:var(--paper-2);color:var(--brand)}
.theme-menu button[aria-checked=true]{color:var(--brand)}
.theme-menu button[aria-checked=true]::after{content:"";margin-left:auto;width:8px;height:8px;
  border-radius:50%;background:var(--gold)}
@media(max-width:1080px){.theme{order:2}}

/* ------------------------------------------------- hero in twee kolommen */
.hero-in{max-width:none}
.hero-cols{display:grid;gap:clamp(2.2rem,4vw,4rem);align-items:center}
@media(min-width:1040px){.hero-cols{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
.hero-txt{max-width:44rem}
.hero h1{font-size:clamp(2.4rem,1.2rem + 4.1vw,4.1rem)}
.hero .lead{max-width:38rem}

.neuro{position:relative;margin:0}
.neuro-canvas{display:block;width:100%;aspect-ratio:11/9;
  -webkit-mask-image:radial-gradient(72% 72% at 50% 50%,#000 42%,transparent 92%);
  mask-image:radial-gradient(72% 72% at 50% 50%,#000 42%,transparent 92%)}
@media(max-width:1039px){.neuro-canvas{aspect-ratio:16/10;max-height:52vh}}

/* --------------------------------------------- geanonimiseerde cases */
.docmark{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1rem;
  font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-2)}
.docmark svg{width:16px;height:16px;flex:0 0 auto}
.case-anon{cursor:default}
.case-anon:hover{transform:none}

/* ---------------------------------------------------------- formulier */
.formfoot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:1.6rem;
  padding-top:1.5rem;border-top:1px solid var(--line)}
.formnote{font-size:.88rem;line-height:1.6;color:var(--slate-2);max-width:44ch}
.formmsg{margin-top:1.1rem;padding:.9rem 1.1rem;border-radius:var(--r-sm);
  background:var(--paper-2);border:1px solid var(--line);font-size:.92rem;color:var(--slate)}