/* =========================================================
   快工具 官網改版 首頁 v1
   ========================================================= */

:root{
  /* brand */
  --blue:      #0078c0;   /* 配白字 4.72:1，過 WCAG AA；原本 #0082d1 只有 4.11 */
  --blue-600:  #0068aa;   /* 按鈕 hover，要比主色明顯深一階 */
  --blue-700:  #005e9c;
  --blue-050:  #f2f8fd;
  --blue-100:  #e2eff9;
  --blue-200:  #c6e0f3;
  --logo-blue: #0095da;
  --yellow:    #ffcb04;

  --navy:      #103351;
  --navy-800:  #16456d;

  --ink:       #16304a;
  --muted:     #62798f;
  --line:      #e4edf5;
  --white:     #fff;
  --soft:      #f5fafd;
  --orange:    #ef5b25;

  /* accent tints for icons */
  --t-b: #e4f0fb; --t-bi: #1a7fd0;
  --t-y: #fff3d1; --t-yi: #e0a400;
  --t-r: #fde7e7; --t-ri: #db4b4b;
  --t-g: #e3f6ec; --t-gi: #1f9f62;
  --t-p: #efe9fb; --t-pi: #7355c8;
  --t-t: #e0f4f6; --t-ti: #19919e;
  --t-ln:#e4f6e5; --t-lni:#06c755;

  /* rhythm */
  --wrap: 1200px;
  --gut: 24px;
  --sec-y: 112px;
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;

  --sh-1: 0 2px 10px rgba(16,51,81,.05);
  --sh-2: 0 10px 30px rgba(16,51,81,.08);
  --sh-3: 0 22px 60px rgba(16,51,81,.14);

  --ez: cubic-bezier(.22,.7,.3,1);
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:92px }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.75; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
ul,ol{ margin:0; padding:0; list-style:none }
h1,h2,h3,p{ margin:0 }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
svg{ width:1em; height:1em; fill:currentColor }
.sprite{ position:absolute; width:0; height:0; overflow:hidden }
.skip{ position:absolute; left:-9999px }
.skip:focus{ left:16px; top:10px; z-index:200; background:#fff; padding:8px 14px; border-radius:8px }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
.sec{ padding-block:var(--sec-y) }
.sec--soft{ background:var(--soft) }

/* ---------- section heading ---------- */
.sh__h{
  font-size:clamp(28px,3.1vw,40px); font-weight:900; line-height:1.45;
  letter-spacing:.01em; color:var(--navy);
}
.sh__h > span,
.sh__p > span{ display:inline-block }  /* 讓窄螢幕只在逗號處斷行 */
.sh__p{ margin-top:18px; color:var(--muted); font-size:18px; line-height:1.85 }
.sh--mid{ text-align:center; max-width:760px; margin:0 auto 60px }
.sh--split{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:52px }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:16px; font-weight:700; color:var(--blue); letter-spacing:.06em;
}
.eyebrow__ar{ font-size:18px }
.pill{
  display:inline-block; padding:7px 17px; border-radius:999px;
  background:var(--blue-100); color:var(--blue-700);
  font-size:14px; font-weight:700; letter-spacing:.06em;
}
.lnk{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  color:var(--blue); font-size:16px; font-weight:700; padding-bottom:4px;
  background-image:linear-gradient(var(--blue),var(--blue));
  background-size:0 2px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .3s var(--ez);
}
.lnk svg{ transition:transform .25s var(--ez) }
.lnk:hover{ background-size:100% 2px }
.lnk:hover svg{ transform:translateX(4px) }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 30px; border-radius:999px; font-size:16px; font-weight:700;
  line-height:1; white-space:nowrap; border:2px solid transparent;
  transition:background-color .25s var(--ez), color .25s var(--ez),
             border-color .25s var(--ez), transform .25s var(--ez), box-shadow .25s var(--ez);
}
.btn svg{ font-size:18px; transition:transform .25s var(--ez) }
.btn:hover svg{ transform:translateX(4px) }
.btn--sm{ padding:11px 24px; font-size:15px }
.btn--pri{ background:var(--blue); color:#fff; box-shadow:0 6px 18px rgba(0,130,209,.25) }
.btn--pri:hover{ background:var(--blue-600); transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,130,209,.32) }
.btn--gho{ border-color:var(--blue-200); color:var(--blue); background:#fff }
.btn--gho:hover{ border-color:var(--blue); background:var(--blue-050); transform:translateY(-2px) }
.btn--wht{ background:#fff; color:var(--blue-700) }
.btn--wht:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.16) }
.btn--out{ border-color:rgba(255,255,255,.6); color:#fff }
.btn--out:hover{ background:rgba(255,255,255,.14); border-color:#fff; transform:translateY(-2px) }

/* =========================================================
   header
   ========================================================= */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ez), border-color .3s var(--ez), background-color .3s var(--ez);
}
.hd__in{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  height:82px; display:flex; align-items:center; gap:30px;
  transition:height .3s var(--ez);
}
.hd.is-scrolled{ box-shadow:0 2px 18px rgba(16,51,81,.09); border-color:var(--line) }
.hd.is-scrolled .hd__in{ height:66px }
.hd__logo img{ height:36px; width:auto; transition:height .3s var(--ez) }
.hd.is-scrolled .hd__logo img{ height:30px }

.nav{ margin-left:auto }
.nav__list{ display:flex; align-items:center; gap:4px }
.nav__a{
  position:relative; display:inline-flex; align-items:center; gap:4px;
  padding:10px 14px; font-size:15.5px; font-weight:500; color:var(--ink);
  border-radius:8px; transition:color .22s var(--ez);
}
.nav__a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ez);
}
.nav__a:hover{ color:var(--blue) }
.nav__a:hover::after,.nav__a.is-on::after{ transform:scaleX(1) }
.nav__a.is-on{ color:var(--blue); font-weight:700 }
.caret{ font-size:14px; transform:rotate(90deg); opacity:.55; transition:transform .25s var(--ez) }
.has-sub:hover .caret{ transform:rotate(90deg) translateX(2px) }

.has-sub{ position:relative }
.sub{
  position:absolute; top:calc(100% + 10px); left:50%; translate:-50% 0;
  min-width:520px; display:grid; grid-template-columns:1fr 1fr; gap:2px;
  padding:12px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-m); box-shadow:var(--sh-2);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .25s var(--ez), transform .25s var(--ez), visibility .25s;
}
.sub--sm{ min-width:420px }
.has-sub:hover .sub,.has-sub:focus-within .sub{ opacity:1; visibility:visible; transform:translateY(0) }
.sub a{ padding:11px 14px; border-radius:10px; transition:background-color .2s var(--ez) }
.sub a:hover{ background:var(--blue-050) }
.sub span{ display:block; font-size:15.5px; font-weight:700; color:var(--navy) }
.sub em{ display:block; font-style:normal; font-size:13.5px; color:var(--muted); margin-top:2px }

.hd__act{ display:flex; align-items:center; gap:12px }
.hd__icon{
  width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  color:var(--muted); font-size:19px; transition:background-color .22s var(--ez), color .22s var(--ez);
}
.hd__icon:hover{ background:var(--blue-050); color:var(--blue) }
/* 漢堡鈕：按鈕本身放大到 44px（觸控目標的建議下限），三條線放大到 26px。
   線比按鈕窄，所以按鈕貼齊版面邊界時，線看起來還會再往內縮 9px，
   跟左邊 LOGO 不對稱。用負邊距把「線」對齊版面邊界，這叫視覺對齊。 */
.hd__burger{
  display:none; width:44px; height:44px; flex-direction:column; gap:6px;
  align-items:center; justify-content:center; margin-right:-9px;
}
.hd__burger span{ width:26px; height:2.5px; background:var(--navy); border-radius:2px; transition:transform .3s var(--ez), opacity .2s }
.hd__burger.is-on span:nth-child(1){ transform:translateY(8.5px) rotate(45deg) }
.hd__burger.is-on span:nth-child(2){ opacity:0 }
.hd__burger.is-on span:nth-child(3){ transform:translateY(-8.5px) rotate(-45deg) }

/* =========================================================
   hero
   ========================================================= */
.hero{ position:relative; padding-top:170px; padding-bottom:110px; overflow:hidden }
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(900px 520px at 88% 24%, #e8f4fd 0%, rgba(232,244,253,0) 70%),
    linear-gradient(180deg,#f4fafe 0%,#ffffff 78%);
}
.hero__bg::after{
  content:""; position:absolute; right:-6%; top:6%; width:46%; height:76%;
  background:repeating-linear-gradient(115deg,rgba(0,130,209,.07) 0 3px,transparent 3px 26px);
  transform:skewX(-14deg); border-radius:40px;
}
.hero__in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  align-items:center; gap:56px;
}
.hero__eb{ opacity:0; animation:up .7s var(--ez) .05s forwards }
.hero__h1{
  margin-top:20px; font-size:clamp(34px,4.35vw,56px); font-weight:900;
  line-height:1.4; letter-spacing:.005em; color:var(--navy);
  opacity:0; animation:up .8s var(--ez) .14s forwards;
}
.hero__h1 .hl{ color:var(--blue) }
.hero__lead{
  margin-top:26px; font-size:18px; line-height:1.95; color:var(--muted);
  opacity:0; animation:up .8s var(--ez) .26s forwards;
}
.hero__cta{
  margin-top:40px; display:flex; flex-wrap:wrap; gap:14px;
  opacity:0; animation:up .8s var(--ez) .38s forwards;
}
@keyframes up{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }

/* --- hero art --- */
.hero__art{ position:relative; aspect-ratio:620/560; min-height:480px }
.orbit{ position:absolute; inset:0; width:100%; height:100%; fill:none }
.orbit__l{
  stroke:rgba(0,130,209,.42); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:var(--len,420); stroke-dashoffset:var(--len,420);
  animation:draw 1.1s var(--ez) forwards;
}
.orbit__l:nth-of-type(1){ animation-delay:.55s } .orbit__l:nth-of-type(4){ animation-delay:.6s }
.orbit__l:nth-of-type(2){ animation-delay:.7s }  .orbit__l:nth-of-type(5){ animation-delay:.75s }
.orbit__l:nth-of-type(3){ animation-delay:.85s } .orbit__l:nth-of-type(6){ animation-delay:.9s }
@keyframes draw{ to{ stroke-dashoffset:0 } }

.node{
  position:absolute; z-index:3; display:inline-flex; align-items:center; gap:9px;
  padding:9px 17px 9px 9px; background:#fff; border-radius:999px;
  box-shadow:var(--sh-2); font-size:14px; font-weight:700; color:var(--navy);
  white-space:nowrap; opacity:0; transform:translateY(12px) scale(.94);
  animation:pop .6s var(--ez) var(--d,1s) forwards, bob 7s ease-in-out calc(var(--d,1s) + 1s) infinite;
}
@keyframes pop{ to{ opacity:1; transform:none } }
@keyframes bob{ 0%,100%{ translate:0 0 } 50%{ translate:0 -7px } }
.node__ic{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-size:18px; background:var(--t-b); color:var(--t-bi);
}
.node__ic--tk{ background:var(--t-r); color:var(--t-ri) }
.node__ic--ln{ background:var(--t-ln); color:var(--t-lni) }
.node__ic--pt{ background:var(--t-y); color:var(--t-yi) }
.node__ic--cp{ background:var(--t-r); color:var(--t-ri) }
.node__ic--rc{ background:var(--t-g); color:var(--t-gi) }
.node--1{ left:2%;  top:16% }
.node--2{ left:0;   top:44% }
.node--3{ left:2%;  top:72% }
.node--4{ right:2%; top:16% }
.node--5{ right:0;  top:44% }
.node--6{ right:1%; top:72% }

.spark{
  position:absolute; right:19%; top:6%; width:42px; height:42px;
  fill:none; stroke:var(--yellow); stroke-width:3.4; stroke-linecap:round;
  opacity:0; animation:pop .6s var(--ez) 1.45s forwards;
}

/* --- phone --- */
.phone{
  position:relative; z-index:2; margin-inline:auto;
  width:250px; padding:11px; background:#1a1d22; border-radius:38px;
  box-shadow:var(--sh-3), 0 0 0 1px rgba(0,0,0,.08);
}
.phone--hero{ margin-top:14px }
.phone--big{ width:250px }
.phone--big .phone__scr{ aspect-ratio:9/19 }
.phone::before{
  content:""; position:absolute; left:50%; top:16px; translate:-50% 0;
  width:76px; height:6px; border-radius:99px; background:#2f343c; z-index:5;
}
.phone__scr{
  border-radius:28px; overflow:hidden; background:#f1f3f5;
  aspect-ratio:9/17.6;
}
.mc{ height:100%; display:flex; flex-direction:column; font-size:11px }
.mc__hero{ position:relative; height:122px; flex:none; overflow:hidden }
.mc__hero img{ width:100%; height:100%; object-fit:cover }
.mc__hero::after{ content:""; position:absolute; inset:0; background:rgba(20,28,38,.34) }
.mc__shop{
  position:absolute; inset:14px 0 auto; z-index:2; text-align:center;
  color:#fff; font-weight:900; font-size:12.5px; letter-spacing:.02em;
}
.mc__card{
  position:absolute; z-index:2; left:11px; right:11px; bottom:12px;
  padding:11px 12px 12px; border-radius:11px;
  background:rgba(24,34,46,.42); backdrop-filter:blur(3px);
}
.mc__lv{
  display:inline-block; padding:2px 9px; border-radius:99px;
  background:#fff; color:var(--navy); font-size:9.5px; font-weight:700;
}
.mc__name{ margin-top:5px; color:#fff; font-size:17px; font-weight:900; line-height:1.2 }
.mc__edit{
  display:inline-block; margin-top:7px; padding:3px 12px; border-radius:99px;
  border:1px solid rgba(255,255,255,.85); color:#fff; font-size:9.5px;
}
.mc__sheet{
  flex:1; margin-top:-14px; position:relative; z-index:3;
  background:#fff; border-radius:16px 16px 0 0; padding:15px 13px 0;
}
.mc__pt{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:11px; background:#f7f8fa;
}
.mc__pt span{ font-weight:700; color:var(--navy); font-size:11px }
.mc__pt strong{ color:var(--orange); font-size:26px; font-weight:900; line-height:1 }
.mc__pt small{ font-size:10px; margin-left:3px; font-weight:700 }
.mc__tabs{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:12px }
.mc__tabs li{ text-align:center; font-size:8.5px; color:var(--muted); font-weight:500 }
.mc__tabs i{
  display:grid; place-items:center; width:30px; height:30px; margin:0 auto 4px;
  border-radius:9px; background:var(--blue-050); color:var(--blue); font-size:15px;
}
.mc__sub{
  margin-top:10px; padding-bottom:4px; border-bottom:1px solid #eceff2;
  font-size:10px; font-weight:700; color:var(--navy);
}
.mc__row{
  display:flex; align-items:center; justify-content:space-between;
  padding:6.5px 0; border-bottom:1px solid #f2f4f6; font-size:9.5px; color:var(--muted);
}
.mc__row b{ color:var(--blue); font-weight:700 }
.mc__row b.o{ color:var(--orange) }

/* floating labels around the big phone */
.fl{
  position:absolute; z-index:4; display:inline-flex; align-items:center; gap:6px;
  padding:7px 13px 7px 7px; background:#fff; border-radius:999px;
  box-shadow:var(--sh-2); font-size:12.5px; font-weight:700; color:var(--navy);
  white-space:nowrap; opacity:0; transform:translateY(10px);
}
.fl i{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--blue-050); color:var(--blue); font-size:14px;
}
.fl--1{ left:-22px; top:17% }
.fl--2{ left:-30px; top:45% }
.fl--3{ right:-22px; top:27% }
.fl--4{ right:-30px; top:57% }
.mcard__art.is-in .fl{ animation:pop .6s var(--ez) var(--d) forwards }

/* =========================================================
   needs
   ========================================================= */
.grid{ display:grid; gap:24px }
.grid--3{ grid-template-columns:repeat(3,1fr) }
.grid--4{ grid-template-columns:repeat(4,1fr) }

.need{
  display:block; padding:34px 30px 28px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-l);
  transition:transform .3s var(--ez), box-shadow .3s var(--ez), border-color .3s var(--ez);
}
.need:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--blue-200) }
.need__ic{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  font-size:27px; background:var(--t-b); color:var(--t-bi);
  transition:transform .3s var(--ez);
}
.need:hover .need__ic{ transform:translateY(-2px) }
.need__ic--b{ background:var(--t-b); color:var(--t-bi) }
.need__ic--y{ background:var(--t-y); color:var(--t-yi) }
.need__ic--r{ background:var(--t-r); color:var(--t-ri) }
.need__ic--g{ background:var(--t-g); color:var(--t-gi) }
.need__ic--p{ background:var(--t-p); color:var(--t-pi) }
.need__ic--t{ background:var(--t-t); color:var(--t-ti) }
.need__h{ margin-top:22px; font-size:21px; font-weight:900; color:var(--navy) }
.need__l{ margin-top:14px; color:var(--muted); font-size:16px; line-height:2 }
.need__go{
  display:inline-flex; align-items:center; gap:7px; margin-top:22px;
  color:var(--blue); font-size:15.5px; font-weight:700;
}
.need__go svg{ transition:transform .25s var(--ez) }
.need:hover .need__go svg{ transform:translateX(4px) }

/* =========================================================
   industry
   ========================================================= */
.ind{
  display:flex; flex-direction:column; padding:14px 14px 20px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  transition:transform .3s var(--ez), box-shadow .3s var(--ez), border-color .3s var(--ez);
}
.ind:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--blue-200) }
.ind__ph{ display:block; border-radius:14px; overflow:hidden; aspect-ratio:4/2.7 }
.ind__ph img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ez);
}
.ind:hover .ind__ph img{ transform:scale(1.035) }
.ind__bar{ display:flex; align-items:center; gap:10px; margin:16px 6px 0 6px; flex-wrap:wrap }
.ind__ic{
  width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:var(--blue); color:#fff; font-size:18px;
}
.ind__bar b{ font-size:19px; font-weight:900; color:var(--navy) }
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin:14px 6px 0 }
.tags em{
  font-style:normal; padding:5px 12px; border-radius:999px;
  background:var(--blue-050); border:1px solid var(--blue-100);
  color:var(--blue-700); font-size:13.5px; font-weight:500;
}
.ind__go{
  display:inline-flex; align-items:center; gap:7px; margin:20px 6px 0;
  color:var(--blue); font-size:15.5px; font-weight:700;
}
.ind__go svg{ transition:transform .25s var(--ez) }
.ind:hover .ind__go svg{ transform:translateX(4px) }

/* =========================================================
   combo
   ========================================================= */
.combo{
  display:flex; flex-direction:column;
  padding:30px 28px 32px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-l); box-shadow:var(--sh-1);
}
.combo__t{
  display:flex; align-items:center; gap:10px; line-height:1.5;
  font-size:19px; font-weight:900; color:var(--navy);
}
.combo__ti{ font-size:22px; flex:none; color:var(--blue) }
.combo__row{
  flex:1; margin-top:22px; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; gap:0;
}
.chip{
  display:flex; flex-direction:row; align-items:center; gap:14px;
  width:100%; text-align:left; letter-spacing:0;
  font-size:16px; font-weight:700; color:var(--navy);
  opacity:0; transform:translateY(10px) scale(.96);
}
.chip__ic{
  width:56px; height:56px; flex:none; border-radius:16px;
  display:grid; place-items:center;
  font-size:27px; background:var(--t-b); color:var(--t-bi);
}
.chip__ic--b{ background:var(--t-b); color:var(--t-bi) }
.chip__ic--y{ background:var(--t-y); color:var(--t-yi) }
.chip__ic--r{ background:var(--t-r); color:var(--t-ri) }
.chip__ic--g{ background:var(--t-g); color:var(--t-gi) }
.chip__ic--p{ background:var(--t-p); color:var(--t-pi) }
.chip__ic--t{ background:var(--t-t); color:var(--t-ti) }
.chip__ic--ln{ background:var(--t-ln); color:var(--t-lni) }
.plus{
  width:56px; flex:none; margin:0; padding:6px 0;
  text-align:center; line-height:1;
  font-size:23px; font-weight:500; color:#9fcbea;
  opacity:0; transition:opacity .4s var(--ez) .5s;
}
.combo.is-in .chip{ animation:pop .55s var(--ez) calc(var(--i) * 140ms + 120ms) forwards }
.combo.is-in .plus{ opacity:1 }
.combo__foot{
  margin-top:48px; text-align:center; color:var(--muted); font-size:17.5px;
}
.combo__foot b{ color:var(--blue); font-weight:900 }

/* =========================================================
   member card section
   ========================================================= */
.mcard{ background:linear-gradient(180deg,var(--soft) 0%,#fff 62%) }
.mcard__in{
  display:grid; grid-template-columns:minmax(0,1fr) 400px minmax(0,.88fr);
  align-items:center; gap:36px;
}
.mcard__art{ position:relative }
.mcard__note{
  padding:30px 28px; background:#fff; border:1px solid var(--blue-100);
  border-radius:var(--r-l); box-shadow:var(--sh-2);
}
.mcard__ni{
  width:50px; height:50px; border-radius:15px; display:grid; place-items:center;
  font-size:25px; background:var(--t-b); color:var(--t-bi);
}
.mcard__note h3{ margin-top:18px; font-size:19.5px; font-weight:900; line-height:1.6; color:var(--navy) }
.mcard__note p{ margin-top:12px; font-size:16px; line-height:1.9; color:var(--muted) }
.mcard__copy .btn{ margin-top:34px }
.mcard__copy .sh__h{ margin-top:18px }

/* =========================================================
   cases
   ========================================================= */
.case{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden;
  transition:transform .3s var(--ez), box-shadow .3s var(--ez);
}
.case:hover{ transform:translateY(-4px); box-shadow:var(--sh-2) }
.case__ph{ display:block; overflow:hidden; aspect-ratio:4/3; background:var(--soft) }
.case__ph img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ez) }
.case:hover .case__ph img{ transform:scale(1.035) }
.case__bd{ display:block; padding:22px 24px 26px }
.case__bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.case__bar b{ font-size:19px; font-weight:900; color:var(--navy) }
.case__bar em{ font-style:normal; font-size:15.5px; color:var(--muted) }
.tags--plus em{ position:relative }
.tags--plus em + em{ margin-left:14px }
.tags--plus em + em::before{
  content:"+"; position:absolute; left:-15px; top:50%; translate:0 -50%;
  color:var(--blue-200); font-weight:700; font-size:13px;
}
.case__p{ display:block; margin-top:16px; font-size:16px; line-height:1.9; color:var(--muted) }
.cases__more{ margin-top:34px; text-align:center }

/* =========================================================
   why
   ========================================================= */
.whys{ gap:20px }
.whyi{ text-align:center; padding:8px 14px }
.whyi__ic{
  width:60px; height:60px; margin:0 auto; border-radius:18px;
  display:grid; place-items:center; font-size:27px;
  background:var(--blue-050); color:var(--blue); border:1px solid var(--blue-100);
}
.whyi h3{ margin-top:22px; font-size:18px; font-weight:900; color:var(--navy); line-height:1.6 }
.whyi p{ margin-top:10px; font-size:15.5px; color:var(--muted); line-height:1.9 }

/* =========================================================
   final cta
   ========================================================= */
.cta{
  background:var(--blue-050); color:#fff; padding-block:64px;
  transition:background-color .8s var(--ez);
}
.cta.is-in{ background:linear-gradient(100deg,var(--blue) 0%,var(--blue-700) 100%) }
.cta__in{ display:flex; align-items:center; gap:36px; flex-wrap:wrap }
.cta__art{ flex:none; width:150px; opacity:0; transition:opacity .6s var(--ez) .25s }
.cta__art svg{ width:150px; height:110px; fill:none }
.cta__art .b1{ fill:#fff; opacity:.96 }
.cta__art .b2{ fill:var(--yellow) }
.cta__art .d{ fill:var(--blue) }
.cta__art .d2{ fill:rgba(16,51,81,.35) }
.cta__tx{ flex:1; min-width:260px; opacity:0; transform:translateY(14px); transition:opacity .6s var(--ez) .35s, transform .6s var(--ez) .35s }
.cta__tx h2{ font-size:clamp(24px,2.6vw,32px); font-weight:900; line-height:1.5 }
.cta__tx p{ margin-top:12px; font-size:18px; color:rgba(255,255,255,.92) }
.cta__btns{ display:flex; gap:14px; flex-wrap:wrap; opacity:0; transform:translateY(14px); transition:opacity .6s var(--ez) .45s, transform .6s var(--ez) .45s }
.cta.is-in .cta__art,.cta.is-in .cta__tx,.cta.is-in .cta__btns{ opacity:1; transform:none }

/* =========================================================
   footer
   ========================================================= */
.ft{ background:var(--navy); color:rgba(255,255,255,.8); font-size:15.5px }
.ft__top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:40px; flex-wrap:wrap; padding-block:52px;
}
.ft__brand img{ height:34px; width:auto }
.ft__brand p{ margin-top:14px; font-size:15px; color:rgba(255,255,255,.66) }
.ft__nav{ display:flex; flex-wrap:wrap; gap:10px 26px; padding-top:6px }
.ft__nav a,.ft__mini a{ transition:color .22s var(--ez) }
.ft__nav a:hover,.ft__mini a:hover{ color:#fff }
.ft__con{ display:flex; flex-direction:column; gap:10px }
.ft__con-a{ display:inline-flex; align-items:center; gap:9px; transition:color .22s var(--ez) }
.ft__con-a svg{ font-size:17px; color:var(--blue-200) }
.ft__con-a:hover{ color:#fff }
.ft__soc{ display:flex; gap:10px; margin-top:8px }
.ft__soc a{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.1); font-size:19px; color:#fff;
  transition:background-color .25s var(--ez), transform .25s var(--ez);
}
.ft__soc a:hover{ background:var(--blue); transform:translateY(-2px) }
.ft__bot{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; padding-block:20px; border-top:1px solid rgba(255,255,255,.12);
  font-size:14.5px; color:rgba(255,255,255,.6);
}
.ft__mini{ display:flex; gap:22px }

/* =========================================================
   scroll reveal
   ========================================================= */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .62s var(--ez) var(--d,0ms), transform .62s var(--ez) var(--d,0ms);
}

/* =========================================================
   responsive
   ========================================================= */
@media (max-width:1180px){
  .nav__list{ gap:0 }
  .nav__a{ padding:10px 10px; font-size:15px }
  .mcard__in{ grid-template-columns:minmax(0,1fr) 280px; }
  .mcard__note{ grid-column:1/-1 }
  .fl--1,.fl--2{ left:-2% } .fl--3,.fl--4{ right:-2% }
}

@media (max-width:1024px){
  :root{ --sec-y:84px }
  .hd__in{ height:70px }
  .nav,.hd__icon{ display:none }
  .hd__burger{ display:flex }
  .hero{ padding-top:128px; padding-bottom:72px }
  .hero__in{ grid-template-columns:1fr; gap:44px }
  .hero__art{ max-width:560px; margin-inline:auto; width:100% }
  .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr) }
  .sh--split{ flex-direction:column; align-items:flex-start; gap:18px }
  .mcard__in{ grid-template-columns:1fr; gap:40px; text-align:center }
  .mcard__copy .eyebrow,.mcard__copy .pill{ margin-inline:auto }
  .mcard__art{ max-width:420px; margin-inline:auto; width:100% }
  .mcard__note{ text-align:left; max-width:520px; margin-inline:auto }
  .mcard__ni{ margin-inline:0 }

  /* nav drawer */
  .nav.is-open{
    display:block; position:fixed; inset:70px 0 auto 0; background:#fff;
    border-bottom:1px solid var(--line); box-shadow:var(--sh-2);
    padding:10px 20px 22px; max-height:calc(100vh - 70px); overflow:auto;
  }
  .nav.is-open .nav__list{ flex-direction:column; align-items:stretch; gap:0 }
  .nav.is-open .nav__a{ width:100%; padding:15px 4px; font-size:16.5px; border-bottom:1px solid var(--line) }
  .nav.is-open .nav__a::after{ display:none }
  .nav.is-open .sub{
    position:static; translate:none; opacity:1; visibility:visible; transform:none;
    min-width:0; box-shadow:none; border:0; border-bottom:1px solid var(--line);
    border-radius:0; grid-template-columns:1fr; padding:4px 0 12px; display:none;
  }
  .nav.is-open .has-sub.is-open .sub{ display:grid }
  .nav.is-open .caret{ margin-left:auto }
  .nav.is-open .has-sub.is-open .caret{ transform:rotate(-90deg) }
}

/* 平板兩欄：組合清單置中，避免靠左留白過多 */
@media (min-width:761px) and (max-width:1024px){
  .combo__row{ align-items:center }
  .chip{ width:min(100%,230px) }
  .plus{ width:min(100%,230px); box-sizing:border-box; padding-right:174px; text-align:center }
}

@media (max-width:760px){
  :root{ --sec-y:64px; --gut:20px }
  body{ font-size:16px }
  html{ scroll-padding-top:78px }
  .sh--mid{ margin-bottom:40px }
  .sh__p{ font-size:17px; margin-top:14px }
  .grid{ gap:18px }
  .grid--3,.grid--4{ grid-template-columns:1fr }
  .hero{ padding-top:112px; padding-bottom:56px }
  .hero__lead{ font-size:17px; margin-top:20px }
  .hero__lead br{ display:none }
  .hero__cta{ margin-top:30px }
  .hero__cta .btn{ flex:1 1 100%; }
  .hero__bg::after{ display:none }

  /* mobile hero: phone + 2 nodes only (per spec) */
  .hero__art{ aspect-ratio:auto; min-height:0; padding-block:6px }
  .orbit{ display:none }
  .node{ font-size:13.5px; padding:7px 14px 7px 7px }
  .node__ic{ width:30px; height:30px; font-size:16px }
  .node--2,.node--3,.node--6{ display:none }
  .node--1{ left:0; top:12% }
  .node--4{ right:0; top:12% }
  .node--5{ right:0; top:54% }
  .spark{ right:6%; top:0; width:32px; height:32px }
  .phone{ width:222px }
  .phone--big{ width:238px }

  .need{ padding:26px 22px 24px }
  .need__h{ font-size:20px; margin-top:18px }
  .combo{ padding:26px 22px 28px }
  .combo__row{ margin-top:18px }
  .chip{ font-size:15.5px; gap:12px }
  .chip__ic{ width:52px; height:52px; font-size:25px }
  .plus{ width:52px; font-size:21px; padding:5px 0 }
  .combo__foot{ margin-top:34px; font-size:16.5px }
  .fl--1,.fl--2{ left:-8px } .fl--3,.fl--4{ right:-8px }
  .fl{ font-size:12.5px; padding:6px 12px 6px 6px }
  .fl i{ width:24px; height:24px; font-size:13px }
  .cta{ padding-block:48px }
  .cta__in{ gap:24px }
  .cta__art{ width:110px } .cta__art svg{ width:110px; height:82px }
  .cta__btns .btn{ flex:1 1 100% }
  .ft__top{ padding-block:40px; gap:28px }
  .ft__bot{ justify-content:flex-start }
}

/* =========================================================
   reduced motion
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal,.node,.chip,.fl,.hero__eb,.hero__h1,.hero__lead,.hero__cta,.spark,
  .thero__h1,.thero__lead,.thero__cta,
  .cta__art,.cta__tx,.cta__btns{ opacity:1 !important; transform:none !important }
  .orbit__l{ stroke-dashoffset:0 !important }
  .plus{ opacity:1 !important }
}


/* =========================================================
   聯絡表單（2026 改版新增）
   ========================================================= */
.cform{ max-width:860px; margin-inline:auto }
.cform__row{ margin-bottom:22px }
.cform__row--2{ display:grid; grid-template-columns:1fr 1fr; gap:22px }
.fld{ display:block }
.fld__l{
  display:block; margin-bottom:9px;
  font-size:15.5px; font-weight:700; color:var(--navy);
}
.fld__l b{ color:var(--orange); font-weight:700; margin-left:3px }
.cform input[type="text"],
.cform select,
.cform textarea{
  width:100%; padding:14px 16px; font:inherit; font-size:16px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:12px;
  transition:border-color .2s var(--ez), box-shadow .2s var(--ez);
}
.cform textarea{ line-height:1.8; resize:vertical; min-height:120px }
.cform input[type="text"]:focus,
.cform select:focus,
.cform textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,130,209,.14);
}
.cform__chk{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px 16px;
  padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:14px;
}
.cform__chk label{
  display:flex; align-items:center; gap:9px;
  font-size:15px; color:var(--ink); cursor:pointer;
}
.cform__chk input{ width:17px; height:17px; accent-color:var(--blue); flex:none }
.cform__code{ display:flex; align-items:center; gap:12px }
.cform__img{ height:48px; border-radius:10px; border:1px solid var(--line); flex:none }
.cform__code input{ flex:1 }
.cform__send{
  margin-top:32px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
}

@media (max-width:760px){
  .cform__row--2{ grid-template-columns:1fr; gap:22px }
  .cform__chk{ grid-template-columns:1fr 1fr; padding:16px }
  .cform__chk label{ font-size:14.5px }
  .cform__send .btn{ flex:1 1 100% }
}

/* =========================================================
   工具頁共用版型（2026 改版）
   13 支工具頁共用這一段，延伸首頁的色票與節奏
   ========================================================= */

.sec--tight{ padding-block:64px }

/* ---------- 麵包屑 ---------- */
.crumb{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--muted); margin-bottom:22px }
.crumb a{ color:var(--muted); transition:color .2s var(--ez) }
.crumb a:hover{ color:var(--blue) }
.crumb span{ color:var(--blue-200) }
.crumb b{ color:var(--navy); font-weight:700 }

/* ---------- 工具頁主視覺 ---------- */
.thero{ position:relative; padding-top:150px; padding-bottom:96px; overflow:hidden }
.thero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(820px 460px at 86% 26%, #e8f4fd 0%, rgba(232,244,253,0) 70%),
    linear-gradient(180deg,#f4fafe 0%,#ffffff 82%);
}
.thero__bg::after{
  content:""; position:absolute; right:-6%; top:8%; width:44%; height:72%;
  background:repeating-linear-gradient(115deg,rgba(0,130,209,.07) 0 3px,transparent 3px 26px);
  transform:skewX(-14deg); border-radius:40px;
}
.thero__in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  align-items:center; gap:56px;
}
.thero__h1{
  margin-top:18px; font-size:clamp(30px,3.7vw,46px); font-weight:900;
  line-height:1.42; color:var(--navy);
  opacity:0; animation:up .8s var(--ez) .1s forwards;
}
.thero__h1 > span{ display:inline-block }
.thero__lead{
  margin-top:24px; font-size:18px; line-height:1.95; color:var(--muted);
  opacity:0; animation:up .8s var(--ez) .22s forwards;
}
.thero__cta{
  margin-top:34px; display:flex; flex-wrap:wrap; gap:14px;
  opacity:0; animation:up .8s var(--ez) .34s forwards;
}
.thero__art{ position:relative; display:flex; justify-content:center }
.thero__art .fl--1{ left:-14px; top:14% }
.thero__art .fl--2{ left:-30px; top:44% }
.thero__art .fl--3{ left:-14px; top:74% }
.thero__art.is-in .fl{ animation:pop .6s var(--ez) var(--d) forwards }

/* ---------- 定義條（AI 擷取落點） ---------- */
.defbar{ background:var(--navy); padding-block:30px }
.defbar__in{
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.defbar__t{
  flex:1; min-width:280px; max-width:940px;
  font-size:17.5px; line-height:1.9; color:rgba(255,255,255,.94);
}
.defbar .btn--gho{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff; flex:none }
.defbar .btn--gho:hover{ background:rgba(255,255,255,.12); border-color:#fff }

/* ---------- 四格事實 ---------- */
.fact{
  padding:26px 24px; background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  transition:transform .3s var(--ez), box-shadow .3s var(--ez);
}
.fact:hover{ transform:translateY(-3px); box-shadow:var(--sh-2) }
.fact__ic{
  width:50px; height:50px; border-radius:15px; display:grid; place-items:center;
  font-size:24px; background:var(--t-b); color:var(--t-bi);
}
.fact__ic--b{ background:var(--t-b); color:var(--t-bi) }
.fact__ic--y{ background:var(--t-y); color:var(--t-yi) }
.fact__ic--t{ background:var(--t-t); color:var(--t-ti) }
.fact__ic--ln{ background:var(--t-ln); color:var(--t-lni) }
.fact p{ margin-top:16px; font-size:15.5px; line-height:1.9; color:var(--ink) }

/* ---------- 三欄步驟卡 ---------- */
.step{
  padding:32px 28px; background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  transition:transform .3s var(--ez), box-shadow .3s var(--ez), border-color .3s var(--ez);
}
.step:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--blue-200) }
.step__ic{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  font-size:27px; background:var(--t-b); color:var(--t-bi);
}
.step__ic--b{ background:var(--t-b); color:var(--t-bi) }
.step__ic--g{ background:var(--t-g); color:var(--t-gi) }
.step__ic--ln{ background:var(--t-ln); color:var(--t-lni) }
.step h3{ margin-top:20px; font-size:19px; font-weight:900; color:var(--navy) }
.step p{ margin-top:12px; font-size:16px; line-height:1.95; color:var(--muted) }

/* ---------- 補充列 ---------- */
.note{
  margin-top:26px; display:flex; gap:20px; align-items:flex-start;
  padding:28px 30px; background:var(--blue-050); border:1px solid var(--blue-100); border-radius:var(--r-l);
}
.note__ic{
  width:48px; height:48px; flex:none; border-radius:14px; display:grid; place-items:center;
  font-size:23px; background:#fff; color:var(--blue);
}
.note h3{ font-size:18px; font-weight:900; color:var(--navy) }
.note p{ margin-top:10px; font-size:16px; line-height:1.95; color:var(--muted) }

/* ---------- 左文右圖 ---------- */
.sec--split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.88fr); gap:56px; align-items:center }
.split__tx .sh__p{ margin-bottom:8px }
.blk__h{
  margin-top:30px; padding-left:14px; border-left:4px solid var(--blue);
  font-size:18px; font-weight:900; color:var(--navy); line-height:1.4;
}
.blk__l{ margin-top:14px; color:var(--muted); font-size:16px; line-height:2 }
.blk__l li{ position:relative; padding-left:20px }
.blk__l li::before{
  content:""; position:absolute; left:2px; top:.85em; width:7px; height:7px;
  border-radius:50%; background:var(--blue-200);
}
.split__art{ position:relative }
.shot{ margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sh-2) }
.shot img{ width:100%; height:auto; display:block }
.shot figcaption{ padding:14px 18px; font-size:14px; color:var(--muted); border-top:1px solid var(--line) }
.shot--2{ margin-top:22px }

/* ---------- 四步流程 ---------- */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; list-style:none; margin:0; padding:0 }
.flow__i{
  position:relative; padding:30px 24px 26px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-l);
}
.flow__i::after{
  content:""; position:absolute; right:-14px; top:50%; width:10px; height:10px; translate:0 -50%;
  border-top:2px solid var(--blue-200); border-right:2px solid var(--blue-200); rotate:45deg;
}
.flow__i:last-child::after{ display:none }
.flow__n{
  display:grid; place-items:center; width:38px; height:38px; border-radius:12px;
  background:var(--blue); color:#fff; font-size:17px; font-weight:900;
}
.flow__i h3{ margin-top:18px; font-size:18px; font-weight:900; color:var(--navy) }
.flow__i p{ margin-top:11px; font-size:15.5px; line-height:1.9; color:var(--muted) }

/* ---------- 能力清單 ---------- */
.grid--2{ grid-template-columns:repeat(2,1fr) }
.cap{ padding:32px 30px; background:#fff; border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--sh-1) }
.cap h3{ display:flex; align-items:center; gap:13px; font-size:19px; font-weight:900; color:var(--navy) }
.cap__ic{
  width:46px; height:46px; flex:none; border-radius:14px; display:grid; place-items:center;
  font-size:22px; background:var(--t-b); color:var(--t-bi);
}
.cap__ic--b{ background:var(--t-b); color:var(--t-bi) }
.cap__ic--y{ background:var(--t-y); color:var(--t-yi) }
.cap__ic--r{ background:var(--t-r); color:var(--t-ri) }
.cap__ic--ln{ background:var(--t-ln); color:var(--t-lni) }
.cap ul{ margin-top:18px; color:var(--muted); font-size:16px; line-height:1.95 }
.cap li{ position:relative; padding-left:22px; margin-bottom:9px }
.cap li::before{
  content:""; position:absolute; left:3px; top:.72em; width:9px; height:5px;
  border-left:2px solid var(--blue); border-bottom:2px solid var(--blue); rotate:-45deg;
}

/* ---------- 自動化對照 ---------- */
.auto{ padding:32px 30px; background:#fff; border:1px solid var(--line); border-radius:var(--r-l) }
.auto__k{
  display:inline-block; padding:7px 17px; border-radius:999px;
  background:var(--blue-100); color:var(--blue-700); font-size:14px; font-weight:700;
}
.tl{ margin-top:22px }
.tl li{
  position:relative; padding-left:26px; padding-bottom:18px;
  font-size:16px; line-height:1.9; color:var(--muted);
}
.tl li::before{
  content:""; position:absolute; left:4px; top:.62em; width:10px; height:10px;
  border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px var(--blue-050);
}
.tl li::after{
  content:""; position:absolute; left:8.5px; top:1.5em; bottom:0; width:2px; background:var(--blue-100);
}
.tl li:last-child{ padding-bottom:0 }
.tl li:last-child::after{ display:none }
.tl b{ display:block; color:var(--navy); font-weight:900; font-size:16.5px; margin-bottom:2px }
.tl--b li::before{ background:var(--yellow); box-shadow:0 0 0 4px #fff6d6 }
.tl--b li::after{ background:#ffeeb0 }

/* ---------- 搭配工具列 ---------- */
.pairrow{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
}
.pairrow__me{
  display:flex; align-items:center; gap:11px; padding:14px 22px 14px 14px;
  background:var(--navy); color:#fff; border-radius:999px; font-size:16.5px; font-weight:900;
}
.pairrow__me .chip__ic{ width:44px; height:44px; font-size:21px }
.pairrow__p{ font-size:24px; color:var(--blue-200); font-weight:400 }
.pairchip{
  display:flex; align-items:center; gap:11px; padding:13px 22px 13px 13px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  font-size:16px; font-weight:700; color:var(--navy);
  transition:transform .25s var(--ez), box-shadow .25s var(--ez), border-color .25s var(--ez);
}
.pairchip .chip__ic{ width:42px; height:42px; font-size:20px }
.pairchip:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--blue-200) }

/* ---------- FAQ ---------- */
.faq{ max-width:860px; margin-inline:auto }
.faq__i{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-m);
  margin-bottom:14px; overflow:hidden;
}
.faq__i summary{
  list-style:none; cursor:pointer; padding:22px 58px 22px 26px; position:relative;
  font-size:17.5px; font-weight:900; color:var(--navy); line-height:1.6;
}
.faq__i summary::-webkit-details-marker{ display:none }
.faq__i summary::after{
  content:""; position:absolute; right:26px; top:50%; width:11px; height:11px; translate:0 -70%;
  border-right:2.5px solid var(--blue); border-bottom:2.5px solid var(--blue); rotate:45deg;
  transition:rotate .25s var(--ez), translate .25s var(--ez);
}
.faq__i[open] summary::after{ rotate:-135deg; translate:0 -30% }
.faq__i summary:hover{ color:var(--blue) }
.faq__a{ padding:0 26px 24px }
.faq__a p{ font-size:16px; line-height:2; color:var(--muted) }

/* =========================================================
   工具頁 RWD
   ========================================================= */
@media (max-width:1024px){
  .thero{ padding-top:120px; padding-bottom:64px }
  .thero__in{ grid-template-columns:1fr; gap:44px }
  .thero__art{ max-width:420px; margin-inline:auto; width:100% }
  .sec--split{ grid-template-columns:1fr; gap:40px }
  .flow{ grid-template-columns:repeat(2,1fr) }
  .flow__i:nth-child(2)::after{ display:none }
  .grid--2{ grid-template-columns:1fr }
}

@media (max-width:760px){
  .sec--tight{ padding-block:48px }
  .thero{ padding-top:104px; padding-bottom:52px }
  .thero__lead{ font-size:17px }
  .thero__cta .btn{ flex:1 1 100% }
  .thero__art .fl--1,.thero__art .fl--3{ left:-8px }
  .thero__art .fl--2{ left:-8px }
  .defbar{ padding-block:24px }
  .defbar__t{ font-size:16.5px }
  .defbar .btn{ width:100% }
  .flow{ grid-template-columns:1fr }
  .flow__i::after{ display:none }
  .note{ flex-direction:column; gap:14px; padding:24px 22px }
  .cap,.auto{ padding:26px 22px }
  .step{ padding:26px 22px }
  .pairrow{ gap:10px }
  .pairchip,.pairrow__me{ font-size:15px; padding:11px 18px 11px 11px }
  .faq__i summary{ font-size:16.5px; padding:19px 50px 19px 20px }
  .faq__a{ padding:0 20px 20px }
}


/* =========================================================
   工具頁：消費集點（延伸自 toolpage.css，只放新增的元件）
   ========================================================= */

/* ---------- 會員端點數畫面（hero 手機）---------- */
.mc__hero--pt{
  height:150px;
  background:linear-gradient(145deg,var(--navy) 0%,var(--blue-700) 58%,var(--blue) 100%);
}
.mc__hero--pt::after{ display:none }
.mc__ptbig{
  position:absolute; z-index:2; left:13px; right:13px; bottom:26px; color:#fff;
}
.mc__ptbig span{ font-size:10px; font-weight:700; opacity:.82 }
.mc__ptbig strong{
  display:block; margin-top:3px; font-size:40px; font-weight:900; line-height:1;
  color:var(--yellow); letter-spacing:-.01em;
}
.mc__ptbig small{ font-size:12px; margin-left:4px; font-weight:700; color:#fff }

.mc__hist{
  display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
  padding:7px 0; border-bottom:1px solid #f2f4f6;
}
.mc__hist p{ font-size:9.5px; font-weight:700; color:var(--navy); line-height:1.35 }
.mc__hist small{ display:block; margin-top:2px; font-size:8.5px; font-weight:400; color:var(--muted) }
.mc__hist b{ flex:none; font-size:12px; font-weight:900; color:var(--t-gi) }
.mc__hist b.m{ color:var(--muted) }
.mc__tag{
  display:inline-block; margin-left:5px; padding:1px 7px; border-radius:99px;
  background:#ffeee5; color:var(--orange); font-size:8px; font-weight:700; font-style:normal;
}

/* ---------- 左文右圖：補充說明 ---------- */
.blk__note{
  margin-top:24px; padding:16px 20px; border-radius:var(--r-m);
  background:var(--blue-050); border:1px solid var(--blue-100);
  font-size:15px; line-height:1.9; color:var(--muted);
}
.blk__l b{ color:var(--navy); font-weight:900 }

/* ---------- 後台設定面板（示意）---------- */
.panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--sh-2); overflow:hidden;
}
.panel__hd{
  display:flex; align-items:center; gap:10px; padding:16px 22px;
  background:var(--navy); color:#fff; font-size:15px; font-weight:700;
}
.panel__hd svg{ font-size:18px; flex:none }
.panel__b{ padding:6px 22px 16px }
.panel__r{
  display:grid; grid-template-columns:1fr 1.15fr .6fr; gap:12px; align-items:center;
  padding:13px 0; border-bottom:1px solid #f0f3f6; font-size:15px; color:var(--muted);
}
.panel__r:last-child{ border-bottom:none }
.panel__r > span:first-child{ color:var(--navy); font-weight:700 }
.panel__r b{ text-align:right; color:var(--orange); font-weight:900 }
.panel__hh{ font-size:13px; letter-spacing:.04em; border-bottom:1px solid var(--line) }
.panel__hh > span:first-child,
.panel__hh b{ color:var(--muted); font-weight:700 }
.panel__ft{
  padding:15px 22px; background:var(--blue-050); border-top:1px solid var(--line);
  font-size:14px; line-height:1.8; color:var(--muted);
}

/* ---------- 報表數字（示意）---------- */
.stat{ display:grid; grid-template-columns:repeat(2,1fr); gap:15px }
.stat__i{
  padding:22px 22px 20px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-m); box-shadow:var(--sh-1);
}
.stat__k{ font-size:14px; font-weight:700; color:var(--muted) }
.stat__v{ margin-top:8px; font-size:32px; font-weight:900; line-height:1; color:var(--navy) }
.stat__v small{ margin-left:4px; font-size:14px; font-weight:700; color:var(--muted) }
.stat__b{ margin-top:14px; height:6px; border-radius:99px; background:var(--blue-100); overflow:hidden }
.stat__b i{ display:block; height:100%; border-radius:99px; background:var(--blue) }
.stat__i--hl{ background:var(--navy); border-color:var(--navy); box-shadow:var(--sh-2) }
.stat__i--hl .stat__k{ color:var(--blue-200) }
.stat__i--hl .stat__v{ color:#fff }
.stat__i--hl .stat__v small{ color:var(--blue-200) }
.stat__i--hl .stat__b{ background:rgba(255,255,255,.22) }
.stat__i--hl .stat__b i{ background:var(--yellow) }
.stat__note{
  grid-column:1/-1; margin-top:2px; font-size:14px; line-height:1.8; color:var(--muted);
}

@media (max-width:760px){
  .panel__hd{ padding:14px 18px; font-size:14.5px }
  .panel__b{ padding:6px 18px 14px }
  .panel__r{ font-size:14px; gap:8px }
  .panel__ft{ padding:14px 18px; font-size:13.5px }
  .stat{ grid-template-columns:1fr; gap:12px }
  .stat__i{ padding:20px 20px 18px }
  .stat__v{ font-size:28px }
  .blk__note{ padding:15px 18px; font-size:14.5px }
  .mc__hero--pt{ height:140px }
  .mc__ptbig strong{ font-size:36px }
}


/* =========================================================
   工具頁：門市工作 APP（只放新增的元件）
   ========================================================= */

/* ---------- 櫃台操作畫面（hero 手機）---------- */
.wk{ height:100%; display:flex; flex-direction:column; background:#eef1f5; font-size:11px }
.wk__bar{ flex:none; padding:15px 13px 16px; background:var(--navy); color:#fff }
.wk__bar p{ font-size:11.5px; font-weight:900; letter-spacing:.01em }
.wk__bar span{ display:block; margin-top:3px; font-size:8.5px; opacity:.72 }
.wk__srch{
  margin:-9px 11px 0; position:relative; z-index:2;
  display:flex; align-items:center; gap:7px; padding:9px 11px;
  background:#fff; border-radius:9px; box-shadow:var(--sh-1);
}
.wk__srch i{ display:grid; place-items:center; color:var(--blue); font-size:13px }
.wk__srch b{ font-size:10.5px; font-weight:700; color:var(--navy) }
.wk__mb{
  margin:9px 11px 0; padding:11px 12px;
  background:#fff; border:1px solid var(--line); border-radius:9px;
}
.wk__mbtop{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.wk__mbtop p{ font-size:13px; font-weight:900; color:var(--navy) }
.wk__lv{
  flex:none; padding:2px 8px; border-radius:99px;
  background:var(--t-b); color:var(--t-bi); font-size:8.5px; font-weight:700;
}
.wk__pt{
  display:flex; align-items:baseline; gap:6px;
  margin-top:8px; padding-top:8px; border-top:1px dashed #e4e9ef;
}
.wk__pt span{ font-size:9px; color:var(--muted) }
.wk__pt strong{ font-size:18px; font-weight:900; line-height:1; color:var(--orange) }
.wk__pt em{ margin-left:auto; font-style:normal; font-size:8.5px; color:var(--muted) }
.wk__acts{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:9px 11px 0 }
.wk__a{
  padding:9px 3px 8px; background:#fff; border:1px solid var(--line);
  border-radius:9px; text-align:center;
}
.wk__a i{
  display:grid; place-items:center; width:25px; height:25px; margin:0 auto 4px;
  border-radius:7px; font-size:13px;
}
.wk__a span{ display:block; font-size:8px; font-weight:700; color:var(--navy); letter-spacing:-.02em }
.wk__a--b i{ background:var(--t-b); color:var(--t-bi) }
.wk__a--y i{ background:var(--t-y); color:var(--t-yi) }
.wk__a--r i{ background:var(--t-r); color:var(--t-ri) }
.wk__a--g i{ background:var(--t-g); color:var(--t-gi) }
.wk__a--p i{ background:var(--t-p); color:var(--t-pi) }
.wk__a--t i{ background:var(--t-t); color:var(--t-ti) }
.wk__foot{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  padding:10px 13px; background:#fff; border-top:1px solid var(--line);
  font-size:8.5px; color:var(--muted);
}
.wk__foot b{ color:var(--navy); font-weight:900; font-size:10px }

/* ---------- 店員清單面板（示意）---------- */
.panel__r--3{ grid-template-columns:.85fr 1fr 1.15fr }
.perm{ display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end }
.perm span{
  padding:3px 9px; border-radius:99px; background:var(--blue-100);
  color:var(--blue-700); font-size:12.5px; font-weight:700; white-space:nowrap;
}
.perm span.off{ background:#f1f4f7; color:#9aaabb }

@media (max-width:760px){
  .panel__r--3{ grid-template-columns:.8fr .9fr 1.3fr }
  .perm span{ font-size:11.5px; padding:2px 7px }
}


/* =========================================================
   工具頁：電子票券（只放新增的元件）
   ========================================================= */

/* 補齊四格事實與能力卡的色票，之後的工具頁不用再補 */
.fact__ic--r{ background:var(--t-r); color:var(--t-ri) }
.fact__ic--g{ background:var(--t-g); color:var(--t-gi) }
.fact__ic--p{ background:var(--t-p); color:var(--t-pi) }
.cap__ic--t{ background:var(--t-t); color:var(--t-ti) }
.cap__ic--g{ background:var(--t-g); color:var(--t-gi) }
.cap__ic--p{ background:var(--t-p); color:var(--t-pi) }
.step__ic--y{ background:var(--t-y); color:var(--t-yi) }
.step__ic--r{ background:var(--t-r); color:var(--t-ri) }
.step__ic--t{ background:var(--t-t); color:var(--t-ti) }
.step__ic--p{ background:var(--t-p); color:var(--t-pi) }

/* ---------- 會員端票券畫面（hero 手機）---------- */
.tk{ height:100%; display:flex; flex-direction:column; background:#eef1f5; font-size:11px }
.tk__bar{ flex:none; padding:14px 13px; background:var(--navy); color:#fff; text-align:center }
.tk__bar p{ font-size:11.5px; font-weight:900 }
.tk__bar span{ display:block; margin-top:3px; font-size:8.5px; opacity:.72 }
.tk__card{
  margin:11px; background:#fff; border-radius:12px;
  box-shadow:var(--sh-1); border:1px solid var(--line);
}
.tk__top{
  padding:12px 13px; border-radius:11px 11px 0 0; color:#fff;
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-700) 100%);
}
.tk__nm{ font-size:13.5px; font-weight:900; line-height:1.3 }
.tk__no{ margin-top:4px; font-size:9px; font-weight:700; letter-spacing:.1em; opacity:.85 }
.tk__left{ display:flex; align-items:baseline; gap:5px; padding:11px 13px 0 }
.tk__left span{ font-size:9px; color:var(--muted) }
.tk__left strong{ font-size:21px; font-weight:900; line-height:1; color:var(--orange) }
.tk__left small{ font-size:10px; font-weight:700; color:var(--muted) }
.tk__gauge{ margin:8px 13px 0; height:6px; border-radius:99px; background:#edf1f5; overflow:hidden }
.tk__gauge i{ display:block; height:100%; border-radius:99px; background:var(--blue) }
.tk__cut{ position:relative; margin-top:12px; border-top:1px dashed #dde3ea }
.tk__cut::before,.tk__cut::after{
  content:""; position:absolute; top:-7px; width:13px; height:13px;
  border-radius:50%; background:#eef1f5;
}
.tk__cut::before{ left:-7px }
.tk__cut::after{ right:-7px }
.tk__qrwrap{ padding:13px; text-align:center }
.tk__qrwrap img{ display:block; width:76px; height:76px; margin:0 auto }
.tk__tick{
  display:inline-flex; align-items:center; gap:5px; margin-top:10px; padding:3px 10px;
  border-radius:99px; background:var(--t-y); color:var(--t-yi); font-size:8.5px; font-weight:700;
}
.tk__tick i{ width:5px; height:5px; border-radius:50%; background:currentColor }
.tk__st{ display:flex; gap:5px; margin:0 11px }
.tk__st span{
  flex:1; padding:6px 0; text-align:center; border-radius:7px;
  background:#fff; border:1px solid var(--line); color:var(--muted);
  font-size:8px; font-weight:700;
}
.tk__st span.on{ background:var(--t-g); border-color:transparent; color:var(--t-gi) }
.tk__foot{
  margin-top:auto; padding:10px 13px; text-align:center;
  background:#fff; border-top:1px solid var(--line);
  font-size:8.5px; color:var(--muted);
}

/* ---------- 票型對照面板 ---------- */
.panel__r--2{ grid-template-columns:.72fr 1.6fr }
.panel__r--2 b{ text-align:left; color:var(--muted); font-weight:400; line-height:1.7 }
.panel__tag{
  display:inline-block; padding:3px 10px; border-radius:99px;
  font-size:12.5px; font-weight:700; white-space:nowrap;
}
.panel__tag--1{ background:var(--t-b); color:var(--t-bi) }
.panel__tag--n{ background:var(--t-y); color:var(--t-yi) }
.panel__tag--i{ background:var(--t-g); color:var(--t-gi) }

/* ---------- 狀態列 ---------- */
.states{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:38px }
.state{
  padding:22px 20px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-m); box-shadow:var(--sh-1);
}
.state__d{ width:11px; height:11px; border-radius:50%; background:var(--t-gi) }
.state--u .state__d{ background:var(--blue) }
.state--e .state__d{ background:#9aaabb }
.state--r .state__d{ background:var(--t-ri) }
.state h3{ margin-top:14px; font-size:17px; font-weight:900; color:var(--navy) }
.state p{ margin-top:9px; font-size:15px; line-height:1.85; color:var(--muted) }

@media (max-width:1024px){
  .states{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:760px){
  .states{ grid-template-columns:1fr; gap:12px; margin-top:28px }
  .state{ padding:20px 18px }
  .panel__r--2{ grid-template-columns:.8fr 1.5fr }
  .panel__tag{ font-size:11.5px; padding:2px 8px }
}


/* =========================================================
   通用手機示意元件（gp = generic phone）
   各工具頁的主視覺都用這組拼，不必每頁再寫 CSS
   ========================================================= */
.gp{ height:100%; display:flex; flex-direction:column; background:#eef1f5; font-size:11px }
.gp__bar{ flex:none; padding:14px 13px; background:var(--navy); color:#fff; text-align:center }
.gp__bar p{ font-size:11.5px; font-weight:900 }
.gp__bar span{ display:block; margin-top:3px; font-size:8.5px; opacity:.72 }
.gp__bar--b{ background:linear-gradient(135deg,var(--blue) 0%,var(--blue-700) 100%) }
.gp__bar--g{ background:linear-gradient(135deg,#17a65c 0%,#0d7a41 100%) }
.gp__b{ flex:1; display:flex; flex-direction:column; gap:8px; padding:10px; overflow:hidden }
.gp__c{
  flex:none; padding:11px 12px; background:#fff;
  border:1px solid var(--line); border-radius:10px;
}
.gp__c--flat{ padding:0; overflow:hidden }
.gp__c--on{ border-color:var(--blue-200); box-shadow:0 3px 10px rgba(0,130,209,.12) }
.gp__h{ font-size:11.5px; font-weight:900; color:var(--navy); line-height:1.35 }
.gp__s{ margin-top:4px; font-size:9px; line-height:1.6; color:var(--muted) }
.gp__lb{ font-size:8.5px; font-weight:700; color:var(--muted); letter-spacing:.04em }
.gp__big{ font-size:19px; font-weight:900; line-height:1; color:var(--orange) }
.gp__big small{ margin-left:3px; font-size:10px; font-weight:700; color:var(--muted) }

.gp__pill{
  display:inline-block; padding:2px 9px; border-radius:99px;
  font-size:8.5px; font-weight:700; background:var(--t-b); color:var(--t-bi);
}
.gp__pill--y{ background:var(--t-y); color:var(--t-yi) }
.gp__pill--r{ background:var(--t-r); color:var(--t-ri) }
.gp__pill--g{ background:var(--t-g); color:var(--t-gi) }
.gp__pill--m{ background:#f1f4f7; color:#9aaabb }

.gp__row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 0; border-bottom:1px solid #f2f4f6; font-size:9.5px; color:var(--muted);
}
.gp__row:last-child{ border-bottom:none }
.gp__row b{ font-weight:700; color:var(--navy) }
.gp__row b.o{ color:var(--orange) }

.gp__ph{
  display:grid; place-items:center; height:64px; border-radius:8px;
  background:linear-gradient(135deg,var(--blue-100) 0%,#dbe9f6 100%); color:var(--blue);
  font-size:22px;
}
.gp__ph--y{ background:linear-gradient(135deg,#fff0c2 0%,#ffe08a 100%); color:var(--t-yi) }
.gp__ph--g{ background:linear-gradient(135deg,#dff4e8 0%,#c3ead6 100%); color:var(--t-gi) }
.gp__ph--r{ background:linear-gradient(135deg,#fde2e2 0%,#f8cccc 100%); color:var(--t-ri) }

.gp__btn{
  display:block; margin-top:9px; padding:7px 0; border-radius:7px; text-align:center;
  background:var(--blue); color:#fff; font-size:9.5px; font-weight:700;
}
.gp__btn--gho{ background:#fff; border:1px solid var(--blue-200); color:var(--blue) }
.gp__btn--g{ background:#06c755 }

.gp__fld{
  margin-top:7px; padding:7px 9px; border-radius:7px;
  background:#f6f8fa; border:1px solid var(--line); font-size:9px; color:var(--muted);
}
.gp__fld b{ display:block; margin-bottom:3px; font-size:8.5px; font-weight:700; color:var(--navy) }
.gp__fld--on{ background:#fff; border-color:var(--blue); color:var(--navy) }

.gp__opts{ display:flex; gap:5px; margin-top:7px }
.gp__opts span{
  flex:1; padding:6px 0; text-align:center; border-radius:6px;
  background:#f6f8fa; border:1px solid var(--line); color:var(--muted);
  font-size:8.5px; font-weight:700;
}
.gp__opts span.on{ background:var(--t-b); border-color:transparent; color:var(--t-bi) }

.gp__qr{ display:block; width:58px; height:58px; margin:8px auto 0 }
.gp__qr--lg{ width:74px; height:74px }

.gp__tl{ margin-top:9px }
.gp__tl li{
  position:relative; padding-left:17px; padding-bottom:9px;
  font-size:9px; line-height:1.5; color:var(--muted);
}
.gp__tl li::before{
  content:""; position:absolute; left:2px; top:.35em; width:7px; height:7px;
  border-radius:50%; background:#d5dde5;
}
.gp__tl li::after{
  content:""; position:absolute; left:5px; top:1.1em; bottom:0; width:1.5px; background:#e7ecf1;
}
.gp__tl li:last-child{ padding-bottom:0 }
.gp__tl li:last-child::after{ display:none }
.gp__tl li.on::before{ background:var(--blue); box-shadow:0 0 0 3px var(--blue-050) }
.gp__tl li.on{ color:var(--navy); font-weight:700 }
.gp__tl b{ display:block; font-weight:900; color:var(--navy); font-size:9.5px }

.gp__msg{
  position:relative; margin-left:22px; padding:9px 11px; border-radius:3px 12px 12px 12px;
  background:#fff; border:1px solid var(--line); font-size:9px; line-height:1.65; color:var(--ink);
}
.gp__msg::before{
  content:""; position:absolute; left:-22px; top:0; width:17px; height:17px;
  border-radius:50%; background:#06c755;
}
.gp__msg b{ display:block; margin-bottom:3px; font-size:9.5px; font-weight:900; color:var(--navy) }

.gp__foot{
  flex:none; padding:9px 13px; text-align:center;
  background:#fff; border-top:1px solid var(--line);
  font-size:8.5px; color:var(--muted);
}

/* ---------- 瀏覽器視窗示意（廣告頁、快賣用）---------- */
.win{
  position:relative; z-index:2; margin-inline:auto; width:100%; max-width:390px;
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:var(--sh-3), 0 0 0 1px rgba(16,51,81,.07);
}
.win__bar{
  display:flex; align-items:center; gap:6px; padding:10px 13px;
  background:#f3f6f9; border-bottom:1px solid var(--line);
}
.win__dot{ width:8px; height:8px; border-radius:50%; background:#d7dfe7 }
.win__url{
  flex:1; margin-left:6px; padding:4px 10px; border-radius:99px;
  background:#fff; border:1px solid var(--line);
  font-size:9.5px; color:var(--muted); text-align:center;
}
.win__b{ padding:14px }
.win__hero{
  display:grid; place-items:center; height:104px; border-radius:10px; color:#fff;
  background:linear-gradient(135deg,var(--blue) 0%,var(--navy) 100%);
  font-size:15px; font-weight:900; text-align:center; line-height:1.4; padding:0 18px;
}
.win__g{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px }
.win__c{ padding:11px 12px; background:#f7f9fb; border:1px solid var(--line); border-radius:9px }
.win__c h4{ font-size:11px; font-weight:900; color:var(--navy) }
.win__c p{ margin-top:5px; font-size:9.5px; line-height:1.6; color:var(--muted) }
.win__fm{ margin-top:12px; padding:12px; background:var(--blue-050); border-radius:9px }
.win__fm .gp__fld{ margin-top:6px }
.win__fm .gp__fld:first-child{ margin-top:0 }

/* ---------- 工具索引卡 ---------- */
.tcard{
  display:flex; flex-direction:column; padding:26px 24px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--sh-1);
  transition:transform .25s var(--ez), box-shadow .25s var(--ez), border-color .25s var(--ez);
}
.tcard:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--blue-200) }
.tcard__ic{
  display:grid; place-items:center; width:50px; height:50px; border-radius:14px; font-size:24px;
}
.tcard h3{ margin-top:18px; font-size:19px; font-weight:900; color:var(--navy) }
.tcard p{ margin-top:11px; font-size:15.5px; line-height:1.9; color:var(--muted); flex:1 }
.tcard__go{
  display:inline-flex; align-items:center; gap:6px; margin-top:18px;
  font-size:15px; font-weight:700; color:var(--blue);
}
.tcard__go svg{ font-size:16px; transition:transform .25s var(--ez) }
.tcard:hover .tcard__go svg{ transform:translateX(4px) }
.tcard--soon{ background:var(--soft); box-shadow:none }
.tcard--soon:hover{ transform:none; box-shadow:none; border-color:var(--line) }
.tcard--soon .tcard__go{ color:var(--muted) }

/* ---------- 分組標題 ---------- */
.gh{ display:flex; align-items:center; gap:14px; margin:0 0 30px }
.gh h3{ flex:none; font-size:22px; font-weight:900; color:var(--navy) }
.gh span{ flex:none; font-size:15.5px; color:var(--muted) }
.gh::after{ content:""; flex:1; height:1px; background:var(--line) }
.gh + .grid{ margin-bottom:56px }

/* ---------- 情境列（需求頁與產業頁）---------- */
.sce{
  display:flex; gap:18px; padding:26px 28px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--sh-1);
}
.sce__n{
  flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
  background:var(--navy); color:#fff; font-size:17px; font-weight:900;
}
.sce h3{ font-size:18.5px; font-weight:900; color:var(--navy); line-height:1.5 }
.sce p{ margin-top:11px; font-size:16px; line-height:1.95; color:var(--muted) }
.sce__t{ display:flex; flex-wrap:wrap; gap:8px; margin-top:15px }
.sce__t a,.sce__t span{
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:99px;
  background:var(--blue-050); border:1px solid var(--blue-100);
  font-size:14px; font-weight:700; color:var(--blue-700);
}
.sce__t a:hover{ background:var(--blue-100); border-color:var(--blue-200) }

@media (max-width:760px){
  .tcard{ padding:22px 20px }
  .gh{ gap:10px; margin-bottom:22px }
  .gh h3{ font-size:19px }
  .gh span{ font-size:14px }
  .gh + .grid{ margin-bottom:38px }
  .sce{ flex-direction:column; gap:14px; padding:22px 20px }
  .win__g{ grid-template-columns:1fr }
  .win__hero{ height:88px; font-size:13.5px }
}

.grid--1{ grid-template-columns:1fr }
.scenes{ gap:18px }

/* ---------- FAQ 頁 ---------- */
.thero--slim{ padding-bottom:56px }
.thero--slim .thero__h1{ margin-top:4px }
.thero--slim .thero__lead{ max-width:760px }
.thero--slim .thero__lead b{ color:var(--blue); font-weight:900 }
.wrap--nar{ max-width:900px }
.fnav{ position:sticky; top:66px; z-index:20; background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line) }
.fnav__in{ display:flex; gap:9px; overflow-x:auto; padding-block:14px; scrollbar-width:none }
.fnav__in::-webkit-scrollbar{ display:none }
.fnav__a{ flex:none; display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px; border-radius:99px; background:var(--soft); border:1px solid var(--line);
  font-size:14.5px; font-weight:700; color:var(--navy); white-space:nowrap;
  transition:background .2s var(--ez), border-color .2s var(--ez) }
.fnav__a:hover{ background:var(--blue-050); border-color:var(--blue-200); color:var(--blue-700) }
.fnav__a em{ font-style:normal; font-size:12.5px; font-weight:700; color:var(--muted) }
.fgrp{ margin-bottom:52px; scroll-margin-top:130px }
.fgrp:last-child{ margin-bottom:0 }
.fgrp__h{ display:flex; align-items:baseline; gap:11px; margin-bottom:20px;
  font-size:23px; font-weight:900; color:var(--navy) }
.fgrp__h span{ font-size:14px; font-weight:700; color:var(--muted) }
.fgrp .faq{ max-width:none }
.faq__a p{ word-break:break-word }

@media (max-width:760px){
  .fnav{ top:60px }
  .fnav__a{ font-size:13.5px; padding:7px 13px }
  .fgrp{ margin-bottom:38px; scroll-margin-top:118px }
  .fgrp__h{ font-size:20px }
}

/* ---------- 案例頁 ---------- */
.cse{ margin-bottom:64px; scroll-margin-top:130px }
.cse:last-child{ margin-bottom:0 }
.cse__hd{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:34px;
  align-items:center; margin-bottom:34px }
.cse__ph{ margin:0; border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sh-2); background:var(--soft) }
.cse__ph img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block }
.cse__h{ margin-top:14px; font-size:30px; font-weight:900; line-height:1.4; color:var(--navy) }
.cse__lead{ margin-top:16px; font-size:17.5px; line-height:1.85; color:var(--blue-700); font-weight:700 }
.cse__b{ padding-top:30px; border-top:1px solid var(--line) }

/* 後台編輯器產生的內文，統一套排版 */
.rich{ font-size:16.5px; line-height:2.05; color:var(--ink) }
.rich p{ margin:0 0 18px }
.rich h2,.rich h3,.rich h4{ margin:34px 0 14px; font-weight:900; color:var(--navy); line-height:1.5 }
.rich h2{ font-size:24px } .rich h3{ font-size:21px } .rich h4{ font-size:18.5px }
.rich img{ max-width:100%; height:auto; border-radius:var(--r-m); margin:6px 0 }
.rich ul,.rich ol{ margin:0 0 18px; padding-left:22px }
.rich ul li{ list-style:disc } .rich ol li{ list-style:decimal }
.rich li{ margin-bottom:8px }
.rich a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px }
.rich a:hover{ color:var(--blue-700) }
.rich strong,.rich b{ font-weight:900; color:var(--navy) }
.rich table{ width:100%; border-collapse:collapse; margin:0 0 20px; font-size:15.5px }
.rich th,.rich td{ padding:11px 14px; border:1px solid var(--line); text-align:left }
.rich th{ background:var(--soft); font-weight:900; color:var(--navy) }
.rich iframe{ max-width:100%; border-radius:var(--r-m) }
.rich hr{ border:none; border-top:1px solid var(--line); margin:30px 0 }

@media (max-width:860px){
  .cse__hd{ grid-template-columns:1fr; gap:22px }
  .cse__h{ font-size:24px }
  .cse__lead{ font-size:16.5px }
  .cse{ margin-bottom:48px; scroll-margin-top:118px }
  .rich{ font-size:16px }
  .rich img[style]{ width:auto !important; float:none !important; margin:10px auto !important; display:block }
}

/* =========================================================
   保險：JS 沒生效時一律顯示內容
   捲動淡入的元素預設透明，靠 main.js 加 is-in 才顯示。
   若 main.js 掛掉、被擋或瀏覽器停用 JS，頁首那段 inline script 不會執行，
   html 上就不會有 has-js，這時下面的規則把所有內容還原成可見。
   ========================================================= */
html:not(.has-js) .reveal,
html:not(.has-js) .fl,
html:not(.has-js) .chip,
html:not(.has-js) .plus,
html:not(.has-js) .cta__art,
html:not(.has-js) .cta__tx,
html:not(.has-js) .cta__btns{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}
/* .cta 底色平常是淺色、文字是白的，沒有 is-in 會看不到字 */
html:not(.has-js) .cta{
  background:linear-gradient(100deg,var(--blue) 0%,var(--blue-700) 100%) !important;
}

/* ---------- 案例列表卡片 ---------- */
.clist{ display:grid; gap:22px }
.ccase{
  display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:0;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  overflow:hidden; box-shadow:var(--sh-1);
  transition:transform .25s var(--ez), box-shadow .25s var(--ez), border-color .25s var(--ez);
}
.ccase:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--blue-200) }
.ccase__ph{ display:block; background:var(--soft) }
.ccase__ph img{ width:100%; height:100%; min-height:240px; object-fit:cover; display:block }
.ccase__b{ display:block; padding:32px 34px }
.ccase__h{ display:block; margin-top:14px; font-size:25px; font-weight:900; color:var(--navy); line-height:1.4 }
.ccase__lead{ display:block; margin-top:13px; font-size:17px; font-weight:700; line-height:1.75; color:var(--blue-700) }
.ccase__p{ display:block; margin-top:13px; font-size:15.5px; line-height:1.95; color:var(--muted) }
.ccase__t{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px }
.ccase__t em{
  font-style:normal; padding:4px 11px; border-radius:99px;
  background:var(--blue-050); border:1px solid var(--blue-100);
  font-size:13px; font-weight:700; color:var(--blue-700);
}
.ccase__go{
  display:inline-flex; align-items:center; gap:6px; margin-top:20px;
  font-size:15.5px; font-weight:700; color:var(--blue);
}
.ccase__go svg{ font-size:16px; transition:transform .25s var(--ez) }
.ccase:hover .ccase__go svg{ transform:translateX(4px) }

/* ---------- 案例內頁 ---------- */
.cdt__tools{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:26px }
.cdt__tk{ font-size:14.5px; font-weight:700; color:var(--muted); margin-right:2px }
.cdt__tools .pairchip{ padding:9px 17px; font-size:14.5px }
.pairchip--flat{
  display:inline-flex; align-items:center; padding:9px 17px; border-radius:99px;
  background:var(--soft); border:1px solid var(--line);
  font-size:14.5px; font-weight:700; color:var(--muted);
}
.cdt__ph{ margin:0 0 34px; border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sh-2) }
.cdt__ph img{ width:100%; height:auto; display:block }

/* ---------- 其他案例（內頁底部）---------- */
.ccard{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sh-1);
  transition:transform .25s var(--ez), box-shadow .25s var(--ez), border-color .25s var(--ez);
}
.ccard:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--blue-200) }
.ccard__ph{ display:block; background:var(--soft) }
.ccard__ph img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block }
.ccard__b{ display:block; padding:22px 24px 26px }
.ccard__b b{ display:block; font-size:18px; font-weight:900; color:var(--navy); line-height:1.45 }
.ccard__b em{ display:block; margin-top:9px; font-style:normal; font-size:14.5px; line-height:1.8; color:var(--muted) }

@media (max-width:860px){
  .ccase{ grid-template-columns:1fr }
  .ccase__ph img{ min-height:0; aspect-ratio:16/9 }
  .ccase__b{ padding:26px 24px 30px }
  .ccase__h{ font-size:21px }
  .ccase__lead{ font-size:16px }
  .cdt__ph{ margin-bottom:26px }
  .cdt__tools{ margin-top:20px }
  .cdt__tools .pairchip,.pairchip--flat{ font-size:13.5px; padding:8px 14px }
}

/* 組合區的 chip 改成連得到工具頁，加一點可點擊的提示 */
a.chip{ transition:transform .25s var(--ez), box-shadow .25s var(--ez), border-color .25s var(--ez) }
a.chip:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--blue-200) }

/* =========================================================
   右側快速聯絡（LINE / 電話 / 回頂端）
   按鈕固定正圓、圖示放大到接近圓框；說明文字改成滑過時浮在左側，
   這樣放大圖示不會把按鈕撐成橢圓。手機沒有 hover，只留圓形圖示。
   ========================================================= */
.dock{
  position:fixed; right:18px; bottom:20px; z-index:60;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.dock__b{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:54px; height:54px; padding:0; border-radius:50%;
  background:#fff; border:1px solid var(--line); box-shadow:var(--sh-2);
  color:var(--navy); cursor:pointer;
  transition:transform .22s var(--ez), box-shadow .22s var(--ez);
}
.dock__b svg{ flex:none; font-size:31px }
.dock__b:hover{ transform:translateY(-2px); box-shadow:var(--sh-3) }
.dock__b:focus-visible{ outline:3px solid var(--blue-200); outline-offset:3px }

/* 說明文字：絕對定位浮在按鈕左邊，不影響按鈕尺寸 */
.dock__b span{
  position:absolute; right:calc(100% + 10px); top:50%;
  padding:8px 15px; border-radius:999px;
  background:var(--navy); color:#fff;
  font-size:14px; font-weight:700; white-space:nowrap;
  opacity:0; pointer-events:none;
  transform:translateY(-50%) translateX(6px);
  transition:opacity .2s var(--ez), transform .2s var(--ez);
  box-shadow:var(--sh-2);
}
.dock__b:hover span,
.dock__b:focus-visible span{ opacity:1; transform:translateY(-50%) }

.dock__b--line{ background:#06c755; border-color:#06c755; color:#fff }
.dock__b--tel{ background:var(--blue); border-color:var(--blue); color:#fff }
.dock__b--top{
  opacity:0; visibility:hidden;
  transform:translateY(10px);
  transition:opacity .25s var(--ez), transform .25s var(--ez), visibility .25s,
             box-shadow .22s var(--ez);
}
.dock__b--top svg{ font-size:26px; rotate:-90deg }
.dock.is-on .dock__b--top{ opacity:1; visibility:visible; transform:none }
.dock.is-on .dock__b--top:hover{ transform:translateY(-2px) }

@media (max-width:760px){
  .dock{ right:12px; bottom:14px; gap:8px }
  .dock__b{ width:50px; height:50px }
  .dock__b svg{ font-size:28px }
  .dock__b--top svg{ font-size:23px }
  /* 手機沒有滑鼠，不顯示說明文字 */
  .dock__b span{ display:none }
}

@media (prefers-reduced-motion:reduce){
  .dock__b,.dock__b span,.dock__b--top{ transition:none }
}