@font-face {
  font-family: 'Inter';
  src: url('fonts/InterTight-VariableFont_wght.ttf');
  font-weight: 100 1200; /* Range from minimum to maximum weight */
  font-stretch: 75% 125%; /* Range from minimum to maximum width */
  font-style: normal;
}
@font-face {
  font-family: 'Inter Italic';
  src: url('fonts/InterTight-Italic-VariableFont_wght.ttf');
  font-weight: 100 1200; /* Range from minimum to maximum weight */
  font-stretch: 75% 125%; /* Range from minimum to maximum width */
  font-style: italic;
}

:root {
	--mint: #84E0AF; /* mint */
	--grey: #332F28; /*dark gray */
	--grey-light: #474238; /* light gray */
	--grey-dark: #1A1712; /* darker grey */
	--white: #FCFEFE;
	--mobile-padding: 20px;
	--def-time: 0.2s; 
}

*, *:before, *:after {
	padding:0; margin:0;
	box-sizing: inherit;
	box-sizing: border-box;
	line-height:1em;
}

body, html {
	display: block;
	width: 100%;
	min-height: 100%;
	font-family: "Inter";
	color: var(--grey)
}
a {text-decoration: none;}
.italic {
	font-style: italic;
}
img {
	max-width: 100%;
	height: auto;
	display: block;
}
section {min-height: 100vh;}

p {
	line-height: 1.25em;
}

img.freeware-label {
	display: none;
	position: fixed;
	top:0; left:0;
	z-index: 1000;
	width: 125px; height: auto;
}
@media screen and (min-width: 880.1px) {
	img.freeware-label {display: block;}
}
@media screen and (min-width: 1400.1px) {
	img.freeware-label {width: 180px;}
}
@media screen and (min-width: 1800.1px) {
	img.freeware-label {width: 249px;}
}


.sticky-fix {
	position: sticky;
	width: 100%;
	height: 15vh;
	top: 75vh;
	background: transparent;;
}

/*
HERO SECTION
*/

section#hero-section-desktop {
	display: none;
	position: sticky;
	top: 0;
}

section#hero-section-mobile {
	background-color: var(--mint);
	position: sticky;
	top: 0;
	height: 100vh;
}
section#hero-section-mobile .hero-inner {
	background-color: var(--grey);
}

h1.hero-title {
	text-align: left;
	font-weight: 900;
	letter-spacing: 1.05;
	padding-top: 0.67em;
	padding-bottom: 0.2em;
	padding-left: var(--mobile-padding);
	padding-right: var(--mobile-padding);
	color: var(--white);
	font-size: 34px;
}
div.tagline-box {
	display: inline-block;
	background-color: var(--mint);
	border-radius: 2px;
}
h2.hero-tagline {
	width: auto;
	display: inline-block;
	text-align: left;
	font-weight: 500;
	line-height: 1.2em;
	color: var(--grey);
	font-size: 14px;
	padding: .67em calc(var(--mobile-padding)*2) .67em var(--mobile-padding);
}
h3.hero-description {
	text-align: left;
	font-weight: 300;
	line-height: 1.3em;
	color: var(--white);
	font-size: 12px;
	padding: 1em var(--mobile-padding);
	text-shadow: 1px 1px 4px var(--mint);
}
h3.hero-description span {font-weight: 400;}

.hero-screens-box {
	position: relative;
	width: 100%;
	height: 75vh;
	margin-top: 2vh;
	overflow: hidden;
}
img.hero-scrshot {
	position: absolute;
	width: 30vh;
}
img.scr-mint {
	z-index: 30;
	top:0;
	left: 2%;
}
img.scr-passion {
	z-index: 20;
	top: 16px;
	left: min(30%, 160px)
}
img.scr-vintage {
	z-index: 10;
	top: 40px;
	left: min(55%, 280px)
}

a.buttons {
	display: block;
	position: relative;
	font-size: 12px;
	font-weight: 500;
	text-align: center;
	line-height: 0;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 1.2em;
	color: var(--grey-dark);
	background-color: var(--white);
	border: solid 2.4px var(--grey-dark);
	height: 2.7em;
	border-radius: 1.35em;
	min-width: 9em;
	box-shadow: 0 2px 1px rgba(0,0,0,0.33);
	transition: all var(--def-time);
}
a.buttons:hover {
	background-color: var(--mint);
}

div.hero-buttons-wrap {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	z-index: 90;
	bottom: 1.25em;
	height: 90px;
	padding: 0 var(--mobile-padding);
	gap: 1em;
}
div.hero-button-box {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	height: 90px;
	background-position: center 10px;
	background-repeat: no-repeat;
	transition: all var(--def-time);
}

div.hero-button-box.hero-button-box-android {
	background-size: 66%;
	background-image: url("img/icon-android-hero-mint.png");
}
div.hero-button-box.hero-button-box-vst {
	background-size: 66%;
	background-image: url("img/icon-vst-hero-mint.png");
}
div.hero-button-box:hover {background-position: center top;}


/* up to 620 */
@media screen and (min-width: 480.1px) {
	
	div.tagline-box {border-radius: 3px}
	
	.hero-screens-box {
		height: 85vh;
	}
	img.hero-scrshot {
		width: 35vh;
	}
	img.scr-mint {
		left: 2%;
	}
	img.scr-passion {
		left: min(35%, 180px)
	}
	img.scr-vintage {
		left: min(52%, 300px)
	}

	div.hero-buttons-wrap {
		justify-content: flex-end;
	}

}

/* up to 880 */
@media screen and (min-width: 620.1px) {
	
	h1.hero-title {font-size: 40px;}
	h2.hero-tagline {font-size: 17px;}
	h3.hero-description {font-size: 14px;}
	
	div.tagline-box {border-radius: 4px}
	
	h2.hero-tagline br {display: none;}
	h3.hero-description br {display: none;}
	
	img.scr-mint {
		left: 12%;
	}
	img.scr-passion {
		/*left: min(55%, 280px)*/
		left: 32%;
	}
	img.scr-vintage {
		/*left: min(70%, 440px)*/
		left: 46%;
	}


}

/*
up to 1200
*/
@media screen and (min-width: 880.1px) {
section#hero-section-desktop {display: block;}
section#hero-section-mobile {display: none;}

section#hero-section-desktop {
	background-color: var(--mint);
}

section#hero-section-desktop .hero-inner {
	background-image: url("img/hero-bg.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 110% top;
}

.hero-text {
	position: absolute;
	top: 26%;
	left: 10%;
	width: 55%;
}

h1.hero-title {
	color: var(--grey-dark);
	/* font-size: 34px; */
	font-size: 48px;
}
div.tagline-box {
	display: inline-block;
	width: 100%;
	background-color: var(--white);
	border-radius: 4px
}

h2.hero-tagline {
	font-size: 20px;
}
h3.hero-description {
	font-weight: 500;
	color: var(--grey-dark);
	font-size: 17px;
}
h3.hero-description span {font-weight: 600;}

div.tagline-box br {display: inline;}
h3.hero-description br {display: inline;}


div.hero-buttons-wrap {
	width: 55%;
	justify-content: flex-start;
	gap: 2em;
	height: 120px;
	bottom: auto;
	left: 10%;
	top: 65%;
	padding: 0 var(--mobile-padding);
}
div.hero-button-box {
	height: 120px;
	background-position: center 10px;
}

div.hero-button-box.hero-button-box-android {
	background-image: url("img/icon-android-hero-white.png");
}
div.hero-button-box.hero-button-box-vst {
	background-image: url("img/icon-vst-hero-white.png");
}

a.buttons {
	font-size: 14px;
	font-weight: 500;
	color: var(--white);
	background-color: var(--grey-dark);
	border: solid 2.4px var(--mint);
	padding-left: 2em;
	padding-right: 2em;
}
a.buttons:hover {
	color: var(--grey-dark);
	background-color: var(--white);
	border: solid 2.4px var(--white);
}

.hero-screens-box {
	position: absolute; right: 0; top: 0;
	margin: 0; padding: 0;
	width: 45%;
	height: 100%;
	/* background-color: pink; */
}
img.hero-scrshot {
	position: absolute;
	width: 46vh;
}
img.scr-mint {
	top: 5vh;
	left: 0px;
}
img.scr-passion {
	top: calc(5vh + 16px);
	/*left: min(20%, 160px)*/
	left: 20%;
}
img.scr-vintage {
	top: calc(5vh + 40px);
	/*left: min(35%, 280px)*/
	left: 35%;
}

}

/*
up to 1500
*/
@media screen and (min-width: 1200.1px) {

.hero-text {
	top: 20%;
}

h1.hero-title {font-size: 64px;}
h2.hero-tagline {font-size: 27px; padding-left: 0.75em; line-height: 1.3em;}
h3.hero-description {font-size: 23px;}

div.tagline-box {border-radius: 6px;}

div.hero-buttons-wrap {
	width: 55%;
	justify-content: flex-start;
	gap: 2em;
	bottom: auto;
	left: 10%;
	top: 70%;
	padding: 0 var(--mobile-padding);
}
div.hero-button-box {
	height: 150px;
	background-position: center 10px;
}
a.buttons {
	font-size: 20px;
	font-weight: 500;
	border: solid 3.6px var(--grey-dark);
}
a.buttons:hover {
	border: solid 3.6px var(--white);
}

}

/*
from 1500 upward
*/
@media screen and (min-width: 1500.1px) {
	
h1.hero-title {font-size: 72px;}
h2.hero-tagline {font-size: 36px;}
h3.hero-description {font-size: 28px;}

div.hero-buttons-wrap {
	width: 55%;
	justify-content: flex-start;
	gap: 3em;
	top: 74%;
	padding: 0 var(--mobile-padding);
}

}



/*
END hero section
*/


/*
SCENARIO section
*/

section#scenario {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	padding-bottom: var(--mobile-padding);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 16px 16px 0 0;
	background-color: var(--grey-light);
	box-shadow: 1px 0 10px 5px rgba(0,0,0,0.66);
}

#scenario-text {
	flex-shrink: 0;
	padding: calc(var(--mobile-padding) * 2) var(--mobile-padding);
	display: flex;
	flex-direction: column;
	gap: 1em;
}

#scenario-text h2 {
	display: none;
	color: var(--mint);
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
}
#scenario-text p {color: var(--white); font-size: 14px;}

#scenario-visuals {
	padding-left: var(--mobile-padding);
	position: relative;
	flex-grow: 1;
	min-height: 0; 
}

#scenario-visuals img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

img#scenario-devices {
	left: auto;
	right: -12vw;
}

img#scenario-circular-bg {
	top: 5vh;
	left: calc(-48px + 5vw);
	/* transform-origin: top left; */
	width: 280px;
	height: auto;
	opacity: 0.67;
}

img#scenario-main-screen {
	left: 16px;
	top: 20px;
	height: 90%;
	width: auto;
}


/*
620 - 880
*/
@media screen and (min-width: 620.1px) {

section#scenario {
	align-items: center;
}

#scenario-text {
	padding: calc(var(--mobile-padding) * 2) 20%;
}
#scenario-text p {text-align: center; font-size: 16px;}

#scenario-visuals {
	padding: 0;
	width: 67%;
}
img#scenario-devices {
	left: 0px;
	right: auto;
}

}

/*
880 - 1400
*/
@media screen and (min-width: 880.1px) {

section#scenario {
	padding-top: 5vh;
	flex-direction: row;
	gap: 5vw;
	background-image: url("img/midi-bg.png");
	background-position: center left;
	background-repeat: no-repeat;
	background-size: contain;
}
#scenario-text {
	flex-shrink: 1;
	flex-grow: 1;
	flex-basis: auto;

	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	
	padding: 0 0 10vh 10vw;
}
#scenario-text p {text-align: left; font-size: 18px;}
#scenario-visuals {
	padding-left: var(--mobile-padding);
	position: relative;
	flex-grow: 0;
	min-height: 100%; 
}
img#scenario-devices {
	left: 180px;
}

}

/*
1400+
*/
@media screen and (min-width: 1200.1px) {

#scenario-text p {font-size: 24px;}

img#scenario-devices {
	transform: scale(0.75);
	top: 40px;
}

img#scenario-main-screen {
	left: 16px;
	top: auto;
	bottom: 100px;
	height: 66vh;
}

}


/*
END scenario section
*/


/*
HOWTO section
*/
section#how-to {
	position: sticky;
	top: -300vh;
	width: 100%;
	height: 400vh;
	background-color: var(--grey-dark);
	padding: 64px 16px;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	gap: 32px;
	border-radius: 16px 16px 0 0;
	box-shadow: 1px 0 10px 5px rgba(0,0,0,0.66);	
}

div.how-to-item {
	/* position: relative; */
	
	height: 90vh;
	display: flex;
	justify-content: center;
	
	background-image: url("img/green-circle.png");
	background-repeat: no-repeat;
	background-size: 90%;
	background-position-x: center;
	background-position-y: 25%;
}

div.content-wrap {
	width: 240px;
	height: 100%;

	display: grid;
	grid-template-rows: 6fr 2fr;
	gap: 16px;
	
	/* background-color: green; */
}

div.content-wrap div.phone-image-wrap {
	/* background-color: #444444; */
	display: flex;
	justify-content: center;
	min-width: 0;
	min-height: 0;
}
div.phone-image-wrap img {
	max-width: 100%;
	object-fit: contain;
	min-width: 0;
	min-height: 0;
}

div.content-wrap div.how-to-text-wrap {
	/* background-color: #888888; */
	display: flex;
	flex-direction: column;
	/* justify-content: flex-end; */
	justify-content: flex-start;
	
	text-align: center;
}

div.how-to-text-wrap h3 {
	color: var(--mint);
	padding-bottom: 0.25em;
	font-size: 24px;
	text-transform: uppercase;
	font-weight: 800;
}
div.how-to-text-wrap p {
	color: var(--white);
	font-size: 16px;
}



/* 480-660 */
@media screen and (min-width: 480.1px) {

div.how-to-item {
	background-position-y: 20%;
	background-size: 55%;
}	
	
}/* END 400-660 */


/* 660-920 */
@media screen and (min-width: 660.1px) {

section#how-to {
	height: 200vh;
	top: -100vh;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}

div.how-to-item {
	background-position-y: 25%;
	background-size: 85%;
}		
	
}/* END 660-920 */


/* 920-1100 */
@media screen and (min-width: 920.1px) {

div.how-to-item {
	background-size: 75%;
}
	
}/* END 920-1100 */


/* 1100-1600 */
@media screen and (min-width: 1100.1px) {

section#how-to {
	height: 100vh;
	top: 0;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr;	
}

div.how-to-item {
	background-size: 100%;
}
	
}/* END 1100-1600 */

/* 1600+ */
@media screen and (min-width: 1600.1px) {

section#how-to {
	padding-left: 3vw;
	padding-right: 3vw;
}

div.how-to-item {
	background-size: 80%;
}
div.content-wrap {
	width: auto;
	max-width: 260px;
}
	
}

/*
END howto section
*/


/*
CONCLUSION section
*/

section#conclusion {
	position: sticky;
	top: -30vh;
	width: 100%;
	height: 130vh;
	padding-bottom: 0;
	padding-top: 0;
	border-radius: 16px 16px 0 0;
	background-color: var(--white);
	box-shadow: 1px 0 10px 5px rgba(0,0,0,0.66);
	
	/* background-color: #ff9933; */
}


.conclusion-two-phones {
	position: absolute;
	top: calc(var(--mobile-padding) * 2);
	left:0;
	width: 100%;
	height: calc(100% - var(--mobile-padding) * 2);
	overflow: hidden;
	
	/* background-color: pink; */
}
img#conclusion-time {
	position: absolute;
	top:0;
	left: calc(50% - 200px);
	transform-origin: top left;
	transform: scale(0.75);
}
img#conclusion-freq {
	position: absolute;
	top: 40px;
	right: calc(50% - 200px);
	transform-origin: top right;
	transform: scale(0.75);
}

.conclusion-text {
	position: absolute;
	width: 100%;
	height: 100%;
	left:0;
	top: 0;
	overflow: visible;
	padding-left: var(--mobile-padding);
	padding-right: var(--mobile-padding);
	
	background-image: url("img/green-circle.png");
	background-repeat: no-repeat;
	background-size: 560px;
	background-position-x: center;
	background-position-y: 260px;
	
	text-align: center;
	padding-top: 580px;
	
	/* background-color: green; */
}
img#two-icons {
	display: inline-block;
	transform: scale(0.8);
	transform-origin: center center;
}
.circular-text{
	padding-top: 8px;
}


/* 480-800 */
@media screen and (min-width: 480.1px) {

section#conclusion {
	height: 140vh;
	top: -40vh;
}

img#conclusion-time {
	left: calc(50% - 230px);
	transform: scale(0.9);
}
img#conclusion-freq {
	right: calc(50% - 230px);
	transform: scale(0.9);	
}
.conclusion-text {
	background-position-y: 310px;
	padding-top: 660px;
}

}/* END 480-800 */


/* 800-1200 */
@media screen and (min-width: 800.1px) {

section#conclusion {
	height: 100vh;
	top: 0;
}
.conclusion-two-phones {
	overflow: hidden;
}
img#conclusion-time {
	top: calc(50% - 290px);
	left: calc(50% - 500px);
	transform-origin: top left;
	transform: scale(0.85);
}
img#conclusion-freq {
	top: calc(50% - 290px);
	right: calc(50% - 500px);
	transform-origin: top right;
	transform: scale(0.85);
}

.conclusion-text {
	background-size: 560px;
	background-position-y: calc(50vh - 280px);
	padding-top: calc(50vh - 90px);
}
img#two-icons {
	transform: scale(1);
}
.circular-text {
	padding-top: 16px;
}
.circular-text h3 {
	font-size: 1.4em;
}
.circular-text p {
	font-size: 1.2em;
}

}/* END 800-1200 */

/* 1200+ */
@media screen and (min-width: 1200.1px) {

.conclusion-two-phones {
	overflow: visible;
}

img#conclusion-time {
	top: calc(50% - 340px);
	left: calc(50% - 580px);
	transform-origin: top left;
	transform: scale(1);
}
img#conclusion-freq {
	top: calc(50% - 340px);
	right: calc(50% - 580px);
	transform-origin: top right;
	transform: scale(1);
}
.conclusion-text {
	background-size: 480px;
	background-position-y: calc(50vh - 240px);
	padding-top: calc(50vh - 90px);
}

	
}/* END 1200+ */


/*
END result section
*/


/*
FOOTER section
*/
footer {
	position: sticky;
	width: 100%;
	height: 100vh;
	background-color: rgb(51,47,40);
	box-shadow: 1px 0 5px 3px rgba(0,0,0,0.2);
	border-top: solid 8px var(--mint);
	
	display: flex;
	flex-direction: column;	
	align-items: center;
	justify-content: space-between;
	
	padding-top: calc(var(--mobile-padding) * 6);
	padding-bottom: calc(var(--mobile-padding) * 2);
	padding-left: var(--mobile-padding);
	padding-right: var(--mobile-padding);
}

img#footer-logo {
	aspect-ratio: 1/1;
	width: 160px;
}


div#footer-links * {
	line-height: 1.25em;
	text-align: center;
}
div#footer-links h4 {
	padding-top: 1em;
	color: var(--mint);
}
div#footer-links a {
	color: var(--white);
	display: inline-block;
	width: 100%;
}
div#footer-links a:hover {
	color: var(--mint);
}

div#footer-button-wrap {
	position: relative;
	bottom:0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	height: 90px;
	background-position: center 10px;
	background-repeat: no-repeat;
	transition: all var(--def-time);
	background-size: 66%;
	background-image: url("img/icon-android-hero-mint.png");
}
div#footer-button-wrap:hover {background-position: center top;}
div#footer-button-wrap a#footer-button {
	background-color: var(--white);
	color: var(--grey-dark);
}
div#footer-button-wrap a:hover#footer-button {
	background-color: var(--white);
}



/* 880-1200 */
@media screen and (min-width: 880.1px) {
	footer {padding-top: calc(var(--mobile-padding) * 3);}
	img#footer-logo {width: 200px;}
	div#footer-button-wrap {height: 120px;}
	div#footer-button-wrap a#footer-button {
		border-color: var(--grey-dark);
		background-color: var(--mint);
	}
	
}/* END 880-1200 */

/* 1200+ */
@media screen and (min-width: 1200.1px) {
	footer {
		justify-content: center;
	}
	div#footer-links {
		position: absolute;
		bottom: 2em;
		right: 3em;
		width: 300px;
	}
	div#footer-links * {text-align: right;}
	div#footer-button-wrap {
		position: absolute;
		left: 3em;
		bottom: 2em;
		height: 150px;
	}
	
}/* END 1200+ */



/*
END footer section
*/