:root {
  --bg: #0b0a17;
  --bg2: #13112a;
  --card: #17152f;
  --linha: #2a2650;
  --txt: #f4f2ff;
  --txt2: #b3aed8;
  --rosa: #fe2c55;
  --ciano: #25f4ee;
  --amarelo: #ffd84d;
  --verde: #2ee66b;
  --raio: 18px;
  --titulo: 'Unbounded', 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--txt);
  font: 500 16px/1.55 Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3 { font-family: var(--titulo); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; }
.container { width: min(1160px, 100% - 40px); margin-inline: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px; border: 0; cursor: pointer;
  font: 800 15px Inter, sans-serif; text-decoration: none; color: #fff;
  background: var(--rosa); box-shadow: 0 8px 30px -8px rgba(254,44,85,.7);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 34px -8px rgba(254,44,85,.85); }
.btn:active { transform: translateY(0); }
.btn.sec { background: transparent; box-shadow: inset 0 0 0 2px var(--linha); }
.btn.sec:hover { box-shadow: inset 0 0 0 2px var(--ciano); }
.btn.peq { padding: 9px 14px; font-size: 13px; }
.btn.ciano { background: var(--ciano); color: #07222a; box-shadow: 0 8px 30px -10px rgba(37,244,238,.7); }

.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--titulo); font-weight: 800; font-size: 19px; text-decoration: none; }
.logo .marca {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 18px;
  background: linear-gradient(135deg, var(--rosa), #8a2bff 55%, var(--ciano));
  box-shadow: 0 0 0 2px rgba(255,255,255,.08), 0 6px 20px -6px rgba(254,44,85,.8);
}
.logo b { color: var(--rosa); }

.topo { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); background: rgba(11,10,23,.72); border-bottom: 1px solid rgba(255,255,255,.06); }
.topo .container { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px; }
.topo nav { display: flex; gap: 22px; align-items: center; }
.topo nav a.l { color: var(--txt2); text-decoration: none; font-weight: 700; font-size: 14px; }
.topo nav a.l:hover { color: var(--txt); }
@media (max-width: 760px) { .topo nav a.l { display: none; } }

.card { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px; }
.etiqueta { display: inline-block; font: 800 12px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ciano); }

input[type=text], input[type=number], select {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linha);
  background: var(--bg2); color: var(--txt); font: 600 15px Inter, sans-serif; outline: none;
}
input:focus, select:focus { border-color: var(--ciano); box-shadow: 0 0 0 3px rgba(37,244,238,.15); }
input[type=color] { width: 46px; height: 40px; border: 1px solid var(--linha); border-radius: 10px; background: var(--bg2); padding: 3px; }
label.campo { display: grid; gap: 6px; font-weight: 700; font-size: 14px; color: var(--txt2); }
.chave { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; }
.chave input { opacity: 0; width: 0; height: 0; }
.chave span { position: absolute; inset: 0; background: var(--linha); border-radius: 99px; transition: .2s; cursor: pointer; }
.chave span::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.chave input:checked + span { background: var(--rosa); }
.chave input:checked + span::before { transform: translateX(18px); }