/* 時唯科技官網共用樣式
   「熔岩橘」深色配色：近黑暖底分四層堆疊，重點色沿用品牌橘但提亮，
   產品照仍放在淺色板（--plate）上，因為原廠圖多半是白底去背。 */
:root{
  color-scheme:dark;
  /* 底色四層：頁面 → 區塊 → hover → 浮起元件 */
  --bg:#0B0B0C;
  --panel:#131316;
  --panel2:#191A1D;
  --card:#141417;
  --elev:#1B1C1F;
  /* 產品／新聞圖片的淺色底板，維持原廠白底圖的可讀性 */
  --plate:#EDEBE6;
  --line:#2A2B30;
  --line-soft:#1F2024;
  --text:#EDEBE7;
  --dim:#A9A7A1;
  --dim2:#7E7C76;
  --faint:#55534E;
  --accent:#FF6A2B;
  --accent-2:#FFB86B;
  --accent-soft:#2A150C;
  --accent-glow:rgba(255,106,43,.30);
  --on-accent:#14100A;
  --sans:"Inter","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  /* 等寬字沒有中文字符，末端補上中文字體，混排的標籤（地址／電話）才不會掉成細明體 */
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Consolas,"Roboto Mono",
    "Noto Sans TC","PingFang TC","Microsoft JhengHei",monospace;
  --radius:2px;
  --wrap:1400px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  background:var(--bg);color:var(--text);position:relative;overflow-x:hidden;
  font-family:var(--sans);
  font-size:15px;line-height:1.75;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;font-optical-sizing:auto;
  font-variant-numeric:tabular-nums;
}
/* 頁面最上方的一圈暖光，讓純黑底有深度、不會像一塊平板 */
body::before{
  content:"";position:absolute;inset:0 0 auto 0;height:720px;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 380px at 18% -8%,rgba(255,106,43,.10),transparent 70%),
    radial-gradient(700px 320px at 88% -12%,rgba(255,184,107,.06),transparent 70%);
}
body>*{position:relative;z-index:1}
::selection{background:var(--accent);color:var(--on-accent)}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
.mono{font-family:var(--mono)}
/* 捲軸配合深色，避免右側出現一條亮白 */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--bg)}
*::-webkit-scrollbar-thumb{background:#2E2F34;border:2px solid var(--bg);border-radius:6px}
*::-webkit-scrollbar-thumb:hover{background:#3C3D43}

/* ---------------- 導覽列 ---------------- */
header.site{border-bottom:1px solid var(--line);background:rgba(11,11,12,.78);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  position:sticky;top:0;z-index:50}
@supports not (backdrop-filter:blur(2px)){header.site{background:var(--bg)}}
.nav{display:flex;align-items:center;justify-content:space-between;height:60px;gap:20px}
/* 導覽列標誌：圖標、SWIT、中文名各自是一個 flex 項目。
   SWIT 一定要包在 .bt 裡，否則裸文字會被拆成好幾個匿名項目，字距被 gap 撐開 */
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);white-space:nowrap}
/* 官方 LOGO 是黑色去背檔，深色底看不見，就地翻成亮色 */
.brand img{height:24px;width:auto;display:block;flex:none;filter:invert(1) brightness(1.25)}
.brand .bt{font-family:var(--mono);font-weight:700;font-size:19px;letter-spacing:.06em;line-height:1}
.brand b{color:var(--accent);font-weight:700}
.brand small{font-family:var(--sans);
  font-size:12px;color:var(--dim2);letter-spacing:.02em;font-weight:400;line-height:1;
  padding-left:10px;border-left:1px solid var(--line)}
.menu{display:flex;gap:28px;font-size:14px;color:var(--dim)}
.menu a:hover{color:var(--text)}
.menu a.on{color:var(--text)}
.navr{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--dim)}
.navr a:hover{color:var(--text)}
.lang{display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.lang button{
  background:none;border:none;cursor:pointer;font:inherit;font-size:12px;
  font-family:var(--mono);padding:3px 8px;color:var(--dim2);
}
.lang button.on{background:var(--accent);color:var(--on-accent);font-weight:600}
.menubtn{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius);
  font:inherit;font-size:13px;padding:4px 10px;cursor:pointer;color:var(--dim)}

/* ---------------- 頁首區塊 ---------------- */
.intro{border-bottom:1px solid var(--line);padding:52px 0 44px}
.intro-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:72px;align-items:end}
/* 中文字身寬、負字距會擠在一起，所以標題的收緊只做一點點；text-wrap:balance 讓折行更平均 */
h1,h2,h3{text-wrap:balance}
h1{font-size:clamp(26px,3vw,40px);line-height:1.3;font-weight:700;letter-spacing:-.008em;max-width:20em}
h1 em{font-style:normal;font-family:var(--mono);color:var(--accent);font-size:.92em}
.intro p{margin-top:16px;color:var(--dim);max-width:52em;font-size:14.5px;line-height:1.8}
.meta{font-family:var(--mono);font-size:12.5px;color:var(--dim2);line-height:2.1;
  border-left:1px solid var(--line);padding-left:22px}
.meta b{color:var(--text);font-weight:500}

/* ---------------- 首頁主視覺 ---------------- */
.hero-wrap{padding:0 0 0}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:56px;
  align-items:center;padding:58px 0 46px}
.hero-txt .eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  color:var(--accent);margin-bottom:18px}
/* 首頁大標：字級隨螢幕寬度平滑縮放，小螢幕 28px、大螢幕最大 46px */
.hero-txt h1{font-size:clamp(28px,3.6vw,46px);line-height:1.26;letter-spacing:-.012em;max-width:15em}
.hero-txt p{margin-top:20px;color:var(--dim);max-width:36em;font-size:15px;line-height:1.85}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-block;font-size:13.5px;font-weight:500;padding:10px 20px;
  border:1px solid var(--line);border-radius:var(--radius);color:var(--text);background:var(--elev);
  transition:border-color .2s,background .2s,filter .2s,transform .2s,box-shadow .25s}
.btn:hover{border-color:#43444B;background:var(--panel2);transform:translateY(-1px);
  box-shadow:0 14px 30px -22px #000}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600;
  box-shadow:0 10px 30px -16px var(--accent-glow)}
.btn.primary:hover{filter:brightness(1.1);box-shadow:0 16px 40px -16px var(--accent-glow)}
.hero-pic{margin:0;opacity:0;transition:opacity .35s}
.hero-pic.on{opacity:1}
/* 產品照多為白底，這裡維持淺色板，圖才不會糊成一片；外圈用暖光把它接回深色頁面 */
.hero-pic .slides{position:relative;aspect-ratio:4/3;background:var(--plate);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.04)}
.hero-pic .slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:22px;opacity:0;transition:opacity .6s;pointer-events:none}
.hero-pic .slide.on{opacity:1;pointer-events:auto}
.hero-pic img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.hero-pic figcaption{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;
  margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--dim2);min-height:18px}
.hero-pic figcaption b{color:var(--text);font-size:13px;font-weight:700}
.hero-pic .dots{display:flex;gap:7px;margin-top:12px}
.hero-pic .dots button{width:22px;height:3px;padding:0;border:none;cursor:pointer;
  background:var(--line);transition:.2s}
.hero-pic .dots button.on{background:var(--accent)}
.hero-pic .dots button:hover{background:var(--dim2)}

/* ---------------- 首頁精選機種 ---------------- */
.picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.pick{display:block;padding:20px 22px 22px;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);position:relative;
  background:linear-gradient(180deg,#17171B 0%,var(--card) 62%);
  transition:background .25s,box-shadow .3s,transform .3s,border-color .25s}
/* 滑過時卡片上緣點一道橘色細光，外圈打一圈暖色暈開，深色底才看得出「浮起來」 */
.pick::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);transition:opacity .3s}
.pick:hover{background:linear-gradient(180deg,#1D1E22 0%,#151518 70%);z-index:1;transform:translateY(-2px);
  box-shadow:0 26px 60px -34px #000,0 0 34px -16px var(--accent-glow),inset 0 0 0 1px rgba(255,255,255,.05)}
.pick:hover::after{opacity:1}
.pick .pk-t{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--text)}
.pick:hover .pk-t{color:var(--accent)}
.pick .pk-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.pick .pk-tags span{font-size:11.5px;color:var(--dim2);border:1px solid var(--line);
  border-radius:var(--radius);padding:2px 7px}
.pick .pk-tags span.dlc{color:var(--accent);border-color:var(--accent)}
.pick .pk-gpu{margin-top:12px;font-family:var(--mono);font-size:13px;color:var(--text)}
.pick .pk-gpu b{color:var(--accent)}
.pick .pk-spec{margin:12px 0 0;border-top:1px solid var(--line-soft);padding-top:10px}
.pick .pk-spec div{display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px;padding:3px 0}
.pick .pk-spec dt{font-family:var(--mono);font-size:11px;color:var(--dim2)}
.pick .pk-spec dd{margin:0;font-size:12.5px;color:var(--dim);line-height:1.5}
.pickmore{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:16px;padding:14px 20px;border:1px solid var(--line);border-radius:var(--radius);
  font-size:13.5px;color:var(--dim);background:var(--panel);transition:.2s}
.pickmore:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.pickmore b{font-family:var(--mono);font-size:13px;color:var(--accent);white-space:nowrap}
.hero-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:1px solid var(--line)}
.hero-meta div{padding:16px 22px 18px;border-right:1px solid var(--line-soft)}
.hero-meta div:first-child{padding-left:0}
.hero-meta div:last-child{border-right:none}
.hero-meta span{display:block;font-family:var(--mono);font-size:11.5px;color:var(--dim2);
  letter-spacing:.08em;margin-bottom:5px}
.hero-meta b{font-size:14px;font-weight:500}

/* ---------------- 區段標題 ----------------
   <small> 用 order 排到大標上面當引導字，大標用 clamp 隨螢幕寬度平滑縮放，
   「更多」連結靠右、與大標同一行對齊基線。 */
.sec{padding:64px 0 0}
.sec-t{display:flex;align-items:baseline;gap:6px 16px;margin-bottom:26px;flex-wrap:wrap}
.sec-t small{order:1;flex:0 0 100%;font-family:var(--mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.sec-t h2{order:2;font-size:clamp(23px,2.9vw,36px);font-weight:700;
  letter-spacing:-.008em;line-height:1.25}
.sec-t .more{order:3;margin-left:auto;font-size:13px;color:var(--dim);
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.sec-t .more:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------------- 產品選型表 ---------------- */
.tools{display:flex;align-items:baseline;justify-content:space-between;padding:34px 0 18px;gap:20px;flex-wrap:wrap}
.tools h2{font-size:clamp(23px,2.9vw,34px);font-weight:700;letter-spacing:-.008em;line-height:1.25}
.tools h2 small{font-family:var(--mono);color:var(--accent);font-weight:400;font-size:11.5px;
  letter-spacing:.14em;margin-left:12px;vertical-align:middle}
.note{font-size:12.5px;color:var(--dim2)}

.board{display:grid;grid-template-columns:200px minmax(0,1fr);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);
  box-shadow:0 30px 70px -50px #000}
.side{border-right:1px solid var(--line);background:var(--panel);padding:20px 0}
.fgroup{padding:0 18px 20px}
.fgroup h3{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim2);margin-bottom:9px}
.fgroup button{
  display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  color:var(--dim);font:inherit;font-size:13.5px;padding:4px 0 4px 12px;position:relative;
}
.fgroup button:hover{color:var(--text)}
.fgroup button.on{color:var(--accent)}
.fgroup button.on::before{content:"";position:absolute;left:0;top:12px;width:5px;height:1px;background:var(--accent)}
.fgroup button i{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--dim2);float:right}

.tblwrap{overflow-x:auto}
table.sel{width:100%;border-collapse:collapse;font-size:13.5px;min-width:980px}
table.sel thead th{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim2);font-weight:400;
  text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--panel);
}
table.sel tbody td{padding:13px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--dim)}
table.sel tbody tr:hover td{background:var(--panel2)}
table.sel tbody tr:last-child td{border-bottom:none}
table.sel tbody td.note{color:var(--dim2);font-size:12.5px;min-width:22em}
td.model{font-family:var(--mono);font-size:13px;color:var(--text);white-space:nowrap;letter-spacing:-.01em}
td.model a:hover{color:var(--accent)}
td.key{color:var(--text)}
td.key b{color:var(--accent);font-family:var(--mono);font-weight:600}
.u{font-family:var(--mono);color:var(--text)}
.cool{font-size:12.5px}
.cool.dlc{color:var(--accent)}
.empty{color:var(--faint)}
.count{padding:14px 16px;font-family:var(--mono);font-size:12px;color:var(--dim2);
  border-top:1px solid var(--line);background:var(--panel)}

/* 規格表與卡片之間的分隔標題，免得顯示卡看起來像是接在伺服器表格後面的亂入區 */
.subsec{display:flex;align-items:baseline;gap:12px;margin:38px 0 16px;
  padding-top:22px;border-top:1px solid var(--line)}
.subsec h3{font-size:15px;font-weight:700}
.subsec small{font-family:var(--mono);font-size:11px;color:var(--dim2);letter-spacing:.08em}

/* ---------------- 產品卡片（顯示卡等以圖為主的品項） ---------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius)}
.card{background:linear-gradient(180deg,#17171B,var(--card));padding:18px;
  display:flex;flex-direction:column;gap:10px;transition:background .25s,box-shadow .3s}
.card:hover{background:linear-gradient(180deg,#1D1E22,#151518);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 0 30px -16px var(--accent-glow)}
.card .ph{background:var(--plate);border:1px solid var(--line-soft);aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:contain;padding:8px}
.card .nm{font-family:var(--mono);font-size:13px;color:var(--text);line-height:1.4}
.card .sub{font-size:12px;color:var(--dim2)}
.card:hover .nm{color:var(--accent)}

/* ---------------- 產品內頁 ---------------- */
.pd{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:48px;padding-top:36px}
/* 產品內頁的圖庫跟關於頁的相簿共用 .gal，這裡把相簿那組格線底色關掉，
   深色底下 --line 是看得見的灰，不關的話產品圖下方會多一塊灰板 */
.pd .gal{display:block;background:none;border:none;border-radius:0;overflow:visible}
.gal .main{background:var(--plate);border:1px solid var(--line);border-radius:var(--radius);
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 40px 90px -55px #000}
.gal .main img{width:100%;height:100%;object-fit:contain;padding:14px}
.thumbs{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.thumbs button{width:64px;height:52px;background:var(--plate);border:1px solid var(--line);
  border-radius:var(--radius);cursor:pointer;padding:3px;overflow:hidden;
  transition:border-color .2s,box-shadow .2s}
.thumbs button:hover{border-color:#4A4B52}
.thumbs button.on{border-color:var(--accent);box-shadow:0 0 14px -4px var(--accent-glow)}
.thumbs img{width:100%;height:100%;object-fit:contain}
.pd h1{font-family:var(--mono);font-size:clamp(22px,2.4vw,30px);font-weight:700;
  letter-spacing:-.01em;max-width:none;line-height:1.25}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 22px}
.badge{font-family:var(--mono);font-size:11.5px;color:var(--dim);border:1px solid var(--line);
  border-radius:var(--radius);padding:3px 9px;background:var(--panel)}
.badge.hl{color:var(--accent);border-color:var(--accent)}
table.spec{width:100%;border-collapse:collapse;font-size:13.5px;
  border:1px solid var(--line);border-radius:var(--radius)}
table.spec th{width:104px;text-align:left;vertical-align:top;font-weight:500;color:var(--dim2);
  font-size:12.5px;padding:11px 14px;background:var(--panel);border-bottom:1px solid var(--line-soft);
  border-right:1px solid var(--line-soft);white-space:nowrap}
table.spec td{padding:11px 14px;border-bottom:1px solid var(--line-soft);color:var(--dim);white-space:pre-line}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:none}
p.pd-desc{font-size:14.5px;line-height:1.9;color:var(--dim);margin:0 0 26px;max-width:64ch}
.cta{display:inline-block;margin-top:22px;font-size:14px;font-weight:600;
  color:var(--on-accent);background:var(--accent);border:1px solid var(--accent);
  border-radius:var(--radius);padding:9px 20px;
  box-shadow:0 10px 30px -16px var(--accent-glow);transition:.2s}
.cta:hover{filter:brightness(1.1);box-shadow:0 16px 40px -16px var(--accent-glow);transform:translateY(-1px)}
.cta.ghost{background:none;color:var(--accent);border:1px solid var(--accent);
  box-shadow:none;font-weight:500}
.cta.ghost:hover{background:var(--accent-soft);filter:none;box-shadow:0 0 24px -12px var(--accent-glow)}

/* ---------------- 新聞 ---------------- */
.posts{border-top:1px solid var(--line)}
.post{display:grid;grid-template-columns:104px 104px minmax(0,1fr) 96px;gap:22px;padding:16px 0;
  border-bottom:1px solid var(--line-soft);align-items:center}
.post .pt,.post .pimg img{transition:color .2s,transform .4s cubic-bezier(.2,.7,.2,1)}
.post:hover .pt{color:var(--accent)}
.post:hover .pimg img{transform:scale(1.05)}
.post .pdate{font-family:var(--mono);font-size:12.5px;color:var(--dim2)}
/* 新聞縮圖：固定 4:3 小框，圖片整張縮進去（contain），不裁切也不變形 */
.post .pimg{width:104px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  background:var(--plate);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.post:hover .pimg{border-color:#4A4B52}
.post .pimg img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.post .pimg .ph{font-family:var(--mono);font-size:10.5px;color:var(--dim2);letter-spacing:.1em}
.post .pt{font-size:14.5px;color:var(--text);line-height:1.55}
.post .pc{font-family:var(--mono);font-size:11.5px;color:var(--dim2);text-align:right}

.article{max-width:760px;padding-top:34px}
.article h1{font-size:clamp(24px,2.6vw,34px);line-height:1.32;letter-spacing:-.008em;max-width:none}
.article .amet{font-family:var(--mono);font-size:12.5px;color:var(--dim2);margin:10px 0 26px}
/* 內文是長篇中文，行高與段距放寬一點才讀得下去 */
.article .body{color:var(--dim);font-size:15.5px;line-height:1.95}
.article .body h3{color:var(--text);font-size:19px;font-weight:700;margin:38px 0 12px;line-height:1.5;
  letter-spacing:-.005em}
.article .body p{margin:16px 0}
.article .body a{color:var(--accent);border-bottom:1px solid rgba(255,106,43,.35)}
.article .body strong,.article .body b{color:var(--text);font-weight:600}
/* 新聞內文的圖多半是白底原廠圖，放在淺色板上才不會邊緣糊掉 */
.article .body img{display:block;margin:22px 0;background:var(--plate);
  border:1px solid var(--line);border-radius:var(--radius)}

/* ---------------- 內容區塊（關於） ---------------- */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius)}
.gitem{background:linear-gradient(180deg,#17171B,var(--card));padding:24px 26px;
  transition:background .25s,box-shadow .3s}
.gitem:hover{background:linear-gradient(180deg,#1C1D21,#151518);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.gitem h3{font-size:16px;font-weight:700;margin-bottom:8px;letter-spacing:-.005em}
.gitem .en{font-family:var(--mono);font-size:11px;color:var(--dim2);letter-spacing:.1em;margin-bottom:10px}
.gitem p{font-size:13.5px;color:var(--dim)}
/* 區塊配圖：服務示意圖是去背 PNG，用 contain 留白；照片類用 cover 裁切 */
/* 去背 PNG 的線稿可能是深色的，深色底會整張消失，所以配圖框固定用淺色板 */
.gitem .pic{margin:-4px -6px 16px;height:170px;display:flex;align-items:center;justify-content:center;
  background:var(--plate);border-radius:var(--radius);overflow:hidden}
.gitem .pic img{max-height:100%;object-fit:contain;display:block}
/* 實景照色溫不一（展場偏藍、廠房偏綠），統一壓一點飽和並帶回暖色調，跟全站調性一致 */
.gitem .pic.crop{background:var(--panel2)}
.gitem .pic.crop img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) sepia(.12) brightness(.92)}
/* 官方授權代理改用文字呈現：三家原廠的 logo 一個是白字版、一個亮綠、一個深綠，
   壓成同一色會變成黑剪影，維持原色又會有一張看不見，所以這裡不放 logo。 */
.gitem .oem{font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:.04em;
  line-height:1.2;margin-bottom:6px}
.gitem .oem-zh{font-size:13px;color:var(--dim2);margin-bottom:12px;
  padding-bottom:12px;border-bottom:1px solid var(--line-soft)}

/* ---------------- 公司實績相簿 ---------------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.gal figure{position:relative;background:var(--panel);aspect-ratio:4/3;overflow:hidden}
.gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s,filter .4s;
  filter:saturate(.85) sepia(.12) brightness(.9)}
.gal figure:hover img{transform:scale(1.04);filter:none}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 14px 10px;
  font-size:12px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72))}

/* ---------------- 合作品牌牆 ----------------
   這批 logo 舊站本來就是深色背景版（多數是白字），所以整塊鋪深底、保留原本的品牌色，
   八家排起來自然一致，也不必把 logo 壓成黑剪影。 */
.brands{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:34px 18px;align-items:center}
.brands img{max-height:26px;max-width:100%;object-fit:contain;display:block;margin:0 auto;
  opacity:.78;transition:opacity .2s}
.brands img:hover{opacity:1}

/* ---------------- 聯絡 ---------------- */
.foot-top{display:grid;grid-template-columns:1.15fr 1fr;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 30px 70px -55px #000}
.photo{min-height:300px;background:var(--panel)}
.photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) brightness(.92)}
.side-info{padding:38px 36px;border-left:1px solid var(--line);background:var(--panel)}
.side-info h3{font-size:17px;font-weight:700;margin-bottom:6px}
.side-info .en{font-family:var(--mono);font-size:12px;color:var(--dim2);letter-spacing:.1em;margin-bottom:22px}
.row{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.row:last-of-type{border-bottom:none}
.row span{font-family:var(--mono);font-size:11.5px;color:var(--dim2);width:56px;flex:none;padding-top:3px}
.row div{color:var(--dim)}
.row a:hover{color:var(--accent)}

form.inq{display:grid;gap:14px;max-width:560px;padding-top:26px}
form.inq label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  color:var(--dim2);margin-bottom:5px}
form.inq input,form.inq textarea,form.inq select{
  width:100%;font:inherit;font-size:14px;color:var(--text);background:var(--elev);
  border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
form.inq input::placeholder,form.inq textarea::placeholder{color:var(--faint)}
form.inq input:hover,form.inq textarea:hover,form.inq select:hover{border-color:#43444B}
form.inq input:focus,form.inq textarea:focus,form.inq select:focus{outline:none;
  border-color:var(--accent);background:var(--panel2);box-shadow:0 0 0 3px rgba(255,106,43,.14)}
form.inq textarea{min-height:120px;resize:vertical}
form.inq .msg{font-size:13px;color:var(--accent);min-height:20px}

/* ---------------- 頁尾 ---------------- */
footer.site{border-top:1px solid var(--line);margin-top:80px;padding:22px 0;
  font-family:var(--mono);font-size:11.5px;color:var(--dim2);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

.loading{padding:40px 0;text-align:center;color:var(--dim2);font-family:var(--mono);font-size:12.5px}

/* ---------------- 字體微調 ----------------
   英文用 Inter、等寬用 JetBrains Mono、中文用 Noto Sans TC（head 由 Google Fonts 載入）。
   中文與英文的視覺重量不同，這裡把幾個常見混排情況拉齊。 */
h1,h2,h3,h4,.pick .pk-t,.brand .bt,.gitem .oem{font-synthesis-weight:none}
/* Inter 的預設數字寬度不一，表格與規格數值統一用等寬數字才對得齊 */
table.sel,table.spec,.meta,.hero-meta,.count,.pick .pk-spec{font-variant-numeric:tabular-nums}
/* 等寬字的英數字距在中文旁邊會顯得鬆，收一點點 */
.mono,.meta,.sec-t small,.hero-txt .eyebrow,table.sel thead th,.badge,.post .pdate,
.article .amet,.side-info .en,.row span,form.inq label{font-feature-settings:"calt" 0}
/* 中文段落：字間微開、行距放寬，長文才好讀 */
.gitem p,.pick .pk-spec dd,table.sel tbody td.note{letter-spacing:.015em;line-height:1.75}
/* 標點懸掛與斷行：中文不在標點前斷行 */
p,li,td,dd{overflow-wrap:break-word;line-break:strict}

/* ---------------- 捲動進場 ----------------
   只有 site.js 有跑起來（它會在 <html> 加上 js）才會先隱藏元素，
   萬一 JS 沒載入，畫面仍然是完整可讀的。
   使用者在系統開了「減少動態效果」時整段不套用。 */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(12px);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .js .reveal.in{opacity:1;transform:none}
}

@media(max-width:1080px){
  .wrap{padding:0 20px}
  .menu{display:none}
  .menu.open{display:flex;position:absolute;top:60px;left:0;right:0;background:var(--panel);
    border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px 20px 16px;
    box-shadow:0 24px 50px -30px #000}
  .menu.open a{padding:9px 0;border-bottom:1px solid var(--line-soft)}
  .menubtn{display:block}
  .intro-grid{grid-template-columns:1fr;gap:28px}
  .hero{grid-template-columns:1fr;gap:30px;padding:40px 0 32px}
  .hero-pic{order:-1}
  .hero-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-meta div{padding:14px 16px}
  .hero-meta div:nth-child(2n){border-right:none}
  .hero-meta div:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
  .hero-meta div:nth-child(odd){padding-left:0}
  .meta{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:16px}
  /* grid 項目預設 min-width:auto，篩選列與表格會把整塊撐得比螢幕寬、
     整頁跟著往右溢出，所以這裡把兩個軸都鎖回 0 */
  .board{grid-template-columns:minmax(0,1fr)}
  .board>*{min-width:0}
  .side{border-right:none;border-bottom:1px solid var(--line);display:flex;gap:8px;
    overflow-x:auto;padding:14px 16px;min-width:0;max-width:100%}
  .fgroup{padding:0;flex:none}
  .fgroup h3{margin-bottom:6px}
  .fgroup button{display:inline-block;width:auto;padding:4px 10px 4px 12px}
  .pd{grid-template-columns:1fr;gap:28px}
  .foot-top{grid-template-columns:1fr}
  .side-info{border-left:none;border-top:1px solid var(--line)}
  .post{grid-template-columns:72px minmax(0,1fr);gap:6px 14px;align-items:center}
  .post .pc{display:none}
  .post .pimg{width:72px;grid-row:span 2}
  .picks{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- 手機版：選型表改成一張一張的卡片 ----
   桌機版的表格固定 980px 寬，在手機上只能左右拉，欄位會被切掉也不好比對。
   窄螢幕改成每台機器一張卡，每一列前面用 td 的 data-l 印出欄位名稱。 */
@media(max-width:760px){
  .tblwrap{overflow-x:visible}
  table.sel{min-width:0;display:block}
  table.sel thead{display:none}
  table.sel tbody{display:block}
  table.sel tbody tr{display:block;padding:15px 16px;border-bottom:1px solid var(--line)}
  table.sel tbody tr:last-child{border-bottom:none}
  table.sel tbody tr:hover td{background:none}
  table.sel tbody td{display:flex;gap:10px;padding:2px 0;border:none;line-height:1.5}
  table.sel tbody td::before{
    content:attr(data-l);flex:0 0 66px;color:var(--dim2);padding-top:3px;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  }
  /* 型號當卡片標題，不縮排也不加欄位名稱 */
  table.sel tbody td.model{display:block;white-space:normal;font-size:14.5px;
    margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line-soft)}
  table.sel tbody td.model::before{display:none}
  table.sel tbody td.note{min-width:0}
  /* 沒填的欄位在手機上整列省略，不然畫面上一堆「—」很吵 */
  table.sel tbody td:has(> .empty){display:none}
  .side{padding:12px 14px}
  .fgroup{padding:0 14px 0 0}
}

@media(max-width:640px){
  .picks{grid-template-columns:1fr}
  .hero-txt h1{font-size:25px}
}