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

.ssi-faq {
	position: relative;

	overflow: hidden;

	padding:
		125px
		0
		115px;

	background:
		#ffffff;

	color:
		var(--ssi-color-primary);
}

.ssi-faq__background {
	position:
		absolute;

	inset:
		0;

	z-index:
		0;

	pointer-events:
		none;
}

.ssi-faq__grid {
	position:
		absolute;

	inset:
		0;

	opacity:
		0.28;

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

	background-size:
		48px 48px;

	mask-image:
		linear-gradient(
			to bottom,
			black,
			transparent 92%
		);
}

.ssi-faq__orb {
	position:
		absolute;

	width:
		520px;

	height:
		520px;

	border-radius:
		50%;

	filter:
		blur(8px);
}

.ssi-faq__orb--one {
	top:
		-310px;

	right:
		-190px;

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

.ssi-faq__orb--two {
	bottom:
		-330px;

	left:
		-210px;

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

.ssi-faq__container {
	position:
		relative;

	z-index:
		2;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.ssi-faq__header {
	display:
		grid;

	grid-template-columns:
		minmax(
			0,
			1.1fr
		)
		minmax(
			300px,
			0.65fr
		);

	gap:
		70px;

	align-items:
		end;

	margin-bottom:
		60px;
}

.ssi-faq__header .ssi-heading {
	margin-bottom:
		0;
}

.ssi-faq__header .ssi-heading span {
	background:
		linear-gradient(
			135deg,
			var(--ssi-color-secondary),
			var(--ssi-color-accent)
		);

	-webkit-background-clip:
		text;

	background-clip:
		text;

	color:
		transparent;
}

.ssi-faq__header > p {
	max-width:
		480px;

	margin:
		0;

	color:
		var(--ssi-color-text-light);

	font-size:
		0.95rem;

	line-height:
		1.8;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

.ssi-faq__layout {
	display:
		grid;

	grid-template-columns:
		minmax(
			270px,
			0.55fr
		)
		minmax(
			0,
			1.45fr
		);

	gap:
		18px;

	align-items:
		start;
}


/* ==========================================================================
   INTRO CARD
   ========================================================================== */

.ssi-faq__intro-card {
	position:
		sticky;

	top:
		110px;

	overflow:
		hidden;

	padding:
		30px;

	border-radius:
		26px;

	background:
		linear-gradient(
			145deg,
			#061426,
			#0b1f3a
		);

	color:
		var(--ssi-color-white);

	box-shadow:
		0 25px
		65px
		rgba(
			6,
			20,
			38,
			0.16
		);
}

.ssi-faq__intro-card::before {
	content:
		"";

	position:
		absolute;

	width:
		230px;

	height:
		230px;

	top:
		-120px;

	right:
		-100px;

	border-radius:
		50%;

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

	pointer-events:
		none;
}

.ssi-faq__intro-icon {
	position:
		relative;

	z-index:
		2;

	width:
		55px;

	height:
		55px;

	display:
		grid;

	place-items:
		center;

	margin-bottom:
		30px;

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

	border-radius:
		16px;

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

	color:
		var(--ssi-color-accent-light);

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

	font-size:
		1.25rem;

	font-weight:
		800;
}

.ssi-faq__intro-kicker {
	position:
		relative;

	z-index:
		2;

	display:
		block;

	margin-bottom:
		9px;

	color:
		var(--ssi-color-accent-light);

	font-size:
		0.64rem;

	font-weight:
		800;

	letter-spacing:
		0.10em;
}

.ssi-faq__intro-card h3 {
	position:
		relative;

	z-index:
		2;

	margin:
		0 0 12px;

	color:
		var(--ssi-color-white);

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

	font-size:
		1.4rem;

	font-weight:
		800;

	letter-spacing:
		-0.035em;
}

.ssi-faq__intro-card p {
	position:
		relative;

	z-index:
		2;

	margin:
		0 0 27px;

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

	font-size:
		0.76rem;

	line-height:
		1.75;
}

.ssi-faq__intro-button {
	position:
		relative;

	z-index:
		2;

	display:
		flex;

	align-items:
		center;

	justify-content:
		space-between;

	gap:
		12px;

	min-height:
		49px;

	padding:
		0
		17px;

	border-radius:
		999px;

	background:
		var(--ssi-color-accent);

	color:
		var(--ssi-color-primary);

	font-size:
		0.72rem;

	font-weight:
		800;

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

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

	background:
		var(--ssi-color-accent-light);
}


/* ==========================================================================
   ACCORDION
   ========================================================================== */

.ssi-faq__accordion {
	display:
		grid;

	gap:
		10px;
}

.ssi-faq__item {
	border:
		1px solid
		var(--ssi-color-border);

	border-radius:
		18px;

	background:
		#ffffff;

	overflow:
		hidden;

	box-shadow:
		0 7px 24px
		rgba(
			15,
			23,
			42,
			0.035
		);

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

.ssi-faq__item:hover,
.ssi-faq__item[open] {
	border-color:
		rgba(
			29,
			78,
			216,
			0.18
		);

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

.ssi-faq__item[open] {
	background:
		linear-gradient(
			145deg,
			#ffffff,
			#f8fbff
		);
}

.ssi-faq__item summary {
	display:
		grid;

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

	align-items:
		center;

	gap:
		14px;

	min-height:
		78px;

	padding:
		0
		19px;

	cursor:
		pointer;

	list-style:
		none;

	user-select:
		none;
}

.ssi-faq__item summary::-webkit-details-marker {
	display:
		none;
}

.ssi-faq__question-number {
	width:
		34px;

	height:
		34px;

	display:
		grid;

	place-items:
		center;

	border-radius:
		11px;

	background:
		#eef4ff;

	color:
		var(--ssi-color-secondary);

	font-size:
		0.60rem;

	font-weight:
		800;

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

.ssi-faq__item[open]
.ssi-faq__question-number {
	background:
		var(--ssi-color-primary);

	color:
		var(--ssi-color-accent-light);
}

.ssi-faq__question {
	color:
		var(--ssi-color-primary);

	font-size:
		0.82rem;

	font-weight:
		800;

	line-height:
		1.45;
}

.ssi-faq__toggle {
	width:
		34px;

	height:
		34px;

	display:
		grid;

	place-items:
		center;

	border:
		1px solid
		#e2e8f0;

	border-radius:
		50%;

	color:
		var(--ssi-color-secondary);

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

	font-size:
		1rem;

	font-weight:
		600;

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

.ssi-faq__item[open]
.ssi-faq__toggle {
	transform:
		rotate(
			45deg
		);

	background:
		var(--ssi-color-accent);

	border-color:
		var(--ssi-color-accent);

	color:
		var(--ssi-color-primary);
}


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

.ssi-faq__answer {
	overflow:
		hidden;

	padding:
		0
		19px
		0
		75px;

	animation:
		ssiFaqAnswer 350ms
		cubic-bezier(
			0.2,
			0.8,
			0.2,
			1
		)
		both;
}

.ssi-faq__answer p {
	max-width:
		760px;

	margin:
		0;

	padding:
		0
		0
		22px;

	color:
		var(--ssi-color-text-light);

	font-size:
		0.76rem;

	line-height:
		1.8;
}


/* ==========================================================================
   BOTTOM
   ========================================================================== */

.ssi-faq__bottom {
	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		14px;

	margin-top:
		52px;

	color:
		var(--ssi-color-text-muted);

	font-size:
		0.68rem;

	font-weight:
		700;
}

.ssi-faq__bottom-line {
	width:
		70px;

	height:
		1px;

	background:
		var(--ssi-color-border);
}

.ssi-faq__bottom a {
	display:
		inline-flex;

	align-items:
		center;

	gap:
		7px;

	color:
		var(--ssi-color-secondary);

	transition:
		gap 200ms ease,
		color 200ms ease;
}

.ssi-faq__bottom a:hover {
	gap:
		10px;

	color:
	var(--ssi-color-primary);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 950px) {

	.ssi-faq {
		padding:
			105px
			0
			105px;
	}

	.ssi-faq__header {
		gap:
			45px;
	}

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

	.ssi-faq__intro-card {
		position:
			relative;

		top:
			auto;
	}
}

@media (max-width: 800px) {

	.ssi-faq__header {
		grid-template-columns:
			1fr;

		gap:
			25px;

		margin-bottom:
			50px;
	}
}

@media (max-width: 600px) {

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

	.ssi-faq__intro-card {
		padding:
			24px;
	}

	.ssi-faq__item summary {
		grid-template-columns:
			36px
			minmax(
				0,
				1fr
			)
			36px;

		gap:
			10px;

		min-height:
			70px;

		padding:
			0
			14px;
	}

	.ssi-faq__question-number,
	.ssi-faq__toggle {
		width:
			31px;

		height:
			31px;
	}

	.ssi-faq__question {
		font-size:
			0.76rem;
	}

	.ssi-faq__answer {
		padding:
			0
			14px
			0
			60px;
	}

	.ssi-faq__answer p {
		padding-bottom:
			18px;

		font-size:
			0.72rem;
	}

	.ssi-faq__bottom {
		flex-wrap:
			wrap;

		text-align:
			center;
	}

	.ssi-faq__bottom-line {
		display:
			none;
	}
}


/* ==========================================================================
   ANIMATION
   ========================================================================== */

@keyframes ssiFaqAnswer {

	from {
		opacity:
			0;

		transform:
			translateY(
				-7px
			);
	}

	to {
		opacity:
			1;

		transform:
			translateY(
				0
			);
	}
}


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

	.ssi-faq__answer {
		animation:
			none !important;
	}
}

/* ==========================================================================
   MOBILE FIX — HOMEPAGE FAQ SECTION
   ========================================================================== */

@media (max-width: 768px) {

	.ssi-faq {
		overflow-x: hidden;
	}


	.ssi-faq__container {
		width: min(
			var(--ssi-container),
			calc(100% - 28px)
		);

		margin-inline: auto;
	}


	/* Header */

	.ssi-faq__header {
		grid-template-columns: 1fr !important;

		gap: 20px !important;

		margin-bottom: 35px;
	}


	.ssi-faq__header p {
		max-width: 100%;

		margin: 0;
	}


	/* Main layout */

	.ssi-faq__layout {
		grid-template-columns: 1fr !important;

		gap: 18px !important;
	}


	/* Help card */

	.ssi-faq__intro-card {
		width: 100%;

		box-sizing: border-box;

		min-height: auto;

		padding: 28px 22px;
	}


	.ssi-faq__intro-icon {
		width: 48px;

		height: 48px;

		display: grid;

		place-items: center;
	}


	.ssi-faq__intro-card h3 {
		font-size: 1.35rem;

		line-height: 1.2;

		margin-bottom: 12px;
	}


	.ssi-faq__intro-card p {
		font-size: 0.92rem;

		line-height: 1.65;
	}


	.ssi-faq__intro-button {
		width: 100%;

		box-sizing: border-box;

		justify-content: space-between;
	}


	/* Accordion */

	.ssi-faq__accordion {
		width: 100%;

		min-width: 0;
	}


	.ssi-faq__item {
		width: 100%;

		box-sizing: border-box;
	}


	.ssi-faq__item summary {
		display: grid;

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

		align-items: center;

		gap: 10px;

		width: 100%;

		box-sizing: border-box;

		padding: 16px 14px;
	}


	.ssi-faq__question-number {
		width: 30px;

		height: 30px;

		display: grid;

		place-items: center;

		flex-shrink: 0;
	}


	.ssi-faq__question {
		min-width: 0;

		font-size: 0.92rem;

		line-height: 1.45;

		overflow-wrap: anywhere;
	}


	.ssi-faq__toggle {
		width: 32px;

		height: 32px;

		display: grid;

		place-items: center;

		flex-shrink: 0;
	}


	.ssi-faq__answer {
		padding:
			0
			14px
			18px
			54px;
	}


	.ssi-faq__answer p {
		font-size: 0.9rem;

		line-height: 1.7;

		margin: 0;
	}


	/* Bottom CTA */

	.ssi-faq__bottom {
		flex-direction: column;

		align-items: flex-start;

		gap: 14px;

		margin-top: 28px;
	}


	.ssi-faq__bottom-line {
		display: none;
	}

}


@media (max-width: 480px) {

	.ssi-faq__container {
		width: calc(100% - 24px);
	}


	.ssi-faq__intro-card {
		padding: 24px 18px;
	}


	.ssi-faq__item summary {
		grid-template-columns:
			28px
			minmax(0, 1fr)
			30px;

		gap: 8px;

		padding: 14px 10px;
	}


	.ssi-faq__question-number {
		width: 28px;

		height: 28px;
	}


	.ssi-faq__question {
		font-size: 0.86rem;
	}


	.ssi-faq__toggle {
		width: 28px;

		height: 28px;
	}


	.ssi-faq__answer {
		padding:
			0
			10px
			16px
			46px;
	}

}