/* Productanimaties: één onderdeel per scherm (slides.css), afwisselend licht en donker; groen blijft het accent. */
.pa-main { flex: 1; }
.pa-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: clamp(22px, 3.2vh, 36px); }
.pa-heading > p { max-width: 420px; color: var(--studio-muted); font-size: 16px; }
.pa-heading h2 { max-width: 16em; }

/* ---- 1. Spotlight ------------------------------------------------------- */
.pa-hero-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.pa-hero h1 { font-size: clamp(42px, 4.8vw, 70px); max-width: 11em; margin-bottom: 22px; }
.pa-lead { font-size: 18px; color: var(--studio-muted); max-width: 540px; }
.studio-page .pa-chips { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pa-chips li { display: inline-flex; align-items: center; gap: 9px; padding: 10px 15px; border-radius: 999px; background: #0d140f; color: #f4f5f4; font-size: 14px; font-weight: 600; }
.pa-chips span { color: var(--studio-green); }
.pa-spotlight { position: relative; width: min(100%, 62vh); justify-self: center; aspect-ratio: 1 / .92; border-radius: 22px; overflow: hidden; isolation: isolate;
    background: radial-gradient(ellipse 60% 70% at 50% 8%, #2a3a2c 0%, #111813 48%, #070a08 100%); box-shadow: 0 40px 80px -40px #0d140f99; }
.pa-beam { position: absolute; z-index: 0; left: 50%; top: -12%; width: 64%; height: 108%; transform: translateX(-50%);
    background: linear-gradient(180deg, #fffef5a8, #f4ffe62e 55%, transparent 92%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); filter: blur(14px); opacity: .55;
    animation: pa-beam 6s ease-in-out infinite alternate; }
@keyframes pa-beam { from { opacity: .42; } to { opacity: .62; } }
.pa-floor { position: absolute; z-index: 0; left: 18%; right: 18%; bottom: 11%; height: 13%; border-radius: 50%; background: radial-gradient(ellipse, #30ff0b40, #30ff0b10 45%, transparent 70%); }
.pa-spot-poster, .pa-spot-canvas { position: absolute; z-index: 1; left: 12%; top: 8%; width: 76%; height: auto; aspect-ratio: 1; }
.pa-spot-canvas { opacity: 0; }
.pa-spot-canvas.is-playing { opacity: 1; }
.pa-spotlight:has(.pa-spot-canvas.is-playing) .pa-spot-poster { visibility: hidden; }
.pa-spot-tag { position: absolute; z-index: 2; left: 22px; top: 20px; display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 999px; background: #070a08cc; color: #eef3ec; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; backdrop-filter: blur(6px); }
.pa-spot-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--studio-green); box-shadow: 0 0 12px #30ff0b; }

/* ---- 2. Webshop-demo ---------------------------------------------------- */
.pa-demo { background: radial-gradient(ellipse at 85% 0%, #1b3a2140, transparent 50%), var(--studio-bg); }
.pa-page .pa-demo { padding-top: calc(var(--header-height, 84px) + 14px); padding-bottom: 22px; }
.pa-demo-top { display: flex; justify-content: space-between; align-items: end; gap: 28px; flex-wrap: wrap; margin-bottom: 18px; }
.pa-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pa-switch { display: inline-flex; gap: 4px; padding: 5px; border-radius: 12px; border: 1px solid #2d3a2d; background: #0d140f; }
.pa-switch label { position: relative; cursor: pointer; }
.pa-switch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pa-switch span { display: block; padding: 11px 18px; border-radius: 8px; color: #c7d0c4; font-size: 14px; font-weight: 600; transition: background .2s, color .2s; }
.pa-switch span small { font-weight: 400; opacity: .7; margin-left: 4px; font-size: 11px; }
.pa-switch label:hover span { color: #fff; }
.pa-switch input:checked + span { background: var(--studio-green); color: #071004; }
.pa-switch input:focus-visible + span { outline: 2px solid var(--studio-green); outline-offset: 3px; }
.pa-switch input:disabled + span { opacity: .35; cursor: default; }
.pa-switch--small { padding: 3px; border-radius: 9px; }
.pa-switch--small span { padding: 7px 12px; font-size: 12px; }
.pa-switch--small input:checked + span { background: #e9f7e4; color: #0d140f; }

.pa-browser { max-width: 980px; margin-inline: auto; border-radius: 14px; overflow: hidden; background: #fbfbf9; color: #1c201d; box-shadow: 0 50px 90px -50px #000c, 0 0 0 1px #ffffff14; }
.pa-browser-bar { display: flex; align-items: center; gap: 7px; padding: 9px 14px; background: #e9ebe6; border-bottom: 1px solid #d9ddd5; }
.pa-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #c9cdc5; }
.pa-browser-bar span { margin-left: 12px; padding: 4px 12px; border-radius: 6px; background: #fff; color: #6b736b; font-size: 11px; min-width: 40%; }
.pa-shop-head { display: flex; align-items: center; gap: 22px; padding: 11px 22px; border-bottom: 1px solid #eceee9; font-size: 12px; color: #555d55; }
.pa-shop-head strong { color: #1c201d; font-size: 15px; margin-right: 10px; }
.pa-cart { margin-left: auto; }
.pa-shop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 10px; padding: 12px 18px 16px; }
.pa-shop[data-spotlight="none"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pa-product { position: relative; display: flex; flex-direction: column; border: 1px solid #ebede8; border-radius: 9px; padding: 10px 10px 12px; background: #fff; transition: box-shadow .3s; }
.pa-product-media { position: relative; aspect-ratio: 16 / 11; border-radius: 6px; background: #f2f3f0; overflow: hidden; margin-bottom: 10px; }
.pa-product-media img, .pa-product-canvas { position: absolute; inset: 6% 12%; width: 76%; height: 88%; object-fit: contain; }
.pa-product-canvas { opacity: 0; }
.pa-product.is-spotlight .pa-product-canvas.is-playing { opacity: 1; }
.pa-product.is-spotlight .pa-product-media:has(.is-playing) img { visibility: hidden; }
.pa-product h3 { font-size: 13px; font-weight: 600; letter-spacing: 0; color: #1c201d; }
.pa-product p { font-size: 12px; color: #545c54; margin-top: 2px !important; }
.pa-buy { align-self: flex-start; margin-top: 10px; padding: 6px 9px; border: 1px solid #d9ddd5; border-radius: 6px; font-size: 10px; color: #555d55; }
.pa-badge, .pa-view3d, .pa-hint { display: none; }

.pa-product.is-spotlight { order: -1; grid-column: span 2; grid-row: span 2; border-color: #0d140f; background: radial-gradient(ellipse 70% 55% at 50% 35%, #1f3a24 0%, #0d140f 70%); color: #f4f5f4;
    box-shadow: 0 0 0 1px #30ff0b40, 0 24px 60px -24px #30ff0b55; padding: 16px 18px 18px; cursor: default; animation: pa-pop .5s cubic-bezier(.2, .8, .2, 1.1); }
.pa-product.is-spotlight:focus-visible { outline: 2px solid var(--studio-green); outline-offset: 3px; }
@keyframes pa-pop { from { transform: scale(.94); opacity: .4; } to { transform: none; opacity: 1; } }
.pa-product.is-spotlight .pa-product-media { flex: 1; aspect-ratio: auto; min-height: 150px; background: radial-gradient(circle at 50% 45%, #30ff0b26, transparent 62%); }
.pa-product.is-spotlight h3 { color: #fff; font-size: clamp(17px, 1.6vw, 22px); font-weight: 750; letter-spacing: -.02em; }
.pa-product.is-spotlight p { color: #c7d0c4; font-size: 14px; }
.pa-product.is-spotlight .pa-buy { display: none; }
.pa-product.is-spotlight .pa-badge { display: inline-flex; position: absolute; z-index: 2; top: 14px; left: 16px; padding: 6px 10px; border-radius: 6px; background: var(--studio-green); color: #071004; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pa-product.is-spotlight[data-mode="hover"] .pa-hint { display: inline-flex; position: absolute; z-index: 2; top: 14px; right: 16px; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #ffffff14; border: 1px solid #ffffff2a; color: #e3ebe0; font-size: 11px; transition: opacity .3s; }
.pa-product.is-spotlight[data-mode="hover"] .pa-hint::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--studio-green); animation: pa-blink 1.4s ease-in-out infinite; }
.pa-product.is-spotlight[data-mode="hover"]:hover .pa-hint { opacity: 0; }
@keyframes pa-blink { 50% { opacity: .25; } }
.pa-product.is-spotlight .pa-view3d { display: inline-flex; gap: 8px; margin-top: 12px; align-self: flex-start; padding: 9px 13px; border-radius: 8px; border: 1px solid #5cbc45; color: var(--studio-green); font-size: 13px; font-weight: 700; }
.pa-product.is-spotlight .pa-view3d:hover { background: #30ff0b18; }
.pa-demo-caption { margin-top: 10px !important; max-width: 560px; color: var(--studio-muted); font-size: 14px; min-height: 2.9em; }
.pa-demo-caption strong { color: #fff; }

/* ---- 3. Waarom ---------------------------------------------------------- */
.pa-reasons { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pa-reasons li { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 16px; background: #fff; border: 1px solid #dfe5db; }
.pa-reason-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #0d140f; color: var(--studio-green); font-size: 22px; font-weight: 700; }
.pa-reasons h3 { font-size: 21px; }
.pa-reasons p { color: var(--studio-muted); font-size: 15px; }
.pa-reasons small { margin-top: auto; padding-top: 14px; border-top: 1px solid #e3e8df; color: #178c05; font-size: 12px; font-weight: 700; letter-spacing: .04em; }

/* ---- 4. Hergebruik ------------------------------------------------------ */
.pa-reuse { background: radial-gradient(ellipse at 10% 100%, #1b3a2140, transparent 55%), var(--studio-bg); }
.pa-reuse-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 18px; align-items: stretch; }
.pa-reuse-card { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 36px); border: 1px solid #2b372b; border-radius: 18px; background: #0b110d; }
.pa-reuse-card h3 { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; }
.pa-reuse-card p { color: var(--studio-muted); font-size: 15px; }
.pa-reuse-step { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: auto; padding-bottom: 18px; }
.pa-reuse-step b { padding: 10px 14px; border-radius: 10px; border: 1px solid #30ff0b55; background: #30ff0b12; color: #d9ffd0; font-size: 13px; }
.pa-reuse-step b:first-child { background: var(--studio-green); color: #071004; border-color: var(--studio-green); }
.pa-reuse-step i { color: var(--studio-green); font-style: normal; }
.pa-variants { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 10px; border-radius: 12px; background: radial-gradient(ellipse at 50% 30%, #1f3a24, #0b110d 75%); cursor: default; }
.pa-variants canvas { width: 100%; height: auto; aspect-ratio: 1; filter: hue-rotate(var(--hue)) saturate(1.1); opacity: 0; transition: opacity .3s; }
.pa-variants canvas.is-playing { opacity: 1; }
.pa-variants-hint { color: #9dff83; font-size: 12px; font-weight: 600; }

/* ---- 5. Inzet ----------------------------------------------------------- */
.pa-uses { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pa-uses li { padding: 26px 24px; border: 1px solid #dfe5db; border-radius: 16px; background: #fff; }
.pa-uses svg { width: 34px; height: 34px; fill: none; stroke: #178c05; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 18px; }
.pa-uses h3 { font-size: 18px; margin-bottom: 8px; }
.pa-uses p { color: var(--studio-muted); font-size: 14px; }

/* ---- 6. Portfolio: alle kaarten naast elkaar zodat het op één scherm past */
.pa-portfolio .product-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.pa-portfolio .product-card--sequence .product-title { font-size: clamp(18px, 1.5vw, 24px); padding: 0 56px 22px 20px; }
.pa-portfolio .product-card--sequence::after { right: 16px; bottom: 16px; width: 34px; height: 34px; font-size: 14px; }

/* ---- 7. Afsluiting ------------------------------------------------------ */
.pa-page .slide--end { justify-content: space-between; padding-bottom: 0; background: radial-gradient(ellipse at 15% 70%, #1b3a2150, transparent 55%), #070a08; }
.pa-end { display: flex; flex: 1; align-items: center; }
.pa-cta-inner { display: flex; justify-content: space-between; align-items: end; gap: 40px; width: 89%; }
.pa-cta-inner h2 { font-size: clamp(32px, 3.4vw, 50px) !important; max-width: 13em; }
.pa-cta-copy { color: var(--studio-muted); margin-top: 14px !important; }
.pa-cta-inner .actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
    .pa-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pa-shop[data-spotlight="none"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pa-portfolio .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .pa-hero-inner { grid-template-columns: 1fr; }
    .pa-spotlight { width: min(100%, 420px); }
    .pa-heading, .pa-demo-top { flex-direction: column; align-items: flex-start; gap: 12px; }
    .pa-controls { align-items: flex-start; }
    .pa-reasons, .pa-reuse-grid { grid-template-columns: 1fr; }
    .pa-shop, .pa-shop[data-spotlight="none"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pa-product.is-spotlight { grid-row: auto; }
    .pa-cta-inner { flex-direction: column; align-items: flex-start; }
    .pa-shop-head span:not(.pa-cart) { display: none; }
    .pa-page .slide--end .footer-description, .pa-page .slide--end .footer-bottom p + p { display: none; }
}
@media (max-width: 550px) {
    .pa-uses { grid-template-columns: 1fr; }
    .pa-portfolio .product-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .pa-switch { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .pa-controls { width: 100%; }
    .pa-switch span { text-align: center; padding: 10px 8px; font-size: 13px; }
    .pa-shop { gap: 8px; padding: 12px; }
    .pa-browser-bar span { min-width: 0; }
    .pa-reasons li { padding: 20px; }
    .pa-cta-inner .actions, .pa-cta-inner .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .pa-beam, .pa-product.is-spotlight, .pa-hint::before { animation: none !important; }
}