/* D&E CRM landing page (crm.html) - on top of cf.css and yf.css: the board in the hero, the small visuals, sources */
.crm-stage{position:relative;display:flex;justify-content:center;padding:10px 0}
.crm-stage:before{content:"";position:absolute;inset:8% 2%;background:radial-gradient(closest-side,rgba(166,60,152,.45),transparent);filter:blur(50px);z-index:-1}
.crm-board{width:100%;max-width:520px;background:rgba(20,22,58,.78);border:1px solid rgba(255,255,255,.14);border-radius:22px;box-shadow:0 40px 90px rgba(0,0,0,.45);backdrop-filter:blur(10px);overflow:hidden}
.crm-board-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px;color:#C9CBE6}
.crm-board-bar b{color:#fff}.crm-board-bar span:last-child{margin-inline-start:auto;color:#8F92BE}
.crm-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px}
.crm-col{background:rgba(255,255,255,.04);border-radius:14px;padding:10px;min-height:220px;border-top:3px solid var(--c)}
.crm-col-h{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#fff;margin-bottom:10px}
.crm-col-h i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.crm-col-h em{margin-inline-start:auto;font-style:normal;font-size:11px;color:#9FA2C9;background:rgba(255,255,255,.08);border-radius:999px;padding:1px 7px}
.crm-card{background:#fff;color:#14163A;border-radius:10px;padding:9px 10px;margin-bottom:8px;box-shadow:0 6px 16px rgba(0,0,0,.18);border-inline-start:3px solid var(--c)}
.crm-card b{display:block;font-size:12px;line-height:1.3}.crm-card small{display:block;font-size:11px;color:#6B6F8E;margin:2px 0 6px}
.crm-card span{display:inline-block;font-size:10px;font-weight:700;color:#A63C98;background:rgba(166,60,152,.1);border-radius:999px;padding:2px 7px}
.crm-card-hot{animation:crm-pulse 3.2s ease-in-out infinite}
@keyframes crm-pulse{0%,100%{box-shadow:0 6px 16px rgba(0,0,0,.18)}50%{box-shadow:0 0 0 4px rgba(61,220,151,.35),0 6px 16px rgba(0,0,0,.18)}}
.crm-float-1{bottom:-26px;inset-inline-start:-40px;animation-delay:-1s}
.crm-float-2{top:-30px;inset-inline-end:-24px;animation-delay:-3s}
.crm-ic-bell{background:rgba(255,176,32,.2);color:#FFC260}

/* small visuals in the feature cards */
.crm-vis-board{display:flex;gap:8px;align-items:flex-end}
.crm-vis-board span{flex:1;padding:10px 8px;border-radius:12px;background:#fff;border-top:4px solid var(--c);font-size:12px;font-weight:700;color:#14163A;text-align:center;box-shadow:0 6px 16px rgba(20,22,58,.08)}
.crm-vis-board span:nth-child(1){height:96px}.crm-vis-board span:nth-child(2){height:78px}.crm-vis-board span:nth-child(3){height:60px}.crm-vis-board span:nth-child(4){height:44px}
.crm-vis-people{display:flex;gap:10px}
.crm-vis-people i{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#DD2B81,#405DB9);box-shadow:0 0 0 3px #fff,0 6px 14px rgba(20,22,58,.15)}
.crm-vis-people i:nth-child(2){background:linear-gradient(135deg,#1791A6,#7DEBB8)}.crm-vis-people i:nth-child(3){background:linear-gradient(135deg,#A63C98,#FFC260)}

/* where the leads come from */
.crm-sources{position:relative;max-width:720px;margin:0 auto;display:grid;gap:14px;padding:28px;border-radius:24px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.crm-sources div{display:grid;grid-template-columns:170px minmax(0,1fr) 40px;gap:14px;align-items:center;color:#fff}
.crm-sources b{font-size:15px}.crm-sources em{font-style:normal;font-weight:700;text-align:end;color:#C9CBE6}
.crm-sources i{height:12px;border-radius:999px;background:linear-gradient(90deg,#DD2B81,#A63C98,#405DB9);width:var(--w)}

@media(max-width:1180px){.crm-float-1{inset-inline-start:0}.crm-float-2{inset-inline-end:0}}
@media(max-width:700px){
  .crm-float-1,.crm-float-2{display:none}
  .crm-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.crm-col:nth-child(3){display:none}
  .crm-sources div{grid-template-columns:120px minmax(0,1fr) 32px}
}
@media(prefers-reduced-motion:reduce){.crm-card-hot{animation:none}}