/* ==========================================================================
   Лендинг: Hero и блоки секций
   ========================================================================== */

/* .landing-page {
	width: 100%;
} */

/* Hero — на весь экран по ширине */
.landing-hero {
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient( 135deg, #032279 0%, #0a3a9e 50%, #1C1C20 100% );
	color: #fff;
	text-align: center;
	padding: 4rem 1rem;
	box-sizing: border-box;
}

.landing-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.landing-hero-bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.35;
}

.landing-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 800px;
	margin: 0 auto;
}

.landing-hero-title {
	font-family: 'Manrope', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp( 2rem, 5vw, 60px );
	line-height: 1.15;
	margin: 0 0 1rem;
	color: #fff;
}

.landing-hero-subtitle {
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: clamp( 1rem, 2vw, 20px );
	line-height: 1.5;
	margin: 0 0 2rem;
	color: rgba( 255, 255, 255, 0.9 );
}

.landing-hero-btn {
	display: inline-flex;
	width: auto;
	padding: 16px 40px;
	background: #fff;
	color: #032279;
}

.landing-hero-btn:hover {
	background: #f0f2ff;
	color: #032279;
}



.landing-block-title {
	font-family: 'Manrope', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp( 28px, 4vw, 48px );
	line-height: 1.2;
	color: #032279;
	margin: 0 0 2rem;
}

.landing-block-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.landing-block-grid .peptide-card-inner {
	min-height: 0;
}

.landing-block-more {
	margin: 2rem 0 0;
	text-align: center;
}

.landing-block-more-btn {
	display: inline-flex;
	width: auto;
}

.landing-block-empty {
	font-family: 'Manrope', system-ui, sans-serif;
	color: #5A5C70;
	margin: 0;
}

@media (max-width: 1023px) {
	.landing-block-inner {
		padding: 0;
	}
	.landing-block-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media (max-width: 480px) {
	.landing-block-grid {
		grid-template-columns: 1fr;
	}
	.landing-hero {
		min-height: 50vh;
		padding: 3rem 1rem;
	}
}

/* ==========================================================================
   Metabolic clarity personalized to you
   ========================================================================== */
.adns_block_metabolic{
	padding:40px 0;
}
.adns_metabolic__header {
	margin-bottom: 40px;
}

.adns_metabolic__title-wrap {
	margin-bottom: 12px;
}

.adns_metabolic__title-line1 {
	font-weight: 500;
	font-size: 60px;
	line-height: 68px;
	background: linear-gradient(270deg, #FF651E, #AB1A00);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.adns_metabolic__title-line2 {
	font-weight: 500;
	font-size: 60px;
	line-height: 68px;
}

.adns_metabolic__subtitle {
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;
	letter-spacing: 0%;
	color: #1C1C20;
	margin-top: 20px;
}

.adns_metabolic__section-image {
	margin-top: 20px;
}

.adns_metabolic__section-image img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.adns_metabolic__grid {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.adns_metabolic__row {
	display: flex;
	gap: 20px;
	height: 436px;
}

/* .adns_metabolic__row:nth-child(2) {
	padding-left: 20px;
} */

.metabolic-card {
	--direction-grad-from: #FF651E;
	--direction-grad-to: #AB1A00;
	--direction-accent: #FF651E;
	flex: 0 0 520px;
	min-width: 520px;
	height: 436px;
	border-radius: 16px;
	padding: 32px 0 32px 32px;
	position: relative;
	overflow: hidden;
	transition: flex 0.35s ease, min-width 0.35s ease, background 0.35s ease;
	background: #E9EBF3;
}

.metabolic-card.narrow {
	flex: 0 0 390px;
	min-width: 390px;
}

.metabolic-card.active {
	flex: 0 0 780px;
	min-width: 780px;
	background: linear-gradient(270deg, var(--direction-grad-from), var(--direction-grad-to));
}

/* На архиве направлений ховер повторяет active-состояние с лендинга. */
.content-archive #landing-directions .metabolic-card:hover {
	background: linear-gradient(270deg, var(--direction-grad-from), var(--direction-grad-to));
}

.metabolic-card--orange {
	--direction-grad-from: #FF651E;
	--direction-grad-to: #AB1A00;
	--direction-accent: #FF651E;
}

.metabolic-card--purple {
	--direction-grad-from: #7B39FF;
	--direction-grad-to: #421896;
	--direction-accent: #7C3AED;
}

.metabolic-card--red {
	--direction-grad-from: #EC0909;
	--direction-grad-to: #A80000;
	--direction-accent: #DC2626;
}

.metabolic-card--green {
	--direction-grad-from: #006D4B;
	--direction-grad-to: #039769;
	--direction-accent: #16A34A;
}

.metabolic-card--yellow {
	--direction-grad-from: #FFB218;
	--direction-grad-to: #CF6113;
	--direction-accent: #EAB308;
}

.metabolic-card--blue {
	--direction-grad-from: #032279;
	--direction-grad-to: #063FDF;
	--direction-accent: #2563EB;
}

.metabolic-card a {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.metabolic-card__title {
	font-weight: 600;
	font-size: 24px;
	line-height: 28px;
	margin-bottom: 12px;
	transition: color 0.35s ease;
	color: #032279;
	width: 80%;
}

.metabolic-card.active .metabolic-card__title {
	color: #fff;
	font-size: 36px;
}

.content-archive #landing-directions .metabolic-card:hover .metabolic-card__title {
	color: #fff;
	font-size: 28px;
}

.metabolic-card__desc {
	font-weight: 400;
	font-size: 20px;
	line-height: 1.5;
	max-width: 70%;
	margin-bottom: 24px;
	transition: color 0.35s ease;
	color: #6B7280;
	display: none;
}

.metabolic-card.active .metabolic-card__desc {
	color: rgba(255, 255, 255, 0.95);
	display: block;
}

.content-archive #landing-directions .metabolic-card:hover .metabolic-card__desc {
	color: rgba(255, 255, 255, 0.95);
	display: block;
}

.metabolic-card__btn {
	display: inline-flex;
	align-items: center;
	gap: 70px;
	padding: 12px 20px;
	background: #fff;
	border-radius: 40px;
	color: black;
	font-weight: 400;
	font-size: 18px;
	width: fit-content;
	transition: all 0.3s ease;
	margin-right: 32px;
}

.metabolic-card__btn:hover {
	background: var(--direction-accent);
	color: #fff;
}

.metabolic-card__btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	padding: 7px;
	border: 1px solid black;
}

.metabolic-card__btn-icon img {
	width: 10px;
	height: 10px;
	filter: brightness(0);
	max-width: none;
}

.metabolic-card__btn:hover .metabolic-card__btn-icon img {
	filter: brightness(0) invert(1);
}

.metabolic-card__btn-wrap {
	display: none;
}

.metabolic-card.active .metabolic-card__btn-wrap {
	display: block;
}

.content-archive #landing-directions .metabolic-card:hover .metabolic-card__btn-wrap {
	display: block;
}

.metabolic-card.active .metabolic-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}

.content-archive #landing-directions .metabolic-card:hover .metabolic-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}

.metabolic-card.active .metabolic-card__top .metabolic-card__title {
	margin-bottom: 0;
}

.content-archive #landing-directions .metabolic-card:hover .metabolic-card__top .metabolic-card__title {
	margin-bottom: 0;
}

.metabolic-card__icon {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 264px;
	height: 302px;
	mix-blend-mode: luminosity;
}

.metabolic-card__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
}

.metabolic-card__arrow {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #032279;
}

.metabolic-card__arrow img {
	width: 18px;
	height: 18px;
	transform: rotate(-45deg);
}

.metabolic-card__arrow-wrap {
	display: block;
}

.metabolic-card.active .metabolic-card__arrow-wrap {
	display: none;
}

.content-archive #landing-directions .metabolic-card:hover .metabolic-card__arrow-wrap {
	display: none;
}

@media (max-width: 991px) {
	.adns_block_metabolic{
		padding:20px 0;
	}
	.adns_metabolic__grid {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 20px;
		padding: 0 16px;
		margin: 0 -16px;
	}

	.adns_metabolic__grid::-webkit-scrollbar {
		display: none;
	}

	.adns_block_metabolic {
		padding: 20px 0;
	}

	.adns_metabolic__row {
		flex-wrap: nowrap;
		flex-shrink: 0;
		gap: 20px;
	}

	.metabolic-card,
	.metabolic-card.narrow,
	.metabolic-card.active {
		flex: 0 0 292px;
		min-width: 292px;
		width: 292px;
		height: 436px;
		padding: 20px 0 20px 20px;
	}

	.metabolic-card__arrow {
		border-color: #032279;
	}

	.metabolic-card__arrow img {
		filter: none;
	}

	.adns_metabolic__row:first-child .metabolic-card:first-child .metabolic-card__arrow {
		border-color: white;
	}

	.adns_metabolic__row:first-child .metabolic-card:first-child .metabolic-card__arrow img {
		filter: brightness(0) invert(1);
	}

	.metabolic-card__icon {
		right: -25px;
		bottom: -40px;
	}

	.adns_metabolic__row:first-child .metabolic-card:first-child {
		background: linear-gradient(270deg, #FF651E, #AB1A00);
	}

	.adns_metabolic__row:first-child .metabolic-card:first-child .metabolic-card__title {
		color: #fff;
		font-size: 24px;
	}

	#landing-directions .metabolic-card .metabolic-card__desc {
		display: none !important;
	}

	#landing-directions .adns_metabolic__row:first-child .metabolic-card:first-child .metabolic-card__desc {
		color: rgba(255, 255, 255, 0.95);
		display: block !important;
		font-size: 16px;
	}

	.adns_metabolic__row:first-child .metabolic-card:first-child .metabolic-card__arrow-wrap {
		display: block;
	}

	.adns_metabolic__row:first-child .metabolic-card:first-child .metabolic-card__btn-wrap {
		display: none;
	}

	.adns_metabolic__row:first-child .metabolic-card:first-child .metabolic-card__top {
		display: block;
	}

	.adns_metabolic__title-line1,
	.adns_metabolic__title-line2 {
		font-size: 36px;
		line-height: 1.2;
	}

	.adns_metabolic__subtitle {
		font-size: 20px;
	}

	.adns_metabolic__header {
		margin-bottom: 20px;
	}
}