/* ==========================================================================
   zakocloud · 商务专业视觉层 (Skin Override)
   作用：仅覆盖「视觉表现」——圆角、阴影、间距节奏、字阶、组件形态。
         不改动任何布局骨架（宽高、flex、定位、DOM 结构一律不动）。
   加载：最后由 header.html 引入，故原主题规则一律用 !important 覆盖。
   回滚：删掉 header.html 里的这一行 <link> 即完全还原。
   ========================================================================== */

:root {
  /* 品牌色阶 */
  --zk-navy-900: #162859;
  --zk-navy-800: #2A4BA6;
  --zk-navy: #4073FF;
  --zk-navy-600: #628CFF;
  --zk-navy-400: #96B2FF;
  --zk-navy-200: #D5E0FF;
  --zk-navy-100: #E8EEFF;
  --zk-navy-50: #F4F7FF;

  /* 中性色 */
  --zk-ink: #0F172A;
  --zk-ink-2: rgba(15, 23, 42, .70);
  --zk-ink-3: rgba(15, 23, 42, .46);
  --zk-line: #E4E9F0;
  --zk-line-soft: #EEF2F7;
  --zk-bg-soft: #F6F8FC;

  /* 圆角规范 */
  --zk-r-xs: 6px;
  --zk-r-sm: 8px;
  --zk-r: 10px;
  --zk-r-lg: 14px;
  --zk-r-xl: 18px;
  --zk-r-pill: 999px;

  /* 阴影规范（取代原来生硬的 0 0 16px rgba(52,52,52,.16)） */
  --zk-sh-1: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --zk-sh-2: 0 2px 6px rgba(15, 23, 42, .05), 0 8px 20px rgba(15, 23, 42, .06);
  --zk-sh-3: 0 6px 14px rgba(15, 23, 42, .06), 0 18px 40px rgba(15, 23, 42, .10);
  --zk-sh-navy: 0 6px 18px rgba(64, 115, 255, .22);

  --zk-nav-h: 80px;
}

/* ---------------------------------------------------------------- 全局字阶 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif !important;
  color: var(--zk-ink);
  font-size: 14px;
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  font-weight: 600 !important;
  letter-spacing: -.4px;
  color: var(--zk-ink);
}
h1 { font-size: 44px !important; line-height: 1.18 !important; }
h2 { font-size: 34px !important; line-height: 1.25 !important; }
h3 { font-size: 26px !important; line-height: 1.32 !important; }
h4 { font-size: 21px !important; line-height: 1.40 !important; }
h5 { font-size: 18px !important; line-height: 1.45 !important; }

.title-desc { color: var(--zk-ink-2) !important; line-height: 1.7 !important; }

/* ---------------------------------------------------------------- 区块节奏 */
.section-content { padding: 92px 24px !important; }

.section-title .section-desc {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--zk-ink-2) !important;
  margin-top: 14px !important;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.section-bg .section-title .section-desc { color: rgba(255, 255, 255, .84) !important; }

/* ---------------------------------------------------------------- 顶部导航 */
#header {
  background: #fff !important;
  border-bottom: 1px solid var(--zk-line-soft);
}
.nav-shadow {
  box-shadow: 0 1px 0 var(--zk-line-soft), 0 4px 18px rgba(15, 23, 42, .045) !important;
}
.nav-header { padding: 0 24px !important; }
.nav-header .nav-left .nav-icon img { margin-right: 44px !important; }

.nav-menu .nav-item {
  height: var(--zk-nav-h) !important;
  padding: 0 18px !important;
  margin: 0 2px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--zk-ink-2) !important;
  border-bottom: 0 !important;
  border-radius: var(--zk-r-sm) !important;
  transition: background .2s ease, color .2s ease !important;
}
.nav-menu .nav-item:hover {
  background: var(--zk-navy-50) !important;
  color: var(--zk-navy) !important;
}
.nav-header .login-in { height: var(--zk-nav-h) !important; }
.nav-right .control { color: var(--zk-ink-2) !important; }

/* 下拉二级菜单 */
.nav-cont {
  top: var(--zk-nav-h) !important;
  background: #FBFCFE !important;
  box-shadow: 0 20px 46px rgba(15, 23, 42, .10) !important;
}
.nav-item-box {
  border-radius: var(--zk-r-lg) !important;
  box-shadow: var(--zk-sh-1) !important;
  border: 1px solid transparent;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.nav-item-box:hover {
  transform: translateY(-3px);
  box-shadow: var(--zk-sh-2) !important;
  border-color: var(--zk-navy-100);
}
.nav-item-box .item-box-title { color: var(--zk-ink) !important; }
.nav-item-box .item-box-title .desc { color: var(--zk-ink-3) !important; }

/* 登录下拉 */
.nav-header .login-in .login-menu {
  top: var(--zk-nav-h) !important;
  border: 1px solid var(--zk-line) !important;
  border-radius: var(--zk-r-lg) !important;
  box-shadow: var(--zk-sh-3) !important;
  padding: 10px !important;
}
.nav-header .login-in .login-menu .login-menu-item {
  border-radius: var(--zk-r-sm) !important;
  transition: background .18s ease;
}
.nav-header .login-in .login-menu .login-menu-item .real-name {
  border-radius: var(--zk-r-pill) !important;
}

/* ---------------------------------------------------------------- 按钮 */
.btn {
  padding: 10px 24px !important;
  border-radius: var(--zk-r-sm) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: .2px;
  transition: transform .18s ease, box-shadow .18s ease,
              background .18s ease, border-color .18s ease, color .18s ease !important;
}
.btn-s { padding: 10px 30px !important; }
.btn2 {
  padding: 12px 34px !important;
  border-radius: var(--zk-r-sm) !important;
  font-weight: 500 !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.btn-normal {
  background: linear-gradient(180deg, #325AC7 0%, #4073FF 100%) !important;
  box-shadow: var(--zk-sh-navy);
  border: 0 !important;
}
.btn-normal:hover {
  background: linear-gradient(180deg, #7BA0FF 0%, #325AC7 100%) !important;
  box-shadow: 0 10px 26px rgba(64, 115, 255, .30);
  transform: translateY(-1px);
}
.btn-normal:active { background: #2A4BA6 !important; transform: translateY(0); }
.btn-normal-light {
  background: #fff !important;
  border: 1px solid var(--zk-line) !important;
  border-radius: var(--zk-r-sm) !important;
  color: var(--zk-ink-2) !important;
  box-shadow: var(--zk-sh-1);
}
.btn-normal-light:hover {
  border-color: var(--zk-navy-400) !important;
  background: var(--zk-navy-50) !important;
  color: var(--zk-navy) !important;
  box-shadow: var(--zk-sh-2);
}

/* ---------------------------------------------------------------- Banner */
.banner-cont .swiper-slide {
  height: 560px !important;
  background: linear-gradient(180deg, #F7F9FC 0%, #EDF3FA 100%) !important;
}
.banner-cont .swiper-pagination-bullet { border-radius: var(--zk-r-pill) !important; }

.banner .banner-s {
  border-radius: var(--zk-r-xl) !important;
  box-shadow: var(--zk-sh-3) !important;
  overflow: hidden;
  background: #fff;
}
.banner-s .banner-list { padding: 0 !important; }
.banner-s .banner-list .banner-item {
  padding: 34px 40px !important;
  transition: background .22s ease;
}
.banner-s .banner-list .banner-item:hover { background: var(--zk-navy-50) !important; }
.banner-list .banner-item .banner-tag {
  border-radius: var(--zk-r-pill) !important;
  padding: 4px 12px !important;
  font-weight: 500;
  background: var(--zk-navy-50);
}

/* ---------------------------------------------------------------- 产品卡片 */
.service .service-box {
  border: 1px solid var(--zk-line) !important;
  border-radius: var(--zk-r-xl) !important;
  padding: 32px !important;
  background: #fff !important;
  box-shadow: var(--zk-sh-1);
  transition: transform .28s cubic-bezier(.2, .7, .3, 1),
              box-shadow .28s ease, border-color .28s ease !important;
}
.service .service-box:hover {
  border-color: var(--zk-navy-200) !important;
  box-shadow: var(--zk-sh-3) !important;
  transform: translateY(-6px);
}
.service .service-box .title-desc {
  margin: 14px 0 !important;
  line-height: 1.7 !important;
  color: var(--zk-ink-2) !important;
}
.service .service-tag-group .service-tag {
  height: 26px !important;
  padding: 0 12px !important;
  margin-right: 8px !important;
  border-radius: var(--zk-r-pill) !important;
  background: var(--zk-navy-50) !important;
  border: 1px solid var(--zk-navy-100) !important;
  color: var(--zk-navy-600) !important;
  font-weight: 500;
}
/* HOT 角标：原为橙色图片，且卡片圆角放大后会溢出。改为纯 CSS 胶囊标签。 */
.service .service-hot::before {
  content: 'HOT' !important;
  background: linear-gradient(135deg, #628CFF 0%, #4073FF 100%) !important;
  background-image: linear-gradient(135deg, #628CFF 0%, #4073FF 100%) !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
  right: 16px !important;
  top: 16px !important;
  width: auto !important;
  height: 22px !important;
  padding: 0 10px !important;
  border-radius: var(--zk-r-pill) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .6px !important;
  color: #fff !important;
  line-height: 22px !important;
  text-align: center !important;
  box-shadow: 0 4px 12px rgba(64, 115, 255, .28) !important;
  filter: none !important;
}

/* ---------------------------------------------------------------- 解决方案（深色区） */
.resolve { background-color: var(--zk-navy-900) !important; }
.resolve-content .resolve-box {
  border-radius: var(--zk-r-xl) !important;
  box-shadow: var(--zk-sh-2) !important;
  top: 0 !important;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease !important;
}
.resolve-content .resolve-box:hover {
  transform: translateY(-8px);
  box-shadow: var(--zk-sh-3) !important;
}

/* ---------------------------------------------------------------- 服务实践 / 合作伙伴 */
.practice .practice-box {
  border: 1px solid var(--zk-line) !important;
  border-radius: var(--zk-r-lg) !important;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.practice .practice-box:hover {
  box-shadow: var(--zk-sh-2) !important;
  border-color: var(--zk-navy-200) !important;
  transform: translateY(-3px);
}
.practice .brand-box {
  border: 1px solid var(--zk-line) !important;
  border-radius: var(--zk-r-lg) !important;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.practice .brand-box:hover {
  box-shadow: var(--zk-sh-2) !important;
  border-color: var(--zk-navy-200) !important;
  transform: translateY(-3px);
}

/* ---------------------------------------------------------------- 基础措施 */
.section-base { background: var(--zk-bg-soft) !important; }
.section-base > .section-content { padding: 92px 24px 0 !important; }
.cert {
  border: 1px solid #fff !important;
  border-radius: var(--zk-r-xl) !important;
  box-shadow: var(--zk-sh-2) !important;
}

/* ---------------------------------------------------------------- 新闻动态 */
.news-content { margin-top: 54px !important; gap: 110px !important; }
.news-content .news-head .news-title {
  font-size: 19px !important;
  font-weight: 600 !important;
  padding-left: 14px !important;
  height: 22px !important;
  line-height: 22px !important;
}
.news-content .news-head .news-title::before {
  width: 3px !important;
  height: 22px !important;
  border-radius: 3px !important;
}
.news-content .news-head .news-more { color: var(--zk-ink-3) !important; }
.news-content .news-list { margin-top: 22px !important; }
.news-content .news-list .news-item {
  line-height: 54px !important;
  border-bottom: 1px solid var(--zk-line-soft) !important;
}
.news-content .news-item .number {
  width: 16px !important;
  height: 16px !important;
  border-radius: var(--zk-r-xs) !important;
}
.news-content .news-item .title { font-size: 14.5px !important; }
.news-content .news-item .time { color: var(--zk-ink-3) !important; }

/* ---------------------------------------------------------------- 页脚 */
.register-advert {
  height: 80px !important;
  background: linear-gradient(90deg, #2A4BA6 0%, #4073FF 55%, #628CFF 100%) !important;
}
/* 该广告条实际是 <img> 渲染的橙红图片，做色相旋转并入品牌蓝 */
.register-advert img { filter: hue-rotate(205deg) saturate(1.05) brightness(.97); }

/* 导航 Logo 原为智简魔方红色标识，同样并入品牌蓝。
   （若你在后台上传了自己的 logo，请删除下面这条，避免滤镜影响你自己的配色） */
.nav-icon img { filter: hue-rotate(205deg) saturate(1.05); }
.section-promise { background-color: #162859 !important; }
.promise-box { font-size: 15px !important; }
.footer { background: #101F45 !important; }
.footer-content { background-color: #101F45 !important; }
.footer-nav-box .footer-nav-head {
  border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
  font-weight: 600;
}
.footer .footer-link,
.footer .footer-record {
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
}
.footer .footer-record { height: 56px !important; line-height: 56px !important; }
.footer-nav-right .qr-code img { border-radius: var(--zk-r-sm) !important; }

/* ---------------------------------------------------------------- 侧边工具条 */
.aside-tools .tools-list {
  border-radius: var(--zk-r-lg) 0 0 var(--zk-r-lg) !important;
  box-shadow: var(--zk-sh-2) !important;
}
.aside-tools .tools-list .tools-item .tools-box-s {
  border-radius: var(--zk-r-lg) !important;
  box-shadow: var(--zk-sh-3) !important;
}
.aside-tools .tools-list .tools-item .tools-box .button { border-radius: var(--zk-r-sm) !important; }

/* ---------------------------------------------------------------- 分页 / 通用盒 */
.jr-page .pagination > li a { border-radius: var(--zk-r-xs) !important; }
.box-shadow { box-shadow: var(--zk-sh-3) !important; border-radius: var(--zk-r-xl) !important; }
.box-shadow-light { box-shadow: var(--zk-sh-2) !important; border-radius: var(--zk-r-lg) !important; }
.jr-select select { border-radius: var(--zk-r-sm) !important; border-color: var(--zk-line) !important; }

/* ================================================================
   首页底色节奏
   原来是「白底 + 白卡」，卡片浮不出来、整页显得平。
   改为：白 → 浅灰底(卡片凸显) → 深蓝 → 白 → 浅灰底 → 白 → 深底
   （只作用于首页 body#index，其他页面不受影响）
   ================================================================ */
body#index { background: var(--zk-bg-soft) !important; }
body#index .section.banner { background: #fff !important; }
body#index .section.service { background: transparent !important; }
body#index .section.practice { background: #fff !important; }
body#index .section.section-base { background: transparent !important; }
body#index .section.news { background: #fff !important; }

/* 首屏四个入口：加分隔线，避免四个块糊成一整条 */
.banner-s .banner-list .banner-item { padding: 36px 40px !important; }
.banner-s .banner-list .banner-item + .banner-item {
  border-left: 1px solid var(--zk-line-soft);
}

/* 卡片间距 20px -> 24px */
.service-content { margin: -12px !important; margin-top: 56px !important; }
.service .service-box { margin: 12px !important; }
.resolve-content { margin: -12px !important; margin-top: 56px !important; }
.resolve-content .resolve-box { margin: 12px !important; }

/* 「聚焦核心场景」区块当前无内容，收缩留白避免大片空白 */
.section.practice:has(.practice-content:empty) .section-content { padding-bottom: 56px !important; }
.practice .practice-content:empty { margin-top: 0 !important; }

/* ==========================================================================
   移动端适配补丁（2026-10-06）
   问题：官方主题只有一条 @media(max-width:1440px) 规则，手机端导航「左侧菜单 +
         右侧登录注册」不折行，把文档撑到 500~720px 宽，整站横向滚动。
   处理：900px 以下让菜单横向可滑、按钮收窄，并给页面加横向不溢出兜底。
         仅在小屏生效，桌面端表现完全不变。
   ========================================================================== */
@media screen and (max-width: 900px) {
  html, body { overflow-x: hidden !important; max-width: 100% !important; }

  .nav-shadow { position: relative !important; }
  .nav-header {
    padding: 0 12px !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .nav-header .nav-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
  }
  .nav-header .nav-left .nav-icon img {
    width: 104px !important;
    height: 24px !important;
    margin-right: 10px !important;
  }
  .nav-menu {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-menu::-webkit-scrollbar { display: none; }
  .nav-menu .nav-item {
    height: 56px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }
  .nav-right { flex: 0 0 auto !important; }
  .nav-right .control { margin: 0 8px !important; }
  .nav-right .no-login { align-items: center; }
  .nav-right .no-login .btn {
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    margin-right: 8px !important;
  }
  .nav-right .login-in .name { display: none !important; }

  /* 下拉大菜单与页脚同样收进屏宽 */
  .nav-cont, .nav-cont-menu { overflow-x: hidden !important; }
  .nav-content a { width: calc(50% - 10px) !important; }
  .footer-nav { flex-wrap: wrap !important; }
  .footer-nav-left { flex-wrap: wrap !important; }
}