/* 比古工作室 hiko-u.com
   風格：深色現場風。近黑底、照片為主、窄體粗標題、單一橘色強調色。
   設計決策與「避免 AI 感」的規則見 docs/design.md */

:root{
  --bg:#161819;
  --surface:#1e2123;
  --line:#33383c;
  --text:#e9eae7;
  --text-2:#c4c8ca;
  --muted:#9aa0a4;
  --accent:#ee7b30;
  --accent-hover:#f5904d;
  --accent-ink:#1a0f06;
  --sans:"Archivo","Noto Sans TC",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --r-ctl:4px;   /* 按鈕、輸入框；照片一律直角 */
  --nav-h:68px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--nav-h)}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.75}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 雙語：用 !important 避免個別元素的 display 設定蓋過隱藏規則 */
[data-lang="zh"] .en,[data-lang="en"] .zh{display:none!important}

.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
@media (max-width:767px){.wrap{padding:0 16px}}

/* ---------- header ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:10;background:linear-gradient(rgba(22,24,25,.85),transparent);transition:background .25s ease}
header.solid{background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:24px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:30px;height:30px}
.brand b{font-weight:800;font-size:18px;letter-spacing:.03em}
.nav ul{display:flex;gap:32px;list-style:none;font-size:15px}
.nav ul a{text-decoration:none;color:var(--text-2)}
.nav ul a:hover{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:16px}
.lang{font:500 14px var(--sans);color:var(--text-2);background:none;border:0;padding:6px 2px;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.lang:hover{color:var(--text);text-decoration-color:var(--text)}
.menu-btn{display:none}
/* 窄螢幕把導覽收進「選單」，展開時直接疊在 header 下方，不做滑入動畫 */
@media (max-width:900px){
  .menu-btn{display:block}
  .nav ul{display:none;position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;gap:0;padding:8px 16px 16px;background:var(--bg);box-shadow:0 1px 0 var(--line)}
  header.open{background:var(--bg)}
  header.open .nav ul{display:flex}
  .nav ul a{display:block;padding:12px 0;font-size:17px;border-top:1px solid var(--line)}
}
/* header 放不下聯絡按鈕時改由選單提供 */
.nav-contact{display:none}
@media (max-width:420px){.nav .btn{display:none}.nav-contact{display:block}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;font:600 15px var(--sans);padding:13px 22px;border-radius:var(--r-ctl);text-decoration:none;cursor:pointer;white-space:nowrap;border:1px solid transparent;transition:transform .12s ease,background .2s ease,border-color .2s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:disabled{opacity:.6;cursor:wait}
.btn-line{border-color:#6a7176;color:var(--text)}
.btn-line:hover{border-color:var(--text)}
.nav .btn{padding:8px 16px;font-size:14px}

/* 內文連結：底線用橘色，滑過時加粗 */
.tlink{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-thickness .15s ease}
.tlink:hover{text-decoration-thickness:3px}

/* ---------- 照片欄位 ----------
   .ph 是尚未放照片時的佔位。放照片時在 .ph 內加 <img>，佔位標籤會被蓋掉。 */
.ph{position:relative;background:repeating-linear-gradient(135deg,#202326 0 12px,#1b1e20 12px 24px);display:flex;align-items:flex-end;overflow:hidden}
.ph > span{font-family:var(--mono);font-size:12px;color:var(--muted);padding:12px 14px}
.ph > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* 架構圖：內嵌 SVG，文字用 .zh/.en 跟著語言切換，不必做兩張圖 */
.ph.diagram{background:var(--surface)}
.ph > svg{position:absolute;inset:0;width:100%;height:100%}
.dg-box{fill:none;stroke:#5a6267;stroke-width:1.5}
.dg-door{fill:none;stroke:#4a5156;stroke-width:1.5}
.dg-open{fill:color-mix(in srgb,var(--accent) 18%,transparent);stroke:var(--accent)}
.dg-wire{stroke:var(--accent);stroke-width:2}
.dg-head{fill:var(--accent)}
.dg-t{fill:var(--text);font-weight:700;font-stretch:82%;font-size:20px}
.dg-s{fill:var(--muted);font-size:14px}
.dg-l{fill:var(--text-2);font-size:14px}
.dg-mono{font-family:var(--mono)}
.dg-n{fill:var(--muted);font-weight:700;font-size:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100dvh;display:flex;align-items:flex-end}
.hero > .ph{position:absolute;inset:0;align-items:flex-start;justify-content:flex-end}
.hero > .ph > span{margin-top:calc(var(--nav-h) + 16px);max-width:min(520px,90%);text-align:right}
/* LED 燈板在照片右側，手機直式裁切時往右保留燈板 */
.hero > .ph > img{object-position:65% 50%}
/* 照片裡有亮的 LED 燈陣，整體先壓暗一層再往下加深，標題白字才讀得清楚 */
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,24,25,.35) 0%,rgba(22,24,25,.4) 35%,rgba(22,24,25,.94) 88%);pointer-events:none}
.hero-inner{position:relative;z-index:1;padding-bottom:88px;width:100%}
.hero h1{font-weight:800;font-stretch:78%;font-size:clamp(40px,6vw,86px);line-height:1.04;letter-spacing:-.01em;max-width:13em}
.hero h1 .zh{font-weight:900;letter-spacing:.01em;line-height:1.2;display:block}
.hero p{margin-top:24px;max-width:31em;font-size:18px;color:var(--text-2)}
.ctas{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
@media (max-width:767px){.hero-inner{padding-bottom:48px}.hero h1{font-size:clamp(32px,9.5vw,46px)}}

/* ---------- section 共用 ---------- */
section{padding:120px 0}
@media (max-width:767px){section{padding:72px 0}}
h2{font-weight:800;font-stretch:82%;font-size:clamp(30px,3.6vw,50px);line-height:1.12;letter-spacing:-.005em;max-width:18em}
h2 .zh{font-weight:900;line-height:1.3}
.lead{margin-top:18px;color:var(--text-2);max-width:36em;font-size:17px}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:6fr 6fr;gap:72px;align-items:center}
.about-body p{margin-top:20px;color:var(--text-2);max-width:34em}
.about-body .origin{color:var(--muted);font-size:14px;margin-top:36px}
.about-photos{display:grid;grid-template-columns:3fr 2fr;gap:16px;align-items:end}
.about-photos .ph:first-child{aspect-ratio:4/5}
.about-photos .ph:last-child{aspect-ratio:3/4;margin-bottom:-56px}
@media (max-width:900px){.about{grid-template-columns:1fr;gap:40px}.about-photos .ph:last-child{margin-bottom:0}}

/* ---------- services：沿資料流排列的三段 ----------
   版面直接來自業務本身：設備端 → 邊緣端 → 網頁端，段與段之間標實際用的通訊方式。 */
#services{background:var(--surface)}
/* 照片排第一列、文字排第二列，連接線放在照片那一列並垂直置中，自然對準照片中線 */
.chain{margin-top:64px;display:grid;grid-template-columns:1fr 112px 1fr 112px 1fr;
  grid-template-areas:"p1 h1 p2 h2 p3" "t1 . t2 . t3";column-gap:0}
.stage{display:contents}
.stage .ph{aspect-ratio:4/3}
.s1 .ph{grid-area:p1}.s1 .txt{grid-area:t1}
.s2 .ph{grid-area:p2}.s2 .txt{grid-area:t2}
.s3 .ph{grid-area:p3}.s3 .txt{grid-area:t3}
.hop1{grid-area:h1}.hop2{grid-area:h2}
.stage .txt{padding-top:24px}
.stage h3{font-weight:700;font-stretch:88%;font-size:24px;line-height:1.25}
.stage .where{margin-top:4px;font-size:14px;color:var(--muted)}
/* 「做什麼」清單：先講能解決什麼，技術名詞用灰色小字補在下一行，避免整行只有名詞堆疊 */
.does{list-style:none;margin-top:16px}
.does li{padding:9px 0;border-top:1px solid var(--line);color:var(--text-2);font-size:15px;line-height:1.55}
.does li:last-child{border-bottom:1px solid var(--line)}
.does .tech{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.hop{align-self:center;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 10px}
.hop .wire{display:block;width:100%;height:2px;background:var(--accent);transform-origin:left center;position:relative}
.hop .wire::after{content:"";position:absolute;right:-1px;top:-5px;border:6px solid transparent;border-left:9px solid var(--accent);border-right:0}
.hop small{font-family:var(--mono);font-size:12px;color:var(--text-2);text-align:center;line-height:1.5}
@media (max-width:900px){
  .chain{grid-template-columns:1fr;grid-template-areas:"p1" "t1" "h1" "p2" "t2" "h2" "p3" "t3"}
  .stage .txt{padding-top:18px}
  .hop{display:grid;grid-template-columns:2px auto;justify-content:start;align-items:center;gap:0 16px;padding:24px 0 24px 24px}
  .hop .wire{grid-column:1;grid-row:1 / span 2;width:2px;height:48px;transform-origin:center top}
  .hop small{grid-column:2}
  .hop .wire::after{right:auto;left:-5px;top:auto;bottom:-6px;border:6px solid transparent;border-top:9px solid var(--accent);border-bottom:0}
  .hop small{text-align:left}
}

/* ---------- 影像辨識：接在三段資料流下方，屬於服務的一部分 ---------- */
.vision{margin-top:88px;padding-top:56px;border-top:1px solid var(--line);display:grid;grid-template-columns:4fr 8fr;gap:56px;align-items:center}
.vision .ph{aspect-ratio:3/4}
.vision h3{font-weight:700;font-stretch:88%;font-size:24px;line-height:1.25}
.vision .where{margin-top:4px;font-size:14px;color:var(--muted)}
.vision .desc{margin-top:14px;color:var(--text-2);max-width:36em}
.vision .does{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;max-width:44em}
.vision .does li:nth-last-child(2){border-bottom:1px solid var(--line)}
@media (max-width:767px){.vision .does{grid-template-columns:1fr}.vision .does li:nth-last-child(2){border-bottom:0}}
@media (max-width:900px){.vision{grid-template-columns:1fr;gap:28px;margin-top:64px;padding-top:40px}.vision .ph{max-width:240px}}

/* ---------- capabilities：左標題、右邊四組清單 ---------- */
.cap{display:grid;grid-template-columns:4fr 7fr;gap:72px}
.cap-list{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.cap-list > div{padding:20px 0 24px;border-top:1px solid var(--line)}
.cap-list h3{font-weight:700;font-size:18px;line-height:1.4}
.cap-list ul{margin-top:10px;padding-left:1.1em;color:var(--text-2);font-size:15px}
.cap-list li{margin-top:6px}
.cap-list li::marker{color:var(--muted)}
.cap-list .wide{grid-column:1/-1}
.cap-list .wide ul{columns:2;column-gap:40px}
/* 分欄後第二欄第一項沒有上方間距，改用上下 padding 讓兩欄對齊 */
.cap-list .wide li{break-inside:avoid;margin-top:0;padding:3px 0}
@media (max-width:900px){.cap{grid-template-columns:1fr;gap:32px}}
@media (max-width:767px){.cap-list{grid-template-columns:1fr}.cap-list .wide ul{columns:1}}

/* ---------- works ---------- */
#work{border-top:1px solid var(--line)}
.works{margin-top:64px;display:grid;grid-template-columns:1fr 1fr;gap:64px 40px}
.work .ph{aspect-ratio:16/10}
/* 第一項是佔滿整列的重點案例，之後兩欄由右欄往下錯位 */
.work:not(.feature):nth-child(odd){margin-top:96px}
.work .meta{margin-top:20px;font-size:14px;color:var(--muted)}
.work h3{font-weight:700;font-stretch:88%;font-size:22px;line-height:1.3;margin-top:2px}
.work p{color:var(--text-2);margin-top:8px;max-width:32em}
.work .note{font-size:14px;color:var(--muted);margin-top:12px}
.work .visit{margin-top:14px}
/* 細節最多的案例佔滿整列：左圖右文 */
.work.feature{grid-column:1/-1;display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:start}
.feature .work-body .meta{margin-top:0}
.feature .spec{grid-template-columns:1fr}
@media (max-width:900px){.work.feature{grid-template-columns:1fr;gap:0}.feature .work-body .meta{margin-top:20px}}
/* 有細節可寫的專案，在說明下方補兩欄清單 */
.spec{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.spec h4{font-size:15px;font-weight:700;line-height:1.4}
.spec ul{margin-top:8px;padding-left:1.1em;font-size:14px;color:var(--text-2);line-height:1.65}
.spec li{margin-top:6px}
.spec li::marker{color:var(--muted)}
@media (max-width:1100px){.spec{grid-template-columns:1fr}}
@media (max-width:767px){.works{grid-template-columns:1fr;gap:48px}.work:not(.feature):nth-child(odd){margin-top:0}}

/* ---------- process：真的有先後順序，所以用編號 ---------- */
.process{display:grid;grid-template-columns:4fr 7fr;gap:72px}
.steps{list-style:none;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:48px 1fr;gap:4px 16px;padding:20px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s);grid-row:span 2;font-weight:800;font-stretch:80%;font-size:28px;line-height:1.1;color:var(--muted)}
.steps h3{font-weight:700;font-size:18px;line-height:1.4}
.steps p{color:var(--text-2);font-size:15px}
@media (max-width:900px){.process{grid-template-columns:1fr;gap:32px}}

/* ---------- faq：與合作方式同樣左標題右清單，用原生 details 展開 ---------- */
#faq{background:var(--surface)}
.faq{display:grid;grid-template-columns:4fr 7fr;gap:72px}
.qa details{border-top:1px solid var(--line)}
.qa details:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:20px 0;font-weight:700;font-size:18px;line-height:1.4}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:none;font-weight:400;font-size:24px;line-height:1;color:var(--muted)}
.qa details[open] summary::after{content:"−"}
.qa summary:hover{color:var(--text)}
.qa details p{padding:0 40px 22px 0;color:var(--text-2);max-width:40em}
@media (max-width:900px){.faq{grid-template-columns:1fr;gap:32px}.qa details p{padding-right:0}}

/* ---------- contact ---------- */
#contact{border-top:1px solid var(--line)}
.contact{display:grid;grid-template-columns:5fr 7fr;gap:72px}
.mail{display:inline-block;margin-top:28px;font-size:clamp(18px,2vw,24px);font-weight:600}
.brief-h{margin-top:44px;font-size:15px;font-weight:700}
.brief{margin-top:10px;padding-left:1.2em;color:var(--text-2);font-size:15px}
.brief li{margin-top:6px}
.brief li::marker{color:var(--muted)}
form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.full{grid-column:1/-1}
label{font-size:14px;font-weight:500;color:#d5d8d9}
label em{font-style:normal;color:var(--muted);font-weight:400}
input,select,textarea{font:16px var(--sans);color:var(--text);background:var(--surface);border:1px solid #4a5156;border-radius:var(--r-ctl);padding:11px 12px;width:100%;transition:border-color .15s ease}
input:hover,select:hover,textarea:hover{border-color:#6a7176}
textarea{min-height:140px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
input::placeholder,textarea::placeholder{color:#868d91}
.hp{position:absolute;left:-9999px}
.form-note{grid-column:1/-1;font-size:14px;color:var(--text);min-height:1.5em}
form .btn{justify-self:start}
@media (max-width:900px){.contact{grid-template-columns:1fr;gap:40px}form{grid-template-columns:1fr}}

footer{padding:56px 0 40px;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:5fr 4fr 3fr;gap:32px 48px;align-items:start}
.foot-brand p{margin-top:12px;max-width:24em}
.foot-brand .brand{color:var(--text)}
.foot-nav{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px}
.foot-nav a{text-decoration:none;color:var(--text-2)}
.foot-nav a:hover{color:var(--text)}
.foot-mail{justify-self:end;font-size:15px}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:20px;border-top:1px solid var(--line)}
@media (max-width:900px){.foot{grid-template-columns:1fr}.foot-mail{justify-self:start}}

/* ---------- motion ----------
   全站只有一個動效：服務段落進入畫面時，連接線依資料流方向畫出來。 */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .chain.armed .wire{transform:scaleX(0);transition:transform .7s cubic-bezier(.65,0,.35,1)}
  .chain.armed .hop2 .wire{transition-delay:.55s}
  .chain.armed.in .wire{transform:none}
  @media (max-width:900px){
    .chain.armed .wire{transform:scaleY(0)}
    .chain.armed.in .wire{transform:none}
  }
}