#hook {
	background : linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-page-main) 100%);
	overflow   : hidden;
}

	#hook::before {
		content             : '';
		position            : absolute;
		left                : 0;
		top                 : 0;
		width               : 46%;
		height              : 46%;
		background-image    : url("../img/lotus.png");
		background-repeat   : no-repeat;
		background-position : left top;
		background-size     : contain;
		opacity             : 0.1;
		pointer-events      : none;
		mix-blend-mode      : multiply;
	}

	#hook .layout {
		display               : grid;
		grid-template-columns : minmax(0, 1fr) minmax(0, 0.92fr);
		justify-content       : stretch;
		align-items           : start;
		column-gap            : 40px;
		position              : relative;
		z-index               : 2;
	}

	#hook .content {
		padding-top : 28px;
		position    : relative;
		z-index     : 3;
	}

	#hook .copy {
		max-width : 520px;
	}

	#hook .content h1 {
		max-width   : 520px;
		/* font-size   : clamp(44px, 4.4vw, 70px); */
		/* line-height : 0.96; */
		/* white-space : normal; */
	}

	#hook .content h1 br {
		display : block;
	}

	#hook .copy h5 {
		max-width : 480px;
	}

	#hook .copy h5:first-of-type {
		margin : 0 0 24px;
	}

	#hook .copy h5:last-of-type {
		margin : 0;
	}

	#hook .visual {
		position            : relative;
		width               : 100%;
		min-height          : 615px;
		background          : var(--color-surface-placeholder);
		z-index             : 1;
	}

	#hook .hero-video {
		position   : absolute;
		inset      : 0;
		width      : 100%;
		height     : 100%;
		object-fit : cover;
	}

	#hook .floating-card {
		position      : absolute;
		right         : 0;
		top           : 456px;
		width         : 360px;
		padding       : 22px 30px 20px;
		border-radius : 24px 0 0 24px;
		background    : rgba(47, 34, 27, 0.92);
		box-shadow    : 0 18px 38px rgba(20, 8, 2, 0.26);
		z-index       : 2;
	}

	#hook .floating-card small {
		margin         : 0;
		display        : block;
		max-width      : 280px;
		font-family    : var(--font-ui);
		font-size      : 28px;
		line-height    : 0.94;
		letter-spacing : 0.08em;
		font-weight    : 600;
		text-transform : uppercase;
		color          : rgba(255, 249, 244, 0.96);
	}

@media (max-width : 980px) {
	#hook::before {
		width   : 58%;
		height  : 34%;
		opacity : 0.08;
	}

	#hook .layout {
		grid-template-columns : 1fr;
		row-gap               : 20px;
	}

	#hook .content {
		padding-top : 0;
	}

	#hook .content h1 {
		max-width : 100%;
		white-space : normal;
	}

	#hook .copy,
	#hook .copy h5 {
		max-width : 100%;
	}

	#hook .copy h5:first-of-type {
		margin : 0 0 20px;
	}

	#hook .copy h5:last-of-type {
		margin : 0;
	}

	#hook .visual {
		min-height : 460px;
	}

	#hook .floating-card {
		left    : 24px;
		top     : auto;
		bottom  : 24px;
		width   : calc(100% - 48px);
		padding : 26px 24px;
	}

	#hook .floating-card small {
		max-width   : 100%;
		font-size   : 24px;
		line-height : 0.96;
	}
}

@media (max-width : 640px) {
	#hook::before {
		width   : 72%;
		height  : 28%;
		opacity : 0.07;
	}

	#hook .content {
		padding-top : 0;
	}

	#hook .content h1 {
		white-space : normal;
	}

	#hook .content h4 {
		margin : 0 0 14px;
	}

	#hook .copy h5:first-of-type {
		margin : 0 0 16px;
	}

	#hook .visual {
		min-height    : 400px;
	}

	#hook .floating-card {
		left          : 18px;
		bottom        : 18px;
		width         : calc(100% - 36px);
		padding       : 20px 18px;
		border-radius : 22px;
	}

	#hook .floating-card small {
		font-size   : 20px;
		line-height : 1;
	}
}