/* ============================================================
   enhance.css — 首页惊艳层（依赖 design-system.css）
   ------------------------------------------------------------
   本层只保留 homepage-v4 首页「特有」的惊艳细节；
   通用能力（token、eyebrow 装饰、标题字距、reveal 入场、焦点环、
   表单态、reduced-motion 基础）已迁移到 design-system.css。
   用途：design-system.css → styles.css（首页布局）→ enhance.css（本层）。
   删除本层即回到「干净系统 + 首页布局」，惊艳细节消失但功能完整。
   ============================================================ */

/* ---------- A. 首屏强调语 / 信任带：衬线对比（首页特有） ---------- */
/* 编辑式衬线：H1 强调语与信任数字，制造有性格的对比。全部为系统字体，不依赖外网。 */
.hero h1 em{ font-family: var(--serif); font-weight: 700; }
.fact-bar b{ font-family: var(--serif); font-weight: 800; letter-spacing: 0; }

/* ---------- B. 首屏关系图（科技精致版，首页特有） ---------- */
.system-map{ display:block; }
.system-map text{ font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif; }

/* 蓝图网格底纹 */
.system-map .map-bg{ opacity:.7; }

/* 连接主线：细实线，navy→red 渐变，克制 */
.system-map .links path{ fill:none; stroke:url(#conn); stroke-width:2; stroke-linecap:round; opacity:.4; }

/* 流动信号点：沿连线运行的“监控/数据”光点 */
.system-map .spark{ fill:#cf1c32; filter:drop-shadow(0 0 5px rgba(207,28,50,.75)); }

/* 中心外刻度环：缓慢旋转的监控雷达感 */
.system-map .ring{ transform-box:fill-box; transform-origin:center; animation:spin 26s linear infinite; opacity:.55; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* 中心脉冲环：克制表达“长期有人负责” */
.system-map .pulse{ transform-box:fill-box; transform-origin:center; animation:pulse 3.4s ease-out infinite; }
@keyframes pulse{
  0%{ transform:scale(.55); opacity:.5; }
  70%{ opacity:0; }
  100%{ transform:scale(1.15); opacity:0; }
}

/* 中心 hub 白卡 + 红描边 */
.system-map .hub rect{ fill:url(#hubg); stroke:#cf1c32; stroke-width:3; filter:drop-shadow(0 6px 16px rgba(7,26,44,.12)); }
.system-map .hub-sm{ font-size:12px; font-weight:700; fill:#5c6672; letter-spacing:.04em; }
.system-map .hub-st{ font-size:16px; font-weight:800; fill:#071a2c; }

/* 节点白卡 + 精致描边 + 序号红徽 */
.system-map .node rect{ fill:#fff; stroke:rgba(0,41,100,.2); stroke-width:1.5; filter:drop-shadow(0 4px 10px rgba(7,26,44,.08)); }
.system-map .node .n-idx{ font-size:12px; font-weight:800; fill:#cf1c32; letter-spacing:.06em; }
.system-map .node .n-title{ font-size:15px; font-weight:800; fill:#071a2c; }
.system-map .node .n-sub{ font-size:11px; fill:#5c6672; }

/* 移动端：不机械缩小桌面关系图，改用压缩后的四宫格清单 */
.mobile-map{ display:none; list-style:none; margin:0; padding:0; }
@media (max-width:760px){
  .system-map{ display:none; }
  .mobile-map{
    position:absolute; inset:38px 16px 16px;
    display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:center;
  }
  .mobile-map li{
    display:flex; flex-direction:column; gap:2px; padding:12px 14px;
    background:#fff; border:1px solid rgba(0,41,100,.16);
    border-radius:10px; color:#071a2c; box-shadow:0 6px 18px rgba(7,26,44,.08);
  }
  .mobile-map .m-idx{ color:#cf1c32; font-weight:800; font-size:12px; }
  .mobile-map .m-title{ font-weight:800; font-size:14px; }
  .mobile-map .m-sub{ font-size:11px; color:#5c6672; }
}

/* ---------- C. 克制动效（首页特有部分） ---------- */
/* 关键卡片 hover 微抬升（仅视觉，不破坏布局） */
.service-primary, .case-main, .type-feature, .advantage-list>article,
.article-feature, .case-side>article{
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-primary:hover, .case-main:hover, .type-feature:hover,
.advantage-list>article:hover, .article-feature:hover, .case-side>article:hover{
  transform: translateY(-4px);
}

/* 首屏轮播
   注意：轨道宽 300%、单帧 flex-basis 33.3333%，两处必须同步改动。
   帧数由 JS 的 proofTitles 长度决定，若再增删帧，需同步改这两个数值。 */
.hero-slider{ position:relative; width:100%; overflow:hidden; }
.hero-slides{ display:flex; width:300%; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.hero-slide{ flex:0 0 33.3333%; width:33.3333%; padding-right:40px; box-sizing:border-box; opacity:0; transform:translateY(8px); transition:opacity .5s,transform .5s; }
.hero-slide.is-active{ opacity:1; transform:none; }
.hero-dots{ display:flex; gap:10px; margin-top:24px; }
.hero-dot{ width:10px; height:10px; border:0; border-radius:50%; background:#cbd5e1; cursor:pointer; transition:background .2s,transform .2s; }
.hero-dot.is-active{ background:var(--red); transform:scale(1.15); }

/* 轮播移动端适配
   根因：300% 轨道 = 3 帧横排。单帧在窄视口下宽度不足（= 视口宽 - 32px 再减去 40px 右内边距），
   且 iOS/部分安卓会因视口动画触发瞬时横向溢出，撑高滚动宽度 → 出现横向滚动条，
   同时后续帧被推到视口外，JS 尚未接管首屏时表现为右侧一整块空白。
   处理：窄屏收掉帧右内边距，并锁死横向溢出，让横向滚动条彻底不出现。 */
@media (max-width:760px){
  .hero-slide{ padding-right:0; }
}
/* 锁死横向溢出。⚠️ 必须用 clip，不能写 hidden：
   给 html 设 overflow-x:hidden 会按 CSS 规范把它的 overflow-y 计算成 auto（body 同理，实测两者都变成 auto），
   html 就变成滚动容器、body 的溢出不再向视口传播，滚动语义与 sticky 的参照都会跟着变。
   overflow-x:clip 只做裁剪、不创建滚动容器，也不会触发上述计算值转换。 */
html, body{ overflow-x:clip; }

/* 右侧配图随帧切换 */
.proof-view{ display:none; }
.proof-view.is-active{ display:block; animation: proveUp .5s cubic-bezier(.2,.7,.2,1); }
@keyframes proveUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
/* 三条说明文案互斥，同一时刻只显示当前帧对应的一条。
   ⚠️ 陷阱：变体元素身上**也带基础类**（GEO 款同时挂着 .proof-caption 和 .proof-caption--geo），
   所以「显示基础款」这一条必须用专属的 --base 类收口，不能只判断祖先状态
   —— 若写成「祖先不含 is-geo/is-sla 时让 .proof-caption 显示」，会把同一祖先下
   全部 .proof-caption（含两个变体）一起命中，导致三块同时显示。
   优先级：基础款 (0,4,0) > 变体款 (0,3,0) > 兜底隐藏 (0,1,0)。
   注：注释里不要写带引号的 class 字面量，否则会被后续扫描脚本误当成真实元素。 */
.proof-caption{ display:none; }
.hero-proof:not(.is-geo):not(.is-sla) .proof-caption--base{ display:block; }
.hero-proof.is-geo .proof-caption--geo{ display:block; }
.hero-proof.is-sla .proof-caption--sla{ display:block; }
/* GEO 帧：中心 hub 换为蓝调强调，与维护帧的红调区分 */
.geo-map .hub rect{ stroke:#2f6ea3; }
.geo-map .hub-st{ fill:#0b2642; }
.geo-map .node .n-idx{ fill:#2f6ea3; }

/* ---------- 第二帧：AI 时代 / 官网信源 ---------- */
/* 第二帧 H1 同为长句（「让官网成为 AI / 优先引用的信源」），
   若沿用 styles.css 的 .hero h1 字号会两行撑高轨道、挤到下方文案。
   与第三帧同理：收紧字号 + 归正字距（styles.css 的 -.045em 是给 8 字短标题调的）。 */
.hero-slider .hero-slide h1#hero-geo-h1{
  font-size:clamp(28px, 3.4vw, 42px);
  line-height:1.24;
  letter-spacing:0;
  word-break:keep-all;
}
.hero-slider .hero-slide h1#hero-geo-h1 em{ letter-spacing:0; }
.hero-slider .hero-slide h1#hero-geo-h1 em:after{
  width:100%; height:3px; bottom:-6px;
}

/* ---------- 第三帧：响应时效 / 长期合作 ---------- */
/* 第三帧 H1：字号 / 行高与第二帧完全一致（clamp 上限同为 42px、行高 1.24），
   两帧句子长度接近，统一后轮播切换时标题尺寸不再跳变。
   与第二帧同理：不沿用 .hero h1 的 66px —— 那句是给 8 字短标题调的，
   用在这句 18 字长句上会折成三行、把首屏撑高。 */
.hero-slider .hero-slide h1#hero-sla-h1{
  font-size:clamp(28px, 3.4vw, 42px);
  line-height:1.24;
  letter-spacing:0;
  word-break:keep-all;
}
.hero-slider .hero-slide h1#hero-sla-h1 em{
  letter-spacing:0;
}
/* em 下的红橙下划线是给 1-2 字短强调用的固定 82px，长句上会横穿文字，此处改为跟着文字宽度 */
.hero-slider .hero-slide h1#hero-sla-h1 em:after{
  width:100%; height:3px; bottom:-6px;
}

/* 左：三条时效读数，横排，用竖分隔线与数字强调 */
.hero-sla{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0; margin:0 0 24px; padding:18px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.sla-item{ display:flex; flex-direction:column; gap:5px; padding:0 18px; border-left:1px solid var(--line); }
.sla-item:first-child{ padding-left:0; border-left:0; }
.sla-item b{
  display:inline-flex; align-items:baseline; gap:2px;
  font-family:var(--serif); font-size:38px; font-weight:800; line-height:1;
  color:var(--red); letter-spacing:-.01em;
}
.sla-item b i{ font-style:normal; font-size:14px; font-weight:700; color:var(--muted); }
.sla-item span{ font-size:13px; color:var(--muted); line-height:1.5; }
.hero-sla .sla-item:nth-child(2) b{ color:var(--navy-900); }

/* 右：SLA 图 —— 读数卡 + 响应曲线 + 年份刻度 */
.sla-map .sla-read rect{
  fill:#fff; stroke:rgba(0,41,100,.16); stroke-width:1.5;
  filter:drop-shadow(0 6px 16px rgba(7,26,44,.08));
}
.sla-map .sla-read .sla-k{ font-size:12px; font-weight:700; fill:#5c6672; letter-spacing:.04em; }
.sla-map .sla-read .sla-v{ font-size:34px; font-weight:800; fill:#cf1c32; letter-spacing:-.01em; }
.sla-map .sla-read .sla-u{ font-size:14px; font-weight:700; fill:#5c6672; }
.sla-map .sla-area{ fill:url(#slafill); }
.sla-map .sla-curve{ fill:none; stroke:#cf1c32; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.sla-map .sla-dot{ fill:#fff; stroke:#cf1c32; stroke-width:2.4; }
.sla-map .sla-guide{ stroke:rgba(0,41,100,.16); stroke-width:1; stroke-dasharray:3 4; }
.sla-map .sla-x{ font-size:11.5px; font-weight:700; fill:#5c6672; }
.sla-map .sla-bracket{ stroke:#36c46a; stroke-width:2; stroke-linecap:round; }
.sla-map .sla-btag{ font-size:11.5px; font-weight:800; fill:#2f8f4e; }
.sla-map .sla-yk{ font-size:12px; font-weight:700; fill:#5c6672; }
.sla-map .sla-years .ybar{ fill:rgba(0,41,100,.12); }
.sla-map .sla-years .ybar.is-on{ fill:#cf1c32; }
.sla-map .sla-yv{ font-size:15px; font-weight:800; fill:#cf1c32; }
.sla-map .sla-ynote{ font-size:11.5px; fill:#5c6672; }
/* 曲线绘制动画：进入时从左向右生长 */
.hero-proof.is-sla .sla-curve{
  stroke-dasharray:620; stroke-dashoffset:620;
  animation:slaDraw 1.1s cubic-bezier(.2,.7,.2,1) .15s forwards;
}
@keyframes slaDraw{ to{ stroke-dashoffset:0; } }
.hero-proof.is-sla .sla-dot{ animation:slaDot .4s ease backwards; }
.hero-proof.is-sla .sla-dot:nth-of-type(1){ animation-delay:.5s; }
.hero-proof.is-sla .sla-dot:nth-of-type(2){ animation-delay:.65s; }
.hero-proof.is-sla .sla-dot:nth-of-type(3){ animation-delay:.8s; }
.hero-proof.is-sla .sla-dot:nth-of-type(4){ animation-delay:.95s; }
@keyframes slaDot{ from{ opacity:0; transform:scale(.4); transform-box:fill-box; transform-origin:center; } }
@media (max-width:760px){
  .hero-sla{ grid-template-columns:1fr; gap:14px; padding:16px 0; }
  .sla-item{ padding:0; border-left:0; }
  .sla-item b{ font-size:30px; }
}
@media (prefers-reduced-motion:reduce){
  .hero-proof.is-sla .sla-curve{ animation:none; stroke-dashoffset:0; }
  .hero-proof.is-sla .sla-dot{ animation:none; }
}

/* 首屏文案载入错峰上浮（作用于当前激活帧） */
.hero-slide.is-active>*{ opacity:0; transform:translateY(14px);
  animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-slide.is-active .eyebrow{ animation-delay:.05s; }
.hero-slide.is-active h1{ animation-delay:.12s; }
.hero-slide.is-active .hero-problem{ animation-delay:.2s; }
.hero-slide.is-active .hero-answer{ animation-delay:.28s; }
.hero-slide.is-active .hero-actions{ animation-delay:.36s; }
.hero-slide.is-active .microcopy{ animation-delay:.44s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* 尊重减弱动效偏好（首页特有：脉冲环、流动光点、刻度环与首屏错峰） */
@media (prefers-reduced-motion: reduce){
  .system-map .pulse{ animation:none!important; opacity:0!important; }
  .system-map .spark{ display:none!important; }
  .system-map .ring{ animation:none!important; }
  .hero-slide.is-active>*{ opacity:1!important; transform:none!important; animation:none!important; }
}

/* ---------- D. 联系区（inquiry）：左右等高双玻璃面板 ---------- */
/* 左：二维码 + 微信 + 电话联系卡；右：留言表单。两卡等高，消除左右失衡 */
.inquiry{
  background:
    radial-gradient(ellipse 140% 120% at 10% 10%, rgba(49,110,163,.28) 0%, transparent 55%),
    radial-gradient(ellipse 120% 100% at 90% 90%, rgba(207,28,50,.18) 0%, transparent 50%),
    linear-gradient(135deg,#0a1628 0%,#0f2242 50%,#142038 100%);
}
.inquiry-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  align-items:stretch;            /* 两卡等高，解决左右高低不齐 */
}
.inquiry-panel{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  padding:34px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 28px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
}

/* 左：联系卡（二维码 + 微信 + 电话） */
.inquiry-contact{
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:14px;
}
.inquiry-contact .eyebrow{ color:#fbbf24; }
.panel-title{ font-size:34px; line-height:1.2; margin:0; color:#fff; }
.panel-lead{
  font-size:15px; color:rgba(255,255,255,.78); line-height:1.7;
  margin:0; max-width:30ch;
}
.contact-qr{
  margin:6px 0 2px; border-radius:16px; overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.22);
}
.contact-qr img{
  width:180px; height:auto; display:block;
}
.wechat-id{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:999px; margin:0;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  font-size:13px; color:#4ade80; font-weight:600;
}
.wechat-id::before{
  content:""; width:7px; height:7px; border-radius:50%; background:#4ade80;
  box-shadow:0 0 8px rgba(74,222,128,.55);
}
.card-phone{
  display:block; font-size:30px; font-weight:800; color:#fbbf24;
  letter-spacing:.02em; text-decoration:none; margin:2px 0 0; transition:color .2s;
}
.card-phone:hover{ color:#fde68a; }
.card-meta{ font-size:13px; color:rgba(255,255,255,.65); margin:0; }

/* 右：留言表单 */
.inquiry-form-wrap{ display:flex; flex-direction:column; }
.form-title{ font-size:24px; font-weight:800; color:#fff; margin:0 0 6px; }
.form-sub{ font-size:14px; color:rgba(255,255,255,.72); line-height:1.6; margin:0 0 20px; }
.inquiry .message-form{
  display:flex; flex-direction:column; gap:12px;
  padding:0; background:transparent; color:#fff;
}
.inquiry .message-form label{
  display:block;
  color:rgba(255,255,255,.92); font-size:14.5px; font-weight:700; letter-spacing:.02em;
}
.inquiry .message-form label em{ color:#ff6b7a; font-weight:800; }
.inquiry .message-form input,
.inquiry .message-form textarea{
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  border-radius:10px; color:#fff; padding:11px 13px; font-size:14px; font-family:inherit;
}
.inquiry .message-form textarea{ resize:vertical; min-height:96px; }
.inquiry .message-form input::placeholder,
.inquiry .message-form textarea::placeholder{ color:rgba(255,255,255,.45); }
.inquiry .message-form input:focus,
.inquiry .message-form textarea:focus{
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4);
  outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.10);
}
.submit-button{
  position:relative;
  border:0; border-radius:10px; cursor:pointer; min-height:50px; margin-top:2px;
  background:linear-gradient(90deg,var(--red) 0%,var(--red-dark,#ae1428) 100%);
  color:#fff; font-size:15px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 10px 26px rgba(207,28,50,.35);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.submit-button:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(207,28,50,.5);
  filter:brightness(1.06);
}
.submit-button:active{
  transform:translateY(0);
  box-shadow:0 8px 20px rgba(207,28,50,.4);
}
/* 右端箭头块：在红渐变上压一层半透明深色，箭头更突出；hover 时箭头右移给出点击暗示 */
.submit-button b{
  display:grid; place-items:center; align-self:stretch; width:58px;
  background:rgba(0,0,0,.18); font-size:20px;
  border-radius:0 10px 10px 0;
  transition:transform .18s ease;
}
.submit-button:hover b{ transform:translateX(4px); }
@media (prefers-reduced-motion:reduce){
  .submit-button,.submit-button b{ transition:none; }
  .submit-button:hover{ transform:none; }
  .submit-button:hover b{ transform:none; }
}
.form-status{ font-size:13px; margin:2px 0 0; min-height:18px; }
.form-status.is-success{ color:#4ade80; }
.form-status.is-error{ color:#ff6b7a; }
.privacy{ color:rgba(255,255,255,.5); margin:4px 0 0; font-size:11px; line-height:1.5; }

/* 移动端：双卡堆叠、表单全宽 */
@media (max-width:760px){
  .inquiry-grid{ grid-template-columns:1fr; gap:18px; }
  .panel-title{ font-size:26px; }
  .inquiry-panel{ padding:26px; }
}


/* ============================================================
   E. 批注反馈优化（2026-08-14）
   ------------------------------------------------------------
   针对用户在原型上的 4 条批注做定向精修。全部为覆盖式，
   不改动 styles.css 原布局；删除本层即还原。
   ============================================================ */

/* 1) 首屏关系图面板：浅蓝质感 + 蓝图网格点阵 + 顶部高光，科技精致 */
.proof-window{
  background-color:#f4f8fc;
  background-image: radial-gradient(rgba(0,41,100,.05) 1px, transparent 1px);
  background-size:20px 20px; background-position:0 0;
  border:1px solid rgba(0,41,100,.18);
  box-shadow:0 26px 64px rgba(7,26,44,.14), inset 0 1px 0 rgba(255,255,255,.7);
}
.proof-window .window-top{
  background:#eef3f8; border-bottom:1px solid rgba(0,41,100,.1);
  position:relative;
}
.proof-window .window-top b{ color:#475569; }
/* 窗头“实时监控”绿呼吸点 */
.window-top .live{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; color:#2f8f4e; letter-spacing:.02em;
}
.window-top .live i{
  width:7px; height:7px; border-radius:50%; background:#36c46a;
  box-shadow:0 0 0 0 rgba(54,196,106,.55); animation:beat 2s ease-out infinite;
}
@keyframes beat{
  0%{ box-shadow:0 0 0 0 rgba(54,196,106,.55); }
  70%{ box-shadow:0 0 0 6px rgba(54,196,106,0); }
  100%{ box-shadow:0 0 0 0 rgba(54,196,106,0); }
}

/* 2) 信任带 fact-bar：由“仅上边框”改为浅色圆角卡片，数字放大加分隔 */
.fact-bar{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 18px 50px rgba(7,26,44,.08);
  overflow:hidden;
}
.fact-bar div{ padding:22px 20px; border-left:1px solid var(--line); }
.fact-bar div:first-child{ border-left:0; }
.fact-bar div:last-child{ border-left:1px solid var(--line); } /* 抵消原 :last-child{border:0} */
.fact-bar b{ font-size:30px; line-height:1.1; color:var(--navy); }
.fact-bar span{ display:block; margin-top:6px; color:var(--muted); font-size:13px; }

/* 3) 服务对象特色卡：修正 h3/b 在深底上被全局标题色压成近黑（可见性 bug） */
.type-feature h3{ color:#fff; }
.type-feature b{ color:#fff; }
.type-feature{ border:1px solid rgba(255,255,255,.08); }

/* 4) 页脚 logo 去白底卡：深色 footer 上不要白底卡片 */
.footer-logo-wrap{ background:transparent; padding:0; border-radius:0; }
.footer-logo{ background:transparent; }

/* 6) 服务清单行内 CTA：裸链接不明显 → 统一为 action-link 文字 CTA（红下划线+加粗+箭头位移），
      与 .price-link / .submit-button 红色体系协调，又不抢「主服务卡」的视觉 */
.service-rows article a{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:14px; padding:0 2px 7px;
  color:var(--navy); font-weight:800; font-size:15.5px; letter-spacing:.02em;
  border-bottom:2px solid var(--red); border-radius:0;
  transition:gap .22s ease, color .22s ease, transform .22s ease;
}
.service-rows article a:hover{ gap:13px; color:var(--red); transform:translateX(2px); }

/* 7) 价格区标签字号偏小 → 放大标签，拉开与正文层级（h2 维持 42px 不动） */
.price-label{ font-size:16px; padding:8px 15px; letter-spacing:.12em; }
.price h2{ font-size:44px; }

/* 8) 全板块标题层级统一： eyebrow 比正文还小 / 深色区标题颜色“消失” / 深色区正文太抢眼 */
/* 8a) 小标签存在感：比正文略大或同级，用红色+短横制造章节入口感 */
.eyebrow{ font-size:15.5px; letter-spacing:.12em; margin-bottom:18px; padding-left:38px; }
.eyebrow:before{ width:26px; }

/* 8b) 板块主标题整体放大，和正文拉开距离（首页各 section-heading h2 统一） */
.section-heading h2,
.tech-band h2,
.price h2,
.advantages h2,
.process h2,
.knowledge h2,
.faq h2,
.cases h2{ font-size:clamp(30px, 4vw, 46px); line-height:1.2; }

/* 8c) 深色板块标题强制变白，避免继承 navy-950 导致“消失”
   注意：.price 背景是白色，h2 必须保持深色；只列真正的深色板块 */
.tech-band h2,
.inquiry h2,
.article-feature h3,
.type-feature h3{ color:#fff; }

/* 8d) 深色板块正文降透明度，让它退到标题后面 */
.tech-band p,
.article-feature p,
.inquiry .panel-lead,
.inquiry .card-meta{ color:rgba(255,255,255,.78); }

/* ===== 正式稿升级层（official.css） =====
   导航弹出 / 吸顶收缩 / scrollspy 高亮 / 首屏精致
   说明：原型里移动端菜单是 display 瞬切、汉堡不变 X；这里改为真正的滑入动画，
        桌面端补吸顶收缩与当前区块高亮，让“导航弹出效果”成立且更显专业。 */

/* A) 桌面导航：滚动吸顶时轻微收缩 + 加深阴影，强化“固定可靠”的高端感

   ⚠️ 收缩让出的高度必须用 margin-bottom 等量补回（nav-shell 少 16px，margin-bottom 就补 16px）。
   原因：.site-header 是 position:sticky，它**仍然占据文档流**。把 nav-shell 由 84px 压到 68px，
   header 就让出了 16px，于是【下方全部内容整体上移 16px】。探针实测（切 .scrolled 前后对比）：
   .hero 绝对 Y 118→102、.hero-copy 214→198、.fact-bar 832→816、下一区块 2480→2464，
   文档总高 9788→9772，**全部 -16px**。这个位移在 250ms 内连续发生，
   在滚动阈值附近微调滚轮就会反复跳上跳下 —— 用户报的「页面在颤抖」就是它。
   补上 margin-bottom 后视觉照样变薄 16px，但文档流占位恒定，页面不再位移。
   改动纪律：两处数值必须同步 —— nav-shell 的高度差是多少，margin-bottom 就是多少。 */
.site-header{ transition:margin-bottom .25s ease; }
.site-header.scrolled{ box-shadow:0 6px 24px rgba(7,26,44,.12); margin-bottom:16px; }
.site-header.scrolled .nav-shell{ height:68px; transition:height .25s ease; }
.site-header.scrolled .logo{ height:58px; }
.site-header.scrolled .logo img{ width:162px; transition:width .25s ease; }
.site-header.scrolled .main-nav .nav-top-link{ padding:22px 0; }
.site-header .nav-shell,
.site-header .logo,
.site-header .main-nav .nav-top-link{ transition:height .25s ease, width .25s ease, padding .25s ease; }

/* A2) 吸顶收缩会改变导航项位置，若此时下拉正展开，面板会跟着跳位并可能丢失 hover。
     让展开中的下拉在滚动收缩瞬间保持稳定：过渡期间不参与位移抖动。 */
.site-header.scrolled .nav-item.is-open > .dropdown,
.site-header.scrolled .nav-item:hover > .dropdown{
  transform:translateX(-50%) translateY(0);
}
.site-header.scrolled .nav-item.is-open > .dropdown--multi,
.site-header.scrolled .nav-item:hover > .dropdown--multi{
  transform:translateX(0) translateY(0);
}

/* B) 桌面导航：scrollspy 当前区块高亮（明确“我在哪个板块”） */
.main-nav .nav-top-link.active{ color:var(--red); }
.main-nav .nav-top-link.active:after{ right:0; }

/* B2) 完整导航（12 项）紧凑化，避免桌面溢出；≤1200px 切汉堡 */
.main-nav{ gap:18px; font-size:14px; }
.main-nav .nav-top-link{ padding:26px 0; }
.site-header.scrolled .main-nav .nav-top-link{ padding:21px 0; }

/* ---------- 服务区：支持维护的网站类型 ---------- */
.svc-types{ margin-top:44px; padding-top:36px; border-top:1px solid var(--line); }
.svc-types-head{ margin-bottom:22px; }
.svc-types-head .eyebrow{ margin-bottom:12px; }
.svc-types-head h3{ font-size:clamp(20px,2.4vw,26px); color:var(--navy-950); margin:0; line-height:1.35; }
.svc-types-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;
}
.svc-types-list li{
  display:flex; flex-direction:column; gap:6px;
  padding:18px 20px; background:var(--white);
  border:1px solid var(--line); border-left:3px solid var(--red);
  border-radius:var(--radius);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.svc-types-list li:hover{ transform:translateY(-3px); box-shadow:0 16px 38px rgba(7,26,44,.08); border-color:rgba(0,41,100,.2); }
.svc-types-list b{ font-size:15.5px; color:var(--navy-950); line-height:1.4; }
.svc-types-list span{ font-size:13.5px; color:var(--muted); line-height:1.6; }
@media (max-width:1100px){ .svc-types-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px){ .svc-types-list{ grid-template-columns:1fr; } }

/* ---------- 服务区：AI 智能体开发与维护行（强调，与常规行区分） ---------- */
#ai-agent{
  position:relative; background:linear-gradient(100deg, rgba(233,94,58,.05), rgba(0,41,100,.03));
  border-radius:var(--radius); border-bottom-color:transparent !important;
  margin-top:6px;
}
#ai-agent > span{ color:var(--orange) !important; }
/* 2026-09-14 移除标题右侧的「AI」胶囊徽章：卡片标题本身已是「AI 智能体开发与维护」，
   再加徽章会让「AI」在一行里出现两次。行强调改由底色渐变 + 序号变橙承担，不要加回来。 */

/* C) ≤1200px 导航折叠为汉堡。面板本身的规则集中放在文件后面
   「导航折叠态（≤1200px）」那一段 —— 那里在所有桌面下拉定义之后，
   否则 .dropdown{position:absolute} 之类的后置规则会把折叠态覆盖回去。
   ⚠️ 折叠断点必须三处一致：这里 1200px、styles.css 里 .menu-button / .main-nav
      的移动端规则、以及 official.js 里 isDesktopNav() 的 (min-width:1201px)。
   历史故障：本文件曾同时存在「≤760px 的汉堡规则」和「≤1200px 的切换态规则」，
      两者断点不一致 —— 761–1200px 这一档里 .main-nav 仍是桌面横排（被 8 项导航
      撑爆，导航项互相重叠、立即咨询被挤出屏幕），而汉堡按钮又只在 ≤760px 出现，
      整档没有任何入口。实测 1024px：导航项重叠、CTA 消失。 */
@media (max-width:1200px){
  .menu-button{
    position:relative; z-index:101;
    display:flex; margin-left:auto;
    width:44px; height:44px; padding:9px;
    flex-direction:column; justify-content:center; gap:4px;
    border:0; background:transparent;
  }
  .menu-button span{ display:block; height:2px; background:var(--navy); }
  .menu-button b{ position:absolute; width:1px; height:1px; overflow:hidden; }
  .menu-button span{ transition:transform .25s ease, opacity .2s ease; }
  .menu-button.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .menu-button.open span:nth-child(2){ opacity:0; }
  .menu-button.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
}
@media (prefers-reduced-motion:reduce){
  .menu-button span{ transition:none; }
  .main-nav{ transition:none; }
  .site-header .nav-shell,
  .site-header .logo,
  .site-header .logo img,
  .site-header .main-nav a{ transition:none; }
}

/* ---------- 主导航二级下拉菜单 ---------- */
/* 限制下划线、active 与 padding 只作用于一级链接，避免污染下拉项 */
.main-nav .nav-item{ position:relative; display:flex; align-items:center; }
.main-nav .nav-top-link{
  position:relative; padding:26px 0; display:inline-flex; align-items:center;
  color:inherit; text-decoration:none;
}
.main-nav .nav-top-link:after{
  content:""; position:absolute; left:0; right:100%; bottom:18px; height:2px;
  background:var(--red); transition:var(--dur);
}
.main-nav .nav-top-link:hover:after,
.main-nav .nav-top-link.active:after{ right:0; }
.main-nav .nav-top-link.active{ color:var(--red); }

/* 下拉切换按钮（桌面端显示小箭头，移动端放大为右侧开关） */
.dropdown-toggle{
  display:inline-grid; place-items:center; width:22px; height:22px;
  margin-left:2px; border:0; background:transparent; cursor:pointer;
}
.dropdown-toggle::after{
  content:""; width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid var(--navy-800); transition:transform .2s;
}
.nav-item.is-open > .dropdown-toggle::after,
.nav-item:hover > .dropdown-toggle::after{ transform:rotate(180deg); }

/* 下拉面板：桌面端居中弹出 */
.dropdown{
  position:absolute; top:100%; left:50%;
  margin-top:10px;                 /* 用 margin 代替 top 偏移，使面板与触发项之间保留可悬停区 */
  transform:translateX(-50%) translateY(-8px);
  min-width:220px; width:max-content; max-width:min(520px, 94vw); padding:10px;
  max-height:calc(100vh - 120px); overflow-y:auto;
  background:#fff; border:1px solid rgba(0,41,100,.1); border-radius:16px;
  box-shadow:0 30px 70px rgba(7,26,44,.18), 0 2px 8px rgba(7,26,44,.06);
  list-style:none; margin:10px 0 0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
  z-index:101;
}
/* 桥接区：面板顶部到触发项之间的 10px 空隙补上透明热区，
   鼠标从导航项下移进入面板时不会因为跨过空隙丢失 :hover 而收起菜单 */
.dropdown::after{
  content:""; position:absolute; left:0; right:0; top:-12px; height:12px;
  background:transparent;
}
/* 顶部渐变高光条，提升精致感 */
.dropdown::before{
  content:""; position:absolute; left:14px; right:14px; top:0; height:2px;
  background:linear-gradient(90deg,var(--red),var(--orange));
  border-radius:0 0 2px 2px;
}
/* 网站维护下拉：两列紧凑展示，避免单栏过长；左对齐避免过于靠左 */
.dropdown--multi{
  width:min(540px, calc(100vw - 32px)); left:0;
  transform:translateX(0) translateY(-8px);
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  column-gap:6px;
  padding:14px 12px 12px;
}
.dropdown--multi .dropdown-label{ grid-column:1 / -1; column-span:unset; }
.nav-item:hover > .dropdown--multi,
.nav-item:focus-within > .dropdown--multi,
.nav-item.is-open > .dropdown--multi{
  transform:translateX(0) translateY(0);
}
.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown,
.nav-item.is-open > .dropdown{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.dropdown li{ margin:0; break-inside:avoid; }
.dropdown a{
  position:relative;
  display:block; padding:10px 14px; font-size:14px; color:var(--navy-900);
  border-radius:9px;
  transition:color .18s, background .18s;
  line-height:1.45;
  white-space:nowrap;
}
/* 悬停：浅底 + 左侧红色短条 + 轻微右移，反馈更清晰 */
.dropdown a::before{
  content:""; position:absolute; left:4px; top:50%; transform:translateY(-50%) scaleY(0);
  width:3px; height:16px; border-radius:2px; background:var(--red);
  transition:transform .18s ease;
}
.dropdown--multi .dropdown-label{ grid-column:1 / -1; }
.dropdown a:hover{ color:var(--red); background:var(--navy-tint); }
.dropdown a:hover::before{ transform:translateY(-50%) scaleY(1); }
/* 移除 design-system.css 中下划线伪元素对下拉链接的影响 */
.main-nav .dropdown a:after{ content:none; }

/* 下拉分组小标题：左侧色条 + 更克制的字重 */
.dropdown-label{
  display:flex; align-items:center; gap:8px;
  padding:4px 14px 10px; font-size:12px; font-weight:800;
  color:var(--navy-800); letter-spacing:.08em;
  pointer-events:none; column-span:all;
}
.dropdown-label::before{
  content:""; width:3px; height:12px; border-radius:2px;
  background:linear-gradient(var(--red),var(--orange));
}
.dropdown-label ~ .dropdown-label{
  border-top:1px solid var(--line); margin-top:8px; padding-top:16px;
}

/* 桌面端吸顶收缩时同步调整 */
.site-header.scrolled .main-nav .nav-top-link{ padding:21px 0; }
.site-header.scrolled .main-nav .nav-top-link:after{ bottom:13px; }

/* ---------- 导航折叠态（≤1200px）----------
   全站导航折叠相关的规则只在这里写一份，位置必须在上面所有桌面下拉定义之后，
   否则 .dropdown{position:absolute} / .nav-item{display:flex} 这些后置规则
   会把折叠态覆盖回去（这正是 761–1200px 死区的成因之一）。
   面板用 top:100% 而不是写死 97px：761–1200px 档头部仍是 84px 高（没走手机端的
   紧凑压缩），写死 97px 会让面板插进头部里；top:100% 在两种头高下都自然贴底，
   吸顶收缩（nav-shell 84→68）时也自动跟着变。
   styles.css 里 ≤760px 的同名规则值与此一致，同值叠加不产生影响。 */
@media (max-width:1200px){
  /* 常驻显示但隐藏，靠 opacity/transform 过渡实现滑入（display:none 无法过渡）。
     ⚠️ 面板必须用单列块流，不能用 grid：grid 的行高由该行最高的单元格决定，
        一旦某个 nav-item 展开下拉，整行的兄弟项会被一起撑开 ——
        实测 1024px 下展开「网站维护」后，首页与网站接管被顶到几百像素之外。
        单列块流里展开只影响自身，行为可预期；面板自身给 max-height + 滚动兜底。 */
  .main-nav{
    display:block;
    position:absolute; top:100%; left:0; right:0; margin:0;
    padding:10px 16px 18px; background:#fff;
    box-shadow:0 16px 34px rgba(0,41,100,.14);
    max-height:calc(100vh - 108px); overflow-y:auto; overscroll-behavior:contain;
    visibility:hidden; opacity:0; transform:translateY(-12px);
    transition:opacity .26s ease, transform .26s ease, visibility .26s;
    pointer-events:none;
  }
  .main-nav.is-open{
    /* ★ display 必须在这里显式再写一次：styles.css 的 ≤760px 段里有
       `.main-nav.is-open{ display:grid }`（两列），与本规则特异性同为 (0,2,0)，
       靠文件顺序才分胜负。只在上面的 `.main-nav` 写 display:block 拦不住它 ——
       is-open 是 (0,2,0)，会盖掉 (0,1,0)。上面那条注释讲的「面板不能用 grid」
       在 ≤760px 档正是被它击穿的：两列 grid 的行高由最高单元格决定，
       手机端展开「网站维护」下拉后整行被撑高，其余导航项被顶到几百像素之外，
       表现就是「下拉区一片空白」。 */
    display:block;
    grid-template-columns:none;
    visibility:visible; opacity:1; transform:translateY(0);
    pointer-events:auto;
  }
  .main-nav a{ padding:12px 6px; }
  .main-nav a:after{ display:none; }

  /* 面板内：一级项纵向排列，下拉就地展开 */
  .main-nav .nav-item{ display:block; }
  .main-nav .nav-top-link{
    display:block; padding:14px 52px 14px 6px; border-bottom:1px solid var(--line);
  }
  .main-nav .nav-top-link:after{ content:none; }
  /* 吸顶收缩的桌面内边距在这档要作废，否则会盖掉上面的 14px */
  .site-header.scrolled .main-nav .nav-top-link{ padding:14px 52px 14px 6px; }

  .dropdown-toggle{
    position:absolute; right:0; top:4px; width:44px; height:44px;
    background:var(--soft); border-radius:6px; margin-left:0;
  }
  /* 下拉完全脱离布局，杜绝面板内容参与排版后溢出 */
  .dropdown,
  .dropdown--multi{
    position:static; transform:none; box-shadow:none; border:0; border-radius:0;
    background:var(--soft); max-width:none; min-width:auto; width:auto;
    padding:0; margin:0 0 8px;
    display:none;
    grid-template-columns:none;
    opacity:1; visibility:hidden;
  }
  .dropdown::before,
  .dropdown::after{ content:none; }
  /* 桌面端的 hover / focus-within 展开规则没有 media 包裹，在这一档仍会命中，
     但它带的是桌面定位（translateX(-50%)），落到 position:static 的面板上就是错位。
     这里把两种「非点击展开」压回隐藏；展开只认 .is-open（面板里由右侧开关控制）。
     必须写在本段 .is-open 规则之前 —— 两者特异性相同，靠先后定胜负。
     ⚠️ 这里的 opacity:0 曾经把真机上「已展开」的面板一起压透明了：真机点开关会
        同时命中 :hover（触屏粘滞）与 :focus-within（按钮被聚焦），而下面 .is-open
        那条当初漏声明 opacity → 「占了高度却看不见」。下面已补 opacity:1，
        改这里时务必保持两边属性对齐。 */
  .nav-item:hover > .dropdown,
  .nav-item:focus-within > .dropdown,
  .nav-item:hover > .dropdown--multi,
  .nav-item:focus-within > .dropdown--multi{
    opacity:0; visibility:hidden; pointer-events:none; transform:none;
  }
  .nav-item.is-open > .dropdown,
  .nav-item.is-open > .dropdown--multi{
    /* ★ opacity:1 不能省（2026-09-16 修，用户第二次报「手机端还是空白」）。
       上面那条中和规则写了 opacity:0，而这条规则原先只声明了
       display / visibility / pointer-events / transform —— 缺 opacity。
       级联结果：display:block、visibility:visible 都由这条赢下来，
       但 opacity 仍由上面那条拿走 0 → 面板**占了 640px 高度却整块透明**，
       表现就是「展开后一大片空白，其余导航项被顶到几百像素之外」。
       为什么无头测试看不出来：烘 is-open 类去测时，元素上既没有 :hover
       也没有 :focus-within，中和规则压根不命中，只有 A 状态（正常）。
       真机一定会命中 —— 手机点按钮会留下粘滞 :hover，按钮同时获得焦点
       命中 :focus-within；桌面用鼠标点也一样（按钮被聚焦）。
       教训：**「展开态」的规则必须把「隐藏态」声明过的每一个属性都重新声明一遍**，
       哪怕它看着不相关 —— 同特异性下靠先后定胜负，漏一个就被静默接管。
       参考同文件 .main-nav / .main-nav.is-open 的写法：那边 opacity 是成对写的。 */
    display:block; opacity:1; visibility:visible; pointer-events:auto;
    transform:none;
  }
  .dropdown li{ border-top:1px solid rgba(0,41,100,.06); }
  .dropdown li:first-child{ border-top:0; }
  .dropdown a{ padding:12px 18px; white-space:normal; color:var(--navy-900); }
  .dropdown-label{ padding:10px 18px 6px; }
}

/* 761–1200px（含平板与小笔记本）：
   主 CTA 要显式恢复 —— styles.css 的 ≤1100px 把它 display:none 掉了
   （当年为了给挤爆的桌面导航腾位置的权宜之计）。现在导航已收进汉堡，
   头部只剩 logo + CTA + 汉堡，放得下，不该再把主要转化入口藏起来。
   手机端（≤760px）仍隐藏，那里由底部固定快捷条承接。 */
@media (min-width:761px) and (max-width:1200px){
  .nav-cta{ display:inline-flex; }
}

/* D) 首屏 hero 精致化：更大留白、标题节奏、克制的 staged 入场动画 */
.hero{ padding:96px 0 56px; }
.hero-grid{ align-items:start; gap:56px; }
.hero-copy{ max-width:560px; }
.hero h1{
  font-size:clamp(40px, 5.6vw, 66px); line-height:1.1; letter-spacing:-.01em;
  margin:10px 0 22px; color:var(--navy-950);
}
.hero h1 em{ font-style:normal; color:var(--red); }
.hero-problem{ font-size:17px; color:var(--ink); margin:0 0 16px; }
.hero-answer{ font-size:15.5px; color:var(--muted); margin:0 0 26px; }
.hero-actions{ gap:20px; }
.hero-proof{ margin-top:8px; }

/* 首屏轮播高度：取三帧中最高的一帧撑开轨道。
   根因：.hero-slider 内三帧叠在同一轨道，auto 高度只按「当前帧」计算，
   切到内容更长的帧时容器高度已定，下方内容被顶开再回弹，表现为首屏抖动。
   当前最高帧是第 2 帧（AI 信源，正文约 300 字），高度按它预留。
   改动任一帧文案后需复核此值。 */
@media (min-width:761px){
  .hero-slider{ min-height:500px; }
}
@media (max-width:760px){
  .hero-slider{ min-height:600px; }
}

/* 手机端首屏「帧内空档」修复（2026-09-15）。
   现象：390 真机宽下第 1 帧在 microcopy 与轮播圆点之间空出一大条（截图圈出的
   「间隔太大」）。实测三帧自然内容高 502 / 588 / 596，被 flex 拉伸到同一高度
   609，多出来的高度原本**全部堆在帧底**：第 1 帧空 107px、第 2 帧空 21、第 3 帧空 13
   —— 所以只有停在第 1 帧时特别明显。
   为什么不压内容：空档 = 最高帧 − 本帧，而最高的是第 2 帧（588，两段长正文撑起来的，
   4 行 + 5 行）。成比例收紧字号/行高只按行数获益，第 2 帧掉得比第 1 帧多不了多少，
   实测最多把差值从 86 缩到 ~71；压第 3 帧的时效读数条更是无效 —— 第 2 帧会立刻接管预留高度。
   为什么不逐帧高度：那样切帧（含 6 秒自动翻页）会顶开下方内容，正是 min-height 要避免的抖动。
   做法：帧改成 flex 纵向 + space-between，把多余高度匀进帧内各段间距 ——
   容器高度仍恒定，空洞消失，第 1 帧的 eyebrow 与 microcopy 仍贴住盒子上下沿，
   切帧时只有中间段落有轻微位移。
   ⚠️ flex 子项之间外边距不再合并，帧高比原来 +10px（eyebrow 的 mb 18 与 h1 的 mt 10
      由合并取 18 变成相加 28）；三帧同步 +10，不影响预留关系。 */
@media (max-width:760px){
  .hero-slide{ display:flex; flex-direction:column; justify-content:space-between; }
}

/* 首屏文案 staged 入场（克制、专业，不喧宾夺主） */
@media (min-width:1101px){
  .hero-copy > *{ opacity:0; transform:translateY(16px); animation:heroUp .7s ease forwards; }
  .hero-copy > *:nth-child(1){ animation-delay:.05s; }
  .hero-copy > *:nth-child(2){ animation-delay:.13s; }
  .hero-copy > *:nth-child(3){ animation-delay:.21s; }
  .hero-copy > *:nth-child(4){ animation-delay:.29s; }
  .hero-copy > *:nth-child(5){ animation-delay:.37s; }
  .hero-copy > *:nth-child(6){ animation-delay:.45s; }
  .hero-proof{ opacity:0; transform:translateY(20px); animation:heroUp .8s ease .25s forwards; }
}
@keyframes heroUp{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .hero-copy > *, .hero-proof{ opacity:1; transform:none; animation:none; }
}

/* ---------- E) 全站咨询弹窗（CTA → 就地提交，不离开当前页面）----------
   背景：参考站（weprofab）把报价表单做成常驻/弹窗，访客不必先翻到页面底部
   才能留下信息。这里把全站所有指向 #inquiry 的 CTA 统一接管为原生 <dialog>。
   为什么用 <dialog> 而不是自绘遮罩：showModal() 自带焦点囚禁、ESC 关闭、
   ::backdrop 与 inert 背景，自绘这三样都容易漏（尤其焦点囚禁，键盘用户会
   跑到弹窗背后的页面里）。
   无 JS 兜底：CTA 仍是 <a href="#inquiry">，照常跳到页面底部的询价区块。
   ⚠️ 弹窗表单与页面底部 #inquiry-form 是同一套字段与同一套提交反馈，
      改动其一时必须同步另一处（script.js 与 official.js 各有一份提交处理）。 */
.cta-dialog{
  width:min(94vw,520px); max-height:calc(100vh - 40px);
  padding:32px 32px 26px; border:0; border-radius:14px;
  color:var(--ink); text-align:left; overflow-y:auto;
  box-shadow:0 30px 80px var(--navy-overlay);
}
.cta-dialog::backdrop{ background:var(--navy-overlay); backdrop-filter:blur(4px); }
.cta-dialog[open]{ animation:ctaDialogIn .24s ease; }
@keyframes ctaDialogIn{
  from{ opacity:0; transform:translateY(14px) scale(.985); }
  to{ opacity:1; transform:none; }
}
.cta-dialog .eyebrow{ margin:0 0 10px; }
.cta-dialog h2{
  margin:0 0 10px; color:var(--navy-950);
  font-size:clamp(22px,3.2vw,27px); line-height:1.34; letter-spacing:-.01em;
}
.cta-dialog-lead{ margin:0 0 22px; color:var(--muted); font-size:14.5px; line-height:1.7; }
.cta-form{ display:flex; flex-direction:column; gap:11px; }
.cta-form label{ font-size:14.5px; font-weight:700; color:var(--navy-950); }
.cta-form label em{ color:var(--red); font-style:normal; font-weight:800; }
.cta-form input,
.cta-form textarea{
  width:100%; padding:11px 13px; font:inherit; font-size:14px;
  border:1px solid #cbd3db; border-radius:10px; background:#fcfdfe; color:var(--ink);
}
.cta-form textarea{ resize:vertical; min-height:84px; }
.cta-form input::placeholder,
.cta-form textarea::placeholder{ color:#9aa4ae; }
.cta-form input:focus,
.cta-form textarea:focus{
  outline:none; border-color:var(--navy); background:#fff;
  box-shadow:0 0 0 3px rgba(0,41,100,.12);
}
/* 浅底弹窗里 .submit-button / .form-status / .privacy 要换回深色文字 */
.cta-form .submit-button{ margin-top:8px; }
.cta-form .form-status{ color:var(--muted); font-size:13px; }
.cta-form .form-status.is-success{ color:var(--ok); }
.cta-form .form-status.is-error{ color:var(--red); }
.cta-form .privacy{ color:#8894a0; }
.cta-dialog-alt{
  margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line);
  font-size:13px; color:var(--muted); line-height:1.7;
}
.cta-dialog-alt a{ color:var(--navy); font-weight:800; }
.cta-dialog-alt b{ color:var(--navy-950); font-weight:800; }
@media (max-width:560px){
  .cta-dialog{ padding:24px 20px 20px; border-radius:12px; }
  .cta-dialog h2{ font-size:21px; }
}
@media (prefers-reduced-motion:reduce){
  .cta-dialog[open]{ animation:none; }
}