/* PACI EXPANDED ILLUSTRATIONS v1 (NEW, built in the paci.ai language: line-mesh, lavender glass, ink UI chips, purple accents).
   Pure CSS/SVG, each with a quiet loop + hover. All respect prefers-reduced-motion via paci.css rule set below. */
.il{position:relative;border-radius:12px;background:var(--bg3);overflow:hidden;isolation:isolate}
.il svg{display:block;width:100%;height:100%}
.il .ln{fill:none;stroke:rgba(95,76,224,.22);stroke-width:1}
.il .ink{fill:var(--ink)}.il .pur{fill:var(--purple)}.il .lav{fill:#EEE9FD}.il .wht{fill:#fff}

/* 1. mesh rings (paci.ai line-art, animated draw + slow breathing) */
.il-rings circle{fill:none;stroke:rgba(95,76,224,.18);stroke-width:1;transform-origin:50% 50%;animation:ringB 8s var(--ease) infinite}
.il-rings circle:nth-child(2n){animation-delay:-2s}.il-rings circle:nth-child(3n){animation-delay:-4s}
@keyframes ringB{50%{transform:scale(1.04);stroke:rgba(95,76,224,.32)}}

/* 2. VAT return card: progress bar fills, stamp pops */
.il-vat .card{position:absolute;left:12%;right:12%;top:18%;padding:18px;border-radius:10px;background:#fff;box-shadow:0 20px 40px -24px rgba(18,16,39,.35)}
.il-vat .bar{height:8px;border-radius:99px;background:#EEF0F7;overflow:hidden;margin:12px 0}
.il-vat .bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#8C7BFF,var(--purple));animation:fill 4s var(--ease) infinite}
@keyframes fill{0%{width:0}60%,100%{width:100%}}
.il-vat .row{display:flex;justify-content:space-between;font:400 12px/18px var(--b);color:var(--ink-70);padding:6px 0;border-top:1px solid #F1F1F5}
.il-vat .stamp{position:absolute;right:14px;top:-14px;padding:6px 10px;border-radius:6px;background:var(--green);color:#fff;font:600 11px/14px var(--b);transform:rotate(8deg) scale(0);animation:stamp 4s var(--spring) infinite}
@keyframes stamp{0%,55%{transform:rotate(8deg) scale(0)}65%,100%{transform:rotate(8deg) scale(1)}}

/* 3. deadline countdown ring */
.il-count{display:grid;place-items:center}
.il-count .ring{position:relative;width:180px;height:180px}
.il-count svg circle{fill:none;stroke-width:10}
.il-count .bg{stroke:#ECE9FB}.il-count .fg{stroke:var(--purple);stroke-linecap:round;stroke-dasharray:502;stroke-dashoffset:502;transform:rotate(-90deg);transform-origin:50% 50%;animation:cd 6s var(--ease) infinite}
@keyframes cd{0%{stroke-dashoffset:502}70%,100%{stroke-dashoffset:120}}
.il-count .n{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font:400 40px/1 var(--h);color:var(--ink)}
.il-count .n small{display:block;font:500 12px/16px var(--b);color:var(--ink-70);margin-top:6px}

/* 4. receipt stream: receipts fall into a ledger */
.il-receipts .rc{position:absolute;width:92px;padding:10px;border-radius:6px;background:#fff;box-shadow:0 10px 24px -14px rgba(18,16,39,.35);font:500 10px/14px var(--b);color:var(--ink);animation:drop 5s var(--ease) infinite;opacity:0}
.il-receipts .rc b{display:block;font-size:13px;margin-top:4px}
.il-receipts .rc:nth-child(2){animation-delay:1.6s}.il-receipts .rc:nth-child(3){animation-delay:3.2s}
@keyframes drop{0%{opacity:0;transform:translateY(-40px) rotate(-8deg)}15%{opacity:1}55%{opacity:1;transform:translateY(80px) rotate(4deg)}70%,100%{opacity:0;transform:translateY(120px) scale(.8)}}
.il-receipts .ledger{position:absolute;left:10%;right:10%;bottom:12%;padding:14px;border-radius:10px;background:var(--ink);color:#fff;font:400 12px/18px var(--b)}
.il-receipts .ledger em{float:right;font-style:normal;color:#9CF2B8}

/* 5. bank reconciliation: two columns match with connecting lines */
.il-recon .col{position:absolute;top:16%;width:38%;display:grid;gap:8px}
.il-recon .col span{padding:8px 10px;border-radius:6px;background:#fff;font:500 11px/14px var(--b);box-shadow:0 6px 16px -12px rgba(18,16,39,.4)}
.il-recon .l{left:6%}.il-recon .r{right:6%}
.il-recon path{fill:none;stroke:var(--purple);stroke-width:1.5;stroke-dasharray:6 4;animation:dash 2.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-20}}
.il-recon .ok{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);padding:8px 14px;border-radius:99px;background:#E7F8EE;color:#127A3E;font:600 12px/16px var(--b)}

/* 6. growth bars + line (management reports) */
.il-bars .b{position:absolute;bottom:18%;width:9%;border-radius:4px 4px 0 0;background:linear-gradient(#B9AEFF,#EEE9FD);transform-origin:bottom;animation:grow 3.6s var(--ease) infinite alternate}
@keyframes grow{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.il-bars svg{position:absolute;inset:0}
.il-bars .line{fill:none;stroke:var(--purple);stroke-width:2.5;stroke-dasharray:600;stroke-dashoffset:600;animation:draw 3.6s var(--ease) infinite alternate}
@keyframes draw{to{stroke-dashoffset:0}}

/* 7. shield + check (compliance) */
.il-shield{display:grid;place-items:center}
.il-shield svg{width:150px;height:170px}
.il-shield .sh{fill:#fff;stroke:var(--purple);stroke-width:2}
.il-shield .ck{fill:none;stroke:var(--purple);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:80;stroke-dashoffset:80;animation:ck 3s var(--ease) infinite}
@keyframes ck{0%,20%{stroke-dashoffset:80}50%,100%{stroke-dashoffset:0}}
.il-shield .pulse{position:absolute;width:200px;height:200px;border-radius:50%;border:1px solid rgba(95,76,224,.3);animation:ping 3s var(--ease) infinite}

/* 8. payroll WPS: avatars to bank */
.il-wps .av{position:absolute;left:10%;width:42px;height:42px;border-radius:50%;background:#DDD7FF center/cover;box-shadow:0 0 0 3px #fff}
.il-wps .bank{position:absolute;right:10%;top:50%;width:70px;height:70px;margin-top:-35px;border-radius:14px;background:var(--ink);display:grid;place-items:center;color:#fff;font:600 11px var(--b)}
.il-wps .coin{position:absolute;left:22%;width:14px;height:14px;border-radius:50%;background:#FFC85C;box-shadow:0 0 0 3px #FFF1CC;animation:pay 3s var(--ease) infinite}
@keyframes pay{0%{transform:translateX(0);opacity:0}10%{opacity:1}80%{opacity:1}100%{transform:translateX(min(48vw,240px));opacity:0}}

/* 9. UAE map pins (Dubai, Abu Dhabi, Sharjah, free zones) */
.il-map .pin{position:absolute;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--purple);box-shadow:0 0 0 4px rgba(95,76,224,.2)}
.il-map .pin::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(95,76,224,.5);animation:ping 2.6s var(--ease) infinite}
.il-map .pin:nth-child(2n)::after{animation-delay:-1.3s}
.il-map .lbl{position:absolute;padding:4px 8px;border-radius:6px;background:#fff;font:500 11px/14px var(--b);box-shadow:0 6px 14px -10px rgba(18,16,39,.4);transform:translate(10px,-24px)}

/* 10. document scanner (AI reads invoice) */
.il-scan .doc{position:absolute;left:24%;right:24%;top:12%;bottom:12%;border-radius:8px;background:#fff;box-shadow:0 20px 40px -24px rgba(18,16,39,.4);padding:16px}
.il-scan .doc i{display:block;height:6px;border-radius:3px;background:#EEF0F7;margin:8px 0}.il-scan .doc i:nth-child(2n){width:70%}
.il-scan .beam{position:absolute;left:20%;right:20%;height:30px;background:linear-gradient(rgba(95,76,224,0),rgba(95,76,224,.25),rgba(95,76,224,0));border-bottom:2px solid var(--purple);animation:scanB 3s ease-in-out infinite alternate}
@keyframes scanB{from{top:12%}to{top:78%}}
.il-scan .tagx{position:absolute;right:10%;padding:6px 10px;border-radius:6px;background:var(--ink);color:#fff;font:500 11px/14px var(--b);opacity:0;animation:tagIn 6s var(--ease) infinite}
.il-scan .tagx:nth-of-type(2){animation-delay:2s}.il-scan .tagx:nth-of-type(3){animation-delay:4s}
@keyframes tagIn{0%,5%{opacity:0;transform:translateX(10px)}15%,30%{opacity:1;transform:none}40%,100%{opacity:0}}

/* 11. calendar flip (deadlines) */
.il-cal .page{position:absolute;left:50%;top:50%;width:150px;height:160px;margin:-80px -75px;border-radius:12px;background:#fff;box-shadow:0 24px 50px -28px rgba(18,16,39,.45);text-align:center;overflow:hidden}
.il-cal .page .top{height:40px;background:var(--purple);color:#fff;font:600 13px/40px var(--b);letter-spacing:.06em}
.il-cal .page b{display:block;font:400 64px/100px var(--h);color:var(--ink);animation:flip 4s var(--ease) infinite}
@keyframes flip{0%,40%{transform:rotateX(0)}50%{transform:rotateX(90deg)}60%,100%{transform:rotateX(0)}}

/* 12. chat bubbles typing (support) */
.il-chat .bb{position:absolute;max-width:62%;padding:10px 12px;border-radius:12px;font:400 12px/17px var(--b);opacity:0;animation:bub 7s var(--ease) infinite}
.il-chat .me{right:8%;background:var(--ink);color:#fff;border-bottom-right-radius:3px}
.il-chat .them{left:8%;background:#fff;color:var(--ink);border-bottom-left-radius:3px;box-shadow:0 8px 20px -14px rgba(18,16,39,.4)}
.il-chat .bb:nth-child(2){animation-delay:1.4s}.il-chat .bb:nth-child(3){animation-delay:2.8s}
@keyframes bub{0%,4%{opacity:0;transform:translateY(10px) scale(.96)}10%,80%{opacity:1;transform:none}90%,100%{opacity:0}}

/* hover lift for any illustration tile */
.il:hover .card,.il:hover .doc,.il:hover .page{transform:translateY(-4px);transition:transform .5s var(--ease)}
@media (prefers-reduced-motion:reduce){.il *{animation:none!important}}