/* ============================================================
   PAYBER · página white-label (CaaS)
   Complementa styles.css — carregar sempre DEPOIS dele.
   ============================================================ */

/* ---------- marca com selo "para empresas" ---------- */
.brand__biz{
  font-family:var(--font-mono); font-size:.58rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--lime); padding:.28rem .5rem; border:1px solid rgba(184,244,12,.28); border-radius:999px;
  white-space:nowrap; align-self:center;
}

/* ---------- terminal / market feed (hero) ---------- */
.terminal{
  background:linear-gradient(180deg,rgba(21,21,31,.92),rgba(12,12,19,.92));
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(10px); overflow:hidden;
  transform:perspective(1200px) rotateY(-7deg) rotateX(3deg);
  transition:transform .6s var(--ease);
}
.hero__panel:hover .terminal{ transform:perspective(1200px) rotateY(-2deg) rotateX(1deg); }
.terminal__bar{ display:flex; align-items:center; gap:.7rem; padding:.85rem 1.1rem; border-bottom:1px solid var(--line); }
.terminal__dots{ display:flex; gap:6px; }
.terminal__dots i{ width:10px; height:10px; border-radius:50%; background:#2a2a36; }
.terminal__dots i:nth-child(1){ background:#3a3147; }
.terminal__title{ font-family:var(--font-mono); font-size:.66rem; color:var(--muted-2); letter-spacing:.04em; }
.terminal__live{ margin-left:auto; display:flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.62rem; color:var(--lime); letter-spacing:.12em; }
.terminal__live i{ width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 8px var(--lime); animation:pulse 1.6s infinite; }
.terminal__body{ padding:.6rem 1.1rem 1rem; }
.quote{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:1rem; padding:.72rem 0; border-bottom:1px solid rgba(255,255,255,.04); }
.quote__sym{ font-family:var(--font-mono); font-size:.82rem; color:var(--muted); letter-spacing:.02em; }
.quote__sym b{ color:var(--text); font-weight:600; }
.quote__price{ font-family:var(--font-mono); font-size:.92rem; font-weight:500; font-variant-numeric:tabular-nums; }
.quote__chg{ font-family:var(--font-mono); font-size:.74rem; font-weight:500; min-width:62px; text-align:right; }
.quote__chg.up{ color:#6ee787; } .quote__chg.down{ color:#ff7b72; }

.depth{ margin-top:1.1rem; }
.depth__label{ font-family:var(--font-mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.2em; color:var(--muted-2); }
.depth__bars{ display:flex; align-items:flex-end; gap:3px; height:46px; margin-top:.6rem; }
.depth__bars span{ flex:1; background:var(--grad); border-radius:2px 2px 0 0; opacity:.85; transition:height .5s var(--ease); }

.terminal__foot{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; padding:.8rem 1.1rem; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.64rem; color:var(--muted-2); letter-spacing:.03em; }
.terminal__foot b{ color:var(--text); font-weight:500; }
.dot-sep{ width:3px; height:3px; border-radius:50%; background:var(--muted-2); }

/* ---------- fluxo (marca → payber → parceiro) ---------- */
.flow{ display:grid; grid-template-columns:1fr auto 1.15fr auto 1fr; align-items:stretch; gap:.5rem; }
.flow__node{ padding:2rem 1.7rem; border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(180deg,var(--surface),var(--bg-2)); }
.flow__node--core{ position:relative; border-color:transparent; background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box; border:1.5px solid transparent;
  box-shadow:0 20px 60px -25px rgba(77,40,232,.6); }
.flow__mark{ width:42px; margin-bottom:1rem; }
.flow__step{ font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.18em; color:var(--lime); }
.flow__node h4{ font-family:var(--font-display); font-weight:600; font-size:1.35rem; margin:.55rem 0 .6rem; }
.flow__node p{ color:var(--muted); font-size:.92rem; }
.flow__link{ display:flex; align-items:center; justify-content:center; min-width:56px; padding:0 6px; }
.flow__link span{ position:relative; width:100%; height:2px; background:linear-gradient(90deg,transparent,var(--lime)); }
.flow__link span::after{ content:""; position:absolute; right:-1px; top:50%; transform:translateY(-50%);
  border-left:8px solid var(--lime); border-top:5px solid transparent; border-bottom:5px solid transparent; }

/* ---------- api + code ---------- */
.api{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.api__feats{ list-style:none; margin-top:1.8rem; display:flex; flex-direction:column; gap:.9rem; }
.api__feats li{ position:relative; padding-left:1.7rem; color:var(--muted); font-size:.98rem; }
.api__feats li b{ color:var(--text); font-weight:700; }
.api__feats li::before{ content:""; position:absolute; left:0; top:.5em; width:10px; height:10px; border-radius:50%; border:2px solid var(--lime); }
.code{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg,#0c0c14,#08080e); box-shadow:0 40px 90px -35px rgba(0,0,0,.8); }
.code__tabs{ display:flex; gap:.3rem; padding:.7rem .7rem 0; border-bottom:1px solid var(--line); background:rgba(255,255,255,.015); }
.code__tab{ font-family:var(--font-mono); font-size:.74rem; color:var(--muted-2); background:none; border:0; cursor:pointer;
  padding:.6rem .9rem; border-radius:8px 8px 0 0; transition:.25s; letter-spacing:.02em; }
.code__tab:hover{ color:var(--text); }
.code__tab.is-active{ color:var(--text); background:rgba(255,255,255,.04); box-shadow:inset 0 -2px 0 var(--lime); }
.code__pane{ display:none; padding:1.5rem 1.6rem; font-family:var(--font-mono); font-size:.8rem; line-height:1.75; overflow-x:auto; color:#c9c9d6; }
.code__pane.is-active{ display:block; animation:fade .4s var(--ease); }
.c-cmt{ color:#5a5a6e; } .c-str{ color:#b8f40c; } .c-kw{ color:#b794ff; } .c-fn{ color:#79c0ff; }
.c-num{ color:#ff9d6b; } .c-var{ color:#7be0d0; }

/* ---------- público-alvo ---------- */
.audience{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.aud{ padding:1.8rem 1.5rem; border-radius:var(--r); border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface),var(--bg-2)); transition:.4s var(--ease); }
.aud:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.aud span{ font-family:var(--font-display); font-weight:600; font-size:1.12rem; display:block; margin-bottom:.5rem; }
.aud p{ color:var(--muted); font-size:.9rem; }

/* ---------- formulário: aqui ele é o CTA principal ---------- */
.cform--biz{ padding-top:0; border-top:0; }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .brand__biz{ display:none; }
}
@media (max-width:1000px){
  .api{ grid-template-columns:1fr; }
  .audience{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .flow{ grid-template-columns:1fr; }
  .flow__link{ height:38px; padding:0; }
  .flow__link span{ width:2px; height:100%; margin:0 auto; background:linear-gradient(180deg,transparent,var(--lime)); }
  .flow__link span::after{ right:auto; left:50%; top:auto; bottom:-1px; transform:translateX(-50%);
    border-left:5px solid transparent; border-right:5px solid transparent; border-top:8px solid var(--lime); border-bottom:0; }
  .terminal{ transform:none !important; }
}
@media (max-width:480px){
  .audience{ grid-template-columns:1fr; }
}