

.hero-section {
	position: relative;
	
	aspect-ratio: 1920 / 900;
	overflow: hidden;
	background: transparent;
}


.hero-section__inner {
	position: relative;
	z-index: 2;
	max-width: none;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.hero-section__visual { display: none; }   


.hero-section__content {
	position: absolute;
	left: 208px;
	top: 306px;
	width: 457px;
	display: flex;
	flex-direction: column;
	gap: 0;
}


.hero-section h1 {
	margin: 0;   
	
	font-size: 3.7rem;
	font-weight: 400;
	line-height: 1.25;
	color: #000000;
	opacity: 1;
}


.hero-title__line {
	display: block;
	text-align: justify;
	text-align-last: justify;
}


.hero-section__brand-typo {
	position: absolute;
	left: 208px;   
	top: 185px;   
	width: 490px;   
	max-width: none;
	height: auto;
	z-index: 2;
	opacity: 1;
	user-select: none;
	pointer-events: none;
}


.hero-section__actions {
	position: absolute;
	left: 0;
	top: 268.8px;       
	margin: 0;
}


.hero-section__actions .button--light {
	width: 230px;        
	height: 66px;
	min-height: 0;
	padding-block: 0;
	font-size: 2rem;   
	font-weight: 700;    
	background: #B0C68F;
	color: #161616;
	border-color: #B0C68F;
}


.hero-section__visual {
	position: relative;
	height: 32.5rem;
	overflow: visible;
}





.hero-section__circle {
	position: absolute;
	right: -60px;
	top: 155px;   
	width: 1007px;
	height: 1007px;
	border-radius: 50%;
	background: #B0C68F;   
	z-index: 0;
	pointer-events: none;
}





.hero-arc-nav {
	--arc-width: 1113.6px;   
	--arc-height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	width: var(--arc-width);
	height: var(--arc-height);
	z-index: 3;
	pointer-events: none;
	overflow: hidden;
}


.hero-arc-nav__svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}


.harc-link {
	cursor: pointer;
	pointer-events: all;
}


.harc-link path {
	fill: #898989;
	fill-opacity: 0.2;
	stroke: none;
	transition: fill-opacity 200ms ease;
}

.harc-link:hover path,
.harc-link:focus-visible path,
.harc-link.is-active path {
	fill-opacity: 0.38;
}

.hero-arc-nav__strokes {
	stroke: rgba(255, 255, 255, 0.30);
	stroke-width: 1.5;
	pointer-events: none;
}



.harc-label {
	position: absolute;
	z-index: 4;
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 400;
	color: #FFFFFF;
	white-space: nowrap;
	transition: color 200ms ease;
	pointer-events: auto;
}

.harc-label:hover,
.harc-label:focus-visible,
.harc-label.is-active { color: #000000; }



.harc-label--1 { top: 617px; right: 306px; }   
.harc-label--2 { top: 685px; right: 213px; }   
.harc-label--3 { top: 748px; right: 115px; }   
.harc-label--4 { top: 820px; right: 63px;  }   



.hero-section__badges {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}


.hero-section__badge {
	position: absolute;
	padding: 3.46px 18.24px;   
	color: #ffffff;
	background: rgba(137, 137, 137, 0.02);
	border: none;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-size: 19px;           
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}



.hero-section__badge--1 {
	top: 216px;
	right: 230px;
}

.hero-section__badge--2 {
	top: 396px;
	right: 576px;
}

.hero-section__badge--3 {
	top: 603px;
	right: 653px;
}

