body {

margin:0;
font-family: 'Segoe UI', Arial, sans-serif;
background: #0f172a;
color: #e2e8f0;

}

.container {

max-width:1100px;
margin:auto;
padding:20px;

}

header {

background:white;
border-bottom:1px solid #eee;

}

.header-container{

display:flex;
justify-content:space-between;
align-items:center;

}

.logo{

color: #111;
font-weight:bold;
font-size:22px;

}

nav a{

margin:0 10px;
text-decoration:none;
/* color: #e2e8f0; */
color: #333;

}

.whatsapp-btn{

background:#25D366;
color:white;
padding:8px 14px;
border-radius:6px;
text-decoration:none;

}

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25D366;
  color: white;
  padding: 15px;
  border-radius: 50%;
  font-size: 20px;
}

.hero {

background:#e2e8f0; /*#f5f7fa;*/
color:#111; /* 👈 ESSENCIAL  */
padding:80px 20px;
text-align:center;


}

.hero p {
  color:#0c0c0c;
}

.hero h1{

font-size:36px;

}

.hero-buttons{

margin-top:20px;

}

.btn-primary{

background:#25D366;
color:white;
padding:12px 20px;
border-radius:6px;
text-decoration:none;

}

.btn-secondary{


  margin-left:10px;
  padding:12px 20px;
  border-radius:6px;
  border:2px solid #0077ff;
  color:#0077ff;
  text-decoration:none;
  display:inline-block;


}

.btn-secondary:hover {
  background:#0077ff;
  color:white;
}

.problema{

background: #f1f5f9; /*white;*/
color:#111; 
padding:60px 20px;
text-align:center;
border-top: 1px solid #e5e7eb; /* 👈 separação sutil */



}

.highlight{

font-weight:bold;
margin-top:20px;

}

.produtos{

background:#f5f7fa;
color:#111;
padding:60px 20px;

}

.produtos h2 {
  color:#111;
}

.produtos-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;

}

.produto {
  background: #1e293b;
  color: #e2e8f0; 
  padding: 20px;
  border-radius: 12px;
  transition: 0.3s;
}

.produto h3 {
  color: #ffffff;
}

.produto p {
  color: #cbd5e1;
}


.produto:hover {
  transform: translateY(-5px);
}

.cta{

background:#0077ff;
color:white;
padding:60px 20px;
text-align:center;

}

.contato{

padding:60px 20px;
text-align:center;

}

form{

max-width:400px;
margin:auto;

}

input, textarea{

width:100%;
padding:10px;
margin-bottom:10px;

}

button{

background:#333; /* #0077ff;*/
color:white;
padding:12px;
border:none;
width:100%;

}

footer{

background:#111;
color:white;
text-align:center;
padding:30px;

}

.section-light {
  background: #ffffff;
  color: #111;
}

.section-dark {
  background: #0f172a;
  color: #e2e8f0;
}


@media (max-width: 768px) {

  .hero h1 {
    font-size: 24px;
  }

  nav {
    display: none;
  }

}