*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:'Figtree','Noto Sans TC',system-ui,-apple-system,sans-serif;color:#121417;background:#121417;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}
::selection{background:#eef0f2;color:#121417}
:root{--ink:#121417;--ink-2:#1b1f23;--ink-3:#262b30;--black:#000;--paper:#ffffff;--fog:#eceef0;--fg-d:#eef0f2;--grey:#878d93;--muted-d:rgba(238,240,242,.56);--muted-l:rgba(18,20,23,.7);--grey-l:#6b7278;--line-d:rgba(238,240,242,.15);--line-l:rgba(18,20,23,.14)}
/* hover behaviours (ported from the design's style-hover attributes) */
.lnk{transition:color .2s ease}
.lnk:hover{color:var(--grey)!important}
.btn-solid{transition:background .2s ease,transform .12s var(--e-quart)}
.btn-solid:hover{background:var(--grey)!important}
.btn-ghost{transition:border-color .2s ease,transform .12s var(--e-quart)}
.btn-ghost:hover{border-color:var(--fg-d)!important}
.lang-btn{transition:border-color .2s ease,transform .12s var(--e-quart)}
.lang-btn:hover{border-color:var(--fg-d)!important}
.svc-row{transition:transform .3s cubic-bezier(.22,1,.36,1),background .25s ease,color .25s ease}
.svc-row:hover{background:var(--fg-d)!important;color:var(--ink)!important;transform:translateX(10px)!important}
.faq-q{transition:color .2s ease}
.faq-item:hover .faq-q{color:var(--grey)}
a:focus-visible,button:focus-visible{outline:2.5px solid var(--grey);outline-offset:3px;border-radius:1px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--fg-d);color:var(--ink);padding:12px 18px;font-family:'Saira','Noto Sans TC',sans-serif;font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.04em}
.skip:focus{left:12px}
h2,h3{text-wrap:balance}
p{text-wrap:pretty}
/* monochrome film grain: desaturated noise, carries tactile warmth without color */
.grain{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}
@media (prefers-reduced-motion:reduce){.grain{opacity:.035}}
/* ── Motion system ──────────────────────────────────────────────────
   All motion is gated behind html.anim, added by an early inline script
   only when JS runs, IntersectionObserver exists and reduced-motion is OFF.
   No-JS, crawlers and reduced-motion users get the full static page, so
   motion never gates content and cannot affect loading. */
:root{--e-expo:cubic-bezier(.16,1,.3,1);--e-quart:cubic-bezier(.25,1,.5,1)}

/* Hero: one rehearsed entrance, staggered */
html.anim .h-rise{opacity:0;animation:heroRise .72s var(--e-expo) both;animation-delay:var(--d,0ms)}
@keyframes heroRise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}

/* Ambient: the ghost bracket drifts; a faint light breathes (desktop only) */
html.anim .hero-ghost{animation:ghostFloat 11s ease-in-out infinite;will-change:transform}
@keyframes ghostFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.hero-glow{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(54% 46% at 72% 14%,rgba(238,240,242,.08),transparent 66%)}
@media (min-width:768px){html.anim .hero-glow{opacity:1;animation:glowDrift 17s ease-in-out infinite;will-change:transform}}
@keyframes glowDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(-3.5%,3%)}}

/* Selective scroll reveals — genuine lists, diagrams and sequences only */
html.anim .reveal-group .reveal{opacity:0;transform:translateY(20px);transition:opacity .68s var(--e-expo) calc(var(--i,0)*70ms),transform .68s var(--e-expo) calc(var(--i,0)*70ms)}
html.anim .reveal-group.in .reveal{opacity:1;transform:translateY(0)}

/* Micro-interactions */
.cta-arrow{display:inline-block;transition:transform .25s var(--e-quart)}
.btn-solid:hover .cta-arrow,.btn-ghost:hover .cta-arrow{transform:translateX(4px)}
.btn-solid:active,.btn-ghost:active,.lang-btn:active{transform:scale(.97)}
.svc-arrow{display:inline-block;transition:transform .3s var(--e-expo)}
.svc-row:hover .svc-arrow{transform:translateX(6px)}

/* Sticky nav gains weight once you leave the very top */
header{transition:background .3s ease,box-shadow .3s ease}
header.scrolled{background:color-mix(in srgb,var(--ink) 95%,transparent)!important;box-shadow:0 12px 30px -14px rgba(0,0,0,.55)}

/* FAQ: smooth disclosure via layout-safe grid rows */
.faq-a-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--e-quart)}
.faq-item.open .faq-a-wrap{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden;min-height:0}
.faq-sign{transition:transform .3s var(--e-quart)}
.faq-item.open .faq-sign{transform:rotate(135deg)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
</style>

/* ── Subpage additions ─────────────────────────────────────────────
   Shared by the service pages and the case study. index.html keeps its
   own inlined copy of the base above; these rules exist only here. */

/* Breadcrumb + back link */
.crumb{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted-d)}
.crumb a{border-bottom:1px solid transparent;transition:border-color .2s ease}
.crumb a:hover{border-color:var(--fg-d)}

/* Editorial rules and spec lists */
.rule-d{height:2px;background:var(--fg-d);width:100%}
.rule-l{height:2px;background:var(--ink);width:100%}
.kicker{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:0.12em;text-transform:uppercase}
.h-sec{font-family:'Saira','Noto Sans TC',sans-serif;font-weight:800;font-size:clamp(30px,4.4vw,58px);line-height:1.0;letter-spacing:-0.025em;text-transform:uppercase;margin:22px 0 0}
.h-sub{font-family:'Saira','Noto Sans TC',sans-serif;font-weight:700;font-size:clamp(19px,2.1vw,26px);letter-spacing:-0.01em;text-transform:uppercase;margin:0 0 10px}
.lede{font-size:clamp(16px,1.4vw,18.5px);line-height:1.65;margin:22px 0 0;max-width:66ch}
.body-p{font-size:16px;line-height:1.7;margin:0 0 16px;max-width:70ch}

/* Spec rows: a labelled list that reads like a datasheet, not a feature grid */
.spec{border-top:1px solid var(--line-d)}
.spec-l{border-top:1px solid var(--line-l)}
.spec-row{display:grid;grid-template-columns:104px 1fr;gap:clamp(12px,2vw,28px);align-items:baseline;padding:20px 4px}
.spec-tag{font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;letter-spacing:0.06em;color:var(--grey)}
.spec-h{font-family:'Saira','Noto Sans TC',sans-serif;font-weight:700;font-size:clamp(17px,1.8vw,21px);letter-spacing:-0.01em;text-transform:uppercase;margin:0}
.spec-p{font-size:14.5px;line-height:1.6;margin:6px 0 0;max-width:70ch}
@media (max-width:560px){.spec-row{grid-template-columns:1fr;gap:6px}}

/* Bulleted lists in the site's chevron idiom */
.chev{display:flex;flex-direction:column;gap:11px}
.chev li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.6}
.chev li::before{content:'\203A';font-family:'IBM Plex Mono',monospace;color:var(--grey-l);flex:0 0 auto}

/* Pull quote */
.pull{font-family:'Saira','Noto Sans TC',sans-serif;font-weight:800;font-size:clamp(21px,2.8vw,36px);line-height:1.12;letter-spacing:-0.02em;margin:32px 0;border-left:4px solid currentColor;padding-left:22px;max-width:24ch}
.pull-cite{display:block;font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;margin-top:14px;opacity:.7}

/* Related-pages cards */
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:0;border-top:1px solid var(--line-d)}
.rel a{padding:26px clamp(18px,2vw,28px);border-right:1px solid var(--line-d);border-bottom:1px solid var(--line-d);transition:background .25s ease,color .25s ease}
.rel a:hover{background:var(--fg-d);color:var(--ink)}