@charset "utf-8";
@import "wfx.css";

.crm-page{min-height:100vh;background:#fff;}

/* ==================== Hero CRM 仪表盘样机 ==================== */
.crm-dash-wrap{position:relative;width:480px;height:440px;}
.crm-dash{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:460px;height:420px;border-radius:22px;
    background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.22);
    box-shadow:0 30px 80px rgba(0,0,0,.4),inset 0 0 30px rgba(255,255,255,.06);
    backdrop-filter:blur(14px);
    overflow:hidden;animation:crmfloat 8s var(--ease) infinite;
    display:flex;flex-direction:column;
}
@keyframes crmfloat{0%,100%{transform:translate(-50%,-50%) translateY(0);}50%{transform:translate(-50%,-50%) translateY(-10px);}}
.crm-dash-top{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.12);}
.crm-dots{display:flex;gap:7px;}
.crm-dots i{width:11px;height:11px;border-radius:50%;display:block;}
.crm-dots i:nth-child(1){background:#ff5f57;}
.crm-dots i:nth-child(2){background:#febc2e;}
.crm-dots i:nth-child(3){background:#28c840;}
.crm-dash-title{font-size:13.5px;font-weight:600;color:#eaf2ff;}
.crm-dash-body{flex:1;display:flex;min-height:0;}
.crm-dash-side{width:54px;flex:none;border-right:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 0;background:rgba(255,255,255,.03);}
.crm-dash-side span{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);font-size:15px;}
.crm-dash-side span.active{background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff;}
.crm-dash-main{flex:1;padding:16px;display:flex;flex-direction:column;gap:14px;min-width:0;}
.crm-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.crm-kpi-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 12px;}
.crm-kpi-card b{display:block;font-size:17px;font-weight:800;color:#fff;line-height:1.1;}
.crm-kpi-card span{font-size:11px;color:#9fb6e6;}
.crm-chart{flex:1;min-height:60px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px;display:flex;align-items:flex-end;}
.crm-bars{flex:1;display:flex;align-items:flex-end;gap:8px;height:100%;}
.crm-bars span{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--blue-l),rgba(32,106,228,.35));}
.crm-list{display:flex;flex-direction:column;gap:8px;}
.crm-li{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:8px 12px;}
.crm-li > i{width:30px;height:30px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#fff;font-size:13px;}
.crm-li b{display:block;font-size:12px;color:#fff;font-weight:600;}
.crm-li span{font-size:11px;color:#9fb6e6;}
.crm-li em{margin-left:auto;font-style:normal;font-size:13px;font-weight:700;color:var(--gold);}

.crm-float-1{top:-6px;right:6px;animation-delay:.4s;}
.crm-float-2{bottom:64px;right:-22px;animation-delay:1.6s;}
.crm-float-3{bottom:8px;left:-12px;animation-delay:2.6s;}

/* ==================== 板块背景交替（白-灰-深蓝-白-灰） + 扁平去阴影 ==================== */
.crm-advantage{background:#fff;}
.crm-scenarios{background:var(--bg-soft);}
.crm-tech{background:#fff;}
.crm-cases{background:var(--bg-soft);}

.wfx-adv,.wfx-feat,.wfx-scn,.wfx-tech{box-shadow:none;}
.wfx-adv:hover,.wfx-feat:hover,.wfx-scn:hover,.wfx-tech:hover{box-shadow:none;}
.wfx-scn::after{display:none;}

/* ==================== 客户案例 ==================== */
.crm-case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.crm-case{position:relative;display:flex;flex-direction:column;padding:36px 32px;border-radius:var(--r);background:#fff;border:1px solid var(--line);overflow:hidden;transition:transform .4s var(--ease),border-color .4s var(--ease);}
.crm-case::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);}
.crm-case:hover{transform:translateY(-8px);border-color:rgba(32,106,228,.28);}
.crm-case:hover::before{transform:scaleX(1);}
.crm-case-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.crm-case-ic{width:50px;height:50px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(32,106,228,.1),rgba(6,182,212,.1));border:1px solid rgba(32,106,228,.14);font-size:22px;color:var(--blue);}
.crm-case-badge{font-size:12px;font-weight:700;color:var(--gold-d);background:rgba(224,169,59,.12);border:1px solid rgba(224,169,59,.2);padding:5px 12px;border-radius:50px;}
.crm-case h4{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:10px;}
.crm-case p{font-size:14px;color:var(--txt);line-height:1.8;margin-bottom:20px;flex:1;}
.crm-case-stats{display:flex;gap:14px;border-top:1px dashed var(--line);padding-top:18px;}
.crm-case-stats div{flex:1;}
.crm-case-stats b{display:block;font-size:24px;font-weight:800;background:linear-gradient(120deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.crm-case-stats span{font-size:12.5px;color:var(--txt-2);}

/* ==================== 响应式 ==================== */
@media (max-width:1100px){
    .crm-dash-wrap{transform:scale(.92);}
    .crm-case-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
    .crm-dash-wrap{transform:scale(.8);margin-top:-10px;}
    .crm-case-grid{grid-template-columns:1fr;}
}
@media (max-width:480px){
    .crm-dash-wrap{transform:scale(.66);}
}