.PageHero,
.CompanyIntroduction,
.OemSection,
.PartnersSection,
.ContactSection {
	padding: 0;
}

.PageHero {
	position: relative;
	height: 800px;
	overflow: hidden;
	background: #061423 url("../images/hero-earth.png") -13px -985px / 1940px 2910px no-repeat;
}

.PageHero::after {
	position: absolute;
	inset: 100px 0 0;
	background: rgba(0, 8, 18, 0.24);
	content: "";
}

.PageHeroContent {
	position: relative;
	z-index: 1;
	padding-top: 281px;
}

.PageHero h1 {
	margin: 0;
	color: #fff;
	font-size: 48px;
	font-weight: 600;
	line-height: 54px;
}

.PageHero p {
	margin: 26px 0 0;
	color: #fff;
	font-size: 20px;
	font-weight: 400;
	line-height: 34px;
}

.PrimaryButton,
.OutlineButton {
	display: flex;
	align-items: center;
	justify-content: center;
}

.PrimaryButton {
	width: 206px;
	height: 50px;
	margin-top: 68px;
	border-radius: 8px;
	background: #1764c8;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
}

.PrimaryButton:hover,
.PrimaryButton:focus-visible {
	background: #2876da;
	box-shadow: 0 8px 24px rgba(23, 100, 200, 0.28);
}

.PrimaryButton:active {
	background: #1257b0;
}

.PrimaryButton:focus-visible,
.OutlineButton:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

.CompanyIntroduction {
	padding: 120px 0 140px;
	background: #010101;
}

.CompanyIntroduction h2,
.ContactSection h2 {
	margin: 0;
	color: #edeef2;
	font-size: 48px;
	font-weight: 400;
	line-height: 76px;
}

.CompanyIntroductionInner > h2 {
	text-align: center;
}

.CompanyIntroductionCopy {
	width: 1400px;
	margin: 35px 0 0;
	color: #acacac;
	font-size: 20px;
	font-weight: 300;
	line-height: 30px;
	text-align: center;
}

.OemSection,
.PartnersSection {
	width: 100%;
}

.OemSection h2,
.PartnersSection h2 {
	text-align: center;
}

.OemSection h2 {
	margin-top: 130px;
}

.OemLogo {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.OemLogo:hover {
	opacity: 0.82;
	transform: translateY(-3px);
}

.OemLogoXiaomi {
	width: 196px;
}

.OemLogoVivo {
	width: 216px;
}

.OemLogoHuawei {
	width: 122px;
}

.OemLogoHonor {
	width: 201px;
}

.OemLogoSamsung {
	width: 230px;
}

.OemLogoTranssion {
	width: 230px;
}

.OemLogoLenovo {
	width: 230px;
}

.OemLogoMeizu {
	gap: 13px;
	width: 217px;
}

.OemLogoIqoo {
	width: 224px;
}

.OemLogoGionee {
	width: 232px;
}

.OemGrid {
	display: grid;
	align-items: center;
	justify-items: center;
	grid-template-columns: repeat(5, 230px);
	column-gap: 62px;
	row-gap: 163px;
	margin-top: 94px;
}

.OemLogo img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.OemLogoMeizu img:first-child {
	width: 59px;
	height: 37px;
}

.OemLogoMeizu img:last-child {
	width: 145px;
	height: 28px;
	filter: invert(1);
}

.OemLogoTranssion img {
	filter: invert(1);
}

.PartnersSection h2 {
	margin-top: 127px;
}

.PartnersGrid {
	display: grid;
	grid-template-columns: repeat(4, 322px);
	gap: 46px 37px;
	margin-top: 50px;
}

.PartnerMedia {
	width: 322px;
	aspect-ratio: 322 / 138;
}

.PartnerMedia img {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.PartnerMedia:hover img {
	opacity: 0.9;
	transform: scale(1.015);
}

.ContactSection {
	position: relative;
	padding: 109px 0 165px;
	background: #061127 url("../images/contact-earth.png") left -256px / 2451px 1373px no-repeat;
}

.ContactSection::after {
	position: absolute;
	inset: 0;
	background: rgba(1, 1, 1, 0.5);
	content: "";
}

.ContactSectionContent {
	position: relative;
	z-index: 1;
}

.ContactSection p {
	width: 900px;
	margin: 22px 0 0;
	color: #acacac;
	font-size: 20px;
	font-weight: 300;
	line-height: 35px;
}

.OutlineButton {
	width: 206px;
	height: 62px;
	margin-top: 94px;
	border: 1px solid #979797;
	color: #edeef2;
	font-size: 28px;
	line-height: 62px;
}

.OutlineButton:hover,
.OutlineButton:focus-visible {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.OutlineButton:active {
	background: rgba(255, 255, 255, 0.14);
}

@media only screen and (max-width: 1440px) {
	.PageHero {
		height: 650px;
		background-position: center -800px;
		background-size: 1576px 2364px;
	}

	.PageHero::after {
		inset: 88px 0 0;
	}

	.PageHeroContent {
		padding-top: 225px;
	}

	.PageHero h1 {
		font-size: 42px;
		line-height: 50px;
	}

	.PageHero p {
		margin-top: 20px;
		font-size: 18px;
		line-height: 30px;
	}

	.PrimaryButton {
		width: 184px;
		height: 48px;
		margin-top: 50px;
		font-size: 18px;
	}

	.CompanyIntroduction {
		padding: 90px 0 110px;
	}

	.CompanyIntroduction h2,
	.ContactSection h2 {
		font-size: 42px;
		line-height: 64px;
	}

	.CompanyIntroductionCopy {
		width: 100%;
		margin-top: 30px;
		font-size: 18px;
		line-height: 30px;
	}

	.OemSection {
		margin-top: 0;
	}

	.OemSection h2 {
		margin-top: 82px;
	}

	.OemGrid {
		grid-template-columns: repeat(5, 1fr);
		gap: 64px 40px;
		margin-top: 42px;
	}

	.OemLogo {
		width: 100%;
		aspect-ratio: 23 / 13;
		padding: 24px;
	}

	.OemLogoMeizu {
		gap: 10px;
	}

	.PartnersSection {
		margin-top: 0;
	}

	.PartnersSection h2 {
		margin-top: 82px;
	}

	.PartnersGrid {
		grid-template-columns: repeat(4, 1fr);
		gap: 30px;
		margin-top: 40px;
	}

	.PartnerMedia {
		width: 100%;
		height: auto;
		aspect-ratio: 322 / 138;
	}

	.ContactSection {
		padding: 90px 0 134px;
		background-position: left -220px;
		background-size: 2070px 1159px;
	}

	.ContactSection p {
		width: 820px;
		margin-top: 20px;
		font-size: 18px;
		line-height: 32px;
	}

	.OutlineButton {
		width: 184px;
		height: 56px;
		margin-top: 92px;
		font-size: 24px;
		line-height: 56px;
	}
}

@media only screen and (max-width: 768px) {
	.PageHero {
		height: 560px;
		background-position: center -650px;
		background-size: 1340px 2010px;
	}

	.PageHero::after {
		inset: 72px 0 0;
	}

	.PageHeroContent {
		padding-top: 168px;
	}

	.PageHero h1 {
		max-width: 650px;
		font-size: 34px;
		line-height: 44px;
	}

	.PageHero p {
		margin-top: 20px;
		font-size: 16px;
		line-height: 27px;
	}

	.PrimaryButton {
		width: 160px;
		height: 46px;
		margin-top: 42px;
		font-size: 16px;
	}

	.CompanyIntroduction {
		padding: 64px 0 78px;
	}

	.CompanyIntroduction h2,
	.ContactSection h2 {
		font-size: 32px;
		line-height: 46px;
	}

	.CompanyIntroductionCopy {
		margin-top: 24px;
		font-size: 16px;
		line-height: 27px;
		text-align: left;
	}

	.OemSection h2,
	.PartnersSection h2 {
		margin-top: 64px;
	}

	.OemGrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 18px;
		margin-top: 28px;
	}

	.OemLogo {
		aspect-ratio: 9 / 5;
		padding: 22px;
	}

	.OemLogo:hover {
		transform: none;
	}

	.PartnersGrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
		margin-top: 28px;
	}

	.PartnerMedia:hover img {
		transform: none;
	}

	.ContactSection {
		padding: 76px 0;
		background-position: center center;
		background-size: cover;
	}

	.ContactSection p {
		width: 100%;
		margin-top: 22px;
		font-size: 16px;
		line-height: 28px;
	}

	.OutlineButton {
		width: 164px;
		height: 50px;
		margin-top: 42px;
		font-size: 20px;
		line-height: 50px;
	}
}