/* ==========================================================================
   SSI RESULTS PAGE
   COMPLETE MASTER STYLESHEET
   ========================================================================== */


/* ==========================================================================
   GLOBAL
   ========================================================================== */

.ssi-results-page {
	overflow: hidden;
	background: #ffffff;
	color: #0b1f3a;
}


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

.ssi-results-hero {
	position: relative;
	overflow: hidden;

	padding: 95px 0 85px;

	background:
		radial-gradient(
			circle at 82% 24%,
			rgba(68, 112, 205, 0.15),
			transparent 34%
		),
		radial-gradient(
			circle at 12% 82%,
			rgba(220, 162, 56, 0.10),
			transparent 28%
		),
		linear-gradient(
			135deg,
			#f2f5fa 0%,
			#eaf0f8 50%,
			#e4ebf5 100%
		);
}


.ssi-results-hero__background {
	position: absolute;
	inset: 0;

	pointer-events: none;
}


.ssi-results-hero__grid {
	position: absolute;
	inset: 0;

	opacity: 0.16;

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

	background-size: 48px 48px;
}


.ssi-results-hero__orb {
	position: absolute;

	width: 520px;
	height: 520px;

	right: -190px;
	top: -220px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(59, 110, 220, 0.17),
			transparent 70%
		);

	filter: blur(18px);

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


.ssi-results-hero__orb--two {
	left: -230px;
	right: auto;

	top: auto;
	bottom: -280px;

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

	animation-duration: 15s;
}


.ssi-results-hero__layout {
	position: relative;
	z-index: 2;
}


.ssi-results-hero__content {
	width: 100%;
	max-width: 1180px;
}


/* --------------------------------------------------------------------------
   Eyebrow
   -------------------------------------------------------------------------- */

.ssi-results-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;

	margin-bottom: 19px;

	color: #2457d6;

	font-size: 0.67rem;
	font-weight: 800;

	letter-spacing: 0.10em;
	text-transform: uppercase;
}


.ssi-results-hero__eyebrow span {
	width: 30px;
	height: 2px;

	background: #dca238;
}


/* --------------------------------------------------------------------------
   Main heading
   -------------------------------------------------------------------------- */

.ssi-results-hero h1 {
	display: block;

	width: 100%;
	max-width: 1150px;

	margin: 0;

	padding: 0 0 0.10em;

	overflow: visible;

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

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

	font-weight: 800;

	line-height: 1.02;

	letter-spacing: -0.064em;

	color: #0b1f3a;
}


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

	width: auto;
	max-width: none;

	margin: 0;

	padding: 0 0 0.08em;

	white-space: nowrap;

	overflow: visible;

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

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
}

/* --------------------------------------------------------------------------
   Description
   -------------------------------------------------------------------------- */

.ssi-results-hero p {
	max-width: 870px;

	margin:
		28px
		0
		24px;

	color: #647790;

	font-size: 0.84rem;

	line-height: 1.85;
}


/* --------------------------------------------------------------------------
   Explore link
   -------------------------------------------------------------------------- */

.ssi-results-hero__scroll {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	color: #0b1f3a;

	font-size: 0.66rem;
	font-weight: 800;

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


.ssi-results-hero__scroll:hover {
	transform: translateY(3px);

	color: #2457d6;
}


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

@keyframes ssiResultHeroFloat {

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

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


/* ==========================================================================
   ACHIEVEMENT ORBIT SECTION
   ========================================================================== */

.ssi-results-orbit-section {
	position: relative;
	overflow: hidden;

	padding:
		88px
		0
		100px;

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


.ssi-results-orbit-section__background {
	position: absolute;
	inset: 0;

	pointer-events: none;
}


.ssi-results-orbit-section__grid {
	position: absolute;
	inset: 0;

	opacity: 0.14;

	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: 55px 55px;
}


.ssi-results-orbit-section__glow {
	position: absolute;

	width: 850px;
	height: 850px;

	left: 50%;
	top: 54%;

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

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(59, 130, 246, 0.07),
			rgba(245, 190, 74, 0.035) 40%,
			transparent 72%
		);

	filter: blur(12px);
}


/* --------------------------------------------------------------------------
   Orbit Intro
   -------------------------------------------------------------------------- */

.ssi-results-orbit-intro {
	position: relative;
	z-index: 2;

	margin-bottom: 34px;

	text-align: center;
}


.ssi-results-orbit-intro > span {
	color: #2457d6;

	font-size: 0.62rem;
	font-weight: 800;

	letter-spacing: 0.10em;
	text-transform: uppercase;
}


.ssi-results-orbit-intro h2 {
	margin:
		10px
		0
		8px;

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

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

	line-height: 1;

	letter-spacing: -0.055em;
}


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

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
}


.ssi-results-orbit-intro p {
	margin: 0;

	color: #7a899c;

	font-size: 0.70rem;
}


/* ==========================================================================
   ORBIT
   ========================================================================== */

.ssi-results-orbit {
	position: relative;

	width:
		min(
			760px,
			100%
		);

	height: 640px;

	margin: 0 auto;

	--orbit-size: 570px;
}


/* --------------------------------------------------------------------------
   Rings
   -------------------------------------------------------------------------- */

.ssi-results-orbit__ring {
	position: absolute;

	left: 50%;
	top: 50%;

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

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

	border-radius: 50%;

	pointer-events: none;
}


.ssi-results-orbit__ring--one {
	width:
		var(--orbit-size);

	height:
		var(--orbit-size);

	animation:
		ssiOrbitRotate
		34s
		linear
		infinite;
}


.ssi-results-orbit__ring--two {
	width: 430px;
	height: 430px;

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

	animation:
		ssiOrbitRotateReverse
		26s
		linear
		infinite;
}


/* --------------------------------------------------------------------------
   Center
   -------------------------------------------------------------------------- */

.ssi-results-orbit__center {
	position: absolute;

	left: 50%;
	top: 50%;

	width: 205px;
	height: 205px;

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

	border-radius: 50%;

	display: flex;
	align-items: center;
	justify-content: center;

	z-index: 10;

	transition:
		transform 400ms ease;
}


.ssi-results-orbit__center-ring {
	position: absolute;
	inset: 0;

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

	border-radius: 50%;

	box-shadow:
		0
		0
		0
		10px
		rgba(
			255,
			255,
			255,
			0.55
		),
		0
		0
		42px
		rgba(
			36,
			87,
			214,
			0.07
		);
}


.ssi-results-orbit__center::before {
	content: "";

	position: absolute;

	inset: 14px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			#ffffff,
			#edf4fc 75%
		);

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


.ssi-results-orbit__center-core {
	position: relative;

	z-index: 4;

	width: 130px;
	height: 130px;

	border-radius: 50%;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	text-align: center;
}


.ssi-results-orbit__center-core span {
	margin-bottom: 3px;

	color: #2457d6;

	font-size: 0.50rem;
	font-weight: 800;

	letter-spacing: 0.16em;
}


.ssi-results-orbit__center-core strong {
	color: #0b1f3a;

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

	font-size: 0.95rem;
	font-weight: 800;

	letter-spacing: -0.02em;
}


.ssi-results-orbit__center-core small {
	margin-top: 5px;

	color: #8794a5;

	font-size: 0.39rem;
	font-weight: 700;
}


/* --------------------------------------------------------------------------
   Center active info
   -------------------------------------------------------------------------- */

.ssi-results-orbit__center-info {
	position: absolute;

	left: 50%;
	bottom: -44px;

	transform:
		translateX(-50%)
		translateY(8px);

	z-index: 12;

	display: flex;
	flex-direction: column;
	align-items: center;

	min-width: 148px;

	padding:
		8px
		12px;

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

	border-radius: 12px;

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

	box-shadow:
		0
		13px
		28px
		rgba(
			15,
			23,
			42,
			0.08
		);

	backdrop-filter:
		blur(12px);

	opacity: 0;

	pointer-events: none;

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


.ssi-results-orbit.has-active
.ssi-results-orbit__center-info {
	opacity: 1;

	transform:
		translateX(-50%)
		translateY(0);
}


.ssi-results-orbit__center-exam {
	color: #2457d6;

	font-size: 0.40rem;
	font-weight: 800;

	text-transform: uppercase;
}


.ssi-results-orbit__center-name {
	margin-top: 3px;

	color: #0b1f3a;

	font-size: 0.61rem;
	font-weight: 800;
}


.ssi-results-orbit__center-rank {
	margin-top: 2px;

	color: #75849a;

	font-size: 0.43rem;
	font-weight: 700;
}


/* ==========================================================================
   STUDENT BUBBLES
   ========================================================================== */

.ssi-result-bubble {
	position: absolute;

	width: 94px;
	height: 94px;

	border-radius: 50%;

	z-index: 8;

	cursor: pointer;

	outline: none;

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

	transition:
		transform 450ms cubic-bezier(
			.22,
			.61,
			.36,
			1
		),
		box-shadow 350ms ease;

	animation:
		ssiBubbleFloat
		5.5s
		ease-in-out
		infinite
		alternate;
}


.ssi-result-bubble:hover,
.ssi-result-bubble:focus-visible,
.ssi-result-bubble.is-active {
	transform:
		translate(
			-50%,
			-50%
		)
		scale(1.14);

	z-index: 20;
}


/* --------------------------------------------------------------------------
   Bubble photo
   -------------------------------------------------------------------------- */

.ssi-result-bubble__photo {
	position: absolute;

	inset: 0;

	overflow: hidden;

	border:
		3px solid
		rgba(
			255,
			255,
			255,
			0.96
		);

	border-radius: 50%;

	background:
		linear-gradient(
			145deg,
			#edf3ff,
			#d9e6fb
		);

	box-shadow:
		0
		12px
		30px
		rgba(
			15,
			23,
			42,
			0.12
		);

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


.ssi-result-bubble:hover
.ssi-result-bubble__photo,
.ssi-result-bubble:focus-visible
.ssi-result-bubble__photo,
.ssi-result-bubble.is-active
.ssi-result-bubble__photo {
	border-color:
		#f0b83f;

	box-shadow:
		0
		20px
		44px
		rgba(
			15,
			23,
			42,
			0.18
		),
		0
		0
		0
		6px
		rgba(
			240,
			184,
			63,
			0.10
		);
}


.ssi-result-bubble__photo img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transform:
		scale(1);

	transition:
		transform 700ms ease;
}


.ssi-result-bubble:hover
.ssi-result-bubble__photo img,
.ssi-result-bubble:focus-visible
.ssi-result-bubble__photo img,
.ssi-result-bubble.is-active
.ssi-result-bubble__photo img {
	transform:
		scale(1.10);
}


.ssi-result-bubble__fallback {
	width: 100%;
	height: 100%;

	display: grid;
	place-items: center;

	color: #0b1f3a;

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

	font-size: 1.12rem;
	font-weight: 800;
}


/* --------------------------------------------------------------------------
   Status dots
   -------------------------------------------------------------------------- */

.ssi-result-bubble__status {
	position: absolute;

	right: 1px;
	bottom: 5px;

	width: 13px;
	height: 13px;

	border-radius: 50%;

	background:
		#f0b83f;

	border:
		3px solid
		#ffffff;

	z-index: 4;
}


.ssi-result-bubble--purple
.ssi-result-bubble__status {
	background:
		#7567d1;
}


.ssi-result-bubble--gold
.ssi-result-bubble__status {
	background:
		#dca238;
}


.ssi-result-bubble--teal
.ssi-result-bubble__status {
	background:
		#238d86;
}


.ssi-result-bubble--peach
.ssi-result-bubble__status {
	background:
		#df8c68;
}


/* --------------------------------------------------------------------------
   Bubble information
   -------------------------------------------------------------------------- */

.ssi-result-bubble__info {
	position: absolute;

	left: 50%;
	top:
		calc(
			100% + 10px
		);

	transform:
		translateX(-50%)
		translateY(8px)
		scale(.96);

	min-width: 145px;

	padding:
		9px
		12px;

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

	border-radius: 12px;

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

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

	backdrop-filter:
		blur(12px);

	display: flex;
	flex-direction: column;
	align-items: center;

	opacity: 0;

	pointer-events: none;

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


.ssi-result-bubble:hover
.ssi-result-bubble__info,
.ssi-result-bubble:focus-visible
.ssi-result-bubble__info,
.ssi-result-bubble.is-active
.ssi-result-bubble__info {
	opacity: 1;

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


.ssi-result-bubble__info > span {
	color:
		#2457d6;

	font-size:
		0.40rem;

	font-weight:
		800;

	text-transform:
		uppercase;
}


.ssi-result-bubble__info strong {
	margin-top:
		3px;

	color:
		#0b1f3a;

	font-size:
		0.60rem;

	font-weight:
		800;

	text-align:
		center;
}


.ssi-result-bubble__info small {
	margin-top:
		2px;

	color:
		#78889b;

	font-size:
		0.43rem;

	font-weight:
		700;
}


/* --------------------------------------------------------------------------
   Bubble positions
   -------------------------------------------------------------------------- */

.ssi-result-bubble--top {
	left:
		50%;

	top:
		8%;
}


.ssi-result-bubble--right-top {
	left:
		82%;

	top:
		28%;
}


.ssi-result-bubble--right-bottom {
	left:
		82%;

	top:
		72%;
}


.ssi-result-bubble--bottom {
	left:
		50%;

	top:
		92%;
}


.ssi-result-bubble--left-bottom {
	left:
		18%;

	top:
		72%;
}


.ssi-result-bubble--left-top {
	left:
		18%;

	top:
		28%;
}


/* --------------------------------------------------------------------------
   Bubble pulse
   -------------------------------------------------------------------------- */

.ssi-result-bubble__pulse {
	position: absolute;

	inset:
		-6px;

	border-radius:
		50%;

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

	opacity:
		0.5;

	animation:
		ssiBubblePulse
		3.5s
		ease-out
		infinite;
}


/* --------------------------------------------------------------------------
   Orbit hint
   -------------------------------------------------------------------------- */

.ssi-results-orbit__hint {
	position: absolute;

	left: 50%;
	bottom: 1%;

	transform:
		translateX(-50%);

	color:
		#99a6b6;

	font-size:
		0.46rem;

	font-weight:
		800;

	letter-spacing:
		0.08em;

	text-transform:
		uppercase;
}


/* ==========================================================================
   RESULT SNAPSHOT
   ========================================================================== */

.ssi-results-snapshot {
	padding:
		85px
		0;

	background:
		#ffffff;
}


.ssi-results-snapshot__header {
	display:
		grid;

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

	gap:
		60px;

	align-items:
		end;

	margin-bottom:
		38px;
}


.ssi-results-snapshot__header > div > span {
	color:
		#2457d6;

	font-size:
		0.58rem;

	font-weight:
		800;

	letter-spacing:
		0.09em;
}


.ssi-results-snapshot__header h2 {
	margin:
		10px
		0
		0;

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

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

	line-height:
		1;

	letter-spacing:
		-0.055em;
}


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

	-webkit-background-clip:
		text;

	background-clip:
		text;

	color:
		transparent;
}


.ssi-results-snapshot__header p {
	margin:
		0;

	color:
		#75849a;

	font-size:
		0.72rem;

	line-height:
		1.8;
}


.ssi-results-snapshot__grid {
	display:
		grid;

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

	gap:
		13px;
}


/* --------------------------------------------------------------------------
   Mini result cards
   -------------------------------------------------------------------------- */

.ssi-results-mini-card {
	position:
		relative;

	overflow:
		hidden;

	min-height:
		205px;

	padding:
		20px;

	border:
		1px solid
		#dfe7f0;

	border-radius:
		21px;

	background:
		linear-gradient(
			145deg,
			#eef4ff,
			#dce9ff
		);

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


.ssi-results-mini-card--purple {
	background:
		linear-gradient(
			145deg,
			#f2efff,
			#e6e0ff
		);
}


.ssi-results-mini-card--gold {
	background:
		linear-gradient(
			145deg,
			#fff7e6,
			#ffebbf
		);
}


.ssi-results-mini-card--teal {
	background:
		linear-gradient(
			145deg,
			#edf9f8,
			#d9efec
		);
}


.ssi-results-mini-card--peach {
	background:
		linear-gradient(
			145deg,
			#fff1eb,
			#ffe2d6
		);
}


.ssi-results-mini-card:hover {
	transform:
		translateY(-6px)
		scale(1.015);

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


.ssi-results-mini-card__top {
	display:
		flex;

	justify-content:
		space-between;

	align-items:
		center;
}


.ssi-results-mini-card__top span {
	padding:
		5px
		9px;

	border-radius:
		999px;

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

	color:
		#2457d6;

	font-size:
		0.46rem;

	font-weight:
		800;
}


.ssi-results-mini-card__top small {
	color:
		#95a2b1;

	font-size:
		0.50rem;

	font-weight:
		800;
}


.ssi-results-mini-card__value {
	margin-top:
		26px;
}


.ssi-results-mini-card__value small {
	display:
		block;

	color:
		#8c9bab;

	font-size:
		0.46rem;

	font-weight:
		800;

	text-transform:
		uppercase;
}


.ssi-results-mini-card__value strong {
	display:
		block;

	margin-top:
		3px;

	color:
		#0b1f3a;

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

	font-size:
		2rem;

	line-height:
		1;

	letter-spacing:
		-0.04em;
}


.ssi-results-mini-card__student {
	position:
		absolute;

	left:
		20px;

	right:
		20px;

	bottom:
		17px;

	display:
		flex;

	flex-direction:
		column;
}


.ssi-results-mini-card__student strong {
	color:
		#0b1f3a;

	font-size:
		0.67rem;

	font-weight:
		800;
}


.ssi-results-mini-card__student span {
	margin-top:
		2px;

	color:
		#75849a;

	font-size:
		0.48rem;
}


/* ==========================================================================
   STATS
   Kept for compatibility, section currently removed from HTML.
   ========================================================================== */

.ssi-results-stats {
	padding:
		72px
		0;

	background:
		#f7f9fc;
}


.ssi-results-stats__box {
	display:
		grid;

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

	border:
		1px solid
		#dfe7f0;

	border-radius:
		22px;

	overflow:
		hidden;

	background:
		#ffffff;
}


.ssi-results-stat {
	padding:
		28px;

	text-align:
		center;

	border-right:
		1px solid
		#e2e9f0;
}


.ssi-results-stat:last-child {
	border-right:
		none;
}


.ssi-results-stat strong {
	display:
		block;

	color:
		#0b1f3a;

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

	font-size:
		1.9rem;

	font-weight:
		800;
}


.ssi-results-stat span {
	display:
		block;

	margin-top:
		4px;

	color:
		#7a899a;

	font-size:
		0.51rem;

	font-weight:
		700;
}


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

.ssi-results-final-cta {
	position:
		relative;

	overflow:
		hidden;

	padding:
		95px
		0
		100px;

	background:
		radial-gradient(
			circle at 78% 20%,
			rgba(
				59,
				130,
				246,
				0.16
			),
			transparent 34%
		),
		radial-gradient(
			circle at 18% 85%,
			rgba(
				220,
				162,
				56,
				0.08
			),
			transparent 30%
		),
		linear-gradient(
			145deg,
			#06182e 0%,
			#0b2342 52%,
			#153963 100%
		);

	color:
		#ffffff;

	text-align:
		center;
}


.ssi-results-final-cta::before {
	content:
		"";

	position:
		absolute;

	width:
		560px;

	height:
		560px;

	right:
		-180px;

	top:
		-280px;

	border-radius:
		50%;

	background:
		radial-gradient(
			circle,
			rgba(
				76,
				135,
				255,
				0.18
			),
			transparent 70%
		);

	filter:
		blur(18px);

	pointer-events:
		none;
}


.ssi-results-final-cta::after {
	content:
		"";

	position:
		absolute;

	width:
		420px;

	height:
		420px;

	left:
		-180px;

	bottom:
		-250px;

	border-radius:
		50%;

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

	filter:
		blur(22px);

	pointer-events:
		none;
}


.ssi-results-final-cta__glow {
	position:
		absolute;

	width:
		100%;

	height:
		100%;

	inset:
		0;

	background:
		linear-gradient(
			90deg,
			transparent 0%,
			rgba(
				255,
				255,
				255,
				0.015
			) 50%,
			transparent 100%
		);

	pointer-events:
		none;
}


.ssi-results-final-cta__content {
	position:
		relative;

	z-index:
		3;

	max-width:
		920px;

	margin:
		0 auto;

	text-align:
		center;
}


.ssi-results-final-cta__content > span {
	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	margin-bottom:
		17px;

	color:
		#f4c766;

	font-size:
		0.62rem;

	font-weight:
		800;

	letter-spacing:
		0.10em;

	text-transform:
		uppercase;
}


.ssi-results-final-cta__content h2 {
	margin:
		0 auto
		18px;

	max-width:
		860px;

	color:
		#ffffff;

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

	font-size:
		clamp(
			2.8rem,
			5vw,
			4.7rem
		);

	font-weight:
		800;

	line-height:
		1.02;

	letter-spacing:
		-0.060em;
}


.ssi-results-final-cta__content h2 strong {
	display:
		inline;

	color:
		#f4c766;

	background:
		none;

	-webkit-text-fill-color:
		#f4c766;
}


.ssi-results-final-cta__content p {
	max-width:
		650px;

	margin:
		0 auto
		32px;

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

	font-size:
		0.78rem;

	line-height:
		1.85;
}


.ssi-results-final-cta__actions {
	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	flex-wrap:
		wrap;

	gap:
		12px;
}


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

	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		9px;

	padding:
		0
		22px;

	border-radius:
		999px;

	font-size:
		0.65rem;

	font-weight:
		800;

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


.ssi-results-final-cta__primary {
	background:
		linear-gradient(
			135deg,
			#f7c44e,
			#e8a92f
		);

	color:
		#0b1f3a;

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


.ssi-results-final-cta__secondary {
	border:
		1px solid
		rgba(
			255,
			255,
			255,
			0.20
		);

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

	color:
		#ffffff;

	backdrop-filter:
		blur(8px);
}


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


.ssi-results-final-cta__primary:hover {
	box-shadow:
		0
		18px
		35px
		rgba(
			220,
			162,
			56,
			0.25
		);
}


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

@keyframes ssiOrbitRotate {

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

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


@keyframes ssiOrbitRotateReverse {

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

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


@keyframes ssiBubbleFloat {

	from {
		margin-top:
			-3px;
	}

	to {
		margin-top:
			4px;
	}
}


@keyframes ssiBubblePulse {

	0% {
		transform:
			scale(
				0.94
			);

		opacity:
			0.42;
	}

	70% {
		transform:
			scale(
				1.10
			);

		opacity:
			0;
	}

	100% {
		transform:
			scale(
				1.10
			);

		opacity:
			0;
	}
}


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

@media (max-width: 900px) {

	.ssi-results-hero {
		padding:
			80px
			0
			70px;
	}


	.ssi-results-hero h1 {
		max-width:
			850px;

		font-size:
			clamp(
				3rem,
				7vw,
				5rem
			);
	}


	.ssi-results-orbit {
		width:
			min(
				680px,
				100%
			);

		height:
			570px;

		--orbit-size:
			500px;
	}


	.ssi-results-orbit__ring--two {
		width:
			380px;

		height:
			380px;
	}


	.ssi-results-orbit__center {
		width:
			180px;

		height:
			180px;
	}


	.ssi-results-orbit__center-core {
		width:
			115px;

		height:
			115px;
	}


	.ssi-result-bubble {
		width:
			86px;

		height:
			86px;
	}


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


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

@media (max-width: 600px) {

	.ssi-results-hero {
		padding:
			68px
			0
			58px;
	}


	.ssi-results-hero h1 {
	max-width: 100%;
	font-size: 3rem;
	line-height: 1.02;
}


	.ssi-results-hero h1 span {
		width:
			auto;

		max-width:
			100%;

		white-space:
			normal;
	}


	.ssi-results-hero p {
		font-size:
			0.74rem;
	}


	.ssi-results-orbit-section {
		padding:
			72px
			0
			78px;
	}


	.ssi-results-orbit {
		width:
			100%;

		height:
			470px;

		--orbit-size:
			350px;
	}


	.ssi-results-orbit__ring--two {
		width:
			265px;

		height:
			265px;
	}


	.ssi-results-orbit__center {
		width:
			142px;

		height:
			142px;
	}


	.ssi-results-orbit__center::before {
		inset:
			10px;
	}


	.ssi-results-orbit__center-core {
		width:
			104px;

		height:
			104px;
	}


	.ssi-results-orbit__center-core strong {
		font-size:
			0.80rem;
	}


	.ssi-results-orbit__center-core small {
		font-size:
			0.36rem;
	}


	.ssi-results-orbit__center-info {
		bottom:
			-52px;
	}


	.ssi-result-bubble {
		width:
			68px;

		height:
			68px;
	}


	.ssi-result-bubble__status {
		width:
			11px;

		height:
			11px;

		right:
			0;

		bottom:
			2px;
	}


	.ssi-result-bubble__info {
		min-width:
			126px;

		padding:
			8px
			10px;
	}


	.ssi-result-bubble__info strong {
		font-size:
			0.55rem;
	}


	.ssi-result-bubble__info small {
		font-size:
			0.40rem;
	}


	.ssi-result-bubble--top {
		left:
			50%;

		top:
			8%;
	}


	.ssi-result-bubble--right-top {
		left:
			86%;

		top:
			30%;
	}


	.ssi-result-bubble--right-bottom {
		left:
			82%;

		top:
			70%;
	}


	.ssi-result-bubble--bottom {
		left:
			50%;

		top:
			89%;
	}


	.ssi-result-bubble--left-bottom {
		left:
			18%;

		top:
			70%;
	}


	.ssi-result-bubble--left-top {
		left:
			14%;

		top:
			30%;
	}


	.ssi-results-orbit__hint {
		display:
			none;
	}


	.ssi-results-snapshot {
		padding:
			72px
			0;
	}


	.ssi-results-snapshot__header {
		grid-template-columns:
			1fr;

		gap:
			18px;
	}


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


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


	.ssi-results-final-cta__content h2 {
		font-size:
			2.65rem;

		letter-spacing:
			-0.055em;
	}


	.ssi-results-final-cta__content p {
		font-size:
			0.72rem;
	}


	.ssi-results-final-cta__actions {
		gap:
			10px;
	}


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

		max-width:
			260px;
	}


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


	.ssi-results-stat {
		border-right:
			1px solid
			#e2e9f0;

		border-bottom:
			1px solid
			#e2e9f0;
	}


	.ssi-results-stat:nth-child(2n) {
		border-right:
			none;
	}


	.ssi-results-stat:nth-last-child(-n + 2) {
		border-bottom:
			none;
	}
}


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

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

	.ssi-results-hero__orb,
	.ssi-results-orbit__ring,
	.ssi-result-bubble,
	.ssi-result-bubble__pulse {
		animation:
			none !important;
	}
}
/* ========================================================================
   RESULTS PAGE — FALLBACK BUBBLE (SSI)
   Darker premium bubble while keeping fallback text clearly visible.
   Applies only to bubbles without a student image.
   ======================================================================== */

.ssi-results-orbit .ssi-result-bubble__photo:has(.ssi-result-bubble__fallback) {
	background:
		linear-gradient(
			145deg,
			#d8e6f8 0%,
			#b9cce5 52%,
			#94acc9 100%
		) !important;

	border-color:
		rgba(255, 255, 255, 0.98) !important;

	box-shadow:
		0 14px 34px rgba(11, 31, 58, 0.18),
		0 0 0 1px rgba(11, 31, 58, 0.08) !important;
}

.ssi-results-orbit .ssi-result-bubble__fallback {
	color: #0b1f3a !important;
	font-size: 1.05rem !important;
	font-weight: 800 !important;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.ssi-results-orbit .ssi-result-bubble:hover .ssi-result-bubble__photo:has(.ssi-result-bubble__fallback),
.ssi-results-orbit .ssi-result-bubble:focus-visible .ssi-result-bubble__photo:has(.ssi-result-bubble__fallback),
.ssi-results-orbit .ssi-result-bubble.is-active .ssi-result-bubble__photo:has(.ssi-result-bubble__fallback) {
	background:
		linear-gradient(
			145deg,
			#234d7d 0%,
			#16385f 52%,
			#0b1f3a 100%
		) !important;

	border-color: #f0b83f !important;

	box-shadow:
		0 20px 44px rgba(11, 31, 58, 0.24),
		0 0 0 6px rgba(240, 184, 63, 0.10) !important;
}

.ssi-results-orbit .ssi-result-bubble:hover .ssi-result-bubble__fallback,
.ssi-results-orbit .ssi-result-bubble:focus-visible .ssi-result-bubble__fallback,
.ssi-results-orbit .ssi-result-bubble.is-active .ssi-result-bubble__fallback {
	color: #ffffff !important;
	text-shadow: none;
}