/* Homepage blocks (hero card, showcase, FAQ). Scoped with .wph-; loaded on the front page only. */
.wph-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wph-card{max-width:560px;margin:26px 0 12px;padding:14px;border:1px solid rgba(143,215,255,.28);border-radius:22px;background:rgba(7,26,56,.62);backdrop-filter:blur(8px)}
.wph-tabs{display:flex;gap:8px;margin-bottom:14px}
.wph-tab{flex:1 1 0;padding:12px 14px;border:1px solid rgba(143,215,255,.3);border-radius:14px;background:rgba(255,255,255,.05);color:#E5EDFA;font:inherit;font-weight:800;font-size:0.9375rem;cursor:pointer}
.wph-tab.is-active{background:var(--blue);border-color:var(--blue);color:#061a36}
.wph-tab--alert.is-active{background:linear-gradient(135deg,#ff6b00,#ff3344);border-color:transparent;color:#fff}
.wph-tab:focus-visible,.wph-projects button:focus-visible,.wph-sizes button:focus-visible,.wph-faq__item summary:focus-visible{outline:3px solid #ffb944;outline-offset:2px}
.wph-panel[hidden]{display:none}
.wph-card .wph-panel__lead,.wph-card .wph-panel__note{margin:0 0 4px;font-size:.95rem;color:#E5EDFA}
.wph-card .wph-panel__note{margin-top:10px;font-size:0.9375rem;color:#C9D6E8}
.wph-card .wpstart-actions{margin:14px 0 4px}
.wph-scan{display:flex;gap:10px;flex-wrap:wrap}
.wph-scan input{flex:1 1 220px;min-width:0;padding:14px 16px;border-radius:999px;border:1px solid #6a91c2;background:#fff;color:#12223d;font:inherit}
.wph-scan .wpstart-button{margin:0;flex:1 1 220px}
.wph-ai{margin:6px 0 18px}.wph-ai a{color:#9bd9ff;font-weight:700;text-decoration:none}.wph-ai a:hover{text-decoration:underline}
/* showcase */
.wph-showcase{background:#eaf4ff}
.wph-projects,.wph-sizes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 14px}
.wph-projects button,.wph-sizes button{padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--navy2);font:inherit;font-weight:700;font-size:0.9375rem;cursor:pointer}
.wph-projects button[aria-pressed=true],.wph-sizes button[aria-pressed=true]{background:var(--navy2);border-color:var(--navy2);color:#fff}
.wph-stage{display:grid;place-items:center;margin:22px auto 0;padding:34px 16px;border-radius:var(--radius);background:linear-gradient(135deg,#071a38,#0a2a59 60%,#171e54);overflow:hidden}
.wph-screen{width:100%;max-width:880px;border:10px solid #c9d8ea;border-bottom-width:16px;border-radius:16px;background:#10274b;overflow:hidden;box-shadow:0 30px 55px rgba(0,0,0,.4);transition:max-width .35s ease,border-radius .35s ease}
.wph-screen img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.wph-stage[data-size=tablet] .wph-screen{max-width:560px;border-radius:26px}
.wph-stage[data-size=tablet] .wph-screen img{aspect-ratio:4/3}
.wph-stage[data-size=mobile] .wph-screen{max-width:260px;border-radius:34px;border-width:9px}
.wph-stage[data-size=mobile] .wph-screen img{aspect-ratio:9/19}
.wph-caption{margin:14px 0 0;text-align:center;color:var(--muted);font-size:0.9375rem}
/* faq (last block before the footer) */
.wph-faq{background:#f7fbff}
@media(max-width:600px){.wph-card{padding:12px}.wph-tab{font-size:0.9375rem;padding:11px 8px}.wph-stage{padding:22px 10px}.wph-screen{border-width:7px 7px 12px}}
@media(prefers-reduced-motion:reduce){.wph-screen{transition:none}}

/* === Kleurlaag homepage: sectie-afwisseling, kaartcontrast, logokleuren. Alleen kleur en direct verwante eigenschappen. === */
/* 1. secties: hero/usp 1, portfolio 0 (donkerste podium), responsief 2, diensten 1, configurator 2, faq 1 */
body.home .wpo{background-color:var(--ws-bg-1)}
body.home .wpo.wpo-usp{background:var(--ws-bg-1)}
body.home .wpo .orbit-showcase-section{background-color:var(--ws-bg-0)}
body.home .wpo .device-showcase-section{background-color:var(--ws-bg-2)}
body.home .wpo.wpo-diensten{background-color:var(--ws-bg-1)}
body.home .wcfg{--bg:var(--ws-bg-2);--card:var(--ws-card);--card2:var(--ws-card-hi);--line:var(--ws-brand-line);--blue:var(--ws-logo-blue);--cyan:var(--ws-logo-cyan);--gold:var(--ws-logo-cyan)}
body.home .wlf{--bg:var(--ws-bg-1);--card:var(--ws-card);--line:var(--ws-brand-line);--blue:var(--ws-logo-blue);--cyan:var(--ws-logo-cyan);--gold:var(--ws-logo-cyan)}

/* 2. kaarten en panelen */
body.home .wpo .quick-action-card{background:var(--ws-card);border-color:var(--ws-brand-line);box-shadow:var(--ws-shadow-card),0 20px 45px rgba(0,0,0,.35)}
body.home .wpo .usp-card{background:var(--ws-card-soft);border-color:var(--ws-brand-line)}
body.home .wpo .usp-card:hover{background:var(--ws-card);border-color:var(--ws-line-hi);box-shadow:none}
body.home .wpo .wpo-dn{background:linear-gradient(180deg,var(--ws-card-hi),var(--ws-card));border-color:var(--ws-brand-line);box-shadow:var(--ws-shadow-card)}
body.home .wpo .wpo-dn--blue:hover{border-color:rgba(8,120,248,.75)}
body.home .wpo .wpo-dn--gold:hover{border-color:rgba(8,208,248,.7);box-shadow:0 18px 44px rgba(8,208,248,.12)}
body.home .wpo .wpo-dn--blue .wpo-dn__icon{background:rgba(8,120,248,.18);border-color:rgba(8,120,248,.55)}
body.home .wpo .wpo-dn--gold .wpo-dn__icon{background:rgba(8,208,248,.1);border-color:rgba(8,208,248,.45)}
body.home .wpo .wpo-dn--blue .wpo-dn__cta{color:var(--ws-link)}
body.home .wpo .wpo-dn--gold .wpo-dn__cta{color:var(--ws-logo-cyan)}
body.home .wpo .viewport-switch-bar,body.home .wpo .carousel-nav-btn{background:var(--ws-card);border-color:var(--ws-brand-line)}
body.home .wpo .slide-glass-card{background:var(--ws-card);border-color:var(--ws-brand-line)}
body.home .wcfg-pack,body.home .wcfg-sum{box-shadow:var(--ws-shadow-card)}
body.home .wcfg-sum{background:linear-gradient(180deg,var(--ws-card-hi),var(--ws-card));border-color:var(--ws-line-hi)}
body.home .wcfg-cat,body.home .wcfg-scope,body.home .wcfg-step,body.home .wcfg-deal__chips li{background:var(--ws-card-soft)}
body.home .wcfg-bar{background:rgba(7,18,43,.97)}
body.home .wlf-item{background:linear-gradient(180deg,var(--ws-card-hi),var(--ws-card));box-shadow:var(--ws-shadow-card)}
body.home .wlf-search input,body.home .wlf-cats a{background:var(--ws-card-soft)}

/* 3. logokleuren: primaire CTA's, kopaccenten, kickers */
body.home .wpo .btn-scroll-wizard,body.home .wpo .btn-primary,body.home .wcfg-btn--primary,body.home .wcfg-btn--cta{background:var(--ws-cta);color:#fff;border:0;box-shadow:0 8px 24px rgba(0,68,212,.35)}
body.home .wpo .btn-viewport.active{background:var(--ws-cta);box-shadow:0 4px 14px rgba(0,68,212,.35)}
body.home .wpo .hero-title .highlight-blue,body.home .wpo .wpo-diensten__head h2 span{background:linear-gradient(135deg,var(--ws-logo-cyan),var(--ws-logo-blue));-webkit-background-clip:text;background-clip:text}
body.home .wcfg-head h2 span,body.home .wlf-head h2 span{background:linear-gradient(90deg,var(--ws-logo-cyan),var(--ws-logo-blue));-webkit-background-clip:text;background-clip:text}
body.home .wcfg-pill,body.home .wlf-kicker{border-color:rgba(8,208,248,.4);background:rgba(8,208,248,.07)}
body.home .wcfg-def{background:rgba(8,208,248,.07)}
body.home .wcfg-sum__month{border-color:rgba(8,208,248,.4);background:rgba(8,208,248,.07)}
body.home .wlf-item.is-open{border-color:var(--ws-line-hi);background:linear-gradient(135deg,rgba(8,120,248,.26),var(--ws-card))}
body.home .wlf-item.is-open .wlf-ico{background:rgba(8,208,248,.16);border-color:rgba(8,208,248,.55)}

/* 4. actieve navigatie en focusstates in logokleuren */
body.home a:focus-visible,body.home button:focus-visible,body.home summary:focus-visible,body.home .wpo a:focus-visible,body.home .wpo button:focus-visible,body.home .wph-tk a:focus-visible,body.home .wpo .orbit-stage-viewport:focus-visible{outline:3px solid var(--ws-logo-cyan);outline-offset:3px}

/* === Hero: typografie, keuzeblok, CTA-hierarchie, visual. Kleuren via --ws-* tokens. === */
body.home .wpo .hero-section{padding:clamp(40px,5vw,64px) var(--wp-gutter,24px) clamp(56px,6vw,88px)}
body.home .wpo .hero-section .hero-container{max-width:var(--wp-container,1360px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,3.4vw,56px);align-items:center}
body.home .wpo .hero-section .hero-content{gap:0}
body.home .wpo .hero-section .hero-badge-pill{margin:0 0 20px;font-size:.9375rem}
body.home .wpo .hero-section .hero-title{margin:0 0 20px;font-size:clamp(2.25rem,1.35rem + 2.9vw,3.75rem);line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
body.home .wpo .hero-section .hero-title .highlight-blue{-webkit-box-decoration-break:clone;box-decoration-break:clone}
body.home .wpo .hero-section .hero-subtitle{margin:0 0 28px;max-width:36rem;font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);line-height:1.65;color:#d5e1f3}

/* keuzeblok: tabs en panelen delen een cel, zodat wisselen de hoogte niet verspringt */
body.home .wpo .hero-section .quick-action-card{display:grid;grid-template-columns:minmax(0,1fr);padding:clamp(18px,2.2vw,26px);backdrop-filter:none}
body.home .wpo .hero-section .action-tabs{padding:5px;gap:6px;margin-bottom:20px;border-radius:14px;border-color:var(--ws-brand-line);background:rgba(4,8,20,.7)}
body.home .wpo .hero-section .action-tab{min-height:52px;padding:0 14px;border:1.5px solid transparent;border-radius:10px;background:transparent;box-shadow:none;color:#c9d6e8;font-size:1rem;line-height:1.25;text-align:center}
body.home .wpo .hero-section .action-tab:hover{background:rgba(255,255,255,.06);color:#fff}
body.home .wpo .hero-section .action-tab.active::before{content:"";flex:none;width:8px;height:8px;margin-right:8px;border-radius:50%;background:currentColor}
body.home .wpo .hero-section .action-tab.active{background:var(--ws-cta);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(0,68,212,.35)}
body.home .wpo .hero-section .action-tab.alert{background:rgba(255,51,68,.08);border-color:rgba(255,51,68,.45);color:#ff8a96;box-shadow:none}
body.home .wpo .hero-section .action-tab.alert:hover{background:rgba(255,51,68,.16);color:#ffb3bb}
body.home .wpo .hero-section .action-tab.alert.active{background:#c4162a;border-color:#ff5566;color:#fff;box-shadow:0 4px 14px rgba(196,22,42,.4)}
body.home .wpo .hero-section .action-panel,body.home .wpo .hero-section .action-panel[hidden]{display:block;grid-area:2/1;visibility:hidden}
body.home .wpo .hero-section .action-panel.active{visibility:visible}
body.home .wpo .hero-section .website-cta-box{flex-wrap:wrap;gap:14px 20px;margin-bottom:18px;padding:16px 18px;border-color:var(--ws-brand-line);border-radius:14px;background:rgba(4,10,26,.55)}
body.home .wpo .hero-section .website-cta-box>div{flex:1 1 220px}
body.home .wpo .hero-section .website-cta-text{font-size:1.0625rem;line-height:1.35}
body.home .wpo .hero-section .website-cta-sub{margin-top:4px;font-size:1rem;line-height:1.45;color:#c9d6e8}
body.home .wpo .hero-section .btn-scroll-wizard{flex:0 0 auto;justify-content:center;min-height:52px;padding:0 26px;border-radius:12px;font-size:1rem;white-space:nowrap}
body.home .wpo .hero-section .btn-scroll-wizard:hover{transform:none;box-shadow:0 0 0 2px var(--ws-logo-cyan),0 8px 22px rgba(0,68,212,.35)}
body.home .wpo .hero-section .btn-scroll-wizard:active,body.home .wpo .hero-section .btn-hack:active{transform:translateY(1px)}
body.home .wpo .hero-section .funnel-input-group{flex-wrap:wrap;gap:12px;margin-bottom:18px}
body.home .wpo .hero-section .funnel-input{flex:1 1 220px;min-width:0;min-height:52px;padding:0 16px;border-color:var(--ws-brand-line);border-radius:12px;background:rgba(4,10,26,.9);font-size:1rem}
body.home .wpo .hero-section .funnel-input:focus{border-color:var(--ws-logo-cyan);box-shadow:0 0 0 3px rgba(8,208,248,.2)}
body.home .wpo .hero-section .btn-hack{flex:1 1 auto;min-height:52px;padding:0 24px;border:0;border-radius:12px;background:#c4162a;box-shadow:none;color:#fff;font-size:1rem;font-weight:700;cursor:pointer}
body.home .wpo .hero-section .btn-hack:hover{background:#d71f35;transform:none;box-shadow:none}
body.home .wpo .hero-section .btn-hack::after{display:none}
body.home .wpo .hero-section .features-row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;font-size:1rem;color:#d5e1f3}
body.home .wpo .hero-section .feature-item{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;line-height:1.45}
body.home .wpo .hero-section .check-icon{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(8,208,248,.16);color:var(--ws-logo-cyan);font-size:.8125rem;line-height:1}

/* CTA-hierarchie: primair = blauwe knop in het keuzeblok, secundair = spoedhulp (rood omlijnd), ondersteunend = tekstlink */
body.home .wpo .hero-section .wpo-ctas{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:none;margin:22px 0 0}
body.home .wpo .hero-section .wpo-cta--hack{width:100%;min-height:60px;padding:14px 20px;border:1.5px solid rgba(255,51,68,.6);border-radius:14px;background:rgba(255,51,68,.1);box-shadow:none;animation:none;color:#fff}
body.home .wpo .hero-section .wpo-cta--hack b{font-size:1.0625rem}
body.home .wpo .hero-section .wpo-cta--hack small{font-size:1rem;opacity:1;color:#e5edfa}
body.home .wpo .hero-section .wpo-cta--hack:hover{background:rgba(255,51,68,.2);border-color:#ff5566;transform:none}
body.home .wpo .hero-section .wpo-cta--ai{display:inline-flex;flex-direction:row;align-items:center;gap:8px;min-height:44px;padding:0 2px;border:0;background:none;color:var(--ws-logo-cyan);font-size:1rem;font-weight:700;text-decoration:underline;text-underline-offset:4px}
body.home .wpo .hero-section .wpo-cta--ai:hover{color:#fff;transform:none}

/* visual: vult de kolom, scherp via srcset (960w/1920w) */
body.home .wpo .hero-section .hero-visual{align-self:center;min-width:0}
body.home .wpo .hero-section .tilt-wrapper{max-width:760px}
body.home .wpo .hero-section .mockup-laptop{padding:8px 8px 0}
body.home .wpo .hero-section .mockup-screen{min-height:0;padding:0}
body.home .wpo .hero-section .control-pill{min-height:44px;padding:0 20px;font-size:1rem;color:#d5e1f3}
body.home .wpo .hero-section .control-pill:hover,body.home .wpo .hero-section .control-pill.active{border-color:var(--ws-logo-cyan);background:rgba(8,120,248,.28);color:#fff}
body.home .wpo .hero-section :is(a,button,input):focus-visible{outline:3px solid var(--ws-logo-cyan);outline-offset:3px}

@media(max-width:900px){
  body.home .wpo .hero-section .hero-container{grid-template-columns:minmax(0,1fr);gap:40px}
  body.home .wpo .hero-section .hero-subtitle{max-width:40rem}
  body.home .wpo .hero-section .tilt-wrapper{margin:0 auto}
}
@media(max-width:640px){
  body.home .wpo .hero-section .website-cta-box{flex-direction:column;align-items:stretch}
  body.home .wpo .hero-section .website-cta-box>div{flex:0 0 auto}
  body.home .wpo .hero-section .btn-scroll-wizard{width:100%}
  body.home .wpo .hero-section .funnel-input,body.home .wpo .hero-section .btn-hack{flex:0 0 auto;width:100%}
}
@media(prefers-reduced-motion:reduce){body.home .wpo .hero-section .action-panel.active,body.home .wpo .hero-section .screen-mode.active{animation:none}}

/* === Homepage-secties: voordelenbalk en dienstenkaarten (opdracht 4) === */
/* voordelenbalk: 5 kaarten verdeeld over 6 kolommen (3+2) zonder verweesde rij; teksticonen in logo-cyaan */
body.home .wpo .wpo-usp__grid{max-width:var(--wp-container,1360px);grid-template-columns:repeat(5,minmax(0,1fr))}
body.home .wpo .wpo-usp__grid .usp-card{padding:16px 18px}
body.home .wpo .wpo-usp__grid .usp-icon{font-variant-emoji:text;color:var(--ws-logo-cyan);background:rgba(8,208,248,.1);border-color:rgba(8,208,248,.3)}
body.home .wpo .wpo-usp__grid .usp-title{font-size:1rem;line-height:1.3}
body.home .wpo .wpo-usp__grid .usp-sub{font-size:.9375rem;line-height:1.4;color:#d5e1f3}
@media(max-width:1180px){
  body.home .wpo .wpo-usp__grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  body.home .wpo .wpo-usp__grid .usp-card{grid-column:span 2}
  body.home .wpo .wpo-usp__grid .usp-card:nth-child(n+4){grid-column:span 3}
}
@media(max-width:820px){
  body.home .wpo .wpo-usp__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.home .wpo .wpo-usp__grid .usp-card,body.home .wpo .wpo-usp__grid .usp-card:nth-child(n+4){grid-column:auto}
  body.home .wpo .wpo-usp__grid .usp-card:last-child{grid-column:1/-1}
}
@media(max-width:520px){body.home .wpo .wpo-usp__grid{grid-template-columns:minmax(0,1fr)}}

/* dienstenkaarten: gelijke rijen via subgrid, primaire kaart licht benadrukt */
body.home .wpo .wpo-diensten__head{max-width:46rem}
body.home .wpo .wpo-diensten__head p{font-size:1.0625rem;line-height:1.6;color:#d5e1f3}
body.home .wpo .wpo-diensten__grid{gap:20px}
body.home .wpo .wpo-dn{padding:32px 28px 28px;gap:14px;border-radius:20px}
body.home .wpo .wpo-dn h3{font-size:1.5rem;line-height:1.2}
body.home .wpo .wpo-dn p{font-size:1rem;line-height:1.6;color:#e5edfa}
body.home .wpo .wpo-dn .wpo-dn__price{padding:12px 14px;border:1px solid var(--ws-brand-line);border-radius:12px;background:rgba(4,10,26,.45);font-size:1rem;line-height:1.5}
body.home .wpo .wpo-dn .wpo-dn__fine{padding-top:12px;font-size:.9375rem;line-height:1.55;color:#c9d6e8!important;border-top-color:var(--ws-brand-line)}
body.home .wpo .wpo-dn--blue{border-color:rgba(8,120,248,.6)}
body.home .wpo .wpo-dn--blue::before{content:"";position:absolute;left:28px;right:28px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--ws-logo-blue),var(--ws-logo-cyan))}
body.home .wpo .wpo-dn__actions{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:auto}
body.home .wpo .wpo-dn__cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin:0;padding:0 22px;border:1.5px solid transparent;border-radius:12px;font-size:1rem;font-weight:700;text-align:center;text-decoration:none;transition:background .2s,border-color .2s,box-shadow .2s}
body.home .wpo .wpo-dn__cta:hover{text-decoration:none}
body.home .wpo .wpo-dn--blue .wpo-dn__cta{background:var(--ws-cta);color:#fff}
body.home .wpo .wpo-dn--blue .wpo-dn__cta:hover{box-shadow:0 0 0 2px var(--ws-logo-cyan)}
body.home .wpo .wpo-dn--red .wpo-dn__cta{background:rgba(255,51,68,.1);border-color:rgba(255,51,68,.6);color:#ff8a96}
body.home .wpo .wpo-dn--red .wpo-dn__cta:hover{background:rgba(255,51,68,.2);border-color:#ff5566}
body.home .wpo .wpo-dn--gold .wpo-dn__cta{background:rgba(8,208,248,.08);border-color:rgba(8,208,248,.5);color:var(--ws-logo-cyan)}
body.home .wpo .wpo-dn--gold .wpo-dn__cta:hover{background:rgba(8,208,248,.16);border-color:var(--ws-logo-cyan)}
body.home .wpo .wpo-dn__more{display:block;padding:10px 0;text-align:center;color:var(--ws-link);font-size:1rem;font-weight:600;text-decoration:underline;text-underline-offset:4px}
body.home .wpo .wpo-dn__more:hover{color:#fff}
body.home .wpo .wpo-dn :is(a):focus-visible{outline:3px solid var(--ws-logo-cyan);outline-offset:3px}
@media(min-width:901px){
  body.home .wpo .wpo-diensten__grid{column-gap:24px;row-gap:0;grid-template-rows:auto}
  body.home .wpo .wpo-dn{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:14px;align-content:start}
  body.home .wpo .wpo-dn__icon{justify-self:start}
  body.home .wpo .wpo-dn__actions{margin-top:0;align-self:start}
}
@media(prefers-reduced-motion:reduce){body.home .wpo .wpo-dn{transition:none}body.home .wpo .wpo-dn:hover{transform:none}}
body.home .wpo .wpo-diensten__head h2,body.home .wlf-head h2{text-wrap:balance}
@media(min-width:901px) and (max-width:1180px){body.home .wpo .hero-section .hero-title{font-size:2.75rem}}