/* ========== 全局变量与基础 ========== */
:root {
 --blue:#1269e1;
--blue-d:#0d56c0;
--blue-l:#eaf2fe;
 --orange:#f57c1a;
--ink:#222;
--gray:#666;
--gray-l:#999;
 --bg:#f5f6f8;
--navy:#0c2447;
--line:#e5e7eb;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box
}
html {
	scroll-behavior: smooth
}
body {
	font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
	color: var(--ink);
	/*background: var(--bg);*/
	overflow-x: hidden
}
a {
	text-decoration: none;
	color: inherit
}
ul {
	list-style: none
}
button {
	font-family: inherit;
	cursor: pointer;
	border: none
}
.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px
}
/* 图片占位槽通用样式 */
.img-slot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/*background: linear-gradient(135deg, #f2f6fd, #e6edf8);
	border: 1px dashed #b9c9e4;hhh*/
	color: #8fa6c9;
	font-size: 14px;
	text-align: center;
	border-radius: 8px
}
.img-slot::after {
	content: attr(data-label);
	padding: 4px 10px;
	line-height: 1.5
}
	/* 当图片占位槽内放入真实 <img> 时，让图片完整显示、不溢出，并保持居中 */
/*.img-slot img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block
}*/
	
	/* 当图片占位槽内放入真实 <img> 时，让图片按自身比例完整显示、不溢出、不拉伸，并保持居中 */
.img-slot img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block
}
/* 有真实图片时隐藏占位文字（避免空标签占位影响居中） */
.img-slot:has(img)::after {
	display: none
}
/* 功能图标统一放大显示：覆盖内联可能写死的 30px，放大到 46px（不填满 62px 圆形背景，留约 8px 边距） */
.feat .ico .img-slot {
	width: 46px!important;
	height: 46px!important
}

/* 滚动进场动画 */
[data-reveal] {
	opacity: 0;
	transform: translateY(36px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.22, .8, .36, 1)
}
[data-reveal="left"] {
	transform: translateX(-48px)
}
[data-reveal="right"] {
	transform: translateX(48px)
}
[data-reveal="zoom"] {
	transform: scale(.85)
}
[data-reveal].in {
	opacity: 1;
	transform: none
}
/* sol-band 单独处理：section 本身不平移（避免顶部深色缝隙黑线），
   由背景图 ::before 单独做"上移 + 由透明转为正常"的淡入动画；
   标题静止盖在顶部做浅色桥接，动画开始时只有白色。 */
.sol-band[data-reveal] {
	opacity: 1;
	transform: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden
}
.sol-band[data-reveal].in {
	transform: none
}
/* Toast 提示 */
#toast {
	position: fixed;
	left: 50%;
	bottom: 42px;
	transform: translate(-50%, 20px);
	background: rgba(12,36,71,.92);
	color: #fff;
	padding: 10px 22px;
	border-radius: 999px;
	font-size: 14px;
	opacity: 0;
	pointer-events: none;
	transition: all .35s ease;
	z-index: 999;
	max-width: 82vw;
	text-align: center
}
#toast.show {
	opacity: 1;
	transform: translate(-50%, 0)
}
/* ========== 模块1：顶部导航 ========== */
header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 64px;
	background: #fff;
	z-index: 100;
	box-shadow: none;
	transition: box-shadow .3s
}
header.scrolled {
	box-shadow: 0 4px 18px rgba(15,40,80,.12)
}
.nav {
	max-width: 1200px;
	margin: 0 auto;
	height: 64px;
	padding: 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between
}
.logo {
	display: flex;
	align-items: center;
	gap: 10px
}
.logo svg {
	width: 34px;
	height: 34px
}
.logo b {
	font-size: 19px;
	color: var(--blue);
	letter-spacing: 2px;
	line-height: 1.1;
	display: block
}
.logo small {
	font-size: 9px;
	color: var(--blue);
	letter-spacing: 4px;
	display: block
}
.nav-links {
	display: flex;
	align-items: center;
	gap: 34px
}
.nav-links a {
	font-size: 16px;
	color: #333;
	position: relative;
	padding: 22px 0;
	transition: color .25s
}
.nav-links a:hover {
	color: var(--blue)
}
.nav-links a.active {
	color: var(--blue)
}
/* 栏目链接 hover 动画：蓝色水平线条从中间向两侧展开（参照客户案例参考实现） */
/* 栏目链接 hover 动画：蓝色水平线条从中间向两侧展开（参照客户案例参考实现） */
.nav-links>a::before, .nav-item>a::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 14px;
	width: 0;
	height: 2px;
	background-color: var(--blue);
	transform: translateX(-50%);
	transition: width 0.4s ease;
	pointer-events: none
}
.nav-links>a:hover::before, .nav-links>a.active::before, .nav-item:hover>a::before {
	width: 100%
}

	
	
.btn-reg {
	display: inline-block;
	background: var(--blue);
	color: #fff;
	font-size: 14px;
	padding: 8px 18px;
	border-radius: 4px;
	/* <button> 的 UA 默认 text-align 为 center，改成 <a> 后默认是 start，
	   显式声明以保持与原按钮完全一致 */
	text-align: center;
	transition: all .25s
}
.btn-reg:hover {
	background: var(--blue-d);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(18,105,225,.35)
}
/* 注册试用按钮现已改为 <a href="join_us.html" class="btn-reg">，
   会被 .nav-links a（0,1,1）盖过 .btn-reg（0,1,0），
   故用 .nav-links a.btn-reg（0,2,1）把按钮样式取回来。
   注意：不要给 .nav-links a 加 :not(.btn-reg)，那会提升该规则的优先级，
   反而盖掉 .mega-col a 等下拉菜单链接的样式。 */
.nav-links a.btn-reg {
	display: inline-block;
	background: var(--blue);
	color: #fff;
	font-size: 14px;
	padding: 8px 18px;
	border-radius: 4px;
	/* .nav-links a 会把 position 设成 relative，原 <button> 是 static，这里还原 */
	position: static;
	transition: all .25s
}
.nav-links a.btn-reg:hover {
	background: var(--blue-d);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(18,105,225,.35)
}
/* 按钮不是栏目链接，去掉栏目链接的 hover 下划线（.nav-links>a::before） */
.nav-links>a.btn-reg::before {
	display: none
}
.burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	padding: 6px
}
.burger span {
	width: 22px;
	height: 2px;
	background: #333;
	border-radius: 2px;
	transition: .3s
}
.mobile-menu {
	display: none
}
/* 下拉子菜单：悬停展开白底阴影面板（参考销售易 header 效果） */
.nav-item {
	position: relative;
	height: 64px;
	display: flex;
	align-items: center
}
.nav-item>a::after {
	content: "▾";
	display: inline-block;
	margin-left: 5px;
	font-size: 10px;
	color: #999;
	transition: transform .3s, color .3s
}
.nav-item:hover>a {
	color: var(--blue)
}
.nav-item:hover>a::after {
	transform: rotate(180deg);
	color: var(--blue)
}
	
	
/* 普通下拉：top:100% 紧贴 nav 底边，无空隙 */
/* 下拉菜单：纯渐显动画（opacity 淡入，无位移） */
.dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	visibility: hidden;
	background: #fff;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 18px 44px rgba(15,40,80,.15);
	padding: 10px;
	min-width: 170px;
	z-index: 99;
	transition: opacity .25s ease-in, visibility .25s ease-in
}
.nav-item:hover .dropdown {
	opacity: 1;
	visibility: visible
}
/* 全屏宽 mega 下拉（参考销售易客户案例下拉）：fixed 定位视口，横向 100% 撑满屏幕 */
.dropdown.mega {
	position: fixed;
	left: 0;
	right: 0;
	top: 64px;
	transform: none;
	min-width: 0;
	border-radius: 0;
	padding: 38px 0 44px;
	box-shadow: 0 24px 50px rgba(15,40,80,.16)
}
.mega-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px
}
.mega-grid {
	/*display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 6px 36px*/
	display: grid;
    grid-template-columns: 18fr 18fr repeat(3, 21.333fr);
    gap: 6px 36px;
}
.mega-grid.cols3 {
	grid-template-columns: repeat(3, 1fr)
}
.mega-col h6 {
	font-size: 16px;
	color: #1a1a1a;
	font-weight: 700;
	margin-bottom: 10px;
	padding-left: 12px;
	border-left: 3px solid var(--blue)
}
.mega-col p {
	font-size: 14px;
	color: #999;
	line-height: 1.7;
	padding: 0 12px 8px
}
.mega-col a {
	display: block;
	padding: 8px 12px;
	font-size: 16px;
	color: #666;
	border-radius: 6px;
	transition: all .25s
}
.mega-col a:hover {
	color: var(--blue);
	background: var(--blue-l);
	transform: translateX(4px)
}
.nav-links .dropdown:not(.mega) a {
	display: block;
	padding: 9px 20px;
	font-size: 16px;
	color: #555;
	white-space: nowrap;
	text-align: center;
	border-radius: 6px;
	transition: all .25s
}
.nav-links .dropdown:not(.mega) a::after {
	content: none
}
.nav-links .dropdown:not(.mega) a:hover {
	color: var(--blue);
	background: var(--blue-l);
	transform: translateY(-1px)
}
.dropdown.cols2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-width: 350px;
	gap: 0 6px
}
/* 移动端菜单二级子栏目 */
.mobile-menu .m-parent {
	display: flex;
	align-items: center;
	justify-content: space-between
}
.m-caret {
	font-style: normal;
	font-size: 11px;
	color: #999;
	transition: transform .3s
}
.m-item.open .m-caret {
	transform: rotate(180deg)
}
.m-sub {
	display: none;
	padding-bottom: 8px
}
.m-item.open .m-sub {
	display: block;
	animation: mDrop .3s ease
}
.mobile-menu .m-sub a {
	padding: 9px 26px 9px 44px;
	font-size: 13px;
	color: #777
}
@keyframes mDrop {
from {
opacity:0;
transform:translateY(-6px)
}
to {
opacity:1;
transform:none
}
}
/* ========== 模块2：首屏通栏轮播横幅（文字 + 图片版式，浅色马卡龙渐变底） ========== */
/* 横幅宽高与原设计一致（宽 100% × 高 560px），仅把「整张广告图」改成「左侧两段文字 + 右侧插图」。
   扩充广告幅数的唯一操作：复制 index.html 里任意一整段 <div class="hero-slide">…</div>
   （建议顺手把它的 .bsX 底色类换成另一个），指示灯会自动多出一条，无需改动 CSS 和 JS。 */
.hero {
	position: relative;
	margin-top: 64px;
	overflow: hidden;
}
/* 视口：只包住横幅本体（不含下方指示灯），左右箭头以它为基准垂直居中 */
.hero-viewport {
	position: relative;
	height: 560px
}
/* 轮播轨道：定位容器，多幅叠放在同一位置 */
.hero-track {
	position: relative;
	height: 560px
}
/* 单幅：默认全透明地叠在下面。
   参照 51mis 的「渐显」——切换时不做位移滚动，只让新幅慢慢浮出来。
   关键点：旧幅不跟着一起淡出，而是等新幅铺满后再瞬间让位（看下面 transition 的写法）。
   两幅若同时各半透明，叠加处会透出白色底，每切一次就闪一下白光。 */
.hero-slide {
	position: absolute;
	inset: 0;
	height: 560px;
	opacity: 0;
	/* 退场 = 时长 0s + 延迟 1.25s：这 1.25s 内旧幅始终保持不透明垫在下面，
	   比新幅淡入（1.15s）稍长一点，等它铺满旧幅才消失，全程没有露白的一帧 */
	transition: opacity 0s linear 1.25s;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	will-change: opacity
}
.hero-slide.cur {
	opacity: 1;
	z-index: 2;
	pointer-events: auto;
	/* 入场：1.15s 缓慢透出，「渐显」的全部来源；想更慢/更快只改这一个时长 */
	transition: opacity 1.15s cubic-bezier(.33, 0, .2, 1)
}
/* 每幅共用的柔光：大面积纯渐变容易显得平板，叠两层极淡的高光就有空气感 */
.hero-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(115% 85% at 16% 18%, rgba(255,255,255,.55), rgba(255,255,255,0) 62%),
		radial-gradient(85% 70% at 86% 86%, rgba(255,255,255,.38), rgba(255,255,255,0) 62%)
}
/* 内容压在柔光之上（::before 是绝对定位，默认会盖住静态排版的内部元素） */
.hero-banner-inner {
	position: relative;
	z-index: 1
}
/* 横幅内层两栏：左文案、右插图 */
.hero-banner-inner {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 10px;
	padding-left: 150px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	/* 撑满整幅高度（560/420/280），背景图层才能按百分比精确垂直居中 */
	align-self: stretch
		
}
.hero-banner-copy {
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
	z-index: 1;
	/* 背景图层脱离排版流后不再占位，这里把文案宽度锁回原样（472 插图位 + 48 间距），视觉零位移 */
	max-width: calc(100% - 520px)
}
/* 第一段：橙色小标语（对应 crm_product_overview 的 .banner-orange-tip） */
.hero-banner-tip {
	color: #ff6a00;
	font-size: 40px;
	/*font-weight: 600;*/
	letter-spacing: 1px;
	margin-bottom: 14px
}
/* 第二段：h1 主标题（对应 .banner-main-title）；想更接近参照页的极细体，把 300 改成 100 */
.hero-banner-title {
	font-size: 48px;
	line-height: 1.45;
	font-weight: 300;
	color: #1a1a1a;
	letter-spacing: 1px;
	margin: 0
}
/* 背景图层：作为 .hero-slide 的直接子元素，绝对定位铺满整幅（宽高 100%），垫在最底层。
   文字层 .hero-banner-inner（z-index:1）与 .hero-banner-copy（z-index:1）自然压在它上方。
   object-fit:cover 保证任意尺寸图片都无变形地撑满，多余部分由 .hero-slide 的 overflow:hidden 裁掉 */
.hero-banner-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	overflow: hidden
}
.hero-banner-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center
}
/* 兜底：占位里没放 <img> 时整个隐藏，回退显示 .bsX 渐变底色——复制横幅代码时少放图也不会出错 */
.hero-banner-img:empty {
	display: none
}
/* ---- 丝滑换场（参照 51mis：整幅慢慢透出 + 前景分层轻微位移）----
   要点 1：动画只写在 .cur 上，且用 animation 而不是 transition。
           切走时 .cur 被移除，动画随之消失，旧内容停在原地、跟着整幅淡出，
           不会再「倒着掉下去」和新内容打架——这正是切换生硬的主要来源。
   要点 2：位移小、时间长（1.1~1.6s），背景图用 scale 走 GPU 合成，才有慢悠悠的顺滑。
   要点 3：三层错开依次浮现，顺序 背景图 → 标语 → 标题。 */
.hero-slide.cur .hero-banner-tip {
	animation: hero-rise 1.15s cubic-bezier(.16, .84, .44, 1) .1s both
}
.hero-slide.cur .hero-banner-title {
	animation: hero-rise 1.3s cubic-bezier(.16, .84, .44, 1) .2s both
}
/* 背景图渐显：opacity 0→1 淡入 + 由 1.06 缓收到 1（全程 scale ≥ 1，cover 铺满后不会露出边缘）。
   渐显完成后接一段 16s 的极缓 Ken Burns 呼吸变焦（1 ↔ 1.06 交替），让静止画面仍有生命力；
   不想要呼吸变焦的话，删掉逗号后的 hero-kenburns 一段即可 */
.hero-slide.cur .hero-banner-img {
	animation: hero-img-fade 1.6s cubic-bezier(.16, .84, .44, 1) .05s both,
		hero-kenburns 16s ease-in-out 1.6s infinite alternate
}
@keyframes hero-rise {
from {
	opacity: 0;
	transform: translate3d(0, 14px, 0)
}
to {
	opacity: 1;
	transform: none
}
}
/* 背景图渐显（opacity 0→1 + 轻微收缩定格） */
@keyframes hero-img-fade {
from {
	opacity: 0;
	transform: scale(1.06)
}
to {
	opacity: 1;
	transform: scale(1)
}
}
/* 停在本幅时的极缓呼吸变焦（1 ↔ 1.06 / 16s），alternate 来回，始终 ≥ 1 不露边 */
@keyframes hero-kenburns {
from {
	transform: scale(1)
}
to {
	transform: scale(1.06)
}
}
/* 五幅横幅底色：以冷色系为主（天蓝 / 薄荷青 / 靛蓝紫 / 冰蓝青），
   只在第 4 幅插入一块暖杏色做过渡，避免整屏一路冷到底发灰。
   想调配色改这 5 条即可，HTML 结构和 JS 都不用动。 */
.bs1 {
	background: linear-gradient(115deg, #d2e3ff 0%, #e4eeff 48%, #f4f8ff 100%)
}
.bs2 {
	background: linear-gradient(115deg, #c8e9e2 0%, #e0f2ee 48%, #f1f9f7 100%)
}
.bs3 {
	background: linear-gradient(115deg, #d8dcfb 0%, #e7eafd 48%, #f4f6fe 100%)
}
.bs4 {
	background: linear-gradient(115deg, #ffdcc0 0%, #ffecda 48%, #fff9f2 100%)
}
.bs5 {
	background: linear-gradient(115deg, #cbe6f6 0%, #e0f1fa 48%, #f2f9fd 100%)
}
/* 左右切换箭头：浅色底上改用「白玻璃 + 蓝图标」，hover 反白，避免原来的白色箭头看不见 */
.hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255,255,255,.72);
	border: 1px solid rgba(18,105,225,.14);
	color: #1269e1;
	font-size: 22px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(18,105,225,.12);
	backdrop-filter: blur(4px);
	transition: all .3s;
	z-index: 5
}
.hero-arrow:hover {
	background: #1269e1;
	color: #fff;
	box-shadow: 0 6px 20px rgba(18,105,225,.3)
}
.hero-arrow.prev {
	left: 22px
}
.hero-arrow.next {
	right: 22px
}
/* 指示横线：悬浮在横幅内部、贴近 banner 图片底边（绝对定位盖在轮播图上，不再占据横幅下方的文档流），
   有几幅广告就自动有几条；.hero 本身是 position:relative，直接以横幅底边为定位基准 */
.hero-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	display: flex;
	justify-content: center;
	gap: 12px;
	padding: 0;
	z-index: 5
}
.hero-dots button {
	width: 30px;
	height: 4px;
	border-radius: 2px;
	background: rgba(18,105,225,.2);
	transition: all .35s cubic-bezier(.22, 1, .27, 1)
}
.hero-dots button:hover {
	background: rgba(18,105,225,.45)
}
.hero-dots button.on {
	background: #1269e1;
	width: 46px
}
/* ========== 模块3：八大管理能力 ========== */
.sec {
	padding: 76px 0
}
.sec-title {
	text-align: center;
	font-size: 44px;
	font-weight: 700;
	letter-spacing: 1px;
	color: #1a1a1a
}
.sec-desc {
	max-width: 960px;
	margin: 26px auto 0;
	font-size: 16px;
	line-height: 2;
	color: #666;
	text-align: justify
}
.feat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 34px 26px;
	margin-top: 52px
}
.feat {
	display: flex;
	gap: 14px;
	transition: transform .3s, box-shadow .3s;
	border-radius: 10px;
	padding: 10px
}
.feat:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 34px rgba(20,50,110,.1);
	background: #fff
}
.feat .ico {
	flex: none;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .4s
}
.feat:hover .ico {
	transform: rotate(-8deg) scale(1.1)
}
.feat .ico svg {
	width: 30px;
	height: 30px
}
.feat h4 {
	font-size: 16px;
	margin-bottom: 8px
}
.feat p {
	font-size: 14px;
	color: #888;
	line-height: 1.8
}
.feat a {
	display: inline-block;
	margin-top: 8px;
	font-size: 14px;
	color: #999;
	transition: color .25s, transform .25s
}
.feat a:hover {
	color: var(--blue);
	transform: translateX(4px)
}
.c-blue {
	background: #cfe4fb
}
.c-yellow {
	background: #fbeec4
}
.c-purple {
	background: #e6daf8
}
.c-pink {
	background: #fbd8e0
}
.c-rose {
	background: #fbdcdc
}
.c-orange {
	background: #fbdfc6
}
.c-lemon {
	background: #f6edc0
}
.c-teal {
	background: #d5f1ee
}
/* ========== 模块4：业务价值链三卡 ========== */
.tri-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-top: 48px
}
.tri-card .pic {
	height: 230px;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	transition: transform .35s
}
.tri-card:hover .pic {
	transform: translateY(-6px)
}
.tri-card .pic .img-slot {
	position: absolute;
	inset: 0;
	border: none;
	transition: transform .6s ease
}
/* 鼠标移上三栏卡片，图片由内向外逐渐放大（仿参考页 .tra 的 hover 缩放效果） */
.tri-card:hover .pic .img-slot {
	transform: scale(1.15)
}
.tri-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--line);
	padding: 18px 2px 16px
}
.tri-foot h4 {
	font-size: 16px
}
.tri-foot p {
	font-size: 14px;
	color: #999;
	margin-top: 6px
}
.arrow-btn {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid #ccc;
	color: #999;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	transition: all .3s
}
.arrow-btn:hover {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
	transform: translateX(4px)
}
a.arrow-btn {
	text-decoration: none;
	cursor: pointer
}
/* 整张卡片可点（由 js/index.js 加 .is-link） */
.tri-card.is-link {
	cursor: pointer
}
.bg-mint {
	/*background: linear-gradient(135deg, #e2f4ec, #d3ecdf)hhh*/
}
.bg-lav {
	/*background: linear-gradient(135deg, #e7e2f7, #dcd4f2)hhh*/
}
.bg-sky {
	/*background: linear-gradient(135deg, #d9e9fb, #cfe2f8)hhh*/
}
.bg-soft1 {
	/*background: linear-gradient(135deg, #eef4fd, #e3ecfa)hhh*/
}
.bg-soft2 {
	/*background: linear-gradient(135deg, #f0f3fc, #e6ebfa)hhh*/
}
.bg-soft3 {
	/*background: linear-gradient(135deg, #eef2fb, #e5eaf8)hhh*/
}
/* ========== 模块5：行业解决方案深色区 ========== */
.sol-band {
	position: relative;
	background: #0e2740;            /* 兜底深色：背景图透明/未加载时显示，避免白屏 */
	padding: 80px 0 90px;
	overflow: hidden
}
/* 背景图片层：单独做"上移 + 由透明转为正常"的淡入动画，不影响文字内容 */
.sol-band::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	transform: translateY(36px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.22, .8, .36, 1);
	/* [图片占位] sol-band 背景图 | 建议尺寸 1920×900 | 暗调办公室/会议室实景照片，叠加深蓝遮罩保证白色文字可读 */
	background-image:
url("../images/bg.jpg");
	background-size: cover, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
	pointer-events: none
}
.sol-band[data-reveal].in::before {
	opacity: 1;
	transform: translateY(0)
}
.sol-band > * { position: relative; z-index: 1 }
.sol-cards {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap
}
.sol-card {
	width: 168px;
	padding: 34px 12px 26px;
	text-align: center;
	color: #fff;
	transition: transform 1.6s ease, box-shadow .3s;
	cursor: pointer;
	/* 卡片由 <div> 改成 <a href="…"> 后默认是 inline，这里补回块级，
	   宽度/内边距/居中排版与原来的 <div> 完全一致；下划线与链接色由全局 a 规则处理 */
	display: block
}
.sol-card:hover {
	box-shadow: 0 18px 40px rgba(0,0,0,.4);
	z-index: 2
}
/* 行业方案卡片：打开即随机漂浮（由 JS 驱动，每张卡独立随机方向与节奏，鼠标移到某张即停住） */
.sol-card svg {
	width: 52px;
	height: 52px;
	margin-bottom: 18px
}
.sol-card h4 {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6
}
.sol-card span {
	display: inline-block;
	margin-top: 12px;
	font-size: 14px;
	opacity: .9
}
.sc1 {
	background: #8a8a8a
}
.sc2 {
	background: #00aec7
}
.sc3 {
	background: #c7961b
}
.sc4 {
	background: #c400c4
}
.sc5 {
	background: #129612
}
.sc6 {
	background: #ef4c00
}
.sol-slogan {
	text-align: center;
	color: #fff;
	margin-top: 74px
}
.sol-slogan h3 {
	font-size: 30px;
	letter-spacing: 6px;
	font-weight: 600
}
.sol-slogan h2 {
	font-size: 40px;
	letter-spacing: 3px;
	margin-top: 26px;
	font-weight: 800
}
.btn-trial {
	display: inline-block;
	margin-top: 44px;
	background: var(--blue);
	color: #fff;
	font-size: 16px;
	padding: 12px 40px;
	border-radius: 4px;
	position: relative;
	overflow: hidden;
	transition: box-shadow .3s;
	/* 「免费试用」由 <button> 改为 <a href="join_us.html">：
	   补回与按钮一致的行高/鼠标手型，避免行内元素与按钮渲染差异 */
	line-height: 1.4;
	border: 0;
	cursor: pointer
}
.btn-trial span {
	position: relative;
	z-index: 1
}
/* 中心圆点由小到大向外扩散填满按钮（仿参考页 IndexCase_more 的 hover 填充动画） */
.btn-trial::before {
	content: "";
	position: absolute;
	display: inline-block;
	width: 50px;
	height: 50px;
	background: transparent;
	border-radius: 100%;
	left: 50%;
	top: 50%;
	opacity: 0;
	transform: translateX(-50%) translateY(-50%);
	transition: all .5s ease 0s
}
.btn-trial:hover::before {
	opacity: 1;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: #ff7019;
	transition: all .5s ease 0s
}
.btn-trial:hover {
	box-shadow: 0 10px 26px rgba(255,112,25,.5)
}
/* ========== 模块6：客户 LOGO 墙 ========== */
.logo-wall {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	border: 1px solid var(--line);
	margin-top: 48px;
	background: #fff
}
.logo-cell {
	height: 74px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	margin: -1px 0 0 -1px;
	font-weight: 700;
	font-size: 14px;
	transition: all .3s;
	cursor: pointer;
	overflow: hidden;
	padding: 0 6px;
	text-align: center
}
.logo-cell:hover {
	transform: scale(1.06);
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
	z-index: 2;
	position: relative
}
.logo-cell small {
	display: block;
	font-size: 9px;
	font-weight: 400
}
.lg-fill {
	color: #fff
}
.f-blue {
	background: #0a4ea3
}
.f-red {
	background: #c02c2c
}
.f-navy {
	background: #123a7a
}
.f-gray {
	background: #6b6b6b
}
.f-steel {
	background: #5a6b8c
}
.f-dk {
	background: #0d2f66
}
/* ========== 模块7：页脚 ========== */
footer {
	background: var(--navy);
	color: #c6d3e6;
	padding: 64px 0 30px;
	font-size: 13px
}
.ft-top {
	display: flex;
	gap: 56px;
	flex-wrap: wrap
}
.ft-brand {
	width: 200px
}
.ft-brand .flogo {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 2px
}
.ft-qr {
	width: 134px;
	height: 134px;
	margin-top: 22px;
	margin-left: 10px;
	background: #fff;
	border-radius: 6px
}
.ft-col h5 {
	color: #fff;
	font-size: 14px;
	margin-bottom: 20px;
	font-weight: 600
}
.ft-col a {
	display: block;
	color: #93a5c2;
	margin-bottom: 12px;
	font-size: 14px;
	transition: color .25s, transform .25s
}
.ft-col a:hover {
	color: #fff;
	transform: translateX(4px)
}
.ft-contact {
	flex: 1;
	min-width: 260px
}
.ft-contact h5 {
	color: #fff;
	font-size: 14px;
	margin-bottom: 20px
}
.ft-contact p {
	margin-bottom: 13px;
	color: #93a5c2;
	font-size: 14px;
	display: flex;
	align-items: flex-start;     /* 图标顶部对齐首行文字，不被 flex 拉伸 */
	gap: 8px;
	line-height: 1.5
}
/* 页脚联系方式图标：保持图片原始比例，不随 flex 行高被纵向拉长 */
.ft-contact p img {
	flex: none;
	width: auto;
	height: auto
}
.ft-links {
	/*border-top: 1px solid rgba(255,255,255,.12);*/
	margin-top: 12px;
	padding-top: 20px
}
/* ========== 页脚 TAB 选项卡（仿 Bootstrap nav-tabs 风格） ========== */
.ft-links .tab-hd {
	display: flex;
	gap: 8px;
	border-bottom: 1px solid rgba(255,255,255,.18);  /* 标签栏底部分隔线 */
	margin-bottom: 6px
}
.ft-links h6.tab {
	color: #7e91b1;                         /* 未选中：与下方链接文字颜色保持一致 */
	font-size: 13px;
	font-weight: 500;
	margin: 0 0 -1px;                       /* 负下边距：让选中项底边框盖住 tab-hd 分隔线 */
	padding: 8px 18px;
	cursor: pointer;
	border-radius: 4px 4px 0 0;             /* 顶部小圆角，底部直角 */
	background: transparent;                /* 未选中透明背景 */
	border: 1px solid transparent;          /* 占位边框，保持尺寸稳定 */
	border-bottom-color: transparent;       /* 未选中时不遮挡分隔线 */
	transition: color .25s, background .25s, border-color .25s
}
.ft-links h6.tab:hover {
	color: #fff;
	background: rgba(255,255,255,.08);
	border-color: rgba(255,255,255,.08)
}
/* 当前选中：白字加粗，无边框底色，底部边框与 footer 背景同色（bottom 无线，tab 与内容连成整体） */
.ft-links h6.tab.active {
	position: relative;
	z-index: 2;
	color: #fff;
	font-weight: 700;
	background: transparent;
	border-color: rgba(255,255,255,.22);
	border-bottom-color: var(--navy)         /* 与 footer 深色背景同色，视觉上与下方内容融为一体 */
}
/* 面板容器：grid 同格叠放，所有面板固定在同一个位置，切换时不位移、不跳动 */
.ft-links .tab-body {
	display: grid
}
/* 面板：默认同格叠放、透明隐藏；激活时原地纯渐显（淡入），
   动画时长 .6s，新旧面板在同一位置交叉淡入淡出，无位移、无上移 */
.ft-links .tab-panel {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .6s ease, visibility .6s ease
}
.ft-links .tab-panel.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto
}
.ft-links .rows {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px
}

/* ============================================
   底部 CTA - 深色全宽
   ============================================ */
.cta {
  position: relative;
  background:
    linear-gradient(135deg, rgba(20,28,42,0.88) 0%, rgba(30,45,68,0.88) 100%),
    linear-gradient(45deg, #1a1f2e, #0f1620);
  color: #fff;
  padding: 111px var(--page-pad);
  text-align: center;
  overflow: hidden;
  margin-top: 38px;
}
.cta::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(59,123,216,0.3) 0%, transparent 50%),
    radial-gradient(circle at 75% 70%, rgba(240,132,0,0.15) 0%, transparent 50%);
  animation: ctaGlow 8s ease-in-out infinite;
}
@keyframes ctaGlow { 0%,100%{transform:scale(1);} 50%{transform:scale(1.1);} }
#particleCanvas { position: absolute; inset: 0; z-index: 1; }
.cta-content { position: relative; z-index: 2; }
.cta h2 {
  font-size: 41px;
  font-weight: 500;
  margin-bottom: 44px;
  line-height: 1.6;
  text-shadow: 0 3px 13px rgba(0,0,0,0.3);
}
.cta-btn {
  display: inline-flex; align-items: center; gap: 13px;
  padding: 19px 63px;
  background: linear-gradient(135deg, #4A85E8 0%, #3B7BD8 100%);
  color: #fff;
  border-radius: 38px;
  font-size: 25px; font-weight: 500;
  transition: all 0.3s;
  box-shadow: 0 6px 25px rgba(59,123,216,0.4);
  position: relative;
  overflow: hidden;
}
.cta-btn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s;
}
.cta-btn:hover { transform: translateY(-3px); box-shadow: 0 13px 38px rgba(59,123,216,0.6); }
.cta-btn:hover::before { transform: translateX(100%); }

/* ============================================

/* 例外：页脚 TAB 面板的渐显切换强制生效，不受系统"减少动态效果"影响（与全站动画处理一致） */
@media (prefers-reduced-motion: reduce) {
	.ft-links .tab-panel { transition-duration: .6s!important }
}
.ft-links a {
	color: #7e91b1;
	font-size: 14px
}
.ft-links a:hover {
	color: #fff
}
.ft-copy {
	border-top: 1px solid rgba(255,255,255,.12);
	margin-top: 24px;
	padding-top: 22px;
	text-align: center;
	color: #7e91b1;
	font-size: 14px;
	line-height: 2.1
}
/* 返回顶部 */
#backTop {
	position: fixed;
	right: 26px;
	bottom: 36px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--blue);
	color: #fff;
	font-size: 18px;
	opacity: 0;
	pointer-events: none;
	transition: all .35s;
	z-index: 99;
	box-shadow: 0 8px 20px rgba(18,105,225,.4)
}
#backTop.show {
	opacity: 1;
	pointer-events: auto
}
#backTop:hover {
	transform: translateY(-4px)
}
/* 父容器基础样式 豆包*/
.case-item {
	display: inline-block;
	font-size: 80px;
	font-weight: bold;
	color: #0055ff;
	position: relative;
	cursor: pointer;
	padding-bottom: 8px;
}
/* 下划线伪元素核心样式 */
.case-item::after {
	content: '';
	position: absolute;
	left: 50%;       /* 定位到中间起点 */
	bottom: 0;
	width: 0;        /* 初始宽度0 */
	height: 8px;
	background-color: #0055ff;
	transform: translateX(-50%); /* 居中校准 */
	transition: width 0.4s ease; /* 过渡动画 */
}
/* 悬浮触发动画 */
.case-item:hover::after {
	width: 100%; /* 宽度拉满，实现中间向两侧展开 */
}

/* ========== 响应式 ========== */
@media (max-width:1024px) {
.feat-grid {
	grid-template-columns: repeat(2, 1fr)
}
.tri-grid {
	grid-template-columns: 1fr;
	max-width: 560px;
	margin-left: auto;
	margin-right: auto
}
.logo-wall {
	grid-template-columns: repeat(4, 1fr)
}
.hero-slide {
	height: 420px
}
.hero-track {
	height: 420px
}
.hero-viewport {
	height: 420px
}
/* 该档左右箭头（46px + 起点 22px）会压住文案，内缩给箭头让位 */
.hero-banner-inner {
	padding: 0 76px;
	gap: 32px
}
.hero-banner-title {
	font-size: 32px
}
/* 背景图全幅铺底与宽屏一致（继承基础 inset:0 规则），无需调整 */
.hero-banner-copy {
	/* 同样锁回该档原来的文案宽度（340 插图位 + 32 间距） */
	max-width: calc(100% - 372px)
}
.sol-slogan h2 {
	font-size: 28px
}
.nav-links {
	display: none
}
.burger {
	display: flex
}
.mobile-menu {
	display: block;
	position: fixed;
	top: 64px;
	left: 0;
	right: 0;
	background: #fff;
	box-shadow: 0 14px 30px rgba(0,0,0,.12);
	transform: translateY(-110%);
	transition: transform .4s;
	z-index: 99;
	padding: 10px 0 18px
}
.mobile-menu.open {
	transform: none
}
.mobile-menu a {
	display: block;
	padding: 13px 26px;
	font-size: 16px;
	color: #333
}
.mobile-menu a.active {
	color: var(--blue)
}
/* 注册试用按钮在移动端菜单中的样式。
   该按钮是 <a class="btn-reg">，会被 .mobile-menu a（0,1,1）盖过 .btn-reg（0,1,0），
   故此处（0,2,0）显式把 字号/颜色/内边距/宽度 取回来，与原来的 <button> 完全一致。 */
.mobile-menu .btn-reg {
	display: block;
	/* <button> 即使 display:block 也是「收缩包裹」宽度；
	   改成 <a> 后 block 会撑满整行、把原来的小圆角按钮拉成通栏，故用 fit-content 还原 */
	width: fit-content;
	margin: 12px 26px 0;
	padding: 8px 18px;
	font-size: 14px;
	color: #fff;
	text-align: center
}
}

@media (max-width:640px) {
.feat-grid {
	grid-template-columns: 1fr
}
.logo-wall {
	grid-template-columns: repeat(3, 1fr)
}
.hero-slide {
	height: 280px
}
.hero-track {
	height: 280px
}
.hero-viewport {
	height: 280px
}
/* 手机上改上下两栏：文案居中、插图缩小 */
.hero-banner-inner {
	flex-direction: column;
	justify-content: center;
	text-align: center;
	gap: 12px;
	padding: 0 20px
}
.hero-banner-tip {
	font-size: 16px;
	margin-bottom: 6px
}
.hero-banner-title {
	font-size: 22px;
	line-height: 1.4
}
/* 背景图全幅铺底与宽屏一致（继承基础 inset:0 规则），无需调整 */
.hero-banner-copy {
	max-width: none
}
/* 窄屏背景图沿用基础渐显动画（全幅铺底后不再需要改自下浮现） */
.hero-arrow {
	width: 34px;
	height: 34px;
	font-size: 16px
}
.hero-arrow.prev {
	left: 10px
}
.hero-arrow.next {
	right: 10px
}
.hero-dots {
	bottom: 12px
}
.sec-title {
	font-size: 21px
}
.sol-card {
	width: 46%
}
.sol-slogan h2 {
	font-size: 21px
}
.sol-slogan h3 {
	font-size: 20px;
	letter-spacing: 3px
}
.ft-top {
	gap: 34px
}
}

@media (prefers-reduced-motion:reduce) {
*, *::before, *::after {
	animation-duration: .01ms!important;
	transition-duration: .01ms!important
}
/* 例外：顶部导航 7 个栏目的 hover 线条始终从中间向两侧展开，不受系统"减少动态效果"影响 */
.nav-links>a::before, .nav-item>a::before {
	transition-duration: .4s!important
}
/* 例外：下拉菜单（含全屏 mega 下拉）的渐显动画也强制生效，不受系统"减少动态效果"影响 */
.nav-item .dropdown {
	transition-duration: .25s!important
}
/* 例外：各 section 滚动进场（向上渐显）也强制生效，不受系统"减少动态效果"影响 */
[data-reveal] {
	transition-duration: .8s!important
}
/* 例外：sol-band 背景图（透明→正常 + 上移）也强制生效，不受系统"减少动态效果"影响 */
.sol-band::before {
	transition-duration: .8s!important
}
/* 例外：首屏轮播横幅的交叉淡入转场 + 推镜也强制生效，不受系统"减少动态效果"影响 */
.hero-slide {
	transition-duration: 1.15s!important
}
.hero-slide.cur .img-slot {
	animation-duration: 7s!important
}
/* hero-kenburns 是无限循环动画，在「减少动态效果」下必须整个换掉，
          否则会被压成 .01ms 的高频抖动；带位移的旧动画会让铺满的背景图露出边缘，这里改用纯渐显 */
.hero-slide.cur .hero-banner-img {
	animation: hero-img-fade .5s ease both!important
}

/* 例外：文案分层浮现也保持原有节奏（全局规则只压缩 animation-duration，delay 不受影响） */
.hero-slide.cur .hero-banner-tip {
	animation-duration: 1.15s!important
}
.hero-slide.cur .hero-banner-title {
	animation-duration: 1.3s!important
}

/* 例外：文案分层浮现也保持原有节奏（全局规则只压缩 animation-duration，delay 不受影响） */
.hero-slide.cur .hero-banner-tip {
	animation-duration: 1.15s!important
}
.hero-slide.cur .hero-banner-title {
	animation-duration: 1.3s!important
}
/* 例外：首屏"免费试用"按钮的中心扩散填充动画也强制生效，不受系统"减少动态效果"影响 */
.btn-trial::before {
	transition-duration: .5s!important;
	animation-duration: .5s!important
}
/* 例外：三栏卡片图片 hover 放大也强制生效，不受系统"减少动态效果"影响 */
.tri-card .pic .img-slot {
	transition-duration: .6s!important
}
/* 例外：行业方案卡片随机漂浮的位移过渡也强制平滑生效，不受系统"减少动态效果"影响（否则会被压成瞬移、抖动难看） */
.sol-card {
	transition-duration: 1.6s!important
}
}

/* ==========================================================================
   首页 index.html 章节标题留白（作用域：body.home-page）
   --------------------------------------------------------------------------
   ⚠ 重要：index.html 只加载本文件（common.css），不加载 css/style.css。
     所以首页的任何样式都必须写在这里，写进 style.css 不会生效。

   .sec 自带 padding:76px 0（见上方“模块3”的 .sec 规则），标题的实际留白 =
   section 的 padding-top + 这里的 margin-top：
     · 模块3 #features / 模块7 #customers（padding 76px）：76 + 80 = 156px
     · 模块4 / 模块5（HTML 内联 padding-top:10px，刻意收紧与上一模块连排）：
       10 + 80 = 90px
   下间距统一 100px：相邻兄弟元素（.sec-desc 的 margin-top:26px、
   .tri-grid 的 margin-top:48px）会被 margin 折叠取大值，实际仍是 100px。

   标题内允许嵌 <span class="hl">…</span> 做蓝色高亮，与产品页
   crm_product_overview.html 的 .section-title 同色。

   作用域用 body.home-page 精确锁定首页：solution 六页的「典型案例」标题同样是
   .sec-title[data-reveal]，但它们加载 style.css、body 也没有 .home-page 类，
   不会被下面这三条命中（它们由 style.css 的 body.solution-page 系列单独处理）。
   ========================================================================== */
body.home-page .sec-title[data-reveal]{ margin:25px 0 100px; }
body.home-page .sec-title[data-reveal] .hl{ color:var(--blue); }
@media screen and (max-width:768px){
  body.home-page .sec-title[data-reveal]{ margin:40px 0 56px; }
}