.hero.v3 {
  --v3-kop: 80px; --v3-breed: 1240px; --v3-rand: 24px;
  --v3-grond: #05080f; --v3-gloed: rgba(40, 120, 220, .28);
  --v3-doel: 140px; 
  --v3-gat: 56px;   
  --v3-tekst: min(640px, 48vw);
  --v3-bronb: 1672; --v3-bront: 948; 
  --v3-dpr: 1;
  --v3-top: max(22%, 210px); 
  --v3-s: 1; 
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background: radial-gradient(50% 60% at 72% 60%, var(--v3-gloed), transparent 70%), var(--v3-grond);
  display: flex; flex-direction: column;
  padding: calc(var(--v3-kop) + 28px) 0 40px;
}
@media (min-resolution: 1.25dppx) { .hero.v3 { --v3-dpr: 1.5; } }
@media (min-resolution: 1.75dppx) { .hero.v3 { --v3-dpr: 2; } }
@media (min-resolution: 2.5dppx) { .hero.v3 { --v3-dpr: 3; } }
.v3-in { position: relative; z-index: 2; width: min(100% - 2 * var(--v3-rand), var(--v3-breed)); margin-inline: auto; order: 1; }
.v3-tekst { text-align: center; max-width: 640px; margin-inline: auto; }
.v3-tekst > :first-child { margin-top: 0; }
.v3 h1 { text-wrap: balance; }
.v3-sub { text-wrap: balance; margin-inline: auto; }
.v3-knoppen { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.v3-onder { position: relative; z-index: 2; order: 3; width: min(100% - 2 * var(--v3-rand), var(--v3-breed)); margin-inline: auto; }
.v3-vinken { list-style: none; padding: 0; margin: 0 auto; max-width: 520px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.v3-beeld { display: block; position: relative; z-index: 1; order: 2; aspect-ratio: var(--v3-ar); margin-inline: auto;
  width: min(100%, var(--v3-bronb) / .76 / var(--v3-dpr) * 1px); }
.v3-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }


@media (orientation: portrait) and (max-width: 1179px) {
  .v3-beeld { aspect-ratio: var(--v3-tel-ar); --v3-tb: min(100%, var(--v3-bront) / .76 / var(--v3-dpr) * 1px); width: var(--v3-tb);
    margin-top: calc(30px - var(--v3-tel-wand) * var(--v3-tb) / var(--v3-tel-ar));
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--v3-tel-wand) * 85%), #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--v3-tel-wand) * 85%), #000 88%, transparent 100%); }
  .v3-onder { margin-top: -6%; }
}
@media (orientation: portrait) and (min-width: 700px) and (max-width: 1179px) {
  .hero.v3 { --v3-s: 1.3; }
  .v3-beeld { --v3-tb: min(100%, 760px, var(--v3-bront) / .76 / var(--v3-dpr) * 1px); }
}

.v3-tekst, .v3-vinken { \7a oom: var(--v3-s); }

@media (orientation: landscape) and (max-width: 1023px), (orientation: portrait) and (min-width: 1180px) {
  
  .v3-beeld { aspect-ratio: var(--v3-ar0, var(--v3-ar));
    width: min(100%, var(--v3-bronb) * var(--v3-ar0, var(--v3-ar)) / var(--v3-ar) / .76 / var(--v3-dpr) * 1px); }
  .v3-beeld img { object-position: 100% 50%; }
  .v3-beeld { margin-top: 8px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 86%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 86%, transparent 100%); }
  .v3-onder { margin-top: 4px; }
}


@media (orientation: landscape) and (min-width: 1024px) {
  .hero.v3 {
    
    --v3-links: max(var(--v3-rand), 5vw);
    --v3-tr: calc(var(--v3-links) + var(--v3-tekst) * var(--v3-s));
    --v3-h: min(100svh - var(--v3-kop) - 8px,
                (100vw - var(--v3-tr) - var(--v3-gat)) / var(--v3-rest) / 1.03 / var(--v3-ar),
                var(--v3-bronb) / .76 / var(--v3-dpr) / var(--v3-ar) * 1px);
    
    --v3-R: max(0px, min(100vw - var(--v3-tr) - var(--v3-doel) - 1.03 * var(--v3-rest) * var(--v3-h) * var(--v3-ar),
                         (100svh - var(--v3-kop) - 8px - var(--v3-h)) * 1000));
    
    min-height: max(calc(var(--v3-h) + var(--v3-kop) + 8px), calc(100svh * var(--v3-vul, 0)));
    justify-content: center;
    padding: calc(var(--v3-kop) + 24px) 0 24px;
  }
  
  .v3-in, .v3-onder { width: fit-content; max-width: calc(100% - var(--v3-links) - var(--v3-rand)); margin-left: var(--v3-links); margin-right: 0; }
  .v3-in { order: 0; }
  .v3-tekst { text-align: left; max-width: var(--v3-tekst); margin: 0; }
  .v3-knoppen { justify-content: flex-start; }
  .v3-sub { margin-inline: 0; }
  .v3-onder { order: 0; margin-top: 28px; }
  .v3-vinken { margin: 0; max-width: var(--v3-tekst); }
  .v3-beeld {
    position: absolute; bottom: 0; order: 0; margin: 0;
    height: var(--v3-h); width: auto; aspect-ratio: var(--v3-ar);
    right: var(--v3-R);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,0.005) calc(min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%)) * 0.083), rgba(0,0,0,0.035) calc(min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%)) * 0.167), rgba(0,0,0,0.104) calc(min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%)) * 0.250), rgba(0,0,0,0.210) calc(min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%)) * 0.333), rgba(0,0,0,0.347) calc(min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%)) * 0.417), rgba(0,0,0,0.500) calc(min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%)) * 0.500), rgba(0,0,0,0.653) calc(min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%)) * 0.583), rgba(0,0,0,0.790) calc(min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%)) * 0.667), rgba(0,0,0,0.896) calc(min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%)) * 0.750), rgba(0,0,0,0.965) calc(min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%)) * 0.833), rgba(0,0,0,0.995) calc(min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%)) * 0.917), #000 min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%))), linear-gradient(180deg, transparent 0, rgba(0,0,0,0.0035) calc(var(--v3-top) * 0.0417), rgba(0,0,0,0.0139) calc(var(--v3-top) * 0.0833), rgba(0,0,0,0.0313) calc(var(--v3-top) * 0.1250), rgba(0,0,0,0.0556) calc(var(--v3-top) * 0.1667), rgba(0,0,0,0.0868) calc(var(--v3-top) * 0.2083), rgba(0,0,0,0.1250) calc(var(--v3-top) * 0.2500), rgba(0,0,0,0.1701) calc(var(--v3-top) * 0.2917), rgba(0,0,0,0.2222) calc(var(--v3-top) * 0.3333), rgba(0,0,0,0.2813) calc(var(--v3-top) * 0.3750), rgba(0,0,0,0.3472) calc(var(--v3-top) * 0.4167), rgba(0,0,0,0.4201) calc(var(--v3-top) * 0.4583), rgba(0,0,0,0.5000) calc(var(--v3-top) * 0.5000), rgba(0,0,0,0.5799) calc(var(--v3-top) * 0.5417), rgba(0,0,0,0.6528) calc(var(--v3-top) * 0.5833), rgba(0,0,0,0.7188) calc(var(--v3-top) * 0.6250), rgba(0,0,0,0.7778) calc(var(--v3-top) * 0.6667), rgba(0,0,0,0.8299) calc(var(--v3-top) * 0.7083), rgba(0,0,0,0.8750) calc(var(--v3-top) * 0.7500), rgba(0,0,0,0.9132) calc(var(--v3-top) * 0.7917), rgba(0,0,0,0.9444) calc(var(--v3-top) * 0.8333), rgba(0,0,0,0.9688) calc(var(--v3-top) * 0.8750), rgba(0,0,0,0.9861) calc(var(--v3-top) * 0.9167), rgba(0,0,0,0.9965) calc(var(--v3-top) * 0.9583), #000 var(--v3-top)), linear-gradient(270deg, transparent 0, rgba(0,0,0,0.016) calc(min(14%, var(--v3-R)) * 0.125), rgba(0,0,0,0.104) calc(min(14%, var(--v3-R)) * 0.250), rgba(0,0,0,0.275) calc(min(14%, var(--v3-R)) * 0.375), rgba(0,0,0,0.500) calc(min(14%, var(--v3-R)) * 0.500), rgba(0,0,0,0.725) calc(min(14%, var(--v3-R)) * 0.625), rgba(0,0,0,0.896) calc(min(14%, var(--v3-R)) * 0.750), rgba(0,0,0,0.984) calc(min(14%, var(--v3-R)) * 0.875), #000 min(14%, var(--v3-R)));
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,0.005) calc(min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%)) * 0.083), rgba(0,0,0,0.035) calc(min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%)) * 0.167), rgba(0,0,0,0.104) calc(min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%)) * 0.250), rgba(0,0,0,0.210) calc(min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%)) * 0.333), rgba(0,0,0,0.347) calc(min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%)) * 0.417), rgba(0,0,0,0.500) calc(min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%)) * 0.500), rgba(0,0,0,0.653) calc(min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%)) * 0.583), rgba(0,0,0,0.790) calc(min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%)) * 0.667), rgba(0,0,0,0.896) calc(min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%)) * 0.750), rgba(0,0,0,0.965) calc(min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%)) * 0.833), rgba(0,0,0,0.995) calc(min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%)) * 0.917), #000 min(max(calc(var(--v3-wand) * 100% + 6%), 20%), calc((1 - var(--v3-rest)) * 100% - 2%))), linear-gradient(180deg, transparent 0, rgba(0,0,0,0.0035) calc(var(--v3-top) * 0.0417), rgba(0,0,0,0.0139) calc(var(--v3-top) * 0.0833), rgba(0,0,0,0.0313) calc(var(--v3-top) * 0.1250), rgba(0,0,0,0.0556) calc(var(--v3-top) * 0.1667), rgba(0,0,0,0.0868) calc(var(--v3-top) * 0.2083), rgba(0,0,0,0.1250) calc(var(--v3-top) * 0.2500), rgba(0,0,0,0.1701) calc(var(--v3-top) * 0.2917), rgba(0,0,0,0.2222) calc(var(--v3-top) * 0.3333), rgba(0,0,0,0.2813) calc(var(--v3-top) * 0.3750), rgba(0,0,0,0.3472) calc(var(--v3-top) * 0.4167), rgba(0,0,0,0.4201) calc(var(--v3-top) * 0.4583), rgba(0,0,0,0.5000) calc(var(--v3-top) * 0.5000), rgba(0,0,0,0.5799) calc(var(--v3-top) * 0.5417), rgba(0,0,0,0.6528) calc(var(--v3-top) * 0.5833), rgba(0,0,0,0.7188) calc(var(--v3-top) * 0.6250), rgba(0,0,0,0.7778) calc(var(--v3-top) * 0.6667), rgba(0,0,0,0.8299) calc(var(--v3-top) * 0.7083), rgba(0,0,0,0.8750) calc(var(--v3-top) * 0.7500), rgba(0,0,0,0.9132) calc(var(--v3-top) * 0.7917), rgba(0,0,0,0.9444) calc(var(--v3-top) * 0.8333), rgba(0,0,0,0.9688) calc(var(--v3-top) * 0.8750), rgba(0,0,0,0.9861) calc(var(--v3-top) * 0.9167), rgba(0,0,0,0.9965) calc(var(--v3-top) * 0.9583), #000 var(--v3-top)), linear-gradient(270deg, transparent 0, rgba(0,0,0,0.016) calc(min(14%, var(--v3-R)) * 0.125), rgba(0,0,0,0.104) calc(min(14%, var(--v3-R)) * 0.250), rgba(0,0,0,0.275) calc(min(14%, var(--v3-R)) * 0.375), rgba(0,0,0,0.500) calc(min(14%, var(--v3-R)) * 0.500), rgba(0,0,0,0.725) calc(min(14%, var(--v3-R)) * 0.625), rgba(0,0,0,0.896) calc(min(14%, var(--v3-R)) * 0.750), rgba(0,0,0,0.984) calc(min(14%, var(--v3-R)) * 0.875), #000 min(14%, var(--v3-R)));
    mask-composite: intersect;
  }
  .v3-beeld img { transform-origin: 100% 100%; animation: v3-drift 24s ease-in-out infinite alternate; }
  
  .hero.v3::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    
    background: linear-gradient(0deg, color-mix(in srgb, var(--v3-grond) 100.00%, transparent) calc(max(12%, 150px) * 0.0000), color-mix(in srgb, var(--v3-grond) 99.65%, transparent) calc(max(12%, 150px) * 0.0417), color-mix(in srgb, var(--v3-grond) 98.61%, transparent) calc(max(12%, 150px) * 0.0833), color-mix(in srgb, var(--v3-grond) 96.88%, transparent) calc(max(12%, 150px) * 0.1250), color-mix(in srgb, var(--v3-grond) 94.44%, transparent) calc(max(12%, 150px) * 0.1667), color-mix(in srgb, var(--v3-grond) 91.32%, transparent) calc(max(12%, 150px) * 0.2083), color-mix(in srgb, var(--v3-grond) 87.50%, transparent) calc(max(12%, 150px) * 0.2500), color-mix(in srgb, var(--v3-grond) 82.99%, transparent) calc(max(12%, 150px) * 0.2917), color-mix(in srgb, var(--v3-grond) 77.78%, transparent) calc(max(12%, 150px) * 0.3333), color-mix(in srgb, var(--v3-grond) 71.88%, transparent) calc(max(12%, 150px) * 0.3750), color-mix(in srgb, var(--v3-grond) 65.28%, transparent) calc(max(12%, 150px) * 0.4167), color-mix(in srgb, var(--v3-grond) 57.99%, transparent) calc(max(12%, 150px) * 0.4583), color-mix(in srgb, var(--v3-grond) 50.00%, transparent) calc(max(12%, 150px) * 0.5000), color-mix(in srgb, var(--v3-grond) 42.01%, transparent) calc(max(12%, 150px) * 0.5417), color-mix(in srgb, var(--v3-grond) 34.72%, transparent) calc(max(12%, 150px) * 0.5833), color-mix(in srgb, var(--v3-grond) 28.13%, transparent) calc(max(12%, 150px) * 0.6250), color-mix(in srgb, var(--v3-grond) 22.22%, transparent) calc(max(12%, 150px) * 0.6667), color-mix(in srgb, var(--v3-grond) 17.01%, transparent) calc(max(12%, 150px) * 0.7083), color-mix(in srgb, var(--v3-grond) 12.50%, transparent) calc(max(12%, 150px) * 0.7500), color-mix(in srgb, var(--v3-grond) 8.68%, transparent) calc(max(12%, 150px) * 0.7917), color-mix(in srgb, var(--v3-grond) 5.56%, transparent) calc(max(12%, 150px) * 0.8333), color-mix(in srgb, var(--v3-grond) 3.13%, transparent) calc(max(12%, 150px) * 0.8750), color-mix(in srgb, var(--v3-grond) 1.39%, transparent) calc(max(12%, 150px) * 0.9167), color-mix(in srgb, var(--v3-grond) 0.35%, transparent) calc(max(12%, 150px) * 0.9583), transparent calc(max(12%, 150px) * 1.0000)),
      
      linear-gradient(90deg, color-mix(in srgb, var(--v3-grond) 74.0%, transparent) 0,
        color-mix(in srgb, var(--v3-grond) 74.0%, transparent) calc((var(--v3-tr) + var(--v3-gat) + 6vw) * 0.620),
        color-mix(in srgb, var(--v3-grond) 72.8%, transparent) calc((var(--v3-tr) + var(--v3-gat) + 6vw) * 0.667),
        color-mix(in srgb, var(--v3-grond) 66.3%, transparent) calc((var(--v3-tr) + var(--v3-gat) + 6vw) * 0.715),
        color-mix(in srgb, var(--v3-grond) 53.6%, transparent) calc((var(--v3-tr) + var(--v3-gat) + 6vw) * 0.762),
        color-mix(in srgb, var(--v3-grond) 37.0%, transparent) calc((var(--v3-tr) + var(--v3-gat) + 6vw) * 0.810),
        color-mix(in srgb, var(--v3-grond) 20.4%, transparent) calc((var(--v3-tr) + var(--v3-gat) + 6vw) * 0.857),
        color-mix(in srgb, var(--v3-grond) 7.7%, transparent) calc((var(--v3-tr) + var(--v3-gat) + 6vw) * 0.905),
        color-mix(in srgb, var(--v3-grond) 1.2%, transparent) calc((var(--v3-tr) + var(--v3-gat) + 6vw) * 0.953),
        transparent calc((var(--v3-tr) + var(--v3-gat) + 6vw) * 1.000)); }
}

@media (orientation: landscape) and (min-width: 1600px) and (min-height: 820px) { .hero.v3 { --v3-s: 1.1; } }
@media (orientation: landscape) and (min-width: 1760px) and (min-height: 880px) { .hero.v3 { --v3-s: 1.2; } }
@media (orientation: landscape) and (min-width: 1900px) and (min-height: 940px) { .hero.v3 { --v3-s: 1.3; } }
@media (orientation: landscape) and (min-width: 2100px) and (min-height: 1000px) { .hero.v3 { --v3-s: 1.42; } }
@media (orientation: landscape) and (min-width: 2300px) and (min-height: 1080px) { .hero.v3 { --v3-s: 1.55; } }
@media (orientation: landscape) and (min-width: 2500px) and (min-height: 1160px) { .hero.v3 { --v3-s: 1.65; } }
@media (orientation: landscape) and (min-width: 3000px) and (min-height: 1300px) { .hero.v3 { --v3-s: 1.8; } }
@supports (width: calc(100vw / 1440px * 1px)) {
  @media (orientation: landscape) and (min-width: 1024px) {
    .hero.v3 { --v3-s: clamp(1, min(100vw / 1440px, (100svh - var(--v3-kop)) / 540px), 2); }
  }
}

@media (orientation: landscape) and (min-width: 1024px) and (max-height: 720px) {
  .hero.v3 { padding: calc(var(--v3-kop) + 14px) 0 24px; }
  .v3-onder { margin-top: 18px; }
}
@media (orientation: landscape) and (min-width: 1024px) and (max-height: 650px) {
  .v3-onder { display: none; }
}
@keyframes v3-drift { from { transform: scale(1); } to { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .v3-beeld img { animation: none; } }