/* Lumen Hero widget. Colours/sizes/spacing come from Elementor controls; defaults = ZHbiohack demo.
   Selectors use ".lhero .x" so theme rules (h1/p margins, link colours) can't override them. */
.elementor-widget-lumen-hero, .elementor-widget-lumen-hero > .elementor-widget-container { width: 100%; }
.lhero {
	--lh-bg: #04090b; --lh-text: #eef6f7; --lh-muted: #8fa6ad; --lh-line: #16303a; --lh-accent: #14d3a0;
	--lh-g1: #00b8c4; --lh-g2: #8be33a; --lh-btn-text: #04201a; --lh-overlay: .96; --lh-speed: 1; --lh-justify: flex-start;
	--lh-grad: linear-gradient(90deg, var(--lh-g1), var(--lh-accent) 45%, var(--lh-g2));
	position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; width: 100%; min-height: clamp(560px, 80vh, 760px);
	background: var(--lh-bg); color: var(--lh-text); font-family: Inter, system-ui, sans-serif; box-sizing: border-box;
}
.lhero *, .lhero *::before, .lhero *::after { box-sizing: border-box; }

/* Image */
.lhero .lhero__media { position: absolute; top: 0; bottom: 0; right: max(0px, calc((100% - var(--lh-site, 1320px)) / 2 - 60px)); width: min(64%, 1100px); z-index: -2; }
.lhero .lhero__parallax { width: 100%; height: 100%; transform: translate3d(calc(var(--mx, 0) * -26px), calc(var(--my, 0) * -18px), 0); transition: transform .35s ease-out; }
.lhero .lhero__media img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; max-width: none; margin: 0; border: 0; border-radius: 0; }
.lhero--product .lhero__media { top: 50%; bottom: auto; right: 6%; width: min(42%, 620px); height: auto; transform: translateY(-50%); }
.lhero--product .lhero__media img { height: auto; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .6)); }
.lhero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(90deg, rgba(4, 9, 11, var(--lh-overlay)) 0%, rgba(4, 9, 11, calc(var(--lh-overlay) * .85)) 38%, rgba(4, 9, 11, 0) 72%); }
.lhero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 120px; z-index: -1; pointer-events: none; background: linear-gradient(0deg, var(--lh-bg), transparent); }
.lhero__glow { position: absolute; z-index: -1; right: 16%; top: 50%; width: 600px; height: 600px; margin-top: -300px; border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle, color-mix(in srgb, var(--lh-accent) 30%, transparent), transparent 65%); filter: blur(10px);
	translate: calc(var(--mx, 0) * 30px) calc(var(--my, 0) * 20px); transition: translate .5s ease-out; }
.lhero__particles { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, rgba(143, 166, 173, .45) 1px, transparent 1.7px); background-size: 46px 46px; mask-image: linear-gradient(90deg, transparent 30%, #000 75%); -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 75%); opacity: .55; }

/* Content (flex column: spacing = margin-bottom of each part) */
.lhero .lhero__inner { position: relative; width: 100%; max-width: var(--lh-site, 1320px); margin: 0 auto; padding: 72px 28px 80px; }
.lhero .lhero__content { display: flex; flex-direction: column; align-items: flex-start; max-width: 680px; } /* Left content width: text + stats follow it */
.lhero .lhero__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px; padding: 8px 14px; border: 1px solid var(--lh-line); border-radius: 999px; background: rgba(12, 27, 33, .7); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--lh-muted); }
.lhero .lhero__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--lh-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lh-accent) 20%, transparent); }
.lhero .lhero__title { margin: 0 0 20px; padding: 0; font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: clamp(38px, 4.6vw, 72px); line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: var(--lh-text); }
.lhero .lhero__head { display: contents; }
.lhero .lhero__mimg { display: none; }
.lhero .lhero__line, .lhero .lhero__grad { display: block; }
.lhero .lhero__w { display: inline-block; }
.lhero .lhero__grad { background: linear-gradient(90deg, var(--lh-g1), var(--lh-accent) 25%, var(--lh-g2) 50%, var(--lh-accent) 75%, var(--lh-g1)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: .04em; }
.lhero .lhero__text { max-width: 100%; margin: 0 0 32px; padding: 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--lh-muted); }
.lhero .lhero__actions { display: flex; flex-wrap: wrap; justify-content: var(--lh-justify); gap: 14px; margin: 0; }
.lhero .lhero__btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border: 1px solid transparent; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s, color .25s, background .25s; }
.lhero .lhero__btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.lhero .lhero__btn--primary { background: var(--lh-grad); color: var(--lh-btn-text); }
.lhero .lhero__btn--primary:hover { color: var(--lh-btn-text); transform: translateY(-2px); box-shadow: 0 0 0 5px color-mix(in srgb, var(--lh-accent) 16%, transparent), 0 12px 40px color-mix(in srgb, var(--lh-accent) 40%, transparent); }
.lhero .lhero__btn--primary:hover svg { transform: translateX(4px); }
.lhero .lhero__btn--ghost { border-color: #2a4a55; color: var(--lh-text); background: rgba(12, 27, 33, .5); }
.lhero .lhero__btn--ghost:hover { border-color: var(--lh-accent); color: var(--lh-accent); }
.lhero .lhero__stats { display: flex; justify-content: var(--lh-justify); width: 100%; max-width: 100%; margin: 44px 0 0; padding: 28px 0 0; border-top: 1px solid var(--lh-line); }
.lhero .lhero__stat { flex: 1; padding: 0 24px 0 0; border-color: var(--lh-line); }
.lhero .lhero__stat + .lhero__stat { padding-left: 24px; border-left: 1px solid var(--lh-line); }
.lhero .lhero__stat b { display: block; font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: clamp(28px, 2.8vw, 40px); line-height: 1; background: var(--lh-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.lhero .lhero__stat span { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--lh-muted); }
.lhero__scroll { position: absolute; left: 50%; bottom: 22px; width: 26px; height: 42px; margin-left: -13px; border: 2px solid #2a4a55; border-radius: 14px; }
.lhero__scroll::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--lh-accent); animation: lhero-scroll 1.8s infinite; }
@keyframes lhero-scroll { 60% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Entrance: label/text/buttons/stats slide up, title word by word, line 2 wipes in, image slides in ---------- */
.lhero--anim-in .lhero__reveal { opacity: 0; transform: translateY(26px); }
.lhero--anim-in .lhero__w { opacity: 0; transform: translateY(70%) rotate(5deg); filter: blur(8px); }
.lhero--anim-in .lhero__grad { clip-path: inset(0 100% 0 0); }
.lhero--anim-in .lhero__media { opacity: 0; transform: translateX(60px) scale(1.06); }
.lhero--anim-in.lhero--product .lhero__media { transform: translate(60px, -50%); }
.lhero--anim-in .lhero__glow { opacity: 0; }
.lhero--anim-in.is-in .lhero__reveal { animation: lhero-up calc(.9s * var(--lh-speed)) cubic-bezier(.2, .7, .2, 1) forwards; }
.lhero--anim-in.is-in .lhero__eyebrow { animation-delay: 0s; }
.lhero--anim-in.is-in .lhero__text { animation-delay: calc(.75s * var(--lh-speed)); }
.lhero--anim-in.is-in .lhero__actions { animation-delay: calc(.9s * var(--lh-speed)); }
.lhero--anim-in.is-in .lhero__stats { animation-delay: calc(1.05s * var(--lh-speed)); }
.lhero--anim-in.is-in .lhero__w { animation: lhero-word calc(.8s * var(--lh-speed)) cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc((.15s + var(--i) * .08s) * var(--lh-speed)); }
.lhero--anim-in.is-in .lhero__grad { animation: lhero-wipe calc(1s * var(--lh-speed)) cubic-bezier(.65, 0, .35, 1) calc(.5s * var(--lh-speed)) forwards; }
.lhero--anim-in.lhero--anim-glow.is-in .lhero__grad { animation: lhero-wipe calc(1s * var(--lh-speed)) cubic-bezier(.65, 0, .35, 1) calc(.5s * var(--lh-speed)) forwards, lhero-shine calc(5s * var(--lh-speed)) linear calc(1.6s * var(--lh-speed)) infinite; }
.lhero--anim-in.is-in .lhero__media { animation: lhero-media calc(1.4s * var(--lh-speed)) cubic-bezier(.2, .7, .2, 1) calc(.1s * var(--lh-speed)) forwards; }
.lhero--anim-in.lhero--product.is-in .lhero__media { animation-name: lhero-media-p; }
.lhero--anim-in.is-in .lhero__glow { animation: lhero-fade calc(1.6s * var(--lh-speed)) ease calc(.3s * var(--lh-speed)) forwards; }
@keyframes lhero-up { to { opacity: 1; transform: none; } }
@keyframes lhero-word { to { opacity: 1; transform: none; filter: none; } }
@keyframes lhero-wipe { to { clip-path: inset(0 -5% 0 0); } }
@keyframes lhero-media { to { opacity: 1; transform: none; } }
@keyframes lhero-media-p { to { opacity: 1; transform: translateY(-50%); } }
@keyframes lhero-fade { to { opacity: 1; } }

/* ---------- Continuous ---------- */
.lhero--anim-float .lhero__media img { animation: lhero-scene calc(10s * var(--lh-speed)) ease-in-out infinite; transform-origin: 70% 50%; }
.lhero--product.lhero--anim-float .lhero__media img { animation: lhero-float calc(6s * var(--lh-speed)) ease-in-out infinite; }
@keyframes lhero-scene { 0%, 100% { transform: scale(1.02) translateY(0); } 50% { transform: scale(1.08) translateY(-14px); } }
@keyframes lhero-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-22px) rotate(-2deg); } }

.lhero--anim-glow.is-in .lhero__glow, .lhero--anim-glow:not(.lhero--anim-in) .lhero__glow { animation: lhero-fade 1s ease forwards, lhero-glow calc(5s * var(--lh-speed)) ease-in-out 1s infinite; }
@keyframes lhero-glow { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .35; scale: 1.18; } }
.lhero--anim-glow .lhero__dot { animation: lhero-dot 1.8s infinite; }
@keyframes lhero-dot { 70% { box-shadow: 0 0 0 10px transparent; } }
.lhero--anim-glow:not(.lhero--anim-in) .lhero__grad { animation: lhero-shine calc(5s * var(--lh-speed)) linear infinite; }
@keyframes lhero-shine { to { background-position: -200% 0; } }
.lhero--anim-glow .lhero__particles { animation: lhero-drift calc(16s * var(--lh-speed)) linear infinite; }
@keyframes lhero-drift { to { background-position: 46px -460px; } }
.lhero--anim-glow .lhero__btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: lhero-btn calc(3.6s * var(--lh-speed)) ease-in-out 2s infinite; }
@keyframes lhero-btn { 0% { left: -60%; } 35%, 100% { left: 130%; } }

/* Tablet / mobile: title and product side by side in one row (no fixed heights → no gaps, no overlap) */
@media (max-width: 900px) {
	.lhero { --lh-mw: 40vw; flex-direction: column; align-items: stretch; min-height: 0; }
	.lhero::before { display: none; }
	.lhero .lhero__media { display: none; }
	.lhero .lhero__head { display: flex; align-items: var(--lh-malign, center); gap: 10px; width: 100%; }
	.lhero .lhero__head .lhero__title { flex: 1 1 auto; min-width: 0; font-size: clamp(30px, 8.4vw, 50px); }
	.lhero .lhero__mimg { display: block; position: relative; flex: 0 0 var(--lh-mw); width: var(--lh-mw); aspect-ratio: 3 / 4; margin-bottom: 20px;
		-webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%); }
	.lhero .lhero__mimg img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; object-position: var(--lh-mpos, 96% center); }
	.lhero--scene .lhero__mimg img { scale: var(--lh-mzoom, 1); transform-origin: 70% 50%; } /* 1 = whole product (crop only the empty left of the scene) */ /* zoom into the product of a wide scene */
	.lhero--product .lhero__mimg { -webkit-mask-image: none; mask-image: none; }
	.lhero .lhero__mimg--cut { -webkit-mask-image: none; mask-image: none; }
	.lhero .lhero__mimg.lhero__mimg--cut img { object-fit: contain; object-position: center; scale: 1; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .6)); }
	.lhero--product .lhero__mimg img { object-fit: contain; object-position: center; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .6)); }
	.lhero--anim-in .lhero__mimg { opacity: 0; transform: translateX(24px) scale(.9); }
	.lhero--anim-in.is-in .lhero__mimg { animation: lhero-media calc(1.1s * var(--lh-speed)) cubic-bezier(.2, .7, .2, 1) calc(.3s * var(--lh-speed)) forwards; }
	.lhero--anim-float .lhero__mimg img { animation: lhero-float calc(6s * var(--lh-speed)) ease-in-out infinite; }
	.lhero__glow { right: -80px; top: 60px; width: 320px; height: 320px; margin: 0; }
	.lhero__particles { mask-image: linear-gradient(200deg, #000 20%, transparent 55%); -webkit-mask-image: linear-gradient(200deg, #000 20%, transparent 55%); }
	.lhero .lhero__inner { position: relative; z-index: 1; margin: 0; padding: 28px 20px 48px; }
	.lhero .lhero__eyebrow { margin-bottom: 16px; }
	.lhero .lhero__text { margin-bottom: 26px; }
	.lhero .lhero__stats { margin-top: 32px; padding-top: 20px; }
	.lhero .lhero__stat { padding-right: 12px; }
	.lhero .lhero__stat + .lhero__stat { padding-left: 12px; }
	.lhero .lhero__stat b { font-size: clamp(24px, 7vw, 34px); }
	.lhero .lhero__stat span { font-size: 10.5px; letter-spacing: .08em; }
	.lhero__scroll { display: none; }
}
@media (max-width: 480px) {
	.lhero .lhero__eyebrow { font-size: 10px; letter-spacing: .08em; padding: 7px 12px; }
	.lhero .lhero__actions { flex-direction: column; width: 100%; }
	.lhero .lhero__btn { width: 100%; }
}
/* Only when the widget option "Turn animations off for reduce motion" is on */
@media (prefers-reduced-motion: reduce) {
	.lhero--respect-motion *, .lhero--respect-motion *::after, .lhero--respect-motion .lhero__media img { animation: none !important; }
	.lhero--respect-motion .lhero__reveal, .lhero--respect-motion .lhero__w, .lhero--respect-motion .lhero__media, .lhero--respect-motion .lhero__glow { opacity: 1 !important; transform: none !important; filter: none !important; }
	.lhero--respect-motion .lhero__grad { clip-path: none !important; }
}