.crm-dashboard{animation:crmHeroFloat 5.5s ease-in-out infinite;position:relative;isolation:isolate}.crm-dashboard:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,transparent 15%,#0ea5e918,transparent 65%);animation:crmHeroSheen 4.2s ease-in-out infinite;z-index:-1}.crm-float-top{animation:crmHeroBadge 4.8s ease-in-out infinite}.crm-float-bottom{animation:crmHeroBadge 5.6s 1s ease-in-out infinite}.crm-live b{animation:crmHeroLive 1.6s ease-out infinite}.crm-metrics>div{animation:crmHeroMetric 4.5s ease-in-out infinite}.crm-metrics>div:nth-child(2){animation-delay:.5s}.crm-metrics>div:nth-child(3){animation-delay:1s}.crm-pipeline article{animation:crmHeroPipeline 6s ease-in-out infinite}.crm-pipeline>div:nth-child(2) article{animation-delay:2s}.crm-pipeline>div:nth-child(3) article{animation-delay:4s}.crm-task{animation:crmHeroTask 4.5s ease-in-out infinite}.crm-task-check{animation:crmHeroCheck 4.5s ease-in-out infinite}
@keyframes crmHeroFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}@keyframes crmHeroBadge{0%,100%{translate:0 0}50%{translate:0 -8px}}@keyframes crmHeroLive{0%{box-shadow:0 0 0 0 #22c98088}100%{box-shadow:0 0 0 9px #22c98000}}@keyframes crmHeroSheen{0%,100%{opacity:.3}50%{opacity:1}}@keyframes crmHeroMetric{0%,100%{border-color:#157ba44d}50%{border-color:#18bfff99;box-shadow:0 0 16px #0ea5e911}}@keyframes crmHeroPipeline{0%,12%,100%{border-color:#ffffff0c;box-shadow:none}25%,40%{border-color:#0cbaf0aa;box-shadow:0 0 18px #0ea5e91a}}@keyframes crmHeroTask{0%,100%{border-color:#16895755}50%{border-color:#22c980aa;box-shadow:0 0 18px #22c98012}}@keyframes crmHeroCheck{0%,100%{scale:1}50%{scale:1.15}}@media(prefers-reduced-motion:reduce){.crm-dashboard,.crm-dashboard:before,.crm-float,.crm-live b,.crm-metrics>div,.crm-pipeline article,.crm-task,.crm-task-check{animation:none}}
/* Dimensional CRM hero with distinct pipeline colors. */
.crm-visual{perspective:1300px}.crm-dashboard{transform:perspective(1300px) rotateX(var(--crm-tilt-x,3deg)) rotateY(var(--crm-tilt-y,-7deg)) rotateZ(-1deg);transform-style:preserve-3d;background:linear-gradient(135deg,#213d59ee,#101c36f5 65%,#182748);border-color:#6fcffb66;box-shadow:0 35px 80px #0008,12px 12px 0 -6px #15314c,15px 15px 0 -6px #3b93bc55,inset 0 1px 0 #c3eaff44;transition:transform .25s ease-out}.crm-dash-main{background:linear-gradient(140deg,#132a43dd,#111b32ee);border-color:#76c8fa25}.crm-sidebar{background:#0a182bcc}.crm-metrics>div:nth-child(1){background:linear-gradient(135deg,#0b5c7a77,#133b5366);border-color:#25c9f077}.crm-metrics>div:nth-child(2){background:linear-gradient(135deg,#6345a766,#352d6166);border-color:#a18bfa77}.crm-metrics>div:nth-child(3){background:linear-gradient(135deg,#126c6266,#16473d66);border-color:#42d6bc77}.crm-metrics>div:nth-child(1) strong{color:#62ddff}.crm-metrics>div:nth-child(2) strong{color:#c5b8ff}.crm-metrics>div:nth-child(3) strong{color:#79f2cf}.crm-metrics small{color:#c4d2e8}.crm-metrics span{color:#9aadc7}.crm-pipeline>div:nth-child(1) article{background:linear-gradient(150deg,#204763,#152e45);border-color:#3cc5ff55}.crm-pipeline>div:nth-child(2) article{background:linear-gradient(150deg,#44385d,#252945);border-color:#aa87fc66}.crm-pipeline>div:nth-child(3) article{background:linear-gradient(150deg,#174d47,#1a3440);border-color:#35d6b966}.crm-pipeline article{animation:crmHeroInnerLift 6s ease-in-out infinite}.crm-pipeline>div:nth-child(2) article{animation-delay:2s}.crm-pipeline>div:nth-child(3) article{animation-delay:4s}.crm-pipeline em{color:#a1d5f2}.crm-task{background:linear-gradient(110deg,#07524388,#0b392ccc);border-color:#2ee0ac66}.crm-float-top{background:linear-gradient(120deg,#24465c,#283253);border-color:#93d9ff55;box-shadow:0 12px 25px #0005,0 0 20px #009de512}.crm-float-bottom{background:linear-gradient(120deg,#183f51,#16433f);border-color:#5ad6bc66}.crm-live{color:#9bf1d1}.crm-dash-header strong{color:#eef8ff}.crm-sidebar .crm-sidebar-active{background:linear-gradient(110deg,#095c7a88,#23466f88)}
@keyframes crmHeroInnerLift{0%,12%,100%{translate:0 0;box-shadow:0 3px 8px #0002}25%,40%{translate:0 -7px;box-shadow:0 12px 22px #0004,0 0 14px #62cfff22}}
@media(max-width:800px){.crm-dashboard{transform:perspective(1300px) rotateX(2deg) rotateY(-3deg);box-shadow:0 20px 55px #0007,7px 7px 0 -4px #28486a}}
@media(prefers-reduced-motion:reduce){.crm-dashboard{transform:none;transition:none}.crm-pipeline article{animation:none}}
/* Brighter blue-violet CRM illustration palette. */
.crm-dashboard{background:linear-gradient(135deg,#344d83,#242f60 55%,#183f59);border-color:#8cb9ff99;box-shadow:0 30px 75px #0007,12px 12px 0 -6px #284777,15px 15px 0 -6px #67aaff55,inset 0 1px 0 #d7e8ff55}.crm-dash-main{background:linear-gradient(145deg,#263d69,#202e52);border-color:#95baff44}.crm-sidebar{background:#203257}.crm-sidebar>div{color:#c6d7ef}.crm-sidebar .crm-sidebar-active{background:linear-gradient(100deg,#137bb1,#4667b8);border-color:#6ccfff88}.crm-dash-title,.crm-dash-header strong{color:#fff}.crm-metrics>div:nth-child(1){background:linear-gradient(135deg,#116d96,#204e79);border-color:#67d5ff88}.crm-metrics>div:nth-child(2){background:linear-gradient(135deg,#7050b8,#443d84);border-color:#c7abff88}.crm-metrics>div:nth-child(3){background:linear-gradient(135deg,#137e79,#235967);border-color:#7aead288}.crm-metrics strong{color:#fff!important}.crm-metrics small{color:#e0edff}.crm-metrics span{color:#c0d4ea}.crm-pipeline>div:nth-child(1) article{background:linear-gradient(145deg,#235d88,#28486c);border-color:#70ceff88}.crm-pipeline>div:nth-child(2) article{background:linear-gradient(145deg,#665193,#3b4069);border-color:#c7a8ff88}.crm-pipeline>div:nth-child(3) article{background:linear-gradient(145deg,#256e67,#294e60);border-color:#79e7cc88}.crm-pipeline p{color:#d0dced}.crm-pipeline em{color:#b4edff}.crm-pipeline small{color:#c6d7ed}.crm-task{background:linear-gradient(110deg,#0d7059,#195443);border-color:#58e5b8aa}.crm-task small{color:#bbe5d8}.crm-float-top{background:linear-gradient(110deg,#425d99,#514681);border-color:#b0c9ff88}.crm-float-bottom{background:linear-gradient(110deg,#226584,#246558);border-color:#8bdecfaa}.crm-dash-footer{color:#c0d1e8}.crm-sidebar .crm-sidebar-bottom{color:#9bb4d3}
/* Fenizo palette: dark navy, cyan-blue and restrained teal. */
.crm-dashboard{background:linear-gradient(135deg,#19354a,#101d2d 60%,#102c36);border-color:#37b9ea66;box-shadow:0 30px 75px #0007,12px 12px 0 -6px #10293d,15px 15px 0 -6px #159bc744,inset 0 1px 0 #9de1ff22}.crm-dash-main{background:linear-gradient(145deg,#122b3e,#0d1b2b);border-color:#41b9e52e}.crm-sidebar{background:#102333}.crm-sidebar>div{color:#a9bdce}.crm-sidebar .crm-sidebar-active{background:linear-gradient(100deg,#075978,#10435f);border-color:#22b9e666}.crm-metrics>div:nth-child(1){background:linear-gradient(135deg,#075775,#123951);border-color:#0ea5e966}.crm-metrics>div:nth-child(2){background:linear-gradient(135deg,#154967,#173449);border-color:#269cc466}.crm-metrics>div:nth-child(3){background:linear-gradient(135deg,#10564f,#153b43);border-color:#28bca066}.crm-metrics strong{color:#e7f7ff!important}.crm-metrics small{color:#bed8e8}.crm-metrics span{color:#8eafc3}.crm-pipeline>div:nth-child(1) article{background:linear-gradient(145deg,#15415b,#162d40);border-color:#0ea5e955}.crm-pipeline>div:nth-child(2) article{background:linear-gradient(145deg,#1b3d54,#192b3e);border-color:#379fbe55}.crm-pipeline>div:nth-child(3) article{background:linear-gradient(145deg,#174d47,#172f3b);border-color:#29bc9b55}.crm-avatar-violet{color:#65cfff;background:#0c729c33}.crm-dot-violet{background:#3ab6dd}.crm-pipeline p{color:#a8bdce}.crm-pipeline em{color:#75c9e8}.crm-pipeline small{color:#aac3d5}.crm-task{background:linear-gradient(110deg,#0a4338,#102e2c);border-color:#1db98c66}.crm-task small{color:#9bc3b6}.crm-float-top{background:linear-gradient(110deg,#20445b,#1b3447);border-color:#42bce766}.crm-float-bottom{background:linear-gradient(110deg,#173f53,#153f3c);border-color:#30bfa066}.crm-dash-footer{color:#95b1c5}.crm-sidebar .crm-sidebar-bottom{color:#7093ac}
/* Interactive CRM illustration: layered depth, entrance and deliberate hover feedback. */
.crm-visual { --crm-light-x: 50%; --crm-light-y: 40%; isolation: isolate; }
.crm-visual::before { content: ''; position: absolute; inset: 8% -4%; border-radius: 50%; background: radial-gradient(ellipse, #0ba8e426, transparent 68%); filter: blur(24px); z-index: -1; pointer-events: none; }
.crm-dashboard { animation: crmSceneEnter .9s cubic-bezier(.2,.8,.2,1) both, crmHeroFloat 7s 1s ease-in-out infinite; }
.crm-dashboard::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--crm-light-x) var(--crm-light-y), #6edfff18, transparent 48%); }
.crm-dash-header { border-bottom: 1px solid #54c7ed22; padding-bottom: 14px; }
.crm-metrics > div, .crm-pipeline article, .crm-sidebar > div, .crm-task, .crm-float { transition: translate .28s ease, box-shadow .28s ease, border-color .28s ease, background-color .28s ease; }
.crm-metrics > div { position: relative; overflow: hidden; }
.crm-metrics > div::after { content: ''; position: absolute; bottom: 0; left: 0; height: 3px; width: 72%; background: linear-gradient(90deg, #12b6ef, #77e6fa); transform-origin: left; animation: crmProgressReveal 1.3s .5s both; }
.crm-metrics > div:nth-child(2)::after { width: 58%; animation-delay: .7s; }
.crm-metrics > div:nth-child(3)::after { width: 84%; background: linear-gradient(90deg, #18b99b, #81efd0); animation-delay: .9s; }
.crm-pipeline article { animation: crmCardEnter .7s both; }
.crm-pipeline > div:nth-child(2) article { animation-delay: .2s; }
.crm-pipeline > div:nth-child(3) article { animation-delay: .4s; }
.crm-float { backdrop-filter: blur(12px); box-shadow: 0 12px 30px #0005; }
@media (hover: hover) and (pointer: fine) {
 .crm-visual:hover .crm-dashboard { animation-play-state: paused; border-color: #69d8ff99; }
 .crm-metrics > div:hover, .crm-pipeline article:hover { animation: none; translate: 0 -8px; border-color: #65d9ff; box-shadow: 0 14px 28px #0005, 0 0 22px #0ba8e426; }
 .crm-pipeline > div:nth-child(3) article:hover { border-color: #64e4bc; }
 .crm-sidebar > div:not(.crm-sidebar-bottom):hover { background-color: #0ca8e424; color: #e7f9ff; translate: 3px 0; }
 .crm-task:hover { animation: none; translate: 0 -3px; border-color: #64e4bc; box-shadow: 0 8px 22px #1dc99b20; }
 .crm-float:hover { animation-play-state: paused; translate: 0 -5px; border-color: #82e3ff; box-shadow: 0 14px 32px #0006, 0 0 22px #0ba8e430; }
}
@keyframes crmSceneEnter { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes crmCardEnter { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes crmProgressReveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 800px) { .crm-dashboard { transform: none; } .crm-visual::before { inset: 0; } }
@media (prefers-reduced-motion: reduce) {
 .crm-visual *, .crm-visual *::before, .crm-visual *::after { animation: none !important; transition: none !important; }
 .crm-dashboard { transform: none; }
 .crm-metrics > div:hover, .crm-pipeline article:hover, .crm-task:hover, .crm-float:hover, .crm-sidebar > div:hover { translate: none; }
}