*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'Segoe UI', sans-serif;
}

.popup-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.65);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.popup-box{
    width:420px;
    max-width:90%;
    background:linear-gradient(135deg,#B9D0AE,#0a3e17);
    border-radius:20px;
    padding:30px;
    color:#fff;
    box-shadow:0 15px 40px rgba(0,0,0,0.3);
    position:relative;
    animation:popup 0.4s ease;
}

@keyframes popup{
    from{
        opacity:0;
        transform:translateY(-40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.close-btn{
    position:absolute;
    right:15px;
    top:10px;
    font-size:28px;
    cursor:pointer;
    color:#fff;
}

.popup-box h2{
    margin-bottom:10px;
    font-size:28px;
    text-align:center;
}

.popup-box p{
    text-align:center;
    margin-bottom:20px;
    opacity:0.9;
}

.form-group{
    margin-bottom:15px;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    padding:12px 15px;
    border:fff;
    border-radius:0px;
    outline:none;
    font-size:14px;
}

.form-group textarea{
    height:50px;
    resize:none;
}

.submit-btn{
    width:100%;
    padding:14px;
    border:none;
    border-radius:10px;
    background:#ffffff;
    color:#0f9d58;
    font-weight:700;
    cursor:pointer;
    font-size:16px;
    transition:0.3s;
}

.submit-btn:hover{
    transform:translateY(-2px);
}

@media(max-width:480px){
    .popup-box{
        padding:20px;
    }

    .popup-box h2{
        font-size:22px;
    }
}


:root{
  --green:#0a3e17; --green2:#0f6b2a; --lime:#b9d0ae; --mint:#eef7ef;
  --ink:#102018; --muted:#64736a; --line:#dfe9e1; --white:#fff;
  --shadow:0 24px 70px rgba(10,62,23,.12); --radius:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6}
a{text-decoration:none;color:inherit}
button{font:inherit}
.container{width:min(1180px,92%);margin:auto}
.nav{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.navbar{height:74px;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:23px;font-weight:900;color:var(--green)}
.logo span{color:#4f6a56}
.navlinks{display:flex;gap:26px;align-items:center;font-size:14px;font-weight:700}
.navlinks a:hover{color:var(--green2)}
.navcta,.hero-btn{background:var(--green);color:#fff;border:0;border-radius:11px;padding:12px 18px;font-weight:800;cursor:pointer}
.navcta:hover,.hero-btn:hover{background:#062c10;transform:translateY(-1px)}
.menu{display:none;background:none;border:0;font-size:25px}
.hero{overflow:hidden;background:
 radial-gradient(circle at 85% 15%,#dcebdc 0,transparent 30%),
 linear-gradient(135deg,#f8fcf8,#eef7ef);padding:92px 0 78px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}
.eyebrow{display:inline-flex;gap:8px;align-items:center;padding:7px 12px;border:1px solid #cfe0d1;background:#fff;border-radius:30px;color:var(--green2);font-size:12px;font-weight:900;letter-spacing:.08em}
h1{font-size:clamp(44px,5.5vw,70px);line-height:1.02;letter-spacing:-2.5px;margin:20px 0}
h1 span{color:var(--green2)}
.hero p{font-size:18px;color:var(--muted);max-width:620px;margin-bottom:28px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.outline{border:1px solid var(--line);background:#fff;color:var(--green);border-radius:11px;padding:12px 18px;font-weight:800}
.trust{display:flex;gap:28px;margin-top:28px;color:var(--muted);font-size:13px}
.trust strong{display:block;color:var(--ink);font-size:20px}
.dashboard{background:#fff;border:1px solid var(--line);border-radius:26px;padding:18px;box-shadow:var(--shadow);transform:rotate(1deg)}
.dtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.live{color:#16803a;font-size:12px;font-weight:800}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.kpi{background:#f7faf7;border:1px solid #edf2ed;border-radius:16px;padding:17px}
.kpi small{color:var(--muted)}
.kpi b{display:block;font-size:28px;margin-top:4px}
.chart{height:155px;margin-top:12px;border-radius:16px;background:linear-gradient(180deg,#f8fbf8,#edf6ee);position:relative;overflow:hidden}
.chart svg{width:100%;height:100%}
.feed{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.feedrow{display:flex;justify-content:space-between;padding:9px 0;font-size:13px}
.status{padding:4px 9px;border-radius:20px;background:#e4f5e7;color:#157337;font-weight:800}
.section{padding:92px 0}
.center{text-align:center;max-width:720px;margin:0 auto 48px}
.label{color:var(--green2);font-size:10px;letter-spacing:.13em;font-weight:900;text-transform:uppercase}
h2{font-size:clamp(32px,4vw,48px);line-height:1.10;letter-spacing:-1.3px;margin:9px 0 14px}
.center p,.intro{color:var(--muted)}
.pills{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:34px}
.pill{border:1px solid var(--line);background:#fff;border-radius:30px;padding:9px 15px;cursor:pointer;font-weight:800;color:#536159}
.pill.active,.pill:hover{background:var(--green);color:#fff;border-color:var(--green)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{border:1px solid var(--line);border-radius:18px;padding:25px;background:#fff;transition:.25s}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 45px rgba(10,62,23,.08);border-color:#c5d9c8}
.icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:var(--mint);color:var(--green2);font-size:22px;margin-bottom:16px}
.card h3{font-size:19px;margin-bottom:7px}
.card p{color:var(--muted);font-size:14px}
.panel{background:#f6faf6}
.showcase{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.tab-copy{padding-right:20px}
.tab-copy h2{margin-top:8px}
.bullets{list-style:none;margin-top:24px}
.bullets li{margin:13px 0;font-weight:700}
.bullets li:before{content:"✓";color:#16803a;margin-right:10px}
.module-ui{background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:var(--shadow)}
.module-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.module-body{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini{padding:17px;border-radius:15px;background:#f7faf7;border:1px solid #edf2ed}
.mini b{font-size:24px;display:block}
.bar{height:9px;background:#e4ece5;border-radius:20px;margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--green2);border-radius:20px}
.workflow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:35px}
.step{position:relative;text-align:center;padding:22px 12px;border:1px solid var(--line);border-radius:17px;background:#fff}
.step:not(:last-child):after{content:"→";position:absolute;right:-17px;top:34px;color:var(--green2);font-weight:900}
.num{width:34px;height:34px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font-weight:900}
.analytics{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.metric{padding:25px;border:1px solid var(--line);border-radius:20px;background:#fff}
.metric-top{display:flex;justify-content:space-between;align-items:center}
.metric b{font-size:34px}
.spark{height:90px;margin-top:15px}
.spark svg{width:100%;height:100%}
.security{background:linear-gradient(135deg,#062c10,#0f6b2a);color:#fff}
.security .muted{color:#d3e4d6}
.security-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.sec{padding:23px;border:1px solid rgba(255,255,255,.15);border-radius:17px;background:rgba(255,255,255,.07)}
.sec b{display:block;margin-bottom:6px}
.sec span{font-size:13px;color:#d3e4d6}
.cta{padding:80px 0}
.ctabox{border-radius:28px;padding:60px 30px;text-align:center;background:linear-gradient(135deg,#eef7ef,#dcebdc);border:1px solid #cfe0d1}
.ctabox p{max-width:650px;margin:0 auto 25px;color:var(--muted)}
footer{border-top:1px solid var(--line);padding:30px 0;color:var(--muted);font-size:13px}
.footer{display:flex;justify-content:space-between;gap:20px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.58);display:none;place-items:center;z-index:2000;padding:20px}
.modal.open{display:grid}
/* .modalbox{width:min(520px,100%);background:#fff;border-radius:22px;padding:28px;position:relative} */
.modalbox{width:min(520px,100%);background:#fff;border-radius:22px;padding:28px;position:relative;animation:popup 0.4s ease;max-height: 99vh; overflow-y: auto;}
.close{position:absolute;right:18px;top:13px;border:0;background:none;font-size:28px;cursor:pointer}
.form{display:grid;gap:10px;margin-top:15px}
.form input,.form select,.form textarea{width:100%;padding:8px;border:1px solid var(--line);border-radius:10px;outline:none}
.form textarea{height:70px;resize:vertical}
@media(max-width:950px){
 .hero-grid,.showcase{grid-template-columns:1fr}
 .feature-grid{grid-template-columns:repeat(2,1fr)}
 .security-grid{grid-template-columns:repeat(2,1fr)}
 .workflow{grid-template-columns:1fr}
 .step:not(:last-child):after{content:"↓";right:auto;left:50%;top:auto;bottom:-20px}
 .navlinks{display:none}.menu{display:block}
}
@media(max-width:620px){
 .feature-grid,.analytics{grid-template-columns:1fr}
 .hero{padding:65px 0}
 .trust{gap:15px;flex-wrap:wrap}
 .module-body{grid-template-columns:1fr}
 .security-grid{grid-template-columns:1fr}
 .footer{flex-direction:column}
}



.contents {
  position: relative;
  width: 100%;
  height: 100%;
}

/* =========================
   DESKTOP
========================= */

.hero-title {
  position: absolute;
  bottom: 60%;
  left: -13%;
  margin: 0;
  padding: 0;
  text-align: left;

  color: black;
  /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); */
}

.hero-small {
  font-weight: 400;
  font-size: x-large;
}

.hero-main {
  font-size: 150%;
  font-weight: bolder;
  color: #0a3e17;
}

.hero-description {
  position: absolute;
  bottom: 25%;
  left: -13%;
  margin: 0;
  padding: 0;

  text-align: left;
  color: #08590e !important;
  /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); */
}

.hero-description span {
  font-weight: 325;
  font-size: 200%;
  line-height: 150%;
}


/* =========================
   TABLET
========================= */

@media (max-width: 991px) {

  .hero-title {
    left: -5%;
    bottom: 58%;
  }

  .hero-small {
    font-size: 28px;
  }

  .hero-main {
    font-size: 40px;
  }

  .hero-description {
    left: -5%;
    bottom: 30%;
  }

  .hero-description span {
    font-size: 160%;
    line-height: 1.5;
  }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {

  .hero-title {
    left: 0;
    bottom: 58%;
    width: 100%;

    /* text-align: center; */
  }

  .hero-small {
    font-size: 20px;
  }

  .hero-main {
    font-size: 32px;
  }

  .hero-description {
    left: 0;
    bottom: 30%;
    width: 100%;

    /* text-align: center; */
  }

  .hero-description span {
    font-size: 140%;
    line-height: 1.5;
  }
}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 480px) {

  .hero-title {
    bottom: 60%;
  }

  .hero-small {
    font-size: 20px;
  }

  .hero-main {
    font-size: 28px;
  }

  .hero-description {
    bottom: 25%;
  }

  .hero-description span {
    font-size: 125%;
    line-height: 1.45;
  }
}

@media (max-width: 767px) {

  footer .row {
    text-align: center;
  }

  footer .footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  footer .footer-links li {
    margin: 0 8px;
  }

  /* Copyright */
  footer .copyright {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 15px;
  }

  footer .copyright p {
    width: 100%;
    text-align: center;
    margin: 0;
  }
}