/* Component 02: scope rond de oorspronkelijke hero-, badge- en knopregels. */
#top .wh-stip{ flex: 0 0 auto; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: rgb(111, 217, 255); }
#top .wh-wijzer{ --wh-veer: linear(0, 0.0209, 0.0752, 0.1517, 0.2416, 0.3376, 0.4344, 0.5278, 0.6151, 0.6944, 0.7647, 0.8256, 0.8772, 0.9199, 0.9544, 0.9815, 1.0021, 1.0172, 1.0275, 1.034, 1.0374, 1.0384, 1.0376, 1.0356, 1.0326, 1.0292, 1.0255, 1.0218, 1.0182, 1.0148, 1.0118, 1.0091, 1.0067, 1.0047, 1.0031, 1.0018, 1.0007, 0.9999, 0.9993, 0.9989, 0.9987, 0.9986, 0.9985, 0.9986, 0.9986, 0.9987, 0.9989, 0.999, 1); display: inline-flex; align-items: center; gap: 0.65em; margin: 0px auto clamp(1.3rem, 0.9rem + 1.2vw, 2rem); padding: 0.62em 1em 0.62em 0.95em; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass-fill); backdrop-filter: blur(14px) saturate(1.3); color: var(--ink); font-size: 0.9rem; font-weight: 550; letter-spacing: -0.008em; line-height: 1; text-decoration: none; transition: opacity 0.7s ease, transform 0.9s var(--wh-veer), border-color 0.3s ease; }
#top .wh-wijzer:hover{ border-color: var(--line-strong); }
#top .wh-wijzer__pijl{ color: var(--ink-soft); transition: transform 0.35s var(--ease-out); }
#top .wh-wijzer:hover .wh-wijzer__pijl{ transform: translateY(2px); }
#top .wh-wijzer:focus-visible{ outline: 2px solid var(--accent-2); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){#top .wh-wijzer,#top .wh-stip,#top .wh-knop{ transition: none !important; animation: auto ease 0s 1 normal none running none !important; }}
#top *{ margin: 0px; padding: 0px; }
#top img,#top svg,#top video{ display: block; max-width: 100%; }
#top a{ color: inherit; text-decoration: none; }
#top .display,#top h1,#top h2,#top h3{ font-family: var(--font-display); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--ink); text-wrap: balance; }
#top h2,#top .h2{ font-size: var(--fs-h2); line-height: 1.04; font-weight: 640; }
#top em,#top .it,#top .grad,#top .swash{ font-style: normal; font-weight: inherit;         background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)){#top em,#top .it,#top .grad,#top .swash{ -webkit-text-fill-color: currentcolor; color: var(--accent-deep); }}
#top .lw{ display: inline-block; white-space: nowrap; }
#top .lw__in{ display: inline-block; padding: 0.24em 0.12em; margin: -0.24em -0.12em; }
#top .lw__in--grad{         background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)){#top .lw__in--grad{ -webkit-text-fill-color: currentcolor; color: var(--accent-deep); }}
#top em:has(> .lw),#top .grad:has(> .lw),#top .it:has(> .lw),#top .swash:has(> .lw){ background: none; }
#top .eyebrow{ font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 0.6em; }
#top .eyebrow::before{ content: ""; width: 1.6em; height: 1px; background: var(--accent-2); opacity: 0.9; }
#top .lead{ font-size: var(--fs-lead); line-height: 1.36; color: var(--ink-soft); font-weight: 400; letter-spacing: -0.018em; max-width: 32ch; }
#top p{ max-width: var(--measure); color: var(--ink-soft); }
#top .container{ width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
#top .btn{ --bg-btn: var(--ink); --fg-btn: var(--ink-invert); display: inline-flex; align-items: center; gap: 0.55em; padding: 0.95em 1.55em; border-radius: var(--r-pill); font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-small); letter-spacing: -0.01em; background: var(--bg-btn); color: var(--fg-btn); line-height: 1; transition: transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out), filter var(--dur-1) var(--ease-out); will-change: transform; }
#top .btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-soft); }
#top .btn:active{ transform: translateY(0px) scale(0.97); }
#top .btn .arrow{ transition: transform var(--dur-1) var(--ease-out); }
#top .btn:hover .arrow{ transform: translateX(4px); }
#top .btn--ghost{ --bg-btn: transparent; --fg-btn: var(--ink); border: 1px solid var(--line-strong); backdrop-filter: blur(8px); }
#top .btn--ghost:hover{ box-shadow: none; border-color: var(--ink); }
#top .link-arrow{ display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; font-size: var(--fs-small); color: var(--ink); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color var(--dur-1), border-color var(--dur-1); }
#top .link-arrow .arrow{ color: var(--accent-deep); transition: transform var(--dur-1) var(--ease-out); }
#top .link-arrow:hover{ color: var(--accent-deep); }
#top .link-arrow:hover .arrow{ transform: translateX(4px); }
#top{ position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: clamp(7rem, 6rem + 6vw, 10rem); padding-bottom: var(--space-6); overflow: hidden; margin-left: calc(-1 * clamp(0rem, 1vw, 1.5rem)); padding-left: clamp(0rem, 1vw, 1.5rem); }
#top .hero__glow{ position: absolute; inset: 0px; z-index: -1; pointer-events: none; }
#top .hero__glow span{ position: absolute; border-radius: 50%; opacity: 0.6; }
#top .hero__glow span:nth-child(1){ width: 46vw; height: 46vw; right: -10vw; top: 6vh; background: radial-gradient(
    circle closest-side,
    var(--accent-glow) 0%,
    color-mix(in srgb, var(--accent-glow) 88%, transparent) 18%,
    color-mix(in srgb, var(--accent-glow) 66%, transparent) 32%,
    color-mix(in srgb, var(--accent-glow) 42%, transparent) 46%,
    color-mix(in srgb, var(--accent-glow) 22%, transparent) 58%,
    color-mix(in srgb, var(--accent-glow) 9%, transparent) 68%,
    color-mix(in srgb, var(--accent-glow) 2%, transparent) 78%,
    transparent 86%
  ); }
#top .hero__glow span:nth-child(2){ width: 34vw; height: 34vw; left: -8vw; bottom: -8vh; background: radial-gradient(
    circle closest-side,
    var(--glass-tint) 0%,
    color-mix(in srgb, var(--glass-tint) 88%, transparent) 18%,
    color-mix(in srgb, var(--glass-tint) 66%, transparent) 32%,
    color-mix(in srgb, var(--glass-tint) 42%, transparent) 46%,
    color-mix(in srgb, var(--glass-tint) 22%, transparent) 58%,
    color-mix(in srgb, var(--glass-tint) 9%, transparent) 68%,
    color-mix(in srgb, var(--glass-tint) 2%, transparent) 78%,
    transparent 86%
  ); opacity: 0.5; }
#top .hero__inner{ position: relative; max-width: min(100%, 62rem); margin-inline: auto; text-align: center; }
#top h1{ font-size: clamp(2.5rem, 1.3rem + 4.7vw, 5.4rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 560; max-width: 22ch; margin-inline: auto; }
#top h1 .reveal{ display: block; }
#top h1 .reveal + .reveal{ margin-top: 0px; }
#top h1 .it{ font-style: italic; font-weight: 460; }
#top .hero__sub{ margin-top: clamp(1.6rem, 1rem + 2vw, 2.4rem); margin-inline: auto; font-size: var(--fs-lead); line-height: 1.4; color: var(--ink-soft); font-weight: 380; max-width: 46ch; }
#top .hero__actions{ margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; justify-content: center; }
#top .hero__scroll{ position: absolute; bottom: 2rem; left: var(--gutter); display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
#top .hero__scroll .mouse{ width: 20px; height: 32px; border-radius: var(--r-pill); border: 1.5px solid var(--ink-faint); position: relative; }
#top .hero__scroll .mouse::after{ content: ""; position: absolute; top: 6px; left: 50%; width: 3px; height: 6px; border-radius: 2px; background: var(--accent-deep); transform: translateX(-50%); animation: scrollDot 1.8s var(--ease-in-out) infinite; }
#top .hero-proof{ margin-top: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.9rem 1.1rem; }
#top .hero-proof__avatars{ display: flex; flex: 0 0 auto; }
#top .hero-proof__avatars img{ width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: rgb(255, 255, 255); box-shadow: 0 0 0 2px var(--bg); }
#top .hero-proof__avatars img + img{ margin-left: -11px; }
#top .hero-proof__stars{ color: var(--accent-deep); letter-spacing: 0.14em; font-size: 0.95rem; white-space: nowrap; }
#top .hero-proof__label{ color: var(--ink-soft); font-size: var(--fs-small); }/* Zelfde hero-opmaak; AF-inhoud en normale sectieflow vóór de video. */
#top{isolation:isolate;min-height:100svh;margin-left:0;padding:150px 24px 130px;align-items:center}
#top .hero__inner{width:100%;max-width:1160px;padding-inline:0}
#top h1{max-width:38ch;font-size:clamp(2.5rem,1.6rem + 2.7vw,3.6rem);line-height:1.04;letter-spacing:-.03em;font-weight:640;text-wrap:balance}
#top .hero__line{display:block}
#top h1 .it{font-style:normal;font-weight:500;background-image:var(--grad-text);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent)}
#top .hero__sub{font-size:clamp(1.1rem,1.8vw,1.6rem);max-width:49ch;text-wrap:balance}
#top .hero-proof__avatars img{object-position:center 24%;box-shadow:0 0 0 1px var(--glass-border)}
#top .hero-proof__label{font-size:13px}
#top .hero__scroll{color:var(--ink-soft);font-size:10px;left:max(32px,calc((100vw - 1088px)/2));bottom:34px}
#top .hero__glow{z-index:-1}
#top .wh-wijzer{font-size:13px}
#top .hero__glow span:first-child{top:9vh;width:68vw;height:68vw;right:-20vw;opacity:.42}
#top .hero__glow span:nth-child(2){bottom:-7vh;opacity:.4}
@keyframes scrollDot{0%,100%{opacity:.4;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,7px)}}
@keyframes afHeroEnter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){#top .wh-wijzer{animation:afHeroEnter .7s both}#top h1 .hero__line{animation:afHeroEnter .85s .1s both}#top h1 .hero__line+.hero__line{animation-delay:.22s}#top .hero__sub{animation:afHeroEnter .8s .35s both}#top .hero__actions{animation:afHeroEnter .8s .45s both}#top .hero-proof{animation:afHeroEnter .8s .55s both}}
@media(max-width:700px){#top{min-height:100svh;padding:138px 24px 100px}#top .wh-wijzer{font-size:10px;gap:.6em}#top h1{font-size:clamp(2.35rem,8.9vw,3.6rem);letter-spacing:-.045em}#top .hero__sub{font-size:17px;line-height:1.5;margin-top:26px}#top .hero__actions{flex-direction:column;margin-top:30px;gap:12px}#top .btn{font-size:13px;padding:16px 22px}#top .btn--ghost{border-color:transparent;color:var(--ink-soft);text-decoration:underline;text-underline-offset:5px}#top .hero-proof{gap:10px;margin-top:27px}#top .hero-proof__label{font-size:11px}#top .hero-proof__avatars img{width:36px;height:36px}#top .hero__scroll{font-size:9px;left:24px;bottom:24px}#top .hero__scroll .mouse{width:16px;height:24px}#top .hero__glow span:first-child{width:140vw;height:140vw;right:-70vw;top:20vh}}
@media(prefers-reduced-motion:reduce){#top .mouse::after{animation:none}#top *{scroll-behavior:auto;transition:none}}