:root{
  /* layout: Ruby 簡報語言搬上網頁：海軍藍與米白交錯的節奏、金色 kicker、會動的隱喻（單據過閘門打勾、翻卡、對話逐則播放） */
  --navy:#0F2647;
  --deep:#0a1b36;
  --gold:#D89B3C;
  --teal:#1E7A77;
  --mint:#eef4f2;
  --cream:#f6f1e7;
  --ink:#1c2536;
  --muted:#5f6a7d;
  --sans:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}

html{scroll-behavior:smooth}
.lo5{background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.85;letter-spacing:.03em;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,.fcard:focus-visible,.lo5 summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.wrap{max-width:1200px;margin:0 auto;padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px)}
h1,h2,h3{margin:0;font-weight:900;letter-spacing:.04em}
p{margin:0}
.dark{background:var(--navy);color:#e8edf5}
.kicker{display:inline-flex;align-items:center;gap:16px;color:var(--gold);font-weight:700;font-size:14px;letter-spacing:.42em}
.kicker::before,.kicker::after{content:"";width:40px;height:1px;background:var(--gold);opacity:.8}
.sec{padding:clamp(80px,10vw,136px) 0}
.sec h2{font-size:clamp(32px,4.4vw,54px);line-height:1.3;margin-top:22px}
.dark h2{color:#fff}
.sub{margin-top:18px;color:var(--muted);font-size:18px}
.dark .sub{color:#aebbd0}
.center{text-align:center}
.pill{display:inline-flex;align-items:center;gap:10px;text-decoration:none;background:var(--gold);color:var(--navy);font-weight:900;font-size:16px;padding:14px 28px;border-radius:999px;box-shadow:0 8px 24px rgba(216,155,60,.35);transition:transform .2s,box-shadow .2s}
.pill:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(216,155,60,.45)}
.pill.ghost{background:rgba(255,255,255,.06);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.25)}
.chip-ic{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:18px;background:rgba(216,155,60,.14)}
.chip-ic svg{width:36px;height:36px}

/* .lo-hdr */
.lo-hdr{position:fixed;inset:0 0 auto;z-index:30;transition:background .3s,box-shadow .3s}
.lo-hdr.solid{background:rgba(15,38,71,.92);backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.lo-nav{display:flex;align-items:center;gap:28px;height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand img{width:42px;height:42px;border-radius:50%;background:#fff;padding:5px}
.brand b{display:block;font-size:17px;line-height:1.2}
.brand small{font-size:12px;color:#aebbd0;letter-spacing:.08em}
.lo-nav nav{display:flex;gap:26px;margin-left:auto;font-size:15px}
.lo-nav nav a{text-decoration:none;color:#c5d0e0}
.lo-nav nav a:hover{color:#fff}
.lo-nav .pill{padding:10px 20px;font-size:14px}

/* hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 72% 40%,#1b3a68 0%,var(--navy) 45%,var(--deep) 100%);color:#fff;min-height:720px;display:flex;align-items:center}
#docs{position:absolute;inset:0;width:100%;height:100%}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:120px;padding-bottom:96px}
.hero h1{font-size:clamp(50px,8.4vw,112px);line-height:1.18;margin-top:30px}
.hero h1 .c{display:inline-block}
.gold-grad{background:linear-gradient(180deg,#f6cf86 0%,var(--gold) 55%,#b97a22 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.glow{filter:drop-shadow(0 0 22px rgba(216,155,60,.45))}
.hero .lead{margin-top:30px;font-size:19px;color:#c9d3e3}
.hero .acts{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap}
.gate-label{position:absolute;z-index:2;right:clamp(20px,4vw,48px);font-size:12px;letter-spacing:.3em;color:var(--gold);opacity:.85}

/* pains: flip cards */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.fcard{perspective:1200px;height:250px;cursor:pointer}
.fin{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.fcard:hover .fin,.fcard:focus-visible .fin,.fcard.on .fin{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:22px;padding:30px 30px 26px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column}
.front{background:#fff;box-shadow:0 10px 30px rgba(15,38,71,.08)}
.front h3{font-size:23px;color:var(--navy);margin-top:22px;line-height:1.4}
.front .flip{margin-top:auto;font-size:13px;color:var(--muted);letter-spacing:.12em}
.back{background:var(--navy);color:#e8edf5;transform:rotateY(180deg);justify-content:center}
.back .tag{font-size:13px;color:var(--gold);letter-spacing:.3em;font-weight:700}
.back p{margin-top:12px;font-size:19px;font-weight:700;line-height:1.7;color:#fff}

/* journey */
.jgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,88px);align-items:center}
.amount{margin-top:36px;font-size:clamp(48px,6vw,80px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.amount small{display:block;font-size:14px;color:#aebbd0;letter-spacing:.2em;font-weight:500;margin-bottom:14px}
.stops{display:grid;gap:14px}
.stop{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px 20px;transition:background .5s,border-color .5s,opacity .5s}
.stop .dot{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);font-weight:900;color:#aebbd0;transition:background .5s,color .5s}
.stop b{display:block;font-size:18px;color:#fff}
.stop small{color:#aebbd0;font-size:13px}
.stop .st{font-size:13px;font-weight:700;color:#aebbd0;letter-spacing:.1em}
.stop.lit{background:rgba(30,122,119,.22);border-color:rgba(30,122,119,.6)}
.stop.lit .dot{background:var(--teal);color:#fff}
.stop.lit .st{color:#7fd3c8}
.stop.wait.lit{background:rgba(216,155,60,.16);border-color:rgba(216,155,60,.6)}
.stop.wait.lit .dot{background:var(--gold);color:var(--navy);animation:breath 1.8s ease-in-out infinite}
.stop.wait.lit .st{color:var(--gold)}
.rule{display:inline-block;margin-top:6px;font-size:12px;color:var(--gold);border:1px dashed rgba(216,155,60,.6);border-radius:999px;padding:1px 10px}
@keyframes breath{50%{box-shadow:0 0 0 10px rgba(216,155,60,0),0 0 24px rgba(216,155,60,.6)}}

/* services */
.mint{background:var(--mint)}
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;align-items:stretch}
.svc{background:#fff;border-radius:24px;padding:34px 30px;box-shadow:0 12px 34px rgba(15,38,71,.07);display:flex;flex-direction:column;transition:transform .3s}
.svc:hover{transform:translateY(-6px)}
.svc:hover .chip-ic{animation:wiggle .5s}
@keyframes wiggle{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.svc h3{font-size:24px;color:var(--navy);margin-top:24px}
.svc p{margin-top:12px;color:var(--muted);font-size:16px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:24px}
.tags span{font-size:13px;background:var(--mint);color:var(--teal);border-radius:999px;padding:3px 12px;font-weight:500}
.chat{margin-top:18px;background:var(--cream);border-radius:16px;padding:14px;display:grid;gap:10px;font-size:14px;line-height:1.6}
.bub{display:flex;gap:8px;align-items:flex-start;transition:opacity .4s,transform .4s}
.bub img{width:28px;height:28px;border-radius:50%;flex:none}
.bub span{background:#fff;border-radius:4px 14px 14px 14px;padding:8px 12px;box-shadow:0 2px 8px rgba(15,38,71,.06)}
.bub.me{justify-content:flex-end}
.bub.me span{background:var(--teal);color:#fff;border-radius:14px 4px 14px 14px}
.chat.ready .bub{opacity:.25;transform:translateY(6px)}
.chat.ready .bub.show{opacity:1;transform:none}

/* fit */
.fit-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;margin-top:56px}
.panel{border-radius:24px;padding:34px}
.panel.yes{background:rgba(255,255,255,.06);border:1px solid rgba(216,155,60,.45)}
.panel.no{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1)}
.panel h3{font-size:20px;color:var(--gold);letter-spacing:.2em}
.panel.no h3{color:#8e9bb2}
.panel ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.panel li{display:flex;gap:14px;align-items:baseline;font-size:18px;font-weight:700;color:#fff}
.panel li::before{content:"✓";flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--gold);color:var(--navy);font-size:14px;font-weight:900}
.panel.no li{color:#8e9bb2;font-weight:500;font-size:16px;text-decoration:line-through;text-decoration-color:rgba(196,85,59,.7)}
.panel.no li::before{content:"✕";background:rgba(196,85,59,.25);color:#e08b77}

/* cases */
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
.case{background:#fff;border-radius:22px;padding:28px 26px;box-shadow:0 10px 30px rgba(15,38,71,.07);border-top:5px solid var(--gold)}
.case:nth-child(even){border-top-color:var(--teal)}
.case .tg{font-size:12px;letter-spacing:.2em;color:var(--teal);font-weight:700}
.case b{display:block;font-size:22px;color:var(--navy);margin-top:10px;line-height:1.4}
.case p{margin-top:10px;font-size:15px;color:var(--muted)}
.refline{margin-top:40px;display:inline-flex;align-items:center;gap:14px;background:#fff;border-radius:999px;padding:12px 24px 12px 14px;box-shadow:0 8px 24px rgba(15,38,71,.07);font-weight:700;color:var(--navy)}
.refline i{font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--gold);color:#fff}

/* how: stations */
.line{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:64px}
.line::before{content:"";position:absolute;left:0;right:0;top:28px;height:4px;border-radius:4px;background:rgba(255,255,255,.12)}
.line .bar{position:absolute;left:0;top:28px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--teal),var(--gold));width:100%;transform-origin:left;transition:transform 2.2s cubic-bezier(.6,.05,.3,1)}
.line.ready .bar{transform:scaleX(0)}
.line.ready.go .bar{transform:scaleX(1)}
.station{position:relative;text-align:left}
.station .n{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--navy);border:3px solid var(--gold);color:var(--gold);font-weight:900;font-size:20px;position:relative}
.station:last-child .n{background:var(--gold);color:var(--navy)}
.station b{display:block;margin-top:22px;font-size:21px;color:#fff}
.station p{margin-top:8px;font-size:15px;color:#aebbd0}

/* team */
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
.mem{background:#fff;border-radius:22px;padding:28px 24px;box-shadow:0 10px 30px rgba(15,38,71,.07)}
.mem .av{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:20px;color:#fff;background:var(--teal)}
.mem:nth-child(2) .av,.mem:nth-child(3) .av{background:var(--navy)}
.mem:nth-child(4) .av{background:var(--gold);color:var(--navy)}
.mem b{display:block;margin-top:18px;font-size:20px;color:var(--navy)}
.mem .who{font-size:13px;color:var(--teal);font-weight:700;letter-spacing:.08em}
.mem p{margin-top:10px;font-size:14px;color:var(--muted)}

/* faq */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,72px);align-items:start}
.faq-xo{display:flex;align-items:center;gap:14px;margin-top:28px;color:var(--muted);font-size:15px}
.faq-xo img{width:64px;height:64px;border-radius:50%;animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.lo5 details{background:#fff;border-radius:18px;padding:20px 24px;box-shadow:0 6px 18px rgba(15,38,71,.05)}
.lo5 details+.lo5 details{margin-top:12px}
.lo5 summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-weight:700;font-size:18px;color:var(--navy)}
.lo5 summary::-webkit-details-marker{display:none}
.lo5 summary::after{content:"+";display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--mint);color:var(--teal);font-weight:900;transition:transform .3s}
.lo5 details[open] .lo5 summary::after{transform:rotate(45deg)}
.lo5 details p{margin-top:12px;color:var(--muted);font-size:16px}

/* finale */
.finale{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#1b3a68,var(--navy) 55%,var(--deep));color:#fff;text-align:center;padding:clamp(100px,13vw,170px) 0}
.finale h2{font-size:clamp(40px,6.4vw,84px);line-height:1.3;margin-top:26px}
.finale p{margin:26px auto 40px;color:#c9d3e3;font-size:18px}
.finale small{display:block;margin-top:20px;color:#8e9bb2;font-size:14px;letter-spacing:.1em}
.lo-foot{background:var(--deep);color:#8e9bb2;font-size:13px;padding:26px 0}
.lo-foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.lo-foot img{width:28px;height:28px;border-radius:50%;background:#fff;padding:3px;vertical-align:middle;margin-right:10px}

@media (prefers-reduced-motion:no-preference){
  .hero h1 .c{animation:rise .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 70ms + 200ms)}
  @keyframes rise{from{transform:translateY(.5em)}to{transform:none}}
  .glow{animation:pulse 3.6s ease-in-out infinite}
  @keyframes pulse{50%{filter:drop-shadow(0 0 34px rgba(216,155,60,.7))}}
}
@media (max-width:980px){
  .lo-nav nav{display:none}
  .lo-nav .pill{margin-left:auto}
  .fgrid,.svcs{grid-template-columns:1fr 1fr}
  .jgrid,.fit-grid,.faq-grid{grid-template-columns:1fr}
  .cgrid,.tgrid{grid-template-columns:1fr 1fr}
  .line{grid-template-columns:1fr 1fr;row-gap:44px}
  .line::before,.line .bar{display:none}
  .gate-label{display:none}
}
@media (max-width:600px){
  .fgrid,.svcs,.cgrid,.tgrid,.line{grid-template-columns:1fr}
  .fcard{height:220px}
  .hero{min-height:0;flex-direction:column;align-items:stretch}
  .hero .wrap{order:1;padding-top:104px;padding-bottom:8px}
  #docs{position:relative;order:2;height:300px;inset:auto}
  .hero .lead{font-size:17px}
  .sec h2{font-size:28px}
  .panel{padding:26px 22px}
  .panel li{font-size:15px;gap:10px}
  .panel li::before{width:22px;height:22px;font-size:12px}
  .finale h2{font-size:34px}
}

#wrapwrap{overflow:visible}
.lo5 h1,.lo5 h2,.lo5 h3{color:inherit;font-family:var(--sans)}
.lo5 .dark h2,.lo5 .finale h2,.lo5 .phero h1{color:#fff}
.lo5 a:hover{color:inherit}
.lo5 .pill:hover{color:var(--navy)}
.lo5 .pill.ghost:hover{color:#fff}
.lo-nav nav a.on{color:#fff;box-shadow:inset 0 -2px 0 var(--gold)}
.mnav{display:none;position:relative}
.lo5 .langsw{color:#c5d0e0;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.1em;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 12px}
.lo5 .langsw:hover{color:#fff;border-color:#fff}
.lo5 .mnav summary{justify-content:center;font-weight:400;list-style:none;cursor:pointer;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#fff;font-size:20px}
.lo5 .mnav summary::-webkit-details-marker{display:none}
.lo5 .mnav summary::after{display:none}
.lo5 .mnav{background:none;box-shadow:none;padding:0;border-radius:0}
.lo5 .mnav[open] summary{background:var(--gold);color:var(--navy)}
.mnav nav{position:absolute;right:0;top:54px;background:var(--navy);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:10px;display:grid;min-width:200px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.mnav nav a{color:#e8edf5;text-decoration:none;padding:10px 14px;border-radius:10px;font-size:16px}
.mnav nav a.on{background:rgba(216,155,60,.15);color:var(--gold)}
/* 內頁開場 */
.phero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 80% 20%,#1b3a68 0%,var(--navy) 50%,var(--deep) 100%);color:#fff}
.phero .wrap{padding-top:150px;padding-bottom:96px;position:relative}
.phero h1{font-size:clamp(44px,6.4vw,84px);line-height:1.22;margin-top:26px}
.phero .lead{margin-top:28px;font-size:19px;color:#c9d3e3}
.phero::after{content:"";position:absolute;right:-120px;bottom:-200px;width:520px;height:520px;border-radius:50%;border:1px solid rgba(216,155,60,.25);box-shadow:0 0 0 60px rgba(216,155,60,.04),0 0 0 140px rgba(216,155,60,.03)}
/* 價值卡 */
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px}
.val{background:#fff;border-radius:22px;padding:30px 26px;box-shadow:0 10px 30px rgba(15,38,71,.07)}
.val b{display:block;margin-top:20px;font-size:24px;color:var(--navy)}
.val .en{font-size:12px;letter-spacing:.3em;color:var(--teal);font-weight:700}
.val p{margin-top:10px;font-size:15px;color:var(--muted)}
/* 團隊（內頁兩欄） */
.tgrid.two{grid-template-columns:1fr 1fr}
.dark .mem{background:rgba(255,255,255,.06);box-shadow:none;border:1px solid rgba(255,255,255,.08)}
.dark .mem b{color:#fff}
.dark .mem p{color:#b9c5d8}
.dark .mem .who{color:var(--gold)}
.mem .row1{display:flex;gap:16px;align-items:center}
.mem .row1 b{margin-top:0}
/* 時間軸 */
.tl{position:relative;margin-top:64px;display:grid;gap:0}
.tl::before{content:"";position:absolute;left:94px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--gold),var(--teal))}
.tli{display:grid;grid-template-columns:76px 40px 1fr;align-items:start;padding:18px 0}
.tli .y{font-weight:900;font-size:22px;color:var(--navy);text-align:right}
.tli .d{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--gold);margin:8px 0 0 10px;position:relative;z-index:1}
.tli:last-child .d{background:var(--gold)}
.tli b{font-size:20px;color:var(--navy)}
.tli p{margin-top:4px;color:var(--muted);font-size:16px}
/* 服務詳細 */
.detail{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,5vw,80px);align-items:start}
.detail .big-n{font-size:clamp(80px,10vw,140px);font-weight:900;line-height:.9;color:transparent;-webkit-text-stroke:2px var(--gold)}
.detail h2{margin-top:18px}
.detail .intro{margin-top:18px;font-size:18px;color:var(--muted)}
.dark .detail .intro{color:#b9c5d8}
.deliv{margin-top:28px}
.deliv span.t{display:block;font-size:13px;letter-spacing:.3em;color:var(--gold);font-weight:700;margin-bottom:12px}
.items{display:grid;gap:14px}
.item{background:#fff;border-radius:18px;padding:22px 24px;box-shadow:0 8px 24px rgba(15,38,71,.06);display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
.dark .item{background:rgba(255,255,255,.06);box-shadow:none;border:1px solid rgba(255,255,255,.08)}
.item .k{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(216,155,60,.14);color:var(--gold);font-weight:900}
.item b{font-size:18px;color:var(--navy)}
.dark .item b{color:#fff}
.item p{margin-top:4px;font-size:15px;color:var(--muted)}
.dark .item p{color:#b9c5d8}
.dark .tags span{background:rgba(255,255,255,.08);color:#9fd8cf}
/* 方案 */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px;align-items:stretch}
.plan{background:#fff;border-radius:24px;padding:34px 30px;box-shadow:0 12px 34px rgba(15,38,71,.08);display:flex;flex-direction:column}
.plan .pt{font-size:12px;letter-spacing:.2em;color:var(--teal);font-weight:700}
.plan h3{font-size:26px;color:var(--navy);margin-top:10px}
.plan .desc{margin-top:12px;font-size:15px;color:var(--muted)}
.plan .price{margin-top:24px;font-weight:900;font-size:40px;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums}
.plan .price small{font-size:15px;font-weight:500;color:var(--muted);margin-left:6px}
.plan ul{list-style:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid #ece6d9;display:grid;gap:10px}
.plan li{display:flex;gap:10px;font-size:15px;align-items:baseline}
.plan li::before{content:"✓";flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--mint);color:var(--teal);font-size:11px;font-weight:900}
.plan .fit{margin-top:auto;padding-top:22px;font-size:14px;color:var(--teal);font-weight:700}
.plan .pill{margin-top:18px;justify-content:center}
.plan.hi{background:var(--navy);color:#e8edf5;box-shadow:0 20px 50px rgba(15,38,71,.3)}
.plan.hi h3,.plan.hi .price{color:#fff}
.plan.hi .desc,.plan.hi .price small{color:#b9c5d8}
.plan.hi ul{border-color:rgba(255,255,255,.12)}
.plan.hi li::before{background:var(--gold);color:var(--navy)}
.plan.hi .pt,.plan.hi .fit{color:var(--gold)}
.when{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.when div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:24px}
.when b{color:#fff;font-size:18px}
.note{margin-top:28px;color:#b9c5d8;font-size:16px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px}
.duo div{background:#fff;border-radius:20px;padding:28px;box-shadow:0 8px 24px rgba(15,38,71,.06)}
.duo b{font-size:20px;color:var(--navy)}
.duo p{margin-top:8px;color:var(--muted)}
/* 聯絡 */
.cgrid2{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:start}
.info{background:var(--navy);color:#e8edf5;border-radius:24px;padding:34px}
.info h3{font-size:22px;color:#fff}
.info ol{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:16px;counter-reset:s}
.info li{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;counter-increment:s}
.info li::before{content:counter(s);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--navy);font-weight:900}
.info .meta{margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:grid;gap:10px;font-size:15px;color:#b9c5d8}
.info .meta b{color:#fff}
.formcard{background:#fff;border-radius:24px;padding:34px;box-shadow:0 12px 34px rgba(15,38,71,.08)}
.formcard h3{font-size:22px;color:var(--navy);margin-bottom:18px}
.lo5 .s_website_form{padding:0!important}
.lo5 .s_website_form .container-fluid{padding:0}
.lo5 .s_website_form_field>.row{display:block;margin:0}
.lo5 .s_website_form_field>.row>*{width:100%!important;padding:0;max-width:none;flex:none}
.lo5 .s_website_form_label{font-weight:700;color:var(--navy);font-size:15px;padding:0 0 6px}
.lo5 .s_website_form_mark{color:var(--gold)}
.lo5 .s_website_form_input{border:1.5px solid #e2dccf;border-radius:12px;padding:12px 14px;font-size:16px;background:var(--cream)}
.lo5 .s_website_form_input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(216,155,60,.15);background:#fff}
.lo5 .s_website_form_send{background:var(--gold)!important;border:0!important;color:var(--navy)!important;font-weight:900;border-radius:999px;padding:14px 32px;font-size:16px;box-shadow:0 8px 24px rgba(216,155,60,.35)}
.lo5 .s_website_form_submit{text-align:left!important}
.lo5 .s_website_form_send:hover{text-decoration:none}
.lo5 .s_website_form_send{text-decoration:none}
/* 感謝頁 */
.thanks .wrap{padding-top:180px;padding-bottom:160px;text-align:center}
.thanks .ok{width:96px;height:96px;border-radius:50%;margin:0 auto;display:grid;place-items:center;background:var(--teal);color:#fff;font-size:44px;font-weight:900;box-shadow:0 0 0 14px rgba(30,122,119,.2)}
.thanks h1{margin-top:36px}
.thanks .acts{margin-top:40px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* 頁尾 */
.lo-foot{padding:56px 0 28px}
.lo-foot .wrap{display:block}
.lo5 .s_website_form_input{width:100%;display:block}
.fgrid2{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.fgrid2 .brand2{display:flex;gap:12px;align-items:center;color:#fff;font-weight:700;font-size:17px}
.fgrid2 .brand2 img{width:40px;height:40px;border-radius:50%;background:#fff;padding:4px}
.fgrid2 p{margin-top:14px;font-size:14px;color:#8e9bb2}
.fgrid2 h4{margin:0 0 12px;font-size:13px;letter-spacing:.3em;color:var(--gold)}
.fgrid2 a{display:block;text-decoration:none;color:#b9c5d8;font-size:15px;padding:3px 0}
.fgrid2 a:hover{color:#fff}
.copy{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px}
@media (max-width:980px){
  .mnav{display:block}
  .lo-nav .pill{margin-left:auto}
  .vgrid{grid-template-columns:1fr 1fr}
  .detail,.cgrid2,.duo{grid-template-columns:1fr}
  .plans,.when{grid-template-columns:1fr}
  .tgrid.two{grid-template-columns:1fr}
  .fgrid2{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .vgrid{grid-template-columns:1fr}
  .phero .wrap{padding-top:120px;padding-bottom:64px}
  .phero h1{font-size:36px}
  .phero .lead{font-size:17px}
  .tl::before{left:62px}
  .tli{grid-template-columns:48px 30px 1fr}
  .tli .y{font-size:16px}
  .tli .d{margin-left:4px}
  .fgrid2{grid-template-columns:1fr}
  .lo-nav{gap:10px}
  .brand small{display:none}
  .brand b{font-size:15px;white-space:nowrap}
  .brand img{width:36px;height:36px}
  .lo-nav .pill{padding:9px 14px;font-size:13px;white-space:nowrap}
  .lo5 .lo-nav>.langsw{display:none}
  .info,.formcard{padding:26px 22px}
}
.lo5 .pill.ghostlite{background:var(--mint);color:var(--teal);box-shadow:none}.lo5 .pill.ghostlite:hover{color:var(--teal)}