/* ==========================================================================
   MoveVolt — theme.css  ·  STOER / VET / DONKER redesign
   Tokens, reset/base, typografie, layout, header, knoppen, badges, footer.
   Diep-zwarte basis (#0A0C10) · felle volt-glow · GROTE vette display-type ·
   compacter ritme (minder witruimte). Urban performance, geen boetiek.
   Mobiel-first, WCAG AA (lichte tekst op donker), prefers-reduced-motion. Geen frameworks.
   Alle token-NAMEN en class-namen blijven gelijk (HTML/rich.css/integration.css bouwen erop);
   alleen WAARDEN + styling zijn gewijzigd.
   ========================================================================== */

/* ---------- B. Design-tokens (zelfde NAMEN, donkere WAARDEN) -------------- */
:root{
  /* LICHT & RUIM PREMIUM (à la Apple/VanMoof). --bg = warme off-white, --surface = wit
     kaartvlak, --ink = bijna-zwart (AA op licht), --line = zeer lichte rand. */
  --bg:#F6F7F9; --ink:#0E1116; --ink-2:#5B6675; --line:#E7EAEF; --surface:#FFFFFF;
  --night:#EEF1F5; --night-2:#FFFFFF;            /* 'lifted'/alt-secties = licht-grijs/wit */
  /* Teal-accent, dieper zodat het AA-leesbaar is op wit; -300 = tekst-accent (donker genoeg). */
  --volt:#00B58F; --volt-600:#00795F; --volt-300:#00795F; --volt-glow:rgba(0,181,143,.16);
  --lime:#7CB400;                                /* 2e accent (spaarzaam) */
  --r:14px; --r-lg:20px; --r-full:999px;
  --sh:0 10px 30px rgba(16,24,40,.08); --sh-cta:0 10px 26px rgba(0,181,143,.22);
  --container:1240px; --font-display:"Clash Display","Hanken Grotesk",sans-serif; --font-body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;

  /* Afgeleide helpers (a11y/consistentie/glow). Tekst-tokens nu LICHT op donker. */
  --ink-on-night:#0E1116;        /* tekst op licht-grijze/alt-secties = donker   */
  --muted-on-night:#5B6675;
  --line-on-night:rgba(14,17,22,.09);
  --surface-2:#FFFFFF;           /* 2e kaart-/blokvlak                           */
  --surface-3:#EEF1F5;           /* alt-sectie = licht-grijs (contrast met wit)  */
  --media:#F1F4F8;               /* zeer licht vlak achter productfoto's         */
  --media-2:#E6EBF1;
  --surge:#FF5A36; --surge-2:#FF7A4D; --surge-glow:rgba(255,90,54,.18); /* warm accent */
  --focus:#0A84FF;               /* zichtbare focus-ring (blauw)                 */
  --maxw-prose:62ch;
  /* Compacter verticaal ritme — minder witruimte, vollere secties */
  --space:clamp(48px,6vw,84px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* Schaduw-/glow-schaal (diep op donker; gloed i.p.v. zachte drop) */
  --sh-xs:0 1px 2px rgba(16,24,40,.05);
  --sh-sm:0 2px 8px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --sh-md:0 10px 28px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.05);
  --sh-lg:0 22px 50px rgba(16,24,40,.10), 0 6px 14px rgba(16,24,40,.06);
  --sh-xl:0 36px 80px rgba(16,24,40,.12), 0 12px 26px rgba(16,24,40,.07);
  --sh-card-hover:0 24px 54px rgba(16,24,40,.14), 0 0 0 1px rgba(0,181,143,.25);
  --ring-volt:0 0 0 1px rgba(0,181,143,.40);
  --glow-volt:0 0 0 5px var(--volt-glow);
  --glow-volt-strong:0 0 0 1px rgba(0,181,143,.5), 0 8px 24px rgba(0,181,143,.18);

  /* Icoon-tokens (inline SVG → CSS-mask; kleur via mask = currentColor/volt waar gezet). */
  --ico-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --ico-truck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h1'/%3E%3Cpath d='M14 9h4l4 4v4a1 1 0 0 1-1 1h-1'/%3E%3Ccircle cx='7.5' cy='18.5' r='2'/%3E%3Ccircle cx='17.5' cy='18.5' r='2'/%3E%3C/svg%3E");
  --ico-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --ico-bolt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z'/%3E%3C/svg%3E");
  --ico-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E");
  --ico-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --ico-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
  --ico-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* ---------- Reset / base ------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:84px;
  overflow-x:clip;
  background:var(--bg);              /* voorkomt witte flits buiten body */
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video,canvas,picture{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
table{border-collapse:collapse;width:100%}
:where(h1,h2,h3,h4){overflow-wrap:break-word}

/* Zichtbare focus voor toetsenbord-navigatie */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:6px;
}

/* Skip-link */
.vw-skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--volt);color:var(--night);padding:12px 18px;border-radius:0 0 12px 0;
  font-weight:700;
}
.vw-skip:focus{left:0}

/* ---------- Typografie — GROOT, VET, STRAK ------------------------------- */
h1,h2,h3,h4,.vw-display{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.03em;
  color:var(--ink);
  text-wrap:balance;
}
h1,.vw-h1{font-size:clamp(2.6rem,6vw,4.9rem);font-weight:700;letter-spacing:-.035em;line-height:.98}
h2,.vw-h2{font-size:clamp(2rem,4.2vw,3.4rem);font-weight:700;line-height:1.02;letter-spacing:-.03em}
h3,.vw-h3{font-size:clamp(1.35rem,2.1vw,1.8rem);font-weight:700;line-height:1.14;letter-spacing:-.02em}
h4,.vw-h4{font-size:1.1rem;font-weight:700;letter-spacing:-.01em}
p{max-width:var(--maxw-prose)}
.vw-lead{font-size:clamp(1.1rem,1.55vw,1.36rem);line-height:1.55;color:var(--ink-2);text-wrap:pretty;font-weight:400}
small,.vw-small{font-size:.825rem;line-height:1.5}
strong,b{font-weight:700}

/* Eyebrow: klein, uppercase, volt-getint label boven een kop */
.vw-eyebrow{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-display);
  font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--volt-300);
}
.vw-eyebrow::before{
  content:"";width:26px;height:2px;border-radius:2px;
  background:var(--volt);box-shadow:0 0 10px var(--volt-glow);
}
.vw-on-night .vw-eyebrow,.vw-section--night .vw-eyebrow{color:var(--volt-300)}

/* Tekst-accent: op donker mag volt-300 wél als accenttekst (15.7:1) */
.vw-accent{color:var(--volt-300)}
.vw-section--night .vw-accent,.vw-on-night .vw-accent{color:var(--volt-300)}
.vw-underline{
  background-image:linear-gradient(var(--volt),var(--volt));
  background-size:100% 3px;background-repeat:no-repeat;background-position:0 92%;
  padding-bottom:.04em;
}

/* ---------- Layout ------------------------------------------------------- */
.vw-container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(18px,5vw,40px);
}
.vw-container--narrow{max-width:900px}

.vw-section{
  padding-block:var(--space);
  position:relative;
}
.vw-section--tight{padding-block:clamp(32px,4.5vw,56px)}
.vw-section--bg{background:var(--bg)}
.vw-section--surface{
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(0,230,184,.06), transparent 55%),
    var(--surface-3);
}
.vw-section--night{
  background:var(--night);
  color:var(--ink-on-night);
}
.vw-section--night h1,.vw-section--night h2,
.vw-section--night h3,.vw-section--night h4{color:var(--ink)}
.vw-section--night p,.vw-section--night .vw-lead{color:var(--muted-on-night)}
/* Alternerende sectie — donker met volt-gloed-hoek + glow-scheidingslijn */
.vw-section--alt{
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(0,230,184,.07), transparent 55%),
    radial-gradient(100% 80% at 100% 100%, rgba(255,94,58,.05), transparent 60%),
    var(--surface-3);
  border-block:1px solid var(--line);
}
/* Glow-hairline bovenaan elke donkere sectie-overgang (subtiel merk-signaal) */
.vw-section--glowtop{border-top:1px solid transparent}
.vw-section--glowtop::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--volt) 30%,var(--volt-300) 50%,var(--volt) 70%,transparent);
  opacity:.55;
}

/* ---------- Pagehead (catalogus/merk/PDP-kop) — donker + glow ----------- */
.vw-pagehead{
  position:relative;
  padding-block:clamp(40px,5.5vw,72px) clamp(18px,2.5vw,28px);
  background:
    radial-gradient(80% 150% at 6% -20%, rgba(0,230,184,.16), transparent 55%),
    radial-gradient(70% 120% at 100% 0%, rgba(255,94,58,.07), transparent 55%),
    linear-gradient(180deg,var(--night), var(--bg));
  border-bottom:1px solid var(--line);
}
.vw-pagehead--slim{padding-block:clamp(20px,2.5vw,30px) 0;background:none;border:0}
.vw-pagehead h1{margin-top:.5rem;font-size:clamp(2.2rem,4.6vw,3.5rem)}
.vw-pagehead > .vw-container > p,
.vw-pagehead p{margin-top:.7rem;color:var(--ink-2);font-size:clamp(1rem,1.3vw,1.18rem);max-width:62ch}

/* Sectie-kop blokje */
.vw-section__head{max-width:760px;margin-bottom:clamp(22px,3vw,38px)}
.vw-section__head--center{margin-inline:auto;text-align:center}
.vw-section__head .vw-lead{margin-top:.6em}

/* Responsief auto-grid — DICHTER (kleinere gaps) */
.vw-grid{
  display:grid;
  gap:clamp(14px,1.8vw,22px);
  grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));
}
.vw-grid--2{--cols:2}
.vw-grid--3{--cols:3}
.vw-grid--4{--cols:4}
/* Auto-fit kaartraster (catalogus): vollere grid → kleinere min-kolom */
.vw-grid--auto{
  grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));
}
@media (max-width:960px){
  .vw-grid--4{--cols:2}
  .vw-grid--3{--cols:2}
}
@media (max-width:560px){
  .vw-grid--2,.vw-grid--3,.vw-grid--4{--cols:1}
}

/* Utility-helpers */
.vw-stack{display:flex;flex-direction:column;gap:1rem}
.vw-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.vw-center{text-align:center}
.vw-mt-0{margin-top:0}
.vw-hide{display:none !important}
@media (max-width:760px){ .vw-hide\@mob{display:none !important} }
@media (min-width:761px){ .vw-only-mob{display:none !important} }

/* ---------- Header (sticky + blur, donker) ------------------------------ */
.vw-header{
  position:sticky;top:0;z-index:100;
  background:rgba(7,9,12,.72);
  backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.vw-header.is-scrolled{
  background:rgba(7,9,12,.92);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.vw-header__inner{
  display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);
  min-height:66px;
}
.vw-nav{
  display:flex;align-items:center;gap:clamp(10px,1.6vw,26px);
  margin-right:auto;
}
@media (max-width:860px){
  .vw-header__inner > .vw-nav{display:none}
}
.vw-nav__brand{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-weight:700;font-size:1.32rem;letter-spacing:-.02em;
  color:var(--ink);margin-right:auto;
}
.vw-nav__brand .vw-mark{
  width:28px;height:28px;flex:0 0 auto;
  border-radius:8px;
  background:linear-gradient(135deg,var(--volt-300),var(--volt-600));
  box-shadow:0 0 18px var(--volt-glow);
}
.vw-nav__links{
  display:flex;align-items:center;gap:clamp(4px,1.4vw,22px);
}
.vw-nav__link{
  position:relative;
  display:inline-flex;align-items:center;min-height:44px;
  font-weight:600;font-size:.95rem;color:var(--ink-2);
  padding:.5rem .3rem;
  letter-spacing:.005em;
  transition:color .18s var(--ease);
}
.vw-nav__link::after{
  content:"";position:absolute;left:.25rem;right:.25rem;bottom:.15rem;height:2px;
  background:var(--volt);border-radius:2px;box-shadow:0 0 8px var(--volt-glow);
  transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease);
}
.vw-nav__link:hover,.vw-nav__link[aria-current="page"]{color:var(--ink)}
.vw-nav__link:hover::after,.vw-nav__link[aria-current="page"]::after{transform:scaleX(1)}

.vw-nav__actions{display:flex;align-items:center;gap:.4rem}
.vw-iconbtn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-full);
  color:var(--ink);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.vw-iconbtn:hover{background:rgba(255,255,255,.09)}
.vw-iconbtn:active{transform:scale(.94)}
.vw-iconbtn svg{width:21px;height:21px}
.vw-iconbtn{font-size:1.18rem;line-height:1}

/* Hamburger */
.vw-menu-toggle{flex-direction:column;gap:5px}
.vw-menu-toggle span{
  display:block;width:20px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .28s var(--ease),opacity .2s var(--ease);
}
.vw-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.vw-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.vw-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (min-width:861px){ .vw-menu-toggle{display:none} }
/* Teller-bolletje op cart-knop — volt-glow */
.vw-iconbtn__count{
  position:absolute;top:4px;right:3px;
  min-width:18px;height:18px;padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.68rem;font-weight:800;line-height:1;
  color:var(--night);background:var(--volt);
  border-radius:var(--r-full);border:2px solid var(--night);
  box-shadow:0 0 12px var(--volt-glow);
  transform:scale(0);transition:transform .2s var(--ease);
}
.vw-iconbtn__count[data-cart-count]:not(:empty){transform:scale(1)}

/* Taalswitch */
.vw-langswitch{
  display:inline-flex;align-items:center;gap:2px;
  padding:3px;border-radius:var(--r-full);
  background:rgba(255,255,255,.07);
  border:1px solid var(--line-on-night);
}
.vw-langswitch a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:32px;padding:0 8px;
  font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-2);border-radius:var(--r-full);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.vw-langswitch a:hover{color:var(--ink)}
.vw-langswitch a[aria-current="true"],
.vw-langswitch a.is-active{
  background:var(--volt);color:var(--night);
  box-shadow:0 0 12px var(--volt-glow);
}

/* Header light-variant alias — nu óók donker (hele site is donker) */
.vw-header--dark{background:rgba(7,9,12,.72)}
.vw-header--dark.is-scrolled{background:rgba(7,9,12,.94);border-bottom-color:var(--line)}
.vw-header--dark .vw-nav__brand,
.vw-header--dark .vw-iconbtn{color:var(--ink)}
.vw-header--dark .vw-nav__link{color:var(--ink-2)}
.vw-header--dark .vw-nav__link:hover,
.vw-header--dark .vw-nav__link[aria-current="page"]{color:var(--ink)}
.vw-header--dark .vw-iconbtn:hover{background:rgba(255,255,255,.1)}
.vw-header--dark .vw-langswitch{background:rgba(255,255,255,.07)}
.vw-header--dark .vw-langswitch a{color:var(--ink-2)}
.vw-header--dark .vw-langswitch a[aria-current="true"]{background:var(--volt);color:var(--night)}

@media (max-width:560px){
  .vw-nav{min-height:56px}
  .vw-nav__actions{gap:.1rem}
  .vw-nav .vw-langswitch{display:none}
}

/* ---------- Knoppen — vet, glow ----------------------------------------- */
.vw-btn{
  --btn-bg:var(--surface-2);
  --btn-fg:#fff;
  --btn-bd:var(--line);
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:48px;
  padding:.78em 1.6em;
  font-family:var(--font-display);
  font-weight:700;font-size:1rem;line-height:1;letter-spacing:.005em;
  color:var(--btn-fg);
  background:var(--btn-bg);
  border:1px solid var(--btn-bd);
  border-radius:var(--r-full);
  cursor:pointer;white-space:nowrap;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),
             background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.vw-btn svg{width:1.2em;height:1.2em;flex:0 0 auto}
.vw-btn:active{transform:translateY(1px)}
.vw-btn:hover{border-color:rgba(255,255,255,.28);box-shadow:var(--sh-sm)}

/* CTA: feller volt-vlak met DONKERE (night) tekst + zware glow + sweep.
   night-op-volt = 12.3 → ruim AA. */
.vw-btn--cta{
  --btn-bg:var(--volt);
  --btn-fg:var(--night);
  --btn-bd:transparent;
  position:relative;
  background:linear-gradient(135deg,var(--volt-300),var(--volt) 55%,var(--volt-600));
  box-shadow:0 10px 30px var(--volt-glow), 0 0 24px var(--volt-glow), inset 0 1px 0 rgba(255,255,255,.45);
  font-weight:800;letter-spacing:.01em;
  overflow:hidden;
}
.vw-btn--cta::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s var(--ease-out);
}
.vw-btn--cta:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 46px var(--volt-glow), 0 0 40px var(--volt-glow), inset 0 1px 0 rgba(255,255,255,.55);
  background:linear-gradient(135deg,var(--volt),var(--volt-600));
}
.vw-btn--cta:hover::after{transform:translateX(120%)}
.vw-btn--cta:active{transform:translateY(0)}

/* Ghost: lijn-knop op donker */
.vw-btn--ghost{
  --btn-bg:rgba(255,255,255,.04);
  --btn-fg:#fff;
  --btn-bd:var(--line-on-night);
}
.vw-btn--ghost:hover{
  --btn-bd:rgba(255,255,255,.55);
  background:rgba(255,255,255,.1);
}
.vw-section--night .vw-btn--ghost,.vw-on-night .vw-btn--ghost{
  --btn-fg:#fff;--btn-bd:var(--line-on-night);background:rgba(255,255,255,.04);
}
.vw-section--night .vw-btn--ghost:hover,.vw-on-night .vw-btn--ghost:hover{
  --btn-bd:rgba(255,255,255,.55);background:rgba(255,255,255,.1);
}

/* Dark alias → op donkere site een lichte massieve knop (wit vlak, donkere tekst) */
.vw-btn--dark{
  --btn-bg:#fff;
  --btn-fg:var(--night);
  --btn-bd:transparent;
  font-weight:800;
}
.vw-btn--dark:hover{--btn-bg:#E8EDF3;box-shadow:var(--sh-sm)}

.vw-btn--sm{min-height:44px;padding:.55em 1.1em;font-size:.875rem}
.vw-btn--block{width:100%}

/* ---------- Badge / chip / pill ----------------------------------------- */
.vw-badge{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.34em .72em;
  font-family:var(--font-display);
  font-weight:800;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--night);
  background:var(--volt);
  border-radius:var(--r-full);
  line-height:1;
  box-shadow:0 0 16px var(--volt-glow);
}
.vw-badge--ink{background:#fff;color:var(--night);box-shadow:none}
.vw-badge--lime{background:var(--lime);color:var(--night);box-shadow:0 0 16px rgba(198,241,53,.35)}
.vw-badge--surge{background:var(--surge);color:var(--ink);box-shadow:0 0 16px var(--surge-glow)}
.vw-badge--soft{background:rgba(0,230,184,.16);color:var(--volt-300);box-shadow:none}
.vw-badge--legal{background:rgba(0,230,184,.16);color:var(--volt-300);box-shadow:none}
.vw-badge--ghost{background:rgba(255,255,255,.05);color:var(--ink-2);border:1px solid var(--line);box-shadow:none}

/* Chip: filter/keuze-element met actief-staat (donker) */
.vw-chip{
  display:inline-flex;align-items:center;gap:.45em;
  min-height:40px;padding:.5em 1.05em;
  font-size:.875rem;font-weight:600;
  color:var(--ink-2);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-full);
  cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease),box-shadow .2s var(--ease);
}
.vw-chip:hover{border-color:rgba(255,255,255,.3);color:var(--ink)}
.vw-chip.is-active,.vw-chip[aria-pressed="true"]{
  background:var(--volt);color:var(--night);border-color:transparent;font-weight:700;
  box-shadow:0 0 18px var(--volt-glow);
}
.vw-chip__x{font-size:1.1em;line-height:1;opacity:.7}

/* Pill: neutrale info-tag (specs, segment) */
.vw-pill{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.4em .8em;
  font-size:.8rem;font-weight:600;
  color:var(--ink);
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius:var(--r-full);
  line-height:1.1;
}
.vw-pill svg{width:1.05em;height:1.05em;color:var(--volt-300)}
.vw-section--night .vw-pill,.vw-on-night .vw-pill{
  color:var(--ink-on-night);background:rgba(255,255,255,.06);border-color:var(--line-on-night);
}

/* ---------- Footer (diep zwart + glow) ---------------------------------- */
.vw-footer{
  position:relative;
  background:
    radial-gradient(70% 130% at 100% 0%, rgba(0,230,184,.10), transparent 55%),
    radial-gradient(60% 120% at 0% 0%, rgba(255,94,58,.06), transparent 55%),
    var(--night);
  color:var(--ink-on-night);
  padding-block:clamp(48px,6vw,80px) 0;
  border-top:1px solid var(--line);
}
.vw-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--volt) 30%,var(--volt-300) 50%,var(--volt) 70%,transparent);
  opacity:.7;
}

/* FOOTER-FIX: vast, voorspelbaar grid. Merk-kolom breder, dan 4 gelijke
   link-kolommen die op élke breedte netjes uitlijnen (geen losse 5e die wegvalt). */
.vw-footer__grid{
  display:grid;
  grid-template-columns:1.6fr repeat(4,minmax(0,1fr));
  gap:clamp(24px,3vw,48px);
  padding-bottom:clamp(36px,4.5vw,56px);
  align-items:start;
}
@media (max-width:1080px){
  .vw-footer__grid{grid-template-columns:1.4fr repeat(2,minmax(0,1fr))}
  /* merk-kolom (1e) over de volle eerste rij zodat de 4 linkkolommen 2×2 vlak eronder uitlijnen */
  .vw-footer__grid > .vw-footer__col:first-child{grid-column:1 / -1;max-width:520px}
}
@media (max-width:560px){
  .vw-footer__grid{grid-template-columns:1fr 1fr}
  .vw-footer__grid > .vw-footer__col:first-child{grid-column:1 / -1}
}
@media (max-width:380px){
  .vw-footer__grid{grid-template-columns:1fr}
  .vw-footer__grid > .vw-footer__col:first-child{grid-column:auto}
}
.vw-footer__grid .vw-footer__col:first-child .vw-logo__txt{
  font-family:var(--font-display);font-weight:700;font-size:1.55rem;color:var(--ink);
  display:inline-block;margin-bottom:.9rem;
}
.vw-footer__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-block:1.5rem;margin-top:clamp(18px,2.5vw,28px);
  border-top:1px solid var(--line-on-night);
  color:var(--muted-on-night);font-size:.85rem;
}
.vw-footer__bar .vw-footer__pay{
  display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;
  font-size:.78rem;color:var(--ink-on-night);
}
.vw-footer__top{
  display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);
  gap:clamp(24px,3.5vw,48px);
  padding-bottom:clamp(36px,4.5vw,56px);
}
@media (max-width:880px){ .vw-footer__top{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .vw-footer__top{grid-template-columns:1fr} }

.vw-footer__brand{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--ink);
  margin-bottom:1rem;
}
.vw-footer__brand .vw-mark{
  width:28px;height:28px;border-radius:9px;
  background:linear-gradient(135deg,var(--volt-300),var(--volt-600));
  box-shadow:0 0 18px var(--volt-glow);
}
.vw-footer__about{color:var(--muted-on-night);max-width:38ch;line-height:1.6}

.vw-footer__col h4{
  font-family:var(--font-display);font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  margin-bottom:1.05rem;
}
.vw-footer__col ul{display:flex;flex-direction:column;gap:.65rem}
/* Links staan in deze build als DIRECTE kinderen van .vw-footer__col (geen <ul><li>),
   dus forceer block + eigen ritme zodat ze netjes onder elkaar staan i.p.v. aaneen. */
.vw-footer__col > a{
  display:block;
  color:var(--muted-on-night);font-size:.95rem;line-height:1.4;
  padding-block:.32rem;
  transition:color .18s var(--ease);
}
.vw-footer__col ul a{display:inline-block;padding-block:0}
.vw-footer__col a{color:var(--muted-on-night);transition:color .18s var(--ease)}
.vw-footer__col a:hover{color:var(--volt-300)}

.vw-footer__bottom{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-block:1.4rem;
  border-top:1px solid var(--line-on-night);
  color:var(--muted-on-night);font-size:.85rem;
}
.vw-footer__legal{display:flex;gap:1.2rem;flex-wrap:wrap}
.vw-footer__legal a{color:var(--muted-on-night)}
.vw-footer__legal a:hover{color:var(--ink)}

.vw-footer__pay{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.vw-footer__pay span{
  display:inline-flex;align-items:center;justify-content:center;
  height:30px;padding:0 10px;border-radius:7px;
  background:rgba(255,255,255,.07);color:var(--ink-on-night);
  border:1px solid var(--line-on-night);
  font-size:.72rem;font-weight:700;letter-spacing:.03em;
}

/* ---------- Reveal-basis (CSS-only failsafe, eindigt altijd zichtbaar) --- */
@keyframes vw-reveal-in{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}
[data-reveal]{
  opacity:0;transform:translateY(22px);
  animation:vw-reveal-in .7s var(--ease-out) .12s forwards;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  will-change:opacity,transform;
}
[data-reveal].is-in,[data-reveal].is-visible{opacity:1;transform:none;animation:none}
[data-reveal][data-reveal-delay="1"]{transition-delay:.08s;animation-delay:.20s}
[data-reveal][data-reveal-delay="2"]{transition-delay:.16s;animation-delay:.28s}
[data-reveal][data-reveal-delay="3"]{transition-delay:.24s;animation-delay:.36s}
[data-reveal][data-reveal-delay="4"]{transition-delay:.32s;animation-delay:.44s}

/* ==========================================================================
   COMPAT-LAAG — alias-classes uit de build-template op de donkere look.
   ========================================================================== */
.vw-logo{
  display:inline-flex;align-items:center;gap:.5rem;margin-right:auto;
  font-family:var(--font-display);font-weight:700;font-size:1.32rem;letter-spacing:-.02em;color:var(--ink);
}
.vw-logo__mark{
  width:28px;height:28px;flex:0 0 auto;border-radius:8px;
  background:linear-gradient(135deg,var(--volt-300),var(--volt-600));box-shadow:0 0 18px var(--volt-glow);
}
.vw-logo__txt{font-family:var(--font-display);font-weight:700}
.vw-header--dark .vw-logo{color:var(--ink)}

.vw-header__actions{display:flex;align-items:center;gap:.4rem}
@media (max-width:560px){ .vw-header__actions{gap:.1rem} }

.vw-lang{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:32px;padding:0 8px;
  font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-2);border-radius:var(--r-full);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.vw-lang:hover{color:var(--ink)}
.vw-lang.is-active{background:var(--volt);color:var(--night);box-shadow:0 0 12px var(--volt-glow)}
.vw-header--dark .vw-lang{color:var(--ink-2)}
.vw-header--dark .vw-lang.is-active{background:var(--volt);color:var(--night)}

.vw-sectionhead{max-width:760px;margin-bottom:clamp(22px,3vw,38px)}
.vw-sectionhead .vw-lead,.vw-sectionhead p{margin-top:.6em;color:var(--ink-2)}
.vw-kicker{
  display:inline-flex;align-items:center;gap:.55em;margin-bottom:.7rem;
  font-family:var(--font-display);font-weight:700;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--volt-300);
}
.vw-kicker::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--volt);box-shadow:0 0 10px var(--volt-glow)}
.vw-section--night .vw-kicker,.vw-on-night .vw-kicker{color:var(--volt-300)}

.vw-cart__count{
  position:absolute;top:4px;right:3px;min-width:18px;height:18px;padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.68rem;font-weight:800;line-height:1;color:var(--night);background:var(--volt);
  border-radius:var(--r-full);border:2px solid var(--night);
  box-shadow:0 0 12px var(--volt-glow);
}
.vw-cart__count:empty{display:none}
.vw-cart__items{display:flex;flex-direction:column;gap:1rem}

.vw-search__input{
  flex:1;border:0;outline:none;background:none;font-size:1.15rem;color:var(--ink);padding:.4rem 0;
}
.vw-search__results{margin-top:.4rem;display:flex;flex-direction:column;gap:.25rem}
.vw-mobilemenu{
  position:fixed;top:0;right:0;z-index:150;height:100dvh;width:min(380px,92vw);
  display:flex;flex-direction:column;gap:.1rem;background:var(--night-2);
  border-left:1px solid var(--line);
  box-shadow:-24px 0 80px rgba(0,0,0,.7);
  transform:translateX(100%);visibility:hidden;
  transition:transform .38s var(--ease-out),visibility .38s var(--ease-out);
  padding:calc(66px + 1.1rem) 1.4rem 1.4rem;
  overflow-y:auto;
}
.vw-mobilemenu.is-open{transform:translateX(0);visibility:visible}
.vw-mobilemenu .vw-nav__link{
  display:flex;align-items:center;justify-content:space-between;
  padding:.95rem .25rem;min-height:52px;width:100%;
  font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--ink);
  border-bottom:1px solid var(--line);
}
.vw-mobilemenu .vw-nav__link::after{display:none}
.vw-mobilemenu .vw-nav__link::before{
  content:"→";margin-left:auto;order:2;color:var(--volt-300);font-size:1rem;
  opacity:0;transform:translateX(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.vw-mobilemenu .vw-nav__link:hover{color:var(--volt-300)}
.vw-mobilemenu .vw-nav__link:hover::before{opacity:1;transform:none}

.vw-merk-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.vw-merk-logo{
  display:inline-flex;align-items:center;justify-content:center;height:38px;flex:0 0 auto;
  color:var(--ink-2);font-family:var(--font-display);font-weight:700;font-size:1.15rem;
  opacity:.7;transition:opacity .2s var(--ease),color .2s var(--ease);
}
.vw-merk-logo:hover{opacity:1;color:var(--ink)}
.vw-section--night .vw-merk-logo{color:var(--muted-on-night)}
.vw-section--night .vw-merk-logo:hover{color:var(--ink)}

/* Segment-cards (donker, hover-glow) */
.vw-segrow{
  display:grid;gap:clamp(12px,1.6vw,16px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));
}
.vw-segcard{
  position:relative;display:flex;align-items:center;gap:.85rem;
  padding:1.1rem 1.2rem;min-height:72px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
  color:var(--ink);font-family:var(--font-display);font-weight:700;
  box-shadow:var(--sh-xs);overflow:hidden;
  transition:transform .26s var(--ease-out),box-shadow .3s var(--ease),border-color .22s var(--ease);
}
.vw-segcard::before{
  content:"";position:absolute;inset:auto 0 0 0;height:0;z-index:0;
  background:linear-gradient(180deg,transparent,rgba(0,230,184,.14));
  transition:height .3s var(--ease-out);
}
.vw-segcard > *{position:relative;z-index:1}
.vw-segcard strong{font-weight:700;font-size:1.02rem;line-height:1.2;color:var(--ink)}
.vw-segcard:hover{transform:translateY(-4px);box-shadow:var(--sh-md),0 0 30px rgba(0,230,184,.15);border-color:rgba(0,230,184,.45)}
.vw-segcard:hover::before{height:100%}
.vw-segcard__n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 .45em;flex:0 0 auto;border-radius:12px;
  font-size:.95rem;font-weight:800;color:var(--night);
  background:linear-gradient(135deg,var(--volt-300),var(--volt));
  box-shadow:0 0 16px var(--volt-glow);
}
.vw-segcard__arrow{
  margin-left:auto;color:var(--volt-300);font-size:1.2rem;line-height:1;
  transition:transform .26s var(--ease-out);
}
.vw-segcard:hover .vw-segcard__arrow{transform:translateX(5px)}

/* ==========================================================================
   prefers-reduced-motion — zet ALLE beweging uit (eindeis §H)
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important;animation:none !important}
  .vw-segcard:hover{transform:none}
  .vw-segcard:hover .vw-segcard__arrow{transform:none}
  .vw-hero__eyebrow::before{animation:none !important}
  .vw-mobilemenu{transition:none !important}
}