/*
 * Mobapp Tech — front-end styles.
 * Colours, fonts and sizes come from theme.json presets; everything visual
 * beyond that lives here. Hidden "before animation" states are scoped to
 * `.js` so the block editor (and no-JS visitors) always see full content.
 */

:root {
	--mt-grad: linear-gradient(120deg, #8b5cf6 0%, #22d3ee 50%, #ff5ca8 100%);
	--mt-line: rgba(255, 255, 255, 0.08);
	--mt-line-2: rgba(255, 255, 255, 0.14);
	--mt-muted: var(--wp--preset--color--muted, #9a9aad);
	--mt-base: var(--wp--preset--color--base, #05050a);
	--mt-text: var(--wp--preset--color--contrast, #f4f4f7);
	--mt-serif: var(--wp--preset--font-family--serif, Georgia, serif);
	--mt-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mt-gutter: clamp(1rem, 4vw, 2.5rem);
	--mt-radius: 28px;
	--mt-header-h: 72px;
	--mt-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ Base */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 88px;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
	text-rendering: optimizeLegibility;
}

::selection {
	background: #8b5cf6;
	color: #fff;
}

/* Film grain over the whole page. */
body:not(.editor-styles-wrapper)::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.05;
	background-image: var(--mt-noise);
}

body .wp-site-blocks > * {
	margin-block: 0;
}

/* Our containers manage their own spacing (flex/grid gap), so drop WP's flow margins. */
body :is(.mt-main, .mt-hero, .mt-hero__copy, .mt-section, .mt-section__head, .mt-wrap, .mt-card, .mt-bento, .mt-bento__d-copy, .mt-stats, .mt-stats__grid, .mt-stat, .mt-app, .mt-app__copy, .mt-process, .mt-process__sticky, .mt-process__head, .mt-process__track, .mt-step, .mt-cta, .mt-cta__inner, .mt-footer, .mt-footer__top, .mt-footer__brand, .mt-footer__col, .mt-footer__bottom, .mt-header, .mt-header__inner, .mt-legal__meta) > * {
	margin-block: 0;
}

.mt-wrap {
	width: min(1240px, calc(100% - 2 * var(--mt-gutter)));
	margin-inline: auto;
}

/* ------------------------------------------------------------ Typography */

.mt-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mt-muted);
}

.mt-eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--mt-grad);
}

.mt-lead {
	max-width: 40rem;
	font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
	line-height: 1.6;
	color: var(--mt-muted);
	text-wrap: pretty;
}

.mt-h2 {
	max-width: 17ch;
	font-size: clamp(2.25rem, 5.4vw, 4.75rem);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.045em;
	text-wrap: balance;
}

:is(.mt-hero__title, .mt-h2, .mt-cta__title, .mt-scrub) em {
	font-family: var(--mt-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
	padding-right: 0.06em;
}

:is(.mt-hero__title, .mt-h2, .mt-cta__title) em,
:is(.mt-hero__title, .mt-h2, .mt-cta__title) em .w {
	background: var(--mt-grad);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: mt-shine 6s linear infinite;
}

/* --------------------------------------------------------------- Buttons */

.wp-block-button__link {
	transition: transform 0.4s var(--mt-ease), box-shadow 0.4s var(--mt-ease), background-color 0.3s, color 0.3s;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08), 0 12px 40px -10px rgba(139, 92, 246, 0.8);
}

body .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 0.9rem 1.6rem;
	border: 1px solid var(--mt-line-2);
	background: rgba(255, 255, 255, 0.04);
	color: var(--mt-text);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

body .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.08);
}

.mt-magnetic .wp-block-button__link {
	translate: var(--tx, 0px) var(--ty, 0px);
	transition: translate 0.5s var(--mt-ease), box-shadow 0.4s var(--mt-ease), background-color 0.3s;
}

.mt-btn-sm .wp-block-button__link {
	padding: 0.6rem 1.15rem;
	font-size: 0.875rem;
}

.mt-btn-lg .wp-block-button__link {
	padding: 1.25rem 2.4rem;
	font-size: clamp(1rem, 1.8vw, 1.375rem);
}

/* ---------------------------------------------------------------- Header */

.mt-header {
	position: relative;
	z-index: 100;
}

body:not(.editor-styles-wrapper) .mt-header {
	position: fixed;
	inset: 0 0 auto;
	transition: transform 0.5s var(--mt-ease);
}

.admin-bar .mt-header,
.admin-bar .mt-progress {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .mt-header,
	.admin-bar .mt-progress {
		top: 46px;
	}
}

/* Glass background on a pseudo-element: backdrop-filter on the header itself
   would trap the mobile menu overlay (position: fixed) inside it. */
.mt-header::before {
	content: "";
	position: absolute;
	inset: 0;
	border-bottom: 1px solid var(--mt-line);
	background: rgba(5, 5, 10, 0.62);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	opacity: 0;
	transition: opacity 0.4s;
}

.is-scrolled .mt-header::before {
	opacity: 1;
}

.is-header-hidden .mt-header {
	transform: translateY(-110%);
}

.mt-header__inner {
	position: relative;
	width: min(1240px, calc(100% - 2 * var(--mt-gutter)));
	min-height: var(--mt-header-h);
	margin-inline: auto;
}

.mt-brand {
	gap: 0.6rem;
}

.mt-brand .wp-block-site-title {
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.mt-brand .wp-block-site-title a,
.mt-footer .wp-block-site-title a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--mt-text);
}

/* The Mobapp Tech mark (assets/images/logo-mark.svg), drawn before the site name. */
.mt-brand .wp-block-site-title a::before,
.mt-footer .wp-block-site-title a::before {
	content: "";
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 23%;
	background: url("../images/logo-mark.svg") center / contain no-repeat;
	box-shadow: 0 6px 20px -6px rgba(122, 92, 255, 0.85);
}

/* Wordmark like the logo lockup: lowercase, "tech" in a lighter grey (split by JS). */
.mt-brand .wp-block-site-title a,
.mt-footer .wp-block-site-title a {
	font-weight: 700;
	letter-spacing: -0.035em;
	text-transform: lowercase;
}

.mt-brand__tail {
	font-weight: 400;
	color: #a9a9b8;
}

.mt-header__nav {
	gap: clamp(1rem, 3vw, 2.25rem);
}

.mt-nav {
	gap: clamp(1rem, 2.5vw, 2rem);
	font-size: 0.9375rem;
}

.mt-nav .wp-block-navigation-item__content {
	color: var(--mt-muted);
	text-decoration: none;
	transition: color 0.3s;
}

.mt-nav .wp-block-navigation-item__content:hover {
	color: var(--mt-text);
}

.mt-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: calc(var(--mt-header-h) + 1rem) var(--mt-gutter) 2rem;
	background: var(--mt-base) !important;
	color: var(--mt-text) !important;
}

.mt-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start !important;
	gap: 0.5rem;
}

.mt-nav .is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
	gap: 0.75rem !important;
}

.mt-nav .is-menu-open .wp-block-navigation-item__content {
	font-size: clamp(2rem, 9vw, 3rem);
	font-weight: 600;
	letter-spacing: -0.04em;
	color: var(--mt-text);
}

.mt-nav .wp-block-navigation__responsive-container-close {
	top: 1.5rem;
	right: var(--mt-gutter);
}

@media (max-width: 480px) {
	body .mt-header .mt-header__cta {
		display: none;
	}
}

.mt-progress {
	position: fixed;
	inset: 0 0 auto;
	z-index: 200;
	height: 2px;
	background: var(--mt-grad);
	transform: scaleX(var(--sp, 0));
	transform-origin: left;
	pointer-events: none;
}

/* ------------------------------------------------------------------ Pill */

.mt-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 0.95rem 0.45rem 0.75rem;
	border: 1px solid var(--mt-line-2);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--mt-text);
}

.mt-pill::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22d3ee;
	animation: mt-ping 2s infinite;
}

/* ------------------------------------------------------------------ Hero */

.mt-hero {
	position: relative;
	isolation: isolate;
	overflow: clip;
	padding: calc(var(--mt-header-h) + clamp(3rem, 9vh, 6.5rem)) var(--mt-gutter) clamp(3rem, 7vw, 6rem);
	text-align: center;
}

.mt-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.mt-hero__bg::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 35%;
	background: linear-gradient(transparent, var(--mt-base));
}

.mt-aurora {
	position: absolute;
	inset: -10% -10% 0;
	opacity: 0.85;
}

.mt-aurora span {
	position: absolute;
	border-radius: 50%;
	mix-blend-mode: screen;
	animation: mt-drift 22s ease-in-out infinite alternate;
}

.mt-aurora span:nth-child(1) {
	top: -20%;
	left: 0;
	width: 62vw;
	height: 62vw;
	background: radial-gradient(closest-side, rgba(139, 92, 246, 0.55), transparent);
}

.mt-aurora span:nth-child(2) {
	top: -5%;
	right: -5%;
	width: 50vw;
	height: 50vw;
	background: radial-gradient(closest-side, rgba(34, 211, 238, 0.32), transparent);
	animation-duration: 28s;
	animation-direction: alternate-reverse;
}

.mt-aurora span:nth-child(3) {
	top: 30%;
	left: 28%;
	width: 44vw;
	height: 44vw;
	background: radial-gradient(closest-side, rgba(255, 92, 168, 0.28), transparent);
	animation-duration: 34s;
}

.mt-gridlines {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
	background-size: 72px 72px;
	-webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 28%, #000 15%, transparent 70%);
	mask-image: radial-gradient(ellipse 60% 50% at 50% 28%, #000 15%, transparent 70%);
}

.mt-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 25%), rgba(139, 92, 246, 0.16), transparent 60%);
}

.mt-hero__copy {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	max-width: 1100px;
	margin-inline: auto;
}

.mt-hero__title {
	max-width: 13ch;
	margin-inline: auto;
	font-size: clamp(2.75rem, 8.2vw, 7rem);
	font-weight: 600;
	line-height: 0.98;
	letter-spacing: -0.05em;
	text-wrap: balance;
}

.mt-hero .mt-lead {
	margin-inline: auto;
	text-wrap: balance;
}

.mt-hero__actions {
	gap: 0.75rem;
	padding-top: 0.5rem;
}

/* Stage: phone + floating cards. --p = scroll progress, --mx/--my = pointer. */
.mt-hero__stage {
	--p: 0;
	--mx: 0;
	--my: 0;
	--pw: 300px;
	position: relative;
	width: min(1120px, 100%);
	height: calc(var(--pw) * 2.07 + 40px);
	margin: clamp(3rem, 8vh, 5rem) auto 0;
	perspective: 1600px;
}

.mt-phone-wrap {
	position: absolute;
	inset: 0 0 auto;
	width: fit-content;
	margin-inline: auto;
	transform:
		rotateX(calc((1 - var(--p)) * 24deg))
		rotateY(calc(var(--mx) * 7deg))
		scale(calc(0.94 + var(--p) * 0.06));
	transform-origin: 50% 100%;
	transform-style: preserve-3d;
}

.mt-phone-shadow {
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: -30px;
	height: 60px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(139, 92, 246, 0.55), transparent);
	filter: blur(20px);
	z-index: -1;
}

.js .mt-phone-wrap,
.js .mt-float {
	opacity: 0;
	translate: 0 60px;
}

.is-loaded .mt-phone-wrap {
	opacity: 1;
	translate: 0 0;
	transition: opacity 1.4s var(--mt-ease) 0.5s, translate 1.4s var(--mt-ease) 0.5s;
}

/* -------------------------------------------------------------- Phone UI */

.mt-phone {
	--pw: 300px;
	position: relative;
	width: var(--pw);
	aspect-ratio: 300 / 620;
	padding: 10px;
	border-radius: calc(var(--pw) * 0.16);
	background: linear-gradient(145deg, #2c2c38, #0b0b10 40%, #1d1d27);
	box-shadow:
		inset 0 0 0 1.5px rgba(255, 255, 255, 0.14),
		inset 0 0 0 7px #000,
		0 50px 100px -20px rgba(0, 0, 0, 0.85),
		0 30px 80px -30px rgba(139, 92, 246, 0.65);
	text-align: left;
}

.mt-phone p {
	margin: 0;
}

.mt-phone__island {
	position: absolute;
	top: 20px;
	left: 50%;
	z-index: 3;
	width: 30%;
	height: 26px;
	border-radius: 20px;
	background: #000;
	translate: -50% 0;
}

.mt-phone__screen {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 58px 14px 14px;
	overflow: hidden;
	border-radius: calc(var(--pw) * 0.13);
	background: linear-gradient(180deg, #13131e, #0a0a12);
	font-size: 13px;
	line-height: 1.45;
	color: #e9e9f1;
}

/* Hero phone: several app screens stacked; JS switches the active one. */
.mt-phone__screen--multi {
	padding: 0;
	/* overflow + border-radius doesn't clip blurred/scaled layers in every browser. */
	clip-path: inset(0 round calc(var(--pw) * 0.13));
}

.mt-screen {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: 58px 14px 14px;
	opacity: 0;
	transform: scale(1.06);
	filter: blur(8px);
	transition: opacity 0.6s var(--mt-ease), transform 0.8s var(--mt-ease), filter 0.6s var(--mt-ease);
	pointer-events: none;
}

.mt-screen.is-active {
	opacity: 1;
	transform: none;
	filter: none;
}

.mt-screen:not(.is-active) .mt-haunt__meter i {
	transform: scaleX(0);
}

/* iCar "Event Sounds" home screen, in the real app's dark theme colours. */
.mt-screen--icar {
	gap: 10px;
	background:
		radial-gradient(120% 55% at 0% 0%, rgba(50, 217, 106, 0.14), transparent 60%),
		#070a08;
	color: #f3f8f4;
}

.mt-icar-app__bar {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 17px;
}

.mt-icar-app__bar img {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	box-shadow: 0 6px 14px -6px rgba(19, 163, 83, 0.7);
}

.mt-icar-app__gear {
	width: 26px;
	height: 26px;
	margin-left: auto;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	background: radial-gradient(circle, #f3f8f4 0 3px, transparent 3.5px), #1a221c;
}

.mt-icar-app__title {
	margin-top: 4px !important;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.mt-icar-app__sub {
	font-size: 11px;
	color: #8fa396;
}

.mt-icar-app__card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 16px;
	background: #101511;
	box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.8);
}

.mt-icar-app__card.is-playing {
	border-color: rgba(50, 217, 106, 0.5);
	box-shadow: 0 8px 22px -12px rgba(50, 217, 106, 0.45);
}

.mt-icar-app__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 11px;
	font-size: 17px;
	color: #fff;
}

.mt-icar-app__icon--car { background: linear-gradient(135deg, #1fbf63, #0a7c3c); }
.mt-icar-app__icon--off { background: linear-gradient(135deg, #ff5b5b, #d92727); font-weight: 700; }
.mt-icar-app__icon--home { background: linear-gradient(135deg, #ffb13d, #ef7b10); }

.mt-icar-app__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.mt-icar-app__text b {
	font-size: 12.5px;
}

.mt-icar-app__text small {
	font-size: 10.5px;
	color: #32d96a;
}

.mt-icar-app__chev {
	width: 7px;
	height: 7px;
	border-top: 2px solid #5f6f64;
	border-right: 2px solid #5f6f64;
	transform: rotate(45deg);
}

.mt-eq--sm {
	height: 16px;
	gap: 2px;
}

.mt-eq.mt-eq--sm i {
	width: 3px;
	background: #32d96a;
}

.mt-icar-app__tabs {
	display: flex;
	align-self: center;
	gap: 4px;
	margin-top: auto !important;
	padding: 5px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 999px;
	background: #1a221c;
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.8);
	font-size: 11px;
	font-weight: 600;
	color: #8fa396;
}

.mt-icar-app__tabs span {
	padding: 7px 16px;
	border-radius: 999px;
}

.mt-icar-app__tabs .is-active {
	background: linear-gradient(135deg, #32d96a, #0ea84c);
	color: #04170b;
}

.mt-appbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 4px 12px;
	border-bottom: 1px solid var(--mt-line);
}

.mt-appbar__icon,
.mt-notify__icon,
.mt-app__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--mt-grad);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
	font-family: var(--mt-serif);
	font-size: 20px;
	font-style: italic;
	color: #fff;
}

.mt-appbar__title {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.mt-appbar__title small {
	font-size: 11px;
	color: #34d399;
}

.mt-chat {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	padding: 14px 2px;
	overflow: hidden;
}

.mt-msg {
	max-width: 86%;
	padding: 9px 12px;
	border-radius: 16px;
}

.mt-msg--me {
	align-self: flex-end;
	border-bottom-right-radius: 5px;
	background: linear-gradient(135deg, #8b5cf6, #6366f1);
	color: #fff;
}

.mt-msg--ai {
	align-self: flex-start;
	border: 1px solid var(--mt-line);
	border-bottom-left-radius: 5px;
	background: rgba(255, 255, 255, 0.07);
}

.mt-msg.is-new {
	animation: mt-pop 0.5s var(--mt-ease) both;
}

.mt-typing {
	display: flex;
	align-self: flex-start;
	gap: 4px;
	padding: 12px 14px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.07);
	animation: mt-pop 0.4s var(--mt-ease) both;
}

.mt-typing i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #b6b6c8;
	animation: mt-bounce 1s infinite;
}

.mt-typing i:nth-child(2) { animation-delay: 0.15s; }
.mt-typing i:nth-child(3) { animation-delay: 0.3s; }

.mt-composer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 8px 8px 14px;
	border: 1px solid var(--mt-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--mt-muted);
}

.mt-composer i {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--mt-grad);
	font-style: normal;
	color: #fff;
}

.mt-composer i::after {
	content: "↑";
	font-size: 14px;
	font-weight: 700;
}

/* -------------------------------------------------------- Floating cards */

.mt-float {
	position: absolute;
	z-index: 2;
	translate: calc(var(--mx) * var(--depth) * -16px) calc(var(--my) * var(--depth) * -16px);
}

.is-loaded .mt-float {
	opacity: 1;
	translate: calc(var(--mx) * var(--depth) * -16px) calc(var(--my) * var(--depth) * -16px);
	transition: opacity 1.2s var(--mt-ease) var(--fd, 1s), translate 0.6s var(--mt-ease);
}

.mt-float:nth-child(1) { --fd: 0.9s; top: 10%; left: 3%; }
.mt-float:nth-child(2) { --fd: 1.1s; top: 55%; left: 9%; }
.mt-float:nth-child(3) { --fd: 1s; top: 18%; right: 2%; }
.mt-float:nth-child(4) { --fd: 1.2s; top: 62%; right: 10%; }

.mt-float__card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid var(--mt-line-2);
	border-radius: 18px;
	background: rgba(22, 22, 34, 0.55);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
	font-size: 13px;
	line-height: 1.35;
	text-align: left;
	white-space: nowrap;
	animation: mt-bob 7s ease-in-out infinite;
}

.mt-float:nth-child(2) .mt-float__card { animation-delay: -2s; }
.mt-float:nth-child(3) .mt-float__card { animation-delay: -4s; }
.mt-float:nth-child(4) .mt-float__card { animation-delay: -1s; }

.mt-float--llm .mt-float__card {
	flex-direction: column;
	align-items: flex-start;
}

.mt-float__label {
	color: var(--mt-muted);
}

.mt-notify {
	display: grid;
	max-width: 260px;
}

/* Two notifications stacked in one cell, cross-fading in turn. */
.mt-notify__item {
	display: flex;
	grid-area: 1 / 1;
	align-items: center;
	gap: 12px;
	animation: mt-swap 9s var(--mt-ease) infinite;
}

.mt-notify__item + .mt-notify__item {
	animation-delay: -4.5s;
}

.mt-eq {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 26px;
}

.mt-eq i {
	width: 5px;
	height: 30%;
	border-radius: 3px;
	background: var(--mt-grad);
	background-size: 100% 300%;
	animation: mt-eq 1.2s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -0.17s);
}

.mt-diffuse {
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: conic-gradient(from 30deg, #8b5cf6, #22d3ee, #ff5ca8, #ffb36b, #8b5cf6);
	animation: mt-diffuse 4s ease-in-out infinite;
}

/* Dotted globe — rotation is faked by scrolling a dot pattern behind a sphere mask. */
.mt-globe {
	--size: 220px;
	position: relative;
	flex: none;
	width: var(--size);
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 30%, rgba(139, 92, 246, 0.4), rgba(5, 5, 10, 0.95) 72%);
	box-shadow:
		inset -18px -22px 50px rgba(0, 0, 0, 0.85),
		inset 10px 10px 40px rgba(34, 211, 238, 0.22),
		0 0 90px -20px rgba(139, 92, 246, 0.7);
}

.mt-globe::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.6) 1.1px, transparent 1.5px);
	background-size: calc(var(--size) / 22) calc(var(--size) / 22);
	-webkit-mask-image: radial-gradient(circle at 45% 45%, #000 35%, transparent 70%);
	mask-image: radial-gradient(circle at 45% 45%, #000 35%, transparent 70%);
	animation: mt-globe 18s linear infinite;
}

.mt-globe::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.mt-visual--globe .mt-globe {
	--size: 250px;
}

/* JS swaps the CSS globe for a canvas one; the CSS version stays as the fallback. */
.mt-globe.has-canvas {
	overflow: visible;
	background: none;
	box-shadow: none;
}

.mt-globe.has-canvas::before,
.mt-globe.has-canvas::after {
	display: none;
}

.mt-globe__canvas {
	position: absolute;
	inset: -12%;
	width: 124%;
	height: 124%;
	cursor: grab;
	touch-action: pan-y;
}

.mt-globe__canvas:active {
	cursor: grabbing;
}

.mt-globe--sm {
	--size: 40px;
}

.mt-globe--sm::before {
	background-image: radial-gradient(rgba(255, 255, 255, 0.75) 1px, transparent 1.4px);
	background-size: 6px 6px;
}

/* --------------------------------------------------------------- Marquee */

.mt-marquee {
	position: relative;
	padding-block: clamp(2rem, 5vw, 3.5rem);
	overflow: hidden;
	border-block: 1px solid var(--mt-line);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.mt-marquee__row {
	display: flex;
	width: max-content;
	animation: mt-marquee 45s linear infinite;
}

.mt-marquee__row--reverse {
	margin-top: 0.75rem;
	animation-direction: reverse;
	animation-duration: 55s;
}

.mt-marquee:hover .mt-marquee__row {
	animation-play-state: paused;
}

.mt-marquee__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-marquee__track li {
	display: flex;
	align-items: center;
	padding-right: 1em;
	font-size: clamp(1.75rem, 4.6vw, 4rem);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1.15;
	white-space: nowrap;
}

.mt-marquee__track li::after {
	content: "✦";
	margin-left: 1em;
	font-size: 0.45em;
	color: #8b5cf6;
}

.mt-marquee__row--reverse li {
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.32);
}

.mt-marquee__row--reverse li::after {
	color: #22d3ee;
	-webkit-text-stroke: 0;
}

/* -------------------------------------------------------------- Sections */

.mt-section {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(2.5rem, 6vw, 4.5rem);
	padding-block: clamp(5rem, 12vw, 10rem);
}

.mt-section__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}

/* ----------------------------------------------------------------- Cards */

.mt-card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.6rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	overflow: hidden;
	border: 1px solid var(--mt-line);
	border-radius: var(--mt-radius);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
}

/* Spotlight that follows the pointer (--x/--y set in JS). */
.mt-spot::before,
.mt-spot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	opacity: 0;
	transition: opacity 0.5s;
	pointer-events: none;
}

.mt-spot::before {
	z-index: -1;
	background: radial-gradient(460px circle at var(--x, 50%) var(--y, 0%), rgba(139, 92, 246, 0.16), transparent 45%);
}

.mt-spot::after {
	padding: 1px;
	background: radial-gradient(320px circle at var(--x, 50%) var(--y, 0%), rgba(255, 255, 255, 0.45), transparent 45%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.mt-spot:hover::before,
.mt-spot:hover::after {
	opacity: 1;
}

.mt-card__title {
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	font-weight: 600;
	letter-spacing: -0.03em;
}

.mt-card__text {
	max-width: 38ch;
	font-size: 1rem;
	color: var(--mt-muted);
}

.mt-visual {
	display: grid;
	flex: 1;
	place-items: center;
	min-height: 150px;
	margin-bottom: 1rem !important;
}

/* ----------------------------------------------------------------- Bento */

.mt-bento {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: minmax(300px, auto);
	gap: 16px;
}

.mt-bento__a {
	grid-row: span 2;
}

.mt-bento__d {
	grid-column: span 2;
	flex-direction: row;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.mt-bento__d .mt-visual {
	flex: none;
	margin: 0 !important;
}

.mt-bento__d-copy {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.mt-neural svg {
	width: 100%;
	max-width: 420px;
	overflow: visible;
}

.mt-neural__links path {
	stroke-dasharray: 5 9;
	opacity: 0.8;
	animation: mt-dash 1.6s linear infinite;
}

.mt-neural__nodes circle {
	fill: #0e0e17;
	stroke: rgba(255, 255, 255, 0.55);
	stroke-width: 1.5;
	transform-box: fill-box;
	transform-origin: center;
	animation: mt-node 3s ease-in-out infinite;
}

.mt-neural__nodes circle:nth-child(3n) { animation-delay: -1s; }
.mt-neural__nodes circle:nth-child(3n + 1) { animation-delay: -2s; }

.mt-neural__nodes .mt-neural__out {
	fill: #8b5cf6;
	stroke: #c4b5fd;
	filter: drop-shadow(0 0 14px rgba(139, 92, 246, 0.9));
}

.mt-tokens {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	gap: 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px;
}

.mt-tokens span {
	padding: 4px 8px;
	border: 1px solid var(--mt-line);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
	animation: mt-token 5s infinite;
	animation-delay: calc(var(--i, 0) * 0.28s);
}

.mt-tokens .mt-tokens__out {
	color: #67e8f9;
}

.mt-caret {
	display: inline-block;
	width: 8px;
	height: 18px;
	border-radius: 2px;
	background: #22d3ee;
	animation: mt-blink 1s steps(1) infinite;
}

.mt-diffusion {
	position: relative;
	width: 100%;
	max-width: 230px;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 22px;
	box-shadow: 0 20px 60px -20px rgba(255, 92, 168, 0.5);
}

.mt-diffusion__img {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 70% 32% at 25% 100%, #160d2c 60%, transparent 61%),
		radial-gradient(ellipse 80% 38% at 85% 100%, #24164a 60%, transparent 61%),
		radial-gradient(circle at 62% 46%, #ffd29a 0 11%, rgba(255, 179, 107, 0.5) 12%, transparent 26%),
		linear-gradient(180deg, #22d3ee 0%, #8b5cf6 52%, #ff5ca8 100%);
	animation: mt-denoise 5s ease-in-out infinite;
}

.mt-diffusion__noise {
	position: absolute;
	inset: 0;
	background-image: var(--mt-noise);
	background-size: 120px;
	mix-blend-mode: hard-light;
	animation: mt-noise-fade 5s ease-in-out infinite;
}

/* ----------------------------------------------------------------- Stats */

.mt-stats {
	padding-block: clamp(2.5rem, 6vw, 4rem);
	border-block: 1px solid var(--mt-line);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}

.mt-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mt-stat {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem clamp(1rem, 2.5vw, 2rem);
	border-left: 1px solid var(--mt-line);
}

.mt-stat:first-child {
	border-left: 0;
	padding-left: 0;
}

.mt-stat__num {
	font-size: clamp(1.875rem, 3.8vw, 3.5rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.045em;
	background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, 0.5));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-variant-numeric: tabular-nums;
}

.mt-stat__label {
	font-size: 0.9375rem;
	color: var(--mt-muted);
}

/* ------------------------------------------------------------------ Apps */

.mt-apps .mt-wrap:not(.mt-section__head) {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mt-app {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
	padding: clamp(1.75rem, 5vw, 4.5rem);
	overflow: hidden;
	border: 1px solid var(--mt-line-2);
	border-radius: 36px;
	background:
		radial-gradient(120% 120% at 100% 0%, rgba(139, 92, 246, 0.3), transparent 50%),
		radial-gradient(90% 90% at 0% 100%, rgba(34, 211, 238, 0.14), transparent 50%),
		#0c0c15;
}

.mt-app__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.mt-app__icon {
	width: 76px;
	height: 76px;
	border-radius: 22px;
	font-size: 2.6rem;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 20px 40px -12px rgba(139, 92, 246, 0.8);
}

.mt-app__tag {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #67e8f9;
}

.mt-app__name {
	font-size: clamp(2.5rem, 5vw, 4.25rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.045em;
}

.mt-app__text {
	max-width: 46ch;
	font-size: 1.0625rem;
	color: var(--mt-muted);
}

.mt-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
}

.mt-chips li {
	padding: 8px 14px;
	border: 1px solid var(--mt-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	font-size: 0.875rem;
	transition: transform 0.3s var(--mt-ease), border-color 0.3s, background 0.3s;
}

.mt-chips li:hover {
	transform: translateY(-2px);
	border-color: rgba(139, 92, 246, 0.55);
	background: rgba(139, 92, 246, 0.14);
}

.mt-stores {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 0.75rem;
}

.mt-store {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 18px 9px 14px;
	border-radius: 14px;
	background: #fff;
	color: #000 !important;
	text-decoration: none;
	transition: transform 0.4s var(--mt-ease), box-shadow 0.4s var(--mt-ease);
}

.mt-store:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px -10px rgba(255, 255, 255, 0.35);
}

.mt-store svg {
	width: 24px;
	height: 24px;
}

.mt-store span {
	display: flex;
	flex-direction: column;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.1;
}

.mt-store small {
	font-size: 0.6875rem;
	font-weight: 500;
}

.mt-app__stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 600px;
	perspective: 1200px;
}

.mt-app__halo {
	position: absolute;
	width: min(440px, 90%);
	aspect-ratio: 1;
	border-radius: 50%;
	background: conic-gradient(#8b5cf6, #22d3ee, #ff5ca8, #8b5cf6);
	filter: blur(70px);
	opacity: 0.45;
	animation: mt-rotate 14s linear infinite;
}

.mt-phone--app {
	--pw: 280px;
	transform: rotateY(var(--ry, -8deg)) rotateX(var(--rx, 4deg));
	transition: transform 0.6s var(--mt-ease);
}

.mt-dash {
	gap: 12px;
	padding-top: 60px;
}

.mt-dash__hi {
	font-size: 12px;
	color: var(--mt-muted);
}

.mt-dash__q {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.mt-dash__search {
	padding: 10px 14px;
	border: 1px solid var(--mt-line);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	font-size: 12px;
	color: var(--mt-muted);
}

.mt-dash__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.mt-dash__tile {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	border: 1px solid var(--mt-line);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.05);
	font-size: 12px;
	font-weight: 600;
	animation: mt-tile 6s infinite;
	animation-delay: calc(var(--i, 0) * 1s);
}

.mt-dash__tile span {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: rgba(139, 92, 246, 0.22);
	font-size: 15px;
}

.mt-dash__streak {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: auto;
	padding: 12px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(255, 92, 168, 0.22), rgba(139, 92, 246, 0.22));
	font-size: 12px;
}

.mt-dash__streak span {
	height: 6px;
	overflow: hidden;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.12);
}

.mt-dash__streak i {
	display: block;
	width: var(--w, 70%);
	height: 100%;
	border-radius: inherit;
	background: var(--mt-grad);
	transform-origin: left;
	animation: mt-fill 3s var(--mt-ease) infinite alternate;
}

/* Each app's signature colour, used by the showcase glow. */
.mt-app { --app-tint: #8b5cf6; }
.mt-app--haunt { --app-tint: #ff8fd0; }
.mt-app--icar { --app-tint: #60e473; }
.mt-app--dating { --app-tint: #ff7a6b; }

/*
 * Showcase (wide screens, enabled by JS): the copy of each app scrolls on the
 * left while one sticky device on the right switches between apps.
 * `.mt-app` becomes display: contents so its copy and stage join one grid.
 */
.mt-apps .mt-wrap.mt-showcase.is-showcase {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	column-gap: clamp(2rem, 5vw, 5rem);
	--tint: #8b5cf6;
	--stage-h: 720px;
}

.is-showcase > .mt-app {
	display: contents;
}

.is-showcase .mt-app__copy {
	grid-column: 1;
	min-height: 86vh;
	justify-content: center;
	opacity: 0.22;
	transition: opacity 0.6s var(--mt-ease);
}

.is-showcase > .mt-app:nth-of-type(1) .mt-app__copy { grid-row: 1; }
.is-showcase > .mt-app:nth-of-type(2) .mt-app__copy { grid-row: 2; }
.is-showcase > .mt-app:nth-of-type(3) .mt-app__copy { grid-row: 3; }
.is-showcase > .mt-app:nth-of-type(4) .mt-app__copy { grid-row: 4; }

.is-showcase .mt-app.is-active .mt-app__copy {
	opacity: 1;
}

.is-showcase .mt-app__stage,
.mt-showcase__backdrop {
	position: sticky;
	top: max(90px, calc(50vh - var(--stage-h) / 2));
	grid-column: 2;
	grid-row: 1 / span 4;
	align-self: start;
	box-sizing: border-box;
	height: var(--stage-h);
	min-height: 0;
}

.is-showcase .mt-app__stage {
	z-index: 1;
	padding-bottom: 80px; /* room for the app switcher pills */
	opacity: 0;
	transform: translateY(40px) scale(0.94);
	transition: opacity 0.6s var(--mt-ease), transform 0.9s var(--mt-ease);
	pointer-events: none;
}

.is-showcase .mt-app.is-active .mt-app__stage {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.mt-showcase__backdrop {
	display: none;
}

.is-showcase .mt-showcase__backdrop {
	display: block;
}

.mt-showcase__glow {
	position: absolute;
	inset: 8% 6%;
	border-radius: 50%;
	background-color: var(--tint);
	filter: blur(110px);
	opacity: 0.32;
	transition: background-color 0.9s var(--mt-ease);
}

.mt-showcase__rail {
	position: absolute;
	right: 0;
	bottom: 8px;
	left: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 6px;
}

.mt-showcase__rail button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border: 1px solid var(--mt-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--mt-muted);
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s, background 0.3s;
}

.mt-showcase__rail button::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
}

.mt-showcase__rail button[aria-current="true"] {
	border-color: color-mix(in srgb, var(--tint) 60%, transparent);
	background: color-mix(in srgb, var(--tint) 14%, transparent);
	color: var(--mt-text);
}

.mt-showcase__rail button[aria-current="true"]::before {
	background: var(--tint);
	opacity: 1;
}

/* Haunt: reversed card with its own pastel pink / lavender palette. */
.mt-app--reverse .mt-app__stage {
	order: -1;
}

.mt-app--haunt {
	background:
		radial-gradient(120% 120% at 0% 0%, rgba(255, 143, 208, 0.26), transparent 50%),
		radial-gradient(90% 90% at 100% 100%, rgba(183, 140, 255, 0.24), transparent 50%),
		#100b17;
}

.mt-app--haunt .mt-app__tag {
	color: #ffa3d7;
}

.mt-app--haunt .mt-app__halo {
	background: conic-gradient(#b78cff, #ff8fd0, #ffc48f, #b78cff);
	opacity: 0.4;
}

.mt-app--haunt .mt-chips li:hover {
	border-color: rgba(255, 143, 208, 0.55);
	background: rgba(255, 143, 208, 0.14);
}

.mt-app__head {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.mt-icon--haunt {
	background: linear-gradient(135deg, #b78cff 0%, #ff8fd0 58%, #ffc48f 100%);
}

.mt-app__icon.mt-icon--haunt {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 20px 40px -12px rgba(255, 143, 208, 0.75);
}

.mt-icon--haunt .mt-ghost {
	width: 72%;
	filter: drop-shadow(0 3px 4px rgba(90, 40, 140, 0.35));
}

.mt-new {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.35rem 0.8rem;
	border: 1px solid rgba(255, 143, 208, 0.35);
	border-radius: 999px;
	background: rgba(255, 143, 208, 0.12);
	font-size: 0.75rem;
	font-weight: 600;
	color: #ffc2e4;
}

.mt-new::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ff8fd0;
	animation: mt-ping-pink 2s infinite;
}

/* The mascot drifts around the phone like it's haunting the card. */
.mt-haunt-ghost {
	position: absolute;
	top: 6%;
	right: 4%;
	z-index: 2;
	width: clamp(70px, 9vw, 112px);
	filter: drop-shadow(0 18px 30px rgba(255, 143, 208, 0.45));
	animation: mt-haunt 7s ease-in-out infinite;
}

.mt-haunt-ghost .mt-ghost {
	display: block;
	width: 100%;
}

/* Haunt's UI on a dark plum screen, keeping its pastel pink / lavender accents. */
.mt-haunt {
	gap: 9px;
	padding-top: 54px;
	background:
		radial-gradient(120% 55% at 100% 0%, rgba(255, 143, 208, 0.16), transparent 60%),
		linear-gradient(180deg, #1a1128 0%, #0e0a17 100%);
	font-size: 11.5px;
	color: #f3eefe;
}

.mt-haunt__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.mt-haunt__logo {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: linear-gradient(135deg, #b78cff, #ff8fd0 58%, #ffc48f);
}

.mt-haunt__logo .mt-ghost {
	width: 70%;
}

.mt-haunt__menu {
	width: 16px;
	height: 10px;
	margin-left: auto;
	border-block: 2px solid #a99bc4;
}

.mt-haunt__profile,
.mt-haunt__score,
.mt-haunt__feed {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.8);
}

.mt-haunt__profile {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
}

.mt-haunt__avatar {
	flex: none;
	width: 32px;
	height: 32px;
	border: 2px solid #1a1128;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 38%, #f3c9a8 0 28%, transparent 29%), linear-gradient(160deg, #6b4f3a 0 45%, #b78cff 46%);
	box-shadow: 0 0 0 2px #ff8fd0;
}

.mt-haunt__stat {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 4px 8px;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.06);
	font-size: 9.5px;
	line-height: 1.25;
	color: #a99bc4;
}

.mt-haunt__stat b {
	font-size: 12.5px;
	color: #f3eefe;
}

.mt-haunt__score {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 6px 8px;
	padding: 9px 11px;
}

.mt-haunt__score-label {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.mt-haunt__score-label small {
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #a99bc4;
}

.mt-haunt__score-label b {
	font-size: 12.5px;
	color: #c9adff;
}

.mt-haunt__score strong {
	font-size: 22px;
	letter-spacing: -0.03em;
	color: #c9adff;
	font-variant-numeric: tabular-nums;
}

.mt-haunt__score strong small {
	font-size: 11px;
	color: #a99bc4;
}

.mt-haunt__meter {
	grid-column: 1 / -1;
	height: 6px;
	overflow: hidden;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.1);
}

.mt-haunt__meter i {
	display: block;
	width: 44%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #b78cff, #ff8fd0);
	transform-origin: left;
	transition: transform 1.8s var(--mt-ease) 0.4s;
}

.js .mt-app:not(.is-in) .mt-haunt__meter i {
	transform: scaleX(0);
}

.mt-haunt__label {
	margin-top: 2px !important;
	font-size: 11px;
	font-weight: 700;
	color: #f3eefe;
}

.mt-haunt__pill {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	border-radius: 999px;
	font-size: 12px;
	color: #fff;
}

.mt-haunt__pill b {
	font-size: 15px;
}

.mt-haunt__pill--pink {
	background: linear-gradient(90deg, #ff7cc4, #ffa3d7);
	box-shadow: 0 8px 18px -8px rgba(255, 124, 196, 0.8);
}

.mt-haunt__pill--blue {
	background: linear-gradient(90deg, #7d8bff, #a5b2ff);
	box-shadow: 0 8px 18px -8px rgba(125, 139, 255, 0.8);
}

.mt-haunt__faces {
	display: flex;
}

.mt-haunt__faces i,
.mt-haunt__feed i {
	width: 20px;
	height: 20px;
	border: 2px solid #1a1128;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 40%, #f1c7a4 0 30%, transparent 31%), linear-gradient(160deg, var(--hair, #3b2a20) 0 48%, var(--shirt, #c4b5fd) 49%);
}

.mt-haunt__faces i + i {
	margin-left: -7px;
}

.mt-haunt__faces i:nth-child(2),
.mt-haunt__feed li:nth-child(2) i { --hair: #d9a35b; --shirt: #ffb3d9; }
.mt-haunt__faces i:nth-child(3),
.mt-haunt__feed li:nth-child(3) i { --hair: #1f1a17; --shirt: #a5f3fc; }
.mt-haunt__faces i:nth-child(4) { --hair: #8a4b2a; --shirt: #fde68a; }

.mt-haunt__feed {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 4px 10px;
	list-style: none;
}

.mt-haunt__feed li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font-size: 10.5px;
	color: #b9aed0;
}

.mt-haunt__feed li + li {
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.mt-haunt__feed li:first-child {
	animation: mt-feed-new 4s ease-in-out infinite;
}

.mt-haunt__feed i {
	flex: none;
	width: 22px;
	height: 22px;
	border: 0;
}

.mt-haunt__feed b {
	color: #f3eefe;
}

.mt-haunt__feed time {
	margin-left: auto;
	color: #8d80a8;
}

.mt-haunt__tip {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: auto;
	padding: 10px 11px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(183, 140, 255, 0.18), rgba(255, 143, 208, 0.14));
	font-size: 10.5px;
	line-height: 1.4;
	color: #c9bfdc;
}

.mt-haunt__tip b {
	color: #d6c2ff;
}

/* iCar: coming-soon card in the app's own green, with a CarPlay-style dashboard. */
.mt-app--icar {
	background:
		radial-gradient(110% 120% at 100% 0%, rgba(96, 228, 115, 0.22), transparent 50%),
		radial-gradient(90% 90% at 0% 100%, rgba(34, 211, 238, 0.12), transparent 50%),
		#0a110d;
}

.mt-app--icar .mt-app__tag {
	color: #7ff08f;
}

.mt-app--icar .mt-app__halo {
	background: conic-gradient(#60e473, #22d3ee, #b6f36b, #60e473);
	opacity: 0.32;
}

.mt-app--icar .mt-chips li:hover {
	border-color: rgba(96, 228, 115, 0.55);
	background: rgba(96, 228, 115, 0.12);
}

.mt-app__icon--img {
	display: block;
	object-fit: cover;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 20px 40px -12px rgba(96, 228, 115, 0.7);
}

.mt-new--soon {
	border-color: rgba(96, 228, 115, 0.4);
	background: rgba(96, 228, 115, 0.12);
	color: #a7f5b2;
}

.mt-new--soon::before {
	background: #60e473;
	animation-name: mt-ping-green;
}

.mt-store--soon {
	border: 1px dashed rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.05);
	color: var(--mt-text) !important;
	cursor: default;
}

.mt-store--soon:hover {
	transform: none;
	box-shadow: none;
}

.mt-app__stage--wide {
	min-height: 520px;
}

/* Unannounced dating app: coral teaser card, blurred screen behind a "coming soon" veil. */
.mt-app--dating {
	background:
		radial-gradient(120% 120% at 0% 0%, rgba(255, 122, 107, 0.24), transparent 50%),
		radial-gradient(90% 90% at 100% 100%, rgba(255, 184, 107, 0.16), transparent 50%),
		#120c0c;
}

.mt-app--dating .mt-app__tag {
	color: #ff9d90;
}

.mt-app--dating .mt-app__halo {
	background: conic-gradient(#ff7a6b, #ffb86b, #ff5ca8, #ff7a6b);
	opacity: 0.34;
}

.mt-app--dating .mt-chips li:hover {
	border-color: rgba(255, 122, 107, 0.55);
	background: rgba(255, 122, 107, 0.12);
}

.mt-app--dating .mt-new--soon {
	border-color: rgba(255, 122, 107, 0.4);
	background: rgba(255, 122, 107, 0.12);
	color: #ffc0b8;
}

.mt-app--dating .mt-new--soon::before {
	background: #ff7a6b;
	animation-name: mt-ping-pink;
}

.mt-icon--dating {
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, #ff5ca8 0%, #ff7a6b 55%, #ffb86b 100%);
	color: #fff;
}

.mt-app__icon.mt-icon--dating {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 20px 40px -12px rgba(255, 122, 107, 0.75);
}

.mt-icon--dating svg {
	width: 52%;
}

.mt-dating {
	padding: 0;
	background:
		radial-gradient(120% 55% at 0% 0%, rgba(255, 122, 107, 0.2), transparent 60%),
		linear-gradient(180deg, #1c1112 0%, #0d090a 100%);
}

.mt-dating__blur {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 58px 14px 14px;
	filter: blur(9px);
	opacity: 0.75;
}

.mt-dating__card {
	display: grid;
	grid-template-columns: 54px 1fr;
	grid-template-rows: auto auto;
	column-gap: 12px;
	row-gap: 8px;
	align-items: center;
	padding: 14px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.07);
}

.mt-dating__card i {
	grid-row: span 2;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: linear-gradient(135deg, #ff9d90, #ff5ca8);
}

.mt-dating__card:nth-child(2) i { background: linear-gradient(135deg, #ffb86b, #ff7a6b); }
.mt-dating__card:nth-child(3) i { background: linear-gradient(135deg, #b78cff, #ff8fd0); }

.mt-dating__card b,
.mt-dating__card small {
	height: 9px;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.4);
}

.mt-dating__card small {
	width: 60%;
	background: rgba(255, 255, 255, 0.2);
}

.mt-dating__veil {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 24px;
	background: radial-gradient(70% 45% at 50% 50%, rgba(13, 9, 10, 0.75), transparent);
	text-align: center;
}

.mt-dating__lock {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg, #ff5ca8, #ff7a6b 55%, #ffb86b);
	color: #fff;
	box-shadow: 0 16px 40px -10px rgba(255, 122, 107, 0.8);
	animation: mt-heartbeat 2.4s ease-in-out infinite;
}

.mt-dating__lock svg {
	width: 30px;
}

.mt-dating__veil b {
	font-size: 17px;
	line-height: 1.25;
	color: #fff;
}

.mt-dating__veil small {
	padding: 4px 12px;
	border: 1px solid rgba(255, 122, 107, 0.4);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffc0b8;
}

@keyframes mt-heartbeat {
	0%, 100% { transform: scale(1); }
	12% { transform: scale(1.12); }
	24% { transform: scale(1); }
	36% { transform: scale(1.08); }
}

.mt-carplay {
	position: relative;
	width: min(560px, 100%);
	aspect-ratio: 16 / 10;
	padding: 12px;
	border-radius: 30px;
	background: linear-gradient(145deg, #2a2d2b, #0a0b0a 45%, #1b1e1c);
	box-shadow:
		inset 0 0 0 1.5px rgba(255, 255, 255, 0.12),
		inset 0 0 0 6px #000,
		0 50px 100px -25px rgba(0, 0, 0, 0.9),
		0 30px 80px -30px rgba(96, 228, 115, 0.55);
	transform: rotateY(var(--ry, -10deg)) rotateX(var(--rx, 6deg));
	transition: transform 0.6s var(--mt-ease);
}

/* Glass reflection over the screen. */
.mt-carplay::after {
	content: "";
	position: absolute;
	inset: 12px;
	border-radius: 20px;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0.08), transparent 35%);
	pointer-events: none;
}

.mt-carplay__screen {
	display: flex;
	height: 100%;
	overflow: hidden;
	border-radius: 20px;
	background: #050806;
	text-align: left;
}

.mt-carplay__side {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 64px;
	padding: 12px 0;
	border-right: 1px solid var(--mt-line);
	background: rgba(255, 255, 255, 0.04);
}

.mt-carplay__time {
	font-size: 13px;
	font-weight: 600;
}

.mt-carplay__signal {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 10px;
	margin-bottom: 6px;
}

.mt-carplay__signal i {
	width: 3px;
	border-radius: 1px;
	background: #fff;
}

.mt-carplay__signal i:nth-child(1) { height: 30%; }
.mt-carplay__signal i:nth-child(2) { height: 55%; }
.mt-carplay__signal i:nth-child(3) { height: 80%; }
.mt-carplay__signal i:nth-child(4) { height: 100%; opacity: 0.35; }

.mt-carplay__app {
	display: block;
	width: 38px;
	height: 38px;
	border-radius: 10px;
}

.mt-carplay__app--maps {
	background:
		linear-gradient(135deg, transparent 46%, #fff 47% 53%, transparent 54%),
		linear-gradient(135deg, #7ee38b, #3fb8f5);
}

.mt-carplay__app--music {
	background: radial-gradient(circle at 42% 62%, #fff 0 14%, transparent 15%), linear-gradient(135deg, #ff6b8b, #ff2d55);
}

img.mt-carplay__app {
	box-shadow: 0 0 0 2px #050806, 0 0 0 4px #60e473;
}

.mt-carplay__grid {
	display: grid;
	flex: 1;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 10px;
	padding: 12px;
}

.mt-cw {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
	padding: 12px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	background: linear-gradient(160deg, #141c17, #0c110e);
	font-size: 11px;
	color: #dfe9e2;
}

.mt-cw__label {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #7f9a88;
}

.mt-cw__title {
	font-size: 14px;
	letter-spacing: -0.01em;
	color: #fff;
}

.mt-cw--clock {
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: radial-gradient(circle at 50% 40%, #0f3b2a, #07140e);
}

.mt-dial {
	position: relative;
	width: 72%;
	max-width: 104px;
	aspect-ratio: 1;
	border: 3px solid #d9b65f;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, #138a5c, #0a4a32 70%);
	box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.6);
}

.mt-dial::before {
	content: "";
	position: absolute;
	inset: 5%;
	border-radius: 50%;
	background: repeating-conic-gradient(from -1deg, #ecd08a 0 2deg, transparent 2deg 30deg);
	-webkit-mask: radial-gradient(circle, transparent 0 76%, #000 77%);
	mask: radial-gradient(circle, transparent 0 76%, #000 77%);
}

.mt-dial i {
	position: absolute;
	bottom: 50%;
	left: 50%;
	width: 3px;
	margin-left: -1.5px;
	border-radius: 2px;
	background: #f1d48a;
	transform-origin: 50% 100%;
	animation: mt-hand 720s linear infinite;
}

/* Starts at 9:41, like the status bar, then runs at real speed. */
.mt-dial__h { --a: 290deg; height: 24%; animation-duration: 43200s !important; }
.mt-dial__m { --a: 246deg; height: 36%; width: 2px !important; animation-duration: 3600s !important; }
.mt-dial__s { height: 40%; width: 1px !important; margin-left: -0.5px !important; background: #60e473 !important; animation-duration: 60s !important; animation-timing-function: steps(60) !important; }

.mt-dial b {
	position: absolute;
	inset: 45%;
	border-radius: 50%;
	background: #f1d48a;
}

.mt-cw--sound {
	background: linear-gradient(160deg, #1d1433, #0d0a18);
}

.mt-cw--sound .mt-cw__label {
	padding-right: 32px;
}

.mt-wave {
	display: flex;
	align-items: center;
	gap: 3px;
	height: 34px;
}

.mt-wave i {
	flex: 1;
	height: 30%;
	border-radius: 2px;
	background: linear-gradient(#60e473, #22d3ee);
	animation: mt-wave 1.1s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -0.09s);
}

.mt-cw__play {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #60e473;
	box-shadow: 0 0 18px rgba(96, 228, 115, 0.6);
}

.mt-cw__play::after {
	content: "";
	position: absolute;
	top: 8px;
	left: 10px;
	border-left: 8px solid #06210f;
	border-block: 5px solid transparent;
}

.mt-cw--cal {
	justify-content: flex-start;
	gap: 6px;
}

.mt-cal {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px 2px;
	font-size: 8.5px;
	line-height: 1.55;
	text-align: center;
	color: #b7c9bc;
}

.mt-cal .is-today {
	border-radius: 4px;
	background: #60e473;
	font-weight: 700;
	color: #06210f;
}

.mt-cw--count {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	background: linear-gradient(160deg, #0f2a33, #08151a);
}

.mt-cw--count > span:last-child {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mt-cw--count small {
	font-size: 10px;
	color: #7f9a88;
}

.mt-ring {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: 64px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: conic-gradient(#22d3ee calc(var(--v, 0.5) * 360deg), rgba(255, 255, 255, 0.1) 0);
}

.mt-ring::before {
	content: "";
	position: absolute;
	inset: 6px;
	border-radius: 50%;
	background: #0b1d23;
}

.mt-ring b {
	position: relative;
	font-size: 20px;
	color: #fff;
}

.mt-icar-badge {
	position: absolute;
	bottom: 8%;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid var(--mt-line-2);
	border-radius: 16px;
	background: rgba(20, 28, 22, 0.72);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
	font-size: 12.5px;
	line-height: 1.35;
	text-align: left;
	animation: mt-bob 6s ease-in-out infinite;
}

.mt-icar-badge img {
	width: 32px;
	height: 32px;
	border-radius: 9px;
}

/* --------------------------------------------- Process (horizontal scroll) */

.mt-process {
	position: relative;
	padding-block: clamp(4rem, 10vw, 8rem);
}

.mt-process__sticky {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 5vw, 3.5rem);
	overflow: hidden;
}

.mt-process__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}

.mt-process__track {
	position: relative;
	display: flex;
	gap: 16px;
	padding-inline: max(var(--mt-gutter), calc((100vw - 1240px) / 2));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--mt-gutter);
	scrollbar-width: none;
}

.mt-process__track::-webkit-scrollbar {
	display: none;
}

.mt-step {
	position: relative;
	isolation: isolate;
	display: flex;
	flex: 0 0 min(420px, 82vw);
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.75rem;
	min-height: clamp(320px, 42vh, 420px);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	overflow: hidden;
	border: 1px solid var(--mt-line);
	border-radius: var(--mt-radius);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
	scroll-snap-align: start;
}

.mt-step__num {
	position: absolute;
	top: 1rem;
	right: 1.5rem;
	font-size: clamp(5rem, 9vw, 8.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.06em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
	background: var(--mt-grad) no-repeat;
	background-size: 0% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	transition: background-size 1s var(--mt-ease), -webkit-text-stroke-color 1s;
}

.mt-step.is-active .mt-step__num,
.mt-step:hover .mt-step__num {
	background-size: 100% 100%;
	-webkit-text-stroke-color: transparent;
}

.mt-step__title {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 600;
	letter-spacing: -0.04em;
}

.mt-step__text {
	max-width: 32ch;
	color: var(--mt-muted);
}

.mt-process__bar {
	width: min(1240px, calc(100% - 2 * var(--mt-gutter)));
	height: 2px;
	margin-inline: auto;
	overflow: hidden;
	border-radius: 2px;
	background: var(--mt-line);
}

.mt-process__bar i {
	display: block;
	height: 100%;
	background: var(--mt-grad);
	transform: scaleX(var(--pp, 0));
	transform-origin: left;
}

/* Desktop: JS pins the section and drives the track sideways with scroll. */
.mt-process.is-pinned {
	height: var(--pin-h, auto);
	padding-block: 0;
}

.mt-process.is-pinned .mt-process__sticky {
	position: sticky;
	top: 0;
	justify-content: center;
	height: 100vh;
	height: 100svh;
}

.mt-process.is-pinned .mt-process__track {
	overflow: visible;
	scroll-snap-type: none;
	transform: translate3d(calc(var(--shift, 0) * -1px), 0, 0);
	will-change: transform;
}

/* ------------------------------------------------------------- Statement */

.mt-statement .mt-wrap {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.mt-scrub {
	max-width: 22ch;
	font-size: clamp(2rem, 5vw, 4.5rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.045em;
	text-wrap: pretty;
}

.js .mt-scrub.is-split .w {
	opacity: 0.14;
}

/* ------------------------------------------------------------------- CTA */

.mt-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(7rem, 18vw, 14rem);
	text-align: center;
}

.mt-cta__ring {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	width: min(1100px, 150vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: conic-gradient(#8b5cf6, #22d3ee, #ff5ca8, #8b5cf6);
	opacity: 0.32;
	filter: blur(90px);
	translate: -50% -50%;
	-webkit-mask-image: radial-gradient(closest-side, transparent 38%, #000 62%, transparent 100%);
	mask-image: radial-gradient(closest-side, transparent 38%, #000 62%, transparent 100%);
	animation: mt-rotate 20s linear infinite;
}

.mt-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.mt-cta__title {
	max-width: 11ch;
	font-size: clamp(3.25rem, 11vw, 9.5rem);
	font-weight: 600;
	line-height: 0.92;
	letter-spacing: -0.06em;
}

.mt-cta .mt-lead {
	margin-inline: auto;
}

.mt-cta .wp-block-buttons {
	padding-top: 1rem;
}

/* ---------------------------------------------------------------- Footer */

.mt-footer {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-top: clamp(4rem, 8vw, 6rem);
	overflow: hidden;
	border-top: 1px solid var(--mt-line);
}

.mt-footer__top {
	display: grid;
	grid-template-columns: 2fr repeat(3, 1fr);
	gap: 2.5rem;
}

.mt-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.mt-footer__brand .wp-block-site-title {
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.mt-footer__brand p {
	max-width: 30ch;
	color: var(--mt-muted);
}

.mt-footer__col {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.mt-footer__col h2 {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mt-muted);
}

.mt-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-footer__col a {
	text-decoration: none;
	color: var(--mt-text);
	opacity: 0.85;
	transition: opacity 0.3s, color 0.3s;
}

.mt-footer__col a:hover {
	color: #67e8f9;
	opacity: 1;
}

.mt-footer__word {
	padding-top: clamp(3rem, 7vw, 6rem);
	line-height: 0.78;
	text-align: center;
	user-select: none;
}

.mt-footer__word > span {
	display: block;
	font-size: 24vw;
	font-weight: 700;
	letter-spacing: -0.035em;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 80%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	translate: 0 var(--fy, 0%);
}

.mt-footer__letter {
	transition: font-weight 0.45s var(--mt-ease);
}

.mt-footer__bottom {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-block: 1.5rem 2rem;
	border-top: 1px solid var(--mt-line);
	font-size: 0.875rem;
	color: var(--mt-muted);
}

/* ----------------------------------------------------------------- Pages */

.mt-page {
	padding-top: calc(var(--mt-header-h) + clamp(3rem, 8vw, 6rem));
	padding-bottom: clamp(4rem, 10vw, 8rem);
}

.mt-page__title {
	font-size: clamp(2.5rem, 6vw, 4.75rem);
	font-weight: 600;
	letter-spacing: -0.045em;
}

.mt-legal__meta {
	gap: 0.35rem;
	font-size: 0.9375rem;
	color: var(--mt-muted);
}

/* WordPress prints the modified date only after a later edit; until then show the publish date. */
.mt-legal__meta:has(.wp-block-post-date__modified-date) .mt-date-published {
	display: none;
}

.mt-legal > .mt-eyebrow {
	display: flex;
}

.mt-prose .mt-lead {
	max-width: none;
}

.mt-prose .wp-block-table thead {
	border-bottom: 0;
}

.mt-legal .mt-prose {
	margin-top: clamp(2rem, 5vw, 3.5rem);
	padding-top: clamp(2rem, 5vw, 3rem);
	border-top: 1px solid var(--mt-line);
}

.mt-prose :is(p, li) {
	color: #c9c9d6;
	line-height: 1.75;
}

.mt-prose h2 {
	margin-top: 2.5em;
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	letter-spacing: -0.03em;
}

.mt-prose h3 {
	margin-top: 2em;
	font-size: 1.1875rem;
	letter-spacing: -0.02em;
}

.mt-prose a {
	color: #67e8f9;
	text-underline-offset: 3px;
}

.mt-prose strong {
	color: var(--mt-text);
}

.mt-prose ul {
	padding-left: 1.25em;
}

.mt-prose li + li {
	margin-top: 0.4em;
}

.mt-prose li::marker {
	color: #8b5cf6;
}

/* "At a glance" summary box. */
.mt-callout {
	padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
	border: 1px solid rgba(139, 92, 246, 0.35);
	border-radius: 20px;
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(34, 211, 238, 0.06));
}

.mt-callout > * {
	margin-block: 0;
}

.mt-callout > * + * {
	margin-top: 0.75rem;
}

.mt-callout .mt-callout__title {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #c4b5fd;
}

.mt-prose .wp-block-table {
	overflow-x: auto;
}

.mt-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.mt-prose :is(th, td) {
	padding: 0.75rem 1rem;
	border: 0;
	border-bottom: 1px solid var(--mt-line);
	text-align: left;
	vertical-align: top;
}

.mt-prose th {
	border-bottom-color: var(--mt-line-2);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mt-muted);
}

.mt-prose td {
	color: #c9c9d6;
}

.mt-prose td:first-child {
	color: var(--mt-text);
	font-weight: 500;
}

/* Legal hub: one card per app. */
.mt-legal-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
	gap: 12px;
}

.mt-legal-grid > * {
	margin: 0 !important;
}

.mt-legal-card {
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--mt-line);
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
}

.mt-legal-card > * {
	margin-block: 0;
}

.mt-legal-card h3 {
	margin: 0 0 0.75rem;
	font-size: 1.125rem;
	letter-spacing: -0.02em;
}

.mt-prose .mt-legal-card ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-prose .mt-legal-card a {
	color: var(--mt-text);
	text-decoration: none;
}

.mt-prose .mt-legal-card a:hover {
	color: #67e8f9;
}

.mt-prose .mt-legal-card a::after {
	content: " →";
	color: var(--mt-muted);
}

.mt-legal-card__soon {
	white-space: nowrap;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: rgba(96, 228, 115, 0.12);
	font-size: 0.75rem;
	color: #a7f5b2;
}

.mt-app__links {
	display: flex;
	gap: 1.25rem;
	margin: 0;
}

.mt-app__legal {
	font-size: 0.875rem;
	color: var(--mt-muted) !important;
	text-underline-offset: 3px;
}

.mt-app__legal:hover {
	color: var(--mt-text) !important;
}

/* FAQ accordion (core Details block). */
.mt-prose .wp-block-details.mt-faq {
	padding: 0;
	border: 1px solid var(--mt-line);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.025);
	transition: border-color 0.3s, background 0.3s;
}

.mt-prose .mt-faq + .mt-faq {
	margin-top: 10px;
}

.mt-prose .mt-faq[open] {
	border-color: rgba(139, 92, 246, 0.4);
	background: rgba(139, 92, 246, 0.06);
}

.mt-prose .mt-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.05rem 1.25rem;
	font-weight: 600;
	color: var(--mt-text);
	cursor: pointer;
	list-style: none;
}

.mt-prose .mt-faq summary::-webkit-details-marker {
	display: none;
}

.mt-prose .mt-faq summary::after {
	content: "+";
	flex: none;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1;
	color: var(--mt-muted);
	transition: transform 0.35s var(--mt-ease);
}

.mt-prose .mt-faq[open] summary::after {
	transform: rotate(45deg);
	color: #c4b5fd;
}

.mt-prose .mt-faq > p {
	margin: 0;
	padding: 0 1.25rem 1.15rem;
}

.mt-post-list {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.mt-404 {
	text-align: center;
}

.mt-404__code {
	font-size: clamp(7rem, 26vw, 18rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.07em;
	background: var(--mt-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.mt-404 .mt-lead {
	margin-inline: auto;
}

/* ------------------------------------------------- Page transitions */

@view-transition {
	navigation: auto;
}

body:not(.editor-styles-wrapper) .mt-header {
	view-transition-name: mt-header;
}

::view-transition-old(root) {
	animation: mt-page-out 0.3s var(--mt-ease) both;
}

::view-transition-new(root) {
	animation: mt-page-in 0.6s var(--mt-ease) both;
}

@keyframes mt-page-out {
	to { opacity: 0; transform: translateY(-14px) scale(0.99); }
}

@keyframes mt-page-in {
	from { opacity: 0; transform: translateY(22px); }
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}

/* ------------------------------------------------- Scroll-in animations */

.js .mt-reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1s var(--mt-ease), transform 1s var(--mt-ease);
	transition-delay: var(--d, 0s);
}

.js .mt-reveal.is-in {
	opacity: 1;
	transform: none;
}

.mt-split .w {
	display: inline-block;
}

.js .mt-split .w {
	opacity: 0;
	filter: blur(12px);
	transform: translateY(0.35em);
	transition: opacity 0.9s var(--mt-ease), filter 0.9s var(--mt-ease), transform 0.9s var(--mt-ease);
	transition-delay: calc(var(--i, 0) * 55ms + var(--d, 0s));
}

.js .mt-split.is-in .w {
	opacity: 1;
	filter: none;
	transform: none;
}

/* Hero intro order: pill → headline → lead → buttons. */
.mt-hero__title { --d: 0.12s; }
.mt-hero .mt-lead { --d: 0.55s; }
.mt-hero__actions { --d: 0.7s; }

/* ----------------------------------------------------------- Responsive */

@media (max-width: 1100px) {
	.mt-float:nth-child(1) { left: 0; }
	.mt-float:nth-child(2) { left: 2%; }
	.mt-float:nth-child(3) { right: 0; }
	.mt-float:nth-child(4) { right: 2%; }
}

@media (max-width: 960px) {
	.mt-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mt-bento__a {
		grid-column: span 2;
		grid-row: auto;
	}

	.mt-app {
		grid-template-columns: 1fr;
	}

	.mt-app__stage {
		min-height: 560px;
	}

	.mt-app--reverse .mt-app__stage {
		order: 0;
	}

	.mt-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 1rem;
	}

	.mt-stat:nth-child(3) {
		border-left: 0;
		padding-left: 0;
	}

	.mt-footer__top {
		grid-template-columns: repeat(3, 1fr);
	}

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

@media (max-width: 720px) {
	.mt-hero__stage {
		--pw: 250px;
	}

	.mt-phone {
		--pw: 250px;
	}

	.mt-phone__screen {
		padding: 50px 11px 11px;
		font-size: 11.5px;
	}

	.mt-phone__screen--multi {
		padding: 0;
	}

	.mt-screen {
		padding: 50px 11px 11px;
	}

	.mt-float--llm,
	.mt-float--diffusion {
		display: none;
	}

	.mt-float:nth-child(3) { top: 8%; right: -2%; }
	.mt-float:nth-child(4) { top: 86%; left: -2%; right: auto; }

	.mt-float__card {
		padding: 10px 12px;
		font-size: 12px;
	}

	.mt-notify {
		max-width: 210px;
		white-space: normal;
	}

	.mt-bento {
		grid-template-columns: 1fr;
	}

	.mt-bento__a,
	.mt-bento__d {
		grid-column: auto;
	}

	.mt-bento__d {
		flex-direction: column;
		align-items: flex-start;
	}

	.mt-visual--globe .mt-globe {
		--size: 180px;
	}

	.mt-phone--app {
		--pw: 250px;
	}

	.mt-app__stage {
		min-height: 520px;
	}

	.mt-app__stage--wide {
		min-height: 300px;
	}

	.mt-carplay {
		padding: 8px;
		border-radius: 22px;
	}

	.mt-carplay__side {
		width: 44px;
		gap: 7px;
		padding: 8px 0;
	}

	.mt-carplay__time {
		font-size: 10px;
	}

	.mt-carplay__app {
		width: 26px;
		height: 26px;
		border-radius: 7px;
	}

	.mt-carplay__grid {
		grid-template-rows: 1fr;
		gap: 7px;
		padding: 8px;
	}

	.mt-cw--cal,
	.mt-cw--count {
		display: none;
	}

	.mt-icar-badge {
		bottom: -2%;
	}

	.mt-footer__top {
		grid-template-columns: 1fr 1fr;
	}
}

/* ------------------------------------------------------------ Keyframes */

@keyframes mt-ping {
	0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.6); }
	80%, 100% { box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); }
}

@keyframes mt-ping-green {
	0% { box-shadow: 0 0 0 0 rgba(96, 228, 115, 0.6); }
	80%, 100% { box-shadow: 0 0 0 8px rgba(96, 228, 115, 0); }
}

@keyframes mt-ping-pink {
	0% { box-shadow: 0 0 0 0 rgba(255, 92, 168, 0.6); }
	80%, 100% { box-shadow: 0 0 0 8px rgba(255, 92, 168, 0); }
}

@keyframes mt-shine {
	to { background-position: 200% center; }
}

@keyframes mt-drift {
	0% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(7vw, 5vh) scale(1.12); }
	100% { transform: translate(-5vw, 9vh) scale(0.95); }
}

@keyframes mt-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}

@keyframes mt-eq {
	0%, 100% { height: 25%; background-position: 0 0; }
	50% { height: 100%; background-position: 0 100%; }
}

@keyframes mt-diffuse {
	0% { filter: blur(6px) saturate(0) contrast(0.6); transform: rotate(0deg); }
	65%, 85% { filter: blur(0) saturate(1.2) contrast(1); }
	100% { filter: blur(6px) saturate(0) contrast(0.6); transform: rotate(180deg); }
}

@keyframes mt-globe {
	to { background-position: 400px 0; }
}

@keyframes mt-marquee {
	to { transform: translateX(-50%); }
}

@keyframes mt-dash {
	to { stroke-dashoffset: -28; }
}

@keyframes mt-node {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.25); }
}

@keyframes mt-token {
	0% { opacity: 0.3; }
	6% { opacity: 1; border-color: rgba(139, 92, 246, 0.8); background: rgba(139, 92, 246, 0.3); }
	20%, 100% { opacity: 1; }
}

@keyframes mt-blink {
	50% { opacity: 0; }
}

@keyframes mt-denoise {
	0%, 100% { filter: blur(16px) saturate(0.3); transform: scale(1.1); }
	55%, 90% { filter: blur(0) saturate(1.1); transform: scale(1); }
}

@keyframes mt-noise-fade {
	0%, 100% { opacity: 0.95; }
	55%, 90% { opacity: 0; }
}

@keyframes mt-rotate {
	to { rotate: 360deg; }
}

@keyframes mt-tile {
	0%, 12% { border-color: rgba(139, 92, 246, 0.7); background: rgba(139, 92, 246, 0.2); }
	18%, 100% { border-color: var(--mt-line); background: rgba(255, 255, 255, 0.05); }
}

@keyframes mt-fill {
	from { transform: scaleX(0.35); }
	to { transform: scaleX(1); }
}

@keyframes mt-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
	30% { transform: translateY(-4px); opacity: 1; }
}

@keyframes mt-pop {
	from { opacity: 0; transform: translateY(10px) scale(0.96); }
}

@keyframes mt-hand {
	from { transform: rotate(var(--a, 0deg)); }
	to { transform: rotate(calc(var(--a, 0deg) + 360deg)); }
}

@keyframes mt-wave {
	0%, 100% { height: 20%; }
	50% { height: 100%; }
}

@keyframes mt-swap {
	0%, 44% { opacity: 1; transform: none; }
	50%, 94% { opacity: 0; transform: translateY(-8px); }
	100% { opacity: 1; transform: none; }
}

@keyframes mt-haunt {
	0%, 100% { transform: translate(0, 0) rotate(-6deg); opacity: 1; }
	30% { transform: translate(-14px, -18px) rotate(4deg); opacity: 0.92; }
	60% { transform: translate(8px, -6px) rotate(-2deg); opacity: 0.75; }
	80% { transform: translate(-4px, 6px) rotate(6deg); opacity: 1; }
}

@keyframes mt-feed-new {
	0%, 100% { background: transparent; }
	15%, 40% { background: linear-gradient(90deg, rgba(255, 143, 208, 0.16), transparent); }
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.mt-notify__item + .mt-notify__item {
		display: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
}