/* Homepage Call-to-CRM graphic — .l1 shell, .l2 leads list (760×560), .l3 live call (300×420). 16s loop: phone rings → answered → new lead row appears → fields fill as the caller talks → call ends → needs follow-up + toast. */
.rcg .l1{--t:16s;--g-bg:#fff;--g-ink:#111318;--g-ink2:#3a3f4b;--g-mute:#6b7280;--g-mute2:#9aa0ab;--g-line:#e6e8ed;--g-soft:#f6f7f9;--g-hi:#f3f4f6;--g-rline:#fecaca;--g-rtint:#fef2f2;--blue:#1b64f3;--grn:#1f9d55;--red:#dc2626;background:var(--g-bg);color:var(--g-ink);text-align:left;line-height:normal;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;border-radius:14px;box-shadow:0 0 0 1px var(--g-line),0 30px 80px -42px rgba(0,0,0,.28);overflow:hidden}
html[data-theme="dark"] .rcg .l1{--g-bg:#141821;--g-ink:#f4f5f7;--g-ink2:#c7ccd5;--g-mute:#9aa0ab;--g-mute2:#6b7280;--g-line:#262b36;--g-soft:#1c1f26;--g-hi:rgba(255,255,255,.07);--g-rline:rgba(220,38,38,.4);--g-rtint:rgba(220,38,38,.12);--blue:#3b7cff}
.rcg .ab.l2{width:760px;height:560px}.rcg .ab.l3{width:300px;height:420px}
.rcg .l1 *{font-family:inherit;box-sizing:border-box;margin:0}
.rcg .l1 .scene{position:absolute;inset:0;animation:l1fade var(--t) linear infinite}@keyframes l1fade{0%,97%{opacity:1}98.5%{opacity:0}100%{opacity:1}}
.rcg .l1 svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* ===== list ===== */
.rcg .l2 .panel{position:absolute;inset:0;padding:22px 26px;overflow:hidden}
.rcg .l2 .top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.rcg .l2 .top .t{font-size:18px;font-weight:700;letter-spacing:-.01em}.rcg .l2 .top .s{font-size:12px;color:var(--g-mute);margin-top:3px}
.rcg .l2 .cnt{display:inline-grid;vertical-align:top}.rcg .l2 .cnt>span{grid-area:1/1;white-space:nowrap}
.rcg .l2 .c1{animation:l2c1 var(--t) step-end infinite}.rcg .l2 .c2{opacity:0;animation:l2c2 var(--t) step-end infinite}
@keyframes l2c1{0%,10%{opacity:1}10.01%,100%{opacity:0}}@keyframes l2c2{0%,10%{opacity:0}10.01%,100%{opacity:1}}
.rcg .l2 .top .ic{display:flex;gap:8px}.rcg .l2 .top .ic i{width:30px;height:30px;border-radius:8px;border:1px solid var(--g-line);display:grid;place-items:center;color:var(--g-mute);background:var(--g-bg);position:relative}
.rcg .l2 .top .ic svg{width:14px;height:14px}
.rcg .l2 .top .ic i.ph{animation:l2ph var(--t) step-end infinite}
.rcg .l2 .top .ic i.ph::after{content:"";position:absolute;inset:-3px;border-radius:10px;border:1.5px solid var(--blue);opacity:0;animation:l2ring var(--t) ease-out infinite}
@keyframes l2ph{0%,2%{color:var(--g-mute);border-color:var(--g-line);background:var(--g-bg)}2.01%,66%{color:#fff;border-color:var(--blue);background:var(--blue)}66.01%,100%{color:var(--g-mute);border-color:var(--g-line);background:var(--g-bg)}}
@keyframes l2ring{0%,2%{opacity:0;transform:scale(1)}2.5%{opacity:1;transform:scale(1)}5.5%{opacity:0;transform:scale(1.6)}6%{opacity:1;transform:scale(1)}9.5%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
.rcg .l2 .bar{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.rcg .l2 .tab{height:30px;padding:0 12px;border-radius:7px;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--g-mute);white-space:nowrap}
.rcg .l2 .tab.on{background:var(--g-hi);color:var(--g-ink)}
.rcg .l2 .tab b{font-size:10px;background:var(--g-bg);border:1px solid var(--g-line);border-radius:8px;padding:1px 6px;font-weight:600;color:var(--g-ink2)}
.rcg .l2 .srch{margin-left:auto;width:30px;height:30px;border:1px solid var(--g-line);border-radius:7px;display:grid;place-items:center;color:var(--g-mute)}.rcg .l2 .srch svg{width:14px;height:14px}
.rcg .l2 .fu{height:30px;padding:0 12px;border-radius:7px;border:1px solid var(--g-rline);background:var(--g-rtint);color:var(--red);font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;white-space:nowrap}
.rcg .l2 .bar .new{height:30px;padding:0 12px;border-radius:7px;background:var(--blue);color:#fff;font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;white-space:nowrap}
.rcg .l2 table{width:100%;border-collapse:collapse;table-layout:fixed}
.rcg .l2 th{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g-mute);text-align:left;padding:0 8px 10px;border-bottom:1px solid var(--g-line);white-space:nowrap}
.rcg .l2 td{padding:0 8px;height:52px;border-bottom:1px solid var(--g-line);font-size:12px;color:var(--g-ink2);vertical-align:middle;white-space:nowrap;overflow:hidden}
.rcg .l2 .cb{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--g-line);display:block}
.rcg .l2 .nm{font-weight:600;color:var(--g-ink);font-size:12.5px;display:grid}.rcg .l2 .nm>span{grid-area:1/1}
.rcg .l2 .veh{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--g-mute);margin-top:3px}.rcg .l2 .veh img{width:14px;height:14px;object-fit:contain}
.rcg .l2 .ct span{display:block;font-size:11px;color:var(--g-mute);margin-top:3px}
.rcg .l2 .st{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:5px;border:1px solid var(--g-line);font-size:11px;font-weight:600;color:var(--g-ink2);background:var(--g-bg);white-space:nowrap}
.rcg .l2 .st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--d,var(--blue))}
.rcg .l2 .val{font-weight:600;color:var(--g-ink)}.rcg .l2 .dash{color:var(--g-mute2)}
/* the new row slides in at 10% */
.rcg .l2 tr.new{opacity:0;animation:l2new var(--t) ease-out infinite}.rcg .l2 tr.old{animation:l2shift var(--t) cubic-bezier(.2,.7,.2,1) infinite}
@keyframes l2new{0%,10%{opacity:0}13%,100%{opacity:1}}@keyframes l2shift{0%,10%{transform:translateY(-52px)}13%,100%{transform:none}}
.rcg .l2 tr.new td{position:relative}.rcg .l2 tr.new td::before{content:"";position:absolute;inset:0;background:var(--blue);opacity:0;animation:l2hl var(--t) ease-out infinite;pointer-events:none}.rcg .l2 tr.new td>*{position:relative}
@keyframes l2hl{0%,10%{opacity:0}13%{opacity:.08}30%,100%{opacity:0}}
.rcg .l1 .unk{color:var(--g-mute);font-weight:500;animation:l2unk var(--t) step-end infinite}.rcg .l1 .known{opacity:0;animation:l2known var(--t) ease-out infinite}
@keyframes l2unk{0%,18%{opacity:1}18.01%,100%{opacity:0}}@keyframes l2known{0%,18%{opacity:0;transform:translateY(4px)}20%,100%{opacity:1;transform:none}}
.rcg .l2 .fld{position:relative;display:inline-block;height:13px;min-width:60px;vertical-align:middle}.rcg .l2 .fld>*{position:absolute;left:0;top:0}
.rcg .l2 .fld .ph{top:2px;height:9px;width:80px;border-radius:5px;background:linear-gradient(90deg,var(--g-hi) 0%,var(--g-line) 50%,var(--g-hi) 100%);background-size:200% 100%;animation:l2shim 1.4s linear infinite,l2phA var(--t) step-end infinite}
.rcg .l2 .fld .rv{opacity:0;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;line-height:13px}
.rcg .l2 .veh .fld{flex:1}.rcg .l2 .veh .fld .rv{color:var(--g-mute)}.rcg .l2 .ct .fld,.rcg .l2 .ct .fld .rv{font-size:12px;color:var(--g-ink2);margin-top:0}.rcg .l2 .ct .fld .ph{top:1px}
@keyframes l2shim{0%{background-position:100% 0}100%{background-position:-100% 0}}
.rcg .l2 .f2 .ph,.rcg .l2 .f3 .ph{animation-name:l2shim,l2ph36}.rcg .l2 .f2 .rv,.rcg .l2 .f3 .rv{animation:l2rv36 var(--t) ease-out infinite}
.rcg .l2 .f5 .ph{animation-name:l2shim,l2ph48}.rcg .l2 .f5 .rv{animation:l2rv48 var(--t) ease-out infinite}
@keyframes l2ph36{0%,36%{opacity:1}36.01%,100%{opacity:0}}@keyframes l2rv36{0%,36%{opacity:0;transform:translateY(4px)}38%,100%{opacity:1;transform:none}}
@keyframes l2ph48{0%,48%{opacity:1}48.01%,100%{opacity:0}}@keyframes l2rv48{0%,48%{opacity:0;transform:translateY(4px)}50%,100%{opacity:1;transform:none}}
@keyframes l2phA{0%,100%{opacity:1}}
.rcg .l2 .stw{display:inline-grid}.rcg .l2 .stw>.st{grid-area:1/1;justify-self:start}
.rcg .l2 .s1{opacity:0;animation:l2s1 var(--t) step-end infinite}.rcg .l2 .s2{opacity:0;animation:l2s2 var(--t) ease-out infinite}
@keyframes l2s1{0%,10%{opacity:0}10.01%,68%{opacity:1}68.01%,100%{opacity:0}}@keyframes l2s2{0%,68%{opacity:0;transform:translateY(4px)}70%,100%{opacity:1;transform:none}}
.rcg .l2 .toast{position:absolute;right:26px;bottom:22px;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:12px;background:var(--g-bg);box-shadow:0 0 0 1px var(--g-line),0 20px 40px -18px rgba(0,0,0,.3);opacity:0;animation:l2toast var(--t) ease-out infinite;max-width:440px}
.rcg .l2 .toast .ok{width:28px;height:28px;border-radius:50%;background:var(--grn);display:grid;place-items:center;flex:none}.rcg .l2 .toast .ok svg{width:14px;height:14px;color:#fff;stroke-width:3}
.rcg .l2 .toast .t{font-size:12.5px;font-weight:700}.rcg .l2 .toast .s{font-size:11px;color:var(--g-mute);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes l2toast{0%,68%{opacity:0;transform:translateY(10px)}70.5%,92%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(4px)}}
/* ===== call ===== */
.rcg .l3 .call{position:absolute;inset:0;padding:20px 18px;display:flex;flex-direction:column}
.rcg .l3 .hd{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--g-line);margin-bottom:12px}
.rcg .l3 .av{width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center;flex:none;position:relative}
.rcg .l3 .av>span{grid-area:1/1}.rcg .l3 .in1{animation:l2unk var(--t) step-end infinite}.rcg .l3 .in2{opacity:0;animation:l2known var(--t) ease-out infinite}
.rcg .l3 .av::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--blue);opacity:0;animation:l2ring var(--t) ease-out infinite}
.rcg .l3 .n{font-size:13.5px;font-weight:700;display:grid}.rcg .l3 .n>span{grid-area:1/1;white-space:nowrap}.rcg .l3 .n .unk{color:var(--g-ink);font-weight:700}
.rcg .l3 .s{font-size:11px;color:var(--g-mute);margin-top:2px;display:grid}.rcg .l3 .s>span{grid-area:1/1;white-space:nowrap;opacity:0}
.rcg .l3 .inc{animation:l3inc var(--t) step-end infinite}.rcg .l3 .live{color:var(--grn);font-weight:600;animation:l3live var(--t) step-end infinite}.rcg .l3 .end{animation:l3end var(--t) step-end infinite}
@keyframes l3inc{0%,10%{opacity:1}10.01%,100%{opacity:0}}@keyframes l3live{0%,10%{opacity:0}10.01%,66%{opacity:1}66.01%,100%{opacity:0}}@keyframes l3end{0%,66%{opacity:0}66.01%,100%{opacity:1}}
.rcg .l3 .wave{margin-left:auto;display:flex;gap:3px;align-items:center;height:18px;animation:l3live var(--t) step-end infinite}
.rcg .l3 .wave i{width:3px;height:6px;border-radius:2px;background:var(--blue);animation:l3wave 1.1s ease-in-out infinite}
.rcg .l3 .wave i:nth-child(2){animation-delay:-.2s}.rcg .l3 .wave i:nth-child(3){animation-delay:-.45s}.rcg .l3 .wave i:nth-child(4){animation-delay:-.7s}.rcg .l3 .wave i:nth-child(5){animation-delay:-.9s}
@keyframes l3wave{0%,100%{height:5px}50%{height:16px}}
.rcg .l3 .tr{display:flex;flex-direction:column;gap:7px}
.rcg .l3 .ln{font-size:11px;line-height:1.4;padding:7px 10px;border-radius:9px;border-top-left-radius:3px;background:var(--g-hi);color:var(--g-ink2);max-width:92%;opacity:0;transform:translateY(6px)}
.rcg .l3 .ln b{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--g-mute);margin-right:5px}
.rcg .l3 .ln.me{background:var(--blue);color:#fff;margin-left:auto;border-radius:9px;border-top-right-radius:3px}.rcg .l3 .ln.me b{color:rgba(255,255,255,.72)}
.rcg .l3 .t1{animation:l3t1 var(--t) ease-out infinite}.rcg .l3 .t2{animation:l3t2 var(--t) ease-out infinite}.rcg .l3 .t3{animation:l3t3 var(--t) ease-out infinite}.rcg .l3 .t4{animation:l3t4 var(--t) ease-out infinite}.rcg .l3 .t5{animation:l3t5 var(--t) ease-out infinite}
@keyframes l3t1{0%,14%{opacity:0;transform:translateY(6px)}16.5%,100%{opacity:1;transform:none}}
@keyframes l3t2{0%,24%{opacity:0;transform:translateY(6px)}26.5%,100%{opacity:1;transform:none}}
@keyframes l3t3{0%,32%{opacity:0;transform:translateY(6px)}34.5%,100%{opacity:1;transform:none}}
@keyframes l3t4{0%,44%{opacity:0;transform:translateY(6px)}46.5%,100%{opacity:1;transform:none}}
@keyframes l3t5{0%,56%{opacity:0;transform:translateY(6px)}58.5%,100%{opacity:1;transform:none}}
.rcg .l3 .ai{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--g-mute);padding-top:12px;border-top:1px solid var(--g-line);box-shadow:none;background:transparent;border-radius:0}
.rcg .l3 .ai i{width:7px;height:7px;border-radius:50%;background:var(--grn);box-shadow:0 0 0 3px rgba(31,157,85,.18);animation:l3dot 1.6s ease-in-out infinite;flex:none}
@keyframes l3dot{0%,100%{box-shadow:0 0 0 2px rgba(31,157,85,.18)}50%{box-shadow:0 0 0 5px rgba(31,157,85,.1)}}
/* reduced motion → final state */
@media (prefers-reduced-motion:reduce){.rcg .l1 *,.rcg .l1 *::before,.rcg .l1 *::after{animation:none!important}.rcg .l1 .toast,.rcg .l1 .wave,.rcg .l1 .c1,.rcg .l1 .unk,.rcg .l1 .in1,.rcg .l1 .inc,.rcg .l1 .live,.rcg .l1 .fld .ph,.rcg .l1 .s1{opacity:0!important}.rcg .l1 .c2,.rcg .l1 .known,.rcg .l1 .in2,.rcg .l1 .end,.rcg .l1 .fld .rv,.rcg .l1 .s2,.rcg .l1 tr.new,.rcg .l1 .ln{opacity:1!important;transform:none!important}.rcg .l1 tr.old{transform:none!important}}