/* ============================================================
   AIS 風光網事 — 官方網站樣式
   設計系統:精品黑 × 拉絲銀 × 暖紙白(Golden Design System)
   色彩只在 :root tokens 定義,元件一律引用變數。
   ============================================================ */

:root {
  /* -- 基礎色 -- */
  --ink:        #0A0C10;   /* 冷黑:深章節底 */
  --ink-2:      #101319;   /* 冷黑提階:卡片 */
  --ink-3:      #171B23;   /* 冷黑再提階:hover */
  --paper:      #F3EEE3;   /* 暖紙白:亮章節底 */
  --paper-2:    #ECE5D6;   /* 紙白深一階:亮章節卡片 */
  --white:      #FFFFFF;

  /* -- 文字 -- */
  --t-dark-hi:  #F2F1EC;   /* 深底主文字 */
  --t-dark-md:  #C9CFD6;   /* 深底內文 */
  --t-dark-lo:  #8C939B;   /* 深底次要(僅大字/圖說) */
  --t-light-hi: #14161B;   /* 亮底主文字 */
  --t-light-md: #3E3B33;   /* 亮底內文 */
  --t-light-lo: #5F5B4F;   /* 亮底次要 */

  /* -- 金屬銀 -- */
  --silver-hi:  #DEDFE0;
  --silver:     #A4A5A6;
  --silver-lo:  #6B6D6E;
  --grad-silver: linear-gradient(120deg, var(--silver-hi) 0%, var(--silver) 40%, var(--silver-lo) 62%, var(--silver) 82%, var(--silver-hi) 100%);

  /* -- 線 -- */
  --line-dark:  rgba(255,255,255,.14);
  --line-light: rgba(10,12,16,.16);

  /* -- 形 -- */
  --r-lg: 26px;
  --r-md: 16px;
  --r-pill: 999px;

  /* -- 動 -- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .9s;

  /* -- 字 -- */
  /* 字型堆疊由 assets/fonts/fonts.css 定義(含分語系覆寫);此處為同值備援 */
  --font-display: "Microsoft JhengHei", "微軟正黑體", "Microsoft JhengHei UI", "PingFang TC", "Heiti TC", "Noto Sans TC", "Segoe UI", Arial, sans-serif;
  --font-sans: "Microsoft JhengHei", "微軟正黑體", "Microsoft JhengHei UI", "PingFang TC", "Heiti TC", "Noto Sans TC", "Segoe UI", Arial, sans-serif;
  --font-ghost: Arial, "Helvetica Neue", "Segoe UI", sans-serif;

  /* -- 版 -- */
  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1240px;

  color-scheme: light dark;
}

/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  background: var(--ink);
  color: var(--t-dark-md);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--silver); color: var(--ink); }

.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 300;
  background: var(--white); color: var(--t-light-hi);
  padding: 10px 18px; border-radius: var(--r-pill);
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ============ 章節主題 ============ */
.sec { position: relative; padding: clamp(84px, 12vw, 160px) 0; }
.sec-dark  { background: var(--ink);   color: var(--t-dark-md); }
.sec-light { background: var(--paper); color: var(--t-light-md); }
.sec-white { background: var(--white); color: var(--t-light-md); }
.sec-flush { padding: 0; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }

/* ============ 字級系統 ============ */
.kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 12px; letter-spacing: .34em; text-transform: uppercase;
  font-weight: 600; margin-bottom: clamp(18px, 3vw, 30px);
}
.sec-dark .kicker  { color: var(--t-dark-lo); }
.sec-light .kicker, .sec-white .kicker { color: var(--t-light-lo); }
.kicker::before {
  content: ""; width: 44px; height: 1px;
  background: linear-gradient(90deg, var(--silver-hi), var(--silver-lo));
}

.sec-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.32;
  letter-spacing: .01em;
  margin-bottom: clamp(16px, 2.6vw, 26px);
}
.sec-dark .sec-title  { color: var(--t-dark-hi); }
.sec-light .sec-title, .sec-white .sec-title { color: var(--t-light-hi); }

.sec-desc { max-width: 620px; font-size: clamp(15px, 1.4vw, 17px); }

.sec-head { margin-bottom: clamp(40px, 6vw, 72px); }
.sec-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}

/* ============ 按鈕 ============ */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 34px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 600; letter-spacing: .08em;
  transition: transform .5s var(--ease), background .35s, color .35s, border-color .35s;
  will-change: transform;
}
.btn .arr { transition: transform .45s var(--ease); }
.btn:hover .arr { transform: translateX(5px); }

.btn-solid-light { background: var(--white); color: var(--t-light-hi); }
.btn-solid-light:hover { background: var(--silver-hi); }
.btn-solid-dark { background: var(--ink); color: var(--t-dark-hi); }
.btn-solid-dark:hover { background: var(--ink-3); }
.btn-ghost-dark { border: 1px solid var(--line-dark); color: var(--t-dark-hi); }
.btn-ghost-dark:hover { border-color: var(--silver); }
.btn-ghost-light { border: 1px solid var(--line-light); color: var(--t-light-hi); }
.btn-ghost-light:hover { border-color: var(--t-light-hi); }

/* ============ 膠囊導覽 ============ */
.pillnav {
  position: fixed; top: 18px; left: 50%; z-index: 200;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  padding: 8px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transition: background .5s, border-color .5s, box-shadow .5s, transform .6s var(--ease);
  border: 1px solid transparent;
  /* 固定定位 + left:50% 時,瀏覽器算出的可用寬只有「半個視窗」,
     內容放不下就會壓縮 flex 子項——logo 最容易被壓成 0 寬(1080px 附近就會發生)。
     用 max-content 讓寬度由內容決定,再由 max-width 兜住不溢出。 */
  width: max-content;
  max-width: calc(100vw - 24px);
}
.pillnav[data-skin="dark"] {
  background: rgba(12, 14, 19, .58);
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.pillnav[data-skin="light"] {
  background: rgba(255,255,255,.62);
  border-color: rgba(10,12,16,.08);
  box-shadow: 0 12px 40px rgba(10,12,16,.10);
}
.pillnav.is-hidden { transform: translate(-50%, -130%); }

.pillnav .brand {
  display: flex; align-items: center;
  padding: 6px 16px 6px 10px; border-radius: var(--r-pill);
}
.pillnav .brand img { height: 26px; width: auto; }
.pillnav .brand .logo-w { display: none; }
.pillnav[data-skin="dark"] .brand .logo-w { display: block; }
.pillnav[data-skin="dark"] .brand .logo-b { display: none; }

.pillnav .links { display: flex; align-items: center; }
.pillnav .links a {
  padding: 10px 16px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500; letter-spacing: .06em;
  transition: background .3s, color .3s; white-space: nowrap;
}
.pillnav[data-skin="dark"]  { color: var(--t-dark-hi); }
.pillnav[data-skin="light"] { color: var(--t-light-hi); }
.pillnav[data-skin="dark"] .links a:hover,
.pillnav[data-skin="dark"] .links a.is-active { background: rgba(255,255,255,.10); }
.pillnav[data-skin="light"] .links a:hover,
.pillnav[data-skin="light"] .links a.is-active { background: rgba(10,12,16,.08); }

.pillnav .cta {
  margin-left: 4px; padding: 11px 22px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; letter-spacing: .06em; white-space: nowrap;
  transition: background .3s, color .3s;
}
.pillnav[data-skin="dark"] .cta  { background: var(--white); color: var(--t-light-hi); }
.pillnav[data-skin="dark"] .cta:hover { background: var(--silver-hi); }
.pillnav[data-skin="light"] .cta { background: var(--ink); color: var(--t-dark-hi); }
.pillnav[data-skin="light"] .cta:hover { background: var(--ink-3); }

/* 語言切換 */
.lang { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 600; letter-spacing: .04em;
  transition: background .3s; white-space: nowrap;
}
.lang-btn .globe { width: 16px; height: 16px; flex: 0 0 auto; opacity: .85; }
.pillnav[data-skin="dark"] .lang-btn:hover  { background: rgba(255,255,255,.10); }
.pillnav[data-skin="light"] .lang-btn:hover { background: rgba(10,12,16,.08); }
.lang-btn .chev { transition: transform .3s var(--ease); font-size: 9px; }
.lang.is-open .lang-btn .chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 12px); right: 0; min-width: 178px;
  padding: 8px; border-radius: var(--r-md);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .3s, transform .3s var(--ease), visibility .3s;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.pillnav[data-skin="dark"] .lang-menu {
  background: rgba(14, 16, 22, .92); border: 1px solid rgba(255,255,255,.1);
}
.pillnav[data-skin="light"] .lang-menu {
  background: rgba(255,255,255,.94); border: 1px solid rgba(10,12,16,.08);
}
.lang.is-open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 14px; border-radius: 10px; font-size: 14px;
  transition: background .25s;
}
.pillnav[data-skin="dark"] .lang-menu a:hover  { background: rgba(255,255,255,.09); }
.pillnav[data-skin="light"] .lang-menu a:hover { background: rgba(10,12,16,.07); }
/* 目前語言:比照 Google 的做法用高亮標示,而不是變淡到看不見 */
.lang-menu a.is-current { pointer-events: none; font-weight: 700; }
.pillnav[data-skin="dark"] .lang-menu a.is-current { background: rgba(255,255,255,.13); color: var(--t-dark-hi); }
.pillnav[data-skin="light"] .lang-menu a.is-current { background: rgba(10,12,16,.10); color: var(--t-light-hi); }
.lang-menu a.is-current::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--silver-hi); flex: 0 0 auto;
}

/* 漢堡(行動版) */
.burger { display: none; padding: 10px 14px; border-radius: var(--r-pill); }
.burger span {
  display: block; width: 20px; height: 2px; margin: 4px 0;
  background: currentColor; transition: transform .4s var(--ease), opacity .3s;
}
body.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 行動版全幕選單 */
.mnav {
  position: fixed; inset: 0; z-index: 190;
  background: var(--ink);
  display: flex; flex-direction: column; justify-content: center;
  padding: 90px var(--gutter) 40px;
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s;
}
body.menu-open .mnav { opacity: 1; visibility: visible; }
.mnav a.mnav-link {
  font-family: var(--font-display); font-size: clamp(30px, 8vw, 44px);
  color: var(--t-dark-hi); padding: 10px 0; line-height: 1.3;
  display: flex; align-items: baseline; gap: 16px;
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
body.menu-open .mnav a.mnav-link { opacity: 1; transform: translateY(0); }
.mnav a.mnav-link .no { font-size: 12px; color: var(--t-dark-lo); letter-spacing: .2em; font-family: var(--font-sans); }
.mnav .mnav-langs { display: flex; gap: 10px; margin-top: 34px; flex-wrap: wrap; }
.mnav .mnav-langs a {
  padding: 9px 18px; border: 1px solid var(--line-dark); border-radius: var(--r-pill);
  font-size: 13px; letter-spacing: .1em; color: var(--t-dark-md);
}
.mnav .mnav-langs a.is-current { background: var(--white); color: var(--t-light-hi); border-color: var(--white); }

/* ============ Hero ============ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden; background: var(--ink); color: var(--t-dark-md);
}
.hero-media { position: absolute; inset: 0; }
.hero-media picture { position: absolute; inset: 0; display: block; }
.hero-media img, .hero-media canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,12,16,.42) 0%, rgba(10,12,16,.06) 34%, rgba(10,12,16,.62) 78%, var(--ink) 100%);
}
/* 子頁 hero 的漂浮塵埃層(壓在文字之下、氛圍照之上) */
.hero-dust {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hero-ghost {
  position: absolute; left: 50%; bottom: -.14em; transform: translate(-50%, var(--py, 0px));
  font-family: var(--font-ghost); font-weight: 800;
  font-size: clamp(90px, 19vw, 300px);
  letter-spacing: .02em; line-height: 1; white-space: nowrap;
  color: rgba(255,255,255,.05);
  pointer-events: none; user-select: none; z-index: 1;
}
.hero-inner {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--maxw); margin: 0 auto;
  padding: 140px var(--gutter) clamp(110px, 16vh, 170px);
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 12px; letter-spacing: .4em; text-transform: uppercase;
  color: var(--silver-hi); font-weight: 600; margin-bottom: 26px;
}
.hero-kicker::before { content: ""; width: 44px; height: 1px; background: var(--grad-silver); }
.hero-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(38px, 6.6vw, 84px); line-height: 1.22;
  letter-spacing: .005em; color: var(--t-dark-hi);
  margin-bottom: clamp(18px, 3vw, 30px);
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span { display: inline-block; }
/* 680px 是量測結果:六個 hero 副標中最長的指定首行(認證頁)需 657px */
.hero-sub { max-width: 680px; font-size: clamp(15px, 1.5vw, 17.5px); margin-bottom: clamp(28px, 4vw, 44px); }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-scroll {
  position: absolute; z-index: 2; right: var(--gutter); bottom: 34px;
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--t-dark-lo);
}
.hero-scroll .bar { width: 1px; height: 44px; background: var(--line-dark); position: relative; overflow: hidden; }
.hero-scroll .bar::after {
  content: ""; position: absolute; left: 0; top: -50%; width: 100%; height: 50%;
  background: var(--silver-hi); animation: scrolldrip 2.2s var(--ease) infinite;
}
@keyframes scrolldrip { 0% { top: -50%; } 100% { top: 110%; } }

/* 子頁 hero(較矮) */
.hero-sub-page { min-height: 72svh; }

/* ============ 統計數字 ============ */
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
.stat { border-top: 1px solid var(--line-dark); padding-top: 26px; }
.sec-light .stat, .sec-white .stat { border-top-color: var(--line-light); }
.stat-num {
  font-family: var(--font-ghost); font-weight: 700;
  font-size: clamp(46px, 6vw, 84px); line-height: 1; letter-spacing: -.01em;
  /* 常駐流動的拉絲銀:用水平漸層(首尾同為亮銀)才能無縫循環,
     斜角漸層平移到磁磚接縫會出現斷線。 */
  background-image: linear-gradient(90deg,
    var(--silver-hi) 0%, var(--silver) 11%, var(--silver-lo) 23%,
    var(--silver) 36%, var(--silver-hi) 50%,
    var(--silver) 64%, var(--silver-lo) 77%, var(--silver) 89%, var(--silver-hi) 100%);
  background-size: 200% 100%;
  animation: silverflow 7s linear infinite;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: inline-flex; align-items: baseline; gap: 6px;
}
@keyframes silverflow { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
/* 捲離視口時暫停,避免整頁一直重繪 */
.stat-num.is-paused { animation-play-state: paused; }
.stat-num .unit { font-size: .32em; font-weight: 600; letter-spacing: .05em; }
.stat-label { margin-top: 14px; font-size: 16px; font-weight: 600; color: var(--t-dark-hi); }
.sec-light .stat-label { color: var(--t-light-hi); }
.stat-note { margin-top: 4px; font-size: 12.5px; letter-spacing: .05em; color: var(--t-dark-lo); }
.sec-light .stat-note { color: var(--t-light-lo); }

/* ============ 逐字點亮宣言 ============ */
.manifesto {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 2.9vw, 35px); line-height: 1.8;
  letter-spacing: .01em; max-width: 980px;
}
.manifesto .w { color: rgba(10,12,16,.16); transition: color .5s; }
.sec-dark .manifesto .w { color: rgba(255,255,255,.14); }
.manifesto .w.lit { color: var(--t-light-hi); }
.sec-dark .manifesto .w.lit { color: var(--t-dark-hi); }

/* ============ 卡片 ============ */
.cards-4 {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 24px);
}
.card {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--ink-2); color: var(--t-dark-md);
  display: flex; flex-direction: column;
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.card-media { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease); filter: saturate(.7) contrast(1.04);
}
.card:hover .card-media img { transform: scale(1.06); }
.card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(10,12,16,.66) 100%);
}
.card-no {
  position: absolute; top: 18px; left: 20px; z-index: 2;
  font-family: var(--font-ghost); font-weight: 700; font-size: 13px;
  letter-spacing: .22em; color: var(--silver-hi);
}
.card-body { padding: 22px 24px 26px; }
.card-title { font-size: 19px; font-weight: 700; color: var(--t-dark-hi); margin-bottom: 8px; }
.card-desc { font-size: 14px; line-height: 1.7; color: var(--t-dark-lo); }

/* 特色編號列表(產品頁) */
.featlist { border-top: 1px solid var(--line-light); }
.sec-dark .featlist { border-top-color: var(--line-dark); }
.feat {
  display: grid; grid-template-columns: 90px 1fr 2fr; gap: 24px; align-items: baseline;
  padding: clamp(22px, 3vw, 34px) 0;
  border-bottom: 1px solid var(--line-light);
  transition: background .4s, padding-left .5s var(--ease);
}
.sec-dark .feat { border-bottom-color: var(--line-dark); }
.feat:hover { padding-left: 14px; }
.feat-no {
  font-family: var(--font-ghost); font-weight: 700; font-size: 15px;
  letter-spacing: .18em; color: var(--silver-lo);
}
.feat-title { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 27px); font-weight: 700; color: var(--t-light-hi); }
.sec-dark .feat-title { color: var(--t-dark-hi); }
.feat-desc { font-size: 15px; color: var(--t-light-md); }
.sec-dark .feat-desc { color: var(--t-dark-md); }

/* ============ 圖文分欄 ============ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
.split-media { border-radius: var(--r-lg); overflow: hidden; position: relative; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-media.tall { aspect-ratio: 3/4; }
.split-media.wide { aspect-ratio: 4/3; }

/* ============ PM2.5 實驗室 ============ */
.lab-shell {
  position: relative;
  background: transparent; border: 0; border-radius: 0;
}
.lab-canvas-wrap { position: relative; aspect-ratio: 16/8.2; min-height: 320px; }
.lab-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lab-ui {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 0 0; border-top: 0; flex-wrap: wrap;
}
.lab-toggle {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 22px; border-radius: var(--r-pill);
  border: 1px solid var(--line-dark); color: var(--t-dark-hi);
  font-weight: 600; font-size: 14px; letter-spacing: .06em;
  transition: background .35s, border-color .35s;
}
.lab-toggle .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--silver-lo); transition: background .35s, box-shadow .35s; }
.lab-toggle[aria-pressed="true"] { border-color: var(--silver); background: rgba(255,255,255,.06); }
.lab-toggle[aria-pressed="true"] .dot { background: var(--silver-hi); box-shadow: 0 0 12px rgba(222,223,224,.8); }
.lab-counters { display: flex; gap: 34px; }
.lab-counter { text-align: right; }
.lab-counter .v {
  font-family: var(--font-ghost); font-weight: 700; font-size: 26px; color: var(--t-dark-hi);
  font-variant-numeric: tabular-nums;
}
.lab-counter .k { font-size: 11px; letter-spacing: .22em; color: var(--t-dark-lo); text-transform: uppercase; }
/* 模擬阻隔率:浮在畫布右側的空白區,比照統計數字的拉絲銀與流動光澤 */
.lab-rate-box {
  /* 錨在 .lab-shell(畫布 + 下方工具列),故 top 取 38% 才落在畫布垂直中偏上 */
  position: absolute; right: 3%; top: 38%;
  transform: translateY(-50%);
  text-align: right; max-width: 42%;
  pointer-events: none; z-index: 2;
}
.lab-rate-box .k {
  font-size: 12px; letter-spacing: .22em; color: var(--t-dark-lo);
  text-transform: uppercase; margin-top: 8px;
}
.lab-rate-box .n {
  margin-top: 6px; font-size: 11px; line-height: 1.6; letter-spacing: .03em;
  color: var(--t-dark-lo); opacity: .75; margin-left: auto; max-width: 260px;
}
.lab-rate-box .v.lab-rate {
  font-family: var(--font-ghost); font-weight: 700;
  font-size: clamp(46px, 6.4vw, 96px); line-height: 1; letter-spacing: -.015em;
  background-image: linear-gradient(90deg,
    var(--silver-hi) 0%, var(--silver) 11%, var(--silver-lo) 23%,
    var(--silver) 36%, var(--silver-hi) 50%,
    var(--silver) 64%, var(--silver-lo) 77%, var(--silver) 89%, var(--silver-hi) 100%);
  background-size: 200% 100%;
  animation: silverflow 7s linear infinite;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: inline-flex; align-items: baseline; gap: 4px;
  font-variant-numeric: tabular-nums;
}
.lab-rate-box .v.lab-rate .unit { font-size: .34em; font-weight: 600; letter-spacing: .05em; }
.lab-rate-box .v.lab-rate.is-paused { animation-play-state: paused; }
/* 窄螢幕:畫布沒有多餘空白,改回文流,落在畫布與開關列之間 */
@media (max-width: 760px) {
  .lab-rate-box {
    position: static; transform: none; max-width: none;
    margin-top: 22px; text-align: left;
  }
  .lab-rate-box .n { margin-left: 0; }
  .lab-counters { gap: 20px; }
}

/* ============ 橫向案例走廊 ============ */
.rail-wrap { overflow: hidden; padding: 6px 0 26px; }
.rail { overflow: hidden; }
.rail-track {
  display: flex; width: max-content;
  animation: railmarquee 46s linear infinite;
  will-change: transform;
}
.rail-wrap:hover .rail-track { animation-play-state: paused; }
/* 位移量必須剛好等於「一份」的寬度。間距用 margin-right 而不是 flex gap:
   gap 只出現在項目之間(12 項只有 11 個間隔),translateX(-50%) 會對不齊而逐圈飄移;
   每項都帶 margin-right 才讓兩份等寬。 */
@keyframes railmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.rail-item {
  flex: 0 0 clamp(240px, 30vw, 380px);
  margin-right: clamp(14px, 2vw, 26px);
  border-radius: var(--r-lg); overflow: hidden; position: relative;
  aspect-ratio: 4/5; background: var(--ink-2);
}
/* 減少動態:停止跑馬燈,改回可手動橫向捲動,仍能瀏覽 */
@media (prefers-reduced-motion: reduce) {
  .rail { overflow-x: auto; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail-track { animation: none; }
}
.rail-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease); filter: saturate(.75);
}
.rail-item:hover img { transform: scale(1.05); }
.rail-item .tag {
  position: absolute; left: 18px; bottom: 16px; z-index: 2;
  color: var(--t-dark-hi); font-size: 14px; font-weight: 600; letter-spacing: .04em;
  display: flex; flex-direction: column; gap: 2px;
}
.rail-item .tag .no { font-size: 11px; letter-spacing: .26em; color: var(--silver-hi); font-family: var(--font-ghost); font-weight: 700; }
.rail-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(10,12,16,.72) 100%);
}

/* ============ 案例網格 ============ */
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.case-tile {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 1/1; background: var(--ink-2); display: block;
}
.case-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), filter .8s; filter: saturate(.72);
}
.case-tile:hover img { transform: scale(1.06); filter: saturate(1); }
.case-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,12,16,.78) 100%);
  transition: opacity .6s;
}
.case-tile .tag {
  position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2;
  color: var(--t-dark-hi);
}
.case-tile .tag .no { font-size: 11px; letter-spacing: .26em; color: var(--silver-hi); font-family: var(--font-ghost); font-weight: 700; display: block; margin-bottom: 4px; }
.case-tile .tag .name { font-size: 17px; font-weight: 600; }

/* 案例詳頁 */
.case-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 26px); }
.case-gallery figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--ink-2); }
.case-gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; transition: transform 1s var(--ease); cursor: zoom-in; }
.case-gallery figure:hover img { transform: scale(1.04); }
.case-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: clamp(40px, 6vw, 64px); flex-wrap: wrap; }

/* ============ 燈箱 ============ */
.lightbox {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(8, 9, 12, .94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
  padding: clamp(16px, 4vw, 60px);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: var(--r-md);
}
.lightbox .lb-close, .lightbox .lb-prev, .lightbox .lb-next {
  position: absolute; z-index: 2; color: var(--t-dark-hi);
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.07); border: 1px solid var(--line-dark);
  transition: background .3s; font-size: 18px;
}
.lightbox .lb-close:hover, .lightbox .lb-prev:hover, .lightbox .lb-next:hover { background: rgba(255,255,255,.16); }
.lightbox .lb-close { top: 22px; right: 22px; }
.lightbox .lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-count {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  font-size: 12px; letter-spacing: .3em; color: var(--t-dark-lo); font-variant-numeric: tabular-nums;
}

/* ============ 產品形式卡 ============ */
.types-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.6vw, 34px); }
.type-card {
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--ink-2); border: 1px solid var(--line-dark);
  display: grid; grid-template-rows: auto 1fr;
}
.type-card .media {
  aspect-ratio: 16/11; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 100% at 50% 0%, #1A1E26 0%, var(--ink-2) 70%);
  padding: 34px;
}
.type-card .media img { max-height: 100%; width: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.5)); }
.type-card .body { padding: 28px 26px 34px; }   /* 左右收窄,讓平紗說明容得下單行 */
.type-card .t-en { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--silver); font-weight: 700; }
.type-card .t-name { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--t-dark-hi); margin: 8px 0 12px; }
.type-card .t-desc { font-size: 15px; color: var(--t-dark-md); margin-bottom: 20px; }
.type-card .t-spec { display: grid; gap: 8px; border-top: 1px solid var(--line-dark); padding-top: 18px; }
.type-card .t-spec .row { display: grid; grid-template-columns: 110px 1fr; font-size: 13.5px; }
.type-card .t-spec .k { color: var(--t-dark-lo); letter-spacing: .08em; }
.type-card .t-spec .v { color: var(--t-dark-md); }

/* ============ 六色鋁框切換器 ============ */
.colorizer { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.colorizer-stage {
  position: relative;
  /* 不要方框:底改成四邊自然淡出的柔光,保留立體感但沒有邊界 */
  background: radial-gradient(58% 48% at 50% 46%, rgba(255,255,255,.055), rgba(255,255,255,0) 72%);
  border: 0; border-radius: 0;
  aspect-ratio: 4/4.4; display: flex; align-items: center; justify-content: center;
}
.colorizer-stage .frames { position: relative; width: 100%; height: 84%; }
.colorizer-stage .frames img {
  position: absolute; top: 50%; left: 50%;
  height: 100%; width: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 34px 44px rgba(0,0,0,.55));
  opacity: 0; transition: opacity .5s var(--ease);
}
.colorizer-stage .frames img.is-on { opacity: 1; }
.colorizer-stage .stage-label {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  font-size: 12px; letter-spacing: .24em; color: var(--t-dark-lo); white-space: nowrap;
}
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.swatch {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  padding: 14px; border-radius: var(--r-md);
  border: 1px solid var(--line-dark);
  transition: border-color .35s, background .35s;
  text-align: left;
}
.swatch .chip {
  width: 100%; height: 52px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: var(--chip);
}
.swatch .s-name { font-size: 13.5px; font-weight: 600; color: var(--t-dark-hi); }
.swatch .s-en { font-size: 10.5px; letter-spacing: .14em; color: var(--t-dark-lo); text-transform: uppercase; }
.swatch[aria-pressed="true"] { border-color: var(--silver-hi); background: rgba(255,255,255,.05); }

/* ============ 認證 ============ */
.cert-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.6vw, 34px); }
.cert-card {
  border-radius: var(--r-lg); background: var(--white);
  border: 1px solid var(--line-light);
  padding: clamp(28px, 3.4vw, 44px);
  display: grid; grid-template-columns: 1fr auto; gap: 20px;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.cert-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(10,12,16,.12); }
.cert-card .c-org { font-size: 12px; letter-spacing: .18em; color: var(--t-light-lo); font-weight: 700; }
.cert-card .c-org-en { font-size: 10.5px; letter-spacing: .1em; color: var(--t-light-lo); }
.cert-card .c-value {
  font-family: var(--font-ghost); font-weight: 700; font-size: clamp(38px, 4.4vw, 58px); line-height: 1.05;
  background: linear-gradient(120deg, #5A5C5E, #1E2126 55%, #5A5C5E);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin: 14px 0 4px;
}
.cert-card .c-title { font-size: 19px; font-weight: 700; color: var(--t-light-hi); margin-bottom: 12px; }
.cert-card .c-desc { font-size: 14.5px; color: var(--t-light-md); }
.cert-medal {
  align-self: start;
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--grad-silver); position: relative; flex: 0 0 auto;
  box-shadow: inset 0 2px 6px rgba(255,255,255,.7), inset 0 -3px 8px rgba(0,0,0,.28), 0 10px 24px rgba(10,12,16,.18);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cert-medal::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
  transform: skewX(-18deg);
  transition: left 0s;
}
.cert-card:hover .cert-medal::after { left: 130%; transition: left .9s var(--ease); }
.cert-medal svg { width: 34px; height: 34px; }

.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.report-tile {
  border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-light);
  background: var(--white); cursor: zoom-in; position: relative;
}
.report-tile img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; object-position: top; transition: transform .8s var(--ease); }  /* height:auto:<img> 帶 width/height 屬性時仍以 aspect-ratio 為準 */
.report-tile:hover img { transform: scale(1.03); }

/* ============ 據點卡 ============ */
/* 三欄時每張卡的可用內寬必須容得下最長地址(實測 13.5px 下需 288px),
   否則會斷在「30樓／之B5」。以下 gap/padding/字級是回推出來的組合。 */
.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
/* 1320 以下三欄already 擠不下,提早改兩欄 */
@media (max-width: 1320px) {
  .loc-grid { grid-template-columns: repeat(2, 1fr); }
}
.loc-card {
  border-radius: var(--r-lg); padding: clamp(24px, 2.4vw, 30px);
  background: var(--ink-2); border: 1px solid var(--line-dark);
  display: flex; flex-direction: column; gap: 10px; min-height: 240px;
  transition: transform .6s var(--ease), border-color .4s;
}
.loc-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.28); }
.loc-card .l-no { font-family: var(--font-ghost); font-weight: 700; font-size: 12px; letter-spacing: .26em; color: var(--silver); }
.loc-card .l-name { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--t-dark-hi); }
.loc-card .l-sub { font-size: 13px; color: var(--t-dark-lo); letter-spacing: .05em; }
.loc-card .l-addr { font-size: 13.5px; color: var(--t-dark-md); flex: 1; }
.loc-card .l-map {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: .08em; color: var(--silver-hi); font-weight: 600;
}
.loc-card .l-map .arr { transition: transform .4s var(--ease); }
.loc-card:hover .l-map .arr { transform: translateX(5px); }

/* ============ 品牌系列 ============ */
.series-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.series-card {
  border-radius: var(--r-lg); padding: clamp(30px, 4vw, 48px);
  border: 1px solid var(--line-light); background: var(--white);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.series-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(10,12,16,.10); }
.series-card .s-code {
  font-family: var(--font-ghost); font-weight: 800; font-size: 34px; letter-spacing: .04em;
  background: linear-gradient(120deg, #45484C, #101319 60%, #45484C);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.series-card .s-name { font-size: 19px; font-weight: 700; color: var(--t-light-hi); }
.series-card .s-en { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--t-light-lo); }
.series-card .s-desc { font-size: 14.5px; color: var(--t-light-md); flex: 1; }
.series-card .s-link { font-size: 13.5px; font-weight: 600; letter-spacing: .06em; color: var(--t-light-hi); display: inline-flex; gap: 8px; align-items: center; }

/* ============ 估價 ============ */
/* align-items 用預設的 stretch,兩張卡等高;
   左卡會因形式不同(平紗3條/捲紗5條說明)而變高,右卡跟著長,始終齊平 */
.quote-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(30px, 5vw, 80px); }
.calc, .qform {
  border-radius: var(--r-lg); background: var(--white);
  border: 1px solid var(--line-light); padding: clamp(26px, 3.4vw, 44px);
}
.f-label { display: block; font-size: 13px; letter-spacing: .12em; font-weight: 700; color: var(--t-light-lo); margin-bottom: 10px; text-transform: uppercase; }
/* 形式選擇:左側控制項 + 右側產品預覽,選哪一種就看到哪一種 */
.calc-type {
  /* 靠左並排、垂直置中:控制項不撐開,預覽圖緊接其後而不是被推到最右 */
  display: flex; align-items: center; justify-content: flex-start;
  gap: clamp(22px, 3.5vw, 48px); margin-bottom: 26px;
}
.calc-type-ctrl { flex: 0 0 auto; min-width: 0; }
.calc-type-preview {
  position: relative; flex: 0 0 auto;
  width: clamp(96px, 15vw, 132px); aspect-ratio: 320/551;
  /* 推向右側但留邊距(不貼齊卡片右緣),再微幅上提 */
  margin-left: auto; margin-right: clamp(6px, 3vw, 44px);
  transform: translateY(-10px);
}
.calc-type-preview img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  opacity: 0; transition: opacity .45s var(--ease);
  filter: drop-shadow(0 12px 18px rgba(10,12,16,.16));
}
.calc-type-preview img.is-on { opacity: 1; }
@media (max-width: 480px) { .calc-type-preview { display: none; } }

.seg { display: inline-flex; border: 1px solid var(--line-light); border-radius: var(--r-pill); padding: 4px; gap: 4px; margin-bottom: 0; }
.seg button {
  padding: 10px 26px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 600;
  color: var(--t-light-md); transition: background .3s, color .3s;
}
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--t-dark-hi); }
.win-rows { display: grid; gap: 14px; margin-bottom: 18px; }
.win-row { display: grid; grid-template-columns: 1fr 1fr .7fr auto; gap: 10px; align-items: center; }
.win-row .fld { position: relative; }
.win-row input {
  width: 100%; padding: 13px 44px 13px 16px; border-radius: 12px;
  border: 1px solid var(--line-light); background: var(--paper);
  color: var(--t-light-hi); font-size: 15px; font-variant-numeric: tabular-nums;
  transition: border-color .3s;
}
.win-row input:focus { outline: none; border-color: var(--t-light-hi); }
.win-row .fld .u {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 11.5px; color: var(--t-light-lo); pointer-events: none;
}
.win-row .rm { color: var(--t-light-lo); font-size: 13px; padding: 8px; border-radius: 8px; transition: color .3s; }
.win-row .rm:hover { color: #A03030; }
.calc-add { font-size: 14px; font-weight: 600; color: var(--t-light-hi); letter-spacing: .04em; padding: 8px 0; }
.calc-add:hover { opacity: .7; }
.calc-result {
  margin-top: 24px; border-top: 1px solid var(--line-light); padding-top: 24px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.calc-result .r-label { font-size: 13px; letter-spacing: .12em; color: var(--t-light-lo); font-weight: 700; }
.calc-result .r-cai { font-size: 13px; color: var(--t-light-lo); }
.calc-result .r-range {
  font-family: var(--font-ghost); font-weight: 700; font-size: clamp(28px, 3.4vw, 42px);
  color: var(--t-light-hi); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.calc-note {
  margin-top: 16px; font-size: 12.5px; line-height: 1.8; color: var(--t-light-lo);
  display: none;
}
.calc-note.is-on { display: block; }
.calc-note li { position: relative; padding-left: 14px; }
.calc-note li::before { content: "＊"; position: absolute; left: 0; opacity: .8; }
.calc-warn {
  margin-top: 10px; font-size: 12.5px; font-weight: 600; color: #8A5A17;
  background: #F7EEDC; border: 1px solid #E8D9B8; border-radius: 10px; padding: 10px 14px;
}

.qform .row { margin-bottom: 20px; }
.qform input[type="text"], .qform input[type="tel"], .qform textarea {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--line-light); background: var(--paper);
  color: var(--t-light-hi); font-size: 15px; transition: border-color .3s;
}
.qform input:focus, .qform textarea:focus { outline: none; border-color: var(--t-light-hi); }
.qform textarea { min-height: 110px; resize: vertical; }
.qform .err { display: none; font-size: 12.5px; color: #A03030; margin-top: 6px; }
.qform .row.invalid .err { display: block; }
.qform .row.invalid input { border-color: #C05050; }
.qform .chk { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--t-light-md); }
.qform .chk input { width: 17px; height: 17px; accent-color: var(--ink); }
.qform .actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.step { border-top: 1px solid var(--line-dark); padding-top: 22px; }
.step .no { font-family: var(--font-ghost); font-weight: 700; font-size: 13px; letter-spacing: .24em; color: var(--silver); }
.step .t { font-size: 18px; font-weight: 700; color: var(--t-dark-hi); margin: 10px 0 6px; }
.step .d { font-size: 14px; color: var(--t-dark-lo); }

/* fallback modal */
.modal {
  position: fixed; inset: 0; z-index: 420; display: flex; align-items: center; justify-content: center;
  background: rgba(8,9,12,.7); padding: 20px;
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal-box {
  background: var(--white); border-radius: var(--r-lg); max-width: 560px; width: 100%;
  padding: clamp(26px, 4vw, 40px); color: var(--t-light-md);
  max-height: 86svh; overflow: auto;
}
.modal-box h3 { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--t-light-hi); margin-bottom: 10px; }
.modal-box pre {
  white-space: pre-wrap; word-break: break-all; background: var(--paper); border-radius: 12px;
  padding: 16px; font-size: 13.5px; line-height: 1.8; font-family: inherit; margin: 16px 0;
}
.modal-box .actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============ CTA 帶 ============ */
.cta-band { text-align: center; }
.cta-band .sec-title { margin-left: auto; margin-right: auto; }
.cta-band .sec-desc { margin: 0 auto clamp(28px, 4vw, 40px); }

/* ============ 頁尾 ============ */
.footer {
  background: var(--ink); color: var(--t-dark-md);
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--silver) 50%, transparent) 1;
  padding: clamp(60px, 9vw, 110px) 0 34px;
}
.footer-grid {
  display: grid;
  /* 據點欄加寬:最長的總公司地址單行需 277px(實測),原本 1.2fr 只給 247px 會斷在「30／樓之B5」 */
  grid-template-columns: 1.2fr 0.85fr 0.9fr 1.5fr;
  gap: clamp(30px, 4vw, 60px); margin-bottom: clamp(50px, 7vw, 80px);
}
/* 1080 以下四欄會把據點欄壓到放不下地址,提早改兩欄 */
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
.footer .f-brand img { height: 54px; width: auto; margin-bottom: 20px; }
.footer .f-tagline { font-size: 14.5px; color: var(--t-dark-lo); max-width: 260px; }
.footer h4 { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--t-dark-lo); margin-bottom: 18px; font-weight: 700; }
.footer .f-col a, .footer .f-col li { display: block; padding: 5px 0; font-size: 14.5px; color: var(--t-dark-md); }
.footer .f-col a:hover { color: var(--t-dark-hi); }
.footer .f-loc { margin-bottom: 14px; }
.footer .f-loc .n { font-size: 13.5px; font-weight: 700; color: var(--t-dark-hi); }
/* 地址列:點了開 Google 地圖,前面帶地標圖示 */
.footer .f-loc a.a {
  display: flex; align-items: flex-start; gap: 7px; padding: 2px 0;
  font-size: 13px; color: var(--t-dark-lo); transition: color .25s;
}
.footer .f-loc a.a:hover { color: var(--t-dark-hi); }
.footer .f-loc a.a .pin { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 4px; opacity: .75; transition: opacity .25s; }
.footer .f-loc a.a:hover .pin { opacity: 1; }
.footer-ghost {
  font-family: var(--font-ghost); font-weight: 800; text-align: center;
  /* 「AIS SCREEN」實測寬度 = 字級 × 6.98(見 scripts/probes 量測)。
     容器內寬約 92vw(上限 1128px),取 ÷7.4 留約 6% 餘裕給不同平台的字體差異,
     才不會像先前 210px 那樣被 overflow:hidden 切掉尾巴。 */
  font-size: clamp(38px, 12.4vw, 152px); line-height: 1; letter-spacing: .02em;
  color: rgba(255,255,255,.04); user-select: none; pointer-events: none;
  margin-bottom: 26px; white-space: nowrap; overflow: hidden;
}
.footer-base {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--line-dark); padding-top: 24px;
  font-size: 12.5px; color: var(--t-dark-lo);
}
.footer-base .legal { display: flex; gap: 22px; }
.footer-base a:hover { color: var(--t-dark-hi); }

/* ============ Preloader ============ */
.preloader {
  position: fixed; inset: 0; z-index: 500; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .7s var(--ease), visibility .7s;
}
.preloader.done { opacity: 0; visibility: hidden; }
.preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.preloader-inner img {
  width: clamp(130px, 24vw, 220px); height: auto;
  animation: prelogo 1.6s var(--ease) infinite alternate;
}
.preloader-line {
  width: clamp(130px, 24vw, 220px); height: 1px;
  background: rgba(255,255,255,.12); overflow: hidden; position: relative;
}
.preloader-line span {
  position: absolute; inset: 0; transform-origin: left;
  background: var(--grad-silver);
  animation: preline 1.1s var(--ease) forwards;
}
@keyframes prelogo { from { opacity: .55; } to { opacity: 1; } }
@keyframes preline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ============ 進場動效(JS 啟用時才隱藏) ============ */
html.js [data-reveal] {
  opacity: 0; transform: translateY(34px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--rd, 0s);
}
html.js [data-reveal].in { opacity: 1; transform: none; }
html.js [data-reveal="fade"] { transform: none; }
html.js [data-reveal="left"] { transform: translateX(-40px); }
html.js [data-reveal="scale"] { transform: scale(.94); }
html.js [data-reveal].in { transform: none; }

/* 頁面轉場 */
html.js body::after {
  content: ""; position: fixed; inset: 0; z-index: 480; background: var(--ink);
  opacity: 0; pointer-events: none; transition: opacity .45s var(--ease);
}
html.js body.page-exit::after { opacity: 1; pointer-events: all; }

/* 自訂游標(桌機) */
/* 游標微粒場:懸浮微粒被吸向中心後消失,呼應產品的攔截敘事 */
.cursor-field {
  position: fixed; z-index: 598; top: 0; left: 0;
  /* 畫布的 width/height 屬性是像素緩衝(已乘 DPR),這裡固定 CSS 顯示尺寸,否則會被放大 */
  width: 150px; height: 150px;
  pointer-events: none; mix-blend-mode: difference;
  opacity: 0; transition: opacity .4s;
}
.cursor-dot {
  position: fixed; z-index: 600; top: 0; left: 0; width: 8px; height: 8px;
  border-radius: 50%; background: var(--silver-hi); pointer-events: none;
  mix-blend-mode: difference; transition: transform .18s ease-out, opacity .3s;
  opacity: 0;
}
.cursor-ring {
  position: fixed; z-index: 599; top: 0; left: 0; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid rgba(222,223,224,.5); pointer-events: none;
  mix-blend-mode: difference; transition: transform .35s var(--ease), opacity .3s, width .3s, height .3s;
  opacity: 0;
}
@media (pointer: fine) {
  body.has-cursor .cursor-dot, body.has-cursor .cursor-ring { opacity: 1; }
  body.has-cursor .cursor-field { opacity: 1; }
}

/* ============ 響應式 ============ */
@media (max-width: 1080px) {
  .pillnav .links a { padding: 10px 12px; font-size: 13.5px; }
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .cases-grid { grid-template-columns: repeat(2, 1fr); }
  .report-grid { grid-template-columns: repeat(3, 1fr); }
  .loc-grid { grid-template-columns: 1fr; }
  .quote-layout { grid-template-columns: 1fr; }
  .colorizer { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 15px; }
  .pillnav { top: 12px; }
  .pillnav .links, .pillnav .lang, .pillnav .cta { display: none; }
  .burger { display: block; }
  .types-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .series-grid { grid-template-columns: 1fr; }
  .cases-grid { grid-template-columns: 1fr; }
  .case-gallery { grid-template-columns: 1fr; }
  .report-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .feat { grid-template-columns: 54px 1fr; }
  .feat-desc { grid-column: 2; }
  .win-row { grid-template-columns: 1fr 1fr; }
  .win-row .fld-n { grid-column: 1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-scroll { display: none; }
  .lab-canvas-wrap { aspect-ratio: 4/5; }
  .lab-counters { gap: 20px; }
  .stats-grid { gap: 22px; }
}
@media (max-width: 480px) {
  .cards-4 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .swatches { grid-template-columns: repeat(2, 1fr); }
}

/* ============ 減少動態 ============ */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-scroll .bar::after, .preloader .bar-a, .preloader .bar-b, .preloader .bar-c { animation: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============ QA 截圖模式(?qa=1):強制顯示 reveal、固定 hero 高 ============ */
html.qa [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
html.qa .hero { min-height: 860px !important; }
html.qa .hero-sub-page { min-height: 600px !important; }
html.qa .preloader { display: none !important; }
html.qa .manifesto .w { color: inherit !important; }

/* 首頁 hero 的 AIS 字標浮水印(用真的 logo,不是排版文字) */
.hero-mark {
  position: absolute; z-index: 1;
  /* 右緣留 7vw、寬 24vw → 左緣落在 69vw,與照片鋁框(約 62vw)保持距離 */
  right: 7vw;
  top: 75%; bottom: auto;
  width: 24vw; height: auto;
  transform: translateY(calc(-50% + var(--py, 0px)));
  opacity: .05;
  pointer-events: none; user-select: none;
}
@media (max-width: 1080px) {
  .hero-mark { right: 6vw; width: 26vw; }
}
/* 手機:按鈕會佔滿寬度,字標改放到按鈕下方 */
@media (max-width: 760px) {
  /* 手機:字標移到主標右側的空白處(原本在按鈕下方,會跟 CTA 擠在一起) */
  .hero-mark { right: 4vw; width: 28vw; top: 57%; }
}

/* ============ 手機:既有缺陷修正 ============ */

/* A1 深色照片上的文字對比:估價頁那張水珠照偏亮,手機裁切後文字正好落在亮部,
   實測白字對比只有 3.02:1(WCAG AA 內文需 4.5)。手機加強壓暗層。 */
@media (max-width: 760px) {
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(10,12,16,.55) 0%, rgba(10,12,16,.30) 30%,
                      rgba(10,12,16,.78) 72%, var(--ink) 100%);
  }
}

/* A2 桌機專用斷行:手機關掉,讓文字依實際寬度自然折 */
@media (max-width: 760px) { br.br-lg { display: none; } }

/* A3 統計數字:480 以下改單欄,兩欄會把「OEKO-TEX」拆成兩截 */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ============ 手機專屬:固定底部動作列 ============ */
.mobile-cta { display: none; }
@media (max-width: 760px) {
  .mobile-cta {
    display: flex; gap: 10px; align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 210;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(10, 12, 16, .82);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--line-dark);
    transform: translateY(110%);
    transition: transform .45s var(--ease);
  }
  /* 捲過首屏才升起,不擋住 hero */
  body.past-hero .mobile-cta { transform: translateY(0); }
  .mobile-cta a {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 48px;                    /* 觸控目標 >=44px */
    border-radius: var(--r-pill);
    font-size: 15px; font-weight: 600; letter-spacing: .04em;
  }
  .mobile-cta .m-call {
    flex: 0 0 auto; padding: 0 16px;
    border: 1px solid var(--line-dark); color: var(--t-dark-hi);
  }
  .mobile-cta .m-call svg { width: 18px; height: 18px; }
  .mobile-cta .m-call span { font-variant-numeric: tabular-nums; }
  .mobile-cta .m-quote {
    flex: 1 1 auto; background: var(--white); color: var(--t-light-hi);
  }
  /* 底部列會蓋住頁尾最後一段,補足空間 */
  .footer { padding-bottom: calc(34px + 68px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  .mobile-cta .m-call span { display: none; }   /* 極窄螢幕只留話筒圖示 */
}

/* ============ 手機專屬:其餘調整 ============ */
/* 觸控提示:桌機有滑鼠說明文字,手機沒有,補一則浮在畫布上的提示 */
.lab-hint { display: none; }
@media (max-width: 760px) {
  .lab-hint {
    /* 放在畫布下方的文流中,不再絕對定位壓在紗窗上 */
    display: block; text-align: center; margin-top: 14px;
    font-size: 13px; letter-spacing: .08em; color: var(--t-dark-lo);
    pointer-events: none;
  }
  /* 案例跑馬燈:手機放慢、卡片加大,不然一閃而過又看不清 */
  .rail-track { animation-duration: 64s; }
  .rail-item { flex-basis: 74vw; }
  /* 六色鋁框:手機一列三色仍可辨,舞台縮短避免佔掉整個畫面 */
  .colorizer-stage { aspect-ratio: 4/3.6; }
  .swatches { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .swatch { padding: 10px; }
  .swatch .chip { height: 40px; }
}

/* ============================================================
   手機閱讀字級與版面舒適度(<=760px)
   原則:內文 16px 起跳、次要資訊不低於 13.5px、
        中文小字不用大字距(4px 字距在 12px 中文上很難讀)。
   ============================================================ */
@media (max-width: 760px) {
  /* -- 內文基準:15 → 16px,行高放寬給中文更好的呼吸 -- */
  body { font-size: 16px; line-height: 1.8; }

  /* -- 主要閱讀文字 -- */
  .hero-sub          { font-size: 16.5px; line-height: 1.78; }
  .sec-desc          { font-size: 16px; }
  .manifesto         { font-size: 21px; line-height: 1.85; }
  .feat-desc         { font-size: 15.5px; }
  .card-desc         { font-size: 15px; line-height: 1.75; }
  .type-card .t-desc { font-size: 15.5px; }
  .cert-card .c-desc { font-size: 15.5px; }
  .series-card .s-desc { font-size: 15.5px; }
  .loc-card .l-addr  { font-size: 15px; }
  .step .d           { font-size: 15px; }

  /* -- 標題:手機上略收,避免一行只放三四個字 -- */
  .card-title        { font-size: 18.5px; }
  .stat-label        { font-size: 17px; }
  .cert-card .c-title{ font-size: 18.5px; }

  /* -- 次要資訊:原本 11–13.5px,手機上太小,一律提到 13.5 以上 -- */
  .stat-note         { font-size: 13.5px; letter-spacing: .02em; }
  .calc-note         { font-size: 13.5px; }
  .lab-rate-box .n   { font-size: 13px; line-height: 1.65; }
  .lab-counter .k    { font-size: 13px; letter-spacing: .1em; }
  .lab-rate-box .k   { font-size: 13px; letter-spacing: .12em; }
  .lab-hint          { font-size: 13px; letter-spacing: .08em; }
  .mnav a.mnav-link .no { font-size: 13px; }
  .footer .f-loc .n  { font-size: 15px; }
  .footer .f-loc a.a { font-size: 14px; padding: 10px 0; }  /* 觸控目標 ≥44px */
  .footer .f-loc a.a .pin { width: 14px; height: 14px; margin-top: 5px; }
  .footer .f-loc      { margin-bottom: 10px; }
  .footer .f-col a   { font-size: 15.5px; padding: 8px 0; }  /* 兼顧觸控目標 */
  .footer .f-tagline { font-size: 15px; }
  .footer-base       { font-size: 13px; }
  .type-card .t-spec .row { font-size: 14.5px; }

  /* -- 小標籤:12px 中文配 .34em 字距很難讀,收到 .16em -- */
  .kicker, .hero-kicker { font-size: 13px; letter-spacing: .16em; }
  .kicker::before, .hero-kicker::before { width: 28px; }

  /* -- 按鈕:字級與觸控高度 -- */
  .btn { font-size: 16px; padding: 15px 30px; letter-spacing: .04em; }

  /* -- 版面:邊界略放寬、區塊間距略收(手機捲動成本高) -- */
  .sec { padding: 68px 0; }
  .container, .container-wide { padding: 0 22px; }
  .sec-head { margin-bottom: 34px; }
}

/* 極窄螢幕再退一階,避免標題擠成三四行 */
@media (max-width: 380px) {
  .hero-title { font-size: 34px; }
  .sec-title  { font-size: 27px; }
  .manifesto  { font-size: 19.5px; }
}

/* ============================================================
   平板閱讀字級(761–1080px)
   問題:標題用 vw 會隨螢幕長大(Hero 52→66px),但內文/標籤是固定值,
        在平板上全部卡在最小值(副標 15、註記 12.5),形成大標題配小內文。
   對策:把固定級距的文字往上提一階,與放大的標題重新對齊比例。
   ============================================================ */
@media (min-width: 761px) and (max-width: 1080px) {
  body { font-size: 17px; line-height: 1.8; }

  /* Hero 高度:平板是直式(820x1180),滿版高度會逼 object-fit:cover 把橫幅照
     放大到 2.7 倍才填滿,只看得到原圖 37% 的寬度,紗窗因此被撐得很大。
     降到約 60svh 後可看到約 60%,主體回到合理比例,也少了一大段空捲。 */
  .hero          { min-height: 62svh; }
  .hero-sub-page { min-height: 50svh; }
  .hero-inner    { padding-top: 120px; padding-bottom: clamp(70px, 10vh, 110px); }

  .hero-sub            { font-size: 17.5px; line-height: 1.75; }
  .sec-desc            { font-size: 17px; }
  .feat-desc           { font-size: 16.5px; }
  .card-desc           { font-size: 15.5px; line-height: 1.75; }
  .type-card .t-desc   { font-size: 16.5px; }
  .cert-card .c-desc   { font-size: 16px; }
  .series-card .s-desc { font-size: 16px; }
  .loc-card .l-addr    { font-size: 15.5px; }
  .step .d             { font-size: 15.5px; }

  .card-title          { font-size: 20px; }
  .cert-card .c-title  { font-size: 20px; }
  .loc-card .l-name    { font-size: 25px; }

  /* 統計區:數字已放大到 48–60px,標籤與註記必須跟上才不失衡 */
  .stat-label          { font-size: 18.5px; }
  .stat-note           { font-size: 14.5px; letter-spacing: .03em; }

  .calc-note           { font-size: 14px; }
  .lab-counter .k      { font-size: 13px; letter-spacing: .12em; }
  .lab-rate-box .k     { font-size: 13px; }
  .lab-rate-box .n     { font-size: 13.5px; }
  .lab-hint            { font-size: 13.5px; }

  .footer .f-col a     { font-size: 16px; padding: 7px 0; }
  .footer .f-loc .n    { font-size: 15px; }
  .footer .f-loc a.a   { font-size: 14.5px; padding: 7px 0; }
  .footer .f-loc a.a .pin { width: 14px; height: 14px; margin-top: 5px; }
  .footer .f-loc       { margin-bottom: 11px; }
  .footer .f-tagline   { font-size: 15.5px; }
  .footer-base         { font-size: 13.5px; }

  /* 小標籤:.34em 字距在中文上太散,平板收到 .2em */
  .kicker, .hero-kicker { font-size: 13px; letter-spacing: .2em; }

  .btn                 { font-size: 16.5px; padding: 16px 34px; }
}

/* 單欄統計數字(<=480px):整列寬度都給一組數字,字級可大幅拉高。
   必須放在手機字級區塊之後,否則同權重會被前面的 .stat-label/.stat-note 蓋掉。 */
@media (max-width: 480px) {
  .stat       { padding-top: 22px; }
  .stat-num   { font-size: 88px; }
  .stat-label { font-size: 22px; margin-top: 16px; }
  .stat-note  { font-size: 15.5px; margin-top: 6px; }
}

/* 平板統計數字(761–1080px):兩欄,每欄約 360px,容得下加倍的字級。
   同樣要放在平板字級區塊之後,否則 .stat-label/.stat-note 會被前面的蓋掉。 */
@media (min-width: 761px) and (max-width: 1080px) {
  .stats-grid { gap: clamp(30px, 4vw, 56px) 40px; }
  .stat       { padding-top: 26px; }
  .stat-num   { font-size: 96px; }
  .stat-label { font-size: 26px; margin-top: 18px; }
  .stat-note  { font-size: 17px; margin-top: 7px; }
}

/* 需求單送出狀態(quote.js) */
.qform .cf-turnstile { margin: 18px 0 4px; min-height: 65px; }
.qstatus { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; }
.qstatus.is-err { color: #B3261E; }
.qstatus.is-busy { opacity: .7; }
.qstatus.is-ok { color: #2E6B3F; font-weight: 600; }
.qform.is-sent .row, .qform.is-sent .chk, .qform.is-sent .actions, .qform.is-sent .cf-turnstile { display: none; }
.modal-reason { font-size: 14.5px; margin: 0 0 10px; opacity: .85; }

/* ============ 常見問題(由 tools/seo/apply_content.py 依 copy.json 產生) ============ */
.faq .faq-list { max-width: 820px; border-top: 1px solid var(--line-light); }
.faq .faq-item { padding: clamp(18px, 2.4vw, 28px) 0; border-bottom: 1px solid var(--line-light); }
.faq .faq-q { font-size: clamp(17px, 1.6vw, 20px); font-weight: 700; color: var(--t-light-hi); margin: 0 0 10px; }
.faq .faq-a { color: var(--t-light-md); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.8; margin: 0; }