@charset "utf-8";
/* ============================================================================
   qz-platform.css — 全咨数字化平台页
   依据：qz-website-delivery 的 PlatformPage.jsx
   加载顺序：common.css → qz-theme.css → qz-layout.css → 本文件
   ========================================================================== */

/* ============================================================================
   平台展示大图（横幅底部通栏图，原型 platform-showcase）
   ========================================================================== */

.qz-page-banner-showcase {
	margin-top: 32px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: var(--qz-radius-card);
	background: var(--qz-slate-100);
	box-shadow: 0 32px 72px -30px rgba(56, 98, 143, .42);
}

@media (min-width: 768px) {
	.qz-page-banner-showcase { margin-top: 40px; }
}

.qz-page-banner-showcase img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

@media (min-width: 768px) {
	.qz-page-banner-showcase img { aspect-ratio: 21 / 10; }
}

/* ============================================================================
   平台概述（白底文本卡）
   ========================================================================== */

.qz-overview {
	padding: var(--qz-section-y) 0;
	background: #fff;
}

.qz-overview-grid { margin-top: 48px; }

.qz-overview-card {
	position: relative;
	height: 100%;
	padding: 32px 28px;
	border: 1px solid var(--qz-slate-100);
	border-radius: var(--qz-radius-card);
	background: linear-gradient(to bottom, #fff, #F8FAFF);
	box-shadow: var(--qz-shadow-card);
}

.qz-overview-card:hover {
	transform: translateY(-4px);
	border-color: rgba(69, 145, 161, .2);
	box-shadow: var(--qz-shadow-hover);
}

.qz-overview-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--qz-radius-btn);
	background: rgba(56, 98, 143, .06);
	color: var(--qz-navy);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 14px;
	font-weight: 700;
}

.qz-overview-text {
	margin: 16px 0 0;
	color: var(--qz-slate-800, #1e293b);
	font-size: 15px;
	font-weight: 600;
	line-height: 26px;
}

/* ============================================================================
   核心功能（图片 + 图标徽章 + code 胶囊 + 列表）
   ========================================================================== */

.qz-features {
	padding: var(--qz-section-y) 0;
	background: var(--qz-slate-50);
}

.qz-pf-grid {
	display: grid;
	gap: 20px;
	margin-top: 48px;
}

@media (min-width: 768px) {
	.qz-pf-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.qz-pf-grid { grid-template-columns: repeat(4, 1fr); }
}

.qz-pf-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--qz-slate-100);
	border-radius: var(--qz-radius-card);
	background: #fff;
	box-shadow: var(--qz-shadow-card);
}

.qz-pf-card:hover {
	transform: translateY(-4px);
	border-color: rgba(69, 145, 161, .2);
	box-shadow: var(--qz-shadow-hover);
}

.qz-pf-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--qz-slate-100);
}

.qz-pf-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s ease;
}

.qz-pf-card:hover .qz-pf-media img { transform: scale(1.04); }

/* 图上渐变，保证徽章可读 */
.qz-pf-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(2, 6, 23, .4) 0%, transparent 55%, rgba(255, 255, 255, .05) 100%);
}

/* 左下图标徽章 */
.qz-pf-icon {
	position: absolute;
	left: 20px;
	bottom: 16px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 12px;
	background: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: var(--qz-navy);
	font-size: 18px;
}

.qz-pf-card:hover .qz-pf-icon {
	border-color: var(--qz-teal);
	background: var(--qz-teal);
	color: #fff;
}

/* 右上 code 胶囊 */
.qz-pf-code {
	position: absolute;
	right: 16px;
	top: 16px;
	z-index: 1;
	padding: 4px 10px;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: var(--qz-radius-pill);
	background: rgba(255, 255, 255, .85);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: var(--qz-navy);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	font-weight: 600;
}

.qz-pf-body { padding: 24px; }

.qz-pf-name {
	margin: 0;
	color: var(--qz-slate-900);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

.qz-pf-list {
	margin: 14px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--qz-slate-100);
	list-style: none;
}

.qz-pf-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 10px;
	color: var(--qz-slate-500);
	font-size: 12px;
	line-height: 20px;
}

.qz-pf-list li:last-child { margin-bottom: 0; }

.qz-pf-list li::before {
	content: "";
	flex-shrink: 0;
	width: 4px;
	height: 4px;
	margin-top: 8px;
	border-radius: 50%;
	background: var(--qz-navy);
}

/* ============================================================================
   业务模式（文本卡）
   ========================================================================== */

.qz-model {
	padding: var(--qz-section-y) 0;
	background: #fff;
}

.qz-model-grid {
	display: grid;
	gap: 20px;
	margin-top: 48px;
}

@media (min-width: 1024px) {
	.qz-model-grid { grid-template-columns: repeat(3, 1fr); }
}

.qz-model-card {
	height: 100%;
	padding: 32px;
	border: 1px solid var(--qz-slate-100);
	border-radius: var(--qz-radius-card);
	background: #fff;
	box-shadow: var(--qz-shadow-card);
}

.qz-model-card:hover {
	transform: translateY(-4px);
	border-color: rgba(69, 145, 161, .2);
	box-shadow: var(--qz-shadow-hover);
}

.qz-model-name {
	margin: 0;
	color: var(--qz-slate-900);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}

.qz-model-desc {
	margin: 6px 0 0;
	color: var(--qz-navy);
	font-size: 12px;
	line-height: 20px;
}

.qz-model-list {
	margin: 20px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--qz-slate-100);
	list-style: none;
}

.qz-model-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
	color: var(--qz-slate-600);
	font-size: 13px;
	line-height: 24px;
}

.qz-model-list li:last-child { margin-bottom: 0; }

.qz-model-list li::before {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	margin-top: 9px;
	border-radius: 50%;
	background: var(--qz-navy);
}