/* Site publico do Atlas (04/10). Cores = hud/tokens.css (ouro sobre
   quase-preto, mono para dado): o site tem que parecer a mesma marca do
   HUD e do app. Tema unico escuro de proposito (a esfera e luz aditiva).
   Sem fontes de fora: nada de requisicao a terceiros (privacidade e
   velocidade). */
:root {
  --cor: 255 184 64;
  --fundo: #050302;
  --fundo-2: #0e0905;
  --fundo-3: #1a1108;
  --vidro: rgb(14 9 5 / 0.82);
  --borda: rgb(255 184 64 / 0.18);
  --borda-forte: rgb(255 184 64 / 0.42);
  --texto: #ffe9c2;
  --texto-2: rgb(255 222 170 / 0.8);
  --texto-3: rgb(255 210 140 / 0.62);
  --ouro: #ffb640;
  --ouro-claro: #ffd98a;
  --tinta-botao: #1a0e02;
  --perigo: #ff6a4d;
  --ok: #7ee0a0;
  --raio: 14px;
  --toque: 48px;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Fira Code", "JetBrains Mono", "DejaVu Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --entra: 250ms cubic-bezier(.2, .8, .2, 1);
  --lado: clamp(16px, 4vw, 48px);
  --larg: 1180px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 1.0625rem/1.6 var(--fonte);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--ouro-claro); }
:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.pular {
  position: fixed; left: 12px; top: -60px; z-index: 50;
  background: var(--ouro); color: var(--tinta-botao); padding: 10px 16px;
  border-radius: 10px; font-weight: 700; text-decoration: none;
}
.pular:focus { top: 12px; }

/* ----------------------------------------------------------- palco */
.palco { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.palco-canvas { width: 100%; height: 100%; display: block; }
.orbe-estatica {
  position: absolute; width: min(62vmin, 560px); height: auto;
  left: 70%; top: 50%; transform: translate(-50%, -50%);
  border-radius: 50%; opacity: .9;
  -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 71%);
  mask-image: radial-gradient(circle, #000 55%, transparent 71%);
}
.esfera-ok .orbe-estatica { display: none; }
.sem-esfera .palco-canvas { display: none; }

/* ----------------------------------------------------------- topo */
.topo {
  position: sticky; top: 0; z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  background: linear-gradient(var(--fundo) 30%, rgb(5 3 2 / 0));
}
.nav {
  max-width: var(--larg); margin: 0 auto; padding: 14px var(--lado);
  display: flex; align-items: center; gap: 24px;
}
.marca {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 0.95rem/1 var(--mono); letter-spacing: 0.32em;
  color: var(--texto); text-decoration: none;
}
.marca-ponto {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff4d6, var(--ouro) 45%, #7a3a04);
  box-shadow: 0 0 12px rgb(255 170 50 / .7);
}
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a {
  color: var(--texto-2); text-decoration: none; font-size: .95rem;
  padding: 6px 0; border-bottom: 1px solid transparent;
}
.nav-links a:hover { color: var(--texto); border-color: var(--borda-forte); }

/* ----------------------------------------------------------- botoes */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--toque); padding: 0 24px; border-radius: 999px;
  background: var(--ouro); color: var(--tinta-botao);
  font: 700 1rem/1 var(--fonte); text-decoration: none;
  border: 1px solid var(--ouro); cursor: pointer;
  transition: background var(--entra), box-shadow var(--entra), transform var(--entra);
}
.botao:hover { background: var(--ouro-claro); box-shadow: 0 0 28px rgb(255 170 50 / .35); }
.botao:active { transform: translateY(1px); }
.botao-linha { background: transparent; color: var(--texto); border-color: var(--borda-forte); }
.botao-linha:hover { background: rgb(255 184 64 / .1); }
.botao-pequeno { min-height: 40px; padding: 0 18px; font-size: .92rem; }

/* ----------------------------------------------------------- rotulos */
.rotulo {
  font: 600 .78rem/1.3 var(--mono); text-transform: uppercase;
  letter-spacing: .18em; color: var(--ouro);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ouro {
  background: linear-gradient(100deg, var(--ouro-claro), var(--ouro) 60%, #ff9a2a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.selo {
  display: inline-block; font: 600 .7rem/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; padding: 5px 8px; border-radius: 6px;
  vertical-align: middle; white-space: nowrap;
}
.selo-ok { color: var(--ok); background: rgb(126 224 160 / .1); border: 1px solid rgb(126 224 160 / .35); }
.selo-breve { color: var(--ouro-claro); background: rgb(255 184 64 / .08); border: 1px dashed var(--borda-forte); }
.selo-exp { color: #ffc6b8; background: rgb(255 106 77 / .08); border: 1px dashed rgb(255 106 77 / .5); }

/* ----------------------------------------------------------- estrutura */
main, .rodape { position: relative; z-index: 1; }
.hero, .secao {
  max-width: var(--larg); margin: 0 auto; padding-inline: var(--lado);
}
.secao { padding-block: clamp(72px, 11vw, 140px); }
.secao-cabeca { max-width: 760px; display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 56px); }
h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.06; letter-spacing: -0.025em; font-weight: 800; }
h3 { font-size: 1.2rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.secao-sub { color: var(--texto-2); font-size: 1.12rem; max-width: 62ch; }

/* ----------------------------------------------------------- hero */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: center; min-height: min(860px, calc(100svh - 70px));
  padding-block: 24px 64px;
}
.hero-espaco { grid-column: 2; grid-row: 1; }
.hero-texto { grid-column: 1; grid-row: 1; display: grid; gap: 22px; }
h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.6rem); line-height: 1;
  letter-spacing: -0.04em; font-weight: 850;
}
.hero-sub { color: var(--texto-2); font-size: clamp(1.08rem, 1.5vw, 1.25rem); max-width: 30em; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 12px; }

.contagem {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  font: .86rem/1.4 var(--mono); color: var(--texto-2);
  border: 1px solid var(--borda); border-radius: 999px; padding: 10px 18px;
  width: fit-content; background: var(--vidro);
}
.contagem-item strong { color: var(--ouro-claro); display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.contagem-separador { color: var(--texto-3); }

.demo {
  margin: 10px 0 0; max-width: 34rem;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--vidro); padding: 14px 16px 16px;
  font-family: var(--mono); font-size: .9rem;
}
.demo-legenda {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  color: var(--texto-3); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--borda);
}
.demo-estado {
  color: var(--ouro); display: inline-flex; align-items: center; gap: 6px; min-width: 9.5em;
}
.demo-estado::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ouro); box-shadow: 0 0 8px var(--ouro);
}
.demo-pausa {
  margin-left: auto; background: none; border: 1px solid var(--borda);
  color: var(--texto-2); font: inherit; text-transform: none; letter-spacing: 0;
  padding: 6px 10px; border-radius: 8px; cursor: pointer; min-height: 32px;
}
.demo-pausa:hover { border-color: var(--borda-forte); color: var(--texto); }
.demo-linhas { display: grid; gap: 8px; min-height: 7.4em; align-content: start; }
.demo-linhas p { display: grid; grid-template-columns: 4.2em 1fr; gap: 8px; }
.demo-quem { color: var(--texto-3); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; padding-top: .2em; }
.demo-voce { color: var(--texto); }
.demo-atlas { color: var(--ouro-claro); }
.cursor::after { content: "▍"; color: var(--ouro); animation: pisca 1s steps(1) infinite; margin-left: 1px; }
@keyframes pisca { 50% { opacity: 0; } }

/* ----------------------------------------------------------- o que e */
.quatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--borda); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.modo { background: var(--vidro); padding: 28px 24px 30px; display: grid; gap: 12px; align-content: start; }
.modo h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.modo p { color: var(--texto-2); font-size: .98rem; }
.modo-icone { width: 44px; height: 44px; fill: none; stroke: var(--ouro); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ----------------------------------------------------------- funcoes */
.grupo-funcoes { margin-bottom: clamp(32px, 5vw, 56px); }
.grupo-funcoes:last-child { margin-bottom: 0; }
.grupo-titulo {
  font: 700 .82rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em;
  color: var(--ouro-claro); margin-bottom: 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--borda); display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.selo-divertido { color: var(--perigo); background: rgb(255 106 77 / .08); border: 1px solid rgb(255 106 77 / .35); font-weight: 600; text-transform: none; letter-spacing: 0; padding: 4px 10px; border-radius: 999px; font-family: var(--fonte); }
.cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cartao {
  background: var(--vidro); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 22px 22px 20px; display: grid; gap: 10px; align-content: start;
  grid-template-rows: auto auto 1fr auto;
  transition: border-color var(--entra), transform var(--entra);
}
.cartao:hover { border-color: var(--borda-forte); }
.cartao .selo { justify-self: start; }
.cartao p { color: var(--texto-2); font-size: .97rem; }
.cartao .exemplo {
  font: .85rem/1.45 var(--mono); color: var(--ouro-claro);
  border-top: 1px dashed var(--borda); padding-top: 12px; margin-top: 4px;
}
.cartao-largo { grid-column: span 2; }
.cartao-largo h3 { font-size: 1.5rem; }
.cartao-largo { background: linear-gradient(135deg, rgb(255 184 64 / .1), var(--vidro) 55%); border-color: var(--borda-forte); }

/* ----------------------------------------------------------- privacidade */
.fluxo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 24px; align-items: center; margin-bottom: 56px;
}
.fluxo-lado {
  background: var(--vidro); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 26px; display: grid; gap: 14px; height: 100%; align-content: start;
}
.fluxo-seta { display: grid; justify-items: center; gap: 6px; color: var(--texto-3); font: .74rem var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.fluxo-seta svg { width: 110px; fill: none; stroke: var(--ouro); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 6; }
.fluxo-nota { color: var(--texto-3); font-size: .93rem; }
.lista-check { display: grid; gap: 10px; }
.lista-check li { position: relative; padding-left: 28px; color: var(--texto-2); }
.lista-check li::before {
  content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px;
  border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg);
}
.lista-sai li::before { border-color: var(--ouro); }
.precos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.preco { background: var(--vidro); border: 1px solid var(--borda); border-radius: var(--raio); padding: 28px; display: grid; gap: 16px; align-content: start; }
.preco h3 { font-size: 1.4rem; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.preco-destaque { border-color: var(--borda-forte); background: linear-gradient(160deg, rgb(255 184 64 / .12), var(--vidro) 60%); }
.preco-valor { font: 800 2.6rem/1 var(--fonte); letter-spacing: -0.03em; color: var(--ouro-claro); }
.lista-opcional { display: grid; gap: 14px; }
.lista-opcional li { color: var(--texto-2); padding-left: 16px; border-left: 2px solid var(--borda); }
.lista-opcional strong { color: var(--texto); }
.nota-site { margin-top: 22px; color: var(--texto-3); font: .82rem var(--mono); }

/* ----------------------------------------------------------- box */
.box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.box-texto { display: grid; gap: 18px; }
.ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 6px 0 0; background: var(--borda); border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; }
.ficha div { background: var(--vidro); padding: 14px 16px; }
.ficha dt { font: 600 .7rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--texto-3); }
.ficha dd { margin: 4px 0 0; font-weight: 600; }
.box-arte { margin: 0; display: grid; gap: 10px; justify-items: center; }
.box-arte-fallback { width: 100%; max-width: 480px; height: auto; filter: drop-shadow(0 30px 60px rgb(255 140 20 / .12)); }
.box-arte figcaption { color: var(--texto-3); font: .78rem var(--mono); }
.box-3d-palco { position: relative; width: 100%; max-width: 480px; aspect-ratio: 420 / 340; }
.box-3d-canvas { width: 100%; height: 100%; display: block; }
/* sem WebGL ou JS: o canvas fica vazio (0x0 via JS) e o SVG de reserva aparece sozinho */
.box-3d-ok .box-arte-fallback { display: none; }
.box-3d-ok .box-3d-palco { display: block; }
.box-3d-palco { display: none; }
.box-3d-pausa {
  position: absolute; right: 8px; bottom: 8px; background: var(--vidro); border: 1px solid var(--borda);
  color: var(--texto-2); font: .78rem var(--fonte); padding: 6px 10px; border-radius: 8px; cursor: pointer; min-height: 36px;
}
.box-3d-pausa:hover { border-color: var(--borda-forte); color: var(--texto); }

/* ----------------------------------------------------------- beta */
.beta {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px);
  background: var(--vidro); border: 1px solid var(--borda-forte); border-radius: calc(var(--raio) + 8px);
  padding: clamp(24px, 4vw, 48px);
}
.beta-texto { display: grid; gap: 18px; align-content: start; }
.form { display: grid; gap: 18px; }
.form-aviso {
  border: 1px dashed var(--borda-forte); border-radius: 10px; padding: 12px 14px;
  color: var(--ouro-claro); font-size: .93rem; background: rgb(255 184 64 / .06);
}
.form-aberto .form-aviso { display: none; }
.campo { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.campo[hidden] { display: none; }
.campo label, .campo legend { font-weight: 600; font-size: .97rem; padding: 0; }
.opcional { color: var(--texto-3); font-weight: 400; }
input[type="text"], input[type="email"], textarea {
  min-height: var(--toque); width: 100%; padding: 12px 14px;
  background: var(--fundo); color: var(--texto); border: 1px solid var(--borda-forte);
  border-radius: 10px; font: inherit; resize: vertical;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus { border-color: var(--ouro); outline: 2px solid rgb(255 184 64 / .35); outline-offset: 0; }
input[aria-invalid="true"] { border-color: var(--perigo); }
.campo-isca {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.campo-consentimento .opcao { min-height: auto; border-radius: 10px; width: 100%; align-items: start; padding: 12px 14px; }
.campo-consentimento input { margin-top: 3px; flex-shrink: 0; }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.opcao {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--borda); border-radius: 999px; cursor: pointer; font-weight: 400 !important;
  color: var(--texto-2);
}
.opcao:has(input:checked) { border-color: var(--ouro); color: var(--texto); background: rgb(255 184 64 / .08); }
.opcao input { accent-color: var(--ouro); width: 18px; height: 18px; margin: 0; }
.campo-erro { color: #ffa08c; font-size: .9rem; }
.form .botao { justify-self: start; }
.form-status { min-height: 1.6em; color: var(--texto-2); font-size: .95rem; }
.form-status code { font-family: var(--mono); color: var(--ouro-claro); user-select: all; }

/* ----------------------------------------------------------- faq */
.faq { display: grid; max-width: 860px; border-top: 1px solid var(--borda); }
.faq details { border-bottom: 1px solid var(--borda); background: rgb(5 3 2 / .6); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 44px 20px 4px; position: relative;
  font-weight: 650; font-size: 1.08rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font: 400 1.6rem/1 var(--mono); color: var(--ouro); transition: transform var(--entra);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 4px 22px; color: var(--texto-2); max-width: 68ch; }

/* ----------------------------------------------------------- rodape */
.rodape {
  max-width: var(--larg); margin: 0 auto; padding: 40px var(--lado) calc(40px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--borda); display: grid; gap: 18px; background: var(--fundo);
}
.rodape-linha { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; color: var(--texto-2); }
.rodape-fino { color: var(--texto-3); font-size: .86rem; display: grid; gap: 6px; }

/* ----------------------------------------------------------- telas menores */
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav .botao-pequeno { margin-left: auto; }
  .quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 0 48px; }
  .hero-espaco { grid-column: 1; grid-row: 1; height: min(42svh, 360px); }
  .hero-texto { grid-row: 2; }
  .orbe-estatica { left: 50%; top: 27%; width: min(78vw, 360px); }
  .quatro, .cartoes, .precos, .box, .beta, .fluxo { grid-template-columns: minmax(0, 1fr); }
  .cartao-largo { grid-column: auto; }
  .fluxo-seta svg { transform: rotate(90deg); width: 64px; }
  .demo-pausa { margin-left: 0; }
  .box-arte { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}