:root{
  --bg:#0f172a; --card:#0b1220; --text:#e5e7eb; --muted:#94a3b8;
  --primary:#22d3ee; --secondary:#6366f1; --ring:rgba(99,102,241,.35);
  --radius:16px; --maxw:1180px;
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; color:var(--text);
  background: radial-gradient(1100px 500px at 80% -10%, rgba(34,211,238,.10), transparent 60%),
              radial-gradient(900px 480px at 10% 0%, rgba(99,102,241,.10), transparent 50%),
              var(--bg);
  line-height:1.6;
}
a{color:var(--primary); text-decoration:none} a:hover{text-decoration:underline}

/* HERO (imagem notebook) */
.hero{
  min-height:78vh; display:grid; grid-template-rows:auto 1fr; border-bottom:1px solid rgba(255,255,255,.06);
  background:
    linear-gradient(rgba(15,23,42,.70), rgba(15,23,42,.85)),
    url("https://images.unsplash.com/photo-1517336714731-489689fd1ca8?q=80&w=2070&auto=format&fit=crop");
  background-size:cover; background-position:center;
}
.nav{max-width:var(--maxw); margin:0 auto; padding:18px 20px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; gap:12px; align-items:center; font-weight:800; letter-spacing:.3px}
.brand-logo{width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#0b1220; font-weight:900; box-shadow:0 6px 20px var(--ring)}
.accent{color:var(--primary)}
.btn{display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px;
  background:linear-gradient(135deg,var(--secondary),var(--primary)); color:#0b1220; font-weight:700; box-shadow:0 10px 30px var(--ring)}
.btn:hover{filter:brightness(1.07)}

.hero-inner{max-width:var(--maxw); margin:40px auto 0; padding:0 20px 60px; display:grid; gap:22px}
.kicker{color:var(--primary); font-weight:700; letter-spacing:.2em; text-transform:uppercase; font-size:.82rem}
h1{font-size:clamp(2.1rem,5vw,3.1rem); line-height:1.1; margin:4px 0 8px; font-weight:800}
.lead{font-size:clamp(1rem,1.6vw,1.15rem); color:#d1d5db; max-width:68ch}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.primary,.ghost{padding:12px 18px; border-radius:12px; font-weight:700; border:1px solid transparent; text-decoration:none}
.primary{background:linear-gradient(135deg,var(--secondary),var(--primary)); color:#0b1220; box-shadow:0 14px 40px var(--ring)}
.ghost{color:var(--text); border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.03)} .ghost:hover{background:rgba(255,255,255,.06)}

/* Sections */
.section{padding:80px 20px}
.container{max-width:var(--maxw); margin:0 auto}
.center{text-align:center} .muted{color:#cbd5e1; margin:6px 0 28px}

.cards{display:grid; grid-template-columns:repeat(12,1fr); gap:22px}
.card{grid-column:span 12; background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:22px; box-shadow:0 12px 30px rgba(0,0,0,.35);
  transition:transform .2s ease, border-color .2s ease}
.card:hover{transform:translateY(-4px); border-color:rgba(255,255,255,.18)}
.card h3{margin:10px 0 8px; font-size:1.2rem} .card p{color:#cbd5e1}
.card-icon{width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:rgba(99,102,241,.15); border:1px solid rgba(255,255,255,.10)}
@media(min-width:720px){.card{grid-column:span 4}}

/* ===== Carrossel de Clientes ===== */
.carousel{
  position:relative;
  overflow:hidden;
  padding: 10px 40px;            /* espaço para os botões nas laterais */
  margin-top: 20px;
}
.car-track{
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-behavior:smooth;
}
.car-track::-webkit-scrollbar{ display:none; }

.car-item{
  flex: 0 0 82%;
  max-width: 82%;
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  scroll-snap-align: start;
  text-decoration:none;
}
@media (min-width: 720px){
  .car-item{ flex-basis: 31%; max-width:31%; }
}
@media (min-width: 1024px){
  .car-item{ flex-basis: 23%; max-width:23%; }
}
.car-item img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
  filter:saturate(1.05) contrast(1.02);
}
.car-caption{
  display:block;
  text-align:center;
  padding:10px 8px;
  color:#e5e7eb;
  font-weight:700;
  background: rgba(0,0,0,.25);
}

.car-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px; height:36px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color:#e5e7eb;
  font-size:22px;
  line-height:34px;
  text-align:center;
  cursor:pointer;
  transition:.2s;
}
.car-btn:hover{ background: rgba(255,255,255,.18); }
.car-btn.prev{ left:6px; }
.car-btn.next{ right:6px; }

/* Form */
.form-card{max-width:880px; margin:0 auto; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:24px; box-shadow:0 12px 30px rgba(0,0,0,.35)}
.grid{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:720px){.grid{grid-template-columns:1fr 1fr 1fr}}
.field{display:flex; flex-direction:column}
label{font-weight:700; margin-bottom:8px; color:#e2e8f0}
input,textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:var(--text)}
input::placeholder,textarea::placeholder{color:#94a3b8}
input:focus,textarea:focus{outline:none; border-color:rgba(99,102,241,.55); box-shadow:0 0 0 4px var(--ring)}
.hidden{position:absolute; left:-9999px}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px}
.btn-primary,.btn-ghost{cursor:pointer; border:1px solid transparent; border-radius:12px; padding:12px 16px; font-weight:700; display:inline-flex; align-items:center; gap:8px; text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--secondary),var(--primary)); color:#0b1220; box-shadow:0 14px 40px var(--ring)}
.btn-ghost{color:var(--text); background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.14)} .btn-ghost:hover{background:rgba(255,255,255,.06)}
.success-message{display:none; margin-top:14px; background:rgba(34,211,238,.18); border:1px solid var(--primary); color:#a5f3fc; padding:14px; border-radius:10px; text-align:center; font-weight:700}

.btn-whatsapp {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:12px 18px;
  border-radius:12px;
  font-weight:700;
  text-decoration:none;
  border:none;
  cursor:pointer;
  background:#25D366;
  color:#0b1220;
  border:1px solid #1EBE5B;
  box-shadow:0 8px 25px rgba(37,211,102,.25);
  transition:0.3s ease;
}
.btn-whatsapp:hover {
  filter:brightness(1.07);
  box-shadow:0 10px 30px rgba(37,211,102,.35);
}

/* Footer */
.footer{padding:40px 20px 70px; color:#cbd5e1; background:#0b1220; border-top:1px solid rgba(255,255,255,.08)}
.footer-grid{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
}
.contact a{display:inline-flex; align-items:center; gap:8px; margin-right:14px}
.small{font-size:.92rem; color:#94a3b8}