/* =============================================================
   首頁 V7 —「整合版 Flagship」
   骨架 = V5 旅程儀表；換裝：
   · Hero 後「Tier 1 信任數據帶」(深)
   · 產品線改用 tunnel 三軸光譜手風琴卡 (深)
   · Global 加高雄製造據點 · 客戶 logo 反白免白底
   · Footer 用 V4 JETOPTO 大字 marquee
   依賴：hero-review + hero-a + hero-a2 + home-base + home-v5 + nav-plus
   ============================================================= */

/* ===================================================================
   Tier 1 信任數據帶（深，承接 hero 尾）
   =================================================================== */
.trust-bar {
  position: relative;
  background: #0b0f15;
  padding: clamp(72px, 11vh, 130px) var(--gutter);
  overflow: hidden;
}
/* 頂部三色細線 */
.trust-bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--ent), var(--ckpt), var(--safe));
  background-size: 200% 100%;
  animation: ha-flow 8s linear infinite;
}
/* 極淡工程格線 */
.trust-bar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(96, 165, 216, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 216, .05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000, transparent 78%);
}
.trust-inner { position: relative; z-index: 2; max-width: 1440px; margin-inline: auto; }
.trust-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
.trust-bar .sec-no { color: rgba(226, 236, 248, .42); }
.trust-bar .sec-no::after { background: rgba(255, 255, 255, .14); }
.trust-h {
  margin-top: 20px;
  font-size: clamp(26px, 3.6vw, 50px); font-weight: 900; line-height: 1.16; letter-spacing: -.015em;
  color: #eef3fa;
}
.trust-h em { font-style: normal; background: linear-gradient(100deg, var(--ent), var(--ckpt) 55%, var(--safe)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.trust-tagline {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(216, 228, 244, .5); text-align: right; padding-bottom: 6px; white-space: nowrap;
}

.trust-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-top: clamp(38px, 6vh, 64px);
}
.tcard {
  --t-rgb: var(--ckpt-rgb);
  position: relative; overflow: hidden;
  padding: 26px 24px 24px;
  border-radius: 5px;   /* 內容卡統一 5px */
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  transition: transform .5s var(--ease-out), border-color .4s, background .4s;
}
.tcard::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: rgb(var(--t-rgb)); transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.tcard:hover { transform: translateY(-6px); border-color: rgba(var(--t-rgb), .5); background: rgba(255, 255, 255, .07); }
.tcard:hover::before { transform: scaleX(1); }
.tcard .tc-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgb(var(--t-rgb)); }
.tcard .tc-v {
  margin-top: 14px;
  font-size: clamp(28px, 3vw, 44px); font-weight: 900; letter-spacing: -.01em; line-height: 1;
  color: #f0f4fa;
}
.tcard .tc-v small { font-size: .42em; font-weight: 700; letter-spacing: .04em; margin-left: 5px; color: rgba(226, 236, 248, .6); }
.tcard .tc-d { margin-top: 12px; font-size: 13px; line-height: 1.75; color: rgba(216, 228, 244, .58); }
.tcard .tc-ico { position: absolute; right: 18px; top: 20px; width: 24px; height: 24px; opacity: .5; }
.tcard .tc-ico svg { width: 100%; height: 100%; stroke: rgb(var(--t-rgb)); fill: none; stroke-width: 1.6; }
@media (max-width: 900px) { .trust-grid { grid-template-columns: 1fr 1fr; } .trust-head { grid-template-columns: 1fr; } .trust-tagline { text-align: left; } }
@media (max-width: 520px) { .trust-grid { grid-template-columns: 1fr; } }

/* ===================================================================
   產品線：三軸光譜手風琴（移植自 tunnel，深）
   =================================================================== */
.spectrum-sec { background: #070b12; }
.spectrum-sec .sec-no { color: rgba(226, 236, 248, .42); }
.spectrum-sec .sec-no::after { background: rgba(255, 255, 255, .14); }
.spectrum-sec .sec-h { color: #eef3fa; font-size: clamp(26px, 3.6vw, 50px); }
.spectrum-sec .sec-sub { color: rgba(216, 228, 244, .58); }

.spectrum-deck { display: flex; gap: 18px; margin-top: clamp(40px, 6vh, 60px); min-height: 560px; }
.spec-card {
  --c-rgb: var(--ckpt-rgb);
  position: relative; flex: 1; min-width: 0; overflow: hidden;
  border-radius: 26px;  /* 產品線大型影像卡:維持原始設計柔度(2026-07-20 決議) */
  border: 1px solid rgba(255, 255, 255, .09);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 32px clamp(22px, 2.4vw, 38px) 36px;
  isolation: isolate;
  text-decoration: none;
  transition: flex 1s var(--ease-out), border-color .5s;
  background: #0e131b;
}
.spec-card:hover { border-color: rgba(var(--c-rgb), .55); }
@media (min-width: 901px) {
  .spectrum-deck:hover .spec-card { flex: .82; }
  .spectrum-deck .spec-card:hover { flex: 1.9; }
}
.spec-media { position: absolute; inset: 0; z-index: -2; }
.spec-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) brightness(.72);
  transform: scale(1.08);
  transition: transform 1.4s var(--ease-out), filter .8s;
}
.spec-card:hover .spec-media img { transform: scale(1.16); filter: saturate(1.05) brightness(.82); }
.spec-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(4,7,13,.1) 30%, rgba(4,7,13,.9) 82%),
    radial-gradient(120% 70% at 50% 115%, rgba(var(--c-rgb), .4), transparent 62%);
}
.spec-no {
  position: absolute; top: 26px; left: 28px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .3em;
  color: rgb(var(--c-rgb));
  display: flex; align-items: center; gap: 12px;
}
.spec-no::after { content: ""; width: 40px; height: 1px; background: linear-gradient(90deg, rgb(var(--c-rgb)), transparent); }
.spec-en {
  position: absolute; top: 50px; left: 26px;
  font-size: clamp(24px, 2.6vw, 40px); font-weight: 900; letter-spacing: .01em;
  color: transparent; -webkit-text-stroke: 1px rgba(var(--c-rgb), .5);
  text-transform: uppercase; white-space: nowrap;
  opacity: .8;
}
.spec-card h3 { margin: 0; font-size: clamp(24px, 2.2vw, 34px); font-weight: 800; color: #f2f6fc; }
.spec-card h3::after {
  content: ""; display: block; width: 46px; height: 4px; border-radius: 4px;
  background: rgb(var(--c-rgb)); margin-top: 14px;
  box-shadow: 0 0 16px 2px rgba(var(--c-rgb), .6);
  transition: width .7s var(--ease-out);
}
.spec-card:hover h3::after { width: 110px; }
.spec-card p {
  margin: 16px 0 0; max-width: 380px;
  color: rgba(238, 243, 251, .72); font-size: 14.5px; line-height: 1.85;
}
.spec-go {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 20px;
  font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: rgb(var(--c-rgb));
}
.spec-go .arr { transition: transform .4s var(--ease-out); }
.spec-card:hover .spec-go .arr { transform: translateX(6px); }
@media (max-width: 900px) {
  .spectrum-deck { flex-direction: column; min-height: 0; }
  .spec-card { min-height: 340px; }
  .spec-en { top: 54px; }
}

/* ===================================================================
   Hero：移除與信任帶重複的右緣讀數（IATF/年/產品線/OEM）
   =================================================================== */
.home-v7 .ha-stage .readout { display: none; }

/* Hero 文案：縮小標題並加高疊放軌，避免長文案蓋到 CTA */
.home-v7 .ha-slidecopy .display { font-size: clamp(32px, 4.6vw, 66px); }
.home-v7 .ha-copytrack { min-height: clamp(250px, 34vh, 400px); }

/* 宣言：避免最後一行孤字 */
.home-v7 .manifesto { text-wrap: pretty; }

/* ===================================================================
   Global 客戶帶：融入深色區 — 無面板、logo 反白、左右邊緣霧化
   =================================================================== */
.home-v7 .globe3d-sec .clients-belt {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: clamp(30px, 4.6vh, 46px) 0 clamp(20px, 3vh, 30px);
}
.home-v7 .globe3d-sec .clients-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.home-v7 .globe3d-sec .clients-track img {
  background: none; padding: 0; border-radius: 0;
  height: clamp(30px, 3.4vw, 46px); object-fit: contain;
  filter: invert(1) grayscale(1) brightness(1.5) contrast(1.05);  /* 反白且保留 logo 內部明暗 */
  mix-blend-mode: screen;
  opacity: .55;
  transition: opacity .4s, transform .4s;
}
.home-v7 .globe3d-sec .clients-track img:hover { opacity: .95; transform: scale(1.08); }
/* 客戶帶標題（深底上用淡光字） */
.clients-cap {
  text-align: center; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(226, 236, 248, .45);
  margin-bottom: clamp(18px, 2.6vh, 30px);
}

/* ===================================================================
   認證牆（Chapter 02 下方，取代重複的 stat 列）
   =================================================================== */
.cert-wall { margin-top: clamp(52px, 8vh, 92px); }
.cert-head { max-width: 720px; }
.cert-lede { margin-top: 12px; color: rgba(16, 22, 30, .58); font-size: 15px; line-height: 1.8; }
.cert-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: clamp(28px, 4vh, 44px);
}
.cert-card {
  --k-rgb: var(--ckpt-rgb);
  position: relative; overflow: hidden;
  padding: 22px 22px 24px;
  border-radius: 5px;   /* 內容卡統一 5px */
  background: #fff;
  border: 1px solid rgba(16, 22, 30, .08);
  box-shadow: 0 12px 34px rgba(16, 22, 30, .06);
  transition: transform .5s var(--ease-out), box-shadow .5s, border-color .4s;
}
.cert-card::before {
  content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%;
  background: rgb(var(--k-rgb)); transform: scaleY(0); transform-origin: top;
  transition: transform .55s var(--ease-out);
}
.cert-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--k-rgb), .5);
  box-shadow: 0 26px 60px rgba(16, 22, 30, .13), 0 0 0 1px rgba(var(--k-rgb), .2);
}
.cert-card:hover::before { transform: scaleY(1); }
.cert-cat {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(16, 22, 30, .42);
  transition: color .4s;
}
.cert-card:hover .cert-cat, .cert-card.lit .cert-cat { color: rgb(var(--k-rgb)); }
.cert-id {
  display: block; margin-top: 12px;
  font-size: clamp(21px, 2vw, 28px); font-weight: 900; letter-spacing: -.01em; color: #10161e;
}
.cert-lv { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 700; color: rgba(16, 22, 30, .7); }
.cert-card p { margin: 12px 0 0; font-size: 12.5px; line-height: 1.7; color: rgba(16, 22, 30, .52); }
.cert-wide { grid-column: span 2; }
@media (max-width: 900px) { .cert-grid { grid-template-columns: 1fr 1fr; } .cert-wide { grid-column: span 2; } }
@media (max-width: 520px) { .cert-grid { grid-template-columns: 1fr; } .cert-wide { grid-column: span 1; } }

/* ---------- 機構設計儀表卡：爆炸圖 + 尺寸標線（取代齒輪） ---------- */
.viz-exploded { width: 74%; aspect-ratio: 16 / 10; display: grid; place-items: center; }
.viz-exploded svg { width: 100%; height: 100%; overflow: visible; }
.viz-exploded path, .viz-exploded circle {
  fill: none; stroke: rgba(139, 200, 245, .85); stroke-width: 2;
  vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round;
}
.viz-exploded .xp-guide path { stroke-width: 1; stroke-dasharray: 3 6; opacity: .35; }
.viz-exploded .xp-dim path { stroke-width: 1.4; opacity: .55; }
.viz-exploded .xp-p1 { animation: xp-float1 4.6s ease-in-out infinite; }
.viz-exploded .xp-p3 { animation: xp-float3 4.6s ease-in-out infinite; }
.viz-exploded .xp-p2 circle { animation: xp-hole 4.6s ease-in-out infinite; transform-origin: 110px 66px; }
@keyframes xp-float1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }
@keyframes xp-float3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(13px); } }
@keyframes xp-hole { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.25); opacity: 1; } }

/* ---------- 認證牆：雷射掃描驗證動效（JS 注入 .cert-beam / .cert-seal） ---------- */
.cert-grid { position: relative; }
.cert-beam {
  position: absolute; top: -16px; bottom: -16px; left: 0; width: 3px;
  background: linear-gradient(180deg, rgb(var(--ent-rgb)), rgb(var(--ckpt-rgb)), rgb(var(--safe-rgb)));
  border-radius: 2px;
  box-shadow: 0 0 18px 2px rgba(56, 189, 248, .55), 0 0 60px 12px rgba(56, 189, 248, .16);
  opacity: 0; pointer-events: none; z-index: 3;
}
.cert-grid.scanning .cert-beam { opacity: 1; }
.cert-grid.scanned .cert-beam { opacity: 0; transition: opacity .5s; }

/* JS 啟用後（.pre）：掃描前的卡先沉睡成單色；掃描結束（.scanned）回到中性常態 */
.cert-card .cert-cat, .cert-card .cert-id, .cert-card .cert-lv { transition: color .5s; }
.cert-grid.pre .cert-card:not(.seen) .cert-cat { color: rgba(16, 22, 30, .3); }
.cert-grid.pre .cert-card:not(.seen) .cert-id { color: rgba(16, 22, 30, .38); }
.cert-grid.pre .cert-card:not(.seen) .cert-lv { color: rgba(16, 22, 30, .35); }

/* 光束掃過 = 短暫驗證脈衝：色條、閃光、章一起亮一下,隨後退回中性；hover 再現 */
.cert-card.lit::before, .cert-card:hover::before { transform: scaleY(1); }
.cert-card.lit { animation: certFlash .7s var(--ease-out); }
@keyframes certFlash {
  0%   { box-shadow: 0 0 0 1px rgba(var(--k-rgb), .6), 0 0 36px rgba(var(--k-rgb), .35); }
  100% { box-shadow: 0 12px 34px rgba(16, 22, 30, .06); }
}
.cert-seal {
  position: absolute; top: 18px; right: 18px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em;
  color: rgb(var(--k-rgb)); border: 1px solid rgba(var(--k-rgb), .45);
  border-radius: 999px; padding: 4px 9px;
  opacity: 0; transform: scale(1.7) rotate(-9deg);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.cert-card.lit .cert-seal, .cert-card:hover .cert-seal { opacity: 1; transform: none; }

/* ===================================================================
   Footer：V4 JETOPTO 大字 marquee（深）
   =================================================================== */
.home-v7 .site-footer { background: #0b0f15; border-top: 0; padding-top: 0; }
.foot-strip {
  position: relative; overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding-block: clamp(22px, 4vh, 44px);
}
.foot-strip::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--ent), var(--ckpt), var(--safe), var(--ent));
  background-size: 200% 100%;
  animation: ha-flow 8s linear infinite;
}
.foot-track {
  display: flex; gap: 60px; width: max-content;
  animation: cm-flow 30s linear infinite;
  white-space: nowrap;
  font-size: clamp(56px, 8.5vw, 130px); font-weight: 900; letter-spacing: -.02em; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(226, 236, 248, .28);
}
.foot-track b { font-weight: 900; color: rgba(226, 236, 248, .9); -webkit-text-stroke: 0; }
.home-v7 .footer-grid { padding-top: clamp(44px, 6vh, 64px); }
.home-v7 .footer-brand img { filter: brightness(0) invert(1); }
.home-v7 .footer-brand p { color: rgba(216, 228, 244, .5); }
.home-v7 .footer-col h4 { color: rgba(216, 228, 244, .4); }
.home-v7 .footer-col a { color: rgba(216, 228, 244, .62); }
.home-v7 .footer-col a:hover { color: #fff; }
.home-v7 .footer-bottom { border-top-color: rgba(255, 255, 255, .08); color: rgba(216, 228, 244, .4); }