/* ========== RESET & DESIGN TOKENS ========== */
*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{margin:0;background:#00120c;color:#f4fff7;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.45}

a{color:inherit;text-decoration:none}

.wrap{max-width:1180px;margin:auto;padding:0 28px}

.green{color:#54e64f}

.pill{display:inline-block;border:1px solid #257b3b;border-radius:999px;padding:6px 13px;color:#64ec62;font-size:10px;text-transform:uppercase;letter-spacing:.08em}

.btn{display:inline-flex;gap:16px;align-items:center;padding:14px 22px;border-radius:999px;border:1px solid #3e8d4a;font-size:13px;font-weight:700}

.btn.primary{background:linear-gradient(135deg,#91ff75,#42d74d);color:#05220d;box-shadow:0 0 28px #39e65b44}

.card{border:1px solid #174f35;border-radius:20px;background:linear-gradient(145deg,#071d14,#03130d);box-shadow:inset 0 1px #ffffff08}

/* ========== NAVIGATION ========== */
nav{height:70px;display:flex;align-items:center;justify-content:space-between}

.logo{font-size:19px;font-weight:800}

.logo b{color:#55e452;font-size:26px;margin-right:6px}

.nav{display:flex;gap:34px;font-size:12px}
/* ========== HERO ========== */
.hero{padding:55px 0 65px;background:radial-gradient(circle at 83% 2%,#1b8d3c55,transparent 28%),radial-gradient(circle at 28% 28%,#06351e55,transparent 34%)}

.hero-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:65px;align-items:center}

h1{font-size:62px;line-height:.98;letter-spacing:-.055em;margin:24px 0 18px}

.lead{color:#b7c6bc;max-width:530px;font-size:15px}

.checks{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}

.check{border:1px solid #174d32;border-radius:999px;padding:8px 12px;font-size:11px}

.check:before{content:'✓';color:#54e64f;margin-right:7px}

.actions{display:flex;gap:18px}

.dashboard{padding:18px;min-height:390px;transform:perspective(1200px) rotateY(-2deg);box-shadow:0 0 45px #4cff6c22}

.dash-top{display:flex;justify-content:space-between;margin-bottom:16px}

.dash-body{display:grid;grid-template-columns:125px 1fr;gap:15px}

.sidebar{padding:10px;border-right:1px solid #17452f;color:#a9b9af;font-size:11px}

.sidebar div{padding:9px}

.sidebar div:first-child{background:#163c29;border-radius:8px;color:white}

.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}

.metric{padding:16px;border:1px solid #153e2b;border-radius:12px;background:#0a2117}

.metric b{font-size:24px}

.chart{height:155px;margin-top:12px;padding:15px;position:relative;overflow:hidden}

.chart:after{content:'';position:absolute;left:20px;right:20px;bottom:35px;height:70px;border-bottom:2px solid #55e452;clip-path:polygon(0 80%,12% 65%,22% 75%,33% 47%,44% 62%,54% 38%,64% 48%,76% 23%,87% 34%,100% 0,100% 100%,0 100%);background:#48e95a18}
/* ========== SHARED SECTIONS ========== */
.section{padding:45px 0}

.center{text-align:center}

.section h2{font-size:34px;line-height:1.05;margin:12px 0}

.sub{color:#8fa298;font-size:12px}
/* ========== PROBLEM CARDS ========== */
.problem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}

.problem{padding:22px;min-height:160px}

.icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#123c25;color:#68ef64;border:1px solid #2c7540;margin-bottom:18px}

.problem h3{font-size:15px;margin:0 0 8px}

.problem p{font-size:12px;color:#a8b7ad;margin:0}
/* ========== CONNECTED PLATFORM ========== */
.platform{margin:25px auto;padding:32px;display:grid;grid-template-columns:1.05fr .9fr;gap:60px;min-height:350px;background:radial-gradient(circle at 25% 50%,#168d3c55,transparent 28%),linear-gradient(145deg,#032015,#00150e)}

.integration{position:relative;min-height:280px}

.ncore{position:absolute;left:31%;top:50%;transform:translate(-50%,-50%);width:90px;height:90px;border-radius:20px;background:#75f467;color:#073217;display:grid;place-items:center;font-size:38px;font-weight:900;box-shadow:0 0 55px #54ed6266}

.app{position:absolute;width:55px;height:55px;border-radius:12px;background:#f3f5f4;color:#111;display:grid;place-items:center;font-weight:800}

.a1{left:5%;top:15%}

.a2{left:1%;top:48%}

.a3{left:13%;bottom:0}

.a4{left:43%;bottom:2%;background:#4646e8;color:white}

.flow{position:absolute;left:53%;top:15%;display:grid;gap:11px}

.flow span{border:1px solid #225d3b;border-radius:999px;padding:9px 20px;font-size:12px;min-width:135px}

.flow span:before{content:'✓';color:#57eb55;margin-right:10px}

.platform-copy{align-self:center}

.platform-copy h2{font-size:37px}

.bullets{font-size:12px;line-height:1.9;color:#b4c4ba}

.bullets div:before{content:'●';color:#53e754;margin-right:9px}
/* ========== SOLUTIONS ========== */
.solutions{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:25px}

.solution{padding:24px;min-height:220px;position:relative}

.solution h3{margin:0 0 4px}

.solution p,.solution li{font-size:11px;color:#aebcb3}

.solution ul{columns:2;padding-left:18px}
/* ========== PROCESS ========== */
.process{padding:45px 0}

.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:25px}

.step{padding:13px 10px;border-bottom:1px solid #2b713e;text-align:left;min-height:120px}

.step b{color:#57e955}

.step h3{font-size:12px;margin:8px 0}

.step p{font-size:9px;color:#a3b2a8}
/* ========== RESULTS ========== */
.results{display:grid;grid-template-columns:1fr 1.1fr;gap:30px;padding:30px}

.stats{display:flex;gap:45px;margin-top:28px}

.stat b{font-size:28px;color:#a5f59c}

.stat small{display:block;color:#a4b3a9;font-size:9px;max-width:95px}

.quote{padding:28px;border-left:1px solid #1f5537}

.quote .mark{font-size:38px;color:#59e857}

.quote p{font-size:12px;color:#b6c5bb}
/* ========== CTA & FOOTER ========== */
.footer-cta{display:flex;justify-content:space-between;align-items:center;padding:34px 0 60px}

footer{border-top:1px solid #123524;padding:25px 0;color:#82948a;font-size:11px}
/* ========== RESPONSIVE ========== */
@media(max-width:850px){.nav{display:none}

.hero-grid,.platform,.solutions,.results{grid-template-columns:1fr}

.problem-grid{grid-template-columns:1fr 1fr}

.steps{grid-template-columns:repeat(2,1fr)}

h1{font-size:46px}

.dashboard{transform:none}

.platform-copy{padding-top:10px}

.footer-cta{display:block}

.footer-cta .btn{margin-top:20px}}

@media(max-width:520px){.problem-grid{grid-template-columns:1fr}

.actions{flex-direction:column;align-items:flex-start}

.dash-body{grid-template-columns:1fr}

.sidebar{display:none}

.metrics{grid-template-columns:1fr}

.steps{grid-template-columns:1fr}

.stats{gap:20px}

.wrap{padding:0 18px}}