:root {
	--crystal-blue: rgb(94, 200, 255);
	--burnt-orange: rgb(214, 110, 40);
	--text-soft: rgba(230, 225, 240, 0.85);
	--text-dim: rgba(200, 195, 220, 0.55);
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	background: #08060d;
	color: var(--text-soft);
	font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background:
		radial-gradient(ellipse at 50% 20%, rgba(60, 30, 90, 0.55) 0%, rgba(20, 10, 35, 0.85) 45%, #05030a 100%),
		linear-gradient(180deg, #0a0612 0%, #050309 100%);
	background-attachment: fixed;
}

#constellationCanvas {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 0;
	pointer-events: none;
}

.top {
	position: relative;
	z-index: 2;
	padding: 6vh 24px 0;
	text-align: center;
}

.hero {
	position: relative;
	z-index: 2;
	flex: 1 0 auto;
}

.wordmark {
	margin: 0;
	font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
	font-size: clamp(1.25rem, 3.2vw, 2.4rem);
	font-weight: 200;
	letter-spacing: 0.42em;
	color: #f3eefa;
	text-shadow: 0 0 28px rgba(140, 110, 200, 0.35);
}

.brands {
	position: relative;
	z-index: 2;
	display: flex;
	gap: 22px;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	padding: 0 24px 4vh;
}

a.btn-mm,
button.btn-mm {
	font-size: clamp(0.7rem, 1.6vw, 0.95rem);
	letter-spacing: clamp(0.06em, 0.22vw, 0.15em);
	padding-top: 18px;
	padding-bottom: 18px;
	padding-left: clamp(14px, 2.4vw, 32px);
	padding-right: clamp(14px, 2.4vw, 32px);
	white-space: nowrap;
}

.site-footer {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 18px 28px 22px;
	font-size: 0.78rem;
	line-height: 1.4;
	color: var(--text-dim);
}

.footer-name {
	color: var(--text-soft);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.footer-contact {
	text-align: right;
	letter-spacing: 0.04em;
}

.footer-contact a {
	color: var(--text-dim);
	text-decoration: none;
}
.footer-contact a:hover { color: var(--text-soft); }

@media (max-width: 767px) {
	.wordmark { letter-spacing: 0.3em; }
	.site-footer {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.footer-contact { text-align: center; }
}

@media (max-width: 480px) {
	html, body {
		height: 100vh;
		height: 100dvh;
		overflow: hidden;
	}
	body {
		min-height: 0;
		height: 100vh;
		height: 100dvh;
	}
	.top {
		padding: clamp(10px, 2.5vh, 22px) 14px 0;
		flex: 0 0 auto;
	}
	.wordmark {
		font-size: clamp(0.85rem, 4.4vw, 1.1rem);
		letter-spacing: 0.26em;
	}
	.hero {
		flex: 1 1 auto;
		min-height: 0;
	}
	.brands {
		flex-direction: column;
		gap: clamp(8px, 1.6vh, 14px);
		padding: 0 0 calc(clamp(8px, 1.8vh, 16px) + 50px);
		max-width: 100%;
		flex: 0 0 auto;
		align-items: center;
	}
	.brands .btn-mm:not(.btn-mm-orange) { order: 1; }
	.brands .btn-mm.btn-mm-orange { order: 2; }
	a.btn-mm,
	button.btn-mm {
		display: block;
		flex: 0 0 auto;
		width: 70vw;
		max-width: none;
		text-align: center;
		box-sizing: border-box;
	}
	.site-footer {
		flex: 0 0 auto;
		padding: clamp(6px, 1.2vh, 12px) 14px clamp(8px, 1.6vh, 14px);
		font-size: clamp(0.6rem, 2.6vw, 0.72rem);
		gap: 2px;
		line-height: 1.35;
	}
}

@media (max-width: 480px) and (max-height: 640px) {
	.wordmark { letter-spacing: 0.22em; }
}