:root{
  --green:#164c34;
  --green-2:#0b6a3f;
  --line:#06c755;
  --cream:#fbf7ef;
  --paper:#fffdf8;
  --gold:#b98a43;
  --gold-soft:#dcc7a0;
  --ink:#23352b;
  --muted:#6c716b;
  --border:#e8dfcf;
  --shadow:0 10px 28px rgba(64,45,25,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#eee9e0;color:var(--ink);font-family:"Noto Serif TC","PingFang TC","Microsoft JhengHei",serif;line-height:1.55;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}img{display:block;width:100%}button,a{-webkit-tap-highlight-color:transparent}
.page{width:min(100%,900px);margin:0 auto;background:var(--cream);box-shadow:0 0 36px rgba(34,28,20,.10);overflow:hidden}

/* ===== Hero：依照確認預覽圖做左右人物 + 文案構圖 ===== */
.hero{position:relative;display:grid;grid-template-columns:46% 54%;min-height:610px;background:linear-gradient(90deg,#fffdf7 0%,#faf6ed 45%,#ebe3d6 100%);overflow:hidden}
.hero-copy{position:relative;z-index:3;padding:68px 10px 44px 56px;align-self:center}
.hero-kicker{margin:0 0 18px;font-size:clamp(15px,2.2vw,23px);letter-spacing:.09em;font-weight:700}
.hero h1{margin:0;color:var(--green);font-size:clamp(43px,7.7vw,76px);line-height:.98;letter-spacing:.055em;font-weight:800;white-space:nowrap}
.hero-sub{margin:22px 0 8px;font-size:clamp(16px,2.65vw,25px);font-weight:700;white-space:nowrap}
.hero-trust{margin:15px 0 22px;font-family:"PingFang TC","Microsoft JhengHei",sans-serif;font-size:clamp(10px,1.55vw,15px);white-space:nowrap;letter-spacing:.01em}
.line-button{display:inline-flex;align-items:center;justify-content:center;gap:11px;border-radius:12px;background:linear-gradient(135deg,#2a7444,#145a35);color:#fff;border:1px solid rgba(255,255,255,.35);padding:14px 23px;box-shadow:0 8px 20px rgba(15,91,50,.22);font-family:"PingFang TC","Microsoft JhengHei",sans-serif;font-size:clamp(16px,2.2vw,22px);font-weight:800;transition:.18s transform,.18s filter}
.line-button:hover{filter:brightness(1.06);transform:translateY(-1px)}
.line-badge{display:inline-flex;width:37px;height:37px;background:#fff;color:#06b84a;border-radius:50%;align-items:center;justify-content:center;font-size:11px;font-weight:900}
.hero-note{margin:14px 0 20px;font-size:clamp(12px,1.85vw,17px);font-weight:600}
.types{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;max-width:320px;font-family:"PingFang TC","Microsoft JhengHei",sans-serif}
.type-item{text-align:center;font-size:clamp(10px,1.4vw,14px);color:#344c40}
.type-icon{display:grid;place-items:center;margin:0 auto 5px;width:32px;height:32px;color:#1e6543}
.type-icon svg{width:29px;height:29px;stroke:currentColor;fill:none;stroke-width:1.7}
.hero-photo{position:relative;min-width:0}
.hero-photo:before{content:"";position:absolute;z-index:2;inset:0 auto 0 0;width:24%;background:linear-gradient(90deg,#faf6ed 0%,rgba(250,246,237,.74) 35%,rgba(250,246,237,0) 100%)}
.hero-photo img{height:100%;object-fit:cover;object-position:50% 61%}

/* ===== Common ===== */
.section{padding:30px 28px 36px;background:var(--paper);border-top:1px solid rgba(185,138,67,.11)}
.section-title{display:flex;align-items:center;justify-content:center;gap:13px;margin:0 0 24px;color:#244832;font-size:clamp(23px,3.8vw,34px);letter-spacing:.08em;line-height:1.15;text-align:center}
.section-title:before,.section-title:after{content:"";width:75px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* ===== Promise ===== */
.promise-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.promise-card{min-height:160px;padding:22px 10px 17px;border:1px solid var(--border);background:#fffefb;border-radius:16px;text-align:center;box-shadow:0 4px 15px rgba(74,54,30,.04)}
.promise-icon{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 12px;color:#276845}
.promise-icon svg{width:48px;height:48px;stroke:currentColor;fill:none;stroke-width:1.75}
.promise-card h3{margin:0 0 5px;font-size:clamp(15px,2.0vw,20px)}
.promise-card p{margin:0;font-family:"PingFang TC","Microsoft JhengHei",sans-serif;font-size:clamp(10px,1.45vw,14px);color:#414a44;line-height:1.55}

/* ===== Feedback ===== */
.feedback{background:#fffdf9}
.feedback-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.feedback-card{overflow:hidden;background:#fff;border:1px solid #e9e1d5;border-radius:11px;box-shadow:0 4px 12px rgba(60,43,25,.04)}
.feedback-img{aspect-ratio:1/1.25;overflow:hidden;background:#eee}
.feedback-img img{height:100%;object-fit:cover;object-position:center}
.feedback-card p{margin:0;padding:7px 5px 9px;text-align:center;font-family:"PingFang TC","Microsoft JhengHei",sans-serif;font-size:clamp(8px,1.26vw,12px);line-height:1.45}
.stars{display:block;color:#197047;letter-spacing:.06em;font-size:clamp(8px,1.25vw,12px);margin-bottom:2px}
.quote-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.quote{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:9px;padding:10px 11px;border-radius:12px;background:linear-gradient(180deg,#f8f3eb,#f3eee7);font-family:"PingFang TC","Microsoft JhengHei",sans-serif;font-size:clamp(10px,1.42vw,13px);color:#454c46}
.avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#ede3d6;color:#385f48;font-weight:800}

/* ===== Process ===== */
.process{background:#fffdf9;padding-top:29px}
.process-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-items:start}
.process-step{text-align:center;position:relative}
.process-step:not(:last-child):after{content:"›";position:absolute;right:-8px;top:45%;transform:translateY(-50%);color:#b79250;font-size:27px;font-weight:700;z-index:2}
.step-number{display:grid;place-items:center;width:22px;height:22px;margin:0 auto 8px;border-radius:50%;background:#2e6948;color:#fff;font:700 12px/1 "PingFang TC",sans-serif}
.process-photo{overflow:hidden;aspect-ratio:1;border-radius:10px;background:#eee;border:1px solid #e5dccd}
.process-photo img{height:100%;object-fit:cover}
.process-step b{display:block;margin-top:7px;font-size:clamp(11px,1.55vw,15px)}

/* ===== Popular ===== */
.popular{background:#fbf8f1;padding-top:29px}
.popular-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.popular-card{text-align:center}
.popular-card .pic{aspect-ratio:1;overflow:hidden;border-radius:10px;border:1px solid #e2d9ca;background:#eee}
.popular-card img{height:100%;object-fit:cover}
.popular-card b{display:block;margin-top:7px;font-size:clamp(10px,1.5vw,14px)}

/* ===== CTA ===== */
.final-cta{position:relative;display:grid;grid-template-columns:1.22fr .56fr .72fr;gap:15px;align-items:center;background:linear-gradient(135deg,#185d3b,#0c4a32);color:#fff;margin:0 13px 18px;border:2px solid #c79a50;border-radius:19px;padding:24px 20px 17px;overflow:hidden;box-shadow:var(--shadow)}
.final-cta:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 50%,rgba(255,255,255,.06),transparent 30%),radial-gradient(circle at 85% 20%,rgba(255,255,255,.05),transparent 30%);pointer-events:none}
.cta-copy,.qr-box,.cta-person{position:relative;z-index:1}
.cta-copy h2{margin:0 0 9px;color:#f1c46d;font-size:clamp(22px,3.5vw,33px);line-height:1.2}
.cta-copy p{margin:0 0 14px;font-family:"PingFang TC","Microsoft JhengHei",sans-serif;font-size:clamp(11px,1.65vw,15px)}
.final-cta .line-button{background:#08b947;border-color:rgba(255,255,255,.55);box-shadow:none;padding:12px 20px}
.cta-small{margin-top:8px;font:500 clamp(10px,1.35vw,12px)/1.4 "PingFang TC",sans-serif;color:#eef9f2}
.qr-box{background:#fff;border-radius:10px;padding:9px;color:#143b2b;text-align:center}
.qr-box img{aspect-ratio:1;object-fit:contain}
.qr-box span{display:block;margin-top:5px;font:700 clamp(9px,1.35vw,12px)/1.2 "PingFang TC",sans-serif}
.cta-person{align-self:end;height:205px;overflow:hidden;border-radius:13px 13px 0 0}
.cta-person img{height:100%;object-fit:cover;object-position:center 45%}

.disclaimer{padding:3px 22px 92px;color:#766d63;text-align:center;font:400 11px/1.7 "PingFang TC","Microsoft JhengHei",sans-serif}
.mobile-line{display:none;position:fixed;z-index:40;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(92%,520px);padding:13px 18px;border-radius:999px;background:#06c755;color:#fff;text-align:center;font:800 17px/1 "PingFang TC","Microsoft JhengHei",sans-serif;box-shadow:0 10px 28px rgba(0,0,0,.23);border:1px solid rgba(255,255,255,.75)}

/* ===== Tablet & Mobile：保持海報式比例，不把模組拆成完全不同版面 ===== */
@media(max-width:680px){
  .page{width:100%;box-shadow:none}
  .hero{min-height:435px;grid-template-columns:48% 52%}
  .hero-copy{padding:37px 0 26px 20px}
  .hero-kicker{font-size:13px;margin-bottom:12px}
  .hero h1{font-size:39px;letter-spacing:.025em}
  .hero-sub{font-size:15px;margin:15px 0 5px;white-space:normal}
  .hero-trust{font-size:8.9px;margin:9px 0 14px;white-space:normal;line-height:1.5}
  .line-button{font-size:15px;padding:10px 11px;gap:7px;border-radius:9px}
  .line-badge{width:27px;height:27px;font-size:8px}
  .hero-note{font-size:11px;margin:10px 0 13px}
  .types{gap:1px;max-width:205px}
  .type-item{font-size:8.5px}.type-icon{width:24px;height:24px}.type-icon svg{width:22px;height:22px}
  .hero-photo img{object-position:51% 58%}
  .section{padding:22px 12px 26px}
  .section-title{font-size:21px;gap:7px;margin-bottom:17px}.section-title:before,.section-title:after{width:34px}
  .promise-grid{gap:7px}.promise-card{min-height:119px;padding:14px 5px 10px;border-radius:10px}.promise-icon{width:38px;height:38px;margin-bottom:7px}.promise-icon svg{width:34px;height:34px}.promise-card h3{font-size:13px}.promise-card p{font-size:9.5px}
  .feedback-grid{gap:4px}.feedback-card{border-radius:7px}.feedback-card p{font-size:7.7px;padding:5px 2px 6px}.stars{font-size:7px}.feedback-img{aspect-ratio:1/1.18}
  .quote-row{gap:5px;margin-top:8px}.quote{grid-template-columns:21px 1fr;gap:5px;padding:6px;border-radius:8px;font-size:7.9px}.avatar{width:21px;height:21px;font-size:8px}
  .process-grid{gap:4px}.process-step:not(:last-child):after{right:-6px;font-size:15px}.step-number{width:16px;height:16px;font-size:8px;margin-bottom:5px}.process-photo{border-radius:6px}.process-step b{font-size:9.5px;margin-top:5px}
  .popular-grid{gap:5px}.popular-card .pic{border-radius:6px}.popular-card b{font-size:8.6px;margin-top:4px}
  .final-cta{grid-template-columns:1.17fr .65fr .7fr;gap:7px;margin:0 7px 10px;padding:14px 10px 10px;border-radius:13px}
  .cta-copy h2{font-size:18px;margin-bottom:4px}.cta-copy p{font-size:8.7px;margin-bottom:8px}.final-cta .line-button{padding:8px 8px;font-size:11px}.final-cta .line-badge{width:23px;height:23px}.cta-small{font-size:7.3px;margin-top:5px}.qr-box{padding:5px;border-radius:6px}.qr-box span{font-size:7px}.cta-person{height:118px;border-radius:7px 7px 0 0}
  .disclaimer{font-size:9px;padding:3px 12px 76px}.mobile-line{display:block}
}
@media(max-width:380px){
  .hero{min-height:410px}.hero-copy{padding-left:15px}.hero h1{font-size:35px}.hero-sub{font-size:13.5px}.types{max-width:190px}.promise-card p{font-size:8.8px}
}
