:root{
    --bg:#0b0f14; --fg:#e5e7eb; --muted:#94a3b8; --line:rgba(255,255,255,.06);
    --brand-1:#3b82f6; --brand-2:#8b5cf6; --brand-ink:#fff;
    --hero-bg:#0b0f14; --hero-fg:#fff; --modal:#0d1218; --modal-2:#0a0f15;
    --ring:0 0 0 3px rgba(59,130,246,.35); --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
html{-webkit-text-size-adjust:100%}
body{
    font-family:Poppins,system-ui,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--fg); background:var(--bg); line-height:1.7;
    font-size:clamp(15px,1.6vw,17px)
}
img{max-width:100%;height:auto;display:block}

.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:fixed;left:16px;top:12px;padding:8px 12px;background:#111;color:#fff;border-radius:8px;z-index:1000;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.container{max-width:1100px;margin:0 auto;padding:0 clamp(14px,4vw,24px)}
.section{padding:56px 0}

/* Header + nav */
.site-header{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,rgba(12,16,22,.9),rgba(12,16,22,.75));backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0);transition:box-shadow .25s ease, backdrop-filter .25s ease, background .25s ease}
.site-header.scrolled{background:linear-gradient(180deg,rgba(12,16,22,.95),rgba(12,16,22,.85));box-shadow:0 8px 24px rgba(0,0,0,.28);backdrop-filter:saturate(160%) blur(8px)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.brand img{border-radius:12px}
.menu ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.menu a{color:#e7ecf3;text-decoration:none;padding:10px 12px;border-radius:10px;position:relative}
.menu a[aria-current="page"]{font-weight:700}
.menu a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--brand-1),var(--brand-2));box-shadow:0 0 16px rgba(99,102,241,.5)}
@media (min-width:900px){.top-tabbar{display:none!important}}
@media (max-width:899px){#primary-menu{display:none!important}}

.top-tabbar{display:flex;gap:8px;overflow:auto;padding:8px 16px;background:rgba(13,18,24,.9);backdrop-filter:blur(6px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.top-tabbar .tab{padding:8px 12px;border-radius:999px;text-decoration:none;color:#e5e7eb;min-height:40px}
.top-tabbar .tab.is-active{font-weight:700;background:rgba(255,255,255,.06)}
.top-tabbar .cta{background:linear-gradient(90deg,var(--brand-1),var(--brand-2));color:#fff}

/* Buttons & inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(90deg,var(--brand-1),var(--brand-2));color:var(--brand-ink);border:none;border-radius:14px;padding:12px 16px;font-weight:800;text-decoration:none;cursor:pointer;box-shadow:0 10px 28px rgba(59,130,246,.25);min-height:44px}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;color:#cfe1ff;border:1px solid rgba(139,92,246,.45)}
.btn.small{padding:8px 12px;border-radius:10px}
.btn.wide,.contact-form .btn{width:100%}
.field,.select,textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:.8rem;background:#0f1520;color:#e7ecf3}
.field:focus,.select:focus,textarea:focus{outline:none;box-shadow:var(--ring);border-color:rgba(59,130,246,.5)}
label b{display:block;margin-bottom:4px}
.help{font-size:.9rem;color:var(--muted)}

/* Hero */
.hero{color:var(--hero-fg);position:relative;overflow:hidden;background:
    radial-gradient(1200px 480px at 10% 110%, rgba(56,189,248,.12), transparent 60%),
    radial-gradient(1000px 420px at 80% -10%, rgba(139,92,246,.12), transparent 55%),
    var(--hero-bg)}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,40px);align-items:center;max-width:1200px;margin:0 auto;padding:clamp(56px,12vw,120px) 0}
@supports (height:100svh){ .hero .wrap{min-height:60svh} }
.kicker{letter-spacing:.14em;text-transform:uppercase;color:#a5b4fc;font-weight:800}
.hero h1{font-size:clamp(1.9rem,5.5vw,3.2rem);line-height:1.12;margin:.25rem 0 1rem;color:#f8fafc}
.lead{font-size:clamp(1rem,2.4vw,1.15rem);color:var(--muted)}

.hero-car{display:flex;justify-content:center;align-items:center;justify-self:center}
.hero-car img{border-radius:16px;width:min(90vw,900px);height:auto;box-shadow:0 20px 80px rgba(0,0,0,.35)}
.hero-video{display:block;width:100%;max-width:560px;max-height:72vh;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:16px;box-shadow:0 20px 80px rgba(0,0,0,.35);margin:0 auto;overflow:hidden}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid var(--line);border-radius:var(--radius);padding:clamp(14px,3vw,18px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card h3,.card h4{margin:.2rem 0 .6rem;color:#f3f4f6}

/* Voor/Na (nu uitgeschakeld in HTML) */
.ba{position:relative;aspect-ratio:16/9;max-width:900px;margin:16px 0;overflow:hidden;border-radius:14px;background:#0e1520}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba img.after{clip-path:inset(0 0 0 50%);transition:clip-path .06s linear}
.ba input{position:absolute;inset:auto 0 0 0;height:28px;width:100%;appearance:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent)}

/* ===== (optioneel) 3D CARROUSEL styles — veilig om te laten staan ===== */
.carousel3d{
    --count:5; --i:0; --rot:0deg; perspective:1600px;
    padding:56px 0;
    background:
      radial-gradient(1200px 480px at 10% 110%, rgba(56,189,248,.08), transparent 60%),
      radial-gradient(1000px 420px at 80% -10%, rgba(139,92,246,.08), transparent 55%),
      #0a0f15;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.carousel3d h2{ text-align:center; margin:0 0 18px; }
.carousel3d-wrap{
    width:min(1100px,96vw);
    height: clamp(280px, 48vw, 520px);
    margin: 0 auto;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(-420px) rotateY(var(--rot));
    transition: transform .9s cubic-bezier(.22,.61,.36,1);
}
.carousel3d-slide{
    position:absolute; top:50%; left:50%;
    transform-style:preserve-3d;
    transform-origin:center center -420px; /* straal */
    width: clamp(220px, 36vw, 420px);
    height: clamp(150px, 28vw, 280px);
    margin:-140px -210px;
    display:flex; align-items:center; justify-content:center;
    transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .4s ease, opacity .4s ease;
    outline: none;
}
.carousel3d-card{
    width:100%; height:100%;
    border-radius:20px; overflow:hidden;
    background:#0f1520;
    border:1px solid rgba(255,255,255,.08);
    box-shadow: 0 20px 80px rgba(0,0,0,.35);
    display:grid; grid-template-rows: 1fr auto;
    opacity:.45; 
    transform: scale(.88);
    filter: saturate(.7) blur(.3px);
    transition: opacity .35s ease, transform .45s ease, filter .35s ease, box-shadow .35s ease;
}
.carousel3d-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.carousel3d-caption{ padding:10px 12px; font-size:.95rem; color:#cbd5e1; background:linear-gradient(180deg,rgba(255,255,255,.02),transparent); }
.carousel3d-slide.is-active .carousel3d-card{
    opacity:1; transform: scale(1.02); filter: none;
    box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08), 0 0 0 6px rgba(99,102,241,.12);
}
.carousel3d-slide.is-near .carousel3d-card{ opacity:.75; transform: scale(.95); filter: saturate(.9) }
.carousel3d-slide:not(.is-active){ cursor:pointer; }
.carousel3d-nav{ display:flex; align-items:center; justify-content:center; gap:12px; margin: 16px auto 0; width: min(960px,92vw) }
.carousel3d-btn{
    border:1px solid rgba(255,255,255,.18);
    background:#121826; color:#fff; border-radius:12px;
    padding:10px 14px; min-width:44px; min-height:44px;
}
.carousel3d-dots{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.carousel3d-dot{
    width:10px; height:10px; border-radius:999px;
    background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.35);
}
.carousel3d-dot[aria-current="true"]{ background:linear-gradient(90deg,var(--brand-1),var(--brand-2)); border-color:transparent; box-shadow:0 0 12px rgba(99,102,241,.6); }

/* ===== Showcase slider (gescope’d) ===== */
@import url("https://api.fontshare.com/v2/css?f[]=archivo@100,200,300,400,500,600,700,800,900&f[]=clash-display@200,300,400,500,600,700&display=swap");

:root{
  --slide-width: min(25vw, 300px);
  --slide-aspect: 2 / 3;
  --slide-height: calc(var(--slide-width) * (3 / 2));
  --slide-transition-duration: 800ms;
  --slide-transition-easing: ease;
  --font-archivo: "Archivo", sans-serif;
  --font-clash-display: "Clash Display", sans-serif;
}

/* Wrapper sectie */
.showcase{width:100%; display:grid; place-items:center; padding:32px 0}

/* Slider shell */
.showcase .slider{
  width: calc(3 * var(--slide-width));
  height: calc(2 * var(--slide-height));
  display:flex; align-items:center; gap:16px;
}
.showcase .slider--btn{
  --size: 40px;
  display:inline-flex; justify-content:center; align-items:center;
  opacity:.7; transition:opacity .25s cubic-bezier(.215,.61,.355,1); z-index:999;
  border:none; background:none; cursor:pointer;
}
.showcase .slider--btn svg{ width:var(--size); height:var(--size); stroke:#fff }
.showcase .slider--btn:hover{ opacity:1 }

.showcase .slides__wrapper{ width:100%; height:100%; display:grid; place-items:center; position:relative }
.showcase .slides__wrapper > *{ grid-area:1 / -1 }

/* stacks */
.showcase .slides, .showcase .slides--infos{ width:100%; height:100%; pointer-events:none; display:grid; place-items:center }
.showcase .slides > *, .showcase .slides--infos > *{ grid-area:1 / -1 }

/* Slide cards */
.showcase .slide{
  --slide-tx:0px; --slide-ty:0vh; --padding:0px; --offset:0;
  width:var(--slide-width); height:auto; aspect-ratio:var(--slide-aspect);
  user-select:none; perspective:800px;
  transform: perspective(1000px) translate3d(var(--slide-tx),var(--slide-ty),var(--slide-tz,0)) rotateY(var(--slide-rotY)) scale(var(--slide-scale));
  transition: transform var(--slide-transition-duration) var(--slide-transition-easing);
}
.showcase .slide[data-current]{ --slide-scale:1.2; --slide-tz:0px; --slide-tx:0px; --slide-rotY:0; pointer-events:auto }
.showcase .slide[data-next]{ --slide-tx: calc(1 * var(--slide-width) * 1.07); --slide-rotY: -45deg }
.showcase .slide[data-previous]{ --slide-tx: calc(-1 * var(--slide-width) * 1.07); --slide-rotY: 45deg }
.showcase .slide:not([data-current]){ --slide-scale:1; --slide-tz:0; pointer-events:none }

/* Helderheid */
.showcase .slide[data-current] .slide--image{ filter:brightness(.92) }
.showcase .slide:not([data-current]) .slide--image{ filter:brightness(.55) }

.showcase .slide__inner{ --rotX:0; --rotY:0; --bgPosX:0%; --bgPosY:0%;
  position:relative; left:calc(var(--padding)/2); top:calc(var(--padding)/2);
  width:calc(100% - var(--padding)); height:calc(100% - var(--padding));
  transform-style:preserve-3d; transform:rotateX(var(--rotX)) rotateY(var(--rotY));
}
.showcase .slide--image__wrapper{ position:relative; width:100%; height:100%; overflow:hidden; border-radius:18px; box-shadow:0 30px 90px rgba(0,0,0,.45) }
.showcase .slide--image{
  width:100%; height:100%; position:absolute; top:50%; left:50%;
  object-fit:cover; transform:translate(-50%,-50%) scale(1.25) translate3d(var(--bgPosX),var(--bgPosY),0);
  transition: filter var(--slide-transition-duration) var(--slide-transition-easing);
}

/* Background overlays */
.showcase .slide__bg{
  position:fixed; inset:-20%;
  background-image:var(--bg); background-size:cover; background-position:center;
  z-index:-1; pointer-events:none;
  transition: opacity var(--slide-transition-duration) ease, transform var(--slide-transition-duration) ease;
}
.showcase .slide__bg::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.8); backdrop-filter:blur(8px) }
.showcase .slide__bg:not([data-current]){ opacity:0 }
.showcase .slide__bg[data-previous]{ transform: translateX(-10%) }
.showcase .slide__bg[data-next]{ transform: translateX(10%) }

/* Slide info (optioneel) */
.showcase .slide-info{ --padding:0px; position:relative; width:var(--slide-width); height:100%; aspect-ratio:var(--slide-aspect); user-select:none; perspective:800px; z-index:100 }
.showcase .slide-info__inner{ position:relative; left:calc(var(--padding)/2); top:calc(var(--padding)/2); width:calc(100% - var(--padding)); height:calc(100% - var(--padding)); transform-style:preserve-3d }
.showcase .slide-info--text__wrapper{ --z-offset:45px; position:absolute; height:fit-content; left:-15%; bottom:15%; transform:translateZ(var(--z-offset)); z-index:2; pointer-events:none }
.showcase .slide-info--text{ font-family:var(--font-clash-display); color:#fff; overflow:hidden }
.showcase .slide-info--text span{ display:block; white-space:nowrap; transition: var(--slide-transition-duration) var(--slide-transition-easing); transition-property:opacity, transform }
.showcase .slide-info[data-current] .slide-info--text span{ opacity:1; transform:translate3d(0,0,0); transition-delay:250ms }
.showcase .slide-info:not([data-current]) .slide-info--text span{ opacity:0; transform:translate3d(0,100%,0); transition-delay:0ms }
.showcase .slide-info--text[data-title], .showcase .slide-info--text[data-subtitle]{ font-size:min(3cqw,2.4rem); font-weight:800; letter-spacing:.2cqw; text-transform:uppercase }
.showcase .slide-info--text[data-subtitle]{ margin-left:2cqw; font-size:min(2.2cqw,1.8rem); font-weight:600 }
.showcase .slide-info--text[data-description]{ margin-left:1cqw; font-size:min(1.5cqw,.95rem); font-family:var(--font-archivo); font-weight:300 }

/* Loader */
.showcase .loader{ position:fixed; inset:0; display:grid; place-items:center; background:#000; z-index:1000; opacity:1; transition:opacity .5s ease-out }
.showcase .loader__text{ font-family:var(--font-clash-display); font-size:clamp(2rem,2vw,5rem); font-weight:800; color:#fff }

/* Footer */
footer{background:#0b1016;color:#cbd5e1;padding-bottom:calc(16px + env(safe-area-inset-bottom,0))}
footer a{color:#e5eeff}
.foot{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tiny{font-size:.9rem;opacity:.85}

/* scroll-offset fallback */
section[id]{scroll-margin-top:72px}

/* Rijen */
.row{display:grid; grid-template-columns: 1fr 1fr; gap:12px}

/* Breekpunten */
@media (max-width:900px){
    .hero .wrap{grid-template-columns:1fr;text-align:center}
    .hero-video{max-width:min(90vw,520px);max-height:70vh}
}
@media (max-width:700px){
    .row{grid-template-columns:1fr}
    .foot{grid-template-columns:1fr}
    .menu a{padding:10px}
    .cards{grid-template-columns:1fr}
}
@media (max-width:480px){
    .hero h1{font-size:clamp(1.7rem,8vw,2.2rem)}
    .kicker{font-size:.8rem}
    .btn{width:100%}
    .card{border-radius:14px}
    .hero-video{max-width:92vw;border-radius:14px}
}
@media (max-width:360px){
    .hero h1{font-size:1.6rem}
    .top-tabbar{gap:6px}
    .top-tabbar .tab{padding:8px 10px}
}

/* nette tik-highlight */
*{-webkit-tap-highlight-color:rgba(255,255,255,.06)}

/* ===== Configurator: layout & styling ===== */
.config-modal[aria-hidden="true"] { display:none; }
.config-modal[aria-hidden="false"] {
    position: fixed; inset: 0; z-index: 100;
    display: grid; place-items: center;
}
.config-backdrop{
    position:absolute; inset:0;
    background: rgba(3,7,13,.55);
    backdrop-filter: blur(6px) saturate(130%);
}
.config-dialog{
    position: relative;
    width: min(1100px, 96vw);
    max-height: min(88vh, 920px);
    display: grid;
    grid-template-columns: 1.6fr .9fr;
    gap: 16px;
    background: linear-gradient(180deg, #0c121a, #0a0f15);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    box-shadow: 0 30px 120px rgba(0,0,0,.55);
    padding: 16px;
    overflow: hidden;
}
.cfg-close{
    position:absolute; top:10px; right:12px;
    border:1px solid rgba(255,255,255,.18);
    background:#121826; color:#fff;
    width:40px; height:40px; border-radius:12px;
    font-size:20px; line-height:1;
    cursor:pointer;
}
.cfg-main{ 
    min-width: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
    border-radius: 12px;
    padding: 12px;
    overflow: auto;
}
.cfg-aside{
    min-width: 0;
    background: #0f1520;
    border:1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 12px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 12px;
    overflow: auto;
}
.cfg-head{display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; margin-bottom: 8px}
.cfg-title{ margin: 0 0 6px; }
.badge{
    align-self:flex-start;
    background: linear-gradient(90deg,var(--brand-1),var(--brand-2));
    color:#fff; padding:6px 10px; border-radius:999px; font-weight:700;
    box-shadow: 0 10px 20px rgba(59,130,246,.25);
}
.cfg-steps{display:flex; flex-wrap:wrap; gap:8px; font-size:.9rem; color:#cbd5e1}
.cfg-steps .step{padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03)}
.cfg-steps .step.is-active{border-color: transparent; background: rgba(99,102,241,.25); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06)}

.step-pane{ display:block }
.step-pane[hidden]{ display:none !important }

.cfg-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 12px}
.opt{
    background: #0e1520;
    border:1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease, background .2s ease;
}
.opt:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.25) }
.opt.is-selected{ border-color: rgba(99,102,241,.55); box-shadow: 0 0 0 3px rgba(99,102,241,.25); background: linear-gradient(180deg, rgba(99,102,241,.10), rgba(255,255,255,.02)) }
.opt input[type="radio"], .opt input[type="checkbox"]{ margin-right:10px }
.qty{ display:inline-grid; grid-template-columns: 36px 64px 36px; align-items:center; gap:6px }
.qty button{ border:1px solid rgba(255,255,255,.18); background:#121826; color:#fff; border-radius:10px; min-height:36px; cursor:pointer }
.qty input{ height:36px; text-align:center; border:1px solid rgba(255,255,255,.18); background:#0b111a; color:#fff; border-radius:10px }

/* Winkelwagentje */
.cart{ display:grid; gap:12px }
.cart-list{
    display:grid; gap:8px; min-height:120px;
    background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
    border:1px dashed rgba(255,255,255,.12);
    border-radius:12px; padding:10px;
}
.cart-empty{ color:var(--muted); text-align:center; padding:16px 6px }
.cart-item{
    display:flex; align-items:center; justify-content:space-between;
    gap: 10px; padding:10px; border-radius:10px;
    background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.10);
}
.cart-item .btn.ghost{ padding:6px 10px; min-height:36px }

/* Share */
.share .row{ margin-top:6px }

/* Actiebalk */
.cfg-actions{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; margin-top:12px;
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:12px;
}

/* Responsiveness configurator */
@media (max-width: 980px){
    .config-dialog{ grid-template-columns: 1fr; max-height: 92vh }
    .cfg-aside{ order: -1 }
    .row{ grid-template-columns: 1fr }
}

/* ===============================
   D-Detailerz – Pakketten (clean)
   =============================== */

:root{
  /* Neon/carbon thema voor de kaarten */
  --dd-text:#e7ecf3;
  --dd-muted:#9aa3ad;
  --dd-brand:#9be8ff;   /* cold neon */
  --dd-accent:#6a5cff;  /* violet neon */
  --dd-hot:#ff3e8a;     /* pink neon */

}

/* Layout */
.dd-grid-wrap{max-width:1200px;margin:0 auto;padding:20px 12px}
.dd-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(16px,2.5vw,26px);
  align-items:stretch;
}

/* BTW-switch (21%) */
.dd-toolbar{display:flex;justify-content:flex-end;margin:0 0 12px}
.dd-switch{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;user-select:none}
.dd-switch input{display:none}
.dd-slider{
  width:46px;height:26px;border-radius:26px;display:inline-block;position:relative;
  background:linear-gradient(90deg,#20242d,#12151b);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.06);
  transition:all .2s ease;
}
.dd-slider::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#cfd8e3);box-shadow:0 1px 3px rgba(0,0,0,.5);
  transition:left .2s ease,box-shadow .2s ease;
}
.dd-switch input:checked + .dd-slider{
  background:linear-gradient(90deg,var(--dd-accent),var(--dd-hot));
  box-shadow:0 0 12px rgba(106,92,255,.35),0 0 24px rgba(255,62,138,.25);
}
.dd-switch input:checked + .dd-slider::after{left:23px}
.dd-switch-label{color:var(--dd-muted);font-weight:600}

/* Kaart */
.dd-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:22px;padding:22px 18px 16px;color:var(--dd-text);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 2px 0 rgba(255,255,255,.06) inset,0 28px 70px rgba(0,0,0,.65);
  backdrop-filter:saturate(140%) blur(2px);
  transform:translateZ(0);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.dd-card::before{ /* subtiele leesbaarheids-overlay */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 60% at 10% 0%,rgba(12,16,22,.25),transparent 60%),
    linear-gradient(180deg,rgba(0,0,0,.18),transparent 40%);
}
.dd-card::after{ /* rand-glow */
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(120deg,var(--dd-brand),transparent 40%),
    linear-gradient(300deg,var(--dd-hot),transparent 45%),
    linear-gradient(60deg,var(--dd-accent),transparent 50%);
  filter:blur(14px);opacity:.26;transition:opacity .25s ease,filter .25s ease;
}
.dd-glow{ /* zachte binnen-glow */
  position:absolute;inset:-40%;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 60% at 30% 20%,rgba(155,232,255,.20) 0%,transparent 70%),
    radial-gradient(50% 50% at 80% 10%,rgba(106,92,255,.18) 0%,transparent 65%),
    radial-gradient(50% 50% at 50% 90%,rgba(255,62,138,.16) 0%,transparent 70%);
  transform:rotate(8deg);opacity:.75;transition:transform .4s ease,opacity .3s ease;
}
.dd-card:hover{
  transform:translateY(-8px) scale(1.02);
  border-color:rgba(155,232,255,.30);
  box-shadow:0 34px 80px rgba(0,0,0,.68);
}
.dd-card:hover::after{opacity:.5;filter:blur(18px)}
.dd-card:hover .dd-glow{transform:rotate(4deg) translateY(-4%);opacity:.95}

/* Content in de kaart */
.dd-head,.dd-list,.dd-cta,.dd-price{position:relative;z-index:1}
.dd-head{position:relative;text-align:left}
.dd-ico{
  display:inline-grid;place-items:center;
  width:28px;height:28px;margin-bottom:10px;border-radius:8px;font-size:16px;
  background:linear-gradient(135deg,#7dd3fc,#8b5cf6);
  box-shadow:0 0 12px rgba(139,92,246,.35);
}
.dd-head h3{margin:.1rem 0 .35rem;font-size:1.18rem;font-weight:800;letter-spacing:.02em}

/* Prijs */
.dd-price{
  margin:0 0 .6rem;font-weight:900;font-size:1.22rem;line-height:1.2;
  background:linear-gradient(90deg,#7dd3fc,#60a5fa);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.dd-price small{font-weight:700;color:#a7b0bb;-webkit-text-fill-color:initial;background:none}

/* Features */
.dd-list{list-style:none;margin:0 0 1rem;padding:0;color:#cdd6e0;line-height:1.45}
.dd-list li{margin:.4rem 0;padding-left:22px;position:relative}
.dd-list li::before{
  content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#a78bfa,#ec4899 70%);
  box-shadow:0 0 10px rgba(236,72,153,.55);
}

/* CTA */
.dd-cta{margin-top:auto;padding:10px;border-radius:10px;background:#0E1219;border:1px solid rgba(255,255,255,.06)}
.dd-btn{
  display:block;width:100%;text-align:center;text-decoration:none;
  padding:.75rem 1rem;border-radius:999px;font-weight:900;letter-spacing:.02em;color:#fff;
  background:linear-gradient(90deg,#8b5cf6,#ec4899);
  box-shadow:0 0 1px #000,0 0 16px rgba(139,92,246,.35),0 0 30px rgba(236,72,153,.25);
  transition:transform .15s ease,box-shadow .2s ease;
}
.dd-btn:hover{transform:translateY(-2px)}
.dd-btn:active{transform:translateY(0) scale(.98)}

/* Bewegingsreductie */
@media (prefers-reduced-motion: reduce){
  .dd-card,.dd-slider,.dd-glow,.dd-btn{transition:none}
}

/* Verwijder donkere blok achter de knop */
.dd-cta{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Hou wat ruimte boven de knop */
.dd-cta .dd-btn{ margin-top: 10px; }

/* (optioneel) volledige breedte zonder wrapper-styling */
.dd-btn{
  display: block;
  width: 100%;
}
/* Zorg dat 3D-stapelen voorspelbaar is */
.showcase .slides { transform-style: preserve-3d; }
.showcase .slide { position: relative; z-index: 1; }

/* Current altijd bovenop en iets naar voren */
.showcase .slide[data-current]{
  z-index: 3;
  --slide-tz: 60px;   /* duwt de slide dichter bij de camera */
}

/* Nabije buren krijgen middenlaag */
.showcase .slide[data-next],
.showcase .slide[data-previous]{ z-index: 2; }

/* (optioneel) minimal micro-fix tegen eerste-frame flicker in Safari/Chrome */
.showcase .slide,
.showcase .slide__bg,
.showcase .slide--image { will-change: transform; }