.wb-showcase-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.65fr); align-items:end; gap:clamp(2rem,7vw,7rem); margin:1.5rem 0 4rem; }
.wb-showcase-intro h2 { font-size:clamp(3.5rem,6vw,7rem); max-width:11ch; margin:0; }
.wb-showcase-intro .lead { margin:0; }
.wb-showcase-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr); gap:1px; background:#D9D9D9; border:1px solid #D9D9D9; }
.wb-screen { display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; min-height:490px; padding:clamp(1.5rem,3vw,3rem); background:radial-gradient(ellipse at 72% 38%,#66666666,transparent 46%),#222222; color:#FDFDFD; }
.wb-screen:before { content:''; position:absolute; width:35%; height:150%; left:53%; top:-25%; transform:rotate(24deg); border-left:1px solid #75923C; border-right:1px solid #666666; pointer-events:none; }
.wb-screen-top,.wb-screen-foot,.wb-demo-entry>span,.wb-demo-entry small,.wb-video-top,.wb-video-placeholder,.wb-video-bottom>a { position:relative; font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.06em; }
.wb-screen-foot { color:#D9D9D9; }
.wb-video-trigger { position:relative; display:flex; flex-direction:column; align-items:center; align-self:center; gap:1.1rem; border:0; background:none; color:#FDFDFD; cursor:pointer; font-size:1.1rem; }
.wb-video-trigger>span { display:grid; place-items:center; width:92px; height:92px; padding-left:.35rem; border:1px solid #FDFDFD; border-radius:50%; font-size:2rem; transition:background .2s,color .2s; }
.wb-video-trigger:hover>span,.wb-video-trigger:focus-visible>span { background:#FDFDFD; color:#222222; }
.wb-demo-entry { display:flex; flex-direction:column; padding:clamp(2rem,3.2vw,3.5rem); background:#FDFDFD; }
.wb-demo-entry>span { color:#75923C; }
.wb-demo-entry h3 { margin:3rem 0 1rem; font-size:clamp(2.5rem,3vw,3.8rem); }
.wb-demo-entry p { color:#666666; font-size:1.07rem; }
.wb-demo-entry .wb-demo-cta { display:flex; align-items:center; justify-content:space-between; gap:2rem; align-self:flex-start; margin-top:auto; background:#75923C; border-color:#75923C; color:#FDFDFD; }
.wb-demo-entry .wb-demo-cta:hover { background:#222222; border-color:#222222; }
.wb-demo-entry small { margin-top:1.2rem; color:#666666; line-height:1.5; letter-spacing:0; }
.wb-video-dialog { position:fixed; inset:0; width:min(1100px,calc(100vw - 4vw)); max-height:calc(100svh - 4vw); padding:0; overflow-y:auto; border:1px solid #666666; background:#222222; color:#FDFDFD; }
.wb-video-dialog::backdrop { background:#222222dd; backdrop-filter:blur(8px); }
.wb-video-top { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.5rem; border-bottom:1px solid #666666; }
.wb-video-close { border:0; background:transparent; color:#FDFDFD; font-size:2rem; line-height:1; cursor:pointer; }
.wb-video-stage { position:relative; min-height:360px; aspect-ratio:16/9; }
.wb-video-player { display:block; width:100%; height:100%; position:absolute; inset:0; background:#222222; }
.wb-video-player[hidden],.wb-video-placeholder[hidden] { display:none; }
.wb-video-placeholder { display:flex; flex-direction:column; justify-content:space-between; position:absolute; inset:0; padding:clamp(1.5rem,4vw,3.5rem); background:radial-gradient(ellipse at 50% 60%,#66666666,transparent 50%),#222222; }
.wb-video-steps { display:flex; justify-content:center; align-items:center; gap:clamp(1.5rem,4vw,5rem); }
.wb-video-steps strong { display:flex; flex-direction:column; gap:.5rem; color:#75923C; font-size:clamp(2rem,4vw,4rem); font-weight:500; }
.wb-video-steps strong span { color:#FDFDFD; font-size:clamp(.9rem,1.6vw,1.5rem); }
.wb-video-placeholder p { margin:0; align-self:flex-end; color:#D9D9D9; }
.wb-video-bottom { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.5rem; border-top:1px solid #666666; }
.wb-video-bottom h2 { margin:0; font-size:clamp(1.5rem,2.8vw,2.6rem); }
.wb-video-bottom>a { color:#FDFDFD; border-bottom:1px solid #75923C; padding-bottom:.4rem; }
@media(max-width:900px){.wb-showcase-intro { grid-template-columns:1fr; }.wb-showcase-grid { grid-template-columns:1fr; }.wb-screen { min-height:390px; }.wb-demo-entry .wb-demo-cta { margin-top:2rem; }}
@media(max-width:620px){.wb-screen { min-height:320px; }.wb-video-dialog { width:100vw; max-height:100svh; }.wb-video-stage { min-height:340px; aspect-ratio:4/5; }.wb-video-bottom { align-items:flex-start; flex-direction:column; }.wb-video-steps { gap:1rem; }}
@media(prefers-reduced-motion:reduce){.wb-video-trigger>span { transition:none; }}