@font-face {
	font-family: 'UniversalSans';
	src: url('/app/assets/fonts/UniversalSans_Text_400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--bg-main: #050505;
	--bg-subtle: #0a0a0a;
	--primary: #00e5ff;
	--primary-glow: rgba(0, 229, 255, 0.6);
	--voice-color: #a855f7;
	--human-color: #ff9e00;
	--text-main: #ffffff;
	--text-muted: #c9c9c9;
	--border: #27272a;
	--font-display: 'Lato', sans-serif;
	--font-mono: 'JetBrains Mono', monospace;
	--font-body: 'UniversalSans', sans-serif;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* lock the viewport */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

body {
	background-color: var(--bg-main);
	color: var(--text-main);
	font-family: var(--font-body);
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	text-decoration: none;
	color: inherit;
	transition: 0.2s;
}

/* --- BACKGROUND EFFECTS --- */
.noise-overlay {
	position: fixed;
	inset: 0;
	z-index: -1;
	opacity: 0.03;
	background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAlJyBoZWlnaHQ9JzIwMCUnPjxmaWx0ZXIgaWQ9J25vaXNlJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC42NScgbnVtT2N0YXZlcz0nMywgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNub2lzZSknIG9wYWNpdHk9JzAuNScvPjwvc3ZnPg==');
	pointer-events: none;
}

.grid-lines {
	position: fixed;
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 60px 60px;
	z-index: -2;
	mask-image: radial-gradient(circle at 50% 40%, black 30%, transparent 80%);
}

/* CENTERED BLUE ORB (Restored) */
/* CENTERED BLUE ORB (Restored) */
.orb-wrapper {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -2;
	pointer-events: none;
	width: 0;
	height: 0;
}

.orb-center {
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(0, 229, 255, 0.15) 0%, transparent 70%);
	filter: blur(80px);
	opacity: 0.6;
	transform: translate(-50%, -50%);
	animation: pulseOrb 8s infinite alternate;
}

@keyframes pulseOrb {
	0% {
		opacity: 0.4;
		transform: translate(-50%, -50%) scale(0.9);
	}

	100% {
		opacity: 0.6;
		transform: translate(-50%, -50%) scale(1.1);
	}
}


/* --- TYPOGRAPHY --- */
h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 700;
	color: white;
	letter-spacing: -0.02em;
}

.text-gradient-animate {
	background: linear-gradient(to right, #fff, #00e5ff, #fff);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: shine 5s linear infinite;
}

@keyframes shine {
	to {
		background-position: 200% center;
	}
}

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

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* --- NAVIGATION --- */
.navbar {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
	padding: 1rem 0;
	background: rgba(5, 5, 5, 0.8);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.logo {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.3rem;
	letter-spacing: -0.03em;
}

.logo-mark {
	width: 28px;
	height: 28px;
	background: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
}

.inner-mark {
	width: 12px;
	height: 12px;
	background: black;
	border-radius: 50%;
}

.nav-links {
	display: flex;
	gap: 2.5rem;
	list-style: none;
}

.nav-links a {
	color: var(--text-muted);
	font-size: 0.9rem;
	font-weight: 500;
	transition: 0.2s;
}

.nav-links a:hover {
	color: white;
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.nav-link {
	font-size: 0.9rem;
	font-weight: 600;
}

.mobile-menu-btn {
	display: none;
	cursor: pointer;
	color: white;
}

.mobile-menu-overlay {
	position: fixed;
	top: 65px;
	left: 0;
	width: 100%;
	height: calc(100vh - 65px);
	background: #050505;
	z-index: 999;
	display: flex;
	flex-direction: column;
	padding: 2rem;
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-overlay.open {
	transform: translateX(0);
}

.mobile-nav-links a {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	color: white;
	padding: 1rem 0;
	border-bottom: 1px solid #222;
}

/* --- BUTTONS --- */
.btn-shiny {
	position: relative;
	background: var(--primary);
	color: black;
	border: none;
	padding: 0.75rem 1.5rem;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	overflow: hidden;
	transition: 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-size: 0.9rem;
}

.btn-shiny:hover {
	box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
	animation: shine-btn 3s infinite;
}

@keyframes shine-btn {
	0% {
		left: -100%;
	}

	20% {
		left: 100%;
	}

	100% {
		left: 100%;
	}
}

.btn-lg {
	padding: 0.9rem 2rem;
	font-size: 1rem;
}

.btn-outline {
	background: transparent;
	border: 1px solid var(--border);
	color: white;
	padding: 0.8rem;
	border-radius: 8px;
	width: 100%;
	cursor: pointer;
	font-weight: 600;
	transition: 0.2s;
}

.btn-outline:hover {
	border-color: var(--primary);
	color: var(--primary);
}

/* --- HERO --- */
.hero {
	padding-top: 105px;
	position: relative;
	overflow: hidden;
}

.hero-glow-wrapper {
	position: absolute;
	top: 40%;
	/* Position slightly above center to highlight the H1 */
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	/* Sit behind the text */
	pointer-events: none;
	width: 100%;
	max-width: 1200px;
	display: flex;
	justify-content: center;
}

.hero-glow {
	width: 900px;
	height: 900px;

	/* CHANGED: Removed white center, lowered Cyan opacity to 0.15 */
	background: radial-gradient(circle,
			rgba(0, 229, 255, 0.2) 20%,
			/* 2. Bright Primary Cyan (Increased opacity) */
			rgba(0, 229, 255, 0.1) 50%,
			/* 3. Soft Fade */
			transparent 70%);

	filter: blur(100px);
	opacity: 0.2;
	/* You can lower this to 0.5 to make it even dimmer */

	animation: glowPulse 8s ease-in-out infinite alternate;
}

@keyframes glowPulse {
	0% {
		transform: scale(0.9);
		opacity: 0.8;
	}

	100% {
		transform: scale(1.1);
		opacity: 1;
	}
}


.hero-layout {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5rem;
}

.announcement-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border);
	padding: 6px 16px 6px 6px;
	border-radius: 100px;
	font-size: 0.85rem;
	color: var(--text-muted);
	cursor: pointer;
	transition: 0.2s;
	margin-bottom: 2rem;
}

.announcement-pill:hover {
	border-color: var(--primary);
	color: white;
}

.pill-new {
	background: var(--primary);
	color: black;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 50px;
	font-size: 0.75rem;
}

.hero h1 {
	font-size: 4.5rem;
	line-height: 1.1;
	margin-bottom: 1.5rem;
	letter-spacing: -0.04em;
}

.hero-sub {
	font-size: 1.25rem;
	color: #cccccc;
	max-width: 850px;
	margin-left: auto;
	margin-right: auto;
	font-weight: 400;
}

.hero-cta-group {
	display: flex;
	gap: 1.5rem;
	justify-content: center;
	align-items: center;
}

.cmd-copy {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #111;
	border: 1px solid var(--border);
	padding: 12px 16px;
	border-radius: 8px;
	font-family: var(--font-mono);
	font-size: 0.9rem;
	color: #ccc;
	cursor: pointer;
	transition: 0.2s;
}

.cmd-copy:hover {
	border-color: #444;
	color: white;
}

.cmd-prompt {
	color: var(--primary);
}

.copy-icon {
	width: 14px;
	color: #666;
}

/* --- INTERACTIVE TABS & VISUALS --- */
.interactive-showcase {
	width: 100%;
	max-width: 1100px;
	box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.7);
	background: rgba(15, 15, 17, 0.6);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 24px;
	overflow: hidden;
	position: relative;
}

.beam-border {
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: 24px;
	padding: 1px;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	background: linear-gradient(90deg, transparent, var(--primary), transparent);
	opacity: 0.5;
}

.tabs-nav {
	display: flex;
	border-bottom: 1px solid var(--border);
	background: rgba(0, 0, 0, 0.3);
}

.tab-btn {
	flex: 1;
	padding: 24px;
	background: transparent;
	border: none;
	color: var(--text-muted);
	font-family: var(--font-mono);
	font-weight: 300;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-right: 1px solid var(--border);
	transition: 0.3s;
	position: relative;
	font-size: 0.9rem;
}

.tab-btn:last-child {
	border-right: none;
}

.tab-btn:hover {
	color: white;
	background: rgba(255, 255, 255, 0.02);
}

.tab-btn.active {
	color: white;
	background: rgba(255, 255, 255, 0.05);
}

.tab-btn.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--primary);
	box-shadow: 0 -5px 15px var(--primary);
}

.tab-display-area {
	padding: 60px;
	min-height: 500px;
	display: flex;
	align-items: center;
}

.tab-pane {
	display: none;
	width: 100%;
	animation: fadeUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tab-pane.active {
	display: block;
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

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

.pane-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

/* --- NEW TAB LAYOUT STYLES --- */

/* 1. Reset the default grid on the parent container */
.pane-content.vertical-layout {
	display: block !important;
	/* Overrides the default grid */
}

/* 2. Style the Full-Width Header */
.pane-header {
	width: 100%;
	margin-bottom: 3.5rem;
	text-align: center;
	/* Centers the text */
	display: flex;
	/* Flexbox makes centering max-width children easier */
	flex-direction: column;
	align-items: center;
	/* Centers the h3 and p horizontally */
}

.pane-header h3 {
	font-size: 2.2rem;
	/* Reduced from 2.8rem */
	line-height: 1.2;
	margin-bottom: 1rem;
	max-width: 100%;
	/* Limits width so it doesn't span too wide */
	background: linear-gradient(to right, #fff, #a1a1aa);
	/* Restoring the gradient effect */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.pane-header p.hero-desc {
	font-size: 1.1rem;
	color: var(--text-muted);
	max-width: 100%;
	/* Tighter width for better readability */
	margin: 0 auto;
}

/* Mobile Adjustment */
@media (max-width: 768px) {
	.pane-header h3 {
		font-size: 1.75rem;
	}
}

/* 3. Re-create the Grid for the bottom section */
.split-body {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	/* Give text slightly more room */
	gap: 4rem;
	align-items: center;
	/* Aligns Grid and Phone vertically */
}

/* Mobile Responsive */
@media (max-width: 900px) {
	.split-body {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.pane-header h3 {
		font-size: 2rem;
	}
}

.text-side h3 {
	font-size: 2rem;
	margin-bottom: 1rem;
}

.text-side p {
	color: var(--text-muted);
	font-size: 1.1rem;
	margin-bottom: 2rem;
}

.capability-tags span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.05);
	padding: 6px 12px;
	border-radius: 6px;
	border: 1px solid var(--border);
	font-size: 0.85rem;
	color: #ccc;
	margin-right: 10px;
	margin-bottom: 10px;
}

.visual-side {
	height: 400px;
	background: #0a0a0a;
	border: 1px solid var(--border);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

/* === CHAT ANIMATION STYLES === */
.chat-interface-mockup {
	width: 80%;
}

.chat-scroll {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* Default state hidden, then slides in */
.msg {
	display: flex;
	gap: 10px;
	opacity: 0;
	animation: msgSlideUp 0.5s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes msgSlideUp {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.95);
	}

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

/* Staggered Delays for "Live" feel */
.tab-pane.active .msg:nth-child(1) {
	animation-delay: 0.1s;
}

.tab-pane.active .msg:nth-child(2) {
	animation-delay: 1.2s;
}

.tab-pane.active .msg:nth-child(3) {
	animation-delay: 2.4s;
}

.tab-pane.active .msg:nth-child(4) {
	animation-delay: 3.5s;
}

.msg.user {
	flex-direction: row-reverse;
}

.avatar-xs {
	width: 24px;
	height: 24px;
	background: var(--primary);
	color: black;
	border-radius: 4px;
	font-weight: bold;
	font-size: 0.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.txt {
	background: #1a1a1a;
	padding: 10px 16px;
	border-radius: 12px;
	font-size: 0.9rem;
	color: #e2e8f0;
	line-height: 1.4;
	border: 1px solid #333;
}

.msg.user .txt {
	background: var(--primary);
	color: black;
	border-color: var(--primary);
}

.loading-dots span {
	width: 4px;
	height: 4px;
	background: #666;
	border-radius: 50%;
	display: inline-block;
	animation: bounce 1.4s infinite;
	margin: 0 2px;
}

@keyframes bounce {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-4px);
	}
}

.loading-dots span:nth-child(2) {
	animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
	animation-delay: 0.4s;
}

.card-msg {
	margin-left: 34px;
	background: #111;
	border: 1px solid #333;
	padding: 12px;
	border-radius: 10px;
	display: flex;
	gap: 12px;
	align-items: center;
}

.card-icon {
	color: #4ade80;
}


/* Other Visuals (Voice/Human) */
.phone-frame {
	width: 200px;
	height: 380px;
	background: black;
	border: 4px solid #333;
	border-radius: 30px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
	margin-left: auto;
	margin-right: auto;
}

.glowing-orb-container {
	position: relative;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.orb-core {
	width: 60px;
	height: 60px;
	background: var(--voice-color);
	border-radius: 50%;
	z-index: 2;
	box-shadow: 0 0 30px var(--voice-color);
}

.orb-ring {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(168, 85, 247, 0.3);
	width: 100px;
	height: 100px;
	animation: ripple 2s infinite;
}

.ring-2 {
	animation-delay: 0.5s;
}

.ring-3 {
	animation-delay: 1s;
}

@keyframes ripple {
	0% {
		transform: scale(0.8);
		opacity: 1;
	}

	100% {
		transform: scale(1.6);
		opacity: 0;
	}
}

.caller-details {
	text-align: center;
	margin-top: 20px;
}

.waveform-mini {
	display: flex;
	gap: 4px;
	justify-content: center;
	margin-top: 30px;
}

.bar {
	width: 4px;
	height: 20px;
	background: white;
	border-radius: 2px;
	animation: sound 1s infinite;
}

@keyframes sound {
	50% {
		height: 40px;
		opacity: 0.5;
	}
}

.ticket-dashboard {
	width: 90%;
	background: #111;
	border-radius: 12px;
	border: 1px solid #333;
	overflow: hidden;
}

.dash-header {
	padding: 10px 15px;
	border-bottom: 1px solid #333;
	display: flex;
	justify-content: space-between;
	color: #888;
	font-size: 0.8rem;
}

.badge-urgent {
	color: #ef4444;
	background: rgba(239, 68, 68, 0.1);
	padding: 2px 6px;
	border-radius: 4px;
}

.ticket-card-main {
	padding: 15px;
	transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.t-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.user-info {
	display: flex;
	gap: 10px;
	align-items: center;
}

.u-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #333;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	color: #ccc;
	font-weight: bold;
	border: 1px solid #444;
}

.sub {
	display: block;
	font-size: 0.75rem;
	color: #666;
}

.btn-accept {
	background: var(--human-color);
	border: none;
	padding: 6px 12px;
	border-radius: 6px;
	font-weight: 700;
	cursor: pointer;
}

.ai-summary {
	background: rgba(255, 255, 255, 0.05);
	padding: 10px;
	border-radius: 6px;
	font-size: 0.8rem;
	color: #ccc;
	display: flex;
	gap: 10px;
}


/* --- MARQUEE (Fixed sizing) --- */
.logo-marquee {
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding: 2rem 0;
	background: #020202;
	overflow: hidden;
	white-space: nowrap;
	margin: 4rem 0;
}

.track {
	display: inline-block;
	animation: marquee 40s linear infinite;
}

.track img {
	height: 30px;
	/* Forced height to prevent huge logos */
	width: auto;
	margin: 0 40px;
	opacity: 0.5;
	filter: grayscale(100%);
	transition: 0.3s;
	vertical-align: middle;
	object-fit: contain;
}

.track img:hover {
	opacity: 1;
	filter: grayscale(0%);
}

@keyframes marquee {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}


/* --- DX, VIDEO, FEATURES, PRICING (Standard) --- */
.dx-section {
	padding: 8rem 0;
}

.dx-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5rem;
	align-items: center;
}

.pill-label {
	color: var(--primary);
	font-family: var(--font-mono);
	font-size: 0.8rem;
	margin-bottom: 1rem;
	display: inline-block;
}

.dx-text h2 {
	font-size: 3rem;
	line-height: 1.1;
	margin-bottom: 1.5rem;
}

.dx-text p {
	font-size: 1.1rem;
	color: var(--text-muted);
	margin-bottom: 2rem;
}

.dx-features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin-bottom: 2rem;
}

.dx-feat {
	display: flex;
	gap: 12px;
}

.dx-feat i {
	color: var(--primary);
}

.dx-feat strong {
	display: block;
	color: white;
	font-size: 1rem;
}

.dx-feat span {
	font-size: 0.85rem;
	color: #666;
}

.btn-link-arrow {
	color: white;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.dx-code-window {
	background: #0d0d0d;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #333;
	font-family: 'JetBrains Mono', monospace;
}

.window-nav {
	background: #1a1a1a;
	padding: 10px 16px;
	display: flex;
	gap: 20px;
	align-items: center;
}

.win-dots span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
	margin-right: 6px;
	background: #333;
}

.win-dots .r {
	background: #ff5f57;
}

.win-dots .y {
	background: #febc2e;
}

.win-dots .g {
	background: #28c840;
}

.code-tabs span {
	font-size: 0.8rem;
	color: #666;
	margin-right: 15px;
	cursor: pointer;
}

.code-tabs span.active {
	color: white;
}

.code-content {
	padding: 24px;
	font-size: 0.85rem;
	line-height: 1.6;
	color: #a9b7c6;
}

.k {
	color: #cc7832;
}

.s {
	color: #6a8759;
}

.f {
	color: #ffc66d;
}

.p {
	color: #9876aa;
}

.c {
	color: #808080;
}

.video-section {
	padding: 2rem 0 6rem;
}

.video-wrapper {
	position: relative;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	border-radius: 24px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.video-bg-layer {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #111, #000);
	background-image: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=1200&q=80');
	background-size: cover;
	opacity: 0.4;
}

.video-overlay {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.play-button {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.3s;
}

.play-button:hover {
	transform: scale(1.1);
	background: rgba(255, 255, 255, 0.2);
}

.play-button i {
	fill: white;
	width: 32px;
	height: 32px;
}

.play-ripple {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90px;
	height: 90px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.3);
	animation: ripple 2s infinite;
	pointer-events: none;
}

.r2 {
	animation-delay: 0.5s;
}

.feature-deck {
	padding: 8rem 0;
	background: #020202;
	border-top: 1px solid #111;
}

.deck-container {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 4rem;
	margin-top: 4rem;
}

.deck-sidebar {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.deck-item {
	padding: 20px;
	border-radius: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 16px;
	color: #888;
	transition: 0.2s;
	border: 1px solid #222222;
}

.deck-item:hover {
	color: white;
	background: rgba(255, 255, 255, 0.02);
}

.deck-item.active {
	background: #111;
	color: white;
	border-color: #222;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.item-icon {
	width: 40px;
	height: 40px;
	background: #1a1a1a;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.deck-item.active .item-icon {
	background: var(--primary);
	color: black;
}

.deck-display-area {
	background: #0a0a0a;
	border: 1px solid var(--border);
	border-radius: 24px;
	padding: 3rem;
	min-height: 500px;
	position: relative;
}

.deck-card {
	display: none;
	animation: fadeUp 0.4s ease;
	height: 100%;
	flex-direction: column;
	justify-content: center;
}

.deck-card.active {
	display: flex;
}

.deck-visual {
	height: 280px;
	background: #151518;
	border-radius: 16px;
	border: 1px solid #222;
	margin-bottom: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.deck-text h3 {
	font-size: 2rem;
	margin-bottom: 1rem;
}

/* Visuals inside Feature Deck */
.theme-editor {
	display: flex;
	gap: 20px;
}

.swatches {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.swatch {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid #333;
}

.swatch.active {
	border-color: white;
}

.preview-chat {
	width: 200px;
	background: #222;
	border-radius: 12px;
	overflow: hidden;
}

.p-header {
	padding: 12px;
	color: black;
	font-weight: bold;
	font-size: 0.8rem;
	text-align: center;
}

.p-body {
	padding: 20px;
}

.p-msg {
	background: #333;
	padding: 8px;
	border-radius: 8px;
	font-size: 0.8rem;
	width: fit-content;
}

.mini-chart {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	height: 100px;
	border-bottom: 1px solid #333;
	padding-bottom: 10px;
	width: 80%;
}

.mini-chart .bar {
	flex: 1;
	background: #333;
	border-radius: 4px 4px 0 0;
}

.mini-chart .bar.active {
	background: var(--primary);
	box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

.stat-row {
	display: flex;
	gap: 20px;
	margin-top: 20px;
}

.stat {
	background: #1a1a1a;
	padding: 10px 20px;
	border-radius: 8px;
	border: 1px solid #333;
	text-align: center;
}

.stat strong {
	font-size: 1.2rem;
	display: block;
	color: white;
}

.stat span {
	font-size: 0.7rem;
	color: #888;
}

.translation-demo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	width: 100%;
}

.bubble-row {
	display: flex;
	align-items: center;
	gap: 15px;
}

.flag-icon {
	font-size: 1.5rem;
}

.bubble.orig {
	background: #333;
	padding: 12px 20px;
	border-radius: 12px;
	font-size: 1rem;
	color: #ccc;
}

.bubble.trans {
	background: var(--primary);
	color: black;
	padding: 12px 20px;
	border-radius: 12px;
	font-weight: 700;
	font-size: 1rem;
}

.process-arrow {
	color: #666;
}

.kanban-board {
	display: flex;
	gap: 20px;
	width: 80%;
}

.kanban-col {
	flex: 1;
	background: #1a1a1a;
	padding: 12px;
	border-radius: 8px;
	border: 1px solid #333;
}

.k-head {
	font-size: 0.75rem;
	color: #888;
	margin-bottom: 12px;
	display: flex;
	justify-content: space-between;
}

.k-item {
	background: #252525;
	padding: 10px;
	border-radius: 6px;
	font-size: 0.8rem;
	margin-bottom: 8px;
	border: 1px solid #333;
	color: #ccc;
}

.k-item.active {
	border-color: var(--primary);
	background: #2a2a2a;
	color: white;
}

.k-tag {
	display: inline-block;
	background: rgba(239, 68, 68, 0.2);
	color: #ef4444;
	font-size: 0.6rem;
	padding: 2px 6px;
	border-radius: 4px;
	margin-bottom: 4px;
}

.sec-visual {
	gap: 20px;
}

.shield-anim {
	font-size: 3rem;
	color: #4ade80;
}

.redact-demo {
	font-family: 'JetBrains Mono', monospace;
	background: #111;
	padding: 15px 20px;
	border-radius: 8px;
	border: 1px solid #333;
	color: #ccc;
}

.blur {
	filter: blur(6px);
	background: #444;
	color: transparent;
	margin-left: 5px;
}

.file-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	width: 80%;
}

.file-card {
	background: #1a1a1a;
	border: 1px solid #333;
	padding: 15px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	gap: 10px;
	color: #ccc;
	font-size: 0.85rem;
}

.pricing {
	padding: 8rem 0;
	background: #050505;
	position: relative;
}

.toggle-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
	background: #111;
	padding: 6px 16px;
	border-radius: 50px;
	border: 1px solid var(--border);
}

.toggle-switch {
	width: 44px;
	height: 24px;
	background: #333;
	border-radius: 20px;
	position: relative;
	cursor: pointer;
	transition: 0.3s;
}

.toggle-switch.active {
	background: var(--primary);
}

.toggle-knob {
	width: 18px;
	height: 18px;
	background: white;
	border-radius: 50%;
	position: absolute;
	top: 3px;
	left: 3px;
	transition: 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.toggle-switch.active .toggle-knob {
	transform: translateX(20px);
}

.save-badge {
	color: #ffd60a;
	font-size: 0.75rem;
	background: rgba(255, 214, 10, 0.1);
	padding: 2px 8px;
	border-radius: 4px;
	font-weight: 700;
}

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin-bottom: 5rem;
	margin-top: 4rem;
}

.pricing-card {
	background: #0a0a0a;
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: transform 0.3s ease, border-color 0.3s ease;
}

.pricing-card:hover {
	border-color: #444;
}

.pricing-card.featured {
	background: #0f0f11;
	border: 1px solid var(--primary);
	box-shadow: 0 0 30px rgba(0, 229, 255, 0.05);
	z-index: 2;
}

.popular-tag {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--primary);
	color: #000;
	padding: 4px 16px;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: 0 4px 12px rgba(0, 229, 255, 0.4);
}

.plan-name {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: white;
}

.plan-price {
	font-size: 3rem;
	font-weight: 800;
	color: white;
	margin: 1rem 0 0.5rem;
	font-family: var(--font-display);
	letter-spacing: -0.03em;
}

.plan-price span {
	font-size: 1rem;
	color: var(--text-muted);
	font-weight: 500;
	letter-spacing: normal;
}

.plan-desc {
	color: var(--text-muted);
	font-size: 0.95rem;
	margin-bottom: 2rem;
	min-height: 48px;
}

.feature-list {
	margin-top: 2rem;
	border-top: 1px solid var(--border);
	padding-top: 2rem;
}

.feature-list ul {
	list-style: none;
	padding: 0;
}

.feature-list li {
	display: flex;
	gap: 12px;
	margin-bottom: 1rem;
	color: #d4d4d8;
	font-size: 0.9rem;
	align-items: center;
}

.feature-list li i {
	color: var(--primary);
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.comparison-table-container {
	margin-top: 6rem;
	overflow-x: auto;
	background: #0a0a0a;
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 1rem;
}

.comparison-table-container h3 {
	text-align: center;
	margin: 2rem 0 3rem;
	font-size: 1.8rem;
}

.comparison-table {
	width: 100%;
	border-collapse: collapse;
	color: #d4d4d8;
	font-size: 0.9rem;
	min-width: 600px;
}

.comparison-table th {
	padding: 1.5rem;
	border-bottom: 1px solid var(--border);
	color: white;
	text-align: center;
	font-family: var(--font-display);
	font-size: 1rem;
}

.comparison-table th.feature-col {
	text-align: left;
	width: 30%;
	padding-left: 2rem;
}

.comparison-table td {
	padding: 1.2rem 1rem;
	border-bottom: 1px solid #1f1f22;
	text-align: center;
}

.comparison-table td:first-child {
	text-align: left;
	color: white;
	font-weight: 600;
	padding-left: 2rem;
}

.section-title td {
	background: #111113;
	color: var(--primary);
	font-weight: 800;
	text-align: left;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	padding: 0.8rem 2rem;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.icon-yes {
	color: var(--primary);
	width: 20px;
	height: 20px;
	margin: 0 auto;
}

.icon-no {
	color: #333;
	width: 20px;
	height: 20px;
	margin: 0 auto;
}

.text-highlight {
	color: var(--voice-color);
	font-weight: 700;
}

.sub-text {
	display: block;
	font-size: 0.75rem;
	color: #71717a;
	margin-top: 4px;
	font-weight: 400;
}

.table-footnote {
	margin-top: 2rem;
	text-align: center;
	font-size: 0.85rem;
	color: #52525b;
}

.wall-of-love {
	padding: 6rem 0;
}

.masonry-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin-top: 3rem;
}

.review-card {
	background: #0e0e10;
	border: 1px solid #222;
	padding: 2rem;
	border-radius: 16px;
	position: relative;
	transition: 0.3s;
}

.review-card:hover {
	border-color: #444;
}

.review-card p {
	font-size: 1.1rem;
	color: #e2e8f0;
	margin-bottom: 1.5rem;
	font-style: italic;
}

.reviewer {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.9rem;
}

.r-avatar {
	width: 40px;
	height: 40px;
	background: #333;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color: #888;
}

footer {
	padding: 6rem 0 2rem;
	background: #030303;
	border-top: 1px solid #222;
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 4rem;
	margin-bottom: 4rem;
}

.socials {
	display: flex;
	gap: 1rem;
	margin-top: 1rem;
}

.socials a {
	color: #666;
	transition: 0.2s;
}

.socials a:hover {
	color: white;
}

.col h4 {
	margin-bottom: 1.5rem;
	color: white;
	font-size: 0.9rem;
}

.col a {
	display: block;
	color: #666;
	margin-bottom: 0.8rem;
	font-size: 0.9rem;
}

.col a:hover {
	color: var(--primary);
}

@media (max-width: 768px) {
	.hero h1 {
		font-size: 3rem;
	}

	.hero-layout {
		gap: 3rem;
	}

	.pane-content,
	.dx-grid,
	.deck-container {
		grid-template-columns: 1fr;
	}

	.visual-side {
		order: -1;
		margin-bottom: 2rem;
		height: 300px;
	}

	.deck-sidebar {
		flex-direction: row;
		overflow-x: auto;
		padding-bottom: 10px;
	}

	.deck-item {
		min-width: 200px;
		white-space: nowrap;
	}

	.nav-links,
	.nav-actions {
		display: none;
	}

	.mobile-menu-btn {
		display: block;
	}

	.video-wrapper {
		height: 300px;
	}
}

/* --- SPOTLIGHT EFFECT REMOVED --- */
.pricing-card,
.deck-item,
.review-card,
.dx-code-window,
.interactive-showcase {
	position: relative;
	overflow: hidden;
}

/* Extra Polish */
.glass-panel {
	backdrop-filter: blur(24px) saturate(180%);
	background: rgba(15, 15, 17, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
}

.btn-shiny {
	box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.btn-shiny:hover {
	box-shadow: 0 0 25px rgba(255, 255, 255, 0.2), 0 0 5px var(--primary);
}

/* --- 3D TILT & MAGNETIC --- */
/* .pricing-card,
.review-card,
.deck-visual {
	transform-style: preserve-3d;
	transition: transform 0.1s ease-out;
} */

/* .btn-shiny,
.nav-actions a,
.btn-outline {
	transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.2s, color 0.2s, box-shadow 0.2s;
} */

/* --- TEXT REVEAL --- */
.reveal-text-container {
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	gap: 0.2em;
}

.reveal-word {
	display: inline-block;
	transform: translateY(100%);
	opacity: 0;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s;
}

.reveal-text-container.active .reveal-word {
	transform: translateY(0);
	opacity: 1;
}

/* --- COMPARISON SECTION --- */
.comparison-section {
	padding: 100px 0;
	position: relative;
}

.comp-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 30px;
	align-items: center;
	margin-top: 60px;
}

.comp-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 24px;
	padding: 40px;
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}

.pain-side {
	background: linear-gradient(145deg, rgba(239, 68, 68, 0.05), rgba(0, 0, 0, 0.2));
	border-color: rgba(239, 68, 68, 0.2);
}

.pain-side:hover {
	border-color: rgba(239, 68, 68, 0.4);
	box-shadow: 0 0 30px rgba(239, 68, 68, 0.1);
}

.gain-side {
	background: linear-gradient(145deg, rgba(74, 222, 128, 0.05), rgba(0, 0, 0, 0.2));
	border-color: rgba(74, 222, 128, 0.2);
}

.gain-side:hover {
	border-color: rgba(74, 222, 128, 0.4);
	box-shadow: 0 0 30px rgba(74, 222, 128, 0.1);
}

.comp-header {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 30px;
}

.icon-box {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}

.icon-box.pain {
	background: rgba(239, 68, 68, 0.1);
	color: #ef4444;
}

.icon-box.gain {
	background: rgba(74, 222, 128, 0.1);
	color: #4ade80;
}

.comp-visual {
	height: 200px;
	position: relative;
	margin-bottom: 30px;
	border-radius: 16px;
	background: rgba(0, 0, 0, 0.2);
}

/* Pain Visuals */
.pain-visual {
	border: 1px dashed rgba(239, 68, 68, 0.3);
}

.floating-ticket {
	position: absolute;
	background: #1a1a1a;
	border: 1px solid #333;
	padding: 10px 15px;
	border-radius: 8px;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 180px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.t1 {
	top: 30px;
	left: 20px;
	transform: rotate(-5deg);
}

.t2 {
	top: 80px;
	right: 20px;
	transform: rotate(3deg);
}

.t3 {
	bottom: 30px;
	left: 40px;
	transform: rotate(-2deg);
	border-color: #ef4444;
}

.badge-late {
	background: rgba(239, 68, 68, 0.2);
	color: #ef4444;
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 4px;
}

/* Gain Visuals */
.gain-visual {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 20px;
	justify-content: center;
	border: 1px solid rgba(74, 222, 128, 0.2);
}

.grid-ticket {
	background: rgba(74, 222, 128, 0.05);
	border: 1px solid rgba(74, 222, 128, 0.2);
	padding: 12px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 15px;
}

.t-icon {
	color: #4ade80;
	width: 20px;
	height: 20px;
}

.t-info {
	display: flex;
	flex-direction: column;
}

.t-info strong {
	font-size: 14px;
	color: #fff;
}

.t-info span {
	font-size: 12px;
	color: #4ade80;
}

/* List Styles */
.comp-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.comp-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
	font-size: 15px;
	color: var(--text-secondary);
}

.pain-list li i {
	color: #ef4444;
	width: 18px;
}

.gain-list li i {
	color: #4ade80;
	width: 18px;
}

/* VS Badge */
.vs-badge {
	width: 50px;
	height: 50px;
	background: #111;
	border: 1px solid #333;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	color: #666;
	z-index: 2;
}

.comp-cta {
	margin-top: 60px;
}

.comp-cta p {
	margin-bottom: 20px;
	color: var(--text-secondary);
	font-size: 18px;
}

@media (max-width: 768px) {
	.comp-grid {
		grid-template-columns: 1fr;
		gap: 50px;
	}

	.vs-badge {
		margin: -25px auto;
		transform: rotate(90deg);
		/* Optional twist */
	}
}

/* --- FINAL CTA SECTION --- */
.final-cta {
	padding: 100px 0;
}

.cta-card {
	background: linear-gradient(135deg, #111, #0f172a);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 32px;
	padding: 80px 40px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.cta-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 70%);
	filter: blur(60px);
	pointer-events: none;
}

.cta-content {
	position: relative;
	z-index: 2;
	max-width: 700px;
	margin: 0 auto;
}

.cta-content h2 {
	font-size: 48px;
	margin-bottom: 20px;
	color: white;
	/* Removed gradient text to fix conflict with text reveal */
}

.cta-content p {
	font-size: 20px;
	color: var(--text-secondary);
	margin-bottom: 40px;
}

.reveal-up {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.active {
	opacity: 1;
	transform: translateY(0);
}

.cta-actions {
	display: flex;
	justify-content: center;
	gap: 20px;
}

@media (max-width: 768px) {
	.cta-content h2 {
		font-size: 36px;
	}

	.cta-actions {
		flex-direction: column;
		gap: 15px;
	}

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



/* --- SETUP TIMELINE GRAPHIC --- */
.setup-graphic {
	width: 100%;
	max-width: 450px;
	background: #0d0d0d;
	border-radius: 16px;
	border: 1px solid #333;
	overflow: hidden;
	position: relative;
	font-family: var(--font-mono);
	/* Uses your JetBrains Mono */
}

.setup-header {
	background: #1a1a1a;
	padding: 12px 16px;
	display: flex;
	gap: 15px;
	align-items: center;
	border-bottom: 1px solid #333;
	color: #666;
	font-size: 0.8rem;
}

.timeline-container {
	padding: 30px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 25px;
}

/* The vertical line behind dots */
.progress-line {
	position: absolute;
	top: 45px;
	left: 104px;
	/* Adjust based on time width */
	width: 2px;
	height: 0%;
	/* Animates to 80% */
	background: var(--primary);
	/* Cyan */
	box-shadow: 0 0 10px var(--primary);
	z-index: 0;
	animation: drawLine 6s linear infinite;
}

.t-step {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	position: relative;
	z-index: 1;
	opacity: 0.3;
	/* Start dimmed */
	filter: blur(1px);
	transition: 0.3s;
}

.t-time {
	width: 60px;
	text-align: right;
	font-size: 0.8rem;
	color: #666;
	padding-top: 2px;
}

.t-marker {
	width: 24px;
	height: 24px;
	background: #1a1a1a;
	border: 2px solid #444;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.3s;
}

.icon-check {
	width: 14px;
	height: 14px;
	color: black;
	opacity: 0;
	transform: scale(0);
}

.t-content {
	display: flex;
	flex-direction: column;
}

.t-content strong {
	color: white;
	font-size: 0.9rem;
}

.t-content span {
	color: #666;
	font-size: 0.8rem;
}

/* --- ANIMATION STATES --- */

/* Step 1 */
.step-1 {
	animation: stepActive 6s infinite;
	animation-delay: 0s;
}

.step-1 .t-marker {
	animation: markerFinish 6s infinite;
	animation-delay: 0.5s;
}

.step-1 .icon-check {
	animation: checkPop 6s infinite;
	animation-delay: 0.5s;
}

/* Step 2 */
.step-2 {
	animation: stepActive 6s infinite;
	animation-delay: 1.5s;
}

.step-2 .t-marker {
	animation: markerFinish 6s infinite;
	animation-delay: 2s;
}

.step-2 .icon-check {
	animation: checkPop 6s infinite;
	animation-delay: 2s;
}

/* Step 3 */
.step-3 {
	animation: stepActive 6s infinite;
	animation-delay: 3s;
}

.step-3 .t-marker {
	animation: markerFinish 6s infinite;
	animation-delay: 3.5s;
}

.step-3 .icon-check {
	animation: checkPop 6s infinite;
	animation-delay: 3.5s;
}

/* Step 4 (Live) */
.step-4 {
	animation: stepActive 6s infinite;
	animation-delay: 4.5s;
}

.active-pulse {
	background: var(--primary) !important;
	border-color: var(--primary) !important;
	box-shadow: 0 0 15px var(--primary);
}

.live-badge {
	background: rgba(0, 229, 255, 0.15);
	color: var(--primary) !important;
	padding: 2px 8px;
	border-radius: 4px;
	font-weight: 700;
	display: inline-block;
	width: fit-content;
	margin-top: 4px;
}

/* Success Card Popup */
.success-card {
	position: absolute;
	bottom: 20px;
	right: 20px;
	background: #111;
	border: 1px solid var(--primary);
	padding: 12px 20px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

	/* Animation */
	opacity: 0;
	transform: translateY(20px);
	animation: cardPop 6s infinite;
	animation-delay: 5s;
}

.check-circle {
	width: 30px;
	height: 30px;
	background: var(--primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: black;
}

/* --- KEYFRAMES --- */

@keyframes drawLine {
	0% {
		height: 0;
	}

	10% {
		height: 0;
	}

	/* Wait for step 1 */
	70% {
		height: 75%;
	}

	/* Draw to bottom */
	100% {
		height: 75%;
	}
}

@keyframes stepActive {
	0% {
		opacity: 0.3;
		filter: blur(1px);
	}

	5% {
		opacity: 1;
		filter: blur(0);
	}

	/* Become active */
	90% {
		opacity: 1;
		filter: blur(0);
	}

	100% {
		opacity: 0.3;
		filter: blur(1px);
	}

	/* Reset */
}

@keyframes markerFinish {
	0% {
		background: #1a1a1a;
		border-color: #444;
	}

	10% {
		background: #4ade80;
		border-color: #4ade80;
	}

	/* Turn Green */
	90% {
		background: #4ade80;
		border-color: #4ade80;
	}

	100% {
		background: #1a1a1a;
		border-color: #444;
	}
}

@keyframes checkPop {
	0% {
		opacity: 0;
		transform: scale(0);
	}

	10% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes cardPop {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	10% {
		opacity: 1;
		transform: translateY(0);
	}

	80% {
		opacity: 1;
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		transform: translateY(20px);
	}
}

.gradient-h3 {
	font-size: 2.5rem;
	line-height: 1.1;
	margin-bottom: 1rem;
	background: linear-gradient(to right, #fff, #a1a1aa);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.hero-desc {
	font-size: 1.1rem;
	color: var(--text-muted);
	margin-bottom: 2rem;
	max-width: 90%;
}

/* 2x2 Grid for Features */
.value-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	margin-bottom: 25px;
}

.value-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 16px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: 0.2s;
}

.value-card:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.2);
	transform: translateY(-2px);
}

.v-icon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.v-icon i {
	width: 18px;
	height: 18px;
}

/* Icon Color Variants */
.v-icon.cyan {
	background: rgba(0, 229, 255, 0.1);
	color: var(--primary);
}

.v-icon.purple {
	background: rgba(168, 85, 247, 0.1);
	color: var(--voice-color);
}

.v-icon.green {
	background: rgba(74, 222, 128, 0.1);
	color: #4ade80;
}

.v-icon.orange {
	background: rgba(251, 146, 60, 0.1);
	color: #fb923c;
}

.v-text {
	display: flex;
	flex-direction: column;
}

.v-text strong {
	font-size: 0.9rem;
	color: white;
}

.v-text span {
	font-size: 0.75rem;
	color: var(--text-muted);
	line-height: 1.2;
}

/* Voice Quality Bar */
.voice-quality-bar {
	background: linear-gradient(90deg, rgba(168, 85, 247, 0.1), transparent);
	border: 1px solid rgba(168, 85, 247, 0.2);
	padding: 12px 16px;
	border-radius: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 25px;
}

.vq-info {
	display: flex;
	align-items: center;
	gap: 12px;
}

.vq-info i {
	color: var(--voice-color);
}

.vq-info div {
	display: flex;
	flex-direction: column;
}

.vq-info strong {
	font-size: 0.9rem;
	color: #e9d5ff;
}

.vq-info span {
	font-size: 0.75rem;
	color: #a855f7;
}

/* Mini Waveform Animation */
.mini-waveform {
	display: flex;
	gap: 3px;
	align-items: center;
	height: 16px;
}

.mini-waveform .bar {
	width: 3px;
	background: var(--voice-color);
	border-radius: 2px;
	animation: quietWave 1s ease-in-out infinite;
}

.mini-waveform .bar:nth-child(1) {
	height: 60%;
	animation-delay: 0.0s;
}

.mini-waveform .bar:nth-child(2) {
	height: 100%;
	animation-delay: 0.1s;
}

.mini-waveform .bar:nth-child(3) {
	height: 80%;
	animation-delay: 0.2s;
}

.mini-waveform .bar:nth-child(4) {
	height: 50%;
	animation-delay: 0.3s;
}

@keyframes quietWave {

	0%,
	100% {
		transform: scaleY(0.5);
		opacity: 0.5;
	}

	50% {
		transform: scaleY(1);
		opacity: 1;
	}
}

/* Impact Alert Box */
.impact-alert {
	border-left: 3px solid #4ade80;
	background: rgba(74, 222, 128, 0.05);
	padding: 12px 16px;
	margin-bottom: 2rem;
	font-size: 0.95rem;
	color: #ccc;
	display: flex;
	gap: 12px;
	align-items: center;
}

.impact-alert i {
	color: #4ade80;
	flex-shrink: 0;
}

.impact-alert strong {
	color: white;
}

/* Responsive adjustments */
@media (max-width: 600px) {
	.value-grid {
		grid-template-columns: 1fr;
	}
}




/* --- UNIVERSAL DECK STYLES --- */
.deck-display-area {
	background: radial-gradient(circle at top right, #1a1a1a, #050505);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

.deck-visual {
	height: 320px;
	background: transparent;
	border: none;
	border-radius: 0;
	margin-bottom: 2rem;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	perspective: 1000px;
	/* Essential for 3D effects */
}

/* --- 1. BRANDING VISUAL --- */
.branding-visual {
	background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
}

.ui-perspective-wrapper {
	transform: rotateX(10deg) rotateY(-10deg) rotateZ(2deg);
	transform-style: preserve-3d;
	transition: transform 0.5s ease;
}

.ui-interface {
	width: 240px;
	height: 300px;
	background: #111;
	border: 1px solid #333;
	border-radius: 12px;
	box-shadow: -20px 20px 40px rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
}

.ui-header {
	height: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: var(--ui-color, #00e5ff);
	/* Dynamic Variable */
	display: flex;
	align-items: center;
	padding: 0 15px;
	justify-content: space-between;
	transition: background 0.5s ease;
}

.ui-brand-logo {
	width: 60px;
	height: 8px;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 4px;
}

.ui-dots span {
	display: inline-block;
	width: 6px;
	height: 6px;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	margin-left: 4px;
}

.ui-body {
	flex: 1;
	padding: 15px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ui-chat-bubble {
	height: 30px;
	border-radius: 8px;
	width: 80%;
}

.ui-chat-bubble.bot {
	background: #222;
	align-self: flex-start;
}

.ui-chat-bubble.user {
	background: var(--ui-color, #00e5ff);
	align-self: flex-end;
	opacity: 0.8;
	transition: background 0.5s ease;
}

.ui-input-area {
	height: 40px;
	border-top: 1px solid #222;
	background: #0f0f0f;
}

/* Color Picker Animation */
.color-picker-floater {
	position: absolute;
	right: 40px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.color-dot {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.2);
	cursor: pointer;
	transition: 0.3s;
}

.color-dot.c1 {
	background: #00e5ff;
}

.color-dot.c2 {
	background: #a855f7;
}

.color-dot.c3 {
	background: #ff9e00;
}

.cursor-hand {
	position: absolute;
	width: 20px;
	height: 20px;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M12 2l-5.5 9h11z"/></svg>');
	/* Simplified cursor shape */
	background-size: contain;
	background-repeat: no-repeat;
	transform: rotate(-30deg);
	top: 0;
	left: 10px;
	animation: moveCursor 6s infinite;
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}

/* Animations for Branding */
@keyframes moveCursor {

	0%,
	20% {
		top: 0;
		--ui-color: #00e5ff;
	}

	33%,
	53% {
		top: 40px;
		--ui-color: #a855f7;
	}

	66%,
	86% {
		top: 80px;
		--ui-color: #ff9e00;
	}

	100% {
		top: 0;
		--ui-color: #00e5ff;
	}
}

/* Bind animation to the UI container to change colors */
.branding-visual {
	animation: changeTheme 6s infinite step-end;
}

@keyframes changeTheme {
	0% {
		--ui-color: #00e5ff;
	}

	33% {
		--ui-color: #a855f7;
	}

	66% {
		--ui-color: #ff9e00;
	}
}

/* --- 2. DASHBOARD VISUAL (Human-in-the-Loop) --- */
.dashboard-visual {
	/* Reset layout from previous version */
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at bottom, #111 0%, #050505 70%);
	perspective: 1000px;
	/* Crucial for 3D depth */
	overflow: hidden;
}

/* 1. The Main Chat Window */
.live-chat-interface {
	width: 320px;
	height: 280px;
	background: #0f0f0f;
	border: 1px solid #333;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	position: relative;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
	/* 3D Tilt */
	transform: rotateX(10deg) scale(0.9);
	transition: 0.5s ease;
	overflow: hidden;
}

/* Header Styles */
.chat-header {
	padding: 12px 16px;
	border-bottom: 1px solid #222;
	background: #151515;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.user-meta {
	display: flex;
	gap: 10px;
	align-items: center;
}

.avatar {
	width: 30px;
	height: 30px;
	background: #333;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: bold;
	color: #ccc;
}

.meta-info {
	display: flex;
	flex-direction: column;
}

.meta-info strong {
	font-size: 0.8rem;
	color: white;
	line-height: 1;
	margin-bottom: 2px;
}

.meta-info span {
	font-size: 0.65rem;
	color: #666;
}

/* Status Indicator (Changes Color) */
.live-status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.7rem;
	color: #666;
	background: rgba(255, 255, 255, 0.05);
	padding: 4px 8px;
	border-radius: 4px;
	transition: 0.3s;
}

.status-dot {
	width: 6px;
	height: 6px;
	background: #666;
	border-radius: 50%;
	transition: 0.3s;
}

/* 2. Messages Area */
.chat-messages {
	flex: 1;
	padding: 15px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bubble {
	padding: 8px 12px;
	border-radius: 12px;
	font-size: 0.8rem;
	max-width: 85%;
	line-height: 1.4;
}

.bubble.user {
	background: #222;
	color: #ddd;
	align-self: flex-end;
	border-bottom-right-radius: 2px;
}

.bubble.bot {
	background: rgba(0, 229, 255, 0.1);
	color: var(--primary);
	align-self: flex-start;
	border-bottom-left-radius: 2px;
}

/* System Trigger Line */
.system-trigger {
	align-self: center;
	font-size: 0.65rem;
	color: #555;
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 5px 0;
	opacity: 0;
	animation: fadeInTrigger 6s infinite;
}

/* Agent Message (Initially Hidden) */
.bubble.agent {
	background: var(--voice-color);
	/* Purple for Human */
	color: white;
	align-self: flex-start;
	border-bottom-left-radius: 2px;
	display: flex;
	gap: 8px;
	align-items: center;
	opacity: 0;
	transform: translateY(10px);
	animation: agentReply 6s infinite;
}

.agent-icon {
	font-size: 0.8rem;
}

/* 3. The Notification Popup (Toast) */
.agent-notification {
	position: absolute;
	bottom: 30px;
	right: 30px;
	background: #1a1a1a;
	border: 1px solid var(--primary);
	border-radius: 10px;
	padding: 12px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
	z-index: 10;

	/* Animation: Slide Up, then Disappear when "Clicked" */
	animation: notificationSequence 6s infinite;
	opacity: 0;
	transform: translateY(20px) scale(0.9);
}

.notif-icon {
	width: 36px;
	height: 36px;
	background: rgba(0, 229, 255, 0.1);
	color: var(--primary);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.notif-text {
	display: flex;
	flex-direction: column;
}

.notif-text strong {
	font-size: 0.8rem;
	color: white;
}

.notif-text span {
	font-size: 0.7rem;
	color: #888;
}

.btn-join {
	background: var(--primary);
	color: black;
	font-size: 0.75rem;
	font-weight: bold;
	padding: 6px 12px;
	border-radius: 6px;
}

/* 4. The Fake Cursor */
.sim-cursor {
	position: absolute;
	width: 18px;
	height: 18px;
	bottom: -40px;
	right: -40px;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
	animation: cursorAction 6s infinite;
	z-index: 20;
}

/* --- ANIMATION KEYFRAMES --- */

/* 1. Notification Appears */
@keyframes notificationSequence {

	0%,
	25% {
		opacity: 0;
		transform: translateY(20px) scale(0.9);
		pointer-events: none;
	}

	30% {
		opacity: 1;
		transform: translateY(0) scale(1);
		pointer-events: auto;
	}

	/* Popup */
	60% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	/* Stay while cursor moves */
	65% {
		opacity: 0;
		transform: translateY(0) scale(1.05);
	}

	/* "Clicked" - vanish */
	100% {
		opacity: 0;
	}
}

/* 2. Cursor Moves & Clicks */
@keyframes cursorAction {

	0%,
	30% {
		transform: translate(100px, 100px);
		opacity: 0;
	}

	/* Start off screen */
	35% {
		opacity: 1;
	}

	40% {
		transform: translate(100px, 100px);
	}

	/* Initial Pos */
	55% {
		transform: translate(-30px, -25px);
	}

	/* Over button */
	60% {
		transform: translate(-30px, -25px) scale(0.9);
	}

	/* Click press */
	65% {
		transform: translate(-30px, -25px) scale(1);
		opacity: 0;
	}

	/* Release & hide */
	100% {
		opacity: 0;
	}
}

/* 3. Chat Window Reacts to "Takeover" */
/* We animate the border/glow of the main window */
.live-chat-interface {
	animation: windowGlow 6s infinite;
}

@keyframes windowGlow {

	0%,
	64% {
		border-color: #333;
		box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
	}

	65% {
		border-color: var(--voice-color);
		box-shadow: 0 0 30px rgba(168, 85, 247, 0.2);
	}

	/* Agent Joined! */
	90% {
		border-color: var(--voice-color);
	}

	100% {
		border-color: #333;
	}
}

/* 4. Status Text Updates */
.live-status .status-text {
	animation: textSwap 6s infinite;
}

.live-status .status-dot {
	animation: dotSwap 6s infinite;
}

@keyframes textSwap {

	0%,
	64% {
		content: "AI Handling";
		opacity: 1;
	}

	65% {
		opacity: 0;
	}

	/* Quick fade for text swap simulation */
	66% {
		opacity: 1;
	}

	/* We can't actually change content property easily without pseudoelements, so we rely on context */
	100% {
		opacity: 1;
	}
}

/* Visual trick: The text is static HTML, but we color the dot */
@keyframes dotSwap {

	0%,
	64% {
		background: #666;
		box-shadow: none;
	}

	65% {
		background: #4ade80;
		box-shadow: 0 0 10px #4ade80;
	}

	/* Green "Live" dot */
	100% {
		background: #666;
	}
}

/* 5. Messages Sequence */
@keyframes fadeInTrigger {

	0%,
	20% {
		opacity: 0;
	}

	25% {
		opacity: 1;
	}

	/* Trigger appears */
	65% {
		opacity: 0;
		height: 0;
		margin: 0;
	}

	/* Disappears when agent joins */
	100% {
		opacity: 0;
		height: 0;
		margin: 0;
	}
}

@keyframes agentReply {

	0%,
	68% {
		opacity: 0;
		transform: translateY(10px);
		display: none;
	}

	70% {
		display: flex;
		opacity: 1;
		transform: translateY(0);
	}

	/* Agent msg pops in */
	100% {
		display: flex;
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- 3. TICKETS VISUAL (Kanban) --- */
.ticket-visual-pro {
	position: relative;
	width: 100%;
	height: 100%;
	background: #0a0a0a;
}

.kanban-bg {
	display: flex;
	gap: 15px;
	height: 100%;
	padding: 20px;
	opacity: 0.3;
}

.k-col {
	flex: 1;
	background: #151515;
	border-radius: 8px;
	border: 1px dashed #333;
}

/* Animation Actors */
.chat-source {
	position: absolute;
	left: 20px;
	top: 50px;
	z-index: 10;
	animation: fadeOutMsg 4s infinite;
}

.msg-bubble-source {
	background: #222;
	color: white;
	padding: 10px 16px;
	border-radius: 20px;
	border-bottom-left-radius: 4px;
	font-size: 0.9rem;
}

.flying-ticket {
	position: absolute;
	left: 20px;
	top: 50px;
	width: 140px;
	background: #1a1a1a;
	border: 1px solid var(--primary);
	border-radius: 6px;
	padding: 10px;
	display: flex;
	gap: 10px;
	align-items: center;
	box-shadow: 0 10px 30px rgba(0, 229, 255, 0.2);
	z-index: 20;

	/* Animation Keyframes */
	animation: flyTicket 4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
	opacity: 0;
}

.ft-icon {
	color: var(--primary);
}

.ft-lines span {
	display: block;
	height: 4px;
	background: #333;
	border-radius: 2px;
	margin-bottom: 4px;
	width: 80px;
}

.target-col {
	position: absolute;
	right: 40px;
	top: 20px;
	width: 160px;
	height: 260px;
	background: #111;
	border: 1px solid #333;
	border-radius: 8px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.k-card {
	height: 40px;
	background: #222;
	border-radius: 4px;
	border: 1px solid #333;
}

.k-card-slot {
	height: 60px;
	border: 1px dashed var(--primary);
	border-radius: 4px;
	background: rgba(0, 229, 255, 0.05);
	opacity: 0;
	animation: revealSlot 4s infinite;
}

@keyframes flyTicket {
	0% {
		transform: scale(0.5) translate(0, 0);
		opacity: 0;
	}

	10% {
		transform: scale(1) translate(0, 0);
		opacity: 1;
	}

	/* Appears over chat */
	40% {
		transform: scale(1) translate(180px, -20px) rotate(5deg);
	}

	/* Moves to middle */
	70% {
		transform: scale(0.9) translate(340px, 80px) rotate(0deg);
		opacity: 1;
	}

	/* Lands in col */
	80% {
		opacity: 0;
	}

	/* Disappears (becomes slot) */
	100% {
		opacity: 0;
	}
}

@keyframes fadeOutMsg {

	0%,
	20% {
		opacity: 1;
		transform: scale(1);
	}

	30% {
		opacity: 0;
		transform: scale(0.8);
	}

	/* Poof converting to ticket */
	90% {
		opacity: 0;
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes revealSlot {

	0%,
	70% {
		opacity: 0;
		height: 0;
		margin-bottom: 0;
	}

	75% {
		opacity: 1;
		height: 60px;
		margin-bottom: 10px;
	}

	100% {
		opacity: 1;
		height: 60px;
	}
}

/* --- 4. TRANSLATION VISUAL --- */
.translate-visual {
	flex-direction: column;
	gap: 20px;
}

.lang-card {
	background: #1a1a1a;
	border: 1px solid #333;
	padding: 15px 25px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 20px;
	width: 280px;
	position: relative;
	z-index: 2;
}

.lang-badge {
	background: #333;
	color: #888;
	font-weight: bold;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 0.8rem;
}

.lang-text {
	font-size: 1rem;
	color: white;
}

.translate-arrow {
	position: relative;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary);
}

.processing-ring {
	position: absolute;
	width: 40px;
	height: 40px;
	border: 2px solid transparent;
	border-top-color: var(--primary);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.lang-card.target {
	border-color: var(--primary);
	background: rgba(0, 229, 255, 0.05);
}

.lang-card.target .lang-badge {
	background: var(--primary);
	color: black;
}

.scramble-text {
	display: inline-block;
	position: relative;
}

.scramble-text::after {
	content: '';
	position: absolute;
	inset: 0;
	background: #1a1a1a;
	/* Mask */
	animation: revealText 3s infinite;
}

@keyframes revealText {

	0%,
	40% {
		width: 100%;
		left: 0;
	}

	/* Text Hidden */
	60% {
		width: 0%;
		left: 100%;
	}

	/* Text Revealed */
	100% {
		width: 0%;
		left: 100%;
	}
}

@keyframes spin {
	100% {
		transform: rotate(360deg);
	}
}

/* --- 5. SECURITY VISUAL (Laser) --- */
.security-visual {
	flex-direction: column;
	gap: 30px;
}

.secure-doc {
	width: 260px;
	background: #151515;
	border: 1px solid #333;
	border-radius: 8px;
	padding: 20px;
	position: relative;
	overflow: hidden;
}

.doc-line {
	height: 8px;
	background: #333;
	border-radius: 4px;
	margin-bottom: 12px;
	width: 100%;
}

.doc-line.short {
	width: 60%;
}

.doc-line.sensitive {
	background: rgba(255, 255, 255, 0.1);
	color: transparent;
	position: relative;
}

/* The actual text data/asterisks toggle */
.doc-line.sensitive::before {
	content: attr(data-text);
	/* Starts as plain text */
	position: absolute;
	left: 0;
	top: -2px;
	color: #fff;
	font-family: var(--font-mono);
	font-size: 0.8rem;
	animation: textRedact 4s infinite;
}

.security-laser {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: #4ade80;
	/* Green laser */
	box-shadow: 0 0 10px #4ade80;
	animation: scanDoc 4s ease-in-out infinite;
	opacity: 0.8;
}

.shield-float {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(74, 222, 128, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #4ade80;
	border: 1px solid rgba(74, 222, 128, 0.3);
	box-shadow: 0 0 20px rgba(74, 222, 128, 0.2);
	animation: floatShield 3s ease-in-out infinite alternate;
}

@keyframes scanDoc {
	0% {
		top: 0;
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	90% {
		top: 100%;
		opacity: 1;
	}

	100% {
		top: 100%;
		opacity: 0;
	}
}

@keyframes textRedact {

	0%,
	30% {
		content: attr(data-text);
		color: #fff;
		text-shadow: none;
	}

	35% {
		color: transparent;
		text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
	}

	40%,
	100% {
		content: "**** ****";
		color: #4ade80;
		text-shadow: none;
		letter-spacing: 2px;
	}
}

@keyframes floatShield {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-10px);
	}
}

/* --- 6. KNOWLEDGE VISUAL (Brain) --- */
.knowledge-visual {
	position: relative;
}

.brain-core {
	width: 80px;
	height: 80px;
	background: #111;
	border: 1px solid var(--voice-color);
	/* Purple */
	border-radius: 50%;
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--voice-color);
	box-shadow: 0 0 30px rgba(168, 85, 247, 0.3);
}

.core-pulse {
	position: absolute;
	inset: -10px;
	border: 1px solid rgba(168, 85, 247, 0.3);
	border-radius: 50%;
	animation: ripple 2s infinite;
}

.doc-particle {
	position: absolute;
	padding: 6px 10px;
	background: #222;
	border: 1px solid #444;
	border-radius: 6px;
	font-size: 0.7rem;
	color: #ccc;
	z-index: 5;
	animation: suckIn 4s infinite ease-in;
}

.p1 {
	top: 20px;
	left: 20px;
	animation-delay: 0s;
}

.p2 {
	top: 20px;
	right: 20px;
	animation-delay: 1s;
}

.p3 {
	bottom: 20px;
	left: 20px;
	animation-delay: 2s;
}

.p4 {
	bottom: 20px;
	right: 20px;
	animation-delay: 3s;
}

.connection-lines {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.conn-line {
	fill: none;
	stroke: var(--voice-color);
	stroke-width: 1;
	stroke-dasharray: 10;
	opacity: 0.3;
	animation: dashFlow 1s linear infinite;
}

@keyframes suckIn {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 1;
	}

	80% {
		transform: translate(var(--tx), var(--ty)) scale(0.2);
		opacity: 0.5;
	}

	100% {
		transform: translate(var(--tx), var(--ty)) scale(0);
		opacity: 0;
	}
}

/* Setting custom properties for animation targets based on particle location relative to center */
.p1 {
	--tx: 100px;
	--ty: 100px;
}

.p2 {
	--tx: -100px;
	--ty: 100px;
}

.p3 {
	--tx: 100px;
	--ty: -100px;
}

.p4 {
	--tx: -100px;
	--ty: -100px;
}

@keyframes dashFlow {
	to {
		stroke-dashoffset: -20;
	}
}

/* --- 7. WEBHOOKS & ACTIONS VISUAL --- */
.webhook-visual {
	background: radial-gradient(circle at left, #1a1a1a, #050505);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 40px;
}

/* The Trigger Node (Left) */
.trigger-node {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-left: 20px;
}

.node-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	position: relative;
	background: #111;
	border: 1px solid #333;
	transition: 0.3s;
}

.node-icon.main {
	background: #00e5ff;
	/* Cyan Trigger */
	color: black;
	border-color: #00e5ff;
	box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
}

.node-label {
	font-size: 0.8rem;
	color: white;
	font-weight: 600;
}

.pulse-ring {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* Cover the icon */
	border-radius: 12px;
	border: 1px solid #00e5ff;
	width: 48px;
	height: 48px;
	/* Match icon size */
	animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {

	75%,
	100% {
		transform: scale(2);
		opacity: 0;
	}
}

/* The SVG Flow Lines */
.flow-svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.flow-path {
	fill: none;
	stroke: #333;
	stroke-width: 2;
	stroke-dasharray: 6 6;
}

.flow-dot {
	fill: #00e5ff;
	filter: drop-shadow(0 0 5px #00e5ff);
}

/* The Destination Nodes (Right) */
.destination-stack {
	display: flex;
	flex-direction: column;
	gap: 25px;
	margin-right: 20px;
	z-index: 2;
}

.dest-node {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #111;
	border: 1px solid #333;
	padding: 8px 16px 8px 8px;
	border-radius: 8px;
	width: 130px;
	animation: lightUp 2s infinite;
}

/* Staggered light-up effects to match the dots arriving */
.dest-node:nth-child(1) {
	animation-delay: 1.8s;
}

/* Top */
.dest-node:nth-child(2) {
	animation-delay: 2.0s;
}

/* Middle */
.dest-node:nth-child(3) {
	animation-delay: 2.2s;
}

/* Bottom */

.dest-node span {
	font-size: 0.85rem;
	color: #888;
}

.node-icon.api,
.node-icon.email,
.node-icon.sms {
	width: 32px;
	height: 32px;
	font-size: 0.9rem;
	background: #1a1a1a;
	color: #666;
}

/* Destination Light Up Animation */
@keyframes lightUp {

	0%,
	85% {
		border-color: #333;
		transform: translateX(0);
	}

	90% {
		border-color: white;
		transform: translateX(5px);
		box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
	}

	95% {
		border-color: #333;
		transform: translateX(0);
	}
}

/* --- End FEATURE DECK HEADER UPDATES --- */

/* 1. Center the container and flex items */
.feature-deck .section-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Centers the Pill */
	text-align: center;
	/* Centers the Text */
	max-width: 100%;
	margin: 0 auto 5rem auto;
	/* Spacing below header */
}

/* 2. Make the Pill center-aligned explicitly */
.feature-deck .announcement-pill {
	margin-left: auto;
	margin-right: auto;
}

.feature-deck h2 {
	/* RESET any conflicting animation styles */
	display: block;
	opacity: 1;
	transform: none;

	/* Typography */
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin-bottom: 1.5rem;
	color: white;
	margin-left: auto;
	margin-right: auto;
	max-width: 900px;
}

/* Mobile Fix */
@media (max-width: 768px) {
	.feature-deck h2 {
		font-size: 2.5rem;
	}
}

/* Mobile Fix */
@media (max-width: 768px) {
	.feature-deck h2 {
		font-size: 2.5rem;
		-webkit-text-fill-color: white;
		/* Fallback to solid white on mobile if needed */
	}
}

/* 4. Wider Subtitle */
.feature-deck .hero-sub {
	font-size: 1.25rem;
	line-height: 1.6;
	color: #a1a1aa;

	/* Width Control */
	max-width: 850px;
	/* Increased from typical 600px */
	width: 100%;
	margin: 0 auto;
	/* Ensures it stays centered */
}



/* End Deck Styles */

/* --- FEATURE SECTION GLOW --- */
.feature-deck {
	position: relative;
	overflow: hidden;
	/* Ensures the glow doesn't spill out */
}

.features-glow-wrapper {
	position: absolute;
	top: 0;
	/* Align to top of section */
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 100%;
	/* Cover full height to fade out nicely */
	pointer-events: none;
	z-index: 1;
	/* Sit above section bg, below content */
	display: flex;
	justify-content: center;
}

.features-grid-texture {
	position: absolute;
	inset: 0;
	/* Create a grid of tiny dots */
	background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
	background-size: 30px 30px;
	/* Spacing between dots */

	/* MASK: Only show dots in the center, fading out quickly */
	mask-image: radial-gradient(circle at 50% 0%, black 0%, transparent 60%);
	-webkit-mask-image: radial-gradient(circle at 50% 0%, black 0%, transparent 60%);

	opacity: 0.8;
	z-index: 1;
	/* Sits 'above' the glow slightly to catch the light */
}

.features-glow {
	width: 1000px;
	/* Wider than the hero orb for a "horizon" look */
	height: 600px;
	margin-top: -40px;
	/* Pull it up so only the bottom half glows down */

	background: radial-gradient(circle,
			rgba(0, 229, 255, 0.45) 20%,
			/* Cyan Core */
			rgba(0, 229, 255, 0.05) 40%,
			/* Soft Fade */
			transparent 70%);

	filter: blur(90px);
	opacity: 0.9;
	animation: featurePulse 8s ease-in-out infinite alternate;
}

@keyframes featurePulse {
	0% {
		transform: scale(1);
		opacity: 0.5;
	}

	100% {
		transform: scale(1.1);
		opacity: 0.7;
	}
}

/* Ensure the text sits on top */
.feature-deck .container {
	position: relative;
	z-index: 2;
}

/* --- PRICING HEADER (Matches Feature Deck) --- */
.pricing .section-header {
	margin-bottom: 5rem;
}

.pricing h2 {
	color: white;
	/* Fallback */
	display: block;
	font-size: 4rem;
	line-height: 1.1;
	font-weight: 600;
	margin-bottom: 0.5rem;
	text-align: center;

	/* THE FIX: Apply the gradient to the text only */
	background: linear-gradient(180deg, #FFFFFF 20%, #888888 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.toggle-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	margin-top: 2.5rem;
}

/* --- PRICING CARDS --- */
.pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 2rem;
	align-items: start;
	/* Prevents stretching, allows popular card to stand out */
}

.pricing-card {
	background: #0a0a0a;
	border: 1px solid var(--border);
	border-radius: 24px;
	padding: 2.5rem;
	position: relative;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease;

	/* CRITICAL FIX: Allows the badge to sit outside the box */
	overflow: visible;
}

.pricing-card:hover {
	transform: translateY(-5px);
	border-color: #333;
	box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
}

/* Featured Card Styling */
.pricing-card.featured {
	background: #0f0f0f;
	/* Slightly lighter bg */
	border: 1px solid var(--primary);
	/* Cyan border */
	box-shadow: 0 0 40px rgba(0, 229, 255, 0.1);
	z-index: 2;
	transform: scale(1.02);
	/* Make it slightly larger */
}



/* The Badge */
.popular-tag {
	position: absolute;
	top: -16px;
	/* Sits exactly on the border */
	left: 50%;
	transform: translateX(-50%);
	background: var(--primary);
	color: #000;
	padding: 6px 16px;
	border-radius: 50px;
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: 0 4px 15px rgba(0, 229, 255, 0.4);
	z-index: 10;
	white-space: nowrap;
}

/* Typography tweaks */
.plan-name {
	font-size: 1.2rem;
	font-weight: 600;
	color: #fff;
	margin-bottom: 0.5rem;
}

.plan-price {
	font-size: 3.5rem;
	font-weight: 800;
	color: white;
	font-family: var(--font-display);
	letter-spacing: -0.04em;
	margin-bottom: 0.5rem;
}

.plan-price span {
	font-size: 1rem;
	color: #666;
	font-weight: 500;
	letter-spacing: normal;
}

.pricing .announcement-pill {
	display: flex;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

/* Mobile Fixes */
@media (max-width: 768px) {
	.pricing h2 {
		font-size: 2.5rem;
		-webkit-text-fill-color: white;
	}

	.pricing-card.featured {
		transform: scale(1);
		/* Reset scale on mobile */
		margin-top: 1rem;
		margin-bottom: 1rem;
	}
}

.btn-shiny,
.btn-outline,
.nav-actions a {
	transform: none !important;
}

/* --- PRICING FOOTER STYLES --- */
.pricing-footer {
	max-width: 900px;
	margin: 0 auto;
	padding-top: 2rem;
}

/* Overage Box Container */
.overage-box {
	background: #0a0a0a;
	/* Matches cards */
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 2rem;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-bottom: 3rem;
	flex-wrap: wrap;
	gap: 2rem;
}

.overage-item {
	text-align: center;
	flex: 1;
	min-width: 180px;
}

.o-price {
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 700;
	color: white;
	margin-bottom: 0.5rem;
}

.o-desc {
	color: var(--text-muted);
	font-size: 0.9rem;
	line-height: 1.4;
}

/* Vertical divider between items */
.overage-divider {
	width: 1px;
	height: 50px;
	background: var(--border);
}

/* Definition Blurb */
.definition-blurb {
	text-align: center;
	max-width: 850px;
	margin: 0 auto;
}

.definition-blurb h4 {
	font-size: 1rem;
	color: white;
	margin-bottom: 0.75rem;
	font-weight: 600;
}

.definition-blurb p {
	font-size: 0.9rem;
	color: #ccc;
	line-height: 1.6;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
	.overage-box {
		flex-direction: column;
		gap: 2rem;
	}

	.overage-divider {
		width: 100%;
		height: 1px;
	}
}

/* Subsection Title */
.pricing-subsection-title {
	text-align: center;
	color: var(--text-muted);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 2rem;
	margin-top: 1rem;
}

/* Voice Pricing Section */
.voice-pricing-section {
	margin: 4rem auto 3rem;
	max-width: 900px;
}

.voice-card {
	background: linear-gradient(145deg, #111 0%, #0a0a0a 100%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 3rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 3rem;
	position: relative;
	overflow: hidden;
}

/* Add a subtle purple glow for Voice */
.voice-card::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -20%;
	width: 50%;
	height: 200%;
	background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, transparent 70%);
	transform: rotate(30deg);
	pointer-events: none;
}

.voice-content {
	flex: 1;
	z-index: 2;
}

.voice-header {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 1rem;
}

.icon-wrapper {
	width: 50px;
	height: 50px;
	background: rgba(168, 85, 247, 0.1);
	border: 1px solid rgba(168, 85, 247, 0.3);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #a855f7;
	/* Voice Purple */
}

.voice-header h3 {
	font-size: 1.8rem;
	color: white;
	margin: 0;
	line-height: 1.1;
}

.voice-header p {
	color: #a855f7;
	font-size: 0.9rem;
	font-weight: 600;
}

.voice-desc {
	color: #ccc;
	font-size: 1rem;
	margin-bottom: 1.5rem;
	max-width: 500px;
}

.voice-features {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.voice-features span {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #888;
	font-size: 0.9rem;
}

.voice-features i {
	color: #a855f7;
	width: 16px;
	height: 16px;
}

.voice-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	z-index: 2;
	min-width: 200px;
}

.voice-action .sub-text {
	font-size: 0.8rem;
	color: #666;
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.voice-card {
		flex-direction: column;
		padding: 2rem;
		text-align: left;
		gap: 2rem;
	}

	.voice-action {
		width: 100%;
		align-items: stretch;
	}

	.voice-action .sub-text {
		text-align: center;
	}
}

.orb-center,
.hero-glow,
.features-glow {
	max-width: 100vw;
	overflow: hidden;
}

@media (max-width: 768px) {

	/* --- NAVIGATION --- */
	.navbar {
		padding: 10px 0;
	}

	.nav-container {
		padding: 0 20px;
		/* Ensure logo doesn't touch edge */
	}

	/* --- HERO TEXT SIZING --- */
	.hero {
		padding-top: 90px;
	}

	.hero h1 {
		font-size: 2.5rem;
		/* Shrink from 4.5rem to fit mobile */
		padding: 0 10px;
	}

	.hero-sub {
		font-size: 1rem;
		padding: 0 15px;
	}

	.hero-cta-group {
		flex-direction: column;
		/* Stack buttons vertically */
		width: 100%;
		padding: 0 20px;
	}

	.btn-shiny,
	.btn-outline {
		width: 100%;
		justify-content: center;
	}

	/* --- TABBED INTERFACE (Showcase) --- */
	.tabs-nav {
		overflow-x: auto;
		/* Allow scrolling left/right for tabs */
		white-space: nowrap;
		justify-content: flex-start;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 5px;
		/* Room for scrollbar */
	}

	.tab-btn {
		flex: 0 0 auto;
		/* Don't squish buttons */
		padding: 15px 20px;
	}

	/* --- FOOTER FIX (Critical) --- */
	.footer-grid {
		/* Change from 4 columns to 1 column */
		grid-template-columns: 1fr;
		gap: 2.5rem;
		text-align: left;
		margin-bottom: 2rem;
	}

	.footer-grid .col {
		padding-left: 20px;
		/* Align with container padding */
		padding-right: 20px;
	}

	/* --- FEATURE DECKS & PRICING --- */
	/* Force grids to single column */
	.pane-content,
	.split-body,
	.pricing-grid,
	.dx-grid,
	.deck-container {
		grid-template-columns: 1fr !important;
		display: flex;
		flex-direction: column;
		gap: 2rem;
	}

	.pricing-card {
		padding: 1.5rem;
	}

	/* Fix header sizing in pricing/features */
	.feature-deck h2,
	.pricing h2 {
		font-size: 2.2rem;
		padding: 0 10px;
	}

	/* Fix the timeline graphic width */
	.setup-graphic {
		width: 100%;
		max-width: 100%;
	}
}

/* Container for the bottom area */
.pricing-bottom-container {
	max-width: 900px;
	margin: 60px auto 20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 1. The Credit Logic Box */
.credit-logic-box {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	background: rgba(255, 255, 255, 0.03);
	/* Very subtle fill */
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	padding: 30px;
	text-align: left;
	margin-bottom: 30px;
}

.cl-column h4 {
	color: #fff;
	font-size: 0.95rem;
	margin: 0 0 15px 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.9;
}

.rate-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.rate-item:last-child {
	border-bottom: none;
}

.rate-label {
	color: #a1a1aa;
	font-size: 0.9rem;
}

.rate-value {
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
}

.quality-text {
	color: #a1a1aa;
	font-size: 0.9rem;
	line-height: 1.6;
}

/* 2. The Hobby Link */
.hobby-tier-box {
	text-align: center;
	padding: 20px;
	border-top: 1px dashed rgba(255, 255, 255, 0.15);
	/* Dashed line separates it */
	margin-top: 30px;
}

.hobby-link {
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid #4fd1c5;
	/* Brand color underline */
	padding-bottom: 1px;
	transition: all 0.2s;
}

.hobby-link:hover {
	color: #4fd1c5;
	border-bottom-color: transparent;
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.credit-logic-box {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}