/* ═══════════════════════════════════════════════════════════
   CADASU
   版面語彙 = Drawings紙:頁邊圖框、區位記號、Balloon、細藍線。
   節奏 = 平塗色塊 + 超大字 + 不對稱。沒有圓角、陰影、漸層裝飾。
   ═══════════════════════════════════════════════════════════ */
:root {
  --paper: #FFFFFF;
  /* 圖框線與區位記號:真正中性的灰(--ink 是海軍藍,拿它調淡會偏藍) */
  --sheet: rgba(26, 26, 28, 0.44);
  --sheet-2: rgba(26, 26, 28, 0.34);
  --ink: #0A1226;
  --ink-2: #44526E;
  --ink-3: #7A879F;
  --rule: rgba(0, 34, 140, 0.16);
  --rule-2: rgba(0, 34, 140, 0.34);
  --blue: #1E48D8;
  --orange: #C75F0F;
  --night: #070C1C;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: "Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", sans-serif;
  --serif: "Noto Serif TC", "Songti TC", "Source Han Serif TC", serif;
  --gut: clamp(18px, 4vw, 56px);
  --edge: clamp(10px, 1.6vw, 22px);
  color-scheme: light;
}
* { box-sizing: border-box; }
/* 捲動吸附交給瀏覽器原生What to do:Fingers滑多少畫面就動多少,放開才吸到最近一屏。
   scroll-behavior 不能設 smooth, , 它會跟吸附的動畫打架,變成鈍鈍的。 */
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
/* 整張紙:淡淡的方格,跟簡報同一個 40px 節奏 */
body { margin: 0; color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, rgba(0,34,140,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,34,140,.045) 1px, transparent 1px);
  background-size: 40px 40px;
 font-family: var(--sans); font-size: 17px; line-height: 1.68; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }
::selection { background: var(--blue); color: #fff; }
/* 關鍵字換宋體, , 黑體為主、宋體點綴,做出對比 */
.sf { font-family: var(--serif); font-weight: 700; font-style: normal; }
/* 宋體的字面比黑體小,要放大一點才會等重 */
.d1 .big i { display: inline-block; font-style: normal; }
.d1 .big { font-size: 1.12em; line-height: 1; margin-left: .30em; margin-right: .14em; }
.w { width: 100%; max-width: 1320px; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }

/* 頁邊圖框:整個網站坐在一張圖紙裡 */
/* 圖框:封閉矩形。區位記號在框外的邊帶內,每格之間有分隔刻線。
   標題欄畫在框「裡面」,不是拿來取代上緣。 */
.frame {
  position: absolute;
  inset: var(--edge);
  border: 1px solid var(--sheet);
  pointer-events: none;
  z-index: 90;
}
/* 外緣那圈:四邊都通到底,角落才不會斷 */
.frame::before {
  content: "";
  position: absolute;
  inset: calc(var(--edge) * -1);
  border: 1px solid var(--sheet);
}
.zone {
  position: absolute;
  z-index: 91;
  display: flex;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: rgba(26, 26, 28, 0.66);
  pointer-events: none;
}
.zone span { flex: 1; display: grid; place-items: center; }
/* 每格之間的刻線, , 這是圖框的關鍵Character */
.zone--t span + span,
.zone--b span + span { border-left: 1px solid var(--sheet-2); }
.zone--l span + span,
.zone--r span + span { border-top: 1px solid var(--sheet-2); }
/* 區位帶夾在兩個矩形中間:內側是 .frame,外側是 .frame::before(整張紙的邊界) */
.zone--t, .zone--b { left: var(--edge); right: var(--edge); height: var(--edge); }
.zone--t { top: 0; }
.zone--b { bottom: 0; }
.zone--l, .zone--r { top: var(--edge); bottom: var(--edge); width: var(--edge); flex-direction: column; }
.zone--l { left: 0; }
.zone--r { right: 0; }
@media (max-width: 760px) { .frame, .zone { display: none; } }

.d1 { font-size: clamp(30px, 4.4vw, 66px); line-height: 1.04; font-weight: 800; letter-spacing: -0.04em; }
.d1 .l2 { color: var(--blue); margin-left: 0.12em; }
.d2 { font-size: clamp(30px, 5.4vw, 68px); line-height: 1.12; font-weight: 800; letter-spacing: -0.04em; text-wrap: balance; }
.body { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.72; color: var(--ink-2); }
.s-no { font-family: var(--mono); font-size: 17px; font-weight: 700; letter-spacing: 0.13em; color: var(--ink-3); }
.tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 17px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--blue); }
.tag::before { content: ""; width: 30px; height: 1px; background: currentColor; }
.tag--pale { color: rgba(255,255,255,.72); }

.b { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; font-size: 16px; font-weight: 700; border: 1px solid var(--blue); background: var(--blue); color: #fff; transition: background-color .15s, color .15s, border-color .15s; }
.b:hover { background: var(--ink); border-color: var(--ink); }
.b--line { background: transparent; color: var(--blue); border-color: var(--blue); }
.b--line:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.b--inv { background: #fff; color: var(--ink); border-color: #fff; }
.b--inv:hover { background: transparent; color: #fff; }
.b--invLine { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.b--invLine:hover { border-color: #fff; }
.b svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.b--sm { height: 42px; padding: 0 18px; font-size: 15px; }

/* ── 標題欄:導覽列 = 圖框的上緣,不是浮在上面的另一條 ─────── */
.tb {
  position: absolute;
  top: calc(var(--edge) + 1px);
  left: calc(var(--edge) + 1px);
  right: calc(var(--edge) + 1px);
  z-index: 95;
  display: grid;
  grid-template-columns: 25% minmax(0, 1fr) auto auto;
  height: 82px;
}
/* 圖框Form裡的Field名, , 跟簡報標題欄同一套 */
.fld {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: .18em; color: var(--ink-3); line-height: 1;
}

/* 標題欄:跟Drawings一樣壓在圖框的右下角 */
.tbl {
  position: absolute;
  bottom: calc(var(--edge) + 1px);
  left: calc(var(--edge) + 1px);
  width: calc(100% - 2 * (var(--edge) + 1px));
  z-index: 95;
  display: grid;
  height: 80px;
  grid-template-columns: 37.5% 62.5%;  /* 左邊留白,標題欄多一格語言,從第 4 區開始 */
  pointer-events: none;
}
.tbl-in {
  display: grid; grid-template-columns: 20% 60% 20%;  /* 語言 + 五個連結 + CTA */
  border-top: 1px solid var(--sheet);
  border-left: 1px solid var(--sheet);
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
}
/* 每一格都像圖框Form的Field:Field名浮在左上角,Contents佔滿整格, , 這樣 hover 的底色才會從上緣一路蓋到下緣。 */
.tbl-col { position: relative; min-width: 0; }
.tbl-col--cta { border-left: 1px solid var(--sheet); }
.tbl-col .fld { position: absolute; top: 7px; left: 14px; z-index: 2; pointer-events: none; }
.tbl-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 100%; }
/* 導覽各項之間放一小段分隔線,不要通到上下緣 */
.tbl-row .tb-link { position: relative; }
.tbl-row .tb-link + .tb-link::before {
  /* 格子上方有 22px 是Field名的高度,分隔線要往下補一半才會跟文字對齊 */
  content: ""; position: absolute; left: 0; top: calc(50% + 11px); transform: translateY(-50%);
  width: 1px; height: 20px; background: var(--sheet-2);
}
.tbl .tb-link { height: 100%; padding-top: 22px; }
.tbl .tb-cta { height: 100%; padding-top: 0; }
.tbl .tb-cta a { padding-top: 22px; }
.tbl > * { pointer-events: auto; }
.tbl-gap { pointer-events: none; }
.tb-c { padding: 7px 14px 8px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
/* 只在 logo 與導覽之間切一刀,導覽各項之間不再分格 */
.tb-brand { border-right: 1px solid var(--sheet); border-bottom: 1px solid var(--sheet);
            background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
            justify-content: space-between; align-items: flex-start; padding: 9px 20px 10px; gap: 7px; }

/* 每個導覽Item自成一格,像圖框裡的Field */
.tb-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.tb-link:hover { background: var(--blue-wash, rgba(30,72,216,.07)); color: var(--blue); }
.tb-link.is-on { color: var(--blue); font-weight: 700; }
.tb-brand { justify-content: center; padding: 10px 20px; }
.tb-wm { width: 100%; max-width: 212px; margin-left: 30px; height: auto; color: var(--ink); }
.tb-cta { padding: 0; border-left: 1px solid var(--rule); }
.tb-cta--m { display: none; }
/* 右下標題欄裡的 CTA:不上底色,靠左邊一條分隔線跟其他Item分開 */
.tbl .tb-cta { border-left: 0; }
.tbl .tb-cta a { background: none; color: var(--ink); font-weight: 700; }
.tbl .tb-cta a:hover { background: rgba(30,72,216,.07); color: var(--blue); }
.tb-cta a { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 8px; background: var(--ink); color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; }
.tb-cta a:hover { background: var(--blue); }
.burger { display: none; align-items: center; padding: 0 16px; cursor: pointer; border-left: 1px solid var(--rule); }
.burger svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; }
.drop { position: absolute; top: calc(var(--edge) + 81px); left: calc(var(--edge) + 1px); right: calc(var(--edge) + 1px); z-index: 94; display: none; background: #fff; border: 1px solid var(--rule); border-top: 0; }
.drop a { display: block; padding: 13px 16px; border-bottom: 1px solid var(--rule); font-size: 16px; }
.drop a:last-child { border-bottom: 0; }
#nt:checked ~ .drop { display: block; }
@media (max-width: 1080px) {
  .tb { grid-template-columns: minmax(0, 1fr) auto auto; }
  /* 桌機版是「一格一格」的圖框Field;手機版格子太少,拼起來的邊線很零碎,
     所以整條做成一塊白底 + 一條下緣線就好 */
  .tb { background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--sheet); }
  /* 手機版首頁不用圖框標題欄那一套,直接跟其他頁面共用Fixed導覽列 */
  .tb, .drop { display: none !important; }
  .nb { transform: none; opacity: 1; pointer-events: auto; }
  .tbl { display: none; }
  .scr--one { padding-bottom: 72px; padding-top: 100px; }
  .tb-link { display: none; }
  .tb-cta--m { display: flex; }
  .burger { display: flex; }
}
@media (max-width: 560px) { .tb-cta a { padding: 0 17px; font-size: 15px; } .tb-wm { max-width: 130px; } .tb-brand { padding: 8px 14px; } }

/* HERO */
.hero { padding-top: clamp(44px, 7vw, 92px); }
.hero h1 { margin-top: 22px; }
.hero-foot { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(20px,4vw,56px); align-items: end; margin-top: clamp(26px,3.5vw,44px); }
@media (max-width: 860px) { .hero-foot { grid-template-columns: 1fr; align-items: start; } }
.hero-foot > p { font-size: clamp(16px,1.4vw,20px); line-height: 1.7; color: var(--ink-2); max-width: 44ch; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-foot .cta { margin-top: 0; }
@media (max-width: 860px) { .hero-foot .cta { margin-top: 8px; } }

.strip { display: flex; flex-wrap: wrap; border-top: 1px solid var(--ink); margin-top: clamp(32px,5vw,60px); }
.strip > div { flex: 1 1 190px; padding: 20px 24px 22px 0; border-right: 1px solid var(--rule); }
.strip > div:last-child { border-right: 0; padding-right: 0; }
.strip b { display: block; font-size: clamp(28px,3.2vw,42px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.strip span { display: block; margin-top: 9px; font-family: var(--mono); font-size: 15px; letter-spacing: 0.07em; color: var(--ink-3); text-transform: uppercase; }

.bl { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--blue); color: #fff; font-family: var(--mono); font-size: 15px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 4px rgba(255,255,255,.92); }
.legend { display: flex; flex-wrap: wrap; border-left: 1px solid var(--rule-2); border-right: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.legend > div { flex: 1 1 200px; display: flex; align-items: baseline; gap: 11px; padding: 15px 18px; border-right: 1px solid var(--rule); }
.legend > div:last-child { border-right: 0; }
.legend i { font-style: normal; font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--blue); }
.legend span { font-family: var(--mono); font-size: 15px; color: var(--ink-3); }
.legend b { margin-left: auto; font-size: 15px; font-variant-numeric: tabular-nums; }

.tick { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); overflow: hidden; padding: 28px 0; margin-top: clamp(48px,7vw,92px); }
.tick-lab { font-family: var(--mono); font-size: 15px; letter-spacing: 0.13em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 22px; }
.tick-t { display: flex; width: max-content; animation: tk 76s linear infinite; }
.tick:hover .tick-t { animation-play-state: paused; }
.tick-s { display: flex; align-items: center; }
.mq-c { display: grid; place-items: center; width: 258px; height: 82px; flex: none; }
.mq-c img { opacity: .6; filter: grayscale(1); transition: opacity .2s, filter .2s; }
.mq-c:hover img { opacity: 1; filter: none; }
@keyframes tk { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tick-t { animation: none; } }
@media (max-width: 560px) { .mq-c { width: 168px; height: 60px; } }

.s { padding: clamp(62px,9vw,128px) 0; }
.s--rule { border-top: 1px solid var(--rule); }
.lead2 { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(20px,4vw,64px); align-items: end; }
@media (max-width: 900px) { .lead2 { grid-template-columns: 1fr; align-items: start; } }

.rows { margin-top: clamp(34px,5vw,60px); border-top: 1px solid var(--ink); }
.row { display: grid; grid-template-columns: 78px minmax(0,1fr) minmax(0,1.1fr); gap: clamp(14px,3vw,44px); align-items: start; padding: clamp(20px,3vw,32px) 0; border-bottom: 1px solid var(--rule); transition: background-color .18s; }
.row:hover { background: rgba(30,72,216,.035); }
.row-n { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--blue); padding-top: 5px; }
.row h3 { font-size: clamp(20px,2.1vw,29px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.16; }
.row p { color: var(--ink-2); font-size: clamp(15.5px,1.2vw,17px); }
.row--more h3, .row--more p, .row--more .row-n { color: var(--ink-3); }
@media (max-width: 760px) { .row { grid-template-columns: 40px minmax(0,1fr); } .row p { grid-column: 2; } }

.block { background: var(--blue); color: #fff; }
.block--orange { background: var(--orange); }
.block--night { background: var(--night); }
.block .body { color: rgba(255,255,255,.8); }

.duo { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(32px,5vw,56px); border: 1px solid rgba(255,255,255,.3); }
@media (max-width: 820px) { .duo { grid-template-columns: 1fr; } }
.duo-c { padding: clamp(22px,3vw,38px); }
.duo-c + .duo-c { border-left: 1px solid rgba(255,255,255,.3); }
@media (max-width: 820px) { .duo-c + .duo-c { border-left: 0; border-top: 1px solid rgba(255,255,255,.3); } }
.duo-c--ours { background: #fff; color: var(--ink); }
.duo-k { font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.duo-c--ours .duo-k { color: var(--blue); }
.duo-li { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.22); font-size: 16px; line-height: 1.6; }
.duo-c--ours .duo-li { border-bottom-color: var(--rule); }
.duo-li:last-child { border-bottom: 0; }
.duo-li i { font-style: normal; font-family: var(--mono); flex: none; opacity: .6; }
.duo-c--ours .duo-li i { color: var(--blue); opacity: 1; }

.trio { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: clamp(34px,5vw,60px); background: var(--rule); border-top: 1px solid var(--ink); }
@media (max-width: 820px) { .trio { grid-template-columns: 1fr; } }
.tri { background: var(--paper); padding: clamp(22px,3vw,38px) clamp(20px,2.4vw,32px) clamp(28px,4vw,44px) 0; }
.tri b { display: block; font-size: clamp(52px,7vw,92px); font-weight: 800; line-height: .86; letter-spacing: -0.05em; color: var(--rule-2); }
.tri h3 { margin: 18px 0 8px; font-size: clamp(19px,1.8vw,23px); font-weight: 700; letter-spacing: -0.02em; }
.tri p { color: var(--ink-2); font-size: 16px; }

.grant { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(26px,4vw,64px); align-items: end; }
@media (max-width: 900px) { .grant { grid-template-columns: 1fr; align-items: start; } }
.grant-n { display: flex; flex-wrap: wrap; gap: 32px 52px; }
.grant-n b { display: block; font-size: clamp(50px,6.4vw,88px); font-weight: 800; line-height: .86; letter-spacing: -0.05em; }
.grant-n b em { font-style: normal; font-size: .42em; margin-left: 6px; }
.grant-n span { display: block; margin-top: 12px; font-family: var(--mono); font-size: 15px; letter-spacing: 0.04em; color: rgba(255,255,255,.82); }

.figs { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: clamp(34px,5vw,56px); background: var(--rule); border-top: 1px solid var(--ink); }
@media (max-width: 820px) { .figs { grid-template-columns: 1fr; } }
.fig { background: var(--paper); padding: clamp(24px,3vw,38px) 26px clamp(28px,4vw,44px) 0; }
.fig b { display: block; font-size: clamp(50px,6.6vw,92px); font-weight: 800; line-height: .86; letter-spacing: -0.05em; color: var(--blue); }
.fig span { display: block; margin-top: 16px; font-size: 16px; color: var(--ink-2); }
.fig i { display: block; margin-top: 6px; font-style: normal; font-family: var(--mono); font-size: 15px; color: var(--ink-3); }

.pt { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 54px; margin-top: clamp(28px,4vw,46px); }
.pt-c { display: grid; place-items: center; height: 70px; }
.cap { margin-top: 15px; font-family: var(--mono); font-size: 15px; line-height: 1.7; color: var(--ink-3); max-width: 70ch; }

.about { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(26px,4vw,70px); align-items: center; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }
.about img { border: 1px solid var(--rule-2); }
.tl { display: grid; grid-template-columns: repeat(5,1fr); margin-top: clamp(28px,4vw,44px); border-top: 1px solid var(--ink); }
@media (max-width: 760px) { .tl { grid-template-columns: repeat(2,1fr); } }
.tl > div { padding: 17px 14px 20px 0; border-right: 1px solid var(--rule); }
.tl > div:last-child { border-right: 0; }
.tl b { display: block; font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--blue); }
.tl span { display: block; margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

.end { padding: clamp(70px,11vw,146px) 0; }
.ft { background: #EDF2FA; color: var(--ink-2); font-size: 15px; }
.ft-in { display: grid; grid-template-columns: minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap: 44px; padding-top: clamp(64px, 7vw, 100px); padding-bottom: clamp(48px, 5.4vw, 76px); }
@media (max-width: 1000px) { .ft-in { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 880px) { .ft-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ft-in { grid-template-columns: 1fr; gap: 28px; } }
.ft .wm { width: clamp(150px, 13.5vw, 186px); color: var(--ink); }
.ft-in > div > p { margin-top: 16px; max-width: 32ch; line-height: 1.7; }
.ft h4 { font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }
.ft li { padding: 7px 0; }
.ft a:not(.b):hover { color: var(--blue); }
.ft-bar { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding-top: clamp(22px, 2.2vw, 32px); padding-bottom: clamp(34px, 3.6vw, 52px); border-top: 1px solid var(--sheet-2); font-family: var(--mono); font-size: 15px; }

.line-mask { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .js .up { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.3,1); }
  .js .up.in { opacity: 1; transform: none; }
}

/* ═══ 功能頁:兩條路的分流 ═══════════════════════════════ */
.fork { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: clamp(34px, 5vw, 58px); background: var(--rule-2); border: 1px solid var(--rule-2); }
@media (max-width: 820px) { .fork { grid-template-columns: 1fr; } }
.fk { display: flex; flex-direction: column; padding: clamp(26px, 3.2vw, 44px); background: var(--paper); transition: background-color .18s; }
.fk--a { background: var(--blue); color: #fff; }
.fk--a:hover { background: var(--blue-d, #00228C); }
.fk--b:hover { background: #F4F7FD; }
.fk-k { font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--blue); }
.fk--a .fk-k { color: rgba(255,255,255,.72); }
.fk h2 { margin: 16px 0 12px; font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.fk p { font-size: clamp(15.5px, 1.25vw, 17.5px); line-height: 1.7; color: var(--ink-2); max-width: 34ch; }
.fk--a p { color: rgba(255,255,255,.82); }
.fk-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.fk-tags span { font-family: var(--mono); font-size: 15px; letter-spacing: .04em; padding: 6px 11px; border: 1px solid var(--rule-2); color: var(--ink-2); }
.fk--a .fk-tags span { border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.9); }
.fk-go { display: inline-flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 30px; font-weight: 700; font-size: 16px; }
.fk-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .18s; }
.fk:hover .fk-go svg { transform: translateX(4px); }

/* 功能列上的標記 */
.chip { display: inline-block; font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: .08em; padding: 5px 10px; border: 1px solid var(--rule-2); color: var(--ink-3); margin-bottom: 12px; }
.chip--now { border-color: var(--blue); color: var(--blue); }
.chip--sys { border-color: var(--orange); color: var(--orange); }

/* 大寫的區段Code A / B */
.mark { display: flex; align-items: baseline; gap: 18px; }
.mark b { font-size: clamp(46px, 6vw, 84px); font-weight: 800; line-height: 1; letter-spacing: -.05em; color: var(--rule-2); }

/* ═══════════════════════════════════════════════════════════
   吸附式首頁:一屏一個Contents
   用 svh 而不是 vh, , 手機網址列收合時 vh 會跳,svh 取最小值不會。
   ═══════════════════════════════════════════════════════════ */
/* 捲動吸附全部拿掉,就是一般的自由捲動 */
/* 每個頂層區塊都得是吸附點, , 只有一個吸附點時瀏覽器會一直彈回去,捲不動 */
.scr {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 30px;
  position: relative;
}
/* 圖框與標題欄只屬於第一屏, , 捲過去就沒了 */
.scr--one { padding-top: calc(var(--edge) + 82px); padding-bottom: calc(var(--edge) + 94px); }
@supports not (height: 100svh) { .scr { min-height: 100vh; } }
/* 第一屏要正好一個畫面高:圖面用 max-height 收住,寬度會跟著 aspect-ratio 縮 */
@media (min-width: 1001px) {
  /* 相對位移:整區往右上挪一點,不影響版面高度 */
  .stage { width: 81%; max-height: calc((100svh - 232px) * .81); left: 22px; top: -26px; }
  @supports not (height: 100svh) { .stage { max-height: calc((100vh - 232px) * .81); } }
}

/* 手機吸附會跟慣性捲動打架,先退回一般捲動 */
@media (max-width: 760px) { .scr { min-height: auto; padding-bottom: 72px; } .scr--one { padding-top: 92px; } }

/* ── 第一屏:左字右圖 ────────────────────────────────────── */
.h1grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(28px, 4vw, 72px); align-items: center; width: 100%; }
@media (max-width: 1000px) { .h1grid { grid-template-columns: 1fr; gap: 34px; } }
.h1txt .d1 { margin-top: 20px; }
.h1txt .sub { margin-top: clamp(18px, 2vw, 26px); font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.72; color: var(--ink-2); max-width: 30ch; }
.h1txt .sub b { color: var(--ink); font-weight: 700; }
.h1txt .cta { margin-top: clamp(26px, 3vw, 38px); }

/* ── 量測動畫 ───────────────────────────────────────────── */
.iso { position: relative; }
.iso svg { display: block; width: 100%; height: auto; overflow: visible; }
.dim { fill: none; stroke: var(--blue); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.dim--thin { stroke: var(--blue); stroke-width: 0.9; stroke-dasharray: 3 3; opacity: .7; }
.dimhead { fill: var(--blue); }
.dimtxt { fill: var(--blue); font-family: var(--mono); font-size: 21px; font-weight: 700; letter-spacing: .02em; }
.dimtxt--sm { font-size: 18px; }



@media (prefers-reduced-motion: no-preference) {
  .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .55s cubic-bezier(.4,0,.2,1) forwards; }
  .fadein { opacity: 0; animation: fadein .4s ease forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes fadein { to { opacity: 1; } }
}

.scr--one { overflow: hidden; }
.h1grid { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); align-items: center; }
/* 第一屏的字往左靠,右邊那張圖才有地方鋪開 */
.scr--one .w { padding-left: clamp(10px, 1.2vw, 18px); }
.h1txt .sub { font-size: clamp(14.5px, 1.05vw, 16px); max-width: 30ch; }
.h1txt .d1 { margin-top: 16px; }
@media (max-width: 1000px) {
  .h1grid { grid-template-columns: 1fr; gap: 30px; }
  .scr--one .w { padding-left: var(--gut); }
  /* 單欄之後右邊沒有等角視圖了,說明文字放到滿版 */
  .h1txt .sub { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════
   第一屏右側:等角視圖是主角,AI 從它身上把三張視圖抽出來,浮在前面。
   黑線 = 圖上原本就有的;藍線 = AI 加上去的。
   ═══════════════════════════════════════════════════════════ */
.stage { position: relative; width: 100%; margin-inline: auto; aspect-ratio: 1000 / 920; perspective: 1200px; perspective-origin: 55% 45%; }

.stage-part { position: absolute; inset: 0; }
.stage-ov { width: 100%; height: 100%; overflow: visible; }
.cards { position: absolute; inset: 0; }
.stage-ov .dim { fill: none; stroke: var(--blue); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.stage-ov .dim--thin { stroke-width: 1; stroke-dasharray: 5 5; opacity: .65; }
.stage-ov .dimhead { fill: var(--blue); }
.stage-ov .call-l { stroke-width: 1.1; }
.face { opacity: 0; }
.scan { opacity: 0; }
/* 時間軸接手前先藏起來,不然載入瞬間會閃一下 */
.stage-iso, .stage-real { opacity: 0; }
.sheen { opacity: 1; }
.dots { opacity: 0; }
.tick { fill: none; stroke: var(--blue); stroke-width: 3.4; stroke-linecap: round;
        stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0; }
.stage-ov .dimtxt { fill: var(--blue); font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: .02em; }
.brk { fill: none; stroke: var(--blue); stroke-width: 2.2; vector-effect: non-scaling-stroke; opacity: .6; }
.mono-l { fill: var(--blue); font-family: "JetBrains Mono", "Noto Sans TC", ui-monospace, monospace;
          font-size: 21px; font-weight: 700; letter-spacing: .18em; }
.chip rect { fill: none; stroke: var(--blue); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .55; }

/* 玻璃卡:::before 是毛玻璃面,::after 只留 1px 的邊, , 邊用對角漸層,左上跟右下兩個角亮、中段幾乎透明,就是玻璃緣受光的樣子。 */
.card {
  position: absolute; margin: 0; will-change: transform;
  padding: 22px 24px 0;
  border-radius: 22px;
}
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: linear-gradient(150deg, rgba(255,255,255,.94), rgba(228,237,255,.8) 55%, rgba(255,255,255,.88));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 30px 52px -30px rgba(10,18,38,.4);
}
.card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(138deg,
    rgba(30,72,216,.46) 0%,
    rgba(30,72,216,.10) 28%,
    rgba(30,72,216,.05) 50%,
    rgba(30,72,216,.10) 72%,
    rgba(30,72,216,.42) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.card img { display: block; width: 100%; height: auto; mix-blend-mode: multiply;
            filter: contrast(1.55) brightness(.9); }
.card figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 2px 4px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .12em; color: var(--ink-3);
}
.card figcaption i { width: 7px; height: 7px; background: var(--blue); flex: none; }
/* 卡片擺的Position對應它是從哪個面抽出來的:正面→左下、右側面→右邊、頂面→上面 */
.card--f { left: -4%;  top: 56%;  width: 31%; }
.card--r { left: 75%;  top: 50%;  width: 29%; }
.card--t { left: 52%;  top: -11%; width: 31%; }

@media (max-width: 1000px) {
  .stage { aspect-ratio: 1000 / 860; }
  .card--f { left: 0; top: 68%; width: 31%; }
  .card--r { left: 69%; top: 40%; width: 30%; }
  .card--t { left: 36%; top: 0; width: 31%; }
}

/* 手機:零件放大置中,三張視圖排成兩欄(上排兩張、下排一張),不用左右滑。
   斷點跟 .h1grid 收成單欄的 1000px 對齊,不然中間那段會被切掉。 */
@media (max-width: 1000px) {
  .stage { aspect-ratio: auto; perspective: none; }
  .stage-part { position: relative; inset: auto; aspect-ratio: 760 / 620; }
  .cards { position: static; display: grid; grid-template-columns: 1fr 1fr;
           gap: 10px; margin-top: 20px; }
  .card { position: static; width: auto; transform: none !important; }
}
@media (min-width: 561px) and (max-width: 1000px) { .card { flex: 0 0 31.5%; } }

/* ── 從圖上讀到的屬性:深藍玻璃標籤 ──────────────────────── */
.tags { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.tag-f {
  position: absolute; display: inline-flex; align-items: baseline; gap: 10px;
  padding: 9px 15px 10px;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(226,235,255,.95), rgba(205,221,255,.86));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 14px 26px -22px rgba(10,18,38,.32);
  white-space: nowrap; will-change: transform;
}
.tag-f b { font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: .03em; color: var(--blue); }
.tag-f--1 { left: 6%;  top: 4%; }
.tag-f--2 { left: 0;   top: 43%; }
.tag-f--3 { left: 84%; top: 17%; }
.tag-f--4 { left: 39%; top: 88%; }
@media (max-width: 1000px) { .tags { display: none; } }

/* ═══════════════════════════════════════════════════════════
   第二屏:能What happens。不用圖框,改成淺Grey-blue底 + 一張欄線分明的Form, , 加工業的文件(Drawings、Quotations、Inspection sheet)上都長這樣。
   ═══════════════════════════════════════════════════════════ */
.scr--two {
  background: #F2F5FA;
  padding-top: clamp(48px, 6vh, 84px);
  padding-bottom: clamp(48px, 6vh, 84px);
  overflow: hidden;
}
.two-in {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(32px, 4.5vw, 76px);
  align-items: center;
  width: 100%;
}
@media (max-width: 1000px) {
  .two-in { grid-template-columns: 1fr; gap: 32px; }
}

.two-txt .s-no { font-size: 15px; }
.two-txt .d2 { margin-top: 16px; font-size: clamp(30px, 3.5vw, 54px); }
/* 內文寬度跟標題對齊:標題首行 8 個字,字距 -0.04em,所以約 7.7 個字級寬 */
.two-txt .body { margin-top: clamp(16px, 2vw, 24px); font-size: clamp(15px, 1.15vw, 17px);
                 max-width: calc(clamp(30px, 3.5vw, 54px) * 7.7); }
.two-txt .body b { color: var(--ink); font-weight: 700; }
.two-cta { margin-top: clamp(22px, 3vw, 34px); }

/* Form:外框 + 欄線 + 列線,跟文件上的零件表同一套 */
.ftab { border: 1px solid var(--sheet); background: #fff; }
.ftab-h, .frow {
  display: grid;
  grid-template-columns: 66px minmax(0, .86fr) minmax(0, 1.7fr);
}
.ftab-h {
  border-bottom: 1px solid var(--sheet);
  background: #FAFBFE;
}
.ftab-h span {
  padding: 9px 16px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: .14em; color: var(--ink-3);
  border-left: 1px solid var(--rule);
}
.ftab-h span:first-child, .frow > *:first-child { border-left: 0; }
.frow { border-top: 1px solid var(--rule); transition: background-color .16s; }
.frow:first-child { border-top: 0; }
.frow > * { padding: clamp(11px, 1.5vh, 17px) 16px; border-left: 1px solid var(--rule); min-width: 0; }
.frow i {
  font-family: var(--mono); font-size: 14px; font-weight: 700; font-style: normal;
  color: var(--blue); display: flex; align-items: center;
}
.frow b { font-size: clamp(15px, 1.2vw, 17.5px); font-weight: 700; display: flex; align-items: center; }
.frow p { font-size: clamp(13.5px, 1.02vw, 15px); line-height: 1.62; color: var(--ink-2); }
.frow:hover { background: rgba(30,72,216,.045); }

.frow--more { border-top: 1px dashed var(--rule-2); }
/* 「And more」整列就是連到 AI Tools頁的連結 */
a.frow--more { color: inherit; text-decoration: none; }
a.frow--more:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

@media (max-width: 700px) {
  .ftab-h, .frow { grid-template-columns: 46px minmax(0, 1fr); }
  .ftab-h span:last-child, .frow p { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   第三屏:Start using it。深色,上面說明、下面三個大數字。
   ═══════════════════════════════════════════════════════════ */
.scr--three {
  background: var(--ink);
  color: #fff;
  padding-top: clamp(48px, 6vh, 84px);
  padding-bottom: clamp(48px, 6vh, 84px);
  overflow: hidden;
}
.three-in { display: flex; flex-direction: column; justify-content: center; width: 100%; }

.three-head { display: block; }   /* 說明放在標題正下方,上下空間夠 */
.three-head .s-no { font-size: 15px; color: rgba(255,255,255,.5); }
.three-head .d2 { margin-top: 16px; font-size: clamp(30px, 3.5vw, 54px); color: #fff; }
/* 宋體的字面比黑體小,放大一點兩行才等重 */
.three-head .d2 .sf { font-size: 1.24em; letter-spacing: -.02em; }
.three-head .body {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.75;
  color: rgba(255,255,255,.66);
  max-width: 58ch;
  margin-top: clamp(18px, 2.6vh, 30px);
}
.three-head .body b { color: #fff; font-weight: 700; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(30px, 5vh, 62px);
}
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step {
  padding: clamp(22px, 4vh, 44px) clamp(18px, 2.4vw, 40px);
  border-left: 1px solid rgba(255,255,255,.14);
  min-width: 0;
}
@media (max-width: 820px) {
  /* 手機版整組往右挪一點,不要貼著左邊 */
  .step { border-left: 0; border-top: 1px solid rgba(255,255,255,.14);
          padding-left: 18px; padding-right: 0; overflow: visible; }
  .step:first-child { border-top: 0; }
  .step p.step-n { margin-left: -6px; }
}
.step p.step-n {
  margin-top: -14px;
  margin-left: -14px;      /* 斜體讓數字視覺上內縮,往左補一點才跟下面的字對齊 */
  font-family: var(--serif);
  font-size: clamp(56px, 7vw, 112px);
  font-weight: 700; line-height: 1; letter-spacing: -.02em;
  color: var(--orange);
}
.step h3 {
  margin-top: clamp(16px, 3vh, 34px);
  font-size: clamp(16.5px, 1.35vw, 20px); font-weight: 700; color: #fff;
}
.step > p:not(.step-n) {
  margin-top: 10px;
  font-size: clamp(13.5px, 1.02vw, 15px); line-height: 1.62;
  color: rgba(255,255,255,.58);
}

/* ═══════════════════════════════════════════════════════════
   第四屏:放眼國際。回到白底,只留頁面本身的方格,不畫圖框。
   ═══════════════════════════════════════════════════════════ */
.scr--four { padding-top: clamp(48px, 6vh, 84px); padding-bottom: clamp(48px, 6vh, 84px); overflow: hidden; }
.four-in {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 4.5vw, 76px);
  align-items: center;
  width: 100%;
}
@media (max-width: 1000px) {
  .four-in { grid-template-columns: 1fr; gap: 34px; }
}

.four-l .s-no { font-size: 15px; }
.four-l .d2 { margin-top: 16px; font-size: clamp(30px, 3.5vw, 54px); }

.stat { margin-top: clamp(22px, 3.4vh, 40px); }
.stat b {
  display: block;
  font-size: clamp(40px, 4.6vw, 72px); font-weight: 800; line-height: 1;
  letter-spacing: -.04em; color: var(--blue);
}
.stat b i { font-style: normal; }
.stat-k { display: block; margin-top: 8px; font-family: var(--mono); font-size: 14px; letter-spacing: .12em; color: var(--ink-3); }
.stat-s { display: block; margin-top: 5px; font-size: clamp(14.5px, 1.15vw, 17px); font-weight: 700; }
/* Industries:沒有大數字,只有標籤 + 一長串Industry,字級收小一點才排得下。
   上面拉一條分隔線,跟「Countries served」那塊切開 */
.stat--kv { border-top: 1px solid var(--rule); padding-top: clamp(18px, 2.6vh, 30px); }
.stat--kv .stat-k { margin-top: 0; }
.stat--kv .stat-s { font-size: clamp(13px, 1.02vw, 15px); font-weight: 500; line-height: 1.72;
                    color: var(--ink-2); word-break: keep-all; }

.four-m { border: 1px solid var(--rule); background: #fff; }
.four-m svg { width: 100%; height: auto; display: block; overflow: hidden; }
.mp-edge { fill: none; stroke: var(--rule-2); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.mp-land { fill: #fff; stroke: none; }
.mp-l { font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: .08em; fill: var(--ink); }
.mp-pin { fill: var(--blue); }
.mp-ping { fill: none; stroke: var(--blue); stroke-width: 1.6; }

/* ═══════════════════════════════════════════════════════════
   Customer與Ourpartners:正方形卡片、右上角切掉一塊。缺角的外框線是靠
   兩層同形狀的裁切疊出來的, , clip-path 會把 border 一起裁掉,
   所以外層鋪邊框色、內層鋪白色再內縮 1px。
   ═══════════════════════════════════════════════════════════ */
.scr--five {
  padding-top: clamp(30px, 4vh, 56px);
  padding-bottom: clamp(30px, 4vh, 56px);
  overflow: hidden;
}
.five-in { display: flex; flex-direction: column; justify-content: center; width: 100%; }

.lgrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.3vw, 20px);
}
.lhead {
  grid-column: span 2; grid-row: span 2;
  display: flex; flex-direction: column; justify-content: center;
  padding-right: clamp(6px, .8vw, 12px);
}
.five-t { font-size: clamp(30px, 3.5vw, 54px); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; white-space: nowrap; }
.lhead-cta { margin-top: clamp(18px, 2.4vh, 28px); }
.lhead p {
  margin-top: clamp(12px, 1.8vh, 20px);
  font-size: clamp(13.5px, 1.04vw, 15px); line-height: 1.8; color: var(--ink-2);
}

/* 整張卡翻面:旋轉的是 .lflip,而卡片的外框、白底、logo 全都在它裡面,
   所以翻的是整張卡而不是卡片裡的圖。 */
.lcell {
  --n: clamp(14px, 1.5vw, 24px);
  position: relative; aspect-ratio: 1;
  perspective: 1000px;
}
.lflip { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.lface {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.lface--b { transform: rotateY(180deg); }

/* 缺角的外框線靠兩層同形狀的裁切疊出來, , clip-path 會把 border 一起裁掉,
   所以外層鋪邊框色、內層鋪白色再內縮 1px。 */
.lcard, .lgrid .pt-c {
  --n: clamp(14px, 1.5vw, 24px);
  position: absolute; inset: 0;
  background: var(--rule-2);
  clip-path: polygon(0 0, calc(100% - var(--n)) 0, 100% var(--n), 100% 100%, 0 100%);
}
.lgrid .pt-c { position: relative; aspect-ratio: 1; width: auto; height: auto; display: flex; align-items: center; justify-content: center; }
.lcard::before, .lgrid .pt-c::before {
  content: ""; position: absolute; inset: 1px;
  background: #fff;
  clip-path: polygon(0 0, calc(100% - var(--n)) 0, 100% var(--n), 100% 100%, 0 100%);
}
.lcard img, .lgrid .pt-c img {
  position: relative; z-index: 1;
  width: 100% !important; height: 100% !important;
  padding: clamp(14px, 1.8vw, 30px);
  object-fit: contain;
  box-sizing: border-box;
}
.lcard img { opacity: .62; filter: grayscale(1); }
/* 這幾家的原圖留白Share跟其他家差很多,個別調內距才會視覺等大 */
.lgrid .pt-c:nth-of-type(1) img { padding: clamp(5px, .7vw, 11px); }   /* NVIDIA 自帶外框 */
.lgrid .pt-c:nth-of-type(2) img { padding: clamp(20px, 2.6vw, 44px); } /* aws */
.lgrid .pt-c:nth-of-type(5) img { padding: clamp(8px, 1.1vw, 18px); }  /* III */

.lpt-k {
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: clamp(10px, 1.4vw, 22px);
  text-align: right;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; line-height: 1.7; color: var(--ink-3);
}

@media (max-width: 1000px) {
  .lgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lhead { grid-column: span 4; grid-row: span 1; padding-bottom: clamp(16px, 3.4vw, 30px); }
  .five-t { white-space: normal; }
  .lpt-k {
    grid-column: span 4;
    justify-content: flex-start; text-align: left;
    padding-right: 0; padding-top: 4px;
  }
  .lpt-k br { display: none; }   /* 一整列夠寬,「Ourpartners」不用折 */
}
@media (max-width: 620px) { .lgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lhead, .lpt-k { grid-column: span 3; } }

/* ═══════════════════════════════════════════════════════════
   補助案:整屏品牌藍。前後是深藍黑與白,這一屏鋪滿藍色最跳。
   ═══════════════════════════════════════════════════════════ */
.scr--grant {
  background: var(--blue);
  color: #fff;
  padding-top: clamp(44px, 5.5vh, 78px);
  padding-bottom: clamp(44px, 5.5vh, 78px);
  overflow: hidden;
}
.grant-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: center;
  width: 100%;
}
@media (max-width: 1000px) { .grant-in { grid-template-columns: 1fr; gap: 32px; } }

.grant-l .s-no { font-size: 15px; color: rgba(255,255,255,.6); }
.grant-eb {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 700; letter-spacing: .1em; color: #FFB067;
}
.grant-eb::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.grant-l .d2 { margin-top: 12px; font-size: clamp(30px, 3.5vw, 54px); color: #fff; }
.grant-l .body {
  margin-top: clamp(18px, 2.6vh, 28px);
  font-size: clamp(15px, 1.2vw, 17.5px); line-height: 1.78;
  color: rgba(255,255,255,.78); max-width: 40ch;
}
.grant-l .body b { color: #fff; font-weight: 700; }
.grant-cta { margin-top: clamp(24px, 3.4vh, 38px); }
.scr--grant .b--inv { background: #fff; color: var(--blue); border-color: #fff; }
.scr--grant .b--inv:hover { background: transparent; color: #fff; }

.grant-r { border-top: 1px solid rgba(255,255,255,.28); }
.gr-row {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(14px, 2vw, 30px); align-items: baseline;
  padding: clamp(16px, 2.6vh, 28px) 0;
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.gr-row b {
  font-size: clamp(26px, 3vw, 46px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1; color: #fff;
}
.gr-row span { font-size: clamp(14px, 1.08vw, 16px); color: rgba(255,255,255,.72); }
.gr-row--warn b { color: #FFB067; }
@media (max-width: 560px) { .gr-row { grid-template-columns: 1fr; gap: 6px; } }


/* ── 零件裝飾:把實拍加工件切出來,從畫面邊緣切進來當背景元素 ─────────── */
.scr--two, .scr--five { position: relative; }
.scr--two > .w, .scr--five > .w { position: relative; z-index: 1; }
.deco {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.dp {
  position: absolute;
  /* 蓋一層淡化,但不要蓋太重, , 還看得出是實拍的金屬件 */
  filter: saturate(.55) contrast(.97);
  opacity: .72;
  will-change: transform;
}
/* rotate 用獨立屬性,才不會跟 GSAP 寫進 transform 的浮動打架 */
.dp-a { width: clamp(120px, 13vw, 196px); left: -5.4vw; top: 13%;    rotate: -14deg; }
.dp-b { width: clamp(88px, 9.4vw, 140px); left: 1.4vw;  bottom: -5%; rotate: 26deg; }
.dp-c { width: clamp(66px, 7.2vw, 108px); right: 1.6vw; top: 9.5%;  rotate: -22deg; }
.dp-d { width: clamp(112px, 12vw, 178px); right: -4.2vw; bottom: 7%; rotate: 17deg; }
.dp-e { width: clamp(104px, 11vw, 166px); left: -3.6vw; top: 9%;     rotate: 12deg; }
.dp-f { width: clamp(80px, 8.6vw, 128px); left: 2.6vw;  bottom: 3%;  rotate: -24deg; }
.dp-g { width: clamp(70px, 7.6vw, 114px); right: -1vw;  top: 24%;    rotate: 38deg; }
.dp-h { width: clamp(118px, 12.6vw, 190px); right: -4.6vw; bottom: -7%; rotate: 8deg; }
@media (max-width: 1000px) { .deco { display: none; } }

/* 線稿版:補助屏是整片實色藍,擺實拍照片會髒,所以改用描出來的輪廓線 */
.scr--grant { position: relative; }
.scr--grant > .w { position: relative; z-index: 1; }
.dl { position: absolute; display: block; color: #fff; opacity: .3; will-change: transform; }
.dl svg { display: block; width: 100%; height: auto; }
/* 每個零件的 viewBox 大小差很多,線寬要用螢幕像素算才會一致 */
.dl path { vector-effect: non-scaling-stroke; stroke-width: 1.15px; }
.dl-a { width: clamp(190px, 21vw, 320px); right: -4.5vw; bottom: -9%;  rotate: 6deg; }
.dl-b { width: clamp(130px, 14vw, 210px); left: -3.2vw;  top: 11%;     rotate: -13deg; }
.dl-c { width: clamp(96px, 10.4vw, 156px); left: 2.6vw;  bottom: 4%;   rotate: 15deg; opacity: .24; }
.dl-d { width: clamp(140px, 15vw, 226px); right: 3vw;    top: 9.5%;    rotate: -8deg; opacity: .26; }

/* ── FOOTER 補充:Company抬頭、徵才、條款 ─────────────────────────────── */
.ft-adr { margin-top: 14px; font-style: normal; line-height: 1.75; color: var(--ink-3); }
.ft-con { margin-top: 14px; line-height: 1.75; }
.ft-con a { display: block; color: var(--ink-3); }
.ft-con a:hover { color: var(--blue); }
.ft-join {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 28px; padding-top: clamp(28px, 3vw, 42px); padding-bottom: clamp(28px, 3vw, 42px);
  border-top: 1px solid var(--sheet-2);
}
.ft-join p { font-size: clamp(16px, 1.35vw, 20px); line-height: 1.6; color: var(--ink-2); }
.ft-join b { color: var(--ink); font-weight: 700; }
.ft-law a { text-decoration: underline; text-underline-offset: 3px; }


/* ── Fixed導覽列:第一屏的圖框標題欄捲走之後,由它接手 ───────────────── */
.nb {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  height: 82px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: 1px solid var(--sheet-2);
  transform: translateY(-101%);
  opacity: 0;
  pointer-events: none;
  transition: transform .34s cubic-bezier(.4,0,.2,1), opacity .26s ease;
}
.nb.on { transform: none; opacity: 1; pointer-events: auto; }
/* 往下捲的時候收起來,把整個畫面讓給Contents */
.nb.nb--up, .nb.on.nb--up { transform: translateY(-101%); }
.nb-in { display: flex; align-items: center; gap: clamp(12px, 2vw, 30px); height: 100%; }
.nb-brand { display: flex; align-items: center; }
.nb-wm { display: block; width: clamp(140px, 14vw, 202px); height: auto; color: var(--ink); }
.nb-nav { display: flex; align-items: center; gap: clamp(4px, 1.5vw, 28px); margin-left: auto; }
.nb-nav a {
  font-size: 15.5px; color: var(--ink-2); padding: 9px 4px;
  white-space: nowrap; transition: color .15s;
}
.nb-nav a:hover { color: var(--blue); }
.nb-nav a.is-on { color: var(--blue); font-weight: 700; }
.nb-cta {
  display: flex; align-items: center; height: 44px; padding: 0 22px;
  background: var(--blue); color: #fff;
  font-size: 15px; font-weight: 700; white-space: nowrap;
  transition: background-color .15s;
}
.nb-cta:hover { background: var(--ink); }
@media (max-width: 900px) {
  .nb { height: 68px; }
  .nb-nav { display: none; }
  .nb-wm { width: 172px; }
  .nb-cta { margin-left: auto; height: 36px; padding: 0 14px; font-size: 14.5px; }
}
@media (max-width: 420px) {
  .nb-in { gap: 8px; }
  .nb-wm { width: 146px; }
  .nb-cta { padding: 0 11px; font-size: 13.5px; }
  .nb-burger { width: 36px; height: 36px; margin-left: 6px; }
}

/* 各屏收成單欄之後,說明文字原本為了配合窄欄限了寬,手機上右邊會空一大塊。
   放在檔尾才蓋得過前面的 base rule(同權重、後者勝)。 */
@media (max-width: 1000px) {
  .two-txt .body, .four-l .body, .three-head .body, .grant-l .body { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Contents頁(Cases、Blog):Fixed導覽列一直在,底下是一般捲動的長頁
   ═══════════════════════════════════════════════════════════════ */
.pg { background: #fff; }
.nb--fixed { transform: none; opacity: 1; pointer-events: auto; }
/* overflow-x: clip 只切水平方向,不會變成捲動容器,sticky 仍然正常。
   標題區那道 120% 寬的光暈原本會把手機版的頁寬撐到 110%。 */
.pg-main { padding-top: 82px; overflow-x: clip; }
@media (max-width: 900px) { .pg-main { padding-top: 68px; } }

.pg-head { padding-top: clamp(56px, 8vh, 104px); padding-bottom: clamp(34px, 4.6vh, 56px); }
.pg-kicker { font-family: var(--mono); font-size: 12.5px; font-weight: 700;
             letter-spacing: .18em; color: var(--ink-3); }
.pg-t { margin-top: 14px; font-size: clamp(36px, 5.6vw, 76px); font-weight: 800;
        letter-spacing: -.045em; line-height: 1.06; }
.pg-sub { margin-top: clamp(16px, 2vw, 24px); font-size: clamp(15px, 1.25vw, 18px);
          line-height: 1.78; color: var(--ink-2); max-width: 62ch; }

/* ── 案例清單:三欄卡片 ───────────────────────────────────────── */
.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
           gap: clamp(18px, 2vw, 30px); }
@media (max-width: 1000px) { .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .cs-grid { grid-template-columns: 1fr; } }

.cs-card { display: flex; flex-direction: column; border: 1px solid var(--rule);
           background: #fff; transition: border-color .18s, transform .18s; }
.cs-card:hover { border-color: var(--blue); transform: translateY(-3px); }
.cs-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #F2F5FA;
          border-bottom: 1px solid var(--rule); }
.cs-img img { width: 100%; height: 100%; object-fit: cover; display: block;
              transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.cs-card:hover .cs-img img { transform: scale(1.035); }
/* 沒有照片的用線稿零件,鋪在品牌藍上 */
.cs-art { display: flex; align-items: center; justify-content: center;
          width: 100%; height: 100%; background: var(--blue); color: rgba(255,255,255,.62); }
.cs-art svg { width: 54%; height: auto; }
.cs-art path { vector-effect: non-scaling-stroke; stroke-width: 1.3px; }

.cs-in { display: flex; flex-direction: column; flex: 1;
         padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 28px); }
.cs-k { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.cs-k i { font-style: normal; font-family: var(--mono); font-size: 12px; font-weight: 700;
          letter-spacing: .1em; color: var(--ink-3); }
.cs-k i:first-child { color: var(--blue); }
.cs-n { margin-top: 12px; font-size: clamp(19px, 1.6vw, 23px); font-weight: 800;
        letter-spacing: -.03em; line-height: 1.3; }
.cs-d { margin-top: 11px; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }
.cs-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px;
         font-size: 14.5px; font-weight: 700; color: var(--blue); }
.cs-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2;
             transition: transform .18s; }
.cs-card:hover .cs-go svg { transform: translateX(3px); }

/* ── 頁尾前的 CTA 條 ─────────────────────────────────────────── */
.cs-cta { margin-top: clamp(48px, 7vh, 88px); margin-bottom: clamp(48px, 7vh, 88px); }
.cs-cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
             gap: 20px 32px; padding: clamp(26px, 3.4vw, 44px) clamp(24px, 3vw, 40px);
             background: var(--blue); color: #fff; }
.cs-cta-in h2 { font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.035em; }
.cs-cta-in p { margin-top: 9px; font-size: clamp(14.5px, 1.15vw, 16.5px);
               color: rgba(255,255,255,.82); }
.cs-cta-in .b { background: #fff; color: var(--ink); border-color: #fff; }
.cs-cta-in .b:hover { background: transparent; color: #fff; }

/* ── 案例內文 ───────────────────────────────────────────────── */
.ar-head { padding-top: clamp(36px, 5.4vh, 66px); padding-bottom: clamp(24px, 3.4vh, 40px); }
.ar-back { font-size: 14.5px; }
.ar-back a { color: var(--ink-3); }
.ar-back a:hover { color: var(--blue); }
.ar-tag { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 26px; }
.ar-tag span { font-family: var(--mono); font-size: 12.5px; font-weight: 700;
               letter-spacing: .12em; color: var(--ink-3); }
.ar-tag span:first-child { color: var(--blue); }
.ar-t { margin-top: 14px; font-size: clamp(32px, 4.6vw, 62px); font-weight: 800;
        letter-spacing: -.045em; line-height: 1.08; }
.ar-lead { margin-top: clamp(16px, 2vw, 24px); font-size: clamp(16px, 1.4vw, 21px);
           line-height: 1.76; color: var(--ink-2); }

.ar-hero, .ar-fig { margin-top: clamp(24px, 3.4vh, 40px); }
.ar-hero img, .ar-fig img { display: block; width: 100%; height: auto;
                            aspect-ratio: 16 / 9; object-fit: cover; }
.ar-hero .cs-art { aspect-ratio: 16 / 9; }
.ar-hero .cs-art svg { width: 30%; }
.ar-fig { margin-top: clamp(34px, 4.6vh, 56px); }

/* 三個數字:報導裡的成果條 */
.ar-stats { margin-top: clamp(34px, 4.6vh, 56px); }
.ar-stats-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
               border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
@media (max-width: 700px) { .ar-stats-in { grid-template-columns: 1fr; } }
.ar-stats-in > div { padding: clamp(20px, 2.6vw, 32px) clamp(16px, 2vw, 26px);
                     border-left: 1px solid var(--rule); }
.ar-stats-in > div:first-child { border-left: 0; }
@media (max-width: 700px) {
  .ar-stats-in > div { border-left: 0; border-top: 1px solid var(--rule); }
  .ar-stats-in > div:first-child { border-top: 0; }
}
.ar-stats-in b { display: block; font-size: clamp(30px, 3.4vw, 46px); font-weight: 800;
                 letter-spacing: -.045em; line-height: 1; color: var(--blue); }
.ar-stats-in span { display: block; margin-top: 10px; font-family: var(--mono);
                    font-size: 13px; letter-spacing: .08em; color: var(--ink-3); }

.ar-body { margin-top: clamp(34px, 4.6vh, 56px); }
.ar-sec { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.6fr);
           gap: clamp(20px, 3.4vw, 64px);
           margin-top: clamp(30px, 4vh, 48px); padding-top: clamp(26px, 3.4vh, 40px);
           border-top: 1px solid var(--rule); }
.ar-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ar-sec h2 { font-size: clamp(20px, 1.9vw, 27px); font-weight: 800;
             letter-spacing: -.03em; line-height: 1.34; text-wrap: balance; }
.ar-sec p { font-size: clamp(15px, 1.2vw, 17.5px); line-height: 1.92;
            color: var(--ink-2); max-width: 56ch; }
@media (max-width: 860px) {
  .ar-sec { grid-template-columns: 1fr; gap: 14px; }
  .ar-sec p { max-width: none; }
}

.ar-quote { margin-top: clamp(40px, 5.4vh, 64px); }
.ar-quote p { max-width: none; text-wrap: nowrap;
              font-family: var(--serif, "Noto Serif TC", serif);
              font-size: clamp(20px, 2.2vw, 30px); font-weight: 500; line-height: 1.6;
              letter-spacing: -.01em; color: var(--ink); }
.ar-quote cite { display: block; margin-top: 16px; font-style: normal;
                 font-family: var(--mono); font-size: 13px; letter-spacing: .1em;
                 color: var(--ink-3); }
.ar-quote cite::before { content: ", "; }

.ar-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
           gap: 18px 28px; margin-top: clamp(40px, 5.4vh, 64px);
           padding-top: clamp(22px, 2.8vw, 32px); border-top: 1px solid var(--rule); }
@media (max-width: 760px) { .ar-meta { grid-template-columns: 1fr; } }
.ar-meta span { display: block; font-family: var(--mono); font-size: 12px;
                letter-spacing: .12em; color: var(--ink-3); }
.ar-meta b { display: block; margin-top: 7px; font-size: 15.5px; font-weight: 700;
             line-height: 1.6; }

.ar-more { padding-bottom: clamp(48px, 7vh, 88px); }
.ar-more-k { font-family: var(--mono); font-size: 12.5px; font-weight: 700;
             letter-spacing: .18em; color: var(--ink-3); margin-bottom: 16px; }
.ar-more-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .ar-more-in { grid-template-columns: 1fr; } }
.ar-more-c { display: block; padding: clamp(16px, 1.8vw, 22px);
             border: 1px solid var(--rule); transition: border-color .18s, background-color .18s; }
.ar-more-c:hover { border-color: var(--blue); background: rgba(30,72,216,.035); }
.ar-more-c i { display: block; font-style: normal; font-family: var(--mono);
               font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--blue); }
.ar-more-c b { display: block; margin-top: 9px; font-size: 16.5px; font-weight: 700;
               letter-spacing: -.02em; }

/* ── Blog:卡面沒有照片,一律用等角線稿零件 ─────────────────────── */
.bg-grid .cs-img { background: var(--blue); }
.bg-grid .cs-art svg { width: 46%; }
.ar--post .ar-hero .cs-art { aspect-ratio: 21 / 9; }
.ar--post .ar-hero .cs-art svg { width: 22%; }

/* 文末的產品關聯區塊 */
.po-tie { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.6fr);
          gap: clamp(20px, 3.4vw, 64px); align-items: start;
          margin-top: clamp(30px, 4vh, 48px); margin-bottom: clamp(48px, 7vh, 88px);
          padding-top: clamp(26px, 3.4vh, 40px); border-top: 1px solid var(--rule); }
.po-tie-k { font-family: var(--mono); font-size: 12.5px; font-weight: 700;
            letter-spacing: .16em; color: var(--blue); }
.po-tie-b p { font-size: clamp(15px, 1.2vw, 17.5px); line-height: 1.92;
              color: var(--ink-2); max-width: 56ch; }
.po-tie .b { margin-top: 18px; }
@media (max-width: 860px) { .po-tie { grid-template-columns: 1fr; gap: 14px; } }

/* ═══ Blog內文:Walkthrough文該有的密度 ═══════════════════════════════ */
/* Sections編號 */
.ar-sec h2 > i { display: block; font-style: normal; font-family: var(--mono);
                 font-size: 12.5px; font-weight: 700; letter-spacing: .16em;
                 color: var(--blue); margin-bottom: 10px; }
.ar-sec--plain { border-top: 0; padding-top: 0; margin-top: clamp(20px, 2.6vh, 30px); }
.ar-sec-b > * + * { margin-top: 16px; }
.ar-sec-b h3 { margin-top: clamp(22px, 3vh, 32px); font-size: clamp(16px, 1.3vw, 19px);
               font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.ar-sec-b p b { color: var(--ink); font-weight: 700; }

/* 清單 */
.ar-list { max-width: 56ch; padding-left: 1.15em; }
.ar-list li { font-size: clamp(15px, 1.2vw, 17.5px); line-height: 1.9; color: var(--ink-2); }
.ar-list li + li { margin-top: 10px; }
.ar-list li b { color: var(--ink); font-weight: 700; }
ol.ar-list { list-style: decimal; }
ul.ar-list { list-style: disc; }
ul.ar-list li::marker { color: var(--blue); }
ol.ar-list li::marker { color: var(--blue); font-family: var(--mono); font-weight: 700; }

/* 重點框 */
.ar-note { max-width: 56ch; padding: clamp(15px, 1.8vw, 22px);
           border-left: 3px solid var(--blue); background: rgba(30,72,216,.04);
           font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.85; color: var(--ink-2); }
.ar-note b { color: var(--ink); font-weight: 700; }

/* Form:跟第二屏的Specification表同一套線 */
.ar-tbl { margin-top: 20px; }
.ar-tbl-s { overflow-x: auto; border: 1px solid var(--sheet); }
.ar-tbl table { width: 100%; border-collapse: collapse; font-size: clamp(13.5px, 1.05vw, 15.5px); }
.ar-tbl thead { background: #FAFBFE; }
.ar-tbl th { padding: 11px 14px; text-align: left; white-space: nowrap;
             font-family: var(--mono); font-size: 12.5px; font-weight: 700;
             letter-spacing: .1em; color: var(--ink-3);
             border-left: 1px solid var(--rule); border-bottom: 1px solid var(--sheet); }
.ar-tbl td { padding: 12px 14px; line-height: 1.7; color: var(--ink-2);
             border-left: 1px solid var(--rule); border-top: 1px solid var(--rule);
             vertical-align: top; }
.ar-tbl th:first-child, .ar-tbl td:first-child { border-left: 0; }
.ar-tbl td:first-child { color: var(--ink); font-weight: 700; white-space: nowrap; }
.ar-tbl figcaption, .ar-img figcaption, .ar-dia figcaption {
  margin-top: 11px; font-size: 13.5px; line-height: 1.7; color: var(--ink-3); }

/* 內文插圖 */
.ar-img img { display: block; width: 100%; height: auto; }
.ar-img { margin-top: 22px; }
.ar-cred { display: block; margin-top: 5px; font-family: var(--mono); font-size: 11.5px;
           letter-spacing: .04em; color: var(--ink-3); opacity: .8; }

/* In this article */
.ar-toc { margin-top: clamp(28px, 3.6vh, 44px); padding: clamp(20px, 2.4vw, 28px);
          border: 1px solid var(--rule); background: #FAFBFE; }
.ar-toc-k { font-family: var(--mono); font-size: 12.5px; font-weight: 700;
            letter-spacing: .16em; color: var(--ink-3); margin-bottom: 14px; }
.ar-toc ol { list-style: none; display: grid;
             grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 32px; }
@media (max-width: 760px) { .ar-toc ol { grid-template-columns: 1fr; } }
.ar-toc a { display: flex; gap: 12px; padding: 7px 0; font-size: 15.5px; color: var(--ink-2); }
.ar-toc a:hover { color: var(--blue); }
.ar-toc i { font-style: normal; font-family: var(--mono); font-size: 12.5px;
            font-weight: 700; color: var(--blue); padding-top: 3px; }

/* 參考資料 */
.ar-src { padding-bottom: clamp(40px, 5.4vh, 64px); }
.ar-src-k { font-family: var(--mono); font-size: 12.5px; font-weight: 700;
            letter-spacing: .16em; color: var(--ink-3); margin-bottom: 12px; }
.ar-src ul { list-style: none; }
.ar-src li { padding: 6px 0; font-size: 14.5px; line-height: 1.7; }
.ar-src a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px;
            text-decoration-color: var(--rule); }
.ar-src a:hover { color: var(--blue); text-decoration-color: var(--blue); }

/* ═══ 封面:三種Approach,不要每篇都長一樣 ══════════════════════════ */
.pc { position: relative; display: flex; align-items: center; justify-content: center;
      width: 100%; height: 100%; overflow: hidden; }
.pc--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-cred { position: absolute; right: 0; bottom: 0; padding: 5px 10px;
           background: rgba(10,18,38,.66); color: rgba(255,255,255,.86);
           font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; }
.pc--part svg { width: 46%; height: auto; }
.pc--part path { vector-effect: non-scaling-stroke; stroke-width: 1.35px; }
.pc--glyph b { font-family: var(--serif, "Noto Serif TC", serif); font-weight: 500;
               font-size: clamp(56px, 12vw, 150px); line-height: 1.12;
               letter-spacing: -.02em; }
.ar-hero .pc { aspect-ratio: 21 / 9; }
.ar-hero .pc--glyph b { font-size: clamp(72px, 13vw, 186px); }
.cs-img .pc { aspect-ratio: auto; height: 100%; }
.cs-img .pc-cred { display: none; }
.pc--navy  { background: var(--night); color: rgba(255,255,255,.9); }
.pc--blue  { background: var(--blue); color: rgba(255,255,255,.88); }
.pc--steel { background: #E4E9F2; color: var(--ink); }
.pc--sand  { background: #EFE9DF; color: #4A4034; }
.pc--ink   { background: #16181C; color: rgba(255,255,255,.88); }
.pc--mint  { background: #DCEAE4; color: #23453A; }

/* ═══════════════════════════════════════════════════════════════
   功能介紹頁:每個功能一組「流程 + 產品畫面」
   畫面是純 HTML/CSS 疊出來的,不是截圖, 才能在任何寬度下都銳利
   ═══════════════════════════════════════════════════════════════ */
.fx { padding-top: clamp(74px, 11vh, 148px); padding-bottom: clamp(74px, 11vh, 148px);
      border-top: 1px solid var(--rule); }
.fx:first-of-type { border-top: 0; }
/* 文字在左、產品畫面在右;左欄收窄、間距縮小,一個畫面就能看完一整組 */
.fx-in { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
         gap: clamp(28px, 4.4vw, 76px); align-items: start; }
@media (max-width: 1000px) { .fx-in { grid-template-columns: 1fr; gap: 20px; } }
.fx-no { font-family: var(--mono); font-size: 12.5px; font-weight: 700;
         letter-spacing: .16em; color: var(--blue); margin-bottom: 14px; }
.fx-t { font-size: clamp(24px, 2.3vw, 33px); font-weight: 800;
        letter-spacing: -.035em; line-height: 1.2; }
.fx-d { margin-top: clamp(14px, 1.6vw, 20px); font-size: clamp(14.5px, 1.1vw, 16px);
        line-height: 1.85;
        color: var(--ink-2); }
.fx-d b { color: var(--ink); font-weight: 700; margin: 0 .18em; }

/* 左欄的流程 */
.flow { margin-top: clamp(20px, 2.6vw, 30px); display: flex; flex-direction: column; }
.flow-node { position: relative; padding: 11px 15px; border: 1px solid var(--rule);
             background: #fff; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.flow-node small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }
.flow-node--ai { border-left: 3px solid var(--blue); }
.flow-arrow { height: 18px; position: relative; }
.flow-arrow::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0;
                      width: 1px; background: var(--rule-2, rgba(10,18,38,.18)); }
.flow-arrow::after { content: ""; position: absolute; left: 19px; bottom: 0;
                     border: 4px solid transparent; border-top-color: rgba(10,18,38,.28);
                     border-bottom: 0; }

/* ── 產品畫面外殼:Windows 11 的應用程式視窗 ────────────────────
   標題列左邊是 app 圖示與標題,右邊是最小化／最大化／Close三顆
   caption 按鈕(細線圖示、46×32 的滑過區、Close滑過變紅)。
   Win11 的視窗上緣是 8px 圓角,下緣貼齊。 */
.shot { border: 1px solid #D8DCE4; border-radius: 8px 8px 0 0; background: #fff;
        overflow: hidden; box-shadow: 0 22px 48px -30px rgba(10,18,38,.3),
                                      0 2px 6px -2px rgba(10,18,38,.08); }
.win { display: flex; align-items: center; height: 34px; flex: none;
       background: #F3F3F3; border-bottom: 1px solid #E5E7EB;
       -webkit-user-select: none; user-select: none; }
.win-ic { display: grid; place-items: center; width: 16px; height: 16px;
          margin: 0 8px 0 12px; flex: none; }
.win-ic svg { width: 15px; height: 15px; }
.win-t { font-size: 12px; color: #1A1A1A; letter-spacing: .01em;
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 視窗內的應用Tool列:目前開的文件、Motion、使用者 */
.app-bar { display: flex; align-items: center; gap: 10px; height: 40px; flex: none;
           padding: 0 12px; background: #FAFBFC; border-bottom: 1px solid var(--rule); }
.app-doc { display: inline-flex; align-items: center; gap: 7px;
           font-size: 12.5px; color: var(--ink-2); white-space: nowrap;
           overflow: hidden; text-overflow: ellipsis; }
.app-doc svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--ink-3);
               stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.app-sp { flex: 1; }
.app-act { font-size: 12.5px; color: var(--ink-2); padding: 4px 10px;
           border: 1px solid var(--rule); border-radius: 5px; white-space: nowrap; }
.app-ava { width: 24px; height: 24px; border-radius: 50%; background: var(--blue);
           color: #fff; font-size: 11.5px; font-weight: 700;
           display: grid; place-items: center; flex: none; }
.shot-body { background: #fff; position: relative; overflow: hidden; }

/* ── 功能頁的側邊索引 ───────────────────────────────────────── */
.fx-nav { position: sticky; top: 82px; z-index: 40; background: rgba(255,255,255,.92);
          backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule);
          transition: top .34s cubic-bezier(.4,0,.2,1); }
.nav-up .fx-nav { top: 0; }
.fx-nav-in { display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none;
             padding-top: 13px; padding-bottom: 13px; }
.fx-nav a { display: inline-flex; align-items: baseline; gap: 8px; flex: none;
            font-size: 14px; color: var(--ink-2); white-space: nowrap;
            padding: 7px 15px; border: 1px solid var(--rule); border-radius: 999px;
            transition: color .15s, border-color .15s, background-color .15s; }
.fx-nav a i { font-style: normal; font-family: var(--mono); font-size: 11.5px;
              font-weight: 700; color: var(--ink-3); transition: color .15s; }
.fx-nav a:hover { color: var(--blue); border-color: var(--blue); background: rgba(30,72,216,.04); }
.fx-nav a:hover i { color: var(--blue); }
.fx-nav a.is-on { color: #fff; background: var(--blue); border-color: var(--blue); }
.fx-nav a.is-on i { color: rgba(255,255,255,.7); }
@media (max-width: 900px) { .fx-nav { top: 68px; } .nav-up .fx-nav { top: 0; } }

/* ── 畫面內的標頭與腳註 ─────────────────────────────────────── */
.mock { padding: 16px 18px; display: flex; flex-direction: column; min-height: 420px; }
.mock-head { display: flex; align-items: baseline; justify-content: space-between;
             gap: 12px; padding-bottom: 11px; margin-bottom: 13px;
             border-bottom: 1px solid var(--rule); }
.mock-head b { font-size: 15.5px; font-weight: 700; }
.mock-head span { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.mock-foot { margin-top: auto; padding-top: 12px; font-size: 13px; color: var(--ink-3);
             display: flex; align-items: center; gap: 8px; }
.mock-foot i { font-style: normal; color: var(--ink); font-weight: 700; }

/* ── 對話式畫面(Quoting Assistant、Shop-floor Knowledge Search) ───────────────────────── */
.ui { display: flex; min-height: 0; }
#erp .ui { min-height: 606px; }
#know .ui { min-height: 510px; }
.ui-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 16px 18px 14px; }
.ui-chat { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.ui-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ui-row--me { justify-content: flex-end; }
.ui-bubble { background: var(--blue); color: #fff; font-size: 14.5px; line-height: 1.55;
             padding: 9px 16px; border-radius: 18px; max-width: 76%; }
/* File name不要被擠成 FN62…:寧可整排換行,也要看得到完整File name */
.ui-file { display: flex; align-items: center; gap: 7px; border: 1px solid var(--rule);
           border-radius: 9px; padding: 6px 10px 6px 7px; background: #fff;
           flex: none; min-width: 0; }
.ui-file-ic { width: 22px; height: 22px; border-radius: 6px; background: #F1F3F8;
              display: grid; place-items: center; flex: none; }
.ui-file-ic svg { width: 13px; height: 13px; fill: none; stroke: var(--ink-3);
                  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ui-file-nm { font-size: 12.5px; line-height: 1.25; white-space: nowrap;
              overflow: hidden; text-overflow: ellipsis; }
.ui-file-nm small { display: block; font-size: 11px; color: var(--ink-3); }
.ui-agent { display: flex; }
.ui-say { font-size: 14.5px; line-height: 1.75; color: var(--ink); }
.ui-say b { font-weight: 700; }
.ui-say .money { color: var(--blue); }
.ui-chips { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ui-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
           color: var(--ink-2); border: 1px solid var(--rule); border-radius: 999px;
           padding: 5px 11px; }
.ui-chip svg { width: 12px; height: 12px; fill: none; stroke: var(--ink-3); stroke-width: 1.7; }
.ui-composer { flex: none; margin-top: 14px; display: flex; align-items: center; gap: 10px;
               border: 1px solid var(--rule); border-radius: 999px; padding: 7px 7px 7px 15px;
               color: var(--ink-3); font-size: 13.5px; line-height: 1; }
.ui-composer-ph { flex: 1; display: flex; align-items: center; line-height: 1; }
.ui-clip { display: flex; align-items: center; flex: none; }
.ui-clip svg { display: block; }
.ui-send { width: 28px; height: 28px; border-radius: 50%; background: var(--blue);
           display: grid; place-items: center; flex: none; }
.ui-send svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.4;
               stroke-linecap: round; stroke-linejoin: round; }
/* 出處面板不預留Position:對話先佔滿整寬,面板長出來時才把它擠到左邊 */
.ui-doc { width: 300px; flex: none; border-left: 1px solid var(--rule);
          padding: 14px 16px; box-sizing: content-box; overflow: hidden;
          display: flex; flex-direction: column; }
.ui-doc > * { min-width: 300px; }
@media (max-width: 1180px) { .ui-doc { display: none; } }
.ui-doc-h { display: flex; justify-content: space-between; align-items: baseline;
            font-size: 12px; color: var(--ink-3); border-bottom: 1px solid var(--rule);
            padding-bottom: 8px; margin-bottom: 11px; }
.ui-doc-h b { font-size: 13px; color: var(--ink); }
.ui-doc-s { font-size: 12px; color: var(--ink-3); margin-bottom: 8px; }
.ui-doc-t { position: relative; padding-left: 34px; margin-bottom: 11px;
            font-size: 12px; line-height: 1.85; color: var(--ink-2); }
.ui-doc-t i { position: absolute; left: 0; top: 0; font-style: normal;
              font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--ink-3); }

.hl-pen { background: #FFEF9E; box-shadow: 0 0 0 2px #FFEF9E; color: var(--ink); font-weight: 600; }
.ui-slot { display: grid; }
.ui-slot > * { grid-area: 1 / 1; align-self: start; }
.ui-dots { justify-self: start; display: flex; align-items: center; gap: 5px;
           padding: 11px 14px; background: #F1F4FA; border-radius: 16px; }
.ui-dots i { width: 6px; height: 6px; border-radius: 50%; background: #98A5BE; }

/* ── Inspection sheet:圖面 + Balloon + Form ────────────────────────────────── */
.qc { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: 18px;
     flex: 1; align-items: start; }
/* Inspection sheet:圖是主角,Form收窄 */
.qc--insp { grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .qc, .qc--insp { grid-template-columns: 1fr; } }
.qc-tbl { min-width: 0; display: flex; flex-direction: column;
           border: 1px solid var(--rule); background: #fff; }
.xl.xl--qc { grid-template-columns: 26px 52px minmax(0,1fr) 78px 100px; }
.xl.xl--qc .bl-dot { width: 15px; height: 15px; font-size: 9px; }
.qtb { display: grid; grid-template-columns: 50px minmax(0,1fr) 104px 118px;
       font-size: 12px; font-variant-numeric: tabular-nums; }
/* 框線畫在格子上,格子淡入時線才跟著出現,不會先看到一個空框 */
.qtb > span { padding: 6px 8px; border-right: 1px solid #E2E5EA;
              border-bottom: 1px solid #E2E5EA;
              color: var(--ink-2); min-width: 0; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
.qtb > span:nth-child(4n) { text-align: right; border-right: 1px solid #C9CDD4; }
.qtb > span:nth-child(4n+1) { border-left: 1px solid #C9CDD4; }
.qtb .qh { border-top: 1px solid #C9CDD4; }
.qtb > span:nth-last-child(-n+4) { border-bottom: 1px solid #C9CDD4; }

.qtb .qh { font-family: var(--mono); font-size: 10.5px; font-weight: 700;
           letter-spacing: .04em; color: #333; text-align: center !important;
           background: linear-gradient(#F4F5F7, #E9EBEF);
           border-bottom: 1px solid #C9CDD4; }
.qc-dwg { border: 1px solid var(--rule); padding: 8px; background: #fff; }
.qc:not(.qc--insp) { align-items: stretch; }
.qc:not(.qc--insp) .qc-dwg { display: grid; place-items: center; }
.qc:not(.qc--insp):not(.qc--dwg) .qc-dwg { align-self: center; }
/* Balloon的座標是相對整張圖算的,所以這裡一定要保持原圖Share,
   讓圖填滿高度、寬度自己算, , 不能拉成容器的形狀。 */
.qc:not(.qc--insp):not(.qc--dwg) .pane-img { height: 100%; width: auto; max-width: 100%; }
/* 廠內圖那一屏沒有Balloon,維持原本填滿面板的Approach */
.qc--dwg .pane-img { aspect-ratio: auto; height: 100%; width: 100%; }
/* 標記定位在「圖」上而不是面板上, , 面板左右有留白,不然框會飄 */
.pane-img { position: relative; width: 100%; aspect-ratio: 1800 / 1273;
            background: var(--drawing) center/contain no-repeat; }
.qc-bl { position: absolute; transform: translate(-50%, -50%);
         width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--blue);
         background: #fff; color: var(--blue); font-family: var(--mono); font-size: 9px;
         font-weight: 700; line-height: 1; display: grid; place-items: center; }
.bl-dot { width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--blue);
          color: var(--blue); font-family: var(--mono); font-size: 10px; font-weight: 700;
          line-height: 1; display: inline-grid; place-items: center; }
.td-ok { color: #128A5B; font-weight: 700; }
.td-wait { color: var(--ink-3); }
.sk { display: inline-block; height: 8px; border-radius: 3px; background: #EFF1F5; }
.sk--dot { width: 17px; height: 17px; border-radius: 50%; }

/* ── Drawing Comparison ───────────────────────────────────────────── */
.diff { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pane { position: relative; border: 1px solid var(--rule); background: #fff; padding: 8px;
        display: grid; place-items: center; overflow: hidden; }
.pane-tag { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 9px;
            background: #EEF1F7; color: var(--ink-3);
            font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; }
.pane-tag--new { background: #FDEEE2; color: #9C480A; }
/* 螢光筆用 multiply 疊在線稿上,才像真的畫上去 */
.pane-mark { position: absolute; background: rgba(255,214,46,.62);
             mix-blend-mode: multiply; border-radius: 2px; }
/* 舊圖上沒有這條註記, , 蓋掉,兩張才真的不一樣 */
.pane-erase { position: absolute; background: #fff; }
.difflist { display: grid; gap: 6px; margin-top: 14px; font-size: 13px;
            font-variant-numeric: tabular-nums; }
.diffrow { display: flex; gap: 10px; padding: 6px 11px; }
.diffrow span:first-child { font-family: var(--mono); font-weight: 700; flex: none; }
.diffrow--del { background: #F3F4F7; color: var(--ink-3); text-decoration: line-through; }
.diffrow--add { background: #FDF1E7; color: #9C480A; font-weight: 600; }
.scanbar { height: 4px; border-radius: 999px; background: #E9EDF6; overflow: hidden;
           margin: 10px 0 2px; }
.scanbar--entry { margin: 0 0 10px; }
.scanbar i { display: block; height: 100%; width: 34%; border-radius: 999px; background: var(--blue); }

/* ── Customer-to-Shop Drawings ─────────────────────────────────────────── */
.tools { display: grid; gap: 10px; grid-auto-rows: 1fr; height: 100%; }
.tool { display: flex; gap: 11px; align-items: center; padding: 11px 13px;
        border: 1px solid var(--rule); background: #fff; font-size: 13.5px; }
.tool-ic { width: 19px; height: 19px; border-radius: 50%; background: var(--blue); color: #fff;
           font-size: 11px; display: grid; place-items: center; flex: none; }
.tool small { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-3); }

/* ── 自動 Key 單:AI 開起來的 ERP,一個獨立視窗疊在對話上 ──────────
   照Taiwan常見的 ERP(鼎新／正航那一類)排:功能表列、Tool列、單頭Field、
   單身Form、Amount列、Status列。細節愈多愈像真的在用的系統。 */
.erpwin {
  position: absolute; right: 14px; top: 46px; bottom: 14px; width: 88%; z-index: 5;
  background: #F0F0F0; border: 1px solid #A9AFB9;
  box-shadow: 0 18px 46px -14px rgba(10,18,38,.42), 0 3px 10px rgba(10,18,38,.14);
  display: flex; flex-direction: column;
  font-size: 11.5px; color: #1A1A1A;
}
.ew-title { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 8px;
            background: linear-gradient(#4C6FD6, #3A57B4); color: #fff; }
.ew-title b { font-size: 11.5px; font-weight: 600; }
.ew-ic { width: 15px; height: 15px; border-radius: 2px; background: #fff; color: #3A57B4;
         font-size: 10px; font-weight: 800; display: grid; place-items: center; flex: none; }
.ew-btns { display: flex; gap: 3px; margin-left: auto; }
.ew-btns i { width: 22px; height: 16px; display: grid; place-items: center; }
.ew-btns svg { width: 9px; height: 9px; fill: none; stroke: #fff; stroke-width: 1;
               vector-effect: non-scaling-stroke; }

.ew-x:hover { background: #C4453A; }
.ew-menu { display: flex; gap: 14px; padding: 3px 9px; background: #F0F0F0;
           border-bottom: 1px solid #D6D9DE; font-size: 11px; color: #333; }
.ew-menu u { text-decoration: underline; }
.ew-tool { display: flex; align-items: center; gap: 3px; padding: 4px 8px;
           background: linear-gradient(#FBFBFB, #EFEFEF); border-bottom: 1px solid #D6D9DE; }
.ew-b { padding: 2px 8px; border: 1px solid transparent; border-radius: 2px;
        font-size: 11px; color: #333; }
.ew-b.is-on { background: #DCE6F7; border-color: #9DB4DC; font-weight: 600; }
.ew-sep { width: 1px; height: 14px; background: #D0D3D8; margin: 0 4px; }
.ew-body { background: #fff; padding: 9px 10px; display: flex; flex-direction: column; gap: 8px;
           flex: 1; min-height: 0; overflow: hidden; }
.ew-head { display: grid; grid-template-columns: repeat(3, auto 1fr); gap: 5px 8px;
           align-items: center; padding: 8px 9px; border: 1px solid #C9CDD4; background: #FAFBFC; }
.ew-head label { font-size: 11px; color: #444; white-space: nowrap; }
.ef-in { border: 1px solid #B7BDC6; background: #fff; padding: 2px 6px; min-height: 19px;
         font-size: 11.5px; overflow: hidden; white-space: nowrap; }
.ef-in--w { grid-column: span 3; }
.ef-in .type { display: inline-block; }
.ew-grid { flex: 0 1 auto; min-height: 0; overflow: hidden; display: grid; grid-template-columns: 46px 96px minmax(0,1fr) 58px 50px 70px 84px;
           border: 1px solid #C9CDD4; font-variant-numeric: tabular-nums; }
.ew-grid > span { padding: 3px 6px; border-right: 1px solid #E2E5EA;
                  border-bottom: 1px solid #E2E5EA; white-space: nowrap;
                  overflow: hidden; text-overflow: ellipsis; }
.eg-h { background: linear-gradient(#F4F5F7, #E7E9ED); font-weight: 600; color: #333;
        text-align: center; }
.er { text-align: right; }
.eg-e { color: #B9BDC5; }
.ew-sum { flex: none; display: flex; justify-content: flex-end; gap: 22px; padding: 5px 4px;
          font-size: 11.5px; color: #333; }
.ew-sum b { margin-left: 7px; font-variant-numeric: tabular-nums; }
.ew-tot { color: #1E48D8; font-size: 13px; }
.ew-status { display: flex; gap: 18px; padding: 3px 9px; background: #F0F0F0;
             border-top: 1px solid #D6D9DE; font-size: 10.5px; color: #555; }
.ew-ok { margin-left: auto; color: #1D7044; font-weight: 600; }

/* ═══ 產品畫面的動效:捲進視窗才播 ═══════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  /* .xl--qc 的格子本身不隱藏, , 格線與底色要一開始就在,
     只有包在 <i> 裡的Contents才慢慢出現。 */
  .shot .ui-row, .shot .ui-agent, .shot .ui-chips,
  .shot .qc-dwg, .shot .qc-bl,
  .shot .diff .pane, .shot .diffrow, .shot .scanbar,
  .shot .tool, .shot .erpwin, .shot .ew-sum, .shot .ew-ok, .shot .ui-load,
  .shot .mock-foot { opacity: 0; }
  .shot .ef-in .type, .shot .ew-grid .type { clip-path: inset(0 100% 0 0); }
  .shot .ui-doc, .shot .ui-sheet { width: 0; padding-left: 0; padding-right: 0;
                  border-left-width: 0; opacity: 0; }

  .is-play .ui-chat > .ui-row:first-child { animation: fxrise .42s cubic-bezier(.2,.7,.3,1) .55s both; }
  .is-play .ui-chat > .ui-row + .ui-row { animation: fxrise .42s cubic-bezier(.2,.7,.3,1) .95s both; }
  .is-play .ui-agent { animation: fxrise .42s cubic-bezier(.2,.7,.3,1) 1.45s both; }
  .is-play .ui-dots { animation: fxfade .3s ease-out 2.45s reverse both; }
  .is-play .ui-dots i { animation: fxblip .95s ease-in-out 1.55s 3 both; }
  .is-play .ui-dots i:nth-child(2) { animation-delay: 1.71s; }
  .is-play .ui-dots i:nth-child(3) { animation-delay: 1.87s; }
  .is-play .ui-msg { animation: fxfade .45s ease-out 2.6s both; }
  .is-play .ui-chips { animation: fxfade .4s ease-out 3.2s both; }
  .is-play .ui-doc { animation: fxdocin .6s cubic-bezier(.25,.9,.3,1) 3.3s both; }
  .is-play .ui-sheet { animation: fxsheetin .6s cubic-bezier(.25,.9,.3,1) 3.6s both; }

  .is-play .qc-dwg { animation: fxfade .5s ease-out .25s both; }
  /* Form的格線與底色一開始就在,只有Contents(包在 <i> 裡)慢慢出現,
     而且跟左邊的Balloon同步:第 k 顆Balloon亮起來時,第 k 列才填入。 */
  .shot .xl--qc > span > i { opacity: 0; }
  .is-play .xl--qc > span:nth-child(-n+10) > i { animation: fxfade .3s ease-out .55s both; }
  .is-play .xl--qc > span:nth-child(n+11):nth-child(-n+15) > i { animation: fxrise .28s cubic-bezier(.2,.7,.3,1) 0.85s both; }
  .is-play .qc-bl:nth-child(1) { animation: fxpop .32s cubic-bezier(.2,.8,.3,1.4) 0.85s both; }
  .is-play .xl--qc > span:nth-child(n+16):nth-child(-n+20) > i { animation: fxrise .28s cubic-bezier(.2,.7,.3,1) 0.98s both; }
  .is-play .qc-bl:nth-child(2) { animation: fxpop .32s cubic-bezier(.2,.8,.3,1.4) 0.98s both; }
  .is-play .xl--qc > span:nth-child(n+21):nth-child(-n+25) > i { animation: fxrise .28s cubic-bezier(.2,.7,.3,1) 1.11s both; }
  .is-play .qc-bl:nth-child(3) { animation: fxpop .32s cubic-bezier(.2,.8,.3,1.4) 1.11s both; }
  .is-play .xl--qc > span:nth-child(n+26):nth-child(-n+30) > i { animation: fxrise .28s cubic-bezier(.2,.7,.3,1) 1.24s both; }
  .is-play .qc-bl:nth-child(4) { animation: fxpop .32s cubic-bezier(.2,.8,.3,1.4) 1.24s both; }
  .is-play .xl--qc > span:nth-child(n+31):nth-child(-n+35) > i { animation: fxrise .28s cubic-bezier(.2,.7,.3,1) 1.37s both; }
  .is-play .qc-bl:nth-child(5) { animation: fxpop .32s cubic-bezier(.2,.8,.3,1.4) 1.37s both; }
  .is-play .xl--qc > span:nth-child(n+36):nth-child(-n+40) > i { animation: fxrise .28s cubic-bezier(.2,.7,.3,1) 1.50s both; }
  .is-play .qc-bl:nth-child(6) { animation: fxpop .32s cubic-bezier(.2,.8,.3,1.4) 1.50s both; }
  .is-play .xl--qc > span:nth-child(n+41):nth-child(-n+45) > i { animation: fxrise .28s cubic-bezier(.2,.7,.3,1) 1.63s both; }
  .is-play .qc-bl:nth-child(7) { animation: fxpop .32s cubic-bezier(.2,.8,.3,1.4) 1.63s both; }
  .is-play .xl--qc > span:nth-child(n+46):nth-child(-n+50) > i { animation: fxrise .28s cubic-bezier(.2,.7,.3,1) 1.76s both; }
  .is-play .qc-bl:nth-child(8) { animation: fxpop .32s cubic-bezier(.2,.8,.3,1.4) 1.76s both; }
  .is-play .xl--qc > span:nth-child(n+51):nth-child(-n+55) > i { animation: fxrise .28s cubic-bezier(.2,.7,.3,1) 1.89s both; }
  .is-play .qc-bl:nth-child(9) { animation: fxpop .32s cubic-bezier(.2,.8,.3,1.4) 1.89s both; }
  .is-play .xl--qc > span:nth-child(n+56):nth-child(-n+60) > i { animation: fxrise .28s cubic-bezier(.2,.7,.3,1) 2.02s both; }
  .is-play .qc-bl:nth-child(10) { animation: fxpop .32s cubic-bezier(.2,.8,.3,1.4) 2.02s both; }
  .is-play .xl--qc > span:nth-child(n+61):nth-child(-n+65) > i { animation: fxrise .28s cubic-bezier(.2,.7,.3,1) 2.15s both; }
  .is-play .qc-bl:nth-child(11) { animation: fxpop .32s cubic-bezier(.2,.8,.3,1.4) 2.15s both; }
  .is-play .xl--qc > span:nth-child(n+66):nth-child(-n+70) > i { animation: fxrise .28s cubic-bezier(.2,.7,.3,1) 2.28s both; }
  .is-play .qc-bl:nth-child(12) { animation: fxpop .32s cubic-bezier(.2,.8,.3,1.4) 2.28s both; }
  .is-play .qc .mock-foot { animation: fxfade .4s ease-out 2.55s both; }
  .is-play .qc ~ .mock-foot { animation: fxfade .35s ease-out 2.3s both; }

  .is-play .diff .pane:nth-child(1) { animation: fxrise .45s cubic-bezier(.2,.7,.3,1) .25s both; }
  .is-play .diff .pane:nth-child(2) { animation: fxrise .45s cubic-bezier(.2,.7,.3,1) .55s both; }
  .is-play .pane-mark { animation: fxfade .35s ease-out 1.95s both; }
  .is-play .scanbar { animation: fxbarout 1.15s ease-out 1.05s both; }
  .is-play .scanbar i { animation: fxbarrun .85s cubic-bezier(.5,0,.5,1) 1.05s infinite; }
  .is-play .diffrow { animation: fxrise .4s cubic-bezier(.2,.7,.3,1) both; }
  .is-play .diffrow:nth-child(1) { animation-delay: 2.05s; }
  .is-play .diffrow:nth-child(2) { animation-delay: 2.3s; }
  .is-play .diffrow:nth-child(3) { animation-delay: 2.55s; }
  .is-play .diffrow:nth-child(4) { animation-delay: 2.8s; }
  .is-play .difflist ~ .mock-foot { animation: fxfade .4s ease-out 3.15s both; }

  /* 五個Item先排好,勾勾再跟著左邊換圖一個一個蓋上去 */
  .is-play .tool { animation: fxrise .42s cubic-bezier(.2,.7,.3,1) both; }
  .is-play .tool:nth-child(1) { animation-delay: .20s; }
  .is-play .tool:nth-child(2) { animation-delay: .30s; }
  .is-play .tool:nth-child(3) { animation-delay: .40s; }
  .is-play .tool:nth-child(4) { animation-delay: .50s; }
  .is-play .tool:nth-child(5) { animation-delay: .60s; }
  .is-play .tool-ic { animation: fxpop .32s cubic-bezier(.2,.8,.3,1.4) both; }
  .is-play .tool:nth-child(1) .tool-ic { animation-delay: 1.05s; }   /* Remove watermarks */
  .is-play .tool:nth-child(2) .tool-ic { animation-delay: 2.25s; }   /* Apply stamps */
  .is-play .tool:nth-child(3) .tool-ic { animation-delay: 3.45s; }   /* Replace title block */
  .is-play .tool:nth-child(4) .tool-ic { animation-delay: 3.65s; }   /* Translate notes */
  .is-play .tool:nth-child(5) .tool-ic { animation-delay: 3.85s; }   /* Unit conversion */

  /* 左邊的圖:1 → 2(去浮水印) → 3(Apply stamps) → 5(換圖框+翻譯) */
  .is-play .dwgseq img:nth-child(2) { animation: fxfade .55s ease-out .90s both; }
  .is-play .dwgseq img:nth-child(3) { animation: fxfade .55s ease-out 2.10s both; }
  .is-play .dwgseq img:nth-child(4) { animation: fxfade .55s ease-out 3.30s both; }

  /* ERP 視窗:對話講完轉個圈,再開視窗、逐格打字 */
  .is-play .ui-load { animation: fxfade .3s ease-out 3.3s both, fxfade .25s ease-in 4.5s reverse forwards; }
  .is-play .erpwin { animation: fxwin .45s cubic-bezier(.2,.8,.3,1.05) 4.6s both; }
  .is-play .ef-in .type { animation: fxtype .26s steps(var(--n, 8), jump-none) both; }
  .is-play .ew-head .ef-in:nth-of-type(1) .type { animation-delay: 5.05s; }
  .is-play .ew-head .ef-in:nth-of-type(2) .type { animation-delay: 5.17s; }
  .is-play .ew-head .ef-in:nth-of-type(3) .type { animation-delay: 5.29s; }
  .is-play .ew-head .ef-in:nth-of-type(4) .type { animation-delay: 5.41s; }
  .is-play .ew-head .ef-in:nth-of-type(5) .type { animation-delay: 5.53s; }
  .is-play .ew-head .ef-in:nth-of-type(6) .type { animation-delay: 5.65s; }
  .is-play .ew-head .ef-in:nth-of-type(7) .type { animation-delay: 5.77s; }
  .is-play .ew-head .ef-in:nth-of-type(8) .type { animation-delay: 5.89s; }
  .is-play .ew-grid .type { animation: fxtype .16s steps(var(--n, 6), jump-none) both; }
  .is-play .ew-grid > span:nth-child(n+8):nth-child(-n+14) .type { animation-delay: 6.05s; }
  .is-play .ew-grid > span:nth-child(n+15):nth-child(-n+21) .type { animation-delay: 6.16s; }
  .is-play .ew-grid > span:nth-child(n+22):nth-child(-n+28) .type { animation-delay: 6.27s; }
  .is-play .ew-grid > span:nth-child(n+29):nth-child(-n+35) .type { animation-delay: 6.38s; }
  .is-play .ew-grid > span:nth-child(n+36):nth-child(-n+42) .type { animation-delay: 6.49s; }
  .is-play .ew-grid > span:nth-child(n+43):nth-child(-n+49) .type { animation-delay: 6.60s; }
  .is-play .ew-grid > span:nth-child(n+50):nth-child(-n+56) .type { animation-delay: 6.71s; }
  .is-play .ew-sum { animation: fxfade .3s ease-out 6.95s both; }
  .is-play .ew-ok { animation: fxfade .3s ease-out 7.15s both; }
}
@keyframes fxrise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes fxfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fxpop  { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes fxblip { 0%, 62%, 100% { transform: translateY(0); opacity: .4; }
                    30% { transform: translateY(-4px); opacity: 1; } }
@keyframes fxbarrun { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
@keyframes fxbarout { 0% { opacity: 0; max-height: 0; } 10% { opacity: 1; max-height: 14px; }
                      76% { opacity: 1; max-height: 14px; } 100% { opacity: 0; max-height: 0; } }
@keyframes fxtype { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2px 0 0); } }
@keyframes fxdocin {
  from { width: 0; padding-left: 0; padding-right: 0; border-left-width: 0; opacity: 0; }
  40%  { opacity: .15; }
  to   { width: 300px; padding-left: 16px; padding-right: 16px;
         border-left-width: 1px; opacity: 1; }
}
@keyframes fxsheetin {
  from { width: 0; border-left-width: 0; opacity: 0; }
  40%  { opacity: .15; }
  to   { width: 432px; border-left-width: 1px; opacity: 1; }
}

/* 一次丟多張圖:只顯示三個檔案,其餘收成 ＋N */
.ui-files { display: flex; flex-wrap: nowrap; gap: 6px; justify-content: flex-end; min-width: 0; }
.ui-more { display: inline-flex; align-items: center; padding: 0 11px; flex: none;
           border: 1px solid var(--rule); border-radius: 9px;
           font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink-3); }

/* AI 回覆裡的小Form */
.mtb { display: grid; grid-template-columns: 1fr 84px 56px 72px; margin-top: 10px;
       border: 1px solid var(--rule); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.mtb > span { padding: 6px 9px; border-top: 1px solid var(--rule); color: var(--ink-2);
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtb > span:nth-child(-n+4) { border-top: 0; background: #FAFBFE;
                              font-family: var(--mono); font-size: 10.5px; font-weight: 700;
                              letter-spacing: .06em; color: var(--ink-3); }
.mtb .mr { text-align: right; }
.mtb .mm { color: var(--ink-3); }
.ui-say--after { margin-top: 11px; }
/* 「正在開啟…」:訊息講完先轉個圈,再開 ERP */
.ui-load { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
           font-size: 13px; color: var(--ink-3); }
.ui-load i { width: 13px; height: 13px; border-radius: 50%; flex: none;
             border: 2px solid var(--rule); border-top-color: var(--blue);
             animation: fxspin .8s linear infinite; }

/* 左側開著的 Excel Quotations */
/* Quotations不預留Position:對話先佔滿整寬,講完才長出來把對話擠到左邊 */
.ui-sheet { width: 432px; flex: none; border-left: 1px solid var(--rule);
            box-sizing: content-box; overflow: hidden;
            display: flex; flex-direction: column; background: #fff; }
.ui-sheet > * { min-width: 432px; }
.ui-sheet .xl { flex: 1; min-height: 0; overflow: hidden; }
@media (max-width: 1180px) { .ui-sheet { display: none; } }
.xl-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px;
          background: #F3F6F3; border-bottom: 1px solid var(--rule); }
.xl-bar b { font-size: 12px; font-weight: 600; color: var(--ink);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xl-ic { width: 17px; height: 17px; border-radius: 3px; background: #1D7044; color: #fff;
         font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
.xl { display: grid; grid-template-columns: 26px 96px 1fr 46px 64px 82px; align-content: start;
      font-size: 11px; font-variant-numeric: tabular-nums; }
.xl > span { padding: 4px 5px; border-right: 1px solid #E3E6EB; border-bottom: 1px solid #E3E6EB;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.xl-h, .xl-n { background: #F4F5F7; color: var(--ink-3); text-align: center; padding-left: 2px; padding-right: 2px;
               font-size: 10px; font-weight: 600; }
.xl-r { text-align: right; }
.xl-c--t { font-weight: 700; color: var(--ink); }
.xl-c--m { color: var(--ink-3); }
.xl-ttl { grid-column: span 5; text-align: center; font-weight: 700; letter-spacing: .3em;
           font-size: 12px; color: var(--ink); }
.xl-c--h { background: #F0F3F8; font-weight: 700; color: var(--ink); }

@keyframes fxspin { to { transform: rotate(360deg); } }
@keyframes fxwin { from { opacity: 0; transform: translateY(22px) scale(.985); }
                   to { opacity: 1; transform: none; } }

/* ═══ Systems頁 ═══════════════════════════════════════════════ */
.sys-cta { margin-top: clamp(18px, 2.2vw, 26px); }

/* ── ERP 應用畫面:左邊模組清單、右邊Work order ─────────────────────── */
/* 字級要跟功能頁那個 ERP 視窗一致,不然會掉回 body 的 14px */
.erpapp { display: grid; grid-template-columns: 150px minmax(0, 1fr);
          min-height: 500px; background: #fff;
          font-size: 11.5px; color: #1A1A1A; }
.ea-side { border-right: 1px solid var(--rule); background: #FAFBFC;
           padding: 12px 0; display: flex; flex-direction: column; }
.ea-list { display: flex; flex-direction: column; }
.ea-k { padding: 0 12px 8px; font-family: var(--mono); font-size: 10.5px;
        font-weight: 700; letter-spacing: .1em; color: var(--ink-3); }
.ea-i { padding: 7px 12px; font-size: 12.5px; color: var(--ink-2);
        border-left: 3px solid transparent; }
.ea-i.is-on { background: #E8EEFB; border-left-color: var(--blue);
              color: var(--blue); font-weight: 700; }
.ea-main { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ea-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
          padding-bottom: 9px; border-bottom: 1px solid var(--rule); }
.ea-bar b { font-size: 14px; }
.ea-head { display: grid; grid-template-columns: repeat(3, auto 1fr); gap: 6px 9px;
           align-items: center; padding: 10px 11px; border: 1px solid #C9CDD4; background: #FAFBFC; }
.ea-head label { font-size: 11px; color: #444; white-space: nowrap; }
.ea-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); }
.ea-tabs span { padding: 5px 13px; font-size: 12px; color: var(--ink-3);
                border: 1px solid transparent; border-bottom: 0; }
.ea-tabs .is-on { background: #fff; border-color: var(--rule); margin-bottom: -1px;
                  color: var(--ink); font-weight: 700; }
.ea-grid { grid-template-columns: 40px minmax(0,1fr) 96px 74px 66px 68px; }
.ea-ok   { color: #1D7044; font-weight: 600; }
.ea-run  { color: var(--blue); font-weight: 600; }
.ea-wait { color: var(--ink-3); }
.ea-foot { margin-top: auto; display: flex; justify-content: flex-end; gap: 22px;
           padding-top: 8px; font-size: 12px; color: #333; }
.ea-foot b { margin-left: 7px; font-variant-numeric: tabular-nums; }

/* ── Drawing management畫面 ───────────────────────────────────────────── */
.pdm { display: flex; flex-direction: column; min-height: 500px; background: #fff;
       font-size: 11.5px; color: var(--ink); }
.pdm-bar { display: flex; align-items: center; gap: 12px; padding: 11px 14px;
           border-bottom: 1px solid var(--rule); }
.pdm-search { flex: 1; display: inline-flex; align-items: center; gap: 9px;
              border: 1px solid var(--rule); border-radius: 6px; padding: 7px 12px;
              font-size: 12.5px; color: var(--ink-2); background: #FAFBFC; }
.pdm-search svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--ink-3);
                  stroke-width: 1.8; stroke-linecap: round; }
.pdm-n { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.pdm-n b { color: var(--ink); }
.pdm-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 14px;
             border-bottom: 1px solid var(--rule); }
.pdm-chips span { font-size: 11.5px; color: var(--ink-2); border: 1px solid var(--rule);
                  border-radius: 999px; padding: 3px 11px; }
.pdm-chips .is-on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.pdm-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 218px; min-height: 0; }
.pdm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px; padding: 14px; align-content: start; }
.pdm-c { border: 1px solid var(--rule); padding: 7px; background: #fff; }
.pdm-c.is-on { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(30,72,216,.14); }
.pdm-th { display: block; aspect-ratio: 1800 / 1273;
          background: var(--drawing) center/contain no-repeat #fff;
          border: 1px solid var(--rule); }
.pdm-c b { display: block; margin-top: 7px; font-size: 12px; font-weight: 700;
           font-family: var(--mono); }
.pdm-c i { display: block; margin-top: 3px; font-style: normal; font-size: 11px;
           color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pdm-side { border-left: 1px solid var(--rule); padding: 14px; background: #FAFBFC;
            display: flex; flex-direction: column; }
.pdm-k { font-family: var(--mono); font-size: 11px; font-weight: 700;
         letter-spacing: .1em; color: var(--ink-3); margin-bottom: 9px; }
.pdm-k--2 { margin-top: 16px; }
.pdm-f { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0;
         font-size: 11.5px; }
.pdm-f span { color: var(--ink-3); white-space: nowrap; }
.pdm-f b { color: var(--ink); text-align: right; }
.pdm-v { display: flex; gap: 9px; padding: 4px 0; font-size: 11.5px; color: var(--ink-2); }
.pdm-v b { font-family: var(--mono); color: var(--blue); flex: none; }
.pdm-l { padding: 4px 0; font-size: 11.5px; color: var(--ink-2);
         text-decoration: underline; text-underline-offset: 2px;
         text-decoration-color: var(--rule); }

/* ── 模組清單 ───────────────────────────────────────────────── */
.mods { margin-top: clamp(34px, 4.6vh, 56px); padding-top: clamp(26px, 3.4vh, 40px);
        border-top: 1px solid var(--rule); }
.mods-k { font-family: var(--mono); font-size: 12.5px; font-weight: 700;
          letter-spacing: .16em; color: var(--ink-3); margin-bottom: 18px; }
.mods-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: clamp(12px, 1.4vw, 18px); }
@media (max-width: 1000px) { .mods-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .mods-g { grid-template-columns: 1fr; } }
.mod { padding: clamp(14px, 1.6vw, 18px); border: 1px solid var(--rule); background: #fff;
       transition: border-color .16s, background-color .16s; }
.mod:hover { border-color: var(--blue); background: rgba(30,72,216,.03); }
.mod b { display: block; font-size: 14.5px; font-weight: 700; }
.mod span { display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.7;
            color: var(--ink-2); }

/* Systems頁的產Description不用重量級粗體 */
.fx--sys .fx-t { letter-spacing: -.02em; }
/* ERP Form:選取中的那一列 */
.ea-sel { background: #E8EEFB !important; }
.ea-row { cursor: default; }
.ea-grid > span { cursor: pointer; }
.ea-i { cursor: pointer; }
.ea-tabs span { cursor: pointer; }
.pdm-c { cursor: pointer; }
.pdm-c:hover { border-color: var(--blue); }

/* 功能說明底下的條列 */
.fx-l { margin-top: clamp(14px, 1.6vw, 20px); list-style: none; }
.fx-l li { position: relative; padding-left: 18px; padding-block: 5px;
           font-size: clamp(13.5px, 1.05vw, 15px); line-height: 1.75; color: var(--ink-2); }
.fx-l li::before { content: ""; position: absolute; left: 2px; top: .95em;
                   width: 5px; height: 5px; background: var(--blue); }
.fx-fmt { margin-top: clamp(14px, 1.6vw, 18px); padding-top: 13px;
          border-top: 1px solid var(--rule);
          font-family: var(--mono); font-size: 11.5px; line-height: 1.9;
          letter-spacing: .04em; color: var(--ink-3); }
.fx-fmt span { display: block; margin-bottom: 4px; font-weight: 700; color: var(--ink-2);
               letter-spacing: .14em; }

/* 錨點跳轉只讓開功能索引列, , 點擊時上方導覽列會自動收起 */
.fx { scroll-margin-top: 72px; }
@media (max-width: 900px) { .fx { scroll-margin-top: 62px; } }
.ar-sec[id] { scroll-margin-top: 104px; }
@media (max-width: 900px) { .ar-sec[id] { scroll-margin-top: 84px; } }

/* ═══════════════════════════════════════════════════════════════
   AI Tools與Systems:背景鋪Drawings紙的格線,產品畫面浮在紙上
   ═══════════════════════════════════════════════════════════════ */
.pg--grid { background: #FAFBFE; }
.pg--grid .pg-main {
  background-image:
    linear-gradient(to right, rgba(0, 34, 140, .038) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 34, 140, .038) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: -1px -1px;
}
/* 標題區:上緣打一道很淡的光,把視線帶到第一個區塊 */
.pg--grid .pg-head { position: relative; }
.pg--grid .pg-head::before {
  content: ""; position: absolute; inset: -40% -30% auto 50%;
  width: 120%; height: 240%; transform: translateX(-50%);
  background: radial-gradient(60% 50% at 50% 40%, rgba(30, 72, 216, .07), transparent 70%);
  pointer-events: none; z-index: -1;
}
/* 每一節之間用一條淡藍的分隔線,取代原本的灰線 */
.pg--grid .fx { border-top-color: rgba(0, 34, 140, .13); }
/* 索引列不要變成一條白帶, , 底色壓淡,讓格線透過模糊隱約透出來 */
.pg--grid .fx-nav { background: rgba(250, 251, 254, .62);
                    backdrop-filter: blur(10px) saturate(1.3); }
/* 白色的元件浮在格線上,邊界才清楚 */
.pg--grid .shot { background: #fff;
  box-shadow: 0 22px 52px -30px rgba(10, 18, 38, .34),
              0 2px 8px -2px rgba(10, 18, 38, .07); }
.pg--grid .mod { background: #fff; }
.pg--grid .fx-fmt { border-top-color: rgba(0, 34, 140, .14); }
.pg--grid .mods { border-top-color: rgba(0, 34, 140, .13); }
/* CTA 條在格線上要壓得住 */
.pg--grid .cs-cta-in { box-shadow: 0 18px 44px -28px rgba(30, 72, 216, .5); }

/* ═══ AI Tools:六個功能的視窗與區塊等高,捲動時停在每一節 ═══════ */
/* Highest的是Shop-floor Knowledge Search(625px),其餘都對齊它 */
.fx--tool .shot-body { height: 625px; }
.fx--tool .shot-body > * { height: 100%; }
.fx--tool .ui, .fx--tool .mock { min-height: 0; height: 100%; }
.fx--tool .erpwin { top: 46px; bottom: 14px; }
/* 捲動到每一節會停住, , proximity 只在接近時吸附,不會跟正常捲動打架 */

/* ═══ 首頁功能Form:點一列開啟該功能的說明 ═══════════════════════ */
.frow[data-f] { cursor: pointer; }
.frow[data-f]:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
/* hidden 屬性要壓過 display:grid,不然一進站就是一個空的彈窗 */
.fmod[hidden] { display: none !important; }
.fmod { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
        padding: clamp(16px, 4vw, 40px); }
.fmod-bg { position: absolute; inset: 0; background: rgba(10, 18, 38, .42);
           backdrop-filter: blur(3px); animation: fxfade .2s ease-out both; }
.fmod-box { position: relative; width: min(100%, 560px); max-height: 86vh; overflow-y: auto;
            background: #fff; border: 1px solid var(--sheet);
            padding: clamp(24px, 3.4vw, 38px);
            box-shadow: 0 30px 70px -24px rgba(10, 18, 38, .45);
            animation: fxpop2 .26s cubic-bezier(.2, .8, .3, 1.02) both; }
/* 彈窗要跟 AI Tools頁一樣寬,裡面的視窗才不會把Contents切掉 */
.fmod-box--wide { width: min(96vw, 1424px); max-height: 94vh; padding: 0;
                  min-width: 0; overflow-x: hidden; }
.fmod-body, .fmod-body .fx-in, .fmod-body .shot { min-width: 0; }
.fxpool { display: none; }
.fmod-body { padding: clamp(26px, 3vw, 52px); }
.fmod-body .fx-no { margin-bottom: 12px; }
.fmod-body .fx-t { font-size: clamp(22px, 2.2vw, 30px); }
/* 視窗高度跟 AI Tools頁同一個標準,Contents不會被喀掉 */
.fmod-body .shot-body { height: 625px; }
.fmod-body .shot-body > * { height: 100%; }
/* 彈窗裡不需要進場的位移,開了就直接在 */
.fmod-body .up { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .fmod-body { padding: 20px 16px 24px; }
  .fmod-box--wide { width: 94vw; }
}
@keyframes fxpop2 { from { opacity: 0; transform: translateY(14px) scale(.985); }
                    to { opacity: 1; transform: none; } }
.fmod-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
          display: grid; place-items: center; background: none; border: 0; cursor: pointer;
          color: var(--ink-3); transition: color .15s, background-color .15s; }
.fmod-x:hover { color: var(--ink); background: var(--rule); }
.fmod-x svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
              stroke-width: 1.8; stroke-linecap: round; }
.fmod-no { font-family: var(--mono); font-size: 12px; font-weight: 700;
           letter-spacing: .16em; color: var(--blue); }
.fmod-t { margin-top: 10px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800;
          letter-spacing: -.035em; }
.fmod-d { margin-top: 14px; font-size: clamp(14.5px, 1.15vw, 16px); line-height: 1.85;
          color: var(--ink-2); }
.fmod-l { margin-top: 18px; list-style: none; }
.fmod-l li { position: relative; padding-left: 18px; padding-block: 5px;
             font-size: 14px; line-height: 1.75; color: var(--ink-2); }
.fmod-l li::before { content: ""; position: absolute; left: 2px; top: .95em;
                     width: 5px; height: 5px; background: var(--blue); }
.fmod-f { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule);
          font-family: var(--mono); font-size: 11.5px; line-height: 1.9;
          letter-spacing: .04em; color: var(--ink-3); }
.fmod-f span { display: block; margin-bottom: 4px; font-weight: 700; color: var(--ink-2);
               letter-spacing: .14em; }
.fmod-f i { font-style: normal; }
.fmod .b { margin-top: 22px; }

/* ── Blog pagination ─────────────────────────────────────────────── */
.pg-cnt { margin-top: 18px; font-family: var(--mono); font-size: 12.5px;
          font-weight: 700; letter-spacing: .08em; color: var(--ink-3); }
.pgr { display: flex; align-items: center; justify-content: space-between;
       gap: 12px 20px; flex-wrap: wrap;
       margin-top: clamp(40px, 5.4vh, 66px);
       margin-bottom: clamp(64px, 10vh, 128px); }
.pgr-a { display: inline-flex; align-items: center; gap: 8px;
         font-size: 14.5px; font-weight: 700; color: var(--ink);
         text-decoration: none; padding: 9px 14px; border: 1px solid var(--rule-2);
         background: var(--paper); transition: color .18s, border-color .18s, background .18s; }
.pgr-a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.pgr-a:hover { color: var(--blue); border-color: var(--blue); }
.pgr-a.is-off { color: var(--ink-3); border-color: var(--rule);
                background: transparent; pointer-events: none; opacity: .55; }
.pgr-n { display: inline-flex; align-items: center; gap: 6px; }
.pgr-p { display: inline-flex; align-items: center; justify-content: center;
         min-width: 36px; height: 36px; padding: 0 6px;
         font-family: var(--mono); font-size: 14px; font-weight: 700;
         color: var(--ink-2); text-decoration: none;
         border: 1px solid transparent; transition: color .18s, border-color .18s; }
.pgr-p:hover { color: var(--blue); border-color: var(--rule-2); }
.pgr-p.is-now { color: #fff; background: var(--blue); border-color: var(--blue); }
@media (max-width: 620px) {
  .pgr { justify-content: center; }
  .pgr-a span { display: none; }
  .pgr-a { padding: 9px 11px; }
}

/* ══ About ═══════════════════════════════════════════════ */
/* 捲到才出現:位移 + 淡入,--d 排時差 */
.js .rv { opacity: 0; transform: translateY(22px);
          transition: opacity .72s cubic-bezier(.22,.72,.24,1) var(--d, 0s),
                      transform .72s cubic-bezier(.22,.72,.24,1) var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
}

/* ── 開場 ──────────────────────────────────────────────── */
.abh { position: relative; overflow: hidden;
       padding: clamp(76px, 13vh, 150px) 0 clamp(64px, 10vh, 118px);
       border-bottom: 1px solid var(--rule); }
.abh-bg { position: absolute; inset: 0; pointer-events: none;
          transform: translate3d(var(--mx, 0), var(--my, 0), 0);
          transition: transform .6s cubic-bezier(.22,.72,.24,1); }
.abh-iso { position: absolute; inset: -8% -6%; width: 112%; height: 116%;
           color: rgba(30, 72, 216, .085); }
.abh-iso path { animation: isoIn 1.4s cubic-bezier(.22,.72,.24,1) both; }
@keyframes isoIn { from { opacity: 0 } to { opacity: 1 } }
.abh-glow { position: absolute; left: 50%; top: -32%; width: min(1100px, 120%); aspect-ratio: 1;
            transform: translateX(-50%);
            background: radial-gradient(closest-side,
                        rgba(30, 72, 216, .17), rgba(30, 72, 216, .05) 55%, transparent 72%);
            animation: glowDrift 16s ease-in-out infinite alternate; }
@keyframes glowDrift {
  from { transform: translateX(-54%) translateY(-2%) scale(1); }
  to   { transform: translateX(-46%) translateY(4%) scale(1.09); }
}
.abh-in { position: relative; }
.abh .pg-kicker { --d: .06s; }
.abh-t { margin: 16px 0 0; font-size: clamp(38px, 6.4vw, 82px); font-weight: 900;
         letter-spacing: -.045em; line-height: 1.08; }
.abh-t span { display: inline-block; overflow: hidden; vertical-align: bottom; }
.js .abh-t span { animation: wordUp .9s cubic-bezier(.2,.78,.22,1) both; }
.abh-t span:nth-child(1) { animation-delay: .10s; }
.abh-t span:nth-child(2) { animation-delay: .18s; }
.abh-t span:nth-child(3) { animation-delay: .26s; padding: 0 .14em; color: var(--blue); }
.abh-t span:nth-child(4) { animation-delay: .34s; }
@keyframes wordUp { from { opacity: 0; transform: translateY(.55em) } to { opacity: 1; transform: none } }
.abh-sub { margin-top: clamp(18px, 2.4vw, 28px);
           font-size: clamp(15.5px, 1.35vw, 19.5px); line-height: 1.85; color: var(--ink-2); }
.abh-meta { display: flex; flex-wrap: wrap; gap: 10px 34px;
            margin-top: clamp(26px, 3.4vw, 40px); padding-top: 22px;
            border-top: 1px solid var(--rule); }
.abh-meta span { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.abh-meta i { display: block; margin-bottom: 5px; font-family: var(--mono); font-style: normal;
              font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
              text-transform: uppercase; color: var(--ink-3); }
.abh-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
           display: grid; place-items: center; width: 40px; height: 40px;
           border: 1px solid var(--rule-2); border-radius: 50%; color: var(--ink-2);
           background: rgba(255,255,255,.7); backdrop-filter: blur(6px);
           animation: cueBob 2.2s ease-in-out infinite; }
.abh-cue svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.abh-cue:hover { color: var(--blue); border-color: var(--blue); }
@keyframes cueBob { 0%,100% { transform: translate(-50%, 0) } 50% { transform: translate(-50%, 6px) } }
@media (max-width: 720px) { .abh-cue { display: none } }

/* ── 段落框架 ───────────────────────────────────────────── */
.abs { padding-top: clamp(56px, 9vh, 110px); padding-bottom: clamp(56px, 9vh, 110px); }
.abs-h { max-width: 780px; }
.abs-k { font-family: var(--mono); font-size: 12.5px; font-weight: 700;
         letter-spacing: .16em; color: var(--blue); }
.abs-t { margin-top: 12px; font-size: clamp(26px, 3.3vw, 44px); font-weight: 900;
         letter-spacing: -.04em; line-height: 1.24; }
.abs-sub { margin-top: 14px; font-size: clamp(14.5px, 1.2vw, 17px);
           line-height: 1.85; color: var(--ink-2); }

/* ── 01 起點 ────────────────────────────────────────────── */
.ab2 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
       gap: clamp(28px, 4vw, 64px); align-items: start;
       margin-top: clamp(30px, 4vw, 52px); }
.ab2-txt p { margin: 0 0 1.05em; font-size: clamp(14.8px, 1.15vw, 16.8px);
             line-height: 2.02; color: var(--ink-2); }
.ab2-txt p:last-child { margin-bottom: 0; }
.ab2-txt b { color: var(--ink); font-weight: 700; }
.ab-lead { font-family: var(--serif); font-size: clamp(19px, 1.9vw, 26px) !important;
           font-weight: 700; line-height: 1.62 !important; color: var(--ink) !important;
           margin-bottom: 1.1em !important; }
.ab-shot { margin: 0; }
.ab-shot img { display: block; width: 100%; height: auto;
               clip-path: inset(0 0 100% 0); transform: scale(1.06);
               transition: clip-path 1.05s cubic-bezier(.22,.72,.24,1) .1s,
                           transform 1.5s cubic-bezier(.22,.72,.24,1) .1s; }
.rv.in .ab-shot img, .ab-shot.in img { clip-path: inset(0 0 0 0); transform: none; }
.ab-shot figcaption { margin-top: 12px; font-family: var(--mono); font-size: 12px;
                      letter-spacing: .06em; color: var(--ink-3); }
@media (max-width: 900px) { .ab2 { grid-template-columns: 1fr; } }

.abc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: clamp(16px, 2vw, 26px); margin-top: clamp(34px, 4.4vw, 60px); }
.abc-c { position: relative; padding: clamp(24px, 2.6vw, 34px);
         background: var(--paper); border: 1px solid var(--rule);
         transition: border-color .22s, transform .22s, box-shadow .22s; }
.abc-c::after { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 3px;
                background: var(--blue); transition: width .5s cubic-bezier(.22,.72,.24,1) .12s; }
.abc-c.in::after { width: 56px; }
.abc-c:hover { border-color: var(--rule-2); transform: translateY(-3px);
               box-shadow: 0 18px 40px -30px rgba(10, 18, 38, .45); }
.abc-k { font-family: var(--mono); font-size: 11.5px; font-weight: 700;
         letter-spacing: .16em; color: var(--ink-3); }
.abc-t { margin-top: 12px; font-size: clamp(17px, 1.5vw, 21px); font-weight: 800;
         letter-spacing: -.03em; line-height: 1.45; }
.abc-d { margin-top: 12px; font-size: clamp(14px, 1.05vw, 15.5px);
         line-height: 1.92; color: var(--ink-2); }
@media (max-width: 760px) { .abc { grid-template-columns: 1fr; } }

/* ── 02 主張:深底 ───────────────────────────────────────── */
.abs--dark { background: var(--night); color: #fff; }
.abs--dark .abs-t { color: #fff; }
.abs--dark .abs-k { color: #7FA0FF; }
.abb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: clamp(22px, 2.6vw, 42px); margin-top: clamp(34px, 4.4vw, 58px); }
.abb-i { position: relative; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.16); }
.abb-i::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 1px;
                 background: #7FA0FF; transition: width .8s cubic-bezier(.22,.72,.24,1) .2s; }
.abb-i.in::before { width: 100%; }
.abb-n { font-family: var(--mono); font-size: clamp(30px, 3.4vw, 44px); font-weight: 700;
         line-height: 1; color: rgba(255,255,255,.22); }
.abb-t { margin-top: 18px; font-size: clamp(17px, 1.55vw, 22px); font-weight: 800;
         letter-spacing: -.03em; line-height: 1.5; color: #fff; }
.abb-d { margin-top: 14px; font-size: clamp(14px, 1.05vw, 15.5px);
         line-height: 2; color: rgba(255,255,255,.7); }
@media (max-width: 860px) { .abb { grid-template-columns: 1fr; } }

/* ── 03 大事紀 ──────────────────────────────────────────── */
.tll { --prog: 0; position: relative; list-style: none; margin: clamp(34px, 4.4vw, 58px) 0 0;
       padding: 0 0 0 clamp(78px, 9vw, 132px); }
.tll::before { content: ""; position: absolute; left: clamp(56px, 6.6vw, 96px); top: 6px; bottom: 6px;
               width: 1px; background: var(--rule); }
.tll::after { content: ""; position: absolute; left: clamp(56px, 6.6vw, 96px); top: 6px;
              width: 1px; height: calc((100% - 12px) * var(--prog));
              background: var(--blue); }
.tll-i { position: relative; padding-bottom: clamp(34px, 4.4vw, 54px); }
.tll-i:last-child { padding-bottom: 0; }
.tll-i::before { content: ""; position: absolute; left: calc(clamp(56px, 6.6vw, 96px) - clamp(78px, 9vw, 132px) - 4px);
                 top: 9px; width: 9px; height: 9px; border-radius: 50%;
                 background: var(--paper); border: 1px solid var(--rule-2);
                 transition: background .4s, border-color .4s, box-shadow .4s; }
.tll-i.in::before { background: var(--blue); border-color: var(--blue);
                    box-shadow: 0 0 0 5px rgba(30, 72, 216, .13); }
.tll-y { position: absolute; left: calc(clamp(56px, 6.6vw, 96px) - clamp(78px, 9vw, 132px) - 100%);
         top: 0; width: calc(100% - 0px); text-align: right;
         padding-right: 22px; font-family: var(--mono); font-size: clamp(16px, 1.5vw, 21px);
         font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums;
         transition: color .4s; }
.tll-i.in .tll-y { color: var(--blue); }
.js .tll-b { opacity: 0; transform: translateY(16px);
             transition: opacity .7s cubic-bezier(.22,.72,.24,1),
                         transform .7s cubic-bezier(.22,.72,.24,1); }
.js .tll-i.in .tll-b { opacity: 1; transform: none; }
.tll-b h3 { margin: 0; font-size: clamp(17px, 1.5vw, 21px); font-weight: 800;
            letter-spacing: -.03em; }
.tll-b p { margin: 11px 0 0; font-size: clamp(14px, 1.05vw, 15.8px);
           line-height: 1.95; color: var(--ink-2); max-width: 62ch; }
@media (max-width: 640px) {
  .tll { padding-left: 26px; }
  .tll::before, .tll::after { left: 3px; }
  .tll-i::before { left: -26px; }
  .tll-y { position: static; display: block; width: auto; text-align: left;
           padding: 0 0 8px; }
}

/* ── 04 技術 ────────────────────────────────────────────── */
.abs--tech { background: #F4F6FB; border-top: 1px solid var(--rule);
             border-bottom: 1px solid var(--rule); }
.abt { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
       gap: clamp(26px, 3.6vw, 56px); align-items: start;
       margin-top: clamp(32px, 4.2vw, 54px); }
.abt-dwg { position: relative; margin: 0; overflow: hidden;
           background: var(--paper) var(--drawing) center / contain no-repeat;
           aspect-ratio: 1800 / 1273; border: 1px solid var(--rule-2); }
.abt-scan { position: absolute; left: 0; right: 0; top: 0; height: 26%;
            background: linear-gradient(180deg, transparent,
                        rgba(30, 72, 216, .13) 62%, rgba(30, 72, 216, .5));
            border-bottom: 1px solid rgba(30, 72, 216, .55);
            transform: translateY(-120%); }
.rv.in .abt-scan { animation: scanDown 2.6s cubic-bezier(.5,.05,.5,.95) .3s 2 both; }
@keyframes scanDown {
  0%   { transform: translateY(-110%); opacity: 0 }
  10%  { opacity: 1 }
  90%  { opacity: 1 }
  100% { transform: translateY(400%); opacity: 0 }
}
.abt-dwg figcaption { position: absolute; left: 0; right: 0; bottom: 0;
                      padding: 9px 14px; font-family: var(--mono); font-size: 11.5px;
                      letter-spacing: .05em; color: #fff; background: rgba(10,18,38,.72); }
.abt-h { font-family: var(--mono); font-size: 12px; font-weight: 700;
         letter-spacing: .16em; color: var(--ink-3); }
.abt-ul { list-style: none; margin: 16px 0 0; padding: 0; }
.abt-ul li { display: grid; grid-template-columns: minmax(88px, 30%) 1fr; gap: 4px 18px;
             padding: 13px 0; border-top: 1px solid var(--rule);
             opacity: 0; transform: translateX(-10px);
             animation: fieldIn .55s cubic-bezier(.22,.72,.24,1) both; }
.rv.in .abt-ul li { animation-play-state: running; }
.js .abt-ul li { animation-play-state: paused; }
.abt-ul li:nth-child(1) { animation-delay: .30s } .abt-ul li:nth-child(2) { animation-delay: .42s }
.abt-ul li:nth-child(3) { animation-delay: .54s } .abt-ul li:nth-child(4) { animation-delay: .66s }
.abt-ul li:nth-child(5) { animation-delay: .78s } .abt-ul li:nth-child(6) { animation-delay: .90s }
.abt-ul li:nth-child(7) { animation-delay: 1.02s }
@keyframes fieldIn { to { opacity: 1; transform: none } }
.abt-ul b { font-size: 14.5px; font-weight: 700; }
.abt-ul span { font-size: 13.8px; line-height: 1.7; color: var(--ink-2); }
.abt-x { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule);
         font-size: 14.5px; line-height: 1.9; color: var(--ink-2); }
.abt-x b { color: var(--blue); }
@media (max-width: 880px) {
  .abt { grid-template-columns: 1fr; }
  .abt-ul li { grid-template-columns: 1fr; }
}

/* ── 05 partners ────────────────────────────────────────────── */
.abp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
       gap: clamp(26px, 3.6vw, 56px); align-items: center;
       margin-top: clamp(30px, 4vw, 52px); }
.abp-photo { margin: 0; }
.abp-photo img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.abp-photo figcaption { margin-top: 12px; font-size: 13px; line-height: 1.75; color: var(--ink-3); }
.abp-w { display: flex; flex-wrap: wrap; align-items: center; gap: 22px clamp(26px, 3.4vw, 52px); }
.abp-w .pt-c img { opacity: .78; filter: grayscale(1); transition: opacity .22s, filter .22s; }
.abp-w .pt-c:hover img { opacity: 1; filter: none; }
@media (max-width: 880px) { .abp { grid-template-columns: 1fr; } }

/* ── 06 產品 ────────────────────────────────────────────── */
.abw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: clamp(16px, 2vw, 26px); margin-top: clamp(30px, 4vw, 52px); }
.abw-c { display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 34px);
         background: var(--paper); border: 1px solid var(--rule); text-decoration: none;
         transition: border-color .22s, transform .22s, box-shadow .22s; }
.abw-c:hover { border-color: var(--blue); transform: translateY(-4px);
               box-shadow: 0 22px 46px -32px rgba(30, 72, 216, .55); }
.abw-k { font-family: var(--mono); font-size: 11.5px; font-weight: 700;
         letter-spacing: .16em; color: var(--blue); }
.abw-t { margin-top: 12px; font-size: clamp(17px, 1.45vw, 20px); font-weight: 800;
         letter-spacing: -.03em; color: var(--ink); }
.abw-d { margin-top: 12px; flex: 1; font-size: 14.2px; line-height: 1.92; color: var(--ink-2); }
.abw-go { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px;
          font-size: 14px; font-weight: 700; color: var(--blue); }
.abw-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2;
              transition: transform .22s; }
.abw-c:hover .abw-go svg { transform: translateX(4px); }
@media (max-width: 900px) { .abw { grid-template-columns: 1fr; } }

/* ── 07 Careers ────────────────────────────────────────── */
.abj { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
       gap: clamp(28px, 4vw, 64px); align-items: start;
       padding: clamp(28px, 3.6vw, 48px); background: var(--paper);
       border: 1px solid var(--rule); }
.abj-txt p { margin: 16px 0 0; font-size: clamp(14.5px, 1.1vw, 16.2px);
             line-height: 2; color: var(--ink-2); }
.abj-txt .b { margin-top: 26px; }
/* 右欄第一個標籤要跟左邊的大標題切齊:讓開左邊眉標那一行的高度 */
.abj-fact { margin: 60px 0 0; }
.abj-fact > div { padding: 15px 0; border-top: 1px solid var(--rule); }
.abj-fact > div:first-child { border-top: 0; padding-top: 0; }
.abj-fact dt { font-family: var(--mono); font-size: 11.5px; font-weight: 700;
               letter-spacing: .14em; color: var(--ink-3); }
.abj-fact dd { margin: 8px 0 0; font-size: 14.6px; line-height: 1.8; color: var(--ink); }
.abj-fact a { color: var(--blue); }
@media (max-width: 880px) {
  .abj { grid-template-columns: 1fr; }
  .abj-fact { margin-top: 0; }
}

/* Balloon的大小要跟著圖等Share縮放, , Share取自標註Tool:
   Balloon直徑 = 圖寬的 3.7%,字級 = 圖寬的 2.1%。 */
.qc:not(.qc--dwg) .pane-img { container-type: inline-size; }
.qc .qc-bl { width: 2.20cqw; height: 2.20cqw; font-size: 1.20cqw;
             border-width: max(1px, .1cqw); }

/* ── Terms of Service / Privacy Policy ──────────────────────────────────── */
.lg-head { padding-bottom: clamp(26px, 3.4vh, 40px); }
.lg-date { margin-top: 16px; font-family: var(--mono); font-size: 13px;
           color: var(--ink-3); }
.lg-w { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
        gap: clamp(26px, 4vw, 64px); align-items: start;
        padding-bottom: clamp(48px, 7vh, 88px); }
.lg-toc { position: sticky; top: 106px; display: flex; flex-direction: column;
          padding-left: 14px; border-left: 1px solid var(--rule); }
.nav-up .lg-toc { top: 24px; }
.lg-toc a { padding: 7px 0; font-size: 14.5px; color: var(--ink-3); }
.lg-toc a:hover { color: var(--blue); }
.lg { max-width: 74ch; }
.lg-h { margin: clamp(32px, 4vw, 46px) 0 0; font-size: clamp(18px, 1.7vw, 23px);
        font-weight: 800; letter-spacing: -.03em; scroll-margin-top: 108px; }
.lg-h:first-child { margin-top: 0; }
.lg p { margin: 14px 0 0; font-size: clamp(14.8px, 1.15vw, 16.5px);
        line-height: 2.05; color: var(--ink-2); }
.lg ul { margin: 14px 0 0; padding: 0; list-style: none; }
.lg li { position: relative; padding: 6px 0 6px 20px;
         font-size: clamp(14.8px, 1.15vw, 16.5px); line-height: 1.95; color: var(--ink-2); }
.lg li::before { content: ""; position: absolute; left: 2px; top: 1.02em;
                 width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.lg-foot { padding: clamp(26px, 3.4vw, 40px) 0 clamp(56px, 8vh, 96px); }
.lg-foot > p { padding-top: 24px; border-top: 1px solid var(--rule);
               font-size: 15px; line-height: 1.9; color: var(--ink-2); }
.lg-foot a { color: var(--blue); }
.lg-alt { border-top: 0 !important; padding-top: 8px !important;
          font-size: 14.5px !important; color: var(--ink-3) !important; }
@media (max-width: 860px) {
  .lg-w { grid-template-columns: 1fr; }
  .lg-toc { position: static; flex-flow: row wrap; gap: 4px 18px;
            padding: 0 0 4px; border-left: 0; border-bottom: 1px solid var(--rule); }
}

/* ── Shop drawing preparation:一張一張換成What to do後的圖 ─────────────────────── */
.dwgseq { background: none !important; }
.dwgseq img { position: absolute; inset: 0; width: 100%; height: 100%;
              object-fit: contain; }
.dwgseq img + img { opacity: 0; }

/* ══ Contact ═══════════════════════════════════════════════ */
.ct { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
      gap: clamp(26px, 3.6vw, 62px); align-items: start;
      padding-bottom: clamp(56px, 8vh, 100px); }
.ct-side { display: flex; flex-direction: column; gap: 16px; }
.ct-card { padding: clamp(20px, 2.2vw, 28px); background: var(--paper);
           border: 1px solid var(--rule); }
.ct-k { font-family: var(--mono); font-size: 11.5px; font-weight: 700;
        letter-spacing: .16em; color: var(--ink-3); }
.ct-list { list-style: none; margin: 16px 0 0; padding: 0; }
.ct-list li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0;
              border-top: 1px solid var(--rule); font-size: 14.6px; line-height: 1.7; }
.ct-list li:first-of-type { border-top: 0; padding-top: 0; }
.ct-ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px;
         background: #EEF2FC; }
.ct-ic svg { width: 15px; height: 15px; fill: none; stroke: var(--blue);
             stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ct-list a { color: var(--ink); }
.ct-list a:hover { color: var(--blue); }
.ct-list address { font-style: normal; color: var(--ink-2); }
              border-top: 1px solid var(--rule); }
                      width: 21px; height: 21px; display: grid; place-items: center;
                      border-radius: 50%; background: var(--blue); color: #fff;
                      font-family: var(--mono); font-size: 11px; font-weight: 700; }
                color: var(--ink-2); }

.cf { padding: clamp(26px, 3vw, 42px); background: var(--paper);
      border: 1px solid var(--rule); }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 22px); }
.cf-f { display: block; min-width: 0; }
.cf-f--wide { grid-column: 1 / -1; }
.cf-l { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;
        font-size: 13.6px; font-weight: 700; color: var(--ink); }
.cf-req { font-family: var(--mono); font-style: normal; font-size: 10.5px;
          font-weight: 700; letter-spacing: .08em; color: var(--blue);
          padding: 2px 6px; background: #EEF2FC; }
.cf-hint { font-family: var(--mono); font-style: normal; font-size: 10.5px;
           font-weight: 700; letter-spacing: .08em; color: var(--ink-3); }
.cf input[type="text"], .cf input[type="tel"], .cf textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--rule-2); border-radius: 0;
  transition: border-color .16s, box-shadow .16s; }
.cf textarea { resize: vertical; line-height: 1.7; }
.cf input::placeholder, .cf textarea::placeholder { color: #A9B2C4; }
.cf input:focus, .cf textarea:focus { outline: 0; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30, 72, 216, .13); }
.cf-err { display: none; margin-top: 6px; font-size: 12.5px; color: #C0341B; }
.cf-f.is-bad input, .cf-f.is-bad textarea { border-color: #C0341B; }
.cf-f.is-bad .cf-err { display: block; }

.cf-set { margin: clamp(20px, 2.4vw, 30px) 0 0; padding: 0; border: 0; }
.cf-set .cf-l { margin-bottom: 12px; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-chip { position: relative; }
.cf-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.cf-chip span { display: inline-flex; align-items: center; gap: 7px;
                padding: 8px 14px 8px 12px; font-size: 14px; color: var(--ink-2);
                background: #fff; border: 1px solid var(--rule-2); cursor: pointer;
                transition: color .16s, border-color .16s, background .16s; }
.cf-chip span::before { content: ""; width: 14px; height: 14px; flex: none;
                        border: 1px solid var(--rule-2); background: #fff;
                        transition: background .16s, border-color .16s; }
.cf-chip span:hover { border-color: var(--blue); color: var(--ink); }
.cf-chip input:checked + span { color: var(--blue); border-color: var(--blue);
                                background: #F2F5FE; font-weight: 700; }
.cf-chip input:checked + span::before { background: var(--blue) no-repeat center / 10px 10px;
  border-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.2 5.2L20 6.8'/%3E%3C/svg%3E"); }
.cf-chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

.cf > .cf-f--wide { margin-top: clamp(20px, 2.4vw, 30px); }
.cf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
           margin-top: clamp(22px, 2.6vw, 32px); padding-top: clamp(20px, 2.4vw, 28px);
           border-top: 1px solid var(--rule); }
.cf-go { flex: none; }
.cf-law { flex: 1; min-width: 220px; font-size: 12.8px; line-height: 1.8; color: var(--ink-3); }
.cf-law a { color: var(--blue); }
@media (max-width: 940px) { .ct { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .cf-grid { grid-template-columns: 1fr; } }

/* ── 手機版Menu ─────────────────────────────────────────────── */
.nb-burger { display: none; flex: none; width: 40px; height: 40px; margin-left: 10px;
             padding: 0; background: transparent; border: 1px solid var(--rule);
             cursor: pointer; align-items: center; justify-content: center;
             flex-direction: column; gap: 4px; }
.nb-burger span { display: block; width: 17px; height: 1.5px; background: var(--ink);
                  transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .16s; }
.menu-on .nb-burger { background: var(--blue); border-color: var(--blue); }
.menu-on .nb-burger span { background: #fff; }
.menu-on .nb-burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-on .nb-burger span:nth-child(2) { opacity: 0; }
.menu-on .nb-burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.nb-menu { position: absolute; left: 0; right: 0; top: 100%;
           display: flex; flex-direction: column;
           background: rgba(255,255,255,.97); backdrop-filter: blur(14px) saturate(1.5);
           border-bottom: 1px solid var(--sheet-2);
           box-shadow: 0 18px 34px -26px rgba(10,18,38,.5);
           animation: nbDrop .2s cubic-bezier(.2,.8,.3,1) both; }
.nb-menu[hidden] { display: none; }
@keyframes nbDrop { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }
.nb-menu a { padding: 15px var(--gut); font-size: 16px; font-weight: 500; color: var(--ink);
             border-top: 1px solid var(--rule); }
.nb-menu a:first-child { border-top: 0; }
.nb-menu a:active { background: #F2F5FE; color: var(--blue); }
@media (max-width: 900px) { .nb-burger { display: flex; } }
@media (min-width: 901px) { .nb-menu { display: none !important; } }

/* ── 手機版:模組卡片折疊,只露標題 ───────────────────────────── */
@media (max-width: 620px) {
  /* 一行塞三個,只放標題;點了才展開成整行,把後面的往下推 */
  .mods-g.fold { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .mods-g.fold .mod { padding: 11px 6px; cursor: pointer; text-align: center;
                      display: flex; align-items: center; justify-content: center;
                      min-height: 46px; }
  .mods-g.fold .mod b { font-size: 12.5px; line-height: 1.35; }
  .mods-g.fold .mod span { display: none; }
  .mods-g.fold .mod.on { grid-column: 1 / -1; text-align: left;
                         flex-direction: column; align-items: flex-start;
                         padding: 13px 15px; border-color: var(--blue);
                         background: rgba(30,72,216,.04);
                         animation: modOpen .24s cubic-bezier(.2,.8,.3,1) both; }
  .mods-g.fold .mod.on b { font-size: 14.5px; }
  .mods-g.fold .mod.on span { display: block; margin-top: 6px; }
  @keyframes modOpen { from { opacity: .4; transform: scale(.97) } to { opacity: 1; transform: none } }
}


/* ── 手機版 footer:網站地圖收起來,點標題才展開 ──────────────── */
@media (max-width: 620px) {
  .ft-in { gap: 0; }
  .ft.fold .ft-in > div + div { border-top: 1px solid var(--sheet-2); }
  .ft.fold .ft-in > div + div h4 { display: flex; align-items: center;
                                   justify-content: space-between; gap: 12px;
                                   margin: 0; padding: 15px 0; cursor: pointer; }
  .ft.fold .ft-in > div + div h4::after { content: ""; flex: none; width: 7px; height: 7px;
                                          border-right: 1.6px solid var(--ink-3);
                                          border-bottom: 1.6px solid var(--ink-3);
                                          transform: translateY(-2px) rotate(45deg);
                                          transition: transform .2s; }
  .ft.fold .ft-in > div.on + div h4::after,
  .ft.fold .ft-in > div.on h4::after { transform: translateY(2px) rotate(-135deg); }
  .ft.fold .ft-in > div + div ul { display: none; padding-bottom: 8px; }
  .ft.fold .ft-in > div.on ul { display: block;
                                animation: modOpen .22s cubic-bezier(.2,.8,.3,1) both; }
  .ft.fold .ft-in > div:first-child { padding-bottom: 22px; }
}
@keyframes modOpen { from { opacity: .4; transform: scale(.98) } to { opacity: 1; transform: none } }

/* ══ 手機版收尾:這些規則一定要放在檔尾才蓋得過前面同權重的預設值 ══ */

/* 手機版首頁直接用Fixed導覽列(不再有圖框標題欄那一套) */
@media (max-width: 1080px) {
  .nb { transform: none; opacity: 1; pointer-events: auto; }
  .nb.nb--up { transform: translateY(-101%); }
}

/* 產品畫面在手機上是整個等Share縮小的,裡面的版面要維持桌機的樣子,
   不能被視窗寬度的媒體Find改成單欄, , 那些Find看的是視窗,不是這個框。 */
@media (max-width: 1180px) {
  .shot .ui-doc { display: flex; }
  .shot .ui-sheet { display: flex; }
}
@media (max-width: 900px) {
  .shot .qc { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); }
  .shot .qc--insp { grid-template-columns: minmax(0, 1fr) 400px; }
}

/* ── 語言切換(下拉) ─────────────────────────────────────────── */
.lgsw { position: relative; flex: none; margin-left: 6px; }
.lgsw-b { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 9px;
          font: inherit; font-size: 13.5px; color: var(--ink-2); background: transparent;
          border: 1px solid var(--rule); cursor: pointer;
          transition: color .15s, border-color .15s; }
.lgsw-b:hover { color: var(--blue); border-color: var(--blue); }
.lgsw-b svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor;
              stroke-width: 1.6; }
.lgsw-v { width: 13px !important; height: 13px !important; opacity: .7;
          transition: transform .18s; }
.lgsw.on .lgsw-v { transform: rotate(180deg); }
.lgsw-m { position: absolute; right: 0; top: calc(100% + 5px); z-index: 5;
          display: flex; flex-direction: column; min-width: 132px;
          background: #fff; border: 1px solid var(--rule-2);
          box-shadow: 0 16px 34px -22px rgba(10,18,38,.45);
          animation: nbDrop .16s cubic-bezier(.2,.8,.3,1) both; }
.lgsw-m[hidden] { display: none; }
.lgsw-m a { padding: 9px 14px; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.lgsw-m a:hover { background: #F2F5FE; color: var(--blue); }
.lgsw-m a.is-on { color: var(--blue); font-weight: 700; }
/* 手機版:切換器收到Menu裡,做成一排按鈕 */
.nb-in > .lgsw { display: none; }
@media (min-width: 901px) { .nb-in > .lgsw { display: block; } }
.nb-menu .lgsw { margin: 0; padding: 12px var(--gut); border-top: 1px solid var(--rule); }
.nb-menu .lgsw-b { display: none; }
.nb-menu .lgsw-m { position: static; display: flex; flex-direction: row; gap: 8px;
                   min-width: 0; border: 0; box-shadow: none; animation: none; }
.nb-menu .lgsw-m[hidden] { display: flex; }
.nb-menu .lgsw-m a { flex: 1; text-align: center; padding: 10px 6px;
                     border: 1px solid var(--rule); }
.nb-menu .lgsw-m a.is-on { border-color: var(--blue); }

/* 首頁藍色輪播詞:英文的詞比中文長很多,字級收一點才不會撐出畫面 */
html[lang="en"] .d1 { letter-spacing: -.03em; }
.d1 .big { white-space: nowrap; }

/* 圖框標題欄的語言欄 */
.tbl-col--lang { border-right: 1px solid var(--sheet); }
/* 這一格要跟 NAVIGATION、CONTACT 完全一樣:padding-top 22px、字級 16px、置中 */
.tb-lang { height: 100%; padding: 22px 8px 0; display: flex;
           align-items: center; justify-content: center;
           transition: background-color .15s; }
/* hover 要跟 NAVIGATION 那幾格一樣整格上淡藍底 */
.tb-lang:hover { background: var(--blue-wash, rgba(30,72,216,.07)); }
.tb-lang .lgsw { margin: 0; }
.tb-lang .lgsw-b { border-color: transparent; padding: 0; height: auto;
                   font-size: 16px; font-weight: 700; color: var(--ink);
                   letter-spacing: -0.01em; }
.tb-lang .lgsw-b { transition: color .15s; }
.tb-lang:hover .lgsw-b, .tb-lang .lgsw-b:hover { color: var(--blue); }
.tb-lang .lgsw-m { bottom: calc(100% + 6px); top: auto; right: auto; left: 50%;
                   transform: translateX(-50%); }

/* 英文版首頁大標:藍色那個詞要比黑字大一點,不能比它小 */
html[lang="en"] .d1 .big { font-size: 1.06em; margin-left: .16em; }
/* 日文的詞比中文長(製造指図 有四個字),整行字級收一點才不會換行 */
html[lang="ja"] .d1 { font-size: clamp(28px, 3.8vw, 57px); }
html[lang="ja"] .d1 .big { font-size: 1.06em; }
html[lang="ja"] .d2 { font-size: clamp(24px, 2.9vw, 42px); }

.pg-sub--wide { max-width: none; }

/* ── 案例與Blog的背景點綴:等角線稿零件 ───────────────────────── */
.pg-main { position: relative; }
.deco2 { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
/* 不要去動其他子元素的 position, , 之前這裡把 .fx-nav 的 sticky 蓋掉了。
   裝飾放到負的 z-index 就會自動待在Contents底下。 */
.d2p { position: absolute; display: block; opacity: .5; }
.d2p svg { display: block; width: 100%; height: auto; }
.d2p svg path { vector-effect: non-scaling-stroke; stroke-width: 1.35px; }
.d2p-blue, .p-a, .p-c, .p-e { color: var(--blue); }
.p-b, .p-d { color: var(--orange); }
.p-a { width: clamp(150px, 17vw, 260px); right: -5vw;  top: 6%;    rotate: 8deg; }
.p-b { width: clamp(110px, 12vw, 180px); left: -3.5vw; top: 27%;   rotate: -14deg; }
.p-c { width: clamp(130px, 14vw, 220px); right: -4vw;  top: 55%;   rotate: -6deg; }
.p-d { width: clamp(100px, 11vw, 165px); left: -2.6vw; top: 72%;   rotate: 12deg; }
.p-e { width: clamp(120px, 13vw, 200px); right: 2vw;   top: 88%;   rotate: 5deg; }
@media (max-width: 900px) { .deco2 { display: none; } }

/* 案例列表最後一格:CTA 做成跟案例卡一樣大小的卡片 */
.cs-card--cta { background: var(--blue); border-color: var(--blue);
                display: flex; align-items: center; }
.cs-card--cta:hover { background: #1a3fc0; border-color: #1a3fc0; }
.cs-card--cta .cs-in { padding: clamp(22px, 2.6vw, 32px); }
.cs-card--cta .cs-n { color: #fff; }
.cs-card--cta .cs-d { color: rgba(255,255,255,.82); }
.cs-card--cta .cs-go { color: #fff; }

/* 案例卡片與 footer 之間要有呼吸空間(這一頁沒有分頁列可以撐開) */
.cs-grid { margin-bottom: clamp(64px, 10vh, 128px); }

/* FormContents為了做「格線先在、Contents後出現」而包在 <i> 裡,
   <i> 的瀏覽器預設是斜體,Yes關掉。 */
.xl--qc > span > i { font-style: normal; }

/* ── 首頁結尾:深底邀約 ───────────────────────────────────── */
.ctax { position: relative; background: var(--night); color: #fff;
        padding: clamp(78px, 9.5vw, 140px) 0; overflow: hidden; }
.ctax-mesh { position: absolute; inset: 0; pointer-events: none;
             background:
               repeating-linear-gradient(60deg,  rgba(255,255,255,.055) 0 1px, transparent 1px 78px),
               repeating-linear-gradient(-60deg, rgba(255,255,255,.055) 0 1px, transparent 1px 78px);
             -webkit-mask-image: radial-gradient(115% 92% at 86% 6%, #000 0%, transparent 70%);
                     mask-image: radial-gradient(115% 92% at 86% 6%, #000 0%, transparent 70%); }
.ctax-in { position: relative; }
.ctax-k { font-family: var(--mono); font-size: 12px; font-weight: 700;
          letter-spacing: .2em; color: #7FA0FF; }
.ctax-rule { display: block; width: 92px; height: 1px; margin-top: 14px;
             background: #7FA0FF; transform-origin: left center; }
.ctax-t { margin-top: 24px; max-width: 17em; font-size: clamp(28px, 4vw, 54px);
          font-weight: 800; letter-spacing: -.04em; line-height: 1.3; color: #fff; }
.ctax-d { margin-top: 20px; max-width: 56ch; font-size: clamp(15px, 1.15vw, 17px);
          line-height: 1.95; color: rgba(255, 255, 255, .68); }
.ctax-b { display: flex; flex-wrap: wrap; gap: 14px;
          margin-top: clamp(28px, 3.2vw, 42px); }
.ctax-f { margin-top: 24px; font-size: 14px; letter-spacing: .01em;
          color: rgba(255, 255, 255, .5); }
.ctax-f a { color: rgba(255, 255, 255, .88);
            border-bottom: 1px solid rgba(255, 255, 255, .3); }
.ctax-f a:hover { color: #fff; border-bottom-color: #fff; }
@media (max-width: 640px) {
  .ctax-t { max-width: none; }
  .ctax-b .b { width: 100%; justify-content: center; }
}
.ctax .deco2 { z-index: 0; }
.ctax-in { z-index: 1; }
.ctax .d2p { opacity: .34; }
.ctax .q-a, .ctax .q-c { color: #7FA0FF; }
.ctax .q-b { color: #E08A3C; }
.q-a { width: clamp(190px, 20vw, 320px); right: 4vw;   top: 6%;   rotate: -9deg; }
.q-b { width: clamp(110px, 11vw, 172px); right: 21vw;  top: 60%;  rotate: 14deg; }
.q-c { width: clamp(130px, 13vw, 205px); right: -2vw;  top: 62%;  rotate: 6deg; }
@media (max-width: 1100px) { .ctax .deco2 { display: none; } }

/* ── Contact:LINE ─────────────────────────────────────── */
.ct-line { margin-top: 14px; text-align: left; }
.ct-qr { display: block; width: 150px; height: 150px; margin-top: 14px;
         border: 1px solid var(--rule); background: #fff; }
.ct-line-d { margin-top: 14px; font-size: 14px; line-height: 1.85; color: var(--ink-2); }
.ct-line-d b { font-weight: 800; color: var(--ink); }
/* 桌機掃 QR;手機掃不到自己的螢幕,改成直接點連結加好友 */
.ct-line-b, .ct-line-m { display: none; }
.ct-line-m { margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.ct-line-m b { font-weight: 800; color: var(--ink); }
@media (max-width: 940px), (hover: none) and (pointer: coarse) {
  .ct-qr, .ct-line-d { display: none; }
  .ct-line-b { display: inline-flex; margin-top: 14px; }
  .ct-line-m { display: block; }
}

/* ── Contact表單:Send後的Status訊息 ─────────────────────────────── */
.cf-msg { margin-top: 18px; padding: 13px 16px; font-size: 15px; line-height: 1.8;
          border-left: 3px solid var(--blue); background: rgba(30, 72, 216, .05); }
.cf-msg.is-bad { border-left-color: var(--orange); background: rgba(199, 95, 15, .06); }
.cf-go[disabled] { opacity: .6; pointer-events: none; }

/* 手機版首頁第一屏的大標放大一點(只有這一塊;英文詞太長維持原尺寸) */
@media (max-width: 560px) {
  .scr--one .h1txt .d1 { font-size: clamp(38px, 10.4vw, 48px); }
  html[lang="ja"] .scr--one .h1txt .d1 { font-size: clamp(33px, 9vw, 42px); }
}

/* ── 換頁:整頁淡入淡出 + 頂端漸層進度線 ─────────────────────── */
@view-transition { navigation: auto; }
/* 只做淡入淡出,不要有上下位移,不然會有「先往下再往上」的晃動感 */
::view-transition-old(root) { animation: pgOut .14s ease-in both; }
::view-transition-new(root) { animation: pgIn .26s ease-out both; }
@keyframes pgOut { to   { opacity: 0; } }
@keyframes pgIn  { from { opacity: 0; } }

.pgbar {
  position: fixed; top: 0; left: 0; z-index: 999;
  width: 0; height: 3px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, #0B1F72 0%, var(--blue) 42%, #5C9BFF 78%, #8FC2FF 100%);
  box-shadow: 0 0 12px rgba(30, 72, 216, .45);
  transition: width .28s cubic-bezier(.2, .8, .2, 1), opacity .22s;
}
.pgbar.on { opacity: 1; }
/* 線頭的一點亮光,看起來像刷過去 */
.pgbar::after {
  content: ""; position: absolute; top: 0; right: 0; height: 100%; width: 96px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9));
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .pgbar { transition: opacity .2s; }
}