:root {
	--big-fucking-text: clamp(1.2em, min(3vw, 5vh), 2em);
}

/* HERO SECTION */

#hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 1.2em;
	min-height: 100dvh;
	width: min(40em, 100%);
	margin: 0 auto;
	padding: 1em;

	font-size: var(--big-fucking-text);
	font-weight: bold;
}

#hero h1 {
	font-size: clamp(1.5em, min(4vw, 5vh), 3em);
}

#hero .hero-logo {
	font-weight: bold;
	text-transform: lowercase;
	letter-spacing: -0.04em;
	white-space: nowrap;
	color: var(--brand-color);
	text-align: center;
}

#hero .hero-logo span {
	display: inline-block;
	color: var(--primary-accent-color);
	transform: rotate(-18deg);
}

#hero ul {
	width: 100%;
}

#hero .cta {
	margin-top: 1em;
}

/* Rotating thoughts */


:root {
	--rotation-time: 0.5s;
}

::view-transition-group(*) {
	animation-duration: var(--rotation-time);
	animation-timing-function: ease-out;
}

#hero li {
	opacity: var(--opacity, 0);
	transition: opacity var(--rotation-time);
}

#hero li[data-state=outgoing] { view-transition-name: outgoing-item; }
#hero li[data-state="staying-0"] { view-transition-name: staying-item-0; }
#hero li[data-state="staying-1"] { view-transition-name: staying-item-1; }
#hero li[data-state="staying-2"] { view-transition-name: staying-item-2; }
#hero li[data-state="staying-3"] { view-transition-name: staying-item-3; }
#hero li[data-state=incoming] { view-transition-name: incoming-item; }

::view-transition-old(outgoing-item) {
	animation: fade-out-up var(--rotation-time) ease-out forwards;
}

::view-transition-new(incoming-item) {
	animation: slide-in-from-bottom var(--rotation-time) ease-out;
}

@keyframes fade-out-up {
	to {
		transform: translateY(-1.5em);
		opacity: 0;
	}
}

@keyframes slide-in-from-bottom {
	from {
		transform: translateY(3.5em);
		opacity: 0;
	}
}

/* PARADIGM SHIFT SECTION */

#paradigm-shift {
	padding: 5em 2em;
	text-align: center;
	margin: 0 auto;
}

#paradigm-shift .pitch {
	font-size: clamp(150%, 4vw, 250%);
	font-weight: bold;
	margin-bottom: 0.5em;
}

#paradigm-shift .pitch > * {
	display: block;
}

#paradigm-shift .pitch > :last-child {
	color: var(--brand-color);
}

#paradigm-shift :not(.pitch) {
	max-width: 80ch;
	margin: 0 auto;
}

#paradigm-shift p {
	font-size: clamp(1.1em, 2.5vw, 1.4em);
	max-width: 60em;
	margin: 0 auto;
	text-wrap: balance;
}

/* FEATURES SECTION */

#features {
	padding: 4em 2em;
	background: var(--primary-background-plus-color);
}

#features h2 {
	font-size: clamp(2em, 4vw, 3em);
	font-weight: bold;
	text-align: center;
	margin-bottom: 2em;
	color: var(--brand-color);
}

#features .grid {
	--cols: 4;

	display: grid;
	grid-template-columns: repeat(var(--cols), 1fr);
	gap: 2em;
	max-width: 120em;
	margin: 0 auto;
}

@media (width < 88em) {
	#features .grid {
		--cols: 2;
	}
}

@media (width < 50em) {
	#features .grid {
		--cols: 1;
	}
}

#features .feature {
	padding: 1.5em;

	border-radius: 0.3em;
	border: 0.1em solid var(--secondary-background-color);
	box-shadow: 0 0.2em 0.5em var(--tertiary-background-color);
}

#features .feature h3 {
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: 1em;
	color: var(--brand-color);
}

#features .feature p {
	line-height: 1.6;
	color: var(--text-color);
}

/* WORKFLOWS SECTION */

#workflows {
	padding: 4em 2em;
	background: var(--background-color);
}

#workflows .grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2em;
	max-width: 120em;
	margin: 0 auto;
}

@media (width < 74em) {
	#workflows .grid {
		grid-template-columns: 1fr;
	}
}

#workflows h2 {
	font-size: clamp(2em, 4vw, 3em);
	font-weight: bold;
	text-align: center;
	margin-bottom: 3em;
	color: var(--brand-color);
}

#workflows .workflow {
	display: grid;
	grid-template-rows: auto 6em auto;
	gap: 1em;
	align-items: center;
	padding: 2em 2em 3em;
	border-radius: 2em;
	background-color: var(--primary-background-plus-color);
}

#workflows .workflow img {
	width: 100%;
}

@media not (prefers-color-scheme: light) {
	#workflows .workflow img[src*="light"] {
		display: none;
	}
}

@media (prefers-color-scheme: light) {
	#workflows .workflow img[src*="dark"] {
		display: none;
	}
}

#workflows .workflow h3 {
	font-size: 1.8em;
	font-weight: bold;
	color: var(--brand-color);
}

#workflows .workflow-text p {
	font-size: 1.1em;
	line-height: 1.6;
	color: var(--text-color);
}

#workflows .workflow-image img {
	width: 100%;
	height: auto;
	border-radius: 1em;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* FINAL CTA SECTION */

#final-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3em;
	padding: 4em 2em;
	text-align: center;
}

#final-cta h2 {
	font-size: clamp(2em, 4vw, 3em);
	font-weight: bold;
}

#final-cta .cta {
	font-size: var(--big-fucking-text);
}

@media (width < 78em) {
	.workflow {
		grid-template-columns: 1fr;
		gap: 2em;
	}

	.workflow.reverse .workflow-text,
	.workflow.reverse .workflow-image {
		grid-order: unset;
	}

	.feature-grid {
		grid-template-columns: 1fr;
	}
}