@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700&display=swap');
:root{--ink:#142e43;--muted:#587082;--blue:#087fbe;--sky:#eaf6fd;--line:#dce5ea;--red:#d64745;--wrap:1320px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;font-family:'Noto Sans TC',sans-serif;color:var(--ink);background:#fff;font-size:16px;line-height:1.85}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}a,button{outline-offset:6px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #d85444}button{color:inherit}img{display:block;max-width:100%;height:auto}figure{margin:0}p{color:var(--muted);margin:0 0 22px}h1,h2,h3{font-weight:500;line-height:1.35;margin:0 0 24px;letter-spacing:-.035em}h1{font-size:clamp(44px,5.3vw,78px)}h2{font-size:clamp(32px,3.2vw,49px)}h3{font-size:24px}em{font-style:normal;color:var(--blue)}.wrap{width:min(var(--wrap),88%);margin-inline:auto}.section{padding-block:110px}.eyebrow{display:block;font-size:12px;letter-spacing:.17em;font-weight:600;color:var(--blue);margin-bottom:25px}.lead{font-size:20px}.fine{font-size:13px;line-height:1.8}.skip{position:absolute;left:20px;top:-80px;padding:8px 20px;background:white;z-index:101}.skip:focus{top:20px}.header{display:flex;align-items:center;justify-content:space-between;padding:15px 5%;background:#ffffffee;border-bottom:1px solid #eef1f3;position:sticky;top:0;z-index:50;backdrop-filter:blur(15px);gap:20px}.brand{display:flex;align-items:center;gap:18px;flex-shrink:0}.brand img{width:101px;height:auto}.brand span{font-size:14px;letter-spacing:.12em;border-left:1px solid var(--line);padding-left:18px}.header nav{display:flex;align-items:center;gap:29px;font-size:14px}.header nav>a:not(.button):hover,.header nav [aria-current=page]{color:var(--blue)}.tiny{font-size:12px;display:inline-block;background:var(--sky);padding:0 6px;border-radius:10px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;background:var(--blue);color:white;padding:16px 27px;border-radius:50px;border:1px solid var(--blue);font-size:16px;transition:background .25s,transform .25s}.button:hover{background:#075d8b;transform:translateY(-2px)}.button.small{font-size:14px;padding:10px 20px;gap:15px}.button.light{background:white;color:var(--ink);border-color:white}.text-link{border-bottom:1px solid currentColor;padding-bottom:7px;display:inline-block;font-size:16px}.menu-toggle{display:none;background:none;border:0}.hero{display:grid;grid-template-columns:.94fr 1.15fr;gap:7%;align-items:center;padding-block:67px 100px;min-height:760px}.hero h1{line-height:1.26;letter-spacing:-.045em}.hero-copy p{font-size:17px}.hero-actions{display:flex;align-items:center;gap:24px;margin-top:30px;flex-wrap:wrap}.hero-visual{position:relative;padding-bottom:83px;padding-right:28px}.hero-main{position:relative;overflow:hidden;border-radius:180px 4px 4px 4px}.hero-main img{width:100%;height:505px;object-fit:cover;animation:breathe 18s ease-in-out infinite alternate}.hero-main:after{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#102331ba);pointer-events:none}.hero-main figcaption{position:absolute;bottom:32px;left:30px;right:20px;color:white;letter-spacing:.17em;font-size:17px;z-index:1}.hero-main figcaption span{display:block;font-size:13px;letter-spacing:.06em;margin-top:5px}.hero-inset{position:absolute;bottom:0;left:-44px;width:57%;background:white;padding:9px;border-radius:3px;box-shadow:0 15px 50px #102e4318;transform:rotate(-5deg)}.hero-inset img{aspect-ratio:1.55;object-fit:cover}.hero-inset figcaption{font-size:12px;text-align:center;padding:12px 4px 4px}.vertical-note{position:absolute;right:-17px;top:30px;writing-mode:vertical-rl;font-size:11px;letter-spacing:.18em;color:var(--muted)}.brand-strip{background:var(--ink);color:#fff;display:flex;justify-content:center;gap:4%;align-items:center;padding:25px 5%;font-size:16px;flex-wrap:wrap}.brand-strip i{font-style:normal;color:#83c7ea}.brand-strip b{font-weight:500;color:#a6def7}.intro{display:grid;grid-template-columns:1fr 1fr;gap:12%}.intro-right{padding-top:44px}.intro-right p{max-width:540px}.journey{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.journey article{padding:45px 36px}.journey article:first-child{padding-left:0}.journey article+article{border-left:1px solid var(--line)}.journey span{font-size:14px;color:var(--blue)}.journey h3{margin-top:22px;font-size:29px}.journey a{font-size:15px;border-bottom:1px solid var(--ink)}.journey p{font-size:16px}.row{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:46px}.row h2{margin-bottom:0}.row>div:last-child{max-width:440px}.row p{font-size:16px}.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:58px 34px}.work[hidden]{display:none}.work-image{position:relative;display:block;overflow:hidden;width:100%;border:0;padding:0;background:var(--sky);border-radius:4px;text-align:left}.work-image img{width:100%;aspect-ratio:1.5;object-fit:cover;transition:transform 1s cubic-bezier(.2,.65,.3,1)}.work-image:hover img{transform:scale(1.045)}.work-label{position:absolute;top:20px;left:20px;color:#fff;background:#142e43a6;padding:5px 11px;font-size:12px;backdrop-filter:blur(8px);border-radius:20px}.view-pill{position:absolute;bottom:22px;right:22px;background:white;border-radius:40px;padding:10px 19px;font-size:14px;transition:transform .25s}.work-image:hover .view-pill{transform:translateY(-3px)}.work-title{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-top:24px}.work-title h3{font-size:25px;margin:0 0 8px}.work-title small{display:block;font-size:12px;color:var(--muted);letter-spacing:.15em;line-height:1.8;margin-top:6px}.work-title>span{font-size:14px;color:#78909e;padding-top:4px}.work p{font-size:16px;margin-bottom:20px}.work-meta{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:14px;font-size:13px;color:var(--muted)}.work-meta a{color:var(--ink);font-size:14px}.selected>.fine{margin-top:40px}.family{background:#eff8fc}.family-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.family-item{background:#fff;position:relative;padding:25px 17px;text-align:center;border-radius:100px 100px 6px 6px;transition:transform .3s}.family-item:hover{transform:translateY(-6px)}.family-item img{width:140px;height:140px;object-fit:contain;margin:0 auto 20px}.family-item h3{margin:14px 0 4px;font-size:24px}.family-item p{font-size:15px;margin:0}.status{display:inline-block;border:1px solid #b3c8d3;color:#315d73;background:#f7fbfd;border-radius:30px;padding:4px 12px;font-size:13px;letter-spacing:.015em}.family-arrow{display:block;color:var(--blue);margin-top:16px;font-size:23px}.process{display:grid;grid-template-columns:.9fr 1.1fr;gap:12%}.process ol{list-style:none;margin:0;padding:0}.process li{display:flex;gap:26px;padding:28px 0;border-top:1px solid var(--line)}.process li>span{font-size:14px;color:var(--blue);padding-top:5px}.process h3{font-size:22px;margin-bottom:12px}.process li p{margin:0;font-size:16px}.final-cta{background:var(--blue);color:white;padding:65px 70px;margin-block:20px 85px;border-radius:5px 90px 5px 5px}.final-cta>.eyebrow{color:#c9ecff}.final-cta>div{display:flex;justify-content:space-between;gap:30px;align-items:center}.final-cta p{color:#e2f4fc}.final-cta .button{background:white;color:var(--blue);border-color:white}.final-cta .fine{font-size:12px;margin:15px 0 0}.footer{padding-bottom:25px}.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px;margin-bottom:55px}.footer-top>div{display:flex;flex-direction:column;align-items:start;gap:12px}.footer-top img{width:125px;height:auto}.footer-top p{font-size:14px;margin:0}.footer-top b{font-size:15px;font-weight:500;margin-bottom:13px}.footer-top a{font-size:14px;color:var(--muted)}.footer-bottom{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:24px}.page-intro{padding-block:85px 65px}.page-intro h1{max-width:950px;font-size:clamp(38px,4.9vw,70px)}.portfolio-heading{display:flex;justify-content:space-between;align-items:center;gap:30px}.big-number{font-family:Georgia,serif;color:var(--blue);font-size:120px;line-height:1}.big-number small{font-family:Arial,sans-serif;font-size:11px;letter-spacing:.15em;display:block;margin-top:10px}.demo-notice{max-width:950px;padding-left:19px;border-left:2px solid #91cdec;font-size:13px;line-height:1.9;margin-top:35px}.filter-bar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:18px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:42px}.filter-bar>div{display:flex;gap:12px;flex-wrap:wrap}.filter-bar button{border:0;background:transparent;padding:8px 18px;border-radius:30px;font-size:15px}.filter-bar button.active{background:var(--ink);color:white}.filter-bar button span{font-size:12px;padding-left:4px}.filter-bar p{font-size:13px;white-space:nowrap;margin:0}.web-scope{display:grid;grid-template-columns:.8fr 1.2fr;gap:7%;margin-top:50px;border-top:1px solid var(--line)}.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.scope-grid span{font-size:13px;color:var(--blue)}.scope-grid h3{font-size:22px;margin-block:12px}.scope-grid p{font-size:16px;margin:0}.faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:8%;padding-top:0}.faq details{border-top:1px solid var(--line);padding:22px 0}.faq details:last-child{border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:20px}.faq summary:after{content:'＋';color:var(--blue)}.faq details[open] summary:after{content:'－'}.faq details p{font-size:16px;margin:18px 0 0}.service-shortcuts{display:flex;gap:12px;flex-wrap:wrap;margin-top:35px}.service-shortcuts a{font-size:14px;border:1px solid var(--line);padding:8px 18px;border-radius:30px}.service-shortcuts a:hover{background:var(--sky)}.service-detail{display:grid;grid-template-columns:.95fr 1fr;gap:10%;align-items:center;padding-block:75px;border-top:1px solid var(--line)}.service-detail h2{font-size:clamp(30px,3vw,43px);margin-top:25px}.service-detail p{font-size:17px}.service-art img{width:100%;aspect-ratio:1.16;object-fit:cover;border-radius:5px 100px 5px 5px}.service-detail .feature-line{font-size:14px;border-top:1px solid var(--line);padding-top:18px}.service-mascot{position:relative;background:#f1f8fb;border-radius:5px;padding:40px;text-align:center}.service-mascot img{width:245px;height:245px;object-fit:contain;margin:auto}.service-mascot h3{margin:25px 0 0}.service-mascot small{display:block;font-size:14px;color:var(--muted);margin-top:8px}.service-index{position:absolute;top:20px;left:24px;font-size:13px;color:var(--muted)}.directory-band{padding:75px;background:var(--ink);color:white;border-radius:6px;margin-top:40px}.directory-band p{color:#c5d8e4;max-width:740px}.directory-band .eyebrow{color:#8bd4fb}.service-note{padding-block:55px}.service-note h3{font-size:23px}.service-note p{font-size:15px;max-width:980px}dialog{border:0;padding:0;width:96vw;max-width:1600px;height:93dvh;max-height:93dvh;background:#edf1f4;border-radius:7px;box-shadow:0 25px 100px #0005;color:var(--ink)}dialog::backdrop{background:#071c30c9;backdrop-filter:blur(8px)}.preview-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 22px;background:white;height:72px}.preview-bar strong{font-size:16px;font-weight:500}.preview-bar button{border:1px solid var(--line);background:white;padding:7px 14px;border-radius:30px;font-size:14px}.preview-bar [aria-pressed=true]{background:var(--ink);color:white}.preview-bar a{font-size:14px}.viewport-switch{display:flex;gap:5px}.preview-stage{height:calc(100% - 110px);padding:14px;display:flex;justify-content:center;overflow:hidden}iframe{display:block;border:0;background:white;width:100%;height:100%;transition:width .3s;border-radius:3px}.preview-stage.mobile iframe{width:390px;max-width:100%}.preview-note{font-size:12px;text-align:center;margin:0;padding:6px 10px}.reveal{opacity:1;transform:none}.motion .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}.motion .reveal.seen{opacity:1;transform:none}@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.06)}}
@media(min-width:1000px){.portfolio .work:nth-child(even){margin-top:72px}.portfolio .work-grid{align-items:start}.selected .work:nth-child(even){margin-top:60px}}
@media(max-width:1100px){.brand span{display:none}.header nav{gap:20px}.hero{gap:5%;min-height:auto}.hero-main img{height:460px}.family-grid{gap:10px}.family-item{padding-inline:10px}.family-item img{width:120px;height:120px}.status{font-size:12px;padding:4px 8px}.final-cta{padding:50px}.header{padding-inline:5%}}
@media(max-width:800px){.wrap{width:89%}.header{padding:10px 5%;flex-wrap:wrap}.brand img{width:86px}.brand span{display:block;font-size:12px}.menu-toggle{display:block;font-size:14px}.header nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:12px 0}.header nav.open{display:flex}.header nav>a{padding:10px 0}.header nav>.button{padding:10px 20px;align-self:start}.hero{grid-template-columns:1fr;gap:45px;padding-block:48px 65px}.hero h1{font-size:58px}.hero-copy p{font-size:16px}.hero-visual{margin-left:24px;padding-right:20px;padding-bottom:65px}.hero-main{border-top-left-radius:140px}.hero-main img{height:450px}.hero-inset{left:-22px;width:54%}.vertical-note{right:-7px}.brand-strip{gap:15px;font-size:14px;padding:20px}.brand-strip i:nth-of-type(3),.brand-strip span:nth-of-type(4){display:none}.intro,.process,.web-scope,.faq{grid-template-columns:1fr;gap:26px}.intro-right{padding:0}.section{padding-block:70px}.journey{grid-template-columns:1fr}.journey article,.journey article:first-child{padding:30px 0}.journey article+article{border-left:0;border-top:1px solid var(--line)}.journey h3{margin-block:12px}.row{align-items:start;flex-direction:column;gap:25px}.family-grid{grid-template-columns:repeat(3,1fr);gap:14px}.family-item img{width:130px;height:130px}.family-item h3{font-size:22px}.final-cta{padding:40px 28px;border-top-right-radius:65px;margin-bottom:55px}.final-cta>div{flex-direction:column;align-items:start;gap:12px}.final-cta h2{font-size:39px}.footer-top{grid-template-columns:1fr 1fr;gap:32px}.footer-top>div:first-child{grid-column:1/-1}.portfolio-heading{align-items:end}.big-number{font-size:85px}.big-number small{max-width:100px;font-size:10px;line-height:1.5}.page-intro{padding-block:52px 35px}.page-intro h1{font-size:42px}.page-intro .lead{font-size:17px}.filter-bar{align-items:start;flex-direction:column;gap:10px}.filter-bar>div{gap:5px}.filter-bar button{padding:7px 12px;font-size:14px}.work-grid{gap:35px 22px}.work-title h3{font-size:22px}.work p{font-size:15px}.work-label{top:12px;left:12px;font-size:11px}.view-pill{bottom:12px;right:12px;font-size:12px;padding:7px 12px}.work-meta{flex-wrap:wrap;font-size:12px}.service-detail{grid-template-columns:1fr;gap:20px;padding-block:45px}.service-mascot img{width:180px;height:180px}.service-mascot{padding:25px}.service-art img{aspect-ratio:1.5}.directory-band{padding:40px 28px}.preview-bar{height:auto;min-height:74px;flex-wrap:wrap;gap:8px;padding:10px}.preview-bar strong{margin-right:auto}.viewport-switch{display:none}.preview-stage{height:calc(100% - 117px);padding:5px}.preview-note{font-size:11px}.preview-bar a,.preview-bar button{font-size:12px}}
@media(max-width:520px){h1{font-size:44px}.hero h1{font-size:52px}.hero-main img{height:355px}.hero-main figcaption{left:20px;bottom:24px;font-size:14px}.hero-inset{width:60%}.hero-inset figcaption{font-size:10px}.hero-actions{gap:20px}.hero-actions .button{padding:13px 22px;font-size:15px}.eyebrow{font-size:11px;letter-spacing:.1em}.work-grid{grid-template-columns:1fr;gap:40px}.family-grid{grid-template-columns:repeat(2,1fr)}.family-item:last-child{grid-column:1/-1;width:50%;justify-self:center}.scope-grid{grid-template-columns:1fr}.portfolio-heading h1{font-size:36px}.big-number{display:none}.brand-strip{gap:10px;font-size:13px}.brand-strip i{font-size:11px}.brand-strip b{width:100%;text-align:center}.footer-bottom{flex-direction:column;gap:5px}.service-shortcuts{gap:7px}.service-shortcuts a{padding:7px 13px}.lead{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.motion .reveal{opacity:1;transform:none}}

.more-works{display:flex;justify-content:center;margin-top:50px}.more-works .button{min-width:190px}

dialog[open]{display:flex;flex-direction:column}.preview-stage{flex:1;min-height:0;height:auto}.preview-bar{flex-shrink:0}

/* ── 作品集：作品卡、工具列、進階篩選、作品介紹頁（2026-09-25） ── */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:52px 30px}
.case[hidden]{display:none}
.case-shot{position:relative;display:block;overflow:hidden;border-radius:10px;background:var(--sky);box-shadow:0 1px 0 #0000000d,0 12px 30px -18px #142e4366;aspect-ratio:1.6}
.case-shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.1s cubic-bezier(.2,.65,.3,1)}
.case-shot:hover img{transform:scale(1.04)}
.case-go{position:absolute;inset:auto 14px 14px auto;background:#fff;border-radius:30px;padding:7px 15px;font-size:13px;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.case-shot:hover .case-go,.case-shot:focus-visible .case-go{opacity:1;transform:none}
.case-body{display:flex;justify-content:space-between;align-items:start;gap:14px;margin-top:18px}
.case-name{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline}
.case-no{font-size:13px;color:var(--blue);font-variant-numeric:tabular-nums}
.case-name h3{font-size:21px;margin:0;letter-spacing:0}
.case-name h3 a:hover{color:var(--blue)}
.case-name small{grid-column:2;font-size:11px;letter-spacing:.14em;color:var(--muted);line-height:1.6}
.case-peek{flex-shrink:0;border:1px solid var(--line);background:#fff;border-radius:30px;padding:5px 13px;font-size:13px;color:var(--muted);transition:border-color .2s,color .2s}
.case-peek:hover{border-color:var(--blue);color:var(--blue)}
.case-desc{font-size:15px;line-height:1.75;margin:12px 0 10px}
.case-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.case-tags span{font-size:12px;color:#44657a;background:#f2f7fa;border-radius:20px;padding:2px 10px}
.selected .case-grid{margin-top:10px}

.toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);padding-top:24px;flex-wrap:wrap}
.cat-pills{display:flex;gap:10px;flex-wrap:wrap}
.cat-pills button,.chips button{border:1px solid var(--line);background:#fff;padding:8px 18px;border-radius:30px;font-size:15px;line-height:1.4;transition:border-color .2s,background .2s,color .2s}
.cat-pills button span{font-size:12px;color:var(--muted);padding-left:3px}
.cat-pills button:hover,.chips button:hover{border-color:var(--blue);color:var(--blue)}
.cat-pills button[aria-pressed=true],.chips button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.cat-pills button[aria-pressed=true] span{color:#b9d3e2}
.toolbar-right{display:flex;gap:10px;align-items:center}
.search{position:relative;display:block}
.search input{width:260px;border:1px solid var(--line);border-radius:30px;padding:9px 42px 9px 18px;font-size:14px;color:var(--ink);background:#fff}
.search input:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:transparent}
.search svg{position:absolute;right:15px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
.filter-open{position:relative;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);background:#fff;border-radius:30px;padding:8px 17px;font-size:14px}
.filter-open svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.filter-open circle{fill:#fff}
.filter-open:hover{background:var(--ink);color:#fff}.filter-open:hover circle{fill:var(--ink)}
.filter-badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:10px;background:var(--red);color:#fff;font-size:11px;font-weight:500;display:grid;place-items:center;padding:0 5px}
.filter-badge[hidden]{display:none}
.active-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:20px 0 34px}
.active-bar p{margin:0;font-size:14px;color:var(--ink)}
#active-chips{display:flex;gap:8px;flex-wrap:wrap}
#active-chips button{border:0;background:var(--sky);color:#0b5f8d;border-radius:20px;padding:3px 10px 3px 12px;font-size:13px}
#active-chips button:after{content:' ×'}
#active-chips .clear{background:none;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
#active-chips .clear:after{content:''}
.empty{text-align:center;padding:60px 0 20px}.empty[hidden]{display:none}

dialog.drawer{margin:0 0 0 auto;width:min(420px,100vw);max-width:none;height:100dvh;max-height:none;border-radius:0;background:#fff;box-shadow:-20px 0 60px #0003}
dialog.drawer[open]{display:flex;flex-direction:column;animation:drawer .32s cubic-bezier(.2,.7,.3,1)}
@keyframes drawer{from{transform:translateX(40px);opacity:0}}
dialog.drawer::backdrop{background:#071c3066;backdrop-filter:blur(3px)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:22px 28px;border-bottom:1px solid var(--line)}
.drawer-head strong{font-size:20px;font-weight:500}
.drawer-close{border:0;background:none;font-size:28px;line-height:1;color:var(--muted);padding:0 4px}
.drawer-body{flex:1;overflow:auto;padding:8px 28px 20px}
.drawer fieldset{border:0;padding:0;margin:22px 0 0}
.drawer legend{font-size:15px;font-weight:600;margin-bottom:12px;padding:0}
.drawer legend small{font-weight:400;color:var(--muted);font-size:12px;margin-left:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{font-size:14px;padding:6px 15px}
.drawer-foot{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:18px 28px;border-top:1px solid var(--line)}
.drawer-foot .reset{border:0;background:none;color:var(--muted);text-decoration:underline;text-underline-offset:4px;font-size:14px}
.drawer-foot .button{flex:1;justify-content:center}

.detail-page .crumbs{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted);padding-top:30px}
.crumbs a:hover{color:var(--blue)}.crumbs b{font-weight:500;color:var(--ink)}
.work-detail{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:64px;align-items:start;padding:26px 0 90px}
.browser{border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px #e3e9ed,0 30px 70px -35px #142e4380}
.browser-bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 16px;background:#f1f4f6;border-bottom:1px solid #e3e9ed}
.browser-bar i{width:11px;height:11px;border-radius:50%;background:#d7dde1}
.browser-bar i:first-child{background:#f1837a}.browser-bar i:nth-child(2){background:#f4c160}.browser-bar i:nth-child(3){background:#72c575}
.browser-bar span{margin-left:14px;flex:1;max-width:340px;background:#fff;border-radius:6px;font-size:12px;color:var(--muted);padding:2px 12px;letter-spacing:.03em}
.browser-body img{width:100%}
.shot-more{display:block;margin:18px auto 0;border:1px solid var(--line);background:#fff;border-radius:30px;padding:8px 20px;font-size:14px}
.shot-more[hidden]{display:none}
.detail-panel{position:sticky;top:110px}
.detail-panel h1{font-size:clamp(34px,3.2vw,46px);margin:6px 0 0;letter-spacing:0}
.detail-en{font-size:12px;letter-spacing:.2em;color:var(--muted);margin:4px 0 24px}
.detail-desc{font-size:16px;line-height:1.95;color:#3d566a}
.detail-actions{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 36px}
.detail-actions .button{gap:18px;padding:13px 24px;font-size:15px}
.button.ghost{background:#fff;color:var(--ink);border-color:var(--ink)}
.button.ghost:hover{background:var(--ink);color:#fff}
.detail-panel h2{font-size:16px;font-weight:600;letter-spacing:.04em;margin:0 0 12px}
.points{list-style:none;margin:0 0 30px;padding:0}
.points li{position:relative;padding:7px 0 7px 20px;font-size:15px;color:#3d566a;border-bottom:1px dashed var(--line)}
.points li:before{content:'';position:absolute;left:2px;top:17px;width:7px;height:7px;background:var(--blue)}
.spec{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:0 0 30px}
.spec div{background:#fff;padding:12px 16px}
.spec dt{font-size:12px;color:var(--muted)}.spec dd{margin:2px 0 0;font-size:15px}
.tag-links{display:flex;flex-wrap:wrap;gap:8px}
.tag-links a{font-size:13px;border:1px solid var(--line);border-radius:20px;padding:3px 12px}
.tag-links a:before{content:'# ';color:var(--blue)}
.tag-links a:hover{border-color:var(--blue);color:var(--blue)}
.prev-next{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:26px}
.prev-next a{padding:16px 0;font-size:15px}.prev-next a:last-child{text-align:right;border-left:1px solid var(--line)}
.prev-next small{display:block;font-size:12px;color:var(--muted)}
.prev-next a:hover{color:var(--blue)}
.phone-band{background:#eff8fc}
.phone-wrap{display:grid;grid-template-columns:auto 1fr;gap:9%;align-items:center}
.phone{width:300px;border:11px solid #111a22;border-radius:44px;overflow:hidden;background:#111a22;box-shadow:0 40px 60px -30px #142e4399}
.phone img{width:100%;border-radius:32px}
.phone-wrap h2{margin-top:6px}.phone-wrap p{max-width:480px}
.as-button{background:none;border:0;border-bottom:1px solid currentColor;padding:0 0 7px;color:var(--ink)}
.more-cases .row{align-items:center}
@media(max-width:1100px){.case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.work-detail{gap:40px}}
@media(max-width:900px){.work-detail{grid-template-columns:1fr}.detail-panel{position:static;order:-1}.detail-shot .browser-body{max-height:1300px;overflow:hidden;position:relative}.detail-shot.open .browser-body{max-height:none}.detail-shot:not(.open) .browser-body:after{content:'';position:absolute;inset:auto 0 0;height:160px;background:linear-gradient(#fff0,#fff)}.phone-wrap{grid-template-columns:1fr;justify-items:center;text-align:center}.phone-wrap p{margin-inline:auto}.phone{width:250px}}
@media(max-width:800px){.toolbar{flex-direction:column;align-items:stretch}.toolbar-right{width:100%}.search{flex:1}.search input{width:100%}.cat-pills{gap:6px}.cat-pills button{padding:6px 13px;font-size:14px}.active-bar{padding:16px 0 24px}}
@media(max-width:560px){.case-grid{grid-template-columns:1fr;gap:40px}.detail-actions .button{flex:1;justify-content:center}.spec{grid-template-columns:1fr 1fr}}

/* ── 服務軌道（仿 leyun.cloud 合作夥伴區：多層圓環正反轉、中間 logo、六顆服務圓） ── */
.orbit-wrap{margin-top:10px}
.orbit{position:relative;width:min(900px,100%);aspect-ratio:1/.92;margin:0 auto}
.orbit-rings{position:absolute;inset:-2% 0;width:100%;height:104%;overflow:visible;pointer-events:none}
.orbit-rings *{fill:none;vector-effect:non-scaling-stroke}
.orbit-rings .spin{transform-origin:500px 500px;transform-box:view-box;animation:orbit-spin 60s linear infinite}
.orbit-rings .s-rev{animation-duration:26s;animation-direction:reverse}
.orbit-rings .s-mid{animation-duration:40s}
.orbit-rings .s-fast{animation-duration:14s;animation-direction:reverse}
.r-soft{stroke:#e3f1fa;stroke-width:1.5}
.r-dot{stroke:#9dcbe6;stroke-width:2;stroke-dasharray:1 12;stroke-linecap:round}
.r-arc{stroke:#bfe0f3;stroke-width:1.5}
.r-tick{stroke:#d3e6f1;stroke-width:9;stroke-dasharray:1 26}
.r-dash{stroke:#cfe6f4;stroke-width:1.2;stroke-dasharray:18 10 3 10}
.r-node{fill:#fff!important;stroke:#8cc6e8;stroke-width:1.5}
.r-wide{stroke:#e5f2fb;stroke-width:22;stroke-linecap:round}
.orbit-core{position:absolute;left:50%;top:50%;width:36%;aspect-ratio:1;transform:translate(-50%,-50%)}
.core-glow{position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,#dff1fc 0,#eef8fe00 68%)}
.core-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#1f8fe0 0 34%,#8fcaf2 34% 52%,#1f8fe0 52% 78%,#cfe7f7 78% 100%);-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 13px),#000 calc(100% - 12px));mask:radial-gradient(farthest-side,#0000 calc(100% - 13px),#000 calc(100% - 12px));animation:orbit-spin 9s linear infinite}
.core-disc{position:absolute;inset:6%;border-radius:50%;background:#fff;border:1px solid #cfe6f4;display:grid;place-items:center;box-shadow:inset 0 0 40px #e6f4fc,0 20px 50px -20px #1f8fe055;overflow:hidden}
.core-disc:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,#9dcbe633 1.5px,transparent 2px) 0 0/28px 28px;opacity:.9}
.core-disc img{position:relative;width:62%;height:auto}
.cube{position:absolute;width:6%;aspect-ratio:1;border-radius:3px;transform:rotate(45deg);animation:bob 2.4s ease-in-out infinite}
.q1{left:10%;top:22%;background:linear-gradient(135deg,#bfe3fb,#5fb3ea);animation-duration:2.6s}
.q2{left:4%;top:56%;width:4.5%;background:linear-gradient(135deg,#ffd27a,#f4a21b);animation-delay:-.8s}
.q3{right:6%;bottom:18%;background:linear-gradient(135deg,#ffe88a,#f7c21e);animation-duration:2.1s;animation-delay:-1.4s}
.heart{position:absolute;right:12%;top:12%;width:7%;aspect-ratio:1;background:#ef4b5c;transform:rotate(45deg);border-radius:2px;animation:bob 2.8s ease-in-out infinite -.4s}
.heart:before,.heart:after{content:'';position:absolute;inset:0;border-radius:50%;background:inherit}.heart:before{left:-50%}.heart:after{top:-50%}
.orbit-list{list-style:none;margin:0;padding:0}
.orbit-list li{position:absolute;width:20%;aspect-ratio:1;transform:translate(-50%,-50%)}
.orbit-item{position:relative;width:100%;height:100%;border-radius:50%;border:0;background:#fff;box-shadow:0 18px 40px -18px #142e4340,0 0 0 1px #edf3f7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px;transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s}
.orbit-item:before{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none}
.orbit-item.pulse:before{animation:pulse 1.6s ease-out}
.orbit-item:hover,.orbit-item:focus-visible{transform:translateY(-8px) scale(1.04);box-shadow:0 26px 50px -18px #1f8fe066,0 0 0 2px #1f8fe0}
.orbit-pic{width:52%;aspect-ratio:1;display:grid;place-items:center}
.orbit-pic img{width:100%;height:100%;object-fit:contain}
.orbit-web{width:84%;fill:none;stroke:#1f8fe0;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.orbit-web circle{fill:#1f8fe0;stroke:none}.orbit-web rect:last-of-type{fill:#dff1fc}
.orbit-item b{font-size:17px;font-weight:600;line-height:1.3;margin-top:4px}
.orbit-item small{font-size:12px;color:var(--muted);line-height:1.3}
.orbit-hint{text-align:center;font-size:14px;margin:12px 0 0}
.motion .orbit-list li{opacity:0;transform:translate(-50%,-50%) scale(.4);transition:opacity .6s calc(var(--i)*.12s + .2s),transform .8s cubic-bezier(.2,1.4,.4,1) calc(var(--i)*.12s + .2s)}
.motion .orbit.on .orbit-list li{opacity:1;transform:translate(-50%,-50%)}
.motion .orbit-core{opacity:0;transform:translate(-50%,-50%) scale(.7);transition:opacity .8s,transform 1s cubic-bezier(.2,1.2,.4,1)}
.motion .orbit.on .orbit-core{opacity:1;transform:translate(-50%,-50%)}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes pulse{0%{box-shadow:0 0 0 0 #1f8fe066}100%{box-shadow:0 0 0 28px #1f8fe000}}
.svc-drawer .drawer-body{padding-top:28px}
.svc-info[hidden]{display:none}
.svc-pic{width:150px;height:150px;border-radius:50%;background:#eff8fc;display:grid;place-items:center;margin-bottom:22px;animation:drawer .5s .1s both}
.svc-pic img,.svc-pic svg{width:66%;height:66%;object-fit:contain}
.svc-info h3{font-size:30px;margin:14px 0 14px}.svc-info h3 small{display:block;font-size:14px;color:var(--muted);letter-spacing:.05em;margin-top:4px}
.svc-head{font-size:19px;color:var(--ink);line-height:1.6}
.svc-info p{font-size:15.5px}
.svc-info .feature-line{font-size:13.5px;border-top:1px solid var(--line);padding-top:14px}
.svc-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:8px}
.svc-drawer .drawer-foot .button{flex:0 0 auto}
@media(max-width:800px){.orbit{aspect-ratio:1/1.02}.orbit-list li{width:23%}.orbit-item{padding:4px}.orbit-item b{font-size:13px;margin-top:0}.orbit-item small{display:none}.orbit-core{width:38%}.core-ring{-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 7px),#000 calc(100% - 6px));mask:radial-gradient(farthest-side,#0000 calc(100% - 7px),#000 calc(100% - 6px))}.r-wide{stroke-width:12}}
@media(prefers-reduced-motion:reduce){.motion .orbit-list li,.motion .orbit-core{opacity:1;transform:translate(-50%,-50%)}}
.orbit-item[data-svc=funli] .orbit-pic img,.svc-info[data-svc-info=funli] .svc-pic img{border-radius:50%}
.drawer-done{gap:6px}.drawer-done b{font-weight:500}
@media(max-width:560px){.detail-actions .button{gap:8px;padding:12px 14px;font-size:14px;white-space:nowrap}}
.drawer-foot .button.drawer-done{gap:0}.drawer-done b{margin:0 .35em}

/* ── 首頁服務算式條（取代舊 .brand-strip） ── */
.equation{position:relative;overflow:hidden;background:radial-gradient(60% 140% at 50% 0,#1f4a6e 0,#142e43 60%),#142e43;padding:30px 5%;color:#fff}
.equation:before{content:'';position:absolute;inset:0;background:radial-gradient(circle,#ffffff14 1px,transparent 1.5px) 0 0/22px 22px;-webkit-mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);pointer-events:none}
.equation:after{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#5fb3ea88,transparent)}
.eq-row{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.6vw,24px);max-width:var(--wrap);margin:0 auto}
.eq-item{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border-radius:40px;background:#ffffff0d;border:1px solid #ffffff1f;font-size:15.5px;letter-spacing:.04em;white-space:nowrap;animation:eq-lit 8s ease-in-out infinite calc(var(--n)*2s)}
.eq-ico{flex-shrink:0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#5fb3ea26;color:#9ad6fa}
.eq-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.eq-op{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid #83c7ea66;color:#9ad6fa;font-size:16px;line-height:1;font-weight:300}
.eq-is{background:#83c7ea22}
.eq-result{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;padding:8px 22px 8px 8px;border-radius:40px;background:linear-gradient(100deg,#087fbe,#35a6e6 55%,#6cc6f5);font-size:16.5px;font-weight:600;letter-spacing:.06em;white-space:nowrap;box-shadow:0 0 0 1px #9ad6fa66,0 10px 30px -8px #35a6e6cc}
.eq-result .eq-ico{background:#fff;color:#ef4b5c}
.eq-result .eq-ico svg{fill:currentColor;stroke:none;animation:eq-beat 2.4s ease-in-out infinite}
.eq-result:after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,#ffffff8c,transparent);transform:skewX(-20deg);animation:eq-shine 4s ease-in-out infinite 1s}
@keyframes eq-lit{0%,18%,100%{background:#ffffff0d;border-color:#ffffff1f}6%,12%{background:#5fb3ea2e;border-color:#83c7eaaa}}
@keyframes eq-shine{0%,55%{left:-40%}85%,100%{left:130%}}
@keyframes eq-beat{0%,40%,100%{transform:scale(1)}20%{transform:scale(1.18)}}
@media(max-width:1000px){.eq-item{font-size:14px;padding-right:14px}.eq-ico{width:30px;height:30px}.eq-result{font-size:15px}}
@media(max-width:800px){.equation{padding:24px 16px}.eq-row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px 8px;justify-items:stretch}.eq-item{justify-content:flex-start}.eq-row>:nth-child(4){display:none}.eq-row>:nth-child(2),.eq-row>:nth-child(6){justify-self:center}.eq-is{grid-column:1/-1;justify-self:center}.eq-result{grid-column:1/-1;justify-self:center}}