.nut-hero {
	position: relative;
	min-height: min(92dvh, 900px);
	min-height: min(92vh, 900px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: #fff;
}

.nut-hero--gradient .nut-hero__media {
	background: linear-gradient(135deg, #050A5E 0%, #030740 45%, #0a1850 100%);
}

.nut-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.nut-hero__media::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='84' viewBox='0 0 96 84'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'%3E%3Cpath d='M24 1 47 14v28L24 55 1 42V14Z'/%3E%3Cpath d='M72 1 95 14v28L72 55 49 42V14Z'/%3E%3Cpath d='M48 29 71 42v28L48 83 25 70V42Z'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 120px 104px;
	opacity: 0.28;
	pointer-events: none;
}

.nut-hero__video,
.nut-hero__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nut-hero--gradient .nut-hero__poster {
	opacity: 0.35;
}

/* ── Animation ADN roll-up (hélice horizontale bleue + bokeh) ── */

.nut-hero__dna {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}

.nut-hero__dna-bokeh {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.nut-hero__dna-bubble {
	fill: none;
	stroke: rgba(255, 255, 255, 0.55);
	stroke-width: 0.35;
	opacity: var(--nut-bubble-o, 0.15);
	animation: nut-dna-bubble-drift 18s ease-in-out infinite alternate;
}

.nut-hero__dna-sparkle {
	fill: #ffffff;
	opacity: 0;
	animation: nut-dna-sparkle-twinkle 3.6s ease-in-out infinite;
}

.nut-hero__dna-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(920px, 92vw);
	height: min(320px, 42vh);
	transform: translate(-50%, -50%);
	background: radial-gradient(ellipse at center, rgba(94, 200, 255, 0.22) 0%, rgba(42, 143, 212, 0.08) 45%, transparent 72%);
	animation: nut-dna-glow-pulse 7s ease-in-out infinite;
}

.nut-hero__dna-helix {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(1180px, 96vw);
	height: min(300px, 38vh);
	transform: translate(-50%, -50%);
	opacity: 0.62;
}

.nut-hero__dna-helix--primary {
	animation: nut-dna-float 20s ease-in-out infinite alternate;
}

.nut-hero__dna-svg {
	display: block;
	width: 100%;
	height: 100%;
}

.nut-hero__dna-strand {
	animation: nut-dna-strand-shimmer 5s ease-in-out infinite;
}

.nut-hero__dna-strand--alt {
	animation-delay: 1.2s;
}

.nut-hero__dna-rung {
	opacity: 0.45;
	animation: nut-dna-rung-twinkle 3s ease-in-out infinite;
}

.nut-hero__dna-node {
	fill: #8ee0ff;
	opacity: 0.4;
	transform-box: fill-box;
	transform-origin: center;
	animation: nut-dna-node-sparkle 2.6s ease-in-out infinite;
}

.nut-hero__dna-node--b {
	fill: #ffffff;
}

@keyframes nut-dna-float {
	0% { transform: translate(-50%, -50%) translateY(0); }
	100% { transform: translate(-50%, -50%) translateY(-10px); }
}

@keyframes nut-dna-bubble-drift {
	0% { transform: translateY(0) scale(1); opacity: var(--nut-bubble-o, 0.15); }
	50% { opacity: calc(var(--nut-bubble-o, 0.15) * 1.6); }
	100% { transform: translateY(-4px) scale(1.04); opacity: var(--nut-bubble-o, 0.15); }
}

@keyframes nut-dna-sparkle-twinkle {
	0%, 100% { opacity: 0; transform: scale(0.6); }
	45% { opacity: 0.95; transform: scale(1.6); }
	70% { opacity: 0.35; transform: scale(1); }
}

@keyframes nut-dna-glow-pulse {
	0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
	50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes nut-dna-strand-shimmer {
	0%, 100% { opacity: 0.82; }
	50% { opacity: 1; }
}

@keyframes nut-dna-rung-twinkle {
	0%, 100% { opacity: 0.25; }
	50% { opacity: 0.85; }
}

@keyframes nut-dna-node-sparkle {
	0%, 100% { opacity: 0.25; transform: scale(1); }
	40% { opacity: 1; transform: scale(1.55); }
	70% { opacity: 0.5; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
	.nut-hero__dna-helix,
	.nut-hero__dna-glow,
	.nut-hero__dna-bubble,
	.nut-hero__dna-sparkle,
	.nut-hero__dna-strand,
	.nut-hero__dna-rung,
	.nut-hero__dna-node {
		animation: none !important;
	}

	.nut-hero__dna-helix--primary {
		opacity: 0.35;
	}

	.nut-hero__dna-sparkle {
		opacity: 0.4;
	}
}

.nut-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		180deg,
		rgba(5, 10, 94, 0.42) 0%,
		rgba(3, 7, 64, 0.78) 55%,
		rgba(3, 7, 64, 0.92) 100%
	);
}

.nut-hero__grain {
	position: absolute;
	inset: 0;
	z-index: 3;
	opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	pointer-events: none;
}

.nut-hero__content {
	position: relative;
	z-index: 4;
	text-align: center;
	padding: 6rem 1.5rem 4rem;
	max-width: 820px;
}

.nut-hero__eyebrow {
	font-family: 'Quicksand', sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #39B54A;
	margin: 0 0 1.25rem;
}

.nut-hero__title {
	font-family: 'Quicksand', sans-serif;
	font-size: clamp(2rem, 5.5vw, 3.25rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 1.25rem;
	color: #fff;
}

.nut-hero__subtitle {
	font-family: 'Open Sans', sans-serif;
	font-size: clamp(1rem, 2vw, 1.15rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.82);
	max-width: 560px;
	margin: 0 auto 2.25rem;
}

.nut-hero__actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.nut-hero .nut-btn--primary {
	min-width: 148px;
	box-shadow: 0 4px 20px rgba(57, 181, 74, 0.4);
}

.nut-hero .nut-btn--ghost {
	background: rgba(255, 255, 255, 0.08);
	border: 2px solid rgba(255, 255, 255, 0.55);
	color: #fff;
	backdrop-filter: blur(4px);
}

.nut-hero .nut-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: #fff;
}

.nut-btn--lg {
	padding: 0.95rem 2rem;
	font-size: 1rem;
}

.nut-hero__scroll {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 4;
}

.nut-hero__scroll span {
	display: block;
	width: 1px;
	height: 3rem;
	background: linear-gradient(to bottom, #39B54A, transparent);
	animation: nut-scroll 2s infinite;
}

@keyframes nut-scroll {
	0%, 100% { opacity: 0.3; transform: scaleY(0.5); }
	50% { opacity: 1; transform: scaleY(1); }
}

@media (max-width: 1023px) {
	.nut-hero {
		min-height: min(88dvh, 780px);
		min-height: min(88vh, 780px);
	}

	.nut-hero__content {
		padding: calc(4.5rem + env(safe-area-inset-top, 0px)) max(1.25rem, env(safe-area-inset-left, 0px)) 3rem max(1.25rem, env(safe-area-inset-right, 0px));
	}
}

@media (max-width: 640px) {
	.nut-hero {
		min-height: min(85dvh, 700px);
		min-height: min(85vh, 700px);
	}

	.nut-hero__content {
		padding-top: calc(3.5rem + env(safe-area-inset-top, 0px));
	}

	.nut-hero__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		max-width: 320px;
		margin-inline: auto;
	}

	.nut-hero__actions .nut-btn {
		width: 100%;
		min-height: 2.75rem;
		justify-content: center;
	}

	.nut-hero__scroll {
		bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
	}
}
