/* ==========================================================================
   SSI FAQ PAGE
   ========================================================================== */

.ssi-faq-page {
	overflow:
		hidden;

	background:
		#ffffff;

	color:
		#0b1f3a;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.ssi-faq-hero {
	position:
		relative;

	overflow:
		hidden;

	padding:
		85px
		0
		90px;

	background:
		radial-gradient(
			circle at 82% 28%,
			rgba(
				59,
				130,
				246,
				0.14
			),
			transparent 35%
		),
		radial-gradient(
			circle at 10% 80%,
			rgba(
				220,
				162,
				56,
				0.10
			),
			transparent 28%
		),
		linear-gradient(
			135deg,
			#f3f6fb,
			#eaf0f8 52%,
			#e6edf8
		);
}


.ssi-faq-hero__background {
	position:
		absolute;

	inset:
		0;

	pointer-events:
		none;
}


.ssi-faq-hero__grid {
	position:
		absolute;

	inset:
		0;

	opacity:
		0.14;

	background-image:
		linear-gradient(
			rgba(
				15,
				23,
				42,
				0.04
			)
			1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(
				15,
				23,
				42,
				0.04
			)
			1px,
			transparent 1px
		);

	background-size:
		48px
		48px;
}


.ssi-faq-hero__glow {
	position:
		absolute;

	border-radius:
		50%;

	filter:
		blur(
			18px
		);
}


.ssi-faq-hero__glow--one {
	width:
		500px;

	height:
		500px;

	right:
		-180px;

	top:
		-190px;

	background:
		radial-gradient(
			circle,
			rgba(
				59,
				130,
				246,
				0.15
			),
			transparent 70%
		);

	animation:
		ssiFaqGlow
		12s
		ease-in-out
		infinite
		alternate;
}


.ssi-faq-hero__glow--two {
	width:
		380px;

	height:
		380px;

	left:
		-180px;

	bottom:
		-220px;

	background:
		radial-gradient(
			circle,
			rgba(
				220,
				162,
				56,
				0.10
			),
			transparent 70%
		);

	animation:
		ssiFaqGlow
		16s
		ease-in-out
		infinite
		alternate-reverse;
}


.ssi-faq-hero__layout {
	position:
		relative;

	z-index:
		2;

	display:
		grid;

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

	gap:
		65px;

	align-items:
		center;
}


.ssi-faq-hero__content {
	max-width:
		800px;
}


.ssi-faq-hero__eyebrow {
	display:
		inline-flex;

	align-items:
		center;

	gap:
		10px;

	margin-bottom:
		18px;

	color:
		#2457d6;

	font-size:
		0.66rem;

	font-weight:
		800;

	letter-spacing:
		0.10em;

	text-transform:
		uppercase;
}


.ssi-faq-hero__eyebrow > span {
	width:
		29px;

	height:
		2px;

	background:
		#dca238;
}


.ssi-faq-hero h1 {
	margin:
		0;

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

	font-size:
		clamp(
			3.4rem,
			6vw,
			6rem
		);

	line-height:
		0.96;

	letter-spacing:
		-0.065em;

	font-weight:
		800;

	color:
		#0b1f3a;
}


.ssi-faq-hero h1 span {
	display:
		block;

	background:
		linear-gradient(
			135deg,
			#2457d6,
			#a38d7d,
			#dca238
		);

	-webkit-background-clip:
		text;

	background-clip:
		text;

	color:
		transparent;
}


.ssi-faq-hero__content > p {
	max-width:
		710px;

	margin:
		27px
		0
		28px;

	color:
		#687b91;

	font-size:
		0.82rem;

	line-height:
		1.85;
}


/* --------------------------------------------------------------------------
   Hero actions
   -------------------------------------------------------------------------- */

.ssi-faq-hero__actions {
	display:
		flex;

	flex-wrap:
		wrap;

	align-items:
		center;

	gap:
		12px;
}


.ssi-faq-hero__primary,
.ssi-faq-hero__secondary {
	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		8px;

	min-height:
		50px;

	padding:
		0
		22px;

	border-radius:
		999px;

	font-size:
		0.64rem;

	font-weight:
		800;

	transition:
		transform 240ms ease,
		box-shadow 240ms ease;
}


.ssi-faq-hero__primary {
	background:
		#efb63b;

	color:
		#0b1f3a;

	box-shadow:
		0
		12px
		28px
		rgba(
			220,
			162,
			56,
			0.16
		);
}


.ssi-faq-hero__secondary {
	border:
		1px solid
		#cbd7e7;

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

	color:
		#0b1f3a;
}


.ssi-faq-hero__primary:hover,
.ssi-faq-hero__secondary:hover {
	transform:
		translateY(
			-4px
		);
}


/* ==========================================================================
   HERO VISUAL
   ========================================================================== */

.ssi-faq-hero__visual {
	position:
		relative;

	width:
		450px;

	height:
		450px;

	margin:
		0
		auto;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;
}


.ssi-faq-hero__visual-ring {
	position:
		absolute;

	left:
		50%;

	top:
		50%;

	transform:
		translate(
			-50%,
			-50%
		);

	border:
		1px solid
		rgba(
			36,
			87,
			214,
			0.13
		);

	border-radius:
		50%;
}


.ssi-faq-hero__visual-ring--one {
	width:
		390px;

	height:
		390px;

	animation:
		ssiFaqRotate
		28s
		linear
		infinite;
}


.ssi-faq-hero__visual-ring--two {
	width:
		280px;

	height:
		280px;

	border-color:
		rgba(
			220,
			162,
			56,
			0.15
		);

	animation:
		ssiFaqRotateReverse
		22s
		linear
		infinite;
}


.ssi-faq-hero__visual-core {
	position:
		relative;

	z-index:
		5;

	width:
		220px;

	height:
		220px;

	display:
		flex;

	flex-direction:
		column;

	align-items:
		center;

	justify-content:
		center;

	text-align:
		center;

	border-radius:
		50%;

	background:
		radial-gradient(
			circle,
			#ffffff,
			#edf3fc
		);

	box-shadow:
		0
		25px
		60px
		rgba(
			15,
			23,
			42,
			0.12
		);
}


.ssi-faq-hero__visual-core span {
	color:
		#2457d6;

	font-size:
		0.56rem;

	font-weight:
		800;

	letter-spacing:
		0.18em;
}


.ssi-faq-hero__visual-core strong {
	margin-top:
		7px;

	color:
		#0b1f3a;

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

	font-size:
		1.9rem;

	font-weight:
		800;

	letter-spacing:
		-0.05em;
}


.ssi-faq-hero__visual-core small {
	margin-top:
		8px;

	color:
		#8290a1;

	font-size:
		0.46rem;

	font-weight:
		700;
}


/* --------------------------------------------------------------------------
   Floating cards
   -------------------------------------------------------------------------- */

.ssi-faq-hero__floating-card {
	position:
		absolute;

	z-index:
		7;

	display:
		flex;

	align-items:
		center;

	gap:
		10px;

	padding:
		11px
		13px;

	border:
		1px solid
		rgba(
			255,
			255,
			255,
			0.86
		);

	border-radius:
		15px;

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

	box-shadow:
		0
		16px
		32px
		rgba(
			15,
			23,
			42,
			0.09
		);

	backdrop-filter:
		blur(
			12px
		);

	animation:
		ssiFaqFloat
		5s
		ease-in-out
		infinite
		alternate;
}


.ssi-faq-hero__floating-card > span {
	width:
		34px;

	height:
		34px;

	display:
		grid;

	place-items:
		center;

	border-radius:
		10px;

	background:
		#edf3ff;

	color:
		#2457d6;

	font-size:
		0.68rem;

	font-weight:
		800;
}


.ssi-faq-hero__floating-card > div {
	display:
		flex;

	flex-direction:
		column;
}


.ssi-faq-hero__floating-card strong {
	color:
		#0b1f3a;

	font-size:
		0.58rem;

	font-weight:
		800;
}


.ssi-faq-hero__floating-card small {
	margin-top:
		2px;

	color:
		#8390a0;

	font-size:
		0.46rem;
}


.ssi-faq-hero__floating-card--one {
	right:
		-10px;

	top:
		80px;
}


.ssi-faq-hero__floating-card--two {
	left:
		-5px;

	bottom:
		70px;

	animation-delay:
		-1s;
}


/* ==========================================================================
   FAQ SECTION
   ========================================================================== */

.ssi-faq-section {
	position:
		relative;

	padding:
		100px
		0
		110px;

	background:
		linear-gradient(
			180deg,
			#ffffff 0%,
			#f7f9fc 100%
		);
}


.ssi-faq-section__heading {
	display:
		grid;

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

	gap:
		60px;

	align-items:
		end;

	margin-bottom:
		42px;
}


.ssi-faq-section__heading > div > span {
	color:
		#2457d6;

	font-size:
		0.61rem;

	font-weight:
		800;

	letter-spacing:
		0.09em;

	text-transform:
		uppercase;
}


.ssi-faq-section__heading h2 {
	margin:
		10px
		0
		0;

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

	font-size:
		clamp(
			2.3rem,
			3.8vw,
			3.8rem
		);

	line-height:
		1;

	letter-spacing:
		-0.055em;
}


.ssi-faq-section__heading h2 strong {
	background:
		linear-gradient(
			135deg,
			#2457d6,
			#a38d7d,
			#dca238
		);

	-webkit-background-clip:
		text;

	background-clip:
		text;

	color:
		transparent;
}


.ssi-faq-section__heading > p {
	margin:
		0;

	color:
		#75849a;

	font-size:
		0.74rem;

	line-height:
		1.8;
}


/* ==========================================================================
   FAQ ITEMS
   ========================================================================== */

.ssi-faq-list {
	display:
		flex;

	flex-direction:
		column;

	gap:
		11px;
}


.ssi-faq-item {
	overflow:
		hidden;

	border:
		1px solid
		transparent;

	border-radius:
		20px;

	box-shadow:
		0
		10px
		28px
		rgba(
			15,
			23,
			42,
			0.04
		);

	transition:
		transform 320ms ease,
		box-shadow 320ms ease;
}


.ssi-faq-item:hover {
	transform:
		translateY(
			-3px
		);

	box-shadow:
		0
		18px
		38px
		rgba(
			15,
			23,
			42,
			0.08
		);
}


.ssi-faq-item--blue {
	background:
		linear-gradient(
			135deg,
			#edf4ff,
			#dce9ff
		);

	border-color:
		#d5e2f8;
}


.ssi-faq-item--purple {
	background:
		linear-gradient(
			135deg,
			#f2efff,
			#e6e0ff
		);

	border-color:
		#ded8f8;
}


.ssi-faq-item--gold {
	background:
		linear-gradient(
			135deg,
			#fff7e5,
			#ffebbf
		);

	border-color:
		#f0dfb8;
}


.ssi-faq-item--teal {
	background:
		linear-gradient(
			135deg,
			#edf9f7,
			#d9efec
		);

	border-color:
		#cbe5e1;
}


.ssi-faq-question {
	display:
		grid;

	grid-template-columns:
		48px
		1fr
		48px;

	gap:
		15px;

	align-items:
		center;

	width:
		100%;

	padding:
		18px
		20px;

	border:
		0;

	background:
		transparent;

	color:
		#0b1f3a;

	font-family:
		inherit;

	text-align:
		left;

	cursor:
		pointer;
}


.ssi-faq-question__number {
	width:
		38px;

	height:
		38px;

	display:
		grid;

	place-items:
		center;

	border-radius:
		11px;

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

	color:
		#2457d6;

	font-size:
		0.55rem;

	font-weight:
		800;

	box-shadow:
		0
		7px
		15px
		rgba(
			15,
			23,
			42,
			0.045
		);
}


.ssi-faq-question__content {
	display:
		flex;

	flex-direction:
		column;

	min-width:
		0;
}


.ssi-faq-question__content strong {
	color:
		#0b1f3a;

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

	font-size:
		0.86rem;

	font-weight:
		800;
}


.ssi-faq-question__content small {
	margin-top:
		5px;

	color:
		#728298;

	font-size:
		0.54rem;

	line-height:
		1.5;
}


.ssi-faq-question__icon {
	width:
		38px;

	height:
		38px;

	display:
		grid;

	place-items:
		center;

	margin-left:
		auto;

	border:
		1px solid
		rgba(
			36,
			87,
			214,
			0.13
		);

	border-radius:
		50%;

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

	color:
		#2457d6;

	font-size:
		1rem;

	font-weight:
		500;

	transition:
		transform 280ms ease,
		background 280ms ease,
		color 280ms ease;
}


.ssi-faq-item.is-active
.ssi-faq-question__icon {
	background:
		#0b1f3a;

	color:
		#f4c766;

	transform:
		rotate(
			180deg
		);
}


/* ==========================================================================
   FAQ ANSWER
   ========================================================================== */

.ssi-faq-answer {
	display:
		grid;

	grid-template-rows:
		1fr;

	transition:
		grid-template-rows 320ms ease;
}


.ssi-faq-answer[hidden] {
	display:
		grid;

	grid-template-rows:
		0fr;
}


.ssi-faq-answer > div {
	overflow:
		hidden;
}


.ssi-faq-answer p {
	margin:
		0;

	padding:
		0
		20px
		22px
		98px;

	color:
		#667a91;

	font-size:
		0.66rem;

	line-height:
		1.85;
}


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

.ssi-faq-cta {
	position:
		relative;

	overflow:
		hidden;

	padding:
		100px
		0;

	background:
		radial-gradient(
			circle at 76% 20%,
			rgba(
				59,
				130,
				246,
				0.17
			),
			transparent 35%
		),
		linear-gradient(
			145deg,
			#06182e,
			#12385f
		);

	color:
		#ffffff;

	text-align:
		center;
}


.ssi-faq-cta__glow {
	position:
		absolute;

	width:
		520px;

	height:
		520px;

	left:
		-230px;

	bottom:
		-300px;

	border-radius:
		50%;

	background:
		radial-gradient(
			circle,
			rgba(
				220,
				162,
				56,
				0.10
			),
			transparent 70%
		);

	filter:
		blur(
			20px
		);
}


.ssi-faq-cta__content {
	position:
		relative;

	z-index:
		2;

	max-width:
		800px;

	margin:
		0
		auto;
}


.ssi-faq-cta__content > span {
	color:
		#f4c766;

	font-size:
		0.59rem;

	font-weight:
		800;

	letter-spacing:
		0.09em;
}


.ssi-faq-cta__content h2 {
	margin:
		14px
		0
		16px;

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

	font-size:
		clamp(
			2.6rem,
			4.8vw,
			4.5rem
		);

	line-height:
		1;

	letter-spacing:
		-0.055em;

	color:
		#ffffff;
}


.ssi-faq-cta__content h2 strong {
	color:
		#f4c766;
}


.ssi-faq-cta__content p {
	max-width:
		620px;

	margin:
		0
		auto
		28px;

	color:
		rgba(
			255,
			255,
			255,
			0.62
		);

	font-size:
		0.74rem;

	line-height:
		1.8;
}


.ssi-faq-cta__actions {
	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	flex-wrap:
		wrap;

	gap:
		12px;
}


.ssi-faq-cta__primary,
.ssi-faq-cta__secondary {
	min-height:
		50px;

	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		8px;

	padding:
		0
		22px;

	border-radius:
		999px;

	font-size:
		0.64rem;

	font-weight:
		800;

	transition:
		transform 230ms ease,
		box-shadow 230ms ease;
}


.ssi-faq-cta__primary {
	background:
		#efb63b;

	color:
		#0b1f3a;

	box-shadow:
		0
		12px
		30px
		rgba(
			220,
			162,
			56,
			0.18
		);
}


.ssi-faq-cta__secondary {
	border:
		1px solid
		rgba(
			255,
			255,
			255,
			0.18
		);

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

	color:
		#ffffff;
}


.ssi-faq-cta__primary:hover,
.ssi-faq-cta__secondary:hover {
	transform:
		translateY(
			-4px
		);
}


/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes ssiFaqGlow {

	from {
		transform:
			translate(
				-1%,
				-1%
			)
			scale(1);
	}

	to {
		transform:
			translate(
				2%,
				2%
			)
			scale(
				1.06
			);
	}
}


@keyframes ssiFaqRotate {

	from {
		transform:
			translate(
				-50%,
				-50%
			)
			rotate(
				0deg
			);
	}

	to {
		transform:
			translate(
				-50%,
				-50%
			)
			rotate(
				360deg
			);
	}
}


@keyframes ssiFaqRotateReverse {

	from {
		transform:
			translate(
				-50%,
				-50%
			)
			rotate(
				360deg
			);
	}

	to {
		transform:
			translate(
				-50%,
				-50%
			)
			rotate(
				0deg
			);
	}
}


@keyframes ssiFaqFloat {

	from {
		transform:
			translateY(
				-3px
			);
	}

	to {
		transform:
			translateY(
				5px
			);
	}
}


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

@media (max-width: 1000px) {

	.ssi-faq-hero__layout {
		grid-template-columns:
			1fr;
	}

	.ssi-faq-hero__visual {
		margin:
			0
			auto;
	}

	.ssi-faq-section__heading {
		grid-template-columns:
			1fr;

		gap:
			18px;
	}

}


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

@media (max-width: 600px) {

	.ssi-faq-hero {
		padding:
			68px
			0
			72px;
	}

	.ssi-faq-hero h1 {
		font-size:
			3rem;
	}

	.ssi-faq-hero__visual {
		width:
			340px;

		height:
			340px;
	}

	.ssi-faq-hero__visual-ring--one {
		width:
			300px;

		height:
			300px;
	}

	.ssi-faq-hero__visual-ring--two {
		width:
			220px;

		height:
			220px;
	}

	.ssi-faq-hero__visual-core {
		width:
			175px;

		height:
			175px;
	}

	.ssi-faq-hero__floating-card {
		transform:
			scale(
				0.82
			);
	}

	.ssi-faq-hero__floating-card--one {
		right:
			-35px;
	}

	.ssi-faq-hero__floating-card--two {
		left:
			-35px;
	}

	.ssi-faq-section {
		padding:
			75px
			0
			80px;
	}

	.ssi-faq-question {
		grid-template-columns:
			40px
			1fr
			40px;

		gap:
			10px;

		padding:
			15px;
	}

	.ssi-faq-question__number {
		width:
			34px;

		height:
			34px;
	}

	.ssi-faq-question__content strong {
		font-size:
			0.74rem;
	}

	.ssi-faq-question__content small {
		font-size:
			0.48rem;
	}

	.ssi-faq-question__icon {
		width:
			34px;

		height:
			34px;
	}

	.ssi-faq-answer p {
		padding:
			0
			16px
			19px
			65px;

		font-size:
			0.59rem;
	}

	.ssi-faq-cta {
		padding:
			78px
			0
			82px;
	}

	.ssi-faq-cta__content h2 {
		font-size:
			2.7rem;
	}

	.ssi-faq-cta__primary,
	.ssi-faq-cta__secondary {
		width:
			100%;

		max-width:
			270px;
	}

}


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

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

	.ssi-faq-hero__glow,
	.ssi-faq-hero__visual-ring,
	.ssi-faq-hero__floating-card {
		animation:
			none !important;
	}
}