:root{--ink:#14130f;--paper:#f4f0e8;--tint:#ebe5d9;--text:#f6f2ea;--muted:rgba(246,242,234,.72);--soft:rgba(20,19,15,.66);--line:#06c755;--pad:clamp(21.6px,5.4vw,86.4px)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:"Noto Sans TC",Arial,sans-serif;font-weight:400;font-size:15.3px;line-height:1.95;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2{font-family:"Noto Serif TC","Songti TC",serif;font-weight:500;line-height:1.45;letter-spacing:.03em}
h1{font-size:clamp(30.6px,3.96vw,57.6px)}
h2{font-size:clamp(23.4px,2.43vw,36px)}
strong{font-weight:500}
.kicker{font-size:11.7px;letter-spacing:.26em;color:var(--soft);margin-bottom:19.8px}

.top{position:absolute;inset:0 0 auto 0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:23.4px var(--pad);background:linear-gradient(rgba(20,19,15,.55),rgba(20,19,15,0))}
.top img{height:34px;width:auto}
.line{font-size:12.6px;letter-spacing:.12em;padding:8.1px 19.8px;color:var(--text);border:1px solid rgba(246,242,234,.7);border-radius:999px;background:rgba(20,19,15,.35);backdrop-filter:blur(6px);transition:.3s}
.line:hover{background:var(--text);color:var(--ink)}

/* 只有首屏與結尾用滿版圖，其餘段落圖文並排以維持資訊密度 */
.hero,.close{color:var(--text);display:flex;align-items:center;padding:117px var(--pad) 72px}
.hero{min-height:73.8svh;background:linear-gradient(90deg,rgba(20,19,15,.86) 0%,rgba(20,19,15,.55) 40%,rgba(20,19,15,.05) 72%),url(assets/01-hero-morning.webp) center/cover no-repeat,#2a261e}
.close{min-height:57.6svh;justify-content:center;text-align:center;padding:99px var(--pad);background:linear-gradient(rgba(20,19,15,.6),rgba(20,19,15,.78)),url(assets/05-evening.webp) center/cover no-repeat,var(--ink)}
.copy{max-width:594px}.close .copy{max-width:738px}
.hero .kicker{color:var(--muted)}
.hero .brand-lockup{transform:translateY(-8px)}
.lead{margin-top:23.4px;font-size:16.2px}
.lead.dim{margin-top:5.4px;color:var(--muted)}
.actions{margin-top:36px;display:flex;align-items:center;gap:25.2px;flex-wrap:wrap}
.hero .actions{transform:translateY(8px)}
.cta{display:inline-block;padding:8px 22px;line-height:1.6;min-height:38px;border-radius:999px;background:var(--line);color:#fff;font-weight:500;letter-spacing:.12em;font-size:13.5px;transition:.3s}
.cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
.close .cta{margin-top:36px}
.more{font-size:13.5px;letter-spacing:.1em;border-bottom:1px solid rgba(246,242,234,.5);padding-bottom:1.8px}

.facts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);background:var(--ink);color:var(--muted);font-size:13.5px;line-height:1.8}
.facts li{padding:30.6px var(--pad) 34.2px;border-left:1px solid rgba(246,242,234,.12)}
.facts li:first-child{border-left:0}
.facts strong{display:block;color:var(--text);font-family:"Noto Serif TC",serif;font-size:18.9px;letter-spacing:.06em;margin-bottom:5.4px}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32.4px,4.95vw,86.4px);align-items:center;padding:clamp(64.8px,7.2vw,115.2px) var(--pad)}
.split.reverse figure{order:2}
.split figure img{aspect-ratio:4/3;object-fit:cover}
.text{max-width:522px}
.text p+p,.text h2+p{margin-top:18px}
.text p{color:var(--soft)}.text p strong{color:var(--ink)}
.tint{background:var(--tint)}

.jobs{margin-top:25.2px;display:grid;grid-template-columns:1fr 1fr;gap:19.8px 32.4px}
.jobs dt{font-family:"Noto Serif TC",serif;font-weight:500;font-size:17.1px;letter-spacing:.05em;padding-top:12.6px;border-top:1px solid rgba(20,19,15,.22)}
.jobs dd{font-size:13.5px;line-height:1.8;color:var(--soft);margin-top:3.6px}

.checks{list-style:none;margin:19.8px 0}
.checks li{padding:11.7px 0 11.7px 27px;border-top:1px solid rgba(20,19,15,.16);position:relative}
.checks li:last-child{border-bottom:1px solid rgba(20,19,15,.16)}
.checks li::before{content:"";position:absolute;left:4px;top:1.55em;width:12px;height:1px;background:var(--ink)}

.statement{background:var(--ink);color:var(--text);padding:clamp(72px,8.1vw,126px) var(--pad);text-align:center}
.statement .cols{margin:39.6px auto 0;max-width:900px;display:grid;grid-template-columns:1fr 1fr;gap:43.2px;text-align:left;color:var(--muted)}
.statement strong{color:var(--text)}

.how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32.4px,4.95vw,86.4px);padding:clamp(64.8px,7.2vw,108px) var(--pad)}
.how ol{list-style:none;counter-reset:s}
.how li{counter-increment:s;padding:18px 0 18px 57.6px;border-top:1px solid rgba(20,19,15,.18);position:relative;color:var(--soft);font-size:14.4px}
.how li::before{content:"0" counter(s);position:absolute;left:0;top:18px;font-family:"Noto Serif TC",serif;font-size:23.4px;color:var(--ink)}
.how li strong{display:block;color:var(--ink);font-family:"Noto Serif TC",serif;font-size:18px;letter-spacing:.04em}
details{border-top:1px solid rgba(20,19,15,.18);padding:16.2px 0}
details:last-child{border-bottom:1px solid rgba(20,19,15,.18)}
summary{cursor:pointer;list-style:none;font-weight:500;display:flex;justify-content:space-between;gap:14.4px}
summary::-webkit-details-marker{display:none}
summary::after{content:"＋";font-weight:300}details[open] summary::after{content:"－"}
details p{margin-top:9px;color:var(--soft);font-size:14.4px}

footer{background:var(--ink);color:var(--muted);padding:57.6px 21.6px 46.8px;text-align:center;border-top:1px solid rgba(246,242,234,.12)}
footer img{height:30px;width:auto;margin:0 auto 19.8px}
footer p{font-size:11.7px;letter-spacing:.16em}
footer .fine{margin-top:7.2px;font-size:10.8px;opacity:.75}

@media(max-width:774px){
  body{font-size:14.4px}
  .top{padding:16.2px 18px}.top img{height:26px}.line{padding:6.3px 14.4px;font-size:11.7px}
  .hero{min-height:79.2svh;align-items:flex-end;padding:108px 21.6px 50.4px;background:linear-gradient(0deg,rgba(20,19,15,.92) 0%,rgba(20,19,15,.6) 50%,rgba(20,19,15,.15) 80%),url(assets/01-hero-morning.webp) 70% center/cover no-repeat,#2a261e}
  .hero br{display:none}.close br{display:none}
  .facts{grid-template-columns:1fr}.facts li{border-left:0;border-top:1px solid rgba(246,242,234,.12);padding:21.6px}
  .split,.how{grid-template-columns:1fr;padding:57.6px 21.6px}
  .split.reverse figure{order:0}
  .jobs{grid-template-columns:1fr}
  .statement{padding:64.8px 21.6px}.statement .cols{grid-template-columns:1fr;gap:18px}
}

/* 使用者指定首屏層級與價格洽詢入口。 */
.hero h1{font-size:clamp(23.4px,2.385vw,34.2px);line-height:1.6}
.hero .kicker{font-size:clamp(18px,2.025vw,28.8px);letter-spacing:.035em;color:var(--text);line-height:1.5}
.price-offer{display:flex;align-items:center;gap:21.6px;flex-wrap:wrap}
.price-offer p{font-size:25.2px;font-weight:500;line-height:1.5;letter-spacing:.02em}
.price-offer p span{display:block;font-size:14.4px;font-weight:400}
.close .price-offer{justify-content:center;margin-top:32.4px}
.close .price-offer .cta{margin-top:0}
@media(max-width:774px){.hero .kicker{font-size:19.8px}.hero h1{font-size:24.3px}.price-offer{gap:16.2px}.price-offer p{font-size:23.4px}.price-offer p span{font-size:13.5px}}

/* 依使用者參考圖，讓情境影像以圓角收邊；不改動原始素材。 */
.hero,.close,.split figure{border-radius:24px;overflow:hidden}
.top{border-radius:24px 24px 0 0}
@media(max-width:774px){
  .hero,.close,.split figure{border-radius:16.2px}
  .top{border-radius:18px 18px 0 0}
}

.hero .brand-lockup{display:flex;align-items:center;gap:12.6px;flex-wrap:wrap;font-size:21.6px;letter-spacing:.02em}
.brand-lockup img{width:106.2px;height:auto;background:#fff;border-radius:5px;flex:none}
@media(max-width:774px){.hero .brand-lockup{font-size:16.2px;gap:9px}.brand-lockup img{width:86.4px}}

.price-offer .price-note{flex-basis:100%;font-size:10.8px;font-weight:400;line-height:1.7;color:var(--muted);letter-spacing:.02em;margin-top:-9px}

/* 依使用者 2026-09-21 參考圖還原首屏比例，文字與官方標誌維持獨立 HTML。 */
.top{justify-content:flex-end;padding:28px 2.4vw;background:none;border-radius:0}
.top img{height:30px}
.hero{min-height:0;aspect-ratio:2.23/1;padding:7.9vw 5.65vw 5.5vw;border-radius:0;background:linear-gradient(90deg,rgba(12,13,11,.64),rgba(12,13,11,.30) 40%,transparent 65%),url(assets/01-hero-bright.png) center/cover no-repeat}
.hero .copy{max-width:none;width:76%}
.hero .brand-lockup{font-size:clamp(18px,1.75vw,30px);gap:15px;margin-bottom:30px}
.hero .brand-lockup img{width:clamp(100px,8.8vw,148px);border-radius:7px}
.hero h1{font-size:clamp(32px,3.55vw,60px);line-height:1.5;letter-spacing:.02em;font-weight:400}
.headline-first,.headline-second{display:block}
.hero h1 em{font-style:normal;color:#76b900}
.headline-second{font-size:.81em;white-space:nowrap}
.hero .lead{font-size:clamp(16px,1.28vw,22px);margin-top:32px;line-height:1.7}
.hero .lead.dim{margin-top:3px;color:var(--text)}
.hero .actions{margin-top:38px}
.hero .price-offer{gap:12px 28px}
.hero .price-offer p{font-size:clamp(30px,2.5vw,42px);line-height:1.3}
.hero .price-offer p span{font-size:clamp(14px,1.17vw,20px);margin-top:3px}
.hero .cta{font-size:clamp(17px,1.4vw,24px);padding:8px 42px;line-height:1.6;letter-spacing:.02em}
.hero .price-note{margin-top:0;font-size:12px}
.facts{padding:34px 0;background:#181813;font-size:clamp(14px,1.18vw,20px)}
.facts li{padding:8px 3.2vw 12px 5.65vw}
.facts li::before{content:"";display:block;width:36px;height:3px;background:#76b900;margin-bottom:12px}
.facts strong{font-size:clamp(22px,1.75vw,30px);margin-bottom:8px}
@media(max-width:860px){
 .top{padding:20px 22px}.top img{height:26px}
 .hero{aspect-ratio:auto;min-height:760px;padding:138px 24px 45px;align-items:flex-end;background-position:66% center;background-image:linear-gradient(0deg,rgba(12,13,11,.85),rgba(12,13,11,.45) 50%,rgba(12,13,11,.05)),url(assets/01-hero-bright.png)}
 .hero .copy{width:100%;transform:translateY(-16px)}.hero .brand-lockup{font-size:18px;gap:10px;margin-bottom:30px}
 .hero .brand-lockup img{width:96px}.hero h1{font-size:31px}
 .headline-second{font-size:27px;white-space:normal}
 .hero .lead{font-size:16px;margin-top:25px}.hero .actions{margin-top:36px}
 .hero .price-offer{gap:12px 20px}.hero .price-offer p{font-size:30px}.hero .cta{font-size:17px;padding:8px 25px}
 .facts{padding:0}.facts li{padding:26px 24px}.facts strong{font-size:22px}
}
.top img{height:42px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.25))}
@media(max-width:860px){.top img{height:30px}.hero .headline-first{font-size:26px;white-space:nowrap;letter-spacing:0}.hero .headline-second{font-size:25px}}

/* 深色、高對比影像層；只調背景，不影響文字與官方 Logo 原檔。 */
.hero{position:relative;isolation:isolate;background:#29251e}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url(assets/01-hero-bright.png) center/cover no-repeat;filter:contrast(1.22) brightness(.86) saturate(1.08)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,12,10,.65),rgba(10,12,10,.3) 40%,transparent 68%)}
.top{background:radial-gradient(ellipse at 100% 0,rgba(12,15,12,.76),rgba(12,15,12,.3) 30%,transparent 67%)}
.top img{height:36px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
@media(max-width:860px){
 .hero::before{background-position:66% center}
 .hero::after{background:linear-gradient(0deg,rgba(12,13,11,.85),rgba(12,13,11,.45) 50%,rgba(12,13,11,.05))}
 .top img{height:28px}
}

/* 桌機以可視高度安排主視覺與三欄說明，避免 2K 螢幕需捲動才能看完。 */
@media(min-width:861px){
 .first-screen{height:100svh;min-height:640px;display:grid;grid-template-rows:minmax(0,1fr) auto}
 .first-screen .hero{aspect-ratio:auto;height:100%;padding:80px 5.65vw 28px}
 .hero .copy{transform:translateY(-24px)}
 .hero .brand-lockup{margin-bottom:clamp(28px,3.5vh,42px)}
 /* 所有首屏文字共用同一比例，避免標題單獨隨高度縮小。 */
 .hero{--hero-type:clamp(32.4px,3.195vw,56px)}
 .hero h1{font-size:var(--hero-type);font-weight:500;line-height:1.4}
 .hero .headline-second{font-size:.81em}
 .hero .brand-lockup{font-size:calc(var(--hero-type)*.46);gap:calc(var(--hero-type)*.25)}
 .hero .brand-lockup img{width:calc(var(--hero-type)*2.5)}
 .hero .lead{font-size:calc(var(--hero-type)*.38);line-height:1.7}
 .hero .price-offer p{font-size:calc(var(--hero-type)*.7)}
 .hero .price-offer p span{font-size:calc(var(--hero-type)*.33)}
 .hero .cta{font-size:calc(var(--hero-type)*.4);font-weight:400;padding:8px calc(var(--hero-type)*.85)}
 .hero .lead{margin-top:clamp(16px,3vh,32px)}
 .hero .lead.dim{margin-top:3px}
 .hero .actions{margin-top:clamp(32px,4.5vh,50px)}
 .first-screen .facts{padding:18px 0;border-radius:0 0 18px 18px;font-size:clamp(14px,1vw,16px);line-height:1.65}
 .first-screen .facts li{padding:4px 3.2vw 6px 5.65vw}
 .first-screen .facts strong{font-size:clamp(20px,1.4vw,23px);line-height:1.5;margin-bottom:5px}
 .facts li::before{width:32px;height:3px;background:#76b900;margin-bottom:9px}
}

/* 應用區依使用者參考圖：深暖底、雙欄功能與右側大圖。 */
.applications{position:relative;isolation:isolate;overflow:hidden;color:var(--text);background:#191813;grid-template-columns:minmax(0,.83fr) minmax(0,1fr);gap:2.7vw;padding:7vw 3.7vw 7vw 5.1vw;align-items:stretch}
.applications::before{content:"";position:absolute;inset:-30px;z-index:-1;background:linear-gradient(90deg,rgba(15,16,13,.94),rgba(22,19,14,.68) 60%,rgba(15,16,13,.9)),url(assets/01-hero-bright.png) center/cover;filter:blur(14px)}
.applications .text{max-width:none}
.applications .kicker{display:flex;align-items:center;gap:22px;color:var(--text);font-size:clamp(13px,1.05vw,18px);letter-spacing:.15em;margin-bottom:20px}
.applications .kicker::before{content:"";width:42px;height:4px;background:#76b900;flex:none}
.applications h2{font-size:clamp(32px,3.55vw,64px);line-height:1.35;letter-spacing:.015em}
.applications h2 em{font-style:normal;color:#76b900}
.applications .jobs{margin-top:42px;gap:28px 2.5vw;grid-template-columns:1fr 1fr}
.applications .jobs dt{border-color:rgba(246,242,234,.26);font-size:clamp(20px,1.6vw,28px);padding-top:18px;line-height:1.5}
.applications .jobs dt::before{content:"";display:block;width:38px;height:3px;background:#76b900;margin-bottom:9px}
.applications .jobs dd{color:rgba(246,242,234,.86);font-size:clamp(14px,1.05vw,18px);line-height:1.65;margin-top:7px}
.applications figure{border-radius:26px;border:1px solid rgba(246,242,234,.42);min-height:100%}
.applications figure img{height:100%;aspect-ratio:auto;object-fit:cover;object-position:center}
@media(max-width:860px){
 .applications{grid-template-columns:1fr;padding:54px 24px;gap:34px}
 .applications.reverse figure{order:2;min-height:0}
 .applications figure img{height:auto;aspect-ratio:1.15;object-fit:cover}
 .applications h2{font-size:clamp(29px,5.4vw,42px)}
 .applications .jobs{margin-top:28px;gap:22px 20px}
 .applications .jobs dt{font-size:20px}.applications .jobs dd{font-size:14px}
}

/* 全頁文字沿用同一組層級，維持沉穩、清楚的閱讀節奏。 */
:root{
 --type-body:clamp(16px,1.05vw,18px);
 --type-small:clamp(13px,.82vw,14px);
 --type-kicker:clamp(13px,.88vw,15px);
 --type-section:clamp(34px,3vw,52px);
 --type-subhead:clamp(20px,1.45vw,25px);
}
body{font-size:var(--type-body);line-height:1.85}
h2{font-size:var(--type-section);line-height:1.4;letter-spacing:.025em}
.kicker{font-size:var(--type-kicker);line-height:1.6;letter-spacing:.18em;margin-bottom:20px}
.text{max-width:600px}
.text p:not(.kicker){font-size:var(--type-body);line-height:1.85}
.text p+p,.text h2+p{margin-top:22px}
.facts{font-size:clamp(15px,1vw,17px);line-height:1.7}
.facts strong{font-size:clamp(21px,1.45vw,25px);line-height:1.45}
.jobs dt{font-size:var(--type-subhead);line-height:1.5}
.jobs dd{font-size:clamp(15px,.98vw,17px);line-height:1.75}
.statement .cols{font-size:var(--type-body);line-height:1.85}
.how li{font-size:clamp(15px,1vw,17px);line-height:1.75}
.how li strong{font-size:var(--type-subhead);line-height:1.55}
summary{font-size:clamp(16px,1.05vw,18px);line-height:1.65}
details p{font-size:clamp(15px,1vw,17px);line-height:1.75}
.close .lead{font-size:clamp(16px,1.18vw,20px);line-height:1.75}
footer p{font-size:clamp(12px,.82vw,14px);line-height:1.7;letter-spacing:.1em}
footer .fine{font-size:clamp(11px,.75vw,13px);line-height:1.7;letter-spacing:.08em}
.applications .kicker{font-size:var(--type-kicker)}
.applications h2{font-size:clamp(36px,3.2vw,56px);line-height:1.4}
.applications .jobs dt{font-size:clamp(20px,1.45vw,25px);line-height:1.5}
.applications .jobs dd{font-size:clamp(15px,1vw,17px);line-height:1.75}

@media(max-width:860px){
 body{font-size:16px;line-height:1.8}
 h2,.applications h2{font-size:30px;line-height:1.4}
 .kicker,.applications .kicker{font-size:13px;line-height:1.55;letter-spacing:.16em}
 .text p:not(.kicker),.statement .cols,.how li,summary,details p{font-size:16px}
 .jobs dt,.applications .jobs dt,.how li strong{font-size:20px}
 .jobs dd,.applications .jobs dd{font-size:15px}
 footer p{font-size:13px}footer .fine{font-size:12px}
}

/* 短手機視窗把整組首屏文案往上收，保留字級與間距並讓價格進入可視範圍。 */
@media(max-width:860px) and (max-height:700px){
 .hero .copy{transform:translateY(calc(-16px - (700px - 100svh)))}
}