/* ==========================================================================
   SSI PREMIUM HEADER
   ========================================================================== */

.ssi-header {
	position:
		sticky;

	top:
		0;

	left:
		0;

	width:
		100%;

	z-index:
		9990;

	background:
		rgba(
			255,
			255,
			255,
			0.96
		);

	border-bottom:
		1px solid
		rgba(
			15,
			23,
			42,
			0.07
		);

	backdrop-filter:
		blur(16px);

	-webkit-backdrop-filter:
		blur(16px);

	transition:
		box-shadow 300ms ease,
		background-color 300ms ease;
}

.ssi-header.is-scrolled {
	box-shadow:
		0 12px
		35px
		rgba(
			15,
			23,
			42,
			0.08
		);

	background:
		rgba(
			255,
			255,
			255,
			0.98
		);
}

.ssi-header__inner {
	width:
		min(
			100%,
			1400px
		);

	min-height:
		92px;

	margin:
		0
		auto;

	padding:
		0
		34px;

	display:
		grid;

	grid-template-columns:
		auto
		1fr
		auto;

	align-items:
		center;

	gap:
		40px;
}


/* ==========================================================================
   LOGO
   ========================================================================== */

.ssi-header__logo {
	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	width:
		68px;

	height:
		68px;

	flex:
		0 0 auto;

	border-radius:
		16px;

	transition:
		transform 250ms ease,
		filter 250ms ease;
}

.ssi-header__logo:hover {
	transform:
		translateY(
			-2px
		);

	filter:
		drop-shadow(
			0
			8px
			13px
			rgba(
				15,
				23,
				42,
				0.12
			)
		);
}

.ssi-header__logo img {
	display:
		block;

	width:
		58px;

	height:
		58px;

	object-fit:
		contain;
}


/* ==========================================================================
   DESKTOP NAV
   ========================================================================== */

.ssi-header__nav {
	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		8px;
}

.ssi-header__nav-link {
	position:
		relative;

	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	min-height:
		44px;

	padding:
		0
		16px;

	color:
		#14233c;

	font-family:
		"Inter",
		sans-serif;

	font-size:
		0.80rem;

	font-weight:
		700;

	text-decoration:
		none;

	transition:
		color 220ms ease;
}

.ssi-header__nav-link::after {
	content:
		"";

	position:
		absolute;

	left:
		50%;

	bottom:
		2px;

	width:
		6px;

	height:
		6px;

	border-radius:
		50%;

	background:
		#dca238;

	opacity:
		0;

	transform:
		translateX(
			-50%
		)
		scale(
			0.3
		);

	transition:
		opacity 220ms ease,
		transform 220ms ease;
}

.ssi-header__nav-link:hover,
.ssi-header__nav-link.is-active {
	color:
		#1d4ed8;
}

.ssi-header__nav-link:hover::after,
.ssi-header__nav-link.is-active::after {
	opacity:
		1;

	transform:
		translateX(
			-50%
		)
		scale(
			1
		);
}


/* ==========================================================================
   CTA
   ========================================================================== */

.ssi-header__cta {
	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		9px;

	min-height:
		50px;

	padding:
		0
		21px;

	border-radius:
		999px;

	background:
		#0b1f3a;

	color:
		#ffffff;

	font-family:
		"Inter",
		sans-serif;

	font-size:
		0.76rem;

	font-weight:
		800;

	box-shadow:
		0
		10px
		25px
		rgba(
			11,
			31,
			58,
			0.14
		);

	transition:
		transform 250ms ease,
		background-color 250ms ease,
		box-shadow 250ms ease;
}

.ssi-header__cta:hover {
	transform:
		translateY(
			-2px
		);

	background:
		#1d4ed8;

	box-shadow:
		0
		15px
		30px
		rgba(
			29,
			78,
			216,
			0.18
		);
}

.ssi-header__cta-arrow {
	color:
		#f4c766;

	font-size:
		0.9rem;

	transition:
		transform 250ms ease;
}

.ssi-header__cta:hover
.ssi-header__cta-arrow {
	transform:
		translate(
			2px,
			-2px
		);
}


/* ==========================================================================
   MOBILE BUTTON
   ========================================================================== */

.ssi-header__menu-toggle {
	display:
		none;

	width:
		46px;

	height:
		46px;

	padding:
		0;

	border:
		1px solid
		#dfe6ef;

	border-radius:
		14px;

	background:
		#ffffff;

	cursor:
		pointer;

	align-items:
		center;

	justify-content:
		center;

	flex-direction:
		column;

	gap:
		5px;

	box-shadow:
		0
		6px
		18px
		rgba(
			15,
			23,
			42,
			0.05
		);

	transition:
		background-color 250ms ease,
		border-color 250ms ease,
		transform 250ms ease;
}

.ssi-header__menu-toggle:hover {
	transform:
		translateY(
			-1px
		);

	background:
		#f8fafc;

	border-color:
		#cfd8e3;
}

.ssi-header__menu-toggle span {
	display:
		block;

	width:
		18px;

	height:
		2px;

	border-radius:
		999px;

	background:
		#0b1f3a;

	transition:
		transform 300ms ease,
		opacity 200ms ease,
		width 250ms ease;
}

.ssi-header__menu-toggle.is-open span:nth-child(1) {
	transform:
		translateY(
			7px
		)
		rotate(
			45deg
		);
}

.ssi-header__menu-toggle.is-open span:nth-child(2) {
	opacity:
		0;

	width:
		0;
}

.ssi-header__menu-toggle.is-open span:nth-child(3) {
	transform:
		translateY(
			-7px
		)
		rotate(
			-45deg
		);
}


/* ==========================================================================
   MOBILE MENU
   ========================================================================== */

.ssi-mobile-menu {
	position:
		absolute;

	top:
		100%;

	left:
		0;

	right:
		0;

	max-height:
		0;

	overflow:
		hidden;

	opacity:
		0;

	visibility:
		hidden;

	background:
		#ffffff;

	border-bottom:
		1px solid
		rgba(
			15,
			23,
			42,
			0.07
		);

	box-shadow:
		0
		20px
		45px
		rgba(
			15,
			23,
			42,
			0.10
		);

	transform:
		translateY(
			-8px
		);

	transition:
		max-height 450ms
		cubic-bezier(
			0.2,
			0.8,
			0.2,
			1
		),
		opacity 280ms ease,
		transform 350ms ease,
		visibility 350ms ease;
}

.ssi-mobile-menu.is-open {
	max-height:
		650px;

	opacity:
		1;

	visibility:
		visible;

	transform:
		translateY(
			0
		);
}

.ssi-mobile-menu__inner {
	padding:
		20px
		22px
		25px;
}

.ssi-mobile-menu__top {
	display:
		flex;

	align-items:
		center;

	gap:
		12px;

	margin-bottom:
		10px;

	color:
		#8a98aa;

	font-size:
		0.58rem;

	font-weight:
		800;

	letter-spacing:
		0.10em;

	text-transform:
		uppercase;
}

.ssi-mobile-menu__line {
	display:
		block;

	width:
		34px;

	height:
		1px;

	background:
		#e4e9ef;
}

.ssi-mobile-menu__nav {
	display:
		grid;

	gap:
		5px;
}

.ssi-mobile-menu__link {
	display:
		grid;

	grid-template-columns:
		36px
		minmax(
			0,
			1fr
		)
		36px;

	align-items:
		center;

	gap:
		10px;

	min-height:
		68px;

	padding:
		0
		11px;

	border-radius:
		16px;

	color:
		#0b1f3a;

	text-decoration:
		none;

	transition:
		background-color 250ms ease,
		transform 250ms ease,
		color 250ms ease;
}

.ssi-mobile-menu__link:hover {
	transform:
		translateX(
			4px
		);

	background:
		#f7faff;
}

.ssi-mobile-menu__link.is-active {
	background:
		linear-gradient(
			90deg,
			#eef4ff,
			#fbfcff
		);

	color:
		#1d4ed8;
}

.ssi-mobile-menu__number {
	width:
		32px;

	height:
		32px;

	display:
		grid;

	place-items:
		center;

	border-radius:
		10px;

	background:
		#f1f5f9;

	color:
		#8390a3;

	font-size:
		0.55rem;

	font-weight:
		800;
}

.ssi-mobile-menu__link.is-active
.ssi-mobile-menu__number {
	background:
		#0b1f3a;

	color:
		#f4c766;
}

.ssi-mobile-menu__text {
	font-family:
		"Manrope",
		sans-serif;

	font-size:
		0.95rem;

	font-weight:
		800;
}

.ssi-mobile-menu__arrow {
	display:
		grid;

	place-items:
		center;

	width:
		32px;

	height:
		32px;

	border:
		1px solid
		#e2e8f0;

	border-radius:
		50%;

	color:
		#1d4ed8;

	font-size:
		0.78rem;

	transition:
		background-color 220ms ease,
		color 220ms ease,
		border-color 220ms ease;
}

.ssi-mobile-menu__link:hover
.ssi-mobile-menu__arrow,
.ssi-mobile-menu__link.is-active
.ssi-mobile-menu__arrow {
	border-color:
		#dce8ff;

	background:
		#eef4ff;
}

.ssi-mobile-menu__bottom {
	margin-top:
		14px;

	padding-top:
		14px;

	border-top:
		1px solid
		#edf1f5;
}

.ssi-mobile-menu__cta {
	display:
		flex;

	align-items:
		center;

	justify-content:
		space-between;

	min-height:
		52px;

	padding:
		0
		17px;

	border-radius:
		999px;

	background:
		#0b1f3a;

	color:
		#ffffff;

	font-size:
		0.75rem;

	font-weight:
		800;

	box-shadow:
		0
		10px
		25px
		rgba(
			11,
			31,
			58,
			0.12
		);

	transition:
		transform 250ms ease,
		background-color 250ms ease;
}

.ssi-mobile-menu__cta:hover {
	transform:
		translateY(
			-2px
		);

	background:
		#1d4ed8;
}

.ssi-mobile-menu__contact {
	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		9px;

	margin-top:
		13px;

	color:
		#8a98aa;

	font-size:
		0.57rem;

	font-weight:
		700;
}

.ssi-mobile-menu__contact a {
	color:
		#66758a;

	transition:
		color 200ms ease;
}

.ssi-mobile-menu__contact a:hover {
	color:
		#1d4ed8;
}


/* ==========================================================================
   BACKDROP
   ========================================================================== */

.ssi-header__backdrop {
	position:
		fixed;

	inset:
		0;

	z-index:
		-1;

	background:
		rgba(
			5,
			14,
			27,
			0.28
		);

	backdrop-filter:
		blur(3px);

	-webkit-backdrop-filter:
		blur(3px);

	opacity:
		0;

	visibility:
		hidden;

	pointer-events:
		none;

	transition:
		opacity 280ms ease,
		visibility 280ms ease;
}

.ssi-header__backdrop.is-visible {
	opacity:
		1;

	visibility:
		visible;

	pointer-events:
		auto;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 980px) {

	.ssi-header__inner {
		min-height:
			80px;

		padding:
			0
			24px;

		gap:
			24px;
	}

	.ssi-header__nav {
		gap:
			0;
	}

	.ssi-header__nav-link {
		padding:
			0
			11px;

		font-size:
			0.74rem;
	}

	.ssi-header__cta {
		min-height:
			46px;

		padding:
			0
			17px;

		font-size:
			0.71rem;
	}

	.ssi-header__logo {
		width:
			60px;

		height:
			60px;
	}

	.ssi-header__logo img {
		width:
			52px;

		height:
			52px;
	}
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 760px) {

	.ssi-header__inner {
		min-height:
			74px;

		padding:
			0
			17px;

		grid-template-columns:
			auto
			1fr
			auto;

		gap:
			15px;
	}

	.ssi-header__logo {
		width:
			55px;

		height:
			55px;
	}

	.ssi-header__logo img {
		width:
			48px;

		height:
			48px;
	}

	.ssi-header__nav,
	.ssi-header__actions {
		display:
			none;
	}

	.ssi-header__menu-toggle {
		display:
			flex;

		grid-column:
			3;
	}
}


/* ==========================================================================
   VERY SMALL DEVICES
   ========================================================================== */

@media (max-width: 360px) {

	.ssi-header__inner {
		padding:
			0
			14px;
	}

	.ssi-mobile-menu__inner {
		padding-left:
			17px;

		padding-right:
			17px;
	}

	.ssi-mobile-menu__link {
		min-height:
			62px;
	}

	.ssi-mobile-menu__text {
		font-size:
			0.88rem;
	}
}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.ssi-header__menu-toggle:focus-visible,
.ssi-header__nav-link:focus-visible,
.ssi-header__cta:focus-visible,
.ssi-mobile-menu__link:focus-visible,
.ssi-mobile-menu__cta:focus-visible {
	outline:
		3px solid
		rgba(
			29,
			78,
			216,
			0.22
		);

	outline-offset:
		3px;
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.ssi-header,
	.ssi-header__logo,
	.ssi-header__nav-link,
	.ssi-header__cta,
	.ssi-header__menu-toggle,
	.ssi-header__menu-toggle span,
	.ssi-mobile-menu,
	.ssi-mobile-menu__link,
	.ssi-mobile-menu__arrow,
	.ssi-mobile-menu__cta,
	.ssi-header__backdrop {
		transition:
			none !important;
	}
}

/* ==========================================================================
   MOBILE MENU SCROLL CONTROL
   ========================================================================== */

@media (max-width: 760px) {


	.ssi-header {
		position:
			sticky;

		top:
			0;
	}


	.ssi-mobile-menu {
		position:
			absolute;

		top:
			100%;

		left:
			0;

		right:
			0;

		z-index:
			9995;

		max-height:
			0;
	}


	.ssi-mobile-menu.is-open {
		max-height:
			calc(
				100vh - 74px
			);

		overflow-y:
			auto;

		-webkit-overflow-scrolling:
			touch;
	}


	.ssi-header__backdrop {
		position:
			fixed;

		inset:
			0;

		z-index:
			9991;
	}


	.ssi-header__inner {
		position:
			relative;

		z-index:
			9999;
	}


	.ssi-mobile-menu {
		z-index:
			9998;
	}

}

/* ==========================================================================
   MOBILE MENU — STABLE OVERLAY
   ========================================================================== */

@media (max-width: 760px) {

	.ssi-header {
		position:
			sticky;

		top:
			0;

		z-index:
			10000;
	}


	.ssi-header__inner {
		position:
			relative;

		z-index:
			10002;
	}


	.ssi-header__menu-toggle {
		position:
			relative;

		z-index:
			10003;
	}


	.ssi-mobile-menu {
		position:
			fixed;

		top:
			74px;

		left:
			0;

		right:
			0;

		width:
			100%;

		max-height:
			0;

		overflow:
			hidden;

		overflow-y:
			auto;

		z-index:
			10001;

		-webkit-overflow-scrolling:
			touch;
	}


	.ssi-mobile-menu.is-open {
		max-height:
			calc(
				100vh - 74px
			);

		overflow-y:
			auto;
	}


	.ssi-header__backdrop {
		position:
			fixed;

		inset:
			0;

		z-index:
			9998;
	}


	.ssi-header__backdrop.is-visible {
		pointer-events:
			auto;
	}


	body.ssi-menu-open {
		overflow-x:
			hidden;
	}

}