.zs-homebanner{
    display: block;
    width: 100%;
    /* 首屏正好铺满一屏：1920x1080 下就是 1080px。页眉在首页是 absolute + 透明，
       压在 banner 上不占高度，所以不用再减 80px。
       min-height 兜底：极矮的窗口里（比如 600px 高）文案 + 12 个平台图标放不下，
       让它撑开出现滚动，比把内容压扁好。
       ≤1440px 的断点仍用固定高度，见下方 media query。 */
    height: 100vh;
    min-height: 680px;
    position: relative;
    /* 下外边距归零：banner 和 #top10 之间夹着 sprite <svg>，原来那条
       :has(+ .dl-sec) 匹配不到，50px 一直在叠 .dl-sec 的 76px 上内边距。
       两者之间的留白统一由 .zs-home #top10 的 padding-top 控制。 */
    margin-bottom: 0;
}
.zs-homebanner .pic{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 10;
}
.zs-homebanner .text {
    position: absolute;
    display: flex;
    width: 92%;
    left: 4%;
    right: 4%;
    height: 100%;
    /* 上内边距对齐页眉高度（80px），页眉压在 banner 上不占位，
       补上这一段文案才是在"页眉下方可见区域"里居中，而不是偏低 */
    padding-top: 80px;
    padding-bottom: 70px;
    color: #FFFFFF;
    text-align: left;
    line-height: 1;
    z-index: 60;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
/* ---- 字阶说明 ----
   Inter 是可变字体（400–800），所以层级靠"字号 + 字重"两条轴一起拉开，
   而不是把所有标题都压成 bold。全站约定：
     Display   60/800  banner 主标题（唯一的最高层级）
     Eyebrow   16/600  banner 上方的产品名，配 letter-spacing 当小标签用
     H2        46/700  区块标题
     H3        24/600  大卡标题
     H3-sm  20-21/600  中卡与面板标题
     H4        16/500  列表条目标题
     Body      16/400  描述正文
     Small     14/400  日期、次要信息
     Button 14-17/600
   注意 600 是这里的主力：卡片标题用 600 而不是 700，
   才能和 700 的区块标题拉开层次，页面不会显得"到处都是粗体"。 */
.zs-homebanner .text .name{
    font-weight: 600;
    font-size: 18px;
    letter-spacing: .15em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    /* 与主标题拉开距离：原来 34px 时两者贴得太紧 */
    padding-bottom: 54px;
    color: rgba(255, 255, 255, .82);
}
.zs-homebanner .text .name img{
    width: 46px;
    height: 46px;
    margin-right: 14px;
}
.zs-homebanner .text .title{
    font-weight: 800;
    font-size: 60px;
    color: #FFFFFF;
    line-height: 1.15;
    letter-spacing: -.02em;
    max-width: 1420px;
    text-align: center;
}
.zs-homebanner .text .tips{
    padding-top: 44px;
    max-width: 1040px;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    color: rgba(255, 255, 255, .78);
}
/* ==========================================================================
   首页 banner 里的平台入口
   --------------------------------------------------------------------------
   12 个平台各一枚，点进对应的平台下载器列表页。
   字形用 index.html sprite 里的 #p-*（与 platform.html 同一套 symbol），
   默认是白色单色，落在渐变底上比 12 种品牌色更干净；
   hover 时底色翻白、字形换成该平台的品牌色，品牌识别度就补回来了。
   ========================================================================== */
.zs-homebanner .text .hb-plat{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding-top: 36px;
    margin: 0;
}
.zs-homebanner .text .hb-plat li{
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
.zs-homebanner .text .hb-plat a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    color: #FFFFFF;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .24);
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.zs-homebanner .text .hb-plat a svg{
    display: block;
    width: 26px;
    height: 26px;
}
.zs-homebanner .text .hb-plat a:hover{
    background: #FFFFFF;
    border-color: #FFFFFF;
    transform: translateY(-2px);
}
/* hover 时的品牌色，与 downloader.css 里 .dl-pfcard.is-* 用的是同一组色值 */
.zs-homebanner .hb-plat .is-youtube     a:hover{ color: #FF0033; }
.zs-homebanner .hb-plat .is-tiktok      a:hover{ color: #0b0518; }
.zs-homebanner .hb-plat .is-instagram   a:hover{ color: #ee2a7b; }
.zs-homebanner .hb-plat .is-pinterest   a:hover{ color: #E60023; }
.zs-homebanner .hb-plat .is-x           a:hover{ color: #16181c; }
.zs-homebanner .hb-plat .is-facebook    a:hover{ color: #1877F2; }
.zs-homebanner .hb-plat .is-linkedin    a:hover{ color: #0A66C2; }
.zs-homebanner .hb-plat .is-reddit      a:hover{ color: #FF4500; }
.zs-homebanner .hb-plat .is-vimeo       a:hover{ color: #1AB7EA; }
.zs-homebanner .hb-plat .is-bilibili    a:hover{ color: #00A1D6; }
.zs-homebanner .hb-plat .is-vk          a:hover{ color: #0077FF; }
.zs-homebanner .hb-plat .is-dailymotion a:hover{ color: #0066DC; }
.zs-homebanner .text .btn{
    display: flex;
    padding-top: 40px;
}
.zs-homebanner .text .btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 210px;
    height: 62px;
    color: #FFFFFF;
    border:2px solid #FFFFFF;
    font-size: 17px;
    font-weight: 600;
    border-radius: 31px;
    margin: 0 10px;
    background-color: transparent;
    text-align: center;
    overflow: hidden;
}
.zs-homebanner .text .btn a.cur{
    border: none;
    background: var(--zs-btn-grad);
}
.zs-homebanner .text .btn a:hover{
    border: none;
    background: var(--zs-btn-grad);
}
.zs-homebanner .text .btn a.cur:hover{
    color: #FFF;
    background: var(--zs-btn-grad-hover);
}
.zs-homebanner .swiper-container{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    list-style: none;
    z-index: 1;
    position: absolute;
    bottom: 0;
}
/* 两栏并排卡片：原为固定 785px（1600 容器下 785*2+30 间距刚好占满），
   改为等分弹性列 + 间距，窄屏可自然收缩而不溢出。 */
.home-box.zs-wp {
    gap: 30px;
}
.compare-list{
    display: block;
    padding: 40px 0 40px 0;
    position: relative;
    z-index: 20;
}
.compare-list ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 -18px 0 -18px;
}
.compare-list li{
    padding: 0 18px;
    width: 33.3%;
    margin-bottom: 36px;
}
/* 卡片外壳原来是整个 <li> 外包的一个 <a>。为了在卡片里放 Read More 链接
   （<a> 不能嵌套 <a>），外壳改成 .con，与 NEWS 列表结构保持一致。 */
/* 不给卡片描边：浅紫背景上的半透明白描边会在图片四周显出一道白线 */
.compare-list li .con{
    display: block;
    height: auto;
    background-color: rgba(255, 255, 255, .72);
    border: 0;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease;
}
.compare-list li:hover .con{
    box-shadow: 0 20px 40px -22px rgba(76, 29, 149, .42);
    transform: translateY(-3px);
}
.compare-list li .pic a{
    display: block;
    width: 100%;
    height: 100%;
}
.compare-list li .pic{
    display: flex;
    width: 100%;
    height: 305px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.compare-list li .pic img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
}
.compare-list li:hover .pic img{
    transform: scale(1.05);
}
/* 文字区。hover 时整块铺品牌渐变，跟上方图片直接相接。
   渐变不能做 transition，所以底色画在 ::before 上用 opacity 淡入，
   内容再靠 z-index 抬到底色之上。 */
.compare-list li .text{
    display: block;
    position: relative;
    z-index: 1;
    padding: 25px 30px;
    text-align: left;
}
.compare-list li .text::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--zs-btn-grad);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.compare-list li:hover .text::before{
    opacity: 1;
}
.compare-list li .text > *{
    position: relative;
    z-index: 1;
}
/* 两行截断。注意：-webkit-line-clamp 的裁切盒含 padding，
   若在这里写 padding-bottom，被 clamp 掉的第三行会落进 padding 区而不被裁掉
   （表现为省略号出现了，但下面还多露一行文字压住 Read More）。
   所以下间距一律用 margin，并用 max-height 兜底。 */
.compare-list li .title{
    font-size: 21px;
    font-weight: 600;
    line-height: 1.4;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.7em;
}
/* 常态标题是普通深色文字；hover 时文字区整块铺渐变，标题转纯白 */
.compare-list li .title a{
    color: #1c1230;
    transition: color .3s ease;
}
.compare-list li:hover .title a{
    color: #FFFFFF;
}
/* 底部一行：Read More 按钮 + 日期，与 NEWS 列表同规格 */
.compare-list li .btn{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.compare-list li .btn a{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    width: 115px;
    height: 47px;
    border-radius: 40px;
    font-weight: 600;
    color: #333;
    border: 1px solid #bdbecc;
    transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}
/* 卡片 hover：整块底色已变成渐变，按钮和日期一起换成白色系。
   按钮改成半透明白底 + 白描边（不能再用渐变，会和背景糊在一起）。 */
.compare-list li:hover .btn a{
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, .68);
    background-color: rgba(255, 255, 255, .16);
}
.compare-list li:hover .btn a:hover{
    color: #6d28d9;
    border-color: #FFFFFF;
    background-color: #FFFFFF;
}
.compare-list li .btn .date{
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #808080;
    transition: color .3s ease;
}
.compare-list li:hover .btn .date{
    color: rgba(255, 255, 255, .84);
}
/* 与 .compare-list li .title 同级：卡片标题用 600，跟 700 的区块标题分层 */
.blogs-list li .title{
    font-size: 21px;
    font-weight: 600;
    line-height: 1.4;
    padding-top: 0;
    padding-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 原模板这条只写了 .time，但 NEWS / tags 页的 HTML 用的是 class="date"，
   所以日期一直没吃到样式（继承 body 的 16px）。这里补上 .date。 */
.blogs-list li .btn .time,
.blogs-list li .btn .date{
    display: flex;
    font-size: 14px;
    align-items: center;
    color: #808080;
}

/* ==========================================================================
   首页自适应断点（替代原来空置的 1024~1900 媒体查询）
   原稿多处使用固定高度（banner 850px、卡片 460px / 485px / 595px、
   标签区 520px），在窄屏下会造成文字溢出容器；此处统一改为
   高度自适应 + 分级收敛字号与间距。
   ========================================================================== */

/* --- 卡片高度自适应（全断点生效，图片裁剪比例保持原设计） --- */
.compare-list li .con{
    height: auto;
    min-height: 0;
}

/* --- 笔记本 ≤1440px --- */
@media only screen and (max-width:1440px){
    .zs-homebanner{
        height: 720px;
    }
    .zs-homebanner .text .name{
        font-size: 17px;
        padding-bottom: 46px;
    }
    .zs-homebanner .text .name img{
        width: 42px;
        height: 42px;
    }
    .zs-homebanner .text .title{
        font-size: 50px;
    }
    .zs-homebanner .text .btn{
        padding-top: 38px;
    }
    .zs-homebanner .text .btn a{
        width: 190px;
        height: 58px;
        font-size: 16px;
    }
    .zs-homebanner .text .tips{
        padding-top: 46px;
    }
    /* hb-plat 1440 */
    .zs-homebanner .text .hb-plat{
        gap: 9px;
        padding-top: 32px;
    }
    .zs-homebanner .text .hb-plat a{
        width: 50px;
        height: 50px;
        border-radius: 14px;
    }
    .zs-homebanner .text .hb-plat a svg{
        width: 25px;
        height: 25px;
    }
    .compare-list li .pic{
        height: 260px;
    }
    .compare-list li .con{
        min-height: 0;
    }
    .compare-list li .text{
        padding: 28px 28px;
    }
    .compare-list li .title{
        font-size: 20px;
    }
}

/* --- 小笔记本 ≤1280px --- */
@media only screen and (max-width:1280px){
    .zs-homebanner{
        height: 620px;
    }
    /* hb-plat 1280 */
    .zs-homebanner .text .name{
        padding-bottom: 38px;
    }
    .zs-homebanner .text .hb-plat{
        padding-top: 28px;
    }
    .zs-homebanner .text .hb-plat a{
        width: 48px;
        height: 48px;
    }
    .compare-list li .pic{
        height: 230px;
    }
    .compare-list li .title{
        font-size: 20px;
    }
}

/* --- 平板 ≤1023px --- */
@media only screen and (max-width:1023px){
    .zs-homebanner{
        height: 600px;
        margin-bottom: 36px;
    }
    /* hb-plat 1023 */
    .zs-homebanner .text .name{
        padding-bottom: 32px;
    }
    .zs-homebanner .text .btn{
        padding-top: 30px;
    }
    .zs-homebanner .text .hb-plat{
        gap: 8px;
        padding-top: 24px;
    }
    .zs-homebanner .text .hb-plat a{
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }
    .zs-homebanner .text .hb-plat a svg{
        width: 22px;
        height: 22px;
    }
    .zs-homebanner .text .tips{
        padding-top: 32px;
    }
    /* 上下堆叠：横向空间不足时图文改为纵向排列 */
    .box-blue, .box-purple{
        flex-direction: column;
        padding: 32px 28px 40px 28px;
    }
    /* 工具卡与文章卡两列 */
    .compare-list li,
    .blogs-list li{
        width: 50%;
    }
    .compare-list li .pic,
    .blogs-list li .pic{
        height: 220px;
    }
}

/*Mobile v1*/
@media only screen and (max-width:767px){
.zs-homebanner {
    height: 540px;
    margin-bottom: 30px;
}
.zs-homebanner .text .name {
    font-size: 15px;
    padding-bottom: 32px;
}
.zs-homebanner .text .name img {
    width: 34px;
    height: 34px;
}
.zs-homebanner .text .title {
    font-size: 32px;
    line-height: 1.35;
}
.zs-homebanner .text .btn {
    padding: 25px 0 15px 0;
    width: 100%;
}
.zs-homebanner .text .btn a {
    width: 50%;
    height: 35px;
    line-height: 35px;
    border: 1px solid #FFFFFF;
    font-size: 15px;
    margin: 0 10px;
}
.zs-homebanner .text .tips {
    line-height: 1.45;
}
/* hb-plat 767 */
.zs-homebanner .text .hb-plat{
    gap: 7px;
    padding-top: 18px;
}
.zs-homebanner .text .hb-plat a{
    width: 36px;
    height: 36px;
    border-radius: 11px;
}
.zs-homebanner .text .hb-plat a svg{
    width: 20px;
    height: 20px;
}
/* 涓よ鍥炬爣宸茬粡鍗犳帀浜嗗師鏉ョ粰 .tips 鐨勪綅缃紱瀹冨彧鏄ˉ鍏呰鏄庯紝
   鑰屼笖 20 娆?/ 12 涓钩鍙拌繖涓や釜鏁板瓧鏍囬閲屽凡缁忓啓浜嗐€?*/
.zs-homebanner .text .tips{
    display: none;
}
.compare-list {
    padding: 30px 0 10px 0;
}
.compare-list ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
}
.compare-list li {
    padding: 0;
    width: 100%;
    margin-bottom: 20px;
}
.compare-list li a {
    height: auto;
    border-radius: 12px;
}
.compare-list li .pic {
    width: 100%;
    height: 220px;
}
.compare-list li .text {
    padding: 20px 20px;
}
.compare-list li .title {
    font-size: 18px;
    padding-bottom: 0;
    margin-bottom: 12px;
}
.compare-list li .btn a{
    width: 100px;
    height: 40px;
    font-size: 13px;
}
.compare-list li .btn .date{
    font-size: 13px;
}

}

/* --- 卡片本体 --- */
.zs-bcard{
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 40px 32px 36px 32px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 20px;
    /* 比区块底色亮一档，卡片才会"浮"在背景上；
       之前比底色更暗，提亮背景后卡片就整个陷进去了。 */
    background: linear-gradient(160deg, #2c2059 0%, #241b4b 55%, #1e1642 100%);
    overflow: hidden;
    transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.zs-bcard:hover{
    border-color: rgba(160, 120, 255, .45);
    transform: translateY(-4px);
    box-shadow: 0 26px 50px -24px rgba(120, 60, 255, .55);
}
/* 卡片内的柔光，制造图示里的中心发光效果 */
.zs-bcard::before{
    content: "";
    position: absolute;
    left: 50%;
    top: -18%;
    width: 120%;
    height: 62%;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(140, 100, 255, .30) 0%, rgba(140, 100, 255, 0) 70%);
    pointer-events: none;
    z-index: 0;
}
.zs-bcard > *{
    position: relative;
    z-index: 1;
}

/* --- 卡片文字 ---
   卡片是纯文字卡（不再有产品截图），.bc-body 撑满剩余高度，
   .bc-btn 用 margin-top:auto 沉到卡底，三张卡的按钮行才会横向对齐。 */
.zs-bcard .bc-body{
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    text-align: center;
}
.zs-bcard .bc-title{
    display: block;
    font-size: 24px;
    line-height: 1.35;
    letter-spacing: -.01em;
    font-weight: 600;
    color: #FFFFFF;
}
/* 描述左对齐（标题和按钮仍居中）：多行文字居中时每行起点不齐，
   阅读起来比较费劲，卡片里只有描述需要成段阅读。 */
.zs-bcard .bc-desc{
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: rgba(255, 255, 255, .60);
    padding-top: 14px;
    text-align: left;
}
.zs-bcard .bc-desc strong,
.zs-bcard .bc-desc b{
    color: rgba(255, 255, 255, .88);
}
.zs-bcard .bc-btn{
    display: flex;
    gap: 12px;
    justify-content: center;
    padding-top: 26px;
    margin-top: auto;
}
.zs-bcard .bc-btn a{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 26px;
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
    border-radius: 23px;
    background: var(--zs-btn-grad);
    white-space: nowrap;
}
.zs-bcard .bc-btn a:hover{
    color: #FFFFFF;
    background: var(--zs-btn-grad-hover);
}
/* 次要按钮取品牌紫的描边配色，而不是中性灰。
   灰色描边和旁边的蓝紫渐变主按钮不是同一个色系，放在一起会显得脏。 */
.zs-bcard .bc-btn a.ghost{
    color: #c9b6fd;
    background: rgba(139, 92, 246, .12);
    border: 1px solid rgba(167, 139, 250, .48);
    transition: color .3s ease, background-color .3s ease, border-color .3s ease;
}
.zs-bcard .bc-btn a.ghost:hover{
    color: #FFFFFF;
    background: rgba(139, 92, 246, .30);
    border-color: rgba(196, 181, 253, .85);
}

/* ==========================================================================
   首页工具轮播区（More Tools to Boost Your Creativity）
   --------------------------------------------------------------------------
   卡片样式参考「满幅图 + 底部彩色渐变遮罩」的横向轮播：
   图片铺满卡片，标题与描述压在底部的品牌色渐变上，
   标题右侧配上一组圆形前后翻页按钮。
   复用页面已加载的 Swiper，无需新增依赖。
   ========================================================================== */
/* 背景由上到下：纯黑 -> 紫色逐步加深并在中段达到最饱和 -> 之后逐渐变浅，
   到底部收成很浅的淡紫。多个色标是为了让"加深再变浅"的转折足够平滑，
   两个色标之间跨度过大时 sRGB 线性插值会出现明显的灰带。 */
.zs-tools{
    display: block;
    position: relative;
    padding: 80px 0 64px 0;
    background: #221a4e;
    /* 上部分（0~22%，正好盖住标题和描述）保持纯色 #221a4e，不做渐变——
       原稿是从顶部就开始渐变的，那是因为上面接着同样以 #221a4e 收尾的深色
       板块，两段连成一条。现在上面是白底，顶部再做渐变只会出现一条像光晕
       的浅紫带。渐变只留在下半部分，收到 #efeafe 交给 .zs-tools-tail。 */
    background-image: linear-gradient(180deg,
        #221a4e 0%,
        #221a4e 22%,
        #291a66 28%,
        #331686 34%,
        #3f16a8 40%,
        #4a19be 46%,
        #5a1fd0 52%,
        #6d28d9 58%,
        #7c3aed 64%,
        #8b5cf6 70%,
        #a482f8 76%,
        #bda6fa 82%,
        #d2c2fc 88%,
        #e4dbfd 94%,
        #efeafe 100%);
    overflow: hidden;
}
/* 按钮到下一个板块标题之间原来隔着 96(本段下内边距) + 90(收尾渐变带)
   + 76(.dl-sec 上内边距) = 262px，空得太夸张。下内边距收到 64、收尾带收到
   64，再把紧跟其后的 .dl-sec 上内边距清零，合计 128px。 */
.zs-tools-tail + .dl-sec{
    padding-top: 0;
}
/* tools 板块以浅紫收尾，下方是白底的浅色内容区。
   这条过渡带把浅紫平滑收到纯白，避免出现一道可见的色阶边界。 */
/* banner 到 TOP 10 标题之间的留白。原来是 banner 的 50px 下外边距 + .dl-sec 的
   76px 上内边距 = 126px，收到三分之二 = 84px，全部由这一条控制。
   （banner 和 #top10 之间夹着 display:none 的 sprite <svg>，所以相邻兄弟选择器
   用不上，直接点 #top10。） */
.zs-home #top10{
    padding-top: 84px;
}

/* 深色的"按平台找下载方案"紧贴在 TOP 10 表格的脚注下面，深底和白底之间没有缓冲，
   看着像两块撞在一起。这里给它一段白色留白再进深色区。 */
.zs-home .zs-tools{
    margin-top: 72px;
}
.zs-tools-tail{
    display: block;
    width: 100%;
    height: 64px;
    background-color: #fff;
    background-image: linear-gradient(180deg,
        #efeafe 0%,
        #f3f0fe 30%,
        #f8f6ff 60%,
        #fdfcff 85%,
        #ffffff 100%);
}

/* 标题整体居中（参考图3），翻页按钮绝对定位到右侧（参考图4）。
   用绝对定位而不是 flex space-between，否则按钮会占掉右侧空间，
   标题只是"剩余空间的中心"而非容器正中。 */
.zs-tools .zs-tools-head{
    position: relative;
    display: block;
    margin-bottom: 44px;
}
.zs-tools .zs-tools-head .text{
    text-align: center;
}
.zs-tools .zs-tools-head .title{
    display: block;
    font-size: 46px;
    line-height: 1.2;
    letter-spacing: -.02em;
    font-weight: 700;
    color: #FFFFFF;
}
.zs-tools .zs-tools-head .desc{
    display: block;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.65;
    color: rgba(255, 255, 255, .68);
    padding-top: 14px;
}
/* 翻页按钮 */
.zs-tools-nav{
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.zs-tools-nav button{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #FFFFFF;
    transition: background .3s ease, border-color .3s ease, opacity .3s ease;
}
.zs-tools-nav button:hover{
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .55);
}
.zs-tools-nav button svg{
    display: block;
    width: 20px;
    height: 20px;
}
.zs-tools-nav button.swiper-button-disabled{
    opacity: .35;
    cursor: default;
}

/* 轮播卡片 */
.zs-tools .tools-swiper{
    overflow: hidden;
}
.zs-tools .tools-swiper .swiper-slide{
    height: auto;
}
.zs-tcard{
    position: relative;
    display: block;
    height: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: #140d2c;
    transition: box-shadow .35s ease;
}
/* 这里刻意不做 translateY / scale：轮播容器是 overflow:hidden，
   卡片一旦位移，顶部会被容器裁掉、底部又露出背景，
   看起来就像卡片被切掉了一截。抬起感改由内描边 + 图片缩放表达，
   两者都不改变卡片的几何尺寸。 */
.zs-tcard:hover{
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
}
.zs-tcard .tc-pic{
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}
.zs-tcard .tc-pic img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.zs-tcard:hover .tc-pic img{
    transform: scale(1.06);
}
/* 底部彩色渐变遮罩 + 文字。
   遮罩用 bottom:0 定位，高度由内容撑开，
   因此 hover 时描述文字变高，遮罩会自动向上生长。 */
.zs-tcard .tc-text{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 56px 22px 22px 22px;
    color: #FFFFFF;
    transition: padding-top .42s cubic-bezier(.22, .61, .36, 1);
}
.zs-tcard:hover .tc-text{
    padding-top: 68px;
}
.zs-tcard .tc-title{
    display: block;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 600;
    color: #FFFFFF;
}
/* -webkit-line-clamp 不能做过渡，所以把它放宽到 8 行作为上限，
   实际显示行数用可过渡的 max-height 控制：
   默认露出 2 行，hover 展开到 8 行，遮罩随之平滑向上长高。 */
.zs-tcard .tc-desc{
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
    padding-top: 8px;
    max-height: calc(1.6em * 2 + 8px);
    transition: max-height .42s cubic-bezier(.22, .61, .36, 1);
}
.zs-tcard:hover .tc-desc{
    max-height: calc(1.6em * 8 + 8px);
}
/* 键盘聚焦时同样展开，保证不用鼠标也能读到完整描述 */
.zs-tcard:focus-visible .tc-text{
    padding-top: 68px;
}
.zs-tcard:focus-visible .tc-desc{
    max-height: calc(1.6em * 8 + 8px);
}
/* 卡片配色循环，对应参考图里橙 / 蓝 / 紫 / 绿 的交替。
   每个色相给两档不透明度：常态更透（能看清图片），
   hover 展开文字后加深一档，保证长段文字仍然可读。
   色值放进变量，渐变本身只写一次，避免 12 条重复规则。 */
.zs-tcard{
    --tc-rgb: 76, 29, 149;
    --tc-rgb-deep: 76, 29, 149;
}
.zs-tcard.c1{ --tc-rgb: 234, 88, 12;  --tc-rgb-deep: 194, 65, 12; }
.zs-tcard.c2{ --tc-rgb: 29, 78, 216;  --tc-rgb-deep: 30, 64, 175; }
.zs-tcard.c3{ --tc-rgb: 109, 40, 217; --tc-rgb-deep: 91, 33, 182; }
.zs-tcard.c4{ --tc-rgb: 21, 128, 61;  --tc-rgb-deep: 22, 101, 52; }
.zs-tcard.c5{ --tc-rgb: 2, 132, 199;  --tc-rgb-deep: 3, 105, 161; }
.zs-tcard.c6{ --tc-rgb: 190, 24, 93;  --tc-rgb-deep: 157, 23, 77; }

/* background-image 不能做 transition，直接换渐变会硬跳。
   所以铺两层遮罩：::before 是常态（更透），::after 是加深版，
   hover 时只过渡 ::after 的 opacity，颜色变化就平滑了。 */
.zs-tcard .tc-text::before,
.zs-tcard .tc-text::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.zs-tcard .tc-text::before{
    background: linear-gradient(180deg,
        rgba(var(--tc-rgb), 0) 0%,
        rgba(var(--tc-rgb), .42) 46%,
        rgba(var(--tc-rgb-deep), .72) 100%);
}
.zs-tcard .tc-text::after{
    background: linear-gradient(180deg,
        rgba(var(--tc-rgb), 0) 0%,
        rgba(var(--tc-rgb), .68) 34%,
        rgba(var(--tc-rgb-deep), .93) 100%);
    opacity: 0;
    transition: opacity .42s cubic-bezier(.22, .61, .36, 1);
}
.zs-tcard:hover .tc-text::after,
.zs-tcard:focus-visible .tc-text::after{
    opacity: 1;
}
/* 文字压在两层遮罩之上 */
.zs-tcard .tc-title,
.zs-tcard .tc-desc{
    position: relative;
    z-index: 1;
}

.zs-tools .tools-more{
    display: flex;
    justify-content: center;
    padding-top: 48px;
}
.zs-tools .tools-more a{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    padding: 0 42px;
    font-size: 17px;
    font-weight: 600;
    color: #FFFFFF;
    border-radius: 27px;
    background: var(--zs-btn-grad);
    box-shadow: 0 14px 30px -12px rgba(139, 45, 205, .55);
}
.zs-tools .tools-more a:hover{
    color: #FFFFFF;
    filter: saturate(1.12);
}

/* --- 笔记本 ≤1440px --- */
@media only screen and (max-width:1440px){
    .zs-tools .zs-tools-head .title{
        font-size: 38px;
    }
    .zs-tools{
        padding: 68px 0 56px 0;
    }
    .zs-bcard .bc-title{
        font-size: 21px;
    }
}

/* --- 小笔记本 ≤1280px --- */
@media only screen and (max-width:1280px){
    .zs-bcard{
        padding: 22px 22px 26px 22px;
    }
    .zs-tools .zs-tools-head .title{
        font-size: 34px;
    }
    .zs-tools .zs-tools-head{
        margin-bottom: 36px;
    }
    .zs-tcard .tc-title{
        font-size: 18px;
    }
}

/* --- 平板 ≤1023px：bento 降为 2 列 --- */
@media only screen and (max-width:1023px){
    .zs-tools{
        padding: 54px 0 46px 0;
    }
    .zs-tools-tail{
        height: 52px;
    }
    .zs-tools .zs-tools-head .title{
        font-size: 30px;
    }
    .zs-tools .zs-tools-head .desc{
        font-size: 15px;
    }
    /* 平板下副标题会占满整行，绝对定位的按钮会压住文字，
       改为静态居中放在副标题下方 */
    .zs-tools-nav{
        position: static;
        justify-content: center;
        padding-top: 22px;
    }
    .zs-tools-nav button{
        width: 40px;
        height: 40px;
    }
    .zs-bcard .bc-btn a{
        height: 42px;
        padding: 0 20px;
        font-size: 14px;
    }
    .zs-tools .tools-more a{
        height: 48px;
        padding: 0 32px;
        font-size: 15px;
    }
}

/* --- 大屏手机 ≤767px --- */
@media only screen and (max-width:767px){
    .zs-tools{
        padding: 40px 0 34px 0;
    }
    .zs-tools-tail{
        height: 40px;
    }
    .zs-bcard{
        padding: 16px 16px 20px 16px;
        border-radius: 16px;
    }
    .zs-bcard .bc-title{
        font-size: 18px;
    }
    .zs-bcard .bc-desc{
        font-size: 14px;
        -webkit-line-clamp: 3;
    }
    .zs-bcard .bc-btn{
        gap: 10px;
        padding-top: 18px;
    }
    .zs-bcard .bc-btn a{
        flex: 1 1 auto;
        height: 40px;
        padding: 0 12px;
        font-size: 13px;
    }
    .zs-tools .zs-tools-head .title{
        font-size: 26px;
    }
    .zs-tools .zs-tools-head .desc{
        font-size: 14px;
        padding-top: 10px;
    }
    /* 手机端隐藏翻页按钮，改为手指滑动 */
    .zs-tools .zs-tools-head{
        margin-bottom: 24px;
    }
    .zs-tools-nav{
        display: none;
    }
    .zs-tcard .tc-text{
        padding: 46px 16px 16px 16px;
    }
    .zs-tcard:hover .tc-text{
        padding-top: 52px;
    }
    .zs-tcard .tc-title{
        font-size: 16px;
    }
    /* 手机端卡片更矮，展开到 8 行会顶穿图片，这里收到 5 行 */
    .zs-tcard .tc-desc{
        font-size: 13px;
        max-height: calc(1.6em * 2 + 8px);
    }
    .zs-tcard:hover .tc-desc,
    .zs-tcard:focus-visible .tc-desc{
        max-height: calc(1.6em * 5 + 8px);
    }
    .zs-tools .tools-more{
        padding-top: 30px;
    }
}
@media only screen and (max-width:1023px){
    .homecompare{
        margin-top: 10px;
    }
}

/* ==========================================================================
   用户评价墙（Join Thousands Who Revolutionized Their Workflow）
   --------------------------------------------------------------------------
   两行卡片向相反方向匀速滚动的跑马灯。实现要点：
     1) 每行内容在 HTML 里重复两份，轨道整体位移 -50% 即回到起点，
        因此循环处无缝，不需要 JS 计算宽度；
     2) 用 CSS animation 而非 JS 定时器，滚动在合成线程上进行，
        不占主线程，也不会影响 INP；
     3) 鼠标悬停 / 键盘聚焦时暂停，方便阅读；
     4) prefers-reduced-motion 下停止滚动并改为横向可滑动，
        满足无障碍要求（前庭功能障碍用户）。
   背景延续上方 tools 板块的浅紫收尾，再由 .zs-tools-tail 收到白色。
   ========================================================================== */
.zs-reviews{
    display: block;
    position: relative;
    padding: 74px 0 84px 0;
    background-color: #efeafe;
    background-image: linear-gradient(180deg,
        #efeafe 0%,
        #f5f1fe 26%,
        #f1ebfd 58%,
        #e9dcfb 100%);
    overflow: hidden;
}
.zs-reviews-head{
    display: block;
    text-align: center;
    margin-bottom: 40px;
}
.zs-reviews-head .title{
    display: block;
    max-width: 1320px;
    margin: 0 auto;
    font-size: 46px;
    line-height: 1.2;
    letter-spacing: -.02em;
    font-weight: 700;
    color: #14082e;
}
/* 评分行：星级 + 分数 + 来源 + 说明 */
.zs-reviews-rating{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
    margin-top: 18px;
    font-size: 15px;
    color: #4a3b6b;
}
.zs-reviews-rating .stars{
    display: inline-flex;
    gap: 3px;
}
.zs-reviews-rating .stars i{
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    background: #00b67a;
    position: relative;
}
.zs-reviews-rating .stars i::after{
    content: "★";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    color: #FFFFFF;
}
/* 分数是这一行里唯一需要抢眼的元素，保持 700 */
.zs-reviews-rating .score{
    font-size: 17px;
    font-weight: bold;
    color: #14082e;
}
.zs-reviews-rating .sep{
    width: 1px;
    height: 18px;
    background: rgba(20, 8, 46, .18);
}
.zs-reviews-rating .note{
    color: #56466f;
}

/* --- 跑马灯 --- */
.zs-marquee{
    display: block;
    /* 两行卡片满屏铺开，左右溢出由 .zs-reviews 的 overflow:hidden 裁掉 */
    position: relative;
}
.zs-marquee__row{
    display: flex;
    overflow: hidden;
    padding: 9px 0;
    /* 左右边缘淡出，让卡片是"滚进/滚出"而不是被硬切 */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.zs-marquee__track{
    display: flex;
    flex: none;
    gap: 22px;
    padding-right: 22px;
    will-change: transform;
    animation: zs-marquee-left 68s linear infinite;
}
.zs-marquee__row--rtl .zs-marquee__track{
    animation-name: zs-marquee-right;
    animation-duration: 78s;
}
@keyframes zs-marquee-left{
    from{ transform: translate3d(0, 0, 0); }
    to{ transform: translate3d(-50%, 0, 0); }
}
@keyframes zs-marquee-right{
    from{ transform: translate3d(-50%, 0, 0); }
    to{ transform: translate3d(0, 0, 0); }
}
/* 悬停 / 聚焦暂停，便于阅读 */
.zs-marquee:hover .zs-marquee__track,
.zs-marquee:focus-within .zs-marquee__track{
    animation-play-state: paused;
}

/* --- 评价卡片 --- */
/* 卡片刻意做成半透明：让下方的紫色渐变透上来，卡片之间和卡片内部
   都能看到背景色的变化，而不是被一块不透明白底整体挡掉。
   不透明度压到 .42，配合 blur 形成毛玻璃质感。 */
/* 两行卡片必须严格等高：两行是各自独立的 flex 容器，
   靠 stretch 只能让同一行内等高，行与行之间仍会因文字长短而不同。
   所以直接定高，并把评价文字截断到固定行数，超出用省略号。 */
.zs-rcard{
    flex: none;
    display: flex;
    flex-direction: column;
    width: 450px;
    height: 232px;
    margin: 0;
    padding: 24px 26px 26px 26px;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 18px;
    background: rgba(255, 255, 255, .42);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
}
.zs-rcard .rc-head{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
/* 首字母头像：不依赖头像图片素材，也不产生额外请求 */
.zs-rcard .rc-avatar{
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #FFFFFF;
    background-image: var(--zs-btn-grad);
}
.zs-rcard .rc-who{
    flex: 1 1 auto;
    min-width: 0;
}
.zs-rcard .rc-who strong{
    display: block;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;
    color: #14082e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zs-rcard .rc-who span{
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: #6b5b87;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 评价来源标记。这里用中性徽章占位，
   如需换成 Trustpilot / G2 等平台的官方标识，
   替换成对应图片并保留 aria-label 即可。 */
.zs-rcard .rc-src{
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    color: #FFFFFF;
    background: #00b67a;
}
.zs-rcard .rc-src.s2{ background: #ff492c; }
.zs-rcard .rc-src.s3{ background: #0d6efd; }
.zs-rcard .rc-src.s4{ background: #ff4500; }
.zs-rcard .rc-src.s5{ background: #6d28d9; }
.zs-rcard .rc-text{
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    color: #3b2d56;
}

/* --- 笔记本 ≤1440px --- */
@media only screen and (max-width:1440px){
    .zs-reviews{
        padding: 62px 0 72px 0;
    }
    .zs-reviews-head .title{
        font-size: 38px;
    }
    .zs-rcard{
        width: 419px;
        height: 240px;
    }
}

/* --- 小笔记本 ≤1280px --- */
@media only screen and (max-width:1280px){
    .zs-reviews-head .title{
        font-size: 34px;
    }
    .zs-reviews-head{
        margin-bottom: 32px;
    }
    .zs-rcard{
        width: 392px;
        height: 244px;
        padding: 22px 24px 24px 24px;
    }
}

/* --- 平板 ≤1023px --- */
@media only screen and (max-width:1023px){
    .zs-reviews{
        padding: 48px 0 56px 0;
    }
    .zs-reviews-head .title{
        font-size: 30px;
    }
    .zs-reviews-rating{
        font-size: 14px;
    }
    .zs-marquee__track{
        gap: 14px;
        padding-right: 14px;
        animation-duration: 56s;
    }
    .zs-marquee__row--rtl .zs-marquee__track{
        animation-duration: 64s;
    }
    .zs-rcard{
        width: 365px;
        height: 252px;
    }
}

/* --- 手机 ≤767px --- */
@media only screen and (max-width:767px){
    .zs-reviews{
        padding: 34px 0 40px 0;
    }
    .zs-reviews-head{
        margin-bottom: 24px;
    }
    .zs-reviews-head .title{
        font-size: 26px;
    }
    .zs-reviews-rating{
        gap: 8px 10px;
        margin-top: 14px;
        font-size: 13px;
    }
    .zs-reviews-rating .stars i{
        width: 18px;
        height: 18px;
    }
    .zs-reviews-rating .stars i::after{
        font-size: 11px;
    }
    .zs-reviews-rating .sep{
        display: none;
    }
    .zs-marquee__row{
        padding: 6px 0;
    }
    .zs-marquee__track{
        gap: 12px;
        padding-right: 12px;
        animation-duration: 44s;
    }
    .zs-marquee__row--rtl .zs-marquee__track{
        animation-duration: 50s;
    }
    .zs-rcard{
        width: 322px;
        height: 236px;
        padding: 18px 18px 20px 18px;
        border-radius: 16px;
    }
    .zs-rcard .rc-avatar{
        width: 36px;
        height: 36px;
        font-size: 13px;
    }
    .zs-rcard .rc-text{
        font-size: 13px;
    }
}

/* --- 用户要求减少动态效果时：停止滚动，改为可手动横向滑动 --- */
@media (prefers-reduced-motion: reduce){
    .zs-marquee__track{
        animation: none;
    }
    .zs-marquee__row{
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .zs-marquee__row::-webkit-scrollbar{
        display: none;
    }
}

/* ==========================================================================
   AI 图像增强区
   --------------------------------------------------------------------------
   背景承接上方评价墙结束时的浅紫（#e9dcfb），向下收到资讯区的浅灰（#F6F6F6），
   所以三个区块的底色是连续的，不再需要单独的过渡带。
   .homecompare 本身是 .zs-wp（有宽度上限），背景铺不满屏，
   因此在外层套一个满屏的 <section> 专门承载渐变。
   ========================================================================== */
/* 深浅来回过渡的中段：接住上方评价墙的浅紫后先加深到中紫（标题一带最深），
   过了卡片区再回落到浅紫，交给下面的资讯区重新加深。
   两个要点：
   1) padding-bottom 必须留够。卡片是不透明白色，渐变末段如果落在卡片背后就看不见，
      只剩卡片下方那一小条要承担全部色差，变化会显得很急。
   2) 末尾 6% 收成一段纯色平台，和下方 .zs-news-sec 开头的平台接上。
      两段渐变在这里的斜率是反向的（这边越来越浅、那边越来越深），
      直接相接会在接缝处留下一道浅色的尖；中间垫一段纯色就把这个尖抹平了。
   色标排得密是因为跨度大时 sRGB 线性插值会在中间显出一条灰带。 */
.zs-enhance{
    display: block;
    padding: 60px 0 90px 0;
    background-color: #efe7fd;
    background-image: linear-gradient(180deg,
        #e9dcfb 0%,
        #dfcdf9 10%,
        #cdb0f4 22%,
        #bf9df1 32%,
        #c3a2f2 42%,
        #cdb0f4 54%,
        #d9c2f7 66%,
        #e4d3f9 77%,
        #ebdefb 86%,
        #efe7fd 94%,
        #efe7fd 100%);
}
.zs-enhance .homecompare{
    margin-top: 0;
}
@media only screen and (max-width:1280px){
    .zs-enhance{
        padding: 48px 0 24px 0;
    }
}
@media only screen and (max-width:1023px){
    .zs-enhance{
        padding: 38px 0 18px 0;
    }
}
@media only screen and (max-width:767px){
    .zs-enhance{
        padding: 26px 0 10px 0;
    }
}

/* ==========================================================================
   资讯区（两栏面板）+ 全站 CTA + 页脚衔接
   --------------------------------------------------------------------------
   整页的底色是一条深浅来回起伏的链，相邻两段的首尾色值必须相同才不会出现断层：
     .zs-tools    #07040f -> #efeafe      深 -> 浅
     .zs-reviews  #efeafe -> #e9dcfb      浅
     .zs-enhance  #e9dcfb -> #bb98f0 -> #efe7fd   浅 -> 深 -> 浅（中间起伏一次）
     .zs-news-sec #efe7fd -> #7c3aed      浅 -> 深
     .zs-cta      #7c3aed -> #8b5cf6      深
   页脚上移一个圆角的量垫在 CTA 紫色下面，收口交给 CTA 的底部圆角。
   ========================================================================== */
/* 开头 5% 是纯色平台，用来跟上方 .zs-enhance 末尾的平台无缝相接
   （详见上面那段注释里关于"斜率反向"的说明）。 */
.zs-news-sec{
    display: block;
    position: relative;
    padding: 66px 0 80px 0;
    background-color: #7c3aed;
    background-image: linear-gradient(180deg,
        #efe7fd 0%,
        #efe7fd 5%,
        #e8dbfb 11%,
        #d8c2f7 19%,
        #bb9bf0 29%,
        #9061e2 42%,
        #6d33c9 55%,
        #5a21b6 68%,
        #6828cf 82%,
        #7c3aed 100%);
}
.zs-news-head{
    display: block;
    text-align: center;
    margin-bottom: 42px;
}
/* 标题落在渐变最上面的浅紫段上，白字会看不清，所以用深紫 */
.zs-news-head .title{
    display: block;
    max-width: 1320px;
    margin: 0 auto;
    font-size: 46px;
    line-height: 1.2;
    letter-spacing: -.02em;
    font-weight: 700;
    color: #2b1461;
}
.zs-news-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}
/* 面板：浅紫半透明，让下方的紫色背景透上来 */
.zs-npanel{
    display: block;
    padding: 30px 32px 34px 32px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 22px;
    background: rgba(240, 235, 254, .82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 18px 40px -26px rgba(30, 12, 72, .5);
}
.zs-npanel .np-head{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
.zs-npanel .np-icon{
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background-image: var(--zs-btn-grad);
}
.zs-npanel .np-icon img{
    display: block;
    width: 22px;
    height: auto;
}
/* min-width:0 让标题在 flex 行里可以收缩。同排的 .np-more 是 flex:none 且
   white-space:nowrap，标题没有收缩下限的话，英文标题变长就会把按钮顶出去。 */
.zs-npanel .np-title{
    min-width: 0;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 600;
    color: #17092f;
}
/* 面板级的 Read More：靠 margin-left:auto 顶到标题行最右侧。
   做成描边胶囊，跟条目里的 .nl-more 纯文字链接区分开层级。 */
.zs-npanel .np-more{
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    height: 34px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: #5b21b6;
    border: 1px solid rgba(91, 33, 182, .32);
    border-radius: 17px;
    transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}
.zs-npanel .np-more svg{
    display: block;
    width: 14px;
    height: 14px;
    transition: transform .3s ease;
}
.zs-npanel .np-more:hover{
    color: #FFFFFF;
    border-color: transparent;
    background-image: var(--zs-btn-grad);
}
.zs-npanel .np-more:hover svg{
    transform: translateX(3px);
}
.zs-npanel .np-list{
    display: block;
}
.zs-npanel .np-list li{
    display: block;
    padding: 18px 0;
    border-bottom: 1px solid rgba(23, 9, 47, .1);
}
.zs-npanel .np-list li:last-child{
    border-bottom: none;
    padding-bottom: 0;
}
/* 标题最多两行，超出用省略号截断 */
.zs-npanel .nl-title{
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 10px;
}
.zs-npanel .nl-title a{
    color: #2b1a4d;
}
.zs-npanel .nl-title a:hover{
    color: #6d28d9;
}
.zs-npanel .nl-foot{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.zs-npanel .nl-more{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #6d28d9;
}
.zs-npanel .nl-more svg{
    display: block;
    width: 14px;
    height: 14px;
    transition: transform .3s ease;
}
.zs-npanel .nl-more:hover{
    color: #4c1d95;
}
.zs-npanel .nl-more:hover svg{
    transform: translateX(3px);
}
.zs-npanel .nl-date{
    flex: none;
    font-size: 13px;
    color: #6b5b87;
}

/* --- 全站 CTA：深色圆角大卡 ---
   紫色区自己在底部收出大圆角，圆角外侧露出的是下方页脚的黑色
   （靠页脚上移一个圆角的量垫在紫色底下），形成参考图里的收口。 */
/* 上半保持深紫接住 .zs-news-sec 的收尾色，过半程之后逐渐变浅，
   走的是 .zs-news-sec 那条渐变的镜像方向（那边浅→深，这边深→浅）。
   末端停在中浅紫而不是继续走到近白：下面紧接着是纯黑页脚，
   收得太浅会让底部圆角那一圈的明暗反差过大。 */
.zs-cta{
    display: block;
    position: relative;
    z-index: 1;
    padding: 20px 0 84px 0;
    border-radius: 0 0 52px 52px;
    background-color: #cdb8fd;
    background-image: linear-gradient(180deg,
        #7c3aed 0%,
        #7c3aed 24%,
        #8449f0 34%,
        #9061f5 46%,
        #a17bf9 58%,
        #b192fb 70%,
        #bfa4fc 82%,
        #cdb8fd 100%);
}
/* 卡片比容器窄一圈、圆角很大，背景是「上部浅紫、下部近黑」的垂直渐变。
   起始色刻意用比区块底色浅得多的 #cbb6fa：区块顶部是 #7c3aed，
   如果卡片也从同一个紫开始，上边缘就和背景糊在一起、看不出这是一张卡。
   拉开明度差之后，卡片的上沿自然就浮出来了。 */
.zs-cta-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 1440px;
    min-height: 520px;
    margin: 0 auto;
    padding: 80px 40px 84px 40px;
    border-radius: 44px;
    background-color: #050309;
    background-image: linear-gradient(180deg,
        #cbb6fa 0%,
        #b79ef5 10%,
        #9d7ded 22%,
        #7d51db 34%,
        #5a2cb4 47%,
        #3a1878 60%,
        #200d44 73%,
        #0e0620 86%,
        #050309 100%);
    box-shadow: 0 34px 70px -34px rgba(15, 6, 40, .68);
    overflow: hidden;
}
.zs-cta-card .cta-logo{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    margin-bottom: 18px;
}
.zs-cta-card .cta-logo img{
    display: block;
    width: 100%;
    height: auto;
}
.zs-cta-card .cta-title{
    font-size: 58px;
    line-height: 1.2;
    font-weight: 800;
    font-style: italic;
    color: #FFFFFF;
    letter-spacing: -.02em;
}
/* 斜体字形的右上角会伸出它的 inline box，而 background-clip:text 只在
   这个盒子内绘制，所以最后一个字母（Made 的 e）右侧会被切掉。
   改成 inline-block 并补一点 padding-right 把绘制区撑开，
   再用等量负 margin 抵消掉多出来的排版宽度，视觉位置不变。 */
.zs-cta-card .cta-title em{
    display: inline-block;
    font-style: italic;
    padding-right: .14em;
    margin-right: -.14em;
    color: #b8a5f5;
    background-image: linear-gradient(90deg, #d3c6fe 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
@supports (-webkit-text-fill-color: transparent){
    .zs-cta-card .cta-title em{
        -webkit-text-fill-color: transparent;
    }
}
.zs-cta-card .cta-desc{
    max-width: 1060px;
    margin: 22px auto 0 auto;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.65;
    color: rgba(255, 255, 255, .74);
}
.zs-cta-card .cta-btn{
    display: flex;
    justify-content: center;
    margin-top: 34px;
}
.zs-cta-card .cta-btn a{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    padding: 0 52px;
    font-size: 18px;
    font-weight: 600;
    color: #FFFFFF;
    border-radius: 32px;
    background-image: var(--zs-btn-grad);
}
.zs-cta-card .cta-btn a:hover{
    color: #FFFFFF;
    background-image: var(--zs-btn-grad-hover);
}

/* --- 页脚衔接 ---
   页脚上移 52px（正好一个 CTA 底部圆角的量）垫在紫色下面，
   顶部圆角取消：收口交给上面的紫色块，页脚本身是平的黑块。
   必须用相邻兄弟选择器限定「页脚紧跟 .zs-cta」——index.css 被全部页面引用，
   写成无条件的 .zs-footer 会让其余没有 CTA 区的页面页脚也被上移。 */
.zs-cta + .zs-footer{
    position: relative;
    z-index: 0;
    margin-top: -52px;
    padding-top: 92px;
    border-radius: 0;
}

/* --- 笔记本 ≤1440px --- */
@media only screen and (max-width:1440px){
    .zs-news-head .title{
        font-size: 38px;
    }
    .zs-cta-card .cta-title{
        font-size: 40px;
    }
    .zs-npanel{
        padding: 26px 28px 30px 28px;
    }
}

/* --- 小笔记本 ≤1280px --- */
@media only screen and (max-width:1280px){
    .zs-news-sec{
        padding: 56px 0 68px 0;
    }
    .zs-news-head{
        margin-bottom: 34px;
    }
    .zs-news-head .title{
        font-size: 34px;
    }
    .zs-news-grid{
        gap: 22px;
    }
    .zs-npanel{
        padding: 24px 24px 28px 24px;
        border-radius: 20px;
    }
    .zs-npanel .np-title{
        font-size: 19px;
    }
    .zs-cta{
        padding: 16px 0 74px 0;
    }
    .zs-cta-card{
        padding: 48px 32px 52px 32px;
        border-radius: 38px;
    }
    .zs-cta-card .cta-title{
        font-size: 48px;
    }
    .zs-cta-card .cta-logo{
        width: 76px;
        height: 76px;
    }
    .zs-cta-card .cta-desc{
        font-size: 17px;
    }
}

/* --- 平板 ≤1023px：两栏改单栏 --- */
@media only screen and (max-width:1023px){
    .zs-news-sec{
        padding: 46px 0 56px 0;
    }
    .zs-news-head .title{
        font-size: 30px;
    }
    .zs-news-grid{
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }
    .zs-cta{
        padding: 14px 0 62px 0;
        border-radius: 0 0 40px 40px;
    }
    .zs-cta-card{
        padding: 40px 26px 44px 26px;
        border-radius: 32px;
    }
    .zs-cta-card{
        min-height: 420px;
    }
    .zs-cta-card .cta-title{
        font-size: 38px;
    }
    .zs-cta-card .cta-logo{
        width: 66px;
        height: 66px;
    }
    .zs-cta-card .cta-desc{
        font-size: 16px;
    }
    .zs-cta-card .cta-btn a{
        height: 58px;
        padding: 0 44px;
        font-size: 17px;
        border-radius: 29px;
    }
    .zs-cta + .zs-footer{
        margin-top: -40px;
        padding-top: 72px;
    }
}

/* --- 手机 ≤767px --- */
@media only screen and (max-width:767px){
    .zs-news-sec{
        padding: 34px 0 42px 0;
    }
    .zs-news-head{
        margin-bottom: 24px;
    }
    .zs-news-head .title{
        font-size: 26px;
    }
    .zs-npanel{
        padding: 20px 18px 22px 18px;
        border-radius: 16px;
    }
    .zs-npanel .np-icon{
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }
    .zs-npanel .np-icon img{
        width: 18px;
    }
    .zs-npanel .np-title{
        font-size: 17px;
    }
    .zs-npanel .np-list li{
        padding: 14px 0;
    }
    .zs-npanel .nl-title{
        font-size: 14px;
    }
    .zs-npanel .nl-more,
    .zs-npanel .nl-date{
        font-size: 12px;
    }
    .zs-cta{
        padding: 10px 0 48px 0;
        border-radius: 0 0 28px 28px;
    }
    .zs-cta-card{
        padding: 30px 18px 34px 18px;
        border-radius: 24px;
    }
    .zs-cta-card{
        min-height: 0;
    }
    .zs-cta-card .cta-logo{
        width: 56px;
        height: 56px;
        margin-bottom: 14px;
    }
    .zs-cta-card .cta-title{
        font-size: 28px;
    }
    .zs-cta-card .cta-desc{
        font-size: 15px;
        margin-top: 14px;
    }
    .zs-cta-card .cta-btn{
        margin-top: 24px;
    }
    .zs-cta-card .cta-btn a{
        height: 52px;
        padding: 0 34px;
        font-size: 16px;
        border-radius: 26px;
    }
    .zs-cta + .zs-footer{
        margin-top: -28px;
        padding-top: 54px;
    }
}