@charset "UTF-8";

/* =========================================================
   小梦科技 · 设备联网落地页样式
   设计稿基准尺寸：3200 × 8911（Figma Canvas）
   定位换算：left/top/width/height = 设计像素 / 对应边长 × 100%
   字号换算：以画布宽度为基准，100 设计像素 ≈ 3.125% 画布宽
   ========================================================= */

/* ---------- 全局重置与基础变量 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* 品牌主色（设计稿按钮/强调色） */
  --color-primary: #196df4;
  /* 正文灰色 */
  --color-muted: #6e6d6d;
  /* 页脚深蓝底 */
  --color-footer: #1b2a4a;
  /* 设计稿宽高，供注释与 JS 对照 */
  --design-w: 3200;
  --design-h: 8911;
}

html {
  scroll-behavior: smooth;
  background: #f9fbfe;
}

body {
  font-family: "SimHei", "Heiti SC", "STHeiti", "Microsoft YaHei", sans-serif;
  color: #000;
  background: #f9fbfe;
  line-height: 1.4;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ---------- 页面画布：宽度始终等于视口，拖拽窗口即整体缩放 ---------- */
.page {
  width: 100%;
  margin: 0 auto;
  background: #f9fbfe;
}

/* 画布高度 = 当前宽度 × 8911/3200 ≈ 278.46875%，随窗口变宽变窄同步变化 */
.canvas {
  position: relative;
  width: 100%;
  padding-bottom: 278.46875%;
  /*
    基准字号跟随视口：设计稿 100px / 3200 × 当前窗口宽。
    不封顶 1920，窗口拉大字号与模块一起变大，拉小则一起变小。
    1em ≈ 设计稿 100px × (100vw / 3200)。
  */
  font-size: calc(100vw * 100 / 3200);
  overflow: hidden;
  background: #fff;
}

/* 画布内所有绝对定位子块的通用图片铺满规则 */
.canvas img[aria-hidden="true"],
.banner__layer,
.advantage__bg,
.flow__layer,
.stats__bg,
.cta__bg {
  object-fit: fill;
}


/* =========================================================
   顶部导航 Header
   设计：约 y=0, h=196/8911≈2.20%，内容区相对画布宽度定位
   ========================================================= */
.header {
  position: absolute;
  left: 0;
  top: 0;
  /* 高度 196/8911 */
  width: 100%;
  height: 2.1995%;
  z-index: 100;
  background: #fff;
  box-shadow: 0 0.05em 0.3em rgba(25, 109, 244, 0.06);
}

.header__bg {
  position: absolute;
  inset: 0;
  background: #fff;
}

/* Logo 区：设计 x≈254（相对 3200）≈7.94% */
.header__brand {
  position: absolute;
  left: 7.94%;
  top: 18%;
  display: flex;
  align-items: center;
  width: 14%;
  height: 64%;
  z-index: 2;
}

.header__logo {
  width: 28.5%;
  height: auto;
}

.header__brand-text {
  margin-left: 4%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 设计稿英文约 38.9px → 0.3889em（1em=设计稿 100px，约等于画布宽度的 1.215%） */
.header__brand-en {
  font-size: 0.3889em;
  line-height: 1.2;
  color: #000;
  white-space: nowrap;
}

.header__brand-cn {
  width: 2.1em;
  margin-top: 0.05em;
}

/* 导航：设计中心偏左区域 */
.header__nav {
  position: absolute;
  left: 30%;
  top: 0;
  width: 32%;
  height: 100%;
  z-index: 2;
}

.header__nav-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}

.header__nav-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.header__nav-link {
  font-size: 0.3889em;
  color: #000;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.header__nav-item.is-active .header__nav-link,
.header__nav-link:hover {
  color: var(--color-primary);
}

.header__nav-underline {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 50%;
  height: 3.4%;
  transform: translateX(-50%);
  background: var(--color-primary);
  border-radius: 0.04em;
}

/* 核心产品下拉：与关于我们页卡片式子菜单一致 */
.header__nav-item--dropdown {
  cursor: pointer;
}

.header__subnav {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.08em);
  width: 1.48em;
  padding: 0.08em;
  background: #fff;
  border-radius: 0.12em;
  box-shadow: 0 0.14em 0.36em rgba(25, 109, 244, 0.14), 0 0.02em 0.08em rgba(15, 40, 90, 0.06);
  border: 1px solid rgba(25, 109, 244, 0.12);
  transform: translate(-50%, 0.08em);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  z-index: 20;
}

.header__subnav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.14em;
  height: 0.14em;
}

.header__subnav::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.06em;
  width: 0.12em;
  height: 0.12em;
  background: #fff;
  border-left: 1px solid rgba(25, 109, 244, 0.12);
  border-top: 1px solid rgba(25, 109, 244, 0.12);
  transform: translateX(-50%) rotate(45deg);
}

.header__nav-item--dropdown:hover .header__subnav,
.header__nav-item--dropdown:focus-within .header__subnav,
.header__nav-item--dropdown.is-open .header__subnav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.header__subnav-link {
  display: block;
  padding: 0.1em 0.08em;
  font-size: 0.16em;
  color: #3a4454;
  white-space: nowrap;
  text-align: center;
  border-radius: 0.08em;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.header__subnav-link:hover {
  color: var(--color-primary);
  background: rgba(25, 109, 244, 0.08);
}

.header__subnav-item.is-current .header__subnav-link {
  color: var(--color-primary);
  background: rgba(25, 109, 244, 0.08);
}

/* 右侧操作区：相对整页宽度定位，内部再用百分比排布 */
.header__actions {
  position: absolute;
  right: 5.5%;
  top: 0;
  width: 20%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4%;
  z-index: 2;
}

.header__phone {
  display: flex;
  align-items: center;
  gap: 0.25em;
  font-size: 0.3333em;
  color: #000;
  white-space: nowrap;
}

.header__phone-icon {
  width: 1.5em;
  height: 1.5em;
}

.header__demo-btn {
  /* 相对 header__actions：235/640≈36.7%，高度相对导航条 */
  width: 36.7%;
  height: 44%;
  border-radius: 0.8em;
  background: linear-gradient(135deg, #2f86ff, #196df4);
  color: #fff;
  font-size: 0.3333em;
  box-shadow: 0 0.08em 0.2em rgba(25, 109, 244, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.header.is-sticky .header__actions {
  width: auto;
  position: static;
}

.header.is-sticky .header__demo-btn {
  width: auto;
  height: auto;
}

.header__demo-btn:hover {
  transform: translateY(-2%);
  box-shadow: 0 0.12em 0.28em rgba(25, 109, 244, 0.45);
}

.header__menu-btn {
  display: none;
  position: absolute;
  right: 4%;
  top: 28%;
  width: 4.5%;
  height: 44%;
  z-index: 3;
  flex-direction: column;
  justify-content: space-between;
}

.header__menu-btn span {
  display: block;
  height: 12%;
  background: #222;
  border-radius: 0.05em;
}

/* =========================================================
   Banner 首屏
   设计：x=0, y=0, w=3200, h=2634 → top0 height 29.559%
   ========================================================= */
.banner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 29.559%;
  overflow: hidden;
}

.banner__layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 主视觉：设计 x=447/3230≈13.84%, y=272/2634≈10.33%, w=2783/3230≈86.16%, h=1417/2634≈53.8% */
.banner__hero {
  position: absolute;
  left: 13.84%;
  top: 10.33%;
  width: 86.16%;
  height: 53.8%;
  object-fit: contain;
  object-position: right center;
  pointer-events: none;
}

/* 文案叠层铺满 Banner，子项按稿面绝对定位（Figma 0:143） */
.banner__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.banner__content > * {
  pointer-events: auto;
}

/* 主标题「设备联网」：x=311.04 y=527.83，字号 116.66、行高 169 */
.banner__title {
  position: absolute;
  left: 9.72%;
  top: 20.042%; /* 527.83 / 2634 */
  margin: 0;
  font-size: 1.1666em;
  font-weight: 700;
  line-height: 1.449;
  color: #000;
  white-space: nowrap;
}

/* 副标题：x=321.04 y=708.53，字号 77.78、行高 113 */
.banner__subtitle {
  position: absolute;
  left: 10.0325%;
  top: 26.899%; /* 708.53 / 2634 */
  margin: 0;
  font-size: 0.7778em;
  font-weight: 700;
  line-height: 1.453;
  color: #000;
  white-space: nowrap;
}

/* 描述：x=321.04 y=894.39，字号 44.44、行高 64，宽 1100 */
.banner__desc {
  position: absolute;
  left: 10.0325%;
  top: 33.955%; /* 894.39 / 2634 */
  width: 34.375%; /* 1100 / 3200 */
  margin: 0;
  font-size: 0.4444em;
  font-weight: 500;
  line-height: 1.44;
  color: #222;
}

/* 双按钮：获取方案 x=321.67，预约演示 x=830，y=1164.96，间距 66.66 */
.banner__btns {
  position: absolute;
  left: 10.052%; /* 321.67 / 3200 */
  top: 44.228%; /* 1164.96 / 2634 */
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: calc(100vw * 66.66 / 3200);
}

/* 两个框样式对齐小推车页（尺寸/字号/边框/圆角）；本组 left/top 不改 */
.btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: calc(100vw * 441.67 / 3243);
  height: calc(100vw * 126.66 / 3243);
  min-width: 0;
  min-height: 0;
  padding: 0 calc(100vw * 72 / 3243) 0 calc(100vw * 98 / 3243);
  border: 0;
  border-radius: calc(100vw * 63.33 / 3243);
  font-size: calc(100vw * 50 / 3243);
  font-weight: 400;
  line-height: 1.44;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn img {
  width: calc(100vw * 48 / 3243);
  height: calc(100vw * 43 / 3243);
  margin-left: auto;
  flex-shrink: 0;
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
}

.btn--outline {
  padding-left: calc(100vw * 96 / 3243);
  padding-right: calc(100vw * 64 / 3243);
  background: #f0f6fe;
  color: var(--color-primary);
  box-shadow: inset 0 0 0 calc(100vw * 5 / 3243) #99bfff;
}

.btn--outline img {
  width: calc(100vw * 63 / 3243);
  height: calc(100vw * 52 / 3243);
}

.btn:hover {
  transform: translateY(-3%);
}

/* =========================================================
   核心优势 0:156
   画板 x=217 y=1668 w=2766 h=424（相对 Canvas 3200×8911）
   内部坐标相对本舞台 2766×424
   ========================================================= */
.advantage {
  position: absolute;
  left: 6.78125%;   /* 217 / 3200 */
  top: 18.7184%;    /* 1668 / 8911 */
  width: 86.4375%;  /* 2766 / 3200 */
  height: 4.7582%;  /* 424 / 8911 */
  z-index: 5;
  overflow: visible;
}

/*
 * 卡片底「矩形 4.png」：舞台仍按外框 2766×424，
 * 图四周约 19px 透明，白底视觉为 2728×387，不再用纯色铺满。
 */
.advantage__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.advantage__item {
  position: absolute;
  inset: 0;
  margin: 0;
  pointer-events: none;
}

.advantage__item > * {
  pointer-events: auto;
}

.advantage__icon,
.advantage__title,
.advantage__text,
.advantage__divider {
  position: absolute;
  z-index: 2;
  margin: 0;
}

/* 图标：图层 6/7/8/9 */
.advantage__item--1 .advantage__icon {
  left: 3.471%;   /* 96 / 2766 */
  top: 25%;       /* 106 / 424 */
  width: 6.941%;  /* 192 / 2766 */
}

.advantage__item--2 .advantage__icon {
  left: 29.393%;  /* 813 / 2766 */
  top: 25%;       /* 106 / 424 */
  width: 6.724%;  /* 186 / 2766 */
}

.advantage__item--3 .advantage__icon {
  left: 56.363%;  /* 1559 / 2766 */
  top: 22.642%;   /* 96 / 424 */
  width: 6.543%;  /* 181 / 2766 */
}

.advantage__item--4 .advantage__icon {
  left: 79.682%;  /* 2204 / 2766 */
  top: 24.057%;   /* 102 / 424 */
  width: 6.327%;  /* 175 / 2766 */
}

.advantage__icon {
  height: auto;
  max-width: none;
}

/* 标题：44.44 / 行高 64 / #000 */
.advantage__title {
  top: 36.137%; /* 153.22 / 424 */
  font-size: 0.4444em;
  font-weight: 400;
  color: #000;
  line-height: 1.441;
  white-space: nowrap;
}

.advantage__item--1 .advantage__title {
  left: 11.534%; /* 319.04 / 2766 */
  width: 8.062%; /* 223 / 2766 */
}

.advantage__item--2 .advantage__title {
  left: 37.143%; /* 1027.38 / 2766 */
  width: 9.653%; /* 267 / 2766 */
}

.advantage__item--3 .advantage__title {
  left: 63.655%; /* 1760.71 / 2766 */
  width: 9.653%;
}

.advantage__item--4 .advantage__title {
  left: 86.673%; /* 2397.38 / 2766 */
  width: 9.653%;
}

/* 说明：33.33 / 行高 48 / #6E6D6D；与标题间距约 17 */
.advantage__text {
  top: 55.271%; /* 234.35 / 424 */
  font-size: 0.3333em;
  font-weight: 400;
  line-height: 1.441;
  color: #6e6d6d;
  white-space: nowrap;
}

.advantage__item--1 .advantage__text {
  left: 11.474%; /* 317.38 / 2766 */
  width: 9.653%; /* 267 / 2766 */
}

.advantage__item--2 .advantage__text {
  left: 37.203%; /* 1029.04 / 2766 */
  width: 8.46%;  /* 234 / 2766 */
}

.advantage__item--3 .advantage__text {
  left: 63.655%; /* 1760.71 / 2766 */
  width: 7.231%; /* 200 / 2766 */
}

.advantage__item--4 .advantage__text {
  left: 86.733%; /* 2399.04 / 2766 */
  width: 9.653%;
}

/* 分隔线：矩形 8 / 拷贝 / 拷贝 2 */
.advantage__divider {
  object-fit: fill;
}

.advantage__divider--1 {
  left: 26.464%;  /* 732 / 2766 */
  top: 16.038%;   /* 68 / 424 */
  width: 0.108%;  /* 3 / 2766 */
  height: 65.094%; /* 276 / 424 */
}

.advantage__divider--2 {
  left: 52.892%;  /* 1463 / 2766 */
  top: 12.264%;   /* 52 / 424 */
  width: 0.181%;  /* 5 / 2766 */
  height: 74.292%; /* 315 / 424 */
}

.advantage__divider--3 {
  left: 76.175%;  /* 2107 / 2766 */
  top: 16.038%;
  width: 0.108%;
  height: 65.094%;
}

/* =========================================================
   数据全链路
   设计：y=2174.88/8911=24.407%, h=17.474%
   ========================================================= */
.flow {
  position: absolute;
  left: 0;
  top: 24.407%;
  width: 100%;
  height: 17.474%;
  overflow: hidden;
}

.flow__layer {
  position: absolute;
  left: 0;
  top: 1.23%;
  width: 100%;
  height: 98.32%;
  object-fit: cover;
}

.flow__diagram {
  position: absolute;
  left: 0;
  top: 11.31%;
  width: 97%;
  height: 88.69%;
  object-fit: contain;
  object-position: left center;
  pointer-events: none;
}

/* 通用区块标题 */
.section-head {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
  width: 60%;
}

.section-head__title {
  font-size: 0.7222em; /* 72.22，对齐小推车 */
  font-weight: 700;
  color: #000;
  line-height: 1.45;
}

.section-head__line {
  display: block;
  width: 1.02em; /* 102/100，对齐小推车横线图 */
  height: auto;
  margin: 0.14em auto 0.22em;
}

.section-head__sub {
  font-size: 0.3889em; /* 38.89，对齐小推车 */
  color: var(--color-muted);
  line-height: 1.45;
}

.section-head--flow {
  top: 0;
}

.flow__steps {
  position: absolute;
  left: 6%;
  top: 17%;
  width: 88%;
  height: 18%;
  display: flex;
  justify-content: space-between;
  z-index: 3;
}

.flow__step {
  width: 15%;
  text-align: center;
}

.flow__step h3 {
  font-size: 0.4444em;
  font-weight: 600;
  color: #000;
  margin-bottom: 0.2em;
  white-space: nowrap;
}

.flow__num {
  color: var(--color-primary);
  font-size: 1.125em;
}

.flow__step p {
  font-size: 0.3333em;
  color: var(--color-muted);
  line-height: 1.45;
}

/* 协议条：设计在组内 y≈1127，相对 flow 高度约 72.4% */
.protocol {
  position: absolute;
  left: 9.44%; /* 302/3200 */
  top: 72.4%;
  width: 81.81%; /* 2618/3200 */
  height: 10.34%; /* 161/1557 */
  display: flex;
  justify-content: space-between;
  z-index: 4;
}

.protocol__item {
  position: relative;
  width: 13.8%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 0.5em;
  padding-right: 0.12em;
  box-sizing: border-box;
  gap: 0.2em;
}

.protocol__card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 0;
}

.protocol__icon {
  position: relative;
  z-index: 1;
  width: 26%;
  height: auto;
  flex-shrink: 0;
  transform: translateY(-0.12em);
}

.protocol__name {
  position: relative;
  z-index: 1;
  font-size: 0.3889em;
  color: var(--color-primary);
  white-space: nowrap;
  transform: translateY(-0.12em);
}

.protocol__name--muted {
  color: var(--color-muted);
}

.protocol__item--more .protocol__icon {
  width: 18%;
}

.protocol__item--more .protocol__name {
  top: -5%;
}

/* =========================================================
   实时数据监控
   设计：x=32/3200=1%, y=3581/8911=40.186%, w=97.531%, h=23.319%
   ========================================================= */
.monitor {
  position: absolute;
  left: 1%;
  top: 40.186%;
  width: 97.531%;
  height: 23.319%;
  overflow: hidden;
}

.monitor__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-head--monitor {
  top: 5.78%;
}

.monitor__card {
  position: absolute;
  z-index: 3;
  text-align: center;
  width: 16%;
}

.monitor__card h3 {
  font-size: 0.4444em;
  font-weight: 600;
  color: #000;
  margin-bottom: 0.18em;
  line-height: 1.4;
}

.monitor__card p {
  font-size: 0.3333em;
  color: var(--color-muted);
  line-height: 1.4;
}

/* 相对 monitor 容器的百分比定位（对照设计稿文案坐标） */
.monitor__card--tl {
  left: 5.5%;
  top: 34%;
}

.monitor__card--tr {
  right: 4.5%;
  top: 35.5%;
}

.monitor__card--bl {
  left: 6.5%;
  top: 58%;
}

.monitor__card--br {
  right: 3.5%;
  top: 59.5%;
  width: 18%;
}

.monitor__card--bottom {
  /* 宽 20%，左缘 39%；不用 translateX，避免入场动画把位移清掉后整块偏右 */
  left: 39%;
  top: 86.3%;
  width: 20%;
}

/* =========================================================
   平台架构
   设计：x=213/3200=6.656%, y=5704/8911=64.012%, w=86.531%, h=22.442%
   ========================================================= */
.architecture {
  position: absolute;
  left: 6.656%;
  top: 64.012%;
  width: 86.531%;
  height: 22.442%;
  overflow: visible;
}

.section-head--arch {
  top: 0;
}

.architecture__diagram {
  position: absolute;
  left: 0;
  top: 4.69%;
  width: 97.54%;
  height: 75.81%;
  object-fit: contain;
  pointer-events: none;
}

/* 立体图节点文案：相对 .architecture，对准各层图标 */
.architecture__nodes {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  list-style: none;
}

.architecture__node {
  position: absolute;
  margin: 0;
  padding: 0;
  font-size: 0.3333em; /* 设计 33.33px */
  line-height: 1.44;
  color: #000;
  white-space: nowrap;
  pointer-events: auto;
  user-select: text;
}

.architecture__node--dual {
  text-align: center;
  white-space: normal;
  line-height: 1.383; /* 46.11/33.33 */
}

.architecture__node--dual span {
  display: block;
  color: #000;
}

.architecture__node--dual em {
  display: block;
  font-style: normal;
  color: var(--color-muted);
}

/* 应用层：y=510.68/1999.85，文字在图标下方 */
.architecture__node--mes { left: 27.19%; top: 25.54%; }
.architecture__node--erp { left: 36.29%; top: 25.54%; }
.architecture__node--wms { left: 45.03%; top: 25.54%; }
.architecture__node--bi { left: 53.73%; top: 25.54%; }
.architecture__node--cloud { left: 62.69%; top: 25.54%; }
.architecture__node--mobile { left: 71.68%; top: 25.54%; }

/* 边缘层：y=864.28/1999.85 */
.architecture__node--gateway { left: 26.45%; top: 43.22%; width: 7.8%; }
.architecture__node--engine { left: 38.24%; top: 43.22%; width: 6.89%; }
.architecture__node--adapter { left: 47.37%; top: 43.22%; width: 10.14%; }
.architecture__node--storage { left: 60.29%; top: 43.22%; width: 4.84%; }
.architecture__node--secure { left: 71.05%; top: 43.22%; width: 4.84%; }

/* 设备层：y=1224.68/1999.85，居中对准图标 */
.architecture__node--plc { left: 27.57%; top: 61.24%; width: 2.13%; text-align: center; }
.architecture__node--cnc { left: 35.1%; top: 61.24%; width: 2.49%; text-align: center; }
.architecture__node--robot { left: 42.21%; top: 61.24%; width: 3.61%; text-align: center; }
.architecture__node--sensor { left: 49.9%; top: 61.24%; width: 3.61%; text-align: center; }
.architecture__node--camera { left: 56.96%; top: 61.24%; width: 4.84%; text-align: center; }
.architecture__node--meter { left: 65.9%; top: 61.24%; width: 2.42%; text-align: center; }
.architecture__node--agv { left: 73.59%; top: 61.24%; width: 2.38%; text-align: center; }

.architecture__label {
  position: absolute;
  z-index: 3;
  width: 14%;
}

.architecture__label h3 {
  font-size: 0.4444em;
  font-weight: 600;
  color: #000;
  margin-bottom: 0.1em;
}

.architecture__label h3.is-blue {
  color: var(--color-primary);
  font-size: 0.3889em;
}

.architecture__label p {
  font-size: 0.3889em;
  color: #000;
  line-height: 1.45;
}

.architecture__label--app-r p,
.architecture__label--edge-r p,
.architecture__label--device-r p {
  font-size: 0.3333em;
  color: var(--color-muted);
}

.architecture__label--app-l {
  left: 4.8%;
  top: 21.1%;
}

.architecture__label--edge-l {
  left: 5%;
  top: 39.3%;
}

.architecture__label--device-l {
  left: 5%;
  top: 57.1%;
}

.architecture__label--app-r {
  left: 83.8%;
  top: 20.6%;
  width: 13%;
}

.architecture__label--edge-r {
  left: 83.8%;
  top: 38.7%;
  width: 13%;
}

.architecture__label--device-r {
  left: 84.1%;
  top: 56.1%;
  width: 13%;
}

/* 统计条：相对 architecture，y≈1599.85/1999.85≈80% */
.stats {
  position: absolute;
  left: 0.87%;
  top: 80%;
  width: 99.13%;
  height: 20%;
  overflow: hidden;
  border-radius: 0.15em;
}

.stats__bg {
  position: absolute;
  inset: 0;
}

.stats__title {
  position: absolute;
  left: 50%;
  top: 14.5%;
  transform: translateX(-50%);
  font-size: 0.4444em;
  font-weight: 600;
  color: #000;
  white-space: nowrap;
  z-index: 2;
}

.stats__list {
  position: absolute;
  left: 0;
  top: 36%;
  width: 100%;
  height: 55%;
  display: flex;
  z-index: 2;
}

.stats__item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.stats__item strong {
  font-size: 0.6204em;
  color: var(--color-primary);
  font-weight: 700;
  line-height: 1.3;
}

.stats__item span {
  margin-top: 0.08em;
  font-size: 0.3333em;
  color: var(--color-muted);
}

.stats__divider {
  position: absolute;
  left: 0;
  top: 10%;
  width: auto;
  height: 80%;
}

/* =========================================================
   CTA 外框：x=219/3200, y=7755/8911, w=86.25%, h=5.252%
   内部视觉见 shared/site-cta.css（与关于我们一致）
   ========================================================= */
.cta {
  position: absolute;
  left: 6.844%;
  top: 87.027%;
  width: 86.25%;
  height: 5.252%;
}

/* =========================================================
   预约演示弹层：与首页 / 小推车 / 关于我们同一套表单
   ========================================================= */
#demoModal:not(.is-open) {
  display: none !important;
}

#demoModal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-size: 16px;
  line-height: 1.5;
}

#demoModal.is-open {
  display: flex;
}

#demoModal .modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 20, 45, 0.55);
}

#demoModal .modal__dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 28rem);
  background: #fff;
  border-radius: 12px;
  padding: 32px 28px 28px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

#demoModal .modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 28px;
  line-height: 1;
  color: #999;
}

#demoModal .modal__title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #122;
}

#demoModal .modal__field {
  display: block;
  margin-bottom: 14px;
}

#demoModal .modal__field span {
  display: block;
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
}

#demoModal .modal__field input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
}

#demoModal .modal__field input:focus {
  border-color: var(--color-primary);
  outline: none;
}

#demoModal .modal__submit {
  width: 100%;
  height: 44px;
  margin-top: 8px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* =========================================================
   响应式：与首页 index-5 相同策略
   主体始终按 Figma 3200 画布百分比随视口缩放，不封顶 1920。
   窄屏只隐藏画布内顶栏，改用全站吸顶导航，避免拖拽窗口时布局突变。
   ========================================================= */

/* =========================================================
   入场动效：Banner 升起 + 滚动放大滑入；横排错开
   ========================================================= */
.reveal,
.item-reveal {
  opacity: 0;
  transform: translateY(20px) scale(0.94);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible,
.item-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* 标题条靠 translateX(-50%) 居中，只淡入 */
.section-head.item-reveal,
.section-head.item-reveal.is-in {
  transform: translateX(-50%);
}

.advantage__item--1.item-reveal { transition-delay: 0.04s; }
.advantage__item--2.item-reveal { transition-delay: 0.16s; }
.advantage__item--3.item-reveal { transition-delay: 0.28s; }
.advantage__item--4.item-reveal { transition-delay: 0.4s; }

.flow__step.item-reveal:nth-child(1) { transition-delay: 0.04s; }
.flow__step.item-reveal:nth-child(2) { transition-delay: 0.14s; }
.flow__step.item-reveal:nth-child(3) { transition-delay: 0.24s; }
.flow__step.item-reveal:nth-child(4) { transition-delay: 0.34s; }
.flow__step.item-reveal:nth-child(5) { transition-delay: 0.44s; }
.flow__step.item-reveal:nth-child(6) { transition-delay: 0.54s; }

.protocol__item.item-reveal:nth-child(1) { transition-delay: 0.04s; }
.protocol__item.item-reveal:nth-child(2) { transition-delay: 0.12s; }
.protocol__item.item-reveal:nth-child(3) { transition-delay: 0.2s; }
.protocol__item.item-reveal:nth-child(4) { transition-delay: 0.28s; }
.protocol__item.item-reveal:nth-child(5) { transition-delay: 0.36s; }
.protocol__item.item-reveal:nth-child(6) { transition-delay: 0.44s; }
.protocol__item.item-reveal:nth-child(7) { transition-delay: 0.52s; }

.monitor__card--tl.item-reveal { transition-delay: 0.08s; }
.monitor__card--tr.item-reveal { transition-delay: 0.2s; }
.monitor__card--bl.item-reveal { transition-delay: 0.32s; }
.monitor__card--br.item-reveal { transition-delay: 0.44s; }
.monitor__card--bottom.item-reveal { transition-delay: 0.56s; }

.stats__item.item-reveal:nth-child(1) { transition-delay: 0.04s; }
.stats__item.item-reveal:nth-child(2) { transition-delay: 0.14s; }
.stats__item.item-reveal:nth-child(3) { transition-delay: 0.24s; }
.stats__item.item-reveal:nth-child(4) { transition-delay: 0.34s; }
.stats__item.item-reveal:nth-child(5) { transition-delay: 0.44s; }

.banner.reveal {
  opacity: 1;
  transform: none;
}

.banner-rise {
  opacity: 0;
}

.banner.is-visible .banner-rise {
  animation: bannerRise 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--d, 0s);
}

.banner.is-visible .banner-cart {
  animation:
    bannerCartIn 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.14s both,
    bannerCartFloat 4.8s ease-in-out 1.35s infinite;
}

@keyframes bannerRise {
  from {
    opacity: 0;
    transform: translateY(1.5em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes bannerCartIn {
  from {
    opacity: 0;
    transform: translate3d(7%, 8%, 0) scale(0.88);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes bannerCartFloat {
  0%,
  100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -1.4%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn:hover,
  .cta__btn:hover {
    transform: none;
  }

  .reveal,
  .item-reveal,
  .banner-rise,
  .banner-cart {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .section-head.item-reveal,
  .section-head.item-reveal.is-in {
    transform: translateX(-50%) !important;
  }
}

/* 窄屏改用与关于我们一致的吸顶导航，隐藏画布内顶栏；画布继续等比缩放 */
@media (max-width: 991px) {
  .header,
  .top-nav {
    display: none;
  }
}