@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');:root{--bg:#0b1017;--panel:#151d27;--line:#344150;--gold:#e1bd85;--text:#f4f0e8;--muted:#aeb9c4}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',Arial,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}.top{display:flex;align-items:center;gap:20px;padding:23px 5%;border-bottom:1px solid var(--line);font-size:12px}.brand{color:var(--gold);font-weight:700;letter-spacing:.14em}.top>span{margin:auto;letter-spacing:.13em;color:#b8c0c8}.top>span i{font-style:normal;color:#6f8090}.heading{display:flex;justify-content:space-between;align-items:end;gap:25px;padding:62px 5% 40px}.eyebrow{font-size:10px;color:var(--gold);letter-spacing:.18em;font-weight:700}.heading h1{font:400 clamp(46px,5.5vw,83px)/1.06 'Playfair Display',Georgia,serif;margin:18px 0}.heading h1 em{color:var(--gold)}.heading p,.panel-heading p{color:var(--muted);font-size:14px;line-height:1.7;max-width:680px}.steps{display:flex;gap:16px;color:#8897a6;font-size:11px;white-space:nowrap}.steps .current{color:var(--gold)}.service-tabs{margin:0 5%;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.service-tabs button{border:1px solid var(--line);border-radius:7px;background:#151d27;color:#aeb9c4;text-align:left;padding:20px;display:flex;flex-direction:column;gap:9px;font-size:11px}.service-tabs button strong{font-size:20px;color:var(--text)}.service-tabs button small{font-size:11px}.service-tabs button[aria-selected=true]{border-color:var(--gold);background:#283344;color:var(--gold)}.studio-layout{display:grid;grid-template-columns:minmax(0,1fr) 315px;gap:18px;margin:24px 5% 80px;align-items:start}.main-panel,.side{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:25px;min-width:0}.panel-heading{display:flex;justify-content:space-between;gap:20px}.panel-heading h2{font:400 clamp(29px,3vw,43px) 'Playfair Display',Georgia,serif;margin:12px 0}.device-controls{display:flex;gap:5px;align-self:flex-start;white-space:nowrap}.device-controls button,.choice-row button{border:1px solid var(--line);background:#101822;color:#b5c1cd;padding:10px 13px;border-radius:5px;font-size:11px}.device-controls button.active,.choice-row button.active{border-color:var(--gold);color:var(--gold);background:#28313b}.choice-row{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.preview-shell{background:#0b1017;border:1px solid #394454;border-radius:9px;overflow:hidden}.preview-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#26303d;padding:13px 17px;font-size:11px;color:#c3ccd5}.preview-bar .dots{color:#8e9aa6;letter-spacing:3px}.preview-bar a{color:var(--gold)}.preview-wrap{height:540px;display:flex;justify-content:center;background:#111822;overflow:hidden}.preview-wrap iframe{width:100%;height:100%;border:0;background:white;transition:width .3s}.preview-wrap.mobile iframe{width:390px;max-width:100%}.demo-note{color:#aab5c1;font-size:11px;line-height:1.6;margin-top:15px}.deep-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}.deep-links a{padding:13px 16px;border:1px solid #4c5a68;border-radius:5px;font-size:12px;color:var(--gold)}.side{position:sticky;top:20px}.side label{display:block;margin:22px 0 8px;font-size:12px}.side input{width:100%;border:1px solid #4c5966;background:#0e141c;color:white;border-radius:4px;padding:13px}.side h3{font:400 25px 'Playfair Display',Georgia,serif;margin:27px 0 5px}.side p,.legal{font-size:11px;line-height:1.6;color:var(--muted)}.features{margin:18px 0}.feature{display:flex;align-items:start;gap:10px;padding:13px 0;border-bottom:1px solid #35404c;font-size:12px;line-height:1.4;cursor:pointer}.feature input{width:17px;height:17px;accent-color:var(--gold);margin:0}.summary{display:flex;flex-direction:column;gap:9px;background:#202d3a;padding:15px;margin:18px 0}.summary span{font-size:10px;color:var(--gold);letter-spacing:.13em}.summary strong{font-size:13px}.summary small{font-size:11px;color:#c2cbd4;line-height:1.5}.request{display:block;text-align:center;padding:17px 8px;background:var(--gold);color:#111923;font-weight:700;font-size:13px;border-radius:4px}.legal{display:block;margin-top:14px}footer{border-top:1px solid var(--line);padding:24px 5%;display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}@media(max-width:1050px){.studio-layout{grid-template-columns:1fr}.side{position:static}.steps{display:none}}@media(max-width:700px){.top{padding:17px 5%}.top>span{display:none}.top>a:last-child{margin-left:auto}.heading{padding:43px 5% 30px}.service-tabs{grid-template-columns:repeat(2,1fr)}.service-tabs button{padding:13px}.service-tabs button strong{font-size:16px}.panel-heading{flex-direction:column}.studio-layout{margin:15px 5% 55px}.main-panel,.side{padding:15px}.preview-wrap{height:420px}.preview-bar{font-size:9px}.choice-row button{padding:10px}footer{flex-direction:column;gap:10px}}
/* PATCH 42: één demonstratie, één keuze, één aanvraag */
.studio-layout{grid-template-columns:minmax(0,1fr) 280px;gap:15px}.main-panel{padding:26px}.category-switch{display:flex;gap:8px;margin:22px 0}.category-switch button{padding:10px 16px;border:1px solid var(--line);background:#101822;color:#cbd5df;border-radius:50px;font-size:12px;cursor:pointer}.category-switch button.active{background:#e1bd85;color:#141b25;border-color:#e1bd85}.experience-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:14px}.experience-menu{max-height:610px;overflow:auto;display:flex;flex-direction:column;gap:6px;padding-right:4px}.experience-menu button{width:100%;text-align:left;border:1px solid transparent;border-radius:7px;background:#101720;color:#f4f0e8;padding:14px;cursor:pointer;display:flex;align-items:flex-start;gap:11px}.experience-menu button:hover,.experience-menu button.active{border-color:#c9a77a;background:#293442}.experience-menu button .n{font-size:10px;color:#d9b884;padding-top:4px}.experience-menu button strong{display:block;font-size:12px;font-weight:600}.experience-menu button small{display:block;color:#aab8c7;font-size:10px;margin-top:5px;line-height:1.5}.experience-menu button .tick{margin-left:auto;color:#e1bd85}.experience-stage{border:1px solid #435064;border-radius:10px;overflow:hidden;background:#0d131b}.experience-top{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px}.experience-top h3{font:400 clamp(22px,2.4vw,34px)/1.15 'Playfair Display',Georgia,serif;margin:8px 0}.experience-top p{color:#aab8c7;font-size:12px;line-height:1.5;margin:0}.experience-top button{white-space:nowrap;border:1px solid #627083;color:#e1bd85;background:transparent;border-radius:4px;padding:11px;font-size:11px;cursor:pointer}.experience-screen{min-height:370px;background:#0a1320;overflow:hidden;position:relative}.experience-screen iframe{display:block;width:100%;height:410px;border:0;background:#0b1220}.experience-bottom{padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}.experience-bottom strong{font-size:12px}.experience-bottom p{font-size:11px;color:#aab8c7;line-height:1.5;margin:6px 0 0}.experience-bottom button{border:1px solid #d9b884;background:#d9b884;color:#111922;border-radius:5px;padding:13px 15px;font-weight:700;font-size:12px;white-space:nowrap;cursor:pointer}.experience-bottom button[aria-pressed=true]{background:#233d36;border-color:#84d2b4;color:#a8e9cf}.gallery-hint{font-size:11px;color:#9dabb8;margin-top:15px}.design-examples{margin-top:20px;border-top:1px solid #405064;padding-top:20px}.design-examples summary{cursor:pointer;color:#e1bd85;font-size:12px}.design-examples summary span{float:right}.design-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.design-links a{padding:10px;border:1px solid #455367;border-radius:5px;font-size:11px;color:#d8c09a}.side h3{margin:13px 0}.summary #selected-labels{font-size:11px;line-height:1.7;color:#d3dce4}.selected-pill{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 0;border-bottom:1px solid #415061}.selected-pill button{background:none;border:0;color:#f2c69c;cursor:pointer;font-size:16px}.side label{margin-top:18px}.side .summary{margin-top:20px}@media(max-width:1250px){.studio-layout{grid-template-columns:1fr}.experience-grid{grid-template-columns:215px 1fr}}@media(max-width:800px){.experience-grid{grid-template-columns:1fr}.experience-menu{flex-direction:row;overflow-x:auto;max-height:none}.experience-menu button{min-width:175px}.experience-top{flex-wrap:wrap}.experience-screen iframe{height:350px}.experience-bottom{flex-direction:column;align-items:stretch}.category-switch{flex-wrap:wrap}.category-switch button{font-size:11px}.heading{padding-bottom:20px}}


/* PATCH 43: één navigatie, herkenbare visuele keuzekaarten */
.category-switch{display:none}
.studio-instruction{display:flex;align-items:center;gap:13px;margin:18px 0 16px;padding:13px 16px;border:1px solid #38475a;border-radius:8px;background:#101924}
.instruction-number{color:var(--gold);font-size:19px;font-family:Georgia,serif}
.studio-instruction strong{display:block;font-size:13px}.studio-instruction small{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.experience-grid{grid-template-columns:minmax(230px,300px) minmax(0,1fr)}
.experience-menu{max-height:740px;gap:9px}
.experience-menu button.demo-tile{display:grid;grid-template-columns:70px 24px minmax(0,1fr);align-items:center;gap:9px;padding:8px;border-color:#2c3b4d;background:#111c29;min-height:87px}
.experience-menu button.demo-tile.active{background:#253344;border-color:#e1bd85;box-shadow:inset 3px 0 #e1bd85}
.experience-menu button.demo-tile:hover{border-color:#c8a574;transform:translateY(-1px)}
.demo-tile .n{font-size:10px;padding:0;align-self:center}
.demo-tile-text{min-width:0}
.demo-visual{height:66px;width:70px;display:block;position:relative;overflow:hidden;border-radius:5px;background:linear-gradient(135deg,#203e63,#111a2c);flex-shrink:0}
.demo-visual i{position:absolute;display:block}
.demo-visual i:nth-child(1){width:43px;height:43px;border-radius:50%;background:linear-gradient(145deg,#f9daab,#b7763d);left:21px;top:10px;box-shadow:0 8px 18px #0006}
.demo-visual i:nth-child(2){width:47px;height:1px;background:#fff8;transform:rotate(-26deg);left:0;top:43px}
.demo-visual i:nth-child(3){width:21px;height:25px;border:1px solid #e1bd85;right:5px;bottom:5px}
.visual-video,.visual-gallery{background:linear-gradient(135deg,#1b2944,#543b68 60%,#e49c66)}
.visual-video i:nth-child(1){border-radius:8px;width:52px;height:32px;top:17px;left:9px;background:linear-gradient(135deg,#c6d9e6,#23436b)}
.visual-video i:nth-child(3){border:0;clip-path:polygon(0 0,100% 50%,0 100%);background:#fff;width:13px;height:16px;top:25px;left:30px}
.visual-scroll i:nth-child(1),.visual-parallax i:nth-child(1){border-radius:3px;transform:rotate(-20deg)}
.visual-before{background:linear-gradient(90deg,#a47b54 49%,#243e60 50%)}
.visual-before i:nth-child(2){height:66px;width:2px;background:#fff;left:34px;top:0;transform:none}
.visual-calc,.visual-analytics{background:linear-gradient(140deg,#0c2d32,#196d75)}
.visual-calc i:nth-child(1),.visual-analytics i:nth-child(1){border-radius:0;width:11px;height:28px;left:14px;top:28px;background:#e0bd82;box-shadow:16px -10px 0 #88d3d0,32px -22px 0 #f3f0df}
.visual-booking,.visual-tasks{background:linear-gradient(145deg,#30475a,#101c2c)}
.visual-booking i:nth-child(1),.visual-tasks i:nth-child(1){border-radius:4px;background:repeating-linear-gradient(90deg,#e1bd85 0 7px,transparent 7px 11px),repeating-linear-gradient(#fff3 0 8px,transparent 8px 12px);width:52px;height:42px;left:9px;top:12px}
.visual-contacts,.visual-roles,.visual-portal{background:linear-gradient(135deg,#354b6d,#151f31)}
.visual-contacts i:nth-child(1),.visual-roles i:nth-child(1),.visual-portal i:nth-child(1){width:28px;height:28px;left:21px;top:9px;background:#e1bd85}
.visual-contacts i:nth-child(3),.visual-roles i:nth-child(3),.visual-portal i:nth-child(3){width:46px;height:20px;left:12px;bottom:3px;border-radius:25px 25px 0 0;background:#c6d5df}
.visual-pipeline,.visual-workflow,.visual-lead,.visual-approval,.visual-reminder{background:linear-gradient(140deg,#0d2940,#235c65)}
.visual-pipeline i:nth-child(1),.visual-workflow i:nth-child(1),.visual-lead i:nth-child(1),.visual-approval i:nth-child(1),.visual-reminder i:nth-child(1){width:14px;height:14px;left:9px;top:26px;box-shadow:24px -14px 0 #7fd5cb,45px 10px 0 #e2be85}
.visual-pipeline i:nth-child(2),.visual-workflow i:nth-child(2),.visual-lead i:nth-child(2),.visual-approval i:nth-child(2),.visual-reminder i:nth-child(2){width:55px;top:32px;left:8px;transform:rotate(-10deg)}
.visual-document,.visual-intake{background:linear-gradient(135deg,#384759,#6d6a61)}
.visual-document i:nth-child(1),.visual-intake i:nth-child(1){width:38px;height:49px;top:8px;left:16px;background:#eee8db;border-radius:2px}
.visual-document i:nth-child(2),.visual-intake i:nth-child(2){width:25px;height:2px;top:27px;left:22px;transform:none;background:#a6b3bb;box-shadow:0 8px 0 #a6b3bb,0 16px 0 #a6b3bb}
.visual-config{background:linear-gradient(145deg,#1a3354,#6d4163)}
.visual-config i:nth-child(1){border-radius:6px;transform:rotate(25deg)}
.experience-menu button .tick{position:absolute;right:8px;top:7px;background:#203d34;border-radius:50%;padding:1px 5px}
.experience-menu button{position:relative}
@media(max-width:1250px){.experience-grid{grid-template-columns:250px minmax(0,1fr)}}
@media(max-width:800px){.experience-grid{grid-template-columns:1fr}.experience-menu{display:grid;grid-auto-flow:column;grid-auto-columns:210px;overflow-x:auto;max-height:none;padding-bottom:12px}.experience-menu button.demo-tile{grid-template-columns:55px 18px 1fr}.demo-visual{width:55px}.experience-screen iframe{height:420px}}
@media(max-width:520px){.experience-top{padding:14px}.experience-screen iframe{height:350px}.studio-instruction{margin:14px 0}.experience-menu{grid-auto-columns:205px}.heading h1{font-size:45px}}

/* v49: aanvraag zonder verloren keuzes */
.copy-request{display:block;width:100%;margin-top:10px;border:1px solid #6c8195;border-radius:5px;background:transparent;color:#e6eef5;padding:12px;font:inherit;cursor:pointer}
.copy-request:hover,.copy-request:focus-visible{border-color:#e1bd85;color:#e1bd85}
.copy-request:disabled{opacity:.45;cursor:not-allowed}
.request[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.selected-pill button:focus-visible{outline:2px solid #e1bd85;outline-offset:2px}
