:root{
  --bg:#F6F5F1; --card:#ECEBE6; --ink:#142A3F; --ink2:#55677A; --mute:#B9BFC4;
  --cyan:#009FE8; --lime:#C8F060; --line:#DEDCD5; --r:24px; --pad:clamp(16px,3.2vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--ink);font-family:"Inter Tight","Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400}
a{color:inherit;text-decoration:none}
.mono{font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.wrap{padding:0 var(--pad)}
.label{display:inline-flex;align-items:center;gap:10px;background:#fff;border-radius:6px;padding:7px 12px}
.label::before{content:"";width:8px;height:8px;background:var(--lime);border-radius:1px}
.btn{display:inline-flex;align-items:stretch;gap:4px}
.btn span{background:var(--ink);color:#fff;border-radius:10px 4px 4px 10px;padding:15px 20px}
.btn i{background:var(--lime);color:var(--ink);border-radius:4px 10px 10px 4px;width:48px;display:grid;place-items:center;font-style:normal;transition:.3s}
.btn:hover i{transform:translateX(4px)}

/* 導覽列 */
.topnav{position:fixed;top:16px;left:var(--pad);right:var(--pad);z-index:20;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.topnav>*{pointer-events:auto}
.logo{background:#fffd;backdrop-filter:blur(10px);border-radius:12px;padding:10px 16px;display:flex;align-items:center;gap:10px;font-weight:500;font-size:19px;letter-spacing:-.01em}
.logo b{color:var(--cyan);font-weight:500}
.logo small{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-size:14px;color:var(--ink2);font-weight:400}
.menu{background:#fffd;backdrop-filter:blur(10px);border-radius:12px;padding:5px;display:flex;gap:2px}
.menu a{padding:11px 16px;border-radius:8px}
.menu a:hover{background:var(--card)}
.menu a.cta{background:var(--ink);color:#fff}

/* 1 主視覺 */
.hero{padding:var(--pad) var(--pad) 0}
.hero-card{position:relative;height:calc(100vh - var(--pad));min-height:600px;border-radius:var(--r);overflow:hidden;color:#fff}
.hero-card .loopv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--z,1.05));transition:transform .1s linear}
.hero-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#142A3F55 0%,transparent 35%,transparent 60%,#142A3F88 100%)}
.hero-in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(110px,14vh,150px) var(--pad) var(--pad)}
.hero h1{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:clamp(44px,6vw,104px);line-height:1.12;letter-spacing:-.02em}
.hero .en{margin-top:20px;opacity:.85}
.hero-bot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.hero-bot p{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:clamp(17px,1.25vw,22px);line-height:1.7;max-width:30em}

/* 2 WHAT WE DO */
.wwd{padding:18vh var(--pad) 14vh;display:grid;grid-template-columns:1fr 2fr;gap:40px}
.wwd .count{margin-top:24px;display:inline-block;border:1px solid var(--line);border-radius:99px;padding:8px 14px;color:var(--ink2)}
.wwd p{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:clamp(26px,2.8vw,48px);line-height:1.45;letter-spacing:-.015em}
.wwd p span{color:var(--mute);transition:color .25s}
.wwd p span.on{color:var(--ink)}

/* 3 四大服務 */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;padding:0 var(--pad) 28px;gap:20px;flex-wrap:wrap}
.h2{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:clamp(32px,3.7vw,64px);letter-spacing:-.02em;line-height:1.2}
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0 var(--pad)}
.sc{background:#fff;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;min-height:520px;transition:transform .4s}
.sc:hover{transform:translateY(-6px)}
.sc .img{height:200px;background-size:cover;background-position:center}
.sc .body{padding:24px;display:flex;flex-direction:column;flex:1}
.sc .n{color:var(--ink2);display:flex;justify-content:space-between}
.sc h3{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:28px;margin:18px 0 18px;letter-spacing:-.01em}
.sc ul{list-style:none;font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-size:17px;color:var(--ink2);line-height:1.5;margin-top:auto}
.sc li{padding:11px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px}
.sc li em{font-style:normal;font-family:"JetBrains Mono";font-size:11px;color:var(--mute)}

/* 4 數字 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:12px var(--pad) 0}
.st{background:var(--ink);color:#fff;border-radius:var(--r);padding:28px 26px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between}
.st b{font-weight:400;font-size:clamp(56px,5.6vw,96px);letter-spacing:-.04em;line-height:1}
.st b sup{font-size:.45em;color:var(--lime);vertical-align:top;margin-left:4px}
.st span{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:17px;opacity:.8}

/* 5 能源怎麼流動 */
.flow{margin:12vh 0 0;background:var(--ink);color:#fff;border-radius:var(--r) var(--r) 0 0}
.flow-in{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;padding:12vh var(--pad)}
.flow .stick{position:sticky;top:12vh;align-self:start}
.flow video{width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.85) hue-rotate(-8deg)}
.flow .tagv{position:absolute;left:16px;bottom:16px;background:#0009;border-radius:6px;padding:7px 10px;color:var(--lime)}
.flow .label{background:#ffffff14;color:#fff}
.flow .steps{padding-top:4vh}
.flow .h2{margin:22px 0 8vh}
.step{min-height:46vh;padding-top:3vh;border-top:1px solid #ffffff1f;opacity:.28;transition:opacity .5s}
.step.on{opacity:1}
.step .mono{color:var(--lime)}
.step h4{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:clamp(24px,2vw,34px);margin:14px 0}
.step p{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:18px;line-height:1.75;opacity:.78;max-width:26em}

/* 6 為什麼現在 */
.why{background:var(--ink);color:#fff;padding:0 var(--pad) 14vh}
.why-in{border-top:1px solid #ffffff1f;padding-top:10vh;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.why .label{background:#ffffff14}
.why .h2 em{font-style:normal;color:var(--mute)}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wc{border:1px solid #ffffff22;border-radius:18px;padding:22px;min-height:170px;display:flex;flex-direction:column;justify-content:space-between}
.wc .mono{color:var(--lime)}
.wc h3{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:24px}
.wc p{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:16px;opacity:.72;margin-top:6px}

/* 7 實績 */
.work{padding:14vh var(--pad) 0}
.marq{overflow:hidden;margin-top:36px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.marq div{display:flex;gap:56px;padding:26px 0;white-space:nowrap;animation:mq 40s linear infinite;width:max-content}
.marq span{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:clamp(30px,3.6vw,56px);letter-spacing:-.02em}
.marq span::after{content:"●";color:var(--lime);font-size:.35em;vertical-align:middle;margin-left:56px}
@keyframes mq{to{transform:translateX(-50%)}}
.work small{display:block;margin-top:14px;color:var(--ink2);font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-size:14px}

/* 8 媒體報導 */
.news{padding:14vh var(--pad) 0}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px}
.nc{background:#fff;border-radius:var(--r);padding:26px;min-height:300px;display:flex;flex-direction:column;justify-content:space-between;transition:background .3s}
.nc:hover{background:var(--card)}
.nc .top{display:flex;justify-content:space-between;color:var(--ink2)}
.nc h3{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:28px;line-height:1.4;letter-spacing:-.01em}
.nc .more{display:flex;justify-content:space-between;align-items:center}
.nc .more i{width:40px;height:40px;border-radius:8px;background:var(--lime);display:grid;place-items:center;font-style:normal}

/* 9 頁尾 */
.site-footer{margin-top:16vh;position:relative;border-radius:var(--r) var(--r) 0 0;overflow:hidden;color:#fff;min-height:96vh;display:flex;flex-direction:column;justify-content:space-between;padding:var(--pad)}
.site-footer>.ft-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.site-footer::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#142A3FB3 0%,#142A3F80 45%,#142A3F99 100%);z-index:-1}
.ft{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-top:6vh}
.ft-title{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:clamp(28px,3vw,46px);line-height:1.3}
.ft .col .mono{opacity:.7;margin-bottom:14px;padding-left:14px;border-left:1px solid #fff5}
.ft .col a,.ft .col span{display:block;font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:18px;padding:4px 0 4px 14px;border-left:1px solid #fff5}
.big{font-weight:400;font-size:clamp(70px,16.5vw,300px);letter-spacing:-.05em;line-height:.85;margin-top:8vh}
.copy{display:flex;justify-content:space-between;margin-top:20px;opacity:.75;flex-wrap:wrap;gap:8px}

/* 進場 */
.rv{opacity:0;transform:translateY(36px);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

@media (max-width:900px){
  .menu a:not(.cta){display:none}
  .wwd,.flow-in,.why-in,.ft{grid-template-columns:1fr}
  .svc,.stats{grid-template-columns:1fr 1fr}
  .news-grid{grid-template-columns:1fr}
  .flow .stick{height:38vh;top:76px;z-index:3;box-shadow:0 18px 24px #142A3F}
  .sc{min-height:auto}
}
@media (max-width:560px){ .svc,.stats,.why-grid{grid-template-columns:1fr} .logo small{display:none} }

/* ===== 佈景補充：無障礙、內頁 ===== */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:99;border-radius:0 0 8px 0}
.skip:focus{left:0}
.menu a:focus-visible,.btn:focus-visible,.card:focus-visible,.sc:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.sec-head .h2{margin-top:20px}
.sc{color:inherit}
.steplink{display:inline-block;margin-top:14px;color:var(--lime);border-bottom:1px solid #c8f06066;padding-bottom:2px}
.h1{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:clamp(38px,4.8vw,84px);line-height:1.15;letter-spacing:-.02em;margin:22px 0 0}
.h3{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:24px;margin-bottom:20px}
.lead{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:clamp(18px,1.25vw,22px);line-height:1.75;color:var(--ink2);max-width:36em;margin-top:22px}
.crumb{color:var(--ink2);margin-bottom:28px;display:block}
.crumb a:hover{color:var(--ink)}
.phero{padding-top:clamp(120px,18vh,170px);padding-bottom:6vh}
.phero-img{padding:var(--pad) var(--pad) 0}
.phero-card{border-radius:var(--r);min-height:62vh;background-size:cover;position:relative;overflow:hidden;color:#fff;display:flex;align-items:flex-end}
.phero-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#142A3F33,#142A3FBB)}
.phero-in{position:relative;z-index:2;padding:clamp(110px,14vh,150px) var(--pad) var(--pad)}
.phero-in .crumb,.phero-in .lead{color:#ffffffd9}
.phero-in .label{background:#ffffff26;color:#fff}
.partner{display:inline-block;margin-top:14px;padding:6px 10px;border:1px solid var(--line);border-radius:6px;color:var(--ink2)}
.prose{max-width:860px;font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:20px;line-height:1.85;padding-top:4vh;padding-bottom:6vh}
.prose h2{font-weight:400;font-size:clamp(26px,2.4vw,34px);line-height:1.35;margin:2.2em 0 .6em;letter-spacing:-.01em}
.prose h3{font-weight:500;font-size:21px;margin:1.8em 0 .5em}
.prose p,.prose ul,.prose ol{margin:0 0 1.1em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:.3em 0}
.prose a{color:var(--ink);border-bottom:1px solid var(--cyan)}
.prose strong{font-weight:500}
.prose details{border-top:1px solid var(--line);padding:16px 0}
.prose summary{cursor:pointer;font-weight:400}
.list-sec{padding-top:2vh;padding-bottom:4vh}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{background:#fff;border-radius:var(--r);padding:26px;min-height:260px;display:flex;flex-direction:column;gap:14px;transition:background .3s,transform .4s}
.card:hover{background:var(--card);transform:translateY(-4px)}
.card .n{display:flex;justify-content:space-between;color:var(--ink2)}
.card h2{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:24px;line-height:1.4}
.card p{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:17px;color:var(--ink2);line-height:1.7}
.card .more{margin-top:auto;display:flex;justify-content:space-between;align-items:center}
.card .more i{width:40px;height:40px;border-radius:8px;background:var(--lime);display:grid;place-items:center;font-style:normal}
.cta-band{margin-top:6vh;padding-top:10vh;padding-bottom:4vh;border-top:1px solid var(--line)}
.cta-band .lead{margin-bottom:28px}
.meta{color:var(--ink2);margin-top:18px}
.feat img{width:100%;height:auto;border-radius:var(--r)}
.pn{display:flex;justify-content:space-between;gap:20px;padding-top:4vh;padding-bottom:4vh;border-top:1px solid var(--line)}
.pager .nav-links{display:flex;gap:8px;margin-top:28px}
.pager .page-numbers{padding:10px 14px;border-radius:8px;background:#fff}
.pager .current{background:var(--ink);color:#fff}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ===== 微電網：日夜圖＋SVG 電流線 ===== */
.mg{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#142A3F}
.mg picture,.mg img{position:absolute;inset:0;width:100%;height:100%;display:block}
.mg-night{opacity:0;transition:opacity 1s ease}
.mg.is-night .mg-night{opacity:1}
.mg svg{position:absolute;inset:0;width:100%;height:100%}
.mg-base{fill:none;stroke:#ffffff;stroke-opacity:.22;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.mg:not(.is-night) .mg-base{stroke:#142A3F;stroke-opacity:.18}
.mg-flow{fill:none;stroke:var(--lime);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22 26;opacity:0;transition:opacity .5s;filter:drop-shadow(0 0 10px #C8F060)}
.mg-flow.on{opacity:1;animation:mgflow 1.1s linear infinite}
.mg:not(.is-night) .mg-flow{stroke:#0088C2;stroke-width:12;filter:drop-shadow(0 0 6px #00ADEB99)}
.mg-l-ev{transform:translate(-50%,60%)}
@keyframes mgflow{to{stroke-dashoffset:-48}}
.mg.is-out .mg-grid{opacity:0}
.mg.is-out .mg-b-grid{stroke:#ff6b6b;stroke-opacity:.55;stroke-dasharray:6 14}
.mg-label{position:absolute;transform:translate(-50%,-140%);font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-size:clamp(11px,1vw,14px);white-space:nowrap;padding:5px 10px;border-radius:999px;background:#ffffffe6;color:var(--ink);box-shadow:0 4px 14px #0002;display:flex;align-items:center;gap:6px;transition:background .4s,color .4s}
.mg-label i{width:7px;height:7px;border-radius:50%;background:var(--mute)}
.mg-label.on i{background:var(--lime);box-shadow:0 0 0 4px #C8F06055}
.mg.is-night .mg-label{background:#142A3FE6;color:#fff}
.mg-out{position:absolute;transform:translate(-50%,-100%);padding:5px 10px;border-radius:6px;background:#ff6b6b;color:#fff;opacity:0;transition:opacity .4s}
.mg.is-out .mg-out{opacity:1}
@media (max-width:900px){.flow .stick{top:72px;z-index:3}.mg-label{font-size:10px;padding:3px 7px}}
@media (prefers-reduced-motion:reduce){.mg-flow.on{animation:none;stroke-dasharray:none}}

/* logo */
.logo img{display:block;height:35px;width:auto}
.ft-logo{display:block;height:72px;width:auto;margin-bottom:28px;opacity:.95}
@media (max-width:560px){.logo img{height:28px}}

/* wp_nav_menu 會輸出 <li>，拿掉清單點並讓 <a> 直接排版 */
.menu li,.ft .col li{list-style:none;display:contents}

/* 底片顆粒：影片本身不加（會讓檔案暴增到 84MB），改疊 160px 雜訊圖 */
.grain{position:absolute;inset:-50%;z-index:1;pointer-events:none;background:url(../img/grain.png);opacity:.55;mix-blend-mode:overlay;animation:grain 1s steps(6) infinite}
.site-footer .grain{z-index:-1}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,4%)}80%{transform:translate(5%,2%)}100%{transform:translate(0,0)}}
.hero-card::after{z-index:1}
.hero-in{z-index:3}
@media (prefers-reduced-motion:reduce){.grain{animation:none}}

/* ===== 2026-10-12 結構改版（對照 integratedbio） ===== */
.wrapx{max-width:1620px;margin-inline:auto;padding-inline:clamp(16px,3.2vw,48px);width:100%}
.grid13{display:grid;grid-template-columns:1fr 2fr;gap:20px}
.stage{position:fixed;inset:0;z-index:0;pointer-events:none;clip-path:inset(var(--fi,16px) round var(--fr,24px))}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage .grain{z-index:1}
.stage-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,#142A3F4D 0%,transparent 30%,transparent 62%,#142A3F80 100%)}
.hero{position:relative;z-index:1;height:100vh;min-height:620px;padding:0;color:#fff}
.hero .hero-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(120px,17vh,180px) clamp(32px,5.5vw,104px) clamp(40px,7vh,72px)}
.statements{position:relative;z-index:1;height:320vh;color:#fff}
.stm-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.stm-top{padding-top:clamp(96px,13vh,130px);padding-bottom:28px}
.stm-top .label{background:#ffffff1f;color:#fff;backdrop-filter:blur(6px)}
.stm-line{position:relative;height:1px;background:#ffffff40}
.stm-line i{position:absolute;left:0;top:0;height:1px;width:0;background:#fff}
.stm-body{padding-top:36px}
.stm-body .count{display:inline-block;border:1px solid #ffffff59;border-radius:99px;padding:8px 16px;color:#fff}
.stm-texts{position:relative;min-height:40vh}
.stm{position:absolute;top:0;left:0;right:0;font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:clamp(26px,2.9vw,52px);line-height:1.4;letter-spacing:-.015em;opacity:0;transition:opacity .45s}
.stm.on{opacity:1}
.stm span{color:#ffffff5c;transition:color .2s}
.stm span.lit{color:#fff}
.board{position:relative;z-index:1;background:var(--bg);border-radius:0 0 40px 40px;margin-bottom:-40px;padding-top:14vh;overflow:clip}
.site-footer{margin-top:0;background:transparent;border-radius:0;z-index:0;isolation:isolate;padding-top:calc(40px + clamp(60px,10vh,120px))}
.site-footer::before{background:linear-gradient(180deg,#142A3F59 0%,#142A3F33 45%,#142A3F99 100%)}
.news{background:#ECEBE6;border-radius:40px 40px 0 0;margin-top:14vh;padding-top:12vh;padding-bottom:14vh}
.news .nc{background:#fff}
@media (max-width:900px){.grid13{grid-template-columns:1fr}.stm{font-size:clamp(24px,6.4vw,34px)}.stm-body{padding-top:24px}.stm-texts{margin-top:18px}}
@media (prefers-reduced-motion:reduce){.stm span{color:#fff}}

/* logo：首頁開場時白色無框（對照 integratedbio），一捲動就變彩色加白框 */
.logo{transition:background .35s,padding .35s,box-shadow .35s}
.logo .lw{display:none}
@media (min-width:901px){
 body.at-top .logo{background:transparent;backdrop-filter:none;padding-left:0;padding-right:0}
 body.at-top .logo .lc{display:none}
 body.at-top .logo .lw{display:block}
}
/* 首頁導覽列與大標、按鈕左右切齊，避開畫框上緣 */
body.home .topnav{left:clamp(32px,5.5vw,104px);right:clamp(32px,5.5vw,104px);top:clamp(28px,4vh,44px)}
@media (max-width:560px){body.home .topnav{left:20px;right:20px;top:24px}}

/* ===== 手機導覽（對照 integratedbio RWD：白色長條＋深色方塊漢堡） ===== */
.burger{display:none}
@media (max-width:900px){
  .topnav,body.home .topnav{left:24px;right:24px;top:24px;flex-wrap:wrap;background:#ffffffeb;backdrop-filter:blur(12px);border-radius:16px;padding:8px 8px 8px 14px;pointer-events:auto}
  .topnav .logo{background:none;backdrop-filter:none;padding:0}
  .topnav .logo img{height:32px}
  .burger{display:grid;place-content:center;gap:7px;width:52px;height:52px;border:0;border-radius:12px;background:var(--ink);cursor:pointer}
  .burger i{display:block;width:22px;height:1.5px;background:var(--lime);transition:transform .3s}
  .topnav.open .burger i:first-child{transform:translateY(4.25px) rotate(45deg)}
  .topnav.open .burger i:last-child{transform:translateY(-4.25px) rotate(-45deg)}
  .topnav .menu{display:none;flex-basis:100%;flex-direction:column;gap:0;background:none;backdrop-filter:none;padding:12px 4px 6px}
  .topnav.open .menu{display:flex}
  .topnav .menu a,.menu a:not(.cta){display:block;font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-size:22px;text-transform:none;letter-spacing:0;padding:14px 6px;border-top:1px solid var(--line);border-radius:0}
  .topnav .menu a.cta{margin-top:10px;text-align:center;border-radius:12px;border:0;font-size:17px}
  .hero .hero-in{padding:128px 36px 44px}
  .hero h1{font-size:clamp(44px,12vw,64px)}
  .hero-bot{flex-direction:column;align-items:flex-start;gap:22px}
}

/* 微電網：住家／工廠切換 */
.mg[hidden],.steps[hidden]{display:none}
.steps-col{padding-top:4vh}
.mg-tabs{display:inline-flex;gap:4px;margin-top:22px;padding:4px;border-radius:12px;background:#ffffff14}
.mg-tabs button{border:0;border-radius:9px;padding:10px 20px;background:transparent;color:#ffffffb3;cursor:pointer;font-size:14px}
.mg-tabs button[aria-selected="true"]{background:var(--lime);color:var(--ink)}
.mg-tabs button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.steps-col .steps .h2{margin:28px 0 8vh}

/* 深色區背景＝開場圓環影片（sticky）＋深藍遮罩 */
.darkzone{position:relative;margin-top:12vh;border-radius:var(--r) var(--r) 0 0;overflow:clip;background:var(--ink);color:#fff}
.dz-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.dz-bg-in{position:sticky;top:0;height:100vh;overflow:hidden}
.dz-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dz-shade{position:absolute;inset:0;background:linear-gradient(180deg,#142A3FB8 0%,#142A3FA6 50%,#142A3FC7 100%)}
.darkzone>.flow,.darkzone>.why{position:relative;z-index:1;background:transparent;margin-top:0;border-radius:0}
.darkzone .mg{box-shadow:0 30px 80px #0006}

/* ===== 頁尾（對照 integratedbio 最後一頁） ===== */
:root{--navx:var(--pad)}
body.home{--navx:clamp(32px,5.5vw,104px)}
body.home .topnav{left:var(--navx);right:var(--navx)}
.site-footer{padding-left:var(--navx);padding-right:var(--navx)}
.ft{grid-template-columns:2.2fr 1fr 1fr auto;gap:32px;align-items:start}
.ft-title{font-size:clamp(28px,2.6vw,46px);line-height:1.3;letter-spacing:-.01em}
.totop{width:52px;height:52px;border:1px solid #ffffff59;border-radius:12px;display:grid;place-items:center;font-size:18px;color:#fff;transition:background .3s}
.totop:hover{background:#ffffff1f}
.big{display:inline-block;white-space:nowrap;line-height:.82;margin-top:10vh;letter-spacing:-.045em}
@media (max-width:900px){.ft{grid-template-columns:1fr}.totop{justify-self:start}}

/* 捲到最底：內容板圓角下緣剛好收在導覽列下方（對照 integratedbio）
   頁尾高 = 100vh + 板子重疊 40px − 導覽帶高 */
:root{--navtop:16px;--navh:56px;--band:calc(var(--navtop) + var(--navh) + 22px)}
body.home{--navtop:clamp(28px,4vh,44px)}
.site-footer{min-height:calc(100vh + 40px - var(--band));padding-top:calc(40px + clamp(56px,9vh,110px))}
@media (max-width:900px){:root,body.home{--navtop:24px;--navh:68px}}
@media (min-width:901px){
  .site-footer{height:calc(100vh + 40px - var(--band));min-height:560px;overflow:hidden}
  .site-footer .big{margin-top:0}
}
/* --band 要在 body 上算，才吃得到 body.home 覆寫的 --navtop */
body{--band:calc(var(--navtop) + var(--navh) + 22px)}
/* 頁尾選單 6 項改兩欄，讓出高度給品牌大字撐滿 */
@media (min-width:901px){
  .ft .col:nth-child(2){display:grid;grid-template-columns:auto auto;column-gap:36px;align-content:start}
  .ft .col:nth-child(2) .mono{grid-column:1/-1}
  .site-footer{padding-top:calc(40px + clamp(40px,6vh,80px))}
}

/* 數字卡：單位接在數字後面 */
.st-num{display:flex;align-items:baseline;gap:6px}
.st-unit{font-style:normal;font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:clamp(28px,2.3vw,40px);color:#fff}
.st .st-desc{font-size:18px;opacity:.8}

/* 頁尾收尾時 logo 不要白框 */
body.at-end .logo{background:transparent;backdrop-filter:none;padding-left:0;padding-right:0}
@media (max-width:900px){body.at-end .logo{padding:0}}
/* 服務卡：代號放在名稱下方，避免 ISO 14064-1 / GHG Protocol 擠壓斷行 */
.sc li{flex-direction:column;align-items:flex-start;gap:3px}
.sc li em{font-size:11px;letter-spacing:.02em;color:#9AA3AA}

/* ===================== 內頁 ===================== */
/* 全站導覽與內容左右切齊（原本只有首頁） */
body{--navx:clamp(32px,5.5vw,104px)}
@media (min-width:901px){
  body{--navtop:clamp(28px,4vh,44px)}
  .topnav{left:var(--navx);right:var(--navx);top:var(--navtop)}
}
@media (max-width:560px){body{--navx:20px}}
.wrapi{padding-inline:var(--navx)}
.board-inner{padding-top:0;padding-bottom:clamp(90px,12vh,150px)}
.f-tc{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400}

/* 開頭大圖框（對照首頁開場 16px 畫框） */
.ihero{padding:16px 16px 0}
.ihero-card{position:relative;min-height:max(620px,88vh);border-radius:24px;overflow:hidden;background-size:cover;background-color:var(--ink);color:#fff;display:flex;isolation:isolate}
.ihero-compact .ihero-card{min-height:max(500px,66vh)}
.ihero-card::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#142A3F73 0%,#142A3F1F 32%,#142A3F33 55%,#142A3FD9 100%)}
.ihero-card .grain{z-index:1;opacity:.4}
.ihero-in{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:clamp(118px,17vh,170px) calc(var(--navx) - 16px) clamp(34px,6vh,64px)}
.ihero .crumb{color:#ffffffc7;margin:0}
.ihero .crumb a:hover{color:#fff}
.ihero .label{background:#ffffff26;color:#fff;backdrop-filter:blur(6px)}
.ih1{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:clamp(42px,5.4vw,96px);line-height:1.12;letter-spacing:-.025em;margin-top:22px;max-width:14em}
.ihero-bot{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-top:26px}
.ilead{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:clamp(17px,1.3vw,22px);line-height:1.7;max-width:32em;color:#ffffffe6}
.ihero .partner{border-color:#ffffff4d;color:#ffffffd9;margin-top:22px}

/* 一句話總結（answer-first） */
.intro{padding-top:clamp(90px,14vh,170px)}
.intro-txt{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:clamp(24px,2.5vw,44px);line-height:1.5;letter-spacing:-.015em}
.facts{display:grid;grid-template-columns:repeat(var(--fc,3),1fr);gap:12px;margin-top:clamp(48px,7vh,80px)}
.fact{background:#fff;border-radius:18px;padding:22px 24px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.fact .mono{color:var(--ink2)}
.fact b{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:clamp(19px,1.45vw,24px);line-height:1.45}

/* 內容區塊：左 1 欄標題、右 2 欄內容 */
.blocks{padding-top:clamp(70px,10vh,120px)}
.blk{display:grid;grid-template-columns:1fr 2fr;gap:20px;padding:clamp(44px,6vh,72px) 0;border-top:1px solid var(--line)}
.blk-h h2{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:clamp(28px,2.5vw,44px);line-height:1.25;letter-spacing:-.015em;margin-top:20px}
.blk-h{align-self:start;position:sticky;top:120px}
.blk-b{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:clamp(17px,1.2vw,20px);line-height:1.8;color:var(--ink)}
.blk-b>p{max-width:40em;margin-bottom:1em}
.blk-b>p.big{font-size:clamp(22px,1.9vw,32px);line-height:1.55;letter-spacing:-.01em}
.blk-b a{border-bottom:1px solid var(--cyan)}
.blk-b strong{font-weight:500}
.ticks{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
.ticks li{padding:16px 0 16px 22px;border-top:1px solid var(--line);position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:27px;width:8px;height:8px;background:var(--lime);border-radius:1px}
.feat2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feat2>div{background:#fff;border-radius:18px;padding:24px 26px 26px}
.feat2 h3,.proc h3,.deliv h3{font-weight:500;font-size:clamp(19px,1.35vw,22px);line-height:1.4;margin-bottom:8px}
.feat2 p,.proc p,.deliv p{font-size:16px;line-height:1.75;color:var(--ink2)}
.proc{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;counter-reset:pc}
.proc li{counter-increment:pc;background:var(--ink);color:#fff;border-radius:18px;padding:22px 22px 26px;min-height:210px;display:flex;flex-direction:column}
.proc li::before{content:counter(pc,decimal-leading-zero);font-family:"JetBrains Mono",monospace;font-size:13px;letter-spacing:.06em;color:var(--lime);margin-bottom:auto;padding-bottom:28px}
.proc li p{color:#ffffffb8}
.deliv{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.deliv li{background:#fff;border-radius:18px;padding:22px 24px;display:flex;flex-direction:column;gap:6px;min-height:130px}
.deliv li::before{content:"↳";font-family:"JetBrains Mono",monospace;color:var(--cyan);font-size:18px;margin-bottom:10px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font-size:clamp(18px,1.3vw,22px);line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"JetBrains Mono",monospace;flex:none;width:36px;height:36px;border-radius:8px;background:#fff;display:grid;place-items:center;transition:transform .3s,background .3s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--lime)}
.faq details>div{padding:0 60px 24px 0;color:var(--ink2)}
.faq details>div p+p{margin-top:.8em}
.note{font-size:15px;color:var(--ink2);margin-top:18px}
.tl{list-style:none}
.tl li{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.tl b{font-family:"JetBrains Mono",monospace;font-weight:500;font-size:15px;color:var(--cyan);padding-top:4px}
.tl h3{font-weight:500;font-size:20px;margin-bottom:4px}
.tl p{color:var(--ink2);font-size:16px}

/* 子項卡片（類別頁、相關服務） */
.sub-sec{padding-top:clamp(70px,10vh,120px)}
.sub-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.sub-head .h2{margin-top:20px}
.cards{gap:12px}
.card{min-height:300px}
.card .n{font-size:12px}
.card h2{font-size:clamp(22px,1.6vw,28px)}
.card p{font-size:16px}
.cards-4{grid-template-columns:repeat(4,1fr)}
.card .partner{margin-top:0;font-size:11px;align-self:flex-start}
.svc-in{padding:0}

/* 收尾 CTA：深藍圓角卡 */
.cta-dark{position:relative;margin-top:clamp(80px,12vh,140px);background:var(--ink);color:#fff;border-radius:24px;overflow:hidden;isolation:isolate;padding:clamp(40px,7vh,80px) clamp(28px,4vw,64px);display:grid;grid-template-columns:2fr 1fr;gap:32px;align-items:end}
.cta-dark .grain{z-index:-1;opacity:.35}
.cta-dark::before{content:"";position:absolute;inset:0;z-index:-2;background:url(../img/hero_navy.jpg) 70% 50%/cover;opacity:.55}
.cta-dark .label{background:#ffffff1f;color:#fff}
.cta-dark h2{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-weight:400;font-size:clamp(32px,3.6vw,64px);line-height:1.2;letter-spacing:-.02em;margin-top:22px}
.cta-dark p{font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-size:18px;line-height:1.7;color:#ffffffcc;margin-top:16px;max-width:30em}
.cta-dark .btn{justify-self:end}
.cta-dark .btn span{background:#fff;color:var(--ink)}

/* 列表：篩選膠囊 */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.chips a{padding:10px 16px;border-radius:99px;background:#fff;font-size:12px}
.chips a.on{background:var(--ink);color:#fff}
.list-sec{padding-top:clamp(60px,9vh,110px)}

/* 單篇內文 */
.post-body{padding-top:clamp(70px,10vh,120px)}
.post-body .prose{padding:0;max-width:none}
.post-side{display:flex;flex-direction:column;gap:14px;align-self:start;position:sticky;top:120px}
.post-side .meta{margin:0}
.pn{padding-inline:0;margin-top:clamp(50px,8vh,90px)}
.pn a{display:block;max-width:28em;font-family:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;font-size:17px;line-height:1.6}
.pn span:last-child{text-align:right}

/* 聯絡表單 */
.cform{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cform .full{grid-column:1/-1}
.cform label{display:flex;flex-direction:column;gap:8px;font-size:15px;color:var(--ink2)}
.cform input,.cform select,.cform textarea{font:inherit;font-size:17px;color:var(--ink);background:#fff;border:1px solid transparent;border-radius:12px;padding:15px 16px;width:100%}
.cform textarea{min-height:170px;resize:vertical}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--cyan)}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform .agree{flex-direction:row;align-items:flex-start;gap:10px;font-size:14px}
.cform .agree input{width:18px;height:18px;margin-top:3px;flex:none}
.cform button.btn{border:0;background:none;padding:0;cursor:pointer;font:inherit;justify-self:start}
.cform-msg{border-radius:14px;padding:18px 22px;margin-bottom:20px;font-size:17px}
.cform-msg.ok{background:var(--lime);color:var(--ink)}
.cform-msg.err{background:#ffe1e1;color:#8a1f1f}
.cinfo{list-style:none}
.cinfo li{padding:18px 0;border-top:1px solid var(--line)}
.cinfo .mono{display:block;color:var(--ink2);margin-bottom:6px;font-size:12px}
.cinfo a,.cinfo span{font-size:clamp(18px,1.4vw,22px)}

@media (max-width:900px){
  .ihero{padding:10px 10px 0}
  .ihero-card{min-height:max(560px,82vh);border-radius:20px}
  .ihero-compact .ihero-card{min-height:max(460px,62vh)}
  .ihero-in{padding:128px 26px 34px}
  .ih1{font-size:clamp(36px,9.5vw,56px)}
  .blk{grid-template-columns:1fr;gap:26px}
  .blk-h{position:static}
  .facts{grid-template-columns:1fr 1fr}
  .ticks,.feat2{grid-template-columns:1fr}
  .cards-4{grid-template-columns:1fr 1fr}
  .cta-dark{grid-template-columns:1fr}
  .cta-dark .btn{justify-self:start}
  .post-side{position:static}
  .cform{grid-template-columns:1fr}
  .faq details>div{padding-right:0}
  .tl li{grid-template-columns:72px 1fr;gap:14px}
}
@media (max-width:560px){.facts,.cards-4{grid-template-columns:1fr}}
.steplink2{color:var(--ink2);border-bottom:1px solid var(--line);padding-bottom:3px}
.steplink2:hover{color:var(--ink)}
.sub-sec .flow{margin-top:0}
/* 內頁微調（2026-10-13 截圖驗收） */
.cta-dark::before{opacity:.35}
.sub-sec .flow{margin-inline:16px;border-radius:24px;overflow:clip}
@media (max-width:900px){
  .fact{min-height:0;gap:10px;padding:18px 20px}
  .proc li{min-height:0;padding:18px 20px 22px}
  .proc li::before{padding-bottom:14px}
  .deliv li{min-height:0}
  .sub-sec .flow{margin-inline:10px;border-radius:20px}
}
/* 主選單：目前所在頁加深（tars 2026-10-13：點到哪個要看得出來） */
.menu .current-menu-item>a,.menu .current-menu-ancestor>a,.menu .current-page-ancestor>a,.menu .current_page_parent>a{background:#CFCBC0;color:var(--ink);font-weight:600}
.menu a.cta.is-current{box-shadow:inset 0 0 0 2px var(--lime)}
@media (max-width:900px){
  .topnav .menu .current-menu-item>a,.topnav .menu .current-menu-ancestor>a,.topnav .menu .current-page-ancestor>a,.topnav .menu .current_page_parent>a{background:none;font-weight:500;padding-left:18px;position:relative}
  .topnav .menu .current-menu-item>a::before,.topnav .menu .current-menu-ancestor>a::before,.topnav .menu .current-page-ancestor>a::before,.topnav .menu .current_page_parent>a::before{content:"";position:absolute;left:4px;top:50%;width:8px;height:8px;margin-top:-4px;background:var(--lime);border-radius:1px}
}
/* 登入時 WordPress 管理列佔頂端 32px（手機 46px）：固定的導覽列與背景框一起下移，位置才與訪客看到的一致 */
body.admin-bar{--abar:32px}
@media (max-width:782px){body.admin-bar{--abar:46px}}
body.admin-bar .topnav{margin-top:var(--abar)}
body.admin-bar .stage{top:var(--abar)}
/* 中文斷行（tars 2026-10-13：段句要斷好）：只在標點、空白與文案產生器插入的 <wbr> 詞組邊界換行；代號整段不拆 */
.nw{white-space:nowrap}
.board-inner,.hero,.stm,.ft,.sc,.st,.why,.flow,.news{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
.board-inner p,.board-inner li,.board-inner h1,.board-inner h2,.board-inner h3,.board-inner b{text-wrap:pretty}
/* YouTube 影片：封面＋播放鈕，點了才載入 */
.yt{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--ink)}
.yt-btn{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;background:center/cover no-repeat;display:grid;place-items:center}
.yt-btn::after{content:"";position:absolute;inset:0;background:#142A3F33;transition:background .3s}
.yt-btn:hover::after{background:#142A3F11}
.yt-play{position:relative;z-index:1;display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:12px;padding:14px 20px}
.yt-play i{font-style:normal;color:var(--lime)}
.yt-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:-4px}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-cap{font-size:15px;color:var(--ink2);margin-top:14px}
/* 大字逐字點亮：未點亮的字淡色，捲動時依序變深 */
.lit-text .lc{opacity:.22;transition:opacity .25s}
.lit-text .lc.on{opacity:1}
@media (prefers-reduced-motion:reduce){.lit-text .lc{opacity:1}}
/* 首頁拿掉媒體報導後，實績區收尾留白 */
body.home .board{padding-bottom:clamp(90px,14vh,160px)}
/* 數據卡欄寬固定平均，長內容（ISO 清單）不會把其他欄擠扁 */
.facts{grid-template-columns:repeat(var(--fc,3),minmax(0,1fr))}
@media (max-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.facts{grid-template-columns:minmax(0,1fr)}}
.fact b .nw{white-space:nowrap}
/* 語言切換鈕 */
.menu a.lang{border:1px solid var(--line);font-weight:600;letter-spacing:.04em}
@media (max-width:900px){.topnav .menu a.lang{border:0;border-top:1px solid var(--line)}}
html[lang="en"] .eco-content,html[lang="en"] .ihero,html[lang="en"] .cta-dark,html[lang="en"] .ft{word-break:normal;overflow-wrap:break-word}
html[lang="en"] .ih1{max-width:16em}
.blk[id]{scroll-margin-top:110px}
/* 英文頁：拉丁字型優先，避免撇號、引號套到中文字型變全形 */
html[lang="en"] body,html[lang="en"] .intro-txt,html[lang="en"] .ih1,html[lang="en"] .ilead,html[lang="en"] .blk-h h2,html[lang="en"] .blk-b,html[lang="en"] .fact b,html[lang="en"] .cta-dark h2,html[lang="en"] .cta-dark p,html[lang="en"] .ft-title,html[lang="en"] .ft .col a,html[lang="en"] .ft .col span{font-family:"Inter Tight","Noto Sans TC",sans-serif}
/* 語言切換：與選單分開的獨立白色方塊，固定在最右邊 */
.topnav{gap:8px}
.topnav .menu{margin-left:auto}
.langsw{background:#fffd;backdrop-filter:blur(10px);border-radius:12px;padding:5px;display:flex;align-items:center}
.langsw::before{content:"";display:none}
.langsw{min-width:60px;justify-content:center}
.langsw{color:var(--ink)}
.langsw:hover{background:#fff}
.langsw{height:60px}
@media (min-width:901px){.langsw{height:auto;align-self:stretch}}
.langsw:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media (max-width:900px){
  .topnav .logo{order:1}
  .langsw{order:2;margin-left:auto;height:52px;min-width:52px;background:var(--card);backdrop-filter:none}
  .burger{order:3}
  .topnav .menu{order:4;margin-left:0}
}
/* 語言切換：不要底框，只留文字；在開場大圖（at-top）與頁尾影片（at-end）上變白字，跟 logo 一樣 */
.langsw,.langsw:hover{background:none;backdrop-filter:none;padding:5px 4px;min-width:0;color:var(--ink);text-decoration:none;transition:color .35s}
.langsw:hover{opacity:.7}
@media (min-width:901px){body.at-top .langsw,body.at-end .langsw{color:#fff}}
@media (max-width:900px){.langsw,.langsw:hover{background:none;min-width:40px;padding:0 6px}}
/* 手機微電網（tars 2026-10-13）：拿掉多出來的灰框；順序改成「標籤＋住家／工廠切換 → 圖（黏在導覽列下）→ 標題與步驟」 */
@media (max-width:900px){
  .flow-in{padding:7vh 20px 8vh;gap:0}
  .flow .steps-col{display:contents}
  .flow .steps-col>.label{order:1;justify-self:start}
  .flow .mg-tabs{order:2;justify-self:start;margin:14px 0 18px}
  .flow .stick{order:3;height:auto;top:calc(var(--navtop) + var(--navh) + 10px);box-shadow:none;z-index:3}
  body.admin-bar .flow .stick{top:calc(var(--navtop) + var(--navh) + 10px + var(--abar))}
  .flow .stick .mg{box-shadow:0 14px 30px #0008}
  .flow .steps{order:4;padding-top:0}
  .flow .steps .h2{margin:34px 0 4vh;font-size:clamp(28px,8vw,40px)}
  .step{min-height:38vh}
}
@media (max-width:900px){
  /* 圖上方到導覽列之間遮住往上捲的步驟文字 */
  .flow .stick::before{content:"";position:absolute;left:-20px;right:-20px;bottom:100%;height:140px;background:linear-gradient(180deg,#142A3FF2,#1A2F42E6);pointer-events:none}
}
/* 手機頁尾（tars 2026-10-13：最後一頁要卡在白框）：頁尾高度剛好＝一屏＋重疊 40px − 導覽帶，
   捲到底時內容板圓角下緣停在導覽列下方；內容改緊湊，避免撐高 */
@media (max-width:900px){
  .site-footer{height:calc(100svh + 40px - var(--band));min-height:0;overflow:hidden;padding:calc(40px + 22px) 24px 20px;display:flex;flex-direction:column;justify-content:space-between}
  .ft{grid-template-columns:1fr 1fr;gap:18px 16px;padding-top:0}
  .ft>div:first-child{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
  .ft-title{font-size:clamp(20px,5.6vw,26px)}
  .ft>div:first-child>div{margin-top:0!important}
  .ft .btn span{padding:12px 14px;font-size:12px}
  .ft .btn i{width:40px}
  .ft .col .mono{margin-bottom:8px;font-size:11px}
  .ft .col a,.ft .col span{font-size:15px;padding:2px 0 2px 12px}
  .ft .col:nth-child(2){display:block}
  .totop{display:none}
  .big{margin-top:0}
  .copy{font-size:10px;margin-top:8px}
}
@media (max-width:900px) and (max-height:700px){.ft .col:nth-child(3) span{display:none}}
@media (max-width:900px){
  .ft>div:first-child{display:block}
  .ft>div:first-child>div{margin-top:16px!important}
  .ft .btn span{white-space:nowrap}
  .ft{grid-template-columns:.8fr 1.2fr}
  .ft .col:nth-child(3) a{white-space:nowrap;font-size:14px}
}
/* 英文版：全站拉丁字型優先（等寬標籤維持 JetBrains Mono） */
html[lang="en"] body :not(.mono):not(.mono *){font-family:"Inter Tight","Noto Sans TC","PingFang TC",sans-serif}
html[lang="en"] .hero h1{letter-spacing:-.03em}
html[lang="en"] .board-inner,html[lang="en"] .hero,html[lang="en"] .stm,html[lang="en"] .ft,html[lang="en"] .sc,html[lang="en"] .st,html[lang="en"] .why,html[lang="en"] .flow{word-break:normal;overflow-wrap:break-word}
/* 手機：拿掉圖上方的深色遮罩（會蓋住住家／工廠切換，點不到），切換鈕放在最上層 */
@media (max-width:900px){
  .flow .stick::before{content:none}
  .flow .steps-col>.label,.flow .mg-tabs{position:relative;z-index:4}
}