/* ==========================================================================
   Amancom — design system
   No framework, no build step. One stylesheet, custom properties throughout.
   Dark mode is a first-class citizen here rather than an override layer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
	/* "light dark" lets the OS decide, which is wrong here: the site has its own
	   theme switch. With the OS in light mode and the page in dark mode the
	   browser drew native controls light -- a white <select> dropdown list on a
	   dark form. Binding color-scheme to data-theme below keeps the native
	   widgets (dropdown lists, scrollbars, date pickers, autofill) in step with
	   the theme the visitor actually chose. */
	color-scheme: light dark;

	/* Brand — carried over from the existing identity */
	--navy-50:  #eef4fa;
	--navy-100: #d6e4f2;
	--navy-300: #7ba3c9;
	--navy-500: #2e5f8f;
	--navy-600: #1e4369;
	--navy-700: #17344f;
	--navy-800: #102437;
	--navy-900: #0a1826;

	--red-400: #ff6b73;
	--red-500: #d31e27;
	--red-600: #b0161e;

	--accent: #00b4d8;

	/* Semantic — light theme */
	--bg:            #ffffff;
	--bg-alt:        #f4f7fb;
	--surface:       #ffffff;
	--surface-2:     #eef2f8;
	--surface-glass: rgba(255, 255, 255, .78);
	--border:        #dfe6f0;
	--border-strong: #c3cfe0;

	--text:       #0d1b2a;
	--text-muted: #4d6079;
	--text-faint: #7286a0;

	--brand:       var(--navy-600);
	--brand-text:  #ffffff;
	--link:        var(--navy-600);
	--link-hover:  var(--red-500);

	--hero-from: #0a1826;
	--hero-to:   #1e4369;
	--hero-text: #ffffff;

	--shadow-sm: 0 1px 2px rgba(13, 27, 42, .07), 0 1px 3px rgba(13, 27, 42, .06);
	--shadow-md: 0 6px 16px rgba(13, 27, 42, .09), 0 2px 6px rgba(13, 27, 42, .06);
	--shadow-lg: 0 18px 44px rgba(13, 27, 42, .14), 0 6px 14px rgba(13, 27, 42, .07);
	--ring: 0 0 0 3px rgba(46, 95, 143, .35);

	/* Type — fluid, so it works from 360px to 1920px without breakpoints */
	--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-ar:   "Cairo", "Tajawal", var(--font-sans);

	--step--1: clamp(.82rem, .79rem + .12vw, .89rem);
	--step-0:  clamp(1rem, .96rem + .18vw, 1.09rem);
	--step-1:  clamp(1.2rem, 1.12rem + .38vw, 1.45rem);
	--step-2:  clamp(1.45rem, 1.3rem + .72vw, 1.95rem);
	--step-3:  clamp(1.75rem, 1.48rem + 1.3vw, 2.6rem);
	--step-4:  clamp(2.1rem, 1.62rem + 2.3vw, 3.5rem);
	--step-5:  clamp(2.5rem, 1.7rem + 3.8vw, 4.6rem);

	/* Space */
	--sp-1: .25rem;
	--sp-2: .5rem;
	--sp-3: .75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;

	--radius-sm: 8px;
	--radius:    14px;
	--radius-lg: 22px;
	--radius-pill: 999px;

	--container: 1200px;
	--ease: cubic-bezier(.4, 0, .2, 1);
	--t: 200ms var(--ease);
}

/* Dark theme. Applied via an explicit attribute so it is deterministic; the
   script in <head> resolves the OS preference into that attribute before
   first paint. */
:root[data-theme="dark"] {
	--bg:            #080f18;
	--bg-alt:        #0d1725;
	--surface:       #111d2c;
	--surface-2:     #182839;
	--surface-glass: rgba(17, 29, 44, .82);
	--border:        #22354b;
	--border-strong: #32485f;

	--text:       #e8eff8;
	--text-muted: #9db0c7;
	--text-faint: #74889f;

	--brand:      var(--navy-500);
	--link:       #7cb4e8;
	--link-hover: var(--red-400);

	--hero-from: #050b12;
	--hero-to:   #14304c;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
	--shadow-md: 0 6px 16px rgba(0, 0, 0, .55);
	--shadow-lg: 0 18px 44px rgba(0, 0, 0, .6);
	--ring: 0 0 0 3px rgba(124, 180, 232, .4);
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

body {
	font-family: var(--font-sans);
	font-size: var(--step-0);
	line-height: 1.65;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	transition: background-color var(--t), color var(--t);
}

html[lang="ar"] body { font-family: var(--font-ar); }

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: var(--link); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--link-hover); }

h1, h2, h3, h4 {
	line-height: 1.15;
	letter-spacing: -.02em;
	font-weight: 700;
	text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }

p { text-wrap: pretty; }

ul[class] { list-style: none; padding: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
	outline: 3px solid var(--navy-500);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

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

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.container {
	width: min(100% - 2.5rem, var(--container));
	margin-inline: auto;
}

.section { padding-block: var(--sp-9); }
.section--tight { padding-block: var(--sp-8); }
.section--alt { background: var(--bg-alt); }

.stack > * + * { margin-top: var(--sp-4); }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.section-head {
	max-width: 42rem;
	margin-inline: auto;
	text-align: center;
	margin-bottom: var(--sp-7);
}

.section-head p {
	color: var(--text-muted);
	margin-top: var(--sp-3);
	font-size: var(--step-1);
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--red-500);
	margin-bottom: var(--sp-3);
}

:root[data-theme="dark"] .eyebrow { color: var(--red-400); }

.eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.skip-link {
	position: absolute;
	inset-inline-start: 1rem;
	top: -6rem;
	z-index: 200;
	padding: var(--sp-3) var(--sp-5);
	background: var(--navy-600);
	color: #fff;
	font-weight: 600;
	border-radius: 0 0 var(--radius) var(--radius);
	transition: top var(--t);
}

.skip-link:focus { top: 0; color: #fff; }

.header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--surface-glass);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--t), box-shadow var(--t);
}

.header.is-stuck {
	border-bottom-color: var(--border);
	box-shadow: var(--shadow-sm);
}

.header__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	min-height: 72px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	font-weight: 800;
	font-size: var(--step-1);
	letter-spacing: -.02em;
	color: var(--text);
	flex-shrink: 0;
}

.brand:hover { color: var(--text); }

.brand__mark {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: linear-gradient(140deg, var(--navy-500), var(--navy-700));
	color: #fff;
	box-shadow: var(--shadow-sm);
	flex-shrink: 0;
}

.brand__mark svg { width: 22px; height: 22px; }
.brand__sub { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .18em; color: var(--text-faint); text-transform: uppercase; }

.nav { margin-inline-start: auto; }

.nav__list {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	margin: 0;
}

.nav__link {
	display: block;
	padding: var(--sp-2) var(--sp-4);
	border-radius: var(--radius-pill);
	font-weight: 500;
	color: var(--text-muted);
	transition: color var(--t), background-color var(--t);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
	color: var(--text);
	background: var(--surface-2);
}

.header__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	flex-shrink: 0;
}

.icon-btn {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	width: 40px;
	height: 40px;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
	transition: border-color var(--t), background var(--t), transform var(--t);
}

.icon-btn:hover { border-color: var(--navy-500); transform: translateY(-1px); }
.icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Icon buttons that also carry a label grow into a pill. The row layout
   itself now comes from .icon-btn, so this only sets the size. */
.lang-btn {
	width: auto;
	padding-inline: var(--sp-4);
	font-size: var(--step--1);
	font-weight: 600;
	line-height: 1;
}

.lang-btn svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

.lang-btn span {
	line-height: 1;
	white-space: nowrap;
}

.nav-toggle { display: none; }

/* Mobile nav */
@media (max-width: 1120px) {
	.nav-toggle { display: inline-grid; }

	.nav {
		position: fixed;
		inset: 72px 0 auto 0;
		background: var(--surface);
		border-bottom: 1px solid var(--border);
		box-shadow: var(--shadow-lg);
		padding: var(--sp-4) 1.25rem var(--sp-6);
		display: none;
	}

	.nav.is-open { display: block; }

	.nav__list { flex-direction: column; align-items: stretch; gap: 0; }

	.nav__link {
		padding: var(--sp-4);
		border-radius: var(--radius);
		min-height: 48px;
		border-bottom: 1px solid var(--border);
	}
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: .8rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: var(--step-0);
	cursor: pointer;
	white-space: nowrap;
	transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t), color var(--t);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.btn--primary {
	background: var(--red-500);
	color: #fff;
	box-shadow: 0 6px 18px rgba(211, 30, 39, .32);
}

.btn--primary:hover { background: var(--red-600); color: #fff; box-shadow: 0 10px 26px rgba(211, 30, 39, .4); }

.btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, .32);
	color: #fff;
}

.btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .6); }

.btn--outline {
	background: var(--surface);
	border-color: var(--border-strong);
	color: var(--text);
}

.btn--outline:hover { border-color: var(--navy-500); color: var(--text); box-shadow: var(--shadow-md); }

.btn--lg { padding: 1rem 2rem; font-size: var(--step-1); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	background: linear-gradient(150deg, var(--hero-from) 0%, var(--hero-to) 62%, var(--navy-700) 100%);
	color: var(--hero-text);
	overflow: hidden;
	isolation: isolate;
}

/* Faint grid + glow, drawn in CSS so there is no image to load */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 75%);
	z-index: -1;
}

.hero::after {
	content: "";
	position: absolute;
	width: 620px;
	height: 620px;
	inset-inline-end: -180px;
	top: -220px;
	background: radial-gradient(circle, rgba(0, 180, 216, .28), transparent 62%);
	filter: blur(30px);
	z-index: -1;
}

.hero__inner {
	display: grid;
	gap: var(--sp-7);
	align-items: center;
	padding-block: clamp(3.5rem, 8vw, 7rem);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.hero__inner { grid-template-columns: 1.05fr .95fr; }
}

.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--accent); }

.hero__lead {
	margin-top: var(--sp-5);
	font-size: var(--step-1);
	color: rgba(255, 255, 255, .82);
	max-width: 34rem;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

.hero .eyebrow { color: var(--accent); }

.hero__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-4);
	margin-top: var(--sp-7);
	padding-top: var(--sp-6);
	border-top: 1px solid rgba(255, 255, 255, .16);
}

.hero__stat b {
	display: block;
	font-size: var(--step-3);
	font-weight: 800;
	letter-spacing: -.03em;
	color: #fff;
}

.hero__stat span { font-size: var(--step--1); color: rgba(255, 255, 255, .66); }

/* Product showcase card in the hero */
.hero__panel {
	position: relative;
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .16);
	backdrop-filter: blur(8px);
	padding: var(--sp-5);
	box-shadow: var(--shadow-lg);
}

.hero__panel img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	border-radius: var(--radius);
	background: #fff;
	padding: var(--sp-4);
}

.hero__panel figcaption { margin-top: var(--sp-4); }
.hero__panel h3 { color: #fff; font-size: var(--step-1); }
.hero__panel p { color: rgba(255, 255, 255, .7); font-size: var(--step--1); margin-top: var(--sp-1); }

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--sp-5);
	transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--border-strong);
}

.card__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius);
	background: linear-gradient(140deg, var(--navy-500), var(--navy-700));
	color: #fff;
	margin-bottom: var(--sp-4);
}

.card__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.card h3 { font-size: var(--step-1); }
.card p { color: var(--text-muted); margin-top: var(--sp-2); font-size: var(--step-0); }

/* Product card */
.product {
	overflow: hidden;
	padding: 0;
}

.product__media {
	position: relative;
	background: #fff;
	padding: var(--sp-5);
	border-bottom: 1px solid var(--border);
}

.product__media img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	transition: transform 320ms var(--ease);
}

.product:hover .product__media img { transform: scale(1.05); }

.product__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.product__cat { font-size: var(--step--1); color: var(--text-faint); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.product__body h3 { font-size: var(--step-1); }
.product__desc { color: var(--text-muted); font-size: var(--step--1); flex: 1; }

.product__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-top: var(--sp-3);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--border);
}

.badge {
	position: absolute;
	inset-block-start: var(--sp-3);
	inset-inline-start: var(--sp-3);
	background: var(--red-500);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .25rem .7rem;
	border-radius: var(--radius-pill);
}

/* Lead paragraph inside a split section */
.lead-muted {
	color: var(--text-muted);
	margin-top: var(--sp-4);
	font-size: var(--step-1);
}

/* Card that exists only to frame an image */
.card--media { padding: var(--sp-4); }

.card--media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: #fff;
	padding: var(--sp-5);
	border-radius: var(--radius);
}

:root[data-theme="dark"] .card--media img {
	background: var(--surface-2);
}

.footer__tagline {
	color: var(--text-muted);
	margin-top: var(--sp-4);
	max-width: 26rem;
}

/* Logo strip */
.logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-5) var(--sp-7);
}

.logos__item {
	font-weight: 700;
	font-size: var(--step-1);
	color: var(--text-faint);
	letter-spacing: -.01em;
	filter: grayscale(1);
	opacity: .75;
	transition: opacity var(--t), filter var(--t), color var(--t);
}

.logos__item:hover { opacity: 1; filter: none; color: var(--text); }

/* Feature split */
.split {
	display: grid;
	gap: var(--sp-7);
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.split { grid-template-columns: 1fr 1fr; }
	.split--reverse > *:first-child { order: 2; }
}

.check-list { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }

.check-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	color: var(--text-muted);
}

.check-list svg {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	fill: none;
	stroke: var(--red-500);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

:root[data-theme="dark"] .check-list svg { stroke: var(--red-400); }

/* The product photography already carries its own blue backdrop, so the white
   plate that reads as "clean" in light mode becomes a glaring slab in dark.
   Drop it back to a surface tone. */
:root[data-theme="dark"] .product__media,
:root[data-theme="dark"] .hero__panel img {
	background: var(--surface-2);
}

:root[data-theme="dark"] .hero__panel img {
	border: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   8. CTA band + footer
   -------------------------------------------------------------------------- */

.cta {
	background: linear-gradient(135deg, var(--navy-700), var(--navy-600) 55%, var(--navy-500));
	color: #fff;
	border-radius: var(--radius-lg);
	padding: clamp(2rem, 5vw, 3.5rem);
	text-align: center;
	box-shadow: var(--shadow-lg);
}

.cta h2 { color: #fff; }
.cta p { color: rgba(255, 255, 255, .82); margin-top: var(--sp-3); font-size: var(--step-1); }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-6); }

.footer {
	background: var(--bg-alt);
	border-top: 1px solid var(--border);
	padding-block: var(--sp-8) var(--sp-6);
	margin-top: var(--sp-9);
}

.footer__grid {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.footer h4 { font-size: var(--step-0); margin-bottom: var(--sp-3); }
.footer ul { display: grid; gap: var(--sp-2); }
.footer a { color: var(--text-muted); }
.footer a:hover { color: var(--link-hover); }

.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	justify-content: space-between;
	align-items: center;
	margin-top: var(--sp-7);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--border);
	color: var(--text-faint);
	font-size: var(--step--1);
}

.social { display: flex; gap: var(--sp-2); }

/* --------------------------------------------------------------------------
   9. Floating controls
   -------------------------------------------------------------------------- */

.fab-stack {
	position: fixed;
	inset-block-end: 1.25rem;
	inset-inline-end: 1.25rem;
	z-index: 90;
	display: grid;
	gap: var(--sp-3);
}

.fab {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: var(--radius-pill);
	border: none;
	cursor: pointer;
	box-shadow: var(--shadow-lg);
	transition: transform var(--t), opacity var(--t), visibility var(--t);
}

.fab:hover { transform: translateY(-3px); }
.fab svg { width: 24px; height: 24px; }

.fab--whatsapp { background: #25d366; color: #fff; }
.fab--whatsapp svg { fill: currentColor; }

.fab--top {
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--border-strong);
	opacity: 0;
	visibility: hidden;
}

.fab--top svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fab--top.is-visible { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   10. Reveal on scroll
   -------------------------------------------------------------------------- */

/* Only hide these once JS has confirmed it can bring them back. Without that
   guard a script error, a blocked file or a missing IntersectionObserver
   leaves the whole page blank. */
.has-js .reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}

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

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   11. RTL
   -------------------------------------------------------------------------- */

[dir="rtl"] .hero::after { inset-inline-end: auto; inset-inline-start: -180px; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; }

/* --------------------------------------------------------------------------
   12. Print
   -------------------------------------------------------------------------- */

@media print {
	.header, .fab-stack, .cta, .hero__cta { display: none !important; }
	body { background: #fff; color: #000; }
}

/* ==========================================================================
   15. ADVANCED UI COMPONENTS
   ========================================================================== */

/* --- Scroll progress ---------------------------------------------------- */

.progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	z-index: 200;
	background: linear-gradient(90deg, var(--red-500), var(--accent));
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
}

[dir="rtl"] .progress { transform-origin: 100% 50%; }

/* --- Card spotlight ----------------------------------------------------- */

.card { position: relative; overflow: hidden; }

/* Soft highlight following the pointer. --mx/--my are set by app.js. */
.card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		260px circle at var(--mx, 50%) var(--my, 0%),
		rgba(46, 149, 220, .14),
		transparent 62%
	);
	opacity: 0;
	transition: opacity var(--t);
	pointer-events: none;
}

.card:hover::before { opacity: 1; }

@media (hover: none) {
	.card::before { display: none; }
}

/* --- Live fleet map ----------------------------------------------------- */

.map {
	position: relative;
	border-radius: var(--radius-lg);
	background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
	border: 1px solid rgba(255, 255, 255, .16);
	backdrop-filter: blur(8px);
	padding: var(--sp-4);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.map__canvas { display: block; width: 100%; height: auto; }

.map__road {
	fill: none;
	stroke: rgba(255, 255, 255, .18);
	stroke-width: 2;
	stroke-linecap: round;
}

.map__route {
	fill: none;
	stroke: var(--accent);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 6 8;
	opacity: .85;
	animation: dash 2.4s linear infinite;
}

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

.map__zone {
	fill: rgba(0, 180, 216, .08);
	stroke: rgba(0, 180, 216, .55);
	stroke-width: 1.5;
	stroke-dasharray: 5 6;
	animation: spin 26s linear infinite;
	transform-origin: 470px 120px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Vehicles ride their road via offset-path */
.map__car {
	offset-rotate: 0deg;
	animation: ride var(--dur, 14s) linear infinite;
	animation-delay: var(--delay, 0s);
}

.map__car circle { filter: drop-shadow(0 0 6px rgba(0, 180, 216, .9)); }

@keyframes ride { to { offset-distance: 100%; } }

.map__car--a { offset-path: path("M 40 300 C 150 250, 200 160, 330 150 S 500 210, 560 130"); }
.map__car--b { offset-path: path("M 30 120 C 140 90, 230 200, 340 250 S 470 330, 570 300"); }
.map__car--c { offset-path: path("M 60 400 C 190 380, 260 320, 400 360 S 520 400, 575 380"); }

.map__pulse {
	fill: none;
	stroke: var(--accent);
	stroke-width: 2;
	animation: pulse 2.6s ease-out infinite;
}

@keyframes pulse {
	0%   { r: 5;  opacity: .9; }
	100% { r: 22; opacity: 0; }
}

/* Floating telemetry chips over the map */
.map__chip {
	position: absolute;
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: .4rem .7rem;
	border-radius: var(--radius-pill);
	background: rgba(9, 20, 33, .82);
	border: 1px solid rgba(255, 255, 255, .18);
	color: #fff;
	font-size: .74rem;
	font-weight: 600;
	white-space: nowrap;
	backdrop-filter: blur(6px);
	box-shadow: var(--shadow-md);
}

.map__chip b { color: var(--accent); font-variant-numeric: tabular-nums; }
.map__chip--1 { inset-block-start: 14%; inset-inline-end: 6%; }
.map__chip--2 { inset-block-end: 16%; inset-inline-start: 5%; }

.map__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-bottom: var(--sp-3);
	color: #fff;
}

.live-dot {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
}

.live-dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 0 rgba(34, 197, 94, .7);
	animation: blip 2s infinite;
}

@keyframes blip {
	70%  { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
	100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.map__count { font-size: .78rem; color: rgba(255, 255, 255, .72); }
.map__count b { color: #fff; font-variant-numeric: tabular-nums; }

/* --- Brand marquee ------------------------------------------------------ */

.marquee {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
	display: flex;
	gap: var(--sp-7);
	width: max-content;
	animation: slide 32s linear infinite;
}

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

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

[dir="rtl"] .marquee__track { animation-direction: reverse; }

/* --- Filter chips ------------------------------------------------------- */

.filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
	margin-bottom: var(--sp-6);
}

.chip {
	padding: .5rem 1.1rem;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-strong);
	background: var(--surface);
	color: var(--text-muted);
	font-size: var(--step--1);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--t), border-color var(--t), color var(--t);
}

.chip:hover { border-color: var(--navy-500); color: var(--text); }

.chip[aria-pressed="true"] {
	background: var(--navy-600);
	border-color: var(--navy-600);
	color: #fff;
}

:root[data-theme="dark"] .chip[aria-pressed="true"] {
	background: var(--navy-500);
	border-color: var(--navy-500);
}

.product.is-hidden { display: none; }

/* --- Dashboard mock ----------------------------------------------------- */

.dash {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.dash__bar {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-4);
	background: var(--surface-2);
	border-bottom: 1px solid var(--border);
}

.dash__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }

.dash__title {
	margin-inline-start: var(--sp-3);
	font-size: var(--step--1);
	font-weight: 700;
	color: var(--text-muted);
}

.dash__body { padding: var(--sp-5); display: grid; gap: var(--sp-5); }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }

.kpi {
	background: var(--bg-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--sp-4);
}

/* Direct child only - the value inside <b> is also a <span> and must not
   pick up the label styling. */
.kpi > span {
	display: block;
	font-size: .70rem;
	font-weight: 600;
	color: var(--text-faint);
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* The unit sits at the base size; the number is scaled up from it, so the
   pair reads as one figure and stays on a single line. */
.kpi b {
	display: block;
	margin-top: var(--sp-1);
	font-size: var(--step-0);
	font-weight: 600;
	color: var(--text-muted);
	letter-spacing: -.01em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.kpi b [data-live],
.kpi b [data-count-to] {
	font-size: 1.75em;
	font-weight: 800;
	color: var(--text);
	letter-spacing: -.03em;
}

.spark { width: 100%; height: 72px; display: block; }
.spark__line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.spark__area { fill: url(#sparkFill); }

.fleet-list { display: grid; gap: var(--sp-2); }

.fleet-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3);
	border-radius: var(--radius);
	background: var(--bg-alt);
	border: 1px solid var(--border);
	font-size: var(--step--1);
}

.fleet-row__id { font-weight: 700; }
.fleet-row__speed { font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 600; }

.status { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; }

.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status--moving  { color: #16a34a; }
.status--idle    { color: #d97706; }
.status--stopped { color: var(--text-faint); }

/* --- FAQ ---------------------------------------------------------------- */

.faq { display: grid; gap: var(--sp-3); max-width: 46rem; margin-inline: auto; }

.faq details {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color var(--t), box-shadow var(--t);
}

.faq details[open] { border-color: var(--border-strong); box-shadow: var(--shadow-md); }

.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-4) var(--sp-5);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

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

.faq summary::after {
	content: "";
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--t);
}

.faq details[open] summary::after { transform: rotate(-135deg); }

.faq p {
	padding: 0 var(--sp-5) var(--sp-5);
	color: var(--text-muted);
	margin: 0;
}

/* --- Motion opt-out ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.map__car,
	.map__route,
	.map__zone,
	.map__pulse,
	.marquee__track,
	.live-dot::before {
		animation: none !important;
	}
}

/* ==========================================================================
   16. MULTI-PAGE SITE COMPONENTS
   ========================================================================== */

/* --- Group accents (per the brief: fleet green, AI blue, enterprise both) --- */

:root {
	--grp-fleet: #12a150;
	--grp-ai: #00b4d8;
	--grp-enterprise: #2e5f8f;
}

/* --- Mega menu ---------------------------------------------------------- */

.nav__has-menu { position: relative; }

.nav__has-menu > .nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-weight: 500;
}

.nav__chev { width: 14px; height: 14px; transition: transform var(--t); }
.nav__has-menu[data-open="true"] .nav__chev { transform: rotate(180deg); }

.megamenu {
	position: absolute;
	inset-block-start: calc(100% + 10px);
	inset-inline-start: 50%;
	transform: translateX(-50%) translateY(-6px);
	min-width: min(92vw, 560px);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: var(--sp-4);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--t), transform var(--t), visibility var(--t);
	z-index: 120;
}

[dir="rtl"] .megamenu { transform: translateX(50%) translateY(-6px); }

.nav__has-menu[data-open="true"] .megamenu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

[dir="rtl"] .nav__has-menu[data-open="true"] .megamenu { transform: translateX(50%) translateY(0); }

.megamenu ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-1);
	margin: 0;
	list-style: none;
	padding: 0;
}

.megamenu a {
	display: block;
	padding: var(--sp-3);
	border-radius: var(--radius);
	color: var(--text);
	font-size: var(--step--1);
	font-weight: 500;
}

.megamenu a:hover,
.megamenu a[aria-current="page"] {
	background: var(--surface-2);
	color: var(--link-hover);
}

@media (max-width: 1120px) {
	.megamenu {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		box-shadow: none;
		border: 0;
		padding: 0 0 var(--sp-3);
		min-width: 0;
		display: none;
	}
	.nav__has-menu[data-open="true"] .megamenu { display: block; transform: none; }
	.megamenu ul { grid-template-columns: 1fr; }
	.nav__has-menu > .nav__link { width: 100%; justify-content: space-between; }
}

/* --- Page hero ---------------------------------------------------------- */

.pagehero {
	position: relative;
	padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
	background:
		radial-gradient(90% 120% at 50% -20%, rgba(46, 95, 143, .16), transparent 70%),
		var(--bg-alt);
	border-bottom: 1px solid var(--border);
}

.pagehero h1 { font-size: var(--step-4); max-width: 20ch; }

.pagehero__lead {
	margin-top: var(--sp-4);
	font-size: var(--step-1);
	color: var(--text-muted);
	max-width: 56ch;
}

.pagehero--fleet      { border-block-start: 4px solid var(--grp-fleet); }
.pagehero--ai         { border-block-start: 4px solid var(--grp-ai); }
.pagehero--enterprise { border-block-start: 4px solid var(--grp-enterprise); }

.crumb {
	display: inline-block;
	margin-bottom: var(--sp-4);
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--text-faint);
}

.crumb:hover { color: var(--link-hover); }

/* --- Cards as links ----------------------------------------------------- */

a.card { color: inherit; }
a.card:hover { color: inherit; }

.card__more {
	margin-top: var(--sp-4);
	font-weight: 700;
	font-size: var(--step--1);
	color: var(--link);
}

a.card:hover .card__more { color: var(--link-hover); }

.stack {
	margin-top: var(--sp-3);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--text-faint);
}

/* --- Numbered steps ----------------------------------------------------- */

.step {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: var(--radius-pill);
	background: var(--navy-600);
	color: #fff;
	font-weight: 800;
	margin-bottom: var(--sp-3);
}

:root[data-theme="dark"] .step { background: var(--navy-500); }

/* --- Pills -------------------------------------------------------------- */

.pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }

.pill {
	padding: .45rem 1rem;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-strong);
	background: var(--surface);
	color: var(--text-muted);
	font-size: var(--step--1);
	font-weight: 600;
}

/* --- Pricing ------------------------------------------------------------ */

.price h3 { font-size: var(--step-2); }
.price > p { color: var(--text-muted); margin-bottom: var(--sp-4); }

.price--featured {
	border-color: var(--navy-500);
	box-shadow: var(--shadow-lg);
}

.price--featured::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--grp-fleet), var(--grp-ai));
}

/* --- Misc --------------------------------------------------------------- */

.platforms-label {
	text-align: center;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: var(--sp-5);
}

.center { text-align: center; margin-top: var(--sp-6); }

.section-head p { text-wrap: pretty; }

.hero__sub {
	margin-top: var(--sp-4);
	font-size: var(--step-2);
	font-weight: 600;
	color: rgba(255, 255, 255, .92);
	max-width: 30ch;
}

.hero h1 { max-width: 16ch; }

/* ==========================================================================
   17. DEVICE CARDS, DIFFERENTIATION, RESOURCES, CALCULATOR
   ========================================================================== */

/* --- Device cards ------------------------------------------------------- */

.device {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* A fixed frame for the product shot. The catalogue photos arrive at wildly
   different crops and proportions, so the frame -- not the image -- sets the
   card's top half and every card in a row starts its text at the same line. */
/* The catalogue shots are square and already carry their own studio panel, so
   the frame matches them exactly: square, no padding, no second background
   showing around the edges. The gradient below is only what sits there while
   the image loads. */
.device__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: linear-gradient(160deg, #ffffff, #e9eef5);
	border-bottom: 1px solid var(--border);
}

:root[data-theme="dark"] .device__media {
	background: linear-gradient(160deg,
		color-mix(in oklab, var(--navy-600) 26%, var(--surface-2)), var(--surface-2));
}

@supports not (color: color-mix(in oklab, #000, #fff)) {
	:root[data-theme="dark"] .device__media { background: var(--surface-2); }
}

/* Lit from behind on hover, so the product separates from the panel. */
.device__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--t);
	background: linear-gradient(to top,
		color-mix(in oklab, var(--accent) 30%, transparent), transparent 55%);
}

.device:hover .device__media::after { opacity: 1; }

.device__media img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 420ms var(--ease);
}

.device:hover .device__media img { transform: scale(1.06); }

.device__body {
	flex: 1;
	padding: var(--sp-4);
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

/* Model numbers are long, unspaced and used to clip at the card edge. */
.device__body h3 {
	font-size: var(--step-0);
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.device__body p {
	color: var(--text-muted);
	font-size: var(--step--1);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.specs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Pinned to the bottom so the pill rows line up across a row of cards. */
.device .specs { margin-top: auto; padding-top: var(--sp-3); }

.spec {
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: .2rem .5rem;
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	color: var(--text-faint);
	border: 1px solid var(--border);
}

/* --- Differentiation ---------------------------------------------------- */

.accent-roi { border-block-start: 3px solid var(--grp-fleet); }
.accent-ai  { border-block-start: 3px solid var(--grp-ai); }

.accent-roi h3, .accent-ai h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.accent-roi p, .accent-ai p, .usecase p { color: var(--text-muted); }

.usecase {
	margin-top: var(--sp-5);
	border-inline-start: 3px solid var(--red-500);
}

.usecase h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }

.compare { margin-top: var(--sp-5); }
.compare h3 { font-size: var(--step-1); margin-bottom: var(--sp-4); text-align: center; }

.compare__row {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.compare__row { grid-template-columns: 1fr 1fr; }
}

.compare__cell {
	padding: var(--sp-5);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: var(--surface);
}

.compare__cell span {
	display: inline-block;
	margin-bottom: var(--sp-3);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .2rem .7rem;
	border-radius: var(--radius-pill);
}

.compare__cell--old span { background: var(--surface-2); color: var(--text-faint); }
.compare__cell--old p { color: var(--text-muted); }

.compare__cell--new {
	border-color: var(--grp-fleet);
	background: linear-gradient(160deg, rgba(18, 161, 80, .08), transparent 60%), var(--surface);
}

.compare__cell--new span { background: var(--grp-fleet); color: #fff; }

/* --- Linked pills ------------------------------------------------------- */

.pill--link { transition: all var(--t); }

.pill--link:hover {
	border-color: var(--navy-500);
	color: var(--text);
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

/* --- Resources ---------------------------------------------------------- */

.kind {
	display: inline-block;
	margin-bottom: var(--sp-3);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--red-500);
}

:root[data-theme="dark"] .kind { color: var(--red-400); }

.prose { max-width: 46rem; margin-inline: auto; }
.prose p { margin-bottom: var(--sp-4); }

/* --- ROI calculator ----------------------------------------------------- */

.calc {
	max-width: 54rem;
	margin-inline: auto;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.calc__grid {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.calc__grid label {
	display: grid;
	gap: var(--sp-2);
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--text-muted);
}

.calc__grid input {
	width: 100%;
	padding: .7rem .9rem;
	font-size: 16px;
	font-weight: 700;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	background: var(--bg-alt);
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

.calc__grid input:focus {
	outline: none;
	border-color: var(--navy-500);
	box-shadow: var(--ring);
}

.calc__out {
	display: grid;
	gap: var(--sp-3);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
	margin-top: var(--sp-6);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--border);
}

.calc__note {
	margin-top: var(--sp-5);
	font-size: var(--step--1);
	color: var(--text-faint);
}

/* --- Home: a denser, more deliberate hero ------------------------------- */

.hero::before { opacity: .9; }

.hero__inner > div:first-child { position: relative; z-index: 1; }

/* ==========================================================================
   18. COMMAND SEARCH, MEGA MENU, SECTION NAV, DEVICE MODAL
   ========================================================================== */

/* --- Mega menu, grouped ------------------------------------------------- */

/* The wide panel is anchored to its trigger's leading edge, not centred on it.
   Centring a 940px panel on "Solutions" -- the first item in the nav -- put its
   leading edge at -188px on a 1280px viewport, so a third of the menu sat off
   the screen entirely. */
.megamenu--wide {
	inset-inline-start: 0;
	min-width: 0;
	width: min(940px, calc(100vw - 6rem));
	padding: var(--sp-5);
	transform: translateY(-6px);
	/* Fifteen solutions in three columns stands 963px tall, which is more than
	   a 720px viewport has below the header. Without a cap and a scroller the
	   overhang is simply unreachable -- there is nothing to scroll. */
	max-height: calc(100vh - 5.5rem);
	max-height: calc(100dvh - 5.5rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}

[dir="rtl"] .megamenu--wide { transform: translateY(-6px); }

.nav__has-menu[data-open="true"] .megamenu--wide,
[dir="rtl"] .nav__has-menu[data-open="true"] .megamenu--wide { transform: translateY(0); }

.mega__grid {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mega__col h4 {
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: var(--sp-3);
	padding-inline-start: var(--sp-2);
}

.mega__item {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	padding: var(--sp-3);
	border-radius: var(--radius);
	color: var(--text);
	transition: background-color var(--t), transform var(--t);
}

.mega__item:hover { background: var(--surface-2); color: var(--text); }
.mega__item.is-current { background: var(--surface-2); }

.mega__icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 9px;
	background: linear-gradient(140deg, var(--navy-500), var(--navy-700));
	color: #fff;
}

.mega__icon svg { width: 17px; height: 17px; }

.mega__text { display: grid; gap: 2px; min-width: 0; }
.mega__text b { font-size: var(--step-0); font-weight: 600; }

.mega__text i {
	font-style: normal;
	font-size: .76rem;
	color: var(--text-muted);
	line-height: 1.4;
}

@media (max-width: 1120px) {
	.megamenu--wide {
		min-width: 0;
		width: auto;
		padding: 0 0 var(--sp-3);
		max-height: none;
		overflow-y: visible;
		transform: none;
	}
	.nav__has-menu[data-open="true"] .megamenu--wide { transform: none; }
	.mega__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* --- Search button + palette -------------------------------------------- */

.search-btn {
	width: auto;
	padding-inline: var(--sp-4);
	line-height: 1;
}

.search-btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.search-btn kbd {
	font: inherit;
	font-size: .68rem;
	font-weight: 700;
	padding: .1rem .35rem;
	border: 1px solid var(--border-strong);
	border-radius: 5px;
	color: var(--text-faint);
	background: var(--bg-alt);
}

@media (max-width: 640px) { .search-btn kbd { display: none; } }

.search[hidden] { display: none; }

.search {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: grid;
	place-items: start center;
	padding: clamp(3rem, 12vh, 8rem) var(--sp-4) var(--sp-4);
}

.search__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 12, 20, .55);
	backdrop-filter: blur(3px);
}

.search__panel {
	position: relative;
	width: min(100%, 640px);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	animation: pop 180ms var(--ease);
}

@keyframes pop {
	from { opacity: 0; transform: translateY(-8px) scale(.985); }
	to   { opacity: 1; transform: none; }
}

.search__bar {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-5);
	border-bottom: 1px solid var(--border);
}

.search__bar svg { width: 20px; height: 20px; color: var(--text-faint); flex-shrink: 0; }

.search__bar input {
	flex: 1;
	border: 0;
	background: none;
	font-size: var(--step-1);
	color: var(--text);
	outline: none;
	min-width: 0;
}

.search__close {
	border: 1px solid var(--border-strong);
	background: var(--bg-alt);
	color: var(--text-faint);
	border-radius: 6px;
	padding: .15rem .45rem;
	font-size: .7rem;
	font-weight: 700;
	cursor: pointer;
}

.search__results { max-height: min(56vh, 460px); overflow-y: auto; padding: var(--sp-2); }

.search__hit {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	width: 100%;
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--radius);
	color: var(--text);
	text-align: start;
}

.search__hit:hover,
.search__hit.is-active { background: var(--surface-2); color: var(--text); }

.search__hit b { font-weight: 600; font-size: var(--step-0); }
.search__hit i { font-style: normal; font-size: .76rem; color: var(--text-muted); }
.search__hit span { display: grid; gap: 2px; min-width: 0; flex: 1; }

.search__kind {
	flex-shrink: 0;
	font-size: .64rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-faint);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	padding: .15rem .55rem;
}

.search__empty { padding: var(--sp-6); text-align: center; color: var(--text-faint); }

/* --- Sticky section nav -------------------------------------------------- */

.subnav {
	position: sticky;
	top: 72px;
	z-index: 60;
	background: var(--surface-glass);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--border);
}

.subnav__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	min-height: 52px;
}

.subnav__label {
	flex-shrink: 0;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-faint);
}

@media (max-width: 720px) { .subnav__label { display: none; } }

.subnav__links {
	display: flex;
	gap: var(--sp-1);
	overflow-x: auto;
	scrollbar-width: none;
}

.subnav__links::-webkit-scrollbar { display: none; }

.subnav__links a {
	white-space: nowrap;
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--radius-pill);
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--text-muted);
	transition: background-color var(--t), color var(--t);
}

.subnav__links a:hover { color: var(--text); background: var(--surface-2); }

.subnav__links a.is-active {
	color: #fff;
	background: var(--navy-600);
}

:root[data-theme="dark"] .subnav__links a.is-active { background: var(--navy-500); }

/* --- Device modal -------------------------------------------------------- */

.device { cursor: pointer; }
.device:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 3px; }

.dlg[hidden] { display: none; }

.dlg {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: grid;
	place-items: center;
	padding: var(--sp-4);
}

.dlg__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 12, 20, .6);
	backdrop-filter: blur(3px);
}

.dlg__panel {
	position: relative;
	width: min(100%, 720px);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	animation: pop 180ms var(--ease);
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 680px) { .dlg__panel { grid-template-columns: 1fr 1fr; } }

.dlg__media { background: #fff; padding: var(--sp-6); display: grid; place-items: center; }
:root[data-theme="dark"] .dlg__media { background: var(--surface-2); }
.dlg__media img { width: 100%; aspect-ratio: 1/1; object-fit: contain; }

.dlg__body { padding: var(--sp-6); display: grid; gap: var(--sp-3); align-content: start; }
.dlg__body h3 { font-size: var(--step-2); }
.dlg__body p { color: var(--text-muted); }

.dlg__close {
	position: absolute;
	inset-block-start: var(--sp-3);
	inset-inline-end: var(--sp-3);
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
}

/* --- Tech pills ---------------------------------------------------------- */

.pill--tech {
	background: var(--bg-alt);
	border-color: var(--border);
	color: var(--text);
}

.pills:not(.reveal) { justify-content: flex-start; }

/* ==========================================================================
   19. AURORA HERO, TIMELINE, FILTER TRAY, STICKY CTA, VIEW TRANSITIONS
   ========================================================================== */

/* --- Cross-document view transitions ------------------------------------ */
/* Progressive enhancement: browsers without support just navigate normally. */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out 160ms var(--ease) both; }
::view-transition-new(root) { animation: vt-in 240ms var(--ease) both; }

@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* The header should feel fixed across the transition, not re-animate. */
.header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation-duration: 1ms; }

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) { animation: none; }
}

/* --- Aurora hero --------------------------------------------------------- */

.hero { position: relative; }

/* Three slow-drifting colour fields. Composited on the GPU: only transform
   and opacity animate, so this stays cheap. */
.aurora {
	position: absolute;
	inset: -20% -10%;
	z-index: -1;
	pointer-events: none;
	filter: blur(60px);
	opacity: .55;
}

.aurora span {
	position: absolute;
	display: block;
	border-radius: 50%;
	mix-blend-mode: screen;
	will-change: transform;
}

.aurora span:nth-child(1) {
	width: 46%;
	aspect-ratio: 1;
	inset-block-start: -6%;
	inset-inline-start: 8%;
	background: radial-gradient(circle, rgba(0, 180, 216, .55), transparent 68%);
	animation: drift-a 22s ease-in-out infinite alternate;
}

.aurora span:nth-child(2) {
	width: 38%;
	aspect-ratio: 1;
	inset-block-end: -12%;
	inset-inline-start: 34%;
	background: radial-gradient(circle, rgba(18, 161, 80, .40), transparent 66%);
	animation: drift-b 28s ease-in-out infinite alternate;
}

.aurora span:nth-child(3) {
	width: 42%;
	aspect-ratio: 1;
	inset-block-start: 10%;
	inset-inline-end: -6%;
	background: radial-gradient(circle, rgba(211, 30, 39, .30), transparent 70%);
	animation: drift-c 34s ease-in-out infinite alternate;
}

@keyframes drift-a { to { transform: translate3d(12%, 16%, 0) scale(1.15); } }
@keyframes drift-b { to { transform: translate3d(-14%, -10%, 0) scale(1.2); } }
@keyframes drift-c { to { transform: translate3d(-8%, 14%, 0) scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
	.aurora span { animation: none; }
}

/* --- Timeline for "How it works" ---------------------------------------- */

.timeline {
	display: grid;
	gap: 0;
	max-width: 46rem;
	margin-inline: auto;
	counter-reset: step;
}

.timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: var(--sp-5);
	padding-block: var(--sp-5);
}

/* The connecting line, drawn between the markers only. */
.timeline__item:not(:last-child)::before {
	content: "";
	position: absolute;
	inset-block-start: calc(var(--sp-5) + 44px);
	inset-block-end: 0;
	inset-inline-start: 21px;
	width: 2px;
	background: linear-gradient(var(--border-strong), var(--border));
}

[dir="rtl"] .timeline__item:not(:last-child)::before {
	inset-inline-start: auto;
	inset-inline-end: 21px;
}

.timeline__marker {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	background: var(--surface);
	border: 2px solid var(--border-strong);
	color: var(--text);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	transition: border-color var(--t), background var(--t), color var(--t);
	z-index: 1;
}

.timeline__item.is-in .timeline__marker {
	background: var(--navy-600);
	border-color: var(--navy-600);
	color: #fff;
}

:root[data-theme="dark"] .timeline__item.is-in .timeline__marker {
	background: var(--navy-500);
	border-color: var(--navy-500);
}

.timeline__body { padding-block-start: var(--sp-2); }
.timeline__body p { color: var(--text-muted); }

/* --- Hardware filter + compare tray -------------------------------------- */

.hw-bar {
	position: sticky;
	top: 72px;
	z-index: 60;
	background: var(--surface-glass);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--border);
	padding-block: var(--sp-3);
}

.hw-bar__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

.hw-count { margin-inline-start: auto; font-size: var(--step--1); color: var(--text-faint); }

.device.is-hidden { display: none; }

.device__pick {
	position: absolute;
	inset-block-start: var(--sp-3);
	inset-inline-end: var(--sp-3);
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-strong);
	background: color-mix(in oklab, var(--surface) 82%, transparent);
	backdrop-filter: blur(6px);
	color: var(--text);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	z-index: 2;
	transition: all var(--t);
}

.device__pick:hover { border-color: var(--navy-500); color: var(--text); }

.device.is-picked { border-color: var(--navy-500); box-shadow: var(--shadow-md); }
.device.is-picked .device__pick { background: var(--navy-600); border-color: var(--navy-600); color: #fff; }

.tray {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 95;
	transform: translateY(110%);
	transition: transform 260ms var(--ease);
	padding: var(--sp-4);
}

.tray.is-open { transform: none; }

.tray__inner {
	max-width: var(--container);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	flex-wrap: wrap;
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: var(--sp-4);
}

.tray__items { display: flex; gap: var(--sp-2); flex-wrap: wrap; flex: 1; }

.tray__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: .3rem .7rem;
	border-radius: var(--radius-pill);
	background: var(--surface-2);
	border: 1px solid var(--border);
	font-size: var(--step--1);
	font-weight: 600;
}

.tray__chip button { border: 0; background: none; cursor: pointer; color: var(--text-faint); }

/* Comparison table inside the dialog */
.cmp { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.cmp th, .cmp td { padding: var(--sp-3); border-bottom: 1px solid var(--border); text-align: start; }
.cmp thead th { background: var(--surface-2); font-weight: 700; }
.cmp img { width: 64px; height: 64px; object-fit: contain; }

.dlg__panel--wide { grid-template-columns: 1fr; width: min(100%, 900px); }
.dlg__panel--wide .dlg__body { max-height: 70vh; overflow: auto; }

/* --- Sticky CTA bar ------------------------------------------------------ */

.cta-bar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 80;
	transform: translateY(110%);
	transition: transform 280ms var(--ease);
	padding: var(--sp-3);
	pointer-events: none;
}

.cta-bar.is-open { transform: none; }

.cta-bar__inner {
	pointer-events: auto;
	max-width: var(--container);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	flex-wrap: wrap;
	background: linear-gradient(135deg, var(--navy-700), var(--navy-600));
	color: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: var(--sp-4) var(--sp-5);
}

.cta-bar__inner p { font-weight: 600; margin: 0; }
.cta-bar__close {
	border: 0;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	width: 30px;
	height: 30px;
	border-radius: var(--radius-pill);
	cursor: pointer;
	flex-shrink: 0;
}

@media (max-width: 640px) {
	.cta-bar__inner { justify-content: center; text-align: center; }
}

/* --- Staggered reveal ---------------------------------------------------- */

.has-js .grid > .reveal:nth-child(1) { transition-delay: 0ms; }
.has-js .grid > .reveal:nth-child(2) { transition-delay: 60ms; }
.has-js .grid > .reveal:nth-child(3) { transition-delay: 120ms; }
.has-js .grid > .reveal:nth-child(4) { transition-delay: 180ms; }
.has-js .grid > .reveal:nth-child(5) { transition-delay: 220ms; }
.has-js .grid > .reveal:nth-child(6) { transition-delay: 260ms; }

/* ==========================================================================
   20. QUOTE FORM
   ========================================================================== */

.form {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	margin-top: var(--sp-5);
}

.form label {
	display: grid;
	gap: var(--sp-2);
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--text-muted);
}

.form__wide, .form__actions { grid-column: 1 / -1; }

.form input, .form select, .form textarea {
	width: 100%;
	padding: .7rem .9rem;
	font-size: 16px;
	font-family: inherit;
	color: var(--text);
	background: var(--bg-alt);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
}

.form input:focus, .form select:focus, .form textarea:focus {
	outline: none;
	border-color: var(--navy-500);
	box-shadow: var(--ring);
}

.form input[aria-invalid="true"],
.form textarea[aria-invalid="true"] { border-color: var(--red-500); }

.form .err {
	font-size: .74rem;
	font-weight: 600;
	color: var(--red-500);
}

:root[data-theme="dark"] .form .err { color: var(--red-400); }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
}

.form__actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }

.form__status { font-size: var(--step--1); font-weight: 600; }
.form__status.is-ok { color: var(--success, #16a34a); }
.form__status.is-err { color: var(--red-500); }

/* ==========================================================================
   21. ARTWORK AND DIAGRAMS
   ========================================================================== */

/* Illustration sits behind the page hero text, fading out toward the start
   edge so the heading stays readable in both directions. */
.pagehero { position: relative; overflow: hidden; }

.pagehero .container { position: relative; z-index: 1; }

.pagehero__art {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	height: 100%;
	width: auto;
	max-width: 62%;
	object-fit: cover;
	opacity: .5;
	z-index: 0;
	pointer-events: none;
	mask-image: linear-gradient(to left, #000 40%, transparent 92%);
	-webkit-mask-image: linear-gradient(to left, #000 40%, transparent 92%);
}

[dir="rtl"] .pagehero__art {
	transform: scaleX(-1);
	mask-image: linear-gradient(to right, #000 40%, transparent 92%);
	-webkit-mask-image: linear-gradient(to right, #000 40%, transparent 92%);
}

:root[data-theme="light"] .pagehero__art { opacity: .22; }

@media (max-width: 720px) {
	.pagehero__art { display: none; }
}

/* Diagrams */

.diagram {
	margin: 0 auto;
	max-width: 46rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--sp-4);
	box-shadow: var(--shadow-md);
	overflow-x: auto;
}

.diagram--wide { max-width: 64rem; }

.diagram img { width: 100%; min-width: 520px; height: auto; display: block; }

.diagram + .timeline { margin-top: var(--sp-7); }

/* Industry cards with artwork */

.card--illus { padding: 0; overflow: hidden; }

.card__art {
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	display: block;
	border-bottom: 1px solid var(--border);
}

.card__inner { padding: var(--sp-5); }
.card--illus .card__icon { margin-top: calc(-1 * var(--sp-7)); position: relative; }

/* ==========================================================================
   22. DEPTH, MOTION AND POLISH
   ========================================================================== */

/* --- Grain: a very faint noise layer that stops large flat areas from
       banding and gives the dark theme some texture. ------------------------ */

body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: .035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

:root[data-theme="light"] body::after { opacity: .02; }

/* --- Gradient headings -------------------------------------------------- */

.hero h1,
.pagehero h1 {
	background: linear-gradient(180deg, var(--text) 55%, color-mix(in oklab, var(--text) 88%, transparent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero h1 { --text: #ffffff; }
.hero h1 em { -webkit-text-fill-color: var(--accent); color: var(--accent); }

/* Older engines without color-mix keep the solid colour. */
@supports not (color: color-mix(in oklab, #000, #fff)) {
	.hero h1, .pagehero h1 { background: none; color: var(--text); -webkit-text-fill-color: currentColor; }
	.hero h1 { color: #fff; }
}

/* --- Custom scrollbars --------------------------------------------------- */

* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }

*::-webkit-scrollbar-thumb {
	background: var(--border-strong);
	border-radius: 999px;
	border: 3px solid var(--bg);
}

*::-webkit-scrollbar-thumb:hover { background: var(--navy-500); }

/* --- Sliding nav indicator ----------------------------------------------- */

.nav__list { position: relative; }

.nav__ind {
	position: absolute;
	/* Physical `left`, deliberately not `inset-inline-start`. initNavIndicator()
	   measures (item.left - list.left) in physical pixels and applies it as
	   translateX, so the indicator must always start from the list's LEFT edge.
	   Without this it fell back to its static position, which in RTL is the
	   right edge -- the offset then pushed it further right, so on the Arabic
	   pages the line sat under the brand instead of the active nav item. */
	left: 0;
	inset-block-end: 6px;
	height: 2px;
	border-radius: 2px;
	background: var(--red-500);
	opacity: 0;
	transition: transform 260ms var(--ease), width 260ms var(--ease), opacity var(--t);
	pointer-events: none;
	will-change: transform, width;
}

:root[data-theme="dark"] .nav__ind { background: var(--red-400); }

@media (max-width: 1120px) { .nav__ind { display: none; } }

/* --- Card tilt ----------------------------------------------------------- */

.card {
	transform-style: preserve-3d;
	will-change: transform;
}

.card.is-tilting {
	transform: perspective(900px)
	           rotateX(var(--rx, 0deg))
	           rotateY(var(--ry, 0deg))
	           translateY(-4px);
	transition: transform 90ms linear, box-shadow var(--t), border-color var(--t);
}

@media (hover: none), (prefers-reduced-motion: reduce) {
	.card.is-tilting { transform: none; }
}

/* --- Button shine -------------------------------------------------------- */

.btn { position: relative; overflow: hidden; isolation: isolate; }

.btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 620ms var(--ease);
}

.btn:hover::after { transform: translateX(120%); }

@media (prefers-reduced-motion: reduce) { .btn::after { display: none; } }

/* --- Theme switch: circular reveal ---------------------------------------- */
/* Uses the View Transitions API where available; elsewhere the theme simply
   swaps as before. The clip circle is centred on the toggle button. */

::view-transition-old(root),
::view-transition-new(root) { mix-blend-mode: normal; }

html.theme-switching::view-transition-old(root) { animation: none; z-index: 1; }

html.theme-switching::view-transition-new(root) {
	animation: theme-reveal 520ms var(--ease) both;
	z-index: 2;
}

@keyframes theme-reveal {
	from { clip-path: circle(0% at var(--tx, 50%) var(--ty, 0%)); }
	to   { clip-path: circle(150% at var(--tx, 50%) var(--ty, 0%)); }
}

@media (prefers-reduced-motion: reduce) {
	html.theme-switching::view-transition-new(root) { animation: none; }
}

/* --- Mobile drawer ------------------------------------------------------- */

@media (max-width: 1120px) {
	.nav {
		inset: 72px 0 auto 0;
		max-height: calc(100dvh - 72px);
		overflow-y: auto;
		padding-bottom: var(--sp-7);
	}

	.nav.is-open > .nav__list > li {
		animation: drawer-in 320ms var(--ease) both;
	}

	.nav.is-open > .nav__list > li:nth-child(1) { animation-delay: 20ms; }
	.nav.is-open > .nav__list > li:nth-child(2) { animation-delay: 55ms; }
	.nav.is-open > .nav__list > li:nth-child(3) { animation-delay: 90ms; }
	.nav.is-open > .nav__list > li:nth-child(4) { animation-delay: 125ms; }
	.nav.is-open > .nav__list > li:nth-child(5) { animation-delay: 160ms; }
	.nav.is-open > .nav__list > li:nth-child(6) { animation-delay: 195ms; }

	@keyframes drawer-in {
		from { opacity: 0; transform: translateY(-8px); }
		to   { opacity: 1; transform: none; }
	}
}

/* --- Focus ring ---------------------------------------------------------- */

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 22%, transparent);
}

/* --- Selection ----------------------------------------------------------- */

::selection { background: var(--navy-500); color: #fff; }

/* --- Section rhythm ------------------------------------------------------ */

.section-head h2 { position: relative; display: inline-block; }

.section-head h2::after {
	content: "";
	position: absolute;
	inset-inline-start: 50%;
	inset-block-end: -14px;
	width: 54px;
	height: 3px;
	border-radius: 3px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, var(--grp-fleet), var(--grp-ai));
	opacity: .9;
}

[dir="rtl"] .section-head h2::after { transform: translateX(50%); }

.section-head { padding-bottom: var(--sp-3); }

/* ==========================================================================
   23. SCROLL-DRIVEN ANIMATION, CONTAINER QUERIES, PERSONALISATION, A11Y
   ========================================================================== */

/* --- Accent personalisation ---------------------------------------------
   The picker writes --accent-user on <html>; everything downstream reads the
   resolved --accent, so one variable re-skins the whole site. ------------- */

:root {
	--accent: var(--accent-user, #00b4d8);
	--accent-ink: #06121f;
}

.swatches { display: flex; gap: var(--sp-2); align-items: center; }

.swatch {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid transparent;
	cursor: pointer;
	padding: 0;
	transition: transform var(--t), border-color var(--t);
}

.swatch:hover { transform: scale(1.12); }
.swatch[aria-pressed="true"] { border-color: var(--text); transform: scale(1.12); }

/* --- Scroll-driven animation (native) -----------------------------------
   Where the browser supports scroll timelines the reveal and the progress bar
   run off the compositor with no JS at all. The .has-js path stays as the
   fallback for everything else. ------------------------------------------ */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {

		/* Progress bar tracks document scroll directly. */
		.progress {
			transform: scaleX(0);
			animation: progress-grow linear both;
			animation-timeline: scroll(root block);
		}

		@keyframes progress-grow { to { transform: scaleX(1); } }

		/* Reveals become range-driven; JS no longer has to observe them. */
		.has-js .reveal {
			opacity: 1;
			transform: none;
			animation: reveal-in linear both;
			animation-timeline: view(block);
			animation-range: entry 8% cover 26%;
		}

		@keyframes reveal-in {
			from { opacity: 0; transform: translateY(20px); }
			to   { opacity: 1; transform: none; }
		}

		/* Hero art drifts a little as the section leaves. */
		.pagehero__art {
			animation: art-drift linear both;
			animation-timeline: view(block);
			animation-range: cover 0% cover 100%;
		}

		@keyframes art-drift {
			from { transform: translateY(-2%) scale(1.02); }
			to   { transform: translateY(6%) scale(1.06); }
		}

		[dir="rtl"] .pagehero__art {
			animation-name: art-drift-rtl;
		}

		@keyframes art-drift-rtl {
			from { transform: scaleX(-1) translateY(-2%) scale(1.02); }
			to   { transform: scaleX(-1) translateY(6%) scale(1.06); }
		}
	}
}

/* --- Container queries ---------------------------------------------------
   Cards adapt to the space they are given rather than to the viewport, so the
   same component works in a 4-up grid, a 2-up split or a sidebar. --------- */

.grid { container-type: inline-size; }

.card { container-type: inline-size; }

/* The horizontal device layout that used to live here queried the wrong box.
   .card carries container-type itself, and an element cannot query its own
   container, so `.device { ... }` resolved against the surrounding .grid --
   always wider than 420px -- and forced a 150px + 1fr split inside a 282px
   card. That overflowed the card by 14px and left 98px for the text, which is
   why every description wrapped one word per line. The card is stacked at all
   sizes now; rules for elements *inside* the card still query it correctly. */

@container (max-width: 260px) {
	.card__icon { width: 38px; height: 38px; }
	.card h3 { font-size: var(--step-0); }
	.specs { display: none; }
}

/* --- Pointer parallax in the hero ---------------------------------------- */

.hero__inner { perspective: 1200px; }

.map {
	transform: rotateX(var(--px, 0deg)) rotateY(var(--py, 0deg)) translateZ(0);
	transition: transform 220ms var(--ease);
	will-change: transform;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
	.map { transform: none; }
}

/* --- Keyboard shortcuts overlay ------------------------------------------ */

.keys[hidden] { display: none; }

.keys {
	position: fixed;
	inset: 0;
	z-index: 310;
	display: grid;
	place-items: center;
	padding: var(--sp-4);
}

.keys__backdrop { position: absolute; inset: 0; background: rgba(6, 12, 20, .6); backdrop-filter: blur(3px); }

.keys__panel {
	position: relative;
	width: min(100%, 460px);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: var(--sp-6);
	animation: pop 180ms var(--ease);
}

.keys__panel h3 { font-size: var(--step-1); margin-bottom: var(--sp-4); }
.keys__row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; }
.keys__row + .keys__row { border-top: 1px solid var(--border); }
.keys__row span { color: var(--text-muted); font-size: var(--step--1); }

.keys kbd {
	font: inherit;
	font-size: .72rem;
	font-weight: 700;
	padding: .15rem .45rem;
	border: 1px solid var(--border-strong);
	border-radius: 6px;
	background: var(--bg-alt);
	color: var(--text);
}

/* --- Search skeleton ------------------------------------------------------ */

.skeleton { display: grid; gap: var(--sp-2); padding: var(--sp-3); }

.skeleton i {
	display: block;
	height: 42px;
	border-radius: var(--radius);
	background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%);
	background-size: 400% 100%;
	animation: shimmer 1.3s ease infinite;
}

@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) { .skeleton i { animation: none; } }

/* --- Accessibility: high contrast and forced colours --------------------- */

@media (prefers-contrast: more) {
	:root {
		--text-muted: var(--text);
		--border: var(--border-strong);
	}
	.card, .compare__cell, .pill, .chip { border-width: 2px; }
	.pagehero__art, .aurora, body::after { display: none; }
}

@media (forced-colors: active) {
	.card, .chip, .pill, .btn, .icon-btn { border: 1px solid ButtonText; }
	.aurora, body::after, .pagehero__art { display: none; }
	.progress { background: Highlight; }
}

/* ==========================================================================
   24. HERO CONSOLE
   A product-shaped panel rather than a decorative box: title bar, map plate
   with real road structure, live tags and a KPI footer.
   ========================================================================== */

.console {
	position: relative;
	border-radius: var(--radius-lg);
	background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
	border: 1px solid rgba(255, 255, 255, .18);
	box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .10);
	backdrop-filter: blur(10px);
	overflow: hidden;
	transform: rotateX(var(--px, 0deg)) rotateY(var(--py, 0deg));
	transition: transform 220ms var(--ease);
	will-change: transform;
}

@media (hover: none), (prefers-reduced-motion: reduce) { .console { transform: none; } }

.console__bar {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	background: rgba(6, 14, 24, .35);
}

.console__seg {
	display: inline-flex;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--radius-pill);
	overflow: hidden;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .04em;
}

.console__seg b, .console__seg i {
	padding: .18rem .6rem;
	font-style: normal;
}

.console__seg b { background: rgba(255, 255, 255, .16); color: #fff; }
.console__seg i { color: rgba(255, 255, 255, .55); }

.console__count { margin-inline-start: auto; font-size: .74rem; color: rgba(255, 255, 255, .62); }
.console__count b { color: #fff; font-variant-numeric: tabular-nums; }

.console__map { position: relative; background: #0a1a2a; }

.console__canvas { display: block; width: 100%; height: clamp(210px, 26vw, 300px); }

.console__route { animation: routeDash 3s linear infinite; }
@keyframes routeDash { to { stroke-dashoffset: -32; } }

.console__zone { animation: zoneSpin 30s linear infinite; transform-origin: 470px 110px; }
@keyframes zoneSpin { to { transform: rotate(360deg); } }

/* Vehicles ride the same polyline the route draws. */
.console__unit {
	offset-path: path("M70 250 L210 250 L210 110 L470 110 L470 210 L600 210");
	offset-rotate: 0deg;
	animation: unitRide 18s linear infinite;
}

.console__unit--b { animation-duration: 26s; animation-delay: -9s; }
.console__unit--c { animation-duration: 34s; animation-delay: -18s; }

@keyframes unitRide { to { offset-distance: 100%; } }

.console__tag {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .6rem;
	border-radius: var(--radius-pill);
	background: rgba(7, 17, 28, .86);
	border: 1px solid rgba(255, 255, 255, .16);
	color: #fff;
	font-size: .7rem;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: var(--shadow-md);
}

.console__tag b { color: var(--accent); font-variant-numeric: tabular-nums; }
.console__tag em { font-style: normal; color: #ffd166; }
.console__tag--1 { inset-block-start: 12%; inset-inline-end: 7%; }
.console__tag--2 { inset-block-end: 14%; inset-inline-start: 6%; }

.console__foot {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid rgba(255, 255, 255, .12);
	background: rgba(6, 14, 24, .35);
}

.console__kpi { padding: var(--sp-3) var(--sp-4); }
.console__kpi + .console__kpi { border-inline-start: 1px solid rgba(255, 255, 255, .10); }

/* Direct child only. The live value is also a <span>, nested inside <b>, and
   a bare `.console__kpi span` styles it as if it were the label — which is the
   same mistake that broke the dashboard KPIs earlier. */
.console__kpi > span {
	display: block;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}

.console__kpi b {
	display: block;
	margin-top: 2px;
	font-size: var(--step-0);
	font-weight: 600;
	color: rgba(255, 255, 255, .72);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.console__kpi b [data-live] {
	font-size: 1.55em;
	font-weight: 800;
	color: #fff;
	letter-spacing: -.02em;
}

@media (prefers-reduced-motion: reduce) {
	.console__unit, .console__route, .console__zone { animation: none; }
}

/* The hero gradient leaned green at the foot; keep it in the brand navy. */
.hero { background: linear-gradient(155deg, var(--hero-from) 0%, var(--hero-to) 58%, #123049 100%); }

/* ==========================================================================
   25. SOCIAL + TABLES
   ========================================================================== */

.footer__social {
	display: flex;
	gap: var(--sp-2);
	margin-top: var(--sp-6);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--border);
}

.social__link {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-muted);
	transition: all var(--t);
}

.social__link:hover {
	color: #fff;
	background: var(--navy-600);
	border-color: var(--navy-600);
	transform: translateY(-2px);
}

:root[data-theme="dark"] .social__link:hover { background: var(--navy-500); border-color: var(--navy-500); }

.social__link svg { width: 18px; height: 18px; }

/* Wide tables scroll inside their own box rather than breaking the page. */
.table-wrap {
	overflow-x: auto;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.table-wrap .cmp { min-width: 520px; margin: 0; }
.table-wrap .cmp td, .table-wrap .cmp th { padding: var(--sp-4); }
.table-wrap .cmp tbody tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   26. PHOTOGRAPHY
   ==========================================================================
   Every image under assets/img/photos is a real photograph or product render
   recovered from the company's own media library, so these rules are about
   framing photographs rather than the flat vector art in section 12. */

.shots {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.shots--single { grid-template-columns: 1fr; }

.shot {
	position: relative;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface-2);
	box-shadow: var(--shadow);
	isolation: isolate;
}

.shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 16 / 9;
	transition: transform 620ms var(--ease);
}

/* A single photograph gets more room than a pair. */
.shots--single .shot img { aspect-ratio: 21 / 9; }

@media (max-width: 700px) {
	.shots--single .shot img { aspect-ratio: 16 / 10; }
}

.shot:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
	.shot img, .shot:hover img { transition: none; transform: none; }
}

/* A scrim along the bottom edge. The photographs come from a dozen different
   sources and vary a lot in exposure; this keeps the join with the page below
   consistent without darkening the subject. */
.shot::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 38%;
	pointer-events: none;
	background: linear-gradient(to top, color-mix(in oklab, var(--bg) 55%, transparent), transparent);
}

@supports not (color: color-mix(in oklab, #000, #fff)) {
	.shot::after { display: none; }
}

/* Photographs used as industry-card artwork crop harder than the vector art,
   which is drawn to fill its box. */
.card__art--photo {
	object-fit: cover;
	aspect-ratio: 16 / 9;
	width: 100%;
}

/* --- The vehicle strip ---------------------------------------------------
   Eight cutouts on transparent backgrounds. They are line-drawing-light, so
   they need a surface behind them to read at all in dark mode. */

.fleetstrip {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

.fleetstrip__item {
	margin: 0;
	padding: var(--sp-4) var(--sp-3) var(--sp-3);
	text-align: center;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	transition: border-color var(--t), transform var(--t), background var(--t);
}

.fleetstrip__item:hover {
	border-color: var(--border-strong);
	transform: translateY(-3px);
}

.fleetstrip__item img {
	display: block;
	width: 100%;
	height: 62px;
	object-fit: contain;
	margin-bottom: var(--sp-2);
}

/* The renders are dark-outlined on white bodywork; on the dark theme they
   need lifting or they read as grey smudges. */
:root[data-theme="dark"] .fleetstrip__item img {
	filter: brightness(1.12) contrast(1.04);
}

.fleetstrip__item figcaption {
	font-size: var(--step--1);
	color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
	.fleetstrip__item:hover { transform: none; }
}

/* A couple of sources are banner strips roughly 7:1 once their baked-in copy
   is cropped off. Forcing those into the 21:9 frame would show only the middle
   third, so they keep their own proportions instead. */
.shot--panorama img {
	aspect-ratio: auto;
	object-fit: contain;
	background: var(--surface-2);
}

.shot--panorama::after { display: none; }

/* ==========================================================================
   27. HEADER FIT
   ==========================================================================
   The header row is brand + nav + actions on a single line inside a 1200px
   container. At 1280px those measured 164 + 789 + 454 = 1407px plus 48px of
   gaps, and nothing in the row shrinks -- so it overflowed the viewport by
   219px and carried the phone CTA off the right edge. Rather than let it
   spill, shed the optional pieces on the way down. */

.header__inner { min-width: 0; }
.nav { min-width: 0; }

.header__inner { gap: var(--sp-4); }
.nav__link { padding-inline: var(--sp-2); }

/* The accent picker is gone from the header. .container caps at 1200px at every
   viewport, and the row needs 164 (brand) + 789 (seven nav items) + 333
   (actions) + gaps = 1200 exactly. The four swatches are another 120px, so on a
   wide screen they did not gain room -- they squeezed .nav instead and the last
   nav links rendered underneath them. A decorative accent picker is not worth
   breaking the navigation for. The button styles below are kept so the control
   can be reinstated somewhere it fits, such as inside the search palette. */
.swatches { display: none; }

/* The header row gets more width than the body container. Seven nav items need
   about 677px; inside a 1200px container, after the brand and the action
   buttons, only 671px was left -- so "Contact" rendered on top of the search
   button. The row is the one place on the page that genuinely needs the extra
   space. */
.header__inner { width: min(100% - 2.5rem, 1360px); }

@media (max-width: 1280px) {
	/* The "/" hint is a power-user affordance; the icon still opens search. */
	.search-btn kbd { display: none; }
	.nav__link { padding-inline: 6px; }
	.nav__list { gap: 2px; }
}

/* Below 1120px the drawer takes over, so there is no desktop row left to
   squeeze. The lang label still goes, to keep the action cluster narrow next to
   the burger. */
@media (max-width: 1120px) {
	.lang-btn span { display: none; }
}

/* --- Phone CTA -----------------------------------------------------------
   It was a bare "16983" in a red pill, which reads as a stray number rather
   than a hotline. The icon says what it is without costing much width. */

.btn--call { gap: var(--sp-2); }

.btn--call svg {
	width: 16px;
	height: 16px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* On a 375px screen the action cluster measured 340px -- brand plus burger plus
   search, language, theme and a 126px phone pill do not share a phone-width
   row. The number collapses to its icon; the link still dials. */
@media (max-width: 560px) {
	.btn--call span { display: none; }
	.btn--call { padding-inline: var(--sp-3); }
	.header__actions { gap: var(--sp-2); }
}

@media (max-width: 400px) {
	/* Theme and language stay; search is one tap away inside the drawer. */
	.search-btn { display: none; }
}

/* A grid track of 1fr floors at min-content, so the unbreakable
   info@gpstrackeregy.com in the contact column pushed that track past its share
   and the footer overflowed the page by a few pixels between 960 and 1000. */
.footer__grid > * { min-width: 0; }
.footer a { overflow-wrap: anywhere; }

/* Under 400px the wordmark and the action cluster cannot share the row. */
@media (max-width: 400px) {
	.brand__name { display: none; }
}


/* ==========================================================================
   28. NATIVE CONTROL THEMING
   ========================================================================== */

:root[data-theme="dark"]  { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* The dropdown list of a <select> is drawn by the OS, not the page. color-scheme
   above is what actually fixes it; these give the browsers that do honour
   option styling the right colours too. */
.form select option,
.form select optgroup {
	background-color: var(--surface);
	color: var(--text);
}

/* Chrome's autofill paints its own near-white background over dark inputs. */
.form input:-webkit-autofill,
.form input:-webkit-autofill:hover,
.form input:-webkit-autofill:focus,
.form textarea:-webkit-autofill {
	-webkit-text-fill-color: var(--text);
	-webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
	caret-color: var(--text);
}

/* A visible chevron, so the control does not rely on the OS arrow that changes
   shape between platforms. */
.form select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23889bb3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 18px;
	padding-inline-end: 2.5rem;
}

[dir="rtl"] .form select {
	background-position: left 0.75rem center;
	padding-inline-end: var(--sp-4);
	padding-inline-start: 2.5rem;
}