:root {
	--bg0: #070A12;
	--bg1: #0B1020;
	--card: rgba(255, 255, 255, .06);
	--card2: rgba(255, 255, 255, .08);
	--stroke: rgba(255, 255, 255, .10);
	--text: #EAF0FF;
	--muted: rgba(234, 240, 255, .72);
	--muted2: rgba(234, 240, 255, .55);
	--brand: #7C5CFF;
	--brand2: #2FE6FF;
	--ok: #33D6A6;
	--warn: #FFCC66;
	--shadow: 0 18px 60px rgba(0, 0, 0, .45);
	--radius: 22px;
}

* {
	box-sizing: border-box
}

html,
body {
	height: 100%
}

body {
	margin: 0;
	color: var(--text);
	background: radial-gradient(1200px 600px at 20% -10%, rgba(124, 92, 255, .35), transparent 55%),
		radial-gradient(900px 520px at 85% 5%, rgba(47, 230, 255, .28), transparent 52%),
		linear-gradient(180deg, var(--bg0), var(--bg1));
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	overflow-x: hidden;
}

a {
	color: inherit;
	text-decoration: none
}

.container {
	width: min(1140px, 92vw);
	margin: 0 auto
}

.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(16px);
	background: linear-gradient(180deg, rgba(7, 10, 18, .75), rgba(7, 10, 18, .25));
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	letter-spacing: .2px;
}

.logo {
	width: 36px;
	height: 36px;
	border-radius: 12px;
	background: radial-gradient(circle at 30% 30%, rgba(47, 230, 255, .9), rgba(124, 92, 255, .9));
	box-shadow: 0 12px 38px rgba(124, 92, 255, .25);
	border: 1px solid rgba(255, 255, 255, .18);
}

.brand b {
	font-size: 15px
}

.brand span {
	color: var(--muted2);
	font-size: 12px
}

.menu {
	display: flex;
	gap: 18px;
	align-items: center
}

.menu a {
	color: var(--muted);
	font-size: 13px;
	padding: 8px 10px;
	border-radius: 12px;
	border: 1px solid transparent;
	transition: .2s;
}

.menu a:hover {
	color: var(--text);
	border-color: rgba(255, 255, 255, .10);
	background: rgba(255, 255, 255, .04);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 999px;
	padding: 11px 16px;
	font-weight: 650;
	font-size: 13px;
	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .06);
	color: var(--text);
	box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
	transition: transform .15s ease, background .2s ease, border-color .2s ease;
	cursor: pointer;
	user-select: none;
}

.btn:hover {
	transform: translateY(-1px);
	background: rgba(255, 255, 255, .09);
	border-color: rgba(255, 255, 255, .22)
}

.btn.primary {
	border: 1px solid rgba(124, 92, 255, .35);
	background: linear-gradient(135deg, rgba(124, 92, 255, .92), rgba(47, 230, 255, .70));
	box-shadow: 0 18px 60px rgba(124, 92, 255, .24);
}

.btn.primary:hover {
	filter: saturate(1.08)
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .05);
	color: var(--muted);
	font-size: 12px;
	width: fit-content;
}

.dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, var(--brand2), var(--brand));
	box-shadow: 0 0 18px rgba(47, 230, 255, .35);
}

/* HERO */
.hero {
	position: relative;
	padding: 68px 0 24px;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 32px;
	align-items: center;
}

@media (max-width: 920px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 18px
	}

	.menu {
		display: none
	}
}

h1 {
	margin: 16px 0 12px;
	font-size: clamp(32px, 4.2vw, 54px);
	line-height: 1.05;
	letter-spacing: -0.8px;
}

.lead {
	color: var(--muted);
	font-size: 15px;
	line-height: 1.55;
	max-width: 56ch;
	margin: 0 0 18px;
}

.cta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 18px 0 10px
}

.fineprint {
	color: var(--muted2);
	font-size: 12px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 10px;
}

.fineprint .tag {
	border: 1px solid rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .04);
	padding: 6px 10px;
	border-radius: 999px;
}

/* Orb / Visual */
.visual {
	position: relative;
	border-radius: var(--radius);
	background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
	border: 1px solid rgba(255, 255, 255, .10);
	box-shadow: var(--shadow);
	overflow: hidden;
	min-height: 420px;
}

.orb {
	position: absolute;
	inset: -40%;
	background:
		radial-gradient(circle at 30% 35%, rgba(47, 230, 255, .95), transparent 40%),
		radial-gradient(circle at 65% 30%, rgba(124, 92, 255, .95), transparent 42%),
		radial-gradient(circle at 55% 70%, rgba(51, 214, 166, .65), transparent 44%);
	filter: blur(18px);
	animation: floaty 10s ease-in-out infinite;
	opacity: .9;
	transform: rotate(10deg);
}

@keyframes floaty {

	0%,
	100% {
		transform: translate(0, 0) rotate(10deg) scale(1)
	}

	50% {
		transform: translate(4%, -3%) rotate(6deg) scale(1.03)
	}
}

.glass {
	position: absolute;
	inset: 0;
	background: radial-gradient(900px 420px at 35% 10%, rgba(255, 255, 255, .09), transparent 60%);
	backdrop-filter: blur(14px);
}

.mock {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 18px;
	top: 18px;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(10, 14, 28, .55);
	overflow: hidden;
}

.mock-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.mock-title {
	font-weight: 700;
	font-size: 13px
}

.mock-sub {
	color: var(--muted2);
	font-size: 12px
}

.mock-body {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 10px;
	padding: 12px;
	height: calc(100% - 54px);
}

.panel {
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, .10);
	background: rgba(255, 255, 255, .05);
	padding: 12px;
	overflow: hidden;
}

.panel h3 {
	margin: 0 0 10px;
	font-size: 12px;
	color: var(--muted);
	letter-spacing: .2px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.chip {
	font-size: 11px;
	color: var(--text);
	background: rgba(124, 92, 255, .18);
	border: 1px solid rgba(124, 92, 255, .26);
	padding: 4px 8px;
	border-radius: 999px;
}

.line {
	height: 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .08);
	margin: 10px 0;
	position: relative;
	overflow: hidden;
}

.line::after {
	content: "";
	position: absolute;
	inset: -2px;
	background: linear-gradient(90deg, rgba(47, 230, 255, .0), rgba(47, 230, 255, .22), rgba(124, 92, 255, .20), rgba(47, 230, 255, .0));
	transform: translateX(-60%);
	animation: shimmer 2.2s infinite;
}

@keyframes shimmer {
	to {
		transform: translateX(60%);
	}
}

/* Trust strip */
.strip {
	margin: 26px 0 10px;
	border: 1px solid rgba(255, 255, 255, .10);
	background: rgba(255, 255, 255, .03);
	border-radius: var(--radius);
	padding: 14px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

@media (max-width: 920px) {
	.strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.strip .item {
	border-radius: 16px;
	padding: 12px;
	border: 1px solid rgba(255, 255, 255, .08);
	background: rgba(255, 255, 255, .04);
}

.strip .k {
	font-size: 12px;
	color: var(--muted2)
}

.strip .v {
	margin-top: 6px;
	font-weight: 750
}

/* Sections */
section {
	padding: 58px 0
}

.section-title {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 18px;
}

.section-title h2 {
	margin: 0;
	font-size: clamp(20px, 2.6vw, 30px);
	letter-spacing: -.3px;
}

.section-title p {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	max-width: 58ch
}

/* Feature grid */
.grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

@media (max-width: 920px) {
	.grid {
		grid-template-columns: 1fr
	}
}

.card {
	border-radius: var(--radius);
	padding: 16px;
	border: 1px solid rgba(255, 255, 255, .10);
	background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
	box-shadow: 0 14px 50px rgba(0, 0, 0, .25);
	position: relative;
	overflow: hidden;
	min-height: 164px;
}

.card::before {
	content: "";
	position: absolute;
	inset: -40%;
	background: radial-gradient(circle at 20% 25%, rgba(124, 92, 255, .20), transparent 50%),
		radial-gradient(circle at 80% 20%, rgba(47, 230, 255, .16), transparent 55%);
	filter: blur(18px);
	opacity: .9;
}

.card>* {
	position: relative
}

.ico {
	width: 42px;
	height: 42px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .06);
	display: grid;
	place-items: center;
	margin-bottom: 10px;
}

.ico svg {
	opacity: .9
}

.card h3 {
	margin: 0 0 8px;
	font-size: 15px
}

.card p {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.5
}

.meta {
	margin-top: 12px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	color: var(--muted2);
	font-size: 12px;
}

.meta span {
	border: 1px solid rgba(255, 255, 255, .10);
	background: rgba(255, 255, 255, .04);
	padding: 6px 10px;
	border-radius: 999px;
}

/* Steps */
.steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

@media (max-width: 920px) {
	.steps {
		grid-template-columns: 1fr
	}
}

.step {
	border-radius: var(--radius);
	padding: 16px;
	border: 1px solid rgba(255, 255, 255, .10);
	background: rgba(255, 255, 255, .04);
}

.num {
	width: 34px;
	height: 34px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, rgba(124, 92, 255, .88), rgba(47, 230, 255, .60));
	border: 1px solid rgba(255, 255, 255, .12);
	font-weight: 800;
	margin-bottom: 10px;
}

.step h3 {
	margin: 0 0 6px;
	font-size: 14px
}

.step p {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.55
}

/* CTA block */
.cta-block {
	border-radius: calc(var(--radius) + 6px);
	padding: 22px;
	border: 1px solid rgba(255, 255, 255, .12);
	background: radial-gradient(900px 420px at 25% 10%, rgba(124, 92, 255, .22), transparent 55%),
		radial-gradient(900px 420px at 85% 10%, rgba(47, 230, 255, .18), transparent 55%),
		rgba(255, 255, 255, .03);
	box-shadow: var(--shadow);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.cta-block h3 {
	margin: 0;
	font-size: 18px
}

.cta-block p {
	margin: 6px 0 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.5
}

.cta-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap
}

/* FAQ */
.faq {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media (max-width: 920px) {
	.faq {
		grid-template-columns: 1fr
	}
}

details {
	border-radius: var(--radius);
	border: 1px solid rgba(255, 255, 255, .10);
	background: rgba(255, 255, 255, .04);
	padding: 14px 14px;
}

summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--text);
	list-style: none;
}

summary::-webkit-details-marker {
	display: none
}

details p {
	margin: 10px 0 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.55;
}

footer {
	padding: 40px 0 50px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	color: var(--muted2);
	font-size: 12px;
}

.foot {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.foot b {
	color: var(--text)
}