:root {
  --ink:#172326; --muted:#5c686b; --paper:#f7f5ef; --white:#fff;
  --teal:#0b7775; --teal-dark:#064f52; --red:#b33b32; --amber:#dda329;
  --steel:#233136; --line:#d8dddb; --shadow:0 18px 45px rgba(23,35,38,.14); --radius:12px;
  font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); line-height:1.7; }
a { color:inherit; }
.wrap { width:min(1120px,calc(100% - 32px)); margin:auto; }
.topbar { position:sticky; top:0; z-index:20; background:rgba(247,245,239,.96); border-bottom:1px solid rgba(23,35,38,.12); backdrop-filter:blur(14px); }
.topbar-inner { min-height:68px; display:flex; justify-content:space-between; align-items:center; gap:18px; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand img { width:44px; height:44px; }
.brand strong,.brand span { display:block; }
.brand strong { font-size:18px; line-height:1.2; }
.brand span { font-size:12px; color:var(--muted); }
.nav { display:flex; align-items:center; gap:17px; font-weight:800; font-size:14px; }
.nav a { text-decoration:none; }
.nav a:hover { color:var(--teal-dark); }
.nav .call { background:var(--red); color:#fff; padding:9px 12px; border-radius:8px; }
.hero { color:#fff; background:linear-gradient(118deg,#063f43 0%,#0b7775 56%,#174f52 100%); padding:76px 0 68px; }
.hero-inner { max-width:780px; }
.hero h1 { font-size:clamp(36px,6vw,58px); line-height:1.14; letter-spacing:-.03em; margin:0 0 18px; }
.hero p { font-size:18px; max-width:42em; margin:0; color:rgba(255,255,255,.9); }
.hero-actions,.action-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:11px 18px; border-radius:8px; text-decoration:none; font-weight:900; }
.btn-primary { background:var(--amber); color:#1d190e; }
.btn-light { border:1px solid rgba(255,255,255,.7); color:#fff; }
.btn-dark { background:var(--teal-dark); color:#fff; }
.btn-outline { border:1px solid var(--teal-dark); color:var(--teal-dark); }
.intro { padding:46px 0 8px; }
.intro p { max-width:70ch; font-size:17px; }
.section { padding:62px 0; }
.section-alt { background:#e9f0ef; }
.section h2 { font-size:clamp(27px,4vw,40px); line-height:1.25; letter-spacing:-.025em; margin:0 0 12px; }
.section-copy { max-width:68ch; margin:0; color:var(--muted); }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px; }
.step { padding:24px; background:var(--white); border-radius:var(--radius); box-shadow:0 10px 24px rgba(23,35,38,.08); }
.step strong { display:block; color:var(--teal-dark); font-size:18px; margin-bottom:7px; }
.step p { margin:0; color:var(--muted); }
.checklist { columns:2; gap:40px; margin:26px 0 0; padding:0; list-style:none; }
.checklist li { break-inside:avoid; padding:12px 0 12px 28px; border-bottom:1px solid var(--line); position:relative; }
.checklist li::before { content:""; position:absolute; left:2px; top:19px; width:13px; height:13px; background:var(--teal); clip-path:polygon(0 43%,21% 43%,39% 64%,79% 0,100% 0,40% 100%); }
.faq { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:26px; }
.faq article { background:var(--white); padding:21px 23px; border-radius:var(--radius); }
.faq h3 { margin:0 0 8px; font-size:18px; }
.faq p { margin:0; color:var(--muted); }
.contact { background:var(--steel); color:#fff; padding:58px 0 76px; }
.contact h2 { margin:0; font-size:clamp(28px,4vw,42px); line-height:1.25; }
.contact p { max-width:58ch; color:rgba(255,255,255,.82); }
.contact .btn-outline { color:#fff; border-color:rgba(255,255,255,.7); }
.footer { padding:25px 0 90px; color:var(--muted); font-size:14px; }
.footer-inner { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.mobile-cta { display:none; position:fixed; z-index:30; bottom:0; left:0; right:0; grid-template-columns:repeat(3,1fr); background:var(--steel); }
.mobile-cta a { padding:14px 6px; text-align:center; color:#fff; text-decoration:none; font-weight:900; border-right:1px solid rgba(255,255,255,.16); }
.mobile-cta a:nth-child(2) { background:var(--teal); }
a:focus-visible { outline:3px solid var(--amber); outline-offset:3px; }
@media(max-width:900px) {
  .nav { display:none; }
  .steps,.faq { grid-template-columns:1fr; }
  .checklist { columns:1; }
  .mobile-cta { display:grid; }
  .topbar-inner { min-height:62px; }
  .hero { padding:52px 0; }
  .hero p { font-size:16px; }
  .section { padding:48px 0; }
  .footer { padding-bottom:82px; }
}