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

:root {
	--ilv-night: #071326;
	--ilv-navy: #0d2341;
	--ilv-blue: #174e7a;
	--ilv-cyan: #18d2c3;
	--ilv-cyan-soft: #a5fff2;
	--ilv-ice: #eef8fa;
	--ilv-white: #ffffff;
	--ilv-ink: #10233a;
	--ilv-muted: #587086;
	--ilv-line: #bdd4dc;
	--ilv-ui:
		Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
		sans-serif;
	--ilv-display:
		Charter, "Bitstream Charter", "Palatino Linotype", Georgia, serif;
	--ilv-radius: 18px;
	--ilv-shadow: 0 26px 70px rgba(7, 19, 38, 0.18);
}

html {
	scroll-behavior: smooth;
}

body {
	min-width: 320px;
	min-height: 100vh;
	color: var(--ilv-ink);
	background:
		radial-gradient(
			circle at 91% 12%,
			rgba(24, 210, 195, 0.13),
			transparent 26rem
		),
		linear-gradient(90deg, rgba(23, 78, 122, 0.055) 1px, transparent 1px),
		linear-gradient(rgba(23, 78, 122, 0.055) 1px, transparent 1px),
		var(--ilv-ice);
	background-size:
		auto,
		34px 34px,
		34px 34px,
		auto;
	font-family: var(--ilv-ui);
}

.ilv-site-header {
	width: min(calc(100% - 48px), 1220px);
	margin: 0 auto;
	padding: 25px 0 19px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid rgba(16, 35, 58, 0.18);
}

.ilv-site-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--ilv-night);
	text-decoration: none;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.ilv-site-header__brand::before {
	content: "I";
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	color: var(--ilv-night);
	background: var(--ilv-cyan);
	border-radius: 9px 9px 9px 2px;
	font-family: var(--ilv-display);
	font-size: 20px;
	letter-spacing: 0;
}

.ilv-headline {
	width: min(calc(100% - 48px), 1040px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	padding: clamp(58px, 8vw, 108px) 0 44px;
	color: var(--ilv-night);
	font: 700 clamp(42px, 7.5vw, 86px)/0.98 var(--ilv-display);
	letter-spacing: -0.052em;
}

.ilv-headline::before {
	content: "ФАХОВА РОЗМОВА";
	display: block;
	margin-bottom: 19px;
	color: var(--ilv-blue);
	font: 800 12px/1 var(--ilv-ui);
	letter-spacing: 0.23em;
}

.ilv-headline__accent {
	display: block;
	width: fit-content;
	margin: 13px 0 0 auto;
	padding: 5px 13px 10px;
	color: var(--ilv-ice);
	background: var(--ilv-night);
	box-shadow: 9px 9px 0 var(--ilv-cyan);
	font-style: italic;
}

.ilv-video-stage {
	width: min(calc(100% - 48px), 1120px);
	margin: 0 auto;
}

.ilv-video-frame {
	position: relative;
	overflow: hidden;
	background: #02070e;
	border: 1px solid rgba(165, 255, 242, 0.4);
	border-radius: var(--ilv-radius);
	box-shadow: var(--ilv-shadow);
}

.ilv-video-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.035);
}

.ilv-video-clip {
	display: block;
	width: 100%;
	height: auto;
}

.ilv-video-launch {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 10;
	min-height: 58px;
	padding: 7px 22px 7px 7px;
	display: inline-flex;
	align-items: center;
	gap: 13px;
	transform: translate(-50%, -50%);
	color: var(--ilv-night);
	background: rgba(238, 248, 250, 0.95);
	border: 1px solid rgba(165, 255, 242, 0.76);
	border-radius: 12px;
	box-shadow: 0 16px 46px rgba(0, 0, 0, 0.38);
	cursor: pointer;
	font: 800 15px/1 var(--ilv-ui);
	letter-spacing: 0.02em;
	transition:
		transform 0.2s ease,
		background 0.2s ease,
		opacity 0.2s ease,
		visibility 0.2s ease;
}

.ilv-video-launch:hover {
	transform: translate(-50%, calc(-50% - 4px));
	background: #fff;
}

.ilv-video-launch__icon {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	flex: none;
	color: var(--ilv-night);
	background: var(--ilv-cyan);
	border-radius: 9px;
}

.ilv-video-launch__icon svg {
	width: 18px;
	height: 18px;
}

.ilv-video-launch__icon path {
	fill: currentColor;
}

.ilv-video-launch__text {
	white-space: nowrap;
}

[class$="-is-hidden"] {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.ilv-fullscreen-btn {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 20;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	color: var(--ilv-cyan-soft);
	background: rgba(7, 19, 38, 0.86);
	border: 1px solid rgba(165, 255, 242, 0.32);
	border-radius: 10px;
	cursor: pointer;
	backdrop-filter: blur(10px);
}

.ilv-fullscreen-btn:hover {
	color: var(--ilv-night);
	background: var(--ilv-cyan);
}

.ilv-fullscreen-btn svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ilv-video-frame:fullscreen,
.ilv-video-frame:-webkit-full-screen {
	display: flex;
	align-items: center;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.ilv-video-frame:fullscreen .ilv-video-clip,
.ilv-video-frame:-webkit-full-screen .ilv-video-clip {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ilv-order {
	padding: clamp(72px, 10vw, 126px) 24px 20px;
}

.ilv-order__wrap {
	max-width: 980px;
	margin: 0 auto;
}

.ilv-order-form {
	position: relative;
	padding: clamp(34px, 5vw, 64px);
	display: grid;
	grid-template-columns: minmax(220px, 0.82fr) minmax(270px, 1.18fr);
	grid-template-areas:
		"media title"
		"media stock"
		"media name"
		"media phone"
		"media submit"
		"media note";
	grid-template-rows: auto auto auto auto auto 1fr;
	column-gap: clamp(32px, 6vw, 72px);
	align-items: start;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(16, 35, 58, 0.18);
	border-radius: 32px 32px 8px 32px;
	box-shadow: 0 24px 76px rgba(13, 35, 65, 0.15);
}

.ilv-order-form::before {
	content: "ЗАЯВКА";
	position: absolute;
	left: 38px;
	top: -15px;
	padding: 8px 13px;
	color: var(--ilv-cyan-soft);
	background: var(--ilv-night);
	border-radius: 6px;
	font: 800 11px/1 var(--ilv-ui);
	letter-spacing: 0.15em;
}

.ilv-order-form__title {
	grid-area: title;
	max-width: 720px;
	margin-bottom: 26px;
	color: var(--ilv-night);
	font: 700 clamp(30px, 4.6vw, 48px)/1.08 var(--ilv-display);
	letter-spacing: -0.035em;
}

.ilv-order-form__media {
	grid-area: media;
	min-height: 100%;
	display: grid;
	place-items: center;
	overflow: hidden;
	background:
		radial-gradient(
			circle at 50% 46%,
			rgba(24, 210, 195, 0.28),
			transparent 55%
		),
		linear-gradient(160deg, #ffffff 0%, var(--ilv-ice) 100%);
	border: 1px solid var(--ilv-line);
	border-radius: 22px 22px 5px 22px;
}

.ilv-order-form__media img {
	display: block;
	width: min(90%, 310px);
	max-height: 330px;
	object-fit: contain;
	filter: drop-shadow(0 22px 28px rgba(7, 19, 38, 0.28));
}

.ilv-order-form__stock {
	grid-area: stock;
	margin-bottom: 20px;
}

.ilv-order-form__badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 12px;
	color: var(--ilv-blue);
	background: #e3f7f5;
	border: 1px solid #addfd9;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 800;
}

.ilv-order-form__dot {
	width: 8px;
	height: 8px;
	background: var(--ilv-cyan);
	border: 2px solid var(--ilv-blue);
	border-radius: 50%;
}

.ilv-order-form__group {
	margin-bottom: 18px;
}

.ilv-order-form__group--name {
	grid-area: name;
}

.ilv-order-form__group--phone {
	grid-area: phone;
}

.ilv-order-form__label {
	display: block;
	margin-bottom: 8px;
	color: var(--ilv-night);
	font-size: 14px;
	font-weight: 800;
}

.ilv-order-form__input {
	width: 100%;
	min-height: 56px;
	padding: 0 17px;
	color: var(--ilv-ink);
	background: #f5fafb;
	border: 1px solid var(--ilv-line);
	border-radius: 10px;
	outline: 0;
	font: 16px/1 var(--ilv-ui);
	transition:
		border-color 0.18s ease,
		box-shadow 0.18s ease,
		background 0.18s ease;
}

.ilv-order-form__input:focus {
	background: #fff;
	border-color: var(--ilv-blue);
	box-shadow: 0 0 0 4px rgba(24, 210, 195, 0.2);
}

.ilv-order-form__input::placeholder {
	color: #8194a5;
}

.ilv-order-form__phone {
	font-variant-numeric: tabular-nums;
}

.ilv-order-form__submit {
	grid-area: submit;
	width: 100%;
	min-height: 58px;
	margin-top: 2px;
	color: var(--ilv-night);
	background: var(--ilv-cyan);
	border: 1px solid #0a9e95;
	border-radius: 10px;
	box-shadow: 0 8px 0 #0c817b;
	cursor: pointer;
	font: 800 15px/1 var(--ilv-ui);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		background 0.18s ease;
}

.ilv-order-form__submit:hover {
	background: var(--ilv-cyan-soft);
	transform: translateY(-2px);
	box-shadow: 0 10px 0 #0c817b;
}

.ilv-order-form__submit:active {
	transform: translateY(5px);
	box-shadow: 0 3px 0 #0c817b;
}

.ilv-order-form__note {
	grid-area: note;
	margin-top: 22px;
	color: var(--ilv-muted);
	font-size: 13px;
	line-height: 1.65;
}

.ilv-order-form__honey {
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
	overflow: hidden;
}

.ilv-order-form__meta {
	display: none;
}

.ilv-site-footer {
	margin-top: 80px;
	padding: 0 24px 24px;
}

.ilv-site-footer__inner {
	width: min(100%, 1220px);
	margin: 0 auto;
	padding: 40px 44px;
	color: rgba(255, 255, 255, 0.7);
	background: var(--ilv-night);
	border-top: 3px solid var(--ilv-cyan);
	border-radius: 8px 8px 28px 8px;
}

.ilv-site-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 30px;
	margin-bottom: 22px;
}

.ilv-site-footer__nav a {
	color: var(--ilv-cyan-soft);
	text-decoration: none;
	border-bottom: 1px solid rgba(165, 255, 242, 0.42);
	font-size: 14px;
	font-weight: 700;
}

.ilv-site-footer__copy {
	margin-bottom: 10px;
	color: #fff;
	font-size: 13px;
}

.ilv-site-footer__disclaimer {
	max-width: 820px;
	font-size: 13px;
	line-height: 1.7;
}

@media (max-width: 820px) {
	.ilv-site-header {
		width: calc(100% - 28px);
	}

	.ilv-headline {
		width: calc(100% - 28px);
		padding: 50px 0 32px;
		font-size: clamp(28px, 8.4vw, 44px);
		line-height: 1.04;
		letter-spacing: -0.04em;
		overflow-wrap: anywhere;
	}

	.ilv-headline__accent {
		margin-left: 0;
	}

	.ilv-video-stage {
		width: calc(100% - 24px);
	}

	.ilv-video-frame {
		border-radius: 12px;
		box-shadow: 0 18px 44px rgba(7, 19, 38, 0.2);
	}

	.ilv-video-launch {
		max-width: 90%;
		min-height: 52px;
		padding-right: 15px;
		font-size: 14px;
	}

	.ilv-video-launch__icon {
		width: 38px;
		height: 38px;
	}

	.ilv-fullscreen-btn {
		right: 9px;
		bottom: 9px;
		width: 40px;
		height: 40px;
	}

	.ilv-order {
		padding: 68px 12px 10px;
	}

	.ilv-order-form {
		padding: 38px 18px 30px;
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"media"
			"stock"
			"name"
			"phone"
			"submit"
			"note";
		grid-template-rows: auto;
		border-radius: 22px 22px 6px 22px;
	}

	.ilv-order-form::before {
		left: 18px;
	}

	.ilv-order-form__title {
		margin-bottom: 26px;
	}

	.ilv-order-form__media {
		min-height: 270px;
		margin-bottom: 18px;
	}

	.ilv-order-form__media img {
		max-height: 250px;
	}

	.ilv-site-footer {
		margin-top: 54px;
		padding: 0 12px 12px;
	}

	.ilv-site-footer__inner {
		padding: 32px 22px;
	}

	.ilv-site-footer__nav {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}