
:root{
  --green:#2f6040; --deep:#18452c; --orange:#f57420; --cream:#f8f4ea;
  --soft:#eef4e7; --text:#203128; --muted:#69756d; --white:#fff;
  --shadow:0 18px 60px rgba(32,49,40,.12); --radius:28px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:"Noto Sans Thai",system-ui,sans-serif;color:var(--text);background:#fff;line-height:1.65}
a{text-decoration:none;color:inherit} img{max-width:100%;display:block}
.wrap{width:min(1160px,calc(100% - 40px));margin:auto}.narrow{width:min(820px,calc(100% - 40px))}
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(24,69,44,.08)}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font-size:32px;font-weight:800;color:var(--green);letter-spacing:-1px}.nav nav{display:flex;gap:28px;color:#4e5d54;font-size:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--orange);color:#fff;font-weight:700;padding:14px 22px;border-radius:999px;box-shadow:0 10px 30px rgba(245,116,32,.26);transition:.2s}.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:#fff;color:var(--deep);border:1px solid rgba(24,69,44,.18);box-shadow:none}.btn-small{padding:10px 18px;font-size:14px}
.section{padding:88px 0}.hero{padding-top:62px;background:radial-gradient(circle at 80% 10%,#edf4e4 0,transparent 45%),linear-gradient(180deg,#fff,#fbf8f1)}
.hero-grid,.split,.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}.hero-copy h1,.copy h2,.center h2,.offer h2{font-size:clamp(38px,5vw,72px);line-height:1.08;margin:12px 0 20px;letter-spacing:-1.5px}.hero-copy h1 span,.offer h2 span{color:var(--green)}
.lead{font-size:20px;color:#536258;max-width:620px}.eyebrow{font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--orange)}
.price-row{display:flex;align-items:center;gap:14px;margin:28px 0}.price-row strong{font-size:54px;line-height:1;color:var(--orange)}.old{text-decoration:line-through;color:#8e978f;margin-right:10px}.badge{background:#eaf3e4;color:var(--deep);padding:7px 12px;border-radius:999px;font-weight:700;font-size:13px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}.micro{margin-top:18px;color:#67746b;font-size:14px}.hero-media img{border-radius:34px;box-shadow:var(--shadow)}
.trust-strip{background:var(--deep);color:#fff}.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);padding:24px 0}.trust-grid div{padding:8px 26px;border-right:1px solid rgba(255,255,255,.14)}.trust-grid div:last-child{border:0}.trust-grid b,.trust-grid span{display:block}.trust-grid span{opacity:.74;font-size:14px}
.soft{background:var(--cream)}.split.reverse{grid-template-columns:1fr 1fr}.copy h2,.center h2,.offer h2{font-size:clamp(34px,4vw,56px)}.copy p,.sub{font-size:18px;color:var(--muted)}
.rounded{border-radius:var(--radius)}.shadow{box-shadow:var(--shadow)}.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.chips span{background:#fff;border:1px solid #dfe7da;border-radius:999px;padding:8px 13px;font-size:14px}
.center{text-align:center;max-width:760px;margin:0 auto 40px}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.feature-grid article{background:#fff;border:1px solid #e6eadf;border-radius:22px;padding:26px;box-shadow:0 10px 30px rgba(32,49,40,.05)}.feature-grid h3{margin:8px 0}.feature-grid p{margin:0;color:var(--muted);font-size:14px}.icon{font-size:30px;color:var(--orange)}.wide-art{margin-top:34px;width:100%;max-height:760px;object-fit:cover}
.review-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.review-grid img{border-radius:22px;box-shadow:0 10px 35px rgba(32,49,40,.08)}
.steps{list-style:none;padding:0;margin:28px 0 0}.steps li{display:grid;grid-template-columns:36px 1fr;column-gap:12px;padding:18px 0;border-bottom:1px solid #e4e9df;counter-increment:step}.steps{counter-reset:step}.steps li:before{content:counter(step);display:grid;place-items:center;width:30px;height:30px;background:var(--orange);color:#fff;border-radius:50%;font-weight:800}.steps b,.steps span{grid-column:2}.steps span{color:var(--muted);font-size:14px}
.offer{background:linear-gradient(135deg,#edf4e5,#fbf5e7)}.offer-grid{grid-template-columns:.85fr 1.15fr}.offer img{max-height:640px;object-fit:cover}
.faq details{border-bottom:1px solid #e4e8df;padding:18px 0}.faq summary{font-weight:700;cursor:pointer;font-size:18px}.faq p{color:var(--muted)}
footer{background:#163d27;color:#fff;padding:44px 0 100px}.foot{display:flex;justify-content:space-between;gap:30px}.foot b,.foot span,.foot a{display:block}.foot span,.foot a{opacity:.75}.foot div:last-child{text-align:right}
.mobile-cta{display:none}
@media(max-width:900px){
  .nav nav{display:none}.section{padding:64px 0}.hero-grid,.split,.offer-grid,.split.reverse{grid-template-columns:1fr;gap:34px}.hero-copy{order:1}.hero-media{order:2}
  .feature-grid{grid-template-columns:1fr 1fr}.review-grid{grid-template-columns:1fr 1fr}.trust-grid{grid-template-columns:1fr}.trust-grid div{border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
  .offer-grid{grid-template-columns:1fr}.foot{flex-direction:column}.foot div:last-child{text-align:left}
}
@media(max-width:640px){
  .wrap,.narrow{width:min(100% - 28px,1160px)}.topbar .nav{height:64px}.brand{font-size:27px}.btn-small{padding:9px 15px}
  .section{padding:50px 0}.hero{padding-top:34px}.hero-copy h1{font-size:44px}.lead{font-size:17px}.price-row strong{font-size:46px}.cta-row .btn{width:100%}
  .feature-grid{grid-template-columns:1fr}.review-grid{grid-template-columns:1fr 1fr;gap:10px}.copy h2,.center h2,.offer h2{font-size:36px}.copy p,.sub{font-size:16px}
  .mobile-cta{position:fixed;left:10px;right:10px;bottom:10px;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);box-shadow:0 14px 50px rgba(0,0,0,.18);border:1px solid #e4e7df;border-radius:18px;padding:10px 10px 10px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px}
  .mobile-cta span{display:block;font-size:11px;color:var(--muted)}.mobile-cta b{font-size:24px;color:var(--orange)}.mobile-cta a{background:var(--orange);color:#fff;font-weight:800;border-radius:14px;padding:12px 22px}
}
