@charset "UTF-8";
/* ====================================================================
   96IDCtx 前台主题 · 骨架层（头部 / 导航 / 超级菜单 / 页脚 / 内页头）
   文件：assets/css/i9-layout.css
   --------------------------------------------------------------------
   结构对标主流云厂商官网：白底双层导航（主导航 60px + 次级导航 48px）、
   左侧 Logo、中部横向菜单、右侧搜索 + 控制台 + 主按钮；页脚四列链接 + 法务条。
   ==================================================================== */

/* ====================================================================
   0. 页面骨架
   ==================================================================== */
body.i9-site { display: flex; flex-direction: column; min-height: 100vh; background: #fff; }
.i9-main { flex: 1 0 auto; }
body.i9-site.has-subnav .i9-main { padding-top: 0; }

/* ====================================================================
   1. 顶部主导航（60px）
   ==================================================================== */
.i9-header {
  position: sticky;
  top: 0;
  z-index: var(--i9-z-header);
  height: var(--i9-header-h);
  background: #fff;
  border-bottom: 1px solid var(--i9-border-soft);
  transition: box-shadow var(--i9-dur) var(--i9-ease);
}
.i9-header.is-stuck { box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.i9-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
}

/* Logo */
.i9-logo { display: inline-flex; align-items: center; flex: none; }
.i9-logo img, .i9-logo svg { height: 38px; width: auto; }

/* 主导航列表 */
/* 注意：此处不能 overflow:hidden —— 超级菜单相对 .i9-header 定位，会被裁掉。
   用 flex-wrap:nowrap + 子项 white-space:nowrap 保证不折行。 */
.i9-nav { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
.i9-nav__list { display: flex; flex-wrap: nowrap; align-items: center; height: var(--i9-header-h); }
.i9-nav__item { height: 100%; }
/* .i9-has-mega 仅为 JS 行为钩子，刻意不设任何视觉样式（尤其不能设 position） */
.i9-nav__item.i9-has-mega { }
/* 关键（此处曾出错，勿改）：JS 钩子标记 .i9-has-mega 一律不得设 position: relative。
   超级菜单 .i9-mega 是 left:0 / right:0 的通栏面板，必须让最近的已定位祖先
   落到 .i9-header（sticky 本身就是定位元素）。若在此处给它 relative，面板会以
   「单个导航项」（约 90px）为包含块，宽度塌成几十像素；而面板内部 grid 的固定
   列宽 (196px + 1fr) 会把左栏撑到 196px、右区压成 0，表现为一条竖排窄条。
   只有 .i9-has-drop（简单下拉，需要贴着导航项右对齐）保留定位上下文。 */
.i9-nav__item.i9-has-drop { position: relative; }
/* position: relative 只用于让 ::after 以本菜单项为包含块；
   它不影响 .i9-mega —— 面板是定位到 .i9-header（sticky）的。 */
.i9-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: 0 14px;
  font-size: var(--i9-fs-body);
  color: var(--i9-text-2);
  white-space: nowrap;
  transition: color var(--i9-dur-fast) var(--i9-ease);
}
.i9-nav__link:hover,
.i9-nav__item.is-open > .i9-nav__link { color: var(--i9-brand); }
/* 激活/悬停下划线
   曾出现的 bug：这里用 position:absolute + left/right:14px，
   但 .i9-nav__item 与 .i9-nav__link 当时都不是定位元素，包含块上溯到了
   .i9-header（sticky），下划线被拉成「整屏宽 − 28px」的长线，
   与 .i9-mega::before 的全宽渐变条并排看就是「两条蓝线贯穿左右不等长」。
   修法：给 .i9-nav__link 自身 position:relative，让下划线以本菜单项为包含块，
   left/right:0 铺满它的 padding box —— 长度即菜单项完整宽度。 */
.i9-nav__item.is-open > .i9-nav__link::after,
.i9-nav__link:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--i9-brand);
}
.i9-nav__link--btn { font-family: inherit; }
.i9-nav__caret { width: 12px; height: 12px; color: var(--i9-text-4); transition: transform var(--i9-dur) var(--i9-ease); }
.i9-nav__item.is-open .i9-nav__caret { transform: rotate(180deg); color: var(--i9-brand); }
.i9-nav__dot {
  width: 5px; height: 5px;
  margin-left: 2px;
  background: var(--i9-accent-red);
  border-radius: 50%;
  vertical-align: 5px;
}

/* 右侧动作区
   宽度预算（实测）：导航 7 项 ≈636px，右侧全展开 ≈604px，合计 1240px，
   而容器最多 1160px —— 必然重叠。因此采用「优先级降级」：
     ① 空间不足 → 搜索框收成仅图标（点击/聚焦展开为覆盖层，不挤占导航）
     ② 更窄    → 隐藏用户名与控制台链接
     ③ 最窄    → 隐藏注册按钮（抽屉里仍可注册）
   任何阶段都不允许覆盖遮挡导航。 */
.i9-header__actions { display: flex; align-items: center; gap: 14px; flex: none; }
.i9-header__link { font-size: var(--i9-fs-body); color: var(--i9-text-2); white-space: nowrap; }
.i9-header__link:hover { color: var(--i9-brand); }
.i9-header__divider { width: 1px; height: 16px; background: var(--i9-border); flex: none; }
.i9-header__user { display: inline-flex; align-items: center; gap: 6px; font-size: var(--i9-fs-body); white-space: nowrap; }
.i9-header__user .i9-ico { color: var(--i9-text-3); }
.i9-header__cta { white-space: nowrap; }
.i9-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px; height: 32px;
  padding: 0 6px;
}
.i9-hamburger span { display: block; height: 2px; background: var(--i9-text-2); border-radius: 1px; }

/* 搜索框：默认可收缩；收起态只留图标，展开为覆盖层（不推挤导航） */
.i9-header__actions .i9-searchbox { flex: 0 1 auto; min-width: 0; }
.i9-searchbox.is-collapsed {
  width: 32px;
  padding: 0;
  justify-content: center;
  background: none;
  position: relative;
  overflow: visible;
}
.i9-searchbox.is-collapsed input,
.i9-searchbox.is-collapsed .i9-searchbox__submit { display: none; }
.i9-searchbox.is-collapsed .i9-ico { color: var(--i9-text-3); }
.i9-searchbox.is-collapsed:hover { background: var(--i9-brand-1); }
.i9-searchbox.is-collapsed:hover .i9-ico { color: var(--i9-brand); }
/* 展开态（覆盖到右侧，绝对定位，不参与 flex 宽度计算） */
.i9-searchbox.is-open {
  position: absolute;
  top: 50%;
  right: 20px;
  z-index: 5;
  width: min(340px, 60vw);
  transform: translateY(-50%);
  background: #fff;
  border-color: var(--i9-brand);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
}
.i9-searchbox.is-open input,
.i9-searchbox.is-open .i9-searchbox__submit { display: block; }
.i9-searchbox__submit {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  padding: 0;
  color: #fff;
  background: var(--i9-brand);
  border: 0;
  border-radius: var(--i9-radius-xs);
  cursor: pointer;
}
.i9-searchbox__submit:hover { background: var(--i9-brand-hover); }
.i9-searchbox__submit .i9-ico { color: #fff; }

/* ====================================================================
   2. 次级导航：已按需求整体移除（类目并入主导航的产品超级菜单）
   —— 保留这条仅为兜底（万一有残留 DOM），新页面不应再使用该类名
   ==================================================================== */
.i9-subnav { display: none !important; }

/* ====================================================================
   3. 产品超级菜单：左栏类目 + 右侧「图标 + 一行描述」产品卡
   版式对齐主流云厂商产品页；面板以 .i9-header 为包含块，故 left/right 通栏
   ==================================================================== */
.i9-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  background: #fff;
  border-top: 1px solid var(--i9-border-soft);
  border-bottom: 1px solid var(--i9-border-soft);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s var(--i9-ease),
              transform .2s var(--i9-ease),
              visibility .2s var(--i9-ease);
}
.i9-nav__item.is-open > .i9-mega {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* 面板顶部一条主色亮线 */
.i9-mega::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #0052D9 0%, #12C2E9 50%, #0052D9 100%);
  opacity: .9;
}

/* 左栏类目 + 右侧内容 两栏布局 */
.i9-mega__body { display: flex;
  grid-template-columns: 196px minmax(0, 1fr);
  padding: 20px 0 16px;
  align-items: stretch;
  min-height: 260px;
  max-height: min(70vh, 560px);}
.i9-mega__rail {
flex: 0 0 172px;
  width: 172px;
  overflow-y: auto;
  padding: 10px 8px 14px;
  background: var(--i9-bg-soft);
  border-right: 1px solid var(--i9-border-soft);
}
.i9-mega__rail-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 2px;
  font-family: inherit;
  font-size: var(--i9-fs-body);
  color: var(--i9-text-2);
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--i9-radius-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--i9-dur-fast) var(--i9-ease), background var(--i9-dur-fast) var(--i9-ease);
}
.i9-mega__rail-item:hover { color: var(--i9-brand); background: var(--i9-brand-1); }
.i9-mega__rail-item.is-active {
  color: var(--i9-brand);
  font-weight: var(--i9-fw-semibold);
  background: var(--i9-brand-1);
}
.i9-mega__rail-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 16px;
  transform: translateY(-50%);
  background: var(--i9-brand);
  border-radius: 0 2px 2px 0;
}
.i9-mega__rail-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 6px 12px;
  font-size: var(--i9-fs-sm);
  color: var(--i9-brand);
}

.i9-mega__main {
flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 22px 20px;
}

/* 右侧：按类目切换的内容块（左栏悬停/点击切换） */
.i9-mega__side { display: none; }
.i9-mega__side.is-active { display: block; animation: i9-side-in .2s var(--i9-ease); }
@keyframes i9-side-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.i9-mega__side-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--i9-border-soft);
}
.i9-mega__side-title {
  position: relative;
  padding-left: 11px;
  font-size: var(--i9-fs-h4);
  font-weight: var(--i9-fw-semibold);
  color: var(--i9-text-2);
}
.i9-mega__side-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 14px;
  transform: translateY(-50%);
  background: var(--i9-brand);
  border-radius: 1px;
}
.i9-mega__side-desc { font-size: var(--i9-fs-xs); color: var(--i9-text-4); }
/* 「侧栏（面板）头部」的三个元素：标题 + 产品介绍 + 查看全部。
   由 .i9-mega__side-head 用 flex 推到两端，这里不再各自设 margin-left，
   避免同层重复定义（layout_check 会报属性重叠）。 */
.i9-mega__side-more { font-size: var(--i9-fs-xs); }
.i9-mega__group + .i9-mega__group { margin-top: 18px; }
.i9-mega__group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: var(--i9-fs-sm);
  font-weight: var(--i9-fw-semibold);
  color: var(--i9-text-2);
}
.i9-mega__group-title::before {
  content: "";
  width: 3px;
  height: 12px;
  background: var(--i9-brand);
  border-radius: 1px;
}
.i9-mega__group-title em {
  font-style: normal;
  font-weight: var(--i9-fw-regular);
  font-size: var(--i9-fs-xs);
  color: var(--i9-text-4);
}

/* 卡片栅格：右区可用宽 ≈924px，切换式面板每类目 2~6 张，用 3 列（每列约 292px） */
.i9-mega__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 12px;
}

/* 产品卡：图标 + 名称 + 角标 + 一行描述 +（可选）产品介绍入口
   结构：span.i9-pcard > a.i9-pcard__link（主链接）+ a.i9-pcard__type（类型页链接）
   —— 两个链接必须并列，不能嵌套（HTML 里 a 不能包含 a）。 */
.i9-pcard {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--i9-radius-sm);
  transition: background var(--i9-dur-fast) var(--i9-ease);
}
.i9-pcard:hover { background: var(--i9-brand-1); }
.i9-pcard__link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.i9-pcard__ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--i9-brand);
}
.i9-pcard__ico .i9-ico { width: 22px; height: 22px; }
.i9-pcard__body { min-width: 0; flex: 1 1 auto; }
.i9-pcard__name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--i9-fs-body);
  font-weight: var(--i9-fw-medium);
  color: var(--i9-text-2);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.i9-pcard:hover .i9-pcard__name { color: var(--i9-brand); }
.i9-pcard__desc {
  margin-top: 1px;
  font-size: var(--i9-fs-xs);
  line-height: 1.5;
  color: var(--i9-text-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 「产品介绍」入口：悬浮时才明显，避免面板视觉噪声 */
.i9-pcard__type {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 8px;
  font-size: var(--i9-fs-xs);
  color: var(--i9-text-4);
  border: 1px solid transparent;
  border-radius: var(--i9-radius-pill);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--i9-dur-fast) var(--i9-ease), color var(--i9-dur-fast) var(--i9-ease),
              border-color var(--i9-dur-fast) var(--i9-ease);
}
.i9-pcard:hover .i9-pcard__type { opacity: 1; }
.i9-pcard__type:hover { color: var(--i9-brand); border-color: var(--i9-brand); }
/* 触屏没有 hover，直接显示 */
@media (hover: none) {
  .i9-pcard__type { opacity: 1; }
}

.i9-mega__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 0 0 18px;
  margin-top: 4px;
}
.i9-mega__links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.i9-mega__links a { font-size: var(--i9-fs-sm); color: var(--i9-text-3); }
.i9-mega__links a:hover { color: var(--i9-brand); }
.i9-mega__links a:first-child { color: var(--i9-brand); font-weight: var(--i9-fw-medium); }

/* ---- 兼容块：解决方案 / 关于我们 两个面板仍在使用的简易网格样式 ----
   （产品面板已升级为左栏+卡片，这两个面板保持原有多列链接形态） */
.i9-mega__inner { padding: 22px 0 18px; }
.i9-mega__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 40px;
}
.i9-mega__col { min-width: 0; }
.i9-mega__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  font-size: var(--i9-fs-sm);
  font-weight: var(--i9-fw-semibold);
  color: var(--i9-text-2);
  border-bottom: 1px solid var(--i9-border-soft);
}
.i9-mega__title::before {
  content: "";
  width: 3px;
  height: 12px;
  background: var(--i9-brand);
  border-radius: 1px;
}
.i9-mega__list li + li { margin-top: 1px; }
.i9-mega__list a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  margin-inline: -8px;
  font-size: var(--i9-fs-sm);
  color: var(--i9-text-3);
  border-radius: var(--i9-radius-sm);
  white-space: nowrap;
  transition: color var(--i9-dur-fast) var(--i9-ease), background var(--i9-dur-fast) var(--i9-ease);
}
.i9-mega__list a:hover { color: var(--i9-brand); background: var(--i9-brand-1); }
.i9-mega__list .i9-news__tag { flex: none; transform: scale(.94); }
/* 展开展开时的页面遮罩 */
.i9-mega-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--i9-z-header) - 1);
  background: rgba(0, 0, 0, .28);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--i9-ease), visibility .22s var(--i9-ease);
}
body.is-mega-open .i9-mega-backdrop { opacity: 1; visibility: visible; }

/* 简单下拉（少量条目） */
.i9-drop {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--i9-z-mega);
  min-width: 160px;
  padding: 6px 0;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-sm);
  box-shadow: var(--i9-sh-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--i9-dur) var(--i9-ease);
}
.i9-nav__item.is-open > .i9-drop { opacity: 1; visibility: visible; transform: none; }
.i9-drop--right { left: auto; right: 0; }
.i9-drop a {
  display: block;
  padding: 7px 16px;
  font-size: var(--i9-fs-sm);
  color: var(--i9-text-2);
}
.i9-drop a:hover { color: var(--i9-brand); background: var(--i9-brand-1); }
.i9-drop__sep { height: 1px; margin: 6px 0; background: var(--i9-border-soft); }

/* ====================================================================
   4. 移动端抽屉导航
   ==================================================================== */
.i9-nav-mask { z-index: calc(var(--i9-z-drawer) - 1); }
.i9-mnav { display: flex; flex-direction: column; }
.i9-mnav > li { border-bottom: 1px solid var(--i9-border-soft); }
.i9-mnav > li > a,
.i9-mnav__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%;
  padding: 13px 2px;
  font-family: inherit;
  font-size: var(--i9-fs-h4);
  color: var(--i9-text-2);
  text-align: left;
}
.i9-mnav__toggle .i9-ico { color: var(--i9-text-4); transition: transform var(--i9-dur) var(--i9-ease); }
.i9-mnav__group.is-open .i9-mnav__toggle { color: var(--i9-brand); }
.i9-mnav__group.is-open .i9-mnav__toggle .i9-ico { transform: rotate(180deg); color: var(--i9-brand); }
.i9-mnav__panel { padding-bottom: 12px; }
.i9-mnav__sub {
  margin: 10px 0 4px;
  font-size: var(--i9-fs-xs);
  color: var(--i9-text-4);
}
.i9-mnav__panel ul a {
  display: block;
  padding: 8px 10px;
  font-size: var(--i9-fs-body);
  color: var(--i9-text-3);
  border-radius: var(--i9-radius-sm);
}
.i9-mnav__panel ul a:hover { color: var(--i9-brand); background: var(--i9-brand-1); }
.i9-mnav__login { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.i9-mnav__user {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px;
  font-size: var(--i9-fs-sm);
  background: var(--i9-bg-soft);
  border-radius: var(--i9-radius-sm);
  margin-bottom: 12px;
}
.i9-mnav__user a { color: var(--i9-brand); }

/* ====================================================================
   5. 内页页头（面包屑 + 标题 + 副标题 + 右侧动作）
   ==================================================================== */
.i9-pagehead {
  padding-block: 24px 20px;
  background: #fff;
  border-bottom: 1px solid var(--i9-border-soft);
}
.i9-pagehead--gray { background: var(--i9-bg-gray); border-bottom-color: transparent; }
.i9-pagehead--blue { background: var(--i9-bg-blue); border-bottom-color: transparent; }
.i9-pagehead__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.i9-pagehead__crumb { margin-bottom: 10px; }
.i9-pagehead__title {
  font-size: var(--i9-fs-h1);
  line-height: var(--i9-lh-h1);
  font-weight: var(--i9-fw-semibold);
  color: var(--i9-text-2);
}
.i9-pagehead__desc {
  margin-top: 8px;
  max-width: 820px;
  font-size: var(--i9-fs-sm);
  color: var(--i9-text-3);
}
.i9-pagehead__actions { flex: none; display: flex; align-items: center; gap: 12px; }

/* ====================================================================
   5. 内页通用：区块 / 栅格 / 区块头 / 图标盒 / 提示条
   （产品类型页与解决方案页共用，保证 14 个页面视觉一致）
   ==================================================================== */
.i9-container--narrow { max-width: 960px; }

.i9-section { padding-block: var(--i9-sec-py); }
.i9-section--soft { background: var(--i9-bg-soft); }
.i9-section--tight { padding-block: 32px; }

.i9-grid { display: grid; gap: 20px; }
.i9-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.i9-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.i9-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.i9-grid--gap-sm { gap: 16px; }

.i9-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.i9-sec-head__left { min-width: 0; }
.i9-sec-head__title {
  font-size: var(--i9-fs-h2);
  line-height: var(--i9-lh-h2);
  font-weight: var(--i9-fw-semibold);
  color: var(--i9-text-1);
}
.i9-sec-head__desc { margin-top: 6px; font-size: var(--i9-fs-sm); color: var(--i9-text-3); }
.i9-sec-head__more {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--i9-fs-sm);
  color: var(--i9-brand);
  white-space: nowrap;
}
.i9-sec-head__more:hover { color: var(--i9-brand-hover); }

.i9-ico-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--i9-brand);
  background: var(--i9-brand-1);
  border-radius: var(--i9-radius-md);
}

.i9-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  font-size: var(--i9-fs-sm);
  line-height: 1.7;
  color: var(--i9-text-3);
  background: var(--i9-brand-1);
  border: 1px solid var(--i9-brand-3);
  border-radius: var(--i9-radius-md);
}
.i9-alert .i9-ico { flex: none; margin-top: 3px; color: var(--i9-brand); }
.i9-alert a { color: var(--i9-brand); }

/* ---- 活动页：促销横幅 + 机型卡 ---- */
.i9-promo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.i9-promo__item {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
}
.i9-promo__ico { flex: none; color: var(--i9-brand); }
.i9-promo__v { font-size: var(--i9-fs-h4); font-weight: var(--i9-fw-bold); color: var(--i9-text-1); }
.i9-promo__k { margin-top: 2px; font-size: var(--i9-fs-xs); color: var(--i9-text-4); }

/* 机型卡：横向对比用 */
.i9-acard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
  transition: border-color var(--i9-dur) var(--i9-ease), box-shadow var(--i9-dur) var(--i9-ease),
              transform var(--i9-dur) var(--i9-ease);
}
.i9-acard:hover { border-color: var(--i9-brand-3); box-shadow: var(--i9-sh-2); transform: translateY(-3px); }
.i9-acard--hot { border-color: var(--i9-brand-3); }
.i9-acard__flag {
  position: absolute;
  top: -1px;
  right: 16px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: var(--i9-fw-medium);
  color: #fff;
  background: linear-gradient(135deg, var(--i9-brand), var(--i9-cyan));
  border-radius: 0 0 4px 4px;
}
.i9-acard__name { font-size: var(--i9-fs-h4); font-weight: var(--i9-fw-semibold); color: var(--i9-text-1); }
.i9-acard__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 2px 9px;
  font-size: var(--i9-fs-xs);
  color: var(--i9-brand);
  background: var(--i9-brand-1);
  border-radius: var(--i9-radius-pill);
  align-self: flex-start;
}
.i9-acard__specs { margin: 14px 0 0; padding: 0; list-style: none; }
.i9-acard__specs li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 6px;
  font-size: var(--i9-fs-sm);
  color: var(--i9-text-2);
  line-height: 1.6;
}
.i9-acard__specs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  background: var(--i9-brand-4);
  border-radius: 50%;
}
.i9-acard__pricebox {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--i9-border-soft);
}
.i9-acard__was { font-size: var(--i9-fs-xs); color: var(--i9-text-4); text-decoration: line-through; }
.i9-acard__now { display: flex; align-items: baseline; gap: 4px; margin-top: 2px; }
.i9-acard__now b { font-size: 26px; font-weight: var(--i9-fw-bold); color: var(--i9-error); line-height: 1; }
.i9-acard__unit { font-size: var(--i9-fs-xs); color: var(--i9-text-4); }
.i9-acard__agent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 2px 9px;
  font-size: var(--i9-fs-xs);
  color: var(--i9-warning-text);
  background: var(--i9-warning-bg);
  border-radius: var(--i9-radius-pill);
  align-self: flex-start;
}
.i9-acard__acts { display: flex; gap: 8px; margin-top: 14px; }
.i9-acard__acts .i9-btn { flex: 1 1 auto; }
.i9-acard__note { margin-top: 10px; font-size: var(--i9-fs-xs); color: var(--i9-text-4); line-height: 1.6; }

@media (max-width: 1200px) { .i9-promo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .i9-promo { grid-template-columns: minmax(0, 1fr); } }

/* ---- 在线服务 / AI 对话页（chat.html）---- */
.i9-chat-intro { text-align: center; padding-block: 40px 24px; }
.i9-chat-intro__title {
  font-size: var(--i9-fs-h1);
  line-height: var(--i9-lh-h1);
  font-weight: var(--i9-fw-bold);
  color: var(--i9-text-1);
}
.i9-chat-intro__title .hl {
  background: linear-gradient(100deg, var(--i9-brand), var(--i9-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.i9-chat-intro__desc { margin-top: 10px; font-size: 15px; color: var(--i9-text-3); }
.i9-chat-intro__badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.i9-chat-intro__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: var(--i9-fs-sm);
  color: var(--i9-text-3);
  background: var(--i9-brand-1);
  border-radius: var(--i9-radius-pill);
}
.i9-chat-intro__badge .i9-ico { color: var(--i9-brand); }

/* 对话主体：左热门咨询 + 右对话框 */
.i9-chat {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  /* 固定高度：随视口高度自适应，但有上下限，避免消息多时把页面拉长 */
  height: clamp(460px, 70vh, 620px);
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
  overflow: hidden;
  box-shadow: var(--i9-sh-2);

  /* 加固：确保高度不被内容撑开（嵌套 flex 里 flex-basis:auto 推算不可靠） */
  min-height: 0;
  max-height: 620px;
}
.i9-chat__side {
  display: flex;
  flex-direction: column;
  background: var(--i9-bg-soft);
  border-right: 1px solid var(--i9-border-soft);
}
.i9-chat__side-head { padding: 16px 16px 10px; }
.i9-chat__side-title { font-size: var(--i9-fs-body); font-weight: var(--i9-fw-semibold); color: var(--i9-text-2); }
.i9-chat__side-sub { margin-top: 2px; font-size: var(--i9-fs-xs); color: var(--i9-text-4); }
.i9-chat__quick { flex: 1 1 auto; overflow-y: auto; padding: 0 10px 10px; }
.i9-chat__quick-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  margin-bottom: 2px;
  font-family: inherit;
  font-size: var(--i9-fs-sm);
  color: var(--i9-text-2);
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--i9-radius-sm);
  cursor: pointer;
  transition: all var(--i9-dur-fast) var(--i9-ease);
}
.i9-chat__quick-item .i9-ico { flex: none; color: var(--i9-brand); }
.i9-chat__quick-item:hover { color: var(--i9-brand); background: #fff; }
.i9-chat__quick-item.is-active { color: var(--i9-brand); background: #fff; font-weight: var(--i9-fw-medium); }
.i9-chat__side-foot { padding: 12px 16px; border-top: 1px solid var(--i9-border-soft); }
.i9-chat__side-fl { font-size: var(--i9-fs-xs); color: var(--i9-text-4); margin-bottom: 8px; }
.i9-chat__contact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-sm);
  transition: all var(--i9-dur-fast) var(--i9-ease);
}
.i9-chat__contact:hover { border-color: var(--i9-brand); }
.i9-chat__contact .i9-ico { flex: none; color: var(--i9-brand); }
.i9-chat__contact-l { font-size: var(--i9-fs-xs); color: var(--i9-text-4); }
.i9-chat__contact-v { font-size: var(--i9-fs-sm); color: var(--i9-text-2); font-weight: var(--i9-fw-medium); }

.i9-chat__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; 
  /* 加固：从 grid 单元格取得确定高度，供内部 flex 子项换算 */
  flex: 1 1 auto;
  height: 100%;
}
.i9-chat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--i9-border-soft);
}
.i9-chat__who { display: flex; align-items: center; gap: 10px; }
.i9-chat__avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  font-size: 15px;
  font-weight: var(--i9-fw-semibold);
  color: #fff;
  background: linear-gradient(135deg, var(--i9-brand), var(--i9-cyan));
  border-radius: 50%;
  overflow: hidden;
}
.i9-chat__avatar img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  background: var(--i9-brand-1);
}
.i9-chat__avatar i {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 9px; height: 9px;
  background: var(--i9-success);
  border: 2px solid #fff;
  border-radius: 50%;
}
.i9-chat__name { font-size: var(--i9-fs-body); font-weight: var(--i9-fw-semibold); color: var(--i9-text-1); }
.i9-chat__status { display: flex; align-items: center; gap: 4px; font-size: var(--i9-fs-xs); color: var(--i9-success); }
.i9-chat__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  font-size: var(--i9-fs-xs);
  color: var(--i9-brand);
  background: var(--i9-brand-1);
  border-radius: var(--i9-radius-pill);
}

.i9-chat__view { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; 
  /* 加固：从父级取得确定高度，内部滚动容器的高度才成立 */
  height: 100%;
}
.i9-chat__msgs {
  flex: 1 1 auto;
  min-height: 0;                 /* 让 flex 子项可收缩，overflow 才会生效 */
  overflow-y: auto;
  overscroll-behavior: contain;  /* 滚到底不带动整页滚动 */
  padding: 18px;
  background: var(--i9-bg-page);
  scrollbar-width: thin;

  /* 加固：滚动区上限跟随父级 */
  max-height: 100%;
}
/* 聊天滚动区：细滚动条 */
.i9-chat__msgs::-webkit-scrollbar { width: 6px; }
.i9-chat__msgs::-webkit-scrollbar-thumb {
  background: rgba(17, 24, 39, .16);
  border-radius: 3px;
}
.i9-chat__msgs::-webkit-scrollbar-thumb:hover { background: rgba(17, 24, 39, .28); }
.i9-chat__msgs::-webkit-scrollbar-track { background: transparent; }
.i9-msg { display: flex; gap: 9px; margin-bottom: 14px; }
/* 机器人消息：头像在左（默认方向即可，显式声明以保持类名完整） */
.i9-msg--bot { flex-direction: row; }
.i9-msg--user { flex-direction: row-reverse; }
.i9-msg__av {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  font-size: 13px;
  font-weight: var(--i9-fw-semibold);
  color: #fff;
  background: linear-gradient(135deg, var(--i9-brand), var(--i9-cyan));
  border-radius: 50%;
  overflow: hidden;
}
.i9-msg__av img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  background: var(--i9-brand-1);
}
.i9-bubble {
  max-width: 78%;
  padding: 10px 14px;
  font-size: var(--i9-fs-body);
  line-height: 1.75;
  color: var(--i9-text-2);
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
  word-break: break-word;
}
.i9-msg--user .i9-bubble { color: #fff; background: var(--i9-brand); border-color: var(--i9-brand); }
.i9-bubble a { color: var(--i9-brand); }
.i9-typing { display: inline-flex; gap: 4px; padding: 14px 16px; background: #fff; border: 1px solid var(--i9-border-soft); border-radius: var(--i9-radius-md); }
.i9-typing span {
  width: 6px; height: 6px;
  background: var(--i9-brand-4);
  border-radius: 50%;
  animation: i9-typing 1.2s infinite ease-in-out;
}
.i9-typing span:nth-child(2) { animation-delay: .18s; }
.i9-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes i9-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.i9-fallback {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: var(--i9-fs-xs);
  color: var(--i9-brand);
  background: var(--i9-brand-1);
  border: 1px solid var(--i9-brand-3);
  border-radius: var(--i9-radius-pill);
  cursor: pointer;
}
.i9-chat__quickrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 18px 0;
  background: var(--i9-bg-page);

  /* 加固：快捷行不参与伸缩 */
  flex: none;
}
.i9-q {
  padding: 5px 12px;
  font-size: var(--i9-fs-xs);
  color: var(--i9-text-3);
  background: #fff;
  border: 1px solid var(--i9-border-input);
  border-radius: var(--i9-radius-pill);
  cursor: pointer;
  transition: all var(--i9-dur-fast) var(--i9-ease);
}
.i9-q:hover { color: var(--i9-brand); border-color: var(--i9-brand); }
.i9-chat__input { padding: 12px 18px 16px; background: var(--i9-bg-page); 
  /* 加固：输入区固定在底部，不参与伸缩 */
  flex: none;
}
.i9-chat__input-row { display: flex; gap: 10px; align-items: flex-end; }
.i9-chat__input-box {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--i9-border-input);
  border-radius: var(--i9-radius-md);
  transition: border-color var(--i9-dur-fast) var(--i9-ease), box-shadow var(--i9-dur-fast) var(--i9-ease);
}
.i9-chat__input-box:focus-within { border-color: var(--i9-brand); box-shadow: 0 0 0 3px var(--i9-brand-ring); }
.i9-chat__input-box textarea {
  display: block;
  width: 100%;
  max-height: 120px;
  font-family: inherit;
  font-size: var(--i9-fs-body);
  line-height: 1.6;
  color: var(--i9-text-2);
  background: none;
  border: 0;
  outline: 0;
  resize: none;
}
.i9-chat__send {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 20px;
  font-family: inherit;
  font-size: var(--i9-fs-body);
  font-weight: var(--i9-fw-medium);
  color: #fff;
  background: var(--i9-brand);
  border: 0;
  border-radius: var(--i9-radius-md);
  cursor: pointer;
  transition: background var(--i9-dur-fast) var(--i9-ease);
}
.i9-chat__send:hover { background: var(--i9-brand-hover); }

/* 留言表单视图 */
.i9-chat__form { display: none; flex: 1 1 auto; overflow-y: auto; padding: 18px; }
.i9-chat__form.is-show { display: block; }
.i9-chat__form-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.i9-chat__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: var(--i9-fs-sm);
  color: var(--i9-text-3);
  background: #fff;
  border: 1px solid var(--i9-border-input);
  border-radius: var(--i9-radius-sm);
  cursor: pointer;
}
.i9-chat__back:hover { color: var(--i9-brand); border-color: var(--i9-brand); }
.i9-chat__form-title { font-size: var(--i9-fs-h4); font-weight: var(--i9-fw-semibold); color: var(--i9-text-1); }
.i9-chat__form .i9-field { margin-bottom: 14px; }
.i9-chat__form .i9-field__label { font-size: var(--i9-fs-sm); color: var(--i9-text-2); }
.i9-chat__form .i9-req { color: var(--i9-error); }
.i9-chat__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 22px;
  font-family: inherit;
  font-size: var(--i9-fs-body);
  font-weight: var(--i9-fw-medium);
  color: #fff;
  background: var(--i9-brand);
  border: 0;
  border-radius: var(--i9-radius-md);
  cursor: pointer;
}
.i9-chat__submit:disabled { opacity: .6; cursor: not-allowed; }
.i9-chat__spinner {
  display: none;
  width: 13px; height: 13px;
  border: 2px solid rgba(255, 255, 255, .5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: i9-spin .7s linear infinite;
}
.i9-chat__submit.is-loading .i9-chat__spinner { display: inline-block; }
@keyframes i9-spin { to { transform: rotate(360deg); } }
.i9-result { margin-top: 12px; font-size: var(--i9-fs-sm); }
.i9-result.is-success { color: var(--i9-success); }
.i9-result.is-error { color: var(--i9-error); }

/* FAQ 手风琴 */
.i9-faq__item { border-bottom: 1px solid var(--i9-border-soft); }
.i9-faq__item:last-child { border-bottom: 0; }
.i9-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 2px;
  font-size: var(--i9-fs-body);
  font-weight: var(--i9-fw-medium);
  color: var(--i9-text-2);
  cursor: pointer;
}
.i9-faq__q .i9-ico { flex: none; color: var(--i9-text-4); transition: transform var(--i9-dur) var(--i9-ease); }
.i9-faq__item.is-open .i9-faq__q { color: var(--i9-brand); }
.i9-faq__item.is-open .i9-faq__q .i9-ico { transform: rotate(180deg); color: var(--i9-brand); }
.i9-faq__a { display: none; padding: 0 2px 14px; font-size: var(--i9-fs-sm); line-height: 1.8; color: var(--i9-text-3); }
.i9-faq__item.is-open .i9-faq__a { display: block; }

@media (max-width: 992px) {
  .i9-chat { grid-template-columns: minmax(0, 1fr); height: clamp(440px, 72vh, 600px); }
  .i9-chat__side { display: none; }
  .i9-chat__main { min-height: 0; }
}
@media (max-width: 768px) {
  .i9-chat-intro { padding-block: 26px 16px; }
  .i9-chat-intro__title { font-size: var(--i9-fs-h2); }
  .i9-chat__msgs { padding: 14px; }
  .i9-bubble { max-width: 86%; }
  .i9-chat__input { padding: 10px 14px 14px; }
  .i9-chat__send { padding: 0 14px; }
}

/* ====================================================================
   右侧悬浮条（按截图形态重做）
   结构：独立圆头像 → 圆角竖条（图标 + 可见短标签）→ 独立圆形到顶按钮
   宽度 56px；条内标签只写 2 字（售前 / 咨询 / 活动 / 工单），完整说明走悬停提示。
   ==================================================================== */
.i9-float {
  position: fixed;
  right: 16px;
  bottom: 88px;
  z-index: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 56px;
}

/* 顶部独立圆头像（带白色描边，与下方竖条分离） */
.i9-float__av {
  position: relative;
  display: block;
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  transition: transform var(--i9-dur) var(--i9-ease);
}
.i9-float__av:hover { transform: translateY(-2px); }
.i9-float__av img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  background: var(--i9-brand-1);
  border: 2px solid #fff;
}
.i9-float__av i {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 10px;
  height: 10px;
  background: var(--i9-success);
  border: 2px solid #fff;
  border-radius: 50%;
}

/* 竖条本体 */
.i9-float__rail {
  display: flex;
  flex-direction: column;
  width: 56px;
  padding: 4px 0;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .1);
}

/* 条内项目：图标在上、短标签在下（与截图一致） */
.i9-float__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 54px;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.1;
  color: var(--i9-text-2);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--i9-dur-fast) var(--i9-ease);
}
.i9-float__btn .i9-ico { color: var(--i9-text-1); transition: color var(--i9-dur-fast) var(--i9-ease); }
.i9-float__btn:hover { color: var(--i9-brand); }
.i9-float__btn:hover .i9-ico { color: var(--i9-brand); }

/* 项目之间的短横线（截图里的细横线） */
.i9-float__sep {
  width: 20px;
  height: 1px;
  margin: 0 auto;
  background: var(--i9-border-soft);
}

/* 到顶按钮：独立圆形，与竖条留出间距
   显隐用「淡入 + 上移 + 微放大」过渡，而不是 display 切换 —— display 无法产生动画。
   默认 visibility:hidden，保证隐藏时不可点击、不可聚焦。 */
.i9-float__top {
  display: flex;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-top: 10px;
  gap: 0;
  color: var(--i9-text-2);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.85);
  transition: opacity .32s var(--i9-ease),
              transform .32s var(--i9-ease),
              visibility .32s var(--i9-ease),
              color var(--i9-dur-fast) var(--i9-ease);
  will-change: opacity, transform;
}
.i9-float__top.is-show {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.i9-float__top:hover { color: var(--i9-brand); }
.i9-float__top span { display: none; }

/* 悬停提示：显示完整说明，避免条内短标签信息不足 */
.i9-float__tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  display: none;
  padding: 6px 11px;
  font-size: var(--i9-fs-xs);
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  background: rgba(29, 33, 41, .9);
  border-radius: var(--i9-radius-xs);
  pointer-events: none;
}
.i9-float__tip::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: rgba(29, 33, 41, .9);
}
.i9-float__btn:hover .i9-float__tip,
.i9-float__av:hover .i9-float__tip,
.i9-float__top:hover .i9-float__tip { display: block; }

/* 头像与到顶按钮的提示位置微调（圆形元素中心对齐） */
.i9-float__av .i9-float__tip,
.i9-float__top .i9-float__tip { right: calc(100% + 8px); }

@media (max-width: 992px) {
  .i9-float { right: 10px; bottom: 76px; width: 50px; }
  .i9-float__av { width: 40px; height: 40px; margin-bottom: 8px; }
  .i9-float__rail { width: 50px; border-radius: 25px; }
  .i9-float__btn { height: 48px; font-size: 10px; }
  .i9-float__top { width: 40px; height: 40px; margin-top: 8px; }
}

/* 用户声明减少动效时，去掉位移与缩放，仅保留极短的透明度切换 */
@media (prefers-reduced-motion: reduce) {
  .i9-float__top {
    transform: none;
    transition: opacity .01s linear, visibility .01s linear;
  }
  .i9-float__av { transition: none; }
  .i9-float__av:hover { transform: none; }
}

/* 通用卡片容器：web 内容页与 cart 层共用同一套类名，保证两处观感一致 */
.i9-cart-card {
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
}
.i9-cart-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  row-gap: 6px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--i9-border-soft);
}
.i9-cart-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-size: var(--i9-fs-h4);
  font-weight: var(--i9-fw-semibold);
  color: var(--i9-text-2);
}
.i9-cart-card__title .i9-ico { color: var(--i9-brand); }
.i9-cart-card__body { padding: 18px; }

/* ---- 长文页：左侧目录 + 右侧分条正文（服务条款 / 隐私 / 退款 / 使用限制） */
.i9-doc { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 28px; align-items: start; }
.i9-doc__toc {
  position: sticky;
  top: 84px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
}
.i9-doc__toc-title { margin-bottom: 10px; font-size: var(--i9-fs-sm); font-weight: var(--i9-fw-semibold); color: var(--i9-text-2); }
.i9-doc__toc ol { margin: 0; padding-left: 18px; }
.i9-doc__toc li { margin-bottom: 6px; font-size: var(--i9-fs-sm); line-height: 1.5; }
.i9-doc__toc a { color: var(--i9-text-3); }
.i9-doc__toc a:hover { color: var(--i9-brand); }
.i9-doc__body {
  padding: 26px 30px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
}
.i9-doc__meta {
  padding-bottom: 16px;
  margin-bottom: 20px;
  font-size: var(--i9-fs-xs);
  color: var(--i9-text-4);
  border-bottom: 1px solid var(--i9-border-soft);
}
.i9-doc__sec { margin-bottom: 26px; scroll-margin-top: 84px; }
.i9-doc__sec:last-child { margin-bottom: 0; }
.i9-doc__h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  font-size: var(--i9-fs-h4);
  font-weight: var(--i9-fw-semibold);
  color: var(--i9-text-1);
}
.i9-doc__h em {
  flex: none;
  font-style: normal;
  font-family: var(--i9-font-num);
  font-size: var(--i9-fs-sm);
  color: var(--i9-brand);
}
.i9-doc__p { font-size: var(--i9-fs-body); line-height: 1.9; color: var(--i9-text-2); }
.i9-doc__p + .i9-doc__p { margin-top: 10px; }
.i9-doc__ol, .i9-doc__ul { margin: 8px 0 0; padding-left: 22px; }
.i9-doc__ol li, .i9-doc__ul li {
  margin-bottom: 7px;
  font-size: var(--i9-fs-body);
  line-height: 1.85;
  color: var(--i9-text-2);
}
.i9-doc__note {
  margin-top: 14px;
  padding: 12px 14px;
  font-size: var(--i9-fs-sm);
  line-height: 1.8;
  color: var(--i9-warning-text);
  background: var(--i9-warning-bg);
  border-radius: var(--i9-radius-sm);
}
.i9-doc__note--info { color: var(--i9-brand); background: var(--i9-brand-1); }
.i9-doc__note a { color: inherit; text-decoration: underline; }

/* 联系页：服务入口卡片 */
.i9-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.i9-contact__item {
  display: flex;
  gap: 14px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
  transition: border-color var(--i9-dur) var(--i9-ease), box-shadow var(--i9-dur) var(--i9-ease);
}
.i9-contact__item:hover { border-color: var(--i9-brand-3); box-shadow: var(--i9-sh-1); }
.i9-contact__body { min-width: 0; flex: 1 1 auto; }
.i9-contact__title { font-size: var(--i9-fs-h4); font-weight: var(--i9-fw-semibold); color: var(--i9-text-1); }
.i9-contact__desc { margin-top: 6px; font-size: var(--i9-fs-sm); line-height: 1.75; color: var(--i9-text-3); }
.i9-contact__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 12px;
  font-size: var(--i9-fs-sm);
  color: var(--i9-text-2);
}
.i9-contact__meta b { font-weight: var(--i9-fw-medium); color: var(--i9-text-4); font-size: var(--i9-fs-xs); }

/* 解决方案页：客户痛点 / 方案架构 */
.i9-pains { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.i9-pain {
  padding: 18px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
}
.i9-pain__ico { color: var(--i9-warning); }
.i9-pain__title { margin-top: 10px; font-size: var(--i9-fs-body); font-weight: var(--i9-fw-semibold); color: var(--i9-text-1); }
.i9-pain__desc { margin-top: 6px; font-size: var(--i9-fs-sm); line-height: 1.75; color: var(--i9-text-3); }

.i9-arch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: arch; }
.i9-arch__step {
  position: relative;
  padding: 20px 20px 20px 58px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
}
.i9-arch__step::before {
  counter-increment: arch;
  content: counter(arch);
  position: absolute;
  left: 20px;
  top: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-family: var(--i9-font-num);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--i9-brand);
  border-radius: 50%;
}
.i9-arch__title { font-size: var(--i9-fs-body); font-weight: var(--i9-fw-semibold); color: var(--i9-text-1); }
.i9-arch__desc { margin-top: 6px; font-size: var(--i9-fs-sm); line-height: 1.75; color: var(--i9-text-3); }

/* 响应式：内页栅格降列 */
@media (max-width: 1200px) {
  .i9-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .i9-phero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; }
  .i9-pains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .i9-arch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 992px) {
  .i9-grid--3, .i9-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .i9-phero { padding-block: 32px 30px; }
  .i9-phero__inner { grid-template-columns: minmax(0, 1fr); }
  .i9-phero__art { order: -1; }
  .i9-phero__art img { max-width: 320px; }
  .i9-scene { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .i9-sec-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .i9-doc { grid-template-columns: minmax(0, 1fr); }
  .i9-doc__toc { position: static; }
  .i9-contact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .i9-grid--2, .i9-grid--3, .i9-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .i9-scene { grid-template-columns: minmax(0, 1fr); }
  .i9-specs th { width: 110px; padding: 10px 12px; }
  .i9-specs td { padding: 10px 12px; }
  .i9-pains, .i9-arch { grid-template-columns: minmax(0, 1fr); }
  .i9-doc__body { padding: 20px 16px; }
}

/* 内页主视觉（产品类型页 / 解决方案页使用）：左文案 + 右插画 */
.i9-phero {
  position: relative;
  overflow: hidden;
  padding-block: 48px 44px;
  background: linear-gradient(120deg, #F6F9FF 0%, #FFFFFF 58%);
  border-bottom: 1px solid var(--i9-border-soft);
}
.i9-phero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: 36px;
}
.i9-phero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px 12px;
  font-size: var(--i9-fs-xs);
  color: var(--i9-brand);
  background: var(--i9-brand-1);
  border-radius: var(--i9-radius-pill);
}
.i9-phero__title {
  font-size: var(--i9-fs-h1);
  line-height: var(--i9-lh-h1);
  font-weight: var(--i9-fw-bold);
  color: var(--i9-text-1);
}
.i9-phero__sub {
  margin-top: 10px;
  font-size: 15px;
  font-weight: var(--i9-fw-medium);
  color: var(--i9-text-2);
}
.i9-phero__desc {
  margin-top: 14px;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--i9-text-3);
}
.i9-phero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.i9-phero__points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 18px;
  font-size: var(--i9-fs-sm);
  color: var(--i9-text-3);
}
.i9-phero__points li { display: inline-flex; align-items: center; gap: 6px; }
.i9-phero__points .i9-ico { color: var(--i9-success); }
.i9-phero__art { min-width: 0; }
.i9-phero__art img { width: 100%; max-width: 440px; margin-inline: auto; }

/* 特性卡（内页通用） */
.i9-feature {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
  transition: border-color var(--i9-dur) var(--i9-ease), box-shadow var(--i9-dur) var(--i9-ease), transform var(--i9-dur) var(--i9-ease);
}
.i9-feature:hover { border-color: var(--i9-brand-3); box-shadow: var(--i9-sh-1); transform: translateY(-2px); }
.i9-feature__title { font-size: var(--i9-fs-h4); font-weight: var(--i9-fw-semibold); color: var(--i9-text-2); }
.i9-feature__desc { font-size: var(--i9-fs-sm); line-height: 1.7; color: var(--i9-text-3); }

/* 规格表 */
.i9-specs { width: 100%; font-size: var(--i9-fs-sm); }
.i9-specs th, .i9-specs td { padding: 12px 16px; border-bottom: 1px solid var(--i9-border-soft); text-align: left; vertical-align: top; }
.i9-specs th { width: 168px; font-weight: var(--i9-fw-medium); color: var(--i9-text-3); background: var(--i9-bg-soft); white-space: nowrap; }
.i9-specs td { color: var(--i9-text-2); }
.i9-specs tr:last-child th, .i9-specs tr:last-child td { border-bottom: 0; }

/* 方案页：场景列表 */
.i9-scene { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.i9-scene__item {
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-left: 3px solid var(--i9-brand);
  border-radius: var(--i9-radius-md);
}
.i9-scene__title { font-size: var(--i9-fs-h4); font-weight: var(--i9-fw-medium); color: var(--i9-text-2); }
.i9-scene__desc { margin-top: 6px; font-size: var(--i9-fs-sm); line-height: 1.7; color: var(--i9-text-3); }

.i9-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: var(--i9-fs-sm);
  color: var(--i9-text-4);
}
.i9-breadcrumb a { color: var(--i9-text-3); }
.i9-breadcrumb a:hover { color: var(--i9-brand); }
.i9-breadcrumb__sep { color: var(--i9-text-5); }
.i9-breadcrumb__item[aria-current] { color: var(--i9-text-2); }

/* ====================================================================
   6. 页脚
   ==================================================================== */
.i9-footer {
  margin-top: auto;
  padding-top: 40px;
  background: #fff;
  border-top: 1px solid var(--i9-border-soft);
}
.i9-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr)) auto;
  gap: 32px 24px;
  padding-bottom: 32px;
}
.i9-footer__brand { min-width: 0; }
.i9-footer__logo { display: inline-block; margin-bottom: 12px; }
.i9-footer__logo img, .i9-footer__logo svg { height: 26px; width: auto; }
.i9-footer__slogan { font-size: var(--i9-fs-sm); color: var(--i9-text-3); max-width: 280px; }
.i9-footer__contact { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.i9-footer__contact li { display: flex; align-items: center; gap: 8px; font-size: var(--i9-fs-sm); color: var(--i9-text-3); }
.i9-footer__contact .i9-ico { color: var(--i9-text-4); }
.i9-footer__contact a { color: var(--i9-text-2); }
.i9-footer__contact a:hover { color: var(--i9-brand); }
.i9-footer__title {
  margin-bottom: 14px;
  font-size: var(--i9-fs-body);
  font-weight: var(--i9-fw-semibold);
  color: var(--i9-text-2);
}
.i9-footer__links { display: flex; flex-direction: column; gap: 10px; }
.i9-footer__links a { font-size: var(--i9-fs-sm); color: var(--i9-text-3); }
.i9-footer__links a:hover { color: var(--i9-brand); }
.i9-footer__qr { display: flex; gap: 16px; }
.i9-footer__qr-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.i9-footer__qr-item span { font-size: var(--i9-fs-xs); color: var(--i9-text-4); }
/* 二维码容器：尺寸与页脚显示的二维码一致（116×116）。
   二维码自身带白底，容器不再需要灰底/内边距，只留轻边框。
   尺寸只在这里定义一处，<img> 上不再写 width/height。 */
.i9-qr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 116px;
  color: var(--i9-text-5);
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-sm);
  overflow: hidden;
}
.i9-qr img { display: block; width: 100%; height: 100%; object-fit: contain; }
.i9-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-block: 16px;
  border-top: 1px solid var(--i9-border-soft);
  font-size: var(--i9-fs-xs);
  color: var(--i9-text-4);
}
.i9-footer__bar-links { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.i9-footer__bar-links a { color: var(--i9-text-3); }
.i9-footer__bar-links a:hover { color: var(--i9-brand); }
.i9-footer__badges { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.i9-footer__badge { display: inline-flex; align-items: center; gap: 5px; color: var(--i9-text-3); }
.i9-footer__badge .i9-ico { color: var(--i9-success); }

/* 移动端底部快捷条 */
.i9-mobile-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: calc(var(--i9-z-header) - 1);
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: rgba(255, 255, 255, .98);
  border-top: 1px solid var(--i9-border-soft);
}
.i9-mobile-bar__item {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 2px 6px;
  font-size: 11px;
  color: var(--i9-text-3);
}
.i9-mobile-bar__item .i9-ico { width: 20px; height: 20px; }
.i9-mobile-bar__item:active, .i9-mobile-bar__item:hover { color: var(--i9-brand); }

/* 回到顶部 */

/* ====================================================================
   7. 通用：滚动进入
   ==================================================================== */
[data-i9-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .4s var(--i9-ease), transform .4s var(--i9-ease); }
[data-i9-reveal].is-in { opacity: 1; transform: none; }

/* 产品卡里的国家旗（菜单动态渲染时按 '国家码|产品名|标签' 的第一段取） */
.i9-pcard__flag {
  width: 16px;
  height: 11px;
  margin-right: 6px;
  vertical-align: -1px;
  border-radius: 2px;
  object-fit: cover;
  flex: none;
}

/* ====================================================================
   产品介绍下拉（与「产品」并列的顶级入口）
   --------------------------------------------------------------------
   内容是一组「产品线介绍页」卡片，回答"这条产品线是什么、适合谁"，
   与「产品」菜单（直接进具体机型下单）分工不同。
   ==================================================================== */
.i9-mega--intro .i9-mega__intro { padding: 22px 24px 18px; }
.i9-mega__intro-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--i9-border-soft);
}
.i9-mega__intro-title {
  margin: 0;
  font-size: var(--i9-fs-h4);
  font-weight: var(--i9-fw-semibold);
  color: var(--i9-text-1);
}
.i9-mega__intro-desc {
  margin: 0;
  font-size: var(--i9-fs-sm);
  color: var(--i9-text-4);
}

.i9-introgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.i9-introcard {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
  background: #fff;
  transition: border-color var(--i9-dur) var(--i9-ease),
              background var(--i9-dur) var(--i9-ease),
              box-shadow var(--i9-dur) var(--i9-ease);
}
.i9-introcard:hover {
  border-color: var(--i9-brand-3);
  background: var(--i9-brand-1);
  box-shadow: var(--i9-sh-1, none);
}
.i9-introcard__ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--i9-brand);
  background: linear-gradient(135deg, var(--i9-brand-1), #E8EEFF);
  border-radius: var(--i9-radius-md);
}
.i9-introcard__body { min-width: 0; }
.i9-introcard__name {
  display: block;
  font-size: var(--i9-fs-body);
  font-weight: var(--i9-fw-medium);
  color: var(--i9-text-1);
  line-height: 1.5;
}
.i9-introcard__desc {
  display: block;
  margin-top: 3px;
  font-size: var(--i9-fs-xs);
  line-height: 1.55;
  color: var(--i9-text-4);
}
.i9-mega__intro-foot {
  display: flex;
  gap: 20px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--i9-border-soft);
  font-size: var(--i9-fs-sm);
}
.i9-mega__intro-foot a { color: var(--i9-brand); }

/* 产品面板头部的「产品介绍」入口 */
.i9-mega__side-intro {
  
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  margin-right: 14px;
  font-size: var(--i9-fs-sm);
  color: var(--i9-brand);
}
.i9-mega__side-intro:hover { text-decoration: underline; }

/* 产品卡上的「产品介绍」小字（悬浮时显现，避免静态时过于花） */
.i9-pcard__intro {
  display: block;
  margin-top: 3px;
  font-size: var(--i9-fs-xs);
  color: var(--i9-text-5);
  opacity: 0;
  transition: opacity var(--i9-dur) var(--i9-ease);
}
.i9-pcard__link:hover .i9-pcard__intro { opacity: 1; color: var(--i9-brand); }
.i9-pcard__link:focus-visible .i9-pcard__intro { opacity: 1; }

@media (max-width: 1240px) {
  .i9-introgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 992px) {
  .i9-introgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
  .i9-introgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ====================================================================
   产品菜单（标签页式：左列选分类，右侧只显示当前分类的产品）
   ==================================================================== */

.i9-mega__rail .i9-mega__rail-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 9px 12px 9px 14px;
  margin-bottom: 2px;
  text-align: left;
  font-size: var(--i9-fs-sm);
  line-height: 1.5;
  color: var(--i9-text-2);
  background: transparent;
  border: 0;
  border-radius: var(--i9-radius-sm);
  cursor: pointer;
  transition: background var(--i9-dur-fast) var(--i9-ease),
              color var(--i9-dur-fast) var(--i9-ease);
}
.i9-mega__rail .i9-mega__rail-item:hover { background: #fff; color: var(--i9-brand); }
.i9-mega__rail .i9-mega__rail-item.is-active {
  background: #fff;
  color: var(--i9-brand);
  font-weight: var(--i9-fw-medium);
}
/* 激活态左侧竖条（截图里那种蓝色标记） */
.i9-mega__rail .i9-mega__rail-item.is-active::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--i9-brand);
}
.i9-mega__rail .i9-mega__rail-more {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 8px 12px;
  font-size: var(--i9-fs-sm);
  color: var(--i9-brand);
}

/* 右侧：只显示当前分类 */

.i9-mega__main .i9-mega__sec { display: none; }
.i9-mega__main .i9-mega__sec.is-active { display: block; }

.i9-mega__main .i9-mega__sec-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--i9-border-soft);
}
.i9-mega__main .i9-mega__sec-name {
  font-size: var(--i9-fs-h4);
  font-weight: var(--i9-fw-semibold);
  color: var(--i9-text-1);
}
.i9-mega__main .i9-mega__sec-more {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--i9-fs-sm);
  color: var(--i9-brand);
}
.i9-mega__main .i9-mega__sec-more:hover { text-decoration: underline; }

/* 产品卡：3 列横向排布 */
.i9-mega__main .i9-mega__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

/* 数据未归属时的提示（产品组还没分类） */
.i9-mega__main .i9-mega__notice {
  margin: 0 0 14px;
  padding: 10px 14px;
  font-size: var(--i9-fs-sm);
  line-height: 1.8;
  color: #874D00;
  background: #FFF7E6;
  border: 1px solid #FFD591;
  border-radius: var(--i9-radius-sm);
}
.i9-mega__main .i9-mega__notice b { color: #AD4E00; font-weight: var(--i9-fw-semibold); }

@media (max-width: 1240px) {
  .i9-mega__rail { flex: 0 0 148px; width: 148px; }
  .i9-mega__main { padding: 14px 16px 16px; }
  .i9-mega__main .i9-mega__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ====================================================================
   产品菜单：二级产品卡片（v3 · 精致版）
   --------------------------------------------------------------------
   结构（header 中的 .i9-pcard）：
     .i9-pcard__link
       .i9-pcard__ico                 图标方块
       .i9-pcard__body
         .i9-pcard__name              产品名（主信息）
         .i9-pcard__foot              标签 + 「查看」
   ==================================================================== */

/* 卡片本体 */
.i9-mega__main .i9-pcard__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-lg);
  overflow: hidden;
  transition: border-color var(--i9-dur-fast) var(--i9-ease),
              box-shadow var(--i9-dur-fast) var(--i9-ease),
              transform var(--i9-dur-fast) var(--i9-ease);
}
/* 顶部渐变细线：静态很淡，hover 时展开点亮 */
.i9-mega__main .i9-pcard__link::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--i9-brand), #4B8BFF);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--i9-dur) var(--i9-ease);
}
.i9-mega__main .i9-pcard__link:hover::before { transform: scaleX(1); }

.i9-mega__main .i9-pcard__link:hover {
  border-color: var(--i9-brand);
  box-shadow: 0 6px 18px rgba(0, 82, 217, .12);
  transform: translateY(-2px);
}

/* 图标方块 */
.i9-mega__main .i9-pcard__ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--i9-brand);
  background: linear-gradient(135deg, var(--i9-brand-1), #E8EEFF);
  border-radius: var(--i9-radius-md);
  transition: background var(--i9-dur-fast) var(--i9-ease),
              color var(--i9-dur-fast) var(--i9-ease);
}
.i9-mega__main .i9-pcard__ico .i9-ico { width: 23px; height: 23px; }
.i9-mega__main .i9-pcard__link:hover .i9-pcard__ico { background: #E1E8FF; }

/* 右侧内容：名称一行，标签/查看一行 */
.i9-mega__main .i9-pcard__body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.i9-mega__main .i9-pcard__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--i9-fs-sm);
  font-weight: var(--i9-fw-semibold);
  line-height: 1.45;
  color: var(--i9-text-1);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.i9-mega__main .i9-pcard__link:hover .i9-pcard__name { color: var(--i9-brand); }

.i9-mega__main .i9-pcard__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
}

/* 标签：橙色胶囊 */
.i9-mega__main .i9-pcard__tag {
  display: inline-block;
  padding: 1px 8px;
  font-size: var(--i9-fs-xs);
  line-height: 1.7;
  color: #D4380D;
  background: #FFF2E8;
  border-radius: var(--i9-radius-pill);
  white-space: nowrap;
}

/* 没有标签时补一个淡提示，避免下面那行空着显太空 */
.i9-mega__main .i9-pcard__foot:empty::before {
  content: '查看机型与价格';
  font-size: var(--i9-fs-xs);
  color: var(--i9-text-5);
}

/* 「查看 →」右对齐，hover 淡入 */
.i9-mega__main .i9-pcard__go {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  font-size: var(--i9-fs-xs);
  color: var(--i9-text-5);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--i9-dur-fast) var(--i9-ease),
              transform var(--i9-dur-fast) var(--i9-ease),
              color var(--i9-dur-fast) var(--i9-ease);
}
.i9-mega__main .i9-pcard__link:hover .i9-pcard__go {
  opacity: 1;
  transform: translateX(0);
  color: var(--i9-brand);
}

/* 国旗 */
.i9-mega__main .i9-pcard__flag {
  width: 16px;
  height: 11px;
  border-radius: 2px;
  object-fit: cover;
  flex: none;
}

@media (max-width: 1400px) {
  .i9-mega__main .i9-mega__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .i9-mega__main .i9-mega__cards { grid-template-columns: minmax(0, 1fr); }
}