:root{
  --primary-color: rgb(153, 86, 152);
  --secondary-color: rgb(187, 143, 186);
  --tertiary-color: rgb(221, 199, 221);
  --white-color: rgb(255, 255, 255);
  --dark-color: #333;
  --light-gray: #f5f5f5;
  --medium-gray: #e0e0e0;
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 70px;
  --sidebar-mobile-width: 200px;
  --topbar-height: 60px;
  --transition-speed: 0.3s;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial;
  color:var(--dark-color);
  background:var(--white-color);
  line-height:1.6;
}

img{max-width:100%;display:block}
.container{width:min(1120px,92%);margin-inline:auto}

/* NAV */
.nav{
  position:sticky; top:0; z-index:100;
  height:var(--topbar-height);
  background:rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom:1px solid var(--medium-gray);
}
.nav-inner{height:100%; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; gap:.6rem; align-items:center; text-decoration:none; color:inherit; font-weight:800; letter-spacing:.2px}
.brand img{width:34px;height:34px}
.menu{display:flex; align-items:center; gap:1rem}
.menu a{color:inherit; text-decoration:none; font-weight:600}
.menu a:hover{color:var(--primary-color)}
.hamb{display:none; background:none; border:0; cursor:pointer}
.hamb span{display:block; width:24px; height:2px; background:#333; margin:5px 0}

/* BUTTONS */
.btn{display:inline-flex; align-items:center; justify-content:center; padding:.8rem 1.1rem; border-radius:999px; font-weight:700; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:all var(--transition-speed) ease}

.btn-primary {
  background: var(--primary-color);
  color: var(--white-color);
  border: 1px solid var(--primary-color);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: var(--white-color);
  color: var(--primary-color);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(153,86,152,.25);
}


.btn-outline{background:transparent; color:var(--primary-color); border-color:var(--primary-color)}
.btn-outline:hover{background:var(--tertiary-color)}

/* HERO */
.hero{
  background:linear-gradient(180deg, var(--tertiary-color), #fff);
  padding: calc(var(--topbar-height) + 3rem) 0 4rem;
}
.hero-grid{display:grid; grid-template-columns: 1.2fr 1fr; gap:2rem; align-items:center}
.hero h1{font-size:clamp(2rem, 3.2vw + 1rem, 3.2rem); margin:0 0 1rem}
.hero .accent{color:var(--primary-color)}
.hero p{margin:0 0 1rem; font-size:1.08rem}
.ctas{display:flex; gap:.8rem; margin-top:1rem}
.trust{display:flex; gap:1rem; flex-wrap:wrap; padding:0; margin:1rem 0 0; list-style:none; color:#666; font-size:.95rem}

.card{background:white; border:1px solid var(--medium-gray); border-radius:16px; padding:1.2rem; box-shadow:0 12px 36px rgba(0,0,0,.06)}
.mock.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem}
.kpi{background:var(--light-gray); padding:.8rem; border-radius:10px; text-align:center}
.kpi-label{display:block; color:#666; font-size:.82rem}
.kpi-value{font-weight:800; color:var(--primary-color); font-size:1.2rem}
.spark{height:64px; margin-top:1rem; background:linear-gradient(90deg, rgba(153,86,152,.18), rgba(153,86,152,.06)); border-radius:10px}
.muted{color:#777; font-size:.85rem; margin:.4rem 0 0}

/* LOGOS */
.logos{padding:2.6rem 0}
.logos-lead{text-align:center; color:#666; margin:0 0 1rem}
.logos-row{display:grid; grid-template-columns: repeat(6, 1fr); gap:.6rem}
.logo-pill{border:1px solid var(--medium-gray); background:white; border-radius:999px; padding:.6rem .8rem; text-align:center; font-weight:700}

/* BENEFITS */
.benefits{padding:3.6rem 0}
.benefits .sub{color:#666; text-align:center; margin:0 0 2rem}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem}
.rise{box-shadow:0 14px 40px rgba(153,86,152,.08)}
.outline{border:1px solid var(--medium-gray)}

/* PRODUCT */
.product{padding:3.6rem 0}
.product.alt{background:var(--light-gray)}
.icon{font-size:1.6rem}
.integrations{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.2rem}
.pill{border:1px dashed var(--medium-gray); border-radius:999px; padding:.4rem .8rem; background:white; font-weight:700}

/* FAQ */
.faq{padding:3.6rem 0}
.faq-items details{background:white; border:1px solid var(--medium-gray); border-radius:12px; padding:.9rem 1rem; margin-bottom:.6rem}
.faq-items summary{cursor:pointer; font-weight:800}

/* CTA */
.cta{background:linear-gradient(90deg, var(--primary-color), var(--secondary-color)); color:white; padding:3rem 0}
.cta-inner{display:grid; grid-template-columns: 1.2fr 1fr; gap:1rem; align-items:center}
.cta-form{display:grid; grid-template-columns: 1fr 1fr; gap:.6rem}
.cta-form input{padding:.9rem 1rem; border-radius:12px; border:none}
.cta-form .btn{grid-column: span 2}
.form-status{min-height: 20px}

/* FOOTER */
.footer{background:#111; color:#ddd; padding:2rem 0}
.footer-inner{display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:1rem}
.foot-brand{display:flex; gap:.6rem; align-items:center}
.foot-brand img{width:30px;height:30px}
.foot-nav a{color:#ddd; text-decoration:none; margin-right:.8rem}
.foot-nav a:hover{color:#fff}

.whatsapp {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
  transition: transform .2s ease;
}

.whatsapp:hover {
  transform: scale(1.05);
}



/* REVEAL ANIMATIONS */
.reveal{opacity:0; transform: translateY(12px); transition: all .6s ease}
.reveal.visible{opacity:1; transform:none}

/* HEADINGS */
h2{font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem); margin:0 0 .6rem; text-align:center}

/* RESPONSIVE */
@media (max-width: 980px){
  .menu{
    position: fixed; right:0; top:var(--topbar-height);
    height: calc(100vh - var(--topbar-height));
    width: 76vw; max-width:320px;
    background:white; border-left:1px solid var(--medium-gray);
    transform:translateX(100%); transition: transform var(--transition-speed) ease;
    display:grid; align-content:start; padding:1rem
  }
  .menu.open{transform:translateX(0)}
  .hamb{display:block}
  .hero-grid{grid-template-columns:1fr}
  .logos-row{grid-template-columns: repeat(3, 1fr)}
  .grid-3{grid-template-columns:1fr}
  .cta-inner{grid-template-columns:1fr}
  .cta-form{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
}

.logos-carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.logos-track {
  display: flex;
  gap: 2rem;
  animation: scroll 20s linear infinite;
}

.logos-track img {
  max-height: 60px;
  object-fit: contain;
  background: white;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--medium-gray);
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.integrations img[alt="SAP"] {
  width: 60px;   /* tamanho só para o SAP */
  height: auto;
}

.integrations img[alt="totvus"] {
  width: 90px;   /* tamanho só para o Totvus */
  height: auto;
}
.integrations img[alt="PowerBi"] {
  width: 60px;   /* tamanho só para o Totvus */
  height: auto;
}

.nav .brand span {
  color: #993699;  /* roxo */
  font-weight: bold;
  font-size: 30px;
}