.products .card{overflow:clip}
.cardDemo{display:block;position:relative;aspect-ratio:16/10;margin-top:18px;overflow:hidden;border:1px solid #ffffff1f;border-radius:16px;background:#080e1d;isolation:isolate;box-shadow:0 8px 24px #0003}
.cardDemo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 8%;transition:transform .28s ease;filter:brightness(.88)}
.cardDemo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#07102000 25%,#030816eb 100%);z-index:0;pointer-events:none}
.cardDemoPlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-65%);z-index:1;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid #ffffff8a;background:#0c1429c9;color:#fff;font-size:17px;box-shadow:0 6px 20px #0005;backdrop-filter:blur(8px)}
.cardDemoCaption{position:absolute;bottom:12px;left:12px;right:8px;z-index:1;font-size:12px;font-weight:700;color:#f5f8ff;letter-spacing:.1px}
.cardDemoCount{position:absolute;right:8px;top:8px;z-index:1;padding:4px 7px;border-radius:8px;background:#071020d9;border:1px solid #ffffff26;color:#edf5ff;font-size:10px;line-height:1.2}
.cardDemo:hover img{transform:scale(1.035)}
.cardDemo:focus-visible,.videoDialog button:focus-visible,.videoFallback:focus-visible{outline:2px solid #6ceac2;outline-offset:4px}
.videoDialog{width:min(540px,calc(100% - 24px));max-height:90svh;margin:auto;padding:0;overflow:hidden;border:1px solid #465c84;border-radius:24px;background:#0b1425;color:#f4f8ff;box-shadow:0 32px 100px #000a}
.videoDialog[open]{display:flex;flex-direction:column}
.videoDialog::backdrop{background:#020617dc;backdrop-filter:blur(7px)}
.videoDialogHead{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid #ffffff14;flex-shrink:0}
.videoDialogHead h2{font-size:clamp(17px,4vw,23px);line-height:1.2;letter-spacing:-.4px;margin:0}
.videoDialogHead p{margin:5px 0 0;color:#9eafc7;font-size:12px}
.videoDialogClose{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:13px;border:1px solid #ffffff25;background:#17243b;color:#fff;font:inherit;font-size:24px;line-height:1;cursor:pointer}
.videoDialogBody{min-height:0;overflow:auto;padding:12px}
.videoStage{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:14px;background:#000}
.videoStage video{display:block;width:100%;max-height:calc(90svh - 178px);object-fit:contain;background:#000}
.videoChoices{display:flex;gap:8px;padding:0 0 12px}
.videoChoices[hidden]{display:none}
.videoChoices button{border:1px solid #ffffff26;border-radius:10px;background:#142139;color:#b6c9e4;padding:8px 13px;font:inherit;font-size:12px;font-weight:600;line-height:1.2;cursor:pointer}
.videoChoices button[aria-pressed="true"]{color:#061423;background:linear-gradient(115deg,#6fe5ed,#9f9aff);border-color:transparent}
.videoFooter{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 3px 1px;font-size:11px;color:#9eafc7}
.videoStatus{margin:0;line-height:1.4;flex:1}
.videoFallback{white-space:nowrap;color:#b4eaff;text-decoration:underline;text-underline-offset:3px}
@media(max-width:480px){.cardDemo{margin-top:14px;border-radius:12px}.cardDemoPlay{width:36px;height:36px;font-size:14px}.cardDemoCaption{font-size:11px;bottom:9px;left:10px}.videoDialogHead{padding:13px}.videoDialogBody{padding:9px}.videoStage video{max-height:calc(90svh - 172px)}}
@media(prefers-reduced-motion:reduce){.cardDemo img{transition:none}.cardDemo:hover img{transform:none}}