/*--------------------------------------------------------------
# Landing Page Specific Styles
--------------------------------------------------------------*/

:root {
	/* Gradient stops for feature section bands */
	/* Non-flipped: band extends right, so left edge is visible */
	--band-left-inner: var(--accent-color);
	--band-left-outer: color-mix(in srgb, var(--accent-color) 75%, #4a2070);
	/* Flipped: band extends left, so right edge is visible */
	--band-right-inner: var(--accent-color);
	--band-right-outer: color-mix(in srgb, var(--accent-color) 85%, black);
}

/*--------------------------------------------------------------
# Feature Sections
--------------------------------------------------------------*/

.feature-section {
	padding: 60px 0;
	overflow: hidden;

	.inner {
		display: flex;
		align-items: center;
		gap: 20px;
		max-width: 1400px;
		margin: 0 auto;
		padding: 0 20px 0 60px;
	}

	.text {
		flex: 1 1 400px;
		max-width: 600px;
		padding: 20px 0;

		h4 {
			font-family: var(--heading-font);
			font-size: 1.9rem;
			font-weight: 600;
			margin-bottom: 12px;
			color: var(--heading-color);
			line-height: 1.3;
		}

		.read-more {
			margin-top: 20px;
		}

		.hint {
			font-size: 1.08rem;
			color: #777;
			margin-top: 8px;
			font-style: italic;
		}
	}

	.feature-image {
		flex: 1 1 450px;
		min-width: 450px;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400px;

		.screenshot-stack {
			position: relative;
			z-index: 1;
			transform: scale(0.8);
			transform-origin: center center;

			&.flipped {
				transform: scale(0.8) scaleX(-1);
			}
		}

		.circle-image {
			position: relative;
			z-index: 1;
			width: 420px;
			height: 420px;
			min-width: 420px;
			max-width: 420px;
			min-height: 420px;
			max-height: 420px;
			object-fit: cover;
			border-radius: 50%;
			border: 5px solid white;
			box-shadow: 0 0 0 4px var(--accent-color), 0 15px 30px rgba(0, 0, 0, 0.6);
			flex-shrink: 0;
		}
	}

	.band {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		/* Position half-circle relative to centered tablet */
		left: 3%;
		/* Extend far past container to viewport edge */
		right: -2000px;
		height: 320px;
		/* Gradient: visible left edge transitions outward to the right */
		background: linear-gradient(to right, var(--band-left-outer) 0%, var(--band-left-inner) 30%);
		border-radius: 160px 0 0 160px;
		z-index: 0;
	}

	/* Flipped variant (band from left) */
	&.flipped {
		.inner {
			flex-direction: row-reverse;
		}

		.feature-image {
			.screenshot-stack {
				/* Keep centered */
			}
		}

		.band {
			left: -2000px;
			right: 15%;
			border-radius: 0 160px 160px 0;
			/* Gradient: visible right edge transitions outward to the left */
			background: linear-gradient(to left, var(--band-right-outer) 0%, var(--band-right-inner) 30%);
		}
	}
}

/* === Medium screens === */
@media (max-width: 1200px) {
	.feature-section {
		.feature-image .screenshot-stack {
			transform: scale(0.6);

			&.flipped {
				transform: scale(0.6) scaleX(-1);
			}
		}

		.band {
			height: 265px;
			border-radius: 133px 0 0 133px;
		}

		&.flipped .band {
			border-radius: 0 133px 133px 0;
		}

		.circle-image {
			width: 370px;
			height: 370px;
			min-width: 370px;
			max-width: 370px;
			min-height: 370px;
			max-height: 370px;
		}
	}
}

/* === Mobile Layout === */
@media (max-width: 991px) {
	.feature-section {
		padding: 15px 0;

		.inner {
			flex-direction: column;
			gap: 0;
			padding: 0 20px;
		}

		&.flipped .inner {
			flex-direction: column;
		}

		.text {
			flex: none;
			width: 100%;
			order: 2;
			padding: 20px 0;

			h4 {
				font-size: 1.7rem;
			}
		}

		.feature-image {
			flex: none;
			order: 1;
			width: 100%;
			min-width: unset;
			height: auto;
			justify-content: center;

			/* Constrain screenshot-stack which doesn't shrink with scale */
			/* Use clip-path instead of overflow:hidden to allow band to extend horizontally */
			&:has(.screenshot-stack) {
				height: 350px;
				clip-path: inset(0 -100vw);
			}

			.screenshot-stack {
				transform: scale(0.65);
				transform-origin: center center;
				margin: 0;

				&.flipped {
					transform: scale(0.6) scaleX(-1);
				}
			}

			.circle-image {
				width: 320px;
				height: 320px;
				min-width: 320px;
				max-width: 320px;
				min-height: 320px;
				max-height: 320px;
			}
		}

		&.flipped .feature-image {
			justify-content: center;
		}

		.band {
			left: -20px;
			right: -20px;
			height: 200px;
			border-radius: 0;
		}

		&.flipped .band {
			left: -20px;
			right: -20px;
			border-radius: 0;
		}
	}
}

/* === Narrow Mobile === */
@media (max-width: 550px) {
	.feature-section {
		.feature-image:has(.screenshot-stack) {
			height: 280px;
		}
	}
}

/*--------------------------------------------------------------
# Contact CTA Section
--------------------------------------------------------------*/
.contact-cta {
	position: relative;
	padding: 80px 20px;
	text-align: right;
	overflow: hidden;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 1;
	}

	.contact-cta-bg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 80%;
		z-index: 0;
	}

	.inner {
		position: relative;
		z-index: 2;
		max-width: 1200px;
		margin: 0 auto;
		padding-left: 30%;
	}

	h3 {
		font-family: var(--heading-font);
		font-size: 2.4rem;
		font-weight: 700;
		color: white;
		margin-bottom: 15px;
		text-shadow:
			0 0 3px #000,
			0 0 6px #000,
			0 0 10px #000;
	}

	.lead {
		font-size: 1.44rem;
		color: white;
		margin-bottom: 30px;
		text-shadow:
			0 0 3px #000,
			0 0 6px #000;
	}

	.contact-methods {
		display: flex;
		justify-content: flex-end;
		gap: 40px;
		flex-wrap: wrap;
	}

	.contact-item {
		display: flex;
		align-items: center;
		gap: 12px;
		font-size: 1.5rem;
		font-weight: 600;
		color: white;
		text-decoration: none;
		padding: 15px 25px;
		border: 2px solid white;
		border-radius: 50px;
		transition: 0.3s;

		i {
			font-size: 1.7rem;
		}

		&:hover {
			background: white;
			color: var(--heading-color);
		}
	}
}

@media (min-width: 1600px) {
	.contact-cta .inner {
		padding-left: 0;
		margin-left: 30%;
	}
}

@media (max-width: 900px) {
	.contact-cta {
		text-align: left;
		
		.inner {
			padding-left: 0;
			max-width: 700px;
		}
		
		.contact-methods {
			justify-content: flex-start;
		}
	}
}

@media (max-width: 600px) {
	.contact-cta {
		padding: 60px 20px;

		h3 {
			font-size: 1.8rem;
		}

		.lead {
			font-size: 1.2rem;
		}

		.contact-methods {
			flex-direction: column;
			gap: 15px;
		}

		.contact-item {
			justify-content: center;
		}
	}
}

/*--------------------------------------------------------------
# Team Teaser Section
--------------------------------------------------------------*/
.team-teaser {
	position: relative;
	padding: 60px 20px;
	overflow: hidden;

	.band {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--accent-color);
		z-index: 0;
	}

	.inner {
		position: relative;
		z-index: 1;
		max-width: 1100px;
		margin: 0 auto;
		display: flex;
		align-items: flex-start;
		gap: 50px;
	}

	.team-photo {
		flex-shrink: 0;
		width: 380px;
		height: auto;
		object-fit: cover;
		border-radius: 12px;
		border: 4px solid white;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	}

	.content {
		color: white;

		h4 {
			font-family: var(--heading-font);
			font-size: 1.8rem;
			font-weight: 600;
			color: white;
			margin-bottom: 15px;
			line-height: 1.4;
		}

		p {
			font-size: 1.2rem;
			line-height: 1.6;
			margin-bottom: 12px;
			color: rgba(255, 255, 255, 0.95);
		}

		a {
			color: white;
			text-decoration: underline;
			text-underline-offset: 2px;

			&:hover {
				color: rgba(255, 255, 255, 0.8);
			}
		}

		.read-more {
			background: white;
			color: var(--accent-color);
			text-decoration: none;
			margin-top: 15px;

			&:hover {
				background: rgba(255, 255, 255, 0.9);
				color: var(--accent-color);
			}
		}
	}
}

@media (max-width: 991px) {
	.team-teaser {
		padding: 40px 20px;

		.inner {
			flex-direction: column;
			text-align: center;
			gap: 25px;
		}

		.team-photo {
			width: 100%;
			max-width: 400px;
			margin: 0 auto;
		}

		.content h4 {
			font-size: 1.25rem;
		}

		.content p {
			text-align: left;
		}
	}
}

/* === Narrow mobile === */
@media (max-width: 550px) {
	.feature-section {
		.feature-image .screenshot-stack {
			transform: scale(0.5);

			&.flipped {
				transform: scale(0.5) scaleX(-1);
			}
		}

		.feature-image .circle-image {
			width: 260px;
			height: 260px;
			min-width: 260px;
			max-width: 260px;
			min-height: 260px;
			max-height: 260px;
		}
	}
}

/*--------------------------------------------------------------
# Mobile Mockup Component - iPhone frame with screenshot
--------------------------------------------------------------*/
.mobile-mockup {
	--mockup-width: 370px;
	--mockup-clip-ratio: 0.5;
	
	position: relative;
	width: var(--mockup-width);
	/* Clip to top portion */
	overflow: hidden;
	height: calc(var(--mockup-width) * 2.07 * var(--mockup-clip-ratio));
	/* Drop shadow */
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.mobile-mockup-screen {
	position: absolute;
	/* Inset to fit within the iPhone frame's screen area */
	top: 1.9%;
	left: 5.6%;
	width: 88.8%;
	height: 96.2%;
	object-fit: cover;
	object-position: top center;
	/* Only round top corners */
	border-radius: calc(var(--mockup-width) * 0.095) calc(var(--mockup-width) * 0.095) 0 0;
	z-index: 1;
	/* Fade at 50% (where container clips) with 40px gradient */
	-webkit-mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent 100%);
	mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent 100%);
}

.mobile-mockup-frame {
	position: relative;
	width: 100%;
	z-index: 2;
	/* Frame sits on top of screenshot */
	pointer-events: none;
	/* Fade at 50% (where container clips) with 40px gradient */
	-webkit-mask-image: linear-gradient(to bottom, black calc(55% - 40px), transparent 55%);
	mask-image: linear-gradient(to bottom, black calc(55% - 40px), transparent 55%);
}

/* Size variants */
.mobile-mockup.mobile-mockup-lg {
	--mockup-width: 462px;
}

.mobile-mockup.mobile-mockup-sm {
	--mockup-width: 290px;
}

/* Responsive adjustments for mobile mockup in feature sections */
.feature-section .feature-image .mobile-mockup {
	--mockup-width: 422px;
	z-index: 1;
}

@media (max-width: 1200px) {
	.feature-section .feature-image .mobile-mockup {
		--mockup-width: 370px;
	}
}

@media (max-width: 991px) {
	.feature-section .feature-image .mobile-mockup {
		--mockup-width: 317px;
	}
}

@media (max-width: 550px) {
	.feature-section .feature-image .mobile-mockup {
		--mockup-width: 264px;
	}
}

/*--------------------------------------------------------------
# Tablet Mockup Component - iPad frame with screenshot
--------------------------------------------------------------*/
.tablet-mockup {
	--mockup-width: 630px;
	
	position: relative;
	width: var(--mockup-width);
	filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.35));
}

.tablet-mockup-screen-wrapper {
	position: absolute;
	/* Adjust each edge independently */
	top: 5%;
	bottom: 5%;
	left: 8.7%;
	right: 8.7%;
	z-index: 1;
	overflow: hidden;
}

.tablet-mockup-screen {
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.tablet-mockup-frame {
	position: relative;
	width: 100%;
	z-index: 2;
	pointer-events: none;
}

/* Flip variant */
.tablet-mockup.flipped {
	transform: scaleX(-1);
}

.tablet-mockup.flipped .tablet-mockup-screen {
	transform: scaleX(-1);
}

/* Responsive adjustments for tablet mockup in feature sections */
.feature-section .feature-image .tablet-mockup {
	--mockup-width: 605px;
	z-index: 1;
}

@media (max-width: 1200px) {
	.feature-section .feature-image .tablet-mockup {
		--mockup-width: 504px;
	}
}

@media (max-width: 991px) {
	.feature-section .feature-image .tablet-mockup {
		--mockup-width: 428px;
	}
}

@media (max-width: 550px) {
	.feature-section .feature-image .tablet-mockup {
		--mockup-width: 353px;
	}
}

/*--------------------------------------------------------------
# Demo Video Section
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Hero with Video (Light)
--------------------------------------------------------------*/
.hero.light-hero {
	background: white;
	min-height: auto;
	padding: 80px 0 60px;
}

.hero.light-hero::before {
	display: none;
}

.hero.light-hero .hero-content {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	align-items: center;
	gap: 60px;
}

.hero.light-hero .hero-video {
	flex: 1 1 60%;
	max-width: 840px;
}

.hero.light-hero .hero-video video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 12px;
	box-shadow: 
		0 4px 20px rgba(0, 0, 0, 0.15),
		0 8px 40px rgba(0, 0, 0, 0.1);
}

.hero.light-hero .hero-video .plyr {
	--plyr-color-main: var(--accent-color);
	border-radius: 12px;
}

.hero.light-hero .hero-video .plyr__poster {
	background-size: cover;
}

.hero.light-hero .hero-text {
	flex: 0 1 30%;
	min-width: 280px;
}

.hero.light-hero .hero-text h2 {
	color: var(--heading-color);
	text-shadow: none;
	font-size: 36px;
}

.hero.light-hero .hero-text p {
	color: var(--default-color);
	text-shadow: none;
	font-size: 24px;
}

.hero.light-hero .hero-cta {
	margin-top: 25px;
}

.hero.light-hero .btn-get-started {
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: white;
}

.hero.light-hero .btn-get-started:hover {
	background: color-mix(in srgb, var(--accent-color) 85%, black);
	border-color: color-mix(in srgb, var(--accent-color) 85%, black);
	color: white;
}

@media (max-width: 1000px) {
	.hero.light-hero {
		padding: 60px 0 40px;
	}
	
	.hero.light-hero .hero-content {
		flex-direction: column;
		text-align: center;
		gap: 30px;
		padding: 0 20px;
	}
	
	.hero.light-hero .hero-video {
		flex: none;
		width: 100%;
		max-width: 600px;
		order: 1;
	}
	
	.hero.light-hero .hero-text {
		order: 2;
	}
	
	.hero.light-hero .hero-text h2 {
		font-size: 38px;
	}
	
	.hero.light-hero .hero-text p {
		font-size: 20px;
		margin-bottom: 5px;
	}
	
	.hero.light-hero .hero-cta {
		justify-content: center;
		margin-top: 10px;
	}
}

@media (max-width: 600px) {
	.hero.light-hero {
		padding: 40px 0 25px;
	}
	
	.hero.light-hero .hero-content {
		gap: 20px;
		padding: 0 15px;
	}
	
	.hero.light-hero .hero-cta {
		margin-top: 8px;
	}
}

@media (max-width: 550px) {
	.hero.light-hero .hero-video {
		max-width: 100%;
	}
	
	.hero.light-hero .hero-video video {
		border-radius: 8px;
	}
	
	.hero.light-hero .hero-video .plyr {
		border-radius: 8px;
	}
	
	.hero.light-hero .hero-text h2 {
		font-size: 32px;
	}
	
	.hero.light-hero .hero-text p {
		font-size: 18px;
	}
}