/* TAVETOR 企业智能终端平台 — 页面样式。全站主色请修改下方 :root 变量。 */
:root {
	--ink: #182c42;
	--muted: #5c6e7d;
	--faint: #8493a0;
	--blue: #1769ac;
	--deep: #0e426e;
	--aqua: #169aa6;
	--line: #dfeaf0;
	--pale: #f3f9fc;
	--white: #fff;
	--max: 1180px;
	--shadow: 0 25px 75px rgba(33, 79, 113, .075);
	--radius: 22px
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 92px
}

body {
	margin: 0;
	color: var(--ink);
	background: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.72;
	-webkit-font-smoothing: antialiased
}

button,
input,
select {
	font: inherit
}

button {
	cursor: pointer
}

a {
	color: inherit;
	text-decoration: none
}

img {
	max-width: 100%;
	display: block
}

svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round
}

strong {
	font-weight: 750
}

::selection {
	background: #c8ebfa;
	color: #13324c
}

.container {
	width: min(var(--max), calc(100% - 76px));
	margin-inline: auto
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .14em;
	color: var(--blue);
	text-transform: uppercase
}

.eyebrow:before {
	content: "";
	width: 18px;
	height: 2px;
	background: #42a6d1;
	display: inline-block
}

.section {
	padding: 112px 0;
	position: relative
}

.section-title {
	font-size: clamp(29px, 3.5vw, 45px);
	line-height: 1.28;
	letter-spacing: -.045em;
	font-weight: 750;
	margin: 18px 0 16px
}

.section-intro {
	color: var(--muted);
	font-size: 16px;
	line-height: 1.92;
	max-width: 690px;
	margin: 0
}

.muted {
	color: var(--muted)
}

.smaller {
	font-size: 12px;
	color: var(--faint)
}

.lightbg {
	background: #f5f9fb
}

.btn {
	appearance: none;
	border: 1px solid transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 10px;
	min-height: 48px;
	padding: 11px 22px;
	font-size: 17px;
	font-weight: 700;
	transition: background .2s, transform .2s, border-color .2s, box-shadow .2s;
	white-space: nowrap
}

.btn:hover {
	transform: translateY(-2px)
}

.btn-primary {
	color: #fff;
	background: var(--blue);
	box-shadow: 0 12px 24px rgba(23, 105, 172, .13)
}

.btn-primary:hover {
	background: #105990;
	box-shadow: 0 16px 30px rgba(23, 105, 172, .2)
}

.btn-ghost {
	background: #fff;
	border-color: #d2e1ea;
	color: #274966
}

.btn-ghost:hover {
	border-color: #87b9d6;
	background: #f5fbff
}

.btn svg {
	width: 16px;
	height: 16px
}

.btn:focus-visible,
.nav-link:focus-visible,
.scenario-tab:focus-visible,
.selector:focus-visible,
summary:focus-visible,
.gallery-tile:focus-visible {
	outline: 3px solid #9bd9ed;
	outline-offset: 3px
}

/* header */
#scrollbar {
	height: 3px;
	width: 0;
	background: linear-gradient(90deg, #55c4d1, #1d6ab5);
	position: fixed;
	left: 0;
	top: 0;
	z-index: 110;
	pointer-events: none;
	transition: width .1s
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid rgba(222, 234, 241, .65);
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px)
}

.nav {
	height: 78px;
	display: flex;
	align-items: center;
	gap: 22px
}

.brand {
	display: flex;
	align-items: center;
	flex-shrink: 0
}

.brand-name {
	font-size: 21px;
	line-height: 1;
	letter-spacing: .055em;
	font-weight: 850;
	color: #173a5a
}

.brand-name sup {
	font-size: 8px;
	position: relative;
	top: -.8em;
	letter-spacing: 0
}

.brand-desc {
	font-size: 24px;
	color: #182c42;
	letter-spacing: .03em;
	margin-top: 5px
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 33px;
	margin-left: auto
}

.nav-link {
	font-size: 18px;
	color: #182c42;
	font-weight: 600;
	transition: color .2s
}

.nav-link:hover,
.nav-link.active {
	color: var(--blue)
}

.nav-cta {
	min-height: 39px;
	padding: 8px 17px;
	font-size: 12px;
	margin-left: 18px
}

.mobile-toggle {
	display: none;
	margin-left: auto;
	align-items: center;
	justify-content: center;
	border: 1px solid #d7e7ef;
	background: white;
	width: 40px;
	height: 40px;
	border-radius: 9px
}

/* hero */
.hero {
	position: relative;
	overflow: hidden;
	background: radial-gradient(ellipse at 86% 31%, #e2f3fa 0, transparent 43%), linear-gradient(113deg, #fff 24%, #f2f9fd 100%);
	border-bottom: 1px solid #ebf2f6
}

.hero:after {
	content: "";
	position: absolute;
	right: -12%;
	top: -47%;
	width: 880px;
	height: 880px;
	border: 1px solid rgba(133, 193, 221, .22);
	border-radius: 50%;
	box-shadow: 0 0 0 115px rgba(255, 255, 255, .11), 0 0 0 230px rgba(157, 207, 228, .055);
	pointer-events: none
}

.hero-inner {
	min-height: 670px;
	padding: 89px 0 90px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 55px;
	position: relative;
	z-index: 1
}

.hero h1 {
	font-weight: 790;
	letter-spacing: -.055em;
	line-height: 1.19;
	font-size: clamp(42px, 4.4vw, 62px);
	margin: 28px 0 24px;
	color: #152c42
}

.hero h1 em {
	color: #2175b6;
	font-style: normal
}

.hero-text {
	font-size: 17px;
	line-height: 1.95;
	color: #546c7d;
	max-width: 480px;
	margin: 0 0 32px
}

.hero-actions {
	display: flex;
	gap: 13px;
	flex-wrap: wrap
}

.hero-fine {
	margin-top: 43px;
	display: flex;
	align-items: center;
	gap: 16px;
	color: #73899a;
	font-size: 13px
}

.hero-fine i {
	width: 6px;
	height: 6px;
	border-radius: 100%;
	background: #5bbcc8
}

.hero-fine span {
	white-space: nowrap
}

.hero-art {
	position: relative;
	min-width: 0;
	padding: 25px 0 52px
}

.dash-main {
	border-radius: 17px;
	background: #fff;
	border: 1px solid #dfebf3;
	box-shadow: 0 35px 85px rgba(23, 79, 121, .13);
	overflow: hidden;
	transform: rotate(-2deg);
	position: relative;
	z-index: 1
}

.dash-top {
	height: 50px;
	display: flex;
	align-items: center;
	padding: 0 21px;
	border-bottom: 1px solid #e8f0f4;
	gap: 13px;
	font-size: 12px;
	color: #4c6e82
}

.dots {
	display: flex;
	gap: 5px
}

.dots b {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #d9e8ee
}

.dots b:first-child {
	background: #98d5df
}

.dash-name {
	font-weight: 750;
	margin-left: 5px
}

.dash-top .dash-url {
	margin-left: auto;
	color: #93a6b2
}

.dash-content {
	padding: 25px 26px 30px
}

.dash-label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 17px
}

.dash-label strong {
	font-size: 17px
}

.dash-label span {
	font-size: 11px;
	background: #e9f7f5;
	padding: 5px 11px;
	border-radius: 20px;
	color: #278d80
}

.dash-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 11px
}

.dash-stat {
	background: #f5f9fc;
	border: 1px solid #edf2f5;
	border-radius: 10px;
	padding: 14px 10px
}

.dash-stat small {
	font-size: 10px;
	color: #708c9c;
	display: block
}

.dash-stat strong {
	display: block;
	color: #1c5f95;
	font-size: 26px;
	line-height: 1.5
}

.dash-chart {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	height: 130px;
	border-bottom: 1px solid #dcebf2;
	margin: 20px 4px 0;
	padding: 0 6px 0
}

.dash-chart i {
	display: block;
	flex: 1;
	max-width: 50px;
	height: var(--h);
	background: linear-gradient(180deg, #88d9e9, #2a84c2);
	border-radius: 5px 5px 0 0;
	opacity: var(--o, 1);
	animation: grow .9s both;
	transform-origin: bottom
}

.dash-chart i:nth-child(2n) {
	background: linear-gradient(180deg, #c6e8ef, #7fbad2)
}

.dash-bottom {
	display: flex;
	justify-content: space-between;
	color: #93a9b6;
	font-size: 10px;
	margin: 10px 2px
}

.device-float{
    position:absolute;
    width:59%;
    height:auto;
    aspect-ratio:650 / 487;
    object-fit:contain;
    bottom:-13px;
    right:-42px;
    z-index:3;
    filter:drop-shadow(0 30px 26px rgba(23,42,65,.19));
    transform:rotate(1deg);
    animation:float 5s ease-in-out infinite;
}

.float-tag {
	position: absolute;
	z-index: 4;
	bottom: 36px;
	left: -35px;
	border: 1px solid #deedf5;
	background: rgba(255, 255, 255, .97);
	border-radius: 12px;
	padding: 13px 17px;
	box-shadow: 0 12px 40px rgba(30, 92, 125, .11);
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	color: #597482
}

.float-tag strong {
	display: block;
	color: #163a57;
	font-size: 14px
}

.float-tag .tag-icon {
	width: 37px;
	height: 37px;
	background: #e8f6fa;
	border-radius: 10px;
	display: grid;
	place-items: center;
	color: #148aab
}

.float-tag .tag-icon svg {
	width: 19px
}

.orbit {
	position: absolute;
	border: 1px dashed rgba(100, 167, 197, .25);
	border-radius: 100%;
	height: 510px;
	width: 510px;
	right: -120px;
	top: -70px;
	z-index: 0;
	pointer-events: none
}

/* trust, pain */
.ribbon {
	border-bottom: 1px solid #edf2f6;
	background: #fff
}

.ribbon-in {
	padding: 29px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 25px
}

.ribbon-label {
	font-weight: 700;
	color: #182c42;
	font-size: 18px;
	letter-spacing: .05em
}

.ribbon-items {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 11px 26px
}

.ribbon-items span {
	color: #50728a;
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 8px
}

.ribbon-items svg {
	width: 17px;
	height: 17px;
	color: #3b9fc5
}

.pain-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 42px
}

.pain-card {
	padding: 32px 30px 30px;
	border: 1px solid #e4edf2;
	background: #fff;
	border-radius: 17px;
	transition: transform .25s, box-shadow .25s
}

.pain-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow)
}

.number {
	color: #8cc5d8;
	font-weight: 800;
	letter-spacing: .1em;
	font-size: 16px
}

.pain-card h3 {
	font-size: 22px;
	margin: 19px 0 12px;
	letter-spacing: -.02em
}

.pain-card p {
	font-size: 16px;
	line-height: 1.9;
	color: var(--muted);
	margin: 0
}

.pain-conclusion {
	margin-top: 33px;
	display: flex;
	gap: 12px;
	align-items: center;
	max-width: 1000px;
	background: #eaf5fa;
	border-left: 3px solid #2496c7;
	padding: 18px 25px;
	border-radius: 0 11px 11px 0;
	color: #245b7f;
	font-size: 20px;
	font-weight: 700
}

/* b/s */
.bs-section {
	background: #f7fbfd
}

.bs-top {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 55px;
	align-items: end
}

.pill {
	display: inline-block;
	border: 1px solid #c8e6ed;
	color: #117c97;
	padding: 4px 12px;
	background: #edf9fb;
	border-radius: 30px;
	font-size: 14px;
	font-weight: 750;
	vertical-align: middle;
	margin-left: 12px
}

.bs-message {
	background: #fff;
	border: 1px solid #dfecf3;
	padding: 21px 24px;
	border-radius: 15px;
	color: #385e75;
	font-size: 15px;
	box-shadow: 0 8px 28px rgba(40, 90, 124, .045)
}

.bs-message strong {
	display: block;
	font-size: 18px;
	color: #194c73;
	margin-bottom: 4px
}

.bs-steps {
	margin: 40px 0 30px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 9px;
	align-items: center
}

.bs-step {
	border: 1px solid #dfebf2;
	border-radius: 11px;
	padding: 14px 15px;
	background: #fff;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 74px
}

.bs-step .step-round {
	height: 34px;
	width: 34px;
	flex: 0 0 34px;
	display: grid;
	place-items: center;
	background: #e9f6fa;
	color: #1472a0;
	border-radius: 10px
}

.bs-step .step-round svg {
	width: 18px
}

.bs-step strong {
	font-size: 15px;
	display: block;
	line-height: 1.4
}

.bs-step small {
	font-size: 13px;
	color: #8a9da9
}

.bs-step:not(:last-child) {
	position: relative
}

.bs-step:not(:last-child):after {
	content: "→";
	position: absolute;
	right: -13px;
	z-index: 1;
	color: #2a9ac3;
	font-size: 19px;
	font-weight: 700
}

.scenario-layout {
	display: grid;
	grid-template-columns: 255px 1fr;
	gap: 18px
}

.scenario-menu {
	display: flex;
	flex-direction: column;
	gap: 10px
}

.scenario-tab {
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	background: white;
	border: 1px solid #dfeaf0;
	border-radius: 13px;
	text-align: left;
	padding: 17px;
	transition: all .22s;
	color: #436379
}

.scenario-tab:hover {
	border-color: #accddd
}

.scenario-tab.active {
	background: #1266a5;
	color: white;
	border-color: #1266a5;
	box-shadow: 0 12px 20px rgba(17, 105, 169, .12)
}

.scenario-tab svg {
	flex-shrink: 0;
	width: 23px;
	height: 23px
}

.scenario-tab strong {
	font-size: 15px;
	display: block;
	line-height: 1.5
}

.scenario-tab small {
	font-size: 13px;
	opacity: .77
}

.scenario-view {
	border: 1px solid #dce9f1;
	background: white;
	border-radius: 17px;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(33, 82, 111, .05)
}

.demo-browser-top {
	background: #edf5fa;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 43px;
	padding: 0 20px;
	color: #708c9f;
	font-size: 11px
}

.demo-browser-address {
	background: #fff;
	border: 1px solid #dcebf2;
	border-radius: 6px;
	max-width: 66%;
	width: 300px;
	padding: 4px 12px;
	color: #5e849a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.demo-browser-body {
	display: grid;
	grid-template-columns: 210px 1fr;
	min-height: 344px
}

.demo-sidebar {
	background: #12446f;
	padding: 25px 18px;
	color: #d4eaf2
}

.demo-sidebar h4 {
	color: white;
	margin: 0 0 27px;
	font-size: 14px
}

.demo-sidebar .side-link {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	margin-bottom: 15px;
	opacity: .7
}

.demo-sidebar .side-link.current {
	opacity: 1;
	font-weight: 700
}

.demo-sidebar .side-link:before {
	content: "";
	width: 5px;
	height: 5px;
	background: #94dbe6;
	border-radius: 50%
}

.demo-inner {
	padding: 27px 30px 22px;
	min-width: 0
}

.demo-inner-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 23px
}

.demo-inner-title h3 {
	font-size: 17px;
	line-height: 1.45;
	margin: 0
}

.status {
	border-radius: 30px;
	padding: 3px 11px;
	font-size: 11px;
	font-weight: 700;
	background: #e2f7ed;
	color: #26916b
}

.mini-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 11px
}

.mini-metric {
	background: #f6f9fb;
	padding: 13px 13px;
	border-radius: 10px;
	border: 1px solid #eaf0f3
}

.mini-metric span {
	display: block;
	font-size: 11px;
	color: #7f95a2
}

.mini-metric b {
	font-size: 23px;
	color: #236b9f;
	display: block;
	line-height: 1.7
}

.data-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 19px;
	font-size: 11px;
	white-space: nowrap
}

.data-table th,
.data-table td {
	border-bottom: 1px solid #edf1f4;
	padding: 10px 5px;
	text-align: left;
	color: #6e8593
}

.data-table th {
	background: #f8fbfc;
	color: #557486;
	font-weight: 700
}

.dot-good {
	color: #168e69;
	font-weight: 700
}

.scenario-caption {
	padding: 18px 25px 21px;
	display: flex;
	justify-content: space-between;
	gap: 15px;
	border-top: 1px solid #e5eff4;
	align-items: center
}

.scenario-caption strong {
	display: block;
	font-size: 14px
}

.scenario-caption p {
	margin: 4px 0 0;
	color: #728997;
	font-size: 12px
}

.scenario-caption .small-note {
	font-size: 11px;
	color: #3e8aaf;
	white-space: nowrap
}

.value-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 25px
}

.value-list>div {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	color: #4b7185;
	padding: 10px
}

.value-list svg {
	color: #1e94ac;
	width: 19px;
	height: 19px;
	flex-shrink: 0
}

/* cost */
.cost-layout {
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	gap: 32px;
	align-items: stretch;
	margin-top: 43px
}

.cost-card {
	border: 1px solid #e1ebf0;
	border-radius: 18px;
	background: #fff;
	padding: 31px 32px;
	box-shadow: 0 10px 32px rgba(29, 81, 118, .035)
}

.cost-topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 26px
}

.cost-topline h3 {
	margin: 0;
	font-size: 24px
}

.cost-topline span {
	font-size: 13px;
	color: #8ca0ad
}

.bar-row {
	margin: 25px 0
}

.bar-label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin-bottom: 11px;
	font-size: 15px;
	color: #4f6b7d
}

.bar-label strong {
	font-size: 22px;
	color: #174e79;
	letter-spacing: -.02em
}

.bar-back {
	height: 18px;
	background: #edf3f7;
	border-radius: 6px;
	overflow: hidden
}

.bar-fill {
	height: 100%;
	width: 0;
	transition: width .6s cubic-bezier(.2, .8, .2, 1)
}

.bar-fill.pc {
	background: #87a9c2
}

.bar-fill.device {
	background: linear-gradient(90deg, #1d76b5, #48b7c3)
}

.saving-chip {
	margin-top: 36px;
	border-radius: 12px;
	background: #eaf6f7;
	padding: 22px 25px;
	display: flex;
	justify-content: space-between;
	gap: 15px;
	align-items: center
}

.saving-chip span {
	font-size: 18px;
	color: #406d78
}

.saving-chip strong {
	font-size: 31px;
	color: #087f91;
	line-height: 1.1;
	white-space: nowrap
}

.saving-chip small {
	display: block;
	color: #628c94;
	font-size: 13px;
	margin-top: 7px
}

.control-label {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: #486c83;
	margin-bottom: 10px
}

.switcher {
	display: flex;
	gap: 6px;
	padding: 4px;
	background: #edf5f9;
	border-radius: 10px;
	margin: 0 0 32px
}

.selector {
	flex: 1;
	padding: 10px 12px;
	border: none;
	background: transparent;
	border-radius: 7px;
	color: #6d8496;
	font-size: 15px;
	font-weight: 650
}

.selector.active {
	background: white;
	box-shadow: 0 2px 7px rgba(17, 74, 113, .09);
	color: #166aa6
}

.units {
	display: flex;
	align-items: baseline;
	gap: 7px;
	color: #7794a3;
	font-size: 13px;
	margin-bottom: 4px
}

.units strong {
	color: #184a70;
	font-size: 43px;
	letter-spacing: -.04em;
	line-height: 1.25
}

.range-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 12px;
	color: #718b99;
	margin-top: 19px
}

.cost-range {
	width: 100%;
	margin: 15px 0 3px;
	accent-color: #1677b9;
	cursor: pointer
}

.range-ticks {
	display: flex;
	justify-content: space-between;
	color: #a0adb7;
	font-size: 13px
}

.estimate-table {
	margin-top: 28px;
	border-top: 1px solid #e7eff4;
	padding-top: 21px
}

.estimate-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 12px;
	color: #5c7888;
	font-size: 18px;
	gap: 10px
}

.estimate-row b {
	font-size: 22px;
	color: #284c64
}

.estimate-row.total {
	margin-top: 20px;
	padding-top: 17px;
	border-top: 1px dashed #dbeaf0
}

.estimate-row.total b {
	font-size: 26px;
	color: #11869b
}

.cost-disclaimer {
	margin-top: 20px;
	font-size: 13px;
	color: #8295a2;
	line-height: 1.9
}

.disclaimer-line {
	margin-top: 27px;
	border-top: 1px solid #e9eff3;
	padding-top: 17px;
	font-size: 13px;
	color: #8899a4;
	line-height: 2
}

/* modes */
.mode-grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr 1fr;
	gap: 17px;
	margin-top: 40px
}

.mode-card {
	background: #fff;
	border-radius: 17px;
	padding: 29px;
	border: 1px solid #e1ebf0;
	min-height: 310px;
	position: relative;
	overflow: hidden
}

.mode-card.primary {
	background: #154e7c;
	color: white;
	border-color: #154e7c
}

.mode-card.primary:after {
	content: "";
	position: absolute;
	right: -97px;
	bottom: -145px;
	width: 340px;
	height: 340px;
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 100%;
	box-shadow: 0 0 0 58px rgba(255, 255, 255, .035), 0 0 0 116px rgba(255, 255, 255, .03)
}

.mode-id {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .14em;
	color: #8eb6cb
}

.mode-card.primary .mode-id {
	color: #92e5ed
}

.mode-card h3 {
	font-size: 25px;
	line-height: 1.25;
	margin: 17px 0
}

.mode-card p {
	color: #648095;
	line-height: 1.9;
	font-size: 15px;
	margin: 0 0 20px
}

.mode-card.primary p {
	color: #d2e5f2;
	max-width: 350px
}

.mode-card ul {
	padding: 0;
	margin: 0;
	list-style: none
}

.mode-card li {
	font-size: 15px;
	color: #527386;
	margin: 8px 0;
	display: flex;
	align-items: center;
	gap: 9px
}

.mode-card li:before {
	content: "";
	height: 5px;
	width: 5px;
	background: #2d98bc;
	border-radius: 50%;
	flex-shrink: 0
}

.mode-card.primary li {
	color: #e2f1f7
}

.mode-card.primary li:before {
	background: #65d3d3
}

.mode-note {
	padding: 20px 23px;
	border: 1px solid #dce9ef;
	border-radius: 0 11px 11px 0;
	margin-top: 18px;
	color: #647e8d;
	background: #eaf5fa;
	font-size: 16px;
	line-height: 1.8;
	border-left: 3px solid #2496c7
}

/* case */
.case-top {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 35px
}

.case-facts {
	display: flex;
	align-items: center;
	gap: 23px;
	flex-shrink: 0;
	padding-bottom: 6px
}

.case-facts>div {
	border-left: 1px solid #cadde8;
	padding-left: 23px
}

.case-facts strong {
	display: block;
	color: #1868a5;
	font-size: 29px;
	line-height: 1.2
}

.case-facts span {
	font-size: 13px;
	color: #8097a6
}

.case-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 17px;
	margin-top: 40px
}

.gallery-tile {
	appearance: none;
	border: 1px solid #dce8ed;
	background: white;
	text-align: left;
	padding: 0;
	border-radius: 14px;
	overflow: hidden;
	transition: transform .2s, box-shadow .2s
}

.gallery-tile:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 35px rgba(23, 61, 83, .1)
}

.gallery-img {
	height: 245px;
	overflow: hidden;
	background: #e9f0f4
}

.gallery-img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	transition: transform .4s
}

.gallery-tile:hover img {
	transform: scale(1.045)
}

.gallery-caption {
	padding: 18px 19px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px
}

.gallery-caption strong {
	font-size: 16px;
	display: block
}

.gallery-caption span {
	display: block;
	color: #8a9daa;
	font-size: 13px;
	margin-top: 2px
}

.gallery-caption svg {
	color: #5c93b7;
	width: 17px;
	height: 17px
}

.case-details {
	display: flex;
	align-items: center;
	gap: 13px;
	flex-wrap: wrap;
	margin-top: 21px;
	font-size: 16px;
	color: #6b8999
}

.case-details span {
	display: flex;
	align-items: center;
	gap: 8px
}

.case-details svg {
	width: 16px;
	height: 16px;
	color: #3796ad
}

/* FAQ CTA */
.faq-layout {
	display: grid;
	grid-template-columns: 310px 1fr;
	gap: 75px
}

.faq-list {
	border-top: 1px solid #dae7ee
}

.faq-list details {
	border-bottom: 1px solid #dae7ee;
	padding: 20px 0
}

.faq-list summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	font-weight: 700;
	font-size: 17px
}

.faq-list summary::-webkit-details-marker {
	display: none
}

.faq-list summary::after {
	content: "+";
	font-weight: 300;
	font-size: 24px;
	line-height: 1;
	color: #7ba9c4
}

.faq-list details[open] summary::after {
	content: "−"
}

.faq-list details p {
	margin: 12px 24px 4px 0;
	font-size: 15px;
	line-height: 1.9;
	color: #688192
}

.contact {
	background: linear-gradient(110deg, #164e79, #126b9a);
	color: white;
	position: relative;
	overflow: hidden
}

.contact:before {
	content: "";
	position: absolute;
	right: -180px;
	top: -260px;
	width: 700px;
	height: 700px;
	border: 1px solid rgba(255, 255, 255, .19);
	border-radius: 50%;
	box-shadow: 0 0 0 100px rgba(255, 255, 255, .035), 0 0 0 210px rgba(255, 255, 255, .025)
}

.contact-in {
	position: relative;
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	align-items: center;
	gap: 42px
}

.contact h2 {
	font-size: clamp(30px, 3.5vw, 44px);
	line-height: 1.3;
	letter-spacing: -.04em;
	margin: 15px 0
}

.contact p {
	font-size: 15px;
	color: #d1e5f0;
	max-width: 550px;
	line-height: 1.95
}

.contact .eyebrow {
	color: #a5e6eb
}

.contact .eyebrow:before {
	background: #95e5eb
}

.contact-cta {
	text-align: right
}

.contact-cta .btn {
	background: #fff;
	color: #145e91;
	min-height: 55px;
	padding: 13px 25px
}

.contact-cta small {
	display: block;
	color: #bedeea;
	margin-top: 14px;
	font-size: 13px
}

.footer {
	background: #fff;
	padding: 35px 0
}

.footer-row {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: center;
	color: #8497a4;
	font-size: 13px
}

.footer-logo {
	color: #19496c;
	font-weight: 850;
	font-size: 18px;
	letter-spacing: .03em
}

.footer-logo sup {
	font-size: 8px
}

.footer p {
	margin: 6px 0 0
}

.footer-right {
	text-align: right
}

/* modal */
.modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(10, 31, 50, .58);
	backdrop-filter: blur(5px)
}

.modal.open {
	display: flex
}

.modal-dialog {
	background: white;
	border-radius: 18px;
	width: min(620px, 100%);
	max-height: min(90vh, 900px);
	overflow: auto;
	box-shadow: 0 30px 90px rgba(4, 34, 55, .28);
	animation: modalIn .22s ease both;
	position: relative
}

.modal-head {
	padding: 30px 34px 17px;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: start
}

.modal-head h2 {
	margin: 4px 0 8px;
	font-size: 24px
}

.modal-head p {
	color: #6b8494;
	font-size: 15px;
	line-height: 1.8;
	margin: 0
}

.close {
	width: 35px;
	height: 35px;
	border-radius: 9px;
	background: #edf5f9;
	border: 0;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	color: #486e85
}

.close svg {
	width: 19px
}

.modal-body {
	padding: 0 34px 35px
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 17px;
	margin-top: 19px
}

.field label {
	display: block;
	font-size: 15px;
	color: #507186;
	font-weight: 700;
	margin-bottom: 8px
}

.field input,
.field select {
	width: 100%;
	border: 1px solid #dceaf1;
	background: #fafdff;
	border-radius: 9px;
	height: 45px;
	padding: 0 12px;
	color: #294d65;
	outline: none;
	font-size: 13px
}

.field input:focus,
.field select:focus {
	border-color: #63b7d6;
	box-shadow: 0 0 0 3px rgba(43, 150, 195, .11)
}

.form-actions {
	margin-top: 23px;
	display: flex;
	gap: 10px;
	align-items: center
}

.assess-result {
	margin-top: 23px;
	background: #f0f8fb;
	border: 1px solid #d5eaf3;
	padding: 22px;
	border-radius: 11px;
	display: none
}

.assess-result.show {
	display: block
}

.assess-result strong {
	font-size: 16px;
	color: #145f8a;
	display: block
}

.assess-result p {
	color: #56778a;
	font-size: 14px;
	margin: 9px 0;
	line-height: 1.85
}

.result-list {
	font-size: 13px;
	color: #567b8e;
	margin: 15px 0 18px;
	padding-left: 18px;
	line-height: 2
}

.assess-result .btn {
	font-size: 12px;
	min-height: 40px
}

.gallery-modal {
	width: min(1000px, 100%)
}

.lightbox-img {
	display: block;
	width: 100%;
	max-height: 67vh;
	object-fit: contain;
	background: #f4f7f9
}

.lightbox-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	padding: 20px 27px
}

.lightbox-foot strong {
	font-size: 16px
}

.lightbox-foot p {
	font-size: 13px;
	color: #7790a0;
	margin: 4px 0 0
}

.lightbox-nav {
	display: flex;
	gap: 8px
}

.lightbox-nav button {
	height: 35px;
	width: 39px;
	border-radius: 7px;
	background: #edf5f9;
	color: #457797;
	border: 1px solid #dce9f0;
	font-size: 20px
}

.toast {
	position: fixed;
	z-index: 240;
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%) translateY(30px);
	padding: 12px 20px;
	border-radius: 9px;
	background: #173d5e;
	color: white;
	font-size: 13px;
	box-shadow: 0 15px 30px rgba(22, 51, 75, .16);
	opacity: 0;
	pointer-events: none;
	transition: all .25s
}

.toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0)
}

.reveal {
	opacity: 1;
	transform: none
}

.reveal.visible {
	opacity: 1;
	transform: none
}

@keyframes grow {
	from {
		transform: scaleY(.12)
	}

	to {
		transform: scaleY(1)
	}
}

@keyframes float {

	0%,
	100% {
		transform: translateY(0) rotate(1deg)
	}

	50% {
		transform: translateY(-10px) rotate(1deg)
	}
}

@keyframes modalIn {
	from {
		opacity: 0;
		transform: translateY(16px) scale(.99)
	}

	to {
		opacity: 1;
		transform: none
	}
}

@media(max-width:1080px) {
	.nav-links {
		gap: 20px
	}

	.hero-inner {
		gap: 25px
	}

	.hero h1 {
		font-size: 48px
	}

	.device-float {
		right: -25px
	}

	.bs-top {
		grid-template-columns: 1fr 270px
	}

	.scenario-layout {
		grid-template-columns: 220px 1fr
	}

	.demo-browser-body {
		grid-template-columns: 160px 1fr
	}

	.value-list {
		grid-template-columns: repeat(2, 1fr)
	}

	.case-grid {
		grid-template-columns: repeat(3, 1fr)
	}

	.case-facts {
		gap: 12px
	}

	.case-facts>div {
		padding-left: 13px
	}

	.faq-layout {
		gap: 40px
	}
}

@media(max-width:850px) {
	.container {
		width: min(var(--max), calc(100% - 44px))
	}

	.nav-links {
		display: none;
		position: absolute;
		top: 76px;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: #fff;
		border-bottom: 1px solid #e0ebf0;
		box-shadow: 0 17px 35px rgba(24, 71, 102, .1);
		padding: 9px 23px
	}

	.nav-links.open {
		display: flex
	}

	.nav-link {
		padding: 13px 0
	}

	.mobile-toggle {
		display: flex
	}

	.nav-cta {
		margin-left: 0
	}

	.hero-inner {
		grid-template-columns: 1fr;
		gap: 25px;
		padding: 80px 0 65px
	}

	.hero h1 {
		max-width: 650px
	}

	.hero-text {
		max-width: 670px
	}

	.hero-art {
		max-width: 600px;
		margin: 0 auto;
		width: 90%;
		padding-bottom: 55px
	}

	.dash-main {
		transform: none
	}

	.device-float {
		width: 49%;
		right: -20px;
		bottom: -10px
	}

	.float-tag {
		left: -20px;
		bottom: 25px
	}

	.section {
		padding: 78px 0
	}

	.pain-grid {
		gap: 12px
	}

	.pain-card {
		padding: 25px 22px
	}

	.bs-top,
	.cost-layout,
	.faq-layout,
	.contact-in {
		grid-template-columns: 1fr
	}

	.bs-message {
		max-width: 580px
	}

	.scenario-layout {
		grid-template-columns: 1fr
	}

	.scenario-menu {
		display: grid;
		grid-template-columns: repeat(4, 1fr)
	}

	.scenario-tab {
		padding: 13px;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		gap: 6px
	}

	.scenario-tab small {
		display: none
	}

	.scenario-tab svg {
		width: 21px
	}

	.mode-grid {
		grid-template-columns: 1fr 1fr
	}

	.mode-card.primary {
		grid-column: span 2;
		min-height: 260px
	}

	.case-top {
		align-items: start;
		flex-direction: column
	}

	.case-grid {
		gap: 12px
	}

	.gallery-img {
		height: 200px
	}

	.contact-cta {
		text-align: left
	}
}

@media(max-width:600px) {
	.container {
		width: calc(100% - 34px)
	}

	.nav {
		height: 68px
	}

	.brand-name {
		font-size: 19px
	}

	.brand-desc {
		font-size: 9px
	}

	.nav-links {
		top: 67px
	}

	.nav-cta {
		display: none
	}

	.hero-inner {
		padding: 59px 0 54px
	}

	.hero h1 {
		font-size: clamp(36px, 10vw, 48px);
		margin-top: 21px
	}

	.hero-text {
		font-size: 15px
	}

	.hero-fine {
		gap: 10px;
		flex-wrap: wrap;
		margin-top: 30px
	}

	.hero-art {
		width: 95%;
		padding-bottom: 45px
	}

	.dash-content {
		padding: 17px 17px 21px
	}

	.dash-stats {
		gap: 5px
	}

	.dash-stat {
		padding: 9px 7px
	}

	.dash-stat strong {
		font-size: 20px
	}

	.dash-top {
		padding: 0 10px
	}

	.dash-url {
		display: none
	}

	.dash-chart {
		height: 95px;
		gap: 5px
	}

	.device-float {
		width: 55%;
		right: -15px
	}

	.float-tag {
		bottom: 12px;
		left: -16px;
		padding: 8px 11px;
		font-size: 10px
	}

	.float-tag strong {
		font-size: 11px
	}

	.float-tag .tag-icon {
		width: 29px;
		height: 29px
	}

	.ribbon-in {
		align-items: start;
		flex-direction: column;
		gap: 12px
	}

	.ribbon-items {
		gap: 10px 15px
	}

	.ribbon-items span {
		font-size: 12px
	}

	.section {
		padding: 63px 0
	}

	.section-title {
		font-size: 30px
	}

	.section-intro {
		font-size: 14px
	}

	.pain-grid,
	.bs-steps,
	.case-grid,
	.mode-grid {
		grid-template-columns: 1fr
	}

	.pain-grid {
		margin-top: 30px
	}

	.pain-card {
		padding: 23px
	}

	.pain-card h3 {
		margin: 8px 0
	}

	.bs-top {
		gap: 24px
	}

	.pill {
		margin: 12px 0 0
	}

	.bs-steps {
		gap: 7px;
		margin: 25px 0
	}

	.bs-step {
		min-height: 60px
	}

	.bs-step:not(:last-child):after {
		content: "↓";
		right: 50%;
		top: calc(100% - 7px);
		z-index: 2
	}

	.scenario-menu {
		grid-template-columns: repeat(2, 1fr)
	}

	.scenario-tab {
		padding: 12px 8px;
		flex-direction: row;
		text-align: left
	}

	.scenario-tab strong {
		font-size: 12px
	}

	.demo-sidebar {
		display: none
	}

	.demo-inner {
		padding: 20px 14px
	}

	.mini-metrics {
		gap: 6px
	}

	.mini-metric {
		padding: 11px 8px
	}

	.mini-metric b {
		font-size: 20px
	}

	.mini-metric span {
		font-size: 10px
	}

	.data-table {
		font-size: 10px
	}

	.data-table th:nth-child(3),
	.data-table td:nth-child(3) {
		display: none
	}

	.scenario-caption {
		padding: 15px
	}

	.scenario-caption .small-note {
		display: none
	}

	.value-list {
		grid-template-columns: 1fr 1fr;
		gap: 3px
	}

	.value-list>div {
		font-size: 12px;
		padding: 7px 0
	}

	.cost-layout {
		gap: 14px;
		margin-top: 28px
	}

	.cost-card {
		padding: 23px 19px
	}

	.saving-chip {
		padding: 19px;
		align-items: start;
		flex-direction: column
	}

	.saving-chip strong {
		font-size: 31px
	}

	.switcher .selector {
		font-size: 12px;
		padding: 10px 5px
	}

	.mode-card.primary {
		grid-column: auto
	}

	.mode-card {
		min-height: auto;
		padding: 23px
	}

	.case-facts {
		align-items: center
	}

	.case-facts strong {
		font-size: 24px
	}

	.gallery-img {
		height: 220px
	}

	.case-grid {
		margin-top: 26px
	}

	.faq-layout {
		gap: 22px
	}

	.contact-in {
		gap: 22px
	}

	.contact-cta .btn {
		width: 100%
	}

	.footer-row {
		align-items: start;
		flex-direction: column
	}

	.footer-right {
		text-align: left
	}

	.form-grid {
		grid-template-columns: 1fr
	}

	.modal-head {
		padding: 24px 22px 15px
	}

	.modal-body {
		padding: 0 22px 24px
	}

	.lightbox-foot {
		padding: 16px;
		align-items: start
	}

	.lightbox-foot strong {
		font-size: 13px
	}
}

@media(prefers-reduced-motion:reduce) {

	*,
	*:before,
	*:after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important
	}

	.reveal {
		opacity: 1;
		transform: none
	}
}

/* 页面内 SVG 图标符号定义（不参与排版） */
.svg-definitions {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden
}

/* 首页模拟业务面板柱状图 */
.dash-chart i:nth-child(1) {
	--h: 46%
}

.dash-chart i:nth-child(2) {
	--h: 70%
}

.dash-chart i:nth-child(3) {
	--h: 61%
}

.dash-chart i:nth-child(4) {
	--h: 81%
}

.dash-chart i:nth-child(5) {
	--h: 63%
}

.dash-chart i:nth-child(6) {
	--h: 90%
}

.dash-chart i:nth-child(7) {
	--h: 76%
}

.dash-chart i:nth-child(8) {
	--h: 99%
}

.dash-chart i:nth-child(9) {
	--h: 87%
}

.dash-chart i:nth-child(10) {
	--h: 69%
}

/* 成本条形图初始状态：交互切换后由 js/main.js 动态更新 */
.bar-fill.pc {
	width: 95.1%
}

.bar-fill.device {
	width: 55.6%
}


/* =========================
   联系信息区域
   ========================= */

.contact-info {
    padding: 48px 0 10px 0;
	/*
    background: #f3f8fb;
	*/
}

/* 三列布局，整体居中 */
.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: 1050px;
    margin: 0 auto;
}

/* 独立联系信息卡片 */
.contact-info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 1px;
    /*
	background: #ffffff;
    border: 1px solid #e4edf2;
	*/
    border-radius: 12px;
    min-width: 0;
}

/* 图标容器 */
.contact-info-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf5fa;
    border-radius: 10px;
    color: #2496c7;
}

/* 图标样式 */
.contact-info-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 联系信息文字 */
.contact-info-item span {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
    color: #252525;
    overflow-wrap: anywhere;
}

/* 手机端适配 */
@media (max-width: 768px) {
    .contact-info-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }

    .contact-info-item {
        padding: 20px;
    }
}


/* =========================
   Footer 业务导航
   ========================= */

/* 导航整体布局 */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 36px;
    padding-top: 20px;
    margin-bottom: 25px;
    border-top: 1px solid #ebebeb;
	font-size: 15px;
}

/* 所有链接统一样式 */
.footer-links a,
.footer-links a:visited {
    font-size: 15px;
    font-weight: 500;
    color: #182c42;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* 鼠标悬停 */
.footer-links a:hover {
    color: #168ac2;
}

/* 键盘操作焦点 */
.footer-links a:focus-visible {
    outline: 2px solid #168ac2;
    outline-offset: 4px;
    border-radius: 2px;
}

@media (max-width: 768px) {
    .contact-info .pain-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }
}