/* ── CTA — BG + Buttons ──────────────────────────────────────── */

.nml-cbb {
	padding: 80px 0;
}

.nml-cbb__inner {
	background: linear-gradient(135deg, #1b2fa8 0%, #2a3fc0 50%, #1535b8 100%);
    background-size: cover;
	background-position: center left;
    background-repeat: no-repeat;
    border-radius: 16px;
    overflow: hidden;
    padding: 0 0 0 48px;
    box-shadow: 0px 2px 4px 0px #4C83F33D;
    border: 2px solid var(--color-primary);
}

/* ── Layout: desktop two-column ─────────────────────────────── */
.nml-cbb__layout {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 220px;
	gap: 24px;
}

/* ── Content column ─────────────────────────────────────────── */
.nml-cbb__content {
    flex: 0 0 auto;
    max-width: 714px;
    padding: 40px 0;
    z-index: 1;
    margin-top: auto;
}

/* ── Heading ─────────────────────────────────────────────────── */
.nml-cbb__heading {
    margin: 0 0 40px;
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
    color: var(--color-text-white);
}

/* Wrap a word in <span> to give it the accent colour. */
.nml-cbb__heading span { color: var(--color-text-accent); }

/* ── Buttons ─────────────────────────────────────────────────── */
.nml-cbb__btns {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.nml-cbb__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 24px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
	white-space: nowrap;
	border: 1px solid var(--color-line);
}

.nml-cbb__btn--primary {
	background: var(--color-bg);
	color: var(--color-primary);
}

.nml-cbb__btn--primary:hover {
	background: #FFFFFFCC;
	color: var(--color-primary-dark);
}

.nml-cbb__btn--primary.disabled {
	opacity: 0.4;
}

.nml-cbb__btn--secondary {
	background: transparent;
	color: var(--color-text-white);
	border: 1px solid var(--color-bg);
}

.nml-cbb__btn--secondary:hover {
	color: var(--color-line);
	border-color: var(--color-line);
}

.nml-cbb__btn--secondary:disabled {
	opacity: 0.4;
}


/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.nml-cbb {
		padding: 40px 0;
	}

	.nml-cbb__inner {
        border-radius: 12px;
        padding: 0;
	}

	.nml-cbb__layout {
		flex-direction: column;
		align-items: stretch;
		min-height: unset;
		gap: 0;
	}

	.nml-cbb__content {
        max-width: 100%;
        padding: 32px 20px 24px;
        text-align: center;
		top: 0px;
        position: relative;
	}

	.nml-cbb__heading {
		font-size: 24px;
        line-height: 32px;
        font-weight: 700;
        margin-bottom: 24px;
	}

	.nml-cbb__btns {
		flex-direction: column;
		gap: 8px;
	}

	.nml-cbb__btn {
		width: 100%;
		padding: 15px 20px;
		border-radius: 12px;
	}

	.nml-cbb__inner {
		background-size: cover;
		background-position: bottom center;
		min-height: 495px;
	}
}