/* XASIS live service demos (home + services page) */
.demo{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3.1;background:var(--paper)}
.demo-note{position:absolute;right:14px;bottom:12px;font-size:13px;color:var(--muted);z-index:3}
/* demo 1: blueprint to finished page */
.bp{position:absolute;inset:6%;border-radius:12px;background:#fff;box-shadow:0 20px 40px -24px rgba(22,29,34,.35);overflow:hidden}
.bp-bar{height:34px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 14px;gap:14px;font-size:12px;color:var(--muted)}
.bp-bar b{font-weight:700;color:var(--ink);letter-spacing:-.04em;font-size:14px}
.bp svg{position:absolute;left:0;top:34px;width:100%;height:calc(100% - 34px)}
.bp svg *{fill:none;stroke:var(--orange);stroke-width:1.2;vector-effect:non-scaling-stroke}
.bp .shot{position:absolute;left:4%;right:4%;top:calc(34px + 6%);height:52%;border-radius:8px;overflow:hidden;clip-path:inset(0 100% 0 0)}
.bp .shot img{width:100%;height:100%;object-fit:cover}
.bp .copy{position:absolute;left:6%;bottom:9%;right:6%;opacity:0}
.bp .copy b{display:block;font:600 clamp(18px,2vw,28px)/1.05 var(--font);letter-spacing:-.04em;color:var(--ink)}
.bp .copy span{display:inline-block;margin-top:10px;background:var(--orange);color:#fff;font:600 12px/1 var(--font);padding:9px 14px;border-radius:99px}
/* demo 2: AI answer */
.ai{position:absolute;inset:7%;display:flex;flex-direction:column;gap:14px}
.ai-q{background:#fff;border:1px solid var(--line);border-radius:99px;padding:14px 20px;font-size:15px;color:var(--ink);min-height:50px}
.ai-q .caret{display:inline-block;width:1.5px;height:1em;background:var(--blue);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ai-a{position:relative;flex:1;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;overflow:hidden}
.ai-a p{font-size:14px;color:var(--muted);margin-bottom:12px}
.ai-list{position:relative;height:calc(3 * 64px + 2 * 10px)}
.ai-row{position:absolute;left:0;right:0;height:64px;border-radius:12px;background:var(--paper);display:flex;align-items:center;gap:14px;padding:0 16px;opacity:0}
.ai-row i{display:block;height:9px;border-radius:9px;background:#dcdedb}
.ai-row .n{font:600 13px/1 var(--font);color:var(--muted);width:16px}
.ai-row.you{background:#fff;color:var(--ink);font-weight:600;font-size:16px;box-shadow:0 0 0 1.5px var(--blue),0 12px 28px -14px rgba(22,29,34,.35)}
.ai-row.you .n{color:var(--blue)}
.ai-row.you em{font-style:normal;margin-left:auto;font-size:13px;color:var(--blue);font-weight:600}
/* demo 3: whatsapp chat */
.phone{position:absolute;left:50%;top:6%;bottom:-6%;width:min(62%,300px);transform:translateX(-50%);border-radius:36px;background:var(--ink);padding:10px}
.phone .scr{position:relative;height:100%;border-radius:28px;background:#efeae2;overflow:hidden;display:flex;flex-direction:column}
.phone .top{background:#fff;padding:14px 16px;font:600 14px/1.2 var(--font);color:var(--ink);border-bottom:1px solid var(--line)}
.phone .top small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:14px}
.msg{max-width:82%;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.35;color:var(--ink);opacity:0;transform:translateY(10px)}
.msg.them{align-self:flex-end;background:#d9fdd3;border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start;background:#fff;border-bottom-left-radius:4px}
.msg.typing{display:flex;gap:4px;padding:12px}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:#9aa3a8;animation:typ 1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes typ{50%{transform:translateY(-3px);opacity:.5}}
.handover{align-self:center;background:var(--ink);color:#fff;font:600 12px/1 var(--font);padding:9px 12px;border-radius:99px;opacity:0;transform:translateY(10px)}