/* Base styles */
:root {
	--bg: #ffffff;
	--panel: #ffffff;
	--elev: #ffffff;
	--text: #0f172a;
	--text-dim: #475569;
	--brand: #6d4cff;
	--brand-strong: #22d3ee;
	--brand-light: #6ee7ff;
	--accent: #a78bfa;
	--border: #e2e8f0;
	--success: #34d399;
	--warning: #f59e0b;
	--danger: #f87171;
	--radius: 12px;
	--radius-sm: 8px;
	--shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
}

* {
	box-sizing: border-box;
}
html,
body {
	height: 100%;
}
body {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	background: radial-gradient(1200px 800px at 80% -20%, rgba(34, 211, 238, 0.06), transparent 50%), radial-gradient(1200px 800px at 20% 120%, rgba(167, 139, 250, 0.06), transparent 50%), var(--bg);
	color: var(--text);
	line-height: 1.6;
}

.container {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: saturate(140%) blur(8px);
	background: color-mix(in oklab, var(--bg), transparent 0%);
	border-bottom: 1px solid var(--border);
}
.site-header.scrolled {
	background: rgba(255, 255, 255, 0.75);
	box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
}
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
}
.brand {
	display: flex;
	gap: 10px;
	align-items: center;
	text-decoration: none;
	color: var(--text);
	font-weight: 700;
}
.brand-mark {
	display: inline-grid;
	place-items: center;
	width: 72px;
	height: 48px;
	border-radius: 8px;
	background: transparent;
}
.brand-mark img {
	display: block;
	height: 100%;
	object-fit: contain;
	border-radius: inherit;
}
.nav-toggle {
	display: none;
}
/* CTA panel */
.cta-panel {
	text-align: center;
	border: 1px solid var(--border);
	background: linear-gradient(180deg, rgba(2, 6, 23, 0.07), transparent);
	padding: 28px;
	border-radius: var(--radius);
	box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
}
.site-nav ul {
	display: flex;
	gap: 8px;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav a {
	display: inline-block;
	padding: 10px 12px;
	color: var(--text-dim);
	text-decoration: none;
	border-radius: 8px;
}
.site-nav a:hover,
.site-nav a.active {
	color: var(--text);
	background: rgba(2, 6, 23, 0.06);
}
.site-nav a.cta {
	color: #0b0c10;
	background: var(--brand-strong);
	font-weight: 700;
}
.site-nav a.cta:hover {
	filter: brightness(1.1);
}

/* Hero */
.hero {
	padding: 72px 0 24px;
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(34, 211, 238, 0.12) 0%, rgba(255, 255, 255, 0) 40%), linear-gradient(90deg, rgba(167, 139, 250, 0.12) 0%, rgba(255, 255, 255, 0) 50%);
	border-bottom: solid 1px #eee;
	border-top: solid 1px #eee;
}
.hero-inner {
	text-align: center;
}
.eyebrow {
	color: #a491fa;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 10px;
}
h1 {
	font-size: clamp(28px, 5vw, 56px);
	line-height: 1.1;
	margin: 0 0 12px;
}
h2 {
	font-size: clamp(22px, 3.4vw, 36px);
	line-height: 1.2;
	margin: 0 0 10px;
}
h3 {
	font-size: 20px;
	line-height: 1.3;
}
.lead {
	font-size: clamp(16px, 2.3vw, 20px);
	color: var(--text-dim);
	margin: 20px 4px;
	max-width: 800px;
}
.hero-lead {
	font-size: clamp(16px, 2.3vw, 20px);
	color: var(--text-dim);
	margin: 20px auto;
	max-width: 650px;
}
.hero-ctas {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 16px 0 24px;
}
.trust-bar {
	margin-top: 16px;
	border-top: 1px solid var(--border);
}
.trust-items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 16px;
	padding: 16px 0 0;
	color: var(--text-dim);
	font-size: 14px;
}

/* Buttons */
.button {
	border: 0;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 10px;
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.button.primary {
	background: linear-gradient(135deg, #f34dbe 0%, #ab90ff 100%);
	color: #0b0c10;
}
.button.secondary {
	background: rgba(2, 6, 23, 0.04);
	color: var(--text);
	border: 1px solid var(--border);
}
.button.tertiary {
	background: linear-gradient(135deg, #c8e4ff, #efefef);
	color: #7a5ef9;
	border: solid 1px #d0daff;
}
.button.accent {
	background: linear-gradient(135deg, var(--accent) 0%, #7dd3fc 100%);
	color: #0b0c10;
}
.button:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow);
}

/* Buttons: states */
.button:disabled,
.button[disabled] {
	opacity: 0.6;
	pointer-events: none;
}
.filters .button.active,
.filters .button[aria-pressed="true"] {
	background: var(--brand-strong);
	color: #0b0c10;
}

/* Sections */
.section {
	padding: 56px 0;
}
.section.alt {
	background: rgba(2, 6, 23, 0.03);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}
.section-head .link {
	color: var(--brand);
	text-decoration: none;
}
.link.accent {
	color: var(--accent);
}

/* Cards */
.card-grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 16px;
}
.card-grid.three {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 700px) {
	.card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.card-grid.three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.trust-items {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.card {
	background: #ffffff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 1px 1px rgba(15, 23, 42, 0.02), 0 8px 24px rgba(15, 23, 42, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card.upcoming {
	opacity: 0.85;
}
.card-body {
	padding: 18px;
}
.card:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 16px 36px rgba(15, 23, 42, 0.08);
	border-color: color-mix(in oklab, var(--brand-strong), #94a3b8 30%);
}
.card .media {
	display: block;
	aspect-ratio: 16/9;
	background: linear-gradient(180deg, rgba(2, 6, 23, 0.06), rgba(2, 6, 23, 0.03));
	border-bottom: 1px solid var(--border);
}
.card .media img {
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0 auto;
}
.card h3 {
	margin: 0 0 6px;
	font-size: 20px;
}
.card .sub {
	margin: 0 0 8px;
	color: var(--text-dim);
	font-size: 14px;
}
.card-actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	flex-wrap: wrap;
}

/* Tiles */
.tile-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 12px;
}
@media (min-width: 700px) {
	.tile-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}
.tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	border-radius: var(--radius-sm);
	border: 1px dashed var(--border);
	color: var(--text);
	text-decoration: none;
	background: rgba(2, 6, 23, 0.02);
}
.tile:hover {
	border-style: solid;
	color: var(--brand);
}

a.button.tertiary:hover {
	background: linear-gradient(135deg, #add2f5, #f1f1f1);
}

/* Focus states */
a:focus-visible,
button:focus-visible,
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible,
.tile:focus-visible {
	outline: 2px solid var(--brand-strong);
	outline-offset: 2px;
}

/* Form controls */
.input:focus,
.select:focus,
.textarea:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
	outline: none;
}

#form-status {
	transition: color 0.2s ease, opacity 0.2s ease;
}
#form-status.success {
	color: var(--success);
}
#form-status.error {
	color: var(--danger);
}

/* Footer */
.site-footer {
	border-top: 1px solid var(--border);
	margin-top: 48px;
}
.footer-inner {
	display: grid;
	gap: 10px;
	padding: 20px 0;
	align-items: center;
}
@media (min-width: 700px) {
	.footer-inner {
		grid-template-columns: 1fr auto;
	}
}
.footer-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--text-dim);
}
.footer-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}
.footer-nav a {
	color: var(--text-dim);
	text-decoration: none;
	padding: 6px 8px;
	border-radius: 8px;
}
.footer-nav a:hover {
	color: var(--text);
	background: rgba(2, 6, 23, 0.05);
}
.copyright {
	color: var(--text-dim);
	text-align: center;
}

/* Utility */
.link {
	color: var(--brand);
	text-decoration: none;
}
.hidden {
	display: none !important;
}

/* Reveal animations */
.reveal {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.in {
	opacity: 1;
	transform: translateY(0);
}

/* Responsive nav */
@media (max-width: 840px) {
	.nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		color: var(--text);
		border: 1px solid var(--border);
		border-radius: 8px;
		padding: 6px 10px;
	}
	.site-nav {
		position: fixed;
		inset: 64px 0 auto 0;
		background: var(--elev);
		border-bottom: 1px solid var(--border);
		transform: translateY(-120%);
		transition: transform 0.25s ease;
	}
	.site-nav.open {
		transform: translateY(0);
	}
	.site-nav ul {
		flex-direction: column;
		align-items: stretch;
		padding: 10px;
	}
	.site-nav a {
		padding: 12px;
	}
}