* {
	box-sizing: border-box;
}
:root {
	--bg: #0b1020; /* canvas */
	--surface: #141826; /* cards/sections */
	--muted: #94a3b8; /* secondary text */
	--border: #1f2a37; /* subtle borders */
	--content: #e5e7eb; /* primary text */
	--content-muted: #cbd5e1; /* muted content */
	--primary: #7dd3fc; /* cyan */
	--secondary: #a78bfa; /* violet */
}

html,
body {
	margin: 0;
	padding: 0;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: var(--content);
	background: var(--bg);
}
a {
	color: var(--primary);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

.container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
}
.section {
	padding: 56px 0;
}
.section-muted {
	background: var(--surface);
}
.center {
	text-align: center;
}
.small {
	font-size: 14px;
}
.muted {
	color: var(--muted);
}
.lead {
	font-size: 18px;
	color: var(--content-muted);
}

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	border-bottom: 1px solid var(--border);
}
.brand {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 800;
	letter-spacing: .2px;
}
.brand-logo {
	width: 20px;
	height: 20px;
	display: block;
}
.nav {
	display: flex;
	gap: 16px;
	align-items: center;
}

.btn {
	display: inline-block;
	padding: 10px 16px;
	border-radius: 8px;
	font-weight: 600;
}
.btn-primary {
	background: var(--primary);
	color: #0b1020;
}
.btn-secondary {
	background: #0f172a;
	color: var(--content);
	border: 1px solid var(--border);
}
.btn-link {
	color: var(--primary);
}
.btn.disabled {
	opacity: 0.6;
	cursor: default;
	pointer-events: none;
	filter: saturate(0.9);
}

.hero {
	background: linear-gradient(
		180deg,
		rgba(2, 6, 23, 0) 0%,
		rgba(2, 6, 23, 0.6) 100%
	);
}
.grid {
	display: grid;
	gap: 24px;
}
.hero-grid {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	align-items: center;
}
.grid.three {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.announcement {
	background: #0f172a;
	border-bottom: 1px solid var(--border);
	padding: 12px 0;
}

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 20px;
}
.card.preview {
	padding: 0;
	overflow: hidden;
	color: var(--muted);
	background: #0f172a;
}
.feature-list {
	margin: 16px 0 0 18px;
	line-height: 1.6;
}

.price {
	text-align: left;
}
.price-name {
	font-size: 18px;
	font-weight: 700;
}
.price-amount {
	font-size: 28px;
	font-weight: 800;
	margin-top: 8px;
}
.price-detail {
	color: var(--muted);
	margin-top: 4px;
}

.cta-row {
	display: flex;
	gap: 12px;
	margin-top: 18px;
}

.footer {
	background: #080c18;
	color: #cbd5e1;
	padding: 28px 0;
}
.footer-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}