/* ===== Seção de soluções (bento) ===== */
.sol { position: relative; background: #f8f9fc; padding: 96px 0 110px; }
.sol::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--frame); border-left: 1px solid var(--line); }
.sol__inner { position: relative; padding: 0 var(--frame) 0 calc(var(--frame) + 14px); max-width: 1440px; margin: 0 auto; }

.sol__title { max-width: 980px; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.15; letter-spacing: -.025em; font-weight: 400; color: var(--ink-2); }
.sol__title-strong { color: var(--ink); }

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 56px; }

.bento__card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #eceef4; border-radius: 8px;
  opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease, border-color .3s;
}
.bento__card.is-in { opacity: 1; transform: none; }
.bento__card:hover { border-color: var(--brand-200); }

.bento__card--sistemas { grid-column: span 4; height: 560px; }
.bento__card--agentes  { grid-column: span 2; height: 560px; }
/* baralho do computador: cards 2 a 5 empilhados na coluna de "agentes" */
.bento__stack { grid-column: span 2; position: relative; height: 560px; }
.bento__stack .bento__card { position: absolute; left: 0; right: 0; top: 0; height: 500px; }
.bento--deck.bento__stack .bento__card { transform-origin: 50% 100%; user-select: none; will-change: transform; box-shadow: 0 18px 40px -24px rgba(11,16,51,.35); }
.bento__dots--stack { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 8px; }
.bento__card--genai, .bento__card--integracoes, .bento__card--dados { grid-column: span 2; height: 520px; }
.bento__card--squad { grid-column: span 6; height: 460px; flex-direction: row; }

.bento__head { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 16px; padding: 26px 26px 0; }
.bento__head h3 { max-width: 360px; font-size: clamp(22px, 2vw, 28px); line-height: 1.16; letter-spacing: -.022em; font-weight: 400; color: var(--ink); }
.bento__card--squad .bento__head { position: static; flex-direction: column; justify-content: flex-start; width: 34%; flex: none; }

.bento__toggle {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--brand-50); color: var(--brand-500); transition: background .2s, color .2s, transform .2s;
}
.bento__toggle svg { width: 13px; height: 13px; }
.bento__card:hover .bento__toggle, .bento__card.is-open .bento__toggle { background: var(--brand-500); color: #fff; }
.bento__toggle:hover { transform: scale(1.06); }
.bento__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bento__card--squad .bento__toggle { position: absolute; top: 24px; right: 24px; z-index: 4; }

.bento__visual { position: relative; flex: 1; min-height: 0; }

/* escurece o card que ficou atrás na pilha (só usado no celular) */
.bento__shade { position: absolute; inset: 0; z-index: 5; background: #0b1033; opacity: 0; pointer-events: none; border-radius: inherit; }

/* Detalhes ao expandir */
.bento__detail {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 18px;
  padding: 30px; background: linear-gradient(180deg, rgba(255,255,255,.75), #fff 38%);
  backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity .3s, transform .3s, visibility .3s;
}
.bento__card.is-open .bento__detail { opacity: 1; visibility: visible; transform: none; }
.bento__detail p { font-size: 17px; line-height: 1.55; color: var(--ink); max-width: 460px; }
.bento__detail ul { list-style: none; display: grid; gap: 8px; }
.bento__detail li { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 15px; }
.bento__detail li svg { width: 15px; height: 15px; color: var(--brand-500); flex: none; }
.bento__detail-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bento__detail .btn { align-self: flex-start; }

/* ===== Peças reutilizáveis ===== */
.browser { position: absolute; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(11,16,51,.25), 0 0 0 1px rgba(11,16,51,.06); }
.browser__bar { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; background: #f6f7fb; border-bottom: 1px solid var(--line); }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d9dce6; }
.browser__bar span { margin: 0 auto; padding: 5px 18px; border-radius: 999px; background: #fff; font-size: 11.5px; color: var(--ink-2); }

.pill { display: inline-flex; align-items: center; justify-self: start; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #eef0f5; color: var(--ink-2); }
.pill--ok { background: #e7f6ec; color: #15803d; }
.pill--info { background: var(--brand-50); color: var(--brand-500); }


/* ===== Camadas de arte (gradientes vivos atrás dos mockups) ===== */
.art-silk, .art-fluid { position: absolute; inset: 0; width: 100%; height: 100%; }
/* com GSAP a entrada é feita por JS (sem a transição CSS) */
.bento--gsap .bento__card { opacity: 1; transform: none; transition: border-color .3s; }
.bento--gsap .sq__deploy { animation: none; }
.has-fluid .art-glow--dados { opacity: 0; }
.art-glow { position: absolute; pointer-events: none; filter: blur(28px); animation: glow-drift 14s ease-in-out infinite alternate; }
@keyframes glow-drift { 50% { transform: translate3d(3%, -2%, 0) scale(1.04); } 100% { transform: translate3d(-2%, 2%, 0) scale(.98); } }
.art-glow--agentes {
  inset: 30% -10% -12% -10%; filter: blur(40px); opacity: .85;
  background:
    radial-gradient(45% 55% at 25% 70%, rgba(123,108,255,.85), transparent 70%),
    radial-gradient(45% 50% at 80% 85%, rgba(59,43,255,.8), transparent 70%),
    radial-gradient(60% 45% at 55% 40%, rgba(111,140,255,.55), transparent 70%),
    radial-gradient(70% 40% at 50% 10%, rgba(233,231,255,.9), transparent 70%);
}
.art-glow--genai {
  inset: 10% -10% -5% -10%; border-radius: 50%; filter: blur(40px);
  background: radial-gradient(closest-side, rgba(243,242,255,.0) 35%, rgba(210,205,255,.45) 60%, transparent 85%);
}
.art-glow--dados {
  inset: 40% -15% -20% -15%; filter: blur(44px);
  background:
    radial-gradient(45% 55% at 15% 85%, rgba(123,108,255,.55), transparent 70%),
    radial-gradient(45% 55% at 90% 75%, rgba(111,140,255,.5), transparent 70%),
    radial-gradient(60% 50% at 55% 60%, rgba(233,231,255,.8), transparent 70%);
}

/* ===== 1. Sistemas ===== */

.sis__phone {
  position: absolute; left: 7%; bottom: -70px; z-index: 2; width: 200px; height: 390px; padding: 8px;
  border-radius: 32px; background: #0b1033; box-shadow: 0 40px 70px -24px rgba(11,16,51,.55), 0 0 0 5px rgba(255,255,255,.55);
}
.sis__notch { position: absolute; top: 18px; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: #2a2f55; transform: translateX(-50%); }
.sis__screen { height: 100%; padding: 46px 18px 18px; border-radius: 26px; background: #fff; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sis__app { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--brand-500); margin-bottom: 18px; }
.sis__screen small { font-size: 12px; color: var(--ink-2); }
.sis__amount { font-size: 25px; letter-spacing: -.02em; margin: 4px 0 10px; white-space: nowrap; }
.sis__list { list-style: none; width: 100%; margin-top: 24px; font-size: 12.5px; }
.sis__list li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink); }

.sis__browser { left: 40%; right: -40px; top: 150px; bottom: -40px; }
.sis__app-body { display: grid; grid-template-columns: 130px 1fr; height: 100%; }
.sis__side { display: grid; align-content: start; gap: 3px; padding: 16px 12px; border-right: 1px solid var(--line); font-size: 11.5px; color: var(--ink-2); }
.sis__side b { color: var(--ink); font-size: 13px; margin-bottom: 12px; }
.sis__side span { padding: 6px 8px; border-radius: 6px; }
.sis__side .on { background: var(--brand-50); color: var(--brand-500); font-weight: 600; }
.sis__table { padding: 14px 16px; font-size: 11.5px; }
.sis__row { display: grid; grid-template-columns: .8fr 1.3fr 1fr .9fr; align-items: center; height: 36px; border-bottom: 1px solid var(--line); color: var(--ink); }
.sis__row--head { height: 30px; font-size: 11.5px; font-weight: 600; color: var(--muted); }

/* ===== 2. Agentes ===== */
.ag__card {
  position: relative; margin: 0 32px 12px; padding: 16px 18px; border-radius: 8px; background: #fff;
  box-shadow: 0 20px 40px -18px rgba(11,16,51,.22), 0 0 0 1px rgba(11,16,51,.05);
}
.ag__card:not(.ag__card--stat) { margin-top: 64px; }
.ag__top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ag__top b { display: block; font-size: 14.5px; font-weight: 500; }
.ag__top small { font-size: 13px; color: #15803d; }
.ag__icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); color: var(--brand-500); }
.ag__icon svg { width: 24px; height: 24px; }
.ag__task { font-size: 14px; font-weight: 600; }
.ag__meta { font-size: 13px; color: var(--ink-2); }
.ag__label { display: flex; align-items: center; gap: 6px; margin: 16px 0 8px; font-size: 13.5px; font-weight: 500; }
.ag__label svg { width: 14px; height: 14px; }
.ag__bar { height: 10px; border-radius: 999px; background: #f0f1f6; overflow: hidden; }
.ag__bar i { display: block; width: 4%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-500), var(--brand-300)); }
.ag__card--stat small { display: block; font-size: 13px; color: var(--ink-2); }
.ag__card--stat b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; transition: color .3s; }

.ag__bars { display: flex; align-items: flex-end; gap: 3px; height: 92px; margin-top: 14px; }
.ag__bars i { flex: 1; height: 30%; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--brand-400), var(--brand-500)); transition: height .9s cubic-bezier(.4,0,.2,1); }

/* ===== 3. IA generativa ===== */
.gen__particles { position: absolute; inset: 0; width: 100%; height: 100%; }
.gen__chat { position: relative; display: grid; gap: 10px; padding: 56px 36px 0; }
.gen__msg { max-width: 80%; padding: 11px 14px; border-radius: 6px; background: rgba(255,255,255,.92); font-size: 13px; line-height: 1.5; color: var(--ink); box-shadow: 0 8px 24px -16px rgba(11,16,51,.25), 0 0 0 1px rgba(11,16,51,.04); backdrop-filter: blur(4px); opacity: 0; transform: translateY(10px); }
.gen__msg--user { justify-self: end; background: rgba(246,247,251,.95); }
.gen__slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; border-radius: 6px; background: rgba(255,255,255,.95); box-shadow: 0 8px 24px -16px rgba(11,16,51,.25), 0 0 0 1px rgba(11,16,51,.04); opacity: 0; transform: translateY(10px); }
.gen__slots span { padding: 8px; border-radius: 4px; border: 1px solid #edeff5; font-size: 12px; text-align: center; color: var(--ink); transition: background .3s, color .3s, border-color .3s; }
.gen__slots .is-picked { animation: pick 6s 3.4s infinite; }
@keyframes pick { 0%, 8% { } 12%, 90% { background: var(--brand-50); border-color: var(--brand-400); color: var(--brand-500); } }
.gen__confirm { grid-column: span 2; height: 34px; border: 0; border-radius: 4px; background: #eef1f7; color: var(--brand-500); font-weight: 500; font-size: 12.5px; }

.bento__card--genai.is-in .gen__msg--user { animation: msg-in .5s .3s forwards; }
.bento__card--genai.is-in .gen__msg--bot  { animation: msg-in .5s 1.3s forwards; }
.bento__card--genai.is-in .gen__slots     { animation: msg-in .5s 2.3s forwards; }
@keyframes msg-in { to { opacity: 1; transform: none; } }

/* ===== 4. Integrações ===== */
.int__globe { position: absolute; inset: 0; width: 100%; height: 100%; }
.int__cobe { position: absolute; left: 50%; top: 52%; width: min(86%, 340px); aspect-ratio: 1; transform: translate(-50%, -50%); opacity: 0; transition: opacity 1.2s ease; display: none; }
.int__cobe canvas { display: block; width: 100%; height: 100%; }
/* pinta os pontos pretos do COBE com a paleta: "screen" mantém o branco e colore o escuro */
.int__cobe::after {
  content: ""; position: absolute; inset: 10.5%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(140deg, var(--brand-300) 0%, var(--brand-400) 50%, #93a8ff 100%);
}
.has-cobe .int__cobe { display: block; }
.int__links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
.has-cobe .int__links { display: block; }
.int__hub-badge {
  position: absolute; left: 50%; top: 52%; z-index: 2; display: none; place-items: center;
  width: 68px; height: 68px; border-radius: 16px; background: #fff; transform: translate(-50%, -50%);
  box-shadow: 0 14px 32px -12px rgba(59,43,255,.45), 0 0 0 1px rgba(59,43,255,.12);
}
.int__hub-badge img { width: 46px; mix-blend-mode: multiply; }
.has-cobe .int__hub-badge { display: grid; }
.has-cobe .int__globe { display: none; }
.int__chip {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 8px; border-radius: 4px;
  background: rgba(255,255,255,.95); font-size: 11.5px; font-weight: 500; color: var(--ink); white-space: nowrap;
  box-shadow: 0 6px 18px -10px rgba(11,16,51,.3), 0 0 0 1px rgba(11,16,51,.05); transform: translate(-50%, -50%);
}
.int__chip i { width: 14px; height: 14px; border-radius: 3px; opacity: .9; }
.int__toast {
  position: absolute; left: 50%; bottom: 22px; display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 6px;
  background: rgba(255,255,255,.96); color: var(--ink); font-size: 12.5px; white-space: nowrap;
  box-shadow: 0 10px 26px -14px rgba(11,16,51,.35), 0 0 0 1px rgba(11,16,51,.05);
  opacity: 0; transform: translate(-50%, 10px); transition: opacity .35s, transform .35s;
}
.int__toast svg { width: 14px; height: 14px; color: #15803d; }
.int__toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ===== 5. Dados ===== */
.dat__card {
  position: absolute; left: 32px; right: 32px; top: 70px; padding: 16px 18px; border-radius: 6px; background: rgba(255,255,255,.96);
  box-shadow: 0 10px 30px -18px rgba(11,16,51,.25), 0 0 0 1px rgba(11,16,51,.04);
}
.dat__card small { font-size: 13px; color: var(--ink-2); }
.dat__card b { display: block; margin-top: 4px; font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
.dat__card em { font-style: normal; font-size: 13px; font-weight: 600; color: #15803d; margin-left: 6px; }
.dat__chart { display: block; width: 100%; height: 150px; margin-top: 14px; overflow: visible; }
.dat__line { fill: none; stroke: var(--brand-500); stroke-width: 1.6; stroke-dasharray: 260; stroke-dashoffset: 260; }
.dat__forecast { fill: none; stroke: var(--brand-300); stroke-width: 1.6; stroke-dasharray: 4 5; opacity: 0; }
.dat__area { opacity: 0; }
.dat__now { stroke: var(--line); stroke-dasharray: 3 4; }
.bento__card--dados.is-in .dat__line { animation: draw-line 1.8s .3s ease forwards; }
.bento__card--dados.is-in .dat__area { animation: fade-in 1s 1.4s forwards; }
.bento__card--dados.is-in .dat__forecast { animation: fade-in .8s 2s forwards, dash 1.2s linear 2s infinite; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes dash { to { stroke-dashoffset: -11; } }
.dat__legend { display: flex; gap: 16px; margin-top: 12px; font-size: 12px; color: var(--ink-2); }
.dat__legend i { display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 2px; background: var(--brand-500); }
.dat__legend i.is-ai { background: repeating-linear-gradient(90deg, var(--brand-300) 0 4px, transparent 4px 7px); }
.dat__alert {
  position: absolute; left: 32px; right: 32px; bottom: 30px; padding: 11px 14px; border-radius: 6px;
  background: rgba(255,255,255,.95); color: var(--ink); font-weight: 400; font-size: 13.5px; font-weight: 500; box-shadow: 0 0 0 1px var(--brand-100);
  opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s;
}
.dat__alert.is-on { opacity: 1; transform: none; }

/* ===== 6. Squad ===== */

.bento__card--squad .bento__visual { flex: 1; }
.sq__stripes {
  position: absolute; inset: 0 0 0 22%;
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.55) 0 1px, transparent 1px 8px),
    linear-gradient(120deg, var(--brand-100) 0%, var(--brand-300) 45%, var(--brand-500) 100%);
  -webkit-mask: linear-gradient(90deg, transparent, #000 35%); mask: linear-gradient(90deg, transparent, #000 35%);
  animation: stripes 12s linear infinite;
}
@keyframes stripes { to { background-position: 90px 0, 0 0; } }
.sq__fan {
  position: absolute; left: -70%; bottom: 0; width: 125%; height: 80%; /* vai até a borda do card (o card corta o excesso) */
  background: repeating-linear-gradient(-28deg, rgba(59,43,255,.35) 0 1px, transparent 1px 7px);
  -webkit-mask: linear-gradient(15deg, #000 15%, transparent 62%); mask: linear-gradient(15deg, #000 15%, transparent 62%);
}
.sq__browser { left: 30%; right: 84px; top: 24px; bottom: -1px; }
.sq__board { padding: 16px 20px; font-size: 12px; }
.sq__board h4 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.sq__row { display: grid; grid-template-columns: 1.9fr 1fr 1.25fr .7fr; column-gap: 10px; align-items: center; height: 38px; border-bottom: 1px solid var(--line); color: var(--ink); }
.sq__row--head { height: 32px; font-size: 12px; font-weight: 600; color: var(--muted); }
/* alinhamento das colunas: responsável centralizado, entrega à direita */
.sq__row > :nth-child(2) { justify-self: center; text-align: center; }
.sq__row > :nth-child(4) { justify-self: end; text-align: right; }
.sq__row .pill { white-space: nowrap; }
.sq__avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--brand-400), var(--brand-600)); }
.pill[data-status="Concluído"] { background: #e7f6ec; color: #15803d; }
.pill[data-status="Em teste"] { background: var(--brand-50); color: var(--brand-500); }
.pill[data-status="Em andamento"] { background: #fff4e5; color: #b45309; }

.sq__deploy {
  position: absolute; left: -12%; top: 140px; z-index: 2; width: 270px; padding: 18px; border-radius: 8px; background: #fff;
  box-shadow: 0 30px 60px -20px rgba(11,16,51,.3), 0 0 0 1px rgba(11,16,51,.05);
  animation: float 6s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-10px); } }
.sq__deploy-top { display: flex; align-items: center; gap: 10px; }
.sq__rocket { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-50); }
.sq__deploy-top b { font-size: 17px; font-weight: 600; }
.sq__deploy p { margin: 10px 0 14px; font-size: 14px; color: var(--ink-2); }
.sq__deploy ul { list-style: none; font-size: 13px; }
.sq__deploy li { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); }
.sq__deploy .ok { color: #15803d; font-weight: 600; }

/* ===== Responsivo ===== */
.bento__dots--all { display: none; }
.bento__dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--brand-200); transition: width .3s, background .3s; }
.bento__dots i.is-active { width: 22px; background: var(--brand-500); }
@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__card--sistemas, .bento__card--squad { grid-column: span 2; }
  .bento__card--agentes, .bento__card--genai, .bento__card--integracoes, .bento__card--dados { grid-column: span 1; }
  .bento__stack { grid-column: span 2; height: 540px; }
  .bento__stack .bento__card { height: 480px; }
  .bento__card--sistemas, .bento__card--agentes { height: 540px; }
}
@media (max-width: 960px) {
  .bento__card--squad { flex-direction: column; height: 620px; }
  .bento__card--squad .bento__head { width: auto; }
  .sq__browser { left: 24px; right: -1px; top: 40px; }
  .sq__deploy { left: auto; right: 16px; top: auto; bottom: 20px; width: 260px; }
}
@media (max-width: 760px) {
  .sol { padding: 64px 0 72px; }
  .sol::before { display: none; }
  .sol__inner { padding: 0 16px; }
  .sol__title { font-size: 26px; }
  .sol__title-rest { display: none; } /* igual ao hero: no celular fica só a frase principal */
  /* baralho: cards empilhados no mesmo lugar, os de trás aparecem por baixo */
  .bento { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; }
  .bento__stack { display: contents; } /* no celular os cards voltam a ser filhos diretos do baralho geral */
  .bento__stack .bento__card { position: static; }
  .bento__dots--stack { display: none !important; }
  .bento__card, .bento__card--sistemas, .bento__card--squad, .bento__card--agentes,
  .bento__card--genai, .bento__card--integracoes, .bento__card--dados { flex: none; width: 100%; height: 480px; }
  .bento--deck { position: relative; display: block; height: 524px; }
  .bento--deck .bento__card {
    position: absolute; left: 0; right: 0; top: 0; transform-origin: 50% 100%;
    touch-action: pan-y; user-select: none; will-change: transform;
    box-shadow: 0 18px 40px -24px rgba(11,16,51,.35);
  }
  .bento__dots--all { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
  .int__hub-badge { width: 50px; height: 50px; border-radius: 12px; }
  .int__hub-badge img { width: 34px; }
  .int__chip { padding: 5px 8px 5px 6px; font-size: 11px; gap: 5px; }
  .int__chip i { width: 11px; height: 11px; }
  .bento__head { padding: 24px 20px 0; }
  .bento__head h3 { font-size: 22px; }
  .bento__toggle { width: 40px; height: 40px; }
  .sis__phone { left: 16px; width: 170px; height: 330px; bottom: -40px; }
  .sis__amount { font-size: 20px; }
  .sis__browser { left: 120px; top: 50px; }
  .sis__app-body { grid-template-columns: 1fr; }
  .sis__side { display: none; }
  .sis__row { grid-template-columns: .9fr 1.2fr; }
  .sis__row span:nth-child(3), .sis__row span:nth-child(4) { display: none; }
  .ag__card { margin-left: 20px; margin-right: 20px; }
  .ag__card:not(.ag__card--stat) { margin-top: 40px; }
  .gen__chat { padding: 28px 20px 0; }
  .dat__card, .dat__alert { left: 20px; right: 20px; }
  .bento__card--squad { height: 500px; }
  .sq__browser { left: 20px; }
  .sq__row { grid-template-columns: 1.8fr 1fr; }
  .sq__row span:nth-child(2), .sq__row span:nth-child(4) { display: none; }
  .sq__deploy { width: 230px; padding: 16px; right: 12px; bottom: 14px; }
  .sq__deploy li:nth-child(n+3) { display: none; }
}

/* ===== Computador (> 960px): rolagem guiada =====
   Vitrine automática: lista 01–06 à esquerda, palco à direita; os passos trocam sozinhos (initFlow).
   Os 6 cards da grade são movidos para .flow__stage por JS (initFlow). */
.flow { display: none; }
@media (min-width: 961px) {
  .bento, .bento__dots--all { display: none; }
  .flow { display: block; position: relative; margin-top: 56px; }
  .flow__sticky {
    position: relative;
    display: grid; grid-template-columns: minmax(340px, .8fr) 1.2fr; gap: clamp(32px, 4vw, 72px); align-items: center;
  }
  .flow__side { position: relative; padding-left: 28px; }
  .flow__rail { position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
  .flow__rail i { position: absolute; inset: 0; background: var(--brand-500); transform: scaleY(0); transform-origin: 50% 0; }
  .flow__list { list-style: none; margin: 0; padding: 0; }
  .flow__item { position: relative; border-bottom: 1px solid var(--line); }
  /* barra de tempo do passo ativo, sobre a linha de baixo do item */
  .flow__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--brand-500); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; opacity: 0; transition: opacity .3s; }
  .flow__item.is-active::after { opacity: 1; }
  .flow__item:first-child { border-top: 1px solid var(--line); }
  .flow__btn {
    display: flex; align-items: baseline; gap: 16px; width: 100%; padding: 16px 0; border: 0; background: none; cursor: pointer; text-align: left;
    font: inherit; color: #8a94a8; transition: color .4s;
  }
  .flow__btn:hover { color: var(--ink-2); }
  .flow__num { flex: none; font: 500 12px/1 "JetBrains Mono", monospace; letter-spacing: .06em; color: var(--muted); transition: color .4s; }
  .flow__title { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.25; letter-spacing: -.02em; }
  .flow__item.is-active .flow__btn { color: var(--ink); }
  .flow__item.is-active .flow__num { color: var(--brand-500); }
  /* corpo do item abre com grid 0fr → 1fr (altura animada sem medir) */
  .flow__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.2,.8,.2,1); }
  .flow__body > div { overflow: hidden; padding-left: 36px; }
  .flow__item.is-active .flow__body { grid-template-rows: 1fr; }
  .flow__body p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); max-width: 440px; }
  .flow__body ul { list-style: none; display: grid; gap: 6px; padding-bottom: 18px; }
  .flow__body li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
  .flow__body li svg { width: 15px; height: 15px; color: var(--brand-500); flex: none; }
  .flow__body > div > * { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1); }
  .flow__item.is-active .flow__body > div > * { opacity: 1; transform: none; transition-delay: .15s; }
  .flow__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

  .flow__stage {
    position: relative; height: 600px; border-radius: 14px; overflow: hidden; isolation: isolate;
    background: #fff; border: 1px solid #eceef4; box-shadow: 0 50px 100px -40px rgba(50,50,93,.25), 0 30px 60px -40px rgba(0,0,0,.18);
  }
  .flow__count { position: absolute; right: 16px; top: 14px; z-index: 6; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(11,16,51,.06); font: 500 12px/1 "JetBrains Mono", monospace; letter-spacing: .06em; color: var(--muted); }
  .flow__count b { color: var(--brand-500); font-weight: 500; }

  /* cards dentro do palco: ocupam tudo, sem título/botão/detalhe (a lista faz esse papel) */
  .flow__stage .bento__card {
    position: absolute; inset: 0; height: auto; border: 0; border-radius: 0; opacity: 0; visibility: hidden; transform: none; transition: none;
  }
  .flow__stage .bento__card:hover { border-color: transparent; }
  .flow__stage .bento__head, .flow__stage .bento__detail, .flow__stage .bento__shade, .flow__stage .bento__toggle { display: none; }
  /* ajustes de composição de cada mockup para o palco (mais largo que os cards da grade) */
  .flow__stage .sis__browser { top: 90px; }
  .flow__stage .bento__card--agentes .bento__visual { display: flex; flex-direction: column; justify-content: center; padding: 0 12%; }
  .flow__stage .ag__card:not(.ag__card--stat) { margin-top: 0; }
  .flow__stage .gen__chat { padding: 80px 18% 0; }
  .flow__stage .int__cobe { width: min(70%, 420px); }
  .flow__stage .dat__card { left: 12%; right: 12%; top: 90px; }
  .flow__stage .dat__alert { left: 12%; right: 12%; bottom: 40px; }
  .flow__stage .bento__card--squad { flex-direction: column; }
  .flow__stage .sq__stripes { inset: 0 0 0 30%; }
  .flow__stage .sq__browser { left: 40%; right: 28px; top: 56px; bottom: -1px; }
  .flow__stage .sq__deploy { left: 28px; top: auto; bottom: 48px; width: 250px; }
}
/* palco mais estreito (961–1200px): o sistema esconde o menu lateral para a tabela respirar */
@media (min-width: 961px) and (max-width: 1200px) {
  .flow__stage .sis__app-body { grid-template-columns: 1fr; }
  .flow__stage .sis__side { display: none; }
}
/* motion do palco: cortina índigo entre os passos e contador com dígito que rola */
@media (min-width: 961px) {
  .flow__stage { will-change: transform; }
  .flow__digit { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; height: 1.1em; min-width: 2.2ch; }
  .flow__digit b { position: absolute; left: 0; top: 0; }
  .flow__digit b:first-child { position: relative; }
}

/* ===== Telas das nossas LPs no palco (só computador): passos "sistemas" e "squad" =====
   Mesma linguagem da LP: janela de navegador, celular escuro, leque de projetos, chips em mono. */
.slp { display: none; }
@media (min-width: 961px) {
  .flow__stage .slp { display: block; position: absolute; inset: 0; z-index: 1; }
  .flow__stage .bento__card--sistemas .bento__visual, .flow__stage .bento__card--squad .bento__visual { display: none; }
  .slp__glow { position: absolute; inset: 20% -10% -20% 20%; background: radial-gradient(closest-side, rgba(123,108,255,.35), rgba(123,108,255,0)); filter: blur(10px); }
  .slp__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #f6f7fb; border-bottom: 1px solid var(--line); }
  .slp__bar b { width: 8px; height: 8px; border-radius: 50%; background: #d9dce6; }
  .slp__bar span { margin: 0 auto; padding: 3px 14px; border-radius: 999px; background: #fff; font: 500 11px/1.4 "JetBrains Mono", monospace; color: var(--ink-2); }
  .slp video, .slp img { display: block; width: 100%; object-fit: cover; object-position: top; background: #0b1033; }

  /* sistemas: navegador grande + celular sobreposto */
  .slp__win { position: absolute; left: 7%; right: 13%; top: 11%; border-radius: 12px; overflow: hidden; background: #fff;
    box-shadow: 0 0 0 1px rgba(11,16,51,.06), 0 50px 90px -30px rgba(50,50,93,.35), 0 24px 44px -24px rgba(0,0,0,.25); }
  .slp__win video { aspect-ratio: 16 / 10; }
  .slp__phone { position: absolute; right: 6%; bottom: 7%; width: 21%; padding: 6px; border-radius: 26px; background: #0b1033;
    box-shadow: 0 40px 70px -24px rgba(11,16,51,.55), 0 0 0 4px rgba(255,255,255,.6); }
  .slp__phone video { aspect-ratio: 390 / 844; border-radius: 20px; }
  .slp__chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.95);
    font: 500 12px/1 "JetBrains Mono", monospace; letter-spacing: .02em; color: var(--ink); box-shadow: 0 10px 26px -14px rgba(11,16,51,.35), 0 0 0 1px rgba(11,16,51,.05); }
  .slp__chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-500); box-shadow: 0 0 0 4px var(--brand-100); }
  .slp__chip--a { left: 4%; bottom: 14%; }
  .slp__chip--b { left: 40%; top: 5%; }

  /* squad: leque de projetos entregues */
  .slp--sq { perspective: 1600px; }
  .slp__card { position: absolute; left: 10%; top: 14%; width: 62%; border-radius: 12px; overflow: hidden; background: #fff; transform-origin: 50% 100%;
    box-shadow: 0 0 0 1px rgba(11,16,51,.06), 0 40px 80px -30px rgba(50,50,93,.35), 0 20px 40px -24px rgba(0,0,0,.25); }
  .slp__card img { aspect-ratio: 16 / 10; }
  .slp__card[data-i="0"] { z-index: 4; transform: rotate(-6deg); }
  .slp__card[data-i="1"] { z-index: 3; transform: translate(14%, 6%) rotate(-1.5deg) translateZ(-60px); }
  .slp__card[data-i="2"] { z-index: 2; transform: translate(28%, 12%) rotate(3deg) translateZ(-120px); }
  .slp__card[data-i="3"] { z-index: 1; transform: translate(42%, 18%) rotate(7.5deg) translateZ(-180px); }
  .slp__chip--c { left: 6%; bottom: 9%; z-index: 5; }
}