:root{--ink:#10211a;--muted:#607168;--line:#dfe8e2;--green:#176b46;--green2:#0f5537;--soft:#f4f8f5;--dark:#0d1d16;--lime:#cbe86b;--max:1180px;--shadow:0 24px 60px rgba(16,33,26,.10)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);line-height:1.6;background:#fff}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.container{width:min(var(--max),calc(100% - 40px));margin:auto}.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.navrow{height:76px;display:flex;align-items:center;justify-content:space-between;gap:22px}.brand{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:900}.brand img{width:38px;height:38px}.links{display:flex;gap:22px;font-size:14px;font-weight:750;color:#29463a}.actions{display:flex;gap:10px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border-radius:14px;border:1px solid transparent;font-weight:850;font-size:14px}.primary{background:var(--green);color:#fff}.dark{background:var(--dark);color:#fff}.ghost{border-color:var(--line);background:#fff}.menu{display:none}.hero{padding:72px 0 50px;background:radial-gradient(circle at 85% 12%,rgba(203,232,107,.25),transparent 24%),linear-gradient(#fbfdfb,#fff);overflow:hidden}.grid2{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}.eyebrow{display:inline-flex;padding:8px 12px;border-radius:999px;background:#eaf5ee;border:1px solid #d5eadc;color:var(--green2);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.6px}h1{font-size:clamp(44px,6vw,74px);line-height:1.02;letter-spacing:-3px;margin:18px 0 22px}h2{font-size:clamp(32px,4vw,50px);line-height:1.08;letter-spacing:-1.8px;margin:0 0 16px}h3{font-size:22px;line-height:1.2;margin:0 0 10px}.lead{font-size:19px;color:var(--muted)}.heroacts{display:flex;gap:12px;flex-wrap:wrap;margin-top:27px}.trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;font-size:13px;font-weight:750;color:#355045}.trust span:before{content:'✓';color:var(--green);margin-right:7px}.heroart{position:relative}.heroart img{filter:drop-shadow(0 30px 55px rgba(13,29,22,.18))}.float{position:absolute;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:17px;padding:13px 15px;font-size:13px;font-weight:800}.f1{left:-10px;bottom:18px}.f2{right:-8px;top:28px}.section{padding:84px 0}.soft{background:var(--soft)}.head{max-width:760px;margin-bottom:38px}.center{text-align:center;margin-left:auto;margin-right:auto}.kicker{font-size:12px;font-weight:950;letter-spacing:1.2px;text-transform:uppercase;color:var(--green)}.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:0 10px 35px rgba(16,33,26,.045)}.card p{color:var(--muted);margin:0}.icon{width:48px;height:48px;border-radius:14px;background:#eaf5ee;display:grid;place-items:center;font-size:24px;margin-bottom:18px}.workflow{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 10px;text-align:center;font-weight:850}.step b{display:block;color:var(--green);font-size:11px}.products{display:grid;grid-template-columns:1fr 1fr;gap:24px}.product{border:1px solid var(--line);border-radius:30px;padding:34px;background:#fff}.product.black{background:var(--dark);color:#fff;border-color:var(--dark)}.product.black p,.product.black li{color:#cad8d1}.product p,.product li{color:var(--muted)}.tag{display:inline-block;border-radius:999px;background:#edf5f0;color:var(--green);padding:6px 10px;font-size:11px;font-weight:950;text-transform:uppercase}.product img{margin-top:24px;border-radius:20px}.roles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.visual{background:linear-gradient(145deg,#f8fbf9,#edf5f0);border:1px solid var(--line);border-radius:30px;padding:24px;box-shadow:var(--shadow)}.checks{display:grid;gap:12px}.check{display:flex;gap:12px}.check i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#e0f1e7;color:var(--green);font-weight:950;flex:0 0 auto}.small{font-size:12px;color:#81968b}.compare{overflow:auto;border:1px solid var(--line);border-radius:22px}table{width:100%;border-collapse:collapse;min-width:740px;background:#fff}th,td{padding:17px 18px;border-bottom:1px solid var(--line);text-align:left}th{background:#f7faf8;font-size:13px}td{font-size:14px}.good{font-weight:900;color:var(--green)}details{border:1px solid var(--line);background:#fff;border-radius:18px;padding:18px 20px;margin:10px 0}summary{cursor:pointer;font-weight:850}.cta{background:linear-gradient(135deg,#10271d,#0d1d16);border-radius:32px;padding:44px;color:#fff;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}.cta p{color:#c9d8d0}.footer{background:#091710;color:#d4e0da;padding:50px 0 26px}.footgrid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px}.footer h4{color:#fff;margin:0 0 12px}.footer a{display:block;color:#b7c8bf;margin:8px 0;font-size:14px}.footbottom{margin-top:32px;padding-top:18px;border-top:1px solid #1f342a;display:flex;justify-content:space-between;flex-wrap:wrap}.wa{position:fixed;right:18px;bottom:18px;z-index:60;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#1f9d5b;color:#fff;font-size:24px;box-shadow:0 15px 30px rgba(0,0,0,.18)}.pagehero{padding:66px 0 40px;background:linear-gradient(#f5faf7,#fff)}.pagehero h1{font-size:clamp(42px,5vw,64px)}.notice{background:#fff7dc;border:1px solid #f3dc95;border-radius:15px;padding:14px 16px;color:#725b18;font-size:13px}@media(max-width:960px){.links{display:none}.grid2,.products,.cta{grid-template-columns:1fr}.cards3{grid-template-columns:1fr 1fr}.roles{grid-template-columns:1fr 1fr}.workflow{grid-template-columns:repeat(3,1fr)}.footgrid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.container{width:calc(100% - 26px)}.navrow{height:68px}.actions .ghost{display:none}.hero{padding:44px 0 28px}h1{letter-spacing:-2px}.section{padding:60px 0}.cards3,.roles,.footgrid{grid-template-columns:1fr}.workflow{grid-template-columns:1fr 1fr}.float{position:static;margin-top:8px;display:inline-block}.cta{padding:28px}}


/* ===== Kozhil real product screenshots ===== */
.brand img{
  width:42px;
  height:42px;
  object-fit:cover;
  border-radius:50%;
  background:#fff;
  padding:2px;
  box-shadow:0 4px 14px rgba(16,33,26,.12);
}
.product-showcase{
  position:relative;
  border-radius:28px;
  padding:14px;
  background:linear-gradient(145deg,#ffffff,#eef5f0);
  border:1px solid var(--line);
  box-shadow:0 28px 70px rgba(16,33,26,.14);
}
.browser-frame{
  overflow:hidden;
  border-radius:20px;
  background:#fff;
  border:1px solid #dce7e0;
}
.browser-bar{
  height:30px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 12px;
  background:#f6f8f7;
  border-bottom:1px solid #e5ece8;
}
.browser-dot{
  width:8px;height:8px;border-radius:50%;background:#c6d3cc;
}
.browser-frame img{
  width:100%;
  height:auto;
  display:block;
}
.mobile-showcase{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:start;
}
.phone-frame{
  background:#111a15;
  padding:9px;
  border-radius:30px;
  box-shadow:0 24px 55px rgba(16,33,26,.16);
  max-width:310px;
  margin:auto;
}
.phone-screen{
  overflow:hidden;
  border-radius:23px;
  background:#fff;
}
.phone-screen img{
  width:100%;
  height:auto;
  display:block;
}
.phone-caption{
  text-align:center;
  margin-top:14px;
  font-size:14px;
  font-weight:800;
  color:var(--ink);
}
.real-ui-grid{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:36px;
  align-items:center;
}
.real-ui-copy .badge{
  display:inline-flex;
  margin-bottom:10px;
}
.screenshot-note{
  margin-top:12px;
  color:var(--muted);
  font-size:12px;
}
@media(max-width:960px){
  .real-ui-grid{grid-template-columns:1fr}
  .mobile-showcase{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
  .mobile-showcase{grid-template-columns:1fr}
  .phone-frame{max-width:280px}
}


/* ===== V4: clearer mobile-first product visuals ===== */
.hero-mobile-stack{
  position:relative;
  min-height:600px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:14px;
  padding:10px 8px 0;
}
.hero-phone{
  position:relative;
  width:31%;
  max-width:220px;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 26px 60px rgba(16,33,26,.18);
  border:1px solid rgba(16,33,26,.08);
  background:#fff;
}
.hero-phone.main{
  width:38%;
  max-width:250px;
  transform:translateY(-28px);
  z-index:2;
}
.hero-phone img{
  width:100%;
  height:auto;
  display:block;
}
.hero-mobile-label{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-12px;
  z-index:5;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 12px 28px rgba(16,33,26,.10);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.mobile-feature-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:28px;
}
.mobile-feature-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:16px;
  box-shadow:0 12px 38px rgba(16,33,26,.06);
}
.mobile-feature-card img{
  width:100%;
  border-radius:18px;
  display:block;
}
.mobile-feature-card h3{
  margin-top:16px;
  margin-bottom:6px;
}
.mobile-feature-card p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}
.mobile-focus{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:50px;
  align-items:center;
}
.mobile-focus.reverse{
  grid-template-columns:1.1fr .9fr;
}
.mobile-focus .mobile-art{
  max-width:360px;
  margin:auto;
  border-radius:32px;
  overflow:hidden;
  box-shadow:0 28px 65px rgba(16,33,26,.15);
  border:1px solid var(--line);
  background:#fff;
}
.mobile-focus .mobile-art img{
  width:100%;
  height:auto;
  display:block;
}
.web-screenshot-secondary{
  margin-top:40px;
}
.web-screenshot-secondary .browser-frame img{
  max-height:520px;
  object-fit:cover;
  object-position:top;
}
@media(max-width:960px){
  .hero-mobile-stack{min-height:auto;padding-top:20px}
  .mobile-feature-strip{grid-template-columns:repeat(2,1fr)}
  .mobile-focus,.mobile-focus.reverse{grid-template-columns:1fr}
}
@media(max-width:620px){
  .hero-mobile-stack{gap:8px}
  .hero-phone{width:30%;border-radius:18px}
  .hero-phone.main{width:38%;transform:translateY(-12px)}
  .hero-mobile-label{font-size:10px;padding:6px 8px}
  .mobile-feature-strip{grid-template-columns:1fr}
  .mobile-focus .mobile-art{max-width:300px}
}


/* V4.1 fix: CTA white buttons had inherited white text on a white background */
.cta .btn-ghost,
.cta a.btn-ghost{
  color:#10211a !important;
  background:#ffffff !important;
  border-color:#dfe8e2 !important;
}
.cta .btn-ghost:hover,
.cta a.btn-ghost:hover{
  color:#176b46 !important;
  background:#f4f8f5 !important;
}

/* V4.2 exact CTA button fix */
.cta .btn.ghost,
.cta a.btn.ghost{
  color:#10211a !important;
  background:#ffffff !important;
  border:1px solid #dfe8e2 !important;
}
.cta .btn.ghost:hover,
.cta a.btn.ghost:hover{
  color:#176b46 !important;
  background:#f4f8f5 !important;
}


/* V4.3: top contact number + clearer WhatsApp CTA */
.top-phone{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:12px 14px;
  border-radius:14px;
  font-size:13px;
  font-weight:900;
  color:#176b46;
  background:#f4f8f5;
  border:1px solid #dfe8e2;
  white-space:nowrap;
}
.top-phone:hover{
  background:#eaf5ee;
  color:#0e5335;
}

.whatsapp{
  width:62px !important;
  height:62px !important;
  background:#25D366 !important;
  color:#fff !important;
  border:4px solid #fff !important;
  box-shadow:0 14px 34px rgba(0,0,0,.24) !important;
  font-size:0 !important;
  right:22px !important;
  bottom:22px !important;
  position:fixed !important;
}
.whatsapp::before{
  content:"";
  width:31px;
  height:31px;
  display:block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' d='M19.11 17.37c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.95 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.76-1.66-2.06-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.61-.92-2.2-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.8.37-.27.3-1.05 1.02-1.05 2.49s1.07 2.89 1.22 3.09c.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.63.71.23 1.36.2 1.87.12.57-.08 1.76-.72 2.01-1.41.25-.7.25-1.3.17-1.42-.07-.13-.27-.2-.57-.35z'/%3E%3Cpath fill='%23fff' d='M16.02 3C8.83 3 3 8.78 3 15.91c0 2.51.73 4.85 1.99 6.83L3.67 29l6.43-1.68a13.1 13.1 0 0 0 5.92 1.42C23.21 28.74 29 22.95 29 15.91 29 8.78 23.21 3 16.02 3zm0 23.54c-2.03 0-4.01-.55-5.73-1.59l-.41-.24-3.82 1 1.02-3.69-.27-.43a10.4 10.4 0 0 1-1.62-5.58c0-5.79 4.85-10.5 10.83-10.5s10.83 4.71 10.83 10.5-4.85 10.53-10.83 10.53z'/%3E%3C/svg%3E");
}
.whatsapp::after{
  content:"WhatsApp";
  position:absolute;
  right:68px;
  background:#10211a;
  color:#fff;
  font-size:12px;
  font-weight:900;
  padding:8px 10px;
  border-radius:10px;
  opacity:0;
  transform:translateX(6px);
  pointer-events:none;
  transition:.2s ease;
  white-space:nowrap;
}
.whatsapp:hover::after{
  opacity:1;
  transform:translateX(0);
}
@media(max-width:1100px){
  .top-phone{display:none}
}
@media(max-width:620px){
  .whatsapp{
    width:58px !important;
    height:58px !important;
    right:16px !important;
    bottom:16px !important;
  }
  .whatsapp::before{
    width:28px;
    height:28px;
  }
}