:root{
      --bg:#f6f8fc;       /* 淺底 */
      --panel:#ffffff;    /* 卡片底 */
      --ink:#1b2130;      /* 主字色 */
      --muted:#667085;    /* 次字色 */
      --line:#e9edf3;     /* 邊線 */
      --gold-ink:#3b2e12; /* 金系字色 */
      --gold:#b08a2e;     /* 金色 */
      --gold-grad:linear-gradient(135deg,#d7c07a,#c6a857 40%,#b08a2e);
      --shadow:0 10px 30px rgba(28,40,64,.12);
      --radius:18px;
      --container: clamp(320px, 92vw, 1200px);
      --ok:#19c37d;
      --err:#ff6b6b;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0; font-family:"Noto Sans TC", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif; background:var(--bg); color:var(--ink); line-height:1.65; -webkit-text-size-adjust:100%}
    a{text-decoration:none; color:inherit}

    .container{width:var(--container); margin:0 auto}

    /* Header */
    header{padding:28px 0 10px}
    .logoRow{display:flex; align-items:center; gap:14px}
    .logo{width:46px; height:46px; border-radius:12px; background:var(--gold-grad); box-shadow:var(--shadow); position:relative; object-fit:cover}
    .logo::after{content:""; position:absolute; inset:2px; border-radius:10px; background:linear-gradient(180deg,#ffffffa8,#ffffff22)}
    h1{margin:0; font-size:clamp(24px,4.2vw,42px); font-weight:900; letter-spacing:.3px}
    .subtitle{color:var(--muted); margin-top:6px; font-size:clamp(13px,1.9vw,16px)}

    /* Hero */
    .hero{margin-top:16px; padding:22px; background:var(--panel); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); position:relative; overflow:hidden}
    .badges{display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 8px}
    .badge{padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:#faf9f4; font-weight:700; font-size:13px; color:#6a5420}

    .ctaRow{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:16px}
    .btn{--h:52px; display:inline-flex; align-items:center; justify-content:center; gap:10px; height:var(--h); padding:0 22px; border-radius:calc(var(--h)/2); background:var(--gold-grad); color:var(--gold-ink); font-weight:900; letter-spacing:.3px; box-shadow:0 12px 28px rgba(176,138,46,.25); position:relative; overflow:hidden; transform:translateZ(0); transition:transform .15s ease, box-shadow .25s ease}
    .btn:hover{transform:translateY(-1px); box-shadow:0 14px 32px rgba(176,138,46,.32)}
    .btn:active{transform:translateY(0)}
    .btn .pulse{position:absolute; inset:0; background:conic-gradient(from 0deg, transparent 0 85%, #ffffff55 90% 100%); animation:spin 4s linear infinite; mix-blend:overlay; pointer-events:none}
    @keyframes spin{to{transform:rotate(1turn)}}
    .btn-outline{background:#fff7e0; color:#6a5420; border:1px solid #ecdcae; box-shadow:none}
    .btn-outline:hover{background:#fff2ca}

    /* Sections */
    section{padding:40px 0}
    .grid{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
    .card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
    .card h3{margin:0 0 12px; font-size:22px}

    /* Definition list style items to避免亂排版 */
    .items{display:grid; gap:10px}
    .item{display:grid; grid-template-columns:auto 1fr; gap:10px}
    .item i{color:var(--gold)}
    .item .line{display:grid; grid-template-columns:max-content 1fr; align-items:start; gap:8px}
    .item .label{font-weight:900; white-space:nowrap}
    .item .desc{min-width:0; word-break:break-word; line-break:loose}

    /* Stepper */
    .stepper{display:grid; gap:16px}
    .step{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:12px; border-radius:14px; background:#fffdf6; border:1px dashed #ecdcae}
    .step .num{width:34px; height:34px; display:grid; place-items:center; font-weight:800; border-radius:999px; background:#fff4cf; border:1px solid #ecdcae; color:#6a5420}

    /* FAQ Accordion */
    .accordion{display:grid; gap:12px}
    details.ac{background:var(--panel); border-radius:16px; border:1px solid var(--line); overflow:hidden; box-shadow:var(--shadow)}
    details.ac summary{cursor:pointer; list-style:none; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; font-weight:800}
    details.ac summary::-webkit-details-marker{display:none}
    details.ac .content{padding:0 18px 18px; color:#475069}
    .chev{transition:transform .25s ease}
    details[open] .chev{transform:rotate(180deg)}

    /* Sticky CTA */
    .stickyBar{position:sticky; bottom:0; z-index:50; backdrop-filter: blur(8px); background:linear-gradient(180deg,#ffffff00,#ffffffcc 20%,#ffffffee 100%); border-top:1px solid var(--line); padding:14px 0}
    .stickyRow{display:flex; gap:12px; align-items:center; justify-content:space-between}
    .muted{color:var(--muted)}

    /* Modal (question + form) */
    .overlay{position:fixed; inset:0; background:rgba(18,22,33,.35); display:none; align-items:flex-start; justify-content:center; padding:18px; z-index:100; overflow:auto}
    .overlay.show{display:flex}
    .modal{width:min(720px,100%); margin:24px 0; background:var(--panel); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); overflow:hidden; max-height:90vh; display:flex; flex-direction:column}
    .modalHead{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line)}
    .modalBody{padding:18px; display:grid; gap:14px; overflow:auto}
    .xbtn{background:transparent; border:0; font-size:20px; cursor:pointer}

    .qgroup{display:grid; gap:10px}
    .q{padding:12px; border:1px solid var(--line); border-radius:12px; background:#fffdfa}
    .q label{display:block; font-weight:800; margin-bottom:6px}
    .ops{display:flex; gap:14px; flex-wrap:wrap}
    .chip{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid #ecdcae; background:#fff7e0; cursor:pointer; user-select:none}
    .chip input{accent-color:#b08a2e}

    form{display:grid; gap:12px}
    .row{display:grid; grid-template-columns:1fr; gap:12px}
    .field{display:grid; gap:6px}
    .field label{font-weight:800}
    .input, select{height:46px; padding:0 14px; border-radius:12px; border:1px solid var(--line); background:#fff; outline:none}
    .input:focus, select:focus{box-shadow:0 0 0 4px #ecdcae66}

    .res-group{display:grid; gap:8px}
    .res-item{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff}
    .res-item input{accent-color:#b08a2e}

    /* Success / Error modal */
    .overlay-mini{position:fixed; inset:0; display:none; place-items:center; background:rgba(18,22,33,.35); z-index:110; padding:18px}
    .overlay-mini.show{display:grid}
    .mini{width:min(520px,100%); border-radius:18px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); padding:18px}
    .mini h4{margin:0 0 6px; font-size:20px}
    .mini p{margin:6px 0}
    .ok{color:var(--ok)}
    .err{color:var(--err)}
    .mini-actions{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
    .copy{background:#f2f4f7; border:1px solid #e5e7eb; padding:8px 10px; border-radius:10px; font-size:13px; white-space:pre-wrap; max-height:240px; overflow:auto}

    /* Responsive */
    @media (min-width:860px){
      .col-7{grid-column:span 7}
      .col-5{grid-column:span 5}
      .col-6{grid-column:span 6}
    }
    @media (max-width:859.9px){
      .grid{grid-template-columns:1fr}
    }