/* De NetwerkSpecialisten — design system (easeley-style) */
/* Fonts staan op onze eigen server: geen verzoek naar Google (AVG) en één verbinding minder.
   Lexend Deca en Montserrat, SIL Open Font License 1.1 — zie assets/fonts/LICENSE.txt */
@font-face{font-family:'Lexend Deca';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/lexend-deca-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lexend Deca';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/lexend-deca-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --accent:#FFC803;--accent-dark:#E0A800;
  --blue:#0000FF;--blue-dark:#0000CC;
  --ink:#1A1A2E;--mid:#5A5A6E;
  --bg:#FFFFFF;--bg-soft:#F7F8FA;--line:#E6E8EC;
  --font-head:'Lexend Deca',system-ui,sans-serif;
  --font-body:'Montserrat',system-ui,sans-serif;
  --radius:16px;--maxw:1200px;
  --shadow:0 18px 50px rgba(26,26,46,.08);
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);color:var(--ink);background:var(--bg);font-size:16px;line-height:1.65}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:400;line-height:1.1;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.container{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.accent{color:var(--accent)}
.section{padding:clamp(56px,9vh,120px) 0}
.section--soft{background:var(--bg-soft)}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mid)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
/* Toetsenbordgebruik: overal een zichtbare focusring */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}

/* Logo */
.logo{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--font-head);text-decoration:none;line-height:1}
.logo__mark{font-size:26px;font-weight:600;color:var(--accent);letter-spacing:-.01em}
.logo__sub{font-size:13px;font-weight:400;color:var(--ink);letter-spacing:.02em}
.footer .logo__sub{color:var(--mid)}

/* Buttons (easeley pill style) */
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:6px;position:relative;
  font-family:var(--font-head);font-weight:500;font-size:15px;cursor:pointer;border:1.5px solid transparent;
  transition:all .3s var(--ease)}
/* Geen pennetjes op elke knop: het RJ45-lipje onder de primaire knop is genoeg. */
.btn--primary{background:var(--blue);color:#fff}
.btn--primary::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);width:32px;height:6px;background:var(--blue);border-radius:0 0 4px 4px;transition:background .3s var(--ease)}
.btn--primary:hover{background:var(--blue-dark);transform:translateY(-2px)}
.btn--primary:hover::after{background:var(--blue-dark)}
/* Press feel: fast snap in (like a plug seating), slow settle back out via the base .3s transition */
.btn--primary:active{background:var(--blue-dark);transform:translateY(0) scale(.96);transition-duration:.08s}
.btn--primary:active::after{height:4px;background:var(--blue-dark);transition-duration:.08s}
.btn--outline{background:#fff;color:var(--blue);border-color:var(--blue)}
.btn--outline:hover{background:var(--blue);color:#fff}
.btn--ghost{background:#fff;color:var(--blue);border-color:var(--blue)}
.btn--ghost:hover{background:var(--blue);color:#fff}
/* Quiet secondary action — one clear button per screen, everything else is just a link */
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:500;font-size:15px;color:var(--ink);padding:14px 4px}
.link-arrow span{transition:transform .25s var(--ease);color:var(--blue)}
.link-arrow:hover{color:var(--blue)}
.link-arrow:hover span{transform:translateX(3px)}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;transition:background .35s,box-shadow .35s;background:rgba(255,255,255,.92);backdrop-filter:blur(16px)}
.nav.scrolled{box-shadow:0 1px 0 var(--line)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:80px;max-width:1320px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.nav__links{display:flex;align-items:center;gap:30px;list-style:none}
.nav__links a{font-size:15px;font-weight:500;color:var(--ink);transition:color .2s}
.nav__links a:hover{color:var(--blue)}
.nav__cta{background:var(--blue);color:#fff!important;padding:10px 18px;border-radius:6px;display:inline-flex;align-items:center;gap:8px;position:relative}
.nav__cta::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);width:26px;height:5px;background:var(--blue);border-radius:0 0 4px 4px;transition:background .3s var(--ease)}
.nav__cta:hover::after{background:var(--blue-dark)}
.nav__cta:hover{background:var(--blue-dark)}
.dd{position:relative}
.dd__menu{position:absolute;top:100%;left:-12px;padding-top:14px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.dd:hover .dd__menu{opacity:1;pointer-events:auto;transform:none}
.dd:focus-within .dd__menu{opacity:1;pointer-events:auto;transform:none}
.dd__list{list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px;min-width:260px}
.dd__list a{display:block;padding:10px 14px;border-radius:10px;font-size:14px;color:var(--mid)}
.dd__list a:hover{background:var(--bg-soft);color:var(--ink)}
/* Hamburger + drawer */
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:1003}
.nav__burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.nav__burger.open span:nth-child(1){transform:translate(0,7px) rotate(45deg)}
.nav__burger.open span:nth-child(2){opacity:0}
.nav__burger.open span:nth-child(3){transform:translate(0,-7px) rotate(-45deg)}
.drawer-overlay{position:fixed;inset:0;background:rgba(26,26,46,.4);z-index:1001;opacity:0;pointer-events:none;transition:opacity .3s}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:320px;max-width:85vw;background:#fff;z-index:1002;
  transform:translateX(100%);transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  padding:96px 28px 28px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
/* Schaduw alleen als het menu open is; anders valt hij als grijze rand over de rechterkant van elke pagina */
.drawer.open{transform:none;box-shadow:-10px 0 40px rgba(0,0,0,.1)}
.drawer a{font-family:var(--font-head);font-weight:600;font-size:18px;padding:12px 0;border-bottom:1px solid var(--line)}
.drawer .btn{margin-top:20px;justify-content:center}

/* Footer (light, easeley-style) */
.footer{background:#fff;color:var(--ink);padding:64px 0 28px;border-top:1px solid var(--line)}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.footer__grid h4{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:14px}
.footer__grid ul{list-style:none}
.footer__grid li{margin-bottom:10px;font-size:14px;color:var(--mid)}
.footer__grid a{color:var(--mid);font-size:14px}
.footer__grid a:hover{color:var(--ink)}
.footer__about{color:var(--mid);font-size:14px;margin-top:12px;max-width:280px}
.footer__bottom{display:flex;justify-content:space-between;padding-top:22px;font-size:13px;color:var(--mid)}
@media(max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
/* Met Support erbij past het volledige menu vanaf 801px alleen met kleinere tussenruimtes; daaronder het mobiele menu */
@media(max-width:960px){.nav__links{gap:18px}}
@media(max-width:800px){.nav__links{display:none}.nav__burger{display:flex}}
@media(max-width:768px){.nav__links{display:none}.nav__burger{display:flex}.footer__grid{grid-template-columns:1fr}.footer__bottom{flex-direction:column;gap:8px}}

[data-reveal]{opacity:1}
.js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-reveal].is-visible{opacity:1;transform:none}

/* Hero (light split: text left, photo right with floating card) */
.hero{padding:130px 0 72px;color:var(--ink);background:#fff}
.hero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;width:100%}
.hero__title{font-size:clamp(40px,6vw,72px);font-weight:400;line-height:1.02;color:var(--ink)}
.hero__slogan{display:block;color:var(--ink);font-weight:700;font-size:clamp(22px,3vw,36px);margin-top:18px}
.hero__lead{font-size:18px;color:var(--mid);max-width:460px;margin:24px 0 32px}
.hero__buttons{display:flex;gap:12px;flex-wrap:wrap}
.hero__media{display:flex;flex-direction:column;gap:18px;align-self:center}
/* USP card (sits under the photo, no overlap) */
.hero-card{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:26px}
.hero-card__title{font-size:22px;margin-bottom:18px}
.usp{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:15px}
.usp svg{flex-shrink:0;width:22px;height:22px;color:var(--blue)}
.hero-card .btn{width:100%;justify-content:center;margin-top:8px}
@media(max-width:900px){.hero .container{grid-template-columns:1fr}.hero{min-height:auto}}

/* Section heading */
.section__head{max-width:680px;margin-bottom:40px}
.section__head h2{font-size:clamp(28px,4vw,46px);margin:10px 0}
.section__head p{color:var(--mid)}
/* Diensten als vijf regels: alle vijf in één oogopslag leesbaar, niets achter een pijltje */
.services{border-top:1px solid var(--line)}
.service-row{display:grid;grid-template-columns:30px 1fr auto;align-items:start;gap:0 20px;
  padding:26px 6px;border-bottom:1px solid var(--line);transition:background .3s var(--ease)}
.service-row:hover{background:#fff}
.service-row__icon{margin-top:7px;color:var(--ink);opacity:.45}
.service-row__icon svg{width:24px;height:24px}
.service-row__name{display:block;font-family:var(--font-head);font-weight:500;
  font-size:clamp(23px,3vw,32px);line-height:1.15;letter-spacing:-.01em;transition:color .3s var(--ease)}
.service-row__desc{display:block;color:var(--mid);font-size:15px;max-width:58ch;margin-top:8px}
.service-row__go{color:var(--blue);font-size:22px;line-height:1.4;transition:transform .3s var(--ease)}
.service-row:hover .service-row__name{color:var(--blue)}
.service-row:hover .service-row__go{transform:translateX(4px)}
.service-row:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media(max-width:600px){.service-row{grid-template-columns:1fr auto;padding:20px 2px}.service-row__icon{display:none}}
/* Service card (easeley product-card style) */
.service-card{scroll-snap-align:start;flex:0 0 clamp(280px,32%,360px);background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.service-card__icon{display:flex;align-items:center;margin-bottom:14px}
.service-card__icon svg{width:26px;height:26px;color:var(--ink)}
.service-card__cat{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid)}
.service-card h3{font-size:20px;margin:6px 0 10px}
.service-card p{color:var(--mid);font-size:15px;flex:1}
/* Eén gevulde knop per pagina: kaarten krijgen een tekstlink, geen rij blauwe blokken */
.service-card__actions{display:flex;gap:10px;margin-top:18px}
.service-card__actions .link-arrow{padding:0;font-size:15px}
@media(max-width:768px){.service-card{flex-basis:80%}}

/* Prose block */
.prose-block{max-width:760px}
/* Artikel: leesbare regellengte, kopjes met lucht erboven */
.article{max-width:720px}
.article h2{font-size:clamp(22px,2.6vw,30px);margin:38px 0 12px}
.article h2:first-child{margin-top:0}
.article p{color:var(--mid);margin-bottom:16px}
.article strong{color:var(--ink);font-weight:600}
.article a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.read-more{margin-top:24px;font-size:15px;color:var(--mid)}
.read-more a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.prose-block h2{font-size:clamp(26px,3.4vw,40px);margin-bottom:18px}
.prose-block p{color:var(--mid);margin-bottom:16px}
.statement{font-family:var(--font-head);font-weight:300;font-size:clamp(26px,3.6vw,46px);line-height:1.25;max-width:900px}
.prose-block .statement{color:var(--ink);margin-top:12px}
/* Kleur is voor dingen die je kunt aanklikken en voor de illustraties — niet voor koppen. */
.statement strong{font-weight:700}.statement em{font-style:normal;color:inherit}
/* Prose columns */
.prose-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.prose-cols h3{font-size:22px;margin-bottom:12px}
.prose-cols p{color:var(--mid)}
/* Contact options */
.contact-options{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.contact-option{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.contact-option:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.contact-option .eyebrow{display:block;margin-bottom:8px}
.contact-option strong{font-family:var(--font-head);font-size:20px}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}.prose-cols{grid-template-columns:1fr}.contact-options{grid-template-columns:1fr}}

/* ── Service-detail pages ── */
/* Sub-hero */
.subhero{padding:140px 0 48px}
.page-photo{margin-top:8px}
.page-photo img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
@media(max-width:700px){.page-photo img{aspect-ratio:16/10}}
/* Hero blueprint illustration (prototype: wifi-netwerken) — one-time "coverage sweep" reveal on scroll */
.blueprint{width:100%;aspect-ratio:21/9;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--bg-soft);overflow:hidden}
.blueprint svg{width:100%;height:100%;display:block}
.blueprint__room{fill:var(--blue);fill-opacity:0;transition:fill-opacity .6s var(--ease)}
.js .blueprint.is-visible .blueprint__room{fill-opacity:.10}
.blueprint__room--1{transition-delay:.25s}
.blueprint__room--2{transition-delay:.3s}
.blueprint__room--3{transition-delay:.7s}
.blueprint__room--4{transition-delay:1.1s}
.blueprint__room--5{transition-delay:1.15s}
.blueprint__walls{color:var(--ink)}
.js .blueprint__walls path,.js .blueprint__walls rect{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease)}
.js .blueprint.is-visible .blueprint__walls path,.js .blueprint.is-visible .blueprint__walls rect{stroke-dashoffset:0}
.blueprint__ap{color:var(--blue)}
.blueprint__ap-dot{opacity:0;transition:opacity .4s var(--ease) .75s}
.js .blueprint__ap path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--ease) .85s}
.js .blueprint.is-visible .blueprint__ap-dot{opacity:1}
.js .blueprint.is-visible .blueprint__ap path{stroke-dashoffset:0}
.blueprint__scan{opacity:0;transform:translateX(0)}
.js .blueprint.is-visible .blueprint__scan{opacity:1;animation:dns-scan 1.6s .2s var(--ease) forwards}
@keyframes dns-scan{from{transform:translateX(0)}to{transform:translateX(900px)}}
@media(max-width:700px){.blueprint{aspect-ratio:16/10}}

/* Hero illustration: camerabeveiliging — gevel tekent zich, blikveld veegt, detecties klikken vast */
.camscan{width:100%;aspect-ratio:21/9;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--bg-soft);overflow:hidden}
.camscan svg{width:100%;height:100%;display:block}
.camscan__wall{color:var(--ink)}
.camscan__opening{color:var(--ink)}
.camscan__cam{color:var(--blue)}
.js .camscan__wall rect{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease)}
.js .camscan.is-visible .camscan__wall rect{stroke-dashoffset:0}
.js .camscan__opening rect{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--ease) .3s}
.js .camscan.is-visible .camscan__opening rect{stroke-dashoffset:0}
.js .camscan__cam path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s var(--ease) .15s}
.js .camscan.is-visible .camscan__cam path{stroke-dashoffset:0}
.camscan__lens{fill:var(--blue);opacity:0;transition:opacity .3s var(--ease) .5s}
.js .camscan.is-visible .camscan__lens{opacity:1}
.camscan__fov{fill:var(--blue);fill-opacity:0;transition:fill-opacity .6s var(--ease) .55s}
.js .camscan.is-visible .camscan__fov{fill-opacity:.10}
.camscan__beam{opacity:0}
.js .camscan.is-visible .camscan__beam{opacity:1;animation:dns-cam-sweep 1.1s .65s var(--ease) forwards}
@keyframes dns-cam-sweep{from{transform:translateX(0)}to{transform:translateX(560px)}}
.js .camscan__box path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .3s var(--ease)}
.js .camscan.is-visible .camscan__box path{stroke-dashoffset:0}
.js .camscan__box--1 path{transition-delay:1.0s}
.js .camscan__box--2 path{transition-delay:1.25s}
.js .camscan__box--3 path{transition-delay:1.5s}
@media(max-width:700px){.camscan{aspect-ratio:16/10}}

/* Hero illustration: nas-opslag — losse apparaten stromen samen naar één centrale NAS */
.nasflow{width:100%;aspect-ratio:21/9;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--bg-soft);overflow:hidden}
.nasflow svg{width:100%;height:100%;display:block}
.nasflow__device{color:var(--ink)}
.js .nasflow__device path,.js .nasflow__device rect{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .55s var(--ease)}
.js .nasflow.is-visible .nasflow__device path,.js .nasflow.is-visible .nasflow__device rect{stroke-dashoffset:0}
.js .nasflow__device--1 path,.js .nasflow__device--1 rect{transition-delay:.2s}
.js .nasflow__device--2 path,.js .nasflow__device--2 rect{transition-delay:.3s}
.js .nasflow__device--3 path,.js .nasflow__device--3 rect{transition-delay:.4s}
.js .nasflow__device--4 path,.js .nasflow__device--4 rect{transition-delay:.5s}
.nasflow__link{color:var(--blue)}
.js .nasflow__link{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s var(--ease)}
.js .nasflow.is-visible .nasflow__link{stroke-dashoffset:0}
.js .nasflow__link--1{transition-delay:.55s}
.js .nasflow__link--2{transition-delay:.65s}
.js .nasflow__link--3{transition-delay:.75s}
.js .nasflow__link--4{transition-delay:.85s}
.nasflow__rack{color:var(--ink)}
.js .nasflow__rack path,.js .nasflow__rack rect{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s var(--ease) 1.05s}
.js .nasflow.is-visible .nasflow__rack path,.js .nasflow.is-visible .nasflow__rack rect{stroke-dashoffset:0}
.nasflow__led{fill:var(--accent);opacity:0;transition:opacity .3s var(--ease)}
.js .nasflow.is-visible .nasflow__led{opacity:1}
.nasflow__led--1{transition-delay:1.4s}
.nasflow__led--2{transition-delay:1.5s}
.nasflow__pulse{fill:none;stroke:var(--accent);opacity:0;transform-origin:420px 180px}
.js .nasflow.is-visible .nasflow__pulse{animation:dns-nas-pulse .9s 1.55s var(--ease) forwards}
@keyframes dns-nas-pulse{0%{opacity:.5;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}
@media(max-width:700px){.nasflow{aspect-ratio:16/10}}

/* Hero illustration: evenementen — terrein tekent zich, backup-link neemt het over van main */
.eventmap{width:100%;aspect-ratio:21/9;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--bg-soft);overflow:hidden}
.eventmap svg{width:100%;height:100%;display:block}
.eventmap__wall{color:var(--ink)}
.js .eventmap__wall rect{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease)}
.js .eventmap.is-visible .eventmap__wall rect{stroke-dashoffset:0}
.eventmap__zone{fill:var(--blue);fill-opacity:0;transition:fill-opacity .6s var(--ease)}
.js .eventmap.is-visible .eventmap__zone{fill-opacity:.10}
.eventmap__zone--1{transition-delay:.3s}
.eventmap__zone--2{transition-delay:.4s}
.eventmap__zone--3{transition-delay:.5s}
.eventmap__zone--4{transition-delay:.6s}
.eventmap__zone--5{transition-delay:.65s}
.eventmap__gateway{color:var(--ink)}
.js .eventmap__gateway path,.js .eventmap__gateway circle{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .4s var(--ease) .85s}
.js .eventmap.is-visible .eventmap__gateway path,.js .eventmap.is-visible .eventmap__gateway circle{stroke-dashoffset:0}
.eventmap__main{color:var(--blue)}
.js .eventmap__main{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s var(--ease) 1.1s}
.js .eventmap.is-visible .eventmap__main{stroke-dashoffset:0;animation:dns-main-drop .6s 2.0s var(--ease) forwards}
.eventmap__backup{color:var(--accent-dark);opacity:.4}
.js .eventmap__backup{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .5s var(--ease) 1.35s,opacity .4s var(--ease) 1.35s}
.js .eventmap.is-visible .eventmap__backup{stroke-dashoffset:0;opacity:.4;animation:dns-backup-rise .6s 2.0s var(--ease) forwards}
@keyframes dns-main-drop{to{opacity:.18}}
@keyframes dns-backup-rise{to{opacity:1}}
@media(max-width:700px){.eventmap{aspect-ratio:16/10}}

/* Hero illustration: horeca-wifi — vloerplan tekent zich, tafels lopen vol, kassa blijft apart */
.floorplan{width:100%;aspect-ratio:21/9;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--bg-soft);overflow:hidden}
.floorplan svg{width:100%;height:100%;display:block}
.floorplan__wall{color:var(--ink)}
.js .floorplan__wall rect{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease)}
.js .floorplan.is-visible .floorplan__wall rect{stroke-dashoffset:0}
.floorplan__table{color:var(--mid)}
.js .floorplan__table circle{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .4s var(--ease) .35s}
.js .floorplan.is-visible .floorplan__table circle{stroke-dashoffset:0}
.floorplan__pos{color:var(--blue)}
.js .floorplan__pos path,.js .floorplan__pos rect{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .4s var(--ease) .55s}
.js .floorplan.is-visible .floorplan__pos path,.js .floorplan.is-visible .floorplan__pos rect{stroke-dashoffset:0}
.floorplan__guest{fill:var(--accent);fill-opacity:0;transition:fill-opacity .3s var(--ease)}
.js .floorplan.is-visible .floorplan__guest{fill-opacity:1}
.floorplan__guest--1{transition-delay:.85s}
.floorplan__guest--2{transition-delay:.95s}
.floorplan__guest--3{transition-delay:1.05s}
.floorplan__guest--4{transition-delay:1.15s}
.floorplan__guest--5{transition-delay:1.25s}
.floorplan__guest--6{transition-delay:1.35s}
.floorplan__guest--7{transition-delay:1.45s}
.floorplan__guest--8{transition-delay:1.55s}
@media(max-width:700px){.floorplan{aspect-ratio:16/10}}

.breadcrumb{list-style:none;display:flex;gap:8px;font-size:13px;color:var(--mid);margin-bottom:20px}
.breadcrumb a:hover{color:var(--blue)}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:8px;color:var(--line)}
.subhero h1{font-size:clamp(32px,5vw,56px);max-width:760px}
.subhero p{color:var(--mid);font-size:18px;max-width:620px;margin-top:18px}
.subhero .hero__buttons{margin-top:28px}
/* Feature grid (cards, no bullets) */
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.feature__icon{display:flex;align-items:center;margin-bottom:14px}
.feature__icon svg{width:26px;height:26px;color:var(--ink)}
/* Icon draw-in: feature icons sketch themselves in on scroll (progressive enhancement, pairs with [data-reveal]) */
.js .feature__icon svg path,.js .feature__icon svg circle,.js .feature__icon svg rect,
.js .feature__icon svg polyline,.js .feature__icon svg line{
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease)}
.js .feature__icon.is-visible svg path,.js .feature__icon.is-visible svg circle,.js .feature__icon.is-visible svg rect,
.js .feature__icon.is-visible svg polyline,.js .feature__icon.is-visible svg line{
  stroke-dashoffset:0}
.feature h3{font-size:18px;margin-bottom:8px}.feature p{color:var(--mid);font-size:15px}
/* FAQ */
.faq{max-width:820px}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;
  font-family:var(--font-head);font-weight:400;font-size:17px;padding:20px 0}
.faq__item summary::after{content:"+";font-size:24px;color:var(--mid)}
.faq__item[open] summary::after{content:"−"}
.faq__item p{color:var(--mid);padding:0 0 20px}
/* Related */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
/* CTA band */
.cta-band{background:var(--bg-soft);color:var(--ink)}
.cta-band h2{font-size:clamp(30px,4.5vw,56px);font-weight:400}
.cta-band h2 em{font-style:normal;color:inherit}
.cta-band p{color:var(--mid);margin:18px 0 28px;max-width:440px}
.cta-band .btn-row{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:768px){.feature-grid{grid-template-columns:1fr}.related-grid{grid-template-columns:1fr}}
/* Logo wall */
.logo-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.logo-wall__item{display:flex;align-items:center;justify-content:center;min-height:110px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);color:var(--mid);font-family:var(--font-head);font-weight:600;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.logo-wall__item:hover{border-color:transparent;box-shadow:var(--shadow);transform:translateY(-4px);color:var(--ink)}
.logo-wall__item svg{width:68%;max-width:170px;max-height:52px}
@media(max-width:900px){.logo-wall{grid-template-columns:repeat(2,1fr)}}
/* Legal prose pages */
.legal{max-width:820px;padding:140px 0 80px}
.legal h1{font-size:clamp(30px,4vw,48px);margin-bottom:24px}
.legal h2{font-size:20px;margin:32px 0 10px}
.legal p{color:var(--mid);margin-bottom:14px}
.legal--center{text-align:center;margin-left:auto;margin-right:auto}
/* Algemene voorwaarden: artikelnummers in de kantlijn, definities als lijst */
.legal__meta{color:var(--mid);font-size:15px;margin-bottom:26px}
.legal .legal__num{display:inline-block;min-width:38px;color:var(--mid);font-variant-numeric:tabular-nums}
.legal__defs{margin:0 0 14px 38px}
.legal__defs dt{font-weight:600;margin-top:10px}
.legal__defs dd{color:var(--mid);margin:0}
.legal p a,.subhero p a{color:var(--blue)}
.legal p a:hover,.subhero p a:hover{color:var(--blue-dark)}
/* Supportformulier: rustig, één gevulde knop; blauw alleen voor wat je aanklikt */
.melding{max-width:720px;display:grid;gap:24px}
.melding fieldset{border:0;min-width:0}
.melding legend,.melding__veld label{display:block;font-family:var(--font-head);font-size:15px;margin-bottom:8px}
.melding__keuzes{display:flex;flex-wrap:wrap;gap:10px}
.melding__keuze{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line);border-radius:50px;cursor:pointer;font-size:15px;transition:border-color .2s,color .2s}
.melding__keuze:hover{border-color:var(--blue)}
.melding__keuze:has(input:checked){border-color:var(--blue);color:var(--blue)}
.melding__keuze input{accent-color:var(--blue)}
.melding__rij{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.melding input:not([type=radio]),.melding textarea{width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.melding input:not([type=radio]):focus-visible,.melding textarea:focus-visible,.melding__keuze input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.melding textarea{resize:vertical;min-height:160px}
.melding__optioneel{color:var(--mid);font-family:var(--font-body);font-size:13px;margin-left:6px}
.melding__privacy{color:var(--mid);font-size:14px}
.melding__privacy a{color:var(--blue)}
.melding .btn{justify-self:start}
.melding .btn:disabled{opacity:.6;cursor:default;transform:none}
.melding__hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media(max-width:700px){.melding__rij{grid-template-columns:1fr}}
/* 404: a plug that never quite reaches the jack */
.notfound-plug{width:200px;margin:0 auto 16px}
.notfound-plug svg{width:100%;height:auto;display:block}
.notfound-plug__sway{animation:notfound-sway 5s ease-in-out infinite}
@keyframes notfound-sway{0%,100%{transform:translateX(0) rotate(0deg)}50%{transform:translateX(-4px) rotate(-2deg)}}