/* ==========================================================================
   V12 · 首页改版：整屏翻页（scroll-snap）+ 左侧圆点导航 + 首屏图片背景
   仅在首页 index.html 中于 v11b.css 之后引入，不影响其他页面。
   ========================================================================== */

/* ---------- 0. V12 brand accent ---------- */
:root{--red:#E60012;--red-d:#C4000F}

/* ---------- 1. First screen: photo background (brightened) ---------- */
.vhero{background:var(--blue-dd)}
.vhero-bg{position:absolute;inset:0;background-image:url("../img/v12/hero-pc.jpg");background-image:image-set(url("../img/v12/hero-pc.webp") type("image/webp"),url("../img/v12/hero-pc.jpg") type("image/jpeg"));background-size:cover;background-position:center;transform:scale(1.02);filter:brightness(1.2) saturate(1.06)}
.vhero-ov{background:linear-gradient(100deg,rgba(2,11,26,.264) 4%,rgba(2,22,46,.18) 40%,rgba(3,40,84,.078) 72%,rgba(3,52,106,.042))}
.vhero-ov:after{background:linear-gradient(180deg,rgba(2,10,24,.46) 0,rgba(2,10,24,.42) 96px,rgba(2,10,24,.2) 22%,rgba(2,10,24,.14) 40%,rgba(2,10,24,.15) 62%,rgba(2,10,24,.186) 100%)}
.vhero-grid{opacity:.5}
/* H1 与描述排版宽度 +20% */
.vhero h1{max-width:1272px;text-shadow:0 4px 26px rgba(1,20,42,.42)}
.hero-sub{max-width:792px;text-shadow:0 2px 16px rgba(1,20,42,.45)}
.hero-scroll{text-shadow:0 2px 12px rgba(1,20,42,.55)}
/* 首屏描边按钮 + 认证徽章：加暗色遮罩，突出文字对比 */
.vhero .btn-ol{background:rgba(4,20,42,.55);border-color:rgba(255,255,255,.72);backdrop-filter:blur(8px)}
.vhero .btn-ol:hover{background:rgba(4,20,42,.72);border-color:#fff;color:#fff}
.vhero .hbadge{background:rgba(2,17,36,.5);border-color:rgba(255,255,255,.28);backdrop-filter:blur(8px)}
.vhero .hbadge:hover{background:rgba(2,17,36,.64);border-color:rgba(240,160,160,.75)}
.vhero .hbadge b{color:#fff}

/* ---------- 2. Page-by-page scrolling (daly-style) ---------- */
@media (min-width:881px){
html{scroll-snap-type:y mandatory}
.page{min-height:100vh;min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always}
.page.sec,.page.band{display:flex;flex-direction:column;justify-content:center}
footer.ft{scroll-snap-align:end}
}

/* ---------- 3. Left dot navigation ---------- */
.pnav{position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:180;display:none;flex-direction:column;gap:11px;padding:13px 10px;background:rgba(255,255,255,.8);border:1px solid rgba(3,82,162,.14);border-radius:999px;box-shadow:0 16px 40px rgba(1,32,66,.16);backdrop-filter:blur(8px)}
.pn{position:relative;display:block;width:11px;height:11px;border-radius:50%;background:rgba(3,82,162,.26);box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);transition:transform .3s var(--ease),background .3s}
.pn:hover{background:var(--cyan);transform:scale(1.25)}
.pn.on{background:#C80000;transform:scale(1.4);box-shadow:0 0 0 4px rgba(200,0,0,.22),0 6px 16px rgba(163,0,0,.32)}
.pn span{position:absolute;left:26px;top:50%;transform:translate(-6px,-50%);white-space:nowrap;font:600 12.5px var(--fh);color:#fff;background:linear-gradient(135deg,var(--blue-dd),var(--blue));padding:6px 12px;border-radius:999px;box-shadow:0 10px 24px rgba(1,32,66,.28);opacity:0;pointer-events:none;transition:.24s var(--ease)}
.pn:hover span,.pn:focus-visible span{opacity:1;transform:translate(0,-50%)}
@media (min-width:1360px){
.pnav{display:flex}
}
@media (max-width:880px){
.vhero-bg{background-image:url("../img/v12/hero-ph.jpg");background-position:center}
}

/* ---------- 4. Second screen · DOM 对齐 dalybms.com #page03（Beaver Builder 结构）
   背景整幅照片（AVIF 优先）· 无遮罩 · 左对齐黑字 + 红色点缀 · 播放按钮右侧垂直居中 ---------- */
/* 背景直接挂在 section 上：无论内部行宽如何，永远铺满整屏宽高，不会出现右侧/上下白边 */
.s2-photo{background:#eef3f9;background-image:url("../img/v12/1920-1080.avif"),url("../img/v12/1920-1080.webp"),url("../img/v11/s2-gate.avif");background-size:cover;background-position:center;background-repeat:no-repeat;padding:0}
.s2-photo .s2-ov{display:none}
/* 背景铺满整屏（上下不留白）：行拉伸到 section 全高并垂直居中内容 */
.fl-row{display:flex;align-items:center;align-self:stretch;width:100%}
.fl-row-bg-photo{background:none}
/* 容器宽度与站内 .wrap 完全一致；内容区高度 800px（背景仍铺满整屏，上下不留白），窗口上下间距同步加大 */
.fl-row-content-wrap{flex:1;max-width:var(--max);margin:0 auto;min-height:800px;padding:clamp(110px,14vh,175px) 30px}
.fl-col-group{display:flex;flex-wrap:wrap;gap:30px 24px}
.fl-col-group-nested{gap:0}
/* 注意：此处必须为 0，否则会给「数字 → 标签」再叠加 12px，导致行距设置不生效 */
.fl-col-group-nested + .fl-col-group-nested{margin-top:0}
.fl-col{display:flex;flex:1 1 auto;min-width:0}
.fl-col-group > .fl-col{flex:0 1 auto}
/* 左栏：以 750px 为基准，宽屏时适度加宽（上限 880px ≈ 版面的 62%），避免左窄右空 */
.fl-col-group:not(.fl-col-group-nested) > .fl-col:not(.fl-col-play){flex:1 1 750px;max-width:880px}
.fl-col-group > .fl-col.fl-col-play{flex:1 1 auto}
.fl-col-content{display:flex;flex-direction:column;flex:1;align-items:flex-start;text-align:left}
/* 基础加固（不限断点生效）：任何容器都不得超出父级宽度，文字可强制断行。
   这样即使浏览器用桌面模式渲染窄屏（布局宽度 > 可视宽度），也不会把文字切到屏幕外 */
.fl-col,.fl-col-content,.fl-module,.fl-col-group,.fl-rich-text{min-width:0;max-width:100%}
.fl-rich-text p,.fl-heading{overflow-wrap:break-word;word-break:break-word}
/* 行间距节奏（总和外边距保持 132px 不变）：
   标题 上28 / 下24 → 正文（标题与引言归为一组，靠紧）
   正文 下0 + 数据行 上40 → 数据行（独立数据块，拉开）
   数据行 下20 + 按钮 上10 → 按钮（CTA 与数据块中等距离）
   按钮 下10 */
.fl-col-content > .fl-module-heading{margin-top:28px;margin-bottom:24px}
/* 数据行（左栏直属）上下外边距 40/20 —— 用 :not(.fl-col-has-cols) 限定，避免误加到每个数据项的标签组上 */
.fl-col:not(.fl-col-has-cols) > .fl-col-content > .fl-col-group-nested{margin-top:40px;margin-bottom:20px}
.fl-col-content > .fl-module-button{margin-top:10px;margin-bottom:10px}
.fl-col-play .fl-col-content > .fl-module{margin-top:0;margin-bottom:0}
.fl-module-heading .overline{margin-bottom:12px}
/* 标题：字体与字号同第三屏 h2（clamp(26px,2.3vw,38px) / 800 / 1.18 / -0.6px） */
.fl-heading{margin:0;font-family:var(--fh);font-weight:800;line-height:1.18;color:var(--ink)}
.fl-heading em{font-style:normal;color:var(--red)}
.fl-col-group-nested .fl-heading{font:800 clamp(28px,2.6vw,40px)/1.05 var(--fh);color:var(--red);letter-spacing:-1.4px}
/* 正文两段：样式与「第三屏说明文字」(.evb-sub) 完全一致 —— Inter · weight 400 · 同一字号与行距
   仅颜色保留 #000：第二屏是浅色照片背景，第三屏背景深才用浅色 */
.fl-rich-text p{font-family:var(--fh);color:#000;font-size:clamp(14px,1.15vw,19px);font-weight:400;line-height:1.6;margin:0 0 14px}
/* 正文两段：不限死宽度，随左栏宽度自适应换行（与数据行右边缘对齐） */
.fl-module-rich-text{max-width:none;margin:0}
.fl-col-group-nested .fl-module-rich-text{max-width:none}
/* 四个数据项：内部上下边距 5px · 左右间距 78px · 按内容自适应宽度并允许收缩换行 */
.fl-col-group-nested.fl-col-group-equal-height{justify-content:space-between;gap:28px 78px;padding-top:5px;padding-bottom:5px}
.fl-col-group-nested.fl-col-group-equal-height > .fl-col{flex:0 1 auto;max-width:100%}
/* 数据项内部：大数字 → 标签 的行距 = 字号 1 倍（标签字号 16px → 16px） */
.fl-col-has-cols > .fl-col-content > .fl-col-group-nested + .fl-col-group-nested{margin-top:16px}
/* 小字（四个数据标签）：样式与第二屏说明文字/第三屏 .evb-sub 一致 —— Inter · weight 400 · 同一字号与行距
   仅颜色保留 #000（浅色背景）· 允许换行（自身不再加间距） */
.fl-col-group-nested .fl-rich-text p{margin:0;font-family:var(--fh);font-size:clamp(14px,1.15vw,19px);font-weight:400;line-height:1.6;color:#000}
.fl-icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:rgba(230,0,18,.08);color:var(--red);margin:0 0 12px}
.fl-module-button .fl-module-content{display:flex;align-items:center;justify-content:flex-start;gap:22px;flex-wrap:wrap;margin-top:0}
/* 右列：视频播放按钮垂直居中 */
.fl-col-play .fl-col-content{align-items:center;justify-content:center;text-align:center}
.fl-col-play .fl-module-button .fl-module-content{justify-content:center;margin-top:0}
.s2-photo .overline{color:var(--red)}
.s2-photo .s2-play2{background:var(--red);color:#fff;box-shadow:0 20px 46px rgba(1,20,42,.24)}
.s2-photo .s2-play2:hover{background:var(--red-d);color:#fff}
.s2-photo .s2-play2:before,.s2-photo .s2-play2:after{border-color:rgba(230,0,18,.34)}
/* ---------- 5. V12 · 第三屏 · 版式对齐参考站第4屏：
   整幅照片（无遮罩）· 居中标题 + 副标题 · 居中卡片组（图标 → 分类 → 数字 → 小标题 → 说明）· 居中按钮 ---------- */
.evb .band-in{position:relative;z-index:2}
.band.evb{padding:clamp(64px,8vh,130px) 0}
.evb-c{width:1400px;max-width:100%;margin:0 auto;text-align:center}
/* 标题：参考站 .t_ywh1 h2 为 48px 粗体白字居中；这里加副标题一行 */
.evb-hd{margin-bottom:clamp(24px,min(4vw,5.4vh),58px)}
.evb-hd h2{margin:0;color:#fff}
.evb-sub{margin:16px 0 0;font:400 clamp(14px,1.15vw,19px)/1.6 var(--fh);color:rgba(255,255,255,.86)}
/* 卡片：桌面一排 5 张（每张 20%），参考站数据项同样是「图标 → 文字」居中结构 */
.evb-cards{display:flex;flex-wrap:wrap;justify-content:center;margin:0 -10px clamp(26px,2.4vw,38px)}
.evb-st{flex:0 0 20%;max-width:20%;padding:0 10px 20px;box-sizing:border-box}
.evb-ic{display:block;width:56px;height:52px;margin:0 auto 12px;color:#fff}
.evb-ic svg{display:block;width:100%;height:100%}
.evb-lb{margin:0 0 6px;font:700 11.5px var(--fh);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.evb-num{font:800 clamp(28px,min(2.6vw,4vh),46px)/1.15 var(--fh);color:#fff;letter-spacing:-1px}
.evb-tt{margin:8px 0 8px;font:700 clamp(14.5px,1vw,17px)/1.4 var(--fh);color:#fff}
.evb-tx{margin:0;font:400 clamp(11.5px,.78vw,12.5px)/1.62 var(--fh);color:rgba(255,255,255,.76)}
/* 居中按钮：链接通用留言表单（contact.html#inquiry）· 品牌色纯红 · 50px R 角 */
.evb-go .evb-btn{background:#C80000;border-color:transparent;color:#fff;border-radius:50px;height:46px;padding:0 40px;font-size:16px;font-weight:700;box-shadow:0 12px 30px rgba(140,0,0,.3)}
.evb-go .evb-btn:hover{background:#A30000;color:#fff;border-color:transparent}
@media (max-width:1680px){
.evb-ic{width:52px;height:48px}
}
@media (max-width:1240px){
.evb-st{flex:0 0 33.3333%;max-width:33.3333%}
}
@media (max-width:880px){
.band.evb{padding:72px 0}
.evb-c{width:100%}
.evb-hd{margin-bottom:26px}
.evb-sub{font-size:14px;margin-top:12px}
.evb-cards{margin:0 -8px 18px}
.evb-st{flex:0 0 50%;max-width:50%;padding:0 8px 20px}
.evb-ic{width:46px;height:44px;margin-bottom:8px}
.evb-lb{font-size:11px;letter-spacing:.14em}
.evb-num{font-size:26px}
.evb-tt{font-size:14.5px;margin:6px 0 8px}
.evb-tx{font-size:12px;line-height:1.6}
.evb-go .evb-btn{height:44px;padding:0 28px;font-size:15px}
}
@media (max-width:620px){
.evb-st{flex:0 0 100%;max-width:100%}
}

/* ---------- 5b. V12 · 产品推荐下方 · 合作品牌轮播
   样式/动画对齐 longly-group.com 品牌模块：
   浅灰底 #f7f7f7 · 白色圆角 20px 悬浮卡（高 70px · 阴影 0 10px 10px rgba(0,0,0,.14)）
   · logo 悬停放大 1.15（0.4s）· 两端 60px 圆形箭头（悬停变品牌红）
   · 自动轮播：每 3s 前进一张 + 1.2s 平滑过渡 + 无缝循环（对应 delay 3000 / speed 1200 / loop） ---------- */
.pb{margin-top:clamp(24px,3.2vh,42px);padding:28px 34px;background:#f7f7f7;border-radius:24px}
.pb-hd{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.pb-t{font:700 15px var(--fh);color:var(--ink)}
.pb-s{font:400 12.5px var(--fb);color:var(--ink3)}
.pb-wrap{position:relative;padding:0 84px}
.pb-track{overflow:hidden;padding:14px 0}
.pb-view{display:flex;gap:8px;transition:transform 1.2s ease;will-change:transform}
/* 卡片：参考站 .swiper-slide —— 一屏 8 张（spaceBetween 8px）、高 70px、圆角 20px、白底悬浮阴影 */
.pb-it{flex:0 0 auto;width:calc(12.5% - 7px);height:70px;display:flex;align-items:center;justify-content:center;border-radius:20px;background:#fff;box-shadow:0 10px 10px rgba(0,0,0,.14);cursor:pointer;padding:0 6px}
/* logo 组悬停放大 1.15（对应参考站 .swiper-slide:hover img） */
.pb-in{display:inline-flex;align-items:center;justify-content:center;gap:8px;max-width:100%;transition:transform .4s ease}
.pb-it:hover .pb-in{transform:scale(1.15)}
/* 官方 logo：高度统一 28px、等比不变形（对应参考站 img max-width:63% 的做法） */
.pb-in img{display:block;width:auto;height:28px;max-width:100%;object-fit:contain}
/* 占位字标（未取到官方图形的品牌）：彩色圆角首字母徽标 + 同色品牌名，三张尺寸统一 */
.pb-ph{flex:0 0 28px;width:28px;height:28px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font:800 15px/1 var(--fh)}
.pb-mk{flex:0 0 18px;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}
.pb-mk svg{display:block;width:100%;height:100%}
.pb-nm{font-family:var(--fh);font-weight:800;font-size:15px;line-height:1;letter-spacing:.02em;white-space:nowrap;text-align:center;min-width:0}
/* 箭头：参考站 60×60 圆形按钮（常态浅灰 #D9D9D9，悬停变主题色），始终显示 */
.pb-nav{position:absolute;top:50%;width:60px;height:60px;padding:0;border:0;border-radius:50%;background:#D9D9D9;color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transform:translateY(-50%);transition:background .3s var(--ease),box-shadow .3s}
.pb-nav.prev{left:0}
.pb-nav.next{right:0}
.pb-nav:hover{background:#C80000;box-shadow:0 10px 24px rgba(200,0,0,.32)}
@media (max-width:1280px){
.pb-it{width:calc(16.6667% - 6.67px)}
}
@media (max-width:1024px){
.pb-it{width:calc(20% - 6.4px)}
.pb-wrap{padding:0 72px}
.pb-nav{width:52px;height:52px}
}
@media (max-width:880px){
.pb{margin-top:20px;padding:20px 16px;border-radius:18px}
.pb-hd{margin-bottom:10px}
.pb-s{display:none}
.pb-wrap{padding:0 56px}
.pb-track{padding:10px 0}
.pb-it{width:calc(25% - 6px);height:60px;border-radius:16px}
.pb-in{gap:6px}
.pb-in img{height:24px}
.pb-ph{flex:0 0 24px;width:24px;height:24px;border-radius:8px;font-size:13px}
.pb-nm{font-size:13px;letter-spacing:0}
.pb-nav{width:44px;height:44px}
}
@media (max-width:520px){
.pb-it{width:calc(50% - 4px);height:56px;border-radius:14px}
.pb-ph{flex:0 0 20px;width:20px;height:20px;border-radius:6px;font-size:11px}
.pb-nm{font-size:12px}
}

@media (max-width:880px){
/* 移动端加固：所有容器不超过屏宽，文字强制换行，避免溢出被 section 的 overflow:hidden 裁掉 */
.fl-row-content-wrap{padding:72px 18px;min-height:0}
.fl-col,.fl-col-content,.fl-module,.fl-col-group,.fl-rich-text{min-width:0;max-width:100%}
.fl-col-group:not(.fl-col-group-nested) > .fl-col{flex:1 1 100%;max-width:100%}
.fl-col-group:not(.fl-col-group-nested) > .fl-col.fl-col-play{flex:1 1 100%;max-width:100%}
h3.fl-heading{font-size:clamp(21px,6.4vw,28px);overflow-wrap:break-word}
.fl-rich-text p{font-size:14px;overflow-wrap:break-word;word-break:break-word}
.fl-module-rich-text{max-width:100%}
.fl-col-group{gap:24px 14px}
.fl-col-group-nested{gap:22px 10px}
.fl-col-group-nested .fl-col{flex:1 1 100%;max-width:100%}
.fl-col-group-nested.fl-col-group-equal-height{justify-content:space-between;gap:24px 10px;padding-top:0;padding-bottom:0}
.fl-col-group-nested.fl-col-group-equal-height > .fl-col{flex:1 1 44%;max-width:44%}
.fl-col-group-nested .fl-rich-text p{font-size:14px;white-space:normal;overflow-wrap:break-word}
.fl-icon{width:38px;height:38px;margin:0 0 8px}
.fl-col-play .fl-col-content{justify-content:flex-start;margin-top:8px}
}

/* ==========================================================================
   7. V12 · 第二屏文字兜底：任何屏宽下都必须完整换行、绝不越出屏幕
   根因：这一段沿用 Beaver Builder 结构，列宽写死在标签上
   （.fl-col style="width:750px"、播放列 style="width:30%"）。一旦外层 flex 收缩
   在窄屏没有生效（窄窗口 / 手机"桌面模式"渲染 / 老浏览器），文字就按 750px 排版，
   再被 .s2{overflow:hidden} 裁到屏幕外 —— 表现就是"文字跑到屏幕外、不换行、显示不全"。
   处理：
     ① width:auto!important —— 抵消标签上写死的宽度；≥881px 的栅格仍由 flex-basis 决定，视觉不变
     ② 整条链路 min-width:0 / max-width:100% —— 容器永远不得超出父级
     ③ overflow-wrap:anywhere —— 长串可断且 min-content 归零，flex 收缩必然成立（这是关键）
     ④ 字号/字重/行距/颜色沿用现有设置，不改观感
   ========================================================================== */
.s2-photo .fl-col,.s2-photo .fl-col-content,.s2-photo .fl-module,.s2-photo .fl-module-content,
.s2-photo .fl-col-group,.s2-photo .fl-rich-text,.s2-photo .fl-heading,.s2-photo .fl-heading-text,
.s2-photo .fl-rich-text p{min-width:0;max-width:100%;width:auto!important}
.s2-photo .fl-heading,.s2-photo .fl-rich-text p{white-space:normal!important;text-wrap:wrap;overflow-wrap:anywhere}

/* ==========================================================================
   6. V12 · 首页第 2–5 屏：统一「每屏一屏高」+ 随视口高度自适应
   现状根因：第 2 屏有 800px 固定内容下限（矮屏时高于一屏）；第 4/5 屏的纵向
   尺寸是固定 px/vw（卡片图 250px 或 1:1 方形、间距 26/30/60px、section 留白
   clamp(72px,7vw,104px)），与屏高无关 —— 900px 高的屏上第 4 屏约 1243px、
   第 5 屏约 1009px，明显高于一屏。
   做法：第 2–5 屏的纵向节奏全部改为带 vh 的 clamp()：
        屏矮 → 自动压缩（间距/图片高度/字号）保证整屏装得下；
        屏高 → 按比例放大，到原设计上限为止。
   结果：四屏在桌面端都恰好占满 100svh（内容由 flex 垂直居中），高度一致。
   ========================================================================== */
@media (min-width:881px){
/* —— 第 2 屏：去掉固定内容下限，行铺满整屏、内容垂直居中，上下留白随屏高伸缩 —— */
.s2-photo .fl-row-content-wrap{min-height:0;padding:clamp(32px,8vh,175px) 30px}
.s2-photo .fl-row-content{width:100%}

/* —— 第 3 屏：留白下限下调，矮屏也整屏装得下 —— */
.band.evb{padding:clamp(48px,8vh,130px) 0}

/* —— 第 4、5 屏：section 上下留白 —— */
#products,#news{padding:clamp(20px,4.6vh,96px) 0}

/* —— 第 4 屏 · 产品推荐：标题/分类/卡片 —— */
#products .rec-head{margin-bottom:clamp(10px,1.8vh,26px)}
#products .rec-t{padding-bottom:clamp(8px,1.4vh,16px)}
#products .rec-pill{height:clamp(40px,5.4vh,52px)}
#products .rec-cta .btn{height:clamp(40px,5.4vh,52px)}
#products .rec-tabs{padding:clamp(4px,.8vh,8px);margin-bottom:clamp(12px,2.2vh,30px)}
#products .rec-tab{padding:clamp(6px,1.1vh,11px) 22px;font-size:clamp(12.5px,1.4vh,14.5px)}
#products .rcard{padding:clamp(14px,2.4vh,26px)}
#products .rcard .rim{height:clamp(112px,20vh,210px);aspect-ratio:auto}
#products .rcard .rim img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
#products .rcard h3{font-size:clamp(15px,1.9vh,17px);margin-bottom:clamp(10px,1.6vh,14px);min-height:clamp(34px,5.6vh,52px)}
#products .rcard .rchips{gap:clamp(6px,.9vh,10px)}
#products .rcard .rchips .chip.o{padding:clamp(7px,1.2vh,12px) 14px}
#products .rcard .rfoot{margin-top:clamp(10px,2.2vh,26px)}
#products .rcard .rplus{width:clamp(32px,4.2vh,38px);height:clamp(32px,4.2vh,38px);flex:0 0 auto}
#products .rec-nav{width:clamp(42px,5.8vh,52px);height:clamp(42px,5.8vh,52px)}

/* —— 第 4 屏 · 合作品牌轮播 —— */
/* —— 合作品牌轮播（2026-09 起位于第 5 屏，选择器不带屏 id，随模块移动生效） —— */
.pb{margin-top:clamp(12px,2.4vh,42px);padding:clamp(12px,2vh,28px) 34px}
.pb-hd{margin-bottom:clamp(8px,1.4vh,14px)}
.pb-track{padding:clamp(6px,1.2vh,14px) 0}
.pb-it{height:clamp(48px,7.2vh,70px)}
.pb-in img{height:clamp(22px,3vh,28px)}
.pb-ph{flex:0 0 clamp(21px,2.8vh,28px);width:clamp(21px,2.8vh,28px);height:clamp(21px,2.8vh,28px)}
.pb-nm{font-size:clamp(13px,1.6vh,15px)}
.pb-nav{width:clamp(42px,6.6vh,60px);height:clamp(42px,6.6vh,60px)}

/* —— 第 5 屏 · 新闻卡片 + 底部 CTA 带 —— */
#news .sec-head{margin-bottom:clamp(16px,2.8vh,44px)}
#news .grid{gap:clamp(16px,2.2vh,26px)}
#news .ncard .im{height:clamp(126px,19vh,215px)}
#news .ncard-b{padding:clamp(16px,2.2vh,24px) 26px clamp(16px,2.4vh,26px);gap:clamp(7px,1.2vh,11px)}
#news .ncard h3{font-size:clamp(16px,1.9vh,18.5px)}
#news .ctaband{margin-top:clamp(14px,2.4vh,32px);padding:clamp(22px,4.2vh,60px) 68px}
#news .ctaband h3{font-size:clamp(19px,2.6vh,27px)}
}

/* —— 矮屏（≤800px 视口高）追加压缩：字号同步收缩，避免内容顶破一屏 —— */
@media (min-width:881px) and (max-height:800px){
#story .fl-col-group-nested .fl-heading{font-size:clamp(24px,min(2.6vw,4vh),34px)}
#solutions .band-in .evb-hd{margin-bottom:clamp(18px,3.6vh,58px)}
#solutions .evb-st{padding-bottom:14px}
#products .rcard .rim{height:clamp(104px,17vh,190px)}
.pb-it{height:clamp(46px,6.8vh,64px)}
#news .ncard .im{height:clamp(118px,17vh,190px)}
#news .ncard p{font-size:13.5px}
#news .ctaband p{font-size:15px}
}

/* —— 第 2 屏文字（标题 + 两段正文）：取消断行限制，只按容器宽度自然换行 ——
   原本 h2 继承 v11b 的 text-wrap:balance（断行位置被“两端均衡”规则限定，
   首行常提前结束，看起来像手工断行）；正文另被 word-break:break-word 允许在词内断开。
   这里两条都取消：不做均衡、不在词内断开，只在超长单词放不下时才断（overflow-wrap 兜底）。 */
.s2-photo .fl-heading,.s2-photo .fl-rich-text p{white-space:normal;text-wrap:wrap;word-break:normal;overflow-wrap:break-word}

/* —— 第 2 屏：再取消「左栏 880px 宽度上限」这道限制 ——
   原来左栏 flex-basis 750px + max-width 880px，右列又按 flex:1 1 auto / width:30% 抢走剩余宽度，
   所以宽屏上这三段文字永远只能排到 880px 就被迫折行。
   现在：左栏上限放宽到 min(1040px,72%)，右列只占播放按钮所需的宽度并靠右（space-between）。 */
@media (min-width:881px){
#story .fl-col-group:not(.fl-col-group-nested){justify-content:space-between}
#story .fl-col-group:not(.fl-col-group-nested) > .fl-col:not(.fl-col-play){flex:1 1 750px;max-width:min(1040px,72%)}
#story .fl-col-group > .fl-col.fl-col-play{flex:0 0 clamp(130px,12vw,190px)}
}

/* ==========================================================================
   8. V12 · 第 4 屏「产品推荐」卡片：容器比例固定 409 : 667（宽 : 高）
   · 卡片按比例定尺寸，卡片内的图片区改为弹性吃掉剩余高度（.rim 不再固定高度），
     标题 / 参数胶囊 / 按钮等文字块样式与尺寸不变
   · 桌面端（≥881px）为继续满足「第 4 屏恰好一屏高」，卡片高度由屏高反算：
       高 = clamp(340px,52vh,600px)   宽 = 高 × 409 ÷ 667
     屏越大卡片越大（1440×900 ≈ 287×468，1920×1080 ≈ 344×561），
     一屏约见到 3–5 张，滑轨可左右拖动看更多
   · 窄屏（≤880px）沿用既有卡片宽度（86% / 半宽），高度按 409:667 自动得出
   ========================================================================== */
#products .rcard{aspect-ratio:409/667}
#products .rcard .rim{flex:1 1 auto;height:auto;min-height:0;aspect-ratio:auto}
@media (min-width:881px){
#products .rcard{flex:0 0 calc((100% - 48px)/3);width:auto;min-width:0}
}

/* ==========================================================================
   9. V12 · 第 4 屏「产品推荐」细节对齐（按设计稿要求）
   · 分类选项卡选中态：品牌红底 + 白字（原为蓝色渐变）
   · 卡片右下角「+」：红底 + 白色加号（悬停加深）
   · 桌面端每行 3 张产品（卡片仍维持 409:667 比例；每翻页一次走 3 张，见页面脚本）
   · 缩略图容器 1:1 正方形，图片距容器四边各 13px
   ========================================================================== */
#products .rec-tab.on{background:#C80000;color:#fff;box-shadow:0 10px 22px rgba(200,0,0,.26)}
#products .rec-tab.on:hover{color:#fff}
#products .rcard .rplus{background:#C80000;border-color:#C80000;color:#fff}
#products .rcard:hover .rplus{background:#A30000;border-color:#A30000}
#products .rcard .rim{flex:0 0 auto;aspect-ratio:1/1;height:auto;padding:13px}
@media (min-width:881px){
#products .rcard{flex:0 0 calc((100% - 48px)/3);width:auto}
}

/* ==========================================================================
   10. V12 · 第 4 屏：恢复「一屏高」+ 1:1 方形产品主图
   · 取消卡片 409:667 的刚性比例 —— 它使卡片高度 = 宽度 × 1.63，整屏约 1150px，
     必然高于一屏；改回由内容决定高度后，配合下面的自适应图框即可回到一屏
   · 方形图框尺寸随屏高自适应：min(100%, clamp(176px,26vh,330px))，
     这样「每行 3 张 + 1:1 图框 + 图片四周 13px」三个要求能同时满足
   · 主图改为居中裁切填充（object-fit:cover）：源图 1600×1000 且产品居中，
     方形框下等比放大填满、无白边，产品视觉尺寸比原来的 contain 大 1.6 倍
   ========================================================================== */
#products .rcard{aspect-ratio:auto}
#products .rcard .rim{flex:0 0 auto;width:min(100%,clamp(176px,26vh,330px));height:auto;aspect-ratio:1/1;margin:0 auto;padding:13px}
#products .rcard .rim img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center}

/* ==========================================================================
   11. V12 · Partner Brands 移到第 5 屏；第 4 屏产品容器比例重算
   · 品牌条从第 4 屏（产品推荐下方）移到第 5 屏（新闻网格与通用 CTA 之间），
     第 4 屏腾出的 ~190px 高度全部给产品卡 → 方形主图框不再受屏高限制，
     恢复「铺满卡宽的 1:1 图框 + 四周 13px」，卡片按内容自适应高度
   · 第 5 屏接入品牌条后同步收紧节奏（section 留白 / 新闻图高 / CTA 内距），
     两屏各自仍约等于一屏高
   ========================================================================== */
#products .rcard .rim{width:min(100%,clamp(176px,46vh,460px))}
#news{padding:clamp(20px,4.2vh,88px) 0}
#news .ncard .im{height:clamp(118px,16vh,190px)}
#news .ctaband{padding:clamp(20px,3.6vh,52px) 68px}

/* ==========================================================================
   12. V12 · 第 4 屏：产品名称与产品主图的间距 + 1 倍字体高度
   · 原间距 = .rim 的 margin-bottom 22px；现改为「22px + 1 倍名称字号」
   · 用 h3 自身的 em 表达，跟着字号档位自动变化（桌面 15–17px、窄屏 17px），不会与字号脱节
   · 名称与参数胶囊之间的间距（h3 margin-bottom）不变
   ========================================================================== */
#products .rcard .rim{margin-bottom:0}
#products .rcard h3{margin-top:calc(22px + 1em)}

/* ==========================================================================
   13. V12 · 首页「第五屏以下」（页脚）各板块间距适当加大
   · 板块之间：.ft-top 栅格列间距 44→54px；整块上下留白 84/56→92/66px；底部条 24→28px
   · 板块内部：链接行距 6→7px；小标题下距 22→26px；联系行 14→18px；订阅框上距 20→24px
   · 仅作用于首页（v12.css 只在 index.html 引入），其他页面页脚保持共享样式不变
   ========================================================================== */
.ft-top{gap:54px;padding-top:92px;padding-bottom:66px}
.ft-about p{margin:26px 0 28px}
.ft h4{margin-bottom:26px}
.ft a{padding:7px 0}
.ft-p{margin:0 0 18px}
.ft-news{margin-top:24px}
.ft-bot-in{padding-top:28px;padding-bottom:28px}
@media (max-width:880px){
.ft-top{gap:38px;padding-top:62px;padding-bottom:44px}
}

/* ==========================================================================
   14. V12 · 第 5 屏：三个板块之间的行距再加大
   · 「News & Insights（标题+新闻网格）↔ Partner Brands」：.pb 上间距
   · 「Partner Brands ↔ Start Your Custom Battery Project Today（CTA 带）」：CTA 上间距
   · 两处同步放大（900px 高屏下 21.6px → 32.4px，屏越高越大、矮屏自动收）
   ========================================================================== */
.pb{margin-top:clamp(20px,3.6vh,56px)}
#news .ctaband{margin-top:clamp(20px,3.6vh,56px)}

/* ==========================================================================
   15. V12 · 页脚前的 .tail-band（白底 + 上下留白，包住第 5 屏之外的那一个板块）
   · 本节 + 第 16 节经两次调整后的最终结构：第 5 屏内「新闻网格 → Partner Brands」，
     第 5 屏外 .tail-band「通用 CTA 带」→ 页脚（CTA 紧邻页脚的全站约定恢复）
   · .tail-band 只负责白底与上下留白；内部元素的上间距由第 16 节归零，避免叠加
   ========================================================================== */
.tail-band{background:#fff;padding:clamp(28px,5vh,72px) 0}
.pb{margin-top:0}

/* ==========================================================================
   16. V12 · CTA 带 ↔ Partner Brands 位置对调（内容互换）
   · 第 5 屏内：新闻网格 → Partner Brands（上间距沿用 20–56px 自适应档）
   · 第 5 屏外（页脚前 .tail-band）：通用 CTA 带 → CTA 重新回到「紧邻页脚」的全站约定位置
   · 品牌条 HTML 块原样搬迁（逐字节未改）；CTA 模板文字内容一致，仅缩进随容器层级调整
   ========================================================================== */
#news .pb{margin-top:clamp(20px,3.6vh,56px)}
.tail-band .ctaband{margin-top:0}

/* ==========================================================================
   17. V12 · 第 2 屏文字配色 + 两处按钮统一
   · 第 2 屏「Company Strength」小标题、h2 中强调句「we are devoted users of our own cells.」
     由品牌红改为主题蓝（四个大数字、圆形图标仍为红，未在本次范围内）
   · Discover Our Story（第 2 屏）与 Start Your Custom Project（第 3 屏）
     改用第 4 屏右上角「Get a Quote」那套按钮样式 .btn-cta：
     白底 + 蓝字 + 同款阴影，悬停同款（蓝字加深、红调阴影、上移 2px）
   ========================================================================== */
.s2-photo .overline{color:var(--blue)}
.fl-heading em{font-style:normal;color:var(--blue)}
.s2-photo .fl-module-button .btn{background:#fff;color:var(--blue);border-color:transparent;box-shadow:0 10px 26px rgba(1,28,58,.28)}
.s2-photo .fl-module-button .btn:hover{background:#fff;color:var(--blue-d);box-shadow:0 14px 34px rgba(200,0,0,.5);transform:translateY(-2px)}
#solutions .evb-go .evb-btn{background:#fff;color:var(--blue);border-color:transparent;box-shadow:0 10px 26px rgba(1,28,58,.28)}
#solutions .evb-go .evb-btn:hover{background:#fff;color:var(--blue-d);border-color:transparent;box-shadow:0 14px 34px rgba(200,0,0,.5);transform:translateY(-2px)}

/* ==========================================================================
   17b. V12 · 首屏 H1 强调句「Cell to PACK」：红色 → 蓝色
   · 沿用它原有的 background-clip:text 渐变文字机制，只把颜色换成蓝色
   · 用 #4E8AD1（站内既有的蓝色高光色，出现在首屏主光渐变里）而不是 #0352A2：
     首屏背景是深色照片，深蓝字在这个底上对比度不足，浅一档的蓝更清晰
   · 第 2 屏「we are devoted users…」用的是 var(--blue)，两处蓝不同源自背景明暗差异
   ========================================================================== */
/* 强调句「Cell to PACK」：白色字体（取消渐变/裁切着色，与 H1 同色） */
.vhero h1 em{color:#fff;-webkit-text-fill-color:#fff;background:none}

/* ==========================================================================
   20. V12 · 第 3 屏背景再调亮
   · 该屏背景 = assets/img/v12/evb-bg.jpg（1920×970，灰度均值 0.279，之前未做任何提亮）
   · 加 brightness(1.25) + saturate(1.05)：预览均值约 0.28 → 0.35，
     与首屏 hero-pc.jpg 的提亮幅度（brightness 1.2）同量级、略高一档
   · 只作用于背景层，不动文字与遮罩；若白字对比度不够可再加一层淡遮罩
   ========================================================================== */
#solutions .band-bg{filter:brightness(1.25) saturate(1.05)}

/* ==========================================================================
   18. V12 · 第 4 屏分类选项卡：固定一行，窄屏左右滑动
   · flex-wrap:nowrap —— 五个选项卡永远同一行，不再折成两行
   · 窄屏（放不下时）容器横向滚动，滚动条隐藏，滑动带轻微吸附
   · 该组件只用于首页，无需求改共享样式
   ========================================================================== */
.rec-tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity}
.rec-tabs::-webkit-scrollbar{display:none}
.rec-tab{flex:0 0 auto;scroll-snap-align:start}

/* ==========================================================================
   21. V12 · 第 4 屏产品卡：加上站内渐变描边边框
   · 素材与规则同改版前的 .icard:after（assets/img/v7/frame-border.svg 蓝色渐变描边，
     18px border-image）；卡片补 position:relative + overflow:hidden，让描边贴住圆角内缘
   · 与产品页 / 场景页卡片（v11b.css 第 32b 节）同一观感，但作用域不同：
     这里是首页 #products，那边是 .with-cat
   · pointer-events:none，不影响整卡链接与「Get a Quote」点击
   ========================================================================== */
#products .rcard{position:relative;overflow:hidden}
#products .rcard:after{content:"";position:absolute;inset:0;border:18px solid transparent;border-image:url("../img/v7/frame-border.svg") 17 stretch;pointer-events:none;z-index:4;border-radius:inherit}

/* ==========================================================================
   22. V17 · 首页 #news 新闻卡头图改为常规照片比例 16:9
   —— 原因：本文件前面有几处 `#news .ncard .im{height:clamp(…)}`，是按屏高压
      缩的固定高度（宽屏下约 2.3:1，已不像照片）；它带 #news（id）优先级高于
      v11b.css 里通用的 `.ncard .im{aspect-ratio:16/9}`，会把通用规则盖掉。
   —— 处理：在本文件末尾再声明一次（与前面同优先级、顺序在后 → 生效），
      宽窄屏统一 16:9（.im 是 .ncard 这个 column flex 的子项，会被 blockify，
      height/aspect-ratio 正常生效）。#news 只在首页出现，作用域安全。
   ========================================================================== */
#news .ncard .im{height:auto;aspect-ratio:16/9}

/* ==========================================================================
   23. V17 · 首页「Why Choose PowerLong Battery」数据卡结构简化
   —— 每张卡改为：图标 → 大号数字 → 小标题（原来数字下的「标题 + 说明」两行已删除）
   —— .evb-lb 原样式是「下边距 6px」，为贴在数字上方准备的；现在挪到数字下方，
      改成上边距 8px，与数字的间距更匀
   ========================================================================== */
.evb-st .evb-lb{margin:8px 0 0}

/* ==========================================================================
   24. V17 · 移动端质检修复：首页数据卡小标题字号 11px → 12px
   （实测 <12px 字号在 375px 宽下偏小；v12.css 在同优先级下后于 v11b.css 加载，
     所以这条覆盖必须写在本文件末尾）
   ========================================================================== */
.evb-lb{font-size:12px}