/* Dubai CRM card illustrations */
.dx-a,.dx-b,.dx-c,.dx-d,.dx-e,.dx-f{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#0F172A;line-height:1.2}
.dx-a i,.dx-a em,.dx-a u,.dx-b i,.dx-c span,.dx-d span,.dx-e i,.dx-e b{font-style:normal;text-decoration:none}
.dx-a,.dx-b{gap:10px}
/* 1 conveyor */
.dx-a-src{display:flex;flex-direction:column;gap:6px}
.dx-a-src i{background:#fff;box-shadow:0 0 0 1px #E7E2D8;border-radius:8px;padding:4px 8px;font-size:10.5px;color:#475569;white-space:nowrap}
.dx-a-belt{position:relative;width:64px;height:78px;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(217,119,6,.18) 6px 8px);background-size:16px 2px;background-repeat:repeat-x;background-position:0 50%;animation:dxk-belt 1.2s linear infinite}
.dx-a-m{position:absolute;left:0;top:calc(50% - 6px);width:16px;height:12px;border-radius:3px;background:var(--sx-a);transform:translate(48px,0);animation:dxk-env 4.2s cubic-bezier(.45,0,.3,1) var(--d) infinite}
.dx-a-m:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 50%,var(--sx-a2) 50%);border-radius:3px;clip-path:polygon(0 0,100% 0,50% 60%)}
.dx-a-card{position:relative;background:#fff;box-shadow:0 0 0 1px #E7E2D8,0 6px 14px -8px rgba(15,23,42,.2);border-radius:12px;padding:8px 10px;width:96px;display:flex;flex-direction:column;gap:5px}
.dx-a-card em{font-style:normal;font-size:11px}
.dx-a-card s{height:4px;border-radius:3px;background:#EDE9DF;width:80%}
.dx-a-card s+s{width:55%}
.dx-a-card u{align-self:flex-start;background:#DCFCE7;color:#166534;border-radius:6px;padding:2px 6px;font-size:10px;animation:dxk-logged 4.2s ease-in-out infinite}
.dx-a-ring{position:absolute;inset:0;border-radius:12px;box-shadow:0 0 0 2px var(--sx-a);opacity:0;animation:dxk-ring 1.4s ease-out infinite}
@keyframes dxk-belt{to{background-position:16px 50%}}
@keyframes dxk-env{0%{transform:translate(0,var(--y)) scale(.6);opacity:0}15%{opacity:1;transform:translate(0,var(--y)) scale(1)}70%{transform:translate(48px,0) scale(1);opacity:1}85%,100%{transform:translate(52px,0) scale(.4);opacity:0}}
@keyframes dxk-logged{0%,60%{transform:scale(1)}70%{transform:scale(1.15)}80%,100%{transform:scale(1)}}
@keyframes dxk-ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}
/* 2 odometer */
.dx-b-rec{position:relative;background:#fff;box-shadow:0 0 0 1px #E7E2D8,0 6px 14px -8px rgba(15,23,42,.2);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.dx-b-sc{background:var(--sx-t);color:#92400E;border-radius:6px;padding:2px 7px;font-size:10px}
.dx-b-p{display:flex;align-items:center;font-size:13px;gap:3px;white-space:nowrap}
.dx-b-d{display:inline-block;height:17px;overflow:hidden;width:8px}
.dx-b-d>span{display:flex;flex-direction:column;animation:dxk-roll 5s cubic-bezier(.65,0,.25,1) infinite}
.dx-b-d+.dx-b-d>span,.dx-b-d~.dx-b-d>span{animation-delay:.25s}
.dx-b-d b{height:17px;line-height:17px;font-weight:700}
.dx-b-r1,.dx-b-r2{position:absolute;right:-1px;top:50%;width:14px;height:14px;margin:-7px -7px 0 0;border-radius:50%;box-shadow:0 0 0 2px var(--sx-a);opacity:0;animation:dxk-sonar 2.5s ease-out 1.1s infinite}
.dx-b-r2{animation-delay:1.8s}
.dx-b-ln{width:28px;height:2px;background:linear-gradient(90deg,var(--sx-a),var(--sx-a2));border-radius:2px;opacity:.7}
.dx-b-tg{display:flex;flex-direction:column;gap:5px}
.dx-b-tg i{background:#fff;box-shadow:0 0 0 1px #E7E2D8;border-radius:8px;padding:4px 8px;font-size:10.5px;color:#475569;animation:dxk-tag 5s ease-in-out infinite;animation-delay:calc(1.2s + var(--i)*.25s);white-space:nowrap}
@keyframes dxk-roll{0%,12%{transform:translateY(0)}38%,60%{transform:translateY(-51px)}86%,100%{transform:translateY(-51px)}}
@keyframes dxk-sonar{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(5)}}
@keyframes dxk-tag{0%,18%{background:#fff;color:#475569;transform:scale(1)}24%{background:#DCFCE7;color:#166534;transform:scale(1.08)}30%,70%{background:#DCFCE7;color:#166534;transform:scale(1)}80%,100%{background:#fff;color:#475569;transform:scale(1)}}
/* 3 typewriter */
.dx-c{flex-direction:column;gap:7px;width:200px;align-items:stretch}
.dx-c-st{position:relative;height:20px;align-self:center;min-width:92px}
.dx-c-st span{position:absolute;inset:0;display:grid;place-items:center;border-radius:10px;font-size:10.5px}
.dx-c-st span:first-child{background:#FEE2E2;color:#991B1B;animation:dxk-s1 6s steps(1) infinite}
.dx-c-st span:last-child{background:#DCFCE7;color:#166534;animation:dxk-s2 6s steps(1) infinite;opacity:0}
.dx-c-in{align-self:flex-start;background:#fff;box-shadow:0 0 0 1px #E7E2D8;border-radius:12px 12px 12px 4px;padding:7px 10px}
.dx-c-in span{display:inline-block;white-space:nowrap;clip-path:inset(0 0 0 0);border-right:2px solid var(--sx-a);animation:dxk-type 6s steps(15) infinite}
.dx-c-out{align-self:flex-end;background:var(--sx-a);color:#fff;border-radius:12px 12px 4px 12px;padding:7px 10px;transform-origin:100% 100%;animation:dxk-pop 6s cubic-bezier(.3,1.5,.5,1) infinite}
@keyframes dxk-type{0%{clip-path:inset(0 100% 0 0)}35%,100%{clip-path:inset(0 0 0 0)}}
@keyframes dxk-pop{0%,45%{transform:scale(0);opacity:0}52%{transform:scale(1);opacity:1}92%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}
@keyframes dxk-s1{0%,40%{opacity:1}41%,100%{opacity:0}}
@keyframes dxk-s2{0%,40%{opacity:0}41%,92%{opacity:1}93%,100%{opacity:0}}
/* 4 stamp */
.dx-d{gap:14px}
.dx-d-doc{position:relative;width:92px;height:112px;background:#fff;box-shadow:0 0 0 1px #E7E2D8,0 8px 16px -10px rgba(15,23,42,.25);border-radius:10px;padding:14px 12px;display:flex;flex-direction:column;gap:8px}
.dx-d-doc i{height:5px;border-radius:3px;background:#EDE9DF}
.dx-d-doc i:nth-child(2){width:70%}.dx-d-doc i:nth-child(4){width:50%}
.dx-d-st{position:absolute;right:6px;bottom:12px;border:2px solid var(--sx-b);color:var(--sx-b);border-radius:6px;padding:3px 7px;font-size:12px;font-weight:800;letter-spacing:.08em;transform:rotate(-10deg);animation:dxk-stamp 4.6s cubic-bezier(.4,0,.2,1) infinite}
.dx-d-w{position:relative;width:70px;height:30px;display:grid;place-items:center}
.dx-d-w svg{position:absolute;inset:0}
.dx-d-w span{position:relative;font-size:11px;color:#92400E}
.dx-d-dash{animation:dxk-march 1.4s linear infinite}
@keyframes dxk-stamp{0%,8%{transform:translateY(-70px) rotate(-10deg) scale(1.5);opacity:0}22%{transform:translateY(0) rotate(-10deg) scale(.88);opacity:1}28%{transform:translateY(-8px) rotate(-10deg) scale(1.03)}34%,82%{transform:translateY(0) rotate(-10deg) scale(1);opacity:1}94%,100%{transform:translateY(0) rotate(-10deg) scale(1);opacity:0}}
@keyframes dxk-march{to{stroke-dashoffset:-18}}
/* 5 liquid + peel */
.dx-e{gap:22px}
.dx-e-stack{position:relative;width:104px;height:92px}
.dx-e-stack i{position:absolute;left:0;top:0;width:96px;height:80px;background:#fff;box-shadow:0 0 0 1px #E7E2D8,0 6px 12px -8px rgba(15,23,42,.25);border-radius:10px;padding:8px 10px;font-size:10.5px;color:#475569;transform-origin:0 100%;animation:dxk-peel 4.8s cubic-bezier(.5,0,.3,1) infinite}
.dx-e-stack i:nth-child(1){z-index:1;transform:translate(8px,10px);animation-delay:-3.2s}
.dx-e-stack i:nth-child(2){z-index:2;transform:translate(4px,5px);animation-delay:-1.6s}
.dx-e-stack i:nth-child(3){z-index:3}
.dx-e-tank{position:relative;width:70px;height:92px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px #E7E2D8;overflow:hidden}
.dx-e-liq{position:absolute;left:0;right:0;bottom:0;height:100%;transform:translateY(75%);background:linear-gradient(var(--sx-a2),var(--sx-a));animation:dxk-fill 4.8s cubic-bezier(.5,0,.3,1) infinite}
.dx-e-liq span{position:absolute;left:-40px;top:-8px;width:160px;height:16px;border-radius:50%;background:var(--sx-a2);animation:dxk-wave 2.6s linear infinite}
.dx-e-liq span+span{top:-5px;opacity:.55;animation-duration:3.7s;animation-direction:reverse;background:#fff}
.dx-e-tank b{position:absolute;inset:auto 0 8px;text-align:center;font-size:10.5px;color:#fff;z-index:2;text-shadow:0 1px 2px rgba(146,64,14,.5)}
@keyframes dxk-peel{0%,50%{transform:translate(0,0) rotate(0)}74%{transform:translate(70px,-14px) rotate(14deg);opacity:0}75%{transform:translate(8px,10px);opacity:0}100%{transform:translate(8px,10px);opacity:1}}
@keyframes dxk-fill{0%{transform:translateY(90%)}60%,85%{transform:translateY(18%)}100%{transform:translateY(90%)}}
@keyframes dxk-wave{to{transform:translateX(40px)}}
/* 6 flip */
.dx-f{gap:16px;perspective:600px}
.dx-f-c{position:relative;width:108px;height:88px;transform-style:preserve-3d;animation:dxk-flip 5.6s cubic-bezier(.6,0,.25,1) infinite}
.dx-f-c2{animation-delay:-2.8s}
.dx-f-s{position:absolute;inset:0;background:#fff;box-shadow:0 0 0 1px #E7E2D8,0 8px 16px -10px rgba(15,23,42,.25);border-radius:12px;padding:11px 12px;display:flex;flex-direction:column;gap:7px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.dx-f-s u{text-decoration:none;align-self:flex-start;background:var(--sx-t);color:#92400E;border-radius:6px;padding:2px 7px;font-size:10.5px}
.dx-f-s i{height:5px;border-radius:3px;background:#EDE9DF;width:100%}
.dx-f-s i:nth-of-type(2){width:72%}.dx-f-s i:nth-of-type(3){width:48%}
.dx-f-bk{transform:rotateY(180deg)}
.dx-f-bk u{align-self:flex-end}
.dx-f-bk i{margin-left:auto}
@keyframes dxk-flip{0%,35%{transform:rotateY(0)}50%,85%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
@media (prefers-reduced-motion:reduce){
.dx-a-belt,.dx-a-m,.dx-a-card u,.dx-a-ring,.dx-b-d>span,.dx-b-r1,.dx-b-r2,.dx-b-tg i,.dx-c-st span,.dx-c-in span,.dx-c-out,.dx-d-st,.dx-d-dash,.dx-e-stack i,.dx-e-liq,.dx-e-liq span,.dx-f-c{animation:none!important}
.dx-c-st span:last-child{opacity:1}.dx-c-st span:first-child{opacity:0}
.dx-a-m{transform:translate(30px,0)}.dx-e-liq{transform:translateY(25%)}
.dx-b-d>span{transform:translateY(-51px)}
}