:root {
	--bb-primary: #0057c8;
	--bb-primary-2: #0b63d8;
	--bb-secondary: #0a2f68;
	--bb-dark: #07192f;
	--bb-dark-2: #0b223f;
	--bb-accent: #f6c500;
	--bb-success: #16a36b;
	--bb-warning: #f59e0b;
	--bb-danger: #dc3545;
	--bb-light: #f5f8ff;
	--bb-card: #ffffff;
	--bb-border: rgba(7, 25, 47, 0.12);
	--bb-muted: #667085;
}

.page-layout-home-brand-portal .hero-card,
.inner-page[class*="page-layout-"] .inner-hero__grid {
	border-radius: 22px;
}

.home-visual-stack {
	position: relative;
	display: grid;
	min-height: 360px;
	align-items: center;
	justify-items: center;
}

.home-phone-mockup,
.home-game-card,
.home-payment-shield,
.variant-visual-card,
.variant-visual-shield {
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.home-phone-mockup {
	width: min(260px, 78vw);
	aspect-ratio: 9 / 16;
	border-radius: 30px;
	padding: 28px;
	background: linear-gradient(160deg, #0b223f, #0b63d8);
	border: 1px solid rgba(245, 248, 255, 0.22);
	color: #fff;
}

.home-phone-mockup strong,
.home-game-card strong,
.home-payment-shield strong {
	display: block;
	font-size: 28px;
	letter-spacing: 0;
}

.home-phone-mockup i {
	display: block;
	height: 14px;
	margin-top: 18px;
	border-radius: 999px;
	background: rgba(245, 248, 255, 0.22);
}

.home-game-card,
.home-payment-shield {
	position: absolute;
	border-radius: 18px;
	padding: 18px 22px;
	background: #fff;
	color: var(--bb-dark);
}

.home-game-card {
	left: 0;
	bottom: 62px;
	border-left: 6px solid var(--bb-accent);
}

.home-payment-shield {
	right: 8px;
	top: 58px;
	border-left: 6px solid var(--bb-success);
}

.trust-bar-section {
	padding: 0;
	background: var(--bb-dark);
}

.page-layout-home-brand-portal .trust-strip {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	padding: 18px 0;
	margin: 0;
}

.page-layout-home-brand-portal .trust-strip span {
	border-radius: 14px;
	background: rgba(245, 248, 255, 0.1);
	text-align: center;
}

.home-overview-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.home-overview-facts article {
	padding: 22px;
	border-radius: 18px;
	background: var(--bb-card);
	border: 1px solid var(--bb-border);
}

.home-overview-facts span,
.home-accent-panel > div > span,
.variant-tag {
	display: inline-flex;
	width: fit-content;
	border-radius: 999px;
	padding: 6px 10px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0;
}

.home-overview-facts span {
	color: var(--bb-primary);
	background: rgba(0, 87, 200, 0.08);
}

.home-overview-facts strong {
	display: block;
	margin-top: 12px;
	color: var(--bb-dark);
	line-height: 1.35;
}

.home-accent-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr) auto;
	gap: 28px;
	align-items: center;
	border-radius: 24px;
	padding: 34px;
}

.home-accent-panel--bonus {
	background: linear-gradient(135deg, #fff8d6, #fff, #f5f8ff);
	border: 1px solid rgba(246, 197, 0, 0.36);
}

.home-accent-panel--payment {
	background: linear-gradient(135deg, #eafaf4, #fff, #f5f8ff);
	border: 1px solid rgba(22, 163, 107, 0.28);
}

.home-accent-panel--bonus > div > span {
	color: #7a5a00;
	background: rgba(246, 197, 0, 0.18);
}

.home-accent-panel--payment > div > span {
	color: #0b6f49;
	background: rgba(22, 163, 107, 0.14);
}

.home-accent-panel ul {
	margin: 0;
	padding-left: 20px;
	color: #34425a;
}

.home-method-strip {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.home-method-strip span {
	border-radius: 999px;
	padding: 10px 12px;
	background: #fff;
	color: var(--bb-secondary);
	text-align: center;
	font-weight: 800;
}

.home-safety-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.home-safety-grid article {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding: 20px;
	border-radius: 18px;
	background: #fff7ed;
	border: 1px solid rgba(245, 158, 11, 0.24);
}

.home-safety-grid span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--bb-warning);
	color: #fff;
	font-weight: 900;
}

.inner-page[class*="page-layout-"] .inner-hero {
	background: linear-gradient(135deg, var(--bb-dark), var(--bb-secondary));
}

.page-layout-app-device-split .inner-hero {
	background: linear-gradient(135deg, #06345d, #0057c8 54%, #0fb7d4);
}

.page-layout-login-security-flow .inner-hero {
	background: linear-gradient(135deg, #07192f, #0b223f 54%, #16a36b);
}

.page-layout-register-timeline .inner-hero {
	background: linear-gradient(135deg, #07192f, #0057c8 58%, #f6c500);
}

.page-layout-games-category-hub .inner-hero,
.page-layout-responsible-dark-play .inner-hero {
	background: linear-gradient(135deg, #030914, #07192f 56%, #0b223f);
}

.page-layout-bonus-terms-cards .inner-hero {
	background: linear-gradient(135deg, #07192f, #704c00 54%, #f6c500);
}

.page-layout-payment-safety-matrix .inner-hero {
	background: linear-gradient(135deg, #06351f, #0a2f68 55%, #16a36b);
}

.page-layout-faq-grouped-accordion,
.page-layout-about-editorial-trust,
.page-layout-contact-safety-center {
	background: #f5f8ff;
}

.variant-hero-visual {
	position: relative;
	min-height: 280px;
	display: grid;
	place-items: center;
}

.variant-visual-card {
	position: absolute;
	border-radius: 20px;
	padding: 22px;
	background: rgba(245, 248, 255, 0.12);
	border: 1px solid rgba(245, 248, 255, 0.2);
	color: #fff;
}

.variant-visual-card--main {
	width: min(300px, 80%);
	min-height: 170px;
	display: grid;
	align-content: center;
	gap: 12px;
}

.variant-visual-card--main strong {
	font-size: 34px;
}

.variant-visual-card--sub {
	right: 10px;
	bottom: 18px;
	display: flex;
	gap: 8px;
}

.variant-visual-card--sub span {
	border-radius: 999px;
	padding: 8px 10px;
	background: rgba(245, 248, 255, 0.18);
	font-weight: 800;
}

.variant-visual-shield {
	position: absolute;
	left: 26px;
	top: 30px;
	width: 86px;
	aspect-ratio: 1;
	border-radius: 26px;
	background: linear-gradient(135deg, var(--bb-accent), #ff6b5f);
	transform: rotate(8deg);
}

.variant-module {
	padding: 74px 0;
}

.variant-module:nth-of-type(even) {
	background: rgba(245, 248, 255, 0.66);
}

.variant-heading {
	max-width: 860px;
	margin-bottom: 28px;
}

.variant-heading h2 {
	margin: 0 0 10px;
	color: var(--bb-dark);
	font-size: clamp(28px, 4vw, 42px);
}

.variant-heading p {
	margin: 0;
	color: var(--bb-muted);
	font-size: 18px;
	line-height: 1.7;
}

.variant-card-grid,
.variant-tabs,
.variant-matrix,
.variant-faq-groups {
	display: grid;
	gap: 22px;
}

.variant-card-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.variant-tabs {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.variant-card,
.variant-tab,
.variant-method,
.variant-faq-group,
.variant-step {
	border-radius: 20px;
	background: var(--bb-card);
	border: 1px solid var(--bb-border);
	box-shadow: 0 18px 44px rgba(7, 25, 47, 0.07);
}

.variant-card,
.variant-tab,
.variant-method,
.variant-faq-group {
	padding: 24px;
}

.variant-card h3,
.variant-tab h3,
.variant-method h3,
.variant-step h3 {
	color: var(--bb-dark);
	margin-top: 10px;
}

.variant-card p,
.variant-tab p,
.variant-method p,
.variant-step p,
.variant-warning-panel p,
.variant-split-panel p {
	color: #34425a;
	line-height: 1.7;
}

.variant-tag,
.variant-icon,
.variant-index {
	color: var(--bb-primary);
	background: rgba(0, 87, 200, 0.09);
}

.variant-icon,
.variant-index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	font-weight: 900;
}

.variant-mini-list,
.variant-warning-list {
	margin: 16px 0 0;
	padding-left: 20px;
	color: #34425a;
}

.variant-timeline {
	display: grid;
	gap: 18px;
	max-width: 980px;
}

.variant-step {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	gap: 18px;
	padding: 24px;
}

.variant-step > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--bb-primary);
	color: #fff;
	font-weight: 900;
}

.variant-matrix {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.variant-warning-panel {
	border-radius: 24px;
	padding: 30px;
	background: #fff5f5;
	border: 1px solid rgba(220, 53, 69, 0.24);
}

.variant-warning-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	padding-left: 0;
	list-style: none;
}

.variant-warning-list li {
	border-radius: 12px;
	padding: 14px;
	background: #fff;
	border-left: 4px solid var(--bb-danger);
}

.variant-split-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 0.7fr);
	gap: 28px;
	align-items: center;
	border-radius: 24px;
	padding: 30px;
	background: var(--bb-card);
	border: 1px solid var(--bb-border);
}

.variant-side-visual {
	min-height: 220px;
	border-radius: 22px;
	background: linear-gradient(145deg, rgba(0, 87, 200, 0.16), rgba(22, 163, 107, 0.16));
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	padding: 22px;
}

.variant-side-visual span {
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.72);
}

.variant-faq-groups {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.variant-faq-group h2 {
	margin: 0 0 16px;
	color: var(--bb-primary);
	font-size: 24px;
}

.variant-game-hub .game-category-card__body p {
	font-size: 15px;
}

.page-layout-app-device-split .variant-tabs .variant-tab:first-child {
	border-top: 6px solid #0fb7d4;
}

.page-layout-login-security-flow .variant-step > span,
.page-layout-login-security-flow .variant-tag,
.page-layout-login-security-flow .variant-icon,
.page-layout-login-security-flow .variant-index {
	background: rgba(22, 163, 107, 0.12);
	color: var(--bb-success);
}

.page-layout-login-security-flow .variant-step > span {
	background: var(--bb-success);
	color: #fff;
}

.page-layout-register-timeline .variant-step > span,
.page-layout-bonus-terms-cards .variant-tag {
	background: var(--bb-accent);
	color: var(--bb-dark);
}

.page-layout-bonus-terms-cards .variant-card {
	border-color: rgba(246, 197, 0, 0.36);
}

.page-layout-payment-safety-matrix .variant-method {
	border-top: 6px solid var(--bb-success);
}

.page-layout-contact-safety-center .variant-warning-panel {
	background: #fff1f2;
}

.page-layout-responsible-dark-play .variant-module {
	background: #07192f;
	color: #fff;
}

.page-layout-responsible-dark-play .variant-module:nth-of-type(even) {
	background: #0b223f;
}

.page-layout-responsible-dark-play .variant-heading h2,
.page-layout-responsible-dark-play .variant-heading p,
.page-layout-responsible-dark-play .variant-card h3,
.page-layout-responsible-dark-play .variant-card p,
.page-layout-responsible-dark-play .variant-step h3,
.page-layout-responsible-dark-play .variant-step p {
	color: #f5f8ff;
}

.page-layout-responsible-dark-play .variant-card,
.page-layout-responsible-dark-play .variant-step,
.page-layout-responsible-dark-play .variant-faq-group {
	background: rgba(245, 248, 255, 0.08);
	border-color: rgba(245, 248, 255, 0.14);
}

.page-layout-responsible-dark-play .variant-final-reminder {
	background: #030914;
}

@media (max-width: 1024px) {
	.page-layout-home-brand-portal .trust-strip,
	.variant-card-grid,
	.variant-tabs,
	.variant-matrix,
	.variant-faq-groups,
	.home-safety-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.home-accent-panel {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 700px) {
	.home-visual-stack {
		min-height: 260px;
	}

	.home-game-card,
	.home-payment-shield {
		position: relative;
		inset: auto;
		width: 100%;
		margin-top: 12px;
	}

	.page-layout-home-brand-portal .trust-strip,
	.home-overview-facts,
	.variant-card-grid,
	.variant-tabs,
	.variant-matrix,
	.variant-faq-groups,
	.home-safety-grid,
	.home-method-strip,
	.variant-warning-list,
	.variant-split-panel {
		grid-template-columns: 1fr;
	}

	.variant-module {
		padding: 48px 0;
	}

	.variant-step {
		grid-template-columns: 42px minmax(0, 1fr);
		padding: 20px;
	}

	.variant-step > span {
		width: 42px;
		height: 42px;
	}
}