:root {
	--blue:#2f7cf6;
	--blue-2:#1b66ea;
	--blue-soft:#eaf2ff;
	--ink:#1a2336;
	--muted:#7b8699;
	--line:#e7eef6;
	--bg:#f6f9fd;
	--card:#fff;
	--shadow:0 12px 32px rgba(28,70,130,.08);
	--radius:14px
}
* {
	box-sizing:border-box
}
html {
	scroll-behavior:smooth;
	overflow-x:hidden
}
body {
	margin:0;
	color:var(--ink);
	font:16px/1.7 "PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
	background:#fff
}
a {
	text-decoration:none;
	color:inherit
}
img {
	max-width:100%;
	border:0
}
button {
	font:inherit
}
.container {
	max-width:1200px;
	margin:auto;
	padding:0 24px
}

/* icons */
.ico {
	width:1em;
	height:1em;
	display:inline-block;
	vertical-align:-.15em;
	background:currentColor;
	-webkit-mask:var(--ico) center/contain no-repeat;
	mask:var(--ico) center/contain no-repeat
}
.ico-phone { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3.8h2.6l1.3 3.6-2 1.2a12.4 12.4 0 0 0 6.7 6.7l1.2-2 3.6 1.3v2.6c0 1-.9 2.1-2.1 2.2C9.4 20.2 3.8 14.6 3.6 5.9c.1-1.2 1.2-2.1 3-2.1z'/%3E%3C/svg%3E") }
.ico-mail { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E") }
.ico-chat { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16.5 3.8 20 8 18.2A8.5 8.5 0 1 0 5 16.5z'/%3E%3C/svg%3E") }
.ico-pin { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11.2A7 7 0 0 0 5 9.8C5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.8' r='2.2'/%3E%3C/svg%3E") }
.ico-arrow { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") }
.ico-left { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14.5 5-7 7 7 7'/%3E%3C/svg%3E") }
.ico-right { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 5 7 7-7 7'/%3E%3C/svg%3E") }
.ico-plus { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") }
.ico-doc { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l5 5V20a1.5 1.5 0 0 1-1.5 1.5h-10.5A1.5 1.5 0 0 1 5.5 20V5A1.5 1.5 0 0 1 7 3.5z'/%3E%3Cpath d='M14 3.5V9h5.5M8.5 13h7M8.5 17h5'/%3E%3C/svg%3E") }
.ico-building { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 21V6.5L12 3l7.5 3.5V21'/%3E%3Cpath d='M9 21v-6h6v6M9 9.5h.01M12 9.5h.01M15 9.5h.01M9 13h.01M12 13h.01M15 13h.01'/%3E%3C/svg%3E") }
.ico-chart { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19h16M7 16v-5M12 16V8M17 16v-8'/%3E%3C/svg%3E") }
.ico-cart { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.2'/%3E%3Ccircle cx='18' cy='20' r='1.2'/%3E%3Cpath d='M3 4h2l2.2 11.2h11.3L21 8H6.4'/%3E%3C/svg%3E") }
.ico-code { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 8-4 4 4 4M16 8l4 4-4 4M13 6l-2 12'/%3E%3C/svg%3E") }
.ico-rocket { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 20 4.5 12.2 20l-1.7-6.3z'/%3E%3C/svg%3E") }
.ico-gem { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 10.2 12 21l8.2-10.8L16.5 4H7.5z'/%3E%3Cpath d='M3.8 10.2h16.4M8.2 4l3.8 6.2L15.8 4'/%3E%3C/svg%3E") }
.ico-headset { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 13v-1a7.5 7.5 0 0 1 15 0v1'/%3E%3Cpath d='M4.5 13.5h2.4A1.6 1.6 0 0 1 8.5 15v3A1.6 1.6 0 0 1 6.9 19.6H4.5zM19.5 13.5h-2.4A1.6 1.6 0 0 0 15.5 15v3a1.6 1.6 0 0 0 1.6 1.6h2.4z'/%3E%3C/svg%3E") }
.ico-file { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3.5' width='12' height='17' rx='2'/%3E%3Cpath d='M9 8.5h6M9 12.5h6M9 16.5h4'/%3E%3C/svg%3E") }
.ico-pen { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L20 8l-4-4L4 16z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E") }
.ico-display { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='12' rx='1.6'/%3E%3Cpath d='M8 20h8M12 16.5V20'/%3E%3C/svg%3E") }
.ico-shield { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 19.5 7v5.3c0 4.4-3 6.9-7.5 8.2C8 19.2 4.5 16.7 4.5 12.3V7z'/%3E%3Cpath d='m8.8 12.2 2.2 2.2 4.2-4.4'/%3E%3C/svg%3E") }
.ico-tablet { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='3' width='13' height='18' rx='2'/%3E%3Cpath d='M12 17.8h.01'/%3E%3C/svg%3E") }
.ico-layout { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='1.6'/%3E%3Cpath d='M3.5 9h17M10 9v10.5'/%3E%3C/svg%3E") }
.ico-wechat { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9.6 4.2c-3.9 0-7 2.6-7 5.9 0 1.9 1.1 3.6 2.8 4.7l-.7 2.1 2.4-1.2c.7.2 1.5.3 2.3.3.3 0 .5 0 .8 0A5.4 5.4 0 0 1 9.4 14c0-3.2 3.1-5.8 7-5.9-.6-2.3-3.1-3.9-6.8-3.9zm-2.3 3.3a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8zm4.6 0a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8zM16.4 8.8c-3.5 0-6.3 2.3-6.3 5.2s2.8 5.2 6.3 5.2c.6 0 1.2-.1 1.8-.2l2 .9-.5-1.7c1.4-.9 2.3-2.3 2.3-4.2 0-2.9-2.8-5.2-6.3-5.2zm-2.1 3.4a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5zm4.2 0a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5z'/%3E%3C/svg%3E") }

/* header */
.site-header {
	height:76px;
	background:#fff;
	border-bottom:1px solid #f0f3f8;
	position:sticky;
	top:0;
	z-index:30
}
.nav-wrap {
	height:100%;
	display:flex;
	align-items:center;
	gap:28px
}
.brand img {
	display:block;
	height:55px;
	width:auto;
	max-width:168px;
	object-fit:contain
}
.main-nav {
	display:flex;
	justify-content:center;
	gap:34px;
	flex:1;
	height:100%
}
.main-nav a {
	height:100%;
	display:flex;
	align-items:center;
	position:relative;
	font-size:15px;
	color:#3a465c
}
.main-nav a:hover {
	color:var(--blue)
}
.main-nav a.active {
	color:var(--blue);
	font-weight:700
}
.main-nav a.active:after {
	content:"";
	height:3px;
	width:22px;
	left:50%;
	bottom:12px;
	margin-left:-11px;
	background:var(--blue);
	border-radius:3px;
	position:absolute
}
.nav-contact {
	display:flex;
	align-items:center;
	gap:16px;
	margin-left:auto;
	font-weight:700;
	font-size:15px
}
.nav-wechat {
	display:inline-flex;
	align-items:center;
	gap:8px;
	color:#1f2a3d;
	white-space:nowrap
}
.nav-wechat .ico {
	width:18px;
	height:18px;
	color:#07c160
}
.menu-toggle {
	display:none;
	background:transparent;
	border:0;
	padding:8px;
	cursor:pointer
}
.menu-toggle span {
	display:block;
	width:18px;
	height:2px;
	background:var(--ink);
	margin:4px 0;
	border-radius:2px
}

/* buttons */
.btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	min-height:46px;
	border-radius:8px;
	padding:0 22px;
	font-weight:700;
	font-size:15px;
	border:1px solid transparent;
	transition:.2s
}
.btn .ico {
	width:16px;
	height:16px
}
.btn:hover {
	transform:translateY(-1px);
	filter:brightness(1.04)
}
.btn-small {
	min-height:40px;
	padding:0 18px;
	border-radius:8px
}
.btn-blue,.btn-orange {
	color:#fff;
	background:linear-gradient(180deg,#4b8fff,#2f7cf6);
	box-shadow:0 8px 18px rgba(47,124,246,.28)
}
.btn-ghost,.btn-outline,.btn-line,.btn-light {
	color:var(--blue);
	background:#fff;
	border-color:#c9dcff;
	margin-left:12px
}
.btn-ghost:hover,.btn-outline:hover,.btn-line:hover {
	background:#f4f8ff
}

/* sections */
.section {
	padding:72px 0;
	scroll-margin-top:88px
}
.eyebrow {
	margin:0 0 10px;
	font-size:14px;
	color:var(--blue);
	letter-spacing:.5px;
	display:flex;
	align-items:center;
	gap:8px;
	font-weight:600
}
.eyebrow:before {
	content:"";
	width:18px;
	height:2px;
	background:var(--blue);
	border-radius:2px
}
.section-head {
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:16px;
	margin-bottom:28px
}
.section-head h2,.section-title h2 {
	margin:0;
	font-size:32px;
	line-height:1.3;
	letter-spacing:.5px
}
.section-head p,.section-title p {
	margin:0;
	color:var(--muted)
}
.section-head.is-center {
	justify-content:center;
	text-align:center
}
.section-head.is-center .eyebrow {
	justify-content:center
}
.section-title {
	text-align:center;
	margin-bottom:32px
}
.section-title em {
	display:block;
	width:24px;
	height:2px;
	background:var(--blue);
	margin:12px auto 0
}
.more-link {
	color:var(--blue);
	font-size:14px;
	font-weight:700;
	display:inline-flex;
	align-items:center;
	gap:4px;
	white-space:nowrap
}
.more-link .ico {
	width:14px;
	height:14px
}

/* hero */
.hero {
	position:relative;
	overflow:hidden;
	color:var(--ink);
	padding:18px 0 8px;
	background:linear-gradient(180deg,#f3f8ff 0%,#eef5ff 48%,#fff 100%)
}
.hero-bg {
	position:absolute;
	inset:0;
	background:
		radial-gradient(ellipse 42% 46% at 78% 40%,#d6e7ff 0%,transparent 70%),
		radial-gradient(ellipse 30% 36% at 8% 86%,#e7f1ff 0%,transparent 70%)
}
.hero-inner {
	position:relative;
	display:grid;
	grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
	align-items:center;
	gap:10px;
	min-height:540px
}
.hero-copy {
	padding:18px 0 24px;
	z-index:1
}
.hero h1 {
	margin:0 0 18px;
	font-size:46px;
	line-height:1.22;
	letter-spacing:1px;
	font-weight:800
}
.hero-checks {
	display:flex;
	flex-wrap:wrap;
	gap:10px 18px;
	margin:0 0 16px;
	padding:0;
	list-style:none
}
.hero-checks li {
	display:flex;
	align-items:center;
	gap:6px;
	font-size:14px;
	color:#2d3a50;
	font-weight:600
}
.hero-checks li:before {
	content:"";
	width:16px;
	height:16px;
	border-radius:50%;
	background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 8.2 6.6 11 12 5.4'/%3E%3C/svg%3E") center/12px no-repeat;
	flex:none
}
.hero-desc {
	margin:0 0 26px;
	max-width:520px;
	color:#66748a;
	font-size:14px;
	line-height:1.85
}
.hero-actions {
	display:flex;
	flex-wrap:wrap;
	align-items:center
}
.hero-visual {
	position:relative;
	min-height:500px;
	padding:36px 0 58px
}
.hero-bubble {
	position:absolute;
	right:6%;
	top:8px;
	z-index:5;
	color:var(--blue);
	font-size:18px;
	line-height:1.35;
	font-weight:800
}
.hero-bubble-arrow {
	position:absolute;
	left:-78px;
	top:18px;
	width:86px;
	height:50px
}
.device {
	--frame:#e7edf3
}
.device-screen {
	overflow:hidden;
	background:#d9e6f6
}
.device-screen img {
	width:100%;
	height:100%;
	object-fit:cover;
	display:block
}
.device-imac {
	width:74%;
	margin-left:2%
}
.device-imac .device-screen {
	aspect-ratio:16/10.2;
	border:10px solid #eef2f6;
	border-bottom:0;
	border-radius:12px 12px 0 0;
	box-shadow:0 18px 50px rgba(28,70,130,.16)
}
.device-chin {
	height:22px;
	background:linear-gradient(#f4f7fa,#e5ebf1);
	border-radius:0 0 10px 10px;
	position:relative
}
.device-chin:after {
	content:"";
	width:8px;
	height:8px;
	border-radius:50%;
	background:#c5ced8;
	position:absolute;
	left:50%;
	top:6px;
	margin-left:-4px
}
.device-stand {
	width:86px;
	height:28px;
	margin:-2px auto 0;
	background:linear-gradient(#dfe6ee,#c9d3de);
	clip-path:polygon(22% 0,78% 0,100% 100%,0 100%)
}
.device-foot {
	width:118px;
	height:6px;
	margin:0 auto;
	border-radius:6px;
	background:#c5ced8
}
.device-laptop {
	position:absolute;
	left:16%;
	bottom:52px;
	width:48%;
	z-index:2
}
.device-lid {
	border:8px solid #dfe5ec;
	border-bottom:4px solid #d5dde6;
	border-radius:10px 10px 0 0;
	background:#dfe5ec;
	box-shadow:0 16px 32px rgba(28,70,130,.16)
}
.device-laptop .device-screen {
	aspect-ratio:16/10;
	border-radius:4px
}
.device-base {
	height:10px;
	background:linear-gradient(#e9eef3,#d4dce5);
	border-radius:0 0 10px 10px;
	position:relative
}
.device-base:after {
	content:"";
	position:absolute;
	left:50%;
	top:2px;
	width:56px;
	height:4px;
	margin-left:-28px;
	border-radius:4px;
	background:#c5ced6
}
.hero-feat {
	position:absolute;
	right:0;
	top:92px;
	width:168px;
	background:#fff;
	border-radius:14px;
	box-shadow:0 16px 36px rgba(28,70,130,.12);
	padding:16px 16px 20px;
	z-index:3
}
.hero-feat ul {
	margin:0;
	padding:0;
	list-style:none
}
.hero-feat li {
	display:flex;
	align-items:center;
	gap:8px;
	font-size:13px;
	font-weight:600;
	color:#334155;
	padding:7px 0
}
.hero-feat li:before {
	content:"";
	width:16px;
	height:16px;
	border-radius:4px;
	background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 8.2 6.6 11 12 5.4'/%3E%3C/svg%3E") center/11px no-repeat;
	flex:none
}
.hero-feat-tag {
	position:absolute;
	right:-8px;
	bottom:-14px;
	background:#fff;
	color:var(--blue);
	border:1px solid #d7e4f8;
	border-radius:20px;
	font-size:12px;
	font-weight:700;
	padding:6px 12px;
	box-shadow:0 8px 16px rgba(28,70,130,.08)
}
.hero-platforms {
	position:absolute;
	left:8%;
	bottom:4px;
	display:flex;
	gap:22px;
	margin:0;
	padding:0;
	list-style:none;
	color:#7b8798;
	font-size:13px;
	z-index:3
}
.hero-platforms li {
	display:inline-flex;
	align-items:center;
	gap:6px
}
.hero-platforms .ico {
	width:15px;
	height:15px;
	color:#8b98aa
}

/* services */
.services {
	padding-top:36px
}
.service-grid {
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:16px
}
.service-card {
	min-height:232px;
	border-radius:16px;
	background:#fff;
	padding:26px 22px 20px;
	border:1px solid #eef2f8;
	box-shadow:var(--shadow);
	transition:.25s;
	display:flex;
	flex-direction:column
}
.service-card:hover {
	transform:translateY(-6px);
	box-shadow:0 16px 34px rgba(28,70,130,.12)
}
.service-icon {
	width:48px;
	height:48px;
	border-radius:14px;
	display:grid;
	place-items:center;
	background:var(--blue-soft);
	color:var(--blue);
	font-size:22px
}
.service-card h3 {
	margin:18px 0 8px;
	font-size:18px
}
.service-card p {
	color:var(--muted);
	font-size:13px;
	line-height:1.7;
	margin:0 0 16px;
	min-height:44px
}
.service-card a {
	margin-top:auto;
	color:var(--blue);
	font-weight:700;
	font-size:13px;
	display:inline-flex;
	align-items:center;
	gap:4px
}
.service-card a .ico {
	width:13px;
	height:13px
}
.service-card.is-hot {
	background:linear-gradient(180deg,#4b90ff,#2f7cf6);
	color:#fff;
	border-color:transparent;
	box-shadow:0 18px 32px rgba(47,124,246,.3)
}
.service-card.is-hot .service-icon {
	background:#ffffff24;
	color:#fff
}
.service-card.is-hot p,.service-card.is-hot a {
	color:#eaf2ff
}

/* cases */
.cases {
	background:#fff
}
.case-nav {
	display:flex;
	gap:8px
}
.case-tabs {
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin:4px 0 24px
}
.case-tabs a {
	display:inline-flex;
	align-items:center;
	min-height:34px;
	padding:0 16px;
	border-radius:18px;
	background:#f3f6fb;
	color:#5b6b80;
	font-size:13px
}
.case-tabs a.is-on,.case-tabs a:hover {
	background:var(--blue);
	color:#fff
}
.case-row {
	display:flex;
	align-items:center;
	gap:12px
}
.slider-btn {
	width:36px;
	height:36px;
	border-radius:50%;
	border:1px solid #e2e9f4;
	background:#fff;
	color:#4b5b73;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition:.2s
}
.slider-btn .ico {
	width:16px;
	height:16px
}
.slider-btn:hover {
	color:var(--blue);
	border-color:#8bb6f0;
	box-shadow:0 6px 16px rgba(21,86,162,.16)
}
.case-card {
	border-radius:12px;
	overflow:hidden;
	background:#fff
}
.case-cover {
	display:block;
	border-radius:12px;
	overflow:hidden;
	box-shadow:0 10px 24px rgba(20,40,77,.1)
}
.case-card img {
	width:100%;
	height:168px;
	object-fit:cover;
	display:block;
	background:#e8f1fb
}
.case-card h3 {
	font-size:16px;
	margin:14px 2px 8px;
	color:#25314a;
	font-weight:700
}
.case-card h3 a {
	color:inherit
}
.case-tags {
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin:0;
	padding:0
}
.case-tags span {
	display:inline-flex;
	align-items:center;
	min-height:24px;
	padding:0 8px;
	border-radius:4px;
	background:#f3f6fb;
	color:#6b7a90;
	font-size:12px
}
.cases .case-viewport {
	overflow:hidden;
	flex:1;
	min-width:0
}
.cases .case-grid {
	display:flex;
	gap:22px;
	will-change:transform
}
.cases .case-card {
	flex:0 0 auto;
	min-width:0
}

/* reasons */
.reasons {
	background:linear-gradient(180deg,#fff,#f6f9fd)
}
.reason-grid {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:24px;
	text-align:center
}
.reason-icon {
	width:72px;
	height:72px;
	margin:0 auto 16px;
	border-radius:50%;
	background:var(--blue-soft);
	color:var(--blue);
	display:grid;
	place-items:center;
	font-size:28px
}
.reason-grid h3 {
	margin:0 0 8px;
	font-size:18px
}
.reason-grid p {
	margin:0;
	font-size:13px;
	color:var(--muted);
	line-height:1.8
}

/* process */
.process-list {
	list-style:none;
	margin:8px 0 0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:12px;
	text-align:center
}
.process-list li {
	position:relative
}
.process-list li:not(:last-child):after {
	content:"";
	position:absolute;
	top:28px;
	right:-8px;
	width:16px;
	height:16px;
	background:var(--muted);
	opacity:.35;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat
}
.process-icon {
	width:58px;
	height:58px;
	margin:0 auto 14px;
	border-radius:50%;
	background:var(--blue-soft);
	color:var(--blue);
	display:grid;
	place-items:center;
	font-size:24px
}
.process-list h3 {
	margin:0 0 6px;
	font-size:16px
}
.process-list em {
	font-style:normal;
	color:var(--blue);
	margin-right:4px
}
.process-list p {
	margin:0;
	color:var(--muted);
	font-size:13px;
	line-height:1.7
}

/* cta */
.cta {
	position:relative;
	overflow:hidden;
	color:#fff;
	min-height:168px;
	display:flex;
	align-items:center;
	background:#163a7a url("/static/muban/building.webp") right center/cover no-repeat
}
.cta-shade {
	position:absolute;
	inset:0;
	background:linear-gradient(90deg,#102a5ce8 0%,#163a7acc 48%,#1a4b8a66 100%)
}
.cta-inner,.cta-content {
	position:relative;
	z-index:1;
	width:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;
	padding:36px 0
}
.cta p {
	margin:0 0 6px;
	font-size:13px;
	color:#c5d6ef
}
.cta h2 {
	margin:0 0 8px;
	font-size:28px
}
.cta span {
	color:#d5e2f4;
	font-size:14px
}
.cta .btn {
	flex:none;
	min-width:132px
}

/* faq */
.faq {
	padding-top:64px
}
.faq-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:0 48px
}
.faq-item {
	border-bottom:1px solid var(--line)
}
.faq-item button {
	width:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	padding:18px 0;
	background:none;
	border:0;
	text-align:left;
	font-size:15px;
	color:var(--ink);
	cursor:pointer
}
.faq-item button .ico {
	width:16px;
	height:16px;
	color:#98a4b6;
	transition:transform .2s
}
.faq-body {
	display:none;
	padding:0 28px 16px 0;
	color:var(--muted);
	font-size:14px;
	line-height:1.8
}
.faq-item.open button {
	color:var(--blue)
}
.faq-item.open button .ico {
	transform:rotate(45deg);
	color:var(--blue)
}
.faq-item.open .faq-body {
	display:block
}

/* footer */
footer {
	background:#1b2430;
	color:#9aa6b6;
	padding-top:48px
}
.footer-grid {
	display:grid;
	grid-template-columns:1.6fr .9fr .9fr 1.2fr .8fr;
	gap:28px
}
.footer-logo {
	height:36px;
	width:auto;
	max-width:160px;
	object-fit:contain;
	margin-bottom:12px
}
.footer-brand p {
	margin:0 0 16px;
	font-size:13px;
	line-height:1.8
}
.footer-social {
	display:flex;
	gap:10px
}
.footer-social a {
	width:32px;
	height:32px;
	border-radius:50%;
	background:#2a3444;
	color:#d5dde8;
	display:grid;
	place-items:center
}
.footer-social .ico {
	width:14px;
	height:14px
}
.footer-grid h4 {
	color:#fff;
	margin:4px 0 14px;
	font-size:16px
}
.footer-grid p,.footer-grid a {
	display:block;
	margin:6px 0;
	color:#9aa6b6;
	font-size:13px
}
.footer-contact p {
	display:flex;
	align-items:flex-start;
	gap:8px
}
.footer-contact .ico {
	width:14px;
	height:14px;
	margin-top:4px;
	color:#7d8b9c
}
.footer-contact a {
	display:inline
}
.qr {
	text-align:center
}
.qr img {
	width:108px;
	height:108px;
	object-fit:contain;
	background:#fff;
	padding:6px;
	border-radius:6px;
	display:block;
	margin:0 auto 8px
}
.qr span {
	display:block;
	font-size:12px;
	line-height:1.6;
	color:#8b98a8
}
.footer-bottom {
	margin-top:36px;
	border-top:1px solid #2a3442;
	padding:16px 0;
	font-size:12px
}
.footer-bottom .container {
	display:flex;
	justify-content:space-between;
	gap:12px
}
.footer-bottom a {
	display:inline;
	margin-left:12px;
	color:#8b98a8
}

/* inner pages */
.page-banner {
	background:linear-gradient(105deg,#1e4faf 0%,#2f7cf6 58%,#5aa0ff 100%);
	color:#fff;
	padding:46px 0 40px
}
.page-banner h1 {
	margin:8px 0 6px;
	font-size:32px
}
.page-banner p {
	margin:0;
	color:#d7e6ff;
	max-width:720px
}
.crumb {
	font-size:13px;
	color:#c5d8f5
}
.crumb a {
	color:#e7f0ff
}
.subnav {
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-bottom:28px
}
.subnav a {
	display:inline-flex;
	align-items:center;
	min-height:34px;
	padding:0 14px;
	border-radius:18px;
	background:#f2f6fb;
	color:#4b5b73;
	font-size:13px
}
.subnav a.active,.subnav a:hover {
	background:var(--blue);
	color:#fff
}
.page-article {
	background:#fff;
	border-radius:8px;
	box-shadow:var(--shadow);
	padding:36px 40px;
	line-height:1.9;
	color:#314259
}
.page-article img {
	max-width:100%;
	height:auto
}
.inner-list .case-grid {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:22px
}
.inner-list .case-card {
	transition:.2s;
	box-shadow:var(--shadow);
	padding-bottom:16px
}
.inner-list .case-card:hover {
	transform:translateY(-6px)
}
.inner-list .case-card img {
	height:150px
}
.inner-list .case-card > span,.news-grid .case-card > span {
	display:inline-block;
	background:var(--blue-soft);
	color:var(--blue);
	font-size:12px;
	border-radius:4px;
	padding:2px 8px;
	margin:12px 16px 4px
}
.inner-list .case-card h3,.news-grid .case-card h3 {
	margin:4px 16px
}
.inner-list .case-card p,.news-grid .case-card p {
	margin:4px 16px 8px;
	font-size:13px;
	color:var(--muted)
}
.news-layout,.detail-wrap {
	display:grid;
	grid-template-columns:minmax(0,1fr) 300px;
	gap:28px;
	align-items:start
}
.article-list {
	display:grid;
	gap:18px
}
.article-row {
	display:grid;
	grid-template-columns:220px 1fr;
	gap:18px;
	background:#fff;
	border-radius:8px;
	box-shadow:var(--shadow);
	overflow:hidden
}
.article-row img {
	width:100%;
	height:140px;
	object-fit:cover;
	background:#e8f1fb;
	display:block
}
.article-row h3 {
	margin:16px 16px 8px;
	font-size:18px
}
.article-row p {
	margin:0 16px 10px;
	color:var(--muted);
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden
}
.article-row .meta {
	margin:0 16px 16px;
	color:#90a0b5;
	font-size:12px
}
.side-card {
	background:#fff;
	border-radius:8px;
	box-shadow:var(--shadow);
	padding:18px 20px;
	margin-bottom:18px
}
.side-card h3 {
	margin:0 0 12px;
	font-size:16px
}
.side-card a {
	display:flex;
	justify-content:space-between;
	padding:8px 0;
	border-bottom:1px solid #eef2f7;
	color:#314259;
	font-size:13px
}
.side-card a:last-child {
	border-bottom:0
}
.side-cta {
	background:linear-gradient(120deg,#1b66ea,#2f7cf6);
	color:#fff
}
.side-cta h3,.side-cta p,.side-cta a {
	color:#fff
}
.detail-main {
	background:#fff;
	border-radius:8px;
	box-shadow:var(--shadow);
	padding:36px 40px
}
.detail-main h1 {
	margin:0 0 12px;
	font-size:28px
}
.detail-meta {
	color:#90a0b5;
	font-size:13px;
	margin-bottom:22px
}
.detail-body {
	line-height:1.9;
	color:#314259
}
.detail-body img {
	max-width:100%;
	height:auto
}
.detail-pager {
	display:flex;
	justify-content:space-between;
	gap:12px;
	margin-top:28px;
	padding-top:18px;
	border-top:1px solid #eef2f7;
	font-size:13px
}
.detail-pager a {
	color:var(--blue)
}
.cover-img {
	width:100%;
	height:320px;
	object-fit:cover;
	border-radius:8px;
	background:#e8f1fb;
	margin-bottom:22px
}
.contact-grid {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:18px;
	margin-bottom:28px
}
.contact-item {
	background:#fff;
	border-radius:8px;
	box-shadow:var(--shadow);
	padding:22px
}
.contact-item b {
	display:block;
	margin:8px 0 4px;
	font-size:16px
}
.contact-item span {
	color:var(--muted);
	font-size:12px
}
.contact-form {
	background:#fff;
	border-radius:8px;
	box-shadow:var(--shadow);
	padding:28px 32px;
	max-width:760px
}
.contact-form h2 {
	margin:0 0 8px
}
.contact-form p {
	margin:0 0 18px;
	color:var(--muted)
}
.contact-form .row {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px
}
.contact-form input,.contact-form textarea {
	width:100%;
	border:1px solid #dbe4f0;
	border-radius:6px;
	padding:12px 14px;
	margin-bottom:12px;
	font:inherit
}
.contact-form textarea {
	min-height:140px;
	resize:vertical
}
.pager {
	display:flex;
	justify-content:center;
	margin-top:28px
}
.pager ul,.pager .pagination,ul.pagination {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
	list-style:none;
	margin:0;
	padding:0
}
.pager li,.pagination li {
	list-style:none;
	display:inline-flex;
	margin:0;
	padding:0
}
.pager a,.pager span,.pagination a,.pagination span,.page-link {
	min-width:36px;
	height:36px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius:4px;
	background:#f2f6fb;
	color:#40506a;
	padding:0 10px;
	line-height:1
}
.pager .active span,.pager .active a,.pagination .active span,.pager a:hover,.pagination a:hover {
	background:var(--blue);
	color:#fff
}
.pager .disabled span,.pagination .disabled span {
	opacity:.55
}
.empty-tip {
	text-align:center;
	color:var(--muted);
	padding:40px 0
}
.news-grid {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:22px
}
.home-news {
	background:linear-gradient(180deg,#fff,#f6f9fd)
}
.news-card {
	background:#fff;
	border-radius:12px;
	overflow:hidden;
	box-shadow:var(--shadow);
	transition:.25s
}
.news-card:hover {
	transform:translateY(-6px);
	box-shadow:0 16px 34px rgba(28,70,130,.12)
}
.news-cover {
	display:block;
	overflow:hidden;
	background:#e8f1fb
}
.news-cover img {
	width:100%;
	height:158px;
	object-fit:cover;
	display:block
}
.news-body {
	padding:14px 16px 16px
}
.news-body time {
	display:block;
	margin-bottom:6px;
	color:#90a0b5;
	font-size:12px
}
.news-body h3 {
	margin:0 0 8px;
	font-size:16px;
	line-height:1.45;
	font-weight:700
}
.news-body h3 a {
	color:#25314a
}
.news-body p {
	margin:0;
	color:var(--muted);
	font-size:13px;
	line-height:1.7;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden
}

/* motion */
@keyframes reveal-up {
	from { opacity:0; transform:translate3d(0,40px,0) }
	to { opacity:1; transform:none }
}
@keyframes reveal-left {
	from { opacity:0; transform:translate3d(-56px,0,0) }
	to { opacity:1; transform:none }
}
@keyframes reveal-right {
	from { opacity:0; transform:translate3d(56px,0,0) }
	to { opacity:1; transform:none }
}
.hero-copy {
	animation:reveal-left .85s cubic-bezier(.22,.61,.36,1) both
}
.hero-visual {
	animation:reveal-right .95s .12s cubic-bezier(.22,.61,.36,1) both
}
.page-banner .container {
	animation:reveal-up .7s cubic-bezier(.22,.61,.36,1) both
}
.reveal {
	opacity:0;
	transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1);
	transition-delay:var(--reveal-delay,0ms)
}
.reveal-up { transform:translate3d(0,48px,0) }
.reveal-left { transform:translate3d(-56px,0,0) }
.reveal-right { transform:translate3d(56px,0,0) }
.reveal-zoom { transform:scale(.94) }
.reveal.is-inview {
	opacity:1;
	transform:none
}

@media (max-width:1100px) {
	.hero h1 { font-size:38px }
	.hero-inner { grid-template-columns:1fr; min-height:0 }
	.hero-visual { min-height:420px }
	.service-grid { grid-template-columns:repeat(3,1fr) }
	.service-card.is-hot { grid-column:span 1 }
	.reason-grid,.process-list,.contact-grid,.inner-list .case-grid,.news-grid { grid-template-columns:repeat(2,1fr) }
	.process-list li:nth-child(2):after,.process-list li:nth-child(4):after { display:none }
	.footer-grid { grid-template-columns:repeat(3,1fr) }
	.qr { display:none }
	.nav-contact { gap:10px }
	.main-nav { gap:18px }
}
@media (max-width:860px) {
	.menu-toggle { display:block }
	.main-nav {
		display:none
	}
	.main-nav.open {
		position:absolute;
		display:flex;
		flex-direction:column;
		align-items:flex-start;
		gap:0;
		height:auto;
		top:76px;
		left:0;
		right:0;
		padding:10px 20px 18px;
		background:#fff;
		box-shadow:0 12px 24px rgba(0,0,0,.08)
	}
	.main-nav.open a {
		height:44px;
		width:100%
	}
	.main-nav.open a.active:after { display:none }
	.hero-feat { display:none }
	.hero-bubble { right:8px; font-size:16px }
	.device-imac { width:86% }
	.device-laptop { width:54%; left:10% }
	.faq-grid,.cta-inner,.cta-content,.footer-bottom .container,.news-layout,.detail-wrap { display:block }
	.cta .btn { margin-top:16px }
	.footer-grid { grid-template-columns:1fr 1fr }
	.footer-grid > .footer-brand { grid-column:1/-1 }
}
@media (max-width:700px) {
	.container { padding:0 16px }
	.site-header { height:64px }
	.main-nav.open { top:64px }
	.hero { padding-top:8px }
	.hero h1 { font-size:30px }
	.hero-visual { min-height:320px; padding-bottom:48px }
	.hero-platforms { gap:10px; font-size:12px; left:0; right:0; justify-content:space-between }
	.section { padding:48px 0 }
	.section-head { align-items:flex-start; flex-direction:column }
	.section-head h2,.section-title h2 { font-size:24px }
	.service-grid,.reason-grid,.process-list { grid-template-columns:1fr 1fr }
	.process-list li:after { display:none }
	.case-card img { height:132px }
	.inner-list .case-grid,.news-grid,.article-row,.contact-form .row { grid-template-columns:1fr }
	.news-cover img { height:180px }
	.page-article,.detail-main,.contact-form { padding:22px 16px }
	.page-banner h1 { font-size:24px }
	.cta h2 { font-size:22px }
	.footer-grid { grid-template-columns:1fr }
}
.wx-float {
	position:fixed;
	right:18px;
	top:50%;
	z-index:50;
	transform:translateY(-50%);
	font-size:14px
}
.wx-float-tab {
	display:none;
	position:absolute;
	right:0;
	top:50%;
	transform:translateY(-50%);
	writing-mode:vertical-rl;
	letter-spacing:2px;
	border:0;
	cursor:pointer;
	background:linear-gradient(180deg,#4b90ff,#2f7cf6);
	color:#fff;
	border-radius:10px 0 0 10px;
	padding:16px 8px;
	font-weight:700;
	box-shadow:0 8px 20px rgba(47,124,246,.28)
}
.wx-float-panel {
	width:188px;
	background:#fff;
	border-radius:22px;
	box-shadow:0 16px 40px rgba(47,124,246,.18);
	overflow:hidden;
	border:1px solid #e7f0ff
}
.wx-float-head {
	display:flex;
	align-items:center;
	gap:8px;
	background:#eaf4ff;
	padding:14px 16px;
	color:#1a2336
}
.wx-float-head .ico {
	width:20px;
	height:20px;
	color:#07c160
}
.wx-float-head strong {
	font-size:16px;
	font-weight:700
}
.wx-float-toggle {
	margin-left:auto;
	width:28px;
	height:28px;
	border:0;
	border-radius:50%;
	background:#fff;
	color:var(--blue);
	box-shadow:0 4px 10px rgba(47,124,246,.16);
	display:grid;
	place-items:center;
	cursor:pointer
}
.wx-float-toggle .ico {
	width:12px;
	height:12px;
	color:var(--blue)
}
.wx-float-body {
	padding:16px 16px 18px;
	text-align:center
}
.wx-float-qr {
	width:148px;
	height:148px;
	margin:0 auto 12px;
	border-radius:12px;
	overflow:hidden;
	background:#f3faf4
}
.wx-float-qr img {
	width:100%;
	height:100%;
	object-fit:contain;
	display:block
}
.wx-float-tip {
	margin:0 0 4px;
	color:var(--blue);
	font-weight:700;
	font-size:15px
}
.wx-float-id {
	margin:0;
	color:#7b8699;
	font-size:14px;
	cursor:pointer;
	word-break:break-all
}
.wx-float-id .ico,
.wx-float-id em {
	display:none
}
.wx-float.is-min .wx-float-panel {
	display:none
}
.wx-float.is-min .wx-float-tab {
	display:block
}
.wx-float-copied {
	color:#07c160
}
@media (max-width:700px) {
	.wx-float {
		right:12px;
		top:auto;
		bottom:20px;
		transform:none
	}
	.wx-float-tab,
	.wx-float-head,
	.wx-float-qr,
	.wx-float-tip,
	.wx-float.is-min .wx-float-tab {
		display:none !important
	}
	.wx-float.is-min .wx-float-panel,
	.wx-float-panel {
		display:block;
		width:auto;
		border-radius:24px;
		box-shadow:0 10px 24px rgba(28,70,130,.18)
	}
	.wx-float-body {
		padding:10px 14px
	}
	.wx-float-id {
		display:inline-flex;
		align-items:center;
		gap:6px;
		color:#1a2336;
		font-weight:700;
		white-space:nowrap
	}
	.wx-float-id .ico,
	.wx-float-id em {
		display:inline
	}
	.wx-float-id .ico {
		width:16px;
		height:16px;
		color:#07c160;
		vertical-align:-.15em
	}
}
@media (prefers-reduced-motion:reduce) {
	.hero-copy,.hero-visual,.page-banner .container,.reveal,.reveal-up,.reveal-left,.reveal-right,.reveal-zoom,.reveal.is-inview {
		opacity:1;
		transform:none;
		animation:none;
		transition:none
	}
}