/* Tarkov.space — página inicial.
   Mesma paleta do app: base escura dessaturada e acento cáqui, com o
   enquadramento anguloso da interface do jogo. */

:root {
  --bg: #101215;
  --bg-2: #16191e;
  --bg-3: #1c2027;
  --line: #2a2f38;
  --line-soft: #21252c;
  --text: #d8dbe0;
  --text-dim: #949aa4;
  --text-mute: #6b7280;
  --accent: #9a8866;
  --accent-hi: #c9b083;
  --ok: #7ba05b;
  --danger: #b4564e;
  --radius: 6px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

a { color: var(--accent-hi); }

h1, h2, h3, .brand {
  font-family: "Bahnschrift", "Segoe UI Semibold", system-ui, sans-serif;
  letter-spacing: .3px;
  line-height: 1.15;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 720px; }

.eyebrow {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  color: var(--accent);
  margin: 0 0 12px;
}

.body { color: var(--text-dim); margin: 0 0 26px; }

/* ───────────────────────── Botões ───────────────────────── */

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: #fff; }

.btn-primary {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border-color: var(--accent-hi);
  color: #14161a;
  font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.1); color: #14161a; }
.btn-ghost { background: transparent; }
.btn-lg { padding: 13px 28px; font-size: 15px; }

/* ───────────────────────── Topo ───────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Rede de segurança: numa tela mais estreita do que qualquer previsão, o
     cabeçalho quebra em duas linhas em vez de empurrar a página de lado. */
  flex-wrap: wrap;
  gap: 20px;
  padding: 14px 24px;
  background: rgba(16, 18, 21, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  color: var(--text);
  text-decoration: none;
}
.brand-logo { display: block; flex: none; }
.brand-text span { color: var(--accent); }
/* Duas classes de propósito: precisa ganhar da regra acima, que também
   alcança este span. */
.brand-text .tld { color: var(--accent); }

.topnav { display: flex; align-items: center; gap: 8px; }
.topnav > a:not(.btn) {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  padding: 8px 12px;
}
.topnav > a:not(.btn):hover { color: var(--text); }
/* A página em que já se está fica acesa, em vez de parecer um destino. */
.topnav > a[aria-current="page"] { color: var(--accent-hi); }

/* ───────────────────────── Hero ───────────────────────── */

.hero {
  position: relative;
  padding: 86px 24px 74px;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}

.hero-bg {
  position: absolute;
  inset: 0;
  /* A arte do mapa é enfeite: se não carregar, o gradiente segura o visual. */
  background:
    linear-gradient(180deg, rgba(16,18,21,.80) 0%, rgba(16,18,21,.94) 55%, var(--bg) 100%),
    radial-gradient(900px 420px at 70% 0%, rgba(154,136,102,.16), transparent 65%),
    /* A CDN do Fandom redimensiona pela URL: 90 KB em vez de 141 KB. */
    url("/assets/wiki/customs-banner.png")
      center 28% / cover no-repeat,
    var(--bg);
}

/* Trama fina por cima, lembrando a grade dos painéis do jogo. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(154,136,102,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,136,102,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(900px 460px at 50% 30%, #000 30%, transparent 78%);
}

.hero-inner { position: relative; max-width: 1080px; margin: 0 auto; }

.hero h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 5.6vw, 60px);
  font-weight: 600;
}
.hero h1 span { color: var(--accent-hi); }

.lede {
  max-width: 620px;
  margin: 0 0 32px;
  font-size: 17px;
  color: var(--text-dim);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 52px; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  margin: 0;
  max-width: 620px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.stats > div { background: rgba(22, 25, 30, .82); padding: 16px 18px; }
.stats dt {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--text-mute);
  /* Espaço de duas linhas em todos: "Estações do Hideout" quebra e "Quests"
     não, e sem isto os números dos quatro quadros ficariam em alturas
     diferentes lado a lado. */
  min-height: 3.3em;
}
.stats dd {
  margin: 4px 0 0;
  font-size: 28px;
  font-weight: 600;
  color: var(--accent-hi);
  font-family: "Bahnschrift", system-ui, sans-serif;
}

/* ───────────────────────── Seções ───────────────────────── */

.section { padding: 82px 0; }
.section-alt { background: var(--bg-2); border-block: 1px solid var(--line-soft); }

.section h2 {
  margin: 0 0 18px;
  font-size: clamp(25px, 3.4vw, 36px);
  font-weight: 600;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
  margin-top: 38px;
}

.card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: border-color .18s, transform .18s;
}
.card:hover { border-color: var(--line); transform: translateY(-2px); }

/* Cantos em L: a moldura angulosa dos painéis do jogo. */
.card::before,
.card::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border: 2px solid var(--accent);
  opacity: .5;
}
.card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.card::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.card-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-3);
  color: var(--accent-hi);
  margin-bottom: 16px;
}
.card-icon svg { width: 21px; height: 21px; }

.card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.card p { margin: 0; color: var(--text-dim); font-size: 14.5px; }

/* ───────────────────────── Amostra da busca ───────────────────────── */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center;
}

.demo {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .45);
}

.demo-search {
  background: var(--bg-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 10px 13px;
  color: var(--text);
  font-size: 14px;
  margin-bottom: 14px;
}

.demo-card {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 14px;
}
.demo-title { font-size: 15px; margin-bottom: 10px; }

.demo-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tag {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 3px;
  border: 1px solid;
}
.tag-quest   { color: #8fb8d0; border-color: rgba(143,184,208,.4); background: rgba(143,184,208,.09); }
.tag-hideout { color: var(--accent-hi); border-color: rgba(201,176,131,.4); background: rgba(201,176,131,.09); }
.tag-fir     { color: #d99a94; border-color: rgba(180,86,78,.45); background: rgba(180,86,78,.12); font-weight: 700; }

.demo-row {
  display: flex;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.demo-row span {
  flex: none;
  width: 62px;
  color: var(--text-mute);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .7px;
  padding-top: 2px;
}
.demo-row em { font-style: normal; color: var(--text-dim); }

/* ───────────────────────── Perguntas ───────────────────────── */

.faq { margin-top: 30px; }

.faq details {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-2);
  margin-bottom: 9px;
}
.faq summary {
  padding: 15px 18px;
  cursor: pointer;
  font-size: 15px;
  color: var(--text);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+";
  flex: none;
  color: var(--accent);
  font-size: 17px;
  line-height: 1;
  width: 12px;
}
.faq details[open] summary::before { content: "−"; }
.faq details[open] summary { padding-bottom: 6px; }
.faq p {
  margin: 0;
  padding: 0 18px 16px 42px;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.7;
}

/* ───────────────────────── Apoio ───────────────────────── */

/* Centralizado e com o coração no topo: pede sem gritar, e se distingue das
   outras seções sem precisar de cor berrante. */
.support {
  position: relative;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(154, 136, 102, .10), transparent 62%),
    var(--bg);
  padding: 46px 32px 38px;
}

.support-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--accent-hi);
}
.support-icon svg { width: 23px; height: 23px; }

.support .eyebrow { margin-bottom: 8px; }
.support h2 { margin-bottom: 14px; }

/* Selo do "sem anúncios": é a promessa que justifica o pedido, então ganha
   destaque próprio em vez de se perder no meio do parágrafo. */
.support-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 18px;
  padding: 5px 13px 5px 10px;
  border: 1px solid rgba(123, 160, 91, .35);
  border-radius: 999px;
  background: rgba(123, 160, 91, .10);
  color: var(--ok);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.support-badge svg { width: 14px; height: 14px; flex: none; }
.support .body {
  margin: 0 auto 26px;
  max-width: 54ch;
}

.support-note {
  margin: 16px auto 0;
  max-width: 46ch;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-mute);
}

@media (max-width: 560px) {
  .support { padding: 34px 20px 28px; }
}

/* ───────────────────────── Formulário ───────────────────────── */

.form { margin-top: 30px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block;
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.field > span em { color: var(--text-mute); font-style: normal; }

.field input,
.field textarea {
  width: 100%;
  padding: 11px 13px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  resize: vertical;
}
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--accent); }
.field input:user-invalid,
.field textarea:user-invalid { border-color: var(--danger); }

/* Fora da tela, mas não escondida do preenchimento automático dos robôs. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-msg {
  padding: 11px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  margin: 0 0 16px;
  border: 1px solid;
}
.form-msg.ok  { background: rgba(123,160,91,.12); border-color: rgba(123,160,91,.45); color: #a8c78c; }
.form-msg.err { background: rgba(180,86,78,.12); border-color: rgba(180,86,78,.45); color: #e2938c; }

/* ───────────────────────── Rodapé ───────────────────────── */

.footer {
  border-top: 1px solid var(--line-soft);
  padding: 44px 0;
  background: var(--bg-2);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 34px;
  flex-wrap: wrap;
}
.footer p {
  max-width: 460px;
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.7;
}
.footer .copyright { color: var(--text-dim); }
/* A licença CC BY-SA do wiki exige crédito; fica discreto, mas fica. */
.footer-links { display: flex; flex-direction: column; gap: 9px; }
.footer-links a { color: var(--text-dim); text-decoration: none; font-size: 14px; }
.footer-links a:hover { color: var(--accent-hi); }

/* ───────────────────────── Telas estreitas ───────────────────────── */

@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
  .section { padding: 60px 0; }
  .hero { padding: 60px 20px 56px; }
}

@media (max-width: 560px) {
  .topnav > a:not(.btn) { display: none; }
  .topbar { padding: 12px 14px; gap: 10px; }
  .form-row { grid-template-columns: 1fr; }
  .hero-cta .btn { flex: 1; text-align: center; }

  /* Mesmo sem os links de seção, o que sobrava na barra do topo não cabia
     numa tela de celular e empurrava a página inteira para o lado. */
  .brand { font-size: 17px; gap: 8px; }
  .brand-logo { width: 24px; height: 24px; }
  .topnav { gap: 6px; }
  .topnav .btn { padding: 8px 12px; font-size: 13px; }
  .lang-toggle button, .lang-toggle a { padding: 6px 8px; font-size: 11px; }

  /* "Entrar" sai da barra: o hero já oferece "Já tenho conta" logo abaixo, e
     manter os dois botões aqui é o que não cabe. */
  .topnav .btn-ghost { display: none; }

  .footer-inner { flex-direction: column; gap: 22px; }
  .footer-links { flex-wrap: wrap; }
}

/* Telas bem estreitas: a marca perde o domínio, que é o pedaço mais largo e
   o menos necessário para reconhecê-la. */
@media (max-width: 380px) {
  .brand-text .tld { display: none; }
  .topbar { padding: 10px; gap: 8px; }
  .topnav .btn { padding: 7px 10px; font-size: 12px; }
  .lang-toggle button, .lang-toggle a { padding: 6px 7px; }
}

/* Alternador de idioma: os dois visíveis, o atual em destaque. */
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);
}
.lang-toggle a {
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--text-mute);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.lang-toggle a:hover { color: var(--text); background: var(--bg-3); }
.lang-toggle a + a { border-left: 1px solid var(--line-soft); }

/* O idioma da página vem no data-lang, então o destaque não depende de JS. O
   par é data-lang-is e não o href: as páginas com uma URL por idioma apontam
   para endereços diferentes, e casar por href pedia uma regra para cada uma. */
.lang-toggle[data-lang="en"] a[data-lang-is="en"],
.lang-toggle[data-lang="pt"] a[data-lang-is="pt"] {
  background: var(--accent);
  color: #14161a;
}

/* Nas páginas de termos e privacidade o toggle é botão: elas têm uma URL só
   para os dois idiomas, então não há para onde apontar um link. */
.lang-toggle button {
  padding: 7px 11px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--text-mute);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.lang-toggle button:hover { color: var(--text); background: var(--bg-3); }
.lang-toggle button + button { border-left: 1px solid var(--line-soft); }
.lang-toggle[data-lang="en"] button[data-lang-set="en"],
.lang-toggle[data-lang="pt"] button[data-lang-set="pt"] {
  background: var(--accent);
  color: #14161a;
}

/* ───────────────────────── Termos e privacidade ───────────────────────── */

.legal h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
}

.legal-updated {
  margin: 0 0 40px;
  font-size: 13px;
  color: var(--text-mute);
}

.legal-sec { margin-bottom: 38px; }
.legal-sec h2 {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 600;
  color: var(--accent-hi);
}
.legal-sec p {
  margin: 0 0 14px;
  color: var(--text-dim);
  line-height: 1.75;
}
.legal-sec ul {
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--text-dim);
}
.legal-sec li { margin-bottom: 8px; line-height: 1.7; }

.legal-back {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
}
.legal-back a { text-decoration: none; }
.legal-back a:hover { text-decoration: underline; }

/* ─────────── Novidade em teste ───────────
   Fica entre os recursos prontos e o apoio. O tom é de anúncio, não de
   promessa: a funcionalidade existe, roda, e ainda não está liberada. */
.section-novidade {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(154, 136, 102, .09), transparent 70%);
}
.section-novidade .eyebrow::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}
.novidade-passos {
  margin: 22px 0;
  padding-left: 20px;
  line-height: 1.9;
  color: var(--text-dim);
}
.novidade-passos li::marker { color: var(--accent); font-weight: 600; }
.novidade-nota,
.novidade-status {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-dim);
}
.novidade-status {
  padding-left: 12px;
  border-left: 2px solid var(--accent);
}

/* ─────────── Criadores de conteúdo ───────────
   Convite, não vitrine: fica alinhado à esquerda como o resto do texto, com
   os itens marcados por um traço em vez de bolinha — é uma lista do que está
   na mesa, e não uma contagem de recursos. */
.creators-list {
  margin: 24px 0 20px;
  padding: 0;
  list-style: none;
  color: var(--text-dim);
}
.creators-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
  line-height: 1.7;
}
.creators-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .82em;
  width: 12px;
  height: 2px;
  background: var(--accent);
}

.creators-note {
  margin: 0 0 26px;
  padding-left: 12px;
  border-left: 2px solid var(--line);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-mute);
}

.creators-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ───────────────────────── Streamers parceiros ───────────────────────── */

.parceiros-titulo {
  margin: 0 0 16px;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
}

.parceiros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 32px 0 48px;
}

/* Coluna com o link empurrado para o fim: entre um parceiro que escreveu uma
   frase e outro que não escreveu, os botões continuam alinhados na linha. */
.parceiro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px 20px;
  transition: border-color .18s, transform .18s;
}
.parceiro:hover { border-color: var(--line); transform: translateY(-2px); }

.parceiro-selo {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-3);
  color: var(--accent-hi);
  font-family: "Bahnschrift", "Segoe UI Semibold", system-ui, sans-serif;
  font-size: 22px;
}
.parceiro-selo img { width: 100%; height: 100%; object-fit: cover; }

.parceiro-nick {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  /* Nick de streamer costuma ser uma palavra só, e às vezes uma bem longa. */
  overflow-wrap: anywhere;
}
.parceiro-marcas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.parceiro-sobre {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-dim);
}
.parceiro-link { margin-top: auto; padding: 8px 14px; font-size: 13px; }

/* Sem parceiros ainda: o espaço vira o convite, em vez de uma grade vazia
   dizendo que ninguém quis. */
.parceiros-vazio {
  margin: 32px 0 48px;
  padding: 26px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--text-dim);
  line-height: 1.75;
}

.parceiros-como { margin-top: 8px; }
.parceiros-como h2 {
  margin: 36px 0 14px;
  font-size: 20px;
  font-weight: 600;
  color: var(--accent-hi);
}
.parceiros-passos {
  margin: 0 0 8px;
  padding-left: 20px;
  line-height: 1.9;
  color: var(--text-dim);
}
.parceiros-passos li::marker { color: var(--accent); font-weight: 600; }