/* ═══════════════════════════════════════════════
   /intelligence — página do Relevantia Intelligence
   Identidade do Intelligence como na seção de ferramentas
   do Audience to Business: fundo preto e prata e parte do
   título em prata; chat, botões e detalhes seguem dourados
   (com texto branco). Usa os componentes de relevantia.css.
   ═══════════════════════════════════════════════ */

.page-intel {
  --silver-grad: linear-gradient(110deg, #8E9196 0%, #F4F5F7 42%, #BFC3C8 62%, #7C8087 100%);
  --silver:      #BFC3C8;
  --silver-2:    #D6DAE0;
  --silver-dark: #6B7078;
  --silver-line: rgba(214,218,224,0.30);
}

/* ── Hero e seções escuras: preto e prata, como a seção de ferramentas do
   Audience to Business (brilho prata no alto, um toque de ouro embaixo) ── */
.page-intel .hero,
.page-intel .section--dark {
  background: radial-gradient(70% 50% at 85% 0%, rgba(220,224,230,0.09), transparent 70%),
              radial-gradient(60% 45% at 0% 100%, rgba(184,134,11,0.07), transparent 70%),
              linear-gradient(180deg, #0B0B0D, #050506);
}
.page-intel .section--dark { border-top: 1px solid rgba(214,218,224,0.14); }
.page-intel .hero .g1, .page-intel .hero .g2 { display: none; }
.page-intel .hero .lead,
.page-intel .section--dark .lead,
.page-intel .section--dark .checks li { color: rgba(220,224,230,0.68); }
.page-intel .section--dark .checks li strong { color: var(--white); }

/* Parte do título em prata (como "no seu negócio." no Audience to Business) */
.page-intel .silver { background: var(--silver-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* O recorte do degradê (background-clip: text) corta g, j, p e q quando a caixa
   do texto acaba na linha de base: um respiro embaixo deixa as pernas inteiras. */
.page-intel .silver, .in-rot-word { padding-bottom: .16em; margin-bottom: -.16em; }
.page-intel span.silver { display: inline-block; }

/* Eyebrows das partes escuras em prata; as claras seguem o padrão do site */
.page-intel .hero .t-eyebrow,
.page-intel .section--dark .t-eyebrow { color: var(--silver-2); background: rgba(220,224,230,0.06); border-color: var(--silver-line); }
.page-intel .hero .t-eyebrow::before,
.page-intel .section--dark .t-eyebrow::before { background: var(--silver-2); animation-name: ping-silver; }
@keyframes ping-silver {
  0%        { box-shadow: 0 0 0 0 rgba(214,218,224,0.55); }
  80%, 100% { box-shadow: 0 0 0 8px rgba(214,218,224,0); }
}

/* ── Hero: mais compacto, cabe na primeira tela ── */
.page-intel .in-hero { padding: calc(var(--nav-h) + clamp(24px, 4vw, 56px)) 0 clamp(56px, 7vw, 96px); min-height: min(100svh, 880px); display: flex; align-items: center; }
.page-intel .in-hero > .container { width: 100%; }
.in-hero .title-row { margin-bottom: 4px; }
.page-intel .in-h1 { margin-top: 22px; font-size: clamp(38px, 4.5vw, 64px); letter-spacing: -0.03em; line-height: 1.04; max-width: none; }
.in-h1 .lines, .in-h1 .line { display: block; }
.page-intel .hero .lead { margin-top: 22px; max-width: 54ch; }
.page-intel .hero-cta { margin-top: 30px; }

/* Palavra que troca: marketing → negócios → tecnologia */
.in-rot { display: block; white-space: nowrap; }
.in-rot-pre { opacity: 0; transition: opacity .8s var(--ease) .5s; }
.loaded .in-rot-pre { opacity: 1; }
.in-rot-box { display: inline-grid; vertical-align: bottom; }
.in-rot-word { grid-area: 1 / 1; opacity: 0; transform: translateY(55%); filter: blur(6px); transition: opacity .55s var(--ease), transform .7s var(--ease), filter .55s var(--ease); }
.in-rot-word.is-on { opacity: 1; transform: none; filter: none; }
.in-rot-word.is-out { opacity: 0; transform: translateY(-55%); filter: blur(6px); }

/* Chat de demonstração, na seção Converse (cartão dourado, como no Audience to Business) */
.in-demo { position: relative; max-width: 500px; margin-left: auto; width: 100%; }
.in-demo-back { position: absolute; inset: 6% -5% 6% 10%; border-radius: 24px; background: rgba(255,255,255,0.03); border: 1px solid rgba(232,201,106,0.16); transform: rotate(5deg); }
.in-demo-card { position: relative; border-radius: 24px; padding: 22px; transform: rotate(-2.5deg);
  background: radial-gradient(70% 60% at 85% 0%, rgba(232,201,106,0.12), transparent 60%), linear-gradient(160deg, #1C160A, #0D0A03);
  border: 1px solid rgba(232,201,106,0.3); box-shadow: 0 40px 90px rgba(0,0,0,0.55); animation: in-float 7s ease-in-out infinite; }
@keyframes in-float { 0%, 100% { transform: rotate(-2.5deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-8px); } }
.in-demo-top { display: flex; align-items: center; gap: 12px; }
.in-demo-ico { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(232,201,106,0.3); color: var(--gold-bright); }
.in-demo-ico svg { width: 19px; height: 19px; animation: in-spin 9s linear infinite; }
@keyframes in-spin { to { transform: rotate(360deg); } }
.in-demo-top small { display: block; font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-light); }
.in-demo-top b { display: block; font-family: var(--font-heading); font-size: 18px; color: var(--white); }
.in-demo-tag { margin-left: auto; padding: 5px 11px; border-radius: 100px; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--white); background: rgba(232,201,106,0.12); border: 1px solid rgba(232,201,106,0.35); transition: opacity .3s; }
.in-demo-thread { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; min-height: 252px; }
.in-msg { max-width: 88%; padding: 12px 15px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; }
.in-msg.eu { align-self: flex-end; background: rgba(255,255,255,0.08); color: var(--white); border-bottom-right-radius: 6px; min-height: 45px; }
.in-msg.ia { align-self: flex-start; background: rgba(232,201,106,0.06); border: 1px solid rgba(232,201,106,0.22); color: rgba(255,255,255,0.86); border-bottom-left-radius: 6px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease); }
.in-msg.ia.show { opacity: 1; transform: none; }
.in-msg.ia ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.in-msg.ia li { position: relative; padding-left: 16px; opacity: 0; transform: translateY(6px); transition: opacity .45s, transform .5s var(--ease); }
.in-msg.ia li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 2px; background: var(--gold-fill); }
.in-msg.ia li.show { opacity: 1; transform: none; }
.in-caret { display: inline-block; width: 1.5px; height: 16px; margin-left: 2px; vertical-align: -3px; background: var(--gold-bright); animation: caret 1s steps(1) infinite; }
.in-dots { display: none; gap: 5px; padding: 3px 0; }
.in-msg.ia.pensando .in-dots { display: inline-flex; }
.in-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-light); animation: in-dot 1.1s ease-in-out infinite; }
.in-dots i:nth-child(2) { animation-delay: .15s; } .in-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes in-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.in-demo-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(232,201,106,0.14); }
.in-demo-ctx { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,0.6); }
.in-demo-ctx i { width: 7px; height: 7px; border-radius: 50%; background: #51CF6C; box-shadow: 0 0 0 0 rgba(81,207,108,.5); animation: in-ping 2s infinite; }
@keyframes in-ping { 70%, 100% { box-shadow: 0 0 0 7px rgba(81,207,108,0); } }
.in-demo-send { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--gold-fill); color: var(--white); }
.in-demo-send svg { width: 16px; height: 16px; }


/* ── Hero: Raio X das 6 dimensões com resultados aparecendo em volta ── */
.in-cap { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / .92; margin-left: auto; }
.in-cap-glow { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(232,201,106,0.16), rgba(214,218,224,0.05) 45%, transparent 70%); filter: blur(10px); animation: in-breath 6s ease-in-out infinite; }
@keyframes in-breath { 50% { transform: scale(1.08); opacity: .75; } }
.in-cap-radar { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.in-cap-radar .g { fill: none; stroke: rgba(214,218,224,0.14); stroke-width: 1; }
.in-cap-radar .area { fill: rgba(232,201,106,0.14); stroke: #E8C96A; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 12px rgba(232,201,106,0.35)); }
.in-cap-radar .v { fill: var(--c); stroke: #0B0B0D; stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform .5s var(--ease); }
.in-cap-radar .v.on { transform: scale(1.9); animation: in-vpulse 1.4s ease-in-out infinite; }
@keyframes in-vpulse { 50% { filter: drop-shadow(0 0 8px var(--c)); } }
.in-cap-radar text { font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; fill: rgba(255,255,255,0.45); transition: fill .4s; }
.in-cap-radar text.on { fill: var(--white); }
.in-cap-core { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: grid; place-items: center; z-index: 2; background: radial-gradient(circle at 30% 25%, #2A2112, #0B0B0D 70%); border: 2px solid #C8A84B; color: var(--white); box-shadow: 0 0 0 0 rgba(232,201,106,0.5), 0 10px 30px rgba(0,0,0,0.5); animation: in-core 2.4s ease-out infinite; }
.in-cap-core img { width: 54px; height: 54px; margin-top: -2px; }
@keyframes in-core { 0% { box-shadow: 0 0 0 0 rgba(232,201,106,0.45), 0 10px 30px rgba(0,0,0,0.5); } 100% { box-shadow: 0 0 0 26px rgba(232,201,106,0), 0 10px 30px rgba(0,0,0,0.5); } }

.in-cap-card { position: absolute; z-index: 3; width: min(240px, 45%); padding: 12px 14px 13px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(34,27,12,0.92), rgba(12,10,4,0.92)); border: 1px solid rgba(232,201,106,0.32);
  box-shadow: 0 18px 44px rgba(0,0,0,0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(10px) scale(.94); transition: opacity .45s var(--ease), transform .6s var(--ease); }
.in-cap-card.show { opacity: 1; transform: none; }
.in-cap-card[data-slot="0"] { left: -5%; top: 8%; }
.in-cap-card[data-slot="1"] { right: -6%; top: 40%; }
.in-cap-card[data-slot="2"] { left: -2%; bottom: 0; }
.in-cap-card .hd { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.in-cap-card .hd i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.in-cap-card .hd .ok { margin-left: auto; color: #7EE2A0; letter-spacing: .06em; opacity: 0; transition: opacity .3s; }
.in-cap-card.done .hd .ok { opacity: 1; }
.in-cap-card b { display: block; margin-top: 6px; font-family: var(--font-heading); font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--white); }
.in-cap-card p { margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,0.62); }
.in-cap-card .pb { display: block; height: 3px; margin-top: 10px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.in-cap-card .pb::after { content: ''; display: block; height: 100%; background: var(--gold-fill); transform: scaleX(0); transform-origin: left; }
.in-cap-card.show .pb::after { transition: transform 1.1s var(--ease) .15s; transform: scaleX(1); }

/* ── As 6 dimensões: lista que passa sozinha e painel da dimensão ── */
.in-dx { display: grid; grid-template-columns: minmax(250px, .85fr) 2fr; gap: clamp(20px, 3vw, 36px); margin-top: clamp(36px, 5vw, 56px); }
.in-dx-list { display: flex; flex-direction: column; gap: 8px; }
.in-dx-tab { position: relative; overflow: hidden; display: flex; gap: 14px; align-items: center; text-align: left; padding: 14px 18px; border-radius: var(--radius-md); background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); transition: background .3s, border-color .3s, color .3s; }
.in-dx-tab:hover { border-color: rgba(214,218,224,0.3); color: var(--white); }
.in-dx-tab > i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 4px rgba(255,255,255,0.04); transition: box-shadow .4s; }
.in-dx-tab b { display: block; font-family: var(--font-heading); font-size: 16px; font-weight: 600; color: inherit; }
.in-dx-tab small { display: block; margin-top: 1px; font-size: 12.5px; color: rgba(255,255,255,0.5); }
.in-dx-tab.is-on { background: rgba(255,255,255,0.05); border-color: color-mix(in srgb, var(--c) 60%, transparent); color: var(--white); }
.in-dx-tab.is-on > i { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 25%, transparent), 0 0 16px var(--c); }
.in-dx-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--c); transform: scaleX(0); transform-origin: left; }
.in-dx.playing .in-dx-tab.is-on .in-dx-bar { animation: in-bar var(--dx-t, 6.5s) linear forwards; }

.in-dx-panel { position: relative; overflow: hidden; border-radius: 22px; padding: clamp(24px, 3vw, 38px); border: 1px solid rgba(214,218,224,0.14); background: radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--c, #C8A84B) 18%, transparent), transparent 65%), rgba(255,255,255,0.02); transition: background .6s; min-height: 470px; }
.in-dx-panel::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--c); }
.in-dx-num { font-family: var(--font-display); font-size: 13px; letter-spacing: .1em; color: rgba(255,255,255,0.45); }
.in-dx-name { margin-top: 6px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.in-dx-name h3 { font-size: clamp(30px, 3.4vw, 44px); color: var(--white); letter-spacing: -0.03em; }
.in-dx-name span { font-family: var(--font-heading); font-size: 17px; font-weight: 500; color: rgba(255,255,255,0.6); }
.in-dx-desc { margin-top: 10px; max-width: 62ch; font-size: 16px; line-height: 1.65; color: rgba(220,224,230,0.72); }
.in-dx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin-top: 26px; }
.in-dx-h { font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 10px; }
.in-dx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.in-dx-chips span { padding: 7px 12px; border-radius: 100px; font-size: 13px; color: var(--white); background: rgba(255,255,255,0.05); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.in-dx-chips.fw span { border-color: rgba(214,218,224,0.2); color: rgba(255,255,255,0.8); }
.in-dx-full { grid-column: 1 / -1; }
.in-dx-qs { display: flex; flex-direction: column; gap: 8px; }
.in-dx-qs span { align-self: flex-start; max-width: 100%; padding: 10px 14px; border-radius: 14px 14px 14px 6px; font-size: 14px; color: rgba(255,255,255,0.88); background: rgba(232,201,106,0.06); border: 1px solid rgba(232,201,106,0.22); }
.in-dx-qs span::before { content: '“'; color: var(--gold-light); margin-right: 2px; }
.in-dx-qs span::after { content: '”'; color: var(--gold-light); margin-left: 2px; }
/* entrada em cascata a cada troca */
.in-dx-panel .st { opacity: 0; transform: translateY(12px); animation: in-pop .55s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes in-pop { to { opacity: 1; transform: none; } }

/* ── Converse: texto à esquerda e o chat à direita ── */
.in-conv { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }

/* Unidades de negócio: mapa com a empresa no centro */
.in-v-units { position: relative; height: 260px; }
.in-v-units .lns { position: absolute; inset: 0; width: 100%; height: 100%; }
.in-v-units .lns line { stroke: rgba(232,201,106,0.45); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 160; stroke-dashoffset: 160; }
.in-v-units .lns line.nova { stroke: #E8C96A; stroke-dasharray: 4 5; stroke-dashoffset: 0; opacity: 0; }
.is-on .in-v-units .lns line { animation: in-draw .8s var(--ease) forwards; }
.is-on .in-v-units .lns line:nth-child(2) { animation-delay: .15s; } .is-on .in-v-units .lns line:nth-child(3) { animation-delay: .3s; }
.is-on .in-v-units .lns line.nova { animation: in-show .5s ease 1.6s forwards, in-march 1s linear 1.6s infinite; }
@keyframes in-draw { to { stroke-dashoffset: 0; } }
@keyframes in-show { to { opacity: 1; } }
@keyframes in-march { to { stroke-dashoffset: -18; } }
.in-v-units .u { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%) scale(.8); opacity: 0; padding: 10px 14px; border-radius: 12px; text-align: center; background: rgba(20,17,9,0.95); border: 1px solid rgba(255,255,255,0.12); }
.in-v-units .u small { display: block; font-family: var(--font-ui); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.in-v-units .u b { display: block; font-family: var(--font-heading); font-size: 14.5px; color: var(--white); }
.in-v-units .u.centro { --x: 50%; --y: 50%; padding: 14px 18px; background: var(--gold-fill); border-color: transparent; box-shadow: var(--shadow-gold); }
.in-v-units .u.nova { border: 1px dashed #E8C96A; background: rgba(232,201,106,0.08); }
.in-v-units .u.nova small { color: var(--gold-bright); }
.is-on .in-v-units .u { animation: in-node .6s var(--ease) forwards; }
.is-on .in-v-units .u:nth-of-type(2) { animation-delay: .5s; } .is-on .in-v-units .u:nth-of-type(3) { animation-delay: .65s; }
.is-on .in-v-units .u:nth-of-type(4) { animation-delay: .8s; } .is-on .in-v-units .u.nova { animation-delay: 1.9s; }
@keyframes in-node { to { opacity: 1; transform: translate(-50%, -50%); } }

/* ── O que é: tabela "o que trava hoje" × "como o Intelligence resolve" ──
   Cada linha entra ao aparecer na tela: a dor é riscada e a solução desliza. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.in-tab-wrap { --claro: var(--gray-1); --escuro: #120E06; margin-top: clamp(36px, 5vw, 56px); border-radius: 22px; overflow: hidden; border: 1px solid var(--gray-2); box-shadow: var(--shadow-md); background: var(--claro); }
.in-tab { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* Esquerda clara, direita escura; a coluna da seta divide as duas cores ao meio
   (cabeçalho e corpo iguais), para a seta ficar exatamente na divisa. */
.in-tab .antes { background: var(--claro); }
.in-tab .depois { background: var(--escuro); }
.in-tab .seta { width: 56px; padding: 0; text-align: center; background: linear-gradient(90deg, var(--claro) 50%, var(--escuro) 50%); }
.in-tab th { padding: 20px 28px; text-align: left; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; box-shadow: inset 0 -1px 0 var(--gray-2); }
.in-tab th.depois { box-shadow: inset 0 -1px 0 rgba(232,201,106,0.18); }
.in-tab thead .seta { box-shadow: inset 0 -1px 0 rgba(120,100,70,0.16); }
.th-in { display: inline-flex; align-items: center; gap: 10px; }
.th-in .curto { display: none; }
.th-in i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 10px; letter-spacing: 0; }
.in-tab th.antes { color: var(--gray-4); }
.in-tab th.antes i { background: rgba(168,152,128,0.22); color: var(--gray-4); }
.in-tab th.depois { color: var(--gold-light); }
.in-tab th.depois i { background: var(--gold-fill); color: var(--white); }
.in-tab td { padding: 24px 28px; vertical-align: middle; }
.in-tab tbody tr + tr td.antes { border-top: 1px solid var(--gray-2); }
.in-tab tbody tr + tr td.depois { border-top: 1px solid rgba(232,201,106,0.14); }
.in-tab td b { display: block; font-family: var(--font-heading); font-size: 17px; font-weight: 600; line-height: 1.3; }
.in-tab td p { margin-top: 4px; font-size: 14.5px; line-height: 1.55; }
.in-tab td.antes b { color: var(--gray-4); }
.in-tab td.antes p { color: var(--gray-3); }
.in-tab td.antes b span { background-image: linear-gradient(var(--gray-3), var(--gray-3)); background-repeat: no-repeat; background-position: 0 58%; background-size: 0% 2px; transition: background-size .7s var(--ease) .4s; }
.in-tab tr.in td.antes b span { background-size: 100% 2px; }
.in-tab td.seta span { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gold-fill); color: var(--white); font-size: 15px; font-weight: 700; box-shadow: 0 0 0 5px var(--escuro), var(--shadow-gold); transform: scale(0) rotate(-90deg); transition: transform .5s var(--ease) .8s; }
.in-tab tr.in td.seta span { transform: none; }
.in-tab td.depois b { color: var(--white); }
.in-tab td.depois p { color: rgba(255,255,255,0.66); }
.in-tab td.depois > * { opacity: 0; transform: translateX(-12px); transition: opacity .55s var(--ease) 1s, transform .6s var(--ease) 1s; }
.in-tab tr.in td.depois > * { opacity: 1; transform: none; }
.in-tab tbody tr:hover td.depois { background: #1B150A; }
/* a linha da tabela não desloca (só aparece); quem se move é o conteúdo */
.in-tab tr.reveal { transform: none; }

/* ── Intelligence × IA de uso geral ── */
/* Os dois lados ficam um sobre o outro; o do Intelligence é recortado a partir
   de --pos. Arrastar o controle muda --pos (assets/js/intelligence.js). */
.vs-cmp { position: relative; display: grid; margin-top: clamp(36px, 5vw, 56px); border-radius: 24px; overflow: hidden; box-shadow: 0 30px 70px rgba(26,18,0,0.18); user-select: none; -webkit-user-select: none; }
.vs-cmp > .vs-lado { grid-area: 1 / 1; }
.vs-lado { --pad: clamp(24px, 3.4vw, 44px); display: flex; flex-direction: column; padding: var(--pad); }
/* Posições de encaixe: com o Intelligence em foco sobra uma faixa do lado geral
   (0 a --snap-l) e vice-versa. O conteúdo de cada lado fica só na área que ele
   ocupa quando está em foco. */
.vs-cmp { --snap-l: 28%; --snap-r: 72%; }
.vs-geral { padding-right: calc(100% - var(--snap-r) + var(--pad)); }
.vs-intel { padding-left: calc(var(--snap-l) + var(--pad)); }
.vs-tag .curto { display: none; }
.vs-intel { clip-path: inset(0 0 0 var(--pos)); }
.vs-cmp.suave .vs-intel { transition: clip-path .75s cubic-bezier(.22,1,.36,1); }
.vs-cmp.suave .vs-handle { transition: left .75s cubic-bezier(.22,1,.36,1); }
/* encaixado num lado: o controle encosta na borda, sem sair do quadro */
.vs-handle span { transition: scale .2s, translate .75s cubic-bezier(.22,1,.36,1); }
.vs-cmp.na-esquerda .vs-handle span { translate: 0 -50%; }
.vs-cmp.na-direita .vs-handle span { translate: -100% -50%; }
.vs-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.4vw, 48px); align-items: start; margin-top: 22px; }
@media (min-width: 961px) { .vs-geral { justify-content: center; } .vs-geral .vs-body { align-items: center; } }
.vs-col { display: flex; flex-direction: column; gap: 22px; }
.vs-tags { position: absolute; top: 18px; left: 18px; right: 18px; z-index: 3; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.vs-tag { pointer-events: auto; padding: 7px 13px; border-radius: 100px; font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: transform .2s, background .3s, color .3s; }
.vs-tag.l { color: var(--gray-4); background: var(--white); border: 1px solid var(--gray-2); }
.vs-tag.r { color: var(--white); background: var(--gold-fill); border: 1px solid transparent; }
.vs-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 4; width: 0; cursor: ew-resize; touch-action: none; }
.vs-handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--gold-fill); box-shadow: 0 0 18px rgba(232,201,106,0.6); }
.vs-handle span { position: absolute; top: 50%; left: 0; translate: -50% -50%; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: var(--white); background: var(--gold-fill); border: 3px solid var(--white); box-shadow: var(--shadow-gold), 0 6px 20px rgba(0,0,0,0.25); transition: scale .2s; }
.vs-handle span svg { width: 22px; height: 22px; }
.vs-cmp.arrastando .vs-handle span, .vs-handle:hover span { scale: 1.08; }
.vs-range { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vs-range:focus-visible + * , .vs-cmp:has(.vs-range:focus-visible) .vs-handle span { outline: 3px solid var(--gold-light); outline-offset: 3px; }
.vs-dica { margin-top: 14px; text-align: center; font-size: 13px; color: var(--gray-3); }
.vs-dica::before { content: '⟷  '; color: var(--gold); }
.vs-cmp[data-lado] .vs-intel { margin-top: 0; }
.vs-dica .curto { display: none; }
.vs-geral { background: var(--gray-body); }
.vs-intel { --prata: linear-gradient(110deg, #8E9196 0%, #F4F5F7 42%, #BFC3C8 62%, #7C8087 100%); --linha-prata: rgba(214,218,224,0.28); color: var(--white);
  background: radial-gradient(70% 55% at 80% 0%, rgba(220,224,230,0.10), transparent 70%), linear-gradient(160deg, #1D1E21 0%, #0D0E10 55%, #070708 100%); }
.vs-tit small { display: block; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-3); }
.vs-intel .vs-tit small { color: var(--gold-light); }
.vs-tit { padding-top: 40px; }
/* Foco: o lado que ocupa menos espaço fica desfocado e mais apagado (--bg/--og e --bi/--oi vêm do JS) */
.vs-geral > * { filter: blur(var(--bg, 0px)); opacity: var(--og, 1); transition: filter .25s, opacity .25s; }
.vs-intel > * { filter: blur(var(--bi, 0px)); opacity: var(--oi, 1); transition: filter .25s, opacity .25s; }
.vs-ias { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.vs-ias span { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 100px; font-family: var(--font-heading); font-size: 17px; font-weight: 600; color: var(--black); background: var(--white); border: 1px solid var(--gray-2); }
.vs-ias .lg { width: 24px; height: 24px; }
.vs-sub { margin-top: 10px; max-width: 52ch; font-size: 15.5px; line-height: 1.6; color: var(--gray-4); }
.vs-tit b { display: block; margin-top: 4px; font-family: var(--font-heading); font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.02em; }

/* lado geral: um chat isolado que pede contexto */
.vs-chat { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 16px; background: var(--white); border: 1px solid var(--gray-2); min-height: 250px; }
.vs-chat .b { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.vs-chat .eu { align-self: flex-end; background: var(--gray-1); color: var(--black); border-bottom-right-radius: 5px; }
.vs-chat .ia { align-self: flex-start; background: var(--white); border: 1px solid var(--gray-2); color: var(--gray-4); border-bottom-left-radius: 5px; }
.vs-chat .dots { display: inline-flex; gap: 4px; padding: 12px 14px; }
.vs-chat .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-3); animation: in-dot 1.1s ease-in-out infinite; }
.vs-chat .dots i:nth-child(2) { animation-delay: .15s; } .vs-chat .dots i:nth-child(3) { animation-delay: .3s; }

/* lado Intelligence: módulos trocando dados com o centro e entre si */
.vs-rede { position: relative; aspect-ratio: 400 / 340; margin: 14px 0 8px; }
.vs-rede-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vs-rede-svg .raio { stroke: rgba(232,201,106,0.35); stroke-width: 1.2; fill: none; }
.vs-rede-svg .arco { stroke: rgba(214,218,224,0.16); stroke-width: 1; stroke-dasharray: 3 5; fill: none; }
.vs-rede-svg .dado { fill: #E8C96A; filter: drop-shadow(0 0 4px rgba(232,201,106,0.9)); }
.vs-rede-svg .dado.b { fill: #D6DAE0; filter: drop-shadow(0 0 4px rgba(214,218,224,0.8)); }
.vs-centro { position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #2A2112, #0B0B0D 70%); border: 2px solid #C8A84B; animation: in-core 2.4s ease-out infinite; }
.vs-centro img { width: 56px; height: 56px; margin-top: -2px; }
.vs-no { position: absolute; translate: -50% -50%; padding: 7px 13px; border-radius: 100px; white-space: nowrap; font-family: var(--font-heading); font-size: 13px; font-weight: 600; color: var(--white); background: rgba(24,20,10,0.95); border: 1px solid rgba(232,201,106,0.35); animation: vs-no 6s ease-in-out infinite; animation-delay: calc(var(--i) * 1s); }
@keyframes vs-no { 0%, 12% { box-shadow: 0 0 0 0 rgba(232,201,106,0); } 6% { box-shadow: 0 0 0 6px rgba(232,201,106,0.22), 0 0 22px rgba(232,201,106,0.5); } }
.vs-ctx { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 12.5px; color: rgba(255,255,255,0.6); }
.vs-ctx b { height: 6px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.vs-ctx i { display: block; height: 100%; width: 100%; background: var(--gold-fill); transform-origin: left; animation: vs-ctx 6s var(--ease) infinite; }
@keyframes vs-ctx { 0% { transform: scaleX(.18); } 85%, 100% { transform: scaleX(1); } }

.vs-lista { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.vs-lista li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.55; }
.vs-lista li::before { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.vs-geral .vs-lista li { color: var(--gray-4); }
.vs-geral .vs-lista li::before { content: '–'; background: rgba(168,152,128,0.2); color: var(--gray-4); }
.vs-intel .vs-lista li { color: rgba(255,255,255,0.72); }
.vs-intel .vs-lista li strong { color: var(--white); font-weight: 600; }
.vs-intel .vs-lista li::before { content: '✓'; background: var(--gold-fill); color: var(--white); }

/* Radar, dentro do lado do Intelligence */
.vs-radar { margin-top: 4px; padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(232,201,106,0.22); }
.vs-radar img { width: 104px; height: auto; margin: -6px 0 0 -4px; }
.vs-radar p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.7); }
.vs-radar p b { color: var(--white); font-weight: 600; }
.vs-radar .link-arrow { margin-top: 10px; font-size: 14px; color: var(--gold-light); }

/* ── Soluções: abas que passam sozinhas ── */
.in-sol { display: grid; grid-template-columns: minmax(250px, .8fr) 2fr; gap: clamp(20px, 3vw, 36px); margin-top: clamp(36px, 5vw, 56px); }
.in-sol-tabs { display: flex; flex-direction: column; gap: 8px; }
.in-sol-tab { position: relative; overflow: hidden; display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 16px 18px; border-radius: var(--radius-md); background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); transition: background .3s, border-color .3s, color .3s; }
.in-sol-tab:hover { border-color: rgba(214,218,224,0.3); color: var(--white); }
.in-sol-tab i { font-family: var(--font-display); font-size: 12px; color: var(--silver); padding-top: 3px; }
.in-sol-tab b { display: block; font-family: var(--font-heading); font-size: 16px; font-weight: 600; color: inherit; }
.in-sol-tab small { display: block; margin-top: 2px; font-size: 13px; color: rgba(255,255,255,0.5); }
.in-sol-tab.is-on { background: rgba(232,201,106,0.07); border-color: rgba(232,201,106,0.35); color: var(--white); }
.in-sol-tab.is-on i { color: var(--gold-bright); }
.in-sol-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--gold-fill); transform: scaleX(0); transform-origin: left; }
.in-sol.playing .in-sol-tab.is-on .in-sol-bar { animation: in-bar var(--sol-t, 7s) linear forwards; }
@keyframes in-bar { to { transform: scaleX(1); } }

.in-sol-panels { position: relative; border-radius: 22px; border: 1px solid rgba(214,218,224,0.14); background: radial-gradient(80% 60% at 100% 0%, rgba(214,218,224,0.07), transparent 60%), rgba(255,255,255,0.02); padding: clamp(22px, 3vw, 36px); min-height: 440px; }
.in-sol-panel { display: grid; grid-template-rows: auto 1fr; gap: 24px; height: 100%; }
.in-sol-panel.is-on { animation: in-panel .6s var(--ease); }
@keyframes in-panel { from { opacity: 0; transform: translateY(14px); } }
.in-p-txt h3 { font-size: clamp(22px, 2.2vw, 28px); color: var(--white); }
.in-p-txt p { margin-top: 10px; max-width: 60ch; font-size: 15.5px; line-height: 1.65; color: rgba(220,224,230,0.68); }
.in-p-vis { position: relative; align-self: center; }

/* Agentes: barras de progresso que terminam em "Pronto" */
.in-v-agents { display: flex; flex-direction: column; gap: 12px; }
.in-v-agents .ag { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; padding: 15px 17px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
.in-v-agents .n { font-family: var(--font-heading); font-size: 15px; font-weight: 600; color: var(--white); }
.in-v-agents .st { font-size: 12.5px; color: rgba(255,255,255,0.55); }
.in-v-agents .pb { grid-column: 1 / -1; height: 5px; border-radius: 4px; background: rgba(255,255,255,0.07); overflow: hidden; }
.in-v-agents .pb i { display: block; height: 100%; width: 100%; background: var(--gold-fill); transform: scaleX(0); transform-origin: left; }
.is-on .in-v-agents .pb i { animation: in-bar var(--t) var(--ease) .3s forwards; }
.is-on .in-v-agents .st::after { content: ''; animation: in-pronto var(--t) steps(1) .3s forwards; }
.in-v-agents .ag:nth-child(1) .st::after { --t: 2.4s; } .in-v-agents .ag:nth-child(2) .st::after { --t: 3.2s; } .in-v-agents .ag:nth-child(3) .st::after { --t: 4s; }
@keyframes in-pronto { to { content: ' · pronto ✓'; } }
.in-v-agents .st::after { color: #7EE2A0; }
.in-v-agents .ag-note { font-size: 12.5px; color: rgba(255,255,255,0.45); margin-top: 2px; }

/* Biblioteca: cartas que se abrem em leque */
.in-v-lib { height: 230px; display: grid; place-items: center; }
.in-v-lib .fw { grid-area: 1 / 1; width: min(190px, 30%); aspect-ratio: 3 / 4; padding: 18px; border-radius: 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  background: linear-gradient(160deg, #1C160A, #0D0A03); border: 1px solid rgba(232,201,106,0.3); box-shadow: 0 24px 50px rgba(0,0,0,0.45); transform: translateX(0) rotate(0); }
.in-v-lib .fw small { font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); }
.in-v-lib .fw b { font-family: var(--font-heading); font-size: 16px; line-height: 1.2; color: var(--white); }
.is-on .in-v-lib .fw { animation: in-leque 1s var(--ease) .2s forwards; }
@keyframes in-leque { to { transform: translateX(var(--x)) rotate(var(--r)); } }

/* Canais: rosca e contador */
.in-v-canais { display: grid; grid-template-columns: auto 1fr; gap: 10px 32px; align-items: center; }
.in-v-canais .rosca { width: 200px; height: 200px; grid-row: span 2; transform: rotate(-90deg); }
.in-v-canais .rosca circle { fill: none; stroke-width: 5; }
.in-v-canais .rosca .t { stroke: rgba(255,255,255,0.07); }
.in-v-canais .rosca .s { stroke-dasharray: 0 100; stroke-linecap: butt; }
.in-v-canais .s1 { stroke: #C8A84B; } .in-v-canais .s2 { stroke: #BFC3C8; } .in-v-canais .s3 { stroke: #7A5C1E; }
.is-on .in-v-canais .s1 { animation: in-s1 1.2s var(--ease) forwards; }
.is-on .in-v-canais .s2 { animation: in-s2 1.2s var(--ease) .25s forwards; }
.is-on .in-v-canais .s3 { animation: in-s3 1.2s var(--ease) .5s forwards; }
@keyframes in-s1 { to { stroke-dasharray: 58 42; stroke-dashoffset: 0; } }
@keyframes in-s2 { from { stroke-dashoffset: -58; } to { stroke-dasharray: 27 73; stroke-dashoffset: -58; } }
@keyframes in-s3 { from { stroke-dashoffset: -85; } to { stroke-dasharray: 15 85; stroke-dashoffset: -85; } }
.in-v-canais .tot b { display: block; font-family: var(--font-display); font-size: clamp(34px, 4vw, 48px); font-weight: 600; letter-spacing: -0.03em; color: var(--white); }
.in-v-canais .tot small { font-size: 13px; color: rgba(255,255,255,0.55); }
.in-v-canais .leg { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.in-v-canais .leg li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,0.75); }
.in-v-canais .leg i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.in-v-canais .leg b { margin-left: auto; color: var(--white); font-weight: 600; }

/* ── Integrações: as ferramentas girando em volta do Intelligence ──
   Os anéis giram e cada selo gira ao contrário, para o texto ficar sempre em pé. */
.in-int { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: clamp(36px, 5vw, 56px); }
.in-orb { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; margin: 0 auto; container-type: inline-size; }
.in-orb::before { content: ''; position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle, rgba(184,134,11,0.18), transparent 70%); animation: in-breath 6s ease-in-out infinite; }
.in-orb-ring { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(122,92,30,0.25); animation: in-orbit var(--dur) linear infinite; }
.in-orb-ring.r2 { inset: 7%; --dur: 70s; --R: 43cqw; }
.in-orb-ring.r1 { inset: 25%; --dur: 50s; --R: 25cqw; animation-direction: reverse; }
@keyframes in-orbit { to { transform: rotate(360deg); } }
.in-orb-chip { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(calc(var(--R) * -1)) rotate(calc(var(--a) * -1)); }
.in-orb-in { position: absolute; left: 0; top: 0; translate: -50% -50%; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 6px 12px 6px 6px; border-radius: 100px; background: var(--white); border: 1px solid var(--gray-2); box-shadow: var(--shadow-md); font-family: var(--font-heading); font-size: 12.5px; font-weight: 600; color: var(--black); animation: in-orbit var(--dur) linear infinite reverse; }
.r1 .in-orb-in { animation-direction: normal; }
/* Logos das plataformas (Simple Icons, CC0) pintadas na cor da marca por máscara */
.lg, .lg-txt, .lg-radar { flex: none; display: inline-block; font-style: normal; }
.lg { width: 15px; height: 15px; background: var(--c); -webkit-mask: var(--lg) center / contain no-repeat; mask: var(--lg) center / contain no-repeat; }
.lg-txt { width: 18px; height: 18px; border-radius: 5px; display: inline-grid; place-items: center; font-family: var(--font-display); font-size: 8.5px; font-weight: 700; color: var(--white); background: var(--c); }
.lg-radar { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--white); background: var(--gold-fill); }
.lg-radar svg { width: 13px; height: 13px; }
.in-orb-in .lg, .in-orb-in .lg-txt, .in-orb-in .lg-radar { width: 26px; height: 26px; }
.in-orb-in .lg { -webkit-mask-size: 17px; mask-size: 17px; }
.in-orb-in .lg-txt { border-radius: 50%; font-size: 10px; }
.in-orb-in .lg-radar svg { width: 17px; height: 17px; }
.in-orb-in { padding: 5px 13px 5px 5px; }
.in-orb-core { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 4px; color: var(--white); background: radial-gradient(circle at 30% 25%, #2A2112, #0B0B0D 70%); border: 1px solid rgba(232,201,106,0.4); box-shadow: 0 20px 50px rgba(26,18,0,0.35); animation: in-core 2.6s ease-out infinite; }
.in-orb-core img { width: 56px; height: 56px; margin: -10px 0 -8px; }
.in-orb-core b { font-family: var(--font-heading); font-size: 13px; font-weight: 600; }

.in-int-list { display: flex; flex-direction: column; gap: 14px; }
.in-int-g { padding: 20px 22px; border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--gray-2); }
.in-int-gh { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.in-int-gh b { font-family: var(--font-heading); font-size: 17px; font-weight: 600; }
.in-int-st { padding: 4px 10px; border-radius: 100px; font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dark); background: var(--gold-ghost); border: 1px solid var(--gold-border); }
.in-int-st.ok { color: #15803D; background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.3); }
.in-int-g p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--gray-4); }
.in-int-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.in-int-tags span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 8px; border-radius: 100px; font-size: 12.5px; font-weight: 500; color: var(--black); background: var(--gray-body); border: 1px solid var(--gray-2); }

/* ── Como funciona: linha que se desenha entre os passos ── */
.in-steps { position: relative; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: clamp(36px, 5vw, 56px); }
.in-steps::before { content: ''; position: absolute; left: 28px; right: 28px; top: 27px; height: 2px; background: var(--gold-fill); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease) .3s; }
.in-steps.in::before { transform: scaleX(1); }
.in-step { position: relative; }
.in-step-num { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--white); background: var(--gold-fill); box-shadow: 0 0 0 8px var(--white), var(--shadow-gold); margin-bottom: 22px; transform: scale(.6); opacity: 0; transition: transform .6s var(--ease), opacity .6s; }
.in-steps.in .in-step-num { transform: none; opacity: 1; }
.in-steps.in .in-step:nth-child(2) .in-step-num { transition-delay: .7s; } .in-steps.in .in-step:nth-child(3) .in-step-num { transition-delay: 1.3s; }
.in-step h3 { font-size: 21px; }
.in-step p { margin-top: 10px; color: var(--gray-4); font-size: 15.5px; line-height: 1.65; }

/* ── Formas de acesso ── */
.in-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(36px, 5vw, 56px); align-items: stretch; }
.in-tier { display: flex; flex-direction: column; padding: 30px 28px 28px; border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--gray-2); }
.in-tier.destaque { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), var(--shadow-md); }
.in-tier small { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dark); }
.in-tier h3 { margin-top: 10px; font-size: 24px; }
.in-tier > p { margin-top: 10px; font-size: 15.5px; line-height: 1.65; color: var(--gray-4); }
.in-tier .checks { margin: 20px 0 26px; gap: 9px; flex: 1; }
.in-tier .checks li { font-size: 15px; color: var(--gray-4); }
.in-tier .btn { align-self: flex-start; }

/* Audience to Business com a identidade da formação: cartão escuro e o nome
   na mesma fonte da página dela (Poppins 700, "Business" em itálico creme) */
.in-tier--atb { background: radial-gradient(90% 70% at 100% 0%, rgba(232,201,106,0.10), transparent 60%), linear-gradient(160deg, #120D02, #050300); border-color: rgba(232,201,106,0.22); color: var(--white); }
.in-tier--atb small { color: #C8A84B; }
.in-tier--atb > p, .in-tier--atb .checks li { color: rgba(255,255,255,0.72); }
.in-tier--atb .checks li::before { background: linear-gradient(180deg, #F1E6C2, #D9C487); }
.atb-name { font-family: var(--font-heading); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.04em; color: var(--white); }
.in-tier .atb-name { font-size: 30px; }
.atb-name em { display: block; font-style: italic; padding-right: .08em; background: linear-gradient(180deg, #F1E6C2 0%, #E8D9A8 55%, #D9C487 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Botão contornado do cartão escuro, dentro de seção clara */
.page-intel .section:not(.section--dark) .in-tier--atb .btn-ghost { border-color: rgba(255,255,255,0.3); color: var(--white); }
.page-intel .section:not(.section--dark) .in-tier--atb .btn-ghost:hover { border-color: #E8D9A8; color: var(--white); }

/* ── FAQ ── */
.in-faq { margin-top: 28px; border-top: 1px solid var(--gray-2); }

@media (max-width: 960px) {
  .page-intel .in-hero { min-height: 0; }
  .in-demo { margin: 8px auto 0; }
  .in-tiers { grid-template-columns: 1fr; }
  .in-sol, .in-dx, .in-conv, .in-int, .vs-body { grid-template-columns: 1fr; }
  /* no celular e tablet, o Radar vai para depois da lista */
  .vs-intel .vs-body > div:first-child { display: contents; }
  .vs-intel .vs-col { order: 2; }
  .vs-intel .vs-radar { order: 3; }
  .in-cap { margin: 10px auto 0; max-width: 520px; }
  .in-dx-list { flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .in-dx-list::-webkit-scrollbar { display: none; }
  .in-dx-tab { flex: none; padding: 11px 15px; }
  .in-dx-tab small { display: none; }
  .in-dx-panel { min-height: 0; }
  .in-sol-tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .in-sol-tabs::-webkit-scrollbar { display: none; }
  .in-sol-tab { flex: none; padding: 12px 16px; }
  .in-sol-tab small { display: none; }
  .in-sol-panels { min-height: 0; }
  .in-steps { grid-template-columns: 1fr; gap: 30px; }
  .in-steps::before { left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; transform: scaleY(0); transform-origin: top; }
  .in-steps.in::before { transform: scaleY(1); }
  .in-step { padding-left: 80px; }
  .in-step-num { position: absolute; left: 0; top: 0; }
}
/* Celular e tablet pequeno: um lado inteiro por vez, com seletor (e deslizar) */
@media (max-width: 720px) {
  .vs-cmp { display: flex; flex-direction: column; background: var(--gray-body); border: 1px solid var(--gray-2); box-shadow: var(--shadow-md); }
  .vs-tags { position: relative; top: auto; left: auto; right: auto; order: -1; justify-content: center; gap: 0; margin: 14px auto 0; padding: 4px; border-radius: 100px; background: var(--white); border: 1px solid var(--gray-2); pointer-events: auto; }
  .vs-tag, .vs-tag.l, .vs-tag.r { padding: 9px 16px; border: 0; color: var(--gray-4); background: transparent; font-size: 10.5px; }
  .vs-tag[aria-pressed="true"] { color: var(--white); background: var(--gold-fill); }
  .vs-tag .longo { display: none; } .vs-tag .curto { display: inline; }
  .vs-cmp[data-lado="geral"] .vs-intel, .vs-cmp[data-lado="intel"] .vs-geral { display: none; }
  .vs-intel { clip-path: none !important; border-radius: 0 0 22px 22px; margin-top: 14px; }
  .vs-geral { padding-top: 18px; }
  .vs-lado { animation: in-panel .45s var(--ease); }
  .vs-lado > * { filter: none !important; opacity: 1 !important; }
  .vs-tit, .vs-tit-intel { padding-top: 0; }
  .vs-geral, .vs-intel { padding: var(--pad); }
  .vs-handle { display: none; }
  .vs-dica .longo { display: none; } .vs-dica .curto { display: inline; }
}
@media (max-width: 600px) {
  .in-hero .hero-cta .btn { width: 100%; }
  .in-demo-card { padding: 18px; }
  .in-demo-top small { display: none; }
  .in-demo-thread { min-height: 236px; }
  .in-msg { font-size: 13.5px; }
  .in-dx-grid { grid-template-columns: 1fr; }
  /* Celular: continua uma tabela só, compacta, só com os títulos */
  .in-tab-wrap { border-radius: 16px; }
  .vs-no { font-size: 11px; padding: 5px 9px; }
  .vs-centro { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  .vs-centro img { width: 46px; height: 46px; }
  .vs-chat { min-height: 0; }

  .in-tab .seta { width: 30px; }
  .in-tab th { padding: 14px 12px; font-size: 9.5px; letter-spacing: .12em; }
  .th-in { gap: 6px; }
  .th-in i { width: 18px; height: 18px; font-size: 8.5px; }
  .in-tab td { padding: 16px 12px; }
  .in-tab td b { font-size: 14px; line-height: 1.3; }
  .in-tab td p { display: none; }
  .th-in .longo { display: none; }
  .th-in .curto { display: inline; }
  .in-tab td.seta span { width: 26px; height: 26px; font-size: 12px; box-shadow: 0 0 0 3px var(--escuro); }
  .in-orb-in { font-size: 11px; padding: 4px 9px 4px 4px; gap: 5px; }
  .in-orb-in .lg, .in-orb-in .lg-txt, .in-orb-in .lg-radar { width: 20px; height: 20px; }
  .in-orb-in .lg { -webkit-mask-size: 14px; mask-size: 14px; }
  .in-orb-core { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
  .in-orb-core b { font-size: 11px; }
  .in-orb-core img { width: 44px; height: 44px; margin: -8px 0 -6px; }
  .in-cap-card { width: 54%; padding: 10px 12px; }
  .in-cap-card b { font-size: 13px; }
  .in-cap-card p { font-size: 11.5px; }
  .in-cap-card[data-slot="1"] { right: -2%; }
  .in-cap-radar text { font-size: 13px; }
  .in-v-canais { grid-template-columns: 1fr; justify-items: start; }
  .in-v-canais .rosca { width: 150px; height: 150px; grid-row: auto; }
  .in-v-lib { height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .in-demo-card, .in-demo-ico svg, .in-dots i, .in-demo-ctx i, .in-cap-glow, .in-cap-core, .in-cap-radar .v.on, .vs-chat .dots i, .vs-centro, .vs-no, .vs-ctx i, .in-orb::before, .in-orb-ring, .in-orb-in, .in-orb-core { animation: none !important; }
  .in-tab td.antes b span, .in-tab td.seta span, .in-tab td.depois > * { transition: none !important; }
  .in-dx-panel .st { animation: none; opacity: 1; transform: none; }
  .in-rot-word { transition: none; }
  .is-on .in-v-lib .fw, .is-on .in-v-agents .pb i, .is-on .in-v-units .u, .is-on .in-v-units .lns line, .is-on .in-v-canais .s { animation-duration: .01s !important; animation-delay: 0s !important; }
  .in-steps::before, .in-step-num { transition: none; }
}

/* ── Comparador: lado do Intelligence em preto e prata ── */
.vs-tit-intel { padding-top: 40px; }
@media (min-width: 961px) { .vs-intel .vs-rede { max-width: 330px; margin-left: auto; margin-right: auto; } }
.vs-kick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #D6DAE0; }
.vs-kick svg { width: 20px; height: 20px; color: #D6DAE0; }
.vs-kick em { font-style: normal; padding: 6px 12px; border-radius: 100px; font-size: 10.5px; letter-spacing: .14em; color: #E8C96A; border: 1px solid rgba(200,168,75,0.55); background: rgba(184,134,11,0.10); }
.vs-tit .vs-nome { display: inline-block; margin-top: 10px; font-family: var(--font-heading); font-size: clamp(38px, 4vw, 54px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; padding-bottom: .14em; margin-bottom: -.14em; background: var(--prata); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vs-intel .vs-sub { color: rgba(220,224,230,0.62); }
.vs-intel .vs-rede-svg .raio { stroke: rgba(214,218,224,0.32); }
.vs-intel .vs-rede-svg .arco { stroke: rgba(214,218,224,0.14); }
.vs-intel .vs-rede-svg .dado { fill: #F4F5F7; filter: drop-shadow(0 0 4px rgba(244,245,247,0.85)); }
.vs-intel .vs-rede-svg .dado.b { fill: #E8C96A; filter: drop-shadow(0 0 4px rgba(232,201,106,0.8)); }
.vs-intel .vs-centro { background: radial-gradient(circle at 30% 25%, #2A2C30, #0B0B0D 70%); border-color: #BFC3C8; animation-name: vs-pulso-prata; }
@keyframes vs-pulso-prata { 0% { box-shadow: 0 0 0 0 rgba(214,218,224,0.4); } 100% { box-shadow: 0 0 0 24px rgba(214,218,224,0); } }
.vs-intel .vs-no { background: rgba(22,23,26,0.95); border-color: var(--linha-prata); color: #F4F5F7; animation-name: vs-no-prata; }
@keyframes vs-no-prata { 0%, 12% { box-shadow: 0 0 0 0 rgba(214,218,224,0); } 6% { box-shadow: 0 0 0 6px rgba(214,218,224,0.16), 0 0 22px rgba(214,218,224,0.35); } }
.vs-intel .vs-ctx i { background: var(--prata); }
.vs-intel .vs-lista li::before { background: var(--prata); color: #0B0B0D; }
.vs-intel .vs-radar { background: radial-gradient(80% 140% at 0% 0%, rgba(232,201,106,0.20), transparent 60%), linear-gradient(135deg, #2A1F0A 0%, #160F04 55%, #0B0802 100%); border-color: rgba(232,201,106,0.45); box-shadow: 0 14px 34px rgba(184,134,11,0.18); }
.vs-intel .vs-radar p { color: rgba(255,248,230,0.75); }
.vs-intel .vs-radar p b { color: #E8C96A; }
.vs-intel .vs-radar .link-arrow { color: #E8C96A; }
@media (min-width: 961px) {
  .vs-radar-faixa { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; margin-top: 0; }
  .vs-radar-faixa img { margin: 0; }
  .vs-radar-faixa .link-arrow { margin-top: 0; white-space: nowrap; }
}
@media (min-width: 961px) {
  .vs-intel .vs-lista { gap: 10px; }
  .vs-intel .vs-lista li { font-size: 14.5px; line-height: 1.5; }
}