@charset "utf-8";
/* ==========================================================================
   智态生创官网 · 新版设计系统  site.css
   风格：深蓝科技 + 青色点缀（与 2026 版设计稿一致）
   依赖：bootstrap 4 栅格 + bootstrap-icons
   ========================================================================== */

:root{
  --zt-navy-900:#04102b;
  --zt-navy-800:#061a3c;
  --zt-navy-700:#0a2350;
  --zt-navy-600:#10306b;
  --zt-navy-500:#17418c;
  --zt-cyan:#35d3d8;
  --zt-cyan-soft:#6ec5ce;
  --zt-cyan-deep:#12a7b4;
  --zt-violet:#403c93;
  --zt-ink:#16233d;
  --zt-ink-2:#4a5570;
  --zt-ink-3:#8b95ab;
  --zt-line:#e3e8f0;
  --zt-paper:#ffffff;
  --zt-paper-2:#f5f8fc;
  --zt-radius:4px;
  --zt-sec-y:96px;
  --zt-sec-y-sm:56px;
}

/* ---------- 通用 ---------- */
.zt-body{color:var(--zt-ink);background:#fff;}
.zt-body a{color:inherit;}
.zt-body a:hover{color:var(--zt-cyan-deep);}

.zt-container{width:100%;max-width:1240px;margin:0 auto;padding:0 20px;}
@media (min-width:1400px){.zt-container{max-width:1320px;}}

.zt-sec{position:relative;padding:var(--zt-sec-y) 0;overflow:hidden;}
@media (max-width:767.98px){.zt-sec{padding:var(--zt-sec-y-sm) 0;}}

/* 深色区 */
.zt-dark{background:linear-gradient(135deg,var(--zt-navy-900) 0%,var(--zt-navy-700) 52%,var(--zt-navy-800) 100%);color:#fff;}
.zt-dark .zt-title,.zt-dark h1,.zt-dark h2,.zt-dark h3,.zt-dark h4{color:#fff;}
.zt-dark p{color:rgba(255,255,255,.74);}
.zt-dark a{color:#fff;}

/* 浅色区 */
.zt-light{background:#fff;color:var(--zt-ink);}
.zt-soft{background:var(--zt-paper-2);}

/* 深色区底部渐变装饰线 */
.zt-glow{position:absolute;left:0;right:0;bottom:0;height:180px;
  background:url(../images/patent-bg.jpg) center bottom/cover no-repeat;
  opacity:.55;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 62%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 62%);}
.zt-glow.top{bottom:auto;top:0;transform:scaleY(-1);}

/* ---------- 标题组 ---------- */
.zt-head{position:relative;padding-left:18px;margin-bottom:38px;}
.zt-head::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--zt-cyan),var(--zt-cyan-deep));}
.zt-head h2{margin:0;font-size:38px;line-height:1.18;font-weight:700;letter-spacing:.01em;}
.zt-head .en{margin-top:6px;font-size:26px;line-height:1.2;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--zt-violet);}
.zt-dark .zt-head .en{color:var(--zt-cyan);}
@media (max-width:767.98px){
  .zt-head h2{font-size:26px;}
  .zt-head .en{font-size:15px;letter-spacing:.08em;}
  .zt-head{margin-bottom:24px;padding-left:14px;}
}
.zt-head.center{padding-left:0;text-align:center;}
.zt-head.center::before{display:none;}

/* ---------- 按钮 ---------- */
.zt-more{display:inline-flex;align-items:center;font-size:15px;font-weight:600;letter-spacing:.04em;
  padding:12px 26px;border-radius:999px;border:1px solid currentColor;transition:.28s;}
.zt-more i{margin-left:10px;font-size:18px;transition:.28s;}
.zt-more:hover i{transform:translateX(6px);}
.zt-dark .zt-more{color:var(--zt-cyan);}
.zt-dark .zt-more:hover{background:var(--zt-cyan);border-color:var(--zt-cyan);color:var(--zt-navy-900);}
.zt-light .zt-more{color:var(--zt-violet);}
.zt-light .zt-more:hover{background:var(--zt-violet);border-color:var(--zt-violet);color:#fff;}

/* 纯文字箭头按钮（设计稿「探索更多 →」） */
.zt-arrow{display:inline-flex;align-items:center;font-size:15px;font-weight:600;letter-spacing:.04em;}
.zt-arrow .ico{width:38px;height:38px;border-radius:50%;border:1px solid currentColor;display:inline-flex;
  align-items:center;justify-content:center;margin-right:12px;transition:.28s;}
.zt-arrow:hover .ico{background:currentColor;}
.zt-arrow:hover .ico i{color:#04102b;}
.zt-dark .zt-arrow{color:var(--zt-cyan);}
.zt-light .zt-arrow{color:var(--zt-cyan-deep);}

/* ---------- 数据 ---------- */
.zt-stat .lab{font-size:14px;color:inherit;opacity:.72;margin-bottom:2px;}
.zt-stat .num{font-size:52px;line-height:1;font-weight:700;letter-spacing:-.01em;}
.zt-stat .num .unit{font-size:20px;font-weight:500;margin-left:2px;}
.zt-dark .zt-stat .num{color:#fff;}
.zt-light .zt-stat .num{color:var(--zt-cyan-deep);}
@media (max-width:767.98px){.zt-stat .num{font-size:34px;}.zt-stat .num .unit{font-size:14px;}.zt-stat .lab{font-size:12px;}}

/* ---------- 圆环图标 ---------- */
.zt-ring{width:132px;height:132px;border-radius:50%;border:1px solid rgba(255,255,255,.32);
  display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto;
  transition:.3s;background:rgba(255,255,255,.02);}
.zt-ring i{font-size:36px;line-height:1;margin-bottom:12px;color:#fff;}
.zt-ring span{font-size:14px;color:rgba(255,255,255,.86);}
.zt-ring:hover{border-color:var(--zt-cyan);background:rgba(53,211,216,.1);transform:translateY(-6px);}
.zt-ring:hover i{color:var(--zt-cyan);}
@media (max-width:767.98px){.zt-ring{width:96px;height:96px;}.zt-ring i{font-size:26px;margin-bottom:6px;}.zt-ring span{font-size:12px;}}

/* 深蓝玻璃小标签（源起珠峰 等） */
.zt-chip{display:inline-flex;align-items:center;padding:9px 20px;border-radius:999px;
  background:linear-gradient(135deg,rgba(53,211,216,.22),rgba(53,211,216,.06));
  border:1px solid rgba(53,211,216,.35);color:#fff;font-size:14px;white-space:nowrap;}

/* ---------- 卡片 ---------- */
.zt-card{background:#fff;border:1px solid var(--zt-line);border-radius:var(--zt-radius);
  padding:34px 30px;height:100%;transition:.3s;position:relative;overflow:hidden;}
.zt-card::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--zt-cyan);transition:.35s;}
.zt-card:hover{box-shadow:0 18px 40px rgba(9,30,66,.1);transform:translateY(-6px);border-color:transparent;}
.zt-card:hover::after{width:100%;}
.zt-card .no{font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--zt-cyan-deep);}
.zt-card h3{margin:12px 0 12px;font-size:20px;font-weight:700;color:var(--zt-ink);}
.zt-card p{margin:0;font-size:14px;line-height:1.85;color:var(--zt-ink-2);}
.zt-card .zt-arrow{margin-top:20px;font-size:14px;}
.zt-card .zt-arrow .ico{width:30px;height:30px;margin-right:8px;}

/* 深色卡片 */
.zt-dark .zt-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);}
.zt-dark .zt-card h3{color:#fff;}
.zt-dark .zt-card p{color:rgba(255,255,255,.7);}

/* ---------- 页头（一级栏目 hero） ---------- */
.zt-hero{position:relative;min-height:420px;display:flex;align-items:center;
  background:linear-gradient(135deg,var(--zt-navy-900),var(--zt-navy-700) 60%,var(--zt-navy-600));
  color:#fff;margin-top:0;padding:150px 0 64px;}
.zt-hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(1000px 420px at 78% 12%,rgba(53,211,216,.2),transparent 62%);pointer-events:none;}
.zt-hero .zt-hero-inner{position:relative;z-index:2;}
.zt-hero .kicker{display:inline-block;font-size:14px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--zt-cyan);margin-bottom:16px;}
.zt-hero h1{font-size:46px;font-weight:700;line-height:1.2;margin:0 0 14px;}
.zt-hero .sub{font-size:17px;color:rgba(255,255,255,.72);max-width:720px;line-height:1.9;margin:0;}
.zt-hero.with-bg{background-size:cover;background-position:center;}
.zt-hero.with-bg::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(4,16,43,.88) 0%,rgba(4,16,43,.62) 48%,rgba(4,16,43,.3) 100%);}
@media (max-width:767.98px){
  .zt-hero{min-height:0;padding:118px 0 40px;}
  .zt-hero h1{font-size:27px;}
  .zt-hero .sub{font-size:14px;}
}

/* ---------- 二级导航 ---------- */
.zt-subnav{background:rgba(6,22,52,.98);border-bottom:1px solid rgba(255,255,255,.1);position:relative;z-index:3;}
.zt-subnav ul{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;}
.zt-subnav li{margin-right:38px;}
.zt-subnav a{display:block;padding:18px 0;font-size:15px;color:rgba(255,255,255,.66);position:relative;transition:.25s;}
.zt-subnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--zt-cyan);
  transform:scaleX(0);transition:.28s;}
.zt-subnav a:hover,.zt-subnav li.cur a{color:#fff;}
.zt-subnav li.cur a::after,.zt-subnav a:hover::after{transform:scaleX(1);}
.zt-crumb{font-size:13px;color:rgba(255,255,255,.5);}
.zt-crumb a{color:rgba(255,255,255,.5)!important;}
.zt-crumb a:hover{color:var(--zt-cyan)!important;}
@media (max-width:767.98px){
  .zt-subnav ul{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;}
  .zt-subnav li{margin-right:22px;flex:0 0 auto;}
  .zt-subnav a{padding:14px 0;font-size:14px;white-space:nowrap;}
}

/* ---------- 首页首屏 ---------- */
.zt-banner{position:relative;}
.zt-banner img{width:100%;display:block;}
.zt-banner .zt-hero-txt{position:absolute;left:0;right:0;bottom:16%;color:#fff;}
.zt-banner .zt-hero-txt h1{font-size:52px;font-weight:700;line-height:1.22;margin:0 0 16px;letter-spacing:.01em;}
.zt-banner .zt-hero-txt .en{font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8);margin:0;}
@media (max-width:767.98px){
  .zt-banner .zt-hero-txt{bottom:10%;}
  .zt-banner .zt-hero-txt h1{font-size:22px;margin-bottom:8px;}
  .zt-banner .zt-hero-txt .en{font-size:10px;letter-spacing:.06em;}
}

/* 首屏占满视口 */
.zt-full{position:relative;height:calc(100vh - 0px);min-height:520px;overflow:hidden;}
.zt-full img{width:100%;height:100%;object-fit:cover;display:block;}
.zt-full .zt-hero-txt{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);color:#fff;}
.zt-full .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,16,43,.72),rgba(4,16,43,.12) 62%,transparent);}
@media (max-width:767.98px){.zt-full{height:74vh;min-height:420px;}}

/* ---------- 图文左右分栏 ---------- */
.zt-split{display:flex;align-items:center;gap:56px;}
.zt-split .col-txt{flex:0 0 46%;max-width:46%;}
.zt-split .col-pic{flex:1 1 auto;min-width:0;}
.zt-split.rev{flex-direction:row-reverse;}
.zt-split p{font-size:15px;line-height:2;margin:0 0 14px;}
@media (max-width:991.98px){
  .zt-split{flex-direction:column;gap:26px;}
  .zt-split.rev{flex-direction:column;}
  .zt-split .col-txt,.zt-split .col-pic{flex:1 1 auto;max-width:100%;width:100%;}
}

/* ---------- 发展历程时间轴 ---------- */
.zt-timeline{position:relative;padding-top:34px;}
.zt-timeline::before{content:"";position:absolute;left:50%;top:44px;width:2px;height:calc(100% - 60px);
  background:linear-gradient(180deg,transparent,rgba(53,211,216,.6),transparent);}
.zt-tl-item{position:relative;padding:0 0 44px;}
.zt-tl-item .dot{position:absolute;left:50%;top:8px;width:11px;height:11px;margin-left:-5px;border-radius:50%;
  background:var(--zt-cyan);box-shadow:0 0 0 5px rgba(53,211,216,.18);}
.zt-tl-item .yr{font-size:40px;font-weight:700;line-height:1;color:var(--zt-cyan);margin-bottom:8px;}
.zt-tl-item h4{font-size:19px;font-weight:700;color:#fff;margin:0 0 14px;}
.zt-tl-item ul{padding:0;margin:0;list-style:none;}
.zt-tl-item li{position:relative;padding-left:14px;font-size:14px;line-height:2;color:rgba(255,255,255,.72);}
.zt-tl-item li::before{content:"";position:absolute;left:0;top:13px;width:4px;height:4px;border-radius:50%;background:rgba(53,211,216,.8);}
@media (min-width:768px){
  .zt-tl-item:nth-child(odd) .tl-box{width:calc(50% - 40px);text-align:right;margin-left:0;}
  .zt-tl-item:nth-child(odd) li{padding-left:0;padding-right:14px;}
  .zt-tl-item:nth-child(odd) li::before{left:auto;right:0;}
  .zt-tl-item:nth-child(even) .tl-box{width:calc(50% - 40px);margin-left:calc(50% + 40px);}
}
@media (max-width:767.98px){
  .zt-timeline::before{left:6px;}
  .zt-tl-item .dot{left:6px;}
  .zt-tl-item{padding-left:28px;}
  .zt-tl-item .tl-box{width:100%;}
  .zt-tl-item .yr{font-size:28px;}
}

/* ---------- 荣誉 ---------- */
.zt-honor-list{display:flex;flex-wrap:wrap;gap:16px;padding:0;margin:0;list-style:none;justify-content:center;}
.zt-honor-list li{flex:0 0 auto;padding:12px 24px;border:1px solid rgba(53,211,216,.35);border-radius:999px;
  font-size:14px;color:#fff;background:rgba(53,211,216,.07);}
.zt-honor-no1{display:flex;flex-wrap:wrap;justify-content:center;gap:56px;text-align:center;margin-bottom:40px;}
.zt-honor-no1 .big{font-size:56px;font-weight:700;color:var(--zt-cyan);line-height:1;}
.zt-honor-no1 .txt{font-size:15px;color:rgba(255,255,255,.8);line-height:1.9;margin-top:6px;}

/* ---------- 数据矩阵 ---------- */
.zt-matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 24px;}
.zt-matrix .cell .k{font-size:22px;font-weight:700;color:var(--zt-cyan);display:flex;align-items:baseline;gap:8px;}
.zt-matrix .cell .k .tag{font-size:11px;letter-spacing:.12em;opacity:.55;color:#fff;font-weight:400;text-transform:uppercase;}
.zt-matrix .cell .num{font-size:44px;font-weight:700;line-height:1.1;color:#fff;margin:6px 0 8px;}
.zt-matrix .cell .num sup{font-size:16px;color:var(--zt-cyan);top:-1.1em;}
.zt-matrix .cell .d{font-size:14px;color:rgba(255,255,255,.7);}
@media (max-width:767.98px){
  .zt-matrix{grid-template-columns:repeat(2,1fr);gap:24px 16px;}
  .zt-matrix .cell .num{font-size:30px;}
  .zt-matrix .cell .k{font-size:16px;}
}

/* ---------- 首页 关于我们 ---------- */
.zt-home-about{position:relative;background:#eef4fb;}
.zt-home-about .bgimg{position:absolute;right:0;top:0;bottom:0;width:46%;background-size:cover;background-position:center left;}
.zt-home-about .bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#eef4fb 0%,rgba(238,244,251,.1) 34%,transparent 100%);}
.zt-home-about .inner{position:relative;z-index:2;padding:100px 0;}
.zt-home-about .stats{display:flex;flex-wrap:wrap;gap:52px;margin:30px 0 22px;}
.zt-home-about .lead{font-size:19px;font-weight:700;color:var(--zt-ink);margin:0 0 16px;}
.zt-home-about p.txt{font-size:14px;line-height:2.05;color:var(--zt-ink-2);margin:0 0 26px;max-width:560px;}
@media (max-width:991.98px){
  .zt-home-about .bgimg{position:relative;width:100%;height:220px;background-position:center;}
  .zt-home-about .bgimg::after{background:linear-gradient(180deg,rgba(238,244,251,.2),#eef4fb);}
  .zt-home-about .inner{padding:40px 0 56px;}
  .zt-home-about .stats{gap:26px;margin:22px 0 16px;}
  .zt-home-about .lead{font-size:15px;}
}

/* ---------- 首页 专利技术 ---------- */
.zt-patent .txtbox{background:rgba(255,255,255,.05);border-left:2px solid var(--zt-cyan);
  padding:22px 24px;backdrop-filter:blur(2px);}
.zt-patent .txtbox h4{font-size:17px;font-weight:700;color:#fff;margin:0 0 12px;}
.zt-patent .txtbox p{font-size:13px;line-height:2;color:rgba(255,255,255,.72);margin:0;}

/* ---------- 首页 新闻 ---------- */
.zt-news-item{display:block;height:100%;padding:0 26px;border-left:1px solid var(--zt-line);transition:.3s;}
.zt-news-item .date{font-size:13px;color:var(--zt-ink-3);letter-spacing:.06em;}
.zt-news-item h3{font-size:17px;font-weight:700;color:var(--zt-cyan-deep);line-height:1.6;margin:12px 0;height:54px;overflow:hidden;}
.zt-news-item p{font-size:13px;line-height:1.95;color:var(--zt-ink-2);height:76px;overflow:hidden;margin:0 0 18px;}
.zt-news-item .go{font-size:13px;color:var(--zt-ink-3);border:1px solid var(--zt-line);padding:8px 20px;display:inline-block;transition:.28s;}
.zt-news-item:hover h3{color:var(--zt-violet);}
.zt-news-item:hover .go{border-color:var(--zt-cyan-deep);color:var(--zt-cyan-deep);}
.zt-news-pic{position:relative;display:block;overflow:hidden;background:var(--zt-navy-800);min-height:250px;}
.zt-news-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:.5s;}
.zt-news-pic:hover img{transform:scale(1.05);}
@media (max-width:991.98px){
  .zt-news-item{border-left:0;border-top:1px solid var(--zt-line);padding:22px 0 6px;margin-top:6px;}
  .zt-news-item h3{height:auto;}
  .zt-news-item p{height:auto;}
}

/* ---------- 首页 智态美学通栏 ---------- */
.zt-brand-band{position:relative;overflow:hidden;
  background:linear-gradient(100deg,#081f47 0%,#0f3169 38%,#2b60a0 72%,#7ea9d3 100%);}
.zt-brand-band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 420px at 10% 18%,rgba(53,211,216,.16),transparent 62%);}
.zt-brand-band .inner{position:relative;z-index:2;padding:80px 0;}
.zt-brand-band .band-pic{width:100%;max-width:820px;border-radius:4px;}
.zt-brand-band .zt-head h2,.zt-brand-band .zt-head .en{color:#fff;}
.zt-brand-band .zt-head .en{color:rgba(255,255,255,.62);}
.zt-brand-band .lead{font-size:20px;font-weight:700;color:var(--zt-cyan);margin:0 0 18px;}
.zt-brand-band .txt{font-size:14px;line-height:2.1;color:rgba(255,255,255,.78);margin:0 0 16px;max-width:520px;}
.zt-brand-band .zt-arrow{color:var(--zt-cyan);margin-top:8px;}
@media (max-width:991.98px){
  .zt-brand-band .inner{padding:56px 0 64px;}
  .zt-brand-band .lead{font-size:16px;}
  .zt-brand-band .band-pic{margin-top:24px;}
}

/* ---------- 全链路研发体系 ---------- */
.zt-chain{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:10px;}
.zt-chain::before{content:"";position:absolute;left:0;right:0;top:34px;height:2px;
  background:linear-gradient(90deg,var(--zt-cyan),rgba(53,211,216,.15));}
.zt-chain .step{position:relative;padding:0 22px 0 0;}
.zt-chain .no{position:relative;z-index:2;width:68px;height:68px;border-radius:50%;background:#fff;
  border:2px solid var(--zt-cyan);color:var(--zt-cyan-deep);font-size:20px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-bottom:26px;}
.zt-chain .step:nth-child(even){padding-top:74px;}
.zt-chain .step:nth-child(even)::before{content:"";position:absolute;left:34px;top:34px;width:2px;height:74px;background:var(--zt-cyan);}
.zt-chain h4{font-size:20px;font-weight:700;color:var(--zt-ink);margin:0 0 8px;}
.zt-chain .tag{font-size:13px;color:var(--zt-cyan-deep);margin-bottom:14px;}
.zt-chain ul{padding:0;margin:0;list-style:none;}
.zt-chain li{position:relative;padding-left:13px;font-size:13px;line-height:2;color:var(--zt-ink-2);}
.zt-chain li::before{content:"";position:absolute;left:0;top:12px;width:4px;height:4px;border-radius:50%;background:var(--zt-ink-3);}
@media (max-width:991.98px){
  .zt-chain{grid-template-columns:1fr 1fr;}
  .zt-chain::before{display:none;}
  .zt-chain .step{padding:0 16px 30px 0;}
  .zt-chain .step:nth-child(even){padding-top:0;margin-top:0;}
  .zt-chain .step:nth-child(even) .no{margin-top:0;}
  .zt-chain .step:nth-child(even)::before{display:none;}
  .zt-chain .no{width:52px;height:52px;font-size:16px;margin-bottom:16px;}
  .zt-chain h4{font-size:17px;}
}
@media (max-width:575.98px){.zt-chain{grid-template-columns:1fr;}}

/* ==========================================================================
   页脚（2026-09-18 改版）
   --------------------------------------------------------------------------
   版式参考巨子生物官网：最左品牌标识，右侧一级栏目分列（栏目名作列标题、
   下方挂二级链接），媒体二维码与其并排。
   三栏 = 品牌 200px ｜ 栏目 1fr ｜ 媒体 252px。
   窄屏（≤991.98px）按需求只保留 logo 与媒体二维码，栏目导航隐藏。
   logo 用 logo-light.png（白字 + 青色分子，深蓝底可读），不再用 filter 反白。
   ========================================================================== */
.zt-foot{background:var(--zt-navy-900);color:rgba(255,255,255,.66);padding:64px 0 0;}
.zt-foot-main{display:grid;grid-template-columns:190px minmax(0,1fr) 244px;
  gap:42px 40px;align-items:start;}

/* —— 左 · 品牌 —— */
.zt-foot-brand img{display:block;height:52px;width:auto;}
.zt-foot-brand .sub{margin:20px 0 0;max-width:220px;font-size:12.5px;line-height:1.95;
  color:rgba(255,255,255,.42);}

/* —— 中 · 全部栏目（目录结构同顶栏） —— */
.zt-foot-nav{display:flex;flex-wrap:wrap;column-gap:32px;row-gap:28px;}
/* 列名刻意避开 bootstrap 的 .col（它带 flex-basis:0 + flex-grow:1，会把 7 列拉成等宽而挤断标题） */
.zt-foot-nav .fcol{flex:0 0 auto;min-width:68px;}
.zt-foot-nav .h{display:block;margin-bottom:13px;font-size:14px;font-weight:700;
  white-space:nowrap;color:#fff;letter-spacing:.03em;transition:color .25s var(--zt-ease);}
.zt-foot-nav .h:hover{color:var(--zt-cyan);}
.zt-foot-nav .i{display:block;font-size:12.5px;line-height:2.05;white-space:nowrap;
  color:rgba(255,255,255,.5);transition:color .25s var(--zt-ease);}
.zt-foot-nav .i:hover{color:var(--zt-cyan);}

/* —— 右 · 媒体二维码与链接 —— */
.zt-foot-media .qrs{display:flex;gap:13px;}
.zt-foot-media .qr{flex:1 1 0;min-width:0;text-align:center;}
.zt-foot-media .qr img{display:block;width:100%;max-width:78px;height:auto;margin:0 auto;
  aspect-ratio:1/1;object-fit:cover;
  transition:transform .38s var(--zt-ease),box-shadow .38s var(--zt-ease);}
/* 抖音码为圆形圆点码，方裁会带深灰四角 → 圆形裁剪贴深蓝底 */
.zt-foot-media .qr.qr-round img{border-radius:50%;}
.zt-foot-media .qr span{display:block;margin-top:9px;font-size:11px;line-height:1.5;
  color:rgba(255,255,255,.48);word-break:break-word;}
.zt-foot-media .qr:hover img{transform:translateY(-3px) scale(1.04);
  box-shadow:0 12px 26px rgba(0,0,0,.38);}
.zt-foot-media .more{display:inline-block;margin-top:18px;font-size:12.5px;
  color:rgba(255,255,255,.55);transition:color .25s var(--zt-ease);}
.zt-foot-media .more:hover{color:var(--zt-cyan);}
.zt-foot-media .more i{display:inline-block;margin-left:5px;font-size:11px;
  transition:transform .3s var(--zt-ease);}
.zt-foot-media .more:hover i{transform:translateX(4px);}

/* —— 底部版权条 —— */
.zt-foot .bar{margin-top:46px;border-top:1px solid rgba(255,255,255,.1);
  padding:22px 0 26px;font-size:12px;color:rgba(255,255,255,.42);
  display:flex;flex-wrap:wrap;justify-content:center;gap:5px;}
.zt-foot .bar a{font-size:12px;color:rgba(255,255,255,.42);transition:color .25s var(--zt-ease);}
.zt-foot .bar a:hover{color:var(--zt-cyan);}

/* —— 平板（<1240，7 个栏目挤不进一行）：品牌独占一行，下方「栏目 ｜ 媒体」两栏 —— */
@media (max-width:1239.98px) and (min-width:992px){
  .zt-foot-main{grid-template-columns:minmax(0,1fr) 224px;gap:34px 36px;}
  .zt-foot-brand{grid-column:1 / -1;}
  .zt-foot-brand .sub{max-width:520px;margin-top:16px;}
  .zt-foot-nav{column-gap:28px;row-gap:24px;}
  .zt-foot-nav .fcol{min-width:64px;}
  .zt-foot-media .qr img{max-width:68px;}
}

/* —— 窄屏（手机）：只保留 logo 与媒体二维码，隐藏栏目导航 —— */
@media (max-width:991.98px){
  .zt-foot{padding-top:48px;}
  .zt-foot-main{grid-template-columns:1fr;gap:32px;justify-items:center;}
  .zt-foot-nav{display:none;}
  .zt-foot-brand{text-align:center;}
  .zt-foot-brand img{height:44px;margin:0 auto;}
  .zt-foot-brand .sub{max-width:320px;margin-left:auto;margin-right:auto;}
  .zt-foot-media{text-align:center;}
  .zt-foot-media .qrs{justify-content:center;gap:22px;}
  .zt-foot-media .qr img{max-width:88px;}
  .zt-foot-media .qr span{font-size:11.5px;}
  .zt-foot-media .more{margin-top:16px;}
  .zt-foot .bar{margin-top:34px;padding:18px 0 22px;justify-content:center;text-align:center;}
}

/* ---------- 后台内容区（保留原有富文本） ---------- */
.zt-prose{font-size:15px;line-height:2.05;color:var(--zt-ink-2);word-break:break-word;}
.zt-prose img{max-width:100%;height:auto;}
.zt-prose h1,.zt-prose h2,.zt-prose h3,.zt-prose h4{color:var(--zt-ink);margin:28px 0 14px;}
.zt-prose p{margin:0 0 14px;}
.zt-prose table{width:100%;max-width:100%;}
.zt-dark .zt-prose,.zt-dark .zt-prose p,.zt-dark .zt-prose li{color:rgba(255,255,255,.75);}
.zt-dark .zt-prose h1,.zt-dark .zt-prose h2,.zt-dark .zt-prose h3{color:#fff;}

/* ---------- 表格 / 列表（科研成果等） ---------- */
.zt-pat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;text-align:center;}
.zt-pat-grid .it{padding:22px 8px;border:1px solid rgba(255,255,255,.14);border-radius:var(--zt-radius);background:rgba(255,255,255,.03);}
.zt-pat-grid .n{font-size:38px;font-weight:700;color:#fff;line-height:1;}
.zt-pat-grid .n sup{font-size:16px;color:var(--zt-cyan);top:-1.2em;}
.zt-pat-grid .t{display:inline-block;margin-top:12px;font-size:13px;color:rgba(255,255,255,.8);
  border:1px solid rgba(53,211,216,.4);border-radius:999px;padding:5px 14px;}
@media (max-width:991.98px){
  .zt-pat-grid{grid-template-columns:repeat(2,1fr);}
  .zt-pat-grid .n{font-size:28px;}
}

.zt-kv{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 32px;}
.zt-kv li{list-style:none;font-size:14px;color:rgba(255,255,255,.72);line-height:1.9;position:relative;padding-left:14px;}
.zt-kv li::before{content:"";position:absolute;left:0;top:12px;width:4px;height:4px;border-radius:50%;background:var(--zt-cyan);}
@media (max-width:767.98px){.zt-kv{grid-template-columns:1fr;}}

/* ---------- 入口卡片（一级页总览） ---------- */
.zt-entry{display:block;position:relative;height:260px;border-radius:var(--zt-radius);overflow:hidden;
  background:linear-gradient(135deg,var(--zt-navy-700),var(--zt-navy-500));color:#fff;padding:34px;transition:.35s;}
.zt-entry::after{content:"";position:absolute;inset:0;background:radial-gradient(400px 200px at 80% 100%,rgba(53,211,216,.28),transparent 70%);}
.zt-entry .idx{font-size:13px;letter-spacing:.2em;color:var(--zt-cyan);}
.zt-entry h3{position:relative;z-index:2;font-size:26px;font-weight:700;margin:14px 0 8px;color:#fff;}
.zt-entry .en{position:relative;z-index:2;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.zt-entry p{position:relative;z-index:2;font-size:13px;line-height:1.9;color:rgba(255,255,255,.7);margin:16px 0 0;}
.zt-entry:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(9,30,66,.24);}

/* ---------- 团队介绍卡片 ---------- */
.zt-team-hd{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,.12);}
.zt-team-hd h3{margin:0;font-size:24px;font-weight:700;color:#fff;}
.zt-team-card .zt-chip{font-size:12px;padding:6px 14px;}
.zt-team-card p{font-size:13.5px;line-height:2;}
.zt-dark .zt-team-card:hover{border-color:rgba(53,211,216,.5);}
@media (max-width:767.98px){
  .zt-team-hd h3{font-size:20px;}
}

/* ---------- 后台内容为空时整块隐藏（避免空白带） ---------- */
.zt-prose:empty{display:none;}
.zt-sec:has(> .zt-container > .zt-prose:empty){display:none;}

/* ---------- 分页（列表页） ---------- */
.zt-sec .pagination{display:flex;flex-wrap:wrap;justify-content:center;list-style:none;padding:0;margin:36px 0 0;}
.zt-sec .pagination .page-link{border:1px solid var(--zt-line);background:#fff;color:var(--zt-ink);
  margin:0 3px;border-radius:6px;min-width:40px;text-align:center;font-size:14px;line-height:1.6;padding:7px 12px;}
.zt-sec .pagination .page-link:hover{border-color:var(--zt-cyan);color:var(--zt-cyan-deep);background:#fff;}
.zt-sec .pagination .page-item.active .page-link{background:var(--zt-cyan);border-color:var(--zt-cyan);color:var(--zt-navy-900);font-weight:700;}
/* 深色区块内的分页：反转配色，避免白底白字 */
.zt-dark .pagination .page-link,
.zt-soft .zt-dark .pagination .page-link{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.88);}
.zt-dark .pagination .page-link:hover{border-color:var(--zt-cyan);color:var(--zt-cyan);background:rgba(53,211,216,.12);}
.zt-dark .pagination .page-item.active .page-link{background:var(--zt-cyan);border-color:var(--zt-cyan);color:var(--zt-navy-900);}
.zt-sec .text-secondary{color:var(--zt-ink-2)!important;}
.zt-dark .text-secondary{color:rgba(255,255,255,.6)!important;}
/* ==========================================================================
   设计稿还原板块（.zt-slide）—— 基于 2026-09-18 定稿设计稿（2560×1440）
   底图 = 设计稿「纯图片版」（无任何文字），文字/图标全部由 HTML+CSS 排版
   换算：设计稿 1px = 100/2560 = 0.0390625cqw（容器查询单位 → 等比缩放不跑版）
   下列 left/top/尺寸 均为设计稿实测值（墨迹包围盒法），单位 cqw

   容器查询的「参照物」是 .stage（= 设计稿 2560×1440 的等比缩放舞台），
   不是 .zt-slide 本身；桌面端舞台被缩到「宽高都放得下」，整张设计稿完整呈现。
   ========================================================================== */
.zt-slide{position:relative;overflow:hidden;background:var(--s-bg);
  --s-ink:#fff;--s-sub:rgba(255,255,255,.84);--s-accent:#35d3d8;--s-bg:#04122b;--s-navy:#000b53;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;}
/* 舞台：设计稿画布，同时是 cqw 的查询容器。
   窄屏它就是「图上 + 文下」里的那张图：宽度铺满、高度按设计稿比例。 */
.zt-slide .stage{position:relative;z-index:1;container-type:inline-size;}
/* 底图 = 设计稿「纯图片版」。整张完整呈现：等比缩放、不裁切、不变形。 */
.zt-slide .pic{position:relative;width:100%;height:auto;aspect-ratio:2560/1440;
  object-fit:cover;object-position:center;display:block;}
/* —— 边缘延续带（桌面端补舞台外空隙用，见下方 ≥992px 段）——
   每条带 = 底图最外缘 12 列（左/右）或 12 行（上/下）像素，沿垂直/水平方向拉伸；
   左带已水平翻转、上带已垂直翻转，保证「紧挨舞台的那条边 = 底图真正的外缘像素」，
   于是接缝颜色逐像素一致，看不出边界。素材由 tools/gen_bands.py 生成。

   ⚠️ 哪些边真正会画出带，由各屏的舞台几何决定（见下方 ≥992px 段的 --zt-sw-max / --zt-gap-*）：
     · 首屏、专利技术 —— 舞台仍是统一基准，只有**底图**加宽到「宽 = 屏幕宽」并居中
       溢出舞台（见下方 ≥992px 段的 .zt-slide-hero/.zt-slide-patent .pic）。
       此时舞台外仍有左右空隙、左右带的尺寸也 > 0，但它们永远被压在同一位置的底图
       下面（带是 section 的 background-image，画在背景层；.pic 在 z-index:1 的
       .stage 内），所以两侧不可能出现残影。
     · 关于我们 —— 底图右对齐（图案贴右、右缘即屏幕右缘），空隙全在左侧 → 只有左带；
       上一版曾在右侧画带，把压边的塔楼拖出一条很显眼的残影，已彻底去除。
     · 智态美学 —— 仍然居中，四边都补（维持上一版效果）。
   这也意味着：**底图不能换成另一张比例不同的图**，否则延续带会和主体对不上（接缝会立刻暴露）。
   换图必须连 16 条 `images/*-bd-{l,r,t,b}.png` 一起用 tools/gen_bands.py 重生成。
   ⚠️ 曾试过「1 列渐变条 + 50px 淡出过渡条」的双层方案（v1.5.4），过渡条会把贴缝侧的
   物体一起淡出 → 两侧出现大面积残影，已被 2026-09-24 版废弃，不要再回退到那个做法。 */
.zt-slide-hero{--zt-bd-l:url(../images/hero-peptide-bd-l.png);--zt-bd-r:url(../images/hero-peptide-bd-r.png);
  --zt-bd-t:url(../images/hero-peptide-bd-t.png);--zt-bd-b:url(../images/hero-peptide-bd-b.png);}
.zt-slide-about{--zt-bd-l:url(../images/slide-about-bd-l.png);--zt-bd-r:url(../images/slide-about-bd-r.png);
  --zt-bd-t:url(../images/slide-about-bd-t.png);--zt-bd-b:url(../images/slide-about-bd-b.png);}
/* ⚠️ 关于我们这条右带只有在「屏幕比底图还宽」时才真的画出来（--zt-gap-r > 0，
   超宽屏才满足），平时尺寸算出来是 0×avail、浏览器不画。不要因为"看着用不上"就删掉
   声明或改成 none —— 那会让这一屏的背景层从 4 条掉到 3 条，
   tools/verify_band.js 的「各屏 4 层」断言会误报（2026-09-24 踩过）。 */
.zt-slide-about .pic{aspect-ratio:3061/1440;}   /* 底图是 3061×1440 的右侧延展版 */
.zt-slide-patent{--zt-bd-l:url(../images/slide-patent-bd-l.png);--zt-bd-r:url(../images/slide-patent-bd-r.png);
  --zt-bd-t:url(../images/slide-patent-bd-t.png);--zt-bd-b:url(../images/slide-patent-bd-b.png);}
.zt-slide-brand{--zt-bd-l:url(../images/slide-brand-bd-l.png);--zt-bd-r:url(../images/slide-brand-bd-r.png);
  --zt-bd-t:url(../images/slide-brand-bd-t.png);--zt-bd-b:url(../images/slide-brand-bd-b.png);}
.zt-slide .body,.zt-slide .hd,.zt-slide .rings,.zt-slide .more{position:absolute;z-index:3;}

/* —— 标题组：主标题墨迹顶 131px / 英文 252px，左 166px（三页一致） —— */
.zt-slide .hd{left:6.48cqw;top:5.02cqw;}
.zt-slide .hd h2{margin:0;font-size:3.80cqw;line-height:1;font-weight:300;color:var(--s-ink);letter-spacing:0;}
.zt-slide .hd .en{margin:.73cqw 0 0;font-size:2.95cqw;line-height:1;font-weight:400;
  color:var(--s-ink);text-transform:uppercase;letter-spacing:-.01em;}

/* —— 探索更多：圆环 ⌀94px @ (174,1122)，文字 45px @ x302 —— */
.zt-slide .more{left:6.80cqw;top:43.83cqw;display:flex;align-items:center;
  font-size:1.76cqw;line-height:1;color:var(--s-accent);text-decoration:none;}
.zt-slide .more .ico{width:3.63cqw;height:3.63cqw;flex:0 0 auto;border-radius:50%;
  border:max(1px,.117cqw) solid var(--s-more-ico,currentColor);color:var(--s-more-ico,currentColor);
  display:inline-flex;align-items:center;justify-content:center;transition:.28s;}
.zt-slide .more .ico svg{width:56%;height:56%;display:block;}
.zt-slide .more .tx{margin-left:1.33cqw;color:var(--s-accent);text-decoration:underline;
  text-underline-offset:.22em;text-decoration-thickness:max(1px,.039cqw);text-decoration-color:currentColor;}
.zt-slide .more:hover .tx{color:#fff;}
.zt-slide .more:hover .ico{background:var(--s-accent);border-color:var(--s-accent);color:var(--s-bg);}

/* ============================ 关于我们（浅色） ============================ */
.zt-slide-about{--s-ink:#000b53;--s-sub:#000b53;--s-accent:#12bfd0;--s-bg:#e9eff6;--s-more-ico:#12bfd0;}
/* 统计：标签墨迹顶 436px / 数字 505px；三列左起 169 / 617 / 1020 */
.zt-slide-about .stats{position:absolute;z-index:3;left:6.60cqw;top:17.02cqw;}
.zt-slide-about .st{position:absolute;top:0;white-space:nowrap;}
.zt-slide-about .st:nth-child(1){left:0;}
.zt-slide-about .st:nth-child(2){left:17.50cqw;}
.zt-slide-about .st:nth-child(3){left:33.24cqw;}
.zt-slide-about .lab{font-size:1.445cqw;line-height:1;font-weight:400;color:var(--s-ink);}
.zt-slide-about .num{margin-top:1.7cqw;font-size:3.82cqw;line-height:1;font-weight:300;
  color:#0ac5d7;letter-spacing:0;}
.zt-slide-about .num .u{font-size:1.6cqw;font-weight:300;margin-left:.1cqw;vertical-align:baseline;}
/* lead 墨迹顶 662px；段落 762px，行距 50px，行宽 1144px */
.zt-slide-about .lead{font-size:1.29cqw;line-height:1.52;font-weight:600;color:var(--s-ink);}
.zt-slide-about .lead{position:absolute;z-index:3;left:6.60cqw;top:25.47cqw;}
.zt-slide-about .txt{position:absolute;z-index:3;left:6.60cqw;top:29.37cqw;width:46.0cqw;
  font-size:1.29cqw;line-height:1.52;font-weight:400;color:var(--s-ink);margin:0;}

/* ============================ 专利技术（深色） ============================ */
.zt-slide-patent{--s-ink:#ffffff;--s-sub:#d8dadd;--s-accent:#35d3d8;--s-bg:#030c22;}
/* 左列半透明白色面板：设计稿 x0-1000px, y529-975px，向右线性淡出
   ⚠️ 桌面端舞台按「宽高都放得下」缩放时，舞台左缘外侧补的是「边缘延续带」（纯底图像素）。
      面板若 left:0，它的硬左边会正好压在舞台左缘上：带 = 纯底图，图 = 底图叠 27% 白，
      实测一路色差 ≈ 65 色阶（带侧 [1,8,34] → 图侧 [69,75,90]），就是用户看到的竖「边边」。
      修法：把面板整体往左多铺一个带宽 --zt-bw，左段维持 27% 白（＝面板左缘浓度，一直铺到
      屏幕左边缘自然收口，看不出端点），--zt-bw 之后再按原设计 0.27→0.205(38%)→0 淡出。 */
.zt-slide-patent .panel{position:absolute;left:calc(-1 * var(--zt-bw, 0px));top:20.66cqw;
  width:calc(39.06cqw + var(--zt-bw, 0px));height:17.42cqw;z-index:2;
  background:linear-gradient(90deg,
    rgba(255,255,255,.27) 0,
    rgba(255,255,255,.27) var(--zt-bw, 0px),
    rgba(255,255,255,.205) calc(var(--zt-bw, 0px) + 14.84cqw),
    rgba(255,255,255,0) calc(var(--zt-bw, 0px) + 39.06cqw));
  pointer-events:none;}
/* 竖向强调条：x113-116px（3px 宽），y577-942px */
.zt-slide-patent .bar{position:absolute;left:4.41cqw;top:22.54cqw;width:.117cqw;height:14.26cqw;z-index:3;
  background:rgba(255,255,255,.85);}
.zt-slide-patent .para{position:absolute;left:6.60cqw;top:22.47cqw;width:32.0cqw;z-index:3;}
.zt-slide-patent .para h4{margin:0 0 1.94cqw;font-size:1.48cqw;line-height:1;font-weight:700;color:#fff;}
.zt-slide-patent .para p{margin:0;font-size:1.17cqw;line-height:1.68;color:var(--s-sub);}
/* 六圆环：⌀321px，列心 1372/1772/2172，行心 478.5/884.5 → 环区左上 (1212,318) */
.zt-slide .rings{left:47.34cqw;top:12.42cqw;
  display:grid;grid-template-columns:repeat(3,12.54cqw);grid-template-rows:repeat(2,12.54cqw);
  column-gap:3.09cqw;row-gap:3.32cqw;}
.zt-slide .ring{position:relative;border-radius:50%;
  border:max(1px,.078cqw) solid rgba(255,255,255,.88);transition:.35s;}
.zt-slide .ring .ic{position:absolute;left:50%;top:calc(50% - 1.25cqw);transform:translate(-50%,-50%);
  width:5.30cqw;height:5.30cqw;object-fit:contain;display:block;}
.zt-slide .ring .lb{position:absolute;left:50%;top:calc(50% + 3.20cqw);transform:translate(-50%,-50%);
  font-size:1.42cqw;line-height:1;font-weight:400;color:#fdfdfd;white-space:nowrap;}
.zt-slide .ring:hover{border-color:var(--s-accent);box-shadow:0 0 0 .23cqw rgba(53,211,216,.12);}

/* ============================ 品牌智态美学 ============================ */
.zt-slide-brand{--s-ink:#ffffff;--s-sub:#d0d6e1;--s-accent:#2fd5e4;--s-bg:#12294d;--s-more-ico:#ffffff;}
/* lead 青色墨迹顶 538px；段落 680px，行距 67px，行宽 ≈830px */
.zt-slide-brand .lead{position:absolute;z-index:3;left:6.76cqw;top:20.94cqw;font-size:1.79cqw;line-height:1;
  font-weight:500;color:#2fd5e4;}
.zt-slide-brand .txt{position:absolute;z-index:3;left:6.88cqw;top:25.90cqw;width:33.0cqw;
  font-size:1.38cqw;line-height:1.89;font-weight:400;color:var(--s-sub);margin:0;}

/* ============================ 官网首图 ============================ */
.zt-slide-hero{--s-ink:#fff;}
.zt-slide-hero .hero-txt{position:absolute;left:7.89cqw;top:23.36cqw;z-index:3;}
.zt-slide-hero .t1{display:block;font-size:4.43cqw;line-height:1;font-weight:500;color:#fff;letter-spacing:0;}
.zt-slide-hero .t2{display:block;margin-top:.78cqw;font-size:3.906cqw;line-height:1;font-weight:500;color:#fff;}
.zt-slide-hero .en{display:block;margin-top:.88cqw;font-size:.93cqw;line-height:1;font-weight:400;
  color:rgba(255,255,255,.94);}

/* ==========================================================================
   整屏适配 + 滚动吸附（2026-09-20 第四次定稿：整图 + 边缘延续带）
   ---------------------------------------------------------------------------
   问题演进：
     · 一稿「板块高度按宽度等比」→ 1920 宽时每屏 1080px，而 1920×1080 屏上浏览器
       可用高只有 880~950px，一张图永远看不全；
     · 二稿「等比缩到宽高都放得下 + 同图放大模糊垫底」→ 垫底与前景缩放比不同、
       内容错位，两侧露出「边边」；
     · 三稿「前景整图四边羽化」→ 硬边没了，但主体被一起削掉，边缘像蒙了一层雾；
     · 四稿「抠图分层（背景延展 + 透明主体）」→ 主体浮在一片纯色氛围底上，
       照片通透感全失，超宽屏下主体边缘仍会露缝；
     · 六稿「1 列渐变条 + 50px 淡出过渡条」→ 过渡条把压在边上的物体一起淡出，
       两侧出现大面积残影（智态美学最明显），已废弃。
   现做法：**不抠图、不裁切、不羽化**，按屏分别处理「舞台外的空隙」：
     ① 板块高度 = 100svh（一屏一张图），滚动吸附对齐；
     ② .stage 与底图严格同比例，所以 cqw 文案永远与图对位；
        绝大多数屏按「宽、高都放得下」等比缩放 —— 整张设计稿完整呈现（不裁切）；
     ③ 舞台外的空隙：能不留就不留（首屏/专利技术把底图放大到铺满屏宽，
        两侧空隙直接为 0，也就没有侧带可残影）；非补不可时用「底图最外缘
        12 列/行像素拉伸出来的延续带」，色带紧挨舞台的那条边就是底图真正的外缘像素
        → 接缝逐像素一致，既没有「边边」，也不会像模糊垫底那样出现内容错位的第二层影子。
     具体哪屏怎么处理，见下方 .zt-slide.zt-slide-* 那三条规则。
   头部高度与视口尺寸由 site-anim.js 量测写入 --zt-headh / --zt-w / --zt-h，
   下面全部尺寸都用这三个变量做纯 px 计算，避免 vw/vh 与滚动条宽度带来的偏差。
   窄屏（≤991.98px）不受影响：仍是「图上 + 文下」的常规流式排版。
   ========================================================================== */
@media (min-width:992px){
  /* 必须用 mandatory：proximity 只在「离得足够近」时才吸，实测停在两屏正中
     （1920×880 下 880/1760 的正中 = 1320）时完全不吸，正是用户说的「停在两页中间」。
     mandatory 则每次都落到板块边界；配 scroll-snap-stop:always 后一次手势只走一屏，
     与巨子生物的 Swiper 整屏切换手感一致（实测仍能一路滚到新闻区与页脚，不卡死）。 */
  :root{--zt-headh:96px;--zt-w:100vw;--zt-h:100svh;} /* 兜底值，实际由 site-anim.js 量测写入 */
  html{scroll-snap-type:y mandatory;}

  .zt-slide{
    /* 头部以下、视口底以上的可用高度 */
    --zt-avail:calc(var(--zt-h) - var(--zt-headh));
    /* 舞台宽度 = 「设计稿按可用区等比放得下的最大宽度」。
       ⚠️ 四屏共用这一个基准，谁都不要再单独覆写 —— 舞台同时还是 cqw 的查询容器，
          改舞台宽 = 改该屏全部前景的尺度（字号 / 左边界 / 六环 / 面板 / CTA）。
          v1.5.5 就是把首屏/专利技术的 --zt-sw 写成 100vw 去「让底图铺满屏幕」，
          结果标题被一起放大成 1.106×(1920×1080) ~ 1.447×(3440×1440)，
          用户报「专利那页的字体特别的大」。底图要铺满，请改用
          「底图溢出舞台」的做法（见下方 ① 与 .pic 规则），不要动舞台。 */
    --zt-sw-max:calc(var(--zt-avail) * 2560 / 1440);
    --zt-sw:min(var(--zt-w), var(--zt-sw-max));
    --zt-sh:calc(var(--zt-sw) * 1440 / 2560);
    /* 舞台外的左右空隙（两屏可以不等：默认左右平分；关于我们全部留在左侧） */
    --zt-gap-l:max(0px, calc((var(--zt-w) - var(--zt-sw)) / 2));
    --zt-gap-r:max(0px, calc((var(--zt-w) - var(--zt-sw)) / 2));
    /* 上下空隙：舞台比可用区矮时才有 */
    --zt-bh:max(0px, calc((var(--zt-avail) - var(--zt-sh)) / 2));
    /* 带向舞台内多伸 2px（搭接）：带与舞台都是小数尺寸，Chrome 会把两者的绘制边
       各自吸附到整像素，吸附方向相反时中间会露出 1px 板块底色 —— 实测 1920×1080
       下那一列的色彩 = 33.5% 图片 + 66.5% 底色，肉眼就是一条淡竖线。
       把带多铺 2px 压在图片底下（图片是 .stage 的子元素，绘制层级更高），缝就永远露不出来。
       min(2px, …) 保证带本来就不存在（0 宽/0 高）时不会凭空多出 2px 压在图上。 */
    --zt-gl-i:calc(var(--zt-gap-l) + min(2px, var(--zt-gap-l)));
    --zt-gr-i:calc(var(--zt-gap-r) + min(2px, var(--zt-gap-r)));
    --zt-bh-i:calc(var(--zt-bh) + min(2px, var(--zt-bh)));
    --zt-by:var(--zt-headh);   /* 左右带 / 上带的下笔点：头部下沿 */
    /* 专利技术那块 27% 白渐隐面板要往左多铺一个带宽（见 .zt-slide-patent .panel）——
       只有「舞台居中」时左侧才有带宽需要覆盖，所以它恒等于居中版的半空隙。 */
    --zt-bw:max(0px, calc((var(--zt-w) - var(--zt-sw)) / 2));
    /* 设计稿顶部保护带 = 设计稿 y128（标题墨迹顶）换算到当前缩放：
       128 / 2560 = 5%，所以它就是舞台宽的 5%。见下方 .stage 的 top。 */
    --zt-top-guard:calc(var(--zt-sw) * 0.05);
    /* 舞台中心线 / 顶边（都相对板块顶，因为 .stage 是「top + translate(0,-50%)」定位的）。
       顶边为负 = 舞台被裁到板块上方（首屏/专利技术放大后就是这种）。 */
    --zt-stage-top:max(calc(var(--zt-headh) + var(--zt-avail) / 2),
                       calc(var(--zt-headh) - var(--zt-top-guard) + var(--zt-sh) / 2));
    --zt-stage-y:calc(var(--zt-stage-top) - var(--zt-sh) / 2);

    height:100svh;min-height:560px;scroll-snap-align:start;scroll-snap-stop:always;
    /* 四条延续带：左/右带宽度 = 各自那侧的空隙（0 宽则不绘制）；上下带同理。
       左右带竖着铺满「可用高度」，上下带横着铺满视口宽度，四角不留缝。
       哪一侧留空、留多少，由上面的 --zt-sw-max / --zt-gap-* 按屏决定。 */
    background-repeat:no-repeat;
    background-image:var(--zt-bd-l),var(--zt-bd-r),var(--zt-bd-t),var(--zt-bd-b);
    background-size:
      var(--zt-gl-i) var(--zt-avail),
      var(--zt-gr-i) var(--zt-avail),
      var(--zt-w)  var(--zt-bh-i),
      var(--zt-w)  var(--zt-bh-i);
    background-position:
      left  var(--zt-by),
      right var(--zt-by),
      left  var(--zt-by),
      left  bottom;
  }

  /* —— 分屏适配策略（2026-09-24 v1.5.7）——
     ① 首屏 / 专利技术：**舞台不动，只让底图溢出**。
        舞台 --zt-sw 走全站统一基准 ⇒ 字号 / 左边界 / 六环 / 面板 / CTA 与关于我们、
        智态美学落在同一条设计网格上（用户要的就是「同等规格的字体，每页应该大小一样」）。
        底图单独加宽到「宽 = 屏幕宽」并**居中溢出**舞台（见下方同名的 .pic 规则）：
          · 舞台 ≤ 屏幕宽 ⇒ 舞台外仍有左右空隙，左右延续带的尺寸也 > 0、会被绘制，
            但它们永远压在底图**下面**（带 = section 的 background-image，在背景层；
            .pic 在 z-index:1 的 .stage 内）⇒ 两侧不可能出现残影；
          · 屏幕不比舞台宽时，溢出量恒为 0，底图退回「铺满舞台」。
        ⚠️ 不要走 v1.5.5 那条「把 --zt-sw 写成 100vw、让舞台宽 = 屏幕宽」的路：
          舞台同时是 cqw 的查询容器，那样会把该屏前景整体放大
          （1920×1080 下 1.106×、3440×1440 下 1.447×），正是用户报的「字体特别大」。
        ⚠️ 也别给溢出量设任何上限（v1.5.5 之前给 --zt-sw 设过 avail×2.35）：在 1920×880、
          3440×1440 这类「很宽很矮」的屏上会重新挤出 47~149px 的侧带，而底图右缘正好
          压着那团高光玻璃体 → 侧带把它复制成一条竖残影。 */

  /* ② 关于我们：底图换成**右侧延展版**（3061×1440 = 原图 2560 + 右侧延展 501）。
        关键在「舞台 ≠ 底图」：
          · 舞台(--zt-sw) 仍按**设计稿网格 2560** 缩放，并且**居中**（--zt-gap-l 走默认的
            半空隙）—— 因为底图左 2560 列就是原图内容，舞台居中 ⇒ 图案（天际线）
            落在「原图 2560 居中时」的同一位置，一个像素都不差，正是用户要的
            「图案位置和 关于我们.jpg 居中的位置差不多」。
          · 底图本身比舞台宽 3061/2560，多出来的部分靠 .pic 加宽后**往右溢出舞台右缘**
            （不裁、不缩、不变形）。所以底图"不是居中"也不是"左对齐"。
          · 于是：屏幕比底图还宽时，左侧空隙由左带补（＝用户说的「用延伸填满」），
            右侧空隙由右带补。屏幕不比底图宽时（绝大多数屏）底图直接溢出屏幕右缘被裁，
            右侧不留任何带 —— 与用户「不要把建筑也延长了」的要求一致。
        ⚠️ --zt-gap-r 必须按**底图实际右缘**算（= gap-l + 3061/2560 · sw），
        不能用默认的半空隙，否则底图右侧那一截会被右带盖住一半。 */
  .zt-slide.zt-slide-about{
    --zt-gap-r:max(0px, calc(var(--zt-w) - var(--zt-gap-l) - var(--zt-sw) * 3061 / 2560));
  }

  /* 舞台：水平位置由 --zt-gap-l 决定（居中屏 = 半空隙，关于我们 = 全部空隙）；
     垂直位置用 --zt-stage-top（见 .zt-slide 里的定义，两个候选值取 max()）：
       · 居中版 = 导航下沿 + 可用区半高（舞台比可用区矮时用，四边留空隙补带）；
       · 顶部保护版 = 让舞台顶边正好落在「导航下沿 − 设计稿 y128 对应的像素高」，
         等价于把设计稿 y128（标题墨迹顶）钉在导航下沿，避免舞台比可用区高时标题
         被顶进导航或顶出屏幕。⚠️ 必须 + sh/2（半个舞台高）——漏掉它的后果是整张
         底图被 translate 推到屏幕上方，底部露出一大块板块底色（实测 1920×954 下
         首屏与专利技术底部约 400px 是空的，2026-09-24 修复）。
     v1.5.7 起四屏舞台都按同一基准缩放、舞台高恒 ≤ 可用区（首屏/专利技术的底图靠
     .pic 自己溢出，不再放大舞台）⇒ max() 通常选中前者；保留后者用于防御
     「舞台被撑高」的将来改动。 */
  .zt-slide .stage{position:absolute;left:var(--zt-gap-l);z-index:1;
    top:var(--zt-stage-top);
    transform:translate(0,-50%);
    width:var(--zt-sw);
    aspect-ratio:2560/1440;}

  /* 底图铺满舞台（与舞台同比例 → 既不裁切也不变形） */
  .zt-slide .pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

  /* 关于我们：底图（3061×1440）比舞台（2560 网格）宽 501/2560，加宽后往右溢出舞台右缘。
     溢出的那一截正好落进「屏幕比底图宽时」才出现的右侧空隙里；屏幕不够宽时它溢出视口、
     被裁掉。两种情况下都不裁图、不缩放、不变形（盒子比例 = 底图原始比例，见上）。 */
  .zt-slide.zt-slide-about .pic{right:auto;width:calc(100% * 3061 / 2560);}

  /* 首屏 / 专利技术：底图宽度 = **屏幕宽**（--zt-w），高度按底图原比例 2560:1440 等比，
     再居中「溢出」舞台 —— 舞台本身一个像素都不动（见上方 ① 注释），所以这两屏的
     字号 / 左边界 / 六环 / 面板 / CTA 与关于我们、智态美学完全同规格。
     盒子宽 : 高 恒 = 2560 : 1440 = 底图原始比例 ⇒ object-fit:cover 既不裁切也不变形。
     屏幕不比舞台宽时（--zt-sw == --zt-w）left/top 算出来是 0 ⇒ 自动退回「铺满舞台」。
     ⚠️ 尺寸一律写成「长度 ± 长度」「长度 × 数字」，**绝不写 calc(100% * 长度 / 长度)** ——
        那是 percentage × length，属于非法类型组合，浏览器会连同整条声明一起丢弃：
        丢掉 height ⇒ 盒子变成 屏宽×舞台高（比例 ≠ 底图比例）⇒ object-fit:cover 只能
        放大再裁掉上下 ⇒ 表现为「背景被放大、上下各裁一截」，正是用户报的
        「首屏和专利技术的背景放得太大了」。丢掉 width ⇒ 退回舞台宽、两侧露出延续带。
     ⚠️ 宽度用 --zt-w 而不是 100vw —— --zt-w 是 site-anim.js 量测写入、已扣掉滚动条。 */
  .zt-slide.zt-slide-hero .pic,
  .zt-slide.zt-slide-patent .pic{
    right:auto;bottom:auto;
    width:var(--zt-w);
    height:calc(var(--zt-w) * 1440 / 2560);
    left:calc((var(--zt-sw) - var(--zt-w)) / 2);
    top:calc((var(--zt-sh) - var(--zt-w) * 1440 / 2560) / 2);
  }

  /* —— 探索更多（②-b）——
     设计稿位置 = 舞台顶边 + 43.83% 舞台宽（＝设计稿 y1122）。
     ⚠️ .more 是 .stage 的子元素 ⇒ 它的 top 本来就是「以舞台盒为原点」的，
        所以第一个候选值就是 43.83cqw，**绝不能再加 --zt-stage-y**
        （2026-09-24 曾误加：舞台顶边被重复计一次 → CTA 整体下移约 89px →
         溢出板块底部 → 被 .zt-slide 的 overflow:hidden 裁掉 → 观察器判为不可见 →
         「智态美学」屏的 CTA 永久 opacity:0 不显示。1440×900 / 1280×800 上复现。）
     v1.5.7 起四屏舞台都按统一基准缩放、舞台高恒 ≤ 可用区，所以设计稿 y1122
     一定落在屏内，min() 的第二个候选值**当前不会触发**；保留它是为了兜底 ——
     将来若有任何改动又把舞台撑高（例如再想把底图放大），它会自动把 CTA 贴到可视底边，
     不至于把整枚 CTA 丢到屏外。
     第二个候选值同样要以舞台盒为原点 ⇒ 必须再减掉 --zt-stage-y。
     3.63cqw = 圆环直径，4svh = 离底边留白，两者相减保证整个 .more 都在屏内。 */
  .zt-slide .more{top:min(43.83cqw,
                          calc(100svh - 4svh - 3.63cqw - var(--zt-stage-y)));}

  /* 尾部的新闻区与页脚也设吸附点，避免滚到底时停在一半 */
  .zt-home-news,.zt-foot{scroll-snap-align:start;}
}
}

/* ==========================================================================
   窄屏降级：取消绝对定位，改为「图上 + 文下」的常规流式排版
   ========================================================================== */
@media (max-width:1199.98px){
  .zt-slide-about .txt{width:56cqw;}
  .zt-slide-patent .para{width:44cqw;}
  .zt-slide-brand .txt{width:42cqw;}
}
@media (max-width:991.98px){
  .zt-slide{height:auto;aspect-ratio:auto;background:var(--s-bg);padding-bottom:34px;}
  .zt-slide .panel,.zt-slide-patent .bar{display:none;}
  .zt-slide .hd,.zt-slide .body,.zt-slide .more,
  .zt-slide .rings,.zt-slide-about .lead,.zt-slide-about .txt,
  .zt-slide-brand .lead,.zt-slide-brand .txt,.zt-slide-hero .hero-txt,
  .zt-slide-patent .para{
    position:static;left:auto;top:auto;width:auto;transform:none;margin-left:20px;margin-right:20px;}
  .zt-slide .hd{margin-top:26px;}
  .zt-slide .hd h2{font-size:30px;}
  .zt-slide .hd .en{margin-top:8px;font-size:17px;}
  /* 统计三列：必须与 .hd/.lead/.txt/.more 一样左右各留 20px，
     否则会贴住 section 左边缘（原 flex 靠左堆叠 → 左边贴边、右侧空一大块） */
  .zt-slide-about .stats{position:static;left:auto;top:auto;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:10px;
    align-items:end;margin:22px 20px 0;}
  .zt-slide-about .st{position:static;left:auto;margin:0;white-space:normal;min-width:0;}
  .zt-slide-about .lab{font-size:12.5px;line-height:1.35;}
  .zt-slide-about .num{margin-top:8px;font-size:27px;}
  .zt-slide-about .num .u{font-size:13px;}
  .zt-slide-about .lead{font-size:15px;margin-top:22px;}
  .zt-slide-about .txt,.zt-slide-brand .txt{margin-top:16px;font-size:15px;line-height:1.8;}
  .zt-slide-brand .lead{font-size:17px;margin-top:22px;}
  .zt-slide-patent .para{margin-top:22px;}
  .zt-slide-patent .para h4{margin-bottom:10px;font-size:20px;}
  .zt-slide-patent .para p{font-size:14px;line-height:1.9;}
  .zt-slide .rings{display:grid;position:static;left:auto;top:auto;margin-top:24px;
    grid-template-columns:repeat(2,1fr);grid-template-rows:auto;gap:12px 0;}
  .zt-slide .ring{width:112px;height:112px;margin:0 auto;}
  .zt-slide .ring .ic{width:44px;height:44px;top:calc(50% - 10px);}
  .zt-slide .ring .lb{top:calc(50% + 26px);font-size:13px;}
  .zt-slide .more{margin-top:24px;font-size:15px;}
  .zt-slide .more .ico{width:34px;height:34px;border-width:1px;}
  .zt-slide .more .tx{margin-left:10px;}
  .zt-slide-hero .hero-txt{margin-top:24px;}
  .zt-slide-hero .t1{font-size:28px;}
  .zt-slide-hero .t2{font-size:24px;margin-top:6px;}
  .zt-slide-hero .en{margin-top:12px;font-size:13px;line-height:1.55;}
}

/* ==========================================================================
   滚动动效 + 瀑布流（2026-09-18 追加）
   动效节奏参考巨子生物官网：首屏大标题分层浮现 → 数据滚动 → 板块自上而下
   「像水流一样」逐层落入 → 底图轻视差 → 卡片悬浮。
   实现：纯 IntersectionObserver + CSS transition，无第三方库。
   注意：所有「初始隐藏」规则都挂在 html.zt-js 下 —— 脚本失效时内容照常可见。
   ========================================================================== */
:root{--zt-ease:cubic-bezier(.22,.61,.36,1);}

/* —— 入场：默认自下而上浮现；--rv-d 控制瀑布式级联延迟，--rv-base 控制落位错落 —— */
.zt-js .zt-reveal{opacity:0;
  transform:translate3d(var(--rv-x,0),calc(var(--rv-y,42px) + var(--rv-base,0px)),0) scale(var(--rv-s,1));
  transition:opacity 1.05s var(--zt-ease) var(--rv-d,0s),
             transform 1.18s var(--zt-ease) var(--rv-d,0s);
  will-change:opacity,transform;}
.zt-js .zt-reveal.is-in{opacity:1;transform:translate3d(0,var(--rv-base,0px),0) scale(1);will-change:auto;}

/* —— 生长式入场：横条（面板向右展开）/ 竖条（强调条自上而下落） —— */
.zt-js .zt-grow-x{opacity:0;transform:scaleX(0);transform-origin:left center;
  transition:opacity .7s var(--zt-ease) var(--rv-d,0s),transform 1.15s var(--zt-ease) var(--rv-d,0s);}
.zt-js .zt-grow-x.is-in{opacity:1;transform:scaleX(1);}
/* 专利面板向左多铺了一个带宽（见 .zt-slide-patent .panel），
   生长动画的起点要钉回「设计稿左缘」而不是屏幕左缘，否则动效看起来变成从屏幕外长出来。 */
.zt-js .zt-slide-patent .panel.zt-grow-x{transform-origin:var(--zt-bw, 0px) center;}
.zt-js .zt-grow-y{opacity:0;transform:scaleY(0);transform-origin:center top;
  transition:opacity .5s var(--zt-ease) var(--rv-d,0s),transform .95s var(--zt-ease) var(--rv-d,0s);}
.zt-js .zt-grow-y.is-in{opacity:1;transform:scaleY(1);}

/* —— 六圆环：逐个「落」入（--rr-d 级联），落位后恢复悬浮变色 —— */
.zt-js [data-reveal-group] > *{opacity:0;transform:translate3d(0,44px,0) scale(.86);}
.zt-js [data-reveal-group].is-in > *{opacity:1;transform:translate3d(0,0,0) scale(1);
  transition:opacity .9s var(--zt-ease) var(--rr-d,0s),transform 1.05s var(--zt-ease) var(--rr-d,0s),
             border-color .35s,box-shadow .35s;}
.zt-slide .rings > .ring:nth-child(1){--rr-d:.05s;}
.zt-slide .rings > .ring:nth-child(2){--rr-d:.15s;}
.zt-slide .rings > .ring:nth-child(3){--rr-d:.25s;}
.zt-slide .rings > .ring:nth-child(4){--rr-d:.35s;}
.zt-slide .rings > .ring:nth-child(5){--rr-d:.45s;}
.zt-slide .rings > .ring:nth-child(6){--rr-d:.55s;}

/* —— 底图视差（桌面端由 JS 写入 transform；移动端自动清空） —— */
/* 视差已下线：整图 + 边缘延续带方案下，任何位移都会在舞台四边露出接缝。
   若日后想加回，只能对整条「舞台 + 延续带」做统一缩放位移，且缩放量需大于位移量。 */

/* —— 新闻区：左侧图文入口 + 右侧三条新闻，级联入场 ——
   2026-09-18 修订：取消 --rv-base 静态错落（原 38/76px），三条严格等高对齐，
   只保留 --rv-d 的入场级联延迟。 */
/* 注意：栅格子元素是 col-12/col-md-4，没有裸 .col 类，选择器用 > div 命中 */
.zt-news-grid > div:nth-child(1) .zt-news-item{--rv-d:.14s;}
.zt-news-grid > div:nth-child(2) .zt-news-item{--rv-d:.30s;}
.zt-news-grid > div:nth-child(3) .zt-news-item{--rv-d:.46s;}

/* 移动端：专利半透明面板与竖条本就被 display:none 隐藏，无需等待入场 */
@media (max-width:991.98px){
  .zt-js .zt-slide .panel.zt-grow-x,
  .zt-js .zt-slide .bar.zt-grow-y{opacity:1;transform:none;}
}

/* —— 无障碍 / 低性能设备：一次性呈现，保留错落落位但不做位移动画 —— */
@media (prefers-reduced-motion:reduce){
  .zt-js .zt-reveal{opacity:1!important;transform:translate3d(0,var(--rv-base,0px),0)!important;}
  .zt-js .zt-grow-x,
  .zt-js .zt-grow-y,
  .zt-js [data-reveal-group] > *{opacity:1!important;transform:none!important;}
  .zt-js .zt-reveal,
  .zt-js .zt-grow-x,
  .zt-js .zt-grow-y,
  .zt-js [data-reveal-group].is-in > *{transition:none!important;}
}

/* ==========================================================================
   第二轮强化（2026-09-18）
   原则：只使用「透明度 / 位移 / 缩放 / 裁剪」四类手段 —— 动效结束后静态画面
   必须与设计稿完全一致，不新增任何设计稿里没有的装饰元素或线条。
   ========================================================================== */

/* ---------- A. 专利六环：四重节奏-----------------------------------------
   ① 整圈自下方落入并放大 ② 内嵌图标缩放浮现 ③ 文字标签淡入
   ④ 落位瞬间向外散出一圈青色涟漪（动画结束 opacity 归零，不留静态痕迹）
   整组比段落晚 --rg-d 起跑，等左侧文字先落定。 */
.zt-slide .rings{--rg-d:.18s;}
.zt-js [data-reveal-group] > *{transform:translate3d(0,58px,0) scale(.74);}
.zt-js [data-reveal-group].is-in > *{
  transition:opacity .95s var(--zt-ease) calc(var(--rr-d,0s) + var(--rg-d,0s)),
             transform 1.1s var(--zt-ease) calc(var(--rr-d,0s) + var(--rg-d,0s)),
             border-color .35s,box-shadow .35s;}
.zt-js [data-reveal-group] > * .ic{opacity:0;transform:translate(-50%,-50%) scale(.55);}
.zt-js [data-reveal-group].is-in > * .ic{opacity:1;transform:translate(-50%,-50%) scale(1);
  transition:opacity .75s var(--zt-ease) calc(var(--rr-d,0s) + var(--rg-d,0s) + .14s),
             transform .85s var(--zt-ease) calc(var(--rr-d,0s) + var(--rg-d,0s) + .14s);}
.zt-js [data-reveal-group] > * .lb{opacity:0;}
.zt-js [data-reveal-group].is-in > * .lb{opacity:1;
  transition:opacity .7s var(--zt-ease) calc(var(--rr-d,0s) + var(--rg-d,0s) + .28s);}
.zt-slide .ring::after{content:"";position:absolute;left:-1px;right:-1px;top:-1px;bottom:-1px;
  border-radius:50%;border:1px solid rgba(53,211,216,.55);opacity:0;pointer-events:none;}
.zt-js .zt-slide .rings.is-in > .ring::after{
  animation:zt-ring-ripple 1.2s var(--zt-ease) calc(var(--rr-d,0s) + var(--rg-d,0s) + .34s) 1 both;}
@keyframes zt-ring-ripple{
  0%{opacity:0;transform:scale(.92);}
  20%{opacity:.75;}
  100%{opacity:0;transform:scale(1.24);}
}

/* ---------- B. 智态美学：lead 擦除式揭示 + 正文逐行上浮 ------------------ */
.zt-js .zt-slide-brand .lead.zt-wipe{opacity:0;clip-path:inset(0 100% 0 0);
  transition:opacity .5s var(--zt-ease) var(--rv-d,0s),clip-path 1.2s var(--zt-ease) var(--rv-d,0s);}
.zt-js .zt-slide-brand .lead.zt-wipe.is-in{opacity:1;clip-path:inset(0 0 0 0);}
.zt-slide-brand .txt .ln{display:block;}

/* ---------- C. 首页新闻区：配色收敛为「深蓝主色 + 青色点缀」 --------------
   原状：深蓝 h2 + 紫色英文 + 青色新闻标题 + 灰日期 = 一个板块内四种强调色互相
   打架；且青色 #12a7b4 作标题在白色底上对比度仅 ≈2.9:1（低于 WCAG AA 4.5:1）。
   现改为：标题类一律深蓝，品牌青只出现在英文小标与交互态（hover / 探索更多）。
   同时让三张新闻卡等高、按钮贴底对齐，去掉原先参差不齐的观感。 */
.zt-home-news .zt-head .en{color:var(--zt-cyan-deep);}
.zt-home-news .zt-news-item h3{color:var(--zt-navy-700);}
.zt-home-news .zt-news-item .date{color:var(--zt-ink-2);letter-spacing:.04em;}
.zt-home-news .zt-news-item .go{color:var(--zt-ink-2);border-color:var(--zt-line);}
.zt-home-news .zt-news-item:hover h3{color:var(--zt-cyan-deep);}
.zt-home-news .zt-news-item:hover .go{border-color:var(--zt-cyan-deep);color:var(--zt-cyan-deep);}
/* 三卡版式（2026-09-18 修订）：三条新闻严格等高、按钮落在同一条水平线上，
   取消原来的 0/110/220px 阶梯错落。
   注意：卡片只需撑到「自身内容最高的一条」，不要给 .col-lg-9 加 flex 撑满 ——
   否则卡片会被左侧大图的高度拉到 350px 以上，内部留出一大片空白。 */
@media (min-width:992px){
  .zt-home-news .zt-news-grid{align-items:stretch;}
  .zt-home-news .zt-news-grid > div{display:flex;}
  .zt-home-news .zt-news-item{width:100%;height:100%;display:flex;flex-direction:column;}
  .zt-home-news .zt-news-item .go{margin-top:auto;align-self:flex-start;}
}
/* 与上方深色板块衔接：顶部留一层极淡灰蓝再过渡到白，避免生硬地"切一张白纸" */
.zt-home-news{background:linear-gradient(180deg,#f2f6fc 0%,#fff 46%);}
/* 新闻区标题纳入**全站统一基准**（2026-09-24 v1.5.7 对齐字号 / v1.5.9 对齐字重）——
   原来 .zt-head h2 是绝对 38px，任何桌面视口都不缩放；而四屏 .hd h2 是 3.80cqw，
   会随视口从 54.7px 涨到 130.7px。于是首页上同时存在两套「大标题」规格：
   同一视口里 38 vs 66（0.58 倍），换个视口四屏继续放大而新闻区雷打不动 38。
   用户：「新闻动态的字体感觉也和其他的不一样」。
   --zt-ut 与 .zt-slide 的 --zt-sw 是同一个算式（同一基准），乘数也同为 .038
   ⇒ 新闻区 h2 与四屏 h2 在任何视口下逐像素同号。
   ⚠️ 只限定 .zt-home-news：.zt-head 在新闻列表页等内页也在用，不要改全局那两条。
   ⚠️ 英文小标保持 26px 不动：左列宽约 300px，「NEWS & EVENTS」按四屏的 2.95cqw
     放大到 51px 会折成两行、把左列撑高、三张卡片跟着错位（对照图里的 N3）。
   窄屏不受影响：≤991.98px 有 26px/15px 的降级值。

   v1.5.9：**字重/字体栈也必须对齐**，否则字号一样了仍「不是一款字」——
   四屏 .hd h2 = 300 / "PingFang SC"（.zt-slide 显式声明）/ letter-spacing:0 / line-height:1；
   新闻 .zt-head h2 原生 = 700 / 继承 body 的 -apple-system 栈 / .01em / 1.18（盒高 77.9 vs 66）。
   用户 2026-09-24 看对照图后选定「与四屏完全一致」这一档。
   这组声明**不带 media**：窄屏 26px 时四屏（30px）也是 300，一并保持一致。 */
.zt-home-news .zt-head h2{
  font-weight:300;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:0;
  line-height:1;
}
@media (min-width:992px){
  .zt-home-news{
    --zt-ut:min(var(--zt-w,100vw), calc((var(--zt-h,100vh) - var(--zt-headh,96px)) * 2560 / 1440));
  }
  .zt-home-news .zt-head h2{font-size:calc(var(--zt-ut) * .038);}
}
/* 桌面端：新闻动态这一屏必须自己铺满一屏 ——
   板块内容高约 597px，而常见视口高 700~1000px，若不管，吸附到本屏后
   下方会露出 100~350px 的页脚深蓝（用户看到的「不满屏 + 底部黑边」）。
   同时顶部预留导航高度：导航是 fixed，吸附时 top:0 会把 padding 吃掉，
   内容顶到导航下沿只剩 ~21px（用户看到的「内容过于靠上」）。2026-09-23 */
@media (min-width:992px){
  .zt-home-news{
    min-height:100vh;
    min-height:100svh;
    display:flex;flex-direction:column;justify-content:center;
    padding-top:calc(var(--zt-sec-y,96px) + var(--zt-headh,96px));
    padding-bottom:var(--zt-sec-y,96px);
  }

  /* ⬛ 2026-09-24 v1.6.0：新闻屏纳入四屏同一「舞台网格」 ——
     用户：「新闻动态和其他几页没有对齐啊 你要修改文字缩进 和其他对齐」。
     原来是独立的居中容器（max-width:1320px + padding:20px）⇒ 1920×1080 下
     h2 落在 x=338，而四屏 .hd h2 在 x=204（= 舞台左空隙 + 舞台宽 × 6.48cqw，
     即设计稿 166/2560 的左边距），一屏一屏滚动时左边线明显错位
     （1920 差 134px；2560×1440 差 412px）。
     现改为与四屏同一套几何：左右边界各内缩「舞台宽的 6.48cqw」。
     基准用 --zt-ut（与 .zt-slide 的 --zt-sw 同算式、同数值）⇒ 与舞台完全重合。
     连带效果：左侧大图、「探索更多」、右侧三张卡片一并落进同一网格
     （图与 h2 左对齐；卡片右边界与四屏正文右边界对齐）。
     ⚠️ 只改 ≥992px：窄屏是「图上 + 文下」流式，容器仍走 20px 常规留白。 */
  .zt-home-news > .zt-container{
    width:auto;          /* ⚠️ 不能是 100%：本屏 section 是 flex column，
                            100% + 左右 margin 会让盒子比视口宽 → 右侧被 overflow 裁掉 */
    max-width:none;
    margin-left:calc((var(--zt-w,100vw) - var(--zt-ut)) / 2);
    margin-right:calc((var(--zt-w,100vw) - var(--zt-ut)) / 2);
    padding-left:calc(var(--zt-ut) * .0648);
    padding-right:calc(var(--zt-ut) * .0648);
  }
  /* 标题去掉 18px 引线缩进并把青色引线收起：h2 与英文小标都压在 6.48cqw 这条线上，
     与四屏 .hd h2 严格同一竖线（1920×1080 双双 204.1px、2560×1440 双双 246.1px）。
     引线是新闻区特有的装饰（内页 .zt-head 仍在用，未受影响），若保留就必须把
     h2 再推右 18px，与「和其他页对齐」直接冲突，故在首页新闻屏收起。 */
  .zt-home-news .zt-head{padding-left:0;}
  .zt-home-news .zt-head::before{display:none;}
}
@media (max-width:991.98px){
  .zt-home-news .zt-news-grid{align-items:stretch;}
  .zt-home-news .zt-news-item{display:block;height:auto;}
}

/* —— 无障碍：强化动效同样需要降级 —— */
@media (prefers-reduced-motion:reduce){
  .zt-js [data-reveal-group] > * .ic,
  .zt-js [data-reveal-group] > * .lb{opacity:1!important;transition:none!important;}
  .zt-js [data-reveal-group] > * .ic{transform:translate(-50%,-50%)!important;}
  .zt-js .zt-slide .rings.is-in > .ring::after{animation:none!important;}
  .zt-js .zt-slide-brand .lead.zt-wipe{opacity:1!important;clip-path:none!important;}
}

/* ==========================================================================
   第二轮强化 · 窄屏「图上 + 文下」的接缝处理（2026-09-18）
   ---------------------------------------------------------------------------
   问题：≤991px 时底图在上、文字在下，图片与板块底色是两条硬边。深色图
   （专利技术）因为图底与底色同色系，看不出接缝；而亮色图（智态美学产品图，
   图底为亮蓝 #5a9bd8 一带、板块底色为深蓝 #12294d）硬切后，视觉上"图"与
   "文字"分裂成两块，文字像被甩到图外面去了。
   做法：只给底图加一层底部渐隐遮罩（mask），让它自己沉进板块底色里 ——
   不新增元素、不裁剪、不改变图片裁切比例与任何静态排版。
   ========================================================================== */
@media (max-width:991.98px){
  /* 前景与背景同步向下渐隐：背景层高度只到图片底边，渐隐后与板块底色自然衔接，
     不会在「亮色图底 ↔ 深色板块底色」处留下一条硬切边。两层用同一段渐变，
     前景主体不会因为遮罩而变形。 */
  .zt-slide .pic{
    -webkit-mask-image:linear-gradient(180deg,
      #000 0%,#000 58%,rgba(0,0,0,.78) 74%,rgba(0,0,0,.42) 88%,rgba(0,0,0,.14) 96%,transparent 100%);
    mask-image:linear-gradient(180deg,
      #000 0%,#000 58%,rgba(0,0,0,.78) 74%,rgba(0,0,0,.42) 88%,rgba(0,0,0,.14) 96%,transparent 100%);
  }
  /* 图底渐隐后标题会显得离图更近，把标题组上方留白稍作放宽，重现原来的呼吸感 */
  .zt-slide .hd{margin-top:30px;}
}

/* ==========================================================================
   首页新闻配图（2026-09-18 追加）
   ---------------------------------------------------------------------------
   图片来自新闻列表第一条的后台缩略图，比例不固定（横图 1.78、方图 1.0 都可能）。
   桌面：套一个固定 4/3 画框 cover 裁切 —— 既不会把方图竖裁过头，也不会让
        竖图把左列撑得过高；同时解除原来写死的 min-height:250px。
   窄屏：按要求「完整显示、不裁切」—— 按原图比例自适应高度，宁可小一点；
        并清掉容器底色，避免图片变矮后四周露出深蓝色块。
   ========================================================================== */
@media (min-width:992px){
  .zt-home-news .zt-news-pic{min-height:0;aspect-ratio:4/3;}
}
@media (max-width:991.98px){
  .zt-home-news .zt-news-pic{min-height:0;background:transparent;}
  .zt-home-news .zt-news-pic img{height:auto;object-fit:contain;}
}

/* ===== v1.6.1 导航下拉配色修复 =====
   .zt-body a{color:inherit} 与 .zt-body a:hover{青色} 会盖掉 doc.css 的
   .sub-item 白字 / hover 白底紫字（首页 body 带 zt-body，非首页没有）。
   两条高优先级规则恢复与非首页一致的下拉配色。 */
.zt-body .sub-item{color:#fff;}
.zt-body a.sub-item:hover{background:#fff;color:#403c93;}