/* CRM card: the real Coceyo CRM screens, worked on by a person and an agent at once. */
.app-crm .application-visual{inset:226px 0 78px}
.crm-film{position:absolute;inset:0 34px}
.cf-window{position:absolute;inset:0;border-radius:18px;overflow:hidden;background:#f3f2f6;box-shadow:0 0 0 1px #2b17331a,0 28px 50px -22px #3a2a5b66,0 8px 18px -10px #3a2a5b40;transform:translateZ(0)}
.cf-stage{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.cf-stage::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff55,inset 0 -40px 50px -40px #1a0f2a33;z-index:6}
.cf-world{position:absolute;left:0;top:0;width:var(--w,100%);aspect-ratio:1.6;transform-origin:0 0;container-type:inline-size;will-change:transform;--inv:1}
.cf-shot{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .65s cubic-bezier(.4,0,.2,1);user-select:none}
.cf-shot.on{opacity:1}
.cf-shot[data-shot=lead]{z-index:2}.cf-shot[data-shot=deal]{z-index:3}.cf-shot[data-shot=convert]{z-index:4}.cf-shot[data-shot=clients]{z-index:5}.cf-shot[data-shot=leads]{z-index:1}
.cf-shot[data-shot=home]{z-index:0}
.cf-world>*:not(.cf-shot){z-index:10}

/* agent highlights */
.cf-hl{position:absolute;border-radius:.8cqw;opacity:0;transform:scale(.985);transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1);pointer-events:none;background:linear-gradient(115deg,#7c5cff00 0%,#7c5cff14 50%,#7c5cff00 100%);box-shadow:0 0 0 calc(1.5px*var(--inv)) #7a56f5,0 0 0 calc(5px*var(--inv)) #7a56f524,0 calc(14px*var(--inv)) calc(34px*var(--inv)) calc(-10px*var(--inv)) #6a42f071;overflow:visible}
.cf-hl.on{opacity:1;transform:none}
.cf-hl::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 35%,#ffffffa6 50%,transparent 65%);background-size:260% 100%;background-position:130% 0;opacity:0}
.cf-hl.on::after{animation:cf-sweep 1.5s .15s cubic-bezier(.4,0,.2,1) 1 both}
@keyframes cf-sweep{0%{background-position:130% 0;opacity:0}15%{opacity:.9}100%{background-position:-30% 0;opacity:0}}
.cf-tag{position:absolute;left:0;bottom:calc(100% + 6px*var(--inv));transform:scale(var(--inv));transform-origin:0 100%;white-space:nowrap;font:600 10px/1 Inter,system-ui,sans-serif;letter-spacing:-.01em;color:#fff;background:linear-gradient(135deg,#6a42f0,#8a5cf6);padding:6px 9px;border-radius:99px;box-shadow:0 6px 16px -4px #5a38d98c}

/* patches that change real UI state */
.cf-patch,.cf-newrow,.cf-toast{position:absolute;opacity:0;transition:opacity .4s ease,transform .6s cubic-bezier(.16,1,.3,1);pointer-events:none}
.cf-patch.on,.cf-newrow.on,.cf-toast.on{opacity:1}
.cf-approved{display:flex;align-items:center;justify-content:center;gap:.4cqw;border-radius:99px;background:#d9f4e6;color:#0b7a4b;font:600 .98cqw/1 Inter,system-ui,sans-serif;box-shadow:0 0 0 calc(1px*var(--inv)) #0b7a4b40}
.cf-approved span{font-size:1cqw}
.cf-count{display:grid;place-items:center;border-radius:99px;background:#efeef2;font:500 .95cqw/1 Inter,system-ui,sans-serif;color:#51485f}
.cf-newrow{display:block;background:linear-gradient(90deg,#f4efff,#fff 60%);border-bottom:calc(1px*var(--inv)) solid #ece8f4;transform:translateY(-1.2cqw);box-shadow:0 0 0 calc(1.5px*var(--inv)) #7a56f5 inset;font-family:Inter,system-ui,sans-serif}
.cf-newrow.on{transform:none}
.cf-newrow>*{position:absolute;top:50%;transform:translateY(-50%);margin:0;font-style:normal;text-decoration:none;font-size:.95cqw;color:#241a2f;white-space:nowrap}
.cf-newrow .cf-av{left:2.3%;width:2.1%;aspect-ratio:1;border-radius:50%;background:#e4dcff;display:grid;place-items:center;font-weight:600;font-size:.7cqw}
.cf-newrow b{left:5.3%;font-weight:600;line-height:1.25}.cf-newrow b small{display:block;font-weight:400;color:#6b6178;font-size:.85cqw}
.cf-newrow .cf-pill{left:24.4%;background:#dde7ff;color:#2748a8;padding:.35cqw .8cqw;border-radius:99px;font-weight:600;font-size:.78cqw}
.cf-newrow s{text-decoration:none;color:#51485f}.cf-newrow s:nth-of-type(1){left:39.8%}.cf-newrow s:nth-of-type(2){left:66%}
.cf-newrow strong{left:52%;font-weight:600}
.cf-newrow em{left:78%;font-style:normal;background:#dff5e9;color:#0b7a4b;padding:.35cqw .8cqw;border-radius:99px;font-weight:600;font-size:.78cqw;display:flex;align-items:center;gap:.4cqw}
.cf-newrow em i{width:.5cqw;height:.5cqw;border-radius:50%;background:#18a368}
.cf-newrow .cf-own{left:92%;width:2.1%;aspect-ratio:1;border-radius:50%;background:#dff5e9;display:grid;place-items:center;font-weight:600;font-size:.62cqw}
.cf-toast{display:flex;align-items:center;gap:1cqw;padding:1.1cqw 1.6cqw 1.1cqw 1.2cqw;border-radius:2cqw;background:#17101fe8;color:#fff;box-shadow:0 2cqw 5cqw -1.5cqw #0b061acc,0 0 0 calc(1px*var(--inv)) #ffffff1f inset;backdrop-filter:blur(14px);transform:translate(-50%,2cqw) scale(.96);font-family:Inter,system-ui,sans-serif}
.cf-toast.on{transform:translate(-50%,0) scale(1)}
.cf-toast>i{font-style:normal;width:2.4cqw;height:2.4cqw;border-radius:50%;background:linear-gradient(135deg,#34c98b,#18a368);display:grid;place-items:center;font-size:1.2cqw}
.cf-toast b{display:block;font-size:1.25cqw;font-weight:600;letter-spacing:-.02em}.cf-toast span{display:block;margin-top:.35cqw;font-size:.9cqw;color:#cfc6dd}

/* cursors */
.cf-cursor{position:absolute;left:0;top:0;opacity:0;pointer-events:none;will-change:transform,opacity;z-index:20!important}
.cf-cursor-in{transform:scale(var(--inv));transform-origin:0 0;position:relative;transition:transform .12s ease}
.cf-cursor svg{display:block;width:17px;height:23px;overflow:visible;filter:drop-shadow(0 3px 5px rgba(20,10,40,.35))}
.cf-human svg path{fill:#16101c;stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.cf-agent svg path{fill:url(#cfg);fill:#7a56f5;stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.cf-label{position:absolute;left:15px;top:19px;display:flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 4px;border-radius:99px;font:600 10.5px/1 Inter,system-ui,sans-serif;letter-spacing:-.01em;white-space:nowrap;box-shadow:0 8px 18px -6px rgba(20,10,40,.45)}
.cf-label b{font-weight:600}
.cf-human .cf-label{background:#16101c;color:#fff}
.cf-human .cf-label i{width:15px;height:15px;border-radius:50%;background:#f1e9ff;color:#16101c;display:grid;place-items:center;font:700 8.5px/1 Inter,system-ui,sans-serif;font-style:normal;margin-left:2px}
.cf-human .cf-label{padding-left:5px}
.cf-agent .cf-label{background:linear-gradient(135deg,#6a42f0,#8d5ef7);color:#fff;padding-left:3px}
.cf-agent .cf-label img{width:16px;height:16px;border-radius:50%;background:#fff;object-fit:cover;object-position:50% 12%}
.cf-agent .cf-label em{font-style:normal;font-size:9px;opacity:.85;order:3}
.cf-agent::before{content:"";position:absolute;left:-17px;top:-16px;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle,#7a56f580,transparent 68%);transform:scale(var(--inv));transform-origin:17px 16px;animation:cf-pulse 1.9s ease-in-out infinite}
.cf-human.press .cf-cursor-in{transform:scale(calc(var(--inv)*.86))}
@keyframes cf-pulse{0%,100%{opacity:.55;transform:scale(calc(var(--inv)*.85))}50%{opacity:1;transform:scale(calc(var(--inv)*1.12))}}
.cf-ripple{position:absolute;width:0;height:0;pointer-events:none}
.cf-ripple::before{content:"";position:absolute;left:calc(-17px*var(--inv));top:calc(-17px*var(--inv));width:calc(34px*var(--inv));height:calc(34px*var(--inv));border-radius:50%;border:calc(2px*var(--inv)) solid #16101c;opacity:0;transform:scale(.3)}
.cf-ripple.on::before{animation:cf-ripple .75s cubic-bezier(.16,1,.3,1) both}
@keyframes cf-ripple{0%{opacity:.55;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}

/* chrome above the camera */
.cf-live{position:absolute;left:12px;top:11px;z-index:8;display:flex;align-items:center;gap:6px;height:22px;padding:0 10px 0 8px;border-radius:99px;background:#17101fcc;color:#fff;font:600 9.5px/1 Inter,system-ui,sans-serif;letter-spacing:.02em;backdrop-filter:blur(10px);box-shadow:0 8px 20px -8px #0b061a99}
.cf-live i{width:6px;height:6px;border-radius:50%;background:#ff5d6c;box-shadow:0 0 0 0 #ff5d6c88;animation:cf-live 1.8s infinite}
@keyframes cf-live{70%{box-shadow:0 0 0 6px #ff5d6c00}100%{box-shadow:0 0 0 0 #ff5d6c00}}
.cf-status{position:absolute;left:12px;bottom:12px;z-index:8;width:min(290px,calc(100% - 24px));height:62px;border-radius:15px;background:#17101fd9;backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 14px 30px -12px #0b061ab3,0 0 0 1px #ffffff1c inset;overflow:hidden}
.cf-line{position:absolute;inset:0;padding:9px 13px;display:flex;flex-direction:column;justify-content:center;gap:7px;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .55s cubic-bezier(.16,1,.3,1);color:#fff;font-family:Inter,system-ui,sans-serif}
.cf-line.on{opacity:1;transform:none}
.cf-line p{margin:0;display:flex;align-items:center;gap:7px;font-size:10.5px;line-height:1.1;white-space:nowrap}
.cf-line img{width:18px;height:18px;border-radius:50%;background:#fff;object-fit:cover;object-position:50% 12%;flex:none}
.cf-line p>i{flex:none;width:18px;height:18px;border-radius:50%;background:#f1e9ff;color:#16101c;display:grid;place-items:center;font:700 9px/1 Inter,system-ui,sans-serif;font-style:normal}
.cf-line b{font-weight:600;flex:none}.cf-line p:nth-child(1) b{color:#b9a3ff}.cf-line p:nth-child(2) b{color:#fff}
.cf-line span{color:#d6cde4;overflow:hidden;text-overflow:ellipsis}

@media(max-width:800px){
 .app-crm .application-visual{inset:204px 0 72px}
 .crm-film{inset:0 18px}.cf-window{border-radius:15px}
 .cf-status{height:56px;width:calc(100% - 20px);left:10px;bottom:10px}.cf-line{padding:8px 11px;gap:6px}.cf-line p{font-size:9.5px}
 .cf-live{left:10px;top:9px}
}
@media(prefers-reduced-motion:reduce){.cf-hl::after,.cf-agent::before,.cf-live i{animation:none!important}.cf-shot,.cf-line,.cf-hl{transition:none}}

.cf-static *,.cf-static *::before,.cf-static *::after{transition:none!important;animation:none!important}.cf-static .cf-hl::after{opacity:0}