/* ============================================================
   VINTRIX — style.css
   Mobile-first, custom properties, geen inline styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap');

/* ---- 1. Custom Properties ---- */
:root {
  --color-white:  #FFFFFF;
  --color-purple: #6805F2;
  --color-indigo: #110273;
  --color-cyan:   #44E1F2;
  --color-lime:   #E5F50C;

  /* Spectrum-verlopen — de volledige Vintrix-kleurboog.
     - spectrum: decoratie (lijnen, randen). Hoeft niet leesbaar te zijn.
     - bright:   gradient-tekst op donkere secties. Cyclisch purple->cyan->lime->cyan->purple,
                 zodat elk woorddeel helder blijft tijdens het pannen.
     - ink:      gradient-tekst op lichte secties. Indigo->purple, leesbaar op wit
                 (heldere cyan/lime hebben te weinig contrast op wit en blijven dus decor). */
  --grad-spectrum: linear-gradient(100deg, var(--color-indigo) 0%, var(--color-purple) 38%, var(--color-cyan) 72%, var(--color-lime) 100%);
  --grad-bright:   linear-gradient(100deg, var(--color-purple) 0%, var(--color-cyan) 30%, var(--color-lime) 52%, var(--color-cyan) 74%, var(--color-purple) 100%);
  --grad-ink:      linear-gradient(105deg, var(--color-indigo) 0%, var(--color-purple) 100%);
  --grad-bar:      linear-gradient(180deg, var(--color-indigo) 0%, var(--color-purple) 35%, var(--color-cyan) 68%, var(--color-lime) 100%);

  --color-bg:          #F7F7FB;
  --color-bg-alt:      #EEEEF8;
  --color-text:        #1A1A2E;
  --color-text-muted:  #5A5A7A;
  --color-border:      #D8D8EE;

  --font-heading: 'Oxanium', 'Courier New', monospace;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-card: 0 2px 16px rgba(104, 5, 242, 0.08);
  --shadow-card-hover: 0 6px 32px rgba(104, 5, 242, 0.18);
  --shadow-glow-cyan: 0 0 20px rgba(68, 225, 242, 0.25);

  --transition: 0.22s ease;
  --transition-slow: 0.4s ease;

  --container-max: 1160px;
  --container-pad: clamp(1rem, 5vw, 2rem);

  --nav-height: 68px;
}

/* ---- 2. Reset & Base ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
}

/* ---- 3. Typography ---- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.15;
  color: var(--color-indigo);
}

h1 { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 4vw, 2.8rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 600; }

p {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  color: var(--color-text-muted);
  max-width: 65ch;
}

/* ---- 4. Layout Utilities ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: clamp(4rem, 8vw, 7rem);
  scroll-margin-top: var(--nav-height);
}

.section-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-purple);
  margin-bottom: 0.75rem;
}

/* Spectrum-streepje vóór elk sectielabel: brengt de volledige kleurboog
   als fris accent terug, ook in de lichte secties. */
.section-label::before {
  content: '';
  flex-shrink: 0;
  width: 22px;
  height: 3px;
  border-radius: 1px;
  background-image: var(--grad-spectrum);
}

.section-heading {
  margin-bottom: 1.25rem;
}

.section-intro {
  font-size: clamp(1rem, 2vw, 1.15rem);
  max-width: 55ch;
  margin-bottom: 2.5rem;
}

/* ---- 5. Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius-sm);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 3px solid var(--color-cyan);
  outline-offset: 3px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-purple) 0%, #4B00C8 100%);
  color: var(--color-white);
  box-shadow: 0 2px 12px rgba(104, 5, 242, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(104, 5, 242, 0.4);
  background: linear-gradient(135deg, #7A1FFF 0%, var(--color-purple) 100%);
}

.btn-cta {
  background: var(--color-lime);
  color: var(--color-indigo);
  box-shadow: 0 2px 12px rgba(229, 245, 12, 0.25);
}

.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(229, 245, 12, 0.4);
  background: #F0FF2A;
}

.btn-ghost {
  background: transparent;
  color: var(--color-white);
  border: 2px solid rgba(255,255,255,0.4);
}

.btn-ghost:hover {
  border-color: var(--color-cyan);
  color: var(--color-cyan);
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: var(--color-purple);
  border: 2px solid var(--color-purple);
}

.btn-secondary:hover {
  background: var(--color-purple);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

/* ---- 6. Navigation ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* backdrop-filter op een pseudo-element zodat het header-element zelf
   geen containing block wordt voor position:fixed children (mobiel menu) */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(247, 247, 251, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 0;
  pointer-events: none;
}

.site-header.scrolled {
  border-color: var(--color-border);
  box-shadow: 0 2px 16px rgba(17, 2, 115, 0.06);
}

.nav-container {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  gap: 1rem;
  height: var(--nav-height);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.nav-logo {
  flex-shrink: 0;
  line-height: 0;
}

.logo-svg {
  height: 36px;
  width: auto;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin-left: auto;
}

.nav-menu > li {
  display: flex;
  align-items: center;
}

.nav-link {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-indigo);
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  position: relative;
  white-space: nowrap;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.5rem;
  right: 0.5rem;
  height: 2px;
  background: var(--color-purple);
  transform: scaleX(0);
  transition: transform var(--transition);
  transform-origin: left;
}

.nav-link:hover { color: var(--color-purple); }
.nav-link:hover::after { transform: scaleX(1); }

.nav-link--active { color: var(--color-purple); }
.nav-link--active::after { transform: scaleX(1); }

.nav-cta {
  margin-left: 0.4rem;
  flex-shrink: 0;
  padding: 0.55rem 1.15rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(229, 245, 12, 0.22);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
  pointer-events: none;
}

.nav-cta:hover {
  transform: translateY(-1px);
  background: var(--color-lime);
  box-shadow:
    0 0 0 3px rgba(104, 5, 242, 0.14),
    0 8px 22px rgba(229, 245, 12, 0.55);
}

.nav-cta:hover::before {
  transform: translateX(120%);
}

.nav-cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(229, 245, 12, 0.3);
}

/* Dropdown menu */
.nav-item--has-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-indigo);
  white-space: nowrap;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}

.nav-dropdown-toggle:hover {
  color: var(--color-purple);
}

.nav-dropdown-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--transition);
}

.nav-item--has-dropdown.open .nav-dropdown-caret {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 220px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(17, 2, 115, 0.1);
  padding: 0.4rem;
  margin: 0;
  list-style: none;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility 0s 0.2s;
  z-index: 101;
}

.nav-item--has-dropdown:hover .nav-dropdown,
.nav-item--has-dropdown:focus-within .nav-dropdown,
.nav-item--has-dropdown.open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--transition), transform var(--transition), visibility 0s;
}

.nav-dropdown-link {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-indigo);
  transition: color var(--transition), background var(--transition);
}

.nav-dropdown-link:hover,
.nav-dropdown-link:focus-visible {
  color: var(--color-purple);
  background: rgba(104, 5, 242, 0.06);
}

.nav-dropdown-link--active {
  color: var(--color-purple);
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  margin-left: auto;
}

.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-indigo);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- 7. Hero ---- */
.hero {
  position: relative;
  background:
    radial-gradient(circle at 20% 10%, rgba(104, 5, 242, 0.55) 0%, transparent 50%),
    radial-gradient(circle at 85% 85%, rgba(68, 225, 242, 0.18) 0%, transparent 55%),
    linear-gradient(145deg, var(--color-indigo) 0%, #1A0460 55%, #2A0580 100%);
  color: var(--color-white);
  padding-block: clamp(5rem, 12vw, 9rem);
  overflow: hidden;
}

/* Pixelgrid achtergrond */
.pixel-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Geen eigen overflow-clip: de hero/CTA-sectie klipt (overflow: hidden),
     net als de fixed bg-laag op de afvang. Voorkomt de flicker van een
     strak geknipte 3D-laag. */
}

/* Zwevende pixel-dots decoratie */
.pixel-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.pixel-dots::before,
.pixel-dots::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--color-cyan);
  opacity: 0.35;
  animation: pixel-float 6s ease-in-out infinite;
}

.pixel-dots::before {
  top: 20%;
  right: 15%;
  box-shadow:
    40px 80px 0 var(--color-lime),
    -60px 120px 0 var(--color-purple),
    100px 20px 0 var(--color-cyan),
    -100px 60px 0 var(--color-lime),
    80px 160px 0 var(--color-cyan);
}

.pixel-dots::after {
  top: 60%;
  right: 30%;
  animation-delay: 3s;
  box-shadow:
    -40px -60px 0 var(--color-purple),
    60px -80px 0 var(--color-cyan),
    -80px 40px 0 var(--color-lime),
    120px 20px 0 var(--color-purple);
}

@keyframes pixel-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-label {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-cyan);
  margin-bottom: 1rem;
  max-width: none;
}

.hero-heading {
  color: var(--color-white);
  margin-bottom: 1.5rem;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
}

.text-highlight {
  color: var(--color-lime);
  position: relative;
  display: inline-block;
}

/* Pixel-underline accent */
.text-highlight::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-lime) 0,
    var(--color-lime) 8px,
    transparent 8px,
    transparent 12px
  );
}

.hero-sub {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: rgba(255,255,255,0.8);
  max-width: 52ch;
  margin-bottom: 2.25rem;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.hero-footnote {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  max-width: none;
}

/* ---- 8. Probleem ---- */
.section-problem {
  background: var(--color-white);
  position: relative;
  overflow: hidden;
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.problem-card {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

/* Accentrand verschijnt op hover en loopt door het volledige Vintrix-spectrum. */
.problem-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--grad-bar);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--transition);
}

.problem-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-purple);
}

.problem-card:hover::before {
  transform: scaleY(1);
}

.problem-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
}

.problem-title {
  margin-bottom: 0.6rem;
  font-size: 1.05rem;
}

.problem-conclusion {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  font-weight: 700;
  color: var(--color-indigo);
  text-align: center;
  max-width: 100%;
  padding-top: 2rem;
}

/* ---- 9. Oplossingen Preview ---- */
.section-solutions {
  background: var(--color-bg-alt);
}

.solutions-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 820px;
  margin: 0 auto 2.5rem;
}

@media (max-width: 640px) {
  .solutions-preview-grid {
    grid-template-columns: 1fr;
  }
}

/* Trio-variant: drie gelijke kaarten op één rij over de volle containerbreedte,
   zodat ze links met de kop en rechts met de container uitlijnen (geen smalle
   gecentreerde grid die ingesprongen oogt). Een set van drie mag nooit als
   scheve 2+1 uitlijnen, dus geen 2-koloms tussenstap: drie of gestapeld. */
.solutions-preview-grid--trio {
  grid-template-columns: repeat(3, 1fr);
  max-width: none;
  margin-top: 2.5rem;
}

@media (max-width: 860px) {
  .solutions-preview-grid--trio {
    grid-template-columns: 1fr;
  }
}

/* Quad-variant: vier kaarten als 2x2 over de volle containerbreedte, links met
   de kop en rechts met de container uitgelijnd (geen smalle gecentreerde grid).
   Voor branches met een verkoop- en een werkplaatskant (autobedrijven). Stapelt
   onder 640px via de basisregel hierboven. */
.solutions-preview-grid--quad {
  grid-template-columns: repeat(2, 1fr);
  max-width: none;
  margin-top: 2.5rem;
}

.solution-preview-card {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  transition: transform var(--transition), box-shadow var(--transition);
}

/* Accentrand verschijnt op hover en loopt door het volledige Vintrix-spectrum. */
.solution-preview-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--grad-bar);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--transition);
}

.solution-preview-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

.solution-preview-card:hover::before {
  transform: scaleY(1);
}

.solution-category {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-purple);
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}

.solution-preview-card p {
  font-size: 0.95rem;
  margin: 0;
}

/* Pillar blocks — vier archetypes, één familie */
.pillar-block {
  position: relative;
  margin-bottom: 1.75rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.pillar-block--alt {
  background: var(--color-bg);
  border-color: rgba(104, 5, 242, 0.15);
}

.pillar-header {
  margin-bottom: 1.5rem;
}

/* Nummer-chip rechtsboven, bindt de vier pijlers tot één set */
.pillar-num {
  position: absolute;
  top: clamp(1.25rem, 4vw, 2.1rem);
  right: clamp(1.25rem, 4vw, 2.1rem);
  z-index: 2;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-white);
  background: var(--color-purple);
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  box-shadow: 3px 3px 0 rgba(17, 2, 115, 0.18);
}
.pillar-block--alt .pillar-num { background: var(--color-cyan); color: var(--color-indigo); box-shadow: 3px 3px 0 rgba(104, 5, 242, 0.16); }
.pillar-block--ai .pillar-num { background: var(--color-cyan); color: var(--color-indigo); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.28); }
.pillar-block--maatwerk .pillar-num { background: linear-gradient(135deg, var(--color-purple), var(--color-cyan)); box-shadow: 3px 3px 0 rgba(17, 2, 115, 0.18); }

.pillar-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-purple);
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.6rem;
}

.pillar-title {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: var(--color-indigo);
  margin-bottom: 0.5rem;
  padding-right: 3rem;
}

.pillar-intro {
  font-size: 0.98rem;
  max-width: 60ch;
  margin: 0;
  color: var(--color-text-muted);
}

/* AI-pijler */
.pillar-block--ai {
  background: var(--color-indigo);
  border-color: transparent;
}

.pillar-label--ai {
  background: var(--color-cyan);
  color: var(--color-indigo);
}

.pillar-block--ai .pillar-title {
  color: var(--color-white);
}

.pillar-block--ai .pillar-intro {
  color: rgba(255,255,255,0.75);
}

.ai-pillar-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.ai-quote {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 600;
  color: var(--color-cyan);
  font-style: italic;
  line-height: 1.4;
  margin-bottom: 1rem;
  max-width: none;
}

.ai-problem-block p {
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  max-width: none;
  margin-bottom: 0.75rem;
}

.ai-solution-title {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-lime);
  margin-bottom: 1.25rem;
}

.ai-steps {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ai-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.ai-step-num {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  color: rgba(68, 225, 242, 0.5);
  line-height: 1.2;
  flex-shrink: 0;
  width: 2rem;
}

.ai-step strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 0.3rem;
}

.ai-step p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
  margin: 0;
  max-width: none;
}

.ai-pillar-cta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.5rem;
}

.ai-cta-note {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  margin: 0;
  max-width: none;
}

.solutions-cta {
  text-align: center;
}

.pillar-cta {
  margin-top: 1.75rem;
}

/* 2. Websitepakketten — tier-ladder met uitgelichte middenpijler (cyaan) */
.pkg-ladder {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: stretch;
}
.pkg-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.3rem;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.pkg-tier:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-cyan);
}
.pkg-tier--featured {
  border: 2px solid var(--color-cyan);
  box-shadow: var(--shadow-glow-cyan), var(--shadow-card);
  transform: translateY(-12px);
  z-index: 1;
}
.pkg-tier--featured:hover { transform: translateY(-16px); }
.pkg-tier-badge {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-indigo);
  background: var(--color-lime);
  padding: 0.24rem 0.6rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.pkg-tier-name {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--color-indigo);
  margin: 0 0 0.4rem;
}
.pkg-tier-name::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--color-cyan);
  margin-right: 0.5rem;
  vertical-align: middle;
}
.pkg-tier--featured .pkg-tier-name::before { background: var(--color-purple); }
.pkg-tier p { font-size: 0.9rem; margin: 0; color: var(--color-text-muted); }

/* 4. Software op maat — showcase-split met grote nummers en pixel-energie */
.pillar-block--maatwerk {
  background:
    radial-gradient(circle at 92% 8%, rgba(68, 225, 242, 0.12) 0%, transparent 42%),
    linear-gradient(180deg, rgba(104, 5, 242, 0.04) 0%, transparent 32%),
    var(--color-white);
}
.maatwerk-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.maatwerk-intro .pillar-title { padding-right: 0; }
.maatwerk-intro .btn { margin-top: 1.25rem; }
.maatwerk-cases { display: flex; flex-direction: column; }
.maatwerk-cases-label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-purple);
  margin: 0 0 0.75rem;
}
.maatwerk-case {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.95rem 0;
  border-top: 1px solid var(--color-border);
}
.maatwerk-case:first-child { border-top: none; padding-top: 0; }
.maatwerk-case-ico {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  margin-top: 0.15rem;
}
.maatwerk-case-ico svg { display: block; width: 100%; height: 100%; }
.maatwerk-case-body strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--color-indigo);
  margin-bottom: 0.25rem;
}
.maatwerk-case-body p { font-size: 0.92rem; margin: 0; color: var(--color-text-muted); }

@media (max-width: 860px) {
  .maatwerk-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .pkg-ladder { grid-template-columns: 1fr; gap: 1.5rem; }
  .pkg-tier--featured { transform: translateY(0); }
  .pkg-tier--featured:hover { transform: translateY(-4px); }
}

/* ---- 10. Hoe het werkt ---- */
.section-how {
  background: var(--color-white);
  position: relative;
  overflow: hidden;
}

.steps-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 0;
}

.step-card {
  background: linear-gradient(165deg, rgba(68, 225, 242, 0.08) 0%, rgba(104, 5, 242, 0.04) 100%), var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem 1.75rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

/* Accentrand verschijnt op hover en loopt door het volledige Vintrix-spectrum. */
.step-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--grad-bar);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--transition);
}

.step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-purple);
}

.step-card:hover::before {
  transform: scaleY(1);
}

.step-number {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 800;
  color: rgba(104, 5, 242, 0.08);
  line-height: 1;
  margin-bottom: 0.75rem;
  user-select: none;
}

.step-title {
  margin-bottom: 0.75rem;
  color: var(--color-indigo);
}

.step-pixel-accent {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-purple) 0,
    var(--color-purple) 8px,
    transparent 8px,
    transparent 12px
  );
  opacity: 0;
  transition: opacity var(--transition);
}

.step-card:hover .step-pixel-accent {
  opacity: 1;
}

.step-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  margin-top: 3.5rem;
}

.step-connector::before {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-purple) 0,
    var(--color-purple) 6px,
    transparent 6px,
    transparent 10px
  );
}

/* ---- 11. Over Vintrix ---- */
.section-about {
  background: var(--color-bg-alt);
  position: relative;
  overflow: hidden;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.team-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem 1.75rem;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.team-avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.25rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Pixel-art placeholder avatars */
.avatar-pixel-art {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.avatar-marvin {
  background:
    /* Hair */
    linear-gradient(var(--color-indigo) 0, var(--color-indigo) 30%, transparent 30%) 16px 0 / 48px 24px no-repeat,
    /* Skin */
    linear-gradient(#FFCBA4 0, #FFCBA4 100%) 8px 24px / 64px 32px no-repeat,
    /* Shirt */
    linear-gradient(var(--color-purple) 0, var(--color-purple) 100%) 0 56px / 80px 24px no-repeat,
    /* Background */
    var(--color-bg-alt);
}

.avatar-patrick {
  background:
    linear-gradient(#4A3728 0, #4A3728 30%, transparent 30%) 16px 0 / 48px 24px no-repeat,
    linear-gradient(#FFCBA4 0, #FFCBA4 100%) 8px 24px / 64px 32px no-repeat,
    linear-gradient(var(--color-cyan) 0, var(--color-cyan) 100%) 0 56px / 80px 24px no-repeat,
    var(--color-bg-alt);
}

.avatar-linda {
  background:
    linear-gradient(#8B4513 0, #8B4513 40%, transparent 40%) 8px 0 / 64px 32px no-repeat,
    linear-gradient(#FFCBA4 0, #FFCBA4 100%) 8px 32px / 64px 24px no-repeat,
    linear-gradient(var(--color-lime) 0, var(--color-lime) 100%) 0 56px / 80px 24px no-repeat,
    var(--color-bg-alt);
}

.team-name {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
}

.team-role {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-purple);
  margin-bottom: 0.75rem;
}

.team-card p:last-child {
  font-size: 0.92rem;
  text-align: left;
  margin: 0;
}

/* ---- 12. Waardecreatie ---- */
.section-value {
  background:
    radial-gradient(circle at 80% 20%, rgba(68, 225, 242, 0.18) 0%, transparent 55%),
    linear-gradient(145deg, var(--color-indigo) 0%, #2A0580 100%);
  position: relative;
  overflow: hidden;
}

.section-value::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(68,225,242,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(68,225,242,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.section-value .section-label { color: var(--color-cyan); }

.section-value .section-heading {
  color: var(--color-white);
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}

.value-stat {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(68,225,242,0.2);
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.value-stat:hover {
  background: rgba(255,255,255,0.09);
  border-color: var(--color-cyan);
  box-shadow: var(--shadow-glow-cyan);
}

.value-number {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--color-lime);
  line-height: 1;
}

.value-label {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  max-width: 100%;
}

/* ---- 12b. AI Impactsessie (featured) ---- */
.section-impact {
  background:
    radial-gradient(circle at 15% 25%, rgba(104, 5, 242, 0.28) 0%, transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(68, 225, 242, 0.16) 0%, transparent 55%),
    linear-gradient(145deg, var(--color-indigo) 0%, #1A0460 55%, #2A0580 100%);
  position: relative;
  overflow: hidden;
}

.section-impact::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(68,225,242,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(68,225,242,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.section-impact .section-label { color: var(--color-cyan); }
.section-impact .section-heading { color: var(--color-white); }
.section-impact .section-intro {
  color: rgba(255,255,255,0.78);
  margin-bottom: 2rem;
  max-width: 48ch;
}

.impact-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.25fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.impact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.impact-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(68,225,242,0.25);
  border-radius: var(--radius-md);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

.impact-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.impact-price-amount {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  font-weight: 800;
  color: var(--color-lime);
  line-height: 1;
}

.impact-price-unit {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.impact-price-note {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  margin-top: 0.45rem;
  margin-bottom: 1.5rem;
}

.impact-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  border-top: 1px solid rgba(68,225,242,0.18);
  padding-top: 1.5rem;
}

.impact-list li {
  position: relative;
  padding-left: 1.75rem;
  color: rgba(255,255,255,0.9);
  font-size: 0.98rem;
}

/* Pixel-marker: cyan blokje met lime slagschaduw */
.impact-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 10px;
  height: 10px;
  background: var(--color-cyan);
  box-shadow: 3px 3px 0 0 rgba(229, 245, 12, 0.9);
}

.px-impact-sparkle { top: 12%; right: 7%; width: 34px; }
.px-impact-rocket  { bottom: 12%; left: 4%; width: 42px; }

@media (max-width: 768px) {
  .impact-grid { grid-template-columns: 1fr; }
  .px-impact-sparkle, .px-impact-rocket { display: none; }
}

/* ---- 13. FAQ ---- */
.section-faq {
  background: var(--color-white);
  position: relative;
  overflow: hidden;
}

.faq-list {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--color-indigo);
  text-align: left;
  background: var(--color-bg);
  transition: background var(--transition), color var(--transition);
}

.faq-question:hover {
  background: var(--color-bg-alt);
  color: var(--color-purple);
}

.faq-question[aria-expanded="true"] {
  background: var(--color-white);
  color: var(--color-purple);
}

.faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}

/* Pixel-style plus/minus icon */
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--transition), opacity var(--transition);
}

.faq-icon::before {
  width: 12px;
  height: 3px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faq-icon::after {
  width: 3px;
  height: 12px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faq-question[aria-expanded="true"] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq-answer {
  padding: 0 1.5rem 1.25rem;
  background: var(--color-white);
}

.faq-answer p {
  font-size: 0.95rem;
  margin: 0;
}

/* ---- 14. Contact ---- */
.section-contact {
  background: var(--color-bg-alt);
}

.contact-form {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-label {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-indigo);
  letter-spacing: 0.03em;
}

.required { color: var(--color-purple); }
.optional { color: var(--color-text-muted); font-weight: 400; font-size: 0.8rem; }

.form-input,
.form-textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: #ABABCB;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-purple);
  box-shadow: 0 0 0 3px rgba(104, 5, 242, 0.12);
}

.form-input:invalid:not(:placeholder-shown),
.form-textarea:invalid:not(:placeholder-shown) {
  border-color: #E53E3E;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.btn-submit {
  align-self: flex-start;
}

.form-status {
  font-size: 0.9rem;
  padding: 0.6rem 0;
  min-height: 1.5rem;
}

.form-status.success { color: #276749; }
.form-status.error   { color: #E53E3E; }

.form-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- 15. Footer ---- */
.site-footer {
  background: var(--color-indigo);
  color: rgba(255,255,255,0.7);
  padding-block: 2.5rem 1.5rem;
}

/* Bovenste rij: brand links, nav rechts */
.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 1.25rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.footer-tagline {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.82);
  max-width: 38ch;
  margin: 0;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
}

.footer-contact a {
  color: rgba(255,255,255,0.82);
  transition: color var(--transition);
}

.footer-contact a:hover { color: var(--color-cyan); }

/* Nav-links horizontaal in de bovenste rij */
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  justify-content: flex-end;
}

.footer-nav a {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  transition: color var(--transition);
}

.footer-nav a:hover { color: var(--color-cyan); }

/* Onderste balk: copyright links, juridische links rechts */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-copy {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  margin: 0;
}

.footer-legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.footer-legal a {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  transition: color var(--transition);
}

.footer-legal a:hover { color: rgba(255,255,255,0.65); }

.footer-cookie-btn {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color var(--transition);
}

.footer-cookie-btn:hover,
.footer-cookie-btn:focus-visible {
  color: rgba(255,255,255,0.65);
  outline: none;
}

.footer-cookie-btn:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- 16. Scroll-reveal animatie ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Dynamische effecten — synthwave-grid, live-ping, mono-labels
   ============================================================ */

/* Bewegende synthwave-grid op donkere hero/CTA-secties.
   .pixel-grid klipt de brede gekantelde laag (overflow: hidden). */
.pixel-grid::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10%;
  width: 220vw;
  height: 80vh;
  transform: translateX(-50%) perspective(700px) rotateX(62deg);
  background-image:
    linear-gradient(to right,  rgba(68, 225, 242, 0.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(68, 225, 242, 0.35) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 50% 80% at 50% 100%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 50% 80% at 50% 100%, #000 30%, transparent 75%);
  filter: drop-shadow(0 0 20px rgba(68, 225, 242, 0.25));
  animation: grid-move 8s linear infinite;
  pointer-events: none;
}
@keyframes grid-move {
  from { background-position: 0 0; }
  to   { background-position: 0 64px; }
}

/* "Live"-ping: pulserende stip met uitdijende ring */
.live-ping {
  position: relative;
  display: inline-flex;
  width: 0.6em;
  height: 0.6em;
  margin: 0 0.2em;
  vertical-align: baseline;
}
.live-ping-dot {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--color-lime);
  box-shadow: 0 0 8px var(--color-lime);
}
.live-ping-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--color-lime);
  animation: live-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes live-ping {
  0%   { transform: scale(0.6); opacity: 0.9; }
  80%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Konami easter-egg: het Vintrix-poppetje vliegt aan, hovert en komt op de camera af */
.konami-egg {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.konami-egg img {
  width: clamp(72px, 12vw, 150px);
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 24px rgba(68, 225, 242, 0.5));
  animation: konami-fly 3s forwards;
}
@keyframes konami-fly {
  0%   { opacity: 0; transform: translateY(70vh) scale(0.3) rotate(-10deg); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  14%  { opacity: 1; transform: translateY(-14px) scale(1.06) rotate(3deg);  animation-timing-function: ease-in-out; }
  24%  { transform: translateY(0) scale(1) rotate(0deg);                     animation-timing-function: ease-in-out; }
  40%  { transform: translateY(-12px) scale(1.03) rotate(-3deg);             animation-timing-function: ease-in-out; }
  56%  { opacity: 1; transform: translateY(0) scale(1) rotate(0deg);         animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.25); }
  100% { opacity: 0; transform: translateY(0) scale(18) rotate(0deg); }
}

/* ---- Spectrum-kleurboog: gradient-tekst + bewegende merkstreep ---- */

/* Gradient-tekst. Standaard de ink-variant (leesbaar op lichte secties).
   -webkit-text-fill-color overschrijft de eigen kleur van bv. .text-highlight,
   zodat de bestaande pixel-underline (::after) gewoon zichtbaar blijft. */
.gradient-text {
  background-image: var(--grad-ink);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Heldere boog voor tekst op donkere secties (hero, waardecreatie). */
.gradient-text--bright {
  background-image: var(--grad-bright);
}

/* Langzaam pannende beweging door de boog. */
.gradient-text--anim {
  animation: gradient-pan 7s linear infinite;
}

@keyframes gradient-pan {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}

/* Merkstreep: dunne, pixel-onderbroken spectrumlijn die door de boog beweegt.
   Decoratief, dus aria-hidden in de markup. */
.brand-rule {
  height: 4px;
  width: 100%;
  border: 0;
  margin: 0;
  /* Eén palindroom-verloop (indigo..lime..indigo) uitgerekt over 200% breedte.
     Het venster toont zo altijd EEN doorlopende fade over de hele lijn (geen
     herhaling), en omdat beide uiteinden indigo zijn pant het naadloos zonder
     harde sprong bij de loop. Zelfde techniek als de shimmer-titel op de afvang. */
  background-image: linear-gradient(90deg,
    var(--color-indigo) 0%,
    var(--color-purple) 17%,
    var(--color-cyan) 33%,
    var(--color-lime) 50%,
    var(--color-cyan) 67%,
    var(--color-purple) 83%,
    var(--color-indigo) 100%);
  background-size: 200% 100%;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0, #000 7px, transparent 7px, transparent 12px);
          mask-image: repeating-linear-gradient(90deg, #000 0, #000 7px, transparent 7px, transparent 12px);
  animation: brand-rule-pan 18s linear infinite;
}

@keyframes brand-rule-pan {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}

/* Code-vibe op de kleine eyebrows/labels */
.hero-label,
.section-label {
  font-family: var(--font-mono);
}

/* Bewuste keuze (Marvin, juni 2026): de sfeeranimaties (grid, gradient-bar,
   gradient-tekst, live-ping) tonen we altijd, ook bij prefers-reduced-motion.
   De decoratie is subtiel en hoort bij het merk. Mobiel houdt de grid wel
   statisch om scroll-lag te voorkomen, zie hieronder. */
/* Mobiel en touch: grid statisch én goedkoop renderen. De animatie staat hier
   al uit; de scroll-hapering in de hero kwam van de drop-shadow-glow op een
   grote 3D-laag, die halen we weg zodat de bovenkant vloeiend scrollt. */
@media (max-width: 768px), (pointer: coarse) {
  .pixel-grid::before { animation: none; filter: none; }
}
@media (max-width: 600px) {
  .pixel-grid::before { width: 300vw; }
}

/* ---- 17. Responsive ---- */

/* Tablet */
@media (max-width: 900px) {
  .ai-pillar-content {
    grid-template-columns: 1fr;
  }
  .steps-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .step-connector {
    display: none;
  }

  .footer-main {
    flex-direction: column;
    gap: 1.25rem;
  }

  .footer-nav ul {
    justify-content: flex-start;
    gap: 0.4rem 1.25rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* Mobile */
/* Nav klapt in tot een hamburger zodra de volledige balk niet meer past (~1145px). */
@media (max-width: 1160px) {
  .nav-toggle {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem;
    transform: translateY(-100%);
    visibility: hidden;
    /* visibility vertraagd zodat het menu na de slide-animatie pas verdwijnt */
    transition: transform var(--transition-slow), visibility 0s 0.4s;
    z-index: 99;
    box-shadow: 0 8px 24px rgba(17,2,115,0.1);
  }

  .nav-menu.open {
    transform: translateY(0);
    visibility: visible;
    /* visibility direct zichtbaar bij openen, geen vertraging */
    transition: transform var(--transition-slow), visibility 0s;
  }

  .nav-link {
    padding: 0.85rem 1rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--color-border);
  }

  .nav-link:last-child { border-bottom: none; }

  /* Menu-items verticaal stapelen en full-width rekken, zodat een submenu
     netjes onder zijn item inklapt i.p.v. als flyout naast de toggle te
     verschijnen (de li is op desktop een flex-rij). */
  .nav-menu > li {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
  }

  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    padding: 0;
    margin: 0;
    display: none;
    background: rgba(104, 5, 242, 0.04);
  }

  .nav-item--has-dropdown.open .nav-dropdown {
    display: block;
  }

  .nav-dropdown-link {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    border-radius: 0;
  }

  .nav-cta {
    display: none;
  }
}

@media (max-width: 640px) {
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .value-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 400px) {
  .value-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   PIXEL ART DECORATIEVE ICONEN
   Individuele transparante PNG-icoontjes als zwevende
   achtergrondaccenten. Enkel decoratief, nooit functioneel.
   ============================================================ */

/* ---- Basis klasse ---- */
.px-icon {
  position: absolute;
  pointer-events: none;
  user-select: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  z-index: 0;
  scale: 2;
  /* Muis-parallax (JS zet --px-mx/--px-my); los van transform-animaties */
  translate: calc(var(--px-mx, 0) * 1px) calc(var(--px-my, 0) * 1px);
}

/* Zorg dat content altijd boven de iconen staat */
.section-problem .container,
.section-how .container,
.section-about .container,
.section-faq .container,
.section-value .container {
  position: relative;
  z-index: 1;
}

/* ---- Float & animaties ---- */
.px-float {
  animation: px-float 7s ease-in-out infinite;
}

.px-float--slow {
  animation: px-float 11s ease-in-out infinite;
}

.px-float--alt {
  animation: px-float-alt 9s ease-in-out infinite;
}

.px-spin {
  animation: px-spin 16s linear infinite;
}

@keyframes px-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

@keyframes px-float-alt {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%       { transform: translateY(-10px) rotate(3deg); }
}

@keyframes px-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---- Hero (index.html, donkere achtergrond) ---- */
.px-hero-rocket {
  width: 150px;
  bottom: 16%;
  right: 15%;
  opacity: 0.72;
}

.px-hero-sparkle {
  width: 22px;
  top: 22%;
  right: 20%;
  opacity: 0.6;
  animation-delay: 1.5s;
}

.px-hero-cloud {
  width: 120px;
  top: 42%;
  right: 3%;
  opacity: 0.60;
  animation-delay: 3.5s;
}

/* ---- Probleem sectie (lichte achtergrond, heel subtiel) ---- */
.px-sad-bug {
  width: 100px;
  bottom: 1.5rem;
  right: 5.5rem;
  opacity: 0.80;
}

/* ---- Hoe het werkt sectie ---- */
.px-how-key {
  width: 30px;
  top: 5.5rem;
  right: 3.5rem;
  opacity: 0.2;
  animation-delay: 0.5s;
}

.px-how-wizzard {
  width: 200px;
  bottom: 5.5rem;
  left: 0.1rem;
  opacity: 0.6;
  animation-delay: 2.5s;
}

/* ---- Over Vintrix sectie ---- */
.px-alien-spider {
  width: 80px;
  top: 4.5rem;
  right: 4%;
  opacity: 0.26;
  animation-delay: 1s;
}

.px-about-heart {
  width: 40px;
  bottom: 2rem;
  left: 3.5%;
  opacity: 0.22;
  animation-delay: 3.2s;
}

/* ---- Waardecreatie sectie (donkere achtergrond) ---- */
.px-value-sparkle {
  width: 26px;
  top: 14%;
  right: 10%;
  opacity: 0.48;
  animation-delay: 0.8s;
}

.px-value-butterfly {
  width: 46px;
  bottom: 18%;
  left: 6%;
  opacity: 0.36;
  animation-delay: 2.2s;
}

/* ---- FAQ sectie ---- */
.px-faq-eye {
  width: 38px;
  top: 2.5rem;
  right: 3rem;
  opacity: 0.16;
}

/* ---- Oplossingen hero ---- */
.px-opl-drone {
  width: 80px;
  bottom: 18%;
  right: 6%;
  opacity: 0.65;
  animation-delay: 0s;
}

.px-opl-sparkle {
  width: 22px;
  top: 28%;
  right: 20%;
  opacity: 0.5;
  animation-delay: 1.8s;
}

.px-opl-ghost {
  width: 36px;
  bottom: 30%;
  right: 18%;
  opacity: 0.35;
  animation-delay: 3.5s;
}

/* ---- AI Strategie hero ---- */
.px-ai-wizzard {
  width: 80px;
  bottom: 16%;
  right: 7%;
  opacity: 0.68;
  animation-delay: 0s;
}

.px-ai-sparkle {
  width: 22px;
  top: 25%;
  right: 22%;
  opacity: 0.55;
  animation-delay: 2s;
}

.px-ai-alien {
  width: 36px;
  top: 32%;
  right: 14%;
  opacity: 0.38;
  animation-delay: 4s;
}

/* ---- Responsive: schaal of verberg op kleine schermen ---- */
@media (max-width: 768px) {
  /* Hero iconen kleiner op tablet */
  .px-hero-rocket,
  .px-opl-drone,
  .px-ai-wizzard {
    width: 52px;
    right: 4%;
    opacity: 0.55;
  }

  /* Achtergrondaccenten voor lichte secties weghalen */
  .px-hero-cloud,
  .px-problem-bug,
  .px-how-search,
  .px-how-loading,
  .px-about-heart,
  .px-faq-eye {
    display: none;
  }
}

@media (max-width: 480px) {
  /* Op kleine telefoons ook de hero-decoraties weghalen */
  .px-hero-rocket,
  .px-hero-sparkle,
  .px-opl-drone,
  .px-opl-sparkle,
  .px-opl-ghost,
  .px-ai-wizzard,
  .px-ai-sparkle,
  .px-ai-alien,
  .px-about-smiley,
  .px-value-butterfly,
  .px-value-sparkle {
    display: none;
  }
}

/* ============================================================
   Cookie consent banner
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 1000;
  background: linear-gradient(145deg, var(--color-indigo) 0%, #1A0460 60%, #2A0580 100%);
  color: var(--color-white);
  border: 1px solid rgba(68, 225, 242, 0.28);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(17, 2, 115, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.05);
  padding: 1.25rem 1.5rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cookie-banner--visible {
  opacity: 1;
  transform: translateY(0);
}

.cookie-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  max-width: var(--container-max);
  margin-inline: auto;
}

.cookie-banner-text {
  flex: 1 1 360px;
  min-width: 0;
}

.cookie-banner-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-cyan);
  letter-spacing: 0.02em;
  margin: 0 0 0.4rem;
  max-width: none;
}

.cookie-banner-desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
  max-width: none;
}

.cookie-banner-link {
  color: var(--color-cyan);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.cookie-banner-link:hover,
.cookie-banner-link:focus-visible {
  color: var(--color-lime);
}

.cookie-banner-actions {
  display: flex;
  gap: 0.65rem;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.cookie-btn {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
  white-space: nowrap;
  min-width: 120px;
}

.cookie-btn:focus-visible {
  outline: 3px solid var(--color-cyan);
  outline-offset: 2px;
}

.cookie-btn--accept {
  background: var(--color-lime);
  color: var(--color-indigo);
}

.cookie-btn--accept:hover {
  background: #F0FF2A;
  transform: translateY(-1px);
}

.cookie-btn--decline {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.45);
}

.cookie-btn--decline:hover {
  border-color: var(--color-cyan);
  color: var(--color-cyan);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .cookie-banner {
    padding: 1rem;
  }

  .cookie-banner-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .cookie-banner-text {
    flex: 0 0 auto;
  }

  .cookie-banner-actions {
    width: 100%;
  }

  .cookie-btn {
    flex: 1;
    text-align: center;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: opacity 0.01ms linear;
    transform: none;
  }
}

/* ============================================================
   Homepage: ingedikte dienstenkaarten + testimonial
   ============================================================ */
.dienst-card h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-indigo);
  margin: 0 0 0.4rem;
}
.dienst-card .card-link {
  display: inline-block;
  margin-top: 0.85rem;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-purple);
}
.dienst-card .card-link:hover { text-decoration: underline; }

.diensten-outro {
  margin-top: 2.25rem;
  font-size: 1rem;
  color: var(--color-text);
  max-width: 60ch;
}
.diensten-outro a { color: var(--color-purple); font-weight: 600; }

/* Testimonial */
.section-testimonial { background: var(--color-white); }
.testimonial-card {
  position: relative;
  max-width: 760px;
  margin: 2rem auto 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  overflow: hidden;
}
.testimonial-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--grad-bar);
}
.testimonial-card blockquote {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-indigo);
  margin: 0 0 1.5rem;
}
.testimonial-card figcaption { display: flex; flex-direction: column; gap: 0.2rem; }
.testimonial-name { font-family: var(--font-heading); font-weight: 700; color: var(--color-indigo); }
.testimonial-meta { font-size: 0.9rem; color: var(--color-text-muted); }
.testimonial-meta a { color: var(--color-purple); font-weight: 600; }