:root{
  --bg:#0b1020;
  --muted:#a7b0d6;
  --text:#eaf0ff;
  --brand:#0b3d91;
  --border:rgba(255,255,255,.10);
  --shadow: 0 18px 40px rgba(0,0,0,.35);
  --radius: 18px;
  --max: 1120px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:
radial-gradient(1200px 900px at 10% 0%, rgba(11,61,145,.35), transparent 60%),
radial-gradient(900px 700px at 100% 10%, rgba(255,122,24,.20), transparent 55%),
var(--bg);
color:var(--text);}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:22px 16px;}

/* NAV */
.nav{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0; position:sticky; top:0; backdrop-filter: blur(10px); background:rgba(11,16,32,.55); z-index:5; border-bottom:1px solid rgba(255,255,255,.06); flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:16px;}
.brand img{
  height:74px;
  width:auto;
  border-radius:16px;
  box-shadow: 0 14px 34px rgba(26,99,255,.28);
  border:1px solid rgba(255,255,255,.10)
}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.03); color:var(--muted); font-size:13px; white-space:nowrap}
.navlinks{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; align-items:center}
.navlinks a{padding:9px 10px; border-radius:12px; color:var(--muted); border:1px solid transparent}
.navlinks a:hover{border-color:var(--border); color:var(--text); background:rgba(255,255,255,.03)}

/* Mobile menu button (hamburger) */
.menuBtn{
  display:none;
  width:46px; height:46px;
  padding:0;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  position:relative;
}
.menuBtn::before, .menuBtn::after, .menuBtn span{
  content:"";
  position:absolute;
  left:12px; right:12px;
  height:2px;
  background:rgba(234,240,255,.92);
  border-radius:2px;
}
.menuBtn::before{top:16px}
.menuBtn span{top:22px}
.menuBtn::after{top:28px}

@media (max-width: 860px){
  .menuBtn{display:inline-flex; align-items:center; justify-content:center}
  .navlinks{display:none; width:100%; gap:10px; padding:12px 0 8px}
  .navlinks.open{display:flex; flex-direction:column; align-items:stretch}
  .navlinks a{
    padding:12px 12px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.02);
  }
  .brand img{height:78px}
}

/* HERO */
.hero{display:grid; grid-template-columns: 1.08fr .92fr; gap:18px; align-items:center; padding:16px 0 10px;}
@media (max-width: 900px){ .hero{grid-template-columns:1fr} }
.h1{font-size:40px; line-height:1.06; margin:0 0 12px; letter-spacing:-.7px;}
@media (max-width: 520px){ .h1{font-size:32px} }
.p{color:var(--muted); font-size:16px; line-height:1.62; margin:0 0 14px;}
.ctas{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 14px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.03); color:var(--text); font-weight:800; cursor:pointer}
.btn.primary{background:linear-gradient(135deg, var(--brand), #1a63ff); border-color:rgba(255,255,255,.10); box-shadow: 0 12px 30px rgba(26,99,255,.25)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.secondary:hover{background:rgba(255,255,255,.06)}

.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);}
.heroCard{padding:16px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
@media (max-width: 900px){ .grid3{grid-template-columns:1fr} }
.kpi{padding:14px}
.kpi .t{font-weight:950; font-size:20px; margin:0}
.kpi .d{color:var(--muted); margin:6px 0 0; font-size:13px; line-height:1.4}

.section{padding:22px 0}
.h2{font-size:24px; margin:0 0 10px}
.h3{font-size:16px; margin:0 0 8px}
.list{margin:0; padding-left:18px; color:var(--muted); line-height:1.7}
.split{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width: 900px){ .split{grid-template-columns:1fr} }
.pill{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:999px; padding:8px 10px; background:rgba(255,255,255,.03); color:var(--muted); font-size:13px}

.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width: 900px){ .pricing{grid-template-columns:1fr} }
.plan{padding:16px; position:relative; overflow:hidden}
.plan .price{font-size:26px; font-weight:950; margin:8px 0 10px}
.plan .name{font-weight:950; font-size:18px; margin:0}
.plan .note{color:var(--muted); font-size:13px; margin:0 0 10px; line-height:1.5}
.plan ul{margin:0; padding-left:18px; color:var(--muted); line-height:1.7}
.tag{position:absolute; top:14px; right:14px; background:rgba(255,122,24,.16); border:1px solid rgba(255,122,24,.30); color:#ffd8bf; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:900}

.hr{height:1px; background:var(--border); margin:14px 0}
.diagram,.mockup{width:100%; height:auto; border-radius:16px; border:1px solid var(--border); background:rgba(0,0,0,.15)}

.faq details{border:1px solid var(--border); border-radius:16px; padding:12px 14px; background:rgba(255,255,255,.02)}
.faq details+details{margin-top:10px}
.faq summary{cursor:pointer; font-weight:900}
.footer{padding:22px 0 28px; color:var(--muted); font-size:13px}
.small{font-size:13px; color:var(--muted); line-height:1.7}
input, textarea{width:100%; padding:12px 12px; border-radius:14px; border:1px solid var(--border); background:rgba(0,0,0,.25); color:var(--text)}
label{font-weight:900; font-size:13px}
.form{display:grid; gap:10px}


/* v6 - logo destaque grande estilo header */
.nav .brand {
  background: rgba(0,0,0,.25);
  padding: 10px 16px;
  border-radius: 20px;
}

.nav .brand img {
  height: 110px !important;
  max-width: 340px;
  object-fit: contain;
}

/* desktop spacing */
@media (min-width: 900px){
  .nav { padding: 12px 0; }
  .nav .brand img { height: 120px !important; }
}

/* mobile ajuste */
@media (max-width: 860px){
  .nav .brand img { height: 96px !important; }
}


/* v8 - logo no padrão da imagem enviada */
.nav .brand {
  padding: 12px 20px;
  border-radius: 22px;
}

.nav .brand img {
  height: 150px !important;       /* desktop igual ao print */
  max-width: 420px;
}

/* mobile bem maior */
@media (max-width: 860px){
  .nav .brand img {
    height: 120px !important;
  }
}

/* rodapé centralizado */
.footer {
  text-align: center;
}
.footer .small {
  text-align: center;
}