:root{

  --accent:#1b3521;        /* COLORE PRINCIPALE */

  --accent-dark:#142a1a;

  --bg:#f8fafc;

  --card:#ffffff;

  --text:#0f172a;

  --muted:#64748b;

}



*{margin:0;padding:0;box-sizing:border-box}



body{

  font-family: Inter, system-ui, sans-serif;

  background:var(--bg);

  color:var(--text);

  line-height:1.6;

}



/* HEADER */

header{

  position:sticky;

  top:0;

  z-index:100;

  background:#ffffff;

  border-bottom:1px solid #e5e7eb;

  padding:18px 26px;

  display:flex;

  justify-content:space-between;

  align-items:center;

}



header img{

  height:80px;

}



.header-btn{

  background:var(--accent);

  color:#fff;

  padding:14px 28px;

  border-radius:10px;

  font-weight:800;

  text-decoration:none;

}



/* HERO */

.hero{

  max-width:1200px;

  margin:auto;

  padding:90px 24px;

  display:grid;

  gap:60px;

}



.hero h1{

  font-size:clamp(2.4rem,4vw,3.4rem);

  line-height:1.2;

}



.hero p{

  color:var(--muted);

  font-size:1.15rem;

  margin-top:18px;

  max-width:620px;

}



.hero .cta{

  margin-top:34px;

}



.btn{

  background:var(--accent);

  color:#fff;

  padding:18px 42px;

  border-radius:12px;

  font-weight:900;

  text-decoration:none;

  display:inline-block;

}



/* PRODUCT IMAGE */

.product img{

  width:100%;

  border-radius:20px;

  box-shadow:0 40px 100px rgba(0,0,0,0.15);

}



/* SECTION */

.section{

  max-width:1200px;

  margin:auto;

  padding:90px 24px;

}



.section h2{

  font-size:2.4rem;

  margin-bottom:14px;

}



.section p{

  color:var(--muted);

  max-width:720px;

  margin-bottom:50px;

}



/* PROBLEMS */

.problems{

  display:grid;

  gap:26px;

}



.problem{

  background:var(--card);

  padding:28px;

  border-radius:16px;

  border-left:6px solid var(--accent);

}



/* FEATURES */

.features{

  display:grid;

  gap:30px;

}



.feature{

  background:var(--card);

  padding:34px;

  border-radius:18px;

}



.feature h3{

  margin-bottom:10px;

}



/* SCREENSHOTS */

.screens{

  display:grid;

  gap:24px;

}



.screens img{

  width:100%;

  border-radius:16px;

  border:1px solid #e5e7eb;

}



/* PRICING */

.pricing{

  display:grid;

  gap:30px;

}



.plan{

  background:var(--card);

  padding:40px;

  border-radius:20px;

  border:2px solid #e5e7eb;

}



.plan.featured{

  border-color:var(--accent);

}



.plan h3{

  font-size:1.6rem;

}



.price{

  font-size:2.8rem;

  font-weight:900;

  color:var(--accent);

  margin:20px 0;

}



.plan ul{

  list-style:none;

  margin-bottom:30px;

}



.plan li{

  margin-bottom:10px;

}



/* FINAL CTA */

.final{

  background:linear-gradient(180deg,#1b3521,#142a1a);

  color:#fff;

  text-align:center;

  padding:110px 24px;

}



.final h2{

  font-size:2.6rem;

}



.final p{

  opacity:0.9;

  margin-top:14px;

}



/* FOOTER */

footer{

  background:#020617;

  color:#94a3b8;

  text-align:center;

  padding:26px;

}

/* CONTACT FORM */

.contact-form{

  max-width:480px;

  margin:auto;

  background:var(--card);

  padding:40px;

  border-radius:20px;

  box-shadow:0 20px 50px rgba(0,0,0,0.08);

}



.contact-form input,

.contact-form select,

.contact-form textarea{

  width:100%;

  padding:14px 16px;

  margin-bottom:14px;

  border-radius:10px;

  border:1px solid #d1d5db;

  font-size:1rem;

}



.contact-form textarea{

  min-height:120px;

  resize:vertical;

}



.contact-form button{

  width:100%;

  background:var(--accent);

  color:#fff;

  border:none;

  padding:16px;

  border-radius:12px;

  font-size:1.05rem;

  font-weight:900;

  cursor:pointer;

}



.contact-form button:hover{

  background:var(--accent-dark);

}



/* DESKTOP */

@media(min-width:900px){

  .hero{

    grid-template-columns:1.1fr 0.9fr;

    align-items:center;

  }



  .problems,

  .features,

  .pricing{

    grid-template-columns:repeat(3,1fr);

  }



  .screens{

    grid-template-columns:repeat(3,1fr);

  }

}