:root {
	--container: 1180px;
	--max-width: 1200px;
	--text-dark: #2b3b49;
	--muted: #6b7b87;
	--accent: #1d84ff;
	--surface-elev-1: 0 6px 18px rgba(20, 30, 40, 0.06);
	--surface-elev-2: 0 12px 34px rgba(20, 30, 40, 0.08);
	--page-bg: linear-gradient(180deg, #f3f4f7 0%, #f3f4f7 45%, #f3f4f7 100%);
}

/* Reset / base */
* {
	box-sizing: border-box
}

html,
body {
	height: 100%
}

body {
	margin: 0;
	padding-top: 72px;
	/* offset for fixed header height */
	font-family: "Montserrat", "PingFang SC", "Segoe UI", Arial, sans-serif;
	color: var(--text-dark);
	background: var(--page-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* Utility container */
.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 20px
}

/* Header */
.site-header {
	background: rgba(255, 255, 255, 0.98);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	box-shadow: 0 1px 8px rgba(30, 40, 50, 0.06)
}

.header-inner {
	max-width: var(--container);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	gap: 12px
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px
}

.brand-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit
}

.brand-link img {
	height: 38px
}

/* Nav */
nav.main-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center
}

.nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 28px;
	align-items: center
}

.nav-item {
	position: relative
}

.nav-item>a {
	display: inline-block;
	padding: 8px 12px;
	font-size: 14px;
	color: var(--muted);
	text-decoration: none
}

.nav-item>a:hover {
	color: var(--accent)
}

.dropdown {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 180px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 12px 34px rgba(20, 30, 40, 0.08);
	padding: 8px 0;
	display: none;
	z-index: 70
}

.nav-item:hover>.dropdown,
.nav-item:focus-within>.dropdown {
	display: block
}

.dropdown a {
	display: block;
	padding: 8px 14px;
	color: var(--text-dark);
	text-decoration: none
}

/* Language: redesigned dropdown (visual only) */
.lang-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.lang-btn {
	font-size: 13px;
	color: var(--muted);
	padding: 8px 12px;
	border-radius: 20px;
	background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
	border: 1px solid rgba(16, 30, 40, 0.04);
	box-shadow: 0 6px 18px rgba(29, 132, 255, 0.04);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: transform .12s ease, box-shadow .12s ease, color .12s ease;
}

.lang-btn:focus {
	outline: 2px solid rgba(29, 132, 255, 0.12);
	outline-offset: 2px;
}

.lang-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(29, 132, 255, 0.06);
	color: var(--accent);
}

.lang-dropdown {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	min-width: 180px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 12px 34px rgba(20, 30, 40, 0.12);
	padding: 8px;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease;
	pointer-events: none;
	z-index: 1100;
	border: 1px solid rgba(16, 30, 40, 0.04);
}

.lang-wrap:hover > .lang-dropdown,
.lang-wrap:focus-within > .lang-dropdown {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.lang-dropdown a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--text-dark);
	font-size: 14px;
}

.lang-dropdown a + a {
	margin-top: 6px;
}

.lang-dropdown a:hover,
.lang-dropdown a:focus {
	background: linear-gradient(90deg, rgba(29, 132, 255, 0.06), rgba(29, 132, 255, 0.02));
	color: var(--accent);
	outline: none;
}

.lang-dropdown a:focus {
	box-shadow: 0 0 0 3px rgba(29, 132, 255, 0.08);
}

/* When user selects a language, briefly force-hide the dropdown to override :hover state */
.lang-wrap.lang-closed > .lang-dropdown {
	opacity: 0 !important;
	transform: translateY(-6px) !important;
	pointer-events: none !important;
}

/* Keep dropdown hidden after selection until mouse leaves or user re-opens */
.lang-wrap.lang-disabled > .lang-dropdown {
	opacity: 0 !important;
	transform: translateY(-6px) !important;
	pointer-events: none !important;
}

/* Mobile nav toggle (button exists on all pages) */
.mobile-nav-toggle {
	display: none;
	font-size: 18px;
	background: transparent;
	border: 0;
	cursor: pointer
}

@media (max-width: 540px) {
	.mobile-nav-toggle {
		display: block
	}

	nav.main-nav {
		display: none
	}

	.header-inner {
		justify-content: space-between
	}
}

.top-stats-inner {
	display: flex;
	gap: 18px;
	align-items: stretch;
	max-width: var(--container);
	margin: 0 auto;
	padding: 12px 20px;
	transform: translateX(-2cm);
}

.top-stats-inner .stat {
	position: relative;
	padding: 12px 18px
}

.top-stats-inner .stat+.stat::before {
	content: '';
	position: absolute;
	left: 0;
	top: 12px;
	bottom: 12px;
	width: 1px;
	background: rgba(16, 30, 40, 0.04)
}

/* Hero / carousel */
.hero {
	width: 100%;
	background: #fff;
	padding-bottom: 8px
}

.carousel-wrap {
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
	padding: 0
}

.carousel-wrap[data-static="true"] {
	height: 420px;
	overflow: hidden;
	background: #f6f8fb
}

.carousel {
	width: 100%;
	height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden
}

.slides {
	width: 100%;
	height: 100%
}

.slides img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.indicators {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 14px;
	display: flex;
	gap: 10px;
	z-index: 10
}

.indicators button {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 0;
	background: #d7dbe0;
	cursor: pointer
}

.indicators button.active {
	background: var(--accent);
	box-shadow: 0 2px 8px rgba(29, 132, 255, 0.2)
}

.carousel-wrap[data-static="true"]::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(7, 20, 34, 0.06) 0%, rgba(7, 20, 34, 0.02) 30%, transparent 60%)
}

/* Fullscreen hero video section (in-flow, occupies first viewport) */
.hero-video {
	width: 100%;
	/* cancel body top offset so hero fills viewport under the fixed header */
	margin-top: -72px;
	height: calc(100vh + 72px); /* include header height so visible area is full viewport */
	position: relative;
	overflow: hidden;
}

.hero-video #bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none; /* non-interactive */
}

/* Ensure header and main content overlay the hero video */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1002; }
main, .site-footer-min { position: relative; z-index: 1001; }

/* About / content blocks */
.about {
	background: #fff;
	padding: var(--about-vspace, 60px) 0;
	border-radius: 12px;
	box-shadow: var(--surface-elev-1);
	overflow: clip;
	transition: box-shadow 220ms ease, transform 220ms ease;
	height: var(--about-height, auto);
	min-height: var(--about-min-height, auto)
}

.about:hover {
	box-shadow: var(--surface-elev-2);
	transform: translateY(-4px)
}

.about-row {
	display: flex;
	gap: 36px;
	align-items: center;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 20px
}

.about-left {
	flex: 0 0 var(--about-left-w, 40%);
	max-width: var(--about-left-max, 420px);
	height: 100%;
	position: relative
}

.about-left img,
.about-left video.about-video {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 8px;
	box-shadow: 0 12px 34px rgba(20, 40, 60, 0.06);
	object-fit: var(--about-img-fit, cover)
}

.about-right {
	flex: 1 1 auto;
	color: var(--text-dark);
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	padding: 12px
}

.about-right::before {
	content: '';
	position: absolute;
	left: -8px;
	top: 16px;
	bottom: 16px;
	width: 4px;
	border-radius: 3px;
	background: linear-gradient(180deg, rgba(29, 132, 255, 0.95), rgba(29, 132, 255, 0.6));
	box-shadow: 0 6px 18px rgba(29, 132, 255, 0.06)
}

@media(max-width:880px) {
	.about-row {
		flex-direction: column;
		gap: 18px
	}

	.about-left {
		width: 100%;
		max-width: 100%;
		flex-basis: auto
	}

	.about-left img,
	.about-left video.about-video {
		height: auto;
		object-fit: cover
	}

	.about-right::before {
		display: none
	}
}

/* Cards */
.capabilities-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px
}

.cap-card {
	background: #fff;
	border-radius: 10px;
	padding: 18px;
	box-shadow: 0 6px 20px rgba(16, 30, 40, 0.04);
	transition: transform 240ms ease, box-shadow 240ms ease
}

.cap-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(16, 30, 40, 0.08)
}

/* Page-scoped fix: ensure the "工厂与设施" gallery is centered on the homepage
   This is intentionally specific and local to the homepage to avoid global overrides. */
main#company-intro section.big-figure.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 32px 20px;
}

main#company-intro .big-figure-inner {
	max-width: calc(var(--container) - 40px);
	margin: 0 auto;
	display: grid; /* reinforce layout in case inline styles are removed */
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}

/* Center the section heading within the big-figure module (homepage only) */
main#company-intro section.big-figure.container .section-heading {
	text-align: center;
	display: block;
	margin: 0 auto 18px;
	max-width: var(--container);
}

/* Center the partners section heading on the homepage */
main#company-intro .partners .section-heading {
	text-align: center;
	display: block;
	margin: 0 auto 18px;
}

/* Apply the same CTA gradient used by .yg-apply.full-bleed (from Yuangong.css)
   to the homepage "联系与行动" block. This is page-scoped only. */
main#company-intro section.container[aria-label="联系与行动"] {
	/* full-bleed / edge-to-edge layout like .yg-apply.full-bleed
	   override .container max-width so this section spans the viewport */
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
	max-width: none; /* IMPORTANT: override .container max-width */
	padding: 36px 0 60px; /* horizontal padding handled by inner container */
	background: linear-gradient(90deg,#0b74d1 0,#127bdc 100%);
	color: #fff; /* pure white text */
	box-sizing: border-box;
	border-radius: 0; /* full-bleed shouldn't have rounding */
	z-index: 0;
}

/* keep the inner constrained container centered */
main#company-intro section.container[aria-label="联系与行动"] > div[style] {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

main#company-intro section[aria-label="联系与行动"] .section-heading {
	color: #ffffff;
}

main#company-intro section[aria-label="联系与行动"] p {
	color: #ffffff;
}

/* Ensure the right-side action buttons keep their intended contrast (keep white button visible) */
main#company-intro section[aria-label="联系与行动"] .cap-card {
	box-shadow: var(--surface-elev-1);
}

/* Page-scoped vertical spacing between the "核心能力" block and the "工厂与设施" gallery */
main#company-intro section[aria-label="公司能力展示"] {
	margin-bottom: 64px; /* increased spacing */
}

main#company-intro section.big-figure.container {
	margin-top: 56px; /* increased top gap for the gallery */
}

/* Partners */
.partners {
	padding: 40px 0
}

.partners-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
	position: relative
}

.partner-tile {
	display: block;
	padding: 18px;
	background: transparent;
	border-radius: 8px
}

.partner-tile img {
	max-width: 120px;
	display: block;
	filter: grayscale(80%) contrast(0.95);
	transition: transform 240ms ease, filter 240ms ease
}

.partner-tile:hover img {
	filter: none;
	transform: translateY(-6px) scale(1.02)
}

.partners-inner::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
	background-size: 120px 120px, 120px 120px;
	opacity: 0.04;
	pointer-events: none
}

/* Big figure (reusable) */
.big-figure {
	--mode: centered;
	--max-width: 1280px;
	--image-max-height: 68vh;
	--radius: 12px;
	--shadow: 0 16px 36px rgba(20, 30, 40, 0.10);
	margin: 28px 0;
	background: #fff;
	box-shadow: var(--shadow);
	border-radius: var(--radius);
	overflow: hidden
}

.big-figure-inner {
	width: 100%;
	box-sizing: border-box;
	padding: 0
}

.big-figure[data-mode="centered"] .big-figure-inner,
.big-figure:not([data-mode]) .big-figure-inner {
	max-width: var(--max-width);
	margin: 0 auto
}

.big-figure[data-mode="full-bleed"] {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	border-radius: 0;
	box-shadow: none;
	background: #fff
}

.big-figure img {
	display: block;
	width: 100%;
	height: auto;
	max-height: var(--image-max-height);
	object-fit: cover
}

/* Footer */
.site-footer-min {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	background: linear-gradient(180deg, #53585a 0%, #636f74 100%);
	color: #dbeeff;
	padding: 28px 0
}

.footer-inner-min {
	max-width: var(--container);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 12px 20px;
	box-sizing: border-box;
	position: relative
}

.footer-meta-min {
	color: rgba(255, 255, 255, 0.9);
	font-size: 13px;
	line-height: 1.5;
	text-align: right;
	min-width: 220px
}

.footer-meta-min .meta-copyright {
	color: #ffffff;
	font-weight: 600
}

.footer-meta-min .meta-icp {
	font-size: 12px;
	opacity: 0.85;
	margin-top: 4px;
	color: rgba(255, 255, 255, 0.8)
}

.footer-contact-min {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.92);
	min-width: 240px
}

.footer-contact-min a {
	background: linear-gradient(90deg, var(--accent), #7ecbff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-decoration: none;
	font-weight: 600
}

.footer-contact-min a:hover {
	text-decoration: underline;
	opacity: 0.95
}

.footer-inner-min::before {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -10px;
	width: 84%;
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent);
	pointer-events: none
}

/* Footer QR codes (placed to the left of contact info) */
.footer-qr {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-right: 6px;
}
.qr-figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.qr-img {
	width: 88px;
	height: 88px;
	object-fit: contain;
	background: #fff;
	padding: 8px;
	border-radius: 10px;
	box-shadow: 0 8px 20px rgba(13,100,255,0.08);
	display: block;
}
.qr-caption {
	font-size: 12px;
	color: rgba(255,255,255,0.9);
	text-align: center;
}

@media (max-width:880px) {
	.footer-qr { margin-bottom: 12px; }
	.footer-qr { order: 0; }
	.footer-contact-min { order: 1; }
	.footer-inner-min { align-items: center; gap: 12px; }
}

/* wrapper to keep QR codes immediately adjacent to contact block */
.footer-contact-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}

@media (max-width:880px) {
	.footer-contact-wrap { flex-direction: column; align-items: center; }
}

@media(max-width:880px) {
	.footer-inner-min {
		flex-direction: column;
		align-items: center;
		text-align: center
	}

	.footer-contact-min {
		align-items: center
	}

	.footer-meta-min {
		text-align: center
	}
}

/* Video player component */
.video-player {
	border: 1px solid rgba(16, 30, 40, 0.06);
	border-radius: 8px;
	background: #000;
	display: inline-block;
	resize: both;
	overflow: auto;
	width: 640px;
	height: 360px;
	max-width: 100%;
	position: relative
}

.video-player .vp-inner {
	width: 100%;
	height: 100%;
	position: relative
}

.video-player video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	background: #000
}

.video-player .vp-controls {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: flex;
	gap: 8px;
	align-items: center;
	background: rgba(0, 0, 0, 0.45);
	padding: 6px;
	border-radius: 6px
}

/* Decorative accents */
.section-heading {
	position: relative;
	display: inline-block;
	padding-bottom: 10px
}

.section-heading::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 56px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--accent), rgba(29, 132, 255, 0.4));
	box-shadow: 0 6px 18px rgba(29, 132, 255, 0.08)
}

/* Responsive tweaks */
@media(max-width:1100px) {
	.about-row {
		gap: 20px
	}

	.carousel-wrap[data-static="true"] {
		height: 360px
	}
}

@media(max-width:880px) {
	.nav-list {
		gap: 14px
	}

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

	.video-player {
		width: 100%;
		height: 240px
	}
}