/* Estilo base das variações. Cada variação pode ter o próprio CSS, se quiser. */
* { box-sizing: border-box; }
body { margin: 0; background: #0b0c0e; color: #f2f3ee; font: 17px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
.pagina { max-width: 960px; margin: 0 auto; padding: 0 16px 48px; }
.topo { padding: 20px 0; }
.marca { font-weight: 800; letter-spacing: -.01em; color: #bef264; font-size: 20px; }
.hero { text-align: center; padding: 56px 0 40px; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.08; margin: 0 0 16px; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; margin: 6px 0 4px; }
.sub { color: #b9bdb3; max-width: 34em; margin: 0 auto 28px; }
.cta { display: inline-block; background: #bef264; color: #1a2e05; font-weight: 800; text-decoration: none; padding: 16px 28px; border-radius: 14px; min-height: 48px; }
.cta:hover { filter: brightness(1.05); }
.nota { color: #8f9488; font-size: 14px; margin-top: 10px; }
.passos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.passos div { background: #16181c; border: 1px solid #2a2d33; border-radius: 14px; padding: 18px; }
.passos b { color: #bef264; font-size: 14px; }
.passos p { color: #b9bdb3; margin: 0; font-size: 15px; }
.fim { padding-top: 56px; }
.rodape { text-align: center; color: #8f9488; font-size: 13px; padding-top: 32px; }
.rodape a { color: #8f9488; }