* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  --sbw: 0px;
  scrollbar-width: none
}

html::-webkit-scrollbar {
  width: 0;
  height: 0
}

/* Ao travar a rolagem, a barra some e o conteúdo escorrega para a direita.
   Em vez de reservar a calha o tempo todo (que deixa uma faixa visível), a
   largura real da barra é medida no momento da trava e devolvida como padding.
   Onde a barra é sobreposta, como no macOS, a medida dá zero e nada muda. */
html.trava-scroll body,
html.trava-scroll .header,
html.trava-scroll .mobar {
  padding-right: var(--sbw)
}

body {
  background: #ffffff;
  color: #111111;
  font-family: 'Onest', sans-serif;
  overflow-x: clip
}

a {
  color: inherit;
  text-decoration: none
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer
}

ul {
  list-style: none
}

img {
  display: block
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}

@media (max-width:1920px) {
  html {
    font-size: 0.833333vw
  }
}

@media (max-width:1440px) {
  html {
    font-size: 1.111111vw
  }
}

@media (max-width:1024px) {
  html {
    font-size: 1.5625vw
  }
}

@media (max-width:640px) {
  html {
    font-size: 4.444444vw
  }
}

:root {
  --background: #ffffff;
  --foreground: #111111;
  --ink: #0c0c0c;
  --muted: #8d8d8d;
  --subtle: #b6b6b6;
  --line: #e6e5e2;
  --surface: #e4e7ed;
  --surface-2: #e3e2df;
  /* marca: azul para texto/ícone em fundo claro; ciano só em fundo escuro ou gradiente */
  --accent: #2061f7;
  --accent-from: #00dff0;
  --accent-to: #2061f7;
  --accent-warm: #f66c50;
  --warm-from: #fff600;
  --warm-to: #ff8600;
  --danger: #c8321a;
  --hero-from: #ecebe9;
  --hero-to: #c9c9c9;
  --radius-pill: 9999px;
  --radius-card: 2rem;
  --radius-card-sm: 0.75rem;
  --radius-control: 0.875rem;
  --text-watermark: 13rem;
  --container-shell: 88rem;
}

.shell {
  max-width: var(--container-shell);
  margin-inline: auto
}

/* Seções de leitura corrida, como o FAQ, pedem coluna mais curta: linha longa
   demais cansa a leitura. Vale em qualquer página que use o modificador. */
.shell.shell--estreita {
  max-width: 52rem
}

.ic {
  width: 1em;
  height: 1em;
  display: block;
  flex: none
}

/* ---------- reveals ---------- */
.rv {
  opacity: 0;
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1)
}

.rv.in {
  opacity: 1;
  transform: none
}

.lnw {
  display: block;
  overflow: hidden
}

.lni {
  display: block;
  transform: translateY(100%);
  opacity: 0;
  transition: transform .9s cubic-bezier(.215, .61, .355, 1), opacity .9s cubic-bezier(.215, .61, .355, 1)
}

.in .lni {
  transform: none;
  opacity: 1
}

.wd {
  display: inline-block;
  transform: translateY(24px);
  opacity: 0;
  transition: transform .7s cubic-bezier(.165, .84, .44, 1), opacity .7s cubic-bezier(.165, .84, .44, 1)
}

.in .wd {
  transform: none;
  opacity: 1
}

/* ---------- shared bits ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 500;
  color: rgba(17, 17, 17, .7)
}

.eyebrow::before {
  content: "";
  width: .375rem;
  height: .375rem;
  border-radius: 9999px;
  background: rgba(17, 17, 17, .5);
  flex: none
}

.eyebrow.light {
  color: rgba(255, 255, 255, .7)
}

.eyebrow.light::before {
  background: rgba(255, 255, 255, .6)
}

.eyebrow.ring {
  border: 1px solid var(--line);
  border-radius: 9999px;
  padding: .375rem 1rem
}

.pill {
  display: inline-block
}

.pill>.ps {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  border-radius: 9999px;
  font-size: .875rem;
  font-weight: 500;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1)
}

.pill.arrow>.ps {
  padding: .375rem .375rem .375rem 1.5rem
}

.pill:not(.arrow)>.ps {
  padding: .875rem 1.75rem
}

.pill.dark>.ps {
  background: var(--ink);
  color: #fff
}

.pill.light>.ps {
  background: var(--surface);
  color: #111
}

.pill.outline>.ps {
  border: 1px solid var(--ink);
  background: transparent;
  color: #111
}

.pbadge {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  font-size: 1rem;
  background: var(--ink);
  color: #fff;
  flex: none
}

.pill.dark .pbadge {
  background: #fff;
  color: var(--ink)
}

.pbadge .ic {
  transition: transform .35s cubic-bezier(.2, .8, .2, 1)
}

@media (hover:hover) {
  .pill:hover>.ps {
    transform: scale(1.04)
  }

  .pill:hover .pbadge .ic {
    transform: translate(3px, 0)
  }

  .pill.ur:hover .pbadge .ic {
    transform: translate(2px, -2px)
  }
}

.tag {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  border-radius: 9999px;
  padding: .5rem 1rem;
  font-size: .875rem
}

.alink {
  display: inline-flex
}

.alink>span {
  opacity: .65;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s cubic-bezier(.2, .8, .2, 1)
}

@media (hover:hover) {
  .alink:hover>span {
    transform: translateX(4px);
    opacity: 1
  }
}

.alink.sm>span {
  opacity: .7
}

@media (hover:hover) {
  .alink.sm:hover>span {
    transform: translateX(3px);
    opacity: 1
  }
}

.skip {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0)
}

.skip:focus {
  position: fixed;
  width: auto;
  height: auto;
  clip: auto;
  left: 1rem;
  top: 1rem;
  z-index: 60;
  border-radius: .875rem;
  background: var(--ink);
  padding: .5rem 1rem;
  font-size: .875rem;
  color: #fff
}

/* ---------- loader ---------- */
#loader {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background: var(--ink);
  color: #fff;
  transform: translateY(0);
  transition: transform .7s cubic-bezier(.22, 1, .36, 1)
}

#loader.out {
  transform: translateY(-100%)
}

#loader .lc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
  opacity: 1;
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1)
}

#loader.out .lc {
  opacity: 0;
  transform: translateY(-12px)
}

#loader .lbrand {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: 1.5rem
}

#loader .lbrand .ic {
  font-size: 1.875rem;
  color: var(--accent-from)
}

#loader .ltag {
  max-width: 24ch;
  font-size: .875rem;
  color: rgba(255, 255, 255, .55)
}

#loader .lprog {
  width: min(22rem, 72vw);
  display: flex;
  flex-direction: column;
  gap: .75rem
}

#loader .ltrack {
  height: 1px;
  background: rgba(255, 255, 255, .15)
}

/* scaleX em vez de width: roda no compositor, sem forçar layout a cada frame.
   Sem transition aqui — quem anima é o rAF do main.js. Uma transição de .1s
   brigando com uma escrita a cada 16ms reinicia o ease a cada tick e trava. */
#loader .lfill {
  height: 100%;
  width: 100%;
  background: var(--accent-from);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform
}

#loader .lrow {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .45)
}

#loader .lnum {
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .8)
}

@media (min-width:640px) {
  #loader .lbrand {
    font-size: 1.875rem
  }
}

/* ---------- header ---------- */
.header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50
}

/* O desfoque fica numa camada própria para cobrir a largura toda da tela sem
   arrastar o conteúdo junto. Em pseudo-elemento, e não no .header, porque
   backdrop-filter no pai o tornaria backdrop root e mataria o blur da barra
   flutuante quando ela aparece na rolagem. */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: opacity .45s ease
}

.header.stuck::before {
  opacity: 0
}

.header .hin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--container-shell);
  margin-top: 0;
  padding: 1.25rem;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  transition: width .55s cubic-bezier(.22, 1, .36, 1), max-width .55s cubic-bezier(.22, 1, .36, 1),
    margin-top .55s cubic-bezier(.22, 1, .36, 1), padding .55s cubic-bezier(.22, 1, .36, 1),
    gap .55s cubic-bezier(.22, 1, .36, 1), border-radius .55s cubic-bezier(.22, 1, .36, 1),
    background .4s ease, border-color .4s ease, box-shadow .4s ease
}

.header.stuck .hin {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  width: calc(100% - 1.5rem);
  max-width: calc(var(--container-shell) - 4rem);
  margin-top: 1.625rem;
  gap: 1rem;
  padding: .625rem .625rem .625rem 1rem;
  border-radius: var(--radius-card-sm);
  border-color: rgba(230, 229, 226, .9);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 14px 34px -18px rgba(12, 12, 12, .35)
}

.header .brand img,
.header .hnav ul,
.header .clock,
.header .menubtn>span {
  transition: height .55s cubic-bezier(.22, 1, .36, 1), gap .55s cubic-bezier(.22, 1, .36, 1),
    padding .55s cubic-bezier(.22, 1, .36, 1), transform .35s cubic-bezier(.2, .8, .2, 1)
}

.header.stuck .hnav ul {
  gap: 1.5rem
}

.header.stuck .clock {
  padding: .375rem .625rem
}

.header.stuck .menubtn>span {
  padding: .375rem .875rem
}

.brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1)
}

.brand .ic {
  font-size: 1.25rem;
  color: var(--accent)
}

.brand img {
  display: block;
  height: 2rem;
  width: auto
}

#loader .lbrand img {
  display: block;
  height: 2.25rem;
  width: auto
}

@media (min-width:640px) {
  #loader .lbrand img {
    height: 2.75rem
  }
}

@media (hover:hover) {
  .brandbtn:hover .brand {
    transform: scale(1.04)
  }
}

.hnav {
  display: none
}

.hnav ul {
  display: flex;
  gap: 2rem;
  font-size: .875rem;
  font-weight: 500
}

.hnav button>span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  opacity: .8;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s cubic-bezier(.2, .8, .2, 1)
}

@media (hover:hover) {
  .hnav button:hover>span {
    transform: translateY(-2px);
    opacity: 1
  }
}

.caret {
  font-size: .75rem;
  opacity: .6
}

.hright {
  display: flex;
  align-items: center;
  gap: .75rem
}

.clock {
  display: none;
  align-items: center;
  gap: .75rem;
  border: 1px solid rgba(230, 229, 226, .8);
  background: rgba(255, 255, 255, .4);
  backdrop-filter: blur(4px);
  border-radius: 2rem;
  padding: .5rem .75rem;
  font-size: .75rem;
  color: rgba(17, 17, 17, .7)
}

.clock .lbl {
  color: rgba(17, 17, 17, .45)
}

.clock .t {
  min-width: 3.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: #111
}

.clock .sep {
  color: rgba(17, 17, 17, .3)
}

.clock .d {
  font-weight: 500
}

.menubtn {
  border: 1px solid rgba(230, 229, 226, .8);
  background: rgba(255, 255, 255, .4);
  backdrop-filter: blur(4px);
  border-radius: 2rem
}

.menubtn:hover {
  background: rgba(255, 255, 255, .7)
}

.menubtn>span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1)
}

.menubtn .ic {
  font-size: .875rem
}

.menubtn .mtxt {
  display: none
}

@media (hover:hover) {
  .menubtn:hover>span {
    transform: scale(1.05)
  }
}

@media (min-width:640px) {
  .header .hin {
    padding: 1.5rem 2rem
  }

  .header.stuck .hin {
    width: calc(100% - 2.5rem);
    margin-top: 1.875rem;
    padding: .75rem .75rem .75rem 1.25rem
  }

  .menubtn .mtxt {
    display: inline
  }
}

@media (min-width:768px) {
  .clock {
    display: flex
  }
}

@media (min-width:1024px) {
  .hnav {
    display: flex
  }
}

/* ---------- hero ---------- */
#home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0 0 2rem 2rem;
  background: var(--hero-to)
}

.lr {
  position: absolute;
  inset: 0;
  z-index: 0
}

.lr img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lr canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none
}

.vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .35), transparent, rgba(255, 255, 255, .35))
}

.wm {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  user-select: none;
  line-height: 1;
  font-size: 60rem;
  color: rgba(255, 255, 255, .4)
}

@media (min-width:640px) {
  .wm {
    font-size: 40rem
  }
}

@media (min-width:1024px) {
  .wm {
    font-size: 50rem
  }
}

/* ---------- hero em vídeo ----------
   Só entra em quem marca body.hero-video, mesma convenção do body.hero-escuro.

   Sem poster: no lugar dele um degradê com as cores amostradas do primeiro
   frame do clipe. Custa zero byte, não é imagem parada e cobre todos os casos
   em que o vídeo não roda (movimento reduzido, Save-Data, autoplay recusado). */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  /* cor média do próprio clipe, não o cinza do tema: o que aparece antes do
     vídeo pintar passa a pertencer à cena em vez de destoar dela */
  background: #a8afc4
}

/* No celular o hero tem 1025px de altura e o clipe é 800x600: o object-fit
   cover chega a 1,71x, que em DPR 3 vira 5,1x de ampliação e é o que deixa a
   imagem mole. Encurtando a área do vídeo, a escala cai para ~0,87x e a
   ampliação para ~2,6x, metade da anterior. A máscara evita corte seco: o
   vídeo se dissolve na cor do #home em vez de terminar numa linha. */
body.hero-video #home {
  background: #e4e7ed
}

/* A máscara é a mesma nas duas pontas; o media query abaixo só muda a
   geometria. O raio tem de ser 50% da caixa: acima disso ela não chega a
   transparente nas laterais e a borda reta do vídeo reaparece. O ponto de
   ajuste é a parada sólida — 30% deixa mais difuso, 62% dá mais presença ao
   clipe e começa a denunciar o contorno oval. */
body.hero-video .hero-video-wrap {
  top: 10%;
  right: 5%;
  height: 45%;
  bottom: auto;
  min-height: 20rem;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%)
}

/* No desktop quem manda no cover é a largura, então estreitar o vídeo é o que
   ganha nitidez de verdade. Preso à largura do shell (88rem) e alimentado pelo
   clipe de 1440px, a escala sai de 2,40x de ampliação para ~0,98x, ou seja,
   redução: o melhor caso possível, sem inventar pixel.

   A máscara vira radial porque agora as quatro bordas ficam à mostra; um
   degradê só vertical deixaria duas linhas retas nas laterais. */
@media (min-width:1024px) {
  body.hero-video .hero-video-wrap {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(88rem, 92vw);
    height: 74vh;
    height: 74svh;
    transform: translate(-50%, -50%);
    /* Radial. O raio tem de ser 50% da caixa: acima disso a máscara não chega
       a transparente nas laterais e a borda reta do vídeo reaparece. O ponto
       de ajuste é a parada sólida — 30% deixa mais difuso, 62% dá mais
       presença ao clipe e começa a denunciar o contorno oval. */
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%)
  }
}

/* No iOS todo navegador é WebKit e o WebKit pode recusar o autoplay, e aí não
   baixa nem um byte do vídeo. Imagem animada não passa por política nenhuma:
   anima sempre. Só é buscada quando o vídeo comprovadamente não partiu, então
   não pesa em quem já está tocando. */
.hero-video-wrap.sem-video {
  background: url('/assets/videos/hero-anim.webp') center / cover no-repeat
}

.hero-video-wrap.sem-video .hero-video-el {
  display: none
}

/* O vídeo nunca é escondido: nada de opacity 0 nem de camada por cima. Alguns
   motores só concedem autoplay a mídia considerada visível, e esconder o vídeo
   entra nessa zona cinzenta. */
.hero-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block
}

/* Scrim dimensionado pela luminância medida do clipe: topo e rodapé caem até
   Y=137, o miolo da esquerda nunca desce de Y=201. */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, .35) 0%,
      rgba(255, 255, 255, .1) 18%,
      rgba(255, 255, 255, .1) 66%,
      rgba(255, 255, 255, .38) 100%)
}

/* A coluna direita do vídeo chega a Y=91. Sem painel atrás, .partners fica em
   2.2:1 de contraste. Mesmo vidro do .hcard, para manter a linguagem. */
body.hero-video .partners {
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(12px);
  padding: .875rem .75rem 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 0 0 1px rgba(230, 229, 226, .7)
}

/* Em 4 colunas cada faixa fica com ~56px e os rótulos mais largos ("Oracle",
   "Cloudflare") precisam de 66px: a lista transborda. Sem fundo atrás isso
   passa despercebido, mas dentro do painel os logos saem para fora dele.
   Em 3 colunas sobra folga e a lista fica contida. */
body.hero-video .partners ul {
  grid-template-columns: repeat(3, 1fr);
  column-gap: .625rem
}

body.hero-video .partners .plbl {
  color: rgba(17, 17, 17, .75)
}

body.hero-video .partners li>span {
  color: rgba(17, 17, 17, .85);
  opacity: 1
}

body.hero-video .partners .ic {
  color: rgba(17, 17, 17, .7)
}

body.hero-video .hstatus {
  color: rgba(17, 17, 17, .85)
}

.hero-grid {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 5rem 1.25rem 5rem
}

.hcol-l {
  display: flex;
  flex-direction: column;
  gap: 1.75rem
}

.hcol-r {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem
}

.h1 {
  max-width: 24ch;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.02em
}

.rating {
  display: flex;
  align-items: center;
  gap: .75rem
}

.stars {
  display: inline-flex;
  gap: .15rem;
  color: var(--accent);
  font-size: 1rem
}

.rating span.t {
  font-size: .875rem;
  font-weight: 500;
  color: rgba(17, 17, 17, .7)
}

.ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem
}

.hcard {
  width: 100%;
  max-width: 24rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .7);
  padding: .5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 0 0 1px rgba(230, 229, 226, .7);
  backdrop-filter: blur(12px)
}

.hcard .row {
  display: flex;
  gap: .5rem;
  cursor: pointer;
  border-radius: .875rem
}

.hcard .tile {
  aspect-ratio: 1;
  width: 6rem;
  display: grid;
  place-items: center;
  border-radius: .875rem;
  background: var(--ink);
  font-size: 1.875rem;
  color: #fff;
  flex: none
}

.hcard .tile .ic {
  color: var(--accent-from)
}

.hcard .panel {
  flex: 1;
  border-radius: .875rem;
  background: rgba(241, 240, 238, .7);
  padding: .75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0
}

.hcard .slot {
  position: relative;
  min-height: 3.25rem
}

.hcard .item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s cubic-bezier(.2, .8, .2, 1), transform .45s cubic-bezier(.2, .8, .2, 1)
}

.hcard .item.on {
  opacity: 1;
  transform: none;
  position: relative
}

.hcard .cap {
  font-size: .65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(17, 17, 17, .45)
}

.hcard .ttl {
  max-width: 8rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.35
}

.hcard .bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .75rem
}

.hcard .dots {
  display: flex;
  align-items: center;
  gap: .25rem
}

.hcard .dot {
  height: .25rem;
  border-radius: 9999px;
  width: .375rem;
  background: rgba(17, 17, 17, .2);
  transition: all .3s
}

.hcard .dot.on {
  width: 1rem;
  background: rgba(17, 17, 17, .7)
}

.hcard .navs {
  display: flex;
  gap: .375rem
}

.hcard .nb {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: #fff;
  color: rgba(17, 17, 17, .7);
  box-shadow: 0 0 0 1px var(--line);
  font-size: .75rem
}

.hcard .nb:hover {
  color: #111
}

.hcard .nb.prev .ic {
  transform: rotate(180deg)
}

.partners {
  width: 100%;
  max-width: 24rem
}

.partners .plbl {
  margin-bottom: .75rem;
  font-size: .75rem;
  font-weight: 500;
  color: rgba(17, 17, 17, .45);
  text-align: left
}

.partners ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1rem;
  row-gap: .875rem
}

.partners li>span {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  color: rgba(17, 17, 17, .7);
  opacity: .7;
  transition: opacity .35s cubic-bezier(.2, .8, .2, 1)
}

.partners .ic {
  font-size: 1rem;
  color: rgba(17, 17, 17, .55)
}

@media (hover:hover) {
  .partners li:hover>span {
    opacity: 1
  }
}

.hstatus {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-top: 1px solid rgba(17, 17, 17, .1);
  padding: 1.25rem;
  font-size: .5rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .025em;
  color: rgba(17, 17, 17, .6)
}

.hstatus .mid {
  display: none
}

.hstatus .rt {
  display: inline-flex;
  align-items: center;
  gap: .5rem
}

@media (min-width:640px) {
  .hero-grid {
    padding-inline: 2rem
  }

  .hstatus {
    padding-inline: 2rem
  }

  .hstatus .mid {
    display: block
  }

  .h1 {
    font-size: 3rem
  }
}

@media (min-width:768px) {
  .h1 {
    font-size: 3.75rem
  }
}

@media (min-width:1024px) {
  .hero-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2.5rem;
    padding: 9rem 2rem 7rem
  }

  .hcol-l {
    grid-column: span 7
  }

  .hcol-r {
    grid-column: span 5;
    align-items: flex-end
  }

  .hcard {
    width: 19rem
  }

  .partners {
    max-width: 19rem
  }

  .partners .plbl {
    text-align: right
  }
}

/* ---------- about ---------- */
#about {
  background: #fff
}

#about .shell {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 3rem;
  padding: 5rem 1.25rem
}

.globe-block {
  position: relative;
  min-height: 14rem
}

.globe-bg {
  position: absolute;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12rem;
  color: rgba(17, 17, 17, .1)
}

.globe-foot {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .875rem;
  color: rgba(17, 17, 17, .7)
}

.globe-foot .ic {
  font-size: 1.5rem;
  color: #111
}

.globe-foot span {
  max-width: 14rem
}

.statement {
  display: flex;
  flex-direction: column;
  gap: 2.5rem
}

.statement h2 {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.03em;
  text-wrap: pretty
}

.statement h2 .m {
  color: var(--muted)
}

.aboot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem
}

.aboot .lbl {
  font-size: .875rem;
  color: rgba(17, 17, 17, .45);
  margin-bottom: .75rem
}

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

.soc {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  font-size: .875rem;
  background: var(--surface);
  color: rgba(17, 17, 17, .7)
}

.soc.x {
  background: var(--accent);
  color: #fff
}

.soc .ic {
  transition: transform .3s cubic-bezier(.2, .8, .2, 1)
}

@media (hover:hover) {
  .soc:hover .ic {
    transform: scale(1.18)
  }
}

@media (min-width:640px) {
  #about .shell {
    padding-inline: 2rem
  }

  .globe-bg {
    font-size: 16rem
  }

  .statement h2 {
    font-size: 1.875rem
  }
}

@media (min-width:1024px) {
  #about .shell {
    grid-template-columns: 1fr 1fr;
    padding-block: 7rem
  }

  .globe-block {
    min-height: 20rem
  }

  .globe-bg {
    left: -1.5rem;
    font-size: 20rem
  }
}

/* ---------- create band ---------- */
.band {
  background: #fff
}

.band ul {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 2.5rem 1.25rem
}

.band li {
  flex: 1
}

.band .tile {
  display: grid;
  place-items: center;
  height: 6rem;
  border-radius: 9999px;
  font-size: 1.875rem;
  font-weight: 500;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1)
}

@media (hover:hover) {
  .band li:hover .tile {
    transform: scale(1.03)
  }
}

.band .t-light {
  background: var(--surface);
  color: #111
}

.band .t-accent {
  background: linear-gradient(to bottom right, var(--accent-from), var(--accent-to));
  color: var(--ink)
}

.band .t-dark {
  background: var(--ink);
  color: #fff;
  font-size: 2.25rem
}

/* Abaixo de 640px a faixa empilha em coluna: a seta para a direita passaria a
   apontar para fora da sequência. Girar o glifo evita um segundo símbolo. */
@media (max-width:639px) {
  .band .t-dark .ic {
    transform: rotate(90deg)
  }
}

.band .t-ghost {
  background: linear-gradient(to bottom right, var(--warm-from), var(--warm-to));
  color: var(--ink)
}

@media (min-width:640px) {
  .band ul {
    flex-direction: row;
    gap: 1rem;
    padding-inline: 2rem
  }

  .band .tile {
    height: 10rem;
    font-size: 1.875rem
  }

  .band .t-dark {
    font-size: 2.25rem
  }
}

/* ---------- portfolio ---------- */
#works {
  background: #fff
}

#works .shell {
  padding: 2.5rem 1.25rem 5rem
}

.works-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 3rem;
  text-align: center
}

.works-head h2 {
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -.03em;
  width: fit-content
}

.works-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem
}

@media (max-width:767px) {
  .works-grid>li {
    position: sticky;
    top: 5.5rem
  }

  .works-grid>li:nth-child(2) {
    top: 6.25rem
  }

  .works-grid>li:nth-child(3) {
    top: 7rem
  }

  .works-grid>li:nth-child(4) {
    top: 7.75rem
  }

  .works-grid>li:last-child {
    margin-bottom: 2rem
  }
}

.wcard {
  position: relative;
  min-height: 22rem;
  overflow: hidden;
  border-radius: 2rem;
  background: var(--ink);
  padding: 1.5rem;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05);
  display: block;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1)
}

.wmeta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .025em;
  color: rgba(255, 255, 255, .45)
}

.wbadge {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
  flex: none;
  font-size: 1rem;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1)
}

.wwm {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  align-content: start;
  padding-top: 3rem;
  pointer-events: none
}

.wwm .ic {
  font-size: 4.5rem;
  color: rgba(255, 255, 255, .9)
}

.wwm sup {
  font-size: .75rem;
  color: rgba(255, 255, 255, .6)
}

.wbot {
  position: absolute;
  z-index: 1;
  inset-inline: 1.5rem;
  bottom: 1.5rem
}

.wbot h3 {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -.01em
}

.wbot p {
  margin-top: .5rem;
  max-width: 28rem;
  font-size: .875rem;
  color: rgba(255, 255, 255, .55)
}

.wtags {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem
}

@media (hover:hover) {
  .wcard:hover {
    transform: translateY(-8px) scale(1.012)
  }

  .wcard:hover .wbadge {
    transform: rotate(45deg) scale(1.08)
  }
}

@media (max-width:767px) {
  .wbot {
    position: static;
    margin-top: 7.5rem
  }

  .wwm {
    padding-top: 2.75rem
  }

  .wwm .ic {
    font-size: 3.5rem;
    color: rgba(255, 255, 255, .6)
  }
}

@media (min-width:640px) {
  #works .shell {
    padding-inline: 2rem
  }

  .works-head h2 {
    font-size: 3rem
  }

  .wcard {
    min-height: 26rem;
    padding: 2rem
  }

  .wbot {
    inset-inline: 2rem;
    bottom: 2rem
  }

  .wbot h3 {
    font-size: 1.875rem
  }
}

@media (min-width:768px) {
  .works-grid {
    display: grid;
    grid-template-columns: 1fr 1fr
  }
}

@media (min-width:1024px) {
  #works .shell {
    padding-bottom: 7rem
  }
}

/* ---------- services ---------- */
#services {
  background: #fff
}

#services .shell {
  padding: 5rem 1.25rem
}

#services h2 {
  margin: 1.25rem 0 3rem;
  max-width: 16ch;
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -.02em
}

.srow {
  border-top: 1px solid var(--line)
}

.srow:first-child {
  border-top: none
}

.srow>a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(241, 240, 238, 0);
  transition: background .4s cubic-bezier(.2, .8, .2, 1), padding .4s cubic-bezier(.2, .8, .2, 1)
}

.srow .idx {
  width: 1.75rem;
  font-size: .875rem;
  font-weight: 500;
  color: rgba(17, 17, 17, .4);
  flex: none
}

.srow h3 {
  flex: 1;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -.01em
}

.srow p {
  display: none;
  max-width: 20rem;
  font-size: .875rem;
  color: rgba(17, 17, 17, .55)
}

.sbadge {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: var(--ink);
  color: #fff;
  flex: none;
  font-size: 1rem;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1)
}

@media (hover:hover) {
  .srow>a:hover {
    background: rgba(228, 231, 237, 1);
    padding-left: 2rem;
    padding-right: 1.25rem
  }

  .srow>a:hover .sbadge {
    transform: translateX(5px)
  }
}

@media (min-width:640px) {
  #services .shell {
    padding-inline: 2rem
  }

  #services h2 {
    margin-bottom: 3.5rem;
    font-size: 3rem
  }

  .srow>a {
    gap: 1.5rem;
    padding-block: 2rem
  }

  .srow h3 {
    font-size: 1.875rem
  }

  .sbadge {
    width: 3rem;
    height: 3rem
  }
}

@media (min-width:768px) {
  .srow h3 {
    font-size: 2.25rem
  }
}

@media (min-width:1024px) {
  #services .shell {
    padding-block: 7rem
  }

  .srow p {
    display: block
  }
}

/* ---------- stats ---------- */
.stats {
  background: #fff
}

.stats .shell {
  padding: 0 1.25rem 5rem
}

.spanel {
  border-radius: 2rem;
  background: var(--ink);
  padding: 3rem 1.5rem;
  color: #fff
}

.spanel h2 {
  margin-top: 1rem;
  max-width: 20ch;
  font-size: 1.875rem;
  font-weight: 500;
  letter-spacing: -.01em
}

.sgrid {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2rem;
  row-gap: 3rem
}

.sgrid .n {
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: -.02em
}

.sgrid .l {
  margin-top: .75rem;
  font-size: .875rem;
  color: rgba(255, 255, 255, .55)
}

@media (min-width:640px) {
  .stats .shell {
    padding-inline: 2rem
  }

  .spanel {
    padding: 4rem 2rem
  }

  .sgrid .n {
    font-size: 3.75rem
  }
}

@media (min-width:768px) {
  .spanel {
    padding-inline: 4rem
  }

  .spanel h2 {
    font-size: 2.25rem
  }

  .sgrid .n {
    font-size: 4.5rem
  }
}

@media (min-width:1024px) {
  .stats .shell {
    padding-bottom: 7rem
  }

  .sgrid {
    grid-template-columns: repeat(4, 1fr)
  }
}

/* ---------- footer ---------- */
footer {
  position: relative;
  overflow: hidden;
  border-radius: 2rem 2rem 0 0;
  background: var(--ink);
  color: #fff
}

footer .shell {
  position: relative;
  z-index: 10;
  padding: 5rem 1.25rem 2.5rem
}

.fcta {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  padding-bottom: 4rem
}

.fcta h2 {
  max-width: 16ch;
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -.02em
}

.fcols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-block: 4rem
}

.fcols .btag {
  max-width: 20rem;
  font-size: .875rem;
  color: rgba(255, 255, 255, .55);
  margin-top: 1rem
}

.fcols h3 {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .025em;
  color: rgba(255, 255, 255, .4);
  font-weight: 500
}

.fcols ul {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 1.25rem;
  font-size: .875rem
}

.flegal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: 2rem;
  font-size: .75rem;
  color: rgba(255, 255, 255, .45)
}

.flegal .lks {
  display: flex;
  gap: 1.5rem
}

.fwm {
  position: absolute;
  inset-inline: 0;
  bottom: -1.5rem;
  z-index: 0;
  text-align: center;
  pointer-events: none;
  user-select: none;
  font-weight: 700;
  line-height: 1;
  font-size: var(--text-watermark);
  color: rgba(255, 255, 255, .05)
}

@media (min-width:640px) {
  footer .shell {
    padding-inline: 2rem
  }

  .fcta h2 {
    font-size: 3rem
  }

  .flegal {
    flex-direction: row
  }
}

@media (min-width:768px) {
  .fcta h2 {
    font-size: 3.75rem
  }

  .fcols {
    grid-template-columns: 1fr 1fr
  }
}

@media (min-width:1024px) {
  footer .shell {
    padding-top: 6rem
  }

  .fcta {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between
  }

  .fcols {
    grid-template-columns: repeat(4, 1fr)
  }
}

/* ---------- nav menu ---------- */
#navmenu {
  position: fixed;
  inset: 0;
  z-index: 115;
  display: none;
  flex-direction: column;
  background: var(--ink);
  color: #fff;
  opacity: 0;
  transition: opacity .45s cubic-bezier(.22, 1, .36, 1)
}

#navmenu.mount {
  display: flex
}

#navmenu.open {
  opacity: 1
}

/* .shell traz margin-inline:auto, e margem automática no eixo cruzado cancela
   o stretch do flex em coluna: sem width:100% o bloco encolhe até o conteúdo e
   o space-between fica sem folga para separar logo e botão. */
#navmenu .top,
#navmenu .navwrap,
#navmenu .bot {
  width: 100%
}

#navmenu .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem
}

#navmenu .top .brand .ic {
  color: var(--accent-from)
}

.closebtn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: .875rem;
  padding: .5rem 1rem;
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .7)
}

.closebtn:hover {
  border-color: rgba(255, 255, 255, .4);
  color: #fff
}

.closebtn .ic {
  font-size: .875rem
}

#navmenu .navwrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  scrollbar-width: none
}

#navmenu .navwrap::-webkit-scrollbar {
  width: 0
}

#navmenu .navwrap ul {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding-inline: 1.25rem
}

#navmenu .navwrap li>button,
#navmenu .navwrap li>a {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: .375rem;
  text-align: left;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -.03em;
  transform: translateY(1rem);
  opacity: 0;
  transition: all .5s ease-out
}

#navmenu.open .navwrap li>button,
#navmenu.open .navwrap li>a {
  transform: translateY(0);
  opacity: 1
}

#navmenu .navwrap .n {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, .3);
  transition: color .3s
}

#navmenu .navwrap .lb {
  color: rgba(255, 255, 255, .7);
  transition: color .3s
}

#navmenu .navwrap li>button:hover .n,
#navmenu .navwrap li>a:hover .n {
  color: var(--accent-from)
}

#navmenu .navwrap li>button:hover .lb,
#navmenu .navwrap li>a:hover .lb {
  color: #fff
}

#navmenu .bot {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 1.5rem 1.25rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .025em;
  color: rgba(255, 255, 255, .45)
}

#navmenu .bot button {
  color: rgba(255, 255, 255, .7)
}

/* no celular a coluna empilha os dois: centralizar deixa o horário alinhado
   com o botão, que já centraliza o texto por ser <button> */
@media (max-width:639px) {
  #navmenu .bot {
    text-align: center
  }
}

#navmenu .bot button:hover {
  text-decoration: underline;
  color: #fff
}

@media (min-width:640px) {
  #navmenu .top {
    padding: 1.5rem 2rem
  }

  #navmenu .navwrap ul {
    padding-inline: 2rem
  }

  #navmenu .navwrap li>button,
  #navmenu .navwrap li>a {
    font-size: 3rem
  }

  #navmenu .bot {
    flex-direction: row;
    justify-content: space-between;
    padding-inline: 2rem
  }
}

/* ---------- modal ---------- */
#modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
  background: rgba(17, 17, 17, .3);
  backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity .4s cubic-bezier(.22, 1, .36, 1)
}

#modal.mount {
  display: flex
}

#modal.open {
  opacity: 1
}

#modal .panel {
  position: relative;
  width: 100%;
  max-width: 32rem;
  overflow: hidden;
  border-radius: 2rem;
  background: #fff;
  padding: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25), 0 0 0 1px var(--line);
  transform: translateY(28px);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1)
}

#modal.open .panel {
  transform: translateY(0)
}

#modal.closing .panel {
  transform: translateY(18px)
}

.mclose {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: var(--surface);
  color: rgba(17, 17, 17, .6);
  font-size: .875rem
}

.mclose:hover {
  background: var(--surface-2);
  color: #111
}

.mhead {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .375rem
}

.mhead .k {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 500;
  color: rgba(17, 17, 17, .6)
}

.mhead .k::before {
  content: "";
  width: .375rem;
  height: .375rem;
  border-radius: 9999px;
  background: var(--accent)
}

.mhead h2 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.01em
}

#reqform {
  display: flex;
  flex-direction: column;
  gap: 1rem
}

#reqform label {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

#reqform .cap {
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .025em;
  color: rgba(17, 17, 17, .5)
}

#reqform input,
#reqform textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(241, 240, 238, .5);
  border-radius: .875rem;
  padding: .75rem 1rem;
  font-size: .875rem;
  font-family: inherit;
  color: inherit;
  outline: none;
  transition: border-color .2s, background .2s
}

#reqform textarea {
  resize: none
}

#reqform input:focus,
#reqform textarea:focus {
  border-color: rgba(17, 17, 17, .3);
  background: #fff
}

.mbot {
  margin-top: .5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem
}

.mbot .note {
  font-size: .75rem;
  color: rgba(17, 17, 17, .45)
}

#reqsuccess {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: 2rem;
  gap: 1rem
}

#reqsuccess .badge {
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: var(--ink);
  color: var(--accent-from);
  font-size: 1.5rem
}

#reqsuccess h2 {
  font-size: 1.5rem;
  font-weight: 600
}

#reqsuccess p {
  max-width: 32ch;
  font-size: .875rem;
  color: rgba(17, 17, 17, .6)
}

@media (min-width:640px) {
  #modal {
    align-items: center
  }

  #modal .panel {
    padding: 2rem
  }

  .mhead h2 {
    font-size: 1.875rem
  }
}

/* ---------- process ---------- */
#processo {
  background: var(--surface)
}

#processo .shell {
  padding: 5rem 1.25rem
}

#processo h2 {
  margin: 1.25rem 0 3rem;
  max-width: 18ch;
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -.02em
}

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.75rem 1.25rem;
  padding-top: 1.5rem;
  list-style: none;
  perspective: 1400px;
  perspective-origin: 50% 0
}

.step {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(9deg);
  transform-origin: 50% 100%;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1)
}

.step__sheet {
  position: absolute;
  inset-inline: 1.25rem;
  top: -.625rem;
  height: 5rem;
  border-radius: .625rem .625rem 0 0;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
  transform: translateZ(-34px);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1)
}

.step__tab {
  position: absolute;
  left: 0;
  top: -1.5rem;
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 1.75rem 0 1.25rem;
  border-radius: .875rem 0 0 0;
  background: var(--ink);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  transform: translateZ(-16px);
  clip-path: polygon(0 0, calc(100% - .875rem) 0, 100% 100%, 0 100%)
}

.step__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  border-radius: 0 1.5rem 1.5rem 1.5rem;
  background: #fff;
  padding: 2rem;
  box-shadow: 0 0 0 1px var(--line), 0 26px 44px -30px rgba(12, 12, 12, .6);
  transition: box-shadow .6s ease
}

.step__card h3 {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -.01em
}

.step__card p {
  font-size: .875rem;
  line-height: 1.65;
  color: rgba(17, 17, 17, .55)
}

@media (min-width:640px) {
  #processo .shell {
    padding-inline: 2rem
  }

  #processo h2 {
    font-size: 3rem
  }
}

@media (min-width:768px) {
  .steps {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media (min-width:1024px) {
  #processo .shell {
    padding-block: 7rem
  }
}

/* ---------- pricing ---------- */
#planos {
  background: #fff
}

#planos .shell {
  padding: 5rem 1.25rem
}

#planos h2 {
  margin: 1.25rem 0 3rem;
  max-width: 18ch;
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -.02em
}

.plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-radius: 2rem;
  background: var(--surface);
  padding: 2rem;
  box-shadow: 0 0 0 1px var(--line)
}

.plan.feat {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08)
}

.plan-badge {
  position: absolute;
  right: 2rem;
  top: 2rem;
  border-radius: 9999px;
  background: var(--accent);
  color: #fff;
  padding: .25rem .75rem;
  font-size: .75rem;
  font-weight: 500
}

.plan h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.01em
}

.plan .pv {
  display: block;
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -.02em
}

.plan .pu {
  font-size: .875rem;
  color: rgba(17, 17, 17, .5)
}

.plan .pdesc {
  font-size: .875rem;
  line-height: 1.65;
  color: rgba(17, 17, 17, .6)
}

.plan.feat .pu,
.plan.feat .pdesc {
  color: rgba(255, 255, 255, .6)
}

.plan .pill {
  align-self: flex-start
}

.plan-feats {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  font-size: .875rem
}

.plan.feat .plan-feats {
  border-color: rgba(255, 255, 255, .12)
}

.plan-feats li {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  color: rgba(17, 17, 17, .7)
}

.plan.feat .plan-feats li {
  color: rgba(255, 255, 255, .7)
}

.plan-feats .ic {
  margin-top: .15rem;
  font-size: .875rem;
  color: var(--accent);
  flex: none
}

.plan.feat .plan-feats .ic {
  color: var(--accent-from)
}

.plan-note {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  border-radius: 1.25rem;
  background: var(--surface);
  padding: 1.5rem;
  box-shadow: 0 0 0 1px var(--line)
}

.plan-note h3 {
  font-size: 1.125rem;
  font-weight: 600
}

.plan-note p {
  max-width: 60ch;
  font-size: .875rem;
  line-height: 1.65;
  color: rgba(17, 17, 17, .6)
}

@media (min-width:640px) {
  #planos .shell {
    padding-inline: 2rem
  }

  #planos h2 {
    font-size: 3rem
  }

  .plan-note {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem
  }
}

@media (min-width:1024px) {
  #planos .shell {
    padding-block: 7rem
  }

  .plans {
    grid-template-columns: repeat(3, 1fr)
  }
}

/* ---------- testimonials ---------- */
#depoimentos {
  background: var(--ink);
  overflow: hidden
}

#depoimentos .shell {
  padding: 5rem 1.25rem
}

.dep-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center
}

.dep-lede {
  max-width: 34ch;
  margin-top: 1.25rem;
  font-size: .9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .5)
}

#depoimentos .eyebrow {
  color: rgba(255, 255, 255, .7)
}

#depoimentos .eyebrow::before {
  background: rgba(255, 255, 255, .6)
}

#depoimentos h2 {
  margin: 1.25rem 0 0;
  max-width: 14ch;
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -.03em;
  color: #fff
}

/* Mural: duas colunas em rolagem contínua, uma sobe e a outra desce.
   Cada coluna repete o próprio conteúdo, e a animação anda exatamente
   metade da altura, o que faz o ponto de emenda cair sobre o clone. */
.mur {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  height: 26rem;
  max-width: 22rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent)
}

.mur__col {
  overflow: hidden
}

@media (max-width:639px) {
  .mur__col--desce {
    display: none
  }
}

.mur__track {
  animation: mur-sobe 46s linear infinite;
  will-change: transform
}

.mur__col--desce .mur__track {
  animation-name: mur-desce;
  animation-duration: 52s
}

@keyframes mur-sobe {
  from {
    transform: translateY(0)
  }

  to {
    transform: translateY(-50%)
  }
}

@keyframes mur-desce {
  from {
    transform: translateY(-50%)
  }

  to {
    transform: translateY(0)
  }
}

/* margem no lugar de gap: com gap as duas metades ficariam com alturas
   diferentes e a emenda apareceria a cada volta */
.mur__card {
  margin-bottom: .75rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .045);
  padding: 1.125rem 1.25rem;
}

.mur__card blockquote {
  font-size: .8125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .74)
}

.mur__card figcaption {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-top: .875rem
}

.mur__ini {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: linear-gradient(to bottom right, var(--warm-from), var(--warm-to));
  color: var(--ink);
  font-size: .625rem;
  font-weight: 700;
  flex: none
}

.mur__meta {
  display: flex;
  flex-direction: column;
  gap: .0625rem;
  min-width: 0
}

.mur__nome {
  font-size: .75rem;
  font-weight: 600;
  color: #fff
}

.mur__cargo {
  font-size: .6875rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .42)
}

/* pausa para leitura, sem deslocar nada */
@media (hover:hover) {
  .mur:hover .mur__track {
    animation-play-state: paused
  }
}

@media (min-width:640px) {
  #depoimentos .shell {
    padding-inline: 2rem
  }

  #depoimentos h2 {
    font-size: 3rem
  }

  .dep-wrap {
    gap: 3rem
  }

  .mur {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    height: 30rem;
    max-width: 34rem
  }

  .mur__card {
    margin-bottom: 1rem
  }
}

@media (min-width:1024px) {
  #depoimentos .shell {
    padding-block: 7rem
  }

  .dep-wrap {
    grid-template-columns: 1fr 1.05fr;
    gap: 5rem
  }

  #depoimentos h2 {
    font-size: 3.25rem
  }

  .mur {
    height: 34rem;
    max-width: 40rem;
    justify-self: end;
    width: 100%
  }
}

/* ---------- faq ---------- */
#faq {
  background: #fff
}

#faq .shell {
  padding: 5rem 1.25rem
}

#faq h2 {
  margin: 1.25rem 0 3rem;
  max-width: 18ch;
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -.02em
}

.faq {
  display: flex;
  flex-direction: column
}

.fq {
  border-top: 1px solid var(--line)
}

.faq li:last-child .fq {
  border-bottom: 1px solid var(--line)
}

.fq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  list-style: none;
  cursor: pointer;
  padding: 1.5rem .25rem
}

.fq summary::-webkit-details-marker {
  display: none
}

.fq summary h3 {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -.01em;
  transition: color .3s
}

.fqi {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: var(--surface);
  color: rgba(17, 17, 17, .6);
  flex: none;
  font-size: .75rem;
  transition: background .3s, color .3s
}

.fqi .ic {
  transform: rotate(45deg);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1)
}

.fq[open] .fqi {
  background: var(--accent);
  color: #fff
}

.fq[open] .fqi .ic {
  transform: rotate(0deg)
}

.fqa {
  padding: 0 3.5rem 1.75rem .25rem
}

.fqa p {
  max-width: 75ch;
  font-size: .875rem;
  line-height: 1.7;
  color: rgba(17, 17, 17, .6)
}

@media (hover:hover) {
  .fq summary:hover h3 {
    color: var(--accent)
  }
}

@media (min-width:640px) {
  #faq .shell {
    padding-inline: 2rem
  }

  #faq h2 {
    font-size: 3rem
  }

  .fq summary h3 {
    font-size: 1.25rem
  }
}

@media (min-width:1024px) {
  #faq .shell {
    padding-block: 7rem
  }
}

/* ---------- services lede ---------- */
#processo h2.has-lede,
#services h2.has-lede {
  margin-bottom: 1.25rem
}

.slede {
  max-width: 56ch;
  margin: 0 0 3rem;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(17, 17, 17, .6)
}

@media (min-width:640px) {

  #processo h2.has-lede,
  #services h2.has-lede {
    margin-bottom: 1.5rem
  }

  .slede {
    margin-bottom: 3.5rem
  }
}

/* ---------- hero lede ---------- */
.hlede {
  max-width: 44ch;
  font-size: 0.7rem;
  line-height: 1.4;
  color: rgba(17, 17, 17, .7)
}

@media (min-width:1024px) {
  .hlede {
    font-size: 1.125rem
  }
}

/* ---------- mobile action bar ---------- */
.mobar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  padding: .875rem 1.25rem;
  padding-bottom: calc(.875rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .35s ease
}

.mobar.show {
  transform: none;
  opacity: 1;
  pointer-events: auto
}

.mobar .pill {
  width: 100%
}

.mobar .pill>.ps {
  width: 100%;
  justify-content: center
}

@media (min-width:768px) {
  .mobar {
    display: none
  }
}

@media (max-width:767px) {
  footer .shell {
    padding-bottom: 7rem
  }
}

/* ---------- form validation ---------- */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden
}

.ferr {
  display: none;
  font-size: .75rem;
  line-height: 1.4;
  color: var(--danger)
}

.ferr.on {
  display: block
}

.fform.on {
  margin-top: .25rem
}

#reqform [aria-invalid="true"] {
  border-color: var(--danger)
}

#reqform .fcheck {
  flex-direction: row;
  align-items: flex-start;
  gap: .625rem;
  font-size: .75rem;
  line-height: 1.5;
  color: rgba(17, 17, 17, .6)
}

#reqform .fcheck input {
  width: auto;
  margin-top: .15rem;
  flex: none;
  accent-color: var(--accent)
}

#reqform .fcheck a {
  text-decoration: underline
}

#reqform button[disabled] {
  opacity: .6;
  pointer-events: none
}

/* ---------- legal ---------- */
.legal {
  background: #fff
}

.legal .shell {
  padding: 9rem 1.25rem 5rem
}

.legal h1 {
  margin: 1.25rem 0 1.5rem;
  max-width: 20ch;
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.02
}

.legal-meta {
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(17, 17, 17, .6)
}

.legal-body {
  max-width: 100ch;
  margin-top: 3.5rem
}

.legal-body h2 {
  margin: 3rem 0 1rem;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.01em
}

.legal-body h3 {
  margin: 1.75rem 0 .75rem;
  font-size: 1rem;
  font-weight: 600
}

.legal-body p,
.legal-body li {
  font-size: .9375rem;
  line-height: 1.7;
  color: rgba(17, 17, 17, .72)
}

.legal-body p {
  margin-bottom: 1rem
}

.legal-body ul {
  margin: 0 0 1.25rem;
  padding-left: 1.125rem;
  list-style: disc
}

.legal-body li {
  margin-bottom: .5rem
}

.legal-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .15em
}

.legal-body strong {
  color: #111;
  font-weight: 600
}

.legal-nota {
  border-left: 2px solid var(--warm-to);
  padding: .25rem 0 .25rem 1rem;
  font-size: .875rem !important;
  color: rgba(17, 17, 17, .5) !important
}

.legal-tabela {
  width: 100%;
  margin: 0 0 1.5rem;
  border-collapse: collapse;
  text-align: left
}

.legal-tabela th,
.legal-tabela td {
  border-bottom: 1px solid var(--line);
  padding: .75rem .75rem .75rem 0;
  font-size: .875rem;
  line-height: 1.55;
  vertical-align: top
}

.legal-tabela th {
  font-weight: 600;
  color: #111
}

.legal-tabela td {
  color: rgba(17, 17, 17, .72)
}

.legal-cta {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 2rem
}

.legal-cta p {
  margin: 0;
  font-weight: 500;
  color: #111
}

@media (min-width:640px) {
  .legal .shell {
    padding: 10rem 2rem 6rem
  }

  .legal h1 {
    font-size: 3rem
  }
}

@media (min-width:1024px) {
  .legal .shell {
    padding-bottom: 8rem
  }
}

/* ---------- páginas de solução ---------- */
.sx-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0 0 2rem 2rem;
  background: var(--ink);
  color: #fff
}

.sx-hero .shell {
  position: relative;
  z-index: 2;
  padding: 6rem 1.25rem 4rem
}

.sx-hero__glow {
  position: absolute;
  z-index: 0;
  top: -30%;
  right: -20%;
  width: 46rem;
  height: 46rem;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(255, 246, 0, .30), rgba(255, 134, 0, .20) 45%, transparent 70%);
  filter: blur(40px);
  pointer-events: none
}

.sx-hero__num {
  position: absolute;
  z-index: 1;
  right: 1rem;
  bottom: -2.5rem;
  font-size: 16rem;
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.04em;
  color: rgba(255, 255, 255, .05);
  pointer-events: none;
  user-select: none
}

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: 2.5rem;
  font-size: .75rem;
  color: rgba(255, 255, 255, .4)
}

.crumb a {
  color: rgba(255, 255, 255, .65);
  transition: color .3s
}

.crumb a:hover {
  color: #fff
}

.sx-hero h1 {
  margin: 1.5rem 0 1.75rem;
  max-width: 16ch;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em
}

.sx-lede {
  max-width: 54ch;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .6)
}

.sx-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 2rem 0 2.5rem
}

.sx-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem
}

.pill.ghost>.ps {
  border: 1px solid rgba(255, 255, 255, .22);
  background: transparent;
  color: #fff
}

@media (hover:hover) {
  .pill.ghost:hover>.ps {
    border-color: rgba(255, 255, 255, .5)
  }
}

/* ── seções ── */
.sx-sec .shell {
  padding: 4.5rem 1.25rem
}

.sx-sec--surface {
  background: var(--surface)
}

.sx-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 3rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line)
}

/* No FAQ o acordeão já abre com a própria borda no primeiro item: a linha do
   cabeçalho viraria uma segunda divisória a poucos rem da primeira. */
.shell--estreita .sx-head {
  margin-bottom: 2rem;
  padding-bottom: 0;
  border-bottom: none
}

.sx-head h2 {
  max-width: 18ch;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -.02em
}

.sx-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem
}

/* ── escopo: duas colunas de texto, sem caixa ── */
.sx-escopo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  list-style: none
}

.sx-escopo li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .75rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, .74)
}

.sx-escopo__dot {
  width: .5rem;
  height: .5rem;
  margin-top: .55rem;
  border-radius: 9999px;
  background: linear-gradient(to bottom right, var(--warm-from), var(--warm-to))
}

/* ── quando faz sentido ── */
.sx-quando__texto {
  margin-bottom: 1.25rem;
  font-size: .9375rem;
  line-height: 1.7;
  color: rgba(17, 17, 17, .74)
}

.sx-quando {
  align-self: start;
  border-radius: 1.5rem;
  background: var(--ink);
  color: #fff;
  padding: 1.75rem
}

.sx-quando__lbl {
  margin-bottom: 1.25rem;
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .45)
}

.sx-quando ul {
  display: flex;
  flex-direction: column
}

.sx-quando li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .75rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 1rem 0;
  font-size: .875rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .72)
}

.sx-quando li:first-child {
  border-top: none;
  padding-top: 0
}

.sx-quando li:last-child {
  padding-bottom: 0
}

.sx-quando__ic {
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  margin-top: .1rem;
  border-radius: 9999px;
  background: linear-gradient(to bottom right, var(--warm-from), var(--warm-to));
  color: var(--ink);
  font-size: .5rem;
  flex: none
}

/* ── processo ── */
.sx-passos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  counter-reset: passo
}

.sx-passo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  border-radius: 1.5rem;
  background: var(--surface);
  padding: 1.75rem;
  transition: background .4s ease
}

.sx-passo__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: .375rem;
  border-radius: 9999px;
  background: var(--ink);
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums
}

.sx-passo h3 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.01em
}

.sx-passo p {
  font-size: .875rem;
  line-height: 1.65;
  color: rgba(17, 17, 17, .6)
}

@media (hover:hover) {
  .sx-passo:hover {
    background: var(--surface-2)
  }
}

/* ── faixa final ── */
.sx-band {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  background: var(--ink);
  color: #fff;
  padding: 2.5rem 1.75rem
}

.sx-band__glow {
  position: absolute;
  left: -10%;
  bottom: -80%;
  width: 30rem;
  height: 30rem;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(0, 223, 240, .22), transparent 65%);
  filter: blur(30px);
  pointer-events: none
}

.sx-band__in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem
}

.sx-band h2 {
  max-width: 20ch;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -.02em
}

.sx-band p {
  max-width: 52ch;
  margin-top: .75rem;
  font-size: .9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .6)
}

.sx-band .sx-cta {
  flex-wrap: wrap
}

/* ── navegação entre soluções ── */
.sx-prox {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem
}

.sx-prox__card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-radius: 1.5rem;
  background: #fff;
  padding: 1.75rem;
  box-shadow: 0 0 0 1px var(--line);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease
}

.sx-prox__lbl {
  display: block;
  margin-bottom: .5rem;
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(17, 17, 17, .4)
}

.sx-prox__tit {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.01em
}

.sx-prox__ic {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: var(--surface);
  color: #111;
  flex: none;
  font-size: .875rem;
  transition: background .35s ease, color .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1)
}

@media (hover:hover) {
  .sx-prox__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px -22px rgba(12, 12, 12, .45), 0 0 0 1px rgba(32, 97, 247, .35)
  }

  .sx-prox__card:hover .sx-prox__ic {
    background: var(--accent);
    color: #fff;
    transform: translateX(3px)
  }
}

@media (min-width:640px) {

  .sx-hero .shell,
  .sx-sec .shell {
    padding-inline: 2rem
  }

  .sx-hero h1 {
    font-size: 3.5rem
  }

  .sx-hero__num {
    font-size: 22rem;
    right: 2rem
  }

  .sx-head h2 {
    font-size: 2.5rem
  }

  .sx-escopo {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2.5rem
  }

  .sx-band {
    padding: 3rem
  }

  .sx-band h2 {
    font-size: 2.25rem
  }

  .sx-prox {
    grid-template-columns: 1fr 1fr
  }
}

@media (min-width:1024px) {
  .sx-hero .shell {
    padding: 8rem 2rem 6rem
  }

  .sx-hero h1 {
    font-size: 4.5rem
  }

  .sx-sec .shell {
    padding-block: 6.5rem
  }

  .sx-split {
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem
  }

  .sx-passos {
    grid-template-columns: repeat(4, 1fr)
  }

  .sx-band__in {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3rem
  }
}

/* ---------- header sobre hero escuro ---------- */
.brand img.brand__on-dark {
  display: none
}

body.hero-escuro .header:not(.stuck) .brand img.brand__on-light {
  display: none
}

body.hero-escuro .header:not(.stuck) .brand img.brand__on-dark {
  display: block
}

body.hero-escuro .header:not(.stuck) .hnav button>span {
  color: #fff
}

body.hero-escuro .header:not(.stuck) .clock {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .72)
}

body.hero-escuro .header:not(.stuck) .clock .lbl {
  color: rgba(255, 255, 255, .45)
}

body.hero-escuro .header:not(.stuck) .clock .t {
  color: #fff
}

body.hero-escuro .header:not(.stuck) .clock .sep {
  color: rgba(255, 255, 255, .3)
}

body.hero-escuro .header:not(.stuck) .menubtn {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #fff
}

body.hero-escuro .header:not(.stuck) .menubtn:hover {
  background: rgba(255, 255, 255, .14)
}

/* ---------- transição entre páginas ---------- */
/* View Transitions entre documentos: o navegador mantém o quadro da página
   anterior enquanto a próxima pinta, o que elimina o flash branco.
   Onde não houver suporte, a navegação segue normal. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .32s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1)
}

/* O rodapé existe nas duas páginas, então permanece em vez de esmaecer junto
   com o conteúdo. O header NÃO recebe view-transition-name de propósito: a
   propriedade cria um backdrop root e anula o backdrop-filter da barra. */
footer {
  view-transition-name: rodape
}

::view-transition-group(rodape) {
  animation-duration: .3s
}

/* ---------- barra de rolagem própria ---------- */
/* A nativa fica com largura zero, então travar a rolagem no modal ou no loader
   deixa de encolher a viewport: o deslocamento da página some na origem.
   Como esta é um elemento comum, ela obedece z-index e fica sob os overlays. */
.sbar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 60;
  width: .875rem;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease
}

.sbar.on {
  opacity: 1
}

.sbar__thumb {
  position: absolute;
  top: 0;
  right: .3125rem;
  width: .25rem;
  border-radius: 9999px;
  background: rgba(140, 140, 140, .6);
  pointer-events: auto;
  cursor: grab;
  transition: width .2s ease, right .2s ease, background .2s ease
}

.sbar__thumb:hover,
.sbar.arrastando .sbar__thumb {
  width: .5rem;
  right: .1875rem;
  background: rgba(140, 140, 140, .85)
}

.sbar.arrastando .sbar__thumb {
  cursor: grabbing
}

/* em toque o sistema já mostra o próprio indicador; a barra fixa só ocuparia espaço */
@media (pointer: coarse) {
  .sbar {
    display: none
  }
}

/* ---------- submenu do header ---------- */
.hnav__drop {
  position: relative
}

/* o painel encosta no botão: qualquer folga faria o submenu fechar quando o
   ponteiro atravessasse o vão entre os dois */
.hnav__panel {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 5;
  min-width: 15rem;
  margin-top: .75rem;
  padding: .5rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 18px 40px -22px rgba(12, 12, 12, .45), 0 0 0 1px var(--line);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, .375rem);
  transition: opacity .28s ease, transform .28s cubic-bezier(.22, 1, .36, 1), visibility .28s
}

.hnav__panel::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 100%;
  height: .75rem
}

.hnav__drop:hover .hnav__panel,
.hnav__drop:focus-within .hnav__panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0)
}

.hnav__panel a {
  display: flex;
  flex-direction: column;
  gap: .1875rem;
  border-radius: .75rem;
  padding: .75rem .875rem;
  transition: background .25s ease
}

.hnav__panel a:hover {
  background: var(--surface)
}

.hnav__panel-t {
  font-size: .875rem;
  font-weight: 600;
  color: #111
}

.hnav__panel-d {
  font-size: .75rem;
  line-height: 1.4;
  color: rgba(17, 17, 17, .55)
}

/* ---------- tabela comparativa ---------- */
.comp {
  overflow-x: auto;
  border-radius: 1.5rem;
  box-shadow: 0 0 0 1px var(--line)
}

.comp table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  background: #fff;
  text-align: left
}

.comp th,
.comp td {
  border-bottom: 1px solid var(--line);
  padding: 1rem 1.25rem;
  font-size: .875rem;
  line-height: 1.5;
  vertical-align: top
}

.comp tbody tr:last-child th,
.comp tbody tr:last-child td {
  border-bottom: none
}

.comp thead th {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(17, 17, 17, .45)
}

.comp tbody th {
  font-weight: 500;
  color: rgba(17, 17, 17, .6)
}

.comp .comp__old {
  color: rgba(17, 17, 17, .5)
}

.comp .comp__new {
  font-weight: 500;
  color: #111;
  background: rgba(32, 97, 247, .04)
}

.comp thead .comp__new {
  color: var(--accent)
}

/* ---------- blocos de segurança ---------- */
.seg {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  list-style: none
}

.seg li {
  border-radius: 1.5rem;
  background: var(--ink);
  color: #fff;
  padding: 1.75rem
}

.seg h3 {
  margin-bottom: .625rem;
  font-size: 1.0625rem;
  font-weight: 600
}

.seg p {
  font-size: .875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .62)
}

.seg .seg__tags {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .375rem
}

.seg .seg__tags span {
  border-radius: 9999px;
  padding: .25rem .625rem;
  font-size: .6875rem;
  color: rgba(255, 255, 255, .6);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16)
}

@media (min-width:640px) {
  .seg {
    grid-template-columns: 1fr 1fr
  }
}

@media (min-width:1024px) {
  .seg {
    grid-template-columns: repeat(4, 1fr)
  }
}

/* ---------- seções da página de produto ---------- */
#comparativo {
  background: var(--surface)
}

#seguranca {
  background: #fff
}

#comparativo .shell,
#seguranca .shell {
  padding: 5rem 1.25rem
}

#comparativo h2,
#seguranca h2 {
  margin: 1.25rem 0 1.25rem;
  max-width: 16ch;
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -.02em
}

/* o hero desta página troca a foto de base por um degradê claro: o efeito de
   revelar continua, pintando a imagem por cima do degradê */
.pagina-produto #home {
  background-color: rgba(172, 205, 234, .12);
  background-image: linear-gradient(rgba(172, 205, 234, .5) 0%, rgba(172, 205, 234, .12) 100%)
}

.pagina-produto #lr-base {
  display: none
}

.pagina-produto .vignette {
  background: linear-gradient(to bottom, rgba(255, 255, 255, .25), transparent 40%, rgba(255, 255, 255, .3))
}

/* sobre fundo claro a marca d'água branca sumiria */
.pagina-produto .wm {
  color: rgba(17, 17, 17, .1)
}

@media (min-width:640px) {

  #comparativo .shell,
  #seguranca .shell {
    padding-inline: 2rem
  }

  #comparativo h2,
  #seguranca h2 {
    margin-bottom: 1.5rem;
    font-size: 3rem
  }
}

@media (min-width:1024px) {

  #comparativo .shell,
  #seguranca .shell {
    padding-block: 7rem
  }
}

/* ---------- comparativo ---------- */
.cmp__head {
  margin-bottom: 3rem;
  text-align: center
}

.cmp__head h2 {
  margin: 1rem auto .875rem;
  max-width: 20ch;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -.02em
}

.cmp__head p {
  max-width: 46ch;
  margin-inline: auto;
  font-size: .9375rem;
  line-height: 1.6;
  color: rgba(17, 17, 17, .55)
}

.cmp {
  overflow-x: auto;
  border-radius: 2rem;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line)
}

.cmp table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse
}

.cmp th,
.cmp td {
  border-bottom: 1px solid var(--line);
  padding: 1.125rem 1rem;
  vertical-align: middle
}

.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td {
  border-bottom: none
}

.cmp thead th {
  padding-block: 1.5rem;
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(17, 17, 17, .45);
  text-align: center
}

.cmp thead th:first-child {
  text-align: left
}

.cmp tbody th {
  padding-left: 1.75rem;
  font-size: .9375rem;
  font-weight: 500;
  color: #111;
  text-align: left
}

.cmp td {
  font-size: .875rem;
  color: rgba(17, 17, 17, .58);
  text-align: center
}

.cmp__sim {
  display: inline-block;
  width: .625rem;
  height: .625rem;
  border-radius: 9999px;
  background: var(--accent)
}

.cmp__nao {
  display: inline-block;
  font-size: .875rem;
  color: rgba(17, 17, 17, .22)
}

/* coluna da abordagem que a Uniium entrega */
.cmp .cmp__col {
  background: rgba(32, 97, 247, .045);
  color: #111;
  font-weight: 500
}

.cmp thead .cmp__col {
  color: var(--accent)
}

@media (min-width:640px) {
  .cmp__head h2 {
    font-size: 2.75rem
  }

  .cmp th,
  .cmp td {
    padding: 1.25rem
  }

  .cmp tbody th {
    padding-left: 2rem
  }
}

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

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important
  }

  * {
    animation: none !important;
    transition: none !important
  }
}