:root{
  --ink:#15202e; --ink2:#3a4c62; --navy:#0b3a73; --blue:#7eb6ff; --gold:#f2c14e; --thread:#e6ae2a;
  --coral:#ff8b6a; --paper:#fffbf4; --line:rgba(11,58,115,.16);
  --font:"PingFang TC","Hiragino Sans CNS","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --col:clamp(20px,7vw,104px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.9;font-feature-settings:"palt";overflow-x:clip}
body::before{content:"";position:fixed;inset:0;z-index:-1;background-image:radial-gradient(rgba(11,58,115,.1) 1px,transparent 1.2px);background-size:24px 24px}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:4px}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
.skip{position:fixed;left:16px;top:-64px;z-index:90;background:var(--ink);color:#fff;padding:10px 16px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.nav{position:fixed;left:0;right:0;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px clamp(20px,3.4vw,48px);background:rgba(255,251,244,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{font-size:18px;font-weight:700;letter-spacing:.08em;text-decoration:none;white-space:nowrap}
.nav-r{display:flex;align-items:center;gap:22px}
.nav-links{display:flex;align-items:center;gap:28px;font-size:15px}
.nav-links a{text-decoration:none;font-weight:500;letter-spacing:.06em}
.nav-links a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--thread);text-decoration-thickness:2px}
.nav-line{font-size:13px;color:var(--ink2);letter-spacing:.04em;white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 22px;background:var(--navy);color:#fff;text-decoration:none;font-size:15px;font-weight:600;letter-spacing:.08em;border-radius:999px;white-space:nowrap;transition:background-color .2s,transform .2s}
.btn:hover{background:#0e4a93;transform:translateY(-1px)}
.btn::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.nav .btn{min-height:40px;padding:0 18px;font-size:14px}
.link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;font-weight:600;letter-spacing:.06em;text-decoration:underline;text-decoration-color:var(--thread);text-decoration-thickness:2px;text-underline-offset:7px}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-size:14px;font-weight:600;letter-spacing:.06em}
.menu summary::-webkit-details-marker{display:none}
.menu ul{position:absolute;right:0;top:50px;min-width:170px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 14px 34px rgba(11,58,115,.12)}
.menu a{display:block;padding:10px 14px;text-decoration:none;font-weight:500}

/* 開頭 */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr);align-items:end;gap:clamp(20px,4vw,64px);padding:clamp(100px,10vw,140px) var(--col) clamp(30px,4vw,60px);max-width:1440px;margin:0 auto}
.crumb{font-size:13px;color:var(--ink2);letter-spacing:.08em;margin-bottom:22px}
.crumb a{text-decoration:none;border-bottom:1px solid var(--line)}
.crumb a:hover{border-bottom-color:var(--thread)}
h1{font-size:clamp(38px,5.4vw,76px);line-height:1.18;font-weight:600;letter-spacing:.06em}
h1 span{display:block;font-size:.34em;letter-spacing:.24em;color:var(--navy);margin-top:14px;font-weight:600}
.lead{font-size:clamp(18px,1.7vw,23px);font-weight:500;letter-spacing:.05em;margin-top:26px;line-height:1.8;max-width:30em}
.pos{font-size:16px;color:var(--ink2);margin-top:14px;max-width:32em;padding-left:16px;border-left:3px solid var(--thread);line-height:1.8}
.hero-art{width:100%;height:auto;display:block;overflow:visible}
.c-shirt{fill:#0b3a73}
.cat .wag{transform-origin:-36px -44px}

/* 金線與段落 */
.chapters{position:relative;max-width:1440px;margin:0 auto;padding:clamp(20px,3vw,40px) var(--col) clamp(60px,7vw,110px)}
.track{position:absolute;left:calc(var(--col) + 9px);top:0;bottom:0;width:5px;border-radius:3px;background:rgba(230,174,42,.18)}
.track i{position:absolute;inset:0;border-radius:3px;background:var(--thread);transform-origin:top;transform:scaleY(var(--p,0))}
.ch{position:relative;display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(20px,4vw,72px);padding:clamp(44px,5.5vw,84px) 0 clamp(44px,5.5vw,84px) clamp(44px,5vw,70px);border-top:1px solid var(--line)}
.ch:first-child{border-top:0}
.ch::before{content:"";position:absolute;left:0;top:calc(clamp(44px,5.5vw,84px) + 10px);width:23px;height:23px;border-radius:50%;background:var(--paper);border:3px solid var(--navy);box-sizing:border-box;transition:background-color .4s,border-color .4s}
.ch.lit::before{background:var(--thread);border-color:var(--thread)}
.ch-head .n{display:block;font-size:clamp(36px,3.4vw,52px);font-weight:300;letter-spacing:.02em;line-height:1;color:var(--navy)}
.ch-head h2{font-size:clamp(23px,2.2vw,32px);line-height:1.4;font-weight:600;letter-spacing:.06em;margin-top:12px}
.ch-head svg{display:block;width:clamp(110px,11vw,160px);height:auto;margin-top:26px;overflow:visible}
.ch-body{max-width:46em}
.ch-body p{color:var(--ink2)}
.ch-body p+p{margin-top:1em}
.ch-body h3{font-size:18px;font-weight:600;letter-spacing:.08em;margin:34px 0 12px;color:var(--ink)}
.book{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start}
.book .t{font-size:clamp(18px,1.5vw,21px);font-weight:600;color:var(--ink);line-height:1.6}
.book .m{font-size:15px;color:var(--ink2);margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px 10px}
.chips li{font-size:14px;font-weight:500;letter-spacing:.04em;padding:4px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.6);color:var(--ink)}
.tl li{position:relative;display:grid;grid-template-columns:7.5em 1fr;gap:14px;padding:14px 0;border-top:1px dashed var(--line)}
.tl li:first-child{border-top:0}
.tl b{font-weight:600;color:var(--navy);letter-spacing:.06em;font-feature-settings:"tnum"}
.types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;margin-top:20px}
.types li{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line);color:var(--ink);font-weight:500}
.types svg{width:52px;height:52px}
.tech{display:grid;gap:18px}
.tech dt{font-size:15px;font-weight:600;letter-spacing:.08em;color:var(--navy);margin-bottom:8px}
.tech dd{margin:0}
.reach{display:grid;gap:6px;font-size:18px;font-weight:600;color:var(--ink);margin-bottom:22px}
.reach li{display:flex;gap:14px}
.reach span{font-weight:500;color:var(--ink2);min-width:3em}

/* 段落升起 */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
html.js .rv.in{opacity:1;transform:none}
html.js .rv.d1{transition-delay:.08s}
html.js .rv.d2{transition-delay:.16s}

/* 頁尾：同一條線收成毛線球 */
.foot{position:relative;border-top:1px solid var(--line);padding:32px var(--col);display:flex;flex-wrap:wrap;gap:8px 28px;font-size:14px;color:var(--ink2)}
.cat .wag{animation:wag 3.4s ease-in-out infinite}
.cat .eyes{animation:blink 5.2s linear infinite;transform-origin:0 -2px}
@keyframes wag{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}

@media (max-width:899px){
  .nav{padding:8px 12px 8px 18px;gap:8px}
  .nav-links,.nav-line{display:none}
  .menu{display:block}
  .nav-r{gap:6px}
  body{font-size:16px;line-height:1.85}
  .hero{grid-template-columns:1fr;padding-top:96px;gap:10px}
  .hero-art{max-width:480px;margin:0 auto}
  .ch{grid-template-columns:1fr;gap:16px;padding-left:44px}
  .ch-head svg{display:none}
  .types{grid-template-columns:1fr}
  .tl li{grid-template-columns:6.5em 1fr}
  .book{grid-template-columns:64px 1fr}
}

.cta{margin-top:12px}
.acts{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;margin-top:24px}

/* 服務：每一項寫做什麼、你會拿到什麼 */
.svc li{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr);gap:4px 28px;padding:18px 0;border-top:1px solid var(--line)}
.svc li:first-child{border-top:0;padding-top:2px}
.svc h3{margin:0;font-size:18px;line-height:1.6;color:var(--ink)}
.ch-body .svc p{margin:0}
.ch-body .svc .get{grid-column:2;font-size:15px;color:var(--navy)}
.svc .get b{font-weight:600;margin-right:.6em}
.flow{counter-reset:f}
.flow li{position:relative;padding:14px 0 14px 54px;border-top:1px dashed var(--line);color:var(--ink2)}
.flow li:first-child{border-top:0;padding-top:4px}
.flow li::before{counter-increment:f;content:counter(f);position:absolute;left:0;top:12px;width:36px;height:36px;border-radius:50%;background:var(--gold);color:var(--ink);font-weight:600;line-height:36px;text-align:center}
.flow li:first-child::before{top:2px}
.flow b{color:var(--ink);font-weight:600;margin-right:.5em}
.faq dt{font-weight:600;color:var(--ink);margin-top:26px;line-height:1.7}
.faq dt:first-child{margin-top:0}
.faq dd{margin:6px 0 0;color:var(--ink2)}

/* 聯絡：只有開頭一段 */
.hero .reach{margin:26px 0 0;font-size:clamp(18px,1.6vw,21px)}
.hero .note{color:var(--ink2);margin-top:18px;max-width:30em}

/* 找不到頁面 */
.nf{max-width:760px;margin:0 auto;padding:clamp(130px,16vw,200px) var(--col) clamp(80px,10vw,140px)}
.nf h1{font-size:clamp(30px,4vw,48px);line-height:1.4}
.nf p{color:var(--ink2);margin-top:16px}
.nf .acts{margin-top:28px}

@media (max-width:899px){
  .svc li{grid-template-columns:1fr}
  .ch-body .svc .get{grid-column:1}
}
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
  .cat .wag,.cat .eyes{animation:none}
  .btn,.ch::before{transition:none}
}