/* WPNest — landing page sections. */

/* ───────── HERO ───────── */
.hero {
	position: relative;
	padding: 64px 0 80px;
	overflow: hidden;
}
.hero-grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 56px;
	align-items: center;
}
.hero h1 strong {
	color: var(--accent-text);
	font-weight: 800;
}
.hero-sub {
	font-size: 19px;
	color: var(--ink-2);
	margin-top: 24px;
	max-width: 52ch;
	line-height: 1.55;
}
.hero-cta {
	display: flex;
	gap: 12px;
	margin-top: 36px;
	flex-wrap: wrap;
}
.hero-trust {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 32px;
	font-size: 13.5px;
	color: var(--ink-3);
}
.avatars { display: flex; }
.avatars i {
	width: 28px;
	height: 28px;
	border-radius: 999px;
	border: 2px solid var(--bg);
	margin-left: -8px;
	background: linear-gradient(135deg, var(--accent-2), #f6c8a8);
	display: inline-block;
}
.avatars i:nth-child(2) { background: linear-gradient(135deg, #c8a4f6, #e6d6ff); }
.avatars i:nth-child(3) { background: linear-gradient(135deg, #a4d8f6, #d6e9ff); }
.avatars i:nth-child(4) { background: linear-gradient(135deg, #f6c8a8, #ffe9d6); }

/* Hero visual: stack of plugin cards */
.hero-visual {
	position: relative;
	height: 540px;
}
.hero-blob {
	position: absolute;
	inset: -10%;
	background:
		radial-gradient(60% 60% at 70% 30%, rgba(255,107,26,.18), transparent 65%),
		radial-gradient(50% 50% at 30% 70%, rgba(255,176,132,.25), transparent 70%);
	filter: blur(2px);
	z-index: 0;
}
.hv-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--line) 1px, transparent 1px),
		linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 32px 32px;
	mask: radial-gradient(circle at 50% 50%, black 60%, transparent);
	opacity: .5;
}
.hv-card {
	position: absolute;
	background: var(--card);
	border-radius: 18px;
	box-shadow: var(--shadow-md);
	padding: 18px;
	border: 1px solid var(--line);
}
.hv-card.lg {
	width: 360px;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%) rotate(-2deg);
	padding: 22px;
}
.hv-card.tl { width: 230px; top: 30px;  left: 0;       transform: rotate(-6deg); }
.hv-card.tr { width: 200px; top: 0;     right: 10px;   transform: rotate(4deg);  }
.hv-card.bl { width: 220px; bottom: 30px; left: 30px;  transform: rotate(3deg);  }
.hv-card.br { width: 240px; bottom: 0;  right: 0;      transform: rotate(-4deg); }
.hv-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	background: var(--accent-soft);
	color: var(--accent-text);
	font-weight: 700;
}
.hv-card h4 { font-size: 14px; margin-top: 12px; }
.hv-card p { font-size: 12px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }
.hv-card .row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 14px;
	font-size: 11.5px;
	color: var(--ink-3);
}
.hv-card .price {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--ink);
	font-size: 14px;
}
.hv-card.lg .hv-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	font-size: 22px;
}
.hv-card.lg h4 { font-size: 18px; }
.hv-card.lg p { font-size: 13.5px; }

/* ───────── Marquee logos ───────── */
.marquee {
	padding: 36px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--bg);
}
.marquee .label {
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 22px;
}
.logos {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 32px;
	align-items: center;
}
.logo-item {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--ink-3);
	opacity: .8;
	font-size: 18px;
	text-align: center;
	letter-spacing: -0.01em;
}
.logo-item .dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--ink-3);
	margin-right: 6px;
	vertical-align: 1px;
}

/* ───────── Stats ───────── */
.stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 1px solid var(--line);
	border-radius: 24px;
	overflow: hidden;
	background: var(--card);
}
.stat {
	padding: 32px 28px;
	border-right: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }
.stat .num {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 44px;
	letter-spacing: -0.03em;
	color: var(--ink);
}
.stat .num em {
	color: var(--accent-text);
	font-style: normal;
}
.stat .lbl {
	font-size: 13.5px;
	color: var(--ink-3);
	margin-top: 6px;
}

/* ───────── How it works ───────── */
.how {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.how-step {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px;
	position: relative;
}
.how-step .num {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--ink);
	color: var(--bg);
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 15px;
}
.how-step h4 { font-size: 19px; margin-top: 18px; }
.how-step p { font-size: 14px; margin-top: 8px; line-height: 1.55; }
.how-step .arrow {
	position: absolute;
	top: 38px;
	right: -18px;
	width: 36px;
	height: 1px;
	background: var(--line);
}
.how-step .arrow::after {
	content: "→";
	font-size: 18px;
	color: var(--ink-3);
	position: absolute;
	right: -2px;
	top: -12px;
	background: var(--bg);
	padding: 0 4px;
}
.how-step:last-child .arrow { display: none; }

/* ───────── Pricing ───────── */
.pricing-section {
	background: var(--card);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.pricing-toggle {
	display: inline-flex;
	padding: 4px;
	border-radius: 999px;
	background: var(--pill);
	margin: 0 auto 32px;
}
.pricing-toggle button {
	border: 0;
	background: transparent;
	height: 36px;
	padding: 0 18px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--ink-3);
	cursor: pointer;
}
.pricing-toggle button.on {
	background: var(--card);
	color: var(--ink);
	box-shadow: var(--shadow-sm);
}
.pricing-toggle .save {
	font-size: 11px;
	color: var(--green);
	margin-left: 6px;
	font-weight: 700;
}
.pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.ppl {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: relative;
}
.ppl.feat {
	border: 2px solid var(--accent);
	box-shadow: var(--shadow-lg);
	transform: translateY(-8px);
}
.ppl.feat .feat-tag {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--accent);
	color: #fff;
	font-weight: 700;
	font-size: 11px;
	padding: 6px 14px;
	border-radius: 999px;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.ppl-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 18px;
}
.ppl-desc {
	font-size: 13px;
	color: var(--ink-3);
}
.ppl-price {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 42px;
	letter-spacing: -0.03em;
}
.ppl-price small {
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-3);
}
.ppl-price .old {
	font-size: 16px;
	font-weight: 500;
	color: var(--ink-3);
	text-decoration: line-through;
	margin-right: 8px;
	vertical-align: 4px;
}
.ppl-sites {
	font-size: 12.5px;
	color: var(--ink-3);
	margin-top: -8px;
}
.ppl ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13.5px;
	color: var(--ink-2);
}
.ppl ul li {
	display: flex;
	align-items: start;
	gap: 10px;
}
.ppl ul li::before {
	content: "✓";
	color: var(--green);
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 1px;
}
.ppl ul li.dim { color: var(--ink-3); }
.ppl ul li.dim::before {
	content: "—";
	color: var(--ink-3);
}
.ppl .btn { justify-content: center; }
.pricing-footer {
	text-align: center;
	margin-top: 28px;
	font-size: 13px;
	color: var(--ink-3);
}

/* ───────── Lead Magnet ───────── */
.lm {
	background: var(--ink);
	color: var(--bg);
	border-radius: 24px;
	padding: 56px;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 48px;
	align-items: center;
	overflow: hidden;
	position: relative;
}
.lm h2 {
	color: #fff;
	font-size: 38px;
	max-width: 14ch;
}
.lm p {
	color: rgba(255,255,255,.75);
	margin-top: 14px;
	font-size: 16px;
	max-width: 40ch;
}
.lm form {
	display: flex;
	gap: 8px;
	margin-top: 24px;
	max-width: 440px;
}
.lm input[type="email"] {
	flex: 1;
	height: 50px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.2);
	background: rgba(255,255,255,.06);
	color: #fff;
	padding: 0 20px;
	font-family: inherit;
	font-size: 14.5px;
	outline: none;
}
.lm input::placeholder { color: rgba(255,255,255,.5); }
.lm input:focus { border-color: var(--accent-text); outline: none; }
.lm-trust {
	display: flex;
	gap: 16px;
	font-size: 12px;
	color: rgba(255,255,255,.5);
	margin-top: 16px;
	flex-wrap: wrap;
}
.lm-mock {
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 16px;
	padding: 22px;
	transform: rotate(-2deg);
	position: relative;
}
.lm-mock::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 16px;
	padding: 1px;
	background: linear-gradient(135deg, var(--accent), transparent);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}
.lm-mock .pdfname {
	font-family: var(--font-mono);
	font-size: 11px;
	color: rgba(255,255,255,.5);
}
.lm-mock h5 {
	color: #fff;
	font-family: var(--font-display);
	font-size: 16px;
	margin-top: 6px;
}
.lm-mock .toc {
	list-style: none;
	padding: 0;
	margin: 16px 0 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13px;
	color: rgba(255,255,255,.7);
}
.lm-mock .toc li {
	display: flex;
	align-items: start;
	gap: 10px;
	counter-increment: lm-toc;
}
.lm-mock .toc {
	counter-reset: lm-toc;
}
.lm-mock .toc li::before {
	content: counter(lm-toc);
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent-text);
	display: grid;
	place-items: center;
	font-size: 10px;
	font-weight: 800;
	flex-shrink: 0;
	margin-top: 1px;
}

/* Eyebrow on dark bg */
.eyebrow.on-dark {
	background: rgba(255,255,255,.08);
	color: #ffd5b3;
}