/* =====================================================================
   BrickMix v2 — zakelijk.css
   Eigen, duidelijk professionelere visuele taal voor de zakelijke hub.
   Volledig gescoped op body[data-page="zakelijk"] zodat niets lekt naar
   de particuliere pagina's. Insteek: navy + gold (i.p.v. speels oranje),
   strakkere hoeken, uppercase getrackte labels, donkere banden, stats.
   ===================================================================== */

body[data-page="zakelijk"]{
  --zk-navy:      #12263E;
  --zk-navy-2:    #1E3A5F;
  --zk-navy-3:    #0C1B2E;
  --zk-gold:      #E4B24A;
  --zk-gold-ink:  #C7922A;
  --zk-gold-soft: #FBF4E3;
  --zk-steel:     #EEF2F7;
  --zk-line:      #DCE3EC;
  /* Strakkere geometrie dan de particuliere pagina's. */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
}

/* ---------- labels: uppercase, getrackt, gouden streep i.p.v. stud ---------- */
body[data-page="zakelijk"] .eyebrow{
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.72rem;
  font-weight:800;
  color:var(--zk-gold-ink);
  gap:10px;
}
body[data-page="zakelijk"] .eyebrow::before{
  width:24px; height:3px; border-radius:2px;
  background:var(--zk-gold); box-shadow:none;
}
body[data-page="zakelijk"] .section-head h2{
  letter-spacing:-0.02em;
}

/* ---------- hero: strakker, donkerder, met gouden accentlijn ---------- */
body[data-page="zakelijk"] .hero--bg{ background-color:var(--zk-navy-3); }
body[data-page="zakelijk"] .hero--bg .hero-overlay{
  background:
    linear-gradient(180deg, oklch(0.18 0.04 258 / 0.62), oklch(0.12 0.04 258 / 0.86)),
    linear-gradient(90deg, oklch(0.12 0.04 258 / 0.72), oklch(0.12 0.04 258 / 0.10));
}
body[data-page="zakelijk"] .hero--bg::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:2;
  background:linear-gradient(90deg, var(--zk-gold), transparent 60%);
}
body[data-page="zakelijk"] .hero--bg .eyebrow{ color:var(--zk-gold); }
body[data-page="zakelijk"] .hero h1{ letter-spacing:-0.03em; }

/* ---------- knoppen: navy-primair met gouden hover (i.p.v. oranje) ---------- */
body[data-page="zakelijk"] .btn-primary{
  background:var(--zk-navy-2); color:#fff;
  box-shadow:0 1px 2px oklch(0.20 0.05 258 / 0.30);
  border-radius:var(--radius);
}
body[data-page="zakelijk"] .btn-primary:hover{
  background:var(--zk-navy); box-shadow:0 3px 12px oklch(0.20 0.05 258 / 0.34);
}
body[data-page="zakelijk"] .btn-white{
  background:var(--zk-gold); color:var(--zk-navy-3); border-color:var(--zk-gold);
}
body[data-page="zakelijk"] .btn-white:hover{ background:#EFC163; }
body[data-page="zakelijk"] .btn{ border-radius:var(--radius); }

/* ---------- stats-strip onder de hero (corporate signature) ---------- */
body[data-page="zakelijk"] .zk-stats-wrap{ background:var(--zk-navy); }
body[data-page="zakelijk"] .zk-stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid oklch(1 0 0 / 0.12); border-radius:var(--radius-lg);
  overflow:hidden;
}
body[data-page="zakelijk"] .zk-stat{
  padding:26px 22px; text-align:center;
  border-right:1px solid oklch(1 0 0 / 0.10);
}
body[data-page="zakelijk"] .zk-stat:last-child{ border-right:0; }
body[data-page="zakelijk"] .zk-stat-n{
  display:block; font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:800;
  color:#fff; line-height:1.05; letter-spacing:-0.02em;
}
body[data-page="zakelijk"] .zk-stat-l{
  display:block; margin-top:8px; font-size:.76rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--zk-gold);
}

/* ---------- USP-kaarten: vlak, omlijnd, gouden icoon-accent ---------- */
body[data-page="zakelijk"] .usp-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border:1px solid var(--zk-line); border-radius:var(--radius-lg); overflow:hidden; background:#fff;
}
body[data-page="zakelijk"] .usp-card h3{ margin:12px 0 6px; }
body[data-page="zakelijk"] .usp-card p{ margin:0; font-size:.94rem; line-height:1.55; }
body[data-page="zakelijk"] .usp-ic{ display:inline-flex; align-items:center; justify-content:center; }
body[data-page="zakelijk"] .routes--3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
body[data-page="zakelijk"] .usp-card{
  border:0; border-radius:0; padding:28px 24px;
  border-right:1px solid var(--zk-line); border-bottom:1px solid var(--zk-line);
  position:relative;
}
body[data-page="zakelijk"] .usp-card::before{
  content:""; position:absolute; left:0; top:0; width:3px; height:0;
  background:var(--zk-gold); transition:height .2s var(--ease);
}
body[data-page="zakelijk"] .usp-card:hover::before{ height:100%; }
body[data-page="zakelijk"] .usp-ic{
  width:44px; height:44px; border-radius:var(--radius);
  background:var(--zk-gold-soft); color:var(--zk-gold-ink);
}
body[data-page="zakelijk"] .usp-card h3{ font-size:1.02rem; letter-spacing:-0.01em; }

/* ---------- routes-kaarten: gouden bovenbalk, strak ---------- */
body[data-page="zakelijk"] .routes .route{
  background:#fff; border:1px solid var(--zk-line); border-radius:var(--radius-lg);
  padding:0 0 24px; overflow:hidden; box-shadow:none;
  transition:border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
body[data-page="zakelijk"] .routes .route:hover{
  border-color:var(--zk-navy-2); transform:translateY(-3px); box-shadow:var(--shadow);
}
body[data-page="zakelijk"] .routes .route-media{
  display:block; margin:0; border-radius:0; position:relative; border-top:3px solid var(--zk-gold);
}
body[data-page="zakelijk"] .routes .route-media img{ border-radius:0; aspect-ratio:16/10; object-fit:cover; width:100%; }
body[data-page="zakelijk"] .routes .route h3{ padding:20px 22px 0; margin:0; }
body[data-page="zakelijk"] .routes .route p{ padding:10px 22px 0; margin:0; color:var(--ink-2); }
body[data-page="zakelijk"] .routes .route .btn{ margin:18px 22px 0; }

/* ---------- "veel gebruikt voor": outlined uppercase chips ---------- */
body[data-page="zakelijk"] .recog{ gap:10px 10px; }
body[data-page="zakelijk"] .recog span{
  background:#fff; border:1px solid var(--zk-line);
  text-transform:uppercase; letter-spacing:.08em; font-size:.74rem; font-weight:700;
  color:var(--zk-navy-2); border-radius:var(--radius); padding:9px 14px;
}
/* Weg met de speelse oranje scheidings-stud tussen chips. */
body[data-page="zakelijk"] .recog span + span::before{ display:none; }

/* ---------- procflow: navy nummers i.p.v. speels ---------- */
body[data-page="zakelijk"] .procstep-n{ background:var(--zk-navy-2); color:#fff; }
body[data-page="zakelijk"] .procflow-line{ color:var(--zk-line); }

/* ---------- FAQ: strak, gouden open-indicator ---------- */
body[data-page="zakelijk"] .faq-item{ border-bottom:1px solid var(--zk-line); }
body[data-page="zakelijk"] .faq-q{ letter-spacing:-0.01em; }
body[data-page="zakelijk"] .faq-item.open .faq-q{ color:var(--zk-navy-2); }
body[data-page="zakelijk"] .faq-q::after{ color:var(--zk-gold-ink); }

/* ---------- slot-CTA: donkere navy-band met gouden accent ---------- */
body[data-page="zakelijk"] .cta-band{
  background:linear-gradient(135deg, var(--zk-navy) 0%, var(--zk-navy-3) 100%);
  border:1px solid oklch(1 0 0 / 0.08); position:relative; overflow:hidden;
}
body[data-page="zakelijk"] .cta-band::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--zk-gold), transparent 55%);
}
body[data-page="zakelijk"] .cta-band .btn-primary{ background:var(--zk-gold); color:var(--zk-navy-3); }
body[data-page="zakelijk"] .cta-band .btn-primary:hover{ background:#EFC163; }

/* ---------- prijskaarten (excl. btw) ---------- */
body[data-page="zakelijk"] .zk-prices{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch;
}
body[data-page="zakelijk"] .zk-price{
  display:flex; flex-direction:column; align-items:flex-start;
  background:#fff; border:1px solid var(--zk-line); border-radius:var(--radius-lg);
  padding:26px 24px; position:relative;
}
body[data-page="zakelijk"] .zk-price--feature{
  border-color:var(--zk-navy-2); box-shadow:0 10px 30px oklch(0.20 0.05 258 / 0.10);
}
body[data-page="zakelijk"] .zk-price--feature::before{
  content:"Meest gekozen"; position:absolute; top:-11px; left:24px;
  background:var(--zk-gold); color:var(--zk-navy-3);
  font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  padding:4px 10px; border-radius:999px;
}
body[data-page="zakelijk"] .zk-price-tag{
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em;
  color:var(--zk-gold-ink);
}
body[data-page="zakelijk"] .zk-price-grp{ margin-top:6px; color:var(--ink-2); font-size:.92rem; }
body[data-page="zakelijk"] .zk-price-amt{
  margin-top:16px; font-size:clamp(1.9rem,3.4vw,2.5rem); font-weight:800;
  color:var(--zk-navy); letter-spacing:-0.02em; line-height:1;
}
body[data-page="zakelijk"] .zk-price-amt--sm{ font-size:clamp(1.3rem,2.4vw,1.7rem); }
body[data-page="zakelijk"] .zk-price-per{
  margin-top:6px; color:var(--ink-3); font-size:.82rem; text-transform:uppercase; letter-spacing:.06em;
}
body[data-page="zakelijk"] .zk-price .btn{ margin-top:auto; width:100%; margin-top:20px; }
body[data-page="zakelijk"] .zk-price-note{
  margin-top:18px; text-align:center; color:var(--ink-2); font-size:.9rem;
}
body[data-page="zakelijk"] .zk-price-note a{ color:var(--zk-navy-2); font-weight:700; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  body[data-page="zakelijk"] .zk-stats{ grid-template-columns:repeat(2,1fr); }
  body[data-page="zakelijk"] .zk-stat:nth-child(2){ border-right:0; }
  body[data-page="zakelijk"] .zk-stat:nth-child(1),
  body[data-page="zakelijk"] .zk-stat:nth-child(2){ border-bottom:1px solid oklch(1 0 0 / 0.10); }
  body[data-page="zakelijk"] .usp-grid{ grid-template-columns:repeat(2,1fr); }
  body[data-page="zakelijk"] .routes--3{ grid-template-columns:1fr; }
  body[data-page="zakelijk"] .zk-prices{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
}
@media (max-width:560px){
  body[data-page="zakelijk"] .zk-stats{ grid-template-columns:1fr; }
  body[data-page="zakelijk"] .zk-stat{ border-right:0; border-bottom:1px solid oklch(1 0 0 / 0.10); }
  body[data-page="zakelijk"] .zk-stat:last-child{ border-bottom:0; }
  body[data-page="zakelijk"] .usp-grid{ grid-template-columns:1fr; }
}