/*=========================================
  字帅客户端下载专题页 /client
  仅在 pages/client.php 渲染时加载
  视觉稿：design/client/mockup.png
=========================================*/

.cli-page{
    --cli-ink:#17181c;
    --cli-sub:#6b7280;
    --cli-muted:#9aa0aa;
    position:relative;
    width:100%;
    padding-top:68px; /* 让开固定顶栏 .content-header */
    color:var(--cli-ink);
    background:#fff;
    font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;
    font-size:16px;
    line-height:1.7;
    overflow-x:hidden;
}

.cli-page h2,.cli-page h3{margin:0;font-weight:700;line-height:1.35;color:var(--cli-ink)}
.cli-page p{margin:0}
.cli-page ul{margin:0;padding:0;list-style:none}
.cli-page img{max-width:100%;height:auto;display:block}

/*----- 首屏 -----*/
.cli-hero{
    background-color:transparent;
    background-image:url("../images/pages/client/webp/hero-bg.webp");
    background-position:center top;
    background-size:auto clamp(650px,43vw,760px);
    background-repeat:no-repeat;
    box-sizing:border-box;
    min-height:clamp(650px,43vw,760px);
    padding:clamp(72px,5vw,90px) 48px 64px;
}
.cli-hero-inner{max-width:1520px;margin:0 auto}
.cli-hero-text{max-width:720px;margin-left:clamp(36px,3.5vw,76px);transform:translateY(clamp(24px,2vw,40px))}

.cli-hero-head{position:relative;display:inline-block}
.cli-title-img{width:clamp(500px,30vw,570px)}
.cli-flag{position:absolute;top:clamp(-92px,-4.6vw,-78px);right:clamp(-80px,-3.8vw,-66px);width:clamp(154px,9vw,178px)}

.cli-page .cli-slogan{margin-top:28px;font-size:clamp(33px,2vw,38px);font-weight:700}
.cli-page .cli-intro{margin-top:26px;color:#4b5563;font-size:clamp(19px,1.15vw,21px);line-height:1.82}

.cli-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}
.cli-dlbtn{display:inline-flex;box-sizing:border-box;align-items:center;gap:16px;width:clamp(280px,17vw,320px);height:clamp(82px,5.1vw,94px);padding:0 clamp(26px,1.7vw,32px);border-radius:13px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.cli-dlbtn img{width:auto;height:clamp(32px,2vw,38px);object-fit:contain}
.cli-dlbtn img.is-dark{filter:brightness(0)}
.cli-dlbtn span{display:flex;flex-direction:column;line-height:1.3;text-align:left}
.cli-dlbtn strong{font-size:clamp(18px,1.1vw,20px);font-weight:700}
.cli-dlbtn em{font-style:normal;font-size:clamp(13px,.8vw,15px);opacity:.72;margin-top:5px;}
.cli-dlbtn-dark{background:var(--cli-ink);color:#fff;box-shadow:0 12px 26px rgba(23,24,28,.22)}
.cli-dlbtn-dark:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 30px rgba(23,24,28,.28)}
/* library.pc.css 的 a:visited/a:focus/a:active{color:inherit} 优先级更高，
   下载按钮点击后保持焦点，会把文字染成黑色，这里拉高优先级强制覆盖所有状态 */
.cli-page a.cli-dlbtn-dark,
.cli-page a.cli-dlbtn-dark:visited{color:#fff}
.cli-page a.cli-dlbtn-dark strong,
.cli-page a.cli-dlbtn-dark em{color:#fff}
.cli-page a.cli-dlbtn-outline,
.cli-page a.cli-dlbtn-outline:visited{color:var(--cli-ink)}
.cli-dlbtn-light{background:rgba(255,255,255,.96);color:#b7bec9;border:1px solid rgba(255,255,255,.9);box-shadow:0 12px 30px rgba(108,141,190,.14),0 0 26px rgba(255,255,255,.95)}
.cli-dlbtn-light img{filter:grayscale(1) opacity(.42)}
.cli-dlbtn-light{justify-content:center}
.cli-dlbtn-light span{height:100%;justify-content:center}
.cli-dlbtn-light em{font-size:clamp(18px,1.1vw,21px);font-weight:600;opacity:.78}
.cli-dlbtn-outline{background:#fff;border:1px solid #e5e7eb;color:var(--cli-ink)}
.cli-dlbtn.is-disabled{cursor:not-allowed}
.cli-dlbtn.is-disabled:hover{transform:none}
.cli-dlbtn-flat{height:82px}
.cli-dlbtn-flat span{flex-direction:row}


.cli-page .cli-meta{display:flex;align-items:center;gap:10px;margin-top:26px;color:var(--cli-muted);font-size:clamp(13px,.8vw,15px)}
.cli-meta i{font-style:normal;color:#d3d7dd}

.cli-page .cli-trust{display:flex;flex-wrap:wrap;gap:14px clamp(24px,2vw,32px);margin-top:28px}
.cli-trust li{display:flex;align-items:center;gap:8px;font-size:clamp(15px,.95vw,17px);color:#3f4652;font-weight:500}
.cli-trust img{width:auto;height:clamp(27px,1.8vw,32px)}

/*----- 功能卡片 -----*/
.cli-features{display:flex;gap:clamp(24px,1.7vw,32px);width:calc(100% - clamp(72px,9vw,220px));max-width:1700px;margin:0 auto;padding:clamp(32px,3vw,48px) 0 0}
.cli-feat-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:clamp(28px,2vw,38px)}

.cli-card{box-sizing:border-box;position:relative;border-radius:28px;padding:clamp(36px,2.4vw,44px) clamp(40px,2.8vw,52px) clamp(38px,2.5vw,46px);overflow:hidden}
.cli-card--blue{background:linear-gradient(135deg,#e9f1fe 0%,#d9e9fe 100%)}
.cli-card--pink{background:linear-gradient(135deg,#faefff 0%,#f8deff 100%)}
.cli-card--mint{background:linear-gradient(135deg,#eefff8 0%,#d9f8ec 100%)}
.cli-card--cream{background:linear-gradient(135deg,#fff5e3 0%,#ffebc1 100%)}
.cli-card--rose{background:linear-gradient(135deg,#fff3f8 0%,#ffe9ef 100%)}
.cli-card--lavender{background:linear-gradient(135deg,#f6f2fd 0%,#f0ebfd 100%)}

.cli-card-head{display:flex;align-items:center;gap:20px}
.cli-num{font-size:clamp(58px,3.7vw,70px);font-weight:800;font-style:italic;line-height:1;letter-spacing:1px}
.cli-num--blue{color:#6b9cfe}
.cli-num--purple{color:#9b89fd}
.cli-num--green{color:#6ad2a4}
.cli-num--orange{color:#f9bb63}
.cli-num--rose{color:#ed8da5}
.cli-num--violet{color:#a493fc}
.cli-card-head h3{font-size:clamp(39px,2.35vw,45px)}

.cli-card>p{margin-top:14px;color:#4b5563;font-size:clamp(18px,1.1vw,20px);line-height:1.55}

.cli-checks{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.cli-checks li{display:flex;align-items:center;gap:10px;font-size:clamp(17px,1.05vw,19px);color:#2b3140;font-weight:500}
.cli-checks img{width:clamp(24px,1.55vw,28px);height:clamp(24px,1.55vw,28px);flex:0 0 auto}

.cli-card-shot{margin:30px auto 0;border-radius:14px;box-shadow:0 18px 38px rgba(23,24,28,.14)}
.cli-card--blue{height:750px}
.cli-card--blue .cli-card-shot{width:540px;max-width:100%;margin-top:24px}
.cli-card--cream{height:586px}
.cli-card--cream .cli-card-shot{width:500px;max-width:100%;margin-top:20px}
.cli-card--pink{height:360px}
.cli-card--mint{height:362px}
.cli-card--rose{height:210px;margin-bottom:6px}
.cli-card--lavender{height:346px;margin-top:-14px;padding-top:20px;padding-bottom:20px}

.cli-assets{position:absolute;left:50%;bottom:22px;display:flex;align-items:flex-end;gap:56px;transform:translateX(calc(-50% - 54px))}
.cli-assets img{width:auto;height:auto}
.cli-assets img:nth-child(1){width:96px}
.cli-assets img:nth-child(2){width:133px}
.cli-assets img:nth-child(3){width:123px}

.cli-card--mint>p{max-width:min(48%,520px);font-size:clamp(16px,.98vw,18px)}
.cli-card-row{margin:0}
.cli-folder{position:absolute;bottom:22px;left:120px;width:180px}
.cli-panel{position:absolute;top:30px;right:34px;width:220px;border-radius:14px;box-shadow:0 10px 24px rgba(23,24,28,.1)}

.cli-card-side{position:absolute;top:30px;right:42px;width:170px}
.cli-card--rose p{max-width:62%}

.cli-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-content:center;gap:12px;margin-top:30px;transform:translateY(7px)}
.cli-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;aspect-ratio:1;height:auto;padding:9px 6px;box-sizing:border-box;background:#fff;border-radius:14px;font-size:14px;color:#3f4652;font-weight:500}
.cli-tool img{width:auto;height:52px}

/* 01 的说明与勾选项和标题文字保持同一条左对齐线。 */
.cli-card--blue>p,.cli-card--blue .cli-checks{margin-left:calc(clamp(58px,3.7vw,70px) + 38px)}
.cli-card--blue .cli-checks{margin-top:34px;gap:12px}
.cli-card--blue .cli-checks li{font-size:clamp(15px,.9vw,17px)}

/* 02–06 的说明文字与卡片标题文字左边缘对齐。 */
.cli-card--pink>p,.cli-card--mint>p,.cli-card--cream>p,.cli-card--rose>p,.cli-card--lavender>p{margin-left:calc(clamp(58px,3.7vw,70px) + 38px)}

/* 两张界面截图保留原图，不额外添加容器底色、圆角或阴影。 */
.cli-card--blue .cli-card-shot,.cli-card--cream .cli-card-shot{background:transparent;border-radius:0;box-shadow:none}

/*----- 不止于管理 -----*/
.cli-workflow{width:calc(100% - clamp(72px,9vw,220px));max-width:1700px;margin:clamp(72px,5vw,90px) auto 0;padding:0}
.cli-workflow img{width:100%}

/*----- 底部下载 -----*/
.cli-cta{margin-top:clamp(56px,4vw,70px)}
.cli-cta-inner{display:flex;align-items:center;gap:clamp(24px,2vw,32px);box-sizing:border-box;width:calc(100% - clamp(72px,9vw,220px));max-width:1700px;height:clamp(310px,19vw,350px);margin:0 auto;padding:0 24px}
.cli-cta-mascot{position:relative;flex:0 0 360px;height:300px}
.cli-cta-hand{position:absolute;top:-2px;left:-14px;width:160px;transform:rotate(-8deg)}
.cli-cta-monkey{position:absolute;bottom:-4px;left:56px;width:285px}
.cli-cta-mid{flex:1;text-align:center}
.cli-cta-mid h2{font-size:clamp(32px,2vw,38px)}
.cli-cta-mid p{margin-top:12px;color:var(--cli-sub);font-size:clamp(16px,1vw,19px)}
.cli-cta-btns{display:flex;justify-content:center;gap:20px;margin-top:34px}
.cli-cta-note{flex:0 0 285px;width:285px;transform:rotate(5deg)}

.cli-wave{display:block;width:100%;height:157px;margin-top:0}
.cli-page~.webinfo{display:none}

/*----- 响应式 -----*/
@media (max-width:1400px){
    .cli-hero{min-height:650px;background-size:auto 650px;padding:72px 48px 56px}
    .cli-hero-inner{max-width:1200px}
    .cli-title-img{width:480px}
    .cli-flag{top:-62px;right:-132px;width:154px}
    .cli-slogan{font-size:32px}
    .cli-intro{font-size:18px}
    .cli-dlbtn{height:78px;padding:0 26px}
    .cli-dlbtn strong{font-size:18px}.cli-dlbtn em{font-size:13px}
    .cli-dlbtn img{width:auto;height:32px}
    .cli-trust li{font-size:15px}.cli-trust img{height:27px}
    .cli-features{max-width:1248px;gap:24px;padding:42px 24px 0;left:auto}
    .cli-feat-col{gap:24px}
    .cli-card{height:auto;min-height:0;margin-bottom:0;padding:34px 30px 36px;border-radius:24px}
    .cli-card--lavender{margin-top:0}
    .cli-card-head h3{font-size:31px}.cli-num{font-size:48px}
    .cli-card>p{font-size:16px}.cli-checks li{font-size:16px}.cli-checks img{width:22px;height:22px}
    .cli-card--blue .cli-card-shot,.cli-card--cream .cli-card-shot{width:100%}
    .cli-card--blue>p,.cli-card--blue .cli-checks,.cli-card--pink>p,.cli-card--mint>p,.cli-card--cream>p,.cli-card--rose>p,.cli-card--lavender>p{margin-left:68px}
    .cli-assets{position:static;justify-content:center;gap:34px;margin-top:30px;transform:translateX(-16px)}
    .cli-assets img{height:112px;width:auto!important}
    .cli-card--mint>p{max-width:none}.cli-card-row{display:flex;align-items:center;gap:26px;margin-top:30px}
    .cli-folder,.cli-panel{position:static}.cli-folder{width:44%}.cli-panel{width:40%;margin-left:auto}
    .cli-card-side{top:34px;right:38px;width:118px}.cli-card--rose p{max-width:70%}
    .cli-tools{margin-top:24px;transform:translateY(8px)}.cli-tool{height:auto;font-size:13px;padding:7px 5px}.cli-tool img{width:42px;height:42px}
    .cli-workflow{max-width:1248px;margin-top:64px;padding:0 24px}
    .cli-cta{margin-top:56px}.cli-cta-inner{max-width:1200px;height:250px;padding:0 40px;gap:40px}
    .cli-cta-mascot{flex-basis:250px;height:250px}.cli-cta-hand{top:-46px;left:-6px;width:150px}.cli-cta-monkey{bottom:0;left:16px;width:200px}
    .cli-cta-mid h2{font-size:32px}.cli-cta-mid p{font-size:16px}.cli-cta-note{flex-basis:210px;width:210px}
    .cli-dlbtn-flat{height:54px}
}

@media (max-width:1080px){
    .cli-hero{background-size:auto 88%;padding:48px 28px 56px}
    .cli-title-img{width:330px}
    .cli-flag{top:-48px;right:-90px;width:102px}
    .cli-card{padding:34px 30px 36px}
    .cli-card-head h3{font-size:25px}
    .cli-num{font-size:44px}
    .cli-cta-mascot{flex-basis:200px;height:210px}
    .cli-cta-monkey{width:164px}
    .cli-cta-note{flex-basis:170px;width:170px}
}

@media (max-width:860px){
    .cli-hero{background-image:none;background-color:transparent;padding:40px 20px 44px}
    .cli-hero-text{max-width:none;margin-left:0;transform:none}
    .cli-title-img{width:min(320px,80vw)}
    .cli-flag{top:-34px;right:-68px;width:88px}
    .cli-slogan{font-size:22px}
    .cli-features{flex-direction:column;padding:40px 20px 0}
    .cli-workflow{padding:0 20px;margin-top:48px}
    .cli-cta{margin-top:56px}
    .cli-cta-inner{flex-direction:column;gap:28px;padding:0 20px}
    .cli-cta-mascot{order:2;flex-basis:auto;height:220px;width:220px;margin:0 auto}
    .cli-cta-mid{order:1}
    .cli-cta-note{order:3;transform:rotate(3deg)}
    .cli-cta-mid h2{font-size:26px}
    .cli-card--rose p{max-width:none}
    .cli-card-side{width:96px;top:28px;right:26px}
}

@media (max-width:600px){
    .cli-dlbtn{width:100%;justify-content:flex-start}
    .cli-cta-btns{flex-direction:column;align-items:stretch}
    .cli-trust{gap:12px 20px}
    .cli-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
    .cli-assets{gap:20px}
    .cli-assets img{height:88px}
    .cli-card-row{flex-direction:column;align-items:stretch}
    .cli-folder{width:60%;margin:0 auto}
    .cli-panel{width:80%;margin:0 auto}
    .cli-wave{margin-top:36px}
}