/* =========================================================================
   展昌工業 ChanChang Industrial — Site Stylesheet
   Theme: Heavy-Industrial / Precision-Trust ("深色金屬・銅線圈")
   - Dark steel canvas, copper accent (= motor winding signature),
     electric-cyan as sparing technical accent (= high-voltage / testing).
   - Namespaced --cc-* tokens. Mobile-safe in-app webview rules at the end.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&family=Saira+Semi+Condensed:wght@500;600;700;800&family=Saira:wght@400;500;600;700&display=swap');

:root {
  /* ---- Canvas / surfaces ----
     明暗階梯（每階肉眼可辨、不再糊成一片黑）：
     bg 15,20,27 → bg-2 23,31,42 → surface 31,41,55 → surface-2 39,50,63 */
  --cc-bg:        #0f141b;   /* 基底段落 / body（抬離全黑、沒那麼重） */
  --cc-bg-2:      #171f2a;   /* 交替段落 — 明顯較亮的鋼藍，做出節奏 */
  --cc-surface:   #1f2937;   /* 卡片 */
  --cc-surface-2: #27323f;   /* 浮起卡片 / hover */
  --cc-line:      rgba(150,170,195,.14);
  --cc-line-2:    rgba(150,170,195,.24);

  /* ---- Steel blues ---- */
  --cc-steel-800: #16212e;
  --cc-steel-600: #25394f;
  --cc-steel-400: #3f607f;
  --cc-steel-300: #6d8bab;

  /* ---- Copper (brand accent — motor windings) ---- */
  --cc-copper:      #d28a4d;
  --cc-copper-2:    #e8a866;   /* bright highlight */
  --cc-copper-deep: #9c5f30;
  --cc-copper-soft: rgba(210,138,77,.12);

  /* ---- Electric cyan (technical accent — voltage / test) ---- */
  --cc-volt:       #49c9e0;
  --cc-volt-soft:  rgba(73,201,224,.13);

  /* ---- Text ---- */
  --cc-text:   #e8eef4;
  --cc-text-2: #aebac8;
  --cc-text-3: #76828f;
  --cc-white:  #ffffff;

  /* ---- Misc ---- */
  --header-h: 76px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --maxw: 1240px;
  --shadow-card: 0 8px 28px rgba(0,0,0,.35);
  --ease: cubic-bezier(.2,.8,.3,1);

  --font-sans: 'Noto Sans TC','PingFang TC','Heiti TC',system-ui,-apple-system,sans-serif;
  --font-tech: 'Saira Semi Condensed','Saira','Noto Sans TC',sans-serif;
}

/* ---- in-app webview: never auto-scale text (LINE/FB/IG/WeChat) ---- */
html {
  -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; text-size-adjust: 100%;
  font-size: 16px;             /* 鎖死 root，webview 不准改 */
  scroll-behavior: smooth;
}
body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

* { box-sizing: border-box; }

/* 橫向溢出鎖（LINE iOS：html + body 都要鎖，section 再保險一層） */
html, body { overflow-x: clip; max-width: 100vw; }
.section, .page-hero, .statbar, .cta-band { max-width: 100vw; overflow-x: clip; }

body {
  margin: 0;
  background: var(--cc-bg);
  color: var(--cc-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s var(--ease); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* tabular numerals for all stat/spec figures */
.num { font-family: var(--font-tech); font-variant-numeric: tabular-nums lining-nums; font-weight: 700; }

/* ============================ TYPOGRAPHY ============================ */
h1,h2,h3,h4 { margin: 0; line-height: 1.18; font-weight: 900; letter-spacing: -.01em; color: var(--cc-white); text-wrap: balance; }
p { margin: 0 0 1rem; text-wrap: pretty; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-tech);
  font-size: 13px; font-weight: 700; letter-spacing: .22em;
  color: var(--cc-copper-2); text-transform: uppercase;
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: linear-gradient(90deg,var(--cc-copper),transparent); }

.section { padding: clamp(64px, 8vw, 110px) 0; position: relative; }
.section--alt { background: var(--cc-bg-2); border-top: 1px solid var(--cc-line); border-bottom: 1px solid var(--cc-line); }
.section-head { max-width: 760px; margin-bottom: 52px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow::before { display: none; }
.section-head h2 { font-size: clamp(28px, 4vw, 44px); }
.section-head p { color: var(--cc-text-2); font-size: 18px; margin-top: 16px; }

.lead { font-size: 19px; color: var(--cc-text-2); line-height: 1.8; }
.text-copper { color: var(--cc-copper-2); }
.text-volt { color: var(--cc-volt); }

/* ============================ BUTTONS ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-tech); font-weight: 700; font-size: 15px; letter-spacing: .04em;
  padding: 14px 26px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: all .2s var(--ease); white-space: nowrap;
}
.btn-primary { background: linear-gradient(135deg,var(--cc-copper-2),var(--cc-copper)); color: #1a120a; box-shadow: 0 6px 20px rgba(210,138,77,.28); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(210,138,77,.42); color: #1a120a; }
.btn-ghost { background: rgba(255,255,255,.04); color: var(--cc-text); border-color: var(--cc-line-2); }
.btn-ghost:hover { border-color: var(--cc-copper); color: var(--cc-copper-2); background: var(--cc-copper-soft); }
.btn-lg { padding: 17px 34px; font-size: 16px; }

/* ============================ TOPBAR ============================ */
.topbar { background: #0a0e14; border-bottom: 1px solid var(--cc-line); font-size: 13px; color: var(--cc-text-3); }
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 38px; flex-wrap: wrap; }
.topbar .tb-info { display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--font-tech); letter-spacing: .02em; }
.topbar .tb-info span { display: inline-flex; align-items: center; gap: 7px; }
.topbar .tb-info b { color: var(--cc-text-2); font-weight: 600; }
.topbar a:hover { color: var(--cc-copper-2); }
.topbar .tb-right { display: flex; gap: 16px; align-items: center; }
.topbar .tb-lang { color: var(--cc-text-2); font-family: var(--font-tech); font-weight: 600; letter-spacing: .08em; }
.topbar .tb-lang:hover { color: var(--cc-copper-2); }

/* ============================ HEADER / NAV ============================ */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(13,18,25,.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cc-line);
}
/* in-app browser（LINE/FB/IG）不支援 backdrop-filter → 強制深色實底，避免 header 透出、漢堡糊掉 */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .header { background: #0d1219; }
}
html.is-in-app .header { background: #0d1219 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.is-in-app .nav-toggle { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.35); }
.header .container { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 18px; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-logo { height: 50px; width: auto; display: block; }
.footer .brand-logo { height: 54px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(145deg,var(--cc-steel-600),#0c1620);
  border: 1px solid var(--cc-line-2); position: relative; overflow: hidden;
}
.brand-mark svg { width: 26px; height: 26px; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text strong { font-size: 19px; font-weight: 900; letter-spacing: 2px; color: var(--cc-white); }
.brand-text small { font-family: var(--font-tech); font-size: 10px; letter-spacing: .34em; color: var(--cc-copper-2); margin-top: 5px; font-weight: 600; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a { padding: 9px 14px; font-size: 15px; font-weight: 500; color: var(--cc-text-2); border-radius: var(--radius-sm); }
.nav a:hover, .nav a.active { color: var(--cc-white); background: rgba(255,255,255,.05); }
.nav a.active { color: var(--cc-copper-2); }
.header-cta { display: flex; align-items: center; gap: 12px; }
.header-phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-tech); font-weight: 700; font-size: 17px; color: var(--cc-white); letter-spacing: .02em; }
.header-phone:hover { color: var(--cc-copper-2); }
.header-phone svg { width: 18px; height: 18px; color: var(--cc-copper); }
.lang-switch { display: flex; align-items: center; gap: 6px; padding-right: 12px; margin-right: 4px; border-right: 1px solid var(--cc-line-2); }
.lang-flag { display: inline-flex; width: 30px; height: 20px; border-radius: 3px; overflow: hidden; border: 1px solid var(--cc-line-2); opacity: .45; transition: opacity .18s var(--ease), box-shadow .18s var(--ease); }
.lang-flag svg { width: 100%; height: 100%; display: block; }
.lang-flag:hover { opacity: .85; }
.lang-flag.active { opacity: 1; border-color: var(--cc-copper); box-shadow: 0 0 0 1px var(--cc-copper); }

.nav-toggle { display: none; background: none; border: 1px solid var(--cc-line-2); border-radius: 8px; padding: 9px 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--cc-text); margin: 5px 0; border-radius: 2px; transition: .25s; }

/* ============================ HERO ============================ */
.hero { position: relative; overflow: hidden; padding: clamp(96px,13vw,168px) 0 clamp(72px,9vw,120px); }
.hero-bg { position: absolute; inset: 0; z-index: 0; background: var(--cc-bg); }
.hero-bg picture,
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-bg img { object-fit: cover; object-position: center center; filter: saturate(1.02) contrast(1.04) brightness(1.24); }
/* engineered backdrop: steel gradient + subtle grid + copper glow */
.hero-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(7,10,14,.72) 0%, rgba(7,10,14,.46) 33%, rgba(7,10,14,.08) 62%, rgba(7,10,14,0) 100%),
    radial-gradient(ellipse 54% 68% at 23% 46%, rgba(5,7,10,.52), transparent 70%),
    linear-gradient(180deg, rgba(6,8,12,.2) 0%, rgba(6,8,12,0) 44%, rgba(6,8,12,.38) 100%),
    radial-gradient(ellipse 60% 70% at 12% 90%, rgba(210,138,77,.13), transparent 58%);
}
.hero-bg::after { /* fine engineering grid */
  content: ""; position: absolute; inset: 0; z-index: 2; opacity: .32;
  background-image:
    linear-gradient(rgba(150,170,195,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,170,195,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 30%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 80% at 50% 30%, #000 30%, transparent 80%);
}
.hero .container { position: relative; z-index: 2; }
/* 首頁 hero 改用實照：背景圖 + 文字保護遮罩（內頁 page-hero 維持 CSS 背景，不受影響） */
.hero .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; z-index: 0; }
.hero .hero-bg::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(8,11,15,.94) 0%, rgba(8,11,15,.74) 36%, rgba(8,11,15,.36) 66%, rgba(8,11,15,.12) 100%),
    linear-gradient(0deg, rgba(8,11,15,.62) 0%, transparent 44%);
}
.hero .hero-bg::after { display: none; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(34px, 5.4vw, 62px); line-height: 1.08; text-shadow: 0 3px 18px rgba(0,0,0,.55); }
.hero h1 .hl { color: var(--cc-copper-2); }
.hero-sub { margin-top: 24px; font-size: clamp(16px,1.4vw,19px); color: var(--cc-text-2); line-height: 1.85; max-width: 560px; text-shadow: 0 2px 12px rgba(0,0,0,.62); }
.hero-actions { margin-top: 38px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-tags { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.hero-tag { font-family: var(--font-tech); font-size: 13px; letter-spacing: .04em; color: var(--cc-text-2); padding: 6px 13px; border: 1px solid var(--cc-line-2); border-radius: var(--radius-full); background: rgba(255,255,255,.02); }
.hero-tag b { color: var(--cc-volt); font-weight: 700; }

/* hero side: spec readout panel */
.hero-panel { background: linear-gradient(180deg,rgba(26,36,47,.8),rgba(16,22,29,.85)); border: 1px solid var(--cc-line-2); border-radius: var(--radius-lg); padding: 30px; backdrop-filter: blur(6px); box-shadow: var(--shadow-card); }
.hero-panel-h { font-family: var(--font-tech); font-size: 13px; letter-spacing: .2em; color: var(--cc-text-3); text-transform: uppercase; margin-bottom: 20px; display: flex; align-items: center; gap: 9px; }
.hero-panel-h::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cc-volt); box-shadow: 0 0 10px var(--cc-volt); }
.hero-readout { display: grid; gap: 2px; }
.hero-readout-row { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 0; border-bottom: 1px dashed var(--cc-line); }
.hero-readout-row:last-child { border-bottom: 0; }
.hero-readout-row .k { color: var(--cc-text-2); font-size: 14px; }
.hero-readout-row .v { font-family: var(--font-tech); font-weight: 800; font-size: 22px; color: var(--cc-white); }
.hero-readout-row .v small { font-size: 13px; color: var(--cc-copper-2); font-weight: 600; margin-left: 3px; }

/* ============================ STAT BAR ============================ */
.statbar { border-top: 1px solid var(--cc-line); border-bottom: 1px solid var(--cc-line); background: var(--cc-bg-2); }
.statbar-grid { display: grid; grid-template-columns: repeat(5,1fr); }
.stat { padding: 40px 24px; text-align: center; border-right: 1px solid var(--cc-line); }
.stat:last-child { border-right: 0; }
.stat .stat-n { font-family: var(--font-tech); font-weight: 800; font-size: clamp(30px,3.4vw,44px); color: var(--cc-white); line-height: 1; letter-spacing: .01em; }
.stat .stat-n .u { color: var(--cc-copper-2); font-size: .5em; margin-left: 3px; }
.stat .stat-l { margin-top: 12px; color: var(--cc-text-3); font-size: 14px; letter-spacing: .03em; }

/* ============================ GENERIC CARDS GRID ============================ */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }

.card {
  background: var(--cc-surface); border: 1px solid var(--cc-line);
  border-radius: var(--radius-md); padding: 30px; position: relative;
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s;
}
.card:hover { border-color: var(--cc-copper); transform: translateY(-4px); background: var(--cc-surface-2); }
.card .card-ico { width: 50px; height: 50px; border-radius: 11px; display: grid; place-items: center; background: var(--cc-copper-soft); border: 1px solid rgba(210,138,77,.3); margin-bottom: 20px; }
.card .card-ico svg { width: 26px; height: 26px; color: var(--cc-copper-2); }
.card h3 { font-size: 21px; margin-bottom: 12px; }
.card p { color: var(--cc-text-2); font-size: 15px; margin: 0; }
.card ul { margin: 14px 0 0; padding: 0; list-style: none; }
.card ul li { position: relative; padding: 6px 0 6px 22px; color: var(--cc-text-2); font-size: 15px; border-top: 1px solid var(--cc-line); }
.card ul li:first-child { border-top: 0; }
.card ul li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 8px; height: 8px; border-right: 2px solid var(--cc-copper); border-bottom: 2px solid var(--cc-copper); transform: rotate(-45deg); }

/* ============================ SPEC CARDS (capability moat) ============================ */
.spec { background: linear-gradient(180deg,var(--cc-surface),var(--cc-bg-2)); border: 1px solid var(--cc-line); border-radius: var(--radius-md); padding: 26px; transition: border-color .25s, transform .25s; }
.spec:hover { border-color: var(--cc-volt); transform: translateY(-3px); }
.spec-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.spec-tag { font-family: var(--font-tech); font-size: 11px; letter-spacing: .16em; color: var(--cc-volt); text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--cc-volt-soft); border-radius: 5px; background: var(--cc-volt-soft); white-space: nowrap; }
.spec h3 { font-size: 18px; line-height: 1.35; }
.spec-figure { font-family: var(--font-tech); font-weight: 800; font-size: 28px; color: var(--cc-white); margin: 4px 0 2px; }
.spec-figure .u { color: var(--cc-copper-2); font-size: .55em; }
.spec p { color: var(--cc-text-2); font-size: 14px; margin: 8px 0 0; }
.spec-origin { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12px; color: var(--cc-text-3); font-family: var(--font-tech); letter-spacing: .04em; }
.spec-origin::before { content: "▸"; color: var(--cc-copper); }

/* ============================ CASE CARDS ============================ */
.case { background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--radius-md); overflow: hidden; transition: border-color .25s, transform .25s; }
.case:hover { border-color: var(--cc-copper); transform: translateY(-4px); }
.case-fig { position: relative; aspect-ratio: 16/10; background: linear-gradient(135deg,var(--cc-steel-800),#0a0f15); display: grid; place-items: center; overflow: hidden; }
.case-fig picture,
.case-fig img { position: absolute; inset: 0; width: 100%; height: 100%; }
.case-fig img { object-fit: cover; object-position: center center; filter: saturate(.96) contrast(1.04) brightness(.96); transition: transform .35s var(--ease), filter .35s var(--ease); }
.case:hover .case-fig img { transform: scale(1.035); filter: saturate(1) contrast(1.07) brightness(1.02); }
.case-fig--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(7,10,14,.03) 0%, rgba(7,10,14,.08) 45%, rgba(7,10,14,.72) 100%),
    radial-gradient(ellipse 70% 70% at 50% 35%, transparent 0%, rgba(7,10,14,.12) 100%);
  pointer-events: none;
}
.case-fig--home::after {
  background:
    linear-gradient(180deg, rgba(7,10,14,0) 0%, rgba(7,10,14,0) 64%, rgba(7,10,14,.14) 100%),
    radial-gradient(ellipse 80% 75% at 50% 34%, transparent 0%, rgba(7,10,14,.02) 100%);
}
.case-fig--home img { filter: saturate(1.05) contrast(1.02) brightness(1.28); }
.case:hover .case-fig--home img { filter: saturate(1.08) contrast(1.04) brightness(1.32); }
.case-fig--home .case-spec {
  left: 16px; right: auto; bottom: 16px;
  width: max-content;
  max-width: calc(100% - 32px);
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(8,11,15,.58);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(5px);
}
.case-fig--home .case-spec .num { text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.case-fig--detail::after {
  background:
    linear-gradient(180deg, rgba(7,10,14,.06) 0%, rgba(7,10,14,.12) 45%, rgba(7,10,14,.78) 100%),
    radial-gradient(ellipse 70% 70% at 50% 35%, transparent 0%, rgba(7,10,14,.16) 100%);
}
.case-fig svg { width: 64px; height: 64px; color: rgba(210,138,77,.4); }
.case-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .4s var(--ease); }
.case:hover .case-fig img { transform: scale(1.04); }
.case-fig .case-spec { z-index: 1; }
.case-fig .case-spec { position: absolute; left: 0; bottom: 0; right: 0; z-index: 2; padding: 16px 18px; background: linear-gradient(0deg,rgba(8,11,15,.92),transparent); }
.case-fig .case-spec .num { font-size: 26px; color: var(--cc-copper-2); }
.case-body { padding: 22px 24px 26px; }
.case-body h3 { font-size: 19px; margin-bottom: 8px; }
.case-body p { color: var(--cc-text-2); font-size: 14px; margin: 0; }
.case-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.case-meta span { font-family: var(--font-tech); font-size: 12px; letter-spacing: .04em; color: var(--cc-text-3); padding: 4px 10px; border: 1px solid var(--cc-line); border-radius: var(--radius-full); }

/* ============================ CUSTOMER WALL ============================ */
.cust-group { margin-bottom: 36px; }
.cust-group h4 { font-family: var(--font-tech); font-size: 14px; letter-spacing: .16em; color: var(--cc-copper-2); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--cc-line); text-transform: uppercase; }
.cust-list { display: flex; flex-wrap: wrap; gap: 10px; }
.cust-list span { font-size: 15px; color: var(--cc-text); padding: 9px 16px; background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--radius-sm); transition: .2s; }
.cust-list span:hover { border-color: var(--cc-line-2); color: var(--cc-white); }

/* ============================ TRUST / BADGES ============================ */
.trust-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.trust { display: flex; gap: 18px; align-items: flex-start; padding: 28px; background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--radius-md); }
.trust .t-ico { width: 48px; height: 48px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--cc-volt-soft); border: 1px solid rgba(73,201,224,.3); }
.trust .t-ico svg { width: 26px; height: 26px; color: var(--cc-volt); }
.trust h3 { font-size: 18px; margin-bottom: 6px; }
.trust p { font-size: 14px; color: var(--cc-text-2); margin: 0; }

/* ============================ SPLIT / FEATURE ROWS ============================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split-media { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--cc-line-2); position: relative; background: var(--cc-steel-800); aspect-ratio: 4/3; }
.split-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) contrast(1.05) brightness(.82); }
.split-media .frame-label { position: absolute; left: 14px; bottom: 14px; font-family: var(--font-tech); font-size: 12px; letter-spacing: .14em; color: var(--cc-text); background: rgba(8,11,15,.75); padding: 6px 12px; border-radius: 6px; border: 1px solid var(--cc-line-2); }

/* timeline (沿革) */
.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg,var(--cc-copper),transparent); }
.tl-item { position: relative; padding: 0 0 28px; }
.tl-item::before { content: ""; position: absolute; left: -30px; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--cc-bg); border: 3px solid var(--cc-copper); }
.tl-item .tl-y { font-family: var(--font-tech); font-weight: 800; font-size: 18px; color: var(--cc-copper-2); }
.tl-item p { margin: 4px 0 0; color: var(--cc-text-2); }

/* ============================ CTA BAND ============================ */
.cta-band { position: relative; overflow: hidden; background: radial-gradient(ellipse 50% 80% at 80% 50%, rgba(210,138,77,.16), transparent 60%), linear-gradient(135deg,#193045,#10161f); border-top: 1px solid var(--cc-line-2); border-bottom: 1px solid var(--cc-line-2); }
.cta-band::before { content: ""; position: absolute; inset: 0; background: url("../../images/logo/chanchang-icon-transparent.png") no-repeat right -54px center; background-size: 360px auto; opacity: .07; pointer-events: none; }
.cta-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 36px; padding: clamp(48px,6vw,76px) 0; flex-wrap: wrap; }
.cta-inner h2 { font-size: clamp(26px,3.4vw,40px); }
.cta-inner p { color: var(--cc-text-2); margin-top: 12px; max-width: 540px; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============================ PAGE HERO (inner pages) ============================ */
.page-hero { position: relative; overflow: hidden; padding: clamp(78px,10vw,128px) 0 clamp(48px,6vw,72px); border-bottom: 1px solid var(--cc-line); }
.page-hero .hero-bg::after { opacity: .35; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(30px,4.6vw,52px); }
.page-hero p { margin-top: 18px; font-size: 18px; color: var(--cc-text-2); max-width: 640px; }
.crumbs { font-family: var(--font-tech); font-size: 13px; letter-spacing: .04em; color: var(--cc-text-3); margin-bottom: 18px; }
.crumbs a:hover { color: var(--cc-copper-2); }
.crumbs span { color: var(--cc-copper-2); }

/* ============================ CONTACT ============================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.info-row { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--cc-line); }
.info-row:last-child { border-bottom: 0; }
.info-row .i-ico { width: 44px; height: 44px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--cc-copper-soft); border: 1px solid rgba(210,138,77,.3); }
.info-row .i-ico svg { width: 22px; height: 22px; color: var(--cc-copper-2); }
.info-row .i-k { font-family: var(--font-tech); font-size: 12px; letter-spacing: .14em; color: var(--cc-text-3); text-transform: uppercase; }
.info-row .i-v { font-size: 18px; color: var(--cc-white); margin-top: 3px; }
.info-row .i-v.tel { font-family: var(--font-tech); font-weight: 700; letter-spacing: .02em; }
.map-embed { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--cc-line-2); min-height: 360px; background: var(--cc-steel-800); }
.map-embed iframe { width: 100%; height: 100%; min-height: 360px; border: 0; filter: grayscale(.4) invert(.92) hue-rotate(180deg) contrast(.95); }

/* ============================ FOOTER ============================ */
.footer { background: #0b0f16; border-top: 1px solid var(--cc-line-2); padding: 64px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.footer .brand { margin-bottom: 18px; }
.footer-about { color: var(--cc-text-3); font-size: 14px; line-height: 1.8; max-width: 320px; }
.footer h5 { font-family: var(--font-tech); font-size: 13px; letter-spacing: .16em; color: var(--cc-text-2); text-transform: uppercase; margin: 0 0 16px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-links a { color: var(--cc-text-3); font-size: 14px; }
.footer-links a:hover { color: var(--cc-copper-2); }
.footer-contact { color: var(--cc-text-3); font-size: 14px; line-height: 2; }
.footer-contact b { color: var(--cc-text-2); font-weight: 600; }
.footer-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--cc-line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--cc-text-3); font-size: 13px; }
.footer-bottom .num { color: var(--cc-text-3); }

/* ============================ REVEAL ANIM ============================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ============================ FLOATING CALL (mobile) ============================ */
.call-fab { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: none; align-items: center; gap: 8px; background: linear-gradient(135deg,var(--cc-copper-2),var(--cc-copper)); color: #1a120a; font-family: var(--font-tech); font-weight: 700; padding: 13px 18px; border-radius: var(--radius-full); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.call-fab svg { width: 18px; height: 18px; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-panel { max-width: 460px; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .statbar-grid { grid-template-columns: repeat(3,1fr); }
  .stat:nth-child(3) { border-right: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid { grid-template-columns: 1fr; }
}

/* ---- in-app webview hard pins (LINE / FB / IG) : load-bearing, keep last ---- */
@media (max-width: 768px) {
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 2px; background: #161e29;
    padding: 14px; border-bottom: 1px solid var(--cc-line);
    box-shadow: 0 14px 30px rgba(0,0,0,.5);
  }
  .nav.is-open { display: flex; }
  .nav a { font-size: 16px; padding: 13px 14px; }
  .header .container { position: relative; }
  .nav-toggle { display: block; }
  .header-phone span { display: none; }
  .lang-switch { gap: 5px; padding-right: 9px; }
  .lang-flag { width: 26px; height: 17px; }
  .brand-logo { height: 40px; }
  .footer .brand-logo { height: 44px; }

  .topbar .tb-info { gap: 14px; font-size: 11px; }
  .topbar .tb-info .hide-sm { display: none; }

  /* defeat clamp() vw scaling */
  .hero h1 { font-size: 32px !important; line-height: 1.16; }
  /* hero 規格面板手機溢出修正（值被裁掉） */
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid > * { min-width: 0; }
  .hero-panel { max-width: 100% !important; width: 100%; padding: 20px 16px; }
  .hero-readout-row { gap: 10px; }
  .hero-readout-row .k { font-size: 13px; }
  .hero-readout-row .v { font-size: 17px; }
  .hero-readout-row .v small { font-size: 11px; }
  .page-hero h1 { font-size: 28px !important; }
  .section-head h2, .cta-inner h2 { font-size: 24px !important; }
  h3 { font-size: 18px !important; }
  body { font-size: 15px; }
  p, li { font-size: 15px; line-height: 1.75; }
  .lead { font-size: 16px !important; }

  .statbar-grid { grid-template-columns: 1fr 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--cc-line); }
  .stat:nth-child(odd) { border-right: 1px solid var(--cc-line); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-inner { flex-direction: column; align-items: flex-start; }

  input, select, textarea { font-size: 16px !important; }  /* no iOS zoom */
  .btn { min-height: 48px; }
  .call-fab { display: inline-flex; }
  .container { padding: 0 20px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 28px !important; }
  .brand-text small { display: none; }
  .container { padding: 0 16px; }
}