.bf {
	--bf-bg: #90949f;
	--bf-card: #ffffff;
	--bf-border: #e5e7eb;
	--bf-text: #111827;
	--bf-muted: #6b7280;

	--bf-btn-bg: #e5e7eb;
	--bf-btn-text: #111827;

	--bf-accent: #f97316;
	--bf-accent-2: #bb530a;
	--bf-accent-soft: #ede9fe;
	--bf-focus: rgba(229, 91, 14, 0.87);

	max-width: 980px;
	margin: 0 auto;
	padding: 22px;
	border-radius: 18px;
	background: var(--bf-bg);
	border: 1px solid var(--bf-border);
}

.bf__head {
	padding: 18px 18px 14px;
	border-radius: 14px;
	background: var(--bf-card);
	border: 1px solid var(--bf-border);
	box-shadow: 0 10px 30px rgba(17, 24, 39, .06);
}

.bf__title {
	margin: 0 0 8px;
	color: var(--bf-text);
	font-size: 34px;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.broker-section {
	padding: 0 0 90px;
}
@media (max-width: 768px) {
	.broker-section {
		padding: 0 10px;
		margin-bottom: 50px;
		margin-top: 20px;
	}
}

.bf__subtitle {
	margin: 0;
	color: var(--bf-muted);
	font-size: 15px;
	line-height: 1.45;
}

.bf__step {
	margin: 16px 0 0;
	padding: 16px 18px;
	border-radius: 14px;
	background: var(--bf-card);
	border: 1px solid var(--bf-border);
	box-shadow: 0 10px 30px rgba(17, 24, 39, .05);
}

.bf__step-title {
	margin: 0 0 12px;
	color: var(--bf-text);
	font-weight: 700;
	font-size: 16px;
}

.bf__tags,
.bf__amounts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.bf__tag {
	appearance: none;
	border: 1px solid var(--bf-border);
	background: var(--bf-btn-bg);
	color: var(--bf-btn-text);
	padding: 10px 14px;
	border-radius: 999px;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease, color .15s ease;
	user-select: none;
}

.bf__tag:hover {
	background: #dfe3ea;
	transform: translateY(-1px);
}

.bf__tag:active {
	transform: translateY(0);
}

.bf__tag:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--bf-focus);
}

.bf__tag.is-active {
	background: linear-gradient(135deg, var(--bf-accent), var(--bf-accent-2));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 10px 20px rgba(124, 58, 237, .22);
}

.bf__amount {
	appearance: none;
	width: 60px;
	height: 60px;
	border-radius: 999px;
	border: 1px solid var(--bf-border);
	background: var(--bf-btn-bg);
	color: var(--bf-btn-text);
	cursor: pointer;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: .01em;
	transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease, color .15s ease;
	user-select: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bf__amount:hover {
	background: #dfe3ea;
	transform: translateY(-1px);
}

.bf__amount:active {
	transform: translateY(0);
}

.bf__amount:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--bf-focus);
}

.bf__amount.is-active {
	background: linear-gradient(135deg, var(--bf-accent), var(--bf-accent-2));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 14px 28px rgba(229, 91, 14, 0.87);
}

.bf__actions {
	margin: 16px 0 0;
	padding: 16px 18px;
	border-radius: 14px;
	background: var(--bf-card);
	border: 1px solid var(--bf-border);
	box-shadow: 0 10px 30px rgba(17, 24, 39, .05);
	display: flex;
	justify-content: flex-start;
}

.bf__cta {
	appearance: none;
	border: 0;
	border-radius: 12px;
	padding: 14px 20px;
	cursor: pointer;
	font-weight: 800;
	font-size: 15px;
	color: #fff;
	background: linear-gradient(135deg, var(--bf-accent), var(--bf-accent-2));
	box-shadow: 0 18px 32px rgba(124, 58, 237, .28);
	transition: transform .12s ease, box-shadow .15s ease, filter .15s ease, opacity .15s ease;
}

.bf__cta:hover {
	transform: translateY(-1px);
	filter: brightness(1.03);
	box-shadow: 0 22px 40px rgba(124, 58, 237, .34);
}

.bf__cta:active {
	transform: translateY(0);
}

.bf__cta:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--bf-focus), 0 18px 32px rgba(124, 58, 237, .28);
}

.bf__cta[disabled] {
	opacity: .45;
	cursor: not-allowed;
	box-shadow: none;
	filter: none;
}

@media (max-width: 768px) {
	.bf {
		padding: 16px;
		border-radius: 16px;
	}

	.bf__head, .bf__step, .bf__actions {
		padding: 14px;
		border-radius: 12px;
	}

	.bf__title {
		font-size: 26px;
	}

	.bf__subtitle {
		font-size: 14px;
	}

	.bf__tag {
		padding: 10px 12px;
		font-size: 13px;
	}

	.bf__amount {
		width: 78px;
		height: 78px;
		font-size: 13px;
	}
}

@media (max-width: 480px) {
	.bf__title {
		font-size: 22px;
	}

	.bf__tags {
		gap: 8px;
	}

	.bf__amounts {
		gap: 8px;
	}

	.bf__amount {
		width: 55px;
		height: 51px;
	}

	.bf__cta {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}