/* ============================================================
   台護設備箱 TAIHU — 前台站台樣式
   來源：docs/demo/index.html（客戶已確認畫面，機械式搬移）
   ・移除 demo 專用的 .demo-bar／.demo-seo／.demo-note，以及後台管理介面樣式
     （後台另有 assets/css/admin，不與本檔混用）。
   ・.scroll-prog（閱讀進度條）保留，正式站沿用。
   ・字級一律 --fs-*（最小 14px）；RWD 斷點 1024／860／680／460。
   ============================================================ */
:root{
  /* 字級（家族規範：最小 14px，一律用變數） */
  --fs-xs:14px; --fs-sm:15px; --fs-base:16px; --fs-md:18px; --fs-lg:20px;
  --fs-xl:24px; --fs-2xl:32px; --fs-3xl:40px; --fs-hero:56px;
  --fs-display:180px; --fs-display-m:120px; --fs-code:160px; /* 裝飾性大數字 */
  /* 色彩：石墨＋工業橘 */
  --c-bg:#F3F4F5; --c-surface:#FFFFFF; --c-surface-2:#ECEEF0;
  --c-ink:#1A2026; --c-ink-2:#48525B; --c-ink-3:#6B757E;
  --c-line:#D6DBDF; --c-line-2:#B9C0C6;
  /* 版頭底色：版頭與 LOGO 襯底共用，兩處必須同一個值。必須不透明——
     LOGO 襯底疊在版頭上，半透明疊兩層會比版頭更白，色差就回來了 */
  --c-head-bg:#FFFFFF;
  --c-dark:#1B2228; --c-dark-2:#252E35; --c-dark-ink:#E7EBEE; --c-dark-ink-2:#A5AFB7;
  --c-dark-3:#3A454D; --c-dark-4:#5A6771; --c-dark-line:#3E4A53;
  --c-accent:#B85A12; --c-accent-hi:#E07A26; --c-accent-bg:#FBF0E6;
  --c-ok:#2F7A4E; --c-warn:#A8660B; --c-danger:#B23A30;
  --radius:4px; --maxw:1240px;
  --shadow:0 1px 2px rgba(20,26,31,.06),0 4px 16px rgba(20,26,31,.06);
  --font:"Noto Sans TC",system-ui,-apple-system,"Microsoft JhengHei",sans-serif;
  --font-num:"Barlow Condensed","Noto Sans TC",system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font-family:var(--font);font-size:var(--fs-base);line-height:1.75;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;line-height:1.35;font-weight:700;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--c-accent-hi);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;scroll-behavior:auto !important}}

/* ---------- 通用 ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.sec{padding:96px 0}
.sec-sm{padding:64px 0}
.sec-white{background:var(--c-surface)}
.sec-dark{background:var(--c-dark);color:var(--c-dark-ink)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.sec-head .lead{max-width:640px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-num);font-size:var(--fs-md);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c-accent)}
.eyebrow::before{content:"";width:28px;height:3px;background:currentColor}
.sec-dark .eyebrow{color:var(--c-accent-hi)}
.h2{font-size:var(--fs-3xl);margin-top:12px}
.h3{font-size:var(--fs-xl)}
.lead{font-size:var(--fs-md);color:var(--c-ink-2);margin-top:14px}
.lead-link{color:var(--c-accent-hi);text-decoration:underline;text-underline-offset:3px}
.sec-dark .lead{color:var(--c-dark-ink-2)}
.muted{color:var(--c-ink-2)}
.small{font-size:var(--fs-sm);color:var(--c-ink-3)}
.num{font-family:var(--font-num);font-weight:600;letter-spacing:.02em}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.g6{grid-template-columns:repeat(6,1fr)}
.stack>*+*{margin-top:16px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split-top{align-items:start}
.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-28{margin-top:28px}.mt-32{margin-top:32px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 24px;border:2px solid transparent;border-radius:var(--radius);font-size:var(--fs-base);font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.btn-pri{background:var(--c-accent);color:#fff}
.btn-pri:hover{background:#9C4C0F}
.btn-line{border-color:var(--c-ink);color:var(--c-ink);background:transparent}
.btn-line:hover{background:var(--c-ink);color:#fff}
.sec-dark .btn-line,.hero .btn-line,.page-hero .btn-line{border-color:rgba(255,255,255,.7);color:#fff}
.sec-dark .btn-line:hover,.hero .btn-line:hover,.page-hero .btn-line:hover{background:#fff;color:var(--c-ink)}
.btn-text{color:var(--c-accent);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.btn-text::after{content:"→";transition:transform .15s}
.btn-text:hover::after{transform:translateX(4px)}
.sec-dark .btn-text{color:var(--c-accent-hi)}
.btn-sm{min-height:36px;padding:4px 14px;font-size:var(--fs-sm)}

.tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:2px;background:var(--c-surface-2);color:var(--c-ink-2);font-size:var(--fs-xs);font-weight:500;line-height:1.7}
.tag-acc{background:var(--c-accent-bg);color:var(--c-accent)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:4px 16px;border:1px solid var(--c-line-2);border-radius:999px;background:var(--c-surface);font-size:var(--fs-sm);cursor:pointer}
.chip.on{background:var(--c-ink);border-color:var(--c-ink);color:#fff}

/* 照片位置示意（開發／內容尚未到位時的預留位；有真實圖片一律改用 .ph-img <img>） */
.ph{position:relative;display:flex;align-items:flex-end;min-height:120px;aspect-ratio:4/3;padding:12px;border-radius:var(--radius);overflow:hidden;
  background:repeating-linear-gradient(135deg,#D3D8DC 0 12px,#C7CDD2 12px 24px);color:#3A444C}
.ph b{position:relative;display:inline-block;max-width:100%;padding:4px 10px;background:rgba(255,255,255,.88);border-radius:2px;font-size:var(--fs-xs);font-weight:500;line-height:1.5}
.ph-dark{background:repeating-linear-gradient(135deg,#2A333A 0 12px,#232B31 12px 24px)}
.ph-dark b{background:rgba(0,0,0,.55);color:var(--c-dark-ink)}
.ph-wide{aspect-ratio:16/9}
.ph-tall{aspect-ratio:3/4}
.ph-sq{aspect-ratio:1/1}
/* 真實圖片版（<img class="ph-img">），沿用相同版位比例與圓角 */
/* height:auto 不能省：<img> 的 width／height 屬性會被當成 presentational hint
   套成 CSS height，而只要 width 與 height 都有確切值，aspect-ratio 就會被忽略。
   少了這行，上面宣告的比例形同虛設——圖片會照屬性的原始比例長出來。 */
.ph-img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.ph-img.ph-wide{aspect-ratio:16/9}
.ph-img.ph-tall{aspect-ratio:3/4}
.ph-img.ph-sq{aspect-ratio:1/1;border-radius:50%}

.card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.card .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.card .ph,.card .ph-img{border-radius:0}
a.card{transition:border-color .15s,box-shadow .15s}
a.card:hover{border-color:var(--c-line-2);box-shadow:var(--shadow)}
a.card:hover h3{color:var(--c-accent)}

.check li{position:relative;padding-left:28px}
.check li+li{margin-top:8px}
.check li::before{content:"";position:absolute;left:2px;top:9px;width:14px;height:8px;border-left:3px solid var(--c-accent);border-bottom:3px solid var(--c-accent);transform:rotate(-45deg)}
.sec-dark .check li::before{border-color:var(--c-accent-hi)}

/* ---------- 前台：版頭 ---------- */
/* 版頭用純白、不做毛玻璃：LOGO 圖一律襯 #fff 白塊（見下方 .logo-img），
   版頭若是 97% 半透明＋saturate，捲過深色主視覺時會變成 #F8 上下的灰，
   在高對比／廣色域螢幕上 LOGO 會像一塊特別白的貼紙。 */
.site-top{position:sticky;top:0;z-index:50;background:var(--c-head-bg);border-bottom:1px solid var(--c-line)}
.site-top .in{display:flex;align-items:center;gap:24px;height:76px}
.logo{display:flex;align-items:center;gap:12px;flex:none}
.logo .mk{width:40px;height:40px;flex:none}
/* 上傳的 LOGO 只鎖高度、寬度自適應：橫式與方形的比例差很多，
   鎖寬度會把橫式壓扁。max-width 是保險，避免極端寬的圖把選單擠掉。

   **襯底一律用版頭底色 --c-head-bg**：版尾是近黑色，去背 PNG 的深色 LOGO
   壓上去等於消失，所以要補底；但補的顏色必須跟版頭完全相同，否則在版頭
   會像一塊特別白的貼紙（版頭曾是 97% 半透明白，LOGO 是 #fff，換螢幕就看出來）。
   自帶底色的圖照原樣呈現；去背的圖在版頭與整列融為一體，在版尾則是一張
   版頭色的卡片。padding 讓圖不會貼著卡片邊緣。 */
.logo .logo-img{display:block;height:40px;width:auto;max-width:240px;object-fit:contain;flex:none;
  background:var(--c-head-bg);padding:4px 8px;border-radius:3px;box-sizing:content-box}
.logo .tx{display:flex;flex-direction:column;line-height:1.1}
.logo .tx b{font-size:var(--fs-lg);font-weight:900;letter-spacing:.06em}
.logo .tx small{font-family:var(--font-num);font-size:var(--fs-xs);font-weight:600;letter-spacing:.22em;color:var(--c-ink-3)}
.site-nav{display:flex;align-items:center;gap:4px;margin-left:auto;height:100%}
.site-nav>a,.nd-t{display:flex;align-items:center;gap:6px;height:100%;padding:0 14px;font-size:var(--fs-base);font-weight:500;color:var(--c-ink);background:none;border:0;cursor:pointer;position:relative}
.site-nav>a::after,.nd-t::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;background:var(--c-accent);transform:scaleX(0);transition:transform .2s}
.site-nav>a:hover::after,.nd:hover .nd-t::after,.nd:focus-within .nd-t::after,.site-nav>a.on::after,.nd-t.on::after{transform:scaleX(1)}
.nd{position:relative;height:100%}
.nd-t .car{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.nd-m{position:absolute;top:100%;left:0;min-width:220px;padding:8px;background:var(--c-surface);border:1px solid var(--c-line);border-top:3px solid var(--c-accent);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s}
.nd:hover .nd-m,.nd:focus-within .nd-m{opacity:1;visibility:visible;transform:none}
.nd-m a{display:block;padding:10px 14px;border-radius:2px;font-size:var(--fs-base);white-space:nowrap}
.nd-m a:hover,.nd-m a.on{background:var(--c-surface-2);color:var(--c-accent)}
.site-top .btn-rfq{margin-left:8px}
.site-nav .m-rfq{display:none}
.ham{display:none;width:48px;height:48px;border:0;background:none;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px;margin-left:auto}
.ham i{display:block;width:24px;height:2px;background:var(--c-ink);transition:transform .2s,opacity .2s}
.ham[aria-expanded="true"] i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.ham[aria-expanded="true"] i:nth-child(2){opacity:0}
.ham[aria-expanded="true"] i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.nav-back{display:none}

/* LINE@ 客服 */
.line-fab{position:fixed;right:24px;bottom:24px;z-index:40;display:flex;align-items:center;gap:8px;height:52px;padding:0 20px 0 14px;border-radius:26px;background:#06C755;color:#fff;font-weight:700;box-shadow:0 6px 20px rgba(6,199,85,.35)}
.line-fab svg{width:28px;height:28px}

/* ---------- 前台：版尾 ---------- */
.site-foot{background:#11171B;color:var(--c-dark-ink-2);padding:72px 0 0}
.site-foot .cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px}
/* 版尾欄位標籤：是導覽標籤不是內容標題，所以不是 h4（見 footer.php） */
.site-foot .ft-h{color:#fff;font-size:var(--fs-base);font-weight:700;margin-bottom:16px}
.site-foot li+li{margin-top:8px}
.site-foot a:hover{color:#fff}
.site-foot .logo .tx b{color:#fff}
.site-foot .info{margin-top:20px;font-size:var(--fs-sm);line-height:2}
.site-foot .copy{margin-top:56px;border-top:1px solid #263038;padding:20px 0;font-size:var(--fs-xs);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- 前台：內頁共用 ---------- */
.crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:var(--fs-sm);color:var(--c-dark-ink-2)}
.crumb a:hover{color:#fff}
.crumb span+span::before,.crumb a+span::before,.crumb a+a::before{content:"/";margin-right:8px;opacity:.5}
.page-hero{position:relative;background:var(--c-dark);color:#fff;overflow:hidden}
/* 照片當襯底，整區只佔一塊地：上限 400px，不讓 hero 吃掉整個視窗 */
/* grid-template-columns:100% 是必要的：.wrap 有 margin-inline:auto，
   而 grid 裡的 auto margin 會取消 stretch，軌道不給滿寬的話 .wrap 會縮成內容寬 */
.page-hero{display:grid;grid-template-columns:100%;align-content:center;
  min-height:clamp(260px,30vw,400px)}
/* width:100% 不能省：grid 裡 .wrap 的 margin-inline:auto 會取消 stretch，
   沒有明確寬度的話它會縮成內容寬，整個 hero 看起來像置中的窄欄 */
.page-hero .wrap{position:relative;z-index:1;width:100%;
  padding-top:44px;padding-bottom:44px}
/* 限 26ch 並 balance：長頁名才不會斷在「從專／案客製」這種地方 */
.page-hero h1{font-size:var(--fs-3xl);margin-top:16px;max-width:26em}
.page-hero h1 .t{display:inline-block}
.page-hero .lead{color:var(--c-dark-ink-2)}
.page-hero .row{margin-top:28px}
/* 襯底照片：鋪滿整個 hero，上面壓一層左濃右淡的深色漸層。
   文字在左邊，那一側要夠暗才讀得清楚；右邊留給照片自己。 */
.page-hero .ph-bg{position:absolute;inset:0;line-height:0}
.page-hero .ph-bg img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) contrast(1.02)}
.page-hero .ph-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(27,34,40,.97) 0%,rgba(27,34,40,.93) 38%,
    rgba(27,34,40,.62) 68%,rgba(27,34,40,.34) 100%)}
/* 窄螢幕沒有左右之分，改成整片壓暗，不然文字會疊在照片最亮的地方 */
@media (max-width:860px){
  .page-hero .ph-bg::after{background:linear-gradient(180deg,rgba(27,34,40,.9),rgba(27,34,40,.82))}
}
.page-hero-plain .wrap{grid-template-columns:1fr}

.toc-layout{display:grid;grid-template-columns:240px 1fr;gap:56px;align-items:start}
.toc{position:sticky;top:140px;border-left:2px solid var(--c-line)}
.toc a{display:block;padding:8px 16px;margin-left:-2px;border-left:2px solid transparent;color:var(--c-ink-2);font-size:var(--fs-sm)}
.toc a:hover{color:var(--c-accent);border-color:var(--c-accent)}
.block+.block{margin-top:72px}
.block>h2{font-size:var(--fs-2xl);padding-bottom:16px;border-bottom:1px solid var(--c-line);margin-bottom:24px;display:flex;gap:14px;align-items:baseline}
.block>h2 .no{font-family:var(--font-num);color:var(--c-accent);font-size:var(--fs-xl)}

.spec{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--c-line);border:1px solid var(--c-line)}
.spec>div{background:var(--c-surface);padding:22px}
.spec h3{font-size:var(--fs-md);margin-bottom:6px}

.tbl-wrap{overflow-x:auto;border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-surface)}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
.tbl th,.tbl td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--c-line);vertical-align:top}
.tbl thead th{background:var(--c-surface-2);font-size:var(--fs-sm);font-weight:700;color:var(--c-ink-2);white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}

/* 流程 */
.flow{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;counter-reset:st}
.flow li{position:relative;padding:28px 20px 0 0;counter-increment:st}
.flow li::before{content:counter(st,decimal-leading-zero);display:block;font-family:var(--font-num);font-size:var(--fs-2xl);font-weight:700;color:var(--c-accent);line-height:1}
.flow li::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--c-line-2)}
/* 上框線：灰底線永遠在（li::after），橘線是另一層，進畫面依序長出來。
   原本是 `li:first-child` 單獨上色——那是單排流程的「起點」寫法，
   換行成多列網格之後只有左上角一格有顏色，看起來像沒寫完 */
.flow .fl-bar{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--c-accent);transform-origin:0 50%}
.js .flow .fl-bar{transform:scaleX(0)}
.js .flow.in .fl-bar{transform:scaleX(1);transition:transform .7s var(--ease) var(--sd,0s)}
.sec-dark .flow .fl-bar{background:var(--c-accent-hi)}
@media (prefers-reduced-motion:reduce){.js .flow .fl-bar{transform:scaleX(1);transition:none}}
.flow h3{font-size:var(--fs-lg);margin:12px 0 6px}
.flow p{font-size:var(--fs-sm);color:var(--c-ink-2)}
.sec-dark .flow li::after{background:#3A454D}
.sec-dark .flow li::before{color:var(--c-accent-hi)}
.sec-dark .flow p{color:var(--c-dark-ink-2)}

/* FAQ */
.faq{border-top:1px solid var(--c-line)}
.faq details{border-bottom:1px solid var(--c-line)}
.faq summary{list-style:none;display:flex;gap:16px;align-items:flex-start;padding:22px 4px;cursor:pointer;font-size:var(--fs-md);font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{font-family:var(--font-num);color:var(--c-accent);flex:none}
/* 題目是 h3（標題大綱要列得出各題），但看起來就是問句本身，
   不是比區塊大標更小一階的標題——字級與字重跟著 summary 走 */
.faq summary h3{font-size:inherit;font-weight:inherit;line-height:inherit}
.faq summary::after{content:"+";margin-left:auto;font-size:var(--fs-xl);line-height:1;color:var(--c-ink-3);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 4px 24px 40px;color:var(--c-ink-2)}

/* CTA 帶 */
.cta-band{background:var(--c-accent);color:#fff}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:48px;padding-bottom:48px;flex-wrap:wrap}
.cta-band h2{font-size:var(--fs-2xl)}
.cta-band p{opacity:.9;margin-top:6px}
.cta-band .btn{background:#fff;color:var(--c-accent)}
.cta-band .btn:hover{background:var(--c-ink);color:#fff}
.cta-band .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.8)}

/* ---------- 首頁：靜態版位（供動畫版沿用的元件） ---------- */
.mats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mats div{padding:18px 20px;background:var(--c-surface);border:1px solid var(--c-line);border-left:4px solid var(--c-accent);border-radius:var(--radius)}
.mats b{display:block;font-family:var(--font-num);font-size:var(--fs-xl);letter-spacing:.04em}
.mats span{font-size:var(--fs-sm);color:var(--c-ink-2)}

.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.pillars .ph,.pillars .ph-img{aspect-ratio:3/4}
.pillars h3{font-size:var(--fs-lg);margin-top:16px}
.pillars p{font-size:var(--fs-sm);color:var(--c-dark-ink-2);margin-top:4px}

/* 四張：第一張（工廠全景）佔滿左側，其餘三張在右側堆疊。
   版位大小＝客戶指定的優先順序，全景最重要所以最大 */
/* ---------- 案例照片輪播（.case-shots）----------
   照片是店家上傳的實拍，橫的直的都有，所以一律 contain 不裁切。
   沒有 JS 時 .shots-item 會全部顯示成縱向清單，照片一樣看得完。 */
.case-shots{position:relative}
.shots-stage{position:relative;background:var(--c-surface-2);border-radius:var(--radius);overflow:hidden}
.shots-item{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.shots-item img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain}
.js .shots-stage{height:min(560px,56vw)}
.js .shots-item{position:absolute;inset:0;opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
.js .shots-item img{width:100%;height:100%;max-height:none}
.js .shots-item.is-on{opacity:1;pointer-events:auto}

/* 左右鍵：壓在圖上，不另外佔版面高度 */
.shots-nav{position:absolute;top:min(280px,28vw);transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(27,34,40,.62);color:#fff;font-size:26px;line-height:1;
  display:grid;place-items:center;transition:background .2s}
.shots-nav:hover{background:var(--c-accent)}
.shots-nav.prev{left:12px}
.shots-nav.next{right:12px}
.shots-count{position:absolute;right:12px;top:12px;z-index:2;padding:3px 10px;border-radius:999px;
  background:rgba(27,34,40,.62);color:#fff;font-family:var(--font-num);font-size:var(--fs-sm)}

.shots-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:2px}
.shots-thumbs button{flex:0 0 84px;height:64px;padding:0;border:2px solid transparent;border-radius:var(--radius);
  overflow:hidden;background:var(--c-surface-2);cursor:pointer;opacity:.6;transition:opacity .2s,border-color .2s}
.shots-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.shots-thumbs button.is-on{opacity:1;border-color:var(--c-accent)}
.shots-thumbs button:hover{opacity:1}

/* 放大檢視：整張照片完整顯示，不裁切 */
.shots-box{position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:rgba(14,18,22,.92);padding:40px}
.shots-box img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.shots-box .x{position:absolute;top:18px;right:22px;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;cursor:pointer}
.shots-box .x:hover{background:var(--c-accent)}
.shots-box .shots-nav{top:50%}

.gallery{display:grid;grid-template-columns:1.7fr 1fr;grid-template-rows:repeat(3,148px);gap:12px}
.gallery .ph,.gallery .ph-img{aspect-ratio:auto;height:100%}
.gallery .ph:first-child,.gallery .ph-img:first-child{grid-row:span 3}

.case-card .meta{display:flex;gap:8px;flex-wrap:wrap}
.case-card h3{font-size:var(--fs-lg);line-height:1.5}
.case-card .facts{display:flex;gap:20px;margin-top:auto;padding-top:14px;border-top:1px solid var(--c-line);font-size:var(--fs-sm);color:var(--c-ink-2)}
.case-card .facts b{display:block;font-family:var(--font-num);font-size:var(--fs-lg);color:var(--c-ink)}

.intake{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.intake ol{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.intake li{padding:22px;background:var(--c-dark-2);border:1px solid #33404A;border-radius:var(--radius)}
.intake li b{display:block;font-family:var(--font-num);color:var(--c-accent-hi);font-size:var(--fs-lg)}
.intake li span{font-size:var(--fs-lg);font-weight:700;color:#fff}
.intake li p{font-size:var(--fs-sm);color:var(--c-dark-ink-2);margin-top:4px}
.intake .go{display:flex;flex-direction:column;gap:12px}

/* 產業頁 */
.risk{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.risk div{padding:22px;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius)}
.risk b{display:block;font-size:var(--fs-md);margin-bottom:4px}
.risk span{font-size:var(--fs-sm);color:var(--c-ink-2)}
.solve{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--c-line);border:1px solid var(--c-line)}
.solve div{background:var(--c-surface);padding:24px}
.solve .k{font-family:var(--font-num);font-weight:600;letter-spacing:.1em;color:var(--c-accent);font-size:var(--fs-sm)}
.solve h3{font-size:var(--fs-lg);margin:4px 0 6px}

/* 案例內頁 */
/* --n 由樣板給（實際填了幾項）：寫死四欄時只填兩項，後兩欄空著，
   視覺上就像最後一格被拉寬。上限四欄，超過不會發生（只有四個欄位） */
.case-facts{display:grid;grid-template-columns:repeat(var(--n,4),1fr);border:1px solid #33404A;margin-top:32px}
.case-facts div{padding:18px 20px;border-right:1px solid #33404A}
.case-facts div:last-child{border-right:0}
.case-facts span{display:block;font-size:var(--fs-xs);color:var(--c-dark-ink-2)}
.case-facts b{font-family:var(--font-num);font-size:var(--fs-xl);color:#fff}
.story{counter-reset:sto}
.story .step{display:grid;grid-template-columns:120px 1fr;gap:32px;padding:36px 0;border-top:1px solid var(--c-line)}
.story .step .k{counter-increment:sto;font-family:var(--font-num);font-weight:600;color:var(--c-accent);letter-spacing:.08em}
.story .step .k::before{content:counter(sto,decimal-leading-zero) " ";font-size:var(--fs-2xl);display:block;line-height:1}
.story h3{font-size:var(--fs-xl);margin-bottom:10px}
.story p+p{margin-top:12px}
.story .ph,.story .ph-img{margin-top:20px;max-width:640px}
.files{display:flex;flex-direction:column;gap:8px}
.files a{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius)}
.files a:hover{border-color:var(--c-accent)}
.files .ext{flex:none;width:44px;height:44px;display:grid;place-items:center;background:var(--c-dark);color:#fff;font-family:var(--font-num);font-size:var(--fs-sm);font-weight:700;border-radius:2px}
.files .nm{font-weight:500}
.files .sz{margin-left:auto;font-size:var(--fs-sm);color:var(--c-ink-3)}
.aside-box{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);padding:24px}
.aside-box h3{font-size:var(--fs-md);margin-bottom:12px}
.two-col{display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:start}
/* grid 的 1fr 預設不會小於內容寬度：內文有個 420px 的表格，手機上整頁就被撐寬。
   讓欄位可以縮，內文的寬表格才會縮進欄內（太寬時在內文裡左右捲動） */
.two-col>*{min-width:0}
.two-col aside{position:sticky;top:140px;display:flex;flex-direction:column;gap:16px}
.kv{display:grid;grid-template-columns:160px 1fr;border-top:1px solid var(--c-line)}
.kv dt,.kv dd{margin:0;padding:12px 0;border-bottom:1px solid var(--c-line);font-size:var(--fs-base)}
.kv dt{color:var(--c-ink-3);font-size:var(--fs-sm);padding-top:14px}

/* 文章 */
.art-list{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.art-card{display:grid;grid-template-columns:200px 1fr;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden}
.art-card .ph,.art-card .ph-img{aspect-ratio:auto;height:100%;min-height:170px;border-radius:0}
.art-card .body{padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.art-card h3{font-size:var(--fs-lg);line-height:1.5}
.art-card:hover{border-color:var(--c-line-2);box-shadow:var(--shadow)}
.art-card:hover h3{color:var(--c-accent)}
.sec .tks-view > *:first-child{margin-top:0}
.prose{font-size:var(--fs-md);line-height:1.95;color:#2A323A}
.prose>*+*{margin-top:20px}
.prose h2{font-size:var(--fs-2xl);margin-top:48px}
.prose h3{font-size:var(--fs-xl);margin-top:36px}
.prose ul{padding-left:4px}
.prose ul li{position:relative;padding-left:24px}
.prose ul li+li{margin-top:6px}
.prose ul li::before{content:"";position:absolute;left:4px;top:14px;width:8px;height:8px;background:var(--c-accent)}
.prose .ph,.prose .ph-img{max-width:100%}
/* 內文圖片沿用編輯器存下的寬度；height 交給瀏覽器算，
   否則畫面比圖窄時 max-width 會壓寬度、而寫死的 height 不動，圖就被壓扁 */
.prose img{height:auto}
/* 內文表格沿用編輯器拉出來的欄寬，但不准撐破版面：table-layout:fixed 下
   瀏覽器會按比例把欄寬縮進容器，使用者拉出來的比例仍然看得出來 */
.prose table{max-width:100%}
.prose .tbl{font-size:var(--fs-base)}
/* 編輯器內容（.tks-view，樣式在 tks-content.css）：只透過它開放的變數調整，
   不覆寫它的規則——覆寫會讓前台與編輯器長得不一樣。
   **後台 admin-cms.css 要設成同一組值**，否則所見即所得就破了。
   預設 14px 是編輯器給表單用的尺寸，形象站的內文要再大一點 */
.tks-view{--tks-view-font-family:var(--font);--tks-view-font-size:18px;
  --tks-view-line-height:1.95;--tks-view-color:#2A323A}

/* 表單 */
.form{display:flex;flex-direction:column;gap:28px}
.fset{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);padding:32px}
.fset>h2{font-size:var(--fs-xl);display:flex;align-items:baseline;gap:12px;margin-bottom:24px}
.fset>h2 .no{font-family:var(--font-num);color:var(--c-accent)}
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 24px}
.fgrid .full{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:8px}
.fld label,.fld .lb{font-size:var(--fs-sm);font-weight:700;color:var(--c-ink-2)}
.fld .req{color:var(--c-danger);margin-left:4px}
.inp,.sel,.txa{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--c-line-2);border-radius:var(--radius);background:#fff;font-size:var(--fs-base)}
.txa{min-height:120px;resize:vertical}
.inp:focus,.sel:focus,.txa:focus{outline:0;border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(184,90,18,.15)}
.dims{display:grid;grid-template-columns:1fr auto 1fr auto 1fr 90px;gap:8px;align-items:center}
.dims .x{color:var(--c-ink-3)}
.unit{display:grid;grid-template-columns:1fr 90px;gap:8px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:inline-flex;align-items:center;min-height:44px;padding:6px 16px;border:1px solid var(--c-line-2);border-radius:var(--radius);background:#fff;cursor:pointer;font-size:var(--fs-base)}
.opt input:checked+span{border-color:var(--c-accent);background:var(--c-accent-bg);color:var(--c-accent);font-weight:700}
.opt input:focus-visible+span{outline:2px solid var(--c-accent-hi);outline-offset:2px}
.hint{font-size:var(--fs-sm);color:var(--c-ink-3)}
.up{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;padding:24px;border:2px dashed var(--c-line-2);border-radius:var(--radius);background:var(--c-surface-2);text-align:center;cursor:pointer}
.up:hover{border-color:var(--c-accent)}
.up b{font-size:var(--fs-md)}
.up-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.up-list div{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);font-size:var(--fs-sm)}
.up-list div span:last-child{margin-left:auto;color:var(--c-ink-3)}
.notice{margin-top:10px;padding:12px 14px;background:#FFF6E8;border-left:4px solid var(--c-warn);border-radius:0 var(--radius) var(--radius) 0;font-size:var(--fs-sm);line-height:1.8;color:#6A4B0F}
.notice b{color:#8A5A00}
.agree{display:flex;gap:10px;align-items:flex-start}
.agree input{width:20px;height:20px;margin-top:4px;accent-color:var(--c-accent)}
.rfq-line{display:grid;grid-template-columns:96px 1fr auto;gap:20px;align-items:center;padding:20px 24px;background:#F0FBF4;border:1px solid #BFE8CF;border-radius:var(--radius)}
.rfq-line .rfq-qr{min-height:0;aspect-ratio:1/1;padding:6px;align-items:center;justify-content:center}
.rfq-line .tx{display:flex;flex-direction:column;gap:4px}
.rfq-line .tx b{font-size:var(--fs-md)}
.rfq-line .tx span{font-size:var(--fs-sm);color:var(--c-ink-2)}
.rfq-line-btn{background:#06C755;color:#fff}
.rfq-line-btn:hover{background:#05A847}
.rfq-line-btn svg{width:22px;height:22px}
@media (max-width:680px){.rfq-line{grid-template-columns:72px 1fr}.rfq-line-btn{grid-column:1/-1}}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}

.done{max-width:760px;margin:0 auto;text-align:center;padding:40px 0}
.done .ok{width:88px;height:88px;margin:0 auto 28px;border-radius:50%;background:var(--c-accent-bg);display:grid;place-items:center}
.done .ok::after{content:"";width:34px;height:18px;border-left:5px solid var(--c-accent);border-bottom:5px solid var(--c-accent);transform:rotate(-45deg) translate(3px,-4px)}
.done h1{font-size:var(--fs-3xl)}
.done blockquote{margin:28px 0 0;padding:24px 28px;background:var(--c-surface);border-left:4px solid var(--c-accent);text-align:left;font-size:var(--fs-md);color:var(--c-ink-2)}
.done .row{justify-content:center;margin-top:36px}
.nf{min-height:60vh;display:grid;place-items:center;text-align:center}
.nf .code{font-family:var(--font-num);font-size:var(--fs-code);font-weight:700;line-height:1;color:var(--c-line-2)}

/* 認證標章、列表分頁（前台通用，版型區塊／案例文章列表沿用） */
.cert-logo{width:88px;min-height:0;margin-bottom:12px}
.pager{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;font-size:var(--fs-sm);color:var(--c-ink-3)}
.pager .pg{display:flex;gap:4px}
.pager .pg a{min-width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--c-line);border-radius:3px;color:var(--c-ink-2)}
.pager .pg a.on{background:var(--c-ink);border-color:var(--c-ink);color:#fff}

/* ---------- RWD：1024 / 860 / 680 / 460 ---------- */
@media (max-width:1024px){
  .big-wrap{grid-template-columns:1fr;gap:36px}
  .wrap{padding:0 24px}
  .sec{padding:72px 0}
  .ham{display:flex}
  .site-top .btn-rfq{display:none}
  .site-nav{position:fixed;top:var(--nav-top,76px);right:0;bottom:0;width:min(400px,100%);height:auto;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px 0 calc(32px + env(safe-area-inset-bottom));background:#fff;overflow-y:auto;overscroll-behavior:contain;visibility:hidden;transform:translateX(100%);transition:transform .35s var(--ease),visibility 0s linear .35s;z-index:52;box-shadow:-12px 0 32px rgba(0,0,0,.14)}
  .site-nav.open{visibility:visible;transform:none;transition:transform .35s var(--ease),visibility 0s}
  .site-nav.open>*{animation:navin .45s var(--ease) both}
  .site-nav.open>*:nth-child(2){animation-delay:.04s}.site-nav.open>*:nth-child(3){animation-delay:.08s}.site-nav.open>*:nth-child(4){animation-delay:.12s}.site-nav.open>*:nth-child(5){animation-delay:.16s}.site-nav.open>*:nth-child(6){animation-delay:.2s}.site-nav.open>*:nth-child(7){animation-delay:.24s}
  .nd-m a{border-left:3px solid transparent}
  .nd-m a.on{border-left-color:var(--c-accent);background:#fff}
  .site-nav>a.on,.nd-t.on{color:var(--c-accent)}
  .site-nav>a.m-rfq{display:flex;justify-content:center;width:auto;min-height:52px;margin:24px 24px 0;padding:10px 24px;border:0;border-radius:var(--radius);background:var(--c-accent);color:#fff}
  .site-nav>a.m-rfq:hover{background:#9C4C0F}
  .site-nav>a,.nd-t{height:auto;min-height:56px;padding:0 24px;width:100%;justify-content:space-between;border-bottom:1px solid var(--c-line)}
  .site-nav>a::after,.nd-t::after{display:none}
  .nd{height:auto}
  .nd-m{position:static;min-width:0;padding:4px 0 8px;border:0;box-shadow:none;border-radius:0;background:var(--c-surface-2);opacity:1;visibility:visible;transform:none;display:none}
  .nd:hover .nd-m,.nd:focus-within .nd-m{display:none}
  .nd.open .nd-m{display:block}
  .nd.open .nd-t .car{transform:rotate(-135deg)}
  .nd-m a{padding:12px 40px}
  .site-nav .m-rfq{display:flex;margin:20px 24px 0}
  .nav-back{display:block;position:fixed;inset:0;background:rgba(14,19,22,.5);z-index:49;animation:fadein .3s ease both}
  .nav-back[hidden]{display:none}
  .g6{grid-template-columns:repeat(3,1fr)}
  .g4,.g5{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:40px}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .intake{grid-template-columns:1fr}
  .site-foot .cols{grid-template-columns:repeat(2,1fr)}
  .site-foot .cols>div:first-child{grid-column:1/-1}
  .toc-layout,.two-col{grid-template-columns:1fr}
  .toc{display:none}
  .two-col aside{position:static}
  .art-list{grid-template-columns:1fr}
}
@media (max-width:860px){
  :root{--fs-hero:40px;--fs-3xl:32px;--fs-2xl:26px}
  .g3,.spec,.risk,.solve,.mats{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:240px 160px}
  .gallery .ph:first-child,.gallery .ph-img:first-child{grid-column:1/-1;grid-row:auto}
  .case-facts{grid-template-columns:repeat(min(var(--n,4),2),1fr)}
  .case-facts div:nth-child(2){border-right:0}
  .case-facts div:nth-child(-n+2){border-bottom:1px solid #33404A}
  .story .step{grid-template-columns:1fr;gap:12px}
  .intake ol{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
}
@media (max-width:680px){
  .wrap{padding:0 20px}
  .sec{padding:56px 0}
  .h2{font-size:var(--fs-2xl)}
  .g2,.g3,.g4,.g5,.spec,.risk,.solve,.mats,.pillars{grid-template-columns:1fr}
  .g6{grid-template-columns:repeat(2,1fr)}
  .flow{grid-auto-flow:row;gap:20px}
  .art-card{grid-template-columns:1fr}
  .art-card .ph,.art-card .ph-img{aspect-ratio:16/9;height:auto}
  .dims{grid-template-columns:1fr auto 1fr auto 1fr;row-gap:8px}
  .dims .sel{grid-column:1/-1}
  .fset{padding:22px}
  .site-foot .cols{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .kv dt{border-bottom:0;padding-bottom:0}
  .line-fab span{display:none}
  .line-fab{padding:0 12px;width:52px;justify-content:center}
}
@media (max-width:460px){
  .g6{grid-template-columns:1fr}
  .case-facts{grid-template-columns:1fr}
  .case-facts div{border-right:0;border-bottom:1px solid #33404A}
}

/* ============================================================
   動態效果（系統重點項目：SVG 動畫＋捲動載入，§5-1）
   ・進入畫面才播放（JS 加 .in）
   ・JS 未執行或「減少動態效果」時，一律直接顯示完成狀態
   ============================================================ */
:root{--ease:cubic-bezier(.2,.75,.2,1);--ease-back:cubic-bezier(.34,1.4,.64,1)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 捲動淡入 */
.js .rv{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
/* 首屏載入 */
.js .ld{opacity:0;transform:translateY(24px);filter:blur(6px);transition:opacity 1s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s),filter 1s var(--ease) var(--d,0s)}
.js .in .ld,.js .ld.in{opacity:1;transform:none;filter:none}
/* SVG 線條描繪 */
.draw{fill:none;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease) var(--dd,0s)}
.in .draw{stroke-dashoffset:0}
.draw.d2{--dd:.45s}.draw.d3{--dd:.9s}

/* 閱讀進度 & 版頭 */
.scroll-prog{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none}
.scroll-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--c-accent),var(--c-accent-hi));transform-origin:0 50%;transform:scaleX(var(--p,0))}
.site-top .in{transition:height .3s var(--ease)}
.site-top.scrolled{box-shadow:0 6px 24px rgba(20,26,31,.08)}
.site-top.scrolled .in{height:64px}

/* 按鈕光暈 */
.btn-glow{position:relative;isolation:isolate}
.btn-glow::after{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;box-shadow:0 0 0 0 rgba(224,122,38,.55);animation:glow 2.4s ease-out infinite}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(224,122,38,.5)}70%,100%{box-shadow:0 0 0 16px rgba(224,122,38,0)}}
.lift{transition:transform .35s var(--ease),translate .35s var(--ease),box-shadow .35s var(--ease),border-color .2s}
.lift:hover{translate:0 -6px;box-shadow:0 18px 40px rgba(20,26,31,.12)}
.zoom{transition:transform .8s var(--ease)}
.lift:hover .zoom{transform:scale(1.06)}

/* ---------- 區塊 1：Hero ---------- */
.hx{position:relative;min-height:min(calc(100vh - 76px),820px);display:flex;flex-direction:column;justify-content:center;background:#0E1316;color:#fff;overflow:hidden}
.hx-photo{position:absolute;inset:0;transform:translateY(var(--py,0px)) scale(1.08)}
.hx-photo .ph,.hx-photo .ph-img{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;align-items:flex-start;justify-content:flex-end;padding:24px;animation:kenburns 24s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
.hx::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 75% 45%,rgba(224,122,38,.16),transparent 55%),linear-gradient(90deg,rgba(14,19,22,.96) 0%,rgba(14,19,22,.82) 45%,rgba(14,19,22,.45) 100%)}
.hx-grid{position:absolute;inset:-60px;z-index:1;opacity:.35;background-image:linear-gradient(rgba(231,235,238,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(231,235,238,.07) 1px,transparent 1px);background-size:60px 60px;animation:gridmove 18s linear infinite;-webkit-mask-image:radial-gradient(ellipse at 70% 50%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 50%,#000 20%,transparent 70%)}
@keyframes gridmove{to{transform:translate(60px,60px)}}
.hx-in{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;width:100%;padding-top:64px;padding-bottom:120px}
.hx h1{font-size:var(--fs-hero);font-weight:900;line-height:1.15;margin-top:20px;letter-spacing:.01em}
.hx h1 em{font-style:normal;background:linear-gradient(90deg,#fff 0%,#FFD2A8 45%,var(--c-accent-hi) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hx .sub{font-size:var(--fs-xl);color:var(--c-dark-ink);margin-top:20px;max-width:620px}
.hx .row{margin-top:40px;gap:14px}
.hx .btn-line{border-color:rgba(255,255,255,.55);color:#fff}
.hx .btn-line:hover{background:#fff;color:var(--c-ink)}

.hx-case{width:100%;max-width:560px;justify-self:end;overflow:visible;animation:float 6s ease-in-out 4.5s infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.hx-case .draw{stroke:var(--c-accent-hi);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.hx-case .face{opacity:0;transition:opacity 1s var(--ease) 1.8s}
.hx-case .f-left{fill:rgba(231,235,238,.07)}
.hx-case .f-right{fill:rgba(231,235,238,.12)}
.hx-case .f-top{fill:rgba(224,122,38,.18)}
.hx.in .hx-case .face{opacity:1}
.hx-body .draw{--dd:.3s}.hx-body .draw.d2{--dd:1.1s}.hx-body .draw.d3{--dd:1.5s}
.hx-lid .draw{--dd:.6s}.hx-lid .draw.d2{--dd:1.4s}
.hx-lid{transform-box:fill-box;transform-origin:100% 100%;transition:transform 1.2s var(--ease-back) 2.7s}
.hx.in .hx-lid{transform:translate(18px,-78px) rotate(9deg)}
.hx-foam path{fill:rgba(231,235,238,.14);stroke:rgba(231,235,238,.35);stroke-width:1.5}
.hx-foam .dev{fill:var(--c-accent);stroke:var(--c-accent-hi)}
.hx-foam{opacity:0;transition:opacity .8s var(--ease) 2.9s}
.hx-foam .dev{transform-box:fill-box;transform:translateY(-110px);opacity:0;transition:transform 1s var(--ease-back) 3.3s,opacity .5s 3.3s}
.hx.in .hx-foam{opacity:1}
.hx.in .hx-foam .dev{transform:none;opacity:1}
.hx-dim path{stroke:rgba(231,235,238,.45);stroke-width:1.2;stroke-dasharray:1;--dd:3.6s}
.hx-dim circle{fill:rgba(231,235,238,.6);opacity:0;transition:opacity .6s 4.2s}
.hx.in .hx-dim circle{opacity:1}
.hx-ok{transform-box:fill-box;transform-origin:50% 50%;transform:scale(0);transition:transform .7s var(--ease-back) 4.3s}
.hx-ok circle{fill:var(--c-accent)}
.hx-ok path{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.hx.in .hx-ok{transform:scale(1);animation:okpulse 2.6s ease-in-out 5.2s infinite}
@keyframes okpulse{50%{transform:scale(1.1)}}

.ticker{position:absolute;left:0;right:0;bottom:0;z-index:2;overflow:hidden;border-top:1px solid rgba(231,235,238,.12);background:rgba(14,19,22,.6);backdrop-filter:blur(4px)}
.ticker-t{display:flex;width:max-content;animation:ticker 36s linear infinite}
.ticker span{display:flex;align-items:center;gap:32px;padding:16px 16px;font-family:var(--font-num);font-size:var(--fs-lg);font-weight:600;letter-spacing:.08em;color:var(--c-dark-ink-2);white-space:nowrap}
.ticker span::after{content:"";width:8px;height:8px;background:var(--c-accent-hi);transform:rotate(45deg)}
@keyframes ticker{to{transform:translateX(-50%)}}
.hx-scroll{position:absolute;left:50%;bottom:76px;z-index:3;width:28px;height:44px;margin-left:-14px;border:2px solid rgba(231,235,238,.5);border-radius:14px}
.hx-scroll i{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(16px)}}

/* ---------- 區塊 2：40+ ---------- */
.hm-dna-grid{display:grid;grid-template-columns:auto 1fr;gap:80px;align-items:center}
.hm-num{display:flex;flex-direction:column}
.hm-num .n{display:flex;align-items:flex-start;font-family:var(--font-num);font-size:var(--fs-display);font-weight:700;line-height:.8;color:var(--c-accent);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hm-num .n i{font-style:normal;font-size:var(--fs-display-m);line-height:.9}
.hm-num .u{font-family:var(--font-num);font-size:var(--fs-2xl);letter-spacing:.3em;margin-top:16px}
.hm-num .bar{display:block;height:6px;margin-top:18px;background:var(--c-surface-2);overflow:hidden}
.hm-num .bar i{display:block;height:100%;background:var(--c-accent);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.8s var(--ease) .3s}
.hm-num.in .bar i{transform:scaleX(1)}
.hm-range{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;margin-top:64px;padding:32px 36px;background:var(--c-bg);border-radius:var(--radius)}
.hm-range .end b{display:block;font-family:var(--font-num);font-size:var(--fs-3xl);line-height:1;color:var(--c-ink);font-variant-numeric:tabular-nums}
.hm-range .end:last-child{text-align:right}
.hm-range .end:last-child b{color:var(--c-accent)}
.hm-range .end span{font-size:var(--fs-sm);color:var(--c-ink-2)}
.hm-range .track{position:relative;height:4px;background:var(--c-line)}
.hm-range .track i{position:absolute;inset:0;background:linear-gradient(90deg,var(--c-line-2),var(--c-accent));transform-origin:0 50%;transform:scaleX(0);transition:transform 2.2s var(--ease) .2s}
.hm-range .track em{position:absolute;inset:-12px 0;transform:translateX(0);transition:transform 2.2s var(--ease) .2s}
.hm-range .track em::before{content:"";position:absolute;left:-12px;top:0;width:24px;height:24px;border-radius:4px;background:var(--c-accent);box-shadow:0 4px 12px rgba(184,90,18,.4)}
.hm-range.in .track i{transform:scaleX(1)}
.hm-range.in .track em{transform:translateX(100%)}

/* ---------- 區塊 3：製造能力 ---------- */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cap-c{display:flex;flex-direction:column;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .2s}
.cap-c:hover{translate:0 -6px;box-shadow:0 18px 40px rgba(20,26,31,.1);border-color:var(--c-accent)}
.cap-ph{position:relative;display:block;overflow:hidden}
.cap-c .ph-img{border-radius:0;transition:scale .6s var(--ease)}
.cap-c:hover .ph-img{scale:1.04}
/* 編號壓在照片左下：照片本身說不出「這是第幾站」，編號要留著 */
.cap-ix{position:absolute;left:0;bottom:0;padding:7px 14px;background:var(--c-accent);color:#fff;
  font-family:var(--font-num);font-size:var(--fs-sm);font-weight:700;letter-spacing:.08em;font-style:normal}
.cap-t{padding:18px 22px 22px}
.cap-t h3{font-size:var(--fs-xl)}
.cap-t p{margin-top:6px;font-size:var(--fs-sm);color:var(--c-ink-2)}

/* ---------- 區塊 4：一站式流程 ---------- */
.pr{position:relative;padding-top:56px}
.pr-track{position:absolute;left:calc(100% / 14);right:calc(100% / 14);top:96px;height:4px;background:#34404A;border-radius:2px}
.pr-track>i{position:absolute;inset:0;background:linear-gradient(90deg,var(--c-accent),var(--c-accent-hi));border-radius:2px;transform-origin:0 50%;transform:scaleX(0);transition:transform 3.2s cubic-bezier(.45,0,.25,1) .3s}
.pr-box{position:absolute;left:-20px;top:-78px;width:40px;height:32px;opacity:0;transition:transform 3.2s cubic-bezier(.45,0,.25,1) .3s,opacity .4s .3s}
.pr-box rect,.pr-box path{fill:none;stroke:var(--c-accent-hi);stroke-width:2.5;stroke-linejoin:round}
.pr-box rect{fill:var(--c-dark)}
.pr.in .pr-track>i{transform:scaleX(1)}
.loop-reset,.loop-reset *,.loop-reset *::before,.loop-reset *::after{transition:none !important}
.pr-track{--w:0px}
.pr.in .pr-box{opacity:1;transform:translateX(var(--w))}
.pr-steps{position:relative;display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.pr-steps li{padding:0 8px}
.pr-steps .dot{position:relative;display:grid;place-items:center;width:64px;height:64px;margin:10px auto 18px;border-radius:50%;background:var(--c-dark-2);border:2px solid #3E4A53;font-family:var(--font-num);font-size:var(--fs-xl);font-weight:700;color:var(--c-dark-ink-2);transition:background .5s,border-color .5s,color .5s,transform .5s var(--ease-back);transition-delay:var(--sd,0s)}
.pr-steps .dot::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--c-accent-hi);opacity:0;transform:scale(.8);transition:opacity .5s,transform .6s var(--ease);transition-delay:var(--sd,0s)}
.pr-steps h3{font-size:var(--fs-lg);color:var(--c-dark-ink-2);transition:color .5s var(--sd,0s)}
.pr-steps p{font-size:var(--fs-sm);color:var(--c-dark-ink-2);margin-top:4px;opacity:.6;transition:opacity .5s var(--sd,0s)}
.pr-steps li:nth-child(1){--sd:.3s}.pr-steps li:nth-child(2){--sd:.8s}.pr-steps li:nth-child(3){--sd:1.3s}.pr-steps li:nth-child(4){--sd:1.8s}.pr-steps li:nth-child(5){--sd:2.3s}.pr-steps li:nth-child(6){--sd:2.8s}.pr-steps li:nth-child(7){--sd:3.3s}
.pr.in .dot{background:var(--c-accent);border-color:var(--c-accent-hi);color:#fff;transform:scale(1.06)}
.pr.in .dot::after{opacity:.35;transform:scale(1)}
.pr.in h3{color:#fff}
.pr.in p{opacity:1}

/* ---------- 區塊 5：產業中心 ---------- */
/* ---------- 區塊 3-1：三公尺以上大型設備運輸箱 ---------- */
/* 實拍在左、工程點在右：照片證明做得出來，文字說明為什麼難做。
   SVG 尺規不進這一列——它跟著標題走（.big-aside），說的是尺寸不是產品 */
.big-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.big-photo{display:block;width:100%;height:auto}
/* 標題右側：尺規在上、連結在下。固定寬度而不是讓它跟著 flex 伸縮，
   不然標題短的時候尺規會被拉到整頁寬，比照片還搶眼 */
.big-aside{display:grid;gap:16px;justify-items:end;width:min(440px,100%)}
/* 側視圖：只動 transform／opacity／stroke-dashoffset；色碼全走 --c-*。
   線寬與字級是照「縮到 440px 顯示」抓的，改寬度時要一起回頭看 */
.big-fig{width:100%}
.big-fig svg{display:block;width:100%;height:auto}
.big-fig path,.big-fig rect,.big-fig circle{fill:none;stroke-linecap:round;stroke-linejoin:round}
.big-fig .draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease) var(--dd,0s)}
.big-fig.in .draw{stroke-dashoffset:0}

.big-fig .ground{stroke:var(--c-dark-line);stroke-width:3;--dd:.1s}

/* 尺寸標註 */
.big-fig .dim path{stroke:var(--c-accent-hi);stroke-width:3}
.big-fig .dim text{fill:var(--c-accent-hi);font-family:var(--font-num);font-size:46px;font-weight:700;letter-spacing:.04em}
.big-fig .dim-h text{text-anchor:middle}
.big-fig .dim-h{--dd:1.8s}
.big-fig .dim text,.big-fig .dim path:not(.draw){opacity:0;transition:opacity .4s}
.big-fig.in .dim-h text,.big-fig.in .dim-h path:not(.draw){opacity:1;transition-delay:2.6s}

/* 箱體 */
.big-fig .shell{stroke:var(--c-accent-hi);stroke-width:4;--dd:.7s}
.big-fig .frame path{stroke:var(--c-dark-4);stroke-width:2.5;--dd:1.5s}
.big-fig .skid{stroke:var(--c-accent-hi);stroke-width:4;fill:var(--c-dark-2);--dd:1.2s}
.big-fig .pocket{fill:var(--c-dark);stroke:var(--c-dark-4);stroke-width:2;opacity:0;transition:opacity .4s 1.8s}
.big-fig.in .pocket{opacity:1}
.big-fig .wheels circle{stroke:var(--c-dark-ink-2);stroke-width:3.5;fill:var(--c-dark-2);
  transform-box:fill-box;transform-origin:50% 50%;scale:0;transition:scale .45s var(--ease-back) var(--wd,0s)}
.big-fig.in .wheels circle{scale:1}
.big-fig .wheels circle:nth-child(1){--wd:1.6s}
.big-fig .wheels circle:nth-child(2){--wd:1.7s}
.big-fig .wheels circle:nth-child(3){--wd:1.8s}
.big-fig .wheels circle:nth-child(4){--wd:1.9s}

/* 叉車貨叉：滑進進叉位置，帶出「這東西要用堆高機搬」 */
.big-fig .fork path{stroke:var(--c-accent);stroke-width:6}
.big-fig .fork{opacity:0;transform:translateX(-140px);transition:transform 1s var(--ease) 2.2s,opacity .4s 2.2s}
.big-fig.in .fork{opacity:1;transform:none}

.big-list{display:grid;grid-template-columns:1fr;gap:22px}
.big-list li{padding-top:18px;border-top:2px solid var(--c-dark-line)}
.big-list b{display:block;font-size:var(--fs-lg);color:var(--c-dark-ink)}
.big-list span{display:block;margin-top:6px;font-size:var(--fs-sm);color:var(--c-dark-ink-2)}

/* ---------- 區塊 5：六大產業（實景照） ---------- */
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ind-c{display:block;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden;transition:transform .35s var(--ease),border-color .2s,box-shadow .35s}
.ind-c .ph-img{border-radius:0}
.ind-t{padding:18px 20px 20px}
.ind-t b{display:flex;align-items:center;gap:10px;font-size:var(--fs-lg)}
.ind-t b::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 4px var(--c-accent-bg)}
.ind-t span{display:block;margin-top:4px;font-size:var(--fs-sm);color:var(--c-ink-2)}
.ind-c:hover{translate:0 -4px;border-color:var(--c-accent);box-shadow:0 14px 30px rgba(20,26,31,.1)}

.stk{position:relative}
.stk-arrow{position:absolute;left:4%;right:4%;top:-8px;width:92%;height:40px;overflow:visible}
.stk-arrow .draw{stroke:var(--c-accent-hi);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;--dd:2.4s}
.stk-arrow .draw.d2{--dd:3.4s}
.stk-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:end;padding-top:48px}
.stk-cols li{display:flex;flex-direction:column;gap:14px}
.stk-b{display:grid;gap:4px;align-content:end;min-height:170px}
.stk-cols li:nth-child(1) .stk-b{grid-template-columns:28px}
.stk-cols li:nth-child(2) .stk-b{grid-template-columns:repeat(3,28px)}
.stk-cols li:nth-child(3) .stk-b{grid-template-columns:repeat(3,1fr)}
.stk-cols li:nth-child(4) .stk-b{grid-template-columns:repeat(8,1fr)}
.stk-b i{display:block;height:16px;border-radius:2px;background:#5A6771;opacity:0;transform:translateY(-70px);transition:transform .55s var(--ease-back) var(--d,0s),opacity .3s var(--d,0s)}
.stk-cols li:nth-child(4) .stk-b i{background:var(--c-accent-hi)}
.stk.in .stk-b i{opacity:1;transform:none}
.stk .lb{border-top:2px solid #3E4A53;padding-top:12px}
.stk-cols li:nth-child(4) .lb{border-color:var(--c-accent-hi)}
.stk .lb b{display:block;font-family:var(--font-num);font-size:var(--fs-xl);color:#fff;letter-spacing:.04em}
.stk .lb span{font-size:var(--fs-sm);color:var(--c-dark-ink-2)}

/* ---------- 量產流程動畫（量產能力頁 Prototype → Mass，§5-1）----------
   圖形固定、文字來自 page_blocks；只動 transform／opacity／stroke-dashoffset。
   方塊／軌道／文字三列，兩個格線用同一組欄寬與 gap 才會對齊。 */
.mpl{--mpl-cols:5;--mpl-gap:16px}
.mpl-boxes,.mpl-cols{display:grid;grid-template-columns:repeat(var(--mpl-cols),1fr);gap:var(--mpl-gap)}
.mpl-boxes{align-items:end}
.mpl-b{display:grid;gap:4px;align-content:end;min-height:120px}
.mpl-b:nth-child(1){grid-template-columns:30px}
.mpl-b:nth-child(2){grid-template-columns:repeat(2,30px)}
.mpl-b:nth-child(3){grid-template-columns:repeat(3,1fr)}
.mpl-b:nth-child(4){grid-template-columns:repeat(4,1fr)}
.mpl-b:nth-child(5){grid-template-columns:repeat(8,1fr)}
.mpl-b i{display:block;height:15px;border-radius:2px;background:var(--c-dark-4);opacity:0;transform:translateY(-60px);transition:transform .55s var(--ease-back) var(--d,0s),opacity .3s var(--d,0s)}
.mpl-b:nth-child(5) i{background:var(--c-accent-hi)}
.mpl.in .mpl-b i{opacity:1;transform:none}
/* 軌道：一條連續的線，而不是每欄各畫一段底線 */
.mpl-rail{display:block;width:100%;height:4px;margin:14px 0 0}
.mpl-rail path{fill:none;stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mpl-rail .base{stroke:var(--c-dark-line)}
.mpl-rail .draw{stroke:var(--c-accent-hi);stroke-dasharray:1;stroke-dashoffset:1;--dd:.2s;transition:stroke-dashoffset 3.4s var(--ease) var(--dd)}
.mpl-cols{margin-top:12px;align-items:start}
.mpl-cols h3{font-size:var(--fs-lg);color:var(--c-dark-ink);line-height:1.3}
.mpl-cols p{font-size:var(--fs-sm);color:var(--c-dark-ink-2);margin-top:4px}
/* 淺底區塊也要能看（版型改成 white 時） */
.sec-white .mpl-rail .base{stroke:var(--c-line-2)}
.sec-white .mpl-b i{background:var(--c-line-2)}
.sec-white .mpl-b:nth-child(5) i{background:var(--c-accent)}
.sec-white .mpl-cols h3{color:var(--c-ink)}
.sec-white .mpl-cols p{color:var(--c-ink-2)}
/* 斷點規則必須接在元件後面：媒體查詢不增加權重，
   寫在元件定義之前會被後面的基礎規則整條蓋掉（看起來就像沒寫） */
@media (max-width:860px){
  .mpl-b:nth-child(5){grid-template-columns:repeat(4,1fr)}
  .mpl-cols{row-gap:24px}
  .mpl-cols h3{font-size:var(--fs-md)}
}
@media (max-width:680px){
  /* 單欄時橫向軌道沒有意義，隱藏圖形只留文字——資訊本來就不靠動畫傳達 */
  .mpl-boxes,.mpl-rail{display:none}
  .mpl{--mpl-cols:1}
  .mpl-cols{row-gap:20px}
}

/* 標題下的英文副標：跟 .eyebrow（標題上方的小標）要看得出是兩個層級，
   所以不全大寫、不加前綴線，只是安靜地墊在標題下面 */
.h2-en{margin-top:12px;font-family:var(--font-num);font-size:var(--fs-lg);
  letter-spacing:.04em;color:var(--c-ink-3)}
.sec-dark .h2-en{color:var(--c-dark-ink-2)}

/* ---------- 區塊 7：材料剖面 ---------- */
.xs{position:relative;padding:24px;background:var(--c-dark);border-radius:var(--radius);overflow:hidden}
.xs svg{display:block;width:100%;height:auto}
.xs .shell{fill:#232B31;stroke:#56626B;stroke-width:3}
.xs .shell-lid{stroke:#56626B;stroke-width:3;stroke-dasharray:8 6}
.xs .ly{fill:#3A454D;transform-box:fill-box;transform:translateX(-60px);opacity:0;transition:transform .8s var(--ease) var(--d,0s),opacity .6s var(--d,0s)}
.xs .ly:nth-child(2n){fill:#46525B}
.xs .ly.esd{fill:rgba(224,122,38,.45)}
.xs.in .ly{transform:none;opacity:1}
.xs .cavity{fill:#1B2228;stroke:var(--c-accent-hi);stroke-width:2;stroke-dasharray:6 5;opacity:0;transition:opacity .6s 1.3s}
.xs.in .cavity{opacity:1}
.xs .device{transform-box:fill-box;transform:translateY(-200px);opacity:0;transition:transform 1.1s var(--ease-back) 1.8s,opacity .4s 1.8s}
.xs .device rect{fill:var(--c-accent)}
.xs .device path{stroke:rgba(255,255,255,.7);stroke-width:4;stroke-linecap:round}
.xs.in .device{transform:none;opacity:1}
.xs .scan{stroke:var(--c-accent-hi);stroke-width:2;opacity:0}
.xs.in .scan{animation:scan 4s ease-in-out 3.2s infinite}
@keyframes scan{0%{opacity:0;transform:translateX(0)}15%{opacity:.8}85%{opacity:.8}100%{opacity:0;transform:translateX(180px)}}

/* ---------- 區塊 8：供應鏈定位 ---------- */
.chain{position:relative;margin-bottom:12px}
.chain-line{position:absolute;left:0;right:0;top:18px;width:100%;height:20px}
.chain-line .base{stroke:#34404A;stroke-width:4;vector-effect:non-scaling-stroke}
.chain-line .fill{stroke:var(--c-accent-hi);stroke-width:4;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s var(--ease) .3s}
.chain.in .chain-line .fill{stroke-dashoffset:0}
.chain-dot{position:absolute;left:6%;right:6%;top:22px;height:12px;pointer-events:none}
.chain-dot::before{content:"";position:absolute;left:-6px;top:0;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(224,122,38,.5),0 0 18px var(--c-accent-hi);opacity:0}
.chain.in .chain-dot::before{animation:travel 3.6s ease-in-out 2.8s infinite}
@keyframes travel{0%{opacity:0;left:0}10%{opacity:1}90%{opacity:1}100%{opacity:0;left:100%}}
.chain ol{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.chain li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;opacity:.35;transform:translateY(12px);transition:opacity .6s var(--sd,0s),transform .6s var(--ease) var(--sd,0s)}
.chain li:nth-child(1){--sd:.3s}.chain li:nth-child(2){--sd:1s}.chain li:nth-child(3){--sd:1.7s}.chain li:nth-child(4){--sd:2.4s}
.chain.in li{opacity:1;transform:none}
.chain .nd-c{display:grid;place-items:center;width:56px;height:56px;margin-bottom:12px;border-radius:50%;background:var(--c-dark-2);border:2px solid #4A5660;font-family:var(--font-num);font-size:var(--fs-lg);font-weight:700;color:#fff}
.chain li b{font-size:var(--fs-lg);color:#fff}
.chain li>span:last-child{font-size:var(--fs-sm);color:var(--c-dark-ink-2)}
.chain li.me .nd-c{position:relative;width:72px;height:72px;margin-top:-8px;margin-bottom:4px;background:var(--c-accent);border-color:var(--c-accent-hi)}
.chain li.me .nd-c::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--c-accent-hi);opacity:0}
.chain.in li.me .nd-c::after{animation:ring 2.4s ease-out 1.6s infinite}
.chain li.me b{color:var(--c-accent-hi)}

/* ---------- 區塊 9：照片擦入 ---------- */
.gal-wipe .wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1) var(--d,0s)}
.gal-wipe.in .wipe{clip-path:inset(0 0 0 0)}
.gal-wipe .wipe:hover{transform:scale(1.02)}

/* ---------- 區塊 10：逐項打勾 ---------- */
.qc{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:0;background:var(--c-surface);border:1px solid var(--c-line)}
.qc li{position:relative;padding:32px 22px;border-right:1px solid var(--c-line)}
.qc li:last-child{border-right:0}
.qc li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c-accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease) var(--sd,0s)}
.qc svg{width:48px;height:48px;margin-bottom:14px}
.qc circle{fill:none;stroke:var(--c-line);stroke-width:3}
.qc path{fill:none;stroke:var(--c-accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s var(--ease) calc(var(--sd,0s) + .25s)}
.qc circle{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--ease) var(--sd,0s),stroke .3s var(--sd,0s)}
.qc li:nth-child(1){--sd:.2s}.qc li:nth-child(2){--sd:.7s}.qc li:nth-child(3){--sd:1.2s}.qc li:nth-child(4){--sd:1.7s}.qc li:nth-child(5){--sd:2.2s}
.qc.in circle{stroke-dashoffset:0;stroke:var(--c-accent)}
.qc.in path{stroke-dashoffset:0}
.qc.in li::after{transform:scaleX(1)}
.qc .en{display:block;font-family:var(--font-num);font-size:var(--fs-sm);font-weight:600;letter-spacing:.12em;color:var(--c-accent)}
.qc h3{font-size:var(--fs-lg);margin:4px 0}
.qc p{font-size:var(--fs-sm);color:var(--c-ink-2)}

/* ---------- 區塊 12：詢價 ---------- */
.hm-intake{position:relative;overflow:hidden}
.hm-intake::before{content:"";position:absolute;right:-200px;top:-200px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(224,122,38,.22),transparent 65%);animation:breathe 8s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.15) translate(-30px,20px)}}
.hm-intake .wrap{position:relative}
.hm-intake li{position:relative}
.hm-intake .ic{width:40px;height:40px;margin-bottom:10px}
.hm-intake .ic path,.hm-intake .ic rect,.hm-intake .ic circle{fill:none;stroke:var(--c-accent-hi);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hm-intake .ic .up{animation:upbob 1.8s ease-in-out infinite}
@keyframes upbob{0%,100%{transform:translateY(3px)}50%{transform:translateY(-3px)}}
.hm-intake .ic .pop{transform-box:fill-box;transform-origin:50% 100%;animation:pop 2.4s var(--ease-back) infinite}
.hm-intake .ic .pop.p2{animation-delay:.3s}
@keyframes pop{0%,15%{transform:scale(0)}35%,85%{transform:scale(1)}100%{transform:scale(0)}}
.hm-intake .ic .hand{transform-box:view-box;transform-origin:20px 21px;animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 動態區塊 RWD ---------- */
@media (max-width:1024px){
  .hx-in{grid-template-columns:1fr;padding-top:48px}
  .hx-case{position:absolute;right:-60px;top:24px;width:60%;max-width:420px;opacity:.28;animation:none}
  .hm-dna-grid{grid-template-columns:1fr;gap:32px}
  .cap-grid{grid-template-columns:repeat(2,1fr)}
  .pr-track,.pr-box{display:none}
  .pr{padding-top:8px}
  .pr-steps{grid-template-columns:1fr;text-align:left;gap:8px}
  .pr-steps li{display:grid;grid-template-columns:64px 1fr;column-gap:20px;align-items:center;padding:0}
  .pr-steps .dot{grid-row:span 2;margin:0}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .big-list{grid-template-columns:repeat(2,1fr)}
  /* 標題換行後尺規會掉到下一列，這時它就是整列寬，不再需要靠右 */
  .big-aside{width:100%;justify-items:start}
  .qc{grid-template-columns:1fr}
  .qc li{border-right:0;border-bottom:1px solid var(--c-line);display:grid;grid-template-columns:48px 1fr;column-gap:20px}
  .qc li svg{grid-row:span 3;margin:0}
}
@media (max-width:860px){
  .chain-line,.chain-dot{display:none}
  .chain ol{grid-template-columns:repeat(2,1fr);gap:32px 16px}
  .stk-cols{grid-template-columns:repeat(2,1fr);gap:32px 16px}
  .hm-range{grid-template-columns:1fr;text-align:center}
  .hm-range .end:last-child{text-align:center}
}
@media (max-width:680px){
  .hx h1{font-size:var(--fs-3xl)}
  .hx .sub{font-size:var(--fs-lg)}
  .hx .row .btn{flex:1 1 100%}
  .hx-case{width:90%;right:-30%}
  .hx-scroll{display:none}
  .cap-grid{grid-template-columns:1fr}
  .ind-grid{grid-template-columns:1fr}
  .big-list{grid-template-columns:1fr;gap:20px}
  .gallery{grid-template-columns:1fr;grid-auto-rows:200px;grid-template-rows:none}
  .xs{padding:12px}
}

/* ---------- 首頁章節導覽／回到頂端 ---------- */
.chap{position:fixed;right:20px;top:50%;z-index:45;display:flex;flex-direction:column;align-items:flex-end;gap:10px;transform:translateY(-50%)}
.chap ol{display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:10px 8px;border-radius:24px;background:rgba(255,255,255,.72);backdrop-filter:blur(8px);box-shadow:0 4px 18px rgba(20,26,31,.08);transition:background .3s}
.chap li a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:10px;height:26px;padding:0 4px}
.chap i{display:block;width:10px;height:10px;border-radius:50%;border:2px solid var(--c-ink-3);transition:transform .3s var(--ease-back),background .3s,border-color .3s,height .3s}
.chap .lb{position:absolute;right:30px;padding:2px 10px;border-radius:3px;background:var(--c-dark);color:#fff;font-size:var(--fs-xs);font-weight:500;white-space:nowrap;opacity:0;transform:translateX(8px);pointer-events:none;transition:opacity .2s,transform .25s var(--ease)}
.chap li a:hover .lb,.chap li a:focus-visible .lb{opacity:1;transform:none}
.chap li a:hover i{border-color:var(--c-accent);transform:scale(1.2)}
.chap li a.on i{height:22px;border-radius:6px;background:var(--c-accent);border-color:var(--c-accent)}
.chap.dark ol{background:rgba(27,34,40,.72)}
.chap.dark i{border-color:var(--c-dark-ink-2)}
.chap-top{display:grid;place-items:center;position:relative;width:42px;height:42px;border-radius:50%;background:var(--c-dark);color:#fff;box-shadow:0 4px 14px rgba(20,26,31,.2);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .3s,transform .3s var(--ease),background .2s}
.chap-top.show{opacity:1;transform:none;pointer-events:auto}
.chap-top:hover{background:var(--c-accent)}
.chap-top span{position:absolute;right:52px;padding:2px 10px;border-radius:3px;background:var(--c-dark);font-size:var(--fs-xs);white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}
.chap-top:hover span{opacity:1}
.chap svg,.to-top svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.to-top{position:fixed;right:24px;bottom:92px;z-index:40;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--c-dark);color:#fff;box-shadow:0 6px 20px rgba(20,26,31,.25);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s var(--ease),background .2s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--c-accent)}
[id^="chap-"],.sec[id]{scroll-margin-top:64px}
@media (max-width:1024px){.chap{display:none !important}}
@media (min-width:1025px){.to-top.on-home{display:none}}
@keyframes navin{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ============================================================
   持續動態：循環、輪流聚焦、滑鼠互動
   ============================================================ */
/* 區塊在畫面外時暫停所有無限動畫（效能） */
.offscreen,.offscreen *,.offscreen *::before,.offscreen *::after{animation-play-state:paused !important}

/* B. 輪流聚焦 */
.js .cap-c.rv,.js .ind-c.rv,.js .mats div.rv,.js .lift.rv{transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s),translate .4s var(--ease),scale .35s var(--ease),background .35s,border-color .3s,box-shadow .4s}
.cap-c{transition:transform .4s var(--ease),translate .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.cap-c.spot{translate:0 -6px;border-color:var(--c-accent);box-shadow:0 18px 40px rgba(184,90,18,.14)}
.cap-c.spot .ph-img{scale:1.04}
@keyframes redraw{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}

@keyframes ping{0%{box-shadow:0 0 0 4px var(--c-accent-bg)}60%{box-shadow:0 0 0 10px rgba(224,122,38,0)}100%{box-shadow:0 0 0 4px var(--c-accent-bg)}}

.mats div{transition:transform .9s var(--ease) var(--d,0s),opacity .9s var(--ease) var(--d,0s),background .35s,translate .35s var(--ease),box-shadow .35s}
.mats div.spot{background:var(--c-accent-bg);translate:6px 0;box-shadow:0 8px 20px rgba(184,90,18,.12)}
.xs .ly{transition:transform .8s var(--ease) var(--d,0s),opacity .6s var(--d,0s),fill .35s}
.xs.in .ly.spot{fill:var(--c-accent-hi)}

.chain .nd-c{transition:transform .35s var(--ease-back),box-shadow .35s,background .35s}
.chain.in li.spot .nd-c{transform:scale(1.14);box-shadow:0 0 0 8px rgba(224,122,38,.22);background:var(--c-accent)}
.chain.in li.spot b{color:var(--c-accent-hi)}

/* 主視覺掃描線 */
.hx-scan{fill:var(--c-accent-hi);opacity:0;filter:drop-shadow(0 0 6px var(--c-accent-hi))}
.hx.in .hx-scan{animation:hxscan 7s ease-in-out 5.5s infinite}
@keyframes hxscan{0%{opacity:0;transform:translateY(0)}8%{opacity:.8}45%{opacity:.8;transform:translateY(300px)}52%,100%{opacity:0;transform:translateY(300px)}}

/* 按鈕反光（前台主要按鈕） */
.btn-pri{background-image:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.32) 50%,transparent 58%);background-size:260% 100%;background-repeat:no-repeat;background-position:160% 0;animation:shine 6s ease-in-out 2s infinite}
@keyframes shine{0%,72%{background-position:160% 0}100%{background-position:-60% 0}}

/* C. 滑鼠互動（只在有滑鼠的裝置） */
@media (hover:hover) and (pointer:fine){
  .hx-case{translate:calc(var(--mx,0) * -16px) calc(var(--my,0) * -12px);transition:translate .6s var(--ease)}
  .hx-grid{translate:calc(var(--mx,0) * 10px) calc(var(--my,0) * 8px);transition:translate .8s var(--ease)}
  .js [data-tilt].tilting{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) !important;transition:transform .12s linear,translate .35s var(--ease),box-shadow .35s,border-color .3s !important}
  .sec-dark{position:relative}
  .sec-dark::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(520px circle at var(--sx,50%) var(--sy,50%),rgba(224,122,38,.10),transparent 60%)}
  .sec-dark.lit::after{opacity:1}
  .sec-dark>.wrap{position:relative;z-index:1}
}
/* ---------- 減少動態效果：直接顯示完成狀態 ---------- */
@media (prefers-reduced-motion:reduce){
  .big-fig .dim text,.big-fig .dim path,.big-fig .pocket{opacity:1 !important}
  .big-fig .wheels circle{scale:1 !important}
  .big-fig .fork{opacity:1 !important;transform:none !important}
  .js .rv,.js .ld,.hx-case .face,.hx-foam,.hx-foam .dev,.xs .ly,.xs .cavity,.xs .device,.stk-b i,.mpl-b i,.chain li{opacity:1 !important;transform:none !important;filter:none !important}
  .draw,.chain-line .fill,.qc circle,.qc path{stroke-dashoffset:0 !important}
  .hx-lid{transform:translate(18px,-78px) rotate(9deg) !important}
  .hx-ok{transform:scale(1) !important}
  .hx-dim circle{opacity:1 !important}
  .gal-wipe .wipe{clip-path:none !important}
  .pr-track>i,.hm-num .bar i,.hm-range .track i,.qc li::after{transform:scaleX(1) !important}
  .pr .dot{background:var(--c-accent) !important;color:#fff !important}
  .ticker-t{animation:none !important;flex-wrap:wrap;width:auto}
  .ticker span:nth-child(n+7){display:none}
  .ticker{position:relative}
  .hx-in{padding-bottom:64px}
  .hx-grid,.hx-photo .ph,.hx-photo .ph-img,.btn-glow::after,.hx-scroll,.hx-scan,.btn-pri{animation:none !important}
  .spot{translate:none !important}
}

html.lock{overflow:hidden}

/* Honeypot：不可用 display:none（部分機器人會略過隱藏欄位），改為移出視窗外 */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* 詢價表單狀態 */
.up.is-over{border-color:var(--c-accent);background:var(--c-surface-3,var(--c-surface-2))}
.up-list button{margin-left:auto;padding:2px 8px;border:1px solid var(--c-line);border-radius:var(--radius);background:#fff;color:var(--c-ink-3);font-size:var(--fs-sm);cursor:pointer}
.up-list button:hover{border-color:var(--c-accent);color:var(--c-accent)}
/* 欄位錯誤：邊框變紅之外再加一圈淡色光暈。只靠邊框，在一整頁同樣寬度的
   輸入框裡其實不容易一眼找到是哪一個 */
.fld.is-err .inp,.fld.is-err .sel,.fld.is-err .txa{border-color:var(--c-danger);box-shadow:0 0 0 3px rgba(178,58,48,.12)}
.fld.is-err>label,.fld.is-err>.lb{color:var(--c-danger)}
/* 同意條款的 checkbox 包在 label 裡、不在 .fld 中，單獨給一條 */
.recaptcha-note{margin-top:10px;color:var(--c-ink-3);font-size:var(--fs-xs);line-height:1.7}
.recaptcha-note a{text-decoration:underline}
label.agree.is-err{color:var(--c-danger)}
label.agree.is-err input{outline:2px solid var(--c-danger);outline-offset:2px}

/* 前台 Toast
   ------------------------------------------------------------
   原本的錯誤訊息印在表單最後面。表單很長，使用者按了送出、畫面捲在
   中間，訊息在視線外，看起來就是「按了沒反應」。改成固定在畫面上，
   再把焦點送到出錯的欄位。
   桌機靠右下、手機改成貼齊底部整列（右下角在手機上會壓到拇指區）。 */
.toast{position:fixed;right:24px;bottom:24px;z-index:120;display:flex;align-items:flex-start;gap:10px;
  max-width:min(420px,calc(100vw - 48px));padding:14px 18px;border-radius:var(--radius);
  background:var(--c-dark);color:#fff;font-size:var(--fs-sm);line-height:1.6;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  opacity:0;transform:translateY(10px);transition:opacity .22s var(--ease),transform .22s var(--ease)}
.toast.in{opacity:1;transform:none}
.toast::before{content:"";flex:none;width:4px;align-self:stretch;margin:-14px 2px -14px -18px;border-radius:var(--radius) 0 0 var(--radius);background:var(--c-accent-hi)}
.toast.is-err::before{background:var(--c-danger)}
@media (max-width:680px){.toast{right:16px;left:16px;bottom:16px;max-width:none}}
/* 詢價完成頁的單號：這一次是訪客唯一一次在畫面上看到它的機會（確認信可能被擋掉） */
.done-no{margin:20px 0 4px;font-size:var(--fs-lg)}
.done-no strong{display:inline-block;padding:6px 14px;border-radius:var(--radius);background:var(--c-surface-2);
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;letter-spacing:.04em}
.done-no-hint{margin:0 0 8px;font-size:var(--fs-sm);color:var(--c-ink-3)}
/* 區塊標題下的補充說明：比 .lead 再小一級。
   用來承接「需要把條件講清楚」的那種句子——那種句子放進 .lead 會把標題壓垮，
   但它又不能不講（產地與供應鏈的說明一旦含糊，就變成無法逐批證明的宣稱） */
.sec-head .sec-note{max-width:640px;margin-top:10px;font-size:var(--fs-sm);line-height:1.85;color:var(--c-ink-3)}
.sec-dark .sec-head .sec-note{color:var(--c-dark-ink-2)}

/* 動畫不用 fill-mode both：那會讓元素在動畫開始前套用 from{opacity:0}，
   萬一動畫沒跑（某些環境會停用），遮罩就等於看不見——而那正是最糟的失敗方式 */
/* ── 詢價送出中的遮罩 ──────────────────────────────────────
   詢價會夾帶設備照片，慢的時候要好幾秒。只 disable 送出鈕的話，
   那幾秒裡畫面完全沒有變化，看起來就像「按了沒反應」。 */
.form-block{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;
  background:rgba(27,34,40,.45);animation:form-block-in .12s ease;padding:16px}
.form-block[hidden]{display:none}
.form-block-box{display:flex;align-items:center;gap:14px;max-width:420px;
  padding:20px 26px;border-radius:var(--radius);background:var(--c-surface);
  box-shadow:0 10px 36px rgba(0,0,0,.22);color:var(--c-ink);font-size:var(--fs-base);font-weight:600}
.form-block-box small{display:block;margin-top:4px;color:var(--c-ink-3);font-size:var(--fs-sm);font-weight:400}
.form-block-spin{width:20px;height:20px;flex:none;border:2px solid var(--c-surface-2);
  border-top-color:var(--c-accent);border-radius:50%;animation:form-block-spin .7s linear infinite}
/* 背景不要還能捲動：遮罩蓋著卻能滑動，會讓人以為頁面還是可以操作的 */
body.is-blocked{overflow:hidden}
@keyframes form-block-in{from{opacity:0}to{opacity:1}}
@keyframes form-block-spin{to{transform:rotate(360deg)}}
/* 會動的東西要能關掉。關掉之後遮罩與文字仍在，只是不轉 */
@media (prefers-reduced-motion:reduce){
  .form-block{animation:none}
  .form-block-spin{animation:none;border-top-color:var(--c-surface-2)}
}
/* ── 編號條目（block-steps）─────────────────────────────────
   .flow 原本是單列並排，四五格剛好；客戶《內頁說明》的條目多到 16 格，
   擠在一行每格只剩七十幾 px。.flow-wrap 改成會換行的網格。 */
.flow-wrap{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px 24px}
.flow-wrap li{padding:24px 16px 0 0}
/* 只是分類、沒有先後順序的清單不顯示序號——標了 01 02 03 會讓人以為有順序 */
.flow-wrap li.no-num{counter-increment:none;padding-top:20px}
.flow-wrap li.no-num::before{content:none}
/* 英文小標：客戶文件每一條都附英文，是給海外採購看的，不是裝飾 */
.flow .step-en{margin:-2px 0 6px;font-family:var(--font-num);font-size:var(--fs-xs);
  letter-spacing:.06em;color:var(--c-ink-3)}
.sec-dark .flow .step-en{color:var(--c-dark-ink-2)}

/* ── 編號流程（block-flow）────────────────────────────────
   原本是單列並排，四五格好看，但《內頁說明》的流程動輒 12–14 步，
   擠成一行每格只剩八十幾 px，標題會斷成一行兩個字。
   改成兩欄清單：橫向空間留給文字，不留給格線。 */
.steps{list-style:none;counter-reset:st;display:grid;grid-template-columns:1fr 1fr;
  gap:0 48px;margin:0;padding:0}
.steps li{position:relative;counter-increment:st;display:grid;grid-template-columns:auto 1fr;gap:18px;
  align-items:start;padding:20px 0;border-top:1px solid var(--c-line)}
/* 上框線：灰底線永遠在（border-top），橘線是另一層，進畫面依序長出來。
   原本是 `nth-child(-n+2)` 只給第一列上色——兩欄網格換行之後，
   看起來只是前兩格莫名其妙有顏色 */
.steps .fl-bar{position:absolute;top:-1px;left:0;right:0;height:2px;
  background:var(--c-accent);transform-origin:0 50%}
.js .steps .fl-bar{transform:scaleX(0)}
.js .steps.in .fl-bar{transform:scaleX(1);transition:transform .7s var(--ease) var(--sd,0s)}
.sec-dark .steps .fl-bar{background:var(--c-accent-hi)}
@media (prefers-reduced-motion:reduce){.js .steps .fl-bar{transform:scaleX(1);transition:none}}
.steps li::before{content:counter(st,decimal-leading-zero);font-family:var(--font-num);
  font-size:var(--fs-2xl);font-weight:700;line-height:1;color:var(--c-accent);
  font-variant-numeric:tabular-nums;min-width:1.8em}
.steps h3{font-size:var(--fs-md);margin:0 0 2px}
.steps .st-en{margin:0 0 6px;font-family:var(--font-num);font-size:var(--fs-xs);
  letter-spacing:.06em;color:var(--c-ink-3)}
.steps p{font-size:var(--fs-sm);color:var(--c-ink-2);margin:0}
.sec-dark .steps li{border-top-color:var(--c-dark-line)}
.sec-dark .steps li::before{color:var(--c-accent-hi)}
.sec-dark .steps p{color:var(--c-dark-ink-2)}
.sec-dark .steps .st-en{color:var(--c-dark-ink-2)}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;gap:0}
  .steps li:nth-child(-n+2){border-top-color:var(--c-line)}
  .steps li:first-child{border-top-color:var(--c-accent)}
}

/* ── 金句（block-quote）──────────────────────────────────
   《內頁說明》每頁都有一句總結，那是整頁最值得被記住的一行。
   原本整句被丟掉，頁面就只剩規格敘述。 */
.pull{padding-block:72px}
.pull blockquote{margin:0 auto;max-width:900px;text-align:center}
.pull q{quotes:none;display:block;font-size:clamp(1.25rem,2.6vw,1.9rem);line-height:1.6;
  font-weight:700;letter-spacing:.01em}
.pull .mark{display:block;width:42px;height:3px;margin:0 auto 24px;background:var(--c-accent)}
.sec-dark .pull .mark{background:var(--c-accent-hi)}

/* ── 數字帶（block-stats）────────────────────────────────
   每個數字都要能指回客戶文件；看起來漂亮但來源不明的數字不要放。 */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  margin:0;background:var(--c-line);border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden}
.stats > div{background:var(--c-surface);padding:28px 24px}
.stats dt{display:flex;align-items:baseline;gap:6px}
.stats dt b{font-family:var(--font-num);font-size:clamp(2rem,4.4vw,2.9rem);font-weight:700;
  line-height:1;color:var(--c-accent);font-variant-numeric:tabular-nums}
.stats dt .u{font-size:var(--fs-md);color:var(--c-ink-2);font-weight:600}
.stats dd{margin:8px 0 0;font-size:var(--fs-sm);color:var(--c-ink-3);line-height:1.6}
.sec-dark .stats{background:var(--c-dark-line);border-color:var(--c-dark-line)}
.sec-dark .stats > div{background:var(--c-dark-2)}
.sec-dark .stats dt b{color:var(--c-accent-hi)}
.sec-dark .stats dt .u{color:var(--c-dark-ink)}
.sec-dark .stats dd{color:var(--c-dark-ink-2)}

/* ── 量產階段示意圖（block-scale）────────────────────────
   只表達「越來越多」，不標數量——文件沒說小批量是幾只，標了就是我們編的。 */
.scale svg{display:block;width:100%;height:auto;max-width:100%;overflow:visible}
.scale .base{stroke:var(--c-dark-line);stroke-width:2}
.sec-white .scale .base,.sec .scale .base{stroke:var(--c-line-2)}
.sec-dark .scale .base{stroke:var(--c-dark-line)}
.scale .bx{fill:var(--c-accent);opacity:.9}
.sec-dark .scale .bx{fill:var(--c-accent-hi)}
.scale .t-zh{font-size:15px;font-weight:700;fill:var(--c-ink)}
.scale .t-en{font-family:var(--font-num);font-size:12px;letter-spacing:.06em;fill:var(--c-ink-3)}
.sec-dark .scale .t-zh{fill:var(--c-dark-ink)}
.sec-dark .scale .t-en{fill:var(--c-dark-ink-2)}
/* 一階一階長出來；進畫面才播（.in 由 site.js 加上） */
.js .scale .stg{opacity:0;transform:translateY(10px)}
.js .scale.in .stg{opacity:1;transform:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:calc(var(--i) * .14s)}
@media (prefers-reduced-motion:reduce){
  .js .scale .stg{opacity:1;transform:none;transition:none}
}
/* 固定頁的敘述段落限寬：滿版一行會到六十幾個字，眼睛找不到下一行的開頭 */
.page-prose{max-width:68ch}
.page-prose .tks-view p+p{margin-top:1.1em}

/* 主視覺大字：文件指名要當「最大的主視覺文字」的句子。
   比 lead 大、比 H1 小一級——H1 是頁名，這句是立場，兩者不該互搶。 */
.page-hero .hero-line{margin:18px 0 0;max-width:34em;text-wrap:balance;
  font-size:clamp(1.35rem,2.6vw,2rem);font-weight:700;line-height:1.5;
  color:var(--c-accent-hi)}
.page-hero .hero-line + .lead{margin-top:14px}

/* ── 敘述段落（block-note）──────────────────────────────
   文件裡「小標＋兩三段文字」的小節。限寬是必要的：滿版一行六十幾個字，
   眼睛會找不到下一行的開頭。
   .note-em 是文件單獨列出來的那種式子（Airframe + Payload + …），
   它在文件裡自成一段、刻意不寫成句子，所以畫面上也讓它自己站一行。 */
.note{max-width:72ch}
.note p{margin:0 0 1.1em;font-size:var(--fs-md);line-height:2;color:var(--c-ink-2)}
.note p:last-child{margin-bottom:0}
.note-em{margin:28px 0 !important;padding:18px 24px;border-left:3px solid var(--c-accent);
  background:var(--c-surface);font-family:var(--font-num);font-weight:600;
  font-size:var(--fs-lg) !important;line-height:1.7 !important;color:var(--c-ink) !important}
.sec-dark .note p{color:var(--c-dark-ink-2)}
.sec-dark .note-em{background:var(--c-dark-2);border-left-color:var(--c-accent-hi);
  color:var(--c-dark-ink) !important}
.note-q{margin:0 0 1.1em;padding-left:18px;border-left:2px solid var(--c-accent);
  font-size:var(--fs-lg) !important;font-weight:600;color:var(--c-ink) !important}
.sec-dark .note-q{border-left-color:var(--c-accent-hi);color:var(--c-dark-ink) !important}

.note-tags{margin:0 0 1.1em}

/* ── 照片配一句話（block-photo-note）─────────────────────
   文件〈量產能力〉寫「第二句可以放在量產照片旁」，這一組就是那個指示。
   句子要夠大才撐得住旁邊那張照片，但不到金句那麼大——金句自己獨佔一整區。 */
.pn{align-items:center}
.pn-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius)}
.pn .ph{aspect-ratio:4/3;border-radius:var(--radius)}
.pn-t{margin:0;font-size:clamp(1.1rem,1.9vw,1.5rem);font-weight:700;line-height:1.8;
  color:var(--c-ink)}
.sec-dark .pn-t{color:var(--c-dark-ink)}
@media (max-width:860px){
  .pn-flip .pn-ph{order:-1}
}
/* ── 平行詞組（block-tags）──────────────────────────────
   文件用「｜」串起來的清單：彼此平行、沒有先後、也沒有說明文字。
   編號會憑空生出順序，卡片則是每張只有三五個字配一片空白，所以兩者都不用。 */
.tagset + .tagset{margin-top:36px}
.tagset-t{margin:0 0 16px;font-size:var(--fs-lg);font-weight:700;color:var(--c-ink)}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.tags li{padding:9px 18px;border:1px solid var(--c-line);border-radius:999px;
  background:var(--c-surface);font-size:var(--fs-sm);color:var(--c-ink-2);line-height:1.5}
.sec-dark .tagset-t{color:var(--c-dark-ink)}
.sec-dark .tags li{background:var(--c-dark-2);border-color:var(--c-dark-line);color:var(--c-dark-ink-2)}
/* ── 品牌識別（關於頁）──────────────────────────────────
   客戶的 logo 是直式堆疊、深藍、白底的完整 lockup，所以只在關於頁以原樣
   完整露出一次（決策見 docs/project-rules.md §12）。
   **底一定要淺**：中文字是深藍，壓在深色區塊上會糊掉。 */
.brand-box{display:grid;grid-template-columns:minmax(200px,280px) 1fr;gap:48px;align-items:center}
.brand-logo{width:100%;height:auto;border-radius:var(--radius);background:#fff;
  padding:20px;border:1px solid var(--c-line)}
.brand-tx .lead{max-width:56ch}
@media (max-width:760px){
  .brand-box{grid-template-columns:1fr;gap:28px;justify-items:start}
  .brand-logo{max-width:220px}
}

/* ── 相關服務（block-links）──────────────────────────────
   連結文字本來就是其他頁的名稱，關鍵字是順便帶到的，不是為了塞字而寫的句子。 */
.links{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.lk{display:grid;gap:4px;padding:18px 20px;border:1px solid var(--c-line);border-radius:var(--radius);
  background:var(--c-surface);transition:border-color .25s var(--ease),transform .25s var(--ease)}
.lk:hover{border-color:var(--c-accent);transform:translateY(-2px)}
.lk-t{font-weight:700;color:var(--c-ink)}
.lk-t::after{content:" →";color:var(--c-accent);font-family:var(--font-num)}
.lk-d{font-size:var(--fs-sm);color:var(--c-ink-3);line-height:1.6}
.sec-dark .lk{background:var(--c-dark-2);border-color:var(--c-dark-line)}
.sec-dark .lk-t{color:var(--c-dark-ink)}
.sec-dark .lk-d{color:var(--c-dark-ink-2)}
.sec-dark .lk:hover{border-color:var(--c-accent-hi)}


/* ── 固定頁的留白節奏 ────────────────────────────────────
   每個區塊各自是一個 .sec，各帶 72–96px 上下留白。區塊一短，
   兩段之間就空一大片；而內文限寬之後右半邊又整片空著。
   這兩件事合起來就是「看起來沒排完」。
   做法：連續同底色的區塊共用一份留白，內文與品牌區塊併排。 */
.sec-white + .sec-white,
.sec:not([class*="sec-"]) + .sec:not([class*="sec-"]){padding-top:0}
/* 內文限寬：一行超過六十幾個字會找不到下一行的開頭。
   有文繞圖時可以寬一點——圖佔掉左側，實際的文字行長反而變短。 */
.page-prose{max-width:80ch;margin-inline:auto}
/* 品牌識別文繞圖：單獨成一區時是一張圖配一片空白，而文件沒有可以放在
   它旁邊的文字。擺進內文左上角讓段落繞著走，圖有去處、空白也被填掉。 */
.prose-logo{float:left;width:min(42%,230px);margin:4px 32px 16px 0;padding:16px;
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);shape-margin:16px}
.prose-logo img{display:block;width:100%;height:auto}
/* 窄螢幕不繞圖：欄寬只剩三百多 px 時，繞出來的文字一行塞不到十個字 */
@media (max-width:700px){
  .prose-logo{float:none;width:200px;margin:0 0 20px}
}

/* ── 對照表（block-table）──────────────────────────────────
   三欄的規格／流程對照。手機上表格一定比螢幕窄不下來，所以讓表格自己
   橫向捲，而不是把整個頁面撐出橫向捲軸（版面規範：只有表格、程式碼與
   圖表可以超出，而且各自包在自己的捲動容器裡）。
   第一欄黏在左邊，橫捲時還看得到自己在哪一列。 */
.btbl-wrap{margin-top:28px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.btbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:640px}
.btbl th,.btbl td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--c-line)}
.btbl thead th{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-3);
  border-bottom:2px solid var(--c-line-2);white-space:nowrap}
.btbl tbody th{font-weight:700;color:var(--c-ink);position:sticky;left:0;background:var(--c-bg);min-width:9em}
.btbl tbody td{color:var(--c-ink-2)}
.sec-white .btbl tbody th{background:#fff}
.btbl-foot{margin-top:16px;font-size:var(--fs-sm);color:var(--c-ink-2)}
.sec-dark .btbl th,.sec-dark .btbl td{border-color:#2B343B}
.sec-dark .btbl thead th{color:var(--c-dark-ink-2);border-bottom-color:#3A454D}
.sec-dark .btbl tbody th{color:var(--c-dark-ink);background:var(--c-dark)}
.sec-dark .btbl tbody td,.sec-dark .btbl-foot{color:var(--c-dark-ink-2)}
/* ---------- 流程圖（流程區的前導圖，第四篇〈圖片與版型配置〉）----------
   文字是 HTML、SVG 只畫會動的那只箱子：六到八階段的整張 SVG 一縮到手機字就沒了。
   軌道是兩層 div——底線永遠在，橘色那層 scaleX 從左長到右。第一版軌道用
   SVG stroke-dashoffset，在非等比縮放下 dash 算不準，畫出來是一段橘一段灰。
   只動 transform／opacity。 */
.fch{position:relative;margin-top:36px;padding-top:52px}
/* 軌道只連第一點與最後一點的圓心，所以左右各讓出半格：100% / (n * 2) */
.fch-rail{position:absolute;top:73px;height:4px;border-radius:2px;background:var(--c-line);--w:0px;
  left:calc(100% / (var(--n) * 2));right:calc(100% / (var(--n) * 2))}
.fch-fill{position:absolute;inset:0;border-radius:2px;
  background:linear-gradient(90deg,var(--c-accent),var(--c-accent-hi));
  transform-origin:0 50%;transform:scaleX(0);
  transition:transform 2.6s cubic-bezier(.45,0,.25,1) .25s}
.fch.in .fch-fill{transform:scaleX(1)}
/* 沿軌道走的設備箱：--w（軌道寬度）由 site.js 量出來 */
.fch-box{position:absolute;left:-20px;top:-58px;width:40px;height:32px;opacity:0;
  transition:transform 2.6s cubic-bezier(.45,0,.25,1) .25s,opacity .4s .25s}
.fch-box rect,.fch-box path{fill:none;stroke:var(--c-accent);stroke-width:2.5;stroke-linejoin:round}
.fch-box rect{fill:var(--c-bg)}
.fch.in .fch-box{opacity:1;transform:translateX(var(--w))}
.fch-steps{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);
  column-gap:12px;text-align:center}
.fch-steps li{min-width:0}
.fch-d{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 14px;
  border-radius:50%;background:var(--c-bg);border:2px solid var(--c-line-2);
  font-family:var(--font-num);font-size:var(--fs-md);font-weight:700;color:var(--c-ink-3)}
/* 最後一站是交付，填實色當終點 */
.fch-steps li:last-child .fch-d{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
/* 限寬：八階段時欄寬只剩 140px 上下，長標題不折行就會跟鄰居貼在一起 */
.fch-t{display:block;max-width:7em;margin-inline:auto;font-size:var(--fs-xs);
  font-weight:700;color:var(--c-ink);line-height:1.45}
.sec-white .fch-d{background:var(--c-surface)}
.sec-white .fch-box rect{fill:var(--c-surface)}
.sec-white .fch-steps li:last-child .fch-d{background:var(--c-accent)}
.sec-dark .fch-rail{background:var(--c-dark-line)}
.sec-dark .fch-fill{background:linear-gradient(90deg,var(--c-accent),var(--c-accent-hi))}
.sec-dark .fch-box rect,.sec-dark .fch-box path{stroke:var(--c-accent-hi)}
.sec-dark .fch-box rect{fill:var(--c-dark)}
.sec-dark .fch-d{background:var(--c-dark-2);border-color:var(--c-dark-line);color:var(--c-dark-ink-2)}
.sec-dark .fch-steps li:last-child .fch-d{background:var(--c-accent-hi);border-color:var(--c-accent-hi);color:#fff}
.sec-dark .fch-t{color:var(--c-dark-ink)}
/* 一站一站亮起來，節奏跟著橘色軌道走（--sd 由樣板依階段數算好） */
.js .fch-steps li{opacity:0;transform:translateY(10px)}
.js .fch.in .fch-steps li{opacity:1;transform:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:var(--sd,0s)}
@media (max-width:860px){
  .fch{padding-top:44px}
  .fch-rail{top:61px}
  .fch-box{top:-52px}
  .fch-d{width:38px;height:38px;margin-bottom:10px;font-size:var(--fs-base)}
}
@media (prefers-reduced-motion:reduce){
  .js .fch-steps li{opacity:1;transform:none;transition:none}
  .fch-fill{transform:scaleX(1) !important;transition:none}
  .fch-box{display:none}
}
@media (max-width:680px){
  /* 單欄寬度排不下六到八站，而圖上的每個字下面的清單／表格都會再出現一次，
     所以這裡直接不顯示——沒有任何資訊只存在這張圖裡 */
  .fch{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js .fch-steps li{opacity:1;transform:none;transition:none}
  .fch-rail .draw{stroke-dashoffset:0 !important;transition:none}
}
@media (max-width:680px){
  /* 手機不橫捲（捲軸不出現，使用者不會知道可以滑），改成一列一張卡 */
  .btbl-wrap{overflow:visible;margin-top:20px}
  .btbl{display:block;min-width:0;font-size:var(--fs-base)}
  .btbl thead{display:none}
  .btbl tbody,.btbl tr,.btbl tbody th,.btbl td{display:block}
  .btbl tr{border:1px solid var(--c-line);border-radius:var(--radius);
    padding:16px 16px 18px;background:var(--c-surface)}
  .btbl tr+tr{margin-top:12px}
  .btbl tbody th{position:static;min-width:0;padding:0 0 12px;text-align:left;background:transparent;
    font-size:var(--fs-md);border-bottom:2px solid var(--c-accent)}
  .btbl td{padding:12px 0 0;border:0}
  .btbl td::before{content:attr(data-label);display:block;margin-bottom:2px;
    font-size:var(--fs-xs);font-weight:700;color:var(--c-ink-3)}
  .btbl-foot{margin-top:16px}
  .sec-white .btbl tbody th{background:transparent}
  .sec-dark .btbl tr{background:var(--c-dark-2);border-color:var(--c-dark-line)}
  .sec-dark .btbl tbody th{background:transparent;border-bottom-color:var(--c-accent-hi)}
  .sec-dark .btbl td::before{color:var(--c-dark-ink-2)}
}