/* Zenit Animated Hero - Professional */

.zah-hero *,
.zah-hero *::before,
.zah-hero *::after { box-sizing: border-box !important; }

.zah-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #070b14;
	perspective: 1200px;
}

/* ── VIDEO BACKGROUND ─────────────────────────────────── */

.zah-video-bg {
	position: absolute;
	inset: -40px;
	z-index: 0;
	overflow: hidden;
}

.zah-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: saturate(1.4) contrast(1.1) brightness(1.05);
}

.zah-video-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(7, 11, 20, 0.5) 0%,
		rgba(7, 11, 20, 0.2) 40%,
		rgba(7, 11, 20, 0.15) 60%,
		rgba(7, 11, 20, 0.5) 100%
	) !important;
}

/* Vignette on top of overlay */
.zah-video-overlay::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, transparent 40%, rgba(7, 11, 20, 0.6) 100%);
	pointer-events: none;
}

/* ── NOISE TEXTURE ─────────────────────────────────────── */

.zah-noise {
	position: absolute;
	inset: 0;
	z-index: 6;
	pointer-events: none;
	opacity: 0.03;
	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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 200px;
}

/* ── GRID OVERLAY ──────────────────────────────────────── */

.zah-grid-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
	background-size: 60px 60px;
	mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
}

/* ── AURORA EFFECT ─────────────────────────────────────── */

.zah-aurora {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.zah-aurora-beam {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
}

.zah-aurora-beam--1 {
	width: 60vw;
	height: 40vh;
	top: -10%;
	left: -10%;
	opacity: 0.35;
	animation: zah-aurora-1 12s ease-in-out infinite;
}

.zah-aurora-beam--2 {
	width: 50vw;
	height: 35vh;
	bottom: -5%;
	right: -15%;
	opacity: 0.25;
	animation: zah-aurora-2 15s ease-in-out infinite;
}

.zah-aurora-beam--3 {
	width: 40vw;
	height: 30vh;
	top: 30%;
	left: 40%;
	opacity: 0.15;
	animation: zah-aurora-3 18s ease-in-out infinite;
}

@keyframes zah-aurora-1 {
	0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
	25%      { transform: translate(8vw, 5vh) rotate(15deg) scale(1.1); }
	50%      { transform: translate(3vw, 10vh) rotate(-10deg) scale(0.95); }
	75%      { transform: translate(-5vw, 3vh) rotate(5deg) scale(1.05); }
}

@keyframes zah-aurora-2 {
	0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
	33%      { transform: translate(-6vw, -8vh) rotate(-15deg) scale(1.15); }
	66%      { transform: translate(4vw, -3vh) rotate(10deg) scale(0.9); }
}

@keyframes zah-aurora-3 {
	0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.15; }
	50%      { transform: translate(-10vw, 5vh) scale(1.2); opacity: 0.3; }
}

/* ── SHAPES ────────────────────────────────────────────── */

.zah-shapes {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.zah-orbit {
	position: absolute;
	border-radius: 50%;
	border-style: solid;
}

.zah-orbit--1 {
	width: 600px;
	height: 600px;
	border-width: 1px;
	top: -15%;
	right: -10%;
	animation: zah-orbit-spin 50s linear infinite;
}

.zah-orbit--2 {
	width: 400px;
	height: 400px;
	border-width: 1px;
	bottom: -10%;
	left: -5%;
	animation: zah-orbit-spin 35s linear infinite reverse;
}

.zah-orbit-dot {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	top: 15%;
	right: 12%;
	animation: zah-pulse-glow 4s ease-in-out infinite;
}

.zah-cross {
	position: absolute;
	top: 25%;
	left: 8%;
	font-size: 28px;
	font-weight: 300;
	animation: zah-rotate-slow 20s linear infinite;
}

.zah-diamond {
	position: absolute;
	bottom: 20%;
	right: 8%;
	width: 30px;
	height: 30px;
	border-width: 1px;
	border-style: solid;
	transform: rotate(45deg);
	animation: zah-float-diamond 8s ease-in-out infinite;
}

.zah-line-deco {
	position: absolute;
	width: 1px;
	height: 120px;
	top: 10%;
	left: 15%;
	animation: zah-line-grow 6s ease-in-out infinite;
}

@keyframes zah-orbit-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@keyframes zah-pulse-glow {
	0%, 100% { opacity: 0.6; transform: scale(1); }
	50%      { opacity: 1; transform: scale(2); }
}

@keyframes zah-rotate-slow {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@keyframes zah-float-diamond {
	0%, 100% { transform: rotate(45deg) translateY(0); }
	50%      { transform: rotate(50deg) translateY(-15px); }
}

@keyframes zah-line-grow {
	0%, 100% { opacity: 0.3; transform: scaleY(1); }
	50%      { opacity: 0.8; transform: scaleY(1.3); }
}

/* ── PARTICLES ─────────────────────────────────────────── */

.zah-particles {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.zah-dot {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	animation: zah-particle-drift linear infinite;
}

@keyframes zah-particle-drift {
	0%   { transform: translateY(0) translateX(0); opacity: 0; }
	10%  { opacity: 1; }
	90%  { opacity: 1; }
	100% { transform: translateY(-200px) translateX(30px); opacity: 0; }
}

/* ── CURSOR GLOW ───────────────────────────────────────── */

.zah-cursor-glow {
	position: absolute;
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(197, 225, 122, 0.07) 0%, transparent 70%);
	pointer-events: none;
	z-index: 3;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.zah-hero:hover .zah-cursor-glow {
	opacity: 1;
}

/* ── CONTENT ───────────────────────────────────────────── */

.zah-content {
	position: relative;
	z-index: 5;
	text-align: center;
	max-width: 880px;
	padding: 60px 24px;
	transform-style: preserve-3d;
}

/* Badge */
.zah-badge-wrap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 36px;
	opacity: 0;
	transform: translateY(20px);
	animation: zah-reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.zah-badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #c5e17a;
	box-shadow: 0 0 12px rgba(197, 225, 122, 0.6);
	animation: zah-dot-ping 2s ease-in-out infinite;
}

@keyframes zah-dot-ping {
	0%, 100% { box-shadow: 0 0 12px rgba(197, 225, 122, 0.6); }
	50%      { box-shadow: 0 0 20px rgba(197, 225, 122, 0.9), 0 0 40px rgba(197, 225, 122, 0.3); }
}

.zah-badge {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #a5b4fc;
}

/* ── TITLE ─────────────────────────────────────────────── */

.zah-title {
	font-size: 72px;
	font-weight: 800;
	color: #f8fafc;
	line-height: 1.1 !important;
	margin: 0 0 28px !important;
	letter-spacing: -2px;
	border: none !important;
	padding: 0 !important;
	background: none !important;
	perspective: 600px;
}

.zah-line {
	display: block;
}

.zah-char {
	display: inline-block;
	opacity: 0;
	transform: translateY(100%) rotateX(-80deg);
	animation: zah-char-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes zah-char-in {
	to {
		opacity: 1;
		transform: translateY(0) rotateX(0deg);
	}
}

.zah-highlight {
	color: #c5e17a;
	position: relative;
	text-shadow: 0 0 40px rgba(197, 225, 122, 0.15);
}

.zah-line--2 {
	overflow: hidden;
}

/* ── DESCRIPTION ───────────────────────────────────────── */

.zah-desc {
	font-size: 18px;
	color: #94a3b8;
	line-height: 1.8 !important;
	max-width: 560px;
	margin: 0 auto 44px !important;
	opacity: 0;
	transform: translateY(20px);
	animation: zah-reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards;
}

/* ── BUTTONS ───────────────────────────────────────────── */

.zah-btns {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	opacity: 0;
	transform: translateY(20px);
	animation: zah-reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
}

.zah-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 32px !important;
	border-radius: 14px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	line-height: 1.4 !important;
	border: 2px solid transparent;
	position: relative;
	overflow: hidden;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.zah-btn--primary {
	background: #c5e17a;
	color: #0f172a;
}

.zah-btn--primary svg {
	transition: transform 0.3s ease;
}

.zah-btn--primary:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 10px 40px rgba(197, 225, 122, 0.35), 0 0 0 1px rgba(197, 225, 122, 0.2);
}

.zah-btn--primary:hover svg {
	transform: translateX(4px);
}

.zah-btn--primary::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
	transform: translateX(-100%);
	transition: transform 0.6s ease;
}

.zah-btn--primary:hover::after {
	transform: translateX(100%);
}

.zah-btn--outline {
	background: rgba(255, 255, 255, 0.03);
	color: #e2e8f0;
	border-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.zah-btn--outline:hover {
	border-color: rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.06);
	transform: translateY(-3px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

/* ── STATS GLASS ───────────────────────────────────────── */

.zah-stats-glass {
	display: flex;
	justify-content: center;
	gap: 0;
	margin-top: 56px;
	background: rgba(255, 255, 255, 0.025);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 20px;
	padding: 32px 16px;
	opacity: 0;
	transform: translateY(30px);
	animation: zah-reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.7s forwards;
}

.zah-stat {
	flex: 1;
	text-align: center;
	padding: 0 24px;
	position: relative;
}

.zah-stat + .zah-stat::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 36px;
	background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.08), transparent);
}

.zah-stat-num {
	display: block;
	font-size: 40px;
	font-weight: 800;
	color: #c5e17a;
	line-height: 1.2;
	letter-spacing: -1px;
}

.zah-stat-label {
	display: block;
	font-size: 12px;
	color: #64748b;
	margin-top: 6px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	font-weight: 500;
}

/* ── FEATURES ──────────────────────────────────────────── */

.zah-features {
	display: flex;
	justify-content: center;
	gap: 32px;
	margin-top: 40px;
	opacity: 0;
	transform: translateY(20px);
	animation: zah-reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2s forwards;
}

.zah-feat {
	display: flex;
	align-items: center;
	gap: 10px;
}

.zah-feat-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(197, 225, 122, 0.08);
	border: 1px solid rgba(197, 225, 122, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #c5e17a;
	flex-shrink: 0;
}

.zah-feat-text {
	text-align: left;
}

.zah-feat-text strong {
	display: block;
	font-size: 13px;
	color: #e2e8f0;
	font-weight: 600;
}

.zah-feat-text span {
	display: block;
	font-size: 11px;
	color: #64748b;
}

/* ── SCROLL HINT ───────────────────────────────────────── */

.zah-scroll-hint {
	position: absolute;
	bottom: 36px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	opacity: 0;
	animation: zah-fade-in 0.8s ease 2.5s forwards;
}

.zah-scroll-text {
	font-size: 10px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #475569;
	font-weight: 500;
}

.zah-scroll-line {
	width: 1px;
	height: 40px;
	background: linear-gradient(to bottom, #475569, transparent);
	position: relative;
	overflow: hidden;
}

.zah-scroll-line::after {
	content: '';
	position: absolute;
	top: -100%;
	left: 0;
	width: 100%;
	height: 50%;
	background: #94a3b8;
	animation: zah-scroll-drop 2s ease-in-out infinite;
}

@keyframes zah-scroll-drop {
	0%   { top: -50%; }
	100% { top: 120%; }
}

/* ── SCROLL PROGRESS RING ──────────────────────────────── */

.zah-scroll-ring {
	position: fixed;
	bottom: 32px;
	right: 32px;
	z-index: 9999;
	width: 52px;
	height: 52px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.zah-hero--visible .zah-scroll-ring {
	opacity: 1;
}

.zah-scroll-ring svg {
	transform: rotate(-90deg);
	width: 52px;
	height: 52px;
}

.zah-scroll-ring-bg {
	fill: none;
	stroke: rgba(255, 255, 255, 0.04);
	stroke-width: 2.5;
}

.zah-scroll-ring-progress {
	fill: none;
	stroke: url(#zah-ring-gradient);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 251;
	stroke-dashoffset: 251;
	transition: stroke-dashoffset 0.12s ease-out;
	filter: drop-shadow(0 0 8px rgba(197, 225, 122, 0.3));
}

/* ── SCROLL-DRIVEN ELEMENT TRANSITIONS ─────────────────── */

.zah-badge-wrap,
.zah-title,
.zah-desc,
.zah-btns,
.zah-stats-glass,
.zah-features,
.zah-line,
.zah-highlight,
.zah-video-bg,
.zah-orbit,
.zah-dot,
.zah-aurora,
.zah-noise,
.zah-content {
	will-change: transform, opacity;
	transition: none;
}

/* ── KEYFRAMES ─────────────────────────────────────────── */

@keyframes zah-reveal {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes zah-fade-in {
	to { opacity: 1; }
}

/* ── ELEMENTOR EDITOR ──────────────────────────────────── */

.elementor-editor-active .zah-badge-wrap,
.elementor-editor-active .zah-char,
.elementor-editor-active .zah-desc,
.elementor-editor-active .zah-btns,
.elementor-editor-active .zah-stats-glass,
.elementor-editor-active .zah-features,
.elementor-editor-active .zah-scroll-hint {
	opacity: 1 !important;
	transform: none !important;
}

/* ── RESPONSIVE ────────────────────────────────────────── */

@media (max-width: 768px) {
	.zah-title {
		font-size: 44px !important;
		letter-spacing: -1px !important;
	}
	.zah-desc {
		font-size: 16px !important;
	}
	.zah-stats-glass {
		flex-wrap: wrap;
		gap: 16px;
	}
	.zah-stat {
		flex: 0 0 calc(50% - 8px);
		padding: 12px 0;
	}
	.zah-stat + .zah-stat::before {
		display: none;
	}
	.zah-stat-num {
		font-size: 32px;
	}
	.zah-features {
		flex-direction: column;
		gap: 16px;
		align-items: center;
	}
	.zah-btn {
		width: 100%;
		max-width: 280px;
	}
	.zah-btns {
		flex-direction: column;
		align-items: center;
	}
	.zah-aurora-beam--1 { width: 80vw; }
	.zah-aurora-beam--2 { width: 70vw; }
	.zah-aurora-beam--3 { width: 60vw; }
	.zah-scroll-ring {
		bottom: 16px;
		right: 16px;
		width: 40px;
		height: 40px;
	}
	.zah-scroll-ring svg {
		width: 40px;
		height: 40px;
	}
}

@media (max-width: 480px) {
	.zah-title {
		font-size: 36px !important;
	}
	.zah-content {
		padding: 40px 16px;
	}
	.zah-stats-glass {
		padding: 24px 12px;
	}
	.zah-stat-num {
		font-size: 28px;
	}
}