/* Landing Prospectfy - direção branco/preto minimalista.
   Neutros na escala da Apple (#1D1D1F, #6E6E73, #86868B, #D2D2D7, #F5F5F7):
   o contraste entre seções vem de degrau de fundo, não de borda em tudo.
   O roxo da marca aparece poucas vezes e sempre como detalhe: filete do kicker,
   botão principal, rótulo de etapa e marcador de FAQ aberto. */

.marketing-shell {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-alt: #F5F5F7;
  --fg: #1D1D1F;
  --fg-secondary: #6E6E73;
  --fg-tertiary: #86868B;
  --border: #D2D2D7;
  --border-strong: #B8B8BF;
  --accent: oklch(0.47 0.21 286);
  --accent-hover: oklch(0.4 0.19 286);
  --accent-soft: oklch(0.96 0.02 286);
  --ink: #1D1D1F;
  --wrap: min(100% - 40px, 1100px);
  --pill: 980px;
  min-height: 100dvh;
  color: var(--fg);
  color-scheme: light;
  background: var(--bg);
  font-family: "Figtree", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.011em;
}

.marketing-shell .button {
  min-height: 46px;
  padding-inline: 24px;
  border-radius: var(--pill);
  font-size: 14.5px;
  font-weight: 550;
  letter-spacing: -.008em;
}
.marketing-shell .button--primary {
  color: #FFFFFF;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
}
.marketing-shell .button--primary:hover { color: #FFFFFF; background: var(--accent-hover); border-color: var(--accent-hover); }
.marketing-shell .button--ghost { color: var(--fg); background: transparent; border-color: var(--border); box-shadow: none; }
.marketing-shell .button--ghost:hover { color: var(--fg); background: var(--surface-alt); border-color: var(--border-strong); }

/* ── Navegação ────────────────────────────────────────────── */

.marketing-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  width: 100%;
  min-height: 52px;
  padding-inline: max(20px, calc((100% - 1100px) / 2));
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.marketing-nav .brand-lockup__image { width: 150px; }
.marketing-nav__links { display: flex; align-items: center; gap: 30px; }
.marketing-nav__links a { min-height: 44px; display: inline-flex; align-items: center; color: var(--fg-secondary); font-size: 13px; font-weight: 450; text-decoration: none; transition: color 140ms ease; }
.marketing-nav__links a:hover { color: var(--fg); }
.marketing-nav__login { justify-self: end; min-height: 34px; padding: 0 15px; border: 0; border-radius: var(--pill); color: #FFFFFF; background: var(--accent); font-size: 13px; font-weight: 550; cursor: pointer; transition: background 140ms ease; }
.marketing-nav__login:hover { background: var(--accent-hover); }

/* ── Hero ─────────────────────────────────────────────────── */
/* Copy centrada e imagem embaixo, em largura cheia: é a composição de página
   de produto da Apple, e foi o que o briefing pediu. */

.marketing-hero {
  width: var(--wrap);
  margin: auto;
  padding-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: clamp(40px, 5vw, 64px);
  text-align: center;
}
.marketing-hero__copy { max-width: 780px; }
.marketing-kicker {
  margin: 0 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: -.005em;
}
.marketing-kicker::before { content: ""; width: 20px; height: 1.5px; border-radius: 2px; background: var(--accent); }
.marketing-hero h1 {
  margin: 0;
  font-size: clamp(36px, 4.7vw, 64px);
  font-weight: 620;
  line-height: 1.05;
  letter-spacing: -.028em;
  text-wrap: balance;
}
.marketing-hero h1 span { display: block; }
.marketing-hero__target { color: var(--accent); font-weight: 560; }
.marketing-hero__example { margin: 12px auto 0; max-width: 60ch; color: var(--fg-secondary); font-size: 13px; line-height: 1.5; }
.marketing-hero__lede { max-width: 44ch; margin: 20px auto 0; color: var(--fg-secondary); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; letter-spacing: -.012em; }
.marketing-hero__actions { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

.marketing-hero__visual { position: relative; width: 100%; min-width: 0; margin: 0; }
.marketing-hero__image-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 22px;
  background: var(--surface-alt);
}
.marketing-hero__image-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* ── Faixa de capacidades ─────────────────────────────────── */

.marketing-capability-strip {
  width: var(--wrap);
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
}
.marketing-capability-strip span {
  min-height: 56px;
  padding: 16px 18px;
  display: grid;
  place-items: center;
  color: var(--fg-tertiary);
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
}
.marketing-outcome-note { width: var(--wrap); margin: 14px auto 0; color: var(--fg-tertiary); font-size: 11.5px; line-height: 1.6; text-align: center; }

/* ── Revelação ao rolar ───────────────────────────────────── */
/* Só quando o JS marca .has-reveal, para que sem script a página continue
   completa e legível já no primeiro quadro. */

.marketing-shell.has-reveal [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 600ms cubic-bezier(.16, 1, .3, 1), transform 600ms cubic-bezier(.16, 1, .3, 1); }
.marketing-shell.has-reveal [data-reveal].is-visible { opacity: 1; transform: translateY(0); }