走这套规则）。
* 科技青边框风：表头深底青字 + 底部 2px cyan 分隔线；单元格淡青边框 15%；
* 单元格背景保持透明（透过页面主背景），既有品牌感又不喧宾夺主。
* 移动端会被下面的 @media 覆盖成横滚保护。 */
.detail-content table {
width: 100% !important;
border-collapse: collapse;
margin: 16px 0;
table-layout: auto;
}
.detail-content th,
.detail-content td {
border: 1px solid rgba(0, 212, 255, 0.15);
padding: 10px 14px;
text-align: left;
vertical-align: top;
}
.detail-content td {
color: var(--text);
background: transparent;
}
.detail-content th {
background: var(--bg-3);
color: var(--cyan);
font-weight: 600;
border-bottom: 2px solid var(--cyan);
}
@media (max-width: 768px) {
.detail-layout { gap: 32px; }
.sidebar-card { padding: 16px; }
.detail-content {
word-break: break-word;
overflow-wrap: anywhere;
padding: 24px 20px;
border-radius: var(--r);
}
.detail-content pre {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.detail-content table {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.detail-content iframe,
.detail-content video { max-width: 100%; }
}
/* Hover effects only on real hover devices — avoid stuck :hover on touch */
@media (hover: none) {
.card:hover,
.case-row:hover,
.btn-primary:hover,
.btn-outline:hover,
.btn-ghost:hover {
transform: none;
box-shadow: none;
}
.case-row:hover { background: var(--card); }
.card:hover { background: var(--card); border-color: var(--border); }
}
/* Prevent iOS Safari from zooming form fields on focus (needs ≥16px)
* .poc-form input:not([type=checkbox]) 是为了对齐上方 POC 输入框规则的特异性 (0,2,1)，
* 让本规则靠源顺序在后覆盖字号，否则 iOS 聚焦会自动放大页面。 */
@media (max-width: 640px) {
.poc-form input:not([type="checkbox"]),
.poc-form select,
.poc-form textarea,
.form-group input,
.form-group textarea,
.ai-input { font-size: 16px; }
}
/* ============================================================================
* ===== Homepage Section Palette（首页模块渐变辨识 · v2 强化版）================
* ============================================================================
* 目的：让首页 5 大内容模块（About / Products / Solutions / Cases / News）
* 在深色主题下拥有各自可辨识的"氛围光晕"，用户滚动时能一眼分清模块边界。
*
* v2 相对 v1 的强化（因 body 主题换成 Linear 深紫后 v1 辨识度不足）：
* - 光斑透明度 7-9% → 24-30%（跟 body 紫光 α=0.28 同量级，压得住）
* - 光斑覆盖 55%×65% → 95-120%×80-90%（从角落扩到覆盖整块）
* - 加"顶部下拉渐变"：模块前 45% 高度从辅助色 α=0.12 渐到透明，
* 一进视口就有明显的"这块变色了"入场感
* - 5 个模块统一叠 var(--bg-2) 深底兜底 —— 覆盖 .section-dark 的同款底色
* 以及 Products/News 原本透 body 紫的行为，让辅助色能顶起来
* - 底部分界线 1px → 2px + box-shadow 20-24px 光晕，物理分隔感强
*
* 设计约束（不变）：
* 1. 只用 id 选择器精确命中首页 section，绝不动 .section / .section-dark 本身
* —— 内页 (product_detail / case_list 等) 复用这些类，不能受影响。
* 2. 4 个模块用靠近品牌青蓝色系的邻近色（靛紫 indigo / 品牌蓝 / 青绿 teal /
* 品牌青），唯一暖色是 Cases 的琥珀金（语义 = 成就 / 荣誉），作为整页
* 唯一暖色锚点。
*
* 实现要点：
* - section 加 position:relative + overflow:hidden（不影响锚点跳转）
* - background 承载"顶部下拉辅助色渐变" + "var(--bg-2) 深底兜底"
* - ::before 承载 radial 光斑（inset:0, pointer-events:none, z:0）
* - ::after 承载底部 2px 发光分界线（带 box-shadow 光晕）
* - > .container 抬到 z:1，避免被伪元素盖住，保持子元素可交互
*
* 不影响：hero-orb / carousel / cta-section / --grad / .grad-text / 卡片 /
* 按钮 / nav / footer / body 深紫渐变背景。
* ============================================================================ */
#about > .container,
#products > .container,
#solutions > .container,
#cases > .container,
#news > .container {
position: relative;
z-index: 1;
}
/* ── About：靛紫（indigo-400），左上光斑 · 语义 = 沉稳 / 信任 / 底蕴 ── */
#about {
position: relative; overflow: hidden;
background:
linear-gradient(180deg, rgba(129,140,248,0.12) 0%, transparent 45%),
var(--bg-2);
}
#about::before {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background: radial-gradient(ellipse 100% 85% at 15% 20%,
rgba(129,140,248,0.28) 0%, transparent 60%);
}
#about::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0;
height: 2px; pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(129,140,248,0.55), transparent);
box-shadow: 0 0 20px rgba(129,140,248,0.35);
}
/* ── Products：品牌蓝，右上光斑 · 语义 = 核心 / 主力 ── */
#products {
position: relative; overflow: hidden;
background:
linear-gradient(180deg, rgba(79,142,247,0.12) 0%, transparent 45%),
var(--bg-2);
}
#products::before {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background: radial-gradient(ellipse 95% 80% at 88% 18%,
rgba(79,142,247,0.30) 0%, transparent 58%);
}
#products::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0;
height: 2px; pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(79,142,247,0.55), transparent);
box-shadow: 0 0 20px rgba(79,142,247,0.35);
}
/* ── Solutions：青绿（teal-400），左下光斑 · 语义 = 方案 / 组合 / 灵活 ── */
#solutions {
position: relative; overflow: hidden;
background:
linear-gradient(180deg, rgba(45,212,191,0.11) 0%, transparent 45%),
var(--bg-2);
}
#solutions::before {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background: radial-gradient(ellipse 100% 90% at 18% 82%,
rgba(45,212,191,0.28) 0%, transparent 60%);
}
#solutions::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0;
height: 2px; pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(45,212,191,0.55), transparent);
box-shadow: 0 0 20px rgba(45,212,191,0.35);
}
/* ── Cases：玫瑰粉（rose-400），右下 + 中心双光斑 · 语义 = 温度 / 合作 / 成就 ──
* 整页唯一暖色锚点。v2 原本用琥珀金 amber-400，在深紫 body + 深灰蓝底叠加下
* 会呈现"土棕/生锈"污渍感（黄橙 + 深紫 = 灰棕的色相化学反应），故 v2.1
* 改用玫瑰粉：R 分量高、B 分量中等，在深底上稳定呈现"淡粉红光晕"不变色。
* 强度也相应下调，与其它 4 个冷色模块视觉重量一致。 */
#cases {
position: relative; overflow: hidden;
background:
linear-gradient(180deg, rgba(244,114,182,0.08) 0%, transparent 45%),
var(--bg-2);
}
#cases::before {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background:
radial-gradient(ellipse 65% 75% at 85% 78%,
rgba(244,114,182,0.20) 0%, transparent 58%),
radial-gradient(ellipse 55% 55% at 30% 30%,
rgba(244,114,182,0.10) 0%, transparent 60%);
}
#cases::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0;
height: 2px; pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(244,114,182,0.5), transparent);
box-shadow: 0 0 22px rgba(244,114,182,0.3);
}
/* ── News：品牌青，正上一带光斑 · 语义 = 新鲜 / 及时 · 回归品牌主色收敛节奏 ── */
#news {
position: relative; overflow: hidden;
background:
linear-gradient(180deg, rgba(0,212,255,0.12) 0%, transparent 45%),
var(--bg-2);
}
#news::before {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background: radial-gradient(ellipse 120% 60% at 50% -5%,
rgba(0,212,255,0.24) 0%, transparent 65%);
}
#news::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0;
height: 2px; pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(0,212,255,0.55), transparent);
box-shadow: 0 0 20px rgba(0,212,255,0.35);
}
/* ============================================================================
* ===== 手机端补强规则（13 项适配问题批量修复）================================
* ============================================================================
* 本块只做"追加"，不覆盖之前的任何规则。定位在文件末尾便于回滚 —— 删除本块
* 即恢复到"补强前"的状态。每条规则都注明修的哪个问题。
* ============================================================================ */
/* ── 通用工具类：详情页侧栏销售卡片（替代原 inline style，问题 10） ────────── */
.sidebar-sales-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 0; border-bottom: 1px solid var(--border);
}
.sidebar-sales-item .sales-avatar,
.sidebar-sales-item .sales-avatar-placeholder {
width: 40px; height: 40px; margin: 0;
}
.sidebar-sales-item .sales-avatar-placeholder { font-size: 1rem; }
.sidebar-sales-item .sales-info { min-width: 0; flex: 1; }
.sidebar-sales-item .sales-name { font-size: 0.88rem; }
/* 详情页侧栏"相关产品"链接（原 inline style 复用） */
.sidebar-related-link {
display: flex; align-items: center; gap: 10px;
padding: 10px 0; border-bottom: 1px solid var(--border);
color: var(--text); font-size: 0.88rem;
transition: color var(--t), padding-left var(--t);
}
.sidebar-related-link:last-child { border-bottom: none; }
.sidebar-related-link .arrow {
color: var(--cyan);
transition: transform var(--t);
}
.sidebar-related-link:hover {
color: var(--cyan);
padding-left: 6px;
}
.sidebar-related-link:hover .arrow {
transform: translateX(3px);
}
/* 详情页侧栏"最新动态"链接（news_detail 用） */
.sidebar-news-item {
display: block; padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.sidebar-news-item .date {
font-size: 0.72rem; color: var(--text-3); margin-bottom: 4px;
}
.sidebar-news-item .title {
font-size: 0.88rem; color: var(--text-2); line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 详情页 page-header 中的次要文字（时间戳等）。
* 用 p.page-header-meta 提升特异性（0-2-1）以压过 .page-header p (0-1-1)，
* 否则 font-size 会被 .page-header p{font-size:1.05rem} 覆盖。 */
p.page-header-meta {
color: var(--text-3); font-size: 0.85rem; margin-top: 8px;
}
/* solution_detail 侧栏"获取方案"卡里的辅助说明文字。
* 用 color-mix 把主文本色 --text 与透明色混合成 75% 亮度，
* 好处：跟随主题变量走，将来改 --text 不用同步这里；避免硬编码色值。
* (术语：color-mix() = CSS 官方的颜色混合函数，in srgb 指定色彩空间) */
.sidebar-card .sidebar-desc {
color: color-mix(in srgb, var(--text) 75%, transparent); font-size: 0.88rem; margin-bottom: 16px;
}
/* product_detail 侧栏"产品信息"里字段名（复用 .contact-label class）
* 全局 .contact-label 用 --text-3 (#4a5568)，在深色侧栏卡上几乎看不见；
* 仅在侧栏作用域内提亮，不影响 contact.html "地址/电话/邮箱" 等标签。 */
.sidebar-card .contact-label { color: color-mix(in srgb, var(--text) 75%, transparent); }
/* 侧栏卡里的按钮包装器（原 inline width/justify-content 抽出；margin 保留在模板 inline 以精确保留原视觉间距）。 */
.sidebar-action .btn { width: 100%; justify-content: center; }
/* 列表页空状态占位（问题 11，替代原 inline style） */
.empty-state {
text-align: center; color: var(--text-3);
padding: 80px 0; font-size: 0.95rem;
}
@media (max-width: 640px) {
.empty-state { padding: 48px 16px; font-size: 0.9rem; }
}
/* ── 问题 1：footer-grid 平板段（768-1024）品牌区独占一行 ─────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
.footer-grid { grid-template-columns: repeat(3, 1fr); }
.footer-brand { grid-column: 1 / -1; }
}
/* ── 问题 2 + 4：stats-row 数字在窄屏下缩小，避免挤爆 ──────────────────────── */
@media (max-width: 480px) {
.stat-num { font-size: 1.4rem; }
.stat-label { font-size: 0.72rem; }
.stat-item { padding: 16px 10px; }
}
/* ── 问题 3：contact QR 二维码超窄屏下收缩 ───────────────────────────────── */
@media (max-width: 480px) {
.contact-qr img { width: 128px; height: 128px; }
.contact-qr .card { padding: 20px !important; }
}
/* ── 问题 5：首页公司简介预览截断，手机端放宽 max-height 避免过紧 ─────────── */
@media (max-width: 768px) {
.about-preview { max-height: 380px; }
}
@media (max-width: 480px) {
.about-preview { max-height: 320px; }
}
/* ── 问题 6：section-header 在超窄屏下继续收紧间距 ───────────────────────── */
@media (max-width: 480px) {
.section-header { margin-bottom: 20px; }
.section-header h2 { margin-bottom: 6px; }
}
/* ── 问题 7：CTA 区块手机端收窄，避免占满一屏 ─────────────────────────────── */
@media (max-width: 640px) {
.cta-section { padding: 44px 0; }
.cta-section h2 { font-size: clamp(1.3rem, 5vw, 1.8rem); }
.cta-section p { font-size: 0.9rem; margin-bottom: 20px; }
.cta-actions .btn { width: 100%; justify-content: center; }
}
/* ── 问题 8 + 13：detail-cover 手机端更小的 border-radius 和 aspect-ratio 兜底 ─
* 手机上 16:9 高瘦，如果图更宽（如 21:9 banner）letterbox 上下过多。
* 放宽到 5:3，视觉上更舒服；圆角从 20px 缩到 12px 避免小屏突兀。 */
@media (max-width: 640px) {
.detail-cover {
aspect-ratio: 5 / 3;
border-radius: var(--r);
margin-bottom: 20px;
}
}
/* ── 问题 9：download-btn 手机端两个按钮并排时更紧凑 ──────────────────────── */
@media (max-width: 640px) {
.download-btn { max-width: none; padding: 10px 12px; font-size: 0.82rem; }
}
@media (max-width: 380px) {
.download-actions { flex-direction: column; gap: 6px; }
.download-btn { width: 100%; }
}
/* ── 详情页侧栏销售条目右侧的"销售个人微信二维码"（各自的 WechatQR，点击弹大图）
* 放在销售员姓名/电话右边；QR 用固定 64px，销售条目行高自然被撑起来。
* 上下 padding 也加高，避免 QR 顶到边框。 */
.sidebar-sales-item .sales-inline-qr {
width: 64px; height: 64px; flex-shrink: 0;
border-radius: 6px; border: 1px solid var(--border);
object-fit: contain; background: #fff;
cursor: zoom-in;
transition: transform var(--t), border-color var(--t);
}
.sidebar-sales-item .sales-inline-qr:hover {
transform: scale(1.05);
border-color: var(--cyan);
}
/* 有 QR 时销售条目上下留白多一点，避免 QR 贴分割线 */
.sidebar-sales-item:has(.sales-inline-qr) { padding: 14px 0; }
@media (max-width: 640px) {
.sidebar-sales-item .sales-inline-qr { width: 56px; height: 56px; }
}
/* ── 二维码放大 lightbox（复用 .modal-overlay 遮罩层与 open 动画） ─────────── */
.qr-lightbox { z-index: 1200; }
.qr-lightbox-inner {
position: relative;
display: flex; flex-direction: column; align-items: center;
gap: 14px;
transform: translateY(20px) scale(0.97);
transition: transform var(--t);
}
.qr-lightbox.open .qr-lightbox-inner { transform: translateY(0) scale(1); }
.qr-lightbox-img {
width: min(320px, 78vw); height: auto; aspect-ratio: 1 / 1;
border-radius: var(--r); background: #fff;
border: 1px solid var(--border);
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
object-fit: contain;
}
.qr-lightbox-caption {
color: var(--text); font-size: 0.92rem;
text-align: center; max-width: min(320px, 78vw);
word-break: break-all;
}
.qr-lightbox-close {
position: absolute; top: -44px; right: -4px;
color: #fff; font-size: 1.5rem;
}
@media (max-width: 480px) {
.qr-lightbox-img { width: 80vw; }
.qr-lightbox-close { top: -40px; right: 0; }
}