html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

/* Anchor navigation offset */
section[id] {
	scroll-margin-top: 4rem;
}
/* larger offset needed for mobile sitenav */
@media (max-width: 991px) {
	section[id] {
		scroll-margin-top: 26rem;
	}
}

/* Bootstrap variables */
:root {
	--bs-primary: #5b4ef0;
	--bs-success: #0fa89e;
	--bs-body-font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--bs-body-bg: #f5f4f9;
	--bs-border-color: rgba(90, 80, 180, 0.1);
}

/* Typography */
body {
	font-size: 16px;
}

.display-1,
.display-2,
.display-3 {
	font-family: "Syne", sans-serif;
	font-weight: 750;
	letter-spacing: -0.04em;
	line-height: 1;
}

.display-1 {
	font-size: clamp(3rem, 7vw, 6.5rem);
}
.display-2 {
	font-size: clamp(2rem, 4vw, 3.5rem);
}
.display-3 {
	font-size: 1.2rem;
}

.text-gradient {
	background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-success) 100%);
	background-clip: text;
	font-style: normal;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.text-primary {
	color: var(--bs-primary) !important;
}

.text-success {
	color: var(--bs-success) !important;
}

/* Navbar */
header.sticky-top {
	backdrop-filter: blur(16px);
	background: rgba(245,244,249,0.88);
}

.navbar-brand {
	margin-bottom: -3rem;
	margin-left: -1rem;
	margin-top: -.25rem;
}

/* Forms */
.form-control {
	background-color: white;
}

.form-control:focus {
	background-color: white;
	border-color: var(--bs-primary);
}

/* Buttons */
.btn {
	font-family: "Syne", sans-serif;
	font-weight: 500;
}

.btn:active {
	transform: translateY(1px);
}

.btn-primary {
	--bs-btn-bg: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
	--bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary), black 10%);
	--bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary), black 10%);
	--bs-btn-active-bg: color-mix(in srgb, var(--bs-primary), black 10%);
	--bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary), black 10%);
	--bs-btn-disabled-bg: color-mix(in srgb, var(--bs-primary), white 20%);
	--bs-btn-disabled-border-color: color-mix(in srgb, var(--bs-primary), white 20%);
}

.btn-outline-light {
	--bs-btn-color: var(--bs-body-color);
	--bs-btn-border-color: rgba(90,80,180,0.18);
	--bs-btn-hover-bg: white;
	--bs-btn-hover-border-color: rgba(90,80,180,0.18);
}

/* List groups */
.list-group-item {
	border-color: var(--bs-border-color) !important;
}

/* Backgrounds */
.bg-light {
	background-color: #eeedf5 !important;
}

.bg-secondary {
	background-color: rgba(91, 78, 240, 0.1) !important;
}

/* Borders */
.border-light {
	border-color: var(--bs-border-color) !important;
}

/* Badges */
.badge.text-bg-light {
	border: 1px solid var(--bs-border-color) !important;
}
.badge.text-bg-primary {
	background: rgba(91, 78, 240, 0.08) !important;
	border: 1px solid rgba(91, 78, 240, 0.18) !important;
	color: var(--bs-primary) !important;
}
.badge.text-bg-success {
	background: rgba(15, 168, 158, 0.08) !important;
	border: 1px solid rgba(78, 205, 196, 0.2) !important;
	color: var(--bs-success) !important;
}

/* Non-bootstrap: sitenav */
#sitenav .nav-link {
	&:hover {
		text-decoration: underline !important;
		text-underline-offset: 0.25em;
	}

	&.active {
		background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-success) 100%);
		background-clip: text;
		font-style: normal;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	&.active:hover {
		text-decoration-color: var(--bs-primary) !important;
	}
}

/* Non-bootstrap: hero section */
.hero {
	min-height: calc(100vh - 80px - 1rem);
}

.hero-company-logo {
	height: 50px;
	max-width: 140px;
	object-position: center;
	object-fit: contain;
}

/* Non-bootstrap: background texture */
.grid-pattern {
	position: relative;

	&::before,
	&::after {
		content: "";
		display: block;
		height: 100%;
		inset: 0;
		pointer-events: none;
		position: absolute;
		width: 100%;
	}

	/* Gradient background */
	&::before {
		background: radial-gradient(ellipse 60% 50% at 70% 40%, rgba(91,78,240,0.08) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 20% 80%, rgba(15,168,158,0.06) 0%, transparent 60%);
	}

	/* Grid pattern */
	&::after {
		background-image: linear-gradient(rgba(91,78,240,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(91,78,240,0.06) 1px, transparent 1px);
		background-size: 60px 60px;
		mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 100%);
	}
}

/* Non-bootstrap: tick bullet points */
.bullet-tick-circle {
	align-items: center;
	background: rgba(15, 168, 158, 0.1);
	border: 1px solid rgba(15, 168, 158, 0.25);
	border-radius: 50%;
	color: var(--bs-success);
	display: inline-flex;
	font-size: 0.65rem;
	height: 20px;
	justify-content: center;
	min-width: 20px;
	width: 20px;
}