/* ═══════════════════════════════════════════════════════════════════════
   Live product demos: real photography and aerial imagery, with product
   UI floating over it: glass panels, a real phone, proper type.
   Each demo is drawn on a fixed 1200×780 stage and scaled to its frame,
   so cursor paths, clicks and camera zooms land in the same place at
   every size.
   ═══════════════════════════════════════════════════════════════════════ */
.stage{position:absolute;left:0;top:0;width:1200px;height:780px;transform-origin:0 0;overflow:hidden}
.cam{position:absolute;left:0;top:0;width:1200px;height:780px;transform-origin:0 0;will-change:transform}
.cursor{position:absolute;left:0;top:0;z-index:90;width:28px;height:28px;pointer-events:none;will-change:transform;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.cursor svg{transition:transform .12s}
.cursor.down svg{transform:scale(.86)}
.cursor.hide{opacity:0}
.ripple{position:absolute;z-index:89;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:rgba(255,255,255,.55);pointer-events:none;animation:rip .55s ease-out forwards}
@keyframes rip{from{transform:scale(.3);opacity:.9}to{transform:scale(3);opacity:0}}
.pressed{transform:scale(.97)!important}
.caption{position:absolute;left:clamp(8px,1.6%,20px);bottom:clamp(8px,2.2%,22px);z-index:70;display:flex;align-items:center;gap:10px;max-width:min(80%,580px);padding:clamp(7px,1vw,11px) clamp(10px,1.4vw,16px) clamp(7px,1vw,11px) clamp(7px,1vw,10px);border-radius:14px;background:rgba(8,12,24,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);color:#fff;font:600 clamp(12px,1.3vw,16px)/1.35 "Space Grotesk",sans-serif;box-shadow:0 14px 34px rgba(0,0,0,.35);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.caption.on{opacity:1;transform:none}
.caption i{flex-shrink:0;width:clamp(20px,1.9vw,26px);height:clamp(20px,1.9vw,26px);border-radius:8px;background:linear-gradient(135deg,#9FD0FF,#5B9BF5 52%,#2D6BE0);color:#05080F;display:flex;align-items:center;justify-content:center;font:700 12px "JetBrains Mono",monospace;font-style:normal}

/* ── Shared ── */
.x-scene{position:absolute;inset:0;overflow:hidden;background:#0A0F1C;color:#EEF3FC;font-family:"Sora",system-ui,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased}
.x-scene img{display:block}
.x-glass{background:rgba(12,17,30,.62);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(255,255,255,.16);border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.1)}
.x-mark{width:28px;height:28px;border-radius:8px;flex-shrink:0}
.x-lbl{display:block;margin:18px 0 10px;font:700 11px "Space Grotesk",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#7C879C}
.x-sp{flex:1}
.x-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border:0;border-radius:14px;background:linear-gradient(135deg,#9FD0FF 0%,#5B9BF5 52%,#2D6BE0 100%);color:#05080F;font:700 15px "Space Grotesk",sans-serif;box-shadow:0 10px 26px rgba(45,107,224,.35);transition:transform .15s,filter .2s,background .3s}
.x-btn.x-sm{height:38px;padding:0 14px;font-size:13.5px;border-radius:11px}
.x-btn.x-block{width:100%;margin-top:14px}
.x-btn.x-green,.x-btn.done{background:linear-gradient(135deg,#34D399,#10B981);color:#03140C;box-shadow:0 10px 26px rgba(16,185,129,.35)}
.x-btn.x-ghost{background:rgba(255,255,255,.08);color:#E6ECF7;box-shadow:none;border:1px solid rgba(255,255,255,.14)}
.x-chip{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;background:rgba(8,12,24,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.18);color:#fff;font:600 13px "Sora",sans-serif}
.x-pill{padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:13px;font-weight:600;color:#C8D2E4}
.x-bar{position:relative;z-index:3;height:66px;display:flex;align-items:center;gap:12px;padding:0 22px;background:rgba(9,13,24,.92);border-bottom:1px solid rgba(255,255,255,.07)}
.x-bar-t b{display:block;font:700 17px "Space Grotesk",sans-serif;letter-spacing:-.01em}
.x-bar-t span{font-size:12.5px;color:#8A95AA}
.x-toast{position:absolute;z-index:40;left:50%;top:22px;display:flex;gap:12px;align-items:center;padding:13px 18px 13px 13px;border-radius:18px;background:rgba(12,17,30,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(52,211,153,.35);box-shadow:0 24px 60px rgba(0,0,0,.45);opacity:0;transform:translate(-50%,-16px);transition:all .5s cubic-bezier(.22,.8,.2,1)}
.x-toast.in{opacity:1;transform:translate(-50%,0)}
.x-toast>i{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(52,211,153,.18);color:#34D399}
.x-toast b{display:block;font-size:14.5px}.x-toast span{font-size:12.5px;color:#9AA5B9}

/* Phone */
.x-phone{position:absolute;z-index:30;width:292px;height:600px;padding:11px;border-radius:50px;background:linear-gradient(145deg,#2A2D34,#0C0D10);box-shadow:0 50px 100px rgba(0,0,0,.55),0 0 0 1.5px #3A3E47 inset,0 0 0 4px #121418}
.x-phone-in{position:relative;width:100%;height:100%;border-radius:40px;overflow:hidden;background:#fff;color:#0B1733}
.x-notch{position:absolute;left:50%;top:10px;z-index:5;width:96px;height:28px;margin-left:-48px;border-radius:20px;background:#000}

/* ── 1 · Proposal ── */
.x-prop .x-photo{position:absolute;left:0;top:0;width:790px;height:780px;overflow:hidden}
.x-prop .x-photo img{position:absolute;left:50%;top:0;height:100%;width:auto;transform:translateX(-50%)}
.x-photo .x-roofline{position:absolute;top:0;height:100%;left:50%;transform:translateX(-50%);width:calc(780px * 1408 / 768);overflow:visible;pointer-events:none}
.x-roofline polygon{fill:rgba(91,155,245,.16);stroke:#fff;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-dasharray:7 6;animation:rl 1.4s .4s both}
@keyframes rl{from{opacity:0}to{opacity:1}}
.x-tag{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;background:rgba(8,12,24,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);font:600 13.5px "Sora",sans-serif;color:#fff;opacity:0;transform:translateY(8px) scale(.96);transition:all .45s cubic-bezier(.22,.8,.2,1)}
.x-tag.in{opacity:1;transform:none}
.x-tag i{width:8px;height:8px;border-radius:50%;background:#5BF5B4;box-shadow:0 0 10px #5BF5B4}
.x-t1{left:130px;top:250px}.x-t2{left:430px;top:175px}
.x-chip-tl{left:22px;top:22px}
.x-sheet{position:absolute;right:22px;top:22px;bottom:22px;width:388px;padding:22px;border-radius:24px;background:#fff;color:#0B1733;box-shadow:0 40px 90px rgba(0,0,0,.4);display:flex;flex-direction:column}
.x-sheet-h{display:flex;align-items:center;gap:12px}
.x-sheet-h b{display:block;font:700 19px "Space Grotesk",sans-serif}.x-sheet-h span{font-size:12.5px;color:#6A7489}
.x-opt{display:flex;align-items:center;gap:12px;padding:11px;margin-bottom:9px;border-radius:16px;border:1.5px solid #E5EAF3;background:#fff;transition:all .3s}
.x-opt.sel{border-color:#2D6BE0;background:#F2F7FF;box-shadow:0 0 0 4px rgba(45,107,224,.12)}
.x-sw{width:52px;height:52px;border-radius:12px;flex-shrink:0;background-size:420%;background-position:78% 38%}
.x-opt-t{flex:1;min-width:0}
.x-opt-t b{display:block;font-size:14px}.x-opt-t span{font-size:12px;color:#6A7489}
.x-opt-p{font:700 15.5px "Space Grotesk",sans-serif}
.x-radio{width:20px;height:20px;border-radius:50%;border:2px solid #CBD3E1;flex-shrink:0;transition:all .25s}
.x-opt.sel .x-radio{border:6px solid #2D6BE0}
.x-lines{margin-top:8px}
.x-lines div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #EEF1F6;font-size:13px;color:#5A6479}
.x-total{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 auto}
.x-total span{font-size:13px;color:#6A7489;font-weight:600}
.x-total b{font:700 38px "Space Grotesk",sans-serif;letter-spacing:-.02em}
.x-ph-prop{left:250px;top:800px;transition:top .9s cubic-bezier(.22,.8,.2,1)}
.x-ph-prop.in{top:96px}
.x-sign-img{height:190px;overflow:hidden}.x-sign-img img{width:100%;height:100%;object-fit:cover}
.x-sign-b{padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.x-sign-n{font:700 19px "Space Grotesk",sans-serif}
.x-sign-p{font:700 30px "Space Grotesk",sans-serif;letter-spacing:-.02em}
.x-pad{position:relative;height:108px;margin:8px 0 10px;border-radius:14px;border:1.5px dashed #CBD3E1;background:#FAFBFD}
.x-pad svg{width:100%;height:100%}
.x-pad path{stroke-dasharray:720;stroke-dashoffset:720;transition:stroke-dashoffset 1.5s ease}
.x-pad.drawn path{stroke-dashoffset:0}
.x-pad small{position:absolute;left:12px;bottom:8px;font-size:11px;color:#98A1B3}

/* ── 2 · Visualizer ── */
.x-vz-c,.x-vz-before img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.x-vz-before{position:absolute;inset:0;clip-path:inset(0 50% 0 0);z-index:2}
.x-split{position:absolute;z-index:3;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 18px rgba(0,0,0,.35)}
.x-split i{position:absolute;left:50%;top:52%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 8px 20px rgba(0,0,0,.3)}
.x-split i::before,.x-split i::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-6px;border:6px solid transparent}
.x-split i::before{left:6px;border-right-color:#0B1733}.x-split i::after{right:6px;border-left-color:#0B1733}
.x-chip-l{left:22px;top:96px}.x-chip-r{right:22px;top:108px}
.x-vz-top{position:absolute;z-index:5;left:22px;top:22px;display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border-radius:16px}
.x-vz-top b{display:block;font:700 15px "Space Grotesk",sans-serif}.x-vz-top span{font-size:12px;color:#B8C2D4}
.x-dock{position:absolute;z-index:5;right:22px;top:22px;display:flex;align-items:center;gap:20px;padding:12px 12px 12px 18px;border-radius:22px}
.x-dock-sw{display:flex;gap:10px}
.x-swb{position:relative;width:46px;height:46px;border-radius:50%;border:0;padding:0;background:var(--c);box-shadow:0 0 0 2px rgba(255,255,255,.2);overflow:hidden;transition:box-shadow .25s,transform .2s}
.x-swb i{position:absolute;inset:0;background-size:520%;background-position:78% 38%;mix-blend-mode:luminosity;opacity:.5}
.x-swb.on{box-shadow:0 0 0 3px #0A0F1C,0 0 0 5px #fff}
.x-dock-n b{display:block;min-width:140px;font:700 16px "Space Grotesk",sans-serif}

/* ── 3 · Photos ── */
.x-ps-grid{position:absolute;left:20px;right:20px;top:86px;bottom:20px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:14px}
.x-ph{position:relative;margin:0;border-radius:18px;overflow:hidden;background:#141B2C;opacity:0;transform:translateY(24px) scale(.96);transition:all .6s cubic-bezier(.22,.8,.2,1)}
.x-ph.in{opacity:1;transform:none}
.x-ph img{width:100%;height:100%;object-fit:cover}
.x-ai{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(8,12,24,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);font-size:12px;font-weight:600;color:#fff;opacity:0;transform:translateY(6px);transition:all .35s}
.x-ai.in{opacity:1;transform:none}
.x-ai svg{color:#9FD0FF}
.x-detect{position:absolute;z-index:6;left:92px;top:160px;width:120px;height:96px;border:2px solid #FBBF24;border-radius:8px;box-shadow:0 0 24px rgba(251,191,36,.45);opacity:0;transform:scale(1.2);transition:all .4s}
.x-detect.in{opacity:1;transform:none}
.x-detect span{position:absolute;left:-2px;top:-26px;padding:3px 8px;border-radius:6px 6px 6px 0;background:#FBBF24;color:#1A1204;font:700 11.5px "Sora",sans-serif;white-space:nowrap}
.x-report{position:absolute;z-index:20;top:86px;right:20px;bottom:20px;width:410px;padding:22px;border-radius:22px;background:#fff;color:#0B1733;box-shadow:0 40px 90px rgba(0,0,0,.45);transform:translateX(460px);transition:transform .8s cubic-bezier(.22,.8,.2,1)}
.x-report.in{transform:none}
.x-rep-h{display:flex;gap:12px;align-items:center;padding-bottom:14px;border-bottom:1px solid #EEF1F6}
.x-rep-h b{display:block;font:700 17px "Space Grotesk",sans-serif}.x-rep-h span{font-size:12px;color:#6A7489}
.x-rep-g{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.x-rep-g img{width:100%;height:130px;object-fit:cover;border-radius:10px}
.x-rep-l i{display:block;height:9px;margin-top:12px;border-radius:5px;background:#EEF1F6}
.x-rep-f{position:absolute;left:22px;right:22px;bottom:22px;display:flex;align-items:center;gap:8px;padding:12px;border-radius:12px;background:#ECFDF5;color:#047857;font-size:13px;font-weight:700}

/* ── 4 · Storm & 5 · Canvassing (aerial) ── */
.x-map{background:#1B2230}
.x-sat{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.x-near{opacity:0;transition:opacity .7s}
.x-near.in{opacity:1}
.x-radar{position:absolute;inset:0;width:100%;height:100%;opacity:.7;filter:blur(6px) saturate(1.2);transition:opacity .8s}
.x-radar.dim{opacity:.28}
.x-hail{position:absolute;z-index:4;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 0 0 4px rgba(96,165,250,.5),0 8px 20px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.4);transition:all .4s cubic-bezier(.2,1.5,.4,1)}
.x-hail.in{opacity:1;transform:none}
.x-hail b{font:700 10.5px "Space Grotesk",sans-serif;color:#0B1733}
.x-near.in~.x-hail{opacity:0}
.x-ring{position:absolute;z-index:4;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2.5px solid #F87171;background:rgba(248,113,113,.18);opacity:0;transform:scale(.3);transition:all .35s cubic-bezier(.2,1.5,.4,1)}
.x-ring.in{opacity:1;transform:none;animation:ring 1.8s 1s infinite}
@keyframes ring{0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,.5)}50%{box-shadow:0 0 0 9px rgba(248,113,113,0)}}
.x-storm{position:absolute;z-index:6;right:22px;top:22px;width:330px;padding:18px;opacity:0;transform:translateX(30px);transition:all .6s cubic-bezier(.22,.8,.2,1)}
.x-storm.in{opacity:1;transform:none}
.x-storm-h{display:flex;gap:12px;align-items:center}
.x-storm-h>i{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(248,113,113,.2);color:#FCA5A5}
.x-storm-h b{display:block;font:700 16px "Space Grotesk",sans-serif}.x-storm-h span{font-size:12px;color:#B8C2D4}
.x-storm-k{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.x-storm-k div{padding:10px;border-radius:12px;background:rgba(255,255,255,.06)}
.x-storm-k span{display:block;font-size:11px;color:#98A3B8}.x-storm-k b{font:700 17px "Space Grotesk",sans-serif}
.x-legend{position:absolute;z-index:5;left:22px;top:22px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;font-size:12.5px;font-weight:600}
.x-legend i{width:120px;height:8px;border-radius:4px}
.x-route{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
.x-route polyline{fill:none;stroke:#5B9BF5;stroke-width:3.5;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-dasharray:2600;stroke-dashoffset:2600;filter:drop-shadow(0 0 6px rgba(91,155,245,.9))}
.x-route.in polyline{transition:stroke-dashoffset 2.2s ease;stroke-dashoffset:0}
.x-pin{position:absolute;z-index:4;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.5);opacity:0;transform:scale(.3) translateY(-10px);transition:all .4s cubic-bezier(.2,1.5,.4,1)}
.x-pin::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#94A3B8;transition:background .3s}
.x-pin.in{opacity:1;transform:none}
.x-pin.s::after{background:#94A3B8}.x-pin.a::after{background:#F59E0B}.x-pin.g::after{background:#10B981}
.x-pin.g{box-shadow:0 0 0 5px rgba(16,185,129,.35),0 4px 12px rgba(0,0,0,.5)}
.x-me{position:absolute;z-index:5;left:16%;top:49.6%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:#2D6BE0;border:3px solid #fff;box-shadow:0 0 0 8px rgba(45,107,224,.25);opacity:0;transition:opacity .4s}
.x-me.in{opacity:1;animation:walk 14s linear forwards}
@keyframes walk{to{left:48%}}
.x-cnt{position:absolute;z-index:6;left:22px;top:22px;display:flex;gap:12px;align-items:center;padding:12px 18px 12px 12px;border-radius:18px}
.x-cnt-n{display:flex;align-items:baseline;gap:6px;margin-top:3px}
.x-cnt-n b{font:700 22px "Space Grotesk",sans-serif}.x-cnt-n b.g{color:#34D399}.x-cnt-n b.a{color:#FBBF24}
.x-cnt-n span{font-size:12px;color:#B8C2D4;margin-right:8px}
.x-knock{position:absolute;z-index:8;left:50%;bottom:22px;width:470px;margin-left:-235px;padding:16px;opacity:0;transform:translateY(40px);transition:all .5s cubic-bezier(.22,.8,.2,1)}
.x-knock.in{opacity:1;transform:none}
.x-knock-h{display:flex;gap:12px;align-items:center}
.x-knock-h img{width:64px;height:64px;border-radius:14px;object-fit:cover}
.x-knock-h b{display:block;font:700 16px "Space Grotesk",sans-serif}.x-knock-h span{font-size:12px;color:#B8C2D4}
.x-knock-o{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:8px;margin-top:14px}
.x-knock-o button{height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#E6ECF7;font:600 13px "Sora",sans-serif}
.x-knock-o button.g{background:rgba(16,185,129,.2);border-color:rgba(52,211,153,.5);color:#6EE7B7}

/* ── 6 · Pipeline ── */
.x-pl{background:#080C17}
.x-kpi{padding:0 16px;border-left:1px solid rgba(255,255,255,.08)}
.x-kpi span{display:block;font-size:11px;color:#8A95AA;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.x-kpi b{font:700 20px "Space Grotesk",sans-serif}.x-kpi b.a{color:#FBBF24}
.x-cols{position:absolute;left:20px;right:20px;top:86px;bottom:20px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.x-col{border-radius:20px;background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.05);padding:12px;display:flex;flex-direction:column;gap:12px;transition:background .3s,box-shadow .3s}
.x-col.hot{background:rgba(91,155,245,.09);box-shadow:inset 0 0 0 1.5px rgba(91,155,245,.5)}
.x-col-h{display:flex;align-items:center;gap:8px;padding:4px 4px 2px}
.x-col-h i{width:9px;height:9px;border-radius:50%}
.x-col-h b{font:700 14px "Space Grotesk",sans-serif}
.x-col-h span{padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.07);font-size:12px;color:#B8C2D4}
.x-col-h em{margin-left:auto;font-style:normal;font:700 13px "Space Grotesk",sans-serif;color:#8A95AA}
.x-deal{border-radius:16px;overflow:hidden;background:#111829;border:1px solid rgba(255,255,255,.07);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.x-deal-img{height:112px;overflow:hidden}.x-deal-img img{width:100%;height:100%;object-fit:cover}
.x-deal-b{padding:11px 12px 12px}
.x-deal-b>b{display:block;font-size:14px}.x-deal-b>span{font-size:12px;color:#8A95AA}
.x-deal-f{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.x-deal-f b{font:700 16px "Space Grotesk",sans-serif}
.x-deal-f i{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#9FD0FF,#2D6BE0);font:700 10px "Sora",sans-serif;font-style:normal;color:#05080F}
.x-deal.lift{position:absolute;z-index:50;transform:rotate(2.5deg) scale(1.04);box-shadow:0 40px 80px rgba(0,0,0,.6);transition:left 1s cubic-bezier(.22,.8,.2,1),top 1s cubic-bezier(.22,.8,.2,1)}
.x-ghost{border-radius:16px;border:2px dashed rgba(91,155,245,.45)}

/* ── 7 · Agents ── */
.x-ag-bg{position:absolute;inset:0}
.x-ag-bg img{width:100%;height:100%;object-fit:cover;filter:blur(3px) brightness(.45) saturate(1.1);transform:scale(1.05)}
.x-ph-ag{left:70px;top:90px}
.x-sms-h{padding:48px 16px 12px;text-align:center;border-bottom:1px solid #EEF1F6;background:#F7F8FA}
.x-sms-h i{display:flex;align-items:center;justify-content:center;width:42px;height:42px;margin:0 auto 6px;border-radius:50%;background:linear-gradient(135deg,#A7B0C0,#6B7489);color:#fff;font:700 14px "Sora",sans-serif;font-style:normal}
.x-sms-h b{display:block;font-size:14px}.x-sms-h span{font-size:11px;color:#8A94A6}
.x-sms{display:flex;flex-direction:column;gap:8px;padding:14px}
.x-b{max-width:82%;padding:9px 13px;border-radius:18px;font-size:13px;line-height:1.4;opacity:0;transform:translateY(10px) scale(.96);transition:all .4s cubic-bezier(.22,.8,.2,1);align-self:flex-start;background:#E9EAEE;color:#0B1733;border-bottom-left-radius:6px}
.x-b.in{opacity:1;transform:none}
.x-b.out{align-self:flex-end;background:#2D7FF9;color:#fff;border-bottom-left-radius:18px;border-bottom-right-radius:6px}
.x-leon{position:absolute;left:430px;top:90px;width:700px;padding:22px}
.x-leon-h{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.x-leon-h>i{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#D97706,#FCD34D);font:800 16px "Space Grotesk",sans-serif;font-style:normal;color:#2B1B00}
.x-leon-h b{display:block;font:700 17px "Space Grotesk",sans-serif}.x-leon-h span{font-size:12.5px;color:#B8C2D4}
.x-leon-h em{margin-left:auto;padding:5px 11px;border-radius:999px;background:rgba(52,211,153,.16);color:#34D399;font-style:normal;font-size:12px;font-weight:700}
.x-log div{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.06);font-size:14.5px;opacity:0;transform:translateX(14px);transition:all .45s cubic-bezier(.22,.8,.2,1)}
.x-log div.in{opacity:1;transform:none}
.x-log i{width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(91,155,245,.16);color:#9FD0FF}
.x-appr{margin-top:0;max-height:0;overflow:hidden;padding:0 16px;border-radius:16px;background:rgba(245,158,11,.1);border:1px solid transparent;opacity:0;transform:translateY(12px);transition:all .5s}
.x-appr.in{margin-top:16px;max-height:200px;padding:16px;border-color:rgba(245,158,11,.35);opacity:1;transform:none}
.x-appr b{display:block;font-size:15px}.x-appr span{font-size:12.5px;color:#C9B38A}
.x-appr div{display:flex;gap:8px;margin-top:12px}
.x-event{position:absolute;z-index:6;left:430px;bottom:40px;display:flex;align-items:center;gap:12px;padding:14px 18px 14px 14px;opacity:0;transform:translateY(20px);transition:all .5s cubic-bezier(.22,.8,.2,1)}
.x-event.in{opacity:1;transform:none}
.x-event>i{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(91,155,245,.2);color:#9FD0FF}
.x-event b{display:block;font-size:14.5px}.x-event span{font-size:12.5px;color:#B8C2D4}