/* ══════════════════════════════════════════════════════════════
   GN-AI Consulting — shared stylesheet
   聚能智慧資訊顧問股份有限公司 official site
   2026-09 restyle：技術規格書語言 — 線條取代陰影、線稿圖示、明體標題
   所有 class 名稱與 2026-05 版相同，只改外觀。
   ══════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

:root{
  /* 品牌色階（與 DESIGN.md 相同）*/
  --g900:#052e16;--g800:#14532d;--g700:#15803d;--g600:#16a34a;
  --g500:#22c55e;--g400:#4ade80;--g100:#dcfce7;--g50:#f0fdf4;
  --t600:#0d9488;--t500:#14b8a6;--t100:#ccfbf1;--t50:#f0fdfa;
  --td:#0f1f0f;--tm:#374151;--tl:#6b7280;--bd:#d1fae5;
  /* 2026-09：線條、字體 */
  --line:var(--bd);
  --r:6px;
  --font-display:'Noto Serif TC','Noto Sans TC','PingFang TC','Microsoft JhengHei',serif;
  --font-body:'Inter','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
  --tr:color .18s ease,background-color .18s ease,border-color .18s ease
}
body{font-family:var(--font-body);background:#fff;color:var(--td);
     font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.005em;color:var(--td)}
:focus-visible{outline:2px solid var(--g600);outline-offset:3px}
.container{max-width:1160px;margin:0 auto;padding:0 24px}

/* 線稿圖示 */
.ic{width:26px;height:26px;display:block;flex-shrink:0}

/* ── NAV ── */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:#fff;
  border-bottom:1px solid var(--line)}
.navbar.scrolled{border-bottom-color:rgba(21,128,61,.35)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo-img{width:56px;height:56px;object-fit:contain}
.nav-logo-text{display:flex;flex-direction:column;line-height:1.2}
.nav-logo-main{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--g900);white-space:nowrap}
.nav-logo-sub{font-size:11px;font-weight:500;color:var(--tl);letter-spacing:.03em;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none}
.nav-links>li{position:relative}
.nav-links>li>a{display:block;padding:8px 12px;font-size:14px;font-weight:500;color:var(--tm);
  border-bottom:2px solid transparent;transition:var(--tr);white-space:nowrap}
.nav-links>li>a:hover{color:var(--g700)}
.nav-links>li>a.active{color:var(--g700);border-bottom-color:var(--g700)}
.nav-cta-btn{background:var(--g700)!important;color:#fff!important;
  padding:9px 18px!important;border-radius:4px;font-weight:600;margin-left:8px;border-bottom:0!important}
.nav-cta-btn:hover{background:var(--t600)!important}
/* Dropdown */
.nav-dd>a::after{content:' ▾';font-size:10px;opacity:.5}
.nav-dd-menu{display:none;position:absolute;top:100%;left:0;padding-top:6px;z-index:200}
.nav-dd-menu>a:first-child{border-top-left-radius:var(--r);border-top-right-radius:var(--r)}
.nav-dd-menu>a:last-child{border-bottom-left-radius:var(--r);border-bottom-right-radius:var(--r)}
.nav-dd:hover .nav-dd-menu,.nav-dd.open .nav-dd-menu{display:block}
.nav-dd-menu a{display:block;padding:11px 16px;font-size:13.5px;color:var(--tm);background:#fff;
  border:1px solid var(--line);border-top:0;min-width:240px;transition:var(--tr)}
.nav-dd-menu>a:first-child{border-top:1px solid var(--line)}
.nav-dd-menu a:hover{background:var(--g50);color:var(--g700)}
.dmi{display:none}
/* Hamburger */
/* 觸控區 44×44（iOS/Android 建議最小值）：用 padding 撐開、負 margin 抵銷版面位移 */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;
  padding:15px 11px;margin:-15px -11px;align-items:center}
.hamburger span{width:22px;height:1.5px;background:var(--td)}

.page-body{padding-top:76px}

/* ── SECTIONS ── */
.section{padding:76px 0;border-top:1px solid var(--line)}
.section--soft{background:#f8fdf9}
.section--dark{background:var(--g900);color:#fff;border-top:0}
.hero+.section,.page-hero+.section{border-top:0}
.tag,.card-cat,.ph-tag{display:none}
.sec-title{font-size:clamp(24px,3vw,32px);line-height:1.3;margin-bottom:12px}
.section--dark .sec-title{color:#fff}
/* 說明文字的行寬：實測 125 段區塊說明，880px 讓 92% 一行放完（640px 只有 56%，且 31% 產生孤行） */
.sec-sub{font-size:15.5px;color:var(--tm);line-height:1.8;max-width:880px;margin-bottom:40px}
.section--dark .sec-sub{color:rgba(255,255,255,.7)}
.btn-p{display:inline-block;background:var(--g700);color:#fff;padding:12px 24px;
  border-radius:4px;font-weight:600;font-size:14px;transition:var(--tr);cursor:pointer}
.btn-p:hover{background:var(--t600)}
.btn-o{display:inline-block;border:1px solid var(--g700);color:var(--g700);padding:11px 23px;
  border-radius:4px;font-weight:600;font-size:14px;background:#fff;transition:var(--tr);cursor:pointer}
.btn-o:hover{background:var(--g50)}

/* ── HOME HERO ── */
.hero{padding:72px 0 0;background:#fff;position:relative}
.hero::before,.hero::after,.hero-deco,.hero-eyebrow,.hero-spirit,.hero-stats{display:none}
.hero-inner{max-width:760px}
.hero-title{font-size:clamp(34px,4.6vw,54px);line-height:1.22;margin-bottom:22px}
.hero-title span{color:inherit}
.hero-desc{font-size:16px;color:var(--tm);max-width:880px;line-height:1.9;margin-bottom:30px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}

/* 服務鏈流程圖（首頁主視覺）— 五個節點一條線 */
.flow{display:grid;grid-template-columns:repeat(5,1fr);margin-top:56px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:32px 0 36px}
.flow-step{position:relative;padding-right:20px}
.flow-step::before{content:'';position:absolute;top:19px;left:40px;right:0;height:1px;background:var(--g600)}
.flow-step:last-child::before{display:none}
.flow-no{width:38px;height:38px;border:1.5px solid var(--g700);border-radius:4px;background:#fff;
  color:var(--g700);font-family:var(--font-display);font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.flow-title{font-family:var(--font-display);font-weight:700;font-size:15.5px;margin-top:14px;color:var(--td)}
.flow-desc{font-size:12.5px;color:var(--tl);line-height:1.65;margin-top:4px}

/* ── CARDS：共用邊線的格線，不用陰影 ── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-lined{gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.grid-lined>.card{border:0;border-radius:0}
.card{background:#fff;border-radius:var(--r);padding:28px 26px;border:1px solid var(--line);
  transition:var(--tr);display:block}
.card.clickable{cursor:pointer}
.card.clickable:hover{background:var(--g50)}
.section--soft .card{background:#fff}
.card-ico{width:40px;height:40px;color:var(--g700);margin-bottom:16px;display:flex;align-items:center}
.card-title{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--td);margin-bottom:8px;line-height:1.4}
.card-desc{font-size:14px;color:var(--tm);line-height:1.8;margin-bottom:14px}
.card-tags{display:flex;flex-wrap:wrap;gap:6px}
.ctag{font-size:11px;font-weight:500;color:var(--g800);padding:2px 9px;border-radius:3px;border:1px solid var(--line)}
.card-link{display:inline-block;font-size:13px;font-weight:600;color:var(--g700);margin-top:14px;
  border-bottom:1px solid rgba(21,128,61,.4);transition:var(--tr)}
.card.clickable:hover .card-link{border-bottom-color:var(--g700)}

/* ── ABOUT ── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-box{background:var(--g900);border-radius:var(--r);padding:40px;color:#fff}
.ab-logo-row{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.ab-logo{width:120px;height:120px;object-fit:contain;flex-shrink:0}
.ab-title{font-size:22px;color:#fff;line-height:1.35}
.ab-desc{font-size:14px;color:rgba(255,255,255,.75);line-height:1.8}
.ab-stats{display:none}

/* 垂直時間軸（服務流程、步驟）*/
.pillars{display:flex;flex-direction:column}
.pillar{display:grid;grid-template-columns:40px 1fr;gap:16px;padding:0 0 26px;position:relative;border:0}
.pillar::before{content:'';position:absolute;left:19.5px;top:40px;bottom:0;width:1px;background:var(--line)}
.pillar:last-child::before{display:none}
.pillar:last-child{padding-bottom:0}
.pi-ico{width:40px;height:40px;border:1.5px solid var(--g700);border-radius:4px;background:#fff;color:var(--g700);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:15px;flex-shrink:0}
.pi-ico .ic{width:20px;height:20px}
.pi-title{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--td);margin:8px 0 4px}
.pi-desc{font-size:14px;color:var(--tm);line-height:1.75}
/* Offices */
.office-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.office-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px}
.oc-city{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--td);margin-bottom:18px;
  display:flex;align-items:center;gap:10px}
.oc-badge{border:1px solid var(--g700);color:var(--g700);font-size:11px;font-weight:600;padding:1px 8px;border-radius:3px;font-family:var(--font-body)}
.oc-row{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.oc-ico{width:26px;height:26px;color:var(--g700);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.oc-ico .ic{width:20px;height:20px}
.oc-lbl{font-size:12px;color:var(--tl)}
.oc-val{font-size:14.5px;color:var(--td);font-weight:500}
.oc-val a{color:var(--g700)}

/* ── PRODUCT / SOLUTION PAGES ── */
.prod-nav{display:flex;gap:0;flex-wrap:wrap;margin-bottom:44px;border-bottom:1px solid var(--line)}
.prod-nav-btn{padding:12px 18px;font-size:14px;font-weight:500;color:var(--tm);border:0;border-bottom:2px solid transparent;
  margin-bottom:-1px;background:none;cursor:pointer;transition:var(--tr);display:inline-block;text-decoration:none}
.prod-nav-btn:hover{color:var(--g700)}
.prod-nav-btn.active{color:var(--g700);border-bottom-color:var(--g700);background:none}
.prod-header{background:var(--g900);border-radius:var(--r);padding:40px;color:#fff;margin-bottom:32px}
.ph-cat{display:none}
.ph-title{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.6vw,40px);line-height:1.25;margin-bottom:12px;color:var(--td)}
.sec-title,.hero-title,.card-title,.wc-title,.pi-title,.flow-title,.nc-title,.oc-city,.loc-card-title{font-family:var(--font-display);font-weight:700}
/* 頁首說明是導言，本來就長（中位數 66 字）：滿版才對得齊下方內容，一行放完率 4% → 68% */
.ph-sub{font-size:16px;color:var(--tm);line-height:1.8;max-width:none}
.prod-header .ph-title{color:#fff}
.prod-header .ph-sub{color:rgba(255,255,255,.8)}
.pf-list{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.pf-item{border:1px solid rgba(255,255,255,.28);border-radius:3px;padding:6px 12px;font-size:12.5px;color:rgba(255,255,255,.9)}

/* ── WHY（每頁唯一的深色帶）── */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(255,255,255,.18)}
.why-card{padding:28px 28px 8px 0;border-right:1px solid rgba(255,255,255,.18);text-align:left}
.why-card+.why-card{padding-left:28px}
.why-card:last-child{border-right:0;padding-right:0}
.wc-num{display:none}
.wc-title{font-family:var(--font-display);font-size:18px;font-weight:700;color:#fff;margin-bottom:10px;line-height:1.4}
.wc-desc{font-size:14px;color:rgba(255,255,255,.72);line-height:1.8}
.why-quote{margin-top:48px;border-left:2px solid var(--g400);padding:2px 0 2px 24px}
.wq-text{font-family:var(--font-display);font-size:17.5px;font-weight:500;line-height:1.8;color:#fff;margin-bottom:10px}
.wq-author{font-size:13px;color:var(--g400)}

/* ── NEWS ── */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.news-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:var(--tr)}
.news-card:hover{border-color:rgba(21,128,61,.45)}
.news-card a{display:flex;flex-direction:column;height:100%}
.nc-top{background:var(--g50);padding:16px 22px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.nc-badge{font-size:11px;font-weight:600;padding:2px 9px;border-radius:3px;border:1px solid var(--g700);color:var(--g700)}
.nc-date{font-size:12.5px;color:var(--tl)}
.nc-body{padding:22px;flex:1;display:flex;flex-direction:column}
.nc-title{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--td);margin-bottom:10px;line-height:1.45}
.nc-desc{font-size:14px;color:var(--tm);line-height:1.75;flex:1;margin-bottom:14px}
.nc-link{font-size:13px;font-weight:600;color:var(--g700)}

/* ── 架構圖（inline SVG）──
   文字是真的文字（可選取、可被搜尋引擎讀取、可朗讀），顏色吃品牌變數。
   只放在淺色區塊；深色區塊需另做變體。 */
.diagram{display:block;width:100%;height:auto;margin:6px 0 0;font-family:var(--font-body)}
.diagram-fig{margin:28px 0 0}
.diagram-cap{font-size:12.5px;color:var(--tl);line-height:1.7;margin-top:12px}
.dg-box{fill:#fff;stroke:var(--bd);stroke-width:1}
.dg-box--on{fill:#fff;stroke:var(--g700);stroke-width:1.5}
.dg-chip{fill:var(--g50);stroke:var(--bd);stroke-width:1}
.dg-zone{fill:none;stroke:var(--g600);stroke-width:1;stroke-dasharray:5 4}
.dg-rule{stroke:var(--bd);stroke-width:1;fill:none}
.dg-flow{stroke:var(--g600);stroke-width:1.5;fill:none;stroke-linecap:round}
.dg-head{fill:none;stroke:var(--g600);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dg-t{font-family:var(--font-display);font-weight:700;font-size:15px;fill:var(--td)}
.dg-t--sm{font-family:var(--font-display);font-weight:700;font-size:13.5px;fill:var(--td)}
.dg-s{font-size:12.5px;fill:var(--tm)}
.dg-n{font-size:12px;fill:var(--tl)}
.dg-k{font-size:12px;fill:var(--g700);font-weight:600;letter-spacing:.02em}
/* 連接線穿過標籤時，用同底色的遮罩把線斷開（標準製圖作法）。
   放在 .section--soft 裡要跟著換色，否則會出現白色色塊。 */
.dg-mask{fill:#fff}
.section--soft .dg-mask{fill:#f8fdf9}
/* 窄螢幕：架構圖資訊密度高，縮到 375px 會變成 5px 字。
   改為在自己的容器內橫向捲動，維持最小可讀寬度。 */
@media(max-width:820px){
  .diagram-fig::before{content:'圖表可左右滑動';display:block;font-size:11.5px;color:var(--tl);margin-bottom:8px}
  .diagram-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
    border:1px solid var(--line);border-radius:var(--r);padding:14px 12px}
  /* 760 = viewBox 原寬。不縮小，文字就維持設計時的字級（11.5–15px），
     而不是被壓成 5px。代價是窄螢幕要左右滑動，這對密集架構圖是正確的取捨。 */
  .diagram-scroll .diagram{min-width:760px}
}

/* ── ARTICLE ── */
/* 靠左，不置中：.article 多半是夾在滿版卡片之間的段落區塊，置中會讓左右兩邊都對不齊 */
.article{max-width:760px;margin:0}
.article h2{font-size:24px;margin:40px 0 14px;line-height:1.35}
.article h3{font-size:18.5px;margin:30px 0 10px;color:var(--g800)}
.article p{font-size:15.5px;color:var(--tm);line-height:1.9;margin-bottom:16px}
.article ul,.article ol{margin:0 0 18px 22px}
.article li{font-size:15.5px;color:var(--tm);line-height:1.85;margin-bottom:6px}
.article blockquote{border-left:2px solid var(--g700);padding:2px 0 2px 20px;margin:24px 0;
  color:var(--td);font-family:var(--font-display);font-size:16.5px;line-height:1.8}
.article-meta{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--tl);margin-bottom:30px}
.article-back{display:inline-block;margin-top:40px;padding:10px 20px;border:1px solid var(--line);
  border-radius:4px;color:var(--g700);font-weight:600;font-size:13px}
.article-back:hover{background:var(--g50);border-color:var(--g700)}

/* ── CONTACT ── */
.contact-wrap{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:start}
.ci{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.ci-ico{width:26px;height:26px;color:var(--g700);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.ci-ico .ic{width:20px;height:20px}
.ci-lbl{font-size:12px;color:var(--tl)}
.ci-val{font-size:14.5px;font-weight:500;color:var(--td)}
.ci-val a{color:var(--g700)}
.contact-loc-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.loc-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.loc-card-title{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--g900);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.loc-badge{border:1px solid var(--g700);color:var(--g700);font-size:10px;font-weight:600;padding:1px 7px;border-radius:3px;font-family:var(--font-body)}
.loc-row{font-size:13px;color:var(--tm);margin-bottom:6px;display:flex;gap:6px;align-items:flex-start}
.loc-row a{color:var(--g700);font-weight:600}
.cform{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg{margin-bottom:15px}
.fg label{display:block;font-size:13px;font-weight:600;color:var(--td);margin-bottom:6px}
.fg input,.fg select,.fg textarea{width:100%;background:#fff;border:1px solid #b9dcc7;border-radius:4px;
  padding:11px 13px;color:var(--td);font-size:14px;font-family:inherit;outline:none;transition:var(--tr)}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--g700);box-shadow:0 0 0 3px rgba(21,128,61,.12)}
.fg textarea{min-height:110px;resize:vertical}
/* 個資同意勾選框：24×24 是 WCAG 2.5.8 AA 的最小觸控尺寸；
   外層 label 另設 min-height:44px，整列都可點。 */
.cform label>input[type="checkbox"]{width:24px;height:24px;margin:0;flex-shrink:0;
  accent-color:var(--g700);cursor:pointer}
/* 聯絡資訊裡的電話與信箱是手機上的主要動作，把行高撐到 24px 以上 */
.ci-val a,.loc-row a{display:inline-block;padding:3px 0}
.fsub{width:100%;background:var(--g700);color:#fff;border:none;padding:13px;border-radius:4px;
  font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;transition:var(--tr)}
.fsub:hover{background:var(--t600)}

/* ── FOOTER ── */
footer{background:var(--g900);color:rgba(255,255,255,.65);padding:56px 0 28px;border-top:1px solid rgba(255,255,255,.1)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px;margin-bottom:40px}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.footer-logo-img{width:56px;height:56px;object-fit:contain}
.footer-brand{font-family:var(--font-display);font-size:17px;font-weight:700;color:#fff}
.footer-brand-en{font-size:11px;color:rgba(255,255,255,.45);letter-spacing:.03em;margin-bottom:12px}
.footer-desc{font-size:13.5px;line-height:1.8}
.footer-col-title{font-family:var(--font-display);font-size:14px;font-weight:700;color:#fff;margin-bottom:14px}
.footer-links{list-style:none}
.footer-links li{margin-bottom:8px}
.footer-links a{font-size:13.5px;color:rgba(255,255,255,.6);transition:var(--tr)}
.footer-links a:hover{color:var(--g400)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;
  display:flex;align-items:center;justify-content:space-between;font-size:12.5px;line-height:1.7}
.footer-tagline{color:var(--g400);font-weight:500}

/* ── 進場動畫：關閉 ── */
.fu{opacity:1;transform:none;transition:none}
.fu.vis{opacity:1;transform:none}

/* ── PAGE HERO（內頁頂部）── */
.page-hero{padding:64px 0 44px;background:#fff;border-bottom:1px solid var(--line)}
.page-hero::after{display:none}

/* ── FLOATING LINE BUTTON（LINE 品牌色，不可改）── */
.line-fab{position:fixed;bottom:24px;right:24px;z-index:900;width:58px;height:58px;border-radius:50%;
  background:#06C755;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(6,199,85,.35);font-weight:800;font-size:20px;letter-spacing:-.03em;transition:var(--tr)}
.line-fab:hover{background:#05b34c}
.line-fab-label{position:absolute;right:70px;top:50%;transform:translateY(-50%);
  background:var(--td);color:#fff;padding:6px 12px;border-radius:4px;font-size:12px;font-weight:600;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s ease}
.line-fab:hover .line-fab-label{opacity:1}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:1fr 1fr}
  .why-card:nth-child(2){border-right:0}
  .why-card:nth-child(3){grid-column:1/-1;border-top:1px solid rgba(255,255,255,.18);padding-left:0;border-right:0}
  .footer-grid{grid-template-columns:1fr 1fr}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(5,1fr)}
}
@media(max-width:768px){
  .section{padding:56px 0}
  .hero{padding-top:48px}
  .about-grid{grid-template-columns:1fr;gap:36px}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .why-card,.why-card+.why-card,.why-card:nth-child(3){border-right:0;padding-left:0;padding-right:0;
    border-top:1px solid rgba(255,255,255,.18)}
  .why-card:first-child{border-top:0}
  .contact-wrap{grid-template-columns:1fr;gap:36px}
  .contact-loc-cards{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-bottom{flex-direction:column;gap:10px;text-align:center}
  .form-row{grid-template-columns:1fr}
  /* iOS Safari 對 <16px 的輸入框會在聚焦時自動放大整頁，使用者得手動縮回去 */
  .fg input,.fg select,.fg textarea{font-size:16px}
  .office-grid{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr;padding:24px 0}
  .flow-step{display:grid;grid-template-columns:38px 1fr;column-gap:14px;row-gap:0;padding:0 0 22px}
  .flow-step::before{top:38px;left:18.5px;width:1px;height:auto;right:auto;bottom:0}
  .flow-step:last-child{padding-bottom:0}
  .flow-no{grid-row:1/3}
  .flow-title,.flow-desc{grid-column:2}
  .flow-title{margin-top:8px}
  .prod-nav{overflow-x:auto;flex-wrap:nowrap}
  .prod-nav-btn{white-space:nowrap}
  .line-fab{width:52px;height:52px;bottom:18px;right:18px;font-size:17px}
}

/* 導覽列自己的斷點：七個項目＋logo＋CTA 不換行需要 868px，所以 900px 以下就收成漢堡選單。
   （不能跟版面共用 768px 斷點，否則 768–868px 之間導覽文字會在按鈕內折行。） */
@media(max-width:900px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .nav-links.open{display:flex;flex-direction:column;position:fixed;top:76px;left:0;right:0;
    background:#fff;padding:12px 18px 18px;border-bottom:1px solid var(--line);gap:0;z-index:999}
  .nav-links.open>li>a{padding:12px 6px;border-bottom:1px solid var(--line)}
  .nav-cta-btn{margin:12px 0 0;text-align:center}
  .nav-dd-menu{position:static;padding:0 0 6px 14px}
  .nav-dd-menu a{border:0;background:none;min-width:0;padding:9px 0}
  .nav-dd-menu>a:first-child{border-top:0}
  .nav-dd.open .nav-dd-menu{display:block}
}

/* 2026-09 i18n: language toggle in the navbar */
.nav-lang{margin-left:4px}
.nav-lang>a{display:block;padding:6px 10px;font-size:12.5px;font-weight:600;
  letter-spacing:.04em;color:var(--tl);border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;transition:var(--tr);white-space:nowrap}
.nav-lang>a:hover{color:var(--g700);border-color:var(--g700)}
@media(max-width:980px){.nav-lang{margin:6px 0 0}.nav-lang>a{display:inline-block}}