/* Custom CRM development — "the sales dispatch room" (prefix: crm-) */

/* ---------- Hero: pipeline dispatch board ---------- */
.cx-hero--crm_board .cx-hero__visual { width: min(100%, 580px); }
.crm-hero { position: relative; padding-bottom: 46px; }
.js .crm-hero { opacity: 0; transform: translateY(26px); }
.is-ready .crm-hero { opacity: 1; transform: none; transition: opacity 1.2s var(--ease-out) .2s, transform 1.6s var(--ease-out) .2s; }
.crm-board { position: relative; padding: 16px; border-radius: 22px; border: 1px solid rgba(255, 236, 214, .12); background: radial-gradient(90% 60% at 80% 0%, rgba(224, 169, 95, .1), transparent 60%), linear-gradient(180deg, #181310, #0e0b09); box-shadow: 0 0 0 6px rgba(255, 236, 214, .02), 0 80px 120px -50px rgba(224, 169, 95, .38), 0 40px 60px -30px rgba(0, 0, 0, .9); }
.crm-board__top { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 236, 214, .08); }
.crm-board__top .mono { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .22em; color: var(--gold-l); direction: ltr; }
.crm-board__top .mono i { width: 7px; height: 7px; border-radius: 50%; background: #8fcf9a; box-shadow: 0 0 10px #8fcf9a; animation: crmBlink 2s ease-in-out infinite; }
@keyframes crmBlink { 50% { opacity: .3; } }
.crm-board__fa { font-size: 13px; font-weight: 800; color: var(--text-2); }
.crm-board__sync { margin-inline-start: auto; padding: 3px 9px; border-radius: 999px; background: rgba(143, 207, 154, .12); color: #a7e3b1; font-size: 9.5px !important; letter-spacing: .2em; }
.crm-chans { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; }
.crm-chan { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(255, 236, 214, .12); background: rgba(255, 255, 255, .03); }
.crm-chan .ico { width: 15px; height: 15px; color: var(--gold-l); }
.crm-chan b { font-size: 13px; font-weight: 800; }
.crm-chan__ping { position: absolute; top: -3px; left: 6px; width: 9px; height: 9px; border-radius: 50%; background: #8fcf9a; opacity: 0; animation: crmPing 14s ease-out infinite; }
.crm-chan:nth-child(1) .crm-chan__ping { animation-delay: 5.6s; }
.crm-chan:nth-child(3) .crm-chan__ping { animation-delay: 9.8s; }
@keyframes crmPing { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(143, 207, 154, .7); } 8% { opacity: 1; box-shadow: 0 0 0 10px rgba(143, 207, 154, 0); } 12%, 100% { opacity: 0; box-shadow: none; } }
.crm-lanes { --lw: calc((100% - 24px) / 4); position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.crm-lane { min-height: 236px; padding: 8px; border-radius: 12px; border: 1px solid rgba(255, 236, 214, .06); background: rgba(255, 255, 255, .02); }
.crm-lane { --lc: #8fd6de; position: relative; }
.crm-lane::before { content: ""; position: absolute; top: -1px; inset-inline: 10px; height: 2px; border-radius: 2px; background: var(--lc); opacity: .75; box-shadow: 0 0 10px var(--lc); }
.crm-lane:nth-child(2) { --lc: #f3c27a; }
.crm-lane:nth-child(3) { --lc: #e07a5c; }
.crm-lane:nth-child(4) { --lc: #8fcf9a; background: rgba(143, 207, 154, .035); border-color: rgba(143, 207, 154, .12); }
.crm-lane__head .mono { color: var(--lc) !important; opacity: .85; }
.crm-lane__head { display: flex; align-items: center; justify-content: space-between; height: 18px; }
.crm-lane__head .mono { font-size: 8.5px; letter-spacing: .18em; color: var(--muted); direction: ltr; }
.crm-lane__head b { display: grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 6px; background: rgba(255, 236, 214, .07); font-size: 11px; font-weight: 900; color: var(--text-2); }
.crm-slot { display: block; height: 58px; margin-top: 8px; border-radius: 9px; border: 1px dashed rgba(255, 236, 214, .1); }
.crm-card { position: relative; display: flex; align-items: center; gap: 8px; height: 58px; margin-top: 8px; padding: 8px; border-radius: 9px; border: 1px solid rgba(255, 236, 214, .09); background: linear-gradient(180deg, #211b16, #191410); box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .8); }
.crm-card__av { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(90, 167, 178, .18); color: #8fd6de; }
.crm-card__av .ico { width: 13px; height: 13px; }
.crm-card__sk { display: grid; flex: 1; gap: 6px; min-width: 0; }
.crm-card__sk i { display: block; height: 5px; border-radius: 3px; background: rgba(255, 236, 214, .16); }
.crm-card__sk i:last-child { width: 60%; background: rgba(255, 236, 214, .09); }
.crm-card__src { position: absolute; bottom: 5px; left: 7px; color: var(--muted); }
.crm-card__src .ico { width: 11px; height: 11px; }
.crm-card.is-won { border-color: rgba(143, 207, 154, .35); background: linear-gradient(180deg, rgba(143, 207, 154, .1), rgba(143, 207, 154, .03)); }
.crm-mover { position: absolute; z-index: 2; top: 34px; right: 8px; width: calc(var(--lw) - 16px); opacity: 0; animation: crmMove 14s var(--ease-cine) infinite; }
.crm-mover .crm-card { margin: 0; }
.crm-card--live { border-color: rgba(243, 194, 122, .6); background: linear-gradient(180deg, #2e241b, #211912); box-shadow: 0 0 0 3px rgba(243, 194, 122, .12), 0 18px 30px -12px rgba(0, 0, 0, .9), 0 0 24px rgba(243, 194, 122, .25); animation: crmWon 14s steps(1) infinite; }
.crm-card--live .crm-card__av { background: rgba(243, 194, 122, .2); color: var(--gold-l); }
.crm-card__ok { position: absolute; top: -7px; left: -7px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #8fcf9a; color: #0d2a17; opacity: 0; animation: crmOk 14s var(--ease-snap) infinite; }
.crm-card__ok .ico { width: 12px; height: 12px; stroke-width: 2.6; }
@keyframes crmMove {
	0% { top: -52px; right: calc(var(--lw) * .6); opacity: 0; transform: scale(.9); }
	5% { top: -52px; right: calc(var(--lw) * .6); opacity: 1; transform: scale(.9); }
	11%, 24% { top: 34px; right: 8px; opacity: 1; transform: none; }
	31%, 44% { top: 34px; right: calc(var(--lw) + 16px); }
	51%, 64% { top: 34px; right: calc(var(--lw) * 2 + 24px); }
	71%, 90% { top: 34px; right: calc(var(--lw) * 3 + 32px); opacity: 1; }
	96%, 100% { top: 34px; right: calc(var(--lw) * 3 + 32px); opacity: 0; }
}
@keyframes crmWon { 0% { border-color: rgba(243, 194, 122, .6); } 74%, 100% { border-color: rgba(143, 207, 154, .8); background: linear-gradient(180deg, rgba(143, 207, 154, .2), rgba(143, 207, 154, .06)); } }
@keyframes crmOk { 0%, 72% { opacity: 0; transform: scale(.3); } 76%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.crm-toast { position: absolute; left: -5%; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 18px; border-radius: 16px; border: 1px solid rgba(243, 194, 122, .35); background: rgba(26, 20, 16, .96); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .95); animation: crmFloat 7s ease-in-out infinite; }
@keyframes crmFloat { 50% { transform: translateY(-8px); } }
.crm-toast__ic { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(224, 122, 92, .18); color: #ff9b78; }
.crm-toast__ic::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(224, 122, 92, .5); animation: crmRing 2.8s ease-out infinite; }
@keyframes crmRing { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.crm-toast > span:last-child { display: grid; gap: 2px; }
.crm-toast b { font-size: 14px; font-weight: 900; }
.crm-toast small { font-size: 9px; letter-spacing: .16em; color: var(--muted); direction: ltr; text-align: right; }

/* ---------- Rolodex problem cards ---------- */
.crm-rolo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); padding-top: 24px; perspective: 1200px; }
.crm-rolo__card { position: relative; height: 100%; padding: 26px 26px 52px; border-radius: 4px 12px 12px 12px; color: #1f1a16;
	background: linear-gradient(rgba(210, 106, 78, .55), rgba(210, 106, 78, .55)) 0 62px / 100% 1.5px no-repeat, repeating-linear-gradient(180deg, transparent 0 30px, rgba(31, 111, 120, .13) 30px 31px) 0 63px / 100% calc(100% - 100px) no-repeat, #f4eee3;
	box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .95), 0 1px 0 rgba(255, 255, 255, .6) inset; transform-origin: 50% 100%; transition: transform .6s var(--ease-out); }
.crm-rolo__item:hover .crm-rolo__card { transform: translateY(-6px) rotate(-.8deg); }
.js .crm-rolo__item[data-reveal] .crm-rolo__card { transform: rotateX(-40deg); }
.js .crm-rolo__item[data-reveal].is-in .crm-rolo__card { transform: none; transition: transform 1.2s var(--ease-out) calc(var(--d, 0) * 120ms + .1s); }
.js .crm-rolo__item[data-reveal].is-in:hover .crm-rolo__card { transform: translateY(-6px) rotate(-.8deg); transition-delay: 0s; }
.crm-rolo__tab { position: absolute; top: -24px; right: 0; display: grid; place-items: center; height: 25px; padding: 0 16px; border-radius: 9px 9px 0 0; background: #e7dccb; font-size: 9.5px; letter-spacing: .22em; color: #7b6a5a; direction: ltr; }
.crm-rolo__ic { position: absolute; top: 18px; left: 20px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(201, 86, 63, .45); color: #c9563f; }
.crm-rolo__ic .ico { width: 17px; height: 17px; }
.crm-rolo__card h3 { font-size: 19.5px; font-weight: 900; line-height: 1.6; color: #1f1a16; }
.crm-rolo__card p { margin-top: 18px; color: #4b4038; font-size: 15px; line-height: 31px; }
.crm-rolo__holes { position: absolute; bottom: 0; left: 50%; display: flex; gap: 46px; transform: translateX(-50%); }
.crm-rolo__holes i { width: 22px; height: 13px; border-radius: 11px 11px 0 0; background: #0b0907; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .8); }

/* ---------- Ticket rail (capabilities) ---------- */
.crm-rail { display: grid; gap: clamp(40px, 5vw, 64px); }
.crm-rail__row { position: relative; padding-top: 4px; }
.crm-rail__bar { position: absolute; top: 0; inset-inline: -12px; height: 11px; border-radius: 6px; background: linear-gradient(180deg, #a59a8e, #4a423b 55%, #2a241f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 16px rgba(0, 0, 0, .6); }
.crm-rail__bar::before, .crm-rail__bar::after { content: ""; position: absolute; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: #1a1612; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .25); }
.crm-rail__bar::before { right: 6px; }
.crm-rail__bar::after { left: 6px; }
.crm-rail__tks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.crm-tk { position: relative; display: flex; flex-direction: column; align-items: center; }
.crm-tk__clip { position: relative; z-index: 2; display: block; width: 38px; height: 24px; margin-top: -6px; border-radius: 4px 4px 9px 9px; background: linear-gradient(180deg, #d8d0c5, #8a8075); box-shadow: 0 4px 8px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .6); }
.crm-tk__clip::after { content: ""; position: absolute; left: 50%; top: 6px; width: 12px; height: 5px; margin-left: -6px; border-radius: 3px; background: #4a423b; }
.crm-tk__paper { width: 100%; margin-top: -10px; padding: 22px 16px 0; color: var(--text); transform-origin: 50% 0; animation: crmSway 8s ease-in-out calc(var(--k) * -2.1s) infinite;
	background: radial-gradient(rgba(255, 236, 214, .05) 1px, transparent 1.4px) 0 0 / 10px 10px, linear-gradient(180deg, #221b16, #18130f);
	-webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat;
	mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat; }
@keyframes crmSway { 0%, 100% { transform: rotate(-.7deg); } 50% { transform: rotate(.7deg); } }
.crm-tk__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px dashed rgba(255, 236, 214, .14); }
.crm-tk__top .mono { font-size: 11px; letter-spacing: .14em; color: var(--gold-l); direction: ltr; }
.crm-tk__top .ico { width: 18px; height: 18px; color: #8fd6de; }
.crm-tk__txt { min-height: 5.6em; margin-top: 12px; font-size: 15.5px; font-weight: 800; line-height: 1.85; }
.crm-tk__foot { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 10px 0 20px; border-top: 1px dashed rgba(255, 236, 214, .12); font-size: 8.5px; letter-spacing: .2em; color: var(--muted); direction: ltr; }
.crm-tk__foot i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.crm-tk:hover .crm-tk__paper { animation-play-state: paused; }

/* ---------- Stage path (process) ---------- */
.crm-path__bar { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.crm-path__seg { position: relative; display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 30px 0 26px; background: #201a15; color: var(--text-2); clip-path: polygon(0 50%, 16px 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 16px 100%); animation: crmSeg0 12s var(--ease-out) infinite; }
.crm-path__seg + .crm-path__seg { margin-right: -12px; }
.crm-path__seg:first-child { padding-right: 22px; clip-path: polygon(0 50%, 16px 0, 100% 0, 100% 100%, 16px 100%); border-radius: 0 12px 12px 0; }
.crm-path__seg:last-child { clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%); }
.crm-path__no { font-size: 19px; font-weight: 900; }
.crm-path__seg .mono { font-size: 9.5px; letter-spacing: .18em; direction: ltr; }
.crm-path__ok { display: grid; place-items: center; width: 20px; height: 20px; margin-inline-start: auto; border-radius: 50%; background: rgba(13, 42, 23, .25); font-style: normal; opacity: 0; }
.crm-path__ok .ico { width: 12px; height: 12px; stroke-width: 2.6; }
.crm-path__seg:nth-child(2) { animation-name: crmSeg1; }
.crm-path__seg:nth-child(3) { animation-name: crmSeg2; }
.crm-path__seg:nth-child(4) { animation-name: crmSeg3; }
.crm-path__seg .crm-path__ok { animation: crmOk0 12s var(--ease-out) infinite; }
.crm-path__seg:nth-child(2) .crm-path__ok { animation-name: crmOk1; }
.crm-path__seg:nth-child(3) .crm-path__ok { animation-name: crmOk2; }
.crm-path__seg:nth-child(4) .crm-path__ok { animation-name: crmOk3; }
@keyframes crmSeg0 { 0%, 2% { background: #201a15; color: var(--text-2); } 4%, 22% { background: linear-gradient(90deg, #e08a5c, #f3c27a); color: #1a1008; } 26%, 92% { background: #1e2a20; color: #a7e3b1; } 96%, 100% { background: #201a15; color: var(--text-2); } }
@keyframes crmSeg1 { 0%, 24% { background: #201a15; color: var(--text-2); } 27%, 46% { background: linear-gradient(90deg, #e08a5c, #f3c27a); color: #1a1008; } 50%, 92% { background: #1e2a20; color: #a7e3b1; } 96%, 100% { background: #201a15; color: var(--text-2); } }
@keyframes crmSeg2 { 0%, 48% { background: #201a15; color: var(--text-2); } 51%, 70% { background: linear-gradient(90deg, #e08a5c, #f3c27a); color: #1a1008; } 74%, 92% { background: #1e2a20; color: #a7e3b1; } 96%, 100% { background: #201a15; color: var(--text-2); } }
@keyframes crmSeg3 { 0%, 72% { background: #201a15; color: var(--text-2); } 75%, 92% { background: linear-gradient(90deg, #e08a5c, #f3c27a); color: #1a1008; } 96%, 100% { background: #201a15; color: var(--text-2); } }
@keyframes crmOk0 { 0%, 23% { opacity: 0; } 27%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes crmOk1 { 0%, 47% { opacity: 0; } 51%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes crmOk2 { 0%, 71% { opacity: 0; } 75%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes crmOk3 { 0%, 100% { opacity: 0; } }
.crm-path__cards { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); margin-top: 18px; }
.crm-path__card { position: relative; padding: 22px 22px 20px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--panel); overflow: hidden; }
.crm-path__card::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 3px; background: linear-gradient(90deg, #e08a5c, #f3c27a); transform: scaleX(0); transform-origin: 100% 50%; animation: crmLine0 12s var(--ease-out) infinite; }
.crm-path__card:nth-child(2)::before { animation-name: crmLine1; }
.crm-path__card:nth-child(3)::before { animation-name: crmLine2; }
.crm-path__card:nth-child(4)::before { animation-name: crmLine3; }
@keyframes crmLine0 { 0%, 2% { transform: scaleX(0); } 22%, 92% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes crmLine1 { 0%, 25% { transform: scaleX(0); } 46%, 92% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes crmLine2 { 0%, 49% { transform: scaleX(0); } 70%, 92% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes crmLine3 { 0%, 73% { transform: scaleX(0); } 92% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
.crm-path__step { display: none; font-size: 9.5px; letter-spacing: .2em; color: var(--gold); direction: ltr; }
.crm-path__card h3 { font-size: 18px; font-weight: 900; line-height: 1.55; }
.crm-path__card p { margin-top: 8px; color: var(--text-2); font-size: 14.5px; line-height: 1.95; }

/* ---------- Qualification sheet (criteria) ---------- */
.crm-q { padding: 20px clamp(18px, 2.6vw, 32px) 18px; border-radius: 22px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(143, 207, 154, .05), transparent 30%), #12100e; box-shadow: 0 60px 100px -60px rgba(0, 0, 0, .95); }
.crm-q__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; }
.crm-q__head > .mono { font-size: 10.5px; letter-spacing: .22em; color: var(--gold-l); direction: ltr; }
.crm-q__score { display: inline-flex; align-items: center; gap: 12px; }
.crm-q__meter { position: relative; width: clamp(90px, 14vw, 170px); height: 6px; border-radius: 3px; background: rgba(255, 236, 214, .08); overflow: hidden; }
.crm-q__meter i { position: absolute; inset: 0; background: linear-gradient(90deg, #f3c27a, #8fcf9a); transform-origin: 100% 50%; }
.js .crm-q[data-reveal] .crm-q__meter i { transform: scaleX(0); }
.js .crm-q[data-reveal].is-in .crm-q__meter i { transform: scaleX(1); transition: transform 1.9s steps(4, end) .7s; }
.crm-q__count { display: block; height: 1.4em; overflow: hidden; font-size: 16px; font-weight: 900; line-height: 1.4; color: #a7e3b1; }
.crm-q__count span { display: grid; }
.crm-q__count i { font-style: normal; height: 1.4em; }
.js .crm-q[data-reveal] .crm-q__count span { transform: translateY(0); }
.js .crm-q[data-reveal].is-in .crm-q__count span, .reveal-all .crm-q__count span, html:not(.js) .crm-q__count span { transform: translateY(calc(var(--n) * -1.4em)); transition: transform 1.9s steps(4, end) .7s; }
.crm-q__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); }
.crm-q__item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 22px 0; border-top: 1px dashed rgba(255, 236, 214, .12); }
.crm-q__box { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 4px; border-radius: 8px; border: 2px solid rgba(143, 207, 154, .5); color: transparent; }
.crm-q__box .ico { width: 15px; height: 15px; stroke-width: 2.8; }
.js .crm-q[data-reveal].is-in .crm-q__box, .reveal-all .crm-q__box, html:not(.js) .crm-q__box { background: #8fcf9a; border-color: #8fcf9a; color: #0d2a17; transition: background .3s, border-color .3s, color .3s; transition-delay: calc(var(--q) * 475ms + .9s); }
.crm-q__no { font-size: 10px; letter-spacing: .14em; color: var(--muted); }
.crm-q__item h3 { margin-top: 2px; font-size: 18px; font-weight: 900; line-height: 1.55; }
.crm-q__item p { margin-top: 6px; color: var(--text-2); font-size: 14.5px; line-height: 1.95; }
.crm-q__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 16px; border-top: 1px solid rgba(255, 236, 214, .08); direction: ltr; }
.crm-q__foot > .mono:first-child { font-size: 9px; letter-spacing: .18em; color: var(--muted); }
.crm-q__stamp { padding: 5px 12px; border: 2px solid #8fcf9a; border-radius: 6px; color: #a7e3b1; font-size: 12px; font-weight: 800; letter-spacing: .22em; transform: rotate(-5deg); }
.js .crm-q[data-reveal] .crm-q__stamp { opacity: 0; transform: rotate(-5deg) scale(1.8); }
.js .crm-q[data-reveal].is-in .crm-q__stamp { opacity: 1; transform: rotate(-5deg); transition: opacity .25s 2.9s, transform .5s var(--ease-snap) 2.9s; }

/* ---------- Lead activity feed + pinned memo ---------- */
.crm-feed { width: min(100%, 480px); margin-inline: auto; padding: 18px; border-radius: 24px; border: 1px solid rgba(255, 236, 214, .12); background: radial-gradient(80% 40% at 50% 0%, rgba(90, 167, 178, .1), transparent 70%), linear-gradient(180deg, #16120f, #0d0a09); box-shadow: 0 0 0 6px rgba(255, 236, 214, .02), 0 70px 110px -50px rgba(0, 0, 0, .95); }
.crm-feed__head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 236, 214, .08); }
.crm-feed__av { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(90, 167, 178, .16); color: #8fd6de; }
.crm-feed__head > span:nth-child(2) { display: grid; gap: 2px; }
.crm-feed__head b { font-size: 15.5px; font-weight: 900; }
.crm-feed__head small { font-size: 9px; letter-spacing: .18em; color: var(--muted); direction: ltr; text-align: right; }
.crm-feed__badge { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; padding: 5px 11px; border-radius: 999px; background: rgba(143, 207, 154, .14); color: #a7e3b1; font-size: 12.5px; font-weight: 900; }
.crm-feed__badge .ico { width: 14px; height: 14px; }
.crm-feed__evs { position: relative; display: grid; gap: 8px; margin-top: 14px; padding-inline-start: 40px; }
.crm-feed__evs::before { content: ""; position: absolute; top: 18px; bottom: 18px; inset-inline-start: 15px; width: 2px; background: linear-gradient(180deg, rgba(90, 167, 178, .5), rgba(224, 122, 92, .5)); }
.crm-feed__ev { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255, 236, 214, .08); background: rgba(255, 255, 255, .025); animation: crmEv0 12s var(--ease-out) infinite both; }
.crm-feed__ev:nth-child(2) { animation-name: crmEv1; }
.crm-feed__ev:nth-child(3) { animation-name: crmEv2; }
.crm-feed__ev:nth-child(4) { animation-name: crmEv3; }
.crm-feed__ev:nth-child(5) { animation-name: crmEv4; }
@keyframes crmEv0 { 0% { opacity: .22; transform: translateX(-6px); } 4%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: .22; } }
@keyframes crmEv1 { 0%, 12% { opacity: .22; transform: translateX(-6px); } 16%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: .22; } }
@keyframes crmEv2 { 0%, 24% { opacity: .22; transform: translateX(-6px); } 28%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: .22; } }
@keyframes crmEv3 { 0%, 36% { opacity: .22; transform: translateX(-6px); } 40%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: .22; } }
@keyframes crmEv4 { 0%, 50% { opacity: .22; transform: translateX(-6px); } 54%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: .22; } }
.crm-feed__ic { position: absolute; inset-inline-start: -40px; top: 50%; display: grid; place-items: center; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; border: 1px solid rgba(90, 167, 178, .4); background: #0f1415; color: #8fd6de; }
.crm-feed__ic .ico { width: 15px; height: 15px; }
.crm-feed__ev > span:last-child { display: grid; gap: 2px; }
.crm-feed__ev b { font-size: 14.5px; font-weight: 800; }
.crm-feed__ev small { font-size: 8.5px; letter-spacing: .16em; color: var(--muted); direction: ltr; text-align: right; }
.crm-feed__ev.is-alert { border-color: rgba(224, 122, 92, .45); background: rgba(224, 122, 92, .08); }
.crm-feed__ev.is-alert .crm-feed__ic { border-color: rgba(224, 122, 92, .7); background: #2a140f; color: #ff9b78; box-shadow: 0 0 0 4px rgba(224, 122, 92, .14); }
.crm-memo { position: relative; margin-top: 30px; padding: 30px 26px 18px; border-radius: 3px 3px 3px 22px; color: #2c2218; background: linear-gradient(180deg, #f5dfae, #eccf93); box-shadow: 0 40px 60px -36px rgba(0, 0, 0, .95), 0 2px 0 rgba(0, 0, 0, .25); rotate: -1deg; }
.crm-memo::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 26px; border-radius: 0 0 0 22px; background: linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, .14) 50%, #d8b672 60%); }
.crm-memo__pin { position: absolute; top: -9px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9b78, #c9563f 60%, #8c3423); box-shadow: 0 6px 8px rgba(0, 0, 0, .45); }
.crm-memo__tag { font-size: 14px; font-weight: 900; color: #9f4d3e; }
.crm-memo p:not(.crm-memo__tag) { margin-top: 8px; font-size: 15px; line-height: 2; }
.crm-memo__sign { display: block; margin-top: 10px; font-size: 8.5px; letter-spacing: .2em; color: #8a7154; direction: ltr; text-align: left; }

/* ---------- Dashboard widget tiles (deliverables) ---------- */
.crm-wg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.crm-wg__tile { overflow: hidden; border-radius: 16px; border: 1px solid var(--line-2); background: #12100e; transition: border-color .4s, transform .5s var(--ease-out); }
.crm-wg__tile:hover { border-color: rgba(243, 194, 122, .4); transform: translateY(-4px); }
.crm-wg__viz { position: relative; height: 120px; padding: 22px 14px 10px; background: radial-gradient(rgba(255, 236, 214, .05) 1px, transparent 1.4px) 0 0 / 12px 12px, #0d0b0a; border-bottom: 1px solid rgba(255, 236, 214, .07); }
.crm-wg__dots { position: absolute; top: 9px; right: 12px; display: flex; gap: 4px; }
.crm-wg__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 236, 214, .18); }
.crm-wg__viz svg { display: block; width: 100%; height: 100%; overflow: visible; }
.crm-wg .f1 { fill: rgba(243, 194, 122, .85); }
.crm-wg .f2 { fill: rgba(90, 167, 178, .85); }
.crm-wg .f3 { fill: rgba(224, 122, 92, .85); }
.crm-wg .col { fill: rgba(255, 255, 255, .03); stroke: rgba(255, 236, 214, .12); stroke-width: 1; }
.crm-wg .ln { fill: none; stroke: rgba(255, 236, 214, .28); stroke-width: 1.3; }
.crm-wg .ln2 { fill: none; stroke: rgba(255, 236, 214, .35); stroke-width: 3; stroke-linecap: round; }
.crm-wg .dot { fill: #fff6e8; }
.crm-wg .core { fill: rgba(90, 167, 178, .15); stroke: rgba(90, 167, 178, .8); stroke-width: 1.4; }
.crm-wg .ring { fill: none; stroke: rgba(255, 236, 214, .12); stroke-width: 6; }
.crm-wg circle.ring:not([r="16"]) { stroke-width: 2; stroke: rgba(255, 236, 214, .3); }
.crm-wg .arc { fill: none; stroke: var(--gold-l); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 68 100; transform: rotate(-90deg); transform-origin: 96px 36px; }
.crm-wg .flow { stroke-dasharray: 4 5; animation: crmFlowLn 1.4s linear infinite; }
@keyframes crmFlowLn { to { stroke-dashoffset: -18; } }
.crm-wg .mv { animation: crmMv 6s var(--ease-cine) infinite; }
@keyframes crmMv { 0%, 30% { transform: none; } 45%, 80% { transform: translateX(28px); } 95%, 100% { transform: none; } }
.crm-wg .bar { transform-box: fill-box; transform-origin: 50% 100%; }
.js [data-reveal] .crm-wg__viz .bar { transform: scaleY(.1); }
.js [data-reveal].is-in .crm-wg__viz .bar { transform: none; transition: transform 1.2s var(--ease-out) calc(var(--b) * 120ms + .4s); }
.js [data-reveal] .crm-wg__viz .arc { stroke-dasharray: 0 100; }
.js [data-reveal].is-in .crm-wg__viz .arc { stroke-dasharray: 68 100; transition: stroke-dasharray 1.6s var(--ease-out) .5s; }
.crm-wg__cap { display: grid; gap: 4px; padding: 12px 16px 16px; }
.crm-wg__no { font-size: 9px; letter-spacing: .18em; color: var(--gold); direction: ltr; text-align: right; }
.crm-wg__cap h3 { font-size: 15.5px; font-weight: 900; line-height: 1.6; }

/* ---------- Related records ---------- */
.crm-rec { overflow: hidden; border-radius: 20px; border: 1px solid var(--line-2); background: linear-gradient(180deg, #15110e, #0f0c0a); box-shadow: 0 60px 100px -60px rgba(0, 0, 0, .95); }
.crm-rec__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid rgba(255, 236, 214, .08); background: rgba(255, 255, 255, .02); }
.crm-rec__head .mono { font-size: 10px; letter-spacing: .22em; color: var(--gold-l); direction: ltr; }
.crm-rec__head b { display: grid; place-items: center; min-width: 24px; height: 22px; border-radius: 7px; background: rgba(255, 236, 214, .08); font-size: 12px; font-weight: 900; }
.crm-rec__rows li + li { border-top: 1px solid rgba(255, 236, 214, .07); }
.crm-rec__row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 36px; align-items: center; gap: 14px; padding: 18px 20px; transition: background .35s; }
.crm-rec__av { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #5aa7b2, #2c6f78); font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #071314; direction: ltr; }
.crm-rec__rows li:nth-child(2) .crm-rec__av { background: linear-gradient(135deg, #f3c27a, #c98a3c); color: #1a1008; }
.crm-rec__rows li:nth-child(3) .crm-rec__av { background: linear-gradient(135deg, #e07a5c, #9f4d3e); color: #1a0a06; }
.crm-rec__txt { display: grid; gap: 4px; }
.crm-rec__txt strong { font-size: 17px; font-weight: 900; }
.crm-rec__txt small { color: var(--text-2); font-size: 14px; line-height: 1.85; }
.crm-rec__id { font-size: 9.5px; letter-spacing: .16em; color: var(--muted); direction: ltr; }
.crm-rec__go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--gold-l); transition: transform .4s var(--ease-out), background .4s; }
.crm-rec__row:hover, .crm-rec__row:focus-visible { background: rgba(243, 194, 122, .05); }
.crm-rec__row:hover .crm-rec__go, .crm-rec__row:focus-visible .crm-rec__go { transform: translateX(-4px); background: rgba(243, 194, 122, .12); }

/* ---------- New lead record (final CTA) ---------- */
.cta__visual--crm_lead { justify-items: center; }
.crm-nl { position: relative; width: min(100%, 390px); padding-top: 34px; }
.crm-nl__lane { position: absolute; top: 0; right: 0; padding: 5px 12px; border-radius: 8px 8px 0 0; border: 1px solid rgba(243, 194, 122, .3); border-bottom: 0; background: rgba(243, 194, 122, .08); font-size: 9.5px; letter-spacing: .22em; color: var(--gold-l); direction: ltr; }
.crm-nl__ghost { position: absolute; z-index: 0; inset-inline: 18px; bottom: -14px; height: 60%; border-radius: 18px; border: 1px solid rgba(255, 236, 214, .08); background: #171310; opacity: .8; }
.crm-nl__ghost + .crm-nl__ghost { inset-inline: 36px; bottom: -28px; opacity: .45; }
.crm-nl__rows li:first-child i { position: relative; }
.crm-nl__rows li:first-child i::after { content: ""; position: absolute; top: 7px; right: 10px; width: 1.5px; height: 15px; background: var(--gold-l); animation: crmCaret 1.1s steps(1) infinite; }
@keyframes crmCaret { 50% { opacity: 0; } }
.crm-nl { rotate: -2deg; }
.crm-nl__card { position: relative; z-index: 1; padding: 18px 18px 16px; border-radius: 4px 20px 20px 20px; border: 1px solid rgba(243, 194, 122, .35); background: linear-gradient(180deg, #211a15, #15110e); box-shadow: 0 0 0 4px rgba(243, 194, 122, .05), 0 60px 100px -40px rgba(0, 0, 0, .95); animation: crmDrop 9s var(--ease-out) infinite; }
@keyframes crmDrop { 0% { transform: translateY(-34px); opacity: 0; } 8% { transform: translateY(4px); opacity: 1; } 12%, 88% { transform: none; opacity: 1; } 96%, 100% { transform: none; opacity: 0; } }
.crm-nl__top { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 236, 214, .08); }
.crm-nl__av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #0d0a09; box-shadow: inset 0 0 0 1px rgba(243, 194, 122, .3); }
.crm-nl__av svg { width: 28px; height: 28px; }
.crm-nl__top > span:nth-child(2) { display: grid; gap: 2px; }
.crm-nl__top b { font-size: 16px; font-weight: 900; }
.crm-nl__top small { font-size: 9px; letter-spacing: .18em; color: var(--muted); direction: ltr; text-align: right; }
.crm-nl__badge { margin-inline-start: auto; padding: 4px 11px; border-radius: 999px; background: #8fcf9a; color: #0d2a17; font-size: 12px; font-weight: 900; animation: crmBadge 2.4s ease-in-out infinite; }
@keyframes crmBadge { 50% { box-shadow: 0 0 0 6px rgba(143, 207, 154, .18); } }
.crm-nl__rows { display: grid; gap: 10px; margin-top: 14px; }
.crm-nl__rows li { display: grid; gap: 4px; }
.crm-nl__rows small { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.crm-nl__rows i { display: block; height: 30px; border-radius: 8px; border: 1px dashed rgba(255, 236, 214, .14); background: rgba(255, 255, 255, .02); }
.crm-nl__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.crm-nl__owner { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px; background: rgba(90, 167, 178, .14); color: #8fd6de; }
.crm-nl__owner .ico { width: 14px; height: 14px; }
.crm-nl__owner b { font-size: 12.5px; font-weight: 900; color: var(--text); }
.crm-nl__stage { display: inline-flex; gap: 4px; direction: ltr; }
.crm-nl__stage i { width: 18px; height: 5px; border-radius: 3px; background: rgba(255, 236, 214, .1); }
.crm-nl__stage i:last-child { background: var(--gold-l); box-shadow: 0 0 8px rgba(243, 194, 122, .6); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.cx-hero--crm_board .cx-hero__visual { position: relative; top: auto; left: auto; z-index: 1; width: min(100%, 560px); margin: 34px auto 0; opacity: 1; pointer-events: auto; }
	.crm-toast { left: 0; }
	.crm-rail__tks { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
	.crm-rail__bar { display: none; }
	.crm-rail { gap: 30px; }
	.crm-tk__clip { margin-top: 0; }
}
@media (max-width: 860px) {
	.crm-rolo { grid-template-columns: 1fr; row-gap: 40px; max-width: 560px; margin-inline: auto; }
	.crm-path__bar { display: none; }
	.crm-path__cards { grid-template-columns: 1fr; margin-top: 0; }
	.crm-path__step { display: block; margin-bottom: 6px; }
	.crm-q__list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.cx-hero--crm_board .cx-hero__visual { left: auto; top: auto; width: 100%; opacity: 1; }
	.crm-board { padding: 12px 10px; }
	.crm-board__fa { display: none; }
	.crm-chans { gap: 6px; }
	.crm-chan { padding: 6px 10px; }
	.crm-chan b { font-size: 12px; }
	.crm-lanes { --lw: calc((100% - 15px) / 4); gap: 5px; }
	.crm-lane { min-height: 200px; padding: 5px; }
	.crm-lane__head .mono { font-size: 7px; letter-spacing: .08em; }
	.crm-slot, .crm-card { height: 48px; }
	.crm-card { padding: 6px; gap: 5px; }
	.crm-card__av { width: 20px; height: 20px; }
	.crm-card__src { display: none; }
	.crm-mover { top: 31px; right: 5px; width: calc(var(--lw) - 10px); }
	@keyframes crmMove {
		0% { top: -44px; right: calc(var(--lw) * .6); opacity: 0; transform: scale(.9); }
		5% { top: -44px; right: calc(var(--lw) * .6); opacity: 1; transform: scale(.9); }
		11%, 24% { top: 31px; right: 5px; opacity: 1; transform: none; }
		31%, 44% { top: 31px; right: calc(var(--lw) + 10px); }
		51%, 64% { top: 31px; right: calc(var(--lw) * 2 + 15px); }
		71%, 90% { top: 31px; right: calc(var(--lw) * 3 + 20px); opacity: 1; }
		96%, 100% { top: 31px; right: calc(var(--lw) * 3 + 20px); opacity: 0; }
	}
	.crm-hero { padding-bottom: 62px; }
	.crm-toast { left: auto; right: 6%; padding: 10px 14px; }
	.crm-toast__ic { width: 30px; height: 30px; }
	.crm-rolo__card { padding: 24px 20px 50px; }
	.crm-rail__tks { gap: 12px; row-gap: 24px; }
	.crm-tk__paper { padding: 18px 12px 0; }
	.crm-tk__txt { font-size: 14px; min-height: 6.6em; }
	.crm-q__head > .mono { font-size: 9px; letter-spacing: .12em; }
	.crm-q__foot > .mono:first-child { display: none; }
	.crm-feed { padding: 14px 12px; }
	.crm-memo { rotate: 0deg; padding: 28px 20px 16px; }
	.crm-nl { rotate: 0deg; }
	.crm-wg { gap: 10px; }
	.crm-wg__viz { height: 96px; padding: 20px 10px 8px; }
	.crm-wg__cap { padding: 10px 12px 14px; }
	.crm-wg__cap h3 { font-size: 14px; }
	.crm-rec__row { grid-template-columns: 42px minmax(0, 1fr) 32px; gap: 12px; padding: 16px 14px; }
	.crm-rec__av { width: 42px; height: 42px; }
	.crm-rec__id { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.crm-board__top .mono i, .crm-chan__ping, .crm-mover, .crm-card--live, .crm-card__ok, .crm-toast, .crm-toast__ic::after, .crm-tk__paper, .crm-path__seg, .crm-path__seg .crm-path__ok, .crm-path__card::before, .crm-feed__ev, .crm-wg .flow, .crm-wg .mv, .crm-nl__card, .crm-nl__badge, .crm-nl__rows li:first-child i::after { animation: none; }
	.crm-mover { display: none; }
	.crm-path__card::before { transform: none; }
	.crm-path__seg:first-child { background: linear-gradient(90deg, #e08a5c, #f3c27a); color: #1a1008; }
}