:root{
  --paper:#FFFFFF; --mist:#F3F5F6; --ink:#3C3C3C; --ink-2:#53595E; --ink-3:#656C71;
  --rule:#1E1E1E; --hair:rgba(0,0,0,.08);
  --teal:#3AAFC6; --teal-ink:#136F82; --peach:#FECBA9;
  --sans:"Avenir Next","Helvetica Neue","PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  --fs-xs:13px; --fs-s:15px; --fs-m:17px; --fs-ml:clamp(18px,2vw,22px);
  --fs-l:clamp(24px,2.8vw,36px); --fs-xl:clamp(32px,4.2vw,48px); --fs-xxl:clamp(56px,11vw,132px);
  --max:1160px; --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 var(--fs-m)/1.8 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:4px}
.wrap{width:min(var(--max),100% - 48px);margin-inline:auto}
section{position:relative;padding:clamp(96px,13vw,160px) 0}
.kicker{display:flex;align-items:center;gap:14px;font:500 var(--fs-xs)/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--teal-ink)}
.kicker::before{content:"";width:36px;height:1px;background:currentColor}
h2{font:300 var(--fs-xl)/1.3 var(--sans);letter-spacing:.06em;margin:18px 0 0;color:var(--ink);text-wrap:balance}
p{text-wrap:pretty}
.ph{display:inline-block}

/* ---------- 導覽 ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:30;transition:background .4s,box-shadow .4s}
.nav.solid{background:rgba(255,255,255,.86);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--hair)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:72px}
.mark{display:flex;align-items:center;line-height:1}
.mark b{font:600 var(--fs-ml)/1 var(--sans);letter-spacing:.04em;color:#4A4A4A}
.nav ul{display:flex;gap:30px;list-style:none;margin-left:auto;font-size:var(--fs-s);color:var(--ink-2)}
.nav ul a{position:relative;padding:6px 0;transition:color .3s}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--teal);transform:scaleX(0);transition:transform .35s var(--ease)}
.nav ul a:hover{color:var(--ink)} .nav ul a:hover::after{transform:scaleX(1)}
.lang{display:inline-flex;align-items:center;border:1px solid var(--hair);background:var(--paper);color:var(--ink-2);font:500 var(--fs-xs)/1 var(--sans);padding:8px 13px;border-radius:99px;cursor:pointer}
.lang:hover{border-color:var(--ink-3);color:var(--ink)}
@media (max-width:760px){.nav ul{display:none}.lang{margin-left:auto}}

/* ---------- 首屏：名片的版型放大 ---------- */
.hero{min-height:100svh;display:grid;place-items:center;padding:0;overflow:clip;isolation:isolate}
#space{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:30%;z-index:-1;background:linear-gradient(transparent,var(--paper))}
.lockup{display:grid;justify-items:center;text-align:center;padding:0 24px}
.lockup h1{font:600 var(--fs-xxl)/1 var(--sans);letter-spacing:.14em;color:#4A4A4A;padding-left:.14em;display:flex}
.lockup h1 span{display:inline-block;opacity:0;transform:translateY(40%);
  background:linear-gradient(105deg,#4A4A4A 0 42%,var(--teal) 50%,#4A4A4A 58% 100%) 100% 0/400% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation-name:rise,sweep;animation-duration:1.1s,7s;animation-timing-function:var(--ease),ease-in-out;animation-iteration-count:1,infinite;animation-fill-mode:forwards,none;
  animation-delay:calc(.15s + var(--i) * .12s),calc(2.6s + var(--i) * .14s);transition:translate .9s var(--ease)}
@keyframes sweep{0%{background-position:100% 0}28%,100%{background-position:0 0}}
.lockup .rule{position:relative;width:min(880px,82vw);height:1.5px;background:var(--rule);margin:clamp(18px,2.4vw,30px) 0 clamp(14px,1.8vw,22px);transform:scaleX(0);animation:draw 1.2s var(--ease) .75s forwards}
.lockup .rule::after{content:"";position:absolute;top:-1px;left:-15%;width:15%;height:3.5px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--teal),transparent);opacity:0;animation:scan 7s ease-in-out 2.6s infinite}
@keyframes scan{0%{left:-15%;opacity:0}6%{opacity:1}34%{opacity:1}40%,100%{left:100%;opacity:0}}
.lockup .en{font:400 var(--fs-l)/1 var(--sans);color:var(--teal);letter-spacing:.08em;white-space:nowrap;opacity:0;animation:fade 1.2s var(--ease) 1.1s forwards;transition:translate .9s var(--ease)}
.lockup .en i{display:inline-block;font-style:normal;text-align:center;white-space:pre}
.lockup .tag{margin-top:clamp(40px,6vh,64px);font:300 var(--fs-ml)/1.7 var(--sans);color:var(--ink);letter-spacing:.08em;opacity:0;animation:fade 1s ease 1.7s forwards}
.lockup .sub{font:300 var(--fs-ml)/1.7 var(--sans);color:var(--ink-2);letter-spacing:.08em;opacity:0;animation:fade 1s ease 1.9s forwards}
.btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px;opacity:0;animation:fade 1s ease 2.1s forwards}
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 26px;border-radius:99px;font:500 var(--fs-s)/1 var(--sans);letter-spacing:.06em;transition:transform .3s var(--ease),box-shadow .3s,background .3s,color .3s}
.btn.primary{background:#3C3C3C;color:#fff}
.btn.primary:hover{background:var(--teal-ink);transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(23,126,147,.7)}
.btn.ghost{border:1px solid rgba(0,0,0,.18)}
.btn.ghost:hover{border-color:var(--teal);color:var(--teal-ink);transform:translateY(-2px)}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease)} .btn:hover svg{transform:translateX(3px)}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes draw{to{transform:scaleX(1)}}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cue{position:absolute;bottom:30px;left:50%;translate:-50% 0;display:grid;justify-items:center;gap:8px;font:500 var(--fs-xs)/1 var(--sans);letter-spacing:.3em;color:var(--ink-3)}
.cue::after{content:"";width:1px;height:42px;background:linear-gradient(var(--ink-3),transparent);animation:drip 2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 想做的事：逐字點亮 ---------- */
.mission{background:var(--paper);padding-top:clamp(64px,8vw,104px)}
.mission .wrap{display:grid;grid-template-columns:240px 1fr;gap:48px}
@media (max-width:820px){.mission .wrap{grid-template-columns:1fr;gap:20px}}
.mission p.big{font:300 var(--fs-l)/1.6 var(--sans);letter-spacing:.04em}
.mission p.big span{color:#D2D6D9;transition:color .35s}
.mission p.big span.on{color:var(--ink)}
.mission p.big span.hl.on{color:var(--teal-ink)}

/* ---------- 服務：大版面粒子插圖，圖文左右交錯 ---------- */
.services{background:var(--mist)}
.services .head{display:flex;justify-content:space-between;align-items:end;gap:24px 48px;flex-wrap:wrap}
.services .head p{max-width:460px;color:var(--ink-2);font-size:var(--fs-m);line-height:1.65}
.services .head small{display:block;margin-top:10px;font-size:var(--fs-xs);letter-spacing:.08em;color:var(--ink-3)}
@media (hover:none){.services .head small{display:none}}
.rows{display:grid;gap:clamp(64px,9vw,128px);margin-top:clamp(56px,7vw,96px)}
.row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,5.5vw,80px);align-items:center}
.row.alt{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.row.alt .stage{order:2}
.stage{position:relative;aspect-ratio:4/3;background:var(--paper);border-radius:6px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04),0 40px 70px -50px rgba(0,0,0,.4)}
.stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:crosshair;touch-action:pan-y}
.row .no{font:200 var(--fs-xl)/1 var(--sans);letter-spacing:.02em;color:#D5DBDE}
.row h3{font:300 var(--fs-l)/1.25 var(--sans);letter-spacing:.03em;text-wrap:balance;color:#4A4A4A;margin:20px 0 10px}
.row .zh{font-size:var(--fs-s);letter-spacing:.2em;color:var(--ink-2)}
.row .desc{margin-top:26px;padding-top:26px;border-top:1px solid var(--hair);font-size:var(--fs-m);line-height:1.65;color:var(--ink);max-width:30em}
.row ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.row li{font-size:var(--fs-xs);color:var(--teal-ink);background:rgba(58,175,198,.10);padding:4px 12px;border-radius:99px}
@media (max-width:860px){.row,.row.alt{grid-template-columns:1fr}.row.alt .stage{order:0}}

/* ---------- 做事方式 ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:64px}
.steps svg.wire{position:absolute;left:0;top:27px;width:100%;height:4px;overflow:visible}
.steps svg.wire path{fill:none;stroke-width:1.5}
.step{position:relative;padding-top:84px}
.step .dot{position:absolute;top:0;left:0;width:56px;height:56px;border-radius:50%;background:var(--paper);border:1.5px solid #D4D9DC;display:grid;place-items:center;color:var(--ink-3);transition:border-color .5s,color .5s,box-shadow .5s}
.step .dot svg{width:24px;height:24px}
.step.on .dot{border-color:var(--teal);color:var(--teal-ink);box-shadow:0 0 0 8px rgba(58,175,198,.10)}
.step h3{font:300 var(--fs-l)/1.3 var(--sans);letter-spacing:.06em;color:#4A4A4A}
.step h3 small{display:block;font:500 var(--fs-xs)/1 var(--sans);letter-spacing:.3em;color:var(--ink-3);text-transform:uppercase;margin-bottom:10px}
.step p{color:var(--ink-2);margin-top:12px;font-size:var(--fs-m)}
@media (max-width:820px){.steps{grid-template-columns:1fr;gap:12px}.steps svg.wire{display:none}}

/* ---------- 聯絡：大字信箱＋公司資料表 ---------- */
.contact{background:var(--mist)}
.contact .top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px 64px;flex-wrap:wrap;margin-top:18px}
.contact h2{margin-top:0}
.contact .lead{color:var(--ink-2);margin-top:20px;font-size:var(--fs-m)}
.c-rule{height:1.5px;background:var(--rule);margin-top:clamp(48px,6vw,80px);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) .2s}
.c-rule.in{transform:none}
.c-info{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:28px 48px;padding-top:32px}
@media (max-width:900px){.c-info{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}}
@media (max-width:520px){.c-info{grid-template-columns:1fr}}
.c-info dt{font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);line-height:1.4}
.c-info dd{margin-top:8px;font-size:var(--fs-m);line-height:1.5;color:var(--ink)}
.c-info a{padding-bottom:3px;background:linear-gradient(var(--teal),var(--teal)) 0 100%/0 1.5px no-repeat;transition:background-size .4s var(--ease),color .3s}
.c-info a:hover{color:var(--teal-ink);background-size:100% 1.5px}

footer{padding:36px 0 44px;color:var(--ink-3);font-size:var(--fs-xs);border-top:1px solid var(--hair)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ---------- 內頁：隱私權政策、404 ---------- */
.page .lang{margin-left:auto}
.page main{padding:150px 0 120px}
.doc{max-width:760px}
.doc h1{font:300 var(--fs-xl)/1.3 var(--sans);letter-spacing:.06em;margin:18px 0 10px}
.doc .meta{color:var(--ink-3);font-size:var(--fs-xs);letter-spacing:.08em}
.doc h2{font:500 var(--fs-ml)/1.5 var(--sans);letter-spacing:.04em;margin:44px 0 12px;padding-top:24px;border-top:1px solid var(--hair)}
.doc p,.doc li{font-size:var(--fs-m);line-height:1.8;color:var(--ink)}
.doc p+p{margin-top:12px}
.doc ul{padding-left:1.4em;margin-top:8px}
.doc a{color:var(--teal-ink);border-bottom:1px solid rgba(19,111,130,.3)}
.notfound{min-height:100svh;display:grid;place-items:center;text-align:center;padding:120px 24px}
.notfound .code{font:200 var(--fs-xxl)/1 var(--sans);color:#C3CACE}
.notfound p{margin-top:20px;color:var(--ink-2)}
.links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* ---------- 進場 ---------- */
.rv{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i,0) * 110ms)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .mission p.big span{color:var(--ink)}
}