@charset "utf-8";
/* ===========================================================================
   智磊信创 · 职易达 —— 官网设计系统
   代号：TERMINAL CONSOLE / 终端控制台
   作者：ZLIXC Design · 2026
   说明：近黑底 + 发丝描边 + 等宽元数据 + 非对称编辑式排版
   =========================================================================== */

/* ---------- 0. TOKENS ---------- */
:root{
  /* 空间基色：不是纯黑，带极轻的蓝紫底子，避免死黑 */
  --void:        #04090A;
  --void-2:      #070E0F;
  --panel:       #0A1315;
  --panel-hi:    #0F1A1C;
  --panel-top:   #152224;

  /* 发丝线：暗色站的高级感全在这一层 */
  --hair:        rgba(255,255,255,.070);
  --hair-2:      rgba(255,255,255,.130);
  --hair-3:      rgba(255,255,255,.220);

  /* 文字 */
  --ink:         #ECF2EF;
  --ink-2:       #96A8A2;
  --ink-3:       #5D6E68;
  --ink-4:       #3A4744;

  /* 信号青：主强调色，用于交互态、数据、当前项 */
  --cy:          #2EE6A8;
  --cy-deep:     #159E77;
  --cy-05:       rgba(46,230,168,.05);
  --cy-10:       rgba(46,230,168,.10);
  --cy-18:       rgba(46,230,168,.18);
  --cy-35:       rgba(46,230,168,.35);

  /* 纸琥珀：第二强调色，只给"打印 / 纸质产出"用，全站出现不超过 10 处 */
  --am:          #D9A55B;
  --am-10:       rgba(217,165,91,.11);
  --am-30:       rgba(217,165,91,.32);
  --g-mid:       #7FF0D6;   /* hero 渐变中段 */

  --ok:          #4FD48F;
  --warn:        #D9A55B;
  --no:          #FF6B6B;

  /* 字体：仅使用 Windows + macOS 双端本机可识别字体，不依赖任何在线字体 */
  --ff: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
        "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;
  --ff-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
        "Liberation Mono", "Courier New", "Microsoft YaHei", monospace;

  /* 栅格 */
  --gut: 28px;
  --maxw: 1360px;
  --rail: 76px;             /* 左侧索引轨 */

  /* 圆角：刻意压到很小，拒绝"大圆角卡片"模版感 */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --nav-h: 66px;

  /* 字距梯度：字号越大越收，中文标题收得比西文轻一档，避免笔画粘连 */
  --tr-display: -.024em;   /* 48–72px */
  --tr-h2:      -.018em;   /* 26–46px */
  --tr-h3:      -.012em;   /* 17–24px */
  --tr-body:    -.002em;   /* 15–17px  中文正文几乎不收 */
  --tr-micro:    .18em;    /* 10–12px 等宽小标 */

  /* 章节节奏：可被 .sec--tight / .sec--air 改写，让整页不是等距 */
  --sec-pad:  118px;
  --sec-pad-b: 104px;
  --head-gap:  46px;

  color-scheme: dark;
}

/* 亮色模式：以"技术白皮书纸感"为底，不是简单反色 */
:root[data-theme="light"]{
  --void:        #F5F4EF;
  --void-2:      #EEEDE6;
  --panel:       #FFFFFF;
  --panel-hi:    #FCFBF7;
  --panel-top:   #F2F1EA;
  --hair:        rgba(8,12,20,.10);
  --hair-2:      rgba(8,12,20,.16);
  --hair-3:      rgba(8,12,20,.30);
  --ink:         #0B0E14;
  --ink-2:       #4A5567;
  --ink-3:       #7B8598;
  --ink-4:       #AAB2C0;
  --cy:          #0B8A62;
  --cy-deep:     #076B4C;
  --cy-05:       rgba(11,138,98,.05);
  --cy-10:       rgba(11,138,98,.09);
  --cy-18:       rgba(11,138,98,.16);
  --cy-35:       rgba(11,138,98,.30);
  --am:          #9A6B1E;
  --am-10:       rgba(154,107,30,.10);
  --am-30:       rgba(154,107,30,.30);
  --g-mid:       #0E7A72;
  color-scheme: light;
}

/* ---------- 1. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
  margin:0;background:var(--void);color:var(--ink);
  font-family:var(--ff);font-size:16px;line-height:1.72;
  letter-spacing:var(--tr-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  /* 中文排版：全角标点挤压 + 中西文自动间隔。
     两者都是渐进增强，不支持的浏览器只是维持旧观感，不会破版。 */
  text-spacing-trim:space-first;
  text-autospace:normal;
  /* 不让系统合成假粗 / 假斜：Windows 中文字族缺字重时会糊成一团 */
  font-synthesis-weight:none;font-synthesis-style:none;
  /* 正文用比例数字（和汉字同宽的表格数字在行文里会撑出洞）；
     数据区在下面单独切回 tabular-nums */
  font-variant-numeric:proportional-nums;
}
/* 需要对齐的数字：表格、规格、指标、计数动画 */
table,.mono,.spec,.matrix,.statusbar,.st,.tl-i .d,[data-count],
.sec-idx,.card-n,.step .n,.row-item .n,[data-acc-h] .n,.field label,.kicker{
  font-variant-numeric:tabular-nums;
}
/* 段落避免孤字成行 —— 中文里一个字单独占一行是最刺眼的破绽 */
p,li,dd,figcaption,blockquote{text-wrap:pretty}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5,p,figure,ul,ol,dl{margin:0}
ul,ol{padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--cy-35);color:#fff}
:focus-visible{outline:1.5px solid var(--cy);outline-offset:3px;border-radius:2px}
hr{border:0;border-top:1px solid var(--hair);margin:0}

/* ---------- 2. 页面底纹：网格 + 极光 + 噪点 ---------- */
.bg-field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-field::before{      /* 工程网格 */
  content:"";position:absolute;inset:-2px;
  background-image:
    linear-gradient(var(--hair) 1px,transparent 1px),
    linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,rgba(0,0,0,.45) 42%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,rgba(0,0,0,.45) 42%,transparent 78%);
  opacity:.85;
}
.bg-field::after{        /* 极光：两团低饱和光，非常轻 */
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(46% 34% at 14% 4%, rgba(46,230,168,.13), transparent 62%),
    radial-gradient(40% 30% at 88% 12%, rgba(217,165,91,.06), transparent 62%),
    radial-gradient(60% 40% at 50% 100%, rgba(46,230,168,.055), transparent 70%);
  filter:blur(6px);
}
:root[data-theme="light"] .bg-field::after{opacity:.55}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}
:root[data-theme="light"] .grain{opacity:.35;mix-blend-mode:multiply}
.page{position:relative;z-index:2}

/* ---------- 3. 版心与栅格 ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap-wide{max-width:1600px}

/* 满版底色：靠伪元素铺到视口两边，body 的 overflow-x:hidden 负责裁切，
   不会把文档撑宽（各档位已验证 scrollWidth === clientWidth）。 */
.sec--band{border-top:0;position:relative;isolation:isolate}
.sec--band::before{
  content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;
  background:var(--panel);
  border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),inset 0 -1px 0 rgba(255,255,255,.02);
}
/* 满版区里网格底纹被盖住，正好让这一节的「地面」和别处不一样 */
:root[data-theme="light"] .sec--band::before{
  background:#FFFDF8;box-shadow:inset 0 1px 0 rgba(8,12,20,.05);
}

/* 越界：让图块咬出版心右缘，破掉「所有东西都在同一个框里」 */
.bleed-r{margin-right:calc(var(--gut) * -1)}
@media (min-width:1400px){ .bleed-r{margin-right:calc((100vw - var(--maxw)) / -2 - var(--gut))} }
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.grid12>*,.hero-grid>*,.sec-body>*,.sec-head>*,.cards>*,.steps>*{min-width:0}

/* ---------------------------------------------------------------------------
   章节骨架：左侧「图纸边栏」+ 内容
   —— 边栏不是装饰性的灰字，而是一条真的边线加刻度，像技术图纸的页边注记。
   --------------------------------------------------------------------------- */
.sec{position:relative;padding:var(--sec-pad) 0 var(--sec-pad-b);border-top:1px solid var(--hair)}
.sec:first-of-type{border-top:0}
/* 节奏调节器：整页不再等距，靠这三个修饰类制造疏密 */
.sec--tight{--sec-pad:72px;--sec-pad-b:64px}
.sec--air{--sec-pad:150px;--sec-pad-b:138px}
.sec--flush{border-top:0}

/* 章节起点的刻度：一小段实线咬住页边栏，比整条发丝线更有手工痕迹 */
.sec::after{
  content:"";position:absolute;left:0;top:-1px;width:var(--rail);height:1px;
  background:var(--hair-3);pointer-events:none;
}
.sec:first-of-type::after,.sec--flush::after{display:none}

.sec-head{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0 24px;margin-bottom:var(--head-gap)}
.sec-idx{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.15em;color:var(--ink-4);
  padding-top:11px;white-space:nowrap;position:relative;
}
/* 边栏竖线：从索引号一直垂到标题底部，把编号和标题绑成一组 */
.sec-idx::after{
  content:"";position:absolute;left:1px;top:30px;bottom:-2px;width:1px;background:var(--hair);
}
.sec-idx b{color:var(--ink-2);font-weight:500;letter-spacing:.06em;font-size:12px}
.sec-title{max-width:900px}
.sec-title h2{
  font-size:clamp(26px,4.1vw,44px);line-height:1.2;font-weight:680;
  letter-spacing:var(--tr-h2);text-wrap:balance;
}
/* 大字号下启用比例字形：把全角逗号、冒号两侧的空洞收掉。
   PingFang SC / 思源黑体支持 palt；Windows 雅黑没有该特性时静默失效，不破版。 */
.hero h1,.sec-title h2,.cta-band h3{
  font-feature-settings:"palt" 1;
}
/* 副题：过去和主题几乎同号同色，读起来像两个标题打架。
   现在压到 0.66em 并换成次级墨色，主题才有重音。 */
.sec-title h2 .thin{
  font-weight:400;color:var(--ink-3);font-size:.66em;letter-spacing:-.006em;
}
.sec-title p{margin-top:20px;color:var(--ink-2);font-size:16.5px;max-width:640px;line-height:1.82}
.sec-body{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0 24px}

/* 右置标题：给某一节用，打破「每节都从同一条左线开始」。
   标题靠右、正文仍从左侧版心开始，两者之间形成张力。 */
.sec-head--right{grid-template-columns:minmax(0,1fr) var(--rail)}
.sec-head--right .sec-idx{grid-column:2;grid-row:1;padding-left:24px}
.sec-head--right .sec-title{grid-column:1;grid-row:1;margin-left:auto;text-align:right;max-width:780px}
.sec-head--right .sec-title p{margin-left:auto}

/* 元数据小标：刻度而不是彩条。青色留给真正需要引导视线的地方。 */
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:var(--tr-micro);text-transform:uppercase;
  color:var(--ink-3);margin-bottom:20px;
}
.kicker::before{content:"";width:18px;height:1px;background:var(--hair-3)}
.kicker.cy{color:var(--cy)}
.kicker.cy::before{background:var(--cy)}
.kicker.am::before{background:var(--am)}

/* 角标框：用 L 形角替代整圈边框，工程图纸味 */
.brk{position:relative}
.brk::before,.brk::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;
  border:1px solid var(--hair-3);
}
.brk::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.brk::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
/* 四角版本：给需要「取景框」感觉的图块 */
.brk4{position:relative}
.brk4::before,.brk4::after{
  content:"";position:absolute;inset:-1px;pointer-events:none;
  border:1px solid var(--hair-3);
  -webkit-mask:linear-gradient(#000 0 0) 0 0/14px 1px no-repeat,linear-gradient(#000 0 0) 0 0/1px 14px no-repeat,
          linear-gradient(#000 0 0) 100% 0/14px 1px no-repeat,linear-gradient(#000 0 0) 100% 0/1px 14px no-repeat,
          linear-gradient(#000 0 0) 0 100%/14px 1px no-repeat,linear-gradient(#000 0 0) 0 100%/1px 14px no-repeat,
          linear-gradient(#000 0 0) 100% 100%/14px 1px no-repeat,linear-gradient(#000 0 0) 100% 100%/1px 14px no-repeat;
          mask:linear-gradient(#000 0 0) 0 0/14px 1px no-repeat,linear-gradient(#000 0 0) 0 0/1px 14px no-repeat,
          linear-gradient(#000 0 0) 100% 0/14px 1px no-repeat,linear-gradient(#000 0 0) 100% 0/1px 14px no-repeat,
          linear-gradient(#000 0 0) 0 100%/14px 1px no-repeat,linear-gradient(#000 0 0) 0 100%/1px 14px no-repeat,
          linear-gradient(#000 0 0) 100% 100%/14px 1px no-repeat,linear-gradient(#000 0 0) 100% 100%/1px 14px no-repeat;
}
.brk4::after{display:none}

/* ---------- 4. 按钮 ---------- */
.btn{
  --bg:transparent;--bd:var(--hair-2);--fg:var(--ink);
  position:relative;display:inline-flex;align-items:center;gap:10px;
  height:46px;padding:0 22px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-size:14.5px;font-weight:520;letter-spacing:.01em;cursor:pointer;border-radius:var(--r-sm);
  transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease),transform .3s var(--ease);
  overflow:hidden;white-space:nowrap;
}
.btn svg{width:15px;height:15px;flex:none;transition:transform .35s var(--ease)}
.btn{letter-spacing:.006em}
.btn:hover{transform:translateY(-1px)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(0)}
.btn--primary{--bg:var(--cy);--bd:var(--cy);--fg:#04231A;font-weight:640}
.btn--primary:hover{--bg:#5FF0BC;--bd:#5FF0BC}
.btn--ghost:hover{--bd:var(--hair-3);background:rgba(255,255,255,.035)}
:root[data-theme="light"] .btn--ghost:hover{background:rgba(8,12,20,.04)}
.btn--line{--bd:var(--cy-35);--fg:var(--cy)}
.btn--line:hover{--bd:var(--cy);background:var(--cy-10)}
.btn--sm{height:38px;padding:0 15px;font-size:13px}
.btn--lg{height:52px;padding:0 27px;font-size:15.5px}
.btn[disabled]{opacity:.45;pointer-events:none}

/* 链接箭头 */
.alink{display:inline-flex;align-items:center;gap:8px;color:var(--cy);font-size:14.5px;font-weight:520;
  border-bottom:1px solid transparent;transition:border-color .3s,gap .3s}
.alink:hover{border-bottom-color:var(--cy-35);gap:12px}
.alink svg{width:14px;height:14px}

/* ---------- 5. 导航 ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:80;
  display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s;
}
.nav.is-stuck{
  background:color-mix(in srgb,var(--void) 82%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--hair);
}
.nav .wrap{display:flex;align-items:center;gap:26px;max-width:1600px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand .mark{width:30px;height:30px;flex:none}
.brand .txt{display:flex;flex-direction:column;gap:3px;line-height:1.05}
.brand .zh{font-size:15.5px;font-weight:660;letter-spacing:.012em}
.brand .en{font-family:var(--ff-mono);font-size:9px;letter-spacing:.22em;color:var(--ink-4);
  text-transform:uppercase;line-height:1}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:14px}
.nav-links a{
  position:relative;padding:8px 13px;font-size:14.5px;color:var(--ink-2);border-radius:var(--r-sm);
  transition:color .28s var(--ease),background .28s var(--ease);
}
.nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.045)}
:root[data-theme="light"] .nav-links a:hover{background:rgba(8,12,20,.045)}
.nav-links a.on{color:var(--ink)}
.nav-links a.on::after{
  content:"";position:absolute;left:13px;right:13px;bottom:1px;height:1px;background:var(--cy);
}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{
  width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--hair);
  background:transparent;border-radius:var(--r-sm);cursor:pointer;color:var(--ink-2);
  transition:border-color .3s,color .3s,background .3s;
}
.icon-btn:hover{border-color:var(--hair-3);color:var(--ink)}
.icon-btn svg{width:16px;height:16px}
.nav-burger{display:none}

/* 移动菜单 */
.mmenu{
  position:fixed;inset:var(--nav-h) 0 0;z-index:79;background:var(--void);
  transform:translateY(-8px);opacity:0;visibility:hidden;transition:.32s var(--ease);
  padding:26px var(--gut);overflow-y:auto;
}
.mmenu.open{transform:none;opacity:1;visibility:visible}
.mmenu a{display:flex;justify-content:space-between;align-items:center;padding:17px 2px;
  border-bottom:1px solid var(--hair);font-size:18px;font-weight:560}
.mmenu a span{font-family:var(--ff-mono);font-size:11px;color:var(--ink-4)}
.mmenu .btn{margin-top:26px;width:100%;justify-content:center}

/* ---------- 6. HERO ---------- */
.hero{position:relative;padding-top:calc(var(--nav-h) + 60px);padding-bottom:0;overflow:hidden}
/* 扫描线与聚光都是绝对定位的装饰层，内容必须压在它们之上 */
.hero > .wrap,.dk-head > .wrap,section > .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:48px;align-items:center}
.hero h1{
  font-size:clamp(31px,6.6vw,72px);line-height:1.06;font-weight:700;
  letter-spacing:var(--tr-display);margin-top:6px;text-wrap:balance;
}
.hero h1 .g{
  background:linear-gradient(96deg,var(--cy) 4%,var(--g-mid) 44%,var(--am) 104%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* 第二行是副题不是第二个标题：降号、降色、放松字距，让第一行独占重音 */
.hero h1 .thin{
  font-weight:330;color:var(--ink-3);letter-spacing:-.012em;font-size:.72em;
  line-height:1.2;display:inline-block;margin-top:.2em;
}
.hero-lead{margin-top:28px;font-size:17px;line-height:1.85;color:var(--ink-2);max-width:534px}
.hero-lead b{color:var(--ink);font-weight:560}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
/* 业务边界声明按「页边注记」处理：等宽小字 + 一条竖线，像图纸旁批 */
.hero-note{
  margin-top:34px;display:flex;align-items:flex-start;gap:14px;
  font-size:12px;color:var(--ink-3);line-height:1.72;max-width:520px;
  padding:2px 0 2px 16px;border-left:1px solid var(--hair-2);border-top:0;
}
.hero-note svg{width:13px;height:13px;flex:none;margin-top:4px;color:var(--ink-4)}
.hero-note b{color:var(--ink-2);font-family:var(--ff-mono);font-size:10px;
  letter-spacing:var(--tr-micro);text-transform:uppercase;font-weight:400;
  display:block;margin-bottom:5px}

/* 扫描线：产品是"扫描 + 打印"，所以扫描线不是装饰，是叙事 */
.scanline{
  position:absolute;left:0;right:0;top:0;height:190px;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,transparent,var(--cy-05) 46%,var(--cy-10) 50%,var(--cy-05) 54%,transparent);
  animation:scan 22s linear infinite;opacity:.42;
  will-change:transform;transform:translate3d(0,-200px,0);
}
/* 用 transform 而不是 top：transform 走合成层，不触发布局，也就不产生布局偏移 */
@keyframes scan{
  0%{transform:translate3d(0,-200px,0)}
  42%{transform:translate3d(0,var(--scan-end,900px),0)}
  100%{transform:translate3d(0,var(--scan-end,900px),0)}
}

/* ---------------------------------------------------------------------------
   状态条 —— 全页第一个视觉重音。
   数字放到 h2 的量级，单位与说明压到 12px，靠字号差而不是靠颜色制造对比。
   --------------------------------------------------------------------------- */
.statusbar{
  margin-top:74px;border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair);
  display:flex;align-items:stretch;
}
.statusbar .cell{
  flex:1;padding:22px 26px 24px;border-left:1px solid var(--hair);min-width:0;position:relative;
}
.statusbar .cell:first-child{border-left:0;padding-left:0}
/* 每格顶端一个小刻度，落在发丝线上 */
.statusbar .cell::before{
  content:"";position:absolute;left:0;top:-1px;width:1px;height:7px;background:var(--hair-3);
}
.statusbar .cell:first-child::before{display:none}
.statusbar .k{font-family:var(--ff-mono);font-size:10px;letter-spacing:var(--tr-micro);color:var(--ink-4);text-transform:uppercase}
.statusbar .v{
  margin-top:12px;font-size:clamp(30px,3.1vw,42px);font-weight:660;
  letter-spacing:-.03em;line-height:1;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.statusbar .v small{
  font-size:12px;font-weight:440;color:var(--ink-3);letter-spacing:0;line-height:1.5;
  flex:1 1 100%;margin-top:2px;
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ok);display:inline-block;flex:none;
  box-shadow:0 0 0 3px rgba(79,212,143,.16);animation:pulse 2.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.42}}

/* ---------- 7. 一体机设备框（纯 CSS/SVG，无外部图） ---------- */
.device{position:relative;margin-inline:auto;width:100%;max-width:392px}
.device-frame{
  position:relative;border:1px solid var(--hair-2);border-radius:14px;padding:13px 13px 40px;
  background:linear-gradient(168deg,var(--panel-top),var(--panel) 58%);
  box-shadow:0 50px 110px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03) inset;
}
.device-frame::after{  /* 底座 */
  content:"";position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  width:96px;height:4px;border-radius:3px;background:var(--hair-2);
}
.device-screen{
  position:relative;aspect-ratio:1080/1920;border-radius:6px;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%,#0B1A16,#04090A 70%);
  border:1px solid var(--hair);
}
.device-screen::before{ /* 屏幕反光 */
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(158deg,rgba(255,255,255,.075),transparent 34%,transparent 72%,rgba(46,230,168,.05));
}
.device-glow{
  position:absolute;inset:-16% -22%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 42% at 50% 46%,var(--cy-18),transparent 68%);filter:blur(38px);
}
.device-cap{
  margin-top:16px;display:flex;justify-content:space-between;gap:14px;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.13em;color:var(--ink-4);text-transform:uppercase;
}

/* ---------------------------------------------------------------------------
   8. 表面材质
   全站只允许四种表面，靠材质区分层级，不靠再加一圈边框：
     S0 纸面   —— 直接落在页面上，只有发丝线（.rows / .spec / .tl）
     S1 分栏   —— 只有竖发丝线分隔，没有盒子（.cards）
     S2 内凹   —— 比页面更暗一档，顶边一道高光，像被切进纸里（.panel）
     S3 抬起   —— 唯一有渐变和投影的表面，全站只给 CTA 和视频位（.cta-band/.videobox）
   --------------------------------------------------------------------------- */
.panel{
  background:var(--void-2);
  border:1px solid var(--hair);border-radius:var(--r-sm);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
:root[data-theme="light"] .panel{background:var(--panel-hi);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.panel-pad{padding:26px 28px}

/* 规格表：真技术表，最能去掉模版味 */
.spec{font-size:14.5px}
.spec tr{border-top:1px solid var(--hair)}
.spec tr:first-child{border-top:0}
.spec th,.spec td{padding:15px 4px;text-align:left;vertical-align:top}
.spec th{
  width:31%;font-family:var(--ff-mono);font-size:11px;letter-spacing:var(--tr-micro);color:var(--ink-4);
  font-weight:400;text-transform:uppercase;padding-right:22px;
}
.spec td{color:var(--ink);line-height:1.72}
.spec td em{font-style:normal;color:var(--ink-3);font-size:13px}
/* 定义式变体：标签列换回正文字族（中文跑等宽会失真），上方叠一行等宽英文小标 */
.spec--defs th{
  width:24%;font-family:var(--ff);font-size:16px;color:var(--ink);font-weight:600;
  letter-spacing:var(--tr-h3);text-transform:none;padding-top:22px;padding-bottom:22px;
}
.spec--defs th i{
  display:block;font-family:var(--ff-mono);font-style:normal;font-size:10px;
  letter-spacing:var(--tr-micro);color:var(--ink-4);text-transform:uppercase;margin-bottom:8px;font-weight:400;
}
.spec--defs td{padding-top:22px;padding-bottom:22px;color:var(--ink-2);font-size:15px;max-width:62em}
.spec--defs tr{transition:background .35s var(--ease)}
.spec--defs tr:hover{background:linear-gradient(90deg,rgba(255,255,255,.026),transparent 62%)}
:root[data-theme="light"] .spec--defs tr:hover{background:linear-gradient(90deg,rgba(8,12,20,.032),transparent 62%)}
@media (max-width:720px){
  .spec--defs th,.spec--defs td{display:block;width:auto;padding-right:0}
  .spec--defs th{padding-bottom:8px}
  .spec--defs td{padding-top:0}
}

/* 特性行（编号 + 标题 + 描述，横向铺开，不是卡片） */
.rows{border-top:1px solid var(--hair)}
.row-item{
  display:grid;grid-template-columns:46px minmax(0,238px) minmax(0,1fr) auto;gap:0 26px;align-items:start;
  padding:24px 4px;border-bottom:1px solid var(--hair);
  transition:background .35s var(--ease),padding-left .35s var(--ease);
}
.row-item:hover{background:linear-gradient(90deg,rgba(255,255,255,.028),transparent 58%);padding-left:12px}
:root[data-theme="light"] .row-item:hover{background:linear-gradient(90deg,rgba(8,12,20,.035),transparent 58%)}
.row-item .n{font-family:var(--ff-mono);font-size:11px;color:var(--ink-4);padding-top:6px;letter-spacing:.1em}
.row-item h4{font-size:17px;font-weight:600;letter-spacing:var(--tr-h3);display:flex;align-items:center;gap:10px;text-wrap:balance}
.row-item h4 svg{width:16px;height:16px;color:var(--ink-3);flex:none;transition:color .35s var(--ease)}
.row-item:hover h4 svg{color:var(--cy)}
.row-item p{color:var(--ink-2);font-size:14.5px;line-height:1.78}
.row-item .tag{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:var(--tr-micro);color:var(--ink-4);
  border:0;border-left:1px solid var(--hair-2);padding:2px 0 2px 12px;border-radius:0;
  white-space:nowrap;margin-top:5px;text-transform:uppercase;
}

/* 标签 */
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border:1px solid var(--hair);
  border-radius:99px;font-size:12.5px;color:var(--ink-2);background:rgba(255,255,255,.02);
}
:root[data-theme="light"] .chip{background:rgba(8,12,20,.02)}
.chip.cy{border-color:var(--cy-35);color:var(--cy);background:var(--cy-05)}
.chip.am{border-color:var(--am-30);color:var(--am);background:var(--am-10)}

/* ---------- 9. 动效 ---------- */
[data-rv]{opacity:0;transform:translateY(18px);transition:opacity .82s var(--ease-out),transform .82s var(--ease-out)}
[data-rv].in{opacity:1;transform:none}
[data-rv-x]{opacity:0;transform:translateX(-16px);transition:opacity .82s var(--ease-out),transform .82s var(--ease-out)}
[data-rv-x].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-rv],[data-rv-x]{opacity:1;transform:none}
}

/* 跑马灯 */
.ticker{
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  overflow:hidden;padding:13px 0;background:var(--void-2);
}
.ticker-track{display:flex;gap:0;width:max-content;animation:tick 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker-item{
  display:flex;align-items:center;gap:13px;padding:0 32px;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;color:var(--ink-4);
  text-transform:uppercase;white-space:nowrap;
}
.ticker-item i{width:1px;height:9px;background:var(--hair-3);border-radius:0;font-style:normal;flex:none}

/* ---------- 10. 页脚 ---------- */
.foot{border-top:1px solid var(--hair);padding:72px 0 34px;background:var(--void-2);position:relative;z-index:2}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:44px}
.foot h5{font-family:var(--ff-mono);font-size:10px;letter-spacing:var(--tr-micro);color:var(--ink-4);
  text-transform:uppercase;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--hair)}
.foot li{margin-bottom:11px}
.foot li a{font-size:14px;color:var(--ink-2);transition:color .25s}
.foot li a:hover{color:var(--cy)}
.foot-desc{color:var(--ink-3);font-size:13.5px;line-height:1.85;margin-top:18px;max-width:330px}
.foot-contact{margin-top:22px;font-family:var(--ff-mono);font-size:12.5px;color:var(--ink-2);line-height:2}
.foot-contact a:hover{color:var(--cy)}
.foot-bottom{
  margin-top:56px;padding-top:22px;border-top:1px solid var(--hair);position:relative;
  display:flex;flex-wrap:wrap;gap:16px 26px;justify-content:space-between;align-items:center;
  font-size:12px;color:var(--ink-4);
}
.foot-bottom::before{content:"";position:absolute;left:0;top:-1px;width:26px;height:1px;background:var(--hair-3)}
.foot-bottom a{color:var(--ink-3)}
.foot-bottom a:hover{color:var(--cy)}
/* 业务边界声明：不是一个提示盒，是合同附注 —— 左侧一条线 + 等宽标头 */
.foot-legal{max-width:900px;font-size:12px;color:var(--ink-3);line-height:1.85;margin-top:22px;
  padding:0 0 0 18px;border:0;border-left:1px solid var(--hair-2);border-radius:0;background:none}
.foot-legal b{display:block;font-family:var(--ff-mono);font-size:10px;letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--ink-4);font-weight:400;margin-bottom:8px}
/* 页脚顶部的裁切刻度 */
.foot::before{content:"";position:absolute;left:0;top:-1px;width:var(--rail);height:1px;background:var(--hair-3)}

/* ---------- 11. 工具类 ---------- */
.mono{font-family:var(--ff-mono)}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.center{text-align:center}
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mt-32{margin-top:32px}.mt-48{margin-top:48px}.mt-64{margin-top:64px}
.nowrap{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 12. 响应式 ---------- */
@media (max-width:1180px){
  :root{--rail:0px}
  .sec-head,.sec-body,.sec-head--right{grid-template-columns:minmax(0,1fr)}
  .sec-head--right .sec-title{text-align:left;margin-left:0;grid-column:1;grid-row:2}
  .sec-head--right .sec-idx{padding-left:0;grid-column:1;grid-row:1}
  .sec-idx{padding-top:0;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--hair)}
  .sec-idx::after{display:none}
  .sec::after,.foot::before{width:48px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:38px}
}
@media (max-width:1080px){
  .row-item{grid-template-columns:46px minmax(0,190px) minmax(0,1fr);gap:0 20px}
  .row-item .tag{display:none}
}
@media (max-width:960px){
  :root{--gut:20px}
  .nav-links{display:none}
  .nav-burger{display:grid}
  .hero-grid{grid-template-columns:1fr;gap:52px}
  .hero{padding-top:calc(var(--nav-h) + 46px)}
  .device{max-width:296px}
  .sec,.sec--tight,.sec--air{--sec-pad:82px;--sec-pad-b:76px;--head-gap:36px}
  .statusbar{flex-wrap:wrap}
  .statusbar .cell{flex:1 1 50%;border-left:0;border-top:1px solid var(--hair);padding-left:0}
  .statusbar .cell::before{display:none}
  .statusbar .cell:nth-child(1),.statusbar .cell:nth-child(2){border-top:0}
  .statusbar .cell:nth-child(even){padding-left:20px;border-left:1px solid var(--hair)}
  .statusbar .v{font-size:30px}
  .row-item{grid-template-columns:36px minmax(0,1fr);gap:0 14px}
  .row-item .tag{display:none}
  .row-item p{grid-column:2}
  .bleed-r{margin-right:0}
}
@media (max-width:520px){
  .nav-cta{display:none}
  .brand .en{display:none}
}
@media (max-width:640px){
  body{font-size:15.5px}
  .sec,.sec--tight,.sec--air{--sec-pad:62px;--sec-pad-b:58px}
  .sec-title h2 .thin{font-size:.72em}
  .statusbar .v{font-size:27px}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .statusbar .cell{flex:1 1 100%;padding-left:0!important;border-left:0!important}
  .statusbar .cell:nth-child(2){border-top:1px solid var(--hair)}
}

/* 打印：把网站变成可交客户的方案纸 */
@media print{
  .nav,.mmenu,.bg-field,.grain,.scanline,.ticker,.no-print,.fx-prog,.totop{display:none!important}
  body{background:#fff;color:#000}
  .sec,.sec--tight,.sec--air{padding:24px 0;border-color:#ddd}
  .panel{border-color:#ccc;background:#fff;box-shadow:none}
  /* 满版底与越界在纸上都会切掉内容，一律收回版心 */
  .sec--band::before{display:none}
  .bleed-r{margin-right:0}
  .cta-band{box-shadow:none;background:#fff;border-color:#ccc}
  .cta-band::before,.cta-band::after{display:none}
  a{color:#000}
}