/* Base + tokens */
:root{
  --bg:#ffffff;
  --bg-sub:#f6faf7;
  --text:#0f172a;
  --muted:#6b7280;
  --brand:#0f5132;
  --brand-600:#0c3e26;
  --ring:rgba(15,81,50,0.25);
  --radius:14px;
  --container:1100px;
  --shadow:0 10px 20px rgba(2,6,23,.06), 0 2px 6px rgba(2,6,23,.04);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.6 ui-sans-serif, -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color:var(--text); background:var(--bg-sub);
}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.button{
  display:inline-block; background:var(--brand); color:#fff; padding:12px 16px; border-radius:10px;
  font-weight:600; box-shadow:var(--shadow); transition:transform .06s ease, background .2s ease;
}
.button:hover{ background:var(--brand-600); transform:translateY(-1px) }
.button.outline{ background:transparent; color:var(--brand); border:1px solid var(--brand); box-shadow:none }
.badge{display:inline-block; font-size:12px; color:#0f5132; background:#e6f3ec; padding:6px 10px; border-radius:999px; font-weight:600}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:900px){ .grid-3{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .grid-3{grid-template-columns:1fr} }

.card{background:#fff; border:1px solid #e5e7eb; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.card h3{margin:.2rem 0 .2rem 0}
.card p{margin:.2rem 0 0 0; color:var(--muted)}

.section{padding:44px 0}
.section.alt{background:#fff}

h1{font-size:42px; line-height:1.15; margin:0 0 8px 0; letter-spacing:-.02em}
h2{font-size:28px; margin:0 0 10px 0}
.lede{color:#334155; font-size:18px}
.small{font-size:14px; color:var(--muted)}

.list-clean{list-style:none; padding:0; margin:0}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.kpis .k{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px;text-align:center}
@media (max-width:720px){ .kpis{grid-template-columns:1fr} }

/* Form */
.form{max-width:700px}
input,select,textarea{
  width:100%; padding:12px 12px; border:1px solid #d1d5db; border-radius:10px; background:#fff;
  outline:none; transition: box-shadow .15s ease, border-color .15s ease;
}
input:focus,select:focus,textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 4px var(--ring) }
label{font-weight:600; display:block; margin:14px 0 6px 0}
.help{color:var(--muted); font-size:12px; margin-top:4px}

/* Header */
.header{position:sticky; top:0; background:#fff; border-bottom:1px solid #e5e7eb; z-index:20}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--brand)}
.brand-mark{width:34px; height:34px; border-radius:10px; background:var(--brand)}
.nav{display:flex; align-items:center; gap:12px}
.nav a{padding:8px 10px; border-radius:8px}
.nav .cta{background:var(--brand); color:#fff}
.toggle{display:none}
@media (max-width:780px){
  .toggle{display:inline-block; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:8px 10px}
  .nav{display:none; position:absolute; right:20px; top:60px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px; flex-direction:column; box-shadow:var(--shadow)}
  .nav.open{display:flex}
}

/* Hero */
.hero{padding:54px 0; background:linear-gradient(180deg, #ffffff 0%, #f8fbf9 100%)}
.hero .actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.trust{margin-top:18px}
.trust .grid-3 .card{display:flex; gap:10px; align-items:flex-start}
.icon{width:18px; height:18px; background:var(--brand); border-radius:6px; margin-top:4px}
/* Footer */
.footer{background:#fff; border-top:1px solid #e5e7eb; padding:18px 0; color:var(--muted)}