:root{
  --navy:#0b1f4d; --ink:#111827; --muted:#6b7280; --line:#e3e9f5;
  --blue:#1257e6; --blue-2:#1e6bff; --cyan:#27b4f5;
  --green:#18a34a; --purple:#6b3cf0;
  --bg-soft:#f3f7fd; --card:#fff;
  --shadow:0 0 0 1px #e5e7eb,0 1px 2px rgba(17,24,39,.04);
  --wrap:min(94vw,1600px);
  --pad:clamp(16px,2.4vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:"Poppins","Noto Sans TC",system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{width:var(--wrap);margin:0 auto}
svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.arrow::after{content:"→";margin-left:.5em;font-family:system-ui}

/* ---------- Logo ---------- */
.logo{display:flex;align-items:center;gap:.7em}
.logo .mark{height:3.4em;width:auto;overflow:visible;flex:none}
.logo .zh{font-family:"Noto Sans TC";font-weight:700;font-size:1.15em;color:#0A2D6B;letter-spacing:.22em;margin-top:.55em;white-space:nowrap}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid #eef2f9}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px}
.nav .logo{font-size:16px}
.menu{display:flex;gap:clamp(22px,2.8vw,44px);font-size:14px;font-weight:500;font-family:"Noto Sans TC"}
.menu a{position:relative;padding:6px 0;color:var(--ink)}
.menu a.on{color:var(--navy);font-weight:700}
.menu a.on::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:#1257e6;border-radius:4px}
.menu a:hover{color:var(--blue)}
.nav-r{display:flex;align-items:center;gap:18px;font-size:14px}
.lang{display:flex;align-items:center;gap:10px;color:var(--muted)}
.lang svg{font-size:20px;color:var(--navy)}
.lang span{color:#d1d5db}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;border-radius:999px;font-weight:700;font-family:"Noto Sans TC";font-size:14px;padding:12px 26px;transition:.2s;white-space:nowrap}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--blue) 32%,transparent)}
.btn-primary:hover{filter:brightness(.9)}
.btn-ghost{background:#fff;border:1.5px solid var(--blue);color:var(--navy)}
.btn-ghost:hover{background:#eef4ff}
.btn-sm{padding:9px 20px;font-size:14px}
.burger{display:none;background:none;border:0;font-size:28px;color:var(--navy)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(90deg,#f7faff 0%,#eef4fc 40%,#dfe9f7 100%)}
.hero-bg{position:absolute;inset:0 0 0 auto;width:66%;background:url(img/hero.jpg) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.hero .wrap{position:relative;min-height:clamp(420px,34vw,560px);display:flex;flex-direction:column;justify-content:center;padding:48px 0}
/* 首頁主圖滿版：扣掉 73px 導覽列（含 4px 主色帶），服務卡片落在第一屏之下 */
.hero-full .hero-bg{width:100%;background-position:right center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 28%,#000 52%);mask-image:linear-gradient(90deg,transparent 0,transparent 28%,#000 52%)}
.hero-full .wrap{min-height:max(420px,calc(100vh - 73px));min-height:max(420px,calc(100svh - 73px))}
.eyebrow{color:#9ca3af;font-size:14px;letter-spacing:.02em}
.hero h1{font-family:"Noto Sans TC";font-weight:900;font-size:clamp(32px,4.2vw,64px);line-height:1.22;color:#111827;margin:10px 0 18px;letter-spacing:.02em}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero p{font-family:"Noto Sans TC";font-size:clamp(14px,1.1vw,18px);color:#374151;max-width:40em;font-weight:500}
.hero .cta{display:flex;gap:16px;margin-top:28px;flex-wrap:wrap}
.hero .cta .btn{padding:15px 30px;font-size:16px}
.hero .cta svg{font-size:20px}

/* ---------- Service split ---------- */
.services{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px 0 0}
.svc{position:relative;overflow:hidden;border-radius:0 8px 8px 0;min-height:290px;padding:clamp(20px,2.4vw,36px);background:#f7faff}
.svc:last-child{border-radius:8px 0 0 8px}
.svc::before{content:"";position:absolute;inset:0 0 0 auto;width:60%;background-position:center;background-size:cover;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
.svc>*{position:relative}
a.svc{display:block;transition:box-shadow .25s,transform .25s}
a.svc:hover{box-shadow:0 14px 32px rgba(20,60,140,.14);transform:translateY(-3px)}
.svc-more{display:inline-flex;align-items:center;gap:6px;margin:20px 0 0 4px;font-size:14px;font-weight:700;font-family:"Noto Sans TC"}
.svc.tech .svc-more{color:var(--blue)}.svc.b2b .svc-more{color:var(--purple)}
a.svc:hover .svc-more{text-decoration:underline}
.svc-h{display:flex;gap:14px;align-items:flex-start}
.num{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:#fff;font-weight:600;font-size:16px;flex:none;margin-top:2px}
.svc h2{font-family:"Noto Sans TC";font-size:clamp(18px,1.5vw,24px);font-weight:900;color:#111827;line-height:1.3}
.svc .sub{font-size:14px;color:#374151;margin-top:4px;font-family:"Noto Sans TC"}
.svc ul{list-style:none;margin:22px 0 0 4px;display:grid;gap:12px}
.svc li{display:flex;gap:16px;align-items:flex-start;font-size:14px;font-family:"Noto Sans TC";font-weight:500}
.svc li svg{font-size:20px;margin-top:2px}
.svc.tech .num{background:linear-gradient(135deg,#2a8bff,#1257e6)} .svc.tech li svg{color:var(--blue)}
.svc.b2b .num{background:linear-gradient(135deg,#8c5cff,#5b2fe0)} .svc.b2b li svg{color:var(--purple)}

/* ---------- ESG ---------- */
.esg{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:14px;padding:clamp(24px,3vw,44px) 0;align-items:stretch}
.esg-intro{display:flex;flex-direction:column;justify-content:center;padding-right:10px}
.kicker{color:var(--blue);font-size:12px;font-weight:500;letter-spacing:.05em}
.esg-intro h2{font-family:"Noto Sans TC";font-size:clamp(24px,2.3vw,32px);font-weight:900;color:#111827;line-height:1.3;margin:6px 0 12px}
.esg-intro p{font-size:14px;color:#374151;font-family:"Noto Sans TC";font-weight:500}
.esg-intro .btn{align-self:flex-start;margin-top:22px}
.pillar{background:#fff;border-radius:8px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.pillar-top{position:relative;height:clamp(150px,11vw,190px);color:#fff;padding:14px 16px;background-position:bottom;background-size:cover;background-repeat:no-repeat}
.pillar-top::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--c) 0%,var(--c) 22%,transparent 62%)}
.pillar-top>*{position:relative}
.pillar-top .big{position:absolute;left:14px;top:4px;font-size:48px;font-weight:700;line-height:1;background:linear-gradient(180deg,#fff,var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
.pillar-top .t{margin-left:52px;font-weight:600;font-size:14px;letter-spacing:.04em;line-height:1.2}
.pillar-top .t b{display:block;font-family:"Noto Sans TC";font-weight:700;font-size:14px;margin-top:3px}
.pillar ul{list-style:none;padding:14px 22px 16px;display:grid;gap:9px}
.pillar li{display:flex;gap:14px;align-items:center;font-size:14px;font-family:"Noto Sans TC";font-weight:500}
.pillar li svg{font-size:18px;color:var(--c3)}
.p-green{--c:#1faa55;--c2:#b8ffcf;--c3:#28a745}
.p-smart{--c:#1557d8;--c2:#6fd6ff;--c3:#1257e6}
.p-growth{--c:#6d3cf0;--c2:#e2d6ff;--c3:#7a3cf0}

/* ---------- Section head ---------- */
.sec{padding:clamp(24px,3vw,40px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:16px}
.sec-head h2{font-size:clamp(20px,1.8vw,28px);font-weight:600;color:#111827;line-height:1.3}
.sec-head h2 span{font-family:"Noto Sans TC";font-weight:900}
.sec-head h2 i{font-style:normal;color:#2a3553;font-weight:300;margin:0 .35em}
.sec-head p{font-size:14px;color:#374151;font-family:"Noto Sans TC";font-weight:500;margin-top:2px}
.more{color:var(--blue);font-size:14px;font-weight:700;font-family:"Noto Sans TC";white-space:nowrap}
.more:hover{text-decoration:underline}

/* ---------- Solutions ---------- */
.solutions{background:linear-gradient(180deg,#fff,var(--bg-soft))}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sol{background:#fff;border-radius:8px;box-shadow:var(--shadow);overflow:hidden;transition:.25s}
.sol:hover,.case:hover,.news:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(20,60,140,.14)}
.sol img{width:100%;aspect-ratio:2.15/1;object-fit:cover}
.sol-b{display:flex;gap:14px;padding:16px 18px 18px}
.ico-circle{width:44px;height:44px;border-radius:50%;background:#eaf2ff;display:grid;place-items:center;color:var(--blue);font-size:24px;flex:none}
.sol h3{font-family:"Noto Sans TC";font-size:16px;font-weight:900;color:#111827}
.sol .d{font-size:12px;color:#7a849b;font-family:"Noto Sans TC";line-height:1.6;margin:2px 0 10px}
.sol .lk{font-size:12px;font-weight:700;font-family:"Noto Sans TC";color:var(--navy)}
.sol .lk.b{color:var(--blue)}

.sol2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.solp{position:relative;overflow:hidden;border-radius:8px;background:#f5f9fe;padding:clamp(20px,2.2vw,32px);display:flex;flex-direction:column;gap:22px}
.solp::before{content:"";position:absolute;top:0;right:0;width:58%;height:78%;background-position:center;background-size:cover;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40%),linear-gradient(180deg,#000 70%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 40%),linear-gradient(180deg,#000 70%,transparent);mask-composite:intersect}
.solp>*{position:relative}
.solp-top{min-height:clamp(200px,15vw,250px)}
.solp-h{display:flex;gap:14px;align-items:center}
.solp .num{width:44px;height:44px;border-radius:8px;font-size:18px;margin:0}
.p-g .num{background:linear-gradient(135deg,#2fb368,#1b8a47)}
.p-e .num{background:linear-gradient(135deg,#2a8bff,#1257e6)}
.solp h3{font-family:"Noto Sans TC";font-size:clamp(24px,2vw,32px);font-weight:900;color:#111827;line-height:1.2}
.solp .en{font-size:clamp(14px,1.1vw,18px);color:#2a3553;font-weight:500}
.solp p{font-family:"Noto Sans TC";font-size:14px;font-weight:500;color:#111827;line-height:1.8;margin:20px 0 18px;max-width:24em}
.solp .btn-ghost{background:rgba(255,255,255,.9)}
.p-g .btn-ghost{border-color:#1257e6}
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.feat{background:#fff;border-radius:8px;box-shadow:var(--shadow);padding:18px 8px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;transition:.25s}
.feat:hover{transform:translateY(-3px)}
.feat svg{font-size:32px;stroke-width:1.5;margin-bottom:6px}
.p-g .feat svg{color:#1faa55} .p-e .feat svg{color:var(--blue)}
.feat b{font-family:"Noto Sans TC";font-size:14px;color:#111827}
.feat span{font-family:"Noto Sans TC";font-size:12px;color:#6b7280}
@media (max-width:1100px){.sol2{grid-template-columns:1fr}}
@media (max-width:560px){.feats{grid-template-columns:repeat(2,1fr)}.solp::before{width:100%;opacity:.3}}

/* ---------- Need bar ---------- */
.need{background:#e9f1fc}
.need .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;flex-wrap:wrap}
.need h2{font-family:"Noto Sans TC";font-size:clamp(18px,1.7vw,24px);font-weight:900;color:#111827}
.need p{font-size:14px;color:#374151;font-family:"Noto Sans TC";font-weight:500}
.need-opts{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.opt{display:flex;align-items:center;gap:10px;background:#fff;border-radius:8px;padding:10px 16px;box-shadow:0 2px 8px rgba(20,60,140,.06);cursor:pointer;border:1.5px solid transparent;transition:.2s}
.opt:hover,.opt.on{border-color:var(--blue)}
.opt svg{font-size:20px;color:var(--navy)}
.opt b{display:block;font-size:12px;font-family:"Noto Sans TC";color:#111827;line-height:1.3}
.opt small{font-size:12px;color:#7a849b;font-family:"Noto Sans TC"}
.need .btn{border-radius:8px}

/* ---------- Cases ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.case,.news{background:#fff;border-radius:8px;box-shadow:var(--shadow);overflow:hidden;transition:.25s}
.case .ph,.news .ph{position:relative}
.case img{width:100%;aspect-ratio:4.9/1;object-fit:cover}
.tag{position:absolute;left:16px;bottom:-10px;font-size:12px;font-weight:700;color:#fff;padding:3px 12px;border-radius:999px;letter-spacing:.05em;font-family:"Poppins","Noto Sans TC"}
.t-smart,.t-green{background:#1faa55}
.t-growth{background:#3f4d8f}
.t-blue{background:var(--blue)} .t-orange{background:#f57c1f}
.case-b{padding:20px 20px 14px}
.case h3{font-family:"Noto Sans TC";font-size:16px;font-weight:900;color:#111827}
.case .d{font-size:14px;color:#6b7280;font-family:"Noto Sans TC"}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:10px;text-align:center}
.stats b{display:block;font-size:clamp(16px,1.35vw,20px);font-weight:600;font-family:"Poppins","Noto Sans TC"}
.stats span{font-size:12px;color:#6b7280;font-family:"Noto Sans TC"}
.c-green b{color:#1faa55} .c-blue b{color:var(--blue)} .c-purple b{color:var(--purple)}
.stats b.up{color:#1faa55}
.c-purple b:last-child{}

/* ---------- News ---------- */
.news img{width:100%;aspect-ratio:5.3/1;object-fit:cover}
.news-b{padding:18px 20px 16px}
.news .meta{position:absolute;left:16px;bottom:-11px;display:flex;align-items:center;gap:14px}
.news .meta .tag{position:static}
.news .meta time{font-size:12px;color:#8a93a8;background:#fff;padding:0 6px;border-radius:4px}
.news h3{font-family:"Noto Sans TC";font-size:16px;font-weight:900;color:#111827;margin-top:4px}
.news p{font-size:12px;color:#6b7280;font-family:"Noto Sans TC";line-height:1.6;margin-top:4px}

/* ---------- Partners ---------- */
.partners{position:relative;overflow:hidden;background:linear-gradient(90deg,#fff 55%,#f1f5fb)}
.partners .wrap{display:grid;grid-template-columns:1fr 240px;gap:24px;align-items:center;padding:clamp(20px,2.4vw,32px) 0;position:relative}
.partners::before{content:"";position:absolute;right:calc((100vw - var(--wrap))/2 + 200px);top:0;bottom:0;width:clamp(200px,22vw,360px);
  background:url(img/handshake.jpg) center/cover;-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 35%,#000 70%,transparent);opacity:.95}
.partners .wrap>div:first-child{min-width:0}
.logos{margin-top:6px;position:relative;overflow:hidden;padding:8px 0 14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logos-track{display:flex;gap:12px;width:max-content}
.logos-track.run{animation:logosScroll var(--dur,30s) linear infinite}
.logos:hover .logos-track,.logos:focus-within .logos-track{animation-play-state:paused}
.lg{flex:none}
@keyframes logosScroll{to{transform:translateX(-50%)}}
@media (min-width:1101px){.logos{margin-right:calc(clamp(200px,22vw,360px) - 64px)}}
@media (prefers-reduced-motion:reduce){.logos{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.logos-track.run{animation:none}}
.lg{width:clamp(120px,10vw,168px);height:64px;background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(20,60,140,.07);display:grid;place-items:center}
.lg img{max-width:84%;max-height:70%;object-fit:contain}
.join{position:relative;text-align:left}
.join h3{font-family:"Noto Sans TC";font-size:18px;font-weight:900;color:#111827}
.join p{font-size:12px;color:#374151;font-family:"Noto Sans TC";margin:4px 0 16px}
.join .btn{background:#0d3aa9;border-radius:8px}

/* ---------- Bottom CTA（地球橫幅：globe-band.jpg 由原圖上緣弧線＋下緣光點接成，避開原圖上的模糊方框） ---------- */
.globe{position:relative;overflow:hidden;color:#fff;background:#061433 url(img/globe-band.jpg) center bottom/100% auto no-repeat}
.globe::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,20,51,.85) 0%,rgba(6,20,51,.35) 38%,rgba(6,20,51,0) 60%)}
.globe .wrap{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;aspect-ratio:2396/151}
.globe h2{font-family:"Noto Sans TC";font-weight:700;font-size:clamp(18px,1.75vw,32px);line-height:1.35;letter-spacing:.03em;text-shadow:0 2px 16px rgba(0,0,0,.5)}
.globe h2 em{font-style:normal;color:#8cc4ff}
.globe p{font-size:clamp(12px,.9vw,14px);line-height:1.6;color:#c3cde2;margin-top:6px;font-family:"Noto Sans TC"}

/* ---------- 收尾：完整點陣地球（首頁、合作夥伴頁；動畫在 assets/js/globe.js） ---------- */
.hz{position:relative;overflow:hidden;color:#fff;text-align:center;background:#050b18}
.hz{--globe-dot:var(--cyan);--globe-arc:#8cc4ff;background:radial-gradient(900px 420px at 50% 100%,rgba(40,110,220,.3),transparent 70%),linear-gradient(180deg,#040914,#071a3d)}
.hz-cv{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hz::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(7,26,61,0),#071a3d)}
.hz-stars{position:absolute;inset:0;z-index:1;background-image:radial-gradient(1px 1px at 12% 22%,#fff8,transparent),radial-gradient(1px 1px at 28% 64%,#fff6,transparent),radial-gradient(1.5px 1.5px at 44% 18%,#fff9,transparent),radial-gradient(1px 1px at 61% 42%,#fff5,transparent),radial-gradient(1.5px 1.5px at 78% 26%,#fff8,transparent),radial-gradient(1px 1px at 88% 58%,#fff6,transparent),radial-gradient(1px 1px at 6% 48%,#fff5,transparent),radial-gradient(1px 1px at 94% 12%,#fff7,transparent),radial-gradient(1px 1px at 35% 38%,#fff4,transparent),radial-gradient(1px 1px at 70% 70%,#fff4,transparent)}
.hz-in{position:relative;z-index:2;padding:clamp(64px,6vw,96px) 0 clamp(230px,21vw,330px)}
.hz .mono{font:600 12px Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.hz~footer{background:#071a3d}
.hz h2{font-size:clamp(24px,2.4vw,40px);font-weight:900;line-height:1.3;margin:10px 0 10px;letter-spacing:.02em}
.hz h2 em{font-style:normal;background:linear-gradient(90deg,#8cc4ff,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.hz p{font-size:clamp(14px,1vw,16px);line-height:1.85;color:rgba(255,255,255,.85);max-width:38em;margin:0 auto}
.hz-acts{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px}
.hz-line{border:1.5px solid rgba(255,255,255,.6);color:#fff}
.hz-line:hover{background:rgba(255,255,255,.1)}
.hz-ways{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:8px 32px;margin-top:20px;font-size:14px;color:rgba(255,255,255,.85)}
.hz-ways span{font:600 12px Poppins,"Noto Sans TC";letter-spacing:.14em;color:rgba(255,255,255,.6);margin-right:10px;text-transform:uppercase}
.hz-ways a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35)}
.hz+footer::before,.hz~footer::before{display:none}
.hz~footer .fx-main{border-top:1px solid rgba(255,255,255,.08)}

/* ---------- 收尾帶：純 CSS 的地平線光弧（產品／解決方案／案例／B2B／關於我們；文案在 src/endcap.json，由 build.py 插入） ---------- */
.endcap{--ec:var(--cyan);position:relative;overflow:hidden;color:#fff;text-align:center;background:radial-gradient(1px 1px at 9% 24%,#fff7,transparent),radial-gradient(1px 1px at 23% 58%,#fff5,transparent),radial-gradient(1.5px 1.5px at 38% 16%,#fff8,transparent),radial-gradient(1px 1px at 64% 34%,#fff5,transparent),radial-gradient(1.5px 1.5px at 79% 20%,#fff7,transparent),radial-gradient(1px 1px at 91% 52%,#fff5,transparent),radial-gradient(1px 1px at 5% 62%,#fff4,transparent),radial-gradient(1px 1px at 55% 10%,#fff5,transparent),linear-gradient(180deg,#05070d,#0b0f19)}
.endcap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:75%;z-index:0;pointer-events:none;background:radial-gradient(ellipse 55% 100% at 50% 100%,color-mix(in srgb,var(--ec) 24%,transparent),transparent 72%)}
.endcap::before{content:"";position:absolute;z-index:1;left:50%;top:calc(100% - clamp(64px,6.5vw,104px));width:max(1500px,150vw);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:linear-gradient(180deg,rgba(11,15,25,0) 0,rgba(11,15,25,.35) 16px,#0b0f19 58px),radial-gradient(circle,rgba(190,225,255,.5) 0 1px,transparent 1.6px) 0 0/9px 9px,linear-gradient(180deg,#123a80 0,#0b0f19 62px);
  box-shadow:0 0 0 1.5px rgba(205,232,255,.7),0 -10px 44px -4px color-mix(in srgb,var(--ec) 60%,transparent),inset 0 22px 36px -22px color-mix(in srgb,var(--ec) 80%,transparent)}
.endcap .ec-in{position:relative;z-index:2;padding:clamp(56px,5.5vw,88px) 0 clamp(124px,11vw,176px)}
.endcap .mono{font:600 12px Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ec)}
.endcap h2{font-size:clamp(24px,2.1vw,32px);font-weight:900;line-height:1.35;margin:10px 0;letter-spacing:.02em}
.endcap h2 em{display:inline-block;font-style:normal;background:linear-gradient(90deg,var(--theme-hi,#8cc4ff),var(--ec));-webkit-background-clip:text;background-clip:text;color:transparent}
.endcap p{font-size:clamp(14px,1vw,16px);line-height:1.85;color:rgba(255,255,255,.85);max-width:40em;margin:0 auto}
.endcap .ec-pts{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin:16px auto 0;font-size:14px;color:rgba(255,255,255,.85)}
.endcap .ec-pts li::before{content:"✓";display:inline-grid;place-items:center;width:17px;height:17px;margin-right:7px;border-radius:50%;font-size:12px;font-weight:700;color:var(--ec);border:1px solid color-mix(in srgb,var(--ec) 60%,transparent)}
.endcap .ec-acts{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.endcap .ec-line{border:1.5px solid rgba(255,255,255,.6);color:#fff}
.endcap .ec-line:hover{background:rgba(255,255,255,.1)}
.endcap~footer::before{display:none}
.endcap~footer .f-main{border-top-color:rgba(255,255,255,.06)}

/* ---------- Footer ---------- */
footer{position:relative;overflow:hidden;background:#061433;color:#d1d5db}
/* 地球區塊後面的頁尾：把地球圖上下翻轉接在下面，接縫無痕再漸淡，看起來像地球往下延伸 */
.globe~footer::before{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:2396/151;background:url(img/globe-band.jpg) center top/100% auto no-repeat;transform:scaleY(-1);opacity:.85;-webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.35) 30%,transparent 70%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.35) 30%,transparent 70%);pointer-events:none}
.globe~footer{margin-top:-1px}
footer>.wrap{position:relative;z-index:1}
.globe~footer .f-main{border-top:0}
footer .f-main{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,2.6vw,48px);padding:clamp(18px,1.6vw,24px) 0 clamp(12px,1.2vw,18px);align-items:center;border-top:1px solid rgba(255,255,255,.1)}
footer .logo{font-size:12px}
footer .logo .zh{color:#fff}
footer .tagline{font:500 12px Poppins,sans-serif;letter-spacing:.06em;margin-top:4px;color:#9ca3af}
footer .f-about{margin-top:10px;font-size:14px;line-height:1.75;color:#9ca3af;max-width:26em;font-family:"Noto Sans TC"}
footer h4{display:none}
.fmenu{display:grid;align-content:start;grid-template-columns:repeat(4,max-content);gap:6px clamp(16px,1.8vw,28px);font-size:14px;font-family:"Noto Sans TC"}
.fmenu h4{grid-column:1/-1;margin-bottom:4px}
.fmenu a{position:relative;justify-self:start;color:#d1d5db;transition:color .2s}
.fmenu a.on{color:#fff}
.fmenu a.on::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--blue-2)}
.fmenu a:hover{color:#fff}
.contact{display:grid;gap:4px;font-size:14px;align-content:start}
.contact h4{margin-bottom:2px}
.contact a{display:flex;align-items:center;gap:12px;color:#d1d5db;transition:color .2s}
.contact a:hover{color:#fff}
.contact svg{font-size:16px;color:#8cc4ff}
footer .f-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;padding:10px 0 12px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#6b7280;font-family:"Noto Sans TC"}
footer .f-bottom .legal{display:flex;gap:18px}

header .nav-r .btn-primary{background:#1257e6;box-shadow:0 6px 16px rgba(18,87,230,.28)}

/* ---------- 導覽列「解決方案」下拉選單（內容由 src/gen_solutions.py 從 products.json 產生） ---------- */
.has-mm{display:contents}
.mm{--mmc:#1257e6;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid #eef2f9;border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(11,31,77,.35);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility 0s .2s;z-index:49}
.has-mm:hover .mm,.has-mm:focus-within .mm,.mm:hover{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}
.mm::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.mm .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;padding:22px 0 26px}
.mm-col{display:grid;gap:9px;align-content:start;font-size:14px;font-family:"Noto Sans TC"}
.mm-col a{color:var(--ink);padding:0}
.mm-col a:hover{color:var(--mmc)}
.mm-col .mm-h{font-weight:900;color:var(--mmc);padding-bottom:9px;border-bottom:1px solid var(--line);margin-bottom:2px}
.mm-col .mm-more{font-weight:700;color:var(--mmc)}
.mm-col span.mm-h{display:block}
.mm-col sup{font:600 12px Poppins,sans-serif;color:var(--muted);margin-left:5px}
.mm-col .mm-case{display:grid;gap:2px;line-height:1.5}
.mm-col .mm-case b{font:700 18px Poppins,"Noto Sans TC",sans-serif;color:var(--mmc)}
.mm .mm-all{grid-column:-2;align-self:end;justify-self:end;font-weight:700;font-size:14px;color:var(--mmc)}
.mm .mm-span2{grid-column:span 2}
.mm-col.mm-nums{gap:14px}
.mm-col.mm-nums .mm-case span{font-size:14px;color:var(--muted)}
.menu .mm a::before,.menu .mm a::after{display:none}
.menu .mm a{--dot:var(--mmc);white-space:normal;line-height:1.5}

 /* ---------- 產品頁「適用產業」（src/gen_solutions.industry_row 自動插入） ---------- */
.ind-row{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:12px 0 4px;font-family:"Noto Sans TC",sans-serif;max-width:46em}
.ind-row span{font-size:12px;font-weight:700;color:var(--muted);margin-right:3px}
.ind-row a{font-size:12px;font-weight:500;line-height:1.5;color:var(--muted);background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:999px;padding:1px 9px;transition:.2s}
.ind-row a:hover{border-color:var(--blue);color:var(--blue)}
.ind-row .esg-chip{display:inline-flex;align-items:center;gap:5px;margin-left:4px;border-color:color-mix(in srgb,#118653 40%,transparent);color:#0a5a3a;background:#eefaf3}
.ind-row .esg-chip b{font:700 12px Poppins,sans-serif;letter-spacing:.06em;background:#118653;color:#fff;border-radius:4px;padding:0 5px}
#esg-fit{scroll-margin-top:100px}
footer .f-esg{color:#8cc4ff}footer .f-esg:hover{color:#fff}

/* ---------- 產品頁「相關案例與延伸閱讀」（由 src/gen_content.py 依 products.json 分類自動插入） ---------- */
.rel{background:#f6f8fb;border-top:1px solid var(--line);font-family:"Noto Sans TC",sans-serif}
.rel .wrap{padding:clamp(32px,3.6vw,56px) 0}
.rel-h{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.rel-h .mono{font:600 12px Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.rel-h h2{font-size:clamp(20px,1.8vw,28px);font-weight:900;color:#111827}
.rel-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(16px,2.4vw,40px);align-items:start}
.rel-cases{display:grid;gap:12px}
.rel-case{display:grid;gap:4px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:8px;padding:16px 18px;transition:.25s}
.rel-case:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.rel-case .k{font-size:12px;font-weight:700;color:var(--blue)}
.rel-case b{font-size:16px;color:#111827;line-height:1.5}
.rel-case .m{font-size:14px;color:var(--muted)}
.rel-arts{list-style:none;border-top:2px solid #111827}
.rel-arts li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}
.rel-arts a{color:#111827;font-weight:700}
.rel-arts a:hover{color:var(--blue)}
.rel-arts span{flex:none;font-size:12px;color:var(--muted)}
.rel-grid>:only-child{grid-column:1/-1}
@media (max-width:900px){.rel-grid{grid-template-columns:1fr}}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .menu{display:none}.burger{display:block}.mm{display:none}
  .menu.open .m-only{display:block}
  .menu.open .mm{display:block;position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:none}
  .menu.open .mm .wrap{width:auto;grid-template-columns:1fr;gap:10px;padding:2px 0 10px 14px;border-left:2px solid var(--line)}
  .menu.open .mm-col{gap:6px;font-size:14px}.menu.open .mm-col .mm-h{border:0;padding:0;margin:0;font-size:14px}
  .menu.open .mm .mm-all{grid-column:auto;justify-self:start;font-size:14px}
  .menu.open .mm .mm-span2{grid-column:auto}.menu.open .mm .mm-nums{display:none}
  .menu.open{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;background:#fff;padding:16px var(--pad);box-shadow:var(--shadow)}
  .esg{grid-template-columns:1fr 1fr 1fr}.esg-intro{grid-column:1/-1}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .globe{background-size:auto 100%}.globe .wrap{aspect-ratio:auto;padding:28px 0}
  footer .f-main{grid-template-columns:1fr 1fr}footer .f-brand{grid-column:1/-1}
  .globe~footer::before{display:none}
  .partners::before{display:none}
}
@media (max-width:760px){
  .lang{display:none}
  .hero-bg{width:100%;opacity:.35}
  .services,.grid3,.esg,.cta3{grid-template-columns:1fr}
  .svc,.svc:last-child{border-radius:8px}
  .grid4{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start}
  .partners .wrap{grid-template-columns:1fr}
  footer .f-main{grid-template-columns:1fr}
}

/* ---------- 分頁主題色（首頁不套用） ---------- */
body.theme-green{--blue:#118653;--blue-2:#1faa6b;--cyan:#2ED9B7;--theme-deep:#0a3527;--theme-mid:#0f5a40;--theme-soft:#e8f7ef;--theme-hi:#7ff0c4}
body.theme-purple{--blue:#6a3ce8;--blue-2:#7c4dff;--cyan:#b69cff;--theme-deep:#1b0f4a;--theme-mid:#3a1e96;--theme-soft:#f1ecff;--theme-hi:#cdb8ff}
body.theme-blue{--theme-deep:#0b1f4d;--theme-mid:#12306e;--theme-soft:#eef4ff;--theme-hi:#7fb3ff}
body.theme-orange{--blue:#c2410c;--blue-2:#ea580c;--cyan:#fdba74;--theme-deep:#431407;--theme-mid:#7c2d12;--theme-soft:#fff3e8;--theme-hi:#fdba74}
body.theme-teal{--blue:#0b7f8a;--blue-2:#0e9aa7;--cyan:#67e8f9;--theme-deep:#062e33;--theme-mid:#0a5560;--theme-soft:#e4f6f7;--theme-hi:#7eeaf2}
body.theme-gold{--blue:#946000;--blue-2:#b07700;--cyan:#fcd34d;--theme-deep:#2e1d00;--theme-mid:#5c3d00;--theme-soft:#fff6df;--theme-hi:#fcd34d}
body.theme-navy{--blue:#1e3a8a;--blue-2:#2f4fb5;--cyan:#93b4ff;--theme-deep:#0b1640;--theme-mid:#172a6b;--theme-soft:#eaeefb;--theme-hi:#a5bdff}
body.theme-rose{--blue:#be185d;--blue-2:#db2777;--cyan:#f9a8d4;--theme-deep:#4a0622;--theme-mid:#831843;--theme-soft:#fff0f6;--theme-hi:#f9a8d4}
body[class*="theme-"] header{border-top:4px solid var(--blue)}
body[class*="theme-"] .menu a.on{color:#1257e6}
.page-dark{color:#fff}
.page-dark .eyebrow{color:var(--theme-hi)}
.page-dark h1{color:#fff}
.page-dark .lead{color:#fff}
.page-dark .lead em{color:var(--theme-hi)}
.page-dark p{color:rgba(255,255,255,.85)}
.page-dark .btn-primary{background:#fff;color:var(--theme-deep);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.page-dark .btn-ghost{background:transparent;border-color:rgba(255,255,255,.65);color:#fff}
.page-dark .btn-ghost:hover{background:rgba(255,255,255,.12)}
.page-dark .btn-ghost svg{color:#fff!important}

/* ---------- LOGO 動畫（每次瀏覽只在第一頁播放） ---------- */
header .mark .lf-l,header .mark .lf-r{transform-box:fill-box}
header .mark .lf-l{transform-origin:70% 100%}
header .mark .lf-r{transform-origin:0% 100%}
html.logo-anim header .mark .lf-l{animation:logoRise .75s cubic-bezier(.3,.8,.3,1) .1s both}
html.logo-anim header .mark .lf-r{animation:logoSprout .8s cubic-bezier(.25,1.4,.4,1) .6s both}
html.logo-anim header .mark .wm{animation:logoFade .6s ease-out .95s both}
html.logo-anim header .logo .zh{animation:logoFade .6s ease-out 1.15s both}
@keyframes logoRise{0%{transform:scaleY(0);opacity:0}30%{opacity:1}100%{transform:scaleY(1)}}
@keyframes logoSprout{0%{transform:scale(0) rotate(-35deg);opacity:0}40%{opacity:1}100%{transform:none}}
@keyframes logoFade{from{opacity:0;transform:translateX(-6px)}}
header .logo:hover .mark .lf-r{animation:logoSway 1s ease-in-out}
header .logo:hover .mark .lf-l{animation:logoSwayL 1s ease-in-out}
@keyframes logoSway{0%,100%{transform:none}35%{transform:rotate(-7deg)}70%{transform:rotate(3deg)}}
@keyframes logoSwayL{0%,100%{transform:none}35%{transform:rotate(3deg)}70%{transform:rotate(-1.5deg)}}
@media (prefers-reduced-motion:reduce){header .mark *,header .logo .zh{animation:none!important}}

/* 可點的案例卡：整張卡都是連結（標題連結往外撐滿卡片） */
.case-link,.news-link{position:relative;transition:.25s}
.case-link .stretch::after,.news-link .stretch::after{content:"";position:absolute;inset:0;z-index:1}
.case-link:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(20,60,140,.16)}
.case-link:hover h3{color:var(--blue)}
.case-link .case-b h3::after{content:" →";color:var(--blue)}
.news-link:hover h3{color:var(--blue)}
.news-link .news-b h3::after{content:" →";color:var(--blue)}

/* 選單顏色圖例：每一區固定一個主色，還沒點進去也認得出來 */
.menu a::before{content:none}
.menu .m-only{display:none}
.menu a:hover{color:#1257e6}
.menu a,.lang,.lang a{white-space:nowrap}
@media (max-width:1320px){.menu{gap:clamp(10px,1.3vw,20px)}.menu a::before{margin-right:5px;width:6px;height:6px}.nav-r{gap:12px}}
@media (max-width:1200px){.lang{display:none}}

/* Logo 下的小字：說明「智能」＝智慧製造 × 能源永續 */
.logo-txt{display:flex;flex-direction:column;gap:.18em;margin-top:.55em}
.logo-txt .zh{margin-top:0}
.logo .sub{font-family:"Noto Sans TC";font-size:.66em;font-weight:500;color:#6b7280;letter-spacing:.12em;white-space:nowrap;line-height:1}
html.logo-anim header .logo .sub{animation:logoFade .6s ease-out 1.35s both}
@media (prefers-reduced-motion:reduce){header .logo .sub{animation:none!important}}
@media (max-width:760px){.nav{gap:10px}.nav .logo{font-size:14px;gap:.5em}.logo .sub{letter-spacing:.04em}.nav-r{gap:8px}.nav-r .btn-sm{padding:8px 14px}}

/* 語言切換：英文／日文版上線前，點擊顯示「準備中」提示（上線後改成真連結並加 hreflang） */
.lang{position:relative}
.lang a[data-soon]{cursor:pointer}
.lang-tip{position:absolute;top:calc(100% + 10px);right:0;white-space:nowrap;background:#111827;color:#fff;font-size:12px;padding:7px 12px;border-radius:8px;box-shadow:0 8px 20px rgba(13,22,51,.2);opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .2s,transform .2s;z-index:60}
.lang-tip.on{opacity:1;transform:none}

.esg-intro .esg-sdg{font-size:12px;font-weight:600;color:var(--blue);letter-spacing:.02em;margin:14px 0 -8px}


/* ---------- 頁尾（新版，由 src/gen_home.py 產生，全站共用） ---------- */
.fx .fx-main{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,56px);padding:clamp(28px,2.6vw,40px) 0 clamp(20px,2vw,28px);border-top:0}
.fx .logo{font-size:14px}
.fx-brand p{font-size:14px;line-height:1.8;color:#9ca3af;margin-top:12px}
.fx-col{display:flex;flex-direction:column;gap:7px;font-size:14px}
.fx-col h4{display:block;font:600 12px Poppins,"Noto Sans TC",sans-serif;letter-spacing:.16em;color:#6b7280;margin-bottom:4px}
.fx-col a{color:#d1d5db;transition:color .2s}
.fx-col a:hover{color:#fff}
.fx-btn{margin-top:6px;align-self:flex-start;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:6px 14px;font-weight:700;color:#fff!important}
.fx-btn:hover{background:rgba(255,255,255,.1)}
@media (max-width:1000px){.fx .fx-main{grid-template-columns:1fr 1fr}.fx-brand{grid-column:1/-1}}

/* ---------- 品牌配色 B：石墨黑＋電光藍（2026-09-30 定案，全站統一，覆蓋各頁 theme 主色） ---------- */
:root,html body[class*="theme-"]{
  --navy:#111827; --ink:#1f2937; --muted:#6b7280; --line:#e2e8f0;
  --blue:#2563eb;            /* 行動色：按鈕、連結、重點（白字對比 5.4:1） */
  --blue-2:#3b82f6; --cyan:#7dd3fc;
  --theme-deep:#111827; --theme-mid:#1f2937; --theme-soft:#eaf1ff; --theme-hi:#7dd3fc;
  --bg-soft:#f3f5f8;
}
html body{background:#f8f9fb}
/* 導覽列 */
html body[class] .menu a.on,html body[class] .menu a:hover{color:#111827}
html body .menu a.on::after{background:#2563eb}
html body header .nav-r .btn-primary{background:#2563eb;box-shadow:0 6px 16px rgba(0,0,0,.2)}
html body .mm{--mmc:#2563eb}
/* 標題字色改成品牌深藍 */
html body .hero h1,html body .svc h2,html body .esg-intro h2,html body .sec-head h2,html body .sol h3,html body .solp h3,
html body .need h2,html body .case h3,html body .news h3,html body .join h3,html body .rel-h h2{color:#111827}
html body .svc.tech .num,html body .p-e .num{background:linear-gradient(135deg,#1f2937,#111827)}
html body .join .btn{background:#2563eb}
html body .p-g .btn-ghost{border-color:#2563eb}
/* 頁尾、地球區塊跟主色一致 */
html body footer,html body .globe{background-color:#0b0f19}
/* 成功案例頁：深色底改成品牌深藍 */
html body .cx-hero{background:radial-gradient(1200px 520px at 85% 0%,rgba(255,255,255,.08),transparent 70%),linear-gradient(160deg,#111827 0%,#0b0f19 100%)}
html body .cx{--paper:#f8f9fb;--rule:#e2e8f0}

/* ---------- 成功案例頁 hero 底色：深青綠（2026-10-01）----------
   做法同 B2B 頁（紫底）：字色維持全站統一的白＋淺藍，只換 hero 底色來區分頁面。 */
html body .cx-hero{background:radial-gradient(circle at 80% 30%,rgba(20,184,166,.45),transparent 55%),linear-gradient(120deg,#0b1f24 0%,#0f3d3e 65%,#0f766e 100%)}
html body .cx-hero::before{opacity:.6}

/* ---------- 解決方案頁 hero 底色：品牌深藍（2026-10-01）----------
   同 B2B（紫）、成功案例（深青綠）的做法：只換 hero 底色，字色維持全站統一的白＋淺藍。 */
html body .sx-hero{border-bottom:0;color:#fff;
  background:radial-gradient(900px 420px at 88% 0%,rgba(59,130,246,.45),transparent 65%),radial-gradient(600px 300px at 0% 100%,rgba(125,211,252,.12),transparent 70%),linear-gradient(120deg,#0b1f4d 0%,#12307a 60%,#1e40af 100%)}
html body .sx-hero .mono{color:#7dd3fc}
html body .sx-hero h1{color:#fff}
html body .sx-hero p{color:rgba(255,255,255,.85)}
html body .sx-hero .side div{color:rgba(255,255,255,.6)}
html body .sx-hero .side b{color:#fff}
html body .sx-hero .btn-primary{background:#fff;color:#1d4ed8;box-shadow:0 8px 22px rgba(0,0,0,.25)}
html body .sx-hero .sx-ind>b{color:rgba(255,255,255,.85)}
html body .sx-hero .sx-ind button{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff}
html body .sx-hero .sx-ind button:hover{border-color:#7dd3fc;color:#7dd3fc}
html body .sx-hero .sx-ind button[aria-pressed="true"]{background:#fff;border-color:#fff;color:#1d4ed8;font-weight:700}
html body .sx-hero h1 em{font-style:normal;color:#7dd3fc}
html body .sx-hero .mt{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff;transition:background .2s,border-color .2s}
html body .sx-hero .mt:hover{background:rgba(255,255,255,.13);border-color:rgba(125,211,252,.6)}
html body .sx-hero .mt b{color:#fff}
html body .sx-hero .mt span{color:rgba(255,255,255,.85)}
html body .sx-hero .mt i.tr{color:#7dd3fc;background:rgba(125,211,252,.16);border:1px solid rgba(125,211,252,.45)}
html body .sx-hero .mt i.ts{color:rgba(255,255,255,.85);border:1px dashed rgba(255,255,255,.4)}
html body .sx-hero h1 em{display:inline-block}

/* ---------- 產業篩選下拉選單（gen_solutions.ind_select；解決方案頁 hero 與首頁「你現在遇到的是？」共用） ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ind-sel{position:relative;display:inline-block;max-width:100%}
.ind-sel select{appearance:none;-webkit-appearance:none;font:inherit;font-size:14px;font-weight:600;max-width:100%;padding:8px 40px 8px 18px;border-radius:999px;border:1.5px solid var(--rule);background:#fff;color:var(--ink-d);cursor:pointer;transition:.2s}
.ind-sel::after{content:"";position:absolute;right:17px;top:50%;width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none;color:var(--muted)}
.ind-sel select:hover,.ind-sel select:focus-visible{border-color:var(--blue);outline:none}
.ind-sel.on select{background:var(--blue);border-color:var(--blue);color:#fff}
.ind-sel.on::after{color:#fff}
.ind-sel option,.ind-sel optgroup{color:#111827;background:#fff}
html body .sx-hero .ind-sel select{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff}
html body .sx-hero .ind-sel::after{color:rgba(255,255,255,.85)}
html body .sx-hero .ind-sel select:hover{border-color:#7dd3fc}
html body .sx-hero .ind-sel.on select{background:#fff;border-color:#fff;color:#1d4ed8}
html body .sx-hero .ind-sel.on::after{color:#1d4ed8}
.ind-row .ind-more{font:inherit;font-size:12px;font-weight:600;line-height:1.5;color:var(--blue);background:none;border:1px dashed var(--line);border-radius:999px;padding:1px 9px;cursor:pointer}
.ind-row .ind-more:hover{border-color:var(--blue)}

/* ---------- 解決方案下拉選單底部「依產業找」（gen_solutions.mega；主力產業在 products.json nav_industries） ---------- */
.mm .mm-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;border-top:1px solid var(--line);padding-top:16px;margin-top:-4px}
.mm .mm-foot .mm-all{grid-column:auto;align-self:center}
.mm .mm-ind{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.mm .mm-ind b{font-size:14px;font-weight:700;color:var(--muted);margin-right:4px}
.mm .mm-ind a{font-size:14px;line-height:1.4;padding:5px 13px;border:1px solid var(--line);border-radius:999px;color:var(--ink-d,#111827);transition:.2s}
.mm .mm-ind a:hover{border-color:var(--mmc);color:var(--mmc)}
.mm .mm-ind a.mm-ind-all{border:0;padding-left:4px;font-weight:700;color:var(--mmc)}
@media (max-width:1100px){.menu.open .mm .mm-foot{border-top:0;padding-top:4px;margin-top:0}.menu.open .mm .mm-ind a{padding:3px 10px;font-size:12px}}

/* ---------- 英文版（2026-10-07）：英文字比中文長，頁首收緊，避免把右側按鈕擠出畫面 ---------- */
html[lang="en"] .menu{gap:clamp(14px,1.5vw,28px)}
@media (max-width:1320px){html[lang="en"] .menu{gap:12px;font-size:13px}html[lang="en"] .nav-r{gap:10px}}
html[lang="en"] .aside .box{max-width:100%;box-sizing:border-box}
html[lang="en"] .aside li,html[lang="en"] .aside a,html[lang="en"] .aside h3{overflow-wrap:anywhere}
html[lang="en"] .aside{grid-template-columns:minmax(0,1fr);min-width:0}
@media (max-width:640px){html[lang="ja"] .nav-r .btn-primary{padding:8px 10px;font-size:12px}html[lang="ja"] .nav-r .btn-primary.arrow::after{display:none}html[lang="en"] .nav-r .btn-primary{padding:8px 12px;font-size:12px}html[lang="en"] .nav-r .btn-primary.arrow::after{display:none}}
html[lang="en"] .ef-h{flex-wrap:wrap;white-space:normal}
html[lang="en"] .ef-h *{white-space:normal}
html[lang="en"] .eyebrow{white-space:normal;overflow-wrap:anywhere}
html[lang="en"] h1,html[lang="en"] h2{overflow-wrap:break-word;hyphens:auto}
html[lang="en"] main section>.wrap>*{min-width:0}
html[lang="en"] td,html[lang="en"] th{overflow-wrap:anywhere}
html[lang="en"] .btn{white-space:normal;text-align:center}
html[lang="en"] .kpi{min-width:0}
html[lang="en"] .kpi b{white-space:normal;overflow-wrap:anywhere}
@media (max-width:640px){html[lang="en"] .kpi b{font-size:clamp(18px,6vw,26px)}}
html[lang="en"] header .btn{white-space:nowrap}
html[lang="en"] .kx-chips{overflow-x:auto;scrollbar-width:none;min-width:0;flex:1}
html[lang="en"] .kx-chips button{padding:7px 12px}
html[lang="en"] main h1 em{white-space:normal}
html[lang="en"] .rows .pc h3{padding-right:124px}
html[lang="en"] .rows .pc-meta .i+.i::before{content:", "}
html[lang="en"] .rows .pc h3{padding-right:84px}
@media (max-width:600px){html[lang="en"] .px-map .t-big{font-size:38px}html[lang="en"] .px-map .t-sm{font-size:15px}html[lang="en"] .px-map .t-arr{font-size:20px}}