/* XTPB merged addon css */

/* addon: pbi_hero */

/* file: frontend.css */
/* ---------------------------------------------------------- 首屏专属 */
.pbi-hero{ padding:190px 0 0; overflow:hidden; }
@media (max-width:1199px){ .pbi-hero{ padding:150px 0 0; } }
@media (max-width:767px){ .pbi-hero{ padding:120px 0 0; } }

/* 光晕。宽度固定 1250px，父级必须 overflow:hidden，
   否则窄屏会把页面撑出横向滚动条。 */
.pbi-hero.has-glow::before{
  content:"";position:absolute;z-index:0;
  top:-320px;left:50%;transform:translateX(-50%);
  width:1250px;height:900px;
  background:
    radial-gradient(ellipse 48% 44% at 50% 50%,rgba(92,171,255,.26),transparent 68%),
    radial-gradient(ellipse 30% 30% at 42% 46%,rgba(0,123,255,.16),transparent 70%);
  filter:blur(12px);pointer-events:none;
}
.pbi-hero .pbi-hero-top{ z-index:3; }

.pbi-hero .pbi-h1{
  margin:0 0 22px;
  font-size:clamp(34px,5.4vw,70px);line-height:1.05;
  font-weight:600;letter-spacing:-.02em;color:var(--pbi-ink);
}
.pbi-hero .pbi-lead{
  max-width:640px;margin:0 auto 38px;
  font-size:17px;line-height:1.85;color:var(--pbi-text);
}

/* 截图展示框：截图不是平铺，是浮在一团蓝光上面 */
/* 按钮到截图框的间距。默认 110px，由模块的 --pbi-shot-gap 内联变量覆盖。
   之前是写死的 70px —— 占位框视觉轻看着还行，换成真实截图就显得贴上去了。 */
.pbi-hero .pbi-shot-zone{ margin-top:var(--pbi-shot-gap,110px);padding-bottom:110px; }

/* 3D 舞台。数值照抄主题 main.css 的 .hero-1 .hero-items：
     perspective:2000px + transform-style:preserve-3d
     1199px 以下 perspective:none —— 和 main.js:988 的
     `if (window.innerWidth <= 1199) return;` 是同一个断点。
   没有 perspective 的话 rotateX(40deg) 不会有近大远小，看着像被竖向压扁。 */
.pbi-hero .pbi-shot-zone{ perspective:2000px;transform-style:preserve-3d; }
.pbi-hero .pbi-shot-stage{ transform-origin:bottom;will-change:transform; }
@media (max-width:1199px){
  .pbi-hero .pbi-shot-zone{ perspective:none;transform-style:initial; }
  .pbi-hero .pbi-shot-stage{ will-change:auto; }
}
@media (max-width:991px){
  .pbi-hero .pbi-shot-zone{ margin-top:calc(var(--pbi-shot-gap,110px) * .7);padding-bottom:80px; }
}
@media (max-width:767px){
  .pbi-hero .pbi-shot-zone{ margin-top:calc(var(--pbi-shot-gap,110px) * .5);padding-bottom:60px; }
}
/* 关掉窗口栏时，截图直接贴着外框，不留那条边线 */
.pbi-hero .pbi-shot > .pbi-shot-img:first-child{ border-radius:12px; }
.pbi-hero .pbi-shot-zone::before{
  content:"";position:absolute;z-index:0;
  top:-40px;left:50%;transform:translateX(-50%);
  width:70%;height:180px;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,123,255,.3),transparent 70%);
  filter:blur(30px);
}
.pbi-hero .pbi-shot{
  position:relative;z-index:2;max-width:1180px;margin:0 auto;
  border-radius:14px;overflow:hidden;
  border:2px solid #fff;background:rgba(255,255,255,.15);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 2px 2px rgba(21,23,25,.1),0 40px 90px -40px rgba(16,52,110,.4);
}
/* 窗口栏：三点在左、地址胶囊居中、说明文字在右。
   之前只有三个点，右边 40px 高的空白带看着像没做完 —— 真实浏览器
   那个位置是地址栏，所以补一个胶囊，即使没填地址也撑得住版面。 */
.pbi-hero .pbi-chrome{
  height:40px;display:flex;align-items:center;gap:12px;padding:0 14px;
  background:#F4F7FB;border-bottom:1px solid #E7EDF5;
}
.pbi-hero .pbi-dots{ display:flex;align-items:center;gap:8px;flex:none; }
.pbi-hero .pbi-dot{ width:10px;height:10px;border-radius:50%; }
.pbi-hero .pbi-dot.d1{ background:#FF5F57; }
.pbi-hero .pbi-dot.d2{ background:#FEBC2E; }
.pbi-hero .pbi-dot.d3{ background:#28C840; }
.pbi-hero .pbi-chrome-url{
  flex:1;min-width:0;max-width:420px;margin:0 auto;
  height:22px;line-height:22px;border-radius:100px;
  background:#E9EFF6;
  padding:0 14px;text-align:center;
  font-size:11.5px;color:#8894A6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pbi-hero .pbi-chrome-tag{ flex:none;font-size:11.5px;color:#9AA6B6;max-width:30%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
/* 右侧没有文字时，让地址胶囊真正居中（左边三点约 46px，这里补等宽占位） */
.pbi-hero .pbi-chrome-tag:empty{ width:46px; }
@media (max-width:600px){
  .pbi-hero .pbi-chrome-url{ max-width:none; }
  .pbi-hero .pbi-chrome-tag{ display:none; }
}
.pbi-hero .pbi-shot-img{ width:100%;height:auto; }
.pbi-hero .pbi-shot-empty{
  min-height:380px;display:grid;place-items:center;
  background:#FCFDFE;color:#B4BFCC;font-size:14px;
}
@media (max-width:767px){ .pbi-hero .pbi-shot-empty{ min-height:220px; } }



/* addon: pbi_steps */

/* file: frontend.css */
/* =========================================================================
 * PBI · 四步流程（吸顶堆叠卡）
 *
 * 和索引相关的三件事 —— 卡片底色、横向偏移 margin-left、z-index ——
 * 全部由 PHP 算好写成内联样式，不在这里。原因是卡片张数可变，
 * 用 :nth-child 写死档位的话，后台加一张卡整排就错位。
 *
 * ★ 另一个更要命的原因：绝对不能用 :nth-child ★
 * ScrollTrigger 的 pin 会把每个被钉的元素**包进一层 .pin-spacer**。
 * 包完之后 .pbi-step-slot 不再是 .pbi-step-list 的直接子元素，
 * 四个槽各自成了自己那层 pin-spacer 的第 1 个子元素 ——
 * :nth-child(2/3/4) 全部落空。而且它**不报错**，页面照常渲染，
 * 只是横向阶梯没了，查起来很费劲。
 * ====================================================================== */

.pbi-steps{ padding:120px 0; }
@media (max-width:1199px){ .pbi-steps{ padding:100px 0; } }
@media (max-width:767px){  .pbi-steps{ padding:76px 0; } }

/* ------------------------------------------------------------- 板块头 */
.pbi-steps .pbi-steps-head{ margin-bottom:46px;max-width:760px; }
.pbi-steps .pbi-steps-kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-size:16px;font-weight:500;color:var(--pbi-blue);
  margin-bottom:14px;
}
.pbi-steps .pbi-steps-kicker svg{ width:17px;height:17px;flex:none; }
.pbi-steps .pbi-steps-h2{
  margin:0 0 14px;
  font-size:46px;line-height:1.22;letter-spacing:-.015em;font-weight:500;
  color:var(--pbi-ink);
}
.pbi-steps .pbi-steps-lead{ margin:0;font-size:16px;line-height:1.75;color:var(--pbi-text); }
@media (max-width:1199px){ .pbi-steps .pbi-steps-h2{ font-size:30px; } }
@media (max-width:767px){  .pbi-steps .pbi-steps-h2{ font-size:24px; } }

/* --------------------------------------------------------- 槽位与卡片 */
.pbi-steps .pbi-step-list{ position:relative; }
.pbi-steps .pbi-step-slot{ width:100%;position:relative;margin-bottom:var(--pbi-step-gap,42vh); }
.pbi-steps .pbi-step-slot:last-child{ margin-bottom:320px; }  /* 给「整摞停一下」留的滚动量 */

.pbi-steps .pbi-step{
  width:var(--pbi-step-w,78%);
  border-radius:20px;
  padding:44px 46px 40px;
  min-height:560px;
  display:flex;flex-direction:column;
  color:#000;
  box-shadow:0 30px 70px -34px rgba(16,52,110,.5);
  /* 故意不写 will-change:transform —— 这里不做缩放，多一层合成没有收益 */
}
.pbi-steps .pbi-step.is-dark{ color:#fff; }

/* 关掉堆叠（或窄屏）时：卡片满宽、正常间距 */
.pbi-steps.is-flat .pbi-step-slot{ margin-bottom:20px; }
.pbi-steps.is-flat .pbi-step-slot:last-child{ margin-bottom:0; }
.pbi-steps.is-flat .pbi-step{ width:100%;margin-left:0 !important;min-height:0; }

/* ------------------------------------------------------------- 卡头 */
.pbi-steps .pbi-step-top{ display:flex;align-items:center;gap:24px; }
.pbi-steps .pbi-step-no{
  font-size:30px;line-height:1;font-weight:600;letter-spacing:-.03em;
  width:74px;flex:none;opacity:.55;
}
.pbi-steps .pbi-step-top h3{
  flex:1;margin:0;text-align:center;
  font-size:30px;line-height:1.3;font-weight:600;letter-spacing:-.02em;color:inherit;
}
.pbi-steps .pbi-step-tag{
  flex:none;font-size:12.5px;font-weight:600;letter-spacing:.03em;
  padding:7px 15px;border-radius:60px;background:rgba(255,255,255,.55);
}
.pbi-steps .pbi-step.is-dark .pbi-step-tag{ background:rgba(255,255,255,.14);color:#BBD8FF; }

/* 小标签贴左 —— 卡片被盖住时，露出来的那一条里要能看见编号和它 */
.pbi-steps .pbi-step-chips{ display:flex;gap:8px;margin-top:18px; }
.pbi-steps .pbi-step-chips span{
  font-size:11.5px;font-weight:600;letter-spacing:.06em;
  padding:6px 13px;border-radius:60px;background:rgba(255,255,255,.55);
}
.pbi-steps .pbi-step.is-dark .pbi-step-chips span{ background:rgba(255,255,255,.14);color:#BBD8FF; }

/* ------------------------------------------------------------- 卡身 */
/* 比例来自参考站实测：左面板 29% / 间隙 5.6% / 文字列 33% / 右边空 28%。
   那 28% 不是没排满，是**故意空的**，只有右下角落一个链接。
   卡片一旦做小，这片空白就会从「留白」变成「没做完」——
   所以卡宽的默认值给到 78%，别随手往下调。 */
.pbi-steps .pbi-step-body{ display:flex;gap:5.6%;flex:1;margin-top:52px;align-items:stretch; }

/* 左面板：竖向近正方形，里面只放一件东西（那个巨大的动词）。
   底色用半透明白铺在卡色上 —— 任何卡片底色都自动得到一个更浅的同色调，
   不用为每张卡单独配一个面板色。 */
.pbi-steps .pbi-step-panel{
  width:29%;flex:none;min-height:330px;
  border-radius:18px;padding:28px;
  background:rgba(255,255,255,.5);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.pbi-steps .pbi-step.is-dark .pbi-step-panel{ background:rgba(255,255,255,.08); }
.pbi-steps .pbi-step-verb{
  font-size:clamp(76px,7vw,104px);line-height:.92;font-weight:600;letter-spacing:-.04em;
  margin-bottom:auto;
}
.pbi-steps .pbi-step-say{ margin:0 0 8px;font-size:22px;line-height:1.35;font-weight:600;letter-spacing:-.02em; }
.pbi-steps .pbi-step-sub{ margin:0;font-size:13.5px;line-height:1.55;opacity:.62;overflow-wrap:anywhere; }

/* 三段，每段左侧一条竖线 */
.pbi-steps .pbi-step-blocks{ width:33%;flex:none;display:flex;flex-direction:column;justify-content:center;gap:22px; }
.pbi-steps .pbi-step-b{ padding-left:18px;border-left:2px solid rgba(0,0,0,.16); }
.pbi-steps .pbi-step.is-dark .pbi-step-b{ border-left-color:rgba(140,190,255,.4); }
.pbi-steps .pbi-step-b h5{
  margin:0 0 5px;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;opacity:.55;color:inherit;
}
.pbi-steps .pbi-step-b p{ margin:0;font-size:15.5px;line-height:1.65;color:inherit; }
.pbi-steps .pbi-step.is-dark .pbi-step-b p{ color:rgba(255,255,255,.86); }

/* 右边那 28%：空的，只有右下角一个链接 */
.pbi-steps .pbi-step-rest{
  width:28%;flex:none;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;
}
.pbi-steps .pbi-step-rest a{
  display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;color:inherit;
  font-size:14.5px;font-weight:600;
  padding:13px 22px;border-radius:60px;background:#fff;
  box-shadow:0 6px 18px -8px rgba(16,52,110,.35);
  transition:gap .25s ease;
}
.pbi-steps .pbi-step-rest a:hover{ gap:14px; }
.pbi-steps .pbi-step.is-dark .pbi-step-rest a{ background:rgba(255,255,255,.12);color:#fff; }

/* ----------------------------------------------------------- 窄屏 */
/* 1200px 以下不做吸顶：横向阶梯需要横向余量，窄屏没有；
   而且屏幕一矮，卡片吸顶之后内容就没地方放了。
   这个断点必须和 frontend.js 里 matchMedia 的 1200 保持一致。 */
@media (max-width:1199px){
  .pbi-steps .pbi-step-slot{ margin-bottom:18px; }
  .pbi-steps .pbi-step-slot:last-child{ margin-bottom:0; }
  .pbi-steps .pbi-step{ width:100% !important;margin-left:0 !important;min-height:0;padding:28px; }
  .pbi-steps .pbi-step-body{ flex-direction:column;gap:22px;margin-top:28px; }
  .pbi-steps .pbi-step-panel{
    width:100%;min-height:0;flex-direction:row;align-items:center;gap:20px;padding:22px;
  }
  .pbi-steps .pbi-step-verb{ margin-bottom:0;font-size:58px; }
  .pbi-steps .pbi-step-blocks{ width:100%; }
  .pbi-steps .pbi-step-rest{ width:100%;align-items:flex-start; }
}
@media (max-width:767px){
  .pbi-steps .pbi-step{ padding:22px; }
  .pbi-steps .pbi-step-top{ flex-wrap:wrap;gap:12px; }
  .pbi-steps .pbi-step-no{ width:auto;font-size:22px; }
  .pbi-steps .pbi-step-top h3{ text-align:left;font-size:21px;flex-basis:100%;order:3; }
  .pbi-steps .pbi-step-verb{ font-size:46px; }
  .pbi-steps .pbi-step-say{ font-size:18px; }
}

/* ------------------------------------------------- 编辑器里的提示条 */
.pbi-steps .pbi-steps-note{
  margin-bottom:20px;padding:10px 14px;border-radius:10px;
  background:#EEF4FF;border:1px solid #C9DBF7;
  font-size:13px;line-height:1.7;color:#2A4A7A;
}
.pbi-steps .pbi-steps-note.is-warn{ background:#FFF7E6;border-color:#F0D69A;color:#7A5A16; }

@media (prefers-reduced-motion:reduce){
  .pbi-steps .pbi-step-rest a{ transition:none; }
}

/* ------------------------------------------------------ 吸顶小标题条 */
/* 一行、高度固定 48px。钉住前透明（只占位，不显示），钉住时淡入。
   ★ 高度必须是固定的 ★ GSAP 钉住时会把当前高度写成内联 height 锁住，
   所以这个元素的高度不能依赖内容多少，否则锁到的值不可控。 */
.pbi-steps .pbi-steps-bar{
  height:48px;display:flex;align-items:center;
  margin-bottom:-4px;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
  position:relative;z-index:60;
}
.pbi-steps .pbi-steps-bar.is-pinned{ opacity:1; }
.pbi-steps .pbi-steps-bar span{
  font-size:26px;line-height:1.3;font-weight:600;letter-spacing:-.02em;
  color:var(--pbi-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
/* 竖排形态下这条完全不需要 */
.pbi-steps.is-flat .pbi-steps-bar{ display:none; }
@media (max-width:1199px){ .pbi-steps .pbi-steps-bar{ display:none; } }

/* ================================================ 堆叠时按视口高度收缩 */
/* 卡片是被钉在屏幕上看的，所以它的高度不能写死 —— 屏幕矮一点，
   最低那张就会顶到底边，阴影被切掉，看起来像「没展示完整」。
   下面几个值全部 clamp(最小, 跟着 vh, 原值)：屏幕够高时和原来一模一样，
   矮了就整体收一点。四项加起来在 800px 高的屏上能省约 60px。
   注意只在 .is-stack 下生效 —— 竖排形态是跟着页面滚的，不受屏幕高度限制。 */
.pbi-steps.is-stack .pbi-step{
  min-height:0;
  padding-top:clamp(28px,4vh,44px);
  padding-bottom:clamp(26px,3.6vh,40px);
}
.pbi-steps.is-stack .pbi-step-body{ margin-top:clamp(28px,5vh,52px); }
.pbi-steps.is-stack .pbi-step-panel{ min-height:clamp(232px,38vh,330px); }
.pbi-steps.is-stack .pbi-step-verb{ font-size:clamp(60px,min(7vw,8.5vh),104px); }
.pbi-steps.is-stack .pbi-step-chips{ margin-top:clamp(10px,2vh,18px); }



/* addon: pbi_gallery */

/* file: frontend.css */
/* =========================================================================
 * PBI · 模块库入口（漂浮排列）
 *
 * 每张图的 top / left / 宽度 / z-index / 圆角 / 阴影 都由 PHP 写成内联样式 ——
 * 坐标在 pbi-gallery.php 的 slots() 里，不在这个文件。原因是张数可变，
 * 而且绝对不能用 :nth-child（同 pbi-steps 那条教训）。
 * ====================================================================== */

/* .pbi 基类给了 padding:120px 0，这一节的上下留白由标题块自己控制，先清掉。
   底部留白是给最下面那张图用的：它在 top:79%，加上自身高度会超出漂浮区约 5px，
   顺便也给图片的投影留个落脚的地方，否则下一节紧贴上来阴影被硬切。

   ★ 这里绝对不能写 overflow:hidden ★
   这一节在 XTPB 里的父级（.xtpb-section__inner）是有 max-width 的（1140px），
   通栏靠的是子元素负 margin 破框跑到父级外面去。一旦给这一节加 overflow:hidden，
   破出去的部分立刻被裁回 1140 —— 通栏就白做了，而且看起来就像「没生效」，
   很难想到是自己这条 CSS 干的。
   横向溢出由主题 body 上的 overflow-x:hidden 兜底（main.css:51）。 */
.pbi-gal{
  padding:0 0 clamp(32px,3.2vw,64px);
  position:relative;
}
@media (max-width:991px){ .pbi-gal{ padding-bottom:clamp(28px,6vw,48px); } }

/* ------------------------------------------------------------ 通栏破框 */
/* 模块被 XTPB 的列和 .pbi-wrap 夹在 1290px 里，要铺满得自己破框。
   ★ 为什么不直接写 100vw ★
   Windows 上 100vw **包含滚动条宽度**（15~17px），直接用会比可视区宽出一截、
   撑出横向滚动条。主题 body 上的 overflow-x:hidden 能盖住，但那是把问题藏起来，
   缩放时还会抖。所以由 frontend.js 量 documentElement.clientWidth（不含滚动条）
   写进 --pbi-gal-vw，这里只留 100vw 当 JS 没跑起来时的兜底。 */
.pbi-gal.is-bleed .pbi-gal-bleed{
  width:var(--pbi-gal-vw,100vw);
  margin-left:calc(50% - var(--pbi-gal-vw,100vw) / 2);
}

/* ---------------------------------------------------------- 标题块 */
.pbi-gal .pbi-gal-head{
  padding:76px 0 210px;
  position:relative;overflow:hidden;
}
.pbi-gal.is-dark .pbi-gal-head{
  color:#fff;
  background:
    radial-gradient(ellipse 60% 80% at 82% 14%,rgba(0,123,255,.5),transparent 62%),
    linear-gradient(150deg,#12315C,#0B2444 58%,#123B78);
}
.pbi-gal.is-light .pbi-gal-head{
  color:var(--pbi-ink);
  background:linear-gradient(170deg,#EDF3FC,#F7FAFE 60%,#EEF4FD);
}
/* 深色底上那层细网格。和四步卡、页尾 CTA 是同一个手法，不是星点 */
.pbi-gal.is-dark .pbi-gal-head::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 30%,#000 5%,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 70% at 50% 30%,#000 5%,transparent 75%);
}
.pbi-gal .pbi-gal-head > *{ position:relative;z-index:2; }

.pbi-gal .pbi-gal-kicker{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
  font-size:15px;font-weight:500;
}
.pbi-gal.is-dark .pbi-gal-kicker{ color:#8CC6FF; }
.pbi-gal.is-light .pbi-gal-kicker{ color:var(--pbi-blue); }
.pbi-gal .pbi-gal-kicker svg{ width:16px;height:16px;flex:none; }

.pbi-gal .pbi-gal-h2{
  margin:0 0 14px;
  font-size:46px;line-height:1.22;letter-spacing:-.02em;font-weight:600;
  color:inherit;
}
/* shared.css 的 .pbi-hl 是配浅底的渐变，压在深蓝上偏暗，换一档更亮的 */
.pbi-gal.is-dark .pbi-hl{ background-image:linear-gradient(103.71deg,#8CC6FF 6%,#2E9BFF 72%); }

.pbi-gal .pbi-gal-lead{
  margin:0 auto 30px;max-width:36em;font-size:16px;line-height:1.8;
}
.pbi-gal.is-dark .pbi-gal-lead{ color:rgba(226,236,248,.72); }
.pbi-gal.is-light .pbi-gal-lead{ color:var(--pbi-text); }

.pbi-gal .pbi-gal-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:17px 28px;border-radius:60px;
  font-size:15px;font-weight:600;text-decoration:none;color:#fff;
  background-image:var(--pbi-grad);
  box-shadow:0 10px 26px -10px rgba(0,90,200,.8);
  transition:gap .25s ease,transform .3s ease;
}
.pbi-gal .pbi-gal-btn:hover{ gap:15px;transform:translateY(-2px);color:#fff; }

@media (max-width:1199px){
  .pbi-gal .pbi-gal-h2{ font-size:30px; }
  .pbi-gal .pbi-gal-head{ padding:56px 0 160px; }
}
/* ★ 992px 以下改走跑马灯，下内边距必须留够给它压 ★
   跑马灯要往上骑到标题块的下沿（margin-top 负值），
   下内边距如果小于那个负值，跑马灯就会啃进内容区、把按钮盖掉。
   下面三档的 padding-bottom 都必须 > 跑马灯的 |margin-top| + 呼吸量。 */
@media (max-width:991px){ .pbi-gal .pbi-gal-head{ padding:56px 0 122px; } }
@media (max-width:767px){
  .pbi-gal .pbi-gal-h2{ font-size:24px; }
  .pbi-gal .pbi-gal-head{ padding:46px 0 112px; }
}
@media (max-width:479px){
  .pbi-gal .pbi-gal-head{ padding:40px 0 100px; }
  .pbi-gal .pbi-gal-lead{ margin-bottom:24px; }
}

/* ---------------------------------------------------------- 漂浮排列 */
.pbi-gal .pbi-gal-stage{
  /* ★ 这里不要写 width ★ 宽度由 .pbi-gal-bleed 给，两条规则特异度相同，
     写在后面的会赢，再补一个 width:100% 就把通栏封顶覆盖掉了。

     ★ 用 aspect-ratio，不能用 padding-bottom:39% ★
     百分比 padding 是按**父级宽度**算的，不是自己的宽度。通栏封顶之后
     自己只有 1920 宽、父级还是 2560，padding-bottom 会按 2560 算高度，
     封顶等于白封。aspect-ratio 按自身宽度算才对得上。 */
  position:relative;
  box-sizing:border-box;        /* 左右 padding 必须吃在通栏宽度里面，不能往外加 */
  margin-top:calc( -1 * var(--pbi-gal-over,18%) );
  aspect-ratio:100 / var(--pbi-gal-ratio,39);
  pointer-events:none;          /* 空白处不挡住底下的东西 */
  z-index:3;

  /* ★ 这 24px 是给两种位移留的余量 ★
     最边上那两张的 left 是 0% 和「刚好贴右边」（82.82% + 17.18% = 100%），
     会被两件事推出去：
       · 视差位移：最大 46px × depth(.3) ≈ 13.8px
       · hover 放大：scale(1.04)，最宽那张约 290px，单边长出约 6px
     两者叠加约 20px。不留余量的话页面会被撑出横向滚动条 ——
     主题 body 的 overflow-x:hidden 只是盖住滚动条，scrollWidth 照样变大。 */
  padding:0 24px;
}

/* ★ 为什么要多套一层 .pbi-gal-field ★
   绝对定位子元素的百分比，算的是定位祖先的**内边距盒**（padding box），
   padding 本身也在这个盒子里 —— 所以直接把 padding 加在 .pbi-gal-stage 上，
   图片一点都不会往里收，那 24px 白留。必须再套一层不带 padding 的定位层：
   它的宽度 = stage 的内容盒，图片的百分比才是按收进来之后的宽度算的。
   （实测：只加 padding 时 1707/1440/1200 三档仍然会被撑出 6px。） */
.pbi-gal .pbi-gal-field{ position:relative;width:100%;height:100%; }

.pbi-gal .pbi-gal-item{ position:absolute;pointer-events:auto; }
.pbi-gal .pbi-gal-layer{
  display:block;position:relative;
  will-change:transform;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.pbi-gal .pbi-gal-item img{ width:100%;display:block;background:#fff; }

/* 悬停：图轻微浮起 + 显示模块名 */
.pbi-gal.has-names .pbi-gal-item:hover .pbi-gal-layer{ transform:translateY(-6px) scale(1.04); }
.pbi-gal .pbi-gal-name{
  position:absolute;left:50%;bottom:-30px;
  transform:translateX(-50%) translateY(4px);
  white-space:nowrap;font-size:12px;font-weight:600;color:#fff;
  padding:5px 11px;border-radius:60px;background:rgba(11,36,68,.92);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
.pbi-gal .pbi-gal-item:hover .pbi-gal-name{ opacity:1;transform:translateX(-50%) translateY(0); }

/* ------------------------------------------------------------ 跑马灯 */
/* 992px 以下漂浮排列每张只剩三四十像素，糊成一团，换成横向跑马灯。
   两份相同内容首尾相接，translateX(-50%) 循环即可无缝。
   图片不足 4 张时前台也走这个形态（PHP 加 .no-scatter）。 */
.pbi-gal .pbi-gal-marquee{ display:none; }
.pbi-gal.no-scatter .pbi-gal-marquee{ display:block;margin-top:-66px;position:relative;z-index:3; }
@media (max-width:991px){
  .pbi-gal .pbi-gal-stage{ display:none; }
  .pbi-gal .pbi-gal-marquee{
    /* -66px 正好是跑马灯高度（132px）的一半：一半骑在标题块上、一半露在外面，
       和桌面端那个 --pbi-gal-over 是同一个意思。
       这个值和上面 .pbi-gal-head 的 padding-bottom 是一对，改一个就要看另一个。 */
    display:block;margin-top:-66px;position:relative;z-index:3;
  }
}
.pbi-gal .pbi-gal-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.pbi-gal .pbi-gal-track{
  display:flex;width:max-content;
  animation:pbi-gal-run var(--pbi-gal-speed,42s) linear infinite;
}
.pbi-gal .pbi-gal-track > div{ display:flex;gap:14px;padding-right:14px; }
.pbi-gal .pbi-gal-track img{
  height:132px;width:auto;display:block;border-radius:8px;
  box-shadow:0 10px 28px rgba(16,52,110,.14);background:#fff;
}
@keyframes pbi-gal-run{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* 很窄的屏上图再矮一档，否则一屏只看得见两张，看不出「很多」 */
@media (max-width:479px){
  .pbi-gal .pbi-gal-marquee{ margin-top:-54px; }
  .pbi-gal .pbi-gal-track img{ height:108px;border-radius:6px; }
  .pbi-gal .pbi-gal-track > div{ gap:10px;padding-right:10px; }
}

/* ------------------------------------------------- 编辑器里的预览 */
.pbi-gal .pbi-gal-note{
  margin:0 24px 20px;padding:10px 14px;border-radius:10px;
  background:#EEF4FF;border:1px solid #C9DBF7;
  font-size:13px;line-height:1.7;color:#2A4A7A;
}
.pbi-gal .pbi-gal-note.is-warn{ background:#FFF7E6;border-color:#F0D69A;color:#7A5A16; }
.pbi-gal.is-preview .pbi-gal-head{ padding:44px 0 44px;border-radius:14px; }

/* 位次小样：14 个位次按真实坐标画出来，已传图的放图，没传的画虚线框。
   坐标由 getTemplate() 从 PHP 的 slots() 生成，这里只管长相。
   ★ 只在构建器画布里出现，前台不输出这段 DOM ★ */
.pbi-gal .pbi-gal-map{
  position:relative;box-sizing:border-box;
  margin:14px 24px 20px;padding:0;
  background:#F4F7FB;border:1px solid #D7E3F2;border-radius:10px;
}
.pbi-gal .pbi-gal-slot{
  position:absolute;display:block;box-sizing:border-box;border-radius:4px;
}
.pbi-gal .pbi-gal-slot.is-on{ background:#fff;box-shadow:0 2px 10px rgba(16,52,110,.16); }
/* 空位次框里要写「形状 + 宽高比」，框本身可能只有三四十像素宽，
   不裁的话这行字会漫到框外面去，和旁边的图糊成一片。 */
.pbi-gal .pbi-gal-slot:not(.is-on){
  border:1px dashed #B3C8E2;background:rgba(255,255,255,.45);overflow:hidden;
}
.pbi-gal .pbi-gal-slot img{ width:100%;display:block;border-radius:4px;background:#fff; }
.pbi-gal .pbi-gal-slot b{
  position:absolute;top:2px;left:2px;z-index:2;
  min-width:15px;height:15px;padding:0 4px;border-radius:4px;
  background:rgba(11,36,68,.85);color:#fff;
  font-size:10px;line-height:15px;font-weight:700;text-align:center;
}
.pbi-gal .pbi-gal-slot:not(.is-on) b{ background:#C6D6EA;color:#2A4A7A; }
.pbi-gal .pbi-gal-slot em{
  position:absolute;left:0;right:0;bottom:3px;text-align:center;
  font-style:normal;font-size:10px;line-height:1;color:#8AA3C2;white-space:nowrap;
}
.pbi-gal .pbi-gal-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px;padding:22px 24px 0;
}
.pbi-gal .pbi-gal-grid figure{ margin:0; }
.pbi-gal .pbi-gal-grid img{
  width:100%;display:block;border-radius:8px;background:#fff;
  border:1px solid var(--pbi-line,rgba(0,0,0,.1));
}
.pbi-gal .pbi-gal-grid figcaption{
  margin-top:6px;font-size:11.5px;color:var(--pbi-text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

@media (prefers-reduced-motion:reduce){
  .pbi-gal .pbi-gal-layer,
  .pbi-gal .pbi-gal-name,
  .pbi-gal .pbi-gal-btn{ transition:none; }
  .pbi-gal .pbi-gal-track{ animation:none; }
}



/* addon: pbi_doubt */

/* file: frontend.css */
/* =========================================================================
 * PBI · 常见顾虑（卡堆）
 *
 * ★ 堆叠靠 JS，这里只管长相 ★
 * .pbi-doubt-slide 的绝对定位和位移都写在 .is-js 下面 —— .is-js 由
 * frontend.js 加上。JS 没起来（出错、被拦、搜索引擎抓取、打印）时一条规则
 * 都不命中，七张卡就是普通的上下排列，内容照样从头读到尾。
 *
 * ★ 52px 这个数在这里和 frontend.js 里各有一份 ★
 * 它既是 .pbi-doubt-peek 的高度，也是 JS 里每退一层往下露的距离。
 * 两边必须相等，改一个就要改另一个，否则预告条会被切掉半截或者露出多余的白。
 * ====================================================================== */

.pbi-doubt{
  position:relative;
  padding:clamp(64px,7vw,104px) 0 clamp(72px,7.5vw,116px);
}
.pbi-doubt.is-bg-soft{ background:#F4F6FA; }
.pbi-doubt.is-bg-white{ background:#fff; }

/* 死平的灰太闷，压两团极淡的光，几乎看不出来但底就活了 */
.pbi-doubt .pbi-doubt-mesh{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 12% 6%,rgba(0,123,255,.07),transparent 60%),
             radial-gradient(ellipse 45% 55% at 92% 88%,rgba(92,171,255,.09),transparent 62%);
}
.pbi-doubt.is-bg-white .pbi-doubt-mesh{ opacity:.55; }

/* ------------------------------------------------------------ 通栏破框 */
/* 上一节（模块库入口）是通栏的，这一节的底色缩在 XTPB 的 1140px 容器里
   就成了一块补丁，左右露两条白边。
   ★ 为什么不直接写 100vw ★
   Windows 上 100vw **包含滚动条宽度**，会比可视区宽一截、撑出横向滚动条。
   由 frontend.js 量 documentElement.clientWidth（不含滚动条）写进
   --pbi-dbt-vw，这里只留 100vw 当 JS 没跑起来时的兜底。 */
.pbi-doubt.is-bleed{
  width:var(--pbi-dbt-vw,100vw);
  margin-left:calc( 50% - var(--pbi-dbt-vw,100vw) / 2 );
}
/* ★ 这一节绝对不能写 overflow:hidden ★
   父级 .xtpb-section__inner 有 max-width，破出去的部分会立刻被裁回 1140，
   通栏就白做了 —— 而且看起来像「没生效」，很难想到是自己这条 CSS 干的。
   横向溢出由主题 body 的 overflow-x:hidden 兜底（main.css:51）。 */

/* ---------------------------------------------------------------- 标题区 */
.pbi-doubt .pbi-doubt-head{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(28px,4vw,72px);
  align-items:end;
  margin-bottom:clamp(18px,2vw,30px);
}
@media (max-width:991px){
  .pbi-doubt .pbi-doubt-head{ grid-template-columns:1fr;align-items:start;gap:26px; }
}
.pbi-doubt .pbi-doubt-h2{
  margin:14px 0 12px;
  font-size:clamp(26px,2.8vw,42px);line-height:1.25;letter-spacing:-.02em;font-weight:600;
  color:#0B2444;
}
.pbi-doubt .pbi-doubt-lead{
  margin:0;max-width:26em;font-size:16px;line-height:1.85;color:var(--pbi-text);
}

/* 联系卡。★ 保持白底 ★
   做过一版深色的，结果一屏里有两个深色焦点（它 + 当前那张卡），
   而且其中一个还跟着点击到处跑，右列展开时两块黑连成一条竖带。
   深色焦点只留给「当前这条答案」—— 它是内容，理应最重。 */
.pbi-doubt .pbi-doubt-ask{
  position:relative;overflow:hidden;
  padding:26px 28px;border-radius:20px;background:#fff;
  border:1px solid rgba(16,52,110,.1);
  box-shadow:0 24px 56px -34px rgba(16,52,110,.45);
}
.pbi-doubt .pbi-doubt-ask::after{
  content:"";position:absolute;right:-70px;top:-90px;width:210px;height:210px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,123,255,.14),transparent 70%);
}
.pbi-doubt .pbi-doubt-ask > *{ position:relative;z-index:2; }
.pbi-doubt .pbi-doubt-ask-dot{
  display:block;width:9px;height:9px;border-radius:50%;margin-bottom:14px;
  background:#12B981;box-shadow:0 0 0 4px rgba(18,185,129,.16);
}
.pbi-doubt .pbi-doubt-ask-t{ font-size:18px;font-weight:600;color:#0B2444; }
.pbi-doubt .pbi-doubt-ask-p{ margin:8px 0 18px;font-size:14px;line-height:1.8;color:var(--pbi-text); }
.pbi-doubt .pbi-doubt-ask-btn{
  display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:60px;
  background-image:var(--pbi-grad);color:#fff;font-size:14px;font-weight:600;text-decoration:none;
  box-shadow:0 12px 26px -12px rgba(0,90,200,.85);
  transition:gap .25s ease,transform .28s ease;
}
.pbi-doubt .pbi-doubt-ask-btn:hover{ gap:14px;transform:translateY(-2px);color:#fff; }

/* ------------------------------------------------------------------ 卡片 */
.pbi-doubt .pbi-doubt-stage{ position:relative;margin-top:-6px; }
.pbi-doubt .pbi-doubt-track{ position:relative;max-width:880px;margin:0 auto; }

/* 没有 JS 时：普通上下排列 */
.pbi-doubt .pbi-doubt-slide + .pbi-doubt-slide{ margin-top:16px; }

.pbi-doubt .pbi-doubt-card{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border-radius:22px;overflow:hidden;
  box-shadow:0 22px 54px -26px rgba(16,52,110,.45);
}
.pbi-doubt .pbi-doubt-main{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(26px,3vw,38px) clamp(26px,3vw,40px) 10px;
}
.pbi-doubt .pbi-doubt-top{ display:flex;align-items:center;gap:16px;margin-bottom:16px; }
.pbi-doubt .pbi-doubt-badge{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:13px;background-image:var(--pbi-grad);
  color:#fff;font-size:14px;font-weight:800;letter-spacing:.02em;
}
.pbi-doubt .pbi-doubt-qt{
  margin:0;font-size:clamp(18px,1.6vw,22px);font-weight:600;line-height:1.45;color:#0B2444;
}
.pbi-doubt .pbi-doubt-body{
  font-size:15.5px;line-height:2;color:var(--pbi-text);padding-left:58px;
}
.pbi-doubt .pbi-doubt-body b{ color:#0B2444;font-weight:600; }
@media (max-width:575px){ .pbi-doubt .pbi-doubt-body{ padding-left:0; } }

/* 底边预告条。★ 高度必须等于 frontend.js 里的 PEEK ★ */
.pbi-doubt .pbi-doubt-peek{
  display:flex;align-items:center;gap:13px;width:100%;height:52px;flex:none;
  padding:0 clamp(26px,3vw,40px);
  border:0;border-top:1px solid rgba(16,52,110,.07);background:none;
  font:inherit;text-align:left;
  opacity:0;transition:opacity .38s linear;
}
.pbi-doubt .pbi-doubt-peek-n{
  flex:none;font-size:12px;font-weight:800;letter-spacing:.04em;color:#5CABFF;
}
.pbi-doubt .pbi-doubt-peek-t{
  font-size:15px;font-weight:600;color:#3D5B85;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* 当前卡顶上那条进度线。没有它的话，卡片自己翻走会让人以为是误触 ——
   自动轮播总得有个东西交代「它在自己走、还有多久」。 */
.pbi-doubt .pbi-doubt-prog{
  position:absolute;left:0;top:0;height:3px;width:0;z-index:3;
  border-radius:0 3px 3px 0;background-image:var(--pbi-grad);opacity:0;
}

/* ------------------------------------------------- 以下只在 JS 起来之后 */
.pbi-doubt.is-js .pbi-doubt-slide{
  position:absolute;left:0;right:0;top:0;margin-top:0;
  transition:transform .52s cubic-bezier(.4,0,.2,1),opacity .42s linear;
}
.pbi-doubt.is-js .pbi-doubt-slide.is-back{ cursor:pointer; }
.pbi-doubt.is-js .pbi-doubt-slide.is-back .pbi-doubt-peek{ opacity:1; }
.pbi-doubt.is-js .pbi-doubt-slide.is-back.is-far .pbi-doubt-peek{ opacity:.62; }
.pbi-doubt.is-js .pbi-doubt-slide.is-back:hover .pbi-doubt-card{
  box-shadow:0 28px 64px -24px rgba(16,52,110,.6);
}
.pbi-doubt.is-js .pbi-doubt-slide.is-back:hover .pbi-doubt-peek-t{ color:var(--pbi-blue); }
.pbi-doubt.is-js .pbi-doubt-peek:focus-visible{
  outline:2px solid var(--pbi-blue);outline-offset:-3px;border-radius:0 0 22px 22px;
}
.pbi-doubt.is-js .pbi-doubt-slide.is-front .pbi-doubt-prog{ opacity:1; }
.pbi-doubt.is-js .pbi-doubt-slide.is-front.is-running .pbi-doubt-prog{
  animation:pbi-dbt-tick var(--pbi-dbt-dur,4s) linear forwards;
}
@keyframes pbi-dbt-tick{ from{ width:0; } to{ width:100%; } }

/* ------------------------------------------------- 编辑器里的预览 */
.pbi-doubt .pbi-doubt-note{
  margin:0 24px 18px;padding:10px 14px;border-radius:10px;
  background:#EEF4FF;border:1px solid #C9DBF7;
  font-size:13px;line-height:1.7;color:#2A4A7A;
}
.pbi-doubt .pbi-doubt-note.is-warn{ background:#FFF7E6;border-color:#F0D69A;color:#7A5A16; }
.pbi-doubt.is-preview{ padding:28px 0 24px; }
.pbi-doubt .pbi-doubt-list{ display:flex;flex-direction:column;gap:14px;max-width:880px;margin:0 auto; }
.pbi-doubt .pbi-doubt-card.is-flat{ box-shadow:0 8px 22px -14px rgba(16,52,110,.5); }
.pbi-doubt .pbi-doubt-card.is-flat .pbi-doubt-main{ padding-bottom:clamp(20px,2.4vw,28px); }
.pbi-doubt .pbi-doubt-empty{ color:var(--pbi-text-2);font-style:normal; }

@media (prefers-reduced-motion:reduce){
  .pbi-doubt .pbi-doubt-slide,
  .pbi-doubt .pbi-doubt-peek,
  .pbi-doubt .pbi-doubt-card,
  .pbi-doubt .pbi-doubt-ask-btn{ transition:none; }
  .pbi-doubt .pbi-doubt-prog{ animation:none !important;width:100% !important; }
}


.xtpb-builder-container .xtpb-section.xtpb-row-1789139294956, .xtpb-builder-container .xtpb-section__inner.xtpb-row-1789139294956, .xtpb-builder-container .xtpb-inner-section.xtpb-row-1789139294956, .xtpb-builder-container .xtpb-inner-section__inner.xtpb-row-1789139294956 { padding: 0px 0px 0px 0px;; }.xtpb-row-1789139294956:after{content: " "; display: block; position: absolute; height: 100%; top: 0; left: 0; right: 0; z-index: -1; opacity: 0.4; }.xtpb-builder-container .xtpb-section.xtpb-row-1789142990479, .xtpb-builder-container .xtpb-section__inner.xtpb-row-1789142990479, .xtpb-builder-container .xtpb-inner-section.xtpb-row-1789142990479, .xtpb-builder-container .xtpb-inner-section__inner.xtpb-row-1789142990479 { padding: 0px 0px 0px 0px;; }.xtpb-row-1789142990479:after{content: " "; display: block; position: absolute; height: 100%; top: 0; left: 0; right: 0; z-index: -1; opacity: 0.4; }.xtpb-builder-container .xtpb-section.xtpb-row-1789230719667, .xtpb-builder-container .xtpb-section__inner.xtpb-row-1789230719667, .xtpb-builder-container .xtpb-inner-section.xtpb-row-1789230719667, .xtpb-builder-container .xtpb-inner-section__inner.xtpb-row-1789230719667 { padding: 0px 0px 0px 0px;; }.xtpb-row-1789230719667:after{content: " "; display: block; position: absolute; height: 100%; top: 0; left: 0; right: 0; z-index: -1; opacity: 0.4; }.xtpb-builder-container .xtpb-section.xtpb-row-1789287365845, .xtpb-builder-container .xtpb-section__inner.xtpb-row-1789287365845, .xtpb-builder-container .xtpb-inner-section.xtpb-row-1789287365845, .xtpb-builder-container .xtpb-inner-section__inner.xtpb-row-1789287365845 { padding: 0px 0px 0px 0px;; }.xtpb-row-1789287365845:after{content: " "; display: block; position: absolute; height: 100%; top: 0; left: 0; right: 0; z-index: -1; opacity: 0.4; }.xtpb-builder-container .xtpb-section > .xtpb-section__inner,.xtpb-carousel-content-wrap .xtpb-container{max-width:1920px;padding-left:0px;padding-right:0px;box-sizing:border-box;}@media (max-width:767px){.xtpb-builder-container .xtpb-section > .xtpb-section__inner,.xtpb-carousel-content-wrap .xtpb-container{padding-left:0px;padding-right:0px;}}.xtpb-builder-container .xtpb-container-full{max-width:none;}.xtpb-builder-container .xtpb-section__grid,.xtpb-builder-container .xtpb-inner-section__grid{gap:var(--xtpb-gap,30px);}