/* Landing Bumerang — prancha "Landing page". Só tokens do design system. Página de marca: um só visual (claro). */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: light; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; overflow-x: clip; background: var(--bm-color-brand-branco); color: var(--bm-color-brand-noite);
  font-family: var(--bm-font-family-sans); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--bm-color-brand-noite); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 20px; }
.icon { width: 20px; height: 20px; flex: none; }
.icon--lg { width: 28px; height: 28px; }
.icon--invert { filter: invert(1); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--bm-size-button-hero); padding: 0 28px; border-radius: var(--bm-radius-lg);
  font-weight: var(--bm-font-weight-bold); font-size: 18px; text-decoration: none; white-space: nowrap;
}
.btn--sm { height: var(--bm-size-button); padding: 0 20px; border-radius: var(--bm-radius-md); font-size: 16px; }
.btn--dark { background: var(--bm-color-brand-noite); color: var(--bm-color-brand-branco); }
.btn--lima { background: var(--bm-color-brand-lima); color: var(--bm-color-brand-noite); }
.link { font-weight: var(--bm-font-weight-bold); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- navegação ---------- */
.nav { position: sticky; top: 0; z-index: 10; background: var(--bm-color-brand-branco); border-bottom: 1px solid var(--bm-color-support-linha); }
.nav__in { display: flex; align-items: center; gap: 32px; height: 72px; }
.nav__logo img { height: 22px; }
.nav__links { display: flex; gap: 24px; margin-right: auto; font-size: 15px; font-weight: var(--bm-font-weight-semibold); }
.nav__links a { text-decoration: none; color: var(--bm-color-support-grafite); }
.nav__links a:hover { color: var(--bm-color-brand-noite); }
@media (max-width: 760px) { .nav__links { display: none; } .nav__logo { margin-right: auto; } .nav__in { gap: 12px; } }
@media (max-width: 400px) { .nav .btn--sm { padding: 0 14px; font-size: 14px; } }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-block: 64px 80px; }
.hero__title {
  font-size: clamp(52px, 8vw, 104px); line-height: 0.95; font-weight: var(--bm-font-weight-black);
  letter-spacing: var(--bm-font-letterSpacing-display); text-wrap: balance;
}
.hero__mark { background: linear-gradient(transparent 58%, var(--bm-color-brand-lima) 58%, var(--bm-color-brand-lima) 92%, transparent 92%); }
.hero__lead { margin-top: 28px; max-width: 480px; font-size: 19px; color: var(--bm-color-support-grafite); }
.hero__cta { display: flex; align-items: center; gap: 28px; margin-top: 36px; flex-wrap: wrap; }
.hero__small { margin-top: 24px; font-size: 14px; color: var(--bm-color-support-grafite); }
.hero__art { background: var(--bm-color-brand-nevoa); border-radius: var(--bm-radius-3xl); padding: 24px; }
.hero__art img { width: 100%; height: auto; }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); padding-block: 40px 56px; } }

/* ---------- faixa Noite ---------- */
.band { background: var(--bm-color-brand-noite); color: var(--bm-color-brand-branco); text-align: center; padding: 72px 20px; }
.band__title { font-size: clamp(48px, 10vw, 150px); line-height: 1; font-weight: var(--bm-font-weight-black); letter-spacing: -0.04em; }
.band__title span { color: var(--bm-color-brand-lima); }
.band__sub { margin-top: 24px; font-size: 17px; color: var(--bm-color-support-nevoa-2); }

/* ---------- seções ---------- */
.section { padding-block: 88px; }
.section--nevoa { background: var(--bm-color-brand-nevoa); }
.h2 { font-size: clamp(32px, 4.5vw, 44px); line-height: 1.08; font-weight: var(--bm-font-weight-extrabold); letter-spacing: var(--bm-font-letterSpacing-title); text-wrap: balance; }

.steps { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.step__art {
  height: 240px; border-radius: var(--bm-radius-3xl); background: var(--bm-color-brand-nevoa);
  display: flex; align-items: center; justify-content: center; gap: 16px; position: relative; overflow: hidden;
}
.step__img { width: 90%; height: auto; }
.step__title { margin-top: 22px; font-size: 26px; font-weight: var(--bm-font-weight-extrabold); }
.step__title span { font-size: 16px; margin-right: 6px; }
.step p { margin-top: 8px; font-size: 17px; color: var(--bm-color-support-grafite); max-width: 340px; }
.step__check { position: absolute; top: 20px; right: 44px; width: 44px; height: 44px; border-radius: 50%; background: var(--bm-color-brand-lima); display: grid; place-items: center; }
.key {
  display: inline-flex; align-items: center; justify-content: center; min-width: 96px; height: 92px; padding: 0 24px 6px;
  border-radius: var(--bm-radius-popover); background: var(--bm-color-brand-branco); box-shadow: var(--bm-shadow-key);
  font: var(--bm-font-weight-extrabold) 28px var(--bm-font-family-sans); color: var(--bm-color-brand-noite);
}
.key--wide { min-width: 118px; }
.plus { font-size: 28px; color: var(--bm-color-support-cinza-rastro); font-weight: var(--bm-font-weight-bold); }
@media (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); } .key { min-width: 80px; height: 78px; } }

.platforms { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.platform { background: var(--bm-color-brand-branco); border-radius: var(--bm-radius-2xl); padding: 26px; display: flex; flex-direction: column; gap: 2px; }
.platform strong { margin-top: 18px; font-size: 20px; font-weight: var(--bm-font-weight-extrabold); }
.platform span { font-size: 14px; color: var(--bm-color-support-grafite); }
.platform em { margin-top: 18px; font-style: normal; font-size: 14px; font-weight: var(--bm-font-weight-bold); color: var(--bm-color-support-grafite); }
@media (max-width: 1000px) { .platforms { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .platforms { grid-template-columns: 1fr; } }

.features { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.feature { display: flex; gap: 18px; padding-block: 28px; border-top: 2px solid var(--bm-color-brand-noite); }
.feature__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--bm-color-support-nevoa-2); display: grid; place-items: center; flex: none; }
.feature h3 { font-size: 21px; font-weight: var(--bm-font-weight-extrabold); }
.feature p { margin-top: 6px; font-size: 17px; color: var(--bm-color-support-grafite); max-width: 460px; }
@media (max-width: 800px) { .features { grid-template-columns: 1fr; } }

/* ---------- chamada final ---------- */
.cta { background: var(--bm-color-brand-noite); color: var(--bm-color-brand-branco); padding-block: 88px; }
.cta__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.cta__volta { width: min(360px, 80%); margin: 0 auto; }
.cta__title { font-size: clamp(36px, 5vw, 56px); line-height: 1.05; font-weight: var(--bm-font-weight-black); letter-spacing: var(--bm-font-letterSpacing-title); }
.cta__title span { color: var(--bm-color-brand-lima); }
.cta__text { margin-top: 22px; font-size: 18px; color: var(--bm-color-support-nevoa-2); max-width: 520px; }
.cta__row { display: flex; align-items: center; gap: 24px; margin-top: 32px; flex-wrap: wrap; }
.cta__small { font-size: 14px; color: var(--bm-color-support-cinza-lua); }
@media (max-width: 800px) { .cta__in { grid-template-columns: minmax(0, 1fr); } }

/* ---------- rodapé ---------- */
.footer { padding-block: 48px 32px; font-size: 14px; color: var(--bm-color-support-grafite); }
.footer__top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.footer__logo { height: 20px; margin-bottom: 8px; }
.footer__links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer__links a { text-decoration: none; }
.footer__bottom { display: flex; justify-content: space-between; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--bm-color-support-linha); }