/* =====================================================================
   LeadCrafters — main stylesheet
   Clean white theme with purple + gold brand accents. Design system
   tokens live in :root; the phone mockup and footer locally override
   a few of them to stay dark islands within the light page.
   ===================================================================== */

:root {
	/* Brand */
	--gold: #f5c518;
	--gold-2: #ffdd55;
	--gold-ink: #93690a; /* legible amber for text/icons on white */
	--purple: #8b2fe0;
	--purple-2: #b25bff;
	--purple-deep: #4c1a8f;

	/* Surfaces */
	--bg: #ffffff;
	--bg-alt: #f6f3fb;
	--surface: #ffffff;
	--surface-2: #f3effa;
	--border: rgba(139, 47, 224, 0.14);
	--border-strong: rgba(139, 47, 224, 0.32);

	/* Text */
	--text: #1a1330;
	--text-dim: #5b5473;
	--text-faint: #8a8299;

	/* Effects */
	--glow-purple: 0 18px 40px rgba(139, 47, 224, 0.24);
	--glow-gold: 0 18px 36px rgba(245, 197, 24, 0.32);
	--card-shadow: 0 1px 2px rgba(30, 12, 60, 0.04), 0 20px 44px -20px rgba(80, 30, 160, 0.22);
	--radius: 20px;
	--radius-sm: 12px;
	--ff-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
	--ff-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Grid items default to min-width: auto, which means a child containing
   unbreakable content (a nowrap CTA button, a long heading) can force its
   whole grid track wider than the container instead of wrapping — the
   classic cause of "text runs off the edge of the screen" on mobile even
   though nothing looks obviously oversized in the CSS. Resetting it on
   every direct grid child closes that off site-wide, not just where it's
   been spotted so far. */
.hero__inner > *, .compare__grid > *, .feature-grid > *, .process-grid > *,
.values-grid > *, .stats-bar__grid > *, .crm-full__layout > *, .pricing__perks > *,
.footer-grid > *, .trustpilot__grid > *, .about-stats-card > * { min-width: 0; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: linear-gradient(120deg, #ffffff, #f7f2ff, #fffaf0, #f5f0fd, #ffffff);
	background-size: 400% 400%;
	animation: bg-flow 32s ease infinite;
	color: var(--text);
	font-family: var(--ff-body);
	font-size: 16px;
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}
/* Mobile perf: animating background-position across a 400%-sized gradient
   repaints the ENTIRE page every frame — it's a whole-page version of the
   same repaint cost the hero orbs/grid have, running for as long as the
   tab is open. Freezing it on mobile (still shows the same static
   gradient, just not drifting) removes a constant source of render
   contention that competes with the hero's transform animations right
   when the page is busiest, at load. */
@media (max-width: 900px) {
	body { animation: none; background-position: 0% 50%; }
}
@keyframes bg-flow {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { padding-left: 0; list-style: none; margin: 0; }
button { font-family: inherit; cursor: pointer; }
/* !important on these two: an old Elementor "Global Kit" stylesheet from a
   previous site build (post-10.css, still enqueued site-wide via the
   `elementor-kit-10` body class) targets bare h1/p tags with its own pale,
   dark-theme-era colors. Its compound class+tag selector out-specifies our
   plain tag selector, so without !important every heading and paragraph on
   the site silently reverts to that old kit's colors instead of ours. */
h1, h2, h3, h4 { font-family: var(--ff-display); line-height: 1.15; margin: 0 0 0.5em; font-weight: 700; color: var(--text) !important; }
p { margin: 0 0 1em; color: var(--text-dim) !important; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
.skip-link { position: fixed; top: -60px; left: 12px; background: var(--gold); color: #14100f; padding: 10px 16px; border-radius: 8px; z-index: 10000; transition: top .2s; }
.skip-link:focus { top: 12px; }

.container { width: min(1220px, 92%); margin-inline: auto; }
.section { padding: 96px 0; position: relative; }
.section--alt { background: linear-gradient(180deg, transparent, rgba(139,47,224,0.05), transparent); }

/* subtle grain overlay for texture — multiply reads as fine paper grain on a light page */
.lc-noise {
	position: fixed; inset: 0; pointer-events: none; z-index: 9999;
	opacity: 0.025; mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Shared "lifted card" elevation for white surfaces — keeps cards readable
   without borders alone having to do all the work on a white page. */
:where(.compare-card, .feature-card, .process-step, .value-card, .pricing__card,
.pricing-cta__card, .contact-info__list, .contact-form-card, .mock-search,
.mock-social, .trustpilot__card, .post-card, .about-stats-card, .contact-info__item) {
	box-shadow: var(--card-shadow);
}

/* ---------- Typography helpers ---------- */
.text-gold { color: var(--gold-ink); }
.text-gradient {
	background: linear-gradient(90deg, var(--gold), var(--purple-2) 40%, var(--purple) 60%, var(--gold-2) 85%, var(--gold));
	background-size: 300% 100%;
	-webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
	/* Gradient-clipped text needs its own generous line-height — bold display
	   glyphs can render taller than a tight inherited line-box, which silently
	   crops the top/bottom of each character. Kept inline (not inline-block) so
	   "Qualified Leads" can still wrap normally inside the heading on mobile. */
	line-height: 1.25 !important;
	animation: gradient-flow 7s ease-in-out infinite;
}
@keyframes gradient-flow {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
.eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--gold-ink); margin-bottom: 18px;
}
.eyebrow--center { justify-content: center; width: 100%; }
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: pulse-dot 1.8s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } }

.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { font-size: clamp(28px, 4vw, 42px); }
.section-head__sub { font-size: 17px; }

/* These homepage sections never picked up the shared .section padding
   (they use their own class instead of "section"), so they had ZERO
   vertical spacing of their own — each one butted straight into the
   section above/below it, with only incidental child margins (like
   .section-head's bottom margin) providing any separation at all. That's
   what made every new heading look like it was crammed against whatever
   came before it. Giving them the same rhythm as everywhere else fixes
   both the section-to-section gap and, combined with the eyebrow margin
   bump above, the eyebrow-to-heading gap. */
.compare, .crm-teaser, .industries, .pricing, .faq { padding: 68px 0; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 14px 26px; border-radius: 100px; font-weight: 600; font-size: 15px;
	border: 1px solid transparent; white-space: nowrap; position: relative; overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn--large { padding: 17px 32px; font-size: 16px; }
.btn--small { padding: 9px 18px; font-size: 13px; }
.btn::before {
	content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
	transform: skewX(-20deg); transition: left .7s ease; pointer-events: none;
}
.btn:hover::before { left: 130%; }
.btn--neon {
	background: linear-gradient(100deg, var(--purple), var(--purple-2), var(--purple-deep), var(--purple-2), var(--purple));
	background-size: 300% 100%; animation: gradient-flow 6s ease-in-out infinite;
	color: #fff !important; box-shadow: 0 0 0 rgba(178,91,255,0);
}
.btn--neon:hover { transform: translateY(-2px); box-shadow: var(--glow-purple); color: #fff !important; }
.btn--gold {
	background: linear-gradient(100deg, var(--gold), var(--gold-2), #fff2b8, var(--gold-2), var(--gold));
	background-size: 300% 100%; animation: gradient-flow 6s ease-in-out infinite;
	color: #1b1503 !important;
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: var(--glow-gold); color: #1b1503 !important; }
/* !important on every .btn variant's color (base + :hover): the old
   Elementor kit stylesheet (see the h1/p fix above) also defines default
   link/button hover colors — often white, for its old dark design — and
   its compound selector beats a plain .btn--x:hover rule on specificity.
   Without pinning color here, hovering any outline/ghost button makes the
   label turn white and vanish against these light backgrounds. */
.btn--ghost { border-color: var(--border-strong); color: var(--text) !important; }
.btn--ghost:hover { border-color: var(--purple-2); box-shadow: var(--glow-purple); transform: translateY(-2px); color: var(--text) !important; }
.btn--outline { border-color: var(--border-strong); color: var(--gold-ink) !important; }
.btn--outline:hover { border-color: var(--gold); box-shadow: var(--glow-gold); transform: translateY(-2px); color: var(--gold-ink) !important; }
.btn .btn__spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; animation: spin .7s linear infinite; }
.btn.is-loading .btn__label { opacity: .6; }
.btn.is-loading .btn__spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Header ---------- */
.site-header {
	position: sticky; top: 0; z-index: 500;
	background: rgba(255, 255, 255, 0.94);
	border-bottom: 1px solid var(--border);
	box-shadow: 0 1px 0 rgba(139,47,224,0.04), 0 12px 30px -18px rgba(80,30,160,0.18);
}
/* backdrop-filter only above the mobile-nav breakpoint: on iOS Safari (and
   modern Chrome) a filter/backdrop-filter on an ancestor becomes the
   containing block for any position:fixed descendant. The nav drawer and
   its backdrop live inside this header, so with blur active at mobile
   widths their "fixed" full-screen panel was being clipped to the header's
   own small box instead of the viewport. Desktop has no fixed-position
   descendants here, so the blur is safe to keep there. */
@media (min-width: 901px) {
	.site-header { background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 0; }
.site-logo { display: flex; align-items: center; gap: 10px; font-family: var(--ff-display); font-weight: 700; font-size: 20px; }
.site-logo__mark { display: inline-flex; filter: drop-shadow(0 0 10px rgba(245,197,24,0.45)); }
.primary-nav__list { display: flex; align-items: center; gap: 30px; }
.primary-nav__list a { font-weight: 500; font-size: 15px; color: var(--text-dim); transition: color .2s; position: relative; }
.primary-nav__list a:hover { color: var(--text); }
.primary-nav__list a::after {
	content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px;
	background: linear-gradient(90deg, var(--gold), var(--purple-2)); transition: width .25s ease;
}
.primary-nav__list a:hover::after { width: 100%; }
.site-header__actions { display: flex; align-items: center; gap: 18px; }
.header-phone { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--text-dim); }
.header-phone:hover { color: var(--gold-ink); }
.member-login-btn {
	display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
	color: var(--text-dim); border: 1px solid var(--border-strong); border-radius: 100px;
	padding: 8px 14px; white-space: nowrap; transition: all .2s ease;
}
.member-login-btn svg { flex-shrink: 0; }
.member-login-btn:hover { color: var(--purple); border-color: var(--purple-2); box-shadow: var(--glow-purple); transform: translateY(-1px); }
.header-cta__short { display: none; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s, opacity .25s; }
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 90px 0 60px; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.32; will-change: transform; }
.hero__orb--purple { width: 520px; height: 520px; background: var(--purple); top: -180px; left: -120px; animation: float-orb 14s ease-in-out infinite; }
.hero__orb--gold { width: 380px; height: 380px; background: var(--gold); bottom: -160px; right: -100px; opacity: .24; animation: float-orb 18s ease-in-out infinite reverse; }
@keyframes float-orb {
	0%, 100% { transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px)); }
	50% { transform: translate(calc(var(--parallax-x, 0px) + 40px), calc(var(--parallax-y, 0px) + 30px)); }
}
.hero__grid {
	position: absolute; inset: 0;
	background-image: linear-gradient(rgba(139,47,224,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(139,47,224,0.1) 1px, transparent 1px);
	background-size: 44px 44px;
	animation: grid-drift 22s linear infinite;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent 70%);
}
@keyframes grid-drift { from { background-position: 0 0, 0 0; } to { background-position: 88px 0, 0 88px; } }
/* Mobile perf: blur(100px) on two 500px+ orbs plus a continuously
   repainting background-position animation (grid-drift isn't a compositor
   op — it forces a repaint every frame) are heavy on mid-range phone GPUs.
   Running them at full cost right as the page is also decoding images and
   swapping in webfonts is what produces a burst of dropped frames on the
   hero's logo/phone animations before things settle — smaller/lighter
   orbs and a static grid remove that contention without changing how the
   hero looks (the grid is a faint backdrop; nobody's watching it move). */
@media (max-width: 900px) {
	.hero__orb { filter: blur(60px); }
	.hero__orb--purple { width: 320px; height: 320px; }
	.hero__orb--gold { width: 240px; height: 240px; }
	.hero__grid { animation: none; }
}
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: start; }
.hero__title { font-size: clamp(34px, 4.6vw, 58px); letter-spacing: -0.01em; }
.hero__subtitle { font-size: 18px; max-width: 560px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 16px; margin: 30px 0 26px; }
.hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; color: var(--text-faint); }
.hero__trust a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; }
.hero__trust-stars { color: var(--gold-ink); letter-spacing: 2px; }
.hero__trust-sep { opacity: .4; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.partner-badge {
	display: inline-flex; align-items: center; gap: 9px; background: var(--surface);
	border: 1px solid var(--border-strong); border-radius: 100px; padding: 10px 20px;
	font-weight: 700; font-size: 14px; color: var(--text); box-shadow: var(--card-shadow);
	transition: transform .25s ease, box-shadow .25s ease;
}
.partner-badge:hover { transform: translateY(-2px); box-shadow: var(--glow-purple); }
.hero__scroll { display: flex; justify-content: center; margin-top: 50px; }
.hero__scroll span { width: 26px; height: 42px; border: 2px solid var(--border-strong); border-radius: 100px; position: relative; display: block; }
.hero__scroll span::after { content: ''; position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; background: var(--gold); border-radius: 3px; transform: translateX(-50%); animation: scroll-dot 1.8s ease infinite; }
@keyframes scroll-dot { 0% { opacity: 1; top: 8px; } 100% { opacity: 0; top: 22px; } }

/* Interactive logo */
.hero__visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 480px; }
.hero__logo-interactive {
	position: relative; width: 240px; height: 260px; display: flex; align-items: center; justify-content: center;
	transform-style: preserve-3d; perspective: 800px; cursor: pointer;
}
.hero__logo-img { position: relative; z-index: 2; width: 100%; height: auto; filter: drop-shadow(0 0 26px rgba(245,197,24,0.5)) drop-shadow(0 0 50px rgba(178,91,255,0.35)); transition: transform .15s ease-out; animation: logo-float 5s ease-in-out infinite; will-change: transform; }
@keyframes logo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.hero__logo-ring { position: absolute; border-radius: 50%; border: 1px solid var(--border-strong); will-change: transform; }
.hero__logo-ring--1 { width: 300px; height: 300px; animation: spin-slow 16s linear infinite; }
.hero__logo-ring--2 { width: 370px; height: 370px; border-style: dashed; opacity: .5; animation: spin-slow 26s linear infinite reverse; }
/* Desktop: the logo + phone were reading too small relative to the copy
   column now that the visual sits top-aligned with the header instead of
   vertically centered — scale both up and let the rings/frame grow to match. */
@media (min-width: 1081px) {
	.hero__visual { min-height: 560px; padding-top: 6px; }
	.hero__logo-interactive { width: 300px; height: 325px; }
	.hero__logo-ring--1 { width: 375px; height: 375px; }
	.hero__logo-ring--2 { width: 460px; height: 460px; }
	.phone-mockup { width: 300px; right: 6px; bottom: -46px; }
	.phone-mockup__screen { height: 390px; }
	.phone-notifications { height: 200px; }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
.hero__logo-interactive.is-pulsing .hero__logo-img { animation: logo-pulse .6s ease; }
@keyframes logo-pulse { 0% { filter: drop-shadow(0 0 26px rgba(245,197,24,0.5)) drop-shadow(0 0 50px rgba(178,91,255,0.35)); } 40% { filter: drop-shadow(0 0 50px rgba(245,197,24,0.9)) drop-shadow(0 0 90px rgba(178,91,255,0.7)); } 100% { filter: drop-shadow(0 0 26px rgba(245,197,24,0.5)) drop-shadow(0 0 50px rgba(178,91,255,0.35)); } }

/* Phone mockup — a self-contained "dark app UI" island: locally
   overrides the shared tokens back to a dark palette so it keeps
   reading as a phone screenshot regardless of the site's light theme. */
.phone-mockup {
	--bg-alt: #140f24; --surface-2: #1a1530;
	--border: rgba(178,91,255,0.22); --border-strong: rgba(178,91,255,0.45);
	--text: #f4f2fa; --text-dim: #b8b2cc; --text-faint: #8a83a3;
	position: absolute; right: -10px; bottom: -30px; width: 230px; animation: phone-hover 6s ease-in-out infinite;
	will-change: transform;
}
@keyframes phone-hover { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-18px) rotate(1deg); } }
.phone-mockup__glow { position: absolute; inset: 10% -20% -10% -20%; background: radial-gradient(ellipse at center, rgba(178,91,255,0.45), transparent 70%); filter: blur(20px); z-index: -1; }
.phone-mockup__body {
	background: #0c0916; border: 3px solid #241c3c; border-radius: 34px; padding: 10px;
	box-shadow: 0 25px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(178,91,255,0.15), var(--glow-purple);
}
.phone-mockup__notch { width: 60px; height: 16px; background: #0c0916; border-radius: 0 0 14px 14px; margin: 0 auto; position: relative; z-index: 2; }
.phone-mockup__screen { background: linear-gradient(180deg, #14102a, #0a0714); border-radius: 22px; padding: 12px; margin-top: -14px; height: 300px; overflow: hidden; }
.phone-app-bar { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.phone-app-bar__dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #33e08a; box-shadow: 0 0 6px #33e08a; }
.phone-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.phone-stat { background: rgba(178,91,255,0.08); border: 1px solid var(--border); border-radius: 10px; padding: 6px 5px; text-align: center; }
.phone-stat__label { display: block; font-size: 8px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
.phone-stat__value { display: block; font-size: 13px; font-weight: 700; color: var(--gold); }
.phone-stat__delta { display: block; font-size: 8px; color: #33e08a; }
.phone-notifications { display: flex; flex-direction: column; gap: 6px; height: 150px; overflow: hidden; }
.phone-notif { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 9px; font-size: 10px; display: flex; gap: 7px; align-items: flex-start; animation: notif-in .4s ease both; }
.phone-notif__icon { font-size: 13px; line-height: 1; }
.phone-notif strong { display: block; color: var(--text); font-size: 10.5px; }
.phone-notif span { color: var(--text-faint); font-size: 9.5px; }
@keyframes notif-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.phone-notif.is-leaving { animation: notif-out .35s ease forwards; }
@keyframes notif-out { to { opacity: 0; transform: translateX(30px) scale(.9); } }

.phone-toast { position: absolute; z-index: 5; display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 14px; padding: 10px 14px; font-size: 11px; min-width: 168px; box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 20px rgba(178,91,255,0.25); opacity: 0; }
.phone-toast strong { display: block; font-size: 11.5px; }
.phone-toast span { color: var(--text-faint); font-size: 10px; }
.phone-toast--1 { left: -150px; top: -18px; animation: toast-ping 6s ease-in-out infinite; }
.phone-toast--2 { left: -178px; top: 128px; animation: toast-ping 6s ease-in-out infinite 2s; }
.phone-toast--3 { left: -150px; top: 274px; animation: toast-ping 6s ease-in-out infinite 4s; }
@keyframes toast-ping {
	0% { opacity: 0; transform: translateX(24px) scale(.85); }
	10% { opacity: 1; transform: translateX(0) scale(1); }
	80% { opacity: 1; transform: translateX(0) scale(1); }
	100% { opacity: 0; transform: translateX(-12px) scale(.9); }
}

/* ---------- Stats bar ---------- */
.stats-bar { padding: 50px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-alt); }
.stats-bar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat__value { display: block; font-family: var(--ff-display); font-size: clamp(30px, 4vw, 44px); font-weight: 700; line-height: 1.25 !important; background: linear-gradient(90deg, var(--gold), var(--purple-2)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.stat__label { font-size: 13px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Compare (Google vs Facebook) ---------- */
.compare__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch; }
.compare-card {
	background: linear-gradient(180deg, var(--surface), var(--surface-2));
	border: 1px solid var(--border); border-radius: var(--radius); padding: 38px 32px;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.compare-card:hover { transform: translateY(-6px); }
.compare-card--google:hover { border-color: rgba(178,91,255,0.55); box-shadow: var(--glow-purple); }
.compare-card--facebook:hover { border-color: rgba(245,197,24,0.55); box-shadow: var(--glow-gold); }
.compare-card__icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: rgba(178,91,255,0.12); color: var(--purple-2); margin-bottom: 18px; }
.compare-card--facebook .compare-card__icon { background: rgba(245,197,24,0.14); color: var(--gold-ink); }
.compare-card h3 { font-size: 24px; margin-bottom: 4px; }
.compare-card__tag { color: var(--gold-ink); font-weight: 600; font-size: 14px; margin-bottom: 14px; }
.compare__vs { display: flex; align-items: center; justify-content: center; }
.compare__vs span { font-family: var(--ff-display); font-weight: 700; font-size: 15px; color: var(--text-faint); width: 46px; height: 46px; border: 1px solid var(--border-strong); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-alt); }
.check-list li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--text-dim); font-size: 15px; }
.check-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--gold-ink); font-weight: 700; }
.check-list--tight li { font-size: 14px; margin-bottom: 8px; }
.compare-card__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* ---------- Feature grid (CRM) ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-card {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
	padding: 30px 26px; position: relative; overflow: hidden; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--card-accent, var(--purple-2)); }
.feature-card--green { --card-accent: #33e08a; } .feature-card--purple { --card-accent: var(--purple-2); }
.feature-card--blue { --card-accent: #4aa8ff; } .feature-card--pink { --card-accent: #ff5fa2; }
.feature-card--gold { --card-accent: var(--gold); } .feature-card--teal { --card-accent: #2ee0c8; }
.feature-card:hover { transform: translateY(-6px); border-color: var(--card-accent); box-shadow: 0 0 30px color-mix(in srgb, var(--card-accent) 35%, transparent); }
.feature-card__icon { font-size: 30px; display: inline-block; margin-bottom: 14px; }
.feature-card h3 { font-size: 18px; margin-bottom: 8px; }
.feature-card p { font-size: 14.5px; margin-bottom: 14px; }
.feature-card__tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--card-accent); }
.feature-card__badge { position: absolute; top: 16px; right: 16px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 5px 10px; border-radius: 20px; }
.feature-card--included .feature-card__badge { background: rgba(51,224,138,0.14); color: #1e9a63; }
.feature-card--addon .feature-card__badge { background: var(--bg-alt); color: var(--text-faint); border: 1px solid var(--border-strong); }
.crm-teaser__note { max-width: 720px; margin: 26px auto 0; text-align: center; font-size: 13.5px; color: var(--text-faint); }
.crm-teaser__cta { text-align: center; margin-top: 42px; }

/* ---------- Industries ---------- */
.industries__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.chip { border: 1px solid var(--border-strong); border-radius: 100px; padding: 10px 20px; font-size: 14px; color: var(--text-dim); transition: all .25s ease; }
.chip:hover { border-color: var(--gold); color: var(--gold-ink); box-shadow: var(--glow-gold); }

/* ---------- Pricing ---------- */
.pricing__card {
	max-width: 900px; margin: 0 auto; background: linear-gradient(160deg, var(--surface), var(--surface-2));
	border: 1px solid var(--border-strong); border-radius: 28px; padding: 44px; position: relative; overflow: hidden;
}
.pricing__card::after { content: ''; position: absolute; width: 340px; height: 340px; background: var(--purple); filter: blur(120px); opacity: .16; top: -140px; right: -100px; animation: blob-drift 12s ease-in-out infinite; }
@keyframes blob-drift { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px, 20px) scale(1.12); } }
.pricing__header { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: flex-end; padding-bottom: 28px; border-bottom: 1px solid var(--border); margin-bottom: 28px; }
.pricing__header h3 { font-size: 24px; margin-bottom: 4px; }
.pricing__figures { display: flex; align-items: baseline; gap: 12px; }
.pricing__figure { text-align: right; }
.pricing__amount { display: block; font-family: var(--ff-display); font-size: 34px; font-weight: 700; color: var(--text) !important; }
.pricing__figure--gold .pricing__amount { color: var(--gold-ink) !important; }
.pricing__period { font-size: 12px; color: var(--text-faint); }
.pricing__plus { font-size: 22px; color: var(--text-faint); }
.pricing__perks { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 30px; margin-bottom: 32px; }
.pricing__perk { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--text-dim); }
.pricing__footer { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.pricing__badges { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--text-faint); }
.pricing__note { margin-top: 24px; font-size: 13px; color: var(--text-faint); }

/* ---------- FAQ ---------- */
.faq__list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq__item {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
	box-shadow: var(--card-shadow); overflow: hidden;
}
.faq__question {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 20px 24px; cursor: pointer; font-weight: 600; font-size: 16px; color: var(--text) !important;
	list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { content: ''; }
.faq__icon { flex-shrink: 0; color: var(--purple-2); transition: transform .25s ease; }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__item[open] .faq__question { border-bottom: 1px solid var(--border); }
.faq__answer { margin: 0; padding: 4px 24px 20px; color: var(--text-dim) !important; font-size: 14.5px; line-height: 1.65; }

/* Compact pricing recap (Google / Facebook pages) */
.pricing-cta__card { background: linear-gradient(160deg, var(--surface), var(--surface-2)); border: 1px solid var(--border-strong); border-radius: 28px; padding: 44px; display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: space-between; align-items: center; }
.pricing-cta__trust { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--text-faint); }
.pricing-cta__figures { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 20px; flex-wrap: wrap; }
.pricing-cta__amount { font-family: var(--ff-display); font-size: 30px; font-weight: 700; color: var(--text) !important; }
.pricing-cta__amount--gold { color: var(--gold-ink) !important; }
.pricing-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.pricing-cta__label { font-size: 12px; color: var(--text-faint); }
.pricing-cta__plus { color: var(--text-faint); font-size: 20px; }

/* ---------- Trustpilot ---------- */
.trustpilot__card { max-width: 560px; margin: 0 auto; text-align: center; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 40px; }
.trustpilot__stars { color: #00b67a; font-size: 28px; letter-spacing: 4px; margin-bottom: 10px; }
.trustpilot__lead { font-size: 16px; color: var(--text); margin-bottom: 20px; }
.trustpilot__hint { font-size: 12px; color: var(--text-faint); margin-top: 18px; }
.trustbox { max-width: 900px; margin: 0 auto; }
.trustpilot__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--card-shadow); transition: transform .3s ease, border-color .3s ease; }
.review-card:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.review-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.review-card__avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--purple); }
.review-card__avatar[data-i="0"] { background: #f6d9a8; }
.review-card__avatar[data-i="1"] { background: #e6ddfb; }
.review-card__avatar[data-i="2"] { background: #ffe0ec; }
.review-card__avatar[data-i="3"] { background: #d8f3e6; }
.review-card__who { display: flex; flex-direction: column; line-height: 1.3; margin-right: auto; }
.review-card__who strong { font-size: 14.5px; color: var(--text); }
.review-card__who span { font-size: 12px; color: var(--text-faint); }
.review-card__date { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.review-card__stars { color: #00b67a; letter-spacing: 3px; font-size: 15px; margin-bottom: 10px; }
.review-card__title { font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 8px; }
.review-card__text { font-size: 14px; color: var(--text-dim); margin: 0; }
.trustpilot { padding: 68px 0; }
.trustpilot__more { text-align: center; margin-top: 34px; margin-bottom: 8px; }

/* ---------- Service page hero (Google / Facebook / About / Contact) ---------- */
.service-hero { position: relative; padding: 90px 0 70px; overflow: hidden; text-align: center; }
.service-hero .container { position: relative; z-index: 1; max-width: 860px; }
.service-hero h1 { font-size: clamp(30px, 4.4vw, 50px); margin-bottom: 20px; }
.service-hero__sub { font-size: 18px; max-width: 680px; margin: 0 auto 10px; }
.service-hero .hero__cta { justify-content: center; margin-top: 26px; }

/* ---------- Split layout ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split__copy h2 { font-size: clamp(24px, 3.2vw, 34px); }
.split__copy p { font-size: 16px; }

.mock-search { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.mock-search__bar { display: flex; align-items: center; gap: 10px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 100px; padding: 12px 18px; margin-bottom: 18px; color: var(--text-faint); font-size: 14px; }
.mock-search__result { padding: 14px 0; border-top: 1px solid var(--border); }
.mock-search__result:first-of-type { border-top: none; }
.mock-search__result--ad strong { color: var(--purple-2); }
.mock-search__badge { display: inline-block; font-size: 10px; font-weight: 700; background: rgba(178,91,255,0.18); color: var(--purple-2); padding: 2px 7px; border-radius: 5px; margin-bottom: 6px; }
.mock-search__url { display: block; font-size: 12px; color: #33e08a; margin: 2px 0 4px; }

.mock-social { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; max-width: 380px; margin: 0 auto; }
.mock-social__header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.mock-social__avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--purple-2)); display: inline-block; }
.mock-social__header strong { display: block; font-size: 14px; }
.mock-social__header span { font-size: 11px; color: var(--text-faint); }
.mock-social__media { background: linear-gradient(135deg, var(--purple-deep), var(--purple)); height: 220px; display: flex; align-items: center; justify-content: center; font-size: 46px; }
.mock-social__caption { padding: 14px 16px 0; font-size: 14px; color: var(--text-dim); }
.mock-social__cta { margin: 14px 16px 16px; background: var(--surface-2); border: 1px solid var(--border-strong); text-align: center; padding: 10px; border-radius: 10px; font-weight: 600; font-size: 13px; color: var(--gold-ink); }

/* ---------- Process steps ---------- */
.process-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.process-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 24px 20px; transition: transform .25s ease, border-color .25s ease; }
.process-step:hover { transform: translateY(-6px); border-color: var(--border-strong); }
.process-step__num { display: block; font-family: var(--ff-display); font-size: 26px; font-weight: 700; color: transparent; -webkit-text-stroke: 1px var(--purple-2); margin-bottom: 12px; }
.process-step h3 { font-size: 15.5px; margin-bottom: 8px; }
.process-step p { font-size: 13.5px; }

/* ---------- CRM full walkthrough (Facebook page) ---------- */
.crm-full__layout { display: grid; grid-template-columns: 1fr 320px 1fr; gap: 22px; align-items: start; }
.crm-full__col { display: flex; flex-direction: column; gap: 22px; }
.crm-full__phone { position: sticky; top: 100px; display: flex; justify-content: center; }
/* Device frame — a real phone bezel (matching the hero's phone mockup
   chrome) with the CRM's actual login screen inside, instead of a flat
   screenshot/collage graphic. object-fit: contain + a matching near-black
   background means the screenshot's own dark UI sits flush in the screen
   with no cropping and no visible letterboxing. */
.device-frame {
	position: relative; width: 260px; max-width: 100%; aspect-ratio: 9 / 18.5;
	background: #0c0916; border: 3px solid #241c3c; border-radius: 40px; padding: 14px 10px;
	box-shadow: 0 25px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(178,91,255,0.15), var(--glow-purple);
}
.device-frame__notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 70px; height: 16px; background: #0c0916; border-radius: 0 0 14px 14px; z-index: 2; }
.device-frame img, .device-frame video { width: 100%; height: 100%; object-fit: contain; background: #000; border-radius: 26px; display: block; }

/* ---------- Video cards (founder intro, testimonials, promo) ---------- */
.video-card {
	position: relative; border-radius: var(--radius); overflow: hidden; background: #000;
	aspect-ratio: 9 / 16; max-width: 320px; margin: 0 auto; box-shadow: var(--card-shadow);
}
.video-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-card__play {
	position: absolute; inset: 0; width: 100%; height: 100%; border: none; padding: 0; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	background: rgba(10, 5, 20, 0.32); transition: opacity .2s ease, background .2s ease;
}
.video-card__play:hover { background: rgba(10, 5, 20, 0.42); }
.video-card__play svg { width: 60px; height: 60px; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.4)); }
.video-card.is-playing .video-card__play { opacity: 0; pointer-events: none; }
.founder-intro .split__visual { display: flex; justify-content: center; }
.video-testimonials__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 660px; margin: 0 auto; }
@media (max-width: 640px) {
	.video-testimonials__grid { grid-template-columns: 1fr; max-width: 320px; }
}

/* ---------- Values grid (About) ---------- */
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.value-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 26px 22px; text-align: center; transition: transform .25s ease, border-color .25s ease; }
.value-card:hover { transform: translateY(-6px); border-color: var(--border-strong); }
.value-card__icon { font-size: 30px; display: inline-block; margin-bottom: 12px; }
.value-card h3 { font-size: 16px; margin-bottom: 8px; }
.value-card p { font-size: 13.5px; }

.about-stats-card { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.about-stat__value { display: block; font-family: var(--ff-display); font-size: 32px; font-weight: 700; color: var(--gold-ink); }
.about-stat__label { font-size: 13px; color: var(--text-faint); }

/* ---------- Contact page ---------- */
.contact-section { padding-top: 60px; }
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 50px; align-items: start; }
.contact-info h2 { font-size: 26px; }
.contact-info__item { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 12px; transition: border-color .2s ease, transform .2s ease; }
.contact-info__item:hover { border-color: var(--border-strong); transform: translateX(4px); }
.contact-info__icon { font-size: 20px; }
.contact-info__item strong { display: block; font-size: 14px; }
.contact-info__item span { font-size: 13px; color: var(--text-faint); }
.contact-info__list { margin-top: 30px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 22px; }
.contact-info__list h3 { font-size: 15px; margin-bottom: 12px; }
.contact-info__list ol { counter-reset: step; display: flex; flex-direction: column; gap: 10px; }
.contact-info__list li { counter-increment: step; position: relative; padding-left: 30px; font-size: 13.5px; color: var(--text-dim); }
.contact-info__list li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 20px; height: 20px; border-radius: 50%; background: rgba(245,197,24,0.18); color: var(--gold-ink); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.contact-form-wrap { display: flex; flex-direction: column; gap: 20px; }
.contact-form-card { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 34px; }
.contact-form-card h2 { font-size: 22px; margin-bottom: 20px; }
.contact-form-card--embed { padding: 0; overflow: hidden; }
.contact-form-card--embed iframe { width: 100%; height: 620px; border: 0; display: block; }
.form-row { margin-bottom: 16px; }
.form-row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-dim); }
.form-row input, .form-row select, .form-row textarea {
	width: 100%; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px;
	padding: 12px 14px; color: var(--text); font-size: 14.5px; font-family: inherit; transition: border-color .2s ease, box-shadow .2s ease;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--purple-2); box-shadow: 0 0 0 3px rgba(178,91,255,0.2); }
.form-row--honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.contact-form__status { margin-top: 14px; font-size: 14px; min-height: 20px; }
.contact-form__status.is-success { color: #33e08a; }
.contact-form__status.is-error { color: #ff6b6b; }

/* Free audit capture form */
.free-audit__card { max-width: 560px; margin: 0 auto; }
.free-audit__card .btn { width: 100%; justify-content: center; }
.contact-form button[type="submit"] { width: 100%; margin-top: 6px; }

/* ---------- CTA band ---------- */
.cta-band {
	padding: 60px 0; position: relative; overflow: hidden;
	background: linear-gradient(110deg, var(--purple-deep), var(--purple) 35%, var(--purple-2) 55%, var(--purple) 75%, var(--purple-deep));
	background-size: 300% 100%; animation: gradient-flow 10s ease-in-out infinite;
}
.cta-band::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px); background-size: 26px 26px; opacity: .4; }
.cta-band__inner { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
/* !important: needed to beat the global h1-h4/p !important rules added
   above for the Elementor-kit fix — those force dark ink everywhere by
   default, but this band sits on a solid purple background and genuinely
   needs light text, so it has to explicitly win that fight here. */
.cta-band h2 { font-size: 28px; margin-bottom: 6px; color: #fff !important; }
.cta-band p { color: rgba(255,255,255,0.85) !important; margin-bottom: 0; max-width: 480px; }
.cta-band p.cta-band__note { margin-top: 10px !important; font-size: 12.5px; color: rgba(255,255,255,0.6) !important; }

/* ---------- Footer ---------- */
/* Dark island for contrast against the light page — locally overrides
   the shared tokens so every descendant rule below (which references
   var(--text), var(--border) etc.) re-themes automatically. */
.site-footer {
	--bg-alt: #140a24; --surface: #1a1030; --surface-2: #1e1436;
	--text: #f4f2fa; --text-dim: #c9c2dd; --text-faint: #9186ab;
	--border: rgba(255,255,255,0.12); --border-strong: rgba(255,255,255,0.24);
	--gold-ink: var(--gold);
	background: #120a1f; border-top: 1px solid var(--border); padding: 70px 0 0; color: var(--text-dim);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; }
.footer-brand p { font-size: 14px; margin: 14px 0 18px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 36px; height: 36px; border: 1px solid var(--border-strong); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; transition: all .2s ease; }
.footer-social a:hover { border-color: var(--gold); color: var(--gold); }
.footer-widget__title, .footer-col > h4 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--text); margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: var(--text-dim); }
.footer-col a:hover { color: var(--gold); }
.footer-bottom { border-top: 1px solid var(--border); padding: 22px 0; }
.footer-bottom__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-faint); }
.footer-trust { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal a { color: var(--text-faint); transition: color .2s ease; }
.footer-legal a:hover { color: var(--gold); }

/* ---------- Generic page fallback ---------- */
.page-generic__header { text-align: center; margin-bottom: 40px; }
.page-generic__content { max-width: 760px; margin: 0 auto; }
.page-generic__content h2 { margin-top: 2em; font-size: 24px; }
.page-generic__content h3 { margin-top: 1.5em; font-size: 19px; }
.page-generic__content ul, .page-generic__content ol { list-style: disc; padding-left: 22px; margin: 0 0 1em; }
.page-generic__content ol { list-style: decimal; }
.page-generic__content li { margin-bottom: 6px; color: var(--text-dim); }
.page-generic__content a { color: var(--purple-2); text-decoration: underline; }
.page-generic__content a:hover { color: var(--purple); }

/* ---------- Blog fallback ---------- */
.post-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.post-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.post-card__thumb img { aspect-ratio: 16/9; object-fit: cover; }
.post-card__title { font-size: 18px; padding: 18px 18px 0; }
.post-card__excerpt { padding: 8px 18px 18px; font-size: 14px; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1080px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__visual { min-height: 380px; margin-top: 40px; }
	/* Once the hero collapses to one column, center the copy so it lines up
	   with the centered logo/phone visual below it instead of sitting
	   ragged-left next to a centered graphic. */
	.hero__copy { text-align: center; }
	.hero__cta { justify-content: center; }
	.hero__trust { justify-content: center; }
	.crm-full__layout { grid-template-columns: 1fr; }
	.crm-full__phone { position: static; max-width: 380px; margin: 0 auto; }
	.process-grid { grid-template-columns: repeat(3, 1fr); }
	.values-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Sticky mobile CTA bar ---------- */
/* Hidden by default (desktop); shown only inside the max-width:900px block
   below, same breakpoint as the hamburger nav. This base rule (with
   display:none) has to come BEFORE that media query in the file — CSS
   applies rules in source order when specificity ties, so a plain rule
   placed after a media query always wins over it regardless of viewport,
   which quietly kept this bar hidden on mobile too when it lived below.
   Kept off .site-header (no backdrop-filter) so it doesn't hit the same
   iOS fixed-position bug fixed for the nav drawer. */
.sticky-cta {
	display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 255, 255, 0.97);
	border-top: 1px solid var(--border);
	box-shadow: 0 -10px 30px -12px rgba(80, 30, 160, 0.28);
}
.sticky-cta__btn { width: 100%; justify-content: center; }

/* ---------- WhatsApp click-to-chat ---------- */
.whatsapp-fab {
	position: fixed; right: 20px; bottom: 24px; z-index: 310;
	width: 56px; height: 56px; border-radius: 50%;
	background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 10px 26px -8px rgba(0,0,0,0.4), 0 0 0 rgba(37,211,102,0.5);
	transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 32px -8px rgba(0,0,0,0.45); }
/* Sits above the full-width sticky CTA bar on mobile instead of behind it. */
@media (max-width: 900px) {
	.whatsapp-fab { right: 16px; bottom: 92px; width: 50px; height: 50px; }
}

@media (max-width: 900px) {
	/* Mobile nav: a true left-edge slide-in drawer over a dimmed backdrop,
	   rather than a full-width fade — feels like a native app menu. */
	.primary-nav {
		position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 82vw);
		background: var(--bg); padding: 100px 30px 40px; overflow-y: auto;
		transform: translateX(-100%); pointer-events: none; z-index: 401;
		box-shadow: 24px 0 60px -20px rgba(20, 8, 45, 0.35);
		transition: transform .45s cubic-bezier(.16, 1, .3, 1);
	}
	.primary-nav.is-open { transform: translateX(0); pointer-events: auto; }
	.nav-backdrop {
		position: fixed; inset: 0; background: rgba(20, 10, 40, 0.4); backdrop-filter: blur(2px);
		opacity: 0; pointer-events: none; transition: opacity .35s ease; z-index: 400;
	}
	.nav-backdrop.is-open { opacity: 1; pointer-events: auto; }
	body.nav-locked { overflow: hidden; }
	.primary-nav__list { flex-direction: column; align-items: flex-start; gap: 22px; }
	.primary-nav__list a { font-size: 20px; }
	.nav-toggle { display: flex; }
	.site-header__actions { gap: 10px; }
	.site-header__actions .header-phone { display: none; }
	.compare__grid { grid-template-columns: 1fr; }
	.compare__vs { transform: rotate(90deg); margin: -6px 0; }
	.feature-grid { grid-template-columns: repeat(2, 1fr); }
	.stats-bar__grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
	.split { grid-template-columns: 1fr; }
	.contact-grid { grid-template-columns: 1fr; }
	.pricing__perks { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.trustpilot__grid { grid-template-columns: 1fr 1fr; }
	.sticky-cta { display: block; }
	body { padding-bottom: 78px; }
	body.nav-locked .sticky-cta { display: none; }
}

@media (max-width: 640px) {
	.section { padding: 64px 0; }
	.feature-grid { grid-template-columns: 1fr; }
	.process-grid { grid-template-columns: 1fr; }
	.values-grid { grid-template-columns: 1fr; }
	.stats-bar__grid { grid-template-columns: 1fr 1fr; }
	.trustpilot__grid { grid-template-columns: 1fr; }
	/* Keep every section heading centered and consistently sized on small
	   screens — component headings (feature/review cards etc.) stay
	   left-aligned within their own card, only page-level titles center. */
	.compare-card h3, .pricing-cta__card h2, .pricing-cta__card p.eyebrow { text-align: left; }
	.section-head h2, .section-head p, .section-head .eyebrow { text-align: center; }
	.pricing__header { flex-direction: column; align-items: flex-start; }
	.pricing__figures { align-self: stretch; justify-content: space-between; }
	.form-row--split { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; }
	.cta-band__inner { flex-direction: column; text-align: center; }
	.phone-mockup { position: relative; margin: 30px auto 0; }
	.phone-toast { display: none; }
	.hero__logo-interactive { margin: 0 auto; }
	.member-login-btn span { display: none; }
	.member-login-btn { padding: 9px; }
	.btn--small { padding: 9px 14px; font-size: 12.5px; }
	.site-header__actions { gap: 8px; }
	.site-logo { gap: 7px; }
	.site-logo__text { font-size: 17px; }
	.site-logo__mark img { width: 32px; height: auto; }
	.header-cta__full { display: none; }
	.header-cta__short { display: inline; }
	.nav-toggle { padding: 6px 4px; }
}

@media (max-width: 360px) {
	.site-logo__text { display: none; }
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Extra idle / hover motion ---------- */
.feature-card__icon { animation: icon-bob 3.6s ease-in-out infinite; }
.feature-card:nth-of-type(2n) .feature-card__icon { animation-delay: .5s; }
.feature-card:nth-of-type(3n) .feature-card__icon { animation-delay: 1s; }
@keyframes icon-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.value-card__icon { animation: icon-bob 4s ease-in-out infinite; }
.value-card:nth-of-type(2n) .value-card__icon { animation-delay: .6s; }
.value-card:nth-of-type(3n) .value-card__icon { animation-delay: 1.2s; }

.compare-card__icon { transition: transform .35s ease; }
.compare-card:hover .compare-card__icon { transform: rotate(-8deg) scale(1.12); }

.process-step__num { animation: num-glow 4.5s ease-in-out infinite; }
.process-step:nth-of-type(2) .process-step__num { animation-delay: .3s; }
.process-step:nth-of-type(3) .process-step__num { animation-delay: .6s; }
.process-step:nth-of-type(4) .process-step__num { animation-delay: .9s; }
.process-step:nth-of-type(5) .process-step__num { animation-delay: 1.2s; }
@keyframes num-glow { 0%, 100% { -webkit-text-stroke-color: var(--purple-2); } 50% { -webkit-text-stroke-color: var(--gold); } }

.chip { transition: transform .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; }
.chip:hover { transform: translateY(-3px) scale(1.03); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}