.home-page {
	min-height: 0;
	padding: 0;
	background: var(--surface-soft);
}

.home-section {
	padding-block: clamp(3rem, 5vw, 4rem);
	scroll-margin-block-start: 6rem;
}

.home-section--soft {
	background: var(--surface-soft);
}

.home-section--blue {
	background: var(--surface-blue);
}

.home-section--navy {
	background: var(--brand-navy);
	color: #dfe8f3;
}

.section-heading {
	max-width: 46rem;
	margin-block-end: clamp(1.5rem, 3vw, 2rem);
}

.section-heading__eyebrow,
.home-hero__eyebrow {
	margin-block: 0 var(--space-2);
	color: var(--brand-primary);
	font-size: 0.8125rem;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.section-heading h2 {
	margin: 0;
	color: var(--brand-navy);
	font-size: clamp(1.625rem, 3vw, 2.125rem);
	line-height: 1.3;
}

.section-heading > p:last-child {
	max-width: 42rem;
	margin-block: var(--space-3) 0;
	color: var(--text-secondary);
	font-size: 1rem;
}

.home-section--navy .section-heading h2,
.home-section--navy .section-heading__eyebrow {
	color: var(--surface);
}

.home-section--navy .section-heading > p:last-child {
	color: #b8c7d9;
}

.home-hero {
	position: relative;
	padding-block: clamp(3rem, 5vw, 4rem) 4.5rem;
	background:
		radial-gradient(circle at 12% 8%, rgb(77 174 255 / 32%), transparent 22rem),
		radial-gradient(circle at 88% 85%, rgb(255 184 0 / 13%), transparent 19rem),
		linear-gradient(128deg, #062f68 0%, var(--brand-primary-dark) 45%, #1478e6 100%);
	color: var(--surface);
	overflow: hidden;
}

.home-hero__texture {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
	background-size: 2.5rem 2.5rem;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000);
	mask-image: linear-gradient(90deg, transparent, #000 35%, #000);
	pointer-events: none;
}

.home-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
}

.home-hero__content {
	min-width: 0;
}

.home-hero__eyebrow {
	display: inline-flex;
	padding: 0.35rem 0.7rem;
	border: 1px solid rgb(255 255 255 / 24%);
	border-radius: 999px;
	background: rgb(255 255 255 / 10%);
	color: #dcecff;
}

.home-hero h1 {
	max-width: 42rem;
	margin-block: var(--space-4) var(--space-3);
	font-size: clamp(2rem, 5vw, 3rem);
	letter-spacing: -0.035em;
	line-height: 1.05;
}

.home-hero__lead {
	max-width: 39rem;
	margin-block: 0 var(--space-5);
	color: #e7f1ff;
	font-size: clamp(1rem, 2vw, 1.125rem);
}

.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-block-start: var(--space-4);
}

.home-hero .promo-card {
	max-width: 34rem;
	margin-block-start: var(--space-4);
}

.home-hero__visual {
	position: relative;
	display: grid;
	min-height: 18rem;
	place-items: center;
	isolation: isolate;
}

.hero-stadium {
	position: absolute;
	z-index: -1;
	inset: 10% 2% 0;
	border: 1px solid rgb(255 255 255 / 14%);
	border-radius: 50% 50% 18% 18%;
	background:
		linear-gradient(90deg, transparent 49.7%, rgb(255 255 255 / 11%) 50%, transparent 50.3%),
		linear-gradient(0deg, rgb(4 34 71 / 52%), rgb(18 104 214 / 10%));
	overflow: hidden;
}

.hero-stadium span {
	position: absolute;
	inset-inline: 8%;
	height: 32%;
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: 50%;
}

.hero-stadium span:nth-child(1) {
	inset-block-end: -5%;
}

.hero-stadium span:nth-child(2) {
	inset-block-end: 12%;
}

.hero-stadium span:nth-child(3) {
	inset-block-end: 29%;
}

.hero-person {
	position: absolute;
	z-index: 1;
	inset-inline-end: 0;
	inset-block-end: 0;
	display: flex;
	width: min(54%, 19rem);
	height: 88%;
	align-items: end;
	justify-content: center;
	pointer-events: none;
}

.hero-person__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--hero-person-fit, contain);
	object-position: var(--hero-person-position, center bottom);
}

.hero-device {
	position: relative;
	z-index: 2;
	width: min(52vw, 13rem);
	aspect-ratio: 0.56;
	padding: 0.6rem;
	border: 1px solid rgb(255 255 255 / 38%);
	border-radius: 2rem;
	background: linear-gradient(150deg, #172f4d, #07182b);
	box-shadow: 0 1.75rem 3.5rem rgb(2 23 51 / 42%), inset 0 0 0 1px rgb(255 255 255 / 7%);
	transform: rotate(-4deg);
}

[dir="rtl"] .hero-device {
	transform: rotate(4deg);
}

.hero-device__speaker {
	position: absolute;
	z-index: 2;
	inset-block-start: 1rem;
	inset-inline-start: 50%;
	width: 3rem;
	height: 0.3rem;
	border-radius: 999px;
	background: #334b65;
	transform: translateX(-50%);
}

.hero-device__screen {
	position: relative;
	height: 100%;
	border: 0.15rem solid rgb(255 255 255 / 10%);
	border-radius: 1.55rem;
	background: linear-gradient(180deg, #edf5fd, #dce9f6);
	overflow: hidden;
}

.hero-device__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--hero-phone-fit, cover);
	object-position: var(--hero-phone-position, center top);
}

.hero-device__placeholder {
	display: grid;
	height: 100%;
	place-content: center;
	gap: var(--space-2);
	color: #607a98;
	font-size: 0.8rem;
	font-weight: 800;
	text-align: center;
}

.hero-device__placeholder .icon {
	width: 2.5rem;
	height: 2.5rem;
	margin-inline: auto;
}

.hero-currency-badge {
	position: absolute;
	z-index: 3;
	inset-block-start: 9%;
	inset-inline-start: 0;
	padding: 0.55rem 0.85rem;
	border: 1px solid rgb(255 255 255 / 40%);
	border-radius: 999px;
	background: rgb(16 36 62 / 78%);
	box-shadow: var(--shadow-md);
	font-weight: 900;
}

.hero-ball-shape {
	position: absolute;
	z-index: 1;
	inset-block-end: 8%;
	inset-inline-end: 0;
	width: 5rem;
	height: 5rem;
	border: 0.8rem double rgb(255 255 255 / 24%);
	border-radius: 50%;
}

.hero-orbit {
	position: absolute;
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: 50%;
}

.hero-orbit--one {
	width: 19rem;
	height: 19rem;
}

.hero-orbit--two {
	width: 25rem;
	height: 25rem;
}

.hero-geometry {
	position: absolute;
	border: 1px solid rgb(255 255 255 / 20%);
	background: rgb(255 255 255 / 5%);
	transform: rotate(28deg);
}

.hero-geometry--one {
	inset-block-start: 12%;
	inset-inline-end: 6%;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 0.75rem;
}

.hero-geometry--two {
	inset-block-end: 8%;
	inset-inline-start: 8%;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
}

.promo-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4);
	border: 1px solid rgb(255 255 255 / 25%);
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, rgb(255 255 255 / 16%), rgb(255 255 255 / 8%));
	box-shadow: 0 0.75rem 1.75rem rgb(0 29 70 / 14%);
	color: var(--surface);
	backdrop-filter: blur(8px);
}

.promo-card__actions {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.promo-card__content {
	min-width: 0;
}

.promo-card__label,
.promo-card__audience,
.promo-card__content > p {
	margin: 0;
}

.promo-card__label {
	color: #dcecff;
	font-size: 0.8rem;
	font-weight: 800;
}

.promo-card__code {
	display: block;
	margin-block: 0.15rem;
	font-size: clamp(1.35rem, 5vw, 2rem);
	letter-spacing: 0.06em;
	overflow-wrap: anywhere;
}

.promo-card__audience,
.promo-card__content > p {
	color: #e0edfc;
	font-size: 0.875rem;
}

.promo-card__verified {
	margin-block-start: var(--space-2) !important;
	color: var(--brand-accent) !important;
	font-weight: 800;
}

.promo-grid {
	display: grid;
	gap: var(--space-4);
	max-width: 60rem;
	margin-inline: auto;
}

.promo-grid--single {
	max-width: 42rem;
}

.promo-grid .promo-card {
	border-color: #d4e4f7;
	background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary));
}

.quick-navigation {
	position: relative;
	z-index: 2;
	padding-block: 0 2.25rem;
	margin-block-start: -1.75rem;
	background: transparent;
	box-shadow: none;
}

.quick-navigation__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
}

.quick-link {
	display: flex;
	min-width: 0;
	min-height: 5.25rem;
	align-items: center;
	justify-content: flex-start;
	flex-direction: row;
	gap: var(--space-3);
	padding: var(--space-3);
	border: 1px solid #dbe5f0;
	border-radius: var(--radius-md);
	background: var(--surface);
	box-shadow: 0 8px 22px rgb(16 36 62 / 8%);
	color: var(--text-primary);
	font-size: 1rem;
	text-align: start;
	text-decoration: none;
}

.quick-link:hover {
	border-color: #b8d5f5;
	background: var(--surface-blue);
	color: var(--brand-primary-dark);
}

.quick-link__content {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.quick-link__content strong {
	color: var(--brand-navy);
	font-size: 1rem;
}

.quick-link__content small {
	color: var(--text-secondary);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.35;
}

.quick-link__icon,
.information-card__icon,
.feature-card__icon,
.empty-state__icon,
.app-card__icon {
	display: inline-flex;
	width: 2.75rem;
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	background: var(--surface-blue);
	color: var(--brand-primary);
}

.calculator-shell {
	display: grid;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	border: 1px solid #cfe0f3;
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, var(--surface), var(--surface-blue));
	box-shadow: 0 12px 30px rgb(16 36 62 / 8%);
}

.calculator-shell h2 {
	margin-block: 0 var(--space-3);
	color: var(--brand-navy);
	font-size: clamp(1.625rem, 3vw, 2.125rem);
}

.calculator-shell p:last-child {
	margin: 0;
	color: var(--text-secondary);
}

.calculator-shell__controls {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: minmax(0, 1fr);
	padding: var(--space-4);
	border-radius: var(--radius-md);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}

.calculator-shell__controls label {
	display: grid;
	gap: 0.35rem;
}

.calculator-shell__controls label span {
	color: var(--text-secondary);
	font-size: 0.8125rem;
	font-weight: 700;
}

.calculator-shell__controls label small,
.topup-calculator__form label small {
	font-size: inherit;
}

.calculator-shell__controls input,
.calculator-shell__controls select {
	width: 100%;
	min-width: 0;
	min-height: 2.75rem;
	padding-inline: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface-soft);
	color: var(--text-secondary);
}

.calculator-shell__controls input:not(:disabled),
.calculator-shell__controls select:not(:disabled),
.topup-calculator__form input:not(:disabled) {
	background: var(--surface);
	color: var(--text-primary);
}

.calculator-shell__controls input[aria-invalid="true"],
.topup-calculator__form input[aria-invalid="true"] {
	border-color: var(--danger);
}

.calculator-shell__controls .button {
	grid-column: 1 / -1;
	justify-self: start;
}

.calculator-shell__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.calculator-shell__reset {
	border-color: var(--border);
	background: var(--surface);
	color: var(--brand-navy);
}

.calculator-shell__message {
	grid-column: 1 / -1;
	margin: 0;
	padding: var(--space-3);
	border-inline-start: 3px solid var(--danger);
	border-radius: var(--radius-sm);
	background: #fff1f0;
	color: #8b201a;
}

.calculator-result {
	grid-column: 1 / -1;
	padding: var(--space-4);
	border: 1px solid #bfd7f2;
	border-radius: var(--radius-md);
	background: var(--surface-blue);
}

.calculator-result dl {
	display: grid;
	gap: var(--space-3);
	margin: 0;
}

.calculator-result dl div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-block-end: var(--space-2);
	border-block-end: 1px solid #cfe0f3;
}

.calculator-result dt {
	color: var(--text-secondary);
}

.calculator-result dd {
	margin: 0;
	color: var(--brand-primary-dark);
	font-weight: 900;
}

.calculator-result > p {
	margin-block: var(--space-3) 0;
	color: var(--text-secondary);
	font-size: 0.875rem;
}

.information-grid,
.article-grid {
	display: grid;
	gap: var(--space-3);
}

.article-grid {
	align-items: stretch;
}

.information-card,
.feature-card,
.app-card,
.article-card,
.comparison-card,
.list-card {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}

.information-card {
	padding: 1.25rem;
}

.information-card h3,
.feature-card h3,
.app-card h3,
.comparison-card h3,
.list-card h3 {
	margin-block: var(--space-3) var(--space-2);
	color: var(--brand-navy);
	font-size: clamp(1.2rem, 2vw, 1.375rem);
	line-height: 1.4;
}

.information-card p,
.feature-card p {
	margin: 0;
	color: var(--text-secondary);
}

.feature-pair,
.app-grid,
.pros-cons-grid {
	display: grid;
	gap: var(--space-4);
}

.feature-card {
	position: relative;
	padding: clamp(1.35rem, 3vw, 2rem);
	overflow: hidden;
}

.feature-card::after {
	position: absolute;
	inset-block-start: -3rem;
	inset-inline-end: -3rem;
	width: 8rem;
	height: 8rem;
	border: 1.25rem solid var(--surface-blue);
	border-radius: 50%;
	content: "";
	pointer-events: none;
}

.feature-card a {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
	padding: 0.45rem 0.8rem;
	margin-block-start: var(--space-4);
	border: 1px solid #c9ddf3;
	border-radius: var(--radius-sm);
	background: var(--surface-blue);
	font-weight: 800;
	text-decoration: none;
}

.feature-card--withdrawal .feature-card__icon {
	background: #fff7df;
	color: var(--warning);
}

.empty-state {
	display: flex;
	min-height: 8rem;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	padding: clamp(1.25rem, 4vw, 2rem);
	border: 1px dashed #b9c9dc;
	border-radius: var(--radius-lg);
	background: var(--surface);
	color: var(--text-secondary);
	text-align: center;
}

.empty-state p {
	max-width: 48rem;
	margin: 0;
}

.empty-state--payment {
	background: var(--surface-blue);
}

.payment-panel {
	position: relative;
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
	min-height: 10rem;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	border: 1px solid #c9def5;
	border-radius: var(--radius-lg);
	background:
		radial-gradient(circle at 85% 10%, rgb(18 104 214 / 10%), transparent 14rem),
		linear-gradient(135deg, #fafdff, var(--surface-blue));
	box-shadow: 0 10px 26px rgb(16 36 62 / 7%);
	overflow: hidden;
}

.payment-panel__intro {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--space-4);
}

.payment-panel__icon {
	display: inline-flex;
	width: 3.25rem;
	height: 3.25rem;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-md);
	background: var(--brand-primary);
	color: var(--surface);
}

.payment-panel__content {
	position: relative;
	z-index: 1;
}

.payment-panel__content h3 {
	margin: 0 0 var(--space-2);
	color: var(--brand-navy);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.payment-panel__content p {
	max-width: 48rem;
	margin: 0;
	color: var(--text-secondary);
}

.payment-information-grid {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--space-3);
}

.payment-information-grid article {
	padding: var(--space-4);
	border: 1px solid rgb(18 104 214 / 12%);
	border-radius: var(--radius-md);
	background: rgb(255 255 255 / 82%);
}

.payment-information-grid article > span {
	display: inline-grid;
	width: 2rem;
	height: 2rem;
	place-items: center;
	border-radius: 50%;
	background: var(--surface-blue);
	color: var(--brand-primary-dark);
	font-size: 0.75rem;
	font-weight: 900;
}

.payment-information-grid h3 {
	margin-block: var(--space-3) var(--space-2);
	color: var(--brand-navy);
	font-size: 1.05rem;
}

.payment-information-grid p {
	margin: 0;
	color: var(--text-secondary);
	font-size: 0.9375rem;
}

.app-card {
	position: relative;
	min-height: 20rem;
	padding: clamp(1.35rem, 3vw, 2rem);
	overflow: hidden;
}

.app-card--inactive {
	background: rgb(255 255 255 / 68%);
}

.app-card__top {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.app-card__top p,
.app-card__top h3 {
	margin: 0;
}

.app-card__top p {
	color: var(--text-secondary);
	font-size: 0.8125rem;
}

.app-card__copy {
	position: relative;
	z-index: 2;
	max-width: 29rem;
	margin-block: var(--space-4) 0;
	color: var(--text-secondary);
}

.app-card__details {
	position: relative;
	z-index: 2;
	display: grid;
	gap: var(--space-2);
	margin-block: var(--space-4);
}

.app-card__details div {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	padding-block-end: var(--space-2);
	border-block-end: 1px solid var(--border);
}

.app-card__details dt {
	color: var(--text-secondary);
}

.app-card__details dd {
	margin: 0;
	font-weight: 800;
}

.app-card__status,
.app-card__instructions {
	position: relative;
	z-index: 2;
	color: var(--text-secondary);
}

.app-card > .button {
	position: relative;
	z-index: 2;
}

.app-card__visual {
	position: absolute;
	inset-inline-end: -2.5rem;
	inset-block-end: -3rem;
	width: 9rem;
	height: 12.5rem;
	border: 0.65rem solid #d9eafb;
	border-radius: 1.75rem;
	background: #eef6fe;
	overflow: hidden;
	transform: rotate(-10deg);
	pointer-events: none;
}

.app-card__screenshot {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

[dir="rtl"] .app-card__visual {
	transform: rotate(10deg);
}

.app-card__visual-placeholder {
	display: grid;
	height: 100%;
	place-content: center;
	gap: var(--space-2);
	color: #607a98;
	font-size: 0.75rem;
	font-weight: 800;
	text-align: center;
}

.app-card__visual-placeholder .icon {
	width: 2rem;
	height: 2rem;
	margin-inline: auto;
}

.video-section__grid,
.topup-section__grid,
.responsible-section__inner {
	display: grid;
	align-items: center;
	gap: clamp(1.75rem, 4vw, 3.5rem);
}

.video-section__grid h2,
.topup-section__grid h2,
.responsible-section h2 {
	margin-block: 0 var(--space-3);
	color: var(--brand-navy);
	font-size: clamp(1.625rem, 3vw, 2.125rem);
}

.video-section__duration {
	color: var(--text-secondary);
}

.video-shell {
	position: relative;
	display: grid;
	width: 100%;
	aspect-ratio: 16 / 9;
	place-items: center;
	border: 1px solid #cbd8e7;
	border-radius: var(--radius-lg);
	background:
		radial-gradient(circle at 20% 10%, rgb(18 104 214 / 18%), transparent 12rem),
		linear-gradient(135deg, #ddecff, #f8fbff);
	box-shadow: 0 14px 34px rgb(16 36 62 / 10%);
	overflow: hidden;
}

.video-shell iframe,
.video-shell video,
.video-shell__poster {
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.video-shell__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.video-shell__play {
	display: grid;
	width: 4rem;
	height: 4rem;
	place-items: center;
	border-radius: 50%;
	background: var(--brand-primary);
	color: var(--surface);
	box-shadow: var(--shadow-md);
}

.video-shell__play::before {
	width: 0.9rem;
	height: 1.1rem;
	margin-inline-start: 0.2rem;
	background: var(--surface);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	content: "";
}

.video-shell__placeholder i {
	position: absolute;
	width: 11rem;
	height: 11rem;
	border: 1px solid rgb(18 104 214 / 18%);
	border-radius: 50%;
}

.video-shell__placeholder i:last-child {
	width: 17rem;
	height: 17rem;
}

.video-shell__button {
	position: absolute;
	inset: 0;
	width: 100%;
	padding: var(--space-4);
	border: 0;
	background: linear-gradient(0deg, rgb(16 36 62 / 70%), transparent 60%);
	color: var(--surface);
	font-weight: 800;
}

.video-shell__button span {
	position: absolute;
	inset-inline: var(--space-4);
	inset-block-end: var(--space-4);
}

.video-shell__empty {
	position: absolute;
	inset-inline: var(--space-4);
	inset-block-end: var(--space-4);
	padding: var(--space-3);
	border-radius: var(--radius-sm);
	border: 1px solid rgb(18 104 214 / 10%);
	background: rgb(255 255 255 / 94%);
	box-shadow: var(--shadow-sm);
	color: var(--text-secondary);
	text-align: center;
}

.video-shell__empty p {
	margin: 0;
}

.comparison-grid {
	display: grid;
	align-items: stretch;
	gap: var(--space-3);
}

.comparison-card {
	padding: clamp(1.35rem, 3vw, 2rem);
}

.comparison-card h3 {
	margin-block-start: 0;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.comparison-card dl {
	display: grid;
	gap: var(--space-3);
	margin: 0;
}

.comparison-card dl div {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	padding-block-end: var(--space-2);
	border-block-end: 1px solid var(--border);
}

.comparison-card dt {
	color: var(--text-secondary);
}

.comparison-card dd {
	margin: 0;
	color: var(--brand-primary-dark);
	font-weight: 900;
}

.comparison-card__empty {
	padding: var(--space-4);
	border-radius: var(--radius-md);
	background: var(--surface-soft);
	color: var(--text-secondary);
	text-align: center;
}

.comparison-grid__vs {
	display: grid;
	width: 3.5rem;
	height: 3.5rem;
	place-self: center;
	place-items: center;
	border: 3px solid #f6ce58;
	border-radius: 50%;
	background: var(--brand-accent);
	color: var(--brand-navy);
	font-weight: 900;
}

.pros-cons-grid ul {
	display: grid;
	gap: var(--space-3);
	padding: 0;
	margin: 0;
	list-style: none;
}

.list-card {
	display: flex;
	min-height: 100%;
	flex-direction: column;
	padding: clamp(1.35rem, 3vw, 2rem);
}

.list-card h3 {
	margin-block-start: 0;
	padding-block-end: var(--space-3);
	border-block-end: 1px solid var(--border);
}

.list-card li {
	position: relative;
	padding-inline-start: 1.8rem;
}

.list-card li::before {
	position: absolute;
	inset-inline-start: 0;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background: #e9f7ee;
	color: var(--success);
	font-size: 0.8rem;
	font-weight: 900;
	line-height: 1.3rem;
	text-align: center;
	content: "✓";
}

.list-card--notice li::before {
	background: #fff4d6;
	color: var(--warning);
	content: "!";
}

.topup-section {
	background:
		radial-gradient(circle at 8% 15%, rgb(38 185 133 / 12%), transparent 19rem),
		linear-gradient(135deg, #effcf7, #eef6ff);
}

.topup-section__notice {
	max-width: 42rem;
	padding: var(--space-4);
	border-inline-start: 4px solid #1a9b70;
	border-radius: var(--radius-sm);
	background: rgb(255 255 255 / 72%);
	font-weight: 700;
}

.topup-section__commission {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}

.topup-section__commission span {
	color: var(--text-secondary);
}

.topup-section__commission strong {
	color: var(--brand-primary-dark);
	font-size: 1.5rem;
}

.topup-section__methods {
	padding: clamp(1.35rem, 3vw, 2rem);
	border-radius: var(--radius-lg);
	background: linear-gradient(145deg, #103c4a, var(--brand-navy));
	color: #d9e2ef;
	box-shadow: var(--shadow-md);
}

.topup-section__methods h3 {
	margin-block-start: 0;
	color: var(--surface);
}

.topup-section__methods ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding: 0;
	list-style: none;
}

.topup-section__methods li {
	padding: 0.4rem 0.75rem;
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: 999px;
	background: rgb(255 255 255 / 8%);
}

.topup-calculator {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid rgb(22 138 103 / 20%);
	border-radius: var(--radius-lg);
	background: rgb(255 255 255 / 82%);
	box-shadow: var(--shadow-sm);
}

.topup-calculator__heading h3 {
	margin-block: 0 var(--space-2);
	color: var(--brand-navy);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.topup-calculator__heading > p:last-child {
	margin: 0;
	color: var(--text-secondary);
}

.topup-calculator__form {
	display: grid;
	gap: var(--space-3);
	align-content: start;
}

.topup-calculator__form label {
	display: grid;
	gap: 0.35rem;
}

.topup-calculator__form label span {
	color: var(--text-secondary);
	font-size: 0.8125rem;
	font-weight: 700;
}

.topup-calculator__form input {
	width: 100%;
	min-height: 2.75rem;
	padding-inline: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}

.topup-section .button--accent {
	background: #168a67;
	color: var(--surface);
}

.topup-section .button--accent:hover {
	background: #0f7255;
	color: var(--surface);
}

.article-card {
	position: relative;
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-self: stretch;
	border-color: #dce6f2;
	border-radius: 1rem;
	box-shadow: 0 0.55rem 1.5rem rgb(16 36 62 / 6%);
	overflow: hidden;
}

.article-grid .article-card + .article-card {
	padding-block-start: 0;
	margin-block-start: 0;
}

.article-card__media {
	display: grid;
	flex: 0 0 auto;
	width: 100%;
	aspect-ratio: 16 / 9;
	place-items: center;
	background: linear-gradient(135deg, #dcecff, #f7fbff);
	color: var(--brand-primary-dark);
	text-decoration: none;
	overflow: hidden;
}

.article-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.article-card__media-placeholder {
	display: grid;
	width: 4rem;
	height: 4rem;
	place-items: center;
	border-radius: 50%;
	background: var(--surface);
	color: var(--brand-primary);
}

.article-card__badges {
	position: absolute;
	z-index: 1;
	inset-block-start: 0.75rem;
	inset-inline-start: 0.75rem;
	display: flex;
	max-width: calc(100% - 1.5rem);
	flex-wrap: wrap;
	gap: 0.4rem;
}

.article-card__badges span {
	padding: 0.25rem 0.65rem;
	border: 1px solid rgb(18 104 214 / 12%);
	border-radius: 999px;
	background: rgb(255 255 255 / 94%);
	box-shadow: 0 0.2rem 0.7rem rgb(16 36 62 / 10%);
	color: var(--brand-navy);
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1.5;
}

.article-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1rem 1.125rem 1.1rem;
}

.article-card h3 {
	display: -webkit-box;
	margin: 0 0 0.6rem;
	overflow: hidden;
	font-size: clamp(1.05rem, 1.7vw, 1.2rem);
	line-height: 1.45;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.article-card h3 a {
	color: var(--brand-navy);
	text-decoration: none;
}

.article-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	color: var(--text-secondary);
	font-size: 0.9rem;
	line-height: 1.75;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.article-card__excerpt p {
	margin: 0;
}

.article-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding-block-start: 0.75rem;
	border-block-start: 1px solid #edf1f6;
	margin-block-start: auto;
}

.article-card__footer time {
	color: var(--text-secondary);
	font-size: 0.78rem;
	white-space: nowrap;
}

.article-card__link {
	display: inline-flex;
	align-items: center;
	color: var(--brand-primary);
	font-size: 0.875rem;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
}

.article-card__link::after {
	margin-inline-start: 0.35rem;
	content: "‹";
	font-size: 1.15em;
}

#latest-articles .section-heading {
	margin-inline: auto;
	text-align: center;
}

.latest-articles__archive {
	display: flex;
	justify-content: center;
	margin-block-start: clamp(1.5rem, 3vw, 2rem);
}

.latest-articles__archive .button {
	min-height: 2.85rem;
	padding-inline: 1.25rem;
}

.game-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
}

.game-card {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.game-card__visual {
	aspect-ratio: 16 / 9;
	background: linear-gradient(145deg, #e6f2ff, #f7fbff);
	overflow: hidden;
}

.game-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.game-card__body {
	display: grid;
	gap: var(--space-2);
	padding: var(--space-4);
}

.game-card--text-only .game-card__body {
	min-height: 7.5rem;
	align-content: center;
	border-block-start: 0.25rem solid var(--brand-primary);
	background: linear-gradient(145deg, var(--surface), var(--surface-blue));
}

.game-card h3,
.game-card p {
	margin: 0;
}

.game-card h3 {
	color: var(--brand-navy);
	font-size: clamp(1rem, 2vw, 1.2rem);
}

.game-card p {
	color: var(--text-secondary);
	font-size: 0.875rem;
}

.game-card a {
	font-size: 0.875rem;
	font-weight: 800;
}

.faq-layout {
	display: grid;
	gap: var(--space-5);
}

.faq-layout .section-heading {
	margin: 0;
}

.faq-list {
	display: grid;
	align-content: start;
	gap: var(--space-3);
}

.faq-item + .faq-item {
	border-block-start: 0;
}

.faq-item {
	align-self: start;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.faq-item h3 {
	margin: 0;
}

.faq-item__toggle {
	display: flex;
	width: 100%;
	min-height: 4.25rem;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	border: 0;
	background: transparent;
	color: var(--brand-navy);
	font: inherit;
	font-weight: 800;
	text-align: start;
	cursor: pointer;
}

.faq-item__toggle:hover,
.faq-item__toggle:focus-visible,
.faq-item__toggle[aria-expanded="true"] {
	background: var(--surface-blue);
}

.faq-item__toggle i {
	position: relative;
	display: block;
	width: 1.75rem;
	height: 1.75rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: #e0efff;
}

.faq-item__toggle i::before,
.faq-item__toggle i::after {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: 0.7rem;
	height: 0.12rem;
	border-radius: 999px;
	background: var(--brand-primary);
	content: "";
	transform: translate(-50%, -50%);
}

.faq-item__toggle i::after {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: transform 160ms ease;
}

.faq-item__toggle[aria-expanded="true"] i::after {
	transform: translate(-50%, -50%) rotate(0);
}

.faq-item__panel {
	padding: 0 var(--space-5) var(--space-4);
	background: var(--surface-blue);
	color: var(--text-secondary);
}

.faq-item__panel p {
	margin: 0;
}

.faq-item__panel[hidden] {
	display: none;
}

.home-section.responsible-section {
	padding-block: 2rem;
	background: var(--brand-primary-dark);
	color: #e0edfc;
}

.responsible-section h2,
.responsible-section .section-heading__eyebrow {
	color: var(--surface);
}

.responsible-section p {
	max-width: 50rem;
}

.age-badge--large {
	width: 4.5rem;
	height: 4.5rem;
	font-size: 1.35rem;
}

.mobile-registration-cta {
	position: fixed;
	z-index: 900;
	inset-inline: var(--space-3);
	inset-block-end: max(var(--space-3), env(safe-area-inset-bottom));
	display: flex;
	min-height: 4.25rem;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-block: var(--space-2);
	padding-inline-start: var(--space-3);
	padding-inline-end: 3rem;
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: var(--radius-md);
	background: var(--brand-navy);
	box-shadow: 0 1rem 3rem rgb(16 36 62 / 32%);
	color: var(--surface);
}

.mobile-registration-cta > div {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.mobile-registration-cta > div span {
	color: #b8c7d9;
	font-size: 0.75rem;
}

.mobile-registration-cta > div strong {
	font-size: 1.05rem;
	letter-spacing: 0.05em;
}

.mobile-registration-cta__close {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 0.2rem;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: #b8c7d9;
	font-size: 1.4rem;
	transform: translateY(-50%);
}

.has-mobile-registration-cta {
	padding-block-end: calc(5.5rem + env(safe-area-inset-bottom));
}

@media (min-width: 36rem) {
	.information-grid,
	.article-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.quick-link {
		min-height: 5.5rem;
	}

	.calculator-shell__controls {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 48rem) {
	.calculator-shell,
	.video-section__grid,
	.topup-section__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.feature-pair,
	.app-grid,
	.pros-cons-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.game-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.promo-grid:not(.promo-grid--single) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.app-card {
		min-height: 23rem;
		padding-inline-end: clamp(11rem, 34%, 14rem);
	}

	.app-card__visual {
		inset-inline-end: -1.5rem;
		inset-block-end: -2rem;
		width: 12rem;
		height: 17rem;
	}

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

	.responsible-section__inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.topup-calculator {
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	}
}

@media (min-width: 64rem) {
	.home-section {
		padding-block: 3.5rem;
	}

	.quick-navigation {
		padding-block: 0 2.25rem;
	}

	.quick-navigation__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.home-hero {
		padding-block: 3.5rem 4.75rem;
	}

	.home-hero__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
	}

	.home-hero__visual {
		min-height: 29rem;
	}

	.hero-device {
		width: 15.5rem;
		aspect-ratio: 0.6;
	}

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

	.article-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.comparison-grid {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		gap: var(--space-5);
	}
}

@media (min-width: 64rem) {
	.mobile-registration-cta {
		display: none;
	}

	.has-mobile-registration-cta {
		padding-block-end: 0;
	}
}

@media (max-width: 30rem) {
	.promo-card {
		align-items: stretch;
		flex-direction: column;
	}

	.promo-card__actions {
		width: 100%;
	}

	.promo-card__actions .button {
		flex: 1 1 auto;
	}

	.mobile-registration-cta .button {
		padding-inline: var(--space-3);
	}
}

.article-grid--single {
	grid-template-columns: minmax(0, 22rem);
	max-width: 22rem;
	margin-inline: auto;
}

.article-grid--compact {
	grid-template-columns: minmax(0, 1fr);
	max-width: 46rem;
	margin-inline: auto;
}

@media (min-width: 36rem) {
	.article-grid--compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-device {
		transform: none;
	}
}

/* Phase 5: responsive Media Library asset integration and visual refinement. */
.home-hero {
	isolation: isolate;
	padding-block: clamp(2.75rem, 5vw, 4.5rem) clamp(3.5rem, 7vw, 5.5rem);
	background: #073c83;
}

.home-hero::after {
	position: absolute;
	z-index: 0;
	inset: 0;
	background:
		linear-gradient(90deg, rgb(4 28 66 / 18%) 0%, rgb(4 31 72 / 76%) 48%, rgb(3 28 68 / 96%) 100%),
		linear-gradient(0deg, rgb(3 25 61 / 30%), transparent 48%);
	content: "";
	pointer-events: none;
}

[dir="ltr"] .home-hero::after {
	background:
		linear-gradient(270deg, rgb(4 28 66 / 18%) 0%, rgb(4 31 72 / 76%) 48%, rgb(3 28 68 / 96%) 100%),
		linear-gradient(0deg, rgb(3 25 61 / 30%), transparent 48%);
}

.home-hero__background {
	position: absolute;
	z-index: -1;
	inset: 0;
}

.home-hero__background-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.home-hero__texture {
	z-index: 1;
	opacity: 0.45;
}

.home-hero__grid {
	z-index: 2;
}

.home-hero__content {
	position: relative;
	z-index: 4;
}

.home-hero h1 {
	max-width: 43rem;
	font-size: clamp(2rem, 5.5vw, 3rem);
	line-height: 1.08;
	text-wrap: balance;
	text-shadow: 0 0.2rem 1.25rem rgb(0 24 59 / 34%);
}

.home-hero__lead {
	font-size: clamp(1rem, 2.2vw, 1.2rem);
	line-height: 1.8;
	text-shadow: 0 0.15rem 0.75rem rgb(0 24 59 / 28%);
}

.home-hero__visual {
	min-height: clamp(18rem, 74vw, 25rem);
}

.hero-stadium,
.hero-orbit,
.hero-ball-shape {
	display: none;
}

.hero-person {
	z-index: 1;
	inset-inline-end: -2%;
	width: min(60%, 18rem);
	height: 96%;
	filter: drop-shadow(0 1.5rem 1.5rem rgb(0 22 54 / 35%));
}

.hero-device {
	position: absolute;
	z-index: 3;
	inset-inline-start: 5%;
	inset-block-end: 2%;
	width: min(40vw, 10.5rem);
	box-shadow: 0 1.75rem 3.5rem rgb(2 23 51 / 48%), inset 0 0 0 1px rgb(255 255 255 / 7%);
}

.hero-currency-badge {
	inset-block-start: 11%;
	inset-inline-start: 2%;
	backdrop-filter: blur(0.4rem);
}

.hero-geometry {
	z-index: 0;
	opacity: 0.75;
}

.home-hero .promo-card {
	backdrop-filter: blur(0.55rem);
}

.quick-link,
.information-card,
.feature-card,
.app-card,
.game-card,
.faq-item {
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.information-card {
	border-block-start: 0.2rem solid rgb(18 104 214 / 70%);
}

.information-card:hover {
	border-color: rgb(18 104 214 / 34%);
	border-block-start-color: var(--brand-primary);
	box-shadow: 0 0.85rem 1.8rem rgb(16 36 62 / 8%);
}

.payment-information-grid article {
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

.payment-information-grid article:hover {
	border-color: rgb(18 104 214 / 28%);
	box-shadow: 0 0.65rem 1.4rem rgb(16 36 62 / 7%);
}

.quick-link:hover,
.quick-link:focus-visible {
	border-color: rgb(18 104 214 / 38%);
	box-shadow: 0 0.85rem 1.8rem rgb(16 36 62 / 10%);
	transform: translateY(-0.15rem);
}

.calculator-shell,
.topup-calculator {
	box-shadow: 0 1.1rem 2.6rem rgb(16 36 62 / 9%);
}

.calculator-result {
	border: 1px solid rgb(18 104 214 / 14%);
	background: linear-gradient(145deg, #f8fbff, #eaf4ff);
}

.deposit-section__layout {
	display: grid;
	align-items: center;
	gap: clamp(1.75rem, 5vw, 4rem);
}

.deposit-section__visual,
.topup-section__visual,
.faq-layout__visual {
	margin: 0;
	border: 1px solid rgb(18 104 214 / 13%);
	border-radius: var(--radius-lg);
	background: linear-gradient(145deg, #e8f3ff, #fafdff);
	box-shadow: 0 1rem 2.5rem rgb(16 36 62 / 9%);
	overflow: hidden;
}

.deposit-section__visual {
	aspect-ratio: 3 / 2;
}

.deposit-section__image,
.topup-section__image,
.faq-layout__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.feature-card:hover {
	border-color: rgb(18 104 214 / 30%);
	box-shadow: 0 0.9rem 2rem rgb(16 36 62 / 8%);
}

.app-card {
	display: grid;
	align-content: start;
}

.app-card > .button {
	justify-self: start;
}

.app-card__visual {
	position: relative;
	inset: auto;
	display: grid;
	width: 100%;
	height: 17rem;
	place-items: center;
	margin-block-start: var(--space-4);
	border: 0;
	border-radius: var(--radius-lg);
	background:
		radial-gradient(circle at 74% 20%, rgb(18 104 214 / 18%), transparent 8rem),
		linear-gradient(145deg, #e9f4ff, #f9fcff);
	overflow: hidden;
	transform: none;
}

[dir="rtl"] .app-card__visual {
	transform: none;
}

.app-card__illustration {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: end center;
	opacity: 0.92;
}

.app-card__illustration-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
}

.app-card__screen-frame {
	position: absolute;
	z-index: 2;
	inset-block-end: 0.8rem;
	inset-inline-start: 6%;
	width: 7.4rem;
	aspect-ratio: 0.48;
	padding: 0.35rem;
	border: 1px solid rgb(255 255 255 / 48%);
	border-radius: 1.25rem;
	background: #0a203a;
	box-shadow: 0 1rem 2.2rem rgb(8 30 57 / 32%);
	overflow: hidden;
	transform: rotate(3deg);
}

[dir="rtl"] .app-card__screen-frame {
	transform: rotate(-3deg);
}

.app-card__screen-frame > span {
	position: absolute;
	z-index: 2;
	inset-block-start: 0.65rem;
	inset-inline-start: 50%;
	width: 2.2rem;
	height: 0.22rem;
	border-radius: 999px;
	background: rgb(255 255 255 / 36%);
	transform: translateX(-50%);
}

.app-card__screenshot {
	border-radius: 0.95rem;
}

.video-shell {
	border-color: rgb(18 104 214 / 18%);
	box-shadow: 0 1.2rem 2.8rem rgb(16 36 62 / 14%);
}

.video-shell__poster {
	transition: transform 320ms ease;
}

.video-shell:hover .video-shell__poster {
	transform: scale(1.025);
}

.comparison-card:first-child {
	border-block-start: 0.25rem solid var(--brand-primary);
}

.comparison-card:last-child {
	border-block-start: 0.25rem solid var(--brand-accent);
}

.pros-cons-grid {
	align-items: start;
}

.list-card {
	min-height: 0;
}

.list-card--positive {
	border-block-start: 0.25rem solid var(--success);
}

.list-card--notice {
	border-block-start: 0.25rem solid var(--warning);
}

.promo-grid--single .promo-card {
	box-shadow: 0 1.1rem 2.8rem rgb(8 74 155 / 22%);
}

.topup-section__intro {
	position: relative;
	min-width: 0;
}

.topup-section__visual {
	width: min(100%, 17rem);
	aspect-ratio: 1 / 0.86;
	margin-block-start: var(--space-5);
}

.topup-section__image,
.faq-layout__image {
	object-fit: contain;
}

.topup-section__methods {
	box-shadow: 0 1.1rem 2.8rem rgb(16 36 62 / 18%);
}

.game-card:hover,
.game-card:focus-within {
	border-color: rgb(18 104 214 / 30%);
	box-shadow: 0 1rem 2rem rgb(16 36 62 / 11%);
	transform: translateY(-0.18rem);
}

.game-card__image {
	transition: transform 280ms ease;
}

.game-card:hover .game-card__image,
.game-card:focus-within .game-card__image {
	transform: scale(1.035);
}

.faq-layout__intro {
	display: grid;
	align-content: start;
	gap: var(--space-4);
}

.faq-layout__visual {
	width: min(100%, 18rem);
	aspect-ratio: 1 / 0.9;
}

.faq-item:hover,
.faq-item:focus-within {
	border-color: rgb(18 104 214 / 28%);
	box-shadow: 0 0.8rem 1.8rem rgb(16 36 62 / 8%);
}

@media (max-width: 47.99rem) {
	.home-hero::after,
	[dir="ltr"] .home-hero::after {
		background: linear-gradient(180deg, rgb(3 28 68 / 94%) 0%, rgb(3 28 68 / 82%) 50%, rgb(3 28 68 / 48%) 100%);
	}

	.home-hero__background-image {
		object-position: 42% center;
	}

	.home-hero__visual {
		width: min(100%, 26rem);
		min-height: 16rem;
		margin-inline: auto;
	}

	.hero-person {
		inset-inline-end: 4%;
	}

	.home-hero__actions .button {
		flex: 1 1 10rem;
	}

	.deposit-section__visual {
		order: -1;
	}
}

@media (min-width: 48rem) {
	.app-grid {
		grid-template-columns: 1fr;
	}

	.app-card {
		grid-template-columns: minmax(0, 1fr) minmax(11rem, 0.62fr);
		grid-template-rows: repeat(6, auto) 1fr;
		min-height: 25rem;
		padding: clamp(1.5rem, 3vw, 2rem);
	}

	.app-card__top,
	.app-card__copy,
	.app-card__details,
	.app-card__instructions,
	.app-card__status,
	.app-card > .button {
		grid-column: 1;
	}

	.app-card__visual {
		grid-column: 2;
		grid-row: 1 / -1;
		height: 100%;
		min-height: 21rem;
		margin: 0;
	}

	.app-card--no-visual {
		grid-template-columns: 1fr;
	}

	.app-card--no-visual > * {
		grid-column: 1;
	}

	.app-card--no-visual .app-card__visual {
		position: absolute;
		width: 1px;
		height: 1px;
		min-height: 0;
		clip-path: inset(50%);
	}

	.faq-list {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 64rem) {
	.home-page {
		font-size: 1.0625rem;
	}

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

	.home-hero__grid {
		grid-template-columns: minmax(0, 1.04fr) minmax(24rem, 0.96fr);
	}

	.home-hero__visual {
		min-height: 31rem;
	}

	.hero-person {
		inset-inline-end: -4%;
		width: min(67%, 23rem);
		height: 100%;
	}

	.hero-device {
		inset-inline-start: 3%;
		width: 14.5rem;
	}

	.deposit-section__layout {
		grid-template-columns: minmax(0, 1.2fr) minmax(21rem, 0.8fr);
	}

	.faq-layout {
		grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
		gap: clamp(2rem, 5vw, 4.5rem);
	}

	.faq-layout__visual {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.quick-link,
	.game-card,
	.game-card__image,
	.video-shell__poster {
		transform: none !important;
	}
}

/* Phase 5.1: focused homepage heading and hero-composition corrections. */
.home-page .section-heading {
	margin-block-end: clamp(1.75rem, 3vw, 2.25rem);
}

.home-page .section-heading h2 {
	margin-block-end: 0.75rem;
}

.home-page .section-heading > p:last-child {
	margin-block: 0;
}

.calculator-shell > div:first-child > h2,
.topup-section__intro > h2,
.video-section__grid > div:first-child > h2,
.responsible-section h2 {
	margin-block-start: 0;
	margin-block-end: 0.75rem;
}

.hero-currency-badge {
	display: none;
}

.home-hero__visual {
	display: flex;
	min-height: clamp(23rem, 42vw, 31rem);
	align-items: flex-end;
	justify-content: center;
}

.hero-composition {
	position: relative;
	z-index: 2;
	display: grid;
	width: min(100%, 31rem);
	min-height: clamp(23rem, 42vw, 31rem);
	grid-template-columns: minmax(0, 0.92fr) minmax(12.75rem, 0.83fr);
	align-items: end;
	isolation: isolate;
}

.hero-person {
	position: relative;
	z-index: 1;
	inset: auto;
	display: flex;
	width: 100%;
	height: auto;
	max-height: 30rem;
	grid-column: 1;
	grid-row: 1;
	align-self: end;
	align-items: flex-end;
	justify-content: center;
	filter: drop-shadow(0 1.5rem 1.5rem rgb(0 22 54 / 35%));
}

.hero-person__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 30rem;
	object-fit: contain;
	object-position: center bottom;
}

.hero-device {
	position: relative;
	z-index: 3;
	inset: auto;
	width: min(100%, 14.5rem);
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	justify-self: start;
	margin-inline-start: -12%;
	box-shadow: 0 1.75rem 3.5rem rgb(2 23 51 / 48%), inset 0 0 0 1px rgb(255 255 255 / 7%);
	transform: perspective(65rem) rotateY(7deg) rotateZ(-2deg);
	transform-origin: center bottom;
}

[dir="rtl"] .hero-device {
	transform: perspective(65rem) rotateY(-7deg) rotateZ(2deg);
}

.hero-composition > .hero-device:first-child {
	grid-column: 1 / -1;
	justify-self: center;
	margin-inline-start: 0;
}

.hero-device__image {
	object-fit: contain;
	object-position: center top;
}

@media (max-width: 47.99rem) {
	.home-hero__grid {
		gap: clamp(1.75rem, 7vw, 2.75rem);
	}

	.home-hero__visual {
		width: min(100%, 25rem);
		min-height: 19rem;
		margin-inline: auto;
	}

	.hero-composition {
		display: flex;
		width: min(100%, 25rem);
		min-height: 19rem;
		align-items: flex-end;
		justify-content: center;
	}

	.hero-person {
		flex: 1 1 12rem;
		width: auto;
		min-width: 0;
		max-width: 13rem;
		max-height: 19rem;
	}

	.hero-person__image {
		max-height: 19rem;
	}

	.hero-device {
		flex: 0 0 clamp(9.25rem, 40vw, 11.5rem);
		width: clamp(9.25rem, 40vw, 11.5rem);
		margin-inline-start: -8%;
		transform: perspective(55rem) rotateY(5deg) rotateZ(-1.5deg);
	}

	[dir="rtl"] .hero-device {
		transform: perspective(55rem) rotateY(-5deg) rotateZ(1.5deg);
	}

	.hero-composition > .hero-device:first-child {
		margin-inline-start: 0;
	}
}

/* Phase 5.2: final homepage visual QA and responsive composition polish. */
#promo-codes {
	background: var(--surface-blue);
}

#pros-cons {
	background: var(--surface-soft);
}

.home-page .button {
	min-height: 3rem;
	padding-inline: 1.15rem;
}

.home-page .section-heading {
	max-width: 49rem;
}

.home-page .section-heading h2,
.calculator-shell h2,
.video-section__grid h2,
.topup-section__grid h2 {
	letter-spacing: -0.018em;
}

.home-page .section-heading > p:last-child,
.video-section__copy {
	font-size: 1.025rem;
	line-height: 1.8;
}

.home-hero::after {
	background:
		radial-gradient(circle at 19% 52%, rgb(31 139 241 / 10%), transparent 20rem),
		linear-gradient(90deg, rgb(4 28 66 / 15%) 0%, rgb(4 31 72 / 73%) 48%, rgb(3 28 68 / 97%) 100%),
		linear-gradient(0deg, rgb(3 25 61 / 36%), transparent 52%);
}

[dir="ltr"] .home-hero::after {
	background:
		radial-gradient(circle at 81% 52%, rgb(31 139 241 / 10%), transparent 20rem),
		linear-gradient(270deg, rgb(4 28 66 / 15%) 0%, rgb(4 31 72 / 73%) 48%, rgb(3 28 68 / 97%) 100%),
		linear-gradient(0deg, rgb(3 25 61 / 36%), transparent 52%);
}

.home-hero__background-image {
	filter: saturate(0.92) contrast(1.04);
}

.home-hero__texture {
	opacity: 0.34;
}

.home-hero__lead {
	max-width: 40rem;
}

.home-hero__actions .button {
	min-height: 3.15rem;
	padding-inline: 1.35rem;
}

.hero-composition::after {
	position: absolute;
	z-index: 0;
	inset-inline: 6%;
	inset-block-end: -0.25rem;
	height: 1.5rem;
	border-radius: 50%;
	background: rgb(0 19 46 / 28%);
	filter: blur(0.75rem);
	content: "";
}

.quick-navigation {
	margin-block-start: -1.9rem;
}

.quick-navigation__grid {
	gap: 0.85rem;
}

.quick-link {
	min-height: 5.65rem;
	gap: 0.85rem;
	padding: 0.9rem;
	border-radius: 0.9rem;
}

.quick-link__icon {
	width: 3rem;
	height: 3rem;
	flex: 0 0 3rem;
}

.quick-link__icon .icon,
.information-card__icon .icon,
.feature-card__icon .icon,
.app-card__icon .icon {
	width: 1.45rem;
	height: 1.45rem;
}

.quick-link__content strong {
	font-size: 1.025rem;
	line-height: 1.35;
}

.quick-link__content small {
	font-size: 0.84rem;
	line-height: 1.45;
}

.calculator-shell {
	gap: clamp(1.75rem, 4vw, 3.25rem);
	padding: clamp(1.75rem, 4vw, 2.5rem);
}

.calculator-shell > div:first-child {
	max-width: 36rem;
}

.calculator-shell__controls {
	gap: 0.9rem;
	padding: clamp(1.15rem, 2vw, 1.5rem);
}

.calculator-shell__controls label span,
.topup-calculator__form label span {
	font-size: 0.875rem;
}

.calculator-shell__controls input,
.calculator-shell__controls select,
.topup-calculator__form input {
	min-height: 3.2rem;
	font-size: 1rem;
}

.calculator-result {
	padding: 1.25rem;
}

.calculator-result dl {
	gap: 0.85rem;
}

.calculator-result dd {
	font-size: 1.08rem;
}

.information-grid {
	gap: 1rem;
}

.information-card {
	display: grid;
	min-height: 12rem;
	align-content: start;
	padding: 1.5rem;
}

.information-card__icon,
.feature-card__icon,
.app-card__icon {
	width: 3rem;
	height: 3rem;
}

.information-card p,
.feature-card p {
	font-size: 1rem;
	line-height: 1.75;
}

.feature-card {
	display: flex;
	min-height: 18rem;
	flex-direction: column;
	padding: clamp(1.5rem, 2.6vw, 2rem);
}

.feature-card a {
	align-self: flex-start;
	margin-block-start: auto;
}

.deposit-section__layout {
	align-items: stretch;
}

.deposit-section__content {
	min-width: 0;
}

.deposit-section__visual {
	min-height: 16rem;
}

.payment-panel {
	gap: clamp(1.5rem, 3vw, 2.25rem);
	padding: clamp(1.75rem, 4vw, 2.5rem);
}

.payment-panel__icon {
	width: 3.65rem;
	height: 3.65rem;
}

.payment-information-grid {
	gap: 1rem;
}

.payment-information-grid article {
	min-height: 12.5rem;
	padding: 1.4rem;
}

.payment-information-grid article > span {
	width: 2.35rem;
	height: 2.35rem;
	font-size: 0.82rem;
}

.payment-information-grid h3 {
	font-size: 1.1rem;
	line-height: 1.5;
}

.payment-information-grid p {
	font-size: 0.975rem;
	line-height: 1.7;
}

.app-grid {
	gap: 1.25rem;
}

.app-card {
	min-height: 26.5rem;
	padding: clamp(1.6rem, 2.6vw, 2.15rem);
}

.app-card__top {
	gap: 0.9rem;
}

.app-card__top h3 {
	font-size: 1.45rem;
}

.app-card__copy,
.app-card__status,
.app-card__instructions {
	font-size: 1rem;
	line-height: 1.7;
}

.app-card__details {
	gap: 0.7rem;
}

.app-card__visual {
	min-height: 22.5rem;
	border-radius: 1.15rem;
}

.app-card__screen-frame {
	width: 8rem;
}

.video-section__grid {
	gap: clamp(2rem, 5vw, 4.5rem);
}

.video-section__grid > div:first-child {
	max-width: 34rem;
}

.video-shell {
	border-radius: 1.15rem;
}

.video-shell__play {
	width: 4.5rem;
	height: 4.5rem;
}

.comparison-grid {
	gap: 1.25rem;
}

.comparison-card {
	padding: clamp(1.6rem, 3vw, 2.25rem);
}

.comparison-card dl {
	gap: 0;
}

.comparison-card dl div {
	min-height: 3.5rem;
	align-items: center;
	padding-block: 0.8rem;
}

.comparison-card dd {
	font-size: 1.08rem;
}

.comparison-grid__vs {
	width: 3.8rem;
	height: 3.8rem;
}

.promo-grid--single {
	max-width: 52rem;
}

.promo-grid .promo-card {
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: 1.15rem;
}

.promo-card__code {
	font-size: clamp(1.75rem, 4vw, 2.3rem);
}

.promo-card__actions {
	gap: 0.75rem;
}

.promo-card__actions .button {
	min-height: 3.15rem;
}

.game-grid {
	gap: 1rem;
}

.game-card {
	border-radius: 1rem;
}

.game-card__body {
	min-height: 7.5rem;
	align-content: start;
	padding: 1.2rem;
}

.game-card h3 {
	font-size: 1.15rem;
	line-height: 1.45;
}

.game-card p,
.game-card a {
	font-size: 0.925rem;
}

.pros-cons-grid {
	gap: 1.25rem;
}

.list-card {
	padding: clamp(1.6rem, 3vw, 2.1rem);
}

.list-card li {
	font-size: 1rem;
	line-height: 1.7;
}

.topup-section__grid {
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
	gap: 1.25rem;
}

.topup-section__intro {
	display: grid;
	gap: 1.25rem;
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 1px solid rgb(22 138 103 / 18%);
	border-radius: var(--radius-lg);
	background: rgb(255 255 255 / 70%);
}

.topup-section__summary h2 {
	margin-block: 0 0.75rem;
}

.topup-section__notice {
	max-width: 48rem;
	margin: 0;
}

.topup-section__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem;
}

.topup-section__commission {
	min-height: 3.15rem;
	margin: 0;
}

.topup-section__support {
	display: grid;
	align-items: stretch;
	gap: 1.25rem;
}

.topup-section__methods {
	display: grid;
	min-height: 13.5rem;
	align-content: center;
	padding: clamp(1.5rem, 3vw, 2rem);
}

.topup-section__methods ul {
	margin-block: 0.5rem 0;
}

.topup-section__visual {
	width: 100%;
	min-height: 13.5rem;
	margin: 0;
	aspect-ratio: auto;
}

.topup-section__image {
	object-fit: contain;
}

.topup-calculator {
	grid-column: auto;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.topup-calculator__heading h3 {
	font-size: 1.55rem;
}

.topup-calculator__heading > p:last-child {
	line-height: 1.75;
}

#latest-articles .empty-state {
	min-height: 5.75rem;
}

.faq-layout {
	align-items: start;
}

.faq-layout__intro {
	gap: 1.25rem;
}

.faq-layout__visual {
	width: min(100%, 15rem);
	margin-inline: auto;
}

.faq-list {
	gap: 0.85rem;
}

.faq-item__toggle {
	min-height: 4.75rem;
	padding: 1.1rem 1.35rem;
	font-size: 1.025rem;
	line-height: 1.55;
}

.faq-item__panel {
	padding: 0 1.35rem 1.25rem;
	font-size: 1rem;
	line-height: 1.75;
}

.responsible-section__inner {
	gap: 1.5rem;
}

@media (min-width: 48rem) {
	.calculator-shell {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	}

	.video-section__grid {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	}

	.app-card {
		grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.68fr);
	}

	.topup-section__intro {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}

	.topup-section__actions {
		max-width: 22rem;
		justify-content: flex-end;
	}

	.topup-section__support {
		grid-template-columns: minmax(0, 1.15fr) minmax(15rem, 0.85fr);
	}

	.topup-section__methods,
	.topup-section__visual {
		height: 17rem;
		min-height: 0;
	}

	.topup-calculator {
		grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
	}
}

@media (min-width: 64rem) {
	.home-page .section-heading h2,
	.calculator-shell h2,
	.video-section__grid h2,
	.topup-section__grid h2 {
		font-size: 2.25rem;
	}

	.home-hero__grid {
		grid-template-columns: minmax(0, 1.02fr) minmax(25rem, 0.98fr);
		gap: clamp(2.5rem, 5vw, 4.5rem);
	}

	.home-hero__visual,
	.hero-composition {
		min-height: 31rem;
	}

	.hero-composition {
		width: min(100%, 32rem);
		grid-template-columns: minmax(0, 0.96fr) minmax(13rem, 0.86fr);
	}

	.hero-person,
	.hero-person__image {
		max-height: 30.25rem;
	}

	.hero-device {
		width: min(100%, 15.25rem);
		inset-inline-start: 0.9rem;
		margin-inline-start: -10%;
	}

	.topup-section__methods,
	.topup-section__visual {
		height: 18rem;
		min-height: 0;
	}

	.quick-link {
		min-height: 6rem;
	}

	.deposit-section__layout {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
	}

	.deposit-section__content {
		display: contents;
	}

	.deposit-section__content > .section-heading {
		grid-column: 1 / -1;
	}

	.deposit-section__content > .feature-pair {
		display: contents;
	}

	.deposit-section__visual {
		min-height: 18rem;
		aspect-ratio: auto;
	}

	.deposit-section__image {
		object-fit: contain;
	}

	.app-card {
		min-height: 28rem;
	}

	.app-card__visual {
		min-height: 23.5rem;
	}

	.faq-layout {
		grid-template-columns: minmax(13rem, 0.58fr) minmax(0, 1.42fr);
		gap: clamp(2rem, 5vw, 4rem);
	}
}

@media (max-width: 63.99rem) {
	.deposit-section__visual {
		order: initial;
	}
}

@media (max-width: 47.99rem) {
	.home-hero::after,
	[dir="ltr"] .home-hero::after {
		background:
			linear-gradient(180deg, rgb(3 28 68 / 95%) 0%, rgb(3 28 68 / 84%) 51%, rgb(3 28 68 / 53%) 100%),
			linear-gradient(0deg, rgb(3 25 61 / 18%), transparent 45%);
	}

	.home-hero__actions .button {
		min-height: 3.1rem;
	}

	.hero-composition::after {
		inset-inline: 4%;
	}

	.quick-navigation__grid {
		gap: 0.7rem;
	}

	.quick-link {
		min-height: 5.4rem;
		padding: 0.75rem;
	}

	.quick-link__icon {
		width: 2.75rem;
		height: 2.75rem;
		flex-basis: 2.75rem;
	}

	.information-card,
	.feature-card,
	.payment-information-grid article {
		min-height: 0;
	}

	.feature-card {
		padding: 1.35rem;
	}

	.deposit-section__visual {
		min-height: 0;
		max-height: 17rem;
	}

	.app-card {
		min-height: 0;
		padding: 1.35rem;
	}

	.app-card__visual {
		min-height: 18.5rem;
		height: 18.5rem;
	}

	.promo-grid .promo-card {
		padding: 1.35rem;
	}

	.game-card__body {
		min-height: 7rem;
		padding: 1rem;
	}

	.topup-section__intro,
	.topup-calculator {
		padding: 1.25rem;
	}

	.topup-section__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.topup-section__commission,
	.topup-section__actions .button {
		width: 100%;
		justify-content: center;
	}

	.topup-section__support {
		gap: 1rem;
	}

	.topup-section__methods,
	.topup-section__visual {
		height: 13rem;
		min-height: 0;
	}

	.faq-layout__visual {
		width: min(72vw, 13.5rem);
	}

	.faq-item__toggle {
		min-height: 4.5rem;
		padding: 1rem;
		font-size: 0.975rem;
	}

	.faq-item__panel {
		padding: 0 1rem 1rem;
	}
}

/* Phase 5.3: practical content, conversion, and final homepage hierarchy. */
.hero-composition {
	display: flex;
	width: min(100%, 28rem);
	align-items: flex-end;
	justify-content: center;
}

.hero-composition > .hero-device:first-child,
.hero-device {
	inset: auto;
	width: clamp(12rem, 42vw, 15.5rem);
	max-width: 100%;
	flex: 0 0 auto;
	margin-inline-start: 0;
	transform: perspective(65rem) rotateY(5deg) rotateZ(-1.5deg);
}

[dir="rtl"] .hero-composition > .hero-device:first-child,
[dir="rtl"] .hero-device {
	transform: perspective(65rem) rotateY(-5deg) rotateZ(1.5deg);
}

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

.payment-option-grid {
	display: grid;
	gap: 1rem;
}

.payment-option-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 0.85rem;
	padding: clamp(1.35rem, 3vw, 2rem);
	border: 1px solid #cfdef0;
	border-radius: var(--radius-lg);
	background: linear-gradient(155deg, #fff, #f5f9ff);
	box-shadow: var(--shadow-sm);
}

.payment-option-card__icon {
	display: inline-grid;
	width: 3.25rem;
	height: 3.25rem;
	place-items: center;
	border-radius: 1rem;
	background: #e9f3ff;
	color: var(--brand-primary);
}

.payment-option-card--wallet .payment-option-card__icon {
	background: #ebf9f3;
	color: #137a59;
}

.payment-option-card--crypto .payment-option-card__icon {
	background: #fff4d6;
	color: #a86400;
}

.payment-option-card h3,
.payment-option-card p,
.payment-option-card ul {
	margin: 0;
}

.payment-option-card h3 {
	color: var(--brand-navy);
	font-size: 1.3rem;
}

.payment-option-card > p,
.payment-option-card li {
	color: var(--text-secondary);
	line-height: 1.75;
}

.payment-option-card ul {
	display: grid;
	gap: 0.55rem;
	padding-inline-start: 1.2rem;
}

.payment-option-card__note {
	padding-block-start: 0.85rem;
	border-block-start: 1px solid #d9e5f2;
	font-size: 0.875rem;
}

.payment-flow-comparison {
	display: grid;
	gap: 1rem;
	margin-block-start: 1.25rem;
}

.payment-flow-card {
	padding: clamp(1.2rem, 2.5vw, 1.65rem);
	border: 1px solid #cfdef0;
	border-inline-start: 0.3rem solid var(--brand-primary);
	border-radius: var(--radius-lg);
	background: #f5f9ff;
}

.payment-flow-card--withdrawal {
	border-inline-start-color: var(--brand-primary-dark);
	background: #fff;
}

.payment-flow-card__heading {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.payment-flow-card__heading > span {
	display: inline-grid;
	width: 2.65rem;
	height: 2.65rem;
	flex: 0 0 2.65rem;
	place-items: center;
	border-radius: 0.85rem;
	background: #e4f0ff;
	color: var(--brand-primary-dark);
}

.payment-flow-card h3 {
	margin: 0;
	color: var(--brand-navy);
	font-size: 1.2rem;
}

.payment-flow-card ul {
	display: grid;
	gap: 0.55rem;
	margin: 1rem 0 0;
	padding-inline-start: 1.2rem;
	color: var(--text-secondary);
	line-height: 1.7;
}

.topup-section__summary > p:last-child {
	max-width: 46rem;
	margin-block: 0.85rem 0;
	color: #29465b;
	line-height: 1.75;
}

.app-showcase {
	position: relative;
	display: grid;
	min-height: 31rem;
	align-items: center;
	gap: clamp(1.5rem, 5vw, 4rem);
	padding: clamp(1.5rem, 5vw, 3.5rem);
	border: 1px solid rgb(255 255 255 / 16%);
	border-radius: clamp(1.25rem, 3vw, 2rem);
	background:
		radial-gradient(circle at 10% 20%, rgb(75 160 255 / 28%), transparent 19rem),
		linear-gradient(135deg, #082b62, #0d5bad);
	box-shadow: 0 1.5rem 3.5rem rgb(4 39 88 / 18%);
	color: #e8f2ff;
	overflow: hidden;
}

.app-showcase__content {
	position: relative;
	z-index: 2;
}

.app-showcase__label {
	margin: 0 0 0.55rem;
	color: #8fc5ff;
	font-size: 0.82rem;
	font-weight: 900;
	letter-spacing: 0.04em;
}

.app-showcase h2 {
	margin: 0 0 0.85rem;
	color: #fff;
	font-size: clamp(1.8rem, 4vw, 2.7rem);
}

.app-showcase__content > p:not(.app-showcase__label) {
	max-width: 38rem;
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.8;
}

.app-showcase__benefits {
	display: grid;
	gap: 0.7rem;
	padding: 0;
	margin: 1.25rem 0 0;
	list-style: none;
}

.app-showcase__benefits li {
	position: relative;
	padding-inline-start: 1.75rem;
}

.app-showcase__benefits li::before {
	position: absolute;
	inset-inline-start: 0;
	color: #63e0ae;
	font-weight: 900;
	content: "✓";
}

.app-showcase__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-start: 1.5rem;
}

.app-showcase__actions .button {
	min-width: 9.75rem;
	gap: 0.55rem;
}

.app-showcase__actions .icon {
	width: 1.3rem;
	height: 1.3rem;
}

.app-showcase__visual {
	position: relative;
	min-height: 25rem;
	isolation: isolate;
}

.app-showcase__halo {
	position: absolute;
	inset: 12% 8%;
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: 50%;
	background: rgb(90 171 255 / 10%);
	box-shadow: 0 0 6rem rgb(75 160 255 / 24%);
}

.app-showcase__device {
	position: absolute;
	z-index: 2;
	inset-block-end: -2rem;
	width: min(68%, 18rem);
	margin: 0;
	filter: drop-shadow(0 1.5rem 1.5rem rgb(0 17 48 / 38%));
}

.app-showcase__device img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 28rem;
	object-fit: contain;
	object-position: center bottom;
}

.app-showcase__device--android {
	inset-inline-start: 2%;
	transform: rotate(-3deg);
}

.app-showcase__device--iphone {
	z-index: 3;
	inset-inline-end: 1%;
	transform: rotate(3deg);
}

[dir="rtl"] .app-showcase__device--android {
	transform: rotate(3deg);
}

[dir="rtl"] .app-showcase__device--iphone {
	transform: rotate(-3deg);
}

.app-showcase__placeholder {
	position: absolute;
	inset: 20%;
	display: grid;
	place-items: center;
	border: 1px dashed rgb(255 255 255 / 28%);
	border-radius: 2rem;
	color: #a9d3ff;
}

.app-showcase__placeholder .icon {
	width: 5rem;
	height: 5rem;
}

.calculator-shell--bonus {
	align-items: start;
}

.bonus-calculator__heading h2 span {
	display: block;
	margin-block-start: 0.35rem;
	color: var(--brand-primary);
	font-size: 0.67em;
}

.bonus-calculator__heading h2 b {
	padding: 0.1rem 0.45rem;
	border-radius: 0.45rem;
	background: #e6f1ff;
	letter-spacing: 0.04em;
}

.bonus-calculator__amount-row {
	display: grid;
	align-items: end;
	gap: 0.75rem;
}

.bonus-calculator__selected {
	display: flex;
	min-height: 3.2rem;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid #d4e2f1;
	border-radius: var(--radius-sm);
	background: var(--surface-blue);
}

.bonus-calculator__selected span {
	color: var(--text-secondary);
}

.bonus-calculator__selected strong {
	color: var(--brand-primary-dark);
	font-size: 1.05rem;
}

.bonus-calculator__range {
	display: grid;
	grid-column: 1 / -1;
	gap: 0.45rem;
}

.bonus-calculator__range input[type="range"] {
	min-height: 2rem;
	padding: 0;
	border: 0;
	accent-color: var(--brand-primary);
}

.bonus-calculator__range-limits {
	display: flex;
	justify-content: space-between;
	direction: ltr;
}

.bonus-calculator__range-limits b {
	font-size: 0.78rem;
}

.bonus-calculator__results {
	display: grid;
	grid-column: 1 / -1;
	gap: 0.85rem;
}

.bonus-calculator__results[hidden] {
	display: none;
}

.bonus-result-card {
	min-width: 0;
	padding: 1rem;
	border: 1px solid #cddfed;
	border-radius: var(--radius-md);
	background: #f8fbff;
}

.bonus-result-card--sports {
	border-block-start: 4px solid #159b69;
	background: #f3fcf8;
}

.bonus-result-card--casino {
	border-block-start: 4px solid #e89b13;
	background: #fffaf0;
}

.bonus-result-card h3,
.bonus-result-card p,
.bonus-result-card dl {
	margin: 0;
}

.bonus-result-card h3 {
	color: var(--brand-navy);
	font-size: 1.08rem;
}

.bonus-result-card__rate {
	margin-block: 0.45rem 0.8rem !important;
	color: var(--text-secondary);
}

.bonus-result-card__rate strong {
	color: var(--brand-primary-dark);
	font-size: 1.35rem;
}

.bonus-result-card dl {
	display: grid;
	gap: 0.45rem;
}

.bonus-result-card dl div {
	display: flex;
	justify-content: space-between;
	gap: 0.7rem;
	padding-block-end: 0.4rem;
	border-block-end: 1px solid rgb(17 67 111 / 12%);
}

.bonus-result-card dt {
	color: var(--text-secondary);
}

.bonus-result-card dd {
	margin: 0;
	color: var(--brand-navy);
	font-weight: 900;
}

.bonus-result-card__extra {
	margin-block-start: 0.75rem !important;
	padding: 0.55rem 0.7rem;
	border-radius: 0.6rem;
	background: #ffefc8;
	color: #805100 !important;
	font-weight: 800;
}

.bonus-result-card__unavailable {
	margin-block-start: 0.65rem !important;
}

.bonus-calculator__notice {
	grid-column: 1 / -1;
	font-size: 0.82rem;
}

.bonus-calculator__cta {
	grid-column: 1 / -1;
	justify-self: start;
}

.comparison-grid {
	position: relative;
	gap: 1rem;
}

.comparison-card {
	position: relative;
	border: 1px solid rgb(255 255 255 / 14%);
	background: linear-gradient(155deg, rgb(255 255 255 / 98%), rgb(242 247 253 / 98%));
	overflow: hidden;
}

.comparison-card::before {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 0.35rem;
	background: #159b69;
	content: "";
}

.comparison-card--casino::before {
	background: #e89b13;
}

.comparison-card__icon {
	display: inline-grid;
	width: 3rem;
	height: 3rem;
	place-items: center;
	border-radius: 50%;
	background: #e6f7ef;
	color: #117651;
}

.comparison-card--casino .comparison-card__icon {
	background: #fff1d3;
	color: #a86400;
}

.comparison-card__rate {
	margin: 0 0 1rem;
	color: var(--text-secondary);
}

.comparison-card__rate strong {
	color: var(--brand-primary-dark);
	font-size: clamp(2rem, 5vw, 3rem);
}

.comparison-card__benefits {
	display: grid;
	gap: 0.7rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.comparison-card__benefits li {
	position: relative;
	padding-inline-start: 1.55rem;
	color: var(--text-secondary);
}

.comparison-card__benefits li::before {
	position: absolute;
	inset-inline-start: 0;
	color: #159b69;
	font-weight: 900;
	content: "✓";
}

.comparison-card--casino .comparison-card__benefits li::before {
	color: #d48600;
}

.comparison-card__extra {
	font-weight: 900;
}

.comparison-card__details {
	display: grid;
	gap: 0 !important;
	margin-block-start: 1rem !important;
}

.game-card__body {
	display: flex;
	min-height: 12.5rem;
	flex-direction: column;
}

.game-card__cta {
	align-self: flex-start;
	margin-block-start: auto;
	text-decoration: none;
}

.faq-layout--full {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	max-width: 64rem;
}

.faq-layout--full .section-heading {
	max-width: 52rem;
}

.faq-layout--full .faq-list {
	width: 100%;
}

@media (min-width: 40rem) {
	.bonus-calculator__amount-row,
	.bonus-calculator__results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.payment-option-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.payment-option-card--bank {
		grid-column: 1 / -1;
	}

	.payment-flow-comparison {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 48rem) {
	.hero-composition > .hero-device:first-child,
	.hero-device {
		width: 15.75rem;
	}

	.app-showcase {
		grid-template-columns: minmax(0, 0.95fr) minmax(19rem, 1.05fr);
	}
}

@media (min-width: 64rem) {
	.hero-composition > .hero-device:first-child,
	.hero-device {
		width: 17.25rem;
	}

	.information-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

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

	.payment-option-card--bank {
		grid-column: auto;
	}

	.faq-layout--full {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}
}

@media (max-width: 47.99rem) {
	.home-hero__visual,
	.hero-composition {
		min-height: 22rem;
	}

	.hero-composition > .hero-device:first-child,
	.hero-device {
		width: clamp(12.25rem, 52vw, 14.25rem);
	}

	.information-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.app-showcase {
		min-height: 0;
		padding-block-end: 0;
	}

	.app-showcase__actions {
		flex-direction: column;
	}

	.app-showcase__actions .button {
		width: 100%;
	}

	.app-showcase__visual {
		min-height: 20rem;
	}

	.app-showcase__device {
		inset-block-end: -1.25rem;
		width: min(65%, 14rem);
	}

	.bonus-calculator__selected {
		min-height: 2.8rem;
	}

	.comparison-grid__vs {
		margin-block: -0.35rem;
	}
}

/* Phase 5.4: focused conversion, single-image media, and calculator balance. */
.hero-composition {
	display: flex;
	width: min(100%, 30rem);
	min-height: 0;
	align-items: flex-end;
	justify-content: center;
	margin: 0;
}

.home-hero__phone-image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 31rem;
	object-fit: contain;
	object-position: center bottom;
	filter: drop-shadow(0 1.5rem 1.75rem rgb(0 18 48 / 38%));
}

.calculator-shell.calculator-shell--bonus {
	width: min(100%, 62rem);
	max-width: 62rem;
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
	gap: clamp(1.35rem, 3vw, 2.25rem);
	margin-inline: auto;
	padding: clamp(1.5rem, 4vw, 2.75rem);
}

.bonus-calculator__heading {
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
}

.bonus-calculator__form {
	width: 100%;
	padding: clamp(1.1rem, 3vw, 2rem);
}

.bonus-calculator__range input[type="range"] {
	width: 100%;
}

.bonus-calculator__results {
	align-items: stretch;
}

.bonus-result-card {
	display: flex;
	height: 100%;
	flex-direction: column;
}

.bonus-result-card dl {
	margin-block-start: auto;
}

.app-showcase--text-only {
	max-width: 58rem;
	grid-template-columns: minmax(0, 1fr);
	margin-inline: auto;
}

.app-showcase__visual {
	display: grid;
	place-items: end center;
}

.app-showcase__device {
	position: relative;
	inset: auto;
	width: min(90%, 25rem);
	align-self: end;
	margin: 0;
	transform: none;
}

[dir="rtl"] .app-showcase__device {
	transform: none;
}

.comparison-grid__conclusion {
	max-width: 54rem;
	margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
	color: #dbeaff;
	font-size: 1rem;
	line-height: 1.85;
	text-align: center;
}

@media (max-width: 47.99rem) {
	.home-hero__visual {
		min-height: 20rem;
	}

	.hero-composition {
		width: min(100%, 22rem);
		min-height: 0;
	}

	.home-hero__phone-image {
		max-height: 22rem;
	}

	.calculator-shell.calculator-shell--bonus {
		padding: 1.15rem;
	}

	.bonus-calculator__form {
		padding: 1rem;
	}

	.app-showcase__device {
		inset: auto;
		width: min(82%, 18rem);
	}
}

/* Promo store: deterministic multi-code presentation within the existing system. */
.promo-store {
	background: var(--surface-blue);
}

.promo-grid.promo-grid--store {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: none;
	gap: 1rem;
}

.promo-grid--store .promo-card {
	--promo-accent: var(--brand-primary);
	display: flex;
	min-width: 0;
	min-height: 17rem;
	align-items: stretch;
	flex-direction: column;
	justify-content: space-between;
	padding: 1.35rem;
	border: 1px solid #d4e4f7;
	border-block-start: 0.3rem solid var(--promo-accent);
	background: linear-gradient(155deg, var(--surface) 0%, #f5f9ff 100%);
	box-shadow: 0 1rem 2.25rem rgb(8 74 155 / 12%);
	color: var(--text-primary);
	backdrop-filter: none;
}

.promo-grid--store .promo-card--secondary {
	--promo-accent: var(--brand-primary-dark);
}

.promo-grid--store .promo-card--highlight {
	--promo-accent: var(--brand-accent);
}

.promo-grid--store .promo-card--soft {
	--promo-accent: #61a8ee;
}

.promo-grid--store .promo-card__code {
	color: var(--promo-accent);
	font-size: clamp(1.45rem, 2.3vw, 2rem);
}

.promo-grid--store .promo-card__audience,
.promo-grid--store .promo-card__content > p {
	color: var(--text-secondary);
}

.promo-grid--store .promo-card__audience {
	display: inline-flex;
	margin-block-start: 0.35rem;
	padding: 0.3rem 0.65rem;
	border-radius: 999px;
	background: #e8f2ff;
	color: var(--brand-primary-dark);
	font-weight: 800;
}

.promo-grid--store .promo-card--highlight .promo-card__audience {
	background: #fff3ce;
	color: #735300;
}

.promo-grid--store .promo-card__content > p:not(.promo-card__audience) {
	margin-block-start: 0.75rem;
}

.promo-grid--store .promo-card__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-block-start: 1.15rem;
}

.promo-grid--store .promo-card__actions .button {
	width: 100%;
	min-width: 0;
	padding-inline: 0.7rem;
}

.promo-grid--store .promo-card__copy {
	border: 1px solid #c9dcf4;
	background: #edf5ff;
	color: var(--brand-primary-dark);
}

.promo-grid--store.promo-grid--single {
	grid-template-columns: minmax(0, 26rem);
	justify-content: center;
}

.promo-store__note {
	margin: 1.25rem auto 0;
	color: var(--text-secondary);
	font-weight: 700;
	text-align: center;
}

@media (max-width: 63.99rem) {
	.promo-grid.promo-grid--store {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 39.99rem) {
	.promo-grid.promo-grid--store,
	.promo-grid.promo-grid--store.promo-grid--single {
		grid-template-columns: minmax(0, 1fr);
	}

	.promo-grid--store .promo-card {
		min-height: 0;
	}
}