/* ===== WADE X BROWSER-FOR-1000-ACCOUNTS BANNER (AB2) ===== */

.banner-carousel {
	max-width: 100%;
	width: 100%;
	min-height: 350px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	background-color: #0a0a10;
	background-image: url('/images/banner-ab2/bg.svg');
	background-repeat: repeat;
	background-position: center -288px;
	background-size: 1760px 1040px;
	border: 1px solid rgba(0, 212, 255, 0.1);
	box-shadow:
		inset 0 0 3px rgba(0, 212, 255, 0.08),
		inset 0 4px 62px rgba(0, 212, 255, 0.25);
}

.bannerab2 {
	--color-bg: #0a0a10;
	--color-accent: #00cffa;
	--color-title: #f0f8ff;
	--color-text: #ffffff;

	position: relative;
	width: 100%;
	max-width: 1440px;
	min-height: 350px;
	margin: 0 auto;
	overflow: hidden;
	isolation: isolate;
	font-family: 'Golos Text', sans-serif;
}

.bannerab2__hit {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.bannerab2__wolf {
	position: absolute;
	z-index: 0;
	top: -70px;
	right: clamp(24px, 5.7vw, 82px);
	width: 350px;
	height: 430px;
	max-width: none;
	object-fit: contain;
	opacity: 0.09;
	pointer-events: none;
}

.bannerab2__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: min(62vw, 870px);
	padding-top: 30px;
	margin-left: clamp(48px, 9.3vw, 135px);
}

.bannerab2__title {
	color: var(--color-title);
	font-size: 64px;
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: 1.28px;
	white-space: nowrap;
	transform: scaleX(1.04);
	transform-origin: left center;
}

.bannerab2__features {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 17px;
	color: var(--color-text);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1;
	white-space: nowrap;
}

.bannerab2__feature {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bannerab2__dot {
	flex: 0 0 5px;
	width: 5px;
	height: 5px;
	background: var(--color-text);
}

.bannerab2__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 315px;
	margin-top: 35px;
	padding: 23px 27px;
	border: none;
	border-radius: 12px;
	background: var(--color-accent);
	color: #000;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1.76px;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition:
		filter 0.15s ease,
		transform 0.15s ease;
}

.bannerab2__btn:hover {
	text-decoration: none;
	color: #000;
	filter: brightness(1.08);
}

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

.bannerab2__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.bannerab2__btn-arrow {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
}

.bannerab2__promo {
	display: flex;
	align-items: baseline;
	gap: 7px;
	margin-top: 16px;
	white-space: nowrap;
}

.bannerab2__promo-label {
	color: var(--color-title);
	font-size: 14px;
	font-weight: 400;
	opacity: 0.5;
}

.bannerab2__promo-code {
	color: var(--color-accent);
	font-size: 18px;
	font-weight: 600;
}

.bannerab2__arc {
	position: absolute;
	z-index: 1;
	top: 0;
	left: clamp(650px, 63.8vw, 919px);
	width: 628px;
	height: 350px;
	pointer-events: none;
}

.bannerab2__arc-line {
	position: absolute;
	top: -116px;
	left: 46px;
	width: 582px;
	height: 582px;
	max-width: none;
}

.bannerab2__tag {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8.66px 12.99px;
	overflow: hidden;
	border-radius: 60.606px;
	background-color: transparent;
	background-image: url('/images/banner-ab2/tag.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	background-origin: border-box;
	background-clip: border-box;
	box-shadow:
		inset 0 0 0 0.866px var(--color-accent),
		inset 0 3.463px 12.121px rgba(0, 207, 250, 0.25);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--color-accent);
	font-family: 'IBM Plex Mono', monospace;
	font-size: 15.58px;
	font-weight: 500;
	letter-spacing: 0.866px;
	line-height: 1;
	white-space: nowrap;
}

.bannerab2__tag--1 {
	left: 76px;
	top: 22px;
}
.bannerab2__tag--2 {
	left: 28px;
	top: 87px;
}
.bannerab2__tag--3 {
	left: 0;
	top: 155px;
}
.bannerab2__tag--4 {
	left: 9px;
	top: 225px;
}
.bannerab2__tag--5 {
	left: 50px;
	top: 292px;
}

/*
 * At narrower widths the layout changes instead of scaling down.
 * This keeps all text at its designed size and prevents collisions.
 */
@media (max-width: 1050px) {
	.banner-carousel,
	.bannerab2 {
		/*
		 * Keep enough space below the responsive arc for the centered SMM tag.
		 * At the widest tablet layout the circle ends around 625px, while the
		 * tag extends another 16px below its lowest point.
		 */
		min-height: clamp(583px, calc(502px + 13.55vw), 645px);
	}

	.bannerab2__content {
		width: auto;
		margin: 0;
		padding: 30px 20px 0;
	}

	.bannerab2__title {
		font-size: 36px;
		line-height: 1.1;
		letter-spacing: 0.72px;
	}

	.bannerab2__features {
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 12px;
		margin-top: 19px;
		font-size: 14px;
		opacity: 0.7;
	}

	.bannerab2__btn {
		width: 100%;
		margin-top: 39px;
	}

	.bannerab2__promo {
		margin-top: 12px;
	}

	.bannerab2__arc {
		--arc-size: clamp(582px, calc(100vw - 40px), 1010px);
		--tag-row-start: 84.9%;
		top: clamp(-385px, calc(140px - 50vw), -171px);
		left: 50%;
		width: var(--arc-size);
		height: var(--arc-size);
		transform: translateX(-50%);
	}

	.bannerab2__arc-line {
		inset: 0;
		width: 100%;
		height: 100%;
		transform: rotate(-90deg);
	}

	.bannerab2__wolf {
		top: 352px;
		right: 50%;
		width: 310px;
		height: 350px;
		transform: translateX(50%);
	}

	.bannerab2__tag {
		height: 21px;
		min-height: 0;
		max-width: calc(50vw - 16px);
		padding: 0 10px;
		font-size: 12px;
		letter-spacing: 0.8658px;
		line-height: 1;
		text-align: center;
		white-space: nowrap;
	}

	.bannerab2__tag--1 {
		left: 22%;
		top: var(--tag-row-start);
		transform: translateX(-50%);
	}
	.bannerab2__tag--2 {
		left: 33.5%;
		top: calc(var(--tag-row-start) + 57px);
		/* Preserve a visible gap between this tag and the centered SMM tag. */
		transform: translateX(calc(-50% - 18px));
	}
	.bannerab2__tag--3 {
		left: 50%;
		/* Keep SMM centered on the circle's lowest point at every arc size. */
		top: calc(100% - 10.5px);
		transform: translateX(-50%);
	}
	.bannerab2__tag--4 {
		left: 65.8%;
		top: calc(var(--tag-row-start) + 57px);
		/* Preserve a visible gap between this tag and the centered SMM tag. */
		transform: translateX(calc(-50% + 18px));
	}
	.bannerab2__tag--5 {
		top: var(--tag-row-start);
		left: 78%;
		transform: translateX(-50%);
	}
}

@media (min-width: 786px) and (max-width: 1050px) {
	.bannerab2__arc {
		/*
		 * Widen the circle on tablet layouts to spread the lower tags farther
		 * away from SMM. Moving it up by the same 160px keeps its lowest point
		 * and the overall section height unchanged.
		 */
		--arc-size: calc(100vw + 120px);
		--inner-tag-x: 205px;
		--outer-tag-bottom: 150px;
		--outer-tag-x: 346px;
		top: calc(-20px - 50vw);
	}

	.bannerab2__arc .bannerab2__tag {
		top: auto;
		left: 50%;
	}

	.bannerab2__arc .bannerab2__tag--1 {
		bottom: var(--outer-tag-bottom);
		transform: translateX(calc(-50% - var(--outer-tag-x)));
	}

	.bannerab2__arc .bannerab2__tag--2 {
		bottom: 48px;
		transform: translateX(calc(-50% - var(--inner-tag-x)));
	}

	.bannerab2__arc .bannerab2__tag--3 {
		bottom: -10.5px;
		transform: translateX(-50%);
	}

	.bannerab2__arc .bannerab2__tag--4 {
		bottom: 48px;
		transform: translateX(calc(-50% + var(--inner-tag-x)));
	}

	.bannerab2__arc .bannerab2__tag--5 {
		bottom: var(--outer-tag-bottom);
		transform: translateX(calc(-50% + var(--outer-tag-x)));
	}
}

@media (min-width: 850px) and (max-width: 899px) {
	.bannerab2__arc {
		--inner-tag-x: 214px;
		--outer-tag-bottom: 177px;
		--outer-tag-x: 375px;
	}
}

@media (min-width: 900px) and (max-width: 949px) {
	.bannerab2__arc {
		--inner-tag-x: 220px;
		--outer-tag-bottom: 180px;
		--outer-tag-x: 395px;
	}
}

@media (min-width: 950px) and (max-width: 999px) {
	.bannerab2__arc {
		--inner-tag-x: 226px;
		--outer-tag-bottom: 180px;
		--outer-tag-x: 407px;
	}
}

@media (min-width: 1000px) and (max-width: 1050px) {
	.bannerab2__arc {
		--inner-tag-x: 232px;
		--outer-tag-bottom: 180px;
		--outer-tag-x: 417px;
	}
}

@media (max-width: 749px) {
	.bannerab2__arc {
		/*
		 * Ease the circle 0–30px toward the bottom as the layout approaches
		 * mobile, without changing the tags' positions on the arc.
		 */
		--arc-size: clamp(642px, calc(100vw + 20px), 769px);
		transform: translate(-50%, clamp(0px, calc(175.78px - 23.4375vw), 30px));
	}
}

@media (min-width: 750px) and (max-width: 785px) {
	.bannerab2__arc {
		/*
		 * Taper the mobile circle enlargement back to the tablet geometry so
		 * the transition at 786px stays visually continuous.
		 */
		--arc-size: calc(1234.6px - 62.16vw);
	}
}

@media (max-width: 622px) {
	.bannerab2__arc .bannerab2__tag--1 {
		top: calc(var(--tag-row-start) + 10px);
		left: calc(321px - 50vw);
		transform: none;
	}

	.bannerab2__arc .bannerab2__tag--5 {
		top: calc(var(--tag-row-start) + 10px);
		right: calc(321px - 50vw);
		left: auto;
		transform: none;
	}
}

@media (max-width: 480px) {
	.bannerab2__title {
		white-space: nowrap;
	}
}

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

	.bannerab2__title {
		font-size: 32px;
		letter-spacing: 0.4px;
	}

	.bannerab2__features {
		font-size: 13px;
		letter-spacing: 0.65px;
	}

	.bannerab2__btn {
		padding-inline: 12px;
		font-size: 14px;
		letter-spacing: 1.35px;
	}
}