/* ===== Databanx — páginas internas: produtos, formulários, features ===== */

/* hero de produto (variação do page-header com cor da marca do produto) */
.page-header.product { --pc: #888; }
.page-header.product::after {
  content: "";
  position: absolute;
  top: -160px; left: 50%;
  width: 900px; height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, color-mix(in oklab, white calc(var(--glow) * 8%), transparent), transparent 70%);
  pointer-events: none;
}
.page-header.product .container { gap: 22px; }
.page-header .wordmark { font-size: clamp(30px, 1.72vw, 44px); }
.page-header .wordmark small { font-size: clamp(14px, 0.586vw, 15px); margin-top: 8px; }
.page-header .logo-img { height: clamp(27px, 1.41vw, 36px); width: auto; align-self: flex-start; object-fit: contain; }
.page-header .lead { font-size: clamp(14px, 0.723vw, 19px); color: var(--muted); max-width: 640px; text-wrap: pretty; }
.page-header .lead::after {
  content: ""; display: block;
  width: 88px; height: 3px; border-radius: 2px;
  margin-top: 30px;
  background: var(--text);
}
.page-header .actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.page-header .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.page-header .chip-row > span {
  font-size: clamp(14px, 0.586vw, 15px); font-weight: 600;
  color: var(--muted);
  padding: 6px 13px;
  border-radius: 99px;
  border: 1px solid var(--line-soft);
  background: var(--glass-faint);
}

/* grade de features (3 col) */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 26px;
  border-radius: 16px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--grad-top), var(--grad-bottom));
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.feature-card:hover { border-color: color-mix(in oklab, var(--pc, var(--text)) 30%, var(--line)); transform: translateY(-3px); }
.feature-card .f-icon {
  display: inline-flex; align-items: center; justify-content: flex-start;
  margin-bottom: 2px;
  color: var(--u1, var(--pc, var(--text)));
  transition: color 0.2s ease, transform 0.2s ease;
}
.feature-card:hover .f-icon {
  color: var(--u1, var(--pc, var(--text)));
  transform: translateY(-1px);
}
.feature-card h3 { font-size: clamp(14px, 0.586vw, 15px); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
.feature-card p { font-size: clamp(14px, 0.586vw, 15px); color: var(--muted); line-height: 1.55; }

/* UIcons (solid rounded) — ícones de conteúdo via webfont local */
[class^="fi-rr-"], [class*=" fi-rr-"] { line-height: 1; display: inline-flex; }
.f-icon i[class*="fi-rr-"] { font-size: clamp(20px, 1.016vw, 26px); }
/* números das etapas (página Processo) — maiores e destacados */
.over-photo .feature-card .f-icon { font-size: clamp(24px, 1.25vw, 32px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.s-icon i[class*="fi-rr-"] { font-size: clamp(20px, 1.016vw, 26px); }
.product-icon i[class*="fi-rr-"] { font-size: clamp(20px, 1.016vw, 26px); }
.diff-card > i[class*="fi-rr-"] { font-size: clamp(20px, 1.016vw, 26px); color: var(--text); }

/* moldura de screenshot */
.shot-frame {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 14px;
  background: linear-gradient(180deg, var(--grad-top), var(--grad-bottom));
}
.shot-frame image-slot { width: 100%; height: 560px; display: block; }
.shot-caption { text-align: center; font-size: clamp(14px, 0.586vw, 15px); color: var(--faint); margin-top: 14px; }

/* aviso "em desenvolvimento" no lugar do screenshot */
.shot-soon { height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 30px; }
.shot-soon .si i { font-size: clamp(32px, 1.641vw, 42px); color: var(--u1, var(--muted)); line-height: 1; }
.shot-soon h3 { font-size: clamp(15px, 0.781vw, 20px); font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.shot-soon p { font-size: clamp(14px, 0.586vw, 15px); color: var(--muted); max-width: 480px; line-height: 1.6; text-wrap: pretty; }
@media (max-width: 720px) { .shot-soon { height: 260px; padding: 22px; } }

/* formulários */
.form-layout { display: grid; grid-template-columns: 1fr 380px; gap: 64px; align-items: start; }

/* página de formulário: cards brancos elevados flutuando sobre o hero escuro,
   com gutters escuros nas laterais (e entre o form e a coluna lateral) */
.section--light.form-float {
  margin-top: -80px;         /* cards sobrepõem a foto (à frente da imagem) */
  padding-top: 0;
  padding-bottom: 120px;
  border-radius: 0;
  box-shadow: none;
  /* foto passa por trás dos cards no topo (overlap) -> branco abaixo, transição limpa (sem degradê) */
  background: linear-gradient(180deg, transparent 0, transparent 80px, #fff 80px, #fff 100%);
}
.section--light.form-float::before { display: none; }
.form-float .form-layout { position: relative; z-index: 3; gap: 8px; }
.form-float .side-stack { gap: 8px; }
/* cards brancos definidos sobre o fundo branco (com a foto nos gutters do topo) */
.form-float .form-card,
.form-float .side-card {
  background: #fff;
  border: 1px solid rgba(20, 20, 26, 0.09);
  box-shadow: 0 1px 2px rgba(8, 8, 11, 0.04), 0 16px 44px -20px rgba(8, 8, 11, 0.22);
}

/* conteúdo (grade de cards) sobrepondo a foto do hero, igual ao formulário */
.page-header + .section--light.over-photo,
.unit-hero + .section--light.over-photo {
  margin-top: -80px;
  padding-top: 0;
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, transparent 0, transparent 80px, #fff 80px, #fff 100%);
}
.over-photo .container { position: relative; z-index: 3; }
/* vãos entre os cards iguais aos da página de contato (10px) */
.over-photo .feature-grid,
.over-photo .svc-grid,
.over-photo .product-grid,
.over-photo .diff-grid { gap: 8px; }
/* cards sólidos brancos pra ficarem nítidos sobre a foto */
.over-photo .product-card,
.over-photo .feature-card,
.over-photo .diff-card,
.over-photo .svc-card { background: #fff; }
.form-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(32px, 3.5vw, 44px) clamp(34px, 4vw, 54px);
  background: linear-gradient(180deg, var(--grad-top), var(--grad-bottom));
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: clamp(14px, 0.586vw, 15px); font-weight: 700; color: var(--muted); }
.form-field input, .form-field select, .form-field textarea {
  font-family: var(--font-body);
  font-size: clamp(14px, 0.586vw, 15px);
  color: var(--text);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 13px 15px;
  outline: none;
  transition: border-color 0.18s ease;
  width: 100%;
}
.form-field textarea { min-height: 130px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--line-strong); }
.form-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--arrow) 50%), linear-gradient(135deg, var(--arrow) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.form-field select option { background: #2b2b2e; color: #f2f2f4; }
.form-actions { margin-top: 28px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-note { font-size: clamp(14px, 0.586vw, 15px); color: var(--faint); }
.form-success {
  display: none;
  align-items: flex-start; gap: 14px;
  padding: 18px 20px;
  border: 1px solid color-mix(in oklab, oklch(0.7 0.14 155) 35%, var(--line));
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.7 0.14 155) 8%, transparent);
  margin-top: 24px;
}
.form-success.show { display: flex; }
.form-success svg { flex: none; color: oklch(0.75 0.14 155); margin-top: 2px; }
.form-success p { font-size: clamp(14px, 0.586vw, 15px); color: var(--muted); margin: 0; }

/* coluna lateral de contato */
.side-stack { display: flex; flex-direction: column; gap: 16px; }
.side-card {
  display: flex; gap: 16px; align-items: flex-start;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 26px;
  background: linear-gradient(180deg, var(--grad-top), var(--grad-bottom));
  box-shadow: 0 12px 28px -14px rgba(16, 24, 40, 0.18);
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}
.side-card:hover { border-color: var(--line); box-shadow: 0 20px 42px -16px rgba(16, 24, 40, 0.26); }
.side-card .s-icon {
  width: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.side-card h3 { font-size: clamp(14px, 0.586vw, 15px); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; margin-bottom: 3px; }
.side-card p, .side-card a { font-size: clamp(14px, 0.586vw, 15px); color: var(--muted); }
.side-card a:hover { color: var(--text); }

/* timeline vertical detalhada (página Processo) */
.proc-vertical { display: flex; flex-direction: column; position: relative; max-width: 760px; }
.proc-vertical::before {
  content: "";
  position: absolute; top: 24px; bottom: 24px; left: 23px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line) 6%, var(--line) 94%, transparent);
}
.proc-item { display: flex; gap: 26px; padding: 22px 0; position: relative; }
.proc-item .dot { flex: none; }
.proc-item .p-body { display: flex; flex-direction: column; gap: 6px; padding-top: 9px; }
.proc-item h3 { font-size: clamp(14px, 0.586vw, 15px); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
.proc-item p { font-size: clamp(14px, 0.586vw, 15px); color: var(--muted); max-width: 560px; }

/* seção editorial (filosofia do processo) */
.proc-essay { padding-top: 20px; }
.essay-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: start; }
.essay-aside { display: flex; flex-direction: column; gap: 16px; }
.essay-aside h2 { font-size: clamp(40px, 5vw, 68px); line-height: 1.06; letter-spacing: -0.022em; text-wrap: balance; }
.essay-body { display: flex; flex-direction: column; gap: 22px; max-width: 65ch; }
.essay-body p { font-size: clamp(14px, 0.586vw, 15px); line-height: 1.72; color: var(--muted); }

/* ===== Diferenciais — card grande (composição editorial) ===== */
.diff-float .form-layout { align-items: start; }
.diff-intro-card { --dx: var(--text); display: flex; flex-direction: column; gap: clamp(24px, 6.5vw, 70px); }

/* manifesto (esquerda) + princípios (direita) preenchendo o vazio */
.dx-lower { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; }
.dx-lower .dx-grid { grid-template-columns: 1fr 1fr; gap: 18px 28px; }
/* chamada grande + nota explicativa */
.dx-statement { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 860px) { .dx-lower { grid-template-columns: 1fr; gap: 28px; } }
.dx-big { font-family: var(--font-display); font-size: clamp(27px, 3.3vw, 42px); line-height: 1.04; letter-spacing: -0.028em; font-weight: 800; color: var(--text); }
.dx-big .g { color: var(--faint); }
.dx-note { font-size: clamp(14px, 0.586vw, 15px); line-height: 1.65; color: var(--muted); max-width: 54ch; text-wrap: pretty; }
.dx-prose { display: flex; flex-direction: column; gap: 16px; }
.dx-prose p { font-size: clamp(14px, 0.586vw, 15px); line-height: 1.72; color: var(--muted); text-wrap: pretty; }

/* texto de apresentação em 3 colunas dentro do card */
.dx-cols { column-count: 3; column-gap: 40px; }
.dx-cols p { break-inside: avoid; margin: 0; font-size: clamp(14px, 0.586vw, 15px); line-height: 1.62; color: var(--muted); text-wrap: pretty; }
@media (max-width: 900px) { .dx-cols { column-count: 2; } }
@media (max-width: 620px) { .dx-cols { column-count: 1; } }

/* animação de entrada — reveal escalonado */
@media (prefers-reduced-motion: no-preference) {
  .diff-intro-card > * { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
  .diff-intro-card.in > * { opacity: 1; transform: none; }
  .diff-intro-card.in > *:nth-child(1) { transition-delay: 0.04s; }
  .diff-intro-card.in > *:nth-child(2) { transition-delay: 0.12s; }
  .diff-intro-card.in > *:nth-child(3) { transition-delay: 0.20s; }
  .diff-intro-card.in > *:nth-child(4) { transition-delay: 0.28s; }
  .diff-intro-card.in > *:nth-child(5) { transition-delay: 0.36s; }
  .diff-intro-card.in > *:nth-child(6) { transition-delay: 0.44s; }
  .diff-intro-card.in > *:nth-child(7) { transition-delay: 0.52s; }
}
.diff-intro-card .dx-head { display: flex; flex-direction: column; gap: 15px; }
.diff-intro-card .eyebrow { margin-bottom: 2px; }
.diff-intro-card h2 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -0.022em; text-wrap: balance; }
.dx-lead { font-size: clamp(14px, 0.586vw, 15px); line-height: 1.68; color: var(--muted); text-wrap: pretty; }

/* faixa de métricas — herói visual */
.dx-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 24px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.dx-stat { display: flex; flex-direction: column; gap: 7px; padding: 0 22px; position: relative; }
.dx-stat:first-child { padding-left: 0; }
.dx-stat:last-child { padding-right: 0; }
.dx-stat + .dx-stat::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--line-soft); }
.dx-num { font-family: "Comfortaa", sans-serif; font-size: clamp(32px, 3.6vw, 44px); font-weight: 700; line-height: 1; letter-spacing: -0.025em; color: var(--dx); }
.dx-label { font-size: clamp(14px, 0.586vw, 15px); font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }

/* garantias em grade 2×2 */
.dx-guarantees { display: flex; flex-direction: column; gap: 16px; }
.dx-mini-label { font-size: clamp(14px, 0.586vw, 15px); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.dx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.dx-item { display: flex; gap: 13px; align-items: flex-start; }
.dx-ico { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; border: 1px solid color-mix(in oklab, var(--text) 14%, transparent); background: color-mix(in oklab, var(--text) 4%, transparent); color: var(--text); }
.dx-ico i { font-size: clamp(14px, 0.586vw, 15px); line-height: 1; }
.dx-item-body { display: flex; flex-direction: column; gap: 2px; }
.dx-item-body h4 { font-size: clamp(14px, 0.586vw, 15px); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
.dx-item-body p { font-size: clamp(14px, 0.586vw, 15px); line-height: 1.45; color: var(--muted); text-wrap: pretty; }

/* citação de fechamento — bloco claro */
.dx-quote { position: relative; overflow: hidden; margin: 0; padding: 26px 28px; border-radius: 16px; background: rgba(20, 20, 26, 0.035); border: 1px solid color-mix(in oklab, var(--text) 9%, transparent); }
.dx-quote p { position: relative; z-index: 1; font-size: clamp(17px, 0.898vw, 23px); line-height: 1.48; font-weight: 600; letter-spacing: -0.014em; color: var(--text); text-wrap: pretty; }
/* remove o efeito vazado (text-stroke) dos destaques no card */
.diff-intro-card .hl { color: var(--text); -webkit-text-stroke: 0; text-stroke: 0; font-weight: 700; }
.dx-quote cite { position: relative; z-index: 1; display: block; margin-top: 14px; font-size: clamp(14px, 0.586vw, 15px); font-style: normal; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.dx-quote-x { position: absolute; right: -22px; bottom: -32px; width: 150px; height: auto; opacity: 0.05; filter: brightness(0); pointer-events: none; z-index: 0; }

@media (max-width: 560px) {
  .dx-grid { grid-template-columns: 1fr; }
  .dx-stat { padding: 0 14px; }
}

/* princípios (estilo editorial: linhas com filete, sem cards) */
.proc-principles .section-head { margin-bottom: 30px; }
.principle-list { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 40px; }
.principle {
  display: flex; flex-direction: column; gap: 9px;
  padding: 30px 0;
  border-top: 1px solid var(--line-soft);
}
.principle .p-tag {
  font-size: clamp(14px, 0.586vw, 15px); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint);
}
.principle h3 { font-size: clamp(14px, 0.723vw, 19px); font-family: var(--font-body); font-weight: 700; letter-spacing: -0.01em; }
.principle p { font-size: clamp(14px, 0.586vw, 15px); line-height: 1.66; color: var(--muted); max-width: 46ch; }

/* navegação entre produtos (página Produtos usa .product-grid do styles.css) */
.page-cta { padding-bottom: 130px; }

@media (max-width: 1024px) {
  .essay-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 720px) {
  .principle-list { grid-template-columns: 1fr; column-gap: 0; }
  .principle { padding: 24px 0; }
}

@media (max-width: 1024px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .form-layout { grid-template-columns: 1fr; gap: 40px; }
  .side-stack { position: static; }
}
@media (max-width: 720px) {
  .feature-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: 26px 20px; }
  /* evita zoom automático do iOS ao focar campos */
  .form-field input, .form-field select, .form-field textarea { font-size: 16px; }
  .shot-frame { padding: 10px; }
  .shot-frame image-slot { height: 320px; }
  .page-header .wordmark { font-size: 34px; }
  .page-header .logo-img { height: 32px; }
  .page-header .lead { font-size: 15px; }
  /* todo header (page-header/unit-hero) é seguido por um bloco branco que "sobe"
     (margin-top negativo: -54px no padrão, -80px em over-photo/form-float). No mobile
     isso cobria o final do conteúdo do header (risco do lead, badges, ações...).
     Reserva espaço abaixo do último elemento pra nada ficar escondido sob os cards. */
  /* só o page-header precisa: ele põe o conteúdo direto no .container e não tem o
     padding-bottom que o .unit-hero .hero-content já reserva (108px, em units.css).
     Neutraliza o padding-bottom nativo (50px) e reserva espaço pra o conteúdo (lead/
     risco) não ficar sob o card que sobe. O unit-hero se protege sozinho. */
  .page-header:has(+ .section--light:not(.footer)),
  .page-header:has(+ .page-body) { padding-bottom: 0; }
  .page-header:has(+ .section--light:not(.footer)) .container > :last-child,
  .page-header:has(+ .page-body) .container > :last-child {
    margin-bottom: clamp(92px, 25vw, 104px);
  }
  .proc-item { gap: 18px; }
}

/* ===== página Empresa / Sobre ===== */
.section-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.section-nav a {
  font-size: clamp(14px, 0.586vw, 15px); font-weight: 600;
  color: rgba(255,255,255,0.82);
  padding: 9px 16px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.section-nav a:hover { color: #fff; border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.12); }

/* números */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat .stat-num { font-size: clamp(34px, 4vw, 46px); font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--text); }
.stat .stat-label { font-size: clamp(14px, 0.586vw, 15px); color: var(--muted); line-height: 1.4; }
.stat .stat-num { color: var(--pc, var(--text)); }

/* FAQ (accordion) */
.faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details {
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
  padding: 0 20px; transition: border-color 0.2s ease;
}
.faq details[open] { border-color: color-mix(in oklab, var(--pc, var(--text)) 30%, var(--line)); }
.faq summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none;
  padding: 18px 0; font-size: clamp(14px, 0.586vw, 15px); font-weight: 700; color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; font-size: clamp(17px, 0.859vw, 22px); font-weight: 400; line-height: 1;
  color: var(--pc, var(--muted)); transition: transform 0.2s ease;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p {
  margin: 0; padding: 0 0 20px; font-size: clamp(14px, 0.586vw, 15px); line-height: 1.6; color: var(--muted); max-width: 64ch;
}

/* listas de produtos/serviços (links em pílula) */
.tag-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.tag-links a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: clamp(14px, 0.586vw, 15px); font-weight: 600;
  color: var(--muted);
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: var(--glass-faint);
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.tag-links a:hover {
  color: color-mix(in oklab, var(--pc, var(--text)) 78%, var(--mix-fg));
  border-color: color-mix(in oklab, var(--pc, var(--text)) 32%, var(--line));
  transform: translateY(-1px);
}

/* equipe / sócios — cards lado a lado (3 colunas) */
.team-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.team-member {
  display: flex; flex-direction: column;
  padding: 32px 30px;
  border-radius: 18px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--grad-top), var(--grad-bottom));
  transition: border-color .2s ease, transform .2s ease;
}
.team-member:hover { border-color: var(--line); transform: translateY(-3px); }
.team-avatar { width: 98px; height: 98px; border-radius: 50%; overflow: hidden; flex: none; background: var(--glass); }
.team-avatar image-slot { width: 100%; height: 100%; display: block; }
.team-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) brightness(1.07) contrast(1.03); transition: filter 0.3s ease; }
.team-member:hover .team-avatar img { filter: grayscale(0) brightness(1.04) contrast(1.02); }
.team-info { display: flex; flex-direction: column; flex: 1; margin-top: 18px; }
.team-name { font-size: clamp(15px, 0.781vw, 20px); font-family: var(--font-body); font-weight: 700; letter-spacing: -0.01em; }
.team-role { font-size: clamp(14px, 0.586vw, 15px); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); margin-top: 5px; line-height: 1.4; }
.team-bio { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.team-bio p { font-size: clamp(14px, 0.586vw, 15px); color: var(--muted); line-height: 1.62; text-wrap: pretty; }
.team-contact { display: flex; flex-direction: column; gap: 7px; margin-top: auto; padding-top: 18px; }
.team-bio + .team-contact { margin-top: 18px; }
.team-contact a { display: inline-flex; align-items: center; gap: 9px; font-size: clamp(14px, 0.586vw, 15px); color: var(--muted); transition: color .18s ease; }
.team-contact a:hover { color: var(--text); }
.team-contact a i { font-size: clamp(14px, 0.586vw, 15px); color: var(--faint); flex: none; }

@media (max-width: 980px) {
  .team-list { grid-template-columns: 1fr; gap: 18px; }
  .stat-row { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .section-nav { gap: 8px; }
}

/* ===== página Empresa: ecossistema (produtos & serviços) ===== */
.eco-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.eco-block {
  display: flex; flex-direction: column; gap: 14px;
  padding: 34px 32px;
  border-radius: 18px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--grad-top), var(--grad-bottom));
}
.eco-block > h3 { font-size: clamp(16px, 0.82vw, 21px); font-family: var(--font-body); font-weight: 700; letter-spacing: -0.01em; }
.eco-block > p { font-size: clamp(14px, 0.586vw, 15px); color: var(--muted); line-height: 1.62; text-wrap: pretty; }
.eco-block ul { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-top: 4px; }
.eco-block li { position: relative; padding-left: 16px; }
.eco-block li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pc, var(--text));
}
.eco-block li a { display: inline-block; font-size: clamp(14px, 0.586vw, 15px); font-weight: 700; color: var(--text); transition: color 0.18s ease; }
.eco-block li a:hover { color: color-mix(in oklab, var(--pc, var(--text)) 70%, var(--mix-fg)); }
.eco-block li .eco-desc { display: block; font-size: clamp(14px, 0.586vw, 15px); color: var(--muted); line-height: 1.5; margin-top: 2px; }
@media (max-width: 860px) { .eco-cols { grid-template-columns: 1fr; } }

/* ===== intro da seção "Os sócios" ===== */
.team-intro { display: flex; flex-direction: column; gap: 30px; margin: -38px 0 52px; }
.team-intro-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.team-intro-cols p { font-size: clamp(14px, 0.586vw, 15px); color: var(--muted); line-height: 1.7; text-wrap: pretty; }
.team-intro .team-closing { font-size: clamp(14px, 0.742vw, 19px); font-weight: 600; color: var(--text); line-height: 1.55; max-width: 900px; }
@media (max-width: 860px) { .team-intro-cols { grid-template-columns: 1fr; gap: 16px; } }

/* ===== BanxLab — bloco "build" (terminal sob demanda) ===== */
.lab-build-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 56px; align-items: start; }
.lab-build-copy { display: flex; flex-direction: column; gap: 20px; max-width: 430px; }
.lab-build-copy h2 { font-size: clamp(27px, 1.48vw, 38px); line-height: 1.16; letter-spacing: -0.02em; }
.lab-build-copy p { color: var(--muted); font-size: clamp(14px, 0.586vw, 15px); line-height: 1.62; text-wrap: pretty; }
.lab-build-copy .btn { align-self: flex-start; margin-top: 6px; }

.lab-term {
  border-radius: 16px; overflow: hidden;
  background: oklch(0.21 0.012 85);
  border: 1px solid oklch(0.34 0.02 85);
  box-shadow: 0 34px 64px -30px oklch(0.21 0.05 85 / 0.6), 0 2px 10px oklch(0 0 0 / 0.14);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  /* altura fixa unificada (BanxLab/Host/Hub/Studio): 350px no total */
  height: 350px; display: flex; flex-direction: column;
}
.lab-term-bar {
  flex: none;
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px;
  background: oklch(0.25 0.014 85);
  border-bottom: 1px solid oklch(0.32 0.018 85);
}
.lab-term-bar span { width: 11px; height: 11px; border-radius: 99px; background: oklch(0.42 0.02 85); }
.lab-term-bar span:nth-child(1) { background: oklch(0.64 0.16 25); }
.lab-term-bar span:nth-child(2) { background: oklch(0.78 0.12 85); }
.lab-term-bar span:nth-child(3) { background: oklch(0.72 0.14 150); }
.lab-term-bar em { margin-left: auto; font-style: normal; font-size: clamp(14px, 0.586vw, 15px); letter-spacing: 0.04em; color: oklch(0.62 0.012 85); }
.lab-term-body {
  margin: 0; padding: 20px 22px 18px;
  font-size: clamp(14px, 0.586vw, 15px); line-height: 1.6;
  color: oklch(0.9 0.012 85);
  /* preenche a altura do frame (.lab-term = 350px) */
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  white-space: pre-wrap; word-break: break-word;
}
.lab-term-body .tl-prompt { color: oklch(0.81 0.09 85); font-weight: 600; }
.lab-term-body .tl-cmd { color: oklch(0.93 0.012 85); }
.lab-term-body .tl-ok { color: oklch(0.78 0.13 150); }
.lab-term-cursor {
  display: inline-block; width: 8px; height: 1.05em; vertical-align: text-bottom;
  background: oklch(0.81 0.09 85); animation: labBlink 1s steps(2, start) infinite;
}
@keyframes labBlink { 50% { opacity: 0; } }
@media (max-width: 860px) {
  .lab-build-grid { grid-template-columns: 1fr; gap: 30px; }
  .lab-build-copy { max-width: none; }
  .lab-build-copy h2 { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) { .lab-term-cursor { animation: none; } }

/* ===== Painéis do bloco dividido (Host / Hub / Studio) — moldura .lab-term ===== */
/* Host — monitor de status */
.panel-monitor {
  margin: 0; padding: 18px 22px 22px; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.panel-monitor .pm-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 2px; font-size: clamp(13px, 0.547vw, 14px);
  border-bottom: 1px solid oklch(0.3 0.014 85);
}
.panel-monitor .pm-row:last-child { border-bottom: 0; }
.panel-monitor .pm-dot {
  width: 8px; height: 8px; border-radius: 99px; flex: none;
  background: oklch(0.74 0.15 150); box-shadow: 0 0 0 4px oklch(0.74 0.15 150 / 0.16);
}
.panel-monitor .pm-label { color: oklch(0.74 0.012 85); }
.panel-monitor .pm-val { margin-left: auto; color: oklch(0.93 0.012 85); font-weight: 600; }

/* Hub — dashboard de métricas */
.panel-metrics {
  margin: 0; padding: 20px; flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: center;
}
.panel-metrics .pmx {
  background: oklch(0.25 0.014 85); border: 1px solid oklch(0.32 0.018 85);
  border-radius: 12px; padding: 15px 16px; display: flex; flex-direction: column; gap: 5px;
}
.panel-metrics .pmx-label {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: oklch(0.66 0.012 85);
}
.panel-metrics .pmx-val {
  font-size: clamp(21px, 1.055vw, 27px); font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: oklch(0.95 0.012 85);
}
.panel-metrics .pmx-delta {
  font-size: 12px; font-weight: 700; color: oklch(0.78 0.14 150);
  display: inline-flex; align-items: center; gap: 4px;
}

/* Studio — mockups em janela */
.panel-mockups {
  margin: 0; padding: 16px; flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px;
}
.panel-mockups image-slot { display: block; width: 100%; height: 100%; min-height: 100px; }
.panel-mockups .pk-tall { grid-row: span 2; min-height: 212px; }

/* Animações dos painéis */
/* Host — entrada das linhas + pulso "ao vivo" */
@keyframes pmRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pmPulse {
  0% { box-shadow: 0 0 0 0 oklch(0.74 0.15 150 / 0.5); }
  70%, 100% { box-shadow: 0 0 0 6px oklch(0.74 0.15 150 / 0); }
}
.panel-monitor .pm-row { opacity: 0; animation: pmRowIn 0.5s ease forwards; }
.panel-monitor .pm-row:nth-child(1) { animation-delay: 0.05s; }
.panel-monitor .pm-row:nth-child(2) { animation-delay: 0.13s; }
.panel-monitor .pm-row:nth-child(3) { animation-delay: 0.21s; }
.panel-monitor .pm-row:nth-child(4) { animation-delay: 0.29s; }
.panel-monitor .pm-row:nth-child(5) { animation-delay: 0.37s; }
.panel-monitor .pm-row:nth-child(6) { animation-delay: 0.45s; }
.panel-monitor .pm-dot { animation: pmPulse 2.4s ease-out infinite; }
.panel-monitor .pm-val[data-live] { transition: color 0.2s ease; }

/* Studio — destaque rotativo dos mockups */
.panel-mockups .pk-cycle { opacity: 0.6; transition: opacity 0.55s ease, transform 0.55s ease, box-shadow 0.55s ease; }
.panel-mockups .pk-cycle.is-active {
  opacity: 1; transform: scale(1.015); z-index: 1;
  box-shadow: 0 0 0 2px var(--pc, oklch(0.7 0.18 0)), 0 16px 30px -16px oklch(0 0 0 / 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .panel-monitor .pm-row { opacity: 1; animation: none; }
  .panel-monitor .pm-dot { animation: none; }
  .panel-mockups .pk-cycle { opacity: 1; }
}

/* ===== BanxHub — chamada de impacto ===== */
.hub-impact .container { max-width: 1000px; text-align: center; }
.hub-impact-line { font-size: clamp(24px, 3.2vw, 40px); line-height: 1.3; font-weight: 700; letter-spacing: -0.018em; text-wrap: balance; color: var(--text); }
.hub-impact-line .hub-em { color: var(--c-hub); }

/* ===== Central de Suporte (casca da página Diferenciais com o formulário dentro) ===== */
.sup-card { gap: clamp(22px, 3vw, 34px); }
/* honeypot anti-spam (escondido) */
.sup-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-field .opt { color: var(--faint); font-weight: 400; }
.form-field input[type="file"] { padding: 11px 12px; font-size: 14px; color: var(--muted); border-style: dashed; cursor: pointer; }
.form-field input[type="file"]::file-selector-button { margin-right: 12px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--glass); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
/* card de atendimento direto (e-mails + botões) na sidebar */
.side-card--cta .sup-emails { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.side-card--cta .sup-emails a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); }
.side-card--cta .sup-emails a i { color: var(--muted); font-size: 15px; }
.side-card--cta .sup-cta-row { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.side-card--cta .sup-cta-row .btn { width: 100%; justify-content: center; }
/* cards pequenos da Suporte: uma única coluna (ícone em cima, informação abaixo) */
.sup-side .side-card,
.diff-side .side-card { flex-direction: column; align-items: flex-start; gap: 10px; }
.sup-side .side-card > div,
.diff-side .side-card > div { width: 100%; }   /* bloco de info ocupa a largura toda (botões de ponta a ponta) */
.sup-side .s-icon i,
.diff-side .s-icon i { font-size: clamp(21px, 1.1vw, 25px); line-height: 1; }
@media (max-width: 560px) {
  .sup-form .form-actions .btn-primary { width: 100%; }
  .sup-contacts { flex-direction: column; align-items: flex-start; gap: 12px; }
}