*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.75 "WD Sans","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif}
a{color:var(--acc)}
img{max-width:100%;height:auto}
.bar{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--bg);border-bottom:1px solid var(--line)}
.brand{font-weight:700;color:var(--fg);text-decoration:none}
.bar nav{display:flex;gap:18px;flex-wrap:wrap}
.bar nav a{color:var(--mut);text-decoration:none}
.bar nav a[aria-current]{color:var(--fg);border-bottom:2px solid var(--acc)}
.hero{padding:96px 20px 72px;max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.hero:has(.hero-img){grid-template-columns:1.1fr .9fr}
.hero h1{font-size:clamp(32px,6vw,56px);line-height:1.25;margin:0 0 16px}
.eyebrow{margin:0 0 12px;color:var(--acc);font-weight:700;letter-spacing:.12em;font-size:.9rem}
.lead{color:var(--mut);font-size:1.15rem;max-width:36em}
.hero-img img{display:block;width:100%;height:auto;border-radius:20px}
@media (max-width:760px){.hero,.hero:has(.hero-img){grid-template-columns:1fr;padding:64px 20px 48px}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;padding-top:0;padding-bottom:16px}
.stat{padding:20px;border-radius:16px;background:var(--card);border:1px solid var(--line);text-align:center}
.stat b{font-size:clamp(28px,5vw,44px);line-height:1.1;color:var(--acc)}
.stat .unit{margin-left:4px;color:var(--acc);font-weight:700}
.stat small{display:block;margin-top:6px;color:var(--mut)}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:700}
.faq details p{margin:10px 0 0;color:var(--mut)}
.cta-band{margin:24px auto 0;max-width:1000px;padding:48px 20px;text-align:center}
.cta-band h2{margin:0 0 12px}
/* 互動特效（site.js 依 特效.互動 啟動） */
.fx-spot{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle 260px at var(--x,50%) var(--y,40%),color-mix(in srgb,var(--acc) 18%,transparent),transparent 70%)}
.fx-tilt,.fx-magnet{transition:transform .18s ease-out;will-change:transform}
.bg .aurora-container{width:100%;height:100%}
/* 畫布類背景（Vanta／React 島）上面蓋一層底色薄紗，不管背景多亮，文字對比都夠 */
.bg:not(.bg-gradient)::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 42%,transparent);pointer-events:none}
.bg-gradient{overflow:hidden}
.bg-gradient i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);opacity:.45;animation:drift 22s ease-in-out infinite alternate}
.bg-gradient i:nth-child(1){background:var(--acc);top:-20vmax;left:-15vmax}
.bg-gradient i:nth-child(2){background:color-mix(in srgb,var(--acc) 55%,#fff);bottom:-25vmax;right:-15vmax;animation-delay:-8s}
.bg-gradient i:nth-child(3){background:color-mix(in srgb,var(--acc) 30%,var(--bg));top:20vh;left:35vw;animation-delay:-14s}
@keyframes drift{to{transform:translate(8vmax,6vmax) scale(1.15)}}
@media (prefers-reduced-motion:reduce){.bg-gradient i{animation:none}}
.wrap{max-width:1000px;margin:0 auto;padding:48px 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px}
.card h2,.card h3{margin:0 0 8px;font-size:1.1rem}
.card p{margin:0;color:var(--mut)}
.btn{display:inline-block;padding:12px 24px;border-radius:999px;background:var(--acc);color:var(--bg);text-decoration:none;font-weight:700;margin:6px 8px 6px 0}
.btn.line{background:#06c755;color:#fff}
.contact{list-style:none;padding:0}
.contact li{padding:6px 0;border-bottom:1px solid var(--line)}
.line-box{margin-top:24px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.qr{border-radius:8px;background:#fff;padding:6px}
.bg{position:fixed;inset:0;z-index:-1}
.foot{padding:32px 20px;text-align:center;color:var(--mut);border-top:1px solid var(--line)}
/* 進場動畫：site.js 啟動後才加 .ready，JS 沒跑或失敗時內容照常顯示 */
.ready .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.ready .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ready .reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ── minimal：日式極簡（規則取自 company\hunglun2026-內部資料\BRAND.md）──
   細線分隔取代卡片陰影、扁平直角、標題靠左、細字重（內文 400、標題 500，不用 700 以上）、
   實心直角主按鈕＋底線次要連結、只有一個強調色（--acc）、大量留白。 */
.tpl-minimal{font-size:16px;line-height:1.85;letter-spacing:.02em;font-weight:400;-webkit-font-smoothing:antialiased}
.tpl-minimal h1,.tpl-minimal h2,.tpl-minimal h3,.tpl-minimal b,.tpl-minimal summary{font-weight:500}
.tpl-minimal a{color:var(--fg)}
.tpl-minimal .wrap{max-width:1080px;padding:56px 24px}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;z-index:20;background:var(--bg);padding:8px 12px;border:1px solid var(--fg)}

/* 圖示：Tabler 線條，跟著文字顏色，線寬調細 */
.ico{display:inline-flex;vertical-align:-.15em}
.ico svg{width:1.15em;height:1.15em;stroke-width:1.5}

/* 頁首：LOGO＋店名靠左，選單靠右；手機選單改成可左右滑的一列（不需要 JS） */
.tpl-minimal .bar{padding:14px 24px;gap:10px 32px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:saturate(1.2) blur(6px)}
.tpl-minimal .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--fg);font-weight:500;min-width:0}
.tpl-minimal .brand img{width:44px;height:44px;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.3}
.brand-text b{font-size:1.05rem;letter-spacing:.08em}
.brand-text small{font-size:.66rem;letter-spacing:.24em;color:var(--mut)}
.tpl-minimal .bar nav{gap:28px}
.tpl-minimal .bar nav a{color:var(--mut);font-size:.95rem;padding:4px 0;border-bottom:1px solid transparent}
.tpl-minimal .bar nav a:hover{color:var(--fg)}
.tpl-minimal .bar nav a[aria-current]{color:var(--fg);border-bottom:1px solid var(--acc)}
@media (max-width:860px){
  .tpl-minimal .bar{padding:10px 16px}
  .tpl-minimal .bar nav{width:100%;flex-wrap:nowrap;overflow-x:auto;gap:22px;padding-bottom:2px;scrollbar-width:none}
  .tpl-minimal .bar nav::-webkit-scrollbar{display:none}
  .tpl-minimal .bar nav a{white-space:nowrap}
  .brand-text small{display:none}
}

/* 首頁標語：靠左、留白、細字重的大字 */
.tpl-minimal .hero{display:grid;grid-template-columns:1fr;gap:48px;padding-top:112px;padding-bottom:88px;text-align:left;max-width:1080px}
.tpl-minimal .hero:has(.hero-img){grid-template-columns:1.1fr .9fr;align-items:end}
.tpl-minimal .hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1.36;letter-spacing:.04em;margin:0 0 24px}
.tpl-minimal .eyebrow{color:var(--acc);font-weight:500;font-size:.8rem;letter-spacing:.28em;margin:0 0 20px}
.tpl-minimal .lead{color:var(--mut);font-size:1.08rem;max-width:34em;margin:0}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin:40px 0 0}
.hero-img{margin:0}
.hero-img img{border-radius:0;display:block;width:100%}
figcaption{font-size:.75rem;color:var(--mut);margin-top:6px;letter-spacing:.1em}
@media (max-width:760px){.tpl-minimal .hero,.tpl-minimal .hero:has(.hero-img){grid-template-columns:1fr;padding-top:64px;padding-bottom:48px}}

/* 按鈕：實心直角主按鈕、外框次要按鈕、底線文字連結 */
.tpl-minimal .btn{border-radius:0;padding:14px 30px;font-weight:500;letter-spacing:.12em;background:var(--acc);color:#fff;margin:0;display:inline-flex;align-items:center;gap:10px;transition:background .2s}
.tpl-minimal .btn:hover{background:color-mix(in srgb,var(--acc) 82%,#000)}
.tpl-minimal .btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--fg)}
.text-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border-bottom:1px solid var(--fg);padding-bottom:2px;font-size:.95rem}
.text-link:hover{color:var(--acc);border-color:var(--acc)}

/* 區塊標題：左標題右連結，下方一條細線 */
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--fg);padding-bottom:16px;margin-bottom:8px}
.sec-head h2{margin:0;font-size:clamp(22px,2.6vw,28px);letter-spacing:.08em}
.page-head{padding-bottom:24px}
.page-head h1{font-size:clamp(30px,4.4vw,46px);letter-spacing:.06em;margin:0 0 16px}

/* 首頁：依客群看服務（兩欄細線列表） */
.groups{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));column-gap:48px}
.groups li{border-bottom:1px solid var(--line)}
.groups a{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:22px 0;text-decoration:none}
.groups .ico{grid-row:span 2;color:var(--acc);font-size:1.3rem;padding-top:2px}
.groups span{color:var(--mut);font-size:.92rem}
.groups a:hover b{color:var(--acc)}

/* 流程：大號數字＋細線 */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 40px}
.steps li{border-top:1px solid var(--line);padding:24px 0 8px}
.steps .num{display:block;font-size:2.2rem;line-height:1;color:var(--acc);font-weight:300;letter-spacing:.04em;margin-bottom:14px;font-variant-numeric:tabular-nums}
.steps b{display:block;font-size:1.1rem;margin-bottom:6px}
.steps p{margin:0;color:var(--mut);font-size:.95rem}
.steps-full{grid-template-columns:1fr}
.steps-full li{display:grid;grid-template-columns:96px 1fr;column-gap:24px}
.steps-full .num{grid-row:span 2;margin:0}
@media (max-width:560px){.steps-full li{grid-template-columns:56px 1fr}.steps-full .num{font-size:1.6rem}}

/* 文章列表 */
.post-list{list-style:none;margin:0;padding:0}
.post-list li{border-bottom:1px solid var(--line)}
.post-list a{display:grid;grid-template-columns:120px 1fr;gap:4px 24px;padding:22px 0;text-decoration:none}
.post-list time{grid-row:span 2;color:var(--mut);font-size:.85rem;font-variant-numeric:tabular-nums;padding-top:3px}
.post-list span{color:var(--mut);font-size:.92rem}
.post-list a:hover b{color:var(--acc)}
.post-list.compact a{grid-template-columns:1fr;padding:14px 0}
@media (max-width:560px){.post-list a{grid-template-columns:1fr}.post-list time{grid-row:auto}}

/* 服務頁：依客群分段，細線列表 */
.group h2{display:flex;align-items:center;gap:12px;font-size:1.4rem;letter-spacing:.08em;margin:0 0 8px;padding-bottom:14px;border-bottom:1px solid var(--fg)}
.group h2 .ico{color:var(--acc)}
.group{padding-top:24px;padding-bottom:24px}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:grid;grid-template-columns:1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}
.rows li:has(figure){grid-template-columns:220px 1fr}
.rows figure{margin:0}
.rows img{display:block;width:100%;height:auto}
.rows h3{margin:0 0 6px;font-size:1.1rem}
.rows p{margin:0;color:var(--mut)}
@media (max-width:560px){.rows li:has(figure){grid-template-columns:1fr}}

/* 常見問題：無底色、細線、＋號 */
.tpl-minimal .faq details{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:20px 0;margin:0}
.tpl-minimal .faq summary{list-style:none;display:flex;justify-content:space-between;gap:16px;cursor:pointer;font-size:1.05rem}
.tpl-minimal .faq summary::-webkit-details-marker{display:none}
.tpl-minimal .faq summary::after{content:"+";color:var(--acc);font-weight:300;font-size:1.4rem;line-height:1}
.tpl-minimal .faq details[open] summary::after{content:"−"}
.tpl-minimal .faq details p{color:var(--mut);margin:12px 0 0;max-width:44em}

/* 文章內頁：窄欄好讀 */
.post{max-width:760px}
.crumbs{font-size:.85rem;color:var(--mut);display:flex;gap:10px;margin-bottom:28px}
.crumbs a{color:var(--mut)}
.post h1{font-size:clamp(28px,4vw,40px);line-height:1.4;letter-spacing:.04em;margin:0 0 12px}
.post .meta{color:var(--mut);font-size:.85rem;margin:0 0 24px}
.post .lead{font-size:1.05rem;border-left:2px solid var(--acc);padding-left:18px;margin-bottom:32px}
.post-img{margin:0 0 32px}
.post-img img{display:block;width:100%}
.post-body h2{font-size:1.35rem;letter-spacing:.06em;margin:48px 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.post-body p,.post-body li{color:color-mix(in srgb,var(--fg) 88%,var(--bg))}
.post-body ul{padding-left:1.2em}
.post-body li{margin:6px 0}
.post-body .note{background:var(--card);border-left:2px solid var(--acc);padding:14px 18px;font-size:.95rem}
.post-cta{margin:56px 0 0;padding:28px 0;border-top:1px solid var(--fg);border-bottom:1px solid var(--fg);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.post-cta p{margin:0}
.related{margin-top:48px}
.related h2{font-size:1.1rem;letter-spacing:.1em}

/* 關於：窄欄 */
.prose{max-width:760px;padding-top:0}
.prose p{color:color-mix(in srgb,var(--fg) 88%,var(--bg))}

/* 聯絡 */
.tpl-minimal .contact{list-style:none;padding:0;margin:0;max-width:720px}
.tpl-minimal .contact li{display:grid;grid-template-columns:auto 6em 1fr;gap:14px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.tpl-minimal .contact .ico{color:var(--acc)}
.tpl-minimal .contact span{color:var(--mut);font-size:.9rem}
.tpl-minimal .contact em{font-style:normal}
@media (max-width:560px){.tpl-minimal .contact li{grid-template-columns:auto 1fr}.tpl-minimal .contact li>a,.tpl-minimal .contact li>em{grid-column:2}}
.map iframe{display:block;width:100%;height:380px;border:0;filter:grayscale(.35)}
.tpl-minimal .qr{border-radius:0}

/* 結尾行動區：靠左，細線框住 */
.tpl-minimal .cta-band{text-align:left;margin-top:40px}
/* 線畫在標題上，才會跟內容同寬（畫在 .wrap 上會多出左右內距） */
.tpl-minimal .cta-band h2{font-size:clamp(22px,3vw,32px);letter-spacing:.06em;margin:0 0 24px;padding-top:40px;border-top:1px solid var(--fg)}
.cta-contact{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin:0}
.about-teaser p{max-width:40em;color:var(--mut)}

/* 頁尾 */
.tpl-minimal .foot{text-align:left;padding:48px 24px 40px;font-size:.88rem}
.foot-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px 48px}
.foot-grid p{margin:4px 0}
.foot-name{color:var(--fg);font-weight:500;letter-spacing:.1em}
.foot-grid a{color:var(--mut);text-decoration:none}
.foot-grid a:hover{color:var(--fg)}
.foot-grid nav{display:flex;flex-wrap:wrap;gap:8px 20px;align-content:start}

@font-face{font-family:"WD Sans";src:url("../fonts/site-sans.woff2?v=877e9d04") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}