/* Zero Design Hero — premium animated banner */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

.zd-hero {
	--zd-accent: #1e90ff;
	--zd-accent-2: #38bdf8;
	--zd-dark: #030712;
	--zd-text: #f1f5f9;
	--zd-muted: #94a3b8;
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	font-family: 'Montserrat', system-ui, sans-serif;
	color: var(--zd-text);
	margin-top: -1px;
}

.zd-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: 70% center;
	transform: scale(1.05);
	animation: zdKenBurns 20s ease-in-out infinite alternate;
}

@keyframes zdKenBurns {
	from { transform: scale(1.05) translateX(0); }
	to { transform: scale(1.12) translateX(-1%); }
}

.zd-hero__mesh {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 50% at 20% 40%, rgba(30, 144, 255, 0.15), transparent 50%),
		radial-gradient(ellipse 60% 40% at 80% 60%, rgba(56, 189, 248, 0.12), transparent 45%),
		linear-gradient(180deg, rgba(3, 7, 18, 0.75) 0%, rgba(3, 7, 18, 0.88) 55%, #030712 100%);
	pointer-events: none;
}

.zd-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(3, 7, 18, 0.92) 0%, rgba(3, 7, 18, 0.55) 45%, rgba(3, 7, 18, 0.35) 100%);
}

.zd-hero__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.5;
	animation: zdOrbFloat 8s ease-in-out infinite;
	pointer-events: none;
}

.zd-hero__orb--1 {
	width: 420px;
	height: 420px;
	background: #1e90ff;
	top: -10%;
	right: 10%;
}

.zd-hero__orb--2 {
	width: 300px;
	height: 300px;
	background: #38bdf8;
	bottom: 10%;
	left: 5%;
	animation-delay: -4s;
}

@keyframes zdOrbFloat {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(20px, -15px) scale(1.05); }
}

.zd-hero__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0.6;
}

.zd-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 900px;
	width: 100%;
	padding: 120px 24px 80px;
	margin: 0 auto;
	text-align: center;
}

.zd-hero__eyebrow {
	font-size: clamp(11px, 1.5vw, 13px);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--zd-accent-2);
	margin: 0 0 20px;
	opacity: 0;
	transform: translateY(24px);
}

.zd-hero__title {
	font-size: clamp(36px, 6vw, 64px);
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 24px;
	letter-spacing: -0.02em;
	opacity: 0;
	transform: translateY(30px);
}

.zd-hero__title-highlight {
	background: linear-gradient(135deg, #fff 0%, var(--zd-accent-2) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.zd-hero__desc {
	font-size: clamp(15px, 2vw, 17px);
	line-height: 1.75;
	color: var(--zd-muted);
	max-width: 720px;
	margin: 0 auto 28px;
	opacity: 0;
	transform: translateY(24px);
}

.zd-hero__reviews {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 16px;
	padding: 12px 24px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 100px;
	backdrop-filter: blur(12px);
	margin-bottom: 32px;
	opacity: 0;
	transform: translateY(20px);
}

.zd-hero__reviews-label {
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--zd-muted);
}

.zd-hero__reviews-google {
	font-weight: 700;
	font-size: 18px;
	background: linear-gradient(90deg, #4285f4, #ea4335, #fbbc05, #34a853);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.zd-hero__stars {
	color: #fbbf24;
	font-size: 14px;
	letter-spacing: 2px;
}

.zd-hero__rating {
	font-weight: 600;
	font-size: 14px;
}

.zd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	margin-bottom: 48px;
	opacity: 0;
	transform: translateY(20px);
}

.zd-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 32px;
	border-radius: 50px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border: none;
	cursor: pointer;
}

.zd-btn--primary {
	background: linear-gradient(135deg, #1e6fd9 0%, #38bdf8 100%);
	color: #fff;
	box-shadow: 0 8px 32px rgba(30, 144, 255, 0.4);
}

.zd-btn--primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 40px rgba(30, 144, 255, 0.55);
	color: #fff;
}

.zd-btn--ghost {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.85);
}

.zd-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.08);
	transform: translateY(-3px);
	color: #fff;
}

.zd-hero__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px 40px;
	opacity: 0;
	transform: translateY(16px);
}

.zd-hero__badge {
	text-align: center;
}

.zd-hero__badge strong {
	display: block;
	font-size: 28px;
	font-weight: 800;
	color: var(--zd-accent-2);
	line-height: 1.2;
}

.zd-hero__badge span {
	font-size: 12px;
	color: var(--zd-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.zd-hero__scroll {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	width: 24px;
	height: 40px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 12px;
	z-index: 3;
}

.zd-hero__scroll span {
	position: absolute;
	top: 8px;
	left: 50%;
	width: 4px;
	height: 8px;
	margin-left: -2px;
	background: var(--zd-accent-2);
	border-radius: 2px;
	animation: zdScroll 2s ease infinite;
}

@keyframes zdScroll {
	0% { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(12px); }
}

/* Reveal animations */
.zd-hero.is-ready .zd-animate {
	animation: zdFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.zd-hero.is-ready .zd-animate[data-zd-delay="1"] { animation-delay: 0.1s; }
.zd-hero.is-ready .zd-animate[data-zd-delay="2"] { animation-delay: 0.2s; }
.zd-hero.is-ready .zd-animate[data-zd-delay="3"] { animation-delay: 0.35s; }
.zd-hero.is-ready .zd-animate[data-zd-delay="4"] { animation-delay: 0.5s; }
.zd-hero.is-ready .zd-animate[data-zd-delay="5"] { animation-delay: 0.65s; }

@keyframes zdFadeUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 768px) {
	.zd-hero__inner {
		padding-top: 100px;
	}
	.zd-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.zd-btn {
		justify-content: center;
	}
}