:root{
  --lila:#7B2CFF;
  --lila2:#A66BFF;
  --negro:#0b0b0f;
  --gris1:#14141b;
  --gris2:#1c1c26;
  --borde: rgba(255,255,255,.10);
}

.bg-app{
  background: radial-gradient(1200px 600px at 20% 10%, rgba(123,44,255,.18), transparent 60%),
              radial-gradient(1000px 500px at 80% 30%, rgba(123,44,255,.10), transparent 55%),
              linear-gradient(180deg, var(--negro), #07070b);
}

.nav-blur{
  background: rgba(10,10,14,.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.brand-dot{
  width: 10px; height: 10px; border-radius: 50%;
  display:inline-block; background: var(--lila);
  box-shadow: 0 0 18px rgba(123,44,255,.75);
  margin-right: 10px;
}

.cardx{
  background: linear-gradient(180deg, rgba(28,28,38,.75), rgba(14,14,20,.85));
  border: 1px solid var(--borde);
  border-radius: 18px;
}

.btn-primary{
  background: var(--lila);
  border-color: var(--lila);
  font-weight: 700;
}
.btn-primary:hover{
  background:#6a22f1;
  border-color:#6a22f1;
}
.btn-out{
  background:#6a22f1;
  border-color:#6a22f1;
}
.btn-out:hover{
  background:#a522f1;
  border-color:#6a22f1;
}


.logo-slot{
  height: 260px;
  border-radius: 18px;
  border: 1px dashed rgba(166,107,255,.55);
  background: rgba(123,44,255,.08);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding: 18px;
}
.footer{
  border-top: 1px solid var(--borde);
  background: rgba(0,0,0,.25);
}