.demo-showcase{padding:84px 0;background:#071b3b;color:#fff;overflow:hidden}
.demo-showcase .eyebrow{color:#53dcf5}
.demo-showcase-head{max-width:820px;margin-bottom:28px}
.demo-showcase-head h2{margin:.45rem 0 12px;font-size:clamp(2rem,4vw,3.2rem);line-height:1.04;letter-spacing:-.045em}
.demo-showcase-head p{max-width:720px;margin:0;color:#c4d3e7;font-size:1.05rem;line-height:1.75}
.demo-switcher{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:24px}
.demo-switch{border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:10px 15px;background:rgba(255,255,255,.07);color:#c8d7e9;font-weight:800;cursor:pointer;transition:.25s ease}
.demo-switch:hover,.demo-switch:focus-visible{border-color:#53dcf5;color:#fff;outline:none}
.demo-switch.active{border-color:#fff;background:#fff;color:#071b3b;box-shadow:0 10px 25px rgba(0,0,0,.16)}
.demo-showcase-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.7fr);gap:38px;align-items:center}
.demo-viewer{min-height:460px;display:grid;place-items:center;padding:18px;border:1px solid rgba(255,255,255,.13);border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035));box-shadow:0 28px 65px rgba(0,0,0,.22)}
.demo-frame-shell{position:relative;width:100%;max-width:820px;aspect-ratio:16/9;overflow:hidden;border-radius:18px;background:#030e20;box-shadow:0 22px 45px rgba(0,0,0,.35);transition:max-width .35s ease,aspect-ratio .35s ease}
.demo-frame-shell.vertical{max-width:276px;aspect-ratio:9/16;border-radius:25px}
.demo-frame-shell::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.17);border-radius:inherit;pointer-events:none}
.demo-frame-shell iframe{width:100%;height:100%;display:block;border:0;background:#06142e}
.demo-details{min-height:300px;display:flex;flex-direction:column;justify-content:center}
.demo-details-badge{width:max-content;margin-bottom:15px;padding:7px 10px;border-radius:999px;background:rgba(83,220,245,.12);color:#70e9ff;font-size:.72rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.demo-details h3{margin:0 0 12px;font-size:clamp(1.6rem,2.7vw,2.35rem);line-height:1.08;letter-spacing:-.035em}
.demo-details p{margin:0;color:#c4d3e7;line-height:1.75}
.demo-feature-list{display:grid;gap:10px;margin:22px 0 27px;padding:0;list-style:none}
.demo-feature-list li{display:flex;gap:10px;align-items:flex-start;color:#e8f1fb;font-size:.94rem;line-height:1.5}
.demo-feature-list li::before{content:"✓";flex:0 0 21px;width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:#0b7cf0;color:#fff;font-size:.72rem;font-weight:900}
.demo-cta{padding-top:24px;border-top:1px solid rgba(255,255,255,.13)}
.demo-cta strong{display:block;margin-bottom:6px;font-size:1.04rem}
.demo-cta span{display:block;margin-bottom:16px;color:#aebfd5;font-size:.88rem;line-height:1.55}
.demo-cta .button{width:max-content}
.demo-loading{position:absolute;inset:0;display:grid;place-items:center;color:#9eb4cc;font-size:.82rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.demo-frame-shell.loaded .demo-loading{display:none}
@media(max-width:950px){.demo-showcase-grid{grid-template-columns:1fr}.demo-viewer{min-height:400px}.demo-details{min-height:0}.demo-frame-shell{max-width:720px}.demo-frame-shell.vertical{max-width:250px}}
@media(max-width:600px){.demo-showcase{padding:54px 0}.demo-showcase-head{margin-bottom:20px}.demo-showcase-head h2{font-size:2rem}.demo-showcase-head p{font-size:.96rem;line-height:1.65}.demo-switcher{display:flex;flex-wrap:nowrap;gap:8px;margin-right:-18px;padding:0 18px 8px 0;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}.demo-switcher::-webkit-scrollbar{display:none}.demo-switch{flex:0 0 auto;padding:9px 13px;text-align:center;white-space:nowrap;scroll-snap-align:start}.demo-showcase-grid{gap:26px}.demo-viewer{min-height:0;padding:8px;border-radius:17px}.demo-frame-shell{width:100%;max-width:none;border-radius:10px}.demo-frame-shell.vertical{width:min(68vw,220px);max-width:220px;border-radius:19px}.demo-details h3{font-size:1.55rem}.demo-details p{line-height:1.65}.demo-feature-list{margin:18px 0 22px}.demo-cta{padding-top:20px}.demo-cta .button{width:100%;text-align:center}}
@media(prefers-reduced-motion:reduce){.demo-frame-shell{transition:none}}