/* ═══════════════════════════════════════════════════════════════
   KRONIX HOSTING — PAGINA'S (makeover 2026)
   Trekt alle subpagina's gelijk met de nieuwe homepage.
   Alleen vormgeving: teksten en prijzen staan in de templates zelf.

   Opbouw:
   1. Koppen en kleine labels
   2. Hero's (bovenkant van elke pagina)
   3. Golven, gloed en deeltjes eruit
   4. Kaarten, pakketten en FAQ
   5. Blauwe oproep onderaan (.kx-endcta)
   6. Klantgebied
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Koppen en kleine labels ── */
html body .main-content h1,
html body .main-content h2,
html body .main-content h3 {
  text-transform: none !important;
  font-family: var(--kx-font) !important;
}
html body .main-content h1 {
  font-weight: 800 !important;
  font-stretch: 112%;
  letter-spacing: -0.035em !important;
  line-height: 1.0 !important;
}
html body .main-content h2 {
  font-weight: 800 !important;
  font-stretch: 112%;
  letter-spacing: -0.025em !important;
  line-height: 1.08 !important;
}
html body .main-content h3 { letter-spacing: -0.01em !important; }

/* Kleine labels boven koppen: geen hoofdletters meer, wel het merkblauw */
html body [class*="-eyebrow"],
html body .ds-section-head-accent,
html body .ds-hero-pill span, html body .ds-cta-pill span,
html body .wh-pill span, html body .wh-cta-pill span,
html body .fm-hero-badge span, html body .fm-cta-badge, html body .fm-cta-badge span,
html body .legal-pill span,
html body .mc-pill, html body .mc-pill span,
html body .page-header-label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: .95rem !important;
  font-weight: 650 !important;
  color: var(--accent-soft) !important;
}

/* Pilvormige labels worden een kaal label met een amber blokje */
html body .ds-hero-pill, html body .ds-cta-pill,
html body .wh-pill, html body .wh-cta-pill,
html body .fm-hero-badge, html body .fm-cta-badge,
html body .legal-pill, html body .mc-pill {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
html body .ds-hero-pill-dot, html body .ds-cta-pill-dot,
html body .wh-pill-dot, html body .wh-cta-pill-dot,
html body .fm-hero-badge-dot, html body .legal-pill-dot,
html body .mc-pill-dot {
  width: 8px !important; height: 8px !important;
  border-radius: 0 !important;
  background: var(--signal) !important;
  box-shadow: none !important;
  animation: none !important;
}

/* ── 2. Hero's ── */
html body .ds-hero, html body .wh-hero, html body .fm-hero,
html body .db-hero,
html body .legal-hero, html body .kx-hero, html body .hero-vps {
  background: var(--bg) !important;
  min-height: 0 !important;
  isolation: isolate;
}
/* Fijne schuine lijnen, zoals op de homepage */
html body .ds-hero::before, html body .wh-hero::before, html body .fm-hero::before,
html body .legal-hero::before, html body .hero-vps::before {
  background: repeating-linear-gradient(135deg, rgba(138,160,255,.06) 0 1px, transparent 1px 22px) !important;
  -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 60%);
  mask-image: linear-gradient(100deg, #000 0%, transparent 60%);
  border-radius: 0 !important;
  filter: none !important;
  opacity: 1 !important;
  inset: 0 !important;
  width: auto !important; height: auto !important;
}
html body .db-hero::after {
  background: repeating-linear-gradient(135deg, rgba(138,160,255,.06) 0 1px, transparent 1px 22px) !important;
  -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 60%);
  mask-image: linear-gradient(100deg, #000 0%, transparent 60%);
}
/* Achtergrondfoto's in de hero: zacht, en vervagend naar rechts */
html body .ds-hero-bg, html body .wh-hero-bg, html body .fm-hero-bg, html body .legal-hero-bg {
  opacity: .14 !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}

/* Gecentreerde hero's: links uitlijnen, zelfde ritme als de homepage */
html body .ds-hero, html body .wh-hero, html body .legal-hero { justify-content: flex-start !important; }
html body .ds-hero-content,
html body .wh-hero-inner,
html body .legal-hero-inner {
  text-align: left !important;
  max-width: 1280px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: calc(70px + clamp(3rem, 7vw, 5.5rem)) 1.5rem clamp(3rem, 6vw, 4.5rem) !important;
}
html body .ds-hero-content h1,
html body .wh-title,
html body .legal-hero-inner h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.4rem) !important;
  max-width: 15ch;
  margin-left: 0 !important;
  text-wrap: balance;
}
html body .ds-hero-content > p,
html body .wh-sub,
html body .legal-hero-inner p {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 56ch !important;
  color: var(--muted) !important;
  font-size: 1.1rem !important;
}
html body .ds-hero-pill, html body .wh-pill, html body .legal-pill { margin-left: 0 !important; margin-bottom: 1.25rem !important; }
html body .ds-hero-trust, html body .wh-hero-inner [class*="trust"] { justify-content: flex-start !important; }
html body .ds-hero-trust-item { color: var(--muted) !important; font-size: .95rem !important; }
html body .ds-hero-trust-sep, html body .fm-hero-stat-sep { display: none !important; }
html body .wh-cta-wrap { justify-content: flex-start !important; }

/* Hero's die al links staan: zelfde kopmaat */
html body .db-hero-title, html body .fm-hero-title {
  font-size: clamp(2.3rem, 4.6vw, 3.8rem) !important;
  text-wrap: balance;
}
html body .db-hero-sub, html body .fm-hero-sub {
  color: var(--muted) !important;
  font-size: 1.08rem !important;
  max-width: 54ch;
}
html body .db-hero {
  padding-top: calc(70px + clamp(2rem, 5vw, 3.5rem)) !important;
}
html body .fm-hero-left { padding-top: calc(70px + clamp(3rem, 7vw, 5rem)) !important; }
html body .fm-hero-title .accent { color: inherit !important; -webkit-text-fill-color: currentColor !important; background: none !important; }

/* Over ons: hero links */
html body .kx-hero { text-align: left !important; padding: calc(70px + clamp(3rem, 7vw, 5rem)) 1.5rem clamp(3rem, 6vw, 4.5rem) !important; }
html body .kx-hero > *:not(.kx-hero-photo):not(.kx-hero-veil):not(.kx-hero-fade) { max-width: 1280px; margin-left: auto; margin-right: auto; }

/* ── 3. Golven, gloed en deeltjes eruit ── */
html body .ds-hero-wave, html body .ds-cta-wave-top,
html body .wh-wave, html body .wh-cta-wave-top,
html body .fm-wave,
html body .ds-section-cta-glow, html body .fm-cta-glow, html body .kx-cta-glow,
html body #mc-particles, html body #db-particles {
  display: none !important;
}
html body .ds-section-featured::before { display: none !important; }

/* ── 4. Kaarten, pakketten en FAQ ── */
html body .main-content .ds-section,
html body .main-content .ds-section-featured,
html body .main-content .fm-section {
  border-top: 1px solid var(--border) !important;
}
html body .main-content .fm-section-dark,
html body .main-content .ds-section-featured { background: var(--dark) !important; }

/* Rondere hoeken iets strakker, passend bij het logo */
html body .cat-card, html body .why-card, html body .fw-card,
html body .kx-plan {
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}
html body .cat-card:hover, html body .why-card:hover {
  transform: none !important;
  border-color: rgba(147,171,255,.38) !important;
}
html body .kx-badge {
  background: var(--signal) !important;
  color: #1A1204 !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
}
html body .cat-price, html body .kx-price {
  font-variant-numeric: tabular-nums;
  font-stretch: 112%;
}

/* FAQ-uitklappers: ruimer en duidelijker */
html body .wh-faq-item {
  border-radius: 0 !important;
}
html body .main-content details > summary { font-weight: 650; cursor: pointer; }
html body .main-content details[open] > summary { color: #fff; }

/* ── 5. Blauwe oproep onderaan ── */
html body .kx-endcta {
  position: relative;
  overflow: hidden;
  background: var(--accent) !important;
  border-top: 0 !important;
  padding-top: clamp(3.5rem, 7vw, 5.5rem) !important;
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem) !important;
  color: #fff;
  clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 64px, 100% 100%, 0 100%);
}
/* Twee balken rechts als echo van het logo */
html body .kx-endcta::before {
  content: "" !important; display: block !important;
  position: absolute; right: 6%; top: -30%; bottom: -30%; width: 220px; pointer-events: none;
  background:
    linear-gradient(135deg, transparent 44%, rgba(255,255,255,.14) 44%, rgba(255,255,255,.14) 58%, transparent 58%),
    linear-gradient(135deg, transparent 66%, rgba(255,255,255,.08) 66%, rgba(255,255,255,.08) 76%, transparent 76%) !important;
  -webkit-mask-image: none; mask-image: none;
  border-radius: 0 !important; filter: none !important; opacity: 1 !important; inset: auto;
}
html body .kx-endcta::after { display: none !important; }
/* Losse gloed-divjes in de oproep weg */
html body .kx-endcta > div[style*="radial-gradient"] { display: none !important; }
html body .kx-endcta > *,
html body .kx-endcta .container,
html body .kx-endcta [class*="-wrap"],
html body .kx-endcta [class*="-inner"],
html body .kx-endcta [class*="-in "],
html body .kx-endcta .kx-cta-in {
  position: relative; z-index: 1;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body .kx-endcta h2,
html body .kx-endcta h3 { color: #fff !important; }
html body .kx-endcta h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem) !important; }
html body .kx-endcta p { color: rgba(255,255,255,.85) !important; }
html body .kx-endcta .gradient-text,
html body .kx-endcta span[style*="color"] { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html body .kx-endcta [class*="eyebrow"],
html body .kx-endcta [class*="pill"] span,
html body .kx-endcta [class*="badge"],
html body .kx-endcta [class*="badge"] span { color: rgba(255,255,255,.9) !important; }
html body .kx-endcta .btn-primary,
html body .kx-endcta .kx-btn-primary {
  background: #fff !important;
  color: #0B1640 !important;
}
html body .kx-endcta .btn-primary:hover,
html body .kx-endcta .kx-btn-primary:hover { background: #E3E9FF !important; color: #0B1640 !important; }
html body .kx-endcta .btn-secondary,
html body .kx-endcta .btn-default,
html body .kx-endcta .kx-btn-ghost {
  background: #0B1640 !important;
  border-color: #0B1640 !important;
  color: #fff !important;
}
html body .kx-endcta .btn-secondary:hover,
html body .kx-endcta .kx-btn-ghost:hover { background: #5865F2 !important; border-color: #5865F2 !important; }
html body .kx-endcta a:not(.btn):not([class*="btn"]) { color: #fff !important; text-decoration: underline !important; }

/* ── 6. Klantgebied ── */
html body .logincontainer,
html body .main-content .card-body {
  font-family: var(--kx-font);
}

/* ── Mobiel ── */
@media (max-width: 768px) {
  html body .ds-hero-content,
  html body .wh-hero-inner,
  html body .legal-hero-inner,
  html body .kx-hero {
    padding: calc(70px + 2.5rem) 1rem 2.75rem !important;
  }
  html body .fm-hero-left { text-align: left !important; align-items: flex-start !important; }
  html body .fm-hero-btns, html body .fm-hero-stats { justify-content: flex-start !important; }
  html body .kx-endcta { clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%); }
  html body .kx-endcta::before { width: 120px; right: -10px; }
}

/* ── 7. Kop van klant- en supportpagina's (contact, kennisbank, tickets…) ──
   Tekst links, op dezelfde lijn als het formulier eronder. */
html body .kx-pagehero {
  justify-content: flex-start !important;
  min-height: 0 !important;
  padding: calc(70px + clamp(2.5rem, 6vw, 4.5rem)) 1.5rem clamp(2rem, 4vw, 3rem) !important;
  isolation: isolate;
}
html body .kx-pagehero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(138,160,255,.06) 0 1px, transparent 1px 22px);
  -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 60%);
  mask-image: linear-gradient(100deg, #000 0%, transparent 60%);
}
html body .kx-pagehero > div[style*="radial-gradient"] { display: none !important; }
html body .kx-pagehero > div[style*="url("] {
  opacity: .12 !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
}
html body .kx-pagehero > .container { text-align: left !important; width: 100%; }
html body .kx-pagehero h1 {
  font-size: clamp(2.3rem, 4.8vw, 3.6rem) !important;
  margin-bottom: .9rem !important;
  text-wrap: balance;
}
html body .kx-pagehero p { margin-left: 0 !important; margin-right: 0 !important; max-width: 56ch; color: var(--muted) !important; }

/* Gekleurde woorden in koppen: overal dezelfde koptekstkleur */
html body .main-content .gradient-text {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: inherit !important;
}
html body .legal-wave { display: none !important; }
html body .legal-meta { justify-content: flex-start !important; }
html body .kx-pagehero > div[style*="max-width"] { text-align: left !important; width: 100%; position: relative; z-index: 1; }

/* Oproep sluit direct aan op de footer */
html body .main-content { margin-bottom: 0 !important; }
html body .kxf:has(.kxf-wrap > .kxf-grid:first-child) { margin-top: 0; }

/* Losse labels met eigen hoofdletterstijl */
html body .main-content p[style*="text-transform:uppercase"],
html body .main-content span[style*="text-transform:uppercase"],
html body .fm-panel-label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: .95rem !important;
  font-weight: 650 !important;
  color: var(--accent-soft) !important;
}

/* FiveM: knoppen in de hero zelfde stijl als overal */
html body .fm-hero-btns { display: flex !important; flex-wrap: wrap; gap: .7rem !important; }
html body .fm-hero-btns .kx-btn-primary,
html body .fm-hero-btns .kx-btn-ghost {
  display: inline-flex !important; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.35rem !important;
  font-family: var(--kx-font); font-size: .98rem !important; font-weight: 650 !important;
  text-decoration: none !important; border-radius: 0 !important;
}
html body .fm-hero-btns .kx-btn-primary {
  background: var(--accent) !important; color: #fff !important; border: 0 !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
html body .fm-hero-btns .kx-btn-primary:hover { background: var(--accent-hover) !important; }
html body .fm-hero-btns .kx-btn-ghost {
  background: transparent !important; color: var(--text) !important;
  border: 1px solid rgba(138,160,255,.3) !important;
}
html body .fm-hero-btns .kx-btn-ghost:hover { border-color: var(--accent-soft) !important; background: rgba(43,92,255,.1) !important; }

/* Kleine telefoons: custom.css geeft main-content al 80px ruimte voor de header,
   dus de hero's hoeven die niet nog eens op te tellen. */
@media (max-width: 480px) {
  html body .ds-hero-content,
  html body .wh-hero-inner,
  html body .legal-hero-inner,
  html body .kx-hero,
  html body .kx-pagehero { padding-top: 1.75rem !important; }
  html body .db-hero { padding-top: 1.25rem !important; }
  html body .fm-hero-left { padding-top: 1.75rem !important; }
}

/* Pagina's met eigen secties: banden over de volle breedte */
html body .main-content > .container:has(> section, > .kz) { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; width: 100% !important; }

/* FiveM: hero-tekst op dezelfde lijn als de rest van de pagina */
@media (min-width: 769px) {
  html body .fm-hero-left { padding-left: max(1.5rem, calc((100vw - 1200px) / 2 + 1.5rem)) !important; }
}