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

:root {
	--dn-night: #101a2c;
	--dn-lime: #c9f36b;
	--dn-lime-deep: #9dcb3d;
	--dn-sky: #6ed8d1;
	--dn-paper: #f7f8f3;
	--dn-white: #fff;
	--dn-ink: #182033;
	--dn-muted: #657084;
	--dn-line: #dce2dd;
	--dn-ui: Inter, "Segoe UI", Arial, sans-serif;
	--dn-display: "Trebuchet MS", Inter, "Segoe UI", sans-serif;
}

body {
	min-height: 100vh;
	color: var(--dn-ink);
	background:
		linear-gradient(90deg, rgba(16, 26, 44, 0.035) 1px, transparent 1px) 0 0 /
			34px 34px,
		var(--dn-paper);
	font-family: var(--dn-ui);
}

.dnv-site-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	padding: 22px max(22px, calc((100vw - 1180px) / 2));
	background: var(--dn-night);
	border-bottom: 4px solid var(--dn-lime);
}
.dnv-site-header__brand {
	color: var(--dn-white);
	text-decoration: none;
	font: 900 22px/1 var(--dn-display);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.dnv-site-header__brand::after {
	content: ".";
	color: var(--dn-lime);
}

.dnv-headline {
	max-width: 1180px;
	margin: 0 auto;
	padding: 72px 22px 42px;
	color: var(--dn-night);
	font: 900 clamp(38px, 6.5vw, 78px)/0.98 var(--dn-display);
	letter-spacing: -0.055em;
	text-align: center;
}

.dnv-headline__accent {
	display: block;
	color: #2d6a69;
}

.dnv-video-stage {
	width: min(100% - 44px, 1180px);
	margin: 0 auto;
}
.dnv-video-frame {
	position: relative;
	overflow: hidden;
	background: #05080e;
	border: 8px solid var(--dn-white);
	border-radius: 18px;
	box-shadow: 0 28px 70px rgba(16, 26, 44, 0.22);
}
.dnv-video-clip {
	display: block;
	width: 100%;
	height: auto;
}
.dnv-video-launch {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	transform: translate(-50%, -50%);
	padding: 10px 22px 10px 10px;
	color: var(--dn-night);
	background: var(--dn-lime);
	border: 0;
	border-radius: 12px;
	box-shadow: 0 14px 38px rgba(0, 0, 0, 0.38);
	cursor: pointer;
	font: 900 16px/1 var(--dn-ui);
	transition:
		transform 0.2s,
		background 0.2s,
		opacity 0.2s,
		visibility 0.2s;
}
.dnv-video-launch:hover {
	transform: translate(-50%, calc(-50% - 4px));
	background: #d8ff84;
}
.dnv-video-launch__icon {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	background: var(--dn-night);
	border-radius: 8px;
}
.dnv-video-launch__icon svg {
	width: 18px;
	height: 18px;
}
.dnv-video-launch__icon path {
	fill: var(--dn-lime);
}
[class$="-is-hidden"] {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.dnv-fullscreen-btn {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 20;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	color: var(--dn-white);
	background: rgba(16, 26, 44, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 10px;
	cursor: pointer;
}
.dnv-fullscreen-btn svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.dnv-video-frame:fullscreen,
.dnv-video-frame:-webkit-full-screen {
	display: flex;
	align-items: center;
	border: 0;
	border-radius: 0;
}
.dnv-video-frame:fullscreen .dnv-video-clip,
.dnv-video-frame:-webkit-full-screen .dnv-video-clip {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.dnv-order {
	padding: 64px 22px 22px;
}
.dnv-order__wrap {
	max-width: 720px;
	margin: 0 auto;
}
.dnv-order-form {
	padding: 34px;
	background: var(--dn-white);
	border: 1px solid var(--dn-line);
	border-top: 7px solid var(--dn-lime);
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba(16, 26, 44, 0.1);
}
.dnv-order-form__title {
	margin-bottom: 24px;
	color: var(--dn-night);
	text-align: center;
	font: 900 clamp(25px, 4vw, 34px)/1.1 var(--dn-display);
	letter-spacing: -0.03em;
}
.dnv-order-form__media {
	display: flex;
	justify-content: center;
	padding: 14px;
	background: #f4f7fa;
	border-radius: 12px;
}
.dnv-order-form__media img {
	display: block;
	max-width: 100%;
	max-height: 260px;
	object-fit: contain;
}
.dnv-order-form__stock {
	margin: 16px 0 22px;
	text-align: center;
}
.dnv-order-form__badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 13px;
	color: #3e5422;
	background: #eff8dc;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 800;
}
.dnv-order-form__dot {
	width: 8px;
	height: 8px;
	background: var(--dn-lime-deep);
	border-radius: 50%;
}
.dnv-order-form__group {
	margin-bottom: 15px;
}
.dnv-order-form__label {
	display: block;
	margin-bottom: 7px;
	color: var(--dn-night);
	font-size: 14px;
	font-weight: 800;
}
.dnv-order-form__input {
	width: 100%;
	min-height: 52px;
	padding: 0 15px;
	color: var(--dn-ink);
	background: #fbfcfa;
	border: 1px solid #cfd8d1;
	border-radius: 9px;
	outline: 0;
	font: 16px/1 var(--dn-ui);
}
.dnv-order-form__input:focus {
	border-color: #2d6a69;
	box-shadow: 0 0 0 4px rgba(110, 216, 209, 0.22);
}
.dnv-order-form__input::placeholder {
	color: #98a1ad;
}
.dnv-order-form__submit {
	width: 100%;
	min-height: 56px;
	margin-top: 6px;
	color: var(--dn-night);
	background: var(--dn-lime);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	font: 900 15px/1 var(--dn-ui);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.dnv-order-form__submit:hover {
	background: #d7ff80;
	box-shadow: 0 10px 24px rgba(157, 203, 61, 0.3);
}
.dnv-order-form__note {
	margin-top: 16px;
	color: var(--dn-muted);
	text-align: center;
	font-size: 12px;
	line-height: 1.6;
}
.dnv-order-form__honey {
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
	overflow: hidden;
}

.dnv-site-footer {
	margin-top: 54px;
	padding: 36px 22px;
	color: rgba(255, 255, 255, 0.62);
	background: var(--dn-night);
	text-align: center;
}
.dnv-site-footer__inner {
	max-width: 900px;
	margin: 0 auto;
}
.dnv-site-footer__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 24px;
	margin-bottom: 16px;
}
.dnv-site-footer__nav a {
	color: var(--dn-lime);
	text-decoration: none;
	font-size: 13px;
}
.dnv-site-footer__copy {
	margin-bottom: 10px;
	font-size: 12px;
}
.dnv-site-footer__disclaimer {
	max-width: 760px;
	margin: 0 auto;
	font-size: 12px;
	line-height: 1.65;
}

@media (max-width: 620px) {
	.dnv-headline {
		padding-top: 48px;
	}
	.dnv-headline::before {
		font-size: 11px;
	}
	.dnv-video-stage {
		width: min(100% - 24px, 1180px);
	}
	.dnv-video-frame {
		border-width: 4px;
		border-radius: 12px;
	}
	.dnv-video-launch {
		max-width: 88%;
		padding-right: 16px;
		font-size: 14px;
	}
	.dnv-video-launch__icon {
		width: 36px;
		height: 36px;
	}
	.dnv-order {
		padding-inline: 14px;
	}
	.dnv-order-form {
		padding: 26px 18px;
	}
}