@charset "utf-8";
/* ============================================================================
   qz-theme.css — 设计令牌与通用组件
   依据：qz-website-delivery（React 终版原型）design.md
   加载顺序：必须位于 common.css 之后（同选择器后加载者生效）
   ========================================================================== */

:root {
	/* ── 品牌三色 ───────────────────────────────────────────── */
	--qz-navy: #38628F;              /* 品牌主色：数据数字、图标底、眉题、深蓝面板 */
	--qz-navy-light: #2b4d72;
	--qz-navy-dark: #111e2c;
	--qz-navy-darker: #080f17;
	--qz-teal: #4591A1;              /* 交互色：按钮、链接 hover、选中态 */
	--qz-teal-light: #62a8b6;
	--qz-teal-dark: #366e7b;
	--qz-mint: #498D72;              /* 辅助色：渐变终点、生态表达 */
	--qz-mint-light: #6bab92;
	--qz-mint-dark: #3d7460;

	/* ── 中性色（slate） ───────────────────────────────────── */
	--qz-slate-50: #f8fafc;
	--qz-slate-100: #f1f5f9;
	--qz-slate-200: #e2e8f0;
	--qz-slate-300: #cbd5e1;
	--qz-slate-400: #94a3b8;
	--qz-slate-500: #64748b;
	--qz-slate-600: #475569;
	--qz-slate-700: #334155;
	--qz-slate-900: #0f172a;

	/* ── 语义色 ────────────────────────────────────────────── */
	--qz-text-title: var(--qz-slate-900);
	--qz-text-body: var(--qz-slate-500);
	--qz-text-muted: var(--qz-slate-400);
	--qz-border: var(--qz-slate-100);
	--qz-border-strong: var(--qz-slate-200);

	/* ── 圆角 ──────────────────────────────────────────────── */
	--qz-radius-card: 16px;          /* rounded-2xl */
	--qz-radius-btn: 8px;            /* rounded-lg */
	--qz-radius-panel: 24px;         /* rounded-3xl */
	--qz-radius-pill: 999px;

	/* ── 阴影 ──────────────────────────────────────────────── */
	--qz-shadow-card: 0 2px 12px rgba(15, 23, 42, .04);
	--qz-shadow-hover: 0 24px 48px -16px rgba(56, 98, 143, .15);
	--qz-shadow-panel: 0 32px 64px -28px rgba(15, 23, 42, .35);

	/* ── 版式节奏 ──────────────────────────────────────────── */
	--qz-gutter: 20px;               /* px-5 */
	--qz-section-y: 64px;            /* py-16 */
	--qz-brand-gradient: linear-gradient(90deg, var(--qz-navy), var(--qz-mint));
	--qz-ease: cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 768px) {
	:root {
		--qz-gutter: 32px;           /* md:px-8 */
		--qz-section-y: 96px;        /* md:py-24 */
	}
}

/* ============================================================================
   一、基础排版
   ========================================================================== */

body {
	font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC",
		"Hiragino Sans GB", "Microsoft YaHei", sans-serif;
	color: var(--qz-text-body);
	-webkit-font-smoothing: antialiased;
}

/* 全站链接与控件过渡（对齐原型 interaction 手感） */
a, button, input, textarea, select {
	transition: color .2s ease, background-color .2s ease,
		border-color .2s ease, opacity .2s ease, box-shadow .3s ease,
		transform .3s var(--qz-ease);
}

/* ============================================================================
   二、区块与标题体系（对应原型 SectionHead）
   ========================================================================== */

.qz-section {
	position: relative;
	padding: var(--qz-section-y) 0;
}

.qz-section--white { background: #fff; }
.qz-section--gray { background: var(--qz-slate-50); }

/* 居中版区块头 */
.section-header {
	margin-bottom: 48px;
	text-align: center;
}

.qz-section-head {
	margin: 0 auto;
	max-width: 768px;
	text-align: center;
}

/* 眉题：字母间距 + 主色 + 前置圆点 */
.section-tag,
.qz-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	color: var(--qz-teal);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.section-tag::before,
.qz-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--qz-navy);
}

/* 板块大标题 */
.section-title,
.qz-section-title {
	margin: 0;
	color: var(--qz-text-title);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
}

@media (min-width: 768px) {
	.section-title,
	.qz-section-title { font-size: 34px; }
}

@media (min-width: 1024px) {
	.section-title,
	.qz-section-title { font-size: 36px; }
}

/* 副题 */
.section-desc,
.qz-section-sub {
	margin: 16px auto 0;
	max-width: 640px;
	color: var(--qz-text-body);
	font-size: 13px;
	line-height: 1.85;
}

@media (min-width: 768px) {
	.section-desc,
	.qz-section-sub { font-size: 15px; }
}

/* ============================================================================
   三、按钮
   ========================================================================== */

/* 主 CTA：品牌渐变（仅用于页面级核心动作） */
.qz-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px;
	border: 0;
	border-radius: var(--qz-radius-btn);
	background: var(--qz-brand-gradient);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	box-shadow: 0 10px 15px -3px rgba(56, 98, 143, .25);
	cursor: pointer;
}

.qz-btn-primary:hover,
.qz-btn-primary:focus {
	transform: translateY(-2px);
	color: #fff;
	box-shadow: 0 20px 25px -5px rgba(56, 98, 143, .3);
}

/* 次按钮：白底描边，hover 转交互色 */
.qz-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px;
	border: 1px solid var(--qz-border-strong);
	border-radius: var(--qz-radius-btn);
	background: #fff;
	color: var(--qz-slate-700);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
	cursor: pointer;
}

.qz-btn-ghost:hover,
.qz-btn-ghost:focus {
	transform: translateY(-2px);
	border-color: rgba(69, 145, 161, .4);
	color: var(--qz-teal);
}

/* 文字链按钮 */
.qz-btn-text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--qz-slate-700);
	font-size: 14px;
	font-weight: 500;
}

.qz-btn-text:hover { color: var(--qz-teal); }
.qz-btn-text .fa { transition: transform .3s var(--qz-ease); }
.qz-btn-text:hover .fa { transform: translateX(4px); }

/* 实心按钮内的箭头同样右移 */
.qz-btn-primary .fa,
.qz-btn-ghost .fa { transition: transform .3s var(--qz-ease); }

.qz-btn-primary:hover .fa,
.qz-btn-ghost:hover .fa { transform: translateX(4px); }

/* ============================================================================
   四、卡片
   ========================================================================== */

.qz-card {
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius-card);
	background: #fff;
	box-shadow: var(--qz-shadow-card);
	transition: transform .3s var(--qz-ease), box-shadow .3s ease,
		border-color .3s ease;
}

.qz-card:hover {
	transform: translateY(-4px);
	border-color: rgba(56, 98, 143, .15);
	box-shadow: var(--qz-shadow-hover);
}

/* 图标底：主色 6% 透明 */
.qz-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(56, 98, 143, .06);
	color: var(--qz-navy);
	font-size: 18px;
}

/* 胶囊标签 */
.qz-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: var(--qz-radius-pill);
	background: rgba(56, 98, 143, .06);
	color: var(--qz-navy);
	font-size: 12px;
	font-weight: 500;
}

/* ============================================================================
   五、深蓝面板（深色重心区块）
   ========================================================================== */

.qz-dark-panel {
	position: relative;
	overflow: hidden;
	border-radius: var(--qz-radius-panel);
	background: var(--qz-navy-darker);
	color: #fff;
}

/* 蓝图网格纹理 */
.qz-dark-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px);
	background-size: 8.3333% 100%;
	pointer-events: none;
}

.qz-dark-panel > * { position: relative; }

/* ============================================================================
   六、通用工具类
   ========================================================================== */

.qz-container {
	margin: 0 auto;
	max-width: 1152px;
	padding-left: var(--qz-gutter);
	padding-right: var(--qz-gutter);
}

/* 覆盖 Bootstrap 默认 container 宽度，向原型 1152px 靠拢 */
.container { max-width: 1200px; }

@media (max-width: 767px) {
	.container { padding-left: var(--qz-gutter); padding-right: var(--qz-gutter); }
}

/* ============================================================================
   七、内页顶部横幅 PageBanner（内页共用）
   ========================================================================== */

.qz-page-banner {
	position: relative;
	overflow: hidden;
	padding: 96px 0 32px;
	background: linear-gradient(180deg, #EEF4FD 0%, #F2F7FD 38%, #F8FBFE 72%, #FFFFFF 100%);
}

@media (min-width: 768px) {
	.qz-page-banner { padding: 90px 0 48px; }
}

/* 柔和光斑 */
.qz-page-banner-glow {
	position: absolute;
	left: 50%;
	top: -64px;
	width: 560px;
	height: 220px;
	margin-left: -280px;
	border-radius: 50%;
	background: rgba(56, 98, 143, .06);
	filter: blur(64px);
	pointer-events: none;
}

@media (min-width: 768px) {
	.qz-page-banner-glow {
		top: -96px;
		width: 720px;
		height: 360px;
		margin-left: -360px;
	}
}

.qz-page-banner-inner { position: relative; z-index: 10; }

/* 面包屑 */
.qz-breadcrumb {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	color: var(--qz-slate-400);
	font-size: 12px;
}

.qz-breadcrumb a { color: var(--qz-slate-400); }
.qz-breadcrumb a:hover { color: var(--qz-teal); }
.qz-breadcrumb .fa { color: var(--qz-slate-300); font-size: 11px; }
.qz-breadcrumb span { color: var(--qz-slate-600); }

/* 居中文案区 */
.qz-page-banner-body { margin-top: 24px; text-align: center; }

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

.qz-page-banner-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--qz-navy);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.qz-page-banner-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--qz-navy);
}

.qz-page-banner-title {
	margin: 12px auto 0;
	max-width: 768px;
	color: var(--qz-slate-900);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
}

@media (min-width: 768px) {
	.qz-page-banner-title { margin-top: 16px; font-size: 44px; line-height: 1.15; }
}

.qz-page-banner-sub {
	margin: 12px auto 0;
	max-width: 576px;
	color: var(--qz-slate-500);
	font-size: 13px;
	line-height: 24px;
}

@media (min-width: 768px) {
	.qz-page-banner-sub { margin-top: 20px; font-size: 15px; }
}

.qz-page-banner-extra { margin-top: 32px; }

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

/* ============================================================================
   八、通用栅格（对应原型的 SwipeDeck / grid）
   ========================================================================== */

.qz-grid { display: grid; gap: 20px; }

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

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

/* 证书类：小屏 2 列、平板 3 列、桌面 5 列 */
.qz-grid--certs { grid-template-columns: repeat(2, 1fr); gap: 16px; }

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

/* 分隔线数据行 */
.qz-divide-row {
	display: grid;
	border-radius: var(--qz-radius-card);
	border: 1px solid var(--qz-slate-100);
	background: rgba(248, 250, 252, .6);
}

/* 数据总览区：紧贴横幅下方（对应原型 bg-white pb-4 pt-2 md:pb-6） */
.qz-stats-section {
	padding: 8px 0 16px;
	background: #fff;
}

@media (min-width: 768px) {
	.qz-stats-section { padding-bottom: 24px; }
}

/* 左对齐版板块标题（对应原型不传 center 的 SectionHead） */
.qz-section-head--left {
	margin: 0;
	max-width: none;
	text-align: left;
}

/* 左对齐版标题字号：原型 SectionHead(不居中) 标题 text-[20px] md:text-3xl */
.qz-section-head--left .section-title {
	font-size: 20px;
	line-height: 1.35;
}

@media (min-width: 768px) {
	.qz-section-head--left .section-title { font-size: 30px; }
}

/* 面板内居中标题容器 */
.qz-panel-head {
	margin: 0 auto;
	max-width: 672px;
	text-align: center;
}

/* 关于类区块的正文段落（各内页通用） */
.qz-about-p {
	margin: 20px 0 0;
	color: var(--qz-slate-500);
	font-size: 14px;
	line-height: 28px;
}

.qz-about-p + .qz-about-p { margin-top: 12px; }

/* 文字截断 */
.qz-clamp-1,
.qz-clamp-2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.qz-clamp-1 { -webkit-line-clamp: 1; }
.qz-clamp-2 { -webkit-line-clamp: 2; }

/* ============================================================================
   九、滚动入场动画（对应原型 framer-motion：下到上 24px + 淡入 + stagger 延迟）
   ========================================================================== */

.qz-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s var(--qz-ease), transform .6s var(--qz-ease);
	will-change: opacity, transform;
}

.qz-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* 尊重系统「减少动效」偏好 */
@media (prefers-reduced-motion: reduce) {
	.qz-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}