/* ─────────────────────────────────────────────────────────────
   HappiMeds - Nav en hero
   Knoppen, de vaste navigatiebalk, de hero van de home met de orbit-animatie,
   de badgerij en de partnerstrip eronder.
   ───────────────────────────────────────────────────────────── */
/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 100px;
  font-family: inherit; font-size: 15.5px; font-weight: 700; text-decoration: none;
  cursor: pointer; border: none;
  transition: background .18s, box-shadow .18s, border-color .18s, color .18s, transform .18s;
}
.btn:active { transform: scale(.96); transition-duration: .1s; }
.btn-amber {
  background: var(--yellow); color: var(--navy);
  box-shadow: inset 0 -2px 0 rgba(5,63,92,.18), 0 1px 2px rgba(5,63,92,.08);
}
.btn-amber:hover {
  background: var(--yellow-press); color: var(--navy);
  box-shadow: inset 0 -2px 0 rgba(5,63,92,.22), 0 10px 22px -8px rgba(242,127,12,.45);
  transform: translateY(-1px);
}
.btn-ghost { border: 2px solid var(--navy); color: var(--navy); background: white; }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue-text); background: white; }
.btn-line { border: 1.5px solid rgba(255,255,255,.35); color: white; background: transparent; }
.btn-line:hover { background: rgba(255,255,255,.09); color: white; }

/* ── Nav ── */
nav.sitenav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(250,251,248,0.9); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
nav.sitenav .wrap { display: flex; align-items: center; justify-content: space-between; height: 100px; gap: 40px; }
nav.sitenav .logo { font-size: 32px; }
nav.sitenav .logo img { width: 72px; height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17.5px; color: var(--navy); text-decoration: none; }
.logo:hover { color: var(--navy); }
.logo img { width: 34px; height: 34px; border-radius: 50%; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.logo:hover img { transform: rotate(-8deg) scale(1.06); }
.logo em { font-style: normal; color: var(--blue-text); }
.navlinks { display: flex; gap: 28px; align-items: center; }
.navlinks a:not(.btn) { font-size: 14.5px; font-weight: 600; color: var(--navy); text-decoration: none; transition: color .2s; white-space: nowrap; padding: 6px 0; }
.navlinks a:not(.btn):hover, .navlinks a.active { color: var(--navy); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.navlinks a.btn { color: var(--navy); font-size: 14.5px; white-space: nowrap; padding: 11px 22px; }
.nav-burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--navy); margin: 5px 0; border-radius: 2px; transition: .2s; }

/* ── Hero: quiet paper, blister-dot texture, dashed route arc ── */
.hero {
  min-height: 100vh; display: flex; flex-direction: column;
  padding: 100px 0 0;
  background:
    radial-gradient(720px 420px at 8% 28%, rgba(247,248,245,.94) 30%, rgba(247,248,245,0) 70%),
    radial-gradient(620px 400px at 12% 88%, rgba(247,248,245,.92) 24%, rgba(247,248,245,0) 64%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='480' viewBox='0 0 1600 480' fill='none'%3E%3Cpath d='M-20 445 C 240 485 420 340 620 355 C 800 368 880 255 1080 262 C 1260 268 1420 215 1620 190' stroke='%23429EBD' stroke-opacity='.28' stroke-width='2' stroke-dasharray='1 11' stroke-linecap='round'/%3E%3Ccircle cx='322' cy='409' r='5' fill='%23F7AD19' fill-opacity='.6'/%3E%3Ccircle cx='620' cy='355' r='5' fill='%23429EBD' fill-opacity='.45'/%3E%3Ccircle cx='842' cy='311' r='4' fill='%23F7AD19' fill-opacity='.55'/%3E%3Ccircle cx='1342' cy='238' r='7' stroke='%23429EBD' stroke-opacity='.5' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 0 bottom 0,
    var(--dots),
    radial-gradient(900px 480px at 88% -12%, rgba(66,158,189,.10), transparent 62%),
    var(--paper);
  background-size: auto, auto, 1600px auto, 24px 24px, auto, auto;
  background-position: 0 0, 0 0, right 0 bottom 0, 0 0, 0 0, 0 0;
  overflow: hidden;
}
.hero h1 {
  font-size: clamp(36px, 4.4vw, 54px); font-weight: 800; color: var(--navy);
  letter-spacing: -0.03em; line-height: 1.16; margin: 22px 0 20px; max-width: 820px; text-wrap: balance;
}
.hero h1 .mark { position: relative; white-space: nowrap; color: var(--blue-text); }
.hero h1 .h1-duo { white-space: nowrap; }
.hero .lede { font-size: 20px; max-width: 640px; }
.hero .trust { margin-top: 20px; font-size: 15px; color: var(--muted); max-width: 620px; line-height: 1.65; }
.hero .trust strong { color: var(--body-c); font-weight: 700; }
.hero-ctas { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
/* Hero infobox */
.hero-grid { display: flex; gap: 92px; align-items: center; flex: 1 1 auto; width: 100%; min-width: 0; }
.hero-main { flex: 1 1 auto; min-width: 0; }
.pr-node {
  width: 58px; height: 58px; border-radius: 50%; background: white; border: 1.5px solid var(--line-blue); color: var(--blue-text);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 0 0 6px #F2F8FA, 0 2px 8px rgba(5,63,92,.08);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
/* Hero orbit: patiënt & zorginstelling centraal, diensten eromheen */
.orbit { position: relative; width: 560px; height: 560px; flex-shrink: 0; }
.orbit .oring { position: absolute; border-radius: 50%; border: 1.5px dashed #9CC3D4; }
.orbit .oring.r1 { inset: 108px; border-color: #A9CEDD; }
.orbit .oring.r2 { inset: 0; border-color: #CFE0E9; animation: ospin 240s linear infinite; }
.orbit .oglow { position: absolute; inset: 145px; border-radius: 50%; background: radial-gradient(circle, rgba(247,173,25,.2), transparent 70%); }
.osatring { position: absolute; inset: 0; z-index: 2; animation: ospin 240s linear infinite; }
.osat { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 160px; margin-left: -80px; z-index: 2; text-align: center; animation: ospin 240s linear infinite reverse; }
.osat .pr-node { width: 62px; height: 62px; box-shadow: 0 10px 24px -16px rgba(5,63,92,.55); }
.osat:hover .pr-node { border-color: var(--blue); box-shadow: 0 0 0 6px rgba(66,158,189,.10), 0 14px 28px -16px rgba(5,63,92,.5); }
.osat strong { font-size: 14.5px; font-weight: 800; color: var(--navy); line-height: 1.3; }
.osat.s1 { left: 50%; top: -6px; }
.osat.s2 { left: calc(50% + 243px); top: 170px; }
.osat.s3 { left: calc(50% + 152px); top: 452px; }
.osat.s4 { left: calc(50% - 152px); top: 452px; }
.osat.s5 { left: calc(50% - 243px); top: 170px; }
.ospinner { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; }
.ocitem { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 150px; transform: translate(-50%,-50%); }
.cnode { position: relative; width: 58px; height: 58px; border-radius: 50%; background: white; border: 1.5px solid var(--line-blue); color: var(--blue-text); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px -16px rgba(5,63,92,.55); box-shadow: 0 0 0 5px #F2F8FA, 0 2px 8px rgba(5,63,92,.08); }
.pillmid { position: absolute; line-height: 0; opacity: .5; }
.lev-orbit .opill { position: absolute; left: 0; top: 0; width: 0; height: 0; animation: ospin 42s linear infinite; }
.lev-orbit .opill .op-in { position: absolute; left: 0; top: -172px; transform: translate(-50%,-50%); line-height: 0; }
.lev-orbit .opill svg { animation: ocounter 42s linear infinite; }
.lev-orbit .opill.p2, .lev-orbit .opill.p2 svg { animation-delay: -14s; }
.lev-orbit .opill.p3, .lev-orbit .opill.p3 svg { animation-delay: -28s; }
@keyframes ocounter { to { transform: rotate(-360deg); } }
.lev-orbit .ocenter { position: absolute; inset: 0; color: var(--blue-text); }
.lev-orbit .ocenter svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0; animation: ofade 20s linear infinite; }
.lev-orbit .ocenter .oc2 { animation-delay: 4s; }
.lev-orbit .ocenter .oc3 { animation-delay: 8s; }
.lev-orbit .ocenter .oc4 { animation-delay: 12s; }
.lev-orbit .ocenter .oc5 { animation-delay: 16s; }
@keyframes ofade { 0% { opacity: 0; } 4% { opacity: .34; } 17% { opacity: .34; } 21% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lev-orbit .opill, .lev-orbit .opill svg, .lev-orbit .ocenter svg { animation: none; }
  .lev-orbit .opill.p1 { transform: rotate(20deg); } .lev-orbit .opill.p1 svg { transform: rotate(-20deg); }
  .lev-orbit .opill.p2 { transform: rotate(140deg); } .lev-orbit .opill.p2 svg { transform: rotate(-140deg); }
  .lev-orbit .opill.p3 { transform: rotate(260deg); } .lev-orbit .opill.p3 svg { transform: rotate(-260deg); }
  .lev-orbit .ocenter .oc1 { opacity: .34; }
}
.pillmid.m1 { left: -22px; top: -14px; transform: translate(-50%,-50%) rotate(-28deg); }
.pillmid.m2 { left: 17px; top: -2px; transform: translate(-50%,-50%) rotate(14deg); }
.pillmid.m3 { left: -9px; top: 24px; transform: translate(-50%,-50%) rotate(64deg); }
.ocitem strong { font-size: 13px; font-weight: 800; color: var(--navy); line-height: 1.25; text-align: center; background: rgba(247,248,245,.85); border-radius: 8px; padding: 1px 6px; }
.ocitem.c1 { left: 0; top: -78px; }
.ocitem.c2 { left: 70px; top: 40px; }
.ocitem.c3 { left: -70px; top: 40px; }
@keyframes ospin { to { transform: rotate(1turn); } }

@media (max-width: 1060px) {
  .hero-grid { flex-direction: column; gap: 8px; }
  /* Hier stond scale(.72) met margin-bottom: -126px. Een transform verkleint
     wel het beeld maar niet het vak van 560px, dus die negatieve marge haalde
     de witruimte weg die daardoor overbleef: 560 x .28 = 157px, waarvan 126
     teruggenomen en de rest bewust bewaard als lucht voor de labels, die met de
     ring meedraaien en onder het vak duiken. Dat getal was met de hand
     afgesteld op de hoogte van die labels: wordt een label ooit twee regels,
     dan klopt het niet meer en zakt de onderste in de partnerstrip.

     zoom schaalt het vak wel mee, dus de correctie is niet meer nodig en het
     magische getal is weg. Ook de marges schalen mee: 36 x .72 = 26px boven en
     43 x .72 = 31px onder, dezelfde afstanden als hiervoor. Onder 640px staat
     al zoom; hiermee gebruiken beide bereiken hetzelfde mechanisme. */
  .orbit { zoom: .72; margin: 36px auto 43px; }
}

/* Badge row */
.badges { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.badges span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 700; color: var(--navy);
  background: white; border: 1px solid var(--line-blue); border-radius: 100px; padding: 9px 18px;
  box-shadow: 0 1px 3px rgba(5,63,92,.04);
}
.badges span::before { content: "✓"; color: var(--blue-text); font-weight: 800; }

/* Partnerstrip (onder hero) */
.partnerstrip { border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62)); margin-top: auto; }
.partnerstrip .wrap { display: flex; align-items: center; gap: 22px; padding: 28px 40px; }
.partnerstrip .plabel {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-text); white-space: nowrap; flex-shrink: 0;
}
.partnerstrip .psep { width: 1px; height: 30px; background: var(--line); flex-shrink: 0; }
.partnerstrip p { font-size: 16px; color: var(--body-c); line-height: 1.55; max-width: 62ch; text-wrap: pretty; }
.partnerstrip p strong { color: var(--navy); }
.partnerstrip .plogo { height: 40px; width: auto; flex-shrink: 0; margin-right: 2px; }
@media (max-width: 860px) {
  .partnerstrip .wrap { flex-wrap: wrap; gap: 12px 14px; padding: 22px 24px; }
  .partnerstrip .psep { display: none; }
  .partnerstrip p { flex-basis: 100%; font-size: 14.5px; }
}