/* ============================================================
   RBBT — LAYOUT E COMPONENTES
   ------------------------------------------------------------
   Este arquivo NÃO tem valores fixos de cor, fonte ou espaço.
   Tudo vem de styles/tokens.css. Para mudar a aparência,
   edite lá — não aqui.

   Sumário
   01 · Reset e base
   02 · Atmosfera de fundo (o que faz o vidro virar vidro)
   03 · Utilitários de layout
   04 · Tipografia compartilhada
   05 · Superfície de vidro (mixin base)
   06 · Botões e badges
   07 · Navegação
   08 · Hero
   09 · Seções e cards
   10 · Blocos divididos (texto + mídia)
   11 · Prova social
   12 · Integrações e painel de cross-sell
   13 · CTA
   14 · Rodapé
   15 · Animação
   16 · Responsivo
   ============================================================ */


/* ══════════ 01 · RESET E BASE ══════════ */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + var(--space-32));
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  font-feature-settings: 'calt', 'kern', 'liga';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, figure { display: block; max-width: 100%; }
img { height: auto; }

ul { list-style: none; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-smooth);
}

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

::selection {
  background: var(--brand-accent);
  color: var(--color-void-black);
}

.skip-link {
  position: absolute;
  left: var(--space-16);
  top: -100px;
  z-index: 100;
  padding: var(--space-8) var(--space-16);
  background: var(--brand-action);
  color: var(--text-inverse);
  border-radius: var(--radius-control);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  transition: top var(--motion-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-16); }


/* ══════════ 02 · ATMOSFERA DE FUNDO ══════════

   Vidro só lê como vidro se houver algo atrás para borrar. Estas
   manchas de cor fixas, muito diluídas, dão ao backdrop-filter
   material para trabalhar — sem elas, translucidez sobre preto
   chapado é indistinguível de um fundo opaco.
   Para desligar: comente o bloco inteiro.                     */

body::before {
  content: '';
  position: fixed;
  inset: -10%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(42% 38% at 12% 12%,
      color-mix(in srgb, var(--brand-accent) 13%, transparent) 0%, transparent 70%),
    radial-gradient(46% 42% at 88% 42%,
      color-mix(in srgb, var(--hero-glow-cool) 22%, transparent) 0%, transparent 70%),
    radial-gradient(52% 40% at 40% 88%,
      color-mix(in srgb, var(--brand-accent) 9%, transparent) 0%, transparent 70%);
  filter: blur(30px);
  opacity: 0.6;
  animation: ambient-drift 34s ease-in-out infinite alternate;
}


/* ══════════ 03 · UTILITÁRIOS DE LAYOUT ══════════ */

.shell {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.section {
  position: relative;
  padding-block: var(--section-gap);
}

/* Divisor hairline que desvanece nas pontas */
.section::before,
.cta::before,
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: min(100% - var(--page-gutter) * 2, var(--page-max-width));
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--glass-border) 22%, var(--glass-border) 78%, transparent);
}

.grid { display: grid; gap: var(--space-16); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.text-center { text-align: center; }
.mt-32 { margin-top: var(--space-32); }


/* ══════════ 04 · TIPOGRAFIA COMPARTILHADA ══════════ */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-24);
}

.section__title {
  font-family: var(--font-display);
  font-size: var(--type-section);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display-sm);
  color: var(--text-primary);
  max-width: 22ch;
  text-wrap: balance;
}

/* Variante em negrito — --font-display só tem 300/400/800, então "negrito"
   aqui é o Ultrabold (800), não um 600/700 sintético. Modificador, não
   mudança no .section__title base: os outros títulos de seção (Sales,
   Social, Clientes, e os do sales.html) continuam no Light padrão. */
.section__title--strong { font-weight: var(--weight-ultrabold); }

/* Nome da solução em destaque — o ícone específico abre o lockup e deixa
   Sales/Social reconhecíveis antes do wordmark. Fica antes da tagline
   genérica: o nome do produto lidera a seção, não uma frase descritiva. */
.product-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-16);
  margin-bottom: var(--space-16);
}

.product-name__mark {
  width: 18px;
  height: 18px;
  background: var(--brand-accent);
  border-radius: 4px;
  transform: rotate(45deg);
  flex: none;
}

.product-name__text {
  font-family: var(--font-display);
  font-size: var(--type-section);
  font-weight: var(--weight-ultrabold);
  letter-spacing: var(--tracking-display-sm);
  color: var(--text-primary);
  line-height: 1;
}

/* Símbolo do produto — entra livre, sem contêiner, para ler como parte do
   nome em vez de um botão. Selecionado como
   .product-name .product-name__icon pelo mesmo motivo do .card__icon: a
   folha do Google Fonts também define .material-symbols-rounded, e esta
   regra precisa ganhar por especificidade, não por ordem de <link>. */
.product-name .product-name__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--brand-accent);
  /* O glifo tem caixa própria menor que o título; +1px corrige o
     alinhamento óptico do desenho com a linha de base do wordmark. */
  font-size: 28px;
  line-height: 1;
  transform: translateY(1px);
}

/* A marca RBBT permanece azul; cada oferta troca apenas o token de acento
   dentro do próprio contexto. Assim Sales/Social não contaminam a navegação
   ou outras seções da home, enquanto a página de Sales inteira assume verde. */
.page--sales,
.product--sales { --brand-accent: var(--brand-sales); }
.product--social { --brand-accent: var(--brand-social); }

/* Sales troca a atmosfera inteira, não só os acentos de interface: tanto
   os feixes CSS quanto o shader WebGL leem esses mesmos tokens em runtime. */
.page--sales {
  --hero-glow-cool: var(--hero-sales-mid);
  --hero-glow-deep: var(--hero-sales-deep);
  --hero-beam-near: var(--hero-sales-near);
  --hero-beam-mid: var(--hero-sales-mid);
  --hero-beam-far: var(--hero-sales-far);
  --hero-beam-halo: var(--hero-sales-halo);
  /* 1 ativa a única variação geométrica do shader: os planos em fuga.
     A cor continua vindo exclusivamente dos quatro tokens Sales acima. */
  --hero-blinds-geometry: 1;
}

.product-tagline {
  font-family: var(--font-display);
  font-size: var(--type-card);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-display-sm);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
  max-width: 40ch;
}

.section__lede {
  margin-top: var(--space-24);
  font-size: var(--type-lede);
  color: var(--text-secondary);
  max-width: 58ch;
}

.section__head { margin-bottom: var(--space-64); }

.section__head--center {
  text-align: center;
  display: grid;
  justify-items: center;
}
.section__head--center .section__title { max-width: 24ch; }

.col-label {
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: var(--space-24);
}

/* Variante "moldura": duas réguas saem do rótulo até as bordas da
   grade e viram para baixo nas pontas, abraçando os cards da seção.
   Como .col-label e .grid são irmãos dentro do mesmo .shell, o flex:1
   das réguas para exatamente na largura da grade — não há nenhuma
   medida para manter sincronizada à mão se a grade mudar.
   A versão mais opaca de --glass-border mantém a moldura estática, porém
   legível o bastante para ancorar os cards. */
.col-label--rule {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  font-weight: var(--weight-bold);
}

/* O selo dá peso ao ponto de virada da narrativa sem competir com os cards:
   as réguas seguem conectando a mensagem à grade, enquanto o texto ganha uma
   superfície própria, 10% maior que o rótulo técnico padrão. */
.col-label--rule > span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--space-16);
  border: 1px solid var(--glass-border-hover);
  border-radius: var(--radius-badge);
  background: color-mix(in srgb, var(--brand-accent) 10%, var(--glass-fill));
  box-shadow: var(--highlight-top);
  font-size: calc(var(--text-micro) * 1.1);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.col-label--rule::before,
.col-label--rule::after {
  content: '';
  flex: 1;
  height: 12px;                 /* profundidade do gancho nas pontas */
  /* A régua tem o dobro da espessura original e fica estática. */
  border-top: 2px solid var(--glass-border-hover);
  /* Com align-items:center, a caixa de 12px fica centrada e a borda de
     cima nasce 6px ACIMA do meio do texto. Este empurrão de 6px devolve
     a régua ao centro e deixa os ganchos descendo rumo aos cards. */
  translate: 0 6px;
}

.col-label--rule::before {
  border-left: 2px solid var(--glass-border-hover);
}
.col-label--rule::after {
  border-right: 2px solid var(--glass-border-hover);
}

.footnote {
  margin-top: var(--space-40);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.017em;
  color: var(--text-muted);
}

.footnote--center { text-align: center; }

.meta-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--weight-regular);
  letter-spacing: 0.017em;
  color: var(--text-muted);
}
.meta-strip__sep { color: var(--color-slate); }


/* ══════════ 05 · SUPERFÍCIE DE VIDRO ══════════

   A receita, na ordem que importa: fill translúcido + blur +
   borda cinza-quente + brilho branco de meio pixel no topo.   */

.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
}


/* ══════════ 06 · BOTÕES E BADGES ══════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 36px;
  padding: 10px var(--space-16);
  border-radius: var(--radius-control);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: 0.2px;
  white-space: nowrap;
  cursor: pointer;
  /* Tudo na mesma duração — transform, sombra e cor chegam juntos.
     Durações diferentes por propriedade é a causa mais comum de hover
     "picotado": uma parte do botão termina de mexer antes da outra. */
  transition:
    transform var(--motion-fast) var(--ease-spring),
    box-shadow var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-smooth),
    border-color var(--motion-fast) var(--ease-smooth),
    color var(--motion-fast) var(--ease-smooth);
}

/* :active sobrescreve só duração/curva — herda as mesmas propriedades do
   .btn, mas o clique precisa parecer imediato, sem o spring do hover. */
.btn:active {
  transition-duration: var(--motion-press);
  transition-timing-function: var(--ease-out);
}

.btn--filled {
  background: var(--brand-action);
  color: var(--text-inverse);
  box-shadow: var(--shadow-action);
}
.btn--filled:hover {
  background: var(--color-pure-white);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.5), var(--shadow-action);
}
.btn--filled:active { transform: translateY(0) scale(0.985); }

/* Botão fantasma agora é vidro, como no site original */
.btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(var(--blur-soft));
  backdrop-filter: blur(var(--blur-soft));
  color: var(--text-secondary);
  border: 1px solid var(--glass-border);
  box-shadow: var(--highlight-top);
}
.btn--ghost:hover {
  color: var(--text-primary);
  border-color: var(--glass-border-hover);
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-2px);
}
.btn--ghost:active { transform: translateY(0) scale(0.985); }

.btn--lg {
  min-height: 44px;
  padding: 14px var(--space-24);
  font-size: var(--text-label-lg);
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.badge {
  padding: 6px 12px;
  border-radius: var(--radius-badge);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(var(--blur-soft));
  backdrop-filter: blur(var(--blur-soft));
  border: 1px solid var(--glass-border);
  box-shadow: var(--highlight-top);
  color: var(--text-primary);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  transition:
    background-color var(--motion-fast) var(--ease-smooth),
    transform var(--motion-fast) var(--ease-spring);
}
.badge:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

/* Logos de plataformas substituem as pills quando a integração faz parte da
   proposta do produto. O filtro unifica marcas de origem diversa em branco
   sobre fundo escuro, sem alterar os arquivos de origem. */
.integration-logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-32);
}

.integration-logos img {
  display: block;
  width: auto;
  height: 34px;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.74;
  transition:
    opacity var(--motion-fast) var(--ease-smooth),
    transform var(--motion-fast) var(--ease-spring);
}

.integration-logos .integration-logos__nuvemshop { height: 30px; }
.integration-logos img:hover { opacity: 1; transform: translateY(-1px); }

/* A marca em preparação continua ocupando a mesma linha das demais. O aviso
   fica fora do fluxo para comunicar disponibilidade futura sem deslocar a
   composição das integrações. */
.integration-logo--coming-soon {
  position: relative;
  display: flex;
}

.integration-logo--coming-soon span {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-nano);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-mono);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* A versão em alta resolução da Wake já traz transparência real. Assim a
   marca mantém bordas limpas no mobile, sem um filtro SVG intermediário. */
.integration-logos .integration-logos__wake,
.integration-logos .integration-logos__wake:last-child {
  height: 49px;
  filter: grayscale(1) invert(1);
}
.integration-logos--sales .integration-logos__wake { margin-left: calc(var(--space-16) * -1); }

/* Selo de status — "RBBT Sales · Em produção". Ponto pulsante +
   texto em duas partes (produto / estado), separadas por um "·". */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 6px 14px 6px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(var(--blur-soft));
  backdrop-filter: blur(var(--blur-soft));
  border: 1px solid var(--glass-border);
  box-shadow: var(--highlight-top);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

.status-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status-live);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-live) 60%, transparent);
  animation: status-pulse 2.2s ease-out infinite;
  flex: none;
}

.status-badge strong {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}


/* ══════════ 07 · NAVEGAÇÃO ══════════ */

.nav-shell {
  position: fixed;
  inset: var(--space-16) 0 auto;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding-inline: var(--page-gutter);
  pointer-events: none;
}

.nav {
  position: relative;
  pointer-events: auto;
  width: 100%;
  max-width: var(--page-max-width);
  min-height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16);
  border-radius: var(--radius-nav);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--blur-nav)) saturate(140%);
  backdrop-filter: blur(var(--blur-nav)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  animation: nav-slide-in var(--motion-nav) var(--ease-out) both;
  /* As três propriedades do encolhimento no scroll compartilham duração
     e curva — é isso que faz a barra ler como UM gesto (encolhe + escurece
     + fecha a borda ao mesmo tempo) em vez de três mudanças destimidas. */
  transition:
    max-width var(--motion-nav) var(--ease-out),
    background-color var(--motion-nav) var(--ease-out),
    border-color var(--motion-nav) var(--ease-out);
}

/* Ao rolar, a barra encolhe e adensa — o gesto do site original */
.nav-shell.is-scrolled .nav {
  max-width: calc(var(--page-max-width) - 120px);
  background: var(--glass-fill-hover);
  border-color: var(--glass-border-hover);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* O PNG da marca tem fundo preto; screen preserva só o coelho branco sobre
   qualquer superfície escura do site. Maiúsculas ocupam a parte alta da
   line-box, então o símbolo sobe 2px para alinhar os desenhos visíveis. */
.nav__logo-symbol {
  width: 30px;
  height: 30px;
  flex: none;
  object-fit: contain;
  mix-blend-mode: screen;
  transform: translateY(-2px);
}

.nav__wordmark {
  font-family: var(--font-display);
  /* +20% sobre o tamanho anterior (+10% sobre --text-body) — pedido
     específico para o texto do header,
     por isso em calc() aqui e não no token (que é usado em corpo de texto
     em outras seções). */
  font-size: calc(var(--text-body) * 1.32);
  font-weight: var(--weight-ultrabold);
  letter-spacing: var(--tracking-display-sm);
  color: var(--text-primary);
}

.nav__brand img { height: 22px; width: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav__links a {
  position: relative;
  display: inline-block;
  padding: 6px 10px;
  border-radius: var(--rounding-normal);
  font-family: var(--font-display);
  /* +10% sobre --text-label, só aqui — o mesmo token alimenta botões e
     badges no resto do site, que não devem crescer junto. */
  font-size: calc(var(--text-label) * 1.1);
  font-weight: var(--weight-ultrabold);
  letter-spacing: var(--tracking-display-sm);
  color: var(--text-secondary);
  transition:
    color var(--motion-fast) var(--ease-smooth),
    background-color var(--motion-fast) var(--ease-smooth),
    transform var(--motion-fast) var(--ease-out);
}
.nav__links a:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

/* Produtos e Cases usam a mesma mecânica visual. Cada submenu abre por
   intenção explícita, preservando os destinos como links reais. */
.nav__dropdown { position: relative; }

.nav__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--rounding-normal);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: calc(var(--text-label) * 1.1);
  font-weight: var(--weight-ultrabold);
  letter-spacing: var(--tracking-display-sm);
  transition:
    color var(--motion-fast) var(--ease-smooth),
    background-color var(--motion-fast) var(--ease-smooth),
    transform var(--motion-fast) var(--ease-out);
}

.nav__dropdown-toggle:hover,
.nav__dropdown.is-dropdown-open .nav__dropdown-toggle { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
.nav__dropdown-toggle span { font-size: 17px; transition: transform var(--motion-fast) var(--ease-smooth); }
.nav__dropdown.is-dropdown-open .nav__dropdown-toggle span { transform: rotate(180deg); }

.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-8));
  left: 0;
  z-index: 2;
  display: grid;
  min-width: 164px;
  padding: var(--space-8);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-nav);
  background: color-mix(in srgb, var(--surface-recessed) 82%, var(--glass-fill-hover));
  -webkit-backdrop-filter: blur(var(--blur-nav)) saturate(120%);
  backdrop-filter: blur(var(--blur-nav)) saturate(120%);
  box-shadow: var(--shadow-glass);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    opacity var(--motion-fast) var(--ease-smooth),
    transform var(--motion-fast) var(--ease-out);
}

.nav__dropdown.is-dropdown-open .nav__dropdown-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav__dropdown-menu a { display: block; padding: var(--space-16); white-space: nowrap; }

/* No desktop a navegação fica exposta. No celular o mesmo conjunto de links
   vira um painel compacto, acionado pelo botão — sem duplicar destinos. */
.nav__menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  flex: none;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-inset);
  border-radius: var(--rounding-normal);
  background: var(--surface-recessed);
  color: var(--text-primary);
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--ease-smooth),
    background-color var(--motion-fast) var(--ease-smooth),
    transform var(--motion-fast) var(--ease-out);
}

.nav__menu-toggle:hover {
  border-color: var(--glass-border-hover);
  background: var(--surface-badge);
  transform: translateY(-1px);
}

.nav__menu-toggle:active { transform: translateY(0) scale(.96); }

.nav__menu-icon {
  font-size: 24px;
  line-height: 1;
  font-variation-settings: 'wght' 500;
}

/* Todo texto do header em bold — o botão fica em Montserrat (não
   --font-display), então usa o Bold real da família (700), não os
   pesos da PP Neue Machina. Escopado só à nav para não engordar o
   mesmo botão "Falar com agente" repetido lá embaixo no CTA final. */
/* Vidro escuro, não o branco cheio de .btn--filled — o mesmo material
   do resto do site (nav, cards): --glass-fill + --glass-border. Como é
   uma peça pequena (e já vive em cima do blur da própria nav), usa o par
   blur-soft/highlight-top — o mesmo combo do botão fantasma e dos badges —
   em vez de blur-glass/shadow-glass, reservado às superfícies grandes. */
.nav__cta {
  font-weight: var(--weight-bold);
  /* +10% sobre --text-label, como o resto do texto do header. */
  font-size: calc(var(--text-label) * 1.1);
  background: var(--glass-fill);
  color: var(--text-primary);
  border: 1px solid var(--glass-border);
  box-shadow: var(--highlight-top);
  -webkit-backdrop-filter: blur(var(--blur-soft));
  backdrop-filter: blur(var(--blur-soft));
}
.nav__cta:hover {
  background: var(--glass-fill-hover);
  border-color: var(--glass-border-hover);
  color: var(--color-pure-white);
  transform: translateY(-2px);
  box-shadow: var(--highlight-top);
}
.nav__cta:active { transform: translateY(0) scale(0.985); }


/* ══════════ 08 · HERO ══════════ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--nav-height) + var(--space-96)) var(--space-96);
  overflow: hidden;
  isolation: isolate;
}

/* A atmosfera é a única dona das coordenadas do cursor no hero:
   --pointer-dx / --pointer-dy vêm do js/main.js, variam de -1 a 1 e
   voltam a 0 quando o mouse sai. Como custom properties herdam, cada
   feixe lá embaixo só multiplica esses dois números pela sua própria
   profundidade — nenhum deles precisa saber onde o mouse está. */
.hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --pointer-dx: 0;
  --pointer-dy: 0;
}

.hero__wash {
  position: absolute;
  inset: -20% -10% auto;
  height: 120%;
  background:
    radial-gradient(62% 58% at 50% 24%,
      color-mix(in srgb, var(--hero-beam-mid) 58%, transparent) 0%,
      color-mix(in srgb, var(--hero-beam-halo) 48%, transparent) 40%,
      color-mix(in srgb, var(--hero-glow-deep) 26%, transparent) 66%,
      transparent 100%);
  opacity: 0.34;
  animation: wash-breathe 18s ease-in-out infinite alternate;
  transition: opacity var(--motion-slow) var(--ease-smooth);
}

/* ── Feixes diagonais ──────────────────────────────────────────
   Cada feixe usa DUAS propriedades de transformação diferentes, e
   isso é proposital: `translate` carrega o parallax do cursor e
   `transform` carrega a deriva em loop. Se as duas dividissem
   `transform`, a animação sobrescreveria o mouse a cada frame.

   Ordem de aplicação do CSS: translate → rotate → transform. Então
   o parallax acontece em coordenadas de tela (o feixe acompanha o
   cursor de verdade) e a deriva acontece já no eixo do feixe — X
   desliza ao longo dele, Y o afasta de lado, mantendo o paralelismo.

   A largura sai da diagonal da tela (120vw + 120vh) para o feixe
   atravessar a viewport inteira em qualquer proporção; as margens
   negativas são metade disso, para o ponto de ancoragem 50%/50%
   cair no centro do feixe.                                       */
.hero__bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(120vw + 120vh);
  margin-left: calc(-60vw - 60vh);
  border-radius: var(--radius-pill);
  rotate: -52deg;
  translate:
    calc(var(--pointer-dx) * var(--hero-parallax) * var(--beam-depth, 1))
    calc(var(--pointer-dy) * var(--hero-parallax) * var(--beam-depth, 1));
  will-change: transform, translate;
  /* O translate NÃO tem transition de propósito. Quem suaviza a
     perseguição do cursor é o lerp em requestAnimationFrame no
     js/main.js: um transition aqui seria reiniciado a cada mousemove
     (movimento aos trancos) e, pior, não volta sozinho ao zero quando
     dx/dy zeram no mouseleave — a transição não re-dispara quando a
     mudança vem de uma custom property. */
  transition: opacity var(--motion-slow) var(--ease-smooth);
}

/* Regra de ouro destes quatro: o blur nunca passa de ~⅓ da altura.
   Acima disso o feixe deixa de ser uma faixa e vira uma mancha —
   foi o que aconteceu na primeira versão. Se aumentar o blur,
   aumente a altura junto. */
.hero__bar--a {
  height: 190px;
  margin-top: -95px;
  background: var(--hero-beam-near);
  filter: blur(52px);
  opacity: 0.78;
  --beam-depth: 1;
  animation: beam-drift-a 26s ease-in-out infinite alternate;
}

.hero__bar--b {
  height: 130px;
  margin-top: -65px;
  background: var(--hero-beam-mid);
  filter: blur(40px);
  opacity: 0.62;
  --beam-depth: 0.68;
  animation: beam-drift-b 22s ease-in-out infinite alternate;
}

.hero__bar--c {
  height: 92px;
  margin-top: -46px;
  background: var(--hero-beam-far);
  filter: blur(32px);
  opacity: 0.48;
  --beam-depth: 0.42;
  animation: beam-drift-c 31s ease-in-out infinite alternate;
}

/* O halo: largo, quase sem forma, atrás de tudo. É ele que dá o
   contorno azul-escuro em volta dos feixes claros. */
.hero__bar--d {
  height: 340px;
  margin-top: -170px;
  background: var(--hero-beam-halo);
  filter: blur(96px);
  opacity: 0.6;
  --beam-depth: 0.22;
  animation: beam-drift-d 37s ease-in-out infinite alternate;
}

/* Fica junto dos quatro feixes, e não lá na seção 16, porque altura e
   blur se ajustam em par: separar as duas metades faria qualquer
   afinação futura ter que caçar o outro pedaço. As espessuras acima
   são absolutas em px — numa tela estreita elas ocupam quase toda a
   viewport e as faixas voltam a virar mancha. Aqui a escala inteira
   desce junto, mantendo a proporção blur ≈ ⅓ da altura. */
@media (max-width: 700px) {
  .hero__bar--a { height: 120px; margin-top: -60px;  filter: blur(34px); }
  .hero__bar--b { height: 84px;  margin-top: -42px;  filter: blur(26px); }
  .hero__bar--c { height: 58px;  margin-top: -29px;  filter: blur(20px); }
  .hero__bar--d { height: 210px; margin-top: -105px; filter: blur(62px); }
}

/* Aura que segue o cursor. Fica em 0 até o mouse entrar no hero —
   as coordenadas em % vêm do js/main.js, iguais às dos cards. */
.hero__aura {
  position: absolute;
  left: var(--pointer-x, 50%);
  top: var(--pointer-y, 50%);
  width: 46vw;
  height: 46vw;
  max-width: 720px;
  max-height: 720px;
  margin: 0;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--hero-beam-far) 34%, transparent) 0%,
    color-mix(in srgb, var(--hero-beam-near) 16%, transparent) 45%,
    transparent 100%);
  filter: blur(40px);
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease-smooth);
}

/* Canvas do Gradient Blinds. Nasce invisível e só aparece quando o
   shader confirma o primeiro frame (a classe .is-live vem do JS) — sem
   isso, um canvas ainda não pintado piscaria preto sobre o hero.

   Sem mix-blend-mode e em opacity 1 quando aceso: o shader escreve
   alpha 1.0 em cada pixel, então o canvas opaco cobre tudo que está
   embaixo — inclusive o body::before, o brilho coral/azul fixo da
   página inteira, que em qualquer opacidade menor vazava nos cantos
   e sujava as lâminas. Para escurecer as lâminas, use o véu de
   leitura (.hero__grain) ou os parâmetros do shader; baixar ESTA
   opacidade traz o vazamento de volta. */
.hero__blinds {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--motion-slow) var(--ease-smooth);
}

.hero__blinds.is-live { opacity: 1; }

/* Com as lâminas no ar, a atmosfera de CSS vira peso morto: está
   coberta pelo canvas opaco, mas continuaria animando fora de vista.
   A classe .has-blinds vem do JS, junto com o primeiro frame. */
.hero.has-blinds .hero__wash,
.hero.has-blinds .hero__bar,
.hero.has-blinds .hero__aura {
  opacity: 0;
  animation: none;
}

/* Véu de leitura. Escurece o miolo o suficiente para o título branco
   ficar legível por cima dos feixes, e funde o hero no fundo da página
   lá embaixo. Subir o 0.44 protege o texto; descer deixa a cor mais
   viva — é aqui que se negocia legibilidade contra saturação. */
.hero__grain {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(66% 52% at 50% 46%, rgba(4, 5, 6, 0.5) 0%, rgba(4, 5, 6, 0.26) 62%, transparent 100%),
    linear-gradient(to bottom, transparent 55%, var(--surface-canvas) 100%);
}

/* ── Resposta ao mouse ─────────────────────────────────────────
   Só em ponteiro fino: no touch não existe hover, e deixar isso
   valendo faria o estado "aceso" grudar depois do primeiro toque.
   O parallax em si já é inerte sem JS — dx/dy ficam em 0.

   O :not(.has-blinds) não é truque de especificidade: acender os
   feixes no hover é a resposta ao mouse DA versão em CSS. Quando as
   lâminas assumem, quem responde ao cursor é o holofote do shader. */
@media (hover: hover) and (pointer: fine) {
  .hero:not(.has-blinds):hover .hero__aura { opacity: 1; }
  .hero:not(.has-blinds):hover .hero__wash { opacity: 0.46; }
  .hero:not(.has-blinds):hover .hero__bar--a { opacity: 0.92; }
  .hero:not(.has-blinds):hover .hero__bar--b { opacity: 0.76; }
  .hero:not(.has-blinds):hover .hero__bar--c { opacity: 0.62; }
}

.hero__inner {
  display: grid;
  justify-items: center;
  text-align: center;
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--type-hero);
  /* --font-display só tem 300/400/800 — 800 (Ultrabold) é o "bold" disponível. */
  font-weight: var(--weight-ultrabold);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  max-width: 20ch;
  text-wrap: balance;
}

.hero__lede {
  margin-top: var(--space-24);
  font-size: var(--type-lede);
  /* Montserrat tem peso 500 real: dá mais presença ao subtítulo sem competir
     com a headline em PP Neue Machina Ultrabold. */
  font-weight: var(--weight-medium);
  /* Branco com 82% de opacidade: destaca a lede sobre a atmosfera do hero,
     mantendo uma hierarquia clara abaixo da headline. */
  color: var(--text-primary);
  opacity: 0.82;
  max-width: 48ch;
}

/* Usado só em heros de página interna (ex.: sales.html) — o hero
   da home não tem CTA própria, os botões já existem no resto da página. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-40);
}

.hero__media {
  margin-top: var(--space-64);
  width: 100%;
  max-width: 900px;
  border-radius: var(--radius-panel);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
}
.hero__media[hidden] { display: none; }

/* Indicador de scroll — seta para baixo fixa no rodapé do hero, com um
   quique + pulso de opacidade em loop, sinalizando que a página continua
   abaixo da dobra. É o truque clássico de "chevron": um quadrado com só
   duas bordas visíveis (direita + baixo), rotacionado 45° até virar um
   canto apontando para baixo — sem SVG, sem ícone novo na fonte.
   Fica fora de .hero__inner porque não segue o fluxo do conteúdo: é
   sempre o último elemento visível do hero, ancorado embaixo mesmo com
   hero__actions/hero__media presentes.

   O transform: rotate(45deg) na base (fora do @keyframes) é o que garante
   a seta certa mesmo com prefers-reduced-motion — a media query global
   (seção 15) força animation-iteration-count:1, e ao terminar a única
   volta sem animation-fill-mode o elemento volta pro transform daqui. */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-32);
  width: 12px;
  height: 12px;
  margin-left: -6px;
  /* 20% mais grossa que o traço original (1px). */
  border-right: calc(1px * 1.2) solid var(--text-secondary);
  border-bottom: calc(1px * 1.2) solid var(--text-secondary);
  transform: rotate(45deg);
  pointer-events: none;
  animation: scroll-cue 1.8s var(--ease-smooth) infinite;
}


/* ══════════ 09 · SEÇÕES E CARDS ══════════ */

.card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-32) var(--space-24) var(--space-40);
  border-radius: var(--radius-card);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  /* Uma curva só (--ease-out) pras quatro propriedades — o card sobe,
     clareia e ganha sombra como um movimento único, não em etapas. */
  transition:
    transform var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out),
    background-color var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out);
}

/* Foco que segue o cursor — as coordenadas vêm do js/main.js */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    240px circle at var(--pointer-x, 50%) var(--pointer-y, 0%),
    rgba(255, 255, 255, 0.09) 0%,
    transparent 70%);
  transition: opacity var(--motion-base) var(--ease-out);
}

.card:hover {
  transform: translateY(-4px);
  background: var(--glass-fill-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-glass-hover);
}
.card:hover::after { opacity: 1; }

.card__index {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-mono);
  color: var(--text-muted);
  margin-bottom: var(--space-24);
}

/* Cabeçalho do card: ícone à esquerda, número à direita. O espaçamento
   pertence ao conjunto, para que home e Sales mantenham a mesma leitura. */
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-24);
}
.card__head .card__index { margin-bottom: 0; }

/* "Circular Icon Container" do DESIGN.md: 20px de respiro em volta de
   um glifo de 24px (= 64px de diâmetro), fundo escuro rebaixado.

   Seletor com dois níveis de propósito: a folha do Google Fonts também
   define .material-symbols-rounded (com display:inline-block e outros),
   e o mesmo elemento carrega as duas classes. Com .card na frente esta
   regra ganha por especificidade, e não por ordem de carregamento —
   assim reordenar os <link> no <head> não quebra o desenho. */
.card .card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--surface-recessed);
  border: 1px solid var(--border-inset);
  color: var(--color-mist);
  font-size: 24px;
  transition:
    color var(--motion-base) var(--ease-smooth),
    border-color var(--motion-base) var(--ease-out),
    background-color var(--motion-base) var(--ease-out);
}

.card:hover .card__icon {
  color: var(--text-primary);
  background: var(--surface-badge);
  border-color: var(--glass-border);
}

/* Nos cards de entrega do Sales, o verde não é enfeite: ele diferencia as
   quatro capacidades do produto da linguagem neutra dos demais cards. */
.page--sales #entrega .card__icon {
  color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 8%, var(--surface-recessed));
  border-color: color-mix(in srgb, var(--brand-accent) 29%, var(--border-inset));
}

.page--sales #entrega .card__index {
  color: var(--brand-accent);
  font-weight: var(--weight-bold);
}

.page--sales #entrega .card:hover .card__icon {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--brand-accent) 22%, var(--surface-recessed));
  border-color: color-mix(in srgb, var(--brand-accent) 62%, var(--border-inset));
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--type-card);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-display-sm);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin-bottom: var(--space-16);
  text-wrap: balance;
}

.card__body {
  font-size: var(--text-body);
  color: var(--text-secondary);
}

/* No diagnóstico do Founder, os três títulos descrevem causas paralelas.
   Reservar duas linhas mantém os textos de apoio na mesma régua, mesmo
   quando um dos títulos é naturalmente mais curto. */
.page--founder #problema .card__title { min-height: 2.5em; }

/* Base de melhoria progressiva da demo: se o JavaScript não carregar, este
   palco ainda oferece uma superfície coerente para a mensagem alternativa. */
.sales-demo__stage {
  position: relative;
  display: grid;
  min-height: clamp(280px, 34vw, 420px);
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 42%, var(--glass-border));
  border-radius: var(--radius-panel);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--brand-accent) 10%, var(--glass-fill)),
      var(--surface-recessed));
  box-shadow: var(--shadow-glass);
}

/* A comparação lê primeiro o efeito da espera, de uma ponta à outra do
   benchmark. Só então o Sales fecha a sequência com a resposta operacional. */
.response-time__head { max-width: 670px; }
.response-time .section__head { margin-bottom: var(--space-40); }

.response-time__comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-16);
  width: min(100%, 960px);
}

.response-time__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--space-40);
  align-items: center;
  min-height: 144px;
  padding: var(--space-24) var(--space-32);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-panel);
  background: color-mix(in srgb, var(--surface-recessed) 80%, var(--glass-fill));
  box-shadow: var(--shadow-glass);
}

.response-time__label,
.response-time__signal,
.response-time__source {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.response-time__label { color: var(--text-muted); }

.response-time__card:not(.response-time__card--sales) { grid-template-rows: 1fr; }

.response-time__card:not(.response-time__card--sales) .response-time__label {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  margin-bottom: var(--space-32);
}

.response-time__window {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  margin-top: var(--space-16);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: clamp(var(--text-heading-sm), 2.8vw, var(--text-heading));
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-display-sm);
}

.response-time__quote {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding-left: var(--space-32);
  border-left: 1px solid var(--border-faint);
}

.response-time__quote strong {
  color: var(--text-primary);
  font-family: var(--font-numeric);
  font-size: clamp(40px, 4vw, var(--text-heading));
  font-weight: var(--weight-medium);
  letter-spacing: -0.05em;
  line-height: 1;
}

.response-time__quote span {
  color: var(--text-secondary);
  font-size: var(--text-label);
}

/* O Sales ganha massa e luz, mas continua no mesmo vidro. Esse contraste faz
   o número parecer resultado do produto, não mais uma estatística do estudo. */
.response-time__card--sales {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--space-40);
  min-height: 184px;
  align-items: flex-start;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--brand-accent) 62%, var(--glass-border));
  background:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--brand-accent) 24%, transparent), transparent 57%),
    linear-gradient(145deg, color-mix(in srgb, var(--brand-accent) 14%, var(--surface-recessed)), var(--surface-recessed));
  box-shadow:
    0 20px 62px color-mix(in srgb, var(--brand-accent) 15%, transparent),
    var(--shadow-glass);
}

.response-time__card--sales::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, color-mix(in srgb, var(--text-primary) 14%, transparent) 50%, transparent 68%);
  transform: translateX(-115%);
  animation: response-time-sheen 5.5s var(--ease-smooth) infinite;
}

.response-time__signal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--brand-accent);
  font-weight: var(--weight-bold);
}

.response-time__signal i {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: currentColor;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-accent) 14%, transparent);
  animation: response-time-pulse 2s var(--ease-smooth) infinite;
}

.response-time__sales-meta {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 1;
  align-items: center;
  gap: var(--space-16);
}

.response-time__sales-meta .response-time__label {
  margin: 0;
  padding-left: var(--space-16);
  border-left: 1px solid color-mix(in srgb, var(--brand-accent) 34%, var(--border-faint));
  color: var(--text-secondary);
}

.response-time__result {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  margin-top: var(--space-8);
  color: var(--text-primary);
  font-family: var(--font-numeric);
  font-size: clamp(52px, 5vw, var(--text-display));
  font-weight: var(--weight-medium);
  letter-spacing: -0.07em;
  line-height: .95;
}

.response-time__card--sales .response-time__result {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
}

.response-time__result small {
  color: var(--brand-accent);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.response-time__summary {
  max-width: 32ch;
  margin-top: auto;
  padding-top: var(--space-24);
  color: var(--text-secondary);
  font-size: var(--text-label-lg);
  line-height: var(--leading-body);
}

.response-time__card--sales .response-time__summary {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  max-width: 30ch;
  margin: 0;
  padding: 0 0 0 var(--space-32);
  border-left: 1px solid color-mix(in srgb, var(--brand-accent) 34%, var(--border-faint));
}

.response-time__source {
  max-width: 58ch;
  margin: calc(var(--space-24) * -1) 0 var(--space-32);
  padding-left: var(--space-16);
  border-left: 1px solid color-mix(in srgb, var(--brand-accent) 52%, var(--border-faint));
  color: var(--text-secondary);
  font-size: var(--text-label);
  line-height: var(--leading-body);
  text-transform: none;
}

.response-time__source a {
  color: var(--text-primary);
  text-decoration-color: color-mix(in srgb, var(--brand-accent) 56%, transparent);
  text-underline-offset: 3px;
}

@keyframes response-time-sheen { 50%, 100% { transform: translateX(115%); } }

@keyframes response-time-pulse {
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand-accent) 2%, transparent); }
}

.sales-demo__stage::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .48;
  background-image:
    linear-gradient(color-mix(in srgb, var(--brand-accent) 20%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--brand-accent) 20%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, transparent, black 22%, black 78%, transparent);
}

.sales-demo__placeholder {
  position: relative;
  z-index: 1;
  max-width: 32rem;
  padding: var(--space-32);
  text-align: center;
}

.sales-demo__status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 var(--space-16);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 55%, var(--glass-border));
  border-radius: var(--radius-pill);
  color: var(--brand-accent);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.sales-demo__placeholder p {
  margin-top: var(--space-16);
  color: var(--text-secondary);
  font-size: var(--text-body);
}

/* Demo nativo do Sales. Conversa, decisão e evidência operacional são três
   faces do mesmo estado; o circuito verde faz essa relação ficar visível. */
.sales-demo__stage:has(.sales-demo__chrome) {
  --demo-line: color-mix(in srgb, var(--brand-accent) 30%, var(--border-faint));
  --demo-panel: color-mix(in srgb, var(--surface-recessed) 86%, transparent);
  display: block;
  min-height: 680px;
  place-items: initial;
  isolation: isolate;
}

.sales-demo__stage:has(.sales-demo__chrome)::before {
  z-index: -1;
  opacity: .32;
  mask-image: linear-gradient(90deg, transparent, var(--color-void-black) 18%, var(--color-void-black) 82%, transparent);
}

.sales-demo__stage:has(.sales-demo__chrome)::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -180px;
  left: 24%;
  width: 52%;
  height: 320px;
  border-radius: 50%;
  pointer-events: none;
  background: color-mix(in srgb, var(--brand-accent) 13%, transparent);
  filter: blur(80px);
}

.sales-demo__fallback {
  padding: var(--space-64);
  color: var(--text-secondary);
  text-align: center;
}

.sales-demo__chrome {
  min-height: 68px;
  padding: var(--space-16) var(--space-24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  border-bottom: 1px solid var(--border-faint);
  background: color-mix(in srgb, var(--surface-card) 54%, transparent);
  backdrop-filter: blur(var(--blur-soft));
}

.sales-demo__chrome-copy,
.sales-demo__actions {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.sales-demo__live,
.sales-demo__chrome-title,
.sales-demo__control,
.sales-demo__panel-head,
.sales-demo__tabs button,
.sales-flow__status,
.sales-signals__metrics span,
.sales-signals__metrics small,
.sales-signals__log-head,
.sales-signals__log li span {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.sales-demo__live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--brand-accent);
}

.sales-demo__live i,
.sales-chat__contact i,
.sales-flow__status i,
.sales-signals__log-head i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--brand-accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--brand-accent) 75%, transparent);
}

.sales-demo__live i,
.sales-signals__log-head i { animation: sales-demo-pulse 1.8s var(--ease-smooth) infinite; }

.sales-demo__chrome-title {
  padding-left: var(--space-16);
  border-left: 1px solid var(--border-faint);
  color: var(--text-secondary);
}

.sales-demo__control {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border-faint);
  border-radius: var(--rounding-normal);
  background: var(--glass-fill);
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease-smooth),
    border-color var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out);
}

.sales-demo__control:hover {
  color: var(--text-primary);
  border-color: var(--glass-border-hover);
  background: var(--glass-fill-hover);
}

.sales-demo__control:focus-visible,
.sales-demo__tabs button:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

.sales-demo__workspace {
  display: grid;
  grid-template-columns: minmax(250px, .83fr) minmax(350px, 1.18fr) minmax(250px, .9fr);
  gap: 1px;
  min-height: 558px;
  background: var(--border-faint);
}

.sales-demo__panel {
  min-width: 0;
  height: 558px;
  background: var(--demo-panel);
  backdrop-filter: blur(var(--blur-soft));
}

.sales-demo__panel-head {
  height: 54px;
  padding: 0 var(--space-16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-faint);
}

.sales-demo__panel-head small { color: var(--brand-accent); font: inherit; }
.sales-demo__tabs { display: none; }

/* Conversa — reconhecível como WhatsApp, reconstruída com as superfícies e
   o verde do produto para não virar uma interface de terceiro colada à página. */
.sales-demo__chat { display: flex; flex-direction: column; }

.sales-chat__head {
  min-height: 66px;
  padding: 0 var(--space-16);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--border-faint);
  background: color-mix(in srgb, var(--brand-accent) 5%, var(--surface-recessed));
}

.sales-chat__avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 45%, var(--border-faint));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--brand-accent) 16%, var(--surface-card));
  color: var(--brand-accent);
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: var(--weight-ultrabold);
}

.sales-chat__contact { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sales-chat__contact strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sales-chat__contact small { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 10px; }
.sales-chat__contact i { width: 5px; height: 5px; }
.sales-chat__channel { color: var(--text-muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--tracking-mono); text-transform: uppercase; }

.sales-chat__messages {
  flex: 1;
  min-height: 0;
  padding: var(--space-16) 14px var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-border) transparent;
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--brand-accent) 4%, transparent), transparent 40%),
    color-mix(in srgb, var(--surface-card) 72%, transparent);
}

.sales-chat__bubble-wrap { display: flex; animation: sales-demo-message-in var(--motion-fast) var(--ease-out) both; }
.sales-chat__bubble-wrap--client { justify-content: flex-end; }
.sales-chat__bubble-wrap--agent { justify-content: flex-start; }

.sales-chat__bubble {
  max-width: 88%;
  padding: 9px 10px 6px;
  border: 1px solid var(--border-faint);
  border-radius: var(--rounding-md);
  color: var(--text-primary);
  box-shadow: var(--shadow-key);
}

.sales-chat__bubble--client {
  border-bottom-right-radius: var(--rounding-xs);
  border-color: color-mix(in srgb, var(--brand-accent) 24%, var(--border-faint));
  background: color-mix(in srgb, var(--brand-accent) 14%, var(--surface-recessed));
}

.sales-chat__bubble--agent { border-bottom-left-radius: var(--rounding-xs); background: var(--surface-recessed); }
.sales-chat__bubble-copy { display: block; white-space: pre-line; font-size: 11px; line-height: 1.48; }
.sales-chat__bubble time { display: block; margin-top: 3px; color: var(--text-muted); font-family: var(--font-mono); font-size: 8px; text-align: right; }

.sales-chat__typing {
  width: max-content;
  padding: 12px 14px;
  display: flex;
  gap: 4px;
  border: 1px solid var(--border-faint);
  border-radius: var(--rounding-md);
  border-bottom-left-radius: var(--rounding-xs);
  background: var(--surface-recessed);
}

.sales-chat__typing i { width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--text-muted); animation: sales-demo-typing .8s var(--ease-smooth) infinite alternate; }
.sales-chat__typing i:nth-child(2) { animation-delay: .14s; }
.sales-chat__typing i:nth-child(3) { animation-delay: .28s; }

.sales-chat__composer {
  min-height: 54px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  border-top: 1px solid var(--border-faint);
  background: var(--surface-recessed);
}

.sales-chat__composer span { flex: 1; padding: 9px 12px; border: 1px solid var(--border-faint); border-radius: var(--radius-pill); color: var(--text-muted); font-size: 10px; }
.sales-chat__composer i { width: 30px; height: 30px; border-radius: var(--radius-pill); background: var(--brand-accent); box-shadow: 0 0 18px color-mix(in srgb, var(--brand-accent) 20%, transparent); }

/* Grafo central */
.sales-demo__flow { display: flex; flex-direction: column; }
.sales-flow { position: relative; width: 100%; max-width: 440px; aspect-ratio: 440 / 340; margin: auto; }
.sales-flow__connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sales-flow__connections path {
  fill: none;
  stroke: var(--demo-line);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
  vector-effect: non-scaling-stroke;
  transition: stroke var(--motion-base) var(--ease-smooth), stroke-width var(--motion-base) var(--ease-out);
}
.sales-flow__connections path.is-active { stroke: var(--brand-accent); stroke-width: 2; animation: sales-demo-dash 1.2s linear infinite; }
.sales-flow__connections circle { visibility: hidden; fill: var(--brand-accent); filter: drop-shadow(0 0 6px var(--brand-accent)); }
.sales-flow__connections circle.is-active { visibility: visible; }

.sales-flow__node {
  position: absolute;
  z-index: 1;
  width: 92px;
  min-height: 62px;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border-faint);
  border-radius: var(--rounding-md);
  background: color-mix(in srgb, var(--surface-recessed) 88%, transparent);
  box-shadow: var(--shadow-key);
  transition:
    transform var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out),
    background-color var(--motion-base) var(--ease-smooth),
    box-shadow var(--motion-base) var(--ease-out);
}

.sales-flow__node span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: var(--rounding-normal); background: var(--surface-badge); color: var(--text-secondary); font-family: var(--font-mono); font-size: 9px; font-weight: var(--weight-bold); }
.sales-flow__node strong { color: var(--text-secondary); font-size: 9px; font-weight: var(--weight-semibold); letter-spacing: .01em; }
.sales-flow__node.is-active {
  transform: translate(-50%, -50%) scale(1.04);
  border-color: color-mix(in srgb, var(--brand-accent) 68%, var(--glass-border));
  background: color-mix(in srgb, var(--brand-accent) 11%, var(--surface-recessed));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-accent) 15%, transparent), 0 12px 38px color-mix(in srgb, var(--brand-accent) 12%, transparent);
}
.sales-flow__node.is-active span { color: var(--surface-canvas); background: var(--brand-accent); }
.sales-flow__node.is-active strong { color: var(--text-primary); }
.sales-flow__node--agent { left: 22.7%; top: 50%; width: 96px; min-height: 70px; }
.sales-flow__node--memory { left: 62.5%; top: 18.8%; }
.sales-flow__node--commerce { left: 77.3%; top: 41.8%; }
.sales-flow__node--knowledge { left: 62.5%; top: 81.8%; }
.sales-flow__node--response { left: 22.7%; top: 87.6%; }

.sales-flow__origin { position: absolute; left: 6px; color: var(--text-muted); font-family: var(--font-mono); font-size: 8px; letter-spacing: var(--tracking-mono); text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.sales-flow__origin--in { top: 39%; }
.sales-flow__origin--out { bottom: 3%; }
.sales-flow__status { min-height: 52px; padding: 0 var(--space-16); display: flex; align-items: center; gap: 10px; color: var(--text-secondary); border-top: 1px solid var(--border-faint); }

/* Sinais operacionais */
.sales-demo__signals { display: flex; flex-direction: column; }
.sales-signals__metrics { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border-faint); }
.sales-signals__metrics > div { min-width: 0; padding: var(--space-16) 10px; border-right: 1px solid var(--border-faint); }
.sales-signals__metrics > div:last-child { border-right: 0; }
.sales-signals__metrics span,
.sales-signals__metrics small { display: block; overflow: hidden; color: var(--text-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.sales-signals__metrics strong { display: block; margin: var(--space-8) 0 4px; color: var(--brand-accent); font-family: var(--font-numeric); font-size: var(--text-heading-sm); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.sales-signals__log { min-height: 0; padding: var(--space-16); display: flex; flex: 1; flex-direction: column; }
.sales-signals__log-head { display: flex; align-items: center; justify-content: space-between; color: var(--text-secondary); }
.sales-signals__log ol { margin: var(--space-16) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); list-style: none; overflow: hidden; }
.sales-signals__log li { padding: 11px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border-faint); border-radius: var(--rounding-normal); background: color-mix(in srgb, var(--surface-card) 62%, transparent); animation: sales-demo-log-in var(--motion-fast) var(--ease-out) both; }
.sales-signals__log li span { color: var(--brand-accent); font-size: 8px; }
.sales-signals__log li strong { color: var(--text-secondary); font-size: 10px; font-weight: var(--weight-medium); line-height: 1.45; }

.sales-demo__timeline {
  height: 52px;
  padding: 0 var(--space-24);
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  align-items: center;
  gap: var(--space-8);
  border-top: 1px solid var(--border-faint);
  background: color-mix(in srgb, var(--surface-card) 54%, transparent);
}

.sales-demo__timeline button { position: relative; height: 3px; overflow: hidden; border: 0; border-radius: var(--radius-pill); background: var(--surface-badge); }
.sales-demo__timeline button::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--brand-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--motion-base) var(--ease-out); }
.sales-demo__timeline button.is-current::before { transform: scaleX(.42); }
.sales-demo__timeline button.is-complete::before { transform: scaleX(1); }

.sales-demo__stage.is-paused .sales-demo__live i,
.sales-demo__stage.is-paused .sales-signals__log-head i,
.sales-demo__stage.is-paused .sales-chat__typing i,
.sales-demo__stage.is-paused .sales-flow__connections path,
.sales-demo__stage.is-paused .sales-flow__connections circle { animation-play-state: paused; }

@keyframes sales-demo-message-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes sales-demo-log-in { from { opacity: 0; transform: translateX(8px); } }
@keyframes sales-demo-pulse { 50% { opacity: .42; transform: scale(.72); } }
@keyframes sales-demo-typing { to { opacity: .35; transform: translateY(-3px); } }
@keyframes sales-demo-dash { to { stroke-dashoffset: -22; } }

@media (max-width: 960px) {
  .sales-demo__stage:has(.sales-demo__chrome) { min-height: 730px; }
  .sales-demo__tabs { padding: var(--space-8); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); border-bottom: 1px solid var(--border-faint); background: color-mix(in srgb, var(--surface-card) 54%, transparent); }
  .sales-demo__tabs button { min-height: 36px; border: 1px solid transparent; border-radius: var(--rounding-normal); background: transparent; color: var(--text-muted); cursor: pointer; }
  .sales-demo__tabs button[aria-selected="true"] { border-color: color-mix(in srgb, var(--brand-accent) 36%, var(--border-faint)); background: color-mix(in srgb, var(--brand-accent) 9%, var(--surface-recessed)); color: var(--brand-accent); }
  .sales-demo__workspace { display: block; min-height: 558px; background: transparent; }
  .sales-demo__panel { display: none; width: 100%; max-width: 620px; margin: 0 auto; border-right: 1px solid var(--border-faint); border-left: 1px solid var(--border-faint); }
  .sales-demo__panel.is-mobile-active { display: flex; }
  .sales-demo__flow.is-mobile-active,
  .sales-demo__signals.is-mobile-active { flex-direction: column; }
  .sales-chat__bubble-copy,
  .sales-signals__log li strong { font-size: var(--text-micro); }
}

@media (max-width: 560px) {
  .sales-demo .shell { padding-inline: var(--space-16); }
  .sales-demo__stage:has(.sales-demo__chrome) { min-height: 714px; border-radius: var(--rounding-lg); }
  .sales-demo__chrome { min-height: 62px; padding: 12px; }
  .sales-demo__chrome-title { display: none; }
  .sales-demo__actions { gap: 6px; }
  .sales-demo__control { min-height: 32px; padding-inline: 9px; font-size: 9px; }
  .sales-demo__workspace,
  .sales-demo__panel { min-height: 558px; height: 558px; }
  .sales-demo__timeline { padding-inline: 12px; gap: 5px; }
  .sales-flow { max-width: 390px; }
  .sales-flow__node { width: 78px; min-height: 58px; }
  .sales-flow__node--agent { width: 84px; min-height: 64px; }
  .sales-flow__node strong { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .sales-demo__live i,
  .sales-signals__log-head i,
  .sales-chat__typing i,
  .sales-flow__connections path,
  .sales-chat__bubble-wrap,
  .sales-signals__log li { animation: none; }
  .sales-flow__connections circle { display: none; }
}

/* ══════════ COMPOSIÇÃO V2 · TELEFONE / RACIOCÍNIO / BACKEND ══════════
   A referência antiga funciona porque cada coluna tem um papel físico
   diferente. Aqui, só conversa e backend são objetos fechados; o raciocínio
   permanece vazado, como uma camada invisível entre cliente e operação. */
.sales-demo__stage:has(.sales-demo__chrome) {
  min-height: 760px;
  display: flex;
  flex-direction: column;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.sales-demo__stage:has(.sales-demo__chrome)::before,
.sales-demo__stage:has(.sales-demo__chrome)::after { display: none; }

.sales-demo__workspace {
  order: 1;
  min-height: 620px;
  display: grid;
  grid-template-columns: 310px minmax(350px, 1fr) 320px;
  align-items: center;
  gap: var(--space-32);
  background: transparent;
}

.sales-demo__panel {
  height: 620px;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

/* O WhatsApp vira um objeto: bezel contínuo, cantos mais generosos e
   superfícies internas que param exatamente dentro do corpo do telefone. */
.sales-demo__chat {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 34%, var(--glass-border));
  border-radius: 30px;
  background: var(--surface-recessed);
  box-shadow:
    var(--shadow-glass),
    0 0 70px color-mix(in srgb, var(--brand-accent) 7%, transparent);
}

.sales-demo__chat::before {
  content: '';
  position: absolute;
  z-index: 4;
  top: 8px;
  left: 50%;
  width: 48px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-badge);
  transform: translateX(-50%);
}

.sales-chat__head {
  min-height: 72px;
  padding: 8px 14px 0;
  grid-template-columns: 24px 36px minmax(0, 1fr) 42px;
  gap: var(--space-8);
  background: color-mix(in srgb, var(--brand-accent) 7%, var(--surface-recessed));
}

.sales-chat__back {
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 25px;
  line-height: 1;
}

.sales-chat__avatar { width: 36px; height: 36px; font-size: var(--text-body); }

.sales-chat__head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.sales-chat__head-actions b {
  width: 4px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--text-muted);
}

.sales-chat__messages {
  padding: var(--space-16) 12px var(--space-24);
  background:
    linear-gradient(color-mix(in srgb, var(--brand-accent) 4%, transparent), color-mix(in srgb, var(--brand-accent) 1%, transparent)),
    var(--surface-card);
}

.sales-chat__composer {
  min-height: 62px;
  padding: 10px 12px 13px;
  background: color-mix(in srgb, var(--brand-accent) 7%, var(--surface-recessed));
}

.sales-chat__composer b {
  width: 24px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: var(--text-subheading);
  font-weight: var(--weight-regular);
}

.sales-chat__composer > i {
  position: relative;
  flex: none;
}

.sales-chat__composer > i::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 11px;
  width: 7px;
  height: 11px;
  border: 1px solid var(--surface-canvas);
  border-radius: var(--radius-pill);
}

/* O centro deliberadamente não tem card, vidro nem divisória. */
.sales-demo__flow {
  height: 620px;
  display: flex;
  flex-direction: column;
  background: transparent;
}

.sales-demo__flow .sales-demo__panel-head {
  height: 44px;
  padding-inline: 0;
  border: 0;
  color: var(--text-muted);
}

.sales-flow {
  max-width: 440px;
  margin: auto;
}

.sales-flow__node {
  background: color-mix(in srgb, var(--surface-recessed) 82%, transparent);
  box-shadow: var(--shadow-key);
}

.sales-flow__status {
  min-height: 44px;
  justify-content: center;
  border: 0;
  color: var(--text-muted);
}

/* Backend: um único retângulo vertical e mais denso, como o objeto técnico
   que recebe as decisões do agente e devolve evidências operacionais. */
.sales-demo__signals {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 18%, var(--glass-border));
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--surface-card) 92%, transparent);
  box-shadow: var(--shadow-glass);
}

.sales-backend__head { height: 58px; }

.sales-backend__head > span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  text-transform: none;
}

.sales-backend__head > span i,
.sales-backend__services span i {
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 48%, var(--border-faint));
  border-radius: var(--rounding-normal);
  background: color-mix(in srgb, var(--brand-accent) 9%, transparent);
  color: var(--brand-accent);
  font-family: var(--font-mono);
  font-size: 8px;
  font-style: normal;
}

.sales-backend__head > span i { width: 26px; height: 26px; }

.sales-backend__services {
  padding: 12px;
  display: grid;
  gap: var(--space-8);
  border-bottom: 1px solid var(--border-faint);
}

.sales-backend__services > div {
  position: relative;
  min-height: 48px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  overflow: hidden;
  border: 1px solid var(--border-faint);
  border-radius: var(--rounding-normal);
  background: var(--surface-recessed);
  transition:
    border-color var(--motion-base) var(--ease-out),
    background-color var(--motion-base) var(--ease-smooth),
    box-shadow var(--motion-base) var(--ease-out);
}

.sales-backend__services > div::after {
  content: '';
  position: absolute;
  right: 10px;
  bottom: 4px;
  left: 10px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--brand-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-base) var(--ease-out);
}

.sales-backend__services > div.is-active {
  border-color: color-mix(in srgb, var(--brand-accent) 72%, var(--glass-border));
  background: color-mix(in srgb, var(--brand-accent) 8%, var(--surface-recessed));
  box-shadow: 0 0 22px color-mix(in srgb, var(--brand-accent) 8%, transparent);
}

.sales-backend__services > div.is-active::after { transform: scaleX(.72); }

.sales-backend__services span { display: flex; align-items: center; gap: var(--space-8); color: var(--text-secondary); font-size: 10px; font-weight: var(--weight-medium); }
.sales-backend__services span i { width: 23px; height: 23px; }
.sales-backend__services small { color: var(--text-muted); font-family: var(--font-mono); font-size: 7px; text-align: right; }
.sales-backend__services small b { color: var(--brand-accent); font: inherit; }

.sales-backend__eyebrow {
  margin: 0;
  padding: 12px 14px 7px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.sales-backend__metrics {
  padding: 0 12px 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  border-bottom: 1px solid var(--border-faint);
}

.sales-backend__metrics > div {
  min-height: 64px;
  padding: 9px 10px;
  border: 1px solid var(--border-faint);
  border-radius: var(--rounding-normal);
  background: var(--surface-recessed);
}

.sales-backend__metrics .sales-backend__metric--wide {
  min-height: 57px;
  grid-column: 1 / -1;
}

.sales-backend__metrics span {
  display: block;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.3;
}

.sales-backend__metrics strong {
  display: block;
  margin-top: 5px;
  color: var(--text-primary);
  font-family: var(--font-numeric);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.sales-backend__bar {
  position: relative;
  display: block;
  height: 3px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-badge);
}

.sales-backend__bar::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--value, 0%);
  border-radius: inherit;
  background: var(--brand-accent);
  transition: width var(--motion-base) var(--ease-out);
}

.sales-demo__signals .sales-signals__log { padding: 12px 14px; }
.sales-demo__signals .sales-signals__log ol { margin-top: 10px; gap: 5px; }
.sales-demo__signals .sales-signals__log li { padding: 7px 9px; border: 0; background: transparent; }
.sales-demo__signals .sales-signals__log li span { font-size: 7px; }
.sales-demo__signals .sales-signals__log li strong { font-size: 9px; }

/* Na referência, progresso e controles ficam abaixo dos três objetos. */
.sales-demo__timeline {
  order: 2;
  width: min(360px, 70%);
  height: 34px;
  margin: var(--space-16) auto 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  border: 0;
  background: transparent;
}

.sales-demo__timeline button {
  position: relative;
  width: 22px;
  height: 24px;
  flex: none;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
}

.sales-demo__timeline button::after,
.sales-demo__timeline button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  transform: translate(-50%, -50%);
  transition:
    transform var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-smooth),
    box-shadow var(--motion-fast) var(--ease-out);
}

.sales-demo__timeline button::after { background: var(--surface-badge); }
.sales-demo__timeline button::before {
  z-index: 1;
  inset: auto;
  background: var(--brand-accent);
  transform: translate(-50%, -50%) scale(0);
  transform-origin: center;
}

.sales-demo__timeline button:hover::after { transform: translate(-50%, -50%) scale(1.35); }
.sales-demo__timeline button.is-current::before { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 12px var(--brand-accent); }
.sales-demo__timeline button.is-complete::before { transform: translate(-50%, -50%) scale(.72); opacity: .6; }
.sales-demo__timeline button:focus-visible { outline: 1px solid var(--brand-accent); outline-offset: 0; }

.sales-chat__bubble-wrap.is-restored { animation: none; }

.sales-demo__chrome {
  order: 3;
  min-height: 42px;
  padding: 0;
  justify-content: center;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.sales-demo__chrome-copy { display: none; }

/* O mesmo DOM serve ao palco normal e ao modal mobile. O wrapper adicional
   não cria outra simulação: ele só muda a forma de apresentar o mesmo estado. */
.sales-demo__experience,
.sales-demo__scaler,
.sales-demo__viewport {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.sales-demo__mobile-launch,
.sales-demo__close { display: none; }

body.sales-demo-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.sales-demo-modal-open .sales-demo__stage { isolation: auto; }

@media (max-width: 1100px) and (min-width: 961px) {
  .sales-demo__workspace {
    grid-template-columns: 280px minmax(310px, 1fr) 290px;
    gap: var(--space-16);
  }
}

@media (max-width: 960px) {
  .sales-demo__stage:has(.sales-demo__chrome) {
    min-height: 0;
    display: block;
  }

  .sales-demo__mobile-launch {
    position: relative;
    min-height: 300px;
    padding: var(--space-32);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-panel);
    background:
      radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--brand-accent) 18%, transparent), transparent 42%),
      var(--glass-fill);
    box-shadow: var(--shadow-glass);
  }

  .sales-demo__mobile-launch::after {
    content: '';
    position: absolute;
    right: -54px;
    bottom: -76px;
    width: 220px;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--brand-accent) 22%, transparent);
    border-radius: var(--radius-pill);
    box-shadow:
      0 0 0 24px color-mix(in srgb, var(--brand-accent) 3%, transparent),
      0 0 0 54px color-mix(in srgb, var(--brand-accent) 2%, transparent);
    pointer-events: none;
  }

  .sales-demo__mobile-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    color: var(--brand-accent);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
  }

  .sales-demo__mobile-label i {
    width: 22px;
    height: 1px;
    background: var(--brand-accent);
  }

  .sales-demo__mobile-launch > strong {
    max-width: 520px;
    margin-top: var(--space-16);
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(28px, 8vw, 42px);
    font-weight: var(--weight-ultrabold);
    line-height: .98;
    letter-spacing: -.045em;
  }

  .sales-demo__mobile-launch > p {
    max-width: 430px;
    margin: var(--space-16) 0 var(--space-24);
    color: var(--text-secondary);
    font-size: var(--text-small);
    line-height: 1.55;
  }

  .sales-demo__expand {
    position: relative;
    z-index: 1;
    min-height: 52px;
    padding: 0 var(--space-32);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--brand-accent) 62%, var(--glass-border));
    border-radius: var(--rounding-md);
    background: color-mix(in srgb, var(--brand-accent) 9%, var(--surface-recessed));
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    box-shadow: 0 0 28px color-mix(in srgb, var(--brand-accent) 9%, transparent);
    transition:
      transform var(--motion-fast) var(--ease-out),
      border-color var(--motion-fast) var(--ease-out),
      background-color var(--motion-fast) var(--ease-smooth);
  }

  .sales-demo__expand:hover {
    transform: translateY(-2px);
    border-color: var(--brand-accent);
    background: color-mix(in srgb, var(--brand-accent) 14%, var(--surface-recessed));
  }

  .sales-demo__expand:focus-visible,
  .sales-demo__close:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 3px;
  }

  .sales-demo__experience { display: none; }

  .sales-demo__experience.is-open {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--surface-canvas);
    isolation: isolate;
  }

  .sales-demo__experience.is-open::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--brand-accent) 7%, transparent), transparent 62%);
  }

  .sales-demo__close {
    position: fixed;
    z-index: 2;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface-recessed) 88%, transparent);
    color: var(--text-primary);
    cursor: pointer;
    backdrop-filter: blur(var(--blur-soft));
  }

  .sales-demo__close span,
  .sales-demo__close span::after {
    width: 20px;
    height: 1px;
    display: block;
    background: currentColor;
    transform: rotate(45deg);
  }

  .sales-demo__close span::after { content: ''; transform: rotate(90deg); }

  .sales-demo__scaler {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1120px;
    height: 600px;
    flex: none;
    transform-origin: center;
  }

  .sales-demo__viewport {
    width: 1120px;
    height: 600px;
    padding: 8px 20px;
    justify-content: center;
  }

  .sales-demo__tabs { display: none; }
  .sales-demo__workspace {
    order: 1;
    min-height: 500px;
    height: 500px;
    display: grid;
    grid-template-columns: 300px minmax(360px, 1fr) 300px;
    align-items: center;
    gap: var(--space-24);
    background: transparent;
  }

  .sales-demo__panel,
  .sales-demo__panel.is-mobile-active {
    width: 100%;
    max-width: none;
    min-height: 500px;
    height: 500px;
    margin: 0;
    display: flex;
    border-right: 0;
    border-left: 0;
  }

  .sales-demo__flow,
  .sales-demo__signals,
  .sales-demo__flow.is-mobile-active,
  .sales-demo__signals.is-mobile-active { flex-direction: column; }

  .sales-demo__chrome {
    order: 3;
    min-height: 38px;
    justify-content: center;
  }

  .sales-demo__chrome-copy { display: none; }
  .sales-demo__timeline { order: 2; height: 30px; margin-top: 4px; }
}

@media (max-width: 560px) {
  .sales-demo .shell { padding-inline: var(--space-16); }
  .sales-demo__mobile-launch { min-height: 330px; padding: var(--space-24); border-radius: var(--rounding-lg); }
  .sales-demo__mobile-launch > strong { max-width: 330px; }
}


/* ══════════ 10 · BLOCOS DIVIDIDOS ══════════ */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-64);
  align-items: center;
}

.split--reverse .split__text { order: 2; }
.split--reverse .split__media { order: 1; }

.split__text .col-label { margin-top: var(--space-40); }

.feature-list {
  margin-top: var(--space-40);
  border-top: 1px solid var(--border-faint);
}

.feature-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-8);
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-faint);
  font-size: 15px;
  color: var(--text-secondary);
  /* transform em vez de padding-left: desloca a linha sem forçar reflow —
     mais leve e mais fluido, principalmente passando o mouse rápido
     entre itens da lista. */
  transition:
    color var(--motion-fast) var(--ease-smooth),
    transform var(--motion-fast) var(--ease-out);
}

.feature-list li::before {
  content: '—';
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--color-iron);
  transition: color var(--motion-fast) var(--ease-smooth);
}

.feature-list li:hover {
  color: var(--text-primary);
  transform: translateX(var(--space-8));
}
.feature-list li:hover::before { color: var(--brand-accent); }

.media-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-panel);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  overflow: hidden;
  transition:
    transform var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out);
}
.media-frame:hover {
  transform: translateY(-4px);
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-glass-hover);
}

/* O CTA pertence à mídia do Sales: fica depois da imagem no fluxo e se
   apoia na borda direita dela, em vez de disputar a coluna de argumentos. */
.product--sales .split__media {
  display: grid;
  justify-items: end;
  gap: var(--space-16);
}
.product--sales .media-frame { width: 100%; }

/* O CTA conserva o vidro usado no restante da interface. O verde Sales só
   tinge a superfície por baixo do texto: é uma assinatura de produto, não
   uma nova hierarquia visual para o botão. */
.product--sales .product__more {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.product--sales .product__more > span {
  position: relative;
  z-index: 1;
  font-weight: var(--weight-bold);
}
.product--sales .product__more::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    color-mix(in srgb, var(--brand-sales) 13%, transparent),
    color-mix(in srgb, var(--brand-sales) 5%, transparent) 72%
  );
}
.product--sales .product__more::after {
  content: '';
  position: absolute;
  inset: -55% -40%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    transparent 43%,
    color-mix(in srgb, var(--brand-sales) 34%, transparent) 50%,
    transparent 57%
  );
  transform: translateX(-68%);
  animation: sales-cta-shine 3.8s var(--ease-smooth) infinite;
}

.media-frame:not(.has-media)::after {
  content: attr(data-placeholder);
  position: absolute;
  inset: var(--space-16);
  display: grid;
  place-content: center;
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius-card);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-iron);
  text-align: center;
  padding: var(--space-16);
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Microdemo do Sales na home ----------
   O aparelho é uma superfície de interface, não uma ilustração importada:
   isso mantém conversa e estado legíveis enquanto a perspectiva cria a
   diagonal do conceito. Os anéis ficam soltos no fundo e o palco não recebe
   moldura própria, para o telefone poder ultrapassar sua área sem ser cortado. */

.media-frame--sales-phone {
  isolation: isolate;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.media-frame--sales-phone:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}

.sales-phone-demo {
  position: absolute;
  inset: 0;
  overflow: visible;
  perspective: 1100px;
}

.sales-phone-demo__orbit {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  border: 1px solid color-mix(in srgb, var(--brand-sales) 24%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-11deg);
}

.sales-phone-demo__orbit--a { width: 74%; aspect-ratio: 1; }
.sales-phone-demo__orbit--b { width: 48%; aspect-ratio: 1; opacity: 0.5; }

.sales-phone {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  height: 112%;
  aspect-ratio: 9 / 19;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--text-primary) 23%, transparent);
  border-radius: 30px;
  background: var(--surface-card);
  box-shadow:
    10px 16px 0 color-mix(in srgb, var(--surface-canvas) 80%, transparent),
    18px 28px 50px color-mix(in srgb, var(--surface-canvas) 74%, transparent),
    0 0 42px color-mix(in srgb, var(--brand-sales) 13%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 14%, transparent);
  transform: translate(-48%, -50%) rotateX(8deg) rotateY(-13deg) rotateZ(9deg);
  transform-style: preserve-3d;
  transition: transform var(--motion-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .media-frame--sales-phone:hover .sales-phone {
    transform: translate(-48%, -51%) rotateX(5deg) rotateY(-8deg) rotateZ(7deg);
  }
}

.sales-phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--border-inset);
  border-radius: 23px;
  background:
    radial-gradient(circle at 80% 0, color-mix(in srgb, var(--brand-sales) 7%, transparent), transparent 32%),
    var(--surface-recessed);
}

.sales-phone__statusbar {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 13px 0;
  color: var(--text-secondary);
  font-family: var(--font-numeric);
  font-size: 7px;
  font-weight: var(--weight-semibold);
}

.sales-phone__statusbar::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 50%;
  width: 34%;
  height: 11px;
  border-radius: var(--radius-pill);
  background: var(--surface-canvas);
  transform: translateX(-50%);
}

.sales-phone__statusbar i {
  position: relative;
  width: 15px;
  height: 7px;
  border: 1px solid var(--text-secondary);
  border-radius: 2px;
}

.sales-phone__statusbar i::before {
  content: '';
  position: absolute;
  inset: 1px 2px 1px 1px;
  border-radius: 1px;
  background: var(--text-secondary);
}

.sales-phone__statusbar i::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -3px;
  width: 2px;
  height: 3px;
  border-radius: 0 1px 1px 0;
  background: var(--text-muted);
  transform: translateY(-50%);
}

.sales-phone__header {
  height: 48px;
  display: grid;
  grid-template-columns: 12px 30px minmax(0, 1fr) 16px;
  gap: 6px;
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid var(--border-faint);
  background: color-mix(in srgb, var(--surface-card) 76%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-soft));
  backdrop-filter: blur(var(--blur-soft));
}

.sales-phone__back,
.sales-phone__menu { color: var(--text-muted); font-size: 16px; line-height: 1; }
.sales-phone__menu { font-size: 9px; letter-spacing: 1px; }

.sales-phone__avatar {
  width: 30px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-sales);
  box-shadow: 0 0 14px color-mix(in srgb, var(--brand-sales) 28%, transparent);
}

/* Silhueta geométrica em vez de um glifo de fonte: assim o avatar continua
   reconhecível mesmo quando o telefone é reduzido no celular. */
.sales-phone__avatar i {
  position: relative;
  width: 13px;
  height: 14px;
  display: block;
}

.sales-phone__avatar i::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 6px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--surface-canvas);
  transform: translateX(-50%);
}

.sales-phone__avatar i::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 7px;
  border-radius: 7px 7px 3px 3px;
  background: var(--surface-canvas);
}

.sales-phone__contact { min-width: 0; display: grid; gap: 2px; }
.sales-phone__contact strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 8px;
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sales-phone__contact small { color: var(--brand-sales); font-size: 6px; }

.sales-phone__chat {
  position: absolute;
  inset: 70px 0 42px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 10px 9px 16px;
  overflow: hidden;
}

.sales-phone__day {
  align-self: center;
  padding: 3px 7px;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  background: var(--surface-card);
  font-family: var(--font-mono);
  font-size: 5px;
  text-transform: uppercase;
}

.sales-phone__bubble {
  max-width: 88%;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid var(--border-faint);
  border-radius: 10px 10px 10px 3px;
  color: var(--text-secondary);
  background: var(--surface-badge);
  font-size: 6.6px;
  line-height: 1.45;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--surface-canvas) 35%, transparent);
  transition:
    opacity var(--motion-base) var(--ease-smooth),
    transform var(--motion-base) var(--ease-out);
}

.sales-phone__bubble--intro { max-width: 75%; }

.sales-phone__bubble--client {
  align-self: flex-end;
  border-color: color-mix(in srgb, var(--brand-sales) 17%, var(--border-faint));
  border-radius: 10px 10px 3px 10px;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--brand-sales) 21%, var(--surface-badge));
}

.sales-phone__bubble--agent {
  max-width: 94%;
  color: var(--text-primary);
}

.sales-phone__bubble.is-entering {
  opacity: 0;
  transform: translateY(9px) scale(0.96);
}

.sales-phone__typing {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 32px;
  min-height: 20px;
  padding: 7px 9px;
  border: 1px solid var(--border-faint);
  border-radius: 10px 10px 10px 3px;
  background: var(--surface-badge);
}

.sales-phone__typing i {
  width: 3px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--text-muted);
  animation: sales-phone-typing 720ms var(--ease-smooth) infinite alternate;
}
.sales-phone__typing i:nth-child(2) { animation-delay: 120ms; }
.sales-phone__typing i:nth-child(3) { animation-delay: 240ms; }

.sales-phone__composer {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 13px;
  left: 8px;
  height: 26px;
  display: flex;
  align-items: center;
  padding: 0 5px 0 9px;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-card) 90%, transparent);
}

.sales-phone__typed,
.sales-phone__placeholder {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 6px;
  text-align: left;
  text-overflow: clip;
  white-space: nowrap;
}

.sales-phone__typed:empty { display: none; }

.sales-phone__typed:not(:empty)::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 8px;
  margin-left: 1px;
  background: var(--brand-sales);
  vertical-align: -2px;
  animation: sales-phone-caret 620ms steps(1) infinite;
}

.sales-phone__placeholder { color: var(--text-muted); }
.sales-phone__typed:not(:empty) + .sales-phone__placeholder { display: none; }

.sales-phone__send {
  width: 18px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--surface-canvas);
  background: var(--brand-sales);
  font-family: var(--font-numeric);
  font-size: 11px;
  font-weight: var(--weight-bold);
  transition:
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-smooth);
}

.is-running:not(.is-client-sent) .sales-phone__send {
  transform: scale(1.08);
  box-shadow: 0 0 12px color-mix(in srgb, var(--brand-sales) 32%, transparent);
}

.sales-phone__homebar {
  position: absolute;
  z-index: 3;
  bottom: 5px;
  left: 50%;
  width: 34%;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--text-muted);
  transform: translateX(-50%);
}

@keyframes sales-phone-typing {
  from { opacity: 0.35; transform: translateY(1px); }
  to { opacity: 1; transform: translateY(-1px); }
}

@keyframes sales-phone-caret {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}


/* ══════════ 10.5 · RAVI ══════════
   A seção parte do núcleo (o harness) e se divide nos dois modos reais de
   adoção. A régua central do rascunho vira a separação entre Enterprise e
   Founder — estrutura, não decoração. */
.ravi__intro {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.ravi__name {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--type-hero);
  font-weight: var(--weight-ultrabold);
  letter-spacing: var(--tracking-display-sm);
  line-height: var(--leading-tight);
}

.ravi__statement {
  max-width: 16ch;
  margin: var(--space-16) auto 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--type-section);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-display-sm);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

.ravi__intro .section__lede { margin-inline: auto; }

.ravi__offers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-80);
  border-top: 1px solid var(--border-faint);
}

.ravi__offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100%;
  padding: var(--space-48) var(--space-56);
}

.ravi__offer + .ravi__offer { border-left: 1px solid var(--border-faint); }

.ravi__offer-name {
  margin-top: var(--space-16);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--type-section);
  font-weight: var(--weight-ultrabold);
  letter-spacing: var(--tracking-display-sm);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

.ravi__offer-body {
  margin-top: var(--space-16);
  min-height: 5.25em;
  color: var(--text-secondary);
  font-size: var(--text-body);
}

.ravi__offer-points {
  display: grid;
  width: 100%;
  margin: var(--space-32) 0;
  border-top: 1px solid var(--border-faint);
}

.ravi__offer-points li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--space-16);
  align-items: baseline;
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--border-faint);
  color: var(--text-secondary);
  font-size: var(--text-body);
}

.ravi__offer-points li::before {
  content: '+';
  color: var(--brand-accent);
  font-family: var(--font-mono);
}

.ravi__offer .btn { margin-top: auto; }

/* ══════════ 10.6 · RAVI FOUNDER ══════════
   A narrativa parte da dependência do founder e chega ao RAVI como ponto
   de contato da operação. O mapa explica a malha; a demo, inserida depois,
   mostrará uma rotina específica se movendo dentro dela. */
.founder-hero .hero__title { max-width: 17ch; }
.founder-hero .hero__lede { max-width: 58ch; }
.founder-hero__eyebrow,
.sales-hero__eyebrow {
  color: var(--text-primary);
  font-weight: var(--weight-bold);
  opacity: 0.82;
}
/* Os arcos partem de um foco deslocado no shader, deixando o centro escuro
   para a tese do Founder. A paleta permanece a azul/violeta padrão da RBBT. */
.page--founder { --hero-blinds-geometry: 2; }

.founder-system__map {
  display: grid;
  justify-items: center;
  row-gap: var(--space-16);
  padding: var(--space-40);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 22%, var(--glass-border));
  border-radius: var(--radius-panel);
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--brand-accent) 7%, transparent), transparent 52%),
    var(--glass-fill);
  box-shadow: var(--shadow-glass);
}

.founder-system__label {
  color: color-mix(in srgb, var(--brand-accent) 52%, var(--text-muted));
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.founder-system__channels,
.founder-system__agents {
  display: grid;
  width: 100%;
  list-style: none;
}

.founder-system__channels { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 560px; gap: var(--space-16); }
.founder-system__channels li {
  padding: var(--space-16);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 24%, var(--border-inset));
  border-radius: var(--radius-badge);
  background: color-mix(in srgb, var(--brand-accent) 4%, transparent);
  color: color-mix(in srgb, var(--brand-accent) 24%, var(--text-secondary));
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-align: center;
  text-transform: uppercase;
}

.founder-system__line { width: 2px; height: var(--space-24); background: color-mix(in srgb, var(--brand-accent) 62%, var(--border-faint)); }

.founder-system__ravi {
  display: grid;
  justify-items: center;
  gap: var(--space-8);
  min-width: 160px;
  padding: var(--space-16) var(--space-24);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 36%, var(--glass-border));
  border-radius: var(--radius-badge);
  background: color-mix(in srgb, var(--brand-accent) 5%, var(--surface-recessed));
  box-shadow: var(--highlight-top);
}
.founder-system__ravi span { color: var(--text-primary); font-family: var(--font-display); font-size: var(--text-heading-sm); font-weight: var(--weight-regular); letter-spacing: var(--tracking-display-sm); }
.founder-system__ravi small { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }

.founder-system__agents { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-16); }
.founder-system__agents li { display: grid; gap: var(--space-8); padding: var(--space-16); border-top: 1px solid color-mix(in srgb, var(--brand-accent) 18%, var(--border-faint)); }
.founder-system__agents strong { color: var(--text-primary); font-family: var(--font-display); font-size: var(--text-label); font-weight: var(--weight-regular); letter-spacing: var(--tracking-display-sm); }
.founder-system__agents span { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); }

/* A tese geral abre a seção inteira. Abaixo, o contexto da escolha e a
   conversa seguem lado a lado para que os gráficos continuem evidência dentro
   da resposta do RAVI, nunca um dashboard separado. */
.founder-demo__layout {
  display: grid;
  grid-template-columns: minmax(260px, .58fr) minmax(0, 1.42fr);
  align-items: center;
  gap: var(--space-80);
  padding-top: var(--space-16);
  border-top: 1px solid var(--border-faint);
}

.founder-demo__head { max-width: 780px; }
.founder-demo__support { display: grid; align-content: center; gap: var(--space-16); min-width: 0; }
.founder-demo__support .eyebrow { margin-bottom: 0; }
.founder-demo__support h3 { max-width: 18ch; color: var(--text-primary); font-family: var(--font-display); font-size: var(--type-card); font-weight: var(--weight-regular); letter-spacing: var(--tracking-display-sm); line-height: var(--leading-tight); text-wrap: balance; }
.founder-demo__support > p:last-child { max-width: 37ch; color: var(--text-secondary); font-size: var(--text-body); line-height: var(--leading-relaxed); }
.founder-demo__support > * { animation: founder-support-enter var(--motion-base) var(--ease-out) both; }
.founder-demo__experience {
  --founder-progress: 0%;
  min-width: 0;
}

.founder-demo__fallback { min-height: 360px; display: grid; place-content: center; gap: var(--space-16); padding: var(--space-40); border: 1px solid var(--border-faint); border-radius: var(--radius-panel); text-align: center; }
.founder-demo__fallback span { color: var(--brand-accent); font-family: var(--font-mono); font-size: var(--text-eyebrow); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.founder-demo__fallback p { max-width: 48ch; color: var(--text-muted); font-size: var(--text-body); }

.founder-demo__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin-bottom: var(--space-16); }
.founder-demo__tabs button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-8) 12px;
  border: 1px solid var(--glass-border);
  border-radius: var(--rounding-md);
  background: color-mix(in srgb, var(--surface-recessed) 68%, transparent);
  box-shadow: var(--highlight-top);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--motion-fast) var(--ease-smooth), background-color var(--motion-fast) var(--ease-smooth), color var(--motion-fast) var(--ease-smooth), transform var(--motion-fast) var(--ease-smooth);
}
.founder-demo__tabs button > i { width: 6px; height: 6px; flex: 0 0 auto; border: 1px solid var(--border-hairline); border-radius: var(--radius-pill); background: var(--surface-badge); transition: border-color var(--motion-fast) var(--ease-smooth), background-color var(--motion-fast) var(--ease-smooth); }
.founder-demo__tabs button > strong { font-size: var(--text-micro); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.founder-demo__tabs button:hover { border-color: var(--glass-border-hover); background: var(--glass-fill-hover); color: var(--text-primary); transform: translateY(-1px); }
.founder-demo__tabs button[aria-selected="true"] { border-color: var(--brand-action); background: var(--brand-action); box-shadow: var(--shadow-action); color: var(--text-inverse); }
.founder-demo__tabs button[aria-selected="true"] > i { border-color: var(--brand-accent); background: var(--brand-accent); }
.founder-demo__tabs button:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }

.founder-chat {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 18%, var(--glass-border));
  border-radius: var(--radius-panel);
  background:
    radial-gradient(circle at 88% 5%, color-mix(in srgb, var(--brand-accent) 8%, transparent), transparent 32%),
    color-mix(in srgb, var(--surface-recessed) 91%, transparent);
  box-shadow: var(--shadow-glass);
}

.founder-chat::before { position: absolute; inset: 0 auto auto 0; z-index: 3; width: var(--founder-progress); height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--brand-accent) 34%, transparent), var(--brand-accent)); content: ''; transition: width var(--motion-base) var(--ease-out); }

.founder-chat__header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); padding: var(--space-16) var(--space-24); border-bottom: 1px solid var(--border-faint); background: color-mix(in srgb, var(--surface-card) 52%, transparent); }
.founder-chat__channel { display: flex; align-items: center; gap: 12px; min-width: 0; }
.founder-chat__channel > span { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border: 1px solid color-mix(in srgb, var(--brand-accent) 36%, var(--border-faint)); border-radius: var(--radius-control); background: color-mix(in srgb, var(--brand-accent) 12%, var(--surface-recessed)); color: var(--brand-accent); font-family: var(--font-display); font-size: var(--text-label); font-weight: var(--weight-ultrabold); }
.founder-chat__channel > div { display: grid; gap: 3px; min-width: 0; }
.founder-chat__channel strong { overflow: hidden; color: var(--text-primary); font-size: var(--text-label-lg); font-weight: var(--weight-bold); text-overflow: ellipsis; white-space: nowrap; }
.founder-chat__channel small { overflow: hidden; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-nano); letter-spacing: var(--tracking-mono); text-overflow: ellipsis; white-space: nowrap; }

.founder-chat__controls { display: flex; gap: var(--space-8); flex: none; }
.founder-chat__controls button { min-height: 40px; padding: 0 12px; border: 1px solid var(--border-faint); border-radius: var(--radius-control); background: color-mix(in srgb, var(--surface-badge) 46%, transparent); color: var(--text-secondary); cursor: pointer; font: inherit; font-size: var(--text-micro); font-weight: var(--weight-semibold); transition: color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out); }
.founder-chat__controls button:hover:not(:disabled) { border-color: var(--glass-border-hover); background: var(--glass-fill-hover); color: var(--text-primary); }
.founder-chat__controls button:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.founder-chat__controls button:disabled { cursor: default; opacity: .42; }

.founder-chat__conversation { position: relative; height: 620px; overflow-x: hidden; overflow-y: auto; padding: var(--space-32) var(--space-24); scrollbar-color: color-mix(in srgb, var(--text-muted) 42%, transparent) transparent; scrollbar-width: thin; }
.founder-chat__conversation::-webkit-scrollbar { width: 5px; }
.founder-chat__conversation::-webkit-scrollbar-track { background: transparent; }
.founder-chat__conversation::-webkit-scrollbar-thumb { border-radius: var(--radius-pill); background: color-mix(in srgb, var(--text-muted) 42%, transparent); }
.founder-chat__stage:not(.is-shown) { display: none; }
.founder-chat__stage.is-shown { animation: founder-chat-enter var(--motion-base) var(--ease-out) both; }

.founder-chat__message { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: var(--space-16); }
.founder-chat__message--person { max-width: 580px; }
.founder-chat__message--agent { margin-top: var(--space-32); }
.founder-chat__avatar { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--border-faint); border-radius: var(--radius-control); color: var(--text-primary); font-size: var(--text-micro); font-weight: var(--weight-bold); }
.founder-chat__avatar--person { background: color-mix(in srgb, var(--text-muted) 22%, var(--surface-badge)); }
.founder-chat__avatar--agent { border-color: color-mix(in srgb, var(--brand-accent) 40%, var(--border-faint)); background: color-mix(in srgb, var(--brand-accent) 15%, var(--surface-recessed)); color: color-mix(in srgb, var(--brand-accent) 42%, var(--text-primary)); }
.founder-chat__message-body { min-width: 0; }
.founder-chat__message-body > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-8); margin-bottom: var(--space-8); }
.founder-chat__message-body > header strong { color: var(--text-primary); font-size: var(--text-label-lg); font-weight: var(--weight-bold); }
.founder-chat__message-body > header time { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-nano); }
.founder-chat__message-body > header > span,
.founder-chat__message-body > header > em { padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--brand-accent) 22%, var(--border-faint)); border-radius: var(--radius-pill); color: color-mix(in srgb, var(--brand-accent) 42%, var(--text-secondary)); font-family: var(--font-mono); font-size: var(--text-nano); font-style: normal; letter-spacing: var(--tracking-mono); }
.founder-chat__message-body > header > em { margin-left: auto; border-color: color-mix(in srgb, var(--status-live) 25%, var(--border-faint)); color: color-mix(in srgb, var(--status-live) 62%, var(--text-secondary)); }
.founder-chat__message-body > p { max-width: 58ch; color: var(--text-secondary); font-size: var(--text-label-lg); line-height: var(--leading-body); }
.founder-chat__message-body > p strong { color: var(--text-primary); font-weight: var(--weight-bold); }
.founder-chat__message-body > .founder-chat__stage + .founder-chat__stage { margin-top: var(--space-24); }
.founder-chat__copy--insight { padding-left: var(--space-16); border-left: 1px solid color-mix(in srgb, var(--brand-accent) 62%, var(--border-faint)); }

.founder-chat__analysis { position: relative; display: grid; gap: var(--space-16); overflow: hidden; margin: var(--space-24) 0 0 58px; padding: var(--space-16); border: 1px solid color-mix(in srgb, var(--brand-accent) 18%, var(--border-faint)); border-radius: var(--radius-card); background: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent 44%), color-mix(in srgb, var(--surface-card) 52%, transparent); box-shadow: var(--highlight-top); }
.founder-chat__analysis::before { position: absolute; inset: 0 auto 0 -42%; width: 38%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-accent) 9%, transparent), transparent); content: ''; transform: skewX(-16deg); animation: founder-analysis-sweep 2.8s var(--ease-smooth) infinite; }
.founder-chat__analysis-label { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: var(--tracking-mono); line-height: var(--leading-snug); }
.founder-chat__analysis-label strong { color: var(--text-primary); font-weight: var(--weight-bold); }
.founder-chat__analysis-label i { width: 7px; height: 7px; flex: none; border-radius: var(--radius-pill); background: var(--brand-accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-accent) 42%, transparent); animation: founder-chat-scan 1.2s var(--ease-smooth) infinite; }
.founder-chat__sources { position: relative; z-index: 1; }
.founder-chat__sources span { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--border-faint); border-radius: var(--radius-control); background: color-mix(in srgb, var(--surface-badge) 42%, transparent); color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-nano); letter-spacing: var(--tracking-mono); }
.founder-chat__sources span > i { width: 5px; height: 5px; flex: none; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--brand-accent) 48%, var(--surface-badge)); box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-accent) 28%, transparent); animation: founder-source-dot 1.8s var(--ease-smooth) infinite; }
.founder-chat__sources--signals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.founder-chat__sources--signals span { animation: founder-source-focus 2.2s var(--ease-smooth) infinite; }
.founder-chat__sources--signals span:nth-child(2),
.founder-chat__sources--signals span:nth-child(2) > i { animation-delay: 240ms; }
.founder-chat__sources--signals span:nth-child(3),
.founder-chat__sources--signals span:nth-child(3) > i { animation-delay: 480ms; }
.founder-chat__sources--hub { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: var(--space-24); }
.founder-chat__sources--hub > strong { position: relative; display: grid; min-height: 68px; place-items: center; border: 1px solid color-mix(in srgb, var(--brand-accent) 44%, var(--border-faint)); border-radius: var(--radius-control); background: radial-gradient(circle, color-mix(in srgb, var(--brand-accent) 15%, var(--surface-recessed)), var(--surface-recessed)); color: var(--text-primary); font-family: var(--font-display); font-size: var(--text-micro); font-weight: var(--weight-ultrabold); letter-spacing: var(--tracking-display-sm); box-shadow: 0 0 22px color-mix(in srgb, var(--brand-accent) 10%, transparent); animation: founder-hub-glow 2s var(--ease-smooth) infinite; }
.founder-chat__sources--hub > strong > i { position: absolute; top: 50%; left: 100%; width: var(--space-24); height: 1px; overflow: hidden; background: linear-gradient(90deg, var(--brand-accent), var(--border-faint)); }
.founder-chat__sources--hub > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.founder-chat__sources--hub span { animation: founder-source-focus 2.4s var(--ease-smooth) infinite; }
.founder-chat__sources--hub span:nth-child(2),
.founder-chat__sources--hub span:nth-child(2) > i { animation-delay: 220ms; }
.founder-chat__sources--hub span:nth-child(3),
.founder-chat__sources--hub span:nth-child(3) > i { animation-delay: 440ms; }
.founder-chat__sources--hub span:nth-child(4),
.founder-chat__sources--hub span:nth-child(4) > i { animation-delay: 660ms; }
.founder-chat__sources--connected { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
.founder-chat__sources--connected span { position: relative; text-align: center; animation: founder-source-focus 1.8s var(--ease-smooth) infinite; }
.founder-chat__sources--connected span:nth-child(2),
.founder-chat__sources--connected span:nth-child(2) > i { animation-delay: 300ms; }
.founder-chat__sources--connected span:nth-child(3),
.founder-chat__sources--connected span:nth-child(3) > i { animation-delay: 600ms; }
.founder-chat__sources--connected span + span::before { position: absolute; top: 50%; right: calc(100% + 1px); width: var(--space-24); height: 1px; background: linear-gradient(90deg, var(--border-faint), var(--brand-accent)); content: ''; }

.founder-chart { padding-block: var(--space-16) var(--space-24); border-top: 1px solid var(--border-faint); border-bottom: 1px solid var(--border-faint); }
.founder-chart__head { display: flex; justify-content: space-between; gap: var(--space-16); margin-bottom: var(--space-24); }
.founder-chart__head strong { color: var(--text-primary); font-size: var(--text-label); font-weight: var(--weight-bold); }
.founder-chart__head span { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-nano); letter-spacing: var(--tracking-mono); text-align: right; }
.founder-chart__horizontal-body { display: grid; gap: 12px; }
.founder-chart__row { display: grid; grid-template-columns: 58px minmax(0, 1fr) 42px; align-items: center; gap: 12px; }
.founder-chart__row > span:first-child { color: var(--text-secondary); font-size: var(--text-micro); }
.founder-chart__row > strong { color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-micro); font-weight: var(--weight-medium); text-align: right; }
.founder-chart__track { position: relative; height: 8px; overflow: visible; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface-badge) 70%, transparent); }
.founder-chart__marker { position: absolute; top: -4px; bottom: -4px; left: var(--founder-marker); z-index: 2; width: 1px; border-left: 1px dashed color-mix(in srgb, var(--text-muted) 56%, transparent); }
.founder-chart__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--text-muted) 52%, var(--surface-badge)); transition: width var(--motion-slow) var(--ease-out); }
.founder-chart__row--positive .founder-chart__fill { background: color-mix(in srgb, var(--status-live) 68%, var(--surface-badge)); }
.founder-chart__row--attention .founder-chart__fill { background: color-mix(in srgb, var(--brand-accent) 74%, var(--surface-badge)); }
.founder-chart.is-shown .founder-chart__fill { width: var(--founder-value); }

.founder-chart__vertical-body { height: 178px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--space-24); padding: var(--space-8) var(--space-24) 0; border-bottom: 1px solid var(--border-faint); }
.founder-chart__column { height: 100%; display: grid; grid-template-rows: 20px 1fr 28px; justify-items: center; gap: var(--space-8); }
.founder-chart__column > strong { color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-micro); font-weight: var(--weight-medium); }
.founder-chart__column > span:last-child { overflow: hidden; width: 100%; color: var(--text-muted); font-size: var(--text-nano); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.founder-chart__column-track { position: relative; width: min(64px, 70%); height: 100%; }
.founder-chart__column-track i { position: absolute; inset: auto 0 0; height: 0; border-radius: var(--rounding-sm) var(--rounding-sm) 0 0; background: linear-gradient(180deg, var(--brand-accent), color-mix(in srgb, var(--brand-accent) 30%, var(--surface-badge))); transition: height var(--motion-slow) var(--ease-out); }
.founder-chart.is-shown .founder-chart__column-track i { height: var(--founder-value); }

.founder-routine-card { overflow: hidden; border: 1px solid color-mix(in srgb, var(--brand-accent) 20%, var(--border-faint)); border-radius: var(--radius-card); background: color-mix(in srgb, var(--surface-card) 55%, transparent); box-shadow: var(--highlight-top); }
.founder-routine-card > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-16); border-bottom: 1px solid var(--border-faint); }
.founder-routine-card > header > div { display: grid; gap: 5px; }
.founder-routine-card > header strong { color: var(--text-primary); font-size: var(--text-label); font-weight: var(--weight-bold); }
.founder-routine-card > header div span { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-nano); letter-spacing: var(--tracking-mono); }
.founder-routine-card__badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--status-live) 28%, var(--border-faint)); border-radius: var(--radius-pill); color: color-mix(in srgb, var(--status-live) 65%, var(--text-secondary)); font-family: var(--font-mono); font-size: var(--text-nano); letter-spacing: var(--tracking-mono); text-transform: uppercase; }
.founder-routine-card__badge i { width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--status-live); }
.founder-routine-card ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; }
.founder-routine-card li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-8); padding: var(--space-16) 12px; }
.founder-routine-card li + li { border-left: 1px solid var(--border-faint); }
.founder-routine-card li + li::before { position: absolute; top: 50%; right: 100%; width: var(--space-16); height: 1px; background: color-mix(in srgb, var(--brand-accent) 48%, var(--border-faint)); content: ''; }
.founder-routine-card__index { color: var(--brand-accent); font-family: var(--font-mono); font-size: var(--text-nano); }
.founder-routine-card li div { display: grid; gap: 4px; }
.founder-routine-card li strong { color: var(--text-secondary); font-size: var(--text-micro); font-weight: var(--weight-semibold); }
.founder-routine-card li div span { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-nano); }

.founder-chart__funnel-body { display: grid; gap: 10px; }
.founder-chart__funnel-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: var(--space-16); }
.founder-chart__funnel-row div { display: flex; justify-content: space-between; gap: var(--space-8); }
.founder-chart__funnel-row span { color: var(--text-secondary); font-size: var(--text-micro); }
.founder-chart__funnel-row strong { color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-micro); font-weight: var(--weight-medium); }
.founder-chart__funnel-row > i { display: block; width: 0; height: 14px; border-radius: 0 var(--rounding-xs) var(--rounding-xs) 0; background: color-mix(in srgb, var(--text-muted) 48%, var(--surface-badge)); transition: width var(--motion-slow) var(--ease-out); }
.founder-chart__funnel-row--attention > i { background: linear-gradient(90deg, var(--brand-accent), color-mix(in srgb, var(--brand-accent) 36%, var(--surface-badge))); }
.founder-chart.is-shown .founder-chart__funnel-row > i { width: var(--founder-value); }

.founder-chat__footer { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: 10px var(--space-24); border-top: 1px solid var(--border-faint); background: color-mix(in srgb, var(--surface-card) 42%, transparent); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-nano); letter-spacing: var(--tracking-mono); }
.founder-chat__footer span:last-child { color: color-mix(in srgb, var(--brand-accent) 45%, var(--text-secondary)); text-align: right; }
.founder-demo__experience.is-looping .founder-chat__footer span:last-child { color: color-mix(in srgb, var(--status-live) 62%, var(--text-secondary)); }
.founder-demo__experience.is-looping .founder-chat__footer span:last-child::before { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: var(--radius-pill); background: var(--status-live); content: ''; box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-live) 26%, transparent); animation: founder-loop-pulse 1.6s var(--ease-smooth) infinite; }
.founder-demo__experience.is-paused *,
.founder-demo__experience.is-paused *::before,
.founder-demo__experience.is-paused *::after { animation-play-state: paused !important; }

@keyframes founder-chat-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes founder-support-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes founder-chat-scan { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-accent) 5%, transparent); opacity: .72; } }
@keyframes founder-source-focus { 50% { border-color: color-mix(in srgb, var(--brand-accent) 48%, var(--border-faint)); color: var(--text-primary); } }
@keyframes founder-source-dot { 50% { background: var(--brand-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-accent) 4%, transparent); } }
@keyframes founder-hub-glow { 50% { border-color: color-mix(in srgb, var(--brand-accent) 68%, var(--border-faint)); box-shadow: 0 0 30px color-mix(in srgb, var(--brand-accent) 16%, transparent); } }
@keyframes founder-analysis-sweep { 0% { transform: translateX(0) skewX(-16deg); } 68%, 100% { transform: translateX(390%) skewX(-16deg); } }
@keyframes founder-loop-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--status-live) 3%, transparent); opacity: .68; } }

.founder-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border-faint); list-style: none; }
.founder-stages li { position: relative; padding: var(--space-32) var(--space-32) var(--space-32) 0; }
.founder-stages li + li { padding-left: var(--space-32); border-left: 1px solid var(--border-faint); }
.founder-stages h3 { color: var(--text-primary); font-family: var(--font-display); font-size: var(--type-card); font-weight: var(--weight-regular); letter-spacing: var(--tracking-display-sm); }
.founder-stages p { margin-top: var(--space-16); color: var(--text-secondary); font-size: var(--text-body); }

.founder-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--border-faint); }
.founder-controls li { display: grid; grid-template-columns: 36px 1fr; gap: var(--space-16); padding: var(--space-24); border-bottom: 1px solid var(--border-faint); color: var(--text-secondary); font-size: var(--text-body); }
.founder-controls li:nth-child(odd) { border-right: 1px solid var(--border-faint); }
.founder-controls li:last-child { grid-column: span 2; border-right: 0; }
.founder-controls span { color: var(--brand-accent); font-family: var(--font-mono); font-size: var(--text-eyebrow); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); }

.founder-faq { max-width: 900px; margin-inline: auto; border-top: 1px solid var(--border-faint); }
.founder-faq details { border-bottom: 1px solid var(--border-faint); }
.founder-faq summary { display: flex; justify-content: space-between; gap: var(--space-24); padding: var(--space-24) 0; color: var(--text-primary); cursor: pointer; font-family: var(--font-display); font-size: var(--text-body-lg); font-weight: var(--weight-regular); letter-spacing: var(--tracking-display-sm); list-style: none; }
.founder-faq summary::-webkit-details-marker { display: none; }
.founder-faq summary::after { content: '+'; color: var(--brand-accent); font-family: var(--font-mono); }
.founder-faq details[open] summary::after { content: '−'; }
.founder-faq p { max-width: 70ch; padding: 0 0 var(--space-24); color: var(--text-secondary); font-size: var(--text-body); }

/* ══════════ 10.7 · RAVI ENTERPRISE ══════════
   A primeira leitura do Enterprise explica o RAVI por capacidades, não por
   uma sequência de etapas. Por isso, as seis capacidades não recebem índices:
   o card comunica um conjunto operável, e não um funil. A composição em três
   colunas e o ícone circular repetem a leitura direta dos cards de Sales. */
.page--enterprise { --hero-blinds-geometry: 3; }

.enterprise-hero {
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-block: calc(var(--nav-height) + var(--space-96)) var(--space-96);
}

.enterprise-hero__inner { display: block; }

.enterprise-hero__intro {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.enterprise-hero__intro .hero__title {
  max-width: 22ch;
  margin-inline: auto;
}

.enterprise-hero__intro .hero__lede {
  max-width: 62ch;
  margin-inline: auto;
}

.enterprise-capability {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 234px;
}

/* O azul do Enterprise assume o mesmo papel que o verde em Sales: reforça
   o produto sem fragmentar a seção em seis identidades cromáticas. */
.page--enterprise .enterprise-capability .card__icon {
  color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 8%, var(--surface-recessed));
  border-color: color-mix(in srgb, var(--brand-accent) 29%, var(--border-inset));
}

.page--enterprise .enterprise-capability:hover .card__icon {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--brand-accent) 22%, var(--surface-recessed));
  border-color: color-mix(in srgb, var(--brand-accent) 62%, var(--border-inset));
}

.enterprise-capability .card__head { margin-bottom: var(--space-24); }
.enterprise-capability .card__body { max-width: 52ch; }

/* O fluxo tem ordem real: cada etapa reduz a incerteza da seguinte. A grade
   com réguas contínuas faz o diagnóstico parecer parte da implementação, e
   não uma etapa comercial isolada. */
.enterprise-process__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
  list-style: none;
}

.enterprise-process__steps li {
  min-height: 248px;
  padding: var(--space-32) var(--space-24) var(--space-32) 0;
}

.enterprise-process__steps li + li {
  padding-left: var(--space-24);
  border-left: 1px solid var(--border-faint);
}

.enterprise-process__index {
  display: block;
  margin-bottom: var(--space-40);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-mono);
  color: var(--brand-accent);
}

.enterprise-process__steps h3 {
  margin-bottom: var(--space-16);
  font-family: var(--font-display);
  font-size: var(--type-card);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-display-sm);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  text-wrap: balance;
}

.enterprise-process__steps p { color: var(--text-secondary); }

/* ══════════ 10.8 · SOBRE ══════════
   Pessoas, tese e infraestrutura aparecem na mesma ordem em que a RBBT foi
   construída: time primeiro, depois a mudança de paradigma e, por fim, a
   plataforma que torna essa mudança operável. */
.about-hero .hero__title { max-width: 17ch; }
.about-hero .hero__lede { max-width: 60ch; }

/* Sem hero, esta é a primeira leitura da página. O espaço adicional deixa
   a navbar fixa respirar antes da tese; o centro reforça que os três pilares
   formam uma única posição institucional, não uma sequência de recursos. */
.about-layer {
  padding-top: calc(var(--nav-height) + var(--section-gap));
  text-align: center;
}
.about-layer .section__head { display: grid; justify-items: center; }

.about-team__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--border-faint);
}

.about-person {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: var(--space-24);
  padding: var(--space-32) 0;
  border-bottom: 1px solid var(--border-faint);
}

.about-person:nth-child(odd) { padding-right: var(--space-40); border-right: 1px solid var(--border-faint); }
.about-person:nth-child(even) { padding-left: var(--space-40); }
.about-person img { width: 128px; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-card); filter: grayscale(1); transition: filter var(--motion-base) var(--ease-smooth), transform var(--motion-base) var(--ease-spring); }
.about-person:hover img { filter: grayscale(0); transform: scale(1.025); }
.about-person h3 { margin-top: var(--space-8); color: var(--text-primary); font-family: var(--font-display); font-size: var(--type-card); font-weight: var(--weight-regular); letter-spacing: var(--tracking-display-sm); }
.about-person p:not(.eyebrow) { font-weight: var(--weight-light); }
.about-person blockquote { margin-top: var(--space-16); color: var(--text-primary); font-family: var(--font-display); font-size: var(--text-body-lg); font-weight: var(--weight-regular); letter-spacing: var(--tracking-display-sm); line-height: var(--leading-snug); }
.about-person blockquote + p { margin-top: var(--space-16); color: var(--text-secondary); font-size: var(--text-body); }

.about-spectrum__stages,
.about-layer__grid,
.about-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.about-spectrum__stages { border-top: 1px solid var(--border-faint); }
.about-spectrum__stages li { padding: var(--space-32) var(--space-32) var(--space-32) 0; }
.about-spectrum__stages li + li { padding-left: var(--space-32); border-left: 1px solid var(--border-faint); }
.about-spectrum__stages span,
.about-layer__grid span { color: var(--brand-accent); font-family: var(--font-mono); font-size: var(--text-eyebrow); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); }
.about-spectrum__stages h3,
.about-layer__grid h3,
.about-principles h3 { margin-top: var(--space-16); color: var(--text-primary); font-family: var(--font-display); font-size: var(--type-card); font-weight: var(--weight-regular); letter-spacing: var(--tracking-display-sm); }
/* A grade institucional não é uma sequência: sem os marcadores 01/02/03,
   o título abre cada coluna diretamente, sem uma lacuna decorativa acima. */
.about-layer__grid article > h3:first-child { margin-top: 0; }
.about-spectrum__stages p,
.about-layer__grid p,
.about-principles p { margin-top: var(--space-16); color: var(--text-secondary); font-size: var(--text-body); }

.about-prose { display: grid; gap: var(--space-24); max-width: 780px; margin: var(--space-64) auto 0; color: var(--text-secondary); font-size: var(--text-body-lg); }
.about-prose strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.about-prose--wide { max-width: 900px; }
.about-prose--wide h2 { max-width: 18ch; color: var(--text-primary); font-family: var(--font-display); font-size: var(--type-section); font-weight: var(--weight-regular); letter-spacing: var(--tracking-display-sm); line-height: var(--leading-snug); }

.about-layer__grid { border: 1px solid var(--glass-border); border-radius: var(--radius-panel); overflow: hidden; background: var(--glass-fill); box-shadow: var(--shadow-glass); }
.about-layer__grid article { padding: var(--space-32); }
.about-layer__grid article + article { border-left: 1px solid var(--border-faint); }

.about-manifesto { overflow: hidden; }
.about-manifesto__intro { max-width: 680px; }
.about-manifesto__intro h2 { max-width: 12ch; margin-top: var(--space-16); color: var(--text-primary); font-family: var(--font-display); font-size: var(--type-hero); font-weight: var(--weight-ultrabold); letter-spacing: var(--tracking-display-sm); line-height: var(--leading-tight); }
.about-manifesto__intro > p:not(.eyebrow) { margin-top: var(--space-24); color: var(--text-secondary); font-size: var(--text-body-lg); }
.about-manifesto__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-80); margin-top: var(--space-64); }
.about-manifesto__lists ul { display: grid; margin-top: var(--space-24); border-top: 1px solid var(--border-faint); }
.about-manifesto__lists li { display: grid; grid-template-columns: 16px 1fr; gap: var(--space-16); padding: var(--space-16) 0; border-bottom: 1px solid var(--border-faint); color: var(--text-secondary); font-size: var(--text-body); }
.about-manifesto__lists li::before { content: '·'; color: var(--brand-accent); font-family: var(--font-mono); }
.about-principles { margin-top: var(--space-80); border-top: 1px solid var(--border-faint); }
.about-principles article { padding: var(--space-32) var(--space-32) var(--space-32) 0; }
.about-principles article + article { padding-left: var(--space-32); border-left: 1px solid var(--border-faint); }
.about-not { margin-top: var(--space-80); }
.about-not ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-24); border-top: 1px solid var(--border-faint); }
.about-not li { padding: var(--space-24); border-bottom: 1px solid var(--border-faint); color: var(--text-secondary); font-size: var(--text-body); }
.about-not li:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--border-faint); }
.about-not li:nth-child(even) { padding-right: 0; padding-left: var(--space-32); }
.about-not strong { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* ══════════ 10.9 · CASES ══════════
   Os cases não começam por uma tese visual de produto. A marca da parceria
   assume o papel de título e abre uma única nota editorial centralizada. O
   fechamento troca o painel de CTA por uma composição dividida por réguas. */
.case-opening {
  padding-top: calc(var(--nav-height) + var(--section-gap));
  padding-bottom: var(--section-gap);
}

.case-opening::before { display: none; }
.case-opening + .case-prose::before { display: none; }
.case-opening__inner { max-width: 1120px; text-align: center; }

.case-opening__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 104px;
  margin-bottom: var(--space-56);
}

.case-opening__logo img {
  display: block;
  width: auto;
  max-width: min(100%, 340px);
  max-height: 72px;
  opacity: 0.86;
}

.page--case-undo .case-opening__logo img {
  max-height: 116px;
  filter: grayscale(1) invert(1);
  mix-blend-mode: screen;
}

.case-opening__title {
  max-width: 22ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: calc(var(--type-hero) * 0.8);
  font-weight: var(--weight-ultrabold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  text-align: center;
  text-wrap: balance;
}

.case-opening__lede {
  max-width: 56ch;
  margin: var(--space-24) auto 0;
  color: var(--text-secondary);
  font-size: var(--type-lede);
}

.case-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-16);
  margin-top: var(--space-64);
  text-align: center;
}

.case-metric {
  display: grid;
  grid-template-rows: auto auto;
  place-items: center;
  align-content: center;
  gap: 0;
  min-height: 0;
  padding: var(--space-32) var(--space-24) var(--space-24);
}

.case-metric__value {
  display: block;
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: calc(var(--type-hero) * 0.6);
  font-weight: var(--weight-ultrabold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
}

.case-metric__label {
  max-width: 29ch;
  font-weight: var(--weight-bold);
}

.case-prose__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-48);
  border-top: 1px solid var(--border-faint);
}

.case-prose__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-32);
  padding-top: var(--space-16);
}

.case-prose__meta .eyebrow { margin: 0; }
.case-prose__meta span { color: var(--text-secondary); font-size: var(--text-label); text-align: right; }

.case-prose__copy { max-width: 72ch; }
.case-prose__copy h2 {
  max-width: 18ch;
  margin-bottom: var(--space-32);
  font-family: var(--font-display);
  font-size: var(--type-section);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-display-sm);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  text-wrap: balance;
}
.case-prose__copy p { color: var(--text-secondary); font-size: var(--text-body-lg); }
.case-prose__copy p + p { margin-top: var(--space-24); }

.case-benchmark {
  max-width: 64ch;
  margin: var(--space-24) 0;
  padding-left: var(--space-16);
  border-left: 1px solid var(--brand-sales);
}

.case-benchmark p {
  color: var(--text-secondary);
  font-size: var(--text-body);
}

.case-benchmark strong { color: var(--text-primary); font-weight: var(--weight-bold); }

.case-benchmark cite {
  display: block;
  margin-top: var(--space-8);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-style: normal;
  letter-spacing: var(--tracking-eyebrow);
}

.page--case-nba .case-prose__copy h2,
.page--case-nba .case-closing .cta__title { font-weight: var(--weight-ultrabold); }

/* O diagrama resume a passagem dos dados da loja pela infraestrutura até
   as respostas de gestão. Ele antecede a demo para explicar a arquitetura
   em uma leitura rápida antes de mostrar a capacidade em uso. */
.nba-system {
  margin: var(--space-64) 0 0;
  padding: var(--space-32);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 22%, var(--glass-border));
  border-radius: var(--radius-panel);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--brand-accent) 9%, transparent), transparent 48%),
    var(--glass-fill);
  box-shadow: var(--shadow-glass);
}

.nba-system__head { padding-bottom: var(--space-24); border-bottom: 1px solid var(--border-faint); }
.nba-system__head .eyebrow { margin-bottom: var(--space-8); }
.nba-system__head h3 {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--type-card);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-display-sm);
  line-height: var(--leading-snug);
}

.nba-system__flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(40px, .3fr) 172px minmax(40px, .3fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-16);
  padding-top: var(--space-32);
}

.nba-system__group { min-width: 0; }
.nba-system__label {
  display: block;
  margin-bottom: var(--space-16);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.nba-system__group ul { display: grid; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.nba-system__group li {
  padding: var(--space-16);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--surface-recessed) 72%, transparent);
  color: var(--text-secondary);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
}

.nba-system__connector { height: 1px; background: color-mix(in srgb, var(--brand-accent) 52%, var(--border-faint)); }

.nba-system__hub {
  display: grid;
  justify-items: center;
  gap: var(--space-16);
  padding: var(--space-24) var(--space-16);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 42%, var(--glass-border));
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--brand-accent) 10%, var(--surface-recessed));
  box-shadow: var(--highlight-top);
  text-align: center;
}

.nba-system__hub .material-symbols-rounded { color: var(--brand-accent); font-size: 28px; }
.nba-system__hub strong {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-label-lg);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-display-sm);
  line-height: var(--leading-snug);
}

/* A mini demo é uma conversa de trabalho, não uma reprodução do Slack.
   O painel fechado estabelece o canal; relatório e raciocínio continuam
   dentro da resposta para que a experiência permaneça uma única história. */
.nba-demo-layout {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-80);
  padding-top: var(--space-16);
  border-top: 1px solid var(--border-faint);
}

.nba-demo-copy .eyebrow { margin-bottom: var(--space-24); }
.nba-demo-copy__note {
  padding-left: var(--space-16);
  border-left: 1px solid color-mix(in srgb, var(--brand-accent) 66%, var(--border-faint));
  font-size: var(--text-body) !important;
}

.nba-demo {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 18%, var(--glass-border));
  border-radius: var(--radius-panel);
  background:
    radial-gradient(circle at 85% 8%, color-mix(in srgb, var(--brand-accent) 8%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface-recessed) 90%, transparent);
  box-shadow: var(--shadow-glass);
}

.nba-demo__fallback { display: grid; gap: var(--space-8); min-height: 420px; place-content: center; padding: var(--space-32); text-align: center; }
.nba-demo__fallback strong { color: var(--text-primary); font-family: var(--font-display); font-size: var(--type-card); font-weight: var(--weight-regular); }
.nba-demo__fallback p { color: var(--text-secondary); font-size: var(--text-body); }

.nba-demo__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  min-height: 76px;
  padding: var(--space-16) var(--space-24);
  border-bottom: 1px solid var(--border-faint);
  background: color-mix(in srgb, var(--surface-card) 52%, transparent);
}

.nba-demo__channel { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nba-demo__channel > span { color: var(--brand-accent); font-family: var(--font-mono); font-size: var(--text-subheading); }
.nba-demo__channel > div { display: grid; gap: 3px; min-width: 0; }
.nba-demo__channel strong { overflow: hidden; color: var(--text-primary); font-size: var(--text-label-lg); font-weight: var(--weight-bold); text-overflow: ellipsis; white-space: nowrap; }
.nba-demo__channel small { overflow: hidden; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-nano); letter-spacing: var(--tracking-mono); text-overflow: ellipsis; white-space: nowrap; }

.nba-demo__controls { display: flex; gap: var(--space-8); flex: none; }
.nba-demo__controls button {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--surface-badge) 46%, transparent);
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  transition:
    color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out);
}
.nba-demo__controls button:hover:not(:disabled) { border-color: var(--glass-border-hover); background: var(--glass-fill-hover); color: var(--text-primary); }
.nba-demo__controls button:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.nba-demo__controls button:disabled { cursor: default; opacity: .42; }

.nba-demo__conversation {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-24);
  height: 664px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-32) var(--space-24);
  scrollbar-color: color-mix(in srgb, var(--text-muted) 42%, transparent) transparent;
  scrollbar-width: thin;
}
.nba-demo__conversation::-webkit-scrollbar { width: 5px; }
.nba-demo__conversation::-webkit-scrollbar-track { background: transparent; }
.nba-demo__conversation::-webkit-scrollbar-thumb { border-radius: var(--radius-pill); background: color-mix(in srgb, var(--text-muted) 42%, transparent); }

.nba-demo__message {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-16);
}

.nba-demo__avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-control);
  color: var(--text-primary);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
}
.nba-demo__avatar--person { background: color-mix(in srgb, var(--text-muted) 22%, var(--surface-badge)); }
.nba-demo__avatar--agent { border-color: color-mix(in srgb, var(--brand-accent) 40%, var(--border-faint)); background: color-mix(in srgb, var(--brand-accent) 15%, var(--surface-recessed)); color: color-mix(in srgb, var(--brand-accent) 42%, var(--text-primary)); }

.nba-demo__message-body { min-width: 0; }
.nba-demo__message-body > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-8); margin-bottom: var(--space-8); }
.nba-demo__message-body > header strong { color: var(--text-primary); font-size: var(--text-label-lg); font-weight: var(--weight-bold); }
.nba-demo__message-body > header time { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-nano); }
.nba-demo__message-body > header span {
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 22%, var(--border-faint));
  border-radius: var(--radius-pill);
  color: color-mix(in srgb, var(--brand-accent) 42%, var(--text-secondary));
  font-family: var(--font-mono);
  font-size: var(--text-nano);
  letter-spacing: var(--tracking-mono);
}
.nba-demo__message-body > p { max-width: 58ch; color: var(--text-secondary); font-size: var(--text-label-lg); line-height: var(--leading-body); }
.nba-demo__message-body > p strong { color: var(--text-primary); font-weight: var(--weight-bold); }

.nba-demo__analysis {
  position: relative;
  display: grid;
  gap: var(--space-16);
  overflow: hidden;
  margin-left: 58px;
  padding: var(--space-16);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 18%, var(--border-faint));
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent 44%),
    color-mix(in srgb, var(--surface-card) 52%, transparent);
  box-shadow: var(--highlight-top);
}
.nba-demo__analysis::before {
  position: absolute;
  inset: 0 auto 0 -42%;
  width: 38%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-accent) 9%, transparent), transparent);
  content: '';
  transform: skewX(-16deg);
  animation: nba-demo-analysis-sweep 2.8s var(--ease-smooth) infinite;
}
.nba-demo__analysis-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-mono);
  line-height: var(--leading-snug);
}
.nba-demo__analysis-label strong { color: var(--text-primary); font-weight: var(--weight-bold); }
.nba-demo__analysis-label > i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--brand-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-accent) 42%, transparent);
  animation: nba-demo-scan 1.2s var(--ease-smooth) infinite;
}
.nba-demo__analysis-sources {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
}
.nba-demo__analysis-sources span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--surface-badge) 42%, transparent);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-nano);
  letter-spacing: var(--tracking-mono);
  text-align: center;
  animation: nba-demo-source-focus 1.8s var(--ease-smooth) infinite;
}
.nba-demo__analysis-sources span > i {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--brand-accent) 48%, var(--surface-badge));
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-accent) 28%, transparent);
  animation: nba-demo-source-dot 1.8s var(--ease-smooth) infinite;
}
.nba-demo__analysis-sources span:nth-child(2),
.nba-demo__analysis-sources span:nth-child(2) > i { animation-delay: 300ms; }
.nba-demo__analysis-sources span:nth-child(3),
.nba-demo__analysis-sources span:nth-child(3) > i { animation-delay: 600ms; }
.nba-demo__analysis-sources span + span::before {
  position: absolute;
  top: 50%;
  right: calc(100% + 1px);
  width: var(--space-24);
  height: 1px;
  background: linear-gradient(90deg, var(--border-faint), var(--brand-accent));
  content: '';
}
.nba-demo.is-paused .nba-demo__analysis,
.nba-demo.is-paused .nba-demo__analysis::before,
.nba-demo.is-paused .nba-demo__analysis *,
.nba-demo.is-paused .nba-demo__analysis *::before { animation-play-state: paused !important; }

.nba-demo__report {
  margin-top: var(--space-24);
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
}
.nba-demo__report-head { display: flex; justify-content: space-between; gap: var(--space-16); padding: var(--space-16) 0; }
.nba-demo__report-head strong { color: var(--text-primary); font-size: var(--text-label); font-weight: var(--weight-bold); }
.nba-demo__report-head span { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-nano); letter-spacing: var(--tracking-mono); }
.nba-demo__report-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  align-items: center;
  gap: var(--space-24);
  padding: 12px 0;
  border-top: 1px solid var(--border-faint);
}
.nba-demo__report-copy { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-16); align-items: baseline; }
.nba-demo__report-copy strong { color: var(--text-secondary); font-size: var(--text-micro); font-weight: var(--weight-bold); }
.nba-demo__report-copy span { color: var(--text-muted); font-size: var(--text-micro); line-height: var(--leading-body); }
.nba-demo__report-copy span strong { color: var(--text-secondary); font-weight: var(--weight-bold); }
.nba-demo__report-row--emphasis .nba-demo__report-copy strong { color: var(--brand-accent); }
.nba-demo__report-row--emphasis .nba-demo__report-copy span { color: var(--text-secondary); }

/* Cada leitura recebe uma evidência visual própria. Os gráficos são pequenos
   e abstratos porque os dados são ilustrativos; eles explicam a natureza da
   resposta sem fingir a precisão de um dashboard operacional. */
.nba-demo__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 38px;
  overflow: hidden;
  border-left: 1px solid var(--border-faint);
}

.nba-demo__visual--trend svg { display: block; width: 92px; height: 34px; overflow: visible; }
.nba-demo__visual-guide { fill: none; stroke: var(--border-faint); stroke-width: 1; }
.nba-demo__visual-line {
  fill: none;
  stroke: var(--brand-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  stroke-dasharray: 130;
  animation: nba-demo-line var(--motion-slow) var(--ease-out) both;
}
.nba-demo__visual--trend circle { fill: var(--brand-accent); animation: nba-demo-pop var(--motion-base) var(--ease-out) both; animation-delay: 360ms; }

.nba-demo__visual--bars { align-items: end; gap: 7px; padding: 5px 14px; }
.nba-demo__visual--bars i {
  width: 9px;
  height: var(--nba-demo-bar);
  min-height: 5px;
  border-radius: var(--radius-pill) var(--radius-pill) 3px 3px;
  background: color-mix(in srgb, var(--text-muted) 62%, var(--surface-badge));
  transform-origin: bottom;
  animation: nba-demo-rise var(--motion-slow) var(--ease-out) both;
}
.nba-demo__visual--bars i:nth-child(2) { animation-delay: 90ms; }
.nba-demo__visual--bars i:nth-child(3) { animation-delay: 180ms; }
.nba-demo__visual--bars i:nth-child(4) { animation-delay: 270ms; }
.nba-demo__visual--bars i.is-attention { background: var(--brand-accent); }

.nba-demo__visual--status { gap: var(--space-8); }
.nba-demo__visual--status i {
  position: relative;
  width: 13px;
  height: 17px;
  border: 1px solid var(--border-hairline);
  border-radius: 3px;
  background: var(--surface-badge);
  animation: nba-demo-pop var(--motion-base) var(--ease-out) both;
}
.nba-demo__visual--status i::after { position: absolute; inset: 4px 3px auto; height: 1px; background: var(--text-muted); box-shadow: 0 4px 0 var(--text-muted); content: ''; opacity: .54; }
.nba-demo__visual--status i:nth-child(2) { animation-delay: 90ms; }
.nba-demo__visual--status i:nth-child(3) { animation-delay: 180ms; }
.nba-demo__visual--status i:nth-child(4) { animation-delay: 270ms; }
.nba-demo__visual--status i.is-ok { border-color: color-mix(in srgb, var(--text-secondary) 52%, var(--border-hairline)); }
.nba-demo__visual--status i.is-attention { border-color: var(--brand-accent); background: color-mix(in srgb, var(--brand-accent) 14%, var(--surface-recessed)); }

.nba-demo__visual--steps { gap: 0; padding-inline: 13px; }
.nba-demo__visual--steps i { position: relative; width: 10px; height: 10px; flex: none; border: 2px solid var(--brand-accent); border-radius: var(--radius-pill); background: var(--surface-recessed); animation: nba-demo-pop var(--motion-base) var(--ease-out) both; }
.nba-demo__visual--steps i + i { margin-left: 20px; }
.nba-demo__visual--steps i + i::before { position: absolute; top: 3px; right: 8px; width: 22px; height: 2px; background: color-mix(in srgb, var(--brand-accent) 48%, var(--border-faint)); content: ''; transform-origin: right; animation: nba-demo-connect var(--motion-base) var(--ease-out) both; }
.nba-demo__visual--steps i:nth-child(2),
.nba-demo__visual--steps i:nth-child(2)::before { animation-delay: 130ms; }
.nba-demo__visual--steps i:nth-child(3),
.nba-demo__visual--steps i:nth-child(3)::before { animation-delay: 260ms; }

.nba-demo.is-paused .nba-demo__visual * { animation-play-state: paused; }

/* O acompanhamento aprofunda a mesma conversa. A régua marca a mudança de
   pergunta sem transformar a segunda resposta em outro painel ou cartão. */
.nba-demo__message--followup {
  margin-top: var(--space-16);
  padding-top: var(--space-32);
  border-top: 1px solid var(--border-faint);
}

.nba-demo__comparison {
  margin-top: var(--space-24);
  padding-top: var(--space-16);
  border-top: 1px solid var(--border-faint);
}
.nba-demo__comparison figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-8);
}
.nba-demo__comparison figcaption strong { color: var(--text-primary); font-size: var(--text-label); font-weight: var(--weight-bold); }
.nba-demo__comparison figcaption span { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-nano); letter-spacing: var(--tracking-mono); text-align: right; }
.nba-demo__comparison-row {
  display: grid;
  grid-template-columns: minmax(130px, .82fr) minmax(112px, 1fr);
  align-items: center;
  gap: var(--space-24);
  min-height: 62px;
  border-top: 1px solid var(--border-faint);
}
.nba-demo__comparison-label { display: grid; gap: 3px; min-width: 0; }
.nba-demo__comparison-label strong { overflow: hidden; color: var(--text-secondary); font-size: var(--text-micro); font-weight: var(--weight-bold); text-overflow: ellipsis; white-space: nowrap; }
.nba-demo__comparison-label strong span { margin-right: var(--space-8); color: var(--brand-accent); font-family: var(--font-mono); font-size: var(--text-nano); letter-spacing: var(--tracking-mono); }
.nba-demo__comparison-label small { color: var(--text-muted); font-size: var(--text-nano); }
.nba-demo__comparison-track {
  position: relative;
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-badge) 80%, transparent);
}
.nba-demo__comparison-track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--nba-demo-product);
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand-accent) 46%, var(--text-muted)), var(--brand-accent));
  transform-origin: left;
  animation: nba-demo-product var(--motion-slow) var(--ease-out) both;
}
.nba-demo.is-paused .nba-demo__comparison * { animation-play-state: paused; }

.nba-demo__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-height: 48px;
  padding: var(--space-8) var(--space-24);
  border-top: 1px solid var(--border-faint);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-nano);
  letter-spacing: var(--tracking-mono);
}

/* Etapas futuras saem do fluxo até a sua entrada. Isso preserva a altura do
   card de raciocínio e impede que respostas invisíveis comprimam a conversa. */
.nba-demo [data-nba-step]:not(.is-shown) { display: none; }
.nba-demo [data-nba-step].is-shown { animation: nba-demo-enter var(--motion-base) var(--ease-out) both; }

@keyframes nba-demo-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes nba-demo-scan {
  55% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-accent) 0%, transparent); opacity: .62; }
}

@keyframes nba-demo-source-focus {
  50% { border-color: color-mix(in srgb, var(--brand-accent) 48%, var(--border-faint)); color: var(--text-primary); }
}

@keyframes nba-demo-source-dot {
  50% { background: var(--brand-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-accent) 4%, transparent); }
}

@keyframes nba-demo-analysis-sweep {
  0% { transform: translateX(0) skewX(-16deg); }
  68%, 100% { transform: translateX(390%) skewX(-16deg); }
}

@keyframes nba-demo-line {
  from { stroke-dashoffset: 130; }
  to { stroke-dashoffset: 0; }
}

@keyframes nba-demo-rise {
  from { opacity: .28; transform: scaleY(.12); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes nba-demo-pop {
  from { opacity: 0; transform: scale(.55); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes nba-demo-connect {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes nba-demo-product {
  from { opacity: .24; transform: scaleX(.08); }
  to { opacity: 1; transform: scaleX(1); }
}

.case-prose--nba { padding-top: 0; }
.case-prose--nba::before { display: none; }

.case-prose--placeholder { padding-top: 0; }
.case-prose--placeholder::before { display: none; }
.case-media-placeholder {
  display: grid;
  place-items: center;
  min-height: 420px;
  margin-top: var(--space-64);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-panel);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--brand-accent) 9%, var(--surface-recessed)),
      var(--glass-fill));
  box-shadow: var(--shadow-glass);
}

.case-media-placeholder span {
  display: block;
  max-width: 68ch;
  padding: var(--space-32);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  line-height: var(--leading-body);
  text-align: center;
  text-transform: uppercase;
}

/* A distribuição de horário não precisa de uma ilustração: as duas faixas
   tornam a proporção legível de imediato e deixam claro que a demanda segue
   presente além do turno comercial. */
.case-demand-share {
  margin: var(--space-64) 0 0;
  padding-block: var(--space-24) var(--space-32);
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
}

.case-demand-share__eyebrow {
  margin: 0 0 var(--space-24);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.case-demand-share__bar {
  display: flex;
  min-height: 174px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--surface-recessed);
}

.case-demand-share__segment {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: var(--space-24);
}

.case-demand-share__segment--outside {
  color: var(--surface-canvas);
  background: var(--brand-sales);
}

.case-demand-share__segment--inside {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface-recessed) 85%, var(--text-primary));
}

.case-demand-share__segment strong {
  font-family: var(--font-display);
  font-size: clamp(var(--text-heading), 4.2vw, var(--text-heading-lg));
  font-weight: var(--weight-ultrabold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
}

.case-demand-share__segment span {
  font-size: var(--text-label-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.case-demand-share figcaption {
  margin-top: var(--space-20);
  color: var(--text-secondary);
  font-size: var(--text-body);
}

/* A comparação usa o mesmo eixo de leitura nas duas rotas. Assim, a exceção
   humana não vira uma coluna isolada: ela mostra exatamente onde o percurso
   se alonga em relação ao fluxo que segue de ponta a ponta com a RBBT. */
.case-autonomy-flow {
  margin: var(--space-64) 0 0;
  padding-block: var(--space-24) var(--space-32);
}

.case-autonomy-flow__lanes {
  display: grid;
  gap: var(--space-48);
}

.case-autonomy-flow__lane {
  min-width: 0;
}

.case-autonomy-flow__lane--exception {
  padding-top: var(--space-40);
  border-top: 1px solid var(--border-faint);
}

.case-autonomy-flow__lane-heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-16);
  margin-bottom: var(--space-32);
}

.case-autonomy-flow__lane-heading strong {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--type-section);
  font-weight: var(--weight-ultrabold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-display-sm);
  line-height: var(--leading-tight);
}

.case-autonomy-flow__lane-heading span {
  color: var(--text-secondary);
  font-size: var(--text-label);
}

.case-autonomy-flow__lane--primary .case-autonomy-flow__lane-heading strong { color: var(--brand-sales); }

.case-autonomy-flow__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-autonomy-flow__steps li {
  position: relative;
  min-width: 0;
  padding-top: calc(var(--space-24) + var(--space-8));
  color: var(--text-primary);
  font-size: var(--text-label-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.case-autonomy-flow__steps li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-muted);
}

.case-autonomy-flow__steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 13px;
  width: calc(100% - 6px);
  height: 1px;
  background: var(--border-hairline);
}

.case-autonomy-flow__lane--primary .case-autonomy-flow__steps li::before { background: var(--brand-sales); }

.case-autonomy-flow__step--finish { grid-column: span 2; }

.case-autonomy-flow__note {
  max-width: 60ch;
  margin: var(--space-40) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-body);
}

/* O case mostra a vitrine como consequência natural da conversa. O painel não
   replica uma interface de terceiros: transforma a evidência real em uma
   leitura editorial da decisão, da orientação e dos produtos encontrados. */
.case-chat {
  max-width: 1152px;
  margin: var(--space-64) auto 0;
  padding: var(--space-32);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-panel);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, color-mix(in srgb, var(--brand-sales) 9%, var(--surface-recessed)) 70%, transparent),
      color-mix(in srgb, var(--glass-fill) 70%, transparent));
  box-shadow: var(--shadow-glass);
}

.case-chat__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-24);
  padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--border-faint);
}

.case-chat__header .eyebrow { margin-bottom: var(--space-8); }

.case-chat__header h3 {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--type-card);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-display-sm);
  line-height: var(--leading-snug);
}

.case-chat__source {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.case-chat__source i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-sales);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-sales) 14%, transparent);
}

.case-chat__thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin-top: var(--space-32);
}

.case-chat__message {
  width: fit-content;
  max-width: min(82%, 660px);
  padding: var(--space-16) var(--space-16) var(--space-8);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--surface-card) 88%, transparent);
}

.case-chat__message p {
  color: var(--text-primary);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.case-chat__message time {
  display: block;
  margin-top: var(--space-8);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-nano);
  text-align: right;
}

.case-chat__message--rbbt {
  align-self: flex-end;
  border-color: color-mix(in srgb, var(--brand-sales) 28%, var(--border-faint));
  background: color-mix(in srgb, var(--brand-sales) 13%, var(--surface-card));
}

.case-chat__message--catalog {
  width: min(78%, 640px);
  max-width: none;
}

.case-chat__products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  margin-top: var(--space-16);
}

.case-chat__product {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
  border-radius: var(--radius-control);
  background: var(--text-primary);
}

.case-chat__product img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.case-chat__product p {
  padding: var(--space-16);
  color: var(--text-inverse);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

/* A mini demo da Undo usa a conversa como superfície principal. A consulta
   ao Shopify entra no próprio histórico como evidência operacional e muda
   de estado sem abrir um segundo painel ou interromper a leitura. */
.undo-demo {
  overflow: hidden;
  padding: 0;
}

.undo-demo .case-chat__header {
  align-items: center;
  padding: var(--space-24) var(--space-32);
}

.undo-demo__header-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-24);
}

.undo-demo__controls {
  display: flex;
  gap: var(--space-8);
}

.undo-demo__controls button {
  min-width: 72px;
  min-height: 40px;
  padding-inline: 12px;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--surface-badge) 46%, transparent);
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  transition:
    color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out);
}

.undo-demo__controls button:hover:not(:disabled) {
  border-color: var(--glass-border-hover);
  background: var(--glass-fill-hover);
  color: var(--text-primary);
}

.undo-demo__controls button:focus-visible { outline: 2px solid var(--brand-sales); outline-offset: 2px; }
.undo-demo__controls button:disabled { cursor: default; opacity: .42; }

.undo-demo__conversation {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 560px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-32);
  scrollbar-color: color-mix(in srgb, var(--text-muted) 42%, transparent) transparent;
  scrollbar-width: thin;
}

.undo-demo__conversation::-webkit-scrollbar { width: 5px; }
.undo-demo__conversation::-webkit-scrollbar-track { background: transparent; }
.undo-demo__conversation::-webkit-scrollbar-thumb { border-radius: var(--radius-pill); background: color-mix(in srgb, var(--text-muted) 42%, transparent); }

.undo-demo__message {
  position: relative;
  width: fit-content;
  max-width: min(72%, 660px);
  padding: 12px var(--space-16) var(--space-8);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--surface-card) 88%, transparent);
}

.undo-demo__message--agent {
  align-self: flex-end;
  border-color: color-mix(in srgb, var(--brand-sales) 30%, var(--border-faint));
  background: color-mix(in srgb, var(--brand-sales) 13%, var(--surface-card));
}

.undo-demo__message--client + .undo-demo__message--client { margin-top: -6px; }

.undo-demo__message-name {
  display: block;
  margin-bottom: 4px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-nano);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-mono);
}

.undo-demo__message--agent .undo-demo__message-name { color: color-mix(in srgb, var(--brand-sales) 68%, var(--text-secondary)); }

.undo-demo__message > p {
  color: var(--text-primary);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

.undo-demo__message time {
  display: block;
  margin-top: 5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-nano);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.undo-demo__typing {
  display: flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  min-width: 58px;
  min-height: 42px;
  padding: 0 var(--space-16);
  border: 1px solid color-mix(in srgb, var(--brand-sales) 28%, var(--border-faint));
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--brand-sales) 11%, var(--surface-card));
}

.undo-demo__typing--agent { align-self: flex-end; }

.undo-demo__typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-sales);
  opacity: .38;
  animation: undo-demo-typing 1s var(--ease-smooth) infinite;
}

.undo-demo__typing i:nth-child(2) { animation-delay: 140ms; }
.undo-demo__typing i:nth-child(3) { animation-delay: 280ms; }

.undo-demo__catalog {
  position: relative;
  align-self: center;
  width: min(88%, 760px);
  overflow: hidden;
  padding: var(--space-20);
  border: 1px solid color-mix(in srgb, var(--brand-sales) 24%, var(--glass-border));
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--brand-sales) 14%, transparent), transparent 48%),
    color-mix(in srgb, var(--surface-recessed) 90%, transparent);
  box-shadow: var(--highlight-top);
}

.undo-demo__catalog::before {
  position: absolute;
  inset: 0 auto 0 -32%;
  width: 28%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-sales) 12%, transparent), transparent);
  content: '';
  opacity: 0;
  transform: skewX(-16deg);
}

.undo-demo__catalog.is-querying::before {
  opacity: 1;
  animation: undo-demo-catalog-sweep 2.4s var(--ease-smooth) infinite;
}

.undo-demo__catalog > header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-16);
}

.undo-demo__catalog-brand {
  display: grid;
  height: 40px;
  place-items: center;
  padding: 7px 10px;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--text-primary) 94%, transparent);
}

.undo-demo__catalog-brand img { display: block; width: 72px; height: auto; }
.undo-demo__catalog header > div { display: grid; gap: 3px; min-width: 0; }

.undo-demo__catalog header span,
.undo-demo__catalog header strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.undo-demo__catalog header span { color: var(--text-secondary); font-size: var(--text-label); }
.undo-demo__catalog header strong { color: var(--brand-sales); font-family: var(--font-mono); font-size: var(--text-nano); letter-spacing: var(--tracking-mono); text-transform: uppercase; }

.undo-demo__catalog-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand-sales);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-sales) 36%, transparent);
}

.undo-demo__catalog.is-querying .undo-demo__catalog-pulse { animation: undo-demo-catalog-pulse 1.3s var(--ease-smooth) infinite; }

.undo-demo__catalog > p {
  position: relative;
  z-index: 1;
  margin-top: var(--space-16);
  padding: 10px 12px;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--surface-badge) 42%, transparent);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-nano);
  letter-spacing: var(--tracking-mono);
  line-height: var(--leading-snug);
}

.undo-demo__catalog ol {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-16);
  margin: var(--space-16) 0 0;
  padding: 0;
  list-style: none;
}

.undo-demo__catalog li {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-control);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-nano);
  letter-spacing: var(--tracking-mono);
}

.undo-demo__catalog li > i {
  position: relative;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--text-muted);
}

.undo-demo__catalog li + li::before {
  position: absolute;
  top: 50%;
  right: calc(100% + 1px);
  width: var(--space-16);
  height: 1px;
  background: var(--border-hairline);
  content: '';
}

.undo-demo__catalog.is-querying li {
  animation: undo-demo-catalog-stage 2.4s var(--ease-smooth) infinite;
  animation-delay: calc(var(--undo-stage) * 420ms);
}

.undo-demo__catalog.is-querying li > i {
  animation: undo-demo-catalog-dot 2.4s var(--ease-smooth) infinite;
  animation-delay: calc(var(--undo-stage) * 420ms);
}

.undo-demo__catalog.is-resolved li { border-color: color-mix(in srgb, var(--brand-sales) 26%, var(--border-faint)); color: var(--text-secondary); }
.undo-demo__catalog.is-resolved li > i { background: var(--brand-sales); }

.undo-demo__message--products {
  width: min(84%, 740px);
  max-width: none;
}

.undo-demo__products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  margin-top: var(--space-16);
}

.undo-demo__product {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
  border-radius: var(--radius-control);
  background: var(--text-primary);
}

.undo-demo__product img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.undo-demo__product > div { display: grid; gap: 5px; padding: 12px var(--space-16); }
.undo-demo__product strong { color: var(--text-inverse); font-size: var(--text-label); line-height: var(--leading-snug); }
.undo-demo__product span { display: flex; align-items: center; gap: 6px; color: color-mix(in srgb, var(--text-inverse) 66%, transparent); font-family: var(--font-mono); font-size: var(--text-nano); }
.undo-demo__product span i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-sales); }

.undo-demo__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  min-height: 50px;
  padding: 10px var(--space-32);
  border-top: 1px solid var(--border-faint);
  background: color-mix(in srgb, var(--surface-card) 52%, transparent);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-nano);
  letter-spacing: var(--tracking-mono);
}

.undo-demo__progress { display: flex; align-items: center; justify-content: flex-end; gap: 12px; text-align: right; }
.undo-demo__progress > i { display: none; width: 64px; height: 3px; overflow: hidden; border-radius: var(--radius-pill); background: var(--border-faint); }
.undo-demo__progress > i b { display: block; width: var(--undo-countdown, 0%); height: 100%; border-radius: inherit; background: var(--brand-sales); transition: width 1s linear; }
.undo-demo.is-complete .undo-demo__progress > i { display: block; }

.undo-demo [data-undo-step]:not(.is-shown) { display: none; }
.undo-demo [data-undo-step].is-shown { animation: undo-demo-enter var(--motion-base) var(--ease-out) both; }

.undo-demo.is-catalog-active .case-chat__source { color: var(--text-primary); }
.undo-demo.is-catalog-active .case-chat__source i { animation: undo-demo-catalog-pulse 1.3s var(--ease-smooth) infinite; }
.undo-demo.is-paused *,
.undo-demo.is-paused *::before,
.undo-demo.is-paused *::after { animation-play-state: paused !important; }

.undo-demo__fallback { min-height: 420px; padding: var(--space-32); color: var(--text-secondary); text-align: center; }

@keyframes undo-demo-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes undo-demo-typing {
  50% { opacity: 1; transform: translateY(-2px); }
}

@keyframes undo-demo-catalog-sweep {
  0% { transform: translateX(0) skewX(-16deg); }
  72%, 100% { transform: translateX(470%) skewX(-16deg); }
}

@keyframes undo-demo-catalog-pulse {
  55% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--brand-sales) 0%, transparent); opacity: .72; }
}

@keyframes undo-demo-catalog-stage {
  42% { border-color: color-mix(in srgb, var(--brand-sales) 54%, var(--border-faint)); color: var(--text-primary); }
}

@keyframes undo-demo-catalog-dot {
  42% { background: var(--brand-sales); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-sales) 5%, transparent); }
}

/* A Undo fecha o case com um convite para uma experiência real. Por isso,
   preserva uma composição editorial e o cartão que abre o WhatsApp, em vez
   do painel de conversão usado nas páginas de produto. */
.page--case-undo .case-closing { padding-top: 0; }
.page--case-undo .case-closing__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-80);
  padding-block: var(--space-64);
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
}

.page--case-undo .case-closing__grid .eyebrow { margin-bottom: var(--space-24); }
.page--case-undo .case-closing .cta__title { max-width: 13ch; }
.page--case-undo .case-closing__action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: var(--space-64);
  border-left: 1px solid var(--border-faint);
}

.page--case-undo .case-closing .cta__lede { max-width: 39ch; margin: 0; }

.case-iris-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  width: min(100%, 420px);
  margin-top: var(--space-32);
  padding: var(--space-24);
  border-radius: var(--radius-card);
  background: var(--brand-sales);
  color: var(--surface-canvas);
  box-shadow: 0 18px 36px color-mix(in srgb, var(--brand-sales) 26%, transparent);
  transition:
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out);
}

.case-iris-cta:hover {
  background: color-mix(in srgb, var(--brand-sales) 82%, var(--text-primary));
  box-shadow: 0 24px 46px color-mix(in srgb, var(--brand-sales) 34%, transparent);
  transform: translateY(-3px);
}

.case-iris-cta:active {
  transform: translateY(0) scale(0.985);
  transition-duration: var(--motion-press);
}

.case-iris-cta__copy { display: grid; gap: var(--space-8); }
.case-iris-cta__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.case-iris-cta__status i {
  width: 8px;
  height: 8px;
  border: 1px solid color-mix(in srgb, var(--surface-canvas) 58%, transparent);
  border-radius: 50%;
  background: var(--surface-canvas);
}

.case-iris-cta strong {
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: var(--weight-ultrabold);
  letter-spacing: var(--tracking-display-sm);
  line-height: var(--leading-tight);
}

.case-iris-cta__arrow {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--weight-ultrabold);
  line-height: 1;
}

/* ══════════ 11 · PROVA SOCIAL ══════════ */

.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
}

.proof-cell {
  display: grid;
  place-items: center;
  gap: var(--space-8);
  min-height: 120px;
  padding: var(--space-24);
  text-align: center;
}

/* Sem superfície de vidro: o único ritmo visual é a régua vertical sutil
   entre marcas. A primeira célula abre a faixa sem linha antes dela. */
.proof-cell + .proof-cell { border-left: 1px solid var(--border-faint); }

.proof-cell img {
  max-height: 40px;
  width: auto;
  opacity: 0.75;
  filter: grayscale(1);
  transform: var(--proof-logo-offset, none);
  transition:
    opacity var(--motion-base) var(--ease-out),
    filter var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-spring);
}
.proof-cell:hover img {
  opacity: 1;
  filter: grayscale(0);
  transform: var(--proof-logo-offset, none) scale(1.04);
}

/* A marca vertical da NBA tem uma proporção muito mais estreita que as
   demais. Uma altura própria equilibra sua área visual sem esticá-la. */
.proof-cell--nba img { max-height: 86px; }

/* Ajustes ópticos por marca, sempre preservando sua proporção nativa. */
.proof-cell--camys img { max-height: calc(34px * .9); }
.proof-cell--undo img {
  max-height: 90px;
  filter: grayscale(1) invert(1);
  mix-blend-mode: screen;
}
.proof-cell--base img {
  max-height: 72px;
  filter: grayscale(1);
  mix-blend-mode: normal;
}

/* Os arquivos de X-ONE e Growth carregam margens internas assimétricas.
   Este ajuste reposiciona apenas a área desenhada, sem alterar a grade. */
.proof-cell--growth { --proof-logo-offset: translateX(20px); }

/* Undo chega em preto sobre branco, e Base Essencial em branco sobre azul.
   Os blends preservam os arquivos fornecidos, mas os integram ao canvas escuro
   sem introduzir fundos retangulares ou uma nova cor na faixa de clientes. */
.proof-cell--undo:hover img { filter: grayscale(1) invert(1); }
.proof-cell--base:hover img { filter: grayscale(1); }

.proof-cell__placeholder {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-iron);
}

/* A credencial fica após as marcas de clientes, pois reforça confiança sem
   se passar por prova social. O blend elimina o fundo claro do arquivo e
   mantém o selo no mesmo material monocromático da faixa acima. */
.tech-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-16);
  margin-top: var(--space-48);
  text-align: center;
}

.tech-provider__copy {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.tech-provider img {
  display: block;
  width: auto;
  height: 58px;
  max-width: 180px;
  object-fit: contain;
  filter: grayscale(1) invert(1);
  mix-blend-mode: screen;
  opacity: 0.78;
}

/* Único "numeric stat callout" do site — o DESIGN.md pede SF Pro Text aqui */
.proof-cell__metric {
  font-family: var(--font-numeric);
  font-size: var(--text-heading);
  font-weight: var(--weight-medium);
  line-height: 1.15;
  color: var(--text-primary);
}

.proof-cell__caption {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}


/* ══════════ 12 · INTEGRAÇÕES E PAINEL DE CROSS-SELL ══════════ */

/* Painel de cross-sell — CTA secundário, mais discreto que .cta__panel
   (sem glow, sem padding gigante). Título + corpo de um lado, botão
   fantasma do outro. */
.promo-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32);
  padding: var(--space-40);
  border-radius: var(--radius-panel);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  transition:
    border-color var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out);
}
.promo-panel:hover {
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-glass-hover);
}

.promo-panel__title {
  font-family: var(--font-display);
  font-size: var(--type-card);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-display-sm);
  color: var(--text-primary);
}

.promo-panel__body {
  margin-top: var(--space-8);
  color: var(--text-secondary);
  max-width: 46ch;
}

.promo-panel .btn { flex: none; }


/* ══════════ 13 · CTA ══════════ */

.cta {
  position: relative;
  --cta-accent: var(--brand-accent);
  padding-block: var(--section-gap);
}

.cta__panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  align-items: center;
  gap: var(--space-80);
  padding: var(--space-64);
  border-radius: var(--radius-panel);
  background:
    linear-gradient(105deg,
      color-mix(in srgb, var(--cta-accent) 12%, transparent),
      transparent 56%),
    var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
}

.cta__panel::after {
  content: '';
  position: absolute;
  top: var(--space-16);
  left: var(--space-64);
  width: min(22%, 208px);
  height: 2px;
  background: var(--cta-accent);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 20px color-mix(in srgb, var(--cta-accent) 44%, transparent);
}

.cta__copy,
.cta__action {
  position: relative;
  z-index: 1;
}

.cta__copy .eyebrow {
  margin-bottom: var(--space-16);
  color: color-mix(in srgb, var(--cta-accent) 72%, var(--text-primary));
}

.cta__action {
  display: grid;
  justify-items: start;
  gap: var(--space-24);
  padding-left: var(--space-40);
  border-left: 1px solid color-mix(in srgb, var(--cta-accent) 28%, var(--glass-border));
}

.cta__title {
  font-family: var(--font-display);
  font-size: var(--type-section);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display-sm);
  max-width: 16ch;
  text-wrap: pretty;
}

/* Variante em negrito — mesmo raciocínio de .section__title--strong: Ultrabold
   (800), não um 600/700 sintético. sales.html mantém o Light padrão. */
.cta__title--strong { font-weight: var(--weight-ultrabold); }

.cta__lede {
  font-size: var(--text-body);
  color: var(--text-secondary);
  max-width: 30ch;
  margin: 0;
}

.cta .btn--filled {
  background: var(--cta-accent);
  color: var(--surface-canvas);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--cta-accent) 25%, transparent);
}

.cta .btn--filled:hover {
  background: color-mix(in srgb, var(--cta-accent) 84%, var(--text-primary));
  box-shadow: 0 16px 34px color-mix(in srgb, var(--cta-accent) 33%, transparent);
}

.page--case-undo .case-closing { --cta-accent: var(--brand-sales); }


/* ══════════ 14 · RODAPÉ ══════════ */

.footer {
  position: relative;
  padding-block: var(--space-40);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

.footer .meta-strip { justify-content: center; }

.footer__social {
  display: flex;
  gap: var(--space-16);
  font-size: var(--text-micro);
  color: var(--text-secondary);
}
.footer__social a:hover { color: var(--text-primary); }
.footer__social:empty { display: none; }


/* ══════════ 15 · ANIMAÇÃO ══════════ */

/* fadeInUp — mesma curva e distância do hero do raycast.com */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--motion-slow) var(--ease-quint),
    transform var(--motion-slow) var(--ease-quint);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.js .reveal:nth-child(2) { transition-delay: 90ms; }
.js .reveal:nth-child(3) { transition-delay: 180ms; }
.js .reveal:nth-child(4) { transition-delay: 270ms; }
.js .reveal:nth-child(5) { transition-delay: 360ms; }
.js .reveal:nth-child(6) { transition-delay: 450ms; }

@keyframes nav-slide-in {
  from { opacity: 0; transform: translateY(-12%); }
  to   { opacity: 1; transform: none; }
}

@keyframes ambient-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 2%, 0) scale(1.08); }
}

@keyframes wash-breathe {
  from { opacity: 0.42; }
  to   { opacity: 0.62; }
}

/* Deriva dos feixes. O X é o deslize ao longo do próprio feixe; o Y
   é o afastamento lateral (o eixo já vem girado pelo `rotate`). Os
   valores de Y são o que espalha as barras em faixas paralelas —
   mudá-los reposiciona a composição inteira. Durações primas entre
   si (26/22/31/37s) para o conjunto nunca repetir o mesmo arranjo. */
/* O afastamento lateral é em vmax, não em vw, de propósito: o quanto
   as faixas precisam se espalhar depende da MAIOR dimensão da tela, não
   da largura. Em vw elas encolhiam junto com a viewport no retrato e
   colapsavam numa mancha só. No desktop (paisagem) vmax == vw, então
   a composição larga não muda. */
@keyframes beam-drift-a {
  from { transform: translate3d(-4vh, -18vmax, 0); }
  to   { transform: translate3d(6vh, -13vmax, 0); }
}

@keyframes beam-drift-b {
  from { transform: translate3d(5vh, 10vmax, 0); }
  to   { transform: translate3d(-6vh, 6vmax, 0); }
}

@keyframes beam-drift-c {
  from { transform: translate3d(-7vh, 33vmax, 0); }
  to   { transform: translate3d(4vh, 38vmax, 0); }
}

@keyframes beam-drift-d {
  from { transform: translate3d(3vh, -44vmax, 0); }
  to   { transform: translate3d(-5vh, -38vmax, 0); }
}

@keyframes glow-pulse {
  from { opacity: 0.22; width: 55%; }
  to   { opacity: 0.42; width: 68%; }
}

@keyframes status-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-live) 55%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--status-live) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-live) 0%, transparent); }
}

@keyframes sales-cta-shine {
  0%, 58% { transform: translateX(-68%); }
  76%, 100% { transform: translateX(68%); }
}

/* translateY vem ANTES de rotate(45deg) de propósito: assim o quique
   acontece no eixo vertical da tela, e não no eixo já girado da seta —
   senão ela deslizaria na diagonal em vez de descer reto. */
@keyframes scroll-cue {
  0%, 100% {
    transform: translateY(0) rotate(45deg);
    opacity: 0.35;
    border-right-width: calc(1px * 1.2);
    border-bottom-width: calc(1px * 1.2);
  }
  50% {
    transform: translateY(8px) rotate(45deg);
    opacity: 1;
    /* No ápice do pulso, o traço fica 50% mais espesso (1,2px → 1,8px). */
    border-right-width: calc(1px * 1.8);
    border-bottom-width: calc(1px * 1.8);
  }
}

/* Tudo que se move sozinho é desligado aqui */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }

  /* Sem fill-mode, uma animação zerada volta a transform:none — os
     quatro feixes empilhariam no centro do hero. Aqui cada um recebe
     de volta, fixo, o quadro inicial da sua deriva: mesma composição
     em faixas, parada. */
  .hero__bar--a { transform: translate3d(-4vh, -18vmax, 0) !important; }
  .hero__bar--b { transform: translate3d(5vh, 10vmax, 0) !important; }
  .hero__bar--c { transform: translate3d(-7vh, 33vmax, 0) !important; }
  .hero__bar--d { transform: translate3d(3vh, -44vmax, 0) !important; }

  /* A conversa permanece no estado concluído e o telefone conserva a
     diagonal que dá sentido à composição, apenas sem perseguição no hover. */
  .media-frame--sales-phone .sales-phone {
    transform: translate(-48%, -50%) rotateX(8deg) rotateY(-13deg) rotateZ(9deg) !important;
  }
  .sales-phone__typing { display: none !important; }
}


/* ══════════ 16 · RESPONSIVO ══════════ */

@media (max-width: 1000px) {
  :root { --section-gap: 72px; }

  .grid--2 { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: 1fr; }

  /* As capacidades Enterprise continuam em pares no tablet para evitar
     cartões estreitos antes de empilharem no celular. */
  .enterprise-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enterprise-process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enterprise-process__steps li:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--border-faint); }
  .enterprise-process__steps li:nth-child(4) { border-top: 1px solid var(--border-faint); }
  .case-prose__grid { grid-template-columns: 1fr; gap: var(--space-40); }
  .nba-demo-layout { grid-template-columns: 1fr; gap: var(--space-48); }
  .nba-demo-copy { max-width: 680px; }

  .split {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }
  .split--reverse .split__text,
  .split--reverse .split__media { order: initial; }

  .founder-system__agents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .founder-demo__layout { grid-template-columns: 1fr; gap: var(--space-48); }
  .founder-demo__head { max-width: 680px; }
  .founder-demo__support { max-width: 680px; }
  .nav-shell.is-scrolled .nav { max-width: var(--page-max-width); }
}

@media (max-width: 780px) {
  :root {
    --section-gap: 60px;
    --page-gutter: 20px;
    /* Blur pesado custa caro em GPU de celular */
    --blur-glass: 20px;
    --blur-nav: 28px;
  }

  .nav__menu-toggle { display: grid; margin-left: auto; }

  .nav__links {
    position: absolute;
    inset: calc(100% + var(--space-8)) 0 auto;
    display: grid;
    gap: var(--space-4);
    padding: var(--space-8);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-nav);
    /* Mais sólido e com blur acima da barra: o texto do hero não concorre
       com os destinos de navegação quando o painel abre. */
    background: color-mix(in srgb, var(--surface-recessed) 82%, var(--glass-fill-hover));
    -webkit-backdrop-filter: blur(calc(var(--blur-nav) * 1.75)) saturate(120%);
    backdrop-filter: blur(calc(var(--blur-nav) * 1.75)) saturate(120%);
    box-shadow: var(--shadow-glass);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transform-origin: top;
    transition:
      opacity var(--motion-fast) var(--ease-smooth),
      transform var(--motion-fast) var(--ease-out);
  }

  .nav.is-menu-open .nav__links {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav__links a {
    display: block;
    padding: var(--space-16);
    text-align: left;
  }

  .nav__dropdown-menu {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 0 var(--space-16);
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .nav__dropdown.is-dropdown-open .nav__dropdown-menu { display: grid; }
  .nav__dropdown-toggle { display: flex; width: 100%; padding: var(--space-16); text-align: left; }
  .nav__dropdown-menu a { padding: var(--space-16); }

  .nav {
    justify-content: space-between;
    padding-left: var(--space-16);
  }

  /* Todas as aberturas preservam um respiro de 5% além da viewport no
     celular, evitando que título e atmosfera pareçam comprimidos pela barra. */
  .hero { min-height: 105svh; padding-block: calc(var(--nav-height) + var(--space-80)) var(--space-80); }
  .enterprise-hero { padding-block: calc(var(--nav-height) + var(--space-80)) var(--space-80); }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 auto; }

  .cta__panel {
    grid-template-columns: 1fr;
    gap: var(--space-32);
    padding: var(--space-48) var(--space-24);
  }
  .cta__panel::after { left: var(--space-24); width: 120px; }
  .cta__title { max-width: 18ch; }
  .cta__action { gap: var(--space-16); padding-left: 0; border-left: 0; }

  .response-time__card {
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    column-gap: var(--space-24);
    min-height: 140px;
    padding: var(--space-24);
  }
  .response-time__quote { padding-left: var(--space-24); }
  .response-time__card--sales {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: 236px;
  }
  .response-time__sales-meta { grid-column: 1; grid-row: 1; gap: var(--space-8); }
  .response-time__sales-meta .response-time__label { padding-left: var(--space-8); }
  .response-time__card--sales .response-time__result { grid-column: 1; grid-row: 2; }
  .response-time__card--sales .response-time__summary {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    max-width: 30ch;
    margin: 0;
    padding: var(--space-24) 0 0;
    border-left: 0;
  }
  .response-time__quote { margin-top: var(--space-40); }
  .response-time__source { margin: calc(var(--space-16) * -1) 0 var(--space-24); }

  /* No Sales, integrações são referência de compatibilidade, não o foco da
     seção. A faixa compacta preserva as três marcas em uma única leitura e
     deixa o palco visual para a conversa no telefone. */
  .integration-logos {
    flex-wrap: nowrap;
    gap: var(--space-8);
  }
  .integration-logos img { height: 24px; max-width: none; }
  .integration-logos .integration-logos__wake,
  .integration-logos .integration-logos__wake:last-child {
    height: 32px;
  }
  .integration-logos .integration-logos__nuvemshop { height: 21px; }
  .integration-logos--sales .integration-logos__wake { margin-left: 0; }

  /* A coluna única transforma o aparelho no desfecho visual do Sales. Um
     palco mais alto amplia a conversa sem criar uma imagem pesada ou cortada. */
  .product--sales .split__media {
    justify-items: center;
    margin-top: var(--space-40);
  }
  .product--sales .media-frame--sales-phone { aspect-ratio: 10 / 9; }
  .product--sales .sales-phone { height: 124%; }
  /* O telefone ultrapassa seu palco no eixo vertical. Esta margem garante
     que o CTA venha após o aparelho e não divida o mesmo plano visual. */
  .product--sales .product__more { margin-top: var(--space-64); }

  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-cell { min-height: 104px; padding: var(--space-16); }
  .proof-cell + .proof-cell { border-left: 0; }
  .proof-cell:nth-child(even) { border-left: 1px solid var(--border-faint); }
  /* A quinta marca fecha uma grade de duas colunas. Ela ocupa a linha inteira
     para manter o peso visual do encerramento centralizado. */
  .proof-cell--base { grid-column: 1 / -1; }
  .ravi__offers {
    grid-template-columns: 1fr;
    margin-top: var(--space-56);
  }

  .ravi__offer { padding: var(--space-40) 0; }
  .ravi__offer + .ravi__offer { border-top: 1px solid var(--border-faint); border-left: 0; }
  .ravi__offer-body { min-height: 0; }

  .enterprise-capabilities { grid-template-columns: 1fr; }
  .enterprise-capability { min-height: auto; padding: var(--space-32) var(--space-24) var(--space-40); }
  .enterprise-process__steps { grid-template-columns: 1fr; }
  .enterprise-process__steps li,
  .enterprise-process__steps li + li,
  .enterprise-process__steps li:nth-child(3),
  .enterprise-process__steps li:nth-child(4) { min-height: 0; padding: var(--space-24) 0; border-left: 0; }
  .enterprise-process__steps li + li { border-top: 1px solid var(--border-faint); }
  .enterprise-process__index { margin-bottom: var(--space-24); }
  .case-opening { padding-top: calc(var(--nav-height) + var(--space-64)); }
  .case-opening__logo { min-height: 80px; margin-bottom: var(--space-40); }
  .case-opening__logo img { max-height: 52px; }
  .page--case-undo .case-opening__logo img { max-height: 86px; }
  .case-metrics { grid-template-columns: 1fr; margin-top: var(--space-40); }
  .case-metric { grid-template-rows: auto auto; min-height: 0; }
  .case-prose__meta { grid-template-columns: 1fr; gap: var(--space-8); }
  .case-prose__meta span { text-align: left; }
  .case-prose__copy h2 { margin-bottom: var(--space-24); }
  .nba-system { margin-top: var(--space-40); padding: var(--space-24) var(--space-16); }
  .nba-system__flow { grid-template-columns: 1fr; gap: var(--space-16); padding-top: var(--space-24); }
  .nba-system__group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nba-system__group li { padding: var(--space-16) var(--space-8); text-align: center; }
  .nba-system__connector { width: 1px; height: var(--space-24); margin-inline: auto; }
  .nba-system__hub { width: min(100%, 210px); justify-self: center; }
  .nba-demo-layout { gap: var(--space-40); }
  .nba-demo__header { align-items: flex-start; padding: var(--space-16); }
  .nba-demo__channel small { max-width: 150px; }
  .nba-demo__controls button { min-width: 52px; padding-inline: var(--space-8); }
  .nba-demo__conversation { gap: var(--space-24); height: 720px; padding: var(--space-24) var(--space-16); }
  .nba-demo__message { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
  .nba-demo__avatar { width: 36px; height: 36px; }
  .nba-demo__analysis { margin-left: 48px; }
  .nba-demo__report-row { grid-template-columns: minmax(0, 1fr) 86px; gap: 12px; padding-block: 12px; }
  .nba-demo__report-copy { grid-template-columns: 1fr; gap: 4px; }
  .nba-demo__visual { width: 86px; }
  .nba-demo__visual--trend svg { width: 76px; }
  .nba-demo__visual--bars { gap: 5px; padding-inline: 10px; }
  .nba-demo__visual--steps i + i { margin-left: 14px; }
  .nba-demo__visual--steps i + i::before { width: 16px; }
  .nba-demo__comparison figcaption { align-items: flex-start; flex-direction: column; gap: 4px; }
  .nba-demo__comparison figcaption span { text-align: left; }
  .nba-demo__comparison-row { grid-template-columns: minmax(112px, 1fr) minmax(84px, .8fr); gap: 12px; }
  .nba-demo__footer { align-items: flex-start; flex-direction: column; gap: 3px; padding: 12px var(--space-16); }
  .case-media-placeholder { min-height: 260px; margin-top: var(--space-40); }
  .case-demand-share { margin-top: var(--space-40); padding-block: var(--space-20) var(--space-24); }
  .case-demand-share__eyebrow { margin-bottom: var(--space-16); }
  .case-demand-share__bar { min-height: 152px; }
  .case-demand-share__segment { padding: var(--space-16); }
  .case-demand-share__segment span { font-size: var(--text-label); }
  .case-demand-share figcaption { margin-top: var(--space-16); }
  .case-autonomy-flow { margin-top: var(--space-40); padding-block: var(--space-20) var(--space-24); }
  .case-autonomy-flow__lanes { gap: var(--space-32); }
  .case-autonomy-flow__lane--exception { padding-top: var(--space-32); }
  .case-autonomy-flow__lane-heading { margin-bottom: var(--space-24); }
  .case-autonomy-flow__steps { gap: var(--space-8); }
  .case-autonomy-flow__steps li { padding-top: calc(var(--space-16) + var(--space-8)); font-size: var(--text-label); }
  .case-autonomy-flow__note { margin-top: var(--space-32); }
  .case-chat { margin-top: var(--space-40); padding: var(--space-24) var(--space-16); }
  .case-chat__header { align-items: start; flex-direction: column; gap: var(--space-16); }
  .case-chat__thread { margin-top: var(--space-24); }
  .case-chat__message { max-width: 90%; }
  .case-chat__message--catalog { width: 100%; }
  .case-chat__products { gap: var(--space-8); }
  .case-chat__product p { padding: var(--space-8); font-size: var(--text-micro); }
  .undo-demo { padding: 0; }
  .undo-demo .case-chat__header { padding: var(--space-24) var(--space-16); }
  .undo-demo__header-side { width: 100%; justify-content: space-between; gap: var(--space-16); }
  .undo-demo__controls button { min-width: 68px; min-height: 44px; }
  .undo-demo__conversation { height: clamp(420px, 52svh, 560px); padding: var(--space-24) var(--space-16); }
  .undo-demo__message { max-width: 88%; }
  .undo-demo__message--products { width: 100%; max-width: 100%; }
  .undo-demo__catalog { width: 100%; padding: var(--space-16); }
  .undo-demo__catalog > header { grid-template-columns: 82px minmax(0, 1fr) auto; gap: 12px; }
  .undo-demo__catalog-brand { height: 38px; padding-inline: var(--space-8); }
  .undo-demo__catalog-brand img { width: 64px; }
  .undo-demo__catalog ol { gap: var(--space-8); }
  .undo-demo__catalog li { justify-content: center; padding-inline: 6px; letter-spacing: 0; }
  .undo-demo__catalog li + li::before { width: var(--space-8); }
  .undo-demo__products { gap: var(--space-8); }
  .undo-demo__product > div { padding: 10px var(--space-8); }
  .undo-demo__product strong { font-size: var(--text-micro); }
  .undo-demo__product span { align-items: flex-start; font-size: var(--text-nano); line-height: var(--leading-snug); }
  .undo-demo__footer { align-items: flex-start; flex-direction: column; gap: 5px; padding: 10px var(--space-16); }
  .undo-demo__progress { width: 100%; justify-content: space-between; text-align: left; }
  .page--case-undo .case-closing__grid { grid-template-columns: 1fr; gap: var(--space-32); padding-block: var(--space-48); }
  .page--case-undo .case-closing__action { padding: 0; border-left: 0; }
  .founder-system__map { padding: var(--space-32) var(--space-16); }
  .founder-system__channels { grid-template-columns: 1fr; max-width: 100%; }
  .founder-system__agents { grid-template-columns: 1fr; }
  .founder-demo__tabs { display: flex; flex-wrap: nowrap; margin-bottom: var(--space-16); padding: 3px 3px 7px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .founder-demo__tabs::-webkit-scrollbar { display: none; }
  .founder-demo__tabs button { min-width: 190px; min-height: 48px; padding-inline: var(--space-16); }
  .founder-chat__header { align-items: flex-start; padding: var(--space-16); }
  .founder-chat__channel small { max-width: 150px; }
  .founder-chat__controls button { min-width: 52px; padding-inline: var(--space-8); }
  .founder-chat__conversation { height: 650px; padding: var(--space-24) var(--space-16); }
  .founder-chat__message { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
  .founder-chat__avatar { width: 36px; height: 36px; }
  .founder-chat__analysis { margin-left: 48px; }
  .founder-chat__message-body > header > em { width: fit-content; margin-left: 0; }
  .founder-chat__sources--hub { grid-template-columns: 68px minmax(0, 1fr); gap: var(--space-16); }
  .founder-chat__sources--hub > strong > i { width: var(--space-16); }
  .founder-chat__sources--connected { gap: var(--space-16); }
  .founder-chat__sources--connected span + span::before { width: var(--space-16); }
  .founder-routine-card ol { grid-template-columns: 1fr; }
  .founder-routine-card li + li { border-top: 1px solid var(--border-faint); border-left: 0; }
  .founder-routine-card li + li::before { top: auto; right: auto; bottom: 100%; left: 27px; width: 1px; height: var(--space-16); }
  .founder-chart__vertical-body { padding-inline: var(--space-8); }
  .founder-chart__funnel-row { grid-template-columns: 118px minmax(0, 1fr); gap: 12px; }
  .founder-chat__footer { align-items: flex-start; flex-direction: column; gap: 3px; padding: 10px var(--space-16); }
  .founder-chat__footer span:last-child { text-align: left; }
  .page--founder #problema .card__title { min-height: 0; }
  .founder-stages { grid-template-columns: 1fr; }
  .founder-stages li { padding: var(--space-24) 0; }
  .founder-stages li + li { padding-left: 0; border-top: 1px solid var(--border-faint); border-left: 0; }
  .founder-controls { grid-template-columns: 1fr; }
  .founder-controls li,
  .founder-controls li:last-child { grid-column: auto; padding: var(--space-24) 0; border-right: 0; }

  .about-team__grid,
  .about-spectrum__stages,
  .about-layer__grid,
  .about-principles,
  .about-manifesto__lists { grid-template-columns: 1fr; }
  .about-person { grid-template-columns: 96px minmax(0, 1fr); }
  .about-person:nth-child(odd),
  .about-person:nth-child(even) { padding: var(--space-24) 0; border-right: 0; }
  .about-person img { width: 96px; }
  .about-spectrum__stages li,
  .about-spectrum__stages li + li,
  .about-layer__grid article,
  .about-layer__grid article + article,
  .about-principles article,
  .about-principles article + article { padding: var(--space-24) 0; border-left: 0; }
  .about-spectrum__stages li + li,
  .about-layer__grid article + article,
  .about-principles article + article { border-top: 1px solid var(--border-faint); }
  .about-manifesto__lists { gap: var(--space-40); }
  .about-not ul { grid-template-columns: 1fr; }
  .about-not li,
  .about-not li:nth-child(odd),
  .about-not li:nth-child(even) { padding: var(--space-24) 0; border-right: 0; }

  .promo-panel {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: var(--space-32) var(--space-24);
  }
  .promo-panel .btn { justify-content: center; }

  .footer__inner { justify-content: center; text-align: center; }
}

@media (max-width: 420px) {
  .nav__cta { display: none; }
  .founder-chat__channel small { display: none; }
  .founder-chat__controls { gap: 4px; }
  .founder-chat__controls button { min-width: 48px; }
  .founder-chat__conversation { height: 680px; }
  .founder-chat__analysis { margin-left: 0; }
  .nba-demo__analysis { margin-left: 0; }
  .nba-demo__analysis-sources { gap: var(--space-8); }
  .nba-demo__analysis-sources span { padding-inline: 5px; letter-spacing: 0; }
  .nba-demo__analysis-sources span + span::before { display: none; }
  .undo-demo__header-side { align-items: flex-start; flex-direction: column; }
  .undo-demo__controls { width: 100%; }
  .undo-demo__controls button { flex: 1; }
  .undo-demo__message { max-width: 94%; }
  .undo-demo__catalog > header { grid-template-columns: 76px minmax(0, 1fr); }
  .undo-demo__catalog-pulse { display: none; }
  .undo-demo__catalog ol { grid-template-columns: 1fr; }
  .undo-demo__catalog li { justify-content: flex-start; }
  .undo-demo__catalog li + li::before { display: none; }
  .founder-chat__sources--hub { grid-template-columns: 1fr; gap: var(--space-8); }
  .founder-chat__sources--hub > strong { min-height: 44px; }
  .founder-chat__sources--hub > strong > i { display: none; }
  .founder-chat__sources--connected { gap: var(--space-8); }
  .founder-chat__sources--connected span { padding-inline: 5px; font-size: var(--text-nano); letter-spacing: 0; }
  .founder-chat__sources--connected span + span::before { display: none; }
  .founder-chart__row { grid-template-columns: 48px minmax(0, 1fr) 38px; gap: var(--space-8); }
  .founder-chart__vertical-body { gap: var(--space-8); }
  .founder-chart__funnel-row { grid-template-columns: 1fr; gap: 5px; }
}