/*
 * JMP 页面全新视觉样式 · 2026
 * 请在原基础 CSS 之后引入本文件。
 * 适配桌面、平板和手机端，不修改原 HTML 功能。
 */

/* JMP 页面现代化样式
   用法：放在原有 CSS 之后引入，确保本文件最后加载。 */
:root {
	--jmp-primary: #1769e0;
	--jmp-primary-dark: #0b3f99;
	--jmp-accent: #34b4ff;
	--jmp-ink: #10233f;
	--jmp-muted: #5f6f85;
	--jmp-line: #dce5f0;
	--jmp-surface: #ffffff;
	--jmp-soft: #f4f8fd;
	--jmp-dark: #071a35;
	--jmp-radius: 18px;
	--jmp-shadow: 0 18px 50px rgba(20, 57, 100, .12);
}

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body.zh_cn {
	margin: 0;
	color: var(--jmp-ink);
	background: var(--jmp-surface);
	font-family: "Inter", "PingFang SC", "Microsoft YaHei", Arial,
		sans-serif;
	font-size: 16px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--jmp-primary);
	text-decoration: none;
	transition: color .2s ease, opacity .2s ease;
}

a:hover {
	color: var(--jmp-primary-dark);
}

img {
	max-width: 100%;
}

/* 顶部导航 */
.header {
	position: sticky;
	z-index: 1000;
	top: 0;
	background: rgba(255, 255, 255, .94);
	border-bottom: 1px solid rgba(220, 229, 240, .85);
	box-shadow: 0 5px 22px rgba(14, 42, 78, .06);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

#header-wrapper, #nav-main {
	max-width: 1240px;
	margin: 0 auto;
	padding-inline: 24px;
}

.mod-header {
	min-height: 70px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

#logo {
	color: var(--jmp-ink);
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -.3px;
	white-space: nowrap;
}

#logo::before {
	content: "J";
	display: inline-grid;
	width: 36px;
	height: 36px;
	margin-right: 10px;
	place-items: center;
	color: #fff;
	background: linear-gradient(135deg, var(--jmp-primary),
		var(--jmp-accent));
	border-radius: 10px;
	box-shadow: 0 8px 18px rgba(23, 105, 224, .25);
}

#utility-nav {
	display: flex;
	align-items: center;
	gap: 16px;
}

#utility-nav ul, #nav-main ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.profileLogin {
	margin: 0;
}

.profhref {
	padding: 9px 16px;
	color: var(--jmp-primary);
	background: #edf5ff;
	border: 1px solid #cde1fb;
	border-radius: 999px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

#searchBox {
	position: relative;
	display: flex;
	align-items: center;
}

#searchBox label {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	clip: rect(0, 0, 0, 0);
}

#searchField {
	width: 190px;
	height: 40px;
	padding: 0 42px 0 15px;
	color: var(--jmp-ink);
	background: var(--jmp-soft);
	border: 1px solid var(--jmp-line);
	border-radius: 999px;
	outline: none;
	transition: .2s ease;
}

#searchField:focus {
	width: 230px;
	background: #fff;
	border-color: var(--jmp-primary);
	box-shadow: 0 0 0 4px rgba(23, 105, 224, .1);
}

.searchButton {
	position: absolute;
	right: 5px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--jmp-primary);
	color: transparent;
	cursor: pointer;
}

.searchButton::after {
	content: "⌕";
	color: #fff;
	font-size: 19px;
}

.mdd {
	border-top: 1px solid #edf1f6;
}

#nav-main>ul {
	display: flex;
	align-items: center;
	gap: 4px;
	min-height: 52px;
}

#nav-main>ul>li {
	position: relative;
}

#nav-main>ul>li>a {
	display: block;
	padding: 14px 17px;
	color: #33465f;
	font-size: 14px;
	font-weight: 650;
	line-height: 24px;
	border-radius: 9px;
}

#nav-main>ul>li>a:hover {
	color: var(--jmp-primary);
	background: #f0f6ff;
}

#mdd-buy-jmp, #mdd-try-jmp {
	color: #fff !important;
	background: var(--jmp-primary);
}

#mdd-buy-jmp:hover, #mdd-try-jmp:hover {
	background: var(--jmp-primary-dark) !important;
}

/* 首屏 */
.breadcrumb {
	display: none;
}

.container {
	position: relative;
	overflow: hidden;
}

.container>.par {
	position: relative;
	z-index: 2;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 24px;
}

.transom.branding-jmp {
	min-height: 570px;
	display: grid;
	align-items: center;
	color: #fff;
	background: radial-gradient(circle at 80% 25%, rgba(52, 180, 255, .24),
		transparent 36%),
		linear-gradient(125deg, #061b3b 0%, #0a3e82 58%, #1769e0 100%);
}

.transom.branding-jmp>.bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: .38;
}

.transom.branding-jmp>.bg img, .transom.branding-jmp>.bg .cmp-image,
	.transom.branding-jmp>.bg .cmp-image__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.transom.branding-jmp h1 {
	max-width: 680px;
	margin: 0 0 20px;
	color: #fff;
	font-size: clamp(44px, 6vw, 76px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -2.5px;
}

.transom.branding-jmp h1 sup {
	color: #69caff;
	font-size: .3em;
	vertical-align: top;
}

.transom.branding-jmp .p-large {
	max-width: 690px;
	color: rgba(255, 255, 255, .83);
	font-size: 18px;
	line-height: 1.85;
}

.list-none {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.button {
	display: inline-block;
}

.button a {
	display: inline-flex;
	min-height: 48px;
	padding: 11px 24px;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: linear-gradient(135deg, #2684ff, #1264d3);
	border: 1px solid rgba(255, 255, 255, .23);
	border-radius: 11px;
	box-shadow: 0 10px 25px rgba(0, 66, 158, .25);
	font-weight: 700;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.button a:hover {
	color: #fff;
	background: linear-gradient(135deg, #4b9aff, #1769e0);
	box-shadow: 0 14px 30px rgba(0, 66, 158, .35);
	transform: translateY(-2px);
}

.list-none li+li .button a {
	color: #fff;
	background: rgba(255, 255, 255, .1);
	backdrop-filter: blur(8px);
}

/* 产品展示 */
.container.software {
	padding-block: 86px 70px;
	background: linear-gradient(180deg, #fff 0%, #f6f9fd 100%);
}

.container.software>.par {
	max-width: 1180px;
}

.cq-colctrl-lt9 {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: 70px;
	align-items: center;
}

.cq-colctrl-lt9.text-flip-right .cq-colctrl-lt9-c0 {
	order: 2;
}

.cq-colctrl-lt9.text-flip-right .cq-colctrl-lt9-c1 {
	order: 1;
}

.sub-capability-cards {
	padding: 16px 0;
}

.sub-capability-cards h2 {
	margin: 0 0 12px;
	color: var(--jmp-ink);
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.18;
	letter-spacing: -1.2px;
}

.sub-capability-cards h5 {
	margin: 0 0 16px;
	color: var(--jmp-primary);
	font-size: 17px;
	font-weight: 750;
}

.sub-capability-cards p {
	margin: 0 0 18px;
	color: var(--jmp-muted);
}

.sub-capability-cards p a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 750;
}

.sub-capability-cards p a::after {
	content: "→";
	transition: transform .2s ease;
}

.sub-capability-cards p a:hover::after {
	transform: translateX(4px);
}

.cq-colctrl-lt9-c1 .image {
	padding: 18px;
	background: rgba(255, 255, 255, .9);
	border: 1px solid var(--jmp-line);
	border-radius: var(--jmp-radius);
	box-shadow: var(--jmp-shadow);
	transition: transform .25s ease, box-shadow .25s ease;
}

.cq-colctrl-lt9-c1 .image:hover {
	transform: translateY(-5px);
	box-shadow: 0 25px 60px rgba(20, 57, 100, .17);
}

.cq-colctrl-lt9-c1 .cmp-image__image {
	width: 100%;
	border-radius: 11px;
}

/* 深色品牌条 */
.vertical-carousel-list {
	padding: 54px 0;
	background: linear-gradient(135deg, #071a35, #0b3974);
}

.vertical-carousel-list>.bg {
	opacity: 0;
}

.vertical-carousel-list h3 {
	margin: 0;
	color: #fff;
	font-size: clamp(24px, 3vw, 34px);
	letter-spacing: -.6px;
}

/* 三列价值区 */
.larger-text {
	padding: 82px 0 92px;
	background: #fff;
}

.larger-text h2 {
	max-width: 820px;
	margin: 0 auto 48px;
	color: var(--jmp-ink);
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.25;
	letter-spacing: -1.2px;
}

.cq-colctrl-lt3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.cq-colctrl-lt3>div {
	position: relative;
	padding: 30px 28px;
	background: var(--jmp-soft);
	border: 1px solid #e4ebf4;
	border-radius: var(--jmp-radius);
	transition: transform .22s ease, border-color .22s ease, box-shadow .22s
		ease;
}

.cq-colctrl-lt3>div::before {
	content: "";
	display: block;
	width: 42px;
	height: 5px;
	margin-bottom: 23px;
	background: linear-gradient(90deg, var(--jmp-primary), var(--jmp-accent));
	border-radius: 99px;
}

.cq-colctrl-lt3>div:hover {
	border-color: #bfd7f6;
	box-shadow: 0 16px 38px rgba(20, 57, 100, .1);
	transform: translateY(-4px);
}

.cq-colctrl-lt3 h4 {
	margin: 0 0 13px;
	color: var(--jmp-ink);
	font-size: 21px;
}

.cq-colctrl-lt3 p {
	margin: 0;
	color: var(--jmp-muted);
	font-size: 15px;
	line-height: 1.85;
}

/* 底部 CTA：页面中第二个 transom */
.larger-text+.styledcontainer .transom.branding-jmp, .styledcontainer:last-child .transom.branding-jmp
	{
	min-height: 320px;
	text-align: center;
}

.transom.branding-jmp h3 {
	margin: 0 0 25px;
	color: #fff;
	font-size: clamp(30px, 4vw, 46px);
}

.transom.branding-jmp .list-none[style] {
	justify-content: center;
}

/* 页脚 */
.footer {
	color: #bcc9d8;
	background: #061426;
}

#footer-wrapper {
	max-width: 1180px;
	margin: 0 auto;
	padding: 58px 24px 34px;
}

.footer .cq-colctrl-lt7 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 34px;
}

.footer .txt-large {
	color: #fff;
	font-size: 16px;
	font-weight: 750;
}

.footer ul {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.footer li {
	margin: 8px 0;
}

.footer a {
	color: #aebed0;
	font-size: 14px;
}

.footer a:hover {
	color: #fff;
}

/* 清理旧模板间距 */
.verticalspacer .vspace {
	max-height: 30px !important;
}

[style*="clear"] {
	min-height: 0;
}

/* 响应式 */
@media ( max-width : 900px) {
	.mod-header {
		min-height: 62px;
	}
	#utility-nav {
		gap: 8px;
	}
	#searchBox {
		display: none;
	}
	#nav-main {
		overflow-x: auto;
		scrollbar-width: none;
	}
	#nav-main::-webkit-scrollbar {
		display: none;
	}
	#nav-main>ul {
		width: max-content;
	}
	#nav-main>ul>li>a {
		padding-inline: 13px;
	}
	.transom.branding-jmp {
		min-height: 500px;
	}
	.cq-colctrl-lt9, .cq-colctrl-lt3 {
		grid-template-columns: 1fr;
	}
	.cq-colctrl-lt9 {
		gap: 28px;
	}
	.cq-colctrl-lt9.text-flip-right .cq-colctrl-lt9-c0 {
		order: 1;
	}
	.cq-colctrl-lt9.text-flip-right .cq-colctrl-lt9-c1 {
		order: 2;
	}
	.container.software {
		padding-block: 62px 45px;
	}
	.footer .cq-colctrl-lt7 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media ( max-width : 600px) {
	#header-wrapper, #nav-main, .container>.par, #footer-wrapper {
		padding-inline: 18px;
	}
	#logo {
		font-size: 15px;
	}
	#logo::before {
		width: 32px;
		height: 32px;
		margin-right: 7px;
	}
	.utility-nav-profile {
		display: none;
	}
	#nav-main>ul>li>a {
		font-size: 13px;
	}
	.transom.branding-jmp {
		min-height: 480px;
	}
	.transom.branding-jmp h1 {
		font-size: 44px;
		letter-spacing: -1.5px;
	}
	.transom.branding-jmp .p-large {
		font-size: 16px;
	}
	.list-none {
		display: grid;
		grid-template-columns: 1fr;
	}
	.button, .button a {
		width: 100%;
	}
	.container.software {
		padding-block: 48px 28px;
	}
	.cq-colctrl-lt9 {
		gap: 20px;
	}
	.cq-colctrl-lt9-c1 .image {
		padding: 10px;
		border-radius: 14px;
	}
	.larger-text {
		padding-block: 58px;
	}
	.larger-text h2 {
		margin-bottom: 30px;
	}
	.cq-colctrl-lt3>div {
		padding: 25px 22px;
	}
	.footer .cq-colctrl-lt7 {
		grid-template-columns: 1fr 1fr;
		gap: 22px;
	}
}

@media ( prefers-reduced-motion : reduce) {
	*, *::before, *::after {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}

/* 与旧版 JMP 基础库的冲突修正 */
body.zh_cn, body.zh_CN {
	font-size: 16px;
	color: var(--jmp-ink);
}

body.zh_cn h1, body.zh_cn h2, body.zh_cn h3, body.zh_cn h4, body.zh_cn h5,
	body.zh_cn h6, body.zh_CN h1, body.zh_CN h2, body.zh_CN h3, body.zh_CN h4,
	body.zh_CN h5, body.zh_CN h6 {
	font-family: "Inter", "PingFang SC", "Microsoft YaHei", Arial,
		sans-serif;
}

#content {
	overflow: hidden;
}

#page-content {
	background: #fff;
}

.dark-button .button, .dark-button-center .button {
	min-width: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-sizing: border-box;
}

.dark-button .button:hover, .dark-button-center .button:hover {
	min-width: 0;
	background: transparent;
	border: 0;
}

.dark-button ul li, .dark-button-center ul li {
	margin: 0;
}

.container.software .parsys_column, .container.larger-text .parsys_column
	{
	width: auto;
	float: none;
	margin: 0;
}

.container.software .cq-colctrl-lt9::before, .container.software .cq-colctrl-lt9::after,
	.container.larger-text .cq-colctrl-lt3::before, .container.larger-text .cq-colctrl-lt3::after
	{
	display: none;
}