*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,sans-serif}
body{color:#1f2937}

/* NAVBAR */
.navbar{
  display:flex;justify-content:space-between;
  padding:20px 8%;align-items:center
}
.logo{font-size:22px;font-weight:bold}
.logo span{color:#16a34a}
nav a{margin-left:20px;text-decoration:none;color:#374151}

.btn{
  background:#16a34a;color:#fff;
  padding:10px 18px;border-radius:8px;
  display:inline-block
}
.btn.outline{
  background:transparent;color:#16a34a;
  border:2px solid #16a34a
}

/* HERO */
.hero{
  display:grid;grid-template-columns:1fr 1fr;
  padding:80px 8%;gap:40px;align-items:center
}
.hero-text h1{font-size:42px;margin-bottom:20px}
.hero-text p{color:#6b7280;margin-bottom:30px}
.hero-actions{display:flex;gap:15px}

/* SLIDER */
.slider{
  overflow:hidden;border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.1)
}
.slides{
  display:flex;width:300%;
  animation:slide 15s infinite
}
.slides img{width:100%;object-fit:cover}

@keyframes slide{
  0%{transform:translateX(0)}
  33%{transform:translateX(-100%)}
  66%{transform:translateX(-200%)}
  100%{transform:translateX(0)}
}

/* SECTIONS */
.section{padding:80px 8%}
.light{background:#f9fafb}
.section h2{text-align:center;margin-bottom:10px}
.sub{text-align:center;color:#6b7280;margin-bottom:40px}

/* CARDS */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px
}
.card{
  background:#fff;padding:30px;border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  transition:.3s
}

/* HOVER IMAGE CARD */
.hover-card{
  position:relative;overflow:hidden;cursor:pointer
}
.card-content{
  position:relative;z-index:2;
  transition:transform .3s,color .3s
}
.card-image{
  position:absolute;inset:0;
  opacity:0;transform:translateY(100%);
  transition:.4s ease
}
.card-image img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.75)
}
.hover-card:hover .card-image{
  opacity:1;transform:translateY(0)
}
.hover-card:hover .card-content{
  transform:translateY(-10px);color:#fff
}
.hover-card:hover h3,
.hover-card:hover p{color:#fff}

/* BENEFITS */
.benefits{
  max-width:600px;margin:30px auto;
  list-style:none;text-align:center
}
.benefits li{margin:10px 0}

/* BRANDS */
.brand-row{
  display:flex;justify-content:center;
  gap:30px;font-weight:600
}

/* GALLERY */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px
}
.gallery img{width:100%;border-radius:14px}

/* CTA */
.cta{
  background:#16a34a;color:#fff;
  text-align:center;padding:80px 8%
}
.contact-form{
  max-width:400px;margin:30px auto;
  display:flex;flex-direction:column;gap:15px
}
.contact-form input{
  padding:12px;border-radius:8px;border:none
}
.btn.white{background:#fff;color:#16a34a}

/* FOOTER */
footer{
  text-align:center;padding:20px;
  color:#6b7280
}

/* MOBILE */
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
}
.option-section{margin-top:60px}
.option-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  margin-top:20px
}
.option-card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  padding:20px;
  cursor:pointer;
  transition:.3s;
  text-align:center
}
.option-card img{
  width:100%;
  height:150px;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:10px
}
.option-card:hover,
.option-card.active{
  transform:translateY(-6px);
  border:2px solid #16a34a
}

.summary{
  margin-top:60px;
  background:#f9fafb;
  padding:30px;
  border-radius:16px
}