/* AI First¹ Club — landing. Cores e fontes do manual da marca (BRANDING/tokens). */
@font-face { font-family: "Plus Jakarta Sans"; src: url("/assets/fontes/PlusJakartaSans.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fontes/GeistMono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --fundo: #0C0D0F; --tinta: #111214; --carvao: #1C1D22; --branco: #FFFFFF;
  --azul: #0050FF; --azul-noite: #2E6CFF; --azul-claro: #7FA6FF;
  --texto: #ECEDF0; --apoio: #A4A8B3; --sutil: #80858F; --linha: rgba(255,255,255,.09);
  --erro: #FF8B8B;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(16px, 4vw, 56px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { overflow-x: clip; }
html { background: var(--fundo); -webkit-text-size-adjust: 100%; }
body { min-height: 100svh; display: flex; flex-direction: column; color: var(--texto);
  font: 400 16px/1.55 "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
::selection { background: var(--azul); color: #fff; }

/* ------------------------------------------------ fundo */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.glow { position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 82% 38%, rgba(0, 80, 255, .26), transparent 70%),
    radial-gradient(40% 40% at 8% 100%, rgba(46, 108, 255, .10), transparent 70%); }
.hatch { position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 31px, rgba(255,255,255,.035) 31px 32px);
  -webkit-mask-image: radial-gradient(70% 70% at 70% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(70% 70% at 70% 40%, #000 20%, transparent 75%); }
.simbolo { position: absolute; right: max(2vw, calc(50vw - 690px)); bottom: 5vh; height: min(78vh, 760px); width: auto; max-width: none;
  transform: translate3d(var(--px, 0), var(--py, 0), 0); transition: transform 1.2s var(--ease); }
.p-barra, .p-perna { fill: url(#gA); }
.simbolo .p-barra, .simbolo .p-perna { stroke: rgba(255,255,255,.07); stroke-width: 1.5; }
.p-um { fill: url(#g1); }
.simbolo .p-um { filter: drop-shadow(0 0 50px rgba(0, 80, 255, .35)); }
.simbolo path { transform-box: fill-box; animation: entra 1.6s var(--ease) both; }
.simbolo .p-barra { animation-delay: .15s; }
.simbolo .p-perna { animation-delay: .3s; }
.simbolo .p-um { animation-delay: .5s; animation-duration: 1.9s; }
@keyframes entra { from { opacity: 0; transform: translate(-90px, 90px); } }
.grain { position: absolute; inset: -50%; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ------------------------------------------------ topo */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; max-width: 1280px; margin: 0 auto; padding: clamp(18px, 3vw, 32px) var(--gutter); }
.logo { display: block; line-height: 0; }
.logo svg { height: clamp(24px, 2.4vw, 30px); width: auto; }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--linha); border-radius: 999px;
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--apoio);
  background: rgba(17, 18, 20, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); white-space: nowrap; }
.badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--azul-noite); box-shadow: 0 0 0 0 rgba(46,108,255,.6); animation: pulsa 2.4s ease-out infinite; }
@keyframes pulsa { 70% { box-shadow: 0 0 0 9px rgba(46,108,255,0); } 100% { box-shadow: 0 0 0 0 rgba(46,108,255,0); } }

/* ------------------------------------------------ hero */
.hero { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: clamp(16px, 4vh, 48px) var(--gutter) clamp(40px, 6vh, 72px);
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(40px, 6vw, 104px); align-items: center; }
.eyebrow { display: flex; align-items: center; gap: 14px; font: 500 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--azul-claro); }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
h1 { margin-top: 26px; font-size: clamp(56px, 7vw, 112px); line-height: .9; font-weight: 800; letter-spacing: -.052em; color: var(--branco); text-wrap: balance; }
.pt { margin-left: -.05em; }
.azul { color: var(--azul-noite); }
.sub { margin-top: 28px; max-width: 33em; font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.6; color: var(--apoio); }
.pontos { list-style: none; margin-top: clamp(32px, 5vh, 52px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linha); max-width: 720px; }
.pontos li { padding: 18px 20px 0 0; }
.pontos li + li { padding-left: 20px; border-left: 1px solid var(--linha); }
.pontos span { font: 500 11px/1 var(--mono); letter-spacing: .14em; color: var(--azul-claro); }
.pontos p { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--apoio); }
.pontos b { display: block; color: var(--texto); font-weight: 600; }

.reveal { animation: sobe 1.1s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes sobe { from { opacity: 0; transform: translateY(18px); } }

/* ------------------------------------------------ cartão */
.card { position: relative; border-radius: 24px; padding: clamp(24px, 2.6vw, 36px);
  background: linear-gradient(180deg, rgba(30, 31, 37, .74), rgba(15, 16, 18, .80));
  border: 1px solid var(--linha);
  -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .07); }
.card::before { content: ""; position: absolute; left: 28px; right: 28px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--azul-noite) 30%, var(--azul-claro) 70%, transparent); opacity: .9; }
.card-eyebrow { display: flex; justify-content: space-between; align-items: center; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sutil); }
.card-eyebrow i { width: 8px; height: 8px; background: var(--azul-noite); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.card h2 { margin-top: 18px; font-size: clamp(26px, 2.3vw, 32px); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; color: var(--branco); }
.card-sub { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--apoio); }

form { display: grid; gap: 0; }
.campo { display: grid; gap: 8px; margin-top: 18px; }
.campo + .campo { margin-top: 14px; }
.campo span { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--apoio); }
.campo em { font-style: normal; color: var(--sutil); margin-left: 6px; }
input { font: inherit; color: var(--branco); }
.campo input { width: 100%; height: 50px; padding: 0 16px; font-size: 16px; border-radius: 12px; outline: none;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .11);
  transition: border-color .2s, box-shadow .2s, background .2s; }
.campo input::placeholder { color: #5D616C; }
.campo input:hover { border-color: rgba(255, 255, 255, .2); }
.campo input:focus { border-color: var(--azul-noite); background: rgba(46, 108, 255, .06); box-shadow: 0 0 0 4px rgba(46, 108, 255, .18); }
.campo input[aria-invalid="true"] { border-color: var(--erro); box-shadow: 0 0 0 4px rgba(255, 139, 139, .12); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aceite { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; font-size: 13px; line-height: 1.5; color: var(--apoio); cursor: pointer; }
.aceite input { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .04); display: grid; place-items: center; cursor: pointer; transition: .2s; }
.aceite input::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .2s var(--ease); }
.aceite input:checked { background: var(--azul); border-color: var(--azul); }
.aceite input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.aceite input:focus-visible { box-shadow: 0 0 0 4px rgba(46, 108, 255, .3); outline: none; }
.aceite input[aria-invalid="true"] { border-color: var(--erro); }
.aceite a { color: var(--texto); text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); }

.enviar { position: relative; overflow: hidden; margin-top: 22px; height: 56px; width: 100%; border: 0; border-radius: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 700 16px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: -.005em; color: #fff; background: var(--azul);
  box-shadow: 0 14px 34px -10px rgba(0, 80, 255, .65), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .25s var(--ease), box-shadow .25s, background .25s; }
.enviar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s var(--ease); }
.enviar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.enviar:hover { background: #1460FF; box-shadow: 0 18px 40px -10px rgba(0, 80, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .25); }
.enviar:hover::after { transform: translateX(120%); }
.enviar:hover svg { transform: translate(3px, -3px); }
.enviar:active { transform: translateY(1px); }
.enviar:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 3px; }
.enviar:disabled { opacity: .7; cursor: progress; }

.status { min-height: 0; font-size: 13.5px; line-height: 1.45; }
.status.erro { margin-top: 12px; color: var(--erro); }
.nota { margin-top: 14px; text-align: center; font: 500 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sutil); }

/* sucesso */
.feito { outline: none; }
.feito-simbolo { height: 64px; width: auto; display: block; margin-bottom: 26px; overflow: visible; }
.feito-simbolo path { transform-box: fill-box; opacity: 0; }
.feito-simbolo .p-barra, .feito-simbolo .p-perna { fill: #fff; }
.feito.on .feito-simbolo path { animation: entra 1.2s var(--ease) both; opacity: 1; }
.feito.on .feito-simbolo .p-perna { animation-delay: .12s; }
.feito.on .feito-simbolo .p-um { animation-delay: .28s; filter: drop-shadow(0 0 18px rgba(0, 80, 255, .6)); }
.feito h2 .pt { margin-left: -.05em; }
.feito b { color: var(--texto); font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------ rodapé */
.rodape { width: 100%; max-width: 1280px; margin: 0 auto; padding: 22px var(--gutter) max(22px, env(safe-area-inset-bottom));
  display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(255,255,255,.06);
  font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sutil); }
.rodape a { text-decoration: none; transition: color .2s; }
.rodape a:hover { color: var(--texto); }

/* ------------------------------------------------ telas menores */
@media (max-width: 960px) {
  /* no celular o formulário vem logo depois do texto principal; os 3 tópicos vão para o fim */
  .hero { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 12px; }
  .copy { display: contents; }
  .eyebrow { order: 1; } h1 { order: 2; } .sub { order: 3; max-width: 36em; }
  .card { order: 4; margin-top: 36px; width: 100%; max-width: 560px; }
  .pontos { order: 5; }
  .simbolo { height: 44vh; right: -26vw; bottom: auto; top: 3vh; opacity: .32; }
  .glow { background: radial-gradient(80% 50% at 85% 18%, rgba(0, 80, 255, .26), transparent 70%); }
}
@media (max-width: 640px) {
  .badge { padding: 7px 11px; font-size: 10px; letter-spacing: .12em; }
  h1 { font-size: clamp(48px, 15.5vw, 72px); margin-top: 20px; }
  .sub { margin-top: 20px; }
  .pontos { grid-template-columns: minmax(0, 1fr); border-top: 0; margin-top: 28px; }
  .pontos li, .pontos li + li { display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 14px 0; border-left: 0; border-top: 1px solid var(--linha); }
  .pontos p { margin-top: 0; }
  .card { border-radius: 20px; }
  .rodape { flex-direction: column; gap: 8px; }
}
@media (max-width: 380px) {
  .badge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .feito-simbolo path { opacity: 1; }
}

/* ------------------------------------------------ página de privacidade */
.doc { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: clamp(24px, 6vh, 64px) var(--gutter) 72px; }
.doc h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1; letter-spacing: -.045em; margin-top: 20px; }
.doc .atualizado { margin-top: 16px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sutil); }
.doc h2 { margin-top: 44px; font-size: 20px; font-weight: 700; letter-spacing: -.015em; color: var(--branco); }
.doc p, .doc li { margin-top: 12px; color: var(--apoio); font-size: 16px; line-height: 1.7; }
.doc ul { padding-left: 20px; }
.doc a { color: var(--azul-claro); text-underline-offset: 3px; }