/* Novogara BV - novogara.com
   Handgeschreven CSS, geen framework, geen externe requests, geen tracking.
   Lettertype Space Grotesk (SIL OFL) wordt lokaal geserveerd, alleen voor koppen. */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(grotesk-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: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(grotesk-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;
}

:root {
  --bg:            #070b11;
  --bg-panel:      #0e151f;
  --bg-panel-2:    #121b27;
  --line:          #1e2b3a;
  --line-soft:     #16212e;
  --text:          #dbe7f2;
  --text-dim:      #8da2b8;
  --text-faint:    #63788e;
  --blue:          #00a7ff;
  --blue-dark:     #0081c6;
  --blue-glow:     rgba(0, 167, 255, .18);
  --indigo:        #4a5bd4;
  --indigo-soft:   rgba(74, 91, 212, .22);
  /* Tweede accentkleur. Regel: blauw = aanklikbaar, lichtgroen = opschrift of getal.
     Zo blijft meteen duidelijk wat een link is en wat niet. */
  --lime:          #9fe870;
  --lime-soft:     rgba(159, 232, 112, .12);
  --violet:        #8b7df5;
  --white:         #fff;
  --radius:        12px;
  --container:     1160px;
  --display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: #4cc2ff; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--white);
  line-height: 1.08;
  margin: 0 0 .6em;
  font-weight: 700;
  letter-spacing: -.025em;
}
h1 { font-size: clamp(2.35rem, 6vw, 4.15rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.15rem; letter-spacing: -.015em; line-height: 1.25; }
p  { margin: 0 0 1.1em; }
ul { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: .4em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
strong { color: var(--text); font-weight: 600; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--blue); color: #001320; padding: .6rem 1rem; font-weight: 600;
}
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }

/* ---------- Header ---------- */
.topbar {
  background: #05080d;
  border-bottom: 1px solid var(--line-soft);
  font-size: .8rem;
  color: var(--text-faint);
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 38px; flex-wrap: wrap; }
.topbar a { color: var(--text-dim); }
.topbar a:hover { color: var(--blue); }
.topbar .dot { color: var(--lime); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 11, 17, .96);
  border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; gap: 1.5rem; min-height: 70px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 30px; width: auto; }
.nav { margin-left: auto; display: flex; align-items: center; gap: .1rem; }
.nav a {
  position: relative;
  font-family: var(--display); font-weight: 500;
  color: var(--text-dim); font-size: .93rem;
  padding: .55rem .85rem; border-radius: 7px;
  transition: color .15s;
}
.nav a:hover { color: var(--white); }
.nav a::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .25rem;
  height: 1.5px; border-radius: 2px; background: var(--blue);
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav a:hover::after { transform: scaleX(1); }
.nav a.active { color: var(--white); }
.nav a.active::after { transform: scaleX(1); }
.btn-portal {
  margin-left: .7rem; background: var(--blue); color: #00131f !important;
  font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .58rem 1.15rem !important; border-radius: 7px;
  box-shadow: 0 0 0 0 var(--blue-glow); transition: background .15s, box-shadow .2s;
}
.btn-portal:hover { background: #33b9ff; box-shadow: 0 0 22px -4px var(--blue-glow); }
.btn-portal::after { display: none !important; }

.nav-toggle { display: none; }
.nav-label { display: none; margin-left: auto; cursor: pointer; padding: .5rem; color: var(--text-dim); }
.nav-label svg { display: block; }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-block;
  font-family: var(--display); font-weight: 600; font-size: .95rem; letter-spacing: -.01em;
  padding: .82rem 1.7rem; border-radius: 8px; border: 1px solid transparent;
  transition: background .16s, border-color .16s, box-shadow .2s, color .16s;
}
.btn-primary { background: var(--blue); color: #00131f; box-shadow: 0 0 0 0 var(--blue-glow); }
.btn-primary:hover { background: #33b9ff; color: #00131f; box-shadow: 0 8px 30px -8px var(--blue-glow); }
.btn-ghost { border-color: #31445a; color: var(--text); background: rgba(255,255,255,.02); }
.btn-ghost:hover { border-color: var(--blue); color: var(--white); background: rgba(0,167,255,.06); }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 100% at 12% -12%, rgba(0,129,198,.32) 0, transparent 58%),
    radial-gradient(ellipse 55% 85% at 88% -5%, rgba(74,91,212,.26) 0, transparent 55%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(0,167,255,.07) 0, transparent 60%),
    var(--bg);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0, #000 0, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0, #000 0, transparent 75%);
  opacity: .55; pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.hero .container { position: relative; z-index: 2; padding-top: 5rem; padding-bottom: 5.5rem; }
.hero-slim .container { padding-top: 3.1rem; padding-bottom: 3rem; }
.hero-slim .lead { max-width: 60ch; margin-bottom: 1.7rem; }
.hero-mails { display: flex; flex-wrap: wrap; gap: .8rem 2.5rem; }
.hero-mails a {
  display: grid; gap: .15rem; font-family: var(--display); font-weight: 600;
  font-size: 1.12rem; color: var(--blue); letter-spacing: -.01em;
}
.hero-mails a:hover { color: #4cc2ff; }
.hero-mails span {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-faint);
}
.hero-slim + .section { padding-top: 3.2rem; }
.jump { margin: 1.4rem 0 0; }
.jump a {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim); border-bottom: 1px solid var(--line); padding-bottom: .25rem;
}
.jump a:hover { color: var(--lime); border-color: rgba(159,232,112,.45); }
#company { scroll-margin-top: 5rem; }
.big-mail {
  display: grid; gap: .1rem; margin-bottom: .9rem;
  font-family: var(--display); font-weight: 600; font-size: 1.1rem;
  color: var(--blue); letter-spacing: -.01em;
}
.big-mail:hover { color: #4cc2ff; }
.big-mail span {
  font-family: var(--mono); font-size: .67rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-faint);
}
.side-note { color: var(--text-dim); font-size: .9rem; margin: 1rem 0 0 !important;
  padding-top: .9rem; border-top: 1px solid var(--line); }
.side-note strong { color: var(--text); }
.steps-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-bottom: 0;
}
.contact-after h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: .9rem; }
.contact-after .map { margin-bottom: 0; }
.contact-after .contact-card + .contact-card { margin-top: 1.1rem; }

.hero-home .container { padding-top: 6.5rem; padding-bottom: 9rem; max-width: 940px; text-align: center; }
.hero p.lead { font-size: 1.14rem; color: var(--text-dim); max-width: 62ch; margin-bottom: 1.9rem; }
.hero-home p.lead { margin-left: auto; margin-right: auto; }
.hero-home .btn-row { justify-content: center; }
.hero h1 { text-wrap: balance; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: .73rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue); background: rgba(0,167,255,.06);
  border: 1px solid rgba(0,167,255,.22); border-radius: 100px;
  padding: .36rem .95rem; margin-bottom: 1.5rem;
}
.eyebrow .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 0 3px rgba(159,232,112,.15);
}
/* Nederlandse vlag in de hero: officiele kleuren, 3:2, met een haarlijntje eromheen
   zodat de witte baan niet wegvalt tegen de donkere achtergrond. */
.eyebrow .flag {
  display: block; border-radius: 2.5px; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}

/* netwerk-horizon onderaan de hero */
.horizon { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; pointer-events: none; }
.horizon .swoosh { position: relative; height: clamp(120px, 16vw, 210px); }
/* Elke lijn is een eigen laag die alleen met transform beweegt. Dat is de enige
   eigenschap die de browser volledig aan de videokaart overlaat: geen herberekening
   en geen hertekening, in tegenstelling tot een bewegende schaduw of SMIL. */
.horizon .laag { position: absolute; inset: 0; will-change: transform; }
.horizon .laag svg { display: block; width: 100%; height: 100%; }

@keyframes drift0 {
  from { transform: translate3d(-1.4%, 5px, 0); }
  to   { transform: translate3d(1.4%, -5px, 0); }
}
.horizon .l0 { animation: drift0 34s ease-in-out 0.0s infinite alternate; }
@keyframes drift1 {
  from { transform: translate3d(-1.0%, 3px, 0); }
  to   { transform: translate3d(1.0%, -3px, 0); }
}
.horizon .l1 { animation: drift1 28s ease-in-out -6.0s infinite alternate; }
@keyframes drift2 {
  from { transform: translate3d(-2.1%, 7px, 0); }
  to   { transform: translate3d(2.1%, -7px, 0); }
}
.horizon .l2 { animation: drift2 41s ease-in-out -14.0s infinite alternate; }
@keyframes drift3 {
  from { transform: translate3d(-1.6%, 5px, 0); }
  to   { transform: translate3d(1.6%, -5px, 0); }
}
.horizon .l3 { animation: drift3 37s ease-in-out -22.0s infinite alternate; }
@keyframes drift4 {
  from { transform: translate3d(-2.4%, 8px, 0); }
  to   { transform: translate3d(2.4%, -8px, 0); }
}
.horizon .l4 { animation: drift4 46s ease-in-out -31.0s infinite alternate; }

/* Lichtpulsen door de lijnen: licht door een glasvezel. Eentje gaat van links naar
   rechts over de hoofdlijn, eentje van rechts naar links over de lijn eronder - ze
   kruisen elkaar halverwege - en af en toe schuift er een trage, zachte over de dikke
   onderlaag. Bewust GEEN doorlopende stroom: elke puls steekt in 4 a 6 seconden over en
   wacht daarna de rest van zijn cyclus (19 - 31 s) onzichtbaar af, want permanente
   beweging maakt onrustig. Positie en hoek komen uit een booglengte-gelijke sampling
   van exact hetzelfde bezierpad als de lijn zelf, dus elke puls blijft op zijn vezel
   liggen, houdt constante snelheid en de streep hangt altijd achter de kop - ook
   terwijl de laag driftet. Alleen transform en opacity: geen hertekening per frame,
   geen SMIL, geen filter, geen blur. */
.horizon .vonk { opacity: 0; will-change: transform, opacity; }
.horizon .p1 { animation: puls-p1 19s linear -0.5s infinite; }
.horizon .p2 { animation: puls-p2 19s linear -1.5s infinite; }
.horizon .p0 { animation: puls-p0 31s linear -20.0s infinite; }
@keyframes puls-p1 {
  0.0% { transform: translate(-60.0px, 196.0px) rotate(-13.29deg); opacity: 0; }
  1.0% { transform: translate(16.4px, 179.2px) rotate(-11.59deg); }
  2.0% { transform: translate(93.4px, 164.4px) rotate(-10.10deg); opacity: 1; }
  3.0% { transform: translate(171.0px, 151.5px) rotate(-8.77deg); }
  4.0% { transform: translate(248.7px, 140.4px) rotate(-7.57deg); }
  5.0% { transform: translate(326.4px, 130.8px) rotate(-6.46deg); }
  6.0% { transform: translate(404.5px, 122.7px) rotate(-5.42deg); }
  7.0% { transform: translate(482.6px, 116.0px) rotate(-4.43deg); }
  8.0% { transform: translate(560.9px, 110.6px) rotate(-3.47deg); }
  9.0% { transform: translate(639.1px, 106.5px) rotate(-2.54deg); }
  10.0% { transform: translate(717.8px, 103.6px) rotate(-1.62deg); }
  11.0% { transform: translate(796.3px, 102.0px) rotate(-0.70deg); }
  12.0% { transform: translate(874.8px, 101.7px) rotate(0.22deg); }
  13.0% { transform: translate(953.0px, 102.6px) rotate(1.16deg); }
  14.0% { transform: translate(1031.7px, 104.9px) rotate(2.14deg); }
  15.0% { transform: translate(1110.0px, 108.5px) rotate(3.15deg); }
  16.0% { transform: translate(1188.1px, 113.5px) rotate(4.22deg); }
  17.0% { transform: translate(1266.2px, 120.0px) rotate(5.36deg); }
  18.0% { transform: translate(1344.3px, 128.2px) rotate(6.59deg); opacity: 1; }
  19.0% { transform: translate(1422.4px, 138.1px) rotate(7.95deg); }
  20.0% { transform: translate(1499.6px, 149.9px) rotate(9.46deg); opacity: 0; }
  100% { transform: translate(1499.6px, 149.9px) rotate(9.46deg); opacity: 0; }
}
@keyframes puls-p2 {
  0.0% { transform: translate(1499.7px, 163.9px) rotate(189.83deg); opacity: 0; }
  1.21% { transform: translate(1422.3px, 151.8px) rotate(188.09deg); }
  2.42% { transform: translate(1344.7px, 141.8px) rotate(186.58deg); opacity: 1; }
  3.63% { transform: translate(1266.4px, 133.7px) rotate(185.23deg); }
  4.84% { transform: translate(1188.5px, 127.4px) rotate(184.03deg); }
  6.05% { transform: translate(1110.1px, 122.7px) rotate(182.91deg); }
  7.26% { transform: translate(1031.8px, 119.4px) rotate(181.88deg); }
  8.47% { transform: translate(953.3px, 117.6px) rotate(180.90deg); }
  9.68% { transform: translate(875.1px, 117.0px) rotate(179.97deg); }
  10.89% { transform: translate(796.3px, 117.7px) rotate(179.06deg); }
  12.11% { transform: translate(718.0px, 119.5px) rotate(178.18deg); }
  13.32% { transform: translate(639.6px, 122.6px) rotate(177.30deg); }
  14.53% { transform: translate(561.3px, 126.9px) rotate(176.43deg); }
  15.74% { transform: translate(483.0px, 132.4px) rotate(175.55deg); }
  16.95% { transform: translate(404.8px, 139.1px) rotate(174.65deg); }
  18.16% { transform: translate(327.1px, 147.0px) rotate(173.72deg); }
  19.37% { transform: translate(249.0px, 156.3px) rotate(172.73deg); }
  20.58% { transform: translate(171.4px, 166.9px) rotate(171.70deg); }
  21.79% { transform: translate(94.0px, 179.0px) rotate(170.58deg); opacity: 1; }
  23.0% { transform: translate(16.8px, 192.6px) rotate(169.36deg); }
  24.21% { transform: translate(-60.0px, 208.0px) rotate(167.99deg); opacity: 0; }
  100% { transform: translate(-60.0px, 208.0px) rotate(167.99deg); opacity: 0; }
}
@keyframes puls-p0 {
  0.0% { transform: translate(-60.0px, 198.0px) rotate(-13.54deg); opacity: 0; }
  0.97% { transform: translate(16.4px, 180.8px) rotate(-11.83deg); }
  1.94% { transform: translate(93.4px, 165.8px) rotate(-10.33deg); opacity: 1; }
  2.9% { transform: translate(170.7px, 152.6px) rotate(-9.00deg); }
  3.87% { transform: translate(248.3px, 141.2px) rotate(-7.79deg); }
  4.84% { transform: translate(326.4px, 131.3px) rotate(-6.66deg); }
  5.81% { transform: translate(404.1px, 122.9px) rotate(-5.61deg); }
  6.77% { transform: translate(482.6px, 115.9px) rotate(-4.61deg); }
  7.74% { transform: translate(560.9px, 110.3px) rotate(-3.64deg); }
  8.71% { transform: translate(639.1px, 105.9px) rotate(-2.70deg); }
  9.68% { transform: translate(717.4px, 102.8px) rotate(-1.78deg); }
  10.65% { transform: translate(795.9px, 101.0px) rotate(-0.85deg); }
  11.61% { transform: translate(874.4px, 100.5px) rotate(0.09deg); }
  12.58% { transform: translate(953.0px, 101.3px) rotate(1.04deg); }
  13.55% { transform: translate(1031.3px, 103.4px) rotate(2.02deg); }
  14.52% { transform: translate(1109.6px, 106.8px) rotate(3.05deg); }
  15.48% { transform: translate(1188.1px, 111.8px) rotate(4.14deg); }
  16.45% { transform: translate(1266.2px, 118.2px) rotate(5.29deg); }
  17.42% { transform: translate(1344.3px, 126.3px) rotate(6.55deg); opacity: 1; }
  18.39% { transform: translate(1422.4px, 136.2px) rotate(7.93deg); }
  19.35% { transform: translate(1499.6px, 147.9px) rotate(9.46deg); opacity: 0; }
  100% { transform: translate(1499.6px, 147.9px) rotate(9.46deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .horizon .laag { animation: none !important; }
  .horizon .vonk { display: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Secties ---------- */
.section { padding: 5.5rem 0; position: relative; }
.section-alt { background: var(--bg-panel); }
/* haarlijn met verloop in plaats van een doffe rand */
.section-alt::before, .section-alt::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}
.section-alt::before { top: 0; }
.section-alt::after { bottom: 0; }

.section-head { max-width: 60ch; margin-bottom: 3rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--text-dim); margin-bottom: 0; font-size: 1.05rem; }
.section-head h2 { text-wrap: balance; }
.kicker {
  display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--lime); margin-bottom: .9rem;
}

/* ---------- Grids ---------- */
.grid { display: grid; gap: 1.25rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* ---------- Claim-strip ---------- */
.claims {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin-top: 2.4rem; max-width: 48rem; margin-inline: auto;
}
.claims span {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--display); font-size: .84rem; font-weight: 500;
  color: var(--text); background: rgba(255,255,255,.035);
  border: 1px solid var(--line); border-radius: 100px;
  padding: .42rem .95rem;
}
.claims svg { color: var(--blue); flex-shrink: 0; }
.claims span:nth-child(2) svg { color: var(--violet); }
.claims span:nth-child(3) svg { color: var(--lime); }
.claims span:nth-child(4) svg { color: var(--violet); }

/* ---------- Kaarten ---------- */
.card, .feature {
  position: relative;
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.7rem 1.6rem;
  transition: border-color .2s, box-shadow .2s;
}
.section-alt .card, .section-alt .feature { background: var(--bg-panel-2); }
.card:hover, .feature:hover {
  border-color: rgba(0,167,255,.4);
  box-shadow: 0 10px 34px -20px var(--blue-glow);
}

.card h3, .feature h3 { margin-bottom: .5rem; }
.card p, .feature p { color: var(--text-dim); margin-bottom: 0; font-size: .95rem; }
.feature p + p { margin-top: .75rem; }

.feature .ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 11px; margin-bottom: 1.2rem;
  background: linear-gradient(150deg, rgba(0,167,255,.18), rgba(74,91,212,.14));
  border: 1px solid rgba(0,167,255,.26);
  color: var(--blue);
}
/* Elke tweede en derde kaart in een rij van drie krijgt een eigen tint. Scheelt
   markup en geeft elke pagina vanzelf hetzelfde kleurritme. */
.grid-3 .feature:nth-child(3n+2) .ico {
  background: linear-gradient(150deg, rgba(159,232,112,.2), rgba(159,232,112,.06));
  border-color: rgba(159,232,112,.32); color: var(--lime);
}
.grid-3 .feature:nth-child(3n+3) .ico {
  background: linear-gradient(150deg, rgba(139,125,245,.22), rgba(139,125,245,.08));
  border-color: rgba(139,125,245,.32); color: var(--violet);
}

/* groot uitgelicht blok */
.feature-lg { padding: 2.4rem 2.2rem; }
.feature-lg h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: .7rem; }
.feature-lg p { font-size: 1rem; }
.feature-lg .ico { width: 52px; height: 52px; border-radius: 13px; }
.feature-accent {
  border-color: rgba(0,167,255,.32);
  background:
    radial-gradient(ellipse 90% 130% at 0 0, rgba(0,167,255,.13) 0, transparent 60%),
    radial-gradient(ellipse 70% 100% at 100% 100%, var(--indigo-soft) 0, transparent 62%),
    var(--bg-panel);
}
.section-alt .feature-accent {
  background:
    radial-gradient(ellipse 90% 130% at 0 0, rgba(0,167,255,.13) 0, transparent 60%),
    radial-gradient(ellipse 70% 100% at 100% 100%, var(--indigo-soft) 0, transparent 62%),
    var(--bg-panel-2);
}

/* ---------- Netwerkdiagram op infrastructure ---------- */
.netrow { align-items: start; margin-bottom: 3.5rem; }
.netfig {
  margin: 0; background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem 1.5rem 1.2rem;
}
.netfig svg { display: block; width: 100%; height: auto; }
.netfig figcaption {
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line-soft);
  font-size: .86rem; color: var(--text-dim);
}
.nf-box { fill: var(--bg-panel-2); stroke: var(--line); stroke-width: 1; }
.nf-net { fill: rgba(0,167,255,.09); stroke: rgba(0,167,255,.4); }
.nf-you { fill: rgba(159,232,112,.1); stroke: rgba(159,232,112,.45); }
.nf-t {
  font-family: var(--mono); font-size: 10.5px; fill: var(--text-dim);
  letter-spacing: .04em;
}
.nf-net + .nf-t, .nf-you + .nf-t { fill: var(--text); }
.nf-l { fill: none; stroke: var(--line); stroke-width: 1.1; }
.nf-hi { stroke: rgba(159,232,112,.45); stroke-width: 1.4; }
.netcards { margin-top: 0; }

/* ---------- Compacte rij zonder kaderwerk ---------- */
.compact {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 0; margin-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.compact > div {
  padding: 1.7rem 1.6rem 1.7rem 0;
  border-bottom: 1px solid var(--line);
  display: flex; gap: 1rem; align-items: flex-start;
}
.compact .ico-sm { color: var(--blue); flex-shrink: 0; margin-top: .15rem; }
.compact > div:nth-child(4n+2) .ico-sm { color: var(--lime); }
.compact > div:nth-child(4n+3) .ico-sm { color: var(--violet); }
.compact > div:nth-child(4n+4) .ico-sm { color: var(--violet); }
.compact h3 { font-size: 1rem; margin-bottom: .3rem; }
.compact p { color: var(--text-dim); font-size: .92rem; margin: 0; }

/* Twee tekstkolommen naast elkaar, met meer lucht ertussen dan .grid-2.
   Alleen reseller.html gebruikt dit; de regel was bij een eerdere herschrijving
   van deze stylesheet weggevallen, waardoor die pagina scheef stond. */
.split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 3.25rem; align-items: start;
}

/* Opsomming met vette aanhef, zonder bolletjes - leest als een definitielijst. */
.plain-list { list-style: none; display: grid; gap: 1rem; margin: 0; padding: 0; }
.plain-list li { color: var(--text-dim); font-size: .97rem; padding-left: 1.3rem; position: relative; }
.plain-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 2px; background: var(--lime); border-radius: 2px;
}
.plain-list strong { color: var(--text); }
.lede-sm { color: var(--text-dim); font-size: 1rem; max-width: 42ch; }

/* Tekst naast een diagram of rekenhulp. De basisregel was bij een eerdere herschrijving
   van deze stylesheet weggevallen, waardoor alles onder elkaar kwam te staan en de knop
   tegen het paneel aan plakte - dezelfde fout als eerder met .split. */
.diagram-split {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 3.25rem; align-items: center;
}
.diagram-split .btn-row { margin-top: 1.7rem; }

/* ---------- Lijstjes ---------- */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { position: relative; padding-left: 1.9rem; margin-bottom: .8rem; color: var(--text-dim); }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 2px; background: var(--lime);
  box-shadow: 0 0 0 4px rgba(159,232,112,.14);
}
.checklist-2 { columns: 2; column-gap: 2.75rem; }
.checklist-2 li { break-inside: avoid; }
@media (max-width: 640px) { .checklist-2 { columns: 1; } }

.narrow { max-width: 62ch; margin-inline: auto; text-align: center; }
.narrow .btn-row { justify-content: center; }

/* ---------- "Wij zijn er al sinds 2012" ---------- */
.real-box { max-width: 72ch; border-left: 2px solid var(--lime); padding-left: 2.2rem; }
.real-box h2 { text-wrap: balance; }
.real-box p { color: var(--text-dim); max-width: 64ch; }
.real-line {
  font-family: var(--display); font-weight: 600; color: var(--text);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); letter-spacing: -.02em;
  margin: 1.6rem 0 0 !important;
}
.real-line em { font-style: normal; color: var(--lime); }

/* Kop links, vragen rechts: anders staat de halve sectie leeg, want een
   vragenlijst mag voor de leesbaarheid niet breder worden dan een regel of 70 tekens. */
.faq-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 3.5rem; }
.faq-split .section-head { margin-bottom: 0; }
/* Afsluitende regel binnen de cijferbalk: anders zweeft hij los tussen twee
   secties in en staat hij ongemakkelijk. Nu leest hij als onderschrift bij de cijfers. */
.statement {
  text-align: center; font-family: var(--display); font-weight: 600;
  font-size: clamp(.95rem, 1.5vw, 1.08rem); letter-spacing: -.015em;
  color: var(--text); margin: 0; padding: 1.1rem 1.5rem 1.25rem;
  border-top: 1px solid var(--line-soft);
}
.statement em { font-style: normal; color: var(--lime); }

.faq-more { margin: 1.6rem 0 0; }
.faq-more a { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Stats ---------- */
.stats-band {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background:
    linear-gradient(100deg, rgba(0,167,255,.045) 0, rgba(74,91,212,.05) 55%, rgba(159,232,112,.05) 100%);
}
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stat { padding: 2.2rem 1.5rem; text-align: center; position: relative; background: transparent; }
.stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px;
  background: var(--line);
}
.stat .val {
  display: block; font-family: var(--display); font-size: clamp(2.1rem, 4vw, 2.9rem);
  font-weight: 700; color: var(--white); letter-spacing: -.045em; line-height: 1;
  font-variant-numeric: tabular-nums; margin-bottom: .5rem;
}
.stat .val em { font-style: normal; color: var(--lime); }
.stat:nth-child(3) .val em { color: var(--violet); }
.stat:nth-child(4) .val em { color: #4cc2ff; }
.stat .lbl { font-size: .84rem; color: var(--text-faint); }

.honest {
  color: var(--text-dim); font-size: .97rem; max-width: 76ch;
  margin: 2rem 0 0; padding-left: 1.4rem; border-left: 2px solid var(--line);
}

.pdflink { margin: -.2rem 0 1.9rem; }
.pdflink a {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--mono); font-size: .73rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim); background: var(--bg-panel);
  border: 1px solid var(--line); border-radius: 9px; padding: .55rem .95rem .55rem .7rem;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.pdflink .pdf-ico { flex-shrink: 0; display: block; }
.pdflink .pdfname { color: var(--text); }
.pdflink .pdfsize { color: var(--text-faint); letter-spacing: .05em; }
.pdflink .pdfsize::before { content: "\00b7"; margin-right: .55rem; }
.pdflink a:hover { color: var(--text); border-color: var(--line); background: var(--bg-panel-2); }

.notice {
  display: block; margin: 0 0 2.5rem; padding: 1rem 1.3rem;
  background: var(--lime-soft); border: 1px solid rgba(159,232,112,.28);
  border-radius: 10px; color: var(--text-dim); font-size: .95rem;
}
.notice strong { color: var(--lime); }

.gracht {
  margin: 0 0 1.8rem; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-panel);
}
.gracht img { display: block; width: 100%; height: auto; }
.gracht figcaption {
  font-size: .82rem; color: var(--text-faint); padding: .8rem 1.1rem;
  border-top: 1px solid var(--line);
}
.gracht figcaption a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }

.photoband { padding-top: 0; }
.band-line {
  max-width: 68ch; margin: 0 auto 1.6rem; text-align: center;
  color: var(--text-dim); font-size: 1.02rem;
}
.band-line strong { color: var(--text); }
.citypic {
  margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--bg-panel);
}
.citypic img { display: block; width: 100%; height: auto; }
.citypic figcaption {
  padding: .7rem 1.1rem; border-top: 1px solid var(--line);
  font-size: .76rem; color: var(--text-faint);
}
.citypic figcaption a { color: var(--text-faint); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Kennisbank ---------- */
.kb-group + .kb-group { margin-top: 3.2rem; }
.kb-head { margin-bottom: 1.3rem; }
.kb-head h2 { margin-bottom: .35rem; }
.kb-head p { color: var(--text-dim); margin: 0; font-size: .96rem; }
.kb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; }
.kb-card {
  display: block; background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.3rem 1.4rem;
  transition: border-color .2s ease, transform .2s ease;
}
.kb-card h3 { font-size: 1.02rem; margin-bottom: .35rem; color: var(--text); }
.kb-card p { color: var(--text-dim); font-size: .92rem; margin: 0; }
.kb-card:hover { border-color: rgba(159,232,112,.4); transform: translateY(-2px); }
.kb-card:hover h3 { color: var(--lime); }
.kb-foot { color: var(--text-dim); font-size: .93rem; }
.hero-slim .eyebrow a { color: inherit; }

/* ---------- Prose ---------- */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.6rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.9rem; color: var(--text); }
.prose p, .prose li { color: var(--text-dim); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); max-width: 80ch; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.2rem .5rem 1.2rem 0;
  font-family: var(--display); font-weight: 600; font-size: 1.02rem; color: var(--white);
  display: flex; justify-content: space-between; gap: 1rem; transition: color .15s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--lime); font-weight: 400; font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--blue); }
.faq .answer { padding: 0 2rem 1.3rem 0; color: var(--text-dim); }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
.contact-card {
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.8rem 1.7rem;
}
.contact-card h3 { margin-bottom: .35rem; }
.contact-card .big { font-size: 1.15rem; font-weight: 600; color: var(--white); display: block; margin-bottom: .35rem; }
.contact-card p { color: var(--text-dim); font-size: .94rem; }
.contact-card address { font-style: normal; color: var(--text-dim); }

/* ---------- CTA ---------- */
.cta {
  position: relative;
  background:
    radial-gradient(ellipse 45% 120% at 32% 0, rgba(0,129,198,.26) 0, transparent 64%),
    radial-gradient(ellipse 45% 120% at 70% 10%, rgba(74,91,212,.22) 0, transparent 64%),
    var(--bg-panel);
  text-align: center; padding: 5rem 0;
}
.cta::before, .cta::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}
.cta::before { top: 0; } .cta::after { bottom: 0; }
.cta h2 { max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.cta p { color: var(--text-dim); max-width: 56ch; margin-inline: auto; margin-bottom: 1.8rem; }
.cta .btn-row { justify-content: center; }

/* ---------- Footer ---------- */
/* Contact-eerst: het brede vak links is het contactblok, niet een merkkolom met
   logo en slogan - dat laatste is het patroon van een zusterbedrijf. De linkkolommen
   ernaast mogen er wel op lijken, en de regel onderaan blijft een losse regel. */
.site-footer { background: #05080d; border-top: 1px solid var(--line); padding: 2.8rem 0 1.7rem; }

.foot-top {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: 2.2rem 3rem; padding-bottom: 2.1rem; border-bottom: 1px solid var(--line-soft);
}
.foot-lead { max-width: 34ch; flex: 0 1 auto; }
.foot-lead h2 {
  font-size: clamp(1.3rem, 2.3vw, 1.7rem); margin-bottom: .6rem; text-wrap: balance;
}
.foot-lead p { color: var(--text-dim); margin: 0 0 1.2rem; max-width: 38ch; font-size: .92rem; }

.foot-mail { display: grid; gap: .1rem; }
.foot-mail a {
  font-family: var(--display); font-weight: 600; font-size: 1.02rem;
  color: var(--blue); letter-spacing: -.01em;
}
.foot-mail a:hover { color: #4cc2ff; }
.foot-mail span {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: .7rem;
}
.foot-mail span:last-child { margin-bottom: 0; }

/* Kolommen zo breed als hun inhoud en tegen de rechterkant aan: anders zwemmen vier
   korte linkjes in een kolom van 400 pixels en breekt "Terms and conditions" af. */
.foot-nav {
  display: flex; flex-wrap: wrap; gap: 2rem 2.6rem; flex: 1 1 auto; min-width: 0;
  justify-content: space-between;
  border-left: 1px solid var(--line-soft); padding-left: 3rem;
}
.foot-col h3 {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .15em; font-weight: 500;
  text-transform: uppercase; color: var(--lime); margin-bottom: .7rem;
  padding-bottom: .45rem; border-bottom: 1px solid var(--line);
}
.foot-col ul { list-style: none; display: grid; gap: .32rem; }
.foot-col a {
  display: inline-block; color: var(--text-dim); font-size: .88rem; white-space: nowrap;
  transition: color .15s ease, transform .15s ease;
}
.foot-col a:hover { color: var(--text); transform: translateX(3px); }

.foot-id {
  display: flex; align-items: center; gap: 1.5rem; padding-top: 1.3rem; flex-wrap: wrap;
}
.foot-id img { height: 24px; width: auto; flex-shrink: 0; }
.foot-id p { color: var(--text-faint); font-size: .83rem; margin: 0; max-width: 78ch; }
.no-cookies { display: inline-block; margin-top: .35rem; color: var(--text-faint); }
.no-cookies a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }
.no-cookies a:hover { color: var(--blue); }

@media (max-width: 900px) {
  .faq-split { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 820px) {
  .foot-top { gap: 2.4rem 2rem; }
  .foot-lead { max-width: none; }
  .foot-nav { gap: 1.8rem 2.4rem; border-left: 0; padding-left: 0; }
}

/* ---------- Scroll-reveal (alleen als JS draait) ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
}
.js .reveal.d1.in { transition-delay: .06s; }
.js .reveal.d2.in { transition-delay: .12s; }
.js .reveal.d3.in { transition-delay: .18s; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .diagram-split { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 820px) {
  .nav-label { display: block; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #05080d; border-bottom: 1px solid var(--line); padding: .6rem;
  }
  .nav-toggle:checked ~ .nav { display: flex; }
  .nav a { padding: .85rem 1rem; }
  .nav a::after { display: none; }
  .nav a.active { color: var(--blue); }
  .btn-portal { margin: .5rem 0 0; text-align: center; }
  .site-header .container { position: relative; }
  .topbar .container { justify-content: center; }
  .topbar .hide-sm { display: none; }
  .compact > div { padding-right: 0; }
}
@media (max-width: 700px) {
  .stat + .stat::before { display: none; }
  .stat { border-top: 1px solid var(--line-soft); }
  .stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .claims span { font-size: .79rem; padding: .38rem .8rem; }
  .hero .container { padding-top: 3.5rem; padding-bottom: 4rem; }
  .hero-home .container { padding-top: 4rem; padding-bottom: 6rem; }
  .section { padding: 3.75rem 0; }
  .feature-lg { padding: 1.8rem 1.6rem; }
}

/* binnenpagina's hebben geen horizon, dus daar wel een afsluitende haarlijn */
.hero:not(.hero-home) { border-bottom: 1px solid var(--line-soft); }

/* ---------- Serverkaart ---------- */
.included {
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem 1.8rem; margin-bottom: 2.5rem;
}
.included li { margin-bottom: .6rem; }
.included li:last-child { margin-bottom: 0; }

.server-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem;
}
.server {
  display: flex; flex-direction: column;
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem 1.5rem;
  transition: border-color .2s, box-shadow .2s;
}
.server:hover {
  border-color: rgba(0,167,255,.4);
  box-shadow: 0 10px 34px -20px var(--blue-glow);
}
.server-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: 1.1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--line);
}
.server-head h3 {
  margin: 0; font-family: var(--mono); font-size: 1rem; font-weight: 500;
  letter-spacing: .04em; color: var(--blue);
}
.server-price { margin: 0; text-align: right; white-space: nowrap; }
.server-price .amt {
  font-family: var(--display); font-weight: 700; font-size: 1.4rem;
  color: var(--white); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.server-price .per { display: block; font-size: .76rem; color: var(--text-faint); }

.server-specs { list-style: none; margin: 0 0 1.5rem; padding: 0; flex: 1; }
.server-specs li {
  display: flex; gap: .65rem; align-items: flex-start;
  font-size: .89rem; color: var(--text-dim); margin-bottom: .55rem;
}
.server-specs li:last-child { margin-bottom: 0; }
.server-specs svg { color: var(--lime); flex-shrink: 0; margin-top: .28em; opacity: .85; }
.server .btn { align-self: flex-start; padding: .62rem 1.3rem; font-size: .88rem; }

@media (max-width: 560px) { .included { padding: 1.3rem 1.4rem; } }

/* ---------- Contactindeling: formulier naast de gegevens ---------- */
.contact-layout {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 3rem; align-items: start;
}
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .steps-row { grid-template-columns: 1fr; gap: 1.1rem; } }

.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .45rem; }
.field label {
  font-family: var(--display); font-size: .88rem; font-weight: 500; color: var(--text);
}
.field label span { color: var(--text-faint); font-weight: 400; }
.field input, .field textarea {
  font: inherit; font-size: .95rem; color: var(--text);
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: 8px; padding: .7rem .85rem; width: 100%;
  transition: border-color .15s, background .15s;
}
.field textarea { resize: vertical; min-height: 9rem; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:hover, .field textarea:hover { border-color: #2a3a4d; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); background: var(--bg-panel-2);
  box-shadow: 0 0 0 3px rgba(0,167,255,.12);
}
.form button { justify-self: start; }
.form-note { font-size: .86rem; color: var(--text-faint); margin: 0; }
.form-error {
  background: rgba(224,87,74,.1); border: 1px solid rgba(224,87,74,.45);
  color: #f0b3ac; border-radius: 8px; padding: .8rem 1rem; margin: 0; font-size: .92rem;
}
/* Honeypot: onzichtbaar voor mensen, zichtbaar voor bots. Niet display:none -
   sommige bots slaan verborgen velden over. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-side { display: grid; gap: 1.1rem; }
.contact-side .contact-card { padding: 1.4rem 1.5rem; }
.contact-side .contact-card p:last-child { margin-bottom: 0; }

.map {
  display: block; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin: 0;
}
.map img { display: block; width: 100%; height: auto; }
.map figcaption {
  font-size: .84rem; color: var(--text-dim);
  padding: .85rem 1.1rem; border-top: 1px solid var(--line); background: var(--bg-panel);
}

.deflist {
  display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.3rem;
  margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .88rem;
}
.deflist dt {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); align-self: center;
}
.deflist dd { margin: 0; color: var(--text); }
.dd-note {
  display: block; font-family: var(--mono); font-size: .67rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint); margin-top: .15rem;
}
.contact-card address { color: var(--text-dim); line-height: 1.65; }
.contact-card address strong { color: var(--text); }

.contact-card .reg {
  margin: .9rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .8rem; line-height: 1.7; color: var(--text-faint);
}

/* Onderste band op contact: wat er na het versturen gebeurt, naast de kaart. */
.contact-after {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 3rem; align-items: start;
}
.contact-after > div > p { color: var(--text-dim); font-size: .95rem; }
.contact-after .map { margin-bottom: 1.1rem; }
.contact-card.addr { padding: 1.4rem 1.5rem; }
.steps { list-style: none; counter-reset: step; display: grid; gap: 1.1rem; margin: 0 0 1.4rem; }
.steps li {
  counter-increment: step; position: relative; padding-left: 2.6rem;
  color: var(--text-dim); font-size: .96rem;
}
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -.1em;
  width: 1.75rem; height: 1.75rem; border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .8rem; color: var(--lime);
  background: var(--lime-soft); border: 1px solid rgba(159,232,112,.3);
}
.steps strong { color: var(--text); }
@media (max-width: 900px) { .contact-after { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ---------- Offerteformulier: gegroepeerde velden ---------- */
.spec-intro { color: var(--text-dim); font-size: .95rem; margin: -.4rem 0 1.4rem; }
.fset { border: 0; padding: 0; margin: 0 0 .5rem; display: grid; gap: 1.1rem; }
.fset legend {
  padding: 0; margin-bottom: .2rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--lime);
}
.fset + .fset { padding-top: 1.4rem; border-top: 1px solid var(--line); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.field select {
  font: inherit; font-size: .95rem; color: var(--text);
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: 8px; padding: .7rem .85rem; width: 100%;
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238da2b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center;
  padding-right: 2.4rem;
}
.field select:hover { border-color: #2a3a4d; }
.field select:focus {
  outline: none; border-color: var(--blue); background-color: var(--bg-panel-2);
  box-shadow: 0 0 0 3px rgba(0,167,255,.12);
}
.field select option { background: var(--bg-panel); color: var(--text); }

/* ---------- Verbodslijst als band op de homepage ---------- */
/* ---------- Rekenhulp: hoe lang duurt het verplaatsen van data ---------- */
.calc {
  background: linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem 1.7rem;
}
.calc-inputs { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; margin-bottom: 1.6rem; }
.calc-inputs .field { gap: .4rem; }
.calc-inputs .field:first-child { flex: 1 1 9rem; }
.calc-inputs .field:last-child { flex: 0 1 8rem; }
.calc-rows { display: grid; gap: .55rem; }
.calc-row {
  display: grid; grid-template-columns: 4.6rem 1fr 7.5rem; gap: .9rem; align-items: center;
}
.calc-row .speed {
  font-family: var(--mono); font-size: .84rem; color: var(--text-dim); text-align: right;
}
.calc-row .track {
  position: relative; height: 1.65rem; border-radius: 5px;
  background: rgba(255,255,255,.035); border: 1px solid var(--line-soft); overflow: hidden;
}
.calc-row .bar {
  position: absolute; inset: 0 auto 0 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--blue), var(--indigo));
  transition: width .45s cubic-bezier(.22,.61,.36,1);
}
.calc-row .time {
  font-family: var(--display); font-weight: 600; font-size: .95rem; color: var(--white);
  font-variant-numeric: tabular-nums;
}
.calc-row.best .speed { color: var(--blue); }
.calc-row.best .time { color: var(--blue); }
.calc-note { color: var(--text-faint); font-size: .84rem; margin: 1.4rem 0 0; }
@media (max-width: 560px) {
  .calc-row { grid-template-columns: 3.6rem 1fr; }
  .calc-row .time { grid-column: 2; font-size: .9rem; margin-top: -.3rem; }
}

/* Zonder prijs blijft alleen het label staan; dat moet niet wegvallen. */
.server-price .per:only-child {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .04em;
  color: var(--text-faint); text-transform: uppercase;
}

/* Kop die alleen voor schermlezers bestaat: geeft een sectie een plek in de
   koppenstructuur zonder iets aan het ontwerp te veranderen. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}