/* A tela de entrada.
 *
 * O Rafael pediu que ela dê a sensação de "esta empresa tem dinheiro no bolso
 * e gente inteligente dentro", e foi explícito sobre o que não quer: **cara
 * de página gerada**.
 *
 * Isso tem sintomas conhecidos, e nenhum deles aparece aqui: gradiente roxo
 * para rosa, emoji no lugar de ícone, três cartões de vidro flutuando sobre
 * bolhas coloridas, ilustração vetorial de pessoas, e adjetivo grande onde
 * deveria haver número.
 *
 * O que dá a leitura contrária são quatro coisas, e todas são de contenção:
 *
 *   **Paleta curta.** Um escuro, um branco, um azul. Nada mais.
 *   **Borda de 1px em vez de sombra.** Sombra grande é o que faz interface
 *     parecer barata; a profundidade aqui vem de meio ponto de luz na borda
 *     de cima, como em metal escovado.
 *   **Número no lugar de adjetivo.** "R$ 2.663,36 por mês" convence; "gestão
 *     inteligente" não convence ninguém.
 *   **O produto à mostra.** A metade direita não é ilustração: é um recorte
 *     fiel da tela real. Linear e Stripe vendem com print do próprio produto,
 *     e pelo mesmo motivo — é a única prova que não dá para falsificar.
 *
 * A paleta é a do produto (temas.css), no lado escuro. A barra lateral do
 * painel já é escura: entrar vira passar para dentro da oficina, e não trocar
 * de empresa.
 */

:root {
  --raio:   12px;
  --raio-p: 8px;
  --fonte:  'Archivo', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
  --mono:   ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  /* A paleta da marca: grafite, lima, preto e branco.
   *
   * O escuro é o mesmo do cartão de visita e do fundo da logo — a entrada e o
   * produto precisam ser a mesma empresa, e não duas.
   *
   * O lima entra como **preenchimento**, nunca como texto sobre claro: sobre
   * branco ele dá contraste 1,21, e o mínimo legível é 4,5. Aqui o fundo é
   * escuro, então ele se lê — é exatamente a situação para a qual a marca foi
   * desenhada. */
  --noite:   #121417;
  --noite-2: #1A1E21;
  --vidro:   rgba(255, 255, 255, .06);
  --vidro-2: rgba(255, 255, 255, .13);
  --claro:   #ECEEEF;
  --claro-2: #A2A9AE;
  --claro-3: #6E767C;
  --lima:    #B7FF00;
  --sobre-lima: #121417;
  --vermelho:#FF7A85;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--noite);
  color: var(--claro);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A textura do fundo.
 *
 * Duas luzes muito fracas e uma malha de 1px. A malha é o detalhe que separa
 * "fundo escuro" de "superfície construída" — ela é quase invisível e o olho
 * registra que existe alguma coisa ali. Bolha colorida faria o contrário. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 12% -10%,
                    rgba(183, 255, 0, .10), transparent 60%),
    radial-gradient(50rem 40rem at 105% 110%,
                    rgba(183, 255, 0, .05), transparent 60%),
    linear-gradient(180deg, var(--noite) 0%, var(--noite-2) 100%);
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(75rem 55rem at 30% 20%, #000, transparent 75%);
}

.cena {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: 68px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 56px 40px;
}

/* ─── A conversa ─────────────────────────────────────────────── */

.conversa { max-width: 610px; }

/* Entrada contida: sobe 10px e aparece. Movimento maior que isso vira
   apresentação de slide, e apresentação de slide parece anúncio. */
.conversa > *, .vitrine {
  animation: surgir .5s cubic-bezier(.2, .7, .3, 1) backwards;
}
.conversa > :nth-child(1) { animation-delay: .02s; }
.conversa > :nth-child(2) { animation-delay: .06s; }
.conversa > :nth-child(3) { animation-delay: .10s; }
.conversa > :nth-child(4) { animation-delay: .15s; }
.conversa > :nth-child(5) { animation-delay: .20s; }
.vitrine                  { animation-delay: .16s; }

@keyframes surgir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .conversa > *, .vitrine { animation: none; }
}

.marca {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 14.5px; letter-spacing: -.01em;
  margin-bottom: 40px;
}
/* O logotipo, e não um quadradinho com inicial.
 *
 * A marca é um logotipo de palavra, sem símbolo — então o que vai aqui é a
 * palavra, com as duas letras do meio no lima. */
.marca .logotipo {
  font-weight: 700; font-size: 17px;
  letter-spacing: -.035em; text-transform: none;
  color: var(--claro);
}
.marca .logotipo em { font-style: normal; color: var(--lima); }

.sobrescrito {
  margin: 0 0 14px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--lima);
}

h1 {
  margin: 0 0 20px;
  /* Grande, apertado e pesado. O aperto é o que faz título parecer
     desenhado em vez de digitado. */
  font-size: clamp(30px, 3.25vw, 47px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.033em;
  /* Distribui as palavras entre as linhas em vez de encher a primeira e
     deixar uma sobra na ultima. E a diferenca entre titulo composto e
     titulo digitado. */
  text-wrap: balance;
}
/* Cada frase e um bloco, e cada uma balanceia sozinha. Um <br> no meio
   forcaria um corte que briga com o balanceamento da outra. */
h1 span { display: block; }
h1 span + span { margin-top: .12em; }

h1 em {
  font-style: normal;
  /* O numero e a unidade sao uma coisa so: "1.698" numa linha e "paginas" na
     seguinte faz o leitor montar a frase de novo. */
  white-space: nowrap;
  color: var(--lima);
  /* Sublinhado fino e afastado, no lugar do marcador colorido de sempre. */
  box-shadow: inset 0 -2px 0 rgba(183, 255, 0, .45);
}

.linha-fina {
  margin: 0 0 34px;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--claro-2);
  max-width: 50ch;
}

/* ─── A porta ────────────────────────────────────────────────── */

.porta { margin: 0 0 8px; }

.campos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  gap: 10px;
  margin-bottom: 12px;
}

.campo { display: grid; gap: 7px; min-width: 0; }
.campo > span {
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--claro-3);
}

.campo input, .campo select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--vidro-2);
  border-radius: var(--raio-p);
  /* Um fio de luz na borda de cima: é o que dá a sensação de superfície
     física. Sombra pesada daria a sensação contrária. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  background: var(--vidro);
  color: var(--claro);
  font: inherit;
  font-size: 15px;
  transition: border-color .14s, box-shadow .14s, background .14s;
}
.campo select {
  appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239DAAC8' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 4.5L6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
  cursor: pointer;
}
.campo select option { background: var(--noite-2); color: var(--claro); }
.campo input::placeholder { color: #5C678440; }
.campo input:focus, .campo select:focus {
  outline: none;
  border-color: var(--lima);
  background: rgba(183, 255, 0, .07);
  box-shadow: 0 0 0 3px rgba(183, 255, 0, .22);
}
.campo input:user-invalid { border-color: var(--vermelho); }

/* O botão é lima cheio com letra preta, como a logo.
 *
 * Lima com letra branca seria ilegível — o verde é claro demais. Preto em
 * cima dele é o único par que funciona, e é o par que a própria marca usa. */
.acao {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 20px;
  border: 0;
  border-radius: var(--raio-p);
  background: var(--lima);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 8px 26px -12px rgba(183, 255, 0, .55);
  color: var(--sobre-lima);
  font: inherit; font-size: 15.5px; font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform .12s, box-shadow .16s, filter .16s;
}
.acao:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 12px 32px -12px rgba(183, 255, 0, .7);
}
.acao:active { transform: translateY(1px); }
.acao:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.acao[disabled] { opacity: .6; cursor: progress; filter: none; }
.acao svg { transition: transform .16s; }
.acao:hover svg { transform: translateX(2px); }

/* Os três selos que derrubam a última objeção.
 *
 * O Rafael: *"tenho dinheiro para receber, vai ser mais barato a ferramenta
 * do que isso, não tenho fidelidade"*. "Sem fidelidade" só pode ser dito por
 * quem deixa cancelar em dois cliques — então aqui vale como prova. */
.selos {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin: 14px 0 0;
  font-size: 13px; color: var(--claro-2);
}
.selos span { display: flex; align-items: center; gap: 7px; }
.selos span::before {
  content: '';
  width: 14px; height: 14px; flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid rgba(183, 255, 0, .55);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' stroke='%23B7FF00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5.2l2.1 2.1L8 3.4'/%3E%3C/svg%3E")
    center no-repeat;
}

.recado {
  margin-top: 18px;
  padding: 13px 15px;
  border: 1px solid var(--vidro-2);
  border-left: 2px solid var(--lima);
  border-radius: var(--raio-p);
  background: rgba(76, 141, 255, .08);
  font-size: 14px;
  color: var(--claro);
}
.recado.ruim { border-left-color: var(--vermelho); background: rgba(255,122,133,.08); }
.recado b { font-weight: 700; }
.recado a { color: var(--lima); }

.rodape {
  margin: 38px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--vidro);
  font-size: 13px;
  color: var(--claro-3);
  max-width: 46ch;
}

/* ─── A vitrine: o produto de verdade ────────────────────────── */

.vitrine { min-width: 0; }

.janela {
  border: 1px solid var(--vidro-2);
  border-radius: var(--raio);
  overflow: hidden;
  background: linear-gradient(180deg, #0F1730, #0C1226);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 40px 80px -40px rgba(0, 0, 0, .9);
  /* Uma inclinação de menos de um grau. O suficiente para o olho ler
     "objeto", não o bastante para virar truque de apresentação. */
  transform: perspective(1600px) rotateY(-1.6deg) rotateX(.6deg);
}

.barra {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--vidro);
  background: rgba(255,255,255,.025);
}
.barra i {
  width: 9px; height: 9px; border-radius: 999px;
  background: rgba(255,255,255,.14);
}
.barra span {
  margin-left: 8px;
  font-size: 12px; color: var(--claro-3);
  letter-spacing: -.005em;
}

.quadro { padding: 18px; }

.numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.cartao {
  padding: 12px 12px;
  border: 1px solid var(--vidro);
  border-radius: var(--raio-p);
  background: rgba(255,255,255,.028);
  min-width: 0;
}
.cartao .rot {
  display: block;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--claro-3);
  margin-bottom: 7px;
}
/* Número em monoespaçada e com largura tabular: é o que faz uma coluna de
   valores parecer calculada em vez de digitada. */
.cartao .val {
  display: block;
  font-family: var(--mono);
  font-size: 17.5px; font-weight: 700;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cartao .val.alerta { color: var(--vermelho); }
.cartao .nota {
  display: block; margin-top: 5px;
  font-size: 11px; line-height: 1.4;
  color: var(--claro-3);
  /* Duas linhas cabem; tres desalinham a altura dos tres cartoes. */
  text-wrap: balance;
}
.cartao .nota.alerta { color: #FF7A85B3; }
.cartao .nota.baixa::before {
  content: '▾ '; color: #4ADE80;
}

.achado {
  padding: 13px 15px;
  border: 1px solid rgba(255, 122, 133, .22);
  border-left: 2px solid var(--vermelho);
  border-radius: var(--raio-p);
  background: rgba(255, 122, 133, .07);
  margin-bottom: 16px;
}
.achado .etiqueta {
  display: inline-block; margin-bottom: 6px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #FF7A85;
}
.achado p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--claro); }
.achado b { font-weight: 700; }

.grade { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.grade th {
  text-align: left; font-weight: 600;
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--claro-3);
  padding: 0 10px 9px 0;
  border-bottom: 1px solid var(--vidro);
}
.grade td {
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  color: var(--claro-2);
}
.grade tr td:first-child { color: var(--claro); font-weight: 500; }
.grade th:last-child, .grade td:last-child { text-align: right; padding-right: 0; }
.grade .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.rodape-grade {
  margin: 11px 0 0;
  font-size: 12px; color: var(--claro-3);
}

/* ─── Telas menores ──────────────────────────────────────────── */

@media (max-width: 1100px) {
  .cena {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
    padding: 40px 24px 56px;
    align-items: start;
  }
  /* Em coluna unica a conversa nao vira faixa: campo de e-mail com 900px
     de largura parece formulario de sistema interno, e um botao dessa
     largura parece banner. O texto e a leitura mandam na medida, nao a
     janela. */
  .conversa { max-width: 640px; }
  .janela { transform: none; }
}

@media (max-width: 620px) {
  .cena { padding: 32px 16px 44px; gap: 34px; }
  h1 { font-size: clamp(27px, 8vw, 36px); }
  .linha-fina { font-size: 15.5px; }
  .campos { grid-template-columns: minmax(0, 1fr); }
  .numeros { grid-template-columns: minmax(0, 1fr); }
  .marca { margin-bottom: 28px; }
}

/* A segunda porta.
 *
 * Discreta de propósito: ela é a saída para quem não tem a fatura na mão, e
 * não a ação principal. Com o mesmo peso do botão azul, metade das pessoas
 * escolheria o caminho que não deixa nenhum dado real no sistema — e o
 * cenário pronto, sozinho, não vende. */
.outra-porta {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--claro-3);
}
.outra-porta button {
  border: 0; background: none; padding: 0;
  font: inherit; font-weight: 600;
  color: var(--claro-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--claro-3);
  cursor: pointer;
  transition: color .13s, text-decoration-color .13s;
}
.outra-porta button:hover {
  color: var(--lima);
  text-decoration-color: var(--lima);
}
.outra-porta button:focus-visible { outline: 2px solid var(--lima); outline-offset: 3px; }

/* A linha que diz o que a Contto nao e.
 *
 * Menor que a linha-fina e com a borda a esquerda: ela nao disputa a leitura
 * com a promessa, ela a fecha. Quem chegou ate aqui ja quer; esta frase tira
 * a ultima objecao ("la vem mais um sistema para eu manter"). */
.contraste {
  margin: 18px 0 30px;
  padding-left: 14px;
  border-left: 2px solid var(--lima);
  max-width: 34rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--claro-2);
}
.contraste b { color: var(--claro); font-weight: 600; }

/* Os endereços públicos, embaixo do botão: discretos, mas à vista. */
.enderecos { margin: 14px 0 0; font-size: 12.5px; line-height: 1.7; color: rgba(255, 255, 255, .55); }
.enderecos a { color: rgba(255, 255, 255, .8); text-decoration: underline; text-decoration-color: rgba(183, 255, 0, .5);
  text-underline-offset: 3px; }
.enderecos a:hover { color: var(--lima); }
.enderecos span { margin: 0 6px; }

/* "Já é cliente? Entrar", no canto de cima. */
.marca { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ja-cliente { font-size: 13.5px; color: rgba(255, 255, 255, .62); text-decoration: none; padding: 7px 14px;
  border-radius: 99px; border: 1px solid rgba(255, 255, 255, .14); transition: border-color .2s, color .2s; }
.ja-cliente b { color: var(--lima); font-weight: 700; }
.ja-cliente:hover { border-color: var(--lima); color: #fff; }

/* Todo "Contto" no texto é a marca: C maiúsculo, "tto" em lima. */
.marca-texto { white-space: nowrap; letter-spacing: -.02em; }
.marca-texto em { font-style: normal; color: var(--lima); }

/* Os selos de segurança, iguais aos da tela Entrar. */
.confianca { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.confianca li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
                border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03);
                font-size: 12px; color: rgba(255, 255, 255, .55); }
.confianca li svg { flex: none; color: rgba(183, 255, 0, .75); }
.confianca li b { color: rgba(255, 255, 255, .88); font-weight: 700; }
.selos-marcas { display: flex; align-items: center; gap: 18px; margin: 14px 0 0; }
.selo-aws-acesso { display: block; width: max-content; line-height: 0; }
.selo-pagarme-acesso { display: block; line-height: 0; }
.selo-pagarme-acesso img { display: block; width: 84px; height: auto; }
.selo-ssl { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px 5px 6px; border-radius: 10px;
  border: 1px solid rgba(183, 255, 0, .35); background: rgba(183, 255, 0, .06); text-decoration: none;
  transition: border-color .15s, background .15s; }
.selo-ssl:hover { border-color: rgba(183, 255, 0, .7); background: rgba(183, 255, 0, .1); }
.selo-ssl-nota { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--lima);
  color: #0B0C0E; font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.selo-ssl-texto { display: flex; flex-direction: column; line-height: 1.15; }
.selo-ssl-texto b { font-size: 12px; color: #fff; }
.selo-ssl-texto small { font-size: 10.5px; color: rgba(255, 255, 255, .55); }
.selo-aws-acesso img { display: block; width: 64px; height: auto; }