:root{
  --pink:#ff1e8e; --pink2:#ff5cb8; --pink-d:#c70f6c;
  --bg:#070708; --panel:rgba(22,22,28,.72); --line:rgba(255,255,255,.08);
  --txt:#f4f4f7; --mut:#9b9ba8;
  --glow:0 0 18px rgba(255,30,142,.55), 0 0 46px rgba(255,30,142,.28);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--txt);
  font-family:"Inter",system-ui,sans-serif;
  min-height:100vh; display:flex; justify-content:center;
  padding:32px 16px 64px; position:relative; overflow-x:hidden;
}

/* fundo animado */
.bg{position:fixed; inset:0; z-index:0; overflow:hidden}
.blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:.55}
.blob-1{width:560px;height:560px;background:#ff1e8e; top:-180px; left:50%; transform:translateX(-50%); animation:float1 14s ease-in-out infinite}
.blob-2{width:420px;height:420px;background:#7a0f8f; bottom:-160px; right:-80px; animation:float2 18s ease-in-out infinite}
.grid{position:absolute; inset:0; opacity:.25;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);}
@keyframes float1{50%{transform:translateX(-50%) translateY(40px) scale(1.08)}}
@keyframes float2{50%{transform:translateY(-50px) scale(1.1)}}

.shell{position:relative; z-index:1; width:100%; max-width:560px}

/* topo */
.head{display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px 0 6px}
.logo{width:200px; max-width:62%; filter:drop-shadow(0 0 22px rgba(255,30,142,.5))}
.tag{font-size:11px; letter-spacing:4px; color:var(--pink); font-weight:700; text-transform:uppercase; text-shadow:var(--glow)}
.lead{text-align:center; color:var(--mut); font-size:15px; line-height:1.6; max-width:480px; margin:12px auto 22px}
.lead b{color:var(--pink2)}

/* cards */
.card{background:var(--panel); backdrop-filter:blur(18px); border:1px solid var(--line); border-radius:22px; padding:24px; margin-bottom:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);}
.step{display:flex; align-items:center; gap:11px}
.step h3{font-size:16px; font-weight:700}
.dot{display:grid; place-items:center; width:27px; height:27px; border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--pink-d)); color:#fff; font-weight:800; font-size:13px; box-shadow:var(--glow); flex:none}
.hint{color:var(--mut); font-size:13px; margin:10px 0 14px; line-height:1.6}
.hint.tight{margin-bottom:2px}
.hint b{color:var(--txt)}
.hint a{color:var(--pink2); text-decoration:none; border-bottom:1px solid rgba(255,92,184,.45)}
.hint a:hover{color:#fff}

/* botao / link */
.go{width:100%; border:0; border-radius:15px; padding:16px; font:inherit; font-size:16px; font-weight:800; letter-spacing:.3px; color:#fff; cursor:pointer; text-decoration:none;
  background:linear-gradient(135deg,var(--pink),var(--pink-d)); box-shadow:var(--glow);
  display:flex; align-items:center; justify-content:center; gap:10px; transition:transform .12s,box-shadow .2s}
.go:hover{transform:translateY(-1px); box-shadow:0 0 22px rgba(255,30,142,.85),0 0 54px rgba(255,30,142,.4)}
.go:active{transform:translateY(1px)}

/* lista de passos */
.steps{margin:8px 0 16px; padding-left:20px; color:var(--mut); font-size:13.5px; line-height:1.7}
.steps li{margin-bottom:9px}
.steps b{color:var(--txt)}
.mini{color:#ff9ec6; font-size:12px}
code{background:rgba(255,30,142,.14); color:var(--pink2); padding:2px 8px; border-radius:6px; font-size:12.5px; font-family:ui-monospace,monospace}

.foot{text-align:center; color:var(--mut); font-size:11.5px; margin-top:18px}
@media(max-width:480px){ .card{padding:18px} .logo{width:170px} }