/* EyeClicked — huisstijl. Gemodelleerd naar de EyeNotify-site; alleen de
   kleurlaag verschilt: waar EyeNotify oranje gebruikt, gebruikt EyeClicked
   een blauw-naar-cyaan gradient op donkerblauw. */
:root{
  --navy:#07182f;
  --navy-2:#0d2444;
  --blue:#1464f4;
  --blue-dark:#0f4fc4;
  --cyan:#12bde8;
  --ink:#172033;
  --grey:#64748b;
  --muted:#8993a1;
  --line:#e6eaf0;
  --tint:#f7f8fa;
  --card:#ffffff;
  --radius:14px;
  --wrap:1180px;
  --shadow:0 1px 3px rgba(7,24,47,.06),0 1px 2px rgba(7,24,47,.04);
  --shadow-md:0 10px 30px rgba(7,24,47,.09);
  --shadow-lg:0 26px 60px rgba(7,24,47,.16);
  --grad-blue:linear-gradient(135deg,#12bde8 0%,#1464f4 55%,#0f4fc4 100%);
  --glow:0 10px 26px rgba(20,100,244,.32);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);background:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
.skip-link{position:fixed;z-index:200;top:12px;left:12px;padding:10px 16px;
  border-radius:9px;background:#fff;color:var(--navy);font-weight:800;
  box-shadow:var(--shadow-lg);transform:translateY(-160%);transition:transform .18s ease}
.skip-link:focus{transform:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3{color:var(--navy);line-height:1.15;margin:0 0 .4em}
h2{font-size:34px;letter-spacing:-.01em;margin-bottom:.5em}
h3{font-size:20px}
p{margin:0 0 1em}
a{color:var(--blue);text-decoration:none}
.kicker{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:12px;padding:5px 12px;border-radius:999px;
  color:var(--blue-dark);background:rgba(20,100,244,.10);
  border:1px solid rgba(20,100,244,.22)}
.lead{font-size:19px;color:var(--grey);max-width:60ch}
.note{color:var(--muted);font-size:15px;margin-top:18px}

/* buttons */
.btn{display:inline-block;padding:12px 24px;border-radius:10px;font-weight:700;
  font-size:15px;cursor:pointer;border:2px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease}
.btn--primary{position:relative;overflow:hidden;background:var(--grad-blue);color:#fff;
  box-shadow:0 10px 24px rgba(20,100,244,.22)}
.btn--primary::before{content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.24) 48%,transparent 70%);
  transform:translateX(-130%);transition:transform .55s ease}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(20,100,244,.30)}
.btn--primary:hover::before{transform:translateX(130%)}
.btn--ghost{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.5)}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);transform:translateY(-2px)}
.btn--sm{padding:9px 17px;font-size:14px;background:var(--grad-blue);color:#fff;
  box-shadow:none}
.btn--portal{background:#fff;color:var(--blue);border-color:rgba(20,100,244,.32);box-shadow:none}
.btn--portal:hover{background:rgba(20,100,244,.06);border-color:var(--blue);transform:translateY(-2px)}
.btn--lg{padding:15px 32px;font-size:17px}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;transition:box-shadow .25s ease,border-color .25s ease,background .25s ease}
.nav.scrolled{background:rgba(255,255,255,.88);border-bottom-color:var(--line);
  box-shadow:0 6px 24px rgba(7,24,47,.07)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:78px}
.nav__brand{display:flex;align-items:center}
.nav__brand img{height:64px;width:auto}
.nav__links{display:flex;align-items:center;gap:14px;margin-left:auto}
.nav__links a{color:var(--navy);font-weight:600;font-size:14px;white-space:nowrap}
.nav__links a:hover{color:var(--blue)}
.nav__links a.btn{color:#fff}
.nav__links a.btn--portal{color:var(--blue)}

/* hero */
.hero{position:relative;background:linear-gradient(160deg,#0d1830 0%,#122544 60%,#173261 100%);
  color:#fff;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;top:-160px;right:-120px;
  width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,189,232,.34),rgba(18,189,232,0) 66%);
  filter:blur(8px)}
.hero::after{content:"";position:absolute;z-index:-1;bottom:-220px;left:-160px;
  width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(20,100,244,.26),rgba(20,100,244,0) 68%)}
.hero__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
  padding:84px 24px 96px}
.hero__logo{display:block;width:min(100%,500px);height:auto;margin:0 0 28px}
.hero h1{color:#fff;font-size:47px;line-height:1.08;letter-spacing:-.015em;margin-bottom:.4em}
.hero__sub{font-size:19px;color:#cdd4e0;max-width:52ch;line-height:1.65}
.hero__fit{max-width:58ch;margin-top:15px;color:#aebbd0;font-size:14px;line-height:1.55}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 20px}
.hero__cta .btn{display:inline-flex;align-items:center;justify-content:center}
.hero__badge{font-size:14px;color:#9aa6bd;margin:0}
.hero__badge strong{color:#fff}
.hero__art{perspective:1400px}
.hero__art img{width:100%;border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.10);transition:transform .4s ease,box-shadow .4s ease}
.hero__art img:hover{transform:translateY(-6px) rotateX(1.5deg);
  box-shadow:0 40px 90px rgba(0,0,0,.5)}

/* sections */
.section{padding:88px 0}
.section--tint{background:var(--tint)}

/* Pricing tables */
.pricing-table-wrap{margin:32px 0 22px;overflow-x:auto;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);background:#fff;-webkit-overflow-scrolling:touch}
.pricing-table{width:100%;min-width:640px;border-collapse:collapse;text-align:left}
.pricing-table caption{padding:18px 22px 12px;color:var(--navy);font-size:14px;font-weight:800;text-align:left}
.pricing-table th,.pricing-table td{padding:15px 22px;border-top:1px solid var(--line);font-size:15px}
.pricing-table thead th{background:#f8fbff;color:var(--grey);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.pricing-table tbody th{color:var(--navy);font-weight:700}
.pricing-table tbody td{color:var(--blue-dark);font-size:18px;font-weight:800}
.pricing-table tbody tr:hover{background:#fbfdff}
.pricing-table--reseller tbody td:last-child{color:var(--grey);font-size:15px;font-weight:600;vertical-align:middle}
.pricing-notes{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0 0 28px}
.pricing-notes--3{grid-template-columns:repeat(3,1fr);margin-top:32px}
.pricing-notes article{display:grid;gap:4px;padding:17px 18px;border:1px solid #dbe6f5;border-radius:12px;background:#f8fbff}
.pricing-notes strong{color:var(--navy);font-size:14px}
.pricing-notes span{color:var(--grey);font-size:13px;line-height:1.5}
.pricing-quote{display:grid;gap:6px;margin:32px 0 26px;padding:28px 30px;border:1px solid #dbe6f5;
  border-radius:var(--radius);background:linear-gradient(135deg,#f8fbff,#fff);box-shadow:var(--shadow)}
.pricing-quote strong{color:var(--navy);font-size:20px}
.pricing-quote span{color:var(--grey);margin-bottom:10px}
@media(max-width:760px){.pricing-notes{grid-template-columns:1fr}.pricing-table th,.pricing-table td{padding:13px 16px}}

/* Security Awareness CTA */
.awareness-cta{border-top:1px solid #e8edf5;border-bottom:1px solid #e8edf5}
.awareness-cta__visual{margin:34px 0 0;max-width:900px}
.awareness-cta__visual .ui-shot{border-radius:16px}
.awareness-cta__visual figcaption{display:grid;gap:4px;padding:16px 4px 0}
.awareness-cta__visual figcaption strong{color:var(--navy);font-size:18px}
.awareness-cta__visual figcaption span{color:var(--grey);font-size:14px}
.awareness-dashboard-screenshot{display:block;width:100%;height:auto;border:1px solid #d9e4f2;border-radius:16px;box-shadow:0 22px 60px rgba(7,24,47,.16)}
.awareness-dashboard{display:none;grid-template-columns:190px minmax(0,1fr);overflow:hidden;
  border:1px solid #d9e4f2;border-radius:16px;background:#f5f9fd;box-shadow:0 22px 60px rgba(7,24,47,.16);color:#12264d;text-align:left}
.awareness-dashboard__nav{display:flex;flex-direction:column;gap:28px;padding:26px 14px;background:#061d3d;color:#dce8f8}
.awareness-dashboard__brand{display:flex;align-items:center;gap:8px;padding:0 8px;color:#fff;font-size:12px;white-space:nowrap}
.awareness-dashboard__brand span{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--blue);color:#fff;font-size:10px}
.awareness-dashboard__nav nav{display:grid;gap:7px}.awareness-dashboard__nav a{display:flex;align-items:center;gap:9px;padding:10px 9px;border-radius:8px;color:#d7e4f4;font-size:11px;line-height:1.25}
.awareness-dashboard__nav a span{width:15px;color:#a9c8ec;text-align:center;font-size:14px}.awareness-dashboard__nav a.is-active{background:#0d5ac1;color:#fff}.awareness-dashboard__nav a.is-active span{color:#fff}
.awareness-dashboard__tip{margin-top:auto;display:grid;gap:8px;padding:20px 12px;border:1px solid rgba(94,172,255,.35);border-radius:10px;background:rgba(20,100,244,.15);font-size:10px;line-height:1.4;text-align:center}.awareness-dashboard__tip b{font-size:12px;color:#fff}.awareness-dashboard__tip span{color:#bcd0e9}
.awareness-dashboard__main{min-width:0;padding:28px 26px 18px;background:linear-gradient(145deg,#f9fcff,#eef5fb)}
.awareness-dashboard__head{display:flex;justify-content:space-between;align-items:start;gap:16px;margin-bottom:22px}.awareness-dashboard__head h3{margin:0;color:#10244b;font-size:17px}.awareness-dashboard__head p{margin:4px 0 0;color:#7184a2;font-size:11px}.awareness-dashboard__head button,.awareness-dashboard__footer button{border:1px solid #d4dfed;border-radius:8px;padding:9px 12px;background:#fff;color:#1b3157;font:inherit;font-size:10px;white-space:nowrap}
.awareness-dashboard__topgrid,.awareness-dashboard__bottomgrid{display:grid;grid-template-columns:1.35fr 1fr .82fr;gap:14px}.awareness-dashboard__bottomgrid{grid-template-columns:1.45fr 1fr;margin-top:14px}
.awareness-panel{min-width:0;padding:18px 18px 16px;border:1px solid #dce6f1;border-radius:11px;background:rgba(255,255,255,.9);box-shadow:0 3px 10px rgba(7,24,47,.03)}.awareness-panel h4{margin:0 0 16px;color:#10244b;font-size:13px}.awareness-progress__body{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:14px}.awareness-ring{display:grid;place-items:center;align-content:center;width:118px;height:118px;border-radius:50%;background:conic-gradient(#1464f4 0 70%,#12bde8 70% 78%,#e7eff8 78% 100%);position:relative}.awareness-ring::after{content:"";position:absolute;inset:10px;border-radius:50%;background:#fff}.awareness-ring strong,.awareness-ring span{z-index:1}.awareness-ring strong{font-size:24px;line-height:1}.awareness-ring span{font-size:11px;color:#7184a2}.awareness-progress__body b{font-size:12px}.awareness-progress__body p{margin:4px 0 12px;color:#7184a2;font-size:10px;line-height:1.4}.awareness-bar,.awareness-scores i{display:block;height:5px;border-radius:99px;background:#e6edf5}.awareness-bar i,.awareness-scores i{display:block;height:100%;border-radius:inherit;background:#1464f4}.awareness-progress__body small{display:block;margin-top:7px;color:#7184a2;font-size:9px;line-height:1.4}.awareness-progress__body a,.awareness-question>a,.awareness-leaderboard>a{display:inline-block;margin-top:10px;color:#1464f4;font-size:10px;font-weight:700}.awareness-scores{display:grid;gap:11px}.awareness-scores div{display:grid;gap:5px}.awareness-scores span{font-size:10px}.awareness-scores b{float:right;color:#1464f4;font-weight:700}.awareness-scores div:first-child b{color:#0aab7b}.awareness-scores div:last-child b{color:#e5a000}.awareness-scores i{height:4px}.awareness-scores i{background:linear-gradient(90deg,#1464f4,#1464f4) no-repeat,#e6edf5}.awareness-poster{display:grid;place-items:center;align-content:center;gap:12px;text-align:center;background:linear-gradient(145deg,#eef8ff,#e4f1fb)}.awareness-poster__icon{display:grid;place-items:center;width:54px;height:54px;border-radius:12px;background:#d2e7fb;color:#1464f4;font-size:31px}.awareness-poster strong{font-size:13px;line-height:1.35}.awareness-poster>span:last-child{color:#7184a2;font-size:10px}.awareness-question header,.awareness-leaderboard header{display:flex;justify-content:space-between;gap:12px;align-items:center}.awareness-question header small,.awareness-leaderboard header small{color:#7184a2;font-size:9px;white-space:nowrap}.awareness-question>label{display:inline-block;margin:0 0 12px;padding:4px 8px;border-radius:5px;background:#e5f1ff;color:#1464f4;font-size:9px;font-weight:700}.awareness-question>strong{display:block;font-size:12px;line-height:1.4}.awareness-options{display:grid;gap:5px;margin:14px 0}.awareness-options span{padding:8px 10px;border:1px solid #dce6f1;border-radius:7px;color:#7184a2;font-size:9px}.awareness-options .selected{border-color:#74b0fa;background:#f1f7ff;color:#1464f4}.awareness-question button{border:0;border-radius:6px;padding:8px 11px;background:#1464f4;color:#fff;font:inherit;font-size:9px;font-weight:700}.awareness-question>a{float:right}.awareness-podium{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:8px;margin:12px 0}.awareness-podium>div{display:grid;justify-items:center;gap:3px;text-align:center}.awareness-podium>div:nth-child(2){order:-1}.medal{display:grid;place-items:center;width:37px;height:37px;border-radius:50%;font-size:17px}.medal--gold{width:44px;height:44px;background:#f2b72c;color:#fff}.medal--silver{background:#dbe8f7;color:#4b82bd}.medal--bronze{background:#d99569;color:#fff}.awareness-podium b{font-size:9px}.awareness-podium small{color:#7184a2;font-size:8px}.awareness-podium em{display:block;width:100%;padding:5px;border-radius:4px;background:#f0f4f8;color:#7184a2;font-size:13px;font-style:normal;font-weight:800}.awareness-podium>div:nth-child(2) em{color:#e5a000}.awareness-leaderboard ol{list-style:none;padding:0;margin:4px 0 0}.awareness-leaderboard li{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid #edf1f6;color:#1b3157;font-size:9px}.awareness-leaderboard li b{color:#7184a2;font-size:8px;white-space:nowrap}.awareness-dashboard__footer{display:flex;align-items:center;gap:10px;margin-top:14px;padding:11px 14px;border:1px solid #dce6f1;border-radius:10px;background:#fff}.awareness-dashboard__footer>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#e5f1ff;color:#1464f4}.awareness-dashboard__footer div{display:grid;gap:2px;flex:1}.awareness-dashboard__footer b{font-size:11px}.awareness-dashboard__footer small{color:#7184a2;font-size:9px}.awareness-dashboard__footer button{color:#1464f4;border-color:#1464f4}
.awareness-cta__cards{margin-top:34px}
.awareness-cta__cards .card p{color:var(--grey);font-size:15px}
.awareness-cta__flow{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:42px;padding:22px 26px;border:1px solid #dbe6f5;border-radius:16px;background:#fff;box-shadow:var(--shadow)}
.awareness-cta__flow>div{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;min-width:0}
.awareness-cta__flow span{grid-row:span 2;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--grad-blue);color:#fff;font-size:12px;font-weight:800}
.awareness-cta__flow strong{color:var(--navy);font-size:15px}
.awareness-cta__flow small{color:var(--grey);font-size:12px;line-height:1.3}
.awareness-cta__flow i{color:var(--blue);font-size:22px;font-style:normal}
.ai-disclosure{max-width:900px;margin:26px auto 0;padding:20px 24px;border:1px solid #c9dbef;border-radius:14px;background:linear-gradient(135deg,#eef7ff,#f8fbff);box-shadow:0 8px 22px rgba(7,24,47,.07);color:var(--grey);font-size:14px;line-height:1.55;text-align:center}
.ai-disclosure h3{margin:0 0 8px;color:var(--blue);font-size:21px}
.ai-disclosure p{margin:0 auto 8px;max-width:72ch}
.ai-disclosure p:last-child{margin-bottom:0}
.ai-disclosure strong{color:var(--navy)}
.awareness-cta__action{margin:30px 0 0;text-align:center}

@media(max-width:760px){
  .awareness-dashboard{grid-template-columns:1fr}.awareness-dashboard__nav{display:none}.awareness-dashboard__main{padding:18px 14px 14px}.awareness-dashboard__topgrid,.awareness-dashboard__bottomgrid{grid-template-columns:1fr}.awareness-dashboard__head h3{font-size:14px}.awareness-dashboard__head p{font-size:10px}.awareness-progress__body{grid-template-columns:118px 1fr}.awareness-poster{min-height:160px}.awareness-dashboard__footer small{display:none}
  .awareness-cta__flow{align-items:stretch;flex-direction:column;gap:12px}
  .awareness-cta__flow>div{width:100%}
  .awareness-cta__flow i{display:none}
  .ai-disclosure{padding:18px 16px;font-size:14px}.ai-disclosure h3{font-size:19px}
}

/* kaarten (Functies, Twee smaken, reseller-voordelen, ...) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 28px 24px;box-shadow:var(--shadow);
  position:relative;overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.card::before{content:"";position:absolute;top:0;left:0;width:54px;height:3px;
  border-radius:0 99px 99px 0;background:var(--grad-blue);transition:width .28s ease}
.card::after{content:"";position:absolute;right:-46px;top:-46px;width:110px;height:110px;
  border-radius:50%;background:radial-gradient(circle,rgba(18,189,232,.10),transparent 68%);
  pointer-events:none}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#dfe6f0}
.card:hover::before{width:100%}
.card h3{margin-bottom:.3em}
.card:has(.card__icon){padding-top:88px}
.card__icon{position:absolute;top:28px;left:28px;display:grid;place-items:center;width:50px;height:50px;border-radius:14px;
  background:linear-gradient(145deg,#ef4444,#b91c1c);color:#fff;font-size:25px;font-weight:500;line-height:1;
  box-shadow:0 10px 20px rgba(185,28,28,.24)}
.card__icon::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.18);border-radius:inherit}
.card:hover .card__icon{transform:translateY(-2px);box-shadow:0 13px 24px rgba(185,28,28,.30)}
#smaken .card{display:flex;flex-direction:column}
#smaken .card>p:last-child{margin-top:auto;margin-bottom:0;padding-top:16px}

/* genummerde stappen ("Zo werkt het"). EyeNotify combineert .steps altijd met
   de utility-klassen .grid.grid--3 voor de kolomindeling; de EyeClicked-
   pagina's gebruiken alleen .steps (een <ol>), dus die kolomindeling —
   inclusief de responsive val-terug naar 2 en 1 kolom — zit hier in plaats
   van in een aparte grid-utility. De klasse heet hier .step__no (niet
   .step__num zoals in EyeNotify), overeenkomstig de markup die latere taken
   gebruiken. */
.steps{list-style:none;padding:0;margin:0;counter-reset:step;
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.steps .step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 27px 27px;position:relative;box-shadow:var(--shadow);overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease}
.steps .step::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--grad-blue);opacity:0;transition:opacity .22s ease}
.steps .step:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.steps .step:hover::before{opacity:1}
.steps .step h3{padding-right:5px;font-size:19px}
.steps .step p{margin:0;color:var(--grey);font-size:14.5px}
.step__no{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:50%;background:var(--grad-blue);color:#fff;font-weight:800;font-size:20px;
  margin-bottom:16px;box-shadow:var(--glow)}

/* product CTA */
.cta{background:linear-gradient(160deg,#122544,#0d1830);color:#fff;padding:88px 0}
.cta h2{max-width:15ch;margin:.35em 0 .55em;color:#fff;font-size:clamp(30px,3.4vw,46px);line-height:1.08}
.cta__inner{display:grid;grid-template-columns:minmax(0,.92fr) minmax(390px,1.08fr);gap:clamp(42px,7vw,86px);align-items:center}
.cta__content>p{max-width:55ch;margin:0;color:#cdd4e0;font-size:18px;line-height:1.7}
.cta__eyebrow{display:inline-flex;color:#7cddf5;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.cta__actions{display:flex;align-items:center;gap:24px;margin-top:30px;flex-wrap:wrap}
.cta__contact-link{color:#fff;font-size:14px;font-weight:750;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:5px}
.cta__contact-link:hover{color:var(--cyan);text-decoration-color:var(--cyan)}
.cta__details{display:flex;gap:28px;margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.13)}
.cta__details span{max-width:none;white-space:nowrap;color:#9eacc0;font-size:12.5px;line-height:1.55}
.cta__details strong{display:block;color:#e7edf5;font-size:13px}
.cta__visual{position:relative;padding:14px 0 26px 14px}
.cta__window{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:#fff;box-shadow:0 32px 75px rgba(0,0,0,.35);transform:perspective(1200px) rotateY(-3deg) rotateX(1deg)}
.cta__windowbar{display:flex;align-items:center;gap:6px;height:38px;padding:0 13px;background:#eef2f7;border-bottom:1px solid #dce3ec}
.cta__windowbar i{width:8px;height:8px;border-radius:50%;background:#b9c4d1}.cta__windowbar i:nth-child(1){background:#ff7c78}.cta__windowbar i:nth-child(2){background:#f2c45c}.cta__windowbar i:nth-child(3){background:#65c98a}
.cta__windowbar span{margin-left:6px;color:#647389;font-size:10px;font-weight:700}
.cta__window img{display:block;width:100%;aspect-ratio:1.7;object-fit:cover;object-position:top left}
.cta__visual-note{position:absolute;right:-16px;bottom:0;display:grid;min-width:210px;padding:15px 18px;border:1px solid rgba(255,255,255,.18);border-radius:13px;background:rgba(10,27,51,.94);box-shadow:0 18px 40px rgba(0,0,0,.3);backdrop-filter:blur(12px)}
.cta__visual-note strong{color:#fff;font-size:13px}.cta__visual-note span{margin-top:3px;color:#9eacc0;font-size:11px}

/* footer */
.footer{background:linear-gradient(145deg,#07182f,#0d2444);color:#aeb9ca;padding:42px 0 26px}
.footer__inner{display:grid;gap:30px}
.footer__contact{display:grid;grid-template-columns:auto auto;justify-content:center;gap:64px;padding:0 0 30px;border-bottom:1px solid rgba(255,255,255,.12);text-align:left}
.footer__contact-company,.footer__contact-details{display:grid;gap:3px;align-content:start;justify-items:start;font-size:14px;line-height:1.65}
.footer__contact-company strong{margin-bottom:2px;color:#fff;font-size:16px}
.footer__contact-details a{color:#62d8f2;text-decoration:none;transition:color .18s ease}
.footer__contact-details a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer__logos{display:flex;align-items:center;gap:38px}
/* de globale img{height:auto} (in het vangnet verderop) overschrijft het
   height-attribuut op de <img>; hier zetten we de hoogte weer vast. */
.footer__inner img{height:32px;width:auto}
.footer__inner .footer__eyexs{height:29px}
.footer__logos img:not(.footer__eyexs){height:48px}
.footer__legal{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.footer__legal a{color:#b5c0d1;font-size:15px;text-decoration:underline;text-decoration-color:rgba(181,192,209,.35);text-underline-offset:4px}
.footer__legal a:hover{color:var(--cyan);text-decoration-color:currentColor}
.footer__credit{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.footer span{font-size:14px}
.footer span a{color:var(--cyan)}

/* privacy- en cookieverklaring */
.legal-page{background:#f5f8fc}
.legal-header{background:#fff;border-bottom:1px solid var(--line)}
.legal-header .wrap{display:flex;align-items:center;min-height:104px}
.legal-header img{display:block;width:250px;height:auto}
.legal-main{padding:64px 0 80px}
.legal-content{max-width:820px}
.legal-content h1{margin:12px 0 20px;font-size:44px}
.legal-content section{scroll-margin-top:24px;margin-top:46px}
.legal-content p{color:var(--grey);font-size:17px}
.legal-content a{text-decoration:underline;text-underline-offset:3px}
.legal-back{display:inline-block;margin-bottom:28px;font-weight:700;text-decoration:none!important}
.legal-note{margin:42px 0;padding:24px 28px;border-left:4px solid var(--blue);border-radius:0 10px 10px 0;background:#fff}
.legal-note strong{color:var(--navy);font-size:18px}
.legal-note p{margin:6px 0 0}

/* naar-boven-knop: rechtsonder, verschijnt bij scrollen (zie #toTop-script) */
.to-top{position:fixed;right:24px;bottom:24px;z-index:40;width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;
  background:var(--grad-blue);color:#fff;cursor:pointer;box-shadow:var(--glow);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .25s ease,transform .25s ease,visibility .25s ease,box-shadow .2s ease}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(20,100,244,.45)}
@media(max-width:560px){.to-top{right:16px;bottom:16px;width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.to-top{transition:opacity .2s ease,visibility .2s ease}}

/* scroll-reveal (subtiel) — alleen actief met JS (zie het scherm-script dat
   Task 6 vlak vóór </body> toevoegt); uit bij reduce-motion */
.js [data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1 !important;transform:none !important;transition:none}
  .btn,.card,.steps .step,.hero__art img{transition:none !important}
}

/* Vangnet: geen enkel blok mag de pagina horizontaal laten scrollen. Beelden
   schalen al mee; dit dekt lange woorden en toekomstige toevoegingen. */
html,body{max-width:100%;overflow-x:hidden}
/* clip i.p.v. hidden op body: hidden maakt van body een scrollcontainer en dan
   blijft het sticky menu niet staan. */
body{overflow-x:clip}
img,video{max-width:100%;height:auto}
.interface-card__open{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}.interface-card__open:focus-visible{outline:3px solid var(--cyan);outline-offset:-3px}
.lightbox[hidden]{display:none}.lightbox{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px}.lightbox__backdrop{position:absolute;inset:0;background:rgba(3,12,27,.88);backdrop-filter:blur(8px)}.lightbox__panel{position:relative;z-index:1;width:min(1180px,100%);max-height:calc(100vh - 48px);overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:#09182d;box-shadow:0 30px 90px rgba(0,0,0,.45)}.lightbox__top,.lightbox__bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;color:#fff}.lightbox__top{border-bottom:1px solid rgba(255,255,255,.1)}.lightbox__top>div{display:grid;gap:3px}.lightbox__eyebrow{color:#65d7f3;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.lightbox__top strong{font-size:18px}.lightbox__close{width:34px;height:34px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:25px;line-height:1;cursor:pointer}.lightbox__stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:200px;max-height:calc(100vh - 170px);padding:16px 70px;background:#101f35}.lightbox__stage img{display:block;max-width:100%;max-height:calc(100vh - 205px);width:auto;height:auto;border-radius:8px;box-shadow:0 16px 45px rgba(0,0,0,.35)}.lightbox__arrow{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(5,20,42,.72);color:#fff;font-size:22px;cursor:pointer;transform:translateY(-50%)}.lightbox__arrow:hover{background:var(--blue)}.lightbox__arrow--prev{left:18px}.lightbox__arrow--next{right:18px}.lightbox__bottom{color:#9eacc0;font-size:12px}.lightbox__bottom span:first-child{color:#fff;font-weight:700}.lightbox-open{overflow:hidden}

/* premium visual layer */
body{
  background:
    radial-gradient(circle at 8% 18%,rgba(18,189,232,.055),transparent 24rem),
    radial-gradient(circle at 92% 45%,rgba(20,100,244,.045),transparent 28rem),
    #fff;
}
::selection{background:rgba(20,100,244,.24);color:var(--navy)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
summary:focus-visible,video:focus-visible{
  outline:3px solid rgba(20,100,244,.42);outline-offset:3px
}

/* floating, glass-like navigation */
.nav{border-bottom-color:rgba(230,234,240,.65)}
.nav.scrolled{box-shadow:0 12px 38px rgba(7,24,47,.10)}
.nav__brand img{transition:transform .25s ease,filter .25s ease}
.nav__brand:hover img{transform:translateY(-1px) scale(1.025);
  filter:drop-shadow(0 7px 12px rgba(7,24,47,.14))}
.nav__links a:not(.btn){position:relative}
.nav__links a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;
  height:2px;border-radius:999px;background:var(--grad-blue);transition:right .22s ease}
.nav__links a:not(.btn):hover::after{right:0}

/* richer hero background and ambient grid */
.hero{min-height:680px;
  background:
    radial-gradient(circle at 80% 20%,rgba(18,189,232,.22),transparent 28rem),
    radial-gradient(circle at 15% 85%,rgba(20,100,244,.19),transparent 31rem),
    linear-gradient(145deg,#0d1830 0%,#122544 47%,#173261 100%)}
.hero::before{top:-220px;right:-80px;width:720px;height:720px;opacity:.85}
.hero::after{content:"";inset:0;width:auto;height:auto;border-radius:0;
  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:54px 54px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 92%);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 92%)}
.hero__copy{position:relative;z-index:1}
.hero__eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;color:#b9dff0;font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.hero__eyebrow>span{width:24px;height:1px;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.hero h1{text-wrap:balance;text-shadow:0 5px 28px rgba(0,0,0,.20)}
.hero__logo{display:block;width:min(100%,430px);height:auto;margin-bottom:22px}
.hero__art{position:relative}
.hero__art::before{content:"";position:absolute;inset:12% -8% -8% 10%;
  border-radius:30px;background:var(--grad-blue);filter:blur(50px);opacity:.25}
.hero__art img{position:relative;transform:rotate(1.2deg);
  box-shadow:0 36px 90px rgba(0,0,0,.52),0 0 0 1px rgba(255,255,255,.08)}
.hero__art img:hover{transform:translateY(-8px) rotate(0deg) scale(1.01)}
.hero__badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;
  border:1px solid rgba(255,255,255,.10);border-radius:999px;
  background:rgba(255,255,255,.055);backdrop-filter:blur(8px)}
.hero__badge::before{content:"";width:7px;height:7px;border-radius:50%;
  background:#63d49a;box-shadow:0 0 0 5px rgba(99,212,154,.12)}
.hero__proof{display:flex;gap:18px;flex-wrap:wrap;color:#acb8ca;font-size:13px}
.hero__proof span{display:flex;align-items:center;gap:6px}.hero__proof b{color:#72dbb0}
.btn--arrow{display:inline-flex;align-items:center;gap:12px}.btn--arrow span{font-size:20px;line-height:1;transition:transform .2s ease}.btn--arrow:hover span{transform:translateX(4px)}

/* Privacy-veilige, gestileerde portalweergave. */
.product-window{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:20px;background:#f7f9fc;box-shadow:0 40px 90px rgba(0,0,0,.48);transform:perspective(1200px) rotateY(-4deg) rotateX(2deg)}
.product-window__bar{height:38px;display:flex;align-items:center;gap:6px;padding:0 14px;background:#fff;border-bottom:1px solid #e8edf4}.product-window__bar i{width:7px;height:7px;border-radius:50%;background:#d9e0ea}.product-window__bar i:first-child{background:#12bde8}.product-window__bar span{margin-left:auto;color:#8b96a7;font-size:9px}
.product-window__body{display:grid;grid-template-columns:46px 1fr;min-height:370px}.product-nav{display:flex;flex-direction:column;align-items:center;gap:20px;padding:15px 0;background:#0d203c}.product-nav b{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--grad-blue);font-size:9px}.product-nav span{width:15px;height:15px;border-radius:4px;background:#31445f}.product-nav span.active{background:#20b9e6;box-shadow:0 0 0 5px rgba(18,189,232,.12)}
.product-main{padding:23px;color:var(--ink)}.product-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.product-head div{display:flex;flex-direction:column}.product-head small{color:#8490a2;font-size:9px}.product-head strong{font-size:15px;color:var(--navy)}.product-head em{font-style:normal;font-size:9px;font-weight:800;color:#16835c;background:#e5f8f0;padding:5px 9px;border-radius:999px}
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.metric-grid div{padding:12px;border:1px solid #e5eaf1;border-radius:10px;background:#fff;display:grid}.metric-grid span,.metric-grid small{font-size:8px;color:#8390a2}.metric-grid strong{font-size:21px;color:var(--navy)}.metric-grid small{color:#16835c}.chart-card{margin-top:10px;padding:14px;border:1px solid #e5eaf1;border-radius:11px;background:#fff}.chart-card__head{display:flex;justify-content:space-between;font-size:9px}.chart-card__head span{color:#8c98a8}.chart-bars{height:84px;display:flex;align-items:flex-end;gap:8px;padding-top:14px;border-bottom:1px solid #edf0f4}.chart-bars i{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:linear-gradient(#13bee8,#1464f4)}
.activity-row{display:flex;align-items:center;gap:9px;margin-top:10px;padding:10px 12px;background:#fff;border:1px solid #e5eaf1;border-radius:10px;font-size:8px}.avatar{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#1261df;background:#e7efff;font-weight:800}.activity-row div{display:grid}.activity-row small{color:#8a95a5}.activity-row>b{margin-left:auto;color:var(--blue)}.floating-stat{position:absolute;right:-16px;bottom:-20px;display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid rgba(255,255,255,.23);border-radius:13px;background:rgba(9,28,52,.88);box-shadow:0 18px 42px rgba(0,0,0,.35);backdrop-filter:blur(14px)}.floating-stat>span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:#fff;background:var(--grad-blue)}.floating-stat div{display:grid}.floating-stat small{font-size:8px;color:#9ba9bd}.floating-stat strong{font-size:11px;color:#fff}

.template-preview{display:grid;grid-template-columns:.72fr 1.28fr;align-items:center;gap:50px;margin-top:54px;padding:52px;border-radius:24px;overflow:hidden;background:linear-gradient(145deg,#0c1d37,#153761);box-shadow:var(--shadow-lg)}.preview-copy h3{font-size:29px;color:#fff}.preview-copy p{color:#b9c5d5}.preview-copy>a{font-weight:800;color:#64d6f1}.preview-copy>a span{margin-left:6px}.template-stack{position:relative;min-height:300px}.template-stack article{position:absolute;width:270px;min-height:250px;padding:24px;border-radius:17px;background:#fff;box-shadow:0 25px 55px rgba(0,0,0,.28);color:var(--ink)}.template-stack article:nth-child(1){z-index:3;left:15%;top:20px;transform:rotate(-2deg)}.template-stack article:nth-child(2){z-index:2;left:1%;top:4px;transform:rotate(-10deg) scale(.92)}.template-stack article:nth-child(3){z-index:1;left:32%;top:1px;transform:rotate(9deg) scale(.93)}.template-stack small,.template-stack strong{display:block}.template-stack small{margin:18px 0 6px;color:#8792a2}.template-stack strong{color:var(--navy);font-size:16px}.template-stack i{display:block;width:100%;height:5px;margin-top:12px;border-radius:3px;background:#e9edf2}.template-stack i+i{width:66%}.template-stack button{margin-top:24px;padding:9px 14px;border:0;border-radius:7px;background:#1264e8;color:#fff;font-weight:700}.template-icon{display:grid!important;place-items:center;width:34px;height:34px;border-radius:8px;background:#1264e8;color:#fff!important;font-weight:900}.template-icon--parcel{background:#e5a51a}.template-icon--doc{background:#18a66c}
.mini-product{min-height:260px;padding:26px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-md)}.mini-product>strong{display:block;margin:6px 0 25px;font-size:18px;color:var(--navy)}.mini-product__label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}.people-list{display:flex;align-items:center;padding:13px 0;border-top:1px solid var(--line);font-size:11px}.people-list i{display:grid;place-items:center;width:27px;height:27px;margin-right:-5px;border:2px solid #fff;border-radius:50%;background:#e4edff;color:#1559c9;font-style:normal;font-size:8px}.people-list span{margin-left:14px;font-weight:700}.people-list b{margin-left:auto;color:var(--muted);font-weight:600}.report-sheet{width:70%;margin:0 auto;padding:20px;background:#fafbfc;border:1px solid #e1e6ed;box-shadow:0 10px 25px rgba(7,24,47,.12);transform:rotate(2deg)}.report-sheet>b,.report-sheet>span{display:block}.report-sheet>b{color:var(--blue)}.report-sheet>span{font-size:9px;color:var(--muted)}.report-sheet>div{display:flex;align-items:flex-end;gap:5px;height:65px;margin-top:14px;border-bottom:1px solid #dce2e9}.report-sheet i{flex:1;height:35%;background:#13bce7}.report-sheet i:nth-child(2){height:70%}.report-sheet i:nth-child(3){height:48%}.report-sheet i:nth-child(4){height:86%}.report-sheet i:nth-child(5){height:62%}
.tenant-panel{padding:25px;color:var(--ink)}.tenant-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.tenant-head div{display:grid}.tenant-head small{font-size:9px;color:var(--muted)}.tenant-head strong{font-size:18px;color:var(--navy)}.tenant-head button{padding:9px 12px;border:0;border-radius:8px;background:var(--grad-blue);color:#fff;font-size:9px;font-weight:800}.tenant-row{display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:9px;border:1px solid #e4e9f0;border-radius:11px;background:#fff}.tenant-row>i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#e7efff;color:var(--blue);font-style:normal;font-size:9px;font-weight:900}.tenant-row>div{display:grid}.tenant-row strong{font-size:11px;color:var(--navy)}.tenant-row small{font-size:8px;color:var(--muted)}.tenant-row>span{margin-left:auto;color:var(--grey);font-size:9px}.tenant-row>b{color:var(--blue)}
.ui-shot{overflow:hidden;border:1px solid rgba(7,24,47,.12);border-radius:16px;background:#fff;box-shadow:0 22px 60px rgba(7,24,47,.16)}
.ui-shot>img{display:block;width:100%;height:auto}.ui-shot--hero{position:relative;border-color:rgba(255,255,255,.2);box-shadow:0 40px 90px rgba(0,0,0,.48);transform:perspective(1200px) rotateY(-4deg) rotateX(2deg)}
.ui-shot--hero>img{transform:scale(1.01)}.ui-shot--inset{border-color:rgba(255,255,255,.18);box-shadow:0 28px 65px rgba(0,0,0,.32);transform:rotate(1deg)}
.ui-feature{margin:0}.ui-feature .ui-shot{border-radius:14px}.ui-feature figcaption{display:grid;gap:4px;padding:18px 4px 0}.ui-feature figcaption strong{color:var(--navy);font-size:18px}.ui-feature figcaption span{color:var(--grey);font-size:14px}
.interface-section{background:linear-gradient(145deg,#f1f6fc 0%,#f8fafc 52%,#eef5ff 100%)}
.interface-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:34px}.interface-heading h2{margin-bottom:0}.interface-heading .lead{max-width:43ch;margin:0}
.interface-gallery{display:grid;grid-template-columns:1.18fr .82fr;gap:24px;align-items:start}.interface-card{margin:0;border:1px solid rgba(7,24,47,.1);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 12px 32px rgba(7,24,47,.08);transition:transform .22s ease,box-shadow .22s ease}.interface-card:hover{transform:translateY(-5px);box-shadow:0 22px 45px rgba(7,24,47,.14)}.interface-card--wide{grid-row:span 2}.interface-card__image{overflow:hidden;background:#e9eef5;border-bottom:1px solid var(--line)}.interface-card__image img{display:block;width:100%;height:auto;transition:transform .4s ease}.interface-card:hover .interface-card__image img{transform:scale(1.025)}.interface-card--wide .interface-card__image img{aspect-ratio:1.5;object-fit:cover;object-position:top left}.interface-card:not(.interface-card--wide) .interface-card__image img{aspect-ratio:1.5;object-fit:cover;object-position:top left}.interface-card figcaption{display:flex;gap:14px;padding:18px 20px 20px}.interface-card__number{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:9px;color:#fff;background:var(--grad-blue);font-size:11px;font-weight:800}.interface-card figcaption strong{color:var(--navy);font-size:17px}.interface-card figcaption p{margin:3px 0 0;color:var(--grey);font-size:13px;line-height:1.45}.interface-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:28px}.interface-footer>span{color:var(--muted);font-size:13px}.interface-footer .btn{display:inline-flex;align-items:center;gap:10px}.interface-footer .btn span{font-size:19px}

/* section rhythm and more tactile cards */
.section{position:relative}
.section--tint{
  background:
    linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.20)),
    var(--tint);
  border-top:1px solid rgba(230,234,240,.8);
  border-bottom:1px solid rgba(230,234,240,.8)
}
.section h2{text-wrap:balance}
.section>.wrap>h2{max-width:780px}
.section>.wrap>h2::after{content:"";display:block;width:42px;height:3px;margin-top:17px;
  border-radius:99px;background:var(--grad-blue)}
.kicker{box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.card,.steps .step{
  box-shadow:0 8px 28px rgba(7,24,47,.065),inset 0 1px 0 rgba(255,255,255,.85)
}
.card,.steps .step{backdrop-filter:blur(8px)}
.card:hover,.steps .step:hover{
  border-color:rgba(20,100,244,.28);
  box-shadow:0 22px 55px rgba(7,24,47,.13),0 8px 22px rgba(20,100,244,.07)
}

/* CTA and footer */
.cta{position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%,rgba(18,189,232,.22),transparent 24rem),
    radial-gradient(circle at 85% 80%,rgba(20,100,244,.18),transparent 28rem),
    linear-gradient(145deg,#0d1830,#122a4e)}
.cta::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:50px 50px}
.cta__inner{position:relative;z-index:1}
.footer{border-top:1px solid rgba(255,255,255,.06)}

/* responsive */
@media(max-width:860px){
  .nav__links a:not(.btn){display:none}
  .nav__links{gap:12px}
  .hero__inner{grid-template-columns:1fr;padding:52px 24px 60px}
  .hero h1{font-size:34px}
  .hero__art{order:-1;max-width:360px}
  .template-preview{grid-template-columns:1fr;padding:34px}.template-stack{transform:scale(.86);transform-origin:left top;margin-bottom:-35px}
  .interface-heading{display:block}.interface-heading .lead{margin-top:14px}.interface-gallery{grid-template-columns:1fr 1fr}.interface-card--wide{grid-column:1/-1;grid-row:auto}
  .hero{min-height:auto}
  .hero__art img{transform:none}
  .steps{grid-template-columns:1fr 1fr}
  h2{font-size:26px}
  .cta__inner{grid-template-columns:1fr;gap:42px}.cta h2{max-width:18ch}.cta__visual{max-width:640px;width:100%;padding-right:18px}
}
@media(max-width:560px){
  .nav__inner{height:62px;gap:10px}
  .nav__brand img{height:36px}
  .btn--sm{padding:8px 10px;font-size:12.5px}
  .wrap{padding:0 18px}
  .hero__inner{padding:44px 18px 52px}
  .hero h1{font-size:29px}
  .hero__art{max-width:100%}.product-window,.ui-shot--hero{transform:none}.product-window__body{min-height:310px}.product-main{padding:14px}.floating-stat,.activity-row{display:none}.template-preview{padding:26px}.preview-copy h3{font-size:23px}.template-stack{min-height:245px;transform:scale(.72);width:135%}.template-stack article:nth-child(1){left:10%}
  .interface-gallery{grid-template-columns:1fr}.interface-card--wide{grid-column:auto}.interface-footer{display:block}.interface-footer .btn{margin-top:14px}
  .hero__badge{align-items:flex-start;border-radius:14px}
  .hero__badge::before{margin-top:7px;flex:none}
  .steps{grid-template-columns:1fr}
  .btn--lg{padding:13px 22px;font-size:16px}
  h2{font-size:23px}
  .cta{padding:64px 0}.cta h2{font-size:29px}.cta__actions{align-items:stretch;flex-direction:column;gap:18px}.cta__actions .btn{justify-content:center;width:100%}.cta__contact-link{text-align:center}.cta__details{gap:18px}.cta__details span{white-space:normal}.cta__visual{padding:0 8px 20px 0}.cta__window{transform:none}.cta__visual-note{right:0;min-width:190px}
  .legal-header .wrap{min-height:82px}.legal-header img{width:205px}.legal-main{padding:42px 0 60px}.legal-content h1{font-size:32px}
  .footer__contact{grid-template-columns:1fr;justify-items:center;gap:20px;padding-bottom:24px;text-align:center}.footer__contact-company,.footer__contact-details{justify-items:center}.footer__bottom{align-items:flex-start;flex-direction:column}.footer__legal{gap:12px}
}
@media(max-width:390px){
  .nav__inner{padding-inline:14px}
  .nav__brand img{width:105px;height:auto}
  .nav__links{gap:6px}
  .nav__links .btn--sm{padding:7px 8px;font-size:11.5px}
  .hero__cta{display:grid;grid-template-columns:1fr}
  .hero__cta .btn{width:100%}
  .hero__proof{gap:8px 14px}
}
@media(prefers-reduced-motion:reduce){
  .nav__brand img,.nav__links a::after,.steps .step,.btn--primary::before{transition:none !important}
}
@media(max-width:560px){.lightbox{padding:10px}.lightbox__panel{max-height:calc(100vh - 20px)}.lightbox__stage{padding:12px 46px;max-height:calc(100vh - 140px)}.lightbox__stage img{max-height:calc(100vh - 180px)}.lightbox__arrow{width:36px;height:36px}.lightbox__arrow--prev{left:7px}.lightbox__arrow--next{right:7px}.lightbox__bottom{padding:12px 14px;font-size:10px}}

/* Plek voor een portalscreenshot die nog geleverd moet worden. Bewust
   zichtbaar en benoemd: een lege plek die eruitziet als opmaak wordt bij
   publicatie over het hoofd gezien. */
.shot-placeholder{display:flex;align-items:center;justify-content:center;
  min-height:260px;padding:24px;text-align:center;color:var(--muted);
  background:var(--tint);border:2px dashed var(--line);border-radius:var(--radius)}
.shot-placeholder strong{display:block;color:var(--grey);margin-bottom:4px}

/* honeypot: onzichtbaar voor mensen, blijft aanwezig voor bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* Opsommingen met vinkje en de FAQ-accordeon (native <details>, dus ook
   zonder JavaScript bruikbaar). */
.checks{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px}
.checks li{position:relative;padding-left:30px;color:var(--grey)}
.checks li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;
  border-radius:50%;background:var(--grad-blue)}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:28px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 20px;margin-bottom:12px;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;font-weight:700;color:var(--navy);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--blue);font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq p{margin:12px 0 0;color:var(--grey)}

/* Demo-aanvraagformulier. Overgenomen uit de .trial*-blokken van de
   EyeNotify-site (trial -> demo, trialform -> demoform); de oranje
   kleurwaarden zijn vervangen door de blauwe/cyaan tokens van deze site. */
.demo{display:grid;grid-template-columns:.84fr 1.16fr;max-width:1060px;margin:0 auto;
  border:1px solid var(--line);border-radius:24px;overflow:hidden;
  background:#fff;box-shadow:0 28px 80px rgba(16,24,40,.13)}
.demo__intro{position:relative;padding:48px 42px;color:#fff;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(circle at 100% 0,rgba(18,189,232,.32),transparent 20rem),
    linear-gradient(145deg,#182238,#263756)}
.demo__intro::before{content:"";position:absolute;z-index:-1;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:42px 42px}
.demo__intro::after{content:"";position:absolute;z-index:-1;width:260px;height:260px;
  left:-130px;bottom:-130px;border-radius:50%;
  background:radial-gradient(circle,rgba(90,120,220,.28),transparent 70%)}
.demo__intro .kicker{color:#d3f0fb;background:rgba(18,189,232,.16);
  border-color:rgba(18,189,232,.35)}
.demo__intro h2{color:#fff;font-size:34px;margin:.15em 0 .55em}
.demo__intro>p{color:#cbd3e1;font-size:17px;line-height:1.7}
.demo__formbox{padding:46px 48px;background:
  radial-gradient(circle at 100% 0,rgba(20,100,244,.07),transparent 19rem),#fff}
.demo__formhead{margin-bottom:26px}
.demo__formhead h3{font-size:25px;margin:8px 0 5px}
.demo__formhead p{color:var(--grey);font-size:14.5px;margin:0}
.demo__step{display:inline-block;color:var(--blue-dark);font-size:11.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase}
.demoform{margin:0;max-width:none;padding:0;border:0;background:none;box-shadow:none}
.demoform__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin-bottom:18px}
.demoform label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}
.demoform label>span{color:var(--blue)}
.demoform label small{display:inline;color:var(--muted);font-size:11.5px;font-weight:500;
  margin-left:4px}
.demoform input,.demoform textarea{padding:12px 14px;border-radius:10px;
  border:1px solid rgba(31,42,68,.20);font:inherit;background:rgba(255,255,255,.9);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.demoform input::placeholder,.demoform textarea::placeholder{color:#a7afbc}
.demoform input:hover,.demoform textarea:hover{border-color:rgba(20,100,244,.5)}
.demoform__wide{grid-column:1/-1}
.demoform .cf-turnstile{margin:14px 0}
.demoform__submit{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:5px}
.demoform__submit span{font-size:22px;line-height:1;transition:transform .2s ease}
.demoform__submit:hover span{transform:translateX(4px)}
.demoform__privacy{text-align:center;color:var(--muted);font-size:11.5px;margin:13px 0 0}
.demoform__privacy a{text-decoration:underline;text-underline-offset:2px}
.demoform select{width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink);font:inherit}
.demoform select:focus,.demoform input:focus,.demoform textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(20,100,244,.12)}
@media (max-width:900px){
  .demo{grid-template-columns:1fr}
  .demo__intro,.demo__formbox{padding:40px}
}
@media (max-width:720px){.demoform__grid{grid-template-columns:1fr}}
.language-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid rgba(148,163,184,.35); border-radius: 9px; background: rgba(255,255,255,.08); }
.language-switch button { border: 0; border-radius: 6px; padding: 5px 8px; background: transparent; color: inherit; font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; }
.language-switch button.is-active { background: #fff; color: #0d2444; box-shadow: 0 1px 3px rgba(7,24,47,.18); }
.language-switch button:focus-visible { outline: 2px solid #12bde8; outline-offset: 2px; }

/* Korte laadstatus bij het openen van de landingpagina. Alleen zichtbaar
   wanneer JavaScript actief is; zonder JavaScript blijft de pagina direct
   bruikbaar. */
.page-loader{position:fixed;inset:0;z-index:200;display:none;place-items:center;
  background:#101010;opacity:1;visibility:visible;
  transition:opacity .36s ease,visibility .36s ease}
.js .page-loader{display:grid}
.page-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.page-loader__spinner{display:block;width:42px;height:42px;border:3px solid rgba(255,255,255,.18);
  border-top-color:#fff;border-right-color:rgba(255,255,255,.78);border-radius:50%;
  animation:page-loader-spin .8s linear infinite}
@keyframes page-loader-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .page-loader{transition:none}
  .page-loader__spinner{animation:none;border-color:#fff;border-right-color:rgba(255,255,255,.3)}
}

/* Premium SaaS refinement */
:root{
  --radius:18px;
  --wrap:1200px;
  --shadow:0 1px 2px rgba(7,24,47,.04),0 8px 24px rgba(7,24,47,.055);
  --shadow-md:0 18px 48px rgba(7,24,47,.10);
  --shadow-lg:0 32px 80px rgba(7,24,47,.16)
}
body{background:#fbfcfe;letter-spacing:-.005em}
h1,h2,h3{letter-spacing:-.025em}
p{letter-spacing:0}
.wrap{width:100%}

.nav{background:rgba(251,252,254,.82);border-bottom-color:rgba(212,222,236,.72);
  box-shadow:0 8px 32px rgba(7,24,47,.045)}
.nav__inner{height:84px}
.nav__links{gap:16px}
.nav__links a:not(.btn){position:relative;font-size:13.5px;font-weight:700}
.nav__links a:not(.btn)::after{bottom:-9px;height:2px}
.language-switch{border-color:rgba(20,100,244,.15);background:rgba(20,100,244,.045)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:12px;
  letter-spacing:-.005em;box-shadow:0 1px 2px rgba(7,24,47,.05)}
.btn--primary{border-color:rgba(255,255,255,.14);box-shadow:0 14px 34px rgba(20,100,244,.24)}
.btn--primary:hover{box-shadow:0 18px 42px rgba(20,100,244,.34)}
.btn--portal{box-shadow:inset 0 1px 0 #fff,0 5px 15px rgba(7,24,47,.05)}

.hero{min-height:700px;background:
  radial-gradient(circle at 84% 18%,rgba(18,189,232,.25),transparent 27rem),
  radial-gradient(circle at 5% 85%,rgba(20,100,244,.20),transparent 26rem),
  linear-gradient(145deg,#07182f 0%,#0b2242 52%,#102f58 100%)}
.hero::before{width:720px;height:720px;top:-260px;right:-210px;opacity:.72}
.hero::after{width:650px;height:650px;opacity:.68}
.hero__inner{grid-template-columns:minmax(0,.92fr) minmax(480px,1.08fr);gap:72px;
  padding-top:104px;padding-bottom:116px}
.hero__logo{width:min(100%,440px);margin-bottom:25px}
.hero__eyebrow{margin-bottom:22px;padding:7px 12px;border:1px solid rgba(99,215,243,.18);
  border-radius:999px;background:rgba(18,189,232,.08);backdrop-filter:blur(8px)}
.hero__eyebrow>span{width:18px}
.hero h1{max-width:13ch;font-size:clamp(44px,4.5vw,64px);line-height:1.02;letter-spacing:-.048em}
.hero__sub{max-width:57ch;color:#c6d2e3;font-size:18px;line-height:1.72}
.hero__cta{margin:34px 0 25px}
.hero__proof{gap:10px}
.hero__proof span{padding:8px 11px;border:1px solid rgba(255,255,255,.09);border-radius:999px;
  background:rgba(255,255,255,.055);backdrop-filter:blur(8px)}
.hero__art{isolation:isolate}
.hero__art::before{inset:8% -6% -10% 8%;opacity:.34}
.ui-shot--hero{border-radius:22px;border-color:rgba(255,255,255,.24);
  box-shadow:0 45px 100px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.05);
  transform:perspective(1400px) rotateY(-5deg) rotateX(2deg)}

.section{padding:104px 0}
.section--tint{background:
  radial-gradient(circle at 90% 10%,rgba(18,189,232,.07),transparent 26rem),
  linear-gradient(145deg,#f5f8fc,#fbfcfe)}
.section>.wrap>h2{max-width:850px;font-size:clamp(31px,3vw,43px);line-height:1.08}
.section>.wrap>.lead{max-width:66ch;font-size:18px;line-height:1.7}
.kicker{padding:6px 13px;background:rgba(20,100,244,.075);border-color:rgba(20,100,244,.16)}

.cards{gap:22px}
.card{min-height:230px;padding:31px 30px 28px;border-color:rgba(163,181,204,.30);
  border-radius:20px;background:
    radial-gradient(circle at 100% 0,rgba(18,189,232,.075),transparent 11rem),
    rgba(255,255,255,.92);box-shadow:var(--shadow)}
.card::before{height:2px;opacity:.75}
.card::after{right:-58px;top:-58px;width:140px;height:140px;opacity:.9}
.card:hover{transform:translateY(-7px);border-color:rgba(20,100,244,.25);
  box-shadow:0 26px 64px rgba(7,24,47,.13),0 10px 28px rgba(20,100,244,.07)}
.card h3{font-size:21px;line-height:1.2}
.card p,.card li{color:var(--grey)}
.card:has(.card__icon){padding-top:96px}
.card__icon{top:30px;left:30px;width:52px;height:52px;border-radius:15px;
  border:1px solid rgba(255,255,255,.34);box-shadow:0 12px 26px rgba(185,28,28,.22)}
.card:hover .card__icon{box-shadow:0 16px 32px rgba(185,28,28,.30)}

.page-home #functies .cards,.page-home .awareness-cta__cards,.page-resellers .reseller-benefits .cards{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr))
}
.page-home #functies .card{grid-column:span 4}
.page-home #functies .card:nth-child(1),.page-home #functies .card:nth-child(2),
.page-home #functies .card:nth-child(6),.page-home #functies .card:nth-child(7){grid-column:span 6}
.page-home .awareness-cta__cards .card{grid-column:span 3}
.page-resellers .reseller-benefits .card{grid-column:span 4}

.template-preview{margin-top:64px;padding:60px;border:1px solid rgba(255,255,255,.10);
  border-radius:28px;background:
    radial-gradient(circle at 90% 20%,rgba(18,189,232,.18),transparent 24rem),
    linear-gradient(145deg,#07182f,#153761);box-shadow:0 32px 76px rgba(7,24,47,.22)}
.preview-copy h3{font-size:34px;line-height:1.1}
.preview-copy p{font-size:16px;line-height:1.7}
.ui-shot--inset{border-radius:18px;transform:rotate(1.2deg);box-shadow:0 30px 70px rgba(0,0,0,.36)}

.interface-section{background:
  radial-gradient(circle at 10% 15%,rgba(20,100,244,.08),transparent 25rem),
  linear-gradient(145deg,#f1f6fc,#fafcff 56%,#eef5ff)}
.interface-heading{margin-bottom:42px}
.interface-heading h2{font-size:clamp(31px,3vw,43px)}
.interface-card{border-radius:22px;border-color:rgba(163,181,204,.28);
  box-shadow:0 16px 42px rgba(7,24,47,.085)}
.interface-card:hover{transform:translateY(-7px);box-shadow:0 28px 64px rgba(7,24,47,.14)}
.interface-card figcaption{padding:21px 22px 23px}
.interface-card__number{width:36px;height:36px;border-radius:11px;box-shadow:0 8px 18px rgba(20,100,244,.20)}

.awareness-cta__visual{max-width:980px;margin-top:44px}
.awareness-dashboard-screenshot{border-radius:22px;border-color:rgba(163,181,204,.34);
  box-shadow:0 30px 76px rgba(7,24,47,.15)}
.awareness-cta__flow{margin-top:48px;padding:26px 30px;border-radius:20px;
  border-color:rgba(163,181,204,.30);box-shadow:var(--shadow-md)}
.ai-disclosure{max-width:none;margin-top:48px;padding:38px;border:1px solid rgba(20,100,244,.16);
  border-radius:24px;background:radial-gradient(circle at 100% 0,rgba(18,189,232,.10),transparent 22rem),
  linear-gradient(145deg,#f4f9ff,#fff 58%,#f8fbff);box-shadow:var(--shadow);text-align:left}
.ai-disclosure__heading{display:grid;grid-template-columns:64px minmax(0,1fr);gap:22px;align-items:start;max-width:900px;margin:0 auto 28px;text-align:center}
.ai-disclosure__heading>div{padding-right:86px}
.ai-disclosure__icon{display:grid;width:64px;height:64px;place-items:center;border-radius:18px;background:linear-gradient(145deg,#12bde8,#1464f4);box-shadow:0 14px 30px rgba(20,100,244,.22)}
.ai-disclosure__icon svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ai-disclosure__label{display:inline-flex;margin-bottom:6px;padding:7px 13px;border:1px solid rgba(239,116,24,.28);border-radius:999px;background:#fff8f2;color:#c85e12;font-size:11px;font-weight:850;letter-spacing:.15em;text-transform:uppercase}
.ai-disclosure h3{margin:0 0 7px;color:var(--navy);font-size:clamp(27px,3vw,36px)}
.ai-disclosure__heading p{max-width:78ch;margin:0 auto;color:var(--grey);font-size:15px;line-height:1.65}
.ai-disclosure__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ai-disclosure__grid article{position:relative;min-height:235px;padding:26px 24px 24px;border:1px solid rgba(163,181,204,.34);border-radius:16px;background:rgba(255,255,255,.86)}
.ai-disclosure__number{display:block;margin-bottom:18px;color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.14em}
.ai-disclosure__grid h4{margin:0 0 10px;color:var(--navy);font-size:16px;line-height:1.35}
.ai-disclosure__grid p{margin:0;color:var(--grey);font-size:14px;line-height:1.65}
.ai-disclosure__note{margin:22px 0 0;padding-top:20px;border-top:1px solid rgba(163,181,204,.32);color:var(--grey);font-size:13px;text-align:center}
.ai-disclosure__note strong{color:var(--navy)}

.pricing-table-wrap{margin-top:40px;border-radius:20px;border-color:rgba(163,181,204,.30);
  box-shadow:var(--shadow-md)}
.pricing-table caption{padding:22px 24px 15px}
.pricing-table th,.pricing-table td{padding:17px 24px}
.pricing-notes article{border-radius:15px;background:linear-gradient(145deg,#f7fbff,#fff)}
.checks{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 26px;margin-top:30px}
.checks li{padding:13px 16px 13px 42px;border:1px solid rgba(163,181,204,.26);border-radius:13px;background:#fff}
.checks li::before{left:15px;top:1.05em}
.demo__intro .checks{grid-template-columns:1fr;gap:14px;margin:27px 0 0}
.demo__intro .checks li{padding:0 0 0 30px;border:0;border-radius:0;background:transparent;
  color:#fff;font-weight:750;line-height:1.5}
.demo__intro .checks li::before{left:0;top:.28em;width:17px;height:17px;
  box-shadow:0 0 0 5px rgba(18,189,232,.10)}

.faq{max-width:920px;margin-top:34px}
.faq details{padding:20px 22px;border-radius:16px;border-color:rgba(163,181,204,.28);
  box-shadow:0 8px 24px rgba(7,24,47,.045)}
.faq details[open]{border-color:rgba(20,100,244,.22);box-shadow:0 14px 34px rgba(7,24,47,.08)}
.faq summary{font-size:16px}

.demo{border-radius:28px;border-color:rgba(163,181,204,.28);box-shadow:0 36px 90px rgba(7,24,47,.15)}
.demo__intro{padding:56px 48px;background:
  radial-gradient(circle at 100% 0,rgba(18,189,232,.30),transparent 21rem),
  linear-gradient(145deg,#07182f,#18375e)}
.demo__formbox{padding:52px}
.demoform input,.demoform textarea,.demoform select{border-radius:12px;background:#fbfdff}

.cta{padding:104px 0}
.cta__inner{gap:90px}
.cta__window{border-radius:20px;box-shadow:0 38px 90px rgba(0,0,0,.42)}
.footer{padding-top:50px}

@media(max-width:1020px){
  .hero__inner{grid-template-columns:1fr 1fr;gap:44px}.hero h1{font-size:44px}
  .page-home #functies .cards,.page-home .awareness-cta__cards,.page-resellers .reseller-benefits .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-home #functies .card,.page-home #functies .card:nth-child(n),.page-home .awareness-cta__cards .card,.page-resellers .reseller-benefits .card{grid-column:auto}
  .ai-disclosure__grid{grid-template-columns:1fr}.ai-disclosure__grid article{min-height:0}
}
@media(max-width:1120px){
  .nav__links{gap:10px}
  .nav__links a[href$="#interface"],.nav__links a[href$="#faq"]{display:none}
}
@media(max-width:860px){
  .hero{min-height:auto}.hero__inner{grid-template-columns:1fr;padding-top:62px;padding-bottom:72px}
  .hero__copy{order:1}.hero__art{order:2;max-width:680px}.hero h1{font-size:clamp(36px,8vw,48px)}
  .section{padding:82px 0}.template-preview{padding:40px}
}
@media(max-width:620px){
  .nav__inner{height:68px}.section{padding:68px 0}
  .page-home #functies .cards,.page-home .awareness-cta__cards,.page-resellers .reseller-benefits .cards{grid-template-columns:1fr}
  .card{min-height:0;padding:27px 24px 24px}.card:has(.card__icon){padding-top:88px}
  .card__icon{top:24px;left:24px;width:48px;height:48px}
  .template-preview{padding:30px 24px;border-radius:22px}.preview-copy h3{font-size:27px}
  .checks{grid-template-columns:1fr}.demo__intro,.demo__formbox{padding:36px 26px}
  .awareness-cta__flow{padding:22px 20px}
  .ai-disclosure{margin-top:36px;padding:26px 20px;border-radius:20px}.ai-disclosure__heading{display:block;margin-bottom:22px}.ai-disclosure__heading>div{padding:0}.ai-disclosure__icon{width:56px;height:56px;margin:0 auto 18px}.ai-disclosure__grid article{padding:22px 20px}.ai-disclosure__note{text-align:left}
}

/* Krimpende kopbalk (zoals eyenotify.nl): zodra er gescrold is (.scrolled) wordt
   de balk lager en het logo kleiner. De marge onderaan vangt het hoogteverschil
   op, zodat de pagina eronder niet verspringt: hoogte en marge lopen gelijk op. */
.nav{transition:box-shadow .25s ease,border-color .25s ease,background .25s ease,margin-bottom .25s ease}
.nav__inner{transition:height .25s ease}
.nav__brand img{transition:height .25s ease,transform .25s ease,filter .25s ease}
.nav.scrolled{margin-bottom:16px}
.nav.scrolled .nav__inner{height:60px}
.nav.scrolled .nav__brand img{height:44px}
/* Ankerlinks (#demo, #faq) landen onder de vaste balk, niet erachter. */
html{scroll-padding-top:72px}
@media(prefers-reduced-motion:reduce){
  .nav,.nav__inner,.nav__brand img{transition:none !important}
}