:root{
	--container-spacing:var(--spacing-7);
	--container-spacing-neg:var(--spacing-neg-7);
	--container-width-max:1200px;
	--container-width-text:765px;
	--container-width:clamp(320px, 100%, calc(var(--container-width-max) - calc(var(--container-spacing) * 2)));

	--radius-none:0;
	--radius-xxs:4px;
	--radius-xs:8px;
	--radius-sm:12px;
	--radius-md:24px;
	--radius-lg:32px;
	--radius-xl:64px;
	--radius-rounded:50%;
}
.bg-liquid-glass{
	background-color: rgba(0, 0, 0, .2);
	-webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
	box-shadow:
		inset 2px 2px 1px 0 rgba(255,255,255,.3),
		inset 0 -2px 6px 1px rgba(255,255,255,.3),
		0 4px 8px 0 rgba(0,0,0,.2),
		0 6px 20px 0 rgba(0,0,0,.2);
	transition:
		all .3s cubic-bezier(.2,.9,.3,1.5),
		box-shadow .3s cubic-bezier(.2,.9,.3,1.5),
		backdrop-filter .3s cubic-bezier(.2,.9,.3,1.5),
		transform .4s ease-in-out;
}
@supports not ((hanging-punctuation: first) or (-moz-appearance: none)) {
    .bg-liquid-glass{
		backdrop-filter:url(#displacementFilter) blur(3px);
		-webkit-backdrop-filter:url(#displacementFilter) blur(3px);
    }
}
:root {
  --aurora-scroll: 0px;
}

.bg-aurora {
  position: relative;
  overflow: hidden;
  background-color: rgb(13, 22, 31);
  z-index: 0;
}

.bg-aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, 
      rgba(13, 22, 31, 1) 0%, 
      rgba(27, 46, 64, 1) 35%, 
      rgba(16, 31, 13, 1) 52%, 
      rgba(23, 66, 43, 1) 63%, 
      rgba(21, 37, 54, 1) 84%, 
      rgba(13, 22, 31, 1) 99%
    );
  z-index: -2;
}

.bg-aurora::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  
  background: radial-gradient(
    circle at 50% 50%, 
    rgba(23, 66, 43,.6),
    transparent 70%
  );

  transform: translate3d(0, 0, 0); 
  will-change: transform;
  
  transform: translateY(calc(var(--aurora-scroll) * 0.2));
  animation: auroraSway 6s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes auroraSway {
  0% {
    transform: translateY(calc(var(--aurora-scroll) * 0.2)) scale(1) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(calc(var(--aurora-scroll) * 0.2)) scale(1.2) rotate(5deg);
    opacity: 1;
  }
  100% {
    transform: translateY(calc(var(--aurora-scroll) * 0.2)) scale(1) rotate(0deg);
    opacity: 0.8;
  }
}






.bg-blobs {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.bg-blobs-inner {
	width: 100%;
	height: 100%;
}
.bg-blobs::before, .bg-blobs::after,
.bg-blobs-inner::before, .bg-blobs-inner::after {
	content: '';
	position: absolute;
	background-color: #1f3447;
	border-radius: 50%;
	mix-blend-mode: screen;
	pointer-events: none;
}
.bg-blobs::before {
	top: -10%;
	left: -10%;
	width: 500px;
	height: 500px;
	filter: blur(80px);
	opacity: 0.6;
	animation: float-reverse 5s infinite ease-in-out;
}
.bg-blobs::after {
	bottom: -5%;
	right: -5%;
	width: 600px;
	height: 600px;
	filter: blur(100px);
	opacity: 0.5;
	animation: float 4s infinite ease-in-out;
}
.bg-blobs-inner::before {
	top: 20%;
	right: 30%;
	width: 400px;
	height: 400px;
	mix-blend-mode: overlay;
	filter: blur(60px);
	opacity: 0.4;
	animation: float 2s infinite ease-in-out;
}
.bg-blobs-inner::after {
	bottom: 20%;
	left: 10%;
	width: 300px;
	height: 300px;
	filter: blur(50px);
	opacity: 0.3;
	animation: float-reverse 7s infinite ease-in-out;
}

@keyframes float {
	0% { transform: translate(0px, 0px) scale(1); }
	33% { transform: translate(30px, -50px) scale(1.1); }
	66% { transform: translate(-20px, 20px) scale(0.9); }
	100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes float-reverse {
	0% { transform: translate(0px, 0px) scale(1); }
	33% { transform: translate(-30px, 50px) scale(0.9); }
	66% { transform: translate(20px, -20px) scale(1.1); }
	100% { transform: translate(0px, 0px) scale(1); }
}





*{
	box-sizing:border-box;
	scroll-margin-top:var(--spacing-10)
}
::selection {
	background-color:var(--secondary-default);
	color:var(--text-body-01)
}
body{
	vertical-align:baseline;
	overflow-x:hidden;
	background-color:var(--bg-surface-01);
	/* background: linear-gradient(180deg,rgba(13, 22, 31, 1) 0%, rgba(27, 46, 64, 1) 35%, rgba(16, 31, 13, 1) 52%, rgba(23, 66, 43, 1) 63%, rgba(21, 37, 54, 1) 84%, rgba(13, 22, 31, 1) 99%); */
	margin:0;
	padding:0;
	border:0;
	outline:0 none;
	font:var(--body-m-regular);
	color:var(--text-body-02-inverse);
	position:relative
}
a{
	color:var(--text-link-default);
	text-decoration:none;
	transition:color .4s, background-color .4s
}
a:hover{
	color:var(--text-link-hover)
}
a:active{
	color:var(--text-link-active)
}
a.link{
	color:var(--text-link-default);
	text-decoration:none;
	transition:color .4s, background-color .4s;
	width:fit-content;
	font-weight:var(--font-weight-medium);
	border-bottom:1px solid transparent
}
a.link:hover{
	color:var(--text-link-hover);
	border-color:var(--text-primary-hover)
}
a.link:active{
	color:var(--text-link-active)
}
a.dark{
	color:var(--text-body-02)
}
a.dark:hover{
	color:var(--text-body-01)
}
table{
	border-spacing:0
}
img{
	width:100%;
	max-width:100%;
	height:auto;
	pointer-events:none
}
strong,
th{
	font-weight:inherit;
	text-align:inherit
}
address,
var{
	font-size:inherit;
	font-weight:inherit;
	font-style:inherit;
	display:inline
}
p{
	margin:var(--spacing-4) 0
}
button{
	appearance:none;
	border:0;
	padding:0;
	cursor:pointer;
	font-family:var(--font-primary);
	background:inherit;
	font:inherit;
}
::-webkit-scrollbar{
	width:var(--spacing-1);
	height:var(--spacing-2)
}
body::-webkit-scrollbar{
	width:var(--spacing-2);
	height:var(--spacing-2)
}
::-webkit-scrollbar-track{
	background:var(--surface-03);
	border-radius:var(--radius-xs)
}
::-webkit-scrollbar-thumb{
	background:var(--surface-06);
	border-radius:var(--radius-xs);
	cursor:grab
}

.iframe-16-9{
	position:relative;
	overflow:hidden;
	width:100%;
	padding-top:56.25%
}
.responsive-iframe{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	width:100%;
	height:100%
}

iframe{
	max-width:100%;
	border:0
}
.text-bold{
	font-weight:var(--font-weight-bold)
}
.hide{
	clip:rect(1px,1px,1px,1px);
	height:1px;
	overflow:hidden;
	position:absolute;
	white-space:nowrap;
	width:1px!important;
	z-index:-1000;
	-webkit-user-select:none;
	user-select:none
}
.w100{
	width:100%
}
.overflow-hidden{
	overflow:hidden
}
.line-clamp{
	overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical	
}
.block-overlap{
	border-radius:var(--radius-xl) var(--radius-xl) 0 0;
	padding:var(--spacing-9) 0 var(--spacing-11);
	margin-top:calc(var(--radius-xl) * -1)
}
.block-overlap *::-webkit-scrollbar{
	display:none
}
textarea{
	resize:none;
	width:100%;
	font-size:var(--font-size-l);
	min-height:5rem;
	border-radius:var(--radius-m);
	border:2px solid var(--border-light);
	background:var(--surface-white);
	padding:var(--spacing-3);
	font-family:var(--font-primary),Arial,Helvetica,sans-serif
}
select{
	font:inherit;
	letter-spacing:inherit;
	word-spacing:inherit;
	cursor:pointer
}

#header,
.container{
	width:90vw;
	width:var(--container-width);
	margin:0 auto
}

#header{
	display:flex;
	gap:var(--spacing-4) var(--spacing-6);
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	margin-bottom:-44px;
	position:relative;
	padding-bottom:0;
	z-index:1
}
.header-positive-margin #header{
	margin-bottom:var(--spacing-5)
}
#footer{
	margin-top:var(--spacing-9);
	padding:var(--spacing-9) 0;
	background:var(--surface-black);
	border-radius:var(--radius-xl) var(--radius-xl) 0 0;
	position:relative
}
#footer:before{
	content:"";
	display:block;
	position:absolute;
	top:calc(var(--spacing-neg-5) / 2);
    background-color:var(--surface-02);
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M0 13.461V12.801H7.60976L12.2927 4.96096L16.9756 12.801H24V13.461H20.5H16.5L13 7.76096L14.6341 12.801L12.878 11.121L14.6341 14.961L12.5 13.461V19H12V13.461L9.95122 14.961L11.7073 11.121L9.95122 12.801L11.5 7.76096L8 13.461H0Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M0 12V10H4L11 0H13L20 10H24V12H19.5L13 3V5.5L17.5 12H13L17.5 17.5H6.5L11 12H6.5L11 5.5V3L4.5 12H0Z'/%3E%3C/svg%3E");
    -webkit-mask-size:var(--spacing-5) var(--spacing-5);
    mask-size:var(--spacing-5) var(--spacing-5);
	width:100%;
	height:var(--spacing-5);
    -webkit-mask-repeat:repeat-x;
    mask-repeat:repeat-x
}
#footer .content{
	display:flex;
	flex-wrap:wrap;
	gap:var(--spacing-7);
	justify-content:space-between;
	align-items:center
}

#footer .dim{
	margin-top:var(--spacing-7);
	opacity:.75;
	font:var(--body-s-regular);
	letter-spacing:var(--letter-spacing-s)
}
#header .logo,
#footer .logo{
	width:230px;
	line-height:1
}
#header .logo a,
#footer .logo a{
	display:block;
	transition:opacity .4s
}
#header .logo:hover a,
#footer .logo:hover a{
	opacity:.85
}
#footer .logo{
	display:grid;
	gap:var(--spacing-2)
}
#header .menu{
	display:flex;
	align-items:center;
	/* background:var(--bg-surface-095); */
	height:44px;
	padding:0 var(--spacing-5);
	border-radius:0 0 var(--radius-md) var(--radius-md)
}
#header .icons,
#footer .icons{
	display:flex;
	gap:var(--spacing-2)
}

.video-container{
	display:contents
}

main.hero > .header{
	height:90vh;
	position:relative;
	display:flex;
	flex-direction:column;
	gap:var(--spacing-7);
	align-items:center;
	padding-top:var(--spacing-11);
	text-align:center;
	color:var(--text-body-01-inverse)
}
main.hero > .header header{
	display:flex;
	flex-direction:column;
	gap:var(--spacing-7);
	align-items:center;
	max-width:768px
}
main.hero > .header header .h1{
	text-align:center
}
main.hero > .header header .description{
	font-weight:var(--font-weight-medium)
}

main.hero > .header .cover{
	display:block;
	position:absolute;
	top:0;
	z-index:-1;
	width:100%;
	height:100%
}
main.hero > .header .cover img{
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	filter: brightness(.35)
}

.ticker-container {
   width:100%;
   overflow:hidden;
   background-color:var(--bg-surface-02);
   padding:var(--spacing-4) 0;
   margin-top:var(--spacing-9)
}

.ticker-content {
   display:inline-block;
   white-space:nowrap;
   font:var(--body-l-regular);
   letter-spacing:var(--letter-spacing-l)
}

.ticker-content.running {
   animation-name:ticker-animation;
   animation-timing-function:linear;
   animation-iteration-count:infinite
}

.ticker-item {
   margin-right:var(--spacing-8);
   display:inline-block
}

@keyframes ticker-animation {
   0% {
	   transform:translateX(0)
   }

   100% {
	   transform:translateX(-50%)
   }
}

.ticker-container:hover .ticker-content.running {
   animation-play-state:paused
}

.scroll-button {
    position: fixed;
    right: var(--spacing-5);
    bottom: var(--spacing-5);
    z-index: 80;
    opacity: 1;
    visibility: visible;
    transition: opacity .3s, visibility .3s, transform .3s, background-color .3s
}

.scroll-button.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

.scroll-button svg {
    transition: transform .3s ease
}

.scroll-button.up svg {
    transform: rotate(-90deg)
}

.scroll-button.down svg {
    transform: rotate(90deg)
}

.mobile-slide-down{
	display:flex
}

@media(max-width:1279px){
	:root{
		--container-width-max:100%
	}
	.full-width-margins{
		margin-left:var(--container-spacing-neg);
		margin-right:var(--container-spacing-neg)
	}
}

@media(max-width:992px){
	#header .logo{
		width:100%;
		text-align:center
	}
	#header .logo img{
		width:inherit
	}
}
@media(max-width:767px){
	:root{
		--container-spacing:var(--spacing-4);
		--container-spacing-neg:var(--spacing-neg-4);
	}
	#footer .content{
		justify-content:center
	}
	#header .menu{
		display:none
	}
}
@media(max-width:576px){
	:root{
		--radius-xl:48px
	}
	#header .logo{
		width:230px
	}
	.block-overlap{
		padding:var(--spacing-6) 0 var(--spacing-11)
	}
	.scroll-button {
		right: var(--spacing-3);
		bottom: var(--spacing-10)
	}
	.mobile-slide-down{
		display:flex
	}
}
@media(max-width:480px){
	:root{
		--radius-xl:32px
	}
}