/* 中性版：不掛任何公司識別。深色科技風，對比全部實算過 WCAG。
   主色青 #22D3EE 對底 10.70:1；紫 #7C5CFF 只有 4.45 故僅用於漸層裝飾，不當一般字色；
   輸入框邊框 #566C90 取 3.31:1，過 UI 元件的 3:1 門檻。 */
:root{
  --bg:#0A0E14; --surface:#131924; --field:#0E141D;
  --text:#E8EDF5; --muted:#9AA7B8; --placeholder:#7E8DA0;
  --line:#232D3D; --border:#566C90;
  --accent:#22D3EE; --accent-ink:#06202A;
  --violet:#7C5CFF; --violet-tx:#A78BFA;
  --ok:#34D399; --err:#FF8A8A;
  --radius:14px; --maxw:760px;
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:16px; line-height:1.75; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(760px 420px at 12% -8%, rgba(124,92,255,.20), transparent 62%),
    radial-gradient(680px 380px at 92% 4%, rgba(34,211,238,.14), transparent 60%);
}
.wrap{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 20px}

.topbar{position:relative; z-index:1}
.topbar-in{max-width:var(--maxw); margin:0 auto; padding:26px 20px 0}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none}
.brand svg{display:block; flex:none}
.brand b{font-size:14px; font-weight:700; letter-spacing:.04em; color:var(--muted)}
.brand-logo,.brand-sub{display:none}

.hero{padding:34px 0 8px}
.kicker{
  display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.12em;
  color:var(--accent); border:1px solid rgba(34,211,238,.42);
  border-radius:999px; padding:5px 13px; margin-bottom:18px;
}
h1{font-size:clamp(30px,7.4vw,50px); font-weight:900; line-height:1.2; letter-spacing:-.01em; margin-bottom:12px}
h1 .sub{
  display:block; font-size:clamp(15px,3.5vw,21px); font-weight:500;
  color:var(--violet-tx); letter-spacing:.02em; margin-top:10px;
}
.lede{font-size:clamp(15px,3.6vw,17.5px); color:var(--muted); max-width:56ch}
.lede strong{color:var(--text); font-weight:700}

.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; margin:26px 0 6px;
}
.fact{background:var(--surface); padding:14px 16px}
.fact dt{font-size:11.5px; font-weight:700; letter-spacing:.1em; color:var(--muted); margin-bottom:4px}
.fact dd{font-size:16px; font-weight:700; line-height:1.45}
.fact dd small{display:block; font-size:12.5px; font-weight:400; color:var(--muted); margin-top:2px}

section{padding:38px 0 0}
h2{font-size:19px; font-weight:900; margin-bottom:6px; display:flex; align-items:center; gap:10px}
h2::before{
  content:""; width:4px; height:18px; border-radius:2px; flex:none;
  background:linear-gradient(180deg,var(--accent),var(--violet));
}
.h2note{font-size:13.5px; color:var(--muted); margin:0 0 18px 14px}

.items{display:grid; gap:12px}
.item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
}
.item .no{font-size:13px; font-weight:900; color:var(--accent); font-variant-numeric:tabular-nums; padding-top:2px}
.item h3{font-size:16px; font-weight:700; margin-bottom:3px}
.item p{font-size:14.5px; color:var(--muted); line-height:1.7}

.who{display:grid; gap:10px; margin-top:4px}
.who li{list-style:none; font-size:15px; padding-left:26px; position:relative; color:var(--text)}
.who li::before{
  content:""; position:absolute; left:4px; top:.62em; width:8px; height:8px;
  border-radius:2px; background:var(--accent);
}
.who li small{display:block; color:var(--muted); font-size:13.5px}

.formcard{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px 20px; margin-top:18px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.f{margin-bottom:16px}
label.lb{display:block; font-size:14px; font-weight:700; margin-bottom:7px}
label.lb .req{color:var(--err); margin-left:3px}
label.lb .hint{display:block; font-size:12.5px; font-weight:400; color:var(--muted); margin-top:2px}
input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%; background:var(--field); color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  padding:12px 13px; font-size:16px; font-family:inherit; line-height:1.5;
  transition:border-color .15s, box-shadow .15s;
}
textarea{min-height:104px; resize:vertical}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(34,211,238,.18)}
select{
  appearance:none; cursor:pointer; padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239AA7B8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.opts{display:flex; flex-wrap:wrap; gap:9px}
.opt{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--field); border:1px solid var(--border); border-radius:999px;
  padding:9px 15px; font-size:14.5px; transition:.15s; user-select:none;
}
.opt input{accent-color:var(--accent); width:16px; height:16px; margin:0; cursor:pointer; flex:none}
.opt:hover{border-color:var(--accent)}
.opt:has(input:checked){border-color:var(--accent); background:rgba(34,211,238,.13); font-weight:700}
.opt:focus-within{box-shadow:0 0 0 3px rgba(34,211,238,.18)}
.err{display:none; color:var(--err); font-size:13px; margin-top:6px; font-weight:500}
.f.bad input,.f.bad select,.f.bad textarea{border-color:var(--err)}
.f.bad .err{display:block}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.submit{
  width:100%; background:var(--accent); color:var(--accent-ink);
  border:none; border-radius:12px; padding:16px;
  font-size:17px; font-weight:900; font-family:inherit; letter-spacing:.02em;
  cursor:pointer; transition:.15s; margin-top:6px;
}
.submit:hover:not(:disabled){filter:brightness(1.1)}
.submit:disabled{opacity:.55; cursor:not-allowed}
.submit:focus-visible{outline:3px solid var(--violet-tx); outline-offset:2px}
.formnote{font-size:12.5px; color:var(--muted); text-align:center; margin-top:14px; line-height:1.7}
.banner{display:none; border-radius:10px; padding:12px 14px; font-size:14.5px; margin-bottom:16px; font-weight:500}
.banner.show{display:block}
.banner.bad{background:rgba(255,138,138,.12); border:1px solid rgba(255,138,138,.5); color:var(--err)}
.cf-turnstile{margin:4px 0 14px}

.closed{
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:34px 24px; margin-top:18px; text-align:center;
}
.closed h3{font-size:19px; font-weight:900; margin-bottom:8px}
.closed p{color:var(--muted); font-size:15px}

#done{display:none; padding:52px 0 0; text-align:center}
#done.show{display:block}
.tick{
  width:66px; height:66px; border-radius:50%; margin:0 auto 20px;
  display:grid; place-items:center; background:rgba(52,211,153,.14); border:1px solid rgba(52,211,153,.5);
}
#done h2{justify-content:center; font-size:26px; margin-bottom:10px}
#done h2::before{display:none}
#done .p{color:var(--muted); font-size:15.5px; margin-bottom:22px}
.codebox{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; display:inline-block; min-width:230px}
.codebox dt{font-size:11.5px; letter-spacing:.1em; color:var(--muted); font-weight:700}
.codebox dd{font-size:30px; font-weight:900; letter-spacing:.1em; color:var(--accent); font-variant-numeric:tabular-nums; margin-top:6px}
.nextsteps{text-align:left; max-width:460px; margin:26px auto 0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px}
.nextsteps h3{font-size:14.5px; font-weight:700; margin-bottom:10px}
.nextsteps li{font-size:14px; color:var(--muted); margin-left:18px; line-height:1.85}

footer{padding:46px 0 40px; margin-top:44px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); line-height:1.8}
footer .legal{display:none}

@media(max-width:560px){
  .grid2{grid-template-columns:1fr}
  .formcard{padding:20px 16px}
  .item{grid-template-columns:1fr; gap:6px}
  .item .no{padding-top:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
