/* ==========================================================================
   归浦AI 官网 · v16 精修层（2026-10-20）
   覆盖范围：全站导航交互 / 吸顶安全区 / 动画性能 / 页脚统一
   设计意图：把"能点、顺滑、不遮挡"做到 iOS 级别，视觉语言沿用现有商务蓝
   ========================================================================== */

/* ---------- 0. 全局流畅度底座 ---------- */
:root{
  --v16-ease-out: cubic-bezier(.22,.61,.36,1);
  --v16-ease-spring: cubic-bezier(.34,1.4,.64,1);
  --nav-h: 68px;
}
/* 只给真正会动的元素开 GPU 合成，避免全站层爆炸导致掉帧 */
.hero-inner, .gp-prod-art, .nav-drop, .v16-tilt, .v16-marquee-track{
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* 滚动容器不使用 scroll-behavior，交给 JS 做惯性，减少重排 */
html{ scroll-padding-top: calc(var(--nav-h) + 20px); }

/* ---------- 1. 吸顶导航：永不超出安全区 ---------- */
.nav{
  position: sticky;
  top: 0;
  z-index: 120;
  /* 8px 安全边距，刘海屏 / 浏览器工具栏都不遮挡 */
  padding-top: env(safe-area-inset-top, 0px);
}
.nav-inner{
  transition: height .32s var(--v16-ease-out),
              background-color .32s var(--v16-ease-out),
              box-shadow .32s var(--v16-ease-out),
              border-radius .32s var(--v16-ease-out),
              padding .32s var(--v16-ease-out);
}
/* 触顶收缩：用 transform + padding 收敛，不动高度避免重排 */
.nav.v16-scrolled .nav-inner{
  height: 58px;
  border-radius: 16px;
  box-shadow: 0 10px 34px -18px rgba(16,28,58,.28), 0 1px 0 rgba(16,28,58,.04);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  background: rgba(255,255,255,.82);
}
/* 收缩时 logo 略缩，保持比例 */
.nav.v16-scrolled .brand-logo{ transform: scale(.92); }
.brand-logo{ transition: transform .32s var(--v16-ease-out); }

/* ---------- 2. 下拉面板：竖长条、水平对齐、悬停即开 ---------- */
/* 产品下拉：两张卡等宽等高，快速入口收成竖列 */
.nav-drop-in{
  grid-template-columns: 264px !important;
  gap: 8px !important;
  padding: 4px;
}
/* 每个产品是大卡，改成横向紧凑排布，高度一致 */
.mm-prod{
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  grid-template-areas: "art title" "art desc" !important;
  align-items: center !important;
  gap: 2px 12px !important;
  padding: 12px !important;
  border-radius: 14px !important;
  min-height: 76px;
}
.mm-prod .mm-art{
  grid-area: art !important;
  width: 44px !important; height: 44px !important;
  border-radius: 12px !important;
  height: 44px !important;
}
.mm-prod .mm-art .mm-ic{
  padding: 0 !important; width: 100%; height: 100%;
  display: grid; place-items: center;
  font-size: 11px !important; letter-spacing: .04em;
  background: transparent !important; box-shadow: none !important;
}
.mm-prod h5{ grid-area: title !important; font-size: 14px !important; line-height: 1.3 !important; }
.mm-prod p{
  grid-area: desc !important;
  font-size: 12px !important; line-height: 1.5 !important;
  color: var(--gp-ink-4) !important;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.mm-prod .mm-link{ display: none !important; }

/* 快速入口：竖排细条，跟产品卡同宽 */
.mm-quick{
  border-top: 1px solid var(--gp-line);
  margin-top: 4px; padding-top: 8px !important;
  gap: 1px !important;
}
.mm-quick h6{ padding: 4px 10px 6px !important; font-size: 10.5px !important; }
.mm-quick a{
  padding: 7px 10px !important;
  font-size: 13px !important;
  border-radius: 9px !important;
  flex-direction: row !important;
  align-items: baseline; gap: 8px !important;
}
.mm-quick a em{
  font-size: 11.5px !important;
  color: var(--gp-ink-4) !important;
  opacity: .85;
}

/* 工作台下拉：同样竖长条 */
.ws-drop-in{ grid-template-columns: 248px !important; }
.ws-card{ padding: 11px 12px !important; border-radius: 14px !important; min-height: 62px; }

/* 下拉与触发器之间的"隐形桥"，鼠标移动不再掉落 */
.nav-item::after{
  content: "";
  position: absolute; left: 0; right: 0; top: 100%;
  height: 18px;
  pointer-events: none;
}
.nav-item:hover::after,
.nav-item.open::after{ pointer-events: auto; }

/* 悬停延迟：进入即有 60ms 容错，移出延后 180ms 关闭，不再手抖 */
.nav-drop{
  transition: opacity .18s var(--v16-ease-out),
              transform .32s var(--v16-ease-spring),
              visibility .18s linear !important;
}
@media (hover:hover) and (pointer:fine){
  .nav-item:hover > .nav-drop{ transition-delay: 40ms; }
}

/* ---------- 3. 导航项高亮：悬停 / 选中都清晰 ---------- */
.nav-menu > a{
  position: relative;
  padding: 6px 10px;
  border-radius: 9px;
  transition: color .18s, background-color .18s;
}
.nav-menu > a::after{
  content: "";
  position: absolute; left: 10px; right: 10px; bottom: 1px;
  height: 2px; border-radius: 2px;
  background: var(--gp-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s var(--v16-ease-out);
}
.nav-menu > a:hover{
  color: var(--gp-brand-deep);
  background: var(--gp-soft);
}
.nav-menu > a:hover::after{ transform: scaleX(1); }
.nav-menu > a.active{
  color: var(--gp-brand-deep) !important;
  font-weight: 650;
  background: var(--gp-soft);
}
.nav-menu > a.active::after{ transform: scaleX(1); }

/* 带下拉的「产品」按钮：悬停也要有反馈 */
.nav-top{
  transition: color .18s, background-color .18s;
  border-radius: 9px;
}
.nav-item:hover > .nav-top,
.nav-item.open > .nav-top,
.nav-item > .nav-top[aria-expanded="true"]{
  color: var(--gp-brand-deep);
  background: var(--gp-soft);
}
/* 当前页属于哪条产品线上，也要高亮 */
.nav-item > .nav-top.v16-current{
  color: var(--gp-brand-deep);
  font-weight: 650;
  background: var(--gp-soft);
}

/* ---------- 4. Hero 下方横线：留出呼吸间距 ---------- */
/* 页面首个 section 之后的分隔线统一下移，绝不贴按钮 */
.hero-actions + *, .hero-actions + .hero-stats{ margin-top: 6px; }
.hero::after,
.v16-hero-rule{
  content: "";
  display: block;
  height: 1px;
  margin: 56px auto 0;
  max-width: min(1180px, 92vw);
  background: linear-gradient(90deg, transparent, var(--gp-line) 18%, var(--gp-line) 82%, transparent);
}
@media (max-width: 767px){
  .hero::after, .v16-hero-rule{ margin-top: 36px; }
}

/* ---------- 5. 页脚统一：内页不再出现一大片蓝 ---------- */
/* 内页原先把整块 footer 刷成品牌蓝，现在统一为首页的浅底 + 细线 */
body.gp-page footer.footer{
  background: #fff !important;
  color: var(--gp-ink) !important;
  border-top: 1px solid var(--gp-line) !important;
  padding-top: 64px !important;
}
body.gp-page footer.footer h4,
body.gp-page footer.footer a,
body.gp-page footer.footer span,
body.gp-page footer.footer p{ color: var(--gp-ink-2) !important; }
body.gp-page footer.footer h4{ color: var(--gp-ink) !important; }
body.gp-page footer.footer a:hover{ color: var(--gp-brand) !important; }
body.gp-page footer.footer .copyright{
  border-top: 1px solid var(--gp-line) !important;
  margin-top: 40px; padding-top: 22px;
  color: var(--gp-ink-4) !important;
}
body.gp-page footer.footer .copyright a,
body.gp-page footer.footer .copyright span{ color: var(--gp-ink-4) !important; }
/* 兜底：任何残留的蓝色大区块统一压掉 */
body.gp-page .page-hero,
body.gp-page .sec-hero-blue,
body.gp-page .gp-blue-band{ background: transparent !important; }

/* ---------- 6. 动画性能：120Hz 友好 ---------- */
/* 移除会触发 layout 的动画属性，全部走 transform / opacity */
.gp-rv{ will-change: auto; }
.gp-rv.v16-in{ will-change: auto; }

/* Logo 跳动：用 transform 的 translate3d，去掉 filter/blur 抖动源 */
.brand-logo{ animation: none !important; }
.nav .brand:hover .brand-logo{
  animation: v16-logo-bounce 1.4s var(--v16-ease-out) infinite;
}
@keyframes v16-logo-bounce{
  0%, 100%{ transform: translate3d(0,0,0) scale(1); }
  30%{ transform: translate3d(0,-3px,0) scale(1.02); }
  60%{ transform: translate3d(0,0,0) scale(.995); }
}
@media (prefers-reduced-motion: reduce){
  .nav .brand:hover .brand-logo{ animation: none; }
}

/* ---------- 7. 移动端 / 平板适配 ---------- */
@media (max-width: 1024px){
  .nav.v16-scrolled .nav-inner{ height: 54px; }
  .hero::after{ margin-top: 40px; }
}
@media (max-width: 767px){
  :root{ --nav-h: 60px; }
  .nav.v16-scrolled .nav-inner{ height: 52px; border-radius: 14px; }
  body.gp-page footer.footer{ padding-top: 44px !important; }
}