/* 版面：米白底、正常大小的標題，靠動畫帶出質感：開場照片輪播、往下滑淡入、滑過浮起、批號沿流程跑 */
:root{color-scheme:light;--bg:#FBF8F2;--card:#FFFFFF;--ink:#383635;--sub:#6F6A64;--line:#E4DDD1;--deep:#2E2D2A;--soft:#F1ECE3;--accent:#4F6E78;--note:#9A5B13;
--head:"Noto Serif TC","PMingLiU",serif;--body:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:18px/1.8 var(--body);overflow-x:hidden}
.w{max-width:1140px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.note{color:var(--note)}
h1,h2,h3{font-family:var(--head);margin:0;text-wrap:balance;line-height:1.35}
h1{font-size:clamp(34px,4.6vw,54px)}h2{font-size:clamp(28px,3.4vw,38px)}h3{font-size:22px}
p{margin:0;max-width:36em}
.eyebrow{font-size:14px;letter-spacing:.2em;color:var(--accent);font-weight:700}
/* 選單：往下滑變窄、加陰影 */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(251,248,242,.9);backdrop-filter:blur(8px);transition:box-shadow .3s}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--bg)}
.top.sm{box-shadow:0 4px 20px rgba(56,54,53,.08)}
.top .w{display:flex;align-items:center;gap:16px;padding-block:14px;transition:padding .3s;flex-wrap:wrap}
.top.sm .w{padding-block:6px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;font:700 22px var(--head);color:var(--ink);text-decoration:none}
.brand img{height:64px;width:auto;transition:height .3s}.top.sm .brand img{height:48px}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav a{position:relative;color:var(--ink);text-decoration:none;padding:6px 12px;font-size:16px}
nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;background:var(--accent);transform:scaleX(0);transition:transform .3s}
nav a:hover::after,nav a.on::after{transform:scaleX(1)}
nav a:focus-visible{outline:2px solid var(--accent)}
/* 開場 */
.hero .w{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;padding-block:56px 72px}
.hero .txt{display:grid;gap:20px}
.hero h1 span{display:inline-block;animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero h1 span:nth-child(2){animation-delay:.12s}.hero .txt p{animation:rise .9s .25s both}.hero .btns{animation:rise .9s .38s both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 26px;border-radius:999px;text-decoration:none;font-weight:700;transition:transform .2s,box-shadow .2s}
.btn.main{background:var(--deep);color:var(--bg)}.btn.ghost{border:1.5px solid var(--deep);color:var(--deep)}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(46,45,42,.18)}
.show{position:relative;aspect-ratio:5/4;border-radius:14px;overflow:hidden;max-width:100%;box-shadow:0 20px 50px rgba(56,54,53,.15)}
.slide{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:17px;opacity:0;transition:opacity 1.2s}
.slide.on{opacity:1}.slide.on i{animation:kb 6s linear both}
.slide i{position:absolute;inset:0}
.slide span{position:relative;background:rgba(0,0,0,.25);padding:4px 12px;border-radius:4px}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
.dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.dots b{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.5);transition:width .4s}
.dots b.on{width:26px;background:#fff}
/* 往下滑淡入：沒有支援也照樣看得到 */
.rv{transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.wait{opacity:.15;transform:translateY(30px)}
section{padding-block:88px}
.alt{background:var(--soft)}
.head{display:grid;gap:10px;margin-bottom:40px}
/* 數字 */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.num{border-left:3px solid var(--accent);padding-left:16px}
.num b{display:block;font:700 44px var(--head);font-variant-numeric:tabular-nums}
/* 產品卡片 */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.card{background:var(--card);border-radius:12px;overflow:hidden;transition:transform .3s,box-shadow .3s;display:grid}
.card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(56,54,53,.13)}
.pic{aspect-ratio:4/3;overflow:hidden;position:relative}
.pic i{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-style:normal;font-size:15px;transition:transform .6s}
.card:hover .pic i{transform:scale(1.08)}
.card .in{padding:16px 18px 20px;display:grid;gap:6px}
/* 追溯流程 */
.track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.track::before{content:"";position:absolute;left:12.5%;right:12.5%;top:28px;height:2px;background:var(--line)}
.track .bar{position:absolute;left:12.5%;top:28px;height:2px;background:var(--accent);width:0;animation:fill 8s ease-in-out infinite}
@keyframes fill{0%{width:0}75%,100%{width:75%}}
.st{text-align:center;display:grid;justify-items:center;gap:8px;position:relative}
.st .c{width:56px;height:56px;border-radius:50%;background:var(--card);border:2px solid var(--accent);display:grid;place-items:center;font:700 20px var(--head);color:var(--accent)}
.certs .pic{aspect-ratio:3/4}
.cert a{color:var(--accent);font-weight:700;text-decoration:none}
/* 兩廠 */
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
/* 消息 */
.list{border-top:1px solid var(--line)}
.li{display:grid;grid-template-columns:8em 1fr;gap:20px;padding-block:18px;border-bottom:1px solid var(--line);transition:padding .3s,background .3s}
.li:hover{padding-left:12px;background:var(--card)}
.li span{color:var(--sub);font-variant-numeric:tabular-nums}
dl{display:grid;grid-template-columns:7em 1fr;gap:10px 20px;margin:0}dt{color:var(--sub)}dd{margin:0}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
footer{background:var(--deep);color:#CFC8BD;font-size:15px}footer .w{padding-block:28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
@media (max-width:820px){.hero .w,.two,.contact{grid-template-columns:1fr}.nums{grid-template-columns:1fr}.track{grid-template-columns:1fr 1fr;row-gap:28px}.track::before,.track .bar{display:none}nav{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rv.wait{opacity:1;transform:none}html{scroll-behavior:auto}}

.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:hover .pic img{transform:scale(1.08)}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide.on img{animation:kb 6s linear both}
.li p{grid-column:2;color:var(--sub);font-size:16px}
.mapbtn{margin-top:20px}
@media (max-width:820px){.li p{grid-column:1}}