:root{
  --green:#0A5A38;
  --darkgreen:#084a2f;
  --orange:#F08C00;
  --dark:#0e1612;
  --muted:#5b6b63;
  --bg1:#f6faf8;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
  color:var(--dark);
  background: radial-gradient(1200px 800px at 10% 10%, #ffffff 0%, #f8fbf7 40%, #eff7f1 70%, #eaf5ef 100%);
}
.wrapper{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 18px;
}
.card{
  width: min(1100px, 100%);
  background:#fff;
  border-radius:28px;
  padding: clamp(20px, 4vw, 40px);
  box-shadow: 0 10px 30px rgba(0,0,0,.06), 0 40px 80px rgba(0,0,0,.04);
  position:relative;
  overflow:hidden;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:999px;
  padding: 22px 34px;
  font-weight:600;
  color:#fff;
  background: linear-gradient(120deg, var(--green), var(--orange));
  letter-spacing:.2px;
  box-shadow: 0 6px 18px rgba(14, 22, 18, .12);
  margin-bottom:40px;
  margin-top:-40px;
}
.logo{
  display:flex; align-items:center; gap:16px;
}
.logo img{width:56px; height:56px; object-fit:contain; }
.logo .brand{font-size:22px; font-weight:800; color:var(--green)}
.logo .brand span{color:var(--orange)}
h1{
  margin:14px 0 8px; font-size: clamp(28px, 5vw, 44px); line-height:1.1; color:var(--darkgreen);
}
.lead{color:var(--muted); font-size: clamp(14px, 2.2vw, 18px); max-width:80ch}
.grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(18px, 3vw, 36px);
  margin-top: 22px;
  align-items:center;
}
.hero-img{
  width:100%; border-radius:24px; box-shadow: 0 14px 40px rgba(0,0,0,.18);
  transform: perspective(1000px) rotateY(-10deg);
}
.section{margin-top: 18px}
h3{margin: 18px 0 12px; color:var(--darkgreen); font-size: clamp(18px, 2.6vw, 24px)}
ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
li{display:flex; align-items:flex-start; gap:10px}
.check{
  width:22px; height:22px; border-radius:6px; display:inline-grid; place-items:center; flex:0 0 22px;
  background: linear-gradient(120deg, var(--orange), #ffb02e);
  box-shadow: 0 6px 14px rgba(240, 140, 0, .35);
}
.check svg{width:14px; height:14px; color:#fff}
.cta{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:22px;
}
.btn{
  --bg: var(--green);
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:14px; font-weight:700; color:#fff; text-decoration:none;
  background:var(--bg);
  box-shadow:0 8px 20px rgba(10,90,56,.25);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(-2px); filter:saturate(1.1); box-shadow:0 12px 26px rgba(10,90,56,.28)}
.btn.outline{
  color:var(--darkgreen); background:#fff; border:2px solid rgba(10,90,56,.15);
  box-shadow:none;
}
.footer{
  margin-top:26px; padding-top:16px; border-top:1px dashed rgba(10,90,56,.2);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; color:var(--muted);
  font-size:14px;
}
.progress{
  margin-top:12px; height:8px; width:140px; border-radius:999px; background:#edf3ef; overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.progress>span{
  display:block; height:100%; width:68%; background:linear-gradient(90deg, var(--green), var(--orange));
  border-radius:999px; animation: progress 2.8s ease-in-out infinite alternate;
}
@keyframes progress{ from{ width:38% } to { width: 92% } }

@media (max-width: 880px){
  .grid{ grid-template-columns: 1fr; }
  .hero-img{ transform: none }
  .footer{justify-content:center; text-align:center}
}

/* centered head */
.head{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  margin-bottom: 8px;
}
.logo{justify-content:center}
.logo img{width:100%; height:auto;max-height:240px;}
.logo .brand{display:none}
.badge{align-self:center}