/* ════════════════════════════════════════════════════════════
   HERO BETA — substitui imagens/vídeos por SVG animados
   + fluxograma animado no fundo
   ════════════════════════════════════════════════════════════ */

/* Esconder mídia original */
.hero-section.is-beta .hero-img-main #img-product,
.hero-section.is-beta .hero-logo-chip video,
.hero-section.is-beta .hero-diagram-card video,
.hero-section.is-beta .hero-chat-card video,
.hero-section.is-beta .hero-chat-image {
  display: none !important;
}

/* ═══════════ HEADER (NAV) — cor da marca com alpha 40% ═══════════ */
nav {
  background: rgba(24, 62, 235, 0.50) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
nav.scrolled {
  background: rgba(24, 62, 235, 0.50) !important;
  box-shadow: 0 4px 24px rgba(10, 28, 146, 0.18) !important;
}

/* Botão "Saber Mais" no header: branco com texto azul enquanto nav não rolou (desktop) */
@media (min-width: 1025px) {
  nav:not(.scrolled) a.btn-blue {
    background: #fff !important;
    color: #183EEB !important;
    border: 1px solid rgba(255, 255, 255, 0.9);
    transition: background 0.25s ease, color 0.25s ease;
  }
  nav:not(.scrolled) a.btn-blue:hover {
    background: rgba(255, 255, 255, 0.92) !important;
    opacity: 1;
  }
}
@media (max-width: 1024px) {
  nav {
    background: rgba(24, 62, 235, 0.40) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    box-shadow: 0 4px 20px rgba(10, 28, 146, 0.18) !important;
  }
}

/* ═══════════ HERO BACKGROUND — sem diagonal esbranquiçada ═══════════ */
.hero-section.is-beta {
  background: linear-gradient(118deg, #0A1C92 0%, #1530B5 28%, #183EEB 58%, #2F56F0 88%, #4170F0 100%) !important;
}

/* ═══════════ HERO MOBILE — subir conteúdo e fundo mais uniforme ═══════════ */
@media (max-width: 1024px) {
  .hero-section.is-beta {
    background: linear-gradient(165deg, #0F27A6 0%, #183EEB 55%, #2F56F0 100%) !important;
  }
  .hero-section.is-beta .hero-content {
    padding-top: 90px !important;
  }
  .hero-section.is-beta .hero-text {
    margin-top: 0 !important;
  }

  /* Anti-CLS: esconde texto/imagens do hero até fontes carregarem.
     Mantém o espaço reservado (visibility ≠ display), então nada desce depois. */
  html:not(.hero-ready) .hero-section.is-beta .hero-text,
  html:not(.hero-ready) .hero-section.is-beta .hero-images {
    visibility: hidden;
  }
}

/* ═══════════ BACKGROUND — Rede viva de mensagens ═══════════ */
.hero-bg-flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
}

/* LABELS técnicos — aparecem quando o endpoint recebe a primeira mensagem */
.hero-bg-flow .hb-label {
  letter-spacing: 0.02em;
  opacity: 0;
  animation: hb-label-reveal 1.1s ease-out forwards;
}
/* Delays alinhados com a chegada do pulse ao hub correspondente */
.hero-bg-flow .hb-labels > .hb-label:nth-child(1)  { animation-delay: 0.3s;  } /* page_id → A (origem) */
.hero-bg-flow .hb-labels > .hb-label:nth-child(2)  { animation-delay: 2.1s;  } /* app_id → B */
.hero-bg-flow .hb-labels > .hb-label:nth-child(3)  { animation-delay: 3.2s;  } /* graph.fb → C */
.hero-bg-flow .hb-labels > .hb-label:nth-child(4)  { animation-delay: 4.3s;  } /* waba_id → D */
.hero-bg-flow .hb-labels > .hb-label:nth-child(5)  { animation-delay: 5.4s;  } /* rate_limit → E */
.hero-bg-flow .hb-labels > .hb-label:nth-child(6)  { animation-delay: 7.6s;  } /* POST /messages → F */
.hero-bg-flow .hb-labels > .hb-label:nth-child(7)  { animation-delay: 9.8s;  } /* webhook → G */
.hero-bg-flow .hb-labels > .hb-label:nth-child(8)  { animation-delay: 12.0s; } /* access_token → H */
.hero-bg-flow .hb-labels > .hb-label:nth-child(9)  { animation-delay: 13.5s; } /* oauth → J */
.hero-bg-flow .hb-labels > .hb-label:nth-child(10) { animation-delay: 1.4s;  } /* /send → K (mobile origem) */
.hero-bg-flow .hb-labels > .hb-label:nth-child(11) { animation-delay: 17.0s; } /* status: 200 OK */
.hero-bg-flow .hb-labels > .hb-label:nth-child(12) { animation-delay: 18.0s; } /* latency */
.hero-bg-flow .hb-labels > .hb-label:nth-child(13) { animation-delay: 19.0s; } /* queue */
.hero-bg-flow .hb-labels > .hb-label:nth-child(14) { animation-delay: 20.0s; } /* delivered */
.hero-bg-flow .hb-labels > .hb-label:nth-child(15) { animation-delay: 21.0s; } /* phone_number_id */

@keyframes hb-label-reveal {
  0%   { opacity: 0; transform: translateY(3px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* EDGES — cada conexão é "construída" uma vez pela bolinha e permanece */
.hero-bg-flow .hb-edge {
  stroke-dasharray: 480;
  stroke-dashoffset: 480;
  opacity: 0;
  animation: hb-edge-connect 1.8s ease-out forwards;
  will-change: stroke-dashoffset, opacity;
}
.hero-bg-flow #hb-e-ab { animation-delay: 0.3s; }
.hero-bg-flow #hb-e-bc { animation-delay: 1.4s; }
.hero-bg-flow #hb-e-cd { animation-delay: 2.5s; }
.hero-bg-flow #hb-e-de { animation-delay: 3.6s; }
.hero-bg-flow #hb-e-ce { animation-delay: 4.7s; }
.hero-bg-flow #hb-e-cf { animation-delay: 5.8s; }
.hero-bg-flow #hb-e-bf { animation-delay: 6.9s; }
.hero-bg-flow #hb-e-fg { animation-delay: 8.0s; }
.hero-bg-flow #hb-e-eg { animation-delay: 9.1s; }
.hero-bg-flow #hb-e-ah { animation-delay: 10.2s; }
.hero-bg-flow #hb-e-hf { animation-delay: 11.3s; }
.hero-bg-flow #hb-e-bh { animation-delay: 12.4s; }
.hero-bg-flow #hb-e-jb { animation-delay: 13.5s; }
.hero-bg-flow #hb-e-jd { animation-delay: 14.6s; }
.hero-bg-flow #hb-e-jc { animation-delay: 15.7s; }
/* Mobile K edges — compartilham slots com as desktop-only (apenas uma renderiza) */
.hero-bg-flow #hb-e-kb { animation-delay: 1.4s; }
.hero-bg-flow #hb-e-kd { animation-delay: 2.5s; }
.hero-bg-flow #hb-e-ke { animation-delay: 4.7s; }
.hero-bg-flow #hb-e-kf { animation-delay: 5.8s; }
.hero-bg-flow #hb-e-kj { animation-delay: 15.7s; }

@keyframes hb-edge-connect {
  0%   { stroke-dashoffset: 480; opacity: 0; }
  15%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* HUBS — halo + ring + core (respiração) */
.hero-bg-flow .hb-hub-halo,
.hero-bg-flow .hb-hub-ring,
.hero-bg-flow .hb-hub-core {
  transform-box: fill-box;
  transform-origin: center;
}
.hero-bg-flow .hb-hub-halo { animation: hb-halo 3.4s ease-in-out infinite; }
.hero-bg-flow .hb-hub-ring { animation: hb-ring 3.4s ease-in-out infinite; }
.hero-bg-flow .hb-hub-core {
  animation: hb-core 3.4s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.55));
}

.hero-bg-flow .hb-hub:nth-child(1) > circle { animation-delay: 0s; }
.hero-bg-flow .hb-hub:nth-child(2) > circle { animation-delay: 0.35s; }
.hero-bg-flow .hb-hub:nth-child(3) > circle { animation-delay: 0.70s; }
.hero-bg-flow .hb-hub:nth-child(4) > circle { animation-delay: 1.05s; }
.hero-bg-flow .hb-hub:nth-child(5) > circle { animation-delay: 1.40s; }
.hero-bg-flow .hb-hub:nth-child(6) > circle { animation-delay: 1.75s; }
.hero-bg-flow .hb-hub:nth-child(7) > circle { animation-delay: 2.10s; }
.hero-bg-flow .hb-hub:nth-child(8) > circle { animation-delay: 2.45s; }
.hero-bg-flow .hb-hub:nth-child(9) > circle { animation-delay: 1.05s; }

@keyframes hb-halo {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%      { transform: scale(1.6);  opacity: 0.10; }
}
@keyframes hb-ring {
  0%, 100% { transform: scale(1);    opacity: 0.95; }
  50%      { transform: scale(1.18); opacity: 0.55; }
}
@keyframes hb-core {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.85; }
}

/* EXPANDING WAVES — onda expande quando o hub recebe a mensagem */
.hero-bg-flow .hb-wave {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: hb-wave 3.8s ease-out infinite;
}
.hero-bg-flow .hb-wave-b { animation-delay: 2.1s;  }
.hero-bg-flow .hb-wave-c { animation-delay: 3.2s;  }
.hero-bg-flow .hb-wave-e { animation-delay: 5.4s;  }
.hero-bg-flow .hb-wave-f { animation-delay: 7.6s;  }
.hero-bg-flow .hb-wave-j { animation-delay: 13.5s; }
.hero-bg-flow .hb-wave-k { animation-delay: 1.4s;  }

@keyframes hb-wave {
  0%   { transform: scale(1);   opacity: 0.7; }
  80%  { opacity: 0; }
  100% { transform: scale(6.5); opacity: 0; }
}

/* SATELLITE DOTS — piscando em cadência */
.hero-bg-flow .hb-sat {
  transform-box: fill-box;
  transform-origin: center;
  animation: hb-sat-blink 4.2s ease-in-out infinite;
}
.hero-bg-flow .hb-sats .hb-sat:nth-child(1)  { animation-delay: 0s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(2)  { animation-delay: 0.25s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(3)  { animation-delay: 0.5s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(4)  { animation-delay: 0.75s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(5)  { animation-delay: 1.0s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(6)  { animation-delay: 1.25s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(7)  { animation-delay: 1.5s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(8)  { animation-delay: 1.75s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(9)  { animation-delay: 2.0s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(10) { animation-delay: 2.25s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(11) { animation-delay: 0.15s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(12) { animation-delay: 0.4s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(13) { animation-delay: 0.65s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(14) { animation-delay: 0.9s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(15) { animation-delay: 1.15s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(16) { animation-delay: 1.4s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(17) { animation-delay: 1.65s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(18) { animation-delay: 1.9s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(19) { animation-delay: 0.1s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(20) { animation-delay: 0.55s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(21) { animation-delay: 1.1s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(22) { animation-delay: 1.55s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(23) { animation-delay: 0.35s; }
.hero-bg-flow .hb-sats .hb-sat:nth-child(24) { animation-delay: 2.05s; }

@keyframes hb-sat-blink {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50%      { opacity: 0.95; transform: scale(1.5); }
}

/* TRAVELING PULSES — opacidade controlada via SMIL por pulse */
.hero-bg-flow .hb-pulse {
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.55));
}

/* MOBILE — animação sutil, não compete com texto/CTA */
@media (max-width: 768px) {
  .hero-bg-flow { opacity: 0.45; }
  .hero-bg-flow .hb-label { font-size: 9px; }
  .hero-bg-flow .hb-sub { display: none; }
}

/* Elementos adicionados estrategicamente só pra versão mobile */
.hero-bg-flow .hb-mobile-only { display: none; }
@media (max-width: 1024px) {
  .hero-bg-flow .hb-mobile-only { display: inline; }
  .hero-bg-flow .hb-desktop-only { display: none !important; }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-flow .hb-edge,
  .hero-bg-flow .hb-hub-halo,
  .hero-bg-flow .hb-hub-ring,
  .hero-bg-flow .hb-hub-core,
  .hero-bg-flow .hb-wave,
  .hero-bg-flow .hb-sat { animation: none; }
  .hero-bg-flow .hb-edge { stroke-dashoffset: 0; opacity: 1; }
}

/* ═══════════ DASHBOARD CARD ═══════════ */
.dash-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dash-svg .dash-bar {
  transform-origin: 50% 100%;
  transform-box: fill-box;
  transform: scaleY(0.12);
  animation: ds-bar 4.2s ease-in-out infinite;
}
.dash-svg .dash-bar.b1 { animation-delay: 0s; }
.dash-svg .dash-bar.b2 { animation-delay: 0.08s; }
.dash-svg .dash-bar.b3 { animation-delay: 0.16s; }
.dash-svg .dash-bar.b4 { animation-delay: 0.24s; }
.dash-svg .dash-bar.b5 { animation-delay: 0.32s; }
.dash-svg .dash-bar.b6 { animation-delay: 0.40s; }
.dash-svg .dash-bar.b7 { animation-delay: 0.48s; }
.dash-svg .dash-bar.b8 { animation-delay: 0.56s; }

@keyframes ds-bar {
  0%, 10%  { transform: scaleY(0.12); }
  30%, 75% { transform: scaleY(1); }
  100%    { transform: scaleY(0.12); }
}

.dash-svg .dash-line {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: ds-line 4.2s ease-in-out infinite;
}
@keyframes ds-line {
  0%, 15%  { stroke-dashoffset: 700; }
  55%, 85% { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: 700; }
}

.dash-svg .dash-tile {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ds-tile 4.2s ease-out infinite;
}
.dash-svg .dash-tile.t1 { animation-delay: 0s; }
.dash-svg .dash-tile.t2 { animation-delay: 0.15s; }
.dash-svg .dash-tile.t3 { animation-delay: 0.3s; }

@keyframes ds-tile {
  0%, 5%   { opacity: 0; transform: translateY(6px); }
  20%, 88% { opacity: 1; transform: translateY(0); }
  100%    { opacity: 0; transform: translateY(6px); }
}

/* ═══════════ LOGO CHIP ═══════════ */
.chip-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.chip-svg .chip-icon {
  transform-origin: center;
  transform-box: fill-box;
  animation: chip-nudge 2.8s ease-in-out infinite;
}
@keyframes chip-nudge {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(1px, -1px) scale(1.06); }
}
.chip-svg .chip-glow {
  transform-origin: center;
  transform-box: fill-box;
  animation: chip-glow 2.8s ease-in-out infinite;
}
@keyframes chip-glow {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.15); }
}

/* ═══════════ DIAGRAM CARD (pipeline horizontal) ═══════════ */
.hero-section.is-beta .hero-diagram-card .diag-svg { display: none !important; }

.diag-card {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

.diag-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: #F0F3FB;
  border-radius: 20px;
  align-self: flex-start;
}
.diag-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #183EEB;
  animation: diag-tag-blink 2s ease-in-out infinite;
}
@keyframes diag-tag-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.diag-tag-text {
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #1D1D1D;
  white-space: nowrap;
}

/* Pipeline */
.diag-pipe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 4px 2px;
}

.diag-node {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #E5EDFA;
  border: 1.5px solid #183EEB;
  border-radius: 10px;
  flex: 0 0 auto;
  position: relative;
  opacity: 0;
  transform: translateY(4px) scale(0.92);
  animation: diag-node-in 4.2s ease-out infinite;
}
.diag-node.dn1 { animation-delay: 0.10s; }
.diag-node.dn2 { animation-delay: 1.10s; }
.diag-node.dn3 { animation-delay: 2.10s; }

.diag-node.dn-primary {
  background: #183EEB;
  border-color: #183EEB;
  box-shadow: 0 6px 16px rgba(24, 62, 235, 0.3);
}
.diag-node.dn-primary .dn-label { color: #fff; font-weight: 600; }
.diag-node.dn-primary .dn-ico   { background: #fff; }

.dn-ico {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #183EEB;
  flex-shrink: 0;
}
.dn-label {
  font-size: 11px;
  font-weight: 500;
  color: #183EEB;
  line-height: 1;
  white-space: nowrap;
}

@keyframes diag-node-in {
  0%        { opacity: 0; transform: translateY(4px) scale(0.92); }
  8%        { opacity: 1; transform: translateY(0)   scale(1.06); }
  14%, 88%  { opacity: 1; transform: translateY(0)   scale(1); }
  96%, 100% { opacity: 0.35; transform: scale(0.96); }
}

/* Pulse on active node */
.diag-node::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  border: 2px solid #183EEB;
  opacity: 0;
  animation: diag-node-pulse 4.2s ease-out infinite;
}
.diag-node.dn1::after { animation-delay: 0.25s; }
.diag-node.dn2::after { animation-delay: 1.25s; }
.diag-node.dn3::after { animation-delay: 2.25s; }

@keyframes diag-node-pulse {
  0%, 2%   { opacity: 0;    transform: scale(1); }
  10%      { opacity: 0.85; transform: scale(1); }
  30%      { opacity: 0;    transform: scale(1.25); }
  100%     { opacity: 0;    transform: scale(1.25); }
}

/* Connector lines */
.diag-line {
  flex: 1;
  height: 2px;
  background: #E1E8F9;
  position: relative;
  border-radius: 2px;
  margin: 0 2px;
  overflow: visible;
}
.diag-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: #183EEB;
  border-radius: 2px;
  animation: diag-line-fill 4.2s ease-in-out infinite;
}
.diag-line.dl1::before { animation-delay: 0.55s; }
.diag-line.dl2::before { animation-delay: 1.55s; }

@keyframes diag-line-fill {
  0%, 8%   { width: 0; }
  22%      { width: 100%; }
  88%      { width: 100%; }
  96%, 100% { width: 100%; opacity: 0.4; }
}

/* Arrow head at line end */
.diag-line::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -1px;
  width: 0;
  height: 0;
  border-left: 6px solid #183EEB;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: translateY(-50%);
  opacity: 0;
  animation: diag-arrow-in 4.2s ease-in-out infinite;
}
.diag-line.dl1::after { animation-delay: 0.85s; }
.diag-line.dl2::after { animation-delay: 1.85s; }

@keyframes diag-arrow-in {
  0%, 12%   { opacity: 0; transform: translate(-4px, -50%); }
  20%, 88%  { opacity: 1; transform: translate(0, -50%); }
  96%, 100% { opacity: 0; }
}

/* Traveling dot */
.dl-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #183EEB;
  box-shadow: 0 0 10px rgba(24, 62, 235, 0.6);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: diag-dot-travel 4.2s ease-in-out infinite;
}
.diag-line.dl1 .dl-dot { animation-delay: 0.55s; }
.diag-line.dl2 .dl-dot { animation-delay: 1.55s; }

@keyframes diag-dot-travel {
  0%, 8%    { left: 0;    opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  14%       { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  22%       { left: 100%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  28%, 100% { left: 100%; opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
}

/* Progress bar */
.diag-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}
.diag-progress-track {
  flex: 1;
  height: 6px;
  background: #E8EDF8;
  border-radius: 3px;
  overflow: hidden;
}
.diag-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #183EEB, #4170F0);
  border-radius: 3px;
  animation: diag-progress 4.2s ease-in-out infinite;
}
.diag-progress-val {
  font-size: 10px;
  font-weight: 500;
  color: #888;
  line-height: 1;
}
@keyframes diag-progress {
  0%, 5%    { width: 0; }
  25%       { width: 35%; }
  55%       { width: 70%; }
  80%, 88%  { width: 100%; }
  96%, 100% { width: 100%; opacity: 0; }
}

/* ═══════════ CHAT CARD ═══════════ */
.chat-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.chat-svg .chat-bubble {
  opacity: 0;
  transform-box: fill-box;
  animation: chat-pop 5.5s ease-in-out infinite;
}
.chat-svg .chat-bubble.b1 { animation-delay: 0s;    transform-origin: left center; }
.chat-svg .chat-bubble.b2 { animation-delay: 0.85s; transform-origin: right center; }
.chat-svg .chat-bubble.b3 { animation-delay: 1.75s; transform-origin: left center; }

@keyframes chat-pop {
  0%, 5%   { opacity: 0; transform: translateY(6px) scale(0.9); }
  14%      { opacity: 1; transform: translateY(0)   scale(1.02); }
  22%, 82% { opacity: 1; transform: translateY(0)   scale(1); }
  92%, 100%{ opacity: 0; transform: translateY(-4px) scale(0.96); }
}

.chat-svg .chat-typing {
  opacity: 0;
  animation: chat-typing-in 5.5s ease-in-out infinite;
  animation-delay: 2.6s;
}
@keyframes chat-typing-in {
  0%, 8%   { opacity: 0; }
  18%, 78% { opacity: 1; }
  90%, 100% { opacity: 0; }
}

.chat-svg .chat-typing .dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: type-bounce 1.1s ease-in-out infinite;
}
.chat-svg .chat-typing .d1 { animation-delay: 2.6s; }
.chat-svg .chat-typing .d2 { animation-delay: 2.75s; }
.chat-svg .chat-typing .d3 { animation-delay: 2.9s; }

@keyframes type-bounce {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-3px); }
}

/* ═══════════ Responsivo ═══════════ */
@media (max-width: 1024px) {
  .hero-bg-flow { opacity: 0.6; left: 0; width: 100%; }
}

/* Reduzir movimento */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-flow *,
  .dash-svg *, .chip-svg *, .diag-svg *, .chat-svg *,
  .diag-card *, .diag-tag-dot, .diag-node, .diag-line::before,
  .diag-line::after, .dl-dot, .diag-progress-fill {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .diag-line::before, .diag-progress-fill { width: 100% !important; }
}