/**
 * Seamless homepage flow — unified canvas + softer section spacing.
 */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

[id] {
	scroll-margin-top: calc(var(--rf-header-h, 72px) + 12px);
}

.rf-main {
	position: relative;
	isolation: isolate;
	background-color: #080011;
}

/* Shared ambient blobs + base gradient */
.rf-main::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 58% 42% at 6% 4%, rgba(76, 22, 150, 0.42), transparent 68%),
		radial-gradient(ellipse 48% 38% at 94% 6%, rgba(12, 110, 58, 0.28), transparent 64%),
		radial-gradient(ellipse 70% 55% at 48% 38%, rgba(55, 18, 120, 0.28), transparent 72%),
		radial-gradient(ellipse 52% 44% at 14% 72%, rgba(88, 32, 168, 0.32), transparent 70%),
		radial-gradient(ellipse 46% 40% at 88% 78%, rgba(14, 95, 52, 0.22), transparent 68%),
		radial-gradient(ellipse 80% 50% at 50% 100%, rgba(48, 18, 96, 0.26), transparent 62%),
		linear-gradient(180deg, #0a0014 0%, #06000e 38%, #05000c 72%, #030008 100%);
}

.rf-main::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.32;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
	background-size: 40px 40px;
	mask-image: radial-gradient(ellipse 85% 75% at 50% 42%, black, transparent 88%);
}

.rf-main > * {
	position: relative;
	z-index: 1;
}

/* Transparent section shells — cards keep their glass styles */
.rf-main .rf-hero,
.rf-main .rf-pain,
.rf-main .rf5,
.rf-main .rf-quickfeel,
.rf-main .rf-compare-showcase,
.rf-main .rf-morph,
.rf-main .rf-how-journey,
.rf-main .rf-setup6,
.rf-main .rf-pricing,
.rf-main .rf-faq,
.rf-main .rf-final-cta,
.rf-main .rf-analytics,
.rf-main .rf-flow,
.rf-main #rf-how {
	background: transparent !important;
}

.rf-main .rf-analytics {
	padding-top: clamp(2.75rem, 5vw, 4.5rem) !important;
	padding-bottom: clamp(2.75rem, 5vw, 4.5rem) !important;
}

/* Tone down per-section full-bleed backgrounds */
.rf-main .rf5-bg,
.rf-main .rf-quickfeel-bg,
.rf-main .rf-compare-showcase-bg,
.rf-main .rf-morph-bg,
.rf-main .rf-how-journey-bg,
.rf-main .rf-setup6-bg,
.rf-main .rf-pricing-bg,
.rf-main .rf-faq-bg,
.rf-main .rf-final-bg,
.rf-main .rf-analytics-bg,
.rf-main .rf-pain::before {
	opacity: 0.12;
}

.rf-main .rf-hero::before {
	opacity: 0.38;
}

/* Consistent vertical rhythm (less double-gap between sections) */
.rf-main .rf-pain,
.rf-main .rf5,
.rf-main .rf-quickfeel,
.rf-main .rf-compare-showcase,
.rf-main .rf-morph,
.rf-main .rf-how-journey,
.rf-main .rf-setup6,
.rf-main .rf-pricing,
.rf-main .rf-faq,
.rf-main .rf-final-cta,
.rf-main .rf-flow {
	padding-top: clamp(2.75rem, 5vw, 4.5rem) !important;
	padding-bottom: clamp(2.75rem, 5vw, 4.5rem) !important;
}

.rf-main .rf-morph {
	padding-top: clamp(2rem, 4vw, 3rem) !important;
	padding-bottom: 0 !important;
}

.rf-main .rf-hero {
	padding-top: calc(var(--rf-header-h, 64px) + clamp(1.25rem, 3vw, 2rem)) !important;
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}

@media (max-width: 1024px) {
	.rf-main .rf-hero {
		padding-top: 0 !important;
	}

	.rf-main .rf5 {
		padding-top: 0 !important;
	}

	.rf-hero__layout {
		padding-top: 0.75rem;
	}

}

.rf-main .rf-final-cta {
	padding-bottom: clamp(1.5rem, 3vw, 2rem) !important;
}

.rf-site-footer {
	padding-top: clamp(2rem, 4vw, 3rem) !important;
	margin-top: 0 !important;
}

body.home {
	background: #080011;
	overflow-x: clip;
}

.rf-main {
	overflow-x: clip;
	max-width: 100%;
}

/* Mobile — richer seamless purple / green / gold ambient flow */
@media (max-width: 768px) {
	.rf-main::before {
		background:
			radial-gradient(ellipse 90% 55% at 8% 8%, rgba(72, 20, 145, 0.44), transparent 62%),
			radial-gradient(ellipse 75% 48% at 92% 14%, rgba(10, 105, 55, 0.3), transparent 58%),
			radial-gradient(ellipse 85% 50% at 50% 42%, rgba(50, 16, 110, 0.32), transparent 68%),
			radial-gradient(ellipse 70% 45% at 6% 68%, rgba(82, 28, 155, 0.34), transparent 64%),
			radial-gradient(ellipse 65% 42% at 94% 72%, rgba(12, 92, 50, 0.26), transparent 60%),
			radial-gradient(ellipse 55% 38% at 50% 88%, rgba(100, 70, 28, 0.12), transparent 58%),
			radial-gradient(ellipse 80% 45% at 50% 100%, rgba(42, 14, 88, 0.28), transparent 62%),
			linear-gradient(180deg, #0a0014 0%, #070010 42%, #05000c 100%);
	}

	.rf-main::after {
		opacity: 0.26;
		background-size: 32px 32px;
	}

	.rf-main .rf-hero::before {
		opacity: 0.28;
		background:
			radial-gradient(ellipse 80% 50% at 50% 30%, rgba(124, 58, 237, 0.14), transparent 62%),
			radial-gradient(ellipse 60% 40% at 88% 20%, rgba(37, 211, 102, 0.1), transparent 58%);
	}
}