:root {
  --ink: #1b2733;
  --ink-soft: #54636f;
  --line: #e3e8ed;
  --bg: #ffffff;
  --bg-soft: #f6f8fa;
  --brand: #0b6b5e;
  --brand-dark: #085448;
  --accent: #c8651a;
  /* 内容限宽：页头、正文各节、页脚都按它居中。
     ⚠ 它只管「内容」，不管「底色」——
       Hero 与正文各节的底色是通栏的，铺到浏览器两边（见 hero.css 与 .band）。 */
  --maxw: 1440px;
  /* 全站左右留白。页头的通栏下拉要用它做内边距，所以必须是个变量：
     写死 24px 的话，哪天改留白，下拉里的条目就会贴到屏幕边上。 */
  --gut: 24px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.75;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 8px;
  top: 8px;
  background: #fff;
  padding: 8px 12px;
  z-index: 100;
}

/* ---------- header ---------- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand-name { font-size: 19px; font-weight: 700; color: var(--ink); }
.brand-sub { font-size: 13px; color: var(--ink-soft); }
.site-nav {
  display: flex;
  gap: 18px;
  flex: 1;
  flex-wrap: wrap;
}
.site-nav a { color: var(--ink-soft); font-size: 15px; }
.site-nav a:hover { color: var(--brand); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.phone { font-weight: 600; color: var(--ink); }

/* 手机号码在窄屏从页头撤掉后，从这个位置露出（只在更窄的屏上） */
.nav-contact { display: none; }

/* 汉堡按钮：形状与开关无关，全部状态由 .site-header[data-open] 驱动 */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--bg-soft); }
.nav-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s ease, background .2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
/* 展开时三条杠收成叉：中杠隐去，上下两条各转 45° 汇到中点 */
.site-header[data-open] .nav-toggle-bars { background: transparent; }
.site-header[data-open] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.site-header[data-open] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--brand);
  border-radius: 6px;
  color: var(--brand);
  font-size: 15px;
  background: #fff;
}
.btn {
  transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease, background .18s ease;
}
.btn:hover { text-decoration: none; background: var(--bg-soft); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; }
.btn-sm { padding: 7px 14px; font-size: 14px; }
.btn-lg { padding: 13px 26px; font-size: 16px; }

/* 描边按钮：用在深色底（首屏）与「次要动作」上。
   半透明底 + 白描边，避免深色底上出现一块实心白。 */
.btn-ghost {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .04);
  color: #fff;
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}

/* ---------- page head（面包屑 + 大标题） ---------- */
/* 这两样不进任何一条底色：它们是「这一页是什么」的说明，
   跟着正文一起染色，会让大标题看起来像某一节的小标题。 */
.page-head { padding: 28px 0 6px; }
.page-head h1 {
  font-size: 30px;
  line-height: 1.35;
  margin: 8px 0 12px;
}

.crumbs {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 4px;
}
.crumbs .sep { margin: 0 6px; color: #c3ccd4; }

.page-foot { padding: 24px 0 56px; }

/* ---------- 通栏区段 ---------- */
/* 正文中每一节（原文里的一条 `---`）都是一个 <section class="band">：
   底色铺到屏幕两边，内容照旧按 .wrap 限宽居中。
   五色循环取值：相邻两段必定不同色 —— 真要做到「每一段一种颜色」，
   超过五段就只能重复，而重复的前提是确保**相邻不重**。
   ⚠ 五色都不取纯白：纯白和页面底色同色，看不出「这是一段」。 */
.band { padding: 30px 0; }
/* 一节里的第一个元素不要再往上顶：标题本身带 36px 上边距，叠在区段的 30px 上，
   开头会显得比后面每一节都松半口气。
   ⚠ 正文外面裹了一层 .band-body（首页分栏要用），所以要往里多走一层：
   直接写 `.band > .wrap > :first-child` 现在只是把 .band-body 这个空盒子归零，
   标题照旧往上顶。 */
.band > .wrap > .band-body > :first-child { margin-top: 0; }
.band-1 { background: #f7f9fb; }   /* 冷灰 */
.band-2 { background: #f2f6f4; }   /* 墨绿微染 */
.band-3 { background: #f8f6f1; }   /* 暖橙微染 */
.band-4 { background: #f4f8fb; }   /* 天蓝微染 */
.band-5 { background: #f7f7f4; }   /* 中性灰 */

.content h2 {
  font-size: 22px;
  margin: 36px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.content h3 { font-size: 18px; margin: 26px 0 10px; }
.content p { margin: 12px 0; }

/* 正文里凡是「一块内容」的东西（引用、代码块、表头、表单）一律用白色：
   五条区段底色都不是纯白，白就永远读得成「压在上面的卡片」。
   ⚠ 别用 --bg-soft：它跟区段底色是同一层的值（#f6f8fa vs #f7f9fb），
   叠上去看不出边界，像一块没擦干净的印子。 */
.content blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--brand);
  background: #fff;
  color: var(--ink);
}
.content blockquote p { margin: 6px 0; }

.content table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 15px;
}
.content th,
.content td {
  border: 1px solid var(--line);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
.content th { background: #fff; font-weight: 600; }

.content pre {
  background: #fff;
  border: 1px solid var(--line);
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.6;
}
.content code {
  background: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 13.5px;
}
.content pre code { background: none; padding: 0; }

.content ul, .content ol { padding-left: 24px; }
.content li { margin: 6px 0; }

/* 正文里的配图（如产品总览的能力全景图）。
   ⚠ 必须限住宽度：源图 2416px 宽，而 main 不限宽、.wrap 是 1440px ——
   少了这一条，一张 2416px 的图会把整个页面顶出横向滚动条。
   height:auto 配合 width/height 属性（防加载时布局抖动），
   但不能省 —— 只写 width/height 属性的话，缩放后高度仍是原值。 */
.content img { max-width: 100%; height: auto; }
.content p > img, .content img:only-child { display: block; margin: 20px 0; }

/* 「支撑组」的小插图（人群侧 / 经营侧 / 物联侧）。
   这三个小节的内容是「标题 + 一张表」，插图只是这一段讲什么的视觉引子，
   不是内容本身 —— 所以**要小**：限宽 320px，别让它跟表格抢视线。
   ⚠ max-width 是「上限」而不是「固定宽」：窄屏还要能继续缩下去，
   固定 width 会把表格一起顶宽（main 不限宽，没有外层拦着）。 */
.mini-fig { margin: 4px 0 20px; }

/* 写成 .content .mini-fig img 是为了压过上面那条 img:only-child 的 margin ——
   图在这里是 <figure> 里的唯一子元素，否则会被它加上 20px 上边距。 */
.content .mini-fig img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* 正文中段的宽幅插图（长页面的阅读节奏休息点，如区域化方案页）。
   ⚠ 必须 width:100% 配 max-width 一起写：只有 max-width，大屏上 1120px 的图会贴左、
   右边空出一块；只有 width:100%，窄屏会被顶出横向滚动条。两者一起才是
   「大屏停在 1120 居中、窄屏跟着缩」。 */
.section-fig { margin: 28px 0; }

.content .section-fig img {
  display: block;
  width: 100%;
  max-width: 1120px;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* 手机上表格本身已经很挤，再塞一张 200px 宽的图只会变成看不清的色块。
   与首页配图同一条原则：装饰性的图在窄屏宁可不显示。 */
@media (max-width: 640px) {
  .mini-fig { display: none; }
}

/* ---------- 插图 + 表格左右并排（人群侧 / 经营侧 / 物联侧） ----------
   大屏下图左表右；<1000px 退回上下排（下面的注释都不生效，靠上面的默认样式）。
   用 flex 而不是 float：表格自己带 width:100%，浮动会让它在图下方留一道空槽，
   而且一旦内容比图矮，后面的 h3 会被浮动的图顶到右边去。

   ⚠ min-width: 0 不能省。表格的 min-content 宽 =「最长单元格不换行的宽度」，
   flex 项默认 min-width:auto ⇒ 会被这个值撑住不肯缩，右侧直接溢出容器、
   把整页顶出横向滚动条（删这一条，页面照样 200，只有大屏看得出）。 */
@media (min-width: 1000px) {
  .fig-table { display: flex; align-items: flex-start; gap: 28px; }
  .fig-table > .mini-fig { flex: 0 0 320px; margin: 0; }
  .fig-table > table { flex: 1 1 auto; min-width: 0; margin: 0; }
}

/* ---------- lead form ---------- */
.lead-form {
  margin: 26px 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.lead-form h2 { margin-top: 0; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.field input[type=text],
.field input[type=tel],
.field select,
.field textarea {
  width: 100%;
  max-width: 520px;
  padding: 9px 11px;
  border: 1px solid #ccd5dd;
  border-radius: 5px;
  font-size: 15px;
  font-family: inherit;
}
fieldset.field { border: none; padding: 0; margin-bottom: 14px; }
fieldset.field legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 6px; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 4px 0; }
.check input { width: auto; }
.err { color: #b3261e; font-size: 13px; }
.form-note { font-size: 13px; color: var(--ink-soft); margin: 6px 0; }
.consent { border-top: 1px solid var(--line); padding-top: 14px; }

/* ---------- cta ---------- */
.cta-bar {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cta-bar div { flex: 1; min-width: 240px; }
.cta-bar strong { display: block; font-size: 17px; }
.cta-bar span { font-size: 14px; color: var(--ink-soft); }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  margin-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  padding-top: 32px;
  padding-bottom: 24px;
}
.footer-grid h4 { margin: 0 0 8px; font-size: 15px; }
.footer-grid a { display: block; font-size: 14px; color: var(--ink-soft); margin: 4px 0; }
.footer-grid p { margin: 4px 0; font-size: 14px; color: var(--ink-soft); }
.copyright {
  border-top: 1px solid var(--line);
  padding: 14px 24px;
  font-size: 13px;
  color: var(--ink-soft);
}

.notfound { padding: 40px 0; }

/* ---------- 页头：窄屏折成汉堡菜单 ---------- */
/* 断点取 940px：宽屏一行要同时放下「品牌 + 六个导航项 + 电话 + 按钮」，
   实测下限在 920px 附近，往上留点余量，别卡在恰好放不下的宽度上
   （那种「差 5px 就折成两行」的宽度最容易被忽略，也最容易在换台机器后显现）。 */
@media (max-width: 940px) {
  /* 给 JS 读的折叠标记：断点只在这里写一次，site.js 读它，不复制第二份数字 */
  html { --nav-collapsed: 1; }

  .site-header .wrap { gap: 10px 12px; min-height: 60px; }
  .brand-name { font-size: 17px; }
  .brand-sub { font-size: 12px; }
  .header-actions { order: 2; margin-left: auto; gap: 10px; }

  /* 导航折成全宽下拉。
     ⚠ 换行必须靠 flex-basis 100%，不能只写 width:100% ——
     上面的基准规则里还留着 `flex: 1`（即 basis 0%），而 basis 会盖掉 width：
     导航既不换行、又被压到 min-content 宽，偏偏中文能在任意两字之间断行，
     min-content 就是**一个字**宽 —— 六个条目各竖成一根竹竿，页头撑到 430px。
     那正是这次要修的毛病，所以别再写成 width:100%。 */
  .site-nav {
    order: 4;
    flex: 1 0 100%;
    flex-direction: column;
    /* 基准规则里的 flex-wrap:wrap 在纵向排列下会变成「多列」——
       面板一旦被 max-height 卡住，条目就会挤成好几列、每列只放得下几行。
       纵向排列要的是单列，显式关掉。 */
    flex-wrap: nowrap;
    gap: 0;
    padding: 4px var(--gut) 8px;
    border-top: 1px solid var(--line);
    /* 横屏手机上面板可能高过视口：让面板自己滚，别给页面添第二根滚动条 */
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
  }
  .site-nav a {
    display: flex;
    align-items: center;
    min-height: 46px;            /* 触控目标：手指比鼠标粗得多 */
    padding: 6px 2px;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
  }
  .site-nav > a:last-of-type { border-bottom: none; }

  /* 折叠只在「确实有 JS」时发生：脚本没跑就平铺，菜单不会打不开 */
  html.js .nav-toggle { display: inline-flex; order: 3; }

  /* 有 JS 时面板**脱离文档流**，浮在页头下方 —— 这才叫下拉菜单：
     展开既不把正文往下推，也不让页头自己长高（那是手风琴，不是下拉）。
     包含块是 .site-header（position:sticky 本身就是定位元素），
     所以 left/right:0 是**页头全宽**，而不是 .wrap 那条 --maxw 限宽。
     ⚠ 这条同样只能挂在 html.js 下：没有 JS 时面板收不起来，
     一个永远打开、又盖住正文的浮层，比「导航多占点地方」糟得多。

     ⚠ 收起用 visibility，不是 display，更不是「animation 从 opacity:0 起步」：
     - display 不可过渡，收起/展开做不了淡入淡出；
     - 若把可见性交给动画（`animation: drop` 的首帧 opacity:0），
       动画一旦不推进（后台标签页、省电模式、无头浏览器），
       菜单就**永远打不开** —— 和「折叠绑在 JS 上」是同一类脆弱。
     这里收起态与展开态都是**稳定声明**，过渡只负责过程：
     过渡跑不动也只是少了那 180ms 的观感，菜单照样出得来。 */
  html.js .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 28px rgba(27, 39, 51, .12);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    /* 收起时让 visibility 等淡出结束再切（0.18s 延迟），展开时立即可见 —— 见下一条 */
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  html.js .site-header[data-open] .site-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }

  @media (prefers-reduced-motion: reduce) {
    html.js .site-nav,
    html.js .site-header[data-open] .site-nav { transition: none; }
  }
}

/* 再窄一档：页头放不下电话，位置让给按钮，号码挪进菜单面板。
   顺带把品牌与按钮各收一点 —— 不收的话 360px 手机上这一行只剩几个像素余量，
   换个字体（安卓 / iOS 与 Windows 的中文字宽并不一样）就会挤成两行。 */
@media (max-width: 620px) {
  .phone { display: none; }
  .brand-name { font-size: 16px; }
  .brand-sub { font-size: 11.5px; }
  .header-actions .btn-sm {
    display: inline-flex;
    align-items: center;
    min-height: 44px;          /* 手指够得着 */
    padding: 0 12px;
  }
  /* 没有 JS 时导航是平铺的，这块照样露出 —— 电话不会因此彻底找不到 */
  .nav-contact {
    display: flex;
    flex-direction: column;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
  }
  .nav-contact a { min-height: 40px; font-size: 15px; border-bottom: none; }
  .nav-contact a[href^="tel:"] { color: var(--ink); font-weight: 600; }
}

@media (max-width: 720px) {
  .page-head h1 { font-size: 24px; }
}

/* ---------- 首页：Hero 之后的第一节 ---------- */
/* Hero 通栏由它自己的 .wrap.hero-grid 负责（跟随 --maxw，见 hero.css）。
   以前要在 `<main class="wrap">` 里把它「挣」出来；现在 main 本身不限宽，
   那层破例可以删了 —— 代价是首页把它的区块间距写在这里一行。
   给第一节多留点：Hero 的底边距是按深夜底色排的，接正文时会显得挤。 */
body.has-hero .content > .band:first-child { padding-top: 44px; }