/* ==========================================================================
   main.css — 版面與元件
   --------------------------------------------------------------------------
   風格：Technical Dossier。規範見 DESIGN.md。
   閱讀順序：重置 → 排版 → 版面 → 動態 → 元件 → 響應式
   ========================================================================== */

/* ==========================================================================
   1. 重置
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 錨點捲動時不要被浮動導覽列蓋住 */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--w-normal);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;   /* 數字對齊，避免跳動 */
  overflow-x: hidden;                   /* 保險：任何情況都不橫向捲動 */
}

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

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

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

/* 焦點環 —— 只在鍵盤操作時出現，滑鼠點擊不顯示 */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}
:focus:not(:focus-visible) { outline: none; }

/* 螢幕閱讀器專用文字 */
.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;
}

/* 跳到主要內容 —— 鍵盤使用者按 Tab 第一個看到的東西 */
.skip-link {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  z-index: var(--z-overlay);
  padding: var(--space-12) var(--space-24);
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }


/* ==========================================================================
   2. 排版
   ========================================================================== */

/* --- 大標題 --------------------------------------------------------------
   這是規格書的封面標題：字重 500、字距收緊、行高 1.04。
   收緊的字距讓大字形成一個緊密的排版塊，而不是散開的一行字。 */
.display {
  font-size: var(--text-display);
  font-weight: var(--w-medium);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: pretty;
}

.heading {
  font-size: var(--text-heading);
  font-weight: var(--w-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: pretty;
}

.subheading {
  font-size: var(--text-subheading);
  font-weight: var(--w-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
}

.lede {
  font-size: var(--text-lede);
  line-height: 1.6;
  color: var(--ink-secondary);
  max-width: var(--measure-en);
}

.body-sm { font-size: var(--text-body-sm); line-height: 1.6; }
.muted   { color: var(--ink-secondary); }
.faint   { color: var(--ink-faint); }

/* 中文標題的斷行控制 ——
   ch 是數字 0 的寬度，對中文完全不準；中文一律用 em（1em ≈ 一個中文字）。
   也不能用 text-wrap: balance，實測它會為了讓每行等長而硬拆詞。 */
:lang(zh-Hant-TW) .display,
:lang(zh-Hant-TW) .heading,
:lang(zh-Hant-TW) .subheading {
  word-break: auto-phrase;
  text-wrap: initial;
  letter-spacing: 0.01em;   /* 中文不需要負字距，反而要一點呼吸 */
}
:lang(zh-Hant-TW) .measure { max-width: var(--measure-zh); }

.measure    { max-width: var(--measure-en); }
.measure-sm { max-width: 46ch; }
:lang(zh-Hant-TW) .measure-sm { max-width: 22em; }

/* 中文沒有空格，瀏覽器可以在任何一個字之間斷行 —— 大標題常因此斷在詞中間，
   例如「端到端」被拆成「端到／端」。app.js 的 clauses() 會把逗號分隔的
   每個子句包進這個 class，斷行就只發生在逗號處。
   子句本身都很短（十來個字），不會撐破版面。 */
.nb { white-space: nowrap; }

/* --- 等寬資料 ------------------------------------------------------------
   年份、國別、規格、統編、編號 —— 全部走這個。
   這是整個設計「技術感」的來源，不是裝飾。 */
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--w-normal);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-variant-numeric: tabular-nums;
}

/* --- 區段標籤（招牌元件）-------------------------------------------------
   等寬、全大寫、前面一條 24px 的銅色短線。
   短線用 ::before 畫，進場時會從 0 展開到 24px。 */
/* 這個 class 可能掛在 <p>，也可能掛在 <h2>/<h3>（當它實際上在開啟段落時）。
   所以字級、字重、margin 都要自己指定，不能靠標籤的預設值。 */
.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ink-faint);
  margin: 0 0 var(--space-24);
}
.section-label::before {
  content: '';
  flex: none;
  width: 24px;
  height: 1px;
  background: var(--signal);
  transform-origin: left center;
}

/* 索引編號 —— 01 / 06。讓整個網站讀起來像一份有編號的文件。 */
.index-num {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--ls-mono);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.index-num b { font-weight: var(--w-medium); color: var(--signal); }

/* 行內連結 —— 底線用 background 畫，hover 時從左展開 */
.link {
  color: inherit;
  background-image: linear-gradient(var(--signal), var(--signal));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.link:hover { color: var(--signal); background-size: 100% 2px; }


/* ==========================================================================
   3. 版面
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.section--flush-top    { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* 深色區段 —— 套用 .on-ink 讓內部代幣自動翻轉 */
.section--ink {
  background: var(--ink-surface);
  color: var(--ink);
}
.section--sunken { background: var(--surface-sunken); }

/* --- 製圖網格（招牌）-----------------------------------------------------
   頁面底色上一層極淡的座標網格，像工程製圖紙。
   用 background-image 畫，沒有任何 DOM 節點，成本是零。
   fixed 讓它在捲動時保持靜止 —— 內容浮在圖紙上移動。 */
.draft-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(22, 24, 28, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22, 24, 28, 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  /* 邊緣淡出，避免網格看起來像表格 */
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 30%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 100% 80% at 50% 30%, #000 30%, transparent 100%);
}

/* --- 髮絲分隔線 ----------------------------------------------------------
   區段之間的分隔。進場時從左邊畫出來（scaleX 0 → 1）。 */
.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
  transform-origin: left center;
}

/* 帶座標標記的分隔線 —— 像製圖的圖框標註 */
.rule-marked {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding-block: var(--space-16);
}
.rule-marked__line {
  flex: 1;
  height: 1px;
  background: var(--rule);
  transform-origin: left center;
}

/* --- 兩欄分割 ------------------------------------------------------------
   左文右圖／左圖右文。手機自動堆疊。 */
.split {
  display: grid;
  gap: var(--space-48);
  align-items: start;
}
.split--text-right > :first-child { order: 2; }

/* --- 一般格線 ------------------------------------------------------------ */
.grid { display: grid; gap: var(--space-24); }

.stack-8  > * + * { margin-top: var(--space-8); }
.stack-16 > * + * { margin-top: var(--space-16); }
.stack-24 > * + * { margin-top: var(--space-24); }

.mt-16 { margin-top: var(--space-16); }
.mt-24 { margin-top: var(--space-24); }
.mt-32 { margin-top: var(--space-32); }
.mt-48 { margin-top: var(--space-48); }
.mt-64 { margin-top: var(--space-64); }


/* ==========================================================================
   4. 動態系統
   --------------------------------------------------------------------------
   只動 transform 與 opacity —— 這兩個屬性瀏覽器可以交給 GPU 合成，
   不會觸發重新排版，所以在低階手機上也能維持 60fps。
   絕不動 width / height / top / left / margin。

   運作方式：JS 用 IntersectionObserver 在元素進入視窗時加上 .is-in，
   CSS 負責實際的動畫。JS 沒載入或壞掉時，.no-js 保底讓內容直接顯示。
   ========================================================================== */

/* 進場前的初始狀態。只有在 JS 確認會接手時才套用 —— 
   這樣 JS 失效時內容依然可見（漸進增強）。 */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity   var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}

.js-motion [data-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 進場結束後拿掉 will-change，不要一直佔著合成層 */
.js-motion [data-reveal].is-done { will-change: auto; }

/* 變體：從左滑入（用在圖片、側欄） */
.js-motion [data-reveal="left"]  { transform: translate3d(-24px, 0, 0); }
.js-motion [data-reveal="right"] { transform: translate3d(24px, 0, 0); }

/* 手機上一律改成垂直進場。
   窄螢幕的內容本來就滿版，往側邊推 24px 會超出視窗（雖然被 body 的
   overflow-x 夾住不會真的產生捲動，但畫面會抖一下）；
   而且在手機上水平位移的方向感本來就比垂直弱。 */
@media (max-width: 47.9375rem) {
  .js-motion [data-reveal="left"],
  .js-motion [data-reveal="right"] { transform: translate3d(0, 20px, 0); }
}

/* 變體：只淡入不位移（用在大面積圖片，位移會顯得笨重） */
.js-motion [data-reveal="fade"]  { transform: none; }

/* 變體：輕微放大（用在卡片） */
.js-motion [data-reveal="scale"] {
  transform: translate3d(0, 16px, 0) scale(0.985);
}
.js-motion [data-reveal="scale"].is-in {
  transform: translate3d(0, 0, 0) scale(1);
}

/* --- 髮絲線繪製 ----------------------------------------------------------
   線從左邊長出來。這是全站最常出現的動作，也是「製圖」感的來源。 */
.js-motion [data-draw] {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-rule) var(--ease-rule);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-motion [data-draw].is-in { transform: scaleX(1); }

/* 區段標籤前面那條銅色短線也一起畫出來 */
.js-motion [data-reveal] .section-label::before,
.js-motion .section-label[data-reveal]::before {
  transform: scaleX(0);
  transition: transform var(--dur-slow) var(--ease-rule) 200ms;
}
.js-motion [data-reveal].is-in .section-label::before,
.js-motion .section-label[data-reveal].is-in::before {
  transform: scaleX(1);
}

/* --- 標題逐行升起 --------------------------------------------------------
   每一行包在一個 overflow:hidden 的容器裡，文字從下方推上來。
   由 JS 依 <br> 切行後產生。 */
.line-mask { display: block; overflow: hidden; }
.line-mask > span {
  display: block;
  transform: translate3d(0, 100%, 0);
  transition: transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-motion .is-in .line-mask > span,
.line-mask.is-in > span { transform: translate3d(0, 0, 0); }

/* JS 未接手時（沒有 .js-motion）標題必須是可見的 */
html:not(.js-motion) .line-mask > span { transform: none; }


/* ==========================================================================
   5. 減少動態 —— 無障礙
   --------------------------------------------------------------------------
   使用者在系統設定開了「減少動態效果」時，全部關掉並直接顯示最終狀態。
   注意是「顯示最終狀態」，不是「隱藏內容」。
   ========================================================================== */

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

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js-motion [data-reveal],
  .js-motion [data-reveal="scale"] {
    opacity: 1 !important;
    transform: none !important;
  }
  .js-motion [data-draw],
  .js-motion .section-label::before { transform: scaleX(1) !important; }
  .line-mask > span { transform: none !important; }
}


/* ==========================================================================
   6. 導覽列
   --------------------------------------------------------------------------
   貼齊視窗上緣的全寬列，底部一條髮絲線。捲動後加上紙白底與模糊。
   不是浮動藥丸 —— 這個設計的秩序來自「線」，導覽列是圖框的上邊。
   ========================================================================== */

.nav-shell {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border-bottom: var(--hairline) solid transparent;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) {
  .nav-shell { backdrop-filter: saturate(1.4) blur(12px); }
}
/* 捲動超過一個視窗高度後才顯示邊界 —— 由 JS 加上 .is-stuck */
.nav-shell.is-stuck {
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-bottom-color: var(--rule);
}

/* 捲動進度 —— 導覽列底部那條銅色細線，寬度跟著閱讀進度走 */
.nav-shell::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--signal);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  min-height: 4.5rem;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nav__logo {
  /* display:flex + min-height 讓可點區域達到 24px 以上（WCAG 2.2 目標尺寸） */
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  min-height: 2.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  margin-right: auto;
  white-space: nowrap;
}
.nav__logo strong { font-weight: var(--w-medium); }

/* 圓形標誌。SVG 已經帶好顏色（石墨），不需要 currentColor ——
   導覽列永遠在紙白底上，不會換底色。 */
.nav__mark {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
}

/* 頁尾的完整鎖定圖。淺色版，因為頁尾永遠是深底。
   寬度給上限而不是固定值，窄螢幕才不會撐破。
   22rem 是量出來的：再小的話鎖定圖裡的中文只剩 18px 高，
   在深底上會糊掉；欄寬有 477px，放得下。 */
.footer__lockup {
  width: 100%;
  max-width: 22rem;
  height: auto;
  margin-bottom: var(--space-24);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}

.nav__links > a {
  position: relative;
  font-size: var(--text-body);
  color: var(--ink-secondary);
  padding-block: var(--space-8);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__links > a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav__links > a:hover { color: var(--ink); }
.nav__links > a:hover::after { transform: scaleX(1); transform-origin: left center; }

/* 目前所在的頁面 —— 顏色 + 底線，不只靠顏色傳達 */
.nav__links > a[aria-current="page"] { color: var(--ink); }
.nav__links > a[aria-current="page"]::after { transform: scaleX(1); }

.nav__lang {
  background: none;
  border: var(--hairline) solid var(--control-border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-12);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--ls-mono);
  color: var(--ink-secondary);
  cursor: pointer;
  min-height: 2rem;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.nav__lang:hover { border-color: var(--ink); color: var(--ink); }

/* 選擇器要比 `.nav__links > a` 更明確，否則會被它的 color 蓋掉，
   變成深灰字配近黑底（對比只有 2.5:1）。 */
.nav__links > a.nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: var(--space-8) var(--space-24);
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--radius);
  font-size: var(--text-body);
  font-weight: var(--w-medium);
  transition: background var(--dur-fast) var(--ease-out);
}
.nav__links > a.nav__cta::after { display: none; }   /* 不要再畫底線 */
.nav__links > a.nav__cta:hover { background: var(--signal); color: #fff; }

/* 手機選單按鈕 —— 桌機隱藏 */
.nav__toggle {
  display: none;
  background: none;
  border: var(--hairline) solid var(--control-border);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
  /* 44×44 觸控目標最小值 */
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.nav__toggle svg { stroke: currentColor; }


/* ==========================================================================
   7. 按鈕
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  /* 44px 觸控目標 */
  min-height: 3rem;
  padding: var(--space-12) var(--space-32);
  background: var(--ink);
  color: var(--on-ink);
  border: var(--hairline) solid var(--ink);
  border-radius: var(--radius);
  /* 主要行動用 16px。這是全站最重要的按鈕（「提出需求」「洽談代理合作」），
     14px 在桌機上明顯偏小，而且按鈕文字通常比內文更需要一眼看清。 */
  font-size: var(--text-body);
  font-weight: var(--w-medium);
  letter-spacing: 0.01em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}

/* hover 時銅色從底部填滿 —— 用 transform 做，不動 background-size */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--signal);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover::before { transform: scaleY(1); }
.btn:hover { border-color: var(--signal); }
.btn:active { transform: translateY(1px); }

/* 次要按鈕 —— 形狀完全一樣，只差填色 */
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--control-border);
}
.btn--ghost:hover { color: var(--on-ink); border-color: var(--signal); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

/* 箭頭在 hover 時往右推 */
.btn__arrow {
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(4px); }


/* ==========================================================================
   8. 英雄區
   ========================================================================== */

.hero {
  padding-top: clamp(4rem, 10vw, 8rem);
  padding-bottom: var(--section-y);
}

.hero__display {
  font-size: var(--text-display);
  font-weight: var(--w-medium);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  max-width: 18ch;
  margin-bottom: var(--space-32);
}
:lang(zh-Hant-TW) .hero__display {
  max-width: 15em;
  letter-spacing: 0.01em;
}

.hero__lede {
  font-size: var(--text-lede);
  line-height: 1.6;
  color: var(--ink-secondary);
  max-width: var(--measure-en);
}
:lang(zh-Hant-TW) .hero__lede { max-width: var(--measure-zh); }

.hero__actions { margin-top: var(--space-48); }

/* 英雄區底部的規格列 —— 像圖紙右下角的標題欄（title block） */
.spec-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-24);
  margin-top: var(--space-64);
  padding-top: var(--space-24);
  border-top: var(--hairline) solid var(--rule);
}
.spec-strip__item { display: flex; flex-direction: column; gap: var(--space-4); }
.spec-strip__k {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ink-faint);
}
.spec-strip__v {
  font-size: var(--text-body-sm);
  font-weight: var(--w-medium);
}


/* ==========================================================================
   9. 統計數字
   ========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;                       /* 用 gap + 背景做出分隔線 */
  background: var(--rule);
  border-block: var(--hairline) solid var(--rule);
}
.stat {
  background: var(--paper);
  padding: var(--space-32) var(--space-24);
}
.stat__value {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: var(--w-light);
  line-height: 1;
  letter-spacing: var(--ls-display);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-12);
}
.stat__value sup {
  font-size: 0.45em;
  vertical-align: super;
  color: var(--signal);
  font-weight: var(--w-medium);
}
.stat__label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ink-faint);
  line-height: 1.5;
}


/* ==========================================================================
   10. 卡片
   ========================================================================== */

/* --- 路徑卡片（首頁讓訪客自己選路）--------------------------------------- */
.path-grid {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: var(--hairline) solid var(--rule);
}

.path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  background: var(--paper);
  padding: var(--space-48) var(--space-32) var(--space-32);
  overflow: hidden;
  transition: background var(--dur-base) var(--ease-out);
}
/* hover 時銅色從左邊長出來的一條粗線 */
.path-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--signal);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--dur-base) var(--ease-out);
}
.path-card:hover { background: var(--surface); }
.path-card:hover::before { transform: scaleY(1); }

.path-card__num {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--ls-mono);
  color: var(--ink-faint);
}
.path-card__who {
  font-size: var(--text-subheading);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-tight);
}
.path-card__desc {
  color: var(--ink-secondary);
  font-size: var(--text-body);
  flex: 1;
}
.path-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-16);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--signal);
}
.path-card__cta svg { transition: transform var(--dur-base) var(--ease-out); }
.path-card:hover .path-card__cta svg { transform: translateX(4px); }


/* --- 原廠列（規格表的一列）----------------------------------------------- */
.principal-list {
  border-top: var(--hairline) solid var(--rule);
}

.principal-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1.1fr) minmax(0, 1.6fr) auto;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-24) var(--space-8);
  border-bottom: var(--hairline) solid var(--rule);
  position: relative;
  transition: background var(--dur-fast) var(--ease-out),
              padding-left var(--dur-base) var(--ease-out);
}
.principal-row:hover { background: var(--surface); }

.principal-row__mark {
  color: var(--ink-faint);
  transition: color var(--dur-fast) var(--ease-out);
}
.principal-row__mark svg { width: 28px; height: 28px; }
.principal-row:hover .principal-row__mark { color: var(--signal); }

.principal-row__name {
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-heading);
}
.principal-row__name .muted {
  font-weight: var(--w-normal);
  font-size: var(--text-body-sm);
}
.principal-row__scope {
  color: var(--ink-secondary);
  font-size: var(--text-body);
}
.principal-row__country {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ink-faint);
  text-align: right;
  white-space: nowrap;
}


/* --- 原廠詳細卡片 --------------------------------------------------------- */
.principal-card {
  border: var(--hairline) solid var(--rule);
  background: var(--surface);
  padding: var(--space-32);
}
.principal-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-24);
  padding-bottom: var(--space-24);
  border-bottom: var(--hairline) solid var(--rule);
  margin-bottom: var(--space-24);
}
.principal-card__name {
  font-size: var(--text-subheading);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-heading);
}
.principal-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16) var(--space-32);
  margin-top: var(--space-24);
  padding-top: var(--space-24);
  border-top: var(--hairline) solid var(--rule);
}


/* --- 原廠商標牆 -----------------------------------------------------------
   國外原廠的商標是這個網站最有力的信任訊號。
   淺色底是刻意的：SAFT／Siemens／Messko 的官方商標都是為白底設計的。 */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: var(--hairline) solid var(--rule);
}
.logo-wall__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  padding: var(--space-24);
  min-height: 8rem;
  transition: background var(--dur-fast) var(--ease-out);
}
.logo-wall__cell:hover { background: var(--paper); }

/* 商標圖檔 —— 灰階，hover 時恢復原色。
   filter 有成本，但只在 hover 時觸發且元素少，可以接受。 */
/* 各家商標的長寬比差很多 —— Saft 的直式鎖定圖是 1.5:1，
   純字標型常常是 4:1。只限高度的話，方形商標會顯得又小又輕，
   長條字標會顯得又大又重。同時限高與限寬，讓每一格的視覺份量接近。 */
.logo-wall__cell img {
  max-height: 2.5rem;
  max-width: 76%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* 灰階是為了配合全站的單色調性，但不能因此讓商標讀不出來 ——
     這一排原廠商標正是整個頁面最重要的信任訊號。
     0.68 對純字標還行，對 Saft 那種漸層鎖定圖會糊成一團灰。
     0.85 仍然安靜，但認得出來；hover 再還原成原色。 */
  filter: grayscale(1);
  opacity: 0.85;
  transition: filter var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}
.logo-wall__cell:hover img { filter: grayscale(0); opacity: 1; }

/* 尺寸由 app.js 的 fitLogos() 依「相同視覺面積」逐一計算後寫成 inline width。
   這裡的 max-* 只是 JS 還沒跑到時的保險值，避免超大圖瞬間撐破格子。 */

/* 深底格：給「原廠只提供深色背景版商標」的情況用。
   目前沒有任何一家在用（RuggedCom 依要求改回淺底）。
   之後若有原廠只給深底版，在 data.js 該筆加一行 logoDark: true 就會套用。 */
.logo-wall__cell--dark {
  background: var(--ink-surface);
}
.logo-wall__cell--dark:hover { background: var(--ink-surface-2); }
.logo-wall__cell--dark img { filter: none; opacity: 0.92; }
.logo-wall__cell--dark:hover img { opacity: 1; }

/* 還沒放商標圖時的替代 —— 用字標，版面不會塌 */
.logo-wall__text {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-secondary);
  text-align: center;
  transition: color var(--dur-fast) var(--ease-out);
}
.logo-wall__cell:hover .logo-wall__text { color: var(--ink); }


/* ==========================================================================
   11. 影像
   --------------------------------------------------------------------------
   照片一律先保留長寬比，避免圖片載入時版面跳動（CLS）。
   ========================================================================== */

.media {
  position: relative;
  overflow: hidden;
  background: var(--surface-sunken);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-media);
  aspect-ratio: 4 / 3;
}
.media--wide  { aspect-ratio: 16 / 7; }
.media--tall  { aspect-ratio: 3 / 4; }
.media--paper { background: var(--surface); }

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 圖片本身極輕微的推進，讓進場更有層次 */
  transform: scale(1.04);
  transition: transform 1.2s var(--ease-out);
}
.js-motion [data-reveal].is-in .media img,
.js-motion .media[data-reveal].is-in img { transform: scale(1); }

/* 照片疊在線稿之上。兩層都在，照片載入成功就蓋住線稿；
   載入失敗時 onerror 把 <img> 拿掉，線稿自然露出來。
   所以「還沒放照片」和「放了照片」兩種狀態都是完整的版面。 */
.media__art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-32);
}
.media__art svg { width: 100%; height: 100%; max-height: 22rem; color: var(--ink-secondary); }

.media__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 照片本身極輕微推進，讓進場更有層次 */
  transform: scale(1.04);
  transition: transform 1.2s var(--ease-out);
}
.js-motion [data-reveal].is-in .media__photo,
.js-motion .media[data-reveal].is-in .media__photo { transform: scale(1); }

/* 技術線稿 —— 還沒有照片時的替代內容，本身就是完整的視覺 */
.media--blueprint {
  background:
    linear-gradient(to right,  rgba(22,24,28,0.05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(to bottom, rgba(22,24,28,0.05) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-32);
}
.media--blueprint svg {
  width: 100%;
  height: 100%;
  max-height: 24rem;
  color: var(--ink-secondary);
}

/* 圖說 —— 等寬小字，像圖版編號 */
.media-caption {
  display: flex;
  gap: var(--space-12);
  margin-top: var(--space-12);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ink-faint);
}


/* ==========================================================================
   12. 手風琴
   --------------------------------------------------------------------------
   高度動畫用 grid-template-rows 0fr → 1fr。
   這是目前唯一能「動畫到自動高度」又不需要 JS 量測的做法。
   ========================================================================== */

.accordion { border-top: var(--hairline) solid var(--rule); }

.accordion__item { border-bottom: var(--hairline) solid var(--rule); }

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  width: 100%;
  min-height: 3.5rem;
  padding: var(--space-24) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-size: var(--text-body);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.accordion__trigger:hover { color: var(--signal); }

/* 展開圖示 —— 用兩條線做 +／−，旋轉切換 */
.accordion__icon {
  position: relative;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}
.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-base) var(--ease-out);
}
.accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
/* 展開時垂直那條轉平 —— 變成減號 */
.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.accordion__panel > div { overflow: hidden; }
.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }

.accordion__body {
  padding-bottom: var(--space-24);
  color: var(--ink-secondary);
  max-width: var(--measure-en);
}
:lang(zh-Hant-TW) .accordion__body { max-width: var(--measure-zh); }


/* ==========================================================================
   13. 表單
   ========================================================================== */

.form { display: grid; gap: var(--space-24); }

.form__row {
  display: grid;
  gap: var(--space-24);
}

.field { display: flex; flex-direction: column; gap: var(--space-8); }

/* 標籤永遠可見 —— 不用 placeholder 當標籤 */
.field__label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ink-secondary);
}
.field__label .req { color: var(--signal); }
.field__label .opt { color: var(--ink-faint); }

.field input,
.field select,
.field textarea {
  /* 手機上 16px 以下 iOS 會自動放大整個頁面，所以內文尺寸不能再小 */
  font-size: var(--text-body);
  /* 44px 觸控高度 */
  min-height: 3rem;
  padding: var(--space-12) var(--space-16);
  background: var(--surface);
  color: var(--ink);
  border: var(--hairline) solid var(--control-border);
  border-radius: var(--radius);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--ink-faint); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 18%, transparent);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }

/* 輔助說明 —— 常駐，不是 placeholder */
.field__help {
  font-size: var(--text-body-sm);
  color: var(--ink-faint);
}

/* 欄位錯誤 —— 顏色 + 圖示 + 文字，不只靠顏色 */
.field__error {
  display: none;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-body-sm);
  color: var(--danger);
}
.field.is-invalid .field__error { display: flex; }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: var(--danger); }

/* 送出後的狀態訊息 */
.form__status {
  padding: var(--space-16) var(--space-24);
  border-left: 2px solid var(--rule-strong);
  font-size: var(--text-body-sm);
  color: var(--ink-secondary);
}
.form__status[data-state="ok"]   { border-left-color: var(--success); color: var(--ink); }
.form__status[data-state="fail"] { border-left-color: var(--danger);  color: var(--ink); }
.form__status:empty { display: none; }

/* 錯誤總覽 —— 送出失敗且有多個錯誤時放在表單最上方，可被聚焦 */
.form__summary {
  padding: var(--space-16) var(--space-24);
  border: var(--hairline) solid var(--danger);
  border-left-width: 2px;
}
.form__summary:empty { display: none; }
.form__summary h2 {
  font-size: var(--text-body-sm);
  font-weight: var(--w-medium);
  margin-bottom: var(--space-8);
}
.form__summary ul { display: grid; gap: var(--space-4); }
.form__summary a { color: var(--danger); text-decoration: underline; }

/* 送出中 */
.btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }


/* ==========================================================================
   14. CTA 區段 + 頁尾
   ========================================================================== */

.cta-band {
  background: var(--ink-surface);
  color: var(--ink);
  padding-block: var(--section-y);
}

.footer {
  background: var(--ink-surface);
  color: var(--ink);
  padding-top: var(--space-96);
  padding-bottom: var(--space-48);
}

.footer__grid {
  display: grid;
  gap: var(--space-48);
  padding-bottom: var(--space-64);
}

.footer__logo {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  margin-bottom: var(--space-24);
}

.footer h3 {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--on-ink-secondary);
  margin-bottom: var(--space-16);
}
/* 電話、地址、信箱是要被讀出來的資訊，不是版權宣告 */
.footer p, .footer li {
  font-size: var(--text-body);
  /* 頁尾裡有電子信箱、電話、以及「（台北時間 GMT+8）」這種
     中文標點包住拉丁字的組合。中文的斷行規則不允許在全形括號前後斷，
     整塊擠不進手機寬度就會溢出。anywhere 只在「真的放不下」時才介入，
     一般情況仍照正常斷行，不會把好好的詞硬拆開。
     （不要用 word-break: break-all —— 那會無條件拆詞，內文會變得很難讀。）*/
  overflow-wrap: anywhere;
  color: var(--on-ink-secondary);
  line-height: 1.7;
}
.footer ul { display: grid; gap: var(--space-8); }
.footer a { color: var(--on-ink-secondary); }
.footer a:hover { color: var(--on-ink); }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  justify-content: space-between;
  padding-top: var(--space-24);
  border-top: var(--hairline) solid var(--rule-on-ink);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--on-ink-secondary);
}


/* ==========================================================================
   15. 麵包屑
   ========================================================================== */

.crumb {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-top: var(--space-32);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ink-faint);
}
.crumb a:hover { color: var(--signal); }


/* ==========================================================================
   16. 響應式
   --------------------------------------------------------------------------
   行動優先：上面所有規則都是手機版，這裡只往上加。
   斷點：640 / 768 / 1024 / 1280
   ========================================================================== */

/* --- 導覽收成漢堡選單 -----------------------------------------------------
   斷點是 864px（53.9375rem），比其他手機規則的 768px 寬 —— 刻意的。

   英文的四個導覽項（Manufacturers / Why Taiwan / Represent Your Products /
   About）加上語言鈕與 Contact 按鈕，實測要 864px 才排得下；原本斷點設在
   768px，導致 768–863px 之間英文版每一頁都被推出 64px 的橫向捲軸
   （iPad 直立正好是 768px）。中文標籤短，在 768px 本來就排得下，
   但兩種語言共用同一份版面，統一在 864px 以下收起來比較可靠：
   日後改導覽文字，也不會再撞到這個問題。 */
@media (max-width: 53.9375rem) {

  .nav__toggle { display: inline-flex; }

  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: var(--hairline) solid var(--rule);
    padding: var(--space-16) var(--gutter) var(--space-32);
    /* 收合時不佔空間也不可被 Tab 聚焦 */
    display: none;
  }
  .nav__links.is-open { display: flex; }

  .nav__links > a {
    padding-block: var(--space-16);
    border-bottom: var(--hairline) solid var(--rule);
    font-size: var(--text-body);
    min-height: 3rem;
    display: flex;
    align-items: center;
  }
  .nav__links > a::after { display: none; }
  .nav__links > a[aria-current="page"] { color: var(--signal); }

  .nav__lang { margin-top: var(--space-24); align-self: flex-start; }
  .nav__cta  { margin-top: var(--space-16); justify-content: center; }
}

/* --- 手機（預設）--------------------------------------------------------- */
@media (max-width: 47.9375rem) {

  /* 原廠列在手機上重排成兩行，不橫向擠壓 */
  .principal-row {
    grid-template-columns: 2rem 1fr auto;
    grid-template-areas:
      "mark name country"
      ".    scope scope";
    gap: var(--space-8) var(--space-16);
    padding-block: var(--space-16);
  }
  .principal-row__mark    { grid-area: mark; }
  .principal-row__name    { grid-area: name; }
  .principal-row__scope   { grid-area: scope; }
  .principal-row__country { grid-area: country; }
  .principal-row__mark svg { width: 22px; height: 22px; }

  /* 分割版面在手機一律堆疊，且不能因為 order 讓文字跑到圖後面 */
  .split--text-right > :first-child { order: 0; }

  /* 首頁兩張分流卡片是訪客做決定的地方，手機上不要用 14px 的次要級距 */
  .path-card__desc { font-size: var(--text-body); }
}

/* --- 平板以上 ------------------------------------------------------------- */
@media (min-width: 40rem) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
  .path-grid    { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 48rem) {
  /* 三欄：公司資訊 / 代理原廠 / 網站導覽（原本的「公司登記資料」欄已移除） */
  .footer__grid { grid-template-columns: 1.8fr 1fr 1fr; }
}

/* --- 桌機 ----------------------------------------------------------------- */
@media (min-width: 64rem) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-96); }
  .split--wide-right { grid-template-columns: 0.85fr 1.15fr; }
  .split--wide-left  { grid-template-columns: 1.15fr 0.85fr; }
}


/* ==========================================================================
   18. 區段標頭 / 資料面板 / 編號清單 / 時間軸
   ========================================================================== */

/* --- 區段標頭 ------------------------------------------------------------ */
.section-head { max-width: var(--wrap-narrow); }

/* 標籤在左、索引編號在右，中間一條髮絲線把兩端撐開 —— 像圖框的標註列 */
.section-head__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding-bottom: var(--space-16);
  border-bottom: var(--hairline) solid var(--rule);
}
.section-head__top .section-label { margin-bottom: 0; }


/* --- 資料面板 ------------------------------------------------------------
   規格表。每一列是「標籤 / 數值」，列與列之間髮絲線分隔。 */
.panel {
  border: var(--hairline) solid var(--rule);
  background: var(--surface);
}

.datum {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-24);
}
.datum + .datum { border-top: var(--hairline) solid var(--rule); }

.datum__k {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ink-faint);
}
.datum__v {
  font-size: var(--text-body);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-heading);
  line-height: 1.45;
}
/* 面板裡的標題不需要再加一次上方間距 */
.datum .subheading { margin: 0; }

/* 三大核心業務的英文副名（Line-Down Emergency Support 等）。
   重電採購看英文術語比看中文意譯快，但它是輔助資訊，
   所以壓成等寬小字、降一階顏色，不跟中文標題搶。

   自成一行，不接在中文標題後面 —— 一開始寫成 inline-block + nowrap，
   結果最長的「Turnkey Kitting & Skid Integration」在 320px 下把整個
   面板推寬 58px。另起一行讓它自然折行，窄螢幕也不會破版。 */
.datum__en {
  display: block;
  margin-top: 0.15em;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--w-normal);
  letter-spacing: var(--ls-mono);
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}


/* --- 編號清單（台灣市場的論點）------------------------------------------ */
.numbered-list { border-top: var(--hairline) solid var(--rule-strong); }

.numbered-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: var(--space-24);
  align-items: start;
  padding-block: var(--space-48);
  border-bottom: var(--hairline) solid var(--rule);
}

/* 大號碼 —— 極輕字重、低對比，是節奏標記不是內容，所以 aria-hidden */
.numbered-row__n {
  font-family: var(--font-mono);
  font-size: var(--text-heading);
  font-weight: var(--w-light);
  line-height: 1;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.numbered-row__total { padding-top: 0.4em; white-space: nowrap; }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }


/* --- 時間軸 --------------------------------------------------------------- */
.timeline { border-top: var(--hairline) solid var(--rule-strong); }

.timeline__row {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: var(--space-24);
  padding-block: var(--space-32);
  border-bottom: var(--hairline) solid var(--rule);
}
.timeline__year {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-mono);
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  padding-top: 0.15em;
}


/* --- 勾選清單 ------------------------------------------------------------- */
.tick-list { border-top: var(--hairline) solid var(--rule); }

.tick-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-16);
  align-items: start;
  padding-block: var(--space-16);
  border-bottom: var(--hairline) solid var(--rule);
  font-size: var(--text-body-sm);
  line-height: 1.6;
}
.tick-item__mark {
  color: var(--signal);
  margin-top: 0.28em;
  flex: none;
}


/* --- 原廠區塊 ------------------------------------------------------------- */
.principal-block {
  padding-block: var(--section-y);
  border-top: var(--hairline) solid var(--rule);
}
.principal-block:first-child { border-top: 0; padding-top: 0; }


/* --- 手機調整 ------------------------------------------------------------- */
@media (max-width: 47.9375rem) {
  .numbered-row {
    grid-template-columns: 2.5rem 1fr;
    padding-block: var(--space-32);
  }
  /* 手機上「/ 06」這個總數標記省略 —— 空間不夠，資訊也不關鍵 */
  .numbered-row__total { display: none; }

  .timeline__row { grid-template-columns: 4rem 1fr; gap: var(--space-16); }
  .datum { padding: var(--space-16); }

  /* 手機上圖片先於文字會把重點推到摺線下，所以視覺一律排在文字後面 */
  .principal-block .media { order: 2; }
}


/* ==========================================================================
   19. 堆疊轉場
   --------------------------------------------------------------------------
   深色 CTA 區塊往上「升起來」蓋住前面的內容，前面的內容同時稍微退後。
   靈感來自常見的 sticky-stack 效果，但這裡刻意收斂：

   · 原效果是「每一段都變成一張不透明的卡片疊上去」。
     這個網站的底是一整張連續的紙 + 固定不動的製圖網格，
     把每段都變成不透明卡片會把那張紙切碎，等於拆掉招牌。
   · 所以只用在唯一本來就會換表面的地方 —— 深色 CTA 區塊。
     那裡本來就是明暗的硬切換，讓它「升起來」是順著設計走，不是加特效。

   進度值 --stack-p（0→1）由 motion.js 在捲動時寫入，
   CSS 只負責換算成 transform。只動 transform 與 opacity。
   ========================================================================== */

.stack-in {
  position: relative;
  z-index: 2;
  transform-origin: center top;
  /* translate 用 px、scale 用純數字 —— 合成器可以直接處理，不觸發排版 */
  transform:
    translate3d(0, calc((1 - var(--stack-p, 1)) * var(--stack-lift)), 0)
    scale(calc(var(--stack-scale) + (1 - var(--stack-scale)) * var(--stack-p, 1)))
    rotate(calc((1 - var(--stack-p, 1)) * var(--stack-rotate) * -1));
  border-top-left-radius:  calc((1 - var(--stack-p, 1)) * var(--stack-radius));
  border-top-right-radius: calc((1 - var(--stack-p, 1)) * var(--stack-radius));
  overflow: hidden;   /* 圓角要能裁到裡面的深色底 */
}

/* 被蓋住的那一段：往後退一點並稍微變暗，製造景深 */
.stack-out {
  transform-origin: center bottom;
  transform: scale(calc(1 - (1 - var(--stack-recede)) * var(--stack-p, 0)));
  opacity: calc(1 - 0.28 * var(--stack-p, 0));
}

/* 但「自己有底色」的區段不能縮放。
   透明的區段縮小時只是內容往內收，看不出邊界；
   有底色的區段縮小會讓那塊底色框整個縮進去，四周露出紙白，
   看起來就像版面沒對齊。這種只調暗就好。 */
.stack-out.section--sunken,
.stack-out.section--ink,
.stack-out.cta-band {
  transform: none;
}

/* 進場中才佔合成層，結束就還給瀏覽器 */
.stack-in.is-animating,
.stack-out.is-animating { will-change: transform, opacity; }


/* --- 關掉的情況 ---------------------------------------------------------
   1. 使用者要求減少動態
   2. 手機直向：這個效果在窄螢幕上會讓深色區塊左右露出兩條紙白邊，
      看起來像沒對齊的破圖，不如不做
   3. 列印
   關掉的方式是「直接顯示最終狀態」，不是隱藏內容。 */
@media (prefers-reduced-motion: reduce), print {
  .stack-in, .stack-out {
    transform: none !important;
    opacity: 1 !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 47.9375rem) {
  .stack-in, .stack-out {
    transform: none;
    opacity: 1;
    border-radius: 0;
  }
}


/* ==========================================================================
   20. 產品類別卡（中文版）
   --------------------------------------------------------------------------
   OEM 工程師從「我要一個套管」開始想，所以類別名稱要最大，
   品項次之，原廠名稱最小 —— 順序刻意和英文版相反
   （英文版是原廠名稱最大，因為國外讀者看的是「你代理誰」）。
   ========================================================================== */

.cat-grid {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: var(--hairline) solid var(--rule);
}

.cat-card {
  position: relative;
  display: grid;
  gap: var(--space-8);
  background: var(--paper);
  padding: var(--space-32) var(--space-24) var(--space-24);
  overflow: hidden;
  transition: background var(--dur-base) var(--ease-out);
}
/* hover 時銅色從左邊長出來，和首頁分流卡同一個語彙 */
.cat-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--signal);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--dur-base) var(--ease-out);
}
.cat-card:hover { background: var(--surface); }
.cat-card:hover::before { transform: scaleY(1); }

.cat-card__mark { color: var(--ink-faint); transition: color var(--dur-fast) var(--ease-out); }
.cat-card__mark svg { width: 30px; height: 30px; }
.cat-card:hover .cat-card__mark { color: var(--signal); }

.cat-card__name {
  font-size: var(--text-subheading);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-tight);
  margin-top: var(--space-8);
}
/* 品項是 OEM 工程師真正在掃的內容，不是註腳，用內文級距 */
.cat-card__items {
  font-size: var(--text-body);
  color: var(--ink-secondary);
  line-height: 1.6;
}
/* 原廠名稱放最小 —— 對 OEM 來說那是答案，不是問題 */
.cat-card__brands {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ink-faint);
  margin-top: var(--space-8);
  padding-top: var(--space-12);
  border-top: var(--hairline) solid var(--rule);
}

/* 「其他／清單上沒有的」那張橫跨整列。
   兩個理由：
   1. 七張卡放進三欄，最後一列會空出兩格，露出格線底色，看起來像破圖。
   2. 這張本來就該比其他六張重 —— 它講的是「清單以外我們也幫你找」，
      那是這家公司真正在賣的東西，不是第七個品項。 */
.cat-card--open { grid-column: 1 / -1; }

/* 底線改成銅色行動呼籲，讓它讀起來是「出口」而不是又一個品項。 */
.cat-card__brands--cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--signal);
}
.cat-card--open .cat-card__mark { color: var(--signal); }
.cat-card__brands--cta svg { transition: transform var(--dur-base) var(--ease-out); }
.cat-card--open:hover .cat-card__brands--cta svg { transform: translateX(4px); }

.mb-24 { margin-bottom: var(--space-24); }

@media (min-width: 40rem)  { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem)  { .cat-grid { grid-template-columns: repeat(3, 1fr); } }


/* ==========================================================================
   17. 列印
   --------------------------------------------------------------------------
   原廠採購常常把頁面印出來或存 PDF 帶進會議。
   ========================================================================== */

@media print {
  .nav-shell, .draft-grid, .cta-band, .btn, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
  [data-reveal], [data-draw] { opacity: 1 !important; transform: none !important; }
  .footer { background: #fff; color: #000; }
  .footer p, .footer li, .footer a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}


/* ==========================================================================
   19. 單頁式改版元件（2026-09）
   --------------------------------------------------------------------------
   取代舊版七頁架構的視覺元件。舊元件（.hero、.spec-strip、.panel、.datum、
   .logo-wall、.path-card、.principal-row、.media 等）目前沒有任何頁面
   在用，故意留著沒刪 —— 要清可以看 git log 找回這次改版的 commit。
   ========================================================================== */

/* --- 導覽列鎖定圖：兩行（品牌名 + 英文全名）------------------------------ */
.nav__lockup { display: flex; flex-direction: column; line-height: 1.15; }
.nav__lockup strong { font-weight: var(--w-extra); letter-spacing: -0.01em; font-size: 1rem; }
.nav__lockup em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--ink-secondary);
  margin-top: 2px;
}

/* --- 語言切換：兩個按鈕的藥丸（取代舊版單按鈕）--------------------------- */
.nav__lang-pill {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(11,27,61,.07);
  border-radius: var(--radius);
}
.nav__lang-pill button {
  border: 0;
  cursor: pointer;
  padding: 6px 11px;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-secondary);
  font: 700 0.78rem/1 var(--font-mono);
  letter-spacing: 0.06em;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav__lang-pill button[aria-pressed="true"] { background: var(--navy-600); color: #fff; }
.nav__lang-pill button[aria-pressed="false"]:hover { background: rgba(11,27,61,.10); color: var(--navy-600); }

/* --- 影片英雄區 ----------------------------------------------------------- */
.hero-video {
  position: relative;
  min-height: min(88vh, 860px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--navy-600);
}
.hero-video__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .62;
}
.hero-video__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,27,61,.72) 0%, rgba(11,27,61,.28) 38%, rgba(11,27,61,.86) 100%);
}
.hero-video__content {
  position: relative;
  padding: clamp(4.5rem, 10vw, 7rem) var(--gutter) 3.5rem;
}
.hero-video__headline {
  font-family: var(--font-sans);
  font-weight: var(--w-extra);
  font-size: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: #fff;
  margin: 0 0 var(--space-32);
  max-width: 18ch;
  text-wrap: balance;
}
:lang(zh-Hant-TW) .hero-video__headline { font-weight: var(--w-black); max-width: 14em; }
.hero-video__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-32);
  justify-content: space-between;
}
.hero-video__lede {
  font-size: var(--text-lede);
  line-height: 1.6;
  color: rgba(255,255,255,.82);
  margin: 0;
  max-width: var(--measure-en);
}
:lang(zh-Hant-TW) .hero-video__lede { max-width: var(--measure-zh); }

/* 深色底上的次要按鈕（白色半透明邊框），跟一般 .btn--ghost 不同底色 */
.btn--ghost-on-ink {
  background: rgba(255,255,255,.10);
  color: #fff;
  border-color: rgba(255,255,255,.34);
}
.btn--ghost-on-ink:hover { background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.5); }
.btn--ghost-on-ink::before { display: none; }

/* --- 統計格：改成淺灰卡片，配合新配色（取代舊版髮絲線分隔） ------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--space-16);
  background: none;
  border-block: 0;
}
.stat {
  background: var(--grid-gray);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-24) var(--space-20, var(--space-24));
}
.on-ink .stat { background: var(--navy-700); border-color: var(--rule-on-ink); }
.stat__value { font-weight: var(--w-extra); font-family: var(--font-mono); }

/* --- 合規標章 -------------------------------------------------------------- */
.badge-row { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.badge {
  padding: 7px 13px;
  border-radius: 5px;
  background: rgba(11,27,61,.08);
  color: var(--navy-600);
  font: 700 0.78rem/1 var(--font-mono);
  letter-spacing: 0.04em;
}
.on-ink .badge { background: rgba(255,255,255,.12); color: #fff; }
.badge--dark { background: var(--navy-600); color: #fff; }

/* --- 區段標頭列（標籤+標題 / 右側連結）------------------------------------ */
.section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
}

/* --- 產品分類卡 ------------------------------------------------------------ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: var(--space-20, 1.25rem);
}
.product-card {
  background: var(--surface);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-24);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--rule-strong); }
.product-card h3 { font-size: 1.25rem; font-weight: var(--w-bold); margin: 0 0 var(--space-12); }
.product-card p { color: var(--ink-secondary); margin: 0 0 var(--space-16); font-size: 0.9375rem; line-height: 1.6; }
.product-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.product-card li { font: 500 0.8125rem/1.4 var(--font-mono); color: var(--navy-500); }

.product-card--promo {
  background: var(--navy-600);
  border: 0;
  box-shadow: var(--shadow-lift);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 300px;
  gap: var(--space-24);
}
.product-card--promo .section-label { color: rgba(255,255,255,.72); margin: 0; }
.product-card--promo .section-label::before { display: none; }
.product-card--promo__num {
  font: 800 clamp(2.75rem, 5vw, 4.5rem)/0.95 var(--font-mono);
  color: #fff;
  letter-spacing: -0.03em;
}
.product-card--promo__label { font-weight: var(--w-bold); color: #fff; margin-top: var(--space-8); font-size: 1.05rem; }
.product-card--promo p { color: rgba(255,255,255,.80); margin-top: var(--space-8); }
.btn--on-ink { align-self: flex-start; background: #fff; color: var(--navy-500); border-color: #fff; }
.btn--on-ink::before { background: var(--grid-gray); }
.btn--on-ink:hover { border-color: #fff; }

/* --- 「為什麼選擇立崙／原廠洽談三卡」（英文版非手風琴的三張卡）--------- */
.why-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-20, 1.25rem);
}
.why-card { border-top: 2px solid var(--rule-strong); padding-top: var(--space-24); }
.why-card--first { border-top-color: var(--copper-400); }
.why-card__num { font: 700 0.8125rem/1 var(--font-mono); letter-spacing: 0.1em; color: var(--signal); margin-bottom: var(--space-16); }
.why-card h3 { font-size: 1.25rem; font-weight: var(--w-bold); margin: 0 0 var(--space-12); }
.why-card p { color: var(--ink-secondary); margin: 0; font-size: 0.97rem; line-height: 1.65; }

/* --- 原廠篩選條件卡（英文版）----------------------------------------------- */
.criteria-cards { display: flex; flex-direction: column; gap: var(--space-16); }
.criteria-card {
  background: var(--surface);
  border: var(--hairline) solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: var(--space-24) 1.6rem;
}
.criteria-card--highlight { border-left-color: var(--copper-400); }
.criteria-card__label {
  font: 700 0.75rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin-bottom: var(--space-12);
}
.criteria-card--highlight .criteria-card__label { color: var(--signal); }
.criteria-card p { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--ink); }

/* --- 中段深色橫幅（技術諮詢／原廠洽談）------------------------------------ */
.cta-image-band {
  position: relative;
  padding: clamp(4rem, 8vw, 7.5rem) var(--gutter);
  background: var(--navy-600);
  overflow: hidden;
}
.cta-image-band img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .30;
  filter: invert(1);
}
.cta-image-band__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,27,61,.90) 0%, rgba(11,27,61,.45) 100%);
}
.cta-image-band__card {
  position: relative;
  max-width: 32rem;
  background: var(--surface);
  border-radius: var(--radius-media);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-deep);
}

/* --- 原廠卡（品牌名／國別／說明，取代舊版商標牆）--------------------------- */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-16);
}
.brand-card {
  background: var(--surface);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-24) var(--space-20, 1.25rem) var(--space-20, 1.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-height: 11.6rem;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.brand-card:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-lift); }
.brand-card__name { font: 800 1.5rem/1.1 var(--font-sans); letter-spacing: -0.02em; }
.brand-card__country { font: 500 0.75rem/1.4 var(--font-mono); letter-spacing: 0.1em; color: var(--signal); }
.brand-card p { font-size: 0.906rem; line-height: 1.6; color: var(--ink-secondary); margin-top: var(--space-12); }

/* --- 頁尾聯絡資訊 ----------------------------------------------------------- */
.contact-details { display: flex; flex-direction: column; gap: var(--space-24); font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,.68); margin-top: var(--space-16); }
.contact-details span {
  display: block;
  font: 700 0.8rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  margin-bottom: 9px;
}
.contact-details a { color: var(--signal-on-ink); }

/* --- 詢問表單（原生 mailto，無 JS 驗證）------------------------------------ */
.enquiry-form { display: flex; flex-direction: column; gap: var(--space-16); }
.enquiry-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-16);
}
.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea {
  width: 100%;
  padding: 14px 15px;
  border-radius: var(--radius);
  border: var(--hairline) solid var(--control-border-on-ink);
  background: rgba(255,255,255,.05);
  color: #fff;
  font-size: 0.9375rem;
}
.enquiry-form select option { color: var(--navy-600); }
.enquiry-form textarea { resize: vertical; }
.enquiry-form ::placeholder { color: rgba(255,255,255,.45); }
.enquiry-form__upload {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: 14px 15px;
  border-radius: var(--radius);
  border: 1px dashed rgba(255,255,255,.28);
  cursor: pointer;
  font-size: 0.906rem;
  color: rgba(255,255,255,.55);
}
.enquiry-form__upload span { font: 700 0.75rem/1 var(--font-mono); letter-spacing: 0.1em; color: var(--signal-on-ink); }
.enquiry-form__upload input[type="file"] { display: none; }
.enquiry-form .btn { margin-top: 6px; }
.enquiry-form__disclaimer { font-size: 0.8125rem; line-height: 1.5; color: rgba(255,255,255,.42); margin: 2px 0 0; }

/* --- 首頁自帶頁尾（取代舊版共用 .footer）-----------------------------------
   ⚠️ 這裡漏掉 background 是這次改版上線後真正的臭蟲：.on-ink 只是把
   --paper/--ink 這些代幣「重新定義成什麼顏色」，本身不會把顏色畫到任何
   元素上——一定要有人在該元素身上寫 background: var(--paper) 之類的宣告，
   重新定義的顏色才會真的顯示出來。舊版 .footer／.cta-band 都有明講
   background 與 color（見上方），這裡漏寫，於是頁尾整段變成透明背景，
   蓋在白色頁面上——結果是白字疊在白底上，肉眼看起來像「內容不見了、
   位置對不上」，其實內容都在，只是看不見。 */
.site-footer {
  background: var(--ink-surface);
  color: var(--ink);
  padding: clamp(4rem, 8vw, 6rem) var(--gutter) 0;
  overflow: hidden;
}
.site-footer .split { padding-bottom: clamp(3rem, 6vw, 5rem); }
.site-footer__base {
  border-top: var(--hairline) solid var(--rule-on-ink);
  padding: var(--space-24) 0 var(--space-40, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  justify-content: space-between;
  font: 400 0.8rem/1.4 var(--font-mono);
  color: rgba(255,255,255,.52);
}
.site-footer__base a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* --- 隱私權頁的極簡頁尾（取代舊版完整 .footer）------------------------------ */
.footer-minimal { padding: var(--space-48) 0; border-top: var(--hairline) solid var(--rule); }
.footer-minimal .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-16); font-size: 0.875rem; color: var(--ink-faint); }

/* --- 回到頂端 ---------------------------------------------------------------
   捲過中段才出現（見 motion.js），不是一直黏在畫面上——
   訪客在英雄區還沒看完內容前不需要這顆按鈕。
   隱藏狀態用 opacity + pointer-events，不是 display:none，
   這樣顯現/消失才能靠 transition 過渡，而不是硬切。 */
.back-to-top {
  position: fixed;
  right: var(--space-24);
  bottom: var(--space-24);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: var(--hairline) solid var(--rule-strong);
  background: var(--surface);
  color: var(--navy-600);
  box-shadow: var(--shadow-lift);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: var(--navy-600); color: #fff; border-color: var(--navy-600); }
.back-to-top:active { transform: translateY(1px); }
@media (pointer: coarse) {
  .back-to-top { width: 48px; height: 48px; }
}

/* --- 響應式 ----------------------------------------------------------------- */
@media (max-width: 47.9375rem) {
  .hero-video__row { flex-direction: column; align-items: flex-start; }
  .cta-image-band__card { max-width: 100%; }
  .back-to-top { right: var(--space-16); bottom: var(--space-16); }
}