/* =============================================================
   FluidChat · fx.css — seções novas (soluções, demo interativa,
   terminal, pioneiros) e efeitos (spotlight, fluxo, progresso)
   ============================================================= */

/* ---------- barra de progresso do scroll ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: linear-gradient(90deg, var(--fc-lima), var(--fc-broto), var(--fc-mata));
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* ---------- hero: celular com a conversa que se escreve e a ligação da IA ---------- */
.phone__screen { position: relative; }
.ph-msg.typing.out-side { align-self: flex-end; }
.ph-call {
  position: absolute; left: 10px; right: 10px; top: 66px; z-index: 3;
  display: flex; align-items: center; gap: 10px; padding: 10px;
  border-radius: 14px; background: rgba(255,255,255,0.94);
  border: 1px solid rgba(16,128,91,0.35);
  box-shadow: 0 12px 28px -12px rgba(11,59,38,0.35);
  animation: phMsgIn 320ms var(--fc-ease-fluid) both;
}
.ph-call__icon { width: 30px; height: 30px; flex: none; border-radius: 999px; background: var(--fc-mata); color: #fff; display: grid; place-items: center; }
.ph-call__icon svg { width: 15px; height: 15px; }
.ph-call small { display: block; font-size: 9.5px; font-weight: 600; color: #0B3B26; }
.ph-wave { display: flex; gap: 2px; height: 14px; align-items: center; margin-top: 4px; }
.ph-wave i { width: 2px; height: 100%; border-radius: 2px; background: var(--fc-mata); animation: phWave 0.9s ease-in-out infinite; }
@keyframes phWave { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
.hero__title__line > span { display: inline-block; will-change: transform; }
.hero__rotator {
  display: inline;
  /* cor sólida: o gradiente com background-clip:text sumia quando o GSAP transformava cada letra */
  color: var(--fc-mata);
}
.hero__rotator .ch { display: inline-block; white-space: pre; }
.hero__rotator .wd { display: inline-block; white-space: nowrap; }

/* ---------- spotlight que segue o cursor ---------- */
[data-spotlight] { position: relative; isolation: isolate; }
[data-spotlight]::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(126,217,87,0.24), transparent 60%);
  opacity: 0; transition: opacity 300ms ease;
}
[data-spotlight]:hover::after { opacity: 1; }
.plan--featured[data-spotlight]::after,
.section--dark [data-spotlight]::after { background: radial-gradient(420px circle at var(--sx,50%) var(--sy,50%), rgba(248,248,244,0.12), transparent 60%); }

/* split de títulos */
.section__title .w { display: inline-block; will-change: transform, opacity; }

/* ---------- soluções (scroll horizontal) ---------- */
.verticals { background: linear-gradient(180deg, #F2FAF4, #E8F4EC); color: var(--fc-tinta); overflow: hidden; }
.verticals__pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 112px 0 80px; }
.verticals__head { max-width: 1280px; width: 100%; margin: 0 auto 48px; padding: 0 32px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 32px; }
.verticals__head .section__eyebrow { color: var(--fc-folha); width: 100%; }
.verticals__head .section__title { color: #0B3B26; margin: 0; }
.verticals__head .section__title em { color: var(--fc-mata); }
.verticals__hint { margin-left: auto; font-family: var(--fc-font-mono); font-size: 12px; color: #4A5A52; letter-spacing: 0.08em; text-transform: uppercase; }
.verticals__track { display: flex; gap: 24px; padding: 0 max(32px, calc((100vw - 1280px) / 2 + 32px)); width: max-content; }

.vcard {
  width: min(440px, 82vw); flex: 0 0 auto;
  background: #FFFFFF;
  border: 1px solid rgba(16,128,91,0.14); border-radius: 24px;
  box-shadow: 0 18px 40px -28px rgba(11,59,38,0.35);
  padding: 32px; display: flex; flex-direction: column; gap: 16px;
  transition: border-color 240ms ease, transform 240ms ease;
}
.vcard:hover { border-color: rgba(16,128,91,0.45); transform: translateY(-4px); }
.vcard::after { background: radial-gradient(420px circle at var(--sx,50%) var(--sy,50%), rgba(126,217,87,0.22), transparent 60%) !important; }
.vcard__top { display: flex; justify-content: space-between; align-items: center; }
/* emojis em tom de verde: nada de laranja nos ícones */
.vcard__icon { font-size: 30px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: #ECF7F1; filter: grayscale(1) sepia(0.6) hue-rotate(70deg) saturate(1.8); }
.vcard__status { font-family: var(--fc-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: rgba(16,128,91,0.08); color: #2F5A45; }
.vcard__status--live { background: rgba(126,217,87,0.24); color: #0B5A40; }
.vcard__status--live::before { content: '● '; animation: blink 1.6s infinite; }
.vcard__status--pilot { background: #FFFFFF; color: #0B5A40; box-shadow: inset 0 0 0 1px rgba(16,128,91,0.35); }
@keyframes blink { 50% { opacity: 0.3; } }
.vcard h3 { font-size: 34px; letter-spacing: -0.03em; font-weight: 600; color: #0B3B26; }
.vcard__pitch { font-size: 15px; line-height: 1.6; color: #3D4D45; }
.vcard ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #24382E; }
.vcard li { padding-left: 22px; position: relative; line-height: 1.45; }
.vcard li::before { content: '→'; position: absolute; left: 0; color: var(--fc-mata); }
.vcard__chat { margin-top: auto; padding: 14px; border-radius: 16px; background: #F2FAF4; display: flex; flex-direction: column; gap: 8px; }
.vc-msg { font-size: 13px; line-height: 1.4; padding: 8px 12px; border-radius: 12px 12px 12px 3px; max-width: 88%; background: #FFFFFF; border: 1px solid rgba(11,20,16,0.06); }
.vc-msg.out { align-self: flex-end; background: var(--fc-mata); color: #FFFFFF; border: 0; border-radius: 12px 12px 3px 12px; }
.vc-msg.tool { align-self: flex-end; font-family: var(--fc-font-mono); font-size: 11px; color: #0B5A40; background: rgba(16,128,91,0.08); border: 1px solid rgba(16,128,91,0.3); padding: 4px 10px; border-radius: 8px; }
.vcard--soon { border-style: dashed; }
.vcard--soon .btn { align-self: flex-start; margin-top: auto; }

/* ---------- demo interativa ---------- */
.inbox button { font: inherit; border: 0; cursor: pointer; }
.inbox aside .inbox__item { width: 100%; background: transparent; text-align: left; transition: background 160ms ease; }
.inbox aside .inbox__item:hover:not(.is-active) { background: rgba(11,20,16,0.04); }
.inbox__item--static { cursor: default; }
.inbox .inbox__num { background: transparent; color: var(--fc-tinta); padding: 0; }
.inbox .inbox__item.is-active .inbox__num { background: #10805B; color: #fff; padding: 1px 9px; }
.inbox__num--ok { color: var(--fc-folha) !important; font-family: var(--fc-font-mono); font-size: 12px; }
.inbox__num--muted { color: var(--fc-pedra) !important; font-size: 11px; }
.inbox__rows { overflow-y: auto; height: calc(100% - 54px); }
.inbox__row { display: block; width: 100%; text-align: left; background: #fff; cursor: pointer; transition: background 160ms ease; font: inherit; color: inherit; border: 0; border-bottom: 1px solid rgba(11,20,16,0.08); }
.inbox__row:hover:not(.is-active) { background: #F3FAF6; }
.inbox__row:focus-visible, .inbox__item:focus-visible, .ai-toggle:focus-visible { outline: 2px solid var(--fc-mata); outline-offset: -2px; }
.inbox__row .unread { width: 8px; height: 8px; border-radius: 999px; background: var(--fc-mata); display: inline-block; margin-left: 6px; }
.inbox__row.is-leaving { pointer-events: none; }
.inbox__row .tag-ch { display: inline-flex; align-items: center; gap: 5px; }
.inbox__row .tag-ch i { width: 6px; height: 6px; border-radius: 2px; display: inline-block; }
.inbox__empty { padding: 40px 22px; color: var(--fc-bruma); font-size: 13px; text-align: center; }

.inbox__thread__body { overflow-y: auto; scroll-behavior: smooth; }
.msg { animation: msgIn 320ms var(--fc-ease-fluid) both; white-space: pre-line; }
.msg.tool {
  align-self: flex-end; font-family: var(--fc-font-mono); font-size: 11px; color: #0B5A40;
  background: #ECF7F1; border: 1px dashed rgba(16,128,91,0.4); padding: 7px 12px; border-radius: 9px; max-width: none;
}
.msg.tool code { color: var(--fc-folha); font-weight: 600; }
.msg.system { align-self: center; font-size: 11px; color: var(--fc-pedra); background: rgba(11,20,16,0.05); border-radius: 999px; padding: 5px 14px; max-width: none; }
.msg.human { align-self: flex-end; background: var(--fc-grafite); color: #fff; border-radius: 14px 14px 4px 14px; }
.msg.human time { color: rgba(255,255,255,0.6); }
.msg.typing { display: inline-flex; gap: 4px; align-items: center; background: #fff; border: 1px solid rgba(11,20,16,0.08); align-self: flex-end; padding: 12px 14px; }
.msg.typing.in-side { align-self: flex-start; }
.msg.typing span { width: 6px; height: 6px; border-radius: 999px; background: var(--fc-bruma); animation: phType 1.1s ease-in-out infinite; }
.msg.typing span:nth-child(2) { animation-delay: 0.15s; }
.msg.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }

.inbox__composer { display: flex; gap: 10px; width: 100%; }
.inbox__thread > footer .inbox__composer input { flex: 1; min-width: 0; }
.inbox__thread > footer .inbox__composer input:focus { outline: none; border-color: #10805B; box-shadow: 0 0 0 3px rgba(16,128,91,0.12); }
.ai-toggle { display: inline-flex; align-items: center; gap: 6px; }
.ai-toggle::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--fc-bruma); }
.ai-toggle.is-on::before { background: var(--fc-folha); box-shadow: 0 0 0 3px rgba(45,139,74,0.18); }
.inbox__thread__cta button[data-resolve]:disabled { opacity: 0.5; cursor: default; }
.demo__note { margin-top: 14px; text-align: center; font-family: var(--fc-font-mono); font-size: 11px; color: var(--fc-bruma); }

/* ---------- terminal ---------- */
.terminal {
  background: #0B2A1D; border: 1px solid rgba(16,128,91,0.35); border-radius: 16px; padding: 28px 32px;
  box-shadow: 0 30px 70px -34px rgba(11,59,38,0.55); min-height: 330px;
}
.terminal__label { color: rgba(248,248,244,0.4); font-family: var(--fc-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }
.terminal__body { margin: 0; font-family: var(--fc-font-mono); font-size: 13.5px; line-height: 1.75; color: rgba(248,248,244,0.85); white-space: pre-wrap; word-break: break-word; }
.terminal__body .p { color: var(--fc-orvalho); }
.terminal__body .f { color: var(--fc-lima); }
.terminal__body .o { color: rgba(248,248,244,0.55); }
.terminal__body .caret { display: inline-block; width: 8px; height: 1.1em; vertical-align: -2px; background: var(--fc-lima); animation: blink 1s steps(1) infinite; }
.feature-split__body code { font-family: var(--fc-font-mono); font-size: 0.9em; background: rgba(16,128,91,0.1); color: #0B5A40; padding: 1px 6px; border-radius: 5px; }

/* ---------- pioneiros ---------- */
.pioneers__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.section--mint { background: #EAF6EE; }
.pioneers__cta { justify-content: flex-start; margin-top: 32px; }
.pioneers__steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.pioneers__steps li {
  counter-increment: step; position: relative; padding: 24px 24px 24px 76px; border-radius: 18px;
  background: #FFFFFF; border: 1px solid rgba(16,128,91,0.14);
  color: #3D4D45; font-size: 15px; line-height: 1.55;
}
.pioneers__steps li b { color: #0B3B26; display: block; font-size: 17px; margin-bottom: 4px; }
.pioneers__steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 24px; top: 24px;
  font-family: var(--fc-font-mono); font-size: 13px; color: #FFFFFF; background: var(--fc-mata);
  width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; font-weight: 600;
}

.cta-wrap { padding: 128px 32px 0; }

/* ---------- responsivo ---------- */
@media (max-width: 1024px) {
  .verticals__pin { min-height: 0; padding: 96px 0 72px; }
  .verticals__track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; -webkit-overflow-scrolling: touch; }
  .vcard { scroll-snap-align: center; }
  .verticals__hint { display: none; }
  .inbox aside { display: none; }
  .inbox__list { display: block !important; border-right: 0; border-bottom: 1px solid rgba(11,20,16,0.08); }
  .inbox__rows { height: 200px; }
  .inbox__thread { height: 480px; }
  .pioneers__grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .verticals__head { padding: 0 20px; }
  .verticals__track { padding: 0 20px 16px; }
  .vcard { padding: 24px; }
  .inbox__thread > header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .terminal { padding: 22px 18px; }
  .terminal__body { font-size: 12px; }
  .cta-wrap { padding: 80px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .msg, .vcard__status--live::before, .device[data-float], .hero__badge, .hero__trust__track,
  .ph-msg, .ph-msg.typing span, .ph-call, .ph-wave i, .inbox__status::before { animation: none !important; }
  .ph-wave i { transform: scaleY(0.6); }
}

/* ---------- botão de destaque sobre os blocos verdes (CTA final e plano recomendado) ---------- */
.cta-banner .btn--accent, .plan--featured .btn--accent { background: #FFFFFF; color: #0B5A40; box-shadow: 0 10px 24px -14px rgba(0,0,0,0.45); }
.cta-banner .btn--accent:hover, .plan--featured .btn--accent:hover { background: var(--fc-salvia); }
.cta-banner .btn:focus-visible, .plan--featured .btn:focus-visible { outline-color: #FFFFFF; }

/* ---------- celular estreito: a coluna não pode crescer além da tela ---------- */
@media (max-width: 1024px) {
  .feature-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .agents-board { padding: 18px; }
  .agents-board__grid { grid-template-columns: minmax(0, 1fr); }
}