/* Landing nova da Moradiq · conceito B (A chave da carteira)
   Medidas tiradas de design-imagem/mockups/hero-b.png (1376 px → 1440 px de largura). */
:root {
  --fundo: #12100e;
  --fundo-2: #1a1714;
  --texto: #f5efe6;
  --texto-2: #b0a698;
  --linha: #2a2521;
  --laranja: #ff7a00;
  --laranja-claro: #ff8a00;
  --ambar: #ffb800;
  --titulo: 'Plus Jakarta Sans', system-ui, sans-serif;
  --corpo: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --larg: 1200px;
  --margem: clamp(20px, 5vw, 120px);
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 1rem/1.6 var(--corpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* grão de filme bem leve */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 50;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- topo ---------- */
.topo { position: absolute; inset: 0 0 auto; z-index: 10; }
.topo__in {
  max-width: calc(var(--larg) + 2 * var(--margem));
  margin: 0 auto;
  padding: 26px var(--margem) 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.marca { display: inline-flex; align-items: center; gap: 10px; font: 700 1.375rem/1 var(--titulo); letter-spacing: -0.02em; justify-self: start; }
.topo__links { display: flex; gap: 38px; font-size: 1.0625rem; color: var(--texto-2); }
.topo__links a { transition: color .2s; }
.topo__links a:hover { color: var(--texto); }
.topo__acoes { justify-self: end; display: flex; align-items: center; gap: 22px; }
.topo__entrar { color: var(--texto-2); font-size: 1rem; }
.topo__entrar:hover { color: var(--texto); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  border-radius: 10px;
  font: 500 1.0625rem/1 var(--corpo);
  transition: transform .2s var(--curva), background-color .2s, border-color .2s;
}
.btn:active { transform: scale(0.97); }
.btn--primario { background: var(--laranja); color: #1a0d00; }
.btn--primario:hover { background: var(--laranja-claro); }
.btn--contorno { border: 1px solid rgba(245, 239, 230, 0.55); color: var(--texto); }
.btn--contorno:hover { border-color: var(--texto); }
.btn--pilula { min-height: 42px; padding: 0 20px; border-radius: 999px; background: var(--laranja-claro); color: #1a0d00; font-size: 1rem; }
.btn--pilula:hover { background: var(--ambar); }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; border-radius: 6px; }

/* ---------- herói ---------- */
.heroi {
  position: relative;
  min-height: max(720px, 100svh);
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  /* luz quente vindo do alto à direita, atrás da chave */
  background:
    radial-gradient(60% 70% at 88% 8%, rgba(255, 122, 0, 0.22), transparent 62%),
    radial-gradient(40% 45% at 72% 58%, rgba(255, 138, 0, 0.07), transparent 70%),
    var(--fundo);
}
.heroi__in {
  width: 100%;
  max-width: calc(var(--larg) + 2 * var(--margem));
  margin: 0 auto;
  padding: 112px var(--margem) 8px;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: 24px;
}
.heroi__titulo {
  margin: 0;
  font: 800 clamp(3.25rem, 7.4vw, 7rem)/0.98 var(--titulo);
  letter-spacing: -0.032em;
  word-spacing: 0.05em;
  text-wrap: balance;
  max-width: 11ch;
}
.heroi__titulo em { font-style: normal; color: var(--laranja-claro); }
.heroi__apoio {
  margin: 28px 0 0;
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  line-height: 1.5;
  color: var(--texto-2);
  text-wrap: pretty;
}
.heroi__botoes { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }

/* chave 3D */
.heroi__chave {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-height: min(600px, calc(100svh - 230px));
  justify-self: center;
}
.heroi__chave canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1s var(--curva); }
.heroi__chave.is-3d canvas { opacity: 1; }
/* dá para pegar a chave e girar; a rolagem vertical do celular continua livre */
.heroi__chave.is-3d { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.heroi__chave.is-pegando { cursor: grabbing; }
/* no desktop o canvas passa da coluna: o chaveiro precisa de espaço para balançar sem a chave encolher */
@media (min-width: 961px) {
  .heroi__chave canvas { inset: auto; left: -20%; top: -16%; width: 146% !important; height: 128% !important; pointer-events: none; }
}
.heroi__poster { position: absolute; inset: 8% 6%; width: 88%; height: 84%; object-fit: contain; transition: opacity .6s; }
.heroi__chave.is-3d .heroi__poster { opacity: 0; }
.heroi__reflexo {
  position: absolute; left: 12%; right: 12%; bottom: 2%; height: 12%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 138, 0, 0.32), transparent 72%);
  filter: blur(14px);
  pointer-events: none;
}

/* fatos em fonte de livro-caixa */
.fatos {
  list-style: none;
  margin: 0 auto;
  padding: 18px var(--margem) 30px;
  width: 100%;
  max-width: calc(var(--larg) + 2 * var(--margem));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  font: 400 clamp(0.9375rem, 1.35vw, 1.3125rem)/1.3 var(--mono);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}
/* picote pontilhado acima, como rodapé de livro-caixa */
.fatos { position: relative; }
.fatos::before { content: ""; position: absolute; top: 0; left: var(--margem); right: var(--margem); border-top: 1px dashed rgba(245, 239, 230, 0.2); }
.fatos li { padding: 4px 0; }
.fatos li + li { border-left: 1px solid var(--linha); }
.fatos li:nth-child(2) { text-align: center; }
.fatos li:nth-child(3) { text-align: right; }

/* entrada do texto: uma vez só, curta */
@media (prefers-reduced-motion: no-preference) {
  .heroi__titulo, .heroi__apoio, .heroi__botoes { animation: subir 1s var(--curva) both; }
  .heroi__apoio { animation-delay: .12s; }
  .heroi__botoes { animation-delay: .22s; }
  @keyframes subir { from { opacity: 0; transform: translateY(18px); } }
}

/* ---------- tablet e celular ---------- */
@media (max-width: 960px) {
  .topo__links { display: none; }
  .topo__in { grid-template-columns: 1fr auto; padding-top: max(18px, env(safe-area-inset-top)); }
  .heroi {
    min-height: 100svh;
    background:
      radial-gradient(90% 50% at 70% 18%, rgba(255, 122, 0, 0.26), transparent 65%),
      var(--fundo);
  }
  .heroi__in { grid-template-columns: 1fr; padding-top: 64px; padding-bottom: 0; gap: 0; align-content: start; }
  /* a chave ocupa a largura toda e fica grande: é o primeiro olhar */
  .heroi__chave {
    order: -1;
    width: calc(100% + 2 * var(--margem));
    margin: 0 calc(-1 * var(--margem)) 0;
    aspect-ratio: auto;
    height: clamp(260px, 42svh, 420px);
    max-height: none;
  }
  .heroi__reflexo { left: 25%; right: 25%; bottom: 4%; }
  .heroi__titulo { max-width: 12ch; font-size: clamp(2.75rem, 12.5vw, 4.5rem); }
  .heroi__apoio { margin-top: 16px; font-size: 1.0625rem; }
  .heroi__botoes { margin-top: 24px; flex-direction: column; align-items: stretch; gap: 4px; }
  .heroi__botoes .btn--contorno { border: 0; min-height: 44px; color: var(--texto-2); text-decoration: underline; text-underline-offset: 4px; }
  /* fatos numa linha só, como rodapé do herói */
  .fatos {
    display: flex; flex-wrap: wrap; gap: 6px 0;
    padding: 18px var(--margem) max(22px, env(safe-area-inset-bottom));
    font-size: 0.8125rem;
    color: var(--texto-2);
  }
  .fatos li, .fatos li:nth-child(2), .fatos li:nth-child(3) { text-align: left; border: 0; padding: 0; }
  .fatos li + li::before { content: '·'; margin: 0 10px; color: var(--laranja); }
}
@media (max-width: 520px) {
  .topo__entrar { display: none; }
  .fatos li:nth-child(3) { display: none; }
}