/* ==========================================================================
   SSI WHY SECTION
   ========================================================================== */

.ssi-why {
	position: relative;
	overflow: hidden;

	padding:
		125px
		0
		125px;

	background:
		#ffffff;

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


/* ==========================================================================
   BACKGROUND
   ========================================================================== */

.ssi-why__background {
	position:
		absolute;

	inset:
		0;

	z-index:
		0;

	pointer-events:
		none;
}


.ssi-why__grid {
	position:
		absolute;

	inset:
		0;

	opacity:
		0.3;

	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 90%
		);
}


.ssi-why__orb {
	position:
		absolute;

	width:
		500px;

	height:
		500px;

	border-radius:
		50%;

	filter:
		blur(
			8px
		);
}


.ssi-why__orb--one {
	top:
		-300px;

	right:
		-180px;

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


.ssi-why__orb--two {
	bottom:
		-300px;

	left:
		-180px;

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


.ssi-why__container {
	position:
		relative;

	z-index:
		2;
}


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

.ssi-why__header {
	display:
		grid;

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

	gap:
		70px;

	align-items:
		end;

	margin-bottom:
		65px;
}


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


.ssi-why__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-why__header > p {
	max-width:
		480px;

	margin:
		0;

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

	font-size:
		0.95rem;

	line-height:
		1.8;
}


/* ==========================================================================
   CONTENT
   ========================================================================== */

.ssi-why__content {
	display:
		grid;

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

	gap:
		18px;

	align-items:
		stretch;
}


/* ==========================================================================
   MANIFESTO
   ========================================================================== */

.ssi-why__manifesto {
	position:
		relative;

	min-height:
		560px;

	display:
		flex;

	flex-direction:
		column;

	justify-content:
		center;

	overflow:
		hidden;

	padding:
		36px;

	border-radius:
		28px;

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

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


.ssi-why__manifesto::before {
	content:
		"";

	position:
		absolute;

	width:
		300px;

	height:
		300px;

	right:
		-130px;

	top:
		-120px;

	border-radius:
		50%;

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


.ssi-why__manifesto::after {
	content:
		"";

	position:
		absolute;

	width:
		240px;

	height:
		240px;

	left:
		-120px;

	bottom:
		-120px;

	border-radius:
		50%;

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


.ssi-why__manifesto-label {
	position:
		relative;

	z-index:
		2;

	margin-bottom:
		32px;

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

	font-size:
		0.68rem;

	font-weight:
		800;

	letter-spacing:
		0.12em;

	text-transform:
		uppercase;
}


.ssi-why__manifesto-word {
	position:
		relative;

	z-index:
		2;

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

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

	font-size:
		clamp(
			2.4rem,
			5vw,
			4.2rem
		);

	font-weight:
		800;

	line-height:
		1;

	letter-spacing:
		-0.065em;

	transition:
		color 350ms ease,
		transform 350ms ease;
}


.ssi-why__manifesto-word
+
.ssi-why__manifesto-word {
	margin-top:
		7px;
}


.ssi-why__manifesto:hover
.ssi-why__manifesto-word {
	color:
		rgba(
			255,
			255,
			255,
			0.45
		);

	transform:
		translateX(
			6px
		);
}


.ssi-why__manifesto
.ssi-why__manifesto-word--accent {
	color:
		var(--ssi-color-white);
}


.ssi-why__manifesto
.ssi-why__manifesto-word--accent::after {
	content:
		"";

	position:
		absolute;

	left:
		0;

	bottom:
		-5px;

	width:
		110px;

	height:
		4px;

	border-radius:
		999px;

	background:
		linear-gradient(
			90deg,
			var(--ssi-color-accent),
			var(--ssi-color-secondary)
		);
}


/* ==========================================================================
   FEATURE GRID
   ========================================================================== */

.ssi-why__features {
	display:
		grid;

	grid-template-columns:
		repeat(
			2,
			minmax(
				0,
				1fr
			)
		);

	gap:
		18px;
}


/* ==========================================================================
   WHY CARD
   ========================================================================== */

.ssi-why-card {
	position:
		relative;

	min-height:
		271px;

	display:
		flex;

	flex-direction:
		column;

	overflow:
		hidden;

	padding:
		26px 24px;

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

	border-radius:
		22px;

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

	box-shadow:
		0
		8px
		26px
		rgba(
			15,
			23,
			42,
			0.04
		);

	transition:
		transform 420ms cubic-bezier(
			0.2,
			0.8,
			0.2,
			1
		),
		background 420ms ease,
		border-color 420ms ease,
		box-shadow 420ms ease;
}


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

	position:
		absolute;

	left:
		0;

	top:
		0;

	width:
		100%;

	height:
		4px;

	background:
		linear-gradient(
			90deg,
			var(--ssi-color-secondary),
			var(--ssi-color-accent)
		);

	transform:
		scaleX(0);

	transform-origin:
		left;

	transition:
		transform 420ms ease;
}


.ssi-why-card:hover {
	transform:
		translateY(
			-8px
		);

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

	border-color:
		transparent;

	box-shadow:
		0
		25px
		55px
		rgba(
			11,
			31,
			58,
			0.16
		);
}


.ssi-why-card:hover::before {
	transform:
		scaleX(1);
}


.ssi-why-card__number {
	color:
		rgba(
			11,
			31,
			58,
			0.16
		);

	font-size:
		0.7rem;

	font-weight:
		800;

	letter-spacing:
		0.08em;

	transition:
		color 350ms ease;
}


.ssi-why-card:hover
.ssi-why-card__number {
	color:
		rgba(
			255,
			255,
			255,
			0.28
		);
}


.ssi-why-card__icon {
	width:
		50px;

	height:
		50px;

	display:
		grid;

	place-items:
		center;

	margin:
		19px 0 19px;

	border-radius:
		14px;

	background:
		rgba(
			29,
			78,
			216,
			0.08
		);

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

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


.ssi-why-card:hover
.ssi-why-card__icon {
	transform:
		rotate(
			-6deg
		)
		scale(
			1.06
		);

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

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


.ssi-why-card h3 {
	margin:
		0 0 9px;

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

	font-size:
		1.15rem;

	letter-spacing:
		-0.025em;

	transition:
		color 350ms ease;
}


.ssi-why-card:hover h3 {
	color:
		var(--ssi-color-white);
}


.ssi-why-card p {
	margin:
		0;

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

	font-size:
		0.80rem;

	line-height:
		1.72;

	transition:
		color 350ms ease;
}


.ssi-why-card:hover p {
	color:
		rgba(
			255,
			255,
			255,
			0.63
		);
}


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

.ssi-why__bottom {
	display:
		flex;

	align-items:
		center;

	justify-content:
		space-between;

	gap:
		18px;

	margin-top:
		55px;

	padding-top:
		26px;

	border-top:
		1px solid
		var(--ssi-color-border);
}


.ssi-why__bottom-item {
	display:
		flex;

	align-items:
		center;

	gap:
		10px;
}


.ssi-why__bottom-item strong {
	color:
		var(--ssi-color-secondary);

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

	font-size:
		1.05rem;

	font-weight:
		800;
}


.ssi-why__bottom-item span {
	color:
		var(--ssi-color-text-light);

	font-size:
		0.68rem;

	font-weight:
		700;
}


.ssi-why__bottom-line {
	flex:
		1;

	height:
		1px;

	max-width:
		80px;

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


/* ==========================================================================
   ABOUT CARDS
   IMPORTANT:
   These selectors affect ONLY the four cards inside .ssi-about.
   They do NOT modify Courses, Scholarship, App or Final CTA.
   ========================================================================== */

.ssi-about__pillars {
	position:
		relative;
}


.ssi-about__pillars .ssi-about-card {
	position:
		relative;

	display:
		flex;

	flex-direction:
		column;

	overflow:
		hidden;

	min-width:
		0;

	border:
		1px solid
		transparent;

	border-radius:
		22px;

	transition:
		transform 320ms cubic-bezier(
			0.2,
			0.8,
			0.2,
			1
		),
		box-shadow 320ms ease,
		border-color 320ms ease;
}


/* Card 01 */

.ssi-about__pillars
.ssi-about-card:nth-child(1) {
	background:
		linear-gradient(
			145deg,
			#edf4ff 0%,
			#dce9ff 100%
		);

	border-color:
		#d4e2f8;
}


/* Card 02 */

.ssi-about__pillars
.ssi-about-card:nth-child(2) {
	background:
		linear-gradient(
			145deg,
			#f2efff 0%,
			#e6e0ff 100%
		);

	border-color:
		#ded6f8;
}


/* Card 03 */

.ssi-about__pillars
.ssi-about-card:nth-child(3) {
	background:
		linear-gradient(
			145deg,
			#fff8e6 0%,
			#ffebbc 100%
		);

	border-color:
		#f0dfb8;
}


/* Card 04 */

.ssi-about__pillars
.ssi-about-card:nth-child(4) {
	background:
		linear-gradient(
			145deg,
			#edf9f7 0%,
			#d8efeb 100%
		);

	border-color:
		#cbe5e0;
}


/* Decorative shine */

.ssi-about__pillars
.ssi-about-card::after {
	content:
		"";

	position:
		absolute;

	width:
		190px;

	height:
		190px;

	right:
		-90px;

	bottom:
		-95px;

	border-radius:
		50%;

	background:
		radial-gradient(
			circle,
			rgba(
				255,
				255,
				255,
				0.42
			),
			transparent 70%
		);

	pointer-events:
		none;

	transition:
		transform 350ms ease;
}


.ssi-about__pillars
.ssi-about-card:hover {
	transform:
		translateY(
			-8px
		)
		scale(
			1.012
		);

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


.ssi-about__pillars
.ssi-about-card:hover::after {
	transform:
		scale(
			1.35
		);
}


/* Number */

.ssi-about__pillars
.ssi-about-card
.ssi-about-card__number {
	position:
		relative;

	z-index:
		2;

	color:
		#69809a;
}


/* Icons */

.ssi-about__pillars
.ssi-about-card
.ssi-about-card__icon {
	position:
		relative;

	z-index:
		2;

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


.ssi-about__pillars
.ssi-about-card:nth-child(1)
.ssi-about-card__icon {
	color:
		#2457d6;

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


.ssi-about__pillars
.ssi-about-card:nth-child(2)
.ssi-about-card__icon {
	color:
		#684bd8;

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


.ssi-about__pillars
.ssi-about-card:nth-child(3)
.ssi-about-card__icon {
	color:
		#c18416;

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


.ssi-about__pillars
.ssi-about-card:nth-child(4)
.ssi-about-card__icon {
	color:
		#168e8b;

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


.ssi-about__pillars
.ssi-about-card:hover
.ssi-about-card__icon {
	transform:
		rotate(
			-5deg
		)
		scale(
			1.06
		);
}


/* Text */

.ssi-about__pillars
.ssi-about-card
.ssi-about-card__content {
	position:
		relative;

	z-index:
		2;
}


.ssi-about__pillars
.ssi-about-card
.ssi-about-card__content h3 {
	color:
		#0b1f3a;

	transition:
		transform 300ms ease,
		color 300ms ease;
}


.ssi-about__pillars
.ssi-about-card:hover
.ssi-about-card__content h3 {
	transform:
		translateX(
			3px
		);
}


.ssi-about__pillars
.ssi-about-card
.ssi-about-card__content p {
	color:
		#667b93;
}


/* Arrow */

.ssi-about__pillars
.ssi-about-card
.ssi-about-card__arrow {
	position:
		relative;

	z-index:
		5;

	width:
		45px;

	height:
		45px;

	display:
		grid;

	place-items:
		center;

	margin-top:
		auto;

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

	border-radius:
		50%;

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

	color:
		#2457d6;

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


.ssi-about__pillars
.ssi-about-card
.ssi-about-card__arrow:hover {
	transform:
		scale(
			1.12
		)
		rotate(
			-5deg
		);

	background:
		#0b1f3a;

	color:
		#f4c766;

	box-shadow:
		0
		10px
		24px
		rgba(
			11,
			31,
			58,
			0.16
		);
}


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

@media (max-width: 1050px) {

	.ssi-why {
		padding:
			105px
			0
			110px;
	}


	.ssi-why__header {
		gap:
			45px;
	}


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


	.ssi-why__manifesto {
		min-height:
			420px;
	}

}


@media (max-width: 800px) {

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

		gap:
			25px;

		margin-bottom:
			50px;
	}

}


@media (max-width: 600px) {

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


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

		gap:
			14px;
	}


	.ssi-why__manifesto {
		min-height:
			390px;

		padding:
			28px
			23px;
	}


	.ssi-why__manifesto-word {
		font-size:
			clamp(
				2.4rem,
				13vw,
				4rem
			);
	}


	.ssi-why-card {
		min-height:
			auto;

		padding:
			23px
			21px;
	}


	.ssi-why__bottom {
		flex-wrap:
			wrap;

		justify-content:
			flex-start;
	}


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


	.ssi-about__pillars
	.ssi-about-card:hover {
		transform:
			translateY(
				-5px
			)
			scale(
				1.006
			);
	}


	.ssi-about__pillars
	.ssi-about-card
	.ssi-about-card__arrow {
		width:
			42px;

		height:
			42px;
	}

}


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

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

	.ssi-why-card,
	.ssi-why__manifesto-word,
	.ssi-about__pillars
	.ssi-about-card,
	.ssi-about__pillars
	.ssi-about-card::after {
		transition:
			none !important;
	}

}