html {background-color: #23005E;}
body {font-family: "Sofia Sans Condensed", Impact, sans-serif; letter-spacing: .01em; color: #fff; margin: 0;}
img {max-width: 100%;}
h1,h2,h3,h4,h5 {font-weight: 900; text-transform: uppercase; line-height: 1em;}
h1 {font-size: 4.33em;}
h2 {font-size: 2.8em; text-align: center;}
h3 {font-size: 2.8em;}
h4 {font-size: 1.75em; color: #A672FF; margin: 0 0 .5em;}
p {margin: 0 0 1.25em; line-height: 1.33em;}
b {font-weight: 900; letter-spacing: .02em;}
a {color: #fff; text-decoration: none; transition: all .33s;}
a:hover {transition: all .33s;}
svg {fill: #fff;}

.container {max-width: 1440px; margin: auto; padding: 0 3%;}
section {margin: 3em auto 6em; scroll-margin-top: 150px;}
section > h2 {margin-top: 0;}
.highlight {color: #FFC946;}

.btn {font-family: "Noto Sans", sans-serif; font-weight: 800; color: #fff; background-color: #C41282; padding: .66em 1.25em; border-radius: 4px; letter-spacing: .02em}
.btn:hover {background-color: #f516a2;}

.spiralsection {
	display: flex; 
	align-items: center;
	justify-content: center;
	background-image: url('../img/spiral.png'); background-size: cover; 
	background-color: #391a6e; 
	border: 1px solid #61488b;
	border-radius: 8px;
}

/**** PARTY BUTTON ****/
@keyframes siren {
  0% {transform: translate3d(0, 0, 0);}
  20% {transform: translate3d(250%, 0, 0);}
  100% {transform: translate3d(250%, 0, 0);}
}

@keyframes flash {
  0% {opacity: 0}
  20% {opacity: .2}
  100% {opacity: 0}
}

.partybtn {position: relative; display: inline-block; overflow: hidden;}
.partybtn:before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	animation: flash 4s ease 0s infinite;
}

.partybtn:after {
	content: '';
	position: absolute;
	top: 0; left: -30%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg,rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 75%);
	animation: siren 4s ease 0s infinite;
	opacity: 0.25;
}


/**** HEADER ****/
#gradient-bar {height: 6px; background: linear-gradient(90deg,#C33F9F 0%, #6298CB 75%, #6A2E8B 100%);}
header {display: flex; justify-content: space-between; align-items: center; margin: 35px 0;}
header a {color: #fff; font-family: "Noto Sans", sans-serif; }
#logo, #trybtn {width: 190px;}
header nav {width: calc(100% - 380px); text-align: center;}
header nav a {font-size: 1.125em; margin: 0 2.25%;}



/**** MAIN HERO ****/
#mainhero {display: flex; justify-content: space-around;}
#mainhero h1 {margin: .25em 0;}
#mainhero p {font-size: 1.875em;}
#mainhero .btn {font-size: .66em;}
#herotext {max-width: 620px;}
#heroimg {max-width: 509px; position: relative;}
#heroimg img {margin: auto;}

/* sparkle stars */
.sparkle {position: absolute; opacity: 1;}
.sparkle.big {width: 23px;}
.sparkle.small {width: 14px;}
@keyframes twinkle {
  0 {opacity: 1}
  45% {opacity: 1;}
  50% {opacity: .33;}
  55% {opacity: 1;}
  100% {opacity: 1;}
}
#heroimg .sparkle:nth-of-type(odd) {animation: twinkle 2s infinite;}
#heroimg .sparkle:first-of-type {top: 10%; left: 15%;}
#heroimg .sparkle:nth-of-type(2) {top: 18%; left: 10%;}
#heroimg .sparkle:nth-of-type(3) {top: 30%; left: -2%; animation-delay: 8.66s;}
#heroimg .sparkle:nth-of-type(4) {top: 60%; left: 5%;}
#heroimg .sparkle:nth-of-type(5) {top: 65%; left: -5%; animation-delay: 7.25s;}
#heroimg .sparkle:nth-of-type(6) {top: 18%; right: -5%;}
#heroimg .sparkle:nth-of-type(7) {top: 31%; right: 0%; animation-delay: 1s;}
#heroimg .sparkle:nth-of-type(8) {top: 55%; right: -3%;}
#heroimg .sparkle:nth-of-type(9) {top: 70%; right: 15%; animation-delay: 3.5s}
#heroimg .sparkle:nth-of-type(10) {top: 80%; right: 10%;}



/**** REASON TO SPEND ****/
#reason {flex-direction: column; aspect-ratio: 3.3; text-align: center;}
#reason p {font-size: 1.4em; max-width: 950px;}



/**** BORN FROM ****/
#bornfrom {display: flex; position: relative;}
#borntext {width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#borntext * {max-width: 500px;}
#borntext p {font-size: 1.37em;}
#promise {
	width: 50%; 
	border: 2px dashed #4f337e; 
	border-radius: 8px; 
	font-size: 2em; 
	text-align: center; 
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
	align-items: center;
	aspect-ratio: 1.6;
}
#promise * {max-width: 415px;}
#promise svg {width: 2.25em;}

@keyframes spin {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

#builtby {
	font-family: "VT323", monospace; 
	text-transform: uppercase;
	font-size: 1.8em;
	line-height: .9em;
	color: #000;
	text-align: center;
	position: absolute; 
	bottom: -75px; right: 4%;
	aspect-ratio: 1;
	width: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#builtby span {transform: rotate(15deg);}


.wavycircle:before {
	content:'';
	
	--s: 200px; /* adjust to control the size */

	width: var(--s); 
	aspect-ratio: 1;
	--g:/calc(var(--s)*0.128) calc(var(--s)*0.128) radial-gradient(50% 50%,#000 99%,#0000 101%) no-repeat;
	mask: calc(50% + var(--s)*0.414) calc(50% + var(--s)*0) var(--g),calc(50% + var(--s)*0.383) calc(50% + var(--s)*0.159) var(--g),calc(50% + var(--s)*0.293) calc(50% + var(--s)*0.293) var(--g),calc(50% + var(--s)*0.159) calc(50% + var(--s)*0.383) var(--g),calc(50% + var(--s)*0) calc(50% + var(--s)*0.414) var(--g),calc(50% + var(--s)*-0.159) calc(50% + var(--s)*0.383) var(--g),calc(50% + var(--s)*-0.293) calc(50% + var(--s)*0.293) var(--g),calc(50% + var(--s)*-0.383) calc(50% + var(--s)*0.159) var(--g),calc(50% + var(--s)*-0.414) calc(50% + var(--s)*0) var(--g),calc(50% + var(--s)*-0.383) calc(50% + var(--s)*-0.159) var(--g),calc(50% + var(--s)*-0.293) calc(50% + var(--s)*-0.293) var(--g),calc(50% + var(--s)*-0.159) calc(50% + var(--s)*-0.383) var(--g),calc(50% + var(--s)*0) calc(50% + var(--s)*-0.414) var(--g),calc(50% + var(--s)*0.159) calc(50% + var(--s)*-0.383) var(--g),calc(50% + var(--s)*0.293) calc(50% + var(--s)*-0.293) var(--g),calc(50% + var(--s)*0.383) calc(50% + var(--s)*-0.159) var(--g),radial-gradient(calc(var(--s)*0.458),#000 99%,#0000 101%) subtract,calc(50% + var(--s)*0.496) calc(50% + var(--s)*0.099) var(--g),calc(50% + var(--s)*0.42) calc(50% + var(--s)*0.281) var(--g),calc(50% + var(--s)*0.281) calc(50% + var(--s)*0.42) var(--g),calc(50% + var(--s)*0.099) calc(50% + var(--s)*0.496) var(--g),calc(50% + var(--s)*-0.099) calc(50% + var(--s)*0.496) var(--g),calc(50% + var(--s)*-0.281) calc(50% + var(--s)*0.42) var(--g),calc(50% + var(--s)*-0.42) calc(50% + var(--s)*0.281) var(--g),calc(50% + var(--s)*-0.496) calc(50% + var(--s)*0.099) var(--g),calc(50% + var(--s)*-0.496) calc(50% + var(--s)*-0.099) var(--g),calc(50% + var(--s)*-0.42) calc(50% + var(--s)*-0.281) var(--g),calc(50% + var(--s)*-0.281) calc(50% + var(--s)*-0.42) var(--g),calc(50% + var(--s)*-0.099) calc(50% + var(--s)*-0.496) var(--g),calc(50% + var(--s)*0.099) calc(50% + var(--s)*-0.496) var(--g),calc(50% + var(--s)*0.281) calc(50% + var(--s)*-0.42) var(--g),calc(50% + var(--s)*0.42) calc(50% + var(--s)*-0.281) var(--g),calc(50% + var(--s)*0.496) calc(50% + var(--s)*-0.099) var(--g);
	 
	position: absolute; 
	background-color: #00C3B9;
	animation-name: spin;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}


/**** FEATURES ****/
#featureblocks {display: flex; justify-content: space-between; flex-wrap: wrap;}
.feature {
	width: 26%;
	margin-bottom: 1.5em;
	background-color: #391a6e; 
	border: 1px solid #61488b;
	border-radius: 8px;
	padding: 2em 3% 1em;
	display: flex; 
	flex-direction: column;
}
.feature p {font-size: 1.37em; line-height: 1.1em;}


/**** STEPS ****/
#steps {display: flex; justify-content: space-between; flex-wrap: wrap;}
#steps h2 {text-align: center; width: 100%; text-align: center;}
.launchstep {
	position: relative;
	font-size: 1.62em;
	text-transform: uppercase;
	text-align: center;
	border: 1px solid #61488b;
	border-radius: 8px;
	width: 24%;
	aspect-ratio: 1.25;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	margin: 2em 0;
}
.launchnum {
	position: absolute;
	top: -1em; left: calc(50% - 31px);
	width: 62px;
	line-height: 62px;
	font-size: 1.23em;
	font-weight: 900;
	background-color: #61488b;
	border-radius: 31px;
}
.launchstep svg {width: 1.75em; margin: 72px 0 16px;}
.launchstep .fa-solid {font-size: 1.6em; margin: 72px 0 16px;}
.launchstep p {max-width: 275px; line-height: 1.1em;}

/**** REVIEWS ****/
#reviews {padding: 5em 0; overflow-x: hidden;}
#reviews figure {font-size: 1.85em; text-align: center; max-width: 670px; font-weight: 300; margin: auto;}
#reviews figcaption {display:block; font-weight: 600; font-size: .6em; margin-top: 1em;}
#reviews .splide__pagination {bottom: -3em;}



/**** PRICING ****/
#pricing {
	max-width: 1080px;
	text-align: center;
	background-image: url('../img/price-back.png');
	background-size: 100% auto;
	background-position: 50%;
	background-repeat: no-repeat;
}
#priceblock {max-width: 460px; border: 1px solid #61488b; border-radius: 8px; background-color: #391a6e; margin: 0 auto 2em;}
#partyon {
	background-color: #00C3B9; 
	border-radius: 8px 8px 0 0; 
	font-size: 1.62em; 
	font-weight: 800; 
	padding: 12px; 
	text-shadow: 0px 1px 1px rgba(0,0,0,0.45);
}
#bigprice {font-size: 2em; padding: 50px 0;}
#trial {background-color: #4d317d; border-radius: 0 0 8px 8px; font-size: 1.37em; padding: 10px;}
#pricing .btn {font-size: 1.25em;}


/***** FAQ *****/
#faq {max-width: 870px;}
.accordion-text {border-bottom: 1px solid #61488b;}
.accordion-text input{display: none;}
.accordion-text label {
  margin: 0;
  padding: .75em .2em;
  position: relative;
  display: block;
  cursor: pointer;
  font-size: 1.62em;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.accordion-text label:after {
	content: "\276E";
	position: absolute;
	top: .9em; right: 4px;
	color: #fff;
	font-weight: normal;
	font-size: .96em;
	transition: transform .2s;
	transform: rotate(-90deg);
}

.accordion-text input:checked ~ label:after {transform: rotate(90deg); transition: transform .2s}

.accordion-text article {
	font-size: 1.37em;
	position: relative;
	overflow: hidden;
	padding: 0 1.5em;
	height: auto;
	max-height: 0;
	transition: max-height .4s;
}
.accordion-text input:checked ~ article {
  max-height: 200px;
  transition: max-height .4s;
}

.accordion-text article h1 {line-height: 1.33em; font-size: 1.5em}

/***** MOMENT *****/
#moments {flex-direction: column; aspect-ratio: 3.3;}
#moments img {max-width: 87px;}
#moments h2 {margin: .5em 0;}


/**** FOOTER ****/
footer {margin: 3em; text-align: center; text-transform: uppercase; font-size: 1.12em;}
footer a {margin: 0 14px; font-weight: 700;}


.textpage {max-width: 800px; margin: auto; font-family: "Noto Sans",sans-serif;}
.textpage h1 {font-size: 3em;}
.textpage h2 {text-align: left; font-size: 2em; margin: 1em 0;}

@media only screen and (max-width: 1099px) {
	.container {padding: 0 4%;}
	h1 {font-size: calc(14px + 6.5vw);}
	h2,h3 {font-size: calc(29px + 1vw); margin: .75em 0;}
	h4 {font-size: calc(19.5px + 1vw);}
	section {margin: 2em auto 5em; scroll-margin-top: 80px;}
	.spiralsection {padding: 0 3%;}
	
	#logo {width: 140px;}
	header nav {width: calc(100% - 330px);}
	
	#herotext {width: 100%;}
	#heroimg {display: none;}
	#mainhero p {font-size: calc(23px + 0.85vw);}

	#reason,#moments {aspect-ratio: 2.5;}
	
	#bornfrom {flex-wrap: wrap;}
	#borntext, #promise {width: 100%;}
	#promise {aspect-ratio: 2;}
	#builtby {width: 160px;}
	.wavycircle:before {--s: 160px;}
	
	.feature {width: 42% !important;}
	
	.launchstep {width: 48%; margin: 1em 0;}
	
	.accordion-text label {font-size: 1.5em;}
}

@media only screen and (max-width: 699px) {
	h3 {text-align: center;}
	section {margin: 2em auto 3em;}
	.spiralsection {background-image: none; background-color: transparent; border: none; padding: 0;}
	
	header {flex-wrap: wrap;}
	#logo {order: 1;}
	#trybtn {order: 2; width: 196px;}
	header nav {order: 3; width: 100%; margin-top: 1em;}
	header nav a {margin: 0 4%;}
	
	#mainhero {flex-direction: column;}
	#heroimg {display: block; width: 80%; margin: auto; order: 1;}
	#herotext {order: 2;}
	#herotext p:last-child {margin-bottom: 0;}
	
	#reason {text-align: left;}
	
	#promise {font-size: 1.66em; aspect-ratio: 1.2;}
	#builtby {width: 120px; font-size: 1.33em; bottom: -30px;}
	.wavycircle:before {--s: 120px;}

    .feature {width: 94% !important; margin-bottom: 2em;}
	
	.launchnum {left: calc(50% - 25px); width: 50px; line-height: 50px; font-size: 1.1em;}
	.launchstep {width: 100%; aspect-ratio: 2;}
	.launchstep svg {margin-top: 45px;}
	
	#reviews {padding: 0;}
	.splide__track {width: 90vw;}
	#reviews figure {width: 100%; font-size: 1.6em; max-width: unset;}
	
	.accordion-text label {font-size: 1.25em; padding: 1em .2em;;}
	.accordion-text article {font-size: 1.2em;}
	
	footer a {display: inline-block; margin: 7px 14px;}
}


/***** SPLIDE CAROUSEL JS STYLES *****/
.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}