hero-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4em;
	align-items: center;
	min-height: 70vh;

	hero-content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5em;

		h1 {
			margin: 0;
			font-size: 3.5rem;
			line-height: 1.1;
			font-weight: 800;
			letter-spacing: -0.03em;
			color: var(--text-main);
			/* Soft balance for headlines natively */
			text-wrap: balance;
		}

		p.subheadline {
			margin: 0;
			font-size: 1.25rem;
			line-height: 1.6;
			color: var(--text-muted);
			max-width: 32em;
		}
	}

	install-actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 1em;
		margin-top: 1.5em;

		a.store-badge {
			display: inline-flex;
			transition:
				scale 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
				filter 0.2s ease;

			img {
				height: 3.5em; /* Uniform height for all badges */
				width: auto;
				object-fit: contain;
				border-radius: 0.4em;
			}

			&:hover {
				scale: 1.05;
				filter: brightness(1.1);
			}

			&:active {
				scale: 0.95;
			}
		}
	}

	trust-line {
		display: inline-flex;
		align-items: flex-start;
		gap: 0.5em;
		margin-top: 2em;
		padding: 0.8em 1.2em;

		border-radius: 0.6em;
		background: var(--glass-bg);
		border: var(--glass-border);
		box-shadow: var(--glass-shadow);

		font-size: 0.85rem;
		font-weight: 500;
		color: var(--text-muted);

		svg {
			flex-shrink: 0;
			color: light-dark(hsl(141, 61%, 42%), hsl(141, 61%, 55%));
		}
	}
}

hero-visuals {
	position: relative;
	width: 100%;
	height: 35em;
	perspective: 1000px;
}

mockup-panel {
	position: absolute;
	border-radius: 0.8em;
	background: var(--glass-bg);
	border: var(--glass-border);
	backdrop-filter: blur(1.5em) saturate(140%);
	box-shadow: var(--glass-shadow);

	display: flex;
	flex-direction: column;
	overflow: hidden;

	mockup-header {
		height: 2em;
		background: light-dark(hsla(0, 0, 0, 0.05), hsla(255, 255, 255, 0.05));
		border-bottom: var(--glass-border);
		display: flex;
		align-items: center;
		padding: 0 1em;
	}

	mockup-body {
		padding: 1em;
		display: flex;
		flex-direction: column;
		gap: 0.8em;
		flex: 1;

		&.split {
			flex-direction: row;
		}
	}

	/* Dummy Skeleton Elements for the Mockups */
	skeleton-block,
	skeleton-image {
		background: light-dark(hsla(0, 0, 0, 0.06), hsla(255, 255, 255, 0.08));
		border-radius: 0.4em;
	}
	skeleton-block {
		height: 4em;
		width: 100%;
	}
	skeleton-image {
		width: 40%;
		height: 100%;
	}

	skeleton-lines {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 0.5em;
	}

	skeleton-text {
		height: 0.8em;
		width: 100%;
		border-radius: 0.4em;
		background: light-dark(hsla(0, 0, 0, 0.06), hsla(255, 255, 255, 0.08));
		&.short {
			width: 40%;
		}
	}

	mockup-button {
		height: 2.5em;
		width: 100%;
		border-radius: 0.4em;
		background: light-dark(hsla(281, 100%, 50%, 0.1), hsla(281, 100%, 65%, 0.15));
		border: 1px dashed var(--brand-violet);
	}
}

social-proof {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 4em 2em 2em 2em;

	span {
		display: inline-flex;
		padding: 0.6em 1.5em;

		/* Subtle frosted glass pill */
		border-radius: 2em;
		background: light-dark(hsla(220, 20%, 12%, 0.4), hsla(0, 0%, 100%, 0.4));
		backdrop-filter: blur(1em);
		border: var(--glass-border);

		font-size: 0.95rem;
		font-weight: 600;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--text-muted);
	}
}