/* ═══════════════════════════════════════════════════════════════
   KRONIX HOSTING — MAKEOVER 2026
   Globale ontwerplaag. Wordt als laatste geladen (na overrides.css)
   en zet de kleuren, letters en basisonderdelen voor de hele site.

   Ontwerpidee: de schuine balken uit het K-logo.
   - Hoeken van knoppen en kaders zijn schuin afgesneden (--kx-cut).
   - Merkblauw uit het logo, met amber als "status-lampje".
   - Eén lettertype (Archivo): breed voor koppen, normaal voor tekst.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Basis */
  --bg:          #080B17;
  --dark:        #0D1122;
  --card:        #121830;
  --secondary:   #18203D;
  --border:      rgba(138, 160, 255, 0.13);

  /* Merk */
  --accent:       #2B5CFF;
  --accent-hover: #1E47E0;
  --accent-soft:  #93ABFF;   /* blauw dat leesbaar is op donker */
  --blue:         #2B5CFF;
  --signal:       #FFB23E;   /* amber: live, deze week, status */

  /* Tekst */
  --text:  #EEF2FF;
  --muted: #9AA5C7;

  /* Status */
  --success: #22C55E;
  --warning: #F59E0B;
  --danger:  #EF4444;

  /* Vorm */
  --radius:    8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --kx-cut:    12px;

  /* Letters */
  --kx-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kx-wide: 118%;
}

/* ── Basis ── */
html body {
  font-family: var(--kx-font) !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  background-color: var(--bg) !important;
  color: var(--text) !important;
}
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6 {
  font-family: var(--kx-font) !important;
  font-stretch: var(--kx-wide);
  letter-spacing: -0.015em;
  color: var(--text);
}
html body h1 { font-weight: 800; line-height: 1.05; }
html body h2 { font-weight: 800; line-height: 1.12; }
html body h3, html body h4 { font-weight: 700; }

a { color: var(--accent-soft) !important; }
a:hover { color: #C3D0FF !important; }

::selection { background: var(--accent); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #232C52; border: 3px solid var(--bg); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }

/* Geen regenboog-tekst meer: koppen blijven één kleur */
html body .gradient-text,
html body .hero-section .gradient-text,
html body section .gradient-text {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text) !important;
}

/* Rustiger raster op achtergronden */
.grid-bg {
  background-image:
    linear-gradient(rgba(138, 160, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 160, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── Knoppen ── */
html body .btn,
html body .main-content .btn,
html body .modal .btn {
  font-family: var(--kx-font) !important;
  font-weight: 650 !important;
  letter-spacing: 0.005em;
  border-radius: 6px !important;
}
html body .btn-primary,
html body .main-content .btn-primary,
html body .modal .btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - var(--kx-cut)) 0, 100% var(--kx-cut), 100% 100%, var(--kx-cut) 100%, 0 calc(100% - var(--kx-cut)));
}
html body .btn-primary:hover,
html body .btn-primary:focus,
html body .main-content .btn-primary:hover,
html body .main-content .btn-primary:focus,
html body .modal .btn-primary:hover {
  background: var(--accent-hover) !important;
  color: #fff !important;
  box-shadow: none !important;
}
/* clip-path knipt een gewone focusrand weg, dus binnenrand */
html body .btn-primary:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px #fff !important;
}
html body .main-content .btn-secondary,
html body .main-content .btn-default,
html body .main-content .btn-outline,
html body .modal .btn-secondary,
html body .btn-secondary {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid rgba(138, 160, 255, 0.28) !important;
}
html body .main-content .btn-secondary:hover,
html body .main-content .btn-default:hover,
html body .main-content .btn-outline:hover,
html body .btn-secondary:hover {
  background: rgba(43, 92, 255, 0.12) !important;
  border-color: var(--accent-soft) !important;
  color: #fff !important;
}

/* ── Kaarten ── */
html body .card,
html body .card-flat,
html body .card-secondary {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html body .card:hover {
  transform: none;
  border-color: rgba(147, 171, 255, 0.35);
  box-shadow: none;
}
html body .card-popular {
  background: linear-gradient(180deg, rgba(43, 92, 255, 0.14), rgba(43, 92, 255, 0.04) 60%), var(--card);
  border: 1px solid rgba(43, 92, 255, 0.55);
  box-shadow: none;
}
html body .panel,
html body .panel-default {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
html body .panel-heading {
  background: var(--secondary) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── Formulieren ── */
html body .form-control {
  background: #0B0F20 !important;
  border-color: rgba(138, 160, 255, 0.18) !important;
  border-radius: 6px !important;
}
html body .form-control:hover { border-color: rgba(147, 171, 255, 0.35) !important; }
html body .form-control:focus {
  background: #0B0F20 !important;
  border-color: var(--accent-soft) !important;
  box-shadow: 0 0 0 3px rgba(43, 92, 255, 0.25) !important;
}
html body .form-control::placeholder { color: rgba(154, 165, 199, 0.55) !important; }

/* ── Kop van een pagina ── */
html body .page-header h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
}
html body .page-header-label {
  color: var(--accent-soft);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
}

/* ── Labels en badges ── */
html body .badge-accent,
html body .label-primary,
html body .badge-primary,
html body .label-info,
html body .badge-info {
  background: rgba(43, 92, 255, 0.16) !important;
  color: var(--accent-soft) !important;
  border-color: rgba(43, 92, 255, 0.35) !important;
}
html body .badge-popular {
  background: var(--signal) !important;
  color: #1A1204 !important;
}

/* ── Tabellen (klantgebied) ── */
html body .table > thead > tr > th,
html body .table thead th {
  font-stretch: var(--kx-wide);
  font-weight: 700;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--border) !important;
}
html body .table > tbody > tr > td { border-color: var(--border) !important; }
html body .table-hover > tbody > tr:hover > td { background: rgba(43, 92, 255, 0.06) !important; }

/* ── Zijbalk klantgebied ── */
html body .sidebar-nav li a.active,
html body .list-group-item.active {
  background: rgba(43, 92, 255, 0.14) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ── Tabs ── */
html body .nav-tabs > li.active > a,
html body .nav-tabs .nav-link.active {
  color: #fff !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ── Prijzen: cijfers netjes onder elkaar ── */
html body [class*="price"] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}


/* =====================================================================
   SCROLL-ANIMATIES (werkt samen met js/kronix-motion.js)
   Alleen actief als <html> de klasse kx-motion heeft; die zet head.tpl
   niet bij "minder beweging". De lijst hieronder moet gelijk lopen met
   SELECTORS in kronix-motion.js.
   ===================================================================== */
html.kx-motion :is(
  [data-kx-reveal],
  .kh-title,
  .kh-trust,
  .kh-unit,
  .kh-stage,
  .kxs-head,
  .kxs-steps,
  .kxs-step,
  .kxs-dc,
  .kxr-head,
  .kxr-rows,
  .kv-hero-left > *,
  .kv-sheet,
  .kv-hero-compact .container > *,
  .kv-head,
  .kv-split > *,
  .kv-card,
  .kv-plan,
  .kv-svc,
  .kv-game,
  .kv-included,
  .kv-os,
  .kv-faq details,
  .kv-faq-layout > div:first-child,
  .kv-picker,
  .kv-toggle-bar,
  .kv-story-head,
  .kv-story-body > p,
  .kv-founder-photo,
  .kv-founder > div + div,
  .kv-dc > div,
  .kv-gallery .kv-photo,
  .kv-dl-row,
  .kv-contact,
  .kz-form,
  .pricing-card,
  .mc-feature-row,
  .db-feature-row,
  .mc-panel-visual,
  .kz-feat,
  .kz-art,
  .db-terminal,
  .kv-panel-visual,
  .kx-endcta .container > *,
  .kx-endcta .kx-cta-in > *,
  .kxc-product-card,
  .view-cart-items .item,
  .order-summary,
  .kxc-summary-card
):not(.kx-in) {
  opacity: 0;
  transform: translateY(24px);
}
html.kx-motion :is(
  [data-kx-reveal],
  .kh-title,
  .kh-trust,
  .kh-unit,
  .kh-stage,
  .kxs-head,
  .kxs-steps,
  .kxs-step,
  .kxs-dc,
  .kxr-head,
  .kxr-rows,
  .kv-hero-left > *,
  .kv-sheet,
  .kv-hero-compact .container > *,
  .kv-head,
  .kv-split > *,
  .kv-card,
  .kv-plan,
  .kv-svc,
  .kv-game,
  .kv-included,
  .kv-os,
  .kv-faq details,
  .kv-faq-layout > div:first-child,
  .kv-picker,
  .kv-toggle-bar,
  .kv-story-head,
  .kv-story-body > p,
  .kv-founder-photo,
  .kv-founder > div + div,
  .kv-dc > div,
  .kv-gallery .kv-photo,
  .kv-dl-row,
  .kv-contact,
  .kz-form,
  .pricing-card,
  .mc-feature-row,
  .db-feature-row,
  .mc-panel-visual,
  .kz-feat,
  .kz-art,
  .db-terminal,
  .kv-panel-visual,
  .kx-endcta .container > *,
  .kx-endcta .kx-cta-in > *,
  .kxc-product-card,
  .view-cart-items .item,
  .order-summary,
  .kxc-summary-card
).kx-in:not(.kx-done) {
  transition:
    opacity .75s cubic-bezier(.2,.7,.2,1),
    transform .75s cubic-bezier(.2,.7,.2,1),
    border-color .2s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease;
}

/* Hero en koppen schuiven iets verder op, kaarten minder */
html.kx-motion :is(.kh-title, .kv-hero-left > *, .kv-hero-compact .container > *, .kxs-head, .kv-head, .kxr-head):not(.kx-in) { transform: translateY(32px); }
html.kx-motion :is(.kv-sheet, .kh-stage, .kv-founder-photo, .kxs-dc):not(.kx-in) { transform: translateY(18px) scale(.985); }
html.kx-motion :is(.kh-unit):not(.kx-in) { transform: translateX(-16px); }

/* De verbindingslijn van "Zo staat jouw server online" tekent zichzelf */
html.kx-motion .kxs-steps::before {
  transform-origin: left center;
  transition: transform 1.3s cubic-bezier(.65,0,.35,1) .25s;
}
html.kx-motion .kxs-steps:not(.kx-in)::before { transform: scaleX(0); }
@media (max-width: 900px) {
  html.kx-motion .kxs-steps::before { transform-origin: center top; }
  html.kx-motion .kxs-steps:not(.kx-in)::before { transform: scaleY(0); }
}
/* Stapnummers springen erin */
html.kx-motion .kxs-node { transition: transform .55s cubic-bezier(.34,1.56,.64,1) .15s; }
html.kx-motion .kxs-step:not(.kx-in) .kxs-node { transform: scale(.55); }

/* De K-balken schuiven in beeld achter de afbeeldingen */
html.kx-motion :is(.kv-svc-media, .kh-figure)::before,
html.kx-motion :is(.kv-svc-media, .kh-figure)::after {
  transition: transform 1s cubic-bezier(.2,.7,.2,1) .15s, opacity 1s ease .15s, background-color .6s ease, translate .45s cubic-bezier(.2,.7,.2,1);
}
html.kx-motion .kv-svc:not(.kx-in) .kv-svc-media::before,
html.kx-motion .kv-svc:not(.kx-in) .kv-svc-media::after,
html.kx-motion .kh-stage:not(.kx-in) .kh-figure::before,
html.kx-motion .kh-stage:not(.kx-in) .kh-figure::after {
  transform: translate(-28%, 12%); opacity: 0;
}

/* Specificatieblad: regels komen één voor één binnen */
html.kx-motion .kv-sheet > * { transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1), background .15s ease; }
html.kx-motion .kv-sheet:not(.kx-in) > * { opacity: 0; transform: translateX(14px); }
html.kx-motion .kv-sheet > *:nth-child(1) { transition-delay: .15s; }
html.kx-motion .kv-sheet > *:nth-child(2) { transition-delay: .22s; }
html.kx-motion .kv-sheet > *:nth-child(3) { transition-delay: .29s; }
html.kx-motion .kv-sheet > *:nth-child(4) { transition-delay: .36s; }
html.kx-motion .kv-sheet > *:nth-child(5) { transition-delay: .43s; }
html.kx-motion .kv-sheet.kx-done > * { transition-delay: 0s; }

/* Kleine extra's die altijd mogen (ook zonder scrollen) */
@media (prefers-reduced-motion: no-preference) {
  /* Pijltjes in knoppen schuiven mee bij aanwijzen */
  .btn:hover .fa-arrow-right, .kxb-btn:hover svg, .kxs-more:hover svg, .kv-svc:hover .kv-svc-go svg { transform: translateX(4px); }
  .btn .fa-arrow-right { transition: transform .2s ease; }
  /* Pakketkaarten komen iets omhoog bij aanwijzen */
  .kv-plan, .main-content .pricing-card, .kxc-product-card { transition: border-color .2s ease, transform .25s ease; }
  .kv-plan:hover { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  html.kx-motion * { transition: none !important; }
}