
:root{
  --green:#2ecc71;
  --green-dark:#27ae60;
  --bg:#f1faf5;
  --text:#24352d;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont;
  background:var(--bg);
  color:var(--text);
  line-height:1.8;
}
header{
  padding:90px 20px;
  text-align:center;
  background:
    radial-gradient(circle at top, rgba(46,204,113,.35), transparent 60%),
    linear-gradient(135deg,var(--green),var(--green-dark));
  color:#fff;
}
header h1{font-size:3rem;margin-bottom:10px}
header p{max-width:760px;margin:auto;font-size:1.15rem;opacity:.95}

nav{
  background:#ffffffcc;
  backdrop-filter:blur(8px);
  position:sticky;
  top:0;
  z-index:10;
}
nav ul{
  list-style:none;
  margin:0;
  padding:15px 20px;
  display:flex;
  gap:25px;
  justify-content:center;
}
nav a{color:#2b5d44;text-decoration:none;font-weight:500}

main{max-width:1100px;margin:auto;padding:70px 20px}

.section{
  margin-bottom:100px;
}
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
}
.grid img, .grid svg{
  width:100%;
  max-width:420px;
  margin:auto;
  display:block;
}
h2{
  font-size:2.3rem;
  color:var(--green-dark);
  margin-bottom:15px;
}
p{font-size:1.05rem}

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
  margin-top:40px;
}
.card{
  background:#fff;
  padding:35px;
  border-radius:28px;
  box-shadow:0 20px 40px rgba(0,0,0,.06);
}
.card h3{margin-top:0;color:var(--green-dark)}

.highlight{
  background:#ffffff;
  border-radius:36px;
  padding:70px 40px;
  box-shadow:0 25px 60px rgba(0,0,0,.07);
}

.svg-row{
  display:flex;
  gap:40px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:30px;
}
.svg-row img{width:160px}

footer{
  background:#e8f5ee;
  padding:50px 20px;
  font-size:.9rem;
}
footer .wrap{max-width:1100px;margin:auto}
footer strong{color:#1f5e43}

@media(max-width:900px){
  .grid{grid-template-columns:1fr}
  header h1{font-size:2.4rem}
}
