/* =====================================================================
   enhance.css — "another level" laag bovenop style.css
   Doel: dezelfde merk-DNA (koper/teal, General Sans, void-black),
   maar rijkere typografie, atmosfeer, motion en een levende hero.
   Wordt ná style.css geladen; alleen additief / overschrijvend.
   ===================================================================== */

:root {
  /* Fluïde type-schaal — schaalt vloeiend tussen mobiel en desktop.
     Ondergrens bewust klein genoeg zodat lange NL-woorden op telefoon passen. */
  --step-hero: clamp(2rem, 1.15rem + 4.4vw, 4.3rem);
  --step-h2:   clamp(1.6rem, 1.1rem + 2.3vw, 2.95rem);
  --step-lead: clamp(1.02rem, 0.97rem + 0.32vw, 1.2rem);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ring: 0.5px solid rgba(255, 255, 255, 0.08);
}

/* ---------- Grain / filmische korrel over de hele pagina ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { body::after { opacity: 0.02; } }

/* ---------- Fluïde koppen ---------- */
h1 { font-size: var(--step-hero); line-height: 1.04; letter-spacing: -0.03em; }
h2 { font-size: var(--step-h2); letter-spacing: -0.02em; }
.hero p.lead { font-size: var(--step-lead); }
/* Overflow-veiligheid: lange woorden breken i.p.v. de pagina breder duwen */
h1, h2, h3 { overflow-wrap: break-word; }
body { overflow-x: clip; }

/* Koper-accent krijgt een subtiele glans i.p.v. platte kleur */
h1 .accent {
  background: linear-gradient(180deg, #f0c48a 0%, var(--color-live-wire) 55%, #b9834a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Header: fijnere scroll-staat ---------- */
header { transition: background 0.3s ease, border-color 0.3s ease; }
header.scrolled { background: rgba(0,0,0,0.72); border-bottom-color: rgba(255,255,255,0.10); }
nav.main a { position: relative; transition: opacity 0.2s ease; }
nav.main a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--color-signal-violet); transform: scaleX(0); transform-origin: left;
  transition: transform 0.28s var(--ease-out-expo);
}
nav.main a:hover::after, nav.main a.current::after { transform: scaleX(1); }
nav.main a.current { opacity: 1; }

/* ---------- CTA-knop: koperen glans die overheen strijkt ---------- */
.btn-cta { position: relative; overflow: hidden; }
.btn-cta::before {
  content: ""; position: absolute; top: 0; left: -130%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg); transition: none;
}
.btn-cta:hover::before { animation: sheen 0.9s var(--ease-out-expo); }
@keyframes sheen { to { left: 140%; } }
.btn { transition: transform 0.18s var(--ease-out-expo), box-shadow 0.25s ease; }

/* =====================================================================
   HERO — levende "orchestration console"
   ===================================================================== */
.hero { position: relative; padding-top: clamp(56px, 6vw, 96px); }

/* Status-eyebrow met live puls */
.hero .status-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-smoke);
  padding: 6px 14px 6px 12px; border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.10);
  background: rgba(20,22,23,0.5); backdrop-filter: blur(6px);
  margin-bottom: 26px;
}
.hero .status-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-circuit-teal);
  box-shadow: 0 0 0 0 rgba(79,182,161,0.6); animation: livePulse 1.9s ease-out infinite;
}
.hero .status-eyebrow b { color: var(--color-silver); font-weight: 500; letter-spacing: 0.02em; }

/* Staggered reveal bij paginalaad */
.hero .hero-text > * { opacity: 0; transform: translateY(16px); animation: heroIn 0.9s var(--ease-out-expo) forwards; }
.hero .hero-text > *:nth-child(1) { animation-delay: 0.05s; }
.hero .hero-text > *:nth-child(2) { animation-delay: 0.14s; }
.hero .hero-text > *:nth-child(3) { animation-delay: 0.23s; }
.hero .hero-text > *:nth-child(4) { animation-delay: 0.32s; }
.hero .console { opacity: 0; animation: heroIn 1s var(--ease-out-expo) 0.3s forwards; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero .hero-text > *, .hero .console { opacity: 1; transform: none; animation: none; }
}

/* Micro-trust rij onder de hero-knoppen */
.hero .trust-row {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 26px; font-size: 13px; color: var(--color-fog);
}
.hero .trust-row .t { display: inline-flex; align-items: center; gap: 8px; }
.hero .trust-row svg { width: 15px; height: 15px; color: var(--color-circuit-teal); }
.hero .trust-row .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--color-steel); }

/* ---- De console (vervangt de losse SVG-cirkel) ---- */
.console {
  position: relative;
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(79,182,161,0.10), transparent 55%),
    linear-gradient(180deg, rgba(20,22,23,0.9), rgba(11,12,14,0.92));
  box-shadow:
    inset 0 0 0 0.5px rgba(255,255,255,0.09),
    inset 0 1px 0 0 rgba(255,255,255,0.06),
    0 40px 90px -40px rgba(0,0,0,0.9);
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.console .con-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 0.5px solid var(--color-ash);
  background: rgba(14,15,17,0.6);
}
.console .con-dots { display: flex; gap: 6px; }
.console .con-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--color-steel); }
.console .con-name { font-family: var(--font-mono); font-size: 12px; color: var(--color-smoke); }
.console .con-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; color: var(--color-circuit-teal);
}
.console .con-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-circuit-teal);
  box-shadow: 0 0 0 0 rgba(79,182,161,0.6); animation: livePulse 1.9s ease-out infinite;
}
.console .con-stage { position: relative; padding: 26px 24px 22px; }
.console .flow-svg { width: 100%; height: auto; display: block; }

/* Terminal-achtige log-regels onderin de console */
.console .con-log {
  border-top: 0.5px solid var(--color-ash);
  padding: 14px 20px 18px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.9;
  color: var(--color-smoke);
  background: rgba(11,12,14,0.5);
}
.console .con-log .ln { display: flex; gap: 10px; opacity: 0; animation: logIn 0.5s ease forwards; }
.console .con-log .ln:nth-child(1) { animation-delay: 0.8s; }
.console .con-log .ln:nth-child(2) { animation-delay: 1.6s; }
.console .con-log .ln:nth-child(3) { animation-delay: 2.4s; }
.console .con-log .t { color: var(--color-fog); }
.console .con-log .ok { color: var(--color-circuit-teal); }
.console .con-log .cu { color: var(--color-live-wire); }
@keyframes logIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 0.95; transform: none; } }

/* Bewegende datapulsen over de flow-lijnen */
.flow-svg .edge { stroke: rgba(79,182,161,0.30); stroke-width: 1.5; fill: none; }
.flow-svg .pulse { fill: var(--color-circuit-teal); filter: drop-shadow(0 0 4px rgba(79,182,161,0.9)); }
.flow-svg .node-box {
  fill: rgba(14,15,17,0.9); stroke: rgba(255,255,255,0.12); stroke-width: 1;
}
.flow-svg .node-hub { fill: rgba(214,160,95,0.14); stroke: var(--color-live-wire); stroke-width: 1.5; }
.flow-svg .node-label { fill: var(--color-cloud); font-family: var(--font-mono); font-size: 11px; }
.flow-svg .node-ic { stroke: var(--color-circuit-teal); stroke-width: 1.5; fill: none; }
.flow-svg .hub-ic { stroke: var(--color-live-wire); stroke-width: 1.6; fill: none; }
@media (prefers-reduced-motion: reduce) { .flow-svg .pulse { display: none; } }

/* =====================================================================
   STATS — count-up + rand-accent
   ===================================================================== */
.features-grid.stats-grid .feature {
  position: relative;
  padding: 26px 22px 24px;
  border-radius: var(--radius-cards);
  background: linear-gradient(180deg, rgba(20,22,23,0.55), rgba(14,15,17,0.4));
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.06);
  overflow: hidden;
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
}
.features-grid.stats-grid .feature::before {
  content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 1px;
  background: linear-gradient(90deg, var(--color-live-wire), transparent 70%);
  opacity: 0.55;
}
.features-grid.stats-grid .feature:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 0.5px rgba(214,160,95,0.4), 0 22px 48px -26px rgba(0,0,0,0.85);
}
.feature .stat { display: flex; align-items: baseline; gap: 2px; }
.feature .stat .suffix { font-size: 0.55em; color: var(--color-live-wire); }

/* =====================================================================
   Nieuwe sectie: ORCHESTRATIE-PIJPLIJN
   ===================================================================== */
.pipeline .section-head { margin-bottom: 40px; }
.pipe-track {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  position: relative;
}
.pipe-step {
  position: relative; padding: 26px 22px;
  border-left: 0.5px solid var(--color-ash);
}
.pipe-step:first-child { border-left: none; }
.pipe-step .pi-num {
  font-family: var(--font-mono); font-size: 12px; color: var(--color-live-wire);
  letter-spacing: 0.08em; margin-bottom: 16px;
}
.pipe-step .pi-ic {
  width: 34px; height: 34px; color: var(--color-circuit-teal);
  margin-bottom: 16px;
}
.pipe-step h3 {
  font-family: var(--font-medium); font-weight: 500; font-size: 18px;
  color: var(--color-paper-white); letter-spacing: -0.02em; margin-bottom: 8px;
}
.pipe-step p { font-size: 14px; color: var(--color-silver); }
/* verbindingsstip die tussen de stappen "reist" */
.pipe-track::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-circuit-teal), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: pipeSweep 4s linear infinite; opacity: 0.7;
}
@keyframes pipeSweep { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { .pipe-track::after { animation: none; } }

/* =====================================================================
   Integratie-marquee
   ===================================================================== */
.integrations { padding: 54px 0; border-top: var(--ring); border-bottom: var(--ring); }
.integrations .label {
  text-align: center; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-smoke);
  margin-bottom: 30px;
}
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: inline-flex; gap: 64px; align-items: center; white-space: nowrap; animation: marquee 26s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track .item {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-medium); font-weight: 500; font-size: 17px;
  color: var(--color-cloud); opacity: 0.62; transition: opacity 0.2s ease;
}
.marquee-track .item:hover { opacity: 1; }
.marquee-track .item svg { width: 22px; height: 22px; color: var(--color-circuit-teal); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Section reveals verfijnd ---------- */
.reveal { transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo); }

/* =====================================================================
   SUBPAGINA'S — zelfde niveau als de homepage
   ===================================================================== */

/* Page-hero: fijne mono-decoratie + staggered reveal */
.page-hero .eyebrow-pill { animation: heroIn 0.7s var(--ease-out-expo) both; }
.page-hero h1 { animation: heroIn 0.8s var(--ease-out-expo) 0.06s both; }
.page-hero > .wrap > p { animation: heroIn 0.8s var(--ease-out-expo) 0.14s both; }
.page-hero .hero-actions { animation: heroIn 0.8s var(--ease-out-expo) 0.22s both; }
@media (prefers-reduced-motion: reduce) {
  .page-hero .eyebrow-pill, .page-hero h1, .page-hero > .wrap > p, .page-hero .hero-actions { animation: none; }
}

/* ---- Verrijkte feature-kaarten (diensten + werkwijze) ---- */
.enh-cards { gap: 18px; }
.enh-cards .feature {
  position: relative;
  padding: 30px 28px 28px;
  border-radius: var(--radius-cards);
  background: linear-gradient(180deg, rgba(20,22,23,0.6), rgba(14,15,17,0.45));
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.06);
  overflow: hidden;
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
}
.enh-cards .feature::before {
  content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 1px;
  background: linear-gradient(90deg, var(--color-circuit-teal), transparent 72%);
  opacity: 0.5;
}
.enh-cards .feature:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 0.5px rgba(108,195,176,0.4), 0 24px 50px -28px rgba(0,0,0,0.85);
}
.enh-cards .feature .ficon {
  width: 46px; height: 46px; padding: 11px; border-radius: 12px;
  background: rgba(79,182,161,0.12);
  box-shadow: inset 0 0 0 0.5px rgba(108,195,176,0.32);
  color: var(--color-circuit-teal);
  margin-bottom: 18px;
}

/* ---- Check-list als integratie-tegels (diensten) ---- */
.enh-checks { gap: 12px 14px !important; }
.enh-checks li {
  margin-bottom: 0 !important;
  padding: 16px 18px;
  border-radius: 11px;
  background: rgba(20,22,23,0.5);
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.06);
  transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s ease;
}
.enh-checks li:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 0.5px rgba(108,195,176,0.4);
}

/* ---- Werkwijze: stappen als verticale flow met rail ---- */
.flow-steps { position: relative; }
.flow-steps::before {
  content: ""; position: absolute; top: 40px; bottom: 40px; left: 58px;
  width: 2px; transform: translateX(-1px);
  background: linear-gradient(180deg, var(--color-live-wire), rgba(79,182,161,0.5) 42%, rgba(79,182,161,0.12));
  z-index: 0;
}
.flow-steps .step { position: relative; z-index: 1; align-items: flex-start; }
.flow-steps .step .num {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; min-width: 52px; border-radius: 50%;
  font-size: 19px;
  background: radial-gradient(circle at 50% 40%, rgba(214,160,95,0.16), var(--color-obsidian) 72%);
  box-shadow: inset 0 0 0 1px rgba(214,160,95,0.45);
}

/* ---- Portfolio: bewegende preview-thumbnails ---- */
.proj-card .proj-thumb::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.07) 50%, transparent 58%);
  transform: translateX(-120%);
}
.proj-card:hover .proj-thumb::after { animation: thumbShimmer 1.1s var(--ease-out-expo); }
@keyframes thumbShimmer { to { transform: translateX(120%); } }
.pt-flow .ptf-dot { animation: livePulse 1.9s ease-out infinite; }
.pt-route { animation: routeDash 3s linear infinite; }
@keyframes routeDash { to { stroke-dashoffset: -18; } }
@media (prefers-reduced-motion: reduce) {
  .proj-card:hover .proj-thumb::after, .pt-flow .ptf-dot, .pt-route { animation: none; }
}

/* ---- Contact: methode-kaarten ---- */
.contact-intro {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; color: var(--color-circuit-teal);
  padding: 6px 14px 6px 12px; border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 0.5px rgba(108,195,176,0.35);
  margin-bottom: 22px;
}
.contact-intro .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-circuit-teal);
  box-shadow: 0 0 0 0 rgba(79,182,161,0.6); animation: livePulse 1.9s ease-out infinite;
}
.contact-methods { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.contact-method {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(20,22,23,0.6), rgba(14,15,17,0.45));
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.06);
  text-decoration: none;
  transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s ease;
}
.contact-method:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 0.5px rgba(108,195,176,0.4), 0 20px 44px -26px rgba(0,0,0,0.85);
}
.contact-method .ic {
  width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
  background: rgba(79,182,161,0.12); box-shadow: inset 0 0 0 0.5px rgba(108,195,176,0.3);
  color: var(--color-circuit-teal); display: flex; align-items: center; justify-content: center;
}
.contact-method .ic svg { width: 20px; height: 20px; }
.contact-method > span:not(.ic) { display: flex; flex-direction: column; gap: 3px; }
.contact-method .cm-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-smoke); line-height: 1; }
.contact-method .cm-value { font-family: var(--font-medium); font-weight: 500; font-size: 16px; color: var(--color-paper-white); line-height: 1; }

/* Contact-pagina echt in twee kolommen (de basis-selector .showcase .wrap
   pakt de gecombineerde class .wrap.showcase niet, dus hier expliciet) */
.wrap.showcase { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .wrap.showcase { grid-template-columns: 1fr; gap: 32px; } }

/* ---- Diensten: maatwerk / op-aanvraag-blok ---- */
.custom-panel {
  position: relative;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center;
  padding: 48px;
  border-radius: 18px;
  background:
    radial-gradient(90% 130% at 6% 0%, rgba(214,160,95,0.13), transparent 56%),
    linear-gradient(180deg, rgba(20,22,23,0.72), rgba(14,15,17,0.55));
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.08), 0 40px 90px -50px rgba(0,0,0,0.9);
  overflow: hidden;
}
.cp-text .eyebrow-pill { margin-bottom: 20px; }
.cp-text h2 { line-height: 1.12; }
.cp-text p { margin-top: 18px; font-size: 16px; color: var(--color-silver); max-width: 520px; }
.cp-text .hero-actions { margin-top: 28px; }
.cp-points { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 0; }
.cp-points li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 20px; border-radius: 12px;
  background: rgba(11,12,14,0.5);
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.06);
  transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s ease;
}
.cp-points li:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 0.5px rgba(214,160,95,0.4); }
.cp-points .ic {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: rgba(214,160,95,0.12); box-shadow: inset 0 0 0 0.5px rgba(214,160,95,0.35);
  color: var(--color-live-wire); display: flex; align-items: center; justify-content: center;
}
.cp-points .ic svg { width: 20px; height: 20px; }
.cp-points b { display: block; font-family: var(--font-medium); font-weight: 500; font-size: 15px; color: var(--color-paper-white); margin-bottom: 3px; }
.cp-points span { font-size: 13.5px; color: var(--color-cloud); line-height: 1.5; }
@media (max-width: 900px) { .custom-panel { grid-template-columns: 1fr; gap: 30px; padding: 32px; } }
@media (max-width: 600px) { .custom-panel { padding: 26px 22px; } }

/* ---------- Responsive bijstellingen ---------- */
@media (max-width: 900px) {
  .pipe-track { grid-template-columns: repeat(2, 1fr); }
  .pipe-step:nth-child(3) { border-left: none; }
  .pipe-track::after { display: none; }
  .console { margin-top: 8px; }
  /* Grid-blowout fix: 1fr = minmax(auto,1fr) laat een kolom NIET krimpen onder de
     min-content van z'n inhoud (de console-SVG ~560px). minmax(0,1fr) wél. */
  .hero .wrap, .wrap.showcase { grid-template-columns: minmax(0, 1fr); }
  .hero .wrap > *, .wrap.showcase > * { min-width: 0; }
  .hero .console, .flow-svg { max-width: 100%; }
  .console .con-log { overflow-x: hidden; }
}
@media (max-width: 600px) {
  .pipe-track { grid-template-columns: 1fr; }
  .pipe-step { border-left: none; border-top: 0.5px solid var(--color-ash); }
  .pipe-step:first-child { border-top: none; }
  .hero .trust-row { gap: 12px; }
  .flow-steps::before { left: 44px; }
  .flow-steps .step .num { width: 44px; height: 44px; min-width: 44px; font-size: 17px; }
}

/* =====================================================================
   Prestaties op mobiel — zwaar-te-tekenen effecten uitzetten zodat een
   nieuwe pagina sneller en soepeler opbouwt (minder GPU/repaint-werk).
   De sfeer blijft: de mesh-gradient staat er nog, alleen niet meer
   continu geanimeerd; de grain-laag (mix-blend, duur) valt weg.
   ===================================================================== */
@media (max-width: 900px) {
  body::before { animation: none; filter: blur(46px) saturate(1.03); } /* mesh statisch + lichtere blur */
  body::after { display: none; }                                       /* grain-overlay uit (mix-blend duur) */
  .pipe-track::after { animation: none; }                              /* background-position-animatie = repaint */
  .marquee-track { animation-duration: 40s; }                          /* rustiger, minder compositing */
  .flow-svg .pulse { display: none; }                                  /* SMIL-pulsen uit op telefoon */
  .console { backdrop-filter: none; }                                  /* backdrop-blur is duur op mobiel */
  header { backdrop-filter: blur(10px); }                              /* iets lichtere header-blur */
}