/* inki-pdf - website. Huisstijl uit het ontwerpboek "inki paars v2": violet
   voor de hoofdactie, mango voor een korte boodschap, druif als tekstkleur,
   ivoor als ondergrond, lavendel voor panelen. DM Sans voor de tekst,
   Bricolage Grotesque 800 voor de koppen. De productweergaven (bewerker,
   tekenpagina) zijn in HTML en CSS gebouwd, niet als schermafdruk: scherp op
   elk scherm en altijd in de huisstijl. */

@font-face { font-family: "DM Sans"; src: url("fonts/DMSans.ttf") format("truetype"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/BricolageGrotesque.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Great Vibes"; src: url("fonts/GreatVibes-Regular.ttf") format("truetype"); font-display: swap; }

:root {
  --violet: #6042C8; --violet-donker: #4E34A8; --mango: #FFC95B; --druif: #2D2145; --ivoor: #FFF8ED; --lavendel: #F0EAFE; --wit: #fff;
  --zacht: #6E6485; --rand: #E6E0F3; --groen: #1E9E6A;
  --r-knop: 12px; --r-paneel: 18px; --r-groot: 28px;
  --kop: "Bricolage Grotesque", "DM Sans", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 400 17px/1.65 "DM Sans", "Segoe UI", system-ui, sans-serif; color: var(--druif); background: var(--ivoor); }
img { max-width: 100%; height: auto; }
a { color: var(--violet); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--druif); outline-offset: 4px; }
h1, h2, h3 { font-family: var(--kop); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 20px; }
h3 { font-size: 1.45rem; margin-bottom: 10px; }
p { margin: 0 0 18px; }
.wrap { width: min(1160px, 100% - 40px); margin-inline: auto; }
.label { display: inline-block; background: var(--lavendel); color: var(--violet); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 8px 16px; border-radius: 12px; margin-bottom: 22px; }
.sub { color: var(--zacht); font-size: 20px; max-width: 60ch; margin-bottom: 36px; }
section { padding: 96px 0; scroll-margin-top: 80px; }
section.strak { padding-top: 0; }

/* Knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 14px 26px; border: 2px solid transparent; border-radius: var(--r-knop); font: 600 17px/1.3 "DM Sans", sans-serif; color: var(--wit); background: var(--violet); text-decoration: none; cursor: pointer; transition: background .15s; }
.knop:hover { background: var(--violet-donker); }
.knop.tweede { color: var(--druif); background: var(--mango); }
.knop.tweede:hover { background: #F7BA3C; }
.knop.stil { color: var(--violet); background: none; border-color: var(--rand); }
.knop.stil:hover { background: var(--lavendel); }
.knop.klein { min-height: 44px; padding: 10px 18px; font-size: 15px; }

/* Kop */
.kop { position: sticky; top: 0; z-index: 5; background: rgba(255, 248, 237, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rand); }
.kop .wrap { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.kop .logo { width: 128px; flex: none; }
.kop nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.kop nav a { color: var(--druif); text-decoration: none; padding: 9px 14px; border-radius: 10px; font-weight: 500; font-size: 16px; }
.kop nav a:hover { background: var(--lavendel); color: var(--violet); }
.kop nav .knop { margin-left: 8px; }
.kop nav a.knop, .kop nav a.knop:hover {color:var(--wit);background:var(--violet);}
.taalkeuze { font: 500 15px "DM Sans", sans-serif; color: var(--druif); background: var(--wit); border: 1px solid var(--rand); border-radius: 10px; padding: 8px 10px; margin-left: 8px; max-width: 150px; }
[dir=rtl] .kop nav { margin-left: 0; margin-right: auto; }
[dir=rtl] .lijst li, [dir=rtl] .vinkjes li, [dir=rtl] .plan li, [dir=rtl] .vertrouwen li { padding-left: 0; padding-right: 34px; }
[dir=rtl] .lijst li::before, [dir=rtl] .lijst li::after, [dir=rtl] .vinkjes li::before, [dir=rtl] .plan li::before, [dir=rtl] .vertrouwen li::before { left: auto; right: 0; }
[dir=rtl] .lijst li::after { right: 6px; }
[dir=rtl] .plan li::before { right: 2px; }
.vertaalnoot { background: var(--mango); color: var(--druif); font-size: 14px; text-align: center; padding: 8px 16px; }
.vertaalnoot a { color: var(--violet); margin-inline-start: 6px; }
.juridisch-noot { background: var(--mango); color: var(--druif); border-radius: 14px; padding: 14px 18px; margin: 0 0 26px; font-size: 15px; }
html[lang=nl] .juridisch-noot { display: none; }

/* Held */
.held { padding: 88px 0 56px; text-align: center; }
.held h1 { max-width: 16ch; margin-inline: auto; }
.held h1 em { font-style: normal; color: var(--violet); }
.held .sub { margin-inline: auto; margin-top: 26px; font-size: 21px; }
.held .acties { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.held .noot { color: var(--zacht); font-size: 15px; margin-top: 18px; }
.vinkjes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; margin: 44px auto 0; padding: 0; list-style: none; color: var(--zacht); font-size: 16px; font-weight: 500; }
.vinkjes li { padding-left: 26px; position: relative; }
.vinkjes li::before { content: ""; position: absolute; left: 0; top: 7px; width: 13px; height: 7px; border-left: 2.5px solid var(--groen); border-bottom: 2.5px solid var(--groen); transform: rotate(-45deg); }

/* De productweergave: een bewerkervenster, gebouwd in HTML */
.venster { background: var(--wit); border-radius: var(--r-groot); box-shadow: 0 30px 80px rgba(45, 33, 69, .14), 0 2px 0 var(--rand); overflow: hidden; margin: 56px auto 0; max-width: 1040px; }
.venster .balk { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--rand); background: #FBF9FF; }
.venster .balk i { width: 11px; height: 11px; border-radius: 50%; background: var(--rand); display: inline-block; }
.venster .balk span { margin-left: 12px; font-size: 13px; color: var(--zacht); background: var(--wit); border: 1px solid var(--rand); border-radius: 8px; padding: 3px 12px; }
.mock { display: grid; grid-template-columns: 180px 1fr; min-height: 420px; }
.mock .zijbalk { border-right: 1px solid var(--rand); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.mock .zijbalk b { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); font-weight: 600; margin: 12px 8px 4px; }
.mock .zijbalk span { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 8px; color: var(--druif); }
.mock .zijbalk span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.8px solid currentColor; opacity: .55; flex: none; }
.mock .zijbalk span.actief { background: var(--lavendel); color: var(--violet); font-weight: 600; }
.mock .zijbalk span.actief::before { opacity: 1; }
.mock .werk { background: var(--ivoor); padding: 26px; display: grid; place-items: start center; }
.blad { background: var(--wit); width: min(100%, 520px); aspect-ratio: 1 / 1.1; box-shadow: 0 1px 3px rgba(0,0,0,.14), 0 10px 30px rgba(45,33,69,.10); padding: 34px 38px; position: relative; font-size: 12.5px; line-height: 1.5; color: #1a1a1a; }
.blad h4 { font: 700 20px/1.2 Helvetica, Arial, sans-serif; margin: 0 0 4px; }
.blad .kl { color: #555; font-size: 11.5px; margin-bottom: 20px; }
.blad table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 26px; }
.blad th { text-align: left; font-weight: 700; padding: 4px 0; border-bottom: 1px solid #ddd; }
.blad td { padding: 4px 0; }
.blad td:last-child, .blad th:last-child { text-align: right; }
.blad tr.totaal td { font-weight: 700; border-top: 1px solid #333; }
.blad .akkoord { margin-top: 14px; font-weight: 700; }
.blad .lijn { width: 220px; border-bottom: 1px solid #333; height: 54px; position: relative; }
.handtekening { position: absolute; left: 6px; bottom: 6px; font: 400 30px/1 "Great Vibes", cursive; color: #101030; white-space: nowrap; }
.handtekening small { position: absolute; left: 2px; top: 34px; font: 400 7px/1 "DM Sans", sans-serif; color: #595966; white-space: nowrap; }
.stempel { position: absolute; right: 30px; bottom: 54px; width: 190px; border: 1.5px double #1d4ed8; outline: 1px solid #1d4ed8; outline-offset: -5px; border-radius: 6px; padding: 7px 9px; color: #1d4ed8; transform: rotate(-6deg); font: 400 7px/1.35 Helvetica, Arial, sans-serif; background: rgba(255,255,255,.6); }
.stempel b { display: block; font-size: 10.5px; letter-spacing: .02em; text-transform: uppercase; }
.stempel hr { border: 0; border-top: 1px solid #1d4ed8; margin: 4px 0; }
.stempel span { display: block; }
.stempel span b { display: inline; font-size: 7px; text-transform: none; }

/* Drie waarom-blokken */
.drie { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.kaart { background: var(--wit); border-radius: var(--r-paneel); padding: 32px; }
.kaart .nr { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--lavendel); color: var(--violet); font: 800 18px var(--kop); margin-bottom: 18px; }
.kaart p { margin: 0; color: var(--zacht); }
.kaart.lav { background: var(--lavendel); }

/* Tweekoloms blokken */
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.twee.om > :first-child { order: 2; }
.lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lijst li { padding-left: 34px; position: relative; }
.lijst li::before { content: ""; position: absolute; left: 0; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--lavendel); }
.lijst li::after { content: ""; position: absolute; left: 6px; top: 10px; width: 9px; height: 5px; border-left: 2.2px solid var(--violet); border-bottom: 2.2px solid var(--violet); transform: rotate(-45deg); }
.lijst b { display: block; }
.lijst span { color: var(--zacht); }

/* Tekenpagina-weergave: een kaart zoals de klant hem krijgt */
.tekenkaart { background: var(--wit); border-radius: var(--r-groot); box-shadow: 0 30px 80px rgba(45,33,69,.14), 0 2px 0 var(--rand); padding: 30px; max-width: 460px; margin-inline: auto; }
.tekenkaart .van { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tekenkaart .van img { width: 70px; }
.tekenkaart .van div { font-size: 14px; color: var(--zacht); }
.tekenkaart .van b { display: block; color: var(--druif); font-size: 15px; }
.tekenkaart .doc { border: 1px solid var(--rand); border-radius: 14px; padding: 16px; margin-bottom: 14px; font-size: 13px; color: #333; background: #fff; }
.tekenkaart .doc b { display: block; font: 700 15px Helvetica, Arial, sans-serif; margin-bottom: 6px; }
.tekenkaart .doc i { display: block; height: 7px; border-radius: 4px; background: #eee; margin: 6px 0; }
.tekenkaart .doc i.k { width: 60%; }
.vak { border: 2px dashed var(--violet); background: rgba(96,66,200,.07); border-radius: 10px; padding: 14px; color: var(--violet); font-weight: 600; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.vak.klaar { border-style: solid; background: rgba(30,158,106,.08); border-color: var(--groen); color: var(--druif); }
.vak .krab { font: 400 28px/1 "Great Vibes", cursive; color: #101030; }
.vak small { display: block; font-size: 11px; color: var(--zacht); font-weight: 400; }
.tekenkaart .knop { width: 100%; }
.tekenkaart .code { text-align: center; font-size: 13px; color: var(--zacht); margin-top: 12px; }
.tekenkaart .code b { font-family: Consolas, monospace; letter-spacing: .3em; color: var(--druif); background: var(--lavendel); padding: 2px 8px; border-radius: 6px; }

/* Stappen */
.stappen { counter-reset: stap; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stap { background: var(--wit); border-radius: var(--r-paneel); padding: 30px; }
.stap::before { counter-increment: stap; content: counter(stap, decimal-leading-zero); display: block; font: 800 34px/1 var(--kop); color: var(--violet); margin-bottom: 14px; }
.stap p { margin: 0; color: var(--zacht); }

/* Vertrouwen */
.vertrouwen { background: var(--druif); color: var(--ivoor); border-radius: var(--r-groot); padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.vertrouwen h2 { color: var(--wit); }
.vertrouwen .sub { color: #CFC6E6; }
.vertrouwen ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.vertrouwen li { padding-left: 30px; position: relative; }
.vertrouwen li b { display: block; color: var(--wit); }
.vertrouwen li::before { content: ""; position: absolute; left: 0; top: 10px; width: 14px; height: 8px; border-left: 2.5px solid var(--mango); border-bottom: 2.5px solid var(--mango); transform: rotate(-45deg); }
.vertrouwen .mascotte { width: min(240px, 60%); justify-self: center; }

/* Toepassingen */
.chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.chip { background: var(--wit); border-radius: 14px; padding: 18px 20px; font-weight: 600; display: flex; align-items: center; gap: 12px; }
.chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mango); flex: none; }

/* Licentie */
.licentie { background: var(--wit); border-radius: var(--r-groot); padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.licentie .acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Plannen */
.veld { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--druif); border-radius: 10px; color: var(--druif); background: var(--wit); width: 100%; }
textarea.veld { resize: vertical; }
.prijzen-kop { text-align: center; }
.prijzen-kop .sub { margin-bottom: 22px; }
.periode-wissel { display: inline-flex; background: var(--wit); border: 1px solid var(--rand); border-radius: 14px; padding: 4px; margin-bottom: 32px; }
.periode-wissel button { font: 600 15px/1.2 "DM Sans", sans-serif; color: var(--druif); background: none; border: 0; border-radius: 10px; padding: 10px 18px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.periode-wissel button.actief { background: var(--violet); color: var(--wit); }
.periode-wissel small { font-size: 12px; font-weight: 600; background: var(--mango); color: var(--druif); padding: 2px 8px; border-radius: 8px; }
.plannen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.plan { position: relative; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-groot); padding: 28px 26px; display: flex; flex-direction: column; gap: 12px; }
.plan h3 { margin: 0; }
.plan .voor { color: var(--zacht); font-size: 15px; margin: 0; min-height: 3.2em; }
.plan .bedrag b { display: block; font: 800 2.1rem/1 var(--kop); letter-spacing: -.03em; }
.plan .bedrag small { display: block; color: var(--zacht); font-size: 13px; margin-top: 6px; }
.plan .knop { width: 100%; }
.plan ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 9px; font-size: 15px; }
.plan li { padding-left: 24px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 11px; height: 6px; border-left: 2.2px solid var(--violet); border-bottom: 2.2px solid var(--violet); transform: rotate(-45deg); }
.plan.uitgelicht { border: 2px solid var(--violet); box-shadow: 0 20px 50px rgba(96, 66, 200, .14); }
.plan .tag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--mango); color: var(--druif); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 10px; white-space: nowrap; }
.plan.enterprise { background: var(--druif); color: var(--ivoor); border-color: var(--druif); }
.plan.enterprise .voor, .plan.enterprise .bedrag small { color: #CFC6E6; }
.plan.enterprise li::before { border-color: var(--mango); }
.enterprise-blok { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; background: var(--lavendel); border-radius: var(--r-groot); padding: clamp(32px, 5vw, 64px); }
.enterprise-blok .kaart { padding: 28px; }

/* Vragen */
.vragen { display: grid; gap: 10px; max-width: 820px; }
details { background: var(--wit); border-radius: 14px; padding: 4px 24px; }
summary { cursor: pointer; font-weight: 700; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 24px/1 var(--kop); color: var(--violet); }
details[open] summary::after { content: "–"; }
details p { color: var(--zacht); margin: 0 0 18px; }

/* Slot */
.slot { text-align: center; background: var(--lavendel); border-radius: var(--r-groot); padding: clamp(40px, 6vw, 72px) 24px; }
.slot h2 { max-width: 20ch; margin-inline: auto; }
.slot .acties { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 10px; }

/* Voet */
footer { padding: 40px 0 56px; color: var(--zacht); font-size: 15px; }
footer .wrap { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 40px; align-items: center; }
footer .logo { width: 110px; }
footer .regel { font: 800 20px/1.2 var(--kop); color: var(--druif); letter-spacing: -.02em; }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
footer a { color: var(--zacht); }

@media (max-width: 900px) {
  section { padding: 64px 0; }
  .twee, .twee.om, .vertrouwen, .licentie, .enterprise-blok { grid-template-columns: 1fr; }
  .plannen { grid-template-columns: 1fr; }
  .twee.om > :first-child { order: 0; }
  .stappen { grid-template-columns: 1fr; }
  .mock { grid-template-columns: 1fr; }
  .mock .zijbalk { display: none; }
  .mock .werk { padding: 16px; }
  .blad { padding: 22px; font-size: 11px; }
  .stempel { right: 14px; bottom: 30px; width: 150px; }
  .kop nav a:not(.knop) { display: none; }
  .kop nav .knop { white-space: nowrap; padding-inline: 14px; }
  .taalkeuze { max-width: 108px; padding-inline: 6px; }
  footer .wrap { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Echte productbeelden per onderwerp. */
.tool-overzicht { display:grid;grid-template-columns:minmax(250px,.8fr) minmax(0,1.3fr);gap:32px;align-items:start; }
.tool-onderwerpen {display:grid;gap:12px;}
.tool-onderwerp {font:inherit;text-align:left;background:transparent;border:1px solid var(--rand);border-radius:16px;padding:18px 20px;cursor:pointer;color:var(--druif);width:100%;}
.tool-onderwerp b {display:block;font-size:1.08rem;margin-bottom:6px;}
.tool-onderwerp span {display:block;color:var(--zacht);font-size:.95rem;line-height:1.6;}
.tool-onderwerp[aria-pressed=true] {background:var(--lavendel);border-color:var(--violet);box-shadow:0 0 0 1px var(--violet);}
.tool-onderwerp:focus-visible {outline:3px solid var(--violet);outline-offset:3px;}
.tool-beeld {margin:0;background:white;border:1px solid var(--rand);border-radius:20px;overflow:hidden;box-shadow:0 22px 45px rgba(42,35,69,.1);}
.tool-beeld[hidden] {display:none;}
.tool-beeld img {display:block;width:100%;height:auto;}
.tool-beeld figcaption {padding:16px 20px;font-size:.88rem;color:var(--zacht);}
.tool-noot {font-size:.85rem;color:var(--zacht);margin:18px 4px;}
.tool-voorbeelden {position:sticky;top:100px;}
@media(max-width:800px) {.tool-overzicht{grid-template-columns:1fr;gap:24px}.tool-voorbeelden{position:static}.tool-onderwerp{padding:14px 16px}}

/* Compact navigation keeps every destination available on small screens. */
.menu-knop {display:none;}
.sla-over {position:fixed;top:8px;left:16px;z-index:20;transform:translateY(-150%);background:var(--wit);padding:12px 20px;border-radius:10px;}
.sla-over:focus {transform:none;}
@media(max-width:1320px) {
  .kop.menu-klaar .wrap {justify-content:space-between;min-height:76px;}
  .kop.menu-klaar .menu-knop {display:inline-flex;border:1px solid var(--rand);border-radius:10px;background:var(--wit);color:var(--druif);font:600 16px 'DM Sans',sans-serif;padding:12px 20px;cursor:pointer;}
  .kop.menu-klaar nav {display:none;position:absolute;top:100%;right:20px;width:min(360px,calc(100vw - 40px));margin:0;padding:16px;background:var(--ivoor);border:1px solid var(--rand);border-radius:0 0 18px 18px;box-shadow:0 18px 35px #2d214520;max-height:calc(100dvh - 90px);overflow:auto;}
  .kop.menu-open nav {display:flex;flex-direction:column;align-items:stretch;gap:4px;}
  .kop.menu-klaar nav a:not(.knop) {display:block;}
  .kop.menu-klaar nav .knop, .kop.menu-klaar .taalkeuze {margin:6px 0 0;max-width:none;width:100%;}
}