/* ==========================================================================
   Inventeb hero (cinematic)  [inventeb_hero]
   Self-contained. Selectors are prefixed .inv-hero / .inv-card / .inv-feed /
   .inv-site. Purple is the brand; lime is used only for the CTA and live data.
   ========================================================================== */

.inv-hero {
	--h-bg: #07040e;
	--h-purple: #7c3aed;
	--h-violet: #a78bfa;
	--h-lav: #ddd6fe;
	--h-lime: #c6ff3d;
	--h-text: #f5f3ff;
	--h-muted: #b9b2d4;
	--h-line: rgba(167, 139, 250, 0.22);
	--h-head: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--h-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--h-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mx: 70%;
	--my: 40%;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: max(680px, calc(100vh - var(--inv-header-h, 76px)));
	background: var(--h-bg);
	color: var(--h-text);
	font-family: var(--h-head);
}

/* ---------- Background ---------- */
.inv-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.inv-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.32;
}

.inv-hero__mesh {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 70% at 78% 42%, rgba(124, 58, 237, 0.42), transparent 62%),
		radial-gradient(40% 50% at 96% 8%, rgba(167, 139, 250, 0.25), transparent 60%),
		radial-gradient(50% 60% at 6% 100%, rgba(91, 33, 182, 0.4), transparent 65%);
	animation: invMesh 20s ease-in-out infinite alternate;
}

@keyframes invMesh {
	from { transform: scale(1) translate3d(0, 0, 0); }
	to   { transform: scale(1.08) translate3d(-1.5%, 1.5%, 0); }
}

.inv-hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(167, 139, 250, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(167, 139, 250, 0.06) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 45%, #000 10%, transparent 72%);
	mask-image: radial-gradient(ellipse 70% 70% at 70% 45%, #000 10%, transparent 72%);
}

.inv-hero__cursor {
	position: absolute;
	inset: 0;
	background: radial-gradient(460px circle at var(--mx) var(--my), rgba(167, 139, 250, 0.13), transparent 60%);
}

.inv-hero__vignette {
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(4, 2, 9, 0.75) 100%);
}

.inv-hero__noise {
	position: absolute;
	inset: 0;
	opacity: 0.08;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Layout ---------- */
.inv-hero__inner {
	position: relative;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 64px 24px 72px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
	align-items: center;
}

/* ---------- Copy ---------- */
.inv-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 28px;
	padding: 8px 16px 8px 13px;
	border: 1px solid var(--h-line);
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(30, 18, 58, 0.75), rgba(14, 8, 28, 0.75));
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font: 500 11.5px/1 var(--h-mono);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--h-lav);
}

.inv-hero__dot {
	position: relative;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--h-lime);
	box-shadow: 0 0 12px var(--h-lime);
}

.inv-hero__dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid var(--h-lime);
	opacity: 0;
	animation: invRing 2.4s ease-out infinite;
}

@keyframes invRing {
	0%   { transform: scale(0.6); opacity: 0.8; }
	100% { transform: scale(1.9); opacity: 0; }
}

.inv-hero__title {
	margin: 0 0 28px;
	font-family: var(--h-head);
	font-weight: 800;
	font-size: clamp(40px, 4.8vw, 70px);
	line-height: 1.04;
	letter-spacing: -0.03em;
	color: var(--h-text);
}

.inv-hero__line {
	display: block;
	overflow: hidden;
	padding-bottom: 0.1em;
	margin-bottom: -0.1em;
}

.inv-hero__line > span {
	display: block;
	transform: translateY(110%);
	animation: invLine 1s var(--h-ease) forwards;
}

.inv-hero__line:nth-child(2) > span { animation-delay: 0.1s; }
.inv-hero__line:nth-child(3) > span { animation-delay: 0.3s; }
.inv-hero__line:nth-child(4) > span { animation-delay: 0.4s; }

@keyframes invLine {
	to { transform: translateY(0); }
}

.inv-hero__line--grad > span {
	background: linear-gradient(100deg, #f5f3ff 0%, #c4b5fd 35%, #8b5cf6 62%, #c4b5fd 100%);
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: invLine 1s var(--h-ease) forwards, invSheen 7s 1.4s ease-in-out infinite;
}

.inv-hero__line--grad:nth-child(3) > span { animation-delay: 0.3s, 1.4s; }
.inv-hero__line--grad:nth-child(4) > span { animation-delay: 0.4s, 1.4s; }

@keyframes invSheen {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}

.inv-hero__sub {
	max-width: 520px;
	margin: 0 0 36px;
	font: 400 clamp(16px, 1.35vw, 19px)/1.65 var(--h-head);
	color: var(--h-muted);
	opacity: 0;
	animation: invFade 0.9s 0.6s var(--h-ease) forwards;
}

.inv-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 36px;
	opacity: 0;
	animation: invFade 0.9s 0.75s var(--h-ease) forwards;
}

.inv-hero__proof {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 400 12.5px/1.4 var(--h-mono);
	color: var(--h-muted);
	opacity: 0;
	animation: invFade 0.9s 0.9s var(--h-ease) forwards;
}

.inv-hero__proof li { position: relative; }

.inv-hero__proof li + li::before {
	content: "";
	position: absolute;
	left: -13px;
	top: 50%;
	width: 3px;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 50%;
	background: var(--h-violet);
}

.inv-hero__proof strong {
	color: var(--h-lime);
	font-weight: 500;
}

@keyframes invFade {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Buttons ---------- */
.inv-hero__btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 17px 28px;
	border-radius: 999px;
	font: 700 16px/1 var(--h-head);
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: transform 0.25s var(--h-ease), box-shadow 0.25s, background 0.25s, border-color 0.25s;
	will-change: transform;
}

.inv-hero__btn--lime {
	background: var(--h-lime);
	color: #0b0614;
	box-shadow: 0 12px 38px -10px rgba(198, 255, 61, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.inv-hero__btn--lime:hover,
.inv-hero__btn--lime:focus-visible {
	box-shadow: 0 18px 48px -8px rgba(198, 255, 61, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	color: #0b0614;
}

.inv-hero__btn--lime svg { transition: transform 0.25s var(--h-ease); }
.inv-hero__btn--lime:hover svg { transform: translateX(4px); }

.inv-hero__btn--ghost {
	border: 1px solid var(--h-line);
	background: rgba(20, 12, 39, 0.55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--h-text);
}

.inv-hero__btn--ghost:hover,
.inv-hero__btn--ghost:focus-visible {
	border-color: var(--h-violet);
	background: rgba(124, 58, 237, 0.2);
	color: var(--h-text);
}

.inv-hero__btn:focus-visible {
	outline: 2px solid var(--h-lime);
	outline-offset: 3px;
}

/* ---------- Stage ---------- */
.inv-hero__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	max-height: 680px;
	perspective: 1200px;
	opacity: 0;
	animation: invFade 1.2s 0.3s var(--h-ease) forwards;
}

.inv-hero__globe {
	position: absolute;
	inset: -6%;
	width: 112%;
	height: 112%;
	pointer-events: none;
}

/* ---------- Glass cards ---------- */
.inv-card {
	position: absolute;
	transform:
		translate3d(calc(var(--px, 0) * var(--depth) * 16px), calc(var(--py, 0) * var(--depth) * 12px), 0)
		rotateY(calc(var(--px, 0) * var(--depth) * 4deg))
		rotateX(calc(var(--py, 0) * var(--depth) * -4deg));
	transition: transform 0.35s var(--h-ease);
	will-change: transform;
}

.inv-card__in {
	position: relative;
	border-radius: 18px;
	border: 1px solid rgba(196, 181, 253, 0.22);
	background: linear-gradient(160deg, rgba(40, 24, 78, 0.62), rgba(14, 8, 30, 0.72));
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	box-shadow:
		0 30px 70px -24px rgba(0, 0, 0, 0.75),
		0 0 0 1px rgba(0, 0, 0, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.12);
	animation: invBob 7s ease-in-out infinite;
}

.inv-card--site .inv-card__in  { animation-delay: -2s; }
.inv-card--tools .inv-card__in { animation-delay: -4s; }

@keyframes invBob {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -9px; }
}

/* Website mini-preview */
.inv-card--site {
	left: -2%;
	top: 9%;
	width: 36%;
	min-width: 190px;
}

.inv-card__bar {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 11px 14px;
	border-bottom: 1px solid rgba(196, 181, 253, 0.14);
}

.inv-card__bar i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ff5f57;
}

.inv-card__bar i:nth-child(2) { background: #febc2e; }
.inv-card__bar i:nth-child(3) { background: #28c840; }

.inv-card__bar span {
	flex: 1;
	height: 9px;
	margin-left: 8px;
	border-radius: 5px;
	background: rgba(196, 181, 253, 0.14);
}

.inv-site {
	display: grid;
	gap: 8px;
	padding: 14px;
}

.inv-site b { display: block; border-radius: 5px; }
.inv-site__nav { height: 8px; background: rgba(196, 181, 253, 0.16); }
.inv-site__h   { height: 14px; width: 78%; margin-top: 4px; background: #f5f3ff; }
.inv-site__p   { height: 6px; width: 92%; background: rgba(196, 181, 253, 0.28); }
.inv-site__p--s { width: 64%; }

.inv-site__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 4px;
	align-items: end;
}

.inv-site__btn {
	height: 22px;
	border-radius: 999px !important;
	background: var(--h-lime);
	box-shadow: 0 0 16px rgba(198, 255, 61, 0.5);
}

.inv-site__img {
	height: 46px;
	background: linear-gradient(135deg, #8b5cf6, #3b1a82);
	border-radius: 9px !important;
}

.inv-card__label {
	margin: 0;
	padding: 0 14px 13px;
	font: 500 11px/1 var(--h-mono);
	letter-spacing: 0.04em;
	color: var(--h-lav);
}

.inv-card__label em {
	margin-left: 6px;
	font-style: normal;
	color: #8f87ad;
}

/* Live feed */
.inv-card--feed {
	right: -3%;
	top: 30%;
	width: 52%;
	min-width: 250px;
}

.inv-feed__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 15px 18px 13px;
	border-bottom: 1px solid rgba(196, 181, 253, 0.14);
	font: 400 11.5px/1 var(--h-mono);
	color: var(--h-muted);
}

.inv-feed__tag {
	padding: 5px 8px;
	border-radius: 6px;
	background: rgba(198, 255, 61, 0.11);
	color: var(--h-lime);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 10px;
}

.inv-feed__name { transition: opacity 0.3s; }

.inv-feed {
	margin: 0;
	padding: 10px 14px 14px;
	list-style: none;
	display: grid;
	gap: 2px;
	transition: opacity 0.35s;
}

.inv-feed__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 6px;
	border-radius: 10px;
	opacity: 0.38;
	transition: opacity 0.4s, background 0.4s;
}

.inv-feed__item::after {
	content: "";
	position: absolute;
	left: 16px;
	top: calc(100% - 4px);
	width: 1px;
	height: 12px;
	background: rgba(196, 181, 253, 0.25);
}

.inv-feed__item:last-child::after { display: none; }

.inv-feed__item.is-done { opacity: 1; }

.inv-feed__item.is-active {
	opacity: 1;
	background: rgba(198, 255, 61, 0.06);
}

.inv-feed__tick {
	flex: none;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid rgba(196, 181, 253, 0.35);
	color: transparent;
	transition: all 0.4s var(--h-ease);
}

.inv-feed__item.is-done .inv-feed__tick {
	background: var(--h-lime);
	border-color: var(--h-lime);
	color: #0b0614;
	box-shadow: 0 0 14px rgba(198, 255, 61, 0.5);
}

.inv-feed__txt {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.inv-feed__txt strong {
	font: 700 14px/1.15 var(--h-head);
	letter-spacing: -0.01em;
	color: var(--h-text);
}

.inv-feed__txt small {
	font: 400 11px/1.2 var(--h-mono);
	color: #a79fc4;
}

/* Tools */
.inv-card--tools {
	left: 8%;
	bottom: 6%;
}

.inv-card--tools .inv-card__in {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px;
	border-radius: 999px;
}

.inv-card--tools span {
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(196, 181, 253, 0.1);
	font: 500 11.5px/1 var(--h-mono);
	color: var(--h-lav);
}

/* ---------- Paused off-screen ---------- */
.inv-hero.is-paused *,
.inv-hero.is-paused *::before,
.inv-hero.is-paused *::after {
	animation-play-state: paused !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.inv-hero__inner {
		grid-template-columns: 1fr;
		gap: 36px;
		padding: 56px 24px 64px;
	}

	.inv-hero__stage {
		max-width: 560px;
		margin: 0 auto;
	}
}

@media (max-width: 767px) {
	.inv-hero { min-height: 0; }

	.inv-hero__inner { padding: 40px 16px 48px; gap: 24px; }

	.inv-hero__video,
	.inv-hero__cursor { display: none; }

	.inv-hero__title { font-size: clamp(38px, 11vw, 52px); }

	.inv-hero__cta { flex-direction: column; }

	.inv-hero__btn { justify-content: center; width: 100%; }

	.inv-hero__proof { flex-direction: column; gap: 6px; }
	.inv-hero__proof li + li::before { display: none; }

	/* Simplify the stage on phones: globe plus the live feed only. */
	.inv-hero__stage { aspect-ratio: 1 / 1.22; }
	.inv-hero__globe { top: -26%; }
	.inv-card--site,
	.inv-card--tools { display: none; }

	.inv-card--feed {
		right: 50%;
		top: auto;
		bottom: 0;
		width: 92%;
		transform: translateX(50%) !important;
	}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.inv-hero *,
	.inv-hero *::before,
	.inv-hero *::after {
		animation: none !important;
		transition: none !important;
	}

	.inv-hero__line > span,
	.inv-hero__sub,
	.inv-hero__cta,
	.inv-hero__proof,
	.inv-hero__stage {
		transform: none;
		opacity: 1;
	}

	.inv-feed__item { opacity: 1; }
	.inv-hero__cursor { display: none; }
}