/* SU achtergrond v2, versie 0.5 (13 november 2026). 0.5: op smalle schermen loopt de tekst onder de H1 niet meer buiten beeld (home, reviews, hire developers).
   Elke regel hangt aan body.su-bg-v2. Die klasse zet het pluginbestand alleen op pagina's waar de achtergrond actief is.
   Deel 1 en 3 gelden op elke actieve pagina. Deel 2 (nieuwe hero-opmaak) geldt alleen met body.su-bg-hero. */

/* 1. Vaste laag achter de hele pagina: fijn stippenraster, muisspoor, banden en ringen */
body.su-bg-v2 .su-bgx{position:fixed;inset:0;z-index:-1;pointer-events:none;background:#0e0e14;overflow:hidden}
body.su-bg-v2 .su-bgx canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
body.su-bg-v2 .su-bgx .su-d,body.su-bg-v2 .su-bgx .su-l{position:absolute;inset:0;background-size:26px 26px;background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse var(--su-hw,1px) var(--su-hh,1px) at var(--su-hx,50%) var(--su-hy,-999px),transparent 58%,#000 100%);
          mask-image:radial-gradient(ellipse var(--su-hw,1px) var(--su-hh,1px) at var(--su-hx,50%) var(--su-hy,-999px),transparent 58%,#000 100%)}
body.su-bg-v2 .su-bgx .su-d{background-image:radial-gradient(circle,rgba(248,249,250,.07) .9px,transparent 1.4px)}
body.su-bg-v2 .su-bgx .su-l{background-image:radial-gradient(circle,rgb(118,96,58) .9px,transparent 1.4px);mix-blend-mode:color-dodge}
/* Smalle schermen (telefoon): de stippen iets groter en duidelijker, anders vallen ze weg */
@media (max-width:759px){
  body.su-bg-v2 .su-bgx .su-d{background-image:radial-gradient(circle,rgba(248,249,250,.15) 1.05px,transparent 1.6px)}
  /* op een telefoon vult de hero-tekst bijna het hele scherm: de stippen daar niet helemaal weghalen, alleen dimmen */
  body.su-bg-v2 .su-bgx .su-d,body.su-bg-v2 .su-bgx .su-l{
    -webkit-mask-image:radial-gradient(ellipse var(--su-hw,1px) var(--su-hh,1px) at var(--su-hx,50%) var(--su-hy,-999px),rgba(0,0,0,.45) 58%,#000 100%);
            mask-image:radial-gradient(ellipse var(--su-hw,1px) var(--su-hh,1px) at var(--su-hx,50%) var(--su-hy,-999px),rgba(0,0,0,.45) 58%,#000 100%)}
}

/* Hero op elke actieve pagina: doorzichtig, oude cirkelafbeelding en losse achtergrondbeelden weg. De indeling van de hero blijft van het thema. */
body.su-bg-v2 section.hero{background:transparent!important}
body.su-bg-v2 section.hero::before,body.su-bg-v2 section.hero::after,body.su-bg-v2 section.hero .bannertxt::before{display:none!important}
body.su-bg-v2 section.hero .hero-img{display:none!important}
body.su-bg-v2 .su-hl{color:#efbd30}

/* 2. Nieuwe hero-opmaak (alleen met body.su-bg-hero): tekst gecentreerd in het midden, volgende sectie 90 px boven de vouw */
body.su-bg-v2.su-bg-hero section.hero{position:relative;isolation:isolate;overflow:visible!important;box-sizing:border-box!important;
  min-height:calc(100vh - 90px)!important;min-height:calc(100svh - 90px)!important;height:auto!important;max-height:none!important;
  padding:120px 0 40px!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
body.su-bg-v2.su-bg-hero section.hero .bannertxt{opacity:1!important}
body.su-bg-v2.su-bg-hero section.hero .bannertxt h1{text-align:center!important;margin-left:auto!important;margin-right:auto!important;max-width:min(1000px,100%)!important;text-wrap:balance}
body.su-bg-v2.su-bg-hero section.hero .herotxt{text-align:center!important;margin-left:auto!important;margin-right:auto!important;max-width:min(680px,100%)!important} /* 100%: het thema geeft dit blok op telefoons een vaste breedte van 551 of 684 px */
body.su-bg-v2.su-bg-hero section.hero .herotxt p{text-align:center!important}
body.su-bg-v2.su-bg-hero section.hero .trusted-partners{position:static!important;width:auto!important;margin-top:48px!important;transform:none!important}
body.su-bg-v2.su-bg-hero section.hero .partners-row{display:block!important}
body.su-bg-v2.su-bg-hero section.hero .scroll-options{display:none!important}
body.su-bg-v2.su-bg-hero section.hero .clients{margin:0 auto!important}
/* Home: de cases-sectie begint direct onder de hero met een harde rand, in haar eigen donkere vlak */
body.su-bg-v2.su-bg-hero.page-template-home_page section.portfolio{margin-top:0!important;padding-top:36px!important}

/* 3. Losse achtergrondbeelden weg waar de vaste laag zichtbaar is */
body.su-bg-v2 section.partners{background-image:none!important}
body.su-bg-v2 section.partners::before,body.su-bg-v2 section.partners::after,body.su-bg-v2 .partner_circle_img{display:none!important}
body.su-bg-v2 section.testimonials::before,body.su-bg-v2 section.testimonials::after,
body.su-bg-v2 section.common-questions::before,body.su-bg-v2 section.common-questions::after{display:none!important}
/* het script zet deze klassen op doorzichtige secties waar het nog een achtergrondbeeld vindt */
body.su-bg-v2 .su-nb::before,body.su-bg-v2 .su-na::after{display:none!important}
body.su-bg-v2 .su-nbg{background-image:none!important}

/* Footer: animatie uit, vaste laag zichtbaar; indeling en teksten blijven */
body.su-bg-v2 footer#su-foot{background:transparent!important}
body.su-bg-v2 canvas.su-sky{display:none!important}