:root {
  --pickle-green: #2A9D52;
  --evergreen: #1F4F2E;
  --courtroom-gold: #C8A051;
  --charcoal: #1E1E1E;
  --cream: #F7F4EA;
  --electric-lime: #B7E476;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--cream); color:var(--charcoal); font-family: Inter, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; line-height:1.6; }
a { color: var(--pickle-green); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 1080px; padding: 0 20px; margin: 0 auto; }

.header { background: var(--cream); border-bottom: 1px solid rgba(0,0,0,0.06); position: sticky; top:0; z-index:10; }
.nav { display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.brand { display:flex; align-items:center; gap:12px; }
.brand svg { height:32px; width:auto; }
.nav a { margin-left:16px; font-weight:600; }

.hero { background: linear-gradient(180deg, rgba(42,157,82,0.08), rgba(42,157,82,0)); padding: 56px 0 40px; }
.h1 { font-size: clamp(28px, 5vw, 48px); font-weight:800; letter-spacing:-0.02em; margin:0 0 8px; }
.sub { font-size: clamp(16px, 2.6vw, 20px); color:#333; max-width: 800px; }
.ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.button { background: var(--pickle-green); color: var(--cream); padding:12px 18px; border-radius:12px; display:inline-flex; align-items:center; gap:8px; font-weight:700; border: none; }
.button:hover { background: var(--evergreen); cursor:pointer; }
.button.secondary { background: transparent; color: var(--evergreen); border:2px solid var(--evergreen); }
.kpis { display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; margin-top:24px; }
.kpi { background:white; border:1px solid rgba(0,0,0,0.06); border-radius:16px; padding:16px; }
.kpi strong { font-size:20px; }

.section { padding: 40px 0; }
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
.card { background:white; border:1px solid rgba(0,0,0,0.06); border-radius:16px; padding:20px; }
.card h3 { margin-top:0; }
.badge { display:inline-block; background: var(--electric-lime); color: #222; font-weight:800; padding: 4px 10px; border-radius:999px; font-size:12px; }

.workflow { display:grid; grid-template-columns: repeat(5, 1fr); gap:10px; align-items:stretch; }
.step { background:white; border:1px dashed rgba(0,0,0,0.12); border-radius:16px; padding:16px; text-align:center; }
.step h4 { margin-top:0; }

.pricing { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
.price-card { background:white; border:1px solid rgba(0,0,0,0.06); border-radius:16px; padding:24px; display:flex; flex-direction:column; }
.price { font-size:28px; font-weight:800; color: var(--evergreen); }
.price-card ul { padding-left:18px; }
.price-card .button { margin-top:auto; }

.faq details { background:white; border:1px solid rgba(0,0,0,0.06); border-radius:12px; padding:12px 16px; margin-bottom:10px; }
.faq summary { cursor: pointer; font-weight:700; }

.footer { background: var(--evergreen); color: var(--cream); padding: 24px 0; margin-top: 40px; }
.footer a { color: var(--electric-lime); }

@media (max-width: 880px) {
  .grid-3 { grid-template-columns: 1fr; }
  .workflow { grid-template-columns: 1fr; }
  .pricing { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr; }
}