.game-hero{
	position:relative;
	height:min(760px,calc(100vh - var(--header-height)));
	min-height:580px;
	overflow:hidden;
	background:#050816;
}

.game-hero::before{
	position:absolute;
	inset:0;
	z-index:2;
	content:"";
	background:
		linear-gradient(90deg,rgba(5,8,22,.9) 5%,rgba(5,8,22,.46) 48%,rgba(5,8,22,.2)),
		linear-gradient(0deg,#050816,transparent 46%);
	pointer-events:none;
}

.game-hero::after{
	position:absolute;
	right:5%;
	top:15%;
	z-index:3;
	width:42vw;
	max-width:620px;
	aspect-ratio:1;
	content:"";
	border:1px solid rgba(59,130,246,.32);
	border-radius:50%;
	box-shadow:0 0 60px rgba(59,130,246,.22),inset 0 0 80px rgba(168,85,247,.13);
	transform:rotate(-15deg) scaleY(.34);
	pointer-events:none;
}

.ydh_header,#ydhRotate,#ydhRotate .swiper-slide{
	height:100%;
}

.ydh_header{
	position:absolute;
	inset:-6% 0;
}

#ydhRotate .swiper-slide{
	width:min(86vw,1600px);
	overflow:hidden;
	background:#08102a;
}

#ydhRotate .swiper-slide img{
	width:100%;
	height:100%;
	object-fit:cover;
	filter:saturate(.82) brightness(.72) contrast(1.08);
}

.game-hero__copy{
	position:relative;
	z-index:4;
	display:flex;
	justify-content:center;
	flex-direction:column;
	height:100%;
	pointer-events:none;
}

.game-hero__copy p{
	margin:0 0 18px;
	color:var(--primary);
	font-size:var(--type-body);
	font-weight:750;
	letter-spacing:.16em;
	text-shadow:0 0 20px rgba(59,130,246,.6);
}

.game-hero__copy h1{
	max-width:920px;
	margin:0;
	font-size:var(--type-display);
	font-weight:820;
	line-height:.9;
	letter-spacing:-.07em;
	text-shadow:0 0 52px rgba(59,130,246,.28);
}

.swiper-pagination-bullet{
	width:26px!important;
	height:4px!important;
	border:0!important;
	border-radius:var(--radius-ui)!important;
	background:rgba(255,255,255,.35)!important;
	opacity:1!important;
	transition:width .25s ease,background .25s ease!important;
}

.swiper-pagination-bullet-active{
	width:54px!important;
	background:linear-gradient(90deg,var(--primary),var(--violet))!important;
	box-shadow:0 0 18px rgba(59,130,246,.48);
}

.gameArea{
	position:relative;
	padding:96px 0;
	overflow:hidden;
	background:
		radial-gradient(circle at 8% 25%,rgba(59,130,246,.12),transparent 28rem),
		#050816;
}

.gameArea.white{
	background:
		radial-gradient(circle at 92% 25%,rgba(168,85,247,.12),transparent 30rem),
		#08102a;
}

.gameArea.primary{
	background:
		radial-gradient(circle at 18% 38%,rgba(59,130,246,.28),transparent 28rem),
		radial-gradient(circle at 84% 62%,rgba(236,72,153,.2),transparent 30rem),
		linear-gradient(135deg,#07102c,#161044 58%,#210d37);
}

.gameArea>.container{
	position:relative;
	z-index:2;
}

.gameArea h2.title{
	max-width:980px;
	margin:0 auto 26px;
	color:#fff;
	font-size:var(--type-heading);
	font-weight:780;
	line-height:1.08;
	letter-spacing:-.05em;
	text-align:center;
	text-wrap:balance;
}

.gameArea h3.summary{
	max-width:940px;
	margin:0 auto 38px;
	padding:0;
	color:var(--text-soft);
	font-size:var(--type-body);
	font-weight:400;
	line-height:1.95;
	text-align:center;
}

.gameArea.primary h2.title,.gameArea.primary h3.summary{
	color:#fff;
}

.gameArea.primary h3.summary{
	color:rgba(247,248,255,.8);
}

.gameArea>.container>.row:not(.picList){
	margin-top:38px;
}

.gameArea>.container>.serviceList{
	display:grid;
	grid-template-columns:repeat(6,minmax(0,1fr));
	gap:16px;
	margin:38px 0 0;
}

.serviceList>[class*="col-"]{
	width:auto;
	max-width:none;
	padding:0;
	flex:none;
}

.serviceItem{
	position:relative;
	min-height:156px;
	padding:24px 10px 20px;
	overflow:hidden;
	border:1px solid rgba(126,148,225,.16);
	border-radius:var(--radius-ui);
	background:linear-gradient(145deg,rgba(16,24,58,.9),rgba(8,14,35,.8));
	color:var(--text-soft);
	font-weight:650;
	text-align:center;
	box-shadow:0 16px 42px rgba(0,0,0,.14);
	transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}

.serviceItem::after{
	position:absolute;
	left:12%;
	right:12%;
	bottom:-30px;
	height:44px;
	content:"";
	background:linear-gradient(90deg,var(--blue),var(--violet),var(--magenta));
	filter:blur(22px);
	opacity:.2;
}

.serviceItem:hover{
	background:linear-gradient(145deg,rgba(20,31,75,.95),rgba(11,18,46,.9));
	border-color:rgba(59,130,246,.28);
	box-shadow:var(--shadow-glow);
	transform:translateY(-6px);
}

.serviceItem>i{
	display:block;
	margin-bottom:10px;
	font-size:var(--type-display);
	font-weight:normal;
	line-height:1;
	background:linear-gradient(135deg,var(--primary),var(--blue) 45%,var(--violet));
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
	filter:drop-shadow(0 0 14px rgba(59,130,246,.3));
}

.picList{
	margin:34px -8px 0;
}

.picList>div{
	padding:8px;
}

.picItem{
	position:relative;
	height:190px;
	overflow:hidden;
	border-radius:var(--radius-ui);
	background:#0c1431;
	box-shadow:0 18px 44px rgba(0,0,0,.18);
}

.picItem::after{
	position:absolute;
	inset:0;
	content:"";
	background:linear-gradient(160deg,transparent 48%,rgba(59,130,246,.14));
	pointer-events:none;
}

.picItem>div{
	height:100%;
	background-position:center;
	background-size:cover;
	filter:saturate(.88);
	transition:transform .7s cubic-bezier(.16,1,.3,1),filter .4s ease;
}

.picItem:hover>div{
	transform:scale(1.09);
	filter:saturate(1.06);
}

@media (max-width:768px){
	.game-hero{
		height:620px;
		min-height:0;
	}

	#ydhRotate .swiper-slide{
		width:100vw;
	}

	.game-hero__copy{
		justify-content:flex-end;
		padding-bottom:100px;
	}

	.game-hero__copy h1{
		font-size:var(--type-display);
	}

	.gameArea{
		padding:64px 0;
	}

	.gameArea h2.title{
		font-size:var(--type-heading);
	}

	.gameArea h3.summary{
		font-size:var(--type-body);
		line-height:1.85;
	}

	.gameArea>.container>.serviceList{
		grid-template-columns:repeat(3,minmax(0,1fr));
		gap:12px;
	}

	.serviceItem{
		min-height:132px;
		padding:20px 4px 14px;
	}

	.serviceItem>i{
		font-size:var(--type-heading);
	}

	.picItem{
		height:29vw;
		min-height:122px;
	}

}

@media (min-width:769px) and (max-width:1199px){
	.gameArea>.container>.serviceList{
		grid-template-columns:repeat(4,minmax(0,1fr));
	}
}

@media (max-width:479px){
	.gameArea>.container>.serviceList{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}

@media (prefers-reduced-motion:reduce){
	.ydh_header{
		transform:none!important;
	}
}