:root{
  --dg-green:#00C26E;
  --dg-green-800:#0b6a49;
  --dg-orange:#FF7A18;
  --dg-orange-600:#d9640e;
  --dg-black:#0b0b0b;
  --dg-white:#ffffff;
  --dg-gray:#f4f5f7;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#000;color:#fff;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:0}

.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.8) blur(12px);
  background:rgba(0,0,0,.6); border-bottom:1px solid rgba(255,255,255,.08);
}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:12px}
.brand .dot{width:12px;height:12px;border-radius:999px;background:linear-gradient(135deg,var(--dg-green),var(--dg-orange))}
.cta{display:flex;gap:8px;align-items:center}
.lang{appearance:none;background:#121212;border:1px solid #222;color:#fff;border-radius:10px;padding:8px 10px}

.hero{
  min-height:88vh;display:grid;place-items:center;position:relative;overflow:hidden;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(0,194,110,.25), transparent 60%),
              radial-gradient(900px 400px at 20% 120%, rgba(255,122,24,.18), transparent 60%);
}
.hero-inner{display:grid;gap:20px;text-align:center; max-width:960px; padding:60px 20px}
h1{font-size: clamp(32px, 6vw, 68px); line-height:1.02; letter-spacing:-0.02em; margin:0;}
.hero p{font-size: clamp(16px,2.2vw,20px); color:#d0d0d0}

.btn{
  padding:14px 20px; border-radius:16px; font-weight:700; background:linear-gradient(135deg,var(--dg-green),#19df88);
  color:#001; box-shadow:0 10px 30px rgba(0,194,110,.25); transform:translateY(0); transition:transform .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,194,110,.35)}
.btn-outline{background:#101010;color:#fff;border:1px solid #1f1f1f}
.btn-orange{background:linear-gradient(135deg,var(--dg-orange),#ff9a3d); color:#220f00; box-shadow:0 10px 30px rgba(255,122,24,.25)}

.grid{display:grid; gap:26px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){ .grid-3{grid-template-columns:1fr} }

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:24px; position:relative; overflow:hidden;
}

.section{padding:80px 0;border-top:1px solid rgba(255,255,255,.06)}
.section h2{font-size: clamp(24px, 4vw, 42px); margin:0 0 18px}
.muted{color:#bdbdbd}

.form{
  display:grid; gap:14px; max-width:640px; margin:0 auto; text-align:left;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); padding:24px; border-radius:18px;
}
.input, .checkbox{
  background:#0f0f0f; border:1px solid #222; color:#fff; border-radius:12px; padding:14px 16px; width:100%;
}
label{font-size:14px;color:#c8c8c8}
small{color:#a9a9a9}

.badges{display:flex;gap:18px;flex-wrap:wrap; align-items:center}
.badge{background:#0f0f0f;border:1px solid #222;border-radius:14px;padding:10px 14px;display:flex;gap:10px;align-items:center}
.badge img{height:22px;width:auto;opacity:.9}

.stat{
  font-size: clamp(36px, 6vw, 64px); font-weight:800; letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff,#b7ffc0); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:100;
  background:rgba(0,0,0,.6); backdrop-filter: blur(8px);
}
.modal.open{display:flex}
.modal-card{width:min(560px,92vw); background:#0f0f0f; border:1px solid #222; border-radius:20px; padding:22px}

.float-wa{
  position:fixed; right:18px; bottom:18px; z-index:90;
  width:56px; height:56px; border-radius:999px; display:grid; place-items:center;
  background:linear-gradient(135deg,#25D366,#1ebe57); box-shadow:0 10px 24px rgba(37,211,102,.35);
}

.reveal { opacity:0; transform: translateY(20px); transition: all .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in { opacity:1; transform: translateY(0)}

/* novo input numérico de público com a borda verde do botão */
  #audInput{
    border: 2px solid var(--brand);
    font-size: var(--fs-base);
  }
  #audInput:focus{ outline: 2px solid var(--brand); }

  /* Resultados da calculadora começam ocultos */
#calcResults{ display:none !important; }

/* audInput mais visível e compacto */
#audInput{
  font-size: 18px;
  max-width: 220px;
  border: 2px solid var(--brand);
  border-radius: 12px;
  padding: .6rem .75rem;
}

/* Grid de resultados: 3 colunas no desktop, 1 no mobile */
#calcResults{
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}
@media (max-width: 900px){
  #audInput{ max-width: 100%; }
  #calcResults{ grid-template-columns: 1fr; }
}

/* --- CALCULADORA: layout e animação --- */
.calc-subtitle{
  max-width: 960px;
  margin: 0 auto 18px;
  opacity: .9;
}

.calc-inline-wrap{ margin:28px auto 38px auto }
.calc-inline{
  display:grid; gap:12px;
}
@media (min-width:901px){
  .calc-inline-wrap{ max-width:70% }
  .calc-inline{ grid-template-columns: minmax(160px,280px) auto; align-items:end }
}

#audInput{
  border:2px solid var(--brand);
  font-size:18px;
  max-width:220px;
}
#audInput:focus{ outline:2px solid var(--brand) }

/* cards de resultado começam ocultos; aparecem com animação */
#calcResults{ display:none }
#calcResults .card{ opacity:0; transform: translateY(12px) scale(.98) }
#calcResults .card.show{ animation: fadeUp .5s cubic-bezier(.2,.6,.2,1) forwards }
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(12px) scale(.98); filter:saturate(.9) }
  to{   opacity:1; transform:none; filter:none }
}

/* números das estatísticas mais visíveis */
.stat{
  font-size:42px;
  font-weight:800;
  color:#fff;
  line-height:1.1;
  margin-top:6px;
}