html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent;}

main, article, aside, figure, footer, header, nav, section, details, summary {display: block;}

html {box-sizing: border-box;}

*, *:before, *:after {box-sizing: inherit;}

img {max-width: 100%;}

ul {list-style: none;} /* we'll restore bullets as needed for content */

blockquote, q {quotes: none;}

blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

table {border-collapse: separate; border-spacing: 0; text-align: left;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}
td img {vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #999; margin: 1rem 0; padding: 0;}

input, select {vertical-align: middle;}

pre {white-space: pre-line;}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}

small {font-size: .8rem;}

strong {font-weight: bold;}

sub, sup {font-size: .8rem; line-height: 0; position: relative;}
sup {top: -0.5rem;}
sub {bottom: -0.25rem;}

pre, code, kbd, samp {font-family: monospace, sans-serif;}

label, input[type=button], input[type=submit], input[type=file], button {cursor: pointer;}

button, input, select, textarea {margin: 0;}

ins {background-color: var(--highlight-color); color: #000; text-decoration: none;}
mark {background-color: var(--highlight-color); color: #000; font-style: italic; font-weight: bold;}

blockquote {padding: 2rem; border-left: 1px solid #333;}

.clearfix:after {content: ""; display: table; clear: both;} /* https://css-tricks.com/snippets/css/clear-fix/ */

/* ———— END THE GENERIC RESETS ———— */

:root {
	--font-system: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* https://css-tricks.com/snippets/css/system-font-stack */
	--font-big-heading:  "gomme-sans", sans-serif;
	--text-color: #333;
	--featured-color: #0068AA;
	--featured-color-hover: #69f;
	--highlight-color: #fcd700;
	--container-width: 1440px;
	--border-radius: 5px;
	--seafoam-color: #6CF7A4;
	--blue: #6CC1F7;
	--gold: #F2C6A6;
}

body {
	font-size: 16px;
	font-family: var(--font-system);
	color: var(--text-color);
	background-color: #000;
}

a {color: var(--featured-color);}
a:hover {color: var(--featured-color-hover);}

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

h1 {
	font-family: var(--font-big-heading);
	font-weight: 700;
	font-size: 4.375rem;
	line-height: 1.2;
}

header {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 12px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

header .button {
	color: #FFF;
	border: 1px solid #FFF;
	text-decoration: none;
	padding: 10px 30px;
	border-radius: var(--border-radius);
}

.top {
	overflow: hidden;
	position: relative;
}

.hero {
	padding: 175px 0 200px;
	max-width: 1440px;
	margin: 0 auto;	
}

#globe {
	position: absolute;
	z-index: -10;
  	width: 100%;
	height: 870px;
	top: 0px;
	right: 0;
	transform: translateX(530px);
	opacity: 0;
	transition: opacity 3s;
}

.hero .status {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 18px;
	background: linear-gradient(180deg, #151B27 0%, rgba(21, 27, 39, 0.62) 100%);
	box-shadow: 0px 2px 2px -2px rgba(255, 255, 255, 0.16) inset;	
	color: #FFF;
	padding: 6px 24px;
	width: auto;
}

.hero .status .label {
	margin-left: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
}

.hero .status .circle {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--seafoam-color);
	display: inline-block;
}

.hero h1 {
	color: #FFF;
	max-width: 880px;
	margin: 24px 0;
}

.hero .subtitle {
	font-size: 1.5rem;
	color: rgba(255, 255, 255, 0.8);
	max-width: 675px;
	margin: 24px 0;
	line-height: 150%;
}

.cta-button {
	display: inline-block;
	margin-top: 24px;
	background-color: #FFF;
	color: #000;
	transition: all 0.1s;
	border-radius: var(--border-radius);
	padding: 20px 72px;
	font-size: 1.125rem;
	text-decoration: none;
	font-weight: 700;
}

.cta-button.gold {
	color: rgba(195, 106, 42, 1);
}

@media(max-width:1440px) {
	header {
		padding: 10px 16px;
	}
	.hero {
		padding: 175px 16px 200px;
	}
}

@media (max-width: 1000px) {
	.hero {
		padding: 70px 16px 120px;
		text-align: center;
	}
	.hero h1 {
		font-size: 2.5rem;
	}
	.hero .subtitle {
		font-size: 1.3rem;
	}

	#globe {
		width: 100%;
		top: calc(100% - 260px);
		right: 0;
		transform: translateX(100px);
	}
}

@media (max-width: 660px) {
	.hero {
		padding: 30px 16px 100px;
	}
}

.key-points-container {
	background: linear-gradient(180deg, #151B27 0%, rgba(21, 27, 39, 0.62) 100%);
	padding: 48px 0;
}

.key-points {
	max-width: var(--container-width);
	margin: 0 auto;
	display: grid;
	gap: 90px;
	grid-template-columns: repeat(3, 1fr);
}

@media(max-width:1440px) {
	.key-points {
		padding: 0 16px;
	}
}

@media (max-width: 1000px) {
	.key-points-container {
		padding: 36px 16px;
	}

	.key-points {
		grid-template-columns: 1fr; /* 1 column for smaller screens */
		gap: 36px; /* smaller gutter */
	}

	.key-points .key-point .title .icon img {
		width: 20px;
		height: 20px;
	}
}

.key-points .key-point .title {
	color: #FFF;
	font-size: 1.5rem;
	font-weight: 500;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	font-family: var(--font-big-heading);
}

.key-points .key-point .title .text {
	margin-left: 10px;
}

.key-points .key-point .description {
	color: rgba(255, 255, 255, 0.8);
	line-height: 150%;
	font-size: 1.125rem;
}

footer p {
	width: 100%;
	display: flex;
	justify-content: space-between;
	max-width: var(--container-width);
	margin: 0 auto;	
	padding: 24px 0;
	color: rgba(255, 255, 255, 0.5);
}

footer p a {
	color: rgba(255, 255, 255, 0.5);
}

.block-container {
	display: flex;
	padding: 80px 0px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 48px;
	align-self: stretch;
}

.how-it-works {
	display: flex;
	width: 100%;
	max-width: var(--container-width);
	padding: 70px 60px;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(100deg, #0E3045 5.4%, rgba(26, 40, 70, 0.15) 34.43%, rgba(30, 37, 70, 0.24) 98.3%);
	border-radius: 10px;
}

.how-it-works .callout {
	display: flex;
	width: 545px;
	padding: 70px 60px;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	flex: 1 0 0;
}

.how-it-works .callout .small-text {
	color: var(--blue);
	font-size: 1.125rem;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

.how-it-works .callout h2 {
	color: #FFF;
	font-size: 4.375rem;
	font-style: normal;
	font-weight: 700;
	font-family: var(--font-big-heading);
	line-height: 130%;
	margin-bottom: 32px;
}

.how-it-works .steps {
	display: flex;
	width: 705px;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 36px;
	flex-shrink: 0;
	align-self: stretch;
}

.how-it-works .steps .step {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	align-self: stretch;
	
}

.how-it-works .steps .step .number {
	display: flex;
	min-width: 60px;
	height: 60px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 18px;
	background: linear-gradient(180deg, #151B27 0%, rgba(21, 27, 39, 0.62) 100%);
	box-shadow: 0px 1px 2px -2px rgba(255, 255, 255, 0.16) inset;
}

.how-it-works .steps .step .number span {
	background: linear-gradient(180deg, #C0E7FF 0%, #6CC1F7 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 700;
	line-height: 100%;
}

.how-it-works .steps .step .title {
	color: rgba(255, 255, 255);
	font-size: 1.5rem;
	font-weight: 400;
	font-family: var(--font-big-heading);
}

.how-it-works .steps .step .description {
	color: rgba(255, 255, 255, 0.8);
	font-size: 1.125rem;
	line-height: 150%;
	margin-top: 8px;
}

@media (max-width: 1200px) {
	.how-it-works .callout h2 {
		font-size: 3rem;
	}
}

@media (max-width: 1000px) {
	.how-it-works {
		flex-wrap: wrap;
  		padding: 16px;
	}

	.how-it-works .callout {
		flex: 100%;
		padding: 24px;
		margin-bottom: 36px;
	}

	.how-it-works .callout h2 {
  		margin-bottom: 0;
	}

	.how-it-works .steps {
		flex: 1;
	}

	.block-container {
		padding: 60px 16px;
	}

	.how-it-works .steps .step .number {
		min-width: 48px;
		height: 48px;
	}

	.how-it-works .steps .step .number span {
		font-size: 1rem;
	}
}

.tech-stacks {
	display: flex;
	width: 100%;
	max-width: var(--container-width);
	padding: 70px 0px;
	justify-content: space-between;
	align-items: center;
}

.tech-stacks .text {
	width: 555px;
	padding-left: 60px;
	color: #FFF;
	font-size: 30px;
}

.tech-stacks .tech-stacks-logos {
	position: relative;
	flex: 1;
	height: 100px;
	max-width: 765px;
	overflow: hidden;
}

.tech-stacks .tech-stacks-logos .occlusion:first-child {
	position: absolute;
	width: 100px;
	height: 100px;
	left: 0px;
	top: 0px;
	background: linear-gradient(90deg, #050A13 0%, rgba(0, 0, 0, 0) 100%);
	z-index: 3;
}

.tech-stacks .tech-stacks-logos .occlusion:last-child {
	position: absolute;
	width: 100px;
	height: 100px;
	right: 0px;
	top: 0px;
	background: linear-gradient(270deg, #050A13 0%, rgba(0, 0, 0, 0) 100%);
	z-index: 3;
}

.tech-stacks .tech-stack-carousel {
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	animation: carousel-animation 60s linear infinite;
}
  
@keyframes carousel-animation {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(calc(-100% + 744px));
	}
}

.tech-stacks .tech-stack-logo {
	width: 100px;
	height: 100px;
	background: linear-gradient(134.69deg, #2A3652 2.98%, #17223C 96.49%);
	border-radius: 10px;
	margin-right: 24px;
}

.tech-stacks .tech-stack-logo img {
	width: 100%;
	height: 100%;
}

@media (max-width: 1000px) {
	.tech-stacks { 
		flex-direction: column;
		justify-content: center;
		padding: 24px;
	
	}
	.tech-stacks .text {
		width: 100%;
		max-width: 550px;
		text-align: center;
		margin-bottom: 48px;
		padding: 0;
	}
	.tech-stacks .tech-stacks-logos {
		width: 100%;
		flex: auto;
	}
}



.hiring-process {
	display: flex;
	width: 100%;
	max-width: var(--container-width);
	padding: 70px 60px;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(258deg, rgba(215, 183, 167, 0.60) -6.29%, #241611 16.29%, #130B0A 90.04%);
	border-radius: 10px;
	gap: 60px;
}

.hiring-process .callout {
	display: flex;
	width: 545px;
	padding: 70px 60px;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	flex: 1 0 0;
}

.hiring-process .callout .small-text {
	color: var(--gold);
	font-size: 1.125rem;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

.hiring-process .callout h2 {
	color: #FFF;
	font-size: 3.5rem;
	font-style: normal;
	font-weight: 700;
	font-family: var(--font-big-heading);
	line-height: 130%;
	margin-bottom: 32px;
}

.hiring-process .steps {
	display: flex;
	width: 100%;
	max-width: 705px;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 36px;
	flex-shrink: 0;
	align-self: stretch;
}

.hiring-process .steps .step {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	align-self: stretch;
	
}

.hiring-process .steps .step .number {
	display: flex;
	min-width: 60px;
	height: 60px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 18px;
	background: linear-gradient(180deg, #1D1815 0%, rgba(34, 25, 18, 0.62) 100%);
	box-shadow: 0px 1px 2px -2px rgba(255, 255, 255, 0.16) inset;
}

.hiring-process .steps .step .number span {
	background: linear-gradient(180deg, #FCEBDF 0%, var(--gold) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 700;
	line-height: 100%;
}

.hiring-process .steps .step .title {
	color: rgba(255, 255, 255);
	font-size: 1.5rem;
	font-weight: 400;
	font-family: var(--font-big-heading);
}

.hiring-process .steps .step .description {
	color: rgba(255, 255, 255, 0.8);
	font-size: 1.125rem;
	line-height: 150%;
	margin-top: 8px;
}

@media (max-width: 1200px) {
	.hiring-process .callout h2 {
		font-size: 2.5rem;
	}

	.hiring-process .steps {
		width: 550px;
	}
}

@media (max-width: 1000px) {
	.hiring-process {
		flex-wrap: wrap;
  		padding: 16px;
	}

	.hiring-process .callout {
		flex: 100%;
		padding: 24px;
		order: -1;
	}

	.hiring-process .callout h2 {
  		margin-bottom: 0;
	}

	.hiring-process .steps {
		flex: 1;
	}

	.hiring-process .steps .step .number {
		min-width: 48px;
		height: 48px;
	}

	.hiring-process .steps .step .number span {
		font-size: 1rem;
	}
}


.leadership-team {
	display: flex;
	width: 100%;
	max-width: var(--container-width);
	padding: 70px 60px;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(150deg, #0E1E45 5.4%, rgba(26, 40, 70, 0.15) 34.43%, rgba(36, 58, 162, 0.24) 98.3%);
	border-radius: 10px;
}

.leadership-team .callout {
	display: flex;
	width: 545px;
	padding: 70px 60px;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	flex: 1 0 0;
}

.leadership-team .callout .small-text {
	color: var(--gold);
	font-size: 1.125rem;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

.leadership-team .callout h2 {
	color: #FFF;
	font-size: 3.5rem;
	font-style: normal;
	font-weight: 700;
	font-family: var(--font-big-heading);
	line-height: 130%;
	margin-bottom: 32px;
}

.leadership-team .people {
	display: flex;
	width: 100%;
	max-width: 705px;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 36px;
	flex-shrink: 0;
	align-self: stretch;
}

.leadership-team .person {
	display: flex;
}

.leadership-team .person img {
	width: 100px;
	height: 100px;
	margin-right: 24px;
}

.leadership-team .person .text {
	color: rgba(255, 255, 255, 0.8);	
}

.leadership-team .person .name {
	font-size: 32px;
	font-weight: 500;
	font-family: var(--font-big-heading);
	color: var(--gold);
	margin-bottom: 2px;	
}

.leadership-team .person .title {
	font-weight: 500;
	margin-bottom: 8px;
}

.leadership-team .person .bio {
	line-height: 1.4;
	font-weight: 300;
}

@media (max-width: 1200px) {
	.leadership-team .callout h2 {
		font-size: 2.5rem;
	}

	.leadership-team .steps {
		width: 550px;
	}
}

@media (max-width: 1000px) {
	.leadership-team {
		flex-wrap: wrap;
  		padding: 16px;
	}

	.leadership-team .callout {
		flex: 100%;
		padding: 24px;
		margin-bottom: 36px;
	}

	.leadership-team .callout h2 {
  		margin-bottom: 0;
	}

	.leadership-team .steps {
		flex: 1;
	}
}

.case-study-container {
	padding: 72px 0;
	width: 100%;
}

.case-study {
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	color: #FFF;
}

.case-study .text {
	width: 100%;
	margin-right: 50px;
}

.case-study .small-text {
	color: var(--blue);
	font-size: 1.125rem;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	margin-bottom:8px;
}

.case-study .title {
	font-size: 30px;
	line-height: 1.3;
	margin-bottom: 24px;
}

.case-study .case-study-quote {
	display: flex;
	width: 100%;
}

.case-study .case-study-quote > img {
	margin-right: 24px;
}

.case-study .case-study-quote p {
	color: rgba(255, 255, 255, 0.8);
	font-size: 18px;
	line-height: 1.5;
	margin-bottom: 12px;
}
.case-study .case-study-quote .author {
	display: flex;
	align-items: center;
}

.case-study .case-study-quote .author img {
	margin-left: 10px;
}

.case-study-properties {
	width: 100%;
	max-width: 555px;
	border-radius: 10px;
	border: 1px solid #39486B;
}

.case-study-properties .property {
	padding: 16px;
	border-bottom: 1px solid #39486B;
}

.case-study-properties .property:last-child {
	border-bottom: none;
}

.case-study-properties .property .small-text {
	color: rgba(255, 255, 255, 0.8);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.case-study-properties .property .text-with-icon {
	display: flex;
	align-items: center;
}

.case-study-properties .property .text-with-icon img {
	margin-right: 8px;
}

.case-study-properties .property .item-list {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.case-study-properties .property .item-list div {
	text-align: center;
}

.case-study-properties .property .item-list div img {
	margin-bottom: 4px;
}

@media (max-width: 1000px) {
	.case-study-container {
		padding: 24px 0px;
	}
	.case-study {
		flex-wrap: wrap;
  		padding: 24px;
	}

	.case-study > .text {
		margin-right: 0;
		margin-bottom: 48px;
	}

	.case-study .author-img {
		display: none;
	}
	
	.case-study .case-study-properties {
		max-width: 100%;
	}

	.case-study .case-study-quote .author {
		flex-direction: column;
		align-items: flex-start;
	}

	.case-study .case-study-quote .author img {
		margin-left: 0;
		margin-top: 8px;
	}
}

.end-cta {
	background: linear-gradient(180deg, #000 0%, rgba(21, 27, 39, 0.62) 100%);
	padding: 60px 16px 170px;
	margin: 0 auto;
	text-align: center;
}

.end-cta h2 {
	color: #FFF;
	max-width: 880px;
	margin: 24px auto 24px;
	font-family: var(--font-big-heading);
	font-weight: 700;
	font-size: 3.375rem;
	line-height: 1.2;
}

.end-cta .subtitle {
	font-size: 1.5rem;
	color: rgba(255, 255, 255, 0.8);
	max-width: 675px;
	margin: 24px auto;
	line-height: 130%;
}

.faq-container {
	color: #FFF;
	margin: 100px auto 0;
	max-width: 100%;
	width: 720px;
	border-radius: 10px;
	border: 1px solid #39486B;
	text-align: left;
}

.faq-container .faq-item {
	border-bottom: 1px solid #39486B;
	padding: 48px;
}

.faq-container .faq-item .question {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 12px;
	line-height: 150%;
}

.faq-container .faq-item .answer {
	font-size: 1.125rem;
	color: rgba(255, 255, 255, 0.8);
	line-height: 150%;
}

.border-glow {
	--radius: 16px;
	position: relative;
	border-radius: var(--radius);
  }

.border-glow::before {
	left: 0;
	right: 0;
	top: 0;
	border: 1px solid rgb(255 255 255/var(--border-opacity));
	--border-opacity: 0.8;
	height: var(--radius);
	border-radius: var(--radius) var(--radius) 0 0;
	border-bottom: 0px;
  }
  .border-glow::after, .border-glow::before {
	pointer-events: none;
	position: absolute;
	z-index: 50;
	mix-blend-mode: overlay;
	content: "";
  }
  .border-glow::after {
	--border-opacity: 1;
	border: 1px solid rgb(255 255 255/var(--border-opacity));
	inset: var(--radius) 0 0 0;
	border-top: none;
	-o-border-image: linear-gradient(180deg,hsla(0,0%,100%,.8) 0,transparent 40%) 1;
	border-image: linear-gradient(180deg,hsla(0,0%,100%,.8) 0,transparent 40%) 1;
  }

  .privacy {
	width: 100%;
	max-width: 750px;
	margin: 60px auto;
	color: #FFF;
	line-height: 1.4;
  }

  .privacy h1 {
	font-size: 2rem;
	margin-bottom: 1rem;
  }
  .privacy h2 {
	font-weight: bold;
	font-size: 1.2rem;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
  }
  .privacy ul {
	list-style: disc;
	margin-top: 8px;
	margin-bottom: 8px;
  }
  .privacy li {
	margin-left: 24px;
  }
  .privacy p {
	margin-bottom: 12px;
  }