/* Business Kompas – Sprint D: Klimaatlab UX, demo conversion and mobile experience */
:root{--d-bg:#07191c;--d-edge:#355f61;--d-mint:#b8f5cc}
.intro{padding:30px 4vw 36px;grid-template-columns:minmax(0,1.12fr) minmax(280px,.7fr);gap:40px;align-items:end}
.intro h1{font-size:clamp(58px,6.5vw,106px);line-height:.95;margin:17px 0 0;letter-spacing:-.072em}
.intro-side{max-width:460px;padding-bottom:8px}
.intro-side p{margin:0 0 24px;font-size:clamp(16px,1.4vw,19px);line-height:1.6}
.intro-action{display:inline-flex;gap:30px;align-items:center;justify-content:space-between;padding:15px 22px;background:var(--mint);color:#092a25;text-decoration:none;border-radius:8px;font-size:13px;font-weight:800;transition:transform .2s,box-shadow .2s}
.intro-action:hover{transform:translateY(-2px);box-shadow:0 10px 28px #b8f5cc27}
.intro-micro{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;color:#b4d1cb;font-size:11px}
.intro-micro span{padding:7px 10px;border:1px solid #345157;border-radius:30px}
.studio{margin-bottom:62px}
.stage{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;min-height:0;overflow:hidden}
.stage-top,.stage-bottom{position:static!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;padding:17px 24px;min-height:62px;display:flex;align-items:center;gap:16px;justify-content:space-between}
.stage-top{background:#102b31}
.stage-bottom{background:#102b31;color:#a6c6c3;flex-wrap:wrap}
.stage-top .kicker{font-size:11px;letter-spacing:2px}
.stage .filmspace{width:100%;flex:0 0 auto;margin:0;aspect-ratio:16/9}
.room-selector{display:none}
.area-input{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#17383e;border:1px solid #3f6267;border-radius:9px;color:var(--mint)}
.area-input input{border:0;background:transparent;outline:0;min-width:0;flex:1;width:100%;color:white;padding:6px;font-size:17px}
.area-input input::placeholder{color:#93b0ae}
.area-input span{font-size:14px;font-weight:700}
.area-help{font-size:11px;line-height:1.5;color:#93b0ae;margin:10px 0 0}
.bk-d-pitch{margin:0;background:radial-gradient(circle at 85% 20%,#204743 0,transparent 37%),linear-gradient(120deg,#0a2428,#071b1e);border-top:1px solid #31635a;padding:clamp(65px,6vw,110px) 4vw;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.7fr);align-items:center;gap:50px;position:relative;overflow:hidden}
.bk-d-pitch:before{content:'';width:500px;height:500px;position:absolute;right:-190px;top:-200px;border:1px solid #b8f5cc24;border-radius:50%;box-shadow:0 0 0 52px #b8f5cc0b,0 0 0 104px #b8f5cc08;pointer-events:none}
.bk-d-pitch-copy,.bk-d-pitch-action{position:relative;z-index:1}
.bk-d-pitch h2{font-size:clamp(43px,5.2vw,80px);line-height:1;margin:19px 0 22px;letter-spacing:-.065em;font-weight:500}
.bk-d-pitch h2 em{font-style:normal;color:var(--mint)}
.bk-d-pitch p{color:#b6d0cd;line-height:1.7;font-size:16px;max-width:670px}
.bk-d-pitch-action{border:1px solid #44736d;background:#ffffff0a;padding:27px;border-radius:18px;display:flex;flex-direction:column;gap:15px}
.bk-d-pitch-action>span{color:#a4d0bd;font-size:11px;text-transform:uppercase;letter-spacing:.16em}
.bk-d-pitch-action>a{background:var(--mint);border-radius:9px;color:#092722;font-weight:800;text-decoration:none;padding:19px;display:flex;justify-content:space-between;gap:20px;align-items:center;transition:background .2s,transform .2s}
.bk-d-pitch-action>a:hover{background:white;transform:translateY(-2px)}
.bk-d-pitch-action>small{font-size:12px;line-height:1.5;color:#a6cbc2}
@media(max-width:950px){.intro{gap:20px}.studio{grid-template-columns:1fr}.stage{min-height:0}}
@media(max-width:650px){
 .bar{gap:10px;padding:12px 16px;font-size:10px}.bar>a{text-align:right}
 .head{padding:17px 16px}.logo{font-size:22px;letter-spacing:-1px}.logo i{height:24px;width:24px;margin-right:6px}.head a{font-size:11px;padding:10px 12px;white-space:nowrap}
 .intro{padding:32px 16px 25px;display:block}
 .intro h1{font-size:clamp(48px,12.6vw,67px);margin:19px 0 20px;line-height:.97}
 .intro-side{padding-bottom:0}.intro-side p{font-size:15px;margin-bottom:18px;line-height:1.55}
 .intro-action{padding:13px 17px;font-size:12px}
 .intro-micro{gap:6px;margin-top:16px;font-size:10px}.intro-micro span{padding:5px 9px}
 .studio{margin:0 15px 50px;border-radius:16px}
 .stage-top,.stage-bottom{padding:13px;gap:9px;min-height:0}
 .stage-top .kicker{font-size:9px;letter-spacing:1.2px}
 .stage-top .live{font-size:10px;padding:7px 9px;white-space:nowrap}
 .stage-bottom{font-size:10px;line-height:1.4}
 .stage .filmspace{margin:0;aspect-ratio:16/9}
 .interactive.focused{transform:none}
 .interactive .hotspot{display:none}
 .room-selector{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;background:#102b31;padding:12px;border-bottom:1px solid #386168}
 .room-choice{min-height:50px;display:flex;align-items:center;gap:10px;border:1px solid #47656a;border-radius:9px;background:#16383e;color:#e6f7f0;font-size:12px;text-align:left;padding:10px;transition:background .2s}
 .room-choice span{font-size:10px;color:#9ac1b6}
 .room-choice.selected,.room-choice[aria-pressed=true]{background:#b8f5cc;color:#092825;border-color:#b8f5cc;font-weight:bold}
 .room-choice.selected span{color:#345a52}
 .panel{padding:20px}
 .panel .modes button{min-height:45px}
 .detail{padding:0 16px 60px;gap:24px}
 .end{padding:60px 16px;gap:28px}
 .bk-d-pitch{padding:60px 16px;grid-template-columns:1fr;gap:25px}
 .bk-d-pitch h2{font-size:48px}
 .bk-d-pitch-action{padding:21px}
 .foot{padding:21px 16px;gap:15px}
}
@media(prefers-reduced-motion:reduce){.intro-action,.bk-d-pitch-action>a{transition:none}}