.demo-trigger{gap:11px;border-color:var(--accent);background:#163f38;color:#edfdf8;box-shadow:0 0 24px #5ee2c412}.demo-trigger>span{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;border-radius:5px;font-size:10px;background:var(--accent);color:#092119}.demo-trigger:hover,.demo-trigger:focus-visible{background:#205349;border-color:#9cf5df;color:#edfdf8}
.demo-section{background:radial-gradient(ellipse at 50% 45%,#15352e40,transparent 72%);border-bottom:1px solid var(--line)}
.demo-wrap{max-width:1080px}.demo-heading{max-width:740px;margin-bottom:32px}.demo-heading .eyebrow{margin-bottom:12px}.demo-heading h2{font-size:clamp(32px,3.5vw,46px);margin-bottom:16px}.demo-heading .lead{margin-bottom:0}
.demo-frame{position:relative;border:1px solid #38554e;border-radius:16px;overflow:hidden;background:#070d12;box-shadow:0 24px 70px #0004;aspect-ratio:16/9}
.demo-frame video{display:block;width:100%;height:100%;object-fit:contain}
.demo-frame::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#03090d94 0%,#03090da8 82%,#03090d18 100%);opacity:0;transition:opacity .22s ease}
.demo-frame.is-preview::after{opacity:1}.demo-frame.is-preview:focus-within::after{opacity:.25}
@media(hover:hover) and (pointer:fine){.demo-frame.is-preview:hover::after{opacity:.25}}
.demo-play{position:absolute;left:50%;top:48%;z-index:2;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:12px;white-space:nowrap;border:1px solid var(--accent);background:var(--accent);color:#092119;border-radius:7px;padding:16px 26px;font-weight:800;font-size:16px;box-shadow:0 5px 30px #0009;min-height:60px}.demo-play:hover{background:#9cf5df}.demo-play-icon{font-size:17px}.demo-play:focus-visible{outline-offset:6px}
.demo-under{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:26px}.demo-under p{margin-bottom:8px;max-width:560px}.demo-under .btn{flex-shrink:0}
@media(max-width:720px){.demo-under{align-items:flex-start;flex-direction:column;gap:20px}.demo-under .btn{width:100%}.demo-frame{border-radius:10px}.demo-play{min-height:48px;padding:10px 18px;font-size:14px}.demo-heading{margin-bottom:24px}.demo-under p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.demo-frame::after{transition:none}}