/* -------------------------------------------------- */
/* Reset - http://purecss.io/base
/* -------------------------------------------------- */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section, main{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}.hide{display:none;}html{box-sizing: border-box;}*,*:before,*:after{box-sizing:inherit;}.clear{font-size:0px;clear: both;height: 0px;}*:focus{outline: none;}strong{font-weight:bold;}em{font-style:italic;}input:invalid{box-shadow: none;}button{border:none;background:none;padding:0;margin: 0;}button::-moz-focus-inner{border:0;}input,button{border-radius:0;border-radius:none;}html{scroll-behavior: smooth;}
/* -------------------------------------------------- */
/* Common
/* -------------------------------------------------- */
body{
	font-family: "Inter", sans-serif;
	font-size: 16px;
	color: #fff;
	background: #081018;
}
h1, h2, h3, h4{
	line-height: 1.2em;
	padding: 12px 0;
	font-weight: 800;
}
a, a:visited{
	color: #fff;
}
a:hover, a:active{
	color: #fff;
}
strong{
	font-weight: 700;
}
sup{
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}
p{
	line-height: 1.8em;
	padding: 12px 0;
}

/* -------------------------------------------------- */
/* Containers
/* -------------------------------------------------- */
.container,
.container-med,
.inside-container-sm{
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}
.container-med{
	max-width: 1080px;
}
.inside-container-sm{
	max-width: 720px;
	padding: 0;
}

/* -------------------------------------------------- */
/* Header
/* -------------------------------------------------- */
header{
	position: absolute;
	width: 100%;
	padding: 24px 0;
}
.head{
	display: flex;
	align-items: center;
}
.logo{
	display: inline-flex;
	align-items: center;
	color: #fff;
	font-weight: 500;
}
.logo span{
	opacity: .6;
}
.logo-box{
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 6px;
	width: 36px;
	height: 36px;
	color: #081018;
	font-weight: 900;
	margin: 0 6px 0 0;
}
.tagline{
	margin-left: auto;
}

/* -------------------------------------------------- */
/* Hero
/* -------------------------------------------------- */
.hero{
	padding: 144px 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
}
.hero h1{
	font-size: 78px;
	font-weight: 900;
}

/* -------------------------------------------------- */
/* Buttons
/* -------------------------------------------------- */
.btns{
	display: flex;
	justify-content: center;
	gap: 12px;
	padding: 24px 0;
}
a.btn{
	display: inline-block;
	background-color: transparent;
	font-size: 16px;
	font-weight: 700;
	padding: 18px 24px;
	line-height: 1em;
	text-decoration: none;
	color: #fff;
	border: 2px solid #fff;
	transition: background-color .25s, color .25s;
}
a.btn:hover{
	background-color: #fff;
	color: #081018;
}
.assurance{
	font-size: 12px;
}

.light-bg{
	background: #fff;
	color: #081018;
}
.light-bg a.btn{
	border-color: #081018;
	color: #081018;
}
.light-bg a.btn:hover{
	background-color: #081018;
	color: #fff;
}

/* -------------------------------------------------- */
/* Value 
/* -------------------------------------------------- */
.value{
	padding: 108px 0;
}
.cards{
	display: flex;
	flex-wrap: wrap;
	margin: -6px;
	padding: 0 0 24px 0;
}
.card{
	width: 33.33%;
	padding: 6px;
}
.card-txt{
	height: 100%;
	padding: 48px 24px;
	border: 1px solid rgba(0,0,0,.1);
	text-align: center;
}
.card h2{
	font-size: 24px;
	padding: 0;
}



/* -------------------------------------------------- */
/* Footer
/* -------------------------------------------------- */
footer{
	padding: 24px 0;
	font-size: 12px;
}
footer a{
	color: #fff;
}
.foot{
	display: flex;
	align-items: center;
}
.foot p{
	padding: 0;
}
.foot p:last-of-type{
	margin-left: auto;
}

/* -------------------------------------------------- */
/* Breakpoints
/* -------------------------------------------------- */
@media screen and (max-width: 1280px) {
	.value{
		padding: 24px 0;
	}
}
@media screen and (max-width: 900px) {
	.card{
		width: 50%;
	}
}
@media screen and (max-width: 800px) {
	.hero h1{
		font-size: 54px;
	}
}
@media screen and (max-width: 600px) {
	.card{
		width: 100%;
	}
	.head{
		justify-content: center;
	}
	.tagline{
		display: none;
	}
}
@media screen and (max-width: 500px) {
	.hero h1{
		font-size: 36px;
	}
}