/* Officieel Odido-palet (merk.odido.nl) – nagebouwd naar odido.nl/service/producten/mobiel (wit, functional level) */
:root{
  --black:#000000; --white:#FFFFFF;
  --blue:#2C72FF; --blue60:#82ACFF; --blue20:#C3D7FF; --blue10:#EEF3FF;
  --purple:#7066FF; --purple60:#AAA4FF; --purple10:#F3F2FF;
  --yellow:#FFAC24; --yellow20:#FFF0D7;
  --orange:#FF7621; --orange60:#FFAE7C; --orange20:#FFE6D6;
  --teal:#2F9A92; --teal20:#D9ECEB;
  --dark:rgba(0,0,0,.76);           /* donkere pill-knop zoals op odido.nl */
  --muted:rgba(0,0,0,.66);
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--black);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--white);color:var(--black);font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:17px;line-height:1.55}
a{color:var(--blue)}
a:focus-visible,button:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
h1,h2,h3{letter-spacing:-.035em;font-weight:700}

/* zwarte balk met tabs Consument / Zakelijk */
.topbar{background:var(--black);color:var(--white)}
.topbar .wrap{display:flex;align-items:flex-end;gap:4px;padding-top:12px;padding-left:12px}
.tab{padding:8px 24px 10px;font-weight:600;font-size:16px;color:var(--white);text-decoration:none;border-radius:16px 16px 0 0}
.tab.on{background:var(--white);color:var(--black)}

/* witte header */
header.main{background:var(--white);position:sticky;top:0;z-index:5}
header.main .wrap{display:flex;align-items:center;gap:28px;height:80px}
.brand{font-weight:800;font-size:24px;letter-spacing:-.03em;color:var(--black);text-decoration:none;display:flex;align-items:center;gap:10px}
.brand small{font-size:11px;font-weight:700;background:var(--blue10);color:var(--black);padding:3px 8px;border-radius:99px;letter-spacing:0}
nav.menu{display:flex;gap:22px;font-weight:600;font-size:15px}
nav.menu a{color:var(--black);text-decoration:none}
nav.menu a[aria-current]{box-shadow:inset 0 -2px 0 var(--black)}
.icons{margin-left:auto;display:flex;gap:22px}
.icons svg{width:26px;height:26px;stroke:var(--black);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:820px){nav.menu{display:none}}

/* lichte glow-band met paginatitel */
.hero-band{background:linear-gradient(100deg,var(--blue60) 0%,var(--purple60) 40%,var(--orange60) 100%)}
.hero-band .wrap{padding-top:24px;padding-bottom:28px}
.back{display:inline-grid;place-items:center;width:96px;height:72px;border-radius:99px;background:var(--white);margin-bottom:56px}
.back svg{width:24px;height:24px;stroke:var(--black);fill:none;stroke-width:1.6}
.hero-band h1{font-size:clamp(40px,6.4vw,64px);line-height:1.02;margin:0}
.intro{padding:40px 0 8px}
.intro p{font-size:clamp(18px,2.2vw,20px);max-width:56ch;color:var(--muted);margin:0 0 24px}

/* knoppen */
/* grote, duidelijke downloadkaart */
.download{margin-bottom:28px}
.download h2{font-size:clamp(30px,4.6vw,44px);line-height:1.05;margin:0 0 8px}
.download .kies{font-size:19px;color:var(--black);margin:0 0 20px}
.dl{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:620px;padding:20px 20px 20px 26px;margin-bottom:14px;border-radius:28px;background:var(--black);color:var(--white);text-decoration:none}
.dl:hover{background:var(--dark)}
.dl span{display:flex;flex-direction:column;line-height:1.2}
.dl small{font-size:17px;opacity:.85;margin-bottom:4px}
.dl b{font-size:clamp(21px,3.4vw,26px);font-weight:700;letter-spacing:-.02em}
.dl em{font-style:normal;font-size:14px;opacity:.7;margin-top:4px}
.dl i{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--white)}
.dl i svg{width:28px;height:28px;stroke:var(--black);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.download .hint{margin:18px 0 0;max-width:62ch;color:var(--muted);font-size:16px}
.download .hint b{color:var(--black)}
.btn{display:inline-flex;align-items:center;gap:10px;font:inherit;font-weight:600;padding:16px 26px;border-radius:99px;border:0;background:var(--dark);color:var(--white);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--black)}
.arrow{display:inline-grid;place-items:center;width:96px;height:72px;border-radius:99px;background:var(--dark)}
.arrow svg{width:24px;height:24px;stroke:var(--white);fill:none;stroke-width:1.6}
.arrow:hover{background:var(--black)}

/* downloadknoppen iOS / Android */
.stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.store{display:inline-flex;align-items:center;gap:12px;min-width:190px;padding:10px 20px 10px 16px;border-radius:14px;background:var(--black);color:var(--white);text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.store:hover{background:var(--dark)}
.store svg{width:28px;height:28px;flex:none;stroke:var(--white);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.store span{display:flex;flex-direction:column;line-height:1.15}
.store small{font-size:12px;opacity:.85}
.store b{font-size:19px;font-weight:600;letter-spacing:-.01em}

/* kaarten zoals op odido.nl */
.card{background:var(--blue10);border-radius:40px;padding:clamp(28px,5vw,48px) clamp(24px,5vw,48px)}
.card h2,.card h3{font-size:clamp(30px,4.6vw,44px);line-height:1.05;margin:0 0 14px}
.card p{color:var(--muted);margin:0 0 24px;max-width:48ch}
.icon{width:72px;height:96px;margin-bottom:20px}
.icon *{fill:none;stroke:url(#glow);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}

section.block{padding:56px 0 0}
section.block>h2{font-size:clamp(30px,4.6vw,44px);line-height:1.05;margin:0 0 24px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}

/* checker */
.checker{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px)}
@media (max-width:820px){.checker{grid-template-columns:1fr}}
.checker label{font-weight:700;display:block;margin-bottom:8px}
.checker textarea{width:100%;min-height:150px;border:1.5px solid var(--blue20);border-radius:24px;padding:18px;font:inherit;font-size:16px;color:var(--black);background:var(--white);resize:vertical}
.samples{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}
.samples button{font:inherit;font-size:14px;font-weight:600;border:1.5px solid var(--black);background:var(--white);color:var(--black);border-radius:99px;padding:7px 14px;cursor:pointer}
.samples button:hover{background:var(--blue20)}
.result{background:var(--white);border-radius:32px;padding:28px;align-self:start}
.result h3{margin:0 0 10px;font-size:22px;letter-spacing:-.02em}
.badge{display:inline-block;padding:4px 12px;border-radius:99px;font-weight:700}
.verdict-high{background:var(--orange20)}.verdict-mid{background:var(--yellow20)}.verdict-low{background:var(--teal20)}
.meter{height:12px;background:var(--blue10);border-radius:99px;overflow:hidden;margin:14px 0 18px}
.meter i{display:block;height:100%;width:0;background:var(--teal);border-radius:99px;transition:width .5s ease,background .5s}
.result ul{margin:0;padding-left:20px}
.result li{margin-bottom:8px}
.result .empty{color:var(--muted);margin:0}

/* stappen */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;background:var(--blue10);border-radius:32px;padding:28px}
.steps li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--white);font-weight:700;margin-bottom:14px}
.steps h3{margin:0 0 6px;font-size:20px;letter-spacing:-.02em}
.steps p{margin:0;color:var(--muted);font-size:16px}

/* telefoon-mockup */
.feature{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
@media (max-width:820px){.feature{grid-template-columns:1fr}}
.phone{background:var(--black);border-radius:40px;padding:14px;max-width:290px;justify-self:center;width:100%}
.screen{background:var(--white);border-radius:28px;padding:18px 16px;font-size:14px}
.notif{border-radius:18px;padding:12px 14px;margin-bottom:10px}
.notif b{display:block;font-size:13px;margin-bottom:2px}
.n-red{background:var(--orange20)}.n-green{background:var(--teal20)}.n-blue{background:var(--blue10)}

/* App-slot tijdens riskant gesprek */
.lockfeat ul{list-style:none;padding:0;margin:0 0 8px}
.lockfeat li{position:relative;padding-left:34px;margin-bottom:12px;color:var(--muted)}
.lockfeat li b{color:var(--black)}
.lockfeat li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--white) 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='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat}
.call{background:var(--black);color:var(--white);border-radius:18px;padding:12px 14px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.call small{display:block;opacity:.7;font-size:12px}
.risk{background:var(--orange20);color:var(--black);font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;white-space:nowrap}
.app{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--blue10)}
.app:last-child{border-bottom:0}
.app i{width:32px;height:32px;border-radius:9px;flex:none;background:linear-gradient(135deg,var(--blue60),var(--purple60) 55%,var(--orange60))}
.app span{flex:1;font-weight:600}
.app em{font-style:normal;font-size:12px;font-weight:700;background:var(--blue10);padding:3px 9px;border-radius:99px}

/* FAQ */
details{border-bottom:1px solid var(--blue20);padding:20px 0}
summary{font-weight:600;font-size:18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:26px;line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--muted);margin:10px 0 0;max-width:70ch}

/* We zijn er voor je */
.contact{padding:72px 0}
.contact h2{font-size:clamp(30px,4.6vw,44px);margin:0 0 8px;line-height:1.05}
.contact .lead{color:var(--muted);max-width:60ch;margin:0 0 28px}

/* zwevende chatknop met glow-ring */
.chat{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:68px;height:68px;border-radius:50%;
  background:linear-gradient(var(--white),var(--white)) padding-box,conic-gradient(from 200deg,var(--orange),var(--purple60),var(--blue60),var(--orange)) border-box;
  border:4px solid transparent;display:grid;place-items:center;z-index:6;box-shadow:0 4px 18px rgba(0,0,0,.12)}
.chat svg{width:32px;height:32px;stroke:var(--black);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

footer{background:var(--black);color:var(--white);padding:48px 0 32px;font-size:15px;margin-top:24px}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;margin-bottom:32px}
footer h4{margin:0 0 10px;font-size:15px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:6px;opacity:.75}
.disclaimer{border-top:1px solid rgba(255,255,255,.2);padding-top:20px;opacity:.7;font-size:14px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.download-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.download-modal.is-open {
  display: flex;
}

.download-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.download-modal__content {
  position: relative;
  z-index: 1;
  width: min(92vw, 440px);
  background: var(--white);
  border-radius: 24px;
  padding: 28px 24px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
}

.download-modal__content h2 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 36px);
  letter-spacing: -0.04em;
}

.download-modal__content p {
  margin: 0 0 18px;
  color: var(--muted);
}

.download-modal__content input {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--blue20);
  border-radius: 14px;
  padding: 14px 16px;
  font: inherit;
  font-size: 16px;
  margin-bottom: 16px;
}

.download-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  color: var(--black);
}

.download-modal__error {
  min-height: 22px;
  margin-top: 12px;
  font-size: 14px;
  color: #b30f0f;
  font-weight: 600;
}

.download-modal__error.success {
  color: #0d7d52;
}