:root {
	--bg: #020b1b;
	--navy: #06172d;
	--navy2: #092447;
	--panel: rgba(255, 255, 255, .06);
	--line: rgba(255, 255, 255, .13);
	--text: #f7fbff;
	--muted: #aebbd0;
	--blue: #2e96ff;
	--blue2: #74b7ff;
	--gold: #d7bd62;
	--green: #13a463;
	--cp-logo-secondary: #4f9cff;
	--shadow: 0 24px 70px rgba(0, 0, 0, .38);
	font-family: Georgia, serif, system-ui, -apple-system, BlinkMacSystemFont, "Times New Roman", sans-serif
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	background: radial-gradient(circle at 12% 0%, rgba(46, 150, 255, .22), transparent 24rem), radial-gradient(circle at 90% 4%, rgba(116, 183, 255, .16), transparent 28rem), linear-gradient(180deg, #06172d 0%, #020b1b 28%, #020817 100%);
	color: var(--text);
	overflow-x: hidden
}

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

.shell {
	width: min(1230px, calc(100% - 44px));
	margin: 0 auto
}
.nav-wrap {
	position: sticky;
	top: 8px;
	z-index: 50;
	padding-top: 8px
}

.nav {
	min-height: 72px;
	display: grid;
	grid-template-columns: 1.1fr 1.8fr 1.1fr;
	align-items: center;
	gap: 18px;
	padding: 10px 24px 10px 28px;
	border: 1px solid var(--line);
	border-radius: 0 0 30px 30px;
	background: linear-gradient(180deg, rgba(15, 30, 57, .96), rgba(10, 22, 45, .82));
	box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .12);
	backdrop-filter: blur(20px)
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 5;
	font-weight: 850;
	font-size: 1.7rem;
	margin: 0;
	letter-spacing: 0
}

.brand-logo {
	width: 54px;
	height: 54px;
	object-fit: contain;
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35))
}

.cp-brand-cert { color: #fff; }

.cp-brand-pilot {
  color: var(--cp-logo-secondary);
}
.nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(18px, 3vw, 38px);
	color: rgba(236, 243, 255, .7);
	font-size: 22px
}

.nav-links a:hover {
	color: #fff
}

.nav-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 18px;
	font-size: 20px
}

.login {
	color: rgba(236, 243, 255, .78)
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 0 26px;
	border-radius: 27px;
	color: #031021;
	background: linear-gradient(135deg, var(--blue), var(--blue2));
	font-weight: 750;
	box-shadow: 0 18px 42px rgba(46, 150, 255, .27);
	transition: transform .15s ease, filter .15s ease
}

.button:hover {
	transform: translateY(-1px);
	filter: brightness(1.05)
}

.button.secondary {
	color: #eaf4ff;
	background: rgba(255, 255, 255, .07);
	border: 1px solid var(--line);
	box-shadow: none
}

.hero {
	min-height: 620px;
	display: grid;
	place-items: center;
	padding: 80px 0 64px;
	text-align: center
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgba(255, 255, 255, .055);
	color: var(--muted);
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase
}

.dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--blue2);
	box-shadow: 0 0 18px var(--blue2)
}

h1 {
	margin: 26px auto 20px;
	max-width: 1050px;
	font-size: clamp(54px, 8vw, 104px);
	line-height: .92;
	letter-spacing: -.08em
}

.grad {
	background: linear-gradient(120deg, #fff 10%, var(--blue2) 58%, var(--gold));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent
}

.hero p {
	margin: 0 auto;
	max-width: 790px;
	color: var(--muted);
	font-size: clamp(18px, 2vw, 25px);
	line-height: 1.48
}

.hero-actions {
	margin-top: 34px;
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap
}

.stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin: 10px 0 120px
}

.stat {
	min-height: 128px;
	border: 1px solid var(--line);
	border-radius: 34px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035));
	display: grid;
	place-items: center;
	text-align: center;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06)
}

.stat strong {
	display: block;
	font-size: 38px;
	line-height: 1;
	font-weight: 850
}

.stat span {
	display: block;
	margin-top: 14px;
	color: #bfd0ea;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 17px
}

.section {
	padding: 82px 0
}

.section-head {
	text-align: center;
	max-width: 950px;
	margin: 0 auto 58px
}

.eyebrow {
	color: var(--blue2);
	text-transform: uppercase;
	letter-spacing: .22em;
	font-weight: 800;
	font-size: 14px
}

.section h2,
.page h1 {
	margin: 18px auto 16px;
	font-size: clamp(44px, 6vw, 72px);
	line-height: 1;
	letter-spacing: -.06em
}

.section-head p,
.page-lead {
	color: var(--muted);
	font-size: 24px;
	line-height: 1.5
}

.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px
}

.card {
	border: 1px solid var(--line);
	border-radius: 28px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035));
	padding: 28px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06)
}

.card b {
	display: block;
	color: #fff;
	font-size: 22px;
	margin-bottom: 10px
}

.card p,
.legal p {
	margin: 0;
	color: var(--muted);
	line-height: 1.65;
	font-size: 16px
}

.mock {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 24px;
	align-items: stretch
}

.screen,
.legal {
	border: 1px solid var(--line);
	border-radius: 34px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .04));
	box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .08);
	padding: 28px
}

.screen-top {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--muted);
	margin-bottom: 18px
}

.light {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .24)
}

.screen h3 {
	font-size: 28px;
	margin: 0 0 8px
}

.meter {
	height: 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	overflow: hidden
}

.meter i {
	display: block;
	height: 100%;
	width: 82%;
	background: linear-gradient(90deg, var(--green), var(--blue2));
	border-radius: inherit
}

.rows {
	display: grid;
	gap: 12px;
	margin-top: 22px
}

.row {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	padding: 16px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .055);
	color: var(--muted)
}

.row strong {
	color: #fff
}

.final {
	margin: 90px 0;
	border: 1px solid var(--line);
	border-radius: 34px;
	background: radial-gradient(circle at 80% 20%, rgba(46, 150, 255, .24), transparent 20rem), linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035));
	padding: 56px;
	text-align: center
}

.final h2 {
	margin: 0 auto 18px;
	max-width: 850px;
	font-size: clamp(40px, 5vw, 68px);
	letter-spacing: -.06em;
	line-height: 1
}

.final p {
	color: var(--muted);
	font-size: 20px;
	margin: 0 auto 26px;
	max-width: 720px
}

.footer {
	border-top: 1px solid var(--line);
	padding: 36px 0 54px;
	color: var(--muted);
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap
}

.footer-links {
	display: flex;
	gap: 18px;
	flex-wrap: wrap
}

.page {
	padding: 80px 0 40px;
	text-align: center
}

.legal {
	max-width: 920px;
	margin: 0 auto 90px
}

.legal h2 {
	font-size: 30px;
	margin: 32px 0 12px
}

.legal h2:first-child {
	margin-top: 0
}

.legal ul {
	color: var(--muted);
	line-height: 1.8
}

.legal li {
	margin: 8px 0
}

@media(max-width:900px) {
	.nav {
		grid-template-columns: 1fr;
		border-radius: 24px
	}

	.nav-links,
	.nav-actions {
		justify-content: flex-start;
		flex-wrap: wrap;
		font-size: 17px
	}

	.hero {
		text-align: left;
		place-items: start
	}

	.hero-actions {
		justify-content: flex-start
	}

	.stats,
	.cards,
	.mock {
		grid-template-columns: 1fr
	}

	.stats {
		margin-bottom: 70px
	}

	.section-head {
		text-align: left
	}

	.final {
		text-align: left;
		padding: 30px
	}
}

@media(max-width:520px) {
	.shell {
		width: min(100% - 22px, 1230px)
	}

	h1 {
		font-size: 48px
	}

	.stat strong {
		font-size: 32px
	}

	.nav {
		padding: 14px
	}

	.button {
		width: 100%
	}

	.nav-actions {
		width: 100%
	}
}