@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/plusjakartasans/v8/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yygg_vb.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--primary: #801cff;
	--secondary: #2c6fff;
	--black: #050405;
	--dark: #201f29;
	--text: #586274;
	--cloud: #c6ced6;
	--snow: #f2f2f8;
	--white: #FFFFFF;
	--shadow-light: 0 32px 24px -8px rgba(0,0,0,.04);
	--shadow-dark: 0 32px 32px -24px rgba(0,0,0,.12);
	--transition: all 0.32s ease-in-out;
}


* {
	box-sizing: border-box;
	}

html,
body {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-size: 16px;
	font-weight: 400;
	margin: 0;
	padding: 0;
	background: var(--white);
	color: var(--text);
	max-width: 100%;
  	max-height: 100%;
	overflow-x: hidden;
	position: relative;
	}
	
	
/* LAYOUT */

section {
	padding:0px 32px;
	}
container {
	padding:32px 32px;
	gap: 64px;
	max-width: 1680px;
	border-radius:16px
	}
content {
	padding:80px 96px;
	gap: 48px;
	max-width: 1440px;
	border-radius:16px
	}
section,
container,
content {
	width: 100%;
	margin:0 auto;
	display: flex;
	flex-direction: column;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	}
	
/* VARIABLES */

.white {color:var(--white) !important}
.snow {color:var(--snow) !important}
.cloud {color:var(--cloud) !important}
.dark {color:var(--dark) !important}
.primary {color:var(--primary) !important}
.secondary {color:var(--secondary) !important}

.bg-white {background-color:var(--white) !important}
.bg-snow {background-color:var(--snow) !important}
.bg-cloud {background-color:var(--cloud) !important}
.bg-dark {background-color:var(--dark) !important; color: var(--cloud);}
.bg-black {background-color:var(--black) !important; color: var(--cloud);}
.bg-primary {background-color:var(--primary) !important}
.bg-secondary {background-color:var(--secondary) !important}

.bg-dark h3,
.bg-dark h4,
.bg-dark .subtitle,
.bg-dark .lead,
.bg-black h3,
.bg-black h4,
.bg-black .subtitle,
.bg-black .lead {
	color: var(--white);
	}
.center {
	text-align:center;
	}

.scale {
	transition: var(--transition);
	}
.scale:hover {
	transform: scale(1.01);
	}
	
.shadow {
	box-shadow: var(--shadow-light);
	transition: var(--transition);
	}
.shadow:hover {
	box-shadow: var(--shadow-dark);
	}





/* FONTS */

h1 {
	font-size: 4rem;
	line-height: 4.5rem;
	font-weight:500;
	margin:0 0 2rem;
	letter-spacing: -0.4px;
	color: var(--black);
	text-shadow: 0 4px 16px rgba(0,0,0,0.08);
	}
h2 {
	font-size: 3rem;
	line-height: 3.75rem;
	font-weight:600;
	padding: 0;
	margin:0 0 1.25rem;
	letter-spacing: -0.4px;
	color:var(--primary);
	}
h3 {
	font-size: 1.375rem;
	line-height: 1.75rem;
	font-weight: 700;
	margin:0 0 1rem;
	color:var(--black);
	}
h4 {
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 600;
	margin:1.5rem 0 0.5rem;
	color:var(--dark);
	}
.subtitle {
	font-size: 1rem;
	line-height: 1.5rem;
	text-transform: uppercase;
	font-weight:700;
	margin:0 0 0.25rem;
	color:var(--black);
	}
.lead {
	font-size: 1.375rem;
	line-height: 2rem;
	font-weight:500;
	margin:0 0 1rem;
	color:var(--dark);
	}
p {
	font-size: 1.125rem;
	line-height: 1.75rem;
	margin:0 0 0.75rem;
	}
a {
	text-decoration:none;
	font-weight:500;
	color: var(--secondary);
	}
a:hover {
	}
.white a {
	color: var(--white);
	}
.link {
    font-size: 1.125rem;
    line-height: 1.25rem;
    font-weight: 700;
    padding: 14px 40px 14px 24px;
    background-color: var(--white);
    margin: 0 0 0.5rem;
    display: inline-block;
    position: relative;
    border-radius: 50vh;
    color: var(--secondary);
	border: 3px solid var(--secondary);
	}
.link:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 12px;
    top: 18px;
    right: 18px;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 12"><defs><style>.arrow{fill:%232c6eff;}</style></defs><path class="arrow" d="M15.69,6.81s.01-.02.02-.02c0,0,.01-.01.02-.02,0,0,.02-.02.02-.03,0,0,0-.01.01-.02,0-.01.02-.02.02-.03,0,0,0-.01.01-.02,0-.01.01-.02.02-.03,0,0,0-.01.01-.02,0-.01.01-.02.02-.03,0,0,0-.01.01-.02,0-.01.01-.02.02-.03,0,0,0-.01.01-.02,0,0,0-.02.01-.03,0,0,0-.02.01-.03,0,0,0-.02.01-.03,0,0,0-.02.01-.03,0,0,0-.02,0-.02,0-.01,0-.02.01-.03,0,0,0-.01,0-.02,0-.01,0-.02,0-.04,0,0,0-.01,0-.02,0-.01,0-.03,0-.04,0,0,0-.01,0-.02,0-.01,0-.03,0-.04,0,0,0-.02,0-.02,0-.01,0-.02,0-.04,0-.01,0-.02,0-.03,0,0,0-.02,0-.03,0-.04,0-.08,0-.12,0,0,0-.02,0-.03,0-.01,0-.02,0-.03,0-.01,0-.02,0-.04,0,0,0-.02,0-.02,0-.01,0-.03,0-.04,0,0,0-.01,0-.02,0-.01,0-.03,0-.04,0,0,0-.01,0-.02,0-.01,0-.02,0-.04,0,0,0-.01,0-.02,0-.01,0-.02-.01-.03,0,0,0-.02,0-.02,0,0,0-.02-.01-.03,0,0,0-.02-.01-.03,0,0,0-.02-.01-.03,0,0,0-.02-.01-.03,0,0,0-.01-.01-.02,0-.01-.01-.02-.02-.03,0,0,0-.01-.01-.02,0-.01-.01-.02-.02-.03,0,0,0-.01-.01-.02,0-.01-.01-.02-.02-.03,0,0,0-.01-.01-.02,0-.01-.01-.02-.02-.03,0,0,0-.01-.01-.02,0,0-.01-.02-.02-.03,0,0-.01-.01-.02-.02,0,0-.01-.02-.02-.02-.01-.01-.02-.03-.04-.04,0,0,0,0,0,0L10.85.35c-.47-.47-1.23-.47-1.7,0-.47.47-.47,1.23,0,1.7l2.75,2.75H1.2c-.66,0-1.2.54-1.2,1.2s.54,1.2,1.2,1.2h10.7l-2.75,2.75c-.47.47-.47,1.23,0,1.7.23.23.54.35.85.35s.61-.12.85-.35l4.8-4.8s0,0,0,0c.01-.01.02-.03.04-.04Z"/></svg>');
	background-repeat: no-repeat;
	transition: var(--transition);
	fill: var(--secondary);
	}
.link.before {
    padding: 14px 24px 14px 40px;
	}
.link.before:after {
    left: 18px;
	transform: rotateY(180deg);
	}
p + .link {
	margin-top:1rem;
	}
	
	
	
	
	
/* GRAPHICS */

img {
	width:100%;
	height:auto;
	display: block;
	}
	
.logo {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	font-size:1.25rem;
	gap: 8px;
	}
.logo div:first-child {
	font-weight: 800;
	color: var(--black);
	background: linear-gradient(45deg, var(--primary), var(--secondary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}
.logo div:last-child {
	font-weight: 500;
	color: var(--text);
	padding-left:8px;
	border-left: 1px solid var(--text);
	}	
	
	

	
	
/* LISTS */

ul {
	padding: 0;
    margin: 0;
    list-style: none;
	}
li {
	position: relative;
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 400;
	padding: 0 0 0 1.75rem;
	margin: 0 0 0.5rem;
	color:var(--text)
	cursor: default;
	transition: var(--transition);
	}
li::before {
	position:absolute;
	top: 0.75rem;
	left: 0;
	content:'';
	width: 1rem;
	height: 0.125rem;
	background-color: var(--secondary);
	}
li:hover {
	position: relative;
	font-weight: 600;
	letter-spacing:-0.2px;
	color:var(--dark)
	}

/* COLUMNS */

.columns {
	display: grid;
	column-gap: 48px;
	row-gap: 48px;
	}
.column {
	display: flex;
	flex-direction: column;
	gap: 48px;
	}
.one-two {
	grid-template-columns: 1fr 2fr;	
	}
.two {
	grid-template-columns: 1fr 1fr;	
	}
.two-one {
	grid-template-columns: 2fr 1fr;	
	}
.three {
	grid-template-columns: 1fr 1fr 1fr;	
	}
.middle {
	align-items: center;
	}	
.padding {
	padding: 40px 48px 32px;
	border-radius: 16px;
	}

	
/* PORTFOLIO */

.portfolio {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 24px;
	row-gap: 24px;
	}
.portfolio .item {
	display: flex;
	align-items: stretch;
	aspect-ratio: 1;
	border-radius:16px;
	background-size: cover;
	background-position: top center;
	}
.portfolio .item a {
	display: flex;
	align-items: stretch;
	width:100%;
	color: var(--white);
	}
.portfolio .item a div {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width:100%;
	border-radius:16px;
	padding: 40px 40px 32px;
	background: linear-gradient(rgba(128,28,255,0.1), rgba(67,0,153,1));
	transition: var(--transition);
	font-size: 0.875rem;
	line-height:1.5rem;
	font-weight:400;
	filter: grayscale(100%);
	opacity:0.1;
	}
.portfolio .item a div:hover {
	filter: grayscale(0);
	opacity:1;
	}
.portfolio .item a div * {
	transition: var(--transition);
	opacity:0;
	}
.portfolio .item a div:hover * {
	opacity:1;
	}
	
	
	
/* - - - - - - - - - - - - - - - - - - - - 1440 - - - - - - - - - - - - - - - - - - - - - - */

@media screen and (max-width: 1440px) {
		

	/* LAYOUT */
	
	section {
		}
	container {
		padding:96px 48px;
		}
	content {
		padding:32px 64px;
		}
}
	
	
	
	
	
/* - - - - - - - - - - - - - - - - - - - - 1280 - - - - - - - - - - - - - - - - - - - - - - */

@media screen and (max-width: 1280px) {
		

	/* LAYOUT */
	
	section {
		}
	container {
		padding:64px 32px;
		}
	content {
		padding:24px 48px;
		}
		
		
		/* COLUMNS */

	.columns {
		column-gap: 40px;
		row-gap: 40px;
		}
	.column {
		gap: 40px;
		}
	.padding {
		padding: 32px 40px 32px;
		border-radius: 12px;
		}
		
}

/* 1024 - - - - - - - - - - - - - - - - - - - - - - */

@media screen and (max-width: 1024px) {


	/* LAYOUT */
	
	section {
		}
	container {
		padding:96px 48px;
		}
	content {
		padding:0;
		}
	
	/* COLUMNS */

	.columns {
		display: grid;
		column-gap: 48px;
		row-gap: 48px;
		}
	.column {
		display: flex;
		flex-direction: column;
		gap: 48px;
		}
	.one-two {
		grid-template-columns: 1fr 2fr;	
		}
	.two {
		grid-template-columns: 1fr;	
		}
	.two-one {
		grid-template-columns: 2fr 1fr;	
		}
	.three {
		grid-template-columns: 1fr;	
		}
	.middle {
		align-items: center;
		}	
	.padding {
		padding: 40px 48px 32px;
		border-radius: 16px;
		}
		
	/* FONTS */

	h1 {
		font-size: 3.5rem;
		line-height: 3.75rem;
		margin:1.5rem 0;
		}
	h2 {
		font-size: 2.25rem;
		line-height: 2.75rem;
		}
}

/* 768 - - - - - - - - - - - - - - - - - - - - - - */

@media screen and (max-width: 768px) {

	/* LAYOUT */
	
	section {
		padding:0;
		}
	container {
		padding:96px 32px;
		}
	content {
		padding:0;
		}

	/* FONTS */

	h1 {
		font-size: 3.5rem;
		line-height: 3.75rem;
		margin:1.5rem 0;
		}
	h2 {
		font-size: 2.25rem;
		line-height: 2.75rem;
		}
}

/* 480 - - - - - - - - - - - - - - - - - - - - - - */

@media screen and (max-width: 480px) {

	/* LAYOUT */
	
	section {
		padding:0;
		}
	container {
		padding:96px 32px;
		}
	content {
		padding:0;
		}

	/* FONTS */

	h1 {
		font-size: 3rem;
		line-height: 3.5rem;
		margin:1.25rem 0;
		}
		
	.logo {
		font-size:1rem;
		}
}