/* Oranjetalent SoftSkills v2. Compact, wetenschappelijk, blokken met kleur.
   Elke Big Five-dimensie heeft een eigen tint. Kleur is identiteit, nooit een oordeel. */

:root{
  --d-open:#6C4FC4;   --d-open-l:#f3f0fb;
  --d-cons:#1F7FA8;   --d-cons-l:#edf6fa;
  --d-extra:#FF7B00;  --d-extra-l:#fff3e8;
  --d-vriend:#0E9B77; --d-vriend-l:#eaf7f2;
  --d-stab:#B8860B;   --d-stab-l:#faf4e4;
}

.ss main{padding-bottom:0}
.ss .blokgrid{display:grid;gap:18px}
.ss .blok{border:1px solid var(--lijn);border-radius:14px;padding:26px 28px;background:var(--wit)}
.ss .blok .eyebrow{margin-bottom:10px}
.ss .blok h2{font-size:21px;letter-spacing:-.2px;margin-bottom:10px}
.ss .blok h3{font-size:16px;font-weight:700;margin-bottom:8px}
.ss .blok p{font-size:14.5px;color:#333;line-height:1.6}

/* Hero: compact, twee kolommen */
.ss-hero{background:var(--zwart);color:var(--wit);padding:56px 0 52px;position:relative;overflow:hidden}
.ss-hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.ss-merk{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.ss-merk .naam{font-size:15px;font-weight:700}
.ss-merk .label{font-size:15px;font-weight:300;letter-spacing:2.5px;text-transform:uppercase;color:#bbb}
.ss-subtitel{color:#a8a8a8;font-size:13.5px;margin-bottom:26px}
.ss-hero h1{font-size:clamp(28px,4vw,44px);font-weight:700;line-height:1.08;letter-spacing:-.7px;margin-bottom:16px}
.ss-hero .intro{color:#c9c9c9;font-size:15.5px;line-height:1.6;max-width:480px;margin-bottom:22px}
.ss-hero .kern{display:inline-block;border-left:3px solid var(--oranje);padding:4px 0 4px 14px;font-size:14px;color:var(--wit);max-width:480px}

/* Schaalmotief in de hero: vijf gekleurde punten */
.schalen{display:flex;flex-direction:column;gap:18px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:14px;padding:26px 28px}
.schaal .kop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.schaal .naam{font-size:12.5px;font-weight:600;letter-spacing:.3px;color:#eee}
.schaal .lijn{position:relative;height:2px;background:#3a3a3a;border-radius:1px}
.schaal .punt{position:absolute;top:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%}
.schaal .uiteinden{display:flex;justify-content:space-between;gap:14px;margin-top:6px;font-size:11px;color:#8f8f8f}
.schaal .uiteinden span:last-child{text-align:right}
.schalen .voetnoot{font-size:11.5px;color:#8f8f8f;border-top:1px solid #2a2a2a;padding-top:12px;margin-top:2px}

/* Sectie-ritme */
.ss section{padding:54px 0}
.ss .sectielabel{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
.ss .sectielabel .nr{font-size:12px;font-weight:700;color:var(--oranje);letter-spacing:1px}
.ss .sectielabel h2{font-size:clamp(22px,2.8vw,30px)}

/* Blok 1: waarom en hoe, naast elkaar */
.waaromhoe{grid-template-columns:1.15fr 1fr}
.hoe-stappen{display:flex;flex-direction:column;gap:0}
.hoe-stap{display:grid;grid-template-columns:26px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--lijn);align-items:baseline}
.hoe-stap:last-child{border-bottom:0;padding-bottom:0}
.hoe-stap .nr{font-size:12px;font-weight:700;color:var(--grijs)}
.hoe-stap.mens .nr{color:var(--oranje)}
.hoe-stap p{font-size:13.5px}
.hoe-stap p strong{font-weight:700;color:var(--zwart)}
.waarom-punten{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.waarom-punten div{border-top:2px solid var(--zwart);padding-top:10px}
.waarom-punten h3{font-size:13.5px;margin-bottom:4px}
.waarom-punten p{font-size:13px;color:var(--grijs)}

/* Blok 2: Big Five wat en waarom */
.bigfive-uitleg{grid-template-columns:1fr 1fr}
.bigfive-uitleg .blok.donker{background:var(--grijs-licht)}
.bronchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.bronchip{font-size:11.5px;color:var(--grijs);border:1px solid var(--lijn);border-radius:99px;padding:5px 12px;background:var(--wit)}
.bronchip strong{color:var(--zwart);font-weight:600}

/* Blok 3: de vijf dimensies, gekleurde kaarten */
.dimensies{grid-template-columns:repeat(6,1fr)}
.dimensie{border-radius:14px;padding:24px 24px 20px;border:1px solid transparent;grid-column:span 2}
.dimensie:nth-child(4){grid-column:2 / span 2}
.dimensie:nth-child(5){grid-column:4 / span 2}
.dimensie.open{background:var(--d-open-l);border-color:#e2daf5}
.dimensie.cons{background:var(--d-cons-l);border-color:#d5e9f2}
.dimensie.extra{background:var(--d-extra-l);border-color:#f7e2cd}
.dimensie.vriend{background:var(--d-vriend-l);border-color:#d2ece2}
.dimensie.stab{background:var(--d-stab-l);border-color:#efe3c2}
.dimensie .letter{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
.dimensie.open .letter,.dimensie.open .punt{color:var(--d-open);background-color:var(--d-open)}
.dimensie.cons .letter,.dimensie.cons .punt{color:var(--d-cons);background-color:var(--d-cons)}
.dimensie.extra .letter,.dimensie.extra .punt{color:var(--d-extra);background-color:var(--d-extra)}
.dimensie.vriend .letter,.dimensie.vriend .punt{color:var(--d-vriend);background-color:var(--d-vriend)}
.dimensie.stab .letter,.dimensie.stab .punt{color:var(--d-stab);background-color:var(--d-stab)}
.dimensie .letter{background:none!important}
.dimensie h3{font-size:17px;font-weight:700;margin-bottom:12px}
.dimensie .lijn{position:relative;height:2px;background:rgba(0,0,0,.14);border-radius:1px;margin-bottom:6px}
.dimensie .punt{position:absolute;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%}
.dimensie .uiteinden{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#555;margin-bottom:12px}
.dimensie .uiteinden span:last-child{text-align:right}
.dimensie .kort{font-size:13.5px;color:#222;line-height:1.55}
.dimensie details{margin-top:10px}
.dimensie summary{cursor:pointer;font-size:12.5px;font-weight:600;list-style:none;color:#222}
.dimensie summary::-webkit-details-marker{display:none}
.dimensie summary::before{content:"+ "}
.dimensie details[open] summary::before{content:"\2212 "}
.dimensie details p{margin-top:8px;font-size:13px;color:#444;line-height:1.6}
.dimensies-voetnoot{margin-top:16px;font-size:13px;color:var(--grijs)}

/* Blok 4: grenzen en privacy naast elkaar, compact */
.afspraken{grid-template-columns:1fr 1fr}
.afspraken ul{list-style:none;margin-top:6px}
.afspraken li{font-size:13.5px;color:#333;line-height:1.55;padding:8px 0 8px 20px;border-bottom:1px solid var(--lijn);position:relative}
.afspraken li:last-child{border-bottom:0}
.afspraken li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;border-radius:50%}
.afspraken .niet li::before{background:#bbb}
.afspraken .wel li::before{background:var(--oranje)}

/* Slotstrook */
.ss-slot{background:var(--zwart);color:var(--wit);padding:44px 0!important}
.ss-slot .container{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.ss-slot h2{font-size:20px;margin-bottom:6px}
.ss-slot p{color:#b5b5b5;font-size:14px;max-width:520px}
.ss-slot .acties{display:flex;gap:10px;flex-wrap:wrap}

@media (max-width:960px){
  .ss-hero .container{grid-template-columns:1fr;gap:36px}
  .waaromhoe,.bigfive-uitleg,.afspraken{grid-template-columns:1fr}
  .dimensies{grid-template-columns:1fr 1fr}
  .dimensie,.dimensie:nth-child(4),.dimensie:nth-child(5){grid-column:auto}
}
@media (max-width:600px){
  .dimensies{grid-template-columns:1fr}
  .waarom-punten{grid-template-columns:1fr}
  .ss section{padding:40px 0}
}