@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');

:root{
	--background-color: #F5F5F5;
	--black: #1C1B1F;
	--grey: #808080;
	--lightgrey: #FAFAFA;
	--darkgrey: #545050;
	--red: #F22828;
	
	--animate-delay: 0.2s;
}

/* --- reset styles --- */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,abbr,article,aside,command,details,figcaption,figure,footer,header,hgroup,mark,meter,nav,output,progress,section,summary,time { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,th,figcaption { /*font-size: 14px;*/ font-weight: normal; font-style: normal; }
fieldset,iframe { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }
article,aside,footer,header,hgroup,nav,section,figure,figcaption { display: block; }

*, a, a img { outline: none !important; color: var(--grey); transition: all 0.2s ease-in-out; }
a:hover { color: var(--red) }
a:active { color: var(--black) }
a img { border: none; outline: none; }

.hidden { display: none; }

.clearfix { clear: both; }
.clearer { clear: both; display: block; margin: 0; padding: 0; height: 0; line-height: 1px; font-size: 1px; }
.selfclear { zoom:1; }
.selfclear:after { content:'.'; display:block; height:0; clear:both; visibility:hidden; }



body {
	background: var(--background-color);
	color: var(--grey);
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 21px;
	line-height: 30px;
}
.container {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 40px;
}
header {
	background: var(--lightgrey);
}
.logo img { width: 140px; }
h1, h2, h4 {
	font-size: 3rem;
	color: var(--black);
	font-weight: 800;
	line-height: 1.1;
	margin: 1em 0 0.75em 0;
}
p { margin-bottom: 1.5em; }
strong { color: var(--black); font-weight: inherit; }
.cta a {
	font-weight: 600;
	font-size: 1.1rem;
	text-decoration: none;
	display: inline-block;
	background: var(--red);
	color: #fff;
	padding: 0.75em 1.5em;
	border-radius: 100px;
}
.cta a:hover {
	padding: 0.75em 2.5em;
}
.topbar { padding: 2rem 150px; text-align: right; }
.topbar .cta a { background: var(--black); }
.topbar::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 120px 0 0 120px;
	border-color: transparent transparent transparent var(--red);
	position: absolute;
	right: 0;
	top: 0;
}
.hero img {
	display: block;
	width: 80%;
	max-width: 1600px;
	margin: 0 auto;
}
.usp {
	padding: 4em 0;
}
.usp ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: flex-start;
	gap: 1em;
	margin: 3em 0;
}
.usp ul li {
	list-style: none;
	width: calc(100% / 3 - 1em);
	color: var(--darkgrey);
	font-weight: 700;
	font-size: 1.3rem;
	margin-bottom: 2em;
	
}
.usp ul li::before {
	content: "";
	height: 60px;
	width: 60px;
	margin-bottom: 0.5em;
	display: block;
	background-size: contain;
	background-position: 0 50%;
}
.usp ul li:nth-child(1)::before { background: url("../graphics/icon-legislation.svg") no-repeat; }
.usp ul li:nth-child(2)::before { background: url("../graphics/icon-calculate.svg") no-repeat; }
.usp ul li:nth-child(3)::before { background: url("../graphics/icon-qr.svg") no-repeat; }
.usp ul li:nth-child(4)::before { background: url("../graphics/icon-language.svg") no-repeat; }
.usp ul li:nth-child(5)::before { background: url("../graphics/icon-infinite.svg") no-repeat; background-size: contain; }
.usp ul li:nth-child(6)::before { background: url("../graphics/icon-customers.svg") no-repeat; }

.usp figure {
	padding: 0 4em;
	text-align: center;
	position: relative;
}
.usp figure img {
	width: 100%;
	max-width: 100vw;
	border-radius: 50px;
}
.usp figcaption {
	font-size: 3rem;
	color: #fff;
	font-weight: 800;
	line-height: 1;
	text-align: left;
	margin: 1em 0 0.75em 0;
	position: absolute;
	width: 400px;
	top: calc(50% - 100px);
	left: calc(4em);
}

.pricing {
	background: radial-gradient(circle at 50% 60%, #FFDEDE 0%, rgba(255,222,222,0.00) 50%);
}
.pricelist {
	padding: 0 2em;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: flex-start;
	gap: 1em;
	margin: 4em 0;
}
.pricelist > div {
	flex: 1;
	background: #fff;
	box-shadow: 0 8px 10px -2px rgba(0,0,0,0.05), 0 1px 4px 0 rgba(0,0,0,0.05);
	border-radius: 50px;
	padding: 2em;
	padding-bottom: 6em;
	text-align: center;
	position: relative;
}
.pricelist > div:hover {
	box-shadow: 0 15px 15px -2px rgba(0,0,0,0.05), 0 3px 7px 0 rgba(0,0,0,0.05);
	transform: translate(0, -10px);
}
.pricelist .cta {
	position: absolute;
	bottom: 2em;
	left: 0;
	width: 100%;
	text-align: center;
}
.pricelist h4 {
	font-size: 1.5rem;
	margin: 1em 0 0.75em 0;
}
footer {
	background: var(--lightgrey);
	padding: 4em 0;
	margin-top: -10em;
	padding-top: 12em;
}
.copyright {
	text-align: center;
	font-size: 1rem;
	font-weight: 300;
	margin-top: 9em;
	opacity: 0.5;
}
.copyright:hover { opacity: 1; }
.copyright img { width: 200px; }

@media only screen and (max-width: 960px) {
	.hero img { width: 100%; }
}
@media only screen and (max-width: 479px) {
	.topbar::before {
		content: "";
		display: inline-block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 80px 0 0 80px;
		border-color: transparent transparent transparent var(--red);
		position: absolute;
		right: 0;
		top: 0;
	}
	body { font-size: 18px; line-height: 1.5; }
	h1, h2, h4 { font-size: 2.5rem; }
	.usp { padding: 2em 0; }
	.usp ul li { width: calc(100% / 2 - 1em); }
	.usp figure { padding: 0 1em; }
	.usp figcaption { left: 2em; width: 50%; top: calc(50% - 50px); font-size: 2rem; }
	.hero img { width: 100%; }
	.pricelist { padding: 0; }
	footer { margin-top: -6em; padding-top: 4em; }
}