/* ==========================================================================
   SSI FOUNDATION COURSE PAGE
   ========================================================================== */

.ssi-foundation-page {
	position: relative;
	overflow: hidden;
	color: var(--ssi-color-primary);
	background: #ffffff;
}


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

.ssi-foundation__hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: 720px;

	display: flex;
	align-items: center;

	background:
		linear-gradient(
			135deg,
			#ffffff 0%,
			#fbfdff 42%,
			#f2f7ff 100%
		);
}

.ssi-foundation__hero-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	pointer-events: none;
}

.ssi-foundation__hero-bg::before {
	content: "";

	position: absolute;
	inset: -30%;

	background:
		radial-gradient(
			ellipse 48% 60% at 8% 42%,
			rgba(
				245,
				190,
				74,
				0.20
			),
			transparent 70%
		),
		radial-gradient(
			ellipse 62% 70% at 76% 30%,
			rgba(
				59,
				130,
				246,
				0.24
			),
			transparent 70%
		),
		radial-gradient(
			ellipse 55% 50% at 62% 78%,
			rgba(
				96,
				105,
				214,
				0.13
			),
			transparent 72%
		);

	animation:
		ssiFoundationAurora
		20s
		ease-in-out
		infinite alternate;
}

.ssi-foundation__hero-bg::after {
	content: "";

	position: absolute;

	width: 820px;
	height: 820px;

	left: 72%;
	top: 50%;

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

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(
				255,
				255,
				255,
				0.95
			) 0%,
			rgba(
				221,
				235,
				255,
				0.60
			) 32%,
			rgba(
				179,
				208,
				255,
				0.18
			) 56%,
			transparent 74%
		);

	filter:
		blur(
			18px
		);

	animation:
		ssiFoundationGlow
		9s
		ease-in-out
		infinite alternate;
}

.ssi-foundation__hero-grid {
	position: absolute;
	inset: 0;

	opacity: 0.27;

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

	background-size: 48px 48px;

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

.ssi-foundation__hero-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(24px);
}

.ssi-foundation__hero-orb--one {
	width: 480px;
	height: 480px;

	left: -220px;
	bottom: -260px;

	background:
		radial-gradient(
			circle,
			rgba(
				245,
				190,
				74,
				0.16
			),
			transparent 72%
		);

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

.ssi-foundation__hero-orb--two {
	width: 520px;
	height: 520px;

	right: -260px;
	top: -260px;

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

	animation:
		ssiFoundationBlueFloat
		14s
		ease-in-out
		infinite alternate;
}

.ssi-foundation__hero-container {
	position: relative;

	width: min(
		100%,
		1200px
	);

	margin: 0 auto;

	padding:
		95px
		24px
		100px;

	display:
		grid;

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

	gap:
		55px;

	align-items:
		center;
}

.ssi-foundation__hero-content {
	max-width:
		720px;
}

.ssi-foundation__eyebrow {
	display:
		inline-flex;

	align-items:
		center;

	gap:
		10px;

	margin-bottom:
		22px;

	color:
		#2457d6;

	font-size:
		0.69rem;

	font-weight:
		800;

	letter-spacing:
		0.09em;

	text-transform:
		uppercase;
}

.ssi-foundation__eyebrow > span {
	display:
		inline-grid;

	place-items:
		center;

	width:
		30px;

	height:
		30px;

	border-radius:
		10px;

	background:
		#0b1f3a;

	color:
		#f4c766;

	font-size:
		0.58rem;
}

.ssi-foundation__hero-content h1 {
	margin:
		0
		0
		24px;

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

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

	font-weight:
		800;

	line-height:
		0.98;

	letter-spacing:
		-0.068em;

	color:
		#0b1f3a;
}

.ssi-foundation__hero-content h1 span {
	display:
		inline;

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

	-webkit-background-clip:
		text;

	background-clip:
		text;

	color:
		transparent;
}

.ssi-foundation__hero-content > p {
	max-width:
		680px;

	margin:
		0
		0
		25px;

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

	font-size:
		0.94rem;

	line-height:
		1.86;
}

.ssi-foundation__hero-tags {
	display:
		flex;

	flex-wrap:
		wrap;

	gap:
		8px;

	margin-bottom:
		28px;
}

.ssi-foundation__hero-tags span {
	display:
		inline-flex;

	align-items:
		center;

	min-height:
		30px;

	padding:
		0
		11px;

	border:
		1px solid
		#dbe4ef;

	border-radius:
		999px;

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

	color:
		#6f7e92;

	font-size:
		0.57rem;

	font-weight:
		800;
}

.ssi-foundation__hero-actions {
	display:
		flex;

	align-items:
		center;

	flex-wrap:
		wrap;

	gap:
		18px;
}

.ssi-foundation__primary-btn,
.ssi-foundation__secondary-btn {
	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		10px;

	min-height:
		52px;

	font-size:
		0.73rem;

	font-weight:
		800;

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

.ssi-foundation__primary-btn {
	padding:
		0
		22px;

	border-radius:
		999px;

	background:
		#f0b83f;

	color:
		#0b1f3a;

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

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

	background:
		#f6c95f;
}

.ssi-foundation__secondary-btn {
	color:
		#0b1f3a;
}

.ssi-foundation__secondary-btn:hover {
	transform:
		translateX(
			3px
		);

	color:
		#1d4ed8;
}


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

.ssi-foundation__hero-visual {
	position:
		relative;

	min-height:
		520px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;
}

.ssi-foundation__subject-orbit {
	position:
		relative;

	width:
		min(
			100%,
			500px
		);

	aspect-ratio:
		1;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;
}

.ssi-foundation__subject-orbit::before {
	content:
		"";

	position:
		absolute;

	inset:
		10%;

	border-radius:
		50%;

	background:
		radial-gradient(
			circle,
			rgba(
				255,
				255,
				255,
				0.94
			),
			rgba(
				219,
				233,
				255,
				0.36
			),
			transparent 72%
		);

	filter:
		blur(
			8px
		);
}

.ssi-foundation__ring {
	position:
		absolute;

	border:
		1px solid
		rgba(
			59,
			130,
			246,
			0.18
		);

	border-radius:
		50%;

	animation:
		ssiFoundationOrbit
		22s
		linear
		infinite;
}

.ssi-foundation__ring--one {
	inset:
		4%;
}

.ssi-foundation__ring--two {
	inset:
		15%;

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

	animation-direction:
		reverse;

	animation-duration:
		18s;
}

.ssi-foundation__ring--three {
	inset:
		26%;

	border-color:
		rgba(
			59,
			130,
			246,
			0.12
		);

	animation-duration:
		14s;
}

.ssi-foundation__core {
	position:
		relative;

	z-index:
		4;

	width:
		190px;

	height:
		190px;

	display:
		flex;

	flex-direction:
		column;

	align-items:
		center;

	justify-content:
		center;

	border-radius:
		50%;

	background:
		linear-gradient(
			145deg,
			#ffffff,
			#edf3fc
		);

	box-shadow:
		0
		25px
		55px
		rgba(
			15,
			23,
			42,
			0.10
		),
		0
		0
		0
		11px
		rgba(
			255,
			255,
			255,
			0.54
		);

	animation:
		ssiFoundationCoreFloat
		6s
		ease-in-out
		infinite alternate;
}

.ssi-foundation__core-mark {
	width:
		72px;

	height:
		72px;

	display:
		grid;

	place-items:
		center;

	margin-bottom:
		8px;

	border:
		1px solid
		#d9e4f0;

	border-radius:
		18px;

	background:
		#f2f6fc;

	color:
		#2457d6;

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

	font-size:
		1.35rem;

	font-weight:
		800;
}

.ssi-foundation__core strong {
	color:
		#0b1f3a;

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

	font-size:
		1.06rem;

	font-weight:
		800;

	letter-spacing:
		0.08em;
}

.ssi-foundation__core > span {
	margin-top:
		4px;

	color:
		#8795a8;

	font-size:
		0.53rem;

	font-weight:
		700;
}

.ssi-foundation__subject-card {
	position:
		absolute;

	z-index:
		6;

	min-width:
		180px;

	padding:
		14px
		15px;

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

	border-radius:
		16px;

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

	box-shadow:
		0
		16px
		35px
		rgba(
			15,
			23,
			42,
			0.08
		);

	backdrop-filter:
		blur(
			10px
		);

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

	animation:
		ssiFoundationFloatCard
		5.8s
		ease-in-out
		infinite alternate;
}

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

	position:
		absolute;

	left:
		0;

	top:
		15px;

	width:
		3px;

	height:
		28px;

	border-radius:
		0
		4px
		4px
		0;

	background:
		#2457d6;
}

.ssi-foundation__subject-card strong,
.ssi-foundation__subject-card span {
	display:
		block;
}

.ssi-foundation__subject-card strong {
	margin-left:
		7px;

	color:
		#0b1f3a;

	font-size:
		0.68rem;

	font-weight:
		800;
}

.ssi-foundation__subject-card span {
	margin:
		4px
		0
		0
		7px;

	color:
		#8290a4;

	font-size:
		0.54rem;

	line-height:
		1.4;
}

.ssi-foundation__subject-card--physics {
	top:
		8%;

	right:
		0;
}

.ssi-foundation__subject-card--chemistry {
	right:
		-3%;

	bottom:
		25%;

	animation-delay:
		-1.6s;
}

.ssi-foundation__subject-card--maths {
	left:
		-3%;

	bottom:
		14%;

	animation-delay:
		-3.2s;
}

.ssi-foundation__subject-card--english {
	left:
		1%;

	top:
		20%;

	animation-delay:
		-4.4s;
}


/* ==========================================================================
   OVERVIEW
   ========================================================================== */

.ssi-foundation__overview {
	padding:
		120px
		0;

	background:
		#ffffff;
}

.ssi-foundation__section-heading {
	display:
		grid;

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

	gap:
		70px;

	align-items:
		end;

	margin-bottom:
		58px;
}

.ssi-foundation__section-heading h2,
.ssi-foundation__system-header h2,
.ssi-foundation__competitive h2,
.ssi-foundation__cta-content h2 {
	margin:
		12px
		0
		0;

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

	font-size:
		clamp(
			2.5rem,
			4vw,
			4rem
		);

	font-weight:
		800;

	line-height:
		1.03;

	letter-spacing:
		-0.055em;

	color:
		#0b1f3a;
}

.ssi-foundation__section-heading h2 span,
.ssi-foundation__system-header h2 span,
.ssi-foundation__competitive h2 span,
.ssi-foundation__cta-content h2 span {
	background:
		linear-gradient(
			135deg,
			#2457d6,
			#a38c78,
			#dca238
		);

	-webkit-background-clip:
		text;

	background-clip:
		text;

	color:
		transparent;
}

.ssi-foundation__section-heading > p {
	max-width:
		500px;

	margin:
		0;

	color:
		#75849a;

	font-size:
		0.85rem;

	line-height:
		1.82;
}

.ssi-foundation__overview-grid {
	display:
		grid;

	grid-template-columns:
		minmax(
			0,
			1.3fr
		)
		minmax(
			300px,
			0.7fr
		);

	gap:
		18px;
}

.ssi-foundation__overview-main {
	padding:
		38px;

	border:
		1px solid
		#e1e8f0;

	border-radius:
		26px;

	background:
		linear-gradient(
			145deg,
			#fbfdff,
			#f5f8fc
		);
}

.ssi-foundation__mini-label {
	display:
		block;

	margin-bottom:
		15px;

	color:
		#2457d6;

	font-size:
		0.62rem;

	font-weight:
		800;

	letter-spacing:
		0.09em;
}

.ssi-foundation__overview-main h3 {
	max-width:
		680px;

	margin:
		0
		0
		16px;

	color:
		#0b1f3a;

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

	font-size:
		1.65rem;

	font-weight:
		800;

	line-height:
		1.25;

	letter-spacing:
		-0.035em;
}

.ssi-foundation__overview-main > p {
	max-width:
		720px;

	margin:
		0
		0
		28px;

	color:
		#748398;

	font-size:
		0.78rem;

	line-height:
		1.82;
}

.ssi-foundation__benefits {
	display:
		grid;

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

	gap:
		10px;
}

.ssi-foundation__benefit {
	display:
		flex;

	align-items:
		center;

	gap:
		10px;

	min-height:
		54px;

	padding:
		0
		12px;

	border:
		1px solid
		#e3e9f0;

	border-radius:
		13px;

	background:
		#ffffff;
}

.ssi-foundation__benefit span {
	width:
		27px;

	height:
		27px;

	display:
		grid;

	place-items:
		center;

	border-radius:
		8px;

	background:
		#eef4ff;

	color:
		#2457d6;

	font-size:
		0.51rem;

	font-weight:
		800;
}

.ssi-foundation__benefit strong {
	color:
		#31435a;

	font-size:
		0.60rem;

	font-weight:
		800;
}

.ssi-foundation__overview-side {
	display:
		grid;

	gap:
		18px;
}

.ssi-foundation__stat-card {
	padding:
		30px;

	border-radius:
		24px;

	background:
		#0b1f3a;

	box-shadow:
		0
		20px
		45px
		rgba(
			11,
			31,
			58,
			0.11
		);
}

.ssi-foundation__stat-card + .ssi-foundation__stat-card {
	background:
		linear-gradient(
			145deg,
			#edf4ff,
			#f8fbff
		);

	border:
		1px solid
		#dce7f4;

	box-shadow:
		none;
}

.ssi-foundation__stat-card span {
	display:
		block;

	margin-bottom:
		8px;

	color:
		#f4c766;

	font-size:
		0.57rem;

	font-weight:
		800;

	letter-spacing:
		0.08em;

	text-transform:
		uppercase;
}

.ssi-foundation__stat-card + .ssi-foundation__stat-card span {
	color:
		#2457d6;
}

.ssi-foundation__stat-card strong {
	display:
		block;

	margin-bottom:
		9px;

	color:
		#ffffff;

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

	font-size:
		2rem;

	font-weight:
		800;

	letter-spacing:
		-0.05em;
}

.ssi-foundation__stat-card + .ssi-foundation__stat-card strong {
	color:
		#0b1f3a;
}

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

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

	font-size:
		0.70rem;

	line-height:
		1.75;
}

.ssi-foundation__stat-card + .ssi-foundation__stat-card p {
	color:
		#738298;
}


/* ==========================================================================
   SUBJECTS
   ========================================================================== */

.ssi-foundation__subjects {
	padding:
		120px
		0;

	background:
		#f7f9fc;
}

.ssi-foundation__subject-grid {
	display:
		grid;

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

	gap:
		14px;
}

.ssi-foundation__subject {
	position:
		relative;

	overflow:
		hidden;

	min-height:
		390px;

	padding:
		26px;

	border:
		1px solid
		#dfe7f0;

	border-radius:
		24px;

	background:
		#ffffff;

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

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

	position:
		absolute;

	left:
		0;

	right:
		0;

	bottom:
		0;

	height:
		4px;

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

	transform:
		scaleX(
			0
		);

	transform-origin:
		left center;

	transition:
		transform 300ms ease;
}

.ssi-foundation__subject:hover {
	transform:
		translateY(
			-7px
		);

	border-color:
		rgba(
			29,
			78,
			216,
			0.16
		);

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

.ssi-foundation__subject:hover::after {
	transform:
		scaleX(
			1
		);
}

.ssi-foundation__subject-top {
	display:
		flex;

	align-items:
		center;

	justify-content:
		space-between;

	margin-bottom:
		32px;
}

.ssi-foundation__subject-top > span {
	color:
		#a1adbb;

	font-size:
		0.61rem;

	font-weight:
		800;
}

.ssi-foundation__subject-top > div {
	width:
		52px;

	height:
		52px;

	display:
		grid;

	place-items:
		center;

	border:
		1px solid
		#dfe7f0;

	border-radius:
		15px;

	background:
		#f2f6fc;

	color:
		#2457d6;

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

	font-size:
		0.90rem;

	font-weight:
		800;
}

.ssi-foundation__subject h3 {
	margin:
		0
		0
		12px;

	color:
		#0b1f3a;

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

	font-size:
		1.35rem;

	font-weight:
		800;

	letter-spacing:
		-0.04em;
}

.ssi-foundation__subject p {
	margin:
		0
		0
		22px;

	color:
		#748398;

	font-size:
		0.73rem;

	line-height:
		1.75;
}

.ssi-foundation__subject ul {
	display:
		grid;

	gap:
		8px;

	margin:
		0;

	padding:
		0;

	list-style:
		none;
}

.ssi-foundation__subject li {
	display:
		flex;

	align-items:
		center;

	gap:
		8px;

	color:
		#44566f;

	font-size:
		0.61rem;

	font-weight:
		700;
}

.ssi-foundation__subject li::before {
	content:
		"✓";

	width:
		20px;

	height:
		20px;

	display:
		grid;

	place-items:
		center;

	border-radius:
		7px;

	background:
		#eef4ff;

	color:
		#2457d6;

	font-size:
		0.49rem;

	font-weight:
		800;
}


/* ==========================================================================
   LEARNING SYSTEM
   ========================================================================== */

.ssi-foundation__system {
	position:
		relative;

	overflow:
		hidden;

	padding:
		120px
		0;

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

	color:
		#ffffff;
}

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

	position:
		absolute;

	inset:
		0;

	background-image:
		linear-gradient(
			rgba(
				255,
				255,
				255,
				0.032
			)
			1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(
				255,
				255,
				255,
				0.032
			)
			1px,
			transparent 1px
		);

	background-size:
		50px 50px;

	opacity:
		0.60;

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

	pointer-events:
		none;
}

.ssi-foundation__system-header {
	position:
		relative;

	z-index:
		2;

	max-width:
		780px;

	margin:
		0
		auto
		55px;

	text-align:
		center;
}

.ssi-foundation__system-header .ssi-eyebrow {
	color:
		#f4c766;
}

.ssi-foundation__system-header h2 {
	color:
		#ffffff;
}

.ssi-foundation__system-header p {
	max-width:
		640px;

	margin:
		20px
		auto
		0;

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

	font-size:
		0.82rem;

	line-height:
		1.8;
}

.ssi-foundation__system-grid {
	position:
		relative;

	z-index:
		2;

	display:
		grid;

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

	gap:
		12px;
}

.ssi-foundation__system-card {
	padding:
		26px;

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

	border-radius:
		22px;

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

	backdrop-filter:
		blur(
			9px
		);

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

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

.ssi-foundation__system-card:hover {
	transform:
		translateY(
			-5px
		);

	border-color:
		rgba(
			244,
			199,
			102,
			0.24
		);

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

.ssi-foundation__system-card > span {
	display:
		block;

	margin-bottom:
		18px;

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

	font-size:
		0.58rem;

	font-weight:
		800;
}

.ssi-foundation__system-card > div {
	width:
		48px;

	height:
		48px;

	display:
		grid;

	place-items:
		center;

	margin-bottom:
		22px;

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

	border-radius:
		13px;

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

	color:
		#f4c766;

	font-size:
		0.85rem;

	font-weight:
		800;
}

.ssi-foundation__system-card h3 {
	margin:
		0
		0
		10px;

	color:
		#ffffff;

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

	font-size:
		0.95rem;

	font-weight:
		800;

	letter-spacing:
		-0.025em;
}

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

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

	font-size:
		0.65rem;

	line-height:
		1.75;
}


/* ==========================================================================
   COMPETITIVE ADVANTAGE
   ========================================================================== */

.ssi-foundation__competitive {
	padding:
		120px
		0;

	background:
		#ffffff;
}

.ssi-foundation__competitive-layout {
	display:
		grid;

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

	gap:
		70px;

	align-items:
		center;
}

.ssi-foundation__competitive h2 {
	max-width:
		700px;
}

.ssi-foundation__competitive p {
	max-width:
		680px;

	margin:
		22px
		0
		0;

	color:
		#748398;

	font-size:
		0.83rem;

	line-height:
		1.82;
}

.ssi-foundation__competitive-list {
	display:
		grid;

	gap:
		9px;
}

.ssi-foundation__competitive-list > div {
	display:
		flex;

	align-items:
		center;

	justify-content:
		space-between;

	gap:
		14px;

	min-height:
		68px;

	padding:
		0
		18px;

	border:
		1px solid
		#dfe7f0;

	border-radius:
		15px;

	background:
		#fbfdff;

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

.ssi-foundation__competitive-list > div:hover {
	transform:
		translateX(
			5px
		);

	border-color:
		rgba(
			29,
			78,
			216,
			0.16
		);

	background:
		#f5f9ff;
}

.ssi-foundation__competitive-list span {
	color:
		#2457d6;

	font-size:
		0.65rem;

	font-weight:
		800;
}

.ssi-foundation__competitive-list strong {
	color:
		#31435a;

	font-size:
		0.65rem;

	font-weight:
		700;
}


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

.ssi-foundation__cta {
	position:
		relative;

	overflow:
		hidden;

	padding:
		110px
		0;

	background:
		linear-gradient(
			145deg,
			#08182c,
			#102f54
		);

	color:
		#ffffff;
}

.ssi-foundation__cta-bg {
	position:
		absolute;

	inset:
		0;

	pointer-events:
		none;
}

.ssi-foundation__cta-bg::before {
	content:
		"";

	position:
		absolute;

	inset:
		0;

	background-image:
		linear-gradient(
			rgba(
				255,
				255,
				255,
				0.035
			)
			1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(
				255,
				255,
				255,
				0.035
			)
			1px,
			transparent 1px
		);

	background-size:
		50px 50px;
}

.ssi-foundation__cta-orb {
	position:
		absolute;

	width:
		620px;

	height:
		620px;

	right:
		-260px;

	top:
		-270px;

	border-radius:
		50%;

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

	filter:
		blur(
			22px
		);
}

.ssi-foundation__cta-content {
	position:
		relative;

	z-index:
		2;

	max-width:
		850px;

	margin:
		0
		auto;

	text-align:
		center;
}

.ssi-foundation__cta-content .ssi-eyebrow {
	color:
		#f4c766;
}

.ssi-foundation__cta-content h2 {
	color:
		#ffffff;
}

.ssi-foundation__cta-content p {
	max-width:
		650px;

	margin:
		21px
		auto
		30px;

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

	font-size:
		0.83rem;

	line-height:
		1.82;
}

.ssi-foundation__cta-actions {
	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	flex-wrap:
		wrap;

	gap:
		14px;
}

.ssi-foundation__cta .ssi-secondary-placeholder {
	display:
		none;
}


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

@keyframes ssiFoundationAurora {

	0% {
		transform:
			translate3d(
				-1%,
				-0.5%,
				0
			)
			scale(
				1.015
			);
	}

	100% {
		transform:
			translate3d(
				1.2%,
				1.4%,
				0
			)
			scale(
				1.045
			);
	}
}

@keyframes ssiFoundationGlow {

	0% {
		transform:
			translate(
				-50%,
				-50%
			)
			scale(
				0.94
			);

		opacity:
			0.68;
	}

	100% {
		transform:
			translate(
				-50%,
				-50%
			)
			scale(
				1.07
			);

		opacity:
			0.98;
	}
}

@keyframes ssiFoundationGoldFloat {

	0% {
		transform:
			translate3d(
				0,
				0,
				0
			)
			scale(
				0.95
			);

		opacity:
			0.56;
	}

	100% {
		transform:
			translate3d(
				45px,
				-28px,
				0
			)
			scale(
				1.08
			);

		opacity:
			0.90;
	}
}

@keyframes ssiFoundationBlueFloat {

	0% {
		transform:
			translate3d(
				0,
				0,
				0
			)
			scale(
				0.95
			);

		opacity:
			0.54;
	}

	100% {
		transform:
			translate3d(
				-45px,
				34px,
				0
			)
			scale(
				1.08
			);

		opacity:
			0.90;
	}
}

@keyframes ssiFoundationOrbit {

	from {
		transform:
			rotate(
				0deg
			);
	}

	to {
		transform:
			rotate(
				360deg
			);
	}
}

@keyframes ssiFoundationCoreFloat {

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

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

@keyframes ssiFoundationFloatCard {

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

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


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

@media (max-width: 1050px) {

	.ssi-foundation__hero-container {
		grid-template-columns:
			1fr
			0.9fr;
	}

	.ssi-foundation__subject-grid {
		grid-template-columns:
			repeat(
				2,
				minmax(
					0,
					1fr
				)
			);
	}

	.ssi-foundation__system-grid {
		grid-template-columns:
			repeat(
				2,
				minmax(
					0,
					1fr
				)
			);
	}
}


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

@media (max-width: 850px) {

	.ssi-foundation__hero {
		min-height:
			auto;
	}

	.ssi-foundation__hero-container {
		grid-template-columns:
			1fr;

		padding:
			78px
			24px
			95px;
	}

	.ssi-foundation__hero-visual {
		min-height:
			450px;
	}

	.ssi-foundation__section-heading {
		grid-template-columns:
			1fr;

		gap:
			25px;
	}

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

	.ssi-foundation__competitive-layout {
		grid-template-columns:
			1fr;

		gap:
			40px;
	}
}


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

@media (max-width: 600px) {

	.ssi-foundation__hero-container {
		padding:
			60px
			18px
			72px;
	}

	.ssi-foundation__hero-content h1 {
		font-size:
			clamp(
				2.75rem,
				12.5vw,
				4rem
			);
	}

	.ssi-foundation__hero-content > p {
		font-size:
			0.82rem;
	}

	.ssi-foundation__hero-visual {
		min-height:
			390px;
	}

	.ssi-foundation__subject-orbit {
		max-width:
			390px;
	}

	.ssi-foundation__core {
		width:
			145px;

		height:
			145px;
	}

	.ssi-foundation__core-mark {
		width:
			55px;

		height:
			55px;

		font-size:
			1.05rem;

		border-radius:
			14px;
	}

	.ssi-foundation__core strong {
		font-size:
			0.86rem;
	}

	.ssi-foundation__core > span {
		font-size:
			0.47rem;
	}

	.ssi-foundation__subject-card {
		min-width:
			132px;

		padding:
			10px;
	}

	.ssi-foundation__subject-card strong {
		font-size:
			0.55rem;
	}

	.ssi-foundation__subject-card span {
		font-size:
			0.46rem;
	}

	.ssi-foundation__subject-card--physics {
		right:
			-2%;
	}

	.ssi-foundation__subject-card--chemistry {
		right:
			-2%;
	}

	.ssi-foundation__subject-card--maths {
		left:
			-3%;
	}

	.ssi-foundation__subject-card--english {
		left:
			-1%;
	}

	.ssi-foundation__overview,
	.ssi-foundation__subjects,
	.ssi-foundation__system,
	.ssi-foundation__competitive {
		padding:
			82px
			0;
	}

	.ssi-foundation__section-heading h2,
	.ssi-foundation__system-header h2,
	.ssi-foundation__competitive h2,
	.ssi-foundation__cta-content h2 {
		font-size:
			2.4rem;
	}

	.ssi-foundation__overview-main {
		padding:
			24px;
	}

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

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

	.ssi-foundation__subject {
		min-height:
			350px;

		padding:
			22px;
	}

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

	.ssi-foundation__system-card {
		padding:
			22px;
	}

	.ssi-foundation__competitive-list > div {
		min-height:
			62px;
	}

	.ssi-foundation__cta {
		padding:
			82px
			0;
	}
}


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

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

	.ssi-foundation__hero-bg::before,
	.ssi-foundation__hero-bg::after,
	.ssi-foundation__hero-orb,
	.ssi-foundation__ring,
	.ssi-foundation__core,
	.ssi-foundation__subject-card {
		animation:
			none !important;
	}
}