/* MetOrbix — main stylesheet. Tokens → base → layout → components. */

/* ---------- 1. Tokens ---------- */
:root {
	--mx-canvas: #08090B;
	--mx-bg-secondary: #0E1013;
	--mx-surface: #14171B;
	--mx-surface-elevated: #1A1E23;
	--mx-border: #262B32;
	--mx-text: #F5F7FA;
	--mx-text-muted: #9BA3AE; /* ~7.9:1 on canvas (AA/AAA) */
	--mx-accent: #f16f58;
	--mx-accent-ai: #64E6FF;
	--mx-on-accent: #08090B;

	--mx-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mx-font-display: "Syne", "Manrope", system-ui, sans-serif;
	--mx-font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;

	--mx-fs-xs: 0.75rem;
	--mx-fs-s: 0.875rem;
	--mx-fs-m: 1rem;
	--mx-fs-l: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	--mx-fs-d-l: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
	--mx-fs-d-xl: clamp(2.5rem, 1.6rem + 4vw, 5.5rem);
	--mx-fs-d-hero: clamp(2.75rem, 1.5rem + 6vw, 7.5rem);

	--mx-space-1: 0.25rem;
	--mx-space-2: 0.5rem;
	--mx-space-3: 0.75rem;
	--mx-space-4: 1rem;
	--mx-space-6: 1.5rem;
	--mx-space-8: 2rem;
	--mx-space-12: 3rem;
	--mx-space-16: 4rem;
	--mx-space-section: clamp(4.5rem, 3rem + 7vw, 10rem);

	--mx-radius-s: 6px;
	--mx-radius-m: 12px;
	--mx-radius-l: 20px;
	--mx-radius-pill: 999px;

	--mx-shadow-elev: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
	--mx-glow-accent: 0 0 0 1px rgba(241, 111, 88, 0.35), 0 10px 40px -12px rgba(241, 111, 88, 0.35);

	--mx-container: 1320px;
	--mx-gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
	--mx-measure: 64ch;
	--mx-header-h: 72px;

	--mx-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
	--mx-dur-fast: 160ms;
	--mx-dur: 320ms;
	--mx-dur-slow: 700ms;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--mx-header-h) + 1rem); }
body {
	margin: 0;
	background: var(--mx-canvas);
	color: var(--mx-text);
	font-family: var(--mx-font-body);
	font-size: var(--mx-fs-m);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	overflow-wrap: break-word;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: color-mix(in srgb, var(--mx-accent) 60%, transparent); text-underline-offset: 0.2em; }
a:hover { color: var(--mx-accent); }
:focus-visible { outline: 2px solid var(--mx-accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--mx-accent); color: var(--mx-on-accent); }
h1, h2, h3, h4 { margin: 0 0 var(--mx-space-4); line-height: 1.1; font-weight: 700; }
p { margin: 0 0 var(--mx-space-4); }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mx-skip { position: absolute; left: 1rem; top: -100px; z-index: 1000; padding: 0.75rem 1rem; background: var(--mx-accent); color: var(--mx-on-accent); font-weight: 700; border-radius: var(--mx-radius-s); }
.mx-skip:focus { top: 1rem; }
.mx-main:focus { outline: none; }

/* ---------- 3. Layout ---------- */
.mx-container { width: 100%; max-width: var(--mx-container); margin-inline: auto; padding-inline: var(--mx-gutter); }
.mx-section { padding-block: var(--mx-space-section) 0; }
.mx-section--tight { padding-block: var(--mx-space-12); }
.mx-section__head { display: grid; gap: var(--mx-space-4); margin-bottom: var(--mx-space-12); max-width: 22ch; max-width: min(100%, 900px); }
.mx-split { display: grid; gap: var(--mx-space-12); align-items: center; }
@media (min-width: 900px) { .mx-split { grid-template-columns: 1.1fr 0.9fr; } }

/* ---------- 4. Typography primitives ---------- */
.mx-display { font-family: var(--mx-font-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; }
.mx-display em { font-style: normal; color: var(--mx-accent); }
.mx-display--l { font-size: var(--mx-fs-d-l); }
.mx-display--xl { font-size: var(--mx-fs-d-xl); }
.mx-display--hero { font-size: var(--mx-fs-d-hero); letter-spacing: -0.045em; line-height: 0.95; }
.mx-lead { font-size: var(--mx-fs-l); color: var(--mx-text-muted); max-width: 52ch; }
.mx-eyebrow { display: inline-flex; gap: 0.6em; align-items: center; margin: 0 0 var(--mx-space-4); font-family: var(--mx-font-mono); font-size: var(--mx-fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mx-text-muted); }
.mx-eyebrow__index { color: var(--mx-accent); }
.mx-eyebrow__sep { opacity: 0.5; }
.mx-meta { font-size: var(--mx-fs-s); color: var(--mx-text-muted); }
.mx-prose { max-width: calc(var(--mx-measure) + 2 * var(--mx-gutter)); padding-bottom: var(--mx-space-16); }
.mx-prose h2 { font-family: var(--mx-font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-top: var(--mx-space-12); }
.mx-prose a { color: var(--mx-accent); }

/* ---------- 5. Buttons ---------- */
.mx-actions { display: flex; flex-wrap: wrap; gap: var(--mx-space-3); margin-top: var(--mx-space-8); }
.mx-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
	min-height: 48px; padding: 0.75rem 1.4rem; border-radius: var(--mx-radius-pill);
	font-weight: 600; font-size: var(--mx-fs-s); letter-spacing: 0.01em; text-decoration: none;
	border: 1px solid transparent; cursor: pointer;
	transition: transform var(--mx-dur-fast) var(--mx-ease), background-color var(--mx-dur) var(--mx-ease), color var(--mx-dur) var(--mx-ease), border-color var(--mx-dur) var(--mx-ease), box-shadow var(--mx-dur) var(--mx-ease);
}
.mx-btn:active { transform: translateY(1px); }
.mx-btn--primary { background: var(--mx-accent); color: var(--mx-on-accent); }
.mx-btn--primary:hover { color: var(--mx-on-accent); box-shadow: var(--mx-glow-accent); }
.mx-btn--ghost { border-color: var(--mx-border); color: var(--mx-text); }
.mx-btn--ghost:hover { border-color: var(--mx-text); color: var(--mx-text); }
.mx-btn--ai { border-color: color-mix(in srgb, var(--mx-accent-ai) 50%, transparent); color: var(--mx-accent-ai); }
.mx-btn--ai:hover { background: var(--mx-accent-ai); color: var(--mx-on-accent); }

/* ---------- 6. Header ---------- */
.mx-header {
	position: fixed; inset: 0 0 auto; z-index: 100; height: var(--mx-header-h);
	background: transparent; border-bottom: 1px solid transparent;
	transition: background-color var(--mx-dur) var(--mx-ease), border-color var(--mx-dur) var(--mx-ease), backdrop-filter var(--mx-dur);
}
.admin-bar .mx-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .mx-header { top: 46px; } }
.mx-header.is-scrolled, .mx-header.is-open {
	background: color-mix(in srgb, var(--mx-canvas) 86%, transparent);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border-bottom-color: var(--mx-border);
}
.mx-header__inner { height: 100%; display: flex; align-items: center; gap: var(--mx-space-8); }
.mx-main { padding-top: var(--mx-header-h); }
.mx-is-home .mx-main { padding-top: 0; }

.mx-wordmark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--mx-text); margin-right: auto; }
.mx-wordmark__text { font-family: var(--mx-font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; }
.mx-wordmark__text span { color: var(--mx-text-muted); }
.mx-wordmark:hover { color: var(--mx-text); }
.mx-wordmark:hover .mx-wordmark__text span { color: var(--mx-accent); }

.mx-nav { display: none; }
.mx-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--mx-space-2); }
.mx-nav .mx-nav__list a {
	position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.85rem;
	font-size: var(--mx-fs-s); font-weight: 500; color: var(--mx-text-muted); text-decoration: none;
	transition: color var(--mx-dur-fast);
}
.mx-nav .mx-nav__list a::after {
	content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 8px; height: 1px;
	background: var(--mx-accent); transform: scaleX(0); transform-origin: left;
	transition: transform var(--mx-dur) var(--mx-ease);
}
.mx-nav .mx-nav__list a:hover, .mx-nav .current-menu-item > a { color: var(--mx-text); }
.mx-nav .mx-nav__list a:hover::after, .mx-nav .current-menu-item > a::after { transform: scaleX(1); }
.mx-header__cta { display: none; min-height: 42px; }

.mx-menu-toggle {
	display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
	background: transparent; border: 1px solid var(--mx-border); border-radius: var(--mx-radius-pill); color: var(--mx-text); cursor: pointer;
}
.mx-menu-toggle__bars { position: relative; width: 18px; height: 10px; }
.mx-menu-toggle__bars span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform var(--mx-dur) var(--mx-ease), top var(--mx-dur) var(--mx-ease); }
.mx-menu-toggle__bars span:first-child { top: 0; }
.mx-menu-toggle__bars span:last-child { top: 8.5px; }
.mx-menu-toggle[aria-expanded="true"] .mx-menu-toggle__bars span:first-child { top: 4.25px; transform: rotate(45deg); }
.mx-menu-toggle[aria-expanded="true"] .mx-menu-toggle__bars span:last-child { top: 4.25px; transform: rotate(-45deg); }

.mx-mobile-nav {
	position: fixed; inset: var(--mx-header-h) 0 0; background: var(--mx-canvas);
	padding-block: var(--mx-space-8); overflow-y: auto;
	opacity: 0; transform: translateY(-8px);
	transition: opacity var(--mx-dur) var(--mx-ease), transform var(--mx-dur) var(--mx-ease);
}
.mx-mobile-nav.is-visible { opacity: 1; transform: none; }
.mx-mobile-nav .mx-nav__list { flex-direction: column; gap: 0; }
.mx-mobile-nav .mx-nav__list a {
	display: flex; min-height: 56px; align-items: center; border-bottom: 1px solid var(--mx-border);
	font-family: var(--mx-font-display); font-size: clamp(1.75rem, 1.2rem + 3vw, 2.5rem); font-weight: 700; text-decoration: none;
}
.mx-mobile-nav .current-menu-item > a { color: var(--mx-accent); }
.mx-mobile-nav__cta { margin-top: var(--mx-space-8); width: 100%; }
body.mx-menu-open { overflow: hidden; }

@media (min-width: 1024px) {
	.mx-nav { display: block; }
	.mx-header__cta { display: inline-flex; }
	.mx-menu-toggle, .mx-mobile-nav { display: none !important; }
}

/* ---------- 7. Hero ---------- */
.mx-hero { position: relative; min-height: min(100svh, 980px); display: flex; align-items: center; padding-block: calc(var(--mx-header-h) + var(--mx-space-12)) var(--mx-space-12); isolation: isolate; overflow: hidden; }
.mx-grid-bg {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image: linear-gradient(var(--mx-border) 1px, transparent 1px), linear-gradient(90deg, var(--mx-border) 1px, transparent 1px);
	background-size: 72px 72px; opacity: 0.35;
	mask-image: radial-gradient(ellipse 70% 60% at 65% 40%, #000 20%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 65% 40%, #000 20%, transparent 75%);
}
.mx-hero__inner { display: grid; gap: var(--mx-space-12); align-items: center; }
@media (min-width: 1024px) { .mx-hero__inner { grid-template-columns: 1.35fr 0.65fr; } }
.mx-hero__visual { position: relative; max-width: 440px; justify-self: center; width: 100%; }
.mx-orbit { width: 100%; }
.mx-orbit__ring { fill: none; stroke: var(--mx-border); stroke-width: 1; }
.mx-orbit__ring--dash { stroke-dasharray: 2 6; stroke: color-mix(in srgb, var(--mx-accent-ai) 45%, transparent); }
.mx-orbit__axis { stroke: var(--mx-border); stroke-width: 0.5; }
.mx-orbit__core { fill: var(--mx-accent); }
.mx-orbit__node { fill: var(--mx-accent); }
.mx-orbit__node--ai { fill: var(--mx-accent-ai); }
.mx-orbit__sat { transform-origin: 200px 200px; animation: mx-spin 40s linear infinite; }
.mx-orbit__sat--ai { animation-duration: 26s; animation-direction: reverse; }
@keyframes mx-spin { to { transform: rotate(360deg); } }
.mx-tag { position: absolute; font-family: var(--mx-font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--mx-text-muted); padding: 0.3rem 0.55rem; border: 1px solid var(--mx-border); border-radius: var(--mx-radius-s); background: var(--mx-bg-secondary); }
.mx-tag--a { top: 6%; left: 0; }
.mx-tag--b { bottom: 8%; right: 0; }

/* ---------- 8. Capabilities ---------- */
.mx-capabilities { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mx-border); }
.mx-capability a {
	display: grid; grid-template-columns: 3rem 1fr auto; gap: var(--mx-space-2) var(--mx-space-6); align-items: baseline;
	padding: var(--mx-space-8) 0; border-bottom: 1px solid var(--mx-border); text-decoration: none; color: var(--mx-text);
	transition: padding var(--mx-dur) var(--mx-ease), background-color var(--mx-dur);
}
.mx-capability__index { font-family: var(--mx-font-mono); font-size: var(--mx-fs-xs); color: var(--mx-accent); }
.mx-capability__title { font-family: var(--mx-font-display); font-weight: 700; font-size: clamp(1.5rem, 1rem + 2.2vw, 2.75rem); letter-spacing: -0.02em; }
.mx-capability__desc { grid-column: 2 / 3; color: var(--mx-text-muted); max-width: 48ch; }
.mx-capability__arrow { grid-row: 1; grid-column: 3; font-size: 1.5rem; transition: transform var(--mx-dur) var(--mx-ease), color var(--mx-dur); }
.mx-capability a:hover { color: var(--mx-text); }
.mx-capability a:hover .mx-capability__arrow, .mx-capability a:focus-visible .mx-capability__arrow { transform: translateX(6px); color: var(--mx-accent); }
@media (min-width: 900px) {
	.mx-capability a { grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr) auto; }
	.mx-capability__desc { grid-column: 3; }
	.mx-capability__arrow { grid-column: 4; }
}

/* ---------- 9. Panels, status, AI, timeline, why ---------- */
.mx-panel { background: var(--mx-surface); border: 1px solid var(--mx-border); border-radius: var(--mx-radius-l); padding: var(--mx-space-8); }
.mx-panel--ui { display: grid; gap: var(--mx-space-6); justify-items: start; min-height: 260px; background: linear-gradient(180deg, var(--mx-surface-elevated), var(--mx-surface)); box-shadow: var(--mx-shadow-elev); }
.mx-ui-bar { display: flex; gap: 6px; }
.mx-ui-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--mx-border); }
.mx-status { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mx-font-mono); font-size: var(--mx-fs-xs); letter-spacing: 0.12em; text-transform: uppercase; margin: 0; }
.mx-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mx-text-muted); }
.mx-empty { display: grid; gap: var(--mx-space-4); justify-items: start; color: var(--mx-text-muted); }

.mx-ai { margin-top: var(--mx-space-section); padding-block: var(--mx-space-section); background: radial-gradient(ellipse 60% 70% at 80% 50%, rgba(100, 230, 255, 0.07), transparent 70%), var(--mx-bg-secondary); border-block: 1px solid var(--mx-border); }
.mx-ai .mx-eyebrow__index { color: var(--mx-accent-ai); }
.mx-ai__list { list-style: none; padding: 0; margin: var(--mx-space-6) 0 var(--mx-space-8); display: grid; gap: var(--mx-space-2); }
.mx-ai__list li { padding-left: 1.25rem; position: relative; color: var(--mx-text-muted); }
.mx-ai__list li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 6px; height: 6px; border: 1px solid var(--mx-accent-ai); }
.mx-flow { margin: 0; display: grid; justify-items: center; gap: 0; }
.mx-flow__node { font-family: var(--mx-font-mono); font-size: var(--mx-fs-xs); letter-spacing: 0.14em; padding: 0.8rem 1.4rem; border: 1px solid var(--mx-border); border-radius: var(--mx-radius-m); background: var(--mx-surface); }
.mx-flow__node--ai { border-color: var(--mx-accent-ai); color: var(--mx-accent-ai); }
.mx-flow__line { width: 1px; height: 48px; background: linear-gradient(var(--mx-accent-ai), transparent); background-size: 100% 200%; animation: mx-flow 2.4s linear infinite; }
@keyframes mx-flow { from { background-position: 0 100%; } to { background-position: 0 -100%; } }
.mx-flow__caption { margin-top: var(--mx-space-4); font-size: var(--mx-fs-xs); color: var(--mx-text-muted); }

.mx-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mx-space-8); counter-reset: none; }
.mx-timeline__step { position: relative; padding-top: var(--mx-space-6); border-top: 1px solid var(--mx-border); }
.mx-timeline__step::before { content: ""; position: absolute; top: -1px; left: 0; width: 32px; height: 1px; background: var(--mx-accent); }
.mx-timeline__index { font-family: var(--mx-font-mono); font-size: var(--mx-fs-xs); color: var(--mx-accent); }
.mx-timeline__title { font-family: var(--mx-font-display); font-size: 1.375rem; margin: var(--mx-space-2) 0; }
.mx-timeline__step p { color: var(--mx-text-muted); font-size: var(--mx-fs-s); }
@media (min-width: 900px) { .mx-timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--mx-space-6); } }

.mx-why { margin: 0; display: grid; gap: 1px; background: var(--mx-border); border: 1px solid var(--mx-border); border-radius: var(--mx-radius-l); overflow: hidden; }
.mx-why > div { background: var(--mx-canvas); padding: var(--mx-space-8); }
.mx-why dt { font-family: var(--mx-font-display); font-weight: 700; font-size: 1.25rem; margin-bottom: var(--mx-space-2); }
.mx-why dd { margin: 0; color: var(--mx-text-muted); }
@media (min-width: 768px) { .mx-why { grid-template-columns: repeat(2, 1fr); } }

.mx-cta { padding-block: var(--mx-space-section); text-align: left; }
.mx-cta .mx-display { max-width: 16ch; }

/* ---------- 10. Page hero, lists, misc ---------- */
.mx-page-hero { padding-block: var(--mx-space-16) var(--mx-space-12); }
.mx-list { display: grid; border-top: 1px solid var(--mx-border); }
.mx-list__item { padding-block: var(--mx-space-8); border-bottom: 1px solid var(--mx-border); }
.mx-list__title { font-family: var(--mx-font-display); font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); }
.mx-list__title a { text-decoration: none; }
.mx-list__excerpt { color: var(--mx-text-muted); max-width: var(--mx-measure); }
.mx-pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--mx-space-2); margin-top: var(--mx-space-8); }
.mx-pagination .page-numbers { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 0 0.75rem; border: 1px solid var(--mx-border); border-radius: var(--mx-radius-pill); text-decoration: none; }
.mx-pagination .current { background: var(--mx-accent); color: var(--mx-on-accent); border-color: var(--mx-accent); }
.mx-feature-image img { border-radius: var(--mx-radius-l); margin-bottom: var(--mx-space-12); }
.mx-post-nav { display: flex; justify-content: space-between; gap: var(--mx-space-4); padding-block: var(--mx-space-8); border-top: 1px solid var(--mx-border); }
.search-form { display: flex; gap: var(--mx-space-2); margin-top: var(--mx-space-6); max-width: 520px; }
.search-form label { flex: 1; }
.search-field { width: 100%; min-height: 48px; padding: 0 1rem; background: var(--mx-surface); border: 1px solid var(--mx-border); border-radius: var(--mx-radius-pill); color: var(--mx-text); font: inherit; }
.search-submit { min-height: 48px; padding: 0 1.25rem; background: var(--mx-accent); color: var(--mx-on-accent); border: 0; border-radius: var(--mx-radius-pill); font: inherit; font-weight: 600; cursor: pointer; }

/* ---------- 11. Footer ---------- */
.mx-footer { margin-top: var(--mx-space-section); border-top: 1px solid var(--mx-border); background: var(--mx-bg-secondary); padding-top: var(--mx-space-16); overflow: hidden; }
.mx-footer__top { display: grid; gap: var(--mx-space-12); }
@media (min-width: 768px) { .mx-footer__top { grid-template-columns: 1.6fr repeat(3, 1fr); } }
.mx-footer__statement { color: var(--mx-text-muted); max-width: 36ch; margin-top: var(--mx-space-4); }
.mx-footer__email { color: var(--mx-accent); font-weight: 600; }
.mx-footer__heading { font-family: var(--mx-font-mono); font-size: var(--mx-fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mx-text-muted); font-weight: 500; }
.mx-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mx-space-1); }
.mx-footer__col a { display: inline-block; padding-block: 0.35rem; text-decoration: none; font-size: var(--mx-fs-s); }
.mx-footer__giant {
	margin: var(--mx-space-12) 0 0;
	overflow: hidden;
	width: 100%;
	user-select: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.mx-footer__giant-track {
	display: flex;
	width: max-content;
	align-items: center;
	gap: clamp(2.5rem, 7vw, 6rem);
	animation: mx-footer-mq 42s linear infinite;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	will-change: transform;
}
.mx-footer__giant-word {
	flex: none;
	font-family: var(--mx-font-display);
	font-weight: 800;
	font-size: clamp(3.5rem, 15vw, 16rem);
	line-height: 0.84;
	letter-spacing: -0.06em;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1.25px rgba(245, 247, 250, 0.22);
	paint-order: stroke fill;
	background-image: linear-gradient(#f16f58, #f16f58);
	background-repeat: no-repeat;
	background-size: 100% 0%;
	background-position: bottom center;
	-webkit-background-clip: text;
	background-clip: text;
	transition:
		background-size 0.85s cubic-bezier(0.22, 1, 0.36, 1),
		-webkit-text-stroke-color 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		text-shadow 0.85s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes mx-footer-mq {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}
@media (hover: hover) and (pointer: fine) {
	.mx-footer:hover .mx-footer__giant-word,
	.mx-footer__giant:hover .mx-footer__giant-word {
		background-size: 100% 100%;
		-webkit-text-stroke-color: rgba(241, 111, 88, 0.55);
		text-shadow: 0 0 28px rgba(241, 111, 88, 0.28), 0 0 72px rgba(241, 111, 88, 0.12);
		filter: drop-shadow(0 0 18px rgba(241, 111, 88, 0.2));
	}
}
.mx-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--mx-space-4); padding-block: var(--mx-space-6); border-top: 1px solid var(--mx-border); font-size: var(--mx-fs-xs); color: var(--mx-text-muted); }
.mx-footer__bottom p { margin: 0; }
.mx-footer__legal ul { list-style: none; display: flex; gap: var(--mx-space-4); margin: 0; padding: 0; }

/* ---------- 12. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---- Phase 3 additions ---- */
.mx-note { color: var(--mx-text-2, #A3AAB5); font-size: .95rem; max-width: 62ch; margin: 0 0 2rem; padding-left: 1rem; border-left: 2px solid #f16f58; }
.mx-work { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .mx-work { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mx-work { grid-template-columns: 1.3fr 1fr 1fr; } }
.mx-work__card { background: #14171B; border: 1px solid #262B32; border-radius: 16px; padding: 1.25rem; transition: border-color .3s ease, transform .3s ease; min-width: 0; }
.mx-work__card:hover { border-color: #3a414b; transform: translateY(-3px); }
.mx-work__visual { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; margin-bottom: 1.25rem; overflow: hidden; background: radial-gradient(120% 90% at 20% 10%, rgba(241,111,88,.16), transparent 60%), #0E1013; border: 1px solid #262B32; display: flex; align-items: flex-end; justify-content: space-between; padding: 1rem; }
.mx-work__card--cyan .mx-work__visual { background: radial-gradient(120% 90% at 80% 10%, rgba(100,230,255,.18), transparent 60%), #0E1013; }
.mx-work__code { font-family: var(--mx-font-mono, ui-monospace, monospace); font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 600; letter-spacing: -.04em; color: #F5F7FA; opacity: .9; }
.mx-work__bars { display: flex; gap: 6px; align-items: flex-end; height: 48px; }
.mx-work__bars i { display: block; width: 8px; border-radius: 3px; background: #f16f58; }
.mx-work__card--cyan .mx-work__bars i { background: #64E6FF; }
.mx-work__bars i:nth-child(1) { height: 40%; } .mx-work__bars i:nth-child(2) { height: 75%; } .mx-work__bars i:nth-child(3) { height: 100%; }
.mx-work__label { font-family: var(--mx-font-mono, ui-monospace, monospace); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: #f16f58; margin: 0 0 .5rem; }
.mx-work__card--cyan .mx-work__label { color: #64E6FF; }
.mx-work__title { font-size: 1.25rem; margin: 0 0 .5rem; color: #F5F7FA; }
.mx-work__desc { margin: 0; color: var(--mx-text-2, #A3AAB5); font-size: .95rem; }
.mx-ai { background: radial-gradient(70% 60% at 85% 40%, rgba(100,230,255,.08), transparent 70%); }
.mx-footer__contact { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.mx-footer__contact a { color: #F5F7FA; text-decoration: none; display: inline-flex; gap: .75rem; align-items: baseline; }
.mx-footer__contact a:hover, .mx-footer__contact a:focus-visible { color: #f16f58; }
.mx-footer__label { font-family: var(--mx-font-mono, ui-monospace, monospace); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: #8A919C; min-width: 5.5em; }
.mx-page-intro { max-width: 70ch; }
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { .mx-work__card { transition: none; } .mx-work__card:hover { transform: none; } }
.mx-work__link { display: block; color: inherit; text-decoration: none; }

/* ---- Phase 7: motion polish (progressive; content visible without JS) ---- */
.mx-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.mx-reveal.is-revealed { opacity: 1; transform: none; }
.mx-reveal .mx-reveal-child { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--mx-i, 0) * 70ms + 120ms); }
.mx-reveal.is-revealed .mx-reveal-child { opacity: 1; transform: none; }
.mx-work__card { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.mx-work__card:hover, .mx-work__link:focus-visible .mx-work__card { border-color: #3a414b; transform: translateY(-3px); box-shadow: 0 14px 40px -18px rgba(0,0,0,.6); }
.mx-work__link:focus-visible { outline: 2px solid var(--mx-accent); outline-offset: 4px; border-radius: 12px; }
button:focus-visible, .mx-btn:focus-visible, summary:focus-visible { outline: 2px solid var(--mx-accent); outline-offset: 3px; }
.mx-menu-toggle { min-width: 44px; min-height: 44px; }
img, video { max-width: 100%; height: auto; }
h1, h2, h3, .mx-hero__title { overflow-wrap: break-word; text-wrap: balance; }
p { text-wrap: pretty; }
pre, table { max-width: 100%; overflow-x: auto; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
	.mx-reveal, .mx-reveal .mx-reveal-child { opacity: 1 !important; transform: none !important; }
	.mx-work__card:hover { transform: none; }
}

/* ==========================================================================
   0.4.9 Responsive + final-touch pass (all pages)
   ========================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip}
img,video,svg,iframe{max-width:100%}
.mx-wordmark{min-height:44px}
/* Footer: 44px tap targets on touch, tidy tablet columns. */
.mx-footer__col a{display:inline-flex;align-items:center;min-height:44px;padding-block:0}
.mx-footer__col ul{gap:0}
.mx-footer__email,.mx-footer__contact a{display:inline-flex;align-items:center;min-height:44px}
.mx-footer__contact{gap:0}
.mx-footer__legal a{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:768px) and (max-width:1023px){
  .mx-footer__top{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--mx-space-8) var(--mx-space-6)}
  .mx-footer__brand{grid-column:1/-1}
}
@media (max-width:767px){
  .mx-footer__top{grid-template-columns:1fr 1fr;gap:var(--mx-space-8) var(--mx-space-6)}
  .mx-footer__brand{grid-column:1/-1}
  .mx-footer__col:last-child{grid-column:1/-1}
  .mx-footer__bottom{flex-direction:column;align-items:flex-start;gap:var(--mx-space-2)}
}
/* Contact list links everywhere (Home lead close + Contact). */
.mx-contact__list a{display:inline-flex;align-items:center;min-height:44px}
/* Forms: never below 16px (prevents iOS zoom), comfortable targets. */
.mx-field input,.mx-field select,.mx-field textarea{font-size:16px}
.mx-field input:not([type=checkbox]),.mx-field select{min-height:48px}
.mx-field--check label a{display:inline-block;padding-block:.35rem}
/* Visible keyboard focus everywhere. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--mx-accent,#f16f58);outline-offset:3px}
/* Mobile menu: full-height scrollable panel, large rows. */
.mx-mobile-nav{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mx-mobile-nav .mx-mobile-nav__cta{width:100%;justify-content:center;margin-top:var(--mx-space-6);min-height:52px}
/* Page heroes: tablet sizing between phone and desktop. */
@media (min-width:768px) and (max-width:1023px){
  .mx-page-hero h1,.mx-page .mx-page-hero__title{font-size:clamp(2.75rem,7vw,4rem)}
  .mx-hero__inner{gap:var(--mx-space-8)}
}
@media (max-width:767px){
  .mx-page .mx-page-hero__actions{display:flex;flex-wrap:wrap;gap:10px}
  .mx-page .mx-page-hero__actions .mx-btn{flex:1 1 100%;justify-content:center}
}
.mx-crumb a{display:inline-flex;align-items:center;min-height:44px}

/* 0.5.3 Footer giant marquee — premium loop + lime fill + mobile */
@media (max-width: 767px) {
  .mx-footer__giant {
    margin-top: var(--mx-space-8);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  }
  .mx-footer__giant-word {
    font-size: clamp(2.5rem, 20vw, 4.75rem);
    -webkit-text-stroke-width: 1px;
    letter-spacing: -0.05em;
  }
  .mx-footer__giant-track {
    gap: clamp(1.75rem, 7vw, 2.5rem);
    animation-duration: 26s;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .mx-footer__giant-word { font-size: clamp(4rem, 13vw, 9rem); }
  .mx-footer__giant-track { gap: clamp(2rem, 5vw, 4rem); animation-duration: 34s; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-footer__giant-track { animation: none !important; transform: none !important; will-change: auto; }
  .mx-footer__giant-word:nth-child(n+2) { display: none; }
  .mx-footer__giant { -webkit-mask-image: none; mask-image: none; overflow: hidden; }
  .mx-footer__giant-word {
    font-size: clamp(2.5rem, 14vw, 8rem);
    background-size: 0 0;
    transition: none;
  }
  .mx-footer:hover .mx-footer__giant-word,
  .mx-footer__giant:hover .mx-footer__giant-word {
    color: #f16f58;
    -webkit-text-stroke-color: #f16f58;
    background-size: 0 0;
    text-shadow: none;
    filter: none;
  }
}



.mx-wordmark__mark{display:block;width:32px;height:32px;flex:none}

/* ===== 0.6.4 mobile menu fix ===== */
/* backdrop-filter on the open header made it the containing block for the fixed drawer (drawer collapsed into 72px). */
.mx-header.is-open{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--mx-canvas,#08090B)}
.mx-mobile-nav{z-index:99;height:calc(100dvh - var(--mx-header-h,72px));padding-bottom:calc(var(--mx-space-8,2rem) + env(safe-area-inset-bottom))}
.admin-bar .mx-mobile-nav{height:calc(100dvh - var(--mx-header-h,72px) - 46px)}
.mx-mobile-nav[hidden]{display:none!important}
.mx-mobile-nav .mx-nav__list{list-style:none;margin:0;padding:0}
.mx-mobile-nav .mx-nav__list a{min-height:56px;font-size:clamp(1.4rem,1rem + 3vw,2.1rem);color:var(--mx-text,#F4F6F8);overflow-wrap:anywhere}
html:has(body.mx-menu-open){overflow:hidden}
body.mx-menu-open{overflow:hidden;touch-action:none}
body.mx-menu-open .mx-mobile-nav{touch-action:pan-y}
.mx-menu-toggle{position:relative;z-index:101;flex:0 0 auto}
@media (max-width:420px){.mx-header__inner{gap:.75rem}.mx-wordmark__text{font-size:1.1rem}}
@media (prefers-reduced-motion:reduce){.mx-mobile-nav,.mx-menu-toggle__bars span{transition:none!important}}