@charset "utf-8";

/* ════════════════════ 作用域与变量 ═══════════════════ */
body.cl-body{
    background:#f4f6fb;
    color:#2a3142;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
    overflow-x:hidden;
}
body.cl-body *,
body.cl-body *::before,
body.cl-body *::after{ box-sizing:border-box; }

.cl-body{
    --gold:#206ae4;
    --gold-2:#4d8fff;
    --gold-deep:#1565c0;
    --ink:#2a3142;
    --muted:#8b94a7;
    --line:rgba(40,50,70,.10);
    --card:#ffffff;
    --card-2:#f7f9fd;
    --shadow:0 18px 44px rgba(38,50,80,.10);
    --shadow-h:0 26px 60px rgba(38,50,80,.18);
}

/* ═══════════════════ Hero 视觉（保持深色） ═════════════════ */
.cl-hero{
    position:relative;
    overflow:hidden;
    padding:166px 0 150px;
    background:
        radial-gradient(1100px 560px at 22% -10%, rgba(32,106,228,.16), transparent 60%),
        radial-gradient(900px 520px at 96% 120%, rgba(77,143,255,.12), transparent 60%),
        linear-gradient(180deg,#0b0f18 0%, #0a0d14 100%);
}
.cl-hero-bg{ position:absolute; inset:0; z-index:0; }
.cl-hero-grid{
    position:absolute; inset:-2px;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(900px 500px at 50% 30%, #000 30%, transparent 75%);
            mask-image:radial-gradient(900px 500px at 50% 30%, #000 30%, transparent 75%);
}
.cl-hero-glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; }
.cl-hero-glow-1{ width:520px; height:520px; left:-120px; top:-80px;
    background:radial-gradient(circle, rgba(32,106,228,.42), transparent 70%); }
.cl-hero-glow-2{ width:460px; height:460px; right:-100px; bottom:-120px;
    background:radial-gradient(circle, rgba(77,143,255,.30), transparent 70%); }

.cl-hero-shape{ position:absolute; }
.cl-hs-ring{ border:1px solid rgba(32,106,228,.24); border-radius:50%; }
.cl-hs-1{ width:240px; height:240px; right:8%; top:14%; animation:clFloat 9s ease-in-out infinite; }
.cl-hs-2{ width:120px; height:120px; left:6%; bottom:18%; animation:clFloat 11s ease-in-out infinite reverse; }
.cl-hs-dot{ width:10px; height:10px; border-radius:50%; background:var(--gold-2); box-shadow:0 0 18px rgba(77,143,255,.85); }
.cl-hs-3{ right:22%; bottom:24%; animation:clPulse 4s ease-in-out infinite; }
.cl-hs-4{ left:14%; top:26%; animation:clPulse 5s ease-in-out infinite .8s; }
.cl-hs-line{ width:80px; height:1px; background:linear-gradient(90deg,transparent,var(--gold-2),transparent); right:30%; top:40%; transform:rotate(-18deg); }

@keyframes clFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-22px) } }
@keyframes clPulse{ 0%,100%{ opacity:.35; transform:scale(.8) } 50%{ opacity:1; transform:scale(1.2) } }

.cl-hero-inner{
    position:relative; z-index:2;
    display:grid; grid-template-columns:1.15fr .85fr; gap:64px;
    align-items:center;
}
.cl-hero-copy{ text-align:left; }
.cl-hero-badge{
    display:inline-flex; align-items:center; gap:9px;
    padding:9px 22px; border:1px solid rgba(32,106,228,.30); border-radius:999px;
    background:rgba(255,255,255,.05); color:var(--gold-2);
    font-size:13px; letter-spacing:2px; text-transform:uppercase;
    backdrop-filter:blur(6px);
}
.cl-hero-badge i{ font-size:13px; }
.cl-hero-title{
    margin:30px 0 0;
    font-family:"Noto Serif SC","Source Han Serif SC","Songti SC",serif;
    font-weight:800; font-size:62px; line-height:1.24; color:#fff;
    letter-spacing:1px;
}
.cl-accent{
    background:linear-gradient(90deg,var(--gold-2),var(--gold));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cl-hero-line{
    width:96px; height:3px; margin:34px 0 0; border-radius:3px;
    background:linear-gradient(90deg,var(--gold-2),transparent);
}
.cl-hero-desc{
    margin:26px 0 0; max-width:520px;
    font-size:16px; line-height:2; color:#aeb6c6;
}
.cl-hero-actions{ display:flex; gap:16px; justify-content:flex-start; flex-wrap:wrap; margin-top:42px; }

/* 右侧玻璃数据面板 + 曲线图 */
.cl-hero-panel{
    display:block;
    padding:34px 38px 28px; border-radius:24px;
    background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(32,106,228,.22);
    box-shadow:0 30px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter:blur(12px);
}
.cl-panel-head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
    margin-bottom:14px;
}
.cl-panel-label{ font-size:13px; color:#aeb6c6; letter-spacing:1px; }
.cl-panel-total{
    font-family:"Noto Serif SC",serif; font-weight:800; font-size:42px; line-height:1;
    background:linear-gradient(180deg,#fff,var(--gold-2));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cl-panel-total i{ font-style:normal; font-size:24px; color:var(--gold-2); margin-left:3px; }

.cl-chart svg{ width:100%; height:auto; display:block; overflow:visible; }
.cl-grid{ stroke:rgba(255,255,255,.07); stroke-width:1; stroke-dasharray:3 5; }
.cl-line{
    stroke-linecap:round; stroke-linejoin:round;
    filter:drop-shadow(0 4px 12px rgba(32,106,228,.42));
}
.cl-area{ animation:clFade 1.4s ease .5s both; }
@keyframes clFade{ from{ opacity:0 } to{ opacity:1 } }
.cl-pt{ cursor:pointer; }
.cl-dot{ fill:var(--gold-2); stroke:#0a0d14; stroke-width:2; transition:transform .2s ease, fill .2s ease, stroke .2s ease; transform-box:fill-box; transform-origin:center; }
.cl-dot-sm{ fill:#fff; stroke:var(--gold); }
.cl-pt:hover .cl-dot{ transform:scale(1.9); }
/* 峰值点高亮 */
.cl-dot-peak{ fill:#fff; stroke:var(--gold); stroke-width:3; filter:drop-shadow(0 0 8px rgba(77,143,255,.9)); }
.cl-pt:hover .cl-dot-peak{ transform:scale(1.7); }
/* 选中年（与列表筛选联动）高亮 */
.cl-pt.is-active .cl-dot{ fill:var(--gold); stroke:#fff; stroke-width:3; transform:scale(1.8); filter:drop-shadow(0 0 10px rgba(77,143,255,.95)); }
.cl-pt.is-active .cl-tip{ opacity:1; }
.cl-tip{
    fill:#fff; font-size:12px; font-weight:700; text-anchor:middle; font-family:inherit;
    opacity:0; pointer-events:none; transition:opacity .18s ease;
    paint-order:stroke; stroke:#0a0d14; stroke-width:3px; stroke-linejoin:round;
}
.cl-pt:hover .cl-tip{ opacity:1; }
.cl-axis{ fill:#8b94a7; font-size:9.5px; letter-spacing:.2px; text-anchor:middle; font-family:inherit; }
.cl-chart-hint{ margin-top:12px; font-size:12.5px; color:#7e8aa3; letter-spacing:.4px; }
.cl-chart-hint::before{ content:'▹ '; color:var(--gold-2); }
.cl-panel-foot{ margin-top:10px; font-size:13px; color:#8b94a7; letter-spacing:.5px; }
.cl-panel-foot b{ color:var(--gold-2); font-weight:700; }
.cl-btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 30px; border-radius:999px; font-size:15px; font-weight:600;
    text-decoration:none; transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.cl-btn-gold{
    color:#fff;
    background:linear-gradient(135deg,var(--gold-2),var(--gold));
    box-shadow:0 12px 30px rgba(32,106,228,.32);
}
.cl-btn-gold:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(32,106,228,.45); color:#fff; }
.cl-btn-ghost{
    color:#fff; border:1px solid rgba(255,255,255,.55);
    background:rgba(255,255,255,.12); backdrop-filter:blur(6px);
}
.cl-btn-ghost:hover{ transform:translateY(-3px); border-color:var(--gold-2); background:rgba(255,255,255,.1); color:#fff; }

/* ═══════════════════ 筛选条（浅色吸顶） ═══════════════════ */
.cl-filter{
    position:sticky; top:0; z-index:30;
    background:rgba(255,255,255,.86); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    box-shadow:0 6px 22px rgba(38,50,80,.05);
}
.cl-filter-inner{
    display:flex; align-items:center; justify-content:space-between;
    gap:18px; flex-wrap:wrap; padding:16px 40px;
}
.cl-crumbs{ display:flex; align-items:center; gap:9px; color:var(--muted); font-size:14px; }
.cl-crumbs i{ font-size:12px; color:var(--gold-deep); }
.cl-crumbs a{ color:var(--muted); text-decoration:none; transition:color .25s; }
.cl-crumbs a:hover{ color:var(--gold-deep); }
.cl-crumbs span{ color:var(--ink); font-weight:600; }
.cl-cats{ display:flex; flex-wrap:wrap; gap:10px; }
.cl-cat{
    padding:7px 18px; border-radius:999px; font-size:14px; text-decoration:none;
    color:#5a647a; border:1px solid var(--line);
    background:#fff; transition:all .25s ease;
}
.cl-cat:hover{ color:var(--gold-deep); border-color:var(--gold); transform:translateY(-2px); }
.cl-cat.active{
    color:#fff; font-weight:600;
    background:linear-gradient(135deg,var(--gold),var(--gold-deep));
    border-color:transparent; box-shadow:0 8px 20px rgba(32,106,228,.30);
}

/* 年份筛选状态条 */
.cl-year-filter{
    width:100%; margin-top:14px; padding:11px 18px;
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    font-size:14px; color:#3a4458;
    background:linear-gradient(135deg, rgba(32,106,228,.10), rgba(77,143,255,.06));
    border:1px solid rgba(32,106,228,.28); border-radius:12px;
}
.cl-year-filter i{ color:var(--gold-deep); }
.cl-year-filter b{ color:var(--gold-deep); font-size:16px; }
.cl-year-clear{
    margin-left:auto; color:#5a647a; text-decoration:none; font-size:13px;
    padding:5px 12px; border-radius:999px; border:1px solid var(--line); background:#fff;
    transition:all .25s;
}
.cl-year-clear:hover{ color:var(--gold-deep); border-color:var(--gold); }
.cl-empty{
    margin:32px 0 8px; padding:40px 24px; text-align:center;
    color:var(--muted); font-size:15px; border:1px dashed var(--line); border-radius:14px;
    background:rgba(255,255,255,.5);
}
.cl-note{
    margin:18px 0 0; text-align:center;
    font-size:13px; color:var(--muted); letter-spacing:.02em;
}

/* ═══════════════════ 案例板块（与首页一致） ═══════════════════ */
.service-title{text-align:center;margin-bottom:clamp(16px,2vw,24px);}
.service-title-tag{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.2vw,16px);margin-bottom:clamp(12px,1.5vw,20px);}
.tag-line{display:block;width:clamp(20px,2.5vw,36px);height:1px;background:linear-gradient(90deg,transparent,rgba(32,106,228,.4),transparent);}
.tag-text{font-size:clamp(11px,.85vw,13px);font-weight:600;letter-spacing:0.18em;color:#206ae4;text-transform:uppercase;}
.service-title-main{font-size:clamp(36px,4.2vw,56px);font-weight:800;margin:0;line-height:1.2;letter-spacing:0.06em;}
.title-word{display:inline-block;color:#0f172a;transition:all .4s ease;}
.title-word:hover{color:#206ae4;transform:translateY(-2px);}
.title-accent{color:#206ae4;}
.service-title-divider{display:flex;align-items:center;justify-content:center;gap:clamp(8px,.8vw,12px);margin:clamp(14px,1.5vw,22px) auto 0;}
.divider-line{display:block;width:clamp(30px,3.5vw,50px);height:2px;background:linear-gradient(90deg,transparent,rgba(32,106,228,.35),transparent);}
.divider-diamond{display:block;width:8px;height:8px;background:#206ae4;transform:rotate(45deg);border-radius:1px;}
.service-title-desc{font-size:clamp(14px,1vw,16px);color:#64748b;margin:clamp(12px,1.2vw,18px) 0 0;line-height:1.6;max-width:clamp(360px,38vw,500px);margin-left:auto;margin-right:auto;white-space:nowrap;}

.case-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
    margin-top:45px;
}
.case-logo{
    width:calc((100% - 140px) / 8);
    height:80px;
    background:#ffffff;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px 16px;
    border:1px solid #eef1f7;
    transition:all .3s ease;
}
.case-logo:hover{
    border-color:#206ae4;
    box-shadow:0 6px 20px rgba(32,106,228,.08);
    transform:translateY(-3px);
}
.case-logo img{
    max-width:100%;
    max-height:52px;
    width:auto;
    height:auto;
    object-fit:contain;
    filter:grayscale(0%);
    opacity:1;
    transition:all .3s ease;
}
.case-logo:hover img{
    transform:scale(1.04);
}
.case-more{
    text-align:center;
    margin-top:45px;
}
.case-more a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 36px;
    font-size:14px;
    font-weight:500;
    color:#206ae4;
    background:#ffffff;
    border:1.5px solid #e2e8f0;
    border-radius:8px;
    text-decoration:none;
    transition:all .25s ease;
}
.case-more a i{
    font-size:13px;
    transition:transform .25s ease;
}
.case-more a:hover{
    background:#206ae4;
    color:#fff;
    border-color:#206ae4;
    box-shadow:0 4px 16px rgba(32,106,228,.15);
}
.case-more a:hover i{transform:translateX(4px);}

/* 响应式 */
@media (max-width:1200px){
    .case-logo{width:calc((100% - 100px) / 6);height:75px;}
}
@media (max-width:900px){
    .case-logo{width:calc((100% - 80px) / 5);height:70px;}
    .case-logo img{max-height:45px;}
}
@media (max-width:640px){
    .case-grid{gap:12px;}
    .case-logo{width:calc((100% - 48px) / 4);height:60px;padding:8px 10px;}
    .case-logo img{max-height:35px;}
}

/* ═══════════════════ 列表区（浅色） ═══════════════════ */
.cl-main{ padding:64px 0 80px; position:relative; }
.cl-section-head{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:20px; flex-wrap:wrap; margin-bottom:44px;
}
.cl-sh-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; letter-spacing:3px; color:var(--gold-deep);
    text-transform:uppercase; font-weight:600;
}
.cl-sh-title{
    margin:12px 0 0; font-size:34px; font-weight:800; color:var(--ink);
    font-family:"Noto Serif SC",serif; letter-spacing:.5px;
}
.cl-sh-sub{ margin:10px 0 0; color:var(--muted); font-size:15px; }
.cl-sh-cta{
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 24px; border-radius:999px; text-decoration:none;
    color:var(--gold-deep); border:1px solid var(--gold); background:#fff;
    font-size:14px; font-weight:600; transition:all .25s ease;
}
.cl-sh-cta:hover{ color:#fff; background:linear-gradient(135deg,var(--gold),var(--gold-deep)); border-color:transparent; }

/* Logo 网格 */
.cl-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
}
.cl-card{
    position:relative; border-radius:18px; overflow:hidden;
    background:linear-gradient(180deg,#ffffff,#fafbfe);
    border:1px solid var(--line);
    box-shadow:0 10px 26px rgba(38,50,80,.06);
    transition:transform .4s ease, border-color .4s ease, box-shadow .4s ease;
    opacity:0; transform:translateY(26px);
    animation:clRise .7s cubic-bezier(.2,.7,.3,1) forwards;
}
.cl-card:nth-child(2){ animation-delay:.05s }
.cl-card:nth-child(3){ animation-delay:.10s }
.cl-card:nth-child(4){ animation-delay:.15s }
.cl-card:nth-child(5){ animation-delay:.20s }
.cl-card:nth-child(6){ animation-delay:.25s }
.cl-card:nth-child(7){ animation-delay:.30s }
.cl-card:nth-child(8){ animation-delay:.35s }
.cl-card:nth-child(n+9){ animation-delay:.40s }
@keyframes clRise{ to{ opacity:1; transform:translateY(0) } }

.cl-card:hover{
    border-color:rgba(32,106,228,.55);
    box-shadow:var(--shadow-h), 0 0 0 1px rgba(32,106,228,.20) inset;
}

/* 单个 logo 展示区 */
.cl-card-logo{
    position:relative; aspect-ratio:16/10; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    padding:30px;
    background:
        radial-gradient(120% 120% at 50% 0%, #ffffff 0%, #f1f4fa 100%);
    transition:background .4s ease;
}
.cl-card:hover .cl-card-logo{
    background:
        radial-gradient(120% 120% at 50% 0%, #f5f9ff 0%, #eaf2ff 100%);
}
.cl-card-logoimg{
    max-width:78%; max-height:78%;
    width:auto; height:auto; object-fit:contain;
    filter:grayscale(100%) opacity(.72);
    transition:filter .45s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}
.cl-card:hover .cl-card-logoimg{
    filter:grayscale(0%) opacity(1);
    transform:scale(1.06);
}

/* ═══════════════════ 分页（浅色） ═══════════════════ */
.cl-pages{ margin-top:54px; display:flex; justify-content:center; }
.xiaoercms-pagination{ width:100%; }
.xiaoercms-pg-inner{
    display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
}
.xiaoercms-pg-meta{ color:var(--muted); font-size:14px; }
.xiaoercms-pg-meta b{ color:var(--gold-deep); }
.xiaoercms-pg-btns{ display:flex; align-items:center; gap:8px; }
.xiaoercms-pg-btn{
    min-width:42px; height:42px; padding:0 12px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:11px; text-decoration:none; font-size:14px; color:#5a647a;
    border:1px solid var(--line); background:#fff;
    transition:all .25s ease;
}
.xiaoercms-pg-btn:hover{ color:var(--gold-deep); border-color:var(--gold); transform:translateY(-2px); box-shadow:0 8px 18px rgba(32,106,228,.16); }
.xiaoercms-pg-btn.active{
    color:#fff; font-weight:700;
    background:linear-gradient(135deg,var(--gold),var(--gold-deep));
    border-color:transparent; box-shadow:0 8px 20px rgba(32,106,228,.32);
}
.xiaoercms-pg-btn.pg-disabled{ opacity:.4; pointer-events:none; }
.xiaoercms-pg-dots{ color:var(--muted); }
.xiaoercms-pg-jump{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:14px; }
.xiaoercms-pg-input{
    width:56px; height:38px; border-radius:9px; text-align:center;
    background:#fff; border:1px solid var(--line); color:var(--ink);
    outline:none;
}
.xiaoercms-pg-input:focus{ border-color:var(--gold); }

/* ═══════════════════ CTA（保持深色） ═══════════════════ */
.cl-cta{ position:relative; overflow:hidden; padding:84px 0; margin-top:20px;
    background:linear-gradient(180deg,#0a0d14,#0c1019); border-top:1px solid rgba(32,106,228,.20); }
.cl-cta-bg{ position:absolute; inset:0; }
.cl-cta-glow{ position:absolute; width:560px; height:560px; left:50%; top:50%; transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(32,106,228,.14), transparent 65%); filter:blur(60px); }
.cl-cta-grid{ position:absolute; inset:0;
    background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:60px 60px;
    -webkit-mask-image:radial-gradient(700px 300px at 50% 50%, #000, transparent 75%);
            mask-image:radial-gradient(700px 300px at 50% 50%, #000, transparent 75%); }
.cl-cta-inner{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; }
.cl-cta-text h3{ margin:0; font-size:30px; font-weight:800; color:#fff; font-family:"Noto Serif SC",serif; }
.cl-cta-text p{ margin:12px 0 0; color:#aeb6c6; font-size:15px; }
.cl-cta-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.cl-cta-tel{ display:inline-flex; align-items:center; gap:10px; color:var(--gold-2); text-decoration:none; font-size:18px; font-weight:700; }
.cl-cta-tel i{ font-size:18px; }

/* ═══════════════════ 响应式 ═══════════════════ */
@media (max-width:1100px){
    .cl-hero-inner{ grid-template-columns:1fr; gap:44px; }
    .cl-hero-title{ font-size:50px; }
    .cl-hero-panel{ flex-direction:row; flex-wrap:wrap; gap:0 40px; justify-content:space-between; }
    .cl-hero-stat{ flex:1 1 30%; flex-direction:column; align-items:flex-start; gap:10px; padding:18px 0; border-bottom:none; border-right:1px solid rgba(255,255,255,.08); }
    .cl-hero-stat:last-child{ border-right:none; }
    .cl-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:860px){
    .cl-hero{ padding:120px 0 100px; }
    .cl-hero-title{ font-size:40px; }
    .cl-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
    .cl-hero-panel{ flex-direction:column; }
    .cl-hero-stat{ flex:1 1 100%; flex-direction:row; align-items:baseline; justify-content:space-between; border-right:none; border-bottom:1px solid rgba(255,255,255,.08); }
    .cl-hero-stat:last-child{ border-bottom:none; }
}
@media (max-width:640px){
    .cl-filter-inner{ padding:14px 20px; }
    .cl-main{ padding:44px 0 60px; }
    .cl-grid{ grid-template-columns:1fr; gap:18px; }
    .cl-hero-stats{ flex-wrap:wrap; gap:20px; }
    .cl-section-head{ margin-bottom:30px; }
    .cl-sh-title{ font-size:26px; }
    .cl-cta-inner{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){
    .cl-card{ animation:none; opacity:1; transform:none; }
    .cl-hero-shape{ animation:none; }
}