:root {
	--blue: #0A6CFF;
	--purple: #7B2FF7;
	--navy: #06173A;
	--ink: #0b1b3f;
	--mist: #D5D9E0;
	--bg: #f6f8fc;
	--grad: linear-gradient(135deg, var(--blue), var(--purple))
}

body {
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	color: var(--ink);
	background: #fff;
	padding-top: 60px;
}

.navbar {
	background: rgba(6, 23, 58, .97);
	backdrop-filter: blur(8px)
}

.navbar .nav-link {
	color: var(--mist);
	font-weight: 600;
	font-size: .92rem
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
	color: #fff
}

.brand img {
	width: 34px;
	height: 34px;
	border-radius: 50%
}

.btn-grad {
	background: var(--grad);
	color: #fff;
	border: 0;
	font-weight: 700;
	padding: .7rem 1.4rem;
	border-radius: 50px
}

.btn-grad:hover {
	color: #fff;
	filter: brightness(1.1);
	transform: translateY(-1px)
}

.btn-ghost {
	border: 2px solid var(--mist);
	color: #fff;
	border-radius: 50px;
	font-weight: 700;
	padding: .65rem 1.4rem
}

.btn-ghost:hover {
	background: #fff;
	color: var(--navy)
}

.text-grad {
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent
}

.hero {
	background: radial-gradient(circle at 80% 10%, rgba(123, 47, 247, .45), transparent 45%), radial-gradient(circle at 10% 90%, rgba(10, 108, 255, .4), transparent 45%), var(--navy);
	color: #fff;
	padding: 5rem 0
}

.hero p {
	color: var(--mist)
}

.page {
	display: none
}

.page.on {
	display: block
}

section.s {
	padding: 4.5rem 0
}

.alt {
	background: var(--bg)
}

.eyebrow {
	color: var(--purple);
	font-weight: 800;
	letter-spacing: .1em;
	font-size: .78rem;
	text-transform: uppercase
}

.card-x {
	border: 1px solid #e3e8f2;
	border-radius: 18px;
	padding: 1.5rem;
	height: 100%;
	background: #fff;
	transition: .2s
}

.card-x:hover {
	box-shadow: 0 12px 30px rgba(10, 108, 255, .12);
	transform: translateY(-3px)
}

.ico {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--grad);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 1.3rem;
	margin-bottom: 1rem
}

.step-n {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--grad);
	color: #fff;
	font-weight: 800;
	display: grid;
	place-items: center;
	flex: none
}

.chip {
	display: inline-block;
	padding: .25rem .7rem;
	border-radius: 50px;
	font-size: .72rem;
	font-weight: 800
}

.live {
	background: #dcfce7;
	color: #15803d
}

.soon {
	background: #ede4ff;
	color: var(--purple)
}

.ph {
	background: #fff7d6;
	border: 1px dashed #d4a800;
	border-radius: 6px;
	padding: 0 .35rem;
	font-size: .85em
}

.mock {
	background: #fff;
	border-radius: 18px;
	color: var(--ink);
	box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
	overflow: hidden
}

.mock .bar {
	background: var(--mist);
	padding: .5rem 1rem;
	font-size: .75rem
}

.price.pop {
	border: 2px solid var(--purple);
	position: relative
}

.cta {
	background: var(--grad);
	color: #fff;
	border-radius: 28px;
	padding: 3.5rem 2rem
}

footer {
	background: var(--navy);
	color: var(--mist);
	padding: 3.5rem 0 1.5rem
}

footer a {
	color: var(--mist);
	text-decoration: none;
	display: block;
	margin: .35rem 0;
	font-size: .92rem
}

footer a:hover {
	color: #fff
}

.accordion-button:not(.collapsed) {
	color: var(--purple);
	background: #f5f0ff
}

.legal h5 {
	margin-top: 1.6rem
}

a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 2px
}

.legal h2 {
	font-size: 1.35rem;
	font-weight: 800;
	margin-top: 2.2rem;
	padding-top: 1.2rem;
	border-top: 1px solid #e3e8f2
}

.legal p,
.legal li {
	color: #33415f;
	line-height: 1.75
}

.legal ul {
	padding-left: 1.2rem
}

.toc a {
	display: block;
	color: var(--ink);
	text-decoration: none;
	font-size: .88rem;
	padding: .25rem 0
}

.toc a:hover {
	color: var(--purple)
}