/* CRM & Leads graphics — extends ai-receptionist-graphics.css primitives (.rcg .card/.k/.pill/.chk/.av/.orb/.bub/.wave/.dots/.spark) */
.rcg .fld{display:grid;gap:5px}.rcg .fld .k{font-size:11px}.rcg .fld .v{font-size:19px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.rcg .tag{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:8px;background:rgba(59,124,255,.16);color:#9dbcff;font-size:14px;font-weight:600;white-space:nowrap}
.rcg .tag.g{background:rgba(47,143,99,.2);color:#5fcf8f}.rcg .tag.y{background:rgba(217,147,35,.18);color:#f0b81f}
.rcg .name{font-size:22px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}.rcg .sub{font-size:15px;color:var(--mute);margin-top:3px;white-space:nowrap}
.rcg .bolt{width:34px;height:34px;border-radius:10px;background:var(--blue);display:grid;place-items:center;flex:none}.rcg .bolt svg{width:18px;height:18px;color:#fff}
/* C1 — built for wrap shops */
.rcg .c1 .lead{left:60px;top:56px;width:680px;padding:26px 28px 28px}
.rcg .c1 .hd{display:flex;align-items:center;gap:16px}.rcg .c1 .hd .pill{margin-left:auto}
.rcg .c1 .grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.rcg .c1 .f{opacity:0;transform:translateY(8px)}.rcg .c1 .f1{animation:c1f 9s ease-out infinite}.rcg .c1 .f2{animation:c1f2 9s ease-out infinite}.rcg .c1 .f3{animation:c1f3 9s ease-out infinite}.rcg .c1 .f4{animation:c1f4 9s ease-out infinite}
.rcg .c1 .chips{display:flex;gap:8px;flex-wrap:wrap}
.rcg .c1 .stages{left:60px;top:404px;width:680px;padding:24px 28px 26px;display:flex;align-items:center;gap:24px}.rcg .c1 .stages .k{flex:none;width:96px}
.rcg .c1 .st{display:grid;grid-template-columns:repeat(4,1fr);flex:1;position:relative}
.rcg .c1 .st::before{content:"";position:absolute;left:12.5%;right:12.5%;top:9px;height:2px;background:#2a2f3a}
.rcg .c1 .bar{position:absolute;left:12.5%;top:9px;height:2px;width:0;background:linear-gradient(90deg,var(--blue),#f0b81f 50%,#5fcf8f);background-size:0 100%;animation:c1bar 9s linear infinite}
.rcg .c1 .s{display:grid;justify-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--mute);position:relative}
.rcg .c1 .s i{width:20px;height:20px;border-radius:50%;background:#2a2f3a;border:3px solid var(--card);box-sizing:border-box}
.rcg .c1 .s.on i{background:var(--blue)}.rcg .c1 .s.on{color:#e6e8ec}
.rcg .c1 .s2 i{animation:c1d2 9s linear infinite}.rcg .c1 .s2{animation:c1t2 9s linear infinite}.rcg .c1 .s3 i{animation:c1d3 9s linear infinite}.rcg .c1 .s3{animation:c1t3 9s linear infinite}.rcg .c1 .s4 i{animation:c1d4 9s linear infinite}.rcg .c1 .s4{animation:c1t4 9s linear infinite}
@keyframes c1f{0%,6%{opacity:0;transform:translateY(8px)}12%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes c1f2{0%,12%{opacity:0;transform:translateY(8px)}18%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes c1f3{0%,18%{opacity:0;transform:translateY(8px)}24%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes c1f4{0%,24%{opacity:0;transform:translateY(8px)}30%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes c1bar{0%,30%{width:0}42%,48%{width:33.34%}60%,66%{width:66.67%}78%,94%{width:75%}100%{width:75%}}
@keyframes c1d2{0%,41%{background:#2a2f3a}43%,96%{background:#f0b81f}100%{background:#2a2f3a}}
@keyframes c1t2{0%,41%{color:var(--mute)}43%,96%{color:#e6e8ec}100%{color:var(--mute)}}
@keyframes c1d3{0%,59%{background:#2a2f3a}61%,96%{background:#5fcf8f}100%{background:#2a2f3a}}
@keyframes c1t3{0%,59%{color:var(--mute)}61%,96%{color:#e6e8ec}100%{color:var(--mute)}}
@keyframes c1d4{0%,77%{background:#2a2f3a}79%,96%{background:#5fcf8f}100%{background:#2a2f3a}}
@keyframes c1t4{0%,77%{color:var(--mute)}79%,96%{color:#e6e8ec}100%{color:var(--mute)}}
/* C2 — call to CRM */
.rcg .c2 .call{left:60px;top:56px;width:520px;padding:18px 20px;display:flex;align-items:center;gap:16px}
.rcg .c2 .call .wave{margin-left:auto;animation:c2wv 7s linear infinite}
.rcg .c2 .call .sub{position:relative}.rcg .c2 .call .sub span{position:absolute;left:0;top:0;white-space:nowrap}.rcg .c2 .live{animation:c2live 7s linear infinite}.rcg .c2 .ended{opacity:0;animation:c2end 7s linear infinite}
.rcg .c2 .ended b{color:#5fcf8f;font-weight:600}
.rcg .c2 .orb{left:648px;top:50px;width:92px;height:92px}
.rcg .c2 .lead{left:60px;top:190px;width:680px;padding:24px 28px 12px}
.rcg .c2 .row{display:flex;align-items:center;gap:16px;height:66px;border-top:1px solid var(--line);opacity:0}.rcg .c2 .row:first-of-type{border-top:0}
.rcg .c2 .row .k{width:96px;flex:none}.rcg .c2 .row .t{font-size:21px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}.rcg .c2 .row .chk{margin-left:auto;width:30px;height:30px}
.rcg .c2 .r1{animation:c2r1 7s ease-out infinite}.rcg .c2 .r2{animation:c2r2 7s ease-out infinite}.rcg .c2 .r3{animation:c2r3 7s ease-out infinite}.rcg .c2 .r4{animation:c2r4 7s ease-out infinite}
.rcg .c2 .auto{left:60px;top:494px;width:680px;padding:18px 24px;display:flex;align-items:center;gap:16px;opacity:0;animation:c2auto 7s cubic-bezier(.2,.8,.2,1) infinite}
.rcg .c2 .auto .t{font-size:20px;font-weight:700;white-space:nowrap}.rcg .c2 .auto .s{font-size:15px;color:var(--mute);margin-top:2px;white-space:nowrap}.rcg .c2 .auto .tag{margin-left:auto}
@keyframes c2wv{0%,26%{opacity:1}30%,100%{opacity:0}}
@keyframes c2live{0%,26%{opacity:1}30%,100%{opacity:0}}
@keyframes c2end{0%,28%{opacity:0}32%,94%{opacity:1}100%{opacity:0}}
@keyframes c2r1{0%,34%{opacity:0;transform:translateY(8px)}40%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes c2r2{0%,42%{opacity:0;transform:translateY(8px)}48%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes c2r3{0%,50%{opacity:0;transform:translateY(8px)}56%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes c2r4{0%,58%{opacity:0;transform:translateY(8px)}64%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes c2auto{0%,70%{opacity:0;transform:translateY(24px) scale(.97)}78%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
/* C3 — automate lead interactions */
.rcg .c3 .q{left:60px;top:56px;display:flex;gap:16px;align-items:flex-start;animation:c3a 8s ease-out infinite}
.rcg .c3 .q .bub{position:relative;width:440px}
.rcg .c3 .typing{position:absolute;left:230px;top:200px;width:110px;height:64px;border-radius:20px;border-top-right-radius:6px;background:var(--blue);display:grid;place-items:center;animation:c3t 8s linear infinite}
.rcg .c3 .a{left:230px;top:200px;width:470px;animation:c3b 8s ease-out infinite;padding-top:40px}
.rcg .c3 .a .tag{position:absolute;left:22px;top:12px;height:24px;font-size:12px;background:rgba(255,255,255,.18);color:#fff;padding:0 9px}
.rcg .c3 .orb{left:722px;top:206px;width:56px;height:56px}
.rcg .c3 .acts{position:absolute;left:230px;top:352px;display:flex;gap:10px;animation:c3acts 8s ease-out infinite}
.rcg .c3 .acts .pill{height:38px;font-size:15px}.rcg .c3 .acts .pill.p{background:#fff;color:#0b0c0f;position:relative}
.rcg .c3 .acts .pill.p::after{content:"";position:absolute;inset:-4px;border-radius:999px;border:2px solid rgba(255,255,255,.5);opacity:0;animation:c3press 8s ease-out infinite}
.rcg .c3 .sent{position:absolute;left:230px;top:352px;display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:#5fcf8f;opacity:0;animation:c3sent 8s ease-out infinite}.rcg .c3 .sent .chk{width:26px;height:26px;background:var(--green)}
.rcg .c3 .fu{left:60px;top:430px;width:680px;padding:22px 26px;display:flex;align-items:center;gap:18px;opacity:0;animation:c3fu 8s cubic-bezier(.2,.8,.2,1) infinite}
.rcg .c3 .fu .t{font-size:22px;font-weight:700;white-space:nowrap}.rcg .c3 .fu .s{font-size:15px;color:var(--mute);margin-top:3px;white-space:nowrap}.rcg .c3 .fu .steps{margin-left:auto;display:flex;gap:6px}
.rcg .c3 .fu .steps i{width:34px;height:8px;border-radius:4px;background:#2a2f3a}.rcg .c3 .fu .steps i.on{background:var(--blue)}
@keyframes c3a{0%,3%{opacity:0;transform:translateY(12px)}9%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes c3t{0%,12%{opacity:0}15%,28%{opacity:1}30%,100%{opacity:0}}
@keyframes c3b{0%,28%{opacity:0;transform:translateY(12px)}34%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes c3acts{0%,36%{opacity:0;transform:translateY(8px)}42%,54%{opacity:1;transform:none}58%,100%{opacity:0}}
@keyframes c3press{0%,48%{opacity:0;transform:scale(.9)}51%{opacity:1;transform:scale(1)}56%,100%{opacity:0;transform:scale(1.2)}}
@keyframes c3sent{0%,57%{opacity:0;transform:translateY(6px)}62%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes c3fu{0%,66%{opacity:0;transform:translateY(24px) scale(.97)}74%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
/* C4 — CRM to quotes to invoice */
.rcg .c4 .who{left:60px;top:52px;width:680px;padding:18px 22px;display:flex;align-items:center;gap:16px}.rcg .c4 .who .tag{margin-left:auto}
.rcg .c4 .line{position:absolute;left:100px;top:355px;width:600px;height:2px;background:#2a2f3a}
.rcg .c4 .fill{position:absolute;left:100px;top:355px;height:2px;width:0;background:var(--blue);animation:c4fill 8s ease-in-out infinite}
.rcg .c4 .dot{position:absolute;left:100px;top:349px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(59,124,255,.25);animation:c4dot 8s ease-in-out infinite}
.rcg .c4 .step{position:absolute;top:196px;width:150px;height:140px;padding:18px 16px;display:grid;align-content:start;gap:8px;opacity:.35;transform:scale(.96);overflow:hidden}
.rcg .c4 .step .k{font-size:11px}.rcg .c4 .step .big{font-size:22px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}.rcg .c4 .step .s{font-size:14px;color:var(--mute);white-space:nowrap}
.rcg .c4 .step .chk{width:26px;height:26px;position:absolute;right:14px;top:14px;transform:scale(0)}
.rcg .c4 .s1{left:60px;animation:c4s1 8s ease-out infinite}.rcg .c4 .s2{left:250px;animation:c4s2 8s ease-out infinite}.rcg .c4 .s3{left:440px;animation:c4s3 8s ease-out infinite}.rcg .c4 .s4{left:630px;animation:c4s4 8s ease-out infinite}
.rcg .c4 .s1 .chk{animation:c4k1 8s ease-out infinite}.rcg .c4 .s2 .chk{animation:c4k2 8s ease-out infinite}.rcg .c4 .s3 .chk{animation:c4k3 8s ease-out infinite}.rcg .c4 .s4 .chk{animation:c4k4 8s ease-out infinite}
.rcg .c4 .lbl{position:absolute;top:388px;width:150px;text-align:center;font-size:15px;font-weight:600;color:var(--mute)}
.rcg .c4 .note{left:60px;top:456px;width:680px;padding:20px 24px;display:flex;align-items:center;gap:16px;opacity:0;animation:c4note 8s ease-out infinite}
.rcg .c4 .note .t{font-size:21px;font-weight:700;white-space:nowrap}.rcg .c4 .note .s{font-size:15px;color:var(--mute);margin-top:2px;white-space:nowrap}
@keyframes c4s1{0%,8%{opacity:.35;transform:scale(.96)}13%,88%{opacity:1;transform:none}94%,100%{opacity:.35;transform:scale(.96)}}
@keyframes c4s2{0%,26%{opacity:.35;transform:scale(.96)}31%,88%{opacity:1;transform:none}94%,100%{opacity:.35;transform:scale(.96)}}
@keyframes c4s3{0%,43%{opacity:.35;transform:scale(.96)}48%,88%{opacity:1;transform:none}94%,100%{opacity:.35;transform:scale(.96)}}
@keyframes c4s4{0%,60%{opacity:.35;transform:scale(.96)}65%,88%{opacity:1;transform:none}94%,100%{opacity:.35;transform:scale(.96)}}
@keyframes c4k1{0%,11%{transform:scale(0)}15%{transform:scale(1.2)}18%,88%{transform:scale(1)}94%,100%{transform:scale(0)}}
@keyframes c4k2{0%,29%{transform:scale(0)}33%{transform:scale(1.2)}36%,88%{transform:scale(1)}94%,100%{transform:scale(0)}}
@keyframes c4k3{0%,46%{transform:scale(0)}50%{transform:scale(1.2)}53%,88%{transform:scale(1)}94%,100%{transform:scale(0)}}
@keyframes c4k4{0%,62%{transform:scale(0)}66%{transform:scale(1.2)}69%,88%{transform:scale(1)}94%,100%{transform:scale(0)}}
@keyframes c4fill{0%,8%{width:0}62%,88%{width:600px}94%,100%{width:0}}
@keyframes c4dot{0%,8%{left:100px;opacity:1}62%,88%{left:686px;opacity:1}90%,100%{left:686px;opacity:0}}
@keyframes c4note{0%,66%{opacity:0;transform:translateY(16px)}72%,88%{opacity:1;transform:none}94%,100%{opacity:0}}
/* C5 — external lead forms */
.rcg .c5 .form{left:50px;top:60px;width:320px;padding:22px 22px 24px;background:#f6f7f9;color:#080808;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.rcg .c5 .form .k{color:#5b6270;font-size:10px;margin-bottom:6px}
.rcg .c5 .in{height:42px;border-radius:8px;background:#fff;border:1px solid rgba(10,13,16,.12);display:flex;align-items:center;padding:0 12px;font-size:15px;font-weight:600;margin-bottom:14px;color:#080808;white-space:nowrap;overflow:hidden}
.rcg .c5 .in span{display:inline-block;width:0;overflow:hidden;white-space:nowrap;border-right:2px solid transparent}
.rcg .c5 .i1 span{animation:c5ty 8s steps(12) infinite}.rcg .c5 .i2 span{animation:c5ty2 8s steps(14) infinite}.rcg .c5 .i3 span{animation:c5ty3 8s steps(10) infinite}
.rcg .c5 .btn{height:46px;border-radius:8px;background:#1b64f3;color:#fff;font-size:16px;font-weight:700;display:grid;place-items:center;margin-top:4px;animation:c5btn 8s ease-out infinite}
.rcg .c5 .site{position:absolute;left:50px;top:24px;font:500 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.rcg .c5 svg.flow{position:absolute;inset:0;width:800px;height:600px}
.rcg .c5 .flow path{fill:none;stroke:rgba(59,124,255,.6);stroke-width:2.5;stroke-dasharray:6 10;animation:c5f 1.2s linear infinite}
.rcg .c5 .pipe{left:430px;top:60px;width:320px;padding:22px 22px 10px;height:480px}
.rcg .c5 .pipe .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.rcg .c5 .pipe .hd .k{font-size:12px}.rcg .c5 .cnt{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.rcg .c5 .lr{padding:14px 0;border-top:1px solid var(--line)}.rcg .c5 .lr .name{font-size:18px}.rcg .c5 .lr .sub{font-size:14px}
.rcg .c5 .lr .tag{height:24px;font-size:12px;padding:0 9px;margin-top:8px;border-radius:6px}
.rcg .c5 .new{position:absolute;left:22px;right:22px;top:58px;background:var(--card2);border-radius:14px;padding:14px 16px;box-shadow:0 0 0 1.5px rgba(59,124,255,.6),0 14px 30px rgba(0,0,0,.5);opacity:0;animation:c5new 8s cubic-bezier(.2,.8,.2,1) infinite}
.rcg .c5 .old{animation:c5shift 8s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes c5ty{0%,6%{width:0}20%,100%{width:100%}}
@keyframes c5ty2{0%,22%{width:0}36%,100%{width:100%}}
@keyframes c5ty3{0%,38%{width:0}48%,100%{width:100%}}
@keyframes c5btn{0%,52%{transform:none;background:#1b64f3}55%{transform:scale(.96);background:#0e4fd0}58%,100%{transform:none;background:#1b64f3}}
@keyframes c5f{to{stroke-dashoffset:-32}}
@keyframes c5new{0%,60%{opacity:0;transform:translateX(-60px) scale(.96)}68%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes c5shift{0%,60%{transform:none}68%,100%{transform:translateY(112px)}}
@media (prefers-reduced-motion:reduce){.rcg .c1 .f,.rcg .c2 .row,.rcg .c2 .auto,.rcg .c3 .a,.rcg .c3 .sent,.rcg .c3 .fu,.rcg .c4 .step,.rcg .c4 .note,.rcg .c5 .new{opacity:1;transform:none}.rcg .c5 .in span{width:100%}.rcg .c4 .fill{width:600px}.rcg .c1 .bar{width:75%}}