/* ==========================================================================
   Slimme Start homepage
   Hoekig, rustig: wit en lichtgrijs, marineblauw voor tekst, blauw als accent,
   geel alleen in logo en de knop onderaan.
   ========================================================================== */

.sshome {
  --hp-marine: #121A3F;
  --hp-tekst: #3B4466;
  --hp-zacht: #6A7190;
  --hp-blauw: #2F5BFF;
  --hp-blauw-licht: #EEF2FF;
  --hp-groen: #1FB57A;
  --hp-groen-licht: #E6F8F0;
  --hp-groen-donker: #0B6B47;
  --hp-geel: #FFC61A;
  --hp-grijs: #F3F5F9;
  --hp-lijn: #E4E7F0;
  --hp-kop: 'Gabarito', 'DM Sans', system-ui, sans-serif;
  --hp-rand: 120px;

  width: 100%;
  overflow-x: clip;
  color: var(--hp-marine);
  background: #FFFFFF;
}

.sshome *,
.sshome *::before,
.sshome *::after {
  box-sizing: border-box;
}

.sshome h1,
.sshome h2,
.sshome h3 {
  font-family: var(--hp-kop);
  color: var(--hp-marine);
  margin: 0;
}

.sshome h2 {
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.sshome p {
  margin: 0;
}

.hp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Knoppen ---------- */

.hp-knop {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 0 30px;
  border: 0;
  border-radius: 0;
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.hp-knop svg {
  flex-shrink: 0;
}

.hp-knop-blauw {
  background: var(--hp-blauw);
  color: #FFFFFF;
}

.hp-knop-blauw:hover {
  background: #1E45E0;
  color: #FFFFFF;
}

.hp-knop-geel {
  background: var(--hp-geel);
  color: var(--hp-marine);
}

.hp-knop-geel:hover {
  background: #F0B400;
  color: var(--hp-marine);
}

.sshome a:focus-visible,
.sshome button:focus-visible,
.sshome summary:focus-visible {
  outline: 3px solid var(--hp-blauw);
  outline-offset: 3px;
}

/* ---------- Hero ---------- */

.hp-hero {
  position: relative;
  background: var(--hp-grijs);
  border-bottom: 1px solid var(--hp-lijn);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 640px;
}

.hp-hero-tekst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding: 48px 60px 48px var(--hp-rand);
}

.hp-hero h1 {
  font-size: clamp(40px, 4.8vw, 68px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.03em;
  max-width: 620px;
}

.hp-accent {
  color: var(--hp-blauw);
}

.hp-hero-sub {
  max-width: 480px;
  font-size: 22px;
  line-height: 1.5;
  color: var(--hp-tekst);
}

.hp-hero-actie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-top: 6px;
}

.hp-klein {
  font-size: 15px;
  color: var(--hp-zacht);
}

.hp-hero-vlak {
  position: relative;
  display: flex;
  justify-content: center;
  background: var(--hp-grijs);
  overflow: hidden;
}

/* Vaste tekenvlakken die op kleine schermen meeschalen. */
.hp-podium {
  position: relative;
  flex-shrink: 0;
}

/* 610 breed: de telefoon staat op 330px, deels over het boek heen */
.hp-hero-podium {
  width: 610px;
  height: 620px;
}

/* De animatie pauzeert als je erop wijst, zodat je een stap rustig kunt lezen */
.hp-hero-anim:hover,
.hp-hero-anim:hover * {
  animation-play-state: paused !important;
}

/* ---------- Hero op brede schermen: balans ----------
   Twee kolommen binnen dezelfde zijmarge als de rest (--hp-rand), tekst iets breder.
   Tekst en beeld staan allebei verticaal in het midden.
   Het grijze vlak stopt boven de onderkant van de hero, zodat de onderkant van
   de telefoon eronder uitsteekt. Achter boek en telefoon staan twee zachte
   lichtblauwe vormen. */

@media (min-width: 1101px) {
  .sshome { --hp-zoom: 0.62; }

  .hp-hero {
    z-index: 2;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    column-gap: 64px;
    align-items: center;
    min-height: 0;
    padding: 88px var(--hp-rand);
    border-bottom: 0;
    /* grijs tot boven de onderkant van de telefoon, daaronder wit */
    --hp-wit: calc(88px + 74px * var(--hp-zoom));
    background: linear-gradient(
      to bottom,
      var(--hp-grijs) 0,
      var(--hp-grijs) calc(100% - var(--hp-wit)),
      var(--hp-lijn) calc(100% - var(--hp-wit)),
      var(--hp-lijn) calc(100% - var(--hp-wit) + 1px),
      #FFFFFF calc(100% - var(--hp-wit) + 1px)
    );
  }

  /* 60px ondermarge tilt de tekst 30px op, zodat de knop ruim in het grijze vlak blijft */
  .hp-hero-tekst {
    padding: 0;
    gap: 0;
    margin-bottom: 60px;
  }

  .hp-hero h1 {
    margin-bottom: 32px;
    font-size: clamp(44px, 4.3vw, 86px);
    line-height: 1;
    max-width: none;
  }

  .hp-hero .hp-hero-sub {
    margin-bottom: 40px;
    font-size: 20px;
    line-height: 1.55;
    max-width: 540px;
  }

  .hp-hero-actie {
    margin-top: 0;
  }

  .hp-hero-vlak {
    z-index: 3;
    isolation: isolate;
    display: block;
    justify-self: center;
    align-self: center;
    background: none;
    overflow: visible;
  }

  /* zachte lichtblauwe vormen achter boek en telefoon */
  .hp-hero-vlak::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -6%;
    right: -8%;
    bottom: 4%;
    left: -4%;
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 520" preserveAspectRatio="none"%3E%3Cpath fill="%23E4EBFF" d="M292 38C418 14 552 84 574 206c22 122-40 250-178 276-128 24-290 6-342-112C2 252 104 74 292 38Z"/%3E%3Cpath fill="%23EEF2FF" d="M470 6c62-12 118 26 124 84 6 60-40 104-98 108-58 4-102-34-104-86-2-50 24-96 78-106Z"/%3E%3C/svg%3E') center / 100% 100% no-repeat;
    pointer-events: none;
  }

  .hp-hero-podium {
    zoom: var(--hp-zoom);
  }

  .hp-waarom {
    padding-top: 90px;
  }
}

@media (min-width: 1101px) and (max-width: 1499px) {
  .hp-hero h1 { font-size: 4vw; }
}

/* Het beeld vult de rechterkolom op elke schermbreedte */
@media (min-width: 1200px) { .sshome { --hp-zoom: 0.7; } }
@media (min-width: 1320px) { .sshome { --hp-zoom: 0.8; } }
@media (min-width: 1440px) { .sshome { --hp-zoom: 0.89; } }
@media (min-width: 1600px) { .sshome { --hp-zoom: 1.02; } }
@media (min-width: 1760px) { .sshome { --hp-zoom: 1.14; } }
@media (min-width: 1900px) { .sshome { --hp-zoom: 1.25; } }

.hp-pagina {
  position: absolute;
  left: 70px;
  top: 110px;
  width: 290px;
  height: 370px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  background: #FFFFFF;
  border: 1px solid #DADDE7;
  transform: rotate(-7deg);
}

.hp-pagina i {
  display: block;
  height: 8px;
  background: #DADDE7;
}

.hp-pagina i.hp-markeer {
  background: #FFE58A;
}

.hp-pagina-titel {
  margin-bottom: 6px !important;
  font-family: var(--hp-kop);
  font-size: 20px;
  font-weight: 800;
}

.hp-pagina-plaat {
  display: block;
  height: 96px;
  margin: 6px 0;
  background: #E9ECF4;
}

.hp-scanhoek {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 0 solid var(--hp-groen);
}

.hp-lb { left: -10px; top: -10px; border-left-width: 4px; border-top-width: 4px; }
.hp-rb { right: -10px; top: -10px; border-right-width: 4px; border-top-width: 4px; }
.hp-lo { left: -10px; bottom: -10px; border-left-width: 4px; border-bottom-width: 4px; }
.hp-ro { right: -10px; bottom: -10px; border-right-width: 4px; border-bottom-width: 4px; }

.hp-telling {
  position: absolute;
  left: 40px;
  bottom: 50px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 20px;
  background: var(--hp-marine);
  color: #FFFFFF;
}

.hp-telling strong {
  font-family: var(--hp-kop);
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
}

.hp-telling span {
  font-size: 14px;
  color: #C9CEE0;
}

/* ---------- Telefoon (hero en talen) ---------- */

.hp-tel {
  width: 290px;
  height: 590px;
  padding: 12px;
  background: #0A0F26;
  border-radius: 44px;
}

.hp-hero-tel {
  position: absolute;
  left: 330px;
  top: 40px;
  transform: rotate(4deg);
  box-shadow: -18px 18px 0 rgba(18, 26, 63, 0.08);
}

.hp-tel-scherm {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 33px;
  overflow: hidden;
}

.hp-notch {
  display: block;
  width: 88px;
  height: 24px;
  margin: 11px auto 0;
  background: #0A0F26;
  border-radius: 12px;
  flex-shrink: 0;
}

.hp-mq-kop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 0;
}

.hp-mq-balk {
  flex-grow: 1;
  display: flex;
  height: 8px;
  background: var(--hp-lijn);
}

.hp-mq-balk span {
  background: var(--hp-groen);
}

.hp-mq-score {
  font-size: 13px;
  font-weight: 700;
}

.hp-mq-inhoud {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px 0;
}

.hp-mq-meta {
  font-size: 12px;
  color: var(--hp-zacht);
}

.hp-mq-vraag {
  margin-bottom: 6px !important;
  font-family: var(--hp-kop);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
}

.hp-mq-optie {
  display: flex;
  gap: 10px;
  padding: 12px;
  border: 1.5px solid var(--hp-lijn);
  font-size: 14px;
}

.hp-mq-optie.hp-mq-goed {
  background: var(--hp-groen);
  border-color: var(--hp-groen);
  color: #FFFFFF;
  font-weight: 700;
}

.hp-mq-optie.hp-mq-dim {
  color: #A0A6BD;
}

.hp-mq-melding {
  margin-top: auto;
  padding: 16px 20px;
  background: var(--hp-groen-licht);
  color: var(--hp-groen-donker);
  font-size: 16px;
  font-weight: 700;
}

/* ---------- Vakken ---------- */

.hp-vakken {
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 22px var(--hp-rand);
  border-top: 1px solid var(--hp-lijn);
  border-bottom: 1px solid var(--hp-lijn);
  font-family: var(--hp-kop);
  font-size: 26px;
  font-weight: 700;
  color: var(--hp-tekst);
  white-space: nowrap;
  overflow: hidden;
}

.hp-vak-blok {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: var(--hp-blauw);
}

/* ---------- Vier stappen ---------- */

.hp-stappen ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp-stap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 48px 36px 52px;
  background: var(--hp-grijs);
}

.hp-stap + .hp-stap {
  border-left: 1px solid var(--hp-lijn);
}

.hp-stap:first-child {
  padding-left: max(36px, calc(var(--hp-rand) - 60px));
}

.hp-stap:last-child {
  padding-right: max(36px, calc(var(--hp-rand) - 60px));
}

.hp-stap-beeld {
  position: relative;
  height: 240px;
  margin-bottom: 18px;
}

.hp-stap-kaart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: #FFFFFF;
  border: 1px solid var(--hp-lijn);
}

.hp-stap-nr {
  font-family: var(--hp-kop);
  font-size: 72px;
  line-height: 0.8;
  font-weight: 900;
  color: var(--hp-blauw);
}

.hp-stap h3 {
  margin-top: 10px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
}

.hp-stap > p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--hp-tekst);
}

/* Stap 1: foto van het boek */
.hp-s1-boek {
  position: absolute;
  left: 0;
  top: 18px;
  width: 170px;
  height: 200px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid var(--hp-lijn);
  transform: rotate(-4deg);
}

.hp-s1-boek b {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 800;
}

.hp-s1-boek i {
  display: block;
  height: 6px;
  background: #DADDE7;
}

.hp-s1-boek span {
  display: block;
  height: 50px;
  background: #E9ECF4;
}

.hp-s1-tel {
  position: absolute;
  right: 6px;
  top: 0;
  width: 130px;
  height: 240px;
  padding: 7px;
  background: #0A0F26;
  border-radius: 22px;
}

.hp-s1-tel > div {
  position: relative;
  width: 100%;
  height: 100%;
  background: #2A3358;
  border-radius: 16px;
  overflow: hidden;
}

.hp-s1-kader {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 44px;
  bottom: 60px;
  border: 2px solid var(--hp-groen);
}

.hp-s1-sluiter {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 34px;
  height: 34px;
  transform: translateX(-50%);
  background: #FFFFFF;
  border: 3px solid #8C93B0;
  border-radius: 50%;
}

.hp-s1-gelukt {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 12px;
  padding: 5px 6px;
  background: var(--hp-groen);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

/* Stap 2: quiz maken */
.hp-s2-titel {
  font-family: var(--hp-kop);
  font-size: 17px;
  font-weight: 800;
}

.hp-s2-balk {
  display: flex;
  height: 8px;
  margin-bottom: 4px;
  background: var(--hp-lijn);
}

.hp-s2-balk span {
  width: 75%;
  background: var(--hp-blauw);
}

.hp-s2-rij {
  display: flex;
  gap: 8px;
  font-size: 14px;
}

.hp-s2-rij b {
  color: var(--hp-groen);
}

.hp-s2-rij.hp-s2-open,
.hp-s2-rij.hp-s2-open b {
  color: #8C93B0;
}

/* Stap 3: vragen controleren */
.hp-s3-meta {
  font-size: 12px;
  color: var(--hp-zacht);
}

.hp-s3-vraag {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
}

.hp-s3-optie {
  padding: 6px 10px;
  border: 1.5px solid var(--hp-lijn);
  font-size: 13px;
}

.hp-s3-optie.hp-s3-goed {
  background: var(--hp-groen-licht);
  border-color: var(--hp-groen);
  color: var(--hp-groen-donker);
  font-weight: 700;
}

.hp-s3-knop {
  margin-top: auto;
  padding: 8px 10px;
  background: var(--hp-marine);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

/* Stap 4: WhatsApp */
.hp-s4 {
  display: flex;
  flex-direction: column;
  background: #ECE5DD;
  border: 1px solid var(--hp-lijn);
}

.hp-s4-kop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--hp-groen-donker);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
}

.hp-s4-kop span {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hp-geel);
  color: var(--hp-marine);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
}

.hp-s4-lijf {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

.hp-s4-uit,
.hp-s4-in {
  max-width: 80%;
  padding: 9px 11px;
  font-size: 13px;
  line-height: 1.4;
}

.hp-s4-uit {
  align-self: flex-end;
  background: #DCF8C6;
}

.hp-s4-in {
  align-self: flex-start;
  background: #FFFFFF;
}

/* ---------- Talen ---------- */

.hp-talen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
  align-items: center;
  padding: 90px var(--hp-rand);
}

.hp-talen-beeld {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  min-width: 0;
}

.hp-ring {
  position: relative;
  width: 680px;
  max-width: 100%;
  height: 560px;
}

.hp-ring-tel {
  position: absolute;
  left: 50%;
  top: 0;
  width: 280px;
  height: 560px;
  padding: 11px;
  border-radius: 42px;
  background: var(--hp-marine);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.hp-ring-tel[data-plek="0"] { transform: translateX(-50%) scale(1); opacity: 1; z-index: 3; }
.hp-ring-tel[data-plek="1"] { transform: translateX(calc(-50% + 200px)) scale(0.78); opacity: 0.45; z-index: 1; }
.hp-ring-tel[data-plek="2"] { transform: translateX(calc(-50% - 200px)) scale(0.78); opacity: 0.45; z-index: 1; }

.hp-ring-tel:not([data-plek="0"]) .hp-luid {
  visibility: hidden;
}

.hp-taal-scherm {
  padding: 0 18px 18px;
  border-radius: 32px;
}

.hp-taal-scherm .hp-notch {
  width: 84px;
  height: 22px;
  margin-top: 10px;
  background: var(--hp-marine);
}

.hp-taal-scherm .hp-mq-meta {
  margin-top: 22px;
  margin-bottom: 6px;
}

.hp-taal-vraag {
  margin-bottom: 12px !important;
  font-family: var(--hp-kop);
  font-size: 19px;
  font-weight: 800;
}

.hp-taal-woord {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  border: 1.5px solid var(--hp-lijn);
}

.hp-taal-term {
  font-family: var(--hp-kop);
  font-size: 20px;
  font-weight: 800;
}

.hp-taal-uit {
  margin-top: 2px !important;
  font-size: 13px;
  font-style: italic;
  color: #6D3FD8;
}

.hp-luid {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--hp-blauw);
  color: #FFFFFF;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.hp-luid:hover {
  background: #1E45E0;
}

.hp-taal-opties {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hp-taal-opties .hp-mq-optie {
  padding: 11px 12px;
}

.hp-taal-opties .hp-mq-optie.hp-mq-goed {
  background: var(--hp-groen-licht);
  border-color: var(--hp-groen);
  color: var(--hp-groen-donker);
}

.hp-taalknoppen {
  display: flex;
}

.hp-taalknop {
  min-width: 120px;
  min-height: 52px;
  margin-left: -1.5px;
  padding: 0 22px;
  background: #FFFFFF;
  color: var(--hp-marine);
  border: 1.5px solid #C9CEDC;
  border-radius: 0;
  font-family: var(--hp-kop);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}

.hp-taalknop:first-child {
  margin-left: 0;
}

.hp-taalknop[aria-pressed="true"] {
  position: relative;
  background: var(--hp-marine);
  border-color: var(--hp-marine);
  color: #FFFFFF;
}

.hp-talen-tekst {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hp-talen-tekst p,
.hp-resultaat-tekst p {
  max-width: 480px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--hp-tekst);
}

/* ---------- Resultaten ---------- */

.hp-resultaat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px;
  align-items: center;
  padding: 100px var(--hp-rand);
  background: var(--hp-grijs);
  border-top: 1px solid var(--hp-lijn);
}

.hp-resultaat-tekst {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hp-resultaat-beeld {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hp-getal {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}

.hp-getal strong {
  font-family: var(--hp-kop);
  font-size: clamp(96px, 10vw, 150px);
  line-height: 0.8;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.hp-getal span {
  padding-bottom: 4px;
  font-size: 19px;
}

.hp-verdeling {
  display: flex;
  height: 14px;
  background: #DDE3EE;
}

.hp-verdeling span {
  background: var(--hp-groen);
}

.hp-coach {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 28px;
  background: #FFFFFF;
  border-left: 4px solid var(--hp-blauw);
}

.hp-coach-naam {
  font-size: 15px;
  font-weight: 700;
  color: var(--hp-blauw);
}

.hp-coach p:last-child {
  font-size: 19px;
  line-height: 1.5;
}

/* ---------- Prijzen ---------- */

.hp-prijzen {
  position: relative;
  padding: 96px var(--hp-rand) 100px;
  border-top: 1px solid var(--hp-lijn);
}

.hp-prijzen-kop {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  margin-bottom: 64px;
}

.hp-prijzen-kop p {
  max-width: 420px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--hp-tekst);
}

.hp-prijsrij {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* zachte lichtblauwe vormen achter de rechterhelft, net als in de hero */
.hp-prijsrij::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -18%;
  right: -6%;
  bottom: -24%;
  left: 44%;
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 520" preserveAspectRatio="none"%3E%3Cpath fill="%23E4EBFF" d="M292 38C418 14 552 84 574 206c22 122-40 250-178 276-128 24-290 6-342-112C2 252 104 74 292 38Z"/%3E%3Cpath fill="%23EEF2FF" d="M470 6c62-12 118 26 124 84 6 60-40 104-98 108-58 4-102-34-104-86-2-50 24-96 78-106Z"/%3E%3C/svg%3E') center / 100% 100% no-repeat;
  pointer-events: none;
}

.hp-prijs {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 28px 28px;
  background: #FFFFFF;
  border: 1px solid #DADDE7;
}

/* het populaire pakket: navy, iets hoger dan de rest */
.hp-prijs-populair {
  margin-top: -28px;
  padding-top: 48px;
  background: var(--hp-marine);
  border-color: var(--hp-marine);
  color: #FFFFFF;
  box-shadow: 0 30px 60px rgba(18, 26, 63, 0.25);
}

.hp-prijs-label {
  position: absolute;
  top: -16px;
  left: 28px;
  padding: 7px 12px;
  background: var(--hp-geel);
  color: var(--hp-marine);
  font-size: 14px;
  font-weight: 700;
}

.hp-prijs-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

.hp-prijs-naam {
  font-size: 15px;
  font-weight: 700;
  color: var(--hp-zacht);
}

.hp-prijs-populair .hp-prijs-naam {
  color: #C9D3FF;
}

.hp-prijs-korting {
  padding: 4px 8px;
  background: var(--hp-groen-licht);
  color: var(--hp-groen-donker);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.hp-prijs-populair .hp-prijs-korting {
  background: var(--hp-groen);
  color: #FFFFFF;
}

.hp-prijs-bedrag {
  font-family: var(--hp-kop);
  font-size: 52px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.hp-prijs-populair .hp-prijs-bedrag {
  color: #FFFFFF;
}

.hp-prijs-gratis {
  color: var(--hp-blauw);
}

.hp-prijs-sub {
  font-size: 15px;
  line-height: 1.45;
  color: var(--hp-tekst);
}

.hp-prijs-populair .hp-prijs-sub {
  color: #D5DBF3;
}

.hp-prijs-knop {
  display: block;
  margin-top: auto;
  padding: 13px 14px;
  border: 2px solid var(--hp-marine);
  background: #FFFFFF;
  color: var(--hp-marine);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.hp-prijs-knop:hover {
  background: var(--hp-marine);
  color: #FFFFFF;
}

.hp-prijs-knop-blauw {
  background: var(--hp-blauw);
  border-color: var(--hp-blauw);
  color: #FFFFFF;
}

.hp-prijs-knop-blauw:hover {
  background: #1E45E0;
  border-color: #1E45E0;
}

.hp-prijs-knop-geel {
  background: var(--hp-geel);
  border-color: var(--hp-geel);
  color: var(--hp-marine);
}

.hp-prijs-knop-geel:hover {
  background: #F0B400;
  border-color: #F0B400;
  color: var(--hp-marine);
}

.hp-prijs-vinkjes {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  color: var(--hp-tekst);
}

.hp-prijs-vinkjes li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hp-prijs-vinkjes svg {
  flex-shrink: 0;
}

/* ---------- Veelgestelde vragen ---------- */

.hp-faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 80px;
  padding: 0 var(--hp-rand) 100px;
}

.hp-faq h2 {
  font-size: clamp(30px, 3vw, 42px);
}

.hp-faq > div {
  border-top: 2px solid var(--hp-marine);
}

.hp-faq details {
  padding: 20px 0;
  border-bottom: 1px solid #D5D9E6;
}

.hp-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.hp-faq summary::-webkit-details-marker {
  display: none;
}

.hp-faq summary::after {
  content: '+';
  color: var(--hp-blauw);
  font-size: 24px;
  line-height: 1;
}

.hp-faq details[open] summary::after {
  content: '−';
}

.hp-faq details p {
  max-width: 640px;
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--hp-tekst);
}

/* ---------- Afsluiter ---------- */

.hp-slot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px 64px;
  padding: 90px var(--hp-rand);
  background: var(--hp-marine);
}

.hp-slot h2 {
  max-width: 760px;
  font-size: clamp(36px, 4.5vw, 64px);
  color: #FFFFFF;
}

/* ---------- Tablet ---------- */

@media (max-width: 1100px) {
  .hp-prijs-populair {
    margin-top: 0;
  }

  .hp-prijzen-kop {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .sshome {
    --hp-rand: 48px;
  }

  .hp-hero,
  .hp-talen,
  .hp-resultaat {
    grid-template-columns: minmax(0, 1fr);
  }

  .hp-hero-tekst {
    padding: 56px var(--hp-rand) 48px;
  }

  .hp-stappen ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hp-stap:nth-child(3) {
    border-left: 0;
  }

  .hp-stap:nth-child(n + 3) {
    border-top: 1px solid var(--hp-lijn);
  }

  .hp-stap:first-child,
  .hp-stap:last-child {
    padding-left: 36px;
    padding-right: 36px;
  }

  .hp-talen {
    gap: 40px;
  }

  .hp-talen-tekst {
    order: -1;
  }

  .hp-resultaat {
    gap: 48px;
  }

  .hp-faq {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

/* ---------- Telefoon ---------- */

@media (max-width: 700px) {
  .sshome {
    --hp-rand: 22px;
  }

  .hp-hero-sub {
    font-size: 19px;
  }

  .hp-knop {
    width: 100%;
    justify-content: center;
  }

  .hp-hero-podium {
    zoom: 0.5;
  }

  .hp-vakken {
    gap: 20px;
    font-size: 20px;
  }

  .hp-stappen ol {
    grid-template-columns: minmax(0, 1fr);
  }

  .hp-stap + .hp-stap {
    border-left: 0;
    border-top: 1px solid var(--hp-lijn);
  }

  .hp-stap,
  .hp-stap:first-child,
  .hp-stap:last-child {
    padding: 40px var(--hp-rand) 44px;
  }

  .hp-stap-beeld {
    max-width: 320px;
  }

  .hp-talen {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .hp-talen-beeld {
    overflow: hidden;
  }

  .hp-ring {
    zoom: 0.64;
    width: 540px;
    max-width: none;
  }

  .hp-taalknop {
    min-width: 0;
    flex: 1;
  }

  .hp-taalknoppen {
    width: 100%;
  }

  .hp-resultaat,
  .hp-prijzen {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .hp-prijzen-kop {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 40px;
  }

  .hp-prijzen-kop p {
    font-size: 16px;
  }

  .hp-prijsrij {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .hp-prijsrij::before {
    left: 20%;
  }

  .hp-prijs-bedrag {
    font-size: 44px;
  }

  .hp-faq {
    padding-bottom: 64px;
  }

  .hp-slot {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-ring-tel,
  .hp-knop {
    transition: none;
  }
}

/* ---------- Waarom ouders Slimme Start gebruiken ---------- */

.hp-waarom {
  padding: 110px var(--hp-rand) 90px;
}

.hp-waarom h2 {
  max-width: 820px;
  margin-bottom: 56px;
}

.hp-waarom-rij {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.hp-reden {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hp-reden h3 {
  margin-top: 18px;
  font-size: 26px;
  font-weight: 800;
}

.hp-reden > p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--hp-tekst);
}

.hp-reden-beeld {
  position: relative;
  height: 230px;
  overflow: hidden;
}

.hp-rb-geel { background: #FFF1C2; }
.hp-rb-mint { background: #DDF5EA; }
.hp-rb-paars { background: #ECE6FF; }

/* Schoolboek wordt quiz */
.hp-rb-boek {
  position: absolute;
  left: 34px;
  top: 40px;
  width: 120px;
  height: 150px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: #FFFFFF;
  border: 1px solid #E8DDB5;
  transform: rotate(-6deg);
}

.hp-rb-boek b {
  font-family: var(--hp-kop);
  font-size: 11px;
}

.hp-rb-boek i {
  display: block;
  height: 5px;
  background: #DADDE7;
}

.hp-rb-boek i.hp-rb-markeer {
  background: #FFD84A;
}

.hp-rb-pijl {
  position: absolute;
  left: 50%;
  top: 96px;
  margin-left: -14px;
}

.hp-rb-quiz {
  position: absolute;
  right: 30px;
  top: 30px;
  width: 150px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: #FFFFFF;
  border: 1px solid #E8DDB5;
  transform: rotate(3deg);
  box-shadow: 8px 8px 0 var(--hp-marine);
}

.hp-rb-quiz b {
  font-size: 12px;
  line-height: 1.25;
}

.hp-rb-quiz span {
  padding: 5px 7px;
  border: 1px solid var(--hp-lijn);
  font-size: 11px;
}

.hp-rb-quiz span.hp-rb-klein {
  padding: 0;
  border: 0;
  font-size: 10px;
  color: var(--hp-zacht);
}

.hp-rb-quiz span.hp-rb-goed {
  background: var(--hp-groen);
  border-color: var(--hp-groen);
  color: #FFFFFF;
  font-weight: 700;
}

.hp-rb-label,
.hp-rb-hart {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--hp-marine);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
}

.hp-rb-label {
  left: 22px;
  bottom: 16px;
}

/* Inzicht in ontwikkeling */
.hp-rb-staven {
  position: absolute;
  left: 36px;
  bottom: 34px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.hp-rb-staven span {
  width: 26px;
  background: #9FDCC3;
}

.hp-rb-staven span.hp-rb-hoog {
  background: var(--hp-groen);
}

.hp-rb-as {
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 34px;
  height: 2px;
  background: var(--hp-marine);
}

.hp-rb-ster {
  position: absolute;
  left: 196px;
  top: 50px;
}

.hp-rb-stat {
  position: absolute;
  right: 28px;
  top: 30px;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid #BFE6D3;
  box-shadow: 8px 8px 0 var(--hp-marine);
}

.hp-rb-stat b {
  display: block;
  font-family: var(--hp-kop);
  font-size: 28px;
  line-height: 1;
  color: var(--hp-groen-donker);
}

.hp-rb-stat span {
  font-size: 12px;
  color: var(--hp-tekst);
}

/* Ontdek interesses */
.hp-rb-tegels {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.hp-rb-tegel {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #D9D1F5;
}

.hp-rb-tegel img {
  display: block;
  width: 100%;
  height: 58px;
  object-fit: cover;
}

.hp-rb-tegel span {
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
}

.hp-rb-tegel.hp-rb-fav {
  box-shadow: 6px 6px 0 var(--hp-marine);
  transform: rotate(-2deg);
}

.hp-rb-hart {
  right: 22px;
  top: 16px;
}

/* ---------- Op tijd klaar voor de toets ---------- */

.hp-toets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px;
  align-items: center;
  padding: 90px var(--hp-rand);
  background: var(--hp-blauw-licht);
}

.hp-toets-tekst {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.hp-toets-tekst > p {
  max-width: 500px;
  font-size: 20px;
  line-height: 1.55;
}

.hp-toets-tekst > p.hp-toets-citaat {
  max-width: 520px;
  font-family: var(--hp-kop);
  font-size: 26px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--hp-tekst);
}

.hp-toets .hp-knop {
  margin-top: 6px;
}

.hp-planner {
  padding: 32px 34px;
  background: #FFFFFF;
  border: 1px solid #D5DCF5;
}

.hp-planner-kop {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}

.hp-planner-vak {
  font-size: 15px;
  color: var(--hp-zacht);
}

.hp-planner-datum {
  margin-top: 2px !important;
  font-family: var(--hp-kop);
  font-size: 24px;
  font-weight: 800;
}

.hp-planner-teller {
  text-align: right;
}

.hp-planner-teller b {
  display: block;
  font-family: var(--hp-kop);
  font-size: 52px;
  line-height: 1;
  font-weight: 900;
  color: var(--hp-blauw);
}

.hp-planner-teller span {
  font-size: 15px;
  color: var(--hp-tekst);
}

.hp-planner-dagen {
  display: flex;
  gap: 5px;
  margin-top: 26px;
}

.hp-planner-dagen span {
  flex: 1;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hp-lijn);
  font-size: 12px;
  font-weight: 700;
}

.hp-planner-dagen span.hp-dag-klaar {
  background: var(--hp-groen);
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 800;
}

.hp-planner-dagen span.hp-dag-nu {
  flex: 1.4;
  background: #FFFFFF;
  border: 2.5px solid var(--hp-blauw);
  color: var(--hp-blauw);
}

.hp-planner-dagen span.hp-dag-toets {
  flex: 1.3;
  background: var(--hp-marine);
  color: var(--hp-geel);
  font-weight: 800;
}

.hp-planner-as {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 13px;
  color: var(--hp-zacht);
}

.hp-planner-taak {
  margin-top: 26px;
  padding: 18px 20px;
  background: var(--hp-grijs);
  border-left: 4px solid var(--hp-blauw);
}

.hp-planner-taak-kop {
  font-size: 14px;
  font-weight: 700;
  color: var(--hp-blauw);
}

.hp-planner-taak p + p {
  margin-top: 4px;
  font-size: 17px;
  line-height: 1.45;
}

.hp-planner-klaar {
  margin-top: 22px;
}

.hp-planner-klaar > div {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--hp-tekst);
}

.hp-planner-balk {
  display: flex;
  height: 10px;
  margin-top: 8px;
  background: var(--hp-lijn);
}

.hp-planner-balk span {
  background: var(--hp-groen);
}

@media (max-width: 1100px) {
  .hp-waarom-rij {
    grid-template-columns: minmax(0, 1fr);
    max-width: 440px;
  }

  .hp-toets {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
}

@media (max-width: 700px) {
  .hp-waarom,
  .hp-toets {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .hp-reden-beeld {
    max-width: 340px;
  }

  .hp-toets-tekst > p.hp-toets-citaat {
    font-size: 22px;
  }

  .hp-planner {
    padding: 24px 20px;
  }

  .hp-planner-dagen span {
    height: 42px;
    font-size: 10px;
  }
}

/* ---------- Geanimeerde hero: boek bladert, foto, uploaden, quiz, klaar, WhatsApp, oefenen, resultaat ---------- */

@keyframes ssa-sc0{0%{opacity:1;transform:none}25.00%{opacity:1;transform:none}26.56%,100%{opacity:0;transform:translateX(-24px)}}
@keyframes ssa-cap0{0%{opacity:0}1.34%,25.22%{opacity:1}26.25%,100%{opacity:0}}
@keyframes ssa-seg0{0%{width:0}25.89%,99%{width:100%}100%{width:0}}
@keyframes ssa-sc1{0%,25.89%{opacity:0;transform:translateX(24px)}27.46%,36.16%{opacity:1;transform:none}37.72%,100%{opacity:0;transform:translateX(-24px)}}
@keyframes ssa-cap1{0%,25.89%{opacity:0}27.23%,36.38%{opacity:1}37.41%,100%{opacity:0}}
@keyframes ssa-seg1{0%,25.89%{width:0}37.05%,99%{width:100%}100%{width:0}}
@keyframes ssa-sc2{0%,37.05%{opacity:0;transform:translateX(24px)}38.62%,47.32%{opacity:1;transform:none}48.88%,100%{opacity:0;transform:translateX(-24px)}}
@keyframes ssa-cap2{0%,37.05%{opacity:0}38.39%,47.54%{opacity:1}48.57%,100%{opacity:0}}
@keyframes ssa-seg2{0%,37.05%{width:0}48.21%,99%{width:100%}100%{width:0}}
@keyframes ssa-sc3{0%,48.21%{opacity:0;transform:translateX(24px)}49.78%,58.48%{opacity:1;transform:none}60.04%,100%{opacity:0;transform:translateX(-24px)}}
@keyframes ssa-cap3{0%,48.21%{opacity:0}49.55%,58.71%{opacity:1}59.73%,100%{opacity:0}}
@keyframes ssa-seg3{0%,48.21%{width:0}59.38%,99%{width:100%}100%{width:0}}
@keyframes ssa-sc4{0%,59.38%{opacity:0;transform:translateX(24px)}60.94%,69.64%{opacity:1;transform:none}71.21%,100%{opacity:0;transform:translateX(-24px)}}
@keyframes ssa-cap4{0%,59.38%{opacity:0}60.71%,69.87%{opacity:1}70.89%,100%{opacity:0}}
@keyframes ssa-seg4{0%,59.38%{width:0}70.54%,99%{width:100%}100%{width:0}}
@keyframes ssa-sc5{0%,70.54%{opacity:0;transform:translateX(24px)}72.10%,80.80%{opacity:1;transform:none}82.37%,100%{opacity:0;transform:translateX(-24px)}}
@keyframes ssa-cap5{0%,70.54%{opacity:0}71.88%,81.03%{opacity:1}82.05%,100%{opacity:0}}
@keyframes ssa-seg5{0%,70.54%{width:0}81.70%,99%{width:100%}100%{width:0}}
@keyframes ssa-sc6{0%,81.70%{opacity:0;transform:translateX(24px)}83.26%,98.88%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-24px)}}
@keyframes ssa-cap6{0%,81.70%{opacity:0}83.04%,99.11%{opacity:1}100%{opacity:0}}
@keyframes ssa-seg6{0%,81.70%{width:0}100.00%,99%{width:100%}100%{width:0}}
@keyframes ssa-hint{0%,14.73%{opacity:1}16.07%,100%{opacity:0}}
@keyframes ssa-live{0%,15.18%{opacity:0;transform:scale(1.08)}17.19%,97.00%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}
@keyframes ssa-blad1{0%,2.68%{transform:perspective(1400px) rotateY(0deg)}7.59%,98.66%{transform:perspective(1400px) rotateY(-180deg)}99.11%,100%{transform:perspective(1400px) rotateY(0deg)}}
@keyframes ssa-blad2{0%,9.38%{transform:perspective(1400px) rotateY(0deg)}14.29%,98.66%{transform:perspective(1400px) rotateY(-180deg)}99.11%,100%{transform:perspective(1400px) rotateY(0deg)}}
@keyframes ssa-blad2z{0%,9.15%{z-index:2}9.38%,98.88%{z-index:4}99.11%,100%{z-index:2}}
@keyframes ssa-boek{0%{opacity:0}1.12%,97.32%{opacity:1}98.66%,100%{opacity:0}}
@keyframes ssa-bhoek{0%,16.07%{opacity:0;transform:scale(1.12)}17.41%,24.55%{opacity:1;transform:scale(1)}25.89%,100%{opacity:0;transform:scale(1)}}
@keyframes ssa-bscan{0%,19.64%{top:0;opacity:0}20.09%{top:0;opacity:1}23.66%{top:100%;opacity:1}24.11%,100%{top:100%;opacity:0}}
@keyframes ssa-tel{0%,14.73%{transform:rotate(4deg)}16.74%,23.88%{transform:translate(-46px, 26px) rotate(-7deg)}25.89%,100%{transform:rotate(4deg)}}
@keyframes ssa-flits{0%,18.53%{opacity:0}19.20%{opacity:.95}20.76%,100%{opacity:0}}
@keyframes ssa-sluiter{0%,17.86%{transform:scale(1)}18.53%{transform:scale(.82)}19.64%,100%{transform:scale(1)}}
@keyframes ssa-chip{0%,20.54%{opacity:0;transform:translateY(-8px)}21.65%,97.00%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
@keyframes ssa-hoek{0%,15.62%{transform:scale(1.15);opacity:0}17.41%,97.00%{transform:scale(1);opacity:1}100%{transform:scale(1.15);opacity:0}}
@keyframes ssa-balk{0%,27.46%{width:0}34.38%,97.00%{width:100%}100%{width:0}}
@keyframes ssa-bezig{0%,34.38%{opacity:1}35.04%,97.00%{opacity:0}100%{opacity:1}}
@keyframes ssa-klaar{0%,34.38%{opacity:0}35.04%,97.00%{opacity:1}100%{opacity:0}}
@keyframes ssa-vink{0%,34.82%{transform:scale(0)}35.80%{transform:scale(1.2)}36.52%,97.00%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes ssa-scan{0%,37.95%{top:0;opacity:0}38.62%{top:0;opacity:1}44.20%{top:100%;opacity:1}44.87%,100%{top:100%;opacity:0}}
@keyframes ssa-t1{0%,39.51%{opacity:0;transform:scale(.4)}40.18%,97.00%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.4)}}
@keyframes ssa-t2{0%,41.52%{opacity:0;transform:scale(.4)}42.19%,97.00%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.4)}}
@keyframes ssa-t3{0%,43.53%{opacity:0;transform:scale(.4)}44.20%,97.00%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.4)}}
@keyframes ssa-t4{0%,45.54%{opacity:0;transform:scale(.4)}46.21%,97.00%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.4)}}
@keyframes ssa-k1{0%,49.55%{opacity:0;transform:translateY(26px)}50.67%,97.00%{opacity:1;transform:none}100%{opacity:0;transform:translateY(26px)}}
@keyframes ssa-k2{0%,50.89%{opacity:0;transform:translateY(26px)}52.01%,97.00%{opacity:1;transform:none}100%{opacity:0;transform:translateY(26px)}}
@keyframes ssa-k3{0%,52.23%{opacity:0;transform:translateY(26px)}53.35%,97.00%{opacity:1;transform:none}100%{opacity:0;transform:translateY(26px)}}
@keyframes ssa-s4tekst{0%,53.57%{opacity:0;transform:scale(.8)}54.69%,97.00%{opacity:1;transform:none}100%{opacity:0;transform:scale(.8)}}
@keyframes ssa-knop{0%,54.91%{opacity:0;transform:scale(1)}55.58%{opacity:1;transform:scale(1)}56.70%{opacity:1;transform:scale(1.07)}57.59%,97.00%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes ssa-bel1{0%,60.94%{opacity:0;transform:translateY(18px)}62.05%,97.00%{opacity:1;transform:none}100%{opacity:0;transform:translateY(18px)}}
@keyframes ssa-blauw{0%,63.62%{color:#9AA0B8}64.29%,97.00%{color:#34B7F1}100%{color:#9AA0B8}}
@keyframes ssa-bel2{0%,66.07%{opacity:0;transform:translateY(18px)}67.19%,97.00%{opacity:1;transform:none}100%{opacity:0;transform:translateY(18px)}}
@keyframes ssa-goed{0%,74.55%{background:#FFFFFF;border-color:#E4E7F0;color:#121A3F}75.22%,97.00%{background:#1FB57A;border-color:#1FB57A;color:#FFFFFF}100%{background:#FFFFFF;border-color:#E4E7F0;color:#121A3F}}
@keyframes ssa-melding{0%,75.45%{transform:translateY(100%)}76.79%,97.00%{transform:none}100%{transform:translateY(100%)}}
@keyframes ssa-d-getal{0%,83.48%{opacity:0;transform:translateY(10px)}84.60%,97.00%{opacity:1;transform:none}100%{opacity:0;transform:translateY(10px)}}
@keyframes ssa-d-balk{0%,84.38%{width:0}87.95%,97.00%{width:80%}100%{width:0}}
@keyframes ssa-d-r1{0%,86.16%{width:0}88.84%,97.00%{width:92%}100%{width:0}}
@keyframes ssa-d-r2{0%,87.05%{width:0}89.73%,97.00%{width:75%}100%{width:0}}
@keyframes ssa-d-r3{0%,87.95%{width:0}90.63%,97.00%{width:45%}100%{width:0}}
@keyframes ssa-coach{0%,90.18%{opacity:0;transform:translateY(40px)}91.29%,97.00%{opacity:1;transform:none}100%{opacity:0;transform:translateY(40px)}}

/* Minder beweging: geen animatie. Het boek ligt open bij Vasco da Gama, de telefoon toont het dashboard. */
@media (prefers-reduced-motion: reduce) {
  .hp-hero-anim [class^="ssa-"],
  .hp-hero-anim [class*=" ssa-"] {
    animation: none !important;
  }

  .hp-hero-anim .ssa-boek,
  .hp-hero-anim .ssa-sc6,
  .hp-hero-anim .ssa-cap6,
  .hp-hero-anim .ssa-d-getal,
  .hp-hero-anim .ssa-coach {
    opacity: 1 !important;
    transform: none !important;
  }

  .hp-hero-anim .ssa-boek {
    transform: perspective(1400px) rotateX(18deg) rotateZ(-5deg) !important;
  }

  .hp-hero-anim .ssa-blad1,
  .hp-hero-anim .ssa-blad2 {
    transform: perspective(1400px) rotateY(-180deg) !important;
  }

  .hp-hero-anim .ssa-blad2 { z-index: 4 !important; }
  .hp-hero-anim [class^="ssa-seg"] { width: 100% !important; }
  .hp-hero-anim .ssa-d-balk { width: 80% !important; }
  .hp-hero-anim .ssa-d-r1 { width: 92% !important; }
  .hp-hero-anim .ssa-d-r2 { width: 75% !important; }
  .hp-hero-anim .ssa-d-r3 { width: 45% !important; }
}


/* ==========================================================================
   Compacte homepage: waarom (vier redenen), gescand-label, prijsknoppen,
   compacte afsluiter en vaste knop op mobiel
   ========================================================================== */

/* ---------- Gedeelde sectiekop (titel links, uitleg rechts) ---------- */

.sshome .hp2-kop {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  margin-bottom: 40px;
}
.sshome .hp2-kop h2 { margin: 0; }
.sshome .hp2-kop p {
  margin: 0;
  max-width: 460px;
  font-size: 18px;
  line-height: 1.5;
  color: #3B4466;
}

/* ---------- Waarom Slimme Start ideaal is: vier redenen ---------- */

.sshome .hp2-redenen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.sshome .hp2-reden h3 {
  margin: 18px 0 6px;
  font-family: Gabarito, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #121A3F;
}
.sshome .hp2-reden p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #3B4466;
}

.sshome .hp2-beeld {
  position: relative;
  height: 190px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
}
.sshome .hp2-geel  { background: #FFF3C4; }
.sshome .hp2-blauw { background: #E8EDFF; }
.sshome .hp2-mint  { background: #E2F6EC; }
.sshome .hp2-paars { background: #EEEAFB; }

/* 1. Schoolboek wordt quiz */
.sshome .hp2-blad {
  width: 78px;
  height: 104px;
  padding: 12px 10px;
  box-sizing: border-box;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transform: rotate(-4deg);
  box-shadow: -6px 6px 0 rgba(18, 26, 63, 0.08);
}
.sshome .hp2-blad i { display: block; height: 4px; background: #E7D9A2; }
.sshome .hp2-blad i.hp2-markeer { background: #FFC61A; width: 85%; }

.sshome .hp2-miniquiz {
  width: 104px;
  padding: 9px;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 2px solid #121A3F;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 9px;
  color: #121A3F;
}
.sshome .hp2-miniquiz b { font-size: 10px; line-height: 1.25; }
.sshome .hp2-miniquiz span { padding: 4px 5px; border: 1px solid #DADDE7; }
.sshome .hp2-miniquiz span.hp2-goed {
  background: #1FB57A;
  border-color: #1FB57A;
  color: #FFFFFF;
  font-weight: 700;
}

/* 2. Op tijd klaar voor de toets */
.sshome .hp2-toets {
  width: 100%;
  max-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sshome .hp2-toets-kop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 700;
  color: #121A3F;
}
.sshome .hp2-toets-kop b {
  font-family: Gabarito, sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: #2F5BFF;
  line-height: 1;
}
.sshome .hp2-toets-kop small {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: #3B4466;
}
.sshome .hp2-dagen {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
}
.sshome .hp2-dagen i { display: block; height: 24px; background: #D5DBEF; }
.sshome .hp2-dagen i.hp2-klaar { background: #1FB57A; }
.sshome .hp2-dagen i.hp2-nu { background: #FFFFFF; border: 2px solid #2F5BFF; box-sizing: border-box; }
.sshome .hp2-dagen i.hp2-toetsdag { background: #121A3F; }
.sshome .hp2-toets p {
  margin: 0;
  padding: 7px 9px;
  background: #FFFFFF;
  font-size: 11px;
  line-height: 1.35;
  color: #3B4466;
}

/* 3. Jij weet waar je kind staat */
.sshome .hp2-mail {
  width: 100%;
  max-width: 220px;
  padding: 14px;
  box-sizing: border-box;
  background: #FFFFFF;
  box-shadow: -6px 6px 0 rgba(18, 26, 63, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sshome .hp2-mail-kop { font-size: 11px; font-weight: 700; color: #121A3F; }
.sshome .hp2-mail-getal {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}
.sshome .hp2-mail-getal b {
  font-family: Gabarito, sans-serif;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  color: #121A3F;
}
.sshome .hp2-mail-getal span { font-size: 11px; color: #3B4466; }
.sshome .hp2-mail-balk { display: flex; height: 6px; background: #E4E7F0; }
.sshome .hp2-mail-balk span { background: #1FB57A; }
.sshome .hp2-mail-tip {
  margin: 0;
  padding: 7px 8px;
  background: #FFF3C4;
  font-size: 10px;
  line-height: 1.4;
  color: #121A3F;
}

/* 4. Ontdek interesses */
.sshome .hp2-tegels {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.sshome .hp2-tegel {
  position: relative;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
}
.sshome .hp2-tegel img {
  display: block;
  width: 100%;
  height: 46px;
  object-fit: cover;
}
.sshome .hp2-tegel span {
  padding: 5px 7px;
  font-size: 10px;
  font-weight: 700;
  color: #121A3F;
}
.sshome .hp2-tegel em {
  position: absolute;
  top: -6px;
  right: -4px;
  padding: 3px 6px;
  background: #121A3F;
  color: #FFFFFF;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Talen: gescand-label ---------- */

.sshome .hp2-gescand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 7px 12px;
  background: #FFFFFF;
  border: 1px solid #DADDE7;
  font-size: 14px;
  font-weight: 600;
  color: #3B4466;
}

.sshome .hp-prijs-knop:focus-visible,
.sshome .hp2-sticky .hp-knop:focus-visible {
  outline: 3px solid #FFC61A;
  outline-offset: 2px;
}

/* ---------- Afsluiter: compact, sluit aan op de footer ---------- */

.sshome .hp2-slot {
  padding-top: 48px;
  padding-bottom: 48px;
}
.sshome .hp2-slot h2 { font-size: clamp(28px, 3.2vw, 42px); }

/* ---------- Vaste knop onderaan (alleen mobiel) ---------- */

.sshome .hp2-sticky { display: none; }

/* ---------- Tablet ---------- */

@media (max-width: 1100px) {
  .sshome .hp2-redenen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Mobiel ---------- */

@media (max-width: 760px) {
  .sshome { padding-bottom: 96px; }

  .sshome .hp2-kop {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 28px;
  }
  .sshome .hp2-kop p { font-size: 16px; }

  .sshome .hp2-redenen { gap: 28px 14px; }
  .sshome .hp2-beeld { height: 150px; padding: 14px; gap: 8px; }
  .sshome .hp2-blad { width: 56px; height: 78px; gap: 5px; padding: 8px 7px; }
  .sshome .hp2-miniquiz { width: 84px; }
  .sshome .hp2-reden h3 { font-size: 17px; margin-top: 14px; }
  .sshome .hp2-reden p { font-size: 14px; }

  .sshome .hp2-slot { padding-top: 36px; padding-bottom: 36px; }

  .sshome .hp2-sticky {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #FFFFFF;
    border-top: 1px solid #DADDE7;
    box-shadow: 0 -6px 18px rgba(18, 26, 63, 0.08);
  }
  .sshome .hp2-sticky .hp-knop {
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }
  .sshome .hp2-sticky span {
    font-size: 13px;
    color: #6A7190;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .sshome .hp2-redenen { grid-template-columns: 1fr; }
  .sshome .hp2-beeld { height: 170px; }
}