main {
	display: block
}

h1 {
	font-size: 2em
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible
}

pre {
	font-family: monospace, monospace;
	font-size: 1em;
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word
}

a {
	background-color: transparent
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted
}

b,
strong {
	font-weight: bolder
}

code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em
}

small {
	font-size: 80%
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}

sub {
	bottom: -.25em
}

sup {
	top: -.5em
}

img {
	border-style: none
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0
}

button,
input {
	overflow: visible
}

button,
select {
	text-transform: none
}

button,
[type=button],
[type=reset],
[type=submit] {
	-webkit-appearance: button
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
	border-style: none;
	padding: 0
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
	outline: 1px dotted ButtonText
}

fieldset {
	padding: .35em .75em .625em
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal
}

progress {
	vertical-align: baseline
}

textarea {
	overflow: auto
}

[type=checkbox],
[type=radio] {
	box-sizing: border-box;
	padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
	height: auto
}

[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
	-webkit-appearance: none
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}

details {
	display: block
}

summary {
	display: list-item
}

template {
	display: none
}

[hidden] {
	display: none
}

@keyframes cardglow {
	0% {
		opacity: 0;
		-webkit-filter: blur(0);
		filter: blur(0);
		-webkit-animation-timing-function: cubic-bezier(.75, .25, .75, 1);
		animation-timing-function: cubic-bezier(.75, .25, .75, 1)
	}

	15% {
		opacity: .35;
		-webkit-filter: blur(20px);
		filter: blur(20px);
		-webkit-animation-timing-function: cubic-bezier(.2, .1, .2, .96);
		animation-timing-function: cubic-bezier(.2, .1, .2, .96)
	}

	100% {
		opacity: .2;
		-webkit-filter: blur(12px);
		filter: blur(12px)
	}
}

@keyframes simpleFade {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@keyframes fade05 {
	0% {
		opacity: 0
	}

	100% {
		opacity: .5
	}
}

@keyframes formFade {
	0% {
		opacity: 0
	}

	100% {
		opacity: .4
	}
}

@keyframes headlineFade {
	0% {
		opacity: 0;
		transform: translateY(10px)
	}

	50% {
		transform: translateY(0)
	}

	100% {
		opacity: 1
	}
}

@keyframes scaler {
	0% {
		opacity: 0;
		transform: scale(.9)
	}

	100% {
		opacity: 1;
		transform: scale(1)
	}
}

@keyframes shimmer {
	0% {
		background-position: -100px 0
	}

	10% {
		background-position: -100px 0
	}

	50% {
		background-position: 100px 0
	}

	100% {
		background-position: 100px 0
	}
}

@keyframes simpleFadeHeaderLines {
	0% {
		opacity: 0
	}

	100% {
		opacity: .55
	}
}

.homepage-header {
	position: absolute;
	height: 300px;
	top: 0;
	left: 0;
	width: 100%;
	opacity: .75;
	overflow: hidden;
	border-top-right-radius: 34px;
	border-top-left-radius: 34px
}

@media(min-width:900px) {
	.homepage-header {
		border-top-left-radius: 0
	}
}

@media(max-width:550px) {
	.homepage-header {
		border-top-left-radius: 24px;
		border-top-right-radius: 24px
	}
}

.page-header {
	margin-bottom: 5em
}

.header-lines-wrap {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: -1;
	overflow: hidden;
	opacity: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	animation: simpleFadeHeaderLines 2s ease-out .2s;
	animation-fill-mode: forwards
}

.header-lines-wrap #toplines {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	top: 0;
	z-index: 0;
	left: 50%;
	transform: translateX(-50%)
}

.header-lines-wrap #toplines g path {
	stroke: rgba(31, 42, 102, .685)
}

#stocketa_logotype {
	margin: 0 auto;
	display: block;
	opacity: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	animation: simpleFade 2s ease-out .5s;
	animation-fill-mode: forwards;
	color: #fff;
	text-align: center;
	font-size: 2.5rem;
	margin-top: 3rem;
	line-height: 1
}

@media(max-width:600px) {
	#stocketa_logotype {
		font-size: 2.2rem
	}
}

@media(max-width:560px) {
	#stocketa_logotype {
		margin-top: 2rem;
		font-size: 1.9rem
	}
}

@media(max-width:460px) {
	#stocketa_logotype {
		margin-top: .9em;
		font-size: 1.7rem
	}
}

#stocketa_logotype:after {
	content: "";
	position: absolute
}

#stocketa_logotype.noanim {
	animation: none !important;
	opacity: 1 !important
}

.stocketa-footer {
	font-size: .95rem;
	font-weight: 400;
	line-height: 1.4;
	color: rgba(85, 99, 132, .5);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .85), 0 -.5px 0 rgba(24, 29, 52, .2);
	text-align: center
}

@media(max-width:400px) {
	.stocketa-footer {
		font-size: 1.05rem
	}
}

.stocketa-footer p {
	max-width: 20rem;
	margin: 0 auto 1rem
}

.footer-links {
	padding: .5em;
	margin-top: 7.5em;
	text-align: center;
	color: var(--faint-color);
	line-height: 1;
	z-index: 1;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .75)
}

.footer-links a {
	font-size: .95em;
	font-weight: 500;
	text-decoration: none;
	color: rgba(85, 99, 132, .5);
	transition: all .25s ease-in-out;
	display: inline-block
}

.footer-links a:hover {
	color: rgba(47, 66, 85, .7)
}

.footer-links span {
	color: var(--faint-color);
	font-weight: 500
}

.footer-bg {
	background-image: linear-gradient(0deg, rgba(132, 161, 208, .33), transparent);
	position: absolute;
	width: 100%;
	height: 30rem;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
	border-bottom-left-radius: 34px;
	border-bottom-right-radius: 34px;
	box-shadow: inset 0 -1px .5px #ffffff54, inset -1px 0 .5px #ffffff54
}

@media(min-width:900px) {
	.footer-bg {
		border-bottom-left-radius: 0
	}
}

@media(max-width:550px) {
	.footer-bg {
		border-bottom-left-radius: 24px;
		border-bottom-right-radius: 24px
	}
}

.footer-colors {
	background-image: radial-gradient(at 23% 33%, #4d97ffcb 0, transparent 50%), radial-gradient(at 97% 21%, #7a4bf9c4 0, transparent 50%), radial-gradient(at 52% 44%, #ff5e6e4f 0, transparent 50%), radial-gradient(at 70% 83%, #33f25cf9 0, transparent 50%), radial-gradient(at 97% 96%, #ffcb70ba 0, transparent 50%), radial-gradient(at 32% 40%, #6892f4c6 0, transparent 50%), radial-gradient(at 72% 51%, #e7557fbc 0, transparent 50%);
	filter: blur(70px)saturate(200%);
	position: absolute;
	width: 100%;
	height: 300px;
	bottom: -160px;
	left: 0;
	right: 0;
	transform: translateZ(0);
	opacity: .55;
	-webkit-mask-image: linear-gradient(360deg, black, transparent);
	mask-image: linear-gradient(360deg, black, transparent);
	z-index: 0
}

@media(max-width:900px) {
	.footer-colors {
		opacity: .33
	}
}

.footer-bg-wrap {
	margin: 0 auto;
	display: block;
	position: fixed;
	display: grid;
	justify-content: center;
	padding-bottom: 5em;
	align-items: center;
	width: 56%;
	right: 0;
	bottom: 0;
	top: 0;
	mix-blend-mode: overlay
}

@media(max-width:900px) {
	.footer-bg-wrap {
		width: 100%;
		top: unset;
		bottom: 0;
		padding-bottom: 0;
		height: 50vh
	}
}

.footer-bg-wrap .coming-soon {
	margin-top: 2rem;
	opacity: 0;
	transform: scale(.92);
	--delay: 1s;
	transition: opacity 5s ease-out var(--delay), transform 5s ease-out var(--delay)
}

.footer-bg-wrap .footer-pattern {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	top: 0%;
	z-index: 0;
	width: 150%;
	right: 50%;
	transform-origin: top center;
	pointer-events: none;
	z-index: -5;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .12) 17%, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .4) 60%, transparent 70%);
	mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .12) 17%, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .4) 60%, transparent 70%);
	transition: all 4s ease-out 0s;
	transform: translateX(0%)scale(2);
	opacity: 0
}

.footer-bg-wrap.show .coming-soon,
.footer-bg-wrap.show .form-wrap {
	opacity: 1;
	transform: translateY(0)scale(1)
}

.footer-bg-wrap.show .footer-pattern {
	opacity: .9
}

.footer-bg-wrap .footer-slogan {
	text-align: center
}

.footer-bg-wrap .footer-slogan div {
	margin: 0 auto;
	letter-spacing: -.3px;
	font-size: 2.5em;
	font-weight: 800;
	line-height: 1.35;
	text-align: center;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
	color: #000
}

.footer-bg-wrap .footer-slogan div.line-1 {
	font-size: 3.7em
}

.footer-bg-wrap .footer-slogan div.line-2 {
	font-size: 3.9em
}

.footer-bg-wrap .footer-slogan div.line-3 {
	font-size: 7.45em;
	line-height: 1.2
}

@media(max-width:900px) {
	.footer-bg-wrap .footer-slogan div.line-1 {
		font-size: 6.4vw
	}

	.footer-bg-wrap .footer-slogan div.line-2 {
		font-size: 6.5vw
	}

	.footer-bg-wrap .footer-slogan div.line-3 {
		font-size: 12.5vw
	}
}

@media(min-width:900.1px) {
	.footer-bg-wrap .footer-slogan div.line-1 {
		font-size: 3.5vw
	}

	.footer-bg-wrap .footer-slogan div.line-2 {
		font-size: 3.65vw
	}

	.footer-bg-wrap .footer-slogan div.line-3 {
		font-size: 6.8vw
	}
}

.form-wrap {
	text-align: center;
	margin: 4em auto 1em
}

.form-wrap.form-wrap-footer {
	margin-top: 6em
}

.stay_tuned {
	font-size: 20px;
	font-weight: 500;
	text-decoration: none;
	padding: .7em 3.2em;
	border-radius: 100px;
	display: inline-block;
	font-smooth: always;
	-webkit-font-smoothing: antialiased;
	background: #fff;
	color: #000;
	transition: all .3s ease-in-out;
	animation: none;
	animation-fill-mode: none
}

.stay_tuned:hover {
	transform: scale(1.05);
	box-shadow: #82faee52 0 0 120px 4px
}

.copyright-wrap {
	display: grid;
	grid-auto-flow: row;
	align-items: center;
	justify-items: center
}

.copyright {
	text-decoration: none;
	opacity: .2;
	margin: 2.5em auto 0;
	transition: opacity .25s ease-in-out, transform .4s ease-in-out;
	transform: scale(.9)
}

.copyright svg {
	margin: 0 auto 1em;
	display: block
}

.copyright .p0label {
	opacity: 0;
	transition: opacity .5s ease-in-out, transform .5s ease-in-out;
	transform: translateY(6px);
	display: block;
	font-size: 1em;
	font-weight: 500;
	text-decoration: none;
	display: block;
	font-smooth: always;
	-webkit-font-smoothing: antialiased;
	color: var(--subtext-color)
}

.copyright:hover {
	opacity: .4;
	transform: scale(1)
}

.copyright:hover .p0label {
	opacity: .7;
	transform: translateY(0)
}

@keyframes tsla-start {
	0% {
		opacity: 0;
		transform: translate(10%, 24%)scale(.7)
	}

	100% {
		transform: rotate(350deg)translate(0, 0)scale(1);
		opacity: 1
	}
}

@keyframes aapl-start {
	0% {
		opacity: 0;
		transform: translate(-10%, 16%)scale(.6)
	}

	100% {
		transform: rotate(368deg)translate(0, 0)scale(1);
		opacity: 1
	}
}

@keyframes sq-start {
	0% {
		opacity: 0;
		transform: translate(20%, -26%)scale(.8)
	}

	100% {
		transform: rotate(355deg)translate(0, 0)scale(1);
		opacity: 1
	}
}

@keyframes shimmer {
	0% {
		background-position: -55% 0
	}

	100% {
		background-position: 135% 0
	}
}

@keyframes stockcard1Anim {
	0% {
		stroke-dashoffset: 1;
		stroke-opacity: 0
	}

	33% {
		stroke-opacity: 1
	}

	100% {
		stroke-dashoffset: 0;
		stroke-opacity: 1
	}
}

.header-phone-wrap {
	position: relative
}

@keyframes scalerSeq {
	0% {
		opacity: 0;
		transform: scale(.9)translate(-50%, -50%)
	}

	100% {
		opacity: 1;
		transform: scale(1)translate(-50%, -50%)
	}
}

@keyframes canvasAnim {
	100% {
		opacity: 1
	}
}

.logo-bar {
	display: grid;
	grid-template-columns: 32px 1fr;
	grid-gap: 16px;
	align-items: center;
	margin-top: 2em;
	margin-bottom: 2em;
	transition: all .35s ease-out
}

.logo-bar .app-icon {
	margin-left: 1px;
	transform-origin: left;
	transition: all .35s ease-out
}

.logo-bar h1 {
	margin: 0;
	transition: all .35s ease-out;
	font-size: 1.75em
}

.logo-bar:hover .app-icon {
	transform: scale(1.5);
	filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .2))
}

.logo-bar:hover h1 {
	transform: translateX(16px);
	color: rgba(11, 27, 67, .46)
}

.logo-bar-ext {
	display: none
}

@media(max-width:900px) {
	.logo-bar-ext {
		position: fixed;
		top: 0;
		width: 100%;
		display: grid;
		grid-template-columns: 1fr min-content 1fr;
		grid-gap: 16px
	}

	.logo-bar-ext h1 {
		display: inline-block;
		grid-column: 2;
		font-size: 1.65rem;
		color: #fff;
		text-shadow: 0 1px 2px rgba(0, 0, 0, .15);
		text-align: center
	}

	.logo-bar-ext .app-icon {
		grid-column: 2;
		width: 24px;
		height: 24px
	}
}

#phone-nav {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: 25vh;
	z-index: 19;
	grid-template-columns: 6vw 42px 1fr 42px 6vw;
	transition: all .2s ease-out
}

@media(max-width:900px) {
	#phone-nav {
		display: grid
	}
}

@media(max-width:400px) {
	#phone-nav {
		grid-template-columns: 3vw 36px 1fr 36px 3vw;
		top: 45vh
	}
}

#phone-nav .left,
#phone-nav .right {
	line-height: 0;
	display: grid;
	width: 42px;
	height: 42px;
	border-radius: 32px;
	background: rgba(76, 92, 109, .3);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	box-shadow: inset 0 0 1px rgba(0, 0, 0, .25), 0 1px rgba(255, 255, 255, .321);
	align-items: center;
	justify-content: center;
	transition: all .2s ease-out
}

#phone-nav .left:hover,
#phone-nav .right:hover {
	background: rgba(76, 92, 109, .5);
	transform: scale(1.1)
}

#phone-nav .left:active,
#phone-nav .right:active {
	background: rgba(201, 220, 240, .707);
	transform: scale(1)
}

#phone-nav .left svg,
#phone-nav .right svg {
	width: 28px;
	height: 28px;
	fill: #fff;
	filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .1))
}

@media(max-width:400px) {

	#phone-nav .left,
	#phone-nav .right {
		width: 36px;
		height: 36px
	}
}

#phone-nav .left {
	grid-column: 2;
	opacity: 0;
	transform: scale(.8)
}

#phone-nav .right {
	grid-column: 4;
	transform: rotate(180deg)
}

#phone-nav .right:hover {
	transform: rotate(180deg)scale(1.1)
}

#phone-nav .right:active {
	background: rgba(201, 220, 240, .707);
	transform: rotate(180deg)scale(1)
}

#content #primary {
	width: 44%;
	left: 0;
	top: 0;
	bottom: 0;
	min-height: 100vh;
	height: 100%;
	background: linear-gradient(0deg, white 91%, rgba(255, 255, 255, .93), rgba(255, 255, 255, .85), rgba(255, 255, 255, .8), rgba(255, 255, 255, .72), rgba(255, 255, 255, .33));
	z-index: 10;
	padding: 1em 4vw;
	box-shadow: 1px 1px 20px #47536d21, inset 0 1px 1px rgba(255, 255, 255, .88), inset 1px 0 rgba(255, 255, 255, .53);
	z-index: 2;
	border-radius: 34px;
	margin: 6px 0 6px 6px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px)
}

#content #primary .logo-inline {
	display: none
}

@media(max-width:900px) {
	#content #primary {
		width: calc(100% - 3vw);
		position: relative;
		height: auto;
		padding: 1em 0;
		z-index: 99;
		border-radius: 34px;
		margin: 85% 0 50vh 1.5vw;
		transition: transform .5s var(--cubic-anim-1)0s
	}

	#content #primary h1 {
		text-align: center;
		font-size: 1.5em
	}

	#content #primary .header-hero {
		margin: 0 auto;
		max-width: 28em
	}

	#content #primary .logo-bar-inline {
		display: none
	}

	#content #primary .logo-inline {
		display: grid;
		align-items: center;
		justify-content: center
	}

	#content #primary .logo-inline .app-icon {
		margin: calc(-51px - 1em)auto 0;
		width: 102px;
		height: 102px;
		transition: all .5s var(--cubic-anim-1);
		filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .2))
	}

	#content #primary .logo-inline .app-icon:hover {
		transform: scale(1.33);
		filter: drop-shadow(0 3px 28px rgba(0, 0, 0, .2))
	}

	#content #primary #features .feature {
		cursor: auto
	}

	#content #primary #features .feature:hover {
		box-shadow: none
	}
}

@media(max-width:550px) {
	#content #primary {
		width: calc(100% - 8px);
		position: relative;
		height: auto;
		padding: 1em 1.5em;
		z-index: 99;
		border-radius: 24px;
		margin-left: 4px
	}

	#content #primary h2.hero-text {
		font-size: 11.8vw;
		margin-top: 1.5rem
	}

	#content #primary .desc-wrap p {
		margin-top: 2rem;
		margin-bottom: 2rem
	}

	#content #primary .desc-wrap p.qr-instructions {
		margin: 0
	}

	#content #primary .header-hero {
		max-width: auto
	}

	#content #primary .logo-inline .app-icon {
		margin: calc(-40px - 1em)auto 0;
		width: 80px;
		height: 80px
	}

	#content #primary #features {
		margin-top: 4em
	}

	#content #primary #features .feature {
		margin-bottom: 1rem
	}

	#content #primary #features .feature .content p {
		font-size: 16px
	}

	#content #primary #features .feature:hover {
		box-shadow: none
	}
}

@media(max-width:500px) {
	#content #primary {
		margin-top: 120%
	}

	#content #primary h2.hero-text {
		margin-top: 1.5rem
	}

	#content #primary .header-hero .desc-wrap p {
		font-size: 5.25vw
	}
}

@media(max-width:400px) {
	#content #primary {
		margin-top: 500px
	}

	#content #primary #features {
		margin-top: 4em;
		margin-bottom: 4em
	}

	#content #primary .stocketa-footer {
		text-align: left
	}

	#content #primary .stocketa-footer p {
		margin: 0 0 1em;
		max-width: auto
	}

	#content #primary .footer-links {
		margin-top: 4em
	}
}

@media(max-width:355px) {
	#content #primary #features .feature {
		grid-template-rows: 54px 1fr;
		grid-template-columns: none;
		margin-bottom: 1em
	}

	#content #primary #features .feature .icon {
		width: 54px;
		height: 54px
	}

	#content #primary #features .feature .icon svg {
		width: 30px;
		height: 30px
	}
}

@media(min-width:1460px) {
	#content #primary {
		width: 38%;
		max-width: 38.5rem;
        height:auto;
	}

	#content .hero-phone-content {
		width: 62%
	}

	.footer-bg-wrap {
		width: 62%
	}
}

.header-bg {
	position: absolute;
	bottom: 50px;
	left: 0%;
	width: 100%;
	height: 350px;
	background-image: radial-gradient(140% 119% ellipse at top, rgba(105, 201, 102, .4) 14%, rgba(39, 187, 219, .33) 36%, rgba(139, 71, 206, .2) 52%, rgba(218, 64, 134, .1) 70%, rgba(255, 149, 116, 0) 82%, transparent 100%);
	opacity: .33;
	z-index: -4
}

@keyframes phoneScaler {
	0% {
		opacity: 0;
		transform: translateY(220px)scale(.9)rotate(3deg)
	}

	66% {
		opacity: 1;
		transform: translateY(-50px)scale(1.025)rotate(-2deg)
	}

	100% {
		opacity: 1;
		transform: translateY(0)scale(1)rotate(0)
	}
}

@keyframes phoneScalerLite {
	0% {
		opacity: 0;
		transform: translateY(180px)scale(.95)rotate(-4deg)
	}

	45% {
		opacity: 1;
		transform: translateY(15px)scale(1.02)rotate(3deg)
	}

	100% {
		opacity: 1;
		transform: translateY(0)scale(1)rotate(0)
	}
}

@keyframes phoneFader {
	0% {
		opacity: 0;
		transform: translateX(50px)scale(.9)
	}

	100% {
		opacity: 1;
		transform: translateX(0)scale(1)
	}
}

#hero-fallback,
.hero-phone {
	z-index: 999;
	height: auto;
	max-height: 65%;
	max-width: 80%;
	position: fixed;
	object-fit: contain
}

@media screen and (min-width:900.1px) and (max-width:1200px) and (min-height:1000.1px) {

	#hero-fallback,
	.hero-phone {
		max-width: 380px
	}
}

@media screen and (min-width:900.1px) and (max-width:1100px) and (max-height:1000px) {

	#hero-fallback,
	.hero-phone {
		max-width: 70%;
		max-height: 75%
	}
}

@media(max-height:1000px) {

	#hero-fallback,
	.hero-phone {
		max-height: 75%
	}
}

@media(max-width:900px) {

	#hero-fallback,
	.hero-phone {
		max-width: 350px;
		width: calc(100% - 2em);
		position: absolute;
		height: auto;
		margin: 0 auto;
		top: 6em
	}
}

@media(min-width:900px) {

	#hero-fallback,
	.hero-phone {
		filter: drop-shadow(0 7px 30px #ffffff86)
	}
}

#hero-fallback.jpg-mask,
.hero-phone.jpg-mask {
	mask-image: url(/phone-alpha-mask.svg);
	-webkit-mask-image: url(/phone-alpha-mask.svg);
	mask-size: 100% auto;
	-webkit-mask-size: 100% auto
}

@media(min-width:900px) {
	#hero-fallback.initial {
		opacity: 0;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		animation: phoneScaler .95s cubic-bezier(.25, -.25, .25, 1.25)0s;
		animation-fill-mode: forwards
	}
}

@media(max-width:900px) {
	#hero-fallback.initial {
		opacity: 0;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		animation: phoneScalerLite .75s cubic-bezier(.15, -.15, .15, 1)0s;
		animation-fill-mode: forwards
	}

	.hero-phone.initial {
		opacity: 0;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		animation: phoneFader .7s cubic-bezier(.15, -.15, .15, 1)1s;
		animation-fill-mode: forwards
	}
}

.hero-text {
	font-size: 3.9em;
	letter-spacing: -1px;
	font-weight: 800;
	color: transparent;
	line-height: 1.1;
	margin-bottom: 1rem;
	opacity: .88;
	font-smooth: always;
	-webkit-font-smoothing: antialiased;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	-webkit-text-fill-color: transparent;
	-moz-text-fill-color: transparent;
	transition: background .2s ease-out;
	background-image: linear-gradient(-333deg, #68fd97 -100%, #fddd68 -60%, #fd9068 -20%, #ab68fd 20%, #68c1fd 60%, #68fd77 100%);
	filter: drop-shadow(0 .5px 0 rgba(42, 49, 103, .85))
}

@media(min-width:900.1px) and (max-width:1250px) {
	.hero-text {
		font-size: 5.2vw
	}
}

@media(min-width:450.1px) and (max-width:900px) {
	.hero-text {
		font-size: 3.8rem
	}
}

.header-hero {
	margin-top: 20vh;
	margin-bottom: 2em
}

.header-hero p {
	font-weight: 500;
	font-size: 1.7em;
	line-height: 1.35;
	color: rgba(56, 72, 91, .75);
	margin: 2.75rem auto;
	font-smooth: always;
	-webkit-font-smoothing: antialiased;
	letter-spacing: -.5px;
	position: relative
}

.header-hero p a {
	color: #000;
	text-decoration: none;
	transition: color .3s ease-out;
	position: relative;
	font-weight: 500
}

.header-hero p a::before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #818a9985;
	transform: scaleX(0);
	transform-origin: top left;
	transition: transform .3s ease-out
}

.header-hero p a:hover::before {
	transform: scaleX(1)
}

.header-hero p span {
	padding: 12px 0;
	font-weight: 500;
	color: rgba(29, 38, 48, .85);
	background-image: url(brush.svg);
	background-repeat: no-repeat
}

@media(min-width:900.1px) and (max-width:1250px) {
	.header-hero p {
		font-size: 2.2vw
	}
}

@media(min-width:450.1px) and (max-width:850px) {
	.header-hero p {
		font-size: 1.45em
	}
}

@media(max-width:450px) {
	.header-hero p {
		font-size: 1.35em
	}
}

@keyframes hideMask {
	99% {
		-webkit-mask-size: 100% 200%;
		mask-size: 100% 200%
	}

	100% {
		-webkit-mask-image: none;
		mask-image: none
	}
}

.hero-phone-content {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 56%;
	height: 100vh;
	right: 0;
	top: -10px;
	bottom: 0;
	z-index: 10
}

.hero-phone-content.hide-mask {
	animation: hideMask 2s ease-out;
	animation-fill-mode: forwards;
	animation-iteration-count: 1
}

@media(min-width:900px) {
	.hero-phone-content {
		-webkit-mask-image: linear-gradient(0deg, transparent 25%, black 40%);
		mask-image: linear-gradient(0deg, transparent 25%, black 40%);
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%
	}
}

@media screen and (max-width:900px) and (-webkit-min-device-pixel-ratio:0) {
	.hero-phone-content::-webkit-scrollbar {
		display: none !important;
		height: 0;
		width: 0;
		background-color: transparent
	}
}

@media(max-width:900px) {
	.hero-phone-content {
		width: 100%;
		position: fixed;
		top: 6rem;
		height: auto;
		bottom: unset;
		padding: 0 10vw;
		scroll-snap-type: x mandatory;
		overflow-x: scroll;
		overflow-y: hidden;
		display: flex;
		align-items: center;
		-webkit-overflow-scrolling: touch;
		justify-content: flex-start
	}

	.hero-phone-content .hero-phone,
	.hero-phone-content #hero-fallback {
		max-width: 350px;
		scroll-snap-align: center;
		margin: 0 0 0 20vw;
		top: 0;
		position: relative
	}

	.hero-phone-content .hero-phone:last-child {
		margin-right: 20vw
	}
}

@media(max-width:500px) {
	.hero-phone-content {
		height: auto;
		-webkit-mask-image: none;
		mask-image: none
	}

	.hero-phone-content .hero-phone,
	.hero-phone-content #hero-fallback {
		margin: 0 0 0 10vw;
		max-width: 300px
	}
}

#content .hero-phone-content .hero-phone.front,
#content .hero-phone-content #hero-fallback.front {
	z-index: 9999
}

#content .hero-phone-content .hero-phone.mid,
#content .hero-phone-content #hero-fallback.mid {
	z-index: 99
}

#content .hero-phone-content .hero-phone.back,
#content .hero-phone-content #hero-fallback.back {
	z-index: 10
}

@keyframes heroBGFade {
	0% {
		opacity: 0
	}

	100% {
		opacity: .35
	}
}

.phone-bg {
	z-index: -1;
	overflow-x: hidden;
	opacity: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	animation: heroBGFade 3s ease-in-out .8s;
	animation-fill-mode: forwards;
	height: 100%;
	position: fixed;
	margin-left: auto;
	margin-right: auto;
	top: 0;
	z-index: 0;
	width: auto;
	left: 50%;
	transform: translateX(-50%)scale(.6);
	transform-origin: center;
	-webkit-mask-image: radial-gradient(black 25%, transparent 90%);
	mask-image: radial-gradient(black 25%, transparent 90%)
}

@keyframes glow {
	0% {
		opacity: 0;
		-webkit-filter: blur(30px);
		filter: blur(30px);
		-webkit-animation-timing-function: cubic-bezier(.75, .25, .75, 1);
		animation-timing-function: cubic-bezier(.75, .25, .75, 1)
	}

	15% {
		opacity: 1;
		-webkit-filter: blur(200px);
		filter: blur(200px);
		-webkit-animation-timing-function: cubic-bezier(.2, .1, .2, .96);
		animation-timing-function: cubic-bezier(.2, .1, .2, .96)
	}

	100% {
		opacity: .5;
		-webkit-filter: blur(100px);
		filter: blur(100px)
	}
}

.phone-glow {
	--angle: 0;
	--scale: 1;
	--bgop: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	animation: glow 3s cubic-bezier(.68, -.6, .32, 1.25)1s;
	animation-fill-mode: forwards;
	z-index: -1;
	width: 400px;
	height: 600px;
	margin: 0 auto;
	border-radius: 600px;
	position: fixed;
	transform: translate3d(-50%, -50%, 0)scale(var(--scale));
	background: conic-gradient(from var(--angle) at 50% 50%, #00f3ff 91deg, #9971ff 125deg, #8fffac 306deg)
}

@media(max-width:450px) {
	.phone-glow {
		width: 25%;
		height: 25%
	}
}

@keyframes stockPath {
	0% {
		offset-distance: 28%;
		offset-rotate: 20deg
	}

	100% {
		offset-distance: 55%;
		offset-rotate: -20deg
	}
}

@keyframes stockPath1 {
	100% {
		offset-distance: 100%;
		offset-rotate: 0
	}
}

.stockcards-wrap {
	user-select: none;
	pointer-events: none;
	position: fixed;
	width: 52%;
	height: 110vh;
	margin: 0 auto 0;
	z-index: 99;
	top: 0;
	right: 0;
	bottom: 0;
	--tsla-delay: 0.4s;
	--aapl-delay: 0.55s;
	--sq-delay: 0.7s;
	--tsla-rotate: 10s;
	--aapl-rotate: 12s;
	--sq-rotate: 9s;
	--card-start-duration: 0.6s
}

@media(max-width:900px) {
	.stockcards-wrap {
		width: 87%;
		z-index: 5
	}
}

@media(min-width:1450px) {
	.stockcards-wrap {
		width: 62%
	}
}

.stockcards-wrap .symbol {
	position: absolute;
	top: 13px;
	left: 13px;
	line-height: 1;
	transform: scale(.95);
	transform-origin: top left
}

.stockcards-wrap .symbol svg path {
	fill: #fff;
	opacity: 1;
	fill-opacity: 1
}

.stockcards-wrap .stockcard {
	position: absolute;
	top: 0;
	right: 0;
	width: 82px;
	height: 82px;
	background: radial-gradient(110% 100% ellipse at 80% 70%, #ffffff6f 0%, rgba(255, 255, 255, 0) 100%), rgba(83, 116, 152, 7%);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	opacity: 0;
	z-index: 10;
	border-radius: 18px;
	box-shadow: 0 4px 15px #616e7c1d, inset 0 1px 1px rgba(255, 255, 255, .389), 0 1px 1px rgba(34, 50, 94, 8%)
}

.stockcards-wrap .stockcard .stockcard-line-wrap {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden
}

.stockcards-wrap .stockcard .stockcard-line-wrap .stockcard-path {
	position: absolute;
	bottom: 14px;
	left: -2px
}

.stockcards-wrap .stockcard .stockcard-line-wrap .stockcard-path path {
	stroke-dashoffset: 1;
	stroke-dasharray: 1;
	animation-name: stockcard1Anim;
	animation-duration: 3s;
	animation-delay: .85s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-direction: normal;
	stroke: #fff
}

.stockcards-wrap .stockcard:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 16px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	animation: cardglow 0s cubic-bezier(.68, -.6, .32, 1.25)0s;
	animation-fill-mode: forwards;
	opacity: 0;
	transform: translate3d(0, 0, 0);
	z-index: 9
}

.stockcards-wrap .stockcard-1 {
	position: absolute;
	top: 10%;
	left: calc(33% - 200px);
	width: 90px;
	height: 90px;
	offset-path: path("M15 2c6 0 9-4 13 0 3 3 0 6 0 12 0 7 3 10 0 13-4 3-6 0-13 0S4 30 1 27s0-6 0-13C1 8-2 5 1 2c4-4 7 0 14 0z");
	offset-rotate: 1deg;
	animation-name: tsla-start, stockPath1;
	animation-duration: var(--card-start-duration), 12s;
	animation-delay: var(--tsla-delay), calc(var(--tsla-delay) + var(--card-start-duration));
	animation-timing-function: ease-out, linear;
	animation-iteration-count: 1, infinite;
	animation-fill-mode: forwards;
	animation-direction: normal, normal
}

.stockcards-wrap .stockcard-1 .stockcard-line-wrap .stockcard-path {
	bottom: 18px
}

.stockcards-wrap .stockcard-1:after {
	animation-delay: var(--tsla-delay)
}

.stockcards-wrap .stockcard-2 {
	position: absolute;
	top: 30%;
	left: auto;
	right: calc(32% - 185px);
	width: 86px;
	height: 86px;
	offset-path: path("M15 2c6 0 9-4 13 0 3 3 0 6 0 12 0 7 3 10 0 13-4 3-6 0-13 0S4 30 1 27s0-6 0-13C1 8-2 5 1 2c4-4 7 0 14 0z");
	animation-name: aapl-start, stockPath1;
	offset-rotate: 1deg;
	animation-duration: var(--card-start-duration), 19s;
	animation-delay: var(--aapl-delay), calc(var(--aapl-delay) + var(--card-start-duration));
	animation-timing-function: ease-out, ease-in-out;
	animation-iteration-count: 1, infinite;
	animation-fill-mode: forwards;
	animation-direction: normal, alternate
}

.stockcards-wrap .stockcard-2 .stockcard-line-wrap .stockcard-path {
	bottom: 16px
}

.stockcards-wrap .stockcard-2:after {
	animation-delay: var(--aapl-delay)
}

.stockcards-wrap .stockcard-3 {
	position: absolute;
	top: 77%;
	left: calc(40% - 220px);
	width: 92px;
	height: 92px;
	offset-path: path("M15 2c6 0 9-4 13 0 3 3 0 6 0 12 0 7 3 10 0 13-4 3-6 0-13 0S4 30 1 27s0-6 0-13C1 8-2 5 1 2c4-4 7 0 14 0z");
	animation-name: sq-start, stockPath1;
	offset-rotate: 1deg;
	animation-duration: var(--card-start-duration), 15s;
	animation-delay: var(--sq-delay), calc(var(--sq-delay) + var(--card-start-duration));
	animation-timing-function: ease-out, ease-in-out;
	animation-iteration-count: 1, infinite;
	animation-fill-mode: forwards;
	animation-direction: normal, alternate
}

.stockcards-wrap .stockcard-3:after {
	animation-delay: var(--sq-delay)
}

.qr-animate-forward {
	animation-name: qrForward;
	animation-fill-mode: backwards;
	animation-duration: .8s;
	animation-timing-function: cubic-bezier(.68, -.6, .32, 1.15)
}

@keyframes qrForward {
	0% {
		transform: scale(1)
	}

	100% {
		transform: scale(.25)
	}
}

.qr-animate-backward {
	animation-name: qrBackward;
	animation-fill-mode: forwards;
	animation-duration: .8s;
	animation-timing-function: cubic-bezier(.68, -.6, .32, 1.15)
}

@keyframes qrBackward {
	0% {
		transform: scale(.25)
	}

	100% {
		transform: scale(1)
	}
}

.bg-animate-forward {
	animation-name: bgForward;
	animation-fill-mode: backwards;
	animation-duration: .5s;
	animation-delay: .2s;
	animation-timing-function: ease-in-out
}

@keyframes bgForward {
	0% {
		opacity: 0;
		transform: scale(.94)
	}

	100% {
		opacity: 1;
		transform: scale(1)
	}
}

.bg-animate-backward {
	animation-name: bgBackward;
	animation-fill-mode: forwards;
	animation-duration: .5s;
	animation-delay: .2s;
	animation-timing-function: ease-in-out
}

@keyframes bgBackward {
	0% {
		opacity: 1;
		transform: scale(1)
	}

	100% {
		opacity: 0;
		transform: scale(.94)
	}
}

@keyframes footerTextForward {
	0% {
		opacity: 0;
		transform: translateY(40px)scale(1.2)
	}

	100% {
		opacity: 1;
		transform: scale(1)
	}
}

@keyframes footerTextBackward {
	0% {
		opacity: 1;
		transform: scale(1)
	}

	100% {
		opacity: 0;
		transform: scale(.94)
	}
}

.footer-anim-backward {
	animation-name: footerTextBackward;
	animation-fill-mode: forwards;
	animation-duration: 0s;
	animation-delay: 0s;
	animation-timing-function: ease-in-out
}

.footer-anim-forward div {
	animation: 2s cubic-bezier(0, .4, 0, 1)0s backwards footerTextForward
}

.footer-anim-forward div.line-1 {
	animation-delay: 0s
}

.footer-anim-forward div.line-2 {
	animation-delay: .45s
}

.footer-anim-forward div.line-3 {
	animation-delay: .9s
}

@keyframes shimmer2 {
	0% {
		background-position: -85% 0
	}

	100% {
		background-position: 155% 0
	}
}

p.qr-instructions {
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.6;
	color: rgba(255, 255, 255, .7);
	margin: 18px auto 1em;
	text-align: center;
	z-index: 0;
	font-smooth: always;
	-webkit-font-smoothing: antialiased
}

.features-header-app-icon-wrap {
	margin: 0 auto;
	display: block;
	line-height: 0;
	position: relative;
	height: 170px;
	width: 170px;
	cursor: pointer
}

@media(max-width:450px) {
	.features-header-app-icon-wrap {
		transform: scale(.65)
	}
}

.features-header-app-icon {
	animation-fill-mode: forwards
}

.features-header-app-icon,
.features-header-app-icon-blur {
	margin: 0 auto;
	width: 170px;
	height: 170px;
	position: absolute;
	top: 0;
	left: calc(50% - 85px)
}

#feature-qr-code {
	background: #fff;
	border-radius: 36px;
	border-radius: 24px;
	margin: 0 auto;
	width: 158px;
	height: 158px;
	position: absolute;
	top: 0;
	left: calc(50% - 85px);
	line-height: 0;
	padding: 5px;
	margin: 1px;
	z-index: -1;
	box-shadow: 0 0 24px 5px rgba(255, 255, 255, .25)
}

#feature-qr-code.selected {
	opacity: 1;
	transform: scale(1);
	transition: transform ease-in-out .35s, opacity ease-in-out .5s;
	transition-delay: .12s
}

#feature-qr-code img {
	width: 100%;
	height: 100%;
	border-radius: 30px
}

.features-header-app-icon-blur {
	filter: blur(1.5rem);
	opacity: .5;
	border-radius: 34px;
	-webkit-backface-visibility: hidden;
	z-index: -2
}

*,
*:before,
*:after {
	box-sizing: border-box;
	position: relative
}

@font-face {
	font-family: Averta Standard;
	src: url(eot/hinted-AvertaStd-Regular.eot);
	src: url(eot/hinted-AvertaStd-Regular.eot?#iefix)format("embedded-opentype"), url("woff2/Averta Standard Regular.woff2")format("woff2"), url(woff/hinted-AvertaStd-Regular.woff)format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: Averta Standard;
	src: url(eot/hinted-AvertaStd-Semibold.eot);
	src: url(eot/hinted-AvertaStd-Semibold.eot?#iefix)format("embedded-opentype"), url("woff2/Averta Standard Semibold.woff2")format("woff2"), url(woff/hinted-AvertaStd-Semibold.woff)format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: Averta Standard;
	src: url(eot/hinted-AvertaStd-Bold.eot);
	src: url(eot/hinted-AvertaStd-Bold.eot?#iefix)format("embedded-opentype"), url("woff2/Averta Standard Bold.woff2")format("woff2"), url(woff/hinted-AvertaStd-Bold.woff)format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: Averta Standard;
	src: url(eot/hinted-AvertaStd-Extrabold.eot);
	src: url(eot/hinted-AvertaStd-Extrabold.eot?#iefix)format("embedded-opentype"), url("woff2/Averta Standard Extra Bold.woff2")format("woff2"), url(woff/hinted-AvertaStd-Extrabold.woff)format("woff");
	font-weight: 800;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: Averta Standard;
	src: url("eot/Averta Standard Black.eot");
	src: url("eot/Averta Standard Black.eot?#iefix")format("embedded-opentype"), url("woff2/Averta Standard Black.woff2")format("woff2"), url("woff/Averta Standard Black.woff")format("woff");
	font-weight: 900;
	font-style: normal;
	font-display: swap
}

*,
html {
	font-family: averta standard, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, helvetica neue, Arial, sans-serif
}

html,
body {
	min-height: 100%
}

body {
	background-color: #dfdfdf;
	--faint-color: rgba(107, 126, 182, 0.5)
}

@keyframes hideFadeDown {
	0% {
		opacity: 1;
		transform: translateY(0)scale(1)
	}

	100% {
		opacity: 0;
		transform: translateY(120px)scale(.96)
	}
}

@keyframes hideFade {
	0% {
		opacity: 1
	}

	to {
		opacity: 0
	}
}

body.dialog {
	overflow: hidden
}

@media(min-width:400px) {
	body.dialog {
		margin-right: 15px
	}
}

body.dialog #faq-dialog,
body.dialog #overlay {
	display: block
}

body.dialog #faq-dialog {
	animation: dialogFade .8s linear 0s;
	animation-fill-mode: forwards
}

body.dialog #faq-dialog.hide {
	animation: hideFadeDown .2s cubic-bezier(.3, -.25, .25, 1.1)0s;
	animation-fill-mode: forwards
}

body.dialog #overlay.hide {
	animation: hideFade .2s ease-out .1s;
	animation-fill-mode: backwards
}

#support-page #faq-dialog {
	display: block;
	opacity: 1;
	position: relative;
	top: auto;
	width: 100%;
	height: auto;
	background: 0 0;
	border: none;
	border-radius: 0;
	backdrop-filter: blur(0);
	box-shadow: none
}

#support-page #faq-dialog .dialog-header {
	border: none;
	padding: 1rem 0
}

#support-page #faq-dialog .dialog-header #dialog-close {
	display: none
}

#support-page #faq-dialog .content {
	height: auto;
	overflow: auto;
	padding: 0
}

#support-page #faq-dialog .content .item {
	padding: 1rem 0
}

#support-page #faq-dialog .content .item:after {
	display: none
}

#support-page #faq-dialog .content .item h5 {
	margin: 0
}

#support-page #faq-dialog .content .item.expanded h5 {
	margin-bottom: 1rem
}

#support-page #faq-dialog .dialog-footer {
	display: none
}

#base-bg {
	display: block;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	transition: all 1s linear;
	background: 0 0;
	mask-image: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, .85));
	-webkit-mask-image: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, .85));
	z-index: -1
}

p {
	margin: 0
}

:root {
	--subtext-color: rgba(187, 205, 227, 0.7);
	--feature-title-overlay: linear-gradient(155deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
	--feature-radius: 38px;
	--cubic-anim-1: cubic-bezier(0.68, -0.6, 0.32, 1.15)
}

.preload * {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
	transition: none !important
}

.stonkscroll,
.stonkscroll2 {
	perspective: 1px;
	-webkit-perspective: 1px;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d
}

@media(max-width:400px) {

	.stonkscroll,
	.stonkscroll2 {
		transition: transform .1s ease-out
	}
}

#canvasbg {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	right: 0;
	left: 0;
	z-index: -1;
	mix-blend-mode: plus-lighter
}

#stammitter {
	transition: opacity .4s ease-in-out;
	z-index: 1
}

#stammitter canvas {
	mask-image: linear-gradient(0deg, rgba(0, 0, 0, 5%) 4%, rgba(0, 0, 0, .75) 55%, transparent 100%);
	-webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 5%) 4%, rgba(0, 0, 0, .75) 55%, transparent 100%)
}

#grain {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	right: 0;
	left: 0;
	z-index: 1;
	mix-blend-mode: hue;
	opacity: .85;
	mask-image: radial-gradient(circle at center, rgba(84, 55, 138, .176) 0%, rgba(18, 43, 115, .85) 100%);
	-webkit-mask-image: radial-gradient(circle at center, rgba(84, 55, 138, .176) 0%, rgba(18, 43, 115, .85) 100%);
	mix-blend-mode: soft-light;
	opacity: .25
}

#gradient {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -3
}

#gradient:not(.max) {
	opacity: 0;
	animation: gradientFade 3s cubic-bezier(.68, -.6, .32, 1.25)0s;
	animation-fill-mode: forwards
}

#gradient.max {
	opacity: 1;
	animation: gradientFadeMax 2s cubic-bezier(.68, -.6, .32, 1.25)0s;
	animation-fill-mode: forwards
}

@keyframes overlayFade {
	0% {
		opacity: 0;
		backdrop-filter: blur(0);
		-webkit-backdrop-filter: blur(0)
	}

	100% {
		opacity: 1;
		backdrop-filter: blur(3px);
		-webkit-backdrop-filter: blur(3px)
	}
}

#overlay {
	opacity: 0;
	animation: overlayFade .25s ease-out;
	animation-fill-mode: forwards;
	position: fixed;
	overflow: hidden;
	background-image: radial-gradient(circle at center, rgba(255, 255, 255, .74) 50%, rgba(15, 55, 103, .53) 100%);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0%;
	z-index: 99990;
	display: none
}

#faq-dialog {
	position: fixed;
	top: 10vh;
	left: 0;
	right: 0;
	z-index: 99999;
	background: rgba(21, 33, 46, .975);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	display: grid;
	width: 50%;
	height: 70%;
	min-height: 300px;
	max-width: 600px;
	min-width: 400px;
	display: none;
	margin: 0 auto;
	opacity: 0;
	border-radius: 22px;
	box-shadow: 0 1px 25px rgba(0, 0, 0, .28), 0 -1px 2px rgba(0, 0, 0, .12), inset 0 1px .5px rgba(161, 187, 216, .25);
	border: 1px solid rgba(255, 255, 255, .15);
	color: #fff;
	overflow: hidden
}

@media(max-width:400px) {
	#faq-dialog {
		width: auto;
		min-width: auto;
		height: 100%;
		max-width: auto;
		top: 0
	}

	#faq-dialog .content {
		height: 100% !important
	}

	#faq-dialog .dialog-footer {
		background: rgba(21, 33, 46, .95);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px)
	}
}

#faq-dialog .dialog-header {
	font-weight: 500;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	font-size: 1.2rem;
	padding: 1rem 1rem 1rem 1.58rem;
	display: grid;
	grid-template-columns: 1fr 24px;
	grid-gap: 12px
}

#faq-dialog .dialog-header h4 {
	margin: 0
}

#faq-dialog .dialog-header svg,
#faq-dialog .dialog-header a {
	line-height: 0
}

#faq-dialog .dialog-header a:active {
	opacity: .5
}

#faq-dialog .dialog-footer {
	line-height: 0;
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding: .9rem 1.5rem 1rem;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: grid;
	grid-template-columns: 24px 1fr 1fr;
	grid-gap: 12px
}

#faq-dialog .dialog-footer .logo {
	width: 24px;
	height: 24px
}

#faq-dialog .dialog-footer span {
	font-weight: 500;
	font-size: .9rem;
	color: #ffffffbf;
	text-shadow: 0 .5px 0 rgba(0, 0, 0, .25);
	align-self: center
}

#faq-dialog .dialog-footer a {
	font-weight: 400;
	font-size: .9rem;
	color: #98a2acbf;
	text-shadow: 0 .5px 0 rgba(0, 0, 0, .25);
	align-self: center;
	text-align: right;
	text-decoration: none;
	transition: all .15s ease
}

#faq-dialog .dialog-footer a:hover {
	color: #fff
}

#faq-dialog .content {
	overflow-y: scroll;
	overflow-x: hidden;
	overscroll-behavior: contain;
	padding: .33rem;
	height: calc(70vh - 7rem - 1px)
}

#faq-dialog .content::-webkit-scrollbar {
	width: 6px !important;
	background-color: transparent;
	margin-right: 5px
}

#faq-dialog .content::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, .719);
	border-radius: 5px
}

#faq-dialog .content .item {
	margin-bottom: 3px;
	padding: 1.25rem;
	cursor: pointer;
	transition: background .2s ease-out;
	border-radius: 12px
}

#faq-dialog .content .item:after {
	position: absolute;
	right: 1rem;
	top: 1.05rem;
	width: 24px;
	height: 24px;
	opacity: .3;
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' fill-rule='evenodd' d='M33.4 43.43c-.79.78-2.05.78-2.83 0l-.01-.01L15.55 28.4c-.8-.78-.81-2.04-.04-2.83.77-.8 2.03-.81 2.82-.04l.03.03 13.59 13.59 13.59-13.6a1.992 1.992 0 1 1 2.86 2.77c-.02.01-.03.02-.05.04Z'/%3E%3C/svg%3E");
	transform: rotate(0);
	transition: all .85s var(--cubic-anim-1)
}

#faq-dialog .content .item h5 {
	font-size: 1.1rem;
	font-weight: 500;
	margin: 0;
	transition: all .15s ease-out
}

#faq-dialog .content .item p {
	display: none;
	margin: 0 0 1.25rem;
	font-size: 1rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, .96)
}

#faq-dialog .content .item p:first-child {
	margin-top: .5rem
}

#faq-dialog .content .item p:last-child {
	margin-bottom: 0
}

#faq-dialog .content .item p a {
	color: #fff
}

#faq-dialog .content .item p a:hover {
	color: #98a2acbf
}

#faq-dialog .content .item.expanded h5 {
	margin-bottom: .85rem
}

#faq-dialog .content .item.expanded p {
	display: block
}

#faq-dialog .content .item.expanded:after {
	transform: translateY(3px)rotate(180deg)
}

#faq-dialog .content .item:last-child {
	margin-bottom: 8rem
}

#faq-dialog .content .item:hover {
	background: rgba(255, 255, 255, .1)
}

#faq-dialog.expanded .content .item {
	background: 0 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	border-radius: 0;
	margin: 0
}

#faq-dialog.expanded .content .item:after {
	opacity: 0;
	transition: none;
	display: none
}

#faq-dialog.expanded .content .item:hover {
	background: rgba(255, 255, 255, 8%)
}

@media(min-width:400.1px) and (max-width:900px) {
	#faq-dialog {
		width: 66%;
		height: 80%
	}

	#faq-dialog .content {
		height: calc(80vh - 7rem - 1px)
	}
}

@keyframes gradientFade {
	0% {
		opacity: .15;
		-webkit-animation-timing-function: cubic-bezier(.75, .25, .75, 1);
		animation-timing-function: cubic-bezier(.75, .25, .75, 1)
	}

	15% {
		opacity: .55;
		-webkit-animation-timing-function: cubic-bezier(.2, .1, .2, .96);
		animation-timing-function: cubic-bezier(.2, .1, .2, .96)
	}

	100% {
		opacity: .15
	}
}

@keyframes gradientFadeMax {
	0% {
		opacity: .15
	}

	100% {
		opacity: .45
	}
}

@keyframes dialogFade {
	0% {
		transform: translateY(50px);
		opacity: 0
	}

	1% {
		transform: translateY(49.72488574px);
		opacity: .006368428950950006
	}

	2% {
		transform: translateY(48.94968249px);
		opacity: .024122262819774885
	}

	3% {
		transform: translateY(47.74632194px);
		opacity: .051357844292753044
	}

	4% {
		transform: translateY(46.18219637px);
		opacity: .0863353528293917
	}

	5% {
		transform: translateY(44.32001071px);
		opacity: .12747616463254577
	}

	6% {
		transform: translateY(42.21770383px);
		opacity: .1733586031527552
	}

	7% {
		transform: translateY(39.92843107px);
		opacity: .22271237081565465
	}

	8% {
		transform: translateY(37.50060057px);
		opacity: .27441192604193787
	}

	9% {
		transform: translateY(34.977956px);
		opacity: .3274690436697686
	}

	10% {
		transform: translateY(32.39969893px);
		opacity: .381024771814233
	}

	11% {
		transform: translateY(29.80064462px);
		opacity: .43434097418775813
	}

	12% {
		transform: translateY(27.21140509px);
		opacity: .48679162409983895
	}

	13% {
		transform: translateY(24.65859419px);
		opacity: .5378539948586737
	}

	14% {
		transform: translateY(22.16504965px);
		opacity: .587099871184418
	}

	15% {
		transform: translateY(19.75006747px);
		opacity: .6341868875587673
	}

	16% {
		transform: translateY(17.42964461px);
		opacity: .6788500821991894
	}

	17% {
		transform: translateY(15.21672642px);
		opacity: .7208937395579528
	}

	18% {
		transform: translateY(13.1214553px);
		opacity: .7601835798879185
	}

	19% {
		transform: translateY(11.15141803px);
		opacity: .7966393414555526
	}

	20% {
		transform: translateY(9.31188907px);
		opacity: .8302277893710635
	}

	21% {
		transform: translateY(7.60606786px);
		opacity: .8609561746902966
	}

	22% {
		transform: translateY(6.03530818px);
		opacity: .8888661583594425
	}

	23% {
		transform: translateY(4.59933837px);
		opacity: .9140282066523471
	}

	24% {
		transform: translateY(3.29647086px);
		opacity: .9365364579176534
	}

	25% {
		transform: translateY(2.1238004px);
		opacity: .956504054632942
	}

	26% {
		transform: translateY(1.07739017px);
		opacity: .9740589298779885
	}

	27% {
		transform: translateY(.1524453px);
		opacity: .9893400333115607
	}

	28% {
		transform: translateY(-.65652643px);
		opacity: 1.0024939784890483
	}

	29% {
		transform: translateY(-1.35556679px);
		opacity: 1.013672090816522
	}

	30% {
		transform: translateY(-1.95113225px);
		opacity: 1.0230278335277905
	}

	31% {
		transform: translateY(-2.44997174px);
		opacity: 1.0307145877247945
	}

	32% {
		transform: translateY(-2.85901683px);
		opacity: 1.0368837616717486
	}

	33% {
		transform: translateY(-3.18528397px);
		opacity: 1.0416832041169564
	}

	34% {
		transform: translateY(-3.43578813px);
		opacity: 1.045255896374289
	}

	35% {
		transform: translateY(-3.61746754px);
		opacity: 1.0477388981740494
	}

	36% {
		transform: translateY(-3.7371188px);
		opacity: 1.0492625228396353
	}

	37% {
		transform: translateY(-3.80134172px);
		opacity: 1.0499497181155417
	}

	38% {
		transform: translateY(-3.81649333px);
		opacity: 1.0499156299213315
	}

	39% {
		transform: translateY(-3.78865038px);
		opacity: 1.049267327396919
	}

	40% {
		transform: translateY(-3.72357954px);
		opacity: 1.0481036688023304
	}

	41% {
		transform: translateY(-3.62671483px);
		opacity: 1.0465152891093896
	}

	42% {
		transform: translateY(-3.50314139px);
		opacity: 1.044584691446358
	}

	43% {
		transform: translateY(-3.35758517px);
		opacity: 1.0423864259057574
	}

	44% {
		transform: translateY(-3.19440772px);
		opacity: 1.039987340579896
	}

	45% {
		transform: translateY(-3.01760559px);
		opacity: 1.0374468910304282
	}

	46% {
		transform: translateY(-2.83081378px);
		opacity: 1.0348174957128273
	}

	47% {
		transform: translateY(-2.63731255px);
		opacity: 1.0321449261516487
	}

	48% {
		transform: translateY(-2.44003724px);
		opacity: 1.0294687218879368
	}

	49% {
		transform: translateY(-2.24159057px);
		opacity: 1.0268226213882172
	}

	50% {
		transform: translateY(-2.04425689px);
		opacity: 1.0242350012091828
	}

	51% {
		transform: translateY(-1.85001813px);
		opacity: 1.0217293167491346
	}

	52% {
		transform: translateY(-1.66057087px);
		opacity: 1.0193245388835916
	}

	53% {
		transform: translateY(-1.47734441px);
		opacity: 1.0170355816767085
	}

	54% {
		transform: translateY(-1.30151937px);
		opacity: 1.0148737171818014
	}

	55% {
		transform: translateY(-1.13404659px);
		opacity: 1.0128469740939117
	}

	56% {
		transform: translateY(-.97566614px);
		opacity: 1.0109605176962921
	}

	57% {
		transform: translateY(-.82692613px);
		opacity: 1.0092170091529984
	}

	58% {
		transform: translateY(-.68820125px);
		opacity: 1.0076169427440012
	}

	59% {
		transform: translateY(-.55971078px);
		opacity: 1.0061589601204082
	}

	60% {
		transform: translateY(-.44153597px);
		opacity: 1.004840141078857
	}

	61% {
		transform: translateY(-.33363674px);
		opacity: 1.0036562707195105
	}

	62% {
		transform: translateY(-.23586755px);
		opacity: 1.0026020831651186
	}

	63% {
		transform: translateY(-.14799234px);
		opacity: 1.0016714822831538
	}

	64% {
		transform: translateY(-.06969863px);
		opacity: 1.0008577400729755
	}

	65% {
		transform: translateY(-.00061053px);
		opacity: 1.0001536735591878
	}

	66% {
		transform: translateY(.05969908px);
		opacity: .9995518011746467
	}

	67% {
		transform: translateY(.11169747px);
		opacity: .9990444797256024
	}

	68% {
		transform: translateY(.15588195px);
		opacity: .998624023110838
	}

	69% {
		transform: translateY(.19277066px);
		opacity: .998282804019759
	}

	70% {
		transform: translateY(.22289436px);
		opacity: .9980133398644286
	}

	71% {
		transform: translateY(.24678912px);
		opacity: .9978083642105875
	}

	72% {
		transform: translateY(.26498988px);
		opacity: .9976608849655431
	}

	73% {
		transform: translateY(.27802481px);
		opacity: .9975642305591332
	}

	74% {
		transform: translateY(.28641054px);
		opacity: .9975120853201355
	}

	75% {
		transform: translateY(.29064799px);
		opacity: .9974985152067641
	}

	76% {
		transform: translateY(.29121906px);
		opacity: .9975179849982502
	}

	77% {
		transform: translateY(.28858381px);
		opacity: .9975653679967565
	}

	78% {
		transform: translateY(.2831783px);
		opacity: .9976359492266589
	}

	79% {
		transform: translateY(.27541296px);
		opacity: .9977254230529584
	}

	80% {
		transform: translateY(.26567143px);
		opacity: .9978298860735371
	}

	81% {
		transform: translateY(.2543098px);
		opacity: .9979458260722263
	}

	82% {
		transform: translateY(.24165635px);
		opacity: .9980701077521722
	}

	83% {
		transform: translateY(.22801151px);
		opacity: .9981999559025392
	}

	84% {
		transform: translateY(.21364815px);
		opacity: .9983329365868878
	}

	85% {
		transform: translateY(.19881221px);
		opacity: .9984669368791079
	}

	86% {
		transform: translateY(.18372342px);
		opacity: .9986001436130588
	}

	87% {
		transform: translateY(.1685763px);
		opacity: .9987310215553781
	}

	88% {
		transform: translateY(.15354126px);
		opacity: .9988582913575349
	}

	89% {
		transform: translateY(.13876583px);
		opacity: .9989809075932973
	}

	90% {
		transform: translateY(.124376px);
		opacity: .9990980371414486
	}

	91% {
		transform: translateY(.11047757px);
		opacity: .999209038130895
	}

	92% {
		transform: translateY(.09715762px);
		opacity: .9993134396262139
	}

	93% {
		transform: translateY(.08448592px);
		opacity: .9994109221961895
	}

	94% {
		transform: translateY(.0725164px);
		opacity: .9995012994758472
	}

	95% {
		transform: translateY(.06128857px);
		opacity: .9995845008038291
	}

	96% {
		transform: translateY(.05082894px);
		opacity: .9996605549915248
	}

	97% {
		transform: translateY(.04115237px);
		opacity: .9997295752579713
	}

	98% {
		transform: translateY(.03226343px);
		opacity: .9997917453450607
	}

	99% {
		transform: translateY(.0241576px);
		opacity: .9998473068107916
	}

	100% {
		transform: translateY(.01682254px);
		opacity: .9998965474840247
	}
}

.qr-wrap {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 1.15em;
	position: relative;
	z-index: 1;
	width: max-content;
	transition: all .5s ease
}

@media(max-width:400px) {
	.qr-wrap {
		display: block;
		width: auto
	}
}

.qr-wrap .coming-soon-wrap .faq-button {
	padding: .8rem 1.85rem .85rem;
	text-align: center;
	border-radius: 100px;
	text-decoration: none;
	line-height: 1.4;
	transition: all .15s ease-out;
	font-weight: 500;
	font-size: 1rem;
	color: rgba(58, 71, 102, .87);
	text-shadow: 0 1px 0 #fff;
	background: #a4b8cc28
}

@media(max-width:400px) {
	.qr-wrap .coming-soon-wrap .faq-button {
		display: block;
		width: 100%;
		margin: 0
	}
}

.qr-wrap .coming-soon-wrap .faq-button:hover {
	color: #1b2232;
	background: #c5d2de77;
	box-shadow: inset 0 0 1px 1px rgba(68, 76, 95, 0)
}

.qr-wrap .coming-soon-wrap span {
	margin-left: 1em;
	color: rgba(92, 111, 144, .578);
	font-weight: 500;
	font-size: .9rem;
	position: relative
}

@media(max-width:400px) {
	.qr-wrap .coming-soon-wrap span {
		display: block;
		margin: 1.5rem 0 0;
		text-align: center
	}
}

.qr-wrap .coming-soon-wrap span.list-link a {
	color: rgba(92, 111, 144, .578);
	text-decoration: none;
	transition: color .25s ease-out;
	position: relative;
	font-weight: 500;
	padding-bottom: 1px
}

.qr-wrap .coming-soon-wrap span.list-link a::before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 1.5px;
	bottom: 0;
	left: 0;
	background: linear-gradient(90deg, #60eb8c -100%, #ebcd60 -60%, #eb8560 -20%, #9f60eb 20%, #60b4eb 60%, #60eb6e 100%);
	transform: scaleX(0);
	transform-origin: top left;
	transition: transform .25s ease-out
}

.qr-wrap .coming-soon-wrap span.list-link a:hover {
	color: rgba(25, 30, 40, .9)
}

.qr-wrap .coming-soon-wrap span.list-link a:hover::before {
	transform: scaleX(1)
}

.qr-wrap .qr-instructions {
	margin: 0 2em 0 0;
	font-size: 15px;
	font-weight: 500;
	color: rgba(92, 111, 144, .578);
	text-align: left;
	align-self: center;
	line-height: 1.4;
	transition: all .3s ease-out;
	z-index: 1;
	text-shadow: 0 1px .5px rgba(255, 255, 255, .77)
}

.qr-wrap .qr-instructions strong {
	color: rgba(53, 66, 87, .794);
	font-size: 1.05em
}

.qr-wrap #qr-code {
	background-image: linear-gradient(to top left, rgba(255, 239, 179, .586) 12%, rgba(221, 194, 255, .543) 52%, rgba(179, 225, 255, .52) 92%);
	display: inline-block;
	line-height: 0;
	padding: 4px;
	border-radius: 12px;
	margin: 0;
	z-index: 2;
	transform-origin: left;
	display: none;
	transform-origin: left;
	transition: all .3s ease-out
}

.qr-wrap #qr-code svg {
	border-radius: 12px;
	width: 74px;
	height: 74px
}

.qr-wrap #qr-code svg g {
	fill: #fff
}

.qr-wrap #qr-code.magnetized {
	box-shadow: 0 2px 18px rgba(79, 97, 139, .2)
}

#features {
	margin: 10em auto 8em;
	display: block
}

#features .feature {
	display: grid;
	grid-template-columns: 44px 1fr;
	grid-gap: 16px;
	position: relative;
	cursor: pointer;
	--x-px: calc(var(--x) * 1px);
	--y-px: calc(var(--y) * 1px);
	overflow: hidden;
	margin-top: -1em;
	margin-left: -1em;
	margin-right: -1em;
	margin-bottom: 2.5em;
	padding: 1em 1em 1.25em;
	border-radius: 22px;
	transition: box-shadow .3s ease-out
}

#features .feature:before,
#features .feature:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(800px circle at var(--x-px) var(--y-px), var(--icon), transparent 40%)
}

#features .feature:before {
	z-index: 0;
	opacity: .08
}

#features .feature:after {
	opacity: 0;
	z-index: 2;
	transition: opacity .4s ease
}

#features .feature:hover:after {
	opacity: .1;
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), inset 0 -1px rgba(0, 0, 0, .1)
}

#features .feature:hover {
	box-shadow: 0 1px 1px rgba(64, 88, 126, 8%), 0 3px 13px rgba(62, 96, 114, .18), inset 0 1px rgba(255, 255, 255, .4);
	transition: box-shadow .1s ease-out
}

#features .feature .content {
	text-decoration: none;
	display: block;
	border-radius: inherit;
	color: #000;
	text-decoration: none;
	z-index: 1
}

#features .feature h2 {
	text-align: left;
	font-size: 19px;
	letter-spacing: -.2px;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 .3rem;
	color: var(--icon, #192637);
	display: inline-block;
	filter: brightness(.5)saturate(.5);
	font-smooth: always;
	-webkit-font-smoothing: antialiased
}

#features .feature p {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	margin-top: 0;
	margin-bottom: 0;
	letter-spacing: -.1px;
	color: rgba(43, 72, 103, .526);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 -.5px 0 rgba(24, 29, 52, .2);
	font-smooth: always;
	-webkit-font-smoothing: antialiased
}

#features .feature .icon {
	background: rgba(222, 184, 160, .1);
	background: var(--icon-bg, rgba(31, 58, 102, 4%));
	border-radius: 100px;
	width: 44px;
	height: 44px;
	line-height: 0;
	margin-bottom: 0;
	display: grid;
	align-items: center;
	justify-content: center
}

#features .feature .icon svg {
	fill: var(--icon, rgba(42, 70, 141, .85));
	width: 26px;
	height: 26px
}

#features .feature .icon.transactions svg {
	fill: none
}

#features .feature .icon.transactions svg path {
	stroke: var(--icon, rgba(42, 70, 141, .85))
}

#features .feature .icon.transactions svg rect,
#features .feature .icon.transactions svg circle {
	fill: var(--icon, rgba(42, 70, 141, .85))
}

#page {
	width: 600px;
	margin: 0 auto 2em;
	color: #fff
}

#page p a {
	color: #fff;
	opacity: .8
}

#page p a:hover {
	color: #fff;
	opacity: 1
}

#page .iub_content.legal_pp {
	padding: 0
}

#page #iubenda_policy.iubenda_vip_policy h1,
#page #iubenda_policy h1 {
	margin-bottom: 1.5em;
	color: rgba(189, 201, 207, .95);
	font-size: 1rem
}

#page #iubenda_policy h1,
#page #iubenda_policy h2,
#page #iubenda_policy h3,
#page #iubenda_policy h4,
#page #iubenda_policy h5 {
	color: rgba(189, 201, 207, .95)
}

#page #iubenda_policy.iubenda_vip_policy.iubenda_terms_policy h2,
#page #iubenda_policy.iubenda_vip_policy.iubenda_terms_policy h3,
#page #iubenda_policy.iubenda_vip_policy.iubenda_terms_policy h4,
#page #iubenda_policy.iubenda_vip_policy.iubenda_terms_policy h5 {
	color: rgba(189, 201, 207, .95)
}

#page #iubenda_policy.iubenda_vip_policy.iubenda_terms_policy .definitions {
	background: 0 0
}

#page #iubenda_policy a {
	color: #fff
}

#page #iubenda_policy .iub_container>.iub_footer,
#page #iubenda_policy .box_primary {
	background: 0 0
}

#page #iubenda_policy.iubenda_vip_policy ul li,
#page #iubenda_policy .iub_base_container {
	color: rgba(189, 201, 207, .95)
}

@media(max-width:600px) {
	#page {
		width: 92%
	}
}

#page h1 {
	margin-bottom: 1.5em;
	margin-top: 0;
	font-size: 1.7em;
	font-smooth: always;
	-webkit-font-smoothing: antialiased
}

#page h2,
#page h3 {
	color: rgba(189, 201, 207, .95);
	line-height: 1.5
}

#page h4 {
	margin-bottom: 1em;
	margin-top: 0;
	display: block;
	font-size: 1.1em
}

#page h4.legal {
	font-size: .95em;
	color: rgba(189, 201, 207, .95)
}

#page hr {
	background: 0 0;
	border: none;
	height: 1px;
	background: rgba(189, 201, 207, .15);
	margin-bottom: 2em;
	margin-top: 2.25em
}

#page p {
	line-height: 1.5;
	font-size: 1.1rem;
	color: rgba(189, 201, 207, .95);
	margin-bottom: 1em
}

#page p.legal {
	color: rgba(145, 163, 173, .75);
	font-size: .85em;
	line-height: 1.5
}

.hero-phone-content::before{
  content:"";
  background:
    radial-gradient(60% 60% at 50% 35%, rgba(99,102,241,.25), transparent 60%),
    radial-gradient(40% 40% at 70% 65%, rgba(56,189,248,.25), transparent 60%),
    radial-gradient(35% 35% at 30% 70%, rgba(52,211,153,.22), transparent 60%);
  filter: blur(40px) saturate(120%);
  z-index:-1;
  pointer-events:none;
}

#hero-fallback, .hero-phone {
    max-height: 93%;
    right: -351px;
    width: 50%;
    border-radius: 30px;
}


.our-work .container{
	width: 100%;
}

.our-work{
	display: flex;
	align-items: center;
	background-color: #14192d;
	background-position: center;
	background-size: cover;
	position:relative;
	overflow:hidden;
	&:before{
		width: 100vw;
    height: 50vw;
		position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    background: #e93f8e;
    border-radius: 760px;
    transform: translate(-50%, -50%);
    backface-visibility: hidden;
    opacity: 0.4;
    filter: blur(270px);
    content: '';
    pointer-events: none;
    will-change: transform;
	width: 100% !important;
	}
	h1{
		background-image: linear-gradient(269deg, #bc2789 1.26%, #f85956 98.74%);
		background-clip: text;
		-webkit-text-fill-color: transparent;
		display:inline-flex;
		font-size: 3.3rem;
    line-height: 1.1;
	}
}

.slider{
	display: flex;
	gap: 55px;
	align-items: center;
	position:relative;
	@media (max-width: 640px){
		padding-top:1rem;
		flex-direction: column;
		gap:16px;
	}
}

.carousel__slider{
	position:relative;
	width:100%;
	min-height: 440px;
}
.carousel__item{
		width:100%;
		min-height: 440px;
		padding: 48px;
		color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
		position:absolute;
		top:0%;
		opacity:0;
}


.carousel__nav{
	display: flex;
	gap: 16px;
	align-items: center;
	flex-direction: column;
	@media (max-width: 640px){
		flex-direction: row;
	}
	&__item{
		background:#424b58;
		box-shadow: none;
		display: block;
    width: 10px;
    height: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
		
		&--active{
			background: red;
		}
	}
}


#content #primary {
    width: 100%;
    max-width: 100%;
    height: auto;
}


/* ===== Look & layout ===== */
.fx-wrap{position:relative;padding:96px 0;isolation:isolate}
.fx-container{width:min(1240px,92vw);margin:0 auto;display:grid;grid-template-columns:520px 1fr;gap:48px;align-items:start}

/* animated soft aurora */
.fx-aurora{position:absolute;inset:-10% -5% -15%;z-index:-1;filter:blur(40px) saturate(120%);
  background:
    radial-gradient(600px 280px at 15% 10%, #86efac40 0%, transparent 60%),
    radial-gradient(520px 260px at 85% 25%, #93c5fd33 0%, transparent 60%),
    radial-gradient(680px 340px at 60% 80%, #c4b5fd38 0%, transparent 60%);
  animation: aurora 16s ease-in-out infinite alternate}
@keyframes aurora{50%{transform:translateY(-12px)}100%{transform:translateY(6px)}}

/* left glass card */
.fx-card{padding:28px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);box-shadow:0 30px 120px rgba(16,24,40,.25)}
.fx-badges{display:flex;flex-wrap:wrap;gap:8px 10px;margin-bottom:12px}
.fx-badge{font-size:12px;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,#ffffff22,#ffffff08);
  border:1px solid #ffffff2e;backdrop-filter:blur(6px)}

.fx-title{font-size:clamp(34px,4.2vw,58px);line-height:1.04;margin:4px 0 10px;font-weight:800;
  background:linear-gradient(310deg,#60efb4,#60b4eb,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-title span{filter:drop-shadow(0 6px 24px rgba(99,102,241,.35))}
.fx-sub{margin:0 0 18px;opacity:.88}

.fx-cta{display:flex;gap:12px;margin:10px 0 22px}
.fx-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:12px;font-weight:600;border:1px solid transparent;transition:all .2s}
.fx-btn-primary{background:linear-gradient(135deg,#6366f1,#22d3ee);color:#fff;border-color:#ffffff18;box-shadow:0 14px 40px -12px rgba(99,102,241,.55)}
.fx-btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 50px -10px rgba(34,211,238,.45)}
.fx-btn-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:#ffffff2a}
.fx-btn-ghost:hover{background:rgba(255,255,255,.12)}

/* rows */
.fx-list{display:grid;gap:14px}
.fx-row{padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);transition:.22s}
.fx-row h3{margin:0 0 6px;font-size:18px}
.fx-row p{margin:0;opacity:.86}
.fx-row.is-active{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.06));
  border-color:#ffffff2a;transform:translateY(-2px);box-shadow:0 16px 40px -28px rgba(99,102,241,.55)}

/* right: glowing frame + pinned images */
.fx-right{position:relative;min-height:72vh}
.fx-frame{position:sticky;top:96px;border-radius:22px;padding:14px;background:
  linear-gradient(#0000,#0000) padding-box,
  linear-gradient(135deg,#22d3ee55,#6366f155,#22d3ee22) border-box;
  border:1px solid transparent;box-shadow:0 24px 100px rgba(79,70,229,.35)}
.fx-shot{position:relative;display:block;width:100%;height:auto;border-radius:16px;
  opacity:0;transform:translateY(18px) scale(.985);filter:blur(6px);
  transition:opacity .55s ease,transform .55s ease,filter .55s ease}
.fx-shot.is-showing{opacity:1;transform:translateY(0) scale(1);filter:blur(0) drop-shadow(0 18px 60px rgba(255,255,255,.16))}

/* subtle 3D tilt on scroll */
.fx-frame {transform-style:preserve-3d;perspective:1000px}

/* responsive */
@media (max-width:980px){
  .fx-container{grid-template-columns:1fr;gap:28px}
  .fx-right{order:-1;min-height:56vh}
  .fx-frame{top:72px}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .fx-shot,.fx-row,.fx-btn{transition:none !important}
  .fx-aurora{animation:none}
}


/* View icon button on the frame */
.fx-viewer-btn {
    position: absolute;
    z-index: 5;
    top: 10px;
    right: 10px;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.22);
    background: linear-gradient(90deg,#586eff,#8a6bff);
    color: #fff;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.fx-viewer-btn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.14); border-color:#ffffff33 }

/* Lightbox base */
#fx-lightbox{ position:fixed; inset:0; display:none; z-index:9999; }
#fx-lightbox.is-open{ display:block; }
.fx-lb-backdrop{ position:absolute; inset:0; background:rgba(6,10,18,.78); backdrop-filter: blur(8px); }

/* Stage */
.fx-lb-stage{ position:absolute; inset:0; display:grid; grid-template-columns: 64px 1fr 64px; align-items:center; }
.fx-lb-viewport{ position:relative; overflow:hidden; width:100%; height:100vh; }
.fx-lb-track{ display:flex; height:100%; transition: transform .35s ease; }

.fx-lb-slide{ min-width:100%; display:grid; place-items:center; padding:4vh 0; }
.fx-lb-slide img{ max-width: min(1400px, 92vw); max-height: 92vh; width:auto; height:auto; border-radius:18px; box-shadow:0 40px 160px rgba(0,0,0,.5) }

.fx-lb-close{ position:absolute; top:18px; right:18px; width:42px; height:42px; display:grid; place-items:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); border-radius:12px; color:#fff; cursor:pointer }
.fx-lb-close:hover{ background:rgba(255,255,255,.18) }

.fx-lb-nav{ width:48px; height:48px; display:grid; place-items:center; margin:0 8px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22); border-radius:14px; color:#fff; cursor:pointer }
.fx-lb-nav:hover{ background:rgba(255,255,255,.18) }
.fx-lb-prev{ justify-self:end }
.fx-lb-next{ justify-self:start }

/* Swipe cursor hint on desktop */
@media (pointer: fine){
  .fx-lb-slide img{ cursor:grab }
  .fx-lb-slide img:active{ cursor:grabbing }
}

/* Small screens */
@media (max-width: 720px){
  .fx-lb-stage{ grid-template-columns: 48px 1fr 48px; }
  .fx-lb-nav{ width:40px; height:40px }
  .fx-lb-close{ width:40px; height:40px }
}










:root{
  --step--2: clamp(3.13rem, 2.62rem + 2.51vw, 5.76rem);
  --step--1: clamp(3.75rem, 3.09rem + 3.29vw, 7.20rem);
  --step-0: clamp(4.50rem, 3.64rem + 4.29vw, 9.00rem);

  /* Light but visible “etched” look */
  --ink: rgba(255,255,255,.36);
  --stroke: rgba(16,22,33,.22);     /* outline on light bg */
  --focus: rgba(16,22,33,.75);       /* accent for -focus span */
}



/* ==== Marquee rows ==== */
.marquee{
  border-bottom: 1px solid rgba(20,20,20,.06);
  color: transparent;                         /* transparent fill… */
  -webkit-text-stroke: 1px var(--stroke);     /* …with soft stroke */
  text-shadow:
    0 1px 0 rgba(255,255,255,.35),
    0 40px 120px rgba(79,70,229,.10);
  font-size: var(--step-0);
  font-weight: 800;
  letter-spacing:.01em;
  height: calc(170px + 4rem);
  overflow: hidden;
  position: relative;
  width: 100vw;
}

/* Move the whole line */
.track{
  height:100%;
  padding:2rem 0;
  position:absolute;
  white-space:nowrap;
  will-change: transform;
  animation: fx-marquee 60s linear infinite;
}
.marquee:nth-child(2) .track{ animation-duration: 52s; animation-direction: reverse; }
.marquee:nth-child(3) .track{ animation-duration: 66s; }
.marquee:nth-child(4) .track{ animation-duration: 48s; animation-direction: reverse; }

/* Accent word */
.-focus{
  color: var(--focus);
  -webkit-text-stroke: 0; /* solid fill for emphasis */
  font-weight: 900;
}

/* Smooth marquee keyframes */
@keyframes fx-marquee{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(-50%,0,0); } /* text is long enough to loop */
}

/* ===== 3D folds (yours; unchanged except tiny polish) ===== */
.screen{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.wrapper-3d{ position:relative; perspective:20vw; transform-style:preserve-3d; }
.fold{ overflow:hidden; width:100vw; height:80vh; }
.fold-top{ position:absolute; transform-origin:bottom center; left:0; right:0; bottom:100%; }
.fold-center{ width:100vw; }
.fold-bottom{ position:absolute; transform-origin:top center; right:0; left:0; top:100%; }
.fold-align{ width:100%; height:100%; }
.fold-bottom .fold-align{ transform:translateY(-100%); }
.fold-top    .fold-align{ transform:translateY(100%); }
.fold-bottom{ transform:rotateX(120deg); }
.fold-top   { transform:rotateX(-120deg); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .track{ animation:none; }
}


/* Halo behind the right screenshot */
.fx-right{
  position: relative;
  isolation: isolate;
}
.fx-right::before{
  content:"";
  position:absolute; inset:-8% -6%;
  background:
    radial-gradient(60% 40% at 55% 45%, rgba(93,135,255,.25), transparent 60%),
    radial-gradient(45% 35% at 35% 65%, rgba(116,255,198,.18), transparent 60%);
  filter: blur(26px);
  z-index:-1;
  animation: fx-halo 8s ease-in-out infinite alternate;
}
@keyframes fx-halo{
  0% { transform: translate3d(-6px,4px,0) scale(1); opacity:.85; }
  100%{ transform: translate3d(6px,-6px,0) scale(1.06); opacity:1; }
}


/* Left hero card container (wrap your text area) */
.hero-card{
  border-radius: 28px;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
}
.hero-card::after{
  content:"";
  position:absolute; inset:0; border-radius: 28px;
  padding:1px; background: linear-gradient(135deg, rgba(101,125,255,.35), rgba(96,235,180,.35));
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}


#content #primary {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 1px 1px 20px #47536d21, inset 0 1px 1px rgba(255, 255, 255, .88), inset 1px 0 rgba(255, 255, 255, .53);
}

@media (max-width:980px){
  .pin-spacer{ display: none !important; } /* preserves children layout */
  .fx-right{ position: static !important; }    /* ensure it flows normally */
}


/* CTA row */
.fx-cta{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:14px;
}

/* Base glassy button */
.btn-glass{
  --h-pad: 18px; --v-pad: 12px;
  display:inline-flex; align-items:center; justify-content:center;
  padding: var(--v-pad) var(--h-pad);
  border-radius: 14px;
  font-weight: 700; letter-spacing:.2px;
  text-decoration:none; line-height:1;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 28px -14px rgba(16,22,33,.35);
}

/* Primary gradient */
.btn-primary{
  color:#fff;
  background: linear-gradient(135deg,#79ffd1,#85baff,#c29bff);
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 40px -18px rgba(16,22,33,.5);
}

/* Ghost / outline */
.btn-ghost{
  color:#ffffff;
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.55);
}
.btn-ghost:hover{
  background: rgba(255,255,255,.24);
  transform: translateY(-1px);
}

/* Small price hint */
.price-hint{
  font-size:.92rem; opacity:.8;
  padding:8px 10px; border-radius:10px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);
}

/* Mobile: full-width stack */
@media (max-width: 640px){
  .fx-cta{ gap:10px; }
  .btn-glass{ flex:1 1 auto; text-align:center; width:100%; }
  .price-hint{ width:100%; text-align:center; }
}