: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}
img{max-width:100%; height:auto; display:block}

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

/* Header */
header{padding:28px 0 10px}
.logoRow{display:flex; align-items:center; gap:14px; min-width:0}
.logo{
  width:46px; height:46px; border-radius:12px;
  background:var(--gold-grad); box-shadow:var(--shadow);
  position:relative; object-fit:cover; flex:0 0 46px
}
.logo::after{content:""; position:absolute; inset:2px; border-radius:10px; background:linear-gradient(180deg,#ffffffa8,#ffffff22)}
h1{
  margin:0; font-size:clamp(22px,4.2vw,42px); font-weight:900; letter-spacing:.3px;
  line-height:1.2; word-break:break-word; overflow-wrap:anywhere;
}
.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;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* CTA buttons */
.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;
  line-height:1;
}
.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); min-width:0;
}
.card h3{
  margin:0 0 12px; font-size:22px; line-height:1.25;
  word-break:break-word; overflow-wrap:anywhere;
}

/* Definition-style list */
.items{display:grid; gap:12px}
.item{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; min-width:0;
}
.item i{color:var(--gold); font-size:18px; line-height:1; margin-top:2px}
.item .line{
  display:grid; grid-template-columns:max-content 1fr; align-items:start; gap:8px; min-width:0;
}
.item .label{font-weight:900; white-space:nowrap}
.item .desc{
  min-width:0; word-break:break-word; overflow-wrap:anywhere; 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; flex:0 0 34px
}

/* 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}

/* Desktop spans */
@media (min-width:860px){
  .col-7{grid-column:span 7}
  .col-5{grid-column:span 5}
  .col-6{grid-column:span 6}
}

/* ===== Mobile-first 修复：≤ 860px ===== */
@media (max-width:859.9px){
  .grid{grid-template-columns:1fr}

  header{padding:20px 0 6px}
  .logo{width:40px; height:40px; border-radius:10px; flex:0 0 40px}
  h1{font-size:clamp(20px,5.6vw,28px); letter-spacing:.2px}
  .subtitle{font-size:clamp(12px,3.6vw,14px)}

  .hero{padding:16px; border-radius:18px}
  .badge{font-size:12px; padding:6px 10px}
  .badges{gap:8px}

  .btn{--h:46px; padding:0 18px; font-size:14px}
  .btn-outline{font-weight:800}

  .card{padding:16px; border-radius:16px}
  .card h3{font-size:18px; margin-bottom:10px}

  /* 关键：item 在窄屏改为「图标 + 单列文字」，label 独占一行 */
  .item{
    grid-template-columns:22px 1fr; gap:10px;
  }
  .item i{font-size:16px; margin-top:3px}
  .item .line{
    grid-template-columns:1fr;   /* 不再两列挤压 */
    gap:4px;
  }
  .item .label{
    white-space:normal;          /* 允许换行 */
    line-height:1.35;
  }
  .item .desc{
    font-size:14px; color:#475069;
  }

  /* Stepper 紧凑 */
  .step{padding:10px; gap:10px}
  .step .num{width:30px; height:30px; font-size:14px}

  /* FAQ 更紧凑 */
  details.ac summary{padding:14px 16px; font-size:15px}
  details.ac .content{padding:0 16px 14px; font-size:14px}

  .stickyBar{padding:10px 0}
  .stickyRow{gap:10px}
}

/* 进一步极窄屏（≤ 360）微调，避免标题溢出 */
@media (max-width:360px){
  h1{font-size:18px}
  .btn{--h:44px; padding:0 16px; font-size:13px}
  .badge{font-size:11px; padding:5px 9px}
}

/* 可选：降低动画对低性能设备影响 */
@media (prefers-reduced-motion:reduce){
  .btn .pulse{animation:none}
  .chev{transition:none}
}