/* 首页 · 服务能力（后台：首页 →「首页服务能力」） */
.svc {
	--svc-accent: #17a05c;
	--svc-accent-deep: #1c6b4f;
	padding: 1.02rem 0 1.08rem;
	background: #f5f8fa;
	box-sizing: border-box;
}
.svc :where(h2, h3, p, ul, li, figure) {
	margin: 0;
	padding: 0;
}

/* 导语 */
.svc__lead {
	max-width: 15rem;
	margin: 0.34rem auto 0;
	text-align: center;
	font-size: 0.18rem;
	line-height: 1.85;
	color: #66788a;
}

.svc__grid {
	margin-top: 0.56rem;
}

/* 上方两张宽图卡片 */
.svc__large {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.2rem;
}
.svc-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	border-radius: 0.14rem;
	aspect-ratio: 2.4 / 1;
	box-shadow: 0 0.06rem 0.22rem rgba(14, 42, 74, 0.18);
	background: #1d3f66;
}
.svc-hero > img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.svc-hero:hover > img {
	transform: scale(1.04);
}
.svc-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background:
		linear-gradient(180deg, rgba(10, 34, 64, 0.1) 0%, rgba(10, 34, 64, 0.42) 52%, rgba(8, 28, 54, 0.86) 100%),
		linear-gradient(90deg, rgba(18, 64, 120, 0.34) 0%, rgba(18, 64, 120, 0) 70%);
}
.svc-hero__txt {
	position: relative;
	z-index: 2;
	padding: 0.34rem 0.4rem 0.36rem;
	color: #fff;
}
.svc-hero__txt h3 {
	font-size: 0.3rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.3;
}
.svc-hero__txt p {
	max-width: 30em;
	margin-top: 0.16rem;
	font-size: 0.17rem;
	line-height: 1.85;
	color: rgba(255, 255, 255, 0.88);
}

/* 下方四张小卡片 */
.svc__small {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.2rem;
	margin-top: 0.2rem;
}
.svc-mini {
	padding: 0.4rem 0.28rem 0.42rem;
	background: #fff;
	border-radius: 0.14rem;
	box-shadow: 0 0.04rem 0.16rem rgba(20, 48, 80, 0.07);
	transition: box-shadow 0.3s, transform 0.3s;
}
.svc-mini:hover {
	transform: translateY(-4px);
	box-shadow: 0 0.12rem 0.26rem rgba(20, 48, 80, 0.13);
}
.svc-mini__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 0.62rem;
	height: 0.62rem;
	margin: 0 auto;
	border: 1px solid rgba(23, 160, 92, 0.5);
	border-radius: 50%;
	color: var(--svc-accent);
}
.svc-mini__ico img {
	display: block;
	width: 0.34rem;
	height: 0.34rem;
	object-fit: contain;
}
.svc-mini__ico svg {
	display: block;
	width: 0.3rem;
	height: 0.3rem;
}
.svc-mini h3 {
	margin-top: 0.2rem;
	text-align: center;
	font-size: 0.22rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--svc-accent-deep);
}
.svc-mini p {
	margin-top: 0.16rem;
	font-size: 0.17rem;
	line-height: 1.95;
	color: #5b6b7a;
	text-align: justify;
}

/* 平板 / 移动端 */
@media screen and (max-width: 1043px) {
	.svc {
		padding: 0.66rem 0 0.72rem;
	}
	.svc__lead {
		max-width: none;
		margin-top: 0.46rem;
		font-size: min(0.28rem, 18px);
		line-height: 1.8;
	}
	.svc__grid {
		margin-top: 0.42rem;
	}
	.svc__large {
		grid-template-columns: 1fr;
		gap: 0.24rem;
	}
	.svc-hero {
		aspect-ratio: 1.78 / 1;
		border-radius: 0.16rem;
	}
	.svc-hero__txt {
		padding: 0.32rem 0.34rem 0.34rem;
	}
	.svc-hero__txt h3 {
		font-size: min(0.42rem, 26px);
	}
	.svc-hero__txt p {
		max-width: none;
		margin-top: 0.16rem;
		font-size: min(0.28rem, 17px);
		line-height: 1.75;
	}
	.svc__small {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.24rem;
		margin-top: 0.24rem;
	}
	.svc-mini {
		padding: 0.42rem 0.3rem 0.46rem;
		border-radius: 0.16rem;
	}
	.svc-mini__ico {
		width: 0.9rem;
		height: 0.9rem;
	}
	.svc-mini__ico svg {
		width: 0.46rem;
		height: 0.46rem;
	}
	.svc-mini__ico img {
		width: 0.5rem;
		height: 0.5rem;
	}
	.svc-mini h3 {
		margin-top: 0.24rem;
		font-size: min(0.34rem, 22px);
	}
	.svc-mini p {
		margin-top: 0.16rem;
		font-size: min(0.28rem, 17px);
		line-height: 1.8;
	}
}
@media screen and (max-width: 640px) {
	.svc__small {
		grid-template-columns: 1fr;
	}
}