:root{
  --green:#2f7d4a;
  --green-dark:#215d36;
  --green-soft:#eef7f1;
  --ink:#17211a;
  --muted:#5f6d63;
  --line:#dce7df;
  --cream:#fbfaf6;
  --white:#fff;
  --shadow:0 14px 40px rgba(25,55,35,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,"PingFang TC","Microsoft JhengHei",sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
}
main{max-width:1100px;margin:auto;background:var(--white)}
.hero{
  min-height:650px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:stretch;
  overflow:hidden;
}
.hero__content{
  padding:72px 56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.eyebrow{
  display:inline-flex;
  width:max-content;
  background:var(--green-soft);
  color:var(--green-dark);
  padding:6px 12px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  margin-bottom:20px;
}
h1{
  font-size:50px;
  line-height:1.15;
  margin:0 0 20px;
  letter-spacing:-1px;
}
h1 span{color:var(--green)}
.lead{font-size:20px;color:var(--muted);margin:0 0 26px}
.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:54px;
  padding:0 26px;
  border:0;
  border-radius:12px;
  background:var(--green);
  color:#fff;
  font-size:18px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:.2s;
}
.btn:hover{background:var(--green-dark);transform:translateY(-1px)}
.micro{font-size:14px;color:var(--muted);margin:10px 0 0;text-align:center}
.hero__image{
  min-height:650px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(30,85,50,.18)),
    url("hero.jpg") center/cover no-repeat;
}
.image-placeholder{
  height:100%;
  min-height:650px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:24px;
  background:linear-gradient(135deg,#dfece3,#f8eadc);
  color:#385343;
}
.image-placeholder strong{font-size:26px}
.image-placeholder span{max-width:300px;margin-top:8px}
.hero__image:has(+ *) .image-placeholder{display:flex}

/* 若 hero.jpg 成功載入，可在 app.js 中加上 has-image 類別隱藏佔位 */
.hero__image.has-image .image-placeholder{display:none}

.benefits{padding:64px 48px;background:var(--green-soft)}
.benefits h2,.form-section h2,.trust h2{
  text-align:center;font-size:32px;margin:0 0 30px
}
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.benefit-grid article{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:24px;box-shadow:0 6px 20px rgba(20,50,30,.05)
}
.icon{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--green);color:#fff;font-weight:700;margin-bottom:12px
}
.benefit-grid h3{margin:0 0 8px;font-size:20px}
.benefit-grid p{margin:0;color:var(--muted)}

.form-section{padding:64px 24px}
.form-card{
  max-width:560px;margin:auto;background:#fff;border:1px solid var(--line);
  border-radius:20px;padding:34px;box-shadow:var(--shadow)
}
.form-card>p{text-align:center;color:var(--muted);margin-top:-18px}
label{display:block;font-weight:700;margin:18px 0 7px}
input[type=text],input[type=tel]{
  width:100%;height:52px;border:1px solid #cbd8cf;border-radius:10px;
  padding:0 14px;font-size:17px;outline:none;background:#fff
}
input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(47,125,74,.12)}
.consent{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;color:var(--muted)}
.consent input{margin-top:5px}
.btn--submit{width:100%;margin-top:10px}
.form-message{min-height:24px;margin:12px 0 0;text-align:center!important;font-weight:700}
.form-message.error{color:#a12b2b}
.form-message.success{color:var(--green)}
.privacy-note{text-align:center!important;font-size:13px;margin:14px 0 0!important}

.trust{padding:48px 28px;text-align:center;border-top:1px solid var(--line)}
.trust p{max-width:720px;margin:0 auto 12px;color:var(--muted)}
.disclaimer{font-size:13px}
.footer-links{display:flex;justify-content:center;gap:24px;margin-top:20px}
.footer-links a{color:var(--green-dark)}

@media (max-width:760px){
  main{width:100%}
  .hero{display:flex;flex-direction:column;min-height:auto}
  .hero__content{padding:34px 22px 26px;order:1;text-align:left}
  .hero__image{order:2;min-height:260px;height:260px}
  .image-placeholder{min-height:260px;height:260px}
  .eyebrow{font-size:13px;margin-bottom:14px}
  h1{font-size:34px;line-height:1.18;margin-bottom:14px}
  .lead{font-size:17px;margin-bottom:20px}
  .btn{width:100%;font-size:18px}
  .benefits{padding:42px 18px}
  .benefits h2,.form-section h2,.trust h2{font-size:26px}
  .benefit-grid{grid-template-columns:1fr;gap:12px}
  .benefit-grid article{padding:18px}
  .form-section{padding:42px 16px}
  .form-card{padding:24px 18px;border-radius:16px}
  .trust{padding:38px 20px}
}


.website-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.cf-turnstile {
  margin: 18px 0 14px;
  display: flex;
  justify-content: center;
  min-height: 65px;
}

.btn[disabled] {
  opacity: .72;
  cursor: not-allowed;
  transform: none;
}