/* Selectly · Ontdek (/demo-ai.html, /roi.html, /vergelijken.html). Enkel tokens uit ui/merk.css; bouwt op home.css + dienst.css.
   Gedrag: ui/ontdek.js (demo, vergelijker) en ui/reken.js (rekenvoorbeeld). */
.od-hero .dn-hero-rij{align-items:start}
.od-hero .dn-hero-tekst{padding-top:clamp(0px,2vw,24px)}
.od-start{margin-top:4px}
.od-start label{font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.od-voorbeelden{display:grid;gap:10px}
.od-voorbeelden .mono{font-size:11px;letter-spacing:.14em;color:var(--tekst-3)}
.od-voorbeelden > div{display:flex;flex-wrap:wrap;gap:8px}
.od-chip{min-height:40px;padding:8px 14px;border:0;border-radius:999px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--haar);color:var(--tekst-2);font-size:14px;text-align:left;cursor:pointer;transition:box-shadow .3s,color .3s}
.od-chip:hover{color:var(--goud-licht);box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.5)}

/* ---------- het toestel met de gouden bol ---------- */
.od-toestel{display:flex;flex-direction:column;padding:18px 18px 12px;--lv:0}
.od-bol{position:relative;height:clamp(180px,22vw,240px);display:grid;place-items:center;margin:-4px -4px 4px}
.od-bol canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s var(--uit)}
.od-toestel.met-gl .od-bol canvas{opacity:1}
.od-bol .bol-hud{width:200px;height:200px;margin:-100px 0 0 -100px}
.od-toestel[data-staat=denkt] .bol-hud .r2{animation-duration:2.4s}
.od-toestel[data-staat=denkt] .bol-hud .vijf{animation-duration:3s;stroke:rgba(239,220,176,.45)}
.od-bol-terug{position:absolute;left:50%;top:50%;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;display:none;
  background:radial-gradient(circle at 35% 30%,var(--goud-licht) 0%,var(--goud) 32%,var(--goud-diep) 64%,var(--zwart-1) 100%);
  box-shadow:0 0 calc(30px + var(--lv) * 60px) rgba(var(--goud-rgb),calc(var(--gloed-goud) * (.4 + var(--lv) * .6)));transform:scale(calc(1 + var(--lv) * .12))}
.od-toestel.zonder-gl .od-bol-terug{display:block}
.od-toestel.zonder-gl .od-bol canvas{display:none}
.od-kop{display:flex;align-items:center;gap:10px;padding:10px 4px 12px;border-bottom:1px solid var(--haar)}
.od-kop > div{flex:1;min-width:0}
.od-kop b{display:block;font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.od-kop .mono{font-size:11px;letter-spacing:.1em;color:var(--taak-op)}
.od-toestel:not(.actief) .od-kop .mono{color:var(--tekst-3)}
.od-log{min-height:160px;max-height:min(40vh,320px);padding:14px 4px}
.od-wacht{margin:auto 0;align-self:center;text-align:center;font-size:14px;color:var(--tekst-3)}
.od-wacht b{color:var(--tekst-2);font-weight:500}
.od-toestel .gk-voet{padding:10px 0 8px}
.od-toestel .gk-noot{padding:0 2px 4px}
.od-melding{display:flex;align-items:center;gap:12px;margin:4px 0 10px;padding:12px 14px;border-radius:16px;background:var(--zwart-1);box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.35)}
.od-melding[hidden]{display:none}
.od-melding > div{display:grid;gap:2px;min-width:0}
.od-melding b{font-size:14px}
.od-melding span:not(.dn-melding-ico){font-size:13px;color:var(--tekst-2);overflow-wrap:anywhere}
.od-melding.in{animation:od-in .7s var(--uit) both}
@keyframes od-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- wat u net zag ---------- */
.od-zag{padding:clamp(80px,10vw,140px) 0 clamp(40px,6vw,70px);border-top:1px solid var(--haar)}
.od-drie{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.od-drie a{position:relative;display:grid;gap:10px;align-content:start;height:100%;padding:24px 24px 26px;border-radius:22px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar);transition:box-shadow .4s}
.od-drie a:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent)}
.od-drie .mono{font-size:11px;letter-spacing:.14em;color:var(--accent)}
.od-drie h3{font-size:calc(clamp(22px,1.8vw,26px) * var(--kop-schaal))}
.od-drie p{font-size:15px;color:var(--tekst-2)}
.od-drie i{position:absolute;right:20px;top:20px;font-style:normal;color:var(--accent)}

/* ---------- roi ---------- */
.od-hero-smal{padding-bottom:clamp(40px,5vw,70px)}
.od-regels{list-style:none;display:grid;gap:12px;align-self:center}
.od-regels li{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;padding:18px 20px;border-radius:20px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar)}
.od-regels .mono{grid-row:span 2;font-size:11px;letter-spacing:.14em;color:var(--goud);padding-top:3px}
.od-regels b{font-weight:600}
.od-regels li > span:last-child{font-size:14.5px;color:var(--tekst-2)}
.od-prijs{padding:clamp(24px,4vw,40px) 0 clamp(60px,8vw,100px)}
.od-prijs .shell{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:16px}

/* ---------- vergelijker ---------- */
.od-opties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.od-optie{position:relative;display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;min-height:62px;padding:12px 14px;border:0;border-radius:16px;background:var(--zwart-1);box-shadow:inset 0 0 0 1px var(--haar);color:var(--tekst);text-align:left;cursor:pointer;transition:box-shadow .3s,background .3s}
.od-optie i{position:relative;grid-row:span 2;width:20px;height:20px;border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--tekst-3);transition:background .25s,box-shadow .25s}
.od-optie b{font-weight:500;font-size:15px;line-height:1.25}
.od-optie span{font-size:12.5px;color:var(--tekst-3)}
.od-optie:hover{box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.45)}
.od-optie[aria-pressed=true]{background:rgba(var(--goud-rgb),.08);box-shadow:inset 0 0 0 1.5px var(--goud)}
.od-optie[aria-pressed=true] i{background:var(--goud-verloop);box-shadow:none}
.od-optie[aria-pressed=true] i::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:9px;border:solid var(--zwart-1);border-width:0 2px 2px 0;transform:rotate(45deg)}
.od-teller{font-size:11px;letter-spacing:.1em;color:var(--tekst-3)}
.od-naar{display:none;margin-top:14px;font-size:12px;letter-spacing:.12em;color:var(--goud-licht)}
.od-naar.aan{display:inline-block}
.od-verschil{padding:clamp(70px,9vw,120px) 0 clamp(40px,6vw,70px);border-top:1px solid var(--haar);scroll-margin-top:80px}
.od-leeg{padding:28px;border-radius:22px;box-shadow:inset 0 0 0 1px var(--haar);color:var(--tekst-3);text-align:center}
.od-vgl-lijst{display:grid;gap:16px}
.od-vgl{display:grid;grid-template-columns:minmax(0,.8fr) repeat(3,minmax(0,1fr));gap:18px 28px;padding:clamp(20px,2.6vw,30px);border-radius:24px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar)}
.od-vgl[hidden]{display:none}
.od-vgl h3{font-size:calc(clamp(22px,1.9vw,27px) * var(--kop-schaal))}
.od-vgl-rij{display:grid;gap:8px;align-content:start}
.od-vgl-rij .mono{font-size:10.5px;letter-spacing:.14em;color:var(--tekst-3)}
.od-vgl-rij p{font-size:15px;line-height:1.5;color:var(--tekst-2)}
.od-vgl-rij.met .mono{color:var(--goud)}
.od-vgl-rij.met p{color:var(--tekst)}
.od-vgl-rij.beter{padding-left:18px;border-left:1px solid var(--haar)}
.od-vgl.in{animation:od-in .6s var(--uit) both}
.od-check{padding:clamp(80px,10vw,130px) 0}
.od-check-rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(28px,5vw,80px);align-items:start}
.od-check-lijst{list-style:none;counter-reset:c;display:grid;gap:14px}
.od-check-lijst li{counter-increment:c;display:grid;gap:4px;padding:18px 20px 18px 56px;position:relative;border-radius:18px;background:rgba(10,9,8,.04);box-shadow:inset 0 0 0 1px var(--lijn)}
.od-check-lijst li::before{content:counter(c,decimal-leading-zero);position:absolute;left:20px;top:19px;font:500 12px var(--font-mono);color:var(--goud-op-licht)}
.od-check-lijst b{font-weight:600}
.od-check-lijst span{color:var(--zacht);font-size:15px}
.od-check-lijst a{color:var(--goud-op-licht);text-decoration:underline;text-underline-offset:3px}
.od-verder{padding:clamp(40px,6vw,70px) 0 clamp(70px,9vw,110px)}
.od-verder .oog,.od-check .oog{margin-bottom:20px}

@media (max-width:1099px){
  .od-vgl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .od-vgl h3{grid-column:1/-1}
}
@media (max-width:899px){
  .od-drie{grid-template-columns:minmax(0,1fr)}
  .od-vgl{grid-template-columns:minmax(0,1fr);gap:14px}
  .od-vgl-rij.beter{padding:14px 0 0;border-left:0;border-top:1px solid var(--haar)}
  .od-check-rij{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .od-opties{grid-template-columns:minmax(0,1fr)}
  .od-optie{min-height:54px}
  .od-log{max-height:46vh}
}
@media (prefers-reduced-motion:reduce){.od-melding.in,.od-vgl.in{animation:none}}