/* =========================================================================
   PLC / 工业自动化工程服务站 —— 板块样式
   =========================================================================

   只在这一个文件里追加，不改主题原来那份 style.css。
   出问题时把 inc/plc.php 里的入队去掉，站点就退回原样式。

   配色思路：底子沿用主题的深色常态，但把原来偏暖的灰（#3e3a39）整组
   换成偏冷的钢灰，再补一个专供深底使用的亮蓝 --dq-accent。
   主强调色 --dq-primary 仍由「主题设置 → 全局配色」控制，这里不覆盖，
   否则客户在后台改颜色会失效。
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. 新增令牌
   ------------------------------------------------------------------------- */
:root {
	/* 深底上用的亮蓝。--dq-primary 要保证白字按钮的对比度，压得比较深，
	   直接拿到深色底上做小字和图标会发闷，所以另起一个。 */
	--dq-accent: #0e6fbe;
	--dq-accent-soft: rgba(14, 111, 190, 0.10);
	--dq-accent-line: rgba(14, 111, 190, 0.28);

	--dq-steel: #f2f5f8;
	--dq-card: #ffffff;
	--dq-card-line: rgba(15, 32, 48, 0.12);

	--dq-sec-pad: clamp(56px, 6.2vw, 104px);
	--dq-gap: clamp(16px, 1.7vw, 28px);
}

:root[data-theme="dark"] {
	/* 冷调钢灰，替换主题默认的暖灰 */
	--dq-bg: #10161d;
	--dq-bg-alt: #161f29;
	--dq-bg-dark: #0b1016;
	--dq-bg-darker: #080c11;

	--dq-ink: #eaf1f8;
	--dq-ink-2: rgba(228, 238, 248, 0.62);
	--dq-muted: rgba(228, 238, 248, 0.44);
	--dq-line: rgba(150, 185, 220, 0.16);
	--dq-line-soft: rgba(150, 185, 220, 0.09);

	--dq-accent: #52a8f0;
	--dq-accent-soft: rgba(82, 168, 240, 0.12);
	--dq-accent-line: rgba(82, 168, 240, 0.34);

	--dq-steel: #161f29;
	--dq-card: #18222d;
	--dq-card-line: rgba(150, 185, 220, 0.16);

	--dq-bright: #0b1016;
}

/* 深色下页脚跟着换成冷调，否则会和上面的板块脱节 */
:root[data-theme="dark"] .dq-footer {
	background: #0d131a;
}

:root[data-theme="dark"] .dq-footer__bottom {
	background: #080c11;
}

:root[data-theme="dark"] .dq-globe-section {
	background: linear-gradient(180deg, #10161d 0%, #0d131a 100%);
}

/* -------------------------------------------------------------------------
   2. 通用件
   ------------------------------------------------------------------------- */

/* 板块底色：--alt 用比正文底稍亮/稍暗一档的钢灰做隔断 */
.dq-section--alt {
	background: var(--dq-steel);
}

.dq-section__more {
	margin-top: clamp(28px, 3vw, 48px);
	text-align: center;
}

/* 入场动画的错落延迟：模板不用逐个写 --d1 --d2 */
.dq-reveal-group > *:nth-child(1) { transition-delay: 0.04s; }
.dq-reveal-group > *:nth-child(2) { transition-delay: 0.10s; }
.dq-reveal-group > *:nth-child(3) { transition-delay: 0.16s; }
.dq-reveal-group > *:nth-child(4) { transition-delay: 0.22s; }
.dq-reveal-group > *:nth-child(5) { transition-delay: 0.28s; }
.dq-reveal-group > *:nth-child(6) { transition-delay: 0.34s; }
.dq-reveal-group > *:nth-child(n + 7) { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
	.dq-reveal-group > * { transition-delay: 0s !important; }
}

/* 勾选清单 —— 能力模块、详情页侧栏、案例页共用 */
.dq-ticklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.dq-ticklist li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--dq-fs-base);
	line-height: 1.45;
	color: var(--dq-ink-2);
}

.dq-ticklist svg {
	flex: 0 0 auto;
	margin-top: 0.28em;
	color: var(--dq-accent);
	stroke-width: 2.4;
}

/* 标签条 —— 案例卡的工作内容、平台卡的型号 */
.dq-taglist {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.dq-taglist li {
	font-size: max(11px, 0.72em);
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 6px 9px;
	color: var(--dq-ink-2);
	border: 1px solid var(--dq-line);
	background: var(--dq-accent-soft);
}

/* 内页横幅：主题给的 min-height 是 36.72vw，那是按「有大背景图」排的。
   栏目列表页和没设特色图的页面拿不到背景图，就剩一大片空的深色块。
   主题只有在真有图时才会输出 style="background-image:…"，
   所以用 :not([style]) 精确命中「没图」这一类，把高度收回来。 */
.dq-page-hero:not([style]) {
	min-height: 0;
	padding-bottom: clamp(34px, 3.2vw, 58px);
}

/* 内页横幅的压暗层。
   主题原本是一整层 58% 的均匀深色，对着偏暗的底图够用；
   本站几张行业照片明度高，白色标题压上去发虚。改成左深右浅的渐变：
   文字所在的左侧压得更实，右侧仍然看得清照片内容。
   只作用于「真有底图」的横幅（主题只在有图时才输出 inline style）。 */
.dq-page-hero[style]::before {
	background: linear-gradient(
		90deg,
		rgba(8, 16, 24, 0.88) 0%,
		rgba(8, 16, 24, 0.72) 42%,
		rgba(8, 16, 24, 0.45) 100%
	);
}

/* 内页横幅上的眉标 */
.dq-page-hero__eyebrow {
	display: block;
	margin-bottom: 10px;
	font-size: max(12px, 0.78em);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dq-accent);
}

/* -------------------------------------------------------------------------
   3. 页头：容纳 8 个主菜单 + 右上角按钮
   -------------------------------------------------------------------------
   原主题的页头是按 5 个主菜单排的。本站按架构文档要有 8 个
   （HOME / SERVICES / PLC & AUTOMATION / INDUSTRIES / PROJECTS /
   INSIGHTS / ABOUT / CONTACT），再加一个 REQUEST A QUOTE 按钮，
   1440px 下会把右侧工具区挤出容器，整页出现横向滚动条。
   这里把页头容器放宽、菜单间距收紧，让它在常见宽度下都排得下。
   ------------------------------------------------------------------------- */
.dq-header .dq-container--wide {
	width: 94%;
	max-width: 1760px;
}

.dq-header__nav {
	/* 原来是 3vw，导航项多了之后这段留白挤掉了右侧按钮 */
	padding-right: 1vw;
	min-width: 0;
}

.dq-header .dq-menu > li > a {
	padding: 1.42vw 0.78vw;
	font-size: clamp(12px, 0.84vw, 15px);
}

.dq-header__tools {
	gap: 14px;
	flex-shrink: 0;
}

/* 二级菜单。原主题这里有两套写法：第 2 项是「图标宫格」高抽屉（老站的
   产品与解决方案），其余是固定 41px 的单行条。本站八个下拉全是纯文字，
   而且 SERVICES 有 8 个较长的条目，单行放不下（实测溢出约 370px）。
   统一改成：等高单行为主，放不下时自动换行，高度跟着内容走。 */
.dq-header .dq-menu > li > .sub-menu,
.dq-header .dq-menu > li:nth-child(2) > .sub-menu {
	align-items: center;
	flex-wrap: wrap;
	height: auto;
	min-height: clamp(41px, 2.82vw, 48px);
	max-height: none;
	/* 原来左右各留 16.667vw，8 项的下拉直接被挤爆，收到 5vw */
	padding: 4px 5vw;
}

.dq-header .dq-menu > li > .sub-menu > li,
.dq-header .dq-menu > li:nth-child(2) > .sub-menu > li {
	flex: 0 0 auto;
	height: auto;
}

.dq-header .dq-menu > li > .sub-menu > li > a,
.dq-header .dq-menu > li:nth-child(2) > .sub-menu > li > a {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0;
	height: auto;
	padding: 8px 1vw;
	font-size: clamp(11px, 0.82vw, 14px);
	line-height: 1.4;
	white-space: nowrap;
}

/* 下拉里的文字用次级色，当前项才高亮 —— 与一级菜单保持一致 */
.dq-header .dq-menu .sub-menu .current-menu-item > a,
.dq-header .dq-menu .sub-menu .current_page_item > a {
	color: var(--dq-primary);
}

/* 兜底：任何情况下页面都不该出现横向滚动条 */
html,
body {
	overflow-x: clip;
}

/* -------------------------------------------------------------------------
   3.1 页头右上角按钮
   ------------------------------------------------------------------------- */
.dq-header__cta {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 0.62em 1.15em;
	margin-right: 4px;
	font-size: max(12px, 0.82em);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: var(--dq-primary);
	border: 1px solid var(--dq-primary);
	transition: background 0.25s var(--dq-ease), border-color 0.25s var(--dq-ease);
}

.dq-header__cta:hover,
.dq-header__cta:focus-visible {
	background: var(--dq-primary-2);
	border-color: var(--dq-primary-2);
	color: #fff;
}

/* 页头叠在深色横幅上时，实心按钮会糊成一块，改成描边 */
.dq-has-hero .dq-header--sticky:not(.is-stuck) .dq-header__cta,
.home .dq-header--sticky:not(.is-stuck) .dq-header__cta {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

.dq-has-hero .dq-header--sticky:not(.is-stuck) .dq-header__cta:hover,
.home .dq-header--sticky:not(.is-stuck) .dq-header__cta:hover {
	background: #fff;
	border-color: #fff;
	color: var(--dq-primary);
}

/* 首页页头压在深色首屏上，文字必须转白。
   主题只给 .dq-has-hero（内页）写了这组规则，首页那一套是跟着老首屏
   模板走的，换成新的 .dq-phero 之后就断了 —— 深色模式下因为 --dq-ink
   本来就是近白色看不出问题，一切到浅色模式就变成深字压深图，读不了。
   这里把同一组规则补给首页。 */
.home .dq-header--sticky:not(.is-stuck) .dq-header__logo-text,
.home .dq-header--sticky:not(.is-stuck) .dq-header__logo-mark,
.home .dq-header--sticky:not(.is-stuck) .dq-header__tagline,
.home .dq-header--sticky:not(.is-stuck) .dq-menu > li > a,
.home .dq-header--sticky:not(.is-stuck) .dq-icon-btn,
.home .dq-header--sticky:not(.is-stuck) .dq-header__lang {
	color: #fff;
	fill: #fff;
}

.home .dq-header--sticky:not(.is-stuck) .dq-burger span {
	background: #fff;
}

@media (max-width: 900px) {
	.dq-header__cta {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   3.1 产业条（首页横幅下方那一排图标）
   -------------------------------------------------------------------------
   这一排是 grid + 1fr 等分列。主题给说明文字写了 white-space:nowrap，
   原站那几条说明只有三四个字所以没事；本站的说明来自商品分类描述，
   是完整句子，nowrap 会把 1fr 的最小内容宽撑到 500px 以上，
   四列加起来 2000+px，整条直接冲出容器。
   1fr 实际是 minmax(auto,1fr)，得显式允许收缩才压得住。
   ------------------------------------------------------------------------- */
.dq-lineup__item,
.dq-lineup__labels,
.dq-lineup__title {
	min-width: 0;
	max-width: 100%;
}

.dq-lineup__desc {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* -------------------------------------------------------------------------
   3.03 地球上的城市标签
   -------------------------------------------------------------------------
   连线终点的城市名，用真正的 <a> 浮在画布上，由 globe.js 每帧投影定位。
   球背面的点会被隐藏，所以只在 is-visible 时才显示。
   ------------------------------------------------------------------------- */
.dq-globe__labels {
	position: absolute;
	inset: 0;
	z-index: 3;
	/* 标签层本身不吃事件，只有标签自己吃，免得挡住地球的拖拽 */
	pointer-events: none;
}

.dq-globe__label {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	font-size: max(11px, 0.72vw);
	line-height: 1.3;
	white-space: nowrap;
	color: #fff;
	background: rgba(8, 16, 24, 0.72);
	border: 1px solid var(--dq-accent-line);
	border-radius: 2px;
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s var(--dq-ease), background 0.2s var(--dq-ease), border-color 0.2s var(--dq-ease);
}

.dq-globe__label.is-visible {
	opacity: 1;
	visibility: visible;
}

/* 只有配了链接的标签才可点，并给一个小箭头提示 */
.dq-globe__label--link {
	pointer-events: auto;
	cursor: pointer;
}

.dq-globe__label--link::after {
	content: "→";
	font-size: 0.9em;
	color: var(--dq-accent);
	transition: transform 0.2s var(--dq-ease);
}

.dq-globe__label--link:hover,
.dq-globe__label--link:focus-visible {
	color: #fff;
	background: var(--dq-primary);
	border-color: var(--dq-primary);
}

.dq-globe__label--link:hover::after {
	color: #fff;
	transform: translateX(2px);
}

@media (max-width: 760px) {
	/* 小屏地球本身就小，标签叠上去会糊成一团 */
	.dq-globe__labels {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   3.05 内页左侧悬浮目录
   -------------------------------------------------------------------------
   主题把它写成常驻的 position:fixed，页面一打开就压在横幅左上角，
   既挡住横幅画面又跟大标题撞在一起。配合 theme.js 里新加的 is-visible，
   改成滚过横幅之后才淡入。
   另外原宽度 10.25vw（1440 下约 148px）装不下「Step 01 — Project
   discussion」这类标题，全被省略号截断，这里放宽一档。
   ------------------------------------------------------------------------- */
.dq-anchor {
	width: clamp(158px, 13vw, 232px);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-8px);
	transition: opacity 0.3s var(--dq-ease), transform 0.3s var(--dq-ease), visibility 0.3s;
}

.dq-anchor.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* 标题太长时换行显示，不再一刀切成省略号 */
.dq-anchor__item a {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	line-height: 1.45;
	padding-top: 0.42em;
	padding-bottom: 0.42em;
	font-size: max(12px, 0.82vw);
}

@media (prefers-reduced-motion: reduce) {
	.dq-anchor {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   3.11 服务轮播左侧的控制柱（上一个 / 下一个 + 计数）
   -------------------------------------------------------------------------
   原样式里这两个箭头只有 11×11px、没有边框也没有底色，孤零零飘在
   左侧空栏中间，既看不出是按钮，也远低于可点区域的合理尺寸；
   箭头行和下面的计数条宽度还对不齐，看着散。

   这里把它们收成一组控件：
   · 箭头做成 40px 见方的描边按钮，鼠标移上去填主题色 —— 一眼是按钮
   · 箭头行与计数条同宽同左缘，进度条横贯整栏，把这一组「压」在底部
   · 颜色改用 --dq-ink 令牌而不是写死白色，浅色模式下才不会白字白底
   ------------------------------------------------------------------------- */
.dq-products__aside {
	color: var(--dq-ink);
}

.dq-products__arrows {
	gap: 10px;
	margin-bottom: 18px;
}

.dq-products__arrows button {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	color: var(--dq-ink);
	border: 1px solid var(--dq-line);
	background: transparent;
}

/* 原来靠 margin-left 拉开间距，这里统一交给 gap */
.dq-products__arrows button + button {
	margin-left: 0;
}

.dq-products__arrows svg {
	width: 16px;
	height: 16px;
}

.dq-products__arrows button:hover,
.dq-products__arrows button:focus-visible {
	color: #fff;
	background: var(--dq-primary);
	border-color: var(--dq-primary);
}

/* 计数与进度条撑满整栏，和上面的箭头组左右对齐 */
.dq-products__pager {
	width: 100%;
	margin-top: 0;
}

/* 大号页码和进度条原本写死白色 —— 深色模式下看不出问题，
   一切到浅色模式就是白底白字、白条白轨，整组直接消失。
   页码交给 --dq-ink，进度条用主题色，两种模式下都成立。 */
.dq-products__current {
	color: var(--dq-ink);
}

.dq-products__progress-fill {
	background: var(--dq-primary);
}

/* -------------------------------------------------------------------------
   3.12 右侧「Talk to an Engineer」悬浮条的窄屏适配
   -------------------------------------------------------------------------
   主题在窄屏下把这个条的文字藏起来，只留左端那张圆形头像当抓手。
   本站没有用那张头像（原是一张真人照片素材），结果窄屏下文字没了、
   头像也没有，只剩一个 16px 宽的空蓝块贴在屏幕右缘，既看不懂也难点。
   窄屏下把文字放回来，让它仍然是一个能读能点的按钮。
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.dq-contact-tab span {
		display: inline;
	}

	.dq-contact-tab {
		padding: 0 12px;
		font-size: 12px;
		letter-spacing: 0.02em;
	}
}

/* -------------------------------------------------------------------------
   3.15 「How We Deliver」板块的窄屏适配
   -------------------------------------------------------------------------
   这是主题原有的左文右图双栏：文字栏 min-width:260px、图片栏固定 48.9%，
   两者相加在 414px 屏上超过容器约 70px，配合 space-between 会把图片整块
   推出屏幕右侧。主题没给这一块写窄屏断点（原站大概没在手机上配过图）。
   窄屏改成上下堆叠。
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.dq-green {
		flex-direction: column;
		gap: clamp(20px, 4vw, 34px);
	}

	.dq-green__article,
	.dq-green__picture {
		width: 100%;
		min-width: 0;
	}
}

/* -------------------------------------------------------------------------
   3.2 首页横幅
   -------------------------------------------------------------------------
   横幅是「上半截纯色写字 + 下半截视频」拼起来的。参照站（wp-diqiu）的
   纯色块是 #3e3a39，和视频里几何块的灰度接近，两截看着是一体的。
   本站深色令牌换成了冷调近黑 #10161d，直接拼上去会在视频上沿留一道
   很硬的接缝。这里给横幅单独加一条竖向渐变，到视频上沿时收到与视频
   相近的明度，接缝就没了 —— 只动横幅，不改全站令牌。
   ------------------------------------------------------------------------- */
.dq-hero {
	background: linear-gradient(
		180deg,
		var(--dq-bg) 0%,
		#1a222b 26%,
		#2b333d 47%,
		#2b333d 100%
	);
}

/* -------------------------------------------------------------------------
   4. ① 首屏（架构文档新增的独立首屏板块，默认关闭）
   ------------------------------------------------------------------------- */
.dq-phero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(520px, 42vw, 760px);
	padding: calc(var(--dq-header-h) + clamp(70px, 7vw, 130px)) 0 clamp(48px, 5vw, 88px);
	background-color: #0b1016;
	background-size: cover;
	background-position: center;
	color: #fff;
	overflow: hidden;
}

/* 图上压一层由左至右变淡的深色，保证左边的字任何底图上都读得清 */
.dq-phero__veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(8, 13, 19, 0.94) 0%, rgba(8, 13, 19, 0.82) 42%, rgba(8, 13, 19, 0.34) 100%),
		linear-gradient(0deg, rgba(8, 13, 19, 0.7) 0%, rgba(8, 13, 19, 0) 45%);
}

.dq-phero--flat {
	background-image: linear-gradient(120deg, #0b1016 0%, #14202c 55%, #0d1620 100%);
}

.dq-phero__inner {
	position: relative;
	z-index: 1;
	max-width: 1440px;
}

.dq-phero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: clamp(14px, 1.4vw, 22px);
	font-size: max(12px, 0.8em);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dq-accent);
}

.dq-phero__eyebrow::before {
	content: "";
	width: clamp(28px, 3vw, 52px);
	height: 1px;
	background: var(--dq-accent);
}

.dq-phero__title {
	max-width: 20ch;
	margin: 0;
	font-family: var(--dq-font-heading);
	font-size: clamp(30px, 3.55vw, 60px);
	font-weight: 700;
	line-height: 1.13;
	letter-spacing: -0.01em;
	color: #fff;
}

.dq-phero__desc {
	max-width: 62ch;
	margin: clamp(18px, 1.8vw, 30px) 0 0;
	font-size: clamp(15px, 1.12vw, 20px);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.76);
}

.dq-phero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: clamp(26px, 2.6vw, 42px);
}

/* 首屏是深底，描边按钮要用白线而不是主题色线 */
.dq-phero__actions .dq-btn--outline {
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

.dq-phero__actions .dq-btn--outline:hover {
	background: #fff;
	border-color: #fff;
	color: var(--dq-primary);
}

.dq-phero__facts {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: clamp(14px, 1.6vw, 30px);
	max-width: 900px;
	margin: clamp(40px, 4.4vw, 76px) 0 0;
	padding: clamp(20px, 2vw, 30px) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.dq-phero__fact-title {
	display: block;
	font-size: max(14px, 0.96em);
	font-weight: 600;
	color: #fff;
}

.dq-phero__fact-desc {
	display: block;
	margin-top: 5px;
	font-size: max(12px, 0.82em);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
}

/* -------------------------------------------------------------------------
   5. ② 能力模块
   ------------------------------------------------------------------------- */
.dq-pcap__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--dq-gap);
}

.dq-pcap__card {
	display: flex;
	flex-direction: column;
	background: var(--dq-card);
	border: 1px solid var(--dq-card-line);
	transition: transform 0.3s var(--dq-ease), border-color 0.3s var(--dq-ease), box-shadow 0.3s var(--dq-ease);
}

.dq-pcap__card:hover {
	transform: translateY(-4px);
	border-color: var(--dq-accent-line);
	box-shadow: var(--dq-shadow);
}

.dq-pcap__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--dq-bg-alt);
}

.dq-pcap__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--dq-ease);
}

.dq-pcap__card:hover .dq-pcap__media img {
	transform: scale(1.05);
}

.dq-pcap__num {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 6px 12px;
	font-family: var(--dq-font-num);
	font-size: max(13px, 0.9em);
	letter-spacing: 0.08em;
	color: #fff;
	background: var(--dq-primary);
}

.dq-pcap__body {
	flex: 1;
	padding: clamp(18px, 1.6vw, 26px);
}

.dq-pcap__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: var(--dq-fs-title-2);
	font-weight: 600;
	line-height: 1.3;
	color: var(--dq-ink);
}

.dq-pcap__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--dq-accent);
}

@media (max-width: 1080px) {
	.dq-pcap__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.dq-pcap__grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   6. ③ PLC 平台
   ------------------------------------------------------------------------- */
.dq-pplat__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--dq-gap);
}

.dq-pplat__card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(22px, 2.2vw, 34px);
	text-decoration: none;
	background: var(--dq-card);
	border: 1px solid var(--dq-card-line);
	transition: transform 0.3s var(--dq-ease), border-color 0.3s var(--dq-ease), background 0.3s var(--dq-ease);
}

.dq-pplat__card:hover {
	transform: translateY(-4px);
	border-color: var(--dq-accent-line);
}

.dq-pplat__mark {
	display: flex;
	align-items: center;
	min-height: 44px;
}

.dq-pplat__mark img {
	max-width: 160px;
	max-height: 44px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* 没有官方 Logo 时用文字标：品牌名以文字方式出现，不涉及商标图形 */
.dq-pplat__wordmark {
	font-family: var(--dq-font-heading);
	font-size: clamp(19px, 1.5vw, 27px);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--dq-ink);
}

.dq-pplat__series {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.dq-pplat__series span {
	font-size: max(11px, 0.74em);
	line-height: 1;
	padding: 6px 9px;
	color: var(--dq-ink-2);
	border: 1px solid var(--dq-line);
}

.dq-pplat__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 6px;
	font-size: max(12px, 0.82em);
	letter-spacing: 0.04em;
	color: var(--dq-accent);
}

.dq-pplat__card:hover .dq-pplat__more svg {
	transform: translateX(4px);
}

.dq-pplat__more svg {
	transition: transform 0.25s var(--dq-ease);
}

@media (max-width: 900px) {
	.dq-pplat__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {
	.dq-pplat__grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   7. ④ 行业
   ------------------------------------------------------------------------- */
.dq-pind__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--dq-gap);
}

.dq-pind__card {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	background: var(--dq-bg-dark);
	border: 1px solid var(--dq-card-line);
}

.dq-pind__media {
	display: block;
	aspect-ratio: 5 / 4;
}

.dq-pind__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.55s var(--dq-ease);
}

.dq-pind__card:hover .dq-pind__media img {
	transform: scale(1.06);
}

/* 文字压在图上，底部加一层渐变保证可读 */
.dq-pind__body {
	position: absolute;
	inset: auto 0 0 0;
	display: block;
	padding: clamp(14px, 1.3vw, 22px);
	background: linear-gradient(0deg, rgba(8, 13, 19, 0.94) 12%, rgba(8, 13, 19, 0.6) 62%, rgba(8, 13, 19, 0) 100%);
}

.dq-pind__title {
	display: block;
	font-size: var(--dq-fs-card);
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}

.dq-pind__desc {
	display: block;
	margin-top: 6px;
	font-size: max(11px, 0.76em);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.62);

	/* 收起说明文字，鼠标移上去再展开，卡片高度才整齐 */
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.35s var(--dq-ease), opacity 0.3s var(--dq-ease), margin-top 0.35s var(--dq-ease);
}

.dq-pind__card:hover .dq-pind__desc,
.dq-pind__card:focus-visible .dq-pind__desc {
	max-height: 6em;
	opacity: 1;
}

@media (hover: none) {
	/* 触屏没有 hover，直接展开 */
	.dq-pind__desc {
		max-height: 6em;
		opacity: 1;
	}
}

@media (max-width: 1080px) {
	.dq-pind__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 760px) {
	.dq-pind__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* -------------------------------------------------------------------------
   8. ⑤ 为什么选择我们
   ------------------------------------------------------------------------- */
.dq-pwhy__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--dq-line);
	border: 1px solid var(--dq-line);
}

/* 用 1px 间隙 + 底色做出网格分隔线，比给每格加边框接缝更干净 */
.dq-pwhy__item {
	padding: clamp(24px, 2.4vw, 40px);
	background: var(--dq-steel);
	transition: background 0.3s var(--dq-ease);
}

.dq-pwhy__item:hover {
	background: var(--dq-card);
}

.dq-pwhy__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 16px;
	color: var(--dq-accent);
	background: var(--dq-accent-soft);
	border: 1px solid var(--dq-accent-line);
}

.dq-pwhy__title {
	margin: 0 0 8px;
	font-size: var(--dq-fs-title-2);
	font-weight: 600;
	line-height: 1.3;
	color: var(--dq-ink);
}

.dq-pwhy__desc {
	margin: 0;
	font-size: var(--dq-fs-base);
	line-height: 1.6;
	color: var(--dq-ink-2);
}

@media (max-width: 900px) {
	.dq-pwhy__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.dq-pwhy__grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   9. ⑥ 合作流程
   ------------------------------------------------------------------------- */
.dq-pflow {
	position: relative;
	background-size: cover;
	background-position: center;
}

.dq-pflow--bg {
	background-color: #0b1016;
	color: #fff;
}

.dq-pflow__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 13, 19, 0.93) 0%, rgba(8, 13, 19, 0.88) 100%);
}

.dq-pflow__inner {
	position: relative;
	z-index: 1;
}

.dq-pflow--bg .dq-heading__title,
.dq-pflow--bg .dq-pflow__title {
	color: #fff;
}

.dq-pflow--bg .dq-heading__desc,
.dq-pflow--bg .dq-pflow__desc {
	color: rgba(255, 255, 255, 0.66);
}

.dq-pflow__steps {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--dq-gap);
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.dq-pflow__step {
	position: relative;
	padding: clamp(22px, 2.2vw, 34px);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

/* 没有背景图时（板块跑在普通底色上）换成常规卡片配色 */
.dq-pflow:not(.dq-pflow--bg) .dq-pflow__step {
	background: var(--dq-card);
	border-color: var(--dq-card-line);
}

/* 步骤之间的箭头，只在桌面横排时出现 */
.dq-pflow__step::after {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(var(--dq-gap) * -1);
	width: var(--dq-gap);
	height: 1px;
	background: var(--dq-accent-line);
}

.dq-pflow__step:nth-child(3n)::after,
.dq-pflow__step:last-child::after {
	display: none;
}

.dq-pflow__num {
	display: block;
	margin-bottom: 12px;
	font-family: var(--dq-font-num);
	font-size: max(12px, 0.8em);
	letter-spacing: 0.18em;
	color: var(--dq-accent);
}

.dq-pflow__title {
	margin: 0 0 8px;
	font-size: var(--dq-fs-title-2);
	font-weight: 600;
	line-height: 1.3;
	color: var(--dq-ink);
}

.dq-pflow__desc {
	margin: 0;
	font-size: var(--dq-fs-base);
	line-height: 1.6;
	color: var(--dq-ink-2);
}

@media (max-width: 900px) {
	.dq-pflow__steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.dq-pflow__step::after {
		display: none;
	}
}

@media (max-width: 560px) {
	.dq-pflow__steps {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   10. ⑦ 项目案例 / ⑧ 技术文章 / 栏目列表页 —— 共用卡片骨架
   ------------------------------------------------------------------------- */
.dq-pprj__grid,
.dq-pins__grid,
.dq-plc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--dq-gap);
}

.dq-pprj__card,
.dq-pins__card,
.dq-plc-card {
	display: flex;
	flex-direction: column;
	background: var(--dq-card);
	border: 1px solid var(--dq-card-line);
	transition: transform 0.3s var(--dq-ease), border-color 0.3s var(--dq-ease), box-shadow 0.3s var(--dq-ease);
}

.dq-pprj__card:hover,
.dq-pins__card:hover,
.dq-plc-card:hover {
	transform: translateY(-4px);
	border-color: var(--dq-accent-line);
	box-shadow: var(--dq-shadow);
}

.dq-pprj__media,
.dq-pins__media,
.dq-plc-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--dq-bg-alt);
}

.dq-pprj__media img,
.dq-pins__media img,
.dq-plc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--dq-ease);
}

.dq-pprj__card:hover .dq-pprj__media img,
.dq-pins__card:hover .dq-pins__media img,
.dq-plc-card:hover .dq-plc-card__media img {
	transform: scale(1.05);
}

/* 没有配图的卡片用图标顶上，避免空白块 */
.dq-plc-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--dq-accent);
	background: var(--dq-accent-soft);
}

.dq-pprj__body,
.dq-pins__body,
.dq-plc-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: clamp(18px, 1.6vw, 26px);
}

.dq-pprj__client,
.dq-plc-card__eyebrow,
.dq-pins__cat {
	display: inline-block;
	font-size: max(11px, 0.74em);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dq-accent);
}

.dq-pprj__title,
.dq-pins__title,
.dq-plc-card__title {
	margin: 10px 0 0;
	font-size: var(--dq-fs-title-2);
	font-weight: 600;
	line-height: 1.32;
}

.dq-pprj__title a,
.dq-pins__title a,
.dq-plc-card__title a {
	color: var(--dq-ink);
	text-decoration: none;
}

.dq-pprj__title a:hover,
.dq-pins__title a:hover,
.dq-plc-card__title a:hover {
	color: var(--dq-accent);
}

.dq-pprj__line {
	margin: 12px 0 0;
	font-size: var(--dq-fs-base);
	line-height: 1.6;
	color: var(--dq-ink-2);
}

.dq-pprj__label {
	display: block;
	margin-bottom: 2px;
	font-size: max(11px, 0.72em);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dq-muted);
}

.dq-pins__excerpt,
.dq-plc-card__desc {
	margin: 10px 0 0;
	font-size: var(--dq-fs-base);
	line-height: 1.6;
	color: var(--dq-ink-2);
}

.dq-pins__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: max(11px, 0.74em);
	color: var(--dq-muted);
}

.dq-pins__more,
.dq-plc-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 16px;
	font-size: max(12px, 0.82em);
	color: var(--dq-accent);
}

.dq-pins__card:hover .dq-pins__more svg,
.dq-plc-card:hover .dq-plc-card__more svg {
	transform: translateX(4px);
}

.dq-pins__more svg,
.dq-plc-card__more svg {
	transition: transform 0.25s var(--dq-ease);
}

/* 案例/文章卡的标签条贴着底部对齐 */
.dq-pprj__body .dq-taglist,
.dq-plc-card__body .dq-taglist {
	margin-top: auto;
	padding-top: 16px;
}

@media (max-width: 1000px) {
	.dq-pprj__grid,
	.dq-pins__grid,
	.dq-plc-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.dq-pprj__grid,
	.dq-pins__grid,
	.dq-plc-grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   11. ⑨ 底部行动条
   ------------------------------------------------------------------------- */
.dq-pcta {
	position: relative;
	background-color: var(--dq-primary);
	background-size: cover;
	background-position: center;
	color: #fff;
}

.dq-pcta__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(9, 32, 52, 0.95) 0%, rgba(9, 32, 52, 0.82) 100%);
}

.dq-pcta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 3vw, 60px);
	padding: clamp(40px, 4.4vw, 76px) 0;
}

.dq-pcta__title {
	max-width: 24ch;
	margin: 0;
	font-size: clamp(21px, 1.95vw, 34px);
	font-weight: 700;
	line-height: 1.24;
	color: #fff;
}

.dq-pcta__desc {
	max-width: 60ch;
	margin: 12px 0 0;
	font-size: var(--dq-fs-base);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.74);
}

.dq-pcta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	flex-shrink: 0;
}

/* 行动条本身已经是主题色底，实心按钮要反白才看得出来 */
.dq-pcta__actions .dq-btn {
	background: #fff;
	border-color: #fff;
	color: var(--dq-primary);
}

.dq-pcta__actions .dq-btn:hover {
	background: rgba(255, 255, 255, 0.86);
	border-color: rgba(255, 255, 255, 0.86);
	color: var(--dq-primary);
}

.dq-pcta__actions .dq-btn--outline {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

.dq-pcta__actions .dq-btn--outline:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: #fff;
}

@media (max-width: 860px) {
	.dq-pcta__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* -------------------------------------------------------------------------
   11.5 询盘表单
   -------------------------------------------------------------------------
   询盘插件把表单卡片的底色写死成白色，而本站是深色底，卡片里的文字
   继承主题的近白色 —— 结果是白底白字，标签几乎看不见。
   这里把卡片和控件都交回主题令牌，明暗两种模式都会跟着变。
   改的是本主题的样式，不动插件文件，插件升级不会被覆盖。

   注意选择器为什么写得这么重：插件的 inquiry.css 是在渲染短代码时才入队的，
   排在主题样式后面，同权重的规则会被它盖掉。这里靠重复类名把权重抬高一级
   （0,2,0 > 0,1,0），比用 !important 干净，也不会挡住客户后续的自定义 CSS。
   ------------------------------------------------------------------------- */
.zc-inquiry-block.zc-inquiry-block {
	background: var(--dq-card);
	border: 1px solid var(--dq-card-line);
	color: var(--dq-ink);
}

.zc-inquiry-block .zc-inquiry-block__intro,
.zc-inquiry-block .zc-inquiry-block__intro h2,
.zc-inquiry-block .zc-inquiry-field label {
	color: var(--dq-ink);
}

.zc-inquiry-block .zc-inquiry-block__intro p {
	color: var(--dq-ink-2);
}

.zc-inquiry-block .zc-inquiry-field input,
.zc-inquiry-block .zc-inquiry-field textarea,
.zc-inquiry-block .zc-inquiry-field select {
	background: var(--dq-bg);
	border: 1px solid var(--dq-line);
	color: var(--dq-ink);
}

.zc-inquiry-block .zc-inquiry-field input:focus,
.zc-inquiry-block .zc-inquiry-field textarea:focus,
.zc-inquiry-block .zc-inquiry-field select:focus {
	border-color: var(--dq-accent);
	outline: none;
}

.zc-inquiry-block .zc-inquiry-field input::placeholder,
.zc-inquiry-block .zc-inquiry-field textarea::placeholder {
	color: var(--dq-muted);
}

.zc-inquiry-block .zc-btn-primary {
	background: var(--dq-primary);
	border-color: var(--dq-primary);
	color: #fff;
}

.zc-inquiry-block .zc-btn-primary:hover {
	background: var(--dq-primary-2);
	border-color: var(--dq-primary-2);
}

/* 弹窗表单同理 */
.zc-modal__dialog.zc-modal__dialog {
	background: var(--dq-card);
	color: var(--dq-ink);
}

/* -------------------------------------------------------------------------
   11.6 服务（WooCommerce 商品）列表卡片
   -------------------------------------------------------------------------
   八条服务的简介长短不一，卡片虽然等高，但「Learn more」和询价按钮
   会跟着文字走，一行里四个按钮高低不齐。把卡片正文改成纵向弹性布局，
   按钮推到底部对齐。
   ------------------------------------------------------------------------- */
ul.products li.product .dq-woo-card,
ul.products li.product .dq-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

ul.products li.product .dq-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* 摘要占据弹性空间，把后面的链接和按钮顶到底 */
ul.products li.product .dq-woo-card__summary {
	flex: 1;
}

ul.products li.product .dq-card__more,
ul.products li.product .zc-open-inquiry-modal,
ul.products li.product .zc-btn {
	margin-top: auto;
}

/* 询价按钮和上面的「Learn more」之间留一点呼吸 */
ul.products li.product .zc-btn {
	margin-top: 14px;
	width: 100%;
}

/* -------------------------------------------------------------------------
   12. 栏目详情页
   ------------------------------------------------------------------------- */
.dq-plc-single {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(280px, 25%, 380px);
	gap: clamp(28px, 3.2vw, 56px);
	align-items: start;
}

.dq-plc-single__aside {
	display: grid;
	gap: var(--dq-gap);
	position: sticky;
	top: calc(var(--dq-header-h) + 24px);
}

.dq-plc-single__box {
	padding: clamp(20px, 1.9vw, 30px);
	background: var(--dq-steel);
	border: 1px solid var(--dq-card-line);
}

.dq-plc-single__box-title {
	margin: 0 0 14px;
	font-size: var(--dq-fs-card);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dq-ink);
}

.dq-plc-single__box--cta {
	background: var(--dq-primary);
	border-color: var(--dq-primary);
}

.dq-plc-single__box--cta .dq-plc-single__box-title {
	color: #fff;
}

.dq-plc-single__box--cta p {
	margin: 0 0 18px;
	font-size: var(--dq-fs-base);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
}

.dq-plc-single__box--cta .dq-btn {
	background: #fff;
	border-color: #fff;
	color: var(--dq-primary);
}

@media (max-width: 900px) {
	.dq-plc-single {
		grid-template-columns: 1fr;
	}

	.dq-plc-single__aside {
		position: static;
	}
}

/* -------------------------------------------------------------------------
   13. 案例详情页的四段式
   ------------------------------------------------------------------------- */
.dq-case {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--dq-line);
	border: 1px solid var(--dq-line);
}

.dq-case__block {
	padding: clamp(24px, 2.4vw, 40px);
	background: var(--dq-steel);
}

/* Result 用主题色底收尾，视线自然落在结果上 */
.dq-case__block--result {
	background: var(--dq-primary);
}

.dq-case__block--result .dq-case__label {
	color: rgba(255, 255, 255, 0.72);
}

.dq-case__block--result .dq-case__text {
	color: #fff;
}

.dq-case__label {
	margin: 0 0 10px;
	font-size: max(11px, 0.74em);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dq-accent);
}

.dq-case__text {
	margin: 0;
	font-size: var(--dq-fs-lead);
	line-height: 1.62;
	color: var(--dq-ink);
}

.dq-case__entry {
	margin-top: clamp(30px, 3vw, 52px);
}

@media (max-width: 760px) {
	.dq-case {
		grid-template-columns: 1fr;
	}
}