/* Interactive product demo (click-through steps with a spotlight and tooltip). Built from public/assets/demo/steps.json. */
.dm{max-width:1040px;margin:0 auto;position:relative}
.dm-frame{position:relative;border-radius:16px;overflow:hidden;background:#fff;border:1px solid #E4E1DA;box-shadow:0 24px 60px rgba(40,30,110,.16)}
.dm-top{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#F4F3EF;border-bottom:1px solid #E4E1DA}
.dm-top i{width:9px;height:9px;border-radius:50%;background:#D9D6CF;display:block}
.dm-top span{margin-left:10px;font-size:12px;color:#8C877D}
.dm-stage{position:relative;aspect-ratio:1440/900;background:#fff;overflow:hidden}
.dm-zoom{position:absolute;inset:0;transform-origin:0 0;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.dm-stage img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.dm-hl{position:absolute;border-radius:10px;box-shadow:0 0 0 9999px rgba(24,18,70,.52);transition:left .45s cubic-bezier(.22,1,.36,1),top .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1),height .45s cubic-bezier(.22,1,.36,1);cursor:pointer;outline:2px solid #fff}
.dm-beacon{position:absolute;right:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#625AE9;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.dm-beacon::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid #625AE9;animation:dm-pulse 1.6s ease-out infinite}
@keyframes dm-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.dm-tip{position:absolute;width:310px;background:#fff;border-radius:14px;padding:16px 16px 14px;box-shadow:0 14px 40px rgba(20,14,70,.3);transition:left .45s cubic-bezier(.22,1,.36,1),top .45s cubic-bezier(.22,1,.36,1);z-index:3}
.dm-tip small{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#625AE9;margin-bottom:6px}
.dm-tip b{display:block;font-size:17px;line-height:1.25;margin-bottom:6px;color:#1A1630}
.dm-tip p{margin:0 0 12px;font-size:14px;line-height:1.5;color:#4B4660}
.dm-nav{display:flex;gap:8px;align-items:center}
.dm-btn{font:inherit;font-weight:600;font-size:14px;border-radius:999px;padding:9px 18px;border:1px solid #D9D6CF;background:#fff;color:#1A1630;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block}
.dm-btn.pri{background:#625AE9;border-color:#625AE9;color:#fff}
.dm-btn:disabled{opacity:.4;cursor:default}
.dm-btn:hover:not(:disabled){filter:brightness(.97)}
.dm-prog{display:flex;gap:6px;justify-content:center;margin:16px 0 0}
.dm-prog button{width:28px;height:6px;border-radius:3px;border:0;padding:0;background:#D9D6CF;cursor:pointer}
.dm-prog button.on{background:#625AE9}
.dm-prog button.done{background:#A9A4F2}
.dm-card{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;background:rgba(246,244,255,.9);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.dm-card div{max-width:460px}
.dm-card h3{font-size:30px;line-height:1.15;margin:0 0 10px;color:#1A1630}
.dm-card p{margin:0 0 20px;font-size:16px;line-height:1.5;color:#4B4660}
.dm-card .dm-nav{justify-content:center;flex-wrap:wrap}
.dm-card .dm-btn{padding:12px 24px;font-size:15px}
.dm-hide{display:none!important}
.dm-m{display:none}
@media (max-width:720px){
  .dm-tip{display:none}
  .dm-m{display:block;background:#fff;border:1px solid #E4E1DA;border-radius:14px;padding:14px 14px 12px;margin-top:12px}
  .dm-m small{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#625AE9;margin-bottom:5px}
  .dm-m b{display:block;font-size:16px;line-height:1.25;margin-bottom:5px;color:#1A1630}
  .dm-m p{margin:0 0 12px;font-size:14px;line-height:1.5;color:#4B4660}
  .dm-card h3{font-size:22px}.dm-card p{font-size:14px;margin-bottom:14px}
  .dm-card .dm-btn{padding:10px 18px;font-size:14px}
  .dm-top{display:none}
  .dm-frame{border-radius:12px}
  .dm-beacon{right:-6px;top:-6px;width:14px;height:14px}
  .dm-hl{box-shadow:0 0 0 9999px rgba(24,18,70,.5)}
}
@media (prefers-reduced-motion:reduce){.dm-hl,.dm-tip,.dm-zoom{transition:none}.dm-beacon::after{animation:none}}
@media (max-width:720px){
  .dm-card{position:static;inset:auto;background:#F6F4FF;padding:28px 18px;backdrop-filter:none;-webkit-backdrop-filter:none}
  .dm.card-on .dm-stage{display:none}
}
.dm-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
@media (max-width:720px){.dm-cta .dm-btn{font-size:14px;padding:10px 16px}}