/* Homepage sections 2–10 */

:root {
	--rf-purple-glow: rgba(120, 60, 200, 0.45);
	--rf-purple-soft: rgba(100, 50, 180, 0.18);
	--rf-grey-dull: rgba(80, 80, 100, 0.25);
}

/* ── Shared toggles ── */
.rf-compare__toggle {
	display: inline-flex;
	gap: 0.35rem;
	padding: 0.35rem;
	margin-bottom: 2rem;
	background: var(--rf-glass);
	border: 1px solid var(--rf-glass-border);
	border-radius: 999px;
}

.rf-compare__toggle-btn {
	padding: 0.55rem 1.15rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--rf-muted);
	background: transparent;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.rf-compare__toggle-btn.is-active {
	color: var(--rf-base);
	background: var(--rf-gold);
	box-shadow: 0 4px 20px rgba(239, 186, 96, 0.25);
}

/* ── Pain Points Section ── */
.rf-pain {
	position: relative;
	padding-block: clamp(4rem, 10vw, 7rem);
	background:
		radial-gradient(ellipse 90% 60% at 20% 0%, rgba(80, 40, 140, 0.12), transparent 55%),
		radial-gradient(ellipse 70% 50% at 90% 80%, rgba(255, 90, 60, 0.04), transparent 50%),
		#070010;
}

.rf-pain::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent, rgba(10, 1, 24, 0.4) 100%);
	pointer-events: none;
}

.rf-pain .rf-container {
	position: relative;
	z-index: 1;
}

.rf-pain__hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.rf-pain__eyebrow {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 120, 80, 0.85);
	margin: 0 0 1rem;
}

.rf-pain__title {
	margin: 0 0 1rem;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--rf-light);
	max-width: 20ch;
}

.rf-pain__sub {
	margin: 0 0 1.25rem;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--rf-muted);
	max-width: 44ch;
}

.rf-pain__closing {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--rf-gold);
}

/* 3D cylinder message carousel — no frame, no stage background */
.rf-pain__visual {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 380px;
	padding: 0.5rem 0;
}

.rf-pain__visual.is-active .rf-cylinder,
.rf-pain__visual.is-active .rf-wa-msg {
	animation-play-state: running;
}

.rf-pain__visual.is-paused .rf-cylinder,
.rf-pain__visual.is-paused .rf-wa-msg {
	animation-play-state: paused;
}

.rf-cylinder-stage {
	--rf-cylinder-radius: 145px;
	--rf-cylinder-duration: 12s;

	position: relative;
	width: min(430px, 92vw);
	height: 310px;
	margin: 0 auto 0.25rem;
	perspective: 950px;
	transform-style: preserve-3d;
	overflow: visible;
}

.rf-cylinder {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	animation: rf-cylinder-rotate var(--rf-cylinder-duration) infinite;
	animation-timing-function: cubic-bezier(0.55, 0.02, 0.18, 1);
	animation-play-state: running;
}

.rf-wa-msg {
	--angle: calc(var(--i) * 60deg);

	position: absolute;
	left: 50%;
	top: 50%;
	width: min(255px, 72vw);
	min-height: 54px;
	padding: 7px 10px 5px;
	border-radius: 13px 13px 13px 4px;
	background: linear-gradient(135deg, #ffffff, #f4eee6);
	color: #171717;
	box-shadow:
		0 16px 38px rgba(0, 0, 0, 0.24),
		inset 0 0 0 1px rgba(255, 255, 255, 0.9);
	transform:
		translate(-50%, -50%)
		rotateX(var(--angle))
		translateZ(var(--rf-cylinder-radius));
	transform-style: preserve-3d;
	backface-visibility: hidden;
	opacity: 0.12;
	filter: blur(2.2px);
	animation: rf-wa-msg-fade var(--rf-cylinder-duration) infinite;
	animation-delay: calc((var(--i) * 2s) - 12s);
	animation-play-state: running;
	will-change: opacity, filter;
	pointer-events: none;
}

.rf-wa-msg::after {
	content: "";
	position: absolute;
	left: -5px;
	bottom: 0;
	width: 10px;
	height: 10px;
	background: #f4eee6;
	clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

.rf-msg-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 1px;
}

.rf-msg-top strong {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(23, 23, 23, 0.55);
}

.rf-msg-top span {
	font-size: 8px;
	font-weight: 700;
	color: rgba(23, 23, 23, 0.38);
	white-space: nowrap;
}

.rf-wa-msg p {
	margin: 0;
	font-size: clamp(12px, 1.55vw, 14px);
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.rf-msg-bottom {
	display: flex;
	justify-content: flex-end;
	height: 9px;
	margin-top: 0;
}

.rf-ticks {
	display: inline-flex;
	align-items: center;
	width: 15px;
	height: 9px;
}

.rf-ticks i {
	display: block;
	width: 4px;
	height: 7px;
	border-right: 1.4px solid rgba(23, 23, 23, 0.32);
	border-bottom: 1.4px solid rgba(23, 23, 23, 0.32);
	transform: rotate(45deg);
}

.rf-ticks i + i {
	margin-left: -2px;
}

@keyframes rf-cylinder-rotate {
	0%, 8.333% {
		transform: rotateY(-18deg) rotateZ(-3deg) rotateX(0deg);
	}
	16.666%, 25% {
		transform: rotateY(-18deg) rotateZ(-3deg) rotateX(-60deg);
	}
	33.333%, 41.666% {
		transform: rotateY(-18deg) rotateZ(-3deg) rotateX(-120deg);
	}
	50%, 58.333% {
		transform: rotateY(-18deg) rotateZ(-3deg) rotateX(-180deg);
	}
	66.666%, 75% {
		transform: rotateY(-18deg) rotateZ(-3deg) rotateX(-240deg);
	}
	83.333%, 91.666% {
		transform: rotateY(-18deg) rotateZ(-3deg) rotateX(-300deg);
	}
	100% {
		transform: rotateY(-18deg) rotateZ(-3deg) rotateX(-360deg);
	}
}

@keyframes rf-wa-msg-fade {
	0%, 8.333% {
		opacity: 1;
		filter: blur(0);
	}
	16.666%, 25% {
		opacity: 0.48;
		filter: blur(0.4px);
	}
	33.333%, 41.666% {
		opacity: 0.14;
		filter: blur(1.7px);
	}
	50%, 58.333% {
		opacity: 0.03;
		filter: blur(2.7px);
	}
	66.666%, 75% {
		opacity: 0.12;
		filter: blur(1.9px);
	}
	83.333%, 91.666% {
		opacity: 0.44;
		filter: blur(0.5px);
	}
	100% {
		opacity: 1;
		filter: blur(0);
	}
}

/* WhatsApp hub — 3D icon + orbiting chips */
.rf-pain__hub {
	position: relative;
	width: 100%;
	max-width: 340px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.25rem;
}

.rf-pain__wa-3d {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 18px;
	background: #25d366;
	color: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	transform: perspective(400px) rotateX(8deg);
	animation: rf-pain-wa-float 4.5s ease-in-out infinite;
}

.rf-pain__wa-glow {
	position: absolute;
	inset: -22px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(37, 211, 102, 0.35), transparent 68%);
	z-index: -1;
	animation: rf-pain-wa-pulse 3s ease-in-out infinite;
	pointer-events: none;
}

@keyframes rf-pain-wa-float {
	0%, 100% { transform: perspective(400px) rotateX(8deg) translateY(0); }
	50% { transform: perspective(400px) rotateX(6deg) translateY(-5px); }
}

@keyframes rf-pain-wa-pulse {
	0%, 100% { opacity: 0.45; transform: scale(1); }
	50% { opacity: 0.8; transform: scale(1.06); }
}

.rf-pain__wa-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.rf-pain__badge {
	position: absolute;
	top: -6px;
	right: -6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	font-size: 0.75rem;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, #ff6b4a, #e84530);
	border-radius: 999px;
	border: 2px solid #070010;
	box-shadow: 0 0 14px rgba(255, 90, 60, 0.5);
	transform: scale(1);
}

.rf-pain__badge.is-bump {
	animation: rf-pain-badge-bump 0.4s ease;
}

@keyframes rf-pain-badge-bump {
	0% { transform: scale(1); }
	50% { transform: scale(1.28); }
	100% { transform: scale(1); }
}

.rf-pain__chip {
	position: absolute;
	top: 50%;
	z-index: 2;
	padding: 0.35rem 0.75rem;
	font-size: 0.625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
	color: #ff8a70;
	background: rgba(255, 90, 60, 0.1);
	border: 1px solid rgba(255, 90, 60, 0.28);
	border-radius: 999px;
	opacity: 0;
	pointer-events: none;
}

.rf-pain__chip--left {
	right: calc(50% + 44px);
	transform: translate(24px, -50%) scale(0.5);
}

.rf-pain__chip--right {
	left: calc(50% + 44px);
	transform: translate(-24px, -50%) scale(0.5);
}

.rf-pain__chip.is-born {
	opacity: 1;
	transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.34, 1.45, 0.64, 1);
}

.rf-pain__chip--left.is-born {
	transform: translate(0, -50%) scale(1);
}

.rf-pain__chip--right.is-born {
	transform: translate(0, -50%) scale(1);
}

/* Stagger chip vertical positions */
.rf-pain__chip--left[data-rf-pain-chip="0"] { margin-top: -28px; }
.rf-pain__chip--left[data-rf-pain-chip="2"] { margin-top: 28px; }
.rf-pain__chip--right[data-rf-pain-chip="1"] { margin-top: -28px; }
.rf-pain__chip--right[data-rf-pain-chip="4"] { margin-top: 28px; }

/* Pain cards grid */
.rf-pain__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.rf-pain-card {
	position: relative;
	padding: 1.5rem;
	border-radius: 24px;
	border: 1px solid rgba(140, 80, 220, 0.18);
	background: rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.rf-pain-card:hover {
	border-color: rgba(255, 90, 60, 0.25);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	transform: translateY(-2px);
}

.rf-pain-card__badge {
	display: inline-block;
	margin-bottom: 0.75rem;
	padding: 0.25rem 0.6rem;
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #ff8a70;
	background: rgba(255, 90, 60, 0.1);
	border: 1px solid rgba(255, 90, 60, 0.22);
	border-radius: 6px;
}

.rf-pain-card__title {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--rf-light);
	line-height: 1.35;
}

.rf-pain-card__desc {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--rf-muted);
}

.rf-pain-card__hl {
	color: inherit;
	font-weight: 400;
	transition: color 0.75s ease, font-weight 0.75s ease;
}

.rf-pain-card.is-highlighted .rf-pain-card__hl {
	color: var(--rf-gold);
	font-weight: 600;
}

/* ── How It Works Flow ── */
.rf-flow__stepper {
	position: relative;
	margin-bottom: 2rem;
}

.rf-flow__track {
	position: absolute;
	top: 14px;
	left: 10%;
	right: 10%;
	height: 3px;
	background: var(--rf-glass-border);
	border-radius: 2px;
	overflow: hidden;
}

.rf-flow__track-fill {
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, var(--rf-gold), var(--rf-purple-glow));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.6s ease;
}

.rf-flow[data-rf-step="0"] .rf-flow__track-fill { transform: scaleX(0); }
.rf-flow[data-rf-step="1"] .rf-flow__track-fill { transform: scaleX(0.25); }
.rf-flow[data-rf-step="2"] .rf-flow__track-fill { transform: scaleX(0.5); }
.rf-flow[data-rf-step="3"] .rf-flow__track-fill { transform: scaleX(0.75); }
.rf-flow[data-rf-step="4"] .rf-flow__track-fill { transform: scaleX(1); }

.rf-flow__steps {
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.5rem;
}

.rf-flow__step {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
}

.rf-flow__dot {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--rf-surface);
	border: 2px solid var(--rf-glass-border);
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.rf-flow__step.is-active .rf-flow__dot {
	border-color: var(--rf-gold);
	box-shadow: 0 0 20px rgba(239, 186, 96, 0.4);
	animation: rf-pulse 2s ease-in-out infinite;
}

.rf-flow__label {
	font-size: 0.6875rem;
	font-weight: 600;
	text-align: center;
	color: var(--rf-muted);
	line-height: 1.3;
	max-width: 90px;
}

.rf-flow__step.is-active .rf-flow__label {
	color: var(--rf-light);
}

@keyframes rf-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.08); }
}

.rf-flow__preview {
	padding: 1.5rem;
	min-height: 100px;
}

.rf-flow__preview-inner {
	position: relative;
	min-height: 60px;
}

.rf-flow__preview-panel {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	pointer-events: none;
}

.rf-flow__preview-panel.is-active {
	position: relative;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.rf-flow__intent,
.rf-flow__status,
.rf-flow__alert {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--rf-gold);
}

/* ── Setup Wizard ── */
.rf-setup__layout {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.rf-setup__lead {
	font-size: 1rem;
	color: var(--rf-muted);
	line-height: 1.6;
	margin-bottom: 1.25rem;
}

.rf-setup__bullets {
	margin: 0;
	padding-left: 1.25rem;
	color: var(--rf-muted);
	font-size: 0.875rem;
	line-height: 1.8;
}

.rf-setup__mock-title {
	margin-left: auto;
	font-size: 0.75rem;
	color: var(--rf-muted);
}

.rf-setup__mock-body {
	display: grid;
	grid-template-columns: 1fr;
	min-height: 280px;
	background: linear-gradient(180deg, #120a22, #0a0118);
}

.rf-setup__checklist {
	padding: 1rem;
	border-right: 1px solid var(--rf-glass-border);
}

.rf-setup__check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0;
	font-size: 0.75rem;
	color: var(--rf-muted);
	transition: color 0.3s ease;
}

.rf-setup__check.is-done {
	color: var(--rf-light);
}

.rf-setup__check-icon {
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.625rem;
	border-radius: 50%;
	border: 1px solid var(--rf-glass-border);
	flex-shrink: 0;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.rf-setup__check.is-done .rf-setup__check-icon {
	background: var(--rf-gold);
	border-color: var(--rf-gold);
	color: var(--rf-base);
}

.rf-setup__progress {
	margin-top: 1rem;
	height: 4px;
	background: var(--rf-glass);
	border-radius: 2px;
	overflow: hidden;
}

.rf-setup__progress-bar {
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, var(--rf-gold), var(--rf-purple-glow));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.6s ease;
}

.rf-setup[data-rf-step="0"] .rf-setup__progress-bar { transform: scaleX(0.2); }
.rf-setup[data-rf-step="1"] .rf-setup__progress-bar { transform: scaleX(0.4); }
.rf-setup[data-rf-step="2"] .rf-setup__progress-bar { transform: scaleX(0.6); }
.rf-setup[data-rf-step="3"] .rf-setup__progress-bar { transform: scaleX(0.8); }
.rf-setup[data-rf-step="4"] .rf-setup__progress-bar { transform: scaleX(1); }

.rf-setup__main {
	padding: 1rem 1.25rem;
}

.rf-setup__typing {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--rf-gold);
	margin: 0 0 1rem;
}

.rf-setup__chat-preview {
	position: relative;
	min-height: 120px;
	padding: 0.75rem;
	background: var(--rf-glass);
	border-radius: 12px;
}

.rf-setup__chat-panel {
	position: absolute;
	inset: 0.75rem;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.rf-setup__chat-panel.is-active {
	position: relative;
	inset: auto;
	opacity: 1;
	transform: translateY(0);
}

.rf-setup__chat-label {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rf-gold);
	margin: 0 0 0.35rem;
}

.rf-setup__chat-panel p {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--rf-muted);
}

/* ── Bento Grid ── */
.rf-bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(180px, auto);
	gap: 1rem;
}

.rf-bento__card {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
}

.rf-bento__card--lg {
	grid-column: span 2;
	grid-row: span 2;
}

.rf-bento__card--md {
	grid-column: span 2;
}

.rf-bento__card--sm {
	grid-column: span 2;
}

.rf-bento__visual {
	flex: 1;
	min-height: 100px;
	margin-bottom: 1rem;
	padding: 0.75rem;
	background: rgba(0, 0, 0, 0.25);
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}

.rf-bento__card h3 {
	margin: 0 0 0.35rem;
	font-size: 1rem;
	color: var(--rf-light);
}

.rf-bento__card p {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--rf-muted);
	line-height: 1.4;
}

.rf-bento-cal {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.rf-bento-cal__slot {
	height: 24px;
	background: var(--rf-glass);
	border-radius: 4px;
	opacity: 0.4;
}

.rf-bento-cal__slot--booked {
	background: var(--rf-purple-glow);
	opacity: 0;
	animation: rf-slot-in 0.5s ease forwards;
}

.rf-bento-cal__slot--booked:nth-child(2) { animation-delay: 0.3s; }
.rf-bento-cal__slot--booked:nth-child(4) { animation-delay: 0.6s; }
.rf-bento-cal__slot--booked:nth-child(6) { animation-delay: 0.9s; }

.rf-bento-section.in-view .rf-bento-cal__slot--booked { animation-play-state: running; }

@keyframes rf-slot-in {
	to { opacity: 1; }
}

.rf-bento__badge {
	position: absolute;
	bottom: 0.75rem;
	right: 0.75rem;
	padding: 0.25rem 0.6rem;
	font-size: 0.6875rem;
	font-weight: 600;
	background: var(--rf-gold);
	color: var(--rf-base);
	border-radius: 999px;
	transform: translateX(120%);
	opacity: 0;
}

.rf-bento-section.in-view .rf-bento__badge {
	animation: rf-badge-slide 0.5s ease 1.2s forwards;
}

@keyframes rf-badge-slide {
	to { transform: translateX(0); opacity: 1; }
}

.rf-bento-stock__row {
	display: flex;
	justify-content: space-between;
	font-size: 0.75rem;
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--rf-glass-border);
}

.rf-bento__alert {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.2rem 0.5rem;
	font-size: 0.625rem;
	font-weight: 600;
	color: #ff6b6b;
	background: rgba(255, 107, 107, 0.15);
	border-radius: 4px;
	opacity: 0;
}

.rf-bento-section.in-view .rf-bento__alert {
	animation: rf-fade-in 0.4s ease 1.5s forwards;
}

.rf-bento__sync {
	display: inline-block;
	margin-top: 0.35rem;
	padding: 0.2rem 0.5rem;
	font-size: 0.625rem;
	color: var(--rf-gold);
	border: 1px solid rgba(239, 186, 96, 0.3);
	border-radius: 4px;
	animation: rf-sync-pulse 2s ease-in-out infinite;
}

@keyframes rf-sync-pulse {
	0%, 100% { opacity: 0.7; }
	50% { opacity: 1; box-shadow: 0 0 12px rgba(239, 186, 96, 0.3); }
}

.rf-bento__query {
	font-size: 0.75rem;
	font-style: italic;
	color: var(--rf-muted);
	margin: 0 0 0.5rem;
}

.rf-bento-gallery {
	display: flex;
	gap: 6px;
}

.rf-bento-gallery__tile {
	width: 48px;
	height: 48px;
	background: linear-gradient(135deg, var(--rf-purple-soft), var(--rf-surface));
	border-radius: 8px;
	transform: translateX(20px);
	opacity: 0;
}

.rf-bento-section.in-view .rf-bento-gallery__tile {
	animation: rf-tile-in 0.4s ease forwards;
}

.rf-bento-gallery__tile:nth-child(1) { animation-delay: 0.2s; }
.rf-bento-gallery__tile:nth-child(2) { animation-delay: 0.4s; }
.rf-bento-gallery__tile:nth-child(3) { animation-delay: 0.6s; }

@keyframes rf-tile-in {
	to { transform: translateX(0); opacity: 1; }
}

.rf-bento__zone {
	display: inline-block;
	padding: 0.2rem 0.5rem;
	margin: 0 0.25rem 0.25rem 0;
	font-size: 0.625rem;
	background: var(--rf-glass);
	border-radius: 4px;
}

.rf-bento__delivery-day {
	font-size: 0.75rem;
	font-weight: 600;
	margin: 0.5rem 0;
	color: var(--rf-light);
}

.rf-bento__chip {
	display: inline-block;
	padding: 0.2rem 0.5rem;
	margin: 0.25rem 0.25rem 0 0;
	font-size: 0.625rem;
	background: rgba(37, 211, 102, 0.15);
	color: #25d366;
	border-radius: 4px;
}

.rf-bento__chip--warn {
	background: rgba(255, 107, 107, 0.15);
	color: #ff6b6b;
}

.rf-bento-alert-bubble {
	padding: 0.5rem 0.75rem;
	font-size: 0.75rem;
	background: rgba(37, 211, 102, 0.12);
	border-radius: 8px 8px 8px 2px;
	margin-bottom: 0.5rem;
}

.rf-bento-timeline__item {
	display: block;
	font-size: 0.75rem;
	padding: 0.35rem 0;
	color: var(--rf-muted);
	border-left: 2px solid var(--rf-glass-border);
	padding-left: 0.75rem;
	margin-bottom: 0.25rem;
}

.rf-bento-timeline__item--done {
	color: var(--rf-gold);
	border-color: var(--rf-gold);
}

@keyframes rf-fade-in {
	to { opacity: 1; }
}

/* ── Automation Recipes ── */
.rf-recipes__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.rf-recipes__tab {
	padding: 0.5rem 1rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--rf-muted);
	background: var(--rf-glass);
	border: 1px solid var(--rf-glass-border);
	border-radius: 999px;
	cursor: pointer;
	transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.rf-recipes__tab.is-active {
	color: var(--rf-base);
	background: var(--rf-gold);
	border-color: var(--rf-gold);
}

.rf-recipes__flows {
	min-height: 80px;
}

.rf-recipes__flow {
	display: none;
}

.rf-recipes__flow.is-active {
	display: block;
}

.rf-recipes__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.rf-recipes__chip {
	padding: 0.5rem 0.85rem;
	font-size: 0.8125rem;
	font-weight: 500;
	background: var(--rf-glass);
	border: 1px solid var(--rf-glass-border);
	border-radius: 8px;
	opacity: 0.35;
	transform: scale(0.95);
	transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.rf-recipes__chip.is-lit {
	opacity: 1;
	transform: scale(1);
	border-color: rgba(140, 80, 220, 0.5);
	box-shadow: 0 0 16px var(--rf-purple-glow);
}

.rf-recipes__arrow {
	color: var(--rf-muted);
	font-size: 0.875rem;
}

/* ── Use Case Switcher ── */
.rf-usecases__layout {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 1.5rem;
	align-items: start;
}

.rf-usecases__pills {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.rf-usecases__pill {
	padding: 0.65rem 1rem;
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: left;
	color: var(--rf-muted);
	background: var(--rf-glass);
	border: 1px solid var(--rf-glass-border);
	border-radius: 10px;
	cursor: pointer;
	transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.rf-usecases__pill.is-active {
	color: var(--rf-light);
	background: rgba(140, 80, 220, 0.15);
	border-color: rgba(140, 80, 220, 0.4);
	transform: translateX(4px);
}

.rf-usecases__preview {
	padding: 1.25rem;
	min-height: 260px;
}

.rf-usecases__panel {
	display: none;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.rf-usecases__panel.is-active {
	display: grid;
	opacity: 1;
	transform: translateY(0);
}

.rf-usecases__chat {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.rf-usecases__dash {
	padding: 0.75rem;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 12px;
	font-size: 0.75rem;
}

.rf-usecases__dash-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.75rem;
	font-weight: 600;
	color: var(--rf-light);
}

.rf-usecases__bot-toggle {
	padding: 0.15rem 0.5rem;
	font-size: 0.625rem;
	background: rgba(37, 211, 102, 0.2);
	color: #25d366;
	border-radius: 4px;
}

.rf-usecases__dash-row {
	display: flex;
	justify-content: space-between;
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--rf-glass-border);
}

.rf-usecases__dash-label {
	color: var(--rf-muted);
}

.rf-usecases__dash-badge {
	color: var(--rf-gold);
	font-weight: 600;
}

.rf-usecases__dash-alert {
	margin-top: 0.5rem;
	padding: 0.35rem 0.5rem;
	background: rgba(239, 186, 96, 0.12);
	color: var(--rf-gold);
	border-radius: 6px;
	font-size: 0.6875rem;
}

.rf-usecases__takeover {
	margin-top: 0.5rem;
	padding: 0.35rem 0.75rem;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--rf-light);
	background: rgba(255, 107, 107, 0.2);
	border: 1px solid rgba(255, 107, 107, 0.3);
	border-radius: 6px;
	cursor: default;
}

/* ── Multilingual ── */
.rf-multilingual__card {
	max-width: 640px;
	margin: 0 auto;
	padding: 1.5rem;
	overflow: hidden;
	box-shadow: 0 8px 40px var(--rf-purple-soft);
}

.rf-multilingual__greetings {
	position: relative;
	height: 40px;
	margin-bottom: 1.5rem;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

.rf-multilingual__greet-track {
	display: flex;
	gap: 1.5rem;
	width: max-content;
	animation: rf-greet-drift 25s linear infinite;
}

.rf-multilingual__greet {
	padding: 0.35rem 0.85rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--rf-light);
	background: rgba(140, 80, 220, 0.15);
	border: 1px solid rgba(140, 80, 220, 0.25);
	border-radius: 999px;
	white-space: nowrap;
}

@keyframes rf-greet-drift {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.rf-multilingual__chat {
	position: relative;
	min-height: 100px;
}

.rf-multilingual__panel {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.rf-multilingual__panel.is-active {
	position: relative;
	opacity: 1;
	transform: translateY(0);
}

/* ── Comparison ── */
.rf-compare {
	transition: background 0.6s ease;
}

.rf-compare.is-without {
	background: radial-gradient(ellipse 70% 40% at 30% 50%, var(--rf-grey-dull), transparent 70%);
}

.rf-compare.is-with {
	background: radial-gradient(ellipse 70% 40% at 70% 50%, var(--rf-purple-soft), transparent 70%);
}

.rf-compare__split {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 0;
	overflow: hidden;
	position: relative;
	min-height: 280px;
}

.rf-compare__side {
	padding: 1.5rem;
}

.rf-compare__list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.rf-compare__list li {
	padding: 0.4rem 0;
	font-size: 0.875rem;
	color: var(--rf-muted);
	border-bottom: 1px solid var(--rf-glass-border);
}

.rf-compare__side--with .rf-compare__list li {
	color: var(--rf-light);
}

.rf-compare__divider {
	width: 3px;
	background: var(--rf-gold);
	box-shadow: 0 0 20px rgba(239, 186, 96, 0.5);
	transition: transform 0.6s ease;
}

.rf-compare.is-with .rf-compare__divider {
	transform: translateX(0);
}

.rf-compare__mock {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0.75rem;
	background: rgba(0, 0, 0, 0.25);
	border-radius: 10px;
	min-height: 80px;
}

.rf-compare__msg {
	height: 12px;
	background: var(--rf-glass);
	border-radius: 4px;
}

.rf-compare__msg--missed {
	opacity: 0.3;
}

.rf-compare__dash-row {
	height: 14px;
	background: var(--rf-glass);
	border-radius: 4px;
}

.rf-compare__dash-row--active {
	background: rgba(140, 80, 220, 0.4);
	box-shadow: 0 0 10px var(--rf-purple-glow);
}

.rf-compare__stat {
	margin-top: 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--rf-gold);
	text-align: center;
}

/* ── Responsive ── */
@media (max-width: 960px) {
	.rf-pain__hero {
		grid-template-columns: 1fr;
	}

	.rf-pain__cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.rf-bento {
		grid-template-columns: repeat(2, 1fr);
	}

	.rf-bento__card--lg,
	.rf-bento__card--md,
	.rf-bento__card--sm {
		grid-column: span 2;
		grid-row: span 1;
	}

	.rf-setup__layout {
		grid-template-columns: 1fr;
	}

	.rf-usecases__layout {
		grid-template-columns: 1fr;
	}

	.rf-usecases__pills {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.rf-usecases__panel.is-active {
		grid-template-columns: 1fr;
	}

	.rf-flow__steps {
		overflow-x: auto;
		padding-bottom: 0.5rem;
		-webkit-overflow-scrolling: touch;
	}

	.rf-flow__step {
		min-width: 72px;
	}
}

@media (max-width: 600px) {
	.rf-cylinder-stage {
		--rf-cylinder-radius: 125px;
		width: min(360px, 94vw);
		height: 270px;
	}

	.rf-wa-msg {
		width: 230px;
		min-height: 50px;
		padding: 7px 9px 5px;
	}

	.rf-pain__hub {
		height: 110px;
	}

	.rf-pain__chip {
		font-size: 0.5625rem;
		padding: 0.28rem 0.55rem;
	}

	.rf-pain__chip--left {
		right: calc(50% + 38px);
	}

	.rf-pain__chip--right {
		left: calc(50% + 38px);
	}

	.rf-pain__cards {
		grid-template-columns: 1fr;
	}

	.rf-pain__title {
		max-width: none;
	}

	.rf-bento {
		grid-template-columns: 1fr;
	}

	.rf-bento__card--lg,
	.rf-bento__card--md,
	.rf-bento__card--sm {
		grid-column: span 1;
	}

	.rf-compare__split {
		grid-template-columns: 1fr;
	}

	.rf-compare__divider {
		width: 100%;
		height: 3px;
	}

	.rf-setup__mock-body {
		grid-template-columns: 1fr;
	}

	.rf-recipes__chips {
		flex-direction: column;
		align-items: stretch;
	}

	.rf-recipes__arrow {
		display: none;
	}
}