/* =============================================================================
   fde.css — 奥哲 FDE 页（/FDE）样式

   来源：`FDE页面样式说明书.md` v2.0 的全局规则 + 7 个版面结构说明。
   颜色全部取自说明书的「全局规则」表，未自创。

   尺寸标注（如 1322 / 560 / 421）取自 `FDE-转曲.ai` 1920 宽设计稿的实测像素，
   容器统一按 1322px（设计稿内容区 x 298–1620）换算。
   ============================================================================= */

/* 本页 layout:false，不经过站内全局样式；浏览器默认 body 外边距会让整页下沉 8px */
body { margin: 0; }

/* ── 设计令牌 ───────────────────────────────────────────────────────────── */
.fde-page {
  /* 主色 / 品牌色 */
  --fde-deep: #101848;
  --fde-blue: #17a1ff;
  --fde-black: #0b0c0e;

  /* 辅助色（紫 / 绿 / 青 / 浅蓝） */
  --fde-purple: #bb7bf7;
  --fde-green: #50d099;
  --fde-cyan: #9de3eb;
  --fde-lightblue: #a6d9fd;

  /* 中性色 */
  --fde-card: #ffffff;
  --fde-section-bg: #f9f9f9;
  --fde-text: #5a5a66;
  --fde-heading: #101848;

  /* 内容区宽度：设计稿 x 298–1620 */
  --fde-container: 1322px;

  /* 渐变高亮文字：#A1DCFF → #BB7BF7，90deg */
  --fde-gradient-text: linear-gradient(90deg, #a1dcff 0%, #bb7bf7 100%);

  /* 展示字体栈：与站内基线一致（PingFang SC） */
  font-family: "PingFang SC", BlinkMacSystemFont, "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--fde-heading);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

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

.fde-page img { max-width: 100%; display: block; }

/* 页面级唯一 H1 视觉隐藏（SEO / 无障碍可读） */
.fde-page .fde-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── 全局：渐变高亮文字 + 呼吸动效 ─────────────────────────────────────── */
/* 渐变文字用 background-clip:text；呼吸靠 background-position 左右往返（4s ease-in-out 无限）。
   两套色板：
     · 深色背景（首屏第二行）用浅蓝 → 浅紫，深色底上才看得清；
     · 白色背景（各版面标题的 span）照搬产品页标题那套蓝紫渐变，
       写法与 .capabilityLoop .clHead .title span 完全一致。 */
.fde-grad-text {
  background-image: var(--fde-gradient-text);
  background-size: 200% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fde-grad-breathe 4s ease-in-out infinite;
}

/* 白底章节标题的字：逐字照抄 /solution/MultiScenario_Agent/ 的 span 规则
   （solution4.css .aiApplication .aiApplicationTitle .title span）——
   径向渐变从左上角扫到 70% 处过渡为 currentColor（即标题深色），
   所以 span 末尾的字会被底色完全浸染、没有生硬边界。
   注意必须 color: inherit：基类 .fde-grad-text 的 color:transparent
   会让 currentColor 解析成透明、尾巴消失。呼吸用参考页的 aiAppBreath（5s）。 */
.fde-section-title .fde-grad-text {
  background-image: -webkit-radial-gradient(0% 0%, circle farthest-side, #aea5ff 0%, #427dfb 25%, #4f3eff 50%, currentColor 70%);
  background-image: radial-gradient(circle farthest-side at 0% 0%, #aea5ff 0%, #427dfb 25%, #4f3eff 50%, currentColor 70%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 150% 100%;
  color: inherit;
  animation: aiAppBreath 5s ease-in-out infinite;
}

/* 版面 3（AI落地切入）复用 solution4.css，它的 .title span 给**所有** span
   都上了渐变呼吸 —— 按后台 span 圈字的要求，只有标了 fde-grad-text 的片段
   才能呼吸。这里先整体关掉，再单独点亮 highlight 段。
   选择器带 .fde-page 前缀，specificity 高于 solution4.css 的原规则，
   不影响 /solution/MultiScenario_Agent/ 页面本身。 */
.fde-page .aiApplication .aiApplicationTitle .title span {
  background-image: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}
.fde-page .aiApplication .aiApplicationTitle .title span.fde-grad-text {
  background-image: -webkit-radial-gradient(0% 0%, circle farthest-side, #aea5ff 0%, #427dfb 25%, #4f3eff 50%, currentColor 70%);
  background-image: radial-gradient(circle farthest-side at 0% 0%, #aea5ff 0%, #427dfb 25%, #4f3eff 50%, currentColor 70%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 150% 100%;
  color: inherit;
  animation: aiAppBreath 5s ease-in-out infinite;
}

/* 版面 3 容器宽度：solution4.css 用 calc(100vw - 2.5rem)，而 vw 不跟随页面的
   等比 zoom（见 FDE.vue applyPageZoom）—— 缩放后容器比可视区窄，两侧出现
   随缩放比例变化的大片留白。本页改用 %（相对全宽 section），卡片铺满屏宽、
   两侧恒定 20px 内边距（与原设计 2.5rem 一致）；不改共享的 solution4.css。 */
.fde-page .aiApplication .content1896 {
  width: calc(100% - 40px);
  max-width: none;
}

/* swiper 基础布局：参考页（/solution/MultiScenario_Agent/）的横向卡片队列由
   全站公共样式提供 .swiper-wrapper 的 flex；本页 layout:false 不加载全站样式，
   缺了它 slide 会纵向堆叠（版面被撑到 ~7600px 高、内容看着是空白）。
   这里按 swiper 默认行为补齐：wrapper 横向 flex + 卡片间距 20px（参考页跑马灯同款）。 */
.fde-page .aiApplication .swiper-wrapper {
  display: flex;
  gap: 1.25rem;
}

/* 公共底部：渲染原版 GlobalShellFooter（scoped 样式才能命中版权条的精细排版），
   只保留分割线下的版权/备案/链接条 —— 分割线以上的版块全部隐藏。
   !important 压过组件自身的响应式 display 规则；该 footer 是本页唯一 footer，无误伤。
   全站 footer 依赖的 4 个样式表不再 <link> 整页加载（会泄漏老站规则），
   改由脚本把它们的规则加 .fde-footer-host 前缀后注入，仅作用于本容器。 */
.fde-page .fde-footer-host footer.footerNew .footerContact,
.fde-page .fde-footer-host footer.footerNew .footerMain,
.fde-page .fde-footer-host footer.footerNew .footerService,
.fde-page .fde-footer-host footer.footerNew .mfooterClass,
.fde-page .fde-footer-host footer.footerNew .mFast,
.fde-page .fde-footer-host footer.footerNew .mReturnBtn,
.fde-page .fde-footer-host footer.footerNew .commonBg {
  display: none !important;
}

/* 国徽+备案号与版权文字同行（参考页为一行）：
   ① ResourceImage 组件把 img 强制成 block → 国徽独占一行、备案号掉到第三行，
      改回 inline-block 并与文字居中；
   ② nowrap 兜底防折（仅桌面条，移动端版权区不受影响） */
.fde-page .fde-footer-host footer.footerNew .footerOther .copyright {
  white-space: nowrap;
}
.fde-page .fde-footer-host footer.footerNew .footerOther .copyrightMain .icpLink img {
  display: inline-block;
  vertical-align: middle;
}
/* 左右对齐咨询页内容：footerOther 原来的 content1200（1200px）比咨询页容器
   （1322px）窄 122px，导致左侧文字、右侧图标都与咨询页内容错位。
   改成与 .fde-cta__inner 同一宽度公式后：左侧版权组对齐咨询页标题左缘，
   右侧社交图标对齐表单输入框右缘（strip 自带 space-between 左右分组）。 */
.fde-page .fde-footer-host footer.footerNew .footerOther {
  width: min(1322px, calc(100% - 96px));
  max-width: none;
}

/* 社交图标的二维码向上弹出：原版 .footer 的 overflow:hidden 会把它裁掉
   （本页只保留版权条，弹层必然超出 footer 顶边、被上方咨询页盖住）。
   放开 footer 裁切 + 抬高 footer 层级，弹层落在咨询页之上。 */
.fde-page .fde-footer-host footer.footerNew {
  overflow: visible;
  z-index: 70;
}
.fde-page .fde-footer-host footer.footerNew .footerShare .popup {
  z-index: 130;
}

@keyframes fde-grad-breathe {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}

/* ── 全局：黑胶囊按钮 ───────────────────────────────────────────────────
   悬停效果照搬 /Cloud-Pivot/ 第三版面「了解更多」按钮（.clMoreBtn）：
   黑色底上淡入 90° 蓝紫渐变 + 一层很淡的投影，两者同为 0.3s。
   选择器写成 :is(a, button)：本页按钮既有 <a> 也有 <button>，
   而 .clMoreBtn 的写法把悬停绑死在元素类型上。 */
.fde-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 16px 40px;
  border: 0;
  border-radius: 999px;
  background: var(--fde-black);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .3s ease;
  font-family: inherit;
}

/* 渐变层：平时透明，悬停淡入；z-index -1 让它压在文字下面、底色上面
   （.fde-btn 的 isolation:isolate 保证它不会跑到卡片背景之下）。
   渐变直接复用 eap 首屏「立即申请免费试用」按钮的原图
   （banner-btn-back2.png，蓝→紫→青渐变与光散都烤在图里，过渡自然随机）；
   100% 100% 拉伸铺满按钮，容器自身的胶囊圆角裁掉图片自带的端头。 */
.fde-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 图片边缘一圈自带深色描边（eap 在浅底上做的暗边）：放大背景把边缘
     推出容器、由按钮黑底+圆角裁掉，悬停时就没有黑边了 */
  background: url('/dist/images/fde/banner-btn-back2.png') center / 106% 116% no-repeat;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.fde-btn:hover { box-shadow: 0 10px 40px 0 rgba(117, 117, 117, .1); }
.fde-btn:hover::after { opacity: 1; }

.fde-btn:active { transform: scale(.97); }

/* 触摸设备无 hover 语义：不显示渐变层 */
@media (hover: none) {
  .fde-btn::after { display: none; }
}

/* ── 全局：滚动显现（进入视口后从下方 30px 淡入）───────────────────────── */
/* 与站内一致：无 JS 时内容直接可见；JS 就绪后 html.js 才启用初始隐藏。
   复用站内 useReveal()（data-reveal 属性 + .is-revealed 类），不自建观察器。 */
html.js .fde-page [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translateY(30px);
}
html.js .fde-page [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================================================
   版面 1：首屏 Banner（设计稿 y 0–930：标题 224、副标题 412、按钮 515）
   ============================================================================= */
.fde-hero {
  position: relative;
  isolation: isolate;
  min-height: 930px;
  padding-bottom: 0;
  overflow: hidden;
  background: var(--fde-deep);
}

/* 粒子组件铺满整块，内容叠在上面（组件自带「深蓝 → 白」渐变底） */
.fde-hero particle-banner {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1080px;
  z-index: 0;
  display: block;
}

/* 移动端静态兜底：原兜底图已随「图片全部走 CMS」下线，仅保留结构占位 */
.fde-hero__still { display: none; }

/* 底部渐白过渡：深蓝 → 白，衔接下一区块（静态渐变，非动效） */
.fde-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 380px;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 55%, #fff 100%);
  pointer-events: none;
}

/* ── 悬浮导航胶囊 ────────────────────────────────────────────────────────
   参考豆包工作页（www.doubao.com/work）的导航：固定居中的玻璃胶囊，
   半透明白底 + 15px 背景模糊 + 柔和投影；选项卡是纯文字（无胶囊描边）；
   右侧按钮是 32px 高的实心圆角按钮。
   深色版面（首屏 / 底部 CTA）用亮色玻璃，白色版面自动反色（.is-light）。 */
.fde-nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  width: max-content;
  max-width: calc(100% - 48px);
  height: 56px;
  padding: 0 12px 0 20px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 20px 30px rgba(77, 90, 108, .12);
  border: 1px solid rgba(0, 0, 0, .05);
  transition: background-color .3s ease, box-shadow .3s ease;
}

.fde-nav.is-light { background: rgba(255, 255, 255, .2); }

.fde-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color .3s ease;
}
.fde-nav__brand svg { width: 30px; height: 30px; flex: none; }
/* CMS 品牌图（图标+字体一张整图）：高 24。
   原型图胶囊高 70 时品牌约 30（占 43%）；本页胶囊 56，同比例 = 24。
   图片素材的字面重心偏下，上移 4px 与右侧导航文字垂直居中对齐。 */
.fde-nav__brand-img { height: 24px; width: auto; display: block; position: relative; top: -4px; }
.fde-nav.is-light .fde-nav__brand { color: #12131a; }

.fde-nav__menu {
  display: flex;
  align-items: center;
}

.fde-nav__links {
  display: flex;
  align-items: center;
  /* gap 8 + 选项卡左右内边距 16 = 文字之间 40px（见 .fde-nav__link 说明） */
  gap: 8px;
  list-style: none;
  margin: 0 0 0 56px;
  padding: 0;
}

/* 选项卡：纯文字，但有 1px 透明描边打底 —— 选中时才把描边点亮成白色椭圆，
   这样高亮出现/消失不会让整行宽度跳动。
   内边距把「文字间距」撑回 40px：gap 8 + 左右各 16 的 padding，
   与豆包的 40px 视觉间距一致。 */
.fde-nav__link {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(255, 255, 255, .7);
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.fde-nav__link:hover,
.fde-nav__link.is-current { color: #fff; }
/* 选中的选项卡：白色椭圆描边 + 比导航底色更灰一档的填充
   （深色主题下导航底是 10% 白玻璃，选中填充加 8% 白 = 提亮一档的灰） */
.fde-nav__link.is-current {
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .08);
}

.fde-nav.is-light .fde-nav__link { color: rgba(0, 0, 0, .7); }
.fde-nav.is-light .fde-nav__link:hover,
.fde-nav.is-light .fde-nav__link.is-current { color: #000; }
/* 浅色主题：底是 20% 白玻璃（压白页面），选中填充用 5% 黑 = 压暗一档的灰 */
.fde-nav.is-light .fde-nav__link.is-current {
  border-color: rgba(0, 0, 0, .35);
  background: rgba(0, 0, 0, .05);
}

.fde-nav__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 32px;
  /* 末项选项卡右侧有 16px 内边距，这里补足到 64px 的视觉间距 */
  margin-left: 48px;
  padding: 0 19px;
  border-radius: 60px;
  background: #fff;
  color: #000;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.fde-nav__cta:hover { background: #f0f3f8; }
.fde-nav.is-light .fde-nav__cta { background: #000; color: #fff; }
.fde-nav.is-light .fde-nav__cta:hover { background: #222; }

/* 移动端：折叠为汉堡菜单 */
.fde-nav__toggle {
  display: none;
  margin-left: 16px;
  width: 36px; height: 36px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 60px;
  background: transparent;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.fde-nav.is-light .fde-nav__toggle { border-color: rgba(0, 0, 0, .2); color: #000; }

/* 锚点跳转时给固定导航留出空间，版面标题不会被胶囊压住 */
.fde-page > section[id] { scroll-margin-top: 96px; }

/* ── 首屏文案（设计稿：标题首行墨迹 y 224–294、72px；副标题 16px；按钮 295 × 55）── */
.fde-hero__content {
  position: relative;
  z-index: 2;
  width: min(var(--fde-container), calc(100% - 96px));
  margin: 0 auto;
  /* 导航改为固定定位后不再占据首屏高度。
     数值按「可见墨迹」对齐设计标注：导航底 → 标题首行墨迹顶 = 91px。
     标题块内还有半个行距 + 字体上沿留白约 10px，故这里写 157（76 + 91 − 10）。 */
  padding-top: 157px;
  text-align: center;
}

.fde-hero__title {
  margin: 0;
  font-size: 72px;
  /* 设计标注「两行间距 21px」是两行墨迹之间的距离。
     本字栈 72px 的墨高约 66，行高取 1.21（= 87）即得 21；用倍数不用 px，
     移动端标题缩到 32px 时行距才会等比收窄。 */
  line-height: 1.21;
  font-weight: 600;
  color: #fff;
  letter-spacing: .01em;
}

/* 渐变椭圆盖住**两行**（原型里两行是一个整体）。
   挂在内层块上而不是 h2：h2 的 data-reveal 入场动画占用 animation 属性，
   同元素上再写呼吸会被覆盖。background-clip:text 对块内所有字生效，
   圆心 = 两行块中心，第一行两端也像原型那样扫到浅蓝过渡。
   半轴按原型拟合：a=460px、b=200px（1920 稿，两行块 1322×181），
   验证点：第二行两端 r≈1.0 → 实色 #077bcc；第一行两端 r≈0.51 → #a8dfff 浅蓝，
   与原型取色（#bee7ff…#bae5ff）吻合。色标由原型按归一化半径分桶取均值：
     0.10-0.20 白 → 0.35 #eff9ff → 0.50 #a8dfff → 0.60 #45bbff → 0.70 #0a96ec → 0.75 #067ed0
   色标略内收（88% 实色）：呼吸缩到 84% 时边缘字符仍落在实色区。 */
.fde-hero__title-grad {
  display: block;
  background-color: #077bcc;
  /* 椭圆中心 x 不变、y 上移到 40%：两行到圆心的距离拉开 ——
     第一行整体更白（端点最深只到浅蓝 #a8dfff 一档），
     第二行整体偏蓝（端点落在 #077bcc 实色区）。
     半轴同步放宽（35%→40% / 110%→130%），保证第二行端点仍在实色区内。 */
  background-image: radial-gradient(
    ellipse 40% 130% at 50% 40%,
    #fff 0%,
    #fff 28%,
    #f7fcff 36%,
    #dbf2ff 46%,
    #a8dfff 56%,
    #45bbff 66%,
    #0a96ec 76%,
    #077bcc 88%
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fde-hero-grad-breathe 5s ease-in-out infinite;
}

/* 呼吸：白色椭圆缓慢放大缩小。幅度加大到 84% ↔ 124%（更大更容易看出张缩），
   5s 一个来回；缩到 84% 时边缘字符仍落在 88% 实色区，不会露出接缝。 */
@keyframes fde-hero-grad-breathe {
  0%, 100% { background-size: 84% 100%; }
  50%      { background-size: 124% 100%; }
}

.fde-hero__desc {
  /* 设计标注：标题墨迹底 → 简介墨迹顶 = 38px。
     标题盒底比墨迹低约 10px、简介盒顶比墨迹高约 5px，故 margin 取 23。 */
  margin: 23px auto 0;
  max-width: 900px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}

/* 设计标注：简介墨迹底 → 按钮顶 = 86px。
   简介行盒高 25.6（16 × 1.6）不是整数，margin 取 80.2 才正好补成 86。 */
.fde-hero__cta { margin-top: 80.2px; }
.fde-hero__cta .fde-btn {
  height: 55px;
  padding: 0 74px;
  font-size: 18px;
}

/* =============================================================================
   版面 2：FDE 特攻队（设计稿：渐变面板 x 135–1784 / y 905–1790，白卡 1078 宽）
   ============================================================================= */
.fde-team {
  position: relative;
  /* 渐变面板贴到版面底部（::before bottom:0），白卡是版面最后一个元素，
     所以白卡底距面板底 = 本项 padding-bottom = 90px */
  padding: 62px 0 90px;
  background: #fff;
}

/* 大块浅蓝紫渐变面板：设计稿里标题与白卡都坐在这块面板上 */
.fde-team::before {
  content: '';
  position: absolute;
  left: 50%;
  translate: -50% 0;
  top: -25px;
  /* 与「赋能千行百业」卡片同宽（1320） */
  width: min(1320px, calc(100% - 48px));
  bottom: 0;
  border-radius: 32px;
  background:
    radial-gradient(1200px 620px at 18% 8%, rgba(214, 226, 250, .95) 0%, rgba(214, 226, 250, 0) 62%),
    radial-gradient(1000px 600px at 88% 92%, rgba(236, 233, 252, .95) 0%, rgba(236, 233, 252, 0) 66%),
    linear-gradient(180deg, #f3f6fd 0%, #eef2fb 55%, #f7f5fd 100%);
}

/* 后台传了背景图（Photo 字段）时整块替换 CSS 渐变：
   模板在 section 上写 --fde-team-bg 变量 + data-has-bg 标记，这里据此切换。
   cover 铺满面板，与原渐变的视觉角色一致。 */
.fde-team[data-has-bg]::before {
  background: var(--fde-team-bg) center / cover no-repeat;
}
  pointer-events: none;
}

.fde-team > * { position: relative; }

/* 版面标题头：原 1160 宽会把简介夹在 1160 里，而简介需要 1520。
   改为「头放宽到 1520，标题自己限宽 1160」—— 用 % 不用 vw：
   页面要按 1920 等比 zoom 缩放，vw 不跟随 zoom，% 才能保持构图一致。 */
.fde-section-head {
  width: min(1520px, calc(100% - 96px));
  margin: 0 auto;
  text-align: center;
}

/* 颜色按设计稿 1920 稿实测：标题黑字 #0A0B0E、简介纯黑；
   说明书「全局规则」里写的主色 #101848 / 正文 #5A5A66 标注为估算值，实际不是。 */
.fde-section-title {
  /* 标题自身限宽 1160（原 .fde-section-head 的宽度），居中 */
  max-width: min(1160px, 100%);
  margin: 0 auto;
  font-size: 57px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--fde-black);
}
.fde-section-sub {
  margin: 30px auto 0;
  /* 与 .fde-section-head 的宽度一致（1520）：AI特攻队那两行长文案
     在 1470 下会把最后一个「力」挤到第三行，1520 正好两行 */
  max-width: 1520px;
  font-size: 25px;
  line-height: 34px;
  color: #000;
}

/* 「AI特攻队」的简介要坐进 1320 的渐变面板：原面板 1649 / 简介 1520 /
   两侧余量 64.5；面板收窄到 1320（×0.80）后余量等比为 52，简介盒 = 1216。
   字号与行距同比例缩（25→20、34→27），保证那两行文案仍是两行
   （25px 原字号下行宽 1401/1473，塞进 1216 会折成四行）。 */
.fde-team .fde-section-head .fde-section-sub {
  width: min(1216px, 100%);
  max-width: 1216px;
  font-size: 20px;
  line-height: 27px;
}

/* 白色大卡：面板从 1649 收窄到 1320（与赋能千行百业卡片同宽）后，
   白卡与内部内容按同一比例（1320/1649 ≈ 0.80）等比缩小。 */
.fde-team__card {
  width: min(864px, calc(100% - 96px));
  min-height: 416px;
  margin: 63px auto 0;
  border-radius: 16px;
  background: var(--fde-card);
  box-shadow: 0 24px 60px rgba(16, 24, 72, .06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fde-team__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 32px;
  min-height: 64px;
  border-bottom: 1px solid #eef0f5;
}
.fde-team__avatar {
  width: 35px; height: 35px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.fde-team__head-label {
  font-size: 25px;
  color: #9aa0ad;
}

/* 行高由内容决定：单行简介 ≈ 147px，两行简介会多出一个行距（38px）。
   不再用 flex:1 均分，否则两行简介会被压扁。 */
.fde-team__item {
  flex: none;
  display: flex;
  gap: 16px;
  /* 图标与步骤标题的相对位置按第一行（单行简介）定格 ——
     不随简介行数变化（原来 align-items:center 会把图标随 body 增高往下带） */
  align-items: flex-start;
  /* 原缩放前：19.5px 40px 26.5px，等比后取整 */
  padding: 15.5px 32px 21px;
  border-bottom: 1px solid #eef0f5;
  position: relative;
  transition: background-color .3s ease;
}
.fde-team__item:last-child { border-bottom: 0; }

.fde-team__icon {
  position: relative;
  width: 44px; height: 44px;
  flex: none;
  /* 定格第一行的图标↔标题相对位置：单行简介时 body 高 62.5（标题 32.5 − 2 + 简介 32），
     居中态图标顶 = (62.5 − 44) / 2 ≈ 9.25px —— 固定为 9px，多行简介不再下坠 */
  margin-top: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #f2f2f2;
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
}
.fde-team__icon img {
  width: 66px; height: 66px;
  flex: none;
  object-fit: contain;
  opacity: 1;
  transition: opacity .3s ease;
}

/* 已完成：全亮、静止 */
.fde-team__icon.is-done img { opacity: 1; }

/* 进行中：只让中心图形旋转，承载它的圆角卡片保持静止。
   源图 118×118 的结构是：最外 2~4px 一圈 #F2F2F2 圆角描边 | 透明 | 中心 46% 图形。
   光靠「放大 + 容器裁切」不够——旋转到 45° 时那圈描边会从盒子四角露出来。
   所以旋转时额外用 clip-path 把图片裁到中心 50%（=图形所在区域），
   描边被彻底裁掉，只剩图形在转。 */
.fde-team__icon.is-loading img {
  animation: fde-team-spin 1.6s linear infinite;
  clip-path: circle(26% at 50% 50%);
}
@keyframes fde-team-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 待开始：呼吸 */
.fde-team__icon.is-waiting img {
  opacity: .7;
  animation: fde-team-breathe 2s ease-in-out infinite;
}
@keyframes fde-team-breathe {
  0%, 100% { transform: scale(1);    opacity: .45; }
  50%      { transform: scale(1.06); opacity: .85; }
}

.fde-team__body { flex: 1; min-width: 0; }
.fde-team__item-title {
  margin: 0;
  font-size: 25px;
  line-height: 1.3;
  font-weight: 600;
  color: #2b2f3a;
  transition: color .3s ease;
}
/* 标题颜色：加载完成（已完成）→ 品牌蓝紫 #403EE6；其余保持深灰黑 */
.fde-team__item.is-done .fde-team__item-title {
  color: #403EE6;
}
/* 标题墨迹底 → 简介墨迹顶 目标 16px（设计稿实测 17px、需求给 15px）；
   两个行盒各带约 10px 行内留白，所以 margin 取 -2px。 */
.fde-team__item-desc {
  margin: -2px 0 0;
  font-size: 18px;
  /* 行距 40px = 墨迹高约 20px + 行间空隙 20px（设计稿实测 18px，取整 20）；等比后 32px */
  line-height: 32px;
  color: #6b6f7a;
}
/* 待开始：不再压暗——状态3 图标本身是绿点，压灰会让它失真 */
.fde-team__item.is-waiting .fde-team__item-desc { color: #6b6f7a; }

/* =============================================================================
   版面 3：AI 落地切入点
   —— 结构与样式全部来自 /solution/MultiScenario_Agent/ 的「应用场景区」：
      组件类名 .aiApplication / .aiApplicationMain / .swiper-slide 等，
      样式表 public/dist/css/solution4.css（页面 useHead 里引入）。
   本文件不再重复定义这一区，避免两套规则互相覆盖导致与参考页不一致。
   ============================================================================= */

/* ── 版面 3 尺寸覆盖：solution4.css 是按 /MultiScenario_Agent/ 页面调的，
       FDE 页的间距与字号不同，这里只覆盖差异项，其余结构/动画全部沿用。
       目标（设计稿实测）：上一版面面板底 → 标题 125px；标题 → 简介 40px；
       简介 → 卡片 55px；标题 57px、简介 25px。 ─────────────────────────── */
#scene.aiApplication {
  /* 122.56 → 125 */
  padding-top: 125px;
}

#scene .aiApplicationTitle .title {
  font-size: 57px;
  line-height: 1.3;
  /* h2 的 UA 默认 margin-block-start 是 0.83em，57px 下约 47px，
     会穿透 .aiApplicationTitle 塌陷出去、把整块内容往下推。必须清零。 */
  margin: 0;
}

#scene .aiApplicationTitle .intro {
  font-size: 25px;
  line-height: 35px;
  /* 目标：标题墨迹底 → 简介墨迹顶 40px（行盒各带约 9px 行内留白） */
  margin-top: 40px;
}

#scene .aiApplicationTitle {
  /* solution4.css 是 61.28px；这里收成 55 以对齐「简介 → 卡片 55px」 */
  margin-bottom: 55px;
}

/* =============================================================================
   版面 4：案例轮播（设计稿：主卡 1320 × 634，左 58% / 右 42%）
   ============================================================================= */
/* 标题/简介字号与上一版面（版面 3）一致：57 / 25（全局 .fde-section-title /
   .fde-section-sub 已是这组值）。这里只调本版面的三处间距：
     上文底 → 标题 125px；标题 → 简介 40px；简介 → 卡片 88px（该版面例外值） */
.fde-cases {
  position: relative;
  padding: 125px 0 87px;
  background: #fff;
  overflow: hidden;
}

.fde-cases .fde-section-sub { margin-top: 40px; }

.fde-cases__viewport {
  position: relative;
  margin-top: 88px;
}

/* 轨道：三张卡横排，按当前索引平移，左右各露出一张相邻卡的边缘（设计稿约 186px）。
   用 left:50% 而非 50vw —— 有滚动条时 50vw 会比内容宽度多出 17px 造成整卡偏移。 */
/* 环形轮播：轨道里固定只有「前 / 当前 / 后」三张卡（首位取模），
   中间那张居中，左右各露出一部分。不再做整轨平移，
   切换时由 Vue 更新三张卡的内容并整体淡入。
   间距 85px → 主卡 1320 居中后左右各露 215px（215+85+1320+85+215=1920）。 */
.fde-cases__track {
  position: relative;
  left: 50%;
  display: flex;
  align-items: stretch;
  gap: 85px;
  padding: 0;
  /* 三张卡：整轨左边缘在视口中心，需再左移 (1320+85) 让中间那张居中，
     然后 -660 是中间卡自身半宽。合计 -(1320+85+660) = -2065 */
  transform: translate3d(-2065px, 0, 0);
}

.fde-cases__slide {
  flex: 0 0 auto;
  width: 1320px;
  /* 相邻卡：按原型实测反推 ≈ 75% 不透明 + 60% 饱和（原 45% / 55% 过淡） */
  opacity: .75;
  filter: saturate(.6);
  transition: opacity .45s ease, filter .45s ease;
  pointer-events: none;
}
.fde-cases__slide.is-active {
  opacity: 1;
  filter: none;
  pointer-events: auto;
}

/* ── 切换动效：真实整卡滑动 ───────────────────────────────────────────────
   三卡环形轨道，切换时脚本先把轨道瞬移到「旧视角」（新内容摆进旧卡位置，
   画面无跳变），随后恢复本过渡滑回基准位 -2065 —— 新当前卡从侧面
   真实滑入中央，滑动距离 = 一张卡位（1320 + 间距 85 = 1405px）。
   1s 缓起缓收曲线，柔和。瞬移帧由内联 transition:none 覆盖此处过渡。 */
.fde-cases__track {
  transition: transform 1s cubic-bezier(.3, .5, .25, 1);
}

.fde-cases__card {
  position: relative;
  display: grid;
  /* 左栏 700px 固定（分割线落在 x=700），右栏吃掉剩余宽度 */
  grid-template-columns: 700px 1fr;
  /* 卡片尺寸写死：1320 × 641。右栏简介展开时绝对定位浮在上层，
     不参与高度计算，因此卡片高度不会随交互变化。 */
  width: 1320px;
  height: 641px;
  border-radius: 18px;
  /* 不裁切：最后一步展开的蓝盒子允许溢出卡片下沿
     （需求方确认「可以溢出卡片区」）。圆角改由左右两栏分别处理。 */
  overflow: visible;
  background: #fff;
  /* 原型实测卡片边缘是硬边（248 → 255 一像素跳变），没有可见阴影；
     原来 0 24px 60px 的重阴影会向两侧渗入空隙，让视觉边界外扩约 30px。 */
  box-shadow: none;
}

/* 左栏：蓝紫渐变光晕底图 + 文案。
   `4-背景-1.png` 是 2751 × 1337 的整块左栏底图（比例 2.06），面板是 769 × 634（1.21）；
   用 cover 会裁掉左侧的蓝色光晕，这里按设计稿整幅铺满（柔和渐变拉伸无观感差异）。 */
/* 左栏（设计稿 1920 稿实测，卡片 781 宽）：
     内边距 67px；标签胶囊 185×33、文字 25px、纯白底；
     标题 41px / 行距 53px；描述 21px / 行距 40px；按钮 225×62。 */
/* 整卡背景层：CMS bg 图（4-背景-N.png）是「整卡画布」——
   素材 2751×1337 的比例与整卡 1320×641 完全一致，左半是蓝色渐变区、
   右半是浅灰区，本就是一张图。铺满整卡、由卡片 18px 圆角裁掉素材烤角；
   左右两栏内容叠在图上（左栏透明，右栏有图时置透明灰底由图接管）。 */
.fde-cases__card[data-has-bg]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: var(--fde-case-bg) center / 100% 100% no-repeat;
  z-index: 0;
}
/* 有背景图时右栏不再自填灰底（图的右半就是浅灰区）；无图时保留灰底兜底 */
.fde-cases__card[data-has-bg] .fde-cases__right {
  background: transparent;
}

.fde-cases__left {
  position: relative;
  /* 左栏压在整卡背景图上，自身不再铺图 */
  border-radius: 18px 0 0 18px;
  padding: 44px 67px 44px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fde-cases__tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  /* 承载盒子：高度固定 35px，宽度随文字自适应（左右内边距 25px）。
     设计稿里「制造·质量管理」的胶囊是 185×33，本页字号 25px 下文字略宽，
     但 pading 比例与设计稿一致；换更长的分类名也不会裁字。 */
  height: 35px;
  padding: 0 25px;
  border-radius: 6px;
  background: #fff;
  font-size: 25px;
  line-height: 1;
  margin-bottom: 56px;
}

.fde-cases__title {
  /* 41px 字号 / 行距 53px；标题里的换行由 CMS 提供（如「四方股份:」/「AI驱动…」）。
     标题允许用到分割线前：设计稿里行末距分割线还有 65px 余量，
     而本页字体渲染比 PingFang 略宽（整行 571px > 内容区 566px），
     去掉右侧内边距的约束才不会把最后一个字挤到下一行。 */
  margin: 0 -67px 40px 0;
  font-size: 41px;
  line-height: 53px;
  font-weight: 600;
  color: #1c2030;
}
.fde-cases__desc {
  margin: 0 0 32px;
  font-size: 21px;
  line-height: 40px;
  color: #2b2f3a;
  /* 设计稿每行最宽 441px；本页字体略宽，给到 455 才能在同样的字处折行
     （441 + 下一个字 ≈ 462，所以 455 仍会在「、」后断行）。 */
  max-width: 455px;
}
.fde-cases__cta {
  /* 距卡片左边界 65px、下边界 125px（设计稿实测 69 / 121，取用户给定值） */
  margin-top: auto;
  margin-left: -2px;   /* 内边距 67 − 65 */
  margin-bottom: 81px; /* 容器 padding-bottom 44 + 81 = 125 */
  align-self: flex-start;
  height: 62px;
  padding: 0 44px;
  font-size: 21px;
}

/* 右栏：三阶段步骤条。
   分割线不铺满卡片高度：设计尺寸 553px，并在卡片内上下居中。
   用伪元素画线（高度固定 + 垂直居中），右栏本身不留边框。 */
.fde-cases__right {
  position: relative;
  /* 右栏底色 #F8F8F8（设计稿实测），分隔线用更深的 #F1F1F1 */
  padding: 40px 44px 0;
  background: #f8f8f8;
  border-radius: 0 18px 18px 0;
  /* 不裁切：最后一步的展开蓝盒子需要溢出到卡片外 */
  overflow: visible;
}
.fde-cases__right::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 1px;
  height: 553px;
  background: #eef0f5;
  pointer-events: none;
}
/* 步骤区标签：盒子尺寸与左侧分类标签一致（高 35、左右内边距 25、宽度随文字），
   底色取 CMS 的 stepTagColor，文字固定 #F9F9F9。 */
.fde-cases__right-tag {
  display: inline-flex;
  align-items: center;
  height: 35px;
  padding: 0 25px;
  border-radius: 6px;
  background: #a7c3ff;
  color: #f9f9f9;
  font-size: 25px;
  line-height: 1;
  margin-bottom: 30px;
}

.fde-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 步骤区按原型图 1920 稿实测的垂直节奏重建：
     步骤1 标题顶 108     步骤2 标题顶 230   步骤3 标题顶 372   步骤4 标题顶 502
     交叉步进 122 / 142 / 130 —— 展开项那条会多占空间（气泡向下覆盖下一步标题）。
   实现方式：每个步骤固定 129.5px 步进（= 分隔线间距），
   展开时气泡绝对定位向下延伸、盖住下一步标题；不参与高度计算所以不会推挤。 */
.fde-steps__item {
  position: relative;
  height: 129.5px;
  border-top: 1px solid #f1f1f1;
  margin-top: -1px;
}

/* 图标 + 标题：距段顶 20px（原型图：分隔线 352 → 标题墨迹 372） */
.fde-steps__row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-top: 12px;
  cursor: pointer;
}

/* 步骤图标：53×53 白盒；三张状态图来自 CMS（118×118，含描边，放大后裁掉） */
.fde-steps__icon {
  position: relative;
  width: 53px; height: 53px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #eef0f5;
  display: flex; align-items: center; justify-content: center;
  flex: none;
  overflow: hidden;
}
.fde-steps__icon img { width: 78px; height: 78px; flex: none; object-fit: contain; }

/* 等待态：CMS 的 BigImgUrl 里是一个烧死的绿点（118×118 中约 26px），
   直接显示颜色无法配置。这里隐藏那张图，改用 CSS 画的圆点，
   颜色取每张案例自己的 waitColor（原型实测圆点直径 11px）。 */
.fde-steps__icon img.is-recolored { visibility: hidden; }
.fde-steps__icon.is-waiting::after {
  content: '';
  position: absolute;
  width: 11px; height: 11px;
  border-radius: 50%;
  /* 兜底色：设计稿第一条案例的 waitColor */
  background: var(--fde-wait-color, #a7c3ff);
}
/* 加载态：只让中心图形旋转。img(78px) 比盒子(53px)大、源图外圈还有一圈
   圆角方框描边 —— 不裁的话方框跟着转，看起来像承载盒子在转。
   与团队版面（.fde-team__icon.is-loading）同款处理：clip-path 裁到中心图形区。 */
.fde-steps__icon.is-loading img {
  animation: fde-team-spin 1.6s linear infinite;
  clip-path: circle(26% at 50% 50%);
}

.fde-steps__label {
  font-size: 28px;
  font-weight: 600;
  color: #2b2f3a;
  line-height: 1.2;
  /* 标题墨迹与图标盒垂直居中对齐（图标 53，标题行盒约 34） */
  padding-top: 9px;
  margin-top: -6.3px;
}

/* 简介：常态 17px / 行高 30（原型图行距 171→201→232）；
   展开态改成 21px + 渐变蓝盒，并向下覆盖下一步标题。 */
.fde-steps__bubble { position: static; }
.fde-steps__bubble-body {
  position: absolute;
  left: 71px;
  width: 380px;
  /* 按墨迹对齐（不是行盒）：实测 top=69 时标题墨迹底→简介墨迹顶 = 32.7，
     要 15px 需上移 17.7 → top = 51.3；此时间介墨迹底距段底约 25px（目标 23）。 */
  top: 51.3px;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  background: transparent;
  font-size: 17px;
  line-height: 30px;
  color: #6b7280;
  z-index: 1;
  transition: font-size .28s ease, color .28s ease, background .28s ease,
              padding .28s ease, box-shadow .28s ease, top .28s ease;
}

/* 展开：宽度 373 固定；高度不写死，由「内边距 22/29 + 行数 × 行高」自动撑开：
     1 行 ≈ 77px，2 行 ≈ 104px，3 行 ≈ 130px。
   距自己的步骤标题 15px（渲染校准：71 实测 16.4，故 69.6）。 */
/* 展开：宽度 373 固定；高度不写死，由「内边距 22/29 + 行数 × 行高」自动撑开：
     1 行 ≈ 77px，2 行 ≈ 104px，3 行 ≈ 130px。
   距自己的步骤标题 15px（渲染校准：71 实测 16.4，故 69.6）。
   顶部透明桥接带（::before，18.3px）：折叠文字顶 51.3 与展开盒顶 69.6 之间的
   空隙曾让停在分界带的指针「展开→盒顶下移→指针脱离→收起→指针又进入」
   无限抖动；桥接带把展开态命中区向上延伸到折叠文字顶，悬停不中断。 */
.fde-steps__item.is-expanded .fde-steps__bubble-body::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -18.3px;
  height: 18.3px;
}
.fde-steps__item.is-expanded .fde-steps__bubble-body {
  top: 69.6px;
  width: 373px;
  height: auto;
  min-height: 0;
  padding: 17.3px 51px 22.7px 26px;
  box-sizing: border-box;
  background: linear-gradient(
    90deg,
    #1ba3ff 0%,  #29a9ff 5%,  #38afff 10%, #45b4ff 15%, #52b9ff 20%,
    #5ebeff 25%, #6bc3ff 30%, #76c8ff 35%, #82cdff 40%, #8cd1ff 45%,
    #97d5ff 50%, #a1d9ff 55%, #a9ddff 60%, #b3e0ff 65%, #bbe4ff 70%,
    #c2e7ff 75%, #c9e9ff 80%, #cfecff 85%, #d4eeff 90%, #d8efff 95%,
    #dcf1ff 100%
  );
  box-shadow: 0 10px 28px rgba(16, 24, 72, .12);
  font-size: 21px;
  font-weight: 300;
  /* 行距 12px：汉字墨迹高 18px（21px 字号实测）+ 12 = 30px 行高；
     三行盒高 = 17.3 + 3×30 + 22.7 = 130px（内边距压实，保持原 22:29 比例）。 */
  line-height: 30px;
  color: #ffffff;
  z-index: 3;
}

/* 展开态文案末尾的 FDE 徽章（原型实测 48×21、圆角 4、纯黑底白字）：
   用 inline-block 跟在最后一个字后面自动换行到行尾，不占额外行高。 */
.fde-steps__badge {
  display: inline-block;
  margin-left: 8px;
  /* 定稿 48.6 × 21.6；字号 12px，靠内边距撑到目标尺寸：
     12px 的 "FDE" 约 24px 宽 → 左右各 12.3；行盒 12 → 上下各 4.8 */
  height: 21.6px;
  /* 文字需占宽 34px（原型实测）；18px/600 的 "FDE" 实测 33.8 → 左右各 (48.6-33.8)/2 = 7.4，
     但实测盒子 50.6，说明字体自带水平留白，内边距收到 6.4 正好 48.6 */
  padding: 0 6.4px;
  border-radius: 4px;
  background: #000;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 21.6px;
  /* 与所在行文字垂直居中（渲染后校准：徽章中心需与文字行中心重合） */
  vertical-align: 2.8px;
  letter-spacing: .02em;
  white-space: nowrap;
}

.fde-cases__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 5;
  width: 100px; height: 100px;
  border-radius: 50%;
  /* 毛玻璃：与导航胶囊同配方（半透明白底 + 15px 背景模糊 + 1px 浅描边 + 柔投影）。
     按钮浮在浅色卡片上，底色用浅色主题档的 20% 白（10% 档在白卡上会看不见） */
  border: 1px solid rgba(0, 0, 0, .05);
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 20px 30px rgba(77, 90, 108, .12);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s ease;
}
/* 箭头符号：10 × 19，线段 2px，两段各 45° → 顶点 90°（原型实测） */
.fde-cases__arrow-icon {
  width: 10px;
  height: 19px;
  fill: none;
  stroke: #1c2030;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fde-cases__arrow:hover { transform: scale(1.1); }
/* 圆心落在「相邻卡的边界」上（不是主卡的边界）：
   左箭头 = 左侧相邻卡的右边界 215 → left = 215−50 = 165
   右箭头 = 右侧相邻卡的左边界 1705 → right = 1920−1705−50 = 165 */
.fde-cases__arrow--prev { left: 165px; }
.fde-cases__arrow--next { right: 165px; }

/* =============================================================================
   版面 5：专业支撑三卡（设计稿：卡 421 宽 / 间距 34 / 整卡视觉 386 高）
   ============================================================================= */
/* 排版节奏与版面 4 一致（标题→简介 40、简介→卡片 88），
   仅「上一版面卡片底 → 标题」不同：需求给 174px。 */
.fde-support {
  padding: 87px 0 81px;
  background: #fff;
}

.fde-support .fde-section-sub { margin-top: 40px; }

.fde-support__grid {
  width: min(var(--fde-container), calc(100% - 96px));
  margin: 88px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

/* 每张卡的底图本身就是「渐变视觉区 + 白色文案区」的整卡素材（含白色图标托底），
   因此整卡就是这张图，文字绝对定位在白色区里（素材实测：白区从 56.1% 开始，
   与设计稿 (4444-4228)/386 = 56.0% 一致）。 */
.fde-support__card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 44px rgba(16, 24, 72, .07);
  transition: box-shadow .3s ease;
}
.fde-support__card.is-active { box-shadow: 0 26px 60px rgba(16, 24, 72, .13); }

.fde-support__bg {
  width: 100%;
  height: auto;
  transition: transform .6s ease;
}
.fde-support__card.is-active .fde-support__bg { transform: scale(1.04); }

.fde-support__body {
  position: absolute;
  left: 0; right: 0;
  top: 56.1%;
  padding: 30px 48px 0;
}
.fde-support__title {
  margin: 0 0 14px;
  font-size: 24px;
  font-weight: 600;
  color: #1c2030;
  transition: color .3s ease;
}
/* 悬停/选中态标题用品牌蓝紫 #403EE6（原为渐变文字） */
.fde-support__card.is-active .fde-support__title {
  color: #403EE6;
}
.fde-support__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.95;
  /* 默认灰色；选中/悬停时变深 #191919 */
  color: #5a5a66;
  transition: color .3s ease;
}
.fde-support__card.is-active .fde-support__desc {
  color: #191919;
}

/* =============================================================================
   版面 6：多元模型生态（设计稿：整体 1322，左墙 728 / 右面板 594）
   ============================================================================= */
/* 排版节奏与上一版面一致（标题→简介 40），
   「支撑卡底 → 标题」需求给 167，「简介 → 卡片」97。 */
.fde-models {
  padding: 86px 0 171px;
  background: #fff;
}

.fde-models .fde-section-sub { margin-top: 40px; }

.fde-models__body {
  width: min(var(--fde-container), calc(100% - 96px));
  margin: 97px auto 0;
  min-height: 693px;
  display: grid;
  grid-template-columns: 728fr 594fr;
  gap: 0;
  border-radius: 24px;
  background: #f7f7f7;
}

/* 左侧 logo 墙：4 列 × 5 行 */
/* 左侧 logo 墙：两行横向跑马灯（原型实测）。
     卡片 300×248，间距 38；每行可见约 2 张。
     第二行整体右移半张 + 半个间距（= 169px），形成交错排列。
     选中态：整卡换成蓝色渐变底图（第一排 / 第二排各一张素材），
     未选中：同尺寸纯白卡片；卡片内居中放 107×107 的 logo。 */
.fde-models__wall {
  position: relative;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 原型实测：两行卡片间距 63（第一行 94–342、第二行 405–653） */
  gap: 63px;
  border-radius: 24px 0 0 24px;
  background: #f7f7f7;
  overflow: hidden;
}

.fde-models__row {
  display: flex;
  gap: 38px;
  width: max-content;
  will-change: transform;
}

/* 第二行错开半张卡（150）+ 半个间距（19）= 169，形成原型那种交错排列。
   用 padding-left 而非 translate：translate 会和滚动动画的 transform 冲突。 */
.fde-models__row--right {
  padding-left: 169px;
}

/* 滚动由 JS 逐帧驱动（wallFrame）：需要按阶段变速，
   CSS keyframes 无法表达「慢/快/慢/很慢」四段。
   这里只保留 will-change 与 transform 的过渡交给 JS 写。 */

/* 单张 logo 卡片：300 × 248。
   选中 = 卡片背景与内部 logo 作为整体一起渐变，不做层叠位移，
   避免「底图已变、logo 还在滑入」的割裂感。 */
.fde-models__tile {
  position: relative;
  flex: none;
  width: 300px;
  height: 248px;
  border-radius: 16px;
  /* 原型实测：未选中卡片是纯白 #FFFFFF（容器底是 #F7F7F7，卡片浮在上面） */
  background-color: #ffffff;
  background-image: none;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* 整卡柔和过渡：0.9s，慢起慢收 */
  transition: background-color .9s ease;
  will-change: background-color;
}

/* 选中：整卡换成蓝色渐变底（素材自带渐变 + 白色圆角块），
   用 ::before 叠一层渐变再淡入，保证只有「透明度」在变，不会有背景图跳变。 */
/* 高亮底色：参考稿的做法是「模糊 + 放大」态淡入并逐渐变清晰，
   比单纯淡入更有质感。注意 border-radius 用 inherit 才不会被方形边缘露出。 */
.fde-models__tile::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  filter: blur(14px) saturate(1.15);
  transform: scale(1.08);
  transition: opacity .45s ease, filter .45s ease, transform .45s ease;
  pointer-events: none;
}
/* 高亮底图走 CMS 的 rowBgs（模板按行写入 --fde-row-bg 变量），本地兜底图已下线 */
.fde-models__row--left .fde-models__tile::before,
.fde-models__row--right .fde-models__tile::before {
  background: var(--fde-row-bg, none) center / cover no-repeat;
}
.fde-models__tile.is-lit::before,
.fde-models__tile:hover::before {
  opacity: 1;
  filter: blur(0) saturate(1.15);
  transform: scale(1);
}

/* 卡片内的 logo：107×107 白色圆角块 + 居中图标。
   切换时做「垂直交接」：旧内容向上淡出，新内容从卡片下边缘向上滑入并淡入。
   位移约为卡片高度（248）的 20% ≈ 50px；时长 0.45s、先快后缓。
   卡片外框与底色不动（底色由 ::before 单独淡入），只有框内内容在动。 */
/* =============================================================================
   Logo 垂直交接（严格照搬参考实现的时序）

   参考稿的做法是**两层同时过渡**（都 .45s），不是先后接力：
     旧内容：opacity .45s ease + transform .45s ease，选中时上移 -14% 并淡出
     新内容：opacity .45s ease + transform .45s cubic-bezier(.22,.61,.36,1)，
             初始在下方 26%，选中时上移到 0 并淡入
   之前改成延迟/关键帧反而不自然，恢复参考稿写法。
   ============================================================================= */

.fde-models__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -53.5px;
  margin-top: -53.5px;
  width: 107px;
  height: 107px;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 14px;
  background: #f7f7f7;
  object-fit: contain;
  z-index: 1;
  opacity: 1;
  transform: translateY(0);
  /* 旧内容退场：延迟 150ms 才开始、退场只用 300ms（比新层的 450ms 短）。
     新层 0→450ms 淡入、旧层 150→450ms 淡出，两层共存时间 = 300ms
     （原来是同起同落的 450ms 全程重叠）。反向取消选中时对称成立。 */
  transition: opacity .3s ease .15s, transform .3s ease .15s;
}

.fde-models__logo--lit {
  background: #ffffff;
  z-index: 2;
  opacity: 0;
  /* 参考稿的 .big 是 inset:0 铺满整卡，所以 26% 是「卡片高度」的 26% = 48.4px。
     而本组件的元素只有 107px（卡片 248 的 43%），直接写 26% 只有 27.8px，
     两层就都挤在中间糊在一起。换算成元素高度：48.4 / 107 ≈ 45%。 */
  transform: translateY(45%);
  /* 新内容进入：transform 用参考稿先快后缓的曲线 */
  transition:
    opacity .45s ease,
    transform .45s cubic-bezier(.22, .61, .36, 1);
}

/* 选中：旧内容上移淡出 */
.fde-models__tile.is-lit .fde-models__logo,
.fde-models__tile:hover .fde-models__logo {
  opacity: 0;
  transform: translateY(-14%);
}

/* 选中：新内容从下方滑入居中 */
.fde-models__tile.is-lit .fde-models__logo--lit,
.fde-models__tile:hover .fde-models__logo--lit {
  opacity: 1;
  transform: translateY(0);
}

/* 右侧玻璃面板（设计稿渐变：左上浅蓝 → 右下浅紫） */
.fde-models__panel {
  padding: 30px 36px;
  /* 兜底渐变（CMS 未配面板图时使用）。
     注意用 background-image 而非 background 简写 —— 简写会清空 inline 的
     backgroundImage，导致 CMS 配的图失效。 */
  background-image:
    radial-gradient(120% 80% at 18% 46%, #93dafe 0%, rgba(147, 218, 254, 0) 62%),
    linear-gradient(142deg, #bce6fd 0%, #a6dcfd 46%, #c2dcfd 74%, #dcc0fd 100%);
  /* 面板图是整块渐变素材（1.21:1），容器是 0.86:1 —— 用 100% 100% 拉伸铺满，
     拉伸的是纯渐变，不会有可见失真；cover 会裁掉 60% 以上的画面。 */
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* 只圆右侧两角：靠近分割线的左上/左下不弯，
     分隔线上下端点是直线（与 logo 墙的 24px 0 0 24px 对称） */
  border-radius: 0 24px 24px 0;
  /* 说明书表格是 3 列 × 4 行、按列读（列 1 DeepSeek/GLM/Hy4/Claude…），
     用 column 流复现同样的阅读顺序；不写死行数 —— 列 3 只有 3 条，
     写死 4 行会把 10 条排成 4 列并把面板撑高。 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column;
  gap: 0 26px;
  align-content: start;
}

.fde-models__entry.is-current { position: relative; }
.fde-models__panel.is-empty { min-height: 0; }

.fde-models__entry {
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  transition: opacity .5s ease;
}
.fde-models__entry-name {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: #101848;
}
.fde-models__entry-desc {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(16, 24, 72, .62);
}
.fde-models__entry-logo { height: 17px; width: auto; opacity: .85; }

/* =============================================================================
   版面 7：CTA 预约（设计稿：y 5855–6560，内容 1322，左 842 / 右 475）
   ============================================================================= */
/* 设计稿实测：整块高 705（要求 704），内容顶距块顶 177、底部留白 100。
   背景：上传的图（4005×1468）左下角自带一段粉白圆弧（素材烤死的），
   cover 铺满时刚好露出、看着像突兀的小弧线。这里把图放大到 118% 高、
   锚定右上 —— 左侧约 15% 与底部约 15% 被裁出可视区，弧线随之消失；
   被裁掉的是纯渐变天空区，无内容损失。 */
.fde-cta {
  position: relative;
  padding: 177px 0 100px;
  min-height: 704px;
  background-size: auto 118%;
  background-position: right top;
  background-repeat: no-repeat;
  overflow: hidden;
}

.fde-cta__inner {
  width: min(var(--fde-container), calc(100% - 96px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 844fr 477fr;
  gap: 0;
  align-items: start;
}

.fde-cta__title {
  margin: 0;
  font-size: 54px;
  line-height: 1.6;
  font-weight: 600;
  color: #0b0c0e;
}
.fde-cta__desc {
  margin: 30px 0 0;
  font-size: 16px;
  line-height: 2;
  color: #2f3547;
}

.fde-cta__form-title {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  color: #fff;
}
.fde-cta__form-sub {
  margin: 10px 0 40px;
  font-size: 16px;
  color: rgba(255, 255, 255, .88);
}

.fde-cta__field {
  display: block;
  width: 100%;
  height: 53px;
  margin-bottom: 41px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #fff;
  font-size: 15px;
  color: #1c2030;
  font-family: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.fde-cta__field::placeholder { color: #9aa1ac; }
.fde-cta__field:focus {
  outline: none;
  border-color: #1c73e9;
  box-shadow: 0 0 0 3px rgba(28, 115, 233, .15);
}

.fde-cta__agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 36px;
  font-size: 15px;
  line-height: 1.7;
  color: #6d7280;
}
.fde-cta__agree input { margin-top: 4px; accent-color: #1c73e9; }
.fde-cta__agree a { color: #1c73e9; text-decoration: none; }

.fde-cta__submit {
  width: 325px;
  max-width: 100%;
  height: 57px;
  margin: 0;
  display: flex;
}
.fde-cta__submit[disabled] { opacity: .6; cursor: default; }
.fde-cta__submit[data-done='1'] { background: #1f9d55; }

.fde-cta__error {
  margin: 12px 0 0;
  font-size: 14px;
  /* 与留资弹窗的错误提示同色（#e02020）。原来是浅粉 #ffe1e1——那是按深蓝底
     上的可读性调的，但表单底色是图片的浅色区，浅粉几乎看不见 */
  color: #e02020;
}

/* =============================================================================
   响应式
   ============================================================================= */
@media (max-width: 1400px) {
  .fde-cta__inner { gap: 96px; }
  /* 窄屏表单整体高一截，收起上下留白把整块压在 704 */
  .fde-cta { padding: 130px 0 80px; }
  .fde-cases__arrow--prev { left: 24px; }
  .fde-cases__arrow--next { right: 24px; }
  .fde-cta__submit { margin-left: 0; }
}

/* 平板宽度：导航链路收窄间距，避免胶囊撑出可视区 */
@media (max-width: 1100px) {
  .fde-nav__link { padding: 7px 12px; }
  .fde-nav__links { gap: 4px; margin-left: 40px; }
  .fde-nav__cta { margin-left: 32px; }
}

@media (max-width: 1200px) {
  .fde-support__grid,
  .fde-models__body { width: calc(100% - 48px); }
  .fde-cta__inner { width: calc(100% - 48px); }
  .fde-support__body { padding: 0 32px; }
}

@media (max-width: 900px) {
  .fde-cases__card { grid-template-columns: 1fr; }
  .fde-cases__right { border-left: 0; border-top: 1px solid #eef0f5; }
  .fde-cases__left { min-height: auto; }
  .fde-cases__slide { width: calc(100% - 32px); }
  .fde-cases__track {
    gap: 16px;
    transform: translate3d(calc(-1 * (var(--fde-case-index, 0) * (100vw - 16px))), 0, 0);
  }
  .fde-cases__track > .fde-cases__slide { width: calc(100vw - 32px); }
  .fde-models__body { grid-template-columns: 1fr; }
  .fde-models__wall { border-radius: 24px 24px 0 0; }
  /* CTA 保持双列到 768：900 就堆叠会把整块顶到 950+，设计稿是 705。
     769-900 双列（左右各 ~450/250px）刚好放得下。 */
  .fde-cta__form-title, .fde-cta__form-sub { color: #fff; }
}

/* 导航在窄屏折叠（比页面其它 768 断点更早：5 个选项卡 + 按钮在 880px 以下放不下） */
@media (max-width: 880px) {
  .fde-nav {
    top: 12px;
    width: calc(100% - 32px);
    max-width: none;
    height: 56px;
    padding: 0 10px 0 16px;
  }
  .fde-nav__brand { font-size: 17px; margin-right: auto; }
  .fde-nav__brand svg { width: 24px; height: 24px; }
  .fde-nav__toggle { display: flex; align-items: center; justify-content: center; }
  .fde-nav__menu { display: none; }

  /* 展开：整组（链接 + 按钮）下沉成一张与胶囊同宽的玻璃面板 */
  .fde-nav.is-open .fde-nav__menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 8px);
    padding: 12px;
    border-radius: 20px;
    /* 下拉面板用实色底：父级 .fde-nav 已有 backdrop-filter，
       子元素再套 blur 拿不到页面背景，半透明会让首屏大标题透上来。 */
    background: #0d1533;
    box-shadow: 0 20px 30px rgba(77, 90, 108, .18);
    border: 1px solid rgba(255, 255, 255, .1);
  }
  .fde-nav.is-light.is-open .fde-nav__menu {
    background: #ffffff;
    border-color: rgba(0, 0, 0, .06);
  }

  .fde-nav.is-open .fde-nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
  }
  .fde-nav.is-open .fde-nav__link {
    display: block;
    padding: 12px 8px;
    border-radius: 12px;
    font-size: 15px;
  }
  .fde-nav.is-open .fde-nav__cta {
    margin: 8px 0 0;
    height: 40px;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  /* 首屏 */
  .fde-hero { min-height: auto; padding-bottom: 120px; }
  .fde-hero particle-banner { display: none; }
  .fde-hero__still {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #101848 url('/dist/images/fde/1-banner-mobile.jpg') top center / 100% auto no-repeat;
  }
  /* 原「导航 margin-top 24 + 高度 64 + 内容 64」= 152 */
  .fde-hero__content { width: calc(100% - 40px); padding-top: 152px; }
  .fde-hero__title { font-size: 32px; }
  /* 移动端两行块变小（约 350×78），桌面那组椭圆百分比会显得过扁，放大纵轴 */
  .fde-hero__title-grad {
    background-image: radial-gradient(
      ellipse 46% 150% at 50% 40%,
      #fff 0%,
      #fff 28%,
      #f7fcff 36%,
      #dbf2ff 46%,
      #a8dfff 56%,
      #45bbff 66%,
      #0a96ec 76%,
      #077bcc 88%
    );
  }
  .fde-hero__desc { font-size: 14px; margin-top: 24px; }
  .fde-hero__cta { margin-top: 36px; }
  .fde-hero__cta .fde-btn { height: 48px; padding: 0 36px; font-size: 16px; }

  .fde-section-head,
  .fde-team__card { width: calc(100% - 40px); }
  .fde-section-title { font-size: 28px; }
  .fde-section-sub { font-size: 14px; margin-top: 16px; }

  .fde-team { padding: 32px 0 70px; }
  .fde-team::before { height: calc(100% - 20px); width: calc(100% - 16px); border-radius: 20px; }
  .fde-team__card { margin-top: 36px; border-radius: 16px; }
  .fde-team__head { padding: 16px 24px; min-height: 64px; }
  .fde-team__head-label { font-size: 16px; }
  .fde-team__item { padding: 22px 24px; gap: 14px; }
  .fde-team__item-title { font-size: 20px; }
  .fde-team__item-desc { font-size: 14px; }


  .fde-cases { padding: 64px 0 90px; }
  .fde-cases__viewport { margin-top: 36px; }
  .fde-cases__left { padding: 28px 24px; }
  .fde-cases__tag { height: 24px; font-size: 14px; padding: 0 12px; margin-bottom: 20px; }
  .fde-cases__title { font-size: 22px; line-height: 1.5; margin-bottom: 16px; }
  .fde-cases__desc { font-size: 14px; line-height: 1.9; }
  .fde-cases__cta { height: 44px; padding: 0 24px; font-size: 14px; }
  .fde-cases__right { padding: 28px 24px; }
  .fde-steps__label { font-size: 18px; }
  .fde-steps__bubble-body { margin-left: 0; font-size: 14px; }
  .fde-cases__arrow {
    top: auto; bottom: -8px; translate: none;
    width: 52px; height: 52px; font-size: 20px;
  }
  .fde-cases__arrow--prev { left: calc(50% - 64px); }
  .fde-cases__arrow--next { right: calc(50% - 64px); }
  .fde-cases__viewport { padding-bottom: 80px; }

  .fde-support { padding: 64px 0 76px; }
  .fde-support__grid { grid-template-columns: 1fr; gap: 20px; margin-top: 36px; }

  .fde-models { padding: 64px 0 76px; }
  .fde-models__body { margin-top: 36px; }
  .fde-models__wall { padding: 24px; gap: 12px; }
  /* 移动端面板改纵向单列：必须复位 column 流，否则 1 列 × 10 条会横向撑开 */
  .fde-models__panel {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    padding: 24px;
    border-radius: 0 0 24px 24px;
  }

  /* CTA 在 768 以下才堆叠；间距全部收紧，尽量贴近 705 的设计高度
     （内容本身比桌面多占一倍纵向空间，705 放不下，这是能压到的下限） */
  .fde-cta { padding: 56px 0 56px; }
  .fde-cta__inner { grid-template-columns: 1fr; gap: 24px; }
  .fde-cta__title { font-size: 28px; }
  .fde-cta__desc { margin-top: 16px; }
  .fde-cta__form-title { font-size: 24px; }
  .fde-cta__form-sub { margin-bottom: 20px; }
  .fde-cta__field { margin-bottom: 20px; height: 48px; }
  .fde-cta__submit { width: 100%; margin: 0; }
}

/* 减少动态效果：全部关掉动画，内容保持可见 */
/* =============================================================================
   版面 8：留资弹窗（左图右表单；Teleport 到 body，样式不依赖 .fde-page 前缀）
   参照 sem.cloudpivot.cn/eap「了解更多」弹窗：居中白卡、左图右表单、右上角关闭。
   ============================================================================= */
.fde-lead {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* 弹窗 Teleport 到 body，不在 .fde-page 里 —— .fde-btn 用到的设计令牌
     （--fde-black 等）在这里取不到值，按钮会变成透明底+白字＝看不见。
     在弹窗根上补一份。 */
  --fde-black: #0b0c0e;
  --fde-blue: #17a1ff;
}

.fde-lead__mask {
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 42, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.fde-lead__card {
  position: relative;
  display: grid;
  grid-template-columns: 45fr 55fr;
  width: min(1000px, calc(100% - 48px));
  height: min(640px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 80px rgba(10, 16, 42, .35);
}

/* 关闭按钮：纯 × 字符，不要圆形灰底盒子 */
.fde-lead__close {
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #4a4f5c;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease;
}
.fde-lead__close:hover { color: #0b0c0e; }
.fde-lead__close:focus-visible { outline: 2px solid #2b31ec; outline-offset: 2px; }

.fde-lead__media {
  /* 图 cover 填满左栏；取不到图时用品牌蓝渐变打底（纯装饰，非占位内容） */
  background: linear-gradient(160deg, #17a1ff 0%, #2b31ec 100%);
}
.fde-lead__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fde-lead__body {
  padding: 48px 52px 40px;
  overflow: auto;
  /* 右栏内容在卡内垂直居中（卡高 640、内容约 420，居中比顶对齐好看）；
     小屏内容超高时 overflow 兜底，居中自然退化为顶对齐 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fde-lead__title {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  color: #0b0c0e;
}
.fde-lead__sub {
  margin: 12px 0 32px;
  font-size: 14px;
  color: #5a5a66;
}

.fde-lead__field {
  display: block;
  width: 100%;
  height: 50px;
  margin-bottom: 22px;
  padding: 0 18px;
  border: 1px solid #d8dce6;
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  color: #101848;
  outline: none;
  transition: border-color .2s ease;
  box-sizing: border-box;
}
.fde-lead__field::placeholder { color: #9aa0ae; }
.fde-lead__field:focus { border-color: #2b31ec; }

.fde-lead__agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0 0;
  font-size: 13px;
  color: #5a5a66;
  cursor: pointer;
}
.fde-lead__agree input {
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  flex: none;
  accent-color: #1c73e9;
}
/* 协议链接：与底部咨询表单同一套（/statement/ 与 /Privacy/，#1c73e9），无下划线 */
.fde-lead__agree a { color: #1c73e9; text-decoration: none; }

.fde-lead__error {
  margin: 12px 0 0;
  font-size: 13px;
  color: #e02020;
}

.fde-lead__submit {
  width: 100%;
  height: 52px;
  margin-top: 20px;
  font-size: 17px;
}

/* 提交成功提示：弹窗关闭后页面上的一行小字。
   位置固定在视口 1/6 高度处，居中浮现，数秒后自动消失。
   承载胶囊是毛玻璃（55% 白 + 15px 背景模糊 + 1px 浅描边，导航胶囊同族配方）：
   底色透明度不能太高，否则模糊透不出来就没有玻璃感 */
.fde-lead-toast {
  position: fixed;
  top: 16.7vh;
  left: 50%;
  translate: -50% 0;
  z-index: 120;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(0, 0, 0, .05);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 20px 30px rgba(77, 90, 108, .12);
  font-size: 14px;
  color: #2b2f3a;
  animation: fde-lead-toast-in .35s ease;
}
@keyframes fde-lead-toast-in {
  from { opacity: 0; translate: -50% -8px; }
  to   { opacity: 1; translate: -50% 0; }
}

@media (max-width: 768px) {
  .fde-lead { padding: 12px; }
  .fde-lead__card {
    grid-template-columns: 1fr;
    width: calc(100vw - 24px);
    height: auto;
    max-height: calc(100vh - 24px);
  }
  .fde-lead__media { height: 168px; }
  .fde-lead__body { padding: 28px 24px 24px; }
  .fde-lead__title { font-size: 24px; }
  .fde-lead__sub { margin-bottom: 22px; }
  .fde-lead__field { height: 46px; margin-bottom: 14px; }
}

/* 减少动态效果：全部关掉动画，内容保持可见 */
@media (prefers-reduced-motion: reduce) {
  .fde-page *,
  .fde-page *::before,
  .fde-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html.js .fde-page [data-reveal]:not(.is-revealed) {
    opacity: 1;
    transform: none;
  }
  .fde-grad-text { animation: none; background-position: 0 0; }
}