:root {
  /* Primitivos */
  --c-blue-950: #02032f;
  --c-blue-800: #05055b;
  --c-blue-700: #0c0c77;
  --c-lime-400: #9cff8e;
  --c-paper: #f5f5ef;
  --c-white: #fff;
  --c-gray-300: #c9cfdf;
  --c-gray-600: #555668;
  --alpha-white-12: #ffffff1f;
  --alpha-white-20: #ffffff33;
  --ff-sans: Manrope, Arial, sans-serif;
  --fs-100: .75rem;
  --fs-200: clamp(.875rem, .82rem + .15vw, 1rem);
  --fs-300: clamp(1rem, .94rem + .2vw, 1.125rem);
  --fs-400: clamp(1.125rem, 1rem + .35vw, 1.375rem);
  --fs-h6: clamp(1rem, .95rem + .2vw, 1.125rem);
  --fs-h5: clamp(1.125rem, 1rem + .45vw, 1.5rem);
  --fs-h4: clamp(1.25rem, 1.05rem + .7vw, 1.75rem);
  --fs-h3: clamp(1.5rem, 1.15rem + 1.2vw, 2.4rem);
  --fs-h2: clamp(2.25rem, 1.5rem + 3vw, 4.75rem);
  --fs-h1: clamp(3rem, 2rem + 4vw, 6.25rem);
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --radius-sm: .75rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
  --shadow-lg: 0 2rem 5rem #0007;
  --grid-max: 82.5rem;
  --grid-gutter: clamp(1rem, 4vw, 4rem);
  /* Semânticos */
  --bg-page: var(--c-blue-950);
  --bg-brand: var(--c-blue-800);
  --bg-light: var(--c-paper);
  --text-on-dark: var(--c-white);
  --text-muted: var(--c-gray-300);
  --text-on-light: var(--c-blue-950);
  --accent: var(--c-lime-400);
  --border-dark: var(--alpha-white-20);
  --focus: var(--c-lime-400);
  --section-pad: clamp(5rem, 11vw, 9rem) var(--grid-gutter);
  --content: min(var(--grid-max), calc(100% - 2 * var(--grid-gutter)));
  font-family: var(--ff-sans);
  color: var(--text-on-dark);
  background: var(--bg-page);
  line-height: 1.55
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg-page)
}

img {
  max-width: 100%;
  height: auto
}

a {
  color: inherit
}

button,
input {
  font: inherit
}

:focus-visible {
  outline: .2rem solid var(--focus);
  outline-offset: .25rem
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: -6rem;
  left: 1rem;
  padding: .75rem 1rem;
  background: var(--accent);
  color: var(--text-on-light)
}

.skip-link:focus {
  top: 1rem
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--sp-5);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.045em;
  text-wrap: balance
}

h1 {
  font-size: var(--fs-h1)
}

h2 {
  font-size: var(--fs-h2)
}

h3 {
  font-size: var(--fs-h3)
}

h4 {
  font-size: var(--fs-h4)
}

h5 {
  font-size: var(--fs-h5)
}

h6 {
  font-size: var(--fs-h6)
}

p,
li {
  font-size: var(--fs-300)
}

.eyebrow {
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent)
}

.site-header {
  position: fixed;
  z-index: 40;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: var(--content);
  min-height: 4.25rem;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: .6rem .75rem .6rem 1.25rem;
  border: 1px solid var(--alpha-white-20);
  border-radius: 1.15rem;
  background: linear-gradient(110deg, #080a5699, #174d6890 45%, #080a5685);
  box-shadow: inset 0 1px 0 #ffffff38, 0 1rem 3rem #0004;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  transition: .25s
}

.site-header:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, #fff2, transparent 35%, #9cff8e12 65%, #fff1)
}

.site-header.scrolled {
  top: .5rem;
  background: linear-gradient(110deg, #05063be8, #0b3154dc)
}

.brand,
.site-header nav,
.header-cta,
.menu-toggle {
  position: relative;
  z-index: 1
}

.brand img {
  display: block;
  width: 10.5rem;
  filter: brightness(0) invert(1)
}

.site-header nav {
  display: flex;
  gap: var(--sp-6);
  margin-left: auto
}

.site-header nav a {
  text-decoration: none;
  font-size: var(--fs-200);
  color: #eef0ff
}

.site-header nav a:hover {
  color: var(--accent)
}

.header-cta,
.button {
  display: inline-flex;
  min-height: 2.9rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: .65rem 1.15rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--text-on-light);
  font-size: var(--fs-200);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: .22s
}

.button:hover,
.header-cta:hover {
  transform: translateY(-.18rem);
  box-shadow: 0 1rem 2.5rem #9cff8e30
}

.menu-toggle {
  display: none;
  border: 1px solid var(--border-dark);
  border-radius: .6rem;
  padding: .55rem .8rem;
  background: transparent;
  color: #fff
}

.hero,
.problem,
.ecosystem,
.uses,
.audience,
.deployment,
.contact {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  align-items: center;
  overflow: hidden;
  padding: 8rem max(var(--grid-gutter), calc((100vw - var(--grid-max))/2)) 3rem;
  background-image: linear-gradient(120deg, #02032ff5, #05055bd8), url('../assets/images/backgrounds/bg-01-hero-desktop.avif')
}

.hero-copy,
.hero-art {
  position: relative;
  z-index: 2
}

.hero-copy em {
  color: var(--accent);
  font-style: normal
}

.hero-copy>p:not(.eyebrow) {
  max-width: 38rem;
  color: var(--text-muted);
  font-size: var(--fs-400)
}

.hero-art {
  height: min(68vh, 42rem)
}

.hero-art img {
  position: absolute;
  border-radius: 1.7rem;
  box-shadow: var(--shadow-lg)
}

.hero-art img:first-child {
  width: 50%;
  left: 7%;
  bottom: -5%;
  transform: rotate(-7deg)
}

.hero-art img:last-child {
  width: 43%;
  right: -2%;
  top: 2%;
  transform: rotate(7deg)
}

.rings {
  position: absolute;
  right: -18vw;
  width: 56vw;
  aspect-ratio: 1;
  border: 1px solid #9cff8e30;
  border-radius: 50%;
  box-shadow: 0 0 0 9vw #9cff8e0a, 0 0 0 18vw #9cff8e07
}

.problem,
.ecosystem,
.uses,
.audience,
.deployment,
.faq,
.contact {
  padding: var(--section-pad)
}

.problem {
  min-height: 85svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--bg-light);
  background-image: linear-gradient(#f5f5efeb, #f5f5efeb), url('../assets/images/backgrounds/bg-02-problema-desktop.avif');
  color: var(--text-on-light)
}

.problem .eyebrow,
.uses .eyebrow,
.deployment .eyebrow {
  color: #4b4ba4
}

.problem h2 {
  max-width: 62rem
}

.problem .lead {
  width: min(42rem, 100%);
  margin: var(--sp-7) 0 0 auto;
  color: var(--c-gray-600);
  font-size: var(--fs-400)
}

.ticker {
  overflow: hidden;
  padding: 1.25rem 0;
  background: var(--accent);
  color: var(--text-on-light);
  font-size: clamp(1.25rem, 2.5vw, 2.4rem);
  font-weight: 600;
  white-space: nowrap
}

.ticker span {
  display: block;
  width: max-content;
  animation: ticker 28s linear infinite
}

.ecosystem {
  background-color: var(--bg-brand);
  background-image: linear-gradient(#05055bec, #05055bf5), url('../assets/images/backgrounds/bg-03-solucoes-desktop.avif')
}

.section-intro {
  display: grid;
  grid-template-columns: 1.45fr .7fr;
  gap: var(--sp-8);
  align-items: end;
  max-width: var(--grid-max);
  margin: 0 auto var(--sp-8)
}

.section-intro>p {
  color: var(--text-muted)
}

.product-grid {
  max-width: var(--grid-max);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.42fr) minmax(0, .78fr);
  grid-template-rows: repeat(2, minmax(18rem, 25rem));
  gap: var(--sp-5)
}

.product-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  background-color: #071849;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 1px 0 #fff2;
  transition: transform .3s, border-color .3s
}

.product-card:hover {
  transform: translateY(-.35rem);
  border-color: #9cff8e70
}

.product-card:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, transparent 25%, #02032ff2 82%)
}

.product-card--catalog {
  grid-column: 1;
  grid-row: 1;
  background-image: url('../assets/images/products/produto-catalogo-desktop.avif')
}

.product-card--leadscan {
  grid-column: 2;
  grid-row: 1/3;
  background-image: url('../assets/images/products/produto-leadscan-desktop.avif')
}

.product-card--reports {
  grid-column: 3;
  grid-row: 1/3;
  background-image: url('../assets/images/products/produto-reports-desktop.avif')
}

.product-card>div {
  max-width: 34rem
}

.product-card h3 {
  margin-bottom: .75rem
}

.product-card p,
.product-card li {
  font-size: var(--fs-200);
  color: #e3e7f5
}

.product-card ul {
  margin: var(--sp-4) 0 0;
  padding-left: 1.15rem
}

.product-card small {
  display: block;
  margin-top: var(--sp-4);
  color: #aeb5d2
}

.uses {
  background-color: #dffff0;
  background-image: linear-gradient(#dffff0ed, #dffff0f2), url('../assets/images/backgrounds/bg-04-aplicacoes-desktop.avif');
  color: var(--text-on-light)
}

.uses>h2 {
  max-width: 60rem
}

.use-list {
  max-width: var(--grid-max);
  margin: var(--sp-8) auto 0;
  border-top: 1px solid #02032f33
}

.use-list article {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--sp-7);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid #02032f33
}

.use-list p {
  color: var(--c-blue-800)
}

.audience {
  background-color: var(--bg-page);
  background-image: linear-gradient(#02032fe8, #02032ff0), url('../assets/images/backgrounds/bg-05-publico-desktop.avif')
}

.audience h2 {
  color: var(--accent)
}

.audience>p:last-child {
  margin-top: var(--sp-8);
  color: var(--text-muted);
  word-spacing: 1rem
}

.deployment {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 8vw;
  background-color: var(--bg-light);
  background-image: linear-gradient(#f5f5eff0, #f5f5eff5), url('../assets/images/backgrounds/bg-06-implantacao-desktop.avif');
  color: var(--text-on-light)
}

.deployment>div>p:not(.eyebrow),
.steps p {
  color: var(--c-gray-600)
}

.domain {
  margin-top: var(--sp-7);
  padding: var(--sp-5) 0;
  border-block: 1px solid #02032f33;
  font-size: var(--fs-400)
}

.domain strong,
.steps h3 {
  color: #4848a7
}

.steps {
  align-self: end
}

.steps article {
  padding: var(--sp-5) 0;
  border-top: 1px solid #02032f33
}

.faq {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: var(--sp-9);
  background: #07073f
}

.faq-list details {
  border-top: 1px solid var(--border-dark)
}

.faq-list details:last-child {
  border-bottom: 1px solid var(--border-dark)
}

.faq-list summary {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  font-size: var(--fs-400);
  font-weight: 600;
  cursor: pointer;
  list-style: none
}

.faq-list summary::-webkit-details-marker {
  display: none
}

.faq-list summary span {
  color: var(--accent);
  transition: transform .25s
}

.faq-list details[open] summary span {
  transform: rotate(45deg)
}

.faq-list details p {
  max-width: 46rem;
  margin: 0 0 var(--sp-6);
  color: var(--text-muted)
}

.contact {
  min-height: 90svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--accent);
  background-image: linear-gradient(#9cff8eea, #9cff8ef3), url('../assets/images/backgrounds/bg-07-contato-desktop.avif');
  color: var(--text-on-light)
}

.contact .eyebrow {
  color: #45459c
}

.contact>div {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--sp-7)
}

.contact>div p {
  max-width: 40rem;
  font-size: var(--fs-400)
}

.button--dark {
  background: var(--bg-page);
  color: #fff
}

.button--ghost {
  background: transparent;
  border: 1px solid #02032f55
}

.site-footer {
  display: grid;
  grid-template-columns: 1.3fr 1fr auto;
  gap: var(--sp-7);
  padding: var(--sp-8) var(--grid-gutter);
  background: #01021e;
  color: #aeb5d2
}

.footer-brand img {
  width: 11rem;
  filter: brightness(0) invert(1)
}

.site-footer nav {
  display: flex;
  flex-direction: column;
  gap: .65rem
}

.site-footer nav a,
.site-footer nav button {
  width: max-content;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer
}

.socials {
  display: flex;
  gap: .6rem
}

.socials a,
.socials button {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--border-dark);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: .7rem;
  text-decoration: none
}

.credits {
  grid-column: 1/3;
  display: flex;
  align-items: center;
  gap: var(--sp-4)
}

.credits>a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none
}

.credits img {
  width: 8rem;
  max-height: 2.5rem
}

.site-footer>small {
  align-self: end
}

.cookie-banner {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: min(68rem, calc(100% - 2rem));
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
  background: #f7f7f4f5;
  color: var(--text-on-light);
  box-shadow: 0 2rem 5rem #0008;
  backdrop-filter: blur(16px)
}

.cookie-banner[hidden] {
  display: none
}

.cookie-banner h2 {
  font-size: var(--fs-h4)
}

.cookie-banner p {
  margin: 0
}

.cookie-banner>div:nth-child(2) {
  display: flex;
  gap: .75rem;
  align-items: center
}

.cookie-banner>a {
  font-size: var(--fs-200)
}

[data-reveal] {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity .7s, transform .7s
}

[data-reveal].visible {
  opacity: 1;
  transform: none
}

@keyframes ticker {
  to {
    transform: translateX(-50%)
  }
}

@media(max-width:1024px) {

  .hero,
  .problem,
  .ecosystem,
  .uses,
  .audience,
  .deployment,
  .contact {
    background-position: center
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, minmax(22rem, 32rem))
  }

  .product-card--catalog {
    grid-column: 1;
    grid-row: 1
  }

  .product-card--leadscan {
    grid-column: 2;
    grid-row: 1
  }

  .product-card--reports {
    grid-column: 1/3;
    grid-row: 2
  }

  .product-card--catalog {
    background-image: url('../assets/images/products/produto-catalogo-tablet.avif')
  }

  .product-card--leadscan {
    background-image: url('../assets/images/products/produto-leadscan-tablet.avif')
  }

  .product-card--reports {
    background-image: url('../assets/images/products/produto-reports-tablet.avif')
  }

  .hero {
    background-image: linear-gradient(120deg, #02032ff5, #05055bd8), url('../assets/images/backgrounds/bg-01-hero-tablet.avif')
  }
}

@media(max-width:800px) {
  :root {
    --fs-h1: clamp(2.75rem, 10vw, 4.5rem);
    --fs-h2: clamp(2rem, 8vw, 3.5rem);
    --grid-gutter: 1rem
  }

  .site-header {
    min-height: 3.75rem
  }

  .brand img {
    width: 8.5rem
  }

  .site-header nav {
    position: absolute;
    top: 4.2rem;
    right: 0;
    display: none;
    flex-direction: column;
    width: 14rem;
    padding: 1.25rem;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    background: #07073ff5
  }

  .site-header nav.open {
    display: flex
  }

  .header-cta {
    display: none
  }

  .menu-toggle {
    display: block;
    margin-left: auto
  }

  .hero {
    grid-template-columns: 1fr;
    padding-top: 7rem
  }

  .hero-art {
    height: 24rem
  }

  .section-intro,
  .deployment,
  .faq {
    grid-template-columns: 1fr
  }

  .product-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none
  }

  .product-card--catalog,
  .product-card--leadscan,
  .product-card--reports {
    grid-column: 1;
    grid-row: auto;
    min-height: 31rem
  }

  .product-card--catalog {
    background-image: url('../assets/images/products/produto-catalogo-mobile.avif')
  }

  .product-card--leadscan {
    background-image: url('../assets/images/products/produto-leadscan-mobile.avif')
  }

  .product-card--reports {
    background-image: url('../assets/images/products/produto-reports-mobile.avif')
  }

  .contact>div,
  .use-list article {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start
  }

  .site-footer {
    grid-template-columns: 1fr 1fr
  }

  .credits {
    grid-column: 1/3
  }

  .cookie-banner {
    grid-template-columns: 1fr
  }

  .cookie-banner>div:nth-child(2) {
    flex-wrap: wrap
  }
}

@media(max-width:480px) {
  :root {
    --fs-300: 1rem;
    --fs-400: 1.125rem;
    --fs-h1: clamp(2.6rem, 12vw, 3.6rem);
    --fs-h2: clamp(2rem, 9vw, 2.8rem);
    --section-pad: 4.5rem 1rem
  }

  .hero-art {
    height: 20rem
  }

  .hero-art img:first-child {
    width: 55%
  }

  .hero-art img:last-child {
    width: 46%
  }

  .product-card {
    min-height: 27rem;
    padding: 1.25rem
  }

  .site-footer {
    grid-template-columns: 1fr
  }

  .credits {
    grid-column: 1
  }

  .cookie-banner>div:nth-child(2) {
    display: grid
  }

  .cookie-banner .button {
    width: 100%
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important
  }

  [data-reveal] {
    opacity: 1;
    transform: none
  }
}

/* Header compacto, menu imersivo e visibilidade dos fundos */
.site-header {
  top: .75rem;
  width: min(80rem, calc(100% - 2rem));
  height: 3.5rem;
  min-height: 0;
  padding: .35rem .45rem .35rem 1rem;
  border-radius: 1rem;
  gap: 1.5rem
}

.brand img {
  width: 8.5rem
}

.mobile-nav-cta {
  display: none
}

.menu-toggle {
  width: 2.75rem;
  height: 2.75rem;
  padding: .6rem;
  border: 0;
  background: transparent
}

.menu-toggle svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round
}

.menu-toggle .icon-close {
  display: none
}

.hero {
  padding-top: 7rem;
  background-image: linear-gradient(120deg, rgba(2, 3, 47, .82), rgba(5, 5, 91, .68)), url('../assets/images/backgrounds/bg-01-hero-desktop.avif')
}

@media(max-width:1024px) {
  .hero {
    background-image: linear-gradient(120deg, rgba(2, 3, 47, .82), rgba(5, 5, 91, .68)), url('../assets/images/backgrounds/bg-01-hero-tablet.avif')
  }
}

@media(max-width:800px) {
  .site-header {
    top: .65rem;
    width: calc(100% - 1.25rem);
    height: 3.4rem;
    padding: .3rem .35rem .3rem .9rem
  }

  .brand img {
    width: 8rem
  }

  .site-header nav {
    position: fixed;
    z-index: -1;
    inset: -.65rem -.625rem auto;
    display: flex;
    visibility: hidden;
    opacity: 0;
    width: 100vw;
    min-height: 100svh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    padding: 6rem 1.5rem 3rem;
    border: 0;
    border-radius: 0;
    background: radial-gradient(circle at 80% 85%, rgba(23, 77, 97, .34), transparent 34%), rgba(1, 2, 30, .98);
    transform: translateY(-1rem);
    transition: opacity .3s, transform .3s, visibility .3s;
    backdrop-filter: blur(24px)
  }

  .site-header nav.open {
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: none
  }

  .site-header nav a {
    font-size: clamp(1.45rem, 7vw, 2rem);
    font-weight: 600
  }

  .site-header nav .mobile-nav-cta {
    display: inline-flex;
    margin-top: 1rem;
    padding: .8rem 1.2rem;
    border: 1px solid var(--border-dark);
    border-radius: .8rem;
    color: var(--accent);
    font-size: 1rem
  }

  .menu-toggle {
    display: grid;
    place-items: center;
    margin-left: auto
  }

  .menu-toggle[aria-expanded="true"] .icon-menu {
    display: none
  }

  .menu-toggle[aria-expanded="true"] .icon-close {
    display: block
  }

  .menu-open {
    overflow: hidden
  }

  .hero {
    background-image: linear-gradient(180deg, rgba(2, 3, 47, .76), rgba(5, 5, 91, .7)), url('../assets/images/backgrounds/bg-01-hero-tablet.avif')
  }
}

@media(max-width:480px) {
  .hero {
    background-image: linear-gradient(180deg, rgba(2, 3, 47, .72), rgba(5, 5, 91, .72)), url('../assets/images/backgrounds/bg-01-hero-mobile.avif')
  }
}

/* O próprio header ocupa a viewport quando o menu mobile está aberto.
   Isso evita que backdrop-filter limite o overlay ao container do header. */
@media(max-width:800px) {
  .site-header.menu-active {
    inset: 0;
    top: 0;
    left: 0;
    transform: none;
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    padding: .65rem;
    border: 0;
    border-radius: 0;
    background: radial-gradient(circle at 80% 85%, rgba(23, 77, 97, .34), transparent 34%), rgba(1, 2, 30, .99);
    box-shadow: none;
  }

  .site-header.menu-active nav {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 5rem 1.5rem 3rem;
    background: transparent;
  }

  .site-header.menu-active .brand,
  .site-header.menu-active .menu-toggle {
    z-index: 2;
    align-self: flex-start
  }
}

/* Respiro final do header fechado */
.brand img,
.footer-brand img {
  filter: none
}

.credits img {
  width: 4.5rem;
  max-height: 3.5rem;
  object-fit: contain
}

.site-header:not(.menu-active) {
  height: 4rem;
  padding: .55rem .65rem .55rem 1.25rem
}

@media(max-width:800px) {
  .site-header:not(.menu-active) {
    height: 3.9rem;
    padding: .5rem .55rem .5rem 1rem
  }
}

/* Hero: imagem dominante, com proteção de contraste concentrada no texto */
.hero {
  background-image: linear-gradient(90deg, rgba(2, 3, 47, .72) 0%, rgba(2, 3, 47, .42) 42%, rgba(5, 5, 91, .16) 72%, rgba(5, 5, 91, .08) 100%), url('../assets/images/backgrounds/bg-01-hero-desktop.avif')
}

@media(max-width:1024px) {
  .hero {
    background-image: linear-gradient(100deg, rgba(2, 3, 47, .64) 0%, rgba(2, 3, 47, .34) 48%, rgba(5, 5, 91, .10) 100%), url('../assets/images/backgrounds/bg-01-hero-tablet.avif')
  }
}

@media(max-width:800px) {
  .hero {
    background-image: linear-gradient(180deg, rgba(2, 3, 47, .48) 0%, rgba(2, 3, 47, .26) 50%, rgba(5, 5, 91, .16) 100%), url('../assets/images/backgrounds/bg-01-hero-tablet.avif')
  }
}

@media(max-width:480px) {
  .hero {
    background-image: linear-gradient(180deg, rgba(2, 3, 47, .48) 0%, rgba(2, 3, 47, .24) 48%, rgba(5, 5, 91, .18) 100%), url('../assets/images/backgrounds/bg-01-hero-mobile.avif')
  }
}

/* Consentimento compacto */
.cookie-banner {
  left: 1.25rem;
  bottom: 1.25rem;
  transform: none;
  width: min(23rem, calc(100% - 2.5rem));
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1.15rem;
  border-color: rgba(255, 255, 255, .11);
  border-radius: 1rem;
  background: rgba(2, 3, 31, .96);
  color: #fff;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .38);
  backdrop-filter: blur(18px);
}

.cookie-banner[hidden] {
  display: none
}

.cookie-banner h2 {
  margin: 0 0 .35rem;
  font-size: 1rem;
  letter-spacing: -.02em
}

.cookie-banner p {
  color: #b9bed0;
  font-size: .875rem;
  line-height: 1.5
}

.cookie-banner>div:nth-child(2) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  width: 100%
}

.cookie-banner .button {
  min-height: 2.5rem;
  width: 100%;
  justify-content: center;
  padding: .5rem .75rem;
  border-radius: .6rem;
  font-size: .8rem
}

.cookie-banner .button--ghost {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .08);
  color: #fff
}

.cookie-banner .button--dark {
  background: #fff;
  color: #02032f
}

.cookie-banner>a {
  width: max-content;
  color: #9cff8e;
  font-size: .75rem;
  text-underline-offset: .2rem
}

@media(max-width:480px) {
  .cookie-banner {
    left: .75rem;
    bottom: .75rem;
    width: calc(100% - 1.5rem);
    padding: 1rem
  }

  .cookie-banner>div:nth-child(2) {
    display: grid
  }
}

/* Hero final: fotografia mais evidente, aurora e flutuação */
@media(min-width:801px) {
  .site-header:not(.menu-active) {
    top: 1.5rem
  }
}

.brand img,
.footer-brand img {
  content: url('../assets/images/logo_tracebook_w.svg')
}

.hero {
  background-image: linear-gradient(90deg, rgba(2, 3, 47, .54) 0%, rgba(2, 3, 47, .24) 38%, rgba(5, 5, 91, .06) 68%, transparent 100%), url('../assets/images/backgrounds/bg-01-hero-desktop.avif')
}

.rings {
  border: 0;
  box-shadow: none;
  right: -8vw;
  width: 58vw;
  filter: blur(3rem);
  opacity: .65;
  background: radial-gradient(ellipse at 35% 40%, rgba(156, 255, 142, .24), transparent 30%), radial-gradient(ellipse at 68% 46%, rgba(74, 115, 255, .32), transparent 38%), radial-gradient(ellipse at 55% 72%, rgba(43, 218, 205, .18), transparent 32%);
  animation: aurora-drift 12s ease-in-out infinite alternate
}

.hero-art img:first-child {
  animation: float-catalog 7s ease-in-out infinite
}

.hero-art img:last-child {
  animation: float-leadscan 8.5s ease-in-out 1s infinite
}

@keyframes aurora-drift {
  0% {
    transform: translate3d(-3%, 2%, 0) scale(.94) rotate(-4deg)
  }

  100% {
    transform: translate3d(5%, -4%, 0) scale(1.08) rotate(5deg)
  }
}

@keyframes float-catalog {

  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-7deg)
  }

  50% {
    transform: translate3d(0, -1.2rem, 0) rotate(-5.5deg)
  }
}

@keyframes float-leadscan {

  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(7deg)
  }

  50% {
    transform: translate3d(.35rem, -1rem, 0) rotate(5.5deg)
  }
}

@media(max-width:1024px) {
  .hero {
    background-image: linear-gradient(100deg, rgba(2, 3, 47, .48), rgba(2, 3, 47, .18) 52%, transparent), url('../assets/images/backgrounds/bg-01-hero-tablet.avif')
  }
}

@media(max-width:800px) {
  .hero {
    background-image: linear-gradient(180deg, rgba(2, 3, 47, .38), rgba(2, 3, 47, .12) 55%, rgba(5, 5, 91, .08)), url('../assets/images/backgrounds/bg-01-hero-tablet.avif')
  }

  .rings {
    width: 100vw;
    right: -35vw;
    opacity: .48
  }
}

@media(max-width:480px) {
  .hero {
    background-image: linear-gradient(180deg, rgba(2, 3, 47, .36), rgba(2, 3, 47, .10) 52%, rgba(5, 5, 91, .08)), url('../assets/images/backgrounds/bg-01-hero-mobile.avif')
  }
}

@media(prefers-reduced-motion:reduce) {

  .rings,
  .hero-art img {
    animation: none !important
  }
}

/* Footer institucional */
.site-footer {
  position: relative;
  grid-template-columns: 1fr auto;
  gap: 2.5rem;
  padding: 4.5rem var(--grid-gutter) 2rem;
  background: #01021e
}

.footer-brand {
  grid-column: 1
}

.footer-brand img {
  content: none;
  width: 11rem
}

.footer-brand p {
  color: #9da5c2;
  font-size: .9rem
}

.site-footer>.socials {
  grid-column: 2;
  align-self: center
}

.socials a,
.socials button {
  width: 2.75rem;
  height: 2.75rem
}

.socials svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

.socials svg .fill,
.socials a:nth-child(3) svg {
  fill: currentColor;
  stroke: none
}

.footer-divider {
  grid-column: 1/-1;
  height: 1px;
  background: var(--border-dark)
}

.footer-legal {
  grid-column: 1;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem !important
}

.footer-legal a,
.footer-legal button {
  font-size: .78rem
}

.footer-meta {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
  color: #9da5c2;
  font-size: .72rem
}

.footer-meta a {
  display: flex;
  align-items: center;
  gap: .35rem;
  text-decoration: none
}

.footer-meta img {
  width: 2rem;
  height: 1.65rem;
  object-fit: contain
}

.footer-meta strong {
  font-size: .78rem
}

.footer-meta small {
  padding-left: .75rem;
  border-left: 1px solid var(--border-dark)
}

.back-to-top {
  position: absolute;
  right: var(--grid-gutter);
  top: -4.5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  color: #02032f;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none
}

.back-to-top__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s
}

.back-to-top:hover .back-to-top__icon {
  transform: translateY(-.25rem)
}

.whatsapp-float {
  position: fixed;
  z-index: 35;
  right: 1.25rem;
  bottom: 1.25rem;
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border: 3px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  background: #20d366;
  color: #fff;
  box-shadow: 0 .8rem 2.2rem rgba(0, 0, 0, .35);
  transition: transform .2s
}

.whatsapp-float:hover {
  transform: translateY(-.25rem) scale(1.03)
}

.whatsapp-float svg {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

@media(max-width:800px) {
  .site-footer {
    grid-template-columns: 1fr;
    padding-top: 4rem
  }

  .site-footer>.socials,
  .footer-brand,
  .footer-legal,
  .footer-meta,
  .footer-divider {
    grid-column: 1
  }

  .site-footer>.socials {
    justify-self: start
  }

  .footer-meta {
    justify-content: flex-start;
    flex-wrap: wrap
  }

  .footer-meta small {
    width: 100%;
    padding: 0;
    border: 0
  }

  .back-to-top {
    top: -3.9rem
  }

  .whatsapp-float {
    right: 1rem;
    bottom: 1rem;
    width: 3.4rem;
    height: 3.4rem
  }
}

/* Hero editorial: título contido, entrada sequencial e aurora em faixas */
.hero-copy h1 {
  font-size: clamp(2.8rem, 4.9vw, 5.15rem);
  line-height: .96;
  margin-bottom: 1.75rem
}

.hero-word {
  display: block;
  opacity: 0;
  transform: translateY(1.25rem);
  filter: blur(.4rem);
  animation: hero-word-in .7s cubic-bezier(.22, .8, .25, 1) forwards
}

.hero-word:nth-child(1) {
  animation-delay: .12s
}

.hero-word:nth-child(2) {
  animation-delay: .24s
}

.hero-word:nth-child(3) {
  animation-delay: .36s
}

.hero-word:nth-child(4) {
  animation-delay: .48s
}

.hero-word--accent {
  color: var(--accent)
}

.rings {
  right: -12vw;
  width: 64vw;
  aspect-ratio: 1;
  overflow: visible;
  filter: none;
  opacity: 1;
  background: none;
  animation: none
}

.rings i {
  position: absolute;
  display: block;
  width: 88%;
  height: 23%;
  border-radius: 50%;
  filter: blur(3rem);
  mix-blend-mode: screen;
  transform-origin: center
}

.rings i:nth-child(1) {
  top: 17%;
  left: 2%;
  background: linear-gradient(90deg, transparent, rgba(156, 255, 142, .42), rgba(54, 225, 215, .22), transparent);
  animation: aurora-wave-one 9s ease-in-out infinite alternate
}

.rings i:nth-child(2) {
  top: 39%;
  left: 12%;
  background: linear-gradient(90deg, transparent, rgba(74, 115, 255, .48), rgba(156, 255, 142, .28), transparent);
  animation: aurora-wave-two 11s ease-in-out -2s infinite alternate
}

.rings i:nth-child(3) {
  top: 59%;
  left: -4%;
  background: linear-gradient(90deg, transparent, rgba(53, 213, 235, .28), rgba(106, 77, 255, .38), transparent);
  animation: aurora-wave-three 13s ease-in-out -4s infinite alternate
}

@keyframes hero-word-in {
  to {
    opacity: 1;
    transform: none;
    filter: blur(0)
  }
}

@keyframes aurora-wave-one {
  0% {
    transform: translate3d(-7%, 2%, 0) rotate(-16deg) scaleX(.85)
  }

  100% {
    transform: translate3d(7%, -8%, 0) rotate(-5deg) scaleX(1.14)
  }
}

@keyframes aurora-wave-two {
  0% {
    transform: translate3d(8%, -5%, 0) rotate(8deg) scaleX(1.05)
  }

  100% {
    transform: translate3d(-9%, 7%, 0) rotate(18deg) scaleX(.88)
  }
}

@keyframes aurora-wave-three {
  0% {
    transform: translate3d(-5%, 4%, 0) rotate(-5deg) scaleX(.9)
  }

  100% {
    transform: translate3d(10%, -4%, 0) rotate(9deg) scaleX(1.12)
  }
}

@media(max-width:800px) {
  .hero-copy h1 {
    font-size: clamp(2.6rem, 11vw, 4rem)
  }

  .rings {
    right: -45vw;
    width: 130vw;
    opacity: .8
  }

  .rings i {
    filter: blur(2.5rem)
  }
}

@media(max-width:480px) {
  .hero-copy h1 {
    font-size: clamp(2.45rem, 12.5vw, 3.3rem);
    line-height: 1
  }

  .hero-word {
    transform: translateY(.8rem)
  }
}

@media(prefers-reduced-motion:reduce) {
  .hero-word {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none
  }

  .rings i {
    animation: none
  }
}

/* Showcase do hero em três planos estáticos */
.hero-showcase {
  position: relative;
  height: min(70vh, 43rem);
  perspective: 85rem;
  transform-style: preserve-3d
}

.hero-showcase img {
  position: absolute;
  margin: 0;
  border-radius: 1.7rem;
  object-fit: contain;
  animation: none !important;
  backface-visibility: hidden;
  will-change: auto
}

.hero-showcase .hero-showcase__main {
  z-index: 3;
  top: auto;
  right: auto;
  left: 50%;
  bottom: -2%;
  width: min(48%, 21rem);
  height: 94%;
  transform: translateX(-50%) translateZ(4rem);
  filter: drop-shadow(0 2.2rem 3.5rem rgba(0, 0, 0, .5))
}

.hero-showcase__side {
  z-index: 1;
  top: 17%;
  height: 58%;
  opacity: .8;
  filter: saturate(.82) brightness(.72) drop-shadow(0 1.5rem 2rem rgba(0, 0, 0, .4))
}

.hero-showcase .hero-showcase__side--left {
  right: auto;
  bottom: auto;
  left: -6%;
  width: 36%;
  transform: translateZ(-5rem) rotateY(8deg) scale(.92)
}

.hero-showcase .hero-showcase__side--right {
  left: auto;
  bottom: auto;
  right: -12%;
  width: 48%;
  height: 51%;
  top: 23%;
  object-fit: cover;
  object-position: left center;
  transform: translateZ(-7rem) rotateY(-8deg) scale(.9)
}

@media(max-width:1024px) {
  .hero-showcase__main {
    width: min(52%, 19rem)
  }

  .hero-showcase__side--left {
    left: -2%;
    width: 38%
  }

  .hero-showcase__side--right {
    right: -8%;
    width: 46%
  }
}

@media(max-width:800px) {
  .hero-showcase {
    height: 25rem;
    margin-top: 1rem
  }

  .hero-showcase__main {
    width: min(48%, 13rem);
    height: 96%
  }

  .hero-showcase__side {
    top: 22%;
    height: 52%;
    opacity: .72
  }

  .hero-showcase__side--left {
    left: 2%;
    width: 35%
  }

  .hero-showcase__side--right {
    right: 0;
    width: 42%;
    height: 42%;
    top: 29%
  }
}

@media(max-width:480px) {
  .hero-showcase {
    height: 21rem
  }

  .hero-showcase__main {
    width: min(52%, 11.5rem)
  }

  .hero-showcase__side--left {
    left: -1%;
    width: 36%
  }

  .hero-showcase__side--right {
    right: -3%;
    width: 45%
  }
}

/* Nitidez das telas: sem perspectiva, filtros, escala ou sombras rasterizadas */
.hero-showcase {
  perspective: none;
  transform-style: flat
}

.hero-showcase img {
  border-radius: 1.25rem;
  filter: none !important;
  box-shadow: none !important;
  backface-visibility: visible;
  image-rendering: auto;
  transform: none !important
}

.hero-showcase .hero-showcase__main {
  left: 29%;
  width: min(47%, 21rem);
  height: 94%;
  transform: none !important;
  opacity: 1
}

.hero-showcase .hero-showcase__side {
  opacity: .9;
  filter: none !important
}

.hero-showcase .hero-showcase__side--left {
  left: 2%;
  width: 34%;
  height: 60%;
  top: 22%;
  transform: none !important
}

.hero-showcase .hero-showcase__side--right {
  right: -3%;
  width: 43%;
  height: 48%;
  top: 25%;
  transform: none !important
}

@media(max-width:1024px) {
  .hero-showcase .hero-showcase__main {
    left: 27%;
    width: min(49%, 19rem)
  }

  .hero-showcase .hero-showcase__side--left {
    left: 1%;
    width: 35%
  }

  .hero-showcase .hero-showcase__side--right {
    right: -1%;
    width: 42%
  }
}

@media(max-width:800px) {
  .hero-showcase .hero-showcase__main {
    left: 28%;
    width: min(48%, 13rem)
  }

  .hero-showcase .hero-showcase__side--left {
    left: 2%;
    width: 34%
  }

  .hero-showcase .hero-showcase__side--right {
    right: 1%;
    width: 40%
  }
}

@media(max-width:480px) {
  .hero-showcase .hero-showcase__main {
    left: 25%;
    width: min(52%, 11.5rem)
  }

  .hero-showcase .hero-showcase__side--left {
    left: 0;
    width: 35%
  }

  .hero-showcase .hero-showcase__side--right {
    right: -2%;
    width: 42%
  }
}

/* Entrada em sequência do showcase: principal, esquerda e direita */
.hero-showcase {
  --main-left: 20%;
  --main-bottom: -3%;
  --left-final: -8%;
  --right-final: -8%
}

.hero-showcase .hero-showcase__main {
  left: var(--main-left);
  bottom: var(--main-bottom);
  width: min(59%, 26rem);
  height: 100%;
  opacity: 0;
  animation: showcase-main-in .72s cubic-bezier(.2, .78, .24, 1) .12s both !important;
  will-change: bottom, opacity
}

.hero-showcase .hero-showcase__side {
  opacity: 0;
  will-change: left, right, opacity
}

.hero-showcase .hero-showcase__side--left {
  left: 30%;
  width: 42%;
  height: 66%;
  top: 19%;
  animation: showcase-left-out .72s cubic-bezier(.2, .76, .22, 1) .78s both !important
}

.hero-showcase .hero-showcase__side--right {
  right: 28%;
  width: 51%;
  height: 55%;
  top: 23%;
  animation: showcase-right-out .72s cubic-bezier(.2, .76, .22, 1) .78s both !important
}

@keyframes showcase-main-in {
  0% {
    bottom: -22%;
    opacity: 0
  }

  100% {
    bottom: var(--main-bottom);
    opacity: 1
  }
}

@keyframes showcase-left-out {
  0% {
    left: 30%;
    opacity: 0
  }

  100% {
    left: var(--left-final);
    opacity: .94
  }
}

@keyframes showcase-right-out {
  0% {
    right: 28%;
    opacity: 0
  }

  100% {
    right: var(--right-final);
    opacity: .94
  }
}

@media(max-width:1024px) {
  .hero-showcase {
    --main-left: 18%;
    --left-final: -5%;
    --right-final: -5%
  }

  .hero-showcase .hero-showcase__main {
    width: min(62%, 23rem)
  }

  .hero-showcase .hero-showcase__side--left {
    width: 43%
  }

  .hero-showcase .hero-showcase__side--right {
    width: 50%
  }
}

@media(max-width:800px) {
  .hero-showcase {
    --main-left: 20%;
    --main-bottom: -2%;
    --left-final: -4%;
    --right-final: -4%
  }

  .hero-showcase .hero-showcase__main {
    width: min(60%, 16rem);
    height: 100%
  }

  .hero-showcase .hero-showcase__side--left {
    width: 42%;
    height: 61%
  }

  .hero-showcase .hero-showcase__side--right {
    width: 48%;
    height: 48%
  }
}

@media(max-width:480px) {
  .hero-showcase {
    --main-left: 17%;
    --left-final: -7%;
    --right-final: -7%
  }

  .hero-showcase .hero-showcase__main {
    width: min(66%, 14rem)
  }

  .hero-showcase .hero-showcase__side--left {
    width: 44%
  }

  .hero-showcase .hero-showcase__side--right {
    width: 51%
  }
}

@media(prefers-reduced-motion:reduce) {

  .hero-showcase .hero-showcase__main,
  .hero-showcase .hero-showcase__side {
    animation: none !important;
    opacity: 1;
    will-change: auto
  }

  .hero-showcase .hero-showcase__main {
    bottom: var(--main-bottom)
  }

  .hero-showcase .hero-showcase__side--left {
    left: var(--left-final)
  }

  .hero-showcase .hero-showcase__side--right {
    right: var(--right-final)
  }
}

/* Cartão digital na Hero: leque completo atrás do celular principal */
.hero-showcase {
  --right-final: -8%
}

.hero-art.hero-showcase img.hero-showcase__side--right {
  top: -6%;
  width: 78%;
  height: 99.8%;
  object-fit: contain;
  object-position: center;
}

@media(max-width:1024px) {
  .hero-showcase {
    --right-final: -8%
  }

  .hero-art.hero-showcase img.hero-showcase__side--right {
    top: -6%;
    width: 76%;
    height: 96%
  }
}

@media(max-width:800px) {
  .hero-showcase {
    --right-final: -10%
  }

  .hero-art.hero-showcase img.hero-showcase__side--right {
    top: -3%;
    width: 74%;
    height: 92%
  }
}

@media(max-width:480px) {
  .hero-showcase {
    --right-final: -12%
  }

  .hero-art.hero-showcase img.hero-showcase__side--right {
    top: 0;
    width: 76%;
    height: 88%
  }
}

/* Fundos das seções: imagem dominante e proteção de contraste suave */
.problem {
  background-image: linear-gradient(105deg, rgba(245, 245, 239, .56) 0%, rgba(245, 245, 239, .34) 55%, rgba(245, 245, 239, .18) 100%), url('../assets/images/backgrounds/bg-02-problema-desktop.avif')
}

.ecosystem {
  background-image: linear-gradient(110deg, rgba(5, 5, 91, .43) 0%, rgba(5, 5, 91, .22) 52%, rgba(2, 3, 47, .10) 100%), url('../assets/images/backgrounds/bg-03-solucoes-desktop.avif')
}

.uses {
  background-image: linear-gradient(105deg, rgba(223, 255, 240, .56) 0%, rgba(223, 255, 240, .33) 55%, rgba(223, 255, 240, .18) 100%), url('../assets/images/backgrounds/bg-04-aplicacoes-desktop.avif')
}

.audience {
  background-image: linear-gradient(105deg, rgba(2, 3, 47, .46) 0%, rgba(2, 3, 47, .23) 55%, rgba(5, 5, 91, .09) 100%), url('../assets/images/backgrounds/bg-05-publico-desktop.avif')
}

.deployment {
  background-image: linear-gradient(105deg, rgba(245, 245, 239, .58) 0%, rgba(245, 245, 239, .36) 55%, rgba(245, 245, 239, .20) 100%), url('../assets/images/backgrounds/bg-06-implantacao-desktop.avif')
}

.contact {
  background-image: linear-gradient(105deg, rgba(156, 255, 142, .55) 0%, rgba(156, 255, 142, .32) 55%, rgba(156, 255, 142, .17) 100%), url('../assets/images/backgrounds/bg-07-contato-desktop.avif')
}

@media(max-width:1024px) {
  .problem {
    background-image: linear-gradient(120deg, rgba(245, 245, 239, .54), rgba(245, 245, 239, .23)), url('../assets/images/backgrounds/bg-02-problema-tablet.avif')
  }

  .ecosystem {
    background-image: linear-gradient(120deg, rgba(5, 5, 91, .41), rgba(2, 3, 47, .13)), url('../assets/images/backgrounds/bg-03-solucoes-tablet.avif')
  }

  .uses {
    background-image: linear-gradient(120deg, rgba(223, 255, 240, .54), rgba(223, 255, 240, .23)), url('../assets/images/backgrounds/bg-04-aplicacoes-tablet.avif')
  }

  .audience {
    background-image: linear-gradient(120deg, rgba(2, 3, 47, .43), rgba(5, 5, 91, .12)), url('../assets/images/backgrounds/bg-05-publico-tablet.avif')
  }

  .deployment {
    background-image: linear-gradient(120deg, rgba(245, 245, 239, .56), rgba(245, 245, 239, .25)), url('../assets/images/backgrounds/bg-06-implantacao-tablet.avif')
  }

  .contact {
    background-image: linear-gradient(120deg, rgba(156, 255, 142, .52), rgba(156, 255, 142, .22)), url('../assets/images/backgrounds/bg-07-contato-tablet.avif')
  }
}

@media(max-width:600px) {
  .problem {
    background-image: linear-gradient(180deg, rgba(245, 245, 239, .52), rgba(245, 245, 239, .27)), url('../assets/images/backgrounds/bg-02-problema-mobile.avif')
  }

  .ecosystem {
    background-image: linear-gradient(180deg, rgba(5, 5, 91, .39), rgba(2, 3, 47, .16)), url('../assets/images/backgrounds/bg-03-solucoes-mobile.avif')
  }

  .uses {
    background-image: linear-gradient(180deg, rgba(223, 255, 240, .52), rgba(223, 255, 240, .27)), url('../assets/images/backgrounds/bg-04-aplicacoes-mobile.avif')
  }

  .audience {
    background-image: linear-gradient(180deg, rgba(2, 3, 47, .42), rgba(5, 5, 91, .15)), url('../assets/images/backgrounds/bg-05-publico-mobile.avif')
  }

  .deployment {
    background-image: linear-gradient(180deg, rgba(245, 245, 239, .54), rgba(245, 245, 239, .29)), url('../assets/images/backgrounds/bg-06-implantacao-mobile.avif')
  }

  .contact {
    background-image: linear-gradient(180deg, rgba(156, 255, 142, .50), rgba(156, 255, 142, .25)), url('../assets/images/backgrounds/bg-07-contato-mobile.avif')
  }
}

/* Cartão digital: produto complementar do LeadScan */
.product-card--digital-card {
  grid-column: 1;
  grid-row: 2;
  background-image: url('../assets/images/products/produto-cartao-digital-desktop.avif');
}

@media(max-width:1024px) {
  .product-grid {
    grid-template-rows: repeat(2, minmax(22rem, 32rem)) minmax(22rem, 28rem)
  }

  .product-card--catalog {
    grid-column: 1;
    grid-row: 1
  }

  .product-card--digital-card {
    grid-column: 1;
    grid-row: 2;
    background-image: url('../assets/images/products/produto-cartao-digital-tablet.avif')
  }

  .product-card--leadscan {
    grid-column: 2;
    grid-row: 1/3
  }

  .product-card--reports {
    grid-column: 1/3;
    grid-row: 3;
    min-height: 26rem
  }
}

@media(max-width:800px) {
  .product-grid {
    grid-template-rows: none
  }

  .product-card--catalog,
  .product-card--digital-card,
  .product-card--leadscan,
  .product-card--reports {
    grid-column: 1;
    grid-row: auto;
    min-height: 31rem
  }

  .product-card--digital-card {
    background-image: url('../assets/images/products/produto-cartao-digital-mobile.avif')
  }
}

/* CTA compacto no cabeçalho */
.site-header .header-cta {
  min-height: 2.6rem;
  padding: .5rem 1rem;
  font-size: .875rem;
}

/* Conteúdo expansível dos cards de produto */
.product-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
      rgba(2, 3, 47, 0) 0%,
      rgba(2, 3, 47, .04) 18%,
      rgba(2, 3, 47, .28) 36%,
      rgba(2, 3, 47, .68) 62%,
      rgba(2, 3, 47, .84) 78%,
      rgba(2, 3, 47, .92) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  mask-image: linear-gradient(180deg, transparent 0%, transparent 18%, rgba(0, 0, 0, .24) 30%, rgba(0, 0, 0, .62) 48%, rgba(0, 0, 0, .9) 68%, #000 78%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 18%, rgba(0, 0, 0, .24) 30%, rgba(0, 0, 0, .62) 48%, rgba(0, 0, 0, .9) 68%, #000 78%);
}

.product-card__content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.product-card__content>p {
  margin: 0 0 .3rem
}

.product-card__details {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(.65rem);
  transition: max-height .48s cubic-bezier(.22, .8, .25, 1), margin-top .48s cubic-bezier(.22, .8, .25, 1), opacity .28s ease, transform .4s ease;
}

.product-card__details ul {
  margin-top: 0
}

.product-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  margin-top: .35rem;
  padding: .45rem 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  background: transparent;
  color: #fff;
  font-size: var(--fs-200);
  font-weight: 700;
  cursor: pointer;
}

.product-card__toggle span:last-child {
  font-size: 1.1em;
  transition: transform .3s ease
}

.product-card__toggle:hover {
  color: var(--accent);
  border-color: var(--accent)
}

.product-card.is-expanded::before {
  opacity: 1
}

.product-card.is-expanded .product-card__details {
  max-height: 18rem;
  margin-top: 1rem;
  opacity: 1;
  transform: none;
}

.product-card.is-expanded .product-card__toggle span:last-child {
  transform: rotate(90deg)
}

@media(prefers-reduced-motion:reduce) {

  .product-card::before,
  .product-card__details,
  .product-card__toggle span:last-child {
    transition: none
  }
}

/* Liquid glass reforçado no header */
.site-header:not(.menu-active) {
  overflow: hidden;
  border-color: rgba(255, 255, 255, .34);
  background:
    linear-gradient(115deg, rgba(34, 42, 139, .58), rgba(20, 92, 132, .38) 48%, rgba(17, 21, 103, .52));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .52),
    inset 0 -1px 0 rgba(122, 234, 255, .18),
    0 1rem 3rem rgba(0, 0, 35, .34),
    0 0 2rem rgba(94, 151, 255, .12);
  backdrop-filter: blur(30px) saturate(185%) contrast(108%);
  -webkit-backdrop-filter: blur(30px) saturate(185%) contrast(108%);
}

.site-header:not(.menu-active)::before {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .20), transparent 30%, rgba(133, 238, 255, .11) 64%, rgba(255, 255, 255, .08));
}

.site-header:not(.menu-active)::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -110%;
  left: -8%;
  width: 42%;
  height: 250%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, .22), rgba(166, 231, 255, .08) 42%, transparent 70%);
  transform: rotate(-15deg);
  pointer-events: none;
}

.site-header.scrolled:not(.menu-active) {
  background: linear-gradient(115deg, rgba(19, 25, 105, .72), rgba(12, 69, 107, .56) 50%, rgba(10, 14, 76, .68));
}

/* Ajustes responsivos consolidados — agosto/2026 */
@media(min-width:769px) {
  .product-card--leadscan {
    grid-column: 1;
    grid-row: 1
  }

  .product-card--digital-card {
    grid-column: 1;
    grid-row: 2
  }

  .product-card--catalog {
    grid-column: 2;
    grid-row: 1/3
  }

  .product-card--reports {
    grid-column: 3;
    grid-row: 1/3;
    min-height: 0
  }
}

/* O header vira uma faixa-sticker de vidro ao iniciar a rolagem. */
.site-header.scrolled:not(.menu-active) {
  top: 0;
  width: 100%;
  max-width: none;
  height: 3.75rem;
  padding-inline: max(1rem, calc((100vw - var(--grid-max))/2));
  border-inline: 0;
  border-radius: 0 0 1rem 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), inset 0 -1px 0 rgba(122, 234, 255, .2), 0 .8rem 2.4rem rgba(0, 0, 35, .3);
}

/* Rodapé: links, créditos e voltar ao topo na mesma faixa final. */
.site-footer {
  grid-template-columns: 1fr auto auto
}

.site-footer>.socials {
  grid-column: 3
}

.footer-meta {
  grid-column: 2
}

.back-to-top {
  position: static;
  grid-column: 3;
  align-self: center;
  justify-self: end;
  color: #fff;
}

@media(min-width:601px) and (max-width:768px) {
  .hero-art.hero-showcase {
    width: min(100%, 42rem);
    height: 27rem;
    margin: 1.5rem auto 0;
    justify-self: center;
    --main-left: 50%;
    --left-final: 4%;
    --right-final: 1%;
  }

  .hero-art.hero-showcase img.hero-showcase__main {
    left: 50%;
    width: min(52%, 15rem);
    height: 100%;
    transform: translateX(-50%) !important;
  }

  .hero-art.hero-showcase img.hero-showcase__side--left {
    top: 23%;
    width: 38%;
    height: 62%;
  }

  .hero-art.hero-showcase img.hero-showcase__side--right {
    top: 5%;
    width: 57%;
    height: 86%;
  }
}

@media(max-width:768px) {
  :root {
    --fs-100: .8125rem;
    --fs-200: 1rem;
    --fs-300: 1.0625rem;
    --fs-400: 1.2rem;
    --section-pad: clamp(4rem, 12vw, 5.25rem) 1.25rem;
  }

  body {
    font-size: 1rem;
    line-height: 1.65
  }

  p,
  li {
    line-height: 1.65
  }

  .product-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem
  }

  .product-card--catalog {
    order: 1
  }

  .product-card--leadscan {
    order: 2
  }

  .product-card--digital-card {
    order: 3
  }

  .product-card--reports {
    order: 4
  }

  .product-card {
    width: 100%;
    min-height: 31rem
  }

  .section-intro {
    gap: 1.25rem;
    margin-bottom: 2.25rem
  }

  .section-intro>p {
    margin: 0
  }

  .problem .lead {
    margin: 1.5rem 0 0
  }

  .use-list {
    margin-top: 2rem
  }

  .use-list article {
    gap: .65rem;
    padding: 1.65rem 0
  }

  .use-list h3,
  .use-list p {
    margin: 0
  }

  .deployment {
    gap: 2.25rem
  }

  .deployment h2,
  .audience h2,
  .contact h2 {
    margin-bottom: 1rem
  }

  .steps article {
    padding: 1.4rem 0
  }

  .faq {
    gap: 2rem
  }

  .faq-list summary {
    font-size: 1.125rem
  }

  .footer-legal a,
  .footer-legal button,
  .footer-meta,
  .site-footer small {
    font-size: 1rem
  }

  .whatsapp-float {
    width: 4rem;
    height: 4rem;
    right: 1rem;
    bottom: 1rem
  }

  .whatsapp-float svg {
    width: 2.2rem;
    height: 2.2rem
  }

  .site-footer {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 2rem
  }

  .site-footer>.socials,
  .footer-brand,
  .footer-legal,
  .footer-meta,
  .footer-divider,
  .back-to-top {
    grid-column: 1
  }

  .site-footer>.socials {
    justify-self: start
  }

  .footer-meta {
    justify-content: flex-start
  }

  .back-to-top {
    justify-self: center;
    margin-top: .5rem
  }
}

@media(max-width:800px) {
  .site-header.menu-active {
    background: radial-gradient(circle at 82% 82%, rgba(25, 91, 135, .38), transparent 38%), linear-gradient(145deg, #050735, #07134f 54%, #061b45);
  }

  .site-header.menu-active nav {
    background: transparent
  }

  .site-header nav a {
    color: #f4f6ff
  }
}

@media(max-width:480px) {
  :root {
    --fs-h1: clamp(2.65rem, 12vw, 3.35rem);
    --fs-h2: clamp(2.15rem, 9vw, 2.8rem)
  }

  .eyebrow {
    font-size: .8125rem
  }

  .product-card p,
  .product-card li,
  .product-card__toggle {
    font-size: 1rem
  }

  .contact>div p,
  .hero-copy>p:not(.eyebrow) {
    font-size: 1.125rem
  }

  .site-footer p,
  .site-footer a,
  .site-footer button {
    font-size: 1rem
  }
}

/* Refinamentos institucionais e biblioteca externa de ícones */
.site-header.scrolled:not(.menu-active),
.site-header.scrolled:not(.menu-active)::before {
  border-radius: 0
}

.menu-toggle img {
  width: 1.5rem;
  height: 1.5rem;
  filter: brightness(0) invert(1)
}

.menu-toggle .icon-close {
  display: none
}

.menu-toggle[aria-expanded="true"] .icon-menu {
  display: none
}

.menu-toggle[aria-expanded="true"] .icon-close {
  display: block
}

.problem .lead {
  width: min(62rem, 100%);
  margin: var(--sp-7) 0 0
}

.audience>p:last-child {
  max-width: 68rem;
  font-size: clamp(1.25rem, 1.05rem + .55vw, 1.65rem);
  font-weight: 600;
  line-height: 1.6;
  word-spacing: .35rem
}

.contact {
  justify-content: center;
  gap: clamp(2rem, 5vw, 4rem)
}

.contact>div {
  justify-content: center
}

.footer-brand p {
  color: var(--accent)
}

.footer-legal a,
.footer-legal button,
.footer-meta {
  font-size: .82rem
}

.footer-meta {
  gap: .5rem;
  white-space: normal
}

.footer-meta__separator {
  color: var(--border-dark);
  margin-inline: .15rem
}

.socials img {
  width: 1.1rem;
  height: 1.1rem;
  filter: brightness(0) invert(1)
}

.contact__content {
  width: 100%;
  align-items: flex-start !important
}

.contact__content>p {
  flex: 0 1 28rem
}

.contact-form {
  flex: 1 1 42rem;
  min-width: 0;
  width: 100%;
  max-width: 48rem;
  box-sizing: border-box;
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(2, 3, 47, .18);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 1.25rem 3rem rgba(2, 3, 47, .12);
  backdrop-filter: blur(12px)
}

.contact-form__grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem
}

.contact-form label:not(.contact-form__consent) {
  min-width: 0;
  display: grid;
  gap: .45rem;
  color: var(--text-on-light);
  font-size: .88rem;
  font-weight: 600
}

.contact-form input:not([type="checkbox"]),
.contact-form textarea {
  min-width: 0;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  padding: .85rem 1rem;
  border: 1px solid rgba(2, 3, 47, .28);
  border-radius: .7rem;
  background: #fff;
  color: var(--text-on-light);
  font: inherit
}

.contact-form textarea {
  resize: vertical;
  min-height: 8rem
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 3px solid rgba(69, 69, 156, .28);
  border-color: #45459c
}

.contact-form__consent {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  color: var(--text-on-light);
  font-size: .82rem
}

.contact-form__consent input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .12rem;
  accent-color: #45459c
}

.contact-form__consent a {
  color: inherit;
  font-weight: 700
}

.contact-form__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap
}

.contact-form__actions .button:disabled {
  cursor: wait;
  opacity: .65
}

.contact-form__status {
  max-width: 28rem !important;
  margin: 0;
  font-size: .85rem !important
}

.contact-form__status.is-success {
  color: #145c2b
}

.contact-form__status.is-error {
  color: #9f1d1d
}

.contact-form__trap {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap
}

@media (max-width: 760px) {
  .contact-form__grid {
    grid-template-columns: 1fr
  }

  .contact__content {
    flex-direction: column
  }

  .contact-form {
    width: 100%;
    max-width: 100%;
    padding-inline: 1rem
  }
}

.back-to-top__icon img {
  width: 1.25rem;
  height: 1.25rem
}

.whatsapp-float {
  bottom: 6.25rem;
  border: 0;
  background: #20d366
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  background: #0eaa4d;
  transform: translateY(-.25rem) scale(1.05)
}

.whatsapp-float img {
  width: 2rem;
  height: 2rem
}

@media(max-width:800px) {
  .problem .lead {
    margin: 1.5rem 0 0
  }

  .audience>p:last-child {
    font-size: 1.2rem;
    word-spacing: .15rem
  }

  .contact>div {
    justify-content: center
  }

  .footer-meta {
    font-size: 1rem;
    gap: .55rem
  }

  .whatsapp-float {
    bottom: 6.25rem
  }

  .whatsapp-float img {
    width: 2.2rem;
    height: 2.2rem
  }
}

/* Lentes canônicas: proteção do texto à esquerda e imagem evidente à direita */
.problem {
  background-image: linear-gradient(86deg, rgba(245, 245, 239, 1) 0%, rgba(245, 245, 239, .72) 42%, rgba(245, 245, 239, .10) 72%, rgba(245, 245, 239, .05) 100%), url('../assets/images/backgrounds/bg-02-problema-desktop.avif')
}

.ecosystem {
  background-image: linear-gradient(105deg, rgba(5, 5, 91, .62) 0%, rgba(5, 5, 91, .40) 42%, rgba(2, 3, 47, .18) 72%, rgba(2, 3, 47, .08) 100%), url('../assets/images/backgrounds/bg-03-solucoes-desktop.avif')
}

.uses {
  background-image: linear-gradient(105deg, rgba(223, 255, 240, .66) 0%, rgba(223, 255, 240, .46) 44%, rgba(223, 255, 240, .24) 74%, rgba(223, 255, 240, .10) 100%), url('../assets/images/backgrounds/bg-04-aplicacoes-desktop.avif')
}

.audience {
  background-image: linear-gradient(105deg, rgba(2, 3, 47, .64) 0%, rgba(2, 3, 47, .40) 42%, rgba(5, 5, 91, .16) 72%, rgba(5, 5, 91, .06) 100%), url('../assets/images/backgrounds/bg-05-publico-desktop.avif')
}

.deployment {
  background-image: linear-gradient(105deg, rgba(245, 245, 239, .72) 0%, rgba(245, 245, 239, .52) 46%, rgba(245, 245, 239, .28) 76%, rgba(245, 245, 239, .12) 100%), url('../assets/images/backgrounds/bg-06-implantacao-desktop.avif')
}

.contact {
  background-image: linear-gradient(105deg, rgba(156, 255, 142, .68) 0%, rgba(156, 255, 142, .44) 44%, rgba(156, 255, 142, .20) 74%, rgba(156, 255, 142, .08) 100%), url('../assets/images/backgrounds/bg-07-contato-desktop.avif')
}

@media(max-width:1024px) {
  .problem {
    background-image: linear-gradient(115deg, rgba(245, 245, 239, .68), rgba(245, 245, 239, .22) 72%, rgba(245, 245, 239, .10)), url('../assets/images/backgrounds/bg-02-problema-tablet.avif')
  }

  .ecosystem {
    background-image: linear-gradient(115deg, rgba(5, 5, 91, .58), rgba(2, 3, 47, .18) 72%, rgba(2, 3, 47, .08)), url('../assets/images/backgrounds/bg-03-solucoes-tablet.avif')
  }

  .uses {
    background-image: linear-gradient(115deg, rgba(223, 255, 240, .62), rgba(223, 255, 240, .24) 72%, rgba(223, 255, 240, .10)), url('../assets/images/backgrounds/bg-04-aplicacoes-tablet.avif')
  }

  .audience {
    background-image: linear-gradient(115deg, rgba(2, 3, 47, .60), rgba(5, 5, 91, .18) 72%, rgba(5, 5, 91, .08)), url('../assets/images/backgrounds/bg-05-publico-tablet.avif')
  }

  .deployment {
    background-image: linear-gradient(115deg, rgba(245, 245, 239, .68), rgba(245, 245, 239, .28) 72%, rgba(245, 245, 239, .12)), url('../assets/images/backgrounds/bg-06-implantacao-tablet.avif')
  }

  .contact {
    background-image: linear-gradient(115deg, rgba(156, 255, 142, .64), rgba(156, 255, 142, .22) 72%, rgba(156, 255, 142, .08)), url('../assets/images/backgrounds/bg-07-contato-tablet.avif')
  }
}

@media(max-width:800px) {
  .problem {
    background-image: linear-gradient(180deg, rgba(245, 245, 239, .68) 0%, rgba(245, 245, 239, .42) 48%, rgba(245, 245, 239, .18) 100%), url('../assets/images/backgrounds/bg-02-problema-mobile.avif')
  }

  .ecosystem {
    background-image: linear-gradient(180deg, rgba(5, 5, 91, .58) 0%, rgba(2, 3, 47, .34) 48%, rgba(2, 3, 47, .14) 100%), url('../assets/images/backgrounds/bg-03-solucoes-mobile.avif')
  }

  .uses {
    background-image: linear-gradient(180deg, rgba(223, 255, 240, .64) 0%, rgba(223, 255, 240, .40) 48%, rgba(223, 255, 240, .18) 100%), url('../assets/images/backgrounds/bg-04-aplicacoes-mobile.avif')
  }

  .audience {
    background-image: linear-gradient(180deg, rgba(2, 3, 47, .60) 0%, rgba(5, 5, 91, .34) 48%, rgba(5, 5, 91, .14) 100%), url('../assets/images/backgrounds/bg-05-publico-mobile.avif')
  }

  .deployment {
    background-image: linear-gradient(180deg, rgba(245, 245, 239, .68) 0%, rgba(245, 245, 239, .44) 52%, rgba(245, 245, 239, .20) 100%), url('../assets/images/backgrounds/bg-06-implantacao-mobile.avif')
  }

  .contact {
    background-image: linear-gradient(180deg, rgba(156, 255, 142, .64) 0%, rgba(156, 255, 142, .38) 48%, rgba(156, 255, 142, .16) 100%), url('../assets/images/backgrounds/bg-07-contato-mobile.avif')
  }
}

.product-card--digital-card {
  background-image: url('../assets/images/products/produto-cartao-digital-desktop.avif')
}

.product-card--reports {
  background-image: url('../assets/images/products/produto-reports-desktop.avif')
}

@media(max-width:1024px) {
  .product-card--digital-card {
    background-image: url('../assets/images/products/produto-cartao-digital-tablet.avif')
  }

  .product-card--reports {
    background-image: url('../assets/images/products/produto-reports-tablet.avif')
  }
}

@media(max-width:800px) {
  .product-card--digital-card {
    background-image: url('../assets/images/products/produto-cartao-digital-mobile.avif')
  }

  .product-card--reports {
    background-image: url('../assets/images/products/produto-reports-mobile.avif')
  }
}

/* Eixo editorial compartilhado: fundos full-width, conteúdo limitado e alinhado */
:root {
  --section-content-edge: max(var(--grid-gutter), calc((100vw - var(--grid-max)) / 2));
}

.hero,
.problem,
.ecosystem,
.uses,
.audience,
.deployment,
.faq,
.contact {
  padding-inline: var(--section-content-edge);
}

/* Problem responsivo: texto protegido e fotografia preservada */
.problem h2 {
  max-width: 52rem;
}

.problem .lead {
  width: min(42rem, 100%);
  margin-left: 0;
  color: rgba(42, 44, 67, .9);
}

@media(min-width:769px) and (max-width:1280px) {
  .problem {
    background-position: 58% center;
    background-image: linear-gradient(0deg, rgba(245, 245, 239, .94) 0%, rgba(245, 245, 239, .76) 46%, rgba(245, 245, 239, .34) 100%), linear-gradient(92deg, rgba(245, 245, 239, .82) 0%, rgba(245, 245, 239, .64) 48%, rgba(245, 245, 239, .22) 100%), url('../assets/images/backgrounds/bg-02-problema-tablet.avif');
  }

  .problem h2 {
    max-width: 46rem;
    font-size: clamp(2.65rem, 5vw, 3.6rem);
  }

  .problem .lead {
    width: min(36rem, 100%);
  }
}

@media(max-width:800px) {
  .problem {
    background-position: 62% center;
    background-image: linear-gradient(0deg, rgba(245, 245, 239, .97) 0%, rgba(245, 245, 239, .90) 42%, rgba(245, 245, 239, .80) 68%, rgba(245, 245, 239, .64) 100%), url('../assets/images/backgrounds/bg-02-problema-mobile.avif');
  }

  .problem h2 {
    max-width: 36rem;
    font-size: clamp(2.15rem, 7vw, 3rem);
  }

  .problem .lead {
    width: 100%;
    color: rgba(31, 34, 56, .92);
  }
}

/* Proteção contra compressão e overflow em telas estreitas */
html,
body,
main,
section,
footer {
  width: 100%;
  max-width: 100%;
}

main,
section,
.section-intro,
.product-grid,
.deployment,
.faq,
.contact>div,
.use-list article,
.deployment>*,
.faq>*,
.section-intro>* {
  min-width: 0;
}

.domain {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.ticker {
  max-width: 100vw;
}

@media(max-width:360px) {
  :root {
    --grid-gutter: .875rem;
    --section-content-edge: .875rem;
  }

  .site-header:not(.menu-active) {
    width: calc(100% - .75rem);
  }

  .problem h2 {
    font-size: 2.1rem;
  }
}

@media (max-width: 760px) {
  .contact__content {
    width: auto;
    max-width: 100%;
    align-self: stretch;
    gap: 1rem
  }

  .contact__content>p {
    flex: 0 1 auto;
    margin: 0
  }

  .contact-form {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    align-self: stretch
  }

  .contact-form input:not([type="checkbox"]),
  .contact-form textarea {
    width: calc(100% - 2rem)
  }
}