/**
 * Styles shared between all landing pages
 *
 * @copyright   2026, ON1
 */

/* !- Buttons */
#site-main .btn {
	padding: 0.9375rem 1.875rem;
}

#site-main .btn-sm {
	padding: 0.25rem 0.5rem;
}

/* !- Passed videos */
#passed-video {
	padding: 5rem 0;
}

#passed-video .video-figure {
	margin-bottom: 1.75rem;
}

#passed-video h2 {
	color: var(--text);
	font-size: var(--text-3xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin-bottom: 1rem;
	text-align: center;
}

/* !- Hero */
.hero-h1 span:first-of-type {
	-webkit-background-clip: text;
	background: linear-gradient(135deg, var(--green) 0%, var(--blue) 100%);
	background-clip: text;
	color: transparent;
}



/* !- Sections */
.section-visual {
	align-items: center;
	align-self: stretch;
	display: flex;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

.section-visual>img {
	position: relative;
	z-index: 1;
}

.visual-noise {
	background: linear-gradient(160deg, #030e08 0%, #040e0c 50%, var(--bg) 100%);
}

.visual-noise::before {
	background:
		radial-gradient(ellipse at 50% 35%, rgba(33, 206, 110, 0.16) 0%, transparent 55%),
		radial-gradient(ellipse at 75% 70%, rgba(10, 126, 250, 0.1) 0%, transparent 45%);
	content: '';
	inset: 0;
	position: absolute;
}

.visual-color {
	background: linear-gradient(160deg, #050d1a 0%, #061520 50%, var(--bg) 100%);
}

.visual-color::before {
	background:
		radial-gradient(ellipse at 40% 35%, rgba(250, 183, 59, 0.14) 0%, transparent 55%),
		radial-gradient(ellipse at 70% 65%, rgba(10, 126, 250, 0.12) 0%, transparent 45%);
	content: '';
	inset: 0;
	position: absolute;
}

.visual-erase {
	background: linear-gradient(160deg, #050a18 0%, #04101c 50%, var(--bg) 100%);
}

.visual-erase::before {
	background:
		radial-gradient(ellipse at 55% 40%, rgba(10, 126, 250, 0.16) 0%, transparent 55%),
		radial-gradient(ellipse at 30% 70%, color-mix(in srgb, var(--purple) 10%, transparent) 0%, transparent 45%);
	content: '';
	inset: 0;
	position: absolute;
}

.visual-sky {
	background: linear-gradient(160deg, #030d18 0%, #040e1c 50%, var(--bg) 100%);
}

.visual-sky::before {
	background:
		radial-gradient(ellipse at 50% 30%, rgba(10, 126, 250, 0.2) 0%, transparent 55%),
		radial-gradient(ellipse at 75% 70%, color-mix(in srgb, var(--purple) 10%, transparent) 0%, transparent 45%),
		radial-gradient(ellipse at 25% 70%, rgba(33, 206, 110, 0.08) 0%, transparent 40%);
	content: '';
	inset: 0;
	position: absolute;
}

.visual-blur {
	background: linear-gradient(160deg, #0a0818 0%, #0d0c1e 50%, var(--bg) 100%);
}

.visual-blur::before {
	background:
		radial-gradient(ellipse at 45% 35%, color-mix(in srgb, var(--purple) 14%, transparent) 0%, transparent 55%),
		radial-gradient(ellipse at 70% 70%, rgba(10, 126, 250, 0.1) 0%, transparent 45%);
	content: '';
	inset: 0;
	position: absolute;
}

.visual-ai {
	background: linear-gradient(160deg, #030e08 0%, #041210 50%, var(--bg) 100%);
}

.visual-ai::before {
	background:
		radial-gradient(ellipse at 50% 35%, rgba(33, 206, 110, 0.14) 0%, transparent 55%),
		radial-gradient(ellipse at 30% 70%, rgba(10, 126, 250, 0.1) 0%, transparent 45%);
	content: '';
	inset: 0;
	position: absolute;
}