/*!
 * Noman 360 — Homepage styles
 * Hand-authored (no Tailwind runtime) for fast first paint and predictable
 * Core Web Vitals. Organized top-to-bottom: tokens, reset, layout utilities,
 * shared components, then one block per homepage section, then animations
 * and responsive/accessibility overrides.
 */

/* ---------- Design tokens ---------- */
:root {
	--color-bg: #020914;
	--color-bg-sec: #061421;
	--color-card: #091a27;
	--color-elevated: #0d2130;
	--color-primary: #318dae;
	--color-primary-light: #54b7d8;
	--color-text: #edf6fa;
	--color-white: #ffffff;
	--color-muted: #8fa7b5;
	--color-border: rgba(49, 141, 174, 0.18);
	--color-glow: rgba(49, 141, 174, 0.20);

	--font-heading: 'Clash Display', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

	--container-w: 1280px;
	--radius-sm: 0.75rem;
	--radius-md: 1rem;
	--radius-lg: 1.5rem;
	--radius-xl: 2rem;
	--ease-premium: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	--shadow-glow: 0 10px 30px -10px rgba(49, 141, 174, 0.2);
	--section-pad: 6rem;
}

@media (min-width: 1024px) {
	:root { --section-pad: 8rem; }
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-weight: 400;
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; color: var(--color-white); line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
p { margin: 0; }
svg { display: block; }
::selection { background: var(--color-primary); color: var(--color-white); }

/* Neutralise Hello Elementor's reset.css interaction colours. It ships
   `a:hover { color:#336 }` and `button:hover { background:#c36; color:#fff }`
   — selectors that carry a pseudo-class, so they out-rank any plain
   single-class rule of ours the moment a link or button is hovered (white
   button text turning dark blue, the menu toggle flashing pink). These
   match their specificity exactly and load later, so they win; components
   that want a distinct hover colour declare it themselves further down. */
a:hover, a:active, a:focus { color: inherit; }
button:hover, button:focus,
[type=button]:hover, [type=button]:focus,
[type=submit]:hover, [type=submit]:focus {
	background-color: transparent;
	color: inherit;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--color-primary-light);
	outline-offset: 2px;
	border-radius: 4px;
}

.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: 1rem;
	z-index: 9999;
	background: var(--color-primary);
	color: var(--color-white);
	padding: 0.75rem 1.25rem;
	border-radius: var(--radius-sm);
}
.skip-link.screen-reader-text:focus {
	left: 1rem;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-card); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* ---------- Layout utilities ---------- */
.container {
	max-width: var(--container-w);
	margin-inline: auto;
	padding-inline: 1.5rem;
}
@media (min-width: 1024px) {
	.container { padding-inline: 2rem; }
}

.section { position: relative; padding-block: var(--section-pad); }
.section--tight { padding-block: 5rem; }

.section-header { max-width: 42rem; margin-inline: auto; text-align: center; margin-bottom: 4rem; }
.eyebrow {
	display: block;
	color: var(--color-primary);
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}
.section-title {
	font-size: clamp(1.85rem, 1.35rem + 2.6vw, 3.25rem);
	font-weight: 800;
	margin-bottom: 1.25rem;
}
.section-title--sm { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); margin-bottom: 0; }
.section-desc { color: var(--color-muted); font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem); }

.grid-bg {
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 80px 80px;
}

.glow {
	position: absolute;
	width: 600px;
	height: 600px;
	max-width: 90vw;
	background: radial-gradient(circle, var(--color-glow) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

/* ---------- Buttons & badges ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.9rem 1.75rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.9375rem;
	border: 1px solid transparent;
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
	cursor: pointer;
	white-space: nowrap; /* a wrapped label turns the pill radius into a blob */
	text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
	background: var(--color-primary);
	color: var(--color-white);
	box-shadow: 0 0 15px rgba(49, 141, 174, 0.3);
}
.btn--primary:hover { background: var(--color-primary-light); color: var(--color-white); box-shadow: 0 0 25px rgba(49, 141, 174, 0.5); }
.btn--outline {
	border-color: var(--color-border);
	color: var(--color-white);
	background: transparent;
}
.btn--outline:hover { border-color: var(--color-primary); background: rgba(49, 141, 174, 0.1); color: var(--color-white); }
.btn--whatsapp {
	border-color: var(--color-border);
	color: var(--color-white);
	background: transparent;
}
.btn--whatsapp:hover { border-color: #25d366; background: rgba(37, 211, 102, 0.1); color: var(--color-white); }
.btn--whatsapp svg { color: #25d366; }
.btn--sm { padding: 0.6rem 1.25rem; font-size: 0.875rem; }

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.6rem 1.25rem;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	background: rgba(9, 26, 39, 0.3);
	backdrop-filter: blur(8px);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text);
	transition: border-color 0.25s ease;
}
.badge:hover { border-color: var(--color-primary); }
.badge__dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--color-primary); }
.badge__dot--pulse { animation: pulse-dot 2s ease-in-out infinite; box-shadow: 0 0 10px rgba(49, 141, 174, 0.8); }

/* ---------- Card base (services / why-us / projects) ---------- */
.card {
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: transform 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
}
.card:hover { transform: translateY(-5px); border-color: var(--color-primary); box-shadow: var(--shadow-glow); }

.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag {
	padding: 0.4rem 1rem;
	border-radius: 0.6rem;
	font-size: 0.8125rem;
	font-weight: 500;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	color: var(--color-text);
}
.tag-list--pills .tag--pill {
	padding: 0.25rem 0.65rem;
	font-size: 0.75rem;
	color: var(--color-primary);
	background: rgba(49, 141, 174, 0.1);
	border: none;
	border-radius: 0.35rem;
}

/* ---------- Reveal-on-scroll ---------- */
.reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ================= HEADER / NAV ================= */
.noman-header { position: fixed; inset-inline: 0; top: 0; z-index: 50; padding-block: 1rem; }
.site-navbar {
	--nav-bg: rgba(6, 20, 33, 0.7);
}
.site-navbar__inner {
	max-width: var(--container-w);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: var(--nav-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid transparent;
	border-bottom: 1px solid rgba(49, 141, 174, 0.1);
	border-radius: 999px;
	padding: 0.6rem 1.25rem;
	transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.site-navbar.is-scrolled .site-navbar__inner {
	background: rgba(2, 9, 20, 0.92);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
	border-bottom-color: var(--color-border);
}
/* display:flex so the wrapper hugs the logo; max-width stops a very wide
   logo from squeezing the nav. */
.site-navbar__logo { display: flex; align-items: center; flex-shrink: 0; }
.site-navbar__logo img,
.site-navbar__logo .custom-logo {
	height: 2rem;
	width: auto;
	max-width: 11rem;
	object-fit: contain;
}
@media (min-width: 1280px) {
	.site-navbar__logo img,
	.site-navbar__logo .custom-logo { height: 2.25rem; max-width: 13rem; }
}
.site-navbar__menu {
	display: none;
	align-items: center;
	gap: 1.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	white-space: nowrap; /* keeps "About Me" / "Testimonials" on one line */
}
@media (min-width: 1280px) { .site-navbar__menu { gap: 1.75rem; font-size: 0.9rem; } }
.site-navbar__menu a { color: var(--color-text); white-space: nowrap; }
.site-navbar__menu a:hover { color: var(--color-primary); }
.site-navbar__actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
/* Slightly tighter than a body button so six nav items + this long label
   still fit on one row at 1024px. */
.site-navbar__cta { display: none; padding: 0.6rem 1.1rem; font-size: 0.8125rem; }
@media (min-width: 1280px) { .site-navbar__cta { padding: 0.65rem 1.35rem; font-size: 0.875rem; } }
.site-navbar__toggle {
	background: none;
	border: none;
	color: var(--color-text);
	padding: 0.25rem;
	cursor: pointer;
}
.site-navbar__toggle:hover, .site-navbar__toggle:focus { color: var(--color-white); background: none; }

.mobile-menu { padding: 0.5rem 1.5rem 0; }
.mobile-menu[hidden] { display: none; }
.mobile-menu__list {
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.mobile-menu__list a { color: var(--color-text); font-weight: 500; padding: 0.25rem 0; display: block; }
.mobile-menu__list a:hover { color: var(--color-primary); }
.mobile-menu__cta { width: calc(100% - 2rem); margin: 0.75rem 1rem 1rem; }

@media (min-width: 1024px) {
	.site-navbar__menu { display: flex; }
	.site-navbar__cta { display: inline-flex; }
	.site-navbar__toggle { display: none; }
	.mobile-menu { display: none !important; }
}

/* ================= HERO ================= */
/* --portrait-h lives on the section (not .hero__content) so the top padding
   can reserve headroom for the outer ring: the ring rises (outer − centre) =
   0.36 × portrait-h above the figure, so that much + the nav must be padded
   or the orbit slides under the header. The clamp divides by 1.30 for the
   same reason — the portrait's own height AND its ring headroom both scale
   with it, and together they have to fit inside the viewport. */
.hero {
	--portrait-h: clamp(12rem, calc((100vh - 17rem) / 1.18), 30rem);
	--portrait-h: clamp(12rem, calc((100svh - 17rem) / 1.18), 30rem);
	position: relative;
	padding-top: calc(4.5rem + var(--portrait-h) * 0.18);
	padding-bottom: 5rem;
	min-height: 100vh;
	min-height: 100dvh; /* = 100vh on desktop; tracks the real visible height on mobile */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
/* Full-width base gradient: darkens the bottom of the hero so the headline
   reads cleanly and the section blends into the one below. */
.hero::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 45%;
	background: linear-gradient(to bottom, transparent 0%, rgba(2, 9, 20, 0.85) 55%, var(--color-bg) 100%);
	pointer-events: none;
	z-index: 1;
}
.hero__bg { position: absolute; inset: 0; background: #07090c; z-index: 0; }
/* Cyan 48px grid + a soft radial bloom pinned to the top-right corner. */
.hero__grid {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(to right, rgba(34, 211, 238, 0.08) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(34, 211, 238, 0.08) 1px, transparent 1px),
		radial-gradient(800px 400px at 80% 0%, rgba(34, 211, 238, 0.18), transparent 60%);
	background-size: 48px 48px, 48px 48px, 100% 100%;
}
.hero__canvas { position: absolute; inset: 0; z-index: 0; opacity: 0.7; }
.hero__glow { top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.2; width: 800px; height: 800px; }

/* Solar-system orbit rings — three concentric rings of real brand icons
   (from the Media Library) rotating around the portrait, alternating
   direction per ring. Each icon anchor is placed at a fixed angle around
   the ring (rotate + translateY), the ring itself spins continuously, and
   an inner "counter" element spins the opposite way at the same speed so
   every badge stays upright while it orbits. */
/* Anchored inside .hero__content, with every size derived from --portrait-h
   (declared on .hero__content) so the rings always track the portrait: one
   value to change, and the orbit centre + radii follow automatically. */
.hero__orbits {
	position: absolute;
	top: calc(var(--portrait-h) * 0.56); /* chest height — low, like the reference */
	left: 50%;
	width: 0;
	height: 0;
	z-index: 0;
	/* A LOW centre is what lets the figure be large: the orbit only rises
	   (outer − centre) = 0.74 − 0.56 = 0.18 × portrait-h above the head, so
	   .hero needs far less padding-top to keep the ring clear of the nav.
	   Inner ring passes behind the shoulders/head on purpose (portrait sits
	   above it on z-index) — that occlusion is the "solar system" effect. */
	--ring-radius-inner: calc(var(--portrait-h) * 0.46);
	--ring-radius-mid: calc(var(--portrait-h) * 0.60);
	--ring-radius-outer: calc(var(--portrait-h) * 0.74);
}

/* Soft neon bloom sitting behind the rings and the subject. */
.hero__spotlight {
	position: absolute;
	top: calc(var(--portrait-h) * 0.56);
	left: 50%;
	width: calc(var(--portrait-h) * 2.2);
	height: calc(var(--portrait-h) * 2.2);
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(49, 141, 174, 0.22) 0%, rgba(49, 141, 174, 0.08) 42%, transparent 68%);
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

/* Fades the bottom of the subject into the background so the headline
   underneath stays high-contrast and readable. */
.hero__scrim {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 100vw; /* full-bleed so the darkened text zone never shows a box edge */
	height: calc(var(--portrait-h) * 0.62);
	transform: translateX(-50%);
	/* Near-opaque through the text zone: orbiting tiles fade out as they
	   pass behind the role line and headline instead of cluttering them. */
	background: linear-gradient(to bottom, transparent 0%, rgba(7, 9, 12, 0.86) 42%, rgba(7, 9, 12, 0.97) 100%);
	pointer-events: none;
	z-index: 2;
}

.orbit-ring {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	transform-origin: 0 0; /* spin about the ring centre, never the box centre */
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	will-change: transform; /* keeps the rotation on the compositor — no per-frame repaint */
}
/* The faint dashed path each set of icons travels along. */
.orbit-ring::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: calc(2 * var(--radius));
	height: calc(2 * var(--radius));
	transform: translate(-50%, -50%);
	/* Solid and bright enough to read as a track — the low-alpha dashes
	   registered as noise, so the tiles looked scattered rather than orbiting. */
	border: 1.5px solid rgba(84, 183, 216, 0.40);
	border-radius: 50%;
	box-shadow:
		0 0 16px rgba(84, 183, 216, 0.30),
		0 0 36px rgba(49, 141, 174, 0.16),
		inset 0 0 28px rgba(49, 141, 174, 0.10);
}
.orbit-anchor {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	transform-origin: 0 0;
	transform: rotate(var(--angle)) translateY(calc(-1 * var(--radius)));
}
/* THE DRIFT FIX. This wrapper counter-rotates to keep the logo upright. As
   a block child of a 0-wide anchor its box was 0 × (one badge) tall, so the
   default 50%/50% origin sat half a badge BELOW the anchor point; rotating
   about that off-centre pivot swung the badge's centre in a small circle
   around the true track point — visibly leaving the ring as it turned.
   Making it a 0×0 point with origin 0 0 pins the pivot to the anchor, so
   the badge centre stays on the line and only its orientation changes. */
.orbit-counter {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	transform-origin: 0 0;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	will-change: transform;
}
/* Round black badge with a glowing cyan rim, matching the reference: the
   logo keeps its own colour inside a dark disc so it reads as a lit planet. */
.orbit-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: #070c14;
	border: 2px solid rgba(84, 183, 216, 0.7);
	box-shadow:
		0 0 0 1px rgba(84, 183, 216, 0.18),
		0 0 14px rgba(84, 183, 216, 0.5),
		0 0 30px rgba(49, 141, 174, 0.28),
		0 6px 16px rgba(0, 0, 0, 0.55);
	transform: translate(-50%, -50%);
}
.orbit-badge img {
	width: 56%;
	height: 56%;
	object-fit: contain;
	filter: drop-shadow(0 0 5px rgba(120, 210, 240, 0.4));
}
@media (min-width: 640px)  { .orbit-badge { width: 2.75rem; height: 2.75rem; } }
@media (min-width: 1024px) { .orbit-badge { width: 3.25rem; height: 3.25rem; } }

/* --portrait-h drives the portrait, the orbit centre, every ring radius, the
   scrim and the text overlap. Sizing it against the viewport height (rather
   than fixed rem steps) is what keeps the whole composition inside the first
   fold on short laptop screens: 26rem is the headroom the text + padding need. */
.hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 0;
}
/* Cut-out portrait sits above the rings, so icons pass behind the subject.
   contain + auto width keeps the whole figure visible without cropping. */
.hero__portrait {
	position: relative;
	z-index: 1;
	height: var(--portrait-h);
	width: auto;
	aspect-ratio: 5316 / 7636;
	margin-bottom: 0;
	-webkit-mask-image: linear-gradient(to bottom, black 78%, transparent 100%);
	mask-image: linear-gradient(to bottom, black 78%, transparent 100%);
	filter: drop-shadow(0 22px 38px rgba(0, 0, 0, 0.6));
}
.hero__portrait img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }

@media (min-width: 1024px) {
	.hero {
		--portrait-h: clamp(15rem, calc((100vh - 17rem) / 1.18), 38rem);
		--portrait-h: clamp(15rem, calc((100svh - 17rem) / 1.18), 38rem);
	}
}
@media (min-width: 1280px) {
	.hero {
		--portrait-h: clamp(15rem, calc((100vh - 17rem) / 1.18), 42rem);
		--portrait-h: clamp(15rem, calc((100svh - 17rem) / 1.18), 42rem);
	}
}

/* z-index 3 keeps the headline above both the portrait (1) and the scrim (2);
   the negative margin overlaps it onto the faded base of the figure. */
.hero__text {
	position: relative;
	z-index: 3;
	text-align: center;
	max-width: 64rem;
	margin-inline: auto;
	margin-top: calc(var(--portrait-h) * -0.10); /* headline overlaps the lower torso, like the reference */
	padding-inline: 1.5rem;
}
/* Phones: the rings now show at every width and the figure is large, so
   the copy gets a frosted dark panel and sits just below the figure instead
   of over it — keeps the headline legible against orbiting icons. */
@media (max-width: 767.98px) {
	.hero__text {
		margin-top: 0.75rem;
		padding: 1.25rem 1.1rem 1.4rem;
		border-radius: var(--radius-lg);
		background: rgba(7, 9, 12, 0.78);
		border: 1px solid rgba(84, 183, 216, 0.16);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
	}
}
.hero__roles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem 0.85rem;
	margin-bottom: 0.75rem;
	font-size: clamp(0.6875rem, 0.63rem + 0.25vw, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-primary-light);
}
.hero__roles span { display: inline-flex; align-items: center; gap: 0.85rem; }
.hero__roles span + span::before {
	content: '';
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.7;
}

/* Clash Display runs wide, so cap lower than Manrope needed; balance keeps
   any wrap even ("Hi, I'm Noman / Abdul Maliq") instead of orphaning a word. */
.hero__title { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4.25rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.75rem; text-wrap: balance; }
/* Gradient lives on the name span normally; once JS splits it into .word
   spans, each word paints its own gradient and the parent steps aside
   (otherwise the parent's transparent fill would blank the words). */
.hero__title-name:not(:has(.word)),
.hero__title-name .word {
	background: linear-gradient(100deg, var(--color-primary-light) 0%, #7ce0f5 55%, var(--color-primary-light) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: var(--color-primary-light); /* fallback where background-clip:text is unsupported */
	-webkit-text-fill-color: transparent;
}
.hero__title-name:has(.word) {
	background: none;
	-webkit-text-fill-color: currentColor;
	color: var(--color-primary-light);
}
.hero__subtitle {
	font-size: clamp(1rem, 0.9rem + 0.55vw, 1.5rem);
	color: var(--color-muted);
	font-weight: 500;
	letter-spacing: 0.01em;
	margin-bottom: 1.25rem;
}

/* ================= MARQUEE (tech strip) ================= */
.marquee-section {
	border-block: 1px solid rgba(49, 141, 174, 0.5);
	background: rgba(6, 20, 33, 0.5);
	padding-block: 1.5rem;
	overflow: hidden;
}
.marquee-label {
	max-width: var(--container-w);
	margin: 0 auto 0.75rem;
	padding-inline: 1.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-muted);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: center;
}
.marquee-track {
	display: flex;
	overflow: hidden;
	position: relative;
	/* Soft edge fades so chips emerge/vanish instead of hard-clipping. */
	-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
	mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
/* SEAMLESS LOOP: spacing is a per-item right margin, not a flex gap. The
   list is rendered twice and slid by exactly -50%; with a flex gap there is
   no trailing gap after the last chip, so -50% overshoots by half a gap and
   the loop visibly jumps. With margins, copy 1 (chips + margins) is exactly
   half the track and the restart is invisible. */
.marquee-list {
	display: flex;
	min-width: max-content;
	align-items: center;
	animation: marquee 38s linear infinite;
	will-change: transform;
}
.marquee-track:hover .marquee-list { animation-play-state: paused; }
.marquee-item {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	margin-right: 1rem;
	padding: 0.5rem 1.15rem 0.5rem 0.5rem;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	background: rgba(9, 26, 39, 0.65);
	font-size: 0.9375rem;
	font-weight: 600;
	font-family: var(--font-body);
	color: var(--color-text);
	white-space: nowrap;
	transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.marquee-item:hover {
	border-color: rgba(84, 183, 216, 0.6);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(49, 141, 174, 0.18);
}
/* Logo sits in its own dark disc with a faint cyan rim, matching the hero badges. */
.marquee-item img {
	width: 2rem;
	height: 2rem;
	padding: 0.4rem;
	border-radius: 50%;
	background: #070c14;
	box-shadow: 0 0 0 1px rgba(84, 183, 216, 0.35);
	object-fit: contain;
}
/* Text-only chips (no logo in the library) get even left padding so they don't look clipped. */
.marquee-item:not(:has(img)) { padding-left: 1.15rem; }

/* ================= ABOUT ================= */
.about { overflow: hidden; }
.about__grid { display: grid; gap: 4rem; align-items: center; }
.about__media { position: relative; padding-bottom: 2.5rem; }
.about__image-wrap {
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-xl);
	overflow: hidden;
	border: 1px solid var(--color-border);
	position: relative;
}
.about__image-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(0.15); transition: transform 0.8s ease; }
.about__image-wrap:hover img { transform: scale(1.03); }
.about__image-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--color-bg), transparent 60%);
	opacity: 0.8;
}
.about__stats {
	margin: 1.5rem 0 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
.stat-card { background: var(--color-elevated); border: 1px solid var(--color-border); padding: 1.25rem; border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
.stat-card__value { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; color: var(--color-primary); margin: 0 0 0.25rem; }
.stat-card__label { font-size: 0.875rem; font-weight: 500; color: var(--color-text); margin: 0; }

@media (min-width: 768px) {
	.about__stats {
		position: absolute;
		bottom: -2.5rem;
		right: -1rem;
		width: 108%;
		margin-top: 0;
	}
	.about__media { padding-bottom: 4rem; }
}

.about__copy { display: flex; flex-direction: column; gap: 1.25rem; color: var(--color-muted); font-size: 1.0625rem; }
.about__copy strong { color: var(--color-white); font-weight: 500; }
.about__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }

@media (min-width: 1024px) {
	.about__grid { grid-template-columns: 1fr 1fr; }
	.about__content { padding-left: 2.5rem; }
}

/* ================= SERVICES ================= */
.services__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.service-card { padding: 2rem; position: relative; overflow: hidden; }
.service-card__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; }
.service-card__icon {
	width: 3rem; height: 3rem; border-radius: 0.75rem;
	background: var(--color-elevated); border: 1px solid var(--color-border);
	display: flex; align-items: center; justify-content: center; color: var(--color-primary);
}
.service-card__index { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; color: var(--color-muted); opacity: 0.5; }
.service-card__title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; }
.service-card__desc { color: var(--color-muted); font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.5rem; }
.service-card__link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--color-primary); font-size: 0.875rem; font-weight: 600; transition: transform 0.3s ease; }
.service-card__link:hover, .service-card__link:focus { color: var(--color-primary-light); }
.service-card:hover .service-card__link { transform: translateX(6px); }

@media (min-width: 768px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services__grid { grid-template-columns: repeat(3, 1fr); } }

/* ================= SKILLS / TOOLKIT (nms-) ================= */
/* A 6-column desktop grid: two wide cards (span 3) on row 1, then two rows
   of three medium cards (span 2). Balanced by design rather than a random
   bento, and it tracks content volume — the two largest groups sit up top. */
.nms-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .nms-grid { grid-template-columns: repeat(2, 1fr); gap: 1.35rem; } }
@media (min-width: 1024px) {
	.nms-grid { grid-template-columns: repeat(6, 1fr); gap: 1.5rem; }
	.nms-card--span3 { grid-column: span 3; }
	.nms-card--span2 { grid-column: span 2; }
}

.nms-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.6rem 1.5rem 1.4rem;
	border-radius: 18px;
	border: 1px solid var(--color-border);
	background:
		radial-gradient(120% 100% at 0% 0%, rgba(49, 141, 174, 0.10), transparent 55%),
		linear-gradient(165deg, rgba(13, 33, 48, 0.92), rgba(9, 26, 39, 0.9));
	transition: transform 0.3s var(--ease-premium), border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Hairline of brand colour along the top edge — accent without colour noise. */
.nms-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 1.5rem;
	right: 1.5rem;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(84, 183, 216, 0.55), transparent);
}
.nms-card:hover {
	transform: translateY(-4px);
	border-color: rgba(49, 141, 174, 0.6);
	box-shadow: 0 16px 34px -18px rgba(49, 141, 174, 0.5);
}

.nms-card__head { display: flex; align-items: flex-start; gap: 0.85rem; margin-bottom: 1.15rem; }
.nms-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 0.8rem;
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
	color: var(--color-white);
	box-shadow: 0 8px 18px -8px rgba(49, 141, 174, 0.7);
}
.nms-card__heading { min-width: 0; }
.nms-card__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.25rem; }
.nms-card__desc { color: var(--color-muted); font-size: 0.8125rem; line-height: 1.5; }

.nms-card__list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; }
.nms-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.38rem;
	padding: 0.32rem 0.7rem;
	border-radius: 0.55rem;
	border: 1px solid rgba(49, 141, 174, 0.2);
	background: rgba(2, 9, 20, 0.55);
	color: var(--color-muted);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.35;
	transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.nms-pill:hover {
	color: var(--color-white);
	border-color: rgba(84, 183, 216, 0.65);
	background: rgba(49, 141, 174, 0.16);
}
.nms-pill img { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }
/* Featured skills: a touch brighter, never larger. */
.nms-pill--featured {
	color: var(--color-text);
	font-weight: 600;
	border-color: rgba(84, 183, 216, 0.5);
	background: rgba(49, 141, 174, 0.14);
}
.nms-pill--featured:hover { border-color: var(--color-primary-light); background: rgba(49, 141, 174, 0.24); }

/* Phones: tighter padding so dense cards don't become towers. */
@media (max-width: 639.98px) {
	.nms-card { padding: 1.35rem 1.15rem 1.2rem; border-radius: 16px; }
	.nms-card::before { left: 1.15rem; right: 1.15rem; }
	.nms-card__icon { width: 2.3rem; height: 2.3rem; border-radius: 0.7rem; }
	.nms-card__list { gap: 0.35rem; }
	.nms-pill { padding: 0.3rem 0.6rem; font-size: 0.7188rem; }
}

/* ================= PROCESS (infographic steps) ================= */
/* Each step is a card; a single gradient "chain" line runs behind the row
   at number-badge height and is only visible in the gaps between cards, so
   the five badges read as linked nodes on one track. */
.process__steps {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
.process__step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 1.75rem 1.5rem 1.5rem;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	background: linear-gradient(160deg, rgba(13, 33, 48, 0.92), rgba(9, 26, 39, 0.86));
	transition: transform 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
}
.process__step:hover {
	transform: translateY(-5px);
	border-color: rgba(84, 183, 216, 0.55);
	box-shadow: 0 16px 36px -14px rgba(49, 141, 174, 0.35);
}
/* Oversized faded step number in the corner — depth without noise. */
.process__watermark {
	position: absolute;
	top: -0.35rem;
	right: 0.6rem;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 4.5rem;
	line-height: 1;
	color: rgba(84, 183, 216, 0.07);
	pointer-events: none;
	user-select: none;
}
.process__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	margin-bottom: 1.1rem;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.75rem;
	box-shadow: 0 0 0 4px rgba(49, 141, 174, 0.18), 0 0 16px rgba(49, 141, 174, 0.45);
}
.process__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1rem;
	border-radius: 0.85rem;
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
	color: var(--color-white);
	box-shadow: 0 8px 18px -6px rgba(49, 141, 174, 0.6);
}
.process__title { font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.5rem; }
.process__desc { color: var(--color-muted); font-size: 0.9rem; line-height: 1.6; }
/* Deliverables line pinned to the card foot. */
.process__meta {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid rgba(49, 141, 174, 0.15);
	color: var(--color-primary-light);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.process__desc + .process__meta { margin-top: 1.1rem; }
.process__cta { text-align: center; margin-top: 2.5rem; }

@media (min-width: 640px) {
	.process__steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.process__steps { grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
	/* Chain line at badge height: 1.75rem card padding + half of the 1.9rem badge. */
	.process__steps::before {
		content: '';
		position: absolute;
		top: 2.7rem;
		left: 4%;
		right: 4%;
		height: 2px;
		background: linear-gradient(to right, transparent, var(--color-primary) 12%, var(--color-primary) 88%, transparent);
		box-shadow: 0 0 10px rgba(84, 183, 216, 0.5);
		z-index: 0;
	}
}

/* ================= WORK / PORTFOLIO (nmp-) ================= */
/* Filters — horizontally scrollable on narrow screens. */
.nmp-filters {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 2.5rem;
	padding-bottom: 0.5rem;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
}
.nmp-filters::-webkit-scrollbar { display: none; }
.nmp-filter {
	flex: 0 0 auto;
	scroll-snap-align: start;
	padding: 0.55rem 1.15rem;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	background: rgba(9, 26, 39, 0.6);
	color: var(--color-muted);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.nmp-filter:hover, .nmp-filter:focus-visible {
	color: var(--color-white);
	border-color: rgba(84, 183, 216, 0.55);
	background: rgba(49, 141, 174, 0.12);
}
.nmp-filter.is-active {
	color: var(--color-white);
	background: var(--color-primary);
	border-color: var(--color-primary);
	box-shadow: 0 0 18px rgba(49, 141, 174, 0.35);
}
@media (min-width: 768px) { .nmp-filters { flex-wrap: wrap; justify-content: center; overflow-x: visible; } }

/* Grid: 1 / 2 / 3 columns. */
.nmp-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .nmp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .nmp-grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }

.nmp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: 18px;
	background: linear-gradient(165deg, rgba(13, 33, 48, 0.92), rgba(9, 26, 39, 0.9));
	transition: transform 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
}
/* Beats the flex display above, so JS can hide cards with the hidden attribute. */
.nmp-card[hidden] { display: none !important; }
.nmp-card:hover,
.nmp-card:focus-within {
	transform: translateY(-5px);
	border-color: rgba(49, 141, 174, 0.75);
	box-shadow: 0 18px 40px -16px rgba(49, 141, 174, 0.45);
}

/* Square source screenshots cropped to 4/3 — keeps card heights uniform
   without the 37% loss a 16/10 crop would take off a 1:1 image. */
.nmp-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-elevated);
	border-bottom: 1px solid var(--color-border);
}
.nmp-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.6s var(--ease-premium);
}
.nmp-card:hover .nmp-card__media img,
.nmp-card:focus-within .nmp-card__media img { transform: scale(1.04); }

.nmp-card__category {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	padding: 0.32rem 0.8rem;
	border-radius: 999px;
	border: 1px solid rgba(84, 183, 216, 0.35);
	background: rgba(2, 9, 20, 0.82);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--color-primary-light);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.nmp-card__body { display: flex; flex-direction: column; flex-grow: 1; padding: 1.4rem 1.35rem 1.25rem; }
.nmp-card__title {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 0.55rem;
	transition: color 0.3s ease;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.nmp-card:hover .nmp-card__title { color: var(--color-primary-light); }
.nmp-card__desc {
	color: var(--color-muted);
	font-size: 0.875rem;
	line-height: 1.6;
	margin-bottom: 1.1rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* All tags stay in the HTML; CSS caps how many are shown per breakpoint. */
.nmp-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.15rem; }
.nmp-tag {
	padding: 0.25rem 0.65rem;
	border-radius: 0.4rem;
	background: rgba(49, 141, 174, 0.12);
	border: 1px solid rgba(49, 141, 174, 0.18);
	color: var(--color-primary-light);
	font-size: 0.6875rem;
	font-weight: 600;
	white-space: nowrap;
}
.nmp-card__tags .nmp-tag:nth-child(n + 3) { display: none; }
@media (min-width: 1024px) { .nmp-card__tags .nmp-tag:nth-child(n + 3) { display: inline-block; } .nmp-card__tags .nmp-tag:nth-child(n + 4) { display: none; } }

.nmp-card__action {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-white);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.3s ease;
}
/* Stretches the button's hit area over the whole card without nesting
   headings inside a <button> (which would be invalid HTML). */
.nmp-card__action::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.nmp-card__action svg { transition: transform 0.3s ease; }
.nmp-card:hover .nmp-card__action,
.nmp-card__action:focus-visible { color: var(--color-primary-light); }
.nmp-card:hover .nmp-card__action svg { transform: translateX(4px); }
.nmp-card__action:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: 4px; }

/* Reveal for cards added by Load More / filtering. */
.nmp-card { opacity: 0; transform: translateY(14px); }
.nmp-card.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s ease, transform 0.5s var(--ease-premium);
	transition-delay: var(--nmp-delay, 0ms);
}

.nmp-empty { text-align: center; color: var(--color-muted); margin-top: 2rem; }
.nmp-more { text-align: center; margin-top: 2.5rem; }
.nmp-more__btn { min-height: 3rem; padding-inline: 1.9rem; } /* comfortable tap target */
.nmp-more__btn[hidden] { display: none !important; }

/* ---- Project preview modal ---- */
.nmp-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.nmp-modal[hidden] { display: none !important; }
.nmp-modal__backdrop { position: absolute; inset: 0; background: rgba(2, 6, 12, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.nmp-modal__dialog {
	position: relative;
	width: min(56rem, 100%);
	max-height: 90vh;
	max-height: 90dvh;
	overflow-y: auto;
	border: 1px solid rgba(49, 141, 174, 0.35);
	border-radius: 18px;
	background: linear-gradient(165deg, #0d2130, #061421);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
	animation: nmp-modal-in 0.3s var(--ease-premium);
}
.nmp-modal__close {
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: rgba(2, 9, 20, 0.75);
	color: var(--color-text);
	cursor: pointer;
	transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.nmp-modal__close:hover, .nmp-modal__close:focus-visible { color: var(--color-white); border-color: var(--color-primary); background: rgba(49, 141, 174, 0.25); }
.nmp-modal__media { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--color-border); background: var(--color-elevated); }
.nmp-modal__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.nmp-modal__body { padding: 1.5rem; }
.nmp-modal__category { position: static; display: inline-block; margin-bottom: 0.85rem; }
.nmp-modal__title { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem); font-weight: 700; margin-bottom: 0.75rem; }
.nmp-modal__desc { color: var(--color-muted); font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.25rem; }
.nmp-modal__tags { margin-bottom: 0; }
/* The modal shows the complete tag list, unlike the capped card. */
.nmp-modal__tags .nmp-tag:nth-child(n + 3) { display: inline-block; }
@media (min-width: 768px) { .nmp-modal__body { padding: 2rem; } }

@keyframes nmp-modal-in { from { opacity: 0; transform: translateY(12px) scale(0.99); } to { opacity: 1; transform: none; } }

body.nmp-modal-open { overflow: hidden; }

/* Without JS every card stays visible and the controls are pointless. */
.no-js .nmp-card { opacity: 1; transform: none; }
.no-js .nmp-card[hidden] { display: flex !important; }
.no-js .nmp-filters, .no-js .nmp-more { display: none; }

/* ================= WHY WORK WITH ME ================= */
.why-us__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.why-card { padding: 1.5rem; }
.why-card__icon {
	width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; border-radius: 0.6rem;
	background: rgba(49, 141, 174, 0.1); color: var(--color-primary);
	display: flex; align-items: center; justify-content: center;
}
.why-card__title { font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.5rem; }
.why-card__desc { font-size: 0.875rem; color: var(--color-muted); }

@media (min-width: 640px) { .why-us__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .why-us__grid { grid-template-columns: repeat(4, 1fr); } }

/* ================= TESTIMONIALS ================= */
.testimonials { overflow: hidden; }
.testimonial-rows { display: flex; flex-direction: column; gap: 1.5rem; }
.marquee-container { position: relative; display: flex; overflow: hidden; }
.marquee-container:hover .testimonial-track { animation-play-state: paused; }
.marquee-fade { position: absolute; top: 0; bottom: 0; width: 6rem; z-index: 2; pointer-events: none; }
.marquee-fade--left { left: 0; background: linear-gradient(to right, var(--color-bg), transparent); }
.marquee-fade--right { right: 0; background: linear-gradient(to left, var(--color-bg), transparent); }
/* Same seamless-loop rule as the tech strip: per-card right margin instead
   of a flex gap, and no leading padding, so the -50% slide lands exactly on
   the duplicate set and the loop never shows an empty gap or a jump. */
/* 10 cards per row (was 3), so the track is ~3x longer — the duration scales
   with it to keep the same slow, readable ~33px/s drift. */
.testimonial-track { display: flex; min-width: max-content; animation: marquee 120s linear infinite; will-change: transform; }
.testimonial-track--rtl { animation-name: marquee; }
.testimonial-track--ltr { animation-name: marquee-reverse; }
.testimonial-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 23rem; max-width: 85vw;
	min-height: 15.5rem;
	margin: 0 1.5rem 0 0; /* right margin = seam-safe spacing (see track note) */
	padding: 1.75rem 1.75rem 1.5rem;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	background: linear-gradient(160deg, rgba(13, 33, 48, 0.9), rgba(6, 20, 33, 0.92));
	overflow: hidden;
	transition: transform 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
}
.testimonial-card:hover {
	transform: translateY(-4px);
	border-color: rgba(84, 183, 216, 0.55);
	box-shadow: 0 16px 36px -14px rgba(49, 141, 174, 0.35);
}
/* Big soft quote mark in the corner — the classic testimonial cue. */
.testimonial-card__mark {
	position: absolute;
	top: 0.4rem;
	right: 1.1rem;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 5.5rem;
	line-height: 1;
	color: rgba(84, 183, 216, 0.12);
	pointer-events: none;
	user-select: none;
}
.testimonial-card__stars { display: flex; gap: 0.2rem; color: #f5b301; margin-bottom: 0.9rem; filter: drop-shadow(0 0 4px rgba(245, 179, 1, 0.35)); }
/* Clamped generously at 6 lines: the longest review here runs ~5, so this
   only guards against an unusually long one breaking card rhythm. */
.testimonial-card__quote {
	color: var(--color-text);
	font-size: 0.95rem;
	line-height: 1.65;
	margin: 0 0 1.4rem;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: break-word;
}
.testimonial-card__author { display: flex; align-items: center; gap: 0.85rem; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid rgba(49, 141, 174, 0.15); }
/* min-width:0 lets long names/roles wrap instead of forcing the flex row wider. */
.testimonial-card__identity { min-width: 0; }
.testimonial-card__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1rem;
	box-shadow: 0 0 0 3px rgba(49, 141, 174, 0.18);
}
.testimonial-card__name { display: block; color: var(--color-white); font-weight: 700; font-size: 0.9375rem; line-height: 1.25; }
.testimonial-card__role { display: block; color: var(--color-primary-light); font-size: 0.75rem; line-height: 1.4; margin-top: 0.15rem; }

/* Narrow phones: slightly smaller card so one sits comfortably in view. */
@media (max-width: 479.98px) {
	.testimonial-card { width: 19rem; max-width: 88vw; padding: 1.5rem 1.35rem 1.25rem; min-height: 14rem; }
	.testimonial-card__quote { font-size: 0.9rem; }
	.testimonial-card__mark { font-size: 4.5rem; }
}

/* ================= ENGAGEMENT (pricing-style plans) ================= */
.engagement__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.plan-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 2rem;
	transition: border-color 0.3s ease;
}
.plan-card:hover { border-color: var(--color-primary); }
.plan-card--featured {
	background: var(--color-elevated);
	border-color: var(--color-primary);
	box-shadow: 0 0 20px rgba(49, 141, 174, 0.15);
}
@media (min-width: 768px) { .plan-card--featured { transform: translateY(-1rem); } }
.plan-card__ribbon {
	position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%);
	background: var(--color-primary); color: var(--color-white);
	font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
	padding: 0.3rem 0.75rem; border-radius: 999px;
}
.plan-card__title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.plan-card__desc { color: var(--color-muted); font-size: 0.9375rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(49, 141, 174, 0.15); }
.plan-card__body { flex-grow: 1; margin-bottom: 2rem; }
.plan-card__label { font-size: 0.875rem; color: var(--color-primary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; }
.plan-card__list { display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.9375rem; color: var(--color-muted); }
.plan-card__list li { display: flex; align-items: center; gap: 0.5rem; }
.plan-card__list svg { color: var(--color-primary); flex-shrink: 0; }
.plan-card__cta { width: 100%; }

@media (min-width: 768px) { .engagement__grid { grid-template-columns: repeat(3, 1fr); } }

/* ================= BOOKING ================= */
.booking__glow { top: -200px; left: 50%; transform: translateX(-50%); opacity: 0.3; }
.booking__frame {
	max-width: 56rem;
	margin-inline: auto;
	background: rgba(9, 26, 39, 0.8);
	backdrop-filter: blur(8px);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: 0.5rem;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
	height: 700px;
	max-height: 80vh;
	overflow: hidden;
}
.booking__frame #noman360-cal-inline { width: 100%; height: 100%; overflow: auto; }

/* ================= CONTACT ================= */
.contact { overflow: hidden; }
.contact__glow { bottom: -200px; left: -200px; opacity: 0.5; }
.contact__panel {
	position: relative;
	overflow: hidden;
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: 2.5rem 1.75rem;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}
.contact__grid { display: grid; gap: 3rem; position: relative; z-index: 1; }
.contact__intro .section-title { text-align: left; }
.contact__intro { max-width: none; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.contact__card { background: rgba(6, 20, 33, 0.8); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.5rem; backdrop-filter: blur(4px); }
.contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-info__item { display: flex; align-items: flex-start; gap: 1rem; }
.contact-info__icon {
	width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 0.6rem;
	background: var(--color-elevated); border: 1px solid var(--color-border);
	color: var(--color-primary); display: flex; align-items: center; justify-content: center;
}
.contact-info__label { display: block; font-size: 0.875rem; color: var(--color-muted); margin-bottom: 0.2rem; }
.contact-info__item a,
.contact-info__value { color: var(--color-white); font-weight: 500; }
.contact-info__item a:hover { color: var(--color-primary); }
.contact-info__value--status { display: inline-flex; align-items: center; gap: 0.5rem; }

@media (min-width: 768px) { .contact__panel { padding: 4rem; } }
@media (min-width: 1024px) {
	.contact__panel { padding: 5rem; }
	.contact__grid { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* ================= FINAL CTA ================= */
.final-cta { padding-block: clamp(3rem, 7vw, 5rem); }
.final-cta__card {
	position: relative;
	overflow: hidden;
	padding: clamp(2.25rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
	text-align: center;
	border: 1px solid var(--color-border);
	border-radius: 28px;
	background: linear-gradient(160deg, rgba(13, 33, 48, 0.95), rgba(6, 20, 33, 0.97));
	box-shadow: 0 30px 70px -35px rgba(0, 0, 0, 0.85);
}
.final-cta__bg { position: absolute; inset: 0; z-index: 0; opacity: 0.35; }
/* Single soft brand glow — restrained rather than a halo. */
.final-cta__glow {
	position: absolute;
	top: -40%;
	left: 50%;
	transform: translateX(-50%);
	width: min(46rem, 120%);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(49, 141, 174, 0.18) 0%, transparent 62%);
	pointer-events: none;
	z-index: 0;
}
.final-cta__inner { position: relative; z-index: 1; }
.final-cta__title {
	font-size: clamp(1.65rem, 1.2rem + 2.2vw, 2.85rem);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 1rem;
	text-wrap: balance;
}
.final-cta__desc {
	color: var(--color-muted);
	font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.0938rem);
	line-height: 1.7;
	max-width: 42rem;
	margin: 0 auto 2rem;
}
.final-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; }
@media (max-width: 479.98px) {
	.final-cta__card { border-radius: 22px; }
	.final-cta__actions { flex-direction: column; align-items: stretch; }
	.final-cta__actions .btn { width: 100%; }
}

/* ================= FOOTER ================= */
.noman-footer {
	background: #05080f;
	border-top: 1px solid rgba(49, 141, 174, 0.16);
	padding-top: clamp(3rem, 6vw, 4.5rem);
	padding-bottom: 2rem;
}
.noman-footer__grid { display: grid; gap: 2.75rem; margin-bottom: 3rem; }
@media (min-width: 640px) {
	.noman-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }
	.noman-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
	/* Brand column is wider than the two link columns. */
	.noman-footer__grid { grid-template-columns: 1.6fr 1fr 1.2fr; gap: 3.5rem; }
	.noman-footer__brand { grid-column: auto; }
}

/* Logo sized by WIDTH — the asset is a wide wordmark (approx 4.4:1), so a
   height rule would leave it looking tiny. */
.noman-footer__logo { display: block; margin-bottom: 1.35rem; }
.noman-footer__logo img,
.noman-footer__logo .custom-logo {
	width: clamp(150px, 42vw, 180px);
	height: auto;
	max-width: 100%;
}
@media (min-width: 1024px) {
	.noman-footer__logo img,
	.noman-footer__logo .custom-logo { width: 210px; }
}

.noman-footer__tagline { color: var(--color-primary-light); font-weight: 600; font-size: 0.9375rem; line-height: 1.5; margin-bottom: 0.9rem; }
.noman-footer__desc { color: var(--color-muted); font-size: 0.9375rem; max-width: 30rem; line-height: 1.7; margin-bottom: 1.5rem; }
.noman-footer__badge { font-size: 0.6875rem; }

.noman-footer__heading {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-white);
	margin-bottom: 1.25rem;
}
.noman-footer__list { display: flex; flex-direction: column; gap: 0.7rem; font-size: 0.9375rem; }
/* Arrow slides in on hover without shifting the label. */
.noman-footer__list a {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--color-muted);
	transition: color 0.25s ease, transform 0.25s ease;
}
.noman-footer__list a::before {
	content: '→';
	width: 0;
	opacity: 0;
	margin-right: 0;
	transition: opacity 0.25s ease, width 0.25s ease, margin-right 0.25s ease;
}
.noman-footer__list a:hover,
.noman-footer__list a:focus-visible { color: var(--color-primary-light); }
.noman-footer__list a:hover::before,
.noman-footer__list a:focus-visible::before { opacity: 1; width: 0.85em; margin-right: 0.4rem; }

.noman-footer__contact { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1.6rem; }
.noman-footer__label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary-light);
	margin-bottom: 0.25rem;
}
.noman-footer__contact a,
.noman-footer__value { color: var(--color-text); font-size: 0.9375rem; overflow-wrap: anywhere; }
.noman-footer__contact a { transition: color 0.25s ease; }
.noman-footer__contact a:hover, .noman-footer__contact a:focus-visible { color: var(--color-primary-light); }
.noman-footer__wa { display: block; margin-top: 0.2rem; font-size: 0.8125rem; color: var(--color-muted) !important; }
.noman-footer__wa:hover { color: #25d366 !important; }

.noman-footer__social { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.noman-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: rgba(9, 26, 39, 0.7);
	color: var(--color-muted);
	transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease, color 0.25s ease;
}
.noman-footer__social-link:hover,
.noman-footer__social-link:focus-visible {
	border-color: rgba(84, 183, 216, 0.6);
	background: rgba(49, 141, 174, 0.16);
	color: var(--color-primary-light);
	transform: translateY(-2px);
}
.noman-footer__social-link img { width: 16px; height: 16px; object-fit: contain; }
/* Upwork has no logo in the library, so it renders as a compact text chip. */
.noman-footer__social-link--text { width: auto; padding-inline: 0.85rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }

.noman-footer__bottom {
	border-top: 1px solid rgba(49, 141, 174, 0.16);
	padding-top: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: center;
	text-align: center;
	color: var(--color-muted);
	font-size: 0.875rem;
}
.noman-footer__legal a { color: var(--color-muted); transition: color 0.25s ease; }
.noman-footer__legal a:hover { color: var(--color-primary-light); }

@media (min-width: 768px) {
	.noman-footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ================= ANCHOR SCROLL OFFSET ================= */
/* The header is position:fixed, so without this an anchored section lands
   underneath it. scroll-margin-top works for both the CSS smooth scroll and
   any programmatic scrollIntoView. */
section[id] { scroll-margin-top: 6.5rem; }
@media (max-width: 767.98px) { section[id] { scroll-margin-top: 5rem; } }

/* ================= 404 (nm404-) ================= */
.nm404 {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	min-height: 78vh;
	min-height: 78dvh;
	padding-block: clamp(5rem, 12vh, 9rem);
}
.nm404-bg { position: absolute; inset: 0; z-index: 0; opacity: 0.45; }
.nm404-glow {
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44rem;
	height: 44rem;
	opacity: 0.6;
}
/* Oversized watermark numeral behind the card. */
.nm404-ghost {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(11rem, 34vw, 26rem);
	line-height: 1;
	letter-spacing: -0.04em;
	color: rgba(84, 183, 216, 0.06);
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
}
.nm404-inner { position: relative; z-index: 1; }
.nm404-card {
	max-width: 44rem;
	margin-inline: auto;
	padding: clamp(2rem, 5vw, 3.25rem);
	text-align: center;
	border: 1px solid var(--color-border);
	border-radius: 22px;
	background: linear-gradient(165deg, rgba(13, 33, 48, 0.86), rgba(9, 26, 39, 0.9));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8), 0 0 40px rgba(49, 141, 174, 0.14);
}
.nm404-label { margin-bottom: 1rem; }
.nm404-title {
	font-size: clamp(1.6rem, 1.2rem + 2.4vw, 2.75rem);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 1rem;
	text-wrap: balance;
}
.nm404-desc {
	color: var(--color-muted);
	font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
	line-height: 1.7;
	max-width: 34rem;
	margin: 0 auto 2rem;
}
.nm404-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; }
.nm404-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 1.5rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(49, 141, 174, 0.15);
}
.nm404-links a {
	color: var(--color-muted);
	font-size: 0.875rem;
	font-weight: 500;
	transition: color 0.25s ease;
}
.nm404-links a:hover, .nm404-links a:focus-visible { color: var(--color-primary-light); }

@media (max-width: 479.98px) {
	/* Full-width stacked buttons are far easier to tap. */
	.nm404-actions { flex-direction: column; align-items: stretch; }
	.nm404-actions .btn { width: 100%; }
	.nm404-card { border-radius: 18px; }
	.nm404-links { gap: 0.4rem 1.1rem; }
}

/* ================= INTRO VIDEO (nmv-) ================= */
.nmv { position: relative; overflow: hidden; }
.nmv-bg { position: absolute; inset: 0; z-index: 0; opacity: 0.5; }
.nmv-glow { top: 50%; right: -12rem; transform: translateY(-50%); width: 40rem; height: 40rem; opacity: 0.55; }

.nmv-grid { position: relative; z-index: 1; display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .nmv-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3.5rem; } }

/* Left column reuses the section type scale, just left-aligned. */
.nmv-copy .section-title { margin-bottom: 1rem; }
.nmv-desc { margin-bottom: 1.1rem; }
.nmv-meta {
	color: var(--color-primary-light);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.6;
	margin-bottom: 1.6rem;
}
.nmv-points { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.9rem; }
.nmv-point {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--color-text);
	font-size: 0.9375rem;
	font-weight: 500;
}
.nmv-point__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: rgba(49, 141, 174, 0.14);
	border: 1px solid rgba(49, 141, 174, 0.3);
	color: var(--color-primary-light);
}

/* Player card. aspect-ratio reserves the box before metadata loads, so the
   poster swap causes no layout shift. */
.nmv-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 22px;
	border: 1px solid rgba(49, 141, 174, 0.2);
	background: #091a27;
	box-shadow: 0 26px 60px -22px rgba(0, 0, 0, 0.75), 0 0 34px rgba(49, 141, 174, 0.18);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.nmv-frame:hover,
.nmv-frame:focus-within {
	border-color: rgba(49, 141, 174, 0.55);
	box-shadow: 0 26px 60px -22px rgba(0, 0, 0, 0.75), 0 0 46px rgba(49, 141, 174, 0.3);
}
.nmv-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover; /* poster is 16:9, so this never stretches */
	background: #091a27;
}
.nmv-fallback { padding: 1.5rem; color: var(--color-muted); font-size: 0.9375rem; }
.nmv-fallback a { color: var(--color-primary-light); text-decoration: underline; }

/* Controls: subtle, bottom-right, lifted slightly on hover/focus. */
.nmv-controls {
	position: absolute;
	right: 0.85rem;
	bottom: 0.85rem;
	display: flex;
	gap: 0.4rem;
	padding: 0.35rem;
	border-radius: 999px;
	border: 1px solid rgba(49, 141, 174, 0.28);
	background: rgba(2, 9, 20, 0.72);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 0.75;
	transition: opacity 0.3s ease;
}
.nmv-frame:hover .nmv-controls,
.nmv-frame:focus-within .nmv-controls { opacity: 1; }
/* border:0 + transparent bg override Hello Elementor's [type=button] reset,
   which otherwise paints these pink (#c36). */
.nmv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
	transition: color 0.25s ease, background-color 0.25s ease;
}
.nmv-btn:hover, .nmv-btn:focus-visible { color: var(--color-white); background: rgba(49, 141, 174, 0.35); }
.nmv-btn:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: 2px; }

@media (max-width: 1023.98px) {
	/* Mobile order: copy first, video below — matches the reading order. */
	.nmv-copy { order: 1; }
	.nmv-player { order: 2; }
}
@media (max-width: 479.98px) {
	.nmv-frame { border-radius: 16px; }
	.nmv-controls { right: 0.6rem; bottom: 0.6rem; opacity: 1; }
	.nmv-btn { width: 2.5rem; height: 2.5rem; } /* larger tap target on phones */
	.nmv-points { gap: 0.6rem; margin-bottom: 1.5rem; }
	.nmv-point { font-size: 0.875rem; }
	.nmv-glow { display: none; }
}

/* ================= ANIMATIONS ================= */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-reverse { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes spin-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spin-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* ================= HEADING WORD REVEAL ================= */
/* JS wraps heading words in .word (with --i); they stagger in once any
   .reveal ancestor gets .is-visible. Without JS, headings just render. */
.word {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.55em);
	transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(var(--i, 0) * 55ms);
}
.is-visible .word { opacity: 1; transform: none; }

/* ================= CTAs ================= */
.hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.85rem;
	margin-bottom: 1.25rem;
}
/* Diagonal shine that sweeps across the primary button on hover. */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
	content: '';
	position: absolute;
	top: 0;
	left: -70%;
	width: 50%;
	height: 100%;
	background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
	transform: skewX(-20deg);
	transition: left 0.6s ease;
	pointer-events: none;
}
.btn--primary:hover::after { left: 130%; }
/* Slow ambient glow on the hero's main CTA only — a draw, not a distraction. */
.btn--glow { animation: cta-glow 3.2s ease-in-out infinite; }

.services__cta {
	margin-top: 3rem;
	padding: 2rem 1.5rem;
	text-align: center;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, rgba(49, 141, 174, 0.10), rgba(9, 26, 39, 0.4));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}
.services__cta-text { color: var(--color-text); font-size: 1.0625rem; max-width: 34rem; }
@media (min-width: 768px) {
	.services__cta { flex-direction: row; justify-content: space-between; text-align: left; padding: 2rem 2.5rem; }
}

/* ================= WHATSAPP FLOAT ================= */
.wa-float {
	position: fixed;
	left: 1.25rem;
	bottom: 1.25rem;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	height: 3.5rem;
	padding: 0 1.1rem 0 0.9rem;
	border-radius: 999px;
	background: #25d366;
	color: var(--color-white);
	font-weight: 600;
	font-size: 0.9375rem;
	box-shadow: 0 10px 26px rgba(37, 211, 102, 0.35), 0 4px 12px rgba(0, 0, 0, 0.35);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wa-float::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid rgba(37, 211, 102, 0.7);
	animation: wa-pulse 2.2s ease-out infinite;
	pointer-events: none;
}
.wa-float:hover, .wa-float:focus { color: var(--color-white); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(37, 211, 102, 0.45), 0 6px 14px rgba(0, 0, 0, 0.4); }
.wa-float svg { flex-shrink: 0; }
.wa-float__label { display: none; }
@media (min-width: 640px) { .wa-float__label { display: inline; } }
@media (max-width: 639.98px) { .wa-float { width: 3.5rem; padding: 0; justify-content: center; } }

@keyframes cta-glow {
	0%, 100% { box-shadow: 0 0 15px rgba(49, 141, 174, 0.3); }
	50% { box-shadow: 0 0 28px rgba(84, 183, 216, 0.6); }
}
@keyframes wa-pulse {
	0% { transform: scale(1); opacity: 0.8; }
	100% { transform: scale(1.45); opacity: 0; }
}

/* ---------- Reduced motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal { opacity: 1; transform: none; transition: none; }
	.word { opacity: 1; transform: none; transition: none; }
	.marquee-list, .testimonial-track, .orbit-ring, .orbit-counter, .badge__dot--pulse, .btn--glow, .wa-float::before {
		animation: none !important;
	}
	.btn--primary::after { display: none; }
}