/* Generated from home-layout.css. */
body { margin: 0; background: var(--color-bg); color: var(--color-text); text-wrap: pretty;
    font-family: var(--font-body), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    opacity: 0; animation: __pageFadeIn .45s ease forwards; }
  /* 注意：这里不能出现 transform —— animation-fill-mode:forwards 会让它永久生效，
     使 body 成为 position:fixed 后代的包含块，点击放大的遮罩层会因此错位。 */
  @keyframes __pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
  .brand-logo { display: block; width: 180px; height: 38px; flex-shrink: 0; }
  .brand-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
  @media (max-width: 480px) { .nav .brand-logo { width: 140px; height: 30px; } }
  @media (prefers-reduced-motion: reduce) { body { animation: none; opacity: 1; } }
  h1, h2, h3, h4 { font-family: var(--font-heading), "PingFang SC", "Microsoft YaHei", sans-serif; }
  a { color: var(--color-accent-700); text-decoration: none; }
  a:hover { color: var(--color-accent-600); text-decoration: underline; }
  :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

  /* trilingual copy — one span per language, only the active one shows */
  [data-l] { display: none; }
  [data-l="zh"] { display: inline; }
  [data-lang="ru"] [data-l="zh"] { display: none; }
  [data-lang="ru"] [data-l="ru"] { display: inline; }
  [data-lang="en"] [data-l="zh"] { display: none; }
  [data-lang="en"] [data-l="en"] { display: inline; }

  /* pages */
  [data-page] { display: none; }
  [data-page="home"] { display: block; }
  [data-view] [data-page] { display: none; }
  [data-view="home"] [data-page="home"] { display: block; }
  [data-view="product"] [data-page="product"] { display: block; }
  [data-view="about"] [data-page="about"] { display: block; }
  [data-view="demo"] [data-page="demo"] { display: block; }
  [data-view="sol-h"] [data-page="sol-h"] { display: block; }
  [data-view="sol-s"] [data-page="sol-s"] { display: block; }
  [data-view="sol-p"] [data-page="sol-p"] { display: block; }
  [data-view="platform"] [data-page="platform"] { display: block; }
  [data-view="tut-pda"] [data-page="tut-pda"] { display: block; }
  [data-view="tut-admin"] [data-page="tut-admin"] { display: block; }
  [data-view="watch"] [data-page="watch"] { display: block; }


  /* nav state */
  [data-nav] { appearance: none; background: none; border: 0; font: inherit; font-size: 14px;
    letter-spacing: 0.02em; color: inherit; cursor: pointer; padding: 7px 0; white-space: nowrap; }
  [data-nav]:hover { color: var(--color-accent-600); }
  [data-view="home"] [data-nav="home"],

  [data-view="about"] [data-nav="about"],
  [data-view="demo"] [data-nav="demo"],
  [data-view="sol-h"] [data-nav="solution"], [data-view="sol-s"] [data-nav="solution"], [data-view="sol-p"] [data-nav="solution"], [data-view="platform"] [data-nav="solution"],
  [data-view="tut-pda"] [data-nav="help"], [data-view="tut-admin"] [data-nav="help"], [data-view="watch"] [data-nav="help"] { color: var(--color-accent-700); box-shadow: inset 0 -1px 0 var(--color-accent); }

  /* 窄屏主导航：汉堡键 + 左侧抽屉。两者默认隐藏，只在 860px 以下接管导航 */
  [data-burger] { display: none; appearance: none; padding: 0; cursor: pointer;
    width: 36px; height: 34px; align-items: center; justify-content: center;
    border: 1px solid var(--color-divider); background: none; color: var(--color-text); }
  [data-burger]:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
  [data-drawer-open] { display: none; }
  [data-drawer-open="1"] { display: block; }
  [data-drawer] [data-nav] { width: 100%; padding: 15px 0; font-size: 16px; text-align: left;
    border-bottom: 1px solid var(--color-divider); }
  [data-drawer] [data-dsub] { appearance: none; background: none; border: 0; cursor: pointer;
    font: inherit; font-size: 14px; color: color-mix(in srgb, var(--color-text) 72%, transparent);
    display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 11px 0 11px 14px;
    border-bottom: 1px solid var(--color-divider); text-align: left; }
  [data-drawer] [data-dsub] > i { font-style: normal; font: 600 11px/1 var(--font-heading), sans-serif;
    letter-spacing: .1em; color: var(--color-accent-700); }
  [data-drawer] [data-dsub]:hover { color: var(--color-accent-700); }
  [data-drawer-x] { appearance: none; border: 1px solid var(--color-divider); background: none;
    color: var(--color-text); font: 400 20px/1 var(--font-body); width: 32px; height: 32px; cursor: pointer; }
  /* solutions dropdown */
  [data-menu] { position: relative; display: inline-flex; }
  [data-submenu] { position: absolute; top: 100%; left: -18px; min-width: 268px; background: var(--color-bg);
    border: 1px solid var(--color-divider); box-shadow: var(--shadow-md); padding: 6px 0; z-index: 40;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s; }
  [data-menu]:hover [data-submenu], [data-menu]:focus-within [data-submenu] { opacity: 1; visibility: visible; transform: none; }
  [data-menu="faq"] [data-submenu] { min-width: 360px; }
  a[data-nav], a[data-subitem], a[data-dsub] { text-decoration: none; }
  [data-subitem] { appearance: none; background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
    display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 9px 18px; color: inherit; }
  [data-subitem]:hover { background: var(--color-accent-100); color: var(--color-accent-800); }
  [data-subitem] > i { font-style: normal; font: 600 11px/1.4 var(--font-heading), sans-serif; letter-spacing: .12em;
    color: var(--color-accent-700); min-width: 46px; }
  [data-subitem] > b { font-weight: 400; font-size: 14px; }
  [data-subitem] > s { text-decoration: none; margin-left: auto; font-size: 11px; letter-spacing: .06em;
    color: color-mix(in srgb, var(--color-text) 45%, transparent); }


  /* 视频教程：系列色（PDA 暖 / 云平台冷，与片子一致）、系列卡、每期卡 */
  [data-series] { --s-ink: var(--color-accent-700); --s-tint: var(--color-accent-100); }
  [data-series="pda"] { --s-ink: #9A7A5E; --s-tint: #EFEBE4; }
  [data-series="admin"] { --s-ink: #5F7C95; --s-tint: #E8ECEF; }
  [data-facts] { border-collapse: collapse; font-size: 13px; line-height: 1.5; }
  [data-facts] td { padding: 6px 0; vertical-align: top; border-top: 1px solid var(--color-divider); }
  [data-facts] td:first-child { width: 5em; padding-right: 12px; white-space: nowrap; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
  [data-meta] { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
  [data-chip] { display: inline-block; padding: 5px 11px; font-size: 12px; letter-spacing: .04em; line-height: 1.3;
    color: var(--s-ink); border: 1px solid color-mix(in srgb, var(--s-ink) 45%, transparent); background: var(--s-tint); }
  [data-back] { appearance: none; background: none; border: 0; padding: 0; margin-bottom: 18px; cursor: pointer;
    font: 600 13px/12px var(--font-heading), sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-300); }
  [data-back]:hover { color: #f2f2f3; }
  [data-ep] { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
  [data-ep] figure { margin: 0; position: relative; aspect-ratio: 16 / 9; background: var(--s-tint); }
  [data-ep] figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
  [data-dur] { position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; font-size: 12px; line-height: 1.2;
    letter-spacing: .04em; color: #f2f2f3; background: rgba(29,45,61,.78); }
  [data-ep] > div { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
  [data-ep] [data-idx] { color: var(--s-ink); margin-bottom: 2px; }
  [data-ep] h3 { font-size: 18px; line-height: 1.3; margin: 0; }
  [data-ep] [data-who] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .04em; color: var(--s-ink); }
  [data-ep] [data-who]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--s-ink); }
  [data-ep] p { font-size: 14px; line-height: 1.65; margin: 2px 0 0; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
  /* B 站链接还没填（href 为空）时：按钮置灰、不可点，文案换成「链接整理中」 */
  [data-watch][href=""] { pointer-events: none; opacity: .45; }
  [data-watch] [data-soon] { display: none; }
  [data-watch][href=""] [data-ready] { display: none; }
  [data-watch][href=""] [data-soon] { display: inline; }
  .watch-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: start; }
  .watch-player { aspect-ratio: 16 / 9; background: #101820; }
  .watch-player iframe { display: block; width: 100%; height: 100%; border: 0; }
  .guide-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 48px; }
  .guide-link { display: block; padding: 20px; border: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-text); transition: border-color .2s, box-shadow .2s; }
  .guide-link:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); text-decoration: none; }
  .guide-link[aria-current="page"] { border-color: var(--color-accent); background: var(--color-accent-100); }
  .guide-link img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 16px; }
  .guide-link h3 { font-size: 21px; line-height: 1.3; margin: 10px 0; }
  .guide-link p { font-size: 14px; line-height: 1.7; color: color-mix(in srgb, var(--color-text) 75%, transparent); margin: 0 0 16px; }
  .guide-link-action { font-size: 14px; color: var(--color-accent-700); }
  .home-video-meta { font-size: 12px; letter-spacing: .04em; color: var(--color-accent-700); }
  @media (max-width: 860px) { .guide-links { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 1180px) {
    [data-navlinks], [data-navcta] { display: none !important; }
    [data-burger] { display: inline-flex; }
    .nav > .seg { margin-left: auto !important; }
  }
  .watch-list { display: flex; flex-direction: column; gap: 8px; }
  .watch-item { display: flex; align-items: baseline; gap: 12px; padding: 12px 14px; border: 1px solid var(--color-divider); color: var(--color-text); font-size: 14px; line-height: 1.5; }
  .watch-item[aria-current="page"] { background: var(--color-accent-100); border-color: var(--color-accent); color: var(--color-accent-700); }
  .watch-item small { margin-left: auto; white-space: nowrap; opacity: .7; }
  .tutorial-entry { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 28px; padding: 18px; background: #f2f2f3; color: #1d2d3d; border-top: 3px solid var(--s-ink); }
  .tutorial-entry img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
  .tutorial-entry h2 { margin: 0 0 8px; font-size: 20px; line-height: 1.35; }
  .tutorial-entry p { margin: 0; font-size: 13px; line-height: 1.6; color: #516170; }
  .tutorial-entry-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
  .tutorial-entry-actions .btn { min-height: 40px; padding-inline: 16px; font-size: 14px; }
  .tutorial-entry-actions > a:not(.btn) { color: #385c7e; font-size: 14px; }
  @media (max-width: 480px) { .tutorial-entry { grid-template-columns: 96px minmax(0, 1fr); padding: 14px; gap: 14px; } .tutorial-entry h2 { font-size: 18px; } }
  @media (max-width: 1080px) { .watch-layout { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 1080px) { [data-eps] { grid-template-columns: repeat(2, 1fr) !important; } }
  @media (max-width: 860px) { [data-eps] { grid-template-columns: 1fr !important; } }
  /* language switch */
  [data-langbtn] { appearance: none; border: 0; font: inherit; font-size: 12px; letter-spacing: 0.06em;
    cursor: pointer; padding: 6px 10px; background: none; color: inherit; }
  [data-langbtn="zh"] { background: var(--color-accent); color: var(--color-bg); }
  [data-langbtn] + [data-langbtn] { border-left: 1px solid var(--color-divider); }
  [data-lang] [data-langbtn] { background: none; color: inherit; }
  [data-lang="zh"] [data-langbtn="zh"], [data-lang="ru"] [data-langbtn="ru"],
  [data-lang="en"] [data-langbtn="en"] { background: var(--color-accent); color: var(--color-bg); }


  /* scroll reveal — only armed once the script runs */
  [data-rev-on] [data-rev]:not([data-in]) { opacity: 0; transform: translateY(10px); }
  [data-rev] { transition: opacity .55s ease, transform .55s ease; }
  @media (prefers-reduced-motion: reduce) { [data-rev-on] [data-rev]:not([data-in]) { opacity: 1; transform: none; } }

  /* lightbox */
  [data-lb-open] { display: none; }
  [data-lb-open="1"] { display: flex; }
  [data-cmp-open] { display: none; }
  [data-cmp-open="1"] { display: flex; }

  /* form sent */
  [data-sent="1"] [data-form-body] { display: none; }
  [data-form-ok] { display: none; }
  [data-sent="1"] [data-form-ok] { display: block; }
  [data-sending="1"] [data-form-body] button[type="submit"] { opacity: .6; pointer-events: none; }
  [data-form-error] { display: none; }
  [data-error="1"] [data-form-error] { display: block; }

  /* hero motion — the drawing assembles itself, then the reader scans it */
  @keyframes drawIn { from { stroke-dashoffset: var(--dash, 400); } to { stroke-dashoffset: 0; } }
  @keyframes beam { 0% { transform: translateY(0); opacity: 0; }
    8% { opacity: 1; } 92% { opacity: 1; }
    100% { transform: translateY(300px); opacity: 0; } }
  @keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
  @keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  #hero-draw [data-draw] { stroke-dasharray: var(--dash, 400); animation: drawIn 1.1s cubic-bezier(.2,.7,.3,1) both; }
  #hero-draw [data-beam] { animation: beam 3.6s cubic-bezier(.55,0,.45,1) 1s infinite; }
  #hero-draw [data-blink] { animation: blink 2.4s ease-in-out 1.4s infinite; }
  [data-hero-rise] { animation: riseIn .7s cubic-bezier(.2,.7,.3,1) both; }
  @media (prefers-reduced-motion: reduce) {
    #hero-draw [data-draw], #hero-draw [data-beam], #hero-draw [data-blink], [data-hero-rise] { animation: none; stroke-dashoffset: 0; }
  }
  /* solution hero motion — every blueprint acts out its own line:
     PDA 扣扳机扫码 / 相机一次成像 / 产线运转与喷码，都按同一节拍循环 */
  @keyframes solRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes solBlip { 0% { opacity: 0 } 4% { opacity: 1 } 13% { opacity: 1 } 20%, 100% { opacity: 0 } }
  @keyframes solHold { 0% { opacity: 0 } 4% { opacity: var(--lit, .34) } 84% { opacity: var(--lit, .34) } 94%, 100% { opacity: 0 } }
  @keyframes solSweep { 0% { opacity: 0; transform: translateY(0) }
    4% { opacity: .9 }
    24% { opacity: .9; transform: translateY(var(--sweep, 50px)) }
    28%, 100% { opacity: 0; transform: translateY(var(--sweep, 50px)) } }
  @keyframes solMarch { to { stroke-dashoffset: -24 } }
  @keyframes solWipe { 0% { transform: translateX(-112px); opacity: 1 }
    18% { transform: translateX(0); opacity: 1 }
    24%, 100% { transform: translateX(0); opacity: 0 } }
  @keyframes solAlarm { 0%, 44% { opacity: 0 } 48% { opacity: 1 } 55% { opacity: .25 } 62% { opacity: 1 }
    69% { opacity: .25 } 76% { opacity: 1 } 88%, 100% { opacity: 0 } }
  @keyframes solBelt { from { transform: translateX(0) } to { transform: translateX(90px) } }
  [data-sol-svg] [data-sol] { animation-duration: var(--cyc, 4.4s); animation-timing-function: linear;
    animation-iteration-count: infinite; animation-delay: var(--d, 0s); animation-fill-mode: both; }
  [data-sol-svg] [data-sol="blip"] { animation-name: solBlip; }
  [data-sol-svg] [data-sol="hold"] { animation-name: solHold; }
  [data-sol-svg] [data-sol="sweep"] { animation-name: solSweep; }
  [data-sol-svg] [data-sol="wipe"] { animation-name: solWipe; }
  [data-sol-svg] [data-sol="march"] { animation-name: solMarch; animation-duration: 1.1s; animation-delay: 0s; }
  [data-sol-svg] [data-sol="alarm"] { animation-name: solAlarm; }
  [data-sol-svg] [data-sol="belt"] { animation-name: solBelt; animation-duration: var(--cyc, 3s); }
  [data-sol-svg] [data-solstep] { animation: solRise .6s cubic-bezier(.2,.7,.3,1) both; animation-delay: var(--rd, 0s); }
  @media (prefers-reduced-motion: reduce) {
    [data-sol-svg] [data-sol], [data-sol-svg] [data-solstep] { animation: none; }
  }
  /* inverted actions on the steel field */
  [data-btn="paper"] { background: var(--color-bg); color: var(--color-accent-900); border-color: var(--color-bg); }
  [data-btn="paper"]:hover { background: var(--color-accent-100); border-color: var(--color-accent-100); }
  [data-btn="wire"] { color: var(--color-bg); border-color: color-mix(in srgb, #f2f2f3 45%, transparent); }
  [data-btn="wire"]:hover { background: color-mix(in srgb, #f2f2f3 12%, transparent); border-color: var(--color-bg); }
  /* framed objects answer the pointer */
  [data-page] .blueprint { transition: border-color .25s ease; }
  [data-page] .blueprint:hover { border-color: color-mix(in srgb, var(--color-accent) 65%, transparent); }
  /* the steel band — framed objects and copy reverse onto the field */
  [data-band="steel"] .blueprint { border-color: color-mix(in srgb, #f2f2f3 30%, transparent); }
  [data-band="steel"] .blueprint > .corner { color: color-mix(in srgb, #f2f2f3 55%, transparent); }
  [data-band="steel"] .blueprint:hover { border-color: color-mix(in srgb, #f2f2f3 72%, transparent); }
  [data-band="steel"] p { color: color-mix(in srgb, #f2f2f3 76%, transparent) !important; }
  [data-band="steel"] .tutorial-entry p { color: #516170 !important; }
  [data-band="steel"] .tag-outline { border-color: var(--color-accent-300); color: var(--color-accent-300); }
  [data-band="steel"] .tag-accent { background: var(--color-accent-200); color: var(--color-accent-900); }
  [data-band="steel"] .btn-secondary { border-color: color-mix(in srgb, #f2f2f3 40%, transparent); color: var(--color-bg); }
  [data-band="steel"] .btn-secondary:hover { background: color-mix(in srgb, #f2f2f3 10%, transparent); }

  /* 03b — 选型对照表：默认高亮 POP·H 列，鼠标悬停到别的方案列时切换过去；
     各列之间任何时候都有一条分隔线，不必等悬停才看出边界。 */
  [data-cmp="1"] th[data-col], [data-cmp="1"] td[data-col] {
    border-left: 1px solid var(--color-divider);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
  }
  [data-cmp="1"] [data-hcol="1"], [data-cmp="1"]:has([data-col="2"]:hover) [data-hcol="2"],
  [data-cmp="1"]:has([data-col="3"]:hover) [data-hcol="3"] {
    background: color-mix(in srgb, var(--color-accent) 7%, transparent);
    border-left-color: var(--color-accent); border-right: 1px solid var(--color-accent);
  }
  [data-cmp="1"] thead [data-hcol="1"], [data-cmp="1"]:has([data-col="2"]:hover) thead [data-hcol="2"],
  [data-cmp="1"]:has([data-col="3"]:hover) thead [data-hcol="3"] {
    background: var(--color-accent-900); color: var(--color-bg); border-top: 2px solid var(--color-accent);
  }
  [data-cmp="1"] tbody tr:last-child [data-hcol="1"], [data-cmp="1"]:has([data-col="2"]:hover) tbody tr:last-child [data-hcol="2"],
  [data-cmp="1"]:has([data-col="3"]:hover) tbody tr:last-child [data-hcol="3"] {
    border-bottom: 2px solid var(--color-accent);
  }
  [data-cmp="1"] tfoot [data-hcol="1"], [data-cmp="1"]:has([data-col="2"]:hover) tfoot [data-hcol="2"],
  [data-cmp="1"]:has([data-col="3"]:hover) tfoot [data-hcol="3"] {
    border-top-color: var(--color-accent); border-bottom: 2px solid var(--color-accent);
  }
  [data-cmp="1"] tfoot [data-hcol="1"] button, [data-cmp="1"]:has([data-col="2"]:hover) tfoot [data-hcol="2"] button,
  [data-cmp="1"]:has([data-col="3"]:hover) tfoot [data-hcol="3"] button {
    background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent);
  }
  /* POP·H 列在别的列被悬停时退回普通样式（button 除外，见上面已单独处理其它列） */
  [data-cmp="1"]:has([data-col="2"]:hover, [data-col="3"]:hover) [data-hcol="1"]:not(tfoot *) {
    background: none; border-left-color: var(--color-divider); border-right-color: var(--color-divider);
    border-top-color: transparent; color: color-mix(in srgb, var(--color-text) 60%, transparent);
  }
  [data-cmp="1"]:has([data-col="2"]:hover, [data-col="3"]:hover) tbody tr:last-child [data-hcol="1"] {
    border-bottom-color: var(--color-divider);
  }
  [data-cmp="1"]:has([data-col="2"]:hover, [data-col="3"]:hover) tfoot [data-hcol="1"] {
    border-top-color: var(--color-divider); border-bottom-color: var(--color-divider); background: none;
  }
  [data-cmp="1"]:has([data-col="2"]:hover, [data-col="3"]:hover) tfoot [data-hcol="1"] button {
    background: none; color: var(--color-text); border-color: var(--color-divider);
  }
  @media (hover: none) {
    /* 触屏没有真正的 hover：始终显示默认高亮，不做切换 */
    [data-cmp="1"] [data-hcol="1"] { background: color-mix(in srgb, var(--color-accent) 7%, transparent) !important;
      border-left-color: var(--color-accent) !important; border-right-color: var(--color-accent) !important; }
    /* thead 那格的深底被上面压成了浅色，白字必须一并改回深色，否则表头不可读 */
    [data-cmp="1"] thead [data-hcol="1"] { color: var(--color-text) !important; }
  }

  /* 06 — the scroll-driven screen sequence: the machine docks right, the copy and the screen swap */
  [data-sticky] { position: sticky; top: 57px; height: calc(100vh - 57px); min-height: min(540px, calc(100vh - 57px));
    display: grid; align-items: center; }
  [data-laptop] { transition: transform .85s cubic-bezier(.2,.7,.3,1); will-change: transform; }
  [data-shot-col] { transition: opacity .5s ease, transform .5s ease; }
  [data-stage0] { transition: opacity .4s ease; }
  [data-stage="0"] [data-laptop] { transform: translateX(-33%) scale(1.42); }
  /* 矮窗口收一档，避免初始态被 sticky 视口高度裁掉 */
  @media (max-height: 900px) { [data-stage="0"] [data-laptop] { transform: translateX(-33%) scale(1.24); } }
  [data-stage="0"] [data-shot-col] { opacity: 0; transform: translateY(12px); }
  [data-stage="1"] [data-stage0] { opacity: 0; }
  [data-screen] { position: absolute; inset: 0; opacity: 0; transition: opacity .55s ease; }
  [data-screen="1"] { opacity: 1; }
  [data-shot] [data-screen] { opacity: 0; }
  [data-shot="1"] [data-screen="1"], [data-shot="2"] [data-screen="2"],
  [data-shot="3"] [data-screen="3"], [data-shot="4"] [data-screen="4"],
  [data-shot="5"] [data-screen="5"], [data-shot="6"] [data-screen="6"] { opacity: 1; }
  [data-shot-text] { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
  [data-shot-text="1"] { opacity: 1; transform: none; pointer-events: auto; }
  [data-shot] [data-shot-text] { opacity: 0; transform: translateY(14px); pointer-events: none; }
  [data-shot="1"] [data-shot-text="1"], [data-shot="2"] [data-shot-text="2"],
  [data-shot="3"] [data-shot-text="3"], [data-shot="4"] [data-shot-text="4"],
  [data-shot="5"] [data-shot-text="5"], [data-shot="6"] [data-shot-text="6"] { opacity: 1; transform: none; pointer-events: auto; }
  [data-tick] { appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
    display: flex; align-items: center; gap: 10px; font: inherit; font-size: 13px; color: inherit;
    white-space: nowrap; opacity: .45; transition: opacity .3s ease; }
  [data-tick]:hover { opacity: .8; }
  [data-tick] > i { display: block; width: 26px; height: 2px; background: currentColor; transition: width .35s ease; }
  [data-tick="1"] { opacity: 1; }
  [data-tick="1"] > i { width: 52px; }
  [data-shot] [data-tick] { opacity: .45; }
  [data-shot] [data-tick] > i { width: 26px; }
  [data-shot="1"] [data-tick="1"], [data-shot="2"] [data-tick="2"],
  [data-shot="3"] [data-tick="3"], [data-shot="4"] [data-tick="4"],
  [data-shot="5"] [data-tick="5"], [data-shot="6"] [data-tick="6"] { opacity: 1; }
  [data-shot="1"] [data-tick="1"] > i, [data-shot="2"] [data-tick="2"] > i,
  [data-shot="3"] [data-tick="3"] > i, [data-shot="4"] [data-tick="4"] > i,
  [data-shot="5"] [data-tick="5"] > i, [data-shot="6"] [data-tick="6"] > i { width: 52px; }
  /* 06b — 屏幕序列外的 MacBook 外壳：上盖 + 摄像头 + 底座 */
  [data-mac] { position: relative; padding: 11px 11px 13px; border-radius: 15px 15px 5px 5px;
    background: linear-gradient(174deg, var(--color-neutral-700), var(--color-neutral-900) 58%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #f2f2f3 26%, transparent),
      0 24px 46px -22px color-mix(in srgb, var(--color-text) 62%, transparent);
    transition: box-shadow .3s ease; }
  [data-mac]:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, #f2f2f3 34%, transparent),
      0 30px 56px -20px color-mix(in srgb, var(--color-text) 72%, transparent); }
  [data-mac-cam] { position: absolute; top: 4px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px;
    border-radius: 50%; background: color-mix(in srgb, #f2f2f3 22%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #1d1f20 55%, transparent); }
  [data-mac-screen] { appearance: none; border: 0; padding: 0; display: block; width: 100%;
    background: var(--color-neutral-900); border-radius: 4px; overflow: hidden; cursor: zoom-in; }
  [data-mac-base] { display: block; position: relative; width: 118%; height: 15px; margin-left: -9%;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(180deg, var(--color-neutral-600), var(--color-neutral-800) 78%);
    box-shadow: 0 14px 22px -14px color-mix(in srgb, var(--color-text) 55%, transparent); }
  [data-mac-base]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: color-mix(in srgb, #1d1f20 45%, transparent); }
  [data-mac-base]::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 15%; height: 6px;
    margin-left: -7.5%; border-radius: 6px 6px 0 0;
    background: color-mix(in srgb, #1d1f20 40%, transparent); }
  /* 06b — 两台设备叠在同一格里，按镜头号交叉淡出淡入 */
  [data-devstack] { display: grid; }
  [data-devstack] > * { grid-area: 1 / 1; }
  [data-dev] { transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1), filter .6s ease;
    will-change: transform, opacity; }
  [data-dev="pda"] { opacity: 0; transform: translateY(30px) scale(.9); pointer-events: none;
    justify-self: center; width: clamp(170px, 42%, 250px); }
  [data-shot="2"] [data-dev="pda"], [data-shot="3"] [data-dev="pda"] {
    opacity: 1; transform: none; pointer-events: auto; }
  [data-shot="2"] [data-dev="mac"], [data-shot="3"] [data-dev="mac"] {
    opacity: 0; transform: translateY(-24px) scale(.94); filter: blur(3px); pointer-events: none; }

  /* PDA 外壳：车间在用的东集 AUTOID 工业 PDA 实拍图（已去背）。
     屏幕区域由程序测出：left 11.852% / top 10.236% / w 74.444% / h 52.362%。
     截图比例 480:696 比屏幕框 402:665 更宽，因此按宽度贴齐顶部，
     下方留白用截图自身的背景色 #f4f7fb 补足，视觉上像屏幕内容自然延续。 */
  [data-pda] { position: relative; display: block;
    filter: drop-shadow(0 26px 38px color-mix(in srgb, var(--color-text) 45%, transparent)); }
  [data-pda-frame] { display: block; width: 100%; height: auto; position: relative; z-index: 1;
    pointer-events: none; }
  [data-pda-screen] { appearance: none; border: 0; padding: 0; margin: 0; cursor: zoom-in;
    position: absolute; z-index: 2; overflow: hidden; background: #f4f7fb;
    left: 11.852%; top: 10.236%; width: 74.444%; height: 52.362%; }

  @media (max-width: 860px) {
    [data-stage="0"] [data-laptop] { transform: none; }
    [data-stage="0"] [data-shot-col] { opacity: 1; transform: none; }
  }
  /* solution cards */
  [data-customer-grid] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  [data-customer-grid] > a { display: flex; flex-direction: column; min-width: 0; padding: 26px; color: var(--color-text); text-decoration: none; }
  [data-customer-grid] h3 { font-size: 21px; line-height: 1.4; margin: 14px 0 8px; }
  [data-customer-grid] p { line-height: 1.8; font-size: 15px; margin: 0 0 20px; }
  [data-customer-grid] .customer-number { font-size: 22px; color: var(--color-accent-600); }
  [data-customer-grid] .customer-more { margin-top: auto; font-size: 14px; line-height: 1.6; color: var(--color-accent-600); }
  [data-customer-grid] > a:hover, [data-customer-grid] > a:focus-visible { border-color: var(--color-accent-600); }
  @media (max-width: 860px) { [data-customer-grid] { grid-template-columns: minmax(0, 1fr); } }
  [data-product-grid] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
  [data-product-grid] > [data-sol] { min-width: 0; overflow-wrap: anywhere; }
  [data-product-grid] > [data-sol] > svg { height: 112px !important; flex-shrink: 0; }
  @media (max-width: 1080px) { [data-product-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 600px) { [data-product-grid] { grid-template-columns: minmax(0, 1fr); } }
  [data-sol="1"] { appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
    display: flex; flex-direction: column; padding: 20px; background: none; }
  [data-sol="1"]:hover { border-color: color-mix(in srgb, #f2f2f3 75%, transparent); }
  [data-solmore] { display: block; margin-top: auto; padding-top: 18px; font: 600 13px/1 var(--font-heading), sans-serif;
    letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-200); }
  [data-sol="1"]:hover [data-solmore] { color: #f2f2f3; }
  /* reading progress */
  #scroll-bar { width: var(--scroll-pct, 0%); }
  .shots { scrollbar-width: thin; }
  @media (min-width: 1080px) { [data-hero-split] { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) !important; } }
  /* 深色带：整段反相，靠重绑 design token 让段内所有 var() 自动跟着走 */
  [data-invert] { background: var(--color-accent-900); color: var(--color-bg);
    --color-text: #f2f2f3;
    --color-divider: color-mix(in srgb, #f2f2f3 22%, transparent);
    --color-accent: var(--color-accent-300);
    --color-accent-100: color-mix(in srgb, #f2f2f3 10%, transparent);
    --color-accent-400: color-mix(in srgb, #f2f2f3 48%, transparent);
    --color-accent-700: var(--color-accent-300);
    --color-accent-800: #f2f2f3; }
  /* 三行标题：俄文/英文比中文长得多，单独定字号与行宽，保持和中文一样的 3 行 */
  [data-lang="ru"] [data-hero-h1] { font-size: clamp(16px, 2.2vw, 25px) !important; max-width: none !important; }
  [data-lang="en"] [data-hero-h1] { font-size: clamp(24px, 3.4vw, 48px) !important; max-width: none !important; }
  /* 规格表：细线分隔的能力网格，替代成排的描线卡片 */
  [data-spec] { display: grid; gap: 0; border-top: 1px solid var(--color-divider); }
  [data-spec] > * { padding: 22px clamp(14px,1.6vw,26px) 26px; border-bottom: 1px solid var(--color-divider); }
  [data-spec="4"] { grid-template-columns: repeat(4, 1fr); }
  [data-spec="3"] { grid-template-columns: repeat(3, 1fr); }
  [data-spec="2"] { grid-template-columns: repeat(2, 1fr); }
  [data-spec="4"] > *:not(:nth-child(4n+1)), [data-spec="3"] > *:not(:nth-child(3n+1)),
  [data-spec="2"] > *:not(:nth-child(2n+1)) { border-left: 1px solid var(--color-divider); }
  [data-spec="4"] > *:nth-child(4n+1), [data-spec="3"] > *:nth-child(3n+1),
  [data-spec="2"] > *:nth-child(2n+1) { padding-left: 0; }
  /* 流程轨道：编号步骤连成一条线，节点用底色挖断细线 */
  [data-track] { display: grid; column-gap: 0; row-gap: 34px; }
  [data-track="6"] { grid-template-columns: repeat(6, 1fr); }
  [data-track="4"] { grid-template-columns: repeat(4, 1fr); }
  [data-track] > * { position: relative; padding: 28px clamp(14px,1.8vw,30px) 0 0; }
  [data-track] > *::before { content: ""; position: absolute; left: 0; right: 0; top: 0;
    height: 1px; background: var(--color-divider); }
  [data-track] > *::after { content: ""; position: absolute; left: 0; top: -4px;
    width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent-700);
    box-shadow: 0 0 0 5px var(--color-bg); }
  /* 两种版式共用的序号 */
  [data-idx] { display: block; font: 600 12px/1 var(--font-body); letter-spacing: .14em;
    color: var(--color-accent-700); margin-bottom: 12px; }
  @media (max-width: 1080px) {
    [data-spec="4"], [data-spec="3"] { grid-template-columns: repeat(2, 1fr); }
    [data-track="6"] { grid-template-columns: repeat(3, 1fr); }
    [data-spec="4"] > *, [data-spec="3"] > * { border-left: 1px solid var(--color-divider);
      padding-left: clamp(14px,1.6vw,26px); }
    [data-spec="4"] > *:nth-child(2n+1), [data-spec="3"] > *:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  }
  @media (max-width: 860px) {
    [data-spec] { grid-template-columns: 1fr !important; }
    [data-spec] > * { border-left: 0 !important; padding-left: 0 !important; }
    [data-track] { grid-template-columns: 1fr !important; }
    [data-track] > * { padding-right: 0; padding-bottom: 24px; }
  }
  /* 产品概览 01 —— 四步转码流程：内容格与箭头交替占列，窄屏收成两列并撤掉箭头 */
  [data-flow] { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    column-gap: clamp(6px,1vw,16px); }
  [data-flow] > i { align-self: start; margin-top: 30px; font-style: normal; line-height: 0;
    color: color-mix(in srgb, var(--color-accent) 65%, transparent); }
  /* 产品概览 02 —— 三层级：层级名 / 图示 / 说明三列；连接线自成一行，只占中间列，
     因此层级行与连接行必须共用同一套列宽 */
  [data-level], [data-link] { display: grid;
    grid-template-columns: minmax(0,150px) minmax(0,1.15fr) minmax(0,1.25fr);
    column-gap: clamp(16px,2.4vw,40px); align-items: center; }
  [data-link] > * { grid-column: 2; }
  @media (max-width: 1080px) { [data-cells] { grid-template-columns: repeat(2, 1fr) !important; }
    [data-strip] > div { padding: 18px !important; }
    [data-flow] { grid-template-columns: 1fr 1fr; row-gap: 30px; }
    [data-flow] > i { display: none; } }
  @media (max-width: 860px) { [data-cells] { grid-template-columns: 1fr !important; }
    [data-photos] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      grid-template-rows: repeat(3, 150px) !important; }
    [data-photos] > figure:first-child { grid-column: span 2 !important; grid-row: span 1 !important; }
    [data-split] { grid-template-columns: 1fr !important; }
    [data-flow] { grid-template-columns: 1fr !important; }
    [data-level] { grid-template-columns: 1fr !important; row-gap: 10px; text-align: left; }
    [data-link] { display: none !important; }
    /* 横排导航与「预约演示」在窄屏放不下，交给汉堡抽屉（抽屉里两者都在） */
    [data-navlinks] { display: none !important; }
    [data-navcta] { display: none !important; }
    [data-burger] { display: inline-flex; }
    /* 01 转码流程：窄屏单列后四步之间的留白按桌面版走会拉出一屏多的空档，整体收紧 */
    [data-sec="flow"] [data-split] { gap: 16px !important; }
    [data-sec="flow"] hr { margin-bottom: 20px !important; }
    [data-flow] { row-gap: 16px !important; }
    [data-flow] > div > div:first-child { height: 44px !important; }
    [data-flow] > div > h3 { margin-top: 10px !important; }
    [data-flow] > div > div:nth-of-type(2) { margin-top: 8px !important; }
    [data-flow] > div > p { margin-top: 8px !important; }
    /* 03 滚动剧场：窄屏内容远矮于 100vh，居中会在上下各留一大块空白，改为贴顶按内容高 */
    [data-sticky] { height: auto !important; min-height: 0 !important; align-items: start !important; }
    /* 两台设备叠在同一格，格高按更高的 PDA 算；窄屏 mac 当主角时下方就空出一大截。
       把 PDA 脱出文档流(仍靠 margin 居中，不动 transform，交叉淡入淡出照旧)，格高只跟随当前 mac */
    [data-devstack] { position: relative; }
    [data-dev="pda"] { position: absolute; top: 0; left: 0; right: 0; margin-inline: auto; } }
  /* 采集机台 slider：两张实拍图同尺寸裁切、交叉淡入淡出 */
  [data-solsslide] figure[data-solsimg] { opacity: 0; transition: opacity .5s ease; }
  [data-solsslide="0"] figure[data-solsimg="0"] { opacity: 1; }
  [data-solsslide="1"] figure[data-solsimg="1"] { opacity: 1; }
  [data-solsdot] { appearance: none; border: 1px solid color-mix(in srgb, #fff 55%, transparent); background: color-mix(in srgb, #000 25%, transparent); padding: 0; width: 8px; height: 8px; border-radius: 999px; cursor: pointer; transition: width .25s ease, background .25s ease; }
  [data-solsslide="0"] [data-solsdot="0"], [data-solsslide="1"] [data-solsdot="1"] { width: 22px; border-radius: 4px; background: #fff; }