/* ============================================================================
   SITE 02 · «ORBIT» — PÁGINA HOME  (index.html)
   Escopo: .page-home · prefixo .hm-
   ----------------------------------------------------------------------------
   Só o que é exclusivo desta página. Tudo o mais vem de tokens.css, base.css e
   components.css. Nenhum hex literal, nenhuma regra de exceção de prioridade,
   nenhuma classe de outra página. Mobile-first · breakpoints 640/900/1200/1600.

   SUMÁRIO
     01  Hero — palco do mockup de desktop
     02  Faixa de cotações
     03  Passos
     04  Plataforma / celular
     05  Métricas
     06  Classes de ativos (quebra de grade)
     07  Confiança e regulação
     08  Contas
     09  Suporte
     10  Por que ficam + fecho
   ========================================================================== */


/* ==========================================================================
   §01 · HERO
   O mockup é conteúdo, não enfeite: ganha o próprio palco, com folga
   reservada para a deriva do parallax (o ADENDO proíbe decorativo que encosta).
   ====================================================================== */

.page-home .hm-hero { padding-block-start: var(--s-9); }

.page-home .hm-hero__copy {
  max-width: 34rem;
  gap: var(--s-6);
}

/* O display continua enorme (salto de ~4.5× sobre o corpo), com teto um pouco
   abaixo do token: assim o CTA duplo e os chips de confiança cabem na primeira
   tela de um laptop de 1440 × 800. */
.page-home .hm-hero h1 { font-size: clamp(2.5rem, 5vw, 4.75rem); }

/* O terminal é estreito quando cabe em 5/12 da grade: a lista de cotações
   precisa de mais coluna e de um corpo menor para as três informações da
   linha (símbolo · preço · variação) não se encavalarem. */
.page-home .hm-hero .dv-grid--2 { grid-template-columns: 1fr; }

.page-home .hm-hero .dv-row {
  gap: var(--s-2);
  font-size: .6875rem;
}

.page-home .hm-hero .dv-row__chg { font-size: .625rem; }

@media (min-width: 1200px) {
  .page-home .hm-hero .dv-grid--2 {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.75fr);
  }
}

.page-home .hm-hero__chips { margin-block-start: var(--s-2); }

.page-home .hm-hero__stage {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-block: var(--s-6);          /* folga do parallax (−0.05) */
}

.page-home .hm-hero__caption { align-self: flex-start; }

@media (min-width: 900px) {
  .page-home .hm-hero__stage { padding-block-start: var(--s-9); }
}

/* Quebra de grade intencional 1/2: acima de 1200px o terminal avança sobre a
   goteira direita. O corte fica a cargo do .has-timbre (overflow: hidden), de
   modo que a página nunca rola na horizontal. */
@media (min-width: 1200px) {
  .page-home .hm-hero__stage { margin-inline-end: calc(var(--gutter) * -1.4); }
  /* com o celular sobreposto, o sangramento fica por conta dele: o desktop
     recua e o telefone é quem avança sobre a goteira */
  .page-home .hm-hero__stage .device-stack { margin-inline-end: calc(var(--gutter) * 1.4 + var(--s-8)); }
}

@media (min-width: 1600px) {
  .page-home .hm-hero__stage { margin-inline-end: calc(var(--gutter) * -2); }
}


/* ==========================================================================
   §02 · FAIXA DE COTAÇÕES
   ====================================================================== */

.page-home .hm-tape__foot {
  margin-block-start: var(--s-5);
  row-gap: var(--s-2);
}

.page-home .hm-tape__foot .ticker__note { margin-block-start: 0; }

.page-home .hm-tape__clock {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
}

.page-home .hm-tape__clock strong {
  color: var(--fg-muted);
  font-weight: var(--fw-medium);
}


/* ==========================================================================
   §03 · PASSOS
   ====================================================================== */

.page-home .hm-steps .step-card__n { letter-spacing: var(--tr-meta); }

.page-home .hm-steps .card__meta { margin-block-start: auto; }


/* ==========================================================================
   §04 · PLATAFORMA / CELULAR
   ====================================================================== */

.page-home .hm-mobile__stage {
  display: flex;
  justify-content: center;
  padding-block: var(--s-5);          /* folga do parallax (0.04) */
}

/* A barra inferior do aparelho usa margin-block-start:auto — para isso o
   conteúdo da tela precisa de altura própria. */
.page-home .hm-phone__body { min-height: 100%; }

@media (min-width: 900px) {
  .page-home .hm-mobile__stage { justify-content: flex-start; }
}


/* ==========================================================================
   §05 · MÉTRICAS
   ====================================================================== */

.page-home .hm-stats__head { margin-block-end: var(--gap); }

.page-home .hm-stats .stat__value { letter-spacing: -.035em; }


/* ==========================================================================
   §06 · CLASSES DE ATIVOS
   Split 4/8: coluna de texto + foto-assinatura à esquerda, cartões à direita.
   Quebra de grade intencional 2/2: o cartão de Forex ocupa as duas colunas.
   ====================================================================== */

.page-home .hm-classes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.page-home .hm-classes__cell { min-width: 0; display: flex; }

.page-home .hm-classes__cell > .card { width: 100%; }

@media (min-width: 640px) {
  .page-home .hm-classes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-home .hm-classes__cell--wide { grid-column: 1 / -1; }
}

.page-home .hm-classes__photo {
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
}

/* Ponto focal — a caixa é 3/4 e a foto é 4/3: o corte é HORIZONTAL, a altura
   inteira aparece. A fachada curva é simétrica, o centro serve. */
.page-home .hm-classes__photo img { object-position: 50% 50%; }

@media (min-width: 900px) {
  .page-home .hm-classes__photo { margin-inline: 0; max-width: none; }
}

/* Acima de 1200px a coluna de texto acompanha a rolagem dos cartões. */
@media (min-width: 1200px) {
  .page-home .hm-classes__aside {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--header-gap) + var(--s-7));
  }
}

.page-home .hm-classes .card__title a { color: inherit; }
.page-home .hm-classes .card__title a:hover { color: var(--accent-strong); }


/* ==========================================================================
   §07 · CONFIANÇA E REGULAÇÃO  (bloco escuro 1 de 2)
   ====================================================================== */

/* MUDANÇA DE LAYOUT (não de foto). `team-meeting-01` tem 40% da altura em
   parede lisa acima das cabeças — espaço deixado de propósito para receber
   texto. Numa caixa RETRATO (era 3/4) o `cover` corta na largura: a altura
   entra inteira, o vazio fica, e nenhum valor de Y o remove. Além disso só
   entravam 800 dos 1600 px — três das cinco pessoas.
   A caixa passa a ser PANORÂMICA (21/9). Aí o eixo que corta é o outro: a
   largura entra inteira (as cinco pessoas voltam) e a altura perde 36%, que é
   exatamente onde vivia o vazio. Aqui o Y manda e o X é inerte. */
.page-home .hm-trust__photo {
  width: 100%;
  margin-inline: auto;
}

/* Ponto focal — janela de 686 dos 1067 px. Em 100% ela encosta na base: entra
   de y 381 a 1067. O topo das cabeças está em y 539, então sobram 158 px de
   parede (23% da janela) — respiro de cabeça, não buraco — e a base fecha na
   mesa, que ancora a composição. */
.page-home .hm-trust__photo img { object-position: 50% 100%; }

/* A faixa é bem mais baixa que a coluna de texto. Centrada, ela boiava no meio
   do azul; encostada na base ela fecha a linha do cartão de aviso à direita e
   abre a dos três cartões logo abaixo — o bloco volta a ter grade. */
@media (min-width: 900px) {
  .page-home .hm-trust__photo { align-self: end; }
}

/* Os três cartões de placeholder ficam FORA do split, em largura total: dentro
   da coluna de 7/12 as linhas quebravam em duas palavras. */
.page-home .hm-trust__grid { margin-block-start: var(--gap-lg); }

/* Placeholder de marca — mono, para ficar óbvio que é um campo a preencher */
.page-home .hm-trust__token {
  font-family: var(--ff-mono);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  letter-spacing: -.01em;
  color: var(--accent);
  overflow-wrap: anywhere;
}


/* ==========================================================================
   §08 · CONTAS
   Cinco tiers: 1 → 2 → 3 → 5 colunas. O Professional é o único .card--feature.
   ====================================================================== */

.page-home .hm-tiers__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.page-home .hm-tiers__grid > li { min-width: 0; display: flex; }

.page-home .hm-tiers__grid > li > .card { width: 100%; }

@media (min-width: 640px) {
  .page-home .hm-tiers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .page-home .hm-tiers__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .page-home .hm-tiers__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.page-home .hm-tiers__price {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--fg);
}

/* Nas cinco colunas o cartão fica estreito: o valor cai um degrau para
   `US$ 1,000,000` não quebrar em duas linhas. */
@media (min-width: 1200px) {
  .page-home .hm-tiers__price { font-size: 1.125rem; }
}

.page-home .hm-tiers__badge { margin-block-end: var(--s-1); }

/* Imperfeição controlada — uma só na página. */
.page-home .hm-tiers__badge .badge { transform: rotate(-1.2deg); }

.page-home .hm-tiers .card__title a { color: inherit; }
.page-home .hm-tiers .card__title a:hover { color: var(--accent-strong); }

.page-home .hm-tiers__star { z-index: var(--z-base); }


/* ==========================================================================
   §09 · SUPORTE
   ====================================================================== */

.page-home .hm-support__photo { aspect-ratio: 4 / 3; }

/* Ponto focal — em 4/3, 3/4 e 1/1 a caixa é sempre mais estreita que a foto
   (3/2): corta na largura, nunca na altura. O agente fica no centro. */
.page-home .hm-support__photo img { object-position: 50% 40%; }

@media (min-width: 900px) {
  .page-home .hm-support__photo { aspect-ratio: 3 / 4; }
}

@media (min-width: 1200px) {
  .page-home .hm-support__photo { aspect-ratio: 1; }
}

/* Véu medido, não estimado: com o gradiente padrão o olho em `--tint` caía a
   3.82 : 1 sobre a parte clara da foto, e a 4.16 : 1 no celular (a caixa muda
   de 1/1 para 4/3 e a legenda sobe para fora do degrau). Este degrau mantém a
   base opaca até 42% da altura — o pior pixel medido dá 5.64 : 1 no olho e
   6.64 : 1 na linha branca, nas quatro larguras. */
.page-home .hm-support__photo.photo--veil-bottom::after {
  background-image: linear-gradient(
    to top,
    var(--veil-hard) 0%,
    var(--veil-hard) 42%,
    var(--veil-soft) 74%,
    transparent 92%
  );
}

.page-home .hm-support__over-line {
  margin-block-start: var(--s-2);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
}


/* ==========================================================================
   §10 · POR QUE FICAM + FECHO  (bloco escuro 2 de 2)
   Lista numerada larga — não são quatro cartões iguais.
   ====================================================================== */

.page-home .hm-why__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-block-start: var(--border) solid var(--line);
}

.page-home .hm-why__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  padding-block: var(--s-7);
  border-block-end: var(--border) solid var(--line);
}

.page-home .hm-why__row > * { min-width: 0; }

.page-home .hm-why__n {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--fg-faint);
}

.page-home .hm-why__body > * + * { margin-block-start: var(--s-3); }

.page-home .hm-why__body p { color: var(--fg-muted); max-width: 62ch; }

@media (min-width: 900px) {
  .page-home .hm-why__row {
    grid-template-columns: minmax(0, 6rem) minmax(0, 1fr);
    gap: var(--gap);
    align-items: start;
  }
}

@media (min-width: 1200px) {
  .page-home .hm-why__row { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); }
}

/* Fecho de conversão da seção — cartão curvo dentro do bloco escuro */
.page-home .hm-why__cta {
  display: grid;
  gap: var(--gap);
  align-items: center;
  margin-block-start: var(--s-9);
  padding: clamp(var(--s-7), 4vw, var(--s-10));
  background-color: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-xl);
}

.page-home .hm-why__cta > * { min-width: 0; }

.page-home .hm-why__cta-lead {
  color: var(--fg-muted);
  max-width: 52ch;
}

@media (min-width: 900px) {
  .page-home .hm-why__cta { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Hero: janela desktop + celular sobreposto (mesma composição da página
   Plataforma). O celular sangra para baixo e para a direita do desktop, por
   isso a legenda ganha folga e o stage respira à direita. */
.page-home .hm-hero__stage .device-stack { margin-inline-end: var(--s-8); }
.page-home .hm-hero__stage .hm-hero__caption { margin-block-start: var(--s-9); }

@media (max-width: 639.98px) {
  .page-home .hm-hero__stage .device-stack { margin-inline-end: 0; }
  .page-home .hm-hero__stage .hm-hero__caption { margin-block-start: 0; }
}