/* =====================================================
   ZAKELIJKE PRODUCTPAGINA'S (VPS, webhosting) — makeover 2026
   Gebruik: zet de pagina-inhoud in <div class="kz">…</div>
   Rustig en overzichtelijk: duidelijke kopjes, specificaties
   als tabellen, één accentkleur voor de belangrijkste knop.
   Klassen kv-* blijven gelijk, want het script gebruikt ze.
   ===================================================== */
.kz {
  --z-line: rgba(138,160,255,.12);
  --z-line-2: rgba(138,160,255,.22);
  --z-panel: #0D1122;
  --z-panel-2: #111733;
  --z-ok: #4ADE80;
  font-family: var(--kx-font, 'Archivo', system-ui, sans-serif);
  color: var(--text);
}
.kz *, .kz *::before, .kz *::after { box-sizing: border-box; }
.kz .container { max-width: 1200px !important; width: 100%; margin: 0 auto; padding: 0 1.5rem !important; }

/* ── Algemeen ── */
.kv-section { padding: clamp(4rem, 8vw, 6rem) 0; border-top: 1px solid var(--z-line); background: var(--bg); }
.kv-section.kv-alt { background: var(--z-panel); }
.kv-eyebrow {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 .8rem !important;
  font-size: .92rem !important; font-weight: 650 !important; color: var(--accent-soft) !important;
}
.kv-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--accent); flex-shrink: 0; }
.kv-h2 {
  margin: 0 0 .9rem !important;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem) !important;
  max-width: 22ch;
}
.kv-lead { margin: 0 !important; font-size: 1.05rem; line-height: 1.65; color: var(--muted) !important; max-width: 60ch; }

/* Kop van een sectie: titel links, toelichting rechts */
.kv-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem 3rem; align-items: end;
  margin-bottom: 2.5rem;
}
.kv-head .kv-eyebrow, .kv-head .kv-h2 { grid-column: 1; }
.kv-head .kv-lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.kv-head .kv-h2 { margin-bottom: 0 !important; }

/* ── Hero ── */
.kv-hero {
  position: relative; overflow: hidden;
  padding: calc(70px + clamp(3rem, 7vw, 5rem)) 0 clamp(3.5rem, 7vw, 5rem);
  background: var(--bg);
  border-bottom: 1px solid var(--z-line);
}
.kv-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--z-line) 1px, transparent 1px) 0 0 / 100% 64px,
    linear-gradient(90deg, var(--z-line) 1px, transparent 1px) 0 0 / 64px 100%;
  opacity: .45;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
  mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.kv-hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.kv-hero-title {
  margin: 0 0 1.25rem !important;
  font-size: clamp(2.4rem, 5vw, 4rem) !important;
  max-width: 20ch; text-wrap: balance;
}
.kv-hero-sub { margin: 0 0 1.75rem !important; font-size: 1.1rem; line-height: 1.65; color: var(--muted) !important; max-width: 58ch; }
.kv-trust { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; margin-bottom: 2rem; }
.kv-trust-item { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 550; color: var(--text); }
.kv-trust-item svg { stroke: var(--z-ok); }
.kv-cta-wrap .btn { min-height: 50px; }

/* Specificatieblad rechts */
.kv-sheet {
  background: var(--z-panel);
  border: 1px solid var(--z-line-2);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
.kv-sheet-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--z-line);
}
.kv-sheet-row .lbl { font-size: .92rem; color: var(--muted); }
.kv-sheet-row .val { font-size: 1.08rem; font-weight: 700; font-stretch: 110%; color: var(--text); text-align: right; }
.kv-sheet-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem; background: var(--z-panel-2);
}
.kv-sheet-foot .lbl { font-size: .92rem; color: var(--muted); }
.kv-sheet-foot .val { font-size: 1.9rem; font-weight: 800; font-stretch: 115%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kv-sheet-foot .val small { font-size: .9rem; font-weight: 500; font-stretch: 100%; letter-spacing: 0; color: var(--muted); margin-left: .2rem; }

/* ── Paneel (VirtFusion) ── */
.kv-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.kv-feature-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .8rem 0; border-bottom: 1px solid var(--z-line);
  font-size: 1rem; color: var(--text);
}
.kv-feature-row:first-child { border-top: 1px solid var(--z-line); }
.kv-feature-icon {
  width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(43,92,255,.15);
}
.kv-panel-visual { border: 1px solid var(--z-line-2); background: var(--z-panel); }
.kv-panel-visual > div:first-child { border-bottom: 1px solid var(--z-line); }
.kv-panel-controls { display: flex; align-items: center; justify-content: space-between; padding: .6rem .75rem; }
.kv-panel-btn {
  width: 38px; height: 38px; border: 1px solid var(--z-line-2); background: transparent; color: var(--text);
  font-size: 1rem; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.kv-panel-btn:hover { border-color: var(--accent-soft); background: rgba(43,92,255,.1); }
#cp-dots span { border-radius: 0 !important; width: 18px !important; height: 3px !important; }

/* ── Waarom Kronix: raster met lijnen, als een tabel ── */
.kv-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--z-line); border-left: 1px solid var(--z-line);
}
.kv-card {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.75rem 1.6rem 2rem;
  border-right: 1px solid var(--z-line); border-bottom: 1px solid var(--z-line);
  background: transparent; transition: background .2s ease;
}
.kv-card:hover { background: rgba(43,92,255,.05); }
.kv-card-icon {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--z-line-2); background: var(--z-panel);
}
.kv-card-title { font-size: 1.08rem; font-weight: 700; font-stretch: 108%; color: var(--text); margin-bottom: .4rem; }
.kv-card-text { font-size: .96rem; line-height: 1.6; color: var(--muted); }

/* ── Pakketkiezer ── */
.kv-picker {
  max-width: 880px; margin: 0 auto;
  background: var(--z-panel); border: 1px solid var(--z-line-2);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.kv-picker-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 1.75rem; }
.kv-picker-progress span { height: 3px; background: var(--z-line-2); transition: background .25s ease; }
.kv-picker-progress span.done { background: var(--accent); }
.kv-step { display: none; }
.kv-step.active { display: block; }
.kv-step-label { font-size: .88rem; color: var(--muted); margin-bottom: .35rem; font-variant-numeric: tabular-nums; }
.kv-step-title { font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 750; font-stretch: 110%; margin-bottom: 1.25rem; }
.kv-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem; }
.kv-option {
  text-align: left; padding: 1rem 1.1rem; cursor: pointer;
  background: var(--bg); border: 1px solid var(--z-line-2); color: var(--text);
  font: inherit; transition: border-color .15s ease, background .15s ease;
}
.kv-option:hover { border-color: var(--accent-soft); }
.kv-option.selected { border-color: var(--accent); background: rgba(43,92,255,.12); box-shadow: inset 3px 0 0 var(--accent); }
.kv-option-title { font-weight: 650; font-size: 1rem; margin-bottom: .2rem; }
.kv-option-desc { font-size: .88rem; color: var(--muted); line-height: 1.45; }
.kv-picker-nav { display: flex; justify-content: flex-start; margin-top: 1.25rem; }
.kv-link-btn { background: none; border: 0; padding: .4rem 0; color: var(--accent-soft); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; }
.kv-link-btn:hover { color: #fff; }
.kv-result-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.kv-result-badge { padding: .3rem .6rem; background: var(--signal); color: #1A1204; font-size: .82rem; font-weight: 700; }
.kv-result-name { font-size: 1.6rem; font-weight: 800; font-stretch: 112%; flex-basis: 100%; }
.kv-result-price { color: var(--muted); }
.kv-result-price b { color: var(--text); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.kv-result-specs { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--z-line); margin-bottom: 1rem; }
.kv-result-spec { padding: .85rem 1rem; border-right: 1px solid var(--z-line); }
.kv-result-spec:last-child { border-right: 0; }
.kv-result-spec .lbl { font-size: .82rem; color: var(--muted); }
.kv-result-spec .val { font-weight: 650; }
.kv-result-why { color: var(--muted); line-height: 1.6; margin-bottom: 1.25rem; }
.kv-alt { margin-top: 1rem; font-size: .92rem; color: var(--muted); }

/* ── Premium / Budget schakelaar ── */
.kv-toggle-bar { display: flex; justify-content: center; margin: 3.5rem 0 2.25rem; }
.kv-toggle { display: inline-flex; border: 1px solid var(--z-line-2); background: var(--z-panel); padding: 4px; }
.kv-toggle-btn {
  min-width: 150px; padding: .75rem 1.25rem; border: 0; background: transparent; color: var(--muted);
  font: inherit; font-weight: 650; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.kv-toggle-btn:hover { color: var(--text); }
.kv-toggle-btn.active { background: var(--accent); color: #fff; }
.kv-tier { display: none; }
.kv-tier.active { display: block; }

/* ── Pakketten ── */
.kv-pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.kv-plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--z-panel); border: 1px solid var(--z-line-2);
  padding: 1.5rem 1.4rem 1.4rem;
}
.kv-plan.popular { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.kv-plan-badge {
  position: absolute; top: -1px; right: 1.1rem; transform: translateY(-50%);
  padding: .28rem .6rem; background: var(--signal); color: #1A1204;
  font-size: .78rem; font-weight: 700;
}
.kv-plan-name { font-size: 1.02rem; font-weight: 700; font-stretch: 108%; color: var(--text); margin-bottom: .9rem; }
.kv-plan-price { display: flex; align-items: baseline; gap: .25rem; margin-bottom: 1.25rem; }
.kv-plan-price .amount { font-size: 2.1rem; font-weight: 800; font-stretch: 115%; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.kv-plan-price .period { font-size: .9rem; color: var(--muted); }
.kv-plan-specs { border-top: 1px solid var(--z-line); margin-bottom: 1rem; }
.kv-plan-spec {
  display: flex; justify-content: space-between; gap: .75rem;
  padding: .6rem 0; border-bottom: 1px solid var(--z-line); font-size: .92rem;
}
.kv-plan-spec .lbl { color: var(--muted); }
.kv-plan-spec .val { font-weight: 600; text-align: right; }
.kv-plan-feats { display: grid; gap: .45rem; margin-bottom: 1.4rem; font-size: .9rem; }
.kv-plan-feats:empty { display: none; }
.kv-feat { display: flex; align-items: center; gap: .5rem; color: var(--text); }
.kv-feat.off { color: var(--muted); opacity: .75; }
.kv-plan .btn { margin-top: auto; width: 100%; }

.kv-included {
  margin-top: 1.5rem; padding: 1.1rem 1.4rem;
  border: 1px solid var(--z-line); background: transparent;
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem;
}
.kv-included p { margin: 0 !important; font-weight: 650; color: var(--text) !important; font-size: .95rem; }
.kv-included-grid { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.kv-included-grid span { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--muted); }

/* ── Besturingssystemen ── */
.kv-os-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--z-line); border-left: 1px solid var(--z-line);
}
.kv-os {
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  padding: 1.75rem 1rem; border-right: 1px solid var(--z-line); border-bottom: 1px solid var(--z-line);
  font-size: .95rem; font-weight: 600; color: var(--text); text-align: center;
}
.kv-os img { width: 44px; height: 44px; object-fit: contain; }

/* ── Veelgestelde vragen: titel links, vragen rechts ── */
.kv-faq-layout { display: grid !important; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.kv-faq { border-top: 1px solid var(--z-line); }
.kv-faq details { border-bottom: 1px solid var(--z-line); }
.kv-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-size: 1.05rem; font-weight: 650; color: var(--text);
}
.kv-faq summary::-webkit-details-marker { display: none; }
.kv-faq summary svg { transition: transform .2s ease; }
.kv-faq details[open] summary svg { transform: rotate(180deg); }
.kv-faq details p { margin: 0 0 1.25rem !important; color: var(--muted) !important; line-height: 1.65; max-width: 62ch; }

/* ── Blauwe oproep onderaan: tekst gecentreerd ── */
.kx-endcta .kv-h2, .kx-endcta .kv-lead { margin-left: auto !important; margin-right: auto !important; }
.kx-endcta .kv-lead { margin-bottom: 1.75rem !important; }


/* ── Responsief ── */
@media (max-width: 1080px) {
  .kv-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .kv-hero-inner, .kv-split, .kv-faq-layout { grid-template-columns: minmax(0, 1fr); }
  .kv-head { grid-template-columns: minmax(0, 1fr); }
  .kv-head .kv-lead { grid-column: 1; grid-row: auto; }
  .kv-os-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kv-result-specs { grid-template-columns: repeat(2, 1fr); }
  .kv-result-spec:nth-child(2) { border-right: 0; }
  .kv-result-spec:nth-child(-n+2) { border-bottom: 1px solid var(--z-line); }
}
@media (max-width: 560px) {
  .kz .container { padding: 0 1rem !important; }
  .kv-hero { padding-top: 2rem !important; }
  .kv-grid { grid-template-columns: minmax(0, 1fr); }
  /* Pakketten: vegen in plaats van eindeloos scrollen */
  .kv-pricing-grid {
    display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -1rem; padding: 1rem 1rem .5rem; scrollbar-width: none;
  }
  .kv-pricing-grid::-webkit-scrollbar { display: none; }
  .kv-plan { flex: 0 0 84%; scroll-snap-align: start; }
  .kv-os-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv-toggle { width: 100%; }
  .kv-toggle-btn { min-width: 0; flex: 1; }
  .kv-cta-wrap .btn { flex: 1 1 100%; }
}
/* custom.css zet op mobiel alle <section>s op 3rem (!important); de hero heeft
   tussen 481 en 768px zelf ruimte nodig voor de vaste header. */
@media (min-width: 481px) and (max-width: 768px) {
  html body section.kv-hero { padding-top: calc(70px + 2.5rem) !important; }
}
@media (max-width: 768px) {
  html body section.kv-section { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  .kz * { transition: none !important; animation: none !important; }
}

/* ── Varianten voor andere pagina's ── */
.kv-grid.kv-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kv-pricing-grid.kv-pricing-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1040px; margin: 0 auto; }
.kv-plan-alt { margin: -.85rem 0 1.25rem; font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 1080px) {
  .kv-grid.kv-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv-pricing-grid.kv-pricing-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .kv-pricing-grid.kv-pricing-3 { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}
@media (max-width: 560px) {
  .kv-grid.kv-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .kv-pricing-grid.kv-pricing-3 { display: flex; max-width: none; }
}

/* =====================================================
   EXTRA ONDERDELEN (diensten, over ons, contact)
   ===================================================== */

/* ── Dienstenkaarten ── */
.kv-svc-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.kv-svc { grid-column: span 2; }
.kv-svc.kv-svc-wide { grid-column: span 3; }
.kv-svc {
  --svc-acc: var(--accent);
  position: relative; display: flex; flex-direction: column;
  background: var(--z-panel); border: 1px solid var(--z-line-2);
  color: var(--text) !important; text-decoration: none !important;
  transition: border-color .2s ease, transform .2s ease;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.kv-svc:hover { border-color: var(--svc-acc); transform: translateY(-2px); }
.kv-svc-media {
  position: relative; height: 190px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #0A0E1D; border-bottom: 1px solid var(--z-line);
}
.kv-svc-media::before, .kv-svc-media::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; background: var(--svc-acc); pointer-events: none;
}
.kv-svc-media::before { left: 20%; width: 36%; clip-path: polygon(62% 0, 100% 0, 38% 100%, 0 100%); opacity: .85; }
.kv-svc-media::after  { left: 52%; width: 28%; clip-path: polygon(58% 0, 100% 0, 42% 100%, 0 100%); opacity: .3; }
.kv-svc-media img { position: relative; z-index: 1; max-height: 160px; max-width: 70%; object-fit: contain; filter: drop-shadow(0 18px 28px rgba(0,0,0,.5)); }
.kv-svc-media .kv-svc-photo { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .3; z-index: 0; }
.kv-svc-media svg.kv-svc-ico { position: relative; z-index: 1; width: 64px; height: 64px; color: #fff; }
.kv-svc-body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.4rem 1.25rem; }
.kv-svc-top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .6rem; }
.kv-svc-name { margin: 0 !important; font-size: 1.25rem !important; font-weight: 750 !important; font-stretch: 110%; }
.kv-svc-price { font-size: .92rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kv-svc-price b { color: var(--text); font-size: 1.1rem; font-weight: 750; }
.kv-svc-desc { margin: 0 0 1rem !important; color: var(--muted) !important; font-size: .96rem; line-height: 1.6; }
.kv-svc-feats { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.kv-svc-feats span { padding: .3rem .6rem; border: 1px solid var(--z-line-2); font-size: .82rem; color: var(--text); }
.kv-svc-go {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  padding-top: 1rem; border-top: 1px solid var(--z-line);
  font-weight: 650; font-size: .95rem; color: var(--accent-soft);
}
.kv-svc-go svg { transition: transform .2s ease; }
.kv-svc:hover .kv-svc-go svg { transform: translateX(4px); }

/* ── Meer games ── */
.kv-game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }
.kv-game {
  display: flex; flex-direction: column; background: var(--z-panel); border: 1px solid var(--z-line);
  color: var(--text) !important; text-decoration: none !important; transition: border-color .2s ease;
}
.kv-game:hover { border-color: var(--accent-soft); }
.kv-game-thumb { aspect-ratio: 16 / 9; background-size: cover; background-position: center; border-bottom: 1px solid var(--z-line); filter: saturate(.9); transition: filter .2s ease; }
.kv-game:hover .kv-game-thumb { filter: saturate(1.15); }
.kv-game-body { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem .85rem; }
.kv-game-name { font-size: .92rem; font-weight: 650; line-height: 1.3; }
.kv-game-body svg { color: var(--accent-soft); flex-shrink: 0; transition: transform .2s ease; }
.kv-game:hover .kv-game-body svg { transform: translateX(3px); }

/* ── Verhaal: kop links (blijft staan), tekst rechts ── */
.kv-story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.kv-story-head { position: sticky; top: 100px; }
.kv-story-body p { margin: 0 0 1.15rem !important; font-size: 1.06rem; line-height: 1.75; color: var(--muted) !important; }
.kv-story-body strong, .kv-story-body em { color: var(--text); font-style: normal; }
.kv-quote {
  margin: 1.75rem 0 !important; padding: 1.25rem 1.5rem; border-left: 3px solid var(--accent);
  background: var(--z-panel); font-size: 1.15rem !important; color: var(--text) !important; line-height: 1.5 !important;
}

/* ── Tijdlijn ── */
.kv-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--z-line-2); margin-top: 2.5rem; }
.kv-tl { padding: 1.25rem 1.25rem 0 0; position: relative; }
.kv-tl::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--accent); }
.kv-tl b { display: block; font-size: 1.5rem; font-weight: 800; font-stretch: 115%; letter-spacing: -.02em; margin-bottom: .2rem; }
.kv-tl span { color: var(--muted); font-size: .95rem; }

/* ── Oprichter ── */
.kv-founder { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.kv-founder-photo { position: relative; aspect-ratio: 4 / 5; background: var(--z-panel); border: 1px solid var(--z-line-2); overflow: hidden; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.kv-founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kv-founder-name { margin: 0 !important; font-size: clamp(1.8rem, 3vw, 2.4rem) !important; }
.kv-founder-role { margin: .2rem 0 1.25rem !important; color: var(--accent-soft) !important; font-weight: 650; }
.kv-founder p.kv-p { margin: 0 0 1rem !important; color: var(--muted) !important; line-height: 1.7; font-size: 1.04rem; }

/* ── Foto's ── */
.kv-photo { position: relative; border: 1px solid var(--z-line-2); overflow: hidden; background: var(--z-panel); }
.kv-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kv-photo-main { aspect-ratio: 16 / 9; }
.kv-photo-tag {
  position: absolute; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .8rem; background: rgba(8,11,23,.85); border: 1px solid var(--z-line-2);
  font-size: .88rem; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.kv-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.kv-gallery .kv-photo { aspect-ratio: 4 / 3; }
.kv-dc { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.kv-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.kv-badge-tag { padding: .45rem .75rem; border: 1px solid var(--z-line-2); background: var(--z-panel); font-size: .88rem; font-weight: 600; }

/* ── Gegevens als tabel ── */
.kv-dl { margin: 0; border-top: 1px solid var(--z-line-2); }
.kv-dl-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--z-line); }
.kv-dl dt { color: var(--muted); font-weight: 500; }
.kv-dl dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ── Contactkaarten ── */
.kv-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .75rem; }
.kv-contact {
  display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.25rem;
  background: var(--z-panel); border: 1px solid var(--z-line-2);
  color: var(--text) !important; text-decoration: none !important; transition: border-color .2s ease;
}
.kv-contact:hover { border-color: var(--accent-soft); }
.kv-contact-ico { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(43,92,255,.15); color: var(--accent-soft); }
.kv-contact-lbl { display: block; font-size: .85rem; color: var(--muted); }
.kv-contact-val { display: block; font-weight: 650; }

/* ── Responsief (extra onderdelen) ── */
@media (max-width: 1000px) {
  .kv-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv-svc, .kv-svc.kv-svc-wide { grid-column: span 1; }
  .kv-svc:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 860px) {
  .kv-story, .kv-dc, .kv-founder { grid-template-columns: minmax(0, 1fr); }
  .kv-story-head { position: static; }
  .kv-founder-photo { max-width: 280px; }
  .kv-contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .kv-svc-grid { grid-template-columns: minmax(0, 1fr); }
  .kv-svc:last-child:nth-child(odd) { grid-column: span 1; }
  .kv-svc-media { height: 160px; }
  .kv-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv-timeline { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 1px solid var(--z-line-2); padding-left: 1.25rem; }
  .kv-tl { padding: 0 0 1.25rem; }
  .kv-tl::before { left: calc(-1.25rem - 5px); top: .55rem; }
  .kv-dl-row { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .kv-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
}
a.kv-sheet-row { color: var(--text) !important; text-decoration: none !important; transition: background .15s ease; }
a.kv-sheet-row:hover { background: rgba(43,92,255,.08); }
a.kv-sheet-row:last-child { border-bottom: 0; }

/* ── Compacte kop (contact en andere eenvoudige pagina's) ── */
.kv-hero.kv-hero-compact { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.kv-hero-compact .kv-hero-title { margin-bottom: .9rem !important; }
.kv-hero-compact .kv-hero-sub { margin-bottom: 0 !important; }

/* ── Contactformulier ── */
.kz-contact { display: grid !important; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.kz-contact-side { display: grid; gap: .75rem; }
.kz-form { background: var(--z-panel); border: 1px solid var(--z-line-2); padding: clamp(1.5rem, 3vw, 2.25rem); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.kz-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; }
.kz-field label { display: block; margin-bottom: .45rem; font-size: .92rem; font-weight: 600; color: var(--text); }
.kz-field:nth-child(3), .kz-field:nth-child(4) { grid-column: 1 / -1; }
.kz-field .form-control { width: 100%; min-height: 48px; padding: .7rem .9rem !important; font-size: 1rem !important; }
.kz-field textarea.form-control { min-height: 160px; resize: vertical; }
.kz-captcha { margin-top: 1.25rem; }
.kz-form-foot { display: flex; justify-content: flex-end; margin-top: 1.5rem; }
.kz-form-foot .btn { min-width: 200px; }
.kz-alert { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; border: 1px solid; }
.kz-alert p { margin: 0 !important; font-weight: 600; }
.kz-alert svg { width: 22px; height: 22px; flex-shrink: 0; margin: 0 !important; }
.kz-alert-ok { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.35); color: #86efac; }
.kz-alert-err { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.35); color: #fca5a5; }
@media (max-width: 860px) {
  .kz-contact { grid-template-columns: minmax(0, 1fr); }
  .kz-contact-side { order: 2; }
}
@media (max-width: 560px) {
  .kz-form-grid { grid-template-columns: minmax(0, 1fr); }
  .kz-form-foot .btn { width: 100%; }
}

/* =====================================================
   GAME-PAGINA'S (Minecraft, FiveM, Discord Bot)
   Zelfde pakketkaarten als VPS/webhosting, zonder de
   inhoud of de scripts van die pagina's te veranderen.
   ===================================================== */
html body .main-content .pricing-grid { gap: 1rem !important; }
html body .main-content .pricing-card {
  position: relative;
  background: #0D1122 !important;
  border: 1px solid rgba(138,160,255,.22) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  padding: 1.5rem 1.4rem 1.4rem !important;
  transform: none !important;
  display: flex; flex-direction: column;
}
html body .main-content .pricing-card::before { display: none !important; }
html body .main-content .pricing-card:hover { border-color: rgba(147,171,255,.45) !important; }
html body .main-content .pricing-card.popular {
  border-color: var(--accent) !important;
  box-shadow: inset 0 3px 0 var(--accent) !important;
  background: #0D1122 !important;
}
html body .main-content .pricing-popular-badge {
  background: var(--signal) !important; color: #1A1204 !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font-size: .78rem !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important;
  padding: .28rem .6rem !important;
}
html body .main-content .pricing-name { font-size: 1.05rem !important; font-weight: 700 !important; font-stretch: 108%; color: var(--text) !important; text-transform: none !important; letter-spacing: 0 !important; }
html body .main-content .pricing-price { margin: .8rem 0 1.1rem !important; display: flex; align-items: baseline; gap: .25rem; }
html body .main-content .pricing-price .amount { font-size: 2rem !important; font-weight: 800 !important; font-stretch: 115%; letter-spacing: -.035em !important; line-height: 1 !important; color: var(--text) !important; background: none !important; -webkit-text-fill-color: currentColor !important; font-variant-numeric: tabular-nums; }
html body .main-content .pricing-price .period { font-size: .88rem !important; color: var(--muted) !important; }
/* Specificaties als rijen in plaats van losse vakjes */
html body .main-content .pricing-specs {
  display: block !important; gap: 0 !important;
  border-top: 1px solid rgba(138,160,255,.12) !important;
  margin: 0 0 1.25rem !important; padding: 0 !important; background: none !important;
}
html body .main-content .pricing-spec {
  display: flex !important; justify-content: space-between; align-items: baseline; gap: .75rem;
  padding: .55rem 0 !important; margin: 0 !important;
  background: none !important; border: 0 !important; border-bottom: 1px solid rgba(138,160,255,.12) !important; border-radius: 0 !important;
  text-align: left !important;
}
html body .main-content .pricing-spec .spec-label { font-size: .86rem !important; color: var(--muted) !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important; white-space: nowrap; }
html body .main-content .pricing-spec .spec-value { font-size: .88rem !important; font-weight: 600 !important; color: var(--text) !important; text-align: right; margin: 0 !important; }
html body .main-content .pricing-features { font-size: .9rem !important; line-height: 1.9 !important; color: var(--text) !important; margin-bottom: 1.25rem !important; }
html body .main-content .pricing-card > .btn { margin-top: auto; width: 100%; }

/* Rustiger achtergronden en duidelijke scheidingen tussen secties */
html body .mc-pricing-section, html body .db-pricing-section { background: var(--bg) !important; }
html body .mc-panel-visual { border-radius: 0 !important; border: 1px solid rgba(138,160,255,.22) !important; box-shadow: none !important; }
html body .mc-stat-badge, html body .db-tag { border-radius: 0 !important; }
html body .mc-toggle, html body .mc-version-choice { border-radius: 0 !important; }
html body .mc-toggle-btn, html body .mc-version-btn { border-radius: 0 !important; }
html body .mc-toggle-btn.active, html body .mc-version-btn.active { background: var(--accent) !important; color: #fff !important; box-shadow: none !important; }
html body .mc-helper, html body .mc-result { border-radius: 0 !important; box-shadow: none !important; background: #0D1122 !important; border: 1px solid rgba(138,160,255,.22) !important; }
html body .fm-fw-card, html body .fm-feature { border-radius: 0 !important; box-shadow: none !important; }
html body .fm-slideshow, html body .db-terminal { border-radius: 0 !important; box-shadow: none !important; }

/* FAQ op game-pagina's in dezelfde stijl */
html body .main-content details:not(.kv-faq details) {
  border-radius: 0 !important; background: transparent !important;
  border: 0 !important; border-bottom: 1px solid rgba(138,160,255,.12) !important; box-shadow: none !important;
}

/* =====================================================
   GEDEELDE ONDERDELEN GAME-PAGINA'S (Discord Bot, FiveM)
   ===================================================== */
/* Slideshow paneel */
.kz-slides { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0A0E1D; }
.kz-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.kz-slide.is-on { opacity: 1; }
.kz-dots { display: flex; gap: .35rem; }
.kz-dot { width: 18px; height: 3px; padding: 0; border: 0; background: rgba(138,160,255,.3); cursor: pointer; }
.kz-dot.is-on { background: var(--accent); }

/* Afbeelding naast "Wat je kunt hosten" */
.kz-art { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 340px; background: #0D1122; border: 1px solid rgba(138,160,255,.22); overflow: hidden; }
.kz-art::before, .kz-art::after { content: ""; position: absolute; top: -10%; bottom: -10%; background: #5865F2; pointer-events: none; }
.kz-art::before { left: 18%; width: 38%; clip-path: polygon(62% 0, 100% 0, 38% 100%, 0 100%); opacity: .85; }
.kz-art::after  { left: 52%; width: 28%; clip-path: polygon(58% 0, 100% 0, 42% 100%, 0 100%); opacity: .3; }
.kz-art img { position: relative; z-index: 1; max-height: 320px; width: auto; max-width: 80%; filter: drop-shadow(0 20px 30px rgba(0,0,0,.5)); }

/* Runtimes */
.kz-band { padding: 2rem 0 !important; background: var(--z-panel, #0D1122); border-top: 1px solid rgba(138,160,255,.12); }
.kz-band .container { display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.25rem; }
.kz-band h3 { margin: 0 0 .2rem !important; font-size: 1.05rem !important; }
.kz-band p { margin: 0 !important; color: var(--muted) !important; font-size: .92rem; }


/* Feature-lijst met titel en toelichting */
.kz-feats { display: grid; border-top: 1px solid var(--z-line); }
.kz-feat { display: flex; gap: .9rem; padding: 1rem 0; border-bottom: 1px solid var(--z-line); }
.kz-feat-ico { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(43,92,255,.14); color: var(--accent-soft); }
.kz-feat-ico svg { width: 18px; height: 18px; }
.kz-feat b { display: block; font-weight: 700; color: var(--text); margin-bottom: .15rem; }
.kz-feat span { display: block; color: var(--muted); font-size: .95rem; line-height: 1.55; }

/* Hero met sfeerfoto rechts (FiveM) */
.kz-hero-photo .kz-hero-img {
  position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center right;
  opacity: .32;
  -webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 75%);
  mask-image: linear-gradient(90deg, transparent 15%, #000 75%);
}
.kz-hero-photo .kv-sheet { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(13,17,34,.82); }
@media (max-width: 860px) {
  .kz-hero-photo .kz-hero-img { opacity: .18; -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); mask-image: linear-gradient(180deg, #000, transparent 80%); }
}
@media (max-width: 560px) { .kz-art { min-height: 260px; } }

/* ── Minecraft: groene K-balken en eigen pakketraster ── */
.kz-art-mc::before, .kz-art-mc::after { background: #22C55E; }
.kz-mc .mc-hero, .kz-mc .kv-hero { min-height: 0 !important; display: block; }
.kz-mc .mc-hero::before { display: none; }
.kz-mc .mc-hero-inner { display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important; gap: clamp(2rem, 5vw, 4rem) !important; max-width: 1200px !important; }
.kz-mc .mc-hero-right { display: block !important; position: relative; height: auto !important; }
.kz-mc .mc-hero-right::before { display: none !important; }
.kz-mc .kz-art-mc { min-height: 420px; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.kz-mc .mc-hero-img { position: relative !important; inset: auto !important; transform: none !important; animation: none !important; max-height: 380px !important; width: auto !important; max-width: 85% !important; }
.kz-mc .mc-stat-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.kz-mc .mc-stat-badge { padding: .55rem .8rem; background: var(--z-panel); border: 1px solid var(--z-line-2); }
.kz-mc .mc-stat-badge .lbl { font-size: .74rem; color: var(--muted); }
.kz-mc .mc-stat-badge .val { font-size: .95rem; font-weight: 700; color: var(--text); }
.kz-mc .pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.kz-mc .boat-animation img { position: relative; z-index: 1; max-width: 80%; max-height: 320px; width: auto; display: block; margin: 0 auto; }
/* Specificatieband */
.kz-specs { padding: 0 !important; background: var(--z-panel) !important; border-top: 1px solid var(--z-line); border-bottom: 1px solid var(--z-line); }
.kz-specs .container > div { gap: 0 !important; }
.kz-specs .container > div > div { padding: 1.75rem 1rem !important; border-right: 1px solid var(--z-line) !important; }
.kz-specs .container > div > div:last-child { border-right: 0 !important; }
.kz-specs .container > div > div > div:first-child { font-size: clamp(1.6rem, 3vw, 2.2rem) !important; font-weight: 800 !important; font-stretch: 115%; letter-spacing: -.03em !important; }
.kz-specs .container > div > div > div:last-child { font-size: .88rem !important; }
@media (max-width: 1080px) { .kz-mc .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 860px) {
  .kz-mc .mc-hero-inner { grid-template-columns: minmax(0, 1fr) !important; }
  .kz-mc .kz-art-mc { min-height: 280px; }
  .kz-mc .mc-hero-img { max-height: 250px !important; }
  .kz-specs .container > div { grid-template-columns: repeat(2, 1fr) !important; }
  .kz-specs .container > div > div:nth-child(2) { border-right: 0 !important; }
  .kz-specs .container > div > div:nth-child(-n+2) { border-bottom: 1px solid var(--z-line) !important; }
}
@media (max-width: 560px) {
  .kz-mc .pricing-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
.kz-mc .mc-trust-item { font-size: .95rem !important; color: var(--text) !important; }
.kz-mc .mc-stat-badge .lbl { text-transform: none !important; letter-spacing: 0 !important; }