/* =============================================
   STREAMPLUS — 12 nov 2026 (herontwerp)
   Bijna zwart, Outfit, één accent (magenta naar violet).
   Volgorde: hero, pakketten, hoe het werkt, vragen, afsluiter, voet.
============================================= */
:root {
  --bg: #08070b;
  --line: rgba(241, 237, 244, 0.08);
  --line-2: rgba(241, 237, 244, 0.14);
  --text: #f1edf4;
  --text-2: #d6d0dc;
  --muted: #a7a3b0;
  --subtle: #807b8b;
  --accent: #e325f5;
  --accent-soft: #e879ff;
  --grad: linear-gradient(180deg, #c523df 0%, #a315c8 100%);
  --violet: #5b21d6;
  --wa: #25d366;

  --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --head: 72px;
  --gutter: 32px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; border: 0; background: none; }
button { cursor: pointer; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 8px; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.defs { position: absolute; }

/* ---------- Kopbalk ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  height: calc(var(--head) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.nav.scrolled {
  background: rgba(8, 7, 11, 0.95); border-bottom-color: var(--line);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.nav-inner { height: 100%; display: flex; align-items: center; gap: 10px; }
.brand { display: inline-flex; align-items: center; gap: 11px; margin-right: auto; }
.brand img { width: 32px; height: 32px; flex: none; }
.wm { font-size: 23px; font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.wm b { font-weight: 600; color: var(--accent-soft); }
.nav-links { display: flex; gap: 36px; list-style: none; margin-right: 26px; }
.nav-links a { font-size: 15px; color: rgba(241, 237, 244, 0.72); transition: color .25s var(--ease); }
.nav-links a:hover { color: var(--text); }
.cart, .nav-wa {
  position: relative; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none;
  font-size: 20px; background: rgba(241, 237, 244, 0.06); border: 1px solid var(--line-2);
  transition: background .25s var(--ease), transform .2s var(--ease), opacity .3s var(--ease);
}
.cart:hover, .nav-wa:hover { background: rgba(241, 237, 244, 0.12); }
.cart:active, .nav-wa:active { transform: scale(.96); }
/* WhatsApp in de kopbalk verschijnt pas onder het eerste scherm */
.nav-wa { font-size: 22px; color: var(--wa); }
.js .nav:not(.past-hero) .nav-wa { opacity: 0; pointer-events: none; }
.cart-count {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--grad); color: #fff; font-size: 12px; font-weight: 600;
  display: none; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--bg);
}

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 24px; border-radius: 14px;
  font-size: 16px; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .2s var(--ease), filter .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn i { font-size: 18px; }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn-primary {
  color: #fff; background: var(--grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 28px -12px rgba(197, 35, 223, 0.75);
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-lg {
  position: relative; overflow: hidden; height: 60px; padding: 0 34px; border-radius: 18px; font-size: 17.5px;
  background: linear-gradient(180deg, #dc4df4 0%, #bb22dc 48%, #9a13c2 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 -3px 0 rgba(70, 0, 105, 0.35),
              0 16px 36px -14px rgba(197, 35, 223, 0.85), 0 3px 8px rgba(0, 0, 0, 0.45);
}
/* glans die bij hover één keer over de knop trekt */
.btn-lg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.38) 50%, transparent 68%);
  transition: transform .75s var(--ease);
}
.btn-lg:hover { filter: none; transform: translateY(-2px); }
.btn-lg:hover::after { transform: translateX(130%); }
.btn-lg:active { transform: translateY(0) scale(.985); }
.btn-ghost { background: rgba(241, 237, 244, 0.05); border-color: var(--line-2); }
.btn-ghost:hover { background: rgba(241, 237, 244, 0.1); }
.btn-wa { background: var(--wa); color: #04140a; font-weight: 600; }
.btn-wa:hover { filter: brightness(1.07); }
.btn-wa i { font-size: 20px; }
.w-full { width: 100%; }
.btn-plain { padding: 12px 4px; color: var(--muted); font-size: 16px; transition: color .25s var(--ease); }
.btn-plain:hover { color: var(--text); }
.link-wa {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 6px;
  font-size: 15.5px; color: rgba(241, 237, 244, 0.7); transition: color .25s var(--ease);
}
.link-wa i { font-size: 19px; color: var(--wa); }
.link-wa:hover { color: var(--text); }
.accent {
  display: inline-block; padding-bottom: 0.12em;
  background: linear-gradient(100deg, #fbe2ff 0%, #efa9ff 45%, #e06bfa 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Hero: het eerste scherm ----------
   Lagen van achter naar voor: mesh-verloop, fijn raster dat naar de randen vervaagt, twee lichtbundels,
   drie banen, de vijf diensten als glazen tegels in een boog, het teken als glazen object, daaronder woordmerk, slogan en knop. */
.hero {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: clamp(560px, 100svh, 1080px);
  --fs: clamp(64px, 9.8vw, 150px); --rx: min(530px, 36.8vw); --ry: min(246px, 17.1vw); --chip: clamp(52px, 4.4vw, 64px);
}
.hero-bg, .closer-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-bg {
  background:
    radial-gradient(38% 34% at 50% 30%, rgba(197, 35, 223, 0.30), rgba(197, 35, 223, 0) 100%),
    radial-gradient(46% 52% at 12% 16%, rgba(227, 37, 245, 0.20), rgba(227, 37, 245, 0) 72%),
    radial-gradient(52% 58% at 90% 22%, rgba(91, 33, 214, 0.42), rgba(91, 33, 214, 0) 72%),
    radial-gradient(60% 50% at 50% 104%, rgba(91, 33, 214, 0.34), rgba(91, 33, 214, 0) 72%),
    linear-gradient(180deg, #0f0a1c 0%, #09070f 58%, #08070b 100%);
}
/* fijne korrel tegen strepen in het verloop */
.hero-bg::before, .closer-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-bg::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: 3;
  background: linear-gradient(180deg, rgba(8, 7, 11, 0) 0%, var(--bg) 100%);
}
.hero-raster {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(241, 237, 244, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241, 237, 244, 0.055) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(58% 62% at 50% 34%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
  mask-image: radial-gradient(58% 62% at 50% 34%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
}
.beam {
  position: absolute; top: -12%; left: 50%; width: 54%; height: 92%; transform-origin: 50% 0; filter: blur(18px); opacity: 1;
  background: conic-gradient(from 180deg at 50% 0%, transparent 0deg, transparent 168deg, rgba(232, 121, 255, 0.26) 177deg, rgba(255, 255, 255, 0.16) 180deg, rgba(232, 121, 255, 0.26) 183deg, transparent 192deg, transparent 360deg);
}
.beam-1 { transform: translateX(-50%) rotate(16deg); }
.beam-2 { transform: translateX(-50%) rotate(-16deg); }
.shape { position: absolute; z-index: 1; overflow: visible; aspect-ratio: 190 / 168; }

.hero-inner {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding-top: calc(var(--head) + env(safe-area-inset-top, 0px) + 16px); padding-bottom: clamp(28px, 6vh, 72px);
}

/* het podium: de kop (teken + woordmerk) is het middelpunt van de banen; de dienst-tegels staan in een boog erboven */
.stage {
  position: relative; width: 100%;
  --cy: calc(var(--ry) + var(--chip) / 2);           /* middelpunt van de banen = midden van de kop */
  padding-top: calc(var(--cy) - var(--fs) * 0.46);
}
.ring {
  position: absolute; left: 50%; top: var(--cy); border-radius: 50%; pointer-events: none;
  width: calc(var(--rx) * 2 * var(--k)); height: calc(var(--ry) * 2 * var(--k)); transform: translate(-50%, -50%);
  border: 1px solid rgba(232, 121, 255, 0.28);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 58%);
  mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 58%);
}
.ring-1 { --k: 1; }
.ring-2 { --k: 1.3; border-color: rgba(241, 237, 244, 0.13); }
.ring-3 { --k: 1.66; border-style: dashed; border-color: rgba(241, 237, 244, 0.10); }
/* lichtpuntjes op de buitenste banen */
.ring::before, .ring::after {
  content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #f6c4ff;
  box-shadow: 0 0 0 4px rgba(232, 121, 255, 0.16);
}
.ring-1::before, .ring-1::after { display: none; }
.ring-2::before { left: 13.5%; top: 15%; } .ring-2::after { right: 8%; top: 22%; width: 4px; height: 4px; }
.ring-3::before { left: 24%; top: 6.5%; width: 4px; height: 4px; } .ring-3::after { right: 17%; top: 11%; }

/* dienst-tegels: glas met het icoon in de merkkleur, om de 30 graden op de binnenste baan */
.svc-row { list-style: none; position: absolute; inset: 0; pointer-events: none; }
.svc-row li {
  position: absolute; left: calc(50% + var(--x) * var(--rx)); top: calc(var(--cy) - var(--y) * var(--ry));
  width: var(--chip); height: var(--chip); margin: calc(var(--chip) / -2) 0 0 calc(var(--chip) / -2); pointer-events: auto;
}
.svc-row li:nth-child(1) { --x: -0.866; --y: 0.5; }
.svc-row li:nth-child(2) { --x: -0.5; --y: 0.866; }
.svc-row li:nth-child(3) { --x: 0; --y: 1; }
.svc-row li:nth-child(4) { --x: 0.5; --y: 0.866; }
.svc-row li:nth-child(5) { --x: 0.866; --y: 0.5; }
.svc-row a {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 30%;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.045) 60%, rgba(255, 255, 255, 0.07) 100%), rgba(20, 14, 34, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -10px 16px -12px rgba(255, 255, 255, 0.12), 0 18px 28px -14px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.svc-row a:hover { transform: translateY(-4px) scale(1.04); border-color: rgba(255, 255, 255, 0.34); }
.svc-row i, .svc-row .merk-icoon { font-size: calc(var(--chip) * 0.5); color: var(--svc, currentColor); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)); }
/* merk-icoon als inline SVG: zelfde maat en kleur als de lettertype-iconen */
.merk-icoon { display: block; width: 1em; height: 1em; fill: currentColor; }
.svc-row .merk-icoon { width: 0.86em; height: 0.86em; }
.ic .merk-icoon { width: 0.82em; height: 0.82em; }
.svc-row span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* de kop: teken + woord als één geheel. Het teken (zonder tegel) staat boven het midden van het woord, achter de letters,
   en lost van onder op in het woord. Zijn licht valt van boven op de letters: magenta in het midden, wit naar links, en "plus" in het merkverloop. */
.hero h1 {
  position: relative; z-index: 0; font-size: var(--fs); line-height: 0.92; letter-spacing: -0.055em; font-weight: 600; white-space: nowrap;
}
.hero h1 .embleem {
  position: absolute; left: 50%; bottom: 55%; width: 1.14em; height: 1.163em; transform: translateX(-50%); z-index: -1; overflow: visible;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0, 0, 0, 0.55) 68%, transparent 95%);
  mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0, 0, 0, 0.55) 68%, transparent 95%);
}
.hero h1 span {
  display: inline-block; padding-bottom: 0.22em; margin-bottom: -0.22em;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero h1 .stream {
  background-image:
    radial-gradient(46% 92% at 80% -8%, rgba(240, 105, 252, 0.95) 0%, rgba(240, 105, 252, 0.45) 45%, rgba(240, 105, 252, 0) 100%),
    linear-gradient(180deg, #ffffff 30%, #f1edf4 62%, #cfc4e2 100%);
}
.hero h1 .plus {
  padding-right: 0.05em;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(98deg, #f97bff 0%, #e830f6 46%, #a53bef 100%);
}
/* slogan: licht en gedempt, het tweede deel steviger en in lila licht */
.hero .slogan { margin-top: clamp(16px, 1.9vw, 30px); font-size: clamp(22px, 2.5vw, 38px); line-height: 1.15; letter-spacing: -0.026em; }
.hero .slogan span { font-weight: 300; color: rgba(241, 237, 244, 0.74); }
.hero .slogan b {
  font-weight: 500;
  background: linear-gradient(100deg, #ffffff 0%, #f3c9ff 55%, #e58bfb 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cta { margin-top: clamp(26px, 3.2vw, 44px); display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* rustige entree, één keer; zonder animatie (geen script of "minder beweging") staat alles er meteen */
@keyframes entree { from { opacity: 0; transform: translateY(14px); } }
@keyframes zweef { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
@media (prefers-reduced-motion: no-preference) {
  .js .hero .stage, .js .hero h1, .js .hero .slogan, .js .hero .cta { animation: entree .9s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .js .hero h1 { animation-delay: .12s; }
  .js .hero .slogan { animation-delay: .22s; }
  .js .hero .cta { animation-delay: .32s; }
  .svc-row li { animation: zweef 5.5s ease-in-out infinite alternate; }
  .svc-row li:nth-child(2) { animation-delay: -1.4s; } .svc-row li:nth-child(3) { animation-delay: -2.8s; }
  .svc-row li:nth-child(4) { animation-delay: -4.1s; } .svc-row li:nth-child(5) { animation-delay: -0.7s; }
}

/* ---------- Secties ---------- */
.section { padding: 136px 0; }
.section-line { border-top: 1px solid var(--line); }
#pakketten { padding-top: 104px; scroll-margin-top: 0; }
#werkwijze, #faq { scroll-margin-top: calc(var(--head) - 40px); }
.section-head { max-width: 720px; margin: 0 auto 64px; text-align: center; }
.section-head h2 { font-size: clamp(32px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.042em; }
.section-head p { margin-top: 18px; font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.55; color: var(--muted); }
.section-head p a {
  color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: rgba(232, 121, 255, 0.7); transition: text-decoration-color .25s var(--ease);
}
.section-head p a:hover { text-decoration-color: var(--accent-soft); }

/* ---------- Dienstkaarten ----------
   De hele kaart is het kleurvlak van de dienst (--c1 naar --c2, uit bouw.cjs).
   Tekst: --ink (wit of bijna zwart), --ink2 voor oude prijs en "/ jaar". Geen gloed, geen rand. */
.pgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.pcard {
  flex: 0 1 calc((100% - 48px) / 3); min-width: 0; display: flex; flex-direction: column;
  padding: 30px; border-radius: 28px; color: var(--ink);
  background: linear-gradient(160deg, var(--c1) 0%, var(--c2) 100%);
  scroll-margin-top: calc(var(--head) + 24px);
}
.pcard-head { display: flex; align-items: center; gap: 14px; }
.ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px; font-size: 23px; }
.pcard .ic { color: var(--ink); background: rgba(0, 0, 0, 0.16); }
.pcard.ink-dark .ic { background: rgba(0, 0, 0, 0.1); }
.pcard-head h3 { font-size: 22px; letter-spacing: -0.028em; line-height: 1.15; }

/* keuzeknop tussen de pakketten van één dienst */
.seg { margin-top: 24px; display: flex; gap: 3px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, 0.18); }
.pcard.ink-dark .seg { background: rgba(255, 255, 255, 0.26); }
.seg-btn {
  flex: 1 1 auto; height: 36px; padding: 0 8px; border-radius: 10px; font-size: 14.5px; font-weight: 500; color: var(--ink);
  white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease);
}
.seg-btn.is-on { color: var(--btn-fg); background: var(--btn-bg); font-weight: 600; }
.seg.is-single { padding: 4px 0; background: none !important; }
.seg.is-single .seg-btn { flex: none; display: inline-flex; align-items: center; padding: 0 14px; }

.variants { margin-top: 28px; flex: 1; display: grid; }
.variant { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; }
.variant:not(.is-on) { display: none; }
.js .variant:not(.is-on) { display: flex; visibility: hidden; pointer-events: none; }
.js .variant.is-on { animation: wissel .28s var(--ease); }
@keyframes wissel { from { opacity: 0; transform: translateY(4px); } }

.price-row { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.price { display: flex; align-items: baseline; gap: 8px; }
.price b { font-size: 58px; line-height: 0.95; font-weight: 600; letter-spacing: -0.05em; }
.price .per { font-size: 16.5px; color: var(--ink2); }
.tag {
  padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap;
  color: var(--ink); background: rgba(0, 0, 0, 0.18);
}
/* waar de kaart breed genoeg is, staat het label vast rechtsboven naast de prijs: de regel breekt niet */
@media (min-width: 1200px), (min-width: 380px) and (max-width: 719px) {
  .price-row { flex-wrap: nowrap; }
  .tag { position: absolute; top: 0; right: 0; }
}
.pcard.ink-dark .tag { background: rgba(255, 255, 255, 0.28); }
.was { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 15.5px; }
.was s { color: var(--ink2); }
.save { font-weight: 600; }
.feats { list-style: none; margin: 24px 0 28px; display: grid; gap: 10px; align-content: start; min-height: 88px; }
.feats li { display: flex; gap: 11px; align-items: flex-start; font-size: 16px; line-height: 1.4; }
.feats i { margin-top: 3px; font-size: 16px; flex: none; }
.btn-add { margin-top: auto; width: 100%; font-weight: 600; color: var(--btn-fg); background: var(--btn-bg); }
.btn-add:hover { filter: brightness(0.94); }
.pcard.ink-dark .btn-add:hover { filter: brightness(1.6); }
.btn-add.added { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); filter: none; }

/* ---------- Binnenkomst: kort en rustig ---------- */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .06s; } .js .reveal.d2 { transition-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .variant.is-on { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Hoe het werkt ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.step { padding: 30px; border-radius: 26px; border: 1px solid var(--line); background: rgba(241, 237, 244, 0.022); }
.step .num { font-size: 15px; font-weight: 500; color: var(--accent-soft); }
.step h3 { margin-top: 40px; font-size: 23px; font-weight: 600; letter-spacing: -0.028em; line-height: 1.2; }
.step p { margin-top: 10px; font-size: 16.5px; line-height: 1.55; color: var(--muted); }

/* ---------- Vragen ---------- */
.faq-list { max-width: 800px; margin: 0 auto; border-top: 1px solid var(--line-2); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 26px 0; text-align: left; font-size: 19.5px; font-weight: 500; letter-spacing: -0.018em;
}
.faq-q i { font-size: 20px; color: var(--muted); flex: none; transition: transform .3s var(--ease), color .3s var(--ease); }
.faq-q[aria-expanded="true"] i { transform: rotate(45deg); color: var(--accent-soft); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq-a > p { overflow: hidden; padding-right: 48px; font-size: 17px; line-height: 1.6; color: var(--muted); }
.faq-a.open { grid-template-rows: 1fr; }
.faq-a.open > p { padding-bottom: 28px; }

/* ---------- Afsluiter ---------- */
.closer { padding: 0 0 112px; }
.closer-box {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  padding: clamp(64px, 9vw, 120px) 24px; border-radius: 36px; border: 1px solid var(--line-2);
}
.closer-bg {
  background:
    radial-gradient(48% 60% at 50% 50%, rgba(8, 7, 11, 0.6), rgba(8, 7, 11, 0) 100%),
    radial-gradient(50% 80% at 10% 0%, rgba(227, 37, 245, 0.34), rgba(227, 37, 245, 0) 70%),
    radial-gradient(56% 90% at 92% 100%, rgba(91, 33, 214, 0.62), rgba(91, 33, 214, 0) 72%),
    linear-gradient(180deg, #120b20 0%, #0b0911 100%);
}
.closer .shape-a { width: 36%; left: -7%; top: -64px; }
.closer .shape-b { width: 36%; right: -7%; bottom: -64px; }
.closer h2 { font-size: clamp(36px, 6.4vw, 84px); line-height: 0.98; letter-spacing: -0.048em; }
.closer p { margin: 20px auto 0; max-width: 30em; font-size: clamp(17px, 1.5vw, 19.5px); color: rgba(241, 237, 244, 0.8); }
.closer .cta { margin-top: 36px; }

/* ---------- Voet ---------- */
.footer { border-top: 1px solid var(--line); padding: 56px 0 40px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.footer-inner p { margin-top: 14px; font-size: 15.5px; color: var(--muted); }
.footer-wa { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 500; color: var(--text); transition: color .25s var(--ease); }
.footer-wa i { font-size: 22px; color: var(--wa); }
.footer-wa:hover { color: var(--accent-soft); }
.footer-bottom { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--subtle); }

/* ---------- Melding ---------- */
.toast {
  position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top)); z-index: 110; transform: translate(-50%, -12px); opacity: 0;
  padding: 11px 18px; border-radius: 12px; background: #1f1a2a; border: 1px solid var(--line-2);
  font-size: 15px; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); text-align: center;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.9);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Vensters: upsell en winkelwagen ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(5, 4, 8, 0.74); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: fadeIn .25s var(--ease);
}
.modal-box {
  width: 100%; max-height: calc(100dvh - 40px); overflow-y: auto;
  padding: 28px; border-radius: 26px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #17131f 0%, #0f0d15 100%);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.9), 0 0 80px -30px rgba(91, 33, 214, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: rise .3s var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.upsell-box { max-width: 440px; }
.cart-box { max-width: 480px; }

.upsell-header { margin-bottom: 22px; }
.upsell-icon { display: block; margin-bottom: 14px; font-size: 34px; color: var(--accent-soft); }
.upsell-header h3 { font-size: 24px; letter-spacing: -0.025em; line-height: 1.15; }
.upsell-header p { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.upsell-options { display: grid; gap: 8px; margin-bottom: 20px; }
.upsell-radio, .pay-opt {
  display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-radius: 14px; cursor: pointer;
  background: rgba(241, 237, 244, 0.03); border: 1px solid var(--line);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.upsell-radio:hover, .pay-opt:hover { border-color: var(--line-2); }
.upsell-radio.selected, .pay-opt:has(input:checked) { border-color: rgba(232, 121, 255, 0.55); background: rgba(232, 121, 255, 0.07); }
.upsell-radio input, .pay-opt input {
  -webkit-appearance: none; appearance: none; flex: none; cursor: pointer;
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(241, 237, 244, 0.32); background: transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.upsell-radio input:checked, .pay-opt input:checked {
  border-color: var(--accent-soft); background: var(--accent-soft); box-shadow: inset 0 0 0 4px #17131f;
}
.upsell-name { flex: 1; font-size: 16px; font-weight: 500; }
.upsell-price { text-align: right; line-height: 1.25; }
.upsell-price b { display: block; font-size: 16.5px; font-weight: 600; }
.upsell-price small { display: block; font-size: 13px; color: var(--accent-soft); }
.btn-skip { width: 100%; margin-top: 8px; padding: 12px; font-size: 15px; color: var(--muted); transition: color .25s var(--ease); }
.btn-skip:hover { color: var(--text); }

.cart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.cart-header h2 { font-size: 24px; letter-spacing: -0.025em; }
.close-btn {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 19px;
  background: rgba(241, 237, 244, 0.05); border: 1px solid var(--line); transition: background .25s var(--ease);
}
.close-btn:hover { background: rgba(241, 237, 244, 0.1); }

.steps-bar { display: flex; align-items: center; margin-bottom: 20px; }
.step-dot {
  width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; flex: none;
  font-size: 14px; font-weight: 500; color: var(--subtle); background: rgba(241, 237, 244, 0.04); border: 1px solid var(--line-2);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.step-dot span { display: grid; place-items: center; }
.step-dot.active { background: var(--grad); color: #fff; border-color: transparent; }
.step-dot.completed { background: rgba(232, 121, 255, 0.12); color: var(--accent-soft); border-color: transparent; }
.steps-bar .step-line { flex: 1; height: 1px; background: var(--line-2); margin: 0 10px; }
.step-intro { margin-bottom: 14px; font-size: 16px; color: var(--muted); }

.cart-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.cart-item b { display: block; font-size: 16.5px; font-weight: 500; }
.cart-item small { display: block; margin-top: 2px; font-size: 14px; color: var(--subtle); }
.cart-item-right { display: flex; align-items: center; gap: 10px; }
.cart-item-price { font-size: 16.5px; font-weight: 500; }
.cart-item-remove {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; color: var(--subtle);
  transition: color .25s var(--ease), background .25s var(--ease);
}
.cart-item-remove:hover { color: var(--text); background: rgba(241, 237, 244, 0.07); }
.cart-item-info { min-width: 0; }
.qty { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; border: 1px solid var(--line-2); }
.qty-btn {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; color: var(--muted);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.qty-btn:hover:not(:disabled) { color: var(--text); background: rgba(241, 237, 244, 0.07); }
.qty-btn:disabled { opacity: .35; cursor: default; }
.qty-n { min-width: 22px; text-align: center; font-size: 15.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cart-item-price { min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }

/* dynamische upsells */
.deals { margin-top: 14px; display: grid; gap: 8px; }
.deal {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 12px;
  background: rgba(232, 121, 255, 0.06); border: 1px dashed rgba(232, 121, 255, 0.35);
}
.deal > i { font-size: 20px; color: var(--accent-soft); flex: none; }
.deal-txt { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 15px; color: var(--text-2); line-height: 1.35; }
.deal-txt strong { font-weight: 600; color: var(--accent-soft); font-size: 14.5px; }
.deal-btn {
  flex: none; height: 36px; padding: 0 14px; border-radius: 10px; font-size: 14.5px; font-weight: 500;
  background: rgba(232, 121, 255, 0.16); color: var(--text); transition: background .2s var(--ease);
}
.deal-btn:hover { background: rgba(232, 121, 255, 0.28); }
@media (max-width: 480px) {
  .cart-item { flex-wrap: wrap; }
  .cart-item-right { width: 100%; justify-content: space-between; }
  .qty-btn { width: 40px; height: 40px; }
  .deal-btn { height: 40px; }
}

.empty-state { padding: 30px 0; text-align: center; color: var(--muted); }
.empty-state i { display: block; margin-bottom: 10px; font-size: 36px; color: var(--subtle); }

/* kortingscode */
.code { margin-top: 14px; }
.code-toggle {
  padding: 4px 0; font-size: 15px; color: var(--muted);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(241, 237, 244, 0.28);
  transition: color .25s var(--ease);
}
.code-toggle:hover { color: var(--text); }
.code-form { margin-top: 10px; gap: 8px; }
.code-form input {
  flex: 1; min-width: 0; height: 48px; padding: 0 14px; border-radius: 12px; font-size: 16px; letter-spacing: 0.02em;
  background: rgba(8, 7, 11, 0.6); border: 1px solid var(--line-2); transition: border-color .2s var(--ease);
}
.code-form input::placeholder { color: var(--subtle); letter-spacing: 0; }
.code-form input:focus { outline: none; border-color: rgba(232, 121, 255, 0.7); }
.code-apply { height: 48px; padding: 0 18px; border-radius: 12px; font-size: 15.5px; }
.code-error { margin-top: 8px; font-size: 14.5px; color: #ff8fa3; }
.code-applied {
  align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 12px;
  background: rgba(232, 121, 255, 0.08); border: 1px solid rgba(232, 121, 255, 0.3); color: var(--accent-soft); font-size: 15.5px;
}
.code-applied > span { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.code-applied i { font-size: 18px; flex: none; }
.code-applied button { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; color: var(--accent-soft); transition: background .2s var(--ease); }
.code-applied button:hover { background: rgba(232, 121, 255, 0.14); }

.cart-savings-banner {
  margin-top: 14px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: rgba(241, 237, 244, 0.04); color: var(--text-2); font-size: 15.5px;
}
.cart-savings-banner i { font-size: 20px; color: var(--accent-soft); }
.cart-savings-banner strong { font-weight: 600; color: var(--accent-soft); }
.cart-line { margin-top: 18px; justify-content: space-between; font-size: 16px; color: var(--muted); }
.cart-line span:last-child { color: var(--accent-soft); font-weight: 500; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0 2px; }
.cart-line + .cart-total { padding-top: 8px; }
.cart-total span { font-size: 16px; color: var(--muted); }
.cart-total strong { font-size: 30px; font-weight: 600; letter-spacing: -0.035em; }
.cart-total-2 { padding-top: 20px; }
.step-actions { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }

.payment-options { display: grid; gap: 8px; }
.pay-opt span { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; }
.pay-opt i { font-size: 21px; color: var(--muted); }

/* ---------- Tablet: twee kaarten naast elkaar ---------- */
@media (max-width: 1040px) {
  .pcard { flex-basis: calc((100% - 24px) / 2); }
  .section { padding: 112px 0; }
}

/* ---------- Gsm ---------- */
@media (max-width: 719px) {
  :root { --head: 60px; --gutter: 20px; }
  .nav-links { display: none; }
  .brand img { width: 30px; height: 30px; }
  .wm { font-size: 22px; }
  .cart, .nav-wa { width: 42px; height: 42px; border-radius: 13px; }

  .hero { --fs: 18.2vw; --rx: 42.4vw; --ry: 41vw; --chip: max(44px, 13vw); }
  .hero-inner { padding-top: calc(var(--head) + 6px); padding-bottom: 22px; }
  .hero .slogan { margin-top: 16px; font-size: clamp(19px, 5.9vw, 27px); }
  .cta { margin-top: 28px; width: 100%; gap: 8px; }
  .hero .btn-lg, .closer .btn-lg { width: 100%; max-width: 340px; height: 58px; }
  .hero-raster { background-size: 40px 40px; }
  .beam { width: 120%; }

  .section { padding: 80px 0; }
  #pakketten { padding-top: 64px; }
  .section-head { margin-bottom: 36px; }
  .section-head h2 { font-size: 34px; }
  .section-head p { margin-top: 12px; font-size: 17px; }

  .pgrid { gap: 18px; }
  .pcard { flex-basis: 100%; padding: 24px 22px 22px; border-radius: 24px; }
  .pcard-head h3 { font-size: 21px; }
  .seg { margin-top: 18px; }
  .variants { margin-top: 22px; }
  .price b { font-size: 52px; }
  .feats { margin: 18px 0 22px; gap: 8px; min-height: 0; }
  .feats li { font-size: 15.5px; }

  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line-2); }
  .step {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 22px 0; border: 0; border-radius: 0; background: none;
    border-bottom: 1px solid var(--line);
  }
  .step .num { grid-row: 1 / span 2; padding-top: 4px; }
  .step h3 { margin-top: 0; font-size: 21px; }
  .step p { margin-top: 6px; font-size: 16px; }

  .faq-q { padding: 20px 0; font-size: 17.5px; }
  .faq-a > p { padding-right: 12px; font-size: 16px; }

  .closer { padding-bottom: 72px; }
  .closer-box { padding: 64px 20px; border-radius: 28px; }
  .closer .shape-a { width: 62%; left: -25%; top: -78px; }
  .closer .shape-b { width: 62%; right: -25%; bottom: -78px; }
  .closer h2 { font-size: clamp(34px, 11vw, 46px); }
  .closer p { font-size: 16.5px; }

  .footer { padding: 44px 0 calc(32px + env(safe-area-inset-bottom)); }
  .footer-bottom { margin-top: 32px; line-height: 1.5; }

  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-box { border-radius: 26px 26px 0 0; border-bottom: 0; max-height: 92dvh; padding: 24px 20px calc(22px + env(safe-area-inset-bottom)); }
  .step-actions .btn { flex: 1; padding: 0 16px; }
}

/* ---------- Zwevend WhatsApp-bolletje (gsm) ---------- */
.wa-bubble { display: none; }
@media (max-width: 719px) {
  .wa-bubble {
    position: fixed; z-index: 40; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
    font-size: 28px; color: #fff; background: var(--wa);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .wa-bubble:active { transform: scale(.94); }
  /* pas tonen na het eerste scherm; dan verdwijnt het bolletje bovenaan, zodat er maar één WhatsApp-knop is */
  .js:not(.voorbij-hero) .wa-bubble { opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; }
  .nav-wa { display: none; }
  /* niet over de winkelwagen of de upsell heen */
  body:has(.modal-overlay[style*="flex"]) .wa-bubble { opacity: 0; pointer-events: none; }
}
@media (max-width: 719px) and (prefers-reduced-motion: reduce) {
  .wa-bubble { transition: none; }
}

/* ---------- Smalle gsm ---------- */
@media (max-width: 379px) {
  :root { --gutter: 16px; }
  .pcard { padding: 20px 18px; }
  .seg-btn { font-size: 14px; padding: 0 6px; }
  .price b { font-size: 46px; }
  .svc-row a { font-size: 12px; }
  .btn-wa { font-size: 15px; gap: 8px; }
}

/* =============================================
   GSM-OPTIMALISATIE (360, 390 en 430 breed nagelopen)
============================================= */
@media (max-width: 719px) {
  :root { --head: 56px; }
  .hero-inner { padding-top: calc(var(--head) + env(safe-area-inset-top, 0px) + 6px); }

  /* tikdoelen minstens 44 x 44 */
  .cart, .nav-wa { width: 44px; height: 44px; }
  .brand { min-height: 44px; }
  .seg { border-radius: 16px; }
  .seg-btn { height: 44px; border-radius: 12px; font-size: 15.5px; }
  .link-wa { min-height: 44px; font-size: 16px; }
  .footer-wa { min-height: 44px; }
  .code-toggle { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
  .cart-item-remove, .close-btn, .code-applied button { width: 44px; height: 44px; }
  .btn-skip { min-height: 48px; font-size: 16px; }

  /* leestekst minstens 16 px */
  .feats li, .was, .footer-inner p, .toast, .upsell-header p, .step-intro, .cart-savings-banner, .code-applied, .cart-line { font-size: 16px; }
  .cart-item small, .footer-bottom, .code-error { font-size: 15px; }
  .upsell-price small { font-size: 14px; }

  /* geen zware filters tijdens het scrollen */
  .nav.scrolled { background: rgba(8, 7, 11, 0.97); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .svc-row a {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0.08) 100%), #1a1130;
  }
  .svc-row i, .svc-row .merk-icoon { filter: none; }
  .beam { filter: none; opacity: .7; }
  .hero-bg::before, .closer-bg::before { mix-blend-mode: normal; opacity: .14; }
  .modal-overlay { background: rgba(5, 4, 8, 0.88); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .faq-a { transition: none; }

  /* lade: vult het zichtbare deel van het scherm (ook met toetsenbord open); totaal en knoppen blijven onderaan staan */
  .modal-overlay { top: var(--vvt, 0px); bottom: auto; height: var(--vvh, 100dvh); }
  .modal-box { max-height: calc(var(--vvh, 100dvh) - 20px); }
  .cart-box { padding-bottom: 0; }
  .upsell-box { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .cart-foot {
    position: sticky; bottom: 0; z-index: 2; margin: 14px -20px 0; padding: 2px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    background: #100e16; border-top: 1px solid var(--line);
  }
  .cart-foot .cart-line { margin-top: 12px; }
  .cart-foot .cart-total { padding-top: 10px; }
  .cart-foot .cart-total strong { font-size: 28px; }
  .cart-foot .step-actions { margin-top: 10px; }
  .code { scroll-margin-top: 10px; }
}