/* ===== WADE X BROWSER-FOR-1000-ACCOUNTS BANNER (AB5) =====
   Design reference: 1440 x 350 Figma frame.
   Successor of bannerAB4 — same copy (banner.bigbanner.* i18n keys),
   new composition: dark navy plate, gradient artwork, rotated tag cluster. */

.banner-carousel {
	max-width: 100%;
	width: 100%;
	margin: 0 auto;
	position: relative;
	/* Clips the full-bleed artwork, which is wider and taller than the plate. */
	overflow: hidden;
	background: #07081e;
	/* The blend group lives here, not on .bannerab5: the artwork now sticks out
	   past the 1440 plate, and its `lighten` blend has to see the same base
	   colour on the overhanging sides as it does in the middle. */
	isolation: isolate;
}

.bannerab5 {
	--color-bg: #07081e;
	--color-title: #f0f8ff;
	--color-white: #ffffff;
	--accent-from: #de6b27;
	--accent-to: #ff7700;

	/* Button fill */
	--gradient-btn: linear-gradient(
		134.231deg,
		var(--accent-from) 0%,
		var(--accent-to) 100%
	);
	/* Promo code text */
	--gradient-promo: linear-gradient(
		144.966deg,
		var(--accent-from) 0%,
		var(--accent-to) 100%
	);
	/* "1,000+" in the title */
	--gradient-title: linear-gradient(
		90deg,
		var(--accent-from) 0%,
		#be340d 43.75%
	);

	/* Layout unit: 1% of the banner width, i.e. px / 14.4 at the 1440 baseline.
	   The @supports block below upgrades it to a real container query unit; the
	   vw-based value is the fallback for browsers without container queries and
	   is exact as long as the banner spans the viewport (it does — the carousel
	   is full-bleed and the plate is only capped at 1440). Never use var(--u)
	   on .bannerab5 itself: container units resolve against the *nearest
	   ancestor* container there, not against this element. */
	--u: min(1vw, 14.4px);

	position: relative;
	display: block;
	width: 100%;
	/* The content composition stays capped at 1440 — it is positioned in --u
	   units, so letting it grow with the viewport would blow the type up. The
	   artwork is deliberately let out of this box (see .bannerab5__bg) and is
	   clipped by .banner-carousel instead, hence no overflow/isolation here. */
	max-width: 1440px;
	margin: 0 auto;
	aspect-ratio: 1440 / 350;
	background-color: var(--color-bg);
	font-family: 'Inter', sans-serif;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

@supports (container-type: inline-size) {
	.bannerab5 {
		container-type: inline-size;
		--u: 1cqw;
	}
}

/* The whole banner is one link, so nothing inside it may re-style itself as one. */
.bannerab5:hover,
.bannerab5:focus,
.bannerab5:active {
	color: inherit;
	text-decoration: none;
}

.bannerab5:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/* The element itself is in the list on purpose: below 1100px the padding moves
   onto .bannerab5, and without border-box it would blow the banner 40px past
   its parent. */
.bannerab5,
.bannerab5 *,
.bannerab5 *::before,
.bannerab5 *::after {
	box-sizing: border-box;
}

/* Background art — bg.webp (1440x465) laid over the base colour.
   Taller than the frame, pinned to the top; `lighten` blend keeps
   only the brighter gradient pixels over the dark navy base. */
.bannerab5__bg {
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 0;
	/* Full-bleed: the art runs edge to edge even though the plate stops at
	   1440, so wide screens get artwork instead of flat navy margins. Aspect
	   ratio is kept (height: auto) — the extra height is cropped by the
	   carousel, same as the 465 -> 350 crop at the 1440 baseline. */
	width: 100vw;
	max-width: none;
	height: auto;
	transform: translateX(-50%);
	mix-blend-mode: lighten;
	pointer-events: none;
}

/* ---------- Title ---------- */
.bannerab5__title {
	position: absolute;
	z-index: 1;
	left: calc(var(--u) * 4.8611); /* 70px */
	top: calc(var(--u) * 2.0833); /* 30px */
	width: calc(var(--u) * 58.8194); /* 847px */
	margin: 0;
	padding: 0;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: calc(var(--u) * 5.5556); /* 80px */
	line-height: 1.1;
	letter-spacing: calc(var(--u) * -0.1111); /* -1.6px */
	color: var(--color-title);
	text-transform: none;
}

.bannerab5__title-accent {
	background: var(--gradient-title);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.bannerab5__title-white {
	color: var(--color-white);
}

/* ---------- Subtitle ---------- */
.bannerab5__subtitle {
	position: absolute;
	z-index: 1;
	left: calc(var(--u) * 4.8611); /* 70px */
	top: calc(var(--u) * 16.3889); /* 236px */
	width: calc(var(--u) * 51.0417); /* 735px */
	height: 2.6em;
	margin: 0;
	padding: 0;
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-weight: 400;
	font-size: calc(var(--u) * 2.2222); /* 32px */
	line-height: 1.3;
	letter-spacing: calc(var(--u) * 0.0444); /* 0.64px */
	color: rgba(255, 255, 255, 0.7);
}

/* ---------- Tag cluster (rotated -46.05deg) ---------- */
.bannerab5__tags {
	position: absolute;
	z-index: 1;
	left: calc(var(--u) * 55.5556); /* 800px */
	/* Keep the rotated cluster inside the banner. Translated labels can be
	   noticeably longer than the Russian copy and otherwise get clipped by
	   the banner's top edge. */
	top: 0;
	width: calc(var(--u) * 24.2849); /* 349.702px */
	height: calc(var(--u) * 24.9118); /* 358.73px */
	display: flex;
	align-items: center;
	justify-content: center;
}

.bannerab5__tags-rotor {
	transform: rotate(-46.05deg);
	display: flex;
	flex-direction: column;
	gap: calc(var(--u) * 1.1623); /* 16.737px — between the two rows */
}

.bannerab5__tags-row {
	display: flex;
	gap: calc(var(--u) * 1.1623); /* 16.737px — between tags in a row */
}

.bannerab5__tag {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8.47px 15.05px;
	position: relative;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 20px;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		inset 0 -1px 0 rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(50px);
	backdrop-filter: blur(50px);
	font-weight: 500;
	font-size: calc(var(--u) * 0.9149); /* 13.174px */
	line-height: 1;
	color: var(--color-white);
	white-space: nowrap;
}

.bannerab5__tag::before {
	content: '';
	position: absolute;
	pointer-events: none;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.8),
		transparent
	);
}

.bannerab5__tag::after {
	content: '';
	position: absolute;
	pointer-events: none;
	top: 0;
	left: 0;
	width: 1px;
	height: 100%;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.8),
		transparent,
		rgba(255, 255, 255, 0.3)
	);
}

/* ---------- Promo line ---------- */
.bannerab5__promo {
	position: absolute;
	z-index: 2;
	left: calc(var(--u) * 71.875); /* 1035px */
	top: calc(var(--u) * 14.5833); /* 210px */
	margin: 0;
	padding: 0;
	display: flex;
	align-items: baseline;
	gap: calc(var(--u) * 0.4861); /* 7px */
	white-space: nowrap;
}

.bannerab5__promo-label {
	font-family: 'Golos Text', 'Inter', sans-serif;
	font-weight: 400;
	font-size: calc(var(--u) * 0.9722); /* 14px */
	line-height: 1;
	color: var(--color-title);
	opacity: 0.5;
}

/* The one clickable thing inside the link: its handler copies the code and
   stops the click from reaching the banner's href (see bannerAB5.html.ep). */
.bannerab5__promo-offer {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--u) * 0.4167); /* 6px */
	cursor: copy;
}

.bannerab5__promo-code {
	font-family: 'Golos Text', 'Inter', sans-serif;
	font-weight: 600;
	font-size: calc(var(--u) * 1.25); /* 18px */
	line-height: 1;
	background: var(--gradient-promo);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.bannerab5__promo-copy {
	flex-shrink: 0;
	width: calc(var(--u) * 0.8333); /* 12px */
	height: calc(var(--u) * 0.8333);
	color: var(--accent-to);
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

.bannerab5__promo-offer:hover .bannerab5__promo-copy {
	opacity: 1;
}

.bannerab5__promo-offer.is-copied .bannerab5__promo-copy {
	color: #34c759;
	opacity: 1;
}

/* ---------- CTA button ---------- */
.bannerab5__btn {
	position: absolute;
	z-index: 1;
	left: calc(var(--u) * 71.875); /* 1035px */
	top: calc(var(--u) * 16.9444); /* 244px */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--u) * 0.4229); /* 6.09px */
	width: calc(var(--u) * 23.2639); /* 335px */
	height: calc(var(--u) * 5.244); /* 75.513px */
	border: 0;
	border-radius: calc(var(--u) * 0.5556); /* 8px */
	background: var(--gradient-btn);
	color: var(--color-white);
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: calc(var(--u) * 1.1841); /* 17.051px */
	letter-spacing: calc(var(--u) * 0.0355); /* 0.5115px */
	white-space: nowrap;
	box-shadow:
		0 0 calc(var(--u) * 4.229) rgba(227, 109, 33, 0.21), /* 0 0 60.897px */
		0 calc(var(--u) * 0.3383) calc(var(--u) * 2.0299) rgba(0, 0, 0, 0.3); /* 0 4.872px 29.231px */
	transition:
		filter 0.15s ease,
		transform 0.15s ease;
}

.bannerab5:hover .bannerab5__btn {
	filter: brightness(1.06);
}

.bannerab5:active .bannerab5__btn {
	transform: translateY(1px);
}

.bannerab5__btn-arrow {
	flex-shrink: 0;
	width: calc(var(--u) * 1.3533); /* 19.487px */
	height: calc(var(--u) * 1.3533);
}

/* ============================================================
   TABLET + MOBILE — content-driven stacked layout

   The desktop composition is intentionally dense. Below 1100px
   it no longer scales down as one picture: elements enter normal
   flow, typography keeps readable minimums and the section grows
   with its content. This prevents clipping and tiny text at all
   intermediate widths.
   ============================================================ */
@media (max-width: 1100px) {
	.bannerab5 {
		container-type: normal;
		width: 100%;
		aspect-ratio: auto;
		min-height: 455px;
		padding: clamp(30px, 5vw, 52px) clamp(20px, 6vw, 64px)
			clamp(100px, 14vw, 150px);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		overflow: hidden;
	}

	/* The artwork covers the whole content-driven section — no full-bleed
	   trick needed here, the plate already spans the full width. */
	.bannerab5__bg {
		inset: 0;
		width: 100%;
		height: 100%;
		transform: none;
		object-fit: cover;
		object-position: center;
	}

	/* ---------- Title ---------- */
	.bannerab5__title {
		position: static;
		width: 100%;
		max-width: 850px;
		font-size: clamp(32px, 6.2vw, 64px);
		line-height: 1.3;
		letter-spacing: -0.02em;
	}

	/* ---------- Subtitle ---------- */
	.bannerab5__subtitle {
		position: static;
		width: 100%;
		max-width: 550px;
		height: 3.2em;
		margin-top: clamp(15px, 2.4vw, 24px);
		font-size: clamp(14px, 2.3vw, 24px);
		line-height: 1.6;
		letter-spacing: 0.02em;
	}

	/* ---------- Tags (two flat rows, no rotation) ---------- */
	.bannerab5__tags {
		position: static;
		width: 100%;
		height: auto;
		margin-top: clamp(11px, 2.2vw, 22px);
		display: block;
	}

	.bannerab5__tags-rotor {
		transform: none;
		gap: 8px;
		align-items: flex-start;
	}

	.bannerab5__tags-row {
		flex-wrap: wrap;
		gap: 8px;
	}

	.bannerab5__tag {
		font-size: clamp(12px, 1.6vw, 15px);
	}

	/* ---------- Promo line ---------- */
	.bannerab5__promo {
		position: static;
		margin-top: clamp(25px, 4vw, 38px);
		gap: 7px;
	}

	.bannerab5__promo-label {
		font-size: clamp(14px, 1.8vw, 16px);
	}

	.bannerab5__promo-offer {
		gap: 6px;
	}

	.bannerab5__promo-code {
		font-size: clamp(16px, 2vw, 19px);
	}

	.bannerab5__promo-copy {
		width: 13px;
		height: 13px;
	}

	/* ---------- CTA button ---------- */
	.bannerab5__btn {
		position: static;
		width: min(100%, 420px);
		max-width: 100%;
		min-width: 0;
		height: clamp(59px, 7.5vw, 72px);
		margin-top: 12px;
		gap: 6.09px;
		border-radius: 8px;
		font-size: clamp(14px, 1.9vw, 17px);
		letter-spacing: 0.42px;
		background: linear-gradient(
			142.469deg,
			var(--accent-from) 0%,
			var(--accent-to) 100%
		);
		box-shadow:
			0 0 60.897px rgba(227, 109, 33, 0.21),
			0 4.872px 29.231px rgba(0, 0, 0, 0.3);
	}

	.bannerab5__btn-arrow {
		width: 19.487px;
		height: 19.487px;
	}
}

/* Exact mobile endpoint from Figma (390 x 455), while remaining
   content-safe on narrower phones and with larger user text. */
@media (max-width: 768px) {
	.bannerab5 {
		padding: 30px 20px 100px;
	}

	.bannerab5__title {
		font-size: 32px;
		letter-spacing: -0.64px;
	}

	.bannerab5__subtitle {
		margin-top: 15px;
		max-width: 315px;
		font-size: 14px;
		letter-spacing: 0.28px;
	}

	.bannerab5__tags {
		margin-top: 12px;
	}

	.bannerab5__tag {
		font-size: 12px;
	}

	.bannerab5__promo {
		margin-top: 25px;
	}

	.bannerab5__promo-label {
		font-size: 14px;
	}

	.bannerab5__promo-code {
		font-size: 16px;
	}

	.bannerab5__btn {
		width: 100%;
		height: 59px;
		font-size: 14px;
	}

	.bannerab5__btn,
	.bannerab5__promo,
	.bannerab5__tags,
	.bannerab5__title,
	.bannerab5__subtitle {
		flex-shrink: 0;
	}
}

@media (max-width: 360px) {
	.bannerab5 {
		padding-inline: 16px;
	}

	.bannerab5__title {
		font-size: clamp(28px, 8.9vw, 32px);
	}
}