@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

html {
	--color-magenta: #f72485;
	--color-purple: #7208b7;
	--color-indigo: #3a0ba3;
	--color-blue: #4361ee;
	--color-cyan: #4cc9f0;
	--color-salmon: #ff857b;
	--color-gray: #a4a4a4;
	--color-green: #4cf07e;
	--section-margin: 9rem;
	--6-margin: calc(var(--section-margin) / 2);
	}

body { 
	font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.1rem;
  background: black;
  color: var(--color-gray);
  background-image: url(images/dots.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position-y: -25vh;
	}


/* -------------------------

Typography

------------------------- */



h2, .h2 { 
	font-family: "Fraunces", serif;
	font-variation-settings: 'opsz' 72;
  font-weight: 350;
  font-size: 2.3rem;
  line-height: 1.05;
  letter-spacing: -.025rem;
  color: var(--color-blue);
	}

	@media (min-width: 768px) {

		h2, .h2 { font-size: 2.85rem; line-height: 1.1 }

	}

h3, .h3 {  
	font-weight: 100;
	color: var(--color-blue);
	}

h4, .h4 {
	font-weight: 500;
	color: var(--color-blue);
	}

.bigly {
	font-family: "Fraunces", serif;
	font-variation-settings: 'opsz' 144;
  font-weight: 800;
  font-size: 7.5rem;
  line-height: 1.1;
  letter-spacing: .05rem;
  margin-top: -1.5rem;
	}

a:hover,
a:focus,
a:focus-within {
	color: #fff;
	}

dt {
	margin-top: 3rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  color: #fff;
  text-underline-offset: .9rem;
  text-decoration: underline;
  text-decoration-color: var(--bs-gray-700);
	}

dd {
	position: relative;
	}

dd::before {
	content: "";
	display: block;
	width: .5rem;
	height: .5rem;
	background-color: var(--color-blue);
	position: absolute;
	left: -1.3rem;
  top: .6rem;
	}


/* -------------------------

Color Utilities

------------------------- */

.color-magenta { color: var(--color-magenta); }
.color-purple { color: var(--color-purple); }
.color-indigo { color: var(--color-indigo); }
.color-blue { color: var(--color-blue); }
.color-cyan { color: var(--color-cyan); }
.color-green { color: var(--color-green); }
.color-gray { color: var(--color-gray); }
.color-lightgray { color: var(--bs-gray-500); }
.color-darkgray { color: var(--bs-gray-600); }
.color-white { color: #fff }

.bg-magenta { background-color: var(--color-magenta); }
.bg-purple { background-color: var(--color-purple); }
.bg-indigo { background-color: var(--color-indigo); }
.bg-blue { background-color: var(--color-blue); }
.bg-cyan { background-color: var(--color-cyan); }
.bg-salmon { background-color: var(--color-salmon); }


/* -------------------------

Positioning Utilities

------------------------- */

.mt-6 { margin-top: var(--6-margin); }
.mb-6 { margin-bottom: var(--6-margin); }
.my-6 { margin-top: var(--6-margin); margin-bottom: var(--6-margin); }
.mt-section { margin-top: var(--section-margin); }
.mb-section { margin-bottom: var(--section-margin); }
.my-section { margin-top: var(--section-margin); margin-bottom: var(--section-margin); }
.py-section { padding-top: var(--section-margin); padding-bottom: var(--section-margin); }

@media (min-width: 768px) { 

	.mt-md-6 { margin-top: var(--6-margin) !important; }
	.mb-md-6 { margin-bottom: var(--6-margin) !important; }
	.my-md-6 { margin-top: var(--6-margin) !important; margin-bottom: var(--6-margin) !important; }
	.mt-md-section { margin-top: var(--section-margin) !important; }
	.mb-md-section { margin-bottom: var(--section-margin) !important; }
	.my-md-section { margin-top: var(--section-margin) !important; margin-bottom: var(--section-margin) !important; }
	.py-md-section { padding-top: var(--section-margin) !important; padding-bottom: var(--section-margin) !important; }

}


/* -------------------------

Header

------------------------- */

.header-border {
	height: 5px;
	background: 
		linear-gradient(
			90deg, 
			var(--color-cyan) 0%, 
			var(--color-cyan) 10%, 
			var(--color-blue) 10%, 
			var(--color-blue) 20%, 
			var(--color-indigo) 20%, 
			var(--color-indigo) 30%, 
			var(--color-purple) 30%, 
			var(--color-purple) 40%, 
			var(--color-magenta) 40%, 
			var(--color-magenta) 60%,
			var(--color-purple) 60%,
			var(--color-purple) 70%,
			var(--color-indigo) 70%,
			var(--color-indigo) 80%,
			var(--color-blue) 80%,
			var(--color-blue) 90%,
			var(--color-cyan) 90%,
			var(--color-cyan) 100%
		);
	}

.logo-wrapper {
	margin: 0 auto;
}

.logo-wrapper,
.logo-layer {
	max-width: 150px;
  max-height: 150px;
  width: 30vw;
  height: auto;
  aspect-ratio: 1;
	}

.logo-layer-icon {
	top: 1px;
	left: 1px;
	}

@media (min-width: 768px) {

	.logo-layer-icon {
		top: 0;
		left: 0;
		}

}

	.logo-layer-gradient {
		max-width: 148px;
		max-height: 148px;
		top: 1px;
		left: 1px;
		}




@keyframes spinner {
  to { transform: rotate(360deg); }
}

.logo-layer-gradient {
  background-image: linear-gradient(
    0deg,
    hsl(5deg 100% 74%) 0%,
    hsl(346deg 99% 66%) 12%,
    hsl(323deg 100% 45%) 27%,
    hsl(293deg 100% 34%) 45%,
    hsl(270deg 90% 36%) 67%,
    hsl(259deg 87% 34%) 100%
  );
  z-index: 1;
  border-radius: 50%;
  animation: spinner 20s linear infinite; 
}

.logo-layer-icon {
	background-image: url(images/icon_knockout.svg);
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 2;
	}



/* -------------------------

Content

------------------------- */

.vertical-line {
	width: 1px;
	height: 500px;
	background: 
		linear-gradient(
			180deg, 
			var(--color-salmon) 0%, 
			var(--color-magenta) 7%, 
			var(--color-purple) 39%, 
			var(--color-indigo) 65%, 
			rgba(0,0,0,1) 100%
		);
	}

.vertical-line-reverse {
	width: 1px;
	height: 100%;
	background: 
		linear-gradient(
			0deg, 
			var(--color-salmon) 0%, 
			var(--color-magenta) 7%, 
			var(--color-purple) 39%, 
			var(--color-indigo) 65%, 
			rgba(0,0,0,1) 100%
		);
	}


.circle-breaker {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	border: 1px solid var(--color-indigo);
	box-shadow:
		0 0 0 3px black,
		0 0 0 4px var(--color-indigo),
		0 0 0 7px black,
		0 0 0 8px var(--color-indigo);
	margin-top: var(--6-margin);
	margin-bottom: var(--6-margin);
	}


@media (min-width: 768px) { 

	.journey-start { height: 830px; }
	.journey-end { height: 170px; }

}

.journey-start-touchpoints span { line-height: 1; }

@media (max-width: 768px) {

	.journey-start-touchpoints span::after {
		content: " \2192 ";
	}

	.journey-start-touchpoints span:last-of-type::after {
		content: "";
	}

}

.journey-bar-start {
	height: 830px;
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
  background-image: 
  	linear-gradient(
	    0deg,
	    hsl(138deg 85% 62%) 0%,
	    hsl(187deg 100% 46%) 15%,
	    hsl(200deg 100% 48%) 30%,
	    hsl(211deg 100% 48%) 40%,
	    hsl(239deg 61% 53%) 70%,
	    hsl(259deg 87% 34%) 100%
	  );
	}

.journey-bar-end {
	height: 170px;
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 1rem;
  background-image: 
  	linear-gradient(
	    180deg,
	    hsl(138deg 85% 62%) 0%,
	    hsl(114deg 86% 68%) 20%,
	    hsl(94deg 90% 65%) 40%,
	    hsl(79deg 92% 61%) 60%,
	    hsl(67deg 93% 56%) 80%,
	    hsl(58deg 100% 50%) 100%
	  );
	}


.arrow {
	display: inline-block;
	height: 40px;
	width: 1px;
	background-color: var(--bs-gray-600);
	position: relative;
	}

	.arrow::before,
	.arrow::after {
		content: "";
		display: block;
		width: 1px;
		height: 24px;
		background-color: var(--bs-gray-600);
		position: absolute;
		}

	.arrow::after {
		transform: rotate(45deg);
		bottom: -4px;
    right: -8px;
		}

	.arrow::before {
		transform: rotate(-45deg);
		bottom: -4px;
    right: 8px;
		}

	.arrow-right {
		transform: rotate(-90deg);
		}





/* -------------------------

Footer

------------------------- */

footer {
	background-color: #120331;
	}