/* Bezt.AI — sistema Órbita · tokens v2.0.0. Derivado de tokens.json.
   Cole isto no topo de qualquer artefato da marca. */

@font-face{font-family:"Funnel Display";src:url("fonts/funnel-display-lat.woff2") format("woff2");
  font-weight:400 800;font-display:block;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Funnel Display";src:url("fonts/funnel-display-ext.woff2") format("woff2");
  font-weight:400 800;font-display:block;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans-lat.woff2") format("woff2");
  font-weight:400 700;font-display:block;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans-ext.woff2") format("woff2");
  font-weight:400 700;font-display:block;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-400.ttf") format("truetype");font-weight:400;font-display:block}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-700.ttf") format("truetype");font-weight:700;font-display:block}

:root{
  /* cor */
  --ink:#14161C; --ink-deep:#0B0D12; --ink-soft:#272B35;
  --blue:#3A7CFF; --blue-press:#2563EB; --blue-wash:#EDF2FF;
  --paper:#FFFFFF; --canvas:#FCFCFB; --well:#F4F5F3;
  --line:#E9ECF1; --line-strong:#D6DBE3;
  --muted:#616977; --faint:#8891A0;
  --success:#12B76A; --warn:#F2A93B; --danger:#EF4444;

  /* tipo */
  --fs-disp:"Funnel Display","Instrument Sans",system-ui,sans-serif;
  --fs-text:"Instrument Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --fs-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* raio */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* sombra */
  --sh-card:0 1px 2px rgba(20,22,28,.04),0 8px 24px rgba(20,22,28,.05);
  --sh-lift:0 2px 4px rgba(20,22,28,.05),0 18px 44px rgba(20,22,28,.10);
  --sh-focus:0 0 0 3px rgba(58,124,255,.28);
}

/* ============ TIPOGRAFIA ============ */
/* display: a headline da casa. Uma palavra em <em> fica azul, nunca duas.
   Fecha com <span class="bz-pt"></span> — o ponto do wordmark como ponto final. */
.bz-display{font-family:var(--fs-disp);font-weight:800;font-size:clamp(42px,6.4vw,84px);
  letter-spacing:-.055em;line-height:1;color:var(--ink);margin:0}
.bz-display em{font-style:normal;color:var(--blue)}

.bz-h1{font-family:var(--fs-disp);font-weight:800;font-size:clamp(30px,3.8vw,46px);letter-spacing:-.048em;line-height:1.06;color:var(--ink);margin:0}
.bz-h2{font-family:var(--fs-disp);font-weight:700;font-size:30px;letter-spacing:-.04em;line-height:1.15;color:var(--ink);margin:0}
.bz-h3{font-family:var(--fs-disp);font-weight:700;font-size:20px;letter-spacing:-.035em;line-height:1.25;color:var(--ink);margin:0}
.bz-body{font-family:var(--fs-text);font-size:16.5px;line-height:1.62;color:var(--muted);margin:0}
.bz-small{font-family:var(--fs-text);font-size:13.5px;line-height:1.55;color:var(--muted);margin:0}
.bz-micro{font-family:var(--fs-mono);font-weight:700;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin:0}

/* o ponto final. Prenda-o à última palavra com <span class="bz-nb"> pra não quebrar linha sozinho. */
.bz-pt{display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--blue);margin-left:.07em}
.bz-nb{white-space:nowrap}

/* ============ ÓRBITA — as primitivas do ponto ============ */

/* anel: a marca-d'água. Um por peça, sangrando fora da tela, nunca centralizado. */
.bz-anel{position:absolute;border-radius:50%;border:1px solid var(--line);pointer-events:none}
.bz-anel::before{content:"";position:absolute;inset:16%;border-radius:50%;border:1px solid var(--line)}
/* o satélite pousa a oeste do anel: é o ponto que fica dentro da tela quando o anel sangra */
.bz-anel::after{content:"";position:absolute;left:-6px;top:50%;width:12px;height:12px;margin-top:-6px;
  border-radius:50%;background:var(--blue)}

/* avatar: o anel emoldura a pessoa, o satélite marca o status */
.bz-avatar{position:relative;width:48px;height:48px;border-radius:50%;background:var(--blue-wash);
  display:grid;place-items:center;font-family:var(--fs-disp);font-weight:700;font-size:15px;
  letter-spacing:-.04em;color:var(--blue);box-shadow:0 0 0 1px var(--line-strong)}
.bz-avatar[data-status]::after{content:"";position:absolute;right:-1px;bottom:-1px;width:13px;height:13px;
  border-radius:50%;background:var(--blue);box-shadow:0 0 0 2.5px var(--canvas)}
.bz-avatar[data-status="ok"]::after{background:var(--success)}
.bz-avatar[data-status="off"]::after{background:var(--line-strong)}

/* medidor: o mesmo anel mede fase, meta e SLA. Passe --v de 0 a 100. */
.bz-medidor{--v:0;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--blue) calc(var(--v)*1%),var(--line) 0);position:relative}
.bz-medidor::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--canvas)}
.bz-medidor span{position:relative;font-family:var(--fs-disp);font-weight:700;font-size:15px;letter-spacing:-.04em}

/* selo: "em produção", em caso e proposta */
.bz-selo{width:52px;height:52px;border-radius:50%;background:var(--ink);display:grid;place-items:center;position:relative}
.bz-selo::before{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid var(--blue)}
.bz-selo::after{content:"";position:absolute;left:50%;top:5px;width:7px;height:7px;margin-left:-3.5px;
  border-radius:50%;background:var(--blue)}
.bz-selo i{width:8px;height:8px;border-radius:50%;background:#fff}

/* lista orbital: bullet é anel vazio, cheio quando concluído */
.bz-lista{list-style:none;margin:0;padding:0}
.bz-lista li{position:relative;padding:9px 0 9px 26px;font-family:var(--fs-text);font-size:15px;color:var(--muted)}
.bz-lista li::before{content:"";position:absolute;left:0;top:15px;width:11px;height:11px;border-radius:50%;
  border:1.4px solid var(--line-strong);background:transparent}
.bz-lista li[data-ok]{color:var(--ink)}
.bz-lista li[data-ok]::before{border-color:var(--blue);background:var(--blue);box-shadow:inset 0 0 0 2.5px var(--canvas)}

/* pill */
.bz-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 16px 7px 8px;border-radius:var(--r-pill);
  background:var(--blue-wash);font-family:var(--fs-text);font-size:13px;font-weight:500;color:var(--blue-press)}
.bz-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 0 4px rgba(58,124,255,.16)}

/* ============ SUPERFÍCIES ============ */
.bz-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:22px;box-shadow:var(--sh-card)}
.bz-card:hover{border-color:var(--line-strong);box-shadow:var(--sh-lift)}

.bz-term{background:var(--ink-deep);color:#E4E8F0;border-radius:var(--r-md);padding:18px 22px;
  font-family:var(--fs-mono);font-size:13.5px;line-height:1.7;overflow-x:auto}
.bz-term .p{color:var(--blue)}
.bz-term .c{color:#69718A}

/* ============ AÇÃO ============ */
/* CTA da casa: texto + o ponto. Sem caixa, sem borda. */
.bz-cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--fs-text);font-weight:600;
  font-size:15px;color:var(--ink);text-decoration:none;cursor:pointer;background:none;border:0;padding:0}
.bz-cta::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--blue);transition:transform .18s}
.bz-cta:hover::after{transform:scale(1.5)}

/* botão sólido: só quando precisa de peso (formulário, conversão em LP) */
.bz-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 12px 12px 22px;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;font-family:var(--fs-text);font-weight:600;font-size:15px;
  text-decoration:none;border:0;cursor:pointer}
.bz-btn::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--blue)}
.bz-btn--blue{background:var(--blue)} .bz-btn--blue::after{background:#fff}
.bz-btn--blue:hover{background:var(--blue-press)}
.bz-btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.bz-btn:focus-visible{outline:0;box-shadow:var(--sh-focus)}

/* ============ ÍCONE ============ */
.bz-icon{width:26px;height:26px;color:var(--ink);flex:none}
.bz-icon--blue{color:var(--blue)}

/* estado semântico — SÓ status, nunca decoração */
.bz-ok{color:var(--success)} .bz-warn{color:var(--warn)} .bz-bad{color:var(--danger)}

/* ============ FAIXA DE LOGOS ============ */
/* Prova de porte. A frase acima carrega a relação e tem peso visual de subtítulo:
   se ela virar letra miúda, a faixa passa a comunicar "clientes" e vira mentira. */
.bz-marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.bz-marquee .track{display:flex;width:max-content;align-items:center;gap:64px;
  animation:bz-slide 34s linear infinite}
.bz-marquee:hover .track{animation-play-state:paused}
/* altura optica, nao altura real: cada logo vem com padding proprio.
   Ajuste fino por logo com style="height:Npx" no img, nunca mexendo aqui. */
.bz-marquee img{height:42px;width:auto;max-width:170px;object-fit:contain;flex:none;
  filter:brightness(0);opacity:.42;transition:opacity .2s}
.bz-marquee img:hover{opacity:.8}
.bz-marquee .txt{flex:none;font-family:var(--fs-disp);font-weight:700;font-size:21px;
  letter-spacing:-.04em;color:var(--ink);opacity:.42}
@keyframes bz-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .bz-marquee .track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:26px}
  .bz-marquee{-webkit-mask-image:none;mask-image:none}
}