:root{--ink:#0b4f5b;--muted:#66727c;--brand:#0b4f5b;--brand2:#8cab78;--paper:#fff;--soft:#edf3ef;--warm:#fff5e8;--ok:#247a4d;--bad:#a33b35;--line:#dbe5e3;--shadow:0 14px 38px #073a4318}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:17px/1.58 system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:#fbf8f2}button,input,textarea{font:inherit}.top{position:sticky;top:0;z-index:10;background:#ffffffed;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.topin{max-width:1160px;margin:auto;padding:10px 20px;display:flex;gap:18px;align-items:center}.logo{font-weight:850;color:var(--brand);white-space:nowrap}.bar{height:10px;background:#dfe8e3;border-radius:9px;overflow:hidden;flex:1}.bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f58220,var(--brand2));transition:.4s}.pct{font-weight:800;min-width:46px;text-align:right}.layout{max-width:1160px;margin:24px auto;display:grid;grid-template-columns:250px 1fr;gap:24px;padding:0 20px}.side{position:sticky;top:75px;align-self:start;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:var(--shadow)}.side button{width:100%;text-align:left;border:0;background:none;padding:10px;border-radius:10px;color:var(--ink);cursor:pointer}.side button:hover,.side button.active{background:var(--soft);color:var(--brand)}.side small{display:block;color:var(--muted);margin-left:10px}.content{min-width:0}.screen{display:none;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:clamp(22px,5vw,52px);box-shadow:var(--shadow);min-height:680px}.screen.active{display:block}.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--brand);font-weight:800;font-size:.78rem}.hero{background:linear-gradient(135deg,#edf3ef,#fff5e8);overflow:hidden}.hero h1{font-size:clamp(2.2rem,6vw,4.4rem);line-height:1.02;margin:.25em 0}.hero p{max-width:700px;font-size:1.16rem}.meta{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0}.pill{background:#fff;border:1px solid var(--line);padding:7px 12px;border-radius:999px}.btn{border:0;border-radius:12px;background:var(--brand);color:white;padding:12px 19px;font-weight:750;cursor:pointer}.btn:hover{filter:brightness(.92)}.btn.secondary{background:white;color:var(--brand);border:1px solid var(--brand)}.nav{display:flex;justify-content:space-between;gap:12px;margin-top:34px}.card{border:1px solid var(--line);border-radius:16px;padding:20px;margin:18px 0;background:#fff}.soft{background:var(--soft)}.warm{background:var(--warm)}.step{display:grid;grid-template-columns:42px 1fr;gap:14px;margin:16px 0}.num{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-weight:850}.prompt{position:relative;background:#0b4f5b;color:white;border-radius:14px;padding:19px;margin:15px 0;white-space:pre-wrap}.copy{position:static;display:block;margin:14px 0 0 auto;border:0;border-radius:8px;padding:8px 11px;background:#ffffff24;color:white;cursor:pointer}.copy.done{background:var(--ok)}.check label{display:block;padding:12px;border:1px solid var(--line);border-radius:11px;margin:9px 0;cursor:pointer}.check label:hover{background:var(--soft)}.feedback{display:none;padding:13px;border-radius:10px;margin-top:10px}.feedback.show{display:block}.feedback.ok{background:#e7f5ed;color:#175c37}.feedback.no{background:#fff0ed;color:#852e29}textarea{width:100%;min-height:110px;border:1px solid #adc2cc;border-radius:12px;padding:13px}.save-note{font-size:.9rem;color:var(--ok);display:none}.lesson-title{font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.1;margin:.25em 0}.visual{background:#f7fbfc;border:1px solid var(--line);border-radius:18px;padding:12px;margin:22px 0}.visual svg{display:block;width:100%;height:auto}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:16px}.timer{display:flex;align-items:center;gap:15px;padding:14px;border:1px dashed var(--brand2);border-radius:12px}.clock{font-size:1.5rem;font-weight:850;font-variant-numeric:tabular-nums}.privacy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.privacy-grid button{text-align:left;border:1px solid var(--line);background:white;border-radius:10px;padding:12px;cursor:pointer}.privacy-grid button.safe{background:#e7f5ed;border-color:#72b38c}.privacy-grid button.unsafe{background:#fff0ed;border-color:#df8d86}.badge{display:inline-grid;place-items:center;width:88px;height:88px;border-radius:50%;background:linear-gradient(145deg,var(--brand),var(--brand2));color:#fff;font-weight:900}.certificate{border:8px double var(--brand);padding:36px;text-align:center;background:#fffdf6}.certificate input{border:0;border-bottom:2px solid var(--brand);text-align:center;font-size:1.4rem;max-width:440px;width:100%}@media(max-width:800px){.layout{grid-template-columns:1fr}.side{position:static;display:flex;overflow:auto}.side button{min-width:150px}.side small{display:none}.twocol,.privacy-grid{grid-template-columns:1fr}.screen{min-height:0}.topin{gap:9px}.logo{font-size:.85rem}}
    .hero h1{font-size:clamp(1.75rem,4.8vw,3.6rem)}.prompt{background:#f4f8f6;color:var(--ink);border:2px solid #b7ccc5;border-left:7px solid #f58220;padding:19px}.copy{background:var(--brand);color:#fff;padding:8px 12px}.copy.done{background:var(--ok)}
    @media print{.top,.side,.nav,.copy,.timer .btn{display:none!important}.layout{display:block;margin:0}.screen{display:none;box-shadow:none;border:0}.screen.active{display:block}.certificate{margin-top:30mm}}
    .certificate{position:relative;overflow:hidden;border:7px double #0f3d3e;padding:34px 44px;background:linear-gradient(145deg,#fffdf8,#f3e9d6);color:#0f3d3e;font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;box-shadow:inset 0 0 0 5px #fff}.certificate:before,.certificate:after{content:"";position:absolute;pointer-events:none}.certificate:before{top:0;left:0;width:100%;height:12px;background:linear-gradient(90deg,#0f3d3e 0 58%,#2e7d74 58% 72%,#7ba68d 72% 86%,#f28c35 86%)}.certificate:after{right:-70px;bottom:-90px;width:250px;height:250px;border-radius:50%;border:38px solid #7ba68d33}.cert-brand{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 auto 14px}.cert-logo{width:92px;height:92px;object-fit:contain;border-radius:50%;background:#fff}.cert-wordmark{font-size:2.15rem;font-weight:800;line-height:1;color:#0f3d3e;letter-spacing:-.04em}.cert-wordmark .ai{color:#f28c35}.cert-tagline{margin-top:8px;color:#2e7d74;font-size:.95rem;font-weight:650;letter-spacing:.01em}.certificate h2{margin:.35em 0;color:#0f3d3e;font-size:2.25rem}.certificate .cert-rule{width:78px;height:5px;border-radius:6px;background:#f28c35;margin:0 auto 18px}.certificate input{color:#0f3d3e;border-bottom-color:#f28c35;font-weight:700;background:transparent}.certificate .cert-course{color:#2e7d74}.certificate #date{font-weight:650}.certificate .btn{background:#0f3d3e}
    .twocol>.full-width{grid-column:1/-1}.building-blocks-input{min-height:245px;resize:vertical}.screen h2 .pill{display:none}
    @page{size:A4 landscape;margin:0}
    @media print{html,body{width:297mm;height:210mm;margin:0!important;padding:0!important;background:#fff!important}body *{visibility:hidden!important}.certificate,.certificate *{visibility:visible!important}.certificate{position:fixed!important;inset:0!important;width:297mm!important;height:210mm!important;margin:0!important;padding:10mm 22mm 12mm!important;border:12px double #0f3d3e!important;box-shadow:inset 0 0 0 6px #fff!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:space-evenly!important;background:linear-gradient(145deg,#fffdf8,#f3e9d6)!important;color:#0f3d3e!important;print-color-adjust:exact!important;-webkit-print-color-adjust:exact!important}.certificate:before{height:5mm!important}.certificate:after{right:-18mm!important;bottom:-24mm!important;width:82mm!important;height:82mm!important;border-width:13mm!important;print-color-adjust:exact!important;-webkit-print-color-adjust:exact!important}.certificate .btn{display:none!important;visibility:hidden!important}.cert-brand{gap:7mm!important;margin:3mm auto 1mm!important}.cert-logo{width:40mm!important;height:40mm!important;print-color-adjust:exact!important;-webkit-print-color-adjust:exact!important}.cert-wordmark{font-size:12mm!important}.cert-tagline{font-size:5mm!important;margin-top:3mm!important}.certificate .cert-rule{width:32mm!important;height:2mm!important;margin:1mm auto 2mm!important}.certificate input{font-size:9mm!important;line-height:1.25!important;max-width:165mm!important;min-height:14mm!important;background:transparent!important;color:#0f3d3e!important;border-bottom-width:1mm!important}.certificate h2{font-size:15mm!important;line-height:1!important;margin:1mm 0!important}.certificate p{font-size:5.5mm!important;line-height:1.4!important;margin:1mm 0!important}.certificate .cert-course{font-size:6mm!important}.certificate #date{font-size:5mm!important;margin-top:2mm!important}}

/* =========================================================
   BegrijpAI Academy — huisstijl en gebruiksverbeteringen
========================================================= */
:root{
  --orange:#f58220;
  --orange-dark:#d96a0d;
  --cream:#fbf8f2;
  --petrol:#0b4f5b;
  --green:#8cab78;
}

body{
  min-height:100vh;
  background:
    radial-gradient(circle at 92% 5%, rgba(140,171,120,.12), transparent 26rem),
    var(--cream);
}

.top{
  border-bottom-color:rgba(11,79,91,.12);
  box-shadow:0 5px 20px rgba(7,58,67,.06);
}

.topin{
  max-width:1240px;
  min-height:66px;
}

.brandlockup{
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--petrol);
  text-decoration:none;
  white-space:nowrap;
}

.brandlockup img{
  width:42px;
  height:42px;
  object-fit:contain;
}

.brandtext{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}

.brandtext strong{
  color:var(--petrol);
  font-size:1.02rem;
  letter-spacing:-.02em;
}

.brandtext small{
  margin-top:4px;
  color:var(--orange);
  font-size:.67rem;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.toplink{
  color:var(--petrol);
  font-size:.82rem;
  font-weight:750;
  text-decoration:none;
}

.toplink:hover{
  color:var(--orange);
}

.layout{
  max-width:1240px;
  margin-top:30px;
  gap:28px;
}

.side{
  top:86px;
  padding:16px;
  border-radius:20px;
}

.side:before{
  content:"Cursusinhoud";
  display:block;
  padding:4px 10px 12px;
  color:var(--orange);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.side button{
  margin:2px 0;
  padding:11px 12px;
  border-left:3px solid transparent;
}

.side button:hover,
.side button.active{
  color:var(--petrol);
  border-left-color:var(--orange);
  background:var(--soft);
}

.screen{
  border-radius:24px;
  box-shadow:0 18px 46px rgba(7,58,67,.09);
}

.eyebrow{
  color:var(--orange);
}

.hero{
  background:
    radial-gradient(circle at 88% 10%, rgba(140,171,120,.18), transparent 22rem),
    linear-gradient(135deg,#edf3ef,#fff5e8);
}

.hero h1,
.lesson-title,
.screen h2{
  color:var(--petrol);
}

.btn,
.copy{
  background:var(--orange);
  color:#fff;
  box-shadow:0 9px 20px rgba(245,130,32,.18);
}

.btn:hover,
.copy:hover{
  background:var(--orange-dark);
  filter:none;
}

.btn.secondary{
  color:var(--petrol);
  border:1px solid rgba(11,79,91,.28);
  background:#fff;
  box-shadow:none;
}

.btn.secondary:hover{
  color:var(--petrol);
  border-color:var(--petrol);
  background:var(--soft);
}

.num{
  background:var(--petrol);
}

.prompt{
  color:var(--ink);
  border-color:#b7ccc5;
  border-left-color:var(--orange);
  background:#f4f8f6;
}

.pill{
  border-color:rgba(11,79,91,.14);
}

.card{
  border-color:rgba(11,79,91,.13);
  box-shadow:0 8px 22px rgba(7,58,67,.035);
}

.card.soft,
.soft{
  background:#edf3ef;
}

.card.warm,
.warm{
  background:#fff5e8;
}

textarea:focus,
input:focus{
  outline:3px solid rgba(245,130,32,.18);
  border-color:var(--orange);
}

.footer-note{
  max-width:1240px;
  margin:0 auto 28px;
  padding:0 20px;
  color:#78858e;
  font-size:.78rem;
  text-align:right;
}

@media(max-width:800px){
  .topin{
    flex-wrap:wrap;
  }

  .brandtext small,
  .toplink{
    display:none;
  }

  .bar{
    order:3;
    flex-basis:calc(100% - 55px);
  }

  .pct{
    order:4;
  }

  .side:before{
    display:none;
  }

  .side{
    top:auto;
    gap:5px;
    padding:10px;
    border-radius:15px;
  }

  .side button{
    min-width:165px;
    border-left:0;
    border-bottom:3px solid transparent;
  }

  .side button.active{
    border-bottom-color:var(--orange);
  }
}