/* ---------- Hero: edge-to-edge, content constrained via grid ---------- */
.hero.full-bleed { position: relative; overflow: hidden; background: var(--color-dark); margin: 0 !important; }
.hero__slide {
	display: none; min-height: var(--hero-height, 560px); position: relative; overflow: hidden;
	background-color: var(--color-dark);
	background-image: radial-gradient(circle at 80% 30%, rgba(11,95,255,.35), transparent 55%), linear-gradient(120deg, #0B0D10 0%, #10131A 60%, #0B0D10 100%);
}
.hero__slide.is-active { display: block; animation: lntm-hero-fade var(--speed-hero) var(--ease); }
@keyframes lntm-hero-fade { from { opacity: 0; } to { opacity: 1; } }

/* Ken Burns: the photo slowly zooms + drifts for the whole time its
   slide is active, restarting fresh on every slide change. Sits on its
   own layer (not the slide element itself) so the zoom never touches
   the text/buttons on top of it. */
.hero__bg {
	position: absolute; inset: 0; z-index: 0;
	background-size: cover; background-position: center;
	transform: scale(1); transform-origin: center;
}
.hero__slide.is-active .hero__bg { animation: lntm-ken-burns 9s var(--ease) forwards; }
@keyframes lntm-ken-burns {
	from { transform: scale(1) translate(0, 0); }
	to   { transform: scale(1.12) translate(-1.5%, -1%); }
}
@media (prefers-reduced-motion: reduce) { .hero__slide.is-active .hero__bg { animation: none; } }

/* Optional separate mobile image per slide — hidden on desktop, replaces
   the desktop image on small screens only when one was actually set
   (see front-page.php: the element simply isn't rendered otherwise). */
.hero__bg--mobile { display: none; }

/* Overlay tint (color + strength both editable in Customize > Hero Slider)
   so heading text stays readable regardless of how bright the photo is. */
.hero__overlay { position: absolute; inset: 0; z-index: 1; background: rgba(var(--hero-overlay-rgb, 10, 17, 40), var(--hero-overlay-opacity, .55)); }

.hero__grid { display: grid; grid-template-columns: 1fr; align-items: center; min-height: var(--hero-height, 560px); padding: 80px 24px; position: relative; z-index: 2; }
.hero__content { max-width: 620px; }
.hero__slide.is-active .hero__content { animation: lntm-hero-slide-in var(--speed-hero) var(--ease); }
@keyframes lntm-hero-slide-in { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }

.eyebrow--hero { color: var(--color-accent); }
.hero__content h1, .hero__content .hero__title { font-size: 52px; line-height: 1.06; color: #fff; margin: 0 0 20px; }
.hero__desc { color: rgba(255,255,255,.72); font-size: 16.5px; max-width: 480px; margin: 0 0 30px; }
.hero__buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__buttons .btn { transition: transform var(--speed-fast) var(--ease), filter var(--speed-fast) var(--ease), box-shadow var(--speed-fast) var(--ease); }
.hero__buttons .btn--primary:hover { box-shadow: 0 10px 28px rgba(11,95,255,.45); }
.hero__buttons .btn--outline:hover { box-shadow: 0 6px 20px rgba(255,255,255,.12); }

.hero__arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
	width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
	background: rgba(255,255,255,.08); color: #fff; display: flex; align-items: center; justify-content: center;
	cursor: pointer; font-size: 18px; backdrop-filter: blur(6px);
	transition: background var(--speed-fast) var(--ease), transform var(--speed-fast) var(--ease);
}
.hero__arrow:hover { background: rgba(255,255,255,.18); }
.hero__arrow--prev { left: 24px; }
.hero__arrow--next { right: 24px; }

.hero__dots { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 5; }
.hero__dot { position: relative; width: 40px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.25); border: none; cursor: pointer; overflow: hidden; }
.hero__dot-progress { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.hero__dot.is-active .hero__dot-progress { animation: lntm-hero-progress var(--hero-autoplay-speed, 6000ms) linear forwards; }
.hero[data-autoplay="0"] .hero__dot-progress { display: none; }
.hero[data-paused] .hero__dot.is-active .hero__dot-progress { animation-play-state: paused; }
@keyframes lntm-hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero--empty { padding: 80px 24px; text-align: center; color: #fff; border-radius: var(--radius); background: linear-gradient(120deg, #0B0D10, #171C26); }
.hero--empty p { color: rgba(255,255,255,.7); margin-bottom: 20px; }

@media (max-width: 900px) {
	.hero__grid { text-align: center; padding: 64px 20px 100px; }
	.hero__content { max-width: 100%; margin: 0 auto; }
	.hero__desc { margin-left: auto; margin-right: auto; }
	.hero__buttons { justify-content: center; }
	.hero__content h1, .hero__content .hero__title { font-size: 34px; }
	/* Arrows move down beside the dots so they never cover the text */
	.hero__arrow { width: 38px; height: 38px; top: auto; bottom: 10px; transform: none; }
	.hero__arrow--prev { left: calc(50% - 130px); }
	.hero__arrow--next { right: calc(50% - 130px); }
	.hero__dots { bottom: 27px; }
	.hero__slide { min-height: var(--hero-height-mobile, 480px); }
	.hero__grid { min-height: var(--hero-height-mobile, 480px); }
	/* Swap in the dedicated mobile image, when one was set for this slide */
	.hero__bg--mobile { display: block; }
	.hero__slide:has(.hero__bg--mobile) .hero__bg:not(.hero__bg--mobile) { display: none; }
}
@media (max-width: 400px) {
	.hero__buttons .btn { width: 100%; justify-content: center; }
	.hero__buttons { flex-direction: column; }
}

/* Product photo on the right (v5.31.0) */
.hero__grid--product { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; }
.hero__product { position: relative; display: flex; align-items: center; justify-content: center; }
.hero__product img { position: relative; z-index: 1; width: 100%; max-width: 440px; max-height: 420px; object-fit: contain; background: #fff; border-radius: 28px; padding: 26px; box-shadow: 0 40px 80px rgba(0, 0, 0, .35); transform: rotate(-2deg); transition: transform .8s var(--ease); }
.hero__slide.is-active .hero__product img { animation: lntm-hero-product-in 900ms var(--ease) both; }
.hero__product-glow { position: absolute; width: 80%; height: 80%; border-radius: 50%; background: radial-gradient(circle, rgba(56, 189, 248, .45), transparent 65%); filter: blur(30px); }
@keyframes lntm-hero-product-in { from { opacity: 0; transform: translateX(30px) rotate(-2deg) scale(.96); } to { opacity: 1; transform: translateX(0) rotate(-2deg) scale(1); } }
@media (max-width: 900px) {
	.hero__grid--product { grid-template-columns: 1fr; }
	.hero__product { display: none; } /* phones: keep the hero short and text-first */
}
@media (prefers-reduced-motion: reduce) { .hero__slide.is-active .hero__product img { animation: none; } }