/* ============================================================
* 謹騰電器空調行 · Fuding-Style Redesign
* 2026-05-12 · 嚴格仿富鼎冷氣（fuding-airconditioner.com）風格
* 設計 tokens 直接取自 fuding：#132248 deep navy + 純白 + 留白
* ============================================================ */
/* 字體已改為各頁 preconnect + 直連，移除 render-blocking 的 @import（SEO / Core Web Vitals） */
:root{
--navy:#132248;
--navy-2:#1f3464;
--blue:#4A66B0;
--blue-l:#eef1f8;
--gold:#b08820;
--gold-l:#faf6ec;
--text-1:#4C4A4A;
--text-2:#666264;
--text-3:#868184;
--white:#ffffff;
--bg:#f5f6f8;
--bg-2:#fafbfc;
--cream:#f9f5ec;
--cream-2:#f1ead7;
--ink:#0a1428;
--border:#e5e7eb;
--shadow-sm:0 1px 2px rgba(19,34,72,.05);
--shadow:0 4px 16px rgba(19,34,72,.08);
--shadow-lg:0 12px 36px rgba(19,34,72,.12);
--safe-t:env(safe-area-inset-top,0px);
--safe-b:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-video{display:none}}
body{
font-family:'Manrope','Noto Sans TC','Microsoft JhengHei',sans-serif;
font-size:15px;line-height:1.85;color:var(--text-1);background:var(--white);
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;font-weight:400;letter-spacing:.005em;
overflow-x:hidden
}
h1,h2,h3,h4{font-family:'Noto Serif TC','Fraunces',Georgia,serif;font-weight:700;letter-spacing:-.005em;line-height:1.3;color:var(--navy)}
.eng-display{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400}
a{color:inherit;text-decoration:none;transition:color .2s}
a:hover{color:var(--blue)}
img,svg{max-width:100%;height:auto;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:inherit}
ul,ol{list-style:none}
/* iOS auto-zoom prevention */
@media(max-width:1000px){
input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{font-size:16px!important}
}
/* === TOPBAR === */
.topbar{
background:var(--navy);color:rgba(255,255,255,.85);
font-size:12.5px;padding:8px 0;
padding-top:max(8px,var(--safe-t))
}
.topbar-inner{
max-width:1240px;margin:0 auto;padding:0 24px;
display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap
}
.topbar .tb-info{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.topbar .tb-info span{display:inline-flex;align-items:center;gap:6px}
.topbar a.tb-phone{color:#d4b25a;font-weight:800;letter-spacing:.04em;font-size:13.5px}
.topbar a.tb-phone:hover{color:#e6c674}
.topbar .tb-social{display:flex;gap:14px}
.topbar .tb-social a{color:rgba(255,255,255,.7);font-size:13px}
.topbar .tb-social a:hover{color:#fff}
/* === HEADER === */
.header{
background:#fff;border-bottom:1px solid var(--border);
position:sticky;top:0;z-index:100;
padding:0 24px
}
.header-inner{
max-width:1240px;margin:0 auto;
display:flex;justify-content:space-between;align-items:center;gap:24px;
height:78px
}
.logo{display:flex;align-items:center;gap:12px;color:var(--navy)}
.logo-mark{
width:54px;height:54px;object-fit:contain;display:block;flex-shrink:0
}
.logo-text{display:flex;flex-direction:column;line-height:1.2}
.logo-text strong{font-family:'Noto Serif TC',serif;font-size:1.2rem;font-weight:700;color:var(--navy);letter-spacing:.08em}
.logo-text small{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:11px;color:var(--text-3);letter-spacing:.22em;font-weight:400}
.nav{display:flex;gap:2px;align-items:center}
.nav a{
padding:10px 16px;font-size:14px;font-weight:600;color:var(--text-1);
position:relative;letter-spacing:.02em
}
.nav a::after{
content:'';position:absolute;left:50%;bottom:-4px;
width:0;height:2px;background:var(--gold);transition:all .25s;
transform:translateX(-50%)
}
.nav a:hover,.nav a.active{color:var(--navy)}
.nav a:hover::after,.nav a.active::after{width:60%}
.nav .nav-cta{
margin-left:8px;background:var(--navy);color:#fff;
padding:10px 22px;font-weight:700
}
.nav .nav-cta:hover{background:var(--gold);color:#fff}
.nav .nav-cta::after{display:none}
.hamburger{display:none;min-width:44px;min-height:44px;padding:10px;font-size:1.4rem;color:var(--navy);align-items:center;justify-content:center}
@media(max-width:980px){
.nav{
position:fixed;inset:0;background:#fff;flex-direction:column;
justify-content:flex-start;
padding:calc(80px + var(--safe-t)) 24px calc(24px + var(--safe-b));
gap:0;
transform:translateX(100%);transition:transform .3s;z-index:99;
overflow-y:auto;-webkit-overflow-scrolling:touch
}
.nav.open{transform:translateX(0)}
.nav a{width:100%;padding:18px 0;border-bottom:1px solid var(--border);font-size:16px}
.nav a::after{display:none}
.nav .nav-cta{margin:14px 0 0;width:100%;text-align:center}
.hamburger{display:block;z-index:101;position:relative}
}
/* === HERO（精品影片級動畫 — 多層 cinematic） === */
.hero{
position:relative;min-height:720px;
background:linear-gradient(155deg,#06102a 0%,#0e1f4a 45%,#142a5e 100%);
color:#fff;
display:flex;align-items:center;justify-content:center;
padding:140px 24px 120px;overflow:hidden;isolation:isolate
}
/* video 背景層（DeeVid AI 精品片接管 hero） */
.hero-video{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;z-index:0;opacity:1;
filter:saturate(1.05) contrast(1.04) brightness(.95)
}
/* 暗色漸層 overlay — 讓文字在影片上可讀 */
.hero-overlay{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(135deg,rgba(10,20,40,.65) 0%,rgba(10,20,40,.35) 50%,rgba(10,20,40,.55) 100%),
radial-gradient(ellipse at center,transparent 0%,rgba(10,20,40,.3) 100%)
}
/* 影片有完整視覺，關掉所有 CSS 動畫層 */
.hero-glow,.hero-sweep,.hero-particles{display:none !important}
.hero::before{opacity:.04 !important}
/* 確保前景內容在影片之上 */
.hero-inner{position:relative;z-index:3}
/* 視覺層 1：大型漸變光暈（緩慢 pulse） */
.hero-glow{
position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden
}
.hero-glow::before,.hero-glow::after{
content:'';position:absolute;border-radius:50%;
filter:blur(80px);mix-blend-mode:screen;animation:heroFloat 18s ease-in-out infinite
}
.hero-glow::before{
width:560px;height:560px;left:-12%;top:-15%;
background:radial-gradient(circle,rgba(74,102,176,.55) 0%,transparent 70%)
}
.hero-glow::after{
width:680px;height:680px;right:-15%;bottom:-20%;
background:radial-gradient(circle,rgba(212,178,90,.32) 0%,transparent 70%);
animation-delay:-6s;animation-duration:22s
}
@keyframes heroFloat{
0%,100%{transform:translate(0,0) scale(1);opacity:.9}
33%{transform:translate(40px,-30px) scale(1.1);opacity:1}
66%{transform:translate(-30px,40px) scale(.95);opacity:.75}
}
/* 視覺層 2：流動光線 sweep */
.hero-sweep{
position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(110deg,transparent 0%,transparent 35%,rgba(212,178,90,.08) 50%,transparent 65%,transparent 100%);
background-size:300% 100%;
animation:heroSweep 14s linear infinite
}
@keyframes heroSweep{
0%{background-position:200% 0}
100%{background-position:-200% 0}
}
/* 視覺層 3：上升金色粒子（4 個） */
.hero-particles{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hero-particles span{
position:absolute;bottom:-20px;width:3px;height:3px;
background:rgba(212,178,90,.85);border-radius:50%;
box-shadow:0 0 6px rgba(212,178,90,.6);
animation:heroRise 12s linear infinite
}
.hero-particles span:nth-child(1){left:8%;animation-delay:0s;animation-duration:14s}
.hero-particles span:nth-child(2){left:22%;animation-delay:-3s;animation-duration:18s;width:2px;height:2px}
.hero-particles span:nth-child(3){left:35%;animation-delay:-7s;animation-duration:15s}
.hero-particles span:nth-child(4){left:48%;animation-delay:-2s;animation-duration:20s;width:2px;height:2px;opacity:.7}
.hero-particles span:nth-child(5){left:62%;animation-delay:-9s;animation-duration:16s}
.hero-particles span:nth-child(6){left:74%;animation-delay:-5s;animation-duration:19s;width:2px;height:2px}
.hero-particles span:nth-child(7){left:86%;animation-delay:-11s;animation-duration:13s}
.hero-particles span:nth-child(8){left:94%;animation-delay:-1s;animation-duration:17s;opacity:.6}
@keyframes heroRise{
0%{transform:translateY(0) translateX(0);opacity:0}
10%{opacity:1}
90%{opacity:.8}
100%{transform:translateY(-105vh) translateX(20px);opacity:0}
}
/* 視覺層 4：噪點質感 */
.hero::before{
content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
opacity:.18;mix-blend-mode:overlay
}
.hero::after{
content:'';position:absolute;left:0;right:0;bottom:0;height:1px;z-index:4;pointer-events:none;
background:linear-gradient(90deg,transparent 0%,rgba(212,178,90,.7) 50%,transparent 100%)
}
@media(prefers-reduced-motion:reduce){
.hero-glow::before,.hero-glow::after,.hero-sweep,.hero-particles span{animation:none}
}
/* 立軸金線編號（unforgettable element） */
.hero-side{
position:absolute;top:50%;left:32px;transform:translateY(-50%);
display:flex;flex-direction:column;align-items:center;gap:18px;
color:rgba(255,255,255,.45);font-family:'Fraunces',Georgia,serif;
font-size:11px;letter-spacing:.4em;writing-mode:vertical-rl;
text-orientation:mixed;z-index:3;font-style:italic
}
.hero-side::before,.hero-side::after{
content:'';width:1px;background:linear-gradient(180deg,transparent,rgba(212,178,90,.6),transparent);
flex:1;min-height:60px
}
@media(max-width:1100px){.hero-side{display:none}}
.hero-inner{
position:relative;z-index:2;max-width:1100px;width:100%;text-align:center
}
.hero-eyebrow{
display:inline-flex;align-items:center;gap:16px;
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:14px;letter-spacing:.32em;font-weight:400;
color:rgba(212,178,90,.85);
padding:0;margin-bottom:32px;border:none;text-transform:uppercase
}
.hero-eyebrow::before,.hero-eyebrow::after{
content:'';width:30px;height:1px;
background:linear-gradient(90deg,transparent,rgba(212,178,90,.55),transparent)
}
.hero h1{
font-family:'Noto Serif TC','Fraunces',Georgia,serif;
font-size:3.4rem;font-weight:900;line-height:1.32;letter-spacing:.03em;
color:#fff;margin-bottom:26px;
text-shadow:0 2px 30px rgba(0,0,0,.3)
}
.hero h1 .em{
color:#d4b25a;font-weight:900;font-style:italic;
font-family:'Fraunces','Noto Serif TC',Georgia,serif;
padding:0 6px;position:relative
}
.hero h1 .em::after{
content:'';position:absolute;left:6px;right:6px;bottom:-2px;height:1px;
background:linear-gradient(90deg,transparent,#d4b25a,transparent);opacity:.6
}
.hero-sub{
font-size:17px;color:rgba(255,255,255,.82);line-height:2;
max-width:680px;margin:0 auto 44px;font-weight:300;letter-spacing:.03em
}
.hero-btns{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
@media(max-width:680px){
.hero{min-height:520px;padding:80px 18px 70px}
.hero h1{font-size:1.85rem;letter-spacing:.02em}
.hero-sub{font-size:14.5px;line-height:1.95}
.hero-eyebrow{font-size:11.5px;letter-spacing:.22em}
}
/* === BUTTONS（升級：精品感 letter-spacing + hover 微動效） === */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:15px 34px;font-size:13.5px;font-weight:600;
letter-spacing:.22em;text-transform:uppercase;
font-family:'Manrope','Noto Sans TC',sans-serif;
border:1px solid transparent;transition:all .35s cubic-bezier(.4,0,.2,1);
cursor:pointer;text-decoration:none;position:relative;overflow:hidden
}
.btn:hover{letter-spacing:.26em}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-primary:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.btn-gold{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn-gold:hover{background:#967018;border-color:#967018;color:#fff}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-outline-light:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-lg{padding:16px 38px;font-size:15px}
.btn-sm{padding:10px 22px;font-size:13px}
/* === SECTION COMMONS === */
.section{padding:120px 24px;background:#fff;position:relative}
.section.alt{background:var(--cream)}
.section.dark{background:var(--ink);color:#fff}
.section.cream{background:var(--cream)}
.container{max-width:1240px;margin:0 auto}
/* === 章節編號（精品酒店/米其林級 editorial flourish） === */
.chapter-num{
display:flex;align-items:center;gap:18px;
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:13px;font-weight:400;letter-spacing:.4em;
color:var(--gold);text-transform:uppercase;
margin-bottom:32px;justify-content:center
}
.chapter-num::before,.chapter-num::after{
content:'';height:1px;width:60px;
background:linear-gradient(90deg,transparent,var(--gold),transparent)
}
.chapter-roman{
font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
font-size:1.05rem;letter-spacing:.15em;color:var(--gold)
}
/* === 巨型雜誌標題（hero 內用） === */
.mega-title{
font-family:'Noto Serif TC',serif;
font-size:clamp(2.2rem,5.5vw,5rem);font-weight:900;
line-height:1.15;letter-spacing:.02em;
color:var(--navy);margin-bottom:24px
}
.mega-title em{
font-family:'Noto Serif TC',serif;
font-style:normal;font-weight:900;color:var(--gold)
}
/* === Monogram 印章（角落裝飾） === */
.monogram{
display:inline-flex;align-items:center;justify-content:center;
width:56px;height:56px;border:1.5px solid var(--gold);border-radius:50%;
font-family:'Noto Serif TC',serif;font-size:1.4rem;font-weight:900;
color:var(--gold);position:relative;letter-spacing:0
}
.monogram::before,.monogram::after{
content:'';position:absolute;left:50%;width:1px;height:8px;
background:var(--gold);transform:translateX(-50%)
}
.monogram::before{top:-12px}.monogram::after{bottom:-12px}
/* === 雜誌風雙欄 ABOUT layout === */
.editorial-about{
display:grid;grid-template-columns:1fr;gap:60px
}
.editorial-about-top{
display:grid;grid-template-columns:1fr 1.5fr;gap:50px;align-items:end
}
@media(max-width:900px){.editorial-about-top{grid-template-columns:1fr;gap:24px}}
.editorial-about-title-block .mega-title{margin-bottom:18px}
.editorial-about-intro{
padding-bottom:14px;
font-size:16px;line-height:2.1;color:var(--text-1);
border-left:2px solid var(--gold);padding-left:24px
}
.editorial-about-intro em{
font-family:'Fraunces',Georgia,serif;font-style:italic;
color:var(--navy);font-weight:500
}
.editorial-about-grid{
display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:flex-start
}
@media(max-width:900px){.editorial-about-grid{grid-template-columns:1fr;gap:36px}}
.editorial-photo{
aspect-ratio:3/4;background:linear-gradient(160deg,var(--navy) 0%,#1f3464 50%,var(--blue) 100%);
position:relative;overflow:hidden;
box-shadow:0 30px 80px rgba(19,34,72,.25)
}
.editorial-photo::before{
content:'';position:absolute;inset:0;
background-image:url("data:image/svg+xml;utf8,");
opacity:.18;mix-blend-mode:overlay
}
.editorial-photo-inner{
position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;color:#fff;text-align:center;padding:40px
}
.editorial-photo-inner .ph-eyebrow{
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:12px;letter-spacing:.4em;color:rgba(212,178,90,.85);
text-transform:uppercase;margin-bottom:18px
}
.editorial-photo-inner .ph-name{
font-family:'Noto Serif TC',serif;font-size:2.4rem;font-weight:900;
color:#fff;letter-spacing:.06em;margin-bottom:10px
}
.editorial-photo-inner .ph-role{
font-size:13px;color:rgba(255,255,255,.7);letter-spacing:.2em;
text-transform:uppercase;margin-bottom:32px
}
.editorial-photo-inner .ph-soon{
position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:11.5px;color:rgba(255,255,255,.55);letter-spacing:.15em
}
.editorial-photo-frame{
position:absolute;inset:18px;border:1px solid rgba(212,178,90,.5);pointer-events:none
}
.editorial-bio p{
font-size:15px;color:var(--text-1);line-height:2;margin-bottom:18px
}
.editorial-bio p strong{color:var(--navy);font-weight:700}
.editorial-bio p em{font-family:'Fraunces',Georgia,serif;font-style:italic;color:var(--gold);font-weight:500}
.editorial-bio-drop{
float:left;font-family:'Fraunces',Georgia,serif;
font-size:5.2rem;line-height:.9;font-weight:600;
color:var(--gold);margin:6px 14px -6px 0;font-style:italic
}
.cert-callout{
display:flex;gap:16px;align-items:flex-start;
background:#fdf8ef;
border:1px solid rgba(176,136,32,.35);border-left:4px solid var(--gold);
border-radius:6px;padding:20px 22px;margin-bottom:24px
}
.cert-callout-icon{flex-shrink:0;width:32px;height:32px;color:var(--gold);margin-top:2px}
.cert-callout-icon svg{width:32px;height:32px}
.cert-callout-title{
font-family:'Noto Serif TC',serif;font-size:16px;font-weight:700;
color:#9a6e00;letter-spacing:.06em;margin-bottom:8px
}
.cert-callout-desc{font-size:15px;line-height:1.9;color:#2c3a50;margin:0}
.editorial-features{
display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
margin-top:0;padding-top:20px;border-top:1px solid var(--border)
}
.editorial-features .about-feature{font-size:15px;color:var(--text-1)}
/* === Section divider 章節分隔線（夾在 section 中間） === */
.editorial-divider{
display:flex;align-items:center;justify-content:center;gap:24px;
padding:60px 24px;background:#fff;text-align:center
}
.editorial-divider .ed-line{
flex:1;max-width:200px;height:1px;
background:linear-gradient(90deg,transparent,var(--gold) 50%,transparent)
}
.editorial-divider .ed-symbol{
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:1.4rem;color:var(--gold)
}
/* section header（升級：Fraunces 襯線 + serif 中文） */
.sec-head{text-align:center;margin-bottom:70px}
.sec-eyebrow{
display:block;font-size:48px;font-weight:500;letter-spacing:.04em;
color:var(--navy);font-family:'Fraunces',Georgia,serif;font-style:italic;
margin-bottom:6px;line-height:1
}
.sec-title{
font-family:'Noto Serif TC',serif;
font-size:1.55rem;font-weight:700;color:var(--navy);
letter-spacing:.32em;margin-bottom:22px
}
.sec-line{width:64px;height:1px;background:var(--gold);margin:0 auto 26px;position:relative}
.sec-line::before,.sec-line::after{
content:'';position:absolute;top:50%;width:5px;height:5px;
background:var(--gold);transform:translateY(-50%) rotate(45deg)
}
.sec-line::before{left:-12px}.sec-line::after{right:-12px}
.sec-desc{
font-size:15.5px;color:var(--text-2);line-height:2.05;
max-width:680px;margin:0 auto;font-weight:400;letter-spacing:.02em
}
.section.dark .sec-eyebrow,.section.dark .sec-title{color:#fff}
.section.dark .sec-title{color:rgba(255,255,255,.85)}
.section.dark .sec-desc{color:rgba(255,255,255,.7)}
@media(max-width:680px){
.section{padding:60px 18px}
.sec-eyebrow{font-size:26px}
.sec-title{font-size:1.1rem;letter-spacing:.22em}
}
/* === INDEX_01 ABOUT === */
.about-block{
display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center
}
@media(max-width:900px){.about-block{grid-template-columns:1fr;gap:36px}}
.about-img{
aspect-ratio:4/3;
background:linear-gradient(135deg,var(--navy) 0%,var(--blue) 100%);
position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:center;color:#fff
}
.about-img-placeholder{
text-align:center;padding:32px;font-size:13.5px;letter-spacing:.08em;
color:rgba(255,255,255,.85)
}
.about-img-placeholder strong{
display:block;font-size:1.5rem;font-weight:900;margin-bottom:6px;letter-spacing:.04em
}
.about-text h3{
font-family:'Noto Serif TC',serif;
font-size:1.65rem;color:var(--navy);font-weight:700;
margin-bottom:18px;letter-spacing:.08em
}
.about-text .about-en{
display:inline-block;font-size:48px;font-weight:500;
color:var(--navy);font-family:'Fraunces',Georgia,serif;font-style:italic;
letter-spacing:.02em;line-height:1;margin-bottom:10px
}
.about-text p{
font-size:15px;color:var(--text-2);line-height:2;margin-bottom:18px
}
.about-features{
display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px
}
.about-feature{
display:flex;gap:10px;align-items:flex-start;
font-size:13.5px;color:var(--text-1)
}
.about-feature::before{
content:'';flex-shrink:0;width:18px;height:18px;
background:var(--gold);color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:11px;font-weight:900;line-height:18px;text-align:center;
border-radius:50%;
background-image:url("data:image/svg+xml;utf8,");
background-size:11px;background-position:center;background-repeat:no-repeat
}
/* === INDEX_02 SERVICE === */
.svc-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:30px
}
@media(max-width:900px){.svc-grid{grid-template-columns:1fr;gap:22px}}
.svc-card{
background:#fff;border:1px solid var(--border);padding:42px 32px;
position:relative;transition:all .3s ease
}
.svc-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:3px;
background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s
}
.svc-card:hover::before{transform:scaleX(1)}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--navy)}
.svc-num{
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:52px;font-weight:500;
color:var(--navy);letter-spacing:.02em;line-height:1;margin-bottom:20px;
border-bottom:1px solid var(--border);padding-bottom:20px
}
.svc-icon{
position:absolute;top:32px;right:32px;
width:48px;height:48px;
display:flex;align-items:center;justify-content:center;
color:var(--gold);opacity:.6
}
.svc-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5}
.svc-card h3{
font-family:'Noto Serif TC',serif;
font-size:1.35rem;font-weight:700;color:var(--navy);
margin-bottom:14px;letter-spacing:.06em
}
.svc-card p{
font-size:14px;color:var(--text-2);line-height:1.95;margin-bottom:18px
}
.svc-card .svc-items{padding-left:0}
.svc-card .svc-items li{
font-size:13px;color:var(--text-2);padding:6px 0;
border-bottom:1px dashed var(--border);position:relative;padding-left:14px
}
.svc-card .svc-items li:last-child{border:0}
.svc-card .svc-items li::before{
content:'';position:absolute;left:0;top:14px;
width:5px;height:5px;background:var(--gold);border-radius:50%
}
/* === INDEX_03 AREA === */
.area-block{text-align:center}
.area-headline{
font-family:'Noto Serif TC',serif;
font-size:1.7rem;color:var(--navy);font-weight:700;
margin-bottom:18px;letter-spacing:.08em
}
.area-headline strong{
color:var(--gold);background:none;display:inline;padding:0
}
.area-desc{
font-size:15px;color:var(--text-2);line-height:2;
max-width:780px;margin:0 auto 40px
}
.area-grid{
display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
max-width:880px;margin:0 auto
}
@media(max-width:780px){.area-grid{grid-template-columns:repeat(3,1fr)}}
.area-tag{
padding:14px 6px;background:#fff;border:1px solid var(--border);
font-size:13.5px;font-weight:700;color:var(--navy);letter-spacing:.04em;
transition:all .2s
}
.area-tag.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.area-tag:not(.primary):hover{border-color:var(--gold);color:var(--gold)}
/* === INDEX_04 WHY === */
.why-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:30px
}
@media(max-width:980px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.why-grid{grid-template-columns:1fr}}
.why-card{text-align:center}
.why-icon{
width:78px;height:78px;margin:0 auto 18px;
border:1.5px solid var(--gold);
display:flex;align-items:center;justify-content:center;
color:var(--gold);transition:all .3s;border-radius:50%
}
.why-icon svg{width:36px;height:36px;stroke:currentColor;fill:none;stroke-width:1.5}
.why-card:hover .why-icon{background:var(--navy);color:#fff;border-color:var(--navy)}
.why-card h3{
font-family:'Noto Serif TC',serif;
font-size:1.2rem;font-weight:700;color:var(--navy);
margin-bottom:12px;letter-spacing:.08em
}
.why-card p{
font-size:13.5px;color:var(--text-2);line-height:1.9
}
/* === INDEX_05 BRANDS（精品大卡：wordmark + 品牌敘述 + 主推機型 + 特色 chip） === */
.brand-wall{
display:grid;grid-template-columns:repeat(3,1fr);gap:22px
}
@media(max-width:980px){.brand-wall{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(max-width:560px){.brand-wall{grid-template-columns:1fr;gap:14px}}
.brand-tile{
background:#fff;border:1px solid var(--border);
padding:28px 26px 24px;transition:all .3s ease;
text-decoration:none;color:inherit;
display:flex;flex-direction:column;
position:relative;overflow:hidden;min-height:240px
}
.brand-tile::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:var(--border);transition:background .3s
}
.brand-tile:hover{
border-color:var(--navy);box-shadow:0 12px 36px rgba(19,34,72,.10);
transform:translateY(-3px)
}
.brand-tile:hover::before{background:var(--gold)}
/* Wordmark — 每個品牌用對應字體（自製，零侵權） */
.brand-wordmark{
font-size:1.95rem;font-weight:900;color:var(--navy);
letter-spacing:.04em;line-height:1;margin-bottom:6px;
font-family:'Fraunces',Georgia,serif
}
.brand-wordmark.sans{font-family:'Manrope',sans-serif;letter-spacing:.06em;font-weight:800}
.brand-wordmark.condensed{letter-spacing:.02em}
.brand-sub{
font-family:'Noto Serif TC',serif;
font-size:13.5px;color:var(--text-2);letter-spacing:.18em;
margin-bottom:18px;padding-bottom:18px;
border-bottom:1px solid var(--border)
}
.brand-models{
font-size:13px;color:var(--text-1);line-height:1.85;
margin-bottom:14px;flex:1
}
.brand-models-label{
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:11px;color:var(--gold);letter-spacing:.18em;
text-transform:uppercase;display:block;margin-bottom:4px
}
.brand-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.brand-chip{
font-size:11px;font-weight:600;color:var(--navy);
background:var(--bg);border:1px solid var(--border);
padding:4px 10px;letter-spacing:.02em
}
/* 主代理（日立、北鄉）：金邊 + PREMIER 標 */
.brand-tile.primary{
background:linear-gradient(180deg,var(--navy) 0%,#0e1b3a 100%);
border-color:var(--navy);color:#fff
}
.brand-tile.primary::before{background:var(--gold);height:3px}
.brand-tile.primary .brand-wordmark{color:#fff}
.brand-tile.primary .brand-sub{color:rgba(255,255,255,.7);border-bottom-color:rgba(212,178,90,.3)}
.brand-tile.primary .brand-models{color:rgba(255,255,255,.85)}
.brand-tile.primary .brand-models-label{color:#d4b25a}
.brand-tile.primary .brand-chip{
background:rgba(212,178,90,.12);border-color:rgba(212,178,90,.4);color:#d4b25a
}
.brand-tile.primary .brand-badge{
position:absolute;top:0;right:0;
background:var(--gold);color:#fff;
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:9.5px;font-weight:700;letter-spacing:.18em;
padding:5px 12px 5px 14px;text-transform:uppercase
}
/* 手機強化：560px 以下 wordmark 不縮太多，敘述完整 */
@media(max-width:560px){
.brand-tile{padding:24px 22px 22px;min-height:auto}
.brand-wordmark{font-size:1.7rem}
.brand-sub{font-size:13px;margin-bottom:14px;padding-bottom:14px}
.brand-models{font-size:13px;margin-bottom:12px}
}
/* === TESTIMONIALS === */
.testi-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:24px
}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr}}
.testi-card{
background:#fff;border:1px solid var(--border);padding:32px 28px;
position:relative
}
.testi-card::before{
content:'\201C';position:absolute;top:8px;right:22px;
font-size:5rem;color:var(--gold);opacity:.18;line-height:1;
font-family:Georgia,serif
}
.testi-stars{color:var(--gold);font-size:14px;letter-spacing:3px;margin-bottom:14px}
.testi-text{
font-size:14px;color:var(--text-1);line-height:2;margin-bottom:20px;
min-height:90px
}
.testi-author{
display:flex;align-items:center;gap:12px;
padding-top:18px;border-top:1px solid var(--border)
}
.testi-avatar{
width:42px;height:42px;border-radius:50%;
background:var(--navy);color:#fff;
display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:1.1rem
}
.testi-meta{display:flex;flex-direction:column;flex:1;min-width:0}
.testi-name{font-family:'Noto Serif TC',serif;font-size:15px;font-weight:700;color:var(--navy);letter-spacing:.06em}
.testi-info{font-size:12px;color:var(--text-3);letter-spacing:.02em}
.testi-source{
font-size:10.5px;font-weight:700;padding:3px 8px;letter-spacing:.04em;
background:var(--bg);color:var(--text-2);border:1px solid var(--border)
}
.testi-source.google{color:#15803d;border-color:#86efac;background:#f0fdf4}
.testi-source.fb{color:#1d4ed8;border-color:#93c5fd;background:#eff6ff}
/* === CTA BANNER === */
.cta-band{
background:
linear-gradient(135deg,rgba(19,34,72,.92) 0%,rgba(19,34,72,.75) 100%),
linear-gradient(135deg,#1a2c5a 0%,#0e1838 100%);
color:#fff;padding:80px 24px;text-align:center;position:relative;overflow:hidden
}
.cta-band::before{
content:'';position:absolute;inset:0;
background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
background-size:30px 30px;pointer-events:none
}
.cta-band-inner{position:relative;z-index:2;max-width:780px;margin:0 auto}
.cta-band h2{
font-family:'Noto Serif TC',serif;
font-size:2.2rem;font-weight:700;margin-bottom:18px;
letter-spacing:.08em;line-height:1.4;color:#fff
}
.cta-band h2 em{font-family:'Fraunces','Noto Serif TC',Georgia,serif;font-style:italic;color:#d4b25a;font-weight:500}
.cta-band p{
font-size:15px;color:rgba(255,255,255,.8);line-height:1.95;
margin-bottom:28px;font-weight:300
}
.cta-band .btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* === FOOTER === */
.footer{
background:#0c1730;color:rgba(255,255,255,.7);
padding:64px 24px 24px;font-size:13.5px;line-height:1.95
}
.footer-inner{max-width:1240px;margin:0 auto}
.footer-grid{
display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;
margin-bottom:40px
}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer h4{
font-family:'Noto Serif TC',serif;
color:#fff;font-size:15px;font-weight:700;letter-spacing:.18em;
margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(212,178,90,.25)
}
.footer a{color:rgba(255,255,255,.7);display:inline-block;padding:3px 0}
.footer a:hover{color:var(--gold)}
.footer-info p{margin-bottom:8px;color:rgba(255,255,255,.65)}
.footer-info strong{color:#fff;font-weight:800;letter-spacing:.03em}
.footer-menu ul li{margin-bottom:2px}
.footer-social{display:flex;gap:10px;margin-top:12px}
.footer-social a{
width:44px;height:44px;background:rgba(255,255,255,.08);
display:flex;align-items:center;justify-content:center;
color:#fff;font-size:14px;padding:0
}
.footer-social a:hover{background:var(--gold);color:#fff}
.footer-bottom{
border-top:1px solid rgba(255,255,255,.1);padding-top:24px;
display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
font-size:12px;color:rgba(255,255,255,.5)
}
/* === FLOATING CONTACT BUTTONS（SVG hairline icon） === */
.float-btns{
position:fixed;right:24px;bottom:calc(24px + var(--safe-b));z-index:90;
display:flex;flex-direction:column;gap:12px
}
.float-btn{
width:52px;height:52px;border-radius:50%;
background:var(--navy);color:#fff;
display:flex;align-items:center;justify-content:center;
box-shadow:0 10px 32px rgba(19,34,72,.25);
text-decoration:none;transition:all .3s;
border:1px solid rgba(212,178,90,.3)
}
.float-btn:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-2px)}
.float-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:680px){.float-btn{width:46px;height:46px}.float-btn svg{width:18px;height:18px}}
/* LINE 鈕品牌綠（一眼可辨識，提升點擊） */
.float-btn.line{background:#06C755;border-color:#06C755}
.float-btn.line:hover{background:#05b34c;border-color:#05b34c}
.float-btn.phone:hover{background:var(--gold);border-color:var(--gold)}
/* 手機底部固定 CTA bar（由 analytics.js 全站注入；桌機隱藏） */
.m-cta-bar{display:none}
@media(max-width:680px){
.float-btns{display:none}
.m-cta-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:95;box-shadow:0 -4px 20px rgba(0,0,0,.18);padding-bottom:var(--safe-b)}
.m-cta-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:15px 8px;font-size:15px;font-weight:700;letter-spacing:.5px;text-decoration:none;color:#fff}
.m-cta-bar .m-call{background:var(--navy)}
.m-cta-bar .m-line{background:#06C755}
.m-cta-bar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body{padding-bottom:56px}
}
/* 首頁 hero 信任 chips（折疊以上即見可信度） */
.trust-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px}
.trust-chips span{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;letter-spacing:.3px;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(212,178,90,.45);padding:6px 13px;border-radius:999px;backdrop-filter:blur(4px)}
.trust-chips span::before{content:"✓";color:#d4b25a;font-weight:800}
@media(max-width:680px){.trust-chips span{font-size:11.5px;padding:5px 10px}}
/* SVG icon 通用 */
.icn{display:inline-block;vertical-align:middle;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icn-sm{width:14px;height:14px}.icn-md{width:18px;height:18px}.icn-lg{width:24px;height:24px}
/* 精品評價 source chip（純字母標，無 emoji） */
.testi-source{
display:inline-flex;align-items:center;justify-content:center;
min-width:28px;height:24px;padding:0 8px;
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:11.5px;letter-spacing:.08em;font-weight:600;
border:1px solid var(--border);background:#fff;color:var(--text-2);
text-decoration:none;transition:all .2s;text-transform:uppercase
}
a.testi-source:hover{border-color:var(--gold);color:var(--gold)}
.testi-source.google{color:#15803d;border-color:#86efac;background:#f0fdf4}
.testi-source.fb{color:#1d4ed8;border-color:#93c5fd;background:#eff6ff}
.testi-source.line{color:#0e7490;border-color:#67e8f9;background:#ecfeff}
/* === FORM (quote.html) === */
.form-wrap{max-width:680px;margin:0 auto;background:#fff;
border:1px solid var(--border);padding:42px;box-shadow:var(--shadow-lg)}
@media(max-width:680px){.form-wrap{padding:28px 22px}}
.form-wrap h3{
font-size:1.4rem;color:var(--navy);font-weight:800;
padding-bottom:18px;border-bottom:1px solid var(--border);
margin-bottom:24px;letter-spacing:.06em
}
.form-hint{
background:#f0fdf4;border:1px solid #86efac;padding:14px 18px;
font-size:13px;color:#15803d;line-height:1.9;margin-bottom:20px
}
.form-hint strong{font-weight:800}
.fg{margin-bottom:18px}
.fg label{
display:block;font-size:12.5px;font-weight:700;color:var(--navy);
letter-spacing:.08em;margin-bottom:6px;text-transform:uppercase
}
.fg input,.fg select,.fg textarea{
width:100%;padding:12px 14px;border:1px solid var(--border);
background:#fff;color:var(--text-1);transition:all .2s
}
.fg input:focus,.fg select:focus,.fg textarea:focus{
outline:none;border-color:var(--gold);
box-shadow:0 0 0 3px rgba(176,136,32,.12)
}
.fg textarea{min-height:96px;resize:vertical;font-family:inherit}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.form-row{grid-template-columns:1fr}}
.advanced{
border:1px dashed var(--gold);background:#fff;margin-top:6px
}
.advanced summary{
padding:14px 16px;background:rgba(176,136,32,.06);
font-size:13px;font-weight:800;color:var(--gold);letter-spacing:.06em;
cursor:pointer;list-style:none;outline:none;user-select:none
}
.advanced summary::-webkit-details-marker{display:none}
.advanced summary::before{
content:'▶';display:inline-block;margin-right:10px;font-size:9px;
transition:transform .2s
}
.advanced[open] summary::before{transform:rotate(90deg)}
.advanced-body{padding:18px 18px 6px}
.btn-submit{
width:100%;background:var(--navy);color:#fff;
padding:16px;font-size:15px;font-weight:800;letter-spacing:.1em;
border:none;cursor:pointer;margin-top:8px;transition:all .2s
}
.btn-submit:hover{background:var(--gold)}
.form-success{display:none;text-align:center;padding:40px 20px}
.form-success.show{display:block}
.form-success .si{font-size:3.5rem;margin-bottom:14px}
.form-success h4{
font-size:1.4rem;color:var(--navy);font-weight:800;
margin-bottom:12px;letter-spacing:.05em
}
.form-success p{font-size:14px;color:var(--text-2);line-height:2}
.form-success a{color:var(--navy);font-weight:800;font-size:1.15rem}
/* === SEARCH BAR（精品 booking 風） === */
.search-section{
background:linear-gradient(180deg,var(--cream) 0%,#fff 100%);
padding:60px 24px 40px;border-bottom:1px solid var(--border)
}
.search-wrap{max-width:1100px;margin:0 auto}
.search-eyebrow{
text-align:center;font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:13px;letter-spacing:.32em;color:var(--gold);
margin-bottom:14px;text-transform:uppercase
}
.search-eyebrow::before,.search-eyebrow::after{
content:'';display:inline-block;width:30px;height:1px;
background:var(--gold);vertical-align:middle;margin:0 14px;opacity:.5
}
.search-title{
text-align:center;font-family:'Noto Serif TC',serif;
font-size:1.5rem;color:var(--navy);font-weight:700;
letter-spacing:.12em;margin-bottom:32px
}
.search-bar{
display:grid;grid-template-columns:1fr auto;gap:0;
background:#fff;border:1px solid var(--border);
box-shadow:0 8px 32px rgba(19,34,72,.08);
border-top:2px solid var(--gold);
transition:box-shadow .3s
}
.search-bar:focus-within{box-shadow:0 12px 40px rgba(19,34,72,.15);border-color:var(--gold)}
.search-input-wrap{position:relative;display:flex;align-items:center}
.search-icon{
position:absolute;left:22px;width:18px;height:18px;
color:var(--gold);pointer-events:none
}
.search-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2}
.search-input{
width:100%;padding:22px 22px 22px 56px;
border:none;background:transparent;
font-family:'Manrope','Noto Sans TC',sans-serif;
font-size:16px;color:var(--navy);letter-spacing:.02em;outline:none
}
.search-input::placeholder{color:var(--text-3);font-style:italic}
.search-btn{
padding:0 36px;background:var(--navy);color:#fff;
font-family:'Manrope','Noto Sans TC',sans-serif;
font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
cursor:pointer;border:none;transition:background .25s
}
.search-btn:hover{background:var(--gold)}
@media(max-width:680px){
.search-bar{grid-template-columns:1fr}
.search-btn{padding:14px;letter-spacing:.18em}
.search-input{padding:18px 18px 18px 50px;font-size:16px}
}
/* 多維 filter row */
.filter-row{
display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
margin-top:24px
}
.filter-group{
display:flex;align-items:center;gap:8px;
padding:0 14px;border-right:1px solid var(--border)
}
.filter-group:last-child{border-right:none}
.filter-label{
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:12px;letter-spacing:.16em;color:var(--text-3);
text-transform:uppercase;margin-right:6px
}
.filter-select{
padding:8px 12px;border:1px solid var(--border);background:#fff;
font-family:'Manrope','Noto Sans TC',sans-serif;font-size:13px;color:var(--navy);
font-weight:600;letter-spacing:.04em;cursor:pointer;outline:none;
transition:all .2s;min-width:120px
}
.filter-select:hover,.filter-select:focus{border-color:var(--gold);color:var(--gold)}
/* 結果計數 */
.results-meta{
text-align:center;padding:24px 0 8px;
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:14px;color:var(--text-2);letter-spacing:.08em
}
.results-meta strong{
color:var(--gold);font-weight:600;font-size:1.15rem;
margin:0 4px
}
/* 無結果 empty state */
.empty-state{
text-align:center;padding:80px 24px;
background:var(--cream);border:1px dashed var(--gold);
margin-top:30px
}
.empty-state .es-icon{
font-size:3rem;color:var(--gold);margin-bottom:18px;opacity:.6
}
.empty-state h3{
font-family:'Noto Serif TC',serif;font-size:1.3rem;
color:var(--navy);margin-bottom:10px;letter-spacing:.06em
}
.empty-state p{
font-size:14px;color:var(--text-2);line-height:1.95;
max-width:480px;margin:0 auto 22px
}
.empty-state .es-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* === GENERIC CARDS （案例 / 機型 等其他頁面共用） === */
.card{
background:#fff;border:1px solid var(--border);
transition:all .25s
}
.card:hover{box-shadow:var(--shadow);border-color:var(--navy);transform:translateY(-4px)}
.card-body{padding:24px}
.card-title{
font-size:1.05rem;font-weight:800;color:var(--navy);
margin-bottom:10px;letter-spacing:.03em
}
.card-meta{font-size:12px;color:var(--text-3);margin-bottom:12px;letter-spacing:.02em}
.card-desc{font-size:13.5px;color:var(--text-2);line-height:1.9}
/* === REVEAL ANIMATION === */
.reveal{opacity:0;transform:translateY(24px);transition:all .6s cubic-bezier(.25,.46,.45,.94)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.1s}
.reveal-d2{transition-delay:.2s}
.reveal-d3{transition-delay:.3s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* === UTILITY === */
.text-center{text-align:center}
.text-gold{color:var(--gold)}
.text-navy{color:var(--navy)}
.mt-2{margin-top:14px}.mt-3{margin-top:22px}.mt-4{margin-top:32px}
.mb-2{margin-bottom:14px}.mb-3{margin-bottom:22px}
/* ============================================================
* 手機修正區（Claude + gpt-5.4 協作 review 後補丁，2026-05-13）
* ============================================================ */
/* P1: Header 在 320-360px 減小 padding + logo 字級避免擠到 hamburger */
@media(max-width:480px){
.header{padding:0 14px}
.header-inner{height:64px;gap:12px}
.logo-mark{width:44px;height:44px}
.logo-text strong{font-size:1rem;letter-spacing:.04em}
.logo-text small{font-size:9.5px;letter-spacing:.16em}
}
/* P1: filter-row 320-480px 改單欄堆疊（精品電商感不破） */
@media(max-width:560px){
.filter-row{flex-direction:column;gap:10px;align-items:stretch}
.filter-group{
width:100%;padding:0;border-right:none !important;
border-bottom:1px solid var(--border);padding-bottom:10px;
justify-content:space-between
}
.filter-group:last-child{border-bottom:none}
.filter-select{flex:1;min-width:0}
}
/* P1: editorial-features 320px 單欄（雙欄會擠成高塔狀） */
@media(max-width:380px){
.editorial-features,
.about-features{grid-template-columns:1fr !important}
}
/* P1: ph-soon 允許換行避免溢出 */
@media(max-width:480px){
.editorial-photo-inner .ph-soon{
white-space:normal;letter-spacing:.08em;font-size:11px;
padding:0 16px;text-align:center;line-height:1.6
}
.editorial-photo-inner .ph-name{font-size:1.7rem}
.editorial-photo-inner .ph-eyebrow{font-size:11px;letter-spacing:.28em}
}
/* P2: topbar 字級提升 + 在 480px 以下單行展示 */
@media(max-width:680px){
.topbar{font-size:13.5px}
.topbar .tb-info{gap:12px;font-size:13.5px}
.topbar .tb-social{font-size:13px}
.topbar a.tb-phone{font-size:14.5px}
}
@media(max-width:480px){
.topbar .tb-info span:nth-child(2){display:none} /* 隱藏「週一至週日 08:00-20:00」省空間 */
.topbar .tb-social{flex:1;justify-content:flex-end}
}
/* P2: Hero overlay 在手機加深，確保金字可讀 */
@media(max-width:680px){
.hero-overlay{
background:
linear-gradient(135deg,rgba(10,20,40,.78) 0%,rgba(10,20,40,.55) 50%,rgba(10,20,40,.72) 100%),
radial-gradient(ellipse at center,transparent 0%,rgba(10,20,40,.45) 100%) !important
}
.hero-sub{color:rgba(255,255,255,.95) !important}
}
/* P0: overflow-x 不全域藏，改 hero 區域性 hidden（讓真實溢出能被測出） */
body{overflow-x:visible}
.hero,.section,.cta-band,.footer,.topbar,.header,.search-section,.editorial-divider{overflow-x:clip}
/* P1: 確保 search-bar 在手機 input 焦點時鍵盤不遮 */
@media(max-width:680px){
.search-section{padding:40px 16px 28px;scroll-margin-top:80px}
.search-input{padding-left:46px;font-size:16px}
.search-icon{left:16px}
}
/* P1: nav drawer scroll lock — 開啟時禁止 body 滾動（避免「漢堡開了底下還能滾」破壞 UX） */
body:has(.nav.open){overflow:hidden}
/* P1: cta-band 手機字級調整 + padding 減小 */
@media(max-width:560px){
.cta-band{padding:56px 18px}
.cta-band h2{font-size:1.55rem;letter-spacing:.04em}
.cta-band p{font-size:14px}
.cta-band .btn-row .btn{width:100%;max-width:280px}
}
/* P1: chapter-num 手機字級減小，避免英文章節名跑掉 */
@media(max-width:560px){
.chapter-num{font-size:11px;letter-spacing:.28em;gap:12px}
.chapter-num::before,.chapter-num::after{width:40px}
.chapter-roman{font-size:.95rem}
}
/* ============================================================
* 品牌精煉橫條（取代冗長 brand-section）
* ============================================================ */
.brand-banner{
padding:32px 0 28px;border-bottom:1px solid var(--border);position:relative
}
.brand-banner.primary::before{
content:'';position:absolute;top:0;left:0;width:48px;height:3px;background:var(--gold)
}
.brand-banner-head{
display:flex;align-items:center;justify-content:space-between;gap:18px;
margin-bottom:14px;flex-wrap:wrap
}
.brand-banner-name{display:flex;flex-direction:column;gap:4px}
.bb-en{
font-family:'Fraunces',Georgia,serif;font-weight:500;
font-size:1.9rem;color:var(--navy);letter-spacing:.04em;line-height:1
}
.bb-cn{
font-family:'Noto Serif TC',serif;font-size:13px;color:var(--text-3);
letter-spacing:.18em;font-weight:600
}
.brand-banner-badge{
font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;
padding:6px 14px;background:var(--bg);color:var(--text-2);
border:1px solid var(--border)
}
.brand-banner.primary .brand-banner-badge{
background:var(--navy);color:#d4b25a;border-color:var(--gold)
}
.brand-banner-lead{
font-size:14.5px;color:var(--text-1);line-height:1.95;
margin-bottom:18px;letter-spacing:.01em
}
.brand-banner-meta{
display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:start;
font-size:12.5px
}
.bb-row{display:contents}
.bb-row-lbl{
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:11.5px;color:var(--gold);letter-spacing:.14em;
text-transform:uppercase;padding-top:5px;white-space:nowrap
}
.bb-row-vals{display:flex;flex-wrap:wrap;gap:6px}
.bb-series-chip{
font-size:11.5px;padding:4px 10px;
background:#fff;border:1px solid var(--border);color:var(--navy);
font-weight:700;letter-spacing:.02em
}
.bb-feat-chip{
font-size:11.5px;padding:4px 10px;
background:var(--cream);border:1px solid var(--gold);color:var(--gold);
font-weight:700;letter-spacing:.02em
}
@media(max-width:560px){
.brand-banner-meta{grid-template-columns:1fr;gap:10px}
.bb-row{display:flex;flex-direction:column;gap:6px}
.bb-row-lbl{padding-top:0}
.bb-en{font-size:1.5rem}
}
/* ============================================================
* 按需求挑機型（Need-based discovery，業內人士提案）
* ============================================================ */
.need-section{padding:80px 24px 60px;background:#fff}
.need-section .container{max-width:1240px;margin:0 auto}
.need-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
@media(max-width:900px){.need-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.need-grid{grid-template-columns:1fr}}
.need-card{
background:#fff;border:1px solid var(--border);
padding:28px 24px;text-decoration:none;color:inherit;
display:flex;flex-direction:column;gap:8px;
transition:all .25s;position:relative;overflow:hidden;min-height:160px
}
.need-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:var(--border);transition:background .3s
}
.need-card:hover{border-color:var(--navy);box-shadow:0 12px 36px rgba(19,34,72,.10);transform:translateY(-3px)}
.need-card:hover::before{background:var(--gold)}
.need-icon{
width:42px;height:42px;color:var(--gold);
display:flex;align-items:center;justify-content:center;
border:1.5px solid rgba(176,136,32,.3);border-radius:50%;
margin-bottom:6px
}
.need-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.need-cat{
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:11.5px;color:var(--gold);letter-spacing:.18em;
text-transform:uppercase
}
.need-title{
font-family:'Noto Serif TC',serif;font-size:1.15rem;font-weight:700;
color:var(--navy);letter-spacing:.06em
}
.need-desc{font-size:13px;color:var(--text-2);line-height:1.9;flex:1}
.need-foot{
display:flex;justify-content:space-between;align-items:center;
padding-top:12px;border-top:1px solid var(--border);margin-top:8px;
font-size:11.5px
}
.need-models{color:var(--text-3);letter-spacing:.04em}
.need-cta{
font-family:'Manrope',sans-serif;font-size:11.5px;font-weight:700;
color:var(--gold);letter-spacing:.1em;text-transform:uppercase
}
.need-cta::after{content:' →';transition:transform .2s}
.need-card:hover .need-cta::after{transform:translateX(3px)}
/* ============================================================
* 3 分鐘選機決策樹（PM 提案）
* ============================================================ */
.quiz-section{padding:80px 24px;background:var(--cream);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.quiz-wrap{max-width:880px;margin:0 auto}
.quiz-head{text-align:center;margin-bottom:40px}
.quiz-head h2{
font-family:'Noto Serif TC',serif;font-size:2rem;font-weight:800;
color:var(--navy);margin-bottom:14px;letter-spacing:.06em
}
.quiz-head p{font-size:14.5px;color:var(--text-2);line-height:1.95}
.quiz-form{background:#fff;border:1px solid var(--border);border-top:3px solid var(--gold);padding:36px 32px}
@media(max-width:560px){.quiz-form{padding:24px 20px}}
.quiz-q{margin-bottom:22px}
.quiz-q-label{
display:block;font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:12.5px;color:var(--gold);letter-spacing:.16em;
text-transform:uppercase;margin-bottom:10px
}
.quiz-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:560px){.quiz-options{grid-template-columns:repeat(2,1fr)}}
.quiz-option{
padding:14px 8px;border:1px solid var(--border);background:#fff;
cursor:pointer;text-align:center;
font-family:'Manrope',sans-serif;font-size:12.5px;font-weight:700;
color:var(--navy);letter-spacing:.04em;transition:all .2s;
border-radius:0
}
.quiz-option:hover{border-color:var(--gold);color:var(--gold)}
.quiz-option.active{background:var(--navy);color:#fff;border-color:var(--navy)}
/* multi-select options show checkmark */
[data-multi="true"] .quiz-option{position:relative;padding-right:28px}
[data-multi="true"] .quiz-option.active::after{
content:'✓';position:absolute;top:6px;right:8px;
font-size:10px;font-weight:900;opacity:.8
}
.quiz-result{
margin-top:32px;padding:32px;background:var(--cream);
border:1px dashed var(--gold);display:none
}
.quiz-result.show{display:block}
.quiz-result-head{
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:12.5px;color:var(--gold);letter-spacing:.18em;
text-transform:uppercase;margin-bottom:10px;text-align:center
}
.quiz-result-title{
font-family:'Noto Serif TC',serif;font-size:1.35rem;color:var(--navy);
font-weight:700;text-align:center;margin-bottom:24px;letter-spacing:.06em
}
.quiz-result-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:20px}
.quiz-result-chip{
background:#fff;border:1px solid var(--gold);
padding:10px 16px;font-size:13px;font-weight:700;color:var(--navy);
text-decoration:none;letter-spacing:.04em;transition:all .2s
}
.quiz-result-chip:hover{background:var(--navy);color:#fff}
.quiz-result-cta{text-align:center;padding-top:20px;border-top:1px solid var(--border);font-size:13px;color:var(--text-2);line-height:1.9}
/* ============================================================
* 品牌熱銷機型 grid（brands.html 每品牌下方）
* ============================================================ */
.brand-hotsell{margin-top:36px;padding-top:32px;border-top:1px solid var(--border)}
.brand-hotsell-label{
display:flex;align-items:center;gap:14px;margin-bottom:20px
}
.brand-hotsell-label-text{
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:12px;letter-spacing:.25em;color:var(--gold);
text-transform:uppercase
}
.brand-hotsell-label-line{flex:1;height:1px;background:linear-gradient(90deg,var(--gold) 0%,transparent 100%);opacity:.5}
.hs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:980px){.hs-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hs-grid{grid-template-columns:1fr}}
.hs-card{
background:#fff;border:1px solid var(--border);overflow:hidden;
display:flex;flex-direction:column;transition:all .25s;position:relative
}
.hs-card:hover{border-color:var(--navy);box-shadow:var(--shadow);transform:translateY(-3px)}
.hs-badge{
position:absolute;top:0;right:0;z-index:3;
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:9.5px;font-weight:700;letter-spacing:.15em;
padding:4px 10px;text-transform:uppercase
}
.hs-badge.bestseller{background:var(--gold);color:#fff}
.hs-badge.featured{background:var(--navy);color:#fff}
.hs-badge.new{background:#15803d;color:#fff}
.hs-head{
padding:20px 18px 18px;text-align:center;color:#fff;
background:linear-gradient(180deg,var(--navy) 0%,#0c1730 100%);
border-bottom:1px solid var(--gold);
display:flex;flex-direction:column;align-items:center;gap:8px;
min-height:170px;justify-content:center;position:relative
}
.hs-machine{
width:150px;height:50px;color:#d4b25a;opacity:.9;
margin-bottom:4px
}
.hs-card.bg-hitachi .hs-machine{color:#d4b25a}
.hs-card.bg-northern .hs-machine{color:#d4b25a}
.hs-card.bg-daikin .hs-machine{color:#7fb3e3}
.hs-card.bg-panasonic .hs-machine{color:#5aa7c4}
.hs-card.bg-teco .hs-machine{color:#d4905a}
.hs-card.bg-heran .hs-machine{color:#7ac896}
.hs-type-line{
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:11px;color:#d4b25a;letter-spacing:.12em;
margin-top:8px;padding-top:8px;
border-top:1px solid rgba(212,178,90,.25);width:80%
}
.hs-rec{
font-size:12px;color:var(--text-2);line-height:1.85;
padding:10px 0;margin-bottom:12px;
border-top:1px solid var(--border);border-bottom:1px solid var(--border);
display:flex;gap:10px;align-items:flex-start
}
.hs-rec-label{
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:11px;color:var(--gold);letter-spacing:.16em;
text-transform:uppercase;flex-shrink:0;padding-top:1px
}
.hs-ac-svg{
width:130px;height:54px;margin-bottom:6px;opacity:.85
}
.hs-ac-svg path,.hs-ac-svg rect,.hs-ac-svg line,.hs-ac-svg circle{
stroke:#d4b25a;fill:none;stroke-width:1.2;stroke-linecap:round
}
.hs-ac-svg .led{fill:#d4b25a;stroke:none}
.hs-ac-svg .grille line{stroke-width:.8;opacity:.6}
.hs-head::after{
content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);
width:32px;height:1px;background:var(--gold);
box-shadow:0 0 8px var(--gold)
}
/* 品牌色保留為左邊微細條，不是整片底色 */
.hs-card.bg-hitachi::before{background:#1f3464}
.hs-card.bg-northern::before{background:#2c4f8a}
.hs-card.bg-daikin::before{background:#1565c0}
.hs-card.bg-panasonic::before{background:#055b75}
.hs-card.bg-teco::before{background:#8a3e26}
.hs-card.bg-heran::before{background:#2a6b51}
.hs-card{position:relative}
.hs-card::before{
content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
background:var(--gold);transition:width .25s
}
.hs-card:hover::before{width:5px}
.hs-series{font-size:10.5px;letter-spacing:.16em;opacity:.85;font-weight:600;text-transform:uppercase}
.hs-model{
font-family:'JetBrains Mono',Consolas,monospace;
font-size:1.05rem;font-weight:800;letter-spacing:.04em;line-height:1.2
}
.hs-body{padding:16px 18px;flex:1;display:flex;flex-direction:column}
.hs-name{
font-family:'Noto Serif TC',serif;font-size:13px;font-weight:700;
color:var(--navy);margin-bottom:10px;letter-spacing:.02em;line-height:1.5
}
.hs-tagline{
font-size:12.5px;color:var(--text-2);line-height:1.95;
margin-bottom:14px;flex:1;letter-spacing:.01em
}
.hs-tagline strong{color:var(--navy);font-weight:700}
/* Apple / Dyson 風大字 stats 條 */
.hs-stats{
display:grid;grid-template-columns:repeat(4,1fr);
gap:0;padding:0;background:#f7f8fa;
border-bottom:1px solid var(--border)
}
.hs-stat{
text-align:center;padding:14px 4px 12px;
border-right:1px solid var(--border);position:relative
}
.hs-stat:last-child{border-right:none}
.hs-stat-num{
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:1.35rem;font-weight:500;color:var(--navy);
line-height:1;letter-spacing:.01em;margin-bottom:5px
}
.hs-stat-lbl{
font-size:9.5px;color:var(--text-3);letter-spacing:.14em;
text-transform:uppercase;font-weight:600
}
/* Bang & Olufsen 風縮短 punch line */
.hs-pitch{
font-size:14px;color:var(--text-1);line-height:1.85;
margin-bottom:12px;font-weight:500;letter-spacing:.005em
}
/* 點開看完整詳情（漸進揭露） */
.hs-detail{
margin-bottom:14px;border-top:1px solid var(--border);padding-top:10px
}
.hs-detail summary{
cursor:pointer;list-style:none;outline:none;
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:11.5px;color:var(--gold);letter-spacing:.1em;
display:flex;align-items:center;gap:6px
}
.hs-detail summary::-webkit-details-marker{display:none}
.hs-detail summary::after{
content:'+';font-size:1.1rem;line-height:1;
transition:transform .25s;margin-left:auto
}
.hs-detail[open] summary::after{transform:rotate(45deg)}
.hs-detail summary:hover{color:#967018}
.hs-detail-body{
font-size:12.5px;color:var(--text-2);line-height:1.9;
margin-top:10px;padding:10px 0 0
}
/* 在謹騰買的 4 大保證 banner */
.hotsell-guarantee{
margin-top:36px;padding:28px 32px;
background:linear-gradient(135deg,var(--navy) 0%,#0c1730 100%);
color:#fff;display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center
}
@media(max-width:780px){.hotsell-guarantee{grid-template-columns:1fr;gap:18px;padding:24px 22px}}
.hotsell-guarantee-label{
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:12px;letter-spacing:.22em;color:var(--gold);
text-transform:uppercase;line-height:1.5;
border-right:1px solid rgba(212,178,90,.3);padding-right:32px;
white-space:nowrap
}
@media(max-width:780px){.hotsell-guarantee-label{border-right:none;border-bottom:1px solid rgba(212,178,90,.3);padding:0 0 14px}}
.hotsell-guarantee-text{
font-size:13px;color:rgba(255,255,255,.85);line-height:1.95
}
.hotsell-guarantee-text strong{color:#d4b25a;font-weight:700;letter-spacing:.02em}
.hs-meta{
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:11.5px;color:var(--gold);letter-spacing:.06em;
margin-bottom:12px;padding-top:10px;
border-top:1px solid var(--border)
}
.hs-meta strong{font-style:normal;color:var(--navy);font-weight:700;font-family:'Manrope',sans-serif}
.hs-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}
.hs-chip{
font-size:10px;padding:3px 8px;background:var(--bg);
color:var(--navy);border:1px solid var(--border);font-weight:700
}
.hs-cta{
display:block;text-align:center;padding:8px 0;
font-family:'Manrope',sans-serif;font-size:11.5px;font-weight:700;
letter-spacing:.12em;color:var(--gold);
border-top:1px solid var(--border);
text-transform:uppercase;text-decoration:none;
transition:all .2s
}
.hs-cta:hover{background:var(--navy);color:#fff;border-top-color:var(--navy)}
/* ============================================================
* 精選案例 grid（工程實績人工策展）
* ============================================================ */
.featured-cases{padding:90px 24px;background:#fff}
.fc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1240px;margin:0 auto}
@media(max-width:980px){.fc-grid{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(max-width:560px){.fc-grid{grid-template-columns:1fr;gap:14px}}
.fc-card{
background:#fff;border:1px solid var(--border);overflow:hidden;
transition:all .3s;display:flex;flex-direction:column;position:relative
}
.fc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--border);transition:background .3s;z-index:3}
.fc-card:hover{border-color:var(--navy);box-shadow:0 14px 40px rgba(19,34,72,.10);transform:translateY(-4px)}
.fc-card:hover::before{background:var(--gold)}
.fc-photo{
aspect-ratio:4/3;position:relative;overflow:hidden;
background:linear-gradient(135deg,var(--navy) 0%,var(--blue) 100%)
}
.fc-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fc-photo-placeholder{
position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;color:rgba(255,255,255,.85);
padding:24px;text-align:center;gap:8px
}
.fc-photo-placeholder svg{width:36px;height:36px;color:rgba(255,255,255,.5);stroke:currentColor;fill:none;stroke-width:1.2}
.fc-photo-placeholder .ph-cat{
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:13px;letter-spacing:.18em;color:rgba(212,178,90,.9);text-transform:uppercase
}
.fc-photo-placeholder .ph-line{font-family:'Noto Serif TC',serif;font-size:1.1rem;font-weight:700;letter-spacing:.06em}
.fc-photo-placeholder .ph-note{font-size:10.5px;color:rgba(255,255,255,.4);letter-spacing:.08em;margin-top:6px}
.fc-body{padding:22px 24px;flex:1;display:flex;flex-direction:column}
.fc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.fc-tag{
font-size:10.5px;padding:3px 9px;font-weight:700;letter-spacing:.04em;
background:var(--bg);color:var(--navy);border:1px solid var(--border)
}
.fc-tag.location{background:var(--cream);color:var(--gold);border-color:var(--gold)}
.fc-tag.brand{background:#eff6ff;color:#1d4ed8;border-color:#93c5fd}
.fc-title{
font-family:'Noto Serif TC',serif;font-size:1.05rem;font-weight:700;
color:var(--navy);margin-bottom:10px;letter-spacing:.04em;line-height:1.5
}
.fc-desc{font-size:13px;color:var(--text-2);line-height:1.85;margin-bottom:14px;flex:1}
.fc-specs{
display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;
padding-top:14px;border-top:1px solid var(--border);
font-size:11.5px
}
.fc-specs div{color:var(--text-3);letter-spacing:.04em}
.fc-specs strong{color:var(--navy);font-weight:700;display:block;margin-top:1px;letter-spacing:.02em}
.fc-quote{
margin-top:14px;padding:12px 14px;background:var(--cream);
border-left:2px solid var(--gold);
font-family:'Noto Serif TC',serif;font-style:italic;
font-size:12.5px;color:var(--text-1);line-height:1.85
}
.fc-quote::before{content:'\201C ';color:var(--gold);font-weight:700}
/* 篩選按鈕（沿用 pcat 風格） */
.fc-filter{
display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
margin-bottom:40px
}
.fc-filter-btn{
padding:8px 18px;border:1px solid var(--border);background:#fff;
font-family:'Manrope',sans-serif;font-size:12.5px;font-weight:700;
color:var(--navy);letter-spacing:.08em;cursor:pointer;
text-transform:uppercase;transition:all .2s
}
.fc-filter-btn.active,.fc-filter-btn:hover{
background:var(--navy);color:#fff;border-color:var(--navy)
}
/* ============================================================
* 桃園服務分布地圖（SVG bubble map）
* ============================================================ */
.coverage-section{padding:100px 24px;background:var(--cream);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.coverage-wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;max-width:1140px;margin:0 auto}
@media(max-width:900px){.coverage-wrap{grid-template-columns:1fr;gap:36px}}
.coverage-map{
background:#fff;border:1px solid var(--border);
padding:36px 32px;position:relative;aspect-ratio:1.2/1;
display:flex;align-items:center;justify-content:center
}
.coverage-map svg{width:100%;height:100%;max-width:520px}
.coverage-map .map-dot{
fill:var(--gold);stroke:#fff;stroke-width:2;
transition:transform .3s;cursor:pointer;transform-origin:center
}
.coverage-map .map-dot.primary{fill:var(--navy);r:8}
.coverage-map .map-dot:hover{transform:scale(1.4)}
.coverage-map .map-dot.primary{animation:dotPulse 2.5s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.65}}
.coverage-map .map-region{
fill:none;stroke:var(--border);stroke-width:1
}
.coverage-map .map-label{
font-family:'Manrope',sans-serif;font-size:10px;font-weight:600;
fill:var(--text-2);letter-spacing:.04em
}
.coverage-map .map-label.primary{fill:var(--navy);font-weight:700;font-size:11px}
.coverage-info{padding:8px 0}
.coverage-areas{
display:grid;grid-template-columns:repeat(2,1fr);gap:8px 14px;
margin-top:18px
}
.coverage-area{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-1)}
.coverage-area::before{
content:'';width:8px;height:8px;border-radius:50%;
background:var(--gold);flex-shrink:0
}
.coverage-area.primary::before{background:var(--navy)}
.coverage-area.primary{font-weight:700;color:var(--navy)}
/* ============================================================
* 十年完工里程碑 timeline
* ============================================================ */
.milestone-section{padding:100px 24px;background:#fff}
.milestone-line{
position:relative;max-width:1080px;margin:48px auto 0;
display:grid;grid-template-columns:repeat(5,1fr);gap:16px
}
@media(max-width:760px){.milestone-line{grid-template-columns:1fr;gap:24px}}
.milestone-line::before{
content:'';position:absolute;top:24px;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--gold) 8%,var(--gold) 92%,transparent)
}
@media(max-width:760px){.milestone-line::before{left:24px;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(180deg,transparent,var(--gold) 8%,var(--gold) 92%,transparent)}}
.milestone{position:relative;text-align:center;padding-top:60px}
@media(max-width:760px){.milestone{text-align:left;padding-top:0;padding-left:60px}}
.milestone-dot{
position:absolute;top:14px;left:50%;transform:translateX(-50%);
width:22px;height:22px;border-radius:50%;background:#fff;
border:2px solid var(--gold);z-index:2;
display:flex;align-items:center;justify-content:center
}
.milestone-dot::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--gold)}
@media(max-width:760px){.milestone-dot{top:0;left:24px;transform:translateX(-50%)}}
.milestone-year{
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:1.6rem;font-weight:500;color:var(--navy);
margin-bottom:8px;letter-spacing:.02em
}
.milestone-title{
font-family:'Noto Serif TC',serif;font-size:14.5px;
font-weight:700;color:var(--navy);margin-bottom:6px;letter-spacing:.04em
}
.milestone-desc{font-size:12px;color:var(--text-2);line-height:1.8}
/* ============================================================
* Stats 細化（4→6 個更精準）
* ============================================================ */
.stats-expanded{
display:grid;grid-template-columns:repeat(6,1fr);gap:14px;
max-width:1140px;margin:0 auto 48px
}
@media(max-width:980px){.stats-expanded{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.stats-expanded{grid-template-columns:repeat(2,1fr)}}
.stat-item{
text-align:center;padding:24px 12px;
background:#fff;border:1px solid var(--border);border-top:3px solid var(--gold)
}
.stat-item-num{
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:1.85rem;font-weight:500;color:var(--navy);
line-height:1;letter-spacing:.02em
}
.stat-item-num small{font-size:.8em;color:var(--gold);font-weight:600;margin-left:2px}
.stat-item-lbl{font-size:11.5px;color:var(--text-2);letter-spacing:.08em;margin-top:8px;line-height:1.4}
/* ============================================================
* 最新消息 News（政府補助/優惠/節能/季節提醒）
* ============================================================ */
.news-section{padding:100px 24px;background:#fff}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1200px;margin:0 auto}
@media(max-width:900px){.news-grid{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(max-width:560px){.news-grid{grid-template-columns:1fr;gap:14px}}
.news-card{
display:flex;flex-direction:column;
background:#fff;border:1px solid var(--border);
padding:28px 26px;text-decoration:none;color:inherit;
transition:all .3s;position:relative;overflow:hidden;min-height:240px
}
.news-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:var(--border);transition:background .3s
}
.news-card:hover{border-color:var(--navy);box-shadow:0 12px 36px rgba(19,34,72,.10);transform:translateY(-3px)}
.news-card:hover::before{background:var(--gold)}
.news-meta{
display:flex;align-items:center;gap:10px;margin-bottom:16px;
padding-bottom:14px;border-bottom:1px solid var(--border)
}
.news-date{
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:13px;color:var(--text-3);letter-spacing:.08em
}
.news-chip{
font-family:'Manrope',sans-serif;font-size:10.5px;font-weight:700;
letter-spacing:.12em;padding:4px 10px;
background:var(--bg);color:var(--navy);
border:1px solid var(--border);text-transform:uppercase
}
.news-chip.gov{
background:linear-gradient(135deg,#d4b25a 0%,#b08820 100%);
color:#fff;border-color:#b08820
}
.news-chip.promo{background:#fff7e6;color:#a16207;border-color:#fde68a}
.news-chip.eco{background:#ecfdf5;color:#15803d;border-color:#86efac}
.news-chip.seasonal{background:#eff6ff;color:#1d4ed8;border-color:#93c5fd}
.news-card h3{
font-family:'Noto Serif TC',serif;
font-size:1.15rem;font-weight:700;color:var(--navy);
margin-bottom:12px;letter-spacing:.04em;line-height:1.5
}
.news-card p{
font-size:13.5px;color:var(--text-2);line-height:1.95;
margin-bottom:14px;flex:1;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
overflow:hidden;text-overflow:ellipsis
}
.news-link{
font-family:'Manrope',sans-serif;font-size:12.5px;font-weight:700;
color:var(--gold);letter-spacing:.1em;
border-bottom:1px solid var(--gold);padding-bottom:2px;
display:inline-block;align-self:flex-start
}
/* news.html 列表頁專用 */
.news-list-section{padding:80px 24px;background:#fff;min-height:60vh}
.news-list{max-width:880px;margin:0 auto}
.news-list .news-card{margin-bottom:18px;min-height:auto;padding:28px 30px}
.news-list .news-card p{-webkit-line-clamp:unset;display:block}
.news-filter{
display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
margin:0 auto 36px;max-width:880px
}
.news-filter-btn{
padding:8px 18px;border:1px solid var(--border);background:#fff;
font-family:'Manrope',sans-serif;font-size:12.5px;font-weight:700;
color:var(--navy);letter-spacing:.08em;cursor:pointer;
text-transform:uppercase;transition:all .2s
}
.news-filter-btn.active,.news-filter-btn:hover{
background:var(--navy);color:#fff;border-color:var(--navy)
}
/* 政府補助突出顯示（首頁置頂） */
.news-card.featured{
background:linear-gradient(180deg,#fefcf6 0%,#f9f5ec 100%);
border-color:var(--gold);border-top-width:3px
}
.news-card.featured::before{background:var(--gold);height:3px}
/* ============================================================
* 服務流程 SOP timeline（超越富鼎 6 步、我們 8 步含 SLA）
* ============================================================ */
.flow-section{padding:120px 24px;background:var(--cream);position:relative}
.flow-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 60px;max-width:1100px;margin:0 auto;position:relative}
.flow-grid::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,var(--gold) 8%,var(--gold) 92%,transparent);transform:translateX(-50%)}
@media(max-width:760px){.flow-grid{grid-template-columns:1fr;gap:0}.flow-grid::before{left:32px;transform:none}}
.flow-step{padding:32px 0;position:relative}
.flow-step:nth-child(odd){padding-right:50px;text-align:right}
.flow-step:nth-child(even){grid-column:2;padding-left:50px;margin-top:60px}
@media(max-width:760px){
.flow-step,.flow-step:nth-child(odd),.flow-step:nth-child(even){
padding:24px 0 24px 70px;text-align:left;grid-column:1;margin-top:0
}
}
.flow-dot{
position:absolute;width:48px;height:48px;border-radius:50%;
background:#fff;border:2px solid var(--gold);
display:flex;align-items:center;justify-content:center;
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:1.05rem;font-weight:700;color:var(--gold);
top:36px;z-index:2
}
.flow-step:nth-child(odd) .flow-dot{right:-26px}
.flow-step:nth-child(even) .flow-dot{left:-26px}
@media(max-width:760px){
.flow-step:nth-child(odd) .flow-dot,
.flow-step:nth-child(even) .flow-dot{left:8px;right:auto}
}
.flow-num-en{
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:13px;letter-spacing:.22em;color:var(--gold);
text-transform:uppercase;margin-bottom:6px;display:block
}
.flow-title{
font-family:'Noto Serif TC',serif;font-size:1.3rem;
font-weight:700;color:var(--navy);margin-bottom:10px;letter-spacing:.04em
}
.flow-desc{font-size:14px;color:var(--text-1);line-height:1.95;margin-bottom:12px}
.flow-sla{
display:inline-block;padding:5px 12px;background:#fff;
border:1px solid var(--gold);color:var(--gold);
font-size:11.5px;font-weight:700;letter-spacing:.06em
}
/* ============================================================
* 品質承諾（富鼎沒有）
* ============================================================ */
.pledge-section{padding:100px 24px;background:#fff}
.pledge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1140px;margin:0 auto}
@media(max-width:900px){.pledge-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pledge-grid{grid-template-columns:1fr}}
.pledge-card{
background:linear-gradient(180deg,#fff 0%,var(--cream) 100%);
border:1px solid var(--border);border-top:3px solid var(--gold);
padding:32px 26px;transition:all .3s
}
.pledge-card:hover{box-shadow:0 12px 36px rgba(19,34,72,.10);transform:translateY(-3px)}
.pledge-num{
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:2.6rem;font-weight:500;color:var(--gold);
line-height:1;margin-bottom:14px;display:block
}
.pledge-card h3{
font-family:'Noto Serif TC',serif;font-size:1.15rem;font-weight:700;
color:var(--navy);margin-bottom:10px;letter-spacing:.06em
}
.pledge-card p{font-size:13.5px;color:var(--text-2);line-height:1.95}
/* ============================================================
* FAQ Q&A（富鼎沒有）
* ============================================================ */
.faq-section{padding:100px 24px;background:var(--cream)}
.faq-wrap{max-width:840px;margin:0 auto}
.faq-item{
background:#fff;border:1px solid var(--border);margin-bottom:12px;
transition:border-color .25s
}
.faq-item[open]{border-color:var(--gold)}
.faq-item summary{
cursor:pointer;padding:22px 26px;list-style:none;outline:none;
display:flex;justify-content:space-between;align-items:center;gap:18px;
font-family:'Noto Serif TC',serif;font-size:15.5px;font-weight:700;
color:var(--navy);letter-spacing:.04em
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
content:'+';font-family:'Fraunces',Georgia,serif;
font-size:1.6rem;color:var(--gold);font-weight:300;
transition:transform .25s;line-height:1;flex-shrink:0
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{background:rgba(176,136,32,.04)}
.faq-q-num{
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:12px;color:var(--gold);letter-spacing:.15em;
margin-right:14px;flex-shrink:0
}
.faq-body{padding:0 26px 24px;font-size:14px;color:var(--text-1);
line-height:1.95;border-top:1px solid var(--border);padding-top:18px;
margin-top:0}
.faq-body strong{color:var(--navy)}
/* ============================================================
* 認證牆（富鼎沒有）
* ============================================================ */
.cert-section{padding:90px 24px;background:#fff;border-top:1px solid var(--border)}
.cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1100px;margin:0 auto}
@media(max-width:780px){.cert-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:380px){.cert-grid{grid-template-columns:1fr}}
.cert-tile{
background:#fff;border:1px solid var(--border);padding:24px 18px;
text-align:center;transition:all .25s;display:flex;flex-direction:column;
align-items:center;justify-content:center;min-height:140px
}
.cert-tile:hover{border-color:var(--gold);box-shadow:var(--shadow-sm)}
.cert-icon{
width:48px;height:48px;border:1.5px solid var(--gold);border-radius:50%;
display:flex;align-items:center;justify-content:center;margin-bottom:14px;
color:var(--gold)
}
.cert-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5}
.cert-name{
font-family:'Noto Serif TC',serif;font-size:14px;font-weight:700;
color:var(--navy);letter-spacing:.04em;line-height:1.4;margin-bottom:4px
}
.cert-sub{font-size:11px;color:var(--text-3);letter-spacing:.06em}
/* P1: 代理品牌牆 手機修正
問題：780px 以下 3 欄，每欄 ~130px，NORTHERN(8字)/Panasonic(9字) 17px Fraunces 字體爆版
修法：560px 以下改 2 欄、aspect 寬鬆、字級降到 14.5px */
@media(max-width:560px){
.brand-wall{grid-template-columns:repeat(2,1fr);gap:12px}
.brand-tile{
aspect-ratio:5/3;padding:16px 10px;
text-align:center
}
.brand-tile strong{
font-size:14.5px;letter-spacing:.04em;
line-height:1.25;word-break:keep-all;white-space:nowrap;
max-width:100%;overflow:hidden;text-overflow:ellipsis
}
.brand-tile small{
font-size:10.5px;letter-spacing:.04em;
line-height:1.5;margin-top:5px;
white-space:normal
}
}
/* 360px 以下極小手機：字再縮 + aspect 更寬 */
@media(max-width:360px){
.brand-wall{gap:8px}
.brand-tile{aspect-ratio:5/3;padding:12px 8px}
.brand-tile strong{font-size:13px;letter-spacing:.02em}
.brand-tile small{font-size:10px}
}
/* ===== Photo background hero (Ken Burns slow zoom) ===== */
.hero-bg-img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center 30%;
z-index:0;
transform-origin:60% 50%;
animation:kenBurns 14s ease-in-out infinite alternate
}
@keyframes kenBurns{
0% {transform:scale(1) translate(0,0)}
100%{transform:scale(1.08) translate(-1.5%,1%)}
}
@media(prefers-reduced-motion:reduce){.hero-bg-img{animation:none}}
/* ===== Luxury hero variant (editorial left-align + asymmetric overlay) ===== */
.hero--luxury .hero-overlay{
background:
linear-gradient(105deg,rgba(6,16,42,.92) 0%,rgba(6,16,42,.78) 32%,rgba(6,16,42,.38) 60%,rgba(6,16,42,.15) 100%),
linear-gradient(0deg,rgba(6,16,42,.75) 0%,transparent 32%,transparent 82%,rgba(6,16,42,.45) 100%)
}
.hero--luxury .hero-inner{
text-align:left;padding-left:8px;
border-left:2px solid rgba(212,178,90,.7)
}
.hero--luxury .hero-inner .hero-eyebrow{margin-bottom:22px}
.hero--luxury .hero-inner h1{text-align:left;font-size:3.6rem}
.hero--luxury .hero-inner .hero-sub{text-align:left;margin:0 0 0 0;max-width:500px}
/* Right-side vertical brand label */
.hero-brand-axis{
position:absolute;right:44px;top:50%;transform:translateY(-50%);
z-index:4;pointer-events:none;
display:flex;flex-direction:column;align-items:center;gap:16px
}
.hero-brand-axis span{
writing-mode:vertical-rl;
font-family:'Fraunces',Georgia,serif;font-style:italic;
font-size:10.5px;letter-spacing:.38em;text-transform:uppercase;
color:rgba(212,178,90,.42)
}
.hero-brand-axis::before,.hero-brand-axis::after{
content:'';width:1px;height:44px;
background:linear-gradient(180deg,transparent,rgba(212,178,90,.38),transparent)
}
@media(max-width:900px){
.hero--luxury .hero-inner{text-align:center;border-left:none;padding-left:0}
.hero--luxury .hero-inner h1,.hero--luxury .hero-inner .hero-sub{text-align:center}
.hero--luxury .hero-inner .hero-sub{margin:0 auto}
.hero-brand-axis{display:none}
}
/* ===== Sub-page split hero (text left + SVG illustration right) ===== */
.hero--split{justify-content:center}
.hero--split .hero-inner{
display:flex;align-items:center;
justify-content:space-between;gap:56px;
text-align:left
}
.hero--split .hero-eyebrow{display:block;margin-bottom:20px}
.hero--split .hero-inner h1{text-align:left}
.hero--split .hero-sub{text-align:left;margin:0 0 0 0;max-width:520px}
.hero-visual{
flex:0 0 300px;width:300px;height:240px;
opacity:.88;
filter:drop-shadow(0 2px 24px rgba(74,102,176,.28));
pointer-events:none;user-select:none
}
.hero-visual svg{width:100%;height:100%}
@media(max-width:960px){
.hero--split .hero-inner{flex-direction:column-reverse;text-align:center;gap:20px}
.hero--split .hero-inner h1,.hero--split .hero-sub,.hero--split .hero-eyebrow{text-align:center}
.hero--split .hero-sub{margin:0 auto}
.hero-visual{width:220px;height:176px}
}
@media(max-width:560px){.hero-visual{display:none}}
.hs-machine-img{width:100%;height:auto;display:block;border-radius:4px 4px 0 0;}
/* 坪數 first stat prominent */
.hs-stat:first-child{background:#f0f4ff}
.hs-stat:first-child .hs-stat-num{font-size:1.75rem;color:var(--navy);font-weight:700}
.hs-stat:first-child .hs-stat-lbl{color:var(--navy);font-weight:700;opacity:.7}
/* Energy / subsidy badges row */
.hs-ebadges{display:flex;gap:6px;padding:7px 14px;background:#fafbfc;border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center}
.hs-ebadge{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;letter-spacing:.1em;padding:2px 7px;border-radius:2px;text-transform:uppercase;line-height:1.5}
.hs-ebadge--gold{background:rgba(212,178,90,.12);color:#92650a;border:1px solid rgba(212,178,90,.4)}
.hs-ebadge--green{background:#dcfce7;color:#15803d;border:1px solid #bbf7d0}
.hs-ebadge--blue{background:#dbeafe;color:#1d4ed8;border:1px solid #bfdbfe}
/* JT_SEO_CWV 2026-06-13 */
.hero{background-image:url('/img/hero-cinema-poster.jpg');background-size:cover;background-position:center}
@media(max-width:768px){.hero-video{display:none}}
a.area-tag{text-decoration:none}