:root {
	--white-100: #f4f4f9;
	--white-10050: #f4f4f980;
	--grey-500: #1a1b1b;
	--grey-50075: #1a1b1bc0;
	--grey-50050: #1a1b1b80;
	--grey-50025: #1a1b1b40;
	--grey-50010: #1a1b1b1a;
	--grey-400: #1f2020;
	--grey-300: #87878a;
	--grey-100: #c8c9cd;
	--acc-blue-500: #1d84bd;
	--acc-blue-400: #539fcc;
	--acc-blue-350: #6eadd3;
	--acc-blue-300: #89bcdb;
	--acc-yellow-500: #ffdf6b;
	--acc-yellow-300: #f9e9b2;
	--acc-purple-500: #8e67d0;
	--acc-purple-400: #a68bda;
	--acc-purple-300: #c1ade4;
	--acc-purple-200: #c8bde9;
	--acc-green-600: #28b644;
	--acc-green-500: #2cd04d;
	--acc-green-400: #6bdf83;
	--acc-red-500: #fd3441;
	--acc-light-blue-500: #cbe8f8;
	--acc-light-blue-300: #dfeef8;

	--gradient-500: linear-gradient(
		135deg,
		var(--acc-blue-500),
		var(--acc-purple-500)
	);
	--gradient-300: linear-gradient(
		135deg,
		var(--acc-blue-300),
		var(--acc-purple-300)
	);

	--side-padding: 14.9vw;
	--side-padding: var(--vem-1050);

	--vem-10: calc(0.1 * var(--vem));
	--vem-25: calc(0.25 * var(--vem));
	--vem-50: calc(0.5 * var(--vem));
	--vem-75: calc(0.75 * var(--vem));
	--vem: clamp(0.5rem, 1vw, 1.2rem);
	--vem-200: calc(1.25 * var(--vem));
	--vem-300: calc(1.4 * var(--vem));
	--vem-400: calc(1.5 * var(--vem));
	--vem-500: calc(1.8 * var(--vem));
	--vem-525: calc(2 * var(--vem));
	--vem-550: calc(2.2 * var(--vem));
	--vem-575: calc(2.4 * var(--vem));
	--vem-600: calc(2.6 * var(--vem));
	--vem-650: calc(2.9 * var(--vem));
	--vem-700: calc(3.25 * var(--vem));
	--vem-750: calc(3.4 * var(--vem));
	--vem-800: calc(4 * var(--vem));
	--vem-900: calc(5 * var(--vem));
	--vem-925: calc(5.5 * var(--vem));
	--vem-950: calc(6 * var(--vem));
	--vem-1000: calc(8 * var(--vem));
	--vem-1050: calc(9 * var(--vem));
	--vem-2000: calc(32 * var(--vem));

	--kumbh: "Kumbh Sans", sans-serif;
	--museo: MuseoModerno, Arial, Helvetica, sans-serif;

	/* light scheme */

	--bg: var(--acc-light-blue-300);
	--text: var(--grey-500);
}

/* @media (prefers-color-scheme: light) {
	:root {
		--bg: var(--grey-500);
		--text: var(--white-100);
	}
	.logo--dark {
		display: block !important;
	}
	.logo--light {
		display: none;
	}
} */

*,
*::before,
*::after {
	box-sizing: border-box;
	color: var(--text);
	margin: 0;
	font-family: var(--kumbh);
}

.no-select {
	user-select: none;
}

::-moz-selection {
	color: var(--bg);
	background: var(--acc-blue-500);
}

::selection {
	color: var(--bg);
	background: var(--acc-blue-500);
}

img {
	display: block;
	max-width: 100%;
	user-select: none;
}

body {
	background-color: var(--bg);
}

header {
	box-sizing: content-box;
	position: sticky;
	top: var(--header-top, -100px);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 1rem;
	align-items: center;
	z-index: 100;
	transition: top 2s;
	background: color-mix(in oklab, var(--bg) 80%, #0000);
	font-size: max(var(--vem-300), 1.2rem);
	padding: 1em 1.25em 1.2em 1em;
	border-radius: 0 0 1em 1em;
}

@keyframes header-slide {
	from {
		translate: 0 -100%;
	}
	to {
		translate: 0 0;
	}
}

.logo,
nav a {
	position: relative;
	font-weight: 600;
	height: 1.5em;
	transform: skew(-9deg);
	transition: transform 0.3s cubic-bezier(0.34, 3, 0.64, 1);
}

.logo:hover,
nav a:hover {
	transform: scale(1.1);
	font-weight: 800;
}

.logo--dark {
	display: none;
}

nav {
	display: flex;
	gap: var(--vem-600);
}

nav a {
	width: var(--text-width, auto);
	text-align: center;
}

nav a,
.nav-cta {
	text-decoration: none;
	position: relative;
	transition: all 0.4s cubic-bezier(0.34, 2.5, 0.64, 1);
}

.nav-cta {
	justify-self: end;
	align-self: center;
	height: min-content;
	transition: scale 0.2s;
}

.nav-cta p {
	border-radius: 0.5em;
	padding: 0.3em 1em;
	background: color-mix(in oklab, var(--acc-blue-350) 70%, #0000);
	opacity: 0.9;
	color: var(--white-100);
	font-weight: 600;
	transition: all 0.3s;
	white-space: nowrap;
}

@property --gradient-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: true;
}

.nav-cta::before,
.nav-cta::after {
	content: "";
	position: absolute;
	background: conic-gradient(
		from calc(var(--gradient-angle) + 285deg),
		var(--acc-blue-500),
		var(--acc-purple-500),
		var(--acc-blue-500)
	);
	inset: -0.1em;
	border-radius: 0.6em;
	z-index: -1;
	opacity: 0.7;
	animation: backround-spin 5s infinite ease-in-out;
	transition: scale 0.3s, opacity 0.3s;
}

.nav-cta::after {
	filter: blur(0.45em);
	inset: -0.3em;
	border-radius: 2em;
}

@keyframes backround-spin {
	0% {
		--gradient-angle: 0deg;
	}
	50% {
		--gradient-angle: 180deg;
	}
	100% {
		--gradient-angle: 360deg;
	}
}

.nav-cta:hover p,
.nav-cta:focus-within p,
.nav-cta:hover::before,
.nav-cta:focus-within::before {
	scale: 1.07;
}

.nav-cta:hover p,
.nav-cta:focus-within p {
	font-weight: 700;
	opacity: 1;
	background: color-mix(in oklab, var(--acc-blue-350) 100%, #0000);
}

section,
.hero {
	min-height: min(65vh, 30rem);
	display: flex;
	max-width: calc(100vw - 2 * var(--side-padding));
	min-width: 40ch;
	flex-wrap: wrap;
	justify-content: space-around;
	align-content: space-around;
	align-items: center;
	gap: 1rem;
	margin: 2rem auto;
}

.gradient {
	background: var(--gradient-500);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

footer {
	--edge: var(--vem-500);
	min-height: min(calc(100lvh - var(--edge)), 75vw);
	background: linear-gradient(var(--bg), var(--white-100) var(--cta-height));
	font-size: var(--vem-400);
	font-weight: 600;
	position: relative;
	z-index: 5;
	display: grid;
	grid-template-rows: 1fr auto;
	gap: calc(var(--side-padding) / 3);
	padding-bottom: calc(var(--side-padding) / 6);
}

.reduce-height {
	max-height: calc(75 * var(--vem));
}

.cta-banner {
	min-height: min-content;
	height: 100%;
	max-height: calc(46 * var(--vem));
	max-width: 100%;
	align-self: end;
	margin: 0 var(--edge);
	text-align: center;
	background: var(--gradient-500);
	border-radius: var(--vem-500);
	padding: var(--vem-700) var(--vem-800);
	z-index: 1;
	align-content: center;
}

.cta-banner__heading {
	font-size: var(--vem-600);
	text-wrap: pretty;
}

.cta-banner p {
	flex-basis: 100%;
	margin-block: -0.7em 0.7em;
	text-wrap: balance;
}

.cta-banner__link {
	font-size: var(--vem-500);
	color: var(--white-100);
	font-weight: 700;
	white-space: nowrap;
	padding: 0.4em 1em;
	border-radius: 5em;
	background: var(--grey-50050);
	box-shadow: 0 0.1em 0.4em -0.05em var(--acc-blue-500),
		inset 0 -0.1em 0.3em -0.1em var(--acc-blue-500),
		inset 0 0.05em 0 var(--acc-blue-350),
		inset 0 0.1em 0.3em -0.2em var(--acc-blue-350),
		0 -0.1em 0.4em -0.05em var(--acc-blue-400);
	transition: scale 0.2s, background 0.2s, box-shadow 0.2s;
}

.cta-banner__link:hover {
	background: var(--grey-50075);
	box-shadow: 0 0.2em 0.4em 0 var(--acc-blue-500),
		inset 0 -0.2em 0.3em -0.1em var(--acc-blue-500),
		inset 0 0.05em 0 var(--acc-blue-350),
		inset 0 0.15em 0.3em -0.1em var(--acc-blue-350),
		0 -0.2em 0.4em 0 var(--acc-blue-400);
	scale: 1.05;
}

.footer__main {
	padding: 0 calc(var(--side-padding) / 2);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: stretch;
	gap: var(--vem-800) var(--vem-600);
}

.footer__wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	justify-items: stretch;
	align-items: stretch;
	gap: var(--vem-800);
}

footer a {
	text-decoration: none;
	line-height: 2;
}

.description,
.links,
.contact {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.description {
	justify-items: center;
	justify-content: center !important;
}

.footer__logo {
	max-width: calc(4.9 * min(var(--vem-1000), 17.5vw));
}

.description p {
	font-size: calc(var(--vem) * 1.81);
	text-align: center;
}

.contact > * {
	flex: 1;
}

.contact__details {
	display: flex;
	gap: var(--vem-75);
	align-items: center;
}

.contact__details img {
	height: var(--vem-500);
	aspect-ratio: 1;
}

.contact__socials {
	flex: 2;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.contact__socials a {
	position: relative;
	height: 100%;
	aspect-ratio: 1;
	display: grid;
	place-items: end center;
	animation: shine-backwards 0.5s forwards;
}

.contact__socials a:hover {
	animation: shine-forwards 1s forwards, glisten 2s 1s infinite;
}

@keyframes shine-forwards {
	0% {
		filter: brightness(0) invert(4%) sepia(4%) saturate(937%) hue-rotate(131deg)
			brightness(88%) contrast(85%);
	}
	1% {
		filter: brightness(0) invert(4%) sepia(4%) saturate(937%) hue-rotate(0deg)
			brightness(88%) contrast(85%);
	}
	40% {
		filter: brightness(150%) invert(0) sepia(0) saturate(150%) hue-rotate(0deg)
			brightness(100%) contrast(100%);
	}
	100% {
		filter: brightness(120%) invert(0) sepia(0) saturate(100%) hue-rotate(0deg)
			brightness(100%) contrast(100%);
	}
}

@keyframes shine-backwards {
	100% {
		filter: brightness(0) invert(4%) sepia(4%) saturate(937%) hue-rotate(131deg)
			brightness(88%) contrast(85%);
	}
	99% {
		filter: brightness(0) invert(4%) sepia(4%) saturate(937%) hue-rotate(0deg)
			brightness(88%) contrast(85%);
	}
	0% {
		filter: brightness(100%) invert(0) sepia(0) saturate(100%) hue-rotate(0deg)
			brightness(100%) contrast(100%);
	}
}

@keyframes glisten {
	0%,
	100% {
		filter: brightness(120%) invert(0) sepia(0) saturate(100%) hue-rotate(0deg)
			brightness(100%) contrast(100%);
	}
	33% {
		filter: brightness(120%) invert(0) sepia(0) saturate(100%) hue-rotate(20deg)
			brightness(100%) contrast(100%);
	}
	66% {
		filter: brightness(140%) invert(0) sepia(0) saturate(100%)
			hue-rotate(-10deg) brightness(100%) contrast(100%);
	}
}

.contact__socials img,
.contact__socials a::after {
	width: var(--vem-800);
	aspect-ratio: 1;
}

.contact__socials a::after {
	content: "";
	position: absolute;
	inset: auto auto 0;
	background: linear-gradient(135deg, #0000 40%, #fff6 50%, #0000 60%) 200% 50% /
		200% 200% no-repeat;
	mask-size: cover;
}
.contact__socials a:hover::after {
	animation: shine 1.25s 0.1s forwards;
}

@keyframes shine {
	from {
		background-position: 200% 50%;
	}
	to {
		background-position: -200% 50%;
	}
}

.contact__socials a:nth-of-type(1)::after {
	-webkit-mask-image: url("images/instagram.svg");
	mask-image: url("images/instagram.svg");
}
.contact__socials a:nth-of-type(2)::after {
	-webkit-mask-image: url("images/facebook.svg");
	mask-image: url("images/facebook.svg");
}
.contact__socials a:nth-of-type(3)::after {
	-webkit-mask-image: url("images/linkedin.svg");
	mask-image: url("images/linkedin.svg");
}

.footer__extra {
	flex: 100%;
	text-align: center;
	opacity: 0.8;
	font-size: var(--vem-200);
}

.footer__extra a {
	text-decoration: underline;
	text-align: center;
}

@media (width < 770px) {
	header {
		font-size: min(var(--vem-600), max(2.5vw, 0.75rem));
		padding: 1em 2em 1.3em 2em;
		border-radius: 0 0 1.5em 1.5em;
	}

	main > * {
		justify-content: center;
	}

	section {
		min-height: min(40vh, 20rem);
		min-width: 10ch;
		max-width: max-content;
	}

	footer {
		min-height: calc(100lvh - var(--edge));
	}

	.footer__main {
		padding: var(--vem);
	}

	.footer__extra {
		padding-bottom: 2em;
	}
}

/* privacy policy */

.privacy {
  	padding: 3rem 2rem;
    max-width: 70ch;
    margin: auto;
}