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

body{
  font-family:Arial,sans-serif;
  background:#f3f4f6;
  color:#111827;
}

/* NAVBAR */

nav{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:14px 30px;

  background:white;
}

.logo{

  display:flex;

  align-items:center;

  gap:12px;
}

.logo-box{

  width:44px;

  height:44px;

  background:#5b3df5;

  border-radius:12px;

  display:flex;

  align-items:center;

  justify-content:center;

  color:white;

  font-weight:bold;

  font-size:20px;
}

.logo h3{
  font-size:16px;
}

.logo span{

  color:#6b7280;

  font-size:13px;
}

.menu{

  display:flex;

  gap:30px;

  align-items:center;
}

.menu a{

  text-decoration:none;

  color:#111827;

  font-size:15px;
}

.btn-nav{

  background:#5b3df5;

  color:white !important;

  padding:12px 22px;

  border-radius:12px;
}

/* HERO */

header{

  background:
  linear-gradient(
    90deg,
    #5b3df5,
    #5d8cff
  );

  color:white;

  text-align:center;

  padding:90px 20px;
}

.hero{

  max-width:1000px;

  margin:auto;
}

.hero h1{

  font-size:48px;

  line-height:1.2;

  margin-bottom:25px;

  font-weight:800;
}

.hero p{

  font-size:18px;

  margin-bottom:40px;
}

.buttons{

  display:flex;

  justify-content:center;

  gap:18px;

  flex-wrap:wrap;
}

.btn-white{

  background:white;

  color:#5b3df5;

  text-decoration:none;

  padding:16px 30px;

  border-radius:16px;

  font-weight:bold;
}

.btn-transparent{

  border:1px solid rgba(255,255,255,.5);

  color:white;

  text-decoration:none;

  padding:16px 30px;

  border-radius:16px;
}

/* CARDS */

.cards{

  max-width:1100px;

  margin:auto;

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(300px,1fr));

  gap:25px;

  padding:70px 20px;
}

.card{

  background:white;

  padding:35px;

  border-radius:22px;
}

.card h2{

  margin-bottom:25px;

  font-size:24px;
}

.card p,
.card li{

  color:#6b7280;

  line-height:1.8;

  font-size:15px;
}

.card ul{
  padding-left:20px;
}

/* CONTATO */

.phone-box{

  display:flex;

  align-items:center;

  gap:15px;

  border:1px solid #e5e7eb;

  border-radius:14px;

  padding:14px 16px;

  margin-bottom:20px;

  background:#fafafa;
}

.phone-icon{

  width:36px;

  height:36px;

  border-radius:12px;

  background:#f3e8ff;

  display:flex;

  align-items:center;

  justify-content:center;
}

.phone-number{

  font-size:16px;

  color:#111827;
}

.zap-btn{

  display:inline-flex;

  align-items:center;

  gap:10px;

  text-decoration:none;

  color:#111827;

  font-weight:600;
}

/* DADOS */

.dados{

  background:#e5e7eb;

  padding:70px 20px;
}

.dados h2{

  max-width:1100px;

  margin:auto;

  margin-bottom:30px;

  font-size:28px;
}

.dados-box{

  max-width:1100px;

  margin:auto;

  background:white;

  padding:40px;

  border-radius:22px;

  display:grid;

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

  gap:30px;
}

.dados-box span{

  color:#6b7280;

  display:block;

  margin-bottom:10px;

  font-size:13px;
}

.dados-box strong{

  font-size:18px;

  line-height:1.5;
}