:root {
	--bg: #06080f;
	--bg-soft: #0a0f1f;
	--text: #ffffff;
	--muted: rgba(255, 255, 255, 0.76);
	--line: rgba(255, 255, 255, 0.16);
	--surface: rgba(255, 255, 255, 0.06);
	--surface-strong: rgba(255, 255, 255, 0.1);
	--shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
	--orange: #ff6a00;
	--orange-soft: #ff8c33;
	--navy: #11162a;
	--radius: 1.5rem;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: "Outfit", sans-serif;
	color: var(--text);
	background: var(--bg);
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
select,
textarea {
	font: inherit;
}

select {
	color: white;
	background-color: #0A0F1F;
}

select option {
	color: black;
}

h1,
h2,
h3,
.brand-mark {
	font-family: "Sora", sans-serif;
}

h1,
h2,
h3,
p {
	margin: 0;
}

p {
	color: var(--muted);
	line-height: 1.65;
}

.landing-page {
	position: relative;
	overflow-x: hidden;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(6, 8, 15, 0.72);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.header-shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 4.75rem;
}

.header-brand {
	font-family: "Sora", sans-serif;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--orange-soft);
}

.header-brand img {
	display: block;
	height: 3rem;
	width: auto;
}

.header-nav {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	color: rgba(255, 255, 255, 0.72);
}

.header-nav a:hover,
.footer-nav a:hover {
	color: #ffffff;
}

.header-cta {
	min-height: 2.9rem;
	padding: 0.7rem 1rem;
	font-size: 0.92rem;
	box-shadow: none;
}

.shell {
	width: min(1120px, calc(100% - 3rem));
	margin: 0 auto;
}

.hero-section,
.demo-section,
.how-section,
.benefits-section,
.cta-section {
	padding: 5rem 0;
}

.hero-section {
	min-height: 100vh;
	display: flex;
	align-items: center;
	text-align: center;
	background:
		radial-gradient(circle at 20% 20%, rgba(255, 106, 0, 0.18), transparent 22%),
		radial-gradient(circle at 78% 28%, rgba(255, 255, 255, 0.08), transparent 18%),
		linear-gradient(135deg, #0a0f1f 0%, #11162a 54%, #05060b 100%);
}

.hero-shell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	animation: fade-up 700ms ease;
}

.hero-kicker,
.section-kicker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.74);
}

.hero-kicker {
	margin-bottom: 1rem;
}

.section-kicker {
	margin-bottom: 1rem;
	color: var(--orange-soft);
}

.brand-mark {
	margin-bottom: 1.5rem;
	font-size: 0.92rem;
	font-weight: 800;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--orange-soft);
}

.brand-mark img {
	display: block;
	width: min(19rem, 72vw);
	height: auto;
	margin: 0 auto;
}

h1 {
	max-width: 16ch;
	font-size: clamp(3rem, 7vw, 5.8rem);
	line-height: 1.04;
	letter-spacing: -0.04em;
}

h2 {
	font-size: clamp(2.2rem, 4.2vw, 3.25rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
}

h3 {
	font-size: 1.4rem;
	line-height: 1.2;
}

.hero-copy {
	max-width: 40rem;
	margin-top: 1.5rem;
	font-size: 1.125rem;
	color: rgba(255, 255, 255, 0.9);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 2rem;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.75rem;
	padding: 0.95rem 1.6rem;
	border: 1px solid transparent;
	border-radius: 1.25rem;
	font-weight: 700;
	transition: transform 180ms ease, opacity 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.button:hover,
.button:focus-visible,
button:hover,
button:focus-visible {
	transform: translateY(-2px);
}

.button-primary {
	background: var(--orange);
	color: #05050c;
	box-shadow: var(--shadow);
}

.button-secondary {
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.06);
	color: #ffffff;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.button-gradient {
	width: 100%;
	cursor: pointer;
	background: linear-gradient(90deg, var(--orange), var(--orange-soft));
	color: #05050c;
	box-shadow: 0 18px 40px rgba(255, 106, 0, 0.24);
}

.hero-proof {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
	margin-top: 2rem;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.82);
}

.hero-proof span {
	padding: 0.25rem 0;
}

.hero-stack {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	width: 100%;
	max-width: 62rem;
	margin-top: 2.5rem;
}

.hero-stack-card {
	padding: 1.1rem 1.15rem;
	text-align: left;
	border-radius: 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.hero-stack-card strong {
	display: block;
	font-family: "Sora", sans-serif;
	font-size: 1rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffffff;
}

.hero-stack-card p {
	margin-top: 0.5rem;
	font-size: 0.95rem;
}

.demo-section,
.benefits-section {
	position: relative;
	background: var(--bg-soft);
}

.how-section {
	background: linear-gradient(180deg, #070a11 0%, #0b1120 100%);
}

.demo-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
	gap: 3rem;
	align-items: center;
	position: relative;
	z-index: 1;
}

.demo-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(10, 15, 31, 0.96), rgba(17, 22, 42, 0.92) 58%, rgba(0, 0, 0, 0.98));
}

.demo-copy p {
	max-width: 42rem;
	margin-top: 1rem;
}

.demo-proof {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin-top: 1.5rem;
	font-size: 0.92rem;
	color: rgba(255, 255, 255, 0.7);
}

.demo-proof span {
	padding: 0.55rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.03);
}

.demo-micro {
	margin-top: 0.25rem;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.72);
}

.lynx-badge {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	opacity: 0.8;
}

.lynx-badge img {
	width: 32px;
	height: 32px;
}

.lynx-badge span {
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.demo-form {
	display: grid;
	gap: 1rem;
	margin-top: 2rem;
}

.demo-form input,
.demo-form select,
.demo-form textarea {
	width: 100%;
	padding: 1rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	outline: none;
	transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.demo-form input::placeholder,
.demo-form textarea::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

.demo-form input:focus,
.demo-form select:focus,
.demo-form textarea:focus {
	border-color: var(--orange);
	background: rgba(255, 255, 255, 0.14);
	box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.14);
}

.demo-form textarea {
	min-height: 120px;
	resize: vertical;
}

.demo-form button:disabled {
	opacity: 0.7;
	cursor: wait;
}

.form-status {
	min-height: 1.5rem;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.72);
}

.form-status[data-state="pending"] {
	color: rgba(255, 255, 255, 0.82);
}

.form-status[data-state="success"] {
	color: #fcd34d;
}

.form-status[data-state="error"] {
	color: #fca5a5;
}

.performance-card,
.info-card {
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, 0.05);
	box-shadow: var(--shadow);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.performance-card {
	padding: 2rem;
}

.demo-note {
	margin-top: 1rem;
	font-size: 0.92rem;
	color: rgba(255, 255, 255, 0.58);
}

.demo-visual {
	position: relative;
	display: grid;
	gap: 1.5rem;
}

.demo-glow {
	position: absolute;
	inset: 1.5rem 2rem auto auto;
	width: 16rem;
	height: 16rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 106, 0, 0.24), transparent 68%);
	filter: blur(24px);
	pointer-events: none;
}

.preview-card {
	position: relative;
	border-radius: 1.5rem;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45);
	background: linear-gradient(180deg, rgba(20, 24, 37, 0.98), rgba(7, 8, 13, 0.98));
}

.preview-screen {
	padding: 2rem;
	min-height: 28rem;
	display: grid;
	align-content: space-between;
	gap: 2rem;
}

.preview-label {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--orange-soft);
}

.preview-header h3 {
	margin-top: 0.8rem;
	font-size: 2rem;
}

.preview-waveform {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	align-items: end;
	gap: 0.8rem;
	height: 10rem;
	padding: 1rem 0;
}

.preview-waveform span {
	display: block;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--orange-soft), var(--orange));
	animation: pulse-bars 2.2s ease-in-out infinite alternate;
}

.preview-waveform span:nth-child(1) { height: 28%; }
.preview-waveform span:nth-child(2) { height: 76%; animation-delay: 120ms; }
.preview-waveform span:nth-child(3) { height: 54%; animation-delay: 240ms; }
.preview-waveform span:nth-child(4) { height: 88%; animation-delay: 360ms; }
.preview-waveform span:nth-child(5) { height: 46%; animation-delay: 480ms; }
.preview-waveform span:nth-child(6) { height: 72%; animation-delay: 600ms; }
.preview-waveform span:nth-child(7) { height: 36%; animation-delay: 720ms; }

.preview-transcript {
	display: grid;
	gap: 1rem;
}

.preview-transcript div {
	padding: 1rem 1.1rem;
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.preview-transcript span {
	display: inline-block;
	margin-bottom: 0.45rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--orange-soft);
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.stat-card {
	padding: 1rem;
	text-align: center;
	border-radius: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.05);
}

.stat-value {
	font-family: "Sora", sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: #ffffff;
}

.stat-label {
	margin-top: 0.35rem;
	font-size: 0.86rem;
	color: rgba(255, 255, 255, 0.58);
}

.performance-card h3 {
	margin-bottom: 1.5rem;
}

.performance-list {
	display: grid;
	gap: 1rem;
}

.performance-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.84);
}

.performance-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.performance-row strong {
	font-size: 1.4rem;
	font-family: "Sora", sans-serif;
	color: #ffffff;
}

.section-shell {
	padding: 0.5rem 0;
}

.center-copy {
	text-align: center;
}

.steps-grid,
.benefits-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin-top: 3rem;
}

.benefits-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.info-card {
	padding: 1.75rem;
	text-align: left;
}

.info-card p {
	margin-top: 0.75rem;
}

.cta-section {
	text-align: center;
	background: linear-gradient(90deg, #0b1120 0%, #171e34 100%);
}

.cta-shell {
	padding: 0.5rem 0;
}

.cta-shell p {
	margin-top: 1rem;
	color: rgba(255, 255, 255, 0.9);
}

.cta-button {
	margin-top: 1.75rem;
	display: inline-flex;
}

.trust-section {
	padding: 5rem 0;
	background: var(--bg-soft);
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.trust-shell h3 {
	font-size: 1.75rem;
}

.trust-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
	opacity: 0.82;
}

.trust-badge {
	min-width: 9rem;
	padding: 1rem 1.25rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.04);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.platform-section {
	padding: 6rem 0;
	background: linear-gradient(180deg, #05070d 0%, #0a1020 100%);
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.platform-heading {
	max-width: 48rem;
	margin: 0 auto;
}

.platform-heading p:last-child {
	margin-top: 1rem;
}

.platform-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin-top: 3rem;
}

.platform-card {
	padding: 1.65rem;
	border-radius: 1.35rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03));
	box-shadow: var(--shadow);
}

.platform-card h3 {
	font-size: 1.2rem;
}

.platform-card p {
	margin-top: 0.75rem;
}

.site-footer {
	padding: 2.5rem 0;
	background: #000000;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-credit {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.72);
}

.footer-nav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	margin-bottom: 1rem;
	color: rgba(255, 255, 255, 0.6);
}

.footer-credit span {
	font-weight: 700;
	color: var(--orange);
}

.footer-tagline {
	margin-top: 0.5rem;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.45);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@keyframes fade-up {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

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

@keyframes pulse-bars {
	from {
		transform: scaleY(0.72);
		transform-origin: bottom;
	}

	to {
		transform: scaleY(1);
		transform-origin: bottom;
	}
}

@media (max-width: 960px) {
	.demo-grid,
	.platform-grid,
	.steps-grid,
	.benefits-grid {
		grid-template-columns: 1fr;
	}

	.hero-stack {
		grid-template-columns: 1fr;
		max-width: 36rem;
	}

	.performance-card,
	.demo-visual {
		max-width: 36rem;
		margin: 0 auto;
	}

	.hero-proof {
		gap: 0.9rem 1.5rem;
	}

	.stats-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.shell {
		width: min(1120px, calc(100% - 1.5rem));
	}

	.header-shell {
		min-height: 0;
		padding: 0.75rem 1rem;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.header-nav {
		justify-content: center;
		flex-wrap: wrap;
		font-size: 0.92rem;
	}

	.header-brand img {
		height: 2.4rem;
	}

	.hero-section,
	.demo-section,
	.platform-section,
	.how-section,
	.benefits-section,
	.cta-section {
		padding: 4rem 0;
	}

	.hero-section {
		min-height: 0;
		padding-top: 5rem;
		padding-bottom: 5rem;
	}

	.hero-actions,
	.hero-proof {
		flex-direction: column;
		align-items: stretch;
	}

	.hero-stack {
		margin-top: 2rem;
	}

	.demo-proof {
		gap: 0.75rem;
	}

	.hero-proof {
		text-align: center;
	}

	.hero-actions .button,
	.header-cta,
	.cta-button {
		width: 100%;
	}

	.performance-card,
	.info-card,
	.preview-screen {
		padding: 1.35rem;
	}

	.stats-grid,
	.trust-grid {
		grid-template-columns: 1fr;
	}

	.preview-screen {
		min-height: 0;
	}

	h1 {
		max-width: none;
	}

	select,
	textarea,
	input {
		font-size: 16px;
	}

	.performance-row {
		font-size: 0.95rem;
	}
}

/* ======================================================
   SOLYNX LIVE EXPERIENCE — NEW SECTION STYLES
====================================================== */

/* Status banner */
.status-banner {
	background: rgba(255, 106, 0, 0.08);
	border-top: 1px solid rgba(255, 106, 0, 0.22);
	border-bottom: 1px solid rgba(255, 106, 0, 0.22);
	padding: 0.7rem 0;
	text-align: center;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--orange-soft);
}

.status-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.6rem 1rem;
}

.status-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--orange);
	box-shadow: 0 0 8px var(--orange);
	animation: pulse-dot 2s ease-in-out infinite;
}

.status-sep {
	opacity: 0.35;
}

@keyframes pulse-dot {
	0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--orange); }
	50%       { opacity: 0.5; box-shadow: 0 0 3px var(--orange); }
}

/* Animated flow chart inside preview card */
.flow-chart {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.flow-step {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.55rem 0.9rem;
	border-radius: 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.07);
	background: rgba(255, 255, 255, 0.03);
	transition: background 400ms ease, border-color 400ms ease, box-shadow 400ms ease;
}

.flow-step.flow-active {
	background: rgba(255, 106, 0, 0.1);
	border-color: rgba(255, 106, 0, 0.35);
	box-shadow: 0 0 18px rgba(255, 106, 0, 0.12);
}

.flow-step.flow-final {
	border-color: rgba(255, 200, 0, 0.3);
	background: rgba(255, 200, 0, 0.06);
}

.flow-icon {
	font-size: 1rem;
	line-height: 1;
	min-width: 1.25rem;
}

.flow-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

.flow-arrow {
	text-align: center;
	font-size: 0.9rem;
	color: rgba(255, 106, 0, 0.55);
	line-height: 1;
	padding: 0.08rem 0;
}

/* What Happens Next section */
.what-happens-section {
	padding: 5rem 0;
	background: linear-gradient(180deg, #07090f 0%, #0d1426 100%);
}

.section-intro {
	max-width: 42rem;
	margin: 0.75rem auto 0;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.65;
}

.steps-sequence {
	list-style: none;
	padding: 0;
	margin: 3rem auto 0;
	max-width: 56rem;
	display: grid;
	gap: 1.25rem;
}

.sequence-step {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	padding: 1.5rem 1.75rem;
	border-radius: 1.25rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.04);
	text-align: left;
	transition: border-color 220ms ease, background 220ms ease;
}

.sequence-step:hover {
	border-color: rgba(255, 106, 0, 0.3);
	background: rgba(255, 106, 0, 0.05);
}

.step-number {
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: 2px solid rgba(255, 106, 0, 0.45);
	background: rgba(255, 106, 0, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Sora", sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--orange-soft);
}

.step-body h3 {
	font-size: 1.15rem;
}

.step-body p {
	margin-top: 0.5rem;
	max-width: 46rem;
}

/* Platform & info card icons */
.platform-icon,
.info-card-icon {
	font-size: 1.6rem;
	margin-bottom: 0.75rem;
	line-height: 1;
}

/* Form consent line */
.form-consent {
	font-size: 0.8rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.42);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-top: 0.75rem;
	margin-top: -0.25rem;
}

/* CTA section kicker spacing */
.cta-shell .section-kicker {
	margin-bottom: 1rem;
}

/* Responsive for new elements */
@media (max-width: 960px) {
	.steps-sequence {
		max-width: 100%;
	}
}

@media (max-width: 640px) {
	.status-inner {
		gap: 0.4rem 0.6rem;
		font-size: 0.72rem;
	}
	.status-sep {
		display: none;
	}
	.sequence-step {
		flex-direction: column;
		gap: 0.75rem;
		padding: 1.25rem;
	}
	.what-happens-section {
		padding: 4rem 0;
	}
}

/* ======================================================
   HOME BUTTON — header nav
====================================================== */
.header-home-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 1rem;
	border: 1px solid rgba(255, 106, 0, 0.45);
	border-radius: 999px;
	background: rgba(255, 106, 0, 0.08);
	color: var(--orange-soft);
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.header-home-btn:hover {
	background: rgba(255, 106, 0, 0.18);
	border-color: rgba(255, 106, 0, 0.75);
	color: #ffffff;
}

/* ======================================================
   ECOSYSTEM CHIPS — below LYNX Chat description
====================================================== */
.ecosystem-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.25rem;
	margin-bottom: 1rem;
}

.ecosystem-chips span {
	padding: 0.4rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	background: rgba(255, 106, 0, 0.07);
	font-size: 0.82rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.78);
	letter-spacing: 0.02em;
}

/* ======================================================
   AI VOICE SECTION
====================================================== */
.ai-voice-section {
	padding: 5rem 0;
	background: linear-gradient(180deg, #050710 0%, #0b1322 100%);
	border-top: 1px solid rgba(255, 106, 0, 0.12);
	position: relative;
	overflow: hidden;
}

.ai-voice-section::before {
	content: '';
	position: absolute;
	top: -80px;
	right: -80px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 106, 0, 0.1), transparent 68%);
	filter: blur(60px);
	pointer-events: none;
}

.ai-voice-shell {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
	gap: 3rem;
	align-items: center;
	position: relative;
	z-index: 1;
}

.ai-voice-subtitle {
	margin-top: 1rem;
	max-width: 42rem;
	font-size: 1.05rem;
	color: rgba(255, 255, 255, 0.82);
}

.ai-voice-bullets {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 0;
	display: grid;
	gap: 0.65rem;
}

.ai-voice-bullets li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-size: 0.97rem;
	color: rgba(255, 255, 255, 0.82);
}

.ai-voice-check {
	flex-shrink: 0;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background: rgba(255, 106, 0, 0.15);
	border: 1px solid rgba(255, 106, 0, 0.4);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.72rem;
	font-weight: 800;
	color: var(--orange-soft);
}

.ai-voice-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2rem;
}

/* AI Voice visual card */
.ai-voice-visual {
	display: flex;
	justify-content: center;
}

.ai-voice-card {
	width: 100%;
	max-width: 380px;
	border-radius: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: linear-gradient(180deg, rgba(20, 24, 37, 0.98), rgba(7, 8, 13, 0.98));
	box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45), 0 0 32px rgba(255, 106, 0, 0.06);
	overflow: hidden;
}

.ai-voice-card-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.25rem 1.5rem 0.85rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-voice-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--orange);
	box-shadow: 0 0 8px var(--orange);
	animation: pulse-dot 2s ease-in-out infinite;
}

.ai-voice-card-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--orange-soft);
}

.ai-voice-waveform {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	align-items: end;
	gap: 0.4rem;
	height: 5rem;
	padding: 1rem 1.5rem;
}

.ai-voice-waveform span {
	display: block;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--orange-soft), var(--orange));
	animation: pulse-bars 2.2s ease-in-out infinite alternate;
}

.ai-voice-waveform span:nth-child(1) { height: 35%; }
.ai-voice-waveform span:nth-child(2) { height: 80%; animation-delay: 120ms; }
.ai-voice-waveform span:nth-child(3) { height: 55%; animation-delay: 240ms; }
.ai-voice-waveform span:nth-child(4) { height: 90%; animation-delay: 360ms; }
.ai-voice-waveform span:nth-child(5) { height: 45%; animation-delay: 480ms; }
.ai-voice-waveform span:nth-child(6) { height: 70%; animation-delay: 600ms; }
.ai-voice-waveform span:nth-child(7) { height: 30%; animation-delay: 720ms; }
.ai-voice-waveform span:nth-child(8) { height: 60%; animation-delay: 840ms; }

.ai-voice-transcript {
	display: grid;
	gap: 0.75rem;
	padding: 0 1.5rem 1.25rem;
}

.ai-voice-line {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
}

.ai-voice-speaker {
	flex-shrink: 0;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: rgba(255, 106, 0, 0.18);
	border: 1px solid rgba(255, 106, 0, 0.35);
	color: var(--orange-soft);
	margin-top: 2px;
}

.ai-voice-speaker.caller {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.7);
}

.ai-voice-line p {
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.5;
	margin: 0;
}

.ai-voice-status {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	background: rgba(255, 106, 0, 0.05);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--orange-soft);
	text-transform: uppercase;
}

/* Responsive */
@media (max-width: 960px) {
	.ai-voice-shell {
		grid-template-columns: 1fr;
	}

	.ai-voice-visual {
		order: -1;
	}

	.ai-voice-card {
		max-width: 100%;
	}
}

@media (max-width: 640px) {
	.ai-voice-section {
		padding: 4rem 0;
	}

	.ai-voice-actions {
		flex-direction: column;
	}

	.ai-voice-actions .button {
		width: 100%;
		justify-content: center;
	}

	.header-home-btn {
		font-size: 0.8rem;
		padding: 0.4rem 0.75rem;
	}
}

/* ======================================================
   MOBILE STICKY HOME BAR
====================================================== */
.mobile-home-bar {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.55rem 1rem;
	background: rgba(6, 8, 15, 0.96);
	border-bottom: 1px solid rgba(255, 106, 0, 0.25);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.mobile-home-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--orange-soft);
	text-decoration: none;
	transition: color 180ms ease;
}

.mobile-home-btn:hover {
	color: #ffffff;
}

.mobile-hamburger {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.4rem;
	cursor: pointer;
	padding: 4px 8px;
	line-height: 1;
}

/* ======================================================
   MEET ALEX & LEXY -- SECTION HEADER
====================================================== */
.meet-agents-section {
	padding: 5rem 0 4rem;
}

.meet-agents-header {
	max-width: 52rem;
	margin: 0 auto 3.5rem;
}

.meet-agents-subtitle {
	margin-top: 1rem;
	font-size: 1.075rem;
	color: rgba(255, 255, 255, 0.86);
	line-height: 1.6;
}

.meet-agents-support {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 0.75rem;
	margin-top: 1rem;
	font-size: 0.92rem;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.6;
}

.meet-agents-sep {
	opacity: 0.35;
}

/* ======================================================
   EXPERIENCE CARDS GRID
====================================================== */
.experience-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	align-items: stretch;
}

/* Two-card variant: Alex + Lexy only */
.experience-cards-two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
}

.experience-card {
	display: flex;
	flex-direction: column;
	padding: 1.85rem 1.65rem;
	border-radius: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.09);
	background: linear-gradient(180deg, rgba(15, 23, 42, 0.85) 0%, rgba(5, 10, 20, 0.95) 100%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.experience-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5), 0 0 28px rgba(255, 106, 0, 0.09);
	border-color: rgba(255, 106, 0, 0.25);
}

.exp-card-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.32rem 0.75rem;
	border-radius: 999px;
	margin-bottom: 0.85rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.exp-badge-chat {
	background: rgba(255, 106, 0, 0.1);
	border: 1px solid rgba(255, 106, 0, 0.3);
	color: var(--orange-soft);
}

.exp-badge-voice {
	background: rgba(255, 106, 0, 0.12);
	border: 1px solid rgba(255, 106, 0, 0.35);
	color: var(--orange-soft);
}

.exp-card-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--orange);
	box-shadow: 0 0 6px var(--orange);
	flex-shrink: 0;
}

.exp-dot-pulse {
	animation: pulse-dot 2s ease-in-out infinite;
}

.exp-card-title {
	font-family: "Sora", sans-serif;
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #ffffff;
	margin: 0 0 0.1rem;
	line-height: 1.1;
}

.exp-card-subtitle {
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--orange-soft);
	margin: 0.2rem 0 0.5rem;
}

.exp-card-desc {
	font-size: 0.97rem;
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
	line-height: 1.55;
}

.exp-card-features {
	list-style: none;
	padding: 0;
	margin: 0 0 1.25rem;
	display: grid;
	gap: 0.55rem;
	flex: 1;
}

.exp-card-features li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-size: 0.93rem;
	color: rgba(255, 255, 255, 0.8);
}

.exp-check {
	flex-shrink: 0;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background: rgba(255, 106, 0, 0.15);
	border: 1px solid rgba(255, 106, 0, 0.4);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: 800;
	color: var(--orange-soft);
}

.exp-card-phone {
	font-family: "Sora", sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.6);
	letter-spacing: 0.04em;
	margin: 0 0 1rem;
}

.exp-card-actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: auto;
}

.exp-card-btn {
	width: 100%;
	justify-content: center;
	font-size: 0.95rem;
	min-height: 3.25rem;
	padding: 0.85rem 1.25rem;
	border-radius: 1rem;
}

/* ======================================================
   RESPONSIVE -- EXPERIENCE CARDS
====================================================== */
@media (max-width: 960px) {
	.experience-cards-grid,
	.experience-cards-two {
		grid-template-columns: 1fr;
		width: 100%;
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 640px) {
	.meet-agents-section {
		padding: 4rem 0 5rem;
	}

	.meet-agents-support {
		flex-direction: column;
		align-items: center;
		gap: 0.25rem;
	}

	.meet-agents-sep {
		display: none;
	}

	.exp-card-actions {
		gap: 0.6rem;
	}

	.experience-cards-grid,
	.experience-cards-two {
		max-width: 100%;
	}
}

/* ======================================================
   MOBILE — CHAT WIDGET OVERLAP PREVENTION
   Keeps the floating chat icon from covering form CTAs
====================================================== */
@media (max-width: 768px) {

	/* Give the page enough bottom breathing room so
	   the chat bubble never sits on top of buttons */
	body {
		padding-bottom: 80px;
	}

	/* Push the launcher icon itself down so it clears
	   the bottom of the viewport comfortably */
	#LeadConnector__widget,
	[data-widget-id],
	.lc-launcher-wrapper,
	.lc-chat-widget-launcher,
	.lc-launcher {
		bottom: 12px !important;
		right: 12px !important;
	}

	/* Hide the auto-greeting / welcome bubble entirely on mobile.
	   These selectors cover all known GHL widget greeting variants. */
	.lc-chat-bubble-message,
	.lc-greeting,
	.lc-greeting-wrapper,
	.lc-greeting-bubble,
	.lc-greeting-container,
	.lc-welcome-message,
	.lc-welcome-bubble,
	[class*="greeting"],
	[class*="welcome-bubble"],
	[class*="chat-bubble-message"] {
		display: none !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	/* Ensure the chat launcher itself stays tappable
	   and is never covered by our padding */
	.lc-launcher,
	.lc-chat-widget-launcher {
		z-index: 9999 !important;
	}
}

/* ======================================================
   MEET ALEX & LEXY — AI VOICE AGENT CARDS
====================================================== */

.meet-agents-section {
	padding: 6rem 0;
	background: linear-gradient(180deg, #050710 0%, #0b1322 100%);
	border-top: 1px solid rgba(255, 106, 0, 0.15);
	position: relative;
	overflow: hidden;
}

.meet-agents-section::before {
	content: '';
	position: absolute;
	top: -100px;
	left: 50%;
	transform: translateX(-50%);
	width: 600px;
	height: 400px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 106, 0, 0.09), transparent 65%);
	filter: blur(70px);
	pointer-events: none;
}

.meet-agents-shell {
	position: relative;
	z-index: 1;
}

.meet-agents-header {
	max-width: 48rem;
	margin: 0 auto 3.5rem;
}

.meet-agents-intro {
	margin-top: 1rem;
	font-size: 1.05rem;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.65;
}

/* Two-column card grid */
.agent-cards-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	max-width: 860px;
	margin: 0 auto;
}

/* Individual agent card */
.agent-card {
	border-radius: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: linear-gradient(180deg, rgba(20, 24, 40, 0.98), rgba(8, 10, 18, 0.98));
	box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 106, 0, 0.06);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.agent-card:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 106, 0, 0.3);
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), 0 0 32px rgba(255, 106, 0, 0.1);
}

/* Card top row: avatar + meta */
.agent-card-top {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* Avatar circle */
.agent-avatar {
	position: relative;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.agent-avatar-alex {
	background: linear-gradient(135deg, rgba(255, 106, 0, 0.3), rgba(255, 140, 51, 0.15));
	border: 2px solid rgba(255, 106, 0, 0.45);
	box-shadow: 0 0 20px rgba(255, 106, 0, 0.18);
}

.agent-avatar-lexy {
	background: linear-gradient(135deg, rgba(0, 156, 180, 0.3), rgba(0, 200, 220, 0.15));
	border: 2px solid rgba(0, 156, 180, 0.5);
	box-shadow: 0 0 20px rgba(0, 156, 180, 0.2);
}

.agent-initials {
	font-family: "Sora", sans-serif;
	font-size: 1.2rem;
	font-weight: 800;
	color: #ffffff;
	letter-spacing: 0.05em;
	line-height: 1;
}

/* Live indicator dot on avatar */
.agent-avatar-dot {
	position: absolute;
	bottom: 2px;
	right: 2px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #22c55e;
	border: 2px solid #06080f;
	animation: pulse-dot 2s ease-in-out infinite;
}

.agent-avatar-lexy .agent-avatar-dot {
	background: #009CB4;
	box-shadow: 0 0 6px rgba(0, 156, 180, 0.65);
}

.agent-avatar-alex .agent-avatar-dot {
	background: #22c55e;
	box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}

/* Agent name & subtitle */
.agent-meta {
	min-width: 0;
}

.agent-name {
	font-size: 1.35rem;
	font-weight: 700;
	color: #ffffff;
	margin: 0;
	line-height: 1.2;
}

.agent-subtitle {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--orange-soft);
	margin: 0.2rem 0 0;
}

.agent-avatar-lexy ~ .agent-meta .agent-subtitle {
	color: #4dd6e8;
}

/* Animated waveform bar */
.agent-waveform {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	align-items: end;
	gap: 3px;
	height: 3rem;
	padding: 0.25rem 0;
}

.agent-waveform span {
	display: block;
	border-radius: 999px;
	animation: pulse-bars 2.4s ease-in-out infinite alternate;
}

.agent-card:nth-child(1) .agent-waveform span {
	background: linear-gradient(180deg, var(--orange-soft), var(--orange));
}

.agent-card:nth-child(2) .agent-waveform span {
	background: linear-gradient(180deg, #4dd6e8, #009CB4);
}

.agent-waveform span:nth-child(1) { height: 30%; }
.agent-waveform span:nth-child(2) { height: 75%; animation-delay: 100ms; }
.agent-waveform span:nth-child(3) { height: 50%; animation-delay: 200ms; }
.agent-waveform span:nth-child(4) { height: 90%; animation-delay: 300ms; }
.agent-waveform span:nth-child(5) { height: 40%; animation-delay: 400ms; }
.agent-waveform span:nth-child(6) { height: 68%; animation-delay: 500ms; }
.agent-waveform span:nth-child(7) { height: 32%; animation-delay: 600ms; }
.agent-waveform span:nth-child(8) { height: 58%; animation-delay: 700ms; }

/* Agent copy & phone */
.agent-copy {
	font-size: 0.97rem;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
	line-height: 1.55;
}

.agent-phone {
	font-size: 1.05rem;
	font-weight: 700;
	color: #ffffff;
	margin: 0;
	letter-spacing: 0.02em;
}

/* Action buttons row */
.agent-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: auto;
}

.agent-call-btn {
	flex: 1;
	min-width: 7rem;
	font-size: 0.95rem;
}

.agent-book-btn {
	flex: 1;
	min-width: 7rem;
	font-size: 0.95rem;
}

.agent-call-note {
	font-size: 0.78rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.42);
	margin: 0;
	font-style: italic;
}

/* Lexy card accent overrides */
#agent-card-lexy {
	border-color: rgba(0, 156, 180, 0.15);
}

#agent-card-lexy:hover {
	border-color: rgba(0, 156, 180, 0.4);
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), 0 0 32px rgba(0, 156, 180, 0.14);
}

/* Lexy talk button — teal */
.agent-talk-btn--lexy {
	background: linear-gradient(90deg, #009CB4, #00b8d4) !important;
	box-shadow: 0 10px 28px rgba(0, 156, 180, 0.28) !important;
}

.agent-talk-btn--lexy:hover {
	opacity: 0.9;
}

/* Active state — both agents: dimmed but still clickable to toggle off */
.agent-talk-btn--active {
	opacity: 0.72;
}

/* Responsive: stack on tablet */
@media (max-width: 700px) {
	.agent-cards-grid {
		grid-template-columns: 1fr;
		width: 100%;
		max-width: 100%;
	}

	.meet-agents-section {
		padding: 4.5rem 0;
	}

	.meet-agents-header {
		margin-bottom: 2.5rem;
	}

	.agent-card {
		padding: 1.5rem;
	}

	.agent-actions {
		flex-direction: column;
	}

	.agent-call-btn,
	.agent-book-btn {
		width: 100%;
		text-align: center;
	}

	.agent-talk-btn {
		width: 100%;
		text-align: center;
	}
}

/* ======================================================
   VOICE WIDGET EMBED — browser voice containers
====================================================== */

/* Ghost/tertiary button for Book Demo */
.button-ghost {
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: transparent;
	color: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}

.button-ghost:hover {
	border-color: rgba(255, 255, 255, 0.4);
	color: #ffffff;
	background: rgba(255, 255, 255, 0.06);
}

/* Talk button — primary orange but slightly differentiated */
.agent-talk-btn {
	flex: 1 1 100%;
	font-size: 0.95rem;
	background: linear-gradient(90deg, var(--orange), var(--orange-soft));
	color: #05050c;
	border-color: transparent;
	box-shadow: 0 10px 28px rgba(255, 106, 0, 0.22);
}

.agent-talk-btn:hover {
	opacity: 0.9;
	transform: translateY(-2px);
}

/* Voice widget embed — base shared styles */
.voice-widget-embed {
	border-radius: 1.1rem;
	border: 1px solid rgba(255, 106, 0, 0.18);
	background: rgba(255, 106, 0, 0.03);
	padding: 1.1rem;
	width: 100%;
}

.voice-widget-embed[hidden] {
	display: none;
}

/* Ensure any iframe inside the widget is responsive */
.voice-widget-embed iframe {
	width: 100% !important;
	max-width: 100%;
	border: none;
	border-radius: 0.75rem;
}

/* Lexy widget border accent — teal */
#lexy-voice-widget {
	border-color: rgba(0, 156, 180, 0.25);
	background: rgba(0, 156, 180, 0.04);
}

/* Agent tagline — proof line under copy */
.agent-tagline {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.38);
	margin: -0.5rem 0 0;
	line-height: 1.5;
}

/* Close voice demo small link */
.voice-close-link {
	display: block;
	text-align: center;
	margin-top: -0.25rem;
}

.voice-close-link a {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.45);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 160ms ease;
}

.voice-close-link a:hover {
	color: rgba(255, 255, 255, 0.75);
}

/* Voice widget embed — responsive, no clip */
.voice-widget-embed {
	/* max-height and overflow:hidden removed — they clip the GHL iframe content */
	width: 100%;
	max-width: 100%;
	margin: 1rem auto 0;
	opacity: 0;
	transition: opacity 300ms ease;
}

.voice-widget-embed:not([hidden]) {
	opacity: 1;
}

/* Mobile: ensure all three buttons stack cleanly */
@media (max-width: 700px) {
	.agent-talk-btn {
		width: 100%;
	}
}

/* ── Live Experience — Mobile header adjustments ─────────────── */
@media (max-width: 900px) {
	/* Hide the desktop inline nav and GET STARTED CTA */
	.header-nav {
		display: none !important;
	}

	.header-cta {
		display: none !important;
	}

	/* Ensure hamburger is visible and positioned */
	#mobileToggle.mobile-menu-toggle {
		display: flex !important;
	}

	/* Keep header-shell flex and space-between for logo + hamburger */
	.header-shell {
		justify-content: space-between !important;
		flex-wrap: nowrap !important;
	}
}