/* =========================================================
   本地化业务系统展示站 — 样式
   设计基调：大量留白、浅灰白背景、克制动效
   字体全部使用系统字体栈，不加载任何外部资源
   ========================================================= */

/* ---------- 设计变量 ---------- */
:root {
  --ink:        #1d1d1f;   /* 主文字 */
  --ink-2:      #6e6e73;   /* 次要文字 */
  --ink-3:      #86868b;   /* 更弱的说明文字 */
  --line:       #e5e5e7;   /* 分割线 */
  --bg:         #ffffff;
  --bg-grey:    #f5f5f7;   /* 交替区块背景 */
  --accent:     #0071e3;
  --accent-dk:  #0060c0;
  --wa:         #25d366;   /* WhatsApp 绿 */
  --err:        #d93025;
  --ok:         #1a7f37;
  --radius:     18px;
  --radius-lg:  24px;
  --shadow:     0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow-lg:  0 2px 6px rgba(0,0,0,.05), 0 20px 48px rgba(0,0,0,.10);
  --wrap:       1160px;
  --wrap-narrow: 820px;
  --ease:       cubic-bezier(.22,.61,.36,1);
}

/* ---------- 基础重置 ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Microsoft YaHei", "Helvetica Neue", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a  { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: var(--wrap-narrow); }

/* 键盘用户的跳转链接 */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: 980px;
  font-size: 16px; font-weight: 500;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dk); }
.btn--ghost { color: var(--accent); border-color: rgba(0,113,227,.35); background: transparent; }
.btn--ghost:hover { background: rgba(0,113,227,.06); border-color: rgba(0,113,227,.6); }
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: #1fbb59; }
.btn--wa svg { width: 19px; height: 19px; fill: currentColor; }
.btn--sm { padding: 11px 22px; font-size: 15px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; pointer-events: none; }

.center-cta { margin-top: 40px; text-align: center; }

/* =========================================================
   导航栏
   ========================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  height: 60px; display: flex; align-items: center; gap: 24px;
}
.nav__logo { display: flex; align-items: center; gap: 9px; }
/* 品牌标记，几何由 src/brand.js 生成。
   直角、不加圆角 —— 全站其他东西都是圆的（卡片 24px、按钮是胶囊），
   标记是唯一硬的元素，当锚点用。 */
.nav__mark { height: 19px; width: auto; flex: none; display: block; color: var(--ink); }
/* 页脚是竖排的 flex，默认 stretch 会把 width:auto 的 svg 拉成整列宽，
   笔画就跑到列中间去了。必须显式靠左。 */
.footer__brand .nav__mark { height: 22px; align-self: flex-start; }
.nav__name { font-size: 16px; font-weight: 600; letter-spacing: .12em; }

.nav__links { display: flex; gap: 28px; margin-left: auto; }
.nav__links a { font-size: 14px; color: var(--ink-2); transition: color .2s var(--ease); }
.nav__links a:hover { color: var(--ink); }

/* 语言切换 */
.lang { display: flex; gap: 2px; padding: 3px; background: var(--bg-grey); border-radius: 980px; }
.lang a {
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  padding: 4px 11px; border-radius: 980px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.lang a:hover { color: var(--ink); }
.lang a[aria-current="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.nav__cta {
  font-size: 14px; font-weight: 500; color: #fff;
  background: var(--ink); padding: 8px 18px; border-radius: 980px;
  transition: opacity .2s var(--ease);
}
.nav__cta:hover { opacity: .82; }

.nav__burger {
  display: none; margin-left: auto;
  width: 32px; height: 32px; background: none; border: 0; padding: 0; position: relative;
}
.nav__burger span {
  position: absolute; left: 6px; width: 20px; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform .3s var(--ease);
}
.nav__burger span:nth-child(1) { top: 12px; }
.nav__burger span:nth-child(2) { top: 19px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* =========================================================
   Hero
   ========================================================= */
.hero { position: relative; padding: 158px 0 108px; overflow: hidden; }
.hero__inner { position: relative; z-index: 1; text-align: center; }
.hero__eyebrow { font-size: 15px; color: var(--accent); font-weight: 500; margin-bottom: 20px; }
.hero__title {
  font-size: clamp(38px, 6.2vw, 74px);
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.08;
  max-width: 940px; margin: 0 auto;    /* 靠宽度限制换行，不用 <br>，翻译后不会错位
                                          注意：中文不能用 ch 单位，1ch 约等于半个汉字，会把词拆开 */
  text-wrap: balance;
  /* 中文没有词边界，默认可以从任意字之间断开。keep-all 让它只在空格处换行，
     所以「为生意注入未来力 让生意跟上时代」正好断成两行，不会切成「未来/力」。
     俄语/英语本来就在空格断，不受影响。
     break-word 是兜底：极窄屏幕上放不下时宁可断字，也不要横向溢出。 */
  word-break: keep-all;
  overflow-wrap: break-word;
}
.hero__sub {
  margin: 26px auto 0; max-width: 620px;
  font-size: clamp(17px, 2vw, 21px); color: var(--ink-2); line-height: 1.55;
  text-wrap: pretty;
}
.hero__actions { margin-top: 38px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero__actions--left { justify-content: flex-start; }

/* 首页产品展示：真实界面 + 极简浏览器框，弱化装饰，突出产品本身。 */
.hero__visual {
  position: relative; margin: 68px auto 0; max-width: 960px; padding: 0 22px;
  text-align: left;
}
.hero__visual::before {
  content: ''; position: absolute; left: 7%; right: 7%; top: -18px; height: 72%;
  border-radius: 28px; border: 1px solid rgba(0,0,0,.045);
  background: rgba(255,255,255,.44); backdrop-filter: blur(18px);
  box-shadow: 0 18px 52px rgba(0,70,140,.055); transform: scale(.965);
}
.hero-product {
  position: relative; overflow: hidden; border-radius: 24px; background: #fff;
  border: 1px solid rgba(0,0,0,.065);
  box-shadow: 0 2px 4px rgba(0,0,0,.035), 0 18px 42px rgba(0,0,0,.085), 0 48px 100px rgba(0,50,100,.105);
}
.hero-product__bar {
  height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), #fafafb);
  border-bottom: 1px solid rgba(0,0,0,.055);
}
.hero-product__bar span {
  width: 7px; height: 7px; border-radius: 50%; background: #d7d7dc;
}
.hero-product__bar span:first-child { background: color-mix(in srgb, var(--accent) 54%, #d8e9f8); }
.hero-product__bar i {
  width: 34%; height: 8px; margin: 0 auto; border-radius: 99px; background: #eeeeF1;
  transform: translateX(-20px);
}
.hero-product img {
  display: block; width: 100%; aspect-ratio: 16 / 9.7; object-fit: cover; object-position: top left;
}

.hero__stats {
  margin: 74px auto 0; max-width: 780px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  border-top: 1px solid var(--line); padding-top: 34px;
}
.hero__stats li { display: flex; flex-direction: column; gap: 4px; }
.hero__stats strong { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; }
.hero__stats span { font-size: 13px; color: var(--ink-3); }

.hero__glow {
  position: absolute; top: -300px; left: 50%; transform: translateX(-50%);
  width: 1240px; height: 900px; pointer-events: none;
  /* closest-side：让渐变在盒子边缘之前就淡到全透明，否则会看到方形边界 */
  background: radial-gradient(closest-side, rgba(0,113,227,.12), rgba(0,113,227,0));
}

/* =========================================================
   通用区块
   ========================================================= */
.section { padding: 104px 0; }
.section--grey { background: var(--bg-grey); }

.sec-head { max-width: 720px; margin: 0 auto 58px; text-align: center; }
.sec-eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.sec-title {
  font-size: clamp(29px, 3.6vw, 43px); letter-spacing: -0.03em; text-wrap: balance;
  /* 标题级中文不能从任意两字之间断开（否则会出现「才/会」这种劈词）。
     keep-all 让换行只发生在标点和空格处；break-word 兜底防止极窄屏溢出。 */
  word-break: keep-all; overflow-wrap: break-word;
}
.sec-title--left { text-align: left; margin-bottom: 34px; }
.sec-sub { margin-top: 16px; font-size: 18px; color: var(--ink-2); text-wrap: pretty; }
.sub-title {
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 18px;
}

/* =========================================================
   系统卡片
   ========================================================= */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card {
  position: relative;                    /* 给下面标题链接的透明覆盖层做定位基准 */
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(0,0,0,.05);
  border-radius: var(--radius-lg); padding: 32px 30px 28px;
  box-shadow: var(--shadow);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* 整张卡片可点：标题里的 <a> 铺一层透明覆盖层盖住整张卡。
   这样点卡片任意位置都进详情页，但无障碍树里仍然只有一个链接、
   键盘 Tab 也只停一次。「了解更多」因此只是视觉装饰（模板里是 <span>），
   卡片里不要再放第二个 <a>，否则会被覆盖层挡住点不到。 */
.card__title a::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
}
.card:focus-within { box-shadow: var(--shadow-lg); }

/* ---------- 卡片顶部的演示画面 ----------
   放系统详情页首屏那套界面示意图（src/visuals.js 的 MOCKS），
   负 margin 抵消 .card 的内边距做成通栏，再用固定高度把下半截裁掉 ——
   读起来就是一张从下方探上来的界面截图。
   底色是该系统主题色的一层极淡渐变，收到全站的浅灰，当作「摆台」。
   换成真实截图（site.config.js 的 screenshots）时用的是同一个外框。 */
.card__art {
  position: relative;
  container-type: inline-size;           /* 给下面按卡片宽度缩放用 */
  margin: -32px -30px 0;
  height: 202px; overflow: hidden;
  padding: 22px 22px 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex; align-items: flex-start; justify-content: center;
  background: linear-gradient(162deg, color-mix(in srgb, var(--sys) 11%, #fff) 0%, var(--bg-grey) 100%);
  border-bottom: 1px solid rgba(0,0,0,.05);
}

/* 兜底（不支持容器查询的老浏览器）：示意图跟着卡片宽度流式排版。
   能看，只是界面元素相对偏大。 */
.card__shot {
  width: 100%; flex: none;
  transform-origin: 50% 0;
  transition: transform .45s var(--ease);
}
/* 悬停时轻微放大 —— 外框是 overflow:hidden，放大只会让画面更贴近，不会溢出 */
.card:hover .card__shot { transform: scale(1.04); }

/* 正常路径：示意图按 560px 这个「设计宽度」排版，再整体缩到卡片宽度。
   这样界面里的字号、间距、KPI 数字的比例都是对的 —— 直接让它流式撑到
   310px 的卡片里，「1 248」会被折成两行，一眼就看出是拼的，不像截图。

   缩放比例只能按容器宽度分档写死：CSS 里 calc() 不能把长度除以长度得到
   一个无单位的比例，scale(calc(100cqw / 560)) 是无效值（整条 transform 会
   被丢掉，示意图直接溢出）。分档够密的话，档与档之间看不出跳变。

   注意 @container 的宽度查的是容器的**内容盒**，左右各 22px 的内边距已经
   扣掉了，比例里不要再减一次。每档取该档下界 ÷ 560，保证档内最窄时也放得下；
   档内偏宽时只是摆台留白多一点。 */
@supports (container-type: inline-size) {
  .card__shot { width: 560px; }

  @container (max-width: 229px)                        { .card__shot { transform: scale(.365); } .card:hover .card__shot { transform: scale(.380); } }
  @container (min-width: 230px) and (max-width: 259px) { .card__shot { transform: scale(.410); } .card:hover .card__shot { transform: scale(.426); } }
  @container (min-width: 260px) and (max-width: 289px) { .card__shot { transform: scale(.464); } .card:hover .card__shot { transform: scale(.483); } }
  @container (min-width: 290px) and (max-width: 319px) { .card__shot { transform: scale(.517); } .card:hover .card__shot { transform: scale(.538); } }
  @container (min-width: 320px) and (max-width: 349px) { .card__shot { transform: scale(.571); } .card:hover .card__shot { transform: scale(.594); } }
  @container (min-width: 350px) and (max-width: 389px) { .card__shot { transform: scale(.625); } .card:hover .card__shot { transform: scale(.650); } }
  @container (min-width: 390px) and (max-width: 449px) { .card__shot { transform: scale(.696); } .card:hover .card__shot { transform: scale(.724); } }
  @container (min-width: 450px) and (max-width: 529px) { .card__shot { transform: scale(.803); } .card:hover .card__shot { transform: scale(.835); } }
  @container (min-width: 530px) and (max-width: 589px) { .card__shot { transform: scale(.946); } .card:hover .card__shot { transform: scale(.984); } }
  /* 再宽就不放大了，免得示意图糊 —— 让它按原尺寸居中，两侧多留摆台 */
  @container (min-width: 590px)                        { .card__shot { transform: scale(1);    } .card:hover .card__shot { transform: scale(1.04); } }
}

/* 界面示意图在卡片里的调整：
   背后的垫层和左下角的悬浮小卡在裁切框里只会露出半截，直接藏掉；
   阴影调深一点，让它从浅灰摆台上「浮」起来。 */
.card__art .mock__stack,
.card__art .mock__float { display: none; }
.card__art .mock__panel {
  /* 七套示意图的主视图高度不一样（机位平面图比营收表短一大截）。
     不给下限的话，短的那几张会整块浮在摆台上、长的被裁掉下半截，
     八张卡两种观感。统一撑到 470px，保证在最小的档位上也一定裁切 ——
     全部都是「从下方探上来的截图」。多出来的高度会被外框裁掉，看不到。 */
  min-height: 470px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 26px rgba(0,0,0,.11);
  transition: box-shadow .45s var(--ease);
}
.card:hover .card__art .mock__panel {
  box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 18px 42px rgba(0,0,0,.16);
}

/* 真实截图走这一支 */
.card__shot--img img {
  width: 100%; display: block;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 26px rgba(0,0,0,.11);
  transition: box-shadow .45s var(--ease);
}
.card:hover .card__shot--img img {
  box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 18px 42px rgba(0,0,0,.16);
}

/* 没有界面示意图、退回插画时（ART）：插画是给 168px 的格子画的，居中放小一点 */
.card__art .ill { min-height: 0; width: auto; margin: 0 auto; transform: scale(.8); }

/* 图标压在图形下边缘上，改成白底描边，免得和图形的主题色底糊在一起 */
.card__art + .sys-icon {
  position: relative; z-index: 1;
  width: 42px; height: 42px; border-radius: 12px;
  margin-top: -21px; margin-bottom: 16px;
  background: #fff; border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* 每套系统一个主题色，避免八张卡片看起来一模一样 */
.sys-icon {
  width: 46px; height: 46px; border-radius: 13px;
  background: color-mix(in srgb, var(--sys) 10%, transparent);
  display: grid; place-items: center; margin-bottom: 20px; flex: none;
}
.sys-icon svg {
  width: 24px; height: 24px; fill: none;
  stroke: var(--sys); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.card__title { font-size: 21px; letter-spacing: -0.02em; }
.card__title a { transition: color .2s var(--ease); }
/* 悬停整张卡片就变色 —— 覆盖层已经把鼠标事件接管了，写 a:hover 只在文字上生效 */
.card:hover .card__title a { color: var(--accent); }
.card__desc { margin-top: 10px; font-size: 15px; color: var(--ink-2); line-height: 1.55; }

.card__list { margin-top: 20px; display: grid; gap: 9px; }
.card__list li { position: relative; padding-left: 20px; font-size: 14.5px; color: var(--ink-2); }
.card__list li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .5;
}

.price-tag {
  margin-top: 20px; font-size: 15px; font-weight: 600;
}
.price-tag span { font-size: 13px; font-weight: 500; color: var(--ink-3); margin-right: 6px; }

.card__link {
  margin-top: auto; padding-top: 22px;
  color: var(--accent); font-size: 15px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.card__link span { transition: transform .25s var(--ease); }
.card:hover .card__link span { transform: translateX(4px); }

.card--cta {
  background: var(--ink); border-color: var(--ink);
  color: #fff; justify-content: center; align-items: flex-start;
}
.card--cta .card__desc { color: rgba(255,255,255,.66); }
.card--cta .btn { margin-top: 24px; }

/* =========================================================
   为什么选择我们
   ========================================================= */
.feature-grid { display: grid; gap: 44px 40px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.feature__num { display: block; font-size: 13px; font-weight: 600; color: var(--ink-3); letter-spacing: .08em; margin-bottom: 14px; }
.feature h3 { font-size: 19px; margin-bottom: 10px; }
.feature p { font-size: 15px; color: var(--ink-2); line-height: 1.6; }

/* =========================================================
   合作流程
   ========================================================= */
/* gap 必须是 0：每一步各画自己那段连线，行与行之间留缝的话，
   整条线会断成虚线。步与步的间距由 .step 自己的上下内边距给。 */
.steps { max-width: 780px; margin: 0 auto; display: grid; gap: 0; }

/* 六步是一条时间线，不是六个并列条目。原来用横分割线切开，读起来像
   六件互不相干的事；改成串在一条竖线上，「第一次通话 → 上线 → 长期维护」
   的先后关系一眼就能看出来。 */
.step { position: relative; display: flex; gap: 24px; padding: 22px 0; }

/* 连线：穿过序号圆点的圆心（圆点 34px 宽，圆心在 17px 处） */
.step::before {
  content: ""; position: absolute; left: 16px; top: 0; bottom: 0;
  width: 2px; background: var(--line);
}
/* 首尾两段只画到圆点为止，不要在时间线两头多出一截 */
.step:first-child::before { top: 39px; }
.step:last-child::before  { bottom: calc(100% - 39px); }
/* 只有一步时整条线都不要 */
.step:first-child:last-child::before { display: none; }

.step__num {
  position: relative; z-index: 1;         /* 压在连线上面，线不能从圆点里穿过去 */
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
/* 最后一步是「持续维护」—— 用主题色标出终点，让这条线有个落点 */
.steps .step:last-child .step__num { border-color: var(--accent); color: var(--accent); }
.step__body h3 {
  font-size: 19px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.step__body h3 em {
  font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--ink-3);
  background: #fff; border: 1px solid var(--line); padding: 2px 10px; border-radius: 980px;
}
.step__body p { margin-top: 8px; font-size: 15px; color: var(--ink-2); line-height: 1.6; }

/* =========================================================
   交付承诺
   ========================================================= */
.promise-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.promise {
  background: var(--bg-grey); border-radius: var(--radius); padding: 26px 26px 24px;
}
.promise h3 { font-size: 17px; margin-bottom: 8px; }
.promise p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }

/* =========================================================
   常见问题（原生 details，无需 JS，键盘可用）
   ========================================================= */
.faq { border-top: 1px solid var(--line); }
.faq--block { max-width: 820px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 500;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent); }
.faq__sign {
  flex: none; position: relative; width: 15px; height: 15px;
}
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 15px; height: 1.5px; background: var(--ink-2); border-radius: 2px;
  transition: transform .3s var(--ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(0deg); }
.faq__a { padding: 0 40px 24px 0; }
.faq__a p { font-size: 15.5px; color: var(--ink-2); line-height: 1.7; }

/* =========================================================
   关于我们
   ========================================================= */
.about { display: grid; grid-template-columns: 1.35fr 1fr; gap: 70px; align-items: start; }
.about__text p { margin-top: 20px; font-size: 16.5px; color: var(--ink-2); line-height: 1.7; }
.about__points { display: grid; gap: 14px; }
.about__points li { background: #fff; border-radius: var(--radius); padding: 20px 22px; border: 1px solid rgba(0,0,0,.04); }
.about__points strong { display: block; font-size: 15.5px; font-weight: 600; }
.about__points span { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-3); }

/* =========================================================
   联系我们
   ========================================================= */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.contact__lead { margin-top: 18px; font-size: 16.5px; color: var(--ink-2); }
.contact .btn--wa { margin-top: 26px; }

.contact__list { margin-top: 34px; border-top: 1px solid var(--line); }
.contact__list li {
  display: flex; gap: 20px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px;
}
.contact__label { flex: 0 0 92px; font-size: 14px; color: var(--ink-3); }
.contact__list a { transition: color .2s var(--ease); }
.contact__list a:hover { color: var(--accent); }

/* 表单 */
.form { background: var(--bg-grey); border-radius: var(--radius-lg); padding: 32px 30px; display: grid; gap: 17px; }
.form__row { display: grid; gap: 8px; }
.form__row label { font-size: 14px; color: var(--ink-2); }
.form__row label i { color: var(--accent); font-style: normal; }
.form input[type="text"], .form input[type="tel"], .form select, .form textarea {
  width: 100%; padding: 13px 15px;
  font: inherit; font-size: 15.5px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  appearance: none;
}
.form textarea { resize: vertical; min-height: 108px; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,113,227,.14);
}
.form .is-invalid { border-color: var(--err); box-shadow: 0 0 0 3px rgba(217,48,37,.12); }

.form__consent { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.form__consent input { margin: 2px 0 0; width: 17px; height: 17px; flex: none; accent-color: var(--accent); }
.form__consent span { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.form__consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.form__consent.is-invalid span { color: var(--err); }

.form .btn { margin-top: 6px; }
.form__note { min-height: 20px; font-size: 14px; color: var(--ink-2); text-align: center; }
.form__note.is-ok { color: var(--ok); }
.form__note.is-err { color: var(--err); }

/* 提交成功后替换整块表单 */
.form__success { text-align: center; padding: 26px 10px; }
.form__success h3 { font-size: 20px; margin-bottom: 10px; }
.form__success p { font-size: 15px; color: var(--ink-2); }

/* =========================================================
   面包屑 + 系统详情页
   ========================================================= */
.crumb { padding: 84px 0 0; font-size: 13.5px; color: var(--ink-3); }
.crumb .wrap { display: flex; gap: 8px; flex-wrap: wrap; }
.crumb a:hover { color: var(--ink); }
.crumb [aria-current] { color: var(--ink-2); }

.sys-hero { padding: 40px 0 76px; }
.sys-hero .sys-icon { width: 54px; height: 54px; border-radius: 15px; margin-bottom: 22px; }
.sys-hero .sys-icon svg { width: 28px; height: 28px; }
.sys-hero__title {
  font-size: clamp(32px, 4.6vw, 52px); letter-spacing: -0.032em; text-wrap: balance;
  word-break: keep-all; overflow-wrap: break-word;
}
.sys-hero__lead { margin-top: 20px; font-size: 18px; color: var(--ink-2); line-height: 1.65; max-width: 62ch; }
.sys-hero .hero__actions { margin-top: 32px; }
.sys-hero .price-tag { margin-top: 22px; }

.pains { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.pain { background: #fff; border-radius: var(--radius); padding: 24px 26px; border: 1px solid rgba(0,0,0,.04); }
.pain h3 { font-size: 17.5px; margin-bottom: 8px; }
.pain p { font-size: 15px; color: var(--ink-2); line-height: 1.65; }

.sys-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: start; }
.check-list { display: grid; gap: 13px; }
.check-list li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.55; }
.check-list li::before {
  content: ""; position: absolute; left: 4px; top: 7px;
  width: 12px; height: 7px; border-left: 2px solid var(--sys, var(--accent));
  border-bottom: 2px solid var(--sys, var(--accent));
  transform: rotate(-45deg);
}
.sys-aside {
  background: var(--bg-grey); border-radius: var(--radius); padding: 26px;
}
.sys-aside p { font-size: 15px; color: var(--ink-2); line-height: 1.65; }

/* =========================================================
   文档页（隐私政策）
   ========================================================= */
.doc { padding-top: 128px; }
.doc__meta { margin-top: -20px; margin-bottom: 26px; font-size: 14px; color: var(--ink-3); }
.doc__intro { font-size: 16.5px; color: var(--ink-2); line-height: 1.75; }
.doc__sec { margin-top: 38px; }
.doc__sec h2 { font-size: 20px; margin-bottom: 12px; }
.doc__sec p { font-size: 15.5px; color: var(--ink-2); line-height: 1.75; margin-top: 8px; }
.doc__contact { margin-top: 20px; display: grid; gap: 6px; font-size: 15.5px; color: var(--ink-2); }
.doc__contact a { color: var(--accent); }
.doc__disclaimer {
  margin-top: 48px; padding: 18px 20px; border-radius: 12px;
  background: #fff8e5; border: 1px solid #f3e2b3;
  font-size: 14px; color: #7a5c11; line-height: 1.65;
}

/* =========================================================
   404
   ========================================================= */
.notfound { padding-top: 180px; text-align: center; }

/* =========================================================
   页脚
   ========================================================= */
.footer { background: var(--bg-grey); border-top: 1px solid var(--line); padding: 62px 0 30px; }
.footer__inner { display: grid; gap: 40px; grid-template-columns: 1.6fr repeat(3, 1fr); }
.footer__brand { display: flex; flex-direction: column; }
.footer__brand .nav__mark { margin-bottom: 12px; }
.footer__brand .nav__name { font-size: 15px; }
.footer__brand p { margin-top: 10px; font-size: 14px; color: var(--ink-3); max-width: 260px; }
.footer__legal { font-size: 13px !important; line-height: 1.6; }
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col h4 { font-size: 13px; color: var(--ink-3); font-weight: 600; margin-bottom: 4px; }
.footer__col a { font-size: 14px; color: var(--ink-2); transition: color .2s var(--ease); }
.footer__col a:hover { color: var(--ink); }
.footer__bottom {
  margin-top: 50px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-3);
}

/* =========================================================
   WhatsApp 悬浮按钮 / 移动端底部栏
   ========================================================= */
.wa-float {
  position: fixed; right: 26px; bottom: 26px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--wa); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(37,211,102,.35);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-float svg { width: 30px; height: 30px; fill: currentColor; }
.wa-float:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 26px rgba(37,211,102,.45); }

.sticky-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 8px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .35s var(--ease);
}
.sticky-bar.is-in { transform: none; }
.sticky-bar {
  flex-direction: column;              /* 选项面板叠在按钮上方 */
}
.sticky-bar__btn {
  width: 100%; text-align: center; padding: 14px 6px; border-radius: 12px;
  font-size: 15.5px; font-weight: 600;
  background: var(--bg-grey); color: var(--ink);
  border: 0; font-family: inherit;
}
.sticky-bar__btn--wa { background: var(--wa); color: #fff; }
.sticky-bar__btn--primary { background: var(--accent); color: #fff; }

/* ---- 点开升起来的选项面板 ----
   两行满宽，手指好点不易误触；微信号再长也放得下（横向排两个按钮就写不下了）。 */
.sticky-bar__sheet {
  display: flex; flex-direction: column;
  gap: 1px; margin-bottom: 8px;
  background: var(--line);             /* 用 1px gap 露出底色当分割线 */
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  animation: sheetUp .22s var(--ease);
}
.sticky-bar__sheet[hidden] { display: none; }
@keyframes sheetUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.sticky-bar__opt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 15px 18px;
  background: #fff; color: var(--ink);
  font-size: 15.5px; font-weight: 500; font-family: inherit;
  border: 0; width: 100%; text-align: left;
}
.sticky-bar__opt b { font-weight: 600; letter-spacing: .01em; }
.sticky-bar__opt:active { background: var(--bg-grey); }
.sticky-bar__go { color: var(--ink-3); font-size: 17px; flex: none; }
/* 复制成功那一下：整行短暂变成成功色 */
.sticky-bar__opt.is-copied { color: var(--ok); }
.sticky-bar__opt.is-copied .sticky-bar__go { color: var(--ok); }

/* =========================================================
   滚动进场动效
   ========================================================= */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* =========================================================
   响应式
   ========================================================= */
@media (max-width: 980px) {
  .about, .contact, .sys-cols { grid-template-columns: 1fr; gap: 44px; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 34px; }
  .nav__links { gap: 20px; }
}

/* 导航单独提前折叠：俄语/哈萨克语的菜单文字比中文长得多，
   四种语言的切换器又占一段宽度，到小笔记本尺寸就放不下了 */
@media (max-width: 1020px) {
  .nav__links {
    position: fixed; inset: 60px 0 auto 0;
    flex-direction: column; gap: 0; margin: 0;
    background: #fff;                     /* 不透明，避免与页面文字叠字 */
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(0,0,0,.06);
    padding: 8px 24px 20px;
    transform: translateY(-14px); opacity: 0; pointer-events: none;
    transition: opacity .28s var(--ease), transform .28s var(--ease);
  }
  .nav__links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links a { padding: 14px 0; font-size: 17px; color: var(--ink); border-bottom: 1px solid var(--line); }
  .nav__links a:last-child { border-bottom: 0; }

  .nav__cta { display: none; }
  .lang { margin-left: auto; }
  .nav__burger { display: block; margin-left: 12px; }
}

@media (max-width: 820px) {
  body { font-size: 16px; }
  .section { padding: 72px 0; }
  .hero { padding: 126px 0 72px; }
  .hero__title { max-width: none; }
  /* 三个数字保持一排。竖着堆会占掉将近一屏，把「查看全部系统」和下面的
     系统矩阵一起推出首屏；这三个数字本来就短，一排放得下。 */
  .hero__stats { margin-top: 46px; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 26px; }
  .hero__stats strong { font-size: 26px; }
  .hero__stats span { font-size: 12px; line-height: 1.35; }

  .grid { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; gap: 28px; }
  .contact__list li { flex-direction: column; gap: 4px; }
  .contact__label { flex: none; }

  /* 内边距变了，时间线首尾两段的落点要跟着改（20 + 圆点半径 17 = 37） */
  .step { gap: 16px; padding: 20px 0; }
  .step:first-child::before { top: 37px; }
  .step:last-child::before  { bottom: calc(100% - 37px); }
  .faq__a { padding-right: 10px; }
  .crumb { padding-top: 76px; }
  .doc { padding-top: 108px; }

  /* 手机上换成底部常驻栏，去掉悬浮球 */
  .wa-float { display: none; }
  .sticky-bar { display: flex; }
  body { padding-bottom: 74px; }
}

/* 尊重系统的「减少动效」设置 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .sticky-bar { transform: none; }
}

/* 打印：去掉浮动元素 */
@media print {
  .nav, .wa-float, .sticky-bar, .hero__glow, .skip { display: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   系统详情页：产品示意图 / 以前vs现在 / Bento 网格
   结构由 src/visuals.js 生成
   ========================================================= */

/* ---------- 首屏左右分栏 ---------- */
.sys-hero { position: relative; overflow: hidden; }
.sys-hero__inner { position: relative; z-index: 1; }
.sys-hero--split { padding: 32px 0 108px; }
.sys-hero--split .sys-hero__inner {
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center;
}
.sys-hero--split .sys-hero__lead { max-width: none; }
.sys-hero__glow {
  position: absolute; top: -220px; right: -220px;
  width: 900px; height: 780px; pointer-events: none;
  background: radial-gradient(closest-side,
              color-mix(in srgb, var(--sys) 15%, transparent), transparent);
}

/* 真实产品截图：与代码示意图共用首屏位置，并保留浏览器产品图的纵深感。 */
.sys-hero__screenshot {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 1px 1px rgba(0,0,0,.04), 0 8px 18px rgba(0,0,0,.06), 0 34px 68px rgba(0,0,0,.12);
}
.sys-hero__screenshot::before {
  content: '';
  display: block;
  height: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sys) 22%, #f4f4f6), #f7f7f8);
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.sys-hero__screenshot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* ---------- 首屏产品图：文字在上、图在下横铺 ----------
   左右分栏时这张图只有 500px 宽，而界面本身是 1568px 画的，
   缩到三分之一后里面的字全糊了。改成上下排版后图能铺到 1280px，
   界面按接近原始尺寸显示，KPI、表格里的字才看得清。            */
.sys-hero--stack { position: relative; padding: 32px 0 96px; }
.sys-hero--stack .sys-hero__inner { --wrap: 1328px; }
.sys-hero--stack .sys-hero__text { max-width: 780px; }
.sys-hero--stack .sys-hero__lead { max-width: 68ch; }
.sys-hero--stack .sys-hero__visual--img { margin-top: 54px; }
.sys-hero--stack .sys-hero__screenshot img {
  aspect-ratio: auto;            /* 按图片原始比例铺满，不再裁掉底部 */
  height: auto;
  object-fit: fill;
}

/* ---------- 产品示意图 ---------- */
.mock { position: relative; }

/* 背后垫一层，制造纵深 */
.mock__stack {
  position: absolute; left: 26px; right: 26px; top: -16px; height: 60px;
  border-radius: 20px 20px 0 0;
  background: #fff; border: 1px solid rgba(0,0,0,.05); border-bottom: 0;
  opacity: .55;
}

.mock__panel {
  position: relative; display: grid; grid-template-columns: 62px 1fr;
  background: #fff; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(0,0,0,.07);
  box-shadow:
    0 1px 1px rgba(0,0,0,.04),
    0 8px 18px rgba(0,0,0,.06),
    0 34px 68px rgba(0,0,0,.12);
}

/* ---- 左侧导航 ---- */
.mock__side {
  background: #fafafb; border-right: 1px solid var(--line);
  padding: 16px 0 14px; display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.mock__brand {
  width: 26px; height: 26px; border-radius: 8px; margin-bottom: 12px;
  background: linear-gradient(135deg, var(--sys, var(--accent)),
              color-mix(in srgb, var(--sys, var(--accent)) 62%, #000));
  box-shadow: 0 3px 8px color-mix(in srgb, var(--sys, var(--accent)) 34%, transparent);
}
.mock__nav {
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
}
.mock__nav svg {
  width: 16px; height: 16px; fill: none; stroke: #b6b6bd;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.mock__nav--on { background: color-mix(in srgb, var(--sys, var(--accent)) 11%, transparent); }
.mock__nav--on svg { stroke: var(--sys, var(--accent)); }
.mock__side-foot { margin-top: auto; }

/* ---- 主区 ---- */
.mock__main { padding: 14px 16px 16px; min-width: 0; }

.mock__top { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; }
.mock__search {
  flex: 1; display: flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 11px; border-radius: 9px;
  background: var(--bg-grey); border: 1px solid transparent;
}
.mock__search svg {
  width: 13px; height: 13px; flex: none; fill: none; stroke: #adadb5;
  stroke-width: 2; stroke-linecap: round;
}
.mock__avs { display: flex; }
.mock__avs .mock__av { width: 24px; height: 24px; margin-left: -7px; border: 2px solid #fff; }
.mock__avs .mock__av:first-child { margin-left: 0; }
.mock__add {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: var(--sys, var(--accent)); display: grid; place-items: center;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--sys, var(--accent)) 32%, transparent);
}
.mock__add i, .mock__add i::before {
  content: ""; display: block; background: #fff; border-radius: 2px;
}
.mock__add i { width: 11px; height: 2px; position: relative; }
.mock__add i::before { position: absolute; left: 4.5px; top: -4.5px; width: 2px; height: 11px; }

/* ---- 灰色圆角条：代替所有真实文字 ---- */
.mock__b { display: block; height: 7px; border-radius: 4px; background: #d5d5db; }
.mock__b--dim { background: #e6e6ec; height: 6px; }
.mock__b--fix { width: 46px; flex: none; }
.mock__b--pill { width: 26px; height: 5px; background: currentColor; opacity: .55; }
.mock__b--w20 { width: 20%; } .mock__b--w30 { width: 30%; }
.mock__b--w40 { width: 40%; } .mock__b--w45 { width: 45%; }
.mock__b--w50 { width: 50%; } .mock__b--w55 { width: 55%; }
.mock__b--w70 { width: 70%; } .mock__b--w85 { width: 85%; }

/* ---- KPI ---- */
.mock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.mock__kpi {
  background: var(--bg-grey); border-radius: 12px; padding: 11px 12px 10px;
  display: grid; gap: 7px;
}
.mock__kpi b { font-size: 20px; font-weight: 650; letter-spacing: -0.025em; line-height: 1; }
.mock__kpi--warn { background: #fff6e6; }
.mock__kpi--warn b { color: #96590a; }
.mock__delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: -0.01em;
}
.mock__delta em {
  width: 0; height: 0; font-style: normal;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
}
.mock__delta--up { color: #157a3a; }
.mock__delta--up em { border-bottom: 5px solid #157a3a; }
.mock__delta--warn { color: #a4660c; }
.mock__delta--warn em { border-top: 5px solid #a4660c; }

/* ---- 图表 ---- */
.mock__chart {
  position: relative; height: 96px; margin: 14px 0 6px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 31px, var(--line) 31px 32px);
}
.mock__chart svg { display: block; width: 100%; height: 96px; }
.mock__chart-dot {
  position: absolute; right: -3px; top: 11px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--sys, var(--accent));
  box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px color-mix(in srgb, var(--sys, var(--accent)) 28%, transparent);
}

/* ---- 数据表 ---- */
.mock__th {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 2px; border-bottom: 1px solid var(--line);
}
.mock__th i:first-child { flex: 1; }
.mock__th i:not(:first-child) { width: 42px; flex: none; }

.mock__tr {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 2px; border-bottom: 1px solid var(--line);
}
.mock__tr:last-child { border-bottom: 0; }
.mock__cell { flex: 1; display: grid; gap: 6px; min-width: 0; }

.mock__av {
  width: 28px; height: 28px; border-radius: 50%; flex: none; display: block;
}
.mock__av--a { background: linear-gradient(135deg, #cfe0ff, #a9c6ff); }
.mock__av--b { background: linear-gradient(135deg, #d9f0e0, #aadcbd); }
.mock__av--c { background: linear-gradient(135deg, #ffe4c9, #ffcb9a); }

.mock__pill {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 9px; border-radius: 980px;
}
.mock__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.mock__pill--ok { background: #e7f6ec; color: #157a3a; }
.mock__pill--warn { background: #fdefd8; color: #a4660c; }

/* ---- 悬浮的「提醒已发送」小卡 ---- */
.mock__float {
  position: absolute; left: -26px; bottom: -24px;
  display: flex; align-items: center; gap: 12px; width: 222px;
  background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 16px;
  box-shadow: 0 3px 10px rgba(0,0,0,.06), 0 20px 44px rgba(0,0,0,.14);
  padding: 13px 18px 13px 13px;
}
.mock__wa {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--wa); display: grid; place-items: center;
  box-shadow: 0 3px 9px rgba(37,211,102,.4);
}
.mock__wa svg { width: 19px; height: 19px; fill: #fff; }

/* =========================================================
   各系统专属的主视图零件
   ========================================================= */

/* 悬浮小卡的图标底色 */
.mock__fic {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
}
.mock__fic svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mock__fic--wa { background: var(--wa); box-shadow: 0 3px 9px rgba(37,211,102,.4); }
.mock__fic--wa svg { width: 19px; height: 19px; fill: #fff; stroke: none; }
.mock__fic--order { background: #e8730a; box-shadow: 0 3px 9px rgba(232,115,10,.36); }
.mock__fic--cyber { background: #6b4ce6; box-shadow: 0 3px 9px rgba(107,76,230,.36); }
.mock__fic--retail { background: #0f9d58; box-shadow: 0 3px 9px rgba(15,157,88,.36); }
.mock__fic--delivery { background: #d93f5c; box-shadow: 0 3px 9px rgba(217,63,92,.36); }
.mock__fic--inventory { background: #0b7d8c; box-shadow: 0 3px 9px rgba(11,125,140,.36); }

/* ---------- 点餐：菜品九宫格 + 后厨队列 ---------- */
.mock__split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; margin-top: 14px; }
.mock__menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mock__dish {
  display: grid; gap: 5px; padding: 7px; border-radius: 10px;
  background: var(--bg-grey);
}
.mock__dish-img { display: block; height: 30px; border-radius: 7px; }
.mock__dish-img--1 { background: linear-gradient(135deg, #ffd9a8, #ffbe6e); }
.mock__dish-img--2 { background: linear-gradient(135deg, #cfe6c8, #a8d49c); }
.mock__dish-img--3 { background: linear-gradient(135deg, #ffcfc4, #f6ab99); }

.mock__queue { display: grid; gap: 8px; align-content: start; }
.mock__ticket {
  display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto;
  column-gap: 8px; row-gap: 5px; align-items: center;
  padding: 9px 10px; border-radius: 10px;
  background: #fff; border: 1px solid var(--line);
}
.mock__ticket .mock__b { grid-column: 2; }
.mock__tno {
  grid-row: 1 / 3; width: 22px; height: 22px; border-radius: 7px;
  background: var(--bg-grey);
}
.mock__ticket--on { border-color: color-mix(in srgb, var(--sys) 45%, transparent); background: color-mix(in srgb, var(--sys) 6%, #fff); }
.mock__ticket--on .mock__tno { background: color-mix(in srgb, var(--sys) 25%, transparent); }

/* ---------- 网吧：机位平面图 ---------- */
.mock__floorplan { display: grid; grid-template-columns: 1fr 58px; gap: 12px; margin-top: 14px; }
.mock__seats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.mock__seat { display: block; height: 26px; border-radius: 6px; background: var(--bg-grey); }
.mock__seat--on { background: color-mix(in srgb, var(--sys) 26%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sys) 40%, transparent); }
.mock__seat--off { background: #edeef1; }
.mock__seat--clean { background: #fbe6c7; }
.mock__vips { display: grid; gap: 7px; }
.mock__vip { display: block; border-radius: 8px; background: color-mix(in srgb, var(--sys) 20%, transparent); }
.mock__vip--off { background: #edeef1; }

.mock__legend { display: flex; gap: 16px; margin-top: 12px; }
.mock__legend span { display: flex; align-items: center; gap: 6px; }
.mock__legend .mock__seat { width: 12px; height: 12px; border-radius: 4px; }
.mock__legend .mock__b { width: 30px; }

/* ---------- 超市：客流柱状图 ---------- */
.mock__vbars {
  display: flex; align-items: flex-end; gap: 6px;
  height: 92px; margin: 16px 0 10px;
  border-bottom: 1px solid var(--line);
}
.mock__vbar {
  flex: 1; border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--sys) 22%, transparent);
}
.mock__vbar--on { background: var(--sys); }

/* ---------- 外卖：路线地图 ---------- */
.mock__map {
  position: relative; height: 150px; border-radius: 12px; overflow: hidden;
  margin: 14px 0 10px; background: #f2f4f6;
  background-image:
    repeating-linear-gradient(to right, transparent 0 39px, rgba(0,0,0,.04) 39px 40px),
    repeating-linear-gradient(to bottom, transparent 0 29px, rgba(0,0,0,.04) 29px 30px);
}
.mock__map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mock__blk { position: absolute; border-radius: 5px; background: rgba(0,0,0,.045); }
.mock__blk--1 { left: 12%; top: 14%; width: 22%; height: 30%; }
.mock__blk--2 { left: 44%; top: 52%; width: 26%; height: 34%; }
.mock__blk--3 { left: 76%; top: 18%; width: 17%; height: 26%; }
.mock__pin { position: absolute; border-radius: 50%; }
.mock__pin--from {
  left: 9%; bottom: 16%; width: 11px; height: 11px;
  background: #fff; box-shadow: 0 0 0 3px var(--sys);
}
.mock__pin--to {
  right: 8%; top: 18%; width: 13px; height: 13px; background: var(--sys);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sys) 22%, transparent);
}
.mock__courier {
  position: absolute; left: 45%; top: 40%;
  width: 28px; height: 28px; border-radius: 50%; background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.mock__courier svg { position: static; width: 15px; height: 15px; fill: none; stroke: var(--sys); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 库存：水位条 ---------- */
.mock__stock { display: grid; gap: 11px; margin-top: 16px; }
.mock__stock-row { display: flex; align-items: center; gap: 12px; }
.mock__stock-row > .mock__b { width: 74px; flex: none; }
.mock__track { flex: 1; height: 8px; border-radius: 5px; background: var(--bg-grey); overflow: hidden; }
.mock__fill { display: block; height: 100%; border-radius: 5px; background: color-mix(in srgb, var(--sys) 65%, transparent); }
.mock__fill--low { background: #e2903c; }
.mock__stock-row b { width: 38px; text-align: right; font-size: 12.5px; font-weight: 600; color: var(--ink-2); flex: none; }

/* ---------- 预约：周视图 ---------- */
.mock__cal { margin-top: 14px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.mock__cal-head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--bg-grey); }
.mock__cal-head i { height: 6px; width: 56%; margin: 9px auto; border-radius: 3px; background: #d5d5db; }
.mock__cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(5, 25px);
}
.mock__slot { border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.mock__slot:nth-child(7n + 1) { border-left: 0; }
.mock__ev {
  margin: 2px; border-radius: 6px; display: flex; align-items: center; padding: 0 6px;
  background: color-mix(in srgb, var(--sys) 16%, #fff);
  border-left: 3px solid var(--sys);
}
.mock__ev .mock__b { background: color-mix(in srgb, var(--sys) 55%, transparent); height: 5px; }
.mock__ev--alt { background: color-mix(in srgb, var(--sys) 9%, #fff); }

/* ---------- 窄屏微调 ---------- */
@media (max-width: 640px) {
  .mock__split { grid-template-columns: 1fr; }
  .mock__queue { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .mock__floorplan { grid-template-columns: 1fr 46px; }
  .mock__seats { gap: 5px; }
  .mock__seat { height: 22px; }
}

/* ---------- 以前 vs 现在 ---------- */
.ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 26px; }
.ba__col {
  background: var(--bg-grey); border: 1px solid transparent;
  border-radius: var(--radius-lg); padding: 26px 26px 28px;
}
.ba__col--after {
  background: #fff; border-color: rgba(0,0,0,.05); box-shadow: var(--shadow-lg);
}
.ba__tag {
  display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: .03em;
  padding: 5px 13px; border-radius: 980px; background: #fff; color: var(--ink-3);
}
.ba__tag--ok {
  background: color-mix(in srgb, var(--sys) 12%, transparent);
  color: var(--sys);
}
.ba__arrow { align-self: center; }
.ba__arrow svg {
  width: 28px; height: 28px; fill: none; stroke: var(--ink-3);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

.ba__art { position: relative; height: 156px; margin: 20px 0 22px; }

.ba__media {
  height: 214px; margin: 20px 0 22px; overflow: hidden;
  border-radius: 14px; border: 1px solid rgba(0,0,0,.06); background: #fff;
}
.ba__media img { width: 100%; height: 100%; object-fit: cover; }
.ba__media--before img { filter: saturate(.72) contrast(.96); }
.ba__media--after {
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  background: color-mix(in srgb, var(--sys) 5%, #fff);
}
/* 这个框只有 460px 宽，塞不下整张 1568px 的后台图。
   与其整张缩小到看不清，不如放大后只露左上角一块 ——
   侧边栏菜单和头两块数据卡按接近原始尺寸显示，字是清楚的。 */
.ba__media--after img {
  width: 250%; height: auto; max-width: none; object-fit: fill;
  /* 位移按图片自身尺寸算，所以窗口怎么缩放，露出来的都是同一块区域：
     往左让掉侧边栏（206/1568），往上让掉顶栏（56/1000）—— 正好露出数据卡。 */
  transform: translate(-13.1%, -6.6%);
}

/* 左：散乱的纸质台账与表格 */
.ba__paper, .ba__sheet {
  position: absolute; border-radius: 10px; background: #fff; border: 1px solid var(--line);
}
.ba__paper { width: 112px; height: 130px; box-shadow: 0 4px 10px rgba(0,0,0,.05); }
.ba__paper--a { left: 4px; top: 14px; transform: rotate(-8deg); }
.ba__paper--b { left: 42px; top: 6px; transform: rotate(5deg); background: #fbfbfc; }
.ba__sheet {
  left: 96px; top: 22px; width: 152px; height: 110px;
  box-shadow: 0 6px 16px rgba(0,0,0,.07); transform: rotate(-2deg);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 13px;
}
.ba__sheet i { height: 8px; border-radius: 3px; background: #e6e6eb; align-self: center; }

/* 右：整齐的界面 */
.ba__mini {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  width: 246px; background: #fff; border: 1px solid var(--line); border-radius: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,.09); padding: 13px; display: grid; gap: 9px;
}
.ba__mini-head {
  display: flex; gap: 9px; align-items: center;
  padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.ba__mini-head i:first-child { width: 18px; height: 18px; border-radius: 6px; background: var(--sys); flex: none; }
.ba__mini-head i:last-child { flex: 1; height: 7px; border-radius: 4px; background: #e7e7ec; }
.ba__mini-row { display: flex; gap: 9px; align-items: center; }
.ba__mini-row i:nth-child(1) { width: 16px; height: 16px; border-radius: 50%; background: #eeeef2; flex: none; }
.ba__mini-row i:nth-child(2) { flex: 1; height: 7px; border-radius: 4px; background: #e0e0e6; }
.ba__mini-row i:nth-child(3) { width: 34px; height: 14px; border-radius: 980px; background: #eeeef2; flex: none; }
.ba__mini-row--on i:nth-child(3) { background: color-mix(in srgb, var(--sys) 26%, transparent); }

.ba__list { display: grid; gap: 11px; }
.ba__list li { position: relative; padding-left: 27px; font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.ba__list li::before {
  content: ""; position: absolute; left: 4px; top: 10px;
  width: 11px; height: 2px; border-radius: 2px; background: #c2c2c8;
}
.ba__list--ok li::before {
  width: 11px; height: 6px; background: none; border-radius: 0; top: 6px; left: 4px;
  border-left: 2px solid var(--sys); border-bottom: 2px solid var(--sys);
  transform: rotate(-45deg);
}

/* ---------- Bento 功能网格 ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bento__cell {
  background: #fff; border: 1px solid rgba(0,0,0,.05);
  border-radius: var(--radius); padding: 22px;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 134px;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.bento__cell:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.bento__cell p { font-size: 15.5px; line-height: 1.5; }
.bento__cell:nth-child(1) { grid-column: span 2; grid-row: span 2; justify-content: space-between; }
.bento__cell:nth-child(2) { grid-column: span 2; flex-direction: row; align-items: center; gap: 22px; }
.bento__cell:nth-child(2) p { flex: 1; }
.bento__cell:nth-child(7) { grid-column: span 2; }

.bento__ico {
  position: relative; isolation: isolate;
  width: 48px; height: 48px; border-radius: 15px; flex: none;
  margin-bottom: auto; display: grid; place-items: center;
  color: var(--sys);
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.98) 0 18%, transparent 43%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--sys) 7%, #fff) 0%,
      color-mix(in srgb, var(--sys) 14%, #fff) 100%);
  border: 1px solid color-mix(in srgb, var(--sys) 17%, #fff);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 color-mix(in srgb, var(--sys) 7%, transparent),
    0 8px 18px color-mix(in srgb, var(--sys) 12%, transparent),
    0 2px 5px rgba(0,0,0,.035);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.bento__ico::after {
  content: ''; position: absolute; z-index: -1;
  width: 24px; height: 24px; border-radius: 50%;
  background: color-mix(in srgb, var(--sys) 12%, transparent);
  filter: blur(8px); opacity: .7;
}
.bento__ico svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.8));
}
.bento__cell:hover .bento__ico {
  transform: translateY(-2px) scale(1.045);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 12px 24px color-mix(in srgb, var(--sys) 18%, transparent),
    0 3px 7px rgba(0,0,0,.045);
}

/* 相邻功能徽章做极轻的冷暖变化，仍保持同一系统主色。 */
.bento__cell:nth-child(3n + 2) .bento__ico { filter: hue-rotate(-5deg) saturate(.92); }
.bento__cell:nth-child(3n) .bento__ico { filter: hue-rotate(7deg) saturate(.88); }
.bento__cell > p { margin-top: 14px; }

/* 第一格是主格：图标放大，底色带一层极淡的主题色 */
.bento__cell:nth-child(1) {
  background: linear-gradient(155deg, color-mix(in srgb, var(--sys) 8%, #fff) 0%, #fff 60%);
}
.bento__cell:nth-child(1) { position: relative; overflow: hidden; }
.bento__cell:nth-child(1) .bento__ico { width: 76px; height: 76px; border-radius: 22px; }
.bento__cell:nth-child(1) .bento__ico svg { width: 36px; height: 36px; stroke-width: 1.5; }
.bento__cell:nth-child(1) > p { position: relative; font-size: 17px; }

.bento__preview {
  position: relative; width: 100%; aspect-ratio: 16 / 8.4;
  overflow: hidden; border-radius: 14px; background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
/* 同「以前 vs 现在」：小格子里放大看局部，比整张缩小成马赛克有用。 */
.bento__preview img {
  display: block; width: 240%; height: auto; max-width: none; object-fit: fill;
  transform: translate(-13.1%, -6.6%);
  transition: transform .45s var(--ease);
}
.bento__cell:hover .bento__preview img { transform: translate(-13.6%, -7.1%); }

/* 主格右下角的放大水印 */
.bento__ghost {
  position: absolute; right: -26px; bottom: -30px;
  width: 196px; height: 196px; pointer-events: none;
}
.bento__ghost svg {
  width: 100%; height: 100%; fill: none; stroke: var(--sys);
  stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: .13;
}

/* 第二格是横向排布，图标不需要顶到上面 */
.bento__cell:nth-child(2) .bento__ico { margin-bottom: 0; }
.bento__cell:nth-child(2) > p { margin-top: 0; }

/* ---------- Bento 卡通插画 ---------- */
.ill {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 168px; margin-bottom: 18px;
}
.ill--sm { min-height: 0; width: auto; margin: 0; }

/* 通用色条（插画里代替文字） */
.ill__lb { display: block; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--sys) 26%, #e8e8ee); }
.ill__lb--w35 { width: 35%; } .ill__lb--w45 { width: 45%; } .ill__lb--w50 { width: 50%; }
.ill__lb--w55 { width: 55%; } .ill__lb--w60 { width: 60%; } .ill__lb--w65 { width: 65%; }
.ill__lb--w70 { width: 70%; } .ill__lb--w75 { width: 75%; }

/* --- 会员卡 --- */
.ill__card {
  position: relative; width: 196px; aspect-ratio: 1.58; border-radius: 16px;
  padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px;
  background: linear-gradient(140deg, var(--sys), color-mix(in srgb, var(--sys) 55%, #000));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--sys) 34%, transparent);
}
.ill__card .ill__lb { background: rgba(255,255,255,.62); }
.ill__card .ill__lb--w35 { background: rgba(255,255,255,.36); }
.ill__chip {
  position: absolute; right: 18px; top: 17px;
  width: 30px; height: 22px; border-radius: 5px; background: rgba(255,255,255,.42);
}
.ill__card--ghost {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-58%, -62%) rotate(-9deg);
  background: color-mix(in srgb, var(--sys) 22%, #fff);
  box-shadow: none;
}

/* --- 二维码 --- */
.ill__qr {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px;
  width: 92px; padding: 10px; border-radius: 12px; background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.09);
}
.ill__qr i { aspect-ratio: 1; border-radius: 3px; background: #dcdce2; }
.ill__qr i:nth-child(1), .ill__qr i:nth-child(2), .ill__qr i:nth-child(6), .ill__qr i:nth-child(7),
.ill__qr i:nth-child(4), .ill__qr i:nth-child(5), .ill__qr i:nth-child(9), .ill__qr i:nth-child(10),
.ill__qr i:nth-child(16), .ill__qr i:nth-child(17), .ill__qr i:nth-child(21), .ill__qr i:nth-child(22),
.ill__qr i:nth-child(13), .ill__qr i:nth-child(19), .ill__qr i:nth-child(24) { background: var(--sys); }

/* --- 手机 --- */
.ill__phone {
  position: relative; width: 132px; padding: 18px 12px 14px; border-radius: 20px;
  background: #fff; border: 3px solid color-mix(in srgb, var(--sys) 30%, #dcdce2);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
  display: grid; gap: 9px; align-content: start;
  min-height: 152px;                 /* 撑成竖屏比例，否则内容少了会变成一张横卡片 */
}
.ill__notch {
  position: absolute; left: 50%; top: 7px; transform: translateX(-50%);
  width: 34px; height: 5px; border-radius: 3px; background: #e2e2e8;
}
.ill__row { display: flex; align-items: center; gap: 8px; }
.ill__thumb { width: 26px; height: 26px; border-radius: 8px; flex: none; }
.ill__thumb--1 { background: linear-gradient(140deg, #ffd7a3, #ffb567); }
.ill__thumb--2 { background: linear-gradient(140deg, #cfe8c6, #9fd28f); }
.ill__thumb--3 { background: linear-gradient(140deg, #ffcdc2, #f5a290); }
.ill__map {
  height: 30px; border-radius: 8px; position: relative;
  background: color-mix(in srgb, var(--sys) 10%, #f0f0f4);
}
.ill__map i {
  position: absolute; right: 16px; top: 9px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--sys);
}

/* 手机上挂的小徽章 */
.ill__badge {
  position: absolute; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 15px; background: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
  right: calc(50% - 92px); bottom: 16px;
}
.ill__badge--check svg { width: 24px; height: 24px; fill: none; stroke: var(--sys); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ill__badge--qr { grid-template-columns: 1fr 1fr; place-items: stretch; gap: 4px; padding: 12px; }
.ill__badge--qr i { border-radius: 3px; background: var(--sys); }
.ill__badge--qr i:nth-child(4) { background: color-mix(in srgb, var(--sys) 30%, transparent); }
.ill__badge--pin i {
  width: 18px; height: 18px; border-radius: 50% 50% 50% 2px;
  transform: rotate(-45deg); background: var(--sys);
}

/* --- 菜品图块 --- */
.ill__tiles { display: flex; gap: 8px; }
.ill__tile { width: 30px; height: 44px; border-radius: 9px; }
.ill__tile--1 { background: linear-gradient(150deg, #ffd7a3, #ffb567); }
.ill__tile--2 { background: linear-gradient(150deg, #cfe8c6, #9fd28f); transform: translateY(-6px); }
.ill__tile--3 { background: linear-gradient(150deg, #ffcdc2, #f5a290); }

/* --- 机位平面图 --- */
.ill__seatgrid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  width: 208px; padding: 16px; border-radius: 16px; background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.09);
}
.ill__seatgrid i { height: 22px; border-radius: 6px; background: var(--sys); }
.ill__seatgrid i.off { background: #e6e6ec; }
.ill__seatgrid i.warn { background: #f6c67c; }

/* --- 计时环 --- */
.ill__ring {
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--sys) 0turn 0.68turn, color-mix(in srgb, var(--sys) 16%, transparent) 0.68turn 1turn);
}
.ill__ring i { width: 40px; height: 40px; border-radius: 50%; background: #fff; }

/* --- 折扣吊牌 --- */
.ill__pricetag {
  position: relative; width: 62px; height: 62px; border-radius: 14px 6px 14px 14px;
  transform: rotate(-8deg); display: grid; place-items: center;
  background: linear-gradient(140deg, var(--sys), color-mix(in srgb, var(--sys) 58%, #000));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--sys) 34%, transparent);
}
.ill__pricetag b { color: #fff; font-size: 24px; font-weight: 700; }
.ill__hole { position: absolute; right: 9px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.65); }

/* --- 小票 --- */
.ill__receipt {
  width: 74px; padding: 14px 12px 18px; display: grid; gap: 7px;
  background: color-mix(in srgb, var(--sys) 10%, #fff);
  border-radius: 9px 9px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 94%, 83% 100%, 66% 94%, 50% 100%, 33% 94%, 16% 100%, 0 94%);
}

/* --- 货箱 --- */
.ill__boxes { display: flex; align-items: flex-end; gap: 12px; }
.ill__box {
  width: 52px; border-radius: 10px; position: relative;
  background: linear-gradient(150deg, color-mix(in srgb, var(--sys) 78%, #fff), var(--sys));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--sys) 26%, transparent);
}
.ill__box::after {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 14px; height: 100%; background: rgba(255,255,255,.34);
}
.ill__box--1 { height: 62px; }
.ill__box--2 { height: 86px; }
.ill__box--3 { height: 48px; }
.ill__box--s { width: 34px; height: 40px; border-radius: 8px; }
.ill__swap { display: flex; align-items: center; gap: 10px; }
.ill__arrows {
  width: 34px; height: 23px; flex: none; fill: none;
  stroke: color-mix(in srgb, var(--sys) 62%, transparent);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* --- 日历 --- */
.ill__cal {
  width: 178px; border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.09);
}
.ill__cal-top {
  height: 34px; background: var(--sys); display: flex; align-items: center; gap: 8px; padding: 0 14px;
}
.ill__cal-top i { width: 6px; height: 12px; border-radius: 3px; background: rgba(255,255,255,.7); }
.ill__cal-body { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 12px 14px 14px; }
.ill__cal-body i { aspect-ratio: 1; border-radius: 4px; background: #e9e9ef; }
.ill__cal-body i.on { background: var(--sys); }

/* --- 员工排期 --- */
.ill__staff { display: grid; gap: 9px; width: 136px; }   /* 定宽，否则里面按百分比的时间条会塌成 0 */
.ill__staff span { display: flex; align-items: center; gap: 8px; }
.ill__staff b { display: block; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--sys) 32%, transparent); }
.ill__face { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.ill__face--1 { background: linear-gradient(140deg, #cfe0ff, #a9c6ff); }
.ill__face--2 { background: linear-gradient(140deg, #d9f0e0, #aadcbd); }
.ill__face--3 { background: linear-gradient(140deg, #ffe4c9, #ffcb9a); }

/* 宽格里插画和文字并排 */
.bento__cell:nth-child(2) .ill { margin-bottom: 0; }

@media (max-width: 640px) {
  .ill { min-height: 140px; }
  .ill__card { width: 168px; }
  .ill__cal { width: 158px; }
  .ill__seatgrid { width: 186px; }
}

/* ---------- 适合谁：横条 ---------- */
.fit-strip {
  display: flex; gap: 24px; align-items: baseline;
  margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line);
}
.fit-strip__label {
  flex: none; font-size: 13px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.fit-strip p { font-size: 16px; color: var(--ink-2); line-height: 1.6; }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
  .sys-hero--split { padding-bottom: 92px; }
  .sys-hero--split .sys-hero__inner { grid-template-columns: 1fr; gap: 52px; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__cell:nth-child(1) { grid-row: auto; }
  .ba { grid-template-columns: 1fr; gap: 16px; }
  .ba__arrow { justify-self: center; transform: rotate(90deg); }
}

@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .bento__cell:nth-child(1), .bento__cell:nth-child(2), .bento__cell:nth-child(7) { grid-column: span 1; }
  .bento__cell { min-height: 0; }              /* 手机上不留固定高度，卡片跟着内容收紧 */
  .bento__cell:nth-child(1) .bento__ico { width: 56px; height: 56px; border-radius: 17px; }
  .bento__cell:nth-child(1) .bento__ico svg { width: 27px; height: 27px; }
  .bento__ghost { width: 140px; height: 140px; right: -20px; bottom: -22px; }
  .bento__cell:nth-child(2) { flex-direction: column; align-items: flex-start; gap: 18px; }
  .mock__float { left: -8px; width: 196px; }
  .sys-hero__glow { width: 560px; height: 480px; top: -240px; right: -200px; }
  .fit-strip { flex-direction: column; gap: 10px; }
  .ba__art { height: 140px; }
}


/* =========================================================
   后补的 5 套系统：汽修 / 诊所 / 培训 / 酒店 / 洗车
   结构由 src/visuals.js 生成，命名沿用 mock__ 与 ill__ 前缀。
   主题色一律走 var(--sys)，由 templates.js 按 slug 注入。
   ========================================================= */
.mock__fic--auto { background:#a9482c;}
.mock__fic--clinic { background:#0e9488;}
.mock__fic--school { background:#c1841c;}
.mock__fic--hotel { background:#55708f;}
.mock__fic--carwash { background:#2eaadc;}
.mock__board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:13px}
.mock__board-col{padding:8px;border-radius:10px;background:var(--bg-grey);display:grid;gap:7px;align-content:start}
.mock__board-head{display:flex;align-items:center;justify-content:space-between}
.mock__board-head b{font-size:10px;color:var(--ink-3)}
.mock__job{display:flex;align-items:center;gap:6px;padding:7px;background:#fff;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.mock__job--on{box-shadow:inset 2px 0 var(--sys)}
.mock__job-ico{width:20px;height:20px;border-radius:6px;background:color-mix(in srgb,var(--sys) 12%,#fff);display:grid;place-items:center}
.mock__job-ico svg{width:12px;fill:none;stroke:var(--sys);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mock__job>b{font-size:9px;color:var(--ink-3)}
.mock__parts{display:flex;gap:9px;align-items:center;margin-top:10px}
.mock__parts>span{height:7px;flex:1;background:var(--bg-grey);border-radius:5px;overflow:hidden}
.mock__parts>span i{display:block;height:100%;background:var(--sys)}
.mock__parts>b{font-size:10px;color:var(--ink-3)}
.mock__timeline{margin-top:13px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mock__time-head,.mock__doctor{display:grid;grid-template-columns:72px 1fr}
.mock__time-head{background:var(--bg-grey)}
.mock__time-head>i{border-right:1px solid var(--line)}
.mock__time-head{grid-template-columns:72px repeat(6,1fr)}
.mock__time-head b{text-align:center;font-size:9px;padding:7px 0;color:var(--ink-3)}
.mock__doctor{height:34px;border-top:1px solid var(--line);position:relative}
.mock__doctor>.mock__av{position:absolute;left:6px;top:8px;width:18px;height:18px}
.mock__doctor-name{display:flex;align-items:center;padding-left:29px;border-right:1px solid var(--line)}
.mock__time-grid{position:relative;display:grid;grid-template-columns:repeat(6,1fr)}
.mock__time-grid>i{border-left:1px solid var(--line)}
.mock__appt{position:absolute;top:5px;height:24px;border-radius:6px;padding:9px 5px;background:color-mix(in srgb,var(--sys) 18%,#fff);border-left:2px solid var(--sys)}
.mock__appt--1{opacity:.75}
.mock__appt--2{opacity:.55}
.mock__matrix{margin-top:13px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mock__matrix-head,.mock__matrix-row{display:grid;grid-template-columns:86px repeat(8,1fr);align-items:center}
.mock__matrix-head{height:23px;background:var(--bg-grey)}
.mock__matrix-head b{text-align:center;font-size:8px;color:var(--ink-3)}
.mock__matrix-row{height:27px;border-top:1px solid var(--line)}
.mock__matrix-row>span{display:flex;align-items:center;gap:6px;padding-left:7px}
.mock__matrix-row .mock__av{width:16px;height:16px}
.mock__mark{width:10px;height:10px;border-radius:3px;justify-self:center}
.mock__mark--yes{background:#58b77b}
.mock__mark--leave{background:#e4b44f}
.mock__mark--no{background:#df6b62}
.mock__rooms{margin-top:13px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mock__rooms-head,.mock__room{display:grid;grid-template-columns:45px 1fr}
.mock__rooms-head{grid-template-columns:45px repeat(7,1fr);background:var(--bg-grey)}
.mock__rooms-head b,.mock__room>b{text-align:center;font-size:9px;color:var(--ink-3);padding:6px 0}
.mock__room{height:29px;border-top:1px solid var(--line)}
.mock__room-grid{position:relative;display:grid;grid-template-columns:repeat(7,1fr)}
.mock__room-grid>i{border-left:1px solid var(--line)}
.mock__stay{position:absolute;top:4px;height:21px;border-radius:6px;padding:7px;background:color-mix(in srgb,var(--sys) 20%,#fff);border-left:2px solid var(--sys)}
.mock__stay--1{background:color-mix(in srgb,var(--sys) 11%,#fff)}
.mock__bays{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.mock__bay{position:relative;padding:9px 7px 8px;border:1px solid var(--line);border-radius:10px;display:grid;justify-items:center;gap:6px}
.mock__bay-no{position:absolute;left:6px;top:5px;font-style:normal;font-size:9px;color:var(--ink-3)}
.mock__progress{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--sys) var(--p),var(--bg-grey) 0)}
.mock__progress:before{content:"";grid-area:1/1;width:36px;height:36px;border-radius:50%;background:#fff}
.mock__progress i{grid-area:1/1;z-index:1;font-style:normal;font-size:9px;color:var(--ink-2)}
.mock__bay>b{font-size:9px;color:var(--ink-3)}
.mock__bay--wait{background:var(--bg-grey)}
.mock__queue-strip{display:flex;gap:7px;margin-top:10px}
.mock__queue-strip i{font-style:normal;font-size:9px;padding:5px 9px;border-radius:6px;background:color-mix(in srgb,var(--sys) 12%,#fff);color:var(--sys)}
.ill__auto,.ill__clinic,.ill__wash{gap:22px}
.ill__tire{width:100px;height:100px;border:20px solid #30343b;border-radius:50%;display:grid;place-items:center}
.ill__tire svg,.ill__tool svg,.ill__scope svg,.ill__drop svg{width:42px;fill:none;stroke:var(--sys);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ill__tool{transform:rotate(-18deg);padding:18px;border-radius:18px;background:color-mix(in srgb,var(--sys) 15%,#fff)}
.ill__clipboard,.ill__record{width:105px;padding:20px 13px 14px;border-radius:10px;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.1);display:grid;gap:8px}
.ill__clipboard>i{width:38px;height:10px;margin:-25px auto 4px;border-radius:5px;background:var(--sys)}
.ill__tooth{width:82px;height:96px;background:linear-gradient(145deg,#fff,#e9f6f5);border-radius:45% 45% 35% 35%;box-shadow:0 10px 24px rgba(0,0,0,.08);clip-path:polygon(8% 0,92% 0,100% 55%,76% 100%,52% 70%,28% 100%,0 55%)}
.ill__scope{padding:16px;border-radius:50%;background:color-mix(in srgb,var(--sys) 14%,#fff)}
.ill__record>em{height:30px;border-radius:6px;background:color-mix(in srgb,var(--sys) 12%,#fff)}
.ill__books{display:grid;gap:5px;transform:rotate(-4deg)}
.ill__books i{display:block;width:150px;height:34px;border-radius:7px;background:var(--sys);box-shadow:inset 12px 0 rgba(255,255,255,.3)}
.ill__books i:nth-child(2){width:130px;background:color-mix(in srgb,var(--sys) 65%,#fff)}
.ill__books i:nth-child(3){width:142px;background:#e6b75d}
.ill__cap{position:relative;width:100px;height:56px}
.ill__cap i{position:absolute;inset:0;background:var(--sys);clip-path:polygon(50% 0,100% 30%,50% 60%,0 30%)}
.ill__cap em{position:absolute;left:26px;top:30px;width:50px;height:22px;border-radius:0 0 18px 18px;background:color-mix(in srgb,var(--sys) 70%,#000)}
.ill__keycard{width:150px;height:92px;padding:17px;border-radius:15px;background:linear-gradient(140deg,var(--sys),color-mix(in srgb,var(--sys) 55%,#000));box-shadow:0 12px 25px color-mix(in srgb,var(--sys) 28%,transparent);display:grid;gap:14px}
.ill__keycard svg{width:28px;fill:none;stroke:#fff;stroke-width:1.7}
.ill__keycard .mock__b{background:rgba(255,255,255,.5)}
.ill__bed svg{width:82px;fill:none;stroke:var(--sys);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ill__drop{width:92px;height:112px;border-radius:55% 55% 60% 60%;background:linear-gradient(145deg,color-mix(in srgb,var(--sys) 35%,#fff),var(--sys));display:grid;place-items:center;clip-path:polygon(50% 0,92% 48%,100% 72%,88% 92%,50% 100%,12% 92%,0 72%,8% 48%)}
.ill__drop svg{stroke:#fff}
.ill__bubble{width:18px;height:18px;border-radius:50%;border:3px solid color-mix(in srgb,var(--sys) 45%,#fff)}
.ill__bubble:nth-of-type(2){width:28px;height:28px}
.ill__car{position:relative;width:130px;height:54px;border:4px solid var(--sys);border-radius:45px 45px 14px 14px;border-top-width:0}
.ill__car i{position:absolute;left:25px;top:-25px;width:75px;height:34px;border:4px solid var(--sys);border-bottom:0;border-radius:35px 35px 0 0}
.ill__car em,.ill__car b{position:absolute;bottom:-12px;width:22px;height:22px;border-radius:50%;background:#39414a;border:5px solid #fff}
.ill__car em{left:18px}
.ill__car b{right:18px}
@media(max-width:640px){.mock__board{gap:5px}
.mock__job{padding:5px}
.mock__bays{grid-template-columns:repeat(2,1fr)}
.mock__timeline,.mock__matrix,.mock__rooms{overflow-x:auto}

}
/* =========================================================
   案例作品（首页 #works）
   卡片语言跟系统卡同源：白底、大圆角、悬停上浮。区别是
   图占的比重更大（作品本身就是给人看的），文字更少。
   ========================================================= */
.works {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}

.work {
  position: relative;                    /* 标题链接的覆盖层定位基准 */
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(0,0,0,.05);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.work:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.work:focus-within { box-shadow: var(--shadow-lg); }

/* ---- 迷你浏览器框 ----
   卡片顶部放一个带地址栏的小窗口，只露网站顶部一条。
   两个用意：
     ① 「这是个网站，点一下能进去」—— 浏览器窗口是最直白的视觉隐喻
     ② 不把整个首屏塞进小格子。1600px 的图缩到卡片的 337px 宽是 4.7 倍密度，
        像素绰绰有余，糊的是**内容** —— 整站缩到四分之一，字就成了色块。
        只露顶部 92px，看到的是导航栏和主标题那一带，读不出字也能看出调性。
   图片按原比例铺满宽度（337px 宽 -> 211px 高），容器只给 92px，
   多出来的自然被裁在下面。 */
.work__browser {
  margin: 18px 18px 0;
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.work:hover .work__browser {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}

.work__bar {
  height: 30px; flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 0 11px;
  background: #f1f1f3;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
/* 三个点用中性灰不用红黄绿 —— 全站是克制的浅色调，
   三个彩点在十二张卡上重复十二次会很吵 */
.work__dots { display: flex; gap: 5px; flex: none; }
.work__dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #d3d3d9;
}
.work__url {
  flex: 1; min-width: 0;                 /* 不给 min-width:0 长域名会把点挤出去 */
  font-size: 11.5px; line-height: 18px; color: var(--ink-3);
  background: #fff; border: 1px solid rgba(0,0,0,.05);
  border-radius: 5px; padding: 0 9px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.work__shot {
  height: 92px; overflow: hidden;
  background: var(--bg-grey);
}
.work__shot img {
  width: 100%; height: auto; display: block;
  transition: transform .45s var(--ease);
  transform-origin: 50% 0;
}
.work:hover .work__shot img { transform: scale(1.03); }

.work__body {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 20px 26px 24px;
}

.work__head {
  display: flex; align-items: flex-start; gap: 10px;
  justify-content: space-between;
  margin-bottom: 8px;
}
.work__kind {
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
}
/* 合作项目角标 —— 跟自家独立交付的作品区分开，
   免得让人以为整个站都出自我们手。 */
.work__partner {
  flex: none;
  font-size: 11px; font-weight: 600; line-height: 1.5;
  letter-spacing: .01em; white-space: nowrap;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, #fff);
  border-radius: 999px; padding: 2px 9px;
}
.work__name { font-size: 21px; margin-bottom: 10px; }

/* 整张卡可点：跟系统卡同一套办法，标题里的 <a> 铺一层透明覆盖层。
   ⚠️ 卡片里不要再放第二个 <a>，会被这层挡住点不到 ——
   所以「打开网站」在模板里是 <span>。 */
.work__hit {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
}
.work__name a { transition: color .2s var(--ease); }
.work:hover .work__name a { color: var(--accent); }

.work__blurb {
  font-size: 15px; line-height: 1.62; color: var(--ink-2);
  margin-bottom: 16px;
}

.work__tags {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: auto;                      /* 顶到底部，卡片高度不齐时下沿仍对齐 */
}
.work__tags li {
  font-size: 12.5px; line-height: 1; color: var(--ink-2);
  padding: 6px 10px; border-radius: 999px;
  background: var(--bg-grey); border: 1px solid rgba(0,0,0,.04);
}

.work__go {
  margin-top: 16px;
  font-size: 14.5px; font-weight: 500; color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
}
.work__go span { transition: transform .25s var(--ease); }
.work:hover .work__go span { transform: translateX(4px); }

/* ---- 没有截图的作品（比如线上是客户白标实例的） ----
   不放空图框，改成纯文字卡：顶部一条主色细线做记号，
   内边距加大，在整片图卡里形成一个安静的停顿。 */
.work--noshot .work__body { padding-top: 28px; }
.work--noshot::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent);
}

/* 不可点的卡片：不上浮，也不给手型 */
.work--flat { box-shadow: none; border-color: var(--line); }
.work--flat:hover { transform: none; box-shadow: none; }

@media (max-width: 640px) {
  .works { grid-template-columns: 1fr; gap: 16px; }
  .work__browser { margin: 14px 14px 0; }
  .work__body { padding: 18px 22px 20px; }
  .work__name { font-size: 19px; }
  .work__shot { height: 104px; }        /* 手机上卡片更宽，同样比例可以多露一点 */
}