/* ============================================================
   KS DIGI 官網 v4
   排版參考 ibest（白底＋單一強調色＋方塊 CTA＋三欄案例）
   語氣參考 Wix（短句、對你講話、講好處）
   強調色三選一：?c=red / green / ink
   ============================================================ */

/* 基準色＝logo 的墨 #1C2120（不是純黑，帶一點綠味），
   所以整套灰階都往綠味偏一點點，才跟 logo 是同一家人 */
:root{
  --bg:#fff;
  --bg-soft:#F6F7F6;
  --surface:#fff;
  --grid:rgba(22,24,28,.05);
  --glow:rgba(255,255,255,.9);
  --shadow:rgba(20,26,24,.1);
  --ft-bg:#111316;
  --ink:#1C2120;
  --ink-2:#414846;
  --ink-3:#79817E;
  --line:#E4E7E5;
  --acc:#343A3C;
  --acc-2:#1F2528;
  --acc-deep:#1F2528;
  --acc-soft:#ECEEEF;
  --hero-a:#F2F3F4;
  --hero-b:#FCFDFD;
  --e:cubic-bezier(.22,1,.36,1);
  --pad:clamp(56px,7vw,104px);
  --r:14px;
}
/* 六個強調色，都是「主色 → 深色」的漸層，比單一平色有精神 */
html[data-c="teal"]  {--acc:#12A594;--acc-2:#0B7A78;--acc-deep:#0B7A6C;--acc-soft:#E4F5F2;--hero-a:#E9F6F4;--hero-b:#FBFEFD}
html[data-c="indigo"]{--acc:#5B4BEA;--acc-2:#8B3FE0;--acc-deep:#4335C6;--acc-soft:#EDEBFD;--hero-a:#F0EEFE;--hero-b:#FCFBFF}
html[data-c="amber"] {--acc:#F0790E;--acc-2:#DB4A08;--acc-deep:#C25C05;--acc-soft:#FDF0E2;--hero-a:#FEF4EA;--hero-b:#FFFCFA}
html[data-c="rose"]  {--acc:#E23A6D;--acc-2:#B62A8E;--acc-deep:#C02356;--acc-soft:#FDEAF0;--hero-a:#FEEFF4;--hero-b:#FFFBFC}
html[data-c="lime"]  {--acc:#4C9A2A;--acc-2:#237A53;--acc-deep:#3B7C20;--acc-soft:#EDF6E7;--hero-a:#F1F8EC;--hero-b:#FCFEFB}
/* 舊版第 6 組：深灰藍 × 霧灰 × 珊瑚橘（底色是冷灰不是純白） */
html[data-c="slate"] {
  --bg:#F0F1EE;--bg-soft:#E8EAE6;--surface:#FCFCFB;--line:#DBDED8;
  --ink:#26313A;--ink-2:#4E5A63;--ink-3:#6C7780;
  --acc:#D2603F;--acc-2:#B34A2C;--acc-deep:#B34A2C;--acc-soft:#FAEBE4;
  --hero-a:#E9EBE7;--hero-b:#F4F5F2;
  --btn:linear-gradient(140deg,#2B3A42,#1E2A31);
  --grid:rgba(38,49,58,.06);--shadow:rgba(38,49,58,.12);--ft-bg:#222C33;
}
html[data-c="dgreen"]{--acc:#26382F;--acc-2:#16241D;--acc-deep:#16241D;--acc-soft:#EAEFEC;--hero-a:#EFF3F1;--hero-b:#FCFDFC}
html[data-c="dgrey"] {--acc:#343A3C;--acc-2:#1F2528;--acc-deep:#1F2528;--acc-soft:#ECEEEF;--hero-a:#F1F3F3;--hero-b:#FCFDFD}
html[data-c="ink"]   {--acc:#1C2120;--acc-2:#3A4442;--acc-deep:#000;--acc-soft:#EFF1F0;--hero-a:#F1F3F2;--hero-b:#FCFCFC}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Noto Sans TC','Microsoft JhengHei',sans-serif;
  background:var(--bg);color:var(--ink);
  font-size:15.5px;line-height:1.95;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--acc);color:#fff}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(18px,3.6vw,40px)}

/* ---------- header ---------- */
.hd{
  position:sticky;top:0;z-index:60;background:var(--surface);
  border-bottom:1px solid var(--line);
  display:flex;align-items:stretch;justify-content:space-between;
}
.hd-in{display:flex;align-items:center;gap:clamp(16px,3vw,44px);padding-left:clamp(18px,3vw,34px);flex:1;min-width:0}
.brand{display:flex;align-items:center;gap:11px;flex:none;padding:14px 0}
/* logo 用裁掉留白、加過對比的版本，52px 也看得清楚，不再套濾鏡 */
.brand img{width:50px;height:50px;flex:none}
.ft .brand img{filter:brightness(0) invert(1)}
.brand b{font-size:15px;font-weight:700;letter-spacing:.06em;line-height:1.25;display:block}
.brand span{font-size:10.5px;color:var(--ink-3);letter-spacing:.08em;display:block;line-height:1.3}
.hd nav{display:flex;gap:clamp(12px,1.9vw,30px);font-size:14.5px;font-weight:500;overflow:hidden}
.hd nav a{padding:6px 0;position:relative;white-space:nowrap;transition:color .25s}
.hd nav a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--acc);transition:right .35s var(--e);
}
.hd nav a.on{color:var(--acc);font-weight:700}
.hd nav a.on::after{right:0}
.hd nav a:hover{color:var(--acc)}
.hd nav a:hover::after{right:0}
.hd .cta{
  background:var(--btn,linear-gradient(140deg,var(--acc),var(--acc-2)));color:#fff;font-weight:700;font-size:15px;
  display:flex;align-items:center;padding:0 clamp(20px,2.6vw,38px);
  transition:background .3s;flex:none;
}
.hd .cta:hover{background:var(--acc-deep)}
.burger{display:none;background:none;border:0;padding:16px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;transition:transform .35s var(--e),opacity .25s}
body.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- 共用 ---------- */
.sec{padding:var(--pad) 0}
.sec.soft{background:var(--bg-soft)}
.sec-h{text-align:center;margin-bottom:clamp(30px,4vw,56px)}
.sec-h h2{
  font-size:clamp(1.45rem,3.1vw,2.3rem);font-weight:700;
  line-height:1.45;letter-spacing:.01em;
}
.sec-h p{margin-top:12px;color:var(--ink-2);font-size:15px;max-width:40em;margin-inline:auto}
/* 標題一律墨色，橘色只留在標題上方那一小條 */
.sec-h em{font-style:normal;color:inherit}
.sec-h h2::before{
  content:'';display:block;width:32px;height:3px;border-radius:2px;
  background:var(--acc);margin:0 auto 18px;
}
.sec-h.left{text-align:left}
.sec-h.left h2::before{margin-inline:0}
.sec-h.left p{margin-inline:0}

/* 小標籤（頁面上方那行英文／短句），橘色的量剛好 */
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--acc);
  text-transform:uppercase;margin-bottom:14px;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 30px;font-size:15px;font-weight:700;border-radius:8px;
  transition:background .3s,color .3s,transform .3s var(--e),box-shadow .3s var(--e);
}
.btn-1{background:var(--btn,linear-gradient(140deg,var(--acc),var(--acc-2)));color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.btn-1:hover{background:var(--acc-deep);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.14)}
.btn-2{border:1.5px solid var(--line);color:var(--ink);background:var(--surface)}
.btn-2:hover{border-color:var(--ink);transform:translateY(-2px)}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(48px,6.4vw,86px) 0 clamp(30px,4vw,52px);
  background:linear-gradient(175deg,var(--hero-a),var(--hero-b) 62%,#fff);
}
.hero h1{
  font-size:clamp(1.9rem,4.7vw,3.2rem);font-weight:900;
  line-height:1.34;letter-spacing:.005em;
}
.hero h1 span{display:block}
.hero .sub{
  margin:clamp(14px,2vw,22px) auto 0;max-width:38em;
  color:var(--ink-2);font-size:clamp(14.5px,1.5vw,16.5px);
}
.hero .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:clamp(22px,3vw,32px)}

/* ---------- 會動的背景 ---------- */
.hero .aurora{position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;filter:saturate(1.1)}
.hero .aurora i{
  position:absolute;display:block;border-radius:50%;
  opacity:.5;will-change:transform;
}
.hero .aurora i:nth-child(1){
  width:52vw;height:52vw;left:-8%;top:-14%;
  background:radial-gradient(circle at 35% 35%,var(--acc-soft),transparent 68%);
  animation:drift1 26s ease-in-out infinite alternate;
}
.hero .aurora i:nth-child(2){
  width:44vw;height:44vw;right:-6%;top:-8%;
  background:radial-gradient(circle at 60% 40%,var(--acc-soft),transparent 66%);
  animation:drift2 32s ease-in-out infinite alternate;
}
.hero .aurora i:nth-child(3){
  width:60vw;height:60vw;left:22%;bottom:-32%;
  background:radial-gradient(circle at 50% 50%,var(--glow),transparent 62%);
  animation:drift3 38s ease-in-out infinite alternate;
}
@keyframes drift1{to{transform:translate3d(7vw,4vh,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(-6vw,6vh,0) scale(1.08)}}
@keyframes drift3{to{transform:translate3d(4vw,-5vh,0) scale(1.14)}}
/* 細網格，隨滑鼠微移 */
.hero .grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--grid) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 34%,#000 8%,transparent 76%);
  mask-image:radial-gradient(70% 60% at 50% 34%,#000 8%,transparent 76%);
  will-change:transform;
}
.hero .wrap{position:relative;z-index:3}

/* 滑鼠視差：由 JS 餵 --mx / --my */
.px{will-change:transform}

/* 卡片微傾（JS 給 --rx / --ry） */
.tilt{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .5s var(--e),box-shadow .4s var(--e),border-color .3s;
  transform-style:preserve-3d;
}
.tilt.act{transition:transform .12s linear,box-shadow .4s var(--e),border-color .3s}

/* 數字跳動 */
.trust b{font-variant-numeric:tabular-nums}

/* hero 漂浮裝飾 */
.deco,.hero .card{position:absolute;z-index:2;pointer-events:none}
.deco{
  width:clamp(46px,4.6vw,62px);aspect-ratio:1;border-radius:18px;
  display:grid;place-items:center;
}
.deco svg{width:46%;height:46%;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round}
.d-a{
  left:clamp(12px,7vw,120px);top:clamp(52px,7vw,110px);
  background:linear-gradient(150deg,var(--acc),var(--acc-deep));
  box-shadow:0 14px 30px rgba(0,0,0,.16);
  animation:fl 7s ease-in-out infinite alternate;
}
.d-b{
  right:clamp(12px,7.6vw,132px);top:clamp(38px,5.4vw,84px);
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 12px 28px var(--shadow);
  animation:fl 8.6s .4s ease-in-out infinite alternate-reverse;
}
.d-b svg{stroke:var(--acc);fill:var(--acc)}
.hero .card{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:14px 18px;box-shadow:0 16px 38px rgba(20,24,32,.12);
  text-align:left;
}
.hero .card .lab{font-size:11.5px;color:var(--ink-3);line-height:1.6}
.hero .card .num{font-size:15px;font-weight:700;color:var(--acc);line-height:1.5}
.hero .card .num.big{font-size:clamp(26px,2.6vw,34px);line-height:1.15}
.hero .card .num.big em{font-style:normal;font-size:.6em;margin-left:2px}
.c-a{
  left:clamp(6px,3vw,52px);top:clamp(146px,15vw,232px);width:clamp(148px,14vw,182px);
  animation:fl 9s .2s ease-in-out infinite alternate;
}
.c-a .spark{width:100%;height:30px;margin-top:6px;fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round}
.c-b{
  right:clamp(6px,3.4vw,58px);top:clamp(160px,16vw,252px);width:clamp(138px,13vw,168px);
  animation:fl 10s .5s ease-in-out infinite alternate-reverse;
}
@keyframes fl{from{translate:0 0}to{translate:0 -13px}}
@media(max-width:1120px){.deco,.hero .card{display:none}}

/* 分層浮動的介面 */
.shots{
  position:relative;margin:clamp(30px,4.4vw,58px) auto 0;
  width:min(1080px,94vw);height:clamp(220px,30vw,420px);
}
.shot{
  position:absolute;border-radius:12px;overflow:hidden;background:#fff;
  box-shadow:0 18px 50px rgba(20,24,32,.14),0 2px 6px rgba(20,24,32,.06);
  border:1px solid rgba(20,24,32,.07);
}
.shot .bar{height:22px;background:#F2F3F5;display:flex;align-items:center;gap:5px;padding:0 9px;border-bottom:1px solid #E9EAED}
.shot .bar i{width:7px;height:7px;border-radius:50%;background:#D6D8DC;display:block}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.shot.mid{
  left:50%;top:0;transform:translateX(-50%);
  width:54%;height:100%;z-index:3;
  animation:floatY 7s ease-in-out infinite alternate;
}
.shot.mid img{height:calc(100% - 22px)}
.shot.l{left:0;top:14%;width:31%;height:74%;z-index:2;animation:floatY 8.5s .6s ease-in-out infinite alternate-reverse}
.shot.r{right:0;top:20%;width:31%;height:70%;z-index:2;animation:floatY 9.5s .3s ease-in-out infinite alternate}
.shot.l img,.shot.r img{height:calc(100% - 22px)}
@keyframes floatY{from{translate:0 0}to{translate:0 -14px}}
@media(max-width:760px){.shot.l,.shot.r{display:none}.shot.mid{width:88%}}

/* ---------- 成績數字（原本擠在 hero 底下的小字，改成獨立區塊） ---------- */
.stats{padding:clamp(40px,5vw,68px) 0;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.stat-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.6vw,34px);
}
.stat-row > div{
  text-align:center;position:relative;
  padding:0 clamp(6px,1.4vw,18px);
}
.stat-row > div + div::before{
  content:'';position:absolute;left:0;top:14%;bottom:14%;width:1px;background:var(--line);
}
.stat-row .v{
  font-size:clamp(1.9rem,4vw,2.9rem);font-weight:900;line-height:1.1;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;justify-content:center;gap:2px;
}
.stat-row .v i{font-style:normal;font-size:.44em;font-weight:700;color:var(--acc)}
.stat-row .k{margin-top:9px;font-size:14px;font-weight:700}
.stat-row .d{margin-top:4px;font-size:12.5px;color:var(--ink-3);line-height:1.7}
@media(max-width:760px){
  .stat-row{grid-template-columns:1fr 1fr;gap:26px 12px}
  .stat-row > div:nth-child(odd)::before{display:none}
}

/* ---------- 品牌牆 ---------- */
.brands{padding:clamp(30px,3.6vw,48px) 0;border-bottom:1px solid var(--line)}
.brands p{text-align:center;font-size:13px;color:var(--ink-3);letter-spacing:.1em;margin-bottom:22px}
.brand-row{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(14px,2.4vw,38px);
}
.brand-row span{
  font-size:clamp(13px,1.35vw,15.5px);font-weight:700;letter-spacing:.05em;
  color:#A9AEB6;transition:color .3s;
}
.brand-row span:hover{color:var(--ink)}

/* ---------- 三欄好處 ---------- */
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.9vw,24px)}
.feat article{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.6vw,34px);
  transition:border-color .3s,transform .35s var(--e),box-shadow .35s var(--e);
}
.feat article:hover{border-color:var(--acc);transform:translateY(-4px);box-shadow:0 14px 34px rgba(20,24,32,.08)}
.feat .ic{
  width:44px;height:44px;border-radius:11px;background:var(--acc-soft);
  display:grid;place-items:center;margin-bottom:16px;
}
.feat .ic svg{width:21px;height:21px;stroke:var(--acc);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feat h3{font-size:17px;font-weight:700;margin-bottom:8px;letter-spacing:.02em}
.feat p{font-size:14px;color:var(--ink-2);line-height:1.9}
@media(max-width:1080px){.feat{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.feat{grid-template-columns:1fr}}

/* ---------- 服務 ---------- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,28px)}
.svc a{
  border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.4vw,30px);
  background:var(--surface);display:block;position:relative;overflow:hidden;
  transition:border-color .3s,transform .35s var(--e),box-shadow .35s var(--e);
}
.svc a::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc);
  transform:scaleY(0);transform-origin:top;transition:transform .4s var(--e);
}
.svc a:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(20,24,32,.08);border-color:var(--line)}
.svc a:hover::before{transform:scaleY(1)}
.svc .n{font-size:12px;font-weight:700;color:var(--acc);letter-spacing:.16em;display:block;margin-bottom:10px}
.svc h3{font-size:17.5px;font-weight:700;margin-bottom:9px}
.svc p{font-size:14.5px;color:var(--ink-2)}
.svc .go{margin-top:14px;font-size:13.5px;font-weight:700;color:var(--acc);display:inline-flex;gap:7px;transition:gap .3s var(--e)}
.svc a:hover .go{gap:12px}
@media(max-width:900px){.svc{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.svc{grid-template-columns:1fr}}

/* ---------- 作品案例（ibest 式三欄） ---------- */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px) clamp(18px,2.6vw,34px)}
.work figure{
  position:relative;border-radius:var(--r);overflow:hidden;background:var(--bg-soft);
  aspect-ratio:16/10;
}
/* 內層做捲動視差，img 自己做 hover 慢推 */
.work figure .inner{position:absolute;inset:-7% 0;will-change:transform}
.work figure img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform 1.2s var(--e),filter .5s;
}
.work:hover figure img{transform:scale(1.07)}
/* 掃過去的反光 */
.work figure::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.42) 47%,transparent 58%);
  transform:translateX(-130%);transition:transform 0s;
}
.work:hover figure::after{transform:translateX(130%);transition:transform .95s var(--e) .05s}
/* hover 時浮出來的標籤 */
.work figure .veil{
  position:absolute;inset:0;z-index:2;background:rgba(28,33,32,.34);
  opacity:0;transition:opacity .4s var(--e);
}
.work figure .view{
  position:absolute;left:50%;top:50%;z-index:3;
  transform:translate(-50%,-50%) scale(.82);opacity:0;
  background:var(--acc);color:#fff;white-space:nowrap;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;
  padding:11px 20px;border-radius:999px;
  box-shadow:0 10px 26px rgba(0,0,0,.24);
  transition:opacity .4s var(--e),transform .5s var(--e);
}
.work:hover .veil{opacity:1}
.work:hover .view{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* 捲進畫面時由下往上掀開 */
.work figure{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--e)}
.work.in figure{clip-path:inset(0 0 0 0)}
.work h3{font-size:17px;font-weight:700;margin:16px 0 12px;transition:color .25s}
.work:hover h3{color:var(--acc)}
.work .tags{
  border-top:1px solid var(--line);padding-top:12px;
  display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--ink-2);
}
.work .tags i{color:var(--acc);font-style:normal;font-size:11px}
@media(max-width:900px){.works{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.works{grid-template-columns:1fr}}
.more-line{text-align:center;margin-top:clamp(28px,3.6vw,46px)}

/* ---------- 流程 ---------- */
.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.6vw,20px);position:relative}
.flow::before{content:'';position:absolute;left:0;right:0;top:17px;height:1px;background:var(--line)}
.flow div{position:relative;text-align:center}
.flow .n{
  width:34px;height:34px;border-radius:50%;background:var(--ink);border:1.5px solid var(--ink);
  color:#fff;font-weight:700;font-size:13px;
  display:grid;place-items:center;margin:0 auto 12px;position:relative;z-index:2;
}
.flow h4{font-size:14.5px;font-weight:700}
@media(max-width:760px){.flow{grid-template-columns:repeat(3,1fr);gap:24px 12px}.flow::before{display:none}}

/* ---------- 客戶回饋 ---------- */
.voice{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,26px)}
.voice article{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.6vw,32px)}
.voice q{display:block;quotes:none;font-size:15.5px;line-height:2}
.voice .who{margin-top:16px;font-size:13.5px;color:var(--ink-3)}
.voice .who b{color:var(--ink);font-weight:700;margin-right:9px}
.stars{color:var(--acc);font-size:13px;letter-spacing:.18em;margin-bottom:12px}
@media(max-width:760px){.voice{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{max-width:900px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-size:16px;font-weight:700;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--e),border-color .3s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);border-color:var(--acc)}
.faq p{padding:0 0 22px;color:var(--ink-2);font-size:14.5px}

/* ---------- CTA ---------- */
.cta-band{background:var(--btn,linear-gradient(140deg,var(--acc),var(--acc-2)));color:#fff;text-align:center;padding:clamp(50px,6.4vw,86px) 0}
.cta-band h2{font-size:clamp(1.4rem,3vw,2.2rem);font-weight:700;line-height:1.45}
.cta-band p{margin-top:14px;color:rgba(255,255,255,.86);max-width:34em;margin-inline:auto;font-size:15px}
.cta-band .btn{margin-top:26px;background:#fff;color:var(--acc)}
.cta-band .btn:hover{background:#111;color:#fff}

/* ---------- footer ---------- */
.ft{background:var(--ft-bg);color:#B9BEC6;padding:clamp(44px,5.4vw,72px) 0 26px;font-size:14px}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,60px)}
.ft .brand b,.ft .brand span{color:#fff}
.ft .brand span{color:#7E848D}
.ft-desc{margin-top:14px;max-width:26em;line-height:1.9}
.ft h5{color:#fff;font-size:14px;font-weight:700;margin-bottom:14px}
.ft li{margin-bottom:9px}
.ft a{transition:color .25s}
.ft a:hover{color:#fff}
.ft-btm{
  margin-top:clamp(30px,4vw,52px);padding-top:20px;border-top:1px solid #23262B;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#7E848D;
}
@media(max-width:760px){.ft-grid{grid-template-columns:1fr}}

/* ---------- 浮動 LINE ---------- */
.float-line{
  position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(16px,2.4vw,30px);z-index:70;
  background:#06C755;color:#fff;font-weight:700;font-size:14.5px;
  padding:13px 22px;border-radius:999px;display:inline-flex;align-items:center;gap:9px;
  box-shadow:0 10px 28px rgba(6,199,85,.35);
  transition:transform .3s var(--e),box-shadow .3s var(--e);
}
.float-line:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(6,199,85,.5)}
/* 還在第一屏時先藏起來，免得壓到作品格 */
.float-line{opacity:0;pointer-events:none;transform:translateY(14px)}
body.past-hero .float-line{opacity:1;pointer-events:auto;transform:none}
.float-line svg{width:19px;height:19px;fill:#fff}

/* ---------- 換色（挑定後刪） ---------- */
.picker{
  position:fixed;left:clamp(12px,2vw,22px);bottom:clamp(16px,2.4vw,30px);z-index:70;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:7px 12px;display:flex;align-items:center;gap:8px;
  box-shadow:0 6px 20px rgba(20,24,32,.1);
}
.picker em{font-style:normal;font-size:11.5px;color:var(--ink-3)}
.picker button{width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.1);cursor:pointer;padding:0}
.picker button[data-c="teal"]{background:linear-gradient(140deg,#12A594,#0B7A78)}
.picker button[data-c="indigo"]{background:linear-gradient(140deg,#5B4BEA,#8B3FE0)}
.picker button[data-c="amber"]{background:linear-gradient(140deg,#F0790E,#DB4A08)}
.picker button[data-c="rose"]{background:linear-gradient(140deg,#E23A6D,#B62A8E)}
.picker button[data-c="lime"]{background:linear-gradient(140deg,#4C9A2A,#237A53)}
.picker button[data-c="dgreen"]{background:linear-gradient(140deg,#26382F,#16241D)}
.picker button[data-c="dgrey"]{background:linear-gradient(140deg,#343A3C,#1F2528)}
.picker button[data-c="ink"]{background:linear-gradient(140deg,#1C2120,#3A4442)}
.picker button.on{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- 捲動顯現 ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--e),transform .8s var(--e)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important}
  .shot{animation:none!important}
}

/* ---------- 手機選單 ---------- */
@media(max-width:1000px){
  .burger{display:block}
  .hd nav{
    position:fixed;inset:64px 0 auto 0;background:#fff;flex-direction:column;gap:0;
    border-bottom:1px solid var(--line);padding:8px 0 14px;
    display:none;
  }
  body.nav-open .hd nav{display:flex}
  .hd nav a{padding:12px clamp(18px,4vw,30px);font-size:16px}
  .hd .cta{padding:0 18px;font-size:14px}
}

/* ============================================================
   Hero 主視覺：KS 工作台（結構學 ibest 的介面合成圖，內容換成我們自己的）
   ============================================================ */
.app{
  position:relative;z-index:3;text-align:left;
  width:min(1080px,94%);margin:clamp(26px,3.4vw,44px) auto 0;
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 30px 70px rgba(20,26,24,.16),0 4px 12px rgba(20,26,24,.06);
}
.app-top{
  display:flex;align-items:center;gap:14px;
  padding:0 14px;height:44px;background:#F7F8F8;border-bottom:1px solid var(--line);
}
.app-top .dots{display:flex;gap:6px}
.app-top .dots i{width:9px;height:9px;border-radius:50%;background:#D8DBDA;display:block}
.app-top .tabs{
  display:flex;gap:2px;background:#EDEFEE;border-radius:8px;padding:3px;margin:0 auto;
  font-size:12.5px;font-weight:500;color:var(--ink-3);
}
.app-top .tabs b,.app-top .tabs span{padding:4px 14px;border-radius:6px;font-weight:500}
.app-top .tabs b{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.app-top .pub{
  font-size:12px;font-weight:700;color:#fff;padding:6px 14px;border-radius:6px;
  background:linear-gradient(140deg,var(--acc),var(--acc-2));
}
.app-body{display:grid;grid-template-columns:170px 1fr 208px;height:clamp(230px,25vw,340px)}
.app .ttl{font-size:10.5px;letter-spacing:.14em;color:var(--ink-3);margin:0 0 8px;font-weight:700}
.layers{padding:16px 14px;border-right:1px solid var(--line);background:#FCFCFC;overflow:hidden}
.layers li{
  font-size:12.5px;color:var(--ink-2);padding:5px 9px;border-radius:6px;line-height:1.6;
  transition:background .3s,color .3s;
}
.layers li.on{background:var(--acc-soft);color:var(--acc);font-weight:700}
.layers ul{margin-bottom:14px}
.layers .thin li{color:var(--ink-3);font-size:12px}
.canvas{padding:14px;background:#F1F3F2;display:flex;flex-direction:column;gap:10px;min-width:0}
.canvas .frame{position:relative;flex:1;border-radius:9px;overflow:hidden;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.07)}
.canvas .cv{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;transform:scale(1.04);transition:opacity 1s var(--e),transform 5s linear;
}
.canvas .cv.on{opacity:1;transform:scale(1)}
.cv-name{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cv-name b{font-size:13.5px;font-weight:700}
.cv-name span{font-size:11.5px;color:var(--ink-3)}
.panel{padding:16px 14px;border-left:1px solid var(--line);background:#FCFCFC}
.panel .score{position:relative;width:76px;height:76px;margin:0 auto 12px}
.panel .score svg{width:100%;height:100%;transform:rotate(-90deg)}
.panel .score circle{fill:none;stroke-width:5;stroke-linecap:round}
.panel .score .bg{stroke:#E7EAE9}
.panel .score .fg{stroke:var(--acc);stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s var(--e)}
.panel .score.go .fg{stroke-dashoffset:2}
.panel .score b{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:20px;font-weight:900;color:var(--acc);font-variant-numeric:tabular-nums;
}
.panel .checks li{
  font-size:12px;color:var(--ink-2);padding:5px 0 5px 20px;position:relative;
  opacity:0;transform:translateX(-6px);transition:opacity .5s var(--e),transform .5s var(--e);
}
.panel .checks.go li{opacity:1;transform:none}
.panel .checks.go li:nth-child(2){transition-delay:.14s}
.panel .checks.go li:nth-child(3){transition-delay:.28s}
.panel .checks.go li:nth-child(4){transition-delay:.42s}
.panel .checks li::before{
  content:'';position:absolute;left:2px;top:11px;width:9px;height:5px;
  border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);
  transform:rotate(-45deg);
}
.panel .rank{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;color:var(--ink-3);
}
.panel .rank b{font-size:13px;font-weight:700;color:var(--ink)}
@media(max-width:900px){
  .app-body{grid-template-columns:1fr;height:auto}
  .layers,.panel{display:none}
  .canvas{height:clamp(190px,46vw,260px)}
}

/* ============================================================
   作品：五格，滑鼠碰到哪一格哪一格撐開
   ============================================================ */
.acc{display:flex;gap:10px;height:clamp(200px,19vw,270px)}
.acc-i{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:14px;
  background-size:cover;background-position:top center;
  transition:flex .5s cubic-bezier(.4,0,.2,1),box-shadow .5s var(--e);
  box-shadow:0 8px 22px rgba(20,26,24,.1);
  will-change:flex-grow;contain:paint;
}
.acc-i::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,26,24,.05) 0%,rgba(20,26,24,.22) 46%,rgba(20,26,24,.8) 100%);
}
/* 預設五格等寬，滑到哪格哪格撐開 */
.acc .acc-i:hover{flex:2.6 1 0;box-shadow:0 18px 44px rgba(20,26,24,.24)}
.acc-d,.acc-v{will-change:opacity,transform}
/* 沒滑到的時候：橫的店名 */
.acc-v{
  position:absolute;left:16px;right:16px;bottom:14px;
  color:#fff;font-size:13.5px;font-weight:700;letter-spacing:.02em;
  line-height:1.5;
  opacity:1;transition:opacity .3s var(--e);
}
.acc .acc-i:hover .acc-v{opacity:0}
/* 撐開時：完整資訊 */
.acc-d{
  position:absolute;left:22px;right:22px;bottom:20px;color:#fff;
  opacity:0;transform:translateY(10px);transition:opacity .45s .2s var(--e),transform .45s .2s var(--e);
}
.acc .acc-i:hover .acc-d{opacity:1;transform:none}
.acc-d b{display:block;font-size:clamp(16px,1.6vw,20px);font-weight:900;letter-spacing:.01em}
.acc-d em{display:block;font-style:normal;font-size:12.5px;color:rgba(255,255,255,.8);margin-top:4px}
.acc-d i{
  display:inline-flex;align-items:center;gap:8px;margin-top:11px;
  font-style:normal;font-size:12px;font-weight:700;letter-spacing:.05em;
  background:linear-gradient(140deg,var(--acc),var(--acc-2));color:#fff;
  padding:8px 16px;border-radius:999px;
}
@media(max-width:820px){
  .acc{flex-direction:column;height:auto;gap:12px}
  .acc-i{height:160px;flex:none}
  .acc .acc-i:hover{flex:none;height:250px}
}

/* 五格撐開式放進 HERO：矮一點、寬一點 */
.hero-acc{
  position:relative;z-index:3;
  width:min(1120px,94%);margin:clamp(26px,3.4vw,44px) auto 0;
  height:clamp(200px,19vw,270px);
}
.hero-acc .acc-d b{font-size:clamp(16px,1.7vw,21px)}
@media(max-width:820px){
  .hero-acc{height:auto}
}


/* ============================================================
   深色底：深綠 / 深灰（強調色照樣可以切）
   ============================================================ */
html[data-bg="forest"]{
  --bg:#121816;--bg-soft:#172020;--surface:#1A2422;--line:rgba(255,255,255,.10);
  --ink:#EAF1EE;--ink-2:#AFBDB8;--ink-3:#7F8D89;
  --acc-soft:rgba(255,255,255,.07);
  --hero-a:#16211E;--hero-b:#121816;
  --grid:rgba(255,255,255,.05);--glow:rgba(255,255,255,.05);
  --shadow:rgba(0,0,0,.5);--ft-bg:#0D1211;
}
html[data-bg="graphite"]{
  --bg:#16181A;--bg-soft:#1B1E20;--surface:#1E2225;--line:rgba(255,255,255,.10);
  --ink:#ECEEEF;--ink-2:#B2B8BB;--ink-3:#828A8E;
  --acc-soft:rgba(255,255,255,.07);
  --hero-a:#1A1E21;--hero-b:#16181A;
  --grid:rgba(255,255,255,.05);--glow:rgba(255,255,255,.05);
  --shadow:rgba(0,0,0,.5);--ft-bg:#0F1113;
}
/* 深色底時要修的地方 */
html[data-bg="forest"] .brand img,
html[data-bg="graphite"] .brand img{filter:brightness(0) invert(1)}
html[data-bg="forest"] .hero .aurora i,
html[data-bg="graphite"] .hero .aurora i{opacity:.34}
html[data-bg="forest"] .hero .aurora i:nth-child(1),
html[data-bg="graphite"] .hero .aurora i:nth-child(1){
  background:radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--acc) 46%,transparent),transparent 68%);
}
html[data-bg="forest"] .hero .aurora i:nth-child(2),
html[data-bg="graphite"] .hero .aurora i:nth-child(2){
  background:radial-gradient(circle at 60% 40%,color-mix(in srgb,var(--acc-2) 44%,transparent),transparent 66%);
}
html[data-bg="forest"] .feat .ic,
html[data-bg="graphite"] .feat .ic{background:color-mix(in srgb,var(--acc) 20%,transparent)}
html[data-bg="forest"] .feat .ic svg,
html[data-bg="graphite"] .feat .ic svg{stroke:#fff}
html[data-bg="forest"] .cta-band .btn,
html[data-bg="graphite"] .cta-band .btn{background:#fff;color:#16181A}
html[data-bg="forest"] .cta-band .btn:hover,
html[data-bg="graphite"] .cta-band .btn:hover{background:#0D1211;color:#fff}
html[data-bg="forest"] .app-top,html[data-bg="graphite"] .app-top{background:rgba(255,255,255,.04)}
html[data-bg="forest"] .shot .bar,html[data-bg="graphite"] .shot .bar{background:#2A2F31;border-bottom-color:rgba(255,255,255,.08)}
html[data-bg="forest"] .work figure,html[data-bg="graphite"] .work figure{background:var(--surface)}
html[data-bg="forest"] .flow .n,html[data-bg="graphite"] .flow .n{background:var(--surface)}
html[data-bg="forest"] .picker,html[data-bg="graphite"] .picker{background:var(--surface)}

/* 底色切換鈕 */
.picker .sep{width:1px;height:18px;background:var(--line);margin:0 3px}
.picker button[data-bg]{border-radius:5px}
.picker button[data-bg="light"]{background:#fff}
.picker button[data-bg="graphite"]{background:#16181A}
.picker button[data-bg="forest"]{background:#121816}

/* ============================================================
   內頁共用
   ============================================================ */
/* 內頁的 hero：一樣的底，矮一半 */
.hero.slim{padding:clamp(46px,5.4vw,78px) 0 clamp(46px,5.4vw,74px)}
.hero.slim h1{font-size:clamp(1.7rem,4vw,2.7rem)}
.hero.slim .sub{max-width:40em}

/* 一句話的主張 */
.sec.tight{padding:clamp(38px,4.4vw,62px) 0}
.claim{
  text-align:center;font-size:clamp(1.15rem,2.4vw,1.7rem);font-weight:700;
  line-height:1.9;letter-spacing:.01em;max-width:24em;margin-inline:auto;
}
.claim em{font-style:normal;position:relative;white-space:nowrap;z-index:0}
.claim em::after{
  content:'';position:absolute;left:-3px;right:-3px;bottom:.1em;height:.36em;
  background:color-mix(in srgb,var(--acc) 26%,transparent);z-index:-1;border-radius:2px;
}

/* 左說明右清單 */
.split{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.4vw,56px);
  padding:clamp(28px,3.4vw,44px) 0;border-top:1px solid var(--line);
  align-items:start;
}
.split:first-of-type{border-top:none;padding-top:0}
.split .n{
  font-size:12px;font-weight:700;color:var(--acc);letter-spacing:.18em;
  display:block;margin-bottom:10px;
}
.split h3{font-size:clamp(1.1rem,2vw,1.4rem);font-weight:700;margin-bottom:12px}
.split p{color:var(--ink-2);font-size:14.5px}
.split ul{display:grid;gap:10px;align-content:start}
.split li{
  position:relative;padding:11px 14px 11px 38px;font-size:14.5px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  transition:border-color .3s,transform .3s var(--e);
}
.split li:hover{border-color:var(--acc);transform:translateX(3px)}
.split li::before{
  content:'';position:absolute;left:15px;top:19px;width:9px;height:5px;
  border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);
  transform:rotate(-45deg);
}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:20px}}

/* 編號說明卡（為什麼是 KS／做法） */
.numbers{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px)}
.numbers article{
  display:flex;gap:18px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(20px,2.4vw,30px);
  transition:border-color .3s,transform .35s var(--e),box-shadow .35s var(--e);
}
.numbers article:hover{border-color:var(--acc);transform:translateY(-4px);box-shadow:0 14px 34px rgba(20,24,32,.08)}
.numbers .n{
  flex:none;font-size:13px;font-weight:700;color:var(--acc);letter-spacing:.1em;
  padding-top:4px;min-width:24px;
}
.numbers h3{font-size:17px;font-weight:700;margin-bottom:8px}
.numbers p{font-size:14px;color:var(--ink-2)}
@media(max-width:760px){.numbers{grid-template-columns:1fr}}

/* ---------- 方案價格 ---------- */
.price{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px)}
.price article{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,2.8vw,34px);display:flex;flex-direction:column;position:relative;
  transition:border-color .3s,transform .35s var(--e),box-shadow .35s var(--e);
}
.price article:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(20,24,32,.09)}
.price article.hot{border-color:var(--ink);box-shadow:0 14px 34px rgba(20,24,32,.1)}
.price .tag{
  position:absolute;top:-11px;left:clamp(24px,2.8vw,34px);
  background:var(--acc);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  padding:4px 12px;border-radius:999px;
}
.price .ty{font-size:15px;font-weight:700;letter-spacing:.02em}
.price .p{
  margin-top:12px;font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:900;line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.price .p span{font-size:.42em;font-weight:700;color:var(--ink-3);margin-left:4px}
.price .note{margin-top:12px;font-size:14px;color:var(--ink-2);flex:1}
.price .btn{margin-top:22px}
@media(max-width:860px){.price{grid-template-columns:1fr}}

/* ---------- 功能對照表 ---------- */
.matrix-box{
  margin-top:clamp(28px,3.4vw,44px);overflow-x:auto;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
}
table.matrix{border-collapse:collapse;width:100%;min-width:660px;font-size:14px}
table.matrix th,table.matrix td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)}
table.matrix thead th{
  background:var(--bg-soft);font-size:13.5px;font-weight:700;vertical-align:bottom;
}
table.matrix thead th span{display:block;font-size:11.5px;font-weight:400;color:var(--ink-3);margin-top:3px}
table.matrix tbody th{font-weight:400;color:var(--ink-2)}
table.matrix td{text-align:center;width:19%}
table.matrix tr.grp th{
  background:var(--bg-soft);font-size:12px;font-weight:700;letter-spacing:.12em;
  color:var(--ink-3);
}
table.matrix .yes{color:var(--acc);font-weight:700}
table.matrix .no{color:#C6CBC8}
table.matrix tbody tr:not(.grp):hover th,
table.matrix tbody tr:not(.grp):hover td{background:var(--bg-soft)}
.matrix-cap{margin-top:14px;font-size:13px;color:var(--ink-3);text-align:center}

/* ---------- 時間軸（服務流程） ---------- */
.tl{max-width:860px;margin:0 auto;position:relative}
.tl::before{content:'';position:absolute;left:23px;top:12px;bottom:12px;width:1px;background:var(--line)}
.tl article{position:relative;padding:0 0 clamp(26px,3.4vw,42px) 70px}
.tl article:last-child{padding-bottom:0}
.tl .n{
  position:absolute;left:0;top:-2px;width:46px;height:46px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:14px;font-weight:700;
  display:grid;place-items:center;font-variant-numeric:tabular-nums;
}
.tl h3{font-size:18px;font-weight:700;margin-bottom:9px}
.tl p{font-size:14.5px;color:var(--ink-2)}
@media(max-width:560px){
  .tl::before{left:17px}
  .tl article{padding-left:54px}
  .tl .n{width:36px;height:36px;font-size:13px}
}

/* ---------- 深度案例 ---------- */
.cs{
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(22px,3.4vw,54px);
  align-items:center;padding:clamp(28px,3.6vw,48px) 0;
}
.cs + .cs{border-top:1px solid var(--line)}
.cs.flip .cs-img{order:2}
.cs-img{border-radius:var(--r);overflow:hidden;box-shadow:0 18px 44px rgba(20,26,24,.14)}
.cs-img img{width:100%;height:100%;object-fit:cover;object-position:top center;aspect-ratio:16/11}
.cs h3{font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:800;margin-bottom:14px}
.cs p{color:var(--ink-2);font-size:14.5px;margin-bottom:12px}
.cs .result{
  margin:20px 0;padding:16px 20px;border-radius:12px;background:var(--acc-soft);
  border-left:3px solid var(--acc);
}
.cs .result b{display:block;font-size:clamp(1.05rem,2vw,1.35rem);font-weight:800;color:var(--acc-2)}
.cs .result span{display:block;margin-top:5px;font-size:13px;color:var(--ink-2);line-height:1.7}
.cs .specs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 20px}
.cs .specs li{
  font-size:12.5px;color:var(--ink-2);border:1px solid var(--line);
  padding:5px 12px;border-radius:999px;background:var(--surface);
}
.link-go{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;
  color:var(--acc);transition:gap .3s var(--e);
}
.link-go:hover{gap:13px}
@media(max-width:820px){
  .cs{grid-template-columns:1fr}
  .cs.flip .cs-img{order:0}
}

/* ---------- 全部作品：篩選 + 卡片 ---------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:clamp(24px,3vw,38px)}
.filters button{
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  padding:9px 20px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);transition:all .25s;
}
.filters button:hover{border-color:var(--ink)}
.filters button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.8vw,34px)}
.cases .work[hidden]{display:none}
.cases .site{
  display:block;margin:4px 0 12px;font-size:12.5px;color:var(--ink-3);letter-spacing:.02em;
}
.cases .desc{font-size:13.5px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:12px}
@media(max-width:900px){.cases{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cases{grid-template-columns:1fr}}

/* ---------- 兩張大連結卡 ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,26px)}
.two a{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,2.8vw,34px);display:block;
  transition:border-color .3s,transform .35s var(--e),box-shadow .35s var(--e);
}
.two a:hover{border-color:var(--acc);transform:translateY(-4px);box-shadow:0 14px 34px rgba(20,24,32,.08)}
.two h3{font-size:18px;font-weight:700;margin-bottom:10px}
.two p{font-size:14px;color:var(--ink-2)}
.two .go{margin-top:14px;font-size:13.5px;font-weight:700;color:var(--acc);display:inline-flex;gap:7px;transition:gap .3s var(--e)}
.two a:hover .go{gap:12px}
@media(max-width:760px){.two{grid-template-columns:1fr}}

/* ============================================================
   開場動畫（D：分合 ＋ 打字）— 一進站先跑一次
   ============================================================ */
#intro{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  display:grid;place-items:center;
  transition:opacity .7s var(--e),visibility .7s;
}
#intro.done{opacity:0;visibility:hidden}
#intro .lockup{display:flex;align-items:center;gap:clamp(10px,1.4vw,20px)}
#intro .mark{
  display:block;position:relative;flex:none;
  width:clamp(140px,15vw,200px);aspect-ratio:1;
}
#intro .mark svg{position:absolute;inset:0;width:100%;height:100%}
#intro .ring{fill:none;stroke:var(--ink);stroke-width:3;opacity:0;stroke-dasharray:1;stroke-dashoffset:1}
#intro .pc{
  position:absolute;inset:0;
  background:url('../assets/brand/ks-logo-alpha.png') center/100% 100% no-repeat;
}
html[data-bg="forest"] #intro .pc,html[data-bg="graphite"] #intro .pc{filter:invert(1) brightness(1.8)}
#intro .p-k  {clip-path:inset(44.4% 55.0% 44.4% 36.2%);transform:translateX(-14%);opacity:0}
#intro .p-bar{clip-path:inset(43.8% 50.0% 43.8% 49.2%);transform:scaleY(0);transform-origin:center}
#intro .p-s  {clip-path:inset(44.6% 37.6% 44.0% 54.6%);transform:translateX(14%);opacity:0}
#intro .word{
  position:relative;display:inline-flex;align-items:center;
  font-weight:400;font-size:clamp(18px,2.4vw,32px);letter-spacing:.26em;color:var(--ink);white-space:nowrap;
}
#intro .word .sizer{visibility:hidden}
#intro .word .layer{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;white-space:nowrap}
#intro .cur{display:inline-block;width:1.5px;height:1.05em;background:var(--ink);margin-left:.14em;opacity:0}
#intro .cur.on{animation:blink .78s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
#intro.run .p-bar{animation:iBar .55s .15s var(--e) forwards}
#intro.run .p-k,#intro.run .p-s{animation:iSlide .8s .35s var(--e) forwards}
#intro.run .ring{animation:iOn .01s .95s forwards,iDraw .95s .95s var(--e) forwards}
#intro.run .r2{animation-delay:.95s,1.08s}
@keyframes iBar{to{transform:scaleY(1)}}
@keyframes iSlide{to{transform:none;opacity:1}}
@keyframes iOn{to{opacity:1}}
@keyframes iDraw{to{stroke-dashoffset:0}}
/* 動畫還在跑的時候先鎖住捲動 */
body.intro-on{overflow:hidden}
@media (prefers-reduced-motion:reduce){#intro{display:none}}