:root{
  --brand:#60C627;      /* green */
  --brand-2:#5B3A2C;    /* brown */
  --brand-3:#A9E46C;    /* light green */
  --dark:#0b1220;
  --muted:#64748b;
  --bg:#f7fff5;
  --ok:#16a34a;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans';color:#0f172a;background:#fff}
a{color:var(--brand);text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1100px,92%);margin-inline:auto}

/* Buttons */
.btn{display:inline-flex;gap:8px;align-items:center;justify-content:center;min-height:48px;padding:14px 20px;border-radius:var(--radius);font-weight:700;border:1px solid var(--brand);background:var(--brand);color:#fff;transition:all .2s}
.btn:hover{opacity:.95;transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--brand-3);outline-offset:2px}
.btn-outline{background:#fff;color:var(--brand-2);border-color:var(--brand-2)}
.btn-brown{background:var(--brand-2);border-color:var(--brand-2)}
.btn-light{background:#fde68a;border-color:#fde68a;color:#1f2937}

/* Pills & grid */
.pill{display:inline-flex;gap:8px;align-items:center;padding:6px 12px;border-radius:999px;background:#eefbe5;color:#355e12;font-weight:700;font-size:13px;border:1px solid #d9f7c2}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

section{padding:64px 0}
.hero{background:linear-gradient(180deg,#ffffff,var(--bg));padding:80px 0 40px}
.hero h1{font-size:clamp(26px,5vw,46px);line-height:1.12;margin:8px 0}
.muted{color:var(--muted)}

.card{background:#fff;border:1px solid #e7efe0;border-radius:var(--radius);padding:20px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.check{display:inline-block;border-radius:50%;width:22px;height:22px;background:var(--brand);color:#fff;text-align:center;line-height:22px;font-weight:700;font-size:14px}

/* Nav */
.nav{position:sticky;top:0;background:#ffffffcc;backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid #eef2f7;z-index:20}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.nav a.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--dark)}
.logo-img{height:34px;width:auto}
.nav .menu{display:flex;gap:16px}

/* Badges, lists */
.badge{padding:6px 10px;border-radius:999px;font-size:12px;background:#fff8e1;color:#7a5800;border:1px solid #ffe3a3}
.list{display:grid;gap:8px}
.list li{display:flex;gap:10px}
.list li span{color:var(--ok)}

/* Steps — FIXED */
.steps{counter-reset: step;}
.step{display:flex;gap:12px;align-items:center;}           /* center, bukan flex-start */
.step:before{
  counter-increment: step;
  content: counter(step);
  width:34px;height:34px;flex:0 0 34px;
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#eefbe5;border:1px solid #d9f7c2;color:#2f5a11;
  font-weight:700;margin-top:0;                             /* buang offset */
}

.price{font-weight:800;font-size:28px}
.kpi{display:flex;gap:14px;flex-wrap:wrap}
.kpi div{background:#f1f8ea;border:1px solid #e1f0d4;border-radius:10px;padding:10px 12px}

/* Pricing polish */
.kicker{font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.price-big{font-size:48px;line-height:1;font-weight:800}
.plan--primary{background:#1f3f1b;color:#eaf6e9;border-color:#163414}
.plan--dark{background:#0f172a;color:#e2e8f0;border-color:#0b1320}
.plan--primary .muted,.plan--dark .muted{color:inherit;opacity:.85}

/* Sticky CTA: redesigned & mobile-friendly */
.cta-bar{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index:30;
  width:min(780px, calc(100% - 24px));
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:8px;
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
}
.cta-bar .btn{min-height:46px;padding:12px 14px}
@supports (padding: max(0px)) {
  .cta-bar{padding-bottom: max(8px, env(safe-area-inset-bottom))}
}

/* Footer */
footer{background:linear-gradient(0deg,#0f172a,#172036);color:#e2e8f0;padding:48px 0;margin-top:40px}
footer a{color:#e2e8f0}
.small{font-size:13px}

/* Forms */
input, textarea, select{width:100%;padding:12px;border:1px solid #e5e7eb;border-radius:10px;font-size:16px}
input:focus-visible, textarea:focus-visible, select:focus-visible{outline:2px solid var(--brand-3);border-color:var(--brand-3)}

/* Mobile polish */
@media (max-width:640px){
  section{padding:48px 0}
  .nav .menu{display:none}
  .logo-img{height:28px}
  .kpi div{width:100%}
  .btn, .btn-outline, .btn-brown{width:100%;font-size:16px}
  .cta-bar{width:calc(100% - 16px);bottom:calc(env(safe-area-inset-bottom, 0px) + 8px);border-radius:14px}
  .hero{padding:64px 0 28px}
}

/* Consent checkbox: kotak di kiri, teks di kanan */
label.consent{
  display:inline-flex;
  align-items:center;
  gap:10px;
  line-height:1.35;
}
label.consent input[type="checkbox"]{
  width:18px;
  height:18px;
  flex:0 0 auto;
  accent-color: var(--brand); /* warna ikut tema */
}
@media (max-width:640px){
  label.consent{font-size:13px}
}

/* Testimoni + Avatar */
.review{display:flex;flex-direction:column;gap:10px}
.reviewer{display:flex;align-items:center;gap:12px}
.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 56px;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.avatar-initial{
  width:56px;height:56px;border-radius:50%;flex:0 0 56px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#fff;letter-spacing:.5px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.avatar-initial::before{content:attr(data-initials)}
.review .name{font-weight:700}
.review .place{font-size:13px;color:var(--muted)}

.state-block{padding:28px 0;background:var(--bg);border-top:1px solid #e7efe0}
.state-block .container{width:min(1100px,92%);margin-inline:auto}
.state-block h2,.state-block p{text-align:center;margin:0 0 10px}
.state-link-wrap{display:flex;justify-content:center;margin:8px 0 6px}
.state-pill{display:inline-block;padding:8px 14px;border-radius:999px;background:var(--brand-2);border:1px solid var(--brand-2);color:#fff;font-weight:700;text-decoration:none}
.state-pill:hover{opacity:.95;transform:translateY(-1px)}
.city-list{list-style:none;margin:12px auto 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:center}
.city-list li{margin:0}
.city-list a{display:inline-block;padding:6px 12px;border-radius:999px;background:#eefbe5;border:1px solid #d9f7c2;color:#355e12;font-weight:700;font-size:13px;text-decoration:none}
.city-list a:hover{background:#e6f7d8;transform:translateY(-1px)}

/* Center tajuk & perenggan untuk state & city */
.state-block .container,
.city-block .container { text-align: center; }

.state-block h2, .state-block p,
.city-block h2, .city-block p {
  margin-left: auto;
  margin-right: auto;
}

/* Pastikan butang pill & senarai bandar kekal di tengah */
.state-link-wrap { justify-content: center; }
.city-list { justify-content: center; }


/* Steps — FIX */
.steps{counter-reset: step;}
.steps .step{display:flex;gap:12px;align-items:center;}
.steps .step:before{
  counter-increment: step; content: counter(step);
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#eefbe5;border:1px solid #d9f7c2;color:#2f5a11;font-weight:700;margin-top:0;
}
.steps .step h3{margin:0 0 4px;}