/* =========================================================
   General Energy Technology — 共用樣式（淺色科技風 2026）
   與 Tailwind CDN 搭配，複元件效果集中於此
   ========================================================= */

:root {
  --brand-900: #0b1b45;
  --brand-800: #10245f;
  --brand-700: #15296b;
  --brand-600: #1b46c5;
  --brand-500: #2f6bf0;
  --brand-400: #5b8df7;
  --accent: #22b8e8;
  --ink: #0f1f4d;
  --body: #3d4a6b;
  --muted: #64748b;
  --line: #e4ebf8;
  --bg: #f5f8ff;
  --tint: #eef3ff;
  --shadow-sm: 0 2px 10px rgba(16, 36, 95, .06);
  --shadow-md: 0 10px 30px -12px rgba(16, 36, 95, .18);
  --shadow-lg: 0 24px 60px -20px rgba(16, 36, 95, .28);
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans TC', 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--body);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
html[lang="en"] body { font-family: 'Inter', 'Noto Sans TC', system-ui, sans-serif; }

h1, h2, h3, h4, h5 { color: var(--ink); letter-spacing: -.01em; }

::selection { background: rgba(47, 107, 240, .18); }

/* 捲軸（細緻） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c6d4f2; border-radius: 999px; border: 2px solid #fff; }
::-webkit-scrollbar-track { background: #f1f5fd; }

/* ---------- 品牌小標 / 標題 ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .14em;
  color: var(--brand-600); text-transform: uppercase;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-500), var(--accent));
}
.section-eyebrow { justify-content: center; }
.section-title { font-weight: 800; color: var(--ink); line-height: 1.25; }
.grad-text {
  background: linear-gradient(92deg, var(--brand-600), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- 導航列 ---------- */
.site-nav {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.site-nav.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -14px rgba(16, 36, 95, .25);
  background: rgba(255, 255, 255, .94);
}
.nav-link {
  position: relative; font-weight: 700; color: #3a4a78;
  padding: .55rem .9rem; border-radius: .6rem; font-size: .96rem;
  transition: color .2s ease, background .2s ease;
}
.brand-mark { display: block; height: 44px; width: auto; }
.brand-name { font-size: 1.06rem; font-weight: 800; color: var(--brand-900); letter-spacing: .01em; white-space: nowrap; }
.brand-sub { margin-top: .34rem; font-size: .62rem; font-weight: 700; letter-spacing: .13em; color: #8290b6; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 639px) { .brand-mark { height: 40px; } }
.nav-link:hover { color: var(--brand-700); background: var(--tint); }
.nav-link.active { color: var(--brand-700); }
.nav-link.active::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .18rem;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-500), var(--accent));
}
.lang-switch {
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 700; font-size: .85rem; color: var(--brand-700);
  border: 1px solid #cdddfb; background: #fff; border-radius: 999px;
  padding: .42rem .8rem; transition: all .2s ease; white-space: nowrap;
}
.lang-switch:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; box-shadow: var(--shadow-sm); }

/* ---------- 首屏 Hero（波形主視覺） ---------- */
.hero-wave {
  position: relative;
  background-image:
    linear-gradient(100deg, #ffffff 0%, rgba(255,255,255,.97) 28%, rgba(255,255,255,.72) 48%, rgba(255,255,255,.12) 70%, rgba(255,255,255,0) 88%),
    url('hero-wave.jpg');
  background-size: cover; background-position: center right; background-repeat: no-repeat;
}
.hero-wave::after { /* 底部柔和淡出接白底 */
  content: ""; position: absolute; inset: auto 0 0 0; height: 90px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  pointer-events: none;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.8); border: 1px solid #d4e1fb; color: var(--brand-700);
  border-radius: 999px; padding: .4rem .9rem; font-size: .82rem; font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.hero-title { font-weight: 800; color: var(--brand-900); line-height: 1.12; letter-spacing: -.02em; }

/* 子頁頁頭（共用同一張波形，淡處理） */
.page-header {
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(245,248,255,.92), rgba(245,248,255,.78)),
    url('hero-wave.jpg');
  background-size: cover; background-position: center 30%;
  border-bottom: 1px solid var(--line);
}

/* ---------- 按鈕 ---------- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: linear-gradient(92deg, var(--brand-600), var(--brand-500));
  color: #fff; font-weight: 700; border-radius: 999px;
  padding: .85rem 1.7rem; box-shadow: 0 12px 26px -10px rgba(27, 70, 197, .6);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 18px 34px -12px rgba(27, 70, 197, .7); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: #fff; color: var(--brand-700); font-weight: 700; border-radius: 999px;
  padding: .85rem 1.7rem; border: 1.5px solid #cdddfb;
  transition: all .2s ease;
}
.btn-ghost:hover { border-color: var(--brand-500); background: var(--tint); transform: translateY(-2px); }

/* ---------- 卡片 ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 1.15rem;
  box-shadow: var(--shadow-sm); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: #d3e0fb; }
.icon-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.2rem; height: 3.2rem; border-radius: .9rem;
  background: linear-gradient(140deg, #eaf1ff, #dde9ff); color: var(--brand-600);
  box-shadow: inset 0 0 0 1px #dbe6fd;
}
.section-band { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------- 風險警示卡（首頁六大問題：橘=故障/安全，黃=成本/浪費） ---------- */
.risk-card {
  position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 1.05rem;
  padding: 1.6rem 1.5rem; border-radius: 1.15rem; background: #fff;
  border: 1px solid var(--line); border-left: 4px solid #ef5d36;
  box-shadow: 0 12px 30px -22px rgba(30, 50, 110, .4);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.risk-card::before {
  content: ""; position: absolute; right: -36px; top: -36px; width: 108px; height: 108px;
  border-radius: 50%; background: radial-gradient(circle, rgba(238, 90, 52, .14), transparent 70%);
}
.risk-card:hover { transform: translateY(-5px); box-shadow: 0 20px 42px -22px rgba(30, 50, 110, .5); }
.risk-chip {
  position: relative; z-index: 1; flex: 0 0 auto; width: 3.1rem; height: 3.1rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, #fb8a4c 0%, #ee4444 100%);
  box-shadow: 0 9px 18px -8px rgba(238, 68, 68, .55), inset 0 1px 0 rgba(255,255,255,.3);
}
.risk-chip svg { color: #fff; }
.risk-title { font-size: 1.08rem; font-weight: 800; color: #1f2a44; line-height: 1.4; }
.risk-desc { margin-top: .45rem; font-size: .95rem; line-height: 1.78; color: #51607c; }
/* 故障 / 安全風險：橘紅 */
.risk-danger {
  background: linear-gradient(155deg, #fff3ee 0%, #fffdfb 64%);
  border-color: #f6d4c4; border-left-color: #ef5d36;
}
.risk-danger:hover { border-color: #f2b08f; }
/* 成本 / 浪費：黃（琥珀） */
.risk-cost {
  background: linear-gradient(155deg, #fffbe7 0%, #fffefb 64%);
  border-color: #f1e2b4; border-left-color: #ec9b12;
}
.risk-cost::before { background: radial-gradient(circle, rgba(245, 190, 40, .22), transparent 70%); }
.risk-cost .risk-chip {
  background: linear-gradient(135deg, #f8c64d 0%, #ec8f10 100%);
  box-shadow: 0 9px 18px -8px rgba(236, 143, 16, .5), inset 0 1px 0 rgba(255,255,255,.35);
}
.risk-cost:hover { border-color: #eccb7e; }

/* ---------- 解決方案卡（首頁三大對策，藍綠＝問題已解決） ---------- */
.sol-card {
  position: relative; text-align: center; padding: 2.1rem 1.7rem; border-radius: 1.15rem;
  background: linear-gradient(170deg, #eefaf6 0%, #ffffff 72%);
  border: 1px solid #d2ece4; border-top: 3px solid #14b8a6;
  box-shadow: 0 14px 34px -24px rgba(15, 157, 107, .55);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.sol-card:hover { transform: translateY(-5px); border-color: #aedfd2; box-shadow: 0 22px 44px -24px rgba(15, 157, 107, .6); }
.sol-ico { display: block; width: 84px; height: 84px; margin: 0 auto; }
.sol-title { margin-top: 1.1rem; font-size: 1.22rem; font-weight: 800; color: #123a36; line-height: 1.4; }
.sol-desc { margin-top: .6rem; font-size: 1.02rem; line-height: 1.8; color: #4a5b6b; }

/* ---------- 對照表（APF vs 傳統） ---------- */
.cmp-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.cmp-table thead th {
  padding: 1.05rem 1.25rem; font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  text-align: left; color: #5a6a93; background: #eef3ff; border-bottom: 1px solid var(--line);
}
.cmp-table thead th.col-apf {
  color: #fff; background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
}
.cmp-table thead th:first-child { border-top-left-radius: .9rem; }
.cmp-table thead th.col-old { border-top-right-radius: .9rem; background: #eef1f7; color: #7a86a6; }
.cmp-table tbody td { padding: .95rem 1.25rem; font-size: .93rem; border-bottom: 1px solid #edf1fa; vertical-align: middle; }
.cmp-table tbody tr:nth-child(even) td { background: #fafbff; }
.cmp-table tbody td:first-child { font-weight: 700; color: var(--ink); white-space: nowrap; }
.cmp-table tbody td.col-apf { background: rgba(47,107,240,.06); }
.cmp-table tbody tr:nth-child(even) td.col-apf { background: rgba(47,107,240,.09); }
.cmp-table tbody td.col-old { color: #7a86a6; }
.cmp-wrap { border: 1px solid var(--line); border-radius: .9rem; overflow: hidden; box-shadow: var(--shadow-md); background: #fff; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tag-good { color: #0f9d6b; font-weight: 700; }
.tag-bad { color: #c0563f; font-weight: 600; }

/* ---------- 規格表（定義式） ---------- */
.spec-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.spec-table td { padding: .9rem 1.25rem; font-size: .93rem; border-bottom: 1px solid #edf1fa; vertical-align: top; }
.spec-table tr:last-child td { border-bottom: 0; }
.spec-table td.k {
  width: 26%; font-weight: 700; color: var(--brand-800);
  background: linear-gradient(90deg, #eef3ff, #f6f9ff); white-space: nowrap;
}
.spec-table td.v { color: #33415e; font-variant-numeric: tabular-nums; }
.spec-wrap { border: 1px solid var(--line); border-radius: .9rem; overflow: hidden; box-shadow: var(--shadow-sm); background: #fff; }

/* ---------- 證書 ---------- */
.cert-card img { transition: transform .4s ease; }
.cert-card:hover img { transform: scale(1.02); }

/* ---------- CTA 深藍帶 ---------- */
.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(115deg, var(--brand-900), var(--brand-700) 55%, #1d4cc4);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 85% 20%, rgba(34,184,232,.35), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(47,107,240,.4), transparent 40%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }

/* ---------- 頁尾 ---------- */
.site-footer { background: linear-gradient(180deg, #0c1c46, #091533); color: #c6d2f0; }
.site-footer a { color: #c6d2f0; transition: color .2s ease; }
.site-footer a:hover { color: #fff; }
.footer-title { color: #fff; font-weight: 700; }

/* ---------- 進場動畫 ---------- */
.fade-in { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.fade-in.d1 { transition-delay: .08s; }
.fade-in.d2 { transition-delay: .16s; }
.fade-in.d3 { transition-delay: .24s; }
.fade-in.d4 { transition-delay: .32s; }

/* ---------- 手機 ---------- */
@media (max-width: 767px) {
  .hero-wave {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 46%, rgba(255,255,255,.96) 100%),
      url('hero-wave.jpg');
    background-position: center top;
  }
  .cmp-table thead th, .cmp-table tbody td { padding: .75rem .85rem; font-size: .85rem; }
  .spec-table td.k { width: 38%; }
}

/* =========================================================
   產品型錄：機櫃/壁掛同頁，獨立高清圖，縮圖 hover 切換、點擊放大
   ========================================================= */
.lineup-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.pviewer {
  background: #fff; border: 1px solid var(--line); border-radius: 1.2rem; padding: 1.1rem;
  box-shadow: var(--shadow-md); transition: box-shadow .3s ease, transform .3s ease;
}
.pviewer:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.pviewer-stage {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  aspect-ratio: 4 / 3; border-radius: .9rem; overflow: hidden;
  background: linear-gradient(180deg, #eef3ff 0%, #fbfdff 100%);
}
.pviewer-big { width: 100%; height: 100%; object-fit: contain; transition: transform .45s ease, opacity .22s ease; }
.pviewer-stage:hover .pviewer-big { transform: scale(1.045); }
.pviewer-big.is-fading { opacity: 0; }
.pviewer-badge {
  position: absolute; top: .75rem; left: .75rem; z-index: 2;
  background: rgba(11,27,69,.82); color: #fff; font-weight: 700; font-size: .78rem; letter-spacing: .02em;
  padding: .32rem .75rem; border-radius: 999px; backdrop-filter: blur(2px);
}
.pviewer-zoom-ic {
  position: absolute; right: .7rem; bottom: .7rem; z-index: 2; width: 2.05rem; height: 2.05rem;
  display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.92);
  color: var(--brand-700); box-shadow: var(--shadow-sm);
}
.pviewer-thumbs { display: flex; gap: .65rem; margin-top: .75rem; }
.pthumb {
  width: 88px; height: 66px; padding: 0; border: 2px solid transparent; border-radius: .6rem; overflow: hidden;
  background: #eef2fb; cursor: pointer; transition: border-color .2s ease, transform .2s ease;
}
.pthumb img { width: 100%; height: 100%; object-fit: cover; }
.pthumb:hover { transform: translateY(-2px); }
.pthumb.is-active { border-color: var(--brand-500); box-shadow: 0 6px 14px -8px rgba(27,70,197,.8); }
.pviewer-name { margin-top: .85rem; font-size: 1.08rem; font-weight: 800; color: var(--ink); }
.pviewer-sub { margin-top: .28rem; font-size: .86rem; line-height: 1.65; color: var(--muted); }
.lineup-hint { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: 1.1rem; font-size: .8rem; color: #8a97b8; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 130; display: none; place-items: center; padding: 6vh 5vw;
  background: rgba(8,16,40,.80); backdrop-filter: blur(5px);
}
.lightbox.open { display: grid; animation: lb-fade .2s ease; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox-inner { max-width: min(1040px, 94vw); text-align: center; }
.lightbox-inner img {
  max-width: 100%; max-height: 76vh; width: auto; border-radius: 1rem; background: #fff;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.6);
}
.lightbox-cap { margin-top: .9rem; color: #dce6ff; font-weight: 600; font-size: .95rem; letter-spacing: .01em; }
.lightbox-close {
  position: absolute; top: 1.4rem; right: 1.4rem; width: 2.6rem; height: 2.6rem; border: 0; cursor: pointer;
  border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; transition: background .2s;
}
.lightbox-close:hover { background: rgba(255,255,255,.28); }

/* =========================================================
   服務頁：圖片流程卡
   ========================================================= */
.step-card {
  background: #fff; border: 1px solid var(--line); border-radius: 1.1rem; overflow: hidden;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease;
}
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.step-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #dbe6fd; }
.step-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.step-card:hover .step-media img { transform: scale(1.06); }
.step-num {
  position: absolute; top: .75rem; left: .75rem; min-width: 2.05rem; height: 2.05rem; padding: 0 .5rem;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--brand-700); font-weight: 800; font-size: .85rem; box-shadow: var(--shadow-sm);
}
.step-body { padding: 1.25rem 1.3rem 1.4rem; }
.step-body h3 { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.step-body p { margin-top: .5rem; font-size: .85rem; line-height: 1.75; color: var(--muted); }

/* 尊重減少動態偏好 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pviewer, .step-card, .pviewer-big, .step-media img, .pthumb { transition: none !important; }
  *, *::before, *::after { animation: none !important; }
}

@media (max-width: 900px) {
  .lineup-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .pviewer { padding: .9rem; }
  .pthumb { width: 74px; height: 56px; }
  .step-body { padding: 1.05rem 1.1rem 1.2rem; }
}