/* ==========================================================================
   SmartPresent · Waarom + Hoe werkt het? (SP-003)
   ========================================================================== */
.uitleg__kop{max-width:46rem;margin-bottom:clamp(24px,4vw,44px)}
.uitleg__kop .lead{margin-top:14px}

/* ---------- vijf voordelen ---------- */
.voordelen{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.voordeel{border-top:2px solid var(--c-ink);padding-top:16px}
.voordeel__ic{display:block;width:34px;height:34px;margin-bottom:10px;color:var(--c-ink)}
.voordeel__nr{font-family:var(--f-label);font-weight:700;font-size:.78rem;letter-spacing:.14em;color:var(--c-accent-text)}
.voordeel__woord{margin-top:10px;font-family:var(--f-display);text-transform:uppercase;font-weight:400;font-size:clamp(1.9rem,2.6vw,2.7rem);line-height:1}
.voordeel__tekst{margin-top:10px;color:var(--c-soft)}

/* ---------- voor en na ---------- */
.voorna .tag{margin-bottom:18px}
.voorna__keuze{margin-bottom:22px}
.voorna__paar + .voorna__paar{margin-top:clamp(36px,5vw,56px)}
.voorna__titel{font-family:var(--f-label);font-weight:800;font-size:clamp(1.2rem,1.8vw,1.5rem)}
.voorna__uitleg{margin-top:8px;color:var(--c-soft);max-width:46rem}
.voorna__paneel{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.voorna__laag{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.voorna__label{position:absolute;top:10px;z-index:3;padding:.3em .8em;border-radius:100px;font-family:var(--f-label);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;background:rgba(14,15,18,.82);color:#F3F1EC}
.voorna__laag--voor .voorna__label{left:10px}
.voorna__laag--na .voorna__label{right:10px;background:var(--red-vlak);color:#fff}
.voorna__scherm{position:absolute;inset:0;aspect-ratio:auto;height:100%;border-radius:0}
/* met JS: over elkaar, de schuif bepaalt hoeveel "na" zichtbaar is */
.voorna.is-interactief .voorna__paneel{position:relative;display:block;aspect-ratio:16/9;max-width:1000px;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.voorna.is-interactief .voorna__laag{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;box-shadow:none}
.voorna.is-interactief .voorna__laag--na{clip-path:inset(0 calc(100% - var(--na,50%)) 0 0)}
/* schuif naar rechts = meer "na": na staat links, voor rechts */
.voorna.is-interactief .voorna__laag--na .voorna__label{right:auto;left:10px}
.voorna.is-interactief .voorna__laag--voor .voorna__label{left:auto;right:10px}
.voorna.is-interactief .voorna__paneel::after{content:"";position:absolute;top:0;bottom:0;z-index:4;width:3px;margin-left:-1.5px;left:var(--na,50%);background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.3);pointer-events:none}
.voorna__bediening{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:18px;max-width:1000px}
.voorna__schuif-label{font-family:var(--f-label);font-weight:700;font-size:.9rem;flex:1 1 100%}
.voorna__schuif{flex:1 1 260px;min-height:44px;accent-color:var(--red)}
.voorna__knoppen{display:flex;gap:8px}
.voorna__knop{width:auto;min-height:44px}

/* tekeningen "voor" */
.vt{position:absolute;inset:0;background:#2A2724}
.vt-folders{background:radial-gradient(120% 90% at 50% 100%,#4A3A2C,#2A2119)}
.vt-folders span{position:absolute;width:24%;aspect-ratio:3/4;border-radius:3px;background-color:#E8E3D8;background-image:linear-gradient(#ED0028,#ED0028),repeating-linear-gradient(transparent 0 9%,#CFC8B9 9% 11%);background-size:60% 8%,80% 60%;background-position:20% 14%,50% 75%;background-repeat:no-repeat;box-shadow:0 10px 20px -8px rgba(0,0,0,.6)}
.vt-folders span:nth-child(1){left:14%;top:18%;rotate:-14deg}
.vt-folders span:nth-child(2){left:34%;top:24%;rotate:8deg;background-color:#DCCFBE}
.vt-folders span:nth-child(3){left:52%;top:14%;rotate:-4deg}
.vt-folders span:nth-child(4){left:40%;top:40%;rotate:18deg;background-color:#E3D9C9}
.vt-foto{background:#3A3A3E;display:grid;place-items:center}
.vt-foto__lijst{position:relative;width:46%;aspect-ratio:4/3;border:10px solid #1E1E21;background:linear-gradient(#9AA3AB,#C9CBC6);overflow:hidden;filter:grayscale(.6);box-shadow:0 14px 30px -12px rgba(0,0,0,.7)}
.vt-foto__zon{position:absolute;right:16%;top:16%;width:16%;aspect-ratio:1;border-radius:50%;background:#EDE7D9}
.vt-foto__berg{position:absolute;left:-10%;right:-10%;bottom:0;height:62%;background:#6E7378;clip-path:polygon(0 100%,35% 20%,55% 60%,72% 35%,100% 100%)}
.vt-actie{background:#3B3833;display:grid;place-items:center}
.vt-actie__poster{display:grid;place-items:center;align-content:center;gap:6%;width:34%;aspect-ratio:3/4;background:#E6D9A8;filter:sepia(.5) saturate(.6);rotate:-3deg;box-shadow:0 10px 24px -10px rgba(0,0,0,.7)}
.vt-actie__kop{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(.9rem,2.6vw,1.7rem);color:#9C4B33}
.vt-actie__tekst{font-family:var(--f-label);font-weight:700;font-size:clamp(.55rem,1.2vw,.8rem);color:#6B5E44}
.vt-leeg{background:linear-gradient(#26282D 0 70%,#17181B 70%)}
.vt-leeg__tv{position:absolute;left:30%;top:14%;width:40%;aspect-ratio:16/9;border-radius:4px;background:radial-gradient(90% 70% at 35% 25%,#2A2D33,#0B0C0E);box-shadow:0 0 0 6px #0B0C0E}
.vt-leeg__stoel{position:absolute;bottom:14%;width:13%;aspect-ratio:1;border-radius:8px 8px 3px 3px;background:#3A3D44}
.vt-leeg__stoel:nth-of-type(2){left:28%}
.vt-leeg__stoel:nth-of-type(3){left:59%}

/* ---------- vier stappen ---------- */
.stappen{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.stap{border-top:2px solid var(--c-ink);padding-top:16px}
.stap__nr{font-family:var(--f-display);font-size:2.2rem;line-height:1;color:var(--c-accent-text)}
.stap__titel{margin-top:10px;font-family:var(--f-label);font-weight:800;font-size:1.15rem}
.stap__tekst{margin-top:8px;color:var(--c-soft)}

/* ---------- van website naar presentatie ---------- */
.wnp{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) 60px minmax(0,1.2fr);align-items:center;gap:clamp(12px,2vw,24px);padding-top:40px}
.wnp__tag{position:absolute;top:0;left:0}
.wnp__site{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr;gap:10px;aspect-ratio:4/3;padding:12px;border-radius:10px;background:#F3F1EC;box-shadow:0 20px 40px -24px rgba(0,0,0,.8)}
.wnp__balk{grid-column:1 / -1;display:flex;gap:5px}
.wnp__balk span{width:8px;height:8px;border-radius:50%;background:#C9C4B8}
.wnp__logo{grid-column:1 / -1;width:34%;height:16px;border-radius:3px;background:#0E0F12}
.wnp__foto{border-radius:6px;background:linear-gradient(135deg,#ED0028,#5a0010)}
.wnp__tekst{display:grid;align-content:start;gap:8px}
.wnp__tekst span{height:9px;border-radius:3px;background:#C9C4B8}
.wnp__tekst span:nth-child(2){width:80%}
.wnp__tekst span:nth-child(3){width:60%}
.wnp__logo,.wnp__foto,.wnp__tekst{transition:box-shadow .5s var(--ease-out),scale .5s var(--ease-out)}
.wnp__pijl{height:3px;background:linear-gradient(90deg,transparent,var(--red));position:relative}
.wnp__pijl::after{content:"";position:absolute;right:-2px;top:50%;width:12px;height:12px;border-top:3px solid var(--red);border-right:3px solid var(--red);transform:translateY(-50%) rotate(45deg)}
.wnp__ruw{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:6%;padding:8%;opacity:0;transition:opacity .5s var(--ease-out)}
.wnp__ruw-logo{grid-column:1 / -1;width:30%;height:8cqh;border-radius:3px;background:#F3F1EC}
.wnp__ruw-foto{border-radius:6px;background:linear-gradient(135deg,#ED0028,#5a0010)}
.wnp__ruw-tekst{border-radius:4px;background:repeating-linear-gradient(#C9C4B8 0 7%,transparent 7% 16%)}
.wnp__tv .scene{transition:opacity .6s var(--ease-out)}
/* fases */
.wnp[data-fase="1"] .wnp__tv .scene,.wnp[data-fase="2"] .wnp__tv .scene{opacity:0}
.wnp[data-fase="2"] .wnp__ruw{opacity:1}
.wnp[data-fase="2"] .wnp__logo,.wnp[data-fase="2"] .wnp__foto,.wnp[data-fase="2"] .wnp__tekst{box-shadow:0 0 0 3px var(--red);scale:1.04}
.wnp__onder{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:18px}
.wnp__fases{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;counter-reset:fase;font-family:var(--f-label);font-weight:600;font-size:.88rem;color:var(--c-muted)}
.wnp__fases li{counter-increment:fase}
.wnp__fases li::before{content:counter(fase) ". "}
.wnp[data-fase="1"] ~ .wnp__onder .wnp__fases li:nth-child(1),
.wnp[data-fase="2"] ~ .wnp__onder .wnp__fases li:nth-child(2),
.wnp[data-fase="3"] ~ .wnp__onder .wnp__fases li:nth-child(3){color:var(--c-ink)}

/* ---------- drie functies ---------- */
.functies{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.functie{padding:clamp(18px,2.4vw,28px);border-radius:14px;border:1px solid var(--c-line-strong);display:grid;align-content:start;gap:10px}
.functie__titel{font-family:var(--f-label);font-weight:800;font-size:1.25rem}
.functie p{color:var(--c-soft)}
.functie .functie__noot{font-size:.88rem;color:var(--c-muted)}
.functie .functie__prijs{font-family:var(--f-label);font-weight:700;color:var(--c-ink)}

/* ---------- dashboarddemo ---------- */
.demo{position:relative;display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.6fr);gap:clamp(20px,3vw,40px);align-items:center;padding-top:40px}
.demo__tag{position:absolute;top:0;left:0}
.demo__paneel{display:grid;gap:16px;padding:clamp(18px,2.4vw,26px);border-radius:14px;background:var(--c-bg-2);border:1px solid var(--c-line)}
.demo__paneel-titel{font-family:var(--f-label);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)}
.demo .veld{display:grid;gap:6px}
.demo .veld label{font-family:var(--f-label);font-weight:700;font-size:.92rem}
.demo .veld input{width:100%;min-height:48px;padding:.7em .9em;border-radius:8px;border:1px solid var(--c-muted);background:var(--c-bg);color:var(--c-ink);font:inherit}
.demo .veld input:focus-visible{outline:none;border-color:var(--c-ink);box-shadow:0 0 0 3px var(--red)}
.demo .veld input[aria-invalid="true"]{border-color:#FF6A7E;border-width:2px}
.demo__teller{font-size:.82rem;color:var(--c-muted);justify-self:end}
.demo .veld__fout{font-size:.88rem;font-weight:600;color:#FF6A7E}
.demo__voorbeelden{display:flex;flex-wrap:wrap;gap:8px}
.demo__voorbeeld{width:auto;min-height:44px}
.demo__zet{justify-self:start}
.demo__schermen{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,.8fr) minmax(0,.9fr);gap:clamp(12px,2vw,24px);align-items:end}
@keyframes uitleg-in{from{opacity:0;transform:translateY(6%)}to{opacity:1;transform:none}}
.demo__schermen .scene.is-nieuw .scene__slide{animation:uitleg-in .55s var(--ease-out) both}
.demo__toestel:nth-child(2) .scene.is-nieuw .scene__slide{animation-delay:.1s}
.demo__toestel:nth-child(3) .scene.is-nieuw .scene__slide{animation-delay:.2s}

.demo__schermen .scene[data-lengte="lang"] .scene__kop{font-size:8cqw}
@container scherm (orientation: landscape){ .demo__schermen .scene[data-lengte="lang"] .scene__kop{font-size:5.6cqw} }
html:not(.js) .demo{grid-template-columns:minmax(0,1fr)}

/* ---------- FAQ ---------- */
.faq{max-width:52rem;display:grid;gap:10px}
.faq__item{border:1px solid var(--c-line-strong);border-radius:12px;background:var(--c-bg)}
.faq__item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:12px 18px;font-family:var(--f-label);font-weight:700;font-size:1.05rem}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;translate:0 -3px;transition:rotate .2s var(--ease-out)}
.faq__item[open] summary::after{rotate:225deg;translate:0 3px}
.faq__item summary:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:12px}
.faq__item p{padding:0 18px 16px;color:var(--c-soft);max-width:46rem}

@media (max-width:1099px){
  .voordelen{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stappen{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px){
  .wnp{grid-template-columns:minmax(0,1fr);justify-items:center}
  .wnp__site{width:min(100%,380px)}
  .wnp__pijl{width:3px;height:40px;background:linear-gradient(180deg,transparent,var(--red))}
  .wnp__pijl::after{right:auto;left:50%;top:auto;bottom:-2px;transform:translateX(-50%) rotate(135deg)}
  .wnp__tv{width:100%}
  .functies{grid-template-columns:minmax(0,1fr)}
  .demo{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .voordelen,.stappen{grid-template-columns:minmax(0,1fr)}
  .voorna__paneel{grid-template-columns:minmax(0,1fr)}
  .demo__schermen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .demo__schermen .device--tv{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){
  .wnp__logo,.wnp__foto,.wnp__tekst,.wnp__ruw,.wnp__tv .scene{transition:none}
  .demo__schermen .scene.is-nieuw .scene__slide{animation:none}
}