/* ==========================================================================
   MX1 site footer: navy surface, blue glow, chamfered MX1 cuts.
   ========================================================================== */
.mx1ft {
	--ft-blue: #4672f9;
	--ft-blue-2: #365de3;
	--ft-glow: #5f98fd;
	--ft-navy: #080e38;
	--ft-paper: #f2f4ff;
	--ft-mute: rgba(242, 244, 255, 0.68);
	--ft-line: rgba(242, 244, 255, 0.1);
	--ft-cut: 10px;
	--ft-chamfer: polygon(var(--ft-cut) 0, 100% 0, 100% calc(100% - var(--ft-cut)), calc(100% - var(--ft-cut)) 100%, 0 100%, 0 var(--ft-cut));
	--ft-font: "MX1 Readex", "Readex Pro", Tajawal, system-ui, sans-serif;
	--ft-gutter: clamp(1rem, 0.4rem + 3vw, 3.5rem);

	position: relative; isolation: isolate; overflow: hidden;
	direction: rtl; text-align: start;
	background: var(--ft-navy); color: var(--ft-paper);
	font-family: var(--ft-font); font-size: 16px; line-height: 1.7;
	border-top: 1px solid var(--ft-line);
}
.mx1ft, .mx1ft :is(h2, p, span, div, a, li, small, bdi) { font-family: var(--ft-font) !important; }
.mx1ft *, .mx1ft *::before, .mx1ft *::after { box-sizing: border-box; }
.mx1ft :where(h2, p, ul, li) { margin: 0; padding: 0; letter-spacing: normal; text-transform: none; }
.mx1ft ul { list-style: none; }
.mx1ft a { color: inherit; text-decoration: none; }
.mx1ft :focus-visible { outline: 2px solid var(--ft-glow); outline-offset: 3px; }

/* Background: soft blue glow, a faint grid and the brand wordmark. */
.mx1ft__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(60% 80% at 100% 0%, rgba(70, 114, 249, 0.22), transparent 60%),
		radial-gradient(45% 70% at 0% 100%, rgba(95, 152, 253, 0.14), transparent 65%),
		linear-gradient(180deg, #0b1241 0%, var(--ft-navy) 100%);
}
.mx1ft__bg::after { content: ""; position: absolute; inset: 0;
	background-image: linear-gradient(var(--ft-line) 1px, transparent 1px), linear-gradient(90deg, var(--ft-line) 1px, transparent 1px);
	background-size: 64px 64px; opacity: 0.35;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.mx1ft__wrap { position: relative; max-width: 1440px; margin-inline: auto; padding: clamp(3rem, 6vw, 5rem) var(--ft-gutter) 0; }

.mx1ft__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }

/* Brand column */
.mx1ft__logo { display: inline-block; }
.mx1ft__logo img { display: block; width: 150px; height: auto; max-width: 100%; }
.mx1ft__about { max-width: 30em; margin-block-start: 1.25rem !important; color: var(--ft-mute); font-size: 0.98rem; line-height: 1.9; }
.mx1ft__social { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block-start: 1.75rem !important; }
.mx1ft__social a { display: grid; place-items: center; width: 44px; height: 44px; background: rgba(242, 244, 255, 0.06); box-shadow: inset 0 0 0 1px var(--ft-line); clip-path: var(--ft-chamfer); color: var(--ft-paper); transition: background 0.3s, color 0.3s, transform 0.3s; }
.mx1ft__social svg { width: 19px; height: 19px; fill: currentColor; }
.mx1ft__social a:hover, .mx1ft__social a:focus-visible { background: linear-gradient(120deg, var(--ft-blue-2), var(--ft-blue)); color: #fff; transform: translateY(-3px); }

/* Titles */
.mx1ft .mx1ft__title { position: relative; margin-block-end: 1.4rem !important; padding-block-end: 0.85rem; font-size: 1.05rem; font-weight: 700; line-height: 1.4; color: #fff; }
.mx1ft__title::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 36px; height: 3px; background: linear-gradient(90deg, var(--ft-glow), var(--ft-blue)); }

/* Links */
.mx1ft__links { display: grid; gap: 0.35rem; }
.mx1ft__links a { display: inline-flex; align-items: center; gap: 0.55rem; padding-block: 0.3rem; color: var(--ft-mute); font-size: 0.98rem; transition: color 0.25s, gap 0.25s; }
.mx1ft__links a::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--ft-blue); clip-path: polygon(2px 0, 100% 0, 100% calc(100% - 2px), calc(100% - 2px) 100%, 0 100%, 0 2px); opacity: 0.6; transition: opacity 0.25s; }
.mx1ft__links a:hover, .mx1ft__links a:focus-visible { color: #fff; gap: 0.8rem; }
.mx1ft__links a:hover::before { opacity: 1; }

/* Contact */
.mx1ft__contact { display: grid; gap: 0.85rem; }
.mx1ft__contact a { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1rem; background: rgba(242, 244, 255, 0.04); box-shadow: inset 0 0 0 1px var(--ft-line); --ft-cut: 12px; clip-path: var(--ft-chamfer); transition: background 0.3s; }
.mx1ft__contact a:hover, .mx1ft__contact a:focus-visible { background: rgba(70, 114, 249, 0.14); }
.mx1ft__ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; background: linear-gradient(120deg, var(--ft-blue-2), var(--ft-blue)); color: #fff; --ft-cut: 8px; clip-path: var(--ft-chamfer); }
.mx1ft__ct { display: grid; min-width: 0; }
.mx1ft__ct small { font-size: 0.8rem; color: var(--ft-mute); line-height: 1.4; }
.mx1ft__ct bdi { font-size: 1rem; font-weight: 600; color: #fff; overflow-wrap: anywhere; text-align: right; }

/* Bottom bar + wordmark */
.mx1ft__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-block-start: clamp(2.5rem, 5vw, 4rem); padding-block: 1.25rem; border-top: 1px solid var(--ft-line); font-size: 0.88rem; color: var(--ft-mute); }
.mx1ft__mark { margin-block-end: -0.18em; font-family: var(--ft-font) !important; font-weight: 800; font-size: clamp(2rem, 10.2vw, 10rem); line-height: 1; letter-spacing: 0; text-align: center; direction: ltr; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(95, 152, 253, 0.18); user-select: none; }

/* Responsive */
@media (max-width: 1024px) {
	.mx1ft__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mx1ft__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.mx1ft__grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
	.mx1ft__links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
	.mx1ft__bar { justify-content: center; text-align: center; }
	.mx1ft__social a { width: 46px; height: 46px; }
	.mx1ft__logo img { width: 120px; }
	.mx1ft__about { font-size: 0.95rem; }
	/* Clear the floating WhatsApp bubble and scroll-to-top button. */
	.mx1ft__wrap { padding-block-end: 5.5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.mx1ft * { transition: none !important; }
}