/* settings */
@font-face{
    font-family:'Nunito';
    src:url('/assets/font/Nunito.woff2') format('woff2')
    font-weight:200 1000;
    font-style:normal;
    font-display:swap;
}
:root{
	--font-color: #081d51;
	--font-accent: #0e64fa;
	--font-secondary: #566493;
	
	--background-color: #fbfcfe;
	--background-accent: #ffffff;
	--background-secondary: #f3f6fe;
	--background-helper: #dae6fd;
	
	--button-bg: #0e64fa;
	--button-color: #ffffff;
	--button-border: #0e64fa;
	--button-bg-hover: #ffffff;
	--button-color-hover: #0e64fa;
	
	--border: #DAE2FD;
	--radius-sm: 6px;
	--radius-md: 15px;
}
:root[data-theme="dark"]{
	
}
/* mobile first */
*{box-sizing:border-box;}
body, html{margin:0;padding:0;height:100%;width:100%;}
body{font-family:'Nunito',sans-serif;font-size:14px;font-weight:400;background-color: var(--background-color); color:var(--font-color);}
nav.simple{width:1080px;max-width:100%;margin:0 auto;padding: 10px 20px;}
main{width:1920px;max-width:100%;margin:0 auto;}
.banner img{display: block;width:100%;margin:0 auto;user-select:none;}
section{margin: 40px 0;}
h1{font-size: 32px;margin: 0;font-weight: 800;}
.wrapper{width:1080px;max-width:100%;margin:0 auto;padding: 0 20px;}
.logo{height: 50px;user-select:none;}
footer .logo{display: block;margin:0 auto;}

button{
	transition: all 0.1s linear; background-color: var(--button-bg);color: var(--button-color); white-space: nowrap;
	border:1px solid var(--button-border); border-radius: var(--radius-sm); height:42px; padding: 0 20px; font-weight: bold; cursor:pointer;
}
button:hover{background-color: var(--button-bg-hover);color: var(--button-color-hover);}
input[type="text"]{height:42px;border:1px solid var(--border); border-radius: var(--radius-sm); outline:none; padding: 0 15px;}

section.countdown{user-select:none;}
section.countdown p{text-align:center;font-weight:bold;}
.countdown-group{display:flex;justify-content:center;gap:30px;}
.countdown-item{text-align:center;}
.countdown-item .value{display:block; font-size:50px; font-weight:bold; color:var(--font-accent); line-height:1;}
.countdown-item .label{display:block;margin-top:10px;color:var(--font-secondary);}

section.features{display:flex;flex-direction:column;gap:20px; user-select: none;}
section.features > div{
	flex:1; background-color: var(--background-accent);border: 1px solid var(--border); text-align:center;
	padding:20px;border-radius: var(--radius-md);box-shadow: 0 4px 24px rgba(15,23,42,.04); 
}
section.features > div .title{font-weight:bold;}
section.features > div .description{color:var(--font-secondary);}

.round_icon{width:75px;height:75px;min-width:75px; background-color: var(--background-secondary); display: block; margin: 0 auto; border-radius: 50%; margin-bottom: 15px;}
.round_icon:before{content:''; display:block; height: 100%; mask-repeat: no-repeat; mask-position: center; background-color: var(--font-accent); mask-size: 34px;}
.round_icon[data-type="cog"]:before{mask-image: url('../img/cog.svg'); mask-size: 38px;}
.round_icon[data-type="lock"]:before{mask-image: url('../img/lock.svg');}
.round_icon[data-type="rocket"]:before{mask-image: url('../img/rocket.svg');}
.round_icon[data-type="email"]:before{mask-image: url('../img/envelope.svg');}

section.subscribe{
	background-color: var(--background-secondary); border: 1px solid var(--border);border-radius: var(--radius-md); 
	padding:20px;display: flex;flex-direction:column;align-items: center; gap: 20px; justify-content: space-between; user-select: none;
}
section.subscribe > div .title{font-weight:bold;}
section.subscribe > div .description{color:var(--font-secondary);}
section.subscribe .round_icon{margin:0; background-color: var(--background-helper);}
section.subscribe .helper{color: var(--font-secondary); font-size:12px; display: flex; align-items: center; gap: 10px; margin-top: 7px;}
section.subscribe .helper:before{
	content:''; display:inline-block; width:18px; height:18px; background-color: var(--font-secondary); 
	mask-image: url('/assets/img/lock_s.svg'); mask-repeat: no-repeat; mask-position: center; mask-size: contain;
}
section.subscribe .split{display: flex; gap: 10px;}
section.subscribe .line{display: flex; gap: 10px;}
section.subscribe input[type="text"]{width:100%;}

.social {display:flex; justify-content: center; margin-top:20px;}
.social > a{display:block; width:50px;height:50px; mask-repeat: no-repeat; mask-position: center; background-color: var(--font-secondary); mask-size: 34px; transition: all 0.1s linear;}
.social > a:hover{background-color: var(--font-accent);}
.social > a[data-type="facebook"]{mask-image: url('../img/facebook.svg');}
.social > a[data-type="instagram"]{mask-image: url('../img/instagram.svg');}
.social > a[data-type="telegram"]{mask-image: url('../img/telegram.svg');}
.social > a[data-type="youtube"]{mask-image: url('../img/youtube.svg');}
.social > a[data-type="tiktok"]{mask-image: url('../img/tiktok.svg');}

.construction_info{text-align:center;user-select:none;}
.construction_info > div{display: flex; gap: 20px;justify-content: center;align-items: center;}
.construction_info > div:after{content:'';display:block;height:60px;aspect-ratio: 430/411;background-image: url('/assets/img/barrier.webp'); background-size: contain;}

.copyright {height: 60px; display: flex; justify-content: center; align-items: center; user-select: none;}
/* tablet */
@media (min-width:768px){
	body{font-size:16px;}
	.banner img{width:80%;}
	h1{font-size: 40px;}
	section.features{flex-direction:row;}
	section.subscribe{flex-direction:row;}
	section.subscribe .form{width:50%;}
}

/* desktop */
@media (min-width:1280px){

}