/* Originele interactieve device-showcase (uit aangeleverde codeblok), gescopet onder .wpo. */
.wpo{
    --bg-dark-base: #040814;
    --card-surface: #0b132b;
    --accent-blue-wps: #0066ff;
    --accent-cyan-wps: #00d2ff;
    --accent-orange-wps: #ff7a00;
    --text-white: #ffffff;
    --text-dimmed: #8ca0ba;
    --border-light: rgba(255, 255, 255, 0.08);
    --border-glow-wps: rgba(0, 102, 255, 0.35);
  }
.wpo .device-showcase-section{
    position: relative;
    background-color: var(--bg-dark-base);
    padding: var(--sec-y,64px) var(--wp-gutter,24px);
    color: var(--text-white);
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    overflow: hidden;
  }
.wpo .showcase-ambient-glow{
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 600px;
    background:radial-gradient(circle, rgba(0,102,255,0.075), rgba(0,210,255,0.03), transparent 70%);
    filter:blur(120px);
    pointer-events: none;
    z-index: 0;
  }
.wpo .showcase-container{
    max-width: 1320px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
.wpo .showcase-header{
    text-align: center;
    max-width: 780px;
    margin: 0 auto 45px;
  }
.wpo .showcase-badge-pill{
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background:rgba(0, 102, 255, 0.12);
    border: 1px solid rgba(0, 210, 255, 0.35);
    color: var(--accent-cyan-wps);
    font-size:0.9375rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    margin-bottom: 16px;
    font-family: 'JetBrains Mono', monospace;
  }
.wpo .showcase-title{
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.8px;
    margin-bottom: 16px;
  }
.wpo .cyan-gradient{
    background:linear-gradient(135deg, #ffffff 20%, var(--accent-cyan-wps));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
.wpo .showcase-subtitle{
    font-size: 1.05rem;
    color: var(--text-dimmed);
    line-height: 1.6;
    margin-bottom: 30px;
  }
.wpo .viewport-switch-bar{
    display: inline-flex;
    background:var(--card-surface);
    border: 1px solid var(--border-glow-wps);
    border-radius: 999px;
    padding: 5px;
    gap: 6px;
    box-shadow:0 10px 30px rgba(0, 0, 0, 0.5);
  }
.wpo .btn-viewport{
    background:transparent;
    border: none;
    color: var(--text-dimmed);
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size:0.9375rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
  }
.wpo .btn-viewport:hover{
    color: #fff;
  }
.wpo .btn-viewport.active{
    background:linear-gradient(135deg, var(--accent-blue-wps), #004ecc);
    color: #fff;
    box-shadow:0 4px 14px rgba(0,102,255,0.2);
  }
.wpo .carousel-3d-stage{
    position: relative;
    padding: 30px 0 20px;
    perspective: 1200px;
  }
.wpo .carousel-track{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 520px;
    position: relative;
  }
.wpo .project-slide{
    position: absolute;
    width: 680px;
    max-width: 90vw;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    user-select: none;
  }
.wpo .project-slide.pos-center{
    transform: translateX(0) translateZ(0) scale(1);
    opacity: 1;
    z-index: 10;
  }
.wpo .project-slide.pos-left{
    transform: translateX(-380px) translateZ(-160px) rotateY(18deg) scale(0.85);
    opacity: 0.45;
    z-index: 5;
    cursor: pointer;
    filter:blur(1px);
  }
.wpo .project-slide.pos-right{
    transform: translateX(380px) translateZ(-160px) rotateY(-18deg) scale(0.85);
    opacity: 0.45;
    z-index: 5;
    cursor: pointer;
    filter:blur(1px);
  }
.wpo .project-slide.pos-left:hover, .wpo .project-slide.pos-right:hover{
    opacity: 0.75;
    filter:blur(0px);
  }
.wpo .slide-glass-card{
    background:#080f24;
    border: 1px solid var(--border-light);
    border-radius: 18px;
    overflow: hidden;
    box-shadow:0 25px 60px rgba(0, 0, 0, 0.8);
    position: relative;
    transition: max-width 0.4s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    margin: 0 auto;
  }
.wpo .slide-glass-card.active-card{
    border-color: rgba(0, 210, 255, 0.45);
    box-shadow:0 25px 70px rgba(0, 0, 0, 0.85), 0 0 35px rgba(0,102,255,0.125);
  }
.wpo .slide-browser-bar{
    background:rgba(4, 9, 22, 0.95);
    border-bottom: 1px solid var(--border-light);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
.wpo .s-dot{ width: 9px; height: 9px; border-radius: 50%; }
.wpo .s-dot.r{ background:#ff5f56; }
.wpo .s-dot.y{ background:#ffbd2e; }
.wpo .s-dot.g{ background:#27c93f; }
.wpo .s-url{
    font-family: 'JetBrains Mono', monospace;
    font-size:0.9375rem;
    color: var(--accent-cyan-wps);
    background:rgba(255, 255, 255, 0.05);
    padding: 3px 14px;
    border-radius: 6px;
    margin-left: 8px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
.wpo .s-res-tag{
    font-family: 'JetBrains Mono', monospace;
    font-size:0.9375rem;
    color: var(--text-dimmed);
    background:rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 4px;
  }
.wpo .slide-viewport-content{
    background:#060b19;
    min-height: 360px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease;
  }
.wpo .slide-meta{
    padding: 14px 20px;
    background:rgba(4, 9, 22, 0.95);
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
.wpo .slide-meta strong{
    display: block;
    font-size: 0.95rem;
    color: #fff;
  }
.wpo .slide-meta span{
    font-size:0.9375rem;
    color: var(--text-dimmed);
  }
.wpo .carousel-nav-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background:var(--card-surface);
    border: 1px solid var(--border-glow-wps);
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 25;
    transition: all 0.25s ease;
    box-shadow:0 10px 25px rgba(0, 0, 0, 0.6);
  }
.wpo .carousel-nav-btn.prev{ left: 40px; }
.wpo .carousel-nav-btn.next{ right: 40px; }
.wpo .carousel-nav-btn:hover{
    background:var(--accent-blue-wps);
    box-shadow:0 0 20px rgba(0,102,255,0.25);
    transform: translateY(-50%) scale(1.1);
  }
.wpo .carousel-dots-row{
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
  }
.wpo .c-dot{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background:rgba(255, 255, 255, 0.15);
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
  }
.wpo .c-dot.active{
    background:var(--accent-cyan-wps);
    box-shadow:0 0 10px var(--accent-cyan-wps);
    width: 26px;
    border-radius: 999px;
  }
.wpo .slide-glass-card.view-mode-tablet{
    max-width: 480px;
  }
.wpo .slide-glass-card.view-mode-mobile{
    max-width: 320px;
  }
@media (max-width: 1024px){.wpo .project-slide.pos-left, .wpo .project-slide.pos-right{ display: none; }.wpo .carousel-nav-btn.prev{ left: 10px; }.wpo .carousel-nav-btn.next{ right: 10px; }}.wpo .project-slide.pos-hidden{transform:translateX(0) translateZ(-300px) scale(.7);opacity:0;pointer-events:none;z-index:1}
.wpo .slide-viewport-content img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.wpo .slide-glass-card.view-mode-tablet .slide-viewport-content img{aspect-ratio:4/3}
.wpo .slide-glass-card.view-mode-mobile .slide-viewport-content img{aspect-ratio:9/19}
.wpo .carousel-dots-row button.c-dot{padding:0;border:0;cursor:pointer}
.wpo .viewport-switch-bar button:focus-visible,.wpo .carousel-nav-btn:focus-visible,.wpo .c-dot:focus-visible,.wpo .project-slide:focus-visible{outline:3px solid #ffb944;outline-offset:3px}
.wpo .showcase-caption{margin:10px 0 0;text-align:center;color:#C9D6E8;font-size:0.9375rem}
@media(max-width:640px){.wpo .project-slide{width:86vw}.wpo .project-slide.pos-left{transform:translateX(-62vw) translateZ(-160px) rotateY(18deg) scale(.8)}.wpo .project-slide.pos-right{transform:translateX(62vw) translateZ(-160px) rotateY(-18deg) scale(.8)}.wpo .carousel-track{min-height:430px}}
@media(prefers-reduced-motion:reduce){.wpo .project-slide,.wpo .slide-glass-card{transition:none}}
/* Echte apparaatframes (desktop / tablet / mobiel) met één neutrale demo-website */
.wpo .dm-stage{display:flex;justify-content:center;align-items:flex-start;overflow:hidden;padding:26px 0 8px;transition:height .35s}
.wpo .dm-scale{transform-origin:top center;width:max-content}
.wpo .dm-device{--sw:880px;--sh:500px;--bp:14px;--br:18px;position:relative;display:flex;flex-direction:column;align-items:center}
.wpo .dm-device[data-view=tablet]{--sw:540px;--sh:720px;--bp:16px;--br:30px}
.wpo .dm-device[data-view=mobile]{--sw:300px;--sh:620px;--bp:12px;--br:42px}
.wpo .dm-bezel{position:relative;padding:var(--bp);border-radius:var(--br);background:linear-gradient(145deg,#2a3350,#0d1226 55%,#1b2342);box-shadow:0 0 0 1px rgba(255,255,255,.16),inset 0 0 0 2px rgba(0,0,0,.6),0 30px 70px rgba(0,0,0,.65),0 0 60px rgba(0,102,255,.2);transition:padding .5s cubic-bezier(.2,.8,.2,1),border-radius .5s cubic-bezier(.2,.8,.2,1)}
.wpo .dm-device[data-view=desktop] .dm-bezel{padding-bottom:22px}
.wpo .dm-cam{position:absolute;left:50%;top:6px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#050810;box-shadow:0 0 0 1px rgba(255,255,255,.12);transition:all .5s}
.wpo .dm-device[data-view=mobile] .dm-cam{top:13px;width:62px;height:16px;margin-left:-31px;border-radius:10px;background:#02040a;z-index:3}
.wpo .dm-device[data-view=tablet] .dm-cam{top:7px}
.wpo .dm-screen{position:relative;width:var(--sw);height:var(--sh);overflow:hidden;border-radius:calc(var(--br) - var(--bp) + 2px);background:#faf8f4;container-type:inline-size;transition:width .5s cubic-bezier(.2,.8,.2,1),height .5s cubic-bezier(.2,.8,.2,1),border-radius .5s}
.wpo .dm-stand{display:flex;flex-direction:column;align-items:center;margin-top:-1px;transition:opacity .35s,height .5s,margin .5s;height:78px;overflow:hidden}
.wpo .dm-neck{display:block;width:120px;height:56px;background:linear-gradient(90deg,#1b2342,#3a4568 50%,#1b2342)}
.wpo .dm-base{display:block;width:260px;height:14px;border-radius:0 0 14px 14px;background:linear-gradient(180deg,#46517a,#1b2342);box-shadow:0 14px 26px rgba(0,0,0,.5)}
.wpo .dm-device:not([data-view=desktop]) .dm-stand{opacity:0;height:0}
.wpo .dm-site{font-family:Georgia,'Times New Roman',serif;color:#2b2f36;background:#faf8f4;animation:dmScroll 18s ease-in-out infinite alternate}
.wpo .dm-site *{margin:0;box-sizing:border-box}
.wpo .dm-head{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;background:#fff;border-bottom:1px solid #ece6da;font-family:system-ui,sans-serif}
.wpo .dm-device[data-view=mobile] .dm-head{padding-top:34px}
.wpo .dm-logo{font-weight:800;font-size:1.15rem;color:#2f4a3a}.wpo .dm-logo span{font-weight:500;color:#8a7a5a;margin-left:4px}
.wpo .dm-nav{display:flex;gap:22px;font-size:.88rem;color:#4a4f57;align-items:center}
.wpo .dm-nav-cta{padding:8px 16px;border-radius:999px;background:#2f4a3a;color:#fff}
.wpo .dm-burger{display:none;flex-direction:column;gap:4px}.wpo .dm-burger i{display:block;width:22px;height:2px;background:#2f4a3a}
.wpo .dm-hero{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:center;padding:36px 28px}
.wpo .dm-tag{font:700 .68rem/1 system-ui,sans-serif;letter-spacing:.14em;color:#8a7a5a}
.wpo .dm-hero h3{margin:10px 0;font-size:2rem;line-height:1.15;color:#1f2a24}
.wpo .dm-hero p{font:.95rem/1.55 system-ui,sans-serif;color:#555b63;margin-bottom:16px}
.wpo .dm-btn{display:inline-block;padding:11px 20px;border-radius:999px;background:#2f4a3a;color:#fff;font:700 .85rem system-ui,sans-serif}
/* neutrale, vlakke visuals in plaats van schuin gefotografeerde beelden */
.wpo .dm-art{position:relative;width:100%;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#2f4a3a,#6b8f71)}
.wpo .dm-art::before{content:"";position:absolute;right:-12%;top:-18%;width:62%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.16)}
.wpo .dm-art::after{content:"";position:absolute;left:12%;bottom:14%;width:46%;height:18%;border-radius:999px;background:rgba(255,255,255,.55)}
.wpo .dm-art--hero{aspect-ratio:4/3;box-shadow:0 14px 30px rgba(0,0,0,.14)}
.wpo .dm-art--a{aspect-ratio:16/10;border-radius:8px;margin-bottom:10px;background:linear-gradient(135deg,#8a7a5a,#d8c9a3)}
.wpo .dm-art--b{aspect-ratio:16/10;border-radius:8px;margin-bottom:10px;background:linear-gradient(135deg,#2f4a3a,#7aa384)}
.wpo .dm-art--c{aspect-ratio:16/10;border-radius:8px;margin-bottom:10px;background:linear-gradient(135deg,#3b4a63,#8aa1c4)}
.wpo .dm-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:8px 28px 34px}
.wpo .dm-c{background:#fff;border-radius:12px;padding:12px;box-shadow:0 6px 18px rgba(0,0,0,.07);font-family:system-ui,sans-serif}
.wpo .dm-c b{display:block;font-size:.95rem;color:#1f2a24}.wpo .dm-c small{display:block;margin-top:4px;color:#6a7078;font-size:.8125rem;line-height:1.4}
.wpo .dm-cta{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 28px;padding:26px;border-radius:14px;background:#2f4a3a;color:#fff}
.wpo .dm-cta h4{font-size:1.25rem}.wpo .dm-cta .dm-btn{background:#fff;color:#2f4a3a}
.wpo .dm-foot{padding:22px 28px;font:.78rem system-ui,sans-serif;color:#8a8f96}
@container (max-width:720px){
  .wpo .dm-hero{grid-template-columns:1fr;padding:28px 24px}.wpo .dm-hero h3{font-size:1.7rem}.wpo .dm-cards{grid-template-columns:1fr 1fr;padding:6px 24px 28px}.wpo .dm-c:nth-child(3){grid-column:1/-1}.wpo .dm-cta{margin:0 24px}.wpo .dm-head{padding:14px 24px}.wpo .dm-nav span:not(.dm-nav-cta){display:none}
}
@container (max-width:460px){
  .wpo .dm-head{padding:12px 18px}.wpo .dm-nav{display:none}.wpo .dm-burger{display:flex}.wpo .dm-hero{padding:22px 18px;gap:18px}.wpo .dm-hero h3{font-size:1.45rem}.wpo .dm-cards{grid-template-columns:1fr;padding:4px 18px 24px}.wpo .dm-c:nth-child(3){grid-column:auto}.wpo .dm-cta{flex-direction:column;align-items:flex-start;margin:0 18px;padding:20px}.wpo .dm-foot{padding:18px}
}
@keyframes dmScroll{0%,12%{transform:translateY(0)}88%,100%{transform:translateY(-18%)}}
.wpo .viewport-switch-bar{flex-wrap:wrap;justify-content:center;max-width:100%}
@media(max-width:380px){.wpo .btn-viewport{padding:9px 12px;font-size:0.9375rem}.wpo .viewport-switch-bar{gap:6px}}
@media(prefers-reduced-motion:reduce){.wpo .dm-site{animation:none}.wpo .dm-bezel,.wpo .dm-screen,.wpo .dm-stand,.wpo .dm-cam,.wpo .dm-stage{transition:none}}