:root{
  --green:#3E8A72; --green-soft:#5BA890; --green-tint:#E7F1EC;
  --blue:#6E94AC;
  --bg:#FBF8F2; --bg-2:#F4EEE3; --surface:#FFFFFF;
  --ink:#23332E; --ink-2:#52615B; --ink-3:#7C8A84;
  --border:#E7DECF; --border-soft:#EFE8DB;
  --shadow:0 1px 2px rgba(35,51,46,.04), 0 8px 30px rgba(35,51,46,.06);
  --shadow-lg:0 2px 6px rgba(35,51,46,.05), 0 24px 60px rgba(35,51,46,.10);
  --radius:18px; --radius-sm:12px;
  --maxw:1080px;
  --serif:'Fraunces', Georgia, serif;
  --sans:'Sarabun', system-ui, sans-serif;
}
[data-theme="dark"]{
  --green:#6FBBA2; --green-soft:#5BA890; --green-tint:#1E332C;
  --blue:#8FB2C8;
  --bg:#121C18; --bg-2:#0E1714; --surface:#1A2722;
  --ink:#ECF3EF; --ink-2:#A9BAB2; --ink-3:#7E8F88;
  --border:#2A3A33; --border-soft:#233029;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 34px rgba(0,0,0,.35);
  --shadow-lg:0 2px 6px rgba(0,0,0,.35), 0 28px 64px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
.skip-link{position:absolute;top:-100%;left:0;background:var(--green);color:#fff;padding:10px 20px;font-weight:600;font-size:.95rem;z-index:200;border-radius:0 0 var(--radius-sm) 0;text-decoration:none}
.skip-link:focus{top:0}
:focus-visible{outline:2.5px solid var(--green);outline-offset:3px;border-radius:4px}
body{
  font-family:var(--sans); background:var(--bg); color:var(--ink);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  transition:background .35s ease, color .35s ease; overflow-x:hidden;
}
[data-lang="th"] .en{display:none}
[data-lang="en"] .th{display:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(12px);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom:1px solid var(--border-soft);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; user-select:none}
.logo{width:38px;height:38px;flex:none}
.brand b{font-family:var(--serif); font-weight:600; font-size:1.32rem; letter-spacing:-.01em}
.brand .th b{font-family:var(--sans); font-weight:700}
.controls{display:flex; align-items:center; gap:8px}
.seg{display:flex; background:var(--bg-2); border:1px solid var(--border); border-radius:999px; padding:3px}
.seg button{border:0; background:transparent; cursor:pointer; font-family:var(--sans); font-size:.82rem; font-weight:600; color:var(--ink-3); padding:6px 12px; border-radius:999px; transition:.2s; line-height:1}
.seg button.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}
.icon-btn{width:38px;height:38px; border-radius:999px; border:1px solid var(--border); background:var(--bg-2); cursor:pointer; display:grid; place-items:center; color:var(--ink-2); transition:.2s}
.icon-btn:hover{color:var(--green); border-color:var(--green-soft)}

.hero{position:relative; padding:72px 0 40px; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 50% at 78% 8%, color-mix(in srgb,var(--green-soft) 22%, transparent), transparent 70%),radial-gradient(46% 40% at 12% 86%, color-mix(in srgb,var(--blue) 16%, transparent), transparent 70%)}
.badge{display:inline-flex; align-items:center; gap:8px; background:var(--green-tint); color:var(--green); border:1px solid color-mix(in srgb,var(--green-soft) 35%, transparent); padding:7px 14px; border-radius:999px; font-size:.84rem; font-weight:600; margin-bottom:24px}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green-soft);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green-soft) 60%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
h1{font-family:var(--serif); font-weight:600; font-size:clamp(2.4rem,6vw,4rem); line-height:1.05; letter-spacing:-.02em; max-width:14ch; margin-bottom:22px}
[data-lang="th"] h1{font-family:var(--sans); font-weight:700; line-height:1.18; letter-spacing:0}
h1 .accent{color:var(--green); font-style:italic}
[data-lang="th"] h1 .accent{font-style:normal}
.lede{font-size:clamp(1.05rem,2.2vw,1.28rem); color:var(--ink-2); max-width:46ch; margin-bottom:34px}
.signup{display:flex; gap:10px; max-width:460px; flex-wrap:wrap}
.signup input{flex:1 1 220px; min-width:0; padding:14px 18px; border-radius:var(--radius-sm); border:1.5px solid var(--border); background:var(--surface); color:var(--ink); font-family:var(--sans); font-size:1rem; transition:.2s}
.signup input:focus-visible{outline:0; border-color:var(--green-soft); box-shadow:0 0 0 4px var(--green-tint)}
.btn{border:0; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:1rem; padding:14px 24px; border-radius:var(--radius-sm); background:var(--green); color:#fff; transition:.2s; white-space:nowrap}
.btn:hover{background:var(--green-soft); transform:translateY(-1px)}
.signup-note{font-size:.82rem; color:var(--ink-3); margin-top:12px}
.msg-ok{margin-top:14px; color:var(--green); font-weight:600; display:none}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.phone-stage{display:flex; justify-content:center}
.phone{width:262px; background:var(--surface); border:1px solid var(--border); border-radius:34px; padding:14px; box-shadow:var(--shadow-lg); transform:rotate(2deg)}
.phone-screen{background:var(--bg-2); border-radius:24px; padding:18px 16px; min-height:430px}
.ph-head{display:flex; align-items:center; gap:9px; margin-bottom:18px}
.ph-ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--green-soft),var(--blue))}
.ph-day{font-size:.72rem;color:var(--ink-3)}
.ph-name{font-weight:700;font-size:.95rem}
.pill-card{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:11px 12px; margin-bottom:10px}
.pill-dot{width:26px;height:26px;border-radius:8px;flex:none}
.pill-meta{flex:1;min-width:0}
.pill-meta .nm{font-weight:600;font-size:.86rem;line-height:1.2}
.pill-meta .tm{font-size:.72rem;color:var(--ink-3)}
.pill-chk{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:.7rem;color:#fff;background:var(--green-soft)}
.pill-chk.todo{background:var(--bg-2);border:1.5px solid var(--border)}

section.block{padding:64px 0; border-top:1px solid var(--border-soft)}
.eyebrow{color:var(--green); font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px}
h2{font-family:var(--serif); font-weight:600; font-size:clamp(1.6rem,3.5vw,2.3rem); letter-spacing:-.01em; line-height:1.15; margin-bottom:14px}
[data-lang="th"] h2{font-family:var(--sans); font-weight:700; line-height:1.3}
.section-lede{color:var(--ink-2); max-width:52ch; font-size:1.05rem}
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px}
.feat{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.feat .fi{width:44px;height:44px;border-radius:12px;background:var(--green-tint);display:grid;place-items:center;color:var(--green);margin-bottom:16px}
.feat h3{font-size:1.08rem; margin-bottom:8px; font-weight:600}
[data-lang="th"] .feat h3{font-weight:700}
.feat p{color:var(--ink-2); font-size:.95rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px;counter-reset:s}
.step{position:relative;padding:24px;border:1px dashed var(--border);border-radius:var(--radius)}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;left:22px;width:32px;height:32px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--serif)}
.step h3{font-size:1rem;margin:6px 0 6px;font-weight:600}
[data-lang="th"] .step h3{font-weight:700}
.step p{color:var(--ink-2);font-size:.92rem}
.trust{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--bg-2);border:1px solid var(--border);border-radius:999px;padding:8px 15px;font-size:.86rem;color:var(--ink-2);font-weight:500}
.chip svg{color:var(--green)}

.legal{padding:54px 0 40px; max-width:760px; margin:0 auto}
.legal .back{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-weight:600;font-size:.9rem;text-decoration:none;margin-bottom:26px}
.legal h1.lg{font-family:var(--serif);font-size:clamp(2rem,4vw,2.7rem);margin-bottom:8px;max-width:none}
[data-lang="th"] .legal h1.lg{font-family:var(--sans);font-weight:700}
.legal .updated{color:var(--ink-3);font-size:.88rem;margin-bottom:8px}
.draft-note{background:var(--green-tint);border:1px solid color-mix(in srgb,var(--green-soft) 30%,transparent);border-radius:var(--radius-sm);padding:14px 16px;font-size:.9rem;color:var(--ink-2);margin:22px 0 34px}
.legal h2.lg{font-family:var(--sans);font-weight:700;font-size:1.22rem;margin:34px 0 10px;color:var(--ink)}
.legal h3.lg{font-weight:600;font-size:1rem;margin:20px 0 6px}
.legal p{color:var(--ink-2);margin-bottom:12px}
.legal ul{color:var(--ink-2);margin:0 0 14px 20px}
.legal li{margin-bottom:7px}
.legal a{color:var(--green)}
.disclaimer-box{border-left:3px solid var(--green-soft);background:var(--bg-2);padding:14px 18px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:18px 0;color:var(--ink)}

footer{border-top:1px solid var(--border-soft); padding:42px 0; margin-top:30px}
.foot{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap}
.foot .brand b{font-size:1.15rem}
.foot small{color:var(--ink-3); display:block; margin-top:10px; max-width:34ch; font-size:.86rem}
.foot nav{display:flex; flex-direction:column; gap:10px}
.foot nav a{color:var(--ink-2); text-decoration:none; font-size:.92rem}
.foot nav a:hover{color:var(--green)}
.copy{color:var(--ink-3); font-size:.82rem; margin-top:28px; border-top:1px solid var(--border-soft); padding-top:20px}

.consent-bar{position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--surface);border-top:1px solid var(--border);box-shadow:var(--shadow-lg);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.consent-msg{color:var(--ink-2);font-size:.93rem;max-width:62ch}
.consent-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0}
.consent-policy{color:var(--green);font-size:.88rem;font-weight:500;white-space:nowrap;text-decoration:none}
.consent-policy:hover{text-decoration:underline}
.consent-decline{border:1px solid var(--border);background:var(--bg-2);color:var(--ink-2);cursor:pointer;font-family:var(--sans);font-size:.9rem;padding:8px 16px;border-radius:var(--radius-sm);transition:.2s}
.consent-decline:hover{border-color:var(--green-soft);color:var(--ink)}
.consent-accept{font-size:.9rem;padding:8px 18px}

@media(max-width:820px){
  .hero-grid{grid-template-columns:1fr; gap:30px}
  .phone-stage{order:-1}
  .features,.steps{grid-template-columns:1fr}
  .nav{height:60px}
  .brand b{font-size:1.15rem}
}