/* Smart Fit hero met personen. Mobile first. */
.sf-hero {
  background:
    radial-gradient(ellipse at 23% 46%, #e2ecf9 0, transparent 43%),
    radial-gradient(ellipse at 84% 24%, #e8e0fa 0, transparent 35%),
    radial-gradient(ellipse at 94% 82%, #def8fb 0, transparent 47%),
    #fcfefd;
  /* De header is transparant en ligt over de hero heen. */
  margin-top: calc(-1 * var(--sf-header-h, 76px));
  padding-top: var(--sf-header-h, 76px);
}
.sf-hero__inner {
  max-width: 1660px; margin: 0 auto; padding: 16px 5% 48px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: center;
}
.sf-hero__text { position: relative; z-index: 2; padding: 0 0 24px; }
@media (max-width: 767.98px) {
  .sf-hero__inner { padding-top: 8px; padding-bottom: 24px; }
  .sf-hero__text { padding-bottom: 0; }
}
.sf-hero__h1 {
  margin: 0 0 24px; font-weight: 800; color: #04384F;
  font-size: 40px; line-height: 1.075; letter-spacing: -1.5px;
}
.sf-hero__h1 span { display: block; white-space: nowrap; }
.sf-hero__intro { margin: 0 0 32px; max-width: 460px; font-size: 17px; line-height: 1.5; color: #1C1C1A; }
.sf-theme .sf-hero__cta {
  display: flex; align-items: center; justify-content: center; gap: 25px;
  width: 100%; padding: 18px 24px; border-radius: 20px;
  background: #E95123; color: #fff; font-weight: 650; font-size: 18px;
  transition: background .2s, transform .2s;
}
.sf-theme .sf-hero__cta:hover { background: #D2441A; color: #fff; transform: translateY(-2px); }

.sf-hero__proof {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  margin-top: 28px; padding: 12px 18px; background: #fff; border: 1px solid #e6eaec;
  border-radius: 18px; box-shadow: 0 4px 20px rgba(2,69,96,.06); color: #044561; font-size: 15px;
}
.sf-hero__proof-item { display: flex; align-items: center; gap: 10px; }
.sf-hero__avatars { display: flex; }
.sf-hero__avatars i { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; margin-left: -9px; }
.sf-hero__avatars i:first-child { margin-left: 0; background: #044561; }
.sf-hero__avatars i:nth-child(2) { background: #E95123; }
.sf-hero__avatars i:nth-child(3) { background: #4A7BD0; }
.sf-hero__avatars i:nth-child(4) { background: #8A63D2; }
.sf-hero__stars { color: #E95123; font-size: 17px; letter-spacing: 2px; }

/* Personen: niet op mobiel (alleen de tekst), vanaf 768px vier naast elkaar */
.sf-hero__people {
  display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0;
  align-items: end; align-self: end; padding-top: 8px;
}
.sf-theme .sf-person { min-width: 0; display: flex; flex-direction: column; align-items: center; color: #044561; outline: none; }
.sf-person__figure { display: block; width: 100%; position: relative; isolation: isolate; }
.sf-person__figure svg { display: block; width: 100%; height: auto; overflow: visible; transition: transform .25s, filter .25s; }
.sf-person__glow {
  position: absolute; left: 10%; right: 10%; top: 25%; bottom: 5%; z-index: -1;
  border-radius: 50%; filter: blur(24px); background: var(--sf-glow); opacity: 0; transition: opacity .25s;
}
.sf-person:hover .sf-person__glow, .sf-person:focus-visible .sf-person__glow { opacity: .85; }
.sf-person:hover .sf-person__figure svg, .sf-person:focus-visible .sf-person__figure svg { transform: translateY(-6px); filter: drop-shadow(0 10px 18px rgba(2,69,96,.22)); }
.sf-person:focus-visible .sf-person__cap { outline: 2px solid #044561; outline-offset: 2px; border-radius: 8px; }
.sf-person__cap { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 100%; padding: 12px 4px 8px; text-align: center; }
.sf-person__cap strong { font-size: 17px; font-weight: 700; }
.sf-person__cap small { font-size: 13px; opacity: .75; }
.sf-hero__hint {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 20px 0 0; font-size: 14px; opacity: .7; color: #1C1C1A; text-align: center;
}
.sf-hero__hint svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }

@media (min-width: 576px) {
  .sf-hero__h1 { font-size: clamp(40px, 4.8vw, 76px); letter-spacing: -2.8px; }
  .sf-hero__intro { font-size: clamp(17px, 1.55vw, 24px); }
  .sf-theme .sf-hero__cta { display: inline-flex; width: auto; font-size: 20px; padding: 22px 30px; }
  .sf-hero__proof { border-radius: 999px; padding: 12px 24px; gap: 12px 28px; }
  .sf-person__cap { padding: 23px 5px 16px; }
  .sf-person__cap strong { font-size: 20px; }
  .sf-person__cap small { font-size: 15px; }
}

@media (min-width: 768px) { .sf-hero__people { display: grid; } }

@media (min-width: 992px) {
  .sf-hero { min-height: 100svh; display: flex; flex-direction: column; }
  .sf-hero__inner {
    flex: 1; width: 100%; grid-template-columns: 37% 63%; gap: 24px; padding: 22px 3.5% 65px;
  }
  .sf-hero__text { padding-bottom: 65px; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-person__figure svg, .sf-person__glow { transition: none; }
}

/* Mobiel: de personen ontbreken, dus vier compacte blokken (klein portret, naam, uitleg) die direct
   zichtbaar zijn, zonder swipen. */
.sf-hero__concepts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.sf-theme .sf-bubble {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 10px 9px 9px; color: var(--sf-ink);
  border-radius: 20px; background: linear-gradient(160deg, #fff 0%, var(--sf-tint) 100%);
  border: 1px solid rgba(255,255,255,.9); box-shadow: 0 8px 20px rgba(2,69,96,.10);
  transition: transform .2s; -webkit-tap-highlight-color: transparent;
}
.sf-theme .sf-bubble:hover { color: var(--sf-ink); }
.sf-theme .sf-bubble:active { transform: scale(.97); }
.sf-bubble__ring {
  display: block; flex: none; width: 54px; height: 54px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 70%, var(--sf-glow) 0%, var(--sf-tint) 72%);
  border: 2px solid #fff; box-shadow: 0 4px 10px rgba(2,69,96,.14);
}
.sf-bubble__ring svg { display: block; width: 100%; height: 100%; }
.sf-bubble__text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.sf-theme .sf-bubble strong {
  font-family: 'Leixo', 'Jost', sans-serif; font-weight: 500; font-size: 19px; line-height: 1;
  letter-spacing: -.04em; text-transform: lowercase; overflow-wrap: anywhere;
}
.sf-bubble small { font-size: 11.5px; line-height: 1.25; font-weight: 500; color: #04384F; opacity: .75; }
@media (prefers-reduced-motion: reduce) { .sf-theme .sf-bubble { transition: none; } }
@media (min-width: 768px) { .sf-hero__concepts { display: none; } }