:root {
	--ink: #061225;
	--panel: #0a1b36;
	--blue: #178bff;
	--cyan: #65e6ff;
	--muted: #8091a8;
	--line: rgba(120, 194, 255, .2);
	--wrap: min(1180px, calc(100% - 64px));
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	color: var(--ink);
	background: #f4f8ff;
	font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
	overflow-x: hidden
}

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

button {
	font: inherit
}

.page-wrap {
	width: var(--wrap);
	margin: 0 auto
}

.page-grain {
	position: fixed;
	z-index: 30;
	inset: 0;
	opacity: .025;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")
}

.pointer-orb {
	position: fixed;
	z-index: 31;
	left: -130px;
	top: -130px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	pointer-events: none;
	mix-blend-mode: screen;
	background: radial-gradient(circle, rgba(76, 198, 255, .13), rgba(76, 198, 255, 0) 68%);
	transition: transform .1s ease-out
}

.site-header {
	position: fixed;
	z-index: 20;
	top: 0;
	left: 0;
	right: 0;
	height: 84px;
	padding: 0 max(32px, calc((100vw - 1550px)/2));
	display: flex;
	align-items: center;
	gap: 35px;
	color: #0d263d;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	transition: .3s ease
}

.site-header.is-scrolled {
	height: 65px;
	background: rgba(4, 14, 31, .85);
	backdrop-filter: blur(18px);
	border-color: rgba(125, 217, 255, .14)
}

.brand {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	min-width: max-content
}

.brand-logo {
	width: 40px;
	height: 40px;
}

.brand-mark {
	position: relative;
	width: 33px;
	height: 33px;
	overflow: hidden;
	border-radius: 50%;
	background: linear-gradient(140deg, #60e1ff, #1579eb);
	box-shadow: 0 0 20px rgba(74, 203, 255, .34)
}

.brand-mark:before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 2px solid #061b3c;
	border-right-color: transparent;
	border-radius: 50%;
	transform: rotate(-30deg)
}

.brand-mark i {
	position: absolute;
	display: block;
	height: 3px;
	border-radius: 3px;
	background: #061b3c;
	transform: rotate(-39deg)
}

.brand-mark i:nth-child(1) {
	left: 5px;
	top: 12px;
	width: 21px
}

.brand-mark i:nth-child(2) {
	left: 12px;
	top: 18px;
	width: 16px
}

.brand-mark i:nth-child(3) {
	left: 18px;
	top: 24px;
	width: 11px
}

.brand-copy {
	display: grid;
	gap: 2px;
	line-height: 1
}

.brand-copy b {
	font: 700 17px/1 Arial, sans-serif;
	letter-spacing: 2px;
	color: #9a9999;
}

.brand-copy small {
	font-size: 10px;
	letter-spacing: 1.5px;
	opacity: .7;
	color: #9a9999;
}

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

.site-nav a {
	position: relative;
	padding: 31px 0 28px;
	color: #7c7c7c;
	font-size: 14px;
	transition: color .22s
}

.site-nav a:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 0;
	height: 2px;
	background: var(--cyan);
	box-shadow: 0 0 12px var(--cyan);
	transition: width .22s
}

.site-nav a:hover,
.site-nav a.is-current {
	color: #7c7c7c
}

.site-nav a:hover:after,
.site-nav a.is-current:after {
	width: 100%
}

.header-contact {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-left: 8px;
	padding: 9px 10px 9px 15px;
	font-size: 12px;
	letter-spacing: 1px;
	border: 1px solid rgba(150, 215, 255, .4);
	transition: .25s
}

.header-contact b {
	display: grid;
	place-items: center;
	width: 23px;
	height: 23px;
	background: var(--cyan);
	color: #08204c;
	font-size: 16px
}

.header-contact span {
	color: #7c7c7c;
}

.header-contact:hover {
	border-color: var(--cyan);
	background: rgba(98, 230, 255, .1);
	transform: translateY(-2px)
}

.nav-toggle {
	display: none
}

.product-hero {
	position: relative;
	min-height: 760px;
	height: max(100vh, 760px);
	overflow: hidden;
	color: #fff;
	background: #061225
}

.product-hero:before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 73% 48%, rgba(5, 111, 255, .25), transparent 25%), radial-gradient(circle at 9% 87%, rgba(4, 171, 225, .14), transparent 25%), linear-gradient(126deg, #040c1b 0%, #081a35 57%, #061127 100%)
}

.hero-grid {
	position: absolute;
	inset: 0;
	opacity: .22;
	background-image: linear-gradient(rgba(109, 208, 255, .17) 1px, transparent 1px), linear-gradient(90deg, rgba(109, 208, 255, .17) 1px, transparent 1px);
	background-size: 54px 54px;
	mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 77%, transparent 100%);
	transform: perspective(740px) rotateX(58deg) scale(1.93) translateY(17%);
	transform-origin: center bottom
}

.hero-aura {
	position: absolute;
	width: 55vw;
	height: 55vw;
	border-radius: 50%;
	filter: blur(58px);
	opacity: .22
}

.product-H1 {
	width: 162px;
	height: 132px;
	margin-left: 20px;
	margin-bottom: 20px;
}

.product-F2 {
	width: 162px;
	height: 120px;
	margin-bottom: 20px;
	margin-left: 20px;
}

.product-duijiang {
	width: 140px;
	height: 120px;
	margin-bottom: 20px;
	margin-left: 20px;
}

.product-service {
	width: 147px;
	height: 120px;
	margin-bottom: 20px;
	margin-left: 20px;
}

.aura-one {
	right: -20%;
	top: 2%;
	background: #075ed4
}

.aura-two {
	left: -28%;
	bottom: -35%;
	background: #02a6c5
}

.hero-content {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.02fr .98fr;
	align-items: center;
	min-height: 760px;
	height: 100%;
	padding-top: 84px
}

.hero-copy {
	max-width: 590px
}

.hero-img {
	position: relative;
	z-index: 2;
	width: 340px;
	filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.6));
	animation: float 5s ease-in-out infinite;
	scale: 1.2;
}

.product-area-H1 {
	margin-left: 90px;
	margin-top: 50px;
}

.eyebrow {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0 0 20px;
	color: #67e2ff;
	font: 700 10px/1.2 Arial, sans-serif;
	letter-spacing: 2px
}

.eyebrow span {
	width: 27px;
	height: 1px;
	background: currentColor
}

.hero-copy h1 {
	margin: 0;
	font-size: clamp(48px, 5.3vw, 78px);
	line-height: 1.13;
	letter-spacing: -4px;
	font-weight: 600
}

.hero-copy h1 strong {
	font-weight: 600;
	color: transparent;
	background: linear-gradient(95deg, #65e8ff, #2a7dff);
	background-clip: text;
	-webkit-background-clip: text
}

.hero-copy>p:not(.eyebrow) {
	max-width: 480px;
	margin: 26px 0 31px;
	color: #b8c9e1;
	font-size: 16px;
	line-height: 2
}

.hero-actions {
	display: flex;
	align-items: center;
	gap: 20px
}

.button {
	display: inline-flex;
	gap: 26px;
	align-items: center;
	justify-content: center;
	padding: 15px 19px;
	font-size: 13px;
	letter-spacing: .4px;
	transition: .3s ease
}

.button b {
	font-size: 18px;
	font-weight: 400;
	line-height: 1
}

.primary {
	color: #05204a;
	background: #63dcff;
	box-shadow: 0 8px 35px rgba(43, 192, 255, .22)
}

.primary:hover {
	background: #fff;
	box-shadow: 0 13px 42px rgba(43, 192, 255, .36);
	transform: translateY(-3px)
}

.quiet {
	padding-left: 0;
	color: #d1e3f9
}

.quiet:hover {
	color: var(--cyan)
}

.hero-pulse {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 43px;
	color: #708ba9;
	font: 10px Arial;
	letter-spacing: 1px
}

.hero-pulse i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #62f0a9;
	box-shadow: 0 0 0 5px rgba(98, 240, 169, .1), 0 0 15px #62f0a9
}

.hero-pulse b {
	color: #66efa9;
	font-size: 9px
}

.hero-pulse em {
	margin-left: 6px;
	padding-left: 10px;
	border-left: 1px solid #45617c;
	font-style: normal
}

.hero-machine {
	position: relative;
	width: 100%;
	height: 575px;
	margin-top: 20px
}

.machine-ring {
	position: absolute;
	left: 50%;
	top: 50%;
	border: 1px solid rgba(96, 204, 255, .28);
	border-radius: 50%;
	transform: translate(-50%, -50%) rotate(-16deg)
}

.ring-one {
	width: 440px;
	height: 440px
}

.ring-one:after,
.ring-two:after {
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #69e5ff;
	box-shadow: 0 0 13px #69e5ff
}

.ring-one:after {
	top: 27px;
	left: 69px
}

.ring-two {
	width: 548px;
	height: 265px;
	transform: translate(-50%, -50%) rotate(35deg)
}

.ring-two:after {
	right: 61px;
	bottom: 1px
}

.ring-three {
	width: 330px;
	height: 610px;
	border-color: rgba(69, 120, 255, .22);
	transform: translate(-50%, -50%) rotate(29deg)
}

.crosshair {
	position: absolute;
	inset: 72px 7%;
	border-radius: 50%;
	animation: spin 24s linear infinite
}

.crosshair i {
	position: absolute;
	width: 50%;
	height: 1px;
	left: 50%;
	top: 50%;
	transform-origin: left center;
	background: linear-gradient(90deg, rgba(101, 220, 255, .5), transparent)
}

.crosshair i:nth-child(2) {
	transform: rotate(90deg)
}

.crosshair i:nth-child(3) {
	transform: rotate(180deg)
}

.crosshair i:nth-child(4) {
	transform: rotate(270deg)
}

.hero-bot {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 49%;
	width: 160px;
	height: 365px;
	transform: translate(-50%, -50%);
	filter: drop-shadow(0 28px 25px rgba(0, 0, 0, .35));
	animation: float 5s ease-in-out infinite
}

.bot-sensor {
	position: absolute;
	left: 50%;
	top: 2px;
	width: 114px;
	height: 114px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(108, 236, 255, .24), rgba(30, 109, 255, .03) 62%, transparent 64%)
}

.bot-sensor i {
	position: absolute;
	top: 28px;
	left: 47px;
	width: 20px;
	height: 20px;
	border: 2px solid #a4e7ff;
	border-radius: 50%;
	box-shadow: 0 0 13px #4fe4ff
}

.bot-sensor b {
	position: absolute;
	left: 56px;
	top: 17px;
	width: 1px;
	height: 78px;
	background: linear-gradient(#75e9ff, transparent);
	transform: rotate(48deg);
	transform-origin: bottom
}

.bot-head {
	position: absolute;
	top: 32px;
	left: 38px;
	width: 84px;
	height: 78px;
	border: 4px solid #9cdcff;
	border-bottom: 0;
	border-radius: 47px 47px 16px 16px;
	background: linear-gradient(125deg, #c6f4ff, #4a90c7 27%, #06142b 32%, #06142b 77%, #3d8fc8);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .72), 0 0 19px rgba(81, 190, 255, .3)
}

.bot-head:after {
	content: "";
	position: absolute;
	top: 18px;
	left: 11px;
	width: 53px;
	height: 21px;
	border-radius: 15px;
	background: linear-gradient(90deg, #10336c, #0e9ccd, #10336c);
	box-shadow: inset 0 0 7px #66e7ff
}

.bot-head span {
	position: absolute;
	z-index: 1;
	top: 26px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #a3f5ff;
	box-shadow: 0 0 12px #5ce7ff
}

.bot-head span:first-child {
	left: 20px
}

.bot-head span:last-child {
	right: 20px
}

.bot-neck {
	position: absolute;
	top: 103px;
	left: 56px;
	width: 48px;
	height: 13px;
	background: linear-gradient(90deg, #72b9df, #b5eafe, #4d92c3)
}

.bot-body {
	position: absolute;
	left: 29px;
	top: 112px;
	width: 102px;
	height: 186px;
	border: 4px solid #8dcdf3;
	border-top: 0;
	border-radius: 16px 16px 24px 24px;
	background: linear-gradient(100deg, #a7e0ff, #5093c8 17%, #163353 27%, #112743 75%, #5aa1d3);
	box-shadow: inset 0 0 0 2px rgba(3, 18, 44, .5)
}

.bot-screen {
	position: absolute;
	top: 25px;
	left: 17px;
	width: 58px;
	height: 58px;
	padding: 10px 0;
	border: 1px solid #70def8;
	background: #071a37;
	text-align: center;
	box-shadow: inset 0 0 11px #1685c5
}

.bot-screen b {
	display: block;
	color: #6cefff;
	font: 700 17px Arial
}

.bot-screen small {
	display: block;
	margin-top: 4px;
	color: #a9e9ff;
	font: 7px Arial;
	letter-spacing: 1px
}

.bot-screen i {
	position: absolute;
	bottom: 4px;
	left: 7px;
	width: 42px;
	height: 2px;
	background: linear-gradient(90deg, #24bee5 60%, transparent 60%);
	background-size: 5px 2px
}

.bot-body>span {
	position: absolute;
	left: 20px;
	width: 51px;
	height: 2px;
	background: #75dff9
}

.bot-body>span:nth-child(2) {
	top: 103px;
	box-shadow: 0 12px #74b2d9
}

.bot-chassis {
	position: absolute;
	bottom: 0;
	left: 10px;
	width: 140px;
	height: 49px;
	border-radius: 45% 45% 35% 35%;
	background: linear-gradient(#90d0f4, #24517f 48%, #0b1e3a 49%, #193c64);
	box-shadow: 0 8px 0 #071324, 0 18px 28px rgba(0, 0, 0, .3)
}

.bot-chassis i {
	position: absolute;
	bottom: -7px;
	width: 24px;
	height: 9px;
	border-radius: 50%;
	background: #031123
}

.bot-chassis i:first-child {
	left: 13px
}

.bot-chassis i:nth-child(2) {
	left: 58px
}

.bot-chassis i:last-child {
	right: 13px
}

.scan-beam {
	position: absolute;
	z-index: 4;
	left: 50%;
	top: 13%;
	width: 276px;
	height: 2px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, #94edff, transparent);
	filter: drop-shadow(0 0 5px #38ddff);
	animation: scan 3.35s ease-in-out infinite
}

.machine-label {
	position: absolute;
	z-index: 4;
	color: #88abc9;
	font: 10px Arial;
	letter-spacing: 1.1px
}

.machine-label span {
	margin-right: 7px;
	color: #67e5ff
}

.label-a {
	top: 54px;
	left: 10%
}

.label-b {
	top: 42%;
	right: -2%
}

.machine-data {
	position: absolute;
	z-index: 4;
	right: 3%;
	bottom: 86px;
	display: grid;
	grid-template-columns: auto auto;
	gap: 6px 12px;
	width: 136px;
	padding: 13px;
	background: rgba(9, 30, 61, .68);
	border: 1px solid rgba(104, 214, 255, .3);
	backdrop-filter: blur(7px);
	color: #89b2d3;
	font: 9px Arial;
	letter-spacing: 1px
}

.machine-data span {
	grid-column: 1/-1
}

.machine-data strong {
	color: #67e5ff;
	font-size: 22px;
	font-weight: 400
}

.machine-data i {
	align-self: end;
	height: 6px;
	margin-bottom: 4px;
	background: linear-gradient(90deg, #65e4ff 86%, rgba(101, 228, 255, .18) 86%)
}

.machine-data b {
	grid-column: 1/-1;
	color: #6ef0a9;
	font-size: 8px
}

.machine-axis {
	position: absolute;
	z-index: 4;
	left: 8%;
	bottom: 97px;
	display: grid;
	gap: 5px;
	padding-left: 12px;
	border-left: 1px solid #58d7ff;
	color: #a8dcf5;
	font: 10px Arial;
	letter-spacing: 1px
}

.machine-axis b {
	color: #fff;
	font-size: 12px
}

.scroll-hint {
	position: absolute;
	z-index: 3;
	left: max(32px, calc((100vw - 1180px)/2));
	bottom: 29px;
	display: flex;
	align-items: center;
	gap: 13px;
	color: #8ba7c6;
	font: 9px Arial;
	letter-spacing: 1.5px
}

.scroll-hint i {
	width: 48px;
	height: 1px;
	background: linear-gradient(90deg, #74e2ff, #74e2ff 50%, transparent 50%);
	background-size: 6px 1px;
	animation: slide 1.7s linear infinite
}

.product-intro {
	padding: 122px 0 92px;
	background: #f4f8ff
}

.intro-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 13%;
	align-items: end
}

.section-title h2 {
	margin: 0;
	font-size: clamp(35px, 4.1vw, 57px);
	line-height: 1.25;
	letter-spacing: -2.8px;
	font-weight: 500
}

.section-title h2 strong {
	font-weight: 500;
	color: #147ee9
}

.intro-copy {
	padding-bottom: 6px
}

.intro-copy>p {
	margin: 0;
	color: #5d6d83;
	font-size: 15px;
	line-height: 2.05
}

.intro-meta {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-top: 27px;
	color: #147ee9;
	font: 10px Arial;
	letter-spacing: 1px
}

.intro-meta i {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #75dff8
}

.matrix-section {
	padding: 0 0 92px;
	background: #f4f8ff
}

.matrix-heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 19px;
	color: #6581a0;
	font: 10px Arial;
	letter-spacing: 1.7px
}

.matrix-heading span {
	color: #1b8df4
}

.product-matrix {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px
}

.matrix-card {
	position: relative;
	min-height: 260px;
	padding: 24px;
	color: #163052;
	text-align: left;
	cursor: pointer;
	border: 1px solid #dce8f5;
	background: #fff;
	overflow: hidden;
	transition: transform .3s, border .3s, background .3s, box-shadow .3s
}

.matrix-card:before {
	content: "";
	position: absolute;
	right: -40px;
	bottom: -45px;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(23, 146, 255, .18), transparent 66%);
	transition: transform .45s
}

.matrix-card:hover {
	transform: translateY(-6px);
	border-color: #99d4ff;
	box-shadow: 0 16px 33px rgba(29, 78, 136, .12)
}

.matrix-card:hover:before,
.matrix-card.is-active:before {
	transform: scale(1.4)
}

.matrix-card.is-active {
	color: #e6f4ff;
	border-color: #55d9ff;
	background: #0a254b;
	box-shadow: 0 17px 36px rgba(11, 61, 117, .2)
}

.matrix-card.is-active small,
.matrix-card.is-active em {
	color: #91ddf5
}

.matrix-code {
	position: absolute;
	right: 20px;
	top: 20px;
	color: #89a3be;
	font: 10px Arial
}

.matrix-card.is-active .matrix-code {
	color: #69e7ff
}

.matrix-icon {
	position: relative;
	display: block;
	width: 47px;
	height: 47px;
	margin: 13px 0 34px;
	border: 1px solid #5baaf2
}

.matrix-card.is-active .matrix-icon {
	border-color: #72e5ff;
	box-shadow: 0 0 16px rgba(91, 220, 255, .28)
}

.icon-robot {
	border-radius: 14px 14px 19px 19px
}

.icon-robot:before {
	content: "";
	position: absolute;
	top: 11px;
	left: 10px;
	width: 25px;
	height: 12px;
	border: 1px solid #54a8ed;
	border-radius: 8px;
	background: rgba(80, 170, 240, .07)
}

.icon-robot i {
	position: absolute;
	width: 4px;
	height: 4px;
	top: 15px;
	border-radius: 50%;
	background: #54a8ed
}

.icon-robot i:nth-child(1) {
	left: 16px
}

.icon-robot i:nth-child(2) {
	right: 16px
}

.icon-robot i:nth-child(3) {
	left: 22px;
	top: 31px;
	width: 2px;
	height: 8px;
	border-radius: 0
}

.icon-orbit {
	border-radius: 50%
}

.icon-orbit i {
	position: absolute;
	inset: 7px;
	border: 1px solid #54a8ed;
	border-radius: 50%;
	transform: rotate(55deg)
}

.icon-orbit i:nth-child(2) {
	transform: rotate(-55deg)
}

.icon-orbit i:nth-child(3) {
	inset: 20px;
	background: #54a8ed;
	border: 0
}

.icon-talk {
	border-radius: 7px
}

.icon-talk:before {
	content: "";
	position: absolute;
	top: 7px;
	left: 10px;
	width: 25px;
	height: 16px;
	border: 1px solid #54a8ed;
	border-radius: 2px
}

.icon-talk:after {
	content: "";
	position: absolute;
	bottom: 7px;
	left: 21px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #54a8ed;
	box-shadow: 7px 0 #54a8ed
}

.icon-talk i {
	position: absolute;
	top: 12px;
	height: 1px;
	background: #54a8ed
}

.icon-talk i:nth-child(1) {
	left: 14px;
	width: 17px
}

.icon-talk i:nth-child(2) {
	left: 14px;
	top: 17px;
	width: 10px
}

.icon-service {
	border-radius: 50% 50% 35% 35%
}

.icon-service:before {
	content: "";
	position: absolute;
	top: 8px;
	left: 9px;
	width: 27px;
	height: 14px;
	border: 1px solid #54a8ed;
	border-radius: 8px
}

.icon-service i {
	position: absolute;
	width: 4px;
	height: 4px;
	top: 13px;
	border-radius: 50%;
	background: #54a8ed
}

.icon-service i:nth-child(1) {
	left: 15px
}

.icon-service i:nth-child(2) {
	right: 15px
}

.icon-service i:nth-child(3) {
	top: 30px;
	left: 22px;
	width: 2px;
	height: 8px;
	border-radius: 0
}

.matrix-card small {
	position: relative;
	display: block;
	margin-bottom: 11px;
	color: #237ed4;
	font: 9px Arial;
	letter-spacing: 1.1px
}

.matrix-card strong {
	position: relative;
	display: block;
	font-size: 18px;
	font-weight: 500
}

.matrix-card em {
	position: relative;
	display: block;
	margin-top: 9px;
	color: #71849d;
	font-size: 11px;
	font-style: normal
}

.matrix-card>b {
	position: absolute;
	right: 21px;
	bottom: 19px;
	color: #4a90d3;
	font-size: 24px;
	font-weight: 300;
	transition: transform .25s
}

.matrix-card:hover>b,
.matrix-card.is-active>b {
	transform: rotate(90deg);
	color: #70e4ff
}

.device-stage {
	position: relative;
	overflow: hidden;
	padding: 102px 0 83px;
	color: #fff;
	background: #06162e
}

.device-stage:before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 74% 50%, rgba(1, 125, 255, .25), transparent 29%), linear-gradient(120deg, #061225, #0a2348 60%, #07152b)
}

.stage-background {
	position: absolute;
	inset: 0;
	opacity: .24;
	background-image: linear-gradient(rgba(108, 202, 255, .15) 1px, transparent 1px), linear-gradient(90deg, rgba(108, 202, 255, .15) 1px, transparent 1px);
	background-size: 54px 54px;
	mask-image: linear-gradient(to right, transparent, #000 35%, #000 70%, transparent)
}

.device-layout {
	position: relative;
	display: grid;
	grid-template-columns: 43% 57%;
	min-height: 450px
}

.device-copy {
	position: relative;
	z-index: 2;
	padding-top: 24px
}

.device-kicker {
	margin: 0 0 15px;
	color: #65e4ff;
	font: 10px Arial;
	letter-spacing: 1.25px
}

.device-copy h2 {
	margin: 0;
	font-size: 42px;
	font-weight: 500;
	letter-spacing: -1px
}

.device-description {
	max-width: 435px;
	margin: 20px 0;
	color: #aec0d8;
	font-size: 14px;
	line-height: 2
}

.device-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 27px
}

.device-tags span {
	padding: 7px 10px;
	color: #c2e9fc;
	border: 1px solid rgba(127, 208, 253, .27);
	font-size: 11px
}

.line-link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 29px;
	color: #63e3ff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .4px
}

.line-link b {
	font-size: 18px;
	font-weight: 400;
	transition: transform .25s
}

.line-link:hover b {
	transform: translateX(4px)
}

.device-visual {
	position: absolute;
	z-index: 1;
	right: -34px;
	top: -57px;
	width: 620px;
	height: 450px
}

.visual-grid {
	position: absolute;
	inset: 50px 0 0;
	background-image: linear-gradient(rgba(109, 211, 255, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(109, 211, 255, .14) 1px, transparent 1px);
	background-size: 39px 39px;
	mask-image: radial-gradient(circle at 52% 55%, #000, transparent 67%);
	transform: perspective(600px) rotateX(59deg)
}

.visual-ring {
	position: absolute;
	left: 52%;
	top: 52%;
	border: 1px solid rgba(99, 215, 255, .3);
	border-radius: 50%;
	transform: translate(-50%, -50%) rotate(-16deg)
}

.vr-one {
	width: 370px;
	height: 260px
}

.vr-two {
	width: 500px;
	height: 185px;
	transform: translate(-50%, -50%) rotate(40deg)
}

.vr-three {
	width: 260px;
	height: 390px;
	border-color: rgba(76, 127, 255, .25);
	transform: translate(-50%, -50%) rotate(34deg)
}

.stage-bot {
	position: absolute;
	left: 60%;
	top: 48%;
	width: 400px;
	height: 318px;
	transform: translate(-50%, -50%);
	filter: drop-shadow(0 30px 20px rgba(0, 0, 0, .36));
	animation: stage-float 5s ease-in-out infinite
}

.stage-head {
	position: absolute;
	top: 10px;
	left: 33px;
	width: 83px;
	height: 75px;
	border: 4px solid #9eddf6;
	border-bottom: 0;
	border-radius: 47px 47px 15px 15px;
	background: linear-gradient(115deg, #ccf7ff, #498ec2 25%, #07142b 30%, #07142b 76%, #5fa7d2)
}

.stage-head:after {
	content: "";
	position: absolute;
	top: 17px;
	left: 10px;
	width: 53px;
	height: 20px;
	border-radius: 15px;
	background: #0b4f84;
	box-shadow: inset 0 0 8px #61ddff
}

.stage-head i,
.stage-head b {
	position: absolute;
	z-index: 1;
	top: 25px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #a3f4ff;
	box-shadow: 0 0 10px #6beaff
}

.stage-head i {
	left: 20px
}

.stage-head b {
	right: 20px
}

.stage-neck {
	position: absolute;
	top: 81px;
	left: 54px;
	width: 41px;
	height: 12px;
	background: #7cc5e8
}

.stage-body {
	position: absolute;
	left: 25px;
	top: 91px;
	width: 99px;
	height: 170px;
	border: 4px solid #90d1ed;
	border-top: 0;
	border-radius: 14px 14px 23px 23px;
	background: linear-gradient(105deg, #9bd8f3, #35628e 20%, #142b4a 27%, #112743 80%, #5aa2ce)
}

.stage-body>div {
	position: absolute;
	top: 23px;
	left: 19px;
	width: 55px;
	height: 55px;
	padding: 9px 0;
	border: 1px solid #61d4f2;
	background: #082146;
	text-align: center;
	box-shadow: inset 0 0 11px #0c74aa
}

.stage-body b {
	display: block;
	color: #6ae9ff;
	font: 700 17px Arial
}

.stage-body span {
	display: block;
	margin-top: 4px;
	color: #abecff;
	font: 7px Arial;
	letter-spacing: .8px
}

.stage-body>i {
	position: absolute;
	left: 23px;
	top: 102px;
	width: 48px;
	height: 2px;
	background: #73d8f3;
	box-shadow: 0 11px #5485ad
}

.stage-base {
	position: absolute;
	bottom: 0;
	left: 3px;
	width: 141px;
	height: 43px;
	border-radius: 45% 45% 32% 32%;
	background: linear-gradient(#85c6e4, #214d78 51%, #08162a 53%);
	box-shadow: 0 11px 0 #061022
}

.stage-base i {
	position: absolute;
	bottom: -7px;
	width: 22px;
	height: 8px;
	border-radius: 50%;
	background: #020813
}

.stage-base i:first-child {
	left: 21px
}

.stage-base i:last-child {
	right: 21px
}

.data-point {
	position: absolute;
	margin-bottom: 10px;
	color: #7cdff9;
	font: 10px Arial;
	letter-spacing: 1px
}

.point-one {
	top: 79px;
	left: 15%
}

.point-two {
	right: 4%;
	top: 48%
}

.point-three {
	left: 22%;
	bottom: 63px
}

.data-point:before {
	content: "";
	position: absolute;
	top: 5px;
	width: 36px;
	height: 1px;
	background: linear-gradient(90deg, #73e1fb, transparent)
}

.point-one:before {
	left: 42px
}

.point-two:before {
	right: 40px;
	transform: rotate(180deg)
}

.point-three:before {
	left: 47px
}

.visual-readout {
	position: absolute;
	right: 4%;
	bottom: 16px;
	display: grid;
	grid-template-columns: auto auto;
	gap: 6px 13px;
	width: 143px;
	padding: 12px;
	border: 1px solid rgba(107, 204, 255, .25);
	background: rgba(8, 26, 54, .5);
	color: #88a7c6;
	font: 9px Arial;
	letter-spacing: 1px
}

.visual-readout span {
	grid-column: 1/-1
}

.visual-readout b {
	color: #6ce5ff;
	font-size: 18px;
	font-weight: 400
}

.visual-readout i {
	align-self: center;
	height: 1px;
	background: #53cce9
}

.visual-readout small {
	grid-column: 1/-1;
	color: #66f0a7;
	font-size: 8px
}

.device-specs {
	grid-column: 1/-1;
	z-index: 3;
	align-self: end;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	margin-top: 30px;
	border: 1px solid rgba(121, 201, 255, .14);
	background: rgba(5, 15, 33, .38)
}

.device-specs>div {
	min-height: 72px;
	padding: 14px 17px;
	border-left: 1px solid rgba(121, 201, 255, .14)
}

.device-specs>div:first-child {
	border: 0
}

.device-specs small {
	display: block;
	margin-bottom: 9px;
	color: #78a4cd;
	font: 14px Arial;
	letter-spacing: 1px
}

.device-specs b {
	font-size: 12px;
	font-weight: 400;
	color: #d4eaff
}

.device-specs2 {
	grid-column: 1/-1;
	z-index: 3;
	align-self: end;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	margin-top: 30px;
	border: 1px solid rgba(121, 201, 255, .14);
	background: rgba(5, 15, 33, .38)
}

.device-specs2>div {
	min-height: 72px;
	padding: 14px 17px;
	border-left: 1px solid rgba(121, 201, 255, .14)
}

.device-specs2>div:first-child {
	border: 0
}

.device-specs2 small {
	display: block;
	margin-bottom: 9px;
	color: #78a4cd;
	font: 14px Arial;
	letter-spacing: 1px
}

.device-specs2 b {
	font-size: 12px;
	font-weight: 400;
	color: #d4eaff
}

.device-stage[data-current="talk"] .stage-bot {
	transform: translate(-50%, -50%) scale(.79)
}

.device-stage[data-current="talk"] .stage-head {
	border-radius: 10px 10px 5px 5px
}

.device-stage[data-current="talk"] .stage-body {
	height: 193px;
	border-radius: 9px
}

.device-stage[data-current="service"] .stage-bot {
	transform: translate(-50%, -50%) scale(1.06)
}

.device-stage[data-current="service"] .stage-head {
	border-radius: 42px 42px 15px 15px
}

.device-stage[data-current="f2"] .stage-bot {
	transform: translate(-50%, -50%) scale(.9)
}

.device-refresh .device-copy,
.device-refresh .device-specs .device-specs2 {
	animation: fade-up .45s ease both
}

.device-refresh .stage-bot {
	animation: device-in .55s ease both, stage-float 5s .56s ease-in-out infinite
}

#device-power strong,
#device-count strong {
	font-size: 36px;
	font-weight: 900;
	line-height: 1;
}

.capability-section {
	padding: 84px 0;
	background: #f7faff
}

.capability-top {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 9%;
	margin-bottom: 61px
}

.capability-top>p {
	max-width: 300px;
	margin: 0 0 6px;
	color: #63758d;
	font-size: 14px;
	line-height: 1.9
}

.capability-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 13px
}

.capability-card {
	position: relative;
	min-height: 337px;
	padding: 26px;
	background: #fff;
	border: 1px solid #e2ebf4;
	overflow: hidden;
	transition: transform .35s, border-color .35s, box-shadow .35s
}

.capability-card:before {
	content: "";
	position: absolute;
	right: -55px;
	top: -55px;
	width: 185px;
	height: 185px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(36, 158, 255, .15), transparent 68%);
	transition: transform .45s
}

.capability-card:hover {
	transform: translateY(-8px);
	border-color: #a9d9ff;
	box-shadow: 0 19px 37px rgba(27, 74, 125, .12)
}

.capability-card:hover:before {
	transform: scale(1.45)
}

.capability-card>span {
	position: absolute;
	right: 22px;
	top: 22px;
	color: #8da2bb;
	font: 10px Arial
}

.capability-icon {
	position: relative;
	width: 45px;
	height: 45px;
	margin: 18px 0 35px;
	border: 1px solid #58a9ee
}

.shield {
	border-radius: 42% 42% 55% 55%;
	clip-path: polygon(50% 0, 100% 19%, 91% 73%, 50% 100%, 9% 73%, 0 19%)
}

.shield i {
	position: absolute;
	left: 14px;
	top: 9px;
	width: 15px;
	height: 20px;
	border: 1px solid #58a9ee;
	border-radius: 8px 8px 10px 10px
}

.shield i:after {
	content: "";
	position: absolute;
	top: 5px;
	left: 4px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #58a9ee
}

.nodes {
	border: 0
}

.nodes:before,
.nodes:after {
	content: "";
	position: absolute;
	top: 21px;
	left: 5px;
	width: 34px;
	height: 1px;
	background: #58a9ee;
	transform: rotate(45deg)
}

.nodes:after {
	transform: rotate(-45deg)
}

.nodes i {
	position: absolute;
	width: 8px;
	height: 8px;
	border: 1px solid #58a9ee;
	border-radius: 50%;
	background: #fff
}

.nodes i:nth-child(1) {
	left: 0;
	top: 18px
}

.nodes i:nth-child(2) {
	right: 0;
	top: 18px
}

.nodes i:nth-child(3) {
	left: 18px;
	top: 0;
	box-shadow: 0 35px 0 -1px #fff
}

.leaf {
	border-radius: 100% 0 100% 0;
	transform: rotate(-45deg)
}

.leaf i {
	position: absolute;
	left: 21px;
	top: 7px;
	width: 1px;
	height: 31px;
	background: #58a9ee;
	transform: rotate(45deg);
	transform-origin: center
}

.leaf i:after {
	content: "";
	position: absolute;
	left: -8px;
	top: 10px;
	width: 17px;
	height: 1px;
	background: #58a9ee
}

.spark {
	border: 0;
	transform: rotate(45deg)
}

.spark:before,
.spark:after {
	content: "";
	position: absolute;
	left: 21px;
	top: 0;
	width: 1px;
	height: 45px;
	background: #58a9ee
}

.spark:after {
	transform: rotate(90deg)
}

.spark i {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #58a9ee
}

.spark i:nth-child(1) {
	top: 0;
	left: 19px
}

.spark i:nth-child(2) {
	top: 19px;
	right: 0
}

.spark i:nth-child(3) {
	bottom: 0;
	left: 19px
}

.capability-card small {
	position: relative;
	color: #2886dc;
	font: 9px Arial;
	letter-spacing: 1.1px
}

.capability-card h3 {
	position: relative;
	margin: 12px 0 12px;
	font-size: 22px;
	font-weight: 500
}

.capability-card p {
	position: relative;
	margin: 0;
	color: #6b7b91;
	font-size: 12px;
	line-height: 1.9
}

.capability-card>b {
	position: absolute;
	right: 25px;
	bottom: 23px;
	display: grid;
	place-items: center;
	width: 29px;
	height: 29px;
	color: #488bd0;
	border: 1px solid #b8d7f0;
	font-size: 15px;
	font-weight: 400;
	transition: .25s
}

.capability-card:hover>b {
	color: #06234e;
	background: #65e1ff;
	border-color: #65e1ff
}

.parameter-section {
	position: relative;
	overflow: hidden;
	padding: 121px 0;
	background: #07162c;
	color: #fff
}

.parameter-section:before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 21% 29%, rgba(10, 123, 242, .22), transparent 24%), linear-gradient(125deg, #061226, #0b254b 65%, #061429)
}

.parameter-layout {
	position: relative;
	display: grid;
	grid-template-columns: 37% 1fr;
	gap: 10%
}

.parameter-copy h2 {
	margin: 0;
	font-size: clamp(34px, 3.8vw, 51px);
	line-height: 1.25;
	letter-spacing: -2.6px;
	font-weight: 500
}

.parameter-copy h2 strong {
	font-weight: 500;
	color: #67e2ff
}

.parameter-copy>p:not(.eyebrow) {
	margin: 22px 0 0;
	color: #aabdd4;
	font-size: 14px;
	line-height: 2
}

.parameter-board {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid rgba(145, 205, 255, .24);
	border-left: 1px solid rgba(145, 205, 255, .24)
}

.parameter-board:before {
	content: "";
	position: absolute;
	right: 18px;
	top: 25px;
	width: 130px;
	height: 130px;
	border: 1px solid rgba(104, 221, 255, .25);
	border-radius: 50%;
	box-shadow: 0 0 0 27px rgba(104, 221, 255, .04), 0 0 0 54px rgba(104, 221, 255, .025)
}

.parameter-board article {
	position: relative;
	min-height: 143px;
	padding: 24px 26px;
	border-right: 1px solid rgba(145, 205, 255, .24);
	border-bottom: 1px solid rgba(145, 205, 255, .24);
	background: rgba(7, 23, 48, .29);
	transition: background .25s
}

.parameter-board article:hover {
	background: rgba(35, 132, 213, .14)
}

.parameter-board article>span {
	position: absolute;
	top: 21px;
	right: 23px;
	color: #4da8e9;
	font: 10px Arial
}

.parameter-board small {
	display: block;
	margin-bottom: 13px;
	color: #68def7;
	font: 16px Arial;
	letter-spacing: 1px
}

.parameter-board p {
	max-width: 335px;
	margin: 0;
	color: #b4c5d8;
	font-size: 12px;
	line-height: 1.85
}

.parameter-dis {
	margin-top: 44px;
}

.parameter-title {
	display: block;
	margin: 16px 0 0;
	color: #68def7;
	font-size: 18px;
	line-height: 2;
}

.parameter-content {
	display: block;
	color: #aabdd4;
	font-size: 14px;
	line-height: 2;
}

.product-gallery {
	padding: 122px 0 40px 0;
	background: #f8fbff
}

.gallery-heading {
	margin-bottom: 55px
}

.gallery-track {
	display: grid;
	grid-template-columns: 1.32fr .8fr .88fr;
	gap: 12px;
	width: min(1440px, 100%);
	margin: 0 auto
}

.gallery-item {
	position: relative;
	min-height: 365px;
	margin: 0;
	overflow: hidden;
	background: #0b1c36
}

.gallery-item:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 20, 44, .02), rgba(4, 20, 44, .84))
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
	transition: transform .65s cubic-bezier(.2, .8, .2, 1)
}

.gallery-item:hover img {
	transform: scale(1.07)
}

.gallery-item figcaption {
	position: absolute;
	z-index: 1;
	left: 27px;
	right: 25px;
	bottom: 25px;
	color: #fff
}

.gallery-item figcaption span {
	display: block;
	margin-bottom: 9px;
	color: #8ae9ff;
	font: 9px Arial;
	letter-spacing: 1.3px
}

.gallery-item figcaption b {
	font-size: 18px;
	font-weight: 500
}

.contact-section {
	position: relative;
	overflow: hidden;
	color: #fff;
	background: radial-gradient(circle at 75% 29%, #126fc1 0%, #0a315d 24%, #061932 69%)
}

.contact-content {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 13%;
	padding: 101px 0
}

.contact-content h2 {
	grid-column: 1;
	margin: 0;
	font-size: clamp(38px, 4.5vw, 61px);
	line-height: 1.2;
	letter-spacing: -3px;
	font-weight: 500
}

.contact-content h2 strong {
	font-weight: 500;
	color: #70e6ff
}

.contact-content>div {
	align-self: end;
	padding-bottom: 4px
}

.contact-content>div p {
	max-width: 350px;
	margin: 0 0 24px;
	color: #bdd5e9;
	font-size: 14px;
	line-height: 1.85
}

.contact-radar {
	position: absolute;
	right: 8%;
	top: 50%;
	width: 370px;
	height: 370px;
	transform: translateY(-50%);
	border: 1px solid rgba(100, 218, 255, .21);
	border-radius: 50%;
	box-shadow: 0 0 0 50px rgba(100, 218, 255, .04), 0 0 0 100px rgba(100, 218, 255, .02)
}

.contact-radar:before,
.contact-radar:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1px;
	height: 100%;
	background: rgba(100, 218, 255, .2);
	transform: translate(-50%, -50%)
}

.contact-radar:after {
	transform: translate(-50%, -50%) rotate(90deg)
}

.contact-radar i {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 50%;
	height: 1px;
	background: linear-gradient(90deg, rgba(109, 231, 255, .8), transparent);
	transform-origin: left center
}

.contact-radar i:nth-child(1) {
	transform: rotate(30deg)
}

.contact-radar i:nth-child(2) {
	transform: rotate(150deg)
}

.contact-radar i:nth-child(3) {
	transform: rotate(270deg)
}

.site-footer {
	color: #b3c2d4;
	background: #051024
}

.footer-main {
	display: grid;
	grid-template-columns: 1.55fr .7fr 1.1fr .45fr;
	gap: 50px;
	padding: 58px 0
}

.footer-brand .brand {
	color: #fff
}

.footer-brand p {
	margin: 22px 0 0;
	color: #7387a1;
	font-size: 12px;
	line-height: 1.9
}

.footer-nav,
.footer-info {
	display: grid;
	gap: 12px;
	align-content: start
}

.footer-nav small,
.footer-info small {
	margin: 3px 0 8px;
	color: #5cdefa;
	font: 9px Arial;
	letter-spacing: 1.4px
}

.footer-nav a,
.footer-info a,
.footer-info span {
	font-size: 12px;
	line-height: 1.7
}

.footer-nav a:hover,
.footer-info a:hover {
	color: #70e5ff
}

.footer-info span {
	color: #7488a2
}

.back-top {
	justify-self: end;
	display: flex;
	flex-direction: column;
	align-items: end;
	justify-content: space-between;
	color: #829aba;
	font: 9px Arial;
	letter-spacing: 1px
}

.back-top b {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid #466281;
	font-size: 17px;
	font-weight: 400;
	transition: .25s
}

.back-top:hover b {
	color: #05204a;
	background: #69e1ff;
	border-color: #69e1ff
}

.footer-bottom {
	display: flex;
	justify-content: space-between;
	padding: 17px 0;
	border-top: 1px solid rgba(131, 177, 217, .14);
	color: #59718d;
	font: 10px Arial;
	letter-spacing: .6px
}

.footer-bottom a:hover {
	color: #7ce6ff
}

.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s ease, transform .7s ease
}

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

.matrix-card:nth-child(2),
.capability-card:nth-child(2) {
	transition-delay: .1s
}

.matrix-card:nth-child(3),
.capability-card:nth-child(3) {
	transition-delay: .2s
}

.matrix-card:nth-child(4),
.capability-card:nth-child(4) {
	transition-delay: .3s
}

.project-cases-section {
	background: #f6faff;
}

.project-cases-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 50px;
	margin-top: 40px;
}

.project-cases-heading .eyebrow {
	margin-bottom: 13px;
}

.project-cases-heading h2 {
	margin: 0;
	color: #102b4c;
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 600;
	letter-spacing: -1px;
}

.project-cases-heading>p {
	max-width: 250px;
	margin: 0 0 4px;
	color: #718098;
	font-size: 13px;
	line-height: 1.8;
}

.project-cases-state {
	padding: 40px 0;
	color: #7d8ba3;
	font-size: 13px;
	text-align: center;
}

.project-cases-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.project-case-card {
	min-width: 0;
	padding: 10px 10px 16px;
	background: #fff;
	border: 1px solid rgba(157, 188, 224, .42);
	box-shadow: 0 8px 24px rgba(14, 65, 116, .06);
	transition: transform .3s, box-shadow .3s, border-color .3s;
}

.project-case-card:hover {
	border-color: rgba(27, 126, 224, .42);
	box-shadow: 0 16px 34px rgba(14, 65, 116, .14);
	transform: translateY(-5px);
}

.project-case-image {
	display: flex;
	/* 改为 flex 布局 */
	justify-content: center;
	/* 水平居中 */
	align-items: center;
	/* 垂直居中 */
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #eaf2fc;
}

.project-case-image img {
	display: block;
	max-width: 100%;
	/* 限制最大宽度 */
	max-height: 100%;
	/* 限制最大高度，防止纵向超出 */
	width: auto;
	/* 自动按比例自适应 */
	height: auto;
	/* 自动按比例自适应 */
	object-fit: contain;
}

.project-case-card h3 {
	margin: 14px 4px 0;
	overflow: hidden;
	color: #17395f;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .2px;
	line-height: 1.4;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.project-cases-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 48px;
}

.news-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 64px;
}

.pager-btn {
	padding: 11px 18px;
	color: #1c3557;
	background: #fff;
	border: 1px solid #c9dcf5;
	font-size: 12px;
	letter-spacing: .5px;
	cursor: pointer;
	transition: .25s;
}

.pager-btn:hover:not(:disabled) {
	border-color: var(--blue);
	color: var(--blue);
	transform: translateY(-2px);
}

.pager-btn:disabled {
	opacity: .4;
	cursor: not-allowed;
}

.pager-pages {
	display: flex;
	align-items: center;
	gap: 6px;
}

.pager-page {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	color: #5c6b81;
	background: transparent;
	border: 1px solid transparent;
	font-size: 12px;
	cursor: pointer;
	transition: .2s;
}

.pager-page:hover {
	color: var(--blue);
}

.pager-page.is-active {
	color: #fff;
	background: var(--blue);
	border-color: var(--blue);
}

.pager-ellipsis {
	color: #718098;
	font-size: 14px;
	line-height: 34px;
}

@keyframes spin {
	to {
		transform: rotate(360deg)
	}
}

@keyframes float {
	50% {
		transform: translate(-50%, calc(-50% - 9px))
	}
}

@keyframes scan {

	0%,
	100% {
		top: 13%;
		opacity: 0
	}

	12%,
	78% {
		opacity: 1
	}

	50% {
		top: 84%
	}
}

@keyframes slide {
	to {
		background-position: 18px
	}
}

@keyframes stage-float {
	50% {
		transform: translate(-50%, calc(-50% - 9px))
	}
}

@keyframes fade-up {
	from {
		opacity: 0;
		transform: translateY(9px)
	}

	to {
		opacity: 1;
		transform: none
	}
}

@keyframes device-in {
	from {
		opacity: .1;
		transform: translate(-50%, -50%) scale(.85)
	}

	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1)
	}
}

@media (max-width:900px) {
	:root {
		--wrap: min(100% - 44px, 740px)
	}

	.site-header {
		height: 68px;
		padding: 0 22px
	}

	.site-header.is-scrolled {
		height: 61px
	}

	.header-contact {
		display: none
	}

	.nav-toggle {
		position: relative;
		z-index: 2;
		display: grid;
		gap: 6px;
		width: 34px;
		margin-left: auto;
		padding: 9px 4px;
		border: 0;
		background: transparent;
		cursor: pointer
	}

	.nav-toggle i {
		display: block;
		width: 25px;
		height: 1px;
		background: #fff;
		transition: .25s
	}

	.nav-toggle i:last-child {
		width: 17px;
		margin-left: auto
	}

	.site-header.nav-open .nav-toggle i:first-child {
		transform: translateY(3.5px) rotate(45deg)
	}

	.site-header.nav-open .nav-toggle i:last-child {
		width: 25px;
		transform: translateY(-3.5px) rotate(-45deg)
	}

	.site-nav {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 80px 22px 25px;
		background: rgba(5, 15, 32, .97);
		border-bottom: 1px solid rgba(115, 211, 255, .2);
		transform: translateY(-110%);
		transition: transform .35s ease
	}

	.site-header.nav-open .site-nav {
		transform: none
	}

	.site-nav a {
		padding: 15px 0;
		font-size: 15px
	}

	.site-nav a:after {
		bottom: 8px
	}

	.product-hero {
		min-height: 760px;
		height: auto
	}

	.hero-content {
		grid-template-columns: 1fr;
		min-height: 760px;
		padding: 137px 0 78px
	}

	.hero-copy {
		position: relative;
		z-index: 4;
		max-width: 500px
	}

	.hero-copy h1 {
		font-size: clamp(45px, 8.4vw, 67px)
	}

	.hero-machine {
		position: absolute;
		right: -70px;
		bottom: -50px;
		width: 465px;
		height: 465px;
		opacity: .8
	}

	.machine-ring.ring-one {
		width: 365px;
		height: 365px
	}

	.machine-ring.ring-two {
		width: 430px;
		height: 210px
	}

	.machine-ring.ring-three {
		height: 430px
	}

	.hero-bot {
		transform: translate(-50%, -50%) scale(.84)
	}

	.machine-data,
	.machine-axis {
		display: none
	}

	.label-a {
		top: 20px;
		left: 7%
	}

	.label-b {
		right: -8%;
		top: 48%
	}

	.product-intro {
		padding: 90px 0 70px
	}

	.intro-grid {
		gap: 8%;
		grid-template-columns: 1fr 1fr
	}

	.matrix-section {
		padding-bottom: 78px
	}

	.product-matrix {
		grid-template-columns: 1fr 1fr
	}

	.device-layout {
		grid-template-columns: 45% 55%
	}

	.device-visual {
		right: -160px;
		transform: scale(.85);
		transform-origin: center
	}

	.device-specs {
		grid-template-columns: 1fr 1fr;
		width: 100%
	}

	.device-specs2 {
		grid-template-columns: 1fr 1fr;
		width: 100%
	}

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

	.parameter-layout {
		grid-template-columns: 36% 1fr;
		gap: 7%
	}

	.gallery-track {
		grid-template-columns: 1.15fr .85fr
	}

	.gallery-item:last-child {
		display: none
	}

	.contact-content {
		gap: 7%
	}

	.footer-main {
		grid-template-columns: 1.4fr .8fr 1.1fr
	}

	.back-top {
		display: none
	}
}

@media (max-width:620px) {
	:root {
		--wrap: calc(100% - 40px)
	}

	.pointer-orb {
		display: none
	}

	.site-header {
		padding: 0 20px
	}

	.brand-copy b {
		font-size: 15px
	}

	.brand-copy small {
		font-size: 9px
	}

	.product-hero {
		min-height: 720px
	}

	.hero-content {
		min-height: 720px;
		padding-top: 120px
	}

	.hero-copy h1 {
		font-size: 47px;
		letter-spacing: -3px
	}

	.hero-copy>p:not(.eyebrow) {
		margin: 20px 0 24px;
		font-size: 13px;
		line-height: 1.9
	}

	.hero-actions {
		gap: 17px
	}

	.button {
		gap: 15px;
		padding: 13px 14px;
		font-size: 12px
	}

	.hero-pulse {
		margin-top: 32px
	}

	.hero-pulse em {
		display: none
	}

	.hero-machine {
		right: -105px;
		bottom: -10px;
		width: 430px;
		height: 430px;
		opacity: .64
	}

	.hero-bot {
		transform: translate(-50%, -50%) scale(.76)
	}

	.crosshair {
		inset: 50px
	}

	.scan-beam {
		width: 220px
	}

	.label-b {
		display: none
	}

	.scroll-hint {
		left: 20px;
		bottom: 17px
	}

	.product-intro {
		padding: 78px 0 58px
	}

	.intro-grid {
		grid-template-columns: 1fr;
		gap: 25px
	}

	.section-title h2 {
		font-size: 36px;
		letter-spacing: -2px
	}

	.intro-copy>p {
		font-size: 13px;
		line-height: 1.95
	}

	.matrix-section {
		padding-bottom: 65px
	}

	.matrix-heading {
		margin-bottom: 14px
	}

	.product-matrix {
		grid-template-columns: 1fr 1fr;
		gap: 9px
	}

	.matrix-card {
		min-height: 215px;
		padding: 17px
	}

	.matrix-icon {
		margin: 7px 0 24px;
		transform: scale(.84);
		transform-origin: left
	}

	.matrix-card strong {
		font-size: 15px;
		line-height: 1.45
	}

	.matrix-card em {
		font-size: 10px;
		line-height: 1.5
	}

	.matrix-code {
		right: 14px;
		top: 14px
	}

	.matrix-card>b {
		right: 16px;
		bottom: 12px
	}

	.device-stage {
		padding: 70px 0
	}

	.device-layout {
		display: block;
		min-height: 695px
	}

	.device-copy {
		padding-top: 0
	}

	.device-copy h2 {
		font-size: 30px
	}

	.device-description {
		max-width: 350px;
		font-size: 13px;
		line-height: 1.9
	}

	.device-tags {
		margin-top: 20px;
		max-width: 350px;
		gap: 7px
	}

	.device-tags span {
		padding: 6px 8px;
		font-size: 10px
	}

	.device-visual {
		top: 196px;
		right: -172px;
		transform: scale(.67);
		transform-origin: top right;
		opacity: .82
	}

	.device-specs {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		grid-template-columns: 1fr 1fr
	}

	.device-specs>div {
		min-height: 64px;
		padding: 11px
	}

	.device-specs small {
		margin-bottom: 6px;
		font-size: 8px
	}

	.device-specs b {
		font-size: 10px;
		line-height: 1.4
	}

	.device-specs2 {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		grid-template-columns: 1fr 1fr
	}

	.device-specs2>div {
		min-height: 64px;
		padding: 11px
	}

	.device-specs2 small {
		margin-bottom: 6px;
		font-size: 8px
	}

	.device-specs2 b {
		font-size: 10px;
		line-height: 1.4
	}

	.capability-section {
		padding: 82px 0
	}

	.capability-top {
		display: block;
		margin-bottom: 37px
	}

	.capability-top>p {
		margin: 21px 0 0;
		font-size: 13px
	}

	.capability-grid {
		grid-template-columns: 1fr;
		gap: 10px
	}

	.capability-card {
		min-height: 250px;
		padding: 23px
	}

	.capability-icon {
		margin: 10px 0 25px
	}

	.capability-card h3 {
		margin: 10px 0;
		font-size: 21px
	}

	.parameter-section {
		padding: 81px 0
	}

	.parameter-layout {
		grid-template-columns: 1fr;
		gap: 41px
	}

	.parameter-copy h2 {
		font-size: 36px;
		letter-spacing: -2px
	}

	.parameter-copy>p:not(.eyebrow) {
		font-size: 13px
	}

	.parameter-board {
		grid-template-columns: 1fr
	}

	.parameter-board article {
		min-height: 0;
		padding: 20px 21px
	}

	.parameter-board p {
		font-size: 11px
	}

	.product-gallery {
		padding-top: 81px
	}

	.gallery-heading {
		margin-bottom: 34px
	}

	.gallery-track {
		grid-template-columns: 1fr;
		gap: 10px
	}

	.gallery-item,
	.gallery-item.gallery-wide {
		min-height: 275px
	}

	.gallery-item:last-child {
		display: block
	}

	.gallery-item figcaption {
		left: 20px;
		bottom: 20px
	}

	.gallery-item figcaption b {
		font-size: 16px
	}

	.contact-content {
		grid-template-columns: 1fr;
		gap: 26px;
		padding: 70px 0
	}

	.contact-content h2 {
		font-size: 39px;
		letter-spacing: -2px
	}

	.contact-radar {
		right: -190px;
		width: 330px;
		height: 330px
	}

	.footer-main {
		grid-template-columns: 1fr 1fr;
		gap: 38px 23px;
		padding: 45px 0
	}

	.footer-brand {
		grid-column: span 2
	}

	.footer-info {
		grid-column: span 2
	}

	.footer-bottom {
		flex-direction: column;
		gap: 10px;
		font-size: 9px
	}

	.page-grain {
		opacity: .015
	}

}

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

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

	.reveal {
		opacity: 1;
		transform: none
	}

	.project-cases-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}