/**
 * Havenlytics V3 — Cards
 * Source: havenlytics-homepage-v3.html
 *
 * @package Havenlytics_Theme
 */

/* ── Base card ───────────────────────────────────────────────── */
.hvnly-card {
	background: var(--hvnly--surface-0);
	border: 1px solid var(--hvnly--border);
	border-radius: var(--hvnly--radius-lg);
	padding: var(--hvnly--space-13);
	transition: var(--hvnly--transition-transform), var(--hvnly--transition-shadow), border-color var(--hvnly--duration-base) var(--hvnly--ease);
}

.hvnly-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--hvnly--shadow-md);
}

.hvnly-card--surface {
	background: var(--hvnly--surface-50);
}

/* ── Step card ───────────────────────────────────────────────── */
.hvnly-step {
	background: var(--hvnly--surface-50);
	border: 1px solid var(--hvnly--border);
	border-radius: var(--hvnly--radius-lg);
	padding: var(--hvnly--space-13) 26px;
	position: relative;
	transition: var(--hvnly--transition-transform), var(--hvnly--transition-shadow);
}

.hvnly-step:hover {
	transform: translateY(-6px);
	box-shadow: var(--hvnly--shadow-md);
	border-color: transparent;
}

.hvnly-step-num {
	width: var(--hvnly--space-15);
	height: var(--hvnly--space-15);
	border-radius: var(--hvnly--space-5);
	background: var(--hvnly--core-gradient);
	color: var(--hvnly--on-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--hvnly--font-display);
	font-weight: var(--hvnly--weight-extrabold);
	font-size: var(--hvnly--text-md);
	margin-bottom: var(--hvnly--space-9);
	transition: var(--hvnly--transition-transform);
}

.hvnly-step:hover .hvnly-step-num {
	transform: scale(1.08) rotate(-4deg);
}

.hvnly-step h3 {
	font-size: var(--hvnly--text-xl);
	margin-bottom: var(--hvnly--space-4);
}

.hvnly-step p {
	font-size: 14.5px;
}

.hvnly-step-time {
	margin-top: var(--hvnly--space-7);
	display: inline-flex;
	align-items: center;
	gap: var(--hvnly--space-2);
	font-size: var(--hvnly--text-xs);
	font-weight: var(--hvnly--weight-bold);
	color: var(--hvnly--core-primary);
}

/* ── Ecosystem card ──────────────────────────────────────────── */
.hvnly-eco-card {
	background: var(--hvnly--surface-0);
	border: 1px solid var(--hvnly--border);
	border-radius: var(--hvnly--radius-lg);
	padding: 30px;
	transition: var(--hvnly--transition-transform), var(--hvnly--transition-shadow), border-color var(--hvnly--duration-base);
}

.hvnly-eco-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--hvnly--shadow-md);
	border-color: rgba(108, 96, 254, 0.3);
}

.hvnly-eco-icon {
	width: var(--hvnly--space-16);
	height: var(--hvnly--space-16);
	border-radius: var(--hvnly--space-6);
	background: var(--hvnly--core-gradient-soft);
	color: var(--hvnly--core-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--hvnly--space-9);
	margin-bottom: var(--hvnly--space-9);
	transition: var(--hvnly--transition-bg), var(--hvnly--transition-color);
}

.hvnly-eco-card:hover .hvnly-eco-icon {
	background: var(--hvnly--core-gradient);
	color: var(--hvnly--on-primary);
}

.hvnly-eco-card h3 {
	font-size: 17px;
	margin-bottom: var(--hvnly--space-3);
}

.hvnly-eco-card p {
	font-size: var(--hvnly--text-base);
}

/* ── Feature card ──────────────────────────────────────────────── */
.hvnly-feature {
	background: var(--hvnly--surface-50);
	border: 1px solid var(--hvnly--border);
	border-radius: var(--hvnly--radius-lg);
	padding: var(--hvnly--space-12);
	transition: var(--hvnly--transition-transform), var(--hvnly--transition-shadow);
}

.hvnly-feature:hover {
	transform: translateY(-5px);
	box-shadow: var(--hvnly--shadow-md);
}

.hvnly-feature i {
	font-size: var(--hvnly--space-10);
	color: var(--hvnly--core-primary);
	margin-bottom: var(--hvnly--space-7);
	display: block;
	transition: var(--hvnly--transition-transform);
}

.hvnly-feature:hover i {
	transform: scale(1.12);
}

.hvnly-feature h3 {
	font-size: var(--hvnly--space-7);
	margin-bottom: var(--hvnly--space-3);
}

.hvnly-feature p {
	font-size: 13.5px;
}

/* ── Tutorial card ───────────────────────────────────────────── */
.hvnly-tut-card {
	border-radius: var(--hvnly--radius-lg);
	overflow: hidden;
	border: 1px solid var(--hvnly--border);
	transition: var(--hvnly--transition-transform), var(--hvnly--transition-shadow);
	background: var(--hvnly--surface-0);
}

.hvnly-tut-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--hvnly--shadow-md);
}

.hvnly-tut-thumb {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	display: block;
	padding: 0;
	border: 0;
	background: none;
}

.hvnly-tut-thumb--btn {
	width: 100%;
	cursor: pointer;
	text-align: left;
}

.hvnly-tut-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hvnly-tut-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(17, 16, 31, 0.25);
	transition: background var(--hvnly--duration-base) var(--hvnly--ease);
}

.hvnly-tut-thumb:hover .hvnly-tut-play {
	background: rgba(17, 16, 31, 0.4);
}

.hvnly-tut-play i {
	width: 54px;
	height: 54px;
	border-radius: var(--hvnly--radius-full);
	background: var(--hvnly--on-primary);
	color: var(--hvnly--core-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--hvnly--text-xl);
	box-shadow: var(--hvnly--shadow-md);
	transition: var(--hvnly--transition-transform);
}

.hvnly-tut-thumb:hover .hvnly-tut-play i {
	transform: scale(1.1);
}

.hvnly-tut-body {
	padding: var(--hvnly--space-9);
}

.hvnly-tut-body span {
	font-size: var(--hvnly--text-xs);
	font-weight: var(--hvnly--weight-bold);
	color: var(--hvnly--core-primary);
	text-transform: uppercase;
	letter-spacing: var(--hvnly--tracking-wide);
}

.hvnly-tut-body h3 {
	font-size: var(--hvnly--space-7);
	margin: var(--hvnly--space-3) 0 var(--hvnly--space-2);
}

.hvnly-tut-body p {
	font-size: 13.5px;
}

/* ── Testimonial card ──────────────────────────────────────────── */
.hvnly-test-card {
	background: var(--hvnly--surface-50);
	border: 1px solid var(--hvnly--border);
	border-radius: var(--hvnly--radius-lg);
	padding: var(--hvnly--space-12);
}

.hvnly-test-stars {
	color: var(--hvnly--warning);
	font-size: var(--hvnly--text-sm);
	margin-bottom: var(--hvnly--space-7);
}

.hvnly-test-card p {
	font-size: 14.5px;
	color: var(--hvnly--ink-600);
	margin-bottom: var(--hvnly--space-10);
}

.hvnly-test-person {
	display: flex;
	align-items: center;
	gap: var(--hvnly--space-5);
}

.hvnly-test-avatar {
	width: 42px;
	height: 42px;
	border-radius: var(--hvnly--radius-full);
	background: var(--hvnly--core-gradient);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hvnly--on-primary);
	font-weight: var(--hvnly--weight-bold);
	font-size: var(--hvnly--text-base);
	font-family: var(--hvnly--font-display);
	overflow: hidden;
	flex-shrink: 0;
}

.hvnly-test-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hvnly-test-person strong {
	display: block;
	font-size: var(--hvnly--text-base);
	color: var(--hvnly--ink-900);
}

.hvnly-test-person span {
	font-size: 12.5px;
	color: var(--hvnly--ink-400);
}

/* ── Pricing card ──────────────────────────────────────────────── */
.hvnly-price-card {
	background: var(--hvnly--surface-0);
	border: 1px solid var(--hvnly--border);
	border-radius: var(--hvnly--radius-lg);
	padding: 34px;
	transition: var(--hvnly--transition-transform), var(--hvnly--transition-shadow);
}

.hvnly-price-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--hvnly--shadow-md);
}

.hvnly-price-card--featured {
	background: var(--hvnly--ink-900);
	border-color: transparent;
	color: var(--hvnly--on-primary);
	position: relative;
	transform: scale(1.03);
	box-shadow: var(--hvnly--shadow-glow);
}

.hvnly-price-card--featured:hover {
	transform: scale(1.03) translateY(-6px);
}

.hvnly-price-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--hvnly--core-gradient);
	color: var(--hvnly--on-primary);
	font-size: var(--hvnly--text-2xs);
	font-weight: var(--hvnly--weight-bold);
	padding: var(--hvnly--space-2) var(--hvnly--space-7);
	border-radius: var(--hvnly--radius-pill);
}

.hvnly-price-card h3 {
	font-size: var(--hvnly--text-xl);
	margin-bottom: var(--hvnly--space-2);
}

.hvnly-price-card--featured h3 {
	color: var(--hvnly--on-primary);
}

.hvnly-price-card > p {
	font-size: 13.5px;
	margin-bottom: var(--hvnly--space-10);
}

.hvnly-price-card--featured > p {
	color: rgba(255, 255, 255, 0.6);
}

.hvnly-price-amount {
	display: flex;
	align-items: baseline;
	gap: var(--hvnly--space-2);
	margin-bottom: var(--hvnly--gutter);
}

.hvnly-price-amount .num {
	font-family: var(--hvnly--font-display);
	font-size: 42px;
	font-weight: var(--hvnly--weight-extrabold);
	color: var(--hvnly--ink-900);
}

.hvnly-price-card--featured .hvnly-price-amount .num {
	color: var(--hvnly--on-primary);
}

.hvnly-price-amount .per {
	font-size: 13.5px;
	color: var(--hvnly--ink-400);
}

.hvnly-price-card--featured .hvnly-price-amount .per {
	color: rgba(255, 255, 255, 0.5);
}

.hvnly-price-card .hvnly-check-list {
	margin-bottom: var(--hvnly--space-12);
}

.hvnly-price-card--featured .hvnly-check-list li {
	color: rgba(255, 255, 255, 0.85);
}

.hvnly-price-card--featured .hvnly-check-list i {
	background: rgba(255, 255, 255, 0.12);
	color: var(--hvnly--on-primary);
}

/* ── Float card ────────────────────────────────────────────────── */
.hvnly-float-card {
	position: absolute;
	background: var(--hvnly--surface-0);
	border: 1px solid var(--hvnly--border);
	border-radius: var(--hvnly--radius-md);
	box-shadow: var(--hvnly--shadow-md);
	padding: var(--hvnly--space-6) var(--hvnly--space-7);
	display: flex;
	align-items: center;
	gap: var(--hvnly--space-5);
	font-size: var(--hvnly--text-sm);
	font-weight: var(--hvnly--weight-bold);
	color: var(--hvnly--ink-900);
	animation: hvnlyFloat 6s ease-in-out infinite;    z-index: 12;
}

.hvnly-float-card i {
	color: var(--hvnly--core-primary);
	font-size: var(--hvnly--space-7);
}

.hvnly-float-card--a {
	top: 8%;
	left: -2%;
	animation-delay: 0.5s;
}

.hvnly-float-card--b {
	bottom: 10%;
	right: -3%;
	animation-delay: 1.2s;
}

@media (max-width: 900px) {
	.hvnly-float-card {
		display: none;
	}
}

/* ── Browser frame card ────────────────────────────────────────── */
.hvnly-browser {
	position: relative;
	background: var(--hvnly--surface-0);
	border-radius: var(--hvnly--radius-xl);
	border: 1px solid var(--hvnly--border);
	box-shadow: var(--hvnly--shadow-lg);
	overflow: hidden;
	max-width: 1040px;
	margin: 0 auto;
	animation: hvnlyFloat 7s ease-in-out infinite;
	transition: var(--hvnly--transition-shadow);
}

.hvnly-browser:hover {
	box-shadow: var(--hvnly--shadow-browser-hover);
}

.hvnly-browser-bar {
	display: flex;
	align-items: center;
	gap: var(--hvnly--space-3);
	padding: var(--hvnly--space-6) var(--hvnly--space-8);
	background: var(--hvnly--surface-50);
	border-bottom: 1px solid var(--hvnly--border);
}

.hvnly-browser-bar span {
	width: var(--hvnly--space-4);
	height: var(--hvnly--space-4);
	border-radius: var(--hvnly--radius-full);
	background: var(--hvnly--ink-200);
}

.hvnly-browser-bar .hvnly-url {
	margin-left: var(--hvnly--space-6);
	font-size: 12.5px;
	color: var(--hvnly--ink-400);
	background: var(--hvnly--surface-0);
	border: 1px solid var(--hvnly--border);
	padding: var(--hvnly--space-2) var(--hvnly--space-6);
	border-radius: var(--hvnly--radius-pill);
	flex: 1;
	max-width: 320px;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;line-height: 0px;
}

.hvnly-browser-img {
	aspect-ratio: 16 / 9.4;
	width: 100%;
	object-fit: cover;
}

.hvnly-browser-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: var(--hvnly--space-19);
	height: var(--hvnly--space-19);
	border-radius: var(--hvnly--radius-full);
	background: rgba(255, 255, 255, 0.95);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hvnly--core-primary);
	font-size: var(--hvnly--space-10);
	box-shadow: 0 12px 32px rgba(17, 16, 31, 0.25);
	transition: var(--hvnly--transition-transform), var(--hvnly--transition-shadow), background var(--hvnly--duration-base) var(--hvnly--ease);
}

.hvnly-browser-play::before {
	content: '';
	position: absolute;
	inset: -10px;
	border-radius: var(--hvnly--radius-full);
	border: 2px solid rgba(255, 255, 255, 0.55);
	animation: hvnlyPulseRing 2.4s ease-out infinite;
}

.hvnly-browser-play:hover {
	transform: translate(-50%, -50%) scale(1.08);
	background: var(--hvnly--on-primary);
	box-shadow: 0 16px 40px rgba(17, 16, 31, 0.32);
}

/* ── Builder panel ─────────────────────────────────────────────── */
.hvnly-builder-panel {
	background: var(--hvnly--surface-0);
	border: 1px solid var(--hvnly--border);
	border-radius: var(--hvnly--radius-lg);
	box-shadow: var(--hvnly--shadow-md);
	padding: var(--hvnly--space-9);
}

.hvnly-builder-panel .hvnly-browser-bar {
	margin: calc(var(--hvnly--space-9) * -1) calc(var(--hvnly--space-9) * -1) var(--hvnly--space-7);
}