:root {
	--gh-hero-navy: #152653;
	--gh-hero-pink: #df5f84;
	--gh-hero-pink-dark: #ca4f76;
	--gh-hero-green: #7dba43;
	--gh-hero-green-dark: #5f982e;
	--gh-hero-blue: #2f7de1;
	--gh-hero-yellow: #ffc84d;
	--gh-hero-orange: #f2692c;
	--gh-hero-purple: #8b55b7;
	--gh-hero-white: #fffdf7;
}

.gh-animated-hero-body {
	margin: 0;
	background: var(--gh-hero-white);
}

.gh-animated-hero-page,
.gh-animated-hero-page * {
	box-sizing: border-box;
}

.gh-animated-hero-page {
	min-height: 100vh;
	overflow: hidden;
	color: var(--gh-hero-navy);
	font-family: "Nunito", Arial, sans-serif;
}

.gh-animated-hero {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	isolation: isolate;
	background: #c6edff;
}

.gh-animated-hero__backdrop,
.gh-animated-hero__wash {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.gh-animated-hero__backdrop {
	z-index: -5;
	background-image: var(--gh-animated-hero-bg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transform: none;
	animation: ghAnimatedHeroBackdrop 22s ease-in-out infinite alternate;
}

.gh-animated-hero__wash {
	z-index: -4;
	background:
		linear-gradient(90deg, rgba(255, 253, 247, 0.92) 0%, rgba(255, 253, 247, 0.74) 34%, rgba(255, 253, 247, 0.34) 57%, rgba(255, 253, 247, 0.06) 79%),
		linear-gradient(180deg, rgba(255, 250, 232, 0.14) 0%, rgba(255, 250, 232, 0.36) 100%);
}

.gh-animated-hero::before,
.gh-animated-hero::after {
	position: absolute;
	z-index: -2;
	content: "";
	pointer-events: none;
}

.gh-animated-hero::before {
	right: -12vw;
	bottom: -21vh;
	width: 60vw;
	height: 35vh;
	border-radius: 54% 46% 0 0;
	background: linear-gradient(135deg, rgba(125, 186, 67, 0.92), rgba(80, 145, 42, 0.9));
}

.gh-animated-hero::after {
	right: 31vw;
	bottom: -20vh;
	width: 52vw;
	height: 30vh;
	border-radius: 50% 50% 0 0;
	background: rgba(255, 253, 247, 0.38);
}

.gh-animated-hero__inner {
	position: relative;
	z-index: 3;
	display: grid;
	width: min(1540px, calc(100% - 112px));
	min-height: calc(100vh - 118px);
	margin-inline: auto;
	grid-template-columns: minmax(520px, 0.92fr) minmax(620px, 1.08fr);
	gap: clamp(34px, 5vw, 96px);
	align-items: center;
	padding: clamp(24px, 4vw, 52px) 0 200px;
}

.gh-animated-hero__copy {
	position: relative;
	z-index: 8;
	max-width: 700px;
	padding-left: clamp(10px, 2vw, 26px);
	animation: ghAnimatedHeroIntro 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gh-animated-hero__logo {
	display: block;
	width: min(140px, 30vw);
	max-height: 94px;
	object-fit: contain;
	object-position: left center;
	margin: 0 0 22px 6px;
	filter: drop-shadow(0 10px 18px rgba(21, 38, 83, 0.12));
}

.gh-animated-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	margin: 0 0 24px;
	padding: 0 21px;
	border: 2px solid rgba(125, 186, 67, 0.26);
	border-radius: 999px;
	background: rgba(255, 253, 247, 0.88);
	color: var(--gh-hero-green-dark);
	font-family: "Fredoka", Arial, sans-serif;
	font-size: 0.98rem;
	font-weight: 700;
	letter-spacing: 0;
	box-shadow: 0 14px 28px rgba(21, 38, 83, 0.08);
}

.gh-animated-hero__title {
	max-width: 18ch;
	margin: 0;
	color: var(--gh-hero-navy);
	font-family: "Fredoka", Arial, sans-serif;
	font-size: clamp(4rem, 6vw, 6.5rem);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 0.9;
	text-wrap: balance;
	text-shadow:
		0 5px 0 rgba(255, 255, 255, 0.78),
		0 18px 36px rgba(21, 38, 83, 0.13);
}

.gh-animated-hero__title span {
	display: block;
	max-width: 28ch;
	margin-top: 24px;
	color: var(--gh-hero-pink);
	font-size: clamp(1.8rem, 2.6vw, 2.85rem);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.12;
	text-wrap: balance;
	text-shadow: none;
}

.gh-animated-hero__text {
	max-width: 40rem;
	margin: 24px 0 0;
	color: rgba(21, 38, 83, 0.88);
	font-size: clamp(1.08rem, 1.2vw, 1.22rem);
	font-weight: 800;
	line-height: 1.68;
}

.gh-animated-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 32px;
}

.gh-animated-hero__button {
	display: inline-flex;
	min-width: 150px;
	min-height: 60px;
	align-items: center;
	justify-content: center;
	padding: 0 28px;
	border-radius: 999px;
	color: #fff;
	font-family: "Fredoka", Arial, sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 18px 34px rgba(21, 38, 83, 0.16);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.gh-animated-hero__button:hover,
.gh-animated-hero__button:focus-visible {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 24px 40px rgba(21, 38, 83, 0.2);
}

.gh-animated-hero__button--primary {
	background: linear-gradient(135deg, #e47194, var(--gh-hero-pink-dark));
}

.gh-animated-hero__button--secondary {
	background: linear-gradient(135deg, #8bcf35, var(--gh-hero-green-dark));
}

.gh-animated-hero__stage {
	position: relative;
	z-index: 4;
	min-height: min(72vh, 760px);
	align-self: end;
}

.gh-animated-hero__stage::before {
	position: absolute;
	right: 2%;
	bottom: 0;
	left: 5%;
	height: 15%;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(50, 80, 40, 0.18), rgba(50, 80, 40, 0));
	content: "";
	filter: blur(2px);
}

.gh-animated-hero__video {
	position: absolute;
	overflow: visible;
	background: transparent;
	pointer-events: none;
}

.gh-animated-hero__video video,
.gh-animated-hero__video img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: transparent;
	filter: saturate(1.04) drop-shadow(0 24px 24px rgba(21, 38, 83, 0.16));
}

.gh-animated-hero__video--drawing {
	left: -3%;
	bottom: -5%;
	z-index: 2;
	width: 78%;
	aspect-ratio: 1.28 / 1;
	animation: ghAnimatedHeroFloatLarge 7.4s ease-in-out infinite;
}

.gh-animated-hero__video--blocks {
	right: 6%;
	top: 10%;
	z-index: 3;
	width: 56%;
	aspect-ratio: 1 / 1;
	animation: ghAnimatedHeroFloatSmall 6.8s ease-in-out infinite;
	animation-delay: -1.8s;
}

.gh-animated-hero__giphy {
	position: absolute;
	right: 2%;
	bottom: 8%;
	z-index: 3;
	width: min(28vw, 320px);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 26px;
	box-shadow: 0 18px 34px rgba(21, 38, 83, 0.14);
	animation: ghAnimatedHeroFloatSmall 6.8s ease-in-out infinite;
	animation-delay: -1.8s;
}

.gh-animated-hero__giphy-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
}

.gh-animated-hero__bubble,
.gh-animated-hero__shape {
	position: absolute;
	pointer-events: none;
}

.gh-animated-hero__bubble {
	z-index: 1;
	border: 3px solid rgba(168, 215, 232, 0.48);
	border-radius: 999px;
	background: rgba(255, 253, 247, 0.58);
	box-shadow: 0 12px 26px rgba(21, 38, 83, 0.08);
	animation: ghAnimatedHeroDrift 8s ease-in-out infinite;
}

.gh-animated-hero__bubble--one {
	top: 21%;
	left: 12%;
	width: 78px;
	height: 78px;
}

.gh-animated-hero__bubble--two {
	right: 26%;
	top: 2%;
	width: 72px;
	height: 72px;
	animation-delay: -2.2s;
}

.gh-animated-hero__bubble--three {
	right: 4%;
	top: 27%;
	width: 54px;
	height: 54px;
	animation-delay: -4.1s;
}

.gh-animated-hero__shape {
	z-index: 2;
	animation: ghAnimatedHeroDrift 7s ease-in-out infinite;
}

.gh-animated-hero__shape--sun {
	top: 6%;
	left: 53%;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background:
		radial-gradient(circle, var(--gh-hero-yellow) 0 48%, transparent 49%),
		conic-gradient(from 0deg, transparent 0 12deg, #f59b2f 12deg 19deg, transparent 19deg 45deg, #f59b2f 45deg 52deg, transparent 52deg 78deg, #f59b2f 78deg 85deg, transparent 85deg 111deg, #f59b2f 111deg 118deg, transparent 118deg 360deg);
}

.gh-animated-hero__shape--heart {
	right: 6%;
	top: 42%;
	width: 60px;
	height: 60px;
	color: var(--gh-hero-pink);
	animation-delay: -2.8s;
}

.gh-animated-hero__shape--heart::before {
	position: absolute;
	content: "\2665";
	font-family: Arial, sans-serif;
	font-size: 60px;
	line-height: 1;
	text-shadow: 0 12px 20px rgba(21, 38, 83, 0.12);
}

.gh-animated-hero__shape--star {
	left: 4%;
	bottom: 18%;
	width: 72px;
	height: 72px;
	background: var(--gh-hero-yellow);
	clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 92%, 50% 70%, 21% 92%, 32% 56%, 2% 35%, 39% 35%);
	animation-delay: -1.4s;
}

.gh-animated-hero__feature-rail {
	position: absolute;
	right: 50%;
	bottom: 26px;
	z-index: 8;
	display: grid;
	width: min(1160px, calc(100% - 112px));
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	padding: 22px 28px;
	border: 1px solid rgba(21, 38, 83, 0.08);
	border-radius: 28px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 22px 52px rgba(21, 38, 83, 0.13);
	transform: translateX(50%);
	backdrop-filter: blur(14px);
}

.gh-animated-hero__feature {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 16px;
	align-items: center;
	min-height: 76px;
	padding: 0 22px;
	border-right: 1px solid rgba(21, 38, 83, 0.12);
}

.gh-animated-hero__feature:last-child {
	border-right: 0;
}

.gh-animated-hero__feature-icon {
	position: relative;
	display: grid;
	width: 58px;
	height: 58px;
	place-items: center;
	border-radius: 50%;
	background: var(--feature-color, var(--gh-hero-blue));
	box-shadow: 0 12px 22px rgba(21, 38, 83, 0.12);
	color: #fff;
}

.gh-animated-hero__feature--blue {
	--feature-color: var(--gh-hero-blue);
}

.gh-animated-hero__feature--green {
	--feature-color: var(--gh-hero-green);
}

.gh-animated-hero__feature--orange {
	--feature-color: var(--gh-hero-orange);
}

.gh-animated-hero__feature--purple {
	--feature-color: var(--gh-hero-purple);
}

.gh-animated-hero__feature-icon::before,
.gh-animated-hero__feature-icon::after {
	position: absolute;
	content: "";
}

.gh-animated-hero__feature-icon--group::before {
	width: 25px;
	height: 19px;
	border: 4px solid currentColor;
	border-radius: 14px 14px 7px 7px;
}

.gh-animated-hero__feature-icon--group::after {
	top: 14px;
	width: 13px;
	height: 13px;
	border: 4px solid currentColor;
	border-radius: 50%;
	background: var(--feature-color);
	box-shadow: -15px 8px 0 -2px var(--feature-color), -15px 8px 0 2px currentColor, 15px 8px 0 -2px var(--feature-color), 15px 8px 0 2px currentColor;
}

.gh-animated-hero__feature-icon--clock::before {
	width: 28px;
	height: 28px;
	border: 4px solid currentColor;
	border-radius: 50%;
}

.gh-animated-hero__feature-icon--clock::after {
	width: 13px;
	height: 16px;
	border-right: 4px solid currentColor;
	border-bottom: 4px solid currentColor;
	transform: translate(2px, -2px);
}

.gh-animated-hero__feature-icon--heart::before {
	content: "\2665";
	font-family: Arial, sans-serif;
	font-size: 29px;
	line-height: 1;
}

.gh-animated-hero__feature-icon--shield::before {
	width: 28px;
	height: 33px;
	border: 4px solid currentColor;
	border-radius: 16px 16px 18px 18px;
	clip-path: polygon(50% 0, 92% 18%, 84% 72%, 50% 100%, 16% 72%, 8% 18%);
}

.gh-animated-hero__feature-copy {
	display: grid;
	gap: 5px;
}

.gh-animated-hero__feature-copy strong {
	color: var(--gh-hero-navy);
	font-family: "Fredoka", Arial, sans-serif;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.15;
}

.gh-animated-hero__feature-copy small {
	color: rgba(21, 38, 83, 0.78);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.35;
}

@keyframes ghAnimatedHeroBackdrop {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-0.8%, 0, 0);
	}
}

@keyframes ghAnimatedHeroIntro {
	from {
		opacity: 0;
		transform: translateY(26px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ghAnimatedHeroFloatLarge {

	0%,
	100% {
		transform: translateY(0) rotate(-0.6deg);
	}

	50% {
		transform: translateY(-12px) rotate(0.6deg);
	}
}

@keyframes ghAnimatedHeroFloatSmall {

	0%,
	100% {
		transform: translateY(0) rotate(1deg);
	}

	50% {
		transform: translateY(13px) rotate(-0.5deg);
	}
}

@keyframes ghAnimatedHeroDrift {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-12px);
	}
}

@media (prefers-reduced-motion: reduce) {

	.gh-animated-hero__backdrop,
	.gh-animated-hero__copy,
	.gh-animated-hero__video,
	.gh-animated-hero__bubble,
	.gh-animated-hero__shape {
		animation: none;
	}
}

@media (max-width: 1180px) {
	.gh-animated-hero__inner {
		width: min(100% - 52px, 1540px);
		grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.1fr);
		padding-bottom: 250px;
	}

	.gh-animated-hero__copy {
		max-width: 620px;
		padding-left: 0;
	}

	.gh-animated-hero__title {
		font-size: clamp(3.55rem, 7.8vw, 5.7rem);
	}

	.gh-animated-hero__stage {
		min-height: 600px;
	}

	.gh-animated-hero__video--drawing {
		left: -2%;
		bottom: -4%;
		width: 76%;
	}

	.gh-animated-hero__video--blocks {
		right: 7%;
		top: 12%;
		width: 54%;
	}

	.gh-animated-hero__giphy {
		width: min(32vw, 280px);
	}

	.gh-animated-hero__feature-rail {
		width: min(100% - 52px, 960px);
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 18px 22px;
	}

	.gh-animated-hero__feature:nth-child(2) {
		border-right: 0;
	}

	.gh-animated-hero__feature:nth-child(n+3) {
		padding-top: 16px;
		border-top: 1px solid rgba(21, 38, 83, 0.12);
	}
}

@media (max-width: 860px) {
	.gh-animated-hero {
		min-height: auto;
	}

	.gh-animated-hero__backdrop {
		background-size: cover;
	}

	.gh-animated-hero__wash {
		background:
			linear-gradient(180deg, rgba(255, 253, 247, 0.94) 0%, rgba(255, 253, 247, 0.78) 44%, rgba(255, 253, 247, 0.28) 100%),
			linear-gradient(90deg, rgba(255, 253, 247, 0.78), rgba(255, 253, 247, 0.08));
	}

	.gh-animated-hero__inner {
		grid-template-columns: 1fr;
		min-height: auto;
		gap: 12px;
		padding: 24px 0 0;
	}

	.gh-animated-hero__copy {
		max-width: 620px;
	}

	.gh-animated-hero__title {
		max-width: 16ch;
		font-size: clamp(3rem, 13vw, 4.8rem);
		line-height: 0.92;
	}

	.gh-animated-hero__title span {
		max-width: 24ch;
		margin-top: 16px;
		font-size: clamp(1.45rem, 5.6vw, 2.1rem);
		line-height: 1.08;
	}

	.gh-animated-hero__stage {
		display: none !important;
	}

	.gh-animated-hero__video--drawing,
	.gh-animated-hero__video--blocks {
		position: relative !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		animation: none !important;
	}

	.gh-animated-hero__video--drawing {
		width: 65% !important;
		max-width: 320px;
		margin-right: -14%;
		z-index: 2;
	}

	.gh-animated-hero__video--blocks {
		width: 52% !important;
		max-width: 250px;
		z-index: 3;
	}

	.gh-animated-hero__giphy {
		right: 6%;
		bottom: 9%;
		width: min(34vw, 220px);
	}

	.gh-animated-hero__shape--sun {
		top: 5%;
		right: 12%;
		left: auto;
		width: 62px;
		height: 62px;
	}

	.gh-animated-hero__shape--heart {
		top: auto;
		right: 7%;
		bottom: 20%;
	}

	.gh-animated-hero__shape--star,
	.gh-animated-hero__bubble--three {
		display: none;
	}

	.gh-animated-hero__feature-rail {
		position: relative;
		right: auto;
		bottom: auto;
		width: min(100% - 28px, 720px);
		margin: 24px auto 26px;
		transform: none;
	}
}

@media (max-width: 640px) {
	.gh-animated-hero {
		padding-bottom: calc(88px + env(safe-area-inset-bottom));
	}

	.gh-animated-hero__inner {
		width: min(100% - 28px, 1390px);
		padding-top: 22px;
		padding-bottom: 0;
	}

	.gh-animated-hero__logo {
		width: min(122px, 40vw);
		margin-bottom: 10px;
	}

	.gh-animated-hero__eyebrow {
		min-height: 36px;
		margin-bottom: 14px;
		padding: 0 14px;
		font-size: 0.82rem;
	}

	.gh-animated-hero__title {
		max-width: 14ch;
		font-size: clamp(2.45rem, 12vw, 3.55rem);
		line-height: 0.93;
		text-shadow: 0 4px 0 rgba(255, 255, 255, 0.78), 0 14px 28px rgba(21, 38, 83, 0.12);
	}

	.gh-animated-hero__title span {
		max-width: 22ch;
		margin-top: 14px;
		font-size: clamp(1.28rem, 5.8vw, 1.72rem);
		line-height: 1.08;
	}

	.gh-animated-hero__text {
		max-width: 23rem;
		margin-top: 12px;
		font-size: clamp(0.92rem, 3.6vw, 1rem);
		line-height: 1.48;
	}

	.gh-animated-hero__actions {
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
		width: 100%;
		margin-top: 16px;
	}

	.gh-animated-hero__button {
		min-height: 48px;
		font-size: 0.98rem;
	}

	.gh-animated-hero__stage {
		gap: 0;
		padding: 8px 0;
		margin-top: 6px;
		min-height: auto;
	}

	.gh-animated-hero__video--drawing {
		width: 68% !important;
		max-width: 260px;
		margin-right: -18%;
	}

	.gh-animated-hero__video--blocks {
		width: 54% !important;
		max-width: 200px;
	}

	.gh-animated-hero__giphy {
		right: 2%;
		bottom: 18%;
		width: 34%;
		border-radius: 18px;
	}

	.gh-animated-hero__bubble {
		display: none;
	}

	.gh-animated-hero__feature-rail {
		width: min(100% - 20px, 460px);
		grid-template-columns: 1fr;
		margin: 24px auto 0;
		padding: 8px 14px;
		border-radius: 20px;
	}

	.gh-animated-hero__feature,
	.gh-animated-hero__feature:nth-child(n+3) {
		grid-template-columns: 50px 1fr;
		min-height: 54px;
		gap: 12px;
		padding: 9px 0;
		border-right: 0;
		border-top: 1px solid rgba(21, 38, 83, 0.1);
	}

	.gh-animated-hero__feature:first-child {
		border-top: 0;
	}

	.gh-animated-hero__feature-icon {
		width: 44px;
		height: 44px;
	}

	.gh-animated-hero__feature-copy strong {
		font-size: 0.9rem;
	}

	.gh-animated-hero__feature-copy small {
		font-size: 0.76rem;
		padding-right: 90px;
	}
}

@media (max-width: 420px) {
	.gh-animated-hero__title {
		max-width: 12ch;
		font-size: clamp(2.3rem, 11.5vw, 3.15rem);
	}

	.gh-animated-hero__title span {
		max-width: 20ch;
		font-size: clamp(1.22rem, 5.6vw, 1.52rem);
	}

	.gh-animated-hero__video--drawing {
		width: 72% !important;
		max-width: 220px;
		margin-right: -22%;
	}

	.gh-animated-hero__video--blocks {
		width: 56% !important;
		max-width: 170px;
	}
}