@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

html,
body {
	padding: 0;
	margin: 0;
	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

/* Ensure locomotive scroll has full-height context */
html,
body {
	height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 500;
}

/* Reveal animations for initial page load */
:root {
	--reveal-duration: 0.6s;
	--reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal {
	opacity: 0;
	transform: translateY(14px) scale(0.995);
	transition:
		opacity var(--reveal-duration) var(--reveal-easing),
		transform var(--reveal-duration) var(--reveal-easing);
}

.is-loaded .reveal {
	opacity: 1;
	transform: none;
}

/* Disable opacity transition for the hero H1 reveal (keep transform only) */
.hero-h1-wrap .reveal {
	opacity: 1 !important;
	/* only animate transform for smoother slide-in; keep delays applied via JS */
	transition-property: transform;
	transition-duration: var(--reveal-duration);
	transition-timing-function: var(--reveal-easing);
}

/* Support prefers-reduced-motion */
/* Hero layout (background ball removed) */
.hero-section {
	overflow: visible;
}
.hero-h1-wrap {
	position: relative;
	display: inline-block;
}
.hero-section > * {
	position: relative;
	z-index: 20;
}

/* Video overlay: transparent at top -> white at bottom */
.video-overlay {
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 1) 100%
	);
	pointer-events: none;
}

/* Partners grid */
.partners-section {
	background: transparent;
}
.partners-grid {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	justify-content: center;
}
.partner-logo img {
	display: block;
	height: 48px;
	width: auto;
	object-fit: contain;
}

/* Testimonials / carousel */
.testimonials-section {
	background: transparent;
}
.testimonial-carousel {
	--track-width: 100%;
}
.testimonial-track {
	width: 300%; /* three items */
}
.testimonial-item {
	width: 100%;
	box-sizing: border-box;
}
.carousel-controls {
	margin-top: 0.75rem;
}

/* Small responsive tweaks */
@media (min-width: 768px) {
	.partners-grid {
		gap: 2rem;
	}
	.partner-logo {
		padding: 1rem;
	}
	.testimonial-item {
		padding: 2rem;
	}
}

/* Radial concentric background (decorative) */

.blob-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 240px;
	height: 240px;
	pointer-events: none;
	z-index: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 60% 40%, #e0c3fc 0%, #8ec5fc 100%);
	filter: blur(60px);
	opacity: 0.55;
	transform: translate(-50%, -50%);
	transition:
		top 0.18s cubic-bezier(0.22, 1, 0.36, 1),
		left 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 640px) {
	.blob-bg {
		width: 120px;
		height: 120px;
		filter: blur(32px);
	}
}

/* Ensure hero and header sit above the background */
.hero-section,
header,
.is-loaded {
	z-index: 10;
}