/* ==========================================================================
   DIY Driver 首页样式（Phase 1 · 2026-09-21）
   取代：mu-plugins/dd-homepage.css（9,297 bytes，Tailwind slate/sky 那套）

   颜色全部走 token（见 style.css 的 :root），**不出现裸十六进制**
   旧→新 映射：
     #0b1220 / #16233d 深藏蓝  →  --dd-darkest-bg #0f3843 / --dd-dark-bg #164b5c
     #38bdf8 / #0ea5e9 / #7dd3fc 天蓝 →  --dd-teal-300 #7cc7d8 / --dd-accent #1a7089
     #94a3b8 / #cbd5e1 冷灰    →  --dd-on-dark-muted #d9eff4 / --dd-n-300
     #e6edf3 卡片描边          →  --dd-border #dde4e7
   ========================================================================== */


/* --------------------------------------------------------- 容器 */
.dd-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--dd-space-5);
	color: var(--dd-text);
	font-family: var(--dd-font);
	line-height: var(--dd-line);
}

.dd-page *,
.dd-page *::before,
.dd-page *::after {
	box-sizing: border-box;
}

/* 删掉 Storefront 给内容区加的默认上边距（首页是全宽自绘） */
.dd-page > :first-child {
	margin-top: 0;
}


/* ============================================ 全宽铺开（hero / 窄条）
   两个区块要突破 .dd-page 中栏，但宽度不同：
     · hero   → **整屏**（100vw）：脱离 .col-full 的 1064px 内容栏
     · 窄条   → **只到 .dd-page 边界**（白底条贴到 1200px 就够，内容与下方对齐）
   所以一个用 `100vw`，一个用 `.dd-page` 的负 padding。

   ⚠️ 为什么可以放心用 100vw：
      祖先 #page.hfeed / body 都是 `overflow-x:hidden` →
      `margin-left:50%; margin-right:50%; width:100vw;` 多出来的
      (100vw - 100%)/2 会被**对称裁掉**，且因为 overflow-x 是 hidden，
      **不产生横向滚动条**（实测 scrollW == vw，见 _verify_hdr_local.py 的 ④判定）。
      ⛔ 若哪天有人把祖先的 overflow-x 改成 visible，这里会立刻冒出滚动条。

   ⚠️ 顺带一个坑：宽度要写 `width:100vw`，**不要写 `100%`**。
      水平方向的「百分比 margin」是按**包含块宽度**解析的，而 `width:100%`
      再配上 50% 的左右 margin，总宽会超出去；`100vw` 是视口单位，
      不受包含块影响，才是准的。 */

   ⛔ 具体声明**不能写在这里**：本文件下方 .dd-hero / .dd-fitbar-inner 的
      基础规则里有 `margin` / `margin:0 auto` 简写，写在前面会被它们清掉。
      → 实际声明落在各自的基础规则里（.dd-hero 见「HERO」段，
        .dd-fitbar-inner 见「车辆适配窄条」段），这里只留原理。 */


/* ================================================ 车辆适配窄条 */
/* 位置：导航正下方、hero 之前 —— 对标 AutoSky 的 fitment-first 布局。
   ⛔ 别把它挪回 hero 里。选车器是「工具条」，hero 是「主视觉」；
      表单占了主视觉位，整屏就只剩一张表单，首页没有承诺、没有货。
      见 dd-child/front-page.php 顶部注释。 */
/* 外层只管垂直节奏 + 文字色。
   白底/描边/横向铺开都交给 .dd-fitbar-inner（见上方「全宽铺开」段落）——
   因为它要突破 .dd-page 的中栏，而外层只负责上下间距。 */
.dd-fitbar {
	margin: 0 0 var(--dd-space-8);
	color: var(--dd-text);
}

/* 内层负责：白底 + 描边 + **横向铺到 .dd-page 边界**（内容仍与下方区块对齐）。
   铺开用「负 padding 值」而不是 100vw —— 窄条只要贴到 1200px 就够，不需要整屏。 */
.dd-fitbar-inner {
	display: flex;
	align-items: center;
	gap: var(--dd-space-5);
	max-width: 1200px;
	/* 左右都写显式负值，**不靠 `margin:auto` 去解析出负值**（能出结果但读不懂） */
	width: calc(100% + 2 * var(--dd-space-5));
	margin: 0 calc(-1 * var(--dd-space-5));
	padding: var(--dd-space-3) var(--dd-space-5);
	background: var(--dd-surface-card);
	border-bottom: 1px solid var(--dd-border);
}

.dd-fitbar-label {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--dd-text-muted);
	white-space: nowrap;
	margin: 0;
}

/* 自绘选择器的 DOM：.dd-vs > .dd-vs-fields > (3× .dd-vs-field + button)
   ⛔ 这里只放「骨架」（横排/换行/层级），配色细节在 assets/vehicle-selector.css。
      2026-09-22 前这里是插件的 .ymm-selector —— 已整体替换，
      原因是插件的 Make 下拉从 dd_ymm 反算，只有 7 个品牌。
      详见 inc/vehicle-selector.php 顶部。 */
.dd-fitbar .dd-vs {
	flex: 1 1 auto;
	min-width: 0;
}

.dd-fitbar .dd-vs-fields {
	display: flex;
	align-items: flex-end;
	gap: var(--dd-space-3);
	flex-wrap: wrap;
}

.dd-fitbar .dd-vs-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 150px;
	min-width: 0;
	margin: 0;
}

.dd-fitbar .dd-vs-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--dd-text-muted);
}

.dd-fitbar .dd-vs-select {
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 10px 12px;
	font-size: 14px;
	color: var(--dd-text);
	background: var(--dd-n-0);
	border: 1px solid var(--dd-border-input);
	border-radius: var(--dd-radius-md);
}

.dd-fitbar .dd-vs-select:disabled {
	background: var(--dd-n-100);
	color: var(--dd-n-500);
	border-color: var(--dd-border);
}

/* 提交按钮：跟在三个下拉后面，不再独占一行 */
.dd-fitbar .dd-vs-go {
	flex: 0 0 auto;
	margin: 0;
	padding: 10px 26px;
	font-size: 14px;
	font-weight: 700;
	color: var(--dd-darkest-bg);
	background: var(--dd-teal-300);
	border: 0;
	border-radius: var(--dd-radius-md);
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.dd-fitbar .dd-vs-go:hover,
.dd-fitbar .dd-vs-go:focus-visible {
	background: var(--dd-accent);
	color: var(--dd-n-0);
}

/* 状态行：⛔ 2026-09-28 起恒空（选择器降级为纯路由器，不再预告数字）。
   必须 margin:0 —— 空 <p> 带着 12px 外边距会凭空撑出一条缝，看着像站点坏了。
   ⛔ 这里是**第三处**同类规则，前两处是：
        assets/vehicle-selector.css   .dd-vs-status            (0,1,0)
        functions.php 内联关键 CSS     .dd-fitbar .dd-vs-status (0,2,0)
      三处特异性不同、加载顺序也不同，删的时候必须全删 ——
      只改一处等于没改（本次就是先漏了 home.css 这一处）。
   原 .dd-vs-status strong / a 两块随结果预告一起退役。 */
.dd-fitbar .dd-vs-status {
	margin: 0;
	padding: 0;
}


/* ========================================================== HERO */
/* ⛔ hero 只放「主视觉 + 承诺 + 主按钮」三样。选车器已移出到上方 .dd-fitbar。
   高度从 969px 收到 ~600px —— 首屏能露出「Shop by Category」，露出货。 */
.dd-hero {
	position: relative;
	overflow: hidden;
	/* ── 横向全屏 ──
	   逃出 .dd-page 的 1200px 中栏，再逃出 Storefront .col-full 的 1064px 内容栏。
	   `margin-left/right:50%` + `width:100vw` + `translateX(-50%)`：
	   百分比 margin 按包含块宽度算 → 两边各推 50% 正好从父容器中心铺开，
	   再用 100vw 定住真实视口宽，最后位移 -50% 把中心对回去。
	   多出视口的部分被祖先 #page/body 的 `overflow-x:hidden` **对称裁掉**
	   （实测不产生横向滚动条）。见上方「全宽铺开」段落的完整说明。 */
	width: 100vw;
	margin-left: 50%;
	margin-right: 50%;
	margin-top: 0;
	margin-bottom: var(--dd-space-16);
	transform: translateX(-50%);
	/* 全宽后左右圆角悬在屏幕外等于没有；底部圆角浮在窄条上方同样怪
	   → 四角一律直角（别改回来）。 */
	border-radius: 0;
	/* 桌面用 min-height 把盒子撑高，好让底部的车露出来。
	   移动端不设（见文件末 @media(max-width:782px)）——
	   窄屏文字本来就占满，硬撑高只会拉出一截空底。 */
	min-height: 760px;
	padding: clamp(44px, 5.2vw, 68px) var(--dd-space-5) clamp(48px, 5.6vw, 76px);
	/* 四层，从最上面往下画：
	   ① 暗压层    —— 保住白字对比度。上重下轻：标题区压到 .90，
	                  下段只留 .30，否则车会糊成一块青灰（第一版翻车点）。
	   ②③ 青雾光晕 —— 品牌味，直接用 ellipse + 显式尺寸 + 100% 停止点。
	                  原因：radial-gradient(circle, …) 在窄高盒子里半径按「最远角」算，
	                  渐变走到盒子边缘时还没到透明停止点，会被盒子边界硬切出一道缝。
	                  改用 ellipse → 渐变正好在椭圆边缘归零，结构上不可能再出现硬边。
	   ④ 车图      —— assets/hero-g.jpg，AI 生成（Pollinations，无水印残留）。
	                  关键词：ultra-wide banner + 车只占下 1/3 + 上方 2/3 留空。 */
	background:
		linear-gradient(180deg, rgba(15, 56, 67, .90) 0%, rgba(15, 56, 67, .84) 34%, rgba(15, 56, 67, .58) 62%, rgba(15, 56, 67, .30) 100%),
		radial-gradient(ellipse 52% 80% at 14% 20%, rgba(124, 199, 216, .20) 0%, rgba(124, 199, 216, 0) 100%),
		radial-gradient(ellipse 54% 78% at 88% 86%, rgba(26, 112, 137, .30) 0%, rgba(26, 112, 137, 0) 100%),
		url("hero-g.jpg") center 50% / cover no-repeat,
		var(--dd-darkest-bg);
	color: var(--dd-on-dark);
	text-align: center;
}

.dd-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 860px;
	margin: 0 auto;
}

.dd-hero-kicker {
	margin: 0 0 var(--dd-space-4);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--dd-teal-300);
}

.dd-hero-title {
	margin: 0 0 var(--dd-space-5);
	font-size: clamp(34px, 5.4vw, 58px);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--dd-on-dark);
}

.dd-accent-text {
	background: linear-gradient(100deg, var(--dd-teal-300) 0%, var(--dd-teal-200) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--dd-teal-300); /* 不支持 background-clip 时的回退 */
}

.dd-hero-sub {
	margin: 0 auto var(--dd-space-8);
	max-width: 620px;
	font-size: clamp(16px, 1.6vw, 19px);
	line-height: 1.62;
	color: var(--dd-on-dark-muted);
}


/* ------------------------------------------------------ 按钮 */
.dd-btn {
	display: inline-block;
	padding: 15px 32px;
	border-radius: var(--dd-radius-pill);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
	cursor: pointer;
}

.dd-btn-primary {
	background: var(--dd-teal-300);
	color: var(--dd-darkest-bg); /* 浅青底配最深青字（对比度通过） */
}

.dd-btn-primary:hover,
.dd-btn-primary:focus-visible {
	background: var(--dd-n-0);
	color: var(--dd-darkest-bg);
	transform: translateY(-1px);
}

.dd-btn-ghost {
	background: transparent;
	color: var(--dd-on-dark);
	border-color: rgba(255, 255, 255, .42);
}

.dd-btn-ghost:hover,
.dd-btn-ghost:focus-visible {
	background: rgba(255, 255, 255, .12);
	border-color: var(--dd-on-dark);
}

.dd-hero-cta {
	display: flex;
	gap: var(--dd-space-4);
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: var(--dd-space-10);
}


/* --------------------------------------------- hero 信任三连 */
.dd-hero-trust {
	position: relative;
	z-index: 1;
	display: flex;
	gap: var(--dd-space-8);
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--dd-on-dark-muted);
}

.dd-hero-trust li {
	display: flex;
	align-items: center;
	gap: var(--dd-space-2);
}

.dd-hero-trust svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	stroke: var(--dd-teal-300);
}


/* ================================================= 车辆适配选择器 */
/* ⛔ 2026-09-22：原先这里是 .dd-ymm —— 插件 [ymm_selector] 在 hero 内嵌的配色。
      选车器已移到导航下方 .dd-fitbar（见上方 .dd-fitbar .dd-vs-* 那一节），
      .dd-ymm 系列类名已无任何模板输出，故整段删除。
      选择器自身的样式在 assets/vehicle-selector.css。 */


/* ====================================================== 区块 */
.dd-section {
	margin: 0 0 var(--dd-space-16);
}

.dd-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dd-space-4);
	margin-bottom: var(--dd-space-8);
}

.dd-section-head h2 {
	position: relative;
	margin: 0;
	padding-bottom: var(--dd-space-3);
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--dd-text);
}

/* 标题下的强调短横 */
.dd-section-head h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 44px;
	height: 4px;
	border-radius: 2px;
	background: var(--dd-accent);
}

.dd-link {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 700;
	color: var(--dd-accent);
	text-decoration: none;
	white-space: nowrap;
}

.dd-link:hover,
.dd-link:focus-visible {
	color: var(--dd-accent-hover);
	text-decoration: underline;
}


/* ==================================================== 类目卡 */
.dd-cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
	gap: var(--dd-space-4);
}

.dd-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: var(--dd-space-6) var(--dd-space-4);
	background: var(--dd-surface-card);
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius-lg);
	text-align: center;
	text-decoration: none;
	color: var(--dd-text);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.dd-cat:hover,
.dd-cat:focus-within {
	border-color: var(--dd-accent);
	box-shadow: var(--dd-shadow-md);
	transform: translateY(-2px);
}

.dd-cat-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0 auto var(--dd-space-4);
	border-radius: var(--dd-radius-md);
	background: var(--dd-accent-tint);
	color: var(--dd-accent);
}

.dd-cat-icon svg {
	width: 26px;
	height: 26px;
}

.dd-cat-name {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--dd-text);
}

/* 类目商品数 —— 竞品里只有 VIOFO 分面带计数，我们在类目卡上先给它 */
.dd-cat-count {
	margin-top: var(--dd-space-2);
	font-size: 12px;
	font-weight: 600;
	color: var(--dd-text-muted);
}


/* ==================================================== 产品卡 */
.dd-products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
	gap: var(--dd-space-6);
}

.dd-product {
	display: flex;
	flex-direction: column;
	background: var(--dd-surface-card);
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: var(--dd-text);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.dd-product:hover,
.dd-product:focus-within {
	border-color: var(--dd-accent);
	box-shadow: var(--dd-shadow-lg);
	transform: translateY(-3px);
}

.dd-product-media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--dd-bg-product);
	overflow: hidden;
}

.dd-product-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- 竞品图占位块 ----
   护栏拦下未标 _dd_img_clean 的图时显示这个。
   设计意图：看着像"刻意留白的设计"，不像"图挂了"。 */
.dd-ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--dd-space-2);
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--dd-teal-50) 0%, var(--dd-n-100) 100%);
	color: var(--dd-accent);
}

.dd-ph-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	color: var(--dd-teal-400);
}

.dd-ph-icon svg {
	width: 40px;
	height: 40px;
}

.dd-ph-cat {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--dd-text-muted);
	text-align: center;
	padding: 0 var(--dd-space-3);
}

.dd-product-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--dd-space-2);
	padding: var(--dd-space-5);
}

.dd-product-title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--dd-text);
	/* 两行截断（memory: isabers_card_title_clamp_root_cause —— 用 -webkit-box 必须配 overflow） */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dd-product-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--dd-space-2);
	margin-top: auto;
}

.dd-price {
	font-size: 19px;
	font-weight: 800;
	color: var(--dd-text);
}

.dd-price-old {
	font-size: 14px;
	color: var(--dd-text-muted);
	text-decoration: line-through;
}

.dd-save {
	padding: 2px 8px;
	font-size: 12px;
	font-weight: 700;
	border-radius: var(--dd-radius-pill);
	color: var(--dd-sale);
	background: var(--dd-sale-bg);
}

.dd-buy {
	display: block;
	margin-top: var(--dd-space-3);
}

.dd-buy .dd-btn {
	display: block;
	width: 100%;
	padding: 12px 14px;
	font-size: 14px;
	text-align: center;
	background: var(--dd-accent-tint);
	color: var(--dd-accent);
	border-radius: var(--dd-radius-md);
}

.dd-product:hover .dd-buy .dd-btn,
.dd-product:focus-within .dd-buy .dd-btn {
	background: var(--dd-accent);
	color: var(--dd-n-0);
}


/* ==================================================== 指南卡 */
.dd-guides {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
	gap: var(--dd-space-6);
}

.dd-guide {
	display: block;
	padding: var(--dd-space-6);
	background: var(--dd-surface-card);
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius-lg);
	text-decoration: none;
	color: var(--dd-text);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.dd-guide:hover,
.dd-guide:focus-visible {
	border-color: var(--dd-accent);
	box-shadow: var(--dd-shadow-md);
	transform: translateY(-2px);
}

.dd-tag {
	display: inline-block;
	margin-bottom: var(--dd-space-3);
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	border-radius: var(--dd-radius-pill);
	color: var(--dd-accent);
	background: var(--dd-accent-tint);
}

.dd-guide h3 {
	margin: 0 0 var(--dd-space-3);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.38;
	color: var(--dd-text);
}

.dd-guide p {
	margin: 0;
	font-size: 14px;
	line-height: 1.62;
	color: var(--dd-text-muted);
}


/* ==================================================== 信任条 */
.dd-trustbar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
	gap: var(--dd-space-8);
	margin: 0 calc(-1 * var(--dd-space-5));
	padding: clamp(40px, 6vw, 64px) var(--dd-space-5);
	background: linear-gradient(135deg, var(--dd-darkest-bg) 0%, var(--dd-dark-bg) 100%);
	color: var(--dd-on-dark);
	border-radius: var(--dd-radius-lg) var(--dd-radius-lg) 0 0;
}

.dd-trust {
	display: flex;
	gap: var(--dd-space-4);
	align-items: flex-start;
}

.dd-trust svg {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin-top: 2px;
	stroke: var(--dd-teal-300);
}

.dd-trust strong {
	display: block;
	margin-bottom: var(--dd-space-2);
	font-size: 15px;
	font-weight: 700;
	color: var(--dd-on-dark);
}

.dd-trust span {
	display: block;
	font-size: 14px;
	line-height: 1.6;
	color: var(--dd-on-dark-muted);
}


/* ==================================================== 响应式 */
@media (max-width: 782px) {
	.dd-page {
		padding: 0 var(--dd-space-4);
	}

	.dd-trustbar {
		margin-left: calc(-1 * var(--dd-space-4));
		margin-right: calc(-1 * var(--dd-space-4));
		padding-left: var(--dd-space-4);
		padding-right: var(--dd-space-4);
	}

	/* ⛔ hero 必须从上面那组里摘出来：
	     那组给的是 `margin-left:-1rem; margin-right:-1rem`，
	     会把 hero 全宽用的 50% 逃逸边距**覆盖掉** → 手机端 hero 又缩回中栏。
	     这里只保留左右内边距（让文字不贴边），铺开交给 100vw。 */
	.dd-hero {
		padding-left: var(--dd-space-4);
		padding-right: var(--dd-space-4);
	}

	/* 窄条同款：内层铺到 .dd-page 边界，手机档 padding 从 1.25rem 变 1rem */
	.dd-fitbar-inner {
		width: calc(100% + 2 * var(--dd-space-4));
		margin-left: calc(-1 * var(--dd-space-4));
		padding-left: var(--dd-space-4);
		padding-right: var(--dd-space-4);
	}

	/* 窄条在手机上竖排：三个下拉各占一行 */
	.dd-fitbar-inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--dd-space-2);
	}

	.dd-fitbar-label {
		white-space: normal;
	}

	.dd-fitbar .dd-vs-fields {
		flex-direction: column;
		align-items: stretch;
		gap: var(--dd-space-2);
	}

	.dd-fitbar .dd-vs-field,
	.dd-fitbar .dd-vs-go {
		flex: 1 1 100%;
		width: 100%;
	}

	.dd-hero-trust {
		gap: var(--dd-space-4);
		flex-direction: column;
		align-items: center;
	}

	.dd-section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--dd-space-2);
	}

	/* 窄屏：撤掉撑高。hero 在手机上已经是 345x690 的竖版，
	   文字占掉九成，再撑高只会拉出一截空底。
	   暗压层重写一遍（上重下轻、整体更实）——这档要的是白字清楚，
	   不是看车；车图退成一层若有若无的质感。背景位置也要单写：
	   `center 50%` 在竖版盒子里会把隧道口顶出画外。 */
	.dd-hero {
		min-height: 0;
		background:
			linear-gradient(180deg, rgba(15, 56, 67, .90) 0%, rgba(15, 56, 67, .78) 45%, rgba(15, 56, 67, .86) 100%),
			radial-gradient(ellipse 52% 80% at 14% 20%, rgba(124, 199, 216, .18) 0%, rgba(124, 199, 216, 0) 100%),
			url("hero-g.jpg") center 62% / cover no-repeat,
			var(--dd-darkest-bg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dd-page *,
	.dd-page *::before,
	.dd-page *::after {
		transition: none !important;
		transform: none !important;
	}
}