/* 通風官網「立體」設計系統（2026-10-03，老闆選定三版合併：甲＝即時 3D 首屏與懸浮頁首、丙＝立體拼貼格與內頁、乙＝實拍照片立體牆與串頁氣流線）
   規則：文字不放進 3D 旋轉容器；內容預設可見，進場動畫只在確認畫格有在跑時才加；不因「減少動態」關閉動畫（老闆要求）。 */

/* ===== 丙：拼貼格系統 ===== */
/* 丙版：以有厚度的拼貼格承載內容。所有文字固定正向，景深只交給圖片。 */
.fx3d {
  --c-gap: clamp(14px, 1.1vw, 24px);
  --c-radius: clamp(20px, 1.6vw, 32px);
  --c-pad: clamp(22px, 2vw, 46px);
  --c-shadow: inset 0 2px 0 #fff, inset 0 -5px 0 #dbe8f3,
    0 3px 3px #193f6412, 0 12px 22px -12px #154a7442, 0 34px 55px -32px #366d984a;
  --fs-body: clamp(17px, .86vw, 21px);
  --fs-h2: clamp(28px, 2.1vw, 48px);
  --fs-h3: clamp(19px, 1.18vw, 29px);
  background: #eef5fb;
  isolation: isolate;
}
.fx3d .band { width: min(88%, 2200px); margin-inline: auto; }
.fx3d main { position: relative; z-index: 1; }
.fx3d h1, .fx3d h2, .fx3d h3 { letter-spacing: -.025em; }
.fx3d main p { text-wrap: pretty; }
.fx3d main > section { padding-block: clamp(22px, 2.7vw, 60px); }
.fx3d main > section:last-child { padding-bottom: clamp(52px, 5vw, 110px); }
.fx3d :is(.scene-img, .shop-photo img, .shop-product-photo img, .shop-photo-placeholder img) { mix-blend-mode: normal; }
.fx3d .btn { transition: transform .18s, box-shadow .18s, background .18s; }
.fx3d .btn:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 #ffffffa6, 0 10px 17px -8px #0c517b66; }
.fx3d .btn:active { transform: translateY(2px); }
.fx3d .btn--quote { background: linear-gradient(160deg, #ffd687, #ffb42e 58%, #f59e0b); }
.fx3d .site-header { background: #f8fcffed; backdrop-filter: blur(18px); border-bottom: 1px solid #d1e1ef; }
.fx3d .nav-link { border-radius: 12px; }
.fx3d .nav-sub { border-radius: 18px; box-shadow: var(--c-shadow); transition: opacity .2s, visibility .2s; }

/* 光暈位於所有卡片後面，範圍固定在視窗內，不製造水平溢出。 */
.c-ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.c-ambient i { position: absolute; width: 62vw; height: 68vh; border-radius: 50%; background: radial-gradient(ellipse, #8ed8ff30, transparent 68%); animation: c-halo 21s ease-in-out infinite alternate; }
.c-ambient i:nth-child(1) { left: 0; top: -12%; }
.c-ambient i:nth-child(2) { right: -10%; top: 26%; background: radial-gradient(ellipse, #5aaceb25, transparent 68%); animation-duration: 24s; animation-delay: -10s; }
.c-ambient i:nth-child(3) { left: 2%; bottom: -10%; animation-duration: 18s; animation-delay: -5s; }
@keyframes c-halo { from { transform: translate(-5%, -5%) scale(.88); } to { transform: translate(14%, 12%) scale(1.1); } }

.c-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--c-gap); align-items: stretch; }
.c-tile, .fx3d .shop-category-card, .fx3d .shop-product-card,
.fx3d .shop-product-visual, .fx3d .shop-purchase, .fx3d .shop-spec-card, .fx3d .shop-related-card {
  min-width: 0; position: relative; border: 1px solid #cdddea; border-radius: var(--c-radius);
  background: linear-gradient(150deg, #fff 45%, #f2f8fd); box-shadow: var(--c-shadow);
}
.c-tile { padding: var(--c-pad); transition: transform .35s ease, box-shadow .35s ease; }
.c-tile::before { content: ""; pointer-events: none; position: absolute; inset: 1px 18px auto; height: 1px; background: #fff; }
.c-tile > * { min-width: 0; }
@media (hover: hover) {
  .fx3d:not(.fx3d-detail) .c-tile:hover,
  .fx3d-category :is(.shop-product-card, .shop-category-card):hover {
    transform: translateY(-6px);
    box-shadow: inset 0 2px 0 #fff, inset 0 -5px 0 #cfdfed, 0 6px 8px -5px #16456b30, 0 20px 34px -14px #134b764a, 0 42px 65px -35px #256e9b55;
  }
}
.c-depth { transform: translate3d(var(--c-depth-x, 0px), var(--c-depth-y, 0px), 0) scale(var(--c-depth-scale, 1)); transition: transform .28s ease-out; }
.c-float { animation: c-float 5.2s ease-in-out infinite; }
.c-trust:nth-child(even) .c-float { animation-delay: -2.6s; }
@keyframes c-float { 0%, 100% { transform: translateY(6px); } 50% { transform: translateY(-8px); } }
html.fx-on .c-reveal:not(.is-in) { opacity: 0; transform: translate3d(0, 56px, 0) scale(.94); }
html.fx-on .c-entering { animation: c-tile-in .7s cubic-bezier(.18,.7,.28,1) both; animation-delay: var(--c-enter-delay, 0ms); }
@keyframes c-tile-in { from { opacity: 0; transform: translate3d(0,56px,0) scale(.94); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }

/* 首屏只放兩格：左側完整敘事與持續氣流，右側三個氣流步驟。 */
.fx3d-home #hero { padding-top: clamp(22px, 2.2vw, 48px); padding-bottom: 0; }
.c-hero-grid { grid-template-areas: "hero hero hero hero hero hero hero flow flow flow flow flow"; }
.c-hero { grid-area: hero; min-height: clamp(690px, 47vw, 1020px); overflow: hidden; padding: clamp(26px, 2.5vw, 56px); background: #fff; }
.c-hero-copy { position: relative; z-index: 4; display: flex; align-items: flex-start; flex-direction: column; gap: clamp(16px, 1.35vw, 28px); pointer-events: none; }
.c-hero-copy > * { pointer-events: auto; }
.c-hero h1 { font-size: clamp(38px, 3.25vw, 78px); line-height: 1.22; }
.c-hero h1 span { display: block; }
.c-hero h1 span:last-child { color: #0267b9; }
.c-hero .hero-lead { max-width: 32em; font-size: clamp(17px, 1vw, 23px); word-break: normal; }
.c-hero-cta { border-radius: 50px; padding-inline: clamp(24px, 2vw, 42px); }
.c-hero-scene { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; overflow: hidden; }
.c-hero-picture { position: absolute; width: 91%; height: 100%; right: -1%; bottom: 0; z-index: 2; display: block; }
.c-hero-picture img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
.c-hero-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.c-air-back { z-index: 1; }
.c-air-front { z-index: 3; }
.c-flow { grid-area: flow; display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 2.3vw, 50px); padding: clamp(24px, 2.8vw, 62px); }
.c-flow h2 { font-size: clamp(28px, 2vw, 47px); }
.c-flow-copy { display: grid; gap: 18px; }
.c-flow-copy > p { max-width: 33em; font-size: clamp(17px, .95vw, 22px); }
.c-flow-copy > p span { display: block; }
.c-flow-steps { position: relative; display: grid; gap: clamp(20px, 2vw, 43px); }
.c-flow-steps::before { content: ""; position: absolute; left: 50px; top: 50px; bottom: 50px; width: 3px; background: repeating-linear-gradient(to bottom, #0f7cd4 0 10px, #8dd7fc55 10px 24px); background-size: 3px 48px; animation: c-stream 1.4s linear infinite; }
@keyframes c-stream { to { background-position: 0 48px; } }
.c-flow-step { position: relative; padding: clamp(18px, 1.3vw, 28px); border: 1px solid #dce9f3; border-radius: clamp(16px, 1.3vw, 26px); background: #ffffffeb; box-shadow: inset 0 1px 0 #fff, 0 4px 0 #e4edf5; transition: background .45s, box-shadow .45s, border-color .45s; }
.c-flow-step.is-active { border-color: #3bb7ef; background: linear-gradient(110deg, #e2f4ff, #fff); box-shadow: inset 0 0 0 2px #92d9fd, 0 5px 0 #b9def5, 0 0 24px #4fc0f04d; }
.c-step-title { display: flex; align-items: center; gap: 18px; }
.c-step-title h2 { font-size: clamp(23px, 1.45vw, 34px); white-space: nowrap; }
.c-step-title .num3d { width: 50px; height: 50px; font-size: 25px; border-radius: 15px; }
.c-flow-step p { margin: 10px 0 0 68px; line-height: 1.65; }
.c-flow-step p span { display: inline; }

/* 四個服務承諾共享一條底線，圖示獨立漂浮。 */
.fx3d-home #trust { margin-top: 0; padding-top: var(--c-gap); }
.c-trust-grid { grid-template-areas: "t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4"; }
.c-trust:nth-child(1) { grid-area: t1; }.c-trust:nth-child(2) { grid-area: t2; }
.c-trust:nth-child(3) { grid-area: t3; }.c-trust:nth-child(4) { grid-area: t4; }
.c-trust { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 1.8vw, 40px); }
.c-trust-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.c-trust-heading h2 { font-size: clamp(21px, 1.35vw, 32px); white-space: nowrap; }
.c-icon { display: block; width: clamp(80px, 6.5vw, 144px); height: clamp(80px, 6.5vw, 144px); background: #fff; border-radius: 24px; }
.c-icon img { width: 100%; height: 100%; object-fit: contain; }
.c-trust > p { margin: 0; font-size: clamp(17px, .85vw, 21px); }

/* 五類產品有一個主角，白色照片與展示盤自然融合，固定不傾斜。 */
.c-products-grid { grid-template-areas: "title title title title p1 p1 p1 p1 p2 p2 p3 p3" "title title title title p1 p1 p1 p1 p4 p4 p5 p5"; grid-template-rows: repeat(2, minmax(245px, auto)); }
.c-section-title { grid-area: title; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: clamp(24px, 3vw, 62px); background: linear-gradient(140deg, #fff 5%, #e4f3ff); }
.c-section-title .sec-head { margin: 0; gap: clamp(14px, 1.3vw, 27px); }
.c-section-title .sec-head > p:last-child { max-width: 23em; }
.c-section-title h2 { text-wrap: balance; }
.c-section-title .btn { height: auto; min-height: 54px; padding-block: 13px 10px; }
.c-product-1 { grid-area: p1; }.c-product-2 { grid-area: p2; }.c-product-3 { grid-area: p3; }.c-product-4 { grid-area: p4; }.c-product-5 { grid-area: p5; }
.c-product { padding: clamp(16px, 1.35vw, 30px); display: flex; align-items: stretch; background: linear-gradient(#fff 70%, #edf7ff); }
.c-display { display: flex; flex-direction: column; width: 100%; align-items: center; justify-content: center; }
.c-product-photo { display: flex; align-items: center; justify-content: center; width: 100%; height: clamp(132px, 11vw, 248px); background: #fff; border-radius: 16px; z-index: 1; }
.c-product-photo img { width: auto; height: auto; max-height: 100%; object-fit: contain; }
.c-product-1 .c-product-photo { height: clamp(280px, 24vw, 500px); }
.c-podium { position: relative; width: 91%; height: clamp(20px, 2vw, 42px); margin-top: -3px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(170deg,#fff 25%,#eff9ff 65%,#d1eaff); border-bottom: 6px solid #bbd5e9; box-shadow: 0 9px 14px -7px #19568a59, 0 15px 23px -4px #4fc0f035; }
.c-podium::after { content: ""; position: absolute; inset: -6px -6px -8px; border: 1px solid #91cde7; border-radius: 50%; }
.c-display figcaption { padding-top: 25px; width: 100%; text-align: center; }
.c-product h3 { font-size: clamp(19px, 1.15vw, 28px); line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.c-product-1 h3 { font-size: clamp(25px, 1.8vw, 42px); }

/* 場域的重要性決定格子大小，四種場域都只出现一次。 */
.c-scenes-grid { grid-template-areas: "title title title s1 s1 s1 s1 s1 s2 s2 s2 s2" "title title title s1 s1 s1 s1 s1 s3 s3 s4 s4"; grid-template-rows: repeat(2,minmax(255px,auto)); }
.c-scene-1 { grid-area: s1; }.c-scene-2 { grid-area: s2; }.c-scene-3 { grid-area: s3; }.c-scene-4 { grid-area: s4; }
.c-scene { display: flex; flex-direction: column; padding: clamp(16px, 1.55vw, 34px); gap: 16px; overflow: hidden; background: #fff; }
.c-scene-visual { position: relative; flex: 1; display: grid; place-items: center; min-height: 130px; }
.c-scene-visual .c-depth { width: 100%; }
.c-scene-visual img { width: 100%; height: clamp(150px, 11vw, 260px); object-fit: contain; }
.c-scene-1 .c-scene-visual img { height: clamp(330px, 27vw, 580px); }
.c-scene-copy { display: grid; gap: 10px; padding: 0 3px 8px; }
.c-scene h3 { font-size: clamp(20px, 1.25vw, 30px); }
.c-scene-1 h3 { font-size: clamp(26px, 1.8vw, 42px); }
.c-scene .scene-equipment { font-size: clamp(16px, .85vw, 20px); }
.c-scene .scene-equipment span { display: inline; }
.c-scene-2 { flex-direction: row; align-items: center; }
.c-scene-2 .c-scene-visual { width: 48%; flex: 0 0 48%; }
.c-scene-2 .c-scene-copy { flex: 1; }

/* 實績照片占滿格子，資訊收在底部霧面說明牌。 */
.c-cases-grid { grid-template-areas: "title title title k1 k1 k1 k2 k2 k2 k3 k3 k3"; }
.c-case-1 { grid-area: k1; }.c-case-2 { grid-area: k2; }.c-case-3 { grid-area: k3; }
.c-case { min-height: clamp(440px, 29vw, 660px); padding: clamp(15px, 1.2vw, 26px); overflow: hidden; display: flex; align-items: flex-end; }
.c-case-photo { position: absolute; inset: 0; }
.c-case-photo img { width: 100%; height: 100%; object-fit: cover; }
.c-case-copy { position: relative; z-index: 1; width: 100%; padding: clamp(18px, 1.5vw, 32px); border-radius: 18px; border: 1px solid #ffffffce; background: #fffffff0; backdrop-filter: blur(16px); box-shadow: 0 4px 20px #17395320; display: grid; gap: 13px; }
.c-case-copy .case-industry { justify-self: start; border: 1px solid #bddbee; border-radius: 30px; padding: 4px 11px; background: #eaf6ff; font-size: 16px; }
.c-case-copy h3 { font-size: clamp(22px, 1.3vw, 31px); }
.c-case-copy .case-result { font-size: clamp(16px, .86vw, 21px); padding-top: 12px; }

/* 內頁頁首、分類與選購卡沿用同一組厚度與留白。 */
.c-page-head { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); grid-template-areas: "intro intro intro intro intro intro intro intro deco deco deco deco" "tabs tabs tabs tabs tabs tabs tabs tabs tabs tabs tabs tabs"; gap: var(--c-gap); }
.fx3d .c-page-intro { grid-area: intro; display: flex; min-height: clamp(230px, 18vw, 380px); padding: var(--c-pad); }
.c-page-intro .page-hero__copy { width: 100%; gap: 22px; }
.c-page-intro::before { height: 1px; background: #fff; }
.c-page-deco { grid-area: deco; display: grid; place-items: center; padding: 15px; overflow: hidden; background: #fff; }
.c-page-deco .c-depth { width: min(90%, 360px); }
.c-page-deco img { width: 100%; height: clamp(180px, 15vw, 330px); object-fit: contain; }
.fx3d-category .c-page-deco img { animation: c-float 5.8s ease-in-out infinite; }
.c-page-tabs { grid-area: tabs; padding: clamp(16px, 1.4vw, 30px); }
.fx3d .c-page-tabs .subnav { margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.fx3d .subnav .btn { border-radius: 50px; min-height: 50px; height: auto; padding: 12px 20px 9px; }
.fx3d .subnav .btn[aria-current="page"] { background: linear-gradient(145deg,#218fe7,#0267b9); color: #fff; border-color: #1166a6; border-bottom-color: #004879; }
.fx3d .shop-toolbar { margin-bottom: var(--c-gap); }
.fx3d.shop-page[data-page="category"] .shop-grid, .fx3d .shop-category-grid, .fx3d .shop-related-grid { gap: var(--c-gap); align-items: stretch; }
.fx3d.shop-page .shop-grid[data-cols], .fx3d.shop-page .shop-category-grid[data-cols], .fx3d.shop-page .shop-related-grid[data-cols] { display: flex; flex-wrap: wrap; }
/* 尊重 shop.js 的 --cols；最後一列不足時共同填滿，五張卡也不留洞。 */
.fx3d.shop-page .shop-grid[data-cols] > .shop-product-card,
.fx3d.shop-page .shop-category-grid[data-cols] > .shop-category-card,
.fx3d.shop-page .shop-related-grid[data-cols] > .shop-related-card {
  flex: 1 0 calc((100% - (var(--cols) - 1) * var(--g)) / var(--cols)); max-width: none;
}
.fx3d.shop-page[data-page="category"] .shop-product-card.card { display: flex; flex-direction: column; gap: 17px; padding: clamp(18px, 1.5vw, 32px); background: linear-gradient(150deg,#fff 45%,#f2f8fd); transition: transform .3s, box-shadow .3s; }
.fx3d .shop-product-card::before, .fx3d .shop-category-card::before, .fx3d .shop-purchase::before, .fx3d .shop-related-card::before { height: 1px; background: #fff; }
.fx3d.shop-page[data-page="category"] .shop-product-card .shop-photo-link { padding: 14px 12px 22px; border: 1px solid #e2edf5; border-bottom: 0; border-radius: 18px; background: #fff; box-shadow: 0 7px 0 #e4eef7; }
.fx3d.shop-page[data-page="category"] .shop-product-card .shop-photo, .fx3d .shop-photo { background: #fff; border-radius: 18px; height: clamp(190px, 13vw, 285px); }
.fx3d .shop-photo img { mix-blend-mode: normal; }
.fx3d .shop-plinth { background: linear-gradient(160deg,#fff,#eef9ff); border-bottom-color: #c1dcec; box-shadow: 0 8px 11px -5px #1b5f843d, 0 12px 20px -5px #4fc0f045; outline: 1px solid #b1ddef; outline-offset: 4px; }
.fx3d.shop-page .shop-product-card .shop-product-title { height: auto; min-height: 5.6em; margin-top: 0; font-size: clamp(19px, 1.05vw, 26px); }
.fx3d.shop-page[data-page="category"] .shop-product-card .shop-product-title a { height: 100%; min-height: 5.6em; padding: 14px 16px; }
.fx3d.shop-page[data-page="category"] .shop-product-card .shop-product-title a span { display: block; overflow: visible; -webkit-line-clamp: unset; }
.fx3d.shop-page .shop-product-card .shop-chips { min-height: 88px; }
.fx3d.shop-page .shop-product-card .shop-price { margin-top: auto; padding-top: 6px; }
.fx3d.shop-page[data-page="category"] .shop-product-card > .shop-card-actions { margin-top: 0; }
.fx3d .shop-category-card { padding: clamp(20px, 1.8vw, 36px); transition: transform .3s, box-shadow .3s; }
.fx3d .shop-category-card .shop-photo { margin-bottom: 10px; background: #fff; border-bottom: 7px solid #dbeaf5; box-shadow: 0 9px 14px -8px #1773a649; }
.fx3d .shop-category-card h2 { font-size: clamp(23px,1.5vw,34px); }
.fx3d.shop-page .shop-product-layout { gap: var(--c-gap); }
.fx3d.shop-page[data-page="product"] #product-main > .shop-product-layout { grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: var(--c-gap); }
.fx3d .shop-product-visual { background: #fff; }
.fx3d.shop-page[data-page="product"] .shop-spec-card { max-width: none; }
.fx3d .shop-spec-list > div { padding-inline: clamp(0px, 1vw, 20px); }
.fx3d .shop-spec-list > div:nth-child(even) { background: #f1f7fc; }
/* 功能頁沒有持續背景、漂浮、視差或購買格進場。 */
.fx3d-detail .c-depth { transform: none; transition: none; }
.fx3d-detail .c-tile { transition: none; }


/* 八欄拼貼：標題與主角並排，支線入口完整佔滿下一列。 */
@media (min-width:900px) and (max-width:1279px) {
  .c-grid { grid-template-columns: repeat(8,minmax(0,1fr)); }
  .c-hero-grid { grid-template-areas: "hero hero hero hero hero flow flow flow"; }
  .c-hero { min-height: 720px; }
  .c-flow { padding: 24px; gap: 25px; }
  .c-flow-step { padding: 17px; }
  .c-flow-step p { margin-left: 0; }
  .c-flow-steps::before { left: 42px; }
  .c-trust-grid { grid-template-areas: "t1 t1 t1 t1 t2 t2 t2 t2" "t3 t3 t3 t3 t4 t4 t4 t4"; }
  .c-trust-heading { flex-direction: row; align-items: center; }
  .c-products-grid { grid-template-areas: "title title title title p1 p1 p1 p1" "p2 p2 p3 p3 p4 p4 p5 p5"; grid-template-rows: auto auto; }
  .c-scenes-grid { grid-template-areas: "title title title s1 s1 s1 s1 s1" "s2 s2 s2 s2 s3 s3 s4 s4"; grid-template-rows: auto auto; }
  .c-cases-grid { grid-template-areas: "title title title title k1 k1 k1 k1" "k2 k2 k2 k2 k3 k3 k3 k3"; }
  .c-case { min-height: 440px; }
  .c-hero h1 { font-size: clamp(37px,3.6vw,46px); }
}
/* 四欄與窄版均明確指定每個格子，不使用自動補空白。 */
@media (max-width:899px) {
  .fx3d .band { width: calc(100% - 40px); }
  .c-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .c-hero-grid { grid-template-areas: "hero hero hero hero" "flow flow flow flow"; }
  .c-hero { min-height: 720px; }
  .c-hero h1 { font-size: clamp(38px,6vw,56px); }
  .c-hero-scene { height: 56%; }
  .c-hero-picture { width: 80%; right: 2%; }
  .c-flow { gap: 28px; padding: clamp(24px,4vw,40px); }
  .c-flow-steps { gap: 22px; }
  .c-flow-step { padding: 18px 23px; display: flex; align-items: center; gap: 24px; }
  .c-flow-step p { margin: 0; }
  .c-step-title { flex-shrink: 0; }
  .c-flow-steps::before { left: 48px; }
  .c-trust-grid { grid-template-areas: "t1 t1 t2 t2" "t3 t3 t4 t4"; }
  .c-products-grid { grid-template-areas: "title title p1 p1" "p2 p2 p3 p3" "p4 p4 p5 p5"; grid-template-rows: auto auto auto; }
  .c-product-photo { height: clamp(160px,25vw,250px); }
  .c-product-1 .c-product-photo { height: 240px; }
  .c-scenes-grid { grid-template-areas: "title title s1 s1" "s2 s2 s2 s2" "s3 s3 s4 s4"; grid-template-rows: auto auto auto; }
  .c-scene-1 .c-scene-visual img { height: 280px; }
  .c-scene-visual img { height: 190px; }
  .c-cases-grid { grid-template-areas: "title title k1 k1" "k2 k2 k3 k3"; }
  .c-case { min-height: 425px; }
  .c-section-title { gap: 28px; }
  .c-page-head { grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-areas: "intro intro intro deco" "tabs tabs tabs tabs"; }
  .c-page-deco { padding: 10px; }
  .c-page-deco .c-depth { width: 100%; }
  .fx3d.shop-page[data-page="product"] #product-main > .shop-product-layout { grid-template-columns: minmax(0,1fr); }
}
@media (max-width:599px) {
  .fx3d { --c-pad: 24px; }
  .fx3d .band { width: calc(100% - 28px); }
  .fx3d main > section { padding-block: 24px; }
  .c-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .c-hero-grid { grid-template-areas: "hero hero" "flow flow"; }
  .c-hero { min-height: 680px; padding: 27px 23px; }
  .c-hero h1 { font-size: clamp(30px,6.6vw,39px); line-height: 1.32; }
  .c-hero-copy { gap: 20px; }
  .c-hero .hero-lead { font-size: 17px; }
  .c-hero-scene { height: 48%; }
  .c-hero-picture { width: 110%; right: -5%; bottom: 0; }
  .c-flow-step { display: block; padding: 18px 20px; }
  .c-flow-step p { margin-top: 12px; }
  .c-flow-steps::before { left: 45px; }
  .c-flow-copy > p { font-size: 17px; }
  .c-trust-grid { grid-template-areas: "t1 t2" "t3 t4"; }
  .c-trust { padding: 21px 17px; }
  .c-trust-heading h2 { font-size: 20px; white-space: normal; word-break: keep-all; }
  .c-icon { width: 80px; height: 80px; }
  .c-products-grid { grid-template-areas: "title title" "p1 p1" "p2 p3" "p4 p5"; }
  .c-section-title { padding: 28px; gap: 25px; }
  .c-section-title .btn { align-self: flex-start; }
  .c-product { padding: 18px 12px 24px; }
  .c-product-photo { height: clamp(135px,32vw,190px); }
  .c-product-1 .c-product-photo { height: 275px; }
  .c-product h3 { font-size: 19px; }
  .c-product-1 h3 { font-size: 28px; }
  .c-scenes-grid { grid-template-areas: "title title" "s1 s1" "s2 s2" "s3 s4"; }
  .c-scene-1 .c-scene-visual img { height: 320px; }
  .c-scene { padding: 18px 14px; }
  .c-scene-visual img { height: 155px; }
  .c-scene h3 { font-size: 21px; }
  .c-scene .scene-equipment { font-size: 16px; }
  .c-cases-grid { grid-template-areas: "title title" "k1 k1" "k2 k2" "k3 k3"; }
  .c-case { min-height: 440px; }
  .c-page-head { grid-template-columns: minmax(0,1fr); grid-template-areas: "intro" "deco" "tabs"; }
  .fx3d .c-page-intro { padding: 25px 21px; min-height: 0; }
  .c-page-deco { min-height: 180px; }
  .c-page-deco .c-depth { width: 180px; }
  .c-page-deco img { height: 180px; }
  .c-page-tabs { padding: 16px; }
  .fx3d .c-page-tabs .subnav { gap: 10px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fx3d .subnav .btn { font-size: 16px; padding-inline: 8px; white-space: normal; word-break: keep-all; }
  .fx3d .subnav .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width:419px) {
  .c-trust-grid { grid-template-areas: "t1 t1" "t2 t2" "t3 t3" "t4 t4"; }
  .c-trust { padding: 23px; }
  .c-trust-heading { flex-direction: row; align-items: center; gap: 17px; }
  .c-trust-heading h2 { white-space: nowrap; font-size: 21px; }
  .c-icon { flex-shrink: 0; width: 68px; height: 68px; }
  .c-products-grid { grid-template-areas: "title title" "p1 p1" "p2 p2" "p3 p3" "p4 p4" "p5 p5"; }
  .c-product-photo { height: 215px; }
  .c-product-1 .c-product-photo { height: 255px; }
  .c-product h3 { font-size: 24px; }
  .c-scenes-grid { grid-template-areas: "title title" "s1 s1" "s2 s2" "s3 s3" "s4 s4"; }
  .c-scene-2 { flex-direction: column; }
  .c-scene-2 .c-scene-visual { width: 100%; flex: 1; }
  .c-scene-visual img { height: 245px; }
  .c-scene-1 .c-scene-visual img { height: 265px; }
  .c-scene-copy { width: 100%; padding-inline: 8px; }
  .c-case { min-height: 405px; }
}



/* 步驟卡蓋在連接線上方：連接線只在卡片之間露出，不穿過文字 */
.c-flow-steps::before{z-index:0}
.c-flow-steps>*{position:relative;z-index:1}
.c-flow-steps>*::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#fff}

/* ====== 合併版（甲首屏＋丙拼貼格＋乙照片牆與串頁氣流線）====== */
/* --- 甲：懸浮玻璃頁首 --- */
/* 懸浮頁首的玻璃在獨立背景層，避免把手機選單困在濾鏡容器內。 */
.fx3d .site-header{position:fixed;inset:18px 0 auto;z-index:40;background:none;box-shadow:none;pointer-events:none}
.fx3d .header-inner{position:relative;padding-inline:clamp(12px,1.4vw,30px);border:1px solid #fff;border-radius:20px;pointer-events:auto;box-shadow:0 9px 30px -17px #1a547b66}
.fx3d .header-inner::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#ffffffe0;backdrop-filter:blur(20px);transition:background .25s}
.fx3d .site-header.is-scrolled .header-inner::before{background:#fffffff7}
.fx3d .site-nav__inner{padding-block:12px}
.fx3d .site-header .nav-link{border:0;border-radius:9px;background:transparent;box-shadow:none;height:44px;padding-inline:clamp(5px,.6vw,14px)}
.fx3d .site-header .nav-link:hover{background:#eaf4ff;box-shadow:0 2px 0 #d8e8f7;transform:translateY(-2px)}
.fx3d .site-header .nav-link[aria-current="page"]{background:#e7f3fd;color:#0267b9;box-shadow:0 2px 0 #c7ddeb}
.fx3d .nav-menu{gap:clamp(3px,.4vw,10px)}
.fx3d .site-header .list-link--icon{width:50px;height:48px}
.fx3d .mobile-menu__actions>.btn{height:48px;border-radius:12px}
.fx3d .nav-sub{border-radius:16px;box-shadow:0 18px 48px -15px #0f27474d;transition:opacity .15s,visibility .15s}

/* --- 甲：即時 3D 首屏 --- */
/* 首屏的整片天空與地面，不把廠房包成圖片卡。 */
.fx3d #hero{position:relative;isolation:isolate;height:clamp(620px,92svh,1040px);min-height:620px;padding:140px 0 120px;background:radial-gradient(ellipse at 76% 25%,#ffffff 0,transparent 48%),linear-gradient(160deg,#fff 4%,#eaf4ff 67%,#dceffa 100%)}
.fx3d #hero::after{content:"";position:absolute;inset:62% 0 0;z-index:-1;background:repeating-linear-gradient(0deg,transparent 0 42px,#7fabc61c 43px 44px),repeating-conic-gradient(from 80deg at 50% -40%,transparent 0 7deg,#7fabc61c 7.1deg 7.3deg,transparent 7.4deg 14deg);mask-image:linear-gradient(transparent,#0009);pointer-events:none}
.fx3d .a-hero-layout{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);gap:0;height:100%;align-items:center}
.fx3d .hero-copy{position:relative;z-index:2;align-items:flex-start;gap:clamp(16px,1.3vw,28px);max-width:none;margin:0;text-align:left;padding-right:clamp(8px,1.7vw,38px)}
.fx3d .hero-copy .sec-head__eyebrow{justify-content:flex-start}
.fx3d .hero-copy h1{font-size:clamp(34px,3.6vw,84px);font-weight:900;line-height:1.22;max-width:none;text-wrap:initial}
.fx3d .hero-copy h1 span{display:block;white-space:nowrap}
.fx3d .hero-copy h1 span:last-child{color:#0267b9}
.fx3d .hero-lead{font-size:clamp(17px,1.05vw,24px);line-height:1.9;max-width:31em;text-wrap:pretty;word-break:normal}
.fx3d .hero-copy>.btn{margin-top:4px;align-self:flex-start;background:linear-gradient(#ffc866,#f59e0b);color:#0f2747;border-color:#e99516;border-bottom-color:#c97d08;box-shadow:0 2px 0 #ffe5a9 inset,0 4px 0 #c97d08,0 15px 25px -14px #bc7b25a0}
.fx3d .hero-copy>.btn svg{margin-left:16px}
.fx3d .hero-caption{position:static;align-items:flex-start;max-width:38em;gap:6px;padding:clamp(10px,1vw,24px) 0 0;margin:0;border-top:1px solid #9bbdd54d;text-align:left}
.fx3d .hero-caption p{font-size:clamp(15px,.72vw,17px);line-height:1.8;text-wrap:pretty}
.fx3d .hero-caption .sec-head__eyebrow{font-size:15px;letter-spacing:.06em}
.fx3d .hero-caption .sec-head__eyebrow::before{display:none}
.fx3d .hero-caption p span{display:inline}
.fx3d #airflow-stage{position:relative;min-width:0;height:100%;min-height:400px;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;isolation:auto;overflow:hidden}
.fx3d #airflow-canvas,.fx3d .hero-poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;transition:opacity .7s;pointer-events:none}
.fx3d #airflow-canvas{opacity:0}
.fx3d #airflow-stage.is-ready #airflow-canvas{opacity:1}
.fx3d #airflow-stage.is-ready .hero-poster{opacity:0}
.fx3d #airflow-steps{position:absolute;inset:0;display:block;margin:0;z-index:3;pointer-events:none}
.fx3d .airflow-step{position:absolute;inset:auto;display:flex;width:clamp(148px,12.5vw,248px);gap:8px;margin:0;padding:clamp(10px,1vw,18px);border:1px solid #ffffffed;border-bottom-color:#bad9e9;border-radius:16px;background:#ffffffd9;box-shadow:0 4px 0 #c3dce966,0 16px 30px -18px #31729377;backdrop-filter:blur(12px);pointer-events:auto;transition:box-shadow .2s,border-color .2s}
.fx3d .airflow-step:hover,.fx3d .airflow-step:focus-visible{border-color:#4fc0f0;box-shadow:0 3px 0 #9bccdf,0 12px 25px -12px #0267b955}
.fx3d .airflow-step::after{display:none}
.fx3d .airflow-step--1{left:2%;top:58%}
.fx3d .airflow-step--2{left:37%;top:78%}
.fx3d .airflow-step--3{left:auto;right:2%;top:38%}
.fx3d .airflow-step__title{gap:9px}
.fx3d .airflow-step h2{font-size:clamp(17px,1vw,23px);white-space:nowrap}
.fx3d .airflow-step .num3d{width:32px;height:34px;border-radius:10px;font-size:18px;padding-top:2px;border-bottom-width:3px}
.fx3d .airflow-step p{font-size:clamp(15px,.69vw,17px);line-height:1.55;min-height:0;text-wrap:pretty}
.fx3d .airflow-step p span{display:inline}
.fx3d #airflow-toggle{position:absolute;right:15px;bottom:18px;z-index:5;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #fff;border-bottom:3px solid #b6d3e5;border-radius:50%;background:#ffffffdb;color:#0267b9;box-shadow:0 8px 20px -9px #28688b66;transition:transform .2s}
.fx3d #airflow-toggle:hover{transform:translateY(-3px)}
.fx3d #airflow-toggle:active{transform:translateY(2px)}
.fx3d #airflow-toggle svg{width:18px;height:18px;display:block}
.fx3d #airflow-toggle[hidden]{display:none}
.fx3d #airflow-stage.is-fallback #airflow-toggle{display:none}


/* 三步驟：場景裡只放編號標記，說明卡一排在畫布下方（同一資訊只出現一次） */
.fx3d .airflow-pins{position:absolute;inset:0 0 var(--steps-h,150px);z-index:3;pointer-events:none}
.fx3d .airflow-pin{position:absolute;left:0;top:0;width:40px;height:40px;margin:-20px 0 0 -20px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(#2a95ec,#0267b9);color:#fff;font:900 19px/1 "Outfit",var(--font);box-shadow:0 0 0 5px #ffffffcc,0 10px 22px -6px #0267b9b0;transition:box-shadow .25s}
.fx3d .airflow-pin::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #4fc0f0;animation:a-pin-pulse 2.2s ease-out infinite}
.fx3d .airflow-pin[data-step="1"]::after{animation-delay:.7s}.fx3d .airflow-pin[data-step="2"]::after{animation-delay:1.4s}
.fx3d .airflow-pin.is-active{box-shadow:0 0 0 7px #4fc0f0aa,0 12px 26px -6px #0267b9}
@keyframes a-pin-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.1);opacity:0}}
.fx3d #airflow-stage.is-fallback .airflow-pins,.fx3d #airflow-stage:not(.is-ready) .airflow-pins{display:none}
@media(min-width:901px){.fx3d #hero{padding:118px 0 76px}}

@media(min-width:1200px) and (max-width:1399px){
 .fx3d .header-inner{width:94%;padding-inline:12px}
 .fx3d .site-header .site-brand__name{font-size:18px}
 .fx3d .site-header .site-brand img{width:38px}
 .fx3d .site-nav__inner{gap:8px}
 .fx3d .nav-menu{gap:2px}
 .fx3d .site-header .nav-link{padding-inline:4px;font-size:16px}
 .fx3d .mobile-menu__actions>.btn{padding-inline:8px;font-size:16px}
}
@media(max-width:1199px){
 .fx3d .site-header{top:12px}
 .fx3d .header-inner{width:calc(100% - 40px)}
}
@media(min-width:901px) and (max-width:1199px){
 .fx3d #hero{padding-top:120px;padding-bottom:110px}
 .fx3d .hero-copy h1{font-size:clamp(30px,3.5vw,42px)}
 .fx3d .hero-caption{padding-top:12px}
 .fx3d .hero-caption p{font-size:15px}
 .fx3d .hero-copy{gap:16px}
 .fx3d .airflow-step{width:145px;padding:10px}
}
@media(max-width:900px){
 .fx3d #hero{height:auto;min-height:clamp(620px,92svh,1040px);padding:122px 0 98px}
 .fx3d .a-hero-layout{grid-template-columns:minmax(0,1fr);gap:22px}
 .fx3d .hero-copy{padding:0;max-width:650px;gap:18px}
 .fx3d .hero-copy h1{font-size:clamp(34px,6vw,54px);line-height:1.24}
 .fx3d .hero-lead{font-size:17px;max-width:39em}
 .fx3d .hero-caption{padding-top:14px;max-width:100%}
 .fx3d #airflow-stage{height:auto;min-height:0;padding-top:340px;padding-bottom:0;overflow:hidden}
 .fx3d #airflow-canvas,.fx3d .hero-poster{height:340px}
 .fx3d #airflow-steps{position:relative;inset:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:2px}
 .fx3d .airflow-step{position:relative;inset:auto!important;width:auto;min-width:0;margin:0;padding:12px 10px;gap:10px;border-radius:13px;backdrop-filter:none}
 .fx3d .airflow-step__title{gap:7px}
 .fx3d .airflow-step h2{font-size:18px}
 .fx3d .airflow-step .num3d{width:28px;height:30px;font-size:17px;border-radius:8px}
 .fx3d .airflow-step p{font-size:15px;line-height:1.65;word-break:normal}
 .fx3d .airflow-step p span{display:inline}
 .fx3d #airflow-toggle{top:278px;bottom:auto;right:8px}
}
@media(max-width:600px){
 .fx3d .site-header{top:10px}
 .fx3d .header-inner{width:calc(100% - 20px);padding-inline:10px;border-radius:16px}
 .fx3d .site-nav__inner{padding-block:10px}
 .fx3d .site-header .site-brand img{width:30px}
 .fx3d .site-header .site-brand__name{font-size:17px}
 .fx3d .site-header .list-link--compact{width:44px;height:44px;padding:4px 3px 0 0}
 .fx3d .site-header .menu-toggle{width:44px;height:44px;padding:0}
 .fx3d #hero{padding-top:116px}
 .fx3d .hero-copy h1{font-size:clamp(32px,8.5vw,48px)}
 .fx3d .hero-copy .sec-head__eyebrow{font-size:15px}
 .fx3d .hero-lead{line-height:1.85}
 .fx3d .hero-caption p{font-size:15px}
 .fx3d .hero-copy>.btn{height:54px;font-size:18px}
 .fx3d .a-hero-layout{gap:8px}
 .fx3d #airflow-steps{gap:6px}
 .fx3d .airflow-step{padding:12px 8px}
 .fx3d .airflow-step__title{gap:5px}
 .fx3d .airflow-step h2{font-size:17px}
 .fx3d .airflow-step p{font-size:15px;line-height:1.55}
}
@media(max-width:359px){
 .fx3d .site-header .site-brand__name{font-size:15px}
 .fx3d .site-header .site-brand{gap:3px}
 .fx3d .site-header .site-brand img{width:26px}
 .fx3d .site-nav__inner{gap:5px}
 .fx3d .hero-copy h1{font-size:32px}
 .fx3d .airflow-step{padding:10px 6px}
 .fx3d .airflow-step .num3d{width:22px;height:27px;font-size:16px}
 .fx3d .airflow-step h2{font-size:16px}
}
@media(min-width:901px){
 .fx3d #airflow-stage{--steps-h:clamp(110px,7.4vw,140px)}
 .fx3d #airflow-canvas,.fx3d .hero-poster{inset:0 auto auto 0!important;width:100%;height:calc(100% - var(--steps-h) - 12px)!important}
 .fx3d .airflow-pins{bottom:calc(var(--steps-h) + 12px)}
 .fx3d #airflow-steps{position:absolute;inset:auto 2% 0 2%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1vw,20px);pointer-events:auto}
 .fx3d .airflow-step{position:relative;width:auto;height:100%}
 .fx3d .airflow-step--1,.fx3d .airflow-step--2,.fx3d .airflow-step--3{left:auto;right:auto;top:auto}
 .fx3d #airflow-toggle{top:6px;bottom:auto}
}

.fx3d .airflow-step::before{display:none}

/* --- 合併版：首屏與拼貼格的銜接 --- */
.fx3d-home #hero{position:relative;z-index:2}
.fx3d-home #trust{position:relative;z-index:3;margin-top:calc(var(--c-gap) * -1);padding-top:0}
.fx3d .site-header{border-bottom:0;backdrop-filter:none}

/* --- 乙：安裝實績第一案做成立體照片牆（照片轉向、說明牌不轉向） --- */
.fx3d .m-case-wall{background:linear-gradient(180deg,#fff 0 55%,#eef4f9);overflow:hidden}
.fx3d .m-case-wall::after{content:"";position:absolute;left:-15%;right:-15%;bottom:0;height:48%;z-index:0;background:repeating-linear-gradient(90deg,#c3d6e4 0 1px,transparent 1px 72px),repeating-linear-gradient(0deg,#c3d6e4 0 1px,transparent 1px 46px);transform:perspective(520px) rotateX(62deg);transform-origin:50% 100%;opacity:.55;-webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent,#000 70%);pointer-events:none}
.fx3d .m-case-wall .c-case-photo{inset:7% 9% auto 9%;height:58%;z-index:1;border:clamp(7px,.6vw,12px) solid #fff;border-radius:4px;overflow:hidden;background:#fff;transform:perspective(1300px) rotateY(-16deg) translate3d(var(--c-depth-x,0px),var(--c-depth-y,0px),0);box-shadow:2px 0 0 #e9eef2,14px 9px 0 #c7d3dc,15px 10px 0 #b3c3cf,30px 40px 44px -22px #26496373}
.fx3d .m-case-wall .c-case-photo img{animation:m-kenburns 18s ease-in-out infinite alternate;transform-origin:40% 55%}
.fx3d .m-case-wall .c-case-photo::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:28%;background:linear-gradient(100deg,#fff0,#ffffff6e 45%,#fff0);transform:skewX(-14deg);animation:m-sheen 7s ease-in-out infinite;pointer-events:none}
.fx3d .m-case-wall .c-case-copy{z-index:2}
@keyframes m-kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes m-sheen{0%,55%{transform:translateX(0) skewX(-14deg)}85%,100%{transform:translateX(560%) skewX(-14deg)}}
@media(min-width:1280px){
 .fx3d .c-cases-grid{grid-template-areas:"title title title k1 k1 k1 k1 k1 k2 k2 k2 k2" "title title title k1 k1 k1 k1 k1 k3 k3 k3 k3";grid-template-rows:repeat(2,minmax(clamp(260px,15vw,340px),auto))}
 .fx3d .c-case-2,.fx3d .c-case-3{min-height:0;display:grid;grid-template-columns:minmax(0,48%) minmax(0,1fr);align-items:stretch;gap:clamp(14px,1.2vw,26px);padding:clamp(12px,1vw,18px)}
 .fx3d .c-case-2 .c-case-photo,.fx3d .c-case-3 .c-case-photo{position:relative;inset:auto;border-radius:clamp(14px,1.1vw,22px);overflow:hidden;min-height:100%}
 .fx3d .c-case-2 .c-case-copy,.fx3d .c-case-3 .c-case-copy{align-content:center;padding:6px 8px 6px 0;border:0;background:transparent;box-shadow:none;backdrop-filter:none}
 .fx3d .m-case-wall{min-height:0}
 .fx3d .m-case-wall .c-case-photo{height:52%}
 .fx3d .c-case-copy h3,.fx3d .c-case-copy .case-result{word-break:keep-all;overflow-wrap:anywhere}
}
@media(min-width:1900px){.fx3d .c-cases-grid{grid-template-areas:"title title title k1 k1 k1 k1 k1 k1 k2 k2 k2" "title title title k1 k1 k1 k1 k1 k1 k3 k3 k3"}}
@media(max-width:599px){.fx3d .m-case-wall .c-case-photo{transform:perspective(1000px) rotateY(-9deg);inset:6% 7% auto 7%;height:52%}}

/* --- 乙：從首屏串到頁尾的氣流線（長線靜止、光點沿線移動；手機不畫） --- */
.m-route{position:absolute;left:0;top:0;z-index:0;pointer-events:none;overflow:visible}
.m-route path{fill:none;stroke-linecap:round}
.m-route .m-route-glow{stroke:#73cdf2;stroke-width:12;opacity:.12}
.m-route .m-route-base{stroke:#59bce8;stroke-width:2;opacity:.45}
.m-route .m-route-dash{stroke:#188ccc;stroke-width:3;stroke-dasharray:16 44;opacity:.5}
.m-comet{position:absolute;left:0;top:0;z-index:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle,#fff 0 22%,#4fc0f0 45%,#4fc0f000 72%);box-shadow:0 0 18px 6px #4fc0f066;pointer-events:none;offset-rotate:0deg;animation:m-comet 20s linear infinite}
@keyframes m-comet{from{offset-distance:0%}to{offset-distance:100%}}
.fx3d main{position:relative;z-index:1}
@media(max-width:899px){.m-route,.m-comet{display:none!important}}

/* 內頁：懸浮頁首底下留出空間 */
.fx3d:not(.fx3d-home) main{padding-top:clamp(98px,7.4vw,124px)}
@media(max-width:600px){.fx3d:not(.fx3d-home) main{padding-top:86px}}

/* ===== 內頁：頁首拆成兩塊立體方格（文字格＋立體圖格），分類切換列也是一格（不改各頁內容結構） ===== */
.fx3d .page-hero .page-hero__card{display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,26%,460px);gap:var(--c-gap);align-items:stretch;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.fx3d .page-hero .page-hero__card::before,.fx3d .page-hero .page-hero__card::after{display:none}
.fx3d .page-hero .page-hero__card:not(:has(.page-hero__art)){grid-template-columns:minmax(0,1fr)}
.fx3d .page-hero .page-hero__copy,.fx3d .page-hero .page-hero__art,.fx3d .page-hero .subnav{position:relative;border:1px solid #cdddea;border-radius:var(--c-radius);background:linear-gradient(150deg,#fff 45%,#f2f8fd);box-shadow:var(--c-shadow)}
.fx3d .page-hero .page-hero__copy{justify-content:center;gap:clamp(12px,1.1vw,22px);padding:var(--c-pad);min-height:clamp(200px,15vw,330px)}
.fx3d .page-hero .page-hero__copy::before,.fx3d .page-hero .subnav::before{content:"";position:absolute;inset:1px 18px auto;height:1px;background:#fff;pointer-events:none}
.fx3d .page-hero .page-hero__art{display:grid;place-items:center;padding:clamp(14px,1.2vw,26px);background:#fff;overflow:hidden}
.fx3d .page-hero .page-hero__art img{width:min(76%,300px);height:auto;mix-blend-mode:normal;animation:c-float 5.8s ease-in-out infinite}
.fx3d .page-hero h1{font-size:clamp(32px,2.6vw,60px);letter-spacing:-.02em}
.fx3d .page-hero .subnav{margin-top:var(--c-gap);padding:clamp(14px,1.2vw,26px);display:flex;flex-wrap:wrap;gap:12px}
.fx3d .page-hero .subnav .btn{border-radius:50px;min-height:50px;height:auto;padding:12px 20px 9px}
.fx3d .page-hero .subnav .btn[aria-current="page"]{background:linear-gradient(145deg,#218fe7,#0267b9);color:#fff;border-color:#1166a6;border-bottom-color:#004879}
.fx3d main>section.page-hero:first-child{padding-bottom:0}
.fx3d .page-hero + .page-section{padding-top:clamp(26px,2.6vw,56px)}

/* 內頁內容卡：統一成丙版立體方格（白到淡藍、細邊、多層投影；可點的整張浮起） */
.fx3d main>section:not(.page-hero):not(#hero) .card{border:1px solid #cdddea;border-radius:var(--c-radius);background:linear-gradient(150deg,#fff 45%,#f2f8fd);box-shadow:var(--c-shadow);transition:transform .3s,box-shadow .3s}
.fx3d main>section:not(.page-hero):not(#hero) .card::before{inset:1px 18px auto;height:1px;border-radius:0;background:#fff}
@media(hover:hover){
 .fx3d main>section:not(.page-hero):not(#hero) a.card:hover{transform:translateY(-6px);box-shadow:inset 0 2px 0 #fff,inset 0 -5px 0 #cfdfed,0 6px 8px -5px #16456b30,0 20px 34px -14px #134b764a,0 42px 65px -35px #256e9b55}
}
.fx3d main .sec-head h2{font-size:var(--fs-h2)}

@media(max-width:899px){
 .fx3d .page-hero .page-hero__card{grid-template-columns:minmax(0,1fr) clamp(140px,30%,220px)}
 .fx3d .page-hero .page-hero__art{display:grid}
}
@media(max-width:600px){
 .fx3d .page-hero .page-hero__card{grid-template-columns:minmax(0,1fr)}
 .fx3d .page-hero .page-hero__art{display:none}
 .fx3d .page-hero .page-hero__copy{min-height:0;padding:24px 20px}
 .fx3d .page-hero .subnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px}
 .fx3d .page-hero .subnav .btn{font-size:16px;padding-inline:8px;white-space:normal;word-break:keep-all}
 .fx3d .page-hero .subnav .btn:last-child:nth-child(odd){grid-column:1 / -1}
}

/* 首屏說明字至少 16px；手機上三步驟改成直排（一列一步，卡片不會擠成一條） */
.fx3d .hero-caption p,.fx3d .hero-caption .sec-head__eyebrow{font-size:max(16px,.72vw)}
@media(max-width:600px){
 .fx3d #airflow-steps{grid-template-columns:minmax(0,1fr);gap:8px}
 .fx3d .airflow-step{display:flex;flex-direction:row;align-items:center;gap:14px;padding:12px 14px;text-align:left}
 .fx3d .airflow-step__title{flex:0 0 auto}
 .fx3d .airflow-step p{margin:0;font-size:16px;line-height:1.55}
}
.fx3d .airflow-step p{font-size:max(16px,.69vw)}

/* 離開畫面暫停（fx.js 依位置切換 m-paused） */
.fx3d .m-paused,.fx3d .m-paused *,.fx3d .m-paused::after,.fx3d .m-paused *::after{animation-play-state:paused!important}
/* 列印：進場前的隱藏狀態一律取消，內容完整印出 */
@media print{html.fx-on .c-reveal:not(.is-in),html.fx-on .c-reveal{opacity:1!important;transform:none!important;animation:none!important}.m-route,.m-comet,.c-ambient{display:none!important}}
/* 產品詳情頁頁首只有麵包屑，不撐高 */
.fx3d-detail .page-hero .page-hero__copy{min-height:0}
/* 產品詳情：大照片固定在格子上方（不隨右側資訊變高而掉到下半部） */
.fx3d .shop-page[data-page="product"] .shop-product-visual,.fx3d.shop-page[data-page="product"] .shop-product-visual{justify-content:flex-start}

/* 實績照片牆加強立體：牆厚分層加深、說明牌縮到左下，露出右下的透視地坪 */
.fx3d .m-case-wall .c-case-photo{box-shadow:1px 0 0 #e4ebf0,5px 3px 0 #ccd8e1,9px 5px 0 #bfcdd8,13px 7px 0 #b2c3cf,17px 9px 0 #a6b9c7,40px 50px 50px -26px #1f415e80}
@media(min-width:900px){
 .fx3d .m-case-wall{align-items:flex-end;justify-content:flex-start}
 .fx3d .m-case-wall .c-case-copy{width:min(64%,460px);margin-right:auto}
 .fx3d .m-case-wall .c-case-photo{height:60%}
}

/* ======================================================================
   v2（2026-10-03 老闆回饋：頁尾沒改、導航列不 OK、標題格太空、內頁要明顯改）
   ====================================================================== */

/* ---------- 頁首：滿版玻璃頁首＋中間一排立體按鍵（目前頁＝按下去的藍鍵） ---------- */
.fx3d .site-header{position:fixed;inset:0 0 auto;z-index:40;pointer-events:auto;background:linear-gradient(180deg,#ffffffeb,#f6faffe0);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 1px 0 #0f274712,0 14px 34px -26px #0f274780;border-bottom:0}
.fx3d .site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#4fc0f0 20%,#1e88e5 50%,#4fc0f0 80%,transparent);opacity:.75;pointer-events:none}
.fx3d .header-inner{border:0;border-radius:0;box-shadow:none;padding-inline:0}
.fx3d .header-inner::before{display:none}
.fx3d .site-nav__inner{padding-block:12px}
@media(min-width:1200px){
 .fx3d .nav-menu{gap:4px;padding:5px;border-radius:16px;background:linear-gradient(180deg,#e6eef6,#f4f8fc);box-shadow:inset 0 2px 5px #0f27471f,inset 0 -1px 0 #fff,0 1px 0 #fff}
 .fx3d .site-header .nav-link{height:44px;padding:2px clamp(9px,.72vw,17px) 0;border:1px solid #d6e2ec;border-bottom:3px solid #c3d4e2;border-radius:11px;background:linear-gradient(180deg,#fff,#f0f5fa);color:#173a5e;font-weight:800;box-shadow:0 1px 0 #fff inset,0 3px 6px -3px #0f274740;transition:transform .16s,box-shadow .16s,border-color .16s,color .16s}
 .fx3d .site-header .nav-link:hover,.fx3d .site-header .nav-item:focus-within>.nav-link{transform:translateY(-2px);color:#0267b9;border-color:#bfe0f5;border-bottom-color:#4fc0f0;box-shadow:0 1px 0 #fff inset,0 8px 14px -8px #0267b980;background:linear-gradient(180deg,#fff,#eaf5fd)}
 .fx3d .site-header .nav-link[aria-current="page"]{transform:translateY(1px);background:linear-gradient(180deg,#2a95ec,#0267b9);color:#fff;border-color:#0a5fa6;border-bottom-color:#014e8e;box-shadow:inset 0 2px 4px #00000026,0 1px 0 #ffffff8c}
 .fx3d .site-header .list-link--icon{width:52px;height:50px;border-radius:13px}
 .fx3d .site-header .mobile-menu__actions>.btn{height:50px;border-radius:13px}
}
/* 子選單：立體卡片，項目滑過出現藍色指示條 */
.fx3d .nav-sub{top:calc(100% + 12px);padding:10px;border:1px solid #d3e2ee;border-radius:18px;background:linear-gradient(180deg,#fff,#f4f9fd);box-shadow:0 1px 0 #fff inset,0 24px 50px -18px #0f274766,0 6px 14px -8px #0f274733}
.fx3d .nav-sub::after{left:18px;right:18px;height:3px}
.fx3d .nav-sub a{position:relative;padding:10px 16px 10px 20px;border-radius:10px;font-weight:600;color:#26486b}
.fx3d .nav-sub a::before{content:"";position:absolute;left:8px;top:50%;width:4px;height:0;border-radius:4px;background:linear-gradient(#4fc0f0,#0267b9);transform:translateY(-50%);transition:height .16s}
.fx3d .nav-sub a:hover,.fx3d .nav-sub a:focus-visible{background:#eaf4fd;color:#0267b9}
.fx3d .nav-sub a:hover::before,.fx3d .nav-sub a:focus-visible::before{height:60%}
/* 手機：清單與選單鈕也是立體按鍵 */
@media(max-width:1199px){
 .fx3d .site-header{inset:0 0 auto}
 .fx3d .header-inner{width:calc(100% - 32px)}
 .fx3d .site-header .list-link--compact,.fx3d .site-header .menu-toggle{border-radius:13px;border-bottom-width:3px}
 .fx3d .mobile-menu__nav .btn{border-radius:14px;border-bottom-width:4px}
}
.fx3d:not(.fx3d-home) main{padding-top:clamp(92px,6.6vw,112px)}
@media(max-width:1199px){.fx3d:not(.fx3d-home) main{padding-top:86px}}
@media(max-width:600px){.fx3d:not(.fx3d-home) main{padding-top:80px}}
@media(min-width:901px){.fx3d #hero{padding-top:104px}}

/* ---------- 首頁：區塊標題改成橫向標題列（不再佔一個大空格），下面全部給內容 ---------- */
.fx3d .c-section-title{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:var(--c-gap);padding:0 0 clamp(6px,.6vw,12px);border:0;border-radius:0;background:none;box-shadow:none;min-height:0}
.fx3d .c-section-title::before{display:none}
.fx3d .c-section-title .sec-head{position:relative;padding-left:clamp(16px,1.2vw,24px)}
.fx3d .c-section-title .sec-head::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:5px;border-radius:5px;background:linear-gradient(#4fc0f0,#0267b9);box-shadow:0 0 14px #4fc0f088}
.fx3d .c-section-title .sec-head>p:last-child{max-width:none}
.fx3d .c-section-title h2{font-size:clamp(30px,2.3vw,54px)}
.fx3d .c-section-title .btn{flex:0 0 auto}
@media(hover:hover){.fx3d:not(.fx3d-detail) .c-section-title.c-tile:hover{transform:none;box-shadow:none}}
.fx3d .c-products-grid{grid-template-areas:"title title title title title title title title title title title title" "p1 p1 p1 p1 p1 p1 p2 p2 p2 p3 p3 p3" "p1 p1 p1 p1 p1 p1 p4 p4 p4 p5 p5 p5";grid-template-rows:auto repeat(2,minmax(clamp(240px,15vw,330px),auto))}
.fx3d .c-scenes-grid{grid-template-areas:"title title title title title title title title title title title title" "s1 s1 s1 s1 s1 s1 s2 s2 s2 s2 s2 s2" "s1 s1 s1 s1 s1 s1 s3 s3 s3 s4 s4 s4";grid-template-rows:auto repeat(2,minmax(clamp(240px,15vw,330px),auto))}
@media(min-width:1280px){
 .fx3d .c-cases-grid{grid-template-areas:"title title title title title title title title title title title title" "k1 k1 k1 k1 k1 k1 k1 k2 k2 k2 k2 k2" "k1 k1 k1 k1 k1 k1 k1 k3 k3 k3 k3 k3";grid-template-rows:auto repeat(2,minmax(clamp(250px,14vw,330px),auto))}
}
@media(min-width:1900px){.fx3d .c-cases-grid{grid-template-areas:"title title title title title title title title title title title title" "k1 k1 k1 k1 k1 k1 k1 k2 k2 k2 k2 k2" "k1 k1 k1 k1 k1 k1 k1 k3 k3 k3 k3 k3"}}
.fx3d .c-product-1 .c-product-photo{height:clamp(300px,25vw,560px)}
.fx3d .c-scene-1 .c-scene-visual img{height:clamp(330px,26vw,600px)}
@media(min-width:900px) and (max-width:1279px){
 .fx3d .c-products-grid{grid-template-areas:"title title title title title title title title" "p1 p1 p1 p1 p2 p2 p3 p3" "p1 p1 p1 p1 p4 p4 p5 p5";grid-template-rows:auto auto auto}
 .fx3d .c-scenes-grid{grid-template-areas:"title title title title title title title title" "s1 s1 s1 s1 s2 s2 s2 s2" "s1 s1 s1 s1 s3 s3 s4 s4";grid-template-rows:auto auto auto}
 .fx3d .c-cases-grid{grid-template-areas:"title title title title title title title title" "k1 k1 k1 k1 k1 k1 k1 k1" "k2 k2 k2 k2 k3 k3 k3 k3"}
}
@media(max-width:899px){
 .fx3d .c-products-grid{grid-template-areas:"title title title title" "p1 p1 p1 p1" "p2 p2 p3 p3" "p4 p4 p5 p5";grid-template-rows:auto}
 .fx3d .c-scenes-grid{grid-template-areas:"title title title title" "s1 s1 s1 s1" "s2 s2 s2 s2" "s3 s3 s4 s4";grid-template-rows:auto}
 .fx3d .c-cases-grid{grid-template-areas:"title title title title" "k1 k1 k1 k1" "k2 k2 k3 k3"}
}
@media(max-width:599px){
 .fx3d .c-section-title{flex-direction:column;align-items:flex-start}
 .fx3d .c-products-grid{grid-template-areas:"title title" "p1 p1" "p2 p3" "p4 p5"}
 .fx3d .c-scenes-grid{grid-template-areas:"title title" "s1 s1" "s2 s2" "s3 s4"}
 .fx3d .c-cases-grid{grid-template-areas:"title title" "k1 k1" "k2 k2" "k3 k3"}
}
@media(max-width:419px){
 .fx3d .c-products-grid{grid-template-areas:"title title" "p1 p1" "p2 p2" "p3 p3" "p4 p4" "p5 p5"}
 .fx3d .c-scenes-grid{grid-template-areas:"title title" "s1 s1" "s2 s2" "s3 s3" "s4 s4"}
}

@media(min-width:900px){.fx3d .m-case-wall .c-case-photo{height:54%}}

/* ---------- 內頁頁首：一整座有景深的舞台（天空漸層＋流動風線＋透視地面＋漂浮立體圖），分類切換列＝立體按鍵列 ---------- */
.fx3d .page-hero .page-hero__card{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,32%);align-items:center;gap:var(--c-gap);min-height:clamp(250px,19vw,420px);padding:clamp(28px,2.8vw,64px);border:1px solid #cfe0ee;border-radius:var(--c-radius);background:radial-gradient(ellipse 55% 80% at 80% 30%,#ffffff 0,transparent 60%),linear-gradient(120deg,#ffffff 0%,#eef6fd 45%,#d8edfc 100%);box-shadow:var(--c-shadow);overflow:hidden}
.fx3d .page-hero .page-hero__card:not(:has(.page-hero__art)){grid-template-columns:minmax(0,1fr)}
.fx3d .page-hero .page-hero__card::before{content:"";display:block;position:absolute;inset:0 -50% 0 0;z-index:-1;width:auto;height:auto;border-radius:0;background:repeating-linear-gradient(176deg,transparent 0 46px,#4fc0f01c 46px 48px,transparent 48px 92px,#1e88e514 92px 93px,transparent 93px 140px);animation:ph-wind 14s linear infinite;pointer-events:none}
.fx3d .page-hero .page-hero__card::after{content:"";display:block;position:absolute;left:30%;right:-20%;bottom:0;top:auto;width:auto;height:46%;z-index:-1;border-radius:0;background:repeating-linear-gradient(90deg,#86b4d24d 0 1px,transparent 1px 64px),repeating-linear-gradient(0deg,#86b4d24d 0 1px,transparent 1px 40px);transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent,#000 70%);pointer-events:none;animation:none}
@keyframes ph-wind{from{transform:translateX(0)}to{transform:translateX(-33.33%)}}
.fx3d .page-hero .page-hero__copy{position:relative;z-index:1;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;gap:clamp(12px,1.1vw,22px)}
.fx3d .page-hero .page-hero__copy::before{display:none}
.fx3d .page-hero h1{font-size:clamp(34px,3vw,68px);font-weight:900;letter-spacing:-.02em;background:linear-gradient(90deg,#0f2747,#0267b9 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx3d .page-hero .page-hero__lead{font-size:clamp(17px,1vw,22px);max-width:40em}
.fx3d .page-hero .page-hero__art{position:relative;z-index:1;display:grid;place-items:center;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;align-self:stretch}
.fx3d .page-hero .page-hero__art::after{content:"";position:absolute;left:18%;right:18%;bottom:4%;height:10%;border-radius:50%;background:radial-gradient(ellipse,#0f274740,transparent 70%);filter:blur(2px);animation:ph-shadow 5.8s ease-in-out infinite;z-index:-1}
.fx3d .page-hero .page-hero__art img{width:min(84%,340px);mix-blend-mode:multiply;animation:c-float 5.8s ease-in-out infinite}
@keyframes ph-shadow{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.82);opacity:.6}}
/* 分類切換列＝與頁首導航同款的立體按鍵列 */
.fx3d .page-hero .subnav{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px;margin-top:var(--c-gap);padding:6px;border:0;border-radius:18px;background:linear-gradient(180deg,#e3ecf5,#f2f7fb);box-shadow:inset 0 2px 6px #0f27471f,inset 0 -1px 0 #fff,0 1px 0 #fff}
.fx3d .page-hero .subnav::before{display:none}
.fx3d .page-hero .subnav .btn{min-height:48px;height:auto;padding:12px clamp(16px,1.2vw,26px) 9px;border:1px solid #d6e2ec;border-bottom:3px solid #c3d4e2;border-radius:13px;background:linear-gradient(180deg,#fff,#f0f5fa);color:#173a5e;font-weight:800;box-shadow:0 1px 0 #fff inset,0 3px 6px -3px #0f274740;transition:transform .16s,box-shadow .16s,border-color .16s,color .16s}
.fx3d .page-hero .subnav .btn:hover{transform:translateY(-2px);color:#0267b9;border-bottom-color:#4fc0f0;box-shadow:0 1px 0 #fff inset,0 8px 14px -8px #0267b980}
.fx3d .page-hero .subnav .btn[aria-current="page"]{transform:translateY(1px);background:linear-gradient(180deg,#2a95ec,#0267b9);color:#fff;border-color:#0a5fa6;border-bottom-color:#014e8e;box-shadow:inset 0 2px 4px #00000026,0 1px 0 #ffffff8c}
.fx3d .page-hero .breadcrumb a.btn{border-radius:11px;border-bottom-width:3px}
/* 內頁區塊標題：小標膠囊＋左側發光色條（跟首頁標題列同語言） */
.fx3d main>section:not(.page-hero):not(#hero) .sec-head{position:relative;padding-left:clamp(16px,1.2vw,24px)}
.fx3d main>section:not(.page-hero):not(#hero) .sec-head:not(:empty)::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:5px;border-radius:5px;background:linear-gradient(#4fc0f0,#0267b9);box-shadow:0 0 14px #4fc0f088}
@media(max-width:899px){
 .fx3d .page-hero .page-hero__card{grid-template-columns:minmax(0,1fr) clamp(130px,30%,220px)}
}
@media(max-width:600px){
 .fx3d .page-hero .page-hero__card{grid-template-columns:minmax(0,1fr);min-height:0;padding:26px 20px}
 .fx3d .page-hero .page-hero__art{display:none}
 .fx3d .page-hero .subnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:6px}
 .fx3d .page-hero .subnav .btn{font-size:16px;padding-inline:8px;white-space:normal;word-break:keep-all}
}
.fx3d-detail .page-hero .page-hero__card{min-height:0;padding-block:clamp(18px,1.6vw,30px)}
.fx3d .page-hero .page-hero__art{z-index:auto}

/* ---------- 專業工程安裝：五張服務卡（照片＋編號＋說明），6 欄格線排成 3＋2，不落單 ---------- */
.fx3d .svc-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--c-gap)}
.fx3d .svc-grid>.svc-card{grid-column:span 2;flex:none;display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;text-decoration:none}
.fx3d .svc-grid>.svc-card:nth-child(n+4){grid-column:span 3}
.fx3d .svc-card__photo{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:#e8f1f8}
.fx3d .svc-card__photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.fx3d .svc-card:hover .svc-card__photo img{transform:scale(1.06)}
.fx3d .svc-card__photo::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,#0f274733);pointer-events:none}
.fx3d .svc-card__body{position:relative;display:flex;flex-direction:column;gap:12px;flex:1;padding:clamp(22px,1.8vw,36px)}
.fx3d .svc-card__no{position:absolute;right:clamp(18px,1.4vw,30px);top:calc(clamp(22px,1.8vw,36px) * -1 - 28px);display:grid;place-items:center;width:56px;height:56px;border:1px solid #fff;border-bottom:4px solid #014e8e;border-radius:16px;background:linear-gradient(145deg,#4fc0f0,#1e88e5 55%,#0267b9);color:#fff;font:900 22px/1 "Outfit",var(--font);box-shadow:0 12px 20px -10px #0267b9aa}
.fx3d .svc-card h2{margin:0;color:#0f2747;font-size:clamp(22px,1.4vw,32px)}
.fx3d .svc-card p{margin:0;color:#36506f}
.fx3d .svc-card__more{align-self:flex-start;margin-top:auto}
@media(max-width:1023px){.fx3d .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fx3d .svc-grid>.svc-card,.fx3d .svc-grid>.svc-card:nth-child(n+4){grid-column:span 1}.fx3d .svc-grid>.svc-card:last-child{grid-column:1 / -1}.fx3d .svc-grid>.svc-card:last-child .svc-card__photo{aspect-ratio:21/8}}
@media(max-width:600px){.fx3d .svc-grid{grid-template-columns:minmax(0,1fr)}.fx3d .svc-grid>.svc-card:last-child .svc-card__photo{aspect-ratio:16/10}}

/* ---------- 電商平台：兩張大平台卡（左邊立體徽章、右邊說明） ---------- */
.fx3d .plat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--c-gap)}
.fx3d .plat-grid>.plat-card{flex:none;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(20px,2vw,40px);padding:clamp(26px,2.4vw,52px);text-align:left;min-height:clamp(230px,15vw,320px)}
.fx3d .plat-card__badge{display:grid;place-items:center;width:clamp(110px,8vw,160px);aspect-ratio:1;border:1px solid #fff;border-radius:30px;color:#fff;box-shadow:inset 0 2px 0 #ffffff80,inset 0 -8px 0 #00000026,0 26px 40px -22px #0f2747aa;animation:c-float 5.6s ease-in-out infinite}
.fx3d .plat-card--shopee .plat-card__badge{background:linear-gradient(145deg,#ff9a5a,#f5572d 60%,#d9411c)}
.fx3d .plat-card--site .plat-card__badge{background:linear-gradient(145deg,#4fc0f0,#1e88e5 55%,#0267b9);animation-delay:-2.8s}
.fx3d .plat-card__badge svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.fx3d .plat-card__body{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.fx3d .plat-card h2{color:#0f2747;font-size:clamp(26px,1.9vw,42px)}
.fx3d .extra-platform>.plat-card__body>.btn{align-self:flex-start;margin-top:6px}
@media(max-width:899px){.fx3d .plat-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.fx3d .plat-grid>.plat-card{grid-template-columns:minmax(0,1fr)}}

/* ---------- 產業應用：場域圖已在頁首，內容區不重複放；改成一條「常見問題」橫向方格 ---------- */
.fx3d .application-scene .application-visual{display:none}
.fx3d .application-scene .application-layout{display:block}
.fx3d .application-scene .application-copy{display:flex;align-items:center;justify-content:space-between;gap:var(--c-gap);flex-wrap:wrap;padding:clamp(22px,2vw,40px) clamp(24px,2.4vw,48px);border:1px solid #cdddea;border-radius:var(--c-radius);background:linear-gradient(120deg,#fff 40%,#e9f4fd);box-shadow:var(--c-shadow)}
.fx3d .application-scene .application-copy .sec-head{display:flex;align-items:center;flex-wrap:wrap;gap:14px 26px;margin:0}
.fx3d .application-scene .application-copy h2{margin:0;white-space:nowrap}
.fx3d .application-scene .application-pains{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.fx3d .application-scene .application-pains li{display:inline-flex;align-items:center;gap:8px;padding:9px 18px 7px;border:1px solid #f3c58a;border-bottom:3px solid #e8a24a;border-radius:40px;background:linear-gradient(#fff8ee,#ffeacc);color:#8a4b06;font-weight:800;font-size:clamp(16px,.95vw,20px)}
.fx3d .application-scene .application-pains li::before{content:"";width:9px;height:9px;border-radius:50%;background:#f59e0b;box-shadow:0 0 8px #f59e0b99}
.fx3d .application-scene .application-solution{margin:0}
.fx3d .application-scene .application-copy{flex-direction:row;text-align:left}
.fx3d .application-scene .application-copy .sec-head{flex-direction:row;align-items:center;justify-content:flex-start;padding-left:0;text-align:left}
.fx3d .application-scene .application-copy .sec-head::before{display:none}
.fx3d .application-scene .application-copy h2{position:relative;padding-left:22px;font-size:clamp(24px,1.6vw,34px)}
.fx3d .application-scene .application-copy h2::before{content:"";position:absolute;left:0;top:10%;bottom:10%;width:5px;border-radius:5px;background:linear-gradient(#f5b54a,#e8890c);box-shadow:0 0 12px #f59e0b88}
@media(max-width:600px){.fx3d .application-scene .application-copy{flex-direction:column;align-items:flex-start}}
.fx3d .application-scene .application-copy .sec-head{width:auto;flex:1 1 auto}
.fx3d .application-scene .application-pains li{padding-left:18px}
.fx3d .application-scene .application-pains li::before{position:static;box-shadow:0 0 8px #f59e0b99}
.fx3d .svc-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fx3d .svc-grid--3>.svc-card,.fx3d .svc-grid--3>.svc-card:nth-child(n+4){grid-column:auto}
@media(max-width:1023px){.fx3d .svc-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}.fx3d .svc-grid--3>.svc-card:last-child{grid-column:1 / -1}}
@media(max-width:600px){.fx3d .svc-grid--3{grid-template-columns:minmax(0,1fr)}}

/* ---------- 改善做法：每種做法＝一整塊方格（左：編號＋做法；右：建議設備），三塊之間不畫分隔線 ---------- */
.fx3d .subpage-method+.subpage-method>.band{border-top:0;padding-top:0}
.fx3d .subpage-method{counter-increment:fxmethod}
.fx3d main{counter-reset:fxmethod}
.fx3d .subpage-method__layout{grid-template-columns:minmax(260px,.75fr) minmax(0,2fr);align-items:stretch;gap:0;border:1px solid #cdddea;border-radius:var(--c-radius);background:#fff;box-shadow:var(--c-shadow);overflow:hidden}
.fx3d .subpage-method__intro{position:relative;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:clamp(28px,2.6vw,56px) clamp(24px,2.2vw,48px) !important;background:radial-gradient(ellipse at 0% 100%,#4fc0f040,transparent 60%),linear-gradient(150deg,#e9f5fe,#d2e9fb);color:#0f2747}
.fx3d .subpage-method__intro::before{content:counter(fxmethod,decimal-leading-zero) !important;position:static !important;display:grid !important;place-items:center;width:62px !important;height:62px;border:1px solid #fff;border-bottom:4px solid #014e8e;border-radius:18px !important;background:linear-gradient(145deg,#4fc0f0,#1e88e5 55%,#0267b9) !important;color:#fff;font:900 24px/1 "Outfit",var(--font);box-shadow:0 14px 22px -12px #0267b9aa !important}
.fx3d .subpage-method__intro h2{font-size:clamp(28px,2.1vw,46px)}
.fx3d .subpage-method__intro p{font-size:clamp(17px,1vw,22px);color:#36506f}
.fx3d .subpage-method__equipment{padding:clamp(22px,2vw,40px)}
.fx3d .subpage-method__equipment>h3{font-size:16px;letter-spacing:.12em;color:#0267b9;margin-bottom:14px}
.fx3d .subpage-method .subpage-equipment{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.fx3d .subpage-method .subpage-equipment>.products-card{box-shadow:inset 0 2px 0 #fff,inset 0 -4px 0 #dbe8f3,0 10px 20px -14px #154a7466}
.fx3d .subpage-method .subpage-equipment>.products-card:only-child{max-width:520px}
@media(max-width:899px){.fx3d .subpage-method__layout{grid-template-columns:minmax(0,1fr)}}
.fx3d .subpage-method__intro{align-self:stretch}
.fx3d .subpage-method .subpage-equipment>.products-card:only-child{max-width:none}
.fx3d .subpage-method .subpage-equipment>.products-card:only-child figcaption h3{font-size:clamp(24px,1.7vw,36px)}
@media(min-width:1200px){.fx3d .nav-menu{gap:6px}}
/* 主選單 9 項（2026-10-04 影音專區拉出來）：1200～1279 最窄桌機段再縮，仍一行排完、字不小於 16px */
@media(min-width:1200px) and (max-width:1299px){.fx3d .site-header .nav-link{padding-inline:8px;font-size:16px}.fx3d .site-header .site-brand__name{font-size:18px}}
@media(min-width:1200px) and (max-width:1279px){.fx3d .nav-menu{gap:6px;padding:4px}.fx3d .site-header .nav-link{padding-inline:3px}.fx3d .site-header .site-brand__name{font-size:16px}.fx3d .header-inner,.fx3d .site-nav__inner{gap:6px}}
@media(min-width:1800px){.fx3d .site-header .nav-link{height:52px;font-size:20px;padding-inline:clamp(16px,.9vw,24px)}.fx3d .nav-menu{gap:8px;padding:6px}.fx3d .site-header .list-link--icon,.fx3d .site-header .mobile-menu__actions>.btn{height:56px}}
/* 主選單 10 項、每項四個字（2026-10-05 老闆：「我要都四個字」，產品系列、服務項目）：選單比原本寬，各寬度重新配空間，
   品牌字、選單、購物車之間留 6px 以上（量測工具 _tools/member_header_sweep.js）。
   區間上限寫 .98 是為了瀏覽器縮放時的小數寬度不漏接。
   1200～1599：會員鈕只留人像圖示，做成跟購物車鈕一樣的方鈕（1199 以下本來就是這樣）；1600 以上才顯示「會員登入」。 */
@media(min-width:1200px) and (max-width:1599.98px){
 .fx3d .site-header .member-link--icon,.fx3d.fx3d-home .site-header .member-link--icon{width:52px;padding:0;gap:0;justify-content:center}
 .fx3d .site-header .member-link--icon .member-link__text{display:none}
}
@media(min-width:1200px) and (max-width:1279.98px){.fx3d.fx3d-home .site-header .member-link--icon{width:46px}}
/* 選單鍵內距：內頁 1280～1399、首頁 1280～1399（首頁頁首較窄，鍵距也收到 3px）、兩者 1400～1599、1800 以上 */
@media(min-width:1280px) and (max-width:1399.98px){
 .fx3d .site-header .primary-nav .nav-link{padding-inline:clamp(3px,calc(5.6px + (100vw - 1280px) * .03),9px)}
 .fx3d.fx3d-home .site-header .nav-menu{gap:3px}
 .fx3d.fx3d-home .site-header .primary-nav .nav-link{padding-inline:clamp(3px,calc(3.1px + (100vw - 1280px) * .044),8.2px)}
}
@media(min-width:1400px) and (max-width:1599.98px){.fx3d .site-header .primary-nav .nav-link,.fx3d.fx3d-home .site-header .primary-nav .nav-link{padding-inline:clamp(3px,calc(6.7px + (100vw - 1400px) * .042),11.5px)}}
@media(min-width:1800px){.fx3d .site-header .primary-nav .nav-link{padding-inline:min(clamp(16px,.9vw,24px),calc(10.3px + (100vw - 1800px) * .037))}}

/* ======================================================================
   內頁頁首 v3（2026-10-03 老闆：每頁頁首要不一樣、不要太空；所有頁大小要一樣；右邊全部都要有 3D 動態圖）
   右側＝即時 3D 小場景（js/hero-stage.js，每頁主題不同）；六種色調；左側數量標籤
   高度：固定 var(--hero-h)，同一寬度下全站每一頁一樣高（不用 min-height，內容不可撐高）
   ====================================================================== */
.fx3d{--hero-h:clamp(340px,24vw,480px)}
.fx3d .page-hero .page-hero__card{grid-template-columns:minmax(0,1fr) minmax(320px,48%);height:var(--hero-h);min-height:0;padding:clamp(18px,1.6vw,32px) clamp(28px,2.8vw,64px);box-sizing:border-box;align-items:stretch}
.fx3d .page-hero .page-hero__copy{min-height:0;max-height:100%;overflow:hidden;justify-content:center}
/* 麵包屑固定一行（太長可左右滑），不讓它換行撐高 */
.fx3d .page-hero .breadcrumb{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;white-space:nowrap;max-width:100%;padding-bottom:4px}
.fx3d .page-hero .breadcrumb::-webkit-scrollbar{display:none}
.fx3d .page-hero .breadcrumb li{flex:0 0 auto}
.fx3d .page-hero .page-hero__lead{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.fx3d .page-hero .page-hero__card:has(.hv-tone-sky){background:radial-gradient(ellipse 60% 90% at 78% 40%,#fff 0,transparent 60%),linear-gradient(120deg,#fff 0%,#eef6fd 42%,#cfe6fa 100%)}
.fx3d .page-hero .page-hero__card:has(.hv-tone-ice){background:radial-gradient(ellipse 60% 90% at 78% 40%,#fff 0,transparent 60%),linear-gradient(120deg,#fff 0%,#ebf9fd 42%,#c6ecf8 100%)}
.fx3d .page-hero .page-hero__card:has(.hv-tone-teal){background:radial-gradient(ellipse 60% 90% at 78% 40%,#fff 0,transparent 60%),linear-gradient(120deg,#fff 0%,#ecf9f7 42%,#c8ece6 100%)}
.fx3d .page-hero .page-hero__card:has(.hv-tone-steel){background:radial-gradient(ellipse 60% 90% at 78% 40%,#fff 0,transparent 60%),linear-gradient(120deg,#fff 0%,#eff3fb 42%,#d3ddf3 100%)}
.fx3d .page-hero .page-hero__card:has(.hv-tone-warm){background:radial-gradient(ellipse 50% 80% at 82% 30%,#fff3dd 0,transparent 60%),linear-gradient(120deg,#fff 0%,#f4f8fd 45%,#d9eaf9 100%)}
.fx3d .page-hero .page-hero__card:has(.hv-tone-mist){background:radial-gradient(ellipse 60% 90% at 78% 40%,#fff 0,transparent 60%),linear-gradient(120deg,#fff 0%,#f1f7fd 42%,#dde9f8 100%)}

/* 數量標籤：立體小方塊（大數字＋單位） */
.fx3d .hv-stats{display:flex;flex-wrap:wrap;gap:12px;margin:2px 0 0;padding:0;list-style:none}
.fx3d .hv-stats li{display:inline-flex;align-items:baseline;gap:8px;padding:9px 16px 8px;border:1px solid #fff;border-bottom:3px solid #c9dbea;border-radius:16px;background:linear-gradient(180deg,#ffffffee,#eef6fdd9);box-shadow:0 10px 22px -14px #0f274766}
.fx3d .hv-stats b{font:900 clamp(22px,1.6vw,34px)/1 "Outfit",var(--font);color:#0267b9}
.fx3d .hv-stats span{font-size:16px;font-weight:700;color:#36506f;white-space:nowrap}

/* 右側 3D 舞台 */
.fx3d .page-hero .hv{position:relative;display:grid;place-items:center;align-self:stretch;height:100%;min-height:0;container-type:size;margin:calc(clamp(18px,1.6vw,32px) * -1) calc(clamp(28px,2.8vw,64px) * -1) calc(clamp(18px,1.6vw,32px) * -1) 0;padding:0;isolation:isolate;overflow:hidden;border-radius:0 var(--c-radius) var(--c-radius) 0;cursor:grab}
.fx3d .page-hero .hv::after{display:none}
.fx3d .hv__glow{position:absolute;left:10%;right:10%;top:6%;bottom:10%;z-index:0;border-radius:50%;background:radial-gradient(circle,#ffffffd9 0,#ffffff00 68%);pointer-events:none}
/* 備援圖＝該頁 3D 第一個畫面的實拍圖（長寬比 3）：取景跟 3D 鏡頭一樣以「寬、高較小的一邊」為準置中，3D 畫好後直接換手，畫面不跳 */
.fx3d .page-hero .hv .hv__img{position:absolute;z-index:1;left:50%;top:50%;width:auto;height:min(100cqh,100cqw);max-width:none;aspect-ratio:3;transform:translate(-50%,-50%);object-fit:contain;mix-blend-mode:normal;animation:none}
.fx3d .hv__canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block;opacity:0}
/* 沒有實拍圖（新加的產品分類）才讓 3D 淡入 */
.fx3d .hv:not(:has(.hv__img[src])) .hv__canvas{transition:opacity .6s}
.fx3d .hv.is-live .hv__canvas{opacity:1}
.fx3d .hv.is-live .hv__img{opacity:0}

/* 寬度調整：同一寬度全站同高 */
@media(max-width:1199px){.fx3d{--hero-h:350px}.fx3d .page-hero .page-hero__card{grid-template-columns:minmax(0,1fr) minmax(260px,46%)}}
@media(max-width:899px){.fx3d{--hero-h:330px}.fx3d .page-hero .page-hero__card{grid-template-columns:minmax(0,1fr) minmax(200px,44%)}}
@media(max-width:600px){
 .fx3d{--hero-h:460px}
 .fx3d .page-hero .page-hero__card{grid-template-columns:minmax(0,1fr);grid-template-rows:200px minmax(0,1fr);padding:0 18px 18px;gap:4px}
 .fx3d .page-hero .page-hero__art.hv{display:grid;order:-1;height:200px;margin:0 -18px;border-radius:var(--c-radius) var(--c-radius) 0 0}
 .fx3d .page-hero .page-hero__copy{justify-content:flex-start}
}

/* 頁首玻璃改由底層繪製：頁首本身不可有 backdrop-filter（會把全螢幕手機選單框在頁首那一條裡） */
.fx3d .site-header{background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.fx3d .site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#ffffffeb,#f6faffe0);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);pointer-events:none}

/* ---------- 手機／平板選單（寬度 ≤1199）：頂端固定的商標列＋每組一張立體卡片＋底部固定的預約鈕 ---------- */
@media(max-width:1199px){
 .fx3d .site-header .mobile-menu.is-open:not([hidden]){background:radial-gradient(ellipse 80% 40% at 100% 0,#d8edfc,transparent 60%),linear-gradient(180deg,#f6faff,#eaf3fb)}
 .fx3d .site-header .mobile-menu__inner{gap:14px;padding:0 0 calc(96px + env(safe-area-inset-bottom));width:calc(100% - 32px)}
 .fx3d .site-header .mobile-menu__head{position:sticky;top:0;z-index:2;margin:0 -16px;padding:12px 16px;background:#f6fafff2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 #0f274712,0 10px 20px -18px #0f274766}
 .fx3d .site-header .mobile-menu__head .site-brand__name{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:900;color:#0f2747}
 .fx3d .site-header .mobile-menu__head .site-brand__name::before{content:"";width:40px;height:35px;background:url('../../assets/img/logo.png') center/contain no-repeat}
 .fx3d .site-header .mobile-menu__head [data-menu-close]{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px;border-radius:14px;border-bottom-width:3px;font-size:17px}
 .fx3d .site-header .mobile-menu__head [data-menu-close]::before{content:"";width:16px;height:16px;background:linear-gradient(45deg,transparent 44%,currentColor 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,currentColor 44% 56%,transparent 56%)}
 .fx3d .site-header .mobile-menu__nav{gap:14px}
 .fx3d .mobile-menu__group{gap:10px;padding:12px;border:1px solid #d6e4f0;border-radius:20px;background:linear-gradient(160deg,#fff 50%,#f1f7fd);box-shadow:inset 0 2px 0 #fff,0 12px 24px -18px #0f274766}
 .fx3d .mobile-menu__group>.btn{justify-content:space-between;height:50px;padding:0 16px;border:0;border-radius:14px;background:linear-gradient(90deg,#eaf4fd,#f7fbff);color:#0f2747;font-size:18px;font-weight:900;box-shadow:inset 4px 0 0 #1e88e5}
 .fx3d .mobile-menu__group>.btn::after{content:"›";font-size:24px;line-height:1;color:#1e88e5}
 .fx3d .mobile-menu__group>.btn[aria-current="page"]{background:linear-gradient(90deg,#1e88e5,#0267b9);color:#fff;box-shadow:inset 0 2px 4px #00000026}
 .fx3d .mobile-menu__group>.btn[aria-current="page"]::after{color:#fff}
 .fx3d .mobile-menu__subnav{display:flex;flex-wrap:wrap;gap:8px}
 .fx3d .site-header .mobile-menu__subnav .btn{flex:1 1 calc(50% - 8px);min-width:0;min-height:46px;padding:9px 10px;border:1px solid #d6e2ec;border-bottom:3px solid #c3d4e2;border-radius:12px;background:linear-gradient(180deg,#fff,#f0f5fa);color:#173a5e;font-weight:700;box-shadow:0 3px 6px -4px #0f274740}
 .fx3d .site-header .mobile-menu__subnav .btn[aria-current="page"]{background:linear-gradient(180deg,#2a95ec,#0267b9);color:#fff;border-color:#0a5fa6;border-bottom-color:#014e8e}
 .fx3d .site-header .mobile-menu.is-open .mobile-menu__actions{position:fixed;left:0;right:0;bottom:0;z-index:3;display:flex;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#f6fafff2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 -1px 0 #0f274712,0 -10px 20px -18px #0f274766}
 .fx3d .site-header .mobile-menu.is-open .mobile-menu__actions>.btn{flex:1 1 auto;height:54px;font-size:18px}
}
@media(min-width:600px) and (max-width:1199px){
 .fx3d .site-header .mobile-menu__subnav .btn{flex-basis:calc(33.33% - 8px)}
 .fx3d .site-header .mobile-menu__nav{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}
@media(min-width:900px) and (max-width:1199px){.fx3d .site-header .mobile-menu__subnav .btn{flex-basis:calc(50% - 8px)}}
@media(max-width:1199px){
 .fx3d .site-header .mobile-menu__subnav .btn,.fx3d .site-header .mobile-menu__subnav .btn{flex:1 1 auto;white-space:nowrap;padding-inline:14px}
 .fx3d .site-header .mobile-menu__nav{align-items:stretch}
}
@media(min-width:600px) and (max-width:1199px){.fx3d .site-header .mobile-menu__subnav .btn{flex-basis:auto}}
@media(min-width:900px) and (max-width:1199px){.fx3d .site-header .mobile-menu__subnav .btn{flex-basis:auto}}
@media(max-width:1199px){.fx3d .site-header .mobile-menu__subnav .btn{width:auto}.fx3d .mobile-menu__group{align-content:start}}
/* 頁首文字區：間距收緊，固定高度內放得下（說明最多 3 行） */
.fx3d .page-hero .page-hero__copy{gap:clamp(8px,.75vw,16px)}
.fx3d .page-hero .shop-sample{margin:0;padding:8px 12px;font-size:16px;line-height:1.5}
.fx3d .page-hero .shop-action-row:empty{display:none}

/* ---------- 首頁產業應用四格：各寬度一致（2026-10-03 老闆：手機版商用顯示有問題） ---------- */
.fx3d .c-scene{position:relative}
.fx3d .c-scene .c-scene-visual{position:static}
.fx3d .c-scene-visual img{display:block;margin-inline:auto}
@media(max-width:899px){
 .fx3d .c-scenes-grid{grid-template-areas:"title title title title" "s1 s1 s2 s2" "s3 s3 s4 s4"}
 .fx3d .c-scene,.fx3d .c-scene-2{flex-direction:column;align-items:stretch}
 .fx3d .c-scene-2 .c-scene-visual,.fx3d .c-scene .c-scene-visual{width:100%;flex:1 1 auto}
 .fx3d .c-scene-visual img,.fx3d .c-scene-1 .c-scene-visual img{height:clamp(150px,26vw,230px);width:100%;object-fit:contain}
 .fx3d .c-scene-1 h3,.fx3d .c-scene h3{font-size:clamp(20px,3vw,26px)}
}
@media(max-width:599px){.fx3d .c-scenes-grid{grid-template-areas:"title title" "s1 s2" "s3 s4"}}
@media(max-width:479px){
 .fx3d .c-scenes-grid{grid-template-areas:"title title" "s1 s1" "s2 s2" "s3 s3" "s4 s4"}
 .fx3d .c-scene{flex-direction:row;align-items:center;gap:14px}
 .fx3d .c-scene .c-scene-visual,.fx3d .c-scene-2 .c-scene-visual{width:44%;flex:0 0 44%}
 .fx3d .c-scene-visual img,.fx3d .c-scene-1 .c-scene-visual img{height:auto;max-height:150px}
 .fx3d .c-scene .c-scene-copy{flex:1;min-width:0;padding:0}
}
@media(min-width:340px) and (max-width:419px){
 .fx3d .c-products-grid{grid-template-areas:"title title" "p1 p1" "p2 p3" "p4 p5"}
 .fx3d .c-product-photo{height:clamp(120px,34vw,150px)}
 .fx3d .c-product h3{font-size:18px}
}
@media(min-width:340px) and (max-width:419px){
 .fx3d .c-products-grid{grid-template-areas:"title title" "p1 p1" "p2 p3" "p4 p5" !important}
}
@media(max-width:339px){.fx3d .c-products-grid{grid-template-areas:"title title" "p1 p1" "p2 p2" "p3 p3" "p4 p4" "p5 p5"}}
/* 產品分類／產品詳情頁：舊樣式用 #id 把頁首壓成單欄，這裡用同等權重蓋回左右兩欄 */
.fx3d.shop-page[data-page] #category-main .page-hero__card,.fx3d.shop-page[data-page] #product-intro .page-hero__card{grid-template-columns:minmax(0,1fr) minmax(320px,48%)}
@media(max-width:1199px){.fx3d.shop-page[data-page] #category-main .page-hero__card,.fx3d.shop-page[data-page] #product-intro .page-hero__card{grid-template-columns:minmax(0,1fr) minmax(260px,46%)}}
@media(max-width:899px){.fx3d.shop-page[data-page] #category-main .page-hero__card,.fx3d.shop-page[data-page] #product-intro .page-hero__card{grid-template-columns:minmax(0,1fr) minmax(200px,44%)}}
@media(max-width:600px){.fx3d.shop-page[data-page] #category-main .page-hero__card,.fx3d.shop-page[data-page] #product-intro .page-hero__card{grid-template-columns:minmax(0,1fr)}}
.fx3d .page-hero .shop-sample:empty,.fx3d .page-hero .page-hero__lead:empty{display:none}
.fx3d #product-intro .page-hero__card{padding-block:clamp(18px,1.6vw,32px)}
.fx3d.shop-page[data-page="product"] .crumb a{min-height:0;height:auto;white-space:nowrap}
/* 備援圖白底要能融進背景：舞台本身不可自成混合群組 */
.fx3d .page-hero .hv{isolation:auto}
.fx3d .page-hero .page-hero__card{isolation:isolate}
/* 產品詳情頁：頁首只有麵包屑，品名可換行完整顯示 */
.fx3d #product-intro .breadcrumb{flex-wrap:wrap;white-space:normal;overflow:visible}
.fx3d #product-intro .breadcrumb li{flex:0 1 auto;white-space:normal}
/* 產品詳情頁麵包屑按鈕維持好點的高度 */
.fx3d.shop-page[data-page="product"] .crumb a{min-height:44px;padding-block:6px}
/* 手機：麵包屑只留「首頁 › 上一層 › 本頁」並可換行，不左右溢出；頁首高度統一放寬 */
@media(max-width:600px){
 .fx3d{--hero-h:500px}
 .fx3d .page-hero .breadcrumb{flex-wrap:wrap;overflow:visible;white-space:normal;row-gap:6px}
 .fx3d .page-hero .breadcrumb li:not(:first-child):not(:last-child):not(:nth-last-child(2)){display:none}
 .fx3d .page-hero .breadcrumb li{flex:0 1 auto;min-width:0}
 .fx3d .page-hero .breadcrumb a.btn{min-height:44px;height:auto;padding:6px 12px}
 .fx3d .page-hero .page-hero__card{grid-template-rows:190px minmax(0,1fr)}
 .fx3d .page-hero .page-hero__art.hv{height:190px}
}
@media(max-width:600px){.fx3d{--hero-h:540px}.fx3d .page-hero .page-hero__lead{-webkit-line-clamp:4}.fx3d .page-hero .shop-sample{padding:6px 10px}}
.fx3d .page-hero .hv{cursor:default}
.fx3d .page-hero .hv.hv--drag{cursor:grab}
.fx3d .page-hero .hv.hv--drag:active{cursor:grabbing}
@keyframes hv-chip{from{opacity:0}to{opacity:1}}
.fx3d .page-hero .hv.hv--drag::before{animation:hv-chip .5s ease both;content:"可拖曳旋轉";position:absolute;right:14px;bottom:12px;z-index:3;padding:4px 10px;border-radius:20px;background:#ffffffcc;color:#36506f;font-size:16px;font-weight:700;box-shadow:0 4px 10px -6px #0f274766;pointer-events:none}

/* 手機頁首縮矮（2026-10-04 老闆同意「縮矮」）：3D 舞台 120px、標題 30px、說明最多 3 行；分頁鍵照字數排、一行放多顆。
   高度仍是同一寬度全站同高（--hero-h），數值依全站 68 頁實測內容最高者訂 */
@media(max-width:600px){
 .fx3d{--hero-h:460px}
 .fx3d .page-hero .page-hero__card{grid-template-rows:120px minmax(0,1fr);padding:0 16px 16px;gap:4px}
 .fx3d .page-hero .page-hero__art.hv{height:120px;margin:0 -16px}
 .fx3d .page-hero .page-hero__copy{gap:10px}
 .fx3d .page-hero h1{font-size:30px}
 .fx3d .page-hero .page-hero__lead{-webkit-line-clamp:3}
 .fx3d .page-hero .subnav{display:flex;flex-wrap:wrap;gap:6px;padding:6px}
 .fx3d .page-hero .subnav .btn{flex:1 1 auto;min-height:44px;padding:9px 12px 7px;white-space:nowrap}
}
@media(min-width:360px) and (max-width:600px){.fx3d{--hero-h:436px}}
@media(max-width:339px){.fx3d .page-hero .subnav .btn{flex-basis:calc(50% - 3px);padding-inline:8px;white-space:normal;word-break:keep-all}}
@media(max-width:600px){.fx3d .page-hero h1{text-wrap:balance}}

/* LINE 浮動鈕（2026-10-04 老闆同意「縮小成圓鈕」）：手機、平板、一般筆電只留 LINE 對話框圖示的小圓鈕，少蓋內容；更大的螢幕維持原本的「LINE」字樣鈕。
   文字改用圖示呈現，連結名稱仍由 aria-label「LINE 詢價」提供；用 flex 置中（grid 會讓隱藏的「LINE」字多佔一列，把圖示往上擠約 4px） */
@media(max-width:1599px){
 .line-fab{display:flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;border-radius:50%;font-size:0;letter-spacing:0}
 .line-fab::before{content:"";width:34px;height:32px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 38'%3E%3Cpath fill='%23fff' d='M20 2C9.5 2 1 8.9 1 17.4c0 7.6 6.8 14 15.9 15.2.6.1 1.5.4 1.7.9.2.5.1 1.2.1 1.7l-.3 1.6c-.1.5-.4 1.9 1.7 1 2.1-.9 11.2-6.6 15.3-11.3C38.2 23.4 39 20.5 39 17.4 39 8.9 30.5 2 20 2z'/%3E%3Ctext x='20' y='21.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='900' font-size='10' fill='%2306c755'%3ELINE%3C/text%3E%3C/svg%3E") center/contain no-repeat}
}
@media(max-width:600px){
 .line-fab{width:48px;height:48px;right:14px;bottom:14px}
 .line-fab::before{width:31px;height:29px}
}

/* 內頁頁首降低高度（2026-10-05 老闆：「太高了，高度降低…每一頁都要改，高度都要一樣」）：寬度 601 以上
   上下內距、標題、說明、數量標籤一起收小，3D 舞台跟著變矮（取景以舞台高度為準，會等比例縮小）；
   高度仍是同一寬度全站同高（--hero-h），數值依全站實測內容最高的頁訂。手機（600 以下）10/04 已縮過，不動 */
@media(min-width:601px){
 .fx3d{--hero-py:clamp(14px,1.1vw,20px);--hero-h:330px}
 .fx3d .page-hero .page-hero__card,.fx3d.shop-page[data-page] #product-intro .page-hero__card{padding-block:var(--hero-py)}
 .fx3d .page-hero .hv{margin-block:calc(var(--hero-py) * -1);height:calc(100% + var(--hero-py) * 2)}
 .fx3d .page-hero .page-hero__copy{gap:clamp(6px,.5vw,12px)}
 .fx3d .page-hero h1{font-size:clamp(30px,2.3vw,46px)}
 .fx3d .art-page .page-hero .page-hero__copy h1{font-size:clamp(26px,1.7vw,40px)}
 .fx3d .page-hero .page-hero__lead{font-size:clamp(17px,.9vw,20px)}
 .fx3d .hv-stats li{padding:6px 14px 5px}
 .fx3d .hv-stats b{font-size:clamp(20px,1.3vw,28px)}
}
@media(min-width:760px){.fx3d{--hero-h:300px}}
@media(min-width:840px){.fx3d{--hero-h:clamp(290px,calc(12vw + 62px),312px)}}

/* 卡片一律同寬、照片框一律正方（2026-10-06 老闆：不要有的長有的胖）：張數少也不拉寬，不足一列時置中 */
.fx3d.shop-page .shop-grid[data-cols], .fx3d.shop-page .shop-category-grid[data-cols], .fx3d.shop-page .shop-related-grid[data-cols] { justify-content: center; }
.fx3d.shop-page .shop-grid[data-cols] > .shop-product-card,
.fx3d.shop-page .shop-category-grid[data-cols] > .shop-category-card,
.fx3d.shop-page .shop-related-grid[data-cols] > .shop-related-card { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--g)) / var(--cols)); }
.fx3d.fx3d.shop-page :is(.shop-product-card, .shop-category-card, .shop-related-card) :is(.shop-photo, .shop-photo-placeholder) { box-sizing: border-box; height: auto; aspect-ratio: 1 / 1; overflow: hidden; }
.fx3d.fx3d.shop-page :is(.shop-product-card, .shop-category-card, .shop-related-card) .shop-photo { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }