/* ==========================================================================
   TechTree Global — Design System
   --------------------------------------------------------------------------
   一個檔案定義全站視覺。改呢度 = 改全站。
   結構：1. 設計變數  2. 基礎重置  3. 排版  4. 元件  5. 版面  6. 響應式
   ========================================================================== */

/* ==========================================================================
   1. 設計變數（Design Tokens）
   ========================================================================== */
:root{
  /* 主色 — 深海軍藍：穩定、可信、專業 */
  --navy-900:#08182b;
  --navy-800:#0d2440;
  --navy-700:#133255;
  --navy-600:#1b4272;

  /* 強調色 — 琥珀：對應「有貨 / 已找到」 */
  --amber-600:#b45309;
  --amber-500:#d97706;
  --amber-100:#fef3c7;

  /* 狀態色 — 直接對應 availability 三種狀態 */
  --ok-600:#047857;
  --ok-100:#d1fae5;
  --warn-600:#b45309;
  --warn-100:#fef3c7;
  --off-600:#b91c1c;
  --off-100:#fee2e2;

  /* 中性色 */
  --ink:#0b1420;
  --ink-2:#334155;
  --ink-3:#64748b;
  --ink-4:#94a3b8;
  --line:#e2e8f0;
  --line-2:#cbd5e1;
  --bg:#ffffff;
  --bg-2:#f8fafc;
  --bg-3:#f1f5f9;

  /* 排版 */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter","Helvetica Neue",
         "PingFang SC","Microsoft JhengHei",sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Consolas",monospace;

  /* 間距 */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* 其他 */
  --r-sm:4px; --r:8px; --r-lg:12px;
  --shadow-sm:0 1px 2px rgba(11,20,32,.06);
  --shadow:0 4px 16px rgba(11,20,32,.08);
  --shadow-lg:0 12px 40px rgba(11,20,32,.12);
  --maxw:1180px;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ==========================================================================
   2. 基礎重置
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--amber-500);outline-offset:2px;border-radius:2px}

/* ==========================================================================
   3. 排版
   ========================================================================== */
h1,h2,h3,h4{line-height:1.22;letter-spacing:-.02em;font-weight:700;color:var(--ink)}
h1{font-size:clamp(2rem,4.6vw,3.35rem);letter-spacing:-.03em}
h2{font-size:clamp(1.5rem,2.8vw,2.1rem)}
h3{font-size:1.125rem;letter-spacing:-.01em}
p{color:var(--ink-2)}

.lede{font-size:clamp(1.02rem,1.6vw,1.2rem);line-height:1.7;color:var(--ink-2)}
.eyebrow{
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber-600);margin-bottom:var(--sp-3);
}
.mono{font-family:var(--mono);font-size:.9em}

/* ==========================================================================
   4. 元件
   ========================================================================== */

/* --- 按鈕 --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:var(--r);font-weight:600;font-size:.95rem;
  transition:all .18s var(--ease);white-space:nowrap;
  max-width:100%;border:1.5px solid transparent;
}
.btn-primary{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.btn-primary:hover{background:var(--navy-700);border-color:var(--navy-700);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-accent{background:var(--amber-500);color:#fff;border-color:var(--amber-500)}
.btn-accent:hover{background:var(--amber-600);border-color:var(--amber-600);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-ghost{background:transparent;color:var(--navy-800);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--navy-800);background:var(--bg-2)}
.btn-sm{padding:9px 16px;font-size:.875rem}

/* --- 標籤 --- */
.tag{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;
  font-size:.75rem;font-weight:650;letter-spacing:.01em;white-space:nowrap;
}
.tag-ok{background:var(--ok-100);color:var(--ok-600)}
.tag-warn{background:var(--warn-100);color:var(--warn-600)}
.tag-off{background:var(--off-100);color:var(--off-600)}
.tag-neutral{background:var(--bg-3);color:var(--ink-3)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}

/* --- 卡片 --- */
.card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-6);transition:all .22s var(--ease);
}
.card:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-2px)}

/* ==========================================================================
   5. 版面
   ========================================================================== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-5)}
.section{padding:var(--sp-9) 0}
.section-tight{padding:var(--sp-8) 0}
.section-alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{max-width:720px;margin-bottom:var(--sp-7)}
.section-head p{margin-top:var(--sp-4)}

/* --- 頂部資訊條 --- */
.topbar{
  background:var(--navy-900);color:#cbd5e1;font-size:.82rem;
  padding:9px 0;
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.topbar-info{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap}
.topbar a:hover{color:#fff}
.topbar .sep{width:1px;height:12px;background:rgba(255,255,255,.2)}

/* --- 主導覽 --- */
.nav{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;gap:var(--sp-5);min-height:72px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand > img,
.brand > picture > img{
  display:block;height:auto;max-height:42px;width:auto;
  /* Desktop default；響應式喺 media query 入面 */
}
.brand-mark{
  width:34px;height:34px;border-radius:7px;background:var(--navy-800);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:.95rem;
  letter-spacing:-.03em;flex-shrink:0;
}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-weight:750;font-size:1rem;letter-spacing:-.02em;color:var(--ink)}
.brand-sub{font-size:.66rem;color:var(--ink-4);letter-spacing:.1em;text-transform:uppercase}

/* 導覽間距用 clamp：8 個項目喺窄螢幕（861–1100px）會逼爆，
   所以隨視窗闊度自動收窄，避免換行或溢出 */
/* 導覽永遠顯示，唔會折疊成漢堡選單；唔夠位就自動換行 */
.nav-links{display:flex;align-items:center;flex-wrap:wrap;margin-left:auto;
  column-gap:clamp(11px,1.5vw,24px);row-gap:5px}
.nav-links a{
  font-size:.92rem;font-weight:550;color:var(--ink-2);padding:6px 0;
  border-bottom:2px solid transparent;transition:all .16s var(--ease);
}
.nav-links a:hover{color:var(--ink);border-color:var(--line-2)}
.nav-links a.active{color:var(--navy-800);border-color:var(--amber-500)}

.nav-right{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0}

/* --- 語言切換 --- */
.lang{position:relative}
.lang-btn{
  display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:var(--r);
  border:1px solid var(--line-2);background:var(--bg);font-size:.85rem;font-weight:600;
  color:var(--ink-2);transition:all .16s var(--ease);min-height:40px;
}
.lang-btn:hover{border-color:var(--navy-800);color:var(--ink)}
.lang-globe{width:15px;height:15px;flex-shrink:0}
.lang-caret{width:10px;height:10px;transition:transform .18s var(--ease);flex-shrink:0}
.lang-btn[aria-expanded="true"] .lang-caret{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:200px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:6px;z-index:200;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:all .18s var(--ease);
}
.lang-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
.lang-opt{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:9px 12px;border-radius:var(--r-sm);font-size:.9rem;color:var(--ink-2);
  text-align:left;transition:background .14s;
}
.lang-opt:hover{background:var(--bg-3)}
.lang-opt[aria-selected="true"]{color:var(--navy-800);font-weight:650;background:var(--bg-2)}
.lang-check{width:14px;height:14px;opacity:0;flex-shrink:0}
.lang-opt[aria-selected="true"] .lang-check{opacity:1}

/* --- 手機選單 --- */
.nav-toggle{display:none;padding:9px;border-radius:var(--r);border:1px solid var(--line-2)}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:all .2s var(--ease)}
.nav-toggle span+span{margin-top:4px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* --- Hero --- */
.hero{
  background:linear-gradient(168deg,var(--navy-900) 0%,var(--navy-800) 55%,var(--navy-700) 100%);
  color:#fff;padding:var(--sp-9) 0 var(--sp-8);position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 70% at 70% 20%,#000,transparent);
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--sp-8);align-items:center}
.hero h1{color:#fff;margin-bottom:var(--sp-5)}
.hero .lede{color:#b9c9dc;max-width:600px}
.hero .eyebrow{color:#fbbf24}
.hero-actions{display:flex;gap:var(--sp-3);margin-top:var(--sp-6);flex-wrap:wrap}
.hero .btn-primary{background:#fff;color:var(--navy-900);border-color:#fff}
.hero .btn-primary:hover{background:#e8eef5;border-color:#e8eef5}
.hero .btn-ghost{color:#dbe6f2;border-color:rgba(255,255,255,.28)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}

/* Hero 側邊資料卡 */
.hero-panel{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-lg);padding:var(--sp-5);backdrop-filter:blur(6px);
}
.hero-panel-title{
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:#8fa8c4;font-weight:700;margin-bottom:var(--sp-4);
}
.spec-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.09);
}
.spec-row:last-child{border-bottom:none}
.spec-key{font-size:.82rem;color:#8fa8c4}
.spec-val{font-size:.86rem;font-weight:650;color:#fff;font-family:var(--mono)}

/* --- 信任條 --- */
.trust{
  background:var(--bg);border-bottom:1px solid var(--line);
  padding:var(--sp-5) 0;
}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
.trust-item{display:flex;align-items:center;gap:11px}
.trust-icon{
  width:32px;height:32px;border-radius:var(--r-sm);background:var(--bg-3);
  display:grid;place-items:center;flex-shrink:0;color:var(--navy-700);
}
.trust-text{font-size:.86rem;font-weight:600;color:var(--ink-2);line-height:1.4}

/* --- 卡片網格 --- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}

.card-num{
  font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--amber-600);
  letter-spacing:.06em;margin-bottom:var(--sp-4);display:block;
}
.card h3{margin-bottom:var(--sp-3)}
.card p{font-size:.94rem;line-height:1.65}

/* --- 流程步驟 --- */
.steps{counter-reset:s;display:grid;gap:0}
.step{
  counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:var(--sp-5);
  padding:var(--sp-5) 0;border-bottom:1px solid var(--line);align-items:start;
}
.step:last-child{border-bottom:none}
.step-num{
  width:38px;height:38px;border-radius:50%;background:var(--bg-3);
  border:1.5px solid var(--line-2);display:grid;place-items:center;
  font-family:var(--mono);font-weight:700;font-size:.9rem;color:var(--navy-800);flex-shrink:0;
}
.step-num::before{content:counter(s,decimal-leading-zero)}
.step-body h3{margin-bottom:6px}
.step-body p{font-size:.94rem}

/* --- 清單（打勾） --- */
.checklist{display:grid;gap:var(--sp-4)}
.checklist li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem;color:var(--ink-2)}
.check-icon{color:var(--ok-600);flex-shrink:0;margin-top:2px}

/* --- 料號表格 --- */
.table-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg)}
.table-scroll{overflow-x:auto}
table.parts{font-size:.875rem;min-width:820px}
table.parts thead{background:var(--bg-3)}
table.parts th{
  text-align:left;padding:12px 14px;font-size:.75rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
table.parts td{padding:13px 14px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
table.parts tbody tr:last-child td{border-bottom:none}
table.parts tbody tr{transition:background .14s}
table.parts tbody tr:hover{background:var(--bg-2)}
.mpn{font-family:var(--mono);font-weight:650;color:var(--ink);font-size:.84rem}

/* --- 篩選列 --- */
.filters{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center;margin-bottom:var(--sp-5)}
.filter-input{
  flex:1 1 240px;min-width:0;padding:11px 14px;border:1px solid var(--line-2);
  border-radius:var(--r);font-size:.9rem;font-family:inherit;color:var(--ink);
  background:var(--bg);transition:border-color .16s;
}
.filter-input:focus{outline:none;border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(19,50,85,.1)}
.chip{
  padding:8px 15px;border-radius:99px;border:1px solid var(--line-2);background:var(--bg);
  font-size:.85rem;font-weight:600;color:var(--ink-3);transition:all .16s var(--ease);
  white-space:nowrap;
}
.chip:hover{border-color:var(--navy-700);color:var(--ink)}
.chip.active{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.result-count{font-size:.85rem;color:var(--ink-3);margin-bottom:var(--sp-4)}

/* --- 對比區（Wix vs 自建，示範用） --- */
.compare{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}
.compare-col{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6);background:var(--bg)}
.compare-col.hl{border-color:var(--navy-700);box-shadow:var(--shadow);position:relative}
.compare-col.hl::before{
  content:"建議";position:absolute;top:-10px;left:var(--sp-6);
  background:var(--amber-500);color:#fff;font-size:.7rem;font-weight:700;
  letter-spacing:.08em;padding:3px 10px;border-radius:99px;
}
.compare-col h3{margin-bottom:var(--sp-4);padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.compare-list li{display:flex;gap:10px;padding:8px 0;font-size:.9rem;color:var(--ink-2);align-items:flex-start}

/* --- CTA 區 --- */
.cta{
  background:var(--navy-900);color:#fff;border-radius:var(--r-lg);
  padding:var(--sp-8) var(--sp-7);text-align:center;
}
.cta h2{color:#fff;margin-bottom:var(--sp-4)}
.cta p{color:#b9c9dc;max-width:600px;margin:0 auto var(--sp-6)}
.cta-actions{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap}
.cta .btn-primary{background:#fff;color:var(--navy-900);border-color:#fff}
.cta .btn-primary:hover{background:#e8eef5}

/* --- 頁尾 --- */
.footer{background:var(--navy-900);color:#93a9c2;padding:var(--sp-8) 0 var(--sp-5);font-size:.88rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--sp-7);padding-bottom:var(--sp-7);border-bottom:1px solid rgba(255,255,255,.1)}
.footer h4{color:#fff;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;margin-bottom:var(--sp-4);font-weight:700}
.footer li{padding:5px 0}
.footer a:hover{color:#fff}
.footer .brand-name{color:#fff}
.footer .brand-sub{color:#6b84a0}
.footer p{color:#93a9c2;font-size:.86rem;line-height:1.7}
.footer-bottom{display:flex;justify-content:space-between;gap:var(--sp-4);padding-top:var(--sp-5);flex-wrap:wrap;font-size:.82rem;color:#6b84a0}
.footer-legal{border-top:1px solid rgba(255,255,255,.1);margin-top:var(--sp-5);padding-top:var(--sp-5);font-size:.78rem;color:#6b84a0;line-height:1.7}

/* --- 示範提示條 --- */
.demo-banner{
  background:var(--amber-100);border-bottom:1px solid #fcd34d;color:#78350f;
  font-size:.82rem;padding:9px 0;text-align:center;
}
.demo-banner strong{color:#78350f}

/* ==========================================================================
   6. 響應式
   ========================================================================== */
@media(max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:var(--sp-7)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp-6)}
}
@media(max-width:1024px){
  .grid-3,.grid-2,.compare{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}

  /* 導覽唔再折疊：品牌 + 語言/報價按鈕排第一行，導覽項目排第二行並自動換行 */
  .nav .wrap{flex-wrap:wrap;gap:var(--sp-3);padding:9px 0}
  .brand{order:1}
  .nav-right{order:2;margin-left:auto}
  .nav-links{order:3;flex-basis:100%;margin-left:0;
    column-gap:var(--sp-4);row-gap:6px}
  .nav-links a{font-size:.9rem;padding:5px 0}
}
@media(max-width:560px){
  :root{--sp-9:64px;--sp-8:44px;--sp-7:32px}
  .wrap{padding:0 var(--sp-4)}
  .section{padding:var(--sp-9) 0}
  .topbar{font-size:.76rem}
  .topbar-info{gap:var(--sp-3)}
  .topbar .sep{display:none}
  .brand-sub{display:none}
  .hero-actions .btn{width:100%}
  .hero-panel{padding:var(--sp-4)}
  .grid-4{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .cta{padding:var(--sp-7) var(--sp-5)}
  .cta-actions .btn{width:100%}
  .step{grid-template-columns:1fr;gap:var(--sp-3)}
  .lang-current{display:none}
  .lang-btn{padding:8px 10px}
  .filters{gap:var(--sp-2)}
  .chip{padding:7px 13px;font-size:.8rem}
}
@media(max-width:380px){
  .brand-text{display:none}
  .brand > img,
  .brand > picture > img{max-height:30px}
}
@media(max-width:560px){
  .brand > img,
  .brand > picture > img{max-height:34px}
}

/* --- 動態：進場淡入 --- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* --- 語言切換時嘅內容過場 --- */
body.switching .i18n-fade{opacity:0;transition:opacity .13s var(--ease)}
.i18n-fade{opacity:1;transition:opacity .2s var(--ease)}