/* Ilustracoes em codigo no lugar das fotos de banco de imagens.
   Mesma linguagem do cartao do hero: janela de console, borda roxa, fios em roxo e laranja.
   Tudo aqui e ilustrativo e nao usa dados reais. */

.light-section .section-heading>p{color:#b8b3c2}

.bf-visual{position:relative;display:flex;flex-direction:column;border:1px solid #a773e44d;border-radius:22px;
  background:linear-gradient(140deg,#19151e,#0f0e13 60%);
  box-shadow:0 24px 70px #0006,0 0 70px #6d28d914,inset 0 1px #ffffff12;overflow:hidden;transition:border-color .4s,box-shadow .4s}
.bf-visual:hover{border-color:#b98af08c;box-shadow:0 24px 70px #0006,0 0 80px #6d28d926,inset 0 1px #ffffff12}
.bf-visual::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(360px circle at 82% 4%,#9b67ff1c,transparent 70%),radial-gradient(300px circle at 6% 96%,#f9731612,transparent 70%)}
.bf-visual::after{display:none}
.bf-visual>*{position:relative}

.bf-bar{display:flex;align-items:center;gap:13px;padding:15px 20px;border-bottom:1px solid var(--line);
  font:10px var(--display);color:#ada5bb;letter-spacing:.4px}
.bf-body{display:grid;gap:14px;padding:20px 22px 22px}
.bf-label{display:block;font:600 9px var(--display);letter-spacing:1.4px;color:#9d93ad;margin-bottom:9px}

/* legenda: deixa de flutuar sobre a foto e vira o rodape do cartao */
.bf-visual figcaption{position:static;margin-top:auto;padding:20px 26px 24px;border-top:1px solid var(--line);
  background:#08080b40;color:#fafafa;inset:auto}
.bf-visual figcaption span{display:block;font-size:9px;letter-spacing:1.8px;color:#d6b5f6;margin-bottom:11px}
.bf-visual figcaption strong{display:block;font:500 24px/1.28 var(--display);letter-spacing:-.6px}
.bf-visual figcaption small{display:block;margin-top:11px;font-size:10px;letter-spacing:0;color:#aaa1b5}

/* ── produto: editor de codigo + painel + etapas ── */
.bf-editor{border:1px solid #ffffff12;border-radius:14px;background:#0b0a0f;overflow:hidden}
.bf-tabs{display:flex;gap:2px;padding:7px 8px 0;border-bottom:1px solid var(--line);font:10px var(--display);color:#8f869d}
.bf-tabs span{padding:7px 11px 8px;border-radius:8px 8px 0 0}
.bf-tabs .on{background:#1a1622;color:#e2caff;box-shadow:inset 0 -2px #f97316}
.bf-code{margin:0;padding:13px 14px 14px 0;list-style:none;counter-reset:linha;font:11.5px/1.95 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#cfc8da;overflow:hidden}
.bf-code li{counter-increment:linha;display:block;white-space:pre;opacity:0;animation:bf-surge .5s ease forwards}
.bf-code li::before{content:counter(linha);display:inline-block;width:34px;margin-right:12px;text-align:right;color:#5e566b}
.bf-code li:nth-child(1){animation-delay:.25s}.bf-code li:nth-child(2){animation-delay:.6s}
.bf-code li:nth-child(3){animation-delay:.95s}.bf-code li:nth-child(4){animation-delay:1.3s}
.bf-code li:nth-child(5){animation-delay:1.65s}.bf-code li:nth-child(6){animation-delay:2s}
.bf-code .k{color:#c099f2}.bf-code .f{color:#ffb27a}.bf-code .s{color:#9fd8b0}.bf-code .c{color:#6f677c}
.bf-caret{display:inline-block;width:7px;height:13px;margin-left:3px;vertical-align:-2px;background:#f97316;animation:bf-pisca 1s steps(1) infinite}

.bf-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.bf-tile{padding:11px 12px 12px;border:1px solid #ffffff12;border-radius:12px;background:linear-gradient(130deg,#25202d,#19161f)}
.bf-tile span{display:block;font:500 10px var(--display);color:#b5aabe;margin-bottom:9px}
.bf-meter{display:block;height:5px;border-radius:5px;background:#ffffff14;overflow:hidden}
.bf-meter i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#9b67ff,#ff914d);transform-origin:left;animation:bf-enche 2.6s cubic-bezier(.2,.65,.3,1) both}
.bf-tile:nth-child(1) .bf-meter i{width:78%}.bf-tile:nth-child(2) .bf-meter i{width:52%;animation-delay:.25s}.bf-tile:nth-child(3) .bf-meter i{width:91%;animation-delay:.5s}

.bf-chart{display:block;width:100%;height:92px;border:1px solid #ffffff12;border-radius:12px;background:#0b0a0f}
.bf-grid{stroke:#ffffff0f;stroke-width:1}
.bf-area{fill:url(#bf-area);opacity:.9}
.bf-line{fill:none;stroke:url(#bf-stroke);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:520;stroke-dashoffset:0}
.reveal-ready .bf-line{stroke-dashoffset:520}
.reveal-ready.is-visible .bf-line{animation:bf-desenha 2.4s .35s ease forwards}
.reveal-ready .bf-area{opacity:0}
.reveal-ready.is-visible .bf-area{animation:bf-surge 1.2s 1.6s ease forwards}
.bf-ponto{fill:#ff914d;filter:drop-shadow(0 0 5px #ff914d);animation:bf-respira 2.2s ease-in-out infinite}

.bf-flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:500 10.5px var(--display);color:#aaa1b5}
.bf-flow span{padding:7px 11px;border:1px solid #ffffff14;border-radius:30px;background:#ffffff05;animation:bf-etapa 8s ease-in-out infinite}
.bf-flow span:nth-of-type(2){animation-delay:2s}.bf-flow span:nth-of-type(3){animation-delay:4s}.bf-flow span:nth-of-type(4){animation-delay:6s}
.bf-flow i{flex:1;min-width:10px;height:1px;background:linear-gradient(90deg,#9b67ff66,#ff914d66)}

/* ── infraestrutura: terminal de publicacao + camadas + batimento ── */
.bf-infra{height:auto}
.bf-term{border:1px solid #ffffff12;border-radius:14px;background:#0b0a0f;padding:14px 16px;
  font:11.5px/1.9 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#cfc8da;white-space:pre-wrap;overflow:hidden}
.bf-term p{margin:0;opacity:0;animation:bf-surge .45s ease forwards}
.bf-term p:nth-child(1){animation-delay:.3s}.bf-term p:nth-child(2){animation-delay:1s}
.bf-term p:nth-child(3){animation-delay:1.6s}.bf-term p:nth-child(4){animation-delay:2.2s}
.bf-term .pr{color:#c099f2}.bf-term .ok{color:#9fd8b0}.bf-term .dim{color:#8f869d}

.bf-rack{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bf-rack li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 14px;
  border:1px solid #ffffff12;border-radius:12px;background:linear-gradient(130deg,#25202d,#19161f);box-shadow:0 8px 20px #0003}
.bf-rack strong{display:block;font:500 12.5px var(--display);line-height:1.35;color:#fafafa}
.bf-rack em{display:block;font-style:normal;font-size:9.5px;color:#b5aabe;margin-top:3px}
.bf-led{width:8px;height:8px;border-radius:50%;background:#7ee0a1;box-shadow:0 0 0 3px #7ee0a11f,0 0 10px #7ee0a1aa;animation:bf-respira 2.4s ease-in-out infinite}
.bf-rack li:nth-child(2) .bf-led{animation-delay:.6s}.bf-rack li:nth-child(3) .bf-led{animation-delay:1.2s}.bf-rack li:nth-child(4) .bf-led{animation-delay:1.8s}
.bf-act{display:flex;align-items:flex-end;gap:3px;height:20px}
.bf-act i{width:4px;border-radius:2px;background:linear-gradient(#ff914d,#9b67ff);transform-origin:bottom;animation:bf-barra 1.3s ease-in-out infinite alternate}
.bf-act i:nth-child(1){height:45%}.bf-act i:nth-child(2){height:90%;animation-delay:.2s}.bf-act i:nth-child(3){height:60%;animation-delay:.4s}
.bf-act i:nth-child(4){height:100%;animation-delay:.1s}.bf-act i:nth-child(5){height:35%;animation-delay:.5s}

.bf-pulse{display:block;width:100%;height:44px}
.bf-pulse .base{fill:none;stroke:#ffffff14;stroke-width:1.4}
.bf-pulse .viva{fill:none;stroke:url(#bf-stroke-2);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:70 560;
  filter:drop-shadow(0 0 4px #a675ff);animation:bf-corre 3.6s linear infinite}

@keyframes bf-surge{to{opacity:1}}
@keyframes bf-pisca{50%{opacity:0}}
@keyframes bf-enche{from{transform:scaleX(0)}}
@keyframes bf-desenha{to{stroke-dashoffset:0}}
@keyframes bf-respira{50%{opacity:.45}}
@keyframes bf-barra{to{transform:scaleY(.35)}}
@keyframes bf-corre{to{stroke-dashoffset:-630}}
@keyframes bf-etapa{0%,20%,100%{border-color:#ffffff14;color:#aaa1b5;background:#ffffff05}6%,14%{border-color:#f97316aa;color:#fff;background:#6d28d930}}

@media(max-width:800px){
  .bf-body{padding:16px 16px 18px}
  .bf-code{font-size:10.5px}
  .bf-visual figcaption strong{font-size:22px}
  .development-image.bf-visual{min-height:0}
}
@media(max-width:480px){
  .bf-bar{padding:13px 14px;font-size:9px;gap:9px}
  .bf-code{font-size:9.5px;line-height:1.9}
  .bf-code li::before{width:22px;margin-right:9px}
  .bf-tabs span:nth-child(3){display:none}
  .bf-tile{padding:9px 9px 10px}.bf-tile span{font-size:9px}
  .bf-flow{font-size:9.5px}.bf-flow span{padding:6px 9px}
  .bf-term{font-size:10px}
  .bf-rack li{padding:10px 11px;gap:10px}
}
/* Sem animacao: tudo aparece ja no estado final. */
@media(prefers-reduced-motion:reduce){
  .bf-code li,.bf-term p{opacity:1!important}
  .bf-line{stroke-dashoffset:0!important}
  .bf-area{opacity:.9!important}
}
body[data-motion=paused] .bf-code li,body[data-motion=paused] .bf-term p{opacity:1}
body[data-motion=paused] .bf-line{stroke-dashoffset:0}
body[data-motion=paused] .bf-area{opacity:.9}