@charset "utf-8";
/** 解决方案详情页样式（channel_solution_detail.html 专用）
 * 由原 channel_solution_detail.css（基础层）与 channel_solution_detail_refine.css（精修层）合并，10.89 起更名为 channel_solution.css。
 * 结构：主题变量 → 基础样式 → 基础响应式 → 精修覆盖 → 整页视觉层（原门户建站变体，已提升为全部方案页通用）。
 * 注意：同名不同体规则按先后顺序层叠（精修层在后覆盖基础层），切勿合并或调整顺序。
 * 10.176 起：行业痛点/客户案例区块移除；方案概览改用图标编号卡，适用场景/核心能力改用编号卡片网格。
 * 10.177 起：四方案统一主蓝视觉；10.201 起 hero 背景、光斑、样机窗与场景插画的所有蓝色一律由 --solution-primary color-mix 派生，按组主题色自动跟随。
 * 2026-09-09 死代码清理：移除从未使用的 .solution-section-head-left、CTA 白色变体（模板始终蓝底）、
 * 被 tone !important 规则完全遮蔽的 :nth-of-type(even) 偶数背景；精修层与基础层完全重复的 .solution-hero h1 并入基础层。*/
/*==================== 页面基础与主题变量 ====================*/
.solution-page { --solution-primary: #246bfd; --solution-ink: #101828; --solution-line: #e8edf5; overflow: hidden; background: #fff; color: var(--solution-ink); }
.solution-page * { box-sizing: border-box; }
/*---------- 锚点导航（基础） ----------*/
.solution-anchor-nav { position: sticky; top: 0; z-index: 45; border-bottom: 1px solid rgba(16, 24, 40, 0.08); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(16px); }
.solution-anchor-scroll { display: flex; align-items: center; gap: 1.65rem; min-height: 4rem; overflow-x: auto; scrollbar-width: none; }
.solution-anchor-scroll::-webkit-scrollbar { display: none; }
.solution-anchor-nav a { position: relative; flex: 0 0 auto; color: #475467; font-size: 0.88rem; text-decoration: none; transition: 0.2s; }
.solution-anchor-nav a::after { position: absolute; right: 0; bottom: -1.35rem; left: 0; height: 2px; background: var(--solution-primary); content: ""; opacity: 0; transform: scaleX(0.3); transition: 0.2s; }
.solution-anchor-nav a:hover,
.solution-anchor-nav a.active { color: var(--solution-primary); }
.solution-anchor-nav a.active::after { opacity: 1; transform: scaleX(1); }
.solution-anchor-nav .solution-anchor-cta { margin-left: auto; border-radius: 2rem; background: var(--solution-primary); padding: 0.6rem 1.15rem; color: #fff; }
.solution-anchor-nav .solution-anchor-cta::after { display: none; }
.solution-anchor-cta i { margin-left: 0.4rem; }
/*---------- 首屏 Hero ----------*/
.solution-hero { position: relative; padding: 3rem 0 6.5rem; background: linear-gradient(135deg, color-mix(in srgb, var(--solution-primary) 2%, #fff) 0%, color-mix(in srgb, var(--solution-primary) 5%, #fff) 52%, color-mix(in srgb, var(--solution-primary) 2%, #fff) 100%); }
.solution-hero::before,
.solution-hero::after { position: absolute; border-radius: 50%; content: ""; filter: blur(2px); }
.solution-hero::before { top: 12%; right: -6rem; width: 24rem; height: 24rem; background: color-mix(in srgb, var(--solution-primary) 12%, transparent); }
.solution-hero::after { bottom: -8rem; left: 26%; width: 19rem; height: 19rem; background: color-mix(in srgb, var(--solution-primary) 9%, transparent); }
.solution-hero-grid,
.solution-cta-grid { position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--solution-primary) 4.5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--solution-primary) 4.5%, transparent) 1px, transparent 1px); background-size: 2.625rem 2.625rem; mask-image: linear-gradient(to bottom, #000, transparent 90%); }
/*面包屑结构/颜色/分隔符由全站统一 .common-breadcrumb 提供，此处仅保留 hero 内间距*/
.solution-hero .common-breadcrumb { margin-bottom: 4.6rem; }
.solution-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid color-mix(in srgb, var(--solution-primary) 18%, transparent); border-radius: 2rem; background: rgba(255, 255, 255, 0.75); padding: 0.48rem 0.85rem; color: var(--solution-primary); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; }
.solution-hero h1 { max-width: 39rem; margin: 1.35rem 0 0.65rem; font-size: clamp(2.65rem, 4vw, 3.35rem); font-weight: 760; letter-spacing: -0.01em; line-height: 1.3; text-wrap: balance; }
.solution-hero h2 { margin: 0 0 1.4rem; color: var(--solution-primary); font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 600; }
.solution-hero-lead { max-width: 39rem; margin: 0; color: #475467; font-size: 1.08rem; line-height: 1.9; }
.solution-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
/*按钮尺寸/字重/圆角/过渡对齐首页首屏 home-hero 按钮，保证全站按钮语言一致*/
.solution-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 1px solid transparent; border-radius: 0.65rem; padding: 0 1.5rem; min-height: 3.15rem; font-size: 0.875rem; font-weight: 650; text-decoration: none; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; }
.solution-btn:hover { transform: translateY(-0.125rem); }
.solution-btn-primary { border-color: var(--solution-primary); background: linear-gradient(110deg, var(--solution-primary), color-mix(in srgb, var(--solution-primary) 75%, #fff)); box-shadow: 0 0.9rem 2rem color-mix(in srgb, var(--solution-primary) 25%, transparent); color: #fff; }
.solution-btn-primary:hover { background: color-mix(in srgb, var(--solution-primary) 75%, #000); color: #fff; box-shadow: 0 1rem 1.875rem color-mix(in srgb, var(--solution-primary) 28%, transparent); }
.solution-btn-secondary { border-color: #cfd9e9; background: rgba(255, 255, 255, 0.76); color: #34445f; }
.solution-btn-secondary:hover { border-color: #9fb5d4; color: var(--solution-primary); }
/*次按钮右上箭头略小，与首页 home-hero-secondary 一致*/
.solution-btn-secondary i { font-size: 0.75rem; }
.solution-hero-tags { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 2rem; color: #475467; font-size: 0.84rem; }
.solution-hero-tags span { display: flex; align-items: center; gap: 0.4rem; }
.solution-hero-tags i { color: var(--solution-primary); }
/*---------- Hero 浏览器/样机示意 ----------*/
.solution-browser { position: relative; margin-left: 1rem; border-radius: 0.9rem; background: #fff; filter: drop-shadow(0 1.75rem 2.1875rem rgba(25, 43, 84, 0.17)); }
.solution-browser-bar { display: flex; align-items: center; gap: 0.4rem; height: 2.65rem; border-radius: 0.9rem 0.9rem 0 0; background: #182230; padding: 0 0.9rem; }
.solution-browser-bar > i { width: 0.48rem; height: 0.48rem; border-radius: 50%; background: #667085; }
.solution-browser-bar > i:first-child { background: #f97066; }
.solution-browser-bar > i:nth-child(2) { background: #fdb022; }
.solution-browser-bar > i:nth-child(3) { background: #32d583; }
.solution-browser-bar span { display: flex; align-items: center; gap: 0.4rem; width: 52%; margin: auto; border-radius: 0.35rem; background: #344054; padding: 0.35rem 0.65rem; color: #d0d5dd; font-size: 0.65rem; }
.solution-browser-body { display: grid; grid-template-columns: 3.2rem 1fr; min-height: 25rem; border-radius: 0 0 0.9rem 0.9rem; background: #fff; overflow: hidden; }
.solution-browser-body aside { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; background: #f2f4f7; padding: 1rem 0.6rem; }
.solution-browser-body aside b { display: grid; width: 1.7rem; height: 1.7rem; border-radius: 0.4rem; background: var(--solution-primary); place-items: center; color: #fff; }
.solution-browser-body aside i { width: 1.45rem; height: 0.3rem; border-radius: 1rem; background: #d0d5dd; }
.solution-browser-body aside i.active { background: var(--solution-primary); }
.solution-browser-body main nav { display: flex; align-items: center; gap: 1rem; height: 3.2rem; border-bottom: 1px solid #edf0f4; padding: 0 1rem; }
.solution-browser-body main nav b { margin-right: auto; font-size: 0.7rem; }
.solution-browser-body main nav span { width: 2rem; height: 0.25rem; border-radius: 1rem; background: #d0d5dd; }
.solution-browser-body main nav em { border-radius: 0.25rem; background: var(--solution-primary); padding: 0.35rem 0.55rem; color: #fff; font-size: 0.5rem; font-style: normal; }
.solution-browser-hero { min-height: 15.4rem; background: linear-gradient(135deg, color-mix(in srgb, var(--solution-primary) 6%, #fff), color-mix(in srgb, var(--solution-primary) 14%, #fff)); padding: 2rem; }
.solution-browser-hero small { color: var(--solution-primary); font-size: 0.52rem; letter-spacing: 0.15em; }
.solution-browser-hero strong { display: block; margin: 0.65rem 0; color: #172b4d; font-size: 1.55rem; line-height: 1.18; }
.solution-browser-hero p { width: 72%; color: #667085; font-size: 0.55rem; }
.solution-browser-hero button { border: 0; border-radius: 0.25rem; background: var(--solution-primary); padding: 0.5rem 0.7rem; color: #fff; font-size: 0.5rem; }
.solution-browser-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; padding: 1rem; }
.solution-browser-cards i { height: 3.2rem; border-radius: 0.35rem; background: #f2f4f7; }
.solution-mobile { position: absolute; right: -1.6rem; bottom: -2.2rem; overflow: hidden; width: 7.4rem; height: 13rem; border: 0.42rem solid #182230; border-radius: 1.15rem; background: linear-gradient(160deg, #eaf1ff, #fff); box-shadow: 0 1rem 2.25rem rgba(24, 34, 48, 0.2); padding: 1.25rem 0.65rem 0.65rem; }
.solution-mobile > span { position: absolute; top: 0.25rem; left: 50%; width: 2.5rem; height: 0.25rem; border-radius: 1rem; background: #344054; transform: translateX(-50%); }
.solution-mobile b { display: block; color: var(--solution-primary); font-size: 0.65rem; line-height: 1.15; }
.solution-mobile small { display: -webkit-box; overflow: hidden; margin: 1.25rem 0 0.6rem; font-size: 0.78rem; font-weight: 700; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.solution-mobile i { position: relative; display: block; height: 1.65rem; margin: 0.35rem 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--solution-primary) 12%, #fff); border-radius: 0.45rem; background: color-mix(in srgb, var(--solution-primary) 8%, #fff); }
.solution-mobile i::before,
.solution-mobile i::after { position: absolute; left: 0.45rem; height: 0.18rem; border-radius: 1rem; background: color-mix(in srgb, var(--solution-primary) 25%, #fff); content: ""; }
.solution-mobile i::before { top: 0.45rem; width: 55%; }
.solution-mobile i::after { top: 0.82rem; width: 35%; opacity: 0.72; }
.solution-float { position: absolute; display: flex; align-items: center; gap: 0.7rem; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 0.7rem; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0.75rem 1.75rem rgba(16, 24, 40, 0.12); padding: 0.7rem 0.85rem; }
.solution-float > i { display: grid; width: 2rem; height: 2rem; border-radius: 0.55rem; background: #eaf1ff; place-items: center; color: var(--solution-primary); }
.solution-float span { display: flex; flex-direction: column; font-size: 0.67rem; }
.solution-float b { font-weight: 600; }
.solution-float em { color: var(--solution-primary); font-style: normal; }
.solution-float-seo { top: 22%; right: -2rem; }
.solution-float-lead { bottom: 1.8rem; left: -2rem; }
.solution-hero-picture { display: block; }
.solution-hero-picture img { width: 100%; border-radius: 1rem; box-shadow: 0 1.5625rem 3.75rem rgba(16, 24, 40, 0.18); }
/*---------- 区块通用 ----------*/
.solution-section { padding: 7rem 0; }
.solution-section-head { max-width: none; margin: 0 auto 3.5rem; }
.solution-section-head-center { text-align: center; }
.solution-section-head > span { display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 0.8rem; color: var(--solution-primary); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; }
.solution-section-head > span::before { width: 2rem; height: 0.125rem; flex: 0 0 2rem; background: currentColor; content: ""; }
.solution-section-head h2 { margin: 0; color: #101828; font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 750; letter-spacing: -0.04em; }
.solution-section-head p { max-width: none; margin: 1rem auto 0; color: #667085; line-height: 1.85; }
/*区块标题与描述居中展示，描述允许自然换行以适配不同方案文案*/
.solution-section-head h2, .solution-section-head p { white-space: normal; }
/*---------- 数据指标条 ----------*/
.solution-stats { border-bottom: 1px solid var(--solution-line); background: #fff; padding: 3.25rem 0; }
.solution-stat { padding: 0.5rem 1rem; text-align: center; }
.solution-stats .row > div + div .solution-stat { border-left: 1px solid var(--solution-line); }
.solution-stat strong { display: block; color: #101828; font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 750; letter-spacing: -0.03em; line-height: 1.2; }
.solution-stat p { margin: 0.5rem 0 0; color: #667085; font-size: 0.92rem; }
/*---------- 核心能力（三列编号卡） ----------*/
.solution-cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; }
.solution-cap-card { position: relative; min-height: 13.125rem; border: 1px solid #e5ebf4; border-radius: 0.8125rem; background: #fff; padding: 1.5625rem; overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
/*右下角软色圆斑装饰*/
.solution-cap-card::after { position: absolute; right: -1.75rem; bottom: -2.5rem; width: 7.5rem; height: 7.5rem; border-radius: 50%; background: var(--solution-soft, #eff4ff); content: ""; opacity: 0.72; }
.solution-cap-card:hover { border-color: color-mix(in srgb, var(--solution-accent, var(--solution-primary)) 35%, #e5ebf4); box-shadow: 0 1.0625rem 2.125rem rgba(46, 67, 115, 0.09); transform: translateY(-0.1875rem); }
.solution-cap-card > span { display: inline-flex; min-width: 1.9375rem; height: 1.4375rem; align-items: center; justify-content: center; border-radius: 0.3125rem; background: var(--solution-soft, #eff4ff); color: var(--solution-accent, var(--solution-primary)); font-size: 0.625rem; font-weight: 700; }
/*---------- 适用场景（四卡横向焦点布局，四方案页共用；插画全部由 HTML/CSS 绘制） ----------*/
/*区块底色：柔和蓝系渐变 + 双径向光斑（保持站点蓝色系）*/
.solution-page .solution-scenes { background: radial-gradient(circle at 12% 6%, rgba(255, 255, 255, 0.95) 0 10%, transparent 34%), radial-gradient(circle at 88% 92%, rgba(125, 162, 255, 0.32), transparent 38%), linear-gradient(180deg, #f3f7ff, #e8effc) !important; }
.solution-page .solution-scene-show-grid { display: flex; align-items: stretch; gap: 0.875rem; }
/*8 场景拆为两排时，第二排与首排保持同距*/
.solution-page .solution-scene-show-grid + .solution-scene-show-grid { margin-top: 0.875rem; }
.solution-page .solution-scene-show { position: relative; display: flex; min-height: 25rem; min-width: 0; flex: 1 1 0; flex-direction: column; overflow: hidden; border: 1px solid #e2eaf7; border-radius: 1.1rem; background: #fff; padding: 1.75rem 1.5rem 1.35rem; box-shadow: 0 1.1rem 2.4rem rgba(49, 91, 154, 0.09); cursor: pointer; outline: none; transition: flex-grow 0.38s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.3s ease, transform 0.3s ease; }
.solution-page .solution-scene-show:hover { border-color: color-mix(in srgb, var(--solution-primary) 40%, transparent); box-shadow: 0 1.6rem 3rem rgba(49, 91, 154, 0.16); transform: translateY(-0.35rem); }
.solution-page .solution-scene-show:focus-visible { box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--solution-primary) 20%, transparent), 0 1.6rem 3rem rgba(49, 91, 154, 0.16); }
/*选中态（悬停/聚焦/点按）：品牌蓝渐变 + 白色文案 + 顶部光晕*/
.solution-page .solution-scene-show.is-active { flex-grow: 1.42; border-color: transparent; background: linear-gradient(152deg, color-mix(in srgb, var(--solution-primary) 90%, #fff) 0%, var(--solution-primary) 46%, color-mix(in srgb, var(--solution-primary) 68%, #101f4b) 100%); box-shadow: 0 1.5rem 3rem color-mix(in srgb, var(--solution-primary) 32%, transparent); }
.solution-page .solution-scene-show.is-active::before { position: absolute; top: -4.5rem; right: -4.5rem; width: 13rem; height: 13rem; border-radius: 50%; background: rgba(255, 255, 255, 0.16); content: ""; }
.solution-page .solution-scene-show.is-active:hover { box-shadow: 0 1.9rem 3.4rem color-mix(in srgb, var(--solution-primary) 42%, transparent); }
.solution-page .solution-scene-show > header { position: relative; z-index: 1; margin-bottom: 1.4rem; }
.solution-page .solution-scene-show h3 { margin: 0 0 0.6rem; color: #172033; font-size: 1.18rem; font-weight: 750; }
.solution-page .solution-scene-show header p { margin: 0; color: #667085; font-size: 0.8rem; line-height: 1.7; }
.solution-page .solution-scene-show.is-active h3 { color: #fff; }
.solution-page .solution-scene-show.is-active header p { color: rgba(255, 255, 255, 0.82); }
/*场景副标题 chip*/
.solution-page .solution-scene-point { display: inline-flex; align-items: center; gap: 0.28rem; margin-top: 0.8rem; border-radius: 999px; background: var(--solution-soft, #eff4ff); padding: 0.24rem 0.66rem; color: var(--solution-accent, var(--solution-primary)); font-size: 0.68rem; font-weight: 650; }
.solution-page .solution-scene-show.is-active .solution-scene-point { border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.15); color: #fff; }
/*样机画布：钉在卡片底部，元素绝对定位*/
.solution-page .solution-scene-demo { position: relative; z-index: 1; height: 13rem; margin-top: auto; }
/*--- 样机基础件：浏览器窗口 ---*/
.solution-scene-demo .scene-win { position: absolute; overflow: hidden; border: 1px solid rgba(190, 210, 241, 0.9); border-radius: 0.7rem; background: #fff; box-shadow: 0 0.9rem 1.9rem rgba(49, 91, 154, 0.16); transition: box-shadow 0.3s ease, transform 0.3s ease; }
.solution-scene-demo .scene-win-bar { display: flex; align-items: center; gap: 0.18rem; height: 1.05rem; padding: 0 0.45rem; border-bottom: 1px solid #e7edf6; background: #f8fafc; }
.solution-scene-demo .scene-win-bar > i { width: 0.24rem; height: 0.24rem; border-radius: 50%; background: #f97066; }
.solution-scene-demo .scene-win-bar > i:nth-child(2) { background: #fdb022; }
.solution-scene-demo .scene-win-bar > i:nth-child(3) { background: #32d583; }
.solution-scene-demo .scene-win-bar > span { flex: 1; height: 0.42rem; margin-left: 0.3rem; border-radius: 0.2rem; background: #eef2f8; }
.solution-scene-demo .scene-win-body { padding: 0.5rem; }
.solution-scene-demo .scene-nav { display: flex; align-items: center; gap: 0.25rem; height: 1rem; }
.solution-scene-demo .scene-nav > b { display: grid; width: 0.85rem; height: 0.85rem; margin-right: auto; place-items: center; border-radius: 0.2rem; background: var(--solution-primary); color: #fff; font-size: 0.42rem; }
.solution-scene-demo .scene-nav-plain > b { background: #98a2b3; }
.solution-scene-demo .scene-nav > i { width: 0.75rem; height: 0.12rem; border-radius: 1rem; background: #ccd5e4; }
.solution-scene-demo .scene-nav > span { width: 1.1rem; height: 0.45rem; border-radius: 0.12rem; background: var(--solution-primary); }
.solution-scene-demo .scene-line { display: block; height: 0.18rem; border-radius: 1rem; background: #c4d2e8; }
.solution-scene-demo .scene-line-lg { width: 78%; }
.solution-scene-demo .scene-line-md { width: 55%; }
.solution-scene-demo .scene-line-sm { width: 38%; }
.solution-scene-demo .scene-line-xs { width: 26%; }
.solution-scene-demo .scene-btn { display: inline-block; width: 1.9rem; height: 0.55rem; border-radius: 0.14rem; background: var(--solution-primary); }
.solution-scene-demo .scene-thumb { display: block; height: 1.15rem; border-radius: 0.2rem; background: #eef2f7; }
.solution-scene-demo .scene-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; margin-top: 0.45rem; }
.solution-scene-demo .scene-row-2 { grid-template-columns: repeat(2, 1fr); }
/*hero 区三种形态：左图右文 / 纯文案 / 居中品牌*/
.solution-scene-demo .scene-hero { margin-top: 0.4rem; border-radius: 0.35rem; background: linear-gradient(135deg, color-mix(in srgb, var(--solution-primary) 5%, #fff), color-mix(in srgb, var(--solution-primary) 11%, #fff)); }
.solution-scene-demo .scene-hero-product { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem; }
.solution-scene-demo .scene-hero-product > u { display: grid; width: 2.7rem; height: 2.7rem; flex: none; place-items: center; border-radius: 0.32rem; background: rgba(255, 255, 255, 0.8); box-shadow: 0 0.3rem 0.8rem color-mix(in srgb, var(--solution-primary) 12%, transparent); color: var(--solution-primary); font-size: 1rem; }
.solution-scene-demo .scene-hero-product > div { flex: 1; min-width: 0; }
.solution-scene-demo .scene-hero-product .scene-line { margin-bottom: 0.28rem; }
.solution-scene-demo .scene-hero-product p { display: flex; align-items: center; gap: 0.35rem; margin: 0; }
.solution-scene-demo .scene-hero-product em { width: 1.3rem; height: 0.45rem; border: 1px solid color-mix(in srgb, var(--solution-primary) 8%, #fff); border-radius: 1rem; background: #fff; }
.solution-scene-demo .scene-hero-plain { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.28rem; padding: 0.6rem 0.55rem; }
.solution-scene-demo .scene-hero-brand { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.75rem 0.6rem; }
.solution-scene-demo .scene-logo { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--solution-primary); box-shadow: 0 0.4rem 1rem color-mix(in srgb, var(--solution-primary) 30%, transparent); color: #fff; font-size: 0.85rem; }
.solution-scene-demo .scene-goods { min-width: 0; }
.solution-scene-demo .scene-goods .scene-thumb { height: 1.5rem; }
.solution-scene-demo .scene-goods .scene-line { margin-top: 0.25rem; }
/*浮动说明卡*/
.solution-scene-demo .scene-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 0.42rem; border: 1px solid rgba(214, 226, 246, 0.95); border-radius: 0.6rem; background: rgba(255, 255, 255, 0.97); padding: 0.38rem 0.55rem; box-shadow: 0 0.7rem 1.5rem rgba(49, 91, 154, 0.18); }
.solution-scene-demo .scene-chip > i { display: grid; width: 1.2rem; height: 1.2rem; flex: none; place-items: center; border-radius: 0.32rem; background: var(--solution-soft, #eff4ff); color: var(--solution-primary); font-size: 0.62rem; }
.solution-scene-demo .scene-chip > span { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.2; }
.solution-scene-demo .scene-chip b { color: #172033; font-size: 0.52rem; font-weight: 700; white-space: nowrap; }
.solution-scene-demo .scene-chip em { color: #8a97ab; font-size: 0.44rem; font-style: normal; white-space: nowrap; }
.solution-scene-demo .scene-chip-tr { top: 0; right: 0; }
.solution-scene-demo .scene-chip-tl { top: 0; left: 0; }
.solution-scene-demo .scene-chip-br { right: 0; bottom: 0; }
.solution-scene-demo .scene-chip-bl { bottom: 0; left: 0; }
/*--- 各场景构图 ---*/
/*新品验证 / 多区域 / 规模化：主窗口居中下锚*/
.solution-scene-demo .scene-win-main { top: 1.7rem; right: 5%; bottom: 0; left: 5%; }
.solution-page .solution-scene-show:hover .scene-win-main { transform: translateY(-0.2rem); }
/*社媒承接：后置落地页窗口 + 前置手机帖*/
.solution-scene-demo .scene-win-back { top: 0.4rem; right: 0; width: 66%; }
.solution-scene-demo .scene-phone { position: absolute; z-index: 2; bottom: 0; left: 1%; width: 4.4rem; overflow: hidden; border: 1px solid #d7e2f3; border-radius: 0.8rem; background: #fff; box-shadow: 0 1rem 2rem rgba(49, 91, 154, 0.2); }
.solution-scene-demo .scene-phone-notch { height: 0.8rem; }
.solution-scene-demo .scene-phone-notch::after { display: block; width: 1.2rem; height: 0.22rem; margin: 0.3rem auto 0; border-radius: 1rem; background: #e2e9f4; content: ""; }
.solution-scene-demo .scene-phone-screen { padding: 0.1rem 0.4rem 0.5rem; }
.solution-scene-demo .scene-post-head { display: flex; align-items: center; gap: 0.3rem; margin: 0.1rem 0 0.35rem; }
.solution-scene-demo .scene-post-head > b { width: 0.7rem; height: 0.7rem; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--solution-primary), color-mix(in srgb, var(--solution-primary) 60%, #fff)); }
.solution-scene-demo .scene-post-head .scene-line { flex: 1; }
.solution-scene-demo .scene-post-photo { display: grid; height: 3.4rem; place-items: center; border-radius: 0.35rem; background: linear-gradient(135deg, color-mix(in srgb, var(--solution-primary) 5%, #fff), color-mix(in srgb, var(--solution-primary) 11%, #fff)); color: var(--solution-primary); font-size: 1rem; }
.solution-scene-demo .scene-post-actions { display: flex; gap: 0.4rem; margin-top: 0.35rem; color: #b7c4d8; font-size: 0.5rem; }
.solution-scene-demo .scene-post-actions i:first-child { color: #f97066; }
/*渠道拓展：平台店铺与独立站双窗口 + 中心互换徽标*/
.solution-scene-demo .scene-win-half { top: 1.9rem; bottom: 0.9rem; width: 47%; }
.solution-scene-demo .scene-win-platform { left: 0; }
.solution-scene-demo .scene-win-own { right: 0; z-index: 1; }
.solution-scene-demo .scene-swap { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border: 2px solid #fff; border-radius: 50%; background: var(--solution-primary); box-shadow: 0 0.5rem 1.1rem color-mix(in srgb, var(--solution-primary) 35%, transparent); color: #fff; font-size: 0.75rem; transform: translate(-50%, -50%); }
/*B2B 询盘：询盘表单（标签线 + 输入条 + 提交按钮）*/
.solution-scene-demo .scene-form { display: flex; flex-direction: column; gap: 0.38rem; margin-top: 0.55rem; }
.solution-scene-demo .scene-form > p { display: flex; align-items: center; gap: 0.35rem; margin: 0; }
.solution-scene-demo .scene-form > p > span { width: 22%; flex: none; }
.solution-scene-demo .scene-form > p > i { flex: 1; height: 0.5rem; border: 1px solid color-mix(in srgb, var(--solution-primary) 8%, #fff); border-radius: 0.14rem; background: #fff; }
.solution-scene-demo .scene-form > p > i.scene-form-text { height: 0.95rem; }
.solution-scene-demo .scene-form-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.15rem; }
/*会员复购：会员卡（头像 + 等级进度条） + 双优惠券*/
.solution-scene-demo .scene-member { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.5rem; border-radius: 0.35rem; background: linear-gradient(135deg, color-mix(in srgb, var(--solution-primary) 5%, #fff), color-mix(in srgb, var(--solution-primary) 11%, #fff)); padding: 0.55rem; }
.solution-scene-demo .scene-avatar { display: grid; width: 2rem; height: 2rem; flex: none; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 0.3rem 0.8rem color-mix(in srgb, var(--solution-primary) 12%, transparent); color: var(--solution-primary); font-size: 0.85rem; }
.solution-scene-demo .scene-member-info { flex: 1; min-width: 0; }
.solution-scene-demo .scene-level { height: 0.32rem; margin-top: 0.35rem; overflow: hidden; border-radius: 1rem; background: rgba(255, 255, 255, 0.85); }
.solution-scene-demo .scene-level > i { display: block; width: 68%; height: 100%; border-radius: 1rem; background: linear-gradient(90deg, var(--solution-primary), color-mix(in srgb, var(--solution-primary) 60%, #fff)); }
.solution-scene-demo .scene-coupons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.3rem; margin-top: 0.45rem; }
.solution-scene-demo .scene-coupon { position: relative; height: 1.1rem; border: 1px dashed color-mix(in srgb, var(--solution-primary) 45%, #fff); border-radius: 0.25rem; background: color-mix(in srgb, var(--solution-primary) 7%, #fff); }
.solution-scene-demo .scene-coupon::before { position: absolute; top: 50%; left: 0.45rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--solution-primary); content: ""; opacity: 0.75; transform: translateY(-50%); }
.solution-scene-demo .scene-coupon::after { position: absolute; top: 50%; right: 0.4rem; left: 1.1rem; height: 0.14rem; border-radius: 1rem; background: #c4d2e8; content: ""; transform: translateY(-50%); }
/*AI 生成（site_build）：提示词输入条（文案线 + 生成按钮）*/
.solution-scene-demo .scene-prompt { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.45rem; border: 1px solid color-mix(in srgb, var(--solution-primary) 8%, #fff); border-radius: 0.35rem; background: #fff; padding: 0.3rem 0.35rem 0.3rem 0.5rem; box-shadow: 0 0.4rem 1rem color-mix(in srgb, var(--solution-primary) 8%, transparent); }
.solution-scene-demo .scene-prompt .scene-line { flex: 1; }
.solution-scene-demo .scene-btn-ai { display: grid; width: 1.5rem; height: 0.85rem; flex: none; place-items: center; color: #fff; font-size: 0.5rem; }
/*内容列表（site_build/official_web/global_site 资讯、公告与 SEO 场景共用）：行卡片（缩略块 + 双文案线）*/
.solution-scene-demo .scene-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.solution-scene-demo .scene-list > p { display: flex; align-items: center; gap: 0.45rem; margin: 0; border: 1px solid #e7edf6; border-radius: 0.3rem; background: #f8fafc; padding: 0.3rem 0.4rem; }
.solution-scene-demo .scene-list .scene-thumb { width: 1.2rem; height: 0.9rem; flex: none; }
.solution-scene-demo .scene-list > p > span { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 0.18rem; }
/*移动优先（site_build）：手机屏内文案线组（替代社媒动作行）*/
.solution-scene-demo .scene-phone-lines { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.35rem; }
/*品牌商城：居中旗舰店窗口*/
.solution-scene-demo .scene-win-brand { top: 1.9rem; right: 9%; bottom: 0; left: 9%; }
.solution-page .solution-scene-show:hover .scene-win-brand { transform: translateY(-0.2rem); }
/*多区域：币种圆片 + 地球仪浮标*/
.solution-scene-demo .scene-coins { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.45rem; }
.solution-scene-demo .scene-coins > span { display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border: 1px solid color-mix(in srgb, var(--solution-primary) 8%, #fff); border-radius: 50%; background: #fff; box-shadow: 0 0.2rem 0.5rem rgba(49, 91, 154, 0.1); color: var(--solution-primary); font-size: 0.6rem; font-weight: 700; }
.solution-scene-demo .scene-coins > .scene-line { flex: 1; margin-left: 0.2rem; }
.solution-scene-demo .scene-globe { position: absolute; z-index: 2; top: 0.2rem; right: 1%; display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(135deg, var(--solution-primary), color-mix(in srgb, var(--solution-primary) 65%, #fff)); box-shadow: 0 0.7rem 1.5rem color-mix(in srgb, var(--solution-primary) 32%, transparent); color: #fff; font-size: 1rem; }
.solution-scene-demo .scene-globe::after { position: absolute; right: -0.18rem; bottom: 0.05rem; width: 0.5rem; height: 0.5rem; border: 2px solid #fff; border-radius: 50%; background: #fdb022; content: ""; }
/*规模化：看板窗口（侧栏 + 指标 + 柱状图）*/
.solution-scene-demo .scene-dash-body { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.5rem; }
.solution-scene-demo .scene-side { display: flex; flex-direction: column; align-items: center; gap: 0.32rem; border-right: 1px solid #e7edf6; padding-right: 0.4rem; }
.solution-scene-demo .scene-side > b { display: grid; width: 0.9rem; height: 0.9rem; margin-bottom: 0.15rem; place-items: center; border-radius: 0.22rem; background: var(--solution-primary); color: #fff; font-size: 0.44rem; }
.solution-scene-demo .scene-side > i { width: 100%; height: 0.16rem; border-radius: 1rem; background: #d7e0ee; }
.solution-scene-demo .scene-side > i.active { background: var(--solution-primary); }
.solution-scene-demo .scene-dash-main { min-width: 0; }
.solution-scene-demo .scene-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
.solution-scene-demo .scene-stats > u { display: block; border: 1px solid #e7edf6; border-radius: 0.3rem; background: #f8fafc; padding: 0.3rem; }
.solution-scene-demo .scene-stats b { display: block; width: 60%; height: 0.3rem; margin-bottom: 0.22rem; border-radius: 1rem; background: #9db8e5; }
.solution-scene-demo .scene-bars { display: flex; align-items: flex-end; gap: 0.35rem; height: 2.6rem; margin-top: 0.5rem; padding: 0 0.1rem; }
.solution-scene-demo .scene-bars > i { flex: 1; border-radius: 0.12rem 0.12rem 0 0; background: color-mix(in srgb, var(--solution-primary) 22%, #fff); }
.solution-scene-demo .scene-bars > i:nth-child(1) { height: 38%; }
.solution-scene-demo .scene-bars > i:nth-child(2) { height: 56%; }
.solution-scene-demo .scene-bars > i:nth-child(3) { height: 46%; }
.solution-scene-demo .scene-bars > i:nth-child(4) { height: 72%; background: color-mix(in srgb, var(--solution-primary) 45%, #fff); }
.solution-scene-demo .scene-bars > i:nth-child(5) { height: 92%; background: var(--solution-primary); }
/*迷你胶囊:小图标 + 单行小字(orbit 环绕节点/tiles 瓦片共用基底)*/
.solution-scene-demo .scene-dot { display: inline-flex; align-items: center; gap: 0.28rem; border: 1px solid #e7edf6; border-radius: 1rem; background: #fff; padding: 0.2rem 0.5rem; box-shadow: 0 0.25rem 0.6rem rgba(49, 91, 154, 0.1); color: #475467; font-size: 0.44rem; font-weight: 600; white-space: nowrap; }
.solution-scene-demo .scene-dot > i { color: var(--solution-primary); font-size: 0.55rem; }
/*中心枢纽:中心图标 + 虚线轨道 + 环绕 4~6 节点(生态环绕/AI 能力辐射/服务矩阵)*/
.solution-scene-demo .scene-orbit-body { display: grid; place-items: center; }
.solution-scene-demo .scene-orbit { position: relative; width: 8.6rem; height: 8.6rem; margin-top: 0.2rem; }
.solution-scene-demo .scene-orbit::before { position: absolute; inset: 1.5rem; border: 1px dashed color-mix(in srgb, var(--solution-primary) 40%, #fff); border-radius: 50%; content: ""; }
.solution-scene-demo .scene-orbit-hub { position: absolute; top: 50%; left: 50%; display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(135deg, var(--solution-primary), color-mix(in srgb, var(--solution-primary) 60%, #fff)); box-shadow: 0 0.6rem 1.3rem color-mix(in srgb, var(--solution-primary) 35%, transparent); color: #fff; font-size: 1rem; transform: translate(-50%, -50%); }
.solution-scene-demo .scene-orbit-node { position: absolute; transform: translate(-50%, -50%); }
.solution-scene-demo span.scene-orbit-node:nth-of-type(1) { top: 8%; left: 50%; }
.solution-scene-demo span.scene-orbit-node:nth-of-type(2) { top: 30%; left: 90%; }
.solution-scene-demo span.scene-orbit-node:nth-of-type(3) { top: 70%; left: 90%; }
.solution-scene-demo span.scene-orbit-node:nth-of-type(4) { top: 92%; left: 50%; }
.solution-scene-demo span.scene-orbit-node:nth-of-type(5) { top: 70%; left: 10%; }
.solution-scene-demo span.scene-orbit-node:nth-of-type(6) { top: 30%; left: 10%; }
/*地图路线:仿地图网格 + 虚线路线 + 双定位针 + 移动徽标(出行交通/文旅导览/门店分布)*/
.solution-scene-demo .scene-map-body { padding: 0; }
.solution-scene-demo .scene-map { position: relative; height: 9.2rem; overflow: hidden; background: repeating-linear-gradient(0deg, transparent 0 1.1rem, #e8eef7 1.1rem calc(1.1rem + 1px)), repeating-linear-gradient(90deg, transparent 0 1.1rem, #e8eef7 1.1rem calc(1.1rem + 1px)), color-mix(in srgb, var(--solution-primary) 5%, #f6f9fd); }
.solution-scene-demo .scene-map-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.solution-scene-demo .scene-map-route path { fill: none; opacity: 0.85; stroke: var(--solution-primary); stroke-dasharray: 5 4; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.solution-scene-demo .scene-map-pin { position: absolute; z-index: 1; color: var(--solution-primary); font-size: 0.9rem; filter: drop-shadow(0 0.15rem 0.25rem rgba(49, 91, 154, 0.35)); transform: translate(-50%, -90%); }
.solution-scene-demo .scene-map-pin-a { top: 78%; left: 9%; }
.solution-scene-demo .scene-map-pin-b { top: 26%; left: 91%; }
.solution-scene-demo .scene-map-bus { position: absolute; z-index: 2; top: 55%; left: 47%; display: grid; width: 1.5rem; height: 1.5rem; place-items: center; border: 2px solid #fff; border-radius: 50%; background: var(--solution-primary); box-shadow: 0 0.4rem 0.9rem color-mix(in srgb, var(--solution-primary) 35%, transparent); color: #fff; font-size: 0.65rem; transform: translate(-50%, -50%); }
/*图标宫格:4 格一行(超 4 个转 3×2)图标+文字瓦片(功能矩阵/便民服务/经营模块)*/
.solution-scene-demo .scene-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin-top: 0.5rem; }
.solution-scene-demo .scene-tiles-6 { grid-template-columns: repeat(3, 1fr); }
.solution-scene-demo .scene-tile { flex-direction: column; justify-content: center; gap: 0.3rem; padding: 0.55rem 0.3rem; border-radius: 0.35rem; text-align: center; white-space: normal; }
.solution-scene-demo .scene-tile > i { font-size: 0.95rem; }
/*直播场景:深色直播间手机(观看人数胶囊/弹幕行/礼物行)*/
.solution-scene-demo .scene-phone-live { border-color: #344054; }
.solution-scene-demo .scene-live-screen { background: linear-gradient(160deg, #1d2939, #344054); }
.solution-scene-demo .scene-live-head { display: flex; align-items: center; gap: 0.3rem; margin: 0.1rem 0 0.3rem; }
.solution-scene-demo .scene-live-head > b { display: grid; width: 0.95rem; height: 0.95rem; flex: none; place-items: center; border-radius: 50%; background: var(--solution-primary); color: #fff; font-size: 0.5rem; }
.solution-scene-demo .scene-live-head > span { display: inline-flex; align-items: center; gap: 0.15rem; border-radius: 1rem; background: rgba(255, 255, 255, 0.16); padding: 0.08rem 0.3rem; color: #fff; font-size: 0.4rem; }
.solution-scene-demo .scene-live-barrages { display: flex; min-height: 2.7rem; flex-direction: column; align-items: flex-start; gap: 0.22rem; }
.solution-scene-demo .scene-live-barrages > span { max-width: 92%; overflow: hidden; border-radius: 1rem; background: rgba(255, 255, 255, 0.14); padding: 0.12rem 0.35rem; color: rgba(255, 255, 255, 0.92); font-size: 0.4rem; text-overflow: ellipsis; white-space: nowrap; }
.solution-scene-demo .scene-live-actions { display: flex; gap: 0.35rem; margin-top: 0.3rem; font-size: 0.5rem; }
.solution-scene-demo .scene-live-actions i { color: rgba(255, 255, 255, 0.75); }
.solution-scene-demo .scene-live-actions i:first-child { color: #f97066; }
.solution-scene-demo .scene-live-actions i:nth-child(2) { color: #fdb022; }
/*插画图:等距/手绘插画直出(区块项 image_ 字段)*/
.solution-scene-demo .scene-image { position: absolute; inset: 0.3rem 6% 0; display: grid; place-items: center; }
.solution-scene-demo .scene-image > img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 0.8rem 1.6rem rgba(49, 91, 154, 0.18)); }
@media (max-width: 991px) {
  .solution-page .solution-scene-show-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solution-page .solution-scene-show { min-height: 24rem; }
  .solution-page .solution-scene-demo { height: 12rem; }
}
@media (max-width: 575px) {
  .solution-page .solution-scene-show-grid { grid-template-columns: 1fr; }
  .solution-page .solution-scene-show { min-height: 22rem; padding: 1.4rem 1.4rem 1.25rem; }
  .solution-page .solution-scene-demo { height: 11rem; }
}
@media (prefers-reduced-motion: reduce) {
  .solution-page .solution-scene-show,
  .solution-scene-demo .scene-win { transition: none; }
}
.solution-cap-card h3 { position: relative; z-index: 1; margin: 2.1875rem 0 0.625rem; color: #172033; font-size: 1.125rem; font-weight: 650; }
.solution-cap-card p { position: relative; z-index: 1; max-width: 16.25rem; margin: 0; color: #667085; font-size: 0.8125rem; line-height: 1.75; }
/*右下角软色圆斑上的能力小图标（数据 badge_ 字段，模板 10.181 起渲染）*/
.solution-cap-icon { position: absolute; right: 1.0625rem; bottom: 0.375rem; z-index: 1; color: var(--solution-accent, var(--solution-primary)); font-size: 1.75rem; opacity: 0.85; }
/*---------- 服务流程（白底，与前后蓝底区块交替；卡片与连接符交付区块） ----------*/
.solution-section.solution-process { background: #fff !important; }
.solution-process-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.375rem; }
.solution-process-card { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 10.5rem; border: 1px solid var(--solution-line); border-radius: 1rem; background: #fff; padding: 1.625rem 1rem 1.5rem; text-align: center; box-shadow: 0 0.75rem 2rem rgba(47, 83, 139, 0.06); transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; }
.solution-process-card:hover { border-color: color-mix(in srgb, var(--solution-primary) 35%, transparent); box-shadow: 0 1.25rem 2.5rem rgba(47, 83, 139, 0.1); transform: translateY(-0.25rem); }
.solution-process-card > span { display: grid; width: 2.5rem; height: 2.5rem; margin: 0 auto 0.875rem; border-radius: 50%; background: linear-gradient(135deg, color-mix(in srgb, var(--solution-primary) 75%, #000), var(--solution-primary)); place-items: center; color: #fff; font-size: 0.85rem; font-weight: 700; box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--solution-primary) 30%, transparent); }
.solution-process-card h3 { margin: 0 0 0.4375rem; font-size: 1rem; }
.solution-process-card p { margin: 0; color: #667085; font-size: 0.78rem; line-height: 1.65; }
/*步骤间连接符：小箭头置于卡片间隙垂直居中，不压卡片*/
@media (min-width: 1200px) {
  .solution-process-card:not(:last-child)::after { position: absolute; top: 50%; right: -0.9375rem; width: 0.45rem; height: 0.45rem; border-top: 2px solid var(--solution-primary); border-right: 2px solid var(--solution-primary); content: ""; transform: translateY(-50%) rotate(45deg); }
}
/*---------- 我们优势（3×2 编号卡：左上序号 + 右上软色图标 + 底部统计行） ----------*/
.solution-why-card { position: relative; display: flex; height: 100%; min-height: 15.5rem; flex-direction: column; border: 1px solid #e2e9f4; border-radius: 1rem; background: #fff; padding: 1.625rem; box-shadow: 0 0.875rem 2.25rem rgba(47, 83, 139, 0.07); transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; }
.solution-why-card:hover { border-color: color-mix(in srgb, var(--solution-primary) 35%, transparent); box-shadow: 0 1.25rem 2.5rem rgba(47, 83, 139, 0.1); transform: translateY(-0.3125rem); }
/*左上两位序号，浅灰蓝弱装饰*/
.solution-why-num { color: #b6c3d6; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.08em; }
/*右上软色圆角图标块*/
.solution-why-icon { position: absolute; top: 1.25rem; right: 1.25rem; display: grid; width: 2.875rem; height: 2.875rem; border-radius: 0.8125rem; background: var(--solution-soft, #eff4ff); place-items: center; color: var(--solution-primary); font-size: 1.15rem; }
.solution-why-card h3 { margin: 1.625rem 0 0.625rem; color: #172033; font-size: 1.125rem; font-weight: 700; }
.solution-why-card p { margin: 0 0 1.5rem; color: #667085; font-size: 0.875rem; line-height: 1.75; }
/*底部统计行：分隔线之上，加粗词用主题蓝，小字标签灰蓝*/
.solution-why-stat { display: flex; align-items: baseline; gap: 0.5rem; margin-top: auto; border-top: 1px solid #eef2f8; padding-top: 1.05rem; }
.solution-why-stat strong { color: var(--solution-primary); font-size: 1rem; font-weight: 750; }
.solution-why-stat small { color: #8a97ab; font-size: 0.75rem; }
/*---------- CTA ----------*/
/*背景对齐产品/服务页底部区块（inc_style.css .builder-final-cta）：120° 蓝→亮蓝→青三段渐变，中段跟随方案主题色*/
.solution-cta { position: relative; background: linear-gradient(120deg, color-mix(in srgb, var(--solution-primary) 85%, #000), var(--solution-primary) 55%, color-mix(in srgb, var(--solution-primary) 65%, #fff)); padding: 7rem 0; text-align: center; color: #fff; overflow: hidden; }
.solution-cta-grid { background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px); mask-image: radial-gradient(circle, #000, transparent 75%); }
.solution-cta span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; }
.solution-cta h2 { margin: 1rem 0 0.4rem; font-size: clamp(2rem, 4vw, 3.3rem); font-weight: 750; }
.solution-cta h3 { font-size: 1.1rem; }
.solution-cta p { max-width: 42rem; margin: 1rem auto; color: rgba(255, 255, 255, 0.75); line-height: 1.8; }
.solution-btn-light { background: #fff; color: var(--solution-primary); }
.solution-btn-light:hover { color: color-mix(in srgb, var(--solution-primary) 75%, #000); box-shadow: 0 1rem 1.875rem rgba(2, 12, 40, 0.35); }
.solution-btn-outline-light { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.solution-btn-outline-light:hover { border-color: #fff; }
.solution-btn-outline-light i { font-size: 0.75rem; }
/*---------- 缺失提示 ----------*/
.solution-missing { padding: 10rem 0; text-align: center; }
.solution-missing i { color: var(--solution-primary); font-size: 3rem; }
/*---------- 滚动显现 ----------*/
.solution-reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.65s ease, transform 0.65s ease; }
.solution-reveal.is-visible { opacity: 1; transform: none; }
/*==================== 响应式（基础） ====================*/
@media (max-width: 1199.98px) {
  .solution-anchor-scroll { gap: 1.1rem; }
  .solution-browser { margin-right: 1.5rem; }
  .solution-cap-grid { grid-template-columns: repeat(2, 1fr); }
  .solution-process-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991.98px) {
  .solution-anchor-nav { top: 0; }
  .solution-anchor-scroll { min-height: 3.6rem; }
  .solution-anchor-nav a::after { bottom: -1.15rem; }
  .solution-hero { padding-bottom: 5rem; }
  .solution-hero .common-breadcrumb { margin-bottom: 2.8rem; }
  .solution-browser { max-width: 44rem; margin: 1rem auto 2rem; }
  .solution-section { padding: 5rem 0; }
  .solution-stats { padding: 2.25rem 0; }
  .solution-stats .row > div:nth-child(odd) .solution-stat { border-left: 0; }
  .solution-stats .row > div:nth-child(n + 3) .solution-stat { padding-top: 1.5rem; }
  .solution-process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .solution-anchor-scroll { gap: 1rem; }
  .solution-anchor-cta { display: none; }
  .solution-hero { padding-top: 2rem; }
  .solution-hero .common-breadcrumb { margin-bottom: 2rem; }
  .solution-hero h1 { font-size: 2.55rem; }
  .solution-hero-lead { font-size: 0.95rem; }
  .solution-actions { display: grid; grid-template-columns: 1fr; }
  .solution-hero-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .solution-browser { margin-right: 1rem; margin-left: 0; }
  .solution-browser-body { grid-template-columns: 2.5rem 1fr; min-height: 20rem; }
  .solution-browser-body main nav span { display: none; }
  .solution-browser-hero { min-height: 12rem; padding: 1.25rem; }
  .solution-browser-hero strong { font-size: 1.2rem; }
  .solution-browser-cards { padding: 0.65rem; }
  .solution-mobile { right: -1rem; width: 5.5rem; height: 10rem; border-width: 0.32rem; border-radius: 0.9rem; padding: 1rem 0.45rem 0.45rem; }
  .solution-mobile small { margin: 0.75rem 0 0.4rem; font-size: 0.62rem; }
  .solution-mobile i { height: 1.15rem; margin: 0.25rem 0; border-radius: 0.3rem; }
  .solution-mobile i::before { top: 0.3rem; left: 0.3rem; height: 0.12rem; }
  .solution-mobile i::after { top: 0.58rem; left: 0.3rem; height: 0.12rem; }
  .solution-float { display: none; }
  .solution-section { padding: 4rem 0; }
  .solution-section-head { margin-bottom: 2.5rem; }
  .solution-section-head h2 { font-size: 2rem; }
  .solution-section-head h2, .solution-section-head p { white-space: normal; }
  .solution-cap-grid { grid-template-columns: 1fr; }
  .solution-cap-card { min-height: 11rem; padding: 1.3125rem; }
  .solution-cap-card h3 { margin-top: 1.625rem; }
  .solution-why-card { min-height: 13rem; padding: 1.375rem; }
  .solution-stats .row > div .solution-stat { border-left: 0; }
  .solution-stats .row > div:nth-child(n + 3) .solution-stat { padding-top: 1.25rem; }
  .solution-process-grid { grid-template-columns: 1fr; }
  .solution-cta { padding: 5rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  .solution-reveal { opacity: 1; transform: none; transition: none; }
  .solution-page * { scroll-behavior: auto !important; }
}
/*============================================================
 * 精修覆盖层（原 channel_solution_detail_refine.css）
 * 以下规则与基础层同名不同体，依赖在后顺序覆盖，勿提前或合并。
 * ============================================================*/
/*---------- 锚点导航（吸顶增强） ----------*/
.solution-anchor-sentinel { width: 100%; height: 0; }
.solution-anchor-nav { position: sticky; top: var(--tncms-header-height); z-index: 1015; height: 4.375rem; border-top: 0; border-bottom: 1px solid #e5ebf4; background: rgba(255, 255, 255, 0.96); box-shadow: 0 0.438rem 1.25rem rgba(31, 55, 91, 0.04); backdrop-filter: blur(0.75rem); transition: top 0.28s ease, box-shadow 0.28s ease; }
.solution-anchor-nav .container,
.solution-anchor-scroll { height: 100%; }
.solution-anchor-scroll { display: flex; align-items: center; gap: 1.25rem; overflow: hidden; }
.solution-anchor-brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.75rem; padding-right: 1.25rem; border-right: 1px solid #dde4ef; color: #202b3d; white-space: nowrap; }
/*LOGO 默认隐藏，滚动吸顶（.solution-nav-docked）后与标题一起展示*/
.solution-anchor-logo { display: block; width: auto; max-width: 0; height: 2.5rem; flex: 0 0 auto; object-fit: contain; object-position: left center; opacity: 0; visibility: hidden; transform: translateY(-0.4rem); transition: max-width .28s ease, opacity .2s ease, transform .28s ease, visibility .2s; }
.solution-nav-docked .solution-anchor-logo { max-width: 10.5rem; opacity: 1; visibility: visible; transform: none; }
.solution-anchor-title { color: #172033; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; }
.solution-anchor-brand:hover,
.solution-anchor-brand:focus-visible { color: var(--solution-primary); }
.solution-anchor-brand:hover .solution-anchor-title,
.solution-anchor-brand:focus-visible .solution-anchor-title { color: var(--solution-primary); }
.solution-anchor-links { display: flex; min-width: 0; height: 100%; flex: 1 1 auto; align-items: stretch; gap: 1.65rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.solution-anchor-links::-webkit-scrollbar { display: none; }
.solution-anchor-links a { position: relative; display: flex; flex: 0 0 auto; align-items: center; padding: 0; color: #65738a; font-size: 0.86rem; white-space: nowrap; transition: color 0.2s ease; }
.solution-anchor-links a::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 0.125rem; background: var(--solution-primary); transform: scaleX(0); transform-origin: center; transition: transform 0.2s ease; }
.solution-anchor-links a:hover,
.solution-anchor-links a:focus-visible,
.solution-anchor-links a.active { color: var(--solution-primary); }
.solution-anchor-links a.active::after { transform: scaleX(1); }
.solution-anchor-nav .solution-anchor-cta { display: inline-flex; max-width: 0; min-height: 2.75rem; flex: 0 0 auto; align-items: center; gap: 0.5rem; margin-left: auto; padding: 0.562rem 0; overflow: hidden; border-radius: 62.438rem; background: var(--solution-primary); color: #fff; font-size: 0.8rem; font-weight: 700; opacity: 0; visibility: hidden; white-space: nowrap; transform: translateY(-0.5rem); transition: max-width 0.28s ease, padding 0.28s ease, opacity 0.2s ease, transform 0.28s ease, visibility 0.2s ease; }
.solution-anchor-nav .solution-anchor-cta:hover,
.solution-anchor-nav .solution-anchor-cta:focus-visible { color: #fff; filter: brightness(0.94); }
/*吸顶后隐藏公共头（.tncms-header 样式在 inc_style.css，此处仅按页面状态开关）*/
.solution-nav-docked .tncms-header { opacity: 0; pointer-events: none; transform: translateY(-100%); }
.solution-nav-docked .solution-anchor-sentinel { height: 4.375rem; }
.solution-nav-docked .solution-anchor-nav { position: fixed; top: 0; right: 0; left: 0; z-index: 1040; box-shadow: 0 0.5rem 1.5rem rgba(31, 55, 91, 0.1); }
.solution-nav-docked .solution-anchor-nav .solution-anchor-cta { max-width: 10rem; padding: 0.562rem 1.375rem; opacity: 1; visibility: visible; transform: none; }
.solution-nav-docked .solution-page [id] { scroll-margin-top: 5.625rem; }
/*---------- 区块色调 ----------*/
.solution-section.solution-section-blue { background: #eef5ff !important; }
.solution-section.solution-section-white { background: #fff !important; }
/*---------- 响应式（精修） ----------*/
@media (max-width: 991.98px) {
  .solution-anchor-nav { top: var(--tncms-header-height); }
  .solution-anchor-scroll { gap: 0.875rem; }
  .solution-anchor-brand { padding-right: 0.875rem; }
  .solution-nav-docked .solution-anchor-logo { height: 2.25rem; }
  .solution-anchor-title { font-size: 0.96rem; }
  .solution-anchor-links { gap: 1.25rem; }
  .solution-nav-docked .solution-anchor-nav .solution-anchor-cta { display: none; }
}
@media (max-width: 575.98px) {
  .solution-hero h1 { font-size: 2.25rem; letter-spacing: -0.01em; line-height: 1.3; }
  .solution-anchor-nav { height: 3.875rem; }
  .solution-nav-docked .solution-anchor-sentinel { height: 3.875rem; }
  .solution-anchor-brand { padding-right: 0.75rem; }
  .solution-nav-docked .solution-anchor-logo { height: 2rem; }
  .solution-nav-docked .solution-anchor-brand { gap: 0; padding-right: 0.65rem; font-size: 0; }
  .solution-nav-docked .solution-anchor-logo { max-width: 4.5rem; height: 1.65rem; }
  .solution-anchor-links { gap: 0.85rem; scroll-snap-type: x proximity; mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 1.25rem), transparent 100%); }
  .solution-anchor-links a { font-size: 0.8rem; scroll-snap-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .solution-anchor-nav,
  .solution-anchor-nav .solution-anchor-cta,
  .solution-anchor-links a::after { transition: none; }
}
/*============================================================*/
/*方案页整页视觉层(原 solution-page-website 门户建站变体,10.199 起提升为全部方案页通用,*/
/*优先级靠类名叠加,高于基础层同名规则)。*/
/*============================================================*/
.solution-page .solution-hero { min-height: 43rem; padding: 2.25rem 0 5.5rem; overflow: hidden; background: radial-gradient(circle at 88% 24%, color-mix(in srgb, var(--solution-primary) 20%, transparent), transparent 22rem),
    radial-gradient(circle at 28% 88%, color-mix(in srgb, var(--solution-primary) 10%, transparent), transparent 18rem),
    linear-gradient(135deg, color-mix(in srgb, var(--solution-primary) 2%, #fff) 0%, color-mix(in srgb, var(--solution-primary) 5%, #fff) 55%, color-mix(in srgb, var(--solution-primary) 2%, #fff) 100%); }
.solution-page .solution-hero-grid { opacity: 0.55; background-size: 5.25rem 5.25rem; }
.solution-page .solution-hero .common-breadcrumb { margin-bottom: 4.25rem; }
.solution-page .solution-eyebrow { border-color: color-mix(in srgb, var(--solution-primary) 20%, transparent); background: rgba(255, 255, 255, 0.78); box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--solution-primary) 7%, transparent); backdrop-filter: blur(0.75rem); }
.solution-page .solution-hero h1 { max-width: 42rem; color: #101828; font-size: clamp(2.65rem, 4vw, 3.35rem); line-height: 1.3; }
.solution-page .solution-hero h2 { margin-top: 0.75rem; color: var(--solution-primary); font-size: clamp(1.35rem, 1.7vw, 1.75rem); }
.solution-page .solution-hero-lead { max-width: 40rem; margin-top: 1.5rem; color: #526077; font-size: 1.05rem; line-height: 1.9; }
.solution-page .solution-browser { border: 0.0625rem solid rgba(255, 255, 255, 0.85); border-radius: 0.95rem; box-shadow: 0 2.25rem 5rem rgba(30, 55, 105, 0.22); transform: perspective(80rem) rotateY(-2deg) rotateX(1deg); transition: transform 0.45s ease, box-shadow 0.45s ease; }
.solution-page .solution-browser:hover { box-shadow: 0 2.75rem 5.5rem rgba(30, 55, 105, 0.27); transform: perspective(80rem) rotateY(0) rotateX(0) translateY(-0.35rem); }
.solution-page .solution-anchor-links { justify-content: flex-start; gap: clamp(1rem, 2vw, 2rem); }
.solution-page .solution-anchor-links a { font-size: 0.9rem; font-weight: 500; }
.solution-page .solution-section { padding-top: 7.5rem; padding-bottom: 7.5rem; }
.solution-page .solution-section-head > span { letter-spacing: 0.14em; }
.solution-page .solution-section-head h2 { max-width: none; margin-right: auto; margin-left: auto; font-size: clamp(2.25rem, 3vw, 3.25rem); letter-spacing: -0.035em; }
.solution-page .solution-why-card,
.solution-page .solution-cap-card { transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.3s ease; }
.solution-page .solution-why-card:hover,
.solution-page .solution-cap-card:hover { border-color: color-mix(in srgb, var(--solution-primary) 30%, transparent); box-shadow: 0 1.5rem 3.5rem rgba(37, 69, 124, 0.13); transform: translateY(-0.45rem); }
.solution-page .solution-cap-grid { gap: 1.25rem; }
.solution-page .solution-cap-card { border-color: #e2e9f4; border-radius: 1.25rem; }
/*建站系方案底部 CTA 不再使用深色覆盖，统一为产品页同款明亮渐变，仅保留更大的上下留白*/
.solution-page .solution-cta { padding: 7.5rem 0; }
@media (max-width: 1199.98px) {
  .solution-page .solution-anchor-links { justify-content: flex-start; }
}
@media (max-width: 991.98px) {
  .solution-page .solution-hero { min-height: auto; }
  .solution-page .solution-browser { transform: none; }
  .solution-page .solution-section { padding-top: 6rem; padding-bottom: 6rem; }
}
@media (max-width: 767.98px) {
  .solution-page .solution-hero { padding-top: 1.5rem; padding-bottom: 4rem; }
  .solution-page .solution-hero .common-breadcrumb { margin-bottom: 2.5rem; }
  .solution-page .solution-hero h1 { font-size: clamp(2.25rem, 10vw, 3rem); }
  .solution-page .solution-section { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .solution-page .solution-section-head h2 { font-size: 2rem; }
}
/*============================================================
 * 品牌与数字门户四方案精修
 * 四方案统一使用主蓝视觉（对齐首页首屏按钮蓝色），以业务样机和文案建立差异。
 * ============================================================*/
.solution-page .solution-section { padding-top: 6.5rem; padding-bottom: 6.5rem; }
.solution-page .solution-section-head { max-width: 58rem; margin-bottom: 3rem; }
.solution-page .solution-section-head p { max-width: 52rem; }
.solution-page .solution-browser { filter: none; }
.solution-page .solution-browser-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--solution-soft, #eff4ff), #fff); }
.solution-page .solution-browser-hero::after { position: absolute; top: -2.5rem; right: -1.5rem; width: 11rem; height: 11rem; border: 1.5rem solid color-mix(in srgb, var(--solution-accent, var(--solution-primary)) 12%, transparent); border-radius: 50%; content: ""; }
/*我们优势卡片圆角对齐建站系大圆角语言*/
.solution-page .solution-why-card { border-radius: 1.25rem; }
.solution-cta-notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.75rem; margin-top: 1.5rem; }
.solution-cta .solution-cta-notes span { display: inline-flex; align-items: center; gap: 0.42rem; color: rgba(255, 255, 255, 0.7); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; }
.solution-cta-notes i { color: #fff; }
@media (max-width: 767.98px) {
  .solution-page .solution-section { padding-top: 4.25rem; padding-bottom: 4.25rem; }
  .solution-page .solution-section-head { margin-bottom: 2.25rem; }
  .solution-cta-notes { display: grid; grid-template-columns: 1fr; justify-items: center; }
}
/*网站·小程序定制：核心能力卡的轻量界面插画。正文仍完全由 CMS 区块管理。*/
.solution-page-site_custom .solution-cap-grid { gap: 1.5rem; }
.solution-page-site_custom .site-custom-capability { --custom-art-bg: #edf3ff; min-height: 25.5rem; border: 0; border-radius: 1.5rem; background: var(--custom-art-bg); padding: 2.25rem; }
.solution-page-site_custom .site-custom-capability::after { display: none; }
.solution-page-site_custom .site-custom-capability:nth-child(2) { --custom-art-bg: #eaf7ff; }
.solution-page-site_custom .site-custom-capability:nth-child(3) { --custom-art-bg: #e8faf4; }
.solution-page-site_custom .site-custom-capability:nth-child(4) { --custom-art-bg: #fff6d8; }
.solution-page-site_custom .site-custom-capability:nth-child(5) { --custom-art-bg: #edf7ff; }
.solution-page-site_custom .site-custom-capability:nth-child(6) { --custom-art-bg: #e9faf3; }
.solution-page-site_custom .site-custom-capability > span { background: rgba(255, 255, 255, .78); }
.solution-page-site_custom .site-custom-capability h3 { margin-top: 1.75rem; font-size: clamp(1.45rem, 2vw, 1.8rem); }
.solution-page-site_custom .site-custom-capability p { max-width: 18rem; font-size: .9rem; }
.solution-page-mall_custom .software-capability { --custom-art-bg: #edf3ff; min-height: 25.5rem; border: 0; border-radius: 1.5rem; background: var(--custom-art-bg); padding: 2.25rem; }
.solution-page-mall_custom .software-capability::after { display: none; }
.solution-page-mall_custom .software-capability:nth-child(2) { --custom-art-bg: #eaf7ff; }
.solution-page-mall_custom .software-capability:nth-child(3) { --custom-art-bg: #e9f9f4; }
.solution-page-mall_custom .software-capability:nth-child(4) { --custom-art-bg: #fff5d9; }
.solution-page-mall_custom .software-capability:nth-child(5) { --custom-art-bg: #eaf7ff; }
.solution-page-mall_custom .software-capability:nth-child(6) { --custom-art-bg: #e9faf3; }
.solution-page-mall_custom .software-capability:nth-child(7) { --custom-art-bg: #f0f5ff; }
.solution-page-mall_custom .software-capability:nth-child(8) { --custom-art-bg: #fff5d9; }
.solution-page-mall_custom .software-capability:nth-child(9) { --custom-art-bg: #e9faf3; }
.solution-page-mall_custom .software-capability > span { background: rgba(255, 255, 255, .78); }
.solution-page-mall_custom .software-capability h3 { margin-top: 1.75rem; font-size: clamp(1.45rem, 2vw, 1.8rem); }
.solution-page-mall_custom .software-capability p { max-width: 18rem; font-size: .9rem; }
.solution-page-mall_custom .software-capability-6 .site-custom-phone,.solution-page-mall_custom .software-capability-8 .site-custom-phone { transform: rotate(5deg); transform-origin: bottom center; }
.solution-page-app_custom .software-capability { --custom-art-bg: #f0f5ff; min-height: 26.875rem; padding: 2.25rem; border: 0; border-radius: 1.5rem; background: var(--custom-art-bg); }
.solution-page-app_custom .software-capability::after { display: none; }
.solution-page-app_custom .software-capability:nth-child(2),.solution-page-app_custom .software-capability:nth-child(5) { --custom-art-bg: #e7f5ff; }
.solution-page-app_custom .software-capability:nth-child(3),.solution-page-app_custom .software-capability:nth-child(6) { --custom-art-bg: #e2f8ef; }
.solution-page-app_custom .software-capability:nth-child(4) { --custom-art-bg: #fff4d5; }
.solution-page-app_custom .software-capability > span { display: none; }
.solution-page-app_custom .software-capability h3 { margin: 0 0 1.15rem; font-size: clamp(1.6rem, 2.15vw, 2rem); }
.solution-page-app_custom .software-capability p { max-width: 23rem; line-height: 1.8; }
.solution-page-app_custom .software-capability-3 .site-custom-phone,.solution-page-app_custom .software-capability-5 .site-custom-phone { transform: rotate(5deg); transform-origin: bottom center; }
.site-custom-artwork { position: absolute; right: 1.75rem; bottom: 1.75rem; left: 1.75rem; height: 10.75rem; }
.site-custom-window { position: absolute; right: 0; bottom: 0; left: 0; height: 9.25rem; overflow: hidden; border: .35rem solid rgba(255, 255, 255, .94); border-radius: .85rem .85rem 0 0; background: #fff; box-shadow: 0 1rem 1.75rem rgba(48, 79, 137, .12); }
.site-custom-window > i { display: inline-block; width: .32rem; height: .32rem; margin: .55rem 0 0 .25rem; border-radius: 50%; background: #ff9b85; }
.site-custom-window > i:first-child { margin-left: .65rem; }
.site-custom-window > i:nth-child(2) { background: #ffd36e; }
.site-custom-window > i:nth-child(3) { background: #75d9b1; }
.site-custom-window > b { position: absolute; top: .55rem; left: 3.35rem; width: 3rem; height: .32rem; border-radius: 1rem; background: #dbe7f8; }
.site-custom-window > em { position: absolute; top: 1.55rem; bottom: 0; left: 0; width: 1.65rem; background: #f1f6fc; }
.site-custom-window > div { position: absolute; top: 1.75rem; right: .75rem; bottom: .65rem; left: 2.35rem; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1.45rem 1fr; gap: .5rem; }
.site-custom-window small { border-radius: .24rem; background: #edf3fb; }
.site-custom-window small:first-child { background: #cddcff; }
.site-custom-window strong { align-self: end; height: 2.2rem; border-radius: .2rem .2rem 0 0; background: #b9cdf0; }
.site-custom-window strong:nth-last-child(2) { height: 3.5rem; background: var(--solution-primary); }
.site-custom-window strong:last-child { height: 2.75rem; }
.site-custom-phone { position: absolute; right: 1.15rem; bottom: -.2rem; z-index: 1; width: 4.2rem; height: 8.6rem; border: .32rem solid #193766; border-radius: .8rem; background: #f7fbff; box-shadow: 0 .8rem 1.25rem rgba(21, 49, 96, .28); }
.site-custom-phone b { position: absolute; top: .25rem; left: 50%; width: 1.6rem; height: .28rem; transform: translateX(-50%); border-radius: 1rem; background: #193766; }
.site-custom-phone i { display: block; height: .8rem; margin: 1rem .45rem -.65rem; border-radius: .18rem; background: #dce8fd; }
.site-custom-phone i:nth-child(3) { margin-top: 1rem; height: 2rem; background: var(--solution-primary); }
.site-custom-phone i:last-child { background: #e8eff8; }
.site-custom-chart { position: absolute; right: .8rem; bottom: .55rem; display: flex; height: 4.75rem; align-items: end; gap: .45rem; }
.site-custom-chart i { display: block; width: .7rem; height: 2rem; border-radius: .18rem .18rem 0 0; background: #b9cdf0; }
.site-custom-chart i:nth-child(2) { height: 3.3rem; }
.site-custom-chart i:nth-child(3) { height: 2.5rem; }
.site-custom-chart i:nth-child(4) { height: 4.35rem; background: var(--solution-primary); }
.site-custom-chart i:last-child { height: 3.7rem; }
.site-custom-palette { position: absolute; right: 1.25rem; bottom: .8rem; display: flex; gap: .45rem; }
.site-custom-palette i { width: .75rem; height: .75rem; border-radius: 50%; background: #4f7cf3; }
.site-custom-palette i:nth-child(2) { background: #6fcaac; }
.site-custom-palette i:nth-child(3) { background: #e3b94c; }
.site-custom-palette i:last-child { background: #c6d5ee; }
.site-custom-code { position: absolute; right: .95rem; bottom: .75rem; width: 4.4rem; padding: .5rem; border-radius: .45rem; background: #16233d; }
.site-custom-code i { display: block; width: 75%; height: .22rem; margin: .38rem 0; border-radius: 1rem; background: #73ddbc; }
.site-custom-code i:nth-child(2) { width: 52%; background: #8eb1ff; }
.site-custom-code i:nth-child(3) { width: 88%; }
.site-custom-code i:last-child { width: 42%; background: #f0c45d; }
.site-custom-status { position: absolute; right: .9rem; bottom: .7rem; display: flex; align-items: center; gap: .4rem; padding: .5rem .65rem; border-radius: .45rem; background: #fff; box-shadow: 0 .55rem 1rem rgba(38, 102, 74, .14); color: #26955a; font-size: .65rem; }
.site-custom-status i { display: grid; width: 1.1rem; height: 1.1rem; place-items: center; border-radius: 50%; background: #d8f5e3; }
.site-custom-status b { font-weight: 700; }
@media (max-width: 767.98px) {
  .solution-page-site_custom .site-custom-capability,.solution-page-mall_custom .software-capability,.solution-page-app_custom .software-capability { min-height: 22.25rem; padding: 1.5rem; }
  .site-custom-artwork { right: 1.25rem; bottom: 1.25rem; left: 1.25rem; transform: scale(.9); transform-origin: bottom center; }
}
/*解决方案中心入口页：与详情页共用本资源文件，样式均使用 solution 命名空间。*/
.solution-page { --solution-primary-light: color-mix(in srgb,var(--solution-primary) 48%,#fff 52%); --solution-primary-dark: color-mix(in srgb,var(--solution-primary) 74%,#102451 26%); --solution-primary-deep: color-mix(in srgb,var(--solution-primary) 56%,#071a3c 44%); --solution-primary-pale: color-mix(in srgb,var(--solution-primary) 13%,#fff 87%); --solution-primary-line: color-mix(in srgb,var(--solution-primary) 18%,#dbe5f1 82%); }
.solution-hub-hero { position: relative; min-height: 28rem; overflow: hidden; padding: 2rem 0 4rem; background: radial-gradient(circle at 78% 14%,color-mix(in srgb,var(--solution-primary) 16%,transparent),transparent 20rem),radial-gradient(circle at 5% 94%,color-mix(in srgb,var(--solution-primary) 10%,transparent),transparent 17rem),linear-gradient(135deg,#fff 0%,color-mix(in srgb,var(--solution-primary) 7%,#fff) 54%,#f9fbff 100%); }
.solution-hub-orb { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.solution-hub-orb-one { top: -13rem; right: 8%; width: 26rem; height: 26rem; background: color-mix(in srgb,var(--solution-primary) 14%,transparent); }
.solution-hub-orb-two { bottom: -9rem; left: -7rem; width: 17rem; height: 17rem; background: color-mix(in srgb,var(--solution-primary-light) 22%,transparent); }
.solution-hub-hero .common-breadcrumb { margin-bottom: 2.25rem; }
.solution-hub-kicker,.solution-hub-section-label { display: inline-flex; align-items: center; gap: .5rem; color: var(--solution-primary); font-size: .78rem; font-weight: 700; letter-spacing: .12em; }
.solution-hub-hero h1 { margin: 1.25rem 0 1.375rem; color: #17243b; font-size: clamp(2.6rem,5vw,4.5rem); font-weight: 700; letter-spacing: -.04em; }
.solution-hub-hero p { max-width: 40rem; margin-bottom: 2rem; color: #64748b; font-size: 1.16rem; line-height: 1.9; }
.solution-hub-visual { position: relative; width: min(21rem,86vw); aspect-ratio: 1; margin: 0 auto; border: 1px solid color-mix(in srgb,var(--solution-primary) 12%,transparent); border-radius: 50%; background: radial-gradient(circle,rgba(255,255,255,.96) 0 32%,rgba(255,255,255,.28) 33% 58%,transparent 59%); }
.solution-hub-visual::before,.solution-hub-visual::after { position: absolute; inset: 17%; border: 1px dashed color-mix(in srgb,var(--solution-primary) 28%,transparent); border-radius: 50%; content: ''; }
.solution-hub-visual::after { inset: 3%; border-color: color-mix(in srgb,var(--solution-primary) 12%,transparent); }
.solution-hub-core { position: absolute; inset: 50% auto auto 50%; z-index: 2; display: flex; width: 8.75rem; height: 8.75rem; transform: translate(-50%,-50%); flex-direction: column; align-items: center; justify-content: center; border-radius: 2.375rem; background: linear-gradient(145deg,var(--solution-primary-light),var(--solution-primary) 55%,var(--solution-primary-dark)); color: #fff; box-shadow: 0 1.5rem 3.125rem color-mix(in srgb,var(--solution-primary) 30%,transparent); }
.solution-hub-core i { margin-bottom: .5rem; font-size: 2rem; }
.solution-hub-core span { font-weight: 600; }
.solution-hub-chip { position: absolute; z-index: 3; min-width: 4.75rem; padding: .625rem 1rem; border: 1px solid color-mix(in srgb,var(--solution-primary) 12%,transparent); border-radius: .875rem; background: #fff; color: var(--solution-primary-deep); text-align: center; font-size: .88rem; font-weight: 600; box-shadow: 0 .625rem 1.875rem color-mix(in srgb,var(--solution-primary) 14%,transparent); }
.solution-hub-chip-one { top: 10%; left: 10%; }
.solution-hub-chip-two { top: 19%; right: 2%; }
.solution-hub-chip-three { bottom: 15%; left: 0; }
.solution-hub-chip-four { right: 10%; bottom: 7%; }
.solution-hub-groups { padding: 5rem 0 5.5rem; background: #fff; }
.solution-hub-group-stack { display: grid; gap: 4.25rem; }
.solution-hub-group { scroll-margin-top: 6.25rem; }
.solution-hub-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.75rem; }
.solution-hub-section-heading h2 { margin: .563rem 0 0; color: #17243b; font-size: clamp(1.8rem,3vw,2.5rem); font-weight: 700; }
.solution-hub-section-heading p { margin: .625rem 0 0; color: #64748b; }
.solution-hub-group-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.solution-hub-card { position: relative; display: flex; min-height: 7.25rem; height: 100%; align-items: flex-start; gap: 1.063rem; padding: 1.563rem 3.25rem 1.5rem 1.5rem; border: 1px solid var(--solution-primary-line); border-radius: 1.125rem; background: #fff; color: #17243b; box-shadow: 0 .5rem 1.75rem rgba(51,79,118,.06); transition: transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.solution-hub-card:hover { transform: translateY(-.375rem); border-color: color-mix(in srgb,var(--solution-primary) 42%,#dfe8f5 58%); color: #17243b; box-shadow: 0 1.125rem 2.625rem color-mix(in srgb,var(--solution-primary) 16%,transparent); }
.solution-hub-card:focus-visible { outline: .2rem solid color-mix(in srgb,var(--solution-primary) 42%,transparent); outline-offset: .2rem; }
.solution-card-icon { display: inline-flex; width: 3.25rem; height: 3.25rem; flex: 0 0 3.25rem; align-items: center; justify-content: center; border-radius: .875rem; background: var(--solution-primary-pale); color: var(--solution-primary); font-size: 1.45rem; }
.solution-card-icon img { width: 2.625rem; height: 2.625rem; object-fit: contain; }
.solution-card-content { min-width: 0; }
.solution-card-title { display: flex; align-items: center; gap: .5rem; font-size: 1.02rem; font-weight: 650; }
.solution-card-title em { padding: .125rem .375rem; border-radius: .25rem; background: #fff0ec; color: #f04b32; font-size: .65rem; font-style: normal; font-weight: 600; }
.solution-card-desc { display: block; margin-top: .563rem; color: #64748b; font-size: .86rem; line-height: 1.65; }
.solution-card-arrow { position: absolute; top: 1.625rem; right: 1.5rem; color: #b0bdd0; transition: color .2s,transform .2s; }
.solution-hub-card:hover .solution-card-arrow { color: var(--solution-primary); transform: translate(.125rem,-.125rem); }
.solution-hub-empty { padding: 5rem 1.25rem; color: #94a3b8; text-align: center; }
.solution-hub-empty i { font-size: 2.5rem; }
.solution-hub-empty p { margin: .75rem 0 0; }
.solution-hub-cta { padding: 5.375rem 0; background: #fff; scroll-margin-top: 6.25rem; }
.solution-hub-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.875rem; padding: 3rem 3.5rem; border-radius: 1.625rem; background: linear-gradient(120deg,var(--solution-primary-deep),var(--solution-primary) 58%,var(--solution-primary-light)); color: #fff; box-shadow: 0 1.5rem 3.375rem color-mix(in srgb,var(--solution-primary) 26%,transparent); }
.solution-hub-cta-inner span { opacity: .78; font-size: .9rem; }
.solution-hub-cta-inner h2 { margin: .563rem 0 0; font-size: clamp(1.55rem,3vw,2.3rem); font-weight: 650; }
.solution-hub-cta-inner .btn { flex-shrink: 0; padding: .75rem 1.563rem; border-radius: 62.438rem; background: #fff; color: var(--solution-primary); font-weight: 600; }
.solution-hub-cta-inner .btn:hover { transform: translateY(-.125rem); box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.12); }
@media (max-width:991.98px) {
  .solution-hub-hero { min-height: auto; padding-bottom: 3.5rem; }
  .solution-hub-hero .common-breadcrumb { margin-bottom: 2rem; }
  .solution-hub-visual { width: min(19rem,82vw); margin-top: 1.125rem; }
  .solution-hub-core { width: 7.375rem; height: 7.375rem; border-radius: 2rem; }
  .solution-hub-groups { padding-top: 4.5rem; }
  .solution-hub-group-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:767.98px) {
  .solution-hub-hero { padding-top: 1.75rem; }
  .solution-hub-hero h1 { font-size: 2.5rem; }
  .solution-hub-hero p { font-size: 1rem; }
  .solution-hub-section-heading { align-items: flex-start; }
  .solution-hub-group-list { grid-template-columns: 1fr; }
  .solution-hub-card { min-height: 7rem; padding: 1.25rem 2.875rem 1.25rem 1.188rem; }
  .solution-card-icon { width: 2.875rem; height: 2.875rem; flex-basis: 2.875rem; }
  .solution-card-icon img { width: 2.25rem; height: 2.25rem; }
  .solution-hub-cta-inner { flex-direction: column; align-items: flex-start; padding: 2.125rem 1.625rem; }
}
@media (prefers-reduced-motion:reduce) {
  .solution-hub-card,.solution-hub-cta-inner .btn { transition: none; }
}