/* Estilo das páginas públicas: início, planos, docs, privacidade, contato.
 *
 * Separado do aplicativo de propósito. Quem chega aqui não tem conta, não sabe
 * o que é a Lauren e vai decidir em quinze segundos se fica. O aplicativo é
 * ferramenta; isto aqui é argumento.
 *
 * As cores são as mesmas do produto, para quem entra depois reconhecer o lugar.
 */

:root {
  --breu: #0a0410;
  --painel: #120820;
  --alto: #1e1032;
  --linha: #2b1642;
  --rosa: #ff2d95;
  --violeta: #a855ff;
  --texto: #f4ecff;
  --fraco: #9d8ab5;
  --verde: #3ddc84;
  --erro: #ff5f7e;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0 }

body {
  background: var(--breu);
  color: var(--texto);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none }

.dentro { width: min(1120px, 100% - 48px); margin: 0 auto }

/* ------------------------------------------------------------ cabeçalho */
header.topo {
  position: sticky; top: 0; z-index: 40;
  background: rgb(10 4 16 / .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linha);
}
.topo .dentro { display: flex; align-items: center; gap: 32px; height: 66px }

.marca {
  font: 400 27px/1 var(--serif);
  background: linear-gradient(100deg, var(--violeta), var(--rosa));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

nav.menu { display: flex; gap: 26px; margin-left: 8px }
nav.menu a { color: var(--fraco); font-size: 14.5px; transition: color .15s }
nav.menu a:hover, nav.menu a[aria-current] { color: var(--texto) }

.topo .direita { margin-left: auto; display: flex; align-items: center; gap: 14px }

.botao {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 11px; border: 0;
  font: 600 14.5px var(--sans); cursor: pointer;
  background: linear-gradient(140deg, var(--violeta), var(--rosa));
  color: #12001a;
  box-shadow: 0 0 26px -8px rgb(255 45 149 / .85);
  transition: transform .14s, box-shadow .14s;
}
.botao:hover { transform: translateY(-1px); box-shadow: 0 0 34px -6px rgb(255 45 149 / .95) }
.botao.fantasma {
  background: none; color: var(--texto);
  border: 1px solid var(--linha); box-shadow: none;
}
.botao.fantasma:hover { border-color: var(--violeta); background: var(--painel) }
.botao.grande { padding: 15px 28px; font-size: 16px; border-radius: 13px }

/* ------------------------------------------------------------ estrutura */
section { padding: 92px 0 }
section.fina { padding: 60px 0 }

h1 { font: 400 clamp(38px, 6vw, 66px)/1.06 var(--serif); letter-spacing: -.5px }
h2 { font: 400 clamp(28px, 4vw, 42px)/1.15 var(--serif); margin-bottom: 16px }
h3 { font: 600 17px/1.4 var(--sans); margin-bottom: 8px }
h1 em, h2 em {
  font-style: italic;
  background: linear-gradient(100deg, var(--violeta), var(--rosa));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

p.linha-fina { color: var(--fraco); font-size: 18px; max-width: 62ch; line-height: 1.65 }
.rotulo {
  font: 700 11px var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--violeta); margin-bottom: 14px;
}

/* --------------------------------------------------------------- cartão */
.cartao {
  background: var(--painel); border: 1px solid var(--linha);
  border-radius: 18px; padding: 26px;
}
.grade { display: grid; gap: 18px }
/* Filho de grade nasce com a largura mínima do conteúdo: um bloco de código ou
   uma tabela larga estica a coluna e empurra a página para fora da tela. */
.grade > *, .dentro > * { min-width: 0 }
.grade.tres { grid-template-columns: repeat(3, 1fr) }
.grade.dois { grid-template-columns: repeat(2, 1fr) }

/* -------------------------------------------------------------- rodapé */
footer {
  border-top: 1px solid var(--linha); padding: 46px 0 60px;
  color: var(--fraco); font-size: 14px;
}
footer .dentro { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start }
footer nav { display: flex; flex-direction: column; gap: 9px }
footer nav a:hover { color: var(--texto) }
footer .fim { margin-left: auto; text-align: right; font-size: 13px; opacity: .8 }

/* --------------------------------------------------------------- avisos */
.aviso {
  border: 1px solid var(--linha); border-left: 3px solid var(--violeta);
  background: var(--painel); border-radius: 0 12px 12px 0;
  padding: 16px 20px; color: var(--fraco); font-size: 14.5px;
}

code, kbd {
  font-family: var(--mono); font-size: .92em;
  background: var(--alto); color: var(--rosa);
  padding: 2px 6px; border-radius: 6px;
}

@media (max-width: 900px) {
  .dentro { width: calc(100% - 32px) }
  .grade.tres, .grade.dois { grid-template-columns: 1fr }
  nav.menu { display: none }
  section { padding: 62px 0 }
  footer .fim { margin-left: 0; text-align: left; width: 100% }
}

  /* A barra de rolagem do sistema é branca e grossa, e no meio de um tema
     escuro vira a coisa mais chamativa da tela. */
  *{scrollbar-width:thin; scrollbar-color:transparent transparent}
  *:hover{scrollbar-color:var(--linha) transparent}
  ::-webkit-scrollbar{width:9px; height:9px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:transparent; border-radius:6px; border:2px solid transparent; background-clip:content-box}
  *:hover::-webkit-scrollbar-thumb{background:var(--linha); background-clip:content-box}
  ::-webkit-scrollbar-thumb:hover{background:var(--alto); background-clip:content-box}

/* ------------------------------------------------------- menu do celular */
.abrir-menu {
  display: none; margin-left: auto; width: 40px; height: 40px;
  background: none; border: 0; cursor: pointer; padding: 10px;
  flex-direction: column; justify-content: space-between;
}
.abrir-menu span {
  display: block; height: 2px; background: var(--texto); border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.abrir-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.abrir-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
.abrir-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

.menu-celular {
  display: none; position: fixed; inset: 66px 0 0; z-index: 39;
  background: var(--breu); padding: 28px 24px 40px;
  flex-direction: column; gap: 6px;
}
.menu-celular.aberta { display: flex }
.menu-celular nav { display: flex; flex-direction: column }
.menu-celular nav a {
  font: 400 26px/1 var(--serif); color: var(--texto);
  padding: 16px 0; border-bottom: 1px solid var(--linha);
}
.menu-celular-acoes { display: grid; gap: 10px; margin-top: 28px }
.menu-celular-acoes .botao { justify-content: center; padding: 15px }

@media (max-width: 900px) {
  .abrir-menu { display: flex }
  .topo .direita { display: none }
}