/* ==========================================================================
   SSI FOOTER
   ========================================================================== */

.ssi-footer {
	position:
		relative;

	overflow:
		hidden;

	padding:
		95px
		0
		28px;

	background:
		linear-gradient(
			145deg,
			#040d1a 0%,
			#07172b 52%,
			#0b2441 100%
		);

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

.ssi-footer__background {
	position:
		absolute;

	inset:
		0;

	z-index:
		0;

	pointer-events:
		none;
}

.ssi-footer__grid {
	position:
		absolute;

	inset:
		0;

	opacity:
		0.24;

	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:
		48px 48px;

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

.ssi-footer__orb {
	position:
		absolute;

	border-radius:
		50%;

	filter:
		blur(8px);
}

.ssi-footer__orb--one {
	width:
		480px;

	height:
		480px;

	top:
		-290px;

	right:
		-180px;

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

.ssi-footer__orb--two {
	width:
		420px;

	height:
		420px;

	left:
		-190px;

	bottom:
		-270px;

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

.ssi-footer__container {
	position:
		relative;

	z-index:
		2;
}


/* ==========================================================================
   MAIN FOOTER
   ========================================================================== */

.ssi-footer__main {
	display:
		grid;

	grid-template-columns:
		minmax(
			280px,
			1.35fr
		)
		repeat(
			2,
			minmax(
				130px,
				0.65fr
			)
		)
		minmax(
			220px,
			1fr
		);

	gap:
		55px;
}


/* ==========================================================================
   BRAND
   ========================================================================== */

.ssi-footer__brand {
	max-width:
		430px;
}

.ssi-footer__logo {
	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	width:
		64px;

	height:
		64px;

	margin-bottom:
		22px;

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

	border-radius:
		17px;

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

	box-shadow:
		0 14px
		35px
		rgba(
			0,
			0,
			0,
			0.14
		);

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

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

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

	border-color:
		rgba(
			255,
			255,
			255,
			0.20
		);
}

.ssi-footer__logo img {
	width:
		48px;

	height:
		48px;

	object-fit:
		contain;
}

.ssi-footer__brand h2 {
	margin:
		0
		0
		16px;

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

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

	font-size:
		clamp(
			1.8rem,
			3vw,
			2.65rem
		);

	font-weight:
		800;

	line-height:
		1.02;

	letter-spacing:
		-0.05em;
}

.ssi-footer__brand h2 span {
	background:
		linear-gradient(
			135deg,
			#3b82f6,
			#f4c766
		);

	-webkit-background-clip:
		text;

	background-clip:
		text;

	color:
		transparent;
}

.ssi-footer__brand p {
	max-width:
		420px;

	margin:
		0
		0
		24px;

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

	font-size:
		0.76rem;

	line-height:
		1.8;
}

.ssi-footer__brand-cta {
	display:
		inline-flex;

	align-items:
		center;

	gap:
		10px;

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

	font-size:
		0.72rem;

	font-weight:
		800;

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

.ssi-footer__brand-cta:hover {
	gap:
		14px;

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


/* ==========================================================================
   FOOTER COLUMNS
   ========================================================================== */

.ssi-footer__column-title {
	display:
		block;

	margin-bottom:
		22px;

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

	font-size:
		0.62rem;

	font-weight:
		800;

	letter-spacing:
		0.10em;

	text-transform:
		uppercase;
}

.ssi-footer__links {
	display:
		grid;

	gap:
		12px;
}

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

	align-items:
		center;

	width:
		fit-content;

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

	font-size:
		0.73rem;

	font-weight:
		600;

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

.ssi-footer__links a:hover {
	transform:
		translateX(4px);

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


/* ==========================================================================
   CONTACT
   ========================================================================== */

.ssi-footer__contact-list {
	display:
		grid;

	gap:
		10px;
}

.ssi-footer__contact-item {
	display:
		flex;

	align-items:
		center;

	gap:
		10px;

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

.ssi-footer__contact-icon {
	width:
		34px;

	height:
		34px;

	display:
		grid;

	place-items:
		center;

	flex:
		0 0 auto;

	border-radius:
		10px;

	background:
		rgba(
			59,
			130,
			246,
			0.11
		);

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

	font-size:
		0.67rem;
}

.ssi-footer__contact-item small {
	display:
		block;

	margin-bottom:
		2px;

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

	font-size:
		0.53rem;

	font-weight:
		700;
}

.ssi-footer__contact-item strong {
	display:
		block;

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

	font-size:
		0.65rem;

	font-weight:
		700;

	line-height:
		1.4;
}

.ssi-footer__contact-item:hover strong {
	color:
		var(--ssi-color-accent-light);
}

.ssi-footer__whatsapp {
	display:
		flex;

	align-items:
		center;

	justify-content:
		space-between;

	gap:
		10px;

	margin-top:
		17px;

	min-height:
		45px;

	padding:
		0
		15px;

	border-radius:
		999px;

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

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

	font-size:
		0.67rem;

	font-weight:
		800;

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

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

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


/* ==========================================================================
   DIVIDER
   ========================================================================== */

.ssi-footer__divider {
	width:
		100%;

	height:
		1px;

	margin:
		65px
		0
		22px;

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


/* ==========================================================================
   META
   ========================================================================== */

.ssi-footer__meta {
	display:
		flex;

	align-items:
		center;

	justify-content:
		space-between;

	gap:
		20px;
}

.ssi-footer__copyright {
	display:
		flex;

	align-items:
		center;

	gap:
		5px;

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

	font-size:
		0.60rem;

	font-weight:
		600;
}

.ssi-footer__meta-links {
	display:
		flex;

	align-items:
		center;

	gap:
		20px;
}

.ssi-footer__meta-links a {
	color:
		rgba(
			255,
			255,
			255,
			0.40
		);

	font-size:
		0.60rem;

	font-weight:
		600;

	transition:
		color 200ms ease;
}

.ssi-footer__meta-links a:hover {
	color:
		var(--ssi-color-white);
}


/* ==========================================================================
   CREATOR BRANDING
   ========================================================================== */

.ssi-footer__creator {
	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		5px;

	margin-top:
		25px;

	padding-top:
		20px;

	border-top:
		1px solid
		rgba(
			255,
			255,
			255,
			0.055
		);

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

	font-size:
		0.57rem;

	font-weight:
		600;

	text-align:
		center;
}

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

	align-items:
		center;

	gap:
		5px;

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

	font-weight:
		800;

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

.ssi-footer__creator a:hover {
	gap:
		8px;

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


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

@media (max-width: 1050px) {

	.ssi-footer__main {
		grid-template-columns:
			1.3fr
			1fr
			1fr;

		gap:
			45px;
	}

	.ssi-footer__column--contact {
		grid-column:
			1 / -1;
	}
}

@media (max-width: 750px) {

	.ssi-footer {
		padding:
			75px
			0
			25px;
	}

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

		gap:
			38px
			28px;
	}

	.ssi-footer__brand {
		grid-column:
			1 / -1;
	}

	.ssi-footer__column--contact {
		grid-column:
			1 / -1;
	}

	.ssi-footer__divider {
		margin-top:
			48px;
	}

	.ssi-footer__meta {
		flex-direction:
			column;

		align-items:
			flex-start;
	}

	.ssi-footer__meta-links {
		flex-wrap:
			wrap;
	}
}

@media (max-width: 500px) {

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

	.ssi-footer__brand h2 {
		font-size:
			2rem;
	}

	.ssi-footer__copyright {
		flex-direction:
			column;

		align-items:
			flex-start;
	}

	.ssi-footer__meta-links {
		gap:
			12px;
	}

	.ssi-footer__creator {
		line-height:
			1.5;
	}
}


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

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

	.ssi-footer__logo,
	.ssi-footer__brand-cta,
	.ssi-footer__links a,
	.ssi-footer__whatsapp,
	.ssi-footer__creator a {
		transition:
			none !important;
	}
}