:root {
	--siteBg: #050911;
	--siteBgAlt: #0a1222;
	--surfaceBg: #0e192d;
	--surfaceBorder: rgba(190, 210, 255, 0.2);
	--textMain: #e8efff;
	--textMuted: #b4c4e6;
	--accentMain: #4ea1ff;
	--accentMainHover: #73b8ff;
	--navHeight: 4.5rem;
	--sectionSpacing: 6rem;
	--sectionWidth: 960px;
}

@font-face {
	font-family: "Zekton";
	src: url("../fonts/Zekton-Regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

html,
body {
	background-color: var(--siteBg);
	color: var(--textMain);
}

body {
	min-height: 100vh;
	background-image:
		radial-gradient(circle at 12% 80%, rgba(80, 140, 255, 0.05), transparent 50%),
		radial-gradient(circle at 85% 5%, rgba(250, 150, 40, 0.05), transparent 50%);
	background-attachment: fixed;
}

.siteHeader,
.siteFooter {
	background-color: rgba(5, 9, 17, 0.88);
	backdrop-filter: blur(6px);
}

.siteFooter {
	min-height: 10rem;
}

.footerSections {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem 3.5rem;
}

.footerSection {
	min-width: 10rem;
}

.footerSectionTitle {
	color: var(--textMain);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.footerLinks {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.footerLinks a {
	color: var(--textMuted);
	text-decoration-color: rgba(180, 196, 230, 0.45);
	text-underline-offset: 0.25em;
}

.footerLinks a:hover,
.footerLinks a:focus {
	color: var(--textMain);
	text-decoration-color: var(--accentMainHover);
}

.footerCompanyName {
	font-family: "Zekton", var(--bs-body-font-family);
}

.navbar {
	min-height: var(--navHeight);
}

.brandText {
	color: var(--textMain);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.navbarLogo {
	display: block;
	width: 2.25rem;
	height: 2.25rem;
	object-fit: contain;
	filter: drop-shadow(0 0 10px rgba(78, 161, 255, 0.18));
}
.navbarLogo:hover,
.navbarLogo:focus,
.navbarLogo:active {
	color: var(--textMain);
	filter: drop-shadow(0px 0px 5px #fff);
}

.heroLogoFrame {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(320px, 80vw, 600px);
	height: auto;
	background-color: rgba(244, 248, 255, 0.75);
	border: 1px solid rgba(180, 196, 230, 0.7);
	border-radius: 1.4rem;
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

.navbar .nav-link {
	color: var(--textMuted);
	font-size: 1.5rem;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
	color: var(--textMain);
	filter: drop-shadow(0px 0px 5px #fff);
}

.navbar-toggler {
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28232, 239, 255, 0.96%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	border-color: rgba(232, 239, 255, 0.75);
}

.navbar-toggler:focus {
	box-shadow: 0 0 0 0.2rem rgba(78, 161, 255, 0.35);
}

.py-lg-6 {
	padding-top: 6rem;
	padding-bottom: 6rem;
}

.contentSection {
	padding-top: 2rem;
	padding-bottom: 10rem;
	border-top: 1px solid #222;
	scroll-margin-top: var(--navHeight);
}

.contentSectionAccent {
	background: rgba(153, 110, 75, 0.1);
}

.sectionShell {
	max-width: var(--sectionWidth);
	margin: 0 auto;
}

.standardPage {
	min-height: calc(100vh - var(--navHeight) - 10rem);
}

.heroSection {
	position: relative;
	overflow: hidden;
	min-height: min(78vh, 860px);
	display: flex;
	align-items: center;
}

.heroBackground {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(180deg, rgba(4, 10, 22, 0.1) 0%, rgba(2, 7, 17, 0.2) 100%),
		url("../img/carina_nebula_1024x593.jpg");
	background-image:
		linear-gradient(180deg, rgba(4, 10, 22, 0.1) 0%, rgba(2, 7, 17, 0.2) 100%),
		image-set(
			url("../img/carina_nebula_1024x593.webp") type("image/webp"),
			url("../img/carina_nebula_1024x593.jpg") type("image/jpeg")
		);
	background-size: cover;
	background-position: center center;
	transform: scale(1.01);
}

.heroContentWrap {
	position: relative;
	z-index: 1;
}

.heroContent {
	max-width: 880px;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background-color: rgba(5, 11, 22, 0.58);
	border: 1px solid rgba(190, 210, 255, 0.18);
	border-radius: 1.75rem;
	backdrop-filter: blur(14px);
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32);
	text-shadow: 0 1px 20px rgba(0, 0, 0, 0.65);
}

.heroEyebrow {
	letter-spacing: 0.15em;
	color: var(--accentMainHover);
	font-size: 0.8rem;
}

.heroTagline {
	color: #f1f7ff;
}

.heroPrototypeLogos {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.25rem;
	margin: 0 0 2rem;
	flex-wrap: wrap;
}

.heroPrototypeLogo {
	display: block;
	width: 90%;
	height: 90%;
	opacity: 0.98;
	filter: none;
}

.heroCenterLogo {
	width: 90%;
	height: 90%;
	object-fit: contain;
}

.capabilityCard,
.form-control,
textarea.form-control {
	background-color: var(--surfaceBg);
	border-color: var(--surfaceBorder);
	color: var(--textMain);
}

.capabilityCard {
	transition:
		transform 0.2s ease,
		border-color 0.2s ease;
}

.capabilityCard:hover {
	transform: translateY(-2px);
	border-color: rgba(115, 184, 255, 0.5);
}

.form-label,
.card-title {
	color: var(--textMain);
}

.form-control::placeholder,
.text-body-secondary {
	color: var(--textMuted) !important;
}

.form-control:focus,
textarea.form-control:focus {
	background-color: #13233d;
	border-color: var(--accentMain);
	box-shadow: 0 0 0 0.2rem rgba(78, 161, 255, 0.25);
	color: var(--textMain);
}

.btn-primary {
	background-color: var(--accentMain);
	border-color: var(--accentMain);
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--accentMainHover);
	border-color: var(--accentMainHover);
}

.honeypotField {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 575.98px) {
	.brandText {
		font-size: 0.95rem;
	}

	.heroSection {
		min-height: 72vh;
	}

	.heroPrototypeLogos {
		gap: 0.75rem;
		margin: 1rem 0 1.5rem;
	}

	.heroContent {
		padding: 1.25rem;
		border-radius: 1.25rem;
	}

	.heroPrototypeLogo {
		width: min(80vw, 250px);
	}
}