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

/* ── Hero ────────────────────────────────────────────────────── */
.hvnly-hero {
	position: relative;
	padding: var(--hvnly--space-21) 0 var(--hvnly--space-20);
	overflow: hidden;
	background:
		radial-gradient(900px 500px at 18% -10%, rgba(108, 96, 254, 0.16), transparent 60%),
		radial-gradient(700px 500px at 100% 10%, rgba(138, 123, 255, 0.14), transparent 60%),
		var(--hvnly--surface-0);
}

.hvnly-hero-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--hvnly--border) 1px, transparent 1px),
		linear-gradient(90deg, var(--hvnly--border) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
	opacity: 0.5;
}

.hvnly-hero-inner {
	position: relative;
	text-align: center;
	max-width: var(--hvnly--container-content);
	margin: 0 auto;
}

.hvnly-hero h1 {
	font-size: var(--hvnly--text-display-lg);
	letter-spacing: var(--hvnly--tracking-tight);
}

.hvnly-hero p.hvnly-lead {
	font-size: var(--hvnly--text-2xl);
	color: var(--hvnly--ink-400);
	max-width: 620px;
	margin: var(--hvnly--gutter) auto var(--hvnly--space-14);
}

.hvnly-hero-cta {
	display: flex;
	gap: var(--hvnly--space-6);
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: var(--hvnly--space-9);
}

.hvnly-hero-meta {
	display: flex;
	gap: var(--hvnly--space-10);
	justify-content: center;
	flex-wrap: wrap;
	font-size: 13.5px;
	color: var(--hvnly--ink-400);
	font-weight: var(--hvnly--weight-semibold);
}

.hvnly-hero-meta span {
	display: flex;
	align-items: center;
	gap: 7px;
}

.hvnly-hero-meta i {
	color: var(--hvnly--success);
}

.hvnly-hero-stage {
	position: relative;
	margin-top: var(--hvnly--space-19);
}

.hvnly-hero-glow {
	position: absolute;
	left: 50%;
	top: 36%;
	transform: translate(-50%, -50%);
	width: 70%;
	max-width: 760px;
	aspect-ratio: 1.6 / 1;
	border-radius: var(--hvnly--radius-full);
	background: var(--hvnly--core-gradient);
	opacity: 0.22;
	filter: blur(90px);
	pointer-events: none;
	z-index: 0;
}

/* ── Logo strip ──────────────────────────────────────────────── */
.hvnly-logostrip {
	padding: var(--hvnly--space-16) 0;
	border-bottom: 1px solid var(--hvnly--border);
}

.hvnly-logostrip p {
	text-align: center;
	font-size: 12.5px;
	font-weight: var(--hvnly--weight-bold);
	letter-spacing: var(--hvnly--tracking-widest);
	text-transform: uppercase;
	color: var(--hvnly--ink-400);
	margin-bottom: var(--hvnly--space-12);
}

.hvnly-logostrip-row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--hvnly--space-17);
	flex-wrap: wrap;
	opacity: 0.55;
	filter: grayscale(1);
}

.hvnly-logostrip-row i {
	font-size: 26px;
	color: var(--hvnly--ink-600);
}

/* ── Steps grid ──────────────────────────────────────────────── */
.hvnly-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--hvnly--gutter);
	position: relative;
	counter-reset: hvnly-step;
}

@media (max-width: 980px) {
	.hvnly-steps {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	.hvnly-steps {
		grid-template-columns: 1fr;
	}
}

/* ── Ecosystem grid ────────────────────────────────────────────── */
.hvnly-eco-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--hvnly--space-9);
}

@media (max-width: 980px) {
	.hvnly-eco-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	.hvnly-eco-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Product showcase (dark panel) ───────────────────────────── */
.hvnly-showcase {
	background: var(--hvnly--surface-dark);
	border-radius: var(--hvnly--radius-xl);
	padding: var(--hvnly--space-17);
	color: var(--hvnly--on-primary);
	position: relative;
	overflow: hidden;
}

.hvnly-showcase::before {
	content: '';
	position: absolute;
	width: 600px;
	height: 600px;
	border-radius: var(--hvnly--radius-full);
	background: var(--hvnly--core-gradient);
	opacity: 0.18;
	filter: blur(120px);
	top: -200px;
	right: -150px;
}

.hvnly-showcase-head {
	max-width: 600px;
	margin-bottom: var(--hvnly--space-16);
	position: relative;
}

.hvnly-showcase-head .hvnly-eyebrow {
	background: rgba(255, 255, 255, 0.08);
	color: var(--hvnly--core-secondary);
}

.hvnly-showcase-head h2 {
	color: var(--hvnly--on-primary);
	font-size: var(--hvnly--text-display-sm);
	margin-bottom: var(--hvnly--space-6);
}

.hvnly-showcase-head p {
	color: rgba(255, 255, 255, 0.6);
	font-size: 16.5px;
}

@media (max-width: 900px) {
	.hvnly-showcase {
		padding: var(--hvnly--space-14) 22px;
	}
}

/* ── Feature grid ──────────────────────────────────────────────── */
.hvnly-feature-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--hvnly--space-9);
}

@media (max-width: 980px) {
	.hvnly-feature-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.hvnly-feature-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Demo import panel ─────────────────────────────────────────── */
.hvnly-import-wrap {
	background: var(--hvnly--core-gradient);
	border-radius: var(--hvnly--radius-xl);
	padding: var(--hvnly--space-18);
	color: var(--hvnly--on-primary);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--hvnly--space-16);
	align-items: center;
	position: relative;
	overflow: hidden;
}

.hvnly-import-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
	background-size: 22px 22px;
	opacity: 0.4;
}

.hvnly-import-text {
	position: relative;
}

.hvnly-import-text .hvnly-eyebrow {
	background: rgba(255, 255, 255, 0.18);
	color: var(--hvnly--on-primary);
}

.hvnly-import-text h2 {
	color: var(--hvnly--on-primary);
	font-size: clamp(26px, 4vw, 36px);
	margin-bottom: var(--hvnly--space-7);
}

.hvnly-import-text p {
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--hvnly--space-7);
	margin-bottom: var(--hvnly--space-12);
}

.hvnly-import-media {
	position: relative;
}

.hvnly-import-media img {
	border-radius: var(--hvnly--radius-md);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

@media (max-width: 900px) {
	.hvnly-import-wrap {
		grid-template-columns: 1fr;
		padding: var(--hvnly--space-14) var(--hvnly--gutter);
	}
}

/* ── Tutorials grid ────────────────────────────────────────────── */
.hvnly-tut-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--hvnly--gutter);
}

@media (max-width: 980px) {
	.hvnly-tut-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	.hvnly-tut-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Testimonials grid ─────────────────────────────────────────── */
.hvnly-test-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--hvnly--gutter);
}

@media (max-width: 980px) {
	.hvnly-test-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	.hvnly-test-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Pricing grid ──────────────────────────────────────────────── */
.hvnly-pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--hvnly--gutter);
	align-items: start;
}

@media (max-width: 980px) {
	.hvnly-pricing-grid {
		grid-template-columns: 1fr;
		max-width: 420px;
		margin: 0 auto;
	}

	.hvnly-price-card--featured {
		transform: scale(1);
	}
}

/* ── Final CTA ─────────────────────────────────────────────────── */
.hvnly-final-cta {
	background: var(--hvnly--surface-dark);
	border-radius: var(--hvnly--radius-xl);
	padding: var(--hvnly--space-20) var(--hvnly--space-15);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.hvnly-final-cta::before {
	content: '';
	position: absolute;
	width: 700px;
	height: 700px;
	border-radius: var(--hvnly--radius-full);
	background: var(--hvnly--core-gradient);
	opacity: 0.22;
	filter: blur(140px);
	top: -300px;
	left: 50%;
	transform: translateX(-50%);
}

.hvnly-final-cta h2 {
	color: var(--hvnly--on-primary);
	font-size: var(--hvnly--text-display-md);
	position: relative;
	margin-bottom: var(--hvnly--space-7);
}

.hvnly-final-cta p {
	color: rgba(255, 255, 255, 0.62);
	font-size: 17px;
	max-width: 560px;
	margin: 0 auto var(--hvnly--space-13);
	position: relative;
}

.hvnly-final-cta .hvnly-hero-cta {
	position: relative;
}

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

figure.hvnly-test-card {
	margin: 0;
}

/* ── Homepage IA (content reduction) ─────────────────────────── */
.hvnly-home-section-foot {
	text-align: center;
	margin-top: var(--hvnly--space-14);
}

.hvnly-block-stats--home {
	padding-top: var(--hvnly--space-12);
	padding-bottom: var(--hvnly--space-12);
}

.hvnly-block-stats--home .hvnly-stats-grid {
	grid-template-columns: repeat(4, 1fr);
	padding-top: var(--hvnly--space-12);
	padding-bottom: var(--hvnly--space-12);
}

a.hvnly-eco-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

@media (max-width: 900px) {
	.hvnly-block-stats--home .hvnly-stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ======================================================
   HAVENLYTICS COMPARISON SECTION (v3new)
====================================================== */

.hvnly-cmp{position:relative; overflow:hidden;}

.hvnly-cmp-scroll{
  overflow-x:auto; overflow-y:hidden; border-radius:var(--hvnly--radius-xl);
  border:1px solid var(--hvnly--border); box-shadow:var(--hvnly--shadow-md);
  -webkit-overflow-scrolling:touch;
}
.hvnly-cmp-scroll::-webkit-scrollbar{height:8px;}
.hvnly-cmp-scroll::-webkit-scrollbar-track{background:var(--hvnly--surface-100);}
.hvnly-cmp-scroll::-webkit-scrollbar-thumb{background:var(--hvnly--ink-200); border-radius:var(--hvnly--radius-pill);}

.hvnly-cmp-table{
  width:100%; min-width:900px; border-collapse:separate; border-spacing:0;
  background:#fff; font-size:14px;
}

/* ---- Header row ---- */
.hvnly-cmp-table thead th{
  position:sticky; top:0; z-index:3; background:#fff;
  padding:24px 18px 20px; text-align:center; border-bottom:1px solid var(--hvnly--border);
  vertical-align:bottom;
}
.hvnly-cmp-th-feature{
  position:sticky; left:0; z-index:4; text-align:left !important;
  min-width:250px; background:#fff;
}
.hvnly-cmp-plugin{
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hvnly-cmp-badge{
  width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-family:var(--hvnly--font-display); font-weight:800; font-size:14px;
  background:var(--hvnly--surface-100); color:var(--hvnly--ink-600); border:1px solid var(--hvnly--border);
}
.hvnly-cmp-name{font-family:var(--hvnly--font-display); font-weight:700; font-size:13.5px; color:var(--hvnly--ink-900); white-space:nowrap;}

.hvnly-cmp-col-havenlytics{
  min-width:180px; background:var(--hvnly--core-gradient-soft);
}
.hvnly-cmp-col-havenlytics .hvnly-cmp-badge{
  background:var(--hvnly--core-gradient); color:#fff; box-shadow:0 8px 20px rgba(108,96,254,0.35);
  border:none;
}
.hvnly-cmp-col-havenlytics .hvnly-cmp-name{color:var(--hvnly--core-primary);}
.hvnly-cmp-crown{
  display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase; color:var(--hvnly--core-primary);
  background:#fff; padding:4px 10px; border-radius:var(--hvnly--radius-pill); margin-top:2px;
}

/* ---- Body ---- */
.hvnly-cmp-table td{
  padding:16px 18px; text-align:center; border-bottom:1px solid var(--hvnly--border);
  vertical-align:middle; transition:background .25s var(--hvnly--ease);
}
.hvnly-cmp-table tbody tr:last-child td{border-bottom:none;}
.hvnly-cmp-table tbody tr:hover td{background:var(--hvnly--surface-50);}
.hvnly-cmp-table tbody tr:hover td.hvnly-cmp-col-havenlytics{background:rgba(108,96,254,0.10);}

.hvnly-cmp-td-feature{
  position:sticky; left:0; z-index:2; text-align:left !important; background:#fff;
  font-family:var(--hvnly--font-display); font-weight:700; font-size:14px; color:var(--hvnly--ink-900);
}
.hvnly-cmp-table tbody tr:hover td.hvnly-cmp-td-feature{background:var(--hvnly--surface-50);}

.hvnly-cmp-col-havenlytics{background:var(--hvnly--core-gradient-soft);}

.hvnly-cmp-status{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  flex-direction:column;
}
.hvnly-cmp-status i{
  width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; flex-shrink:0;
}
.hvnly-cmp-status--yes i{background:var(--hvnly--core-gradient); color:#fff;}
.hvnly-cmp-status--partial i{background:rgba(75,72,102,0.10); color:var(--hvnly--ink-600);}
.hvnly-cmp-status--no i{background:rgba(75,72,102,0.06); color:var(--hvnly--ink-400);}
.hvnly-cmp-note{font-size:11.5px; color:var(--hvnly--ink-400); font-weight:500; max-width:130px; line-height:1.35;}
.hvnly-cmp-col-havenlytics .hvnly-cmp-note{color:var(--hvnly--core-primary); opacity:0.8;}

@media (max-width:900px){
  .hvnly-cmp-table{font-size:13px;}
  .hvnly-cmp-th-feature{min-width:190px;}
  .hvnly-cmp-table td{padding:14px 14px;}
}

.hvnly-cmp-hint{
  display:flex; align-items:center; gap:8px; justify-content:center;
  margin-top:18px; font-size:13px; color:var(--hvnly--ink-400);
}
.hvnly-cmp-hint i{color:var(--hvnly--core-primary);}

.hvnly-cmp-foot{
  max-width:720px; margin:40px auto 0; text-align:center; font-size:13px; color:var(--hvnly--ink-400); line-height:1.6;
}