/* =============================================================
   Página Blockchain — BrBPO
   Estrutura IBM Carbon (grid assimétrico, hairlines, cantos retos,
   barra de acento), ritmo vertical generoso, unidades relativas.

   IMPORTANTE — cor explícita em todo elemento de texto.
   O plugin Kubio injeta `.with-kubio-global-style h1 { color: ... }`
   globalmente. Herança sempre perde para regra direta, então cada
   título e parágrafo aqui declara a própria cor, com especificidade
   `.bc <sel>` (0,2,x) para vencer a do Kubio (0,1,1).
   ============================================================= */

.bc {
	--ink:      #16323B;
	--ink-2:    #1D414C;
	--paper:    #F5F5F1;
	--white:    #FFFFFF;
	--accent:   #4FB3A6;
	--accent-d: #2F8578;
	--muted:    #5B767E;
	--muted-on-ink: rgba(245,245,241,.72);
	--line:     #DCDCD4;
	--line-on-ink: rgba(245,245,241,.20);

	/* Ritmo vertical — escala de 8px, folga generosa */
	--s1: .5rem;  --s2: 1rem;   --s3: 1.5rem; --s4: 2rem;
	--s5: 3rem;   --s6: 4.5rem; --s7: 6.5rem; --s8: 9rem;

	--maxw: 78rem;
	--gut: clamp(1.25rem, 5vw, 4rem);
	--ease: cubic-bezier(.2,.6,.25,1);

	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink);
	background: var(--white);
	overflow-x: hidden;
	overflow-x: clip;
}
.bc *, .bc *::before, .bc *::after { box-sizing: border-box; }

.bc__wrap {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gut);
}

/* ---------- Tipografia display ---------- */
.bc h1, .bc h2, .bc h3, .bc .num, .bc dt {
	font-family: "Inter Tight", "Inter", system-ui, sans-serif;
	font-weight: 600;
	letter-spacing: -.022em;
	line-height: 1.04;
	text-wrap: balance;
	margin: 0;
}
.bc p { text-wrap: pretty; }

/* ---------- Reveal ---------- */
.bc [data-reveal] {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity .8s var(--ease), transform .8s var(--ease);
	transition-delay: calc(var(--i, 0) * 65ms);
}
.bc [data-reveal].is-in { opacity: 1; transform: none; }
.bc.no-js [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.bc [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
	.bc *, .bc *::before { animation: none !important; }
}

/* ============================ HERO ============================ */
.bc .bc__hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--ink);
	padding-block: clamp(5rem, 14vw, var(--s8));
	border-bottom: 1px solid var(--line-on-ink);
}
.bc .bc__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(120% 90% at 8% 0%, rgba(79,179,166,.20), transparent 58%),
		radial-gradient(90% 80% at 100% 100%, rgba(79,179,166,.10), transparent 60%);
}
/* malha de nós: grid fino, evoca rede distribuída, zero imagem externa */
.bc .bc__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(245,245,241,.13) 1px, transparent 1px);
	background-size: 2.5rem 2.5rem;
	mask-image: linear-gradient(to bottom right, #000 10%, transparent 72%);
	-webkit-mask-image: linear-gradient(to bottom right, #000 10%, transparent 72%);
}

.bc__hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
@media (min-width: 62rem) {
	.bc__hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--s6); }
}
.bc__hero-art { justify-self: center; width: 100%; max-width: 32rem; }

.bc .bc__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent);
	padding-left: .875rem;
	border-left: 2px solid var(--accent);
	line-height: 1.2;
}

.bc .bc__hero h1 {
	color: var(--paper);
	font-size: clamp(2.375rem, 1.1rem + 5vw, 4.75rem);
	letter-spacing: -.03em;
	line-height: 1.01;
	max-width: 24ch;
	margin: clamp(1.25rem, 3vw, var(--s4)) 0 0;
}
.bc .bc__hero h1 em { font-style: normal; color: var(--accent); }

.bc .bc__lead {
	color: var(--muted-on-ink);
	font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
	line-height: 1.65;
	max-width: 46ch;
	margin: var(--s3) 0 0;
	padding-top: var(--s3);
	border-top: 1px solid var(--line-on-ink);
}

.bc__hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(1.75rem, 4vw, var(--s5)); }

/* ---------- Botões (cantos retos, transição explícita) ---------- */
.bc a.bc__btn {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 550;
	line-height: 1;
	text-decoration: none;
	padding: 1.0625rem 1.75rem;
	border: 1px solid transparent;
	border-radius: 0;
	cursor: pointer;
	transition-property: background-color, color, border-color, transform, box-shadow;
	transition-duration: .28s;
	transition-timing-function: var(--ease);
}
.bc a.bc__btn--solid  { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.bc a.bc__btn--solid:hover,
.bc a.bc__btn--solid:focus-visible { background: var(--accent); color: var(--ink); border-color: var(--accent); }

.bc a.bc__btn--ghost  { background: transparent; color: var(--paper); border-color: var(--line-on-ink); }
.bc a.bc__btn--ghost:hover,
.bc a.bc__btn--ghost:focus-visible { background: rgba(245,245,241,.08); color: var(--paper); border-color: var(--paper); }

.bc a.bc__btn--dark   { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bc a.bc__btn--dark:hover,
.bc a.bc__btn--dark:focus-visible { background: var(--accent-d); border-color: var(--accent-d); color: var(--white); }

.bc a.bc__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bc a.bc__btn svg { flex: none; transition: transform .28s var(--ease); }
.bc a.bc__btn:hover svg { transform: translateX(.25rem); }

/* ============================ SEÇÕES ============================ */
.bc .bc__sec { padding-block: clamp(4rem, 10vw, var(--s7)); background: var(--white); }
.bc .bc__sec--paper { background: var(--paper); }
.bc .bc__sec--ink   { background: var(--ink); }
.bc .bc__sec--tight { padding-block: clamp(3rem, 7vw, var(--s6)); }

/* Cabeçalho de seção: título à esquerda, descrição à direita — padrão IBM */
.bc__head {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s3);
	margin-bottom: clamp(2.5rem, 6vw, var(--s6));
	padding-top: var(--s3);
	border-top: 1px solid var(--line);
}
.bc .bc__sec--ink .bc__head { border-top-color: var(--line-on-ink); }
@media (min-width: 56rem) {
	.bc__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s5); align-items: start; }
}
.bc__head--stack { grid-template-columns: 1fr !important; }
.bc__head--sub { margin-top: clamp(2rem, 5vw, var(--s5)); }
.bc .bc__head h2 {
	color: var(--ink);
	font-size: clamp(2rem, 1.3rem + 2.7vw, 3.375rem);
	letter-spacing: -.026em;
	max-width: 26ch;
}
.bc .bc__head--sub h2 { font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.375rem); }
.bc .bc__sec--ink .bc__head h2 { color: var(--paper); }
.bc .bc__head p {
	margin: 0;
	color: var(--muted);
	font-size: 1.0625rem;
	line-height: 1.65;
	max-width: 46ch;
}
.bc .bc__sec--ink .bc__head p { color: var(--muted-on-ink); }
.bc .bc__kicker { margin-bottom: var(--s2); display: inline-flex; }

/* ---------- Grid de serviços: hairline + barra de acento ---------- */
.bc__grid {
	display: grid;
	gap: 0;
	grid-template-columns: 1fr;
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}
@media (min-width: 40rem) { .bc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .bc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bc .bc__card {
	position: relative;
	background: var(--white);
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.5rem, 3vw, 2rem);
	transition: background-color .28s var(--ease);
}
.bc .bc__card::before {
	content: "";
	position: absolute;
	inset: -1px auto auto -1px;
	width: 0;
	height: 2px;
	background: var(--accent);
	transition: width .34s var(--ease);
}
.bc .bc__card:hover { background: var(--paper); }
.bc .bc__card:hover::before { width: calc(100% + 1px); }
.bc .bc__card h3 { color: var(--ink); font-size: 1.3125rem; margin-bottom: .625rem; letter-spacing: -.018em; }
.bc .bc__card p  { color: var(--muted); font-size: .9375rem; line-height: 1.62; margin: 0; }
.bc .bc__card-ico {
	width: 2.25rem; height: 2.25rem;
	display: grid; place-items: center;
	color: var(--accent-d);
	margin-bottom: var(--s3);
}

/* ---------- Metodologia: linha única com marcador guiado por scroll ---------- */
.bc__flow { position: relative; }

.bc__flow-rail {
	position: relative;
	height: 2px;
	background: var(--line-on-ink);
	margin-bottom: var(--s4);
	display: none;
}
@media (min-width: 56rem) { .bc__flow-rail { display: block; } }

.bc__flow-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(var(--p, 0) * 100%);
	background: var(--accent);
	transition: width .12s linear;
}
.bc__flow-dot {
	position: absolute;
	top: 50%;
	left: calc(var(--p, 0) * 100%);
	width: .875rem;
	height: .875rem;
	margin: -.4375rem 0 0 -.4375rem;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 .3125rem rgba(79,179,166,.22);
	transition: left .12s linear;
}

.bc__phases {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--s4);
	grid-template-columns: 1fr;
	counter-reset: none;
}
@media (min-width: 56rem) { .bc__phases { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); } }

.bc .bc__phase { position: relative; padding-top: 0; }
/* marcador por fase: some no desktop (a trilha assume), aparece no mobile */
.bc .bc__phase-mark {
	position: absolute;
	left: 0; top: .35rem;
	width: .625rem; height: .625rem;
	border-radius: 50%;
	background: var(--line-on-ink);
	transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.bc .bc__phase.is-active .bc__phase-mark { background: var(--accent); box-shadow: 0 0 0 .25rem rgba(79,179,166,.2); }
@media (min-width: 56rem) { .bc .bc__phase-mark { display: none; } }
@media (max-width: 55.99rem) {
	.bc__phases { position: relative; padding-left: var(--s4); }
	.bc__phases::before { content: ""; position: absolute; left: .3125rem; top: .5rem; bottom: .5rem; width: 2px; background: var(--line-on-ink); }
	.bc .bc__phase { padding-left: 0; }
}

.bc .bc__phase .num {
	display: block;
	color: var(--line-on-ink);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .14em;
	font-variant-numeric: tabular-nums;
	margin-bottom: var(--s2);
	transition: color .3s var(--ease);
}
.bc .bc__phase.is-active .num { color: var(--accent); }
.bc .bc__phase h3 { color: var(--paper); font-size: 1.25rem; margin-bottom: .5rem; }
.bc .bc__phase p  { color: var(--muted-on-ink); font-size: .9375rem; line-height: 1.62; margin: 0; }

/* ---------- Certificações em destaque ---------- */
.bc__certs-hero {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
	margin-bottom: clamp(3rem, 7vw, var(--s6));
}
.bc .bc__cert-feat {
	position: relative;
	background: var(--white);
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	padding: clamp(2rem, 4vw, 2.75rem) var(--s3);
	text-align: left;
	transition: background-color .28s var(--ease);
}
.bc .bc__cert-feat:hover { background: var(--paper); }
.bc .bc__cert-feat img {
	width: clamp(5rem, 11vw, 6.5rem);
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	display: block;
	margin: 0 0 var(--s4);
}
.bc .bc__cert-feat .issuer {
	display: block;
	color: var(--accent-d);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.bc .bc__cert-feat .name {
	display: block;
	margin-top: .5rem;
	font-family: "Inter Tight", "Inter", sans-serif;
	font-weight: 600;
	font-size: 1.1875rem;
	color: var(--ink);
	letter-spacing: -.015em;
	line-height: 1.25;
}

/* ---------- Certificações secundárias ---------- */
.bc__certs {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(auto-fill, minmax(min(50%, 10.5rem), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}
.bc .bc__certs li {
	background: var(--white);
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	padding: var(--s3) var(--s2);
	text-align: center;
	transition: background-color .28s var(--ease);
}
.bc .bc__certs li:hover { background: var(--paper); }
.bc .bc__certs img {
	width: clamp(2.75rem, 7vw, 3.75rem);
	height: auto; aspect-ratio: 1; object-fit: contain;
	margin: 0 auto .75rem; display: block;
}
.bc .bc__certs .cert-label {
	display: block;
	color: var(--muted);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

/* ---------- Faixa institucional ---------- */
.bc__stats { display: grid; gap: var(--s4) var(--s5); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
@media (min-width: 60rem) { .bc__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bc .bc__stat { border-top: 1px solid var(--line-on-ink); padding-top: var(--s3); }
.bc .bc__stat dt {
	color: var(--paper);
	font-weight: 600;
	font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
	letter-spacing: -.032em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	text-align: left;
	white-space: nowrap;
}
.bc .bc__num { display: inline-block; }
.bc .bc__stat dd {
	margin: var(--s2) 0 0;
	color: var(--muted-on-ink);
	font-size: .9375rem;
	line-height: 1.5;
}

/* ---------- Plataformas ---------- */
.bc__chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.bc .bc__chips li {
	background: var(--white);
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 0;
	padding: .6875rem 1.125rem;
	font-size: .9375rem;
	font-weight: 500;
	transition: border-color .28s var(--ease), color .28s var(--ease);
}
.bc .bc__chips li:hover { border-color: var(--accent); color: var(--accent-d); }

/* ---------- CTA final ---------- */
.bc .bc__cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--ink);
	border-radius: 0;
	border-top: 2px solid var(--accent);
	padding: clamp(2.75rem, 7vw, var(--s7)) clamp(1.5rem, 5vw, var(--s6));
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s4);
	align-items: center;
}
@media (min-width: 56rem) {
	.bc .bc__cta { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); }
}
.bc .bc__cta::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(90% 100% at 100% 0%, rgba(79,179,166,.18), transparent 62%);
}
.bc .bc__cta h2 {
	color: var(--paper);
	font-size: clamp(1.875rem, 1.3rem + 2.3vw, 2.875rem);
	letter-spacing: -.026em;
	max-width: 24ch;
}
.bc .bc__cta p {
	color: var(--muted-on-ink);
	margin: var(--s3) 0 0;
	max-width: 48ch;
	font-size: 1.0625rem;
	line-height: 1.65;
}
.bc__cta-action { justify-self: start; }
@media (min-width: 56rem) { .bc__cta-action { justify-self: end; } }

/* ---------- Tecnologias: cards com glifo e categoria ---------- */
.bc__techs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}
.bc .bc__tech {
	position: relative;
	background: var(--white);
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 2.5vw, 1.75rem);
	display: flex;
	flex-direction: column;
	gap: .375rem;
	transition: background-color .28s var(--ease);
}
.bc .bc__tech::before {
	content: "";
	position: absolute;
	inset: -1px auto auto -1px;
	width: 0;
	height: 2px;
	background: var(--accent);
	transition: width .34s var(--ease);
}
.bc .bc__tech:hover { background: var(--paper); }
.bc .bc__tech:hover::before { width: calc(100% + 1px); }

.bc .bc__tech-ico {
	display: block;
	color: var(--accent-d);
	margin-bottom: var(--s3);
	transition: transform .34s var(--ease);
}
.bc .bc__tech:hover .bc__tech-ico { transform: translateY(-.1875rem); }
.bc .bc__tech-glyph { display: block; }

.bc .bc__tech-name {
	font-family: "Inter Tight", "Inter", sans-serif;
	font-weight: 600;
	font-size: 1.1875rem;
	letter-spacing: -.015em;
	color: var(--ink);
	line-height: 1.25;
}
.bc .bc__tech-cat {
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
	line-height: 1.4;
}