/* Hero hub - interactive network, chat FAB */

.bi-hero-eyebrow {
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em;
	text-transform: uppercase; color: #a78bfa;
	margin-bottom: 0.85rem;
}
.bi-hero-eyebrow i { font-size: 0.9rem; opacity: 0.9; }

.bi-hero-hint {
	display: flex; align-items: center; gap: 0.4rem;
	font-size: 0.82rem; font-weight: 600;
	color: rgba(255,255,255,0.55);
	margin-top: 0.75rem;
}
.bi-hero-hint i { color: #67e8f9; }

.bi-btn-primary {
	background: linear-gradient(135deg, #7c3aed, #0891b2) !important;
	color: #fff !important; border: none !important;
	box-shadow: 0 4px 20px rgba(124,58,237,0.4);
	font-weight: 600; border-radius: 12px;
}
.bi-btn-secondary {
	border: 1px solid rgba(124,58,237,0.4) !important;
	color: #fff !important;
	background: rgba(124,58,237,0.08) !important;
	font-weight: 600; border-radius: 12px;
}

.bi-stats-bar--inline {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.65rem;
	margin-top: 1.25rem;
	padding: 0;
	border: none;
}
@media (min-width: 576px) {
	.bi-stats-bar--inline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.bi-stats-bar--inline .bi-stat {
	padding: 0.65rem 0.5rem;
	background: rgba(124,58,237,0.08);
	border: 1px solid rgba(124,58,237,0.18);
	border-radius: 14px;
}
.bi-stats-bar--inline .bi-stat + .bi-stat::before { display: none; }
.bi-stats-bar--inline .bi-stat-num { font-size: 1.45rem; }
.bi-stats-bar--inline .bi-stat-label { font-size: 0.62rem; }

.bi-hero-network-wrap {
	max-width: 640px !important;
	padding-bottom: 2.75rem !important;
}
.bi-hero-network-svg {
	border: none !important;
	background: transparent !important;
	overflow: visible;
	position: relative;
	z-index: 0;
}
.bi-hero-line {
	opacity: 0.55 !important;
	stroke-width: 1.4;
}
.bi-hero-line.is-active { opacity: 1 !important; stroke-width: 2.2; }

.bi-hero-chain-orbit {
	animation: bi-chain-spin 36s linear infinite;
	transform-origin: 0 0;
	pointer-events: none;
}
@keyframes bi-chain-spin { to { transform: rotate(360deg); } }
.bi-hero-chain-icon {
	border-radius: 50%;
	filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
	opacity: 0.88;
}

.bi-hero-nodes { z-index: 5 !important; }
.bi-hero-node-kpi {
	z-index: 3;
	background: rgba(8, 10, 26, 0.96) !important;
	box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.bi-hero-node-body {
	background: rgba(5, 8, 22, 0.94) !important;
}

.bi-hero-hub-badge { font-size: 0.74rem !important; }
.bi-hero-hub-trending-label { font-size: 0.68rem !important; }
.bi-hero-hub-trending { font-size: 0.72rem !important; }
.bi-hero-hub-meta {
	position: absolute !important;
	left: 50% !important;
	top: calc(45.833% + 4.5rem) !important;
	transform: translateX(-50%) !important;
	margin-top: 0 !important;
	padding: 0.4rem 0.75rem !important;
	z-index: 4 !important;
	background: rgba(5, 8, 22, 0.92) !important;
	border: 1px solid rgba(124, 58, 237, 0.2) !important;
	border-radius: 10px !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
.bi-hero-hub {
	width: 72px !important;
	height: 72px !important;
	top: 45.833% !important;
}
.bi-hero-hub-core {
	width: 100% !important;
	height: 100% !important;
}
.bi-hero-hub-logo {
	width: 40px !important;
	height: 40px !important;
	padding: 8px !important;
}
.bi-hero-hub-logo img {
	max-width: 22px !important;
	max-height: 22px !important;
}

.bi-hero-node-body {
	font-size: 0.78rem !important;
	padding: 0.4rem 0.72rem !important;
}
.bi-hero-node-kpi {
	font-size: 0.68rem !important;
	opacity: 0;
	transition: opacity 0.35s ease, transform 0.35s ease;
}
.bi-hero-node.is-active .bi-hero-node-kpi {
	opacity: 1;
}
@keyframes bi-kpi-in {
	from { opacity: 0; transform: translateX(-50%) translateY(6px); }
	to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.bi-hero-node--flip-kpi.is-active .bi-hero-node-kpi {
	animation-name: bi-kpi-in-flip !important;
}
@keyframes bi-kpi-in-flip {
	from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
	to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.bi-hero-hub-logo img {
	max-width: 22px !important;
	max-height: 22px !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
}

.bi-hero-node-case,
.bi-hero-mobile-case,
.bi-hero-node-add,
.bi-hero-mobile-add,
.bi-hero-mock,
.bi-hero-stack { display: none !important; }

.bi-clients-marquee-label {
	text-align: center;
	font-size: 0.72rem; font-weight: 800;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: rgba(255,255,255,0.45);
	margin-bottom: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
	.bi-hero-chain-orbit { animation: none !important; }
	.bi-hero-packet { display: none; }
}