*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Poppins',sans-serif;background:#f8f9f8;color:#222;overflow-x:hidden}
.navbar{height:90px;background:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 60px;box-shadow:0 2px 10px #0000000d}
.logo img{height:55px}
.menu{display:flex;list-style:none;gap:35px}
.menu a{text-decoration:none;color:#222;font-weight:500}
.menu a:hover{color:#198754}
.btn-wa{background:#198754;color:#fff;padding:14px 28px;border-radius:50px;text-decoration:none;font-weight:600}
.hero{position:relative;height:650px;background:url(hero.jpg) center center/cover no-repeat}
.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000073}
.hero-content{position:relative;z-index:2;max-width:650px;padding:120px 80px;color:#fff}
.hero-content h1{font-size:64px;line-height:1.1;font-weight:800;margin-bottom:20px}
.hero-content h1 span{color:#4dd637}
.hero-content p{font-size:18px;line-height:1.8;margin-bottom:30px}
.hero-buttons{display:flex;gap:15px}
.btn-primary{background:#198754;color:#fff;text-decoration:none;padding:15px 28px;border-radius:10px}
.btn-secondary{background:#fff;color:#198754;text-decoration:none;padding:15px 28px;border-radius:10px}
.stats{width:85%;margin:-60px auto 70px;background:#fff;border-radius:20px;padding:30px;display:flex;justify-content:space-around;flex-wrap:wrap;box-shadow:0 10px 30px #00000014;position:relative;z-index:5}
.stat{text-align:center;min-width:180px}
.stat h3{color:#198754;font-size:40px}
.stat p{margin-top:10px}
.services,.workflow,.articles{padding:80px 60px;text-align:center}
.section-tag{color:#198754;font-weight:700;font-size:14px}
.services h2,.workflow h2,.articles h2{margin-top:10px;margin-bottom:40px;font-size:42px}
.service-grid{display:flex;justify-content:center;flex-wrap:wrap;gap:30px}
.card{width:320px;background:#fff;padding:35px;border-radius:20px;box-shadow:0 5px 20px #0000000d}
.card h3{margin:20px 0}
.card p{line-height:1.8;color:#555}
.steps{display:flex;justify-content:center;flex-wrap:wrap;gap:40px}
.step{width:220px}
.circle{width:70px;height:70px;border-radius:50%;background:#198754;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 15px}
.article-grid{display:flex;justify-content:center;flex-wrap:wrap;gap:25px}
.article{width:320px;background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 5px 20px #0000000d}
.article img{width:100%;height:200px;object-fit:cover}
.article h3{padding:15px}
.article p{padding:0 15px 20px;color:#777}
footer{background:linear-gradient(135deg,#023b17,#0c6d2d,#198754);color:#fff;padding:60px}
.footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px}
.footer-column{min-width:250px}
.footer-column h3,.footer-column h4{margin-bottom:15px}
.footer-column ul{list-style:none}
.footer-column ul li{margin-bottom:10px}
.footer-column a{color:#fff;text-decoration:none}
@media(max-width:768px) {
.navbar{flex-direction:column;height:auto;padding:20px}
.menu{flex-wrap:wrap;justify-content:center;margin:20px 0}
.hero{height:auto}
.hero-content{padding:80px 30px}
.hero-content h1{font-size:42px}
.stats{width:95%}
.services,.workflow,.articles{padding:60px 20px}
}