/* ==========================================================================
   Pie
   ========================================================================== */

.footer { background: var(--ink); color: #C7CAD2; position: relative; overflow: hidden; }
.footer::before {
	content: "";
	position: absolute;
	left: -10%; top: -40%;
	width: 60%; height: 90%;
	background: radial-gradient(closest-side, rgba(30, 51, 88, .55), transparent);
	pointer-events: none;
}
.footer .wrap { position: relative; }
.footer .ftop { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 40px; padding: 80px 0 56px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer .flogo { display: inline-block; color: #fff; }
.footer .flogo .logo-svg { height: 48px; width: auto; }
.footer .fbrand p { font-size: 14px; color: #9298A4; margin: 22px 0 0; max-width: 32ch; line-height: 1.65; }
.footer h5 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 0 0 20px; font-weight: 600; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer ul a { font-size: 14.5px; color: #9EA3AE; transition: color var(--t); }
.footer ul a:hover { color: #fff; }
.footer .age {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid rgba(218, 191, 137, .5);
	border-radius: var(--r-pill);
	color: var(--gold);
	font-size: 12px;
	font-weight: 600;
	padding: 7px 14px;
	margin-top: 20px;
}
.footer .fbot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 0 28px; }
.footer .fbot .legal { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; }
.footer .fbot .legal a { color: #C7CAD2; transition: color var(--t); }
.footer .fbot .legal a:hover { color: #fff; }
.footer .pay { display: flex; gap: 8px; flex-wrap: wrap; }
.footer .pay span { border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px; padding: 5px 10px; font-size: 10.5px; letter-spacing: .06em; font-weight: 600; color: #9EA3AE; }
.footer .resp { font-size: 12.5px; color: #858B97; padding: 22px 0 44px; text-align: center; border-top: 1px solid rgba(255, 255, 255, .07); }

@media (max-width: 1000px) {
	.footer .ftop { grid-template-columns: 1fr 1fr 1fr; }
	.footer .fbrand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.footer .ftop { grid-template-columns: 1fr 1fr; gap: 32px 20px; padding: 56px 0 36px; }
}