/* Hero: dark stage with blue "underwater" glows, big bold H1, bonus as a pill. */

body .v6-heroscreen,
body .v1-heroscreen {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(900px 420px at 88% 10%, rgba(97, 198, 255, .20), rgba(97, 198, 255, 0) 70%),
		radial-gradient(700px 380px at 8% 100%, rgba(22, 216, 181, .14), rgba(22, 216, 181, 0) 70%),
		linear-gradient(180deg, #121821 0%, #111111 100%) !important;
	border-bottom: 1px solid var(--cg-line);
}

body .v6-heroscreen::after {
	content: "";
	position: absolute;
	right: -60px;
	top: -60px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	border: 2px solid rgba(97, 198, 255, .12);
	box-shadow: inset 0 0 0 26px rgba(97, 198, 255, .03);
	pointer-events: none;
}

body .v6-heroscreen .container {
	position: relative;
	z-index: 1;
}

body .v6-heroscreen__info-title {
	font-weight: 900;
	font-size: clamp(30px, 4.2vw, 50px);
	line-height: 1.08;
	letter-spacing: -.02em;
	color: #ffffff;
}

body .v6-heroscreen__info-description {
	font-size: 16px;
	line-height: 1.65;
	color: #d3d3d3;
	max-width: 860px;
}

body .v6-heroscreen__info-description a {
	color: var(--cg-sky);
	font-weight: 700;
}

/* bonus line under the intro */
body .v6-heroscreen .v6-bonus {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 22px;
	border-radius: var(--cg-radius);
	background: rgba(97, 198, 255, .08);
	border: 1px solid rgba(97, 198, 255, .35);
}

body .v6-heroscreen .v6-bonus__img {
	background: var(--cg-grad) !important;
	border-radius: 50%;
}

body .v6-heroscreen .v6-bonus__img svg,
body .v6-heroscreen .v6-bonus__img svg path {
	fill: #000;
}

body .v6-heroscreen .v6-bonus__title {
	font-weight: 900;
	color: var(--cg-green) !important;
	font-size: clamp(18px, 2vw, 24px);
}

body .v6-heroscreen__info-buttons .vAll-meta-button_hero {
	min-height: 58px;
	padding-left: 22px !important;
	padding-right: 22px !important;
}

/* second hero button white, like Login on the reference */
body .v6-heroscreen__info-buttons .vAll-meta-button_hero + .vAll-meta-button_hero {
	background: #ffffff !important;
	box-shadow: none;
}

/* breadcrumbs */
body .v6-breadcrumbs__item-link {
	font-weight: 600;
}

body .v6-breadcrumbs a.v6-breadcrumbs__item-link {
	color: var(--cg-sky) !important;
}

/* rating stars in hero */
body .v6-heroscreen .icon-star,
body .v6-heroscreen .icon-star-2 {
	color: #ffc93c;
}

/* bonus calculator */
body .v6-calculator {
	border-radius: var(--cg-radius);
	border: 1px solid rgba(97, 198, 255, .3);
	background: rgba(17, 17, 17, .85) !important;
	box-shadow: var(--cg-shadow);
}

body .v6-heroscreen .v6-bonus__img {
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}

body .v6-heroscreen .v6-bonus__img svg {
	position: relative;
	z-index: 1;
}

/* mainscreen (/app/) renders as v1-heroscreen with two cards */
body .v1-heroscreen__card {
	background: rgba(17, 17, 17, .88) !important;
	border: 1px solid var(--cg-line);
	border-radius: var(--cg-radius) !important;
	box-shadow: var(--cg-shadow);
}

body .v1-heroscreen h1 {
	font-weight: 900;
	letter-spacing: -.02em;
}

body .v1-breadcrumbs a {
	color: var(--cg-sky) !important;
}
