/* NEXELOGIC 官網共用樣式：色彩、導覽列、手機選單、頁尾、底部按鈕列、開場動畫、捲動進場、深色模式 */
:root{color-scheme:light}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#F5F7FA}
[hidden]{display:none!important}
a{color:#2C5486;text-decoration:none}a:hover{color:#1D3B60}
img,svg{max-width:100%}
.p{--bg:#F5F7FA;--s:#FFFFFF;--s2:#EDF1F6;--ln:#DCE3EC;--ln2:#C7D2DF;--tx:#0F1E33;--mu:#526279;--br:#2C5486;--brh:#244874;--ac:#2B8E9B;--acd:#62B2BC;--acs:rgba(98,178,188,.16);--rs:#C9601A;--rss:rgba(201,96,26,.1);--wk:#6A4CCB;--at:#B03E78;--ok:#1E8A55;--wn:#A86A12;--er:#C63B3B;--navbg:rgba(255,255,255,.9);
font-family:Manrope,'Noto Sans TC','Noto Sans Thai',system-ui,sans-serif;background:var(--bg);color:var(--tx);min-height:100vh;overflow-x:clip;transition:background-color .4s ease,color .4s ease}
html[lang="th"] .p{font-family:Manrope,'Noto Sans Thai','Noto Sans TC',system-ui,sans-serif}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#2C5486;color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;transition:top .2s}
.skip:focus{top:12px;color:#fff}
.p :focus-visible{outline:3px solid #62B2BC;outline-offset:3px;border-radius:6px}


/* 基本元件（各頁可再覆寫） */
.w{max-width:1200px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.col{display:flex;flex-direction:column}
.mu{color:var(--mu)}.sm{font-size:14px}.xs{font-size:12px}
.card{background:var(--s);border:1px solid var(--ln);border-radius:20px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;border-radius:999px;padding:5px 12px;background:var(--acs);color:var(--ac)}
.btn{font-family:inherit;font-size:16px;font-weight:700;border-radius:999px;padding:0 24px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid transparent;box-sizing:border-box;cursor:pointer;white-space:nowrap;transition:transform .15s,box-shadow .25s,border-color .25s,background-color .25s}
.btn:active{transform:scale(.96)}
.bp{background:var(--br);color:#fff}.bp:hover{color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px rgba(44,84,134,.24)}
.bs{background:var(--s);color:var(--br);border-color:var(--ln2)}.bs:hover{border-color:var(--br);background:var(--acs)}

/* ---------- 導覽列 ---------- */
.nav{position:sticky;top:0;z-index:40;background:var(--navbg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--ln);transition:box-shadow .35s,background-color .35s}
.nav.sc{box-shadow:0 6px 22px rgba(15,30,51,.08)}
.nav .w{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px;transition:height .35s cubic-bezier(.2,.8,.2,1)}
.nav.sc .w{height:60px}
.nav .logo{display:flex;align-items:center;gap:10px;color:var(--tx);flex:none}
.nav .logo b{font-weight:800;font-size:18px;letter-spacing:.08em;display:block}
.nav .logo small{font-size:12px;color:var(--mu);letter-spacing:.32em;display:block}
.nl{display:flex;gap:26px;font-size:15px;font-weight:500;align-items:center}
.nl>a,.nl>.dd>button{color:var(--tx);position:relative;padding:8px 0;font:inherit;background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:4px}
.nl>a::after,.nl>.dd>button::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--br);transform:scaleX(0);transform-origin:right;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.nl>a:hover::after,.nl>a.on::after,.nl>.dd:hover>button::after,.nl>.dd.on>button::after{transform:scaleX(1);transform-origin:left}
.nl>a.on,.nl>.dd.on>button{color:var(--br);font-weight:700}
.nl .car{transition:transform .25s}
.dd{position:static}
.dd:hover .car,.dd:focus-within .car,.dd.open .car{transform:rotate(180deg)}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--s);border-bottom:1px solid var(--ln);box-shadow:0 24px 50px rgba(15,30,51,.14);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .3s cubic-bezier(.2,.8,.2,1),visibility .2s}
.dd:hover .mega,.dd:focus-within .mega,.dd.open .mega{opacity:1;visibility:visible;transform:none}
.mega .in{max-width:1200px;margin:0 auto;padding:24px 24px 28px;box-sizing:border-box;display:flex;gap:20px;align-items:stretch}
.mega .grid{flex:2 1 560px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.mi{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:16px;color:var(--tx);transition:background .2s}
.mi:hover{background:var(--s2);color:var(--tx)}
.mi b{font-size:16px;display:block}.mi small{font-size:12px;color:var(--mu);line-height:1.6;display:block;margin-top:4px}
.mi .ib3{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none;transition:transform .3s}
.mi:hover .ib3{transform:rotate(-8deg) scale(1.08)}
.feat{flex:1 1 300px;display:flex;flex-direction:column;gap:10px;border-radius:20px;padding:24px;color:#fff;background:linear-gradient(140deg,#2C5486,#2B8E9B);transition:transform .3s,box-shadow .3s}
.feat:hover{color:#fff;transform:translateY(-4px);box-shadow:0 18px 40px rgba(44,84,134,.3)}
.navr{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.navr .lk{font-size:14px;font-weight:700;color:var(--tx);padding:8px 6px}
.ibtn{width:40px;height:40px;border-radius:12px;border:1px solid var(--ln);background:var(--s);color:var(--tx);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .2s,color .2s,border-color .2s;flex:none}
.ibtn:hover{background:var(--acs);color:var(--ac);border-color:var(--acd)}
.ibtn svg{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.ibtn:hover svg{transform:rotate(-20deg)}
.thm .moon{display:none}[data-theme=dark] .thm .moon{display:block}[data-theme=dark] .thm .sun{display:none}
.lang{position:relative}
.lang>button{font:inherit;font-size:14px;font-weight:700;color:var(--mu);background:none;border:0;cursor:pointer;min-height:40px;padding:0 6px;display:flex;align-items:center;gap:4px}
.lang ul{position:absolute;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;background:var(--s);border:1px solid var(--ln);border-radius:14px;box-shadow:0 18px 40px rgba(15,30,51,.14);min-width:150px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .25s,visibility .2s}
.lang.open ul,.lang:focus-within ul{opacity:1;visibility:visible;transform:none}
.lang li a{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:10px;color:var(--tx);font-size:14px;font-weight:600}
.lang li a:hover{background:var(--s2)}.lang li a.on{color:var(--br);font-weight:800}
.lang li a .soon{font-size:11px;color:var(--mu);font-weight:600}

/* 手機選單 */
.mm{display:none}
.mm>summary{list-style:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--ln2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tx);background:var(--s);box-sizing:border-box;position:relative}
.mm>summary::-webkit-details-marker{display:none}
.mm>summary i{position:absolute;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .2s}
.mm>summary i:nth-child(1){transform:translateY(-6px)}.mm>summary i:nth-child(3){transform:translateY(6px)}
.mm[open]>summary i:nth-child(1){transform:rotate(45deg)}.mm[open]>summary i:nth-child(2){opacity:0}.mm[open]>summary i:nth-child(3){transform:rotate(-45deg)}
.mmp{position:fixed;left:0;right:0;top:64px;bottom:0;background:var(--s);padding:8px 16px 32px;display:flex;flex-direction:column;z-index:60;overflow:auto;box-sizing:border-box;animation:mmIn .32s cubic-bezier(.2,.8,.2,1)}
@keyframes mmIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.mmp a.mi2{min-height:54px;display:flex;align-items:center;justify-content:space-between;font-size:18px;font-weight:800;color:var(--tx);border-bottom:1px solid var(--ln);opacity:0;transform:translateY(10px);animation:li .4s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes li{to{opacity:1;transform:none}}
.mmp .lg{display:flex;gap:6px;margin:18px 0 12px}
.mmp .lg a{flex:1;text-align:center;font-size:14px;font-weight:700;border-radius:999px;padding:12px;background:var(--s2);color:var(--mu)}
.mmp .lg a.on{background:var(--br);color:#fff}
.mmp .acts{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.mmp .acts a{min-height:48px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:700;border:1.5px solid var(--ln2);color:var(--br)}
.mmp .acts a.pri{background:var(--br);color:#fff;border-color:var(--br)}
body.lock{overflow:hidden}

/* 頁尾 */
.ft{background:#0F1E33;color:#C9D4E3;padding:72px 0 32px}
.ft a{color:#9AABC2}.ft a:hover{color:#fff}
.ft .cols{display:flex;gap:64px;align-items:flex-start;flex-wrap:wrap}
.ft .cols>div{display:flex;flex-direction:column;gap:12px;font-size:14px}
.ft .cols b{color:#fff}

/* 浮動 LINE、底部按鈕列 */
.fab{position:fixed;right:24px;bottom:24px;z-index:35;width:58px;height:58px;border-radius:50%;background:#06C755;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;box-shadow:0 10px 26px rgba(6,199,85,.4);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.fab:hover{color:#fff;transform:scale(1.08)}
.fab::before,.fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #06C755;animation:pl 2.4s ease-out infinite;pointer-events:none}
.fab::after{animation-delay:1.2s}
@keyframes pl{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.7);opacity:0}}
.mbar{display:none}

/* 開場動畫（首頁第一次造訪） */
.intro{position:fixed;inset:0;z-index:200;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;animation:ovOut .75s 2.55s cubic-bezier(.65,0,.35,1) forwards}
.intro.done{display:none}
.intro .grid{position:absolute;inset:0;background-image:linear-gradient(#DCE3EC 1px,transparent 1px),linear-gradient(90deg,#DCE3EC 1px,transparent 1px);background-size:40px 40px;opacity:0;animation:fadeIn .5s forwards;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0,transparent 65%);mask-image:radial-gradient(circle at 50% 50%,#000 0,transparent 65%)}
.intro .mk path{stroke-dasharray:100;stroke-dashoffset:100}
.intro .mk .b path{animation:draw .7s .35s cubic-bezier(.65,0,.35,1) forwards}
.intro .mk .n{animation:draw .8s .55s cubic-bezier(.65,0,.35,1) forwards}
.intro .mk .z{animation:draw .8s .75s cubic-bezier(.65,0,.35,1) forwards}
.intro .mk .sl{animation:draw .35s 1.3s cubic-bezier(.2,.8,.2,1) forwards}
.intro .ring{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px solid #62B2BC;opacity:0;animation:ring .9s 1.45s cubic-bezier(.2,.8,.2,1) forwards}
.intro .wm{display:flex;gap:2px;font:800 30px Manrope,sans-serif;letter-spacing:.14em;overflow:hidden;color:#0F1E33}
.intro .wm span{display:inline-block;transform:translateY(110%);animation:up .5s cubic-bezier(.2,.8,.2,1) forwards}
.intro .zh{font-size:14px;color:#526279;font-weight:700;opacity:0;animation:track .7s 1.75s cubic-bezier(.2,.8,.2,1) forwards}
.intro .tag{font-size:15px;color:#526279;opacity:0;transform:translateY(8px);animation:rise .5s 1.95s cubic-bezier(.2,.8,.2,1) forwards}
.intro .bar{width:200px;height:3px;border-radius:3px;background:#EDF1F6;overflow:hidden}
.intro .bar i{display:block;height:100%;background:linear-gradient(90deg,#2C5486,#62B2BC);transform-origin:left;transform:scaleX(0);animation:fill 2.3s .2s cubic-bezier(.65,0,.35,1) forwards}
.intro .skp{position:absolute;right:20px;bottom:20px;font-family:inherit;font-size:13px;font-weight:700;color:#526279;background:transparent;border:0;min-height:44px;padding:0 14px;border-radius:999px;cursor:pointer}
.intro .skp:hover{background:rgba(98,178,188,.16);color:#2C5486}
.intro.quick{animation:ovOut .45s .25s cubic-bezier(.65,0,.35,1) forwards}
.intro.quick>*{display:none}
@keyframes ovOut{to{transform:translateY(-101%);visibility:hidden}}
@keyframes fadeIn{to{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes ring{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.4)}}
@keyframes up{to{transform:none}}
@keyframes track{0%{opacity:0;letter-spacing:.9em}100%{opacity:1;letter-spacing:.42em}}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes fill{to{transform:scaleX(1)}}

/* 捲動進場 */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* 通知 */
.toastw{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:150;display:flex;flex-direction:column;gap:8px;width:min(420px,calc(100% - 32px))}
.toast{background:var(--s);border:1px solid var(--ln);border-radius:14px;padding:14px 16px;display:flex;gap:10px;align-items:center;box-shadow:0 18px 40px rgba(44,84,134,.18);font-size:14px;color:var(--tx);animation:tin .45s cubic-bezier(.2,.8,.2,1)}
.toast.er{border-color:#F0B4B4}
@keyframes tin{from{transform:translateY(-130%);opacity:0}}

/* 表單送出狀態（共用） */
.btn[aria-busy=true]{pointer-events:none;opacity:.8}
.btn .spin{width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.fe{font-size:12px;color:var(--er);font-weight:600}
.in.bad{border-color:var(--er)!important;box-shadow:0 0 0 4px rgba(198,59,59,.12)!important;animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.hpot{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* 響應式 */
@media (max-width:1099px){.nl{display:none}.mm{display:block}.navr .lk,.navr .lang{display:none}}
@media (max-width:767px){
.nav .w{height:64px!important;gap:10px}
.navr .btn{min-height:40px!important;padding:0 14px!important;font-size:14px!important;white-space:nowrap}
.navr .thm{display:none}
.fab{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:54px;height:54px}
.ft{padding:48px 0 28px}.ft .cols{gap:32px}
}

/* 深色模式 */
html[data-theme=dark]{color-scheme:dark}
html[data-theme=dark] body{background:#0A1320}
html[data-theme=dark] .p{--bg:#0A1320;--s:#101C2D;--s2:#16253A;--ln:#22344B;--ln2:#2E445F;--tx:#E7EEF7;--mu:#9AABC2;--br:#7FA8DE;--brh:#9BBDE8;--ac:#6CC3CD;--acs:rgba(98,178,188,.14);--rs:#F29A58;--rss:rgba(242,154,88,.12);--wk:#A994F4;--at:#E97FB3;--ok:#4ADE80;--wn:#FBBF24;--er:#F87171;--navbg:rgba(10,19,32,.86)}
html[data-theme=dark] .p .bp,html[data-theme=dark] .mmp .acts a.pri,html[data-theme=dark] .mbar .m1{color:#0A1320}
html[data-theme=dark] .p [style*="background:#fff"],html[data-theme=dark] .p [style*="background:#FFFFFF"]{background:var(--s)!important}
html[data-theme=dark] .p [style*="color:#0F1E33"]{color:var(--tx)!important}
html[data-theme=dark] .p .ph{background:repeating-linear-gradient(135deg,#16253A 0 12px,#132034 12px 24px)!important;border-color:#2E445F!important}
html[data-theme=dark] .ft{background:#060D17}

@media (prefers-reduced-motion:reduce){
.p *,.intro,.intro *{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.js .reveal{opacity:1;transform:none}
html{scroll-behavior:auto}
}

/* 頁面共用的手機調整（各頁版面沿用設計稿，手機時統一收邊距與字級） */
@media (max-width:767px){
.p .w{padding-left:16px!important;padding-right:16px!important}
.p main section{padding-top:56px!important;padding-bottom:56px!important}
.p .sec{padding:56px 0}
.p .lead{font-size:16px}
.p .h1{font-size:34px!important}
.p .h2{font-size:26px!important}
.p [style*="repeat(3,1fr)"],.p [style*="repeat(3,minmax(0,1fr))"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.p [style*="repeat(6,1fr)"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.p main table{display:block;overflow-x:auto;white-space:nowrap}
.p .card[style*="padding:36px"],.p .card[style*="padding:48px"],.p .card[style*="padding:40px"]{padding:24px!important}
.p .seg{flex-wrap:wrap;justify-content:center}
}

/* v1.1：選單圖示、社群、版本、手機選單修正 */
.nl .ni{opacity:.55;margin-right:2px;transition:opacity .2s,transform .3s}
.nl>a:hover .ni,.nl>a.on .ni,.nl>.dd:hover .ni{opacity:1;transform:translateY(-1px)}
/* 打開手機選單時，導覽列不能有 backdrop-filter，否則選單會被裁切在導覽列裡 */
body.lock .nav,.nav:has(.mm[open]){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--s)!important}
/* 各頁的 details／summary 樣式（例如常見問題）不能影響漢堡選單 */
.p .mm{border:0!important;border-radius:0!important;padding:0!important;margin:0!important;background:none!important;box-shadow:none!important}
.p .mm>summary{width:44px!important;height:44px!important;min-height:0!important;padding:0!important;margin:0!important;border:1px solid var(--ln2)!important;border-radius:12px!important;background:var(--s)!important;font-size:0!important;display:flex!important;justify-content:center!important}
.p .mm>summary::after,.p .mm>summary::before{content:none!important}
.mmp a.mi2{gap:14px;justify-content:flex-start;font-size:16px;min-height:64px}
.mmp a.mi2>span:last-child{margin-left:auto}
.mmp .mic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
.mmp .mt b{display:block;font-size:16px}.mmp .mt small{display:block;font-size:12px;color:var(--mu);font-weight:500}
.mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px;opacity:0;animation:li .4s .3s cubic-bezier(.2,.8,.2,1) forwards}
.mi3{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:14px;background:var(--s2);color:var(--tx);font-size:15px;font-weight:700}
.mi3 svg{color:var(--br);flex:none}
.mmp .acts a{gap:8px}
.soc{display:flex;gap:10px;flex-wrap:wrap}
.sbtn{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:#C9D4E3;border:1px solid rgba(255,255,255,.12);transition:background .25s,color .25s,transform .25s,border-color .25s}
.sbtn:hover{background:var(--sc);border-color:var(--sc);color:#fff;transform:translateY(-3px)}
.mmp .sbtn{background:var(--s2);color:var(--tx);border-color:var(--ln)}
.ft .cols a{display:flex;align-items:center;gap:8px}
.ft .cols a svg{opacity:.6;flex:none;transition:opacity .2s,transform .2s}
.ft .cols a:hover svg{opacity:1;transform:translateX(2px)}
.ft .cols b{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.ft .ver{margin-left:12px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.08);color:#9AABC2}
body.lock .mbar,body.lock .fab{display:none!important}