/* Cursus Ramen Blinderen — design tokens & basisstijlen
   Bron: design_handoff_cursusramenblinderen/README.md + Cursus Ramen Blinderen.dc.html */

:root{
  --navy:#0F1B2A;
  --navy-2:#16273A;
  --orange:#C94E15;
  --orange-hover:#A83E10;
  --light:#F6F7F9;
  --white:#FFFFFF;
  --border:#E3E7EC;
  --border-light:#F0F2F4;
  --border-light-2:#F5F7F8;
  --text:#0F1B2A;
  --muted:#5A6B7B;
  --muted-2:#8A98A8;
  --muted-3:#98A6B4;
  --text-on-dark:#B9C4D0;
  --success:#16803F;
  --success-bg:rgba(22,132,73,.1);
  --warning:#B5720F;
  --warning-bg:rgba(200,120,20,.12);
  --info:#2E6B8F;
  --info-bg:rgba(46,107,143,.1);

  --shadow-card-hover:0 18px 40px -18px rgba(15,27,42,.28);
  --shadow-cta:0 12px 28px rgba(232,95,34,.32);
  --shadow-hero:0 40px 80px -24px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--light);
  color:var(--text);
  font-family:'Manrope',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--orange);text-decoration:none}
a:hover{color:var(--orange-hover)}
input,button,select,textarea{font-family:inherit}
img{max-width:100%;display:block}

h1,h2,h3{font-family:'Archivo',sans-serif}

/* ===== eyebrow / heading / lead ===== */
.eyebrow{
  font-family:'Archivo';font-weight:800;font-size:13px;
  letter-spacing:2.5px;text-transform:uppercase;color:var(--orange);
}
.h2{
  font-family:'Archivo';font-weight:900;font-size:clamp(30px,4.2vw,48px);
  line-height:1.05;letter-spacing:-1px;color:var(--text);margin:14px 0 16px;
}
.h2--light{color:#fff}
.lead{font-size:18px;line-height:1.65;color:var(--muted);max-width:560px}

/* ===== buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Archivo';font-weight:800;font-size:16px;letter-spacing:.2px;
  border-radius:12px;border:none;cursor:pointer;text-decoration:none;
  padding:16px 28px;
}
.btn-primary{background:var(--orange);color:#fff;box-shadow:var(--shadow-cta)}
.btn-primary:hover{background:var(--orange-hover);color:#fff}
.btn-ghost-dark{background:rgba(255,255,255,.06);color:#fff;border:2px solid rgba(255,255,255,.28)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-ghost-light{background:var(--light);color:var(--text);border:1px solid var(--border)}
.btn-block{width:100%;justify-content:center;box-sizing:border-box}

/* ===== layout helpers ===== */
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:1080px;margin:0 auto;padding:0 24px}
.wrap-content{max-width:820px;margin:0 auto;padding:0 24px}
.section{padding:96px 24px}
.section--tight{padding:80px 24px}
.bg-navy{background:var(--navy)}
.bg-light{background:var(--light)}
.bg-white{background:#fff}

.grid-2{display:grid;gap:24px;align-items:start}
@media(min-width:760px){.grid-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.grid-hero{display:grid;gap:56px;align-items:center}
@media(min-width:1080px){.grid-hero{grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr)}}
.grid-docent{display:grid;gap:52px;align-items:center}
@media(min-width:900px){.grid-docent{grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr)}}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.grid-cards-sm{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}

input[type=range]{
  -webkit-appearance:none;appearance:none;height:6px;border-radius:999px;
  background:var(--border);outline:none;width:100%;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--orange);cursor:pointer;box-shadow:0 3px 8px rgba(232,95,34,.4);border:3px solid #fff;
}
input[type=range]::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;background:var(--orange);cursor:pointer;border:3px solid #fff;
}

@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .7s ease both}
.fade-up-slow{animation:fadeUp .9s ease both}
.float-badge{animation:floatY 4s ease-in-out infinite}

/* ===== image placeholders (tot echte foto's aangeleverd zijn) ===== */
.img-slot{
  position:relative;width:100%;height:100%;min-height:160px;
  background:var(--navy-2);color:var(--text-on-dark);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:13px;line-height:1.5;padding:16px;
}
.img-slot--circle{border-radius:50%}

/* ===== header ===== */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--border);
}
.site-header__bar{
  max-width:1240px;margin:0 auto;padding:0 24px;height:74px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.site-header__logo img{height:40px;width:auto}
.site-nav{display:none;align-items:center;gap:26px}
.site-nav a{
  font-family:'Archivo';font-weight:700;font-size:15px;padding:8px 4px;
  letter-spacing:.2px;color:var(--text);text-decoration:none;
}
.site-nav a.active{color:var(--orange);border-bottom:2px solid var(--orange)}
.site-header__cta{
  display:none;align-items:center;background:var(--orange);color:#fff;
  padding:11px 20px;border-radius:10px;font-family:'Archivo';font-weight:800;
  font-size:14px;text-decoration:none;box-shadow:0 8px 20px rgba(232,95,34,.28);
}
.site-header__login{
  display:none;font-family:'Archivo';font-weight:700;font-size:14px;
  color:var(--text);text-decoration:none;
}
.site-header__login:hover{color:var(--orange)}
.burger{display:block;background:none;border:none;cursor:pointer;padding:6px}
.burger span{display:block;width:22px;height:2px;background:var(--text);margin:5px 0}
@media(min-width:900px){
  .site-nav{display:flex}
  .site-header__cta{display:inline-flex}
  .site-header__login{display:inline-flex}
  .burger{display:none}
}

.mobile-menu{
  position:fixed;inset:74px 0 0 0;z-index:90;background:var(--navy);
  display:none;flex-direction:column;padding:24px;overflow-y:auto;
}
.mobile-menu.is-open{display:flex}
.mobile-menu a{
  color:#fff;font-family:'Archivo';font-weight:700;font-size:22px;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);text-decoration:none;
}
.mobile-menu .btn-primary{margin-top:24px;text-align:center;font-size:17px}

/* ===== footer ===== */
.site-footer{background:var(--navy);color:var(--text-on-dark);padding:64px 24px 32px}
.site-footer__grid{
  max-width:1240px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;
}
.site-footer__brand img{height:36px;filter:brightness(0) invert(1);opacity:.95;margin-bottom:18px}
.site-footer__brand p{font-size:14px;line-height:1.6;color:var(--muted-2);margin:0 0 16px;max-width:300px}
.site-footer__social{display:flex;gap:12px}
.site-footer__social a{
  width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.site-footer__col-title{
  font-family:'Archivo';font-weight:800;font-size:14px;color:#fff;
  text-transform:uppercase;letter-spacing:1px;margin-bottom:18px;
}
.site-footer__col a{
  display:block;color:var(--muted-2);font-size:14.5px;padding:6px 0;text-decoration:none;
}
.site-footer__col a:hover{color:var(--orange)}
.site-footer__bottom{
  max-width:1240px;margin:44px auto 0;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;
  gap:12px;justify-content:space-between;font-size:13px;color:#5E6E7E;
}
.site-footer__bottom a{color:#5E6E7E}
.site-footer__bottom-links{display:flex;gap:18px;flex-wrap:wrap}

/* ===== sticky mobile cta (homepage) ===== */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-top:1px solid var(--border);padding:12px 16px;
  display:none;gap:12px;align-items:center;box-shadow:0 -8px 24px rgba(15,27,42,.12);
}
.sticky-cta__text{flex:1;line-height:1.2}
.sticky-cta__title{font-family:'Archivo';font-weight:800;font-size:16px}
.sticky-cta__sub{font-size:12px;color:var(--muted)}
.sticky-cta .btn-primary{padding:14px 22px;font-size:15px;white-space:nowrap}
body.is-home .sticky-cta{display:flex}
@media(min-width:960px){.sticky-cta{display:none !important}}

/* ===== module / feature cards ===== */
.module-card{
  background:var(--light);border:1px solid var(--border);border-radius:18px;
  padding:28px;transition:transform .2s,box-shadow .2s;
}
.module-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.module-card__icon{
  width:54px;height:54px;border-radius:14px;background:rgba(232,95,34,.1);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.module-card__no{font-family:'Archivo';font-weight:700;font-size:12px;color:var(--orange);margin-bottom:8px}
.module-card__title{font-family:'Archivo';font-weight:800;font-size:19px;margin:0 0 8px;letter-spacing:-.3px}
.module-card__desc{font-size:14.5px;color:var(--muted);line-height:1.55;margin:0}

.module-row{display:flex;gap:18px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;align-items:flex-start}
.module-row__icon{width:48px;height:48px;border-radius:12px;background:rgba(232,95,34,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ===== feature list items ===== */
.feature-item{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--border-light);font-size:15px;color:var(--text)}
.feature-item--light{border-top:1px solid rgba(255,255,255,.08);color:#E4EAF0}
.feature-box{display:flex;gap:14px;align-items:flex-start;background:var(--light);border:1px solid var(--border);border-radius:14px;padding:22px}
.feature-box span{font-size:16px;font-weight:600;line-height:1.4}

/* ===== compare cards ===== */
.compare-online{
  position:relative;background:#fff;border-radius:22px;padding:38px 32px;
  border:3px solid var(--orange);box-shadow:0 30px 60px -20px rgba(232,95,34,.4);
}
.compare-online__badge{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--orange);
  color:#fff;padding:7px 18px;border-radius:999px;font-family:'Archivo';font-weight:800;
  font-size:12px;letter-spacing:1px;white-space:nowrap;
}
.compare-fysiek{background:var(--navy-2);border-radius:22px;padding:38px 32px;border:1px solid rgba(255,255,255,.1)}
.compare-price{display:flex;align-items:baseline;gap:8px;margin-bottom:22px}
.compare-price__big{font-family:'Archivo';font-weight:900;font-size:46px}
.compare-price__strike{color:var(--muted-3);font-size:15px;text-decoration:line-through}

/* ===== testimonials ===== */
.testi-card{background:var(--light);border:1px solid var(--border);border-radius:20px;padding:30px;display:flex;flex-direction:column}
.testi-card__stars{color:var(--orange);font-size:18px;margin-bottom:14px;letter-spacing:2px}
.testi-card__quote{font-size:16px;line-height:1.65;color:#2A3A4A;margin:0 0 24px;flex:1}
.testi-card__avatar{width:52px;height:52px;border-radius:50%;overflow:hidden;flex-shrink:0;background:#dbe1e7}
.testi-card__name{font-family:'Archivo';font-weight:700;font-size:16px}
.testi-card__result{font-size:13px;color:var(--orange);font-weight:600}

/* ===== faq accordion ===== */
.faq-item{background:#fff;border:1px solid var(--border);border-radius:14px;margin-bottom:12px;overflow:hidden}
.faq-item__q{
  width:100%;text-align:left;background:none;border:none;padding:22px 24px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;
  font-family:'Archivo';font-weight:700;font-size:17px;color:var(--text);
}
.faq-item__icon{font-family:'Archivo';font-weight:400;font-size:26px;color:var(--orange);transition:transform .25s;flex-shrink:0}
.faq-item.is-open .faq-item__icon{transform:rotate(45deg)}
.faq-item__a{overflow:hidden;transition:max-height .3s ease;max-height:0}
.faq-item.is-open .faq-item__a{max-height:280px}
.faq-item__a p{margin:0;padding:0 24px 22px;font-size:15.5px;line-height:1.65;color:var(--muted)}

/* ===== before/after slider ===== */
.ba-slider{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(15,27,42,.35);user-select:none}
.ba-slider__after{position:absolute;inset:0}
.ba-slider__before{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.ba-slider__label{position:absolute;top:16px;background:rgba(15,27,42,.8);color:#fff;padding:6px 14px;border-radius:999px;font-family:'Archivo';font-weight:700;font-size:12px;letter-spacing:1px;pointer-events:none}
.ba-slider__label--before{left:16px}
.ba-slider__label--after{right:16px;background:var(--orange)}
.ba-slider__handle{position:absolute;top:0;bottom:0;left:50%;width:4px;transform:translateX(-50%);cursor:ew-resize;touch-action:none}
.ba-slider__handle-line{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 12px rgba(0,0,0,.4)}
.ba-slider__handle-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;color:var(--orange);font-family:'Archivo';font-weight:900;font-size:18px}

/* ===== calculator ===== */
.calc-tile{background:var(--navy-2);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px 22px}
.calc-tile__big{font-family:'Archivo';font-weight:900;font-size:32px;color:var(--orange)}
.calc-tile__big--white{color:#fff}
.calc-tile__label{font-size:13px;color:var(--text-on-dark)}
.calc-card{background:#fff;border-radius:22px;padding:34px;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.calc-row{margin-bottom:26px}
.calc-row input[type=range]{width:100%;display:block}
.calc-row__top{display:flex;justify-content:space-between;font-weight:700;font-size:15px;margin-bottom:12px}
.calc-row__value{color:var(--orange);font-family:'Archivo';font-weight:800}
.calc-result{background:var(--light);border-radius:16px;padding:22px;text-align:center}
.calc-result__label{font-size:13px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.calc-result__value{font-family:'Archivo';font-weight:900;font-size:44px;color:var(--text);line-height:1}

/* ===== final CTA gradient card ===== */
.final-cta{
  max-width:1080px;margin:0 auto;background:linear-gradient(135deg,var(--navy),var(--navy-2));
  border-radius:28px;padding:64px 40px;text-align:center;position:relative;overflow:hidden;
}
.final-cta__glow{position:absolute;top:-80px;left:-40px;width:320px;height:320px;background:radial-gradient(circle,rgba(232,95,34,.25),transparent 65%)}
.final-cta__inner{position:relative}

/* ===== blog ===== */
.blog-feat{display:grid;gap:0;background:var(--navy);border-radius:22px;overflow:hidden;text-decoration:none;margin-bottom:36px;box-shadow:0 24px 50px -24px rgba(15,27,42,.4)}
@media(min-width:760px){.blog-feat{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.blog-feat__img{aspect-ratio:16/10;background:var(--navy-2);min-height:220px}
.blog-feat__body{padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.blog-feat__title{font-family:'Archivo';font-weight:900;font-size:clamp(24px,3vw,34px);color:#fff;line-height:1.1;margin:14px 0 14px;letter-spacing:-.5px}
.blog-card{background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.blog-card:hover{box-shadow:0 18px 40px -18px rgba(15,27,42,.25);transform:translateY(-3px)}
.blog-card__img{aspect-ratio:16/10;background:#dbe1e7}
.blog-card__body{padding:24px;display:flex;flex-direction:column;flex:1}
.blog-card__cat{font-family:'Archivo';font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--orange)}
.blog-card__title{font-family:'Archivo';font-weight:800;font-size:19px;color:var(--text);line-height:1.25;margin:8px 0 10px;letter-spacing:-.3px}
.blog-card__excerpt{font-size:14px;color:var(--muted);line-height:1.55;margin:0 0 16px;flex:1}
.blog-card__read{font-size:13px;color:var(--muted-3);font-weight:600}

/* ===== forms ===== */
.form-input{width:100%;box-sizing:border-box;padding:14px 16px;border:1px solid #D5DBE1;border-radius:10px;font-size:15px;font-family:'Manrope';background:#fff;color:var(--text);outline:none}
textarea.form-input{resize:vertical}

/* ===== contact info cards ===== */
.contact-info-card{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px 22px}
.contact-info-card__icon{width:44px;height:44px;border-radius:12px;background:rgba(232,95,34,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-info-card__title{font-family:'Archivo';font-weight:700;font-size:15px}
.contact-info-card__value{font-size:14px;color:var(--muted);line-height:1.5}

/* ===== course dates (fysiek) ===== */
.date-row{display:flex;align-items:center;gap:22px;background:var(--light);border:1px solid var(--border);border-radius:16px;padding:20px 24px;flex-wrap:wrap}
.date-row__tile{text-align:center;background:var(--navy);color:#fff;border-radius:12px;padding:12px 16px;min-width:74px}
.date-row__day{font-family:'Archivo';font-weight:900;font-size:28px;line-height:1}
.date-row__month{font-size:12px;color:var(--text-on-dark);text-transform:uppercase;letter-spacing:1px}
.date-row__city{flex:1;min-width:160px}
.date-row__city-name{font-family:'Archivo';font-weight:800;font-size:19px}
.date-row__loc{font-size:14px;color:var(--muted)}
.spots-badge{font-family:'Archivo';font-weight:700;font-size:13px;padding:7px 14px;border-radius:999px;white-space:nowrap}
.spots-badge--low{background:rgba(232,95,34,.12);color:var(--orange-hover)}
.spots-badge--ok{background:var(--success-bg);color:var(--success)}
.date-row__btn{background:var(--orange);color:#fff;padding:12px 22px;border-radius:10px;font-family:'Archivo';font-weight:800;font-size:14px;text-decoration:none}

/* ===== schedule (dagindeling) ===== */
.schedule-item{display:flex;gap:20px;padding:16px 0;border-bottom:1px solid var(--border)}
.schedule-item__time{font-family:'Archivo';font-weight:800;font-size:15px;color:var(--orange);min-width:64px}
.schedule-item__title{font-weight:700;font-size:16px;margin-bottom:2px}
.schedule-item__desc{font-size:14px;color:var(--muted);line-height:1.5}

/* ===== value cards (over ons) ===== */
.value-card{background:var(--light);border:1px solid var(--border);border-radius:18px;padding:30px}
.value-card__icon{width:52px;height:52px;border-radius:14px;background:rgba(232,95,34,.1);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.value-card__title{font-family:'Archivo';font-weight:800;font-size:19px;margin:0 0 8px}
.value-card__desc{font-size:15px;color:var(--muted);line-height:1.6;margin:0}

/* ===== stat tiles ===== */
.stat-tile{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;text-align:center}
.stat-tile__big{font-family:'Archivo';font-weight:900;font-size:26px;color:var(--orange)}
.stat-tile__label{font-size:12px;color:var(--muted);line-height:1.3;margin-top:2px}

/* ===== koopbox (online sales) ===== */
.koopbox{max-width:560px;margin:0 auto;background:#fff;border-radius:24px;padding:44px 36px;box-shadow:0 40px 80px -24px rgba(0,0,0,.5);border:3px solid var(--orange);text-align:center}
.koopbox__badge{display:inline-block;background:rgba(232,95,34,.12);color:var(--orange);font-family:'Archivo';font-weight:800;font-size:12px;letter-spacing:1px;padding:7px 16px;border-radius:999px;margin-bottom:20px}
.koopbox__price{display:flex;align-items:baseline;gap:10px;justify-content:center;margin:16px 0 6px}
.koopbox__price-big{font-family:'Archivo';font-weight:900;font-size:56px;color:var(--text);line-height:1}
.koopbox__price-strike{color:var(--muted-3);font-size:18px;text-decoration:line-through}

/* ===== utility ===== */
.text-center{text-align:center}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===================================================================== */
/* ===== PORTAAL (cursisten-omgeving) ==================================== */
/* ===================================================================== */
body.portal{background:var(--light)}
.portal-shell{display:flex;min-height:100vh}

.portal-sidebar{
  position:fixed;top:0;bottom:0;left:0;z-index:30;width:240px;flex-shrink:0;
  background:var(--navy);display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .25s;
}
.portal-sidebar.is-open{transform:translateX(0)}
@media(min-width:960px){
  .portal-sidebar{position:sticky;transform:none;height:100vh}
}
.portal-sidebar__logo{padding:18px;border-bottom:1px solid rgba(255,255,255,.08)}
.portal-sidebar__logo-chip{background:#fff;border-radius:12px;padding:12px 14px;display:flex;align-items:center;justify-content:center}
.portal-sidebar__logo-chip img{width:100%;max-width:170px;height:auto;display:block}
.portal-nav{padding:16px 14px;flex:1;overflow-y:auto}
.portal-nav__item{
  width:100%;display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:4px;
  border:none;border-radius:11px;cursor:pointer;font-family:'Archivo';font-weight:700;font-size:15px;
  text-align:left;color:var(--text-on-dark);background:transparent;text-decoration:none;
}
.portal-nav__item.active{color:#fff;background:var(--orange)}
.portal-nav__item span:first-child{display:flex;width:20px;justify-content:center}
.portal-sidebar__user{padding:16px;border-top:1px solid rgba(255,255,255,.08)}
.portal-user-card{display:flex;align-items:center;gap:12px;padding:12px;background:rgba(255,255,255,.05);border-radius:12px}
.portal-user-card__avatar{width:38px;height:38px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;font-family:'Archivo';font-weight:800;color:#fff;flex-shrink:0}
.portal-user-card__name{font-family:'Archivo';font-weight:700;font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.portal-user-card__product{font-size:12px;color:var(--muted-2)}
.portal-user-card__logout{background:none;border:none;color:var(--muted-2);cursor:pointer;padding:4px;display:flex}

.portal-main{flex:1;min-width:0;display:flex;flex-direction:column}
.portal-topbar{
  position:sticky;top:0;z-index:20;background:rgba(246,247,249,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);padding:16px 28px;display:flex;align-items:center;gap:18px;
}
.portal-menu-btn{display:flex;width:42px;height:42px;align-items:center;justify-content:center;background:#fff;border:1px solid var(--border);border-radius:10px;font-size:18px;cursor:pointer;flex-shrink:0}
@media(min-width:960px){.portal-menu-btn{display:none}}
.portal-topbar__title{font-family:'Archivo';font-weight:900;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.5px;line-height:1.1}
.portal-topbar__sub{font-size:13px;color:var(--muted)}
.portal-topbar__progress{display:none;align-items:center;gap:12px}
@media(min-width:640px){.portal-topbar__progress{display:flex}}
.portal-topbar__bar{width:120px;height:8px;background:var(--border);border-radius:999px;overflow:hidden}
.portal-topbar__bar-fill{height:100%;background:var(--orange)}

.portal-content{flex:1;padding:28px;max-width:1200px;width:100%;box-sizing:border-box}
.portal-overlay{position:fixed;inset:0;background:rgba(15,27,42,.5);z-index:25;display:none}
.portal-overlay.is-open{display:block}
@media(min-width:960px){.portal-overlay{display:none !important}}

/* dashboard */
.portal-continue{background:linear-gradient(135deg,var(--navy),var(--navy-2));border-radius:20px;padding:32px;color:#fff;position:relative;overflow:hidden;margin-bottom:24px}
.portal-continue__glow{position:absolute;top:-80px;right:-40px;width:300px;height:300px;background:radial-gradient(circle,rgba(232,95,34,.2),transparent 65%)}
.portal-continue__grid{position:relative;display:grid;gap:28px;align-items:center}
@media(min-width:640px){.portal-continue__grid{grid-template-columns:1fr auto}}
.portal-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.portal-stat-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;display:flex;align-items:center;gap:14px}
.portal-stat-card__icon{width:44px;height:44px;border-radius:12px;background:rgba(232,95,34,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.portal-stat-card__value{font-family:'Archivo';font-weight:900;font-size:22px;line-height:1}
.portal-stat-card__label{font-size:13px;color:var(--muted)}
.portal-module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.portal-module-card{text-align:left;background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;cursor:pointer;display:flex;flex-direction:column;gap:14px;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.portal-module-card:hover{border-color:var(--orange);box-shadow:0 12px 28px -16px rgba(232,95,34,.4)}
.portal-module-card__top{display:flex;justify-content:space-between;align-items:flex-start}
.portal-module-card__icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.portal-module-badge{font-family:'Archivo';font-weight:700;font-size:11px;padding:4px 10px;border-radius:999px}
.portal-module-badge--new{background:#EEF1F4;color:var(--muted)}
.portal-module-badge--busy{background:rgba(232,95,34,.12);color:var(--orange-hover)}
.portal-module-badge--done{background:var(--success-bg);color:var(--success)}
.portal-module-card__no{font-family:'Archivo';font-weight:700;font-size:11px;color:var(--orange);margin-bottom:3px}
.portal-module-card__title{font-family:'Archivo';font-weight:800;font-size:16px;line-height:1.25}
.portal-module-card__bar{height:6px;background:#EEF1F4;border-radius:999px;overflow:hidden;margin-bottom:6px}
.portal-module-card__bar-fill{height:100%}
.portal-module-card__count{font-size:12px;color:var(--muted)}

/* course player */
.portal-player-grid{display:grid;gap:20px;align-items:start}
@media(min-width:980px){.portal-player-grid{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}}
.portal-video{background:var(--navy);border-radius:18px;overflow:hidden;aspect-ratio:16/9;position:relative}
.portal-video__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.portal-video__play-btn{width:76px;height:76px;border-radius:50%;background:rgba(232,95,34,.95);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(232,95,34,.5);color:#fff;font-size:26px}
.portal-lesson-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:26px;margin-top:20px}
.portal-curriculum{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden}
.portal-curriculum__head{padding:18px 20px;border-bottom:1px solid var(--border-light);font-family:'Archivo';font-weight:800;font-size:16px}
.portal-curriculum__body{max-height:560px;overflow-y:auto}
.portal-curriculum__module-title{padding:14px 20px;background:var(--light);font-family:'Archivo';font-weight:700;font-size:13px;color:var(--text);position:sticky;top:0}
.portal-lesson-row{width:100%;display:flex;align-items:center;gap:12px;padding:13px 20px;border:none;border-left:3px solid transparent;background:transparent;cursor:pointer;text-decoration:none;color:inherit}
.portal-lesson-row.active{border-left-color:var(--orange);background:#FFF6F2}
.portal-lesson-row__dot{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Archivo';font-weight:700;font-size:12px;background:#EEF1F4;color:var(--muted)}
.portal-lesson-row__dot--done{background:var(--success);color:#fff}
.portal-lesson-row__dot--active{background:var(--orange);color:#fff}
.portal-lesson-row__title{flex:1;text-align:left;font-size:14px}
.portal-lesson-row__dur{font-size:12px;color:var(--muted-3)}

/* downloads */
.portal-download-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;display:flex;gap:16px;align-items:center}
.portal-download-card__icon{width:52px;height:52px;border-radius:12px;background:rgba(232,95,34,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.portal-download-card__title{font-family:'Archivo';font-weight:700;font-size:15.5px}
.portal-download-card__meta{font-size:13px;color:var(--muted)}
.portal-download-card__btn{background:var(--navy);color:#fff;border:none;width:42px;height:42px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;text-decoration:none}

/* certificate */
.portal-cert-frame{background:#fff;border:1px solid var(--border);border-radius:20px;padding:8px;box-shadow:0 20px 50px -24px rgba(15,27,42,.3)}
.portal-cert-inner{border:2px solid var(--orange);border-radius:16px;padding:48px 40px;text-align:center;position:relative;background:linear-gradient(180deg,#fff,#FBFCFD)}
.portal-cert-seal{position:absolute;top:24px;right:24px;width:64px;height:64px;border-radius:50%;background:rgba(232,95,34,.1);display:flex;align-items:center;justify-content:center;color:var(--orange)}

/* account */
.portal-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px;margin-bottom:16px}
.portal-avatar-lg{width:64px;height:64px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;font-family:'Archivo';font-weight:800;font-size:24px;color:#fff}

/* ===================================================================== */
/* ===== BEHEER (admin dashboard) ======================================== */
/* ===================================================================== */
body.admin{background:var(--light)}
.admin-shell{display:flex;min-height:100vh}

.admin-sidebar{
  position:fixed;top:0;bottom:0;left:0;z-index:30;width:250px;flex-shrink:0;
  background:var(--navy);display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .25s;
}
.admin-sidebar.is-open{transform:translateX(0)}
@media(min-width:960px){.admin-sidebar{position:sticky;transform:none;height:100vh}}
.admin-sidebar__logo{padding:18px;border-bottom:1px solid rgba(255,255,255,.08)}
.admin-sidebar__logo-chip{background:#fff;border-radius:12px;padding:12px 14px;display:flex;align-items:center;justify-content:center}
.admin-sidebar__logo-chip img{width:100%;max-width:170px;height:auto;display:block}
.admin-nav{padding:14px;flex:1;overflow-y:auto}
.admin-nav__section{font-family:'Archivo';font-weight:700;font-size:11px;letter-spacing:1.5px;color:#5E6E7E;text-transform:uppercase;padding:8px 12px 6px}
.admin-nav__item{
  width:100%;display:flex;align-items:center;gap:12px;padding:11px 12px;margin-bottom:3px;
  border:none;border-radius:11px;cursor:pointer;font-family:'Archivo';font-weight:700;font-size:14.5px;
  text-align:left;color:var(--text-on-dark);background:transparent;text-decoration:none;
}
.admin-nav__item.active{color:#fff;background:var(--orange)}
.admin-nav__item span:first-child{display:flex;width:20px;justify-content:center}
.admin-nav__badge{background:var(--orange);color:#fff;font-family:'Archivo';font-weight:800;font-size:11px;padding:2px 8px;border-radius:999px;margin-left:auto}
.admin-nav__item.active .admin-nav__badge{background:rgba(255,255,255,.25)}
.admin-sidebar__foot{padding:16px;border-top:1px solid rgba(255,255,255,.08)}
.admin-back-link{display:flex;align-items:center;gap:10px;color:var(--muted-2);font-size:13px;padding:10px 12px;border-radius:10px;text-decoration:none}
.admin-back-link:hover{background:rgba(255,255,255,.06);color:#fff}
.admin-user-card{display:flex;align-items:center;gap:12px;padding:12px;margin-top:6px;background:rgba(255,255,255,.05);border-radius:12px}
.admin-user-card__avatar{width:38px;height:38px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;font-family:'Archivo';font-weight:800;color:#fff;flex-shrink:0}
.admin-user-card__name{font-family:'Archivo';font-weight:700;font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-user-card__role{font-size:12px;color:var(--muted-2)}
.admin-user-card__logout{background:none;border:none;color:var(--muted-2);cursor:pointer;padding:4px;display:flex;margin-left:auto}

.admin-main{flex:1;min-width:0;display:flex;flex-direction:column}
.admin-topbar{position:sticky;top:0;z-index:20;background:rgba(246,247,249,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);padding:16px 28px;display:flex;align-items:center;gap:18px}
.admin-menu-btn{display:flex;width:42px;height:42px;align-items:center;justify-content:center;background:#fff;border:1px solid var(--border);border-radius:10px;font-size:18px;cursor:pointer;flex-shrink:0}
@media(min-width:960px){.admin-menu-btn{display:none}}
.admin-topbar__title{font-family:'Archivo';font-weight:900;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.5px;line-height:1.1}
.admin-topbar__sub{font-size:13px;color:var(--muted)}
.admin-bell{width:42px;height:42px;border-radius:10px;background:#fff;border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.admin-bell__dot{position:absolute;top:9px;right:10px;width:8px;height:8px;background:var(--orange);border-radius:50%;border:2px solid #fff}
.admin-content{flex:1;padding:28px;max-width:1280px;width:100%;box-sizing:border-box}
.admin-overlay{position:fixed;inset:0;background:rgba(15,27,42,.5);z-index:25;display:none}
.admin-overlay.is-open{display:block}
@media(min-width:960px){.admin-overlay{display:none !important}}

/* kpi cards */
.admin-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:22px}
.admin-kpi-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px}
.admin-kpi-card__top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.admin-kpi-card__icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.admin-kpi-card__value{font-family:'Archivo';font-weight:900;font-size:30px;letter-spacing:-.5px;line-height:1}
.admin-kpi-card__label{font-size:13.5px;color:var(--muted);margin-top:4px}
.admin-trend{font-family:'Archivo';font-weight:800;font-size:12.5px;padding:3px 9px;border-radius:999px}
.admin-trend--up{background:var(--success-bg);color:var(--success)}
.admin-trend--down{background:rgba(232,95,34,.12);color:var(--orange-hover)}

/* dashboard grid: chart + upcoming */
.admin-dash-grid{display:grid;gap:16px;margin-bottom:22px}
@media(min-width:900px){.admin-dash-grid{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}}
.admin-panel{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px}
.admin-panel__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex-wrap:wrap;gap:8px}
.admin-panel__title{font-family:'Archivo';font-weight:800;font-size:18px}
.admin-panel__sub{font-size:13px;color:var(--muted)}
.admin-legend{display:flex;gap:14px;font-size:12px;font-weight:600}
.admin-legend span{display:flex;align-items:center;gap:6px}
.admin-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.admin-chart{display:flex;align-items:flex-end;gap:14px;height:200px;padding-top:10px}
.admin-chart__col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.admin-chart__bars{width:100%;display:flex;gap:4px;align-items:flex-end;justify-content:center;flex:1}
.admin-chart__bar{width:16px;border-radius:5px 5px 0 0}
.admin-chart__label{font-size:12px;color:var(--muted);font-weight:600}

.admin-upcoming-item{padding:14px 0;border-top:1px solid var(--border-light)}
.admin-upcoming-item:first-child{border-top:none}
.admin-upcoming-item__row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.admin-upcoming-item__city{font-family:'Archivo';font-weight:700;font-size:15px}
.admin-upcoming-item__date{font-size:12.5px;color:var(--muted)}
.admin-bar-track{height:7px;background:#EEF1F4;border-radius:999px;overflow:hidden}
.admin-bar-fill{height:100%}

/* tables */
.admin-table-card{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden}
.admin-table-card__head{padding:20px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-light)}
.admin-table-wrap{overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse;min-width:640px;font-size:14px}
.admin-table th{text-align:left;padding:14px 20px;font-family:'Archivo';font-weight:700;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted-2);border-bottom:1px solid var(--border-light);white-space:nowrap}
.admin-table td{padding:15px 20px;border-bottom:1px solid var(--border-light-2);white-space:nowrap}
.admin-avatar{width:32px;height:32px;border-radius:50%;color:#fff;font-family:'Archivo';font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.admin-name-cell{display:flex;align-items:center;gap:10px}

.admin-badge{font-family:'Archivo';font-weight:700;font-size:12px;padding:4px 11px;border-radius:999px;white-space:nowrap}
.admin-badge--success{background:var(--success-bg);color:var(--success)}
.admin-badge--warning{background:var(--warning-bg);color:var(--warning)}
.admin-badge--danger{background:rgba(232,95,34,.12);color:#C94E15}
.admin-badge--neutral{background:rgba(15,27,42,.08);color:var(--navy)}
.admin-badge--info{background:var(--info-bg);color:var(--info)}

/* stat tiles (bestellingen) */
.admin-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:22px}
.admin-stat-tile{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px}
.admin-stat-tile__label{font-size:13px;color:var(--muted);margin-bottom:6px}
.admin-stat-tile__value{font-family:'Archivo';font-weight:900;font-size:26px}

/* course date cards (praktijkdagen) */
.admin-date-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.admin-date-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px}
.admin-date-card__top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.admin-date-tile{text-align:center;background:var(--navy);color:#fff;border-radius:12px;padding:10px 14px;min-width:66px}
.admin-date-tile__day{font-family:'Archivo';font-weight:900;font-size:24px;line-height:1}
.admin-date-tile__month{font-size:11px;color:var(--text-on-dark);text-transform:uppercase;letter-spacing:1px}
.admin-date-card__city{font-family:'Archivo';font-weight:800;font-size:18px}
.admin-date-card__loc{font-size:13.5px;color:var(--muted);margin-bottom:16px}
.admin-date-card__actions{display:flex;gap:8px}
.admin-btn-ghost{flex:1;background:var(--light);border:1px solid var(--border);color:var(--text);padding:9px;border-radius:9px;font-family:'Archivo';font-weight:700;font-size:13px;cursor:pointer;text-decoration:none;text-align:center}

/* settings form */
.admin-field-label{display:block;font-family:'Archivo';font-weight:700;font-size:13px;margin-bottom:7px;color:#3A4A5A}
.admin-toggle{width:48px;height:28px;border-radius:999px;position:relative;flex-shrink:0;border:none;cursor:pointer;padding:0}
.admin-toggle.on{background:var(--orange)}
.admin-toggle.off{background:#D5DBE1}
.admin-toggle__knob{position:absolute;top:3px;width:22px;height:22px;background:#fff;border-radius:50%;transition:left .15s}
.admin-toggle.on .admin-toggle__knob{left:23px}
.admin-toggle.off .admin-toggle__knob{left:3px}