/* ==========================================================================
   超悅工業官網 — 設計系統實作
   依據 website/DESIGN.md v2（Brand Kit v2 + T1/Arc 版面）
   鐵律：全站無 box-shadow；深度靠 Soft White → Paper → Blue → Blue Ink 疊層
   ========================================================================== */

:root {
  /* Colors — Brand Kit v3（主色＝Logo 同源 azure 藍，DESIGN.md D-18） */
  --color-blue: #0A5C90;
  --color-blue-ink: #063A5E;
  --color-blue-hover: #1478B8;
  --color-gold: #D99A2B;
  --color-canvas: #F8F7F3;
  --color-paper: #FFFFFF;
  --color-charcoal: #24292F;
  --color-mist: #6E7480;
  --color-hairline: #E3E0D8;

  /* Typography */
  --font-sans: "Inter", "Noto Sans TC", Arial, sans-serif;
  --text-display: 48px;
  --text-heading: 32px;
  --text-subheading: 20px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-label: 12px;

  /* Spacing (base 4px) */
  --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px;
  --sp-24: 24px; --sp-32: 32px; --sp-48: 48px; --sp-64: 64px; --sp-96: 96px;

  /* Layout */
  --page-max: 1200px;
  --section-gap: 96px;
  --card-padding: 24px;

  /* Radius */
  --radius-card: 16px;
  --radius-image: 24px;
  --radius-pill: 999px;

  /* Shadows（D-25：Amy 開放使用，維持低調柔和） */
  --shadow-card: 0 1px 2px rgba(6,42,68,.05), 0 10px 28px rgba(6,42,68,.09);
  --shadow-btn: 0 6px 16px rgba(10,92,144,.28);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0; /* 中文一律 0 字距 */
  color: var(--color-charcoal);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

/* 內文連結：Charcoal 底線，hover 轉金 */
p a, td a, li a {
  color: var(--color-charcoal);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .15s ease;
}
p a:hover, td a:hover, li a:hover { color: var(--color-gold); }

/* ---------- 版面容器 ---------- */
.container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--sp-24);
  padding-right: var(--sp-24);
}

.section { padding: var(--section-gap) 0; }
.section--flush-top { padding-top: 0; }

/* 帶狀層：Soft White ↔ Paper 交替，深藍帶做重音
   D-22：大型品牌色塊帶同色系微漸層（呼應 Logo C/Y 的漸層感），幅度刻意壓低 */
.band--paper { background: var(--color-paper); border-top: 1px solid var(--color-hairline); border-bottom: 1px solid var(--color-hairline); }
.band--deep {
  background: linear-gradient(135deg, #1B7FC4 0%, var(--color-blue) 52%, #063F63 100%);
  color: #fff;
}
.band--deep ::selection { background: var(--color-gold); }

/* ---------- 文字階層 ---------- */
h1, h2, h3 { font-weight: 700; letter-spacing: 0; }

.display {
  font-size: var(--text-display);
  line-height: 1.2;
  color: var(--color-blue);
}

.heading {
  font-size: var(--text-heading);
  line-height: 1.25;
  color: var(--color-blue);
}

.subheading { font-size: var(--text-subheading); line-height: 1.35; }

.band--deep .display, .band--deep .heading { color: #fff; }

.lead { max-width: 720px; }
.text-mist { color: var(--color-mist); }
.text-sm { font-size: var(--text-body-sm); line-height: 1.6; }

/* 置中宣言段（Arc 手法） */
.manifesto {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-blue);
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

/* Section 標籤（T1 手法）：金色方塊＋藍色眉標（14px/500，D-21 調大） */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-blue);
  margin-bottom: var(--sp-16);
}
.eyebrow::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--color-gold);
  flex: none;
}
.band--deep .eyebrow { color: rgba(255,255,255,.85); }

.section-head { margin-bottom: var(--sp-48); }
.section-head .heading + p { margin-top: var(--sp-16); max-width: 720px; }

/* ---------- 按鈕 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn--primary { background: var(--color-blue); color: #fff; }
.btn--primary:hover { background: var(--color-blue-hover); }

.btn--ghost { background: transparent; color: var(--color-blue); border-color: var(--color-blue); }
.btn--ghost:hover { color: var(--color-blue-hover); border-color: var(--color-blue-hover); }

/* 金色次按鈕：一頁最多一顆（DESIGN §6） */
.btn--gold { background: var(--color-gold); color: #fff; }
.btn--gold:hover { background: #c78a20; }

/* 深色帶上的按鈕反轉 */
.band--deep .btn--primary { background: #fff; color: var(--color-blue); }
.band--deep .btn--primary:hover { background: var(--color-canvas); }
.band--deep .btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.band--deep .btn--ghost:hover { border-color: #fff; }

/* ---------- 導覽列（D-30：Soft White 半透明毛玻璃——保留 D-17 淺色調，加透明遮罩感；D-29 深色版經 Amy 否決） ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(135deg, rgba(255,255,255,.82) 0%, rgba(248,247,243,.74) 55%, rgba(243,241,234,.8) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid rgba(227,224,216,.75);
}
/* 不支援 backdrop-filter 的舊瀏覽器退回實色 */
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--color-canvas); }
}

.nav {
  display: flex;
  align-items: center;
  height: 84px;
  gap: var(--sp-24);
}

/* Logo：去背版直接放（D-24），不加底牌 */
.nav__logo { flex: none; display: flex; align-items: center; text-decoration: none; }
.nav__logo img { height: 60px; width: auto; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
  list-style: none;
  margin-left: auto;
}

.nav__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-blue);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .15s ease;
}
.nav__link:hover { color: var(--color-blue-hover); }
.nav__link[aria-current="page"] { border-bottom-color: var(--color-gold); }

/* 語言切換 */
.nav__lang {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--text-label);
  font-weight: 500;
  border-left: 1px solid var(--color-hairline);
  padding-left: var(--sp-16);
}
.nav__lang .active { color: var(--color-blue); }
.nav__lang .pending { color: var(--color-mist); cursor: default; }
.nav__lang .sep { color: var(--color-hairline); }

/* 漢堡選單（手機） */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  margin-left: auto;
  background: none;
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  height: 2px;
  background: var(--color-blue);
  border-radius: 1px;
}

/* ---------- Hero（CNC 加工實拍底圖＋下緣 Blue Ink 漸層遮罩，標題左下——D-08／D-19） ---------- */
.hero {
  background:
    linear-gradient(180deg, rgba(6,58,94,.42) 0%, rgba(6,58,94,.28) 55%, rgba(6,58,94,.9) 100%),
    url("../assets/hero.jpg") center / cover no-repeat var(--color-blue-ink);
  color: #fff;
  padding: 96px 0 152px;
  display: flex;
  align-items: flex-end;
  min-height: 620px;
}
.hero > .container { width: 100%; }

.hero .display { color: #fff; max-width: 760px; }
.hero__sub {
  margin-top: var(--sp-24);
  max-width: 640px;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255,255,255,.85);
}
.hero__cta {
  margin-top: var(--sp-32);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-24);
}

.hero__contacts { display: flex; gap: var(--sp-12); }
.hero__contacts a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: var(--radius-pill);
  color: #fff;
  transition: border-color .15s ease, color .15s ease;
}
.hero__contacts a:hover { border-color: var(--color-gold); color: var(--color-gold); }
.hero__contacts svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 數字亮點磁磚：白卡浮出 hero 下緣 */
.stats { margin-top: -76px; position: relative; z-index: 2; }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-16);
}
.stat {
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
}
.stat::before {
  content: "";
  display: block;
  width: 4px; height: 4px;
  background: var(--color-gold);
  margin-bottom: var(--sp-12);
}
.stat__num {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-blue);
}
.stat__label {
  margin-top: var(--sp-8);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-mist);
}

/* ---------- 卡片與格線 ---------- */
.card {
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
}
.band--paper .card { background: var(--color-canvas); }

/* 柔和陰影（D-25）：浮起元素統一使用 */
.card, .stat, .table-wrap, .acc, .method__fig, .qstep, .placeholder, .report-chip, .map-embed {
  box-shadow: var(--shadow-card);
}
.btn--primary { box-shadow: var(--shadow-btn); }
.band--deep .card { box-shadow: 0 12px 32px rgba(2,24,38,.35); }

/* Google 地圖嵌入（D-27：Amy 開放特例） */
.map-embed {
  display: block;
  width: 100%;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-image);
}

.grid { display: grid; gap: var(--sp-16); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* 產業 icon 卡（八格） */
a.ind-card { text-decoration: none; display: block; transition: border-color .15s ease; }
a.ind-card:hover { border-color: var(--color-blue); }
.ind-card .icon-lg { margin-bottom: var(--sp-16); }
.ind-card__name { font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--color-charcoal); }
.ind-card__desc { margin-top: var(--sp-8); font-size: var(--text-body-sm); line-height: 1.6; color: var(--color-mist); }
.ind-card__mat {
  margin-top: var(--sp-12);
  padding-top: var(--sp-12);
  border-top: 1px solid var(--color-hairline);
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-blue);
}

/* 材質 icon 卡（六格） */
.mat-card__name { font-size: 18px; font-weight: 700; color: var(--color-charcoal); margin-top: var(--sp-16); }
.mat-card__grades { margin-top: var(--sp-8); font-size: var(--text-body-sm); line-height: 1.6; color: var(--color-mist); }

/* 後製程 icon 卡（16 格） */
.proc-card {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-16) var(--card-padding);
}
.proc-card__name { font-size: var(--text-body-sm); font-weight: 500; color: var(--color-charcoal); }

/* icon 尺寸：藍色 1.5px 線條（D-07／D-16） */
.icon-lg, .icon-md, .icon-sm {
  color: var(--color-blue);
  --icon-accent: var(--color-gold);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.icon-lg { width: 48px; height: 48px; }
.icon-md { width: 32px; height: 32px; stroke-width: 2.25; }
.icon-sm { width: 20px; height: 20px; stroke-width: 3; }

/* ---------- 規格清單（首頁核心能力） ---------- */
.spec-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--sp-48); }
.spec-list li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-12);
  padding: var(--sp-16) 0;
  border-bottom: 1px solid var(--color-hairline);
  font-weight: 500;
}
.spec-list li::before {
  content: "";
  align-self: center;
  flex: none;
  width: 8px; height: 8px;
  border: 1.5px solid var(--color-blue);
}

/* icon 版規格清單（D-20）：以 32px 線條 icon 取代方塊記號 */
.spec-list--icons li::before { display: none; }
.spec-list--icons li { align-items: center; }

/* 量測報告徽章（設備與品質頁；Amy 2026-07-05 確認每批可提供） */
.report-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  margin-top: var(--sp-32);
  padding: var(--sp-16) var(--card-padding);
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  font-weight: 500;
}

/* 段落 icon（關於頁等，置於 H2 上方） */
.section-icon { margin-bottom: var(--sp-16); }

/* ---------- 表格（設備清單） ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-hairline); border-radius: var(--radius-card); background: var(--color-paper); }
.spec-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.spec-table th {
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-mist);
  text-align: left;
  padding: var(--sp-12) var(--card-padding);
  border-bottom: 1px solid var(--color-hairline);
  white-space: nowrap;
}
.spec-table td {
  font-size: var(--text-body-sm);
  padding: var(--sp-12) var(--card-padding);
  border-bottom: 1px solid var(--color-hairline);
}
.spec-table tr:last-child td { border-bottom: none; }
.spec-table td:first-child { font-weight: 500; }

/* 公司資訊表（關於頁）：表頭欄 */
.spec-table th[scope="row"] {
  font-size: var(--text-body-sm);
  color: var(--color-mist);
  font-weight: 500;
  width: 160px;
  vertical-align: top;
}

/* ---------- 加工方式（能力頁）：文字＋工程圖例 交替 ---------- */
.method {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-64);
  align-items: center;
  padding: var(--sp-64) 0;
  border-bottom: 1px solid var(--color-hairline);
}
.method:last-of-type { border-bottom: none; }
.method:nth-child(even) .method__fig { order: -1; }
.method h2 { font-size: 24px; line-height: 1.3; color: var(--color-blue); }
.method p { margin-top: var(--sp-16); }
.method__fig {
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-image);
  padding: var(--sp-32);
  display: flex;
  align-items: center;
  justify-content: center;
}
.method__fig svg { width: 100%; max-width: 360px; height: auto; }

/* 精度數字並列 */
.precision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); max-width: 720px; }

/* ---------- 品質流程圖（13 站，桌機蛇形／手機直式） ---------- */
.qflow { display: flex; flex-direction: column; gap: var(--sp-12); }
.qrow { display: flex; align-items: stretch; gap: var(--sp-8); }
.qrow--rev { flex-direction: row-reverse; }

.qstep {
  flex: 1 1 0;
  min-width: 0;
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  padding: var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.qstep__no {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-blue);
  color: #fff;
  font-size: var(--text-body-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
/* 檢驗站：金色細環標記（D-12） */
.qstep--inspect .qstep__no { outline: 2px solid var(--color-gold); outline-offset: 3px; }
.qstep__name { font-size: var(--text-body-sm); font-weight: 500; line-height: 1.5; }
.qstep__tag { font-size: var(--text-label); font-weight: 500; color: var(--color-gold); }

.qarrow {
  align-self: center;
  flex: none;
  color: var(--color-mist);
  display: flex;
}
.qarrow svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
.qrow--rev .qarrow svg { transform: scaleX(-1); }

.qflow__note { margin-top: var(--sp-24); font-size: var(--text-body-sm); color: var(--color-mist); }

/* ---------- 職缺手風琴 ---------- */
.acc { border: 1px solid var(--color-hairline); border-radius: var(--radius-card); background: var(--color-paper); }
.acc + .acc { margin-top: var(--sp-12); }
.acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  padding: var(--sp-24);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-charcoal);
  text-align: left;
}
.acc__title { flex: 1; }
.acc__toggle {
  width: 40px; height: 40px;
  border: 1px solid var(--color-blue);
  border-radius: 50%;
  color: var(--color-blue);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: transform .2s ease;
}
.acc__toggle::before { content: "+"; }
.acc.open .acc__toggle::before { content: "−"; }
.acc__body { display: none; padding: 0 var(--sp-24) var(--sp-24); }
.acc.open .acc__body { display: block; }
.acc__body p { color: var(--color-charcoal); max-width: 720px; }

/* ---------- 聯絡卡三格 ---------- */
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-12);
  text-decoration: none;
  transition: border-color .15s ease;
}
a.contact-card:hover { border-color: var(--color-blue); }
.contact-card__label { font-size: var(--text-label); font-weight: 500; color: var(--color-mist); }
.contact-card__value { font-size: 20px; font-weight: 700; color: var(--color-blue); word-break: break-all; }

/* LINE 官方色 icon（元件規格：LINE 用官方 Logo） */
.icon-line { width: 48px; height: 48px; }

/* 聯絡列（行內版，頁尾前收斂區用） */
.contact-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-16) var(--sp-32);
  font-weight: 500;
}
.contact-inline a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  text-decoration: none;
  color: inherit;
  transition: color .15s ease;
}
.contact-inline a:hover { color: var(--color-gold); }
.contact-inline svg { width: 20px; height: 20px; }

/* ---------- 素材待補框（證書／報告／地圖等，素材到位後替換） ---------- */
.placeholder {
  border: 1px dashed var(--color-hairline);
  border-radius: var(--radius-image);
  background: var(--color-paper);
  padding: var(--sp-48) var(--sp-24);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
  text-align: center;
}
.placeholder svg { color: var(--color-blue); width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.placeholder__title { font-weight: 700; }
.placeholder__note { font-size: var(--text-label); font-weight: 500; color: var(--color-mist); }

/* ---------- 證書圖（點擊開新分頁放大） ---------- */
.cert-img { display: block; max-width: 400px; margin: 0 auto; }
.cert-img img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-image);
  background: var(--color-paper);
  box-shadow: var(--shadow-card);
  transition: transform .15s ease;
}
.cert-img:hover img { transform: scale(1.02); }
.cert-img__note { margin-top: var(--sp-12); text-align: center; font-size: var(--text-label); font-weight: 500; color: var(--color-mist); }

/* ---------- 頁尾前 CTA 深色帶 ---------- */
.cta-band { text-align: center; }
.cta-band .heading { color: #fff; }
.cta-band p { margin-top: var(--sp-16); color: rgba(255,255,255,.85); max-width: 640px; margin-left: auto; margin-right: auto; }
.cta-band .contact-inline { justify-content: center; margin-top: var(--sp-32); color: #fff; }
.cta-band .btn { margin-top: var(--sp-32); }

/* ---------- 頁尾（Blue Ink 深底白字） ---------- */
.site-footer {
  background: linear-gradient(150deg, #0C5F97 0%, var(--color-blue-ink) 52%, #021826 100%);
  color: rgba(255,255,255,.85);
  padding: var(--sp-24) 0 var(--sp-16);
  font-size: var(--text-label);
}
.footer__brandrow { display: flex; align-items: center; gap: var(--sp-12); }
.footer__logo {
  background: var(--color-paper);
  border-radius: 10px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  flex: none;
}
.footer__logo img { height: 34px; width: auto; }
.footer__brand { color: #fff; font-size: 14px; font-weight: 700; line-height: 1.35; }
.footer__brand small { display: block; font-size: 10px; font-weight: 500; color: rgba(255,255,255,.6); margin-top: 1px; letter-spacing: .05em; }
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-12) var(--sp-32);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.footer__info { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-24); }
.footer__info li { display: flex; align-items: center; gap: 6px; }
.footer__info a { color: rgba(255,255,255,.85); text-decoration: none; transition: color .15s ease; }
.footer__info a:hover { color: var(--color-gold); }
.footer__info svg.meta { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.footer__info .icon-line-sm { width: 18px; height: 18px; flex: none; display: block; }
.footer__copy { padding-top: var(--sp-8); font-size: 11px; color: rgba(255,255,255,.5); }

/* ---------- 頁首標題區（內頁）：與首頁同源照片的短版 Hero 橫幅（D-23）
   遮罩比首頁重，照片退為質感底紋，內頁彼此一致又與首頁區隔 ---------- */
.page-head {
  background:
    linear-gradient(135deg, rgba(10,80,130,.9) 0%, rgba(7,58,94,.88) 55%, rgba(5,42,68,.94) 100%),
    url("../assets/hero.jpg") center 30% / cover no-repeat var(--color-blue-ink);
  color: #fff;
  padding: 88px 0 72px;
  display: flex;
  align-items: flex-end;
  min-height: 340px;
}
.page-head > .container { width: 100%; }
.page-head .eyebrow { color: rgba(255,255,255,.85); }
.page-head .display { max-width: 880px; color: #fff; }
.page-head .lead { margin-top: var(--sp-24); color: rgba(255,255,255,.88); }

/* ---------- RWD ---------- */
@media (max-width: 960px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr; }
  .method { grid-template-columns: 1fr; gap: var(--sp-32); padding: var(--sp-48) 0; }
  .method:nth-child(even) .method__fig { order: 0; }
}

@media (max-width: 720px) {
  :root { --section-gap: 48px; --text-display: 32px; --text-heading: 26px; }

  .nav__menu {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: rgba(248,247,243,.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--color-hairline);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-8) var(--sp-24) var(--sp-16);
  }
  .nav__menu li { border-bottom: 1px solid var(--color-hairline); }
  .nav__menu li:last-child { border-bottom: none; }
  .nav__link { display: block; padding: var(--sp-12) 0; border-bottom: none; }
  .nav__link[aria-current="page"] { color: var(--color-blue); font-weight: 700; }
  .nav__lang { border-left: none; padding-left: 0; padding-top: var(--sp-12); }
  .site-header.nav-open .nav__menu { display: flex; }
  .nav__toggle { display: flex; }

  .hero { padding: 72px 0 112px; min-height: 480px; }
  .page-head { padding: 56px 0 40px; min-height: 240px; }
  .hero__sub { font-size: 16px; }
  .stats { margin-top: -64px; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat__num { font-size: 32px; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .grid--4.grid--procs { grid-template-columns: repeat(2, 1fr); }
  .proc-card { flex-direction: row; padding: var(--sp-12) var(--sp-16); }

  .spec-list { grid-template-columns: 1fr; }
  .precision-grid { grid-template-columns: 1fr; }
  .manifesto { font-size: 22px; }

  /* 品質流程：直式 */
  .qrow, .qrow--rev { flex-direction: column; }
  .qarrow { align-self: flex-start; margin-left: var(--sp-24); }
  .qarrow svg, .qrow--rev .qarrow svg { transform: rotate(90deg); }
  .qstep { flex-direction: row; align-items: center; }
}