/**
 * Pro-U homepage — loaded on the front page only.
 *
 *  1. Hero (WebGL field, aurora, title, orbit)
 *  2. Kinetic marquee
 *  3. Shop by goal
 *  4. Farm-to-table story (3D cube)
 *  5. Spotlight
 *  6. Pantry
 *  7. Numbers + bento
 *  8. Farm fresh radar
 *  9. Reviews
 * 10. WhatsApp CTA
 */

.prou-home {
	overflow-x: clip;
}

/* Sections that are scrolled out of view stop animating and skip painting until they are near.
   (home.js adds .is-offscreen; the story section is left alone because it is pinned.) */
.prou-home > .is-offscreen,
.prou-home > .is-offscreen *,
.prou-home > .is-offscreen *::before,
.prou-home > .is-offscreen *::after {
	animation-play-state: paused !important;
}

.prou-goals,
.prou-spotlight,
.prou-pantry,
.prou-numbers,
.prou-farm,
.prou-reviews,
.prou-chats,
.prou-cta {
	content-visibility: auto;
	contain-intrinsic-size: auto 760px;
}

/* Shared: section heading sizes on the homepage. */
.prou-home .prou-section__title {
	font-size: var(--prou-text-3xl);
	max-width: 15ch;
}

.prou-home h2 em,
.prou-home h1 em {
	color: var(--prou-moss);
}

.prou-home .prou-dark h2 em,
.prou-home .prou-dark h1 em {
	color: var(--prou-lime);
}

/* Spotlight glow that follows the pointer ([data-prou-spot]). */
[data-prou-spot] {
	--mx: 50%;
	--my: 50%;
}

/* ==========================================================================
   1. Hero
   ========================================================================== */

.prou-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100svh;
	/* Slide under the floating header. */
	margin-top: calc(-1 * (var(--prou-header-h) + var(--prou-header-gap)));
	padding-block: calc(var(--prou-header-h) + var(--prou-header-gap) + var(--prou-space-8)) var(--prou-space-12);
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(120% 80% at 80% 10%, rgba(31, 77, 58, 0.55), transparent 60%),
		radial-gradient(90% 70% at 0% 100%, rgba(24, 52, 42, 0.9), transparent 60%),
		var(--prou-night);
}

.prou-hero__canvas {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.4s ease;
}

.prou-hero__canvas.is-ready {
	opacity: 1;
}

.prou-hero__inner {
	position: relative;
	display: grid;
	gap: var(--prou-space-12);
	align-items: center;
}

@media (min-width: 1025px) {
	.prou-hero__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: var(--prou-space-6);
	}
}

.prou-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--prou-space-3);
	margin: 0 0 var(--prou-space-6);
	padding: 0.5rem 1rem 0.5rem 0.75rem;
	border: 1px solid var(--prou-line-dark);
	border-radius: var(--prou-radius-pill);
	background: rgba(243, 237, 224, 0.04);
	color: var(--prou-on-dark-muted);
	font-size: var(--prou-text-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	animation: prou-fade-up 900ms var(--prou-ease) both;
}

.prou-hero__title {
	margin: 0;
	font-size: clamp(2.75rem, 1.1rem + 4.9vw, 6rem);
	font-weight: 700;
	line-height: 0.94;
	letter-spacing: -0.055em;
}

.prou-hero__title em {
	padding-right: 0.06em;
	font-size: 1.06em;
	letter-spacing: -0.02em;
}

.prou-hero__title .prou-w > span {
	animation: prou-word-rise 1.15s var(--prou-ease) both;
	animation-delay: calc(var(--i, 0) * 70ms + 120ms);
}

.prou-hero__text {
	margin: var(--prou-space-8) 0 0;
	animation: prou-rise-soft 1s 150ms var(--prou-ease) both;
}

.prou-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--prou-space-3);
	margin-top: var(--prou-space-8);
	animation: prou-fade-up 1s 750ms var(--prou-ease) both;
}

@media (max-width: 480px) {
	.prou-hero__actions .prou-btn {
		flex: 1 1 100%;
	}
}

.prou-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--prou-space-2);
	margin: var(--prou-space-8) 0 0;
	padding: 0;
	list-style: none;
	animation: prou-fade-up 1s 900ms var(--prou-ease) both;
}

.prou-hero__scroll {
	position: absolute;
	bottom: var(--prou-space-6);
	left: 50%;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: var(--prou-space-2);
	color: var(--prou-on-dark-muted);
	font-size: var(--prou-text-xs);
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
	transform: translateX(-50%);
}

.prou-hero__scroll:hover {
	color: var(--prou-lime);
}

.prou-hero__scroll-line {
	position: relative;
	width: 1px;
	height: 44px;
	overflow: hidden;
	background: var(--prou-line-dark);
}

.prou-hero__scroll-line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--prou-lime);
	transform: translateY(-100%);
	animation: prou-scroll-line 2.2s var(--prou-ease) infinite;
}

@keyframes prou-scroll-line {
	60%, 100% { transform: translateY(100%); }
}

@media (min-width: 1025px) and (min-height: 760px) {
	.prou-hero__scroll { display: flex; }
}

/* Orbit --------------------------------------------------------------- */

.prou-orbit {
	position: relative;
	animation: prou-fade-up 1.2s 300ms var(--prou-ease) both;
}

/* Without JS: a swipeable row of product cards. */
.prou-orbit__stage {
	display: flex;
	gap: var(--prou-space-4);
	margin: 0;
	padding: 0 0 var(--prou-space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	list-style: none;
}

.prou-orbit__item {
	flex: 0 0 auto;
	scroll-snap-align: center;
}

.prou-orbit__card {
	display: block;
	width: var(--prou-orbit-card, 168px);
	color: var(--prou-on-dark);
	text-decoration: none;
	-webkit-user-drag: none;
	user-select: none;
}

.prou-orbit .prou-orbit__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 28px;
	background: var(--prou-forest);
	box-shadow: 0 18px 32px -16px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(243, 237, 224, 0.08);
	pointer-events: none;
}

.prou-orbit__label {
	display: block;
	margin-top: var(--prou-space-3);
	font-size: var(--prou-text-sm);
	font-weight: 600;
	text-align: center;
	opacity: 0;
	transition: opacity var(--prou-duration) ease;
}

.prou-orbit__halo,
.prou-orbit__ring {
	display: none;
}

/* With JS: a real 3D orbit. Items are positioned by home.js. */
.prou-orbit.is-3d {
	--prou-orbit-card: clamp(118px, 30vw, 205px);
	height: clamp(340px, 88vw, 580px);
	cursor: grab;
	touch-action: pan-y;
	perspective: 900px;
	perspective-origin: 50% 30%;
}

.prou-orbit.is-3d.is-dragging {
	cursor: grabbing;
}

.prou-orbit.is-3d .prou-orbit__stage {
	position: absolute;
	inset: 0;
	display: block;
	overflow: visible;
	padding: 0;
	transform-style: preserve-3d;
}

.prou-orbit.is-3d .prou-orbit__item {
	position: absolute;
	top: 42%;
	left: 50%;
	width: var(--prou-orbit-card);
	margin: calc(var(--prou-orbit-card) * -0.5) 0 0 calc(var(--prou-orbit-card) * -0.5);
	will-change: transform, opacity;
}

.prou-orbit.is-3d .prou-orbit__item.is-front .prou-orbit__label {
	opacity: 1;
}

.prou-orbit.is-3d .prou-orbit__item.is-front .prou-orbit__img {
	box-shadow: 0 22px 40px -18px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(200, 226, 122, 0.5), 0 0 32px -8px rgba(200, 226, 122, 0.3);
}

.prou-orbit.is-3d .prou-orbit__halo {
	position: absolute;
	top: 42%;
	left: 50%;
	display: block;
	width: 70%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(200, 226, 122, 0.28), rgba(200, 226, 122, 0) 65%);
	transform: translate(-50%, -50%);
}

/* The orbit path, tilted into 3D. */
.prou-orbit.is-3d .prou-orbit__ring {
	position: absolute;
	top: 42%;
	left: 50%;
	display: block;
	width: 112%;
	aspect-ratio: 1;
	border: 1px dashed rgba(200, 226, 122, 0.28);
	border-radius: 50%;
	transform: translate(-50%, -50%) rotateX(76deg);
}

.prou-orbit__info {
	display: none;
}

.prou-orbit.is-3d .prou-orbit__info {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 50;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--prou-space-3);
	max-width: 520px;
	margin: 0 auto;
	padding: var(--prou-space-3) var(--prou-space-3) var(--prou-space-3) var(--prou-space-6);
	border: 1px solid var(--prou-line-dark);
	border-radius: var(--prou-radius-pill);
	/* Solid, not blurred: a backdrop blur over a moving 3D scene is repainted every frame. */
	background: rgba(17, 38, 28, 0.94);
	cursor: default;
}

.prou-orbit__info-text {
	min-width: 0;
}

.prou-orbit__info-name {
	margin: 0;
	overflow: hidden;
	color: var(--prou-on-dark);
	font-weight: 600;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.prou-orbit__info-price.price {
	margin: 2px 0 0;
	color: var(--prou-lime);
	font-size: var(--prou-text-sm);
}

.prou-orbit__controls {
	display: flex;
	align-items: center;
	gap: var(--prou-space-1);
}

.prou-orbit__nav {
	border: 1px solid var(--prou-line-dark);
	color: var(--prou-on-dark);
}

.prou-orbit__nav:hover {
	background: rgba(243, 237, 224, 0.1);
}

.prou-orbit__add {
	margin-left: var(--prou-space-1);
}

.prou-orbit__add.added::after {
	display: none;
}

.prou-orbit__info .added_to_cart {
	display: none;
}

/* Phones: taller stage, cards higher, so the info bar never covers them. */
@media (max-width: 767px) {
	.prou-orbit.is-3d {
		height: 420px;
		margin-top: calc(var(--prou-space-6) * -1);
	}

	.prou-orbit.is-3d .prou-orbit__item,
	.prou-orbit.is-3d .prou-orbit__halo,
	.prou-orbit.is-3d .prou-orbit__ring {
		top: 36%;
	}

	/* The info bar already names the front product. */
	.prou-orbit.is-3d .prou-orbit__label {
		display: none;
	}

	/* The marquee right below repeats these points. */
	.prou-hero__chips {
		display: none;
	}
}

@media (max-width: 600px) {
	.prou-orbit.is-3d .prou-orbit__info {
		border-radius: var(--prou-radius-lg);
		padding: var(--prou-space-3) var(--prou-space-3) var(--prou-space-3) var(--prou-space-4);
	}
}

/* ==========================================================================
   2. Kinetic marquee
   ========================================================================== */

.prou-marquee {
	position: relative;
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	overflow: hidden;
	background: var(--prou-paper);
	color: var(--prou-ink);
}

.prou-marquee__row {
	display: flex;
	overflow: hidden;
	contain: layout paint;
}

.prou-marquee__row + .prou-marquee__row {
	margin-top: clamp(0.25rem, 0.1rem + 0.5vw, 0.75rem);
}

.prou-marquee__track {
	display: flex;
	flex-shrink: 0;
	will-change: transform;
}

.prou-marquee__list {
	display: flex;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.prou-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
	padding-right: clamp(1rem, 0.5rem + 2vw, 2.5rem);
	white-space: nowrap;
}

.prou-marquee__word {
	font-size: clamp(3rem, 1rem + 8.4vw, 9.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.05em;
}

.prou-marquee__row--b .prou-marquee__word {
	color: transparent;
	-webkit-text-stroke: 1.5px var(--prou-ink);
	font-family: var(--prou-font-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.02em;
}

.prou-marquee__sep {
	display: inline-flex;
	color: var(--prou-moss);
}

.prou-marquee__sep .prou-icon {
	width: clamp(28px, 1rem + 2vw, 56px);
	height: auto;
}

/* No JS / reduced motion: gentle CSS loop instead of scroll-linked motion. */
@keyframes prou-marquee-loop {
	to { transform: translateX(-50%); }
}

html:not(.prou-js) .prou-marquee__track {
	animation: prou-marquee-loop 50s linear infinite;
}

/* ==========================================================================
   3. Shop by goal
   ========================================================================== */

.prou-goals {
	background: var(--prou-paper);
	padding-top: clamp(2rem, 1rem + 3vw, 4rem);
}

.prou-goals__tabs {
	position: relative;
	display: inline-flex;
	max-width: 100%;
	margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.5rem);
	padding: 6px;
	overflow-x: auto;
	border: 1px solid var(--prou-line);
	border-radius: var(--prou-radius-pill);
	background: var(--prou-surface);
	scrollbar-width: none;
}

.prou-goals__tabs::-webkit-scrollbar {
	display: none;
}

.prou-goals__tab {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	gap: var(--prou-space-2);
	min-height: 48px;
	padding: 0.5rem 1.25rem;
	border: 0;
	background: transparent;
	color: var(--prou-ink-muted);
	font-size: var(--prou-text-sm);
	font-weight: 600;
	transition: color var(--prou-duration) ease;
}

.prou-goals__tab:hover {
	background: transparent;
	color: var(--prou-ink);
	box-shadow: none;
}

.prou-goals__tab[aria-selected="true"] {
	color: var(--prou-on-dark);
}

.prou-goals__tab-icon {
	display: inline-flex;
}

/* Phones: three equal tabs, icon above label, so every goal is visible. */
@media (max-width: 600px) {
	.prou-goals__tabs {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: 100%;
		border-radius: var(--prou-radius-lg);
	}

	.prou-goals__tab {
		flex-direction: column;
		gap: 4px;
		min-height: 64px;
		padding: 0.5rem 0.25rem;
		border-radius: var(--prou-radius);
		font-size: var(--prou-text-xs);
		line-height: 1.2;
		white-space: normal;
	}

	.prou-goals__indicator {
		border-radius: var(--prou-radius);
	}
}

/* Sliding pill behind the selected tab (positioned by home.js). */
.prou-goals__indicator {
	position: absolute;
	top: 6px;
	left: 0;
	z-index: 0;
	height: calc(100% - 12px);
	border-radius: var(--prou-radius-pill);
	background: var(--prou-night);
	transition: transform 600ms var(--prou-ease), width 600ms var(--prou-ease);
}

html:not(.prou-js) .prou-goals__tab[aria-selected="true"] {
	background: var(--prou-night);
}

.prou-goals__panel {
	display: grid;
	gap: var(--prou-space-8);
	align-items: start;
}

.prou-goals__panel[hidden] {
	display: none;
}

@media (min-width: 1025px) {
	.prou-goals__panel {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
		gap: var(--prou-space-12);
	}
}

/* Sticky only beside the products (desktop); on phones it would cover them. */
@media (min-width: 1025px) {
	.prou-goals__intro {
		position: sticky;
		top: calc(var(--prou-header-h) + var(--prou-header-gap) * 3);
	}
}

.prou-goals__title {
	margin: 0 0 var(--prou-space-4);
	font-size: var(--prou-text-2xl);
}

.prou-goals__intro p {
	margin: 0 0 var(--prou-space-6);
}

@media (min-width: 1100px) {
	.prou-goals .prou-goals__products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Cards flip in when their panel opens. */
@keyframes prou-flip-in {
	from {
		opacity: 0;
		transform: rotateY(-70deg) translateZ(-60px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.prou-js .prou-goals__panel.is-animating .prou-goals__products > li {
	animation: prou-flip-in 800ms var(--prou-ease) both;
	transform-origin: left center;
}

.prou-goals__products > li:nth-child(2) { animation-delay: 90ms; }
.prou-goals__products > li:nth-child(3) { animation-delay: 180ms; }
.prou-goals__products > li:nth-child(4) { animation-delay: 270ms; }

.prou-goals__products {
	perspective: 1200px;
}

/* ==========================================================================
   4. Farm-to-table story
   ========================================================================== */

.prou-story {
	--p: 0;
	position: relative;
	background:
		radial-gradient(80% 60% at 85% 50%, rgba(31, 77, 58, 0.55), transparent 70%),
		var(--prou-night);
}

.prou-story__sticky {
	padding-block: var(--prou-space-section);
}

.prou-story__inner {
	display: grid;
	gap: var(--prou-space-12);
	align-items: center;
}

@media (min-width: 1025px) {
	.prou-story__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--prou-space-16);
	}

	/* Pinned while you scroll through the stages. */
	.prou-story.is-pinned {
		height: calc(var(--stages, 3) * 85vh + 30vh);
	}

	.prou-story.is-pinned .prou-story__sticky {
		position: sticky;
		top: 0;
		display: flex;
		align-items: center;
		height: 100vh;
		padding-block: var(--prou-space-12);
	}

	.prou-story__visual {
		order: 2;
	}
}

.prou-story__title {
	margin: var(--prou-space-4) 0 var(--prou-space-8);
	font-size: var(--prou-text-3xl);
	max-width: 14ch;
}

.prou-story__stages {
	display: grid;
	gap: var(--prou-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.prou-story__stage {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--prou-space-6);
	padding: var(--prou-space-6) 0;
	border-top: 1px solid var(--prou-line-dark);
}

.prou-story.is-pinned .prou-story__stage {
	opacity: 0.32;
	transition: opacity 500ms ease;
}

.prou-story.is-pinned .prou-story__stage.is-active {
	opacity: 1;
}

.prou-story__num {
	color: var(--prou-lime);
	font-family: var(--prou-font-serif);
	font-size: var(--prou-text-2xl);
	font-style: italic;
	line-height: 1;
}

.prou-story__stage-title {
	display: flex;
	align-items: center;
	gap: var(--prou-space-3);
	margin: 0 0 var(--prou-space-2);
	font-size: var(--prou-text-xl);
}

.prou-story__stage-icon {
	display: inline-flex;
	color: var(--prou-gold);
}

.prou-story__stage p {
	margin: 0;
	color: var(--prou-on-dark-muted);
	max-width: 48ch;
}

/* The cube */
.prou-story__visual {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--prou-space-8);
}

.prou-cube-scene {
	--size: clamp(200px, 58vw, 380px);
	position: relative;
	width: var(--size);
	height: var(--size);
	perspective: 1100px;
}

.prou-cube {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transform: translateZ(calc(var(--size) * -0.5)) rotateX(-12deg) rotateY(24deg);
}

/* Pinned: home.js writes the transform straight from scroll, so it needs no easing. */
.prou-story.is-pinned .prou-cube {
	will-change: transform;
}

/* Not pinned: the cube turns on a timer, so ease each turn. */
.prou-story:not(.is-pinned) .prou-cube {
	transition: transform 1s var(--prou-ease);
}

.prou-cube__face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--prou-space-3);
	padding: var(--prou-space-6);
	border: 1px solid rgba(200, 226, 122, 0.25);
	border-radius: 32px;
	background:
		radial-gradient(120% 120% at 20% 0%, rgba(200, 226, 122, 0.16), transparent 60%),
		linear-gradient(160deg, #1b3a2d, #0f2219);
	color: var(--prou-on-dark);
	text-align: center;
	backface-visibility: hidden;
}

.prou-cube__face--1 { transform: rotateX(0deg) translateZ(calc(var(--size) * 0.5)); }
.prou-cube__face--2 { transform: rotateX(-90deg) translateZ(calc(var(--size) * 0.5)); }
.prou-cube__face--3 { transform: rotateX(-180deg) translateZ(calc(var(--size) * 0.5)); }
.prou-cube__face--4 { transform: rotateX(-270deg) translateZ(calc(var(--size) * 0.5)); }
.prou-cube__face--left { transform: rotateY(-90deg) translateZ(calc(var(--size) * 0.5)); background: linear-gradient(160deg, #22463a, #10241b); }
.prou-cube__face--right { transform: rotateY(90deg) translateZ(calc(var(--size) * 0.5)); background: linear-gradient(160deg, #1a3a2c, #0c1c15); }

.prou-cube__num {
	position: absolute;
	top: var(--prou-space-6);
	left: var(--prou-space-6);
	color: var(--prou-gold);
	font-family: var(--prou-font-serif);
	font-size: var(--prou-text-xl);
	font-style: italic;
}

.prou-cube__icon {
	display: inline-flex;
	color: var(--prou-lime);
}

.prou-cube__icon .prou-icon {
	width: clamp(64px, 18vw, 110px);
	height: auto;
}

.prou-cube__label {
	font-size: var(--prou-text-xl);
	font-weight: 600;
	letter-spacing: -0.03em;
}

.prou-cube-shadow {
	position: absolute;
	right: 10%;
	bottom: -18%;
	left: 10%;
	height: 30px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent);
}

.prou-story__dots {
	display: flex;
	gap: var(--prou-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.prou-story__dots li {
	width: 28px;
	height: 4px;
	border-radius: 4px;
	background: var(--prou-line-dark);
	transition: background-color 400ms ease, width 400ms var(--prou-ease);
}

.prou-story__dots li.is-active {
	width: 48px;
	background: var(--prou-lime);
}

/* ==========================================================================
   5. Spotlight
   ========================================================================== */

.prou-spotlight {
	background: var(--prou-paper);
}

.prou-spotlight__inner {
	display: grid;
	gap: var(--prou-space-12);
	align-items: center;
}

@media (min-width: 1025px) {
	.prou-spotlight__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--prou-space-16);
	}
}

.prou-spotlight__visual {
	perspective: 1200px;
}

.prou-spotlight__stage {
	--rx: 0deg;
	--ry: 0deg;
	position: relative;
	max-width: 560px;
	margin-inline: auto;
	transform: rotateX(var(--rx)) rotateY(var(--ry));
	transform-style: preserve-3d;
	transition: transform 700ms var(--prou-ease);
}

.prou-spotlight__stage.is-tilting {
	transition: transform 120ms linear;
}

.prou-spotlight__card {
	display: block;
	overflow: hidden;
	border-radius: var(--prou-radius-xl);
	background: var(--prou-cream);
	box-shadow: var(--prou-shadow-lg);
}

.prou-spotlight__card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

@keyframes prou-bob {
	0%, 100% { transform: translate3d(0, 0, 60px); }
	50% { transform: translate3d(0, -12px, 60px); }
}

.prou-spotlight__tags {
	margin: 0;
	padding: 0;
	list-style: none;
}

.prou-spotlight__tag {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: var(--prou-space-2);
	padding: 0.6rem 1rem;
	border-radius: var(--prou-radius-pill);
	background: rgba(255, 253, 248, 0.96);
	box-shadow: var(--prou-shadow);
	color: var(--prou-ink);
	font-size: var(--prou-text-sm);
	font-weight: 600;
	white-space: nowrap;
	animation: prou-bob 5s ease-in-out infinite;
}

.prou-spotlight__tag .prou-icon { color: var(--prou-moss); }

.prou-spotlight__tag--1 { top: 8%; left: -4%; animation-delay: -1s; }
.prou-spotlight__tag--2 { top: 22%; right: -5%; animation-delay: -2.4s; }
.prou-spotlight__tag--3 { bottom: 24%; left: -6%; animation-delay: -3.2s; }
.prou-spotlight__tag--4 { right: -3%; bottom: 8%; animation-delay: -0.4s; }

/* Below desktop the tags sit inside the card's edges so nothing is clipped. */
@media (max-width: 1024px) {
	.prou-spotlight__tag--1,
	.prou-spotlight__tag--3 { left: 4%; }

	.prou-spotlight__tag--2,
	.prou-spotlight__tag--4 { right: 4%; }
}

@media (max-width: 600px) {
	.prou-spotlight__tag {
		padding: 0.45rem 0.75rem;
		font-size: var(--prou-text-xs);
	}
}

.prou-spotlight__content h2 {
	margin: var(--prou-space-4) 0 var(--prou-space-6);
	font-size: var(--prou-text-3xl);
}

.prou-spotlight__buy {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--prou-space-6);
	margin-top: var(--prou-space-8);
	padding: var(--prou-space-6);
	border: 1px solid var(--prou-line);
	border-radius: var(--prou-radius-lg);
	background: var(--prou-surface);
}

.prou-spotlight__name {
	margin: 0;
	color: var(--prou-ink-muted);
	font-size: var(--prou-text-sm);
	font-weight: 600;
}

.prou-spotlight__price.price {
	margin: var(--prou-space-1) 0 0;
	font-size: var(--prou-text-3xl);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
}

.prou-spotlight__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--prou-space-4) var(--prou-space-6);
}

.prou-spotlight__actions .added_to_cart {
	font-weight: 600;
}

/* ==========================================================================
   6. Pantry
   ========================================================================== */

.prou-pantry {
	background: var(--prou-cream);
}

/* ==========================================================================
   7. Numbers + bento
   ========================================================================== */

.prou-numbers {
	background:
		radial-gradient(60% 50% at 10% 0%, rgba(31, 77, 58, 0.5), transparent 70%),
		var(--prou-night);
}

.prou-numbers__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--prou-space-8);
	margin: 0 0 clamp(3rem, 2rem + 4vw, 6rem);
	padding-block: var(--prou-space-8);
	border-block: 1px solid var(--prou-line-dark);
}

.prou-numbers__stat {
	display: flex;
	flex-direction: column-reverse;
	gap: var(--prou-space-2);
}

.prou-numbers__label {
	color: var(--prou-on-dark-muted);
	font-size: var(--prou-text-sm);
	font-weight: 500;
}

.prou-numbers__value {
	margin: 0;
}

.prou-odo {
	display: inline-flex;
	color: var(--prou-on-dark);
	font-size: clamp(4rem, 2rem + 7vw, 8rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.06em;
	font-variant-numeric: tabular-nums;
}

.prou-odo__col {
	display: inline-block;
	height: 1em;
	overflow: hidden;
}

.prou-odo__strip {
	display: flex;
	flex-direction: column;
	transform: translateY(calc(var(--d, 0) * -1em));
	transition: transform 2.2s var(--prou-ease);
}

.prou-odo__strip > span {
	height: 1em;
	line-height: 1;
}

/* Roll from zero once revealed (JS adds .is-revealed). */
.prou-js .prou-numbers__stat:not(.is-revealed) .prou-odo__strip {
	transform: translateY(0);
}

.prou-numbers__stat:nth-child(2) .prou-odo__strip { transition-delay: 150ms; }
.prou-numbers__stat:nth-child(3) .prou-odo__strip { transition-delay: 300ms; }

.prou-odo__suffix {
	color: var(--prou-lime);
	font-family: var(--prou-font-serif);
	font-style: italic;
	font-weight: 400;
}

.prou-bento {
	display: grid;
	gap: var(--prou-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.prou-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.prou-bento__tile--1 { grid-row: span 2; }
}

@media (min-width: 1025px) {
	.prou-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.prou-bento__tile { grid-column: span 3; }
	.prou-bento__tile--1 { grid-row: span 2; }
	.prou-bento__tile--4,
	.prou-bento__tile--5 { grid-column: span 3; }
}

.prou-bento__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 200px;
	padding: var(--prou-space-8);
	overflow: hidden;
	border: 1px solid var(--prou-line-dark);
	border-radius: var(--prou-radius-xl);
	background: var(--prou-forest);
	isolation: isolate;
	transition: transform 600ms var(--prou-ease), border-color 400ms ease;
}

/* Pointer spotlight */
.prou-bento__tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(400px circle at var(--mx) var(--my), rgba(200, 226, 122, 0.14), transparent 45%);
	opacity: 0;
	transition: opacity 400ms ease;
}

.prou-bento__tile:hover {
	border-color: rgba(200, 226, 122, 0.35);
	transform: translateY(-4px);
}

.prou-bento__tile:hover::before {
	opacity: 1;
}

.prou-bento__tile--1 {
	min-height: 320px;
	background:
		radial-gradient(90% 70% at 100% 0%, rgba(200, 226, 122, 0.22), transparent 60%),
		var(--prou-forest-2);
}

.prou-bento__tile--1 .prou-bento__title {
	font-size: var(--prou-text-3xl);
}

.prou-bento__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: auto;
	border-radius: 18px;
	background: rgba(200, 226, 122, 0.1);
	color: var(--prou-lime);
}

.prou-bento__tile--1 .prou-bento__icon {
	width: 72px;
	height: 72px;
}

.prou-bento__title {
	margin: var(--prou-space-8) 0 var(--prou-space-2);
	font-size: var(--prou-text-xl);
}

.prou-bento__tile p {
	margin: 0;
	color: var(--prou-on-dark-muted);
	font-size: var(--prou-text-sm);
	max-width: 44ch;
}

/* ==========================================================================
   8. Farm fresh radar
   ========================================================================== */

.prou-farm {
	background: var(--prou-forest);
}

.prou-farm__inner {
	display: grid;
	gap: var(--prou-space-12);
	align-items: center;
}

@media (min-width: 1025px) {
	.prou-farm__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--prou-space-16);
	}
}

.prou-farm__photo {
	position: relative;
	width: min(100%, 540px);
	margin-inline: auto;
}

.prou-farm__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1000 / 880;
	object-fit: cover;
	border-radius: var(--prou-radius-xl);
	box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(243, 237, 224, 0.1);
}

.prou-farm__city {
	position: absolute;
	bottom: var(--prou-space-6);
	left: var(--prou-space-6);
	display: inline-flex;
	align-items: center;
	gap: var(--prou-space-1);
	padding: 0.35rem 0.8rem;
	border-radius: var(--prou-radius-pill);
	background: var(--prou-lime);
	color: var(--prou-night);
	font-size: var(--prou-text-sm);
	font-weight: 700;
	box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
}

.prou-farm__title {
	margin: var(--prou-space-4) 0 var(--prou-space-6);
	font-size: var(--prou-text-3xl);
}

.prou-farm__products {
	display: grid;
	gap: var(--prou-space-3);
	margin: var(--prou-space-8) 0;
	padding: 0;
	list-style: none;
}

.prou-farm__product {
	display: flex;
	align-items: center;
	gap: var(--prou-space-4);
	padding: var(--prou-space-3);
	border: 1px solid var(--prou-line-dark);
	border-radius: var(--prou-radius-lg);
	background: rgba(243, 237, 224, 0.04);
	color: var(--prou-on-dark);
	text-decoration: none;
	transition: background-color 300ms ease, border-color 300ms ease, transform 500ms var(--prou-ease);
}

.prou-farm__product:hover {
	border-color: rgba(200, 226, 122, 0.4);
	background: rgba(243, 237, 224, 0.07);
	color: var(--prou-on-dark);
	transform: translateX(6px);
}

.prou-farm__product img {
	width: 72px;
	height: 72px;
	border-radius: var(--prou-radius);
	object-fit: cover;
}

.prou-farm__product > span {
	flex: 1;
}

.prou-farm__product-name {
	display: block;
	font-weight: 600;
}

.prou-farm__product-price.price {
	display: block;
	color: var(--prou-lime);
	font-size: var(--prou-text-sm);
}

.prou-farm__product .prou-icon {
	margin-right: var(--prou-space-2);
	color: var(--prou-lime);
}

/* ==========================================================================
   10. WhatsApp CTA
   ========================================================================== */

.prou-cta {
	background: var(--prou-paper);
}

.prou-cta__card {
	position: relative;
	display: grid;
	gap: var(--prou-space-8);
	align-items: end;
	padding: clamp(2rem, 1rem + 5vw, 5rem);
	overflow: hidden;
	border-radius: var(--prou-radius-xl);
	background:
		radial-gradient(70% 90% at 100% 100%, rgba(200, 226, 122, 0.22), transparent 60%),
		var(--prou-night);
	color: var(--prou-on-dark);
	isolation: isolate;
}

.prou-cta__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(500px circle at var(--mx) var(--my), rgba(217, 174, 82, 0.18), transparent 45%);
}

.prou-cta__media {
	display: none;
}

@media (min-width: 900px) {
	.prou-cta__card {
		grid-template-columns: 1fr auto minmax(240px, 300px);
		align-items: center;
	}

	.prou-cta__media {
		display: block;
		margin: calc(-1 * clamp(2rem, 1rem + 5vw, 5rem)) calc(-1 * clamp(2rem, 1rem + 5vw, 5rem)) calc(-1 * clamp(2rem, 1rem + 5vw, 5rem)) 0;
		align-self: stretch;
		min-height: 360px;
	}

	.prou-cta__media img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 62%;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 28%);
		mask-image: linear-gradient(90deg, transparent, #000 28%);
	}
}

.prou-cta__title {
	margin: 0 0 var(--prou-space-4);
	font-size: var(--prou-text-4xl);
	max-width: 12ch;
}

.prou-home .prou-cta__title em {
	color: var(--prou-lime);
}

.prou-cta .prou-lead {
	margin: 0;
	color: var(--prou-on-dark-muted);
}