:root {
	--gj-blue: #293994;
	--gj-blue-light: #4453bd;
	--gj-gold: #d8ad4c;
	--gj-gold-light: #f5dc96;
	--gj-cream: #f9ecc4;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	min-width: 320px;
	min-height: 100%;
	margin: 0;
}

body {
	background: var(--gj-blue);
}

.hero {
	position: relative;
	isolation: isolate;
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	background-color: var(--gj-blue);
	background-image:
		radial-gradient(
			ellipse at 54% 48%,
			rgba(83, 98, 208, 0.72) 0,
			rgba(49, 63, 164, 0.34) 34%,
			rgba(30, 43, 126, 0.1) 72%
		),
		radial-gradient(
			circle,
			rgba(255, 255, 255, 0.13) 0 0.7px,
			transparent 0.85px
		);
	background-size: auto, 7px 7px;
}

.hero__gold,
.hero__cream {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.hero__gold {
	z-index: -2;
	clip-path: polygon(92.5% 0, 100% 0, 100% 100%, 65.5% 100%);
	background:
		radial-gradient(
			circle at 79% 32%,
			rgba(255, 239, 189, 0.92) 0,
			rgba(246, 219, 146, 0.86) 23%,
			rgba(224, 187, 100, 0.88) 58%,
			rgba(201, 151, 50, 0.95) 100%
		),
		linear-gradient(125deg, var(--gj-gold) 0%, var(--gj-gold-light) 100%);
}

.hero__gold::after {
	position: absolute;
	inset: 0;
	content: "";
	opacity: 0.18;
	background-image:
		linear-gradient(100deg, transparent 0 54%, rgba(255, 255, 255, 0.4) 75%, transparent 100%),
		radial-gradient(circle, rgba(103, 75, 23, 0.2) 0 0.45px, transparent 0.65px);
	background-size: auto, 5px 5px;
}

.hero__cream {
	z-index: -1;
	clip-path: polygon(84% 70%, 100% 60.5%, 100% 100%, 76.5% 100%);
	background:
		linear-gradient(105deg, rgba(255, 255, 255, 0.12), transparent 45%),
		var(--gj-cream);
}

.hero__header,
.hero__canvas {
	width: min(100% - 48px, 1320px);
	margin-inline: auto;
}

.hero__header {
	position: relative;
	z-index: 1;
	padding-top: clamp(16px, 2vw, 30px);
}

.hero__logo {
	display: block;
	width: clamp(190px, 12.4vw, 238px);
	height: auto;
}

.hero__canvas {
	min-height: calc(100svh - 160px);
}

.campaign-content {
	position: relative;
	z-index: 1;
	width: min(100%, 780px);
	margin: clamp(36px, 5vw, 82px) auto 80px;
	text-align: center;
}

.campaign-content h1 {
	margin: 0 auto 18px;
	color: #ffffff;
	font-family: "DM Serif Display", Georgia, serif;
	font-size: 64px;
	font-weight: 400;
	line-height: 0.98;
	text-wrap: balance;
}

.campaign-intro {
	max-width: 720px;
	margin: 0 auto 38px;
	color: #ffffff;
	font-family: "Inter", Arial, sans-serif;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.55;
	text-wrap: balance;
}

.campaign-intro strong {
	font-weight: 700;
}

.no-wrap {
	white-space: nowrap;
}

.campaign-form,
.campaign-image-block {
	width: min(100%, 620px);
	margin-inline: auto;
}

.campaign-form {
	color: #0e0e0e;
	font-family: "Inter", Arial, sans-serif;
	text-align: left;
}

.form-column {
	position: relative;
}

.form-card {
	position: relative;
	z-index: 2;
	padding: 40px;
	overflow: hidden;
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 12px 30px rgba(19, 27, 81, 0.24);
}

.form-prize {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 61px;
	margin: -28px -28px 28px;
	overflow: hidden;
	background: #df0891;
	border-radius: 12px;
}

.form-prize-check {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	fill: none;
	stroke: #ffffff;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.form-prize-title {
	margin: 0;
	padding: 0;
	color: #ffffff;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}

.form-email-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.55;
}

.form-field {
	position: relative;
}

.form-field input {
	display: block;
	width: 100%;
	height: 48px;
	margin-top: 10px;
	padding: 0 16px;
	color: #111111;
	font: inherit;
	font-size: 16px;
	line-height: 48px;
	background: #ffffff;
	border: 1px solid #999999;
	border-radius: 24px;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	appearance: none;
}

.form-field input:focus {
	border-color: #293994;
	box-shadow: 0 0 0 3px rgba(41, 57, 148, 0.14);
}

.field-label-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.form-checkbox {
	position: relative;
	margin-top: 24px;
}

.form-checkbox input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.form-checkbox label {
	position: relative;
	display: block;
	min-height: 22px;
	padding-left: 32px;
	font-size: 14px;
	line-height: 1.45;
	cursor: pointer;
}

.form-checkbox label::before {
	position: absolute;
	top: 1px;
	left: 0;
	width: 20px;
	height: 20px;
	background: #ffffff;
	border: 2px solid #293994;
	border-radius: 4px;
	content: "";
}

.form-checkbox label::after {
	position: absolute;
	top: 4px;
	left: 7px;
	width: 6px;
	height: 11px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	content: "";
	opacity: 0;
	transform: rotate(45deg);
}

.form-checkbox input:checked + label::before {
	background: #293994;
}

.form-checkbox input:checked + label::after {
	opacity: 1;
}

.form-checkbox input:focus-visible + label::before {
	box-shadow: 0 0 0 3px rgba(41, 57, 148, 0.18);
}

.errorbox {
	width: 100%;
}

.campaign-form .errorbox {
	margin: 0;
	padding: 0;
}

.campaign-form .errorbox li.error,
.campaign-form .errorbox label.error,
.campaign-form .errorbox .error {
	display: block;
	margin: 8px 0 0;
	padding: 0;
	color: #eb8283;
	font-family: "Inter", Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	list-style: none;
	text-align: left;
}

.campaign-form .form-field input.error {
	border-color: #eb8283;
}

.campaign-form .form-field input.error + label {
	color: #eb8283;
}

.campaign-form .errormachtiging {
	padding-left: 32px;
}

.form-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-top: 28px;
	padding: 12px 30px 14px;
	color: #1c2692;
	font: inherit;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	background: #fcd950;
	border: 0;
	border-radius: 50px;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.form-submit img {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
}

.form-submit:hover {
	color: #1c2692;
	background: #f4cb26;
}

.form-submit:active {
	transform: scale(0.98);
}

.campaign-image-block {
	margin-bottom: 32px;
	overflow: hidden;
	border-radius: 20px;
	box-shadow: 0 12px 24px rgba(39, 49, 106, 0.12);
}

.campaign-image-block img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.campaign-image-block--closing {
	margin-bottom: 0;
}

.campaign-closing {
	margin-top: 38px;
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.hero {
		background-image:
			radial-gradient(
				ellipse at 38% 42%,
				rgba(83, 98, 208, 0.62) 0,
				rgba(38, 51, 145, 0.16) 66%
			),
			radial-gradient(
				circle,
				rgba(255, 255, 255, 0.13) 0 0.7px,
				transparent 0.85px
			);
		background-size: auto, 7px 7px;
	}

	.hero__gold {
		clip-path: polygon(100% 0, 100% 0, 100% 100%, 48% 100%);
	}

	.hero__cream {
		clip-path: polygon(82% 72%, 100% 66%, 100% 100%, 68% 100%);
	}

	.hero__header,
	.hero__canvas {
		width: min(100% - 36px, 1320px);
	}

	.hero__header {
		padding-top: 14px;
	}

	.hero__logo {
		width: 174px;
	}

	.campaign-content {
		margin-top: 30px;
		margin-bottom: 48px;
	}

	.form-card {
		padding: 25px;
		border-radius: 16px;
	}

	.form-prize {
		margin: -13px -13px 24px;
	}

	.form-prize-title {
		font-size: 18px;
	}

}

@media (max-width: 1564px) {
	.campaign-content h1 {
		max-width: 600px;
	}
}

@media (max-width: 970px) {
	.campaign-intro {
		max-width: 620px;
	}
}

@media (min-width: 971px) {
	.hero__header {
		padding-top: 30px;
	}

	.hero__logo {
		width: 238px;
	}

	.campaign-content {
		margin-top: 82px;
		transform: translateY(-150px);
	}
}

@media (max-width: 470px) {
	.hero__gold {
		clip-path: polygon(100% 0, 100% 0, 100% 100%, 78% 100%);
	}

	.hero__cream {
		clip-path: polygon(100% 72%, 100% 66%, 100% 100%, 98% 100%);
	}

	.campaign-content h1 {
		font-size: 52px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}