/* ─────────────────────────────────────────────────────────────
   HappiMeds - Losse blokken
   Partner- en adviseursboxen, het organogram, het evaluatiepaneel, de
   praktijkvoorbeelden, de stappenrij, de Budiyu-strip en de telefoonmockups.
   ───────────────────────────────────────────────────────────── */
/* Onze aanpak: staccato stappenregel in de hero */
.hero-vh { min-height: 75vh; }

/* Partnerbox (Over-pagina): intensieve samenwerkingen */
.partnerbox { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.partnergrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin-top: 34px; }
.partner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.partner .partner-logo { width: 210px; height: 90px; margin-bottom: 18px; }
/* Brede woordmerken (PharmaPartners): meer breedte, geen kaderpadding */
#partner-pharmapartners { width: 280px; }
#partner-pharmapartners::part(frame) { padding: 0; }
.partner h3 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--navy); }
.partner .partner-sub { font-size: 17.5px; color: var(--ink); font-weight: 600; margin-top: 4px; }

/* Adviseursbox (Over-pagina): strategische adviseurs, zonder foto */
.adv-title { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); text-align: center; }
.advisorbox:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.advisorbox {
  margin-top: 62px; padding-top: 52px; background: none;
  border: 0; border-top: 1px solid rgba(5,63,92,.10); border-radius: 0;
}
.advisorgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 44px; margin-top: 22px; }
.advisor {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; border-radius: 10px;
  padding: 10px 6px; text-decoration: none;
  transition: transform .2s;
}
.advisor:hover { transform: translateY(-1px); }
.advisor:hover .adv-name { color: var(--blue-text); }
.advisor .adv-name { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--navy); white-space: nowrap; }
.advisor .adv-role { font-size: 16px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.advisor .adv-li { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--blue-text); }
.advisor:hover .adv-li { color: var(--navy); }

/* Netwerk: apotheeklijstjes met logo, adres en website */
.netlink { display: inline-block; font-size: 16px; font-weight: 700; color: var(--blue-text); text-decoration: none; margin-top: 8px; }
.netlink:hover { color: var(--navy); text-decoration: underline; }

/* Organogram: Ovidius bovenaan, stippellijn naar apotheken + LZF */
.orgtree { margin-top: 40px; display: flex; flex-direction: column; align-items: center; }
/* Punt Daan (2026-08-17): Ovidius stond hier drie keer naast elkaar, als logo,
   als kop en als webadres. Alleen het logo en het adres zijn over, en die staan
   nu onder elkaar in plaats van naast elkaar; naast een logo van 186px bleef er
   anders een halflege regel over. Het mobiele blok deed dit al. */
.org-parent {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: none; border: 0; border-radius: 0;
  padding: 0 4px 26px; box-shadow: none;
}
.org-parent::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%; z-index: 1;
  background: var(--blue); border: 3.5px solid var(--navy);
  box-shadow: 0 0 0 5px rgba(66,158,189,.22), 0 0 0 9px var(--paper);
}
.org-parent .netlink { margin-top: 0; white-space: nowrap; }
.org-parent-logo { width: 186px; height: 90px; flex-shrink: 0; }
.netlogo { box-sizing: border-box; padding: 8px; object-fit: contain; display: block; }
.partner-logo { box-sizing: border-box; padding: 6px; object-fit: contain; display: block; }
#partner-enmasse { background: #1A2331; padding: 14px 18px; border-radius: 12px; }
.team-photo { background: #fff; border-radius: 50%; object-fit: cover; display: block; }
.org-stem { width: 0; height: 30px; border-left: 2px dashed rgba(5,63,92,.22); }
.org-children {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: 100%;
  border-top: 2px dashed rgba(5,63,92,.20); padding-top: 30px;
}
.org-child {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px;
  background: none; border: 0; border-radius: 0;
  padding: 8px 12px 0; box-shadow: none;
}
.org-child::before {
  content: ""; position: absolute; left: 50%; top: -37px; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: white; border: 3px solid var(--blue);
  box-shadow: 0 0 0 5px rgba(66,158,189,.18), 0 0 0 9px var(--paper);
}
.org-child .netlogo { width: 160px; height: 76px; margin-bottom: 10px; }
.org-child strong { font-size: 19px; font-weight: 800; color: var(--navy); }
.org-child small { font-size: 16px; color: var(--muted); line-height: 1.5; }
.org-child .netlink { margin-top: 3px; font-size: 16px; padding: 4px 6px; }

/* Evaluatiepanel (donker navy + route-textuur) */
.evalpanel {
  margin-top: 52px; background: var(--navy); border-radius: var(--radius-lg); 
  padding: 56px 60px; position: relative; overflow: hidden; color: white;
  background-image: var(--dots-dark); background-size: 23px 23px;
}
.evalpanel::before, .evalpanel::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.evalpanel::before { width: 340px; height: 340px; right: -90px; top: -120px; border: 44px solid rgba(255,255,255,.045); }
.evalpanel::after { width: 190px; height: 190px; right: 140px; bottom: -100px; border: 30px solid rgba(247,173,25,.09); }
.evalpanel .kicker { color: #93CBDE; display: flex; width: max-content; margin-bottom: 4px; }
.evalpanel .kicker::before { background: linear-gradient(90deg, rgba(255,255,255,.95) 50%, var(--blue) 50%); }
.evalpanel h3 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.02em; line-height: 1.18; margin-top: 12px; text-wrap: balance; }
.evalpanel p { font-size: 16px; color: rgba(255,255,255,.72); margin-top: 16px; max-width: 660px; line-height: 1.7; text-wrap: pretty; }
.evalpanel-inner { position: relative; z-index: 1; }
.evalloop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
.evalloop .pill {
  padding: 11px 20px; border-radius: 100px; border: 1.5px dashed rgba(255,255,255,.38);
  font-weight: 700; font-size: 14.5px; white-space: nowrap;
}
.evalloop .arrow { color: #7FBFD8; flex-shrink: 0; }
.evalloop .again {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 6px;
  color: var(--yellow); font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
}
/* Lichte variant (Voor wie): zelfde opbouw, rustige tint */
.evalpanel.light { background: none; border-radius: 0; padding: 8px 0 0; color: var(--navy); 
  background-image: var(--dots); background-size: 24px 24px;
  
}
.evalpanel.light::before { border-color: rgba(66,158,189,.12); }
.evalpanel.light::after { border-color: rgba(247,173,25,.18); }
.evalpanel.light .kicker { color: var(--blue-text); }
.evalpanel.light .kicker::before { background: linear-gradient(90deg, var(--navy) 50%, var(--blue) 50%); }
.evalpanel.light p { color: var(--body-c); }
.evalpanel.light .evalloop .pill { background: linear-gradient(180deg, #fff, var(--tint)); color: var(--navy); border: 1px solid var(--line-blue); border-style: solid; box-shadow: 0 1px 2px rgba(5,63,92,.06); }
.evalpanel.light .evalloop .arrow { color: var(--blue-text); }
.evalpanel.light .evalloop .again { color: var(--orange-ink); }

/* Praktijkvoorbeelden (ZBC): zachte overlopende band, zoals overige pagina's */
.exsec {
  background:
    linear-gradient(90deg, var(--paper) 0%, rgba(223,237,243,0) 20%, rgba(223,237,243,0) 80%, var(--paper) 100%),
    linear-gradient(180deg, var(--paper) 0%, #DFEDF3 18%, #DFEDF3 68%, var(--paper) 100%);
  color: var(--ink);
}
.exsec .kicker { color: var(--blue-text); }
.exsec .kicker::before { background: linear-gradient(90deg, var(--navy) 50%, var(--blue) 50%); }
.exsec .title { color: var(--navy); }
.exlist { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.exline { border-top: 1px solid var(--line-blue); padding: 18px 4px 4px 0; display: flex; flex-direction: column; }
.exsec .exline { border-color: var(--line-blue);  }
.exline-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px dashed var(--line-blue); }
.exline-head .cicon { width: 38px; height: 38px; border-radius: 12px; background: var(--tint); color: var(--blue-text); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.exline-head h3 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; color: var(--navy); }
.xsteps { list-style: none; margin: 0; padding: 0; position: relative; flex-grow: 1; }
.xsteps::before { content: ""; position: absolute; left: 14px; top: 18px; bottom: 18px; border-left: 1.5px dashed #BFD9E4; }
.xstep { display: flex; align-items: center; gap: 12px; padding: 5px 0; }
.xstep .xs-ic {
  width: 28px; height: 28px; border-radius: 50%; background: var(--tint); color: var(--blue-text);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  position: relative; box-shadow: 0 0 0 3px white;
}
.xstep .xs-txt { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.xs-txt abbr { text-decoration: underline dotted rgba(5,63,92,.45); text-underline-offset: 2px; cursor: help; }
.xs-tag abbr { text-decoration: none; cursor: help; }
.xs-tag {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .07em;
  color: var(--amber-ink); background: var(--amber-tint); border-radius: 100px; padding: 2.5px 8px; margin-right: 7px;
}
.xresult {
  margin-top: 12px; display: flex; align-items: center; gap: 9px;
  background: var(--amber-tint); border: 1px solid #F2D9A4; border-radius: 100px;
  padding: 8px 14px; font-size: 13px; font-weight: 800; color: var(--navy);
}
.xresult svg { color: var(--orange-ink); flex-shrink: 0; }
/* Tweak-variant: rijen */
.exlist.rows { grid-template-columns: 1fr; }
.exlist.rows .exline { display: grid; grid-template-columns: 260px 1fr; gap: 8px 30px; align-items: center; padding: 20px 26px; }
.exlist.rows .exline-head { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.exlist.rows .xsteps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 20px; }
.exlist.rows .xsteps::before { display: none; }
.exlist.rows .xstep .xs-ic { box-shadow: none; }
.exlist.rows .xresult { grid-column: 2; margin-top: 2px; justify-self: start; }

/* Bullets (waarom samenwerken) */
.blist { max-width: 620px; margin: 36px auto 0; display: grid; gap: 15px; }
.blist > div { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.blist svg { flex-shrink: 0; margin-top: 3px; color: var(--blue-text); }
.blist b { color: var(--navy); font-weight: 800; }
.blist > div > span { color: var(--body-c); font-weight: 500; }

/* Compacte pagina's */
body.compact section { padding: 60px 0; }
body.compact .hero.sub { padding: 128px 0 48px; }

/* Steps (werkwijze) */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 52px; }
.step { counter-increment: step; padding: 26px 22px 0 0; position: relative; }
.step::before {
  content: "Stap 0" counter(step) " / 05";
  font-family: var(--font-mono); font-size: 11px; color: var(--orange-ink); font-weight: 500;
  display: block; margin-bottom: 14px;
}
.step h3 { font-size: 17px; font-weight: 800; margin-bottom: 6px; color: var(--navy); }
.step p { font-size: 15px; color: var(--body-c); line-height: 1.6; }

/* SDK-badges (home) */
.sdk-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* SDK feature + Budiyu-strip (home) */
.sdk-split { align-items: center; }
.sdk-split .sdk-visual { display: flex; justify-content: center; transform: translateX(-34px); }
.sdk-split .sdk-visual > img:not(.pm-flat) { width: 100%; max-width: 300px; height: auto; filter: drop-shadow(0 24px 44px rgba(5,63,92,.20)); }
.sdk-badges.light { gap: 10px; margin-top: 22px; }
.sdk-badges.light span {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--line-blue); color: var(--navy);
  font-size: 13px; font-weight: 700; letter-spacing: .005em; padding: 8px 16px 8px 13px; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(5,63,92,.05), 0 10px 22px -14px rgba(5,63,92,.22);
  transition: border-color .2s, box-shadow .2s;
}
.sdk-badges.light span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--tint-deep); flex-shrink: 0; }
.sdk-badges.light span:hover { border-color: var(--blue); box-shadow: 0 1px 2px rgba(5,63,92,.06), 0 16px 30px -16px rgba(5,63,92,.28); }
/* Compacte hero-kaarten (Voor wie) */
body[data-page="zbckliniek"] .hero.sub .card { padding: 16px 18px; }
body[data-page="zbckliniek"] .hero.sub .card .tag { margin-bottom: 8px; }
body[data-page="zbckliniek"] .hero.sub .card h3 { font-size: 16px; margin-bottom: 4px; }
body[data-page="zbckliniek"] .hero.sub .card p { font-size: 15px; line-height: 1.55; }

.budiyu-strip { margin-top: 72px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: center; }
.budiyu-strip .tag { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; background: var(--amber-tint); color: var(--amber-ink); margin-bottom: 10px; }
.budiyu-strip .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); animation: soondot 3.2s cubic-bezier(.22,1,.36,1) infinite; }
@keyframes soondot { 0% { box-shadow: 0 0 0 0 rgba(247,173,25,.5); } 60% { box-shadow: 0 0 0 7px rgba(247,173,25,0); } 100% { box-shadow: 0 0 0 0 rgba(247,173,25,0); } }
@media (prefers-reduced-motion: reduce) { .budiyu-strip .tag::before { animation: none; } }
.budiyu-strip h3 { font-size: 25px; font-weight: 800; letter-spacing: -.01em; line-height: 1.35; max-width: 560px; text-wrap: pretty; color: var(--navy); }
/* De cursieve slotletter leunt over de spatie heen; iets extra ruimte erna. */
.budiyu-strip h3 i { padding-right: .28em; }
.budiyu-strip p { font-size: 17.5px; color: var(--body-c); line-height: 1.7; margin-top: 14px; max-width: 560px; text-wrap: pretty; }

.budiyu-strip .budiyu-wordmark { width: 200px; height: auto; display: block; margin: 20px 0 22px; }
/* Let op: de ruststand krijgt zijn kleur van .budiyu-strip p (0,1,1), die zwaarder
   weegt dan .btn-budiyu (0,1,0). Een eigen color hier deed dus niets en is verwijderd.
   De hover-regel hieronder (0,2,0) wint wel en blijft daarom staan. */
.btn-budiyu { background: none; box-shadow: none; border: none; padding: 0; border-radius: 0; cursor: default; }
.btn-budiyu:hover { background: none; color: #4F6047; }
.budiyu-strip .btn-budiyu { margin-top: 0; }
.budiyu-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 30px; }
.budiyu-links { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 7px; border-radius: 100px; background: #EDF1E7; border: 1px solid #D5DFC9; }
.budiyu-links a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 100px; font-size: 15.5px; font-weight: 700; color: #4F6047; text-decoration: none; transition: background .18s, color .18s, box-shadow .18s; }
.budiyu-links a:hover { background: #fff; color: #3F4D39; box-shadow: 0 1px 2px rgba(45,58,36,.06), 0 8px 18px -10px rgba(45,58,36,.3); }
.budiyu-links svg { flex-shrink: 0; opacity: .75; }
.bd-hl { font-weight: 700; color: #4F6047; }
/* Telefoon-mockups: perspectiefframe met uitgesneden scherm */
.bphone-col { display: flex; justify-content: center; }
.pmock { --pmk: .4; --pmw: 504; position: relative; width: calc(var(--pmw) * var(--pmk) * 1px); height: calc(1240px * var(--pmk)); flex-shrink: 0; filter: drop-shadow(0 26px 40px rgba(5,63,92,.22)); }
.pm-flat { height: calc(1240px * .4); width: auto; filter: drop-shadow(0 26px 40px rgba(5,63,92,.22)); }
.pm-stage { position: absolute; top: 0; left: 0; width: calc(var(--pmw) * 1px); height: 1240px; transform: scale(var(--pmk)); transform-origin: 0 0; }
.pm-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.pm-scr { position: absolute; top: 0; left: 0; width: 620px; height: 1344px; transform-origin: 0 0; overflow: hidden; background: #F3F5F2; z-index: 1; }
.pm-scr > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pm-right .pm-scr { border-radius: 46px; transform: matrix3d(0.670681,0.030415,0,0.000075,0.036755,0.897056,0,0,0,0,1,0,54.764,17.978,0,1); }
.budiyu-strip .pm-scr img.bd-scr { opacity: 0; animation: bdcycle 12s linear infinite; }
.budiyu-strip .pm-scr img.bd-scr:nth-of-type(1) { animation-delay: 0s; }
.budiyu-strip .pm-scr img.bd-scr:nth-of-type(2) { animation-delay: -8s; }
.budiyu-strip .pm-scr img.bd-scr:nth-of-type(3) { animation-delay: -4s; }
@keyframes bdcycle { 0%, 28.8% { opacity: 1; } 33.3%, 95.4% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .budiyu-strip .pm-scr img.bd-scr { animation: none; opacity: 0; transition: opacity .45s linear; } .budiyu-strip .pm-scr img.bd-scr.bd-on { opacity: 1; } }