/* A mesma linguagem do app: console escuro de alto contraste, âmbar como
   destaque, verde de LCD para números. A paleta por instrumento é a do app,
   constante em todo lugar. */

:root {
  --fundo: #121110;
  --painel: #171614;
  --relevo-alto: #34322e;
  --relevo-baixo: #211f1c;
  --borda: #0a0a09;
  --texto: #e8e2d8;
  --apagado: #8a8379;
  --ambar: #f2a93b;
  --verde: #6ee7a0;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: linear-gradient(#1c1b19, var(--fundo) 600px);
  background-repeat: no-repeat;
  background-color: var(--fundo);
  color: var(--texto);
  font: 17px/1.6 var(--sans);
}

a { color: var(--ambar); }

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); text-align: center; margin-bottom: 1.2em; }
h3 { font-size: 1.1rem; }

.lead { font-size: 1.15rem; color: var(--texto); max-width: 36em; }
.centro { text-align: center; margin-inline: auto; }
.nota { color: var(--apagado); font: 13px var(--mono); }

/* ---------- topo ---------- */

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}
.marca {
  font: 700 18px var(--mono);
  color: var(--texto);
  text-decoration: none;
  letter-spacing: .04em;
}
.topo nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.topo nav a:not(.botao) { color: var(--apagado); text-decoration: none; font-size: 15px; }
.topo nav a:not(.botao):hover { color: var(--texto); }

/* ---------- botões em relevo, como os do app ---------- */

.botao {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: linear-gradient(#f6b955, #d98f22);
  color: #1a1206;
  font: 700 15px var(--mono);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 var(--borda);
}
.botao:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.botao small { font-weight: 400; font-size: 12px; opacity: .75; }
.botao.fantasma {
  background: linear-gradient(var(--relevo-alto), var(--relevo-baixo));
  color: var(--texto);
}
.botao.pequeno { min-height: 34px; padding: 6px 14px; font-size: 13px; }
.botao.desligado {
  background: var(--relevo-baixo);
  color: var(--apagado);
  box-shadow: none;
  cursor: default;
}

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 16px 80px;
}
.acoes { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 12px; }

/* O mockup do console */
.console {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 #2a2825;
  font: 12px var(--mono);
}
.lcd-linha {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: #0b0f0c;
  border: 1px solid var(--borda);
  border-radius: 6px;
}
.lcd {
  font-size: 34px;
  line-height: 1;
  color: var(--verde);
  text-shadow: 0 0 8px rgba(110,231,160,.45);
  font-variant-numeric: tabular-nums;
}
.faixa { color: var(--texto); }
.faixa small { color: var(--apagado); }

.fader {
  display: grid;
  grid-template-columns: 64px 1fr 22px;
  align-items: center;
  gap: 10px;
  height: 30px;
  color: var(--cor);
}
.fader span { color: var(--texto); }
.fader i {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--cor) var(--v), var(--relevo-baixo) var(--v));
}
.fader i::after {
  content: "";
  position: absolute;
  left: var(--v);
  top: 50%;
  width: 12px;
  height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  background: linear-gradient(#e8e2d8, #9d978e);
  border: 1px solid var(--borda);
}
.fader b {
  grid-column: 3;
  text-align: center;
  font-size: 11px;
  border-radius: 3px;
  background: var(--ambar);
  color: #1a1206;
}
.fader.mudo span { color: var(--apagado); text-decoration: line-through; }

/* ---------- seções ---------- */

.secao { max-width: 1100px; margin: 0 auto; padding: 72px 16px; }

.grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.grade article, .plano {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 24px;
  box-shadow: inset 0 1px 0 #2a2825;
}
.grade p { color: var(--apagado); margin: 0; }

.passos ol {
  max-width: 640px;
  margin: 0 auto;
  padding-left: 1.4em;
  display: grid;
  gap: 14px;
  font-size: 1.1rem;
}
.passos li::marker { color: var(--ambar); font-family: var(--mono); font-weight: 700; }

.planos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 380px));
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
}
.plano { display: flex; flex-direction: column; }
.plano ul { padding-left: 1.2em; margin: 0 0 24px; flex: 1; color: var(--apagado); }
.plano li { margin-bottom: 6px; }
.plano strong { color: var(--texto); }
.plano.destaque { border-color: var(--ambar); }
.preco { font: 700 2.2rem var(--mono); color: var(--verde); margin: 0 0 16px; }
.preco small { font-size: 14px; color: var(--apagado); font-weight: 400; }

.downloads { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.downloads .botao { min-width: 180px; padding: 16px 24px; font-size: 18px; }

.faq { max-width: 760px; }
.faq details {
  border-bottom: 1px solid var(--relevo-alto);
  padding: 16px 0;
}
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { color: var(--apagado); margin: 10px 0 0; }

.rodape {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 40px 16px;
  color: var(--apagado);
  font: 13px var(--mono);
  border-top: 1px solid var(--borda);
}
.rodape a { color: var(--apagado); }

/* ---------- telas estreitas ---------- */

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 32px; }
  .grade { grid-template-columns: 1fr; }
  .planos { grid-template-columns: minmax(0, 1fr); }
  .topo nav a:not(.botao) { display: none; }
}

/* ---------- 404 ---------- */

.perdido { text-align: center; padding-top: 96px; }
.perdido .lcd { font-size: 96px; margin: 0 0 24px; }
.perdido .lead { margin-bottom: 32px; }