:root{
  --green:#15533b; --green-d:#0f3f2c; --green-soft:#e9f6ee; --green-soft2:#dff2e6;
  --brand:#12a35f; --brand-d:#0f8a4f; --brand2:#28c07e; --amber:#f5a623;
  --ink:#15271e; --body:#51605a; --mut:#8a978f; --line:#e9efe9;
  --bg:#f4f7f5; --card:#fff;
  --shadow:0 8px 24px -14px rgba(18,39,28,.22);
  --shadow-lg:0 30px 64px -30px rgba(18,39,28,.34);
  --disp:'Baloo 2',-apple-system,'Segoe UI',sans-serif;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ max-width:100%; overflow-x:hidden; }
body{ margin:0; color:var(--body); background:var(--bg);
  font-family:'Plus Jakarta Sans',-apple-system,'Segoe UI',Roboto,sans-serif; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer; font-weight:800; font-size:14.5px;
  padding:13px 24px; border-radius:30px; color:#fff; background:var(--brand); box-shadow:0 12px 24px -12px rgba(18,163,95,.7); transition:.16s; }
.btn:hover{ background:var(--brand-d); transform:translateY(-2px); }
.btn.ghost{ background:transparent; color:var(--ink); border:1.6px solid var(--line); box-shadow:none; }
.btn.ghost:hover{ border-color:var(--brand); color:var(--brand); background:#fff; }
.btn.white{ background:#fff; color:var(--green); box-shadow:0 14px 30px -14px rgba(0,0,0,.35); }

/* nav */
.nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid var(--line); }
.nav-row{ display:flex; align-items:center; gap:22px; height:70px; }
.brand{ font-family:var(--disp); font-weight:800; font-size:23px; color:var(--green); display:flex; align-items:center; gap:9px; }
.brand .mark{ width:34px; height:34px; border-radius:11px; background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; display:grid; place-items:center; font-size:17px; box-shadow:0 8px 18px -8px rgba(18,163,95,.7); }
.brand.light{ color:#fff; } .brand.light .mark{ background:rgba(255,255,255,.16); }
.logo-img{ height:44px; width:auto; display:block; }
.foot-logo{ height:36px; background:#fff; padding:8px 12px; border-radius:12px; box-sizing:content-box; }
@media(max-width:640px){ .logo-img{ height:38px; } }
.links{ display:flex; gap:26px; margin-left:8px; }
.links a{ font-weight:700; font-size:14.5px; color:var(--body); }
.links a:hover{ color:var(--brand); }
.nav-cta{ margin-left:auto; display:flex; gap:10px; }
.nav-cta .btn{ padding:10px 18px; font-size:13.5px; }
.burger{ display:none; margin-left:auto; background:none; border:0; font-size:24px; cursor:pointer; color:var(--ink); }

/* hero */
.hero{ position:relative; overflow:hidden; background:radial-gradient(120% 130% at 85% -10%, #1c6b49, var(--green) 46%, #0f3f2c 100%); color:#fff; }
.hero .glow{ position:absolute; border-radius:50%; filter:blur(70px); background:rgba(40,192,126,.3); width:360px; height:360px; top:-120px; right:14%; }
.hero .glow.g2{ background:rgba(245,166,35,.16); width:260px; height:260px; top:auto; bottom:-120px; right:-40px; }
.hero .dots{ position:absolute; inset:0; opacity:.5; background-image:radial-gradient(rgba(255,255,255,.14) 1.4px, transparent 1.4px); background-size:24px 24px; -webkit-mask-image:linear-gradient(120deg,#000 0 32%,transparent 60%); mask-image:linear-gradient(120deg,#000 0 32%,transparent 60%); }
.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:center; padding:70px 24px 84px; }
.badge{ display:inline-block; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); font-size:12px; font-weight:800; letter-spacing:.5px; padding:7px 14px; border-radius:22px; margin-bottom:20px; }
.hero-copy h1{ font-family:var(--disp); font-size:54px; line-height:1.03; letter-spacing:-1px; margin:0 0 16px; font-weight:700; max-width:600px; }
.hero-copy p{ font-size:17px; line-height:1.6; opacity:.92; max-width:520px; margin:0 0 28px; }
.hero-copy p b{ color:#bff0d3; font-weight:700; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chips span{ background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.24); border-radius:22px; padding:7px 14px; font-size:12.5px; font-weight:700; }

.hero-visual{ position:relative; z-index:2; }
.hero-visual .ring{ position:absolute; width:330px; height:330px; right:6%; top:-10px; border-radius:50%;
  background:conic-gradient(from 130deg, rgba(40,192,126,.5), rgba(245,166,35,.35), rgba(255,255,255,.14), rgba(40,192,126,.5)); filter:blur(2px); opacity:.5; animation:spin 26s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.mock{ position:relative; background:#fff; border-radius:20px; box-shadow:0 40px 80px -30px rgba(0,0,0,.5); overflow:hidden; }
.mock-top{ display:flex; gap:6px; padding:12px 14px; background:#eef3f0; }
.mock-top span{ width:11px; height:11px; border-radius:50%; background:#cdd8d1; }
.mock-top span:first-child{ background:#ff6b6b; } .mock-top span:nth-child(2){ background:#f5c14b; } .mock-top span:nth-child(3){ background:#3ddc84; }
.mock-body{ padding:20px; }
.mrow{ display:flex; gap:12px; margin-bottom:16px; }
.mkpi{ flex:1; background:var(--green-soft); border-radius:14px; padding:14px; text-align:center; }
.mkpi b{ font-family:var(--disp); font-size:26px; color:var(--green); display:block; }
.mkpi small{ color:var(--mut); font-size:11px; font-weight:700; }
.mbars{ display:flex; align-items:flex-end; gap:8px; height:100px; padding:10px; background:#f6faf7; border-radius:14px; margin-bottom:12px; }
.mbars i{ flex:1; height:var(--h); background:linear-gradient(180deg,var(--brand2),var(--brand)); border-radius:6px 6px 3px 3px; }
.mline{ font-size:12.5px; font-weight:700; color:var(--body); }
.float{ position:absolute; display:flex; align-items:center; gap:9px; background:#fff; color:var(--ink); border-radius:14px; padding:10px 13px; box-shadow:0 18px 36px -16px rgba(0,0,0,.4); font-size:19px; }
.float b{ display:block; font-size:13px; } .float small{ color:var(--mut); font-size:11px; font-weight:700; }
.float.f1{ left:-20px; top:30px; color:var(--brand); }
.float.f2{ right:-14px; bottom:-14px; color:var(--green); }

/* stats */
.stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin:-42px auto 0; position:relative; z-index:5;
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:26px 20px; box-shadow:var(--shadow-lg); max-width:1000px; }
.stats div{ text-align:center; }
.stats b{ font-family:var(--disp); font-size:32px; color:var(--brand); display:block; letter-spacing:-.5px; }
.stats small{ color:var(--mut); font-size:12.5px; font-weight:700; }

/* sections */
.section{ padding:70px 0; }
.section.alt{ background:linear-gradient(180deg,#fff,#f0f6f2); }
.sec-head{ text-align:center; max-width:680px; margin:0 auto 40px; }
.eyebrow{ display:inline-block; color:var(--brand); font-weight:800; font-size:12.5px; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px; }
.sec-head h2{ font-family:var(--disp); font-size:38px; color:var(--ink); margin:0 0 10px; letter-spacing:-.6px; }
.lead{ color:var(--body); font-size:16px; margin:0; }

/* suite */
.suite-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.prod-card{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:28px; box-shadow:var(--shadow); transition:.18s; }
.prod-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.prod-card.featured{ background:linear-gradient(180deg,#12563c,#0f3f2c); color:#fff; border-color:transparent; }
.prod-card.featured h3,.prod-card.featured p{ color:#fff; } .prod-card.featured p{ opacity:.9; }
.pc-ic{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-size:28px; margin-bottom:16px; background:var(--green-soft); }
.pc-ic.nucleus{ background:rgba(255,255,255,.14); }
.prod-card h3{ font-family:var(--disp); font-size:22px; color:var(--ink); margin:0 0 8px; }
.pin{ font-family:'Plus Jakarta Sans'; font-size:11px; font-weight:800; background:var(--amber); color:#3a2c07; padding:2px 9px; border-radius:20px; vertical-align:middle; }
.prod-card p{ color:var(--body); font-size:14.5px; line-height:1.55; margin:0 0 16px; }
.prod-card ul{ list-style:none; padding:0; margin:0 0 18px; }
.prod-card li{ padding:7px 0 7px 26px; position:relative; font-size:14px; font-weight:600; color:var(--ink); }
.prod-card.featured li{ color:#eafff4; }
.prod-card li::before{ content:'✓'; position:absolute; left:0; color:var(--brand2); font-weight:800; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tags i{ font-style:normal; font-size:11.5px; font-weight:700; background:var(--green-soft); color:var(--green); padding:4px 10px; border-radius:20px; }
.prod-card.featured .tags i{ background:rgba(255,255,255,.16); color:#fff; }

/* features */
.feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.feat{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:var(--shadow); transition:.16s; }
.feat:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.feat .fi{ width:48px; height:48px; border-radius:14px; background:var(--green-soft); display:grid; place-items:center; font-size:23px; margin-bottom:14px; }
.feat b{ display:block; color:var(--ink); font-size:15.5px; margin-bottom:5px; }
.feat p{ margin:0; font-size:13.5px; color:var(--body); line-height:1.5; }

/* platform flow */
.flow{ display:flex; align-items:stretch; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
.node{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px 18px; text-align:center; min-width:150px; box-shadow:var(--shadow); }
.node.core{ background:linear-gradient(180deg,#12563c,#0f3f2c); color:#fff; border-color:transparent; }
.node .ni{ width:46px; height:46px; border-radius:50%; background:var(--green-soft); display:grid; place-items:center; font-size:22px; margin:0 auto 10px; }
.node.core .ni{ background:rgba(255,255,255,.16); }
.node b{ display:block; color:var(--ink); font-size:14.5px; } .node.core b{ color:#fff; }
.node small{ color:var(--mut); font-size:12px; } .node.core small{ color:#bfe6d3; }
.arrow{ display:grid; place-items:center; color:var(--brand); font-size:24px; font-weight:800; }
.stack{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.stack span{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:8px 16px; font-size:13px; font-weight:700; color:var(--ink); }

/* portfolio */
.port-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.port{ background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); transition:.18s; }
.port:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.port-cover{ height:160px; display:grid; place-items:center; color:#fff; font-family:var(--disp); font-weight:700; font-size:20px; position:relative; }
.port-cover span{ position:relative; z-index:1; text-shadow:0 2px 12px rgba(0,0,0,.3); padding:0 16px; text-align:center; }
.port-cover.c1{ background:linear-gradient(135deg,#12a35f,#28c07e); }
.port-cover.c2{ background:linear-gradient(135deg,#12563c,#0f3f2c); }
.port-cover.c3{ background:linear-gradient(135deg,#0e7c9c,#1aa5c9); }
.port-body{ padding:22px; }
.port-body h3{ font-family:var(--disp); font-size:19px; color:var(--ink); margin:0 0 8px; }
.port-body p{ margin:0 0 14px; font-size:14px; color:var(--body); line-height:1.55; }

/* testimonial */
.quote{ background:linear-gradient(180deg,#12563c,#0f3f2c); color:#fff; border-radius:24px; padding:44px; text-align:center; max-width:840px; margin:0 auto; box-shadow:var(--shadow-lg); }
.quote .qstars{ color:var(--amber); font-size:18px; letter-spacing:2px; margin-bottom:14px; }
.quote p{ font-family:var(--disp); font-size:24px; line-height:1.5; margin:0 0 22px; font-weight:600; }
.quote .who{ display:inline-flex; align-items:center; gap:12px; }
.quote .who .av{ width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center; font-weight:800; }
.quote .who b{ display:block; font-size:14.5px; } .quote .who small{ opacity:.8; font-size:12.5px; }

/* cta */
.cta{ background:radial-gradient(120% 130% at 80% -20%, #1c6b49, var(--green) 55%, #0f3f2c); color:#fff; }
.cta-in{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:56px 24px; flex-wrap:wrap; }
.cta-in h2{ font-family:var(--disp); font-size:32px; margin:0 0 8px; }
.cta-in p{ margin:0; opacity:.9; }
.cta-form{ display:flex; gap:10px; flex-wrap:wrap; }
.cta-form input{ border:0; border-radius:28px; padding:14px 20px; font-size:14px; min-width:260px; outline:none; }

/* footer */
.foot{ background:#0d2a1e; color:#cfe0d7; padding:56px 0 24px; }
.foot-in{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.1); }
.foot-in p{ max-width:320px; font-size:14px; opacity:.75; margin-top:12px; }
.foot-cols{ display:flex; gap:54px; flex-wrap:wrap; }
.foot-cols h4{ color:#fff; font-size:14px; margin:0 0 12px; }
.foot-cols a{ display:block; font-size:13.5px; padding:5px 0; opacity:.8; }
.foot-cols a:hover{ color:var(--brand2); opacity:1; }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:20px; font-size:13px; opacity:.75; flex-wrap:wrap; }
.socials{ display:flex; gap:16px; }
.socials a:hover{ color:var(--brand2); }

/* reveal animation */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* responsive */
@media(max-width:960px){
  .hero-grid{ grid-template-columns:1fr; padding:50px 24px 70px; }
  .hero-visual{ display:none; }
  .hero-copy h1{ font-size:40px; }
  .stats{ grid-template-columns:repeat(3,1fr); row-gap:20px; margin-top:-30px; }
  .suite-grid,.feat-grid,.port-grid{ grid-template-columns:1fr 1fr; }
  .arrow{ transform:rotate(90deg); }
}
@media(max-width:640px){
  .links,.nav-cta{ display:none; } .burger{ display:block; }
  .nav.open .links{ display:flex; position:absolute; top:70px; left:0; right:0; flex-direction:column; background:#fff; padding:16px 24px; border-bottom:1px solid var(--line); gap:14px; }
  .sec-head h2{ font-size:28px; }
  .suite-grid,.feat-grid,.port-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .flow{ flex-direction:column; align-items:center; } .arrow{ transform:rotate(90deg); }
  .cta-in{ flex-direction:column; align-items:flex-start; }
}