/* ============================================================
 * Unified Banner Design System
 * Used by: index.htm (banner_b), banner_bzcp pages, agent page
 * ============================================================ */

/* ---- Eyebrow tag (small label above title) ---- */
.bn-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;color:#2a6fff;letter-spacing:3px;font-weight:600;
  padding:6px 14px;
  background:rgba(42,111,255,.08);
  border:1px solid rgba(42,111,255,.18);
  border-radius:30px;
  margin-bottom:18px;line-height:1.4;
}
.bn-eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#2a6fff;
  box-shadow:0 0 0 4px rgba(42,111,255,.18);
  animation:bn-pulse 2s ease-in-out infinite;
}
@keyframes bn-pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(42,111,255,.18);}
  50%{box-shadow:0 0 0 7px rgba(42,111,255,.05);}
}

/* ---- Title hierarchy ---- */
.bn-title{
  font-size:46px!important;line-height:1.2!important;
  color:#1a2b4a!important;font-weight:800!important;
  margin:0 0 14px!important;letter-spacing:1px;
}
.bn-title .accent{
  background:linear-gradient(135deg,#2a6fff 0%,#7b61ff 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.bn-subtitle{
  font-size:20px!important;line-height:1.5!important;
  color:#3a4a6a!important;font-weight:500!important;
  margin:0 0 18px!important;
}

/* ---- Value-prop strip ---- */
.bn-value-prop{
  display:flex;align-items:center;gap:10px;
  padding:12px 18px;
  background:linear-gradient(90deg,rgba(42,111,255,.08),rgba(123,97,255,.06) 60%,transparent);
  border-left:3px solid #2a6fff;
  border-radius:0 8px 8px 0;
  font-size:15px;color:#2a3a5a;
  margin-bottom:22px;max-width:600px;line-height:1.5;
}
.bn-value-prop strong{color:#2a6fff;font-weight:700;}

/* ---- Tag cards (replaces span > em pattern) ---- */
.bn-tags{
  display:flex!important;flex-direction:column;gap:8px;
  margin-bottom:24px!important;max-width:600px;
}
.bn-tags em{
  display:flex!important;align-items:flex-start;gap:12px;
  font-style:normal;font-size:13px;color:#4a5a78;line-height:1.6;
  padding:10px 14px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(42,111,255,.12);
  border-radius:8px;
  backdrop-filter:blur(4px);
}
.bn-tags em b{
  flex:0 0 auto;width:auto!important;
  font-size:13px;color:#1a2b4a;font-weight:700;
  padding:2px 10px;
  background:rgba(42,111,255,.1);
  border-radius:4px;
}

/* ---- CTA row (primary + secondary) ---- */
.bn-cta-row{
  display:flex;align-items:center;gap:14px;
  margin-bottom:28px;flex-wrap:wrap;
}
.bn-cta-row .btn-primary{
  display:inline-flex!important;align-items:center;gap:8px;
  width:auto!important;padding:0 28px;line-height:52px;
  font-size:15px;font-weight:600;color:#fff;
  background:linear-gradient(135deg,#2a6fff 0%,#5b9aff 100%);
  border-radius:50px;
  box-shadow:0 10px 24px -8px rgba(42,111,255,.55);
  transition:transform .25s ease,box-shadow .25s ease;
}
.bn-cta-row .btn-primary::after{
  content:"→";transition:transform .25s ease;
}
.bn-cta-row .btn-primary:hover{
  opacity:1!important;transform:translateY(-2px);
  box-shadow:0 14px 30px -8px rgba(42,111,255,.7);
}
.bn-cta-row .btn-primary:hover::after{transform:translateX(4px);}

.bn-cta-row .btn-secondary{
  display:inline-flex;align-items:center;gap:8px;
  padding:0 22px;line-height:50px;
  font-size:14px;font-weight:600;color:#2a6fff;
  background:#fff;
  border:1px solid rgba(42,111,255,.3);
  border-radius:50px;
  transition:all .25s ease;
}
.bn-cta-row .btn-secondary:hover{
  background:rgba(42,111,255,.06);
  border-color:#2a6fff;
}
.bn-cta-row .btn-secondary .play-ico{
  width:18px;height:18px;border-radius:50%;
  background:#2a6fff;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;
}

/* ---- Trust strip (client logos / numbers) ---- */
.bn-trust{
  display:flex;align-items:center;gap:14px;
  padding-top:20px;
  border-top:1px dashed rgba(42,111,255,.2);
  font-size:12px;color:#6a7a95;flex-wrap:wrap;
}
.bn-trust .label{font-weight:600;color:#2a3a5a;}
.bn-trust .clients{display:flex;gap:8px;flex-wrap:wrap;}
.bn-trust .clients span{
  padding:4px 10px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(42,111,255,.14);
  border-radius:14px;
  color:#3a4a6a;
}

/* ---- Index page: product list inside banner_b ---- */
.banner_l .banner_b{
  position:relative;max-width:780px;
  padding:0;
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
}
.banner_l .banner_b .bn-title{
  font-size:32px!important;font-weight:800!important;
  margin:0 0 22px!important;
  padding-left:16px;
  position:relative;line-height:1.1!important;
  letter-spacing:1px;
  display:flex;align-items:center;
}
.banner_l .banner_b .bn-title::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:0.85em;width:5px;
  background:linear-gradient(180deg,#2a6fff 0%,#7b61ff 50%,#ff6b9e 100%);
  border-radius:5px;
  box-shadow:0 4px 14px rgba(123,97,255,.35);
}
.banner_l .banner_b .bn-title .accent{
  background:linear-gradient(135deg,#2a6fff 0%,#7b61ff 60%,#ff6b9e 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  font-size:inherit!important;color:inherit!important;
  display:inline!important;line-height:inherit!important;
  margin:0!important;
}

/* Product list: 2-column grid */
.banner_l .banner_b span.bn-product-list{
  display:grid!important;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-bottom:20px;
}
.banner_l .banner_b span.bn-product-list em{
  position:relative;display:flex!important;flex-direction:column;gap:4px;
  font-style:normal;line-height:1.5;color:#4a5a78;
  padding:12px 14px 12px 18px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(42,111,255,.08);
  border-radius:12px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  overflow:hidden;
}
.banner_l .banner_b span.bn-product-list em::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  background:linear-gradient(180deg,#2a6fff,#7b61ff);
  border-radius:0 3px 3px 0;
  transition:width .25s ease;
}
.banner_l .banner_b span.bn-product-list em:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 24px -10px rgba(42,111,255,.35);
  border-color:rgba(42,111,255,.25);
}
.banner_l .banner_b span.bn-product-list em:hover::before{width:4px;}
.banner_l .banner_b span.bn-product-list em b{
  display:block!important;width:auto!important;min-width:auto!important;
  font-size:14px;color:#1a2b4a;font-weight:700;letter-spacing:.3px;
  margin-bottom:0;
}
.banner_l .banner_b span.bn-product-list em b::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#2a6fff;margin-right:6px;vertical-align:middle;
  box-shadow:0 0 0 3px rgba(42,111,255,.15);
}
/* Description text after b - because content is mixed text node, style the em itself */
.banner_l .banner_b span.bn-product-list em{font-size:12.5px;}

/* Callout + CTA wrapper */
.banner_l .banner_b .cta-group{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 0;
}
.banner_l .banner_b .callout{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  margin:0;padding:6px 18px 6px 6px;
  background:linear-gradient(90deg,#2a6fff 0%,#5b8bff 60%,#7b61ff 100%);
  border-radius:50px;
  box-shadow:0 8px 20px -10px rgba(42,111,255,.55),inset 0 1px 0 rgba(255,255,255,.2);
  overflow:hidden;max-width:100%;
}
.banner_l .banner_b .callout::before{
  content:"";position:absolute;right:-40px;top:-30px;
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.2) 0%,transparent 70%);
  pointer-events:none;
}
.banner_l .banner_b .callout-icon{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,rgba(255,255,255,.35),rgba(255,255,255,.18));
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.banner_l .banner_b .callout-text{
  color:#fff;line-height:1.3;position:relative;
  display:inline-flex;align-items:center;gap:8px;
}
.banner_l .banner_b .callout-text strong{
  display:inline;font-size:15px;font-weight:700;letter-spacing:.5px;
  white-space:nowrap;
}
.banner_l .banner_b .callout-text span{
  display:inline-flex;align-items:center;font-size:12px;opacity:1;margin:0;
  padding:4px 12px;background:#fff;color:#2a6fff;
  border-radius:20px;white-space:nowrap;line-height:1;
  letter-spacing:.3px;font-weight:600;
}

/* CTA */
.banner_l .banner_b ul{list-style:none;padding:0;margin:0;display:inline-flex;justify-content:flex-start;align-items:center;gap:14px;}
.banner_l .banner_b ul li{margin:0;}
.banner_l .banner_b ul a{
  display:inline-flex!important;align-items:center;justify-content:center;gap:8px;
  width:auto!important;min-width:auto;padding:0 24px;line-height:42px;
  font-size:13.5px;font-weight:600;color:#2a6fff;
  background:#fff;
  border:1px solid rgba(42,111,255,.25);
  border-radius:50px;
  box-shadow:0 6px 18px -8px rgba(42,111,255,.25);
  transition:all .25s ease;
}
.banner_l .banner_b ul a::after{
  content:"→";font-size:16px;transition:transform .25s ease;
}
.banner_l .banner_b ul a:hover{
  opacity:1!important;transform:translateY(-2px);
  background:linear-gradient(135deg,#2a6fff 0%,#7b61ff 100%);
  color:#fff;border-color:transparent;
  box-shadow:0 12px 28px -8px rgba(42,111,255,.6);
}
.banner_l .banner_b ul a:hover::after{transform:translateX(4px);}

/* ---- Agent page (banner_l_pro) overrides ---- */
.banner_l_pro .bn-title{
  font-size:32px!important;
  font-weight:800!important;
  letter-spacing:1px;
  line-height:1.1!important;
  margin:0 0 14px 0!important;
  padding-left:16px;
  position:relative;
  display:flex;align-items:center;
}
.banner_l_pro .bn-title::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:0.85em;width:5px;
  background:linear-gradient(180deg,#2a6fff 0%,#7b61ff 50%,#ff6b9e 100%);
  border-radius:5px;
  box-shadow:0 4px 14px rgba(123,97,255,.35);
}
.banner_l_pro .bn-title .accent{
  background:linear-gradient(135deg,#2a6fff 0%,#7b61ff 60%,#ff6b9e 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  font-size:inherit!important;color:inherit!important;
  display:inline!important;line-height:inherit!important;
  margin:0!important;
}
.banner_l_pro .bn-subtitle,
.banner_l_pro .bn-value-prop,
.banner_l_pro .bn-tags,
.banner_l_pro .bn-cta-row,
.banner_l_pro .bn-trust{margin-left:24px!important;}

/* ---- Section transitions: 让蓝底/白底切换有层次 ---- */
/* 浅蓝 section 升级：渐变 + 微纹理 + 顶底光晕装饰 */
.jzyxgj[style*="f5f8ff"],
.qykfjqr[style*="f5f8ff"],
.kshsq[style*="f5f8ff"]{
  background:linear-gradient(180deg,#eaf0ff 0%,#f5f8ff 18%,#f5f8ff 82%,#eaf0ff 100%) !important;
  position:relative;overflow:hidden;
}
.jzyxgj[style*="f5f8ff"]::before,
.qykfjqr[style*="f5f8ff"]::before,
.kshsq[style*="f5f8ff"]::before{
  content:"";position:absolute;left:-120px;top:-120px;
  width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(42,111,255,.10),transparent 65%);
  pointer-events:none;
}
.jzyxgj[style*="f5f8ff"]::after,
.qykfjqr[style*="f5f8ff"]::after,
.kshsq[style*="f5f8ff"]::after{
  content:"";position:absolute;right:-120px;bottom:-120px;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(123,97,255,.10),transparent 65%);
  pointer-events:none;
}
/* 让 section 内部内容浮在装饰之上 */
.jzyxgj[style*="f5f8ff"] > .w1200,
.qykfjqr[style*="f5f8ff"] > .w1200,
.kshsq[style*="f5f8ff"] > .w1200{position:relative;z-index:1;}

/* 白底 section 增加细微渐变区分，避免和大面积纯白页面背景融为一体 */
.jzyxgj:not([style*="f5f8ff"]):not([style*="linear-gradient"]),
.qykfjqr:not([style*="f5f8ff"]):not([style*="linear-gradient"]),
.kshsq:not([style*="f5f8ff"]):not([style*="linear-gradient"]){
  background:linear-gradient(180deg,#fff 0%,#fafcff 100%);
}

/* ---- Override legacy bzcp.css fixed sizes ---- */
.banner_bzcp .banner_l{
  height:auto!important;
  min-height:550px;
  padding:60px 0;
  display:flex!important;
  flex-direction:column;
  justify-content:center;
}
.banner_bzcp .banner_l a{width:auto!important;}
.banner_bzcp .banner_l span em{display:flex!important;}
.banner_bzcp .banner_l span em b{width:auto!important;}

/* ---- Banner: unified left-rail layout ---- */
.banner_bzcp .banner_l{padding:50px 0!important;gap:0;}
.banner_bzcp .banner_l > *{margin-left:24px!important;}
.banner_bzcp .banner_l .bn-title{
  font-size:32px!important;
  font-weight:800!important;
  letter-spacing:1px;
  line-height:1.1!important;
  margin:0 0 14px 0!important;
  padding-left:16px;
  position:relative;
  display:flex;align-items:center;
}
.banner_bzcp .banner_l .bn-title::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:0.85em;width:5px;
  background:linear-gradient(180deg,#2a6fff 0%,#7b61ff 50%,#ff6b9e 100%);
  border-radius:5px;
  box-shadow:0 4px 16px rgba(123,97,255,.4);
}
.banner_bzcp .banner_l .bn-title .accent{
  background:linear-gradient(135deg,#2a6fff 0%,#7b61ff 60%,#ff6b9e 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  font-size:inherit!important;color:inherit!important;
  display:inline!important;line-height:inherit!important;
  margin:0!important;
}
.banner_bzcp .banner_l .bn-subtitle{
  font-size:18px!important;
  font-weight:500!important;
  color:#5a6a85!important;
  margin:0 0 18px 0!important;
}
.banner_bzcp .banner_l .bn-value-prop{
  margin:0 0 14px 0!important;
  padding:10px 16px!important;
  font-size:14px!important;
  max-width:600px;
}
.banner_bzcp .banner_l .bn-tags{
  margin:0 0 18px 0!important;gap:6px!important;
  max-width:600px;
}
.banner_bzcp .banner_l .bn-tags em{
  padding:8px 12px!important;font-size:12.5px!important;
}
.banner_bzcp .banner_l .bn-tags em b{font-size:12.5px!important;padding:2px 8px!important;}
.banner_bzcp .banner_l .bn-cta-row{margin:0 0 18px 0!important;}
.banner_bzcp .banner_l .bn-cta-row .btn-primary{
  padding:0 26px!important;line-height:46px!important;font-size:14px!important;
}
.banner_bzcp .banner_l .bn-trust{
  margin:0!important;padding-top:16px!important;font-size:12px;
}

@media (max-width:768px){
  .banner_bzcp{min-height:0 !important;padding:0 !important;}
  .banner_bzcp .banner_l{min-height:0 !important;padding:36px 16px !important;height:auto !important;}
  .banner_bzcp .banner_l > *{margin-left:0 !important;}
  .banner_bzcp .banner_l .bn-title{font-size:24px!important;padding-left:12px;letter-spacing:.5px;}
  .banner_bzcp .banner_l .bn-title::before{width:4px;}
  .banner_bzcp .banner_l .bn-subtitle{font-size:15px !important;}
  .banner_bzcp .banner_l .bn-value-prop{font-size:13px !important;padding:10px 14px !important;}
  .banner_bzcp .banner_l .bn-tags em{font-size:12.5px !important;padding:8px 12px !important;}
  .banner_bzcp .banner_l .bn-cta-row{flex-direction:column;align-items:stretch;gap:10px;}
  .banner_bzcp .banner_l .bn-cta-row .btn-primary,
  .banner_bzcp .banner_l .bn-cta-row .btn-secondary{justify-content:center;width:100%;box-sizing:border-box;}
  .banner_l_pro .bn-title{font-size:24px!important;padding-left:12px;}
  .banner_l_pro .bn-title::before{width:4px;}
  .banner_l_pro .bn-subtitle,
  .banner_l_pro .bn-value-prop,
  .banner_l_pro .bn-tags,
  .banner_l_pro .bn-cta-row,
  .banner_l_pro .bn-trust{margin-left:0 !important;}
}
@media (max-width:480px){
  .banner_bzcp .banner_l{padding:28px 14px !important;}
  .banner_bzcp .banner_l .bn-title{font-size:22px !important;}
  .banner_bzcp .banner_l .bn-subtitle{font-size:14px !important;}
  .banner_l_pro .bn-title{font-size:22px !important;}
}

/* ---- Mobile ---- */
@media (max-width:768px){
  .bn-title{font-size:30px!important;}
  .bn-subtitle{font-size:15px!important;}
  .bn-value-prop{font-size:13px;padding:10px 14px;}
  .bn-cta-row{flex-direction:column;align-items:stretch;}
  .bn-cta-row .btn-primary,.bn-cta-row .btn-secondary{justify-content:center;}
  .banner_l .banner_b{padding:22px 18px;}
  .banner_l .banner_b .bn-title{font-size:24px!important;}
  .banner_l .banner_b span.bn-product-list{grid-template-columns:1fr!important;}
  .banner_l .banner_b ul a{min-width:auto;width:100%!important;}
}