/* Zo werkt het: pagina-specifieke stijl. Mobiel is het referentie-ontwerp (393), tablet vanaf 768, desktop vanaf 1100. */

/* 1. Inleiding: het probleem */
.zw-intro {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(#f1f5f9, #fff 1000px);
  padding: 288px 0 145px;
}
.zw-glas { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 420px 520px at 105% 12%, rgba(128,169,233,.7), rgba(128,169,233,0) 70%),
    radial-gradient(ellipse 360px 420px at -8% 30%, rgba(128,169,233,.55), rgba(128,169,233,0) 70%),
    radial-gradient(ellipse 280px 560px at 108% 44%, rgba(255,157,67,.75), rgba(255,157,67,0) 72%),
    radial-gradient(ellipse 340px 560px at -6% 66%, rgba(255,122,0,.85), rgba(255,170,0,0) 72%); }
/* Glasribben zoals in Figma: elke ribbe loopt van donker naar licht (licht, zoals in Figma), met zachte blur eronder. */
.zw-glas::before { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.1) 38px, rgba(255,255,255,.42) 79px);
  -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); }
.zw-glas::after { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 78px, rgba(255,255,255,.35) 78px 79px); }
.zw-intro > *:not(.nav):not(.zw-glas) { position: relative; z-index: 2; }
.zw-intro .nav { z-index: 5; }

.zw-lead { max-width: 273px; margin: 0 auto; font-size: 18px; line-height: 24px; letter-spacing: -.01em; color: var(--body); }
.zw-intro h1 { max-width: 250px; margin: 50px auto 0; font-size: 28px; line-height: 42px; letter-spacing: -.01em; font-weight: 700; color: var(--brand); }

.zw-seven {
  position: relative; max-width: 333px; min-height: 702px; margin: 94px auto 0; padding: 324px 23px 0 51px;
  background: #fff; border: 1px solid var(--line); border-radius: 32px; text-align: left;
}
.zw-seven .phone { position: absolute; z-index: 2; top: -47px; right: -9px; width: 292.6px; }
.zw-seven .phone img { width: 100%; height: auto; }
.zw-seven .schaduw { position: absolute; z-index: 1; left: 79px; top: 203px; width: 214px; height: auto; }
.zw-seven > p, .zw-seven h2 { position: relative; z-index: 3; }
.zw-seven .klein { font-size: 14px; line-height: 24px; letter-spacing: -.01em; color: var(--body); }
.zw-seven h2 { margin-top: 16px; font-size: 28px; line-height: 42px; letter-spacing: -.01em; font-weight: 700; color: var(--orange-text); }
.zw-seven .groot { margin-top: 16px; font-size: 24px; line-height: 32px; letter-spacing: -.01em; color: var(--body); }

.zw-sluit { margin: 179px 0 0; padding: 0 23px 0 24px; text-align: right; }
.zw-sluit h2 { margin-left: auto; max-width: 284px; font-size: 28px; line-height: 42px; letter-spacing: -.01em; font-weight: 700; color: var(--orange-text); }
.zw-sluit p { margin-top: 26px; font-size: 24px; line-height: 36px; letter-spacing: -.01em; color: var(--body); }

/* 2. Filosofisch probleem en uitkomst */
.zw-tekst { padding: 64px 24px 92px; color: var(--brand); }
.zw-tekst h2 { font-size: 28px; line-height: 35px; font-weight: 700; margin-bottom: 16px; }
.zw-tekst p { font-size: 18px; line-height: 28px; margin-bottom: 16px; }
.zw-tekst p:last-child { margin-bottom: 0; }
.zw-uitkomst { padding-bottom: 64px; }

/* 3. De oplossing */
.zw-oplossing { position: relative; overflow: hidden; background: #06235c; height: 1081px; padding: 68px 24px 0; }
.zw-oplossing .vormen { position: absolute; left: -1px; top: 584px; width: 437px; height: 713px; max-width: none; pointer-events: none; }
.zw-oplossing .tekst { position: relative; z-index: 2; width: 271px; display: flex; flex-direction: column; gap: 50px; color: #cbd5e1; }
.zw-oplossing h2 { font-size: 32px; line-height: 42px; font-weight: 400; letter-spacing: -.01em; }
.zw-oplossing h2 span { display: block; margin-top: 42px; }
.zw-oplossing .tekst p { width: 265px; font-size: 20px; line-height: 32px; letter-spacing: -.01em; }
.zw-oplossing .btn-orange { width: 242px; min-width: 0; }
.zw-oplossing .btn-orange:focus-visible { outline-color: #fff; }

/* 4. Zo werkt het in stappen */
.zw-stappen { background: var(--bg-hero); }
.zw-stappen .beeld { position: relative; }
.zw-stappen .beeld picture, .zw-stappen .beeld img { display: block; width: 100%; height: auto; }
.zw-stappen .beeld img { aspect-ratio: 394 / 527; }
.zw-stappen .info { padding: 56px 26px 100px; }
.zw-stappen h2 { font-size: 36px; line-height: 48px; letter-spacing: -.01em; font-weight: 400; color: var(--brand); }
.zw-stappen h2 b { display: block; font-weight: 700; }
.zw-stappen .teksten { margin-top: 39px; min-height: 112px; max-width: 342px; }
.zw-stappen .teksten p { font-size: 20px; line-height: 28px; letter-spacing: -.01em; color: var(--body); }
.zw-stappen .bediening { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 9px; margin-top: 37px; padding: 2px 0; }
.zw-stappen .stip, .zw-stappen .pijl {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; padding: 0; border-radius: 999px; border: 1px solid #a9c3eb; background: var(--bg-cta);
  font: inherit; font-size: 12px; line-height: 18px; letter-spacing: -.01em; color: var(--body); cursor: pointer;
}
.zw-stappen .stip[aria-current="true"] { border-color: var(--brand); color: var(--brand); }
.zw-stappen .stip:hover, .zw-stappen .pijl:hover { border-color: var(--brand); }
.zw-stappen .stip:focus-visible, .zw-stappen .pijl:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.zw-stappen .pijl { width: 26px; height: 26px; }
.zw-stappen .pijl img { width: 16px; height: 16px; }
.zw-stappen .pijl.vorige img { transform: rotate(90deg); }
.zw-stappen .pijl.volgende img { transform: rotate(-90deg); }
.zw-stappen .pijl[disabled] { opacity: .45; cursor: default; }



/* zonder script: alle stappen onder elkaar */
.zw-stappen:not(.is-ready) .stip { display: none; }
.zw-stappen:not(.is-ready) .stap { margin-bottom: 20px; }
.zw-stappen:not(.is-ready) .beeld { display: grid; gap: 12px; }
.zw-stappen:not(.is-ready) .beeld figure { margin: 0; }
.zw-stappen .stap[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 5. Veelgestelde vragen (eigen weergave) */
.faq.zw-faq { padding: 120px var(--gutter) 104px; }
.faq.zw-faq h2 { margin: 0 auto 66px; max-width: 267px; }
.faq.zw-faq .wrap { padding: 0; max-width: 345px; }
.faq.zw-faq details { margin: 0 0 13px; padding: 20px; border: 0; border-radius: 12px; background: #fff; }
.faq.zw-faq summary { font-size: 16px; line-height: 24px; gap: 28px; }
.faq.zw-faq details[open] summary { padding-bottom: 20px; border-bottom: 1px solid #a9c3eb; }
.faq.zw-faq details p { margin-top: 20px; padding-top: 0; border-top: 0; font-size: 14px; line-height: 20px; }
.faq.zw-faq details p a { color: var(--brand); }
.faq.zw-faq details p a:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* tablet */
@media (min-width: 768px) {
  .zw-stappen .bediening { gap: 14px 16px; }
  .zw-stappen .pijl { width: 30px; height: 30px; }
  .zw-intro { background: linear-gradient(#f1f5f9, #fff 1000px); padding: 288px 0 104px; }
  .zw-lead { max-width: 481px; font-size: 28px; line-height: 48px; letter-spacing: -.01em; }
  .zw-intro h1 { max-width: 463px; margin-top: 50px; font-size: 54px; line-height: 72px; letter-spacing: -.01em; }
  .zw-seven { max-width: 651px; min-height: 446px; margin-top: 242px; padding: 65px 0 0 50px; }
  .zw-seven .phone { top: -30px; right: -17px; width: 326px; }
  .zw-seven .schaduw { left: 404px; top: 286px; width: 197px; }
  .zw-seven > p, .zw-seven h2 { max-width: 291px; }
  .zw-seven .klein { max-width: 280px; font-size: 16px; line-height: 28px; }
  .zw-seven h2 { margin-top: 20px; font-size: 36px; line-height: 48px; }
  .zw-seven .groot { max-width: 425px; margin-top: 20px; font-size: 28px; line-height: 38px; }
  .zw-sluit { margin: 340px auto 0; max-width: 680px; padding: 0; }
  .zw-sluit h2 { max-width: 371px; font-size: 36px; line-height: 48px; }
  .zw-sluit p { margin-top: 13px; font-size: 28px; line-height: 48px; }

  .zw-tekst { padding: 80px 70px 80px; }
  .zw-tekst h2 { font-size: 32px; line-height: 43px; margin-bottom: 20px; }
  .zw-tekst p { font-size: 20px; line-height: 31px; margin-bottom: 20px; }
  .zw-uitkomst { padding-bottom: 80px; }

  .zw-oplossing { height: 803px; padding: 94px 0 0 100px; }
  .zw-oplossing .vormen { left: 345px; top: -27px; width: 616px; height: 1005px; }
  .zw-oplossing .tekst { width: 361px; }
  .zw-oplossing h2 { font-size: 36px; line-height: 48px; }
  .zw-oplossing h2 span { margin-top: 48px; }
  .zw-oplossing .tekst p { width: 265px; }
  .zw-oplossing .btn-orange { width: 226px; white-space: nowrap; }

  .zw-stappen .beeld img { aspect-ratio: 768 / 527; }
  .zw-stappen .info { padding: 56px 98px 85px; }
  .zw-stappen h2 { font-size: 42px; line-height: 56px; }
  .zw-stappen .teksten { margin-top: 39px; max-width: 420px; }
  .zw-stappen .teksten p { font-size: 22px; }

  .faq.zw-faq { padding: 120px 100px 104px; }
  .faq.zw-faq h2 { max-width: none; margin: 0 0 60px; text-align: left; font-size: 42px; }
  .faq.zw-faq .wrap { max-width: 564px; }
  .faq.zw-faq summary { font-size: 20px; line-height: 28px; }
  .faq.zw-faq details p { font-size: 16px; line-height: 24px; }
}

/* desktop */
@media (min-width: 1100px) {
  .zw-intro { padding: 340px 0 166px; }
  .zw-glas { background-size: auto, auto, auto, auto, auto; }
  .zw-lead { max-width: 1278px; font-size: 36px; line-height: 67.7px; }
  .zw-intro h1 { max-width: 1172px; margin-top: 15px; font-size: 64px; line-height: 103px; }
  .zw-seven { max-width: 1157px; min-height: 446px; margin-top: 352px; padding: 70px 0 0 53px; }
  .zw-seven .phone { top: -30px; right: -31px; width: 434.7px; }
  .zw-seven .schaduw { left: 821px; top: 389px; width: 316px; }
  .zw-seven > p, .zw-seven h2 { max-width: 656px; }
  .zw-seven .klein { max-width: 656px; font-size: 24px; line-height: 36px; }
  .zw-seven h2 { margin-top: 60px; font-size: 48px; line-height: 64px; }
  .zw-seven .groot { max-width: 656px; margin-top: 24px; font-size: 36px; line-height: 42px; }
  .zw-sluit { margin-top: 266px; max-width: 1042px; }
  .zw-sluit h2 { max-width: 680px; font-size: 48px; line-height: 64px; }
  .zw-sluit p { margin-top: 15px; font-size: 36px; line-height: 64px; }

  .zw-tekst { padding: 100px max(200px, calc(50% - 520px)) 100px; }
  .zw-tekst h2 { font-size: 40px; line-height: 52px; margin-bottom: 24px; }
  .zw-tekst p { font-size: 22px; line-height: 35px; margin-bottom: 24px; }
  .zw-tekst p:last-child { margin-bottom: 0; }
  .zw-uitkomst { padding-bottom: 100px; }

  .zw-oplossing { height: 894px; padding: 94px 0 0 calc(50% - 524px); }
  .zw-oplossing .vormen { left: calc(50% + 52px); top: 0; width: 668px; height: 1090px; }
  .zw-oplossing .tekst { width: 513px; }
  .zw-oplossing h2 { font-size: 48px; line-height: 64px; }
  .zw-oplossing h2 span { margin-top: 64px; }
  .zw-oplossing .tekst p { width: 396px; font-size: 28px; line-height: 36px; }
  .zw-oplossing .btn-orange { width: 242px; }

  .zw-stappen { display: grid; grid-template-columns: 49.375% 1fr; min-height: 716px; }
  .zw-stappen .beeld img { aspect-ratio: 711 / 716; }
  .zw-stappen .info { padding: 190px 40px 0 103px; }
  .zw-stappen h2 { font-size: 48px; line-height: 56px; }
  .zw-stappen .teksten { margin-top: 39px; min-height: 192px; max-width: 425px; }
  .zw-stappen .teksten p { font-size: 24px; line-height: 28px; }
  .zw-stappen .bediening { margin-top: 39px; }

  .faq.zw-faq { padding: 120px 0 100px; }
  .faq.zw-faq h2 { font-size: 48px; margin-bottom: 60px; }
  .faq.zw-faq .wrap { max-width: 1040px; }
}

@media (max-width: 767px) {
  .zw-stappen .info { max-width: 394px; }
}
@media (prefers-reduced-motion: reduce) {
  .zw-stappen * { transition: none !important; }
}
.zw-stappen [hidden] { display: none !important; }
.faq.zw-faq summary img { flex: none; width: 24px; height: 24px; }

/* Mobiel: titel boven het beeld, daaronder de stappen 1-7, dan de tekst bij de stap (zo blijven beeld en knoppen samen in beeld). */
@media (max-width: 767px) {
  .zw-stappen { display: flex; flex-direction: column; }
  .zw-stappen .info { display: contents; }
  .zw-stappen h2 { order: 1; padding: 32px 26px 16px; font-size: 28px; line-height: 36px; }
  .zw-stappen .beeld { order: 2; }
  .zw-stappen .bediening { order: 3; margin-top: 0; padding: 18px 26px 6px; }
  .zw-stappen .teksten { order: 4; margin: 0; padding: 16px 26px 72px; max-width: none; min-height: 170px; }
  .zw-stappen .teksten p { font-size: 20px; line-height: 28px; max-width: 342px; }
  .zw-stappen .sr-only { order: 5; }
}

/* Mobiel: het poppetje volgt de tekst in plaats van op een vaste hoogte te staan, zodat de knop het niet meer raakt. */
@media (max-width: 767px) {
  .zw-oplossing { height: auto; display: flex; flex-direction: column; }
  .zw-oplossing .tekst { order: 1; }
  .zw-oplossing .vormen { order: 2; position: relative; left: auto; top: auto; display: block; margin: -46px 0 -216px -25px; }
}

/* Glasvlak rechts van het poppetje: echte blur, want die werkt niet in een SVG-bestand. */
.zw-oplossing .vormen img { display: block; width: 100%; height: 100%; max-width: none; }
.zw-oplossing .vormen .glas { position: absolute; left: 45.66%; top: 0; width: 54.34%; height: 71.56%;
  background: linear-gradient(to left, rgba(255,255,255,.04), rgba(255,255,255,.08) 51.4%, rgba(255,255,255,.3));
  -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); }