/* ==========================================================================
   上海世佳特科技有限公司 — Design System
   base.css : tokens, reset, typography, chrome (header/footer), primitives
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces — near-black, cool-neutral */
  --bg:            #07080a;
  --bg-soft:       #0a0c10;
  --panel:         #0d1015;
  --panel-2:       #12161d;
  --panel-3:       #171c24;

  /* Hairlines */
  --line:          rgba(255, 255, 255, 0.08);
  --line-strong:   rgba(255, 255, 255, 0.14);
  --line-accent:   rgba(47, 224, 192, 0.28);

  /* Ink — 深色底上的四级灰阶。ink-3 / ink-4 抬过一档：小字号等宽标签
     （品牌英文名、统计条说明、页脚联系项、图表刻度）在近黑底上必须能读。 */
  --ink:           #e9edf3;
  --ink-2:         #a3abb9;
  --ink-3:         #8d95a3;
  --ink-4:         #6b7381;

  /* Accents — signal teal primary, heat amber secondary, deep blue depth */
  --teal:          #2fe0c0;
  --teal-soft:     #6ef0d8;
  --teal-dim:      #17947e;
  --amber:         #ffb454;
  --blue:          #4c8dff;
  --violet:        #8b7cff;
  --red:           #ff7a76;

  --teal-a08:      rgba(47, 224, 192, 0.08);
  --teal-a14:      rgba(47, 224, 192, 0.14);
  --amber-a12:     rgba(255, 180, 84, 0.12);
  --blue-a12:      rgba(76, 141, 255, 0.12);
  --red-a10:       rgba(255, 122, 118, 0.10);

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
               "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Space + shape */
  --wrap: 1200px;
  --gutter: 24px;
  --r-sm: 6px;
  --r: 11px;
  --r-lg: 15px;
  --r-pill: 999px;

  --section-y: clamp(72px, 9vw, 132px);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Duration ladder — 三级足够。此前 29 处 transition 硬编码了 0.2/0.24/0.25/
     0.28/0.3s 五个相近的值，单看都对、整体节奏不齐。按语义取用：
       dur-1 微反馈（描边、文字色、背景色）
       dur-2 常规（卡片升降、抽屉、tabs、边框光标）
       dur-3 大动作（面板展开、章节进场、文字逐字） */
  --dur-1: 0.16s;
  --dur-2: 0.26s;
  --dur-3: 0.45s;

  /* Layer ladder — 命名替代裸数字，避免新元素撞车。实际层级关系：
     装饰(0) < 局部内容(1) < 弹出徽标(2) < 抽屉遮罩(99) < 页头(100)
     < 阅读进度(101) < 跳转链接(200) —— 抽屉刻意低于页头，让页头保持可见。 */
  --z-base: 0;
  --z-content: 1;
  --z-raised: 2;
  --z-drawer: 99;
  --z-header: 100;
  --z-progress: 101;
  --z-overlay: 200;

  --header-h: 68px;

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }
/* js sets --sbw to the scrollbar width while the drawer is open, so the fixed
   header and drawer keep their position instead of jumping when the page
   scrollbar disappears. On touch devices --sbw is 0 and this is a no-op. */
body.nav-open .header,
body.nav-open .drawer { padding-right: var(--sbw, 0px); }

/* Scanline texture — one 1px hairline every 3px at ~1.3% alpha. Invisible at a
   glance, adds an instrument-panel grain; disabled in print. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.013) 0 1px, transparent 1px 3px);
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button { background: none; border: 0; cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

::selection { background: var(--teal); color: #04211c; }

/* Focus — visible, on-brand, never removed */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: #262c36 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #232a34;
  border-radius: 999px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: #333c49; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
/* 中文标题不吃负字距——那是西文 display 字体的习惯，照搬会把汉字挤闷。
   略放半档（+0.01em）出"印刷排版"的呼吸感，也和常见的 AI 站模板拉开。 */
.h1, h1 {
  font-size: clamp(34px, 5.4vw, 62px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.h2, h2 {
  font-size: clamp(27px, 3.7vw, 44px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.h3, h3 {
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0;
}

.h4, h4 {
  font-size: 17px;
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.lede {
  font-size: clamp(16px, 1.35vw, 18.5px);
  line-height: 1.75;
  color: var(--ink-2);
  text-wrap: pretty;
}

.muted { color: var(--ink-2); }
.dim   { color: var(--ink-3); }

/* 强调词——「验收标记」而不是渐变字。渐变字（shimmer gradient text）是 AI 站
   模板的通用手法；这里改成实色 + 荧光笔式底衬，贴合"可验收"的工程语气。 */
.grad-text {
  color: var(--teal);
  background: linear-gradient(
    180deg,
    transparent 0,
    transparent 62%,
    var(--teal-a14) 62%,
    var(--teal-a14) 90%,
    transparent 90%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: 0.04em;
}

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  font-feature-settings: "tnum" 1;
}

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Eyebrow label — the "Main Features / Core" device from the references */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--teal);
  border-radius: 1px;
  box-shadow: 0 0 12px var(--teal);
  flex: none;
}
.eyebrow--plain::before { display: none; }
.eyebrow--amber { color: var(--amber); }
.eyebrow--amber::before { background: var(--amber); box-shadow: 0 0 12px var(--amber); }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 880px; }
.wrap--wide   { max-width: 1360px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(52px, 6vw, 88px); }
.section--hairline { border-top: 1px solid var(--line); }

.stack   { display: flex; flex-direction: column; }
.stack-8  { gap: 8px; }
.stack-12 { gap: 12px; }
.stack-16 { gap: 16px; }
.stack-20 { gap: 20px; }
.stack-24 { gap: 24px; }
.stack-32 { gap: 32px; }

.row { display: flex; align-items: center; }
.row-gap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.sec-head { max-width: 760px; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head .h2 { margin-top: 20px; }
.sec-head .lede { margin-top: 18px; }

/* Section index — auto-filled by site.js (01 / 06), mirrors the card-index
   device; sits on the wrap's right edge, aligned with the eyebrow row. */
.sec-no {
  position: absolute;
  top: var(--section-y);
  right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-4);
  pointer-events: none;
}
.sec-no b { color: var(--teal); font-weight: 500; margin-right: 7px; }
@media (max-width: 900px) { .sec-no { display: none; } }

.grid { display: grid; gap: 1px; background: var(--line); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   5. Backgrounds — grid, glow, noise
   -------------------------------------------------------------------------- */
.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 15%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 15%, transparent 78%);
  pointer-events: none;
}
.bg-grid--soft {
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%);
  background-size: 44px 44px;
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: var(--z-base);
}
.glow--teal  { background: rgba(47, 224, 192, 0.16); }
.glow--blue  { background: rgba(76, 141, 255, 0.14); }
.glow--violet{ background: rgba(139, 124, 255, 0.12); }

.spot {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(47, 224, 192, 0.09), transparent 70%),
    radial-gradient(40% 40% at 82% 12%, rgba(76, 141, 255, 0.08), transparent 70%);
  pointer-events: none;
}

.section > .wrap { position: relative; z-index: var(--z-content); }

/* --------------------------------------------------------------------------
   5b. Section datum — 区块接缝的基准刻度
   两端落在文本栏边界上的短竖刻度 + 中点一档小横线，像图纸里标注分段的
   datum mark。刻意不做成"居中渐隐线"——那是最常见的模板手法。
   -------------------------------------------------------------------------- */
.section + .section::before {
  content: "";
  position: absolute;
  top: -1px;
  height: 7px;
  left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) left center / 1px 7px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right center / 1px 7px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) center center / 9px 1px no-repeat;
  pointer-events: none;
}

/* 版面栏线 —— 把"共享文本栏"画出来（≥1240px 才显示）。
   一对 1px 竖线沿内容栏边界纵贯整个区块，全宽底色因此有了图框骨架；
   内容在栏内、栏线在栏外，页面读起来像一张排版定稿的图纸。 */
@media (min-width: 1240px) {
  .section::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
    right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
    background:
      linear-gradient(var(--line), var(--line)) left top / 1px 100% no-repeat,
      linear-gradient(var(--line), var(--line)) right top / 1px 100% no-repeat;
    pointer-events: none;
  }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-size: 14.5px;
  font-weight: 550;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform var(--dur-1) var(--ease), background-color var(--dur-1), border-color var(--dur-1),
              color 0.18s, box-shadow 0.24s;
}
.btn svg { flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--teal);
  color: #04211c;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(47, 224, 192, 0.45);
}
.btn--primary:hover {
  background: var(--teal-soft);
  box-shadow: 0 0 0 1px rgba(47, 224, 192, 0.7);
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.02);
}
.btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.05);
}

.btn--quiet { color: var(--ink-2); padding-inline: 4px; }
.btn--quiet:hover { color: var(--teal); }

.btn--lg { padding: 15px 28px; font-size: 15.5px; }
.btn--block { width: 100%; }

/* Inline text link with arrow */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--teal);
  font-size: 14.5px;
  font-weight: 550;
  transition: gap var(--dur-1) var(--ease);
}
.tlink:hover { gap: 12px; }

/* --------------------------------------------------------------------------
   7. Badges, pills, chips, tags
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.025);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.pill--teal {
  border-color: var(--line-accent);
  background: var(--teal-a08);
  color: var(--teal);
}
.pill--amber {
  border-color: rgba(255, 180, 84, 0.3);
  background: var(--amber-a12);
  color: var(--amber);
}
.pill--live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(47, 224, 192, 0.6);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47, 224, 192, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(47, 224, 192, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 224, 192, 0); }
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  white-space: nowrap;
}
.tag--teal  { border-color: var(--line-accent); color: var(--teal); background: var(--teal-a08); }
.tag--amber { border-color: rgba(255, 180, 84, 0.3); color: var(--amber); background: var(--amber-a12); }
.tag--blue  { border-color: rgba(76, 141, 255, 0.3); color: #8fb6ff; background: var(--blue-a12); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* --------------------------------------------------------------------------
   8. Cards & panels
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
  transition: border-color var(--dur-1), background-color var(--dur-1), transform var(--dur-2) var(--ease);
}
.card--hover:hover {
  border-color: var(--line-strong);
  background: var(--panel-2);
  transform: translateY(-3px);
}
.card--flush { padding: 0; overflow: hidden; }
.card--tint {
  background:
    linear-gradient(180deg, rgba(47, 224, 192, 0.045), transparent 55%),
    var(--panel);
  border-color: var(--line-accent);
}

/* --------------------------------------------------------------------------
   8b. Edge highlight — 光标沿发丝边框点亮
   做法取自 Linear 生产环境的 edgeHighlight 组件：不铺整片光晕，只让 1px 边框
   在光标附近亮起（用径向遮罩"擦"出一段）。光晕会糊，边框高亮是锐的——仪器
   质感来自锐利，不来自柔光。坐标由 site.js 写入 --edge-x / --edge-y。
   -------------------------------------------------------------------------- */
.edge { position: relative; }
.edge::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  pointer-events: none;
  border: inherit;                 /* 继承 1px 宽度与圆角，不重画 */
  border-radius: inherit;
  border-color: var(--edge-color, var(--teal));
  /* 椭圆遮罩：中心不透明、向外淡出，只留下边框上一段亮边 */
  -webkit-mask: radial-gradient(ellipse var(--edge-w, 17%) var(--edge-h, 29%) at var(--edge-x, 50%) var(--edge-y, 50%),
                #000 0%, #000 var(--edge-plateau, 0%), transparent var(--edge-falloff, 90%));
          mask: radial-gradient(ellipse var(--edge-w, 17%) var(--edge-h, 29%) at var(--edge-x, 50%) var(--edge-y, 50%),
                #000 0%, #000 var(--edge-plateau, 0%), transparent var(--edge-falloff, 90%));
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .edge:hover::after { opacity: 1; }
}

/* Numbered card index — "01 / 06" device */
.card-index {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--ink-4);
}
.card--hover:hover .card-index { color: var(--teal); }

/* Icon tile */
.itile {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
  color: var(--teal);
  flex: none;
}
.itile svg { width: 20px; height: 20px; }
.itile--amber { color: var(--amber); }
.itile--blue  { color: #8fb6ff; }

/* Corner-bracket panel — instrument/HUD accent */
.bracket { position: relative; }
.bracket::before, .bracket::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--teal);
  opacity: 0.5;
  pointer-events: none;
}
.bracket::before { top: -1px; left: -1px; border-top: 1.5px solid; border-left: 1.5px solid; }
.bracket::after  { bottom: -1px; right: -1px; border-bottom: 1.5px solid; border-right: 1.5px solid; }

/* Hairline grid list (used for benchmark tables of feature rows) */
.hlist { border-top: 1px solid var(--line); }
.hlist > li {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
/* 列表行铺满 wrap 以对齐其他区块；正文本身保持可读行宽 */
.hlist > li > p { max-width: 78ch; }

/* --------------------------------------------------------------------------
   9. Header
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-2), border-color var(--dur-2), backdrop-filter var(--dur-2);
}
.header.is-stuck {
  background: rgba(7, 8, 10, 0.78);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom-color: var(--line);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

/* Progress bar */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: var(--z-progress);
  background: linear-gradient(90deg, var(--teal), var(--blue));
  box-shadow: 0 0 10px rgba(47, 224, 192, 0.6);
  transition: width 0.1s linear;
}

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
/* 品牌图形是定稿的 CI 资产（青→蓝渐变双扇形 S，透明底 PNG）。
   标记纵向较长（约 0.72 宽高比），按高度定尺寸以免小块看不清叶片。 */
.brand__mark {
  flex: none;
  display: block;
  width: auto;
  height: 42px;
  transition: transform var(--dur-2) var(--ease), filter var(--dur-2);
}
/* 悬停只给一点点放大与辉光，保持"仪器在运行"的手感，不变形不旋转 */
.brand:hover .brand__mark {
  transform: scale(1.05);
  filter: drop-shadow(0 0 9px rgba(47, 224, 192, 0.45));
}
:root[data-theme="light"] .brand:hover .brand__mark {
  filter: drop-shadow(0 2px 6px rgba(15, 118, 110, 0.35));
}
.footer__about .brand__mark { height: 38px; }
@media (max-width: 640px) {
  .brand__mark { height: 38px; }
  .footer__about .brand__mark { height: 34px; }
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__cn {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.brand__en {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  white-space: nowrap;
}

/* Nav */
.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  position: relative;
  padding: 8px 13px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  color: var(--ink-2);
  transition: color var(--dur-1), background-color var(--dur-1);
}
.nav a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.04); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 1px;
  height: 1.5px;
  background: var(--teal);
  border-radius: 2px;
}
/* Search is an icon-only trailing action: same hit area as the text links, but
   visually a control rather than another word in the list. */
.nav a.nav__search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 11px;
  margin-left: 6px;
  border-left: 1px solid var(--line);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.nav a.nav__search::after { display: none; }

.header__cta { display: flex; align-items: center; gap: 10px; flex: none; }
.header__cta .btn { padding: 9px 17px; font-size: 14px; }

/* Theme toggle — sun/moon pair; the icon shown is driven by [data-theme] */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.03);
  transition: color var(--dur-1), border-color var(--dur-1), background-color var(--dur-1);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--line-accent); }
.theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle { background: rgba(13, 18, 28, 0.03); }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }
:root[data-theme="light"] .theme-toggle .i-sun  { display: none; }

/* Hamburger — flex column with a 4.5px gap, so the three 1.5px bars sit exactly
   6px apart and the open state only needs translateY(±6px) to form a clean X.
   (A grid container stretches its rows to the 42px box and breaks that math.) */
.burger {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4.5px;
}
.burger span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-1);
}
.nav-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .burger span:nth-child(2) { opacity: 0; }
.nav-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: var(--z-drawer);
  background: rgba(7, 8, 10, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 22px var(--gutter) 40px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-2), transform var(--dur-2) var(--ease), visibility var(--dur-2);
}
.nav-open .drawer { opacity: 1; visibility: visible; transform: none; }
.drawer__nav { display: flex; flex-direction: column; }
.drawer__nav a {
  padding: 15px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer__nav a[aria-current="page"] { color: var(--teal); }
.drawer__nav a span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
.drawer__foot { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }

/* --------------------------------------------------------------------------
   10. Page hero (inner pages)
   -------------------------------------------------------------------------- */
.phero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(56px, 8vw, 104px));
  padding-bottom: clamp(40px, 5vw, 72px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.phero__inner { position: relative; z-index: var(--z-content); max-width: 820px; }
.phero h1 { margin-top: 22px; }
.phero .lede { margin-top: 22px; max-width: 680px; }
.phero__meta { margin-top: 30px; }

/* Breadcrumb */
.crumb {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.crumb a { color: var(--ink-3); transition: color var(--dur-1); }
.crumb a:hover { color: var(--teal); }
.crumb span { color: var(--ink-3); }

/* --------------------------------------------------------------------------
   11. Sections: stats, comparison, marquee
   -------------------------------------------------------------------------- */
/* Big-number stat strip */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
}
.stats__item {
  padding: 26px 24px;
  border-right: 1px solid var(--line);
  position: relative;
}
.stats__item:last-child { border-right: 0; }
.stats__v {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stats__v em { font-style: normal; color: var(--teal); }
/* Unit suffixes split out of the number (个月 / 项 / 人): small and quiet so the
   numeral reads first — same rule the dashboard metric tiles already use. */
.v em, .stats__v em {
  font-style: normal;
  font-size: 0.55em;
  font-weight: 550;
  color: var(--ink-3);
  letter-spacing: 0.05em;
  margin-left: 0.15em;
}
.stats__k {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.stats__s {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* Before / after benchmark rows */
.bench { display: flex; flex-direction: column; gap: 30px; }
.bench__row { display: grid; gap: 12px; }
.bench__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.bench__label { font-size: 15px; font-weight: 550; }
.bench__delta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--teal);
  letter-spacing: 0.06em;
}
.bench__delta--amber { color: var(--amber); }
.bench__bars { display: flex; flex-direction: column; gap: 8px; position: relative; }
/* Baseline marker — dashed vertical rule at the "before" level, shared by both
   bars of one row so the delta reads on a common ruler. Values are the row's
   own before-figure (self-referential, no invented industry data). */
.bench__ref {
  position: absolute;
  top: -7px;
  bottom: -7px;
  left: var(--ref, 0%);
  width: 0;
  border-left: 1px dashed rgba(163, 171, 185, 0.42);
  pointer-events: none;
}
.bench__ref b {
  position: absolute;
  bottom: -15px;   /* 放在两根条下方：上方是 bench__top，标签会与 delta 文案打架 */
  left: 5px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  white-space: nowrap;
}
/* 基准靠近右边缘时（如 92.6%），标签翻到虚线左侧，避免被推出画布 */
.bench__ref--flip b { left: auto; right: 5px; }
.bar {
  position: relative;
  height: 30px;
  display: flex;
  align-items: center;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  overflow: hidden;
}
.bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  transition: width 1.15s var(--ease-out);
}
.bar--before .bar__fill { background: repeating-linear-gradient(
    -45deg, rgba(255, 255, 255, 0.11) 0 5px, rgba(255, 255, 255, 0.05) 5px 10px); }
.bar--after .bar__fill {
  background: linear-gradient(90deg, rgba(47, 224, 192, 0.42), rgba(47, 224, 192, 0.16));
  border-right: 1px solid var(--teal);
}
.bar--after.bar--amber-accent .bar__fill {
  background: linear-gradient(90deg, rgba(255, 180, 84, 0.4), rgba(255, 180, 84, 0.14));
  border-right-color: var(--amber);
}
.bar__txt {
  position: relative;
  padding-inline: 13px;
  font-size: 12.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.bar__who {
  color: var(--ink-3);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  min-width: 52px;
}
.bar--after .bar__who { color: var(--teal); }
.bar--after.bar--amber-accent .bar__who { color: var(--amber); }
.bar__val { color: var(--ink); font-variant-numeric: tabular-nums; }
/* 改造前数值落在斜纹填充上，比条外文字更需要对比度 */
.bar--before .bar__val { color: var(--ink-2); }

/* Marquee (industry verticals) */
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   12. Tabs
   -------------------------------------------------------------------------- */
.tabs__list {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--panel);
  overflow-x: auto;
  scrollbar-width: none;
  width: max-content;
  max-width: 100%;
  /* 标签栏在窄屏会横滑，而滚动条被隐藏了——渐隐遮罩是唯一的"还能滑"提示 */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__btn {
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-size: 14px;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color var(--dur-1), background-color var(--dur-1);
}
.tabs__btn:hover { color: var(--ink); }
.tabs__btn[aria-selected="true"] {
  background: var(--teal-a14);
  color: var(--teal);
  box-shadow: inset 0 0 0 1px var(--line-accent);
}
.tabs__panel[hidden] { display: none; }
.tabs__panel { animation: fade-up 0.45s var(--ease-out) both; }
/* Directional slide: site.js tags the incoming panel with where it came from,
   so tab switches read as motion through the tab strip rather than a plain fade. */
.tabs__panel.tabs__panel--from-right { animation-name: fade-up-right; }
.tabs__panel.tabs__panel--from-left  { animation-name: fade-up-left; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-up-right {
  from { opacity: 0; transform: translate(12px, 6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-up-left {
  from { opacity: 0; transform: translate(-12px, 6px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   13. Accordion
   -------------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 4px;
  text-align: left;
  font-size: 16.5px;
  font-weight: 550;
  transition: color var(--dur-1);
}
.acc__btn:hover { color: var(--teal); }
.acc__ico {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
}
.acc__ico::before, .acc__ico::after {
  content: "";
  position: absolute;
  background: var(--ink-2);
  transition: transform var(--dur-2) var(--ease), background-color var(--dur-1);
}
.acc__ico::before { top: 9px; left: 2px; right: 2px; height: 1.5px; }
.acc__ico::after  { left: 9px; top: 2px; bottom: 2px; width: 1.5px; }
.acc__btn[aria-expanded="true"] .acc__ico::after { transform: scaleY(0); }
.acc__btn[aria-expanded="true"] .acc__ico::before { background: var(--teal); }
.acc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-3) var(--ease);
}
/* Expanded state follows the ARIA attribute so the icon and the panel can never
   disagree; .is-open is kept as the fallback for browsers without :has(). */
.acc__item.is-open .acc__body,
.acc__item:has(.acc__btn[aria-expanded="true"]) .acc__body { grid-template-rows: 1fr; }
.acc__body > div { overflow: hidden; }
.acc__body p {
  padding: 0 56px 24px 4px;
  color: var(--ink-2);
  font-size: 15px;
  max-width: 76ch;
}

/* --------------------------------------------------------------------------
   14. Lists with markers
   -------------------------------------------------------------------------- */
.checks { display: flex; flex-direction: column; gap: 11px; }
.checks li {
  display: flex;
  gap: 11px;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
}
.checks li::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 5px;
  border-radius: 3px;
  background: var(--teal-a14);
  border: 1px solid var(--line-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2L9.5 3.6' fill='none' stroke='%232fe0c0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}
.checks--amber li::before {
  background: var(--amber-a12);
  border-color: rgba(255, 180, 84, 0.3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2L9.5 3.6' fill='none' stroke='%23ffb454' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Definition rows (spec-sheet look) */
.spec { display: flex; flex-direction: column; }
.spec__row {
  display: grid;
  grid-template-columns: minmax(96px, 168px) minmax(0, 1fr);
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}
.spec__row:last-child { border-bottom: 0; }
.spec__k {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 3px;
}
.spec__v { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
  font-size: 13.5px;
  font-weight: 550;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.field__label .req { color: var(--teal); }
.field__hint { font-size: 12px; color: var(--ink-4); }

.input, .select, .textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-size: 15px;
  color: var(--ink);
  transition: border-color var(--dur-1), background-color var(--dur-1), box-shadow var(--dur-1);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:hover, .select:hover, .textarea:hover { border-color: rgba(255, 255, 255, 0.22); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--teal);
  background: var(--panel);
  box-shadow: 0 0 0 3px var(--teal-a08);
}
.textarea { min-height: 132px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 5.5L7 9l3.5-3.5' fill='none' stroke='%236b7381' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 14px;
  padding-right: 38px;
  cursor: pointer;
}
.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea { border-color: #ff6b6b; box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1); }
.field__err {
  font-size: 12.5px;
  color: #ff8f8f;
  display: none;
}
.field.is-invalid .field__err { display: block; }

/* Choice chips (radio group) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: all var(--dur-1);
}
.chip span:hover { border-color: rgba(255, 255, 255, 0.28); color: var(--ink); }
.chip input:checked + span {
  border-color: var(--teal);
  background: var(--teal-a08);
  color: var(--teal);
}
.chip input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Form success state */
.form-note {
  display: none;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--r);
  border: 1px solid var(--line-accent);
  background: var(--teal-a08);
  color: var(--ink);
  font-size: 14.5px;
}
.form-note.is-shown { display: flex; }
.form-note strong { color: var(--teal); }

/* Form failure state — same shell as the success note so a failed submit stays
   on-brand instead of falling back to a native window.alert(). */
.form-note--err {
  border-color: rgba(255, 107, 107, 0.3);
  background: rgba(255, 107, 107, 0.08);
}
.form-note--err strong { color: #ff8f8f; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  padding-top: clamp(48px, 6vw, 76px);
  position: relative;
  overflow: hidden;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
}
.footer__about { max-width: 320px; }
.footer__about p {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.75;
}
.footer__h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.footer__links { display: flex; flex-direction: column; gap: 11px; }
.footer__links a {
  font-size: 14px;
  color: var(--ink-2);
  transition: color var(--dur-1);
  width: fit-content;
}
.footer__links a:hover { color: var(--teal); }
.footer__contact { font-size: 14px; color: var(--ink-2); display: flex; flex-direction: column; gap: 13px; }
.footer__contact .k {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
}
.footer__bar {
  margin-top: clamp(40px, 5vw, 60px);
  padding: 22px 0 26px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-4);
}
.footer__legal { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer__legal a { transition: color var(--dur-1); }
.footer__legal a:hover { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   17. CTA band
   全出血色带（不是内缩卡片）：这样文案列与全站其他区块同一条左边界，
   左右也不再有需要对齐的边框。
   -------------------------------------------------------------------------- */
.cta-band {
  border-top: 1px solid var(--line-accent);
  background:
    radial-gradient(90% 130% at 12% 0%, rgba(47, 224, 192, 0.10), transparent 62%),
    radial-gradient(70% 120% at 95% 100%, rgba(76, 141, 255, 0.10), transparent 60%),
    var(--panel);
}
.cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}
.cta__copy { max-width: 640px; }
.cta__copy .h2 { font-size: clamp(25px, 3vw, 36px); }
.cta__copy p { margin-top: 16px; }
.cta__acts { display: flex; gap: 12px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   18. Utility
   -------------------------------------------------------------------------- */
.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; }
.full { width: 100%; }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: var(--z-overlay);
  padding: 10px 18px;
  background: var(--teal);
  color: #04211c;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  transition: top var(--dur-1);
}
.skip:focus { top: 12px; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: flex; }
  .header__cta .btn--primary { display: none; }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__about { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats__item:nth-child(2n) { border-right: 0; }
  .stats__item:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; --header-h: 62px; }
  body { font-size: 15.5px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .brand__en { display: none; }
  .card { padding: 22px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .footer__bar { flex-direction: column; align-items: flex-start; }
  .spec__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .acc__body p { padding-right: 8px; }
  .cta__inner { flex-direction: column; align-items: flex-start; }
  .btn { padding: 11px 19px; }
}

@media (max-width: 420px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stats__item { border-right: 0; border-bottom: 1px solid var(--line); }
  .stats__item:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   20. Motion preferences & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
  .bar__fill { transition: none; }
}

@media print {
  .header, .drawer, .progress, .burger, .cta__acts, .marquee { display: none !important; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .section { padding-block: 20px; }
}