.no-overflow {
	overflow: hidden;
	background-color: var(--bg);
	position: relative;
	z-index: 1;
}

.hero {
	margin: var(--vem-700) auto;
	flex-direction: column;
	will-change: transform;
	padding-inline: 2rem;
}

.hero__hidden {
	opacity: 0;
	position: absolute;
}

.hero__svg {
	display: none;
}

.hero__svg text {
	fill: var(--text);
	font-size: 52px;
	font-weight: 800;
	letter-spacing: -0.02ch;
}

.hero__svg textPath {
	font-family: var(--museo);
}

.hero__heading {
	max-width: min(50rem, 100%);
}

.hero__subtext {
	font-size: max(var(--vem-400), 24px);
	font-weight: 500;
	text-align: center;
	z-index: 1;
	max-width: 40ch;
}

.hero__subtext span {
	white-space: nowrap;
}

.CTA__parent {
	margin-inline: auto;
	width: max-content;
}

.CTA {
	font-size: max(var(--vem-500), 24px);
	font-weight: 600;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: end;
	gap: 0.4em;
	width: max-content;
	padding: 0.5em 1em 0.7em;
	border-radius: 5em;
	background: var(--acc-purple-300);
	box-shadow: 0 0.1em 0.4em var(--acc-purple-400),
		inset 0 -0.1em 0.3em -0.1em var(--acc-purple-500),
		inset 0 0.1em 0.2em var(--acc-purple-200);
	transition: scale 0.2s, translate 0.2s, box-shadow 0.2s, font-weight 0.2s;
}

.CTA__parent:hover .CTA,
.CTA:focus-visible {
	scale: 1.05;
	translate: 0 -0.2em;
	background: var(--acc-purple-400);
	font-weight: 700;
	box-shadow: 0 0.3em 0.5em -0.1em var(--acc-purple-400),
		inset 0 -0.3em 0.1em -0.2em var(--acc-purple-500),
		inset 0 0.1em 0.2em var(--acc-purple-300);
}

.CTA__svg {
	transform-origin: left;
	height: 0.7em;
	transition: scale 0.2s, translate 0.2s;
}

.CTA__parent:hover .CTA__svg {
	translate: 0.2em;
	scale: 1.1;
}

.CTA__svg path {
	stroke: var(--text);
}

.section-wrapper {
	position: relative;
	z-index: 1;
}

.overview {
	margin-block: 0;
}

.overview > P {
	padding-top: var(--vem-1000);
	text-align: center;
}

.overview__design {
	font-size: var(--vem-750);
	letter-spacing: 0.03ch;
	font-weight: 800;
	-webkit-text-stroke: 0.02em var(--grey-500);
	background: linear-gradient(var(--grey-500) 0 0) 0 0;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-size: 0% 200%;
	background-repeat: no-repeat;
	transition: background-size 2s ease-out;
}

.overview__design--filled {
	background-size: 100% 200%;
}

.overview__background {
	position: absolute;
	inset: calc(-6 * var(--vem)) calc(-2 * var(--side-padding)) 0;
	display: flex;
	flex-wrap: wrap;
	filter: blur(0.7rem);
	z-index: -10;
	--plan-height: 723.94px;
	pointer-events: none;
}

.overview__background > * {
	margin: 0 auto auto;
}

.overview__background svg g {
	will-change: transform;
	transition: transform 0.2s;
}

.overview__development {
	--delay: 800ms;
	max-width: 100%;
	background: var(--grey-500);
	margin-block: var(--vem-1050) var(--vem-800);
	padding: var(--vem-400) var(--vem-500) var(--vem);
	border-radius: var(--vem-500);
	box-shadow: 0 var(--vem) var(--vem-600) calc(-0.5 * var(--vem))
		var(--grey-500);
	transform-origin: bottom;
	will-change: transform;
	transition: scale var(--delay), translate var(--delay), transform 0.2s;
	transform-style: preserve-3d;
	transform: perspective(3000px) rotateX(var(--rotateY)) rotateY(var(--rotateX));
}

.overview__development * {
	transform-style: preserve-3d;
	transition: transform 1s;
}

.locked {
	transition: none !important;
	transform: none !important;
}

.development__buttons {
	display: flex;
	gap: var(--vem-75);
	padding: 0 0 var(--vem-200);
}

.development__buttons div {
	width: var(--vem-200);
	aspect-ratio: 1;
	background: var(--acc-red-500);
	border-radius: 50%;
	box-shadow: 0 var(--vem) var(--vem-600) calc(-0.5 * var(--vem)) #000;
	transition: transform 0.2s;
}

.development__buttons div:nth-of-type(2) {
	background: var(--acc-yellow-500);
}

.development__buttons div:nth-of-type(3) {
	background: var(--acc-green-500);
}

.development__buttons div:hover {
	transform: translateZ(50px) translateX(6px);
}

.development-code {
	max-width: 100%;
	--n: 121;
	--typing-speed: 35ms;
	--blinking-speed: 800ms;
	--delay: inherit;
	width: 100%;
	background: var(--grey-400);
	display: flex;
	justify-content: space-between;
	gap: var(--vem);
	border-radius: var(--vem-400);
	padding: var(--vem-400) var(--vem-500);
	box-shadow: 0 var(--vem) var(--vem-600) calc(-0.5 * var(--vem)) #000;
}

.overview__development--load .development__buttons {
	transform: translateZ(60px);
}

.overview__development--load .development-code {
	transform: translateZ(100px);
}

.overview__development--load .development-code > * {
	transform: translateZ(50px);
}

.development-code p,
.development-code .line {
	opacity: 0.3;
}

.development-code p,
.development-code span,
.development-code *:before {
	color: var(--white-100);
	font-family: "Roboto Mono", "Courier New", Courier, monospace !important;
	margin-block: 0.1em;
	font-size: var(--vem-400);
}

.line-nums {
	border-right: 2px solid
		color-mix(in oklab, var(--white-100) 30%, var(--grey-400));
	padding-right: var(--vem);
}

.line {
	border: 1px solid var(--white-100);
}

.text {
	display: flex;
	position: relative;
}

.code p {
	opacity: 0.5;
}

.text .line {
	margin-inline: 0 var(--vem-650);
	opacity: 0.8;
}

.text p {
	max-width: 71ch;
	max-height: 1.44em;
	overflow: hidden;
	margin: 0;
	opacity: 1;
	text-wrap: balance;
	width: fit-content;
}

.overview__development--load .text p {
	animation: s calc(var(--n) * var(--typing-speed) + var(--delay)) forwards
		linear;
}

.type {
	color: #0000 !important;
	background: linear-gradient(-90deg, var(--white-100) 2px, #0000 0) 3px 0,
		linear-gradient(var(--white-100) 0 0) 0 0;
	background-size: 0 200%;
	-webkit-background-clip: padding-box, text;
	background-clip: padding-box, text;
	background-repeat: no-repeat;
	line-height: 1.44;
}

.overview__development--load .type {
	animation: b var(--blinking-speed) infinite steps(1),
		t calc(var(--n) * var(--typing-speed)) var(--delay) steps(var(--n)) forwards;
}

@keyframes t {
	to {
		background-size: calc(var(--n) * 1ch) 200%;
	}
}
@keyframes b {
	50% {
		background-position: 0 -100%, 0 0;
	}
}

.type span:last-of-type {
	padding-right: 1ch;
}

.code__blue {
	color: var(--acc-blue-500) !important;
}

.type span {
	color: #0000;
}

.code .code__highlight {
	white-space: nowrap;
}

.code .code__highlight::before {
	content: "handwritten";
	position: absolute;
	translate: 0 -0.07em;
	font-weight: 500;
	line-height: 1.44;
	background: var(--grey-400);
	color: var(--acc-purple-400);
	opacity: 0;
	--x: 33;
}

.overview__development--load .code__highlight::before {
	animation: fade-in 0.5s calc(var(--delay) + var(--x) * var(--typing-speed))
		forwards;
}

.overview__development--load .code__highlight--rainbow::before {
	--x: 63;
	content: "unlimited freedom";
	animation: fade-in 0.5s calc(var(--delay) + var(--x) * var(--typing-speed))
			forwards,
		rainbow 3s linear infinite;
	white-space: nowrap;
}

@keyframes rainbow {
	from {
		filter: hue-rotate(0deg);
	}
	to {
		filter: hue-rotate(360deg);
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.overview__development--load .code__highlight--orange::before {
	--x: 76;
	content: "expert-level";
	filter: hue-rotate(130deg);
}

.overview__development--load .code__highlight--blue::before {
	--x: 105;
	content: "SEO";
	color: var(--acc-blue-400);
}

.development-code .line-2 {
	opacity: 0.8;
}

.overview__development--load .line-2 {
	animation: line-move-2 calc(var(--n) * var(--typing-speed) + var(--delay))
		forwards;
}

.overview__development--load .line-3 {
	animation: line-move-3 calc(var(--n) * var(--typing-speed) + var(--delay))
		forwards;
}
.overview__development--load .line-4 {
	animation: line-move-4 calc(var(--n) * var(--typing-speed) + var(--delay))
		forwards;
}

.overview__development--load .line-5 {
	animation: line-move-5 calc(var(--n) * var(--typing-speed) + var(--delay))
		forwards;
}
.overview__development--load .line-6 {
	animation: line-move-6 calc(var(--n) * var(--typing-speed) + var(--delay))
		forwards;
}

.overview__development--load .line-7 {
	animation: line-move-7 calc(var(--n) * var(--typing-speed) + var(--delay))
		forwards;
}

.line-5,
.line-6,
.line-7,
.line-8 {
	display: none;
}

.plans {
	box-sizing: content-box;
	margin-block: 0;
	align-items: stretch;
	gap: var(--vem-700) var(--vem-550);
	max-width: 100%;
	padding: calc(var(--side-padding) / 2) var(--vem-550);
	position: relative;
	z-index: -1;
}

.plans__background {
	position: absolute;
	inset: calc(-1 * var(--vem-1000));
	background: var(--gradient-300);
	z-index: -1;
	filter: blur(0.5rem);
}

.plans__text {
	flex-basis: 100%;
	text-align: center;
	margin: 0;
	font-size: var(--vem-500);
	text-wrap: balance;
}

.plans__text h2 {
	line-height: 1.3;
}

.plans__text h3 {
	font-weight: 600;
}

.plans__text strong {
	font-family: var(--museo);
}

.plans__card {
	flex: 1;
	--percent: 60%;
	--scale: 1.01;
	background: color-mix(in oklab, var(--bg) var(--percent), #0000);
	padding: var(--vem-925) var(--vem-500) var(--vem-550);
	font-size: var(--vem-300);
	border-radius: var(--vem-500);
	display: grid;
	transform-origin: bottom;
	transition: scale 0.2s cubic-bezier(0.5, 1, 0.5, 1),
		box-shadow 0.4s cubic-bezier(0.5, 1, 0.5, 1), translate 1s, border 0.2s;
	position: relative;
}

.plans__card:hover {
	scale: var(--scale);
	transition: scale 0.4s cubic-bezier(0.5, 2, 0.5, 1.5),
		box-shadow 0.4s cubic-bezier(0.5, 1, 0.5, 1), background 1s, translate 1s,
		border 0.2s;
	box-shadow: var(--vem) var(--vem-300) var(--vem-600) calc(-2 * var(--vem))
		var(--grey-50075);
}

.plans__card::before {
	position: absolute;
	inset: var(--vem-500) auto auto var(--vem-500);
	font-size: min(var(--vem), 14px);
	font-weight: 600;
	background: var(--acc-purple-200);
	padding: 0.5em 1em;
	border-radius: 50vw;
	transition: background 0.4s;
}

.plans__card--popular::before {
	content: "Most Popular!";
}
.plans__card--popular:hover::before {
	background: var(--acc-purple-300);
}

.plans__card--recommended::before {
	content: "Recommended!";
	background: var(--acc-green-400);
}

.plans__card--recommended:hover::before {
	background: var(--acc-green-500);
}

.plans__card--popular {
	--percent: 80%;
	--scale: 1.015;
}

.plans__card--recommended {
	--percent: 100%;
	--scale: 1.02;
	flex: 1.05;
	padding: var(--vem-900) var(--vem-500) var(--vem-500);
	border: 4px solid var(--acc-green-400);
}

.plans__card--recommended:hover {
	border: 4px solid var(--acc-green-500);
}

.plans__card h4 {
	font-size: var(--vem-550);
	white-space: nowrap;
}

.plans__card h5 {
	font-size: var(--vem-200);
	font-weight: 500;
	padding-bottom: var(--vem-200);
	white-space: nowrap;
}

.plans__card--recommended h4 {
	font-size: var(--vem-600);
}

.plans__card--recommended h5 {
	font-size: var(--vem-300);
}

.plans__card ul {
	padding: var(--vem) 0 var(--vem-200);
}

.plans__card li {
	padding-block: 0.2em;
	list-style: none;
	display: flex;
	align-items: start;
	gap: 0.4em;
}

.plans__card li svg {
	padding-top: 0.3em;
	flex: 0.8em 0 0;
}

.plans__card--popular li::marker {
	color: var(--acc-purple-500);
}

.plans__card--recommended li::marker {
	color: var(--acc-green-500);
}

.plans__card strong {
	font-weight: 600;
}

.plans__card--recommended strong {
	font-weight: 700;
}

.plans .small-text {
	font-size: var(--vem);
	text-align: center;
	opacity: 0.9;
}

.button {
	text-decoration: none;
	font-weight: 500;
	text-align: center;
	margin: var(--vem) auto 0;
	height: max-content;
	padding: 0.5em 1.5em;
	background: var(--acc-blue-400);
	border-radius: 5em;
	box-shadow: 0 0.1em 0.4em -0.05em var(--acc-blue-300),
		inset 0 -0.1em 0.3em -0.1em var(--acc-blue-500),
		inset 0 0.05em 0.1em var(--acc-blue-300);
	transition: scale 0.2s, box-shadow 0.2s, background 0.2s;
	transform-origin: bottom;
}

.button:hover,
.button:focus-visible {
	scale: 1.05;
	background: var(--acc-blue-400);
	box-shadow: 0 0.3em 0.5em -0.1em var(--acc-blue-300),
		inset 0 -0.3em 0.3em -0.2em var(--acc-blue-500),
		inset 0 0.1em 0.3em var(--acc-blue-300);
}

.plans__card--popular .button {
	background: var(--acc-purple-300);
	box-shadow: 0 0.1em 0.4em -0.05em var(--acc-purple-400),
		inset 0 -0.1em 0.3em -0.1em var(--acc-purple-500),
		inset 0 0.05em 0 var(--acc-purple-300);
}

.plans__card--popular .button:hover {
	background: var(--acc-purple-400);
	box-shadow: 0 0.3em 0.5em -0.1em var(--acc-purple-400),
		inset 0 -0.3em 0.1em -0.2em var(--acc-purple-500),
		inset 0 0.1em 0.2em var(--acc-purple-300);
}

.plans__card--recommended .button {
	font-weight: 600;
	background-color: var(--acc-green-400);
	box-shadow: 0 0.1em 0.4em -0.05em var(--acc-green-500),
		inset 0 -0.1em 0.3em -0.1em var(--acc-green-600),
		inset 0 0.05em 0 var(--acc-green-400);
}

.plans__card--recommended .button:hover {
	font-weight: 700;
	background-color: var(--acc-green-500);
	box-shadow: 0 0.3em 0.5em -0.1em var(--acc-green-500),
		inset 0 -0.3em 0.1em -0.2em var(--acc-green-600),
		inset 0 0.1em 0.2em var(--acc-green-400);
}

.small-text strong {
	font-weight: 600;
}

.plans__cta {
	display: grid;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	gap: var(--vem-500);
}

.plans__cta p {
	font-size: var(--vem-600);
	font-weight: 500;
	text-wrap: pretty;
}

.plans__buttons {
	display: flex;
	justify-content: center;
	align-items: start;
	gap: var(--vem-400);
}

.cta__button {
	font-size: var(--vem-700);
	font-weight: 600;
	background: color-mix(in oklab, var(--bg) 35%, #0000);
	padding: 0.25em 0.5em;
	border-radius: 0.2em;
	position: relative;
	text-decoration: none;
	transition: background 0.4s, scale 0.4s cubic-bezier(0.34, 2.5, 0.64, 1);
	display: flex;
	align-items: center;
	gap: 0.5ch;
}

.cta__button:hover {
	background: color-mix(in oklab, var(--bg) 70%, #0000);
	scale: 1.05;
}

.cta__button p {
	font-size: inherit;
	font-weight: inherit;
	font-family: var(--museo);
	transform: skew(-9deg);
	transition: transform 0.4s cubic-bezier(0.34, 2.5, 0.64, 1);
}

.cta__button:hover p {
	transform: skew(0deg);
}

.cta__button--secondary,
.cta__button--secondary:hover {
	background: none;
	line-height: 1.77;
	font-size: var(--vem-650);
	font-weight: 500;
	padding-block: 0.28em;
}

.cta__button::before {
	content: "";
	position: absolute;
	inset: auto 0.5em 0.5em auto;
	height: 0.08em;
	width: 0;
	background: var(--text);
	transform-origin: left;
	transition: width 0.5s;
}

.cta__button--secondary::before {
	inset: auto auto 0.5em 0.5em;
}

.cta__button:hover::before {
	width: calc(100% - 1em);
}

.more-info::after {
	content: "Free 15 min consultation";
	position: absolute;
	font-size: var(--vem-200);
	inset: auto 0 -2em;
	text-align: center;
	opacity: 0.8;
}

.more-info:hover::after {
	opacity: 1;
}

.plans__cta .small-text {
	margin-top: 1em;
	font-size: var(--vem-200);
	transition: all 0.4s;
}

.cta__button:hover + .small-text {
	opacity: 1;
	font-weight: 700;
}

.reveal {
	position: relative;
}

.portfolio-wrapper {
	margin-top: var(--vem-1050);
	position: sticky;
	bottom: 0;
	min-height: 100vh;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.portfolio {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	align-content: center;
	gap: var(--vem-500);
}

.portfolio h2 {
	font-size: var(--vem-900);
	line-height: 1;
	text-align: right;
	justify-self: center;
	padding-right: var(--vem-400);
}

.portfolio h2 span {
	font-size: var(--vem-600);
	display: block;
	font-weight: 600;
}

.portfolio__card {
	border-radius: var(--vem);
	display: grid;
	align-self: stretch;
	overflow: hidden;
	padding-top: var(--vem-25);
	box-shadow: var(--vem) var(--vem) var(--vem-550) calc(-1 * var(--vem-500))
		var(--grey-500);
	transition: transform 1s cubic-bezier(0.34, 2, 0.64, 1),
		translate 0.5s cubic-bezier(0, 0, 0.87, 0.5);
	transform: skew(-2deg);
	transform-origin: bottom;
}

.portfolio__card img {
	aspect-ratio: 1.5;
	object-fit: cover;
	object-position: top;
}

.portfolio__card:nth-of-type(4),
.portfolio__card:nth-of-type(5) {
	transform-origin: top;
}

.portfolio__card--miners {
	background: #fdfff4;
}

.portfolio__card--optimum {
	background: #f8faf8;
}

.portfolio__card--crwban {
	background: #20a3ce;
}

.portfolio p {
	padding: 1em;
	text-align: center;
	background: color-mix(in oklab, var(--bg), #0000);
	font-size: var(--vem);
}

.portfolio__card--cta {
	padding: 0;
	display: grid;
	background: var(--acc-blue-400);
}

.portfolio:has(.portfolio__card:hover) .portfolio__card {
	transform: scale(0.95) skew(-3deg);
}

.portfolio__card:hover {
	transform: scale(1.05) !important;
}

.portfolio__CTA {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--vem);
	text-decoration: none;
	color: var(--white-100);
	padding: 0.5em 1em;
	font-family: var(--museo);
	font-size: max(var(--vem-400), 24px);
}

.portfolio__CTA .CTA__svg path {
	stroke: var(--white-100);
}

/* .portfolio__CTA {
	background: var(--acc-blue-350);
	box-shadow: inset 0 -0.4em 0.4em var(--acc-blue-400),
		inset 0 0.4em 0.4em var(--acc-blue-300), 0 0.2em 0.4em var(--acc-blue-300);
	text-decoration: none;
	color: var(--white-100);
	padding: 0.5em 1em;
	font-family: var(--museo);
	font-size: max(var(--vem-400), 24px);
	border-radius: 50vw;
	margin-inline: auto 10px;
	transition: background 0.2s, box-shadow 0.2s, scale 0.2s;
}

.portfolio__CTA:hover {
	scale: 1.03;
	background: var(--acc-blue-400);
	box-shadow: inset 0 -0.4em 0.4em var(--acc-blue-500),
		inset 0 0.4em 0.4em var(--acc-blue-300), 0 0.4em 0.4em var(--acc-blue-400);
}*/

.process {
	margin-top: var(--vem-950);
	flex-direction: column;
	align-content: center;
	align-items: stretch;
}

.process__intro {
	max-width: min-content;
}

.process__heading {
	font-size: var(--vem-700);
	font-weight: 800;
	white-space: nowrap;
}

.process__heading span {
	font-weight: 400;
	font-family: var(--museo);
	letter-spacing: 0.02ch;
}

.process__intro p {
	font-size: var(--vem-400);
}

.step {
	margin-block: var(--vem-300);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vem-750);
}

.step__text {
	gap: 0 var(--vem-600);
	display: grid;
	grid-template-columns: auto auto;
}

.step__number {
	font-weight: 900;
	font-size: var(--vem-600);
	line-height: 1.32;
	grid-row: 2 / 4;
}

.step__heading {
	font-size: var(--vem-600);
	line-height: 1.3;
}

.step__icon {
	aspect-ratio: 1;
	height: calc(20 * var(--vem));
}

.step__subheading {
	grid-column: 2 / 3;
	font-size: var(--vem-400);
	font-weight: 600;
	position: relative;
}

.step__content {
	font-size: var(--vem-400);
	max-width: 40ch;
	text-wrap: pretty;
	line-height: 1.6;
}

@media (prefers-reduced-motion: no-preference) {
	header {
		translate: 0 -100%;
		animation: header-slide 1s 0.8s forwards;
	}

	/* .hero__svg text {
		opacity: 0;
		animation: show-text 1s 1s forwards;
	}

	.hero__svg text:last-of-type {
		animation: show-text 1s 1.5s forwards;
	} */

	@keyframes show-text {
		to {
			opacity: 1;
		}
	}

	/* .heading-container {
		transform: scale(0.9) translateX(-32%);
		animation: shift-focus 1s forwards;
	}

	@keyframes shift-focus {
		to {
			transform: none;
		}
	} */

	.heading--extra {
		inset: 0 auto 0 100%;
		animation: extra-shift 2s forwards;
		display: none;
	}

	@keyframes extra-shift {
		to {
			translate: 50% 0;
		}
	}

	.hero__subtext {
		translate: 0 100vh;
		animation: slide-up 0.75s forwards;
	}

	.CTA__parent {
		translate: 0 100vh;
		animation: slide-up 0.75s 0.8s forwards;
	}

	@keyframes slide-up {
		to {
			translate: 0;
		}
	}

	.overview__development--hide {
		scale: 0;
		translate: 0 5vh;
	}

	.overview__development--hide * {
		transform: none;
	}

	.overview__development--load {
		scale: 1 !important;
		translate: 0 !important;
	}

	.plans__text {
		translate: -100vw;
	}

	.plans--load .plans__text {
		translate: 0;
		transition: translate 1s;
	}

	.plans__card {
		translate: -100vw;
	}

	.plans--load .plans__card {
		translate: 0;
		transform: translateX(105%) rotate(-5deg);
		pointer-events: none;
		animation: spread-left 1s 0.5s forwards ease-in-out;
	}

	.plans--load .plans__card--popular {
		transform: translateX(0) rotate(-2.5deg);
		animation: straighten 0.7s 0.5s forwards ease-in;
	}

	.plans--load .plans__card--recommended {
		transform: translateX(-109%) rotate(0);
		animation: spread-right 1s 0.5s forwards ease-in-out;
	}

	@keyframes spread-left {
		70% {
			transform: translateX(-2%) rotate(-2deg);
			pointer-events: none;
		}
		to {
			transform: translateX(0%) rotate(0deg);
			pointer-events: auto;
		}
	}
	@keyframes straighten {
		99% {
			pointer-events: none;
		}
		to {
			transform: translateX(0%) rotate(0deg);
			pointer-events: auto;
		}
	}
	@keyframes spread-right {
		70% {
			transform: translateX(2%) rotate(2deg);
			pointer-events: none;
		}
		to {
			transform: translateX(0%) rotate(0deg);
			pointer-events: auto;
		}
	}

	.portfolio__card {
		translate: 0 100vh;
	}

	.portfolio__card:nth-of-type(2),
	.portfolio__card:nth-of-type(5) {
		translate: 0 -100vh;
	}

	.portfolio--load .portfolio__card {
		translate: 0;
	}

	.process > div {
		translate: 0 30vh;
		transition: translate 1s cubic-bezier(0.42, 1.57, 0.16, 0.94);
	}

	.process .part--load {
		translate: 0 0;
	}
}

@media (width < 770px) {
	.hero {
		max-width: max-content;
		min-width: 0;
		justify-content: center;
	}

	.hero .hero__subtext {
		font-size: min(var(--vem-600), max(3.4vw, 0.7rem));
	}

	.hero__heading {
		font-size: min(calc(23 * var(--vem)), max(30vw, 6rem));
	}

	.hero .CTA {
		font-size: max(calc(3vw + 0.5rem), 1.1rem);
		margin-block: var(--vem-600);
	}

	.overview {
		padding-inline: var(--vem-550);
	}

	.overview > p {
		text-align: center;
		min-width: 30ch;
	}

	.overview__design {
		font-size: var(--vem-600);
	}

	.overview__background {
		inset: calc(-6 * var(--vem)) calc(30vw - 6 * var(--side-padding)) 0;
	}

	.development-code {
		width: max-content;
		gap: var(--vem-500);
	}

	.development-code > .line {
		display: none;
	}

	.plans {
		flex-direction: column;
	}

	.plans__cta {
		text-align: center;
	}

	.plans__card {
		padding: var(--vem-700) var(--vem-600) var(--vem-700);
	}

	.plans__card--popular {
		border: 2px solid var(--acc-purple-300);
	}

	.plans__card--recommended {
		border: 4px solid var(--acc-green-500);
	}

	.plans__card--popular::before {
		background: var(--acc-purple-300);
	}

	.plans__card--recommended::before {
		background: var(--acc-green-500);
		inset: -3px -3px auto auto;
	}

	.plans__card::before {
		inset: -1px -1px auto auto;
		font-size: var(--vem-300);
		border-radius: 0 var(--vem-500) 0 var(--vem);
		padding: 0.5em 0.8em;
		z-index: -1;
	}

	.plans__card h4 {
		font-size: var(--vem-650);
	}

	.plans__card h5 {
		font-size: var(--vem-400);
	}

	.plans__card > p {
		font-size: var(--vem-500);
		margin-block: 0.8em;
	}

	.plans__card ul {
		font-size: var(--vem-500);
	}

	.plans__card .small-text {
		margin-block: var(--vem-400) 0.25em;
		font-size: var(--vem-300);
	}

	.plans__card .button {
		font-size: var(--vem-550);
	}

	.plans__card--recommended .button {
		background-color: var(--acc-green-500);
	}

	.portfolio {
		grid-template-columns: 1fr 1fr;
		padding-inline: var(--vem-500);
	}

	.portfolio h2 {
		grid-column: 1/-1;
		text-align: center;
		padding: 0 0 var(--vem-600);
	}

	.blocker {
		display: none;
	}

	.portfolio__card {
		transform: none;
	}

	.portfolio:has(.portfolio__card:hover) .portfolio__card {
		transform: none;
	}

	.portfolio__card:hover {
		transform: none !important;
	}

	.process {
		max-width: calc(70 * var(--vem));
		padding-inline: var(--vem-600);
		gap: var(--vem-750);
	}

	.process__intro {
		max-width: max-content;
		text-align: center;
	}

	.process__intro p {
		text-wrap: pretty;
	}

	.process__heading {
		white-space: normal;
		line-height: 1.2;
		padding-bottom: 0.5em;
	}

	.process__heading span {
		font-weight: 500;
	}

	.step {
		gap: var(--vem-550);
		margin-block: var(--vem-500);
	}

	.step__icon {
		height: auto;
		width: max(20vw, 6rem);
		margin-inline: var(--vem-600);
	}

	.step__text {
		display: block;
	}

	.step__number {
		display: none;
	}
}

@media (prefers-reduced-motion: no-preference) and (width < 770px) {
	.overview__development--hide {
		scale: 1;
		translate: 0 175%;
	}

	.plans__text {
		translate: -100vw;
	}

	.plans--load .plans__text {
		translate: 0;
		transition: translate 1s;
	}

	.plans__card {
		translate: -100vw;
	}

	.plans--load .plans__card {
		translate: 0;
		pointer-events: auto;
		transform: none;
		animation: none;
		transition: scale 0.2s cubic-bezier(0.5, 1, 0.5, 1),
			box-shadow 0.4s cubic-bezier(0.5, 1, 0.5, 1), translate 1s 0.2s,
			outline 0.4s;
	}

	.plans--load .plans__card--popular {
		transition: scale 0.2s cubic-bezier(0.5, 1, 0.5, 1),
			box-shadow 0.4s cubic-bezier(0.5, 1, 0.5, 1), translate 1s 0.4s,
			outline 0.4s;
	}

	.plans--load .plans__card--recommended {
		transition: scale 0.2s cubic-bezier(0.5, 1, 0.5, 1),
			box-shadow 0.4s cubic-bezier(0.5, 1, 0.5, 1), translate 1s 0.6s,
			outline 0.4s;
	}

	.portfolio__card:nth-of-type(1),
	.portfolio__card:nth-of-type(2) {
		translate: 100vh;
	}

	.portfolio__card:nth-of-type(4),
	.portfolio__card:nth-of-type(5) {
		translate: -100vh;
	}

	.portfolio--load .portfolio__card {
		translate: 0;
	}
}