/* ==========================================================================
   1. CSS RESET & VARIABLES
   ========================================================================== */
:root { --bg-dark: #0f172a; --primary: #188d6a; --primary-hover: #107a5a; --font-sans: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-handwriting: 'Caveat', cursive; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-sans); background-color: var(--bg-dark); color: white; -webkit-font-smoothing: antialiased; line-height: 1.5; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { background: none; border: none; cursor: pointer; font: inherit; }
/* ==========================================================================
   2. ANIMATIONS
   ========================================================================== */
@keyframes fadeSlideIn {
  0% { opacity: 0; transform: translateY(-1rem); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes pulseGlow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
@keyframes pulseSoft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes bounceSlow {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}
@keyframes floatGentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.animate-pulse { animation: pulseSoft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
/* ==========================================================================
   3. GLOBAL LAYOUT & UI COMPONENTS
   ========================================================================== */
.container { max-width: 1440px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 10; text-align: center; }
.hero-badge { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.625rem 1.25rem; border-radius: 9999px; background-color: #F8FAFC; border: 1px solid white; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); margin-bottom: 2rem; animation: fadeSlideIn 0.7s ease-out; }
.badge-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; background-color: var(--primary); }
.badge-text { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.05em; color: var(--bg-dark); text-transform: uppercase; }
.badge-highlight { color: var(--primary); }
.cta-group { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 5rem; }
.btn-primary { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--primary); color: white; font-weight: 700; padding: 0.75rem 2.5rem; border-radius: 0.25rem; box-shadow: 0 10px 15px -3px rgba(6, 78, 59, 0.5); width: 100%; transition: background-color 0.2s; }
.btn-primary:hover { background-color: var(--primary-hover); }
.btn-primary .main-text { font-size: 1.125rem; display: flex; align-items: center; line-height: 1.25; }
.btn-primary .sub-text { font-size: 0.6875rem; color: #FDE047; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.125rem; font-weight: 700; }
.btn-secondary { display: inline-flex; align-items: center; justify-content: center; background-color: transparent; border: 1px solid white; color: white; font-weight: 600; padding: 0.75rem 2rem; border-radius: 0.25rem; width: 100%; font-size: 1.125rem; transition: background-color 0.2s; }
.btn-secondary:hover { background-color: rgba(255, 255, 255, 0.1); }
.btn-secondary svg { transition: transform 0.2s; }

/* Logo Bar */
.logo-bar { background: white; padding: 3rem 0; border-bottom: 1px solid #f1f5f9; }
.logo-bar-inner { max-width: 1200px; margin: 0 auto; padding: 0 1rem; text-align: center; }
.logo-bar-text { font-size: 0.8125rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 2.5rem; }
.logo-bar-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem; filter: grayscale(1); opacity: 0.6; transition: all 0.7s; }
.logo-bar-logos:hover { filter: grayscale(0); opacity: 1; }
.logo-bar-logos img { height: 2.5rem; width: auto; object-fit: contain; }
@media (min-width: 768px) { .logo-bar-logos { gap: 4rem; } .logo-bar-logos img { height: 3rem; } .logo-bar-text { font-size: 0.875rem; } }
.btn-secondary:hover svg { transform: scale(1.1); }
@media (min-width: 640px) {
  .btn-primary, .btn-secondary { width: auto; }
}
/* ==========================================================================
   4. HERO SECTION
   ========================================================================== */
.hero-section
{
	position: relative;
	padding-top: 6rem;
	padding-bottom: 0;
	background-color: var(--bg-dark);
}
.ambient-bg
{
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.orb-blue
{
	position: absolute;
	top: -20%;
	right: -10%;
	width: 800px;
	height: 800px;
	background-color: rgba(37, 99, 235, 0.1);
	filter: blur(140px);
	border-radius: 50%;
}
.orb-emerald
{
	position: absolute;
	top: -20%;
	left: -10%;
	width: 800px;
	height: 800px;
	background-color: rgba(59, 130, 246, 0.1);
	filter: blur(140px);
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
}
.bg-radial
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at center, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
}
.hero-title
{
	letter-spacing: -0.025em;
	margin-bottom: 2rem;
	line-height: 1.05;
	max-width: 90rem;
	margin-left: auto;
	margin-right: auto;
}
.title-line-1
{
	display: block;
	font-size: 2.1rem;
	font-weight: 600;
}
.title-line-2
{
	display: block;
	margin-top: 0.5rem;
	font-size: 2.1rem;
	font-weight: 800;
	background-image: linear-gradient(to right, #60A5FA, #818CF8, #34D399);
	-webkit-background-clip: text;
	color: transparent;
}
@media (min-width: 768px)
{
	.title-line-1
	{
		font-size: 3.45rem;
	}
	.title-line-2
	{
		font-size: 3rem;
	}
}
.text-white-solid
{
	color: white;
	-webkit-text-fill-color: white;
}
.interactive-word
{
	position: relative;
	display: inline-block;
	padding: 0 0.5rem;
	margin: 0 -0.25rem;
}
.glow-back
{
	position: absolute;
	inset: -0.25rem;
	border-radius: 0.75rem;
	background: linear-gradient(to right, rgba(52, 211, 153, 0.25), rgba(34, 211, 238, 0.15), rgba(96, 165, 250, 0.25));
	filter: blur(20px);
	animation: pulseGlow 3.2s ease-in-out infinite;
}
.glow-mid
{
	position: absolute;
	inset: 0;
	border-radius: 0.75rem;
	background-color: rgba(52, 211, 153, 0.1);
	filter: blur(8px);
}
.glow-text
{
	position: relative;
	color: white;
	font-weight: 600;
	text-shadow: 0 0 14px rgba(52, 88, 211, 0.750);
	animation: pulseGlow 2.2s ease-in-out infinite;
}
.hero-subtitle
{
	max-width: 64rem;
	margin: 0 auto 2.5rem;
	font-size: 0.9rem;
	color: #CBD5E1;
	line-height: 1.625;
	font-weight: 300;
}
@media (min-width: 768px)
{
	.title-line-2
	{
		font-size: 3rem;
	}
	.hero-subtitle
	{
		font-size: 1rem;
	}
}
@media (min-width: 1024px)
{
	.title-line-2
	{
		font-size: 4.1rem;
	}
	.hero-subtitle
	{
		font-size: 1.125rem;
	}
}

/* ==========================================================================
   5. MOCKUP COMPONENTS (Browser & Phone)
   ========================================================================== */
.mockups-wrapper { position: relative; width: 100%; max-width: 80rem; margin: -2.5rem auto -120px; padding: 0 1rem; display: flex; align-items: flex-end; justify-content: center; overflow: visible; }
@media (min-width: 1024px) {
  .mockups-wrapper { justify-content: flex-start; }
}
.traffic-lights { display: flex; gap: 0.375rem; }
.light { width: 0.625rem; height: 0.625rem; border-radius: 50%; }
.light-red { background-color: #FF5F57; }
.light-yellow { background-color: #FFBD2E; }
.light-green { background-color: #28C940; }
.desktop-mockup { display: none; position: relative; z-index: 0; width: 100%; max-width: 1000px; transition: all 0.7s; }
@media (min-width: 1024px) {
  .desktop-mockup { display: block; }
}
.browser-window { background-color: white; border-radius: 1rem 1rem 0 0; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); border-left: 14px solid #0F172A; border-right: 14px solid #0F172A; border-top: 14px solid #0F172A; height: 620px; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.browser-header { background-color: #F1F5F9; border-bottom: 1px solid #E2E8F0; padding: 0.625rem 1rem; display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.address-bar { flex: 1; max-width: 24rem; height: 1.5rem; background-color: white; border-radius: 0.25rem; border: 1px solid #E2E8F0; display: flex; align-items: center; padding: 0 0.75rem; gap: 0.5rem; }
.address-text { font-size: 0.625rem; color: #94A3B8; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-body { flex: 1; display: flex; overflow: hidden; background-color: white; color: #0F172A; text-align: left; }
.sermon-pane { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.sermon-banner { height: 11rem; width: 100%; flex-shrink: 0; }
.sermon-banner img { width: 100%; height: 100%; object-fit: cover; }
.sermon-content { padding: 2.5rem; max-width: 48rem; margin: 0 auto; width: 100%; }
.blank-filled { font-family: var(--font-handwriting); color: #2563EB; font-size: 1.125rem; border-bottom: 2px solid #BFDBFE; padding: 0 0.5rem; margin: 0 0.25rem; display: inline-block; min-width: 5rem; text-align: center; line-height: 1; }
.blank-empty { border-bottom: 1px solid #E2E8F0; color: transparent; padding: 0 1rem; }
.reflection-note { background-color: #FFFBEB; border: 1px solid #FCD34D; border-radius: 0.75rem; padding: 1.25rem; margin-top: 1rem; margin-left: 1.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.reflection-text { font-size: 1rem; font-family: var(--font-handwriting); color: #334155; line-height: 1.625; }
.mobile-mockup { position: relative; z-index: 20; margin-left: -4rem; transition: transform 0.7s; }
.mobile-mockup:hover { transform: scale(1.05); }
@media (min-width: 1024px) {
  .mobile-mockup { margin-left: -8rem; }
}
.phone-bezel { width: 300px; height: 620px; background-color: white; border-radius: 4rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); border: 12px solid white; position: relative; overflow: hidden; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1); }
@media (min-width: 640px) {
  .phone-bezel { width: 350px; height: 720px; }
}
.phone-screen { width: 100%; height: 100%; background-color: white; border-radius: 3.2rem; position: relative; border: 1px solid #F1F5F9; display: flex; flex-direction: column; overflow: hidden; color: #0F172A; text-align: left; }
.phone-banner { height: 11rem; flex-shrink: 0; background-size: cover; background-position: center; position: relative; }
.phone-banner-overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.1); }
.phone-tabs { display: flex; border-bottom: 1px solid #E2E8F0; background-color: #F8FAFC; flex-shrink: 0; }
.ptab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem 0; gap: 0.25rem; font-size: 0.625rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.05em; }
.ptab-active { background-color: white; border-right: 1px solid #E2E8F0; }
.phone-body { padding: 2.5rem 1.5rem; flex: 1; overflow: visible; position: relative; }
.phone-nav { position: absolute; bottom: 0; width: 100%; background-color: white; border-top: 1px solid #F1F5F9; padding: 0.5rem 0.5rem 2rem; display: flex; justify-content: center; align-items: stretch; gap: 0; z-index: 20; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.02); }
.pnav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; padding: 0.4rem 0; gap: 0.15rem; }
.pnav-item svg { color: #0f172a !important; stroke: #0f172a !important; }
.pnav-text { font-size: 0.55rem; font-weight: 600; color: #0f172a !important; }
.notch { position: absolute; top: 0.625rem; left: 50%; transform: translateX(-50%); height: 1.75rem; width: 6rem; background-color: black; border-radius: 9999px; z-index: 30; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.notch-cam { width: 4rem; height: 0.25rem; border-radius: 9999px; background-color: black; }
.toast-popup { position: absolute; bottom: 8rem; right: -1.25rem; background-color: white; padding: 1rem; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); border: 1px solid #F1F5F9; display: flex; align-items: center; gap: 1rem; z-index: 40; animation: bounceSlow 3s infinite; text-align: left; }
/* ==========================================================================
   6. DEMO SECTION (White 3-Step Process)
   ========================================================================== */
.demo-section { padding: 6rem 0 8rem; background-color: white; color: var(--bg-dark); position: relative; overflow: hidden; }
.demo-header { text-align: center; margin-bottom: 4rem; }
.demo-header h2 { font-size: 2.25rem; font-weight: 800; margin-bottom: 1rem; letter-spacing: -0.025em; color: #0F172A; }
.demo-header p { font-size: 0.95rem; color: #64748B; max-width: 48rem; margin: 0 auto; line-height: 1.6; }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; max-width: 1200px; margin: 0 auto; }
@media (min-width: 1024px) {
  .demo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.demo-step { display: flex; flex-direction: column; }
.step-indicator { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.step-number { width: 2.5rem; height: 2.5rem; border-radius: 50%; background-color: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; box-shadow: 0 4px 6px -1px rgba(24, 141, 106, 0.3); }
.step-title { font-size: 1.25rem; font-weight: 800; color: #0F172A; }
.ui-window { background: white; border: 1px solid #E2E8F0; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05); overflow: hidden; height: 380px; display: flex; flex-direction: column; position: relative; }
.ui-header { display: flex; padding: 0.75rem 1rem; border-bottom: 1px solid #E2E8F0; background: #F8FAFC; }
.ui-body { padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; text-align: center; }
.upload-area { border: 2px dashed #CBD5E1; border-radius: 0.5rem; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #F8FAFC; }
.upload-area.border-solid { border-style: solid; background-color: white; }
.btn-mock { padding: 0.5rem 1.25rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 700; }
.btn-mock-outline { border: 1px solid #CBD5E1; background: white; color: #475569; }
.bg-blurred { background: #F8FAFC; }
.bg-faded { opacity: 0.4; }
.modal-mockup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 85%; background: white; border-radius: 0.75rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15); z-index: 10; overflow: hidden; }
.modal-header { padding: 1rem; border-bottom: 1px solid #E2E8F0; display: flex; justify-content: space-between; align-items: center; background: #F8FAFC; color: #0F172A; font-weight: 800; font-size: 0.875rem; }
.modal-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; text-align: left; }
.form-group label { display: block; font-size: 0.75rem; font-weight: 700; color: #475569; margin-bottom: 0.375rem; }
.form-group input { width: 100%; padding: 0.625rem; border: 1px solid #CBD5E1; border-radius: 0.375rem; font-size: 0.8125rem; background: #F8FAFC; color: #0F172A; }
.btn-mock-primary { background: var(--primary); color: white; width: 100%; padding: 0.75rem; }
.success-body-alt { padding: 1.25rem !important; align-items: stretch !important; justify-content: flex-start !important; text-align: left !important; }
.live-status-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.success-icon-wrap-small { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #DCFCE7; color: #059669; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.success-title-alt { font-size: 1rem; font-weight: 800; color: #0F172A; margin-bottom: 0.125rem; }
.success-desc-alt { font-size: 0.6875rem; color: #64748B; margin: 0; }
.link-copier { display: flex; align-items: center; width: 100%; border: 1px solid #CBD5E1; border-radius: 0.375rem; overflow: hidden; }
.link-url { flex: 1; padding: 0.625rem 0.75rem; font-size: 0.8125rem; color: #334155; background: #F1F5F9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-copy { background: white; border-left: 1px solid #CBD5E1; padding: 0.625rem 1rem; font-size: 0.8125rem; font-weight: 700; color: var(--primary); }
.analytics-panel { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 0.5rem; padding: 1rem; margin-top: 1.25rem; }
.analytics-header { font-size: 0.625rem; font-weight: 800; color: #64748B; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.375rem; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background-color: #10B981; animation: pulseSoft 2s infinite; }
.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.stat-card { background: white; border: 1px solid #E2E8F0; border-radius: 0.375rem; padding: 0.75rem; }
.stat-label { font-size: 0.5625rem; font-weight: 800; color: #94A3B8; margin-bottom: 0.25rem; }
.stat-value { font-size: 1.125rem; font-weight: 900; color: #0F172A; line-height: 1.2; }
.stat-change { font-size: 0.625rem; font-weight: 700; display: flex; align-items: center; gap: 2px; margin-top: 0.25rem; color: #10B981; }
/* ==========================================================================
   7. BENEFITS ZIGZAG SECTION (Dark Mode)
   ========================================================================== */
.benefits-section { padding: 8rem 0; background-color: var(--bg-dark); color: white; overflow: hidden; }
/* Grid Row Container - Wide 1200px */
.feature-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4rem; align-items: center; margin-bottom: 8rem; max-width: 1200px; margin-left: auto; margin-right: auto; width: 100%; padding: 0 1rem; }
.feature-row:last-child { margin-bottom: 0; }
/* Base Content & Visual */
.feature-content { text-align: left; width: 100%; max-width: 615px; /* INCREASED: Text is now significantly wider to naturally fill the gap */ margin: 0 auto; }
.feature-visual { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; }
/* Desktop Alignment: Wide grid, text stretches further */
@media (min-width: 1024px) {
  .feature-row { /* Gives the text column slightly more space than the graphic column */ grid-template-columns: 1.1fr 0.9fr; gap: 3rem; }
  .feature-row.reverse { /* Swaps the proportions for the Giving row */ grid-template-columns: 0.9fr 1.1fr; }
  /* Row 1: Text Left, Phone Right */
  .feature-row:not(.reverse) .feature-content { margin: 0; /* Pins text to the left */ }
  .feature-row:not(.reverse) .feature-visual { justify-content: flex-end; /* Puts the phone back on the right edge */ }
  /* Row 2: Giving Visual Left, Text Right */
  .feature-row.reverse .feature-visual { grid-column: 1; grid-row: 1; justify-content: flex-start; /* Pins giving image to the far left (aligning perfectly with Row 1 text) */ }
  .feature-row.reverse .feature-content { grid-column: 2; grid-row: 1; margin: 0; /* Pulls text left to reduce the gap */ }
}
/* Inline Integration Tags */
/* Inline Integration Tags (Blue) */
.brand-pill { display: inline-block; background-color: rgba(59, 130, 246, 0.15); /* Subtle blue tint */ color: #60A5FA; /* Bright blue text */ font-size: 0.89rem; font-weight: 500; padding: 0.125rem 0.5rem; border-radius: 9999px; margin: 0 0.125rem; border: 1px solid rgba(96, 165, 250, 0.3); /* Soft blue border */ vertical-align: middle; line-height: 1.4; }
/* Add to the end of faith.css */
.badge-new { display: inline-flex; align-items: center; font-size: 0.625rem; font-weight: 800; color: white; background-color: #EF4444; /* Bright Red */ padding: 0.125rem 0.375rem; border-radius: 0.25rem; margin-left: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; vertical-align: middle; line-height: 1; }
.feature-badge { display: inline-flex; align-items: center; color: #94A3B8; background-color: #1E293B; padding: 0.375rem 1rem; border-radius: 9999px; margin-bottom: 1.5rem; border: 1px solid #334155; font-size: 0.85rem; font-weight: 700; padding: 0.375rem 1rem; border-radius: 9999px; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 0.2pt; }
.badge-dot-blue { width: 8px; height: 8px; border-radius: 50%; background-color: #3B82F6; }
.badge-dot-green { width: 8px; height: 8px; border-radius: 50%; background-color: #10B981; }
.feature-title { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 1.5rem; overflow-wrap: break-word; }
.text-gradient-gold { background-image: linear-gradient(to right, #1A47B0, #3372B1); -webkit-background-clip: text; color: transparent; }
.text-gradient-green { background-image: linear-gradient(to right, #064E3B, #10B981); -webkit-background-clip: text; color: transparent; }
.feature-desc { font-size: 0.95rem; color: #94A3B8; line-height: 1.625; margin-bottom: 2rem; }
.feature-bullets { list-style: none; display: flex; flex-direction: column; gap: 1.25rem; }
.feature-bullets li { display: flex; align-items: flex-start; gap: 1rem; font-size: 1rem; color: #CBD5E1; line-height: 1.5; }
.feature-bullets li strong { color: white; }
.feature-bullets li i, .ai-bullets li i { font-size: 1.25rem; min-width: 1.25rem; text-align: center; margin-top: 0.15rem; background: none; padding: 0; }
.fa-icon-green { color: #22c55e; }
.fa-icon-blue { color: #3b82f6; }
.fa-icon-amber { color: #f59e0b; }
.fa-icon-pink { color: #ec4899; }
.fa-icon-emerald { color: #10b981; }
.fa-icon-yellow { color: #eab308; }
.fa-icon-red { color: #ef4444; }
.fa-icon-orange { color: #f97316; }
.fa-icon-purple { color: #a855f7; }
.fa-icon-cyan { color: #06b6d4; }
.fa-icon-yt { color: #ef4444; background: white; border-radius: 3px; }
.feature-visual { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; }
.visual-backdrop { position: absolute; width: 80%; height: 80%; border-radius: 50%; filter: blur(100px); z-index: 0; }
.backdrop-blue { background-color: rgba(59, 130, 246, 0.15); }
.backdrop-green { background-color: rgba(16, 185, 129, 0.15); }
/* Giving Panel Mockup (Second Feature Row) */
.give-panel-mockup { position: relative; z-index: 10; width: 100%; max-width: 360px; background-color: #1E293B; border-radius: 1.5rem; padding: 1.5rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); border: 1px solid #334155; animation: floatGentle 6s ease-in-out infinite reverse; }
.give-brand { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.heart-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; background-color: #064E3B; color: #34D399; display: flex; align-items: center; justify-content: center; }
.give-brand h5 { color: white; font-size: 1.125rem; font-weight: 800; margin-bottom: 0.25rem; }
.give-brand p { color: #94A3B8; font-size: 0.75rem; }
.give-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.5rem; }
.give-amt { background-color: #0F172A; color: white; font-weight: 800; padding: 1rem; border-radius: 0.75rem; border: 1px solid #334155; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; }
.give-amt.amt-active { background-color: var(--primary); border-color: var(--primary); color: white; box-shadow: 0 10px 15px -3px rgba(24, 141, 106, 0.3); }
.give-amt.amt-custom { font-size: 0.875rem; color: #94A3B8; }
.give-submit { width: 100%; background-color: white; color: #0F172A; font-weight: 800; font-size: 1rem; padding: 1rem; border-radius: 0.75rem; margin-bottom: 1rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.give-secure { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: #64748B; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
/* ==========================================================================
   8. ANIMATED PHONE MOCKUP (Feature 1)
   ========================================================================== */
.anim-phone-mockup { position: relative; z-index: 10; }
.anim-view-note { position: absolute; inset: 0; background: white; z-index: 10; display: flex; flex-direction: column; }
.anim-save-toast { position: absolute; bottom: 5rem; left: 50%; transform: translateX(-50%) translateY(20px); background: white; border-radius: 2rem; padding: 0.5rem 1rem 0.5rem 0.5rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2); border: 1px solid #F1F5F9; display: flex; align-items: center; gap: 0.5rem; z-index: 50; opacity: 0; animation: popToast 18s infinite; white-space: nowrap; pointer-events: none; }
.anim-cursor { position: absolute; z-index: 60; width: 28px; height: 28px; animation: moveCursor 18s infinite; pointer-events: none; }

/* Fill-in-the-blank */
.anim-blank-slot { position: relative; display: inline-block; }
.anim-blank-line { display: inline-block; border-bottom: 2px solid #cbd5e1; min-width: 55px; position: absolute; bottom: 0; left: 0; right: 0; animation: blankLineFade 18s infinite; }
.anim-blank-text { color: #10b981; font-size: 0.8rem; padding: 0 2px; opacity: 0; border-bottom: 1px solid #10b981; animation: blankTypeFade 18s infinite; }

/* Highlight + inline note */
.anim-highlight-target { animation: highlightSentence 18s infinite; padding: 1px 2px; border-radius: 2px; }
.anim-inline-note { background: #f5f3ff; border-left: 3px solid #6366f1; border-radius: 0 0.5rem 0.5rem 0; padding: 0.5rem 0.75rem; opacity: 0; max-height: 0; overflow: hidden; animation: inlineNoteReveal 18s infinite; }
.anim-sentence-wrap { cursor: default; }
.anim-typed-note::after { content: ''; display: inline-block; width: 1px; height: 0.7rem; background: #6366f1; margin-left: 1px; animation: blink 0.6s step-end infinite; }

/* Verse link + popup */
.anim-verse-link { color: #2563eb; font-size: 0.6rem; font-weight: 800; text-decoration: underline; cursor: pointer; letter-spacing: 0.05em; }
.anim-verse-popup { position: absolute; bottom: 2.5rem; left: 0; right: 0; background: white; border-radius: 0.75rem; padding: 0.75rem; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15); border: 1px solid #e2e8f0; z-index: 30; opacity: 0; transform: translateY(5px) scale(0.95); animation: popVerse 18s infinite; pointer-events: none; }

/* Nav save highlight */
.anim-icon-save, .anim-text-save { color: #94A3B8; animation: highlightNavSave 18s infinite; }

/* --- 18s Loop: blank → tap note → verse popup → save --- */
/* Step 1 (0-20%): Fill blank */
/* Step 2 (20-42%): Tap sentence, inline note */
/* Step 3 (42-62%): Click verse, popup */
/* Step 4 (62-85%): Click save, toast */
/* Step 5 (85-100%): Reset */

@keyframes moveCursor {
  0% { left: 80%; top: 70%; transform: scale(1); opacity: 1; }
  /* Move to blank */
  6% { left: 42%; top: 42%; transform: scale(1); opacity: 1; }
  8% { left: 42%; top: 42%; transform: scale(0.85); opacity: 1; }
  10% { left: 42%; top: 42%; transform: scale(1); opacity: 1; }
  16% { left: 42%; top: 42%; transform: scale(1); opacity: 0; }
  /* Move to sentence, hover then click */
  21% { left: 45%; top: 52%; transform: scale(1); opacity: 1; }
  24% { left: 45%; top: 52%; transform: scale(0.85); opacity: 1; }
  26% { left: 45%; top: 52%; transform: scale(1); opacity: 1; }
  38% { left: 45%; top: 52%; transform: scale(1); opacity: 0; }
  /* Move to verse link */
  43% { left: 22%; top: 72%; transform: scale(1); opacity: 1; }
  45% { left: 22%; top: 72%; transform: scale(0.85); opacity: 1; }
  47% { left: 22%; top: 72%; transform: scale(1); opacity: 1; }
  58% { left: 22%; top: 72%; transform: scale(1); opacity: 0; }
  /* Click My Notes */
  64% { left: 78%; top: 93%; transform: scale(1); opacity: 1; }
  66% { left: 78%; top: 93%; transform: scale(0.85); opacity: 1; }
  68% { left: 78%; top: 93%; transform: scale(1); opacity: 1; }
  80% { left: 78%; top: 93%; transform: scale(1); opacity: 1; }
  88% { left: 80%; top: 70%; transform: scale(1); opacity: 0; }
  100% { left: 80%; top: 70%; transform: scale(1); opacity: 0; }
}

@keyframes blankLineFade {
  0%, 9% { opacity: 1; }
  11%, 100% { opacity: 0; }
}
@keyframes blankTypeFade {
  0%, 9% { opacity: 0; }
  12%, 88% { opacity: 1; }
  92%, 100% { opacity: 0; }
}

@keyframes highlightSentence {
  0%, 24% { background: transparent; color: #0f172a; }
  25%, 26% { background: #e2e8f0; color: #475569; }
  28%, 88% { background: rgba(99, 102, 241, 0.1); color: #0f172a; }
  92%, 100% { background: transparent; color: #0f172a; }
}
@keyframes inlineNoteReveal {
  0%, 27% { opacity: 0; max-height: 0; margin-top: 0; }
  31%, 88% { opacity: 1; max-height: 80px; margin-top: 0.5rem; }
  92%, 100% { opacity: 0; max-height: 0; margin-top: 0; }
}

@keyframes popVerse {
  0%, 46% { opacity: 0; transform: translateY(-5px) scale(0.95); }
  48%, 57% { opacity: 1; transform: translateY(0) scale(1); }
  59%, 100% { opacity: 0; transform: translateY(-5px) scale(0.95); }
}

@keyframes popToast {
  0%, 67% { opacity: 0; transform: translateX(-50%) translateY(20px); }
  70%, 84% { opacity: 1; transform: translateX(-50%) translateY(0); }
  88%, 100% { opacity: 0; transform: translateX(-50%) translateY(20px); }
}
@keyframes highlightNavSave {
  0%, 65% { color: #94A3B8; }
  66%, 84% { color: #2563EB; }
  88%, 100% { color: #94A3B8; }
}

@keyframes blink {
  50% { opacity: 0; }
}
/* ==========================================================================
   9. DIGITAL BULLETIN SECTION (Feature 3)
   ========================================================================== */
/* Theme Colors */
.badge-dot-purple { width: 8px; height: 8px; border-radius: 50%; background-color: #A855F7; }
.text-gradient-purple { background-image: linear-gradient(to right, #1A47B0, #3372B1); -webkit-background-clip: text; color: transparent; }
.backdrop-purple { background-color: rgba(168, 85, 247, 0.15); }
.text-purple-400 { color: #C084FC; }
/* Bulletin UI Mockup */
.bulletin-mockup { position: relative; z-index: 10; width: 100%; max-width: 360px; background-color: white; border-radius: 1.5rem; padding: 1.25rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); border: 1px solid #E2E8F0; animation: floatGentle 6s ease-in-out infinite; }
.bm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid #F1F5F9; }
.bm-title { font-size: 1.125rem; font-weight: 900; color: #0F172A; }
.bm-date { font-size: 0.75rem; font-weight: 700; color: #94A3B8; background: #F8FAFC; padding: 0.25rem 0.5rem; border-radius: 0.5rem; }
.bm-video { height: 160px; background: linear-gradient(135deg, #1E1B4B, #312E81); border-radius: 1rem; margin-bottom: 1.5rem; position: relative; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.bm-live-badge { position: absolute; top: 0.75rem; left: 0.75rem; background: rgba(220, 38, 38, 0.9); color: white; font-size: 0.625rem; font-weight: 900; padding: 0.25rem 0.5rem; border-radius: 0.375rem; display: flex; align-items: center; gap: 0.375rem; letter-spacing: 0.05em; }
.bm-live-dot { width: 6px; height: 6px; background: white; border-radius: 50%; animation: pulseSoft 2s infinite; }
.bm-play-btn { width: 3.5rem; height: 3.5rem; background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(4px); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; border: 1px solid rgba(255, 255, 255, 0.5); padding-left: 4px; }
.bm-section-title { font-size: 0.75rem; font-weight: 800; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
.bm-event { display: flex; align-items: center; gap: 1rem; background: #F8FAFC; padding: 0.75rem; border-radius: 0.75rem; margin-bottom: 1.25rem; border: 1px solid #F1F5F9; }
.bm-event-calendar { background: white; border: 1px solid #E2E8F0; border-radius: 0.5rem; padding: 0.375rem; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 3rem; }
.cal-month { font-size: 0.5rem; font-weight: 800; color: #EF4444; }
.cal-day { font-size: 1rem; font-weight: 900; color: #0F172A; line-height: 1; }
.bm-event-info { flex: 1; }
.event-name { font-size: 0.875rem; font-weight: 800; color: #0F172A; margin-bottom: 0.125rem; }
.event-time { font-size: 0.6875rem; font-weight: 600; color: #64748B; }
.bm-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.bm-btn-primary { background: #9333EA; color: white; border-radius: 0.75rem; padding: 0.75rem; font-size: 0.875rem; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 0.5rem; box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.2); }
.bm-btn-secondary { background: white; color: #64748B; border: 1px solid #E2E8F0; border-radius: 0.75rem; padding: 0.75rem; font-size: 0.875rem; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
/* ==========================================================================
   10. WEB-BASED SECTION (Light Mode)
   ========================================================================== */
.web-based-section { padding: 8rem 0 0 0; /* Soft, airy light blue gradient matching the screenshot */ background: linear-gradient(135deg, #FFFFFF 0%, #F0F4FF 100%); color: #0F172A; overflow: hidden; }
.wb-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4rem; max-width: 1200px; margin: 0 auto; align-items: center; }
@media (min-width: 1024px) {
  .wb-row { grid-template-columns: 0.8fr 1.2fr; /* Visual gets slightly less space than text */ gap: 6rem; }
}
/* --- Left Column: QR Card --- */
.wb-visual { width: 100%; display: flex; justify-content: center; }
.qr-card { background-color: #0F172A; border-radius: 2rem; padding: 3rem 2.5rem; max-width: 360px; width: 100%; text-align: center; color: white; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); position: relative; border: 1px solid #1E293B; }
.qr-box { background: white; padding: 1rem; border-radius: 1rem; display: inline-block; margin-bottom: 1.5rem; }
.qr-title { font-size: 1.25rem; font-weight: 800; margin-bottom: 0.25rem; }
.qr-desc { font-size: 0.875rem; color: #94A3B8; margin-bottom: 1.5rem; }
.qr-divider { position: relative; text-align: center; margin: 2rem 0; }
.qr-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #334155; z-index: 1; }
.qr-divider span { position: relative; z-index: 2; background: #0F172A; padding: 0 1rem; font-size: 0.75rem; font-weight: 700; color: #475569; }
.qr-btn { display: block; background-color: #2563EB; color: white; padding: 1rem; border-radius: 0.75rem; font-weight: 800; font-size: 0.875rem; text-decoration: none; box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.4); transition: all 0.2s ease; }
.qr-btn:hover { background-color: #1D4ED8; transform: translateY(-2px); box-shadow: 0 15px 20px -3px rgba(37, 99, 235, 0.5); }
/* --- Right Column: Text & Features --- */
.wb-content { text-align: left; }
.wb-badge { display: inline-block; background-color: #E0E7FF; color: #2563EB; font-size: 0.85rem; font-weight: 700; padding: 0.375rem 1rem; border-radius: 9999px; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 0.2pt; }
.wb-heading { font-size: 2.5rem; font-weight: 900; line-height: 1.1; margin-bottom: 0.5rem; color: #0F172A; letter-spacing: -0.025em; }
.text-blue-accent { background-image: linear-gradient(to right, #1A47B0, #3372B1); -webkit-background-clip: text; color: transparent; }
.wb-subheading { font-size: 1rem; color: #64748B; font-weight: 600; margin-bottom: 1.5rem; letter-spacing: 0.05em; }
.wb-body { font-size: 0.95rem; color: #475569; line-height: 1.6; margin-bottom: 2.5rem; max-width: 90%; }
/* Options List */
.wb-options { display: flex; flex-direction: column; gap: 1.25rem; }
.wb-option { display: flex; gap: 1.25rem; align-items: flex-start; background: white; padding: 1.25rem; border: 1px solid #CED8FF; transition: transform 0.2s, border-color 0.2s; }
.wb-option:hover { transform: translateY(-2px); border-color: #E2E8F0; }
.wb-opt-icon { width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.text-blue-500 { color: #3B82F6; }
.bg-blue-50 { background-color: #EFF6FF; }
.text-purple-500 { color: #A855F7; }
.bg-purple-50 { background-color: #FAF5FF; }
.text-indigo-500 { color: #6366F1; }
.bg-indigo-50 { background-color: #EEF2FF; }
.wb-opt-text h5 { font-size: 1.125rem; font-weight: 800; color: #0F172A; margin-bottom: 0.25rem; }
.wb-opt-text p { font-size: 0.9375rem; color: #64748B; line-height: 1.5; margin: 0; }
/* ==========================================================================
   11. AI BANNER SECTION (Light Mode)
   ========================================================================== */
.ai-banner-section { padding: 100px 0; /* Exactly 100px top and bottom */ background-color: white; /* No weird boxes, just plain background */ overflow: hidden; }
.ai-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4rem; max-width: 1200px; margin: 0 auto; align-items: center; }
@media (min-width: 1024px) {
  .ai-row { grid-template-columns: 1.1fr 0.9fr; /* Matches the text-heavy proportion of other rows */ gap: 3rem; }
}
/* Text Content */
.ai-content { max-width: 615px; /* Matches the width of your other feature text blocks */ text-align: left; margin: 0 auto; }
@media (min-width: 1024px) {
  .ai-content { margin: 0; }
}
.ai-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; color: #D946EF; background-color: #FDF4FF; padding: 0.375rem 1rem; border-radius: 9999px; margin-bottom: 1.5rem; border: 1px solid #FBCFE8; }
.ai-badge-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #D946EF; }
.ai-heading { font-size: 2.5rem; /* Now matches the big headline size */ font-weight: 800; color: #0F172A; line-height: 1.1; margin-bottom: 1.5rem; letter-spacing: -0.025em; }
.text-gradient-pink { background-image: linear-gradient(to right, #1A47B0, #3372B1); -webkit-background-clip: text; color: transparent; }
.ai-desc { font-size: 0.95rem; color: #64748B; line-height: 1.625; margin: 0; }
/* Staggered Visuals (No rotation) */
.ai-visuals { position: relative; width: 100%; height: 200px; /* Constrained to ~200px tall */ }
.ai-img-wrapper { position: absolute; width: 240px; height: 135px; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border: 4px solid white; /* Gives a clean separation where they overlap */ transition: transform 0.3s ease; }
.ai-img-wrapper:hover { z-index: 10 !important; /* Brings image to front on hover */ transform: scale(1.05); /* Just scales up slightly, no rotation */ }
.ai-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }
/* Straight, overlapping positions */
.ai-img-1 { top: 10px; left: 0; z-index: 1; }
.ai-img-2 { top: 50px; left: 140px; z-index: 2; }
.ai-img-3 { top: 25px; left: 280px; z-index: 3; }
/* Mobile responsiveness */
@media (max-width: 1023px) {
  .ai-visuals { height: 220px; margin-top: 1rem; }
  .ai-img-1 { left: 5%; }
  .ai-img-2 { left: 25%; }
  .ai-img-3 { left: 45%; }
}
@media (max-width: 640px) {
  .ai-visuals { display: none; /* Hides on very small phones to save space */ }
}
/* AI Banners List Styles */
.ai-bullets { list-style: none; display: flex; flex-direction: column; gap: 0.875rem; margin-top: 1.5rem; }
.ai-bullets li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9375rem; color: #64748B; line-height: 1.5; }
.ai-bullets li strong { color: #0F172A; font-weight: 700; }
.ai-bullets li svg { flex-shrink: 0; margin-top: 0.125rem; }
.text-pink-500 { color: #D946EF; }
/* ==========================================================================
   12. PRICING SECTION
   ========================================================================== */
.pricing-section { padding: 5.2rem 0 8rem; background-color: #F1F4FF; color: #0F172A; }
.pricing-header { text-align: center; margin-bottom: 4rem; max-width: 800px; margin-left: auto; margin-right: auto; }
.pricing-header h2 { font-size: 2.5rem; font-weight: 900; margin-bottom: 0.5rem; letter-spacing: -0.025em; }
.pricing-header p { font-size: 1.125rem; color: #64748B; margin-bottom: 2rem; }
.pricing-trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-bottom: 2.5rem; }
.trust-badge { background: #ECFDF5; color: #10B981; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; gap: 0.375rem; }
/* Toggle Switch */
.pricing-toggle-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.pricing-toggle { background: #F1F5F9; padding: 0.375rem; border-radius: 9999px; display: inline-flex; }
.toggle-btn { padding: 0.625rem 2rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 700; color: #475569; transition: all 0.2s ease; }
.toggle-btn.active { background: #2563EB; color: white; box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2); }
.toggle-subtext { font-size: 0.75rem; font-weight: 800; color: #EF4444; transition: opacity 0.2s; }
/* Pricing Grid */
.pricing-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; max-width: 1200px; margin: 0 auto; align-items: stretch; }
@media (min-width: 1024px) {
  .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pricing-card { background: white; border: 1px solid #E2E8F0; border-radius: 1.5rem; padding: 2.5rem 2rem; display: flex; flex-direction: column; position: relative; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.02); }
.pcard-pro { border: 2px solid #2563EB; box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.1); }
@media (min-width: 1024px) {
  .pcard-pro { transform: scale(1.03); z-index: 10; }
}
.pro-badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: #2563EB; color: white; font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.25rem 1rem; border-radius: 9999px; }
.pcard-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.pcard-icon { width: 3rem; height: 3rem; background: #F1F5F9; color: #64748B; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; }
.pcard-icon.icon-blue { background: #EFF6FF; color: #2563EB; }
.pcard-titles h3 { font-size: 1.5rem; font-weight: 900; color: #0F172A; line-height: 1; }
.pcard-titles p { font-size: 0.875rem; color: #64748B; font-weight: 600; }
.pcard-desc { font-size: 0.9375rem; color: #475569; margin-bottom: 2rem; line-height: 1.5; }
/* Price Block */
.price-block { margin-bottom: 2rem; text-align: left; min-height: 120px; /* Keeps card heights uniform */ }
.price-pre { font-size: 0.625rem; font-weight: 800; color: #94A3B8; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.price-main { font-size: 3rem; font-weight: 900; color: #0F172A; line-height: 1; margin-bottom: 0.5rem; letter-spacing: -0.05em; }
.price-period { font-size: 1.125rem; color: #64748B; font-weight: 600; letter-spacing: normal; }
.price-sub { font-size: 0.75rem; font-weight: 700; color: #3B82F6; margin-bottom: 0.25rem; }
.price-promo { font-size: 0.875rem; font-weight: 800; color: #10B981; }
/* Action Button */
.btn-pricing { background: var(--primary); color: white; width: 100%; padding: 1rem; border-radius: 0.5rem; font-size: 1rem; font-weight: 800; margin-bottom: 2.5rem; transition: background 0.2s; line-height: 1.2; }
.btn-pricing:hover { background: var(--primary-hover); }
.btn-pricing-sub { font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.05em; opacity: 0.8; }
/* Features List */
.pricing-features { list-style: none; display: flex; flex-direction: column; gap: 1.25rem; flex: 1; }
.pricing-features li { display: flex; align-items: flex-start; text-align: left; gap: 0.75rem; font-size: 0.8125rem; color: #64748B; line-height: 1.4; }
.pricing-features svg { flex-shrink: 0; color: #94A3B8; margin-top: 0.125rem; }
.pricing-features strong { color: #0F172A; font-weight: 800; font-size: 0.875rem; }
.feature-highlight svg { color: #EF4444; }
/* Disclaimer text at bottom of Media card */
.high-traffic-box { margin-top: 2rem; font-size: 0.6875rem; color: #475569; line-height: 1.5; background: #F8FAFC; padding: 1rem; border-radius: 0.5rem; border: 1px solid #E2E8F0; }




/* ==========================================================================
   13. FAQ SECTION
   ========================================================================== */

.faq-section {
    padding: 8rem 0;
    background-color: white;
    color: #0f172a;
}

.faq-header {
    text-align: center;
    margin-bottom: 4rem;
}

.faq-header h2 {
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin-bottom: 1rem;
}

.text-indigo-accent {
    background-image: linear-gradient(to right, #1A47B0, #3372B1); -webkit-background-clip: text; color: transparent;
}

.faq-header p {
    font-size: 0.95rem;
    color: #64748b;
}

/* Two distinct columns for perfect masonry-style stacking */
.faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
    align-items: start;
}

@media (min-width: 768px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
}

.faq-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.faq-item {
    background-color: #f8fafc;
    border-radius: 0.75rem;
    padding: 1.5rem;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
    /* Subtle border to pop off the white background slightly */
    border: 1px solid #f1f5f9; 
}

.faq-item:hover {
    background-color: #f1f5f9;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 1.125rem;
    color: #0f172a;
    gap: 1.5rem;
    line-height: 1.4;
    text-align: left;
}

.faq-icon {
    flex-shrink: 0;
    color: #94a3b8;
    transition: transform 0.3s ease;
}

/* Active State Styles */
.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    display: none;
    margin-top: 1rem;
    font-size: 0.9375rem;
    color: #475569;
    line-height: 1.6;
    text-align: left;
}

.faq-item.active .faq-answer {
    display: block;
    animation: fadeInDown 0.3s ease-out forwards;
}

.faq-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.faq-list li { padding-left: 1.25rem; position: relative; line-height: 1.6; }
.faq-list li::before { content: "\2022"; position: absolute; left: 0; color: #94a3b8; }
.faq-label { font-weight: 600; color: #0f172a; }
.faq-lead { margin-bottom: 0.75rem; }

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}





/* ==========================================================================
   14. BOTTOM CTA SECTION
   ========================================================================== */

.cta-bottom-section {
    position: relative;
    padding: 8rem 0;
    background-color: var(--bg-dark);
    color: white;
    text-align: center;
    overflow: hidden;
}

.cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #cbd5e1;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.375rem 1.25rem;
    border-radius: 9999px;
    margin-bottom: 2rem;
}

.cta-heading {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 1.25rem;
}

.text-gradient-blue {
    background-image: linear-gradient(to right, #1A47B0, #3372B1);
    -webkit-background-clip: text;
    color: transparent;
}

.cta-desc {
    font-size: 0.95rem;
    color: #94a3b8;
    margin-bottom: 3rem;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 5rem;
    flex-wrap: wrap;
}

.cta-btn-primary {
    background-color: #10b981; /* Emerald green matching screenshot */
    color: white;
    font-weight: 800;
    padding: 0.875rem 2rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s, transform 0.2s;
    box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3);
}

.cta-btn-primary:hover {
    background-color: #059669;
    transform: translateY(-2px);
}

.cta-btn-secondary {
    background-color: transparent;
    color: white;
    font-weight: 700;
    padding: 0.875rem 2rem;
    border-radius: 0.375rem;
    border: 1px solid white;
    transition: background-color 0.2s;
}

.cta-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Stats Grid */
.cta-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 4rem;
    max-width: 1000px;
    margin: 0 auto;
}

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

.stat-num {
    font-size: 2.25rem;
    font-weight: 900;
    color: white;
    margin-bottom: 0.25rem;
    line-height: 1;
}

.stat-label {
    font-size: 0.6875rem;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .cta-heading { font-size: 2.25rem; }
    .cta-stats { gap: 2rem; }
    .stat-item { width: 40%; } /* 2x2 grid on mobile */
}

/* ==========================================================================
   15. FOOTER / CONTACT SECTION
   ========================================================================== */

.site-footer {
    padding: 6rem 0;
    background-color: white;
    color: #0f172a;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6rem;
    }
}

.footer-info { text-align: left; }
.footer-info h3 {
    font-size: 1.25rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: #0f172a;
}

.footer-info p {
    font-size: 0.9375rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.footer-link-blue {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}

.footer-link-blue:hover {
    text-decoration: underline;
}

.footer-form-wrapper {
    width: 100%;
}





/* ==========================================================================
   16. STICKY HEADER
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(15, 23, 42, 0.95); /* Uses the dark background with slight transparency */
    backdrop-filter: blur(10px); /* Blurs the content sliding under it */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-size: 1.5rem;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: -0.025em;
}

/* Nav Links */
.header-nav {
    display: none; /* Hides the links on mobile devices to save space */
    align-items: center;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .header-nav {
        display: flex;
    }
}

.nav-link {
    color: #cbd5e1;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.nav-link:hover {
    color: white;
}

/* Custom Colored Links */
.nav-link-pink { color: #d946ef !important; }
.nav-link-pink:hover { color: #f0abfc !important; }

.nav-link-green { color: #10b981 !important; }
.nav-link-green:hover { color: #34d399 !important; }

/* Call to Action Button */
.header-actions {
    display: flex;
    align-items: center;
}

.header-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: white;
    font-weight: 700;
    padding: 0.4rem 2.5rem;
    border-radius: 0.25rem;
    box-shadow: 0 10px 15px -3px rgba(6, 78, 59, 0.5);
    transition: background-color 0.2s;
    text-decoration: none;
}

.header-btn:hover {
    background-color: var(--primary-hover);
}

/* Mobile Menu Button */
.mobile-menu-btn { display: flex; align-items: center; background: none; border: none; color: white; cursor: pointer; padding: 0.25rem; margin-left: 0.75rem; }
@media (min-width: 1024px) { .mobile-menu-btn { display: none; } }

/* Mobile Header Adjustments */
@media (max-width: 1023px) {
    .header-btn { padding: 0.3rem 1rem; font-size: 0.8rem; }
    .header-container { height: 60px; }
}

/* Mobile Menu Overlay */
.mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.97); z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.mobile-menu-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-menu-close { position: absolute; top: 1rem; right: 1.25rem; background: none; border: none; color: white; cursor: pointer; padding: 0.5rem; }
.mobile-menu-nav { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.mobile-nav-link { color: #cbd5e1; font-size: 1.25rem; font-weight: 600; text-decoration: none; transition: color 0.2s; }
.mobile-nav-link:hover { color: white; }
.mobile-nav-cta { display: inline-block; background-color: var(--primary); color: white; font-weight: 700; padding: 0.75rem 2rem; border-radius: 0.25rem; text-decoration: none; margin-top: 1rem; font-size: 1.125rem; }
@media (min-width: 1024px) { .mobile-menu-overlay { display: none; } }

/* Mobile typography scaling */
@media (max-width: 767px) {
    .demo-header h2 { font-size: 1.5rem; }
    .demo-header p { font-size: 0.9rem; }
    .feature-title { font-size: 1.75rem; }
    .feature-desc { font-size: 0.9rem; }
    .wb-heading { font-size: 1.75rem; }
    .wb-subheading { font-size: 0.85rem; }
    .wb-body { font-size: 0.9rem; }
    .ai-heading { font-size: 1.75rem; }
    .ai-desc { font-size: 0.9rem; }
    .pricing-header h2 { font-size: 1.75rem; }
    .faq-header h2 { font-size: 1.75rem; }
    .faq-header p { font-size: 0.9rem; }
    .cta-heading { font-size: 1.75rem; }
    .cta-desc { font-size: 0.9rem; }
    .logo-bar-text { font-size: 0.7rem; }
}

/* Mobile/Desktop visibility utilities */
.show-mobile-only { display: none; }
.demo-phone-mobile { display: none; }

@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
    .show-mobile-only { display: block !important; }

    /* Hide full demo grid on mobile */
    .demo-grid { display: none !important; }

    /* Animated phone demo */
    .demo-phone-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin: 0 auto;
    }
    .demo-phone-label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .demo-phone-label-dot {
        width: 6px; height: 6px;
        border-radius: 50%;
        background: #10b981;
        animation: demoPulse 2s infinite;
    }
    @keyframes demoPulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.4; }
    }

    /* Phone frame */
    .demo-phone-bezel {
        width: 260px;
        height: 480px;
        background: white;
        border-radius: 3rem;
        border: 10px solid white;
        box-shadow: 0 0 0 1px rgba(15,23,42,0.1), 0 25px 50px -12px rgba(0,0,0,0.2);
        position: relative;
        overflow: hidden;
    }
    .demo-phone-screen {
        width: 100%;
        height: 100%;
        background: white;
        border-radius: 2.2rem;
        position: relative;
        overflow: hidden;
        border: 1px solid #f1f5f9;
    }
    .demo-phone-notch {
        position: absolute;
        top: 0.4rem;
        left: 50%;
        transform: translateX(-50%);
        height: 1.4rem;
        width: 5rem;
        background: black;
        border-radius: 9999px;
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .demo-phone-notch-cam {
        width: 3rem; height: 0.2rem;
        border-radius: 9999px;
        background: #111;
    }

    /* Shared state styles */
    .demo-state {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        background: white;
        opacity: 0;
        animation-duration: 16s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }

    /* Fixed step badge — always at the bottom of the phone, same spot */
    .demo-step-badge-fixed {
        position: absolute;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 80;
        pointer-events: none;
    }
    .demo-step-text {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        color: white;
        font-size: 0.6rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding: 0.25rem 0.85rem;
        border-radius: 9999px;
        white-space: nowrap;
        opacity: 0;
        animation-duration: 16s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }
    .demo-step-text-1 { animation-name: demoStepLabel1; }
    .demo-step-text-2 { animation-name: demoStepLabel2; }
    .demo-step-text-3 { animation-name: demoStepLabel3; }

    /* State 1: Upload with drag animation */
    .demo-state-upload {
        animation-name: demoState1;
        align-items: center;
        justify-content: center;
        padding: 0 1.5rem 3rem;
    }
    .demo-upload-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        border: 2px dashed #cbd5e1;
        border-radius: 1rem;
        padding: 2rem 1.25rem 1.5rem;
        width: 100%;
        position: relative;
        animation: demoUploadHighlight 16s infinite;
    }
    /* Dragging document */
    .demo-drag-doc {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.3rem;
        z-index: 70;
        opacity: 0;
        filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15));
        animation: demoDragIn 16s infinite;
        pointer-events: none;
    }
    .demo-drag-label {
        font-size: 0.5rem;
        font-weight: 700;
        color: #475569;
        background: white;
        padding: 0.15rem 0.5rem;
        border-radius: 0.25rem;
        border: 1px solid #e2e8f0;
        white-space: nowrap;
    }

    /* State 2: Full note with blanks + submit */
    .demo-state-note {
        animation-name: demoState2;
        padding: calc(1.5rem + 35px) 1rem 3.5rem;
    }
    .demo-note-content {
        flex: 1;
        overflow: hidden;
        padding: 0 0.25rem;
    }
    .demo-note-line {
        font-size: 0.6rem;
        line-height: 1.8;
        color: #334155;
        margin-bottom: 0.25rem;
    }
    .demo-blank {
        display: inline-block;
        min-width: 42px;
        border-bottom: 2px solid #cbd5e1;
        padding: 0 0.1rem;
        color: transparent;
        margin: 0 0.1rem;
        position: relative;
    }
    .demo-blank-fill {
        color: #4f46e5;
        font-weight: 700;
        border-bottom-color: #4f46e5;
    }
    /* Submit button + animated cursor */
    .demo-submit-wrap {
        flex-shrink: 0;
        padding: 0.5rem 0.25rem 0;
        position: relative;
    }
    .demo-submit-btn {
        width: 100%;
        padding: 0.6rem;
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
        border: none;
        border-radius: 0.6rem;
        font-size: 0.7rem;
        font-weight: 800;
        cursor: pointer;
        animation: demoBtnPress 16s infinite;
    }
    .demo-submit-cursor {
        position: absolute;
        bottom: 0.2rem;
        right: 1.2rem;
        opacity: 0;
        animation: demoCursorClick 16s infinite;
        filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
        pointer-events: none;
    }

    /* State 3: Live in app */
    .demo-state-live {
        animation-name: demoState3;
    }
    .demo-live-banner {
        height: 90px;
        flex-shrink: 0;
        background-size: cover;
        background-position: center;
        position: relative;
    }
    .demo-live-banner-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.15);
    }
    .demo-live-tabs {
        display: flex;
        border-bottom: 1px solid #e2e8f0;
        background: #f8fafc;
        flex-shrink: 0;
    }
    .demo-live-tab {
        flex: 1;
        text-align: center;
        padding: 0.6rem 0;
        font-size: 0.55rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: -0.03em;
        color: #94a3b8;
    }
    .demo-live-tab-active {
        background: white;
        color: #4f46e5;
        border-right: 1px solid #e2e8f0;
    }
    .demo-live-body {
        flex: 1;
        padding: 0.75rem 1rem;
        padding-bottom: 3rem;
        overflow: hidden;
    }
    .demo-live-nav {
        position: absolute;
        bottom: 1.75rem;
        width: 100%;
        background: white;
        border-top: 1px solid #f1f5f9;
        padding: 0.4rem 0.25rem 0.5rem;
        display: flex;
        justify-content: center;
        z-index: 20;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.02);
    }
    .demo-live-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        gap: 0.1rem;
        color: #94a3b8;
    }
    .demo-live-nav-item span {
        font-size: 0.45rem;
        font-weight: 600;
    }
    .demo-live-nav-active {
        color: #4f46e5;
    }

    /* Step 3 blanks: blue underline, text hidden by default */
    .demo-blank-blue {
        border-bottom-color: #3b82f6;
        color: transparent;
    }
    /* Animated type-in blanks */
    .demo-blank-typein-1,
    .demo-blank-typein-2,
    .demo-blank-typein-3 {
        color: transparent;
        font-weight: 700;
    }
    .demo-blank-typein-1 { animation: demoTypeIn1 16s infinite; }
    .demo-blank-typein-2 { animation: demoTypeIn2 16s infinite; }
    .demo-blank-typein-3 { animation: demoTypeIn3 16s infinite; }

    /* Conversion engine screen */
    .demo-state-convert {
        animation-name: demoStateConvert;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }
    .demo-convert-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
    }
    .demo-convert-icon {
        animation: demoSpin 1.2s linear infinite;
    }
    .demo-convert-title {
        font-size: 0.75rem;
        font-weight: 800;
        color: #0f172a;
        margin: 0;
    }
    .demo-convert-sub {
        font-size: 0.6rem;
        color: #64748b;
        margin: 0;
    }
    .demo-convert-bar-track {
        width: 160px;
        height: 6px;
        background: #e2e8f0;
        border-radius: 9999px;
        overflow: hidden;
        margin-top: 0.25rem;
    }
    .demo-convert-bar-fill {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, #3b82f6, #2563eb);
        border-radius: 9999px;
        animation: demoProgressFill 16s infinite;
    }
    @keyframes demoSpin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }

    /* ── Keyframes ── 16s total cycle ──
       State 1 (upload):     0% – 22%    (3.5s)
       State 2 (note):      22% – 44%    (3.5s)
       Convert:             44% – 58%    (2.2s)
       State 3 (live):      58% – 97%    (6.2s)
    */

    /* State visibility */
    @keyframes demoState1 {
        0%      { opacity: 0; }
        2%      { opacity: 1; }
        19%     { opacity: 1; }
        23%     { opacity: 0; }
        100%    { opacity: 0; }
    }
    @keyframes demoState2 {
        0%      { opacity: 0; }
        23%     { opacity: 0; }
        27%     { opacity: 1; }
        41%     { opacity: 1; }
        45%     { opacity: 0; }
        100%    { opacity: 0; }
    }
    @keyframes demoStateConvert {
        0%      { opacity: 0; }
        45%     { opacity: 0; }
        48%     { opacity: 1; }
        56%     { opacity: 1; }
        59%     { opacity: 0; }
        100%    { opacity: 0; }
    }
    @keyframes demoState3 {
        0%      { opacity: 0; }
        59%     { opacity: 0; }
        62%     { opacity: 1; }
        95%     { opacity: 1; }
        100%    { opacity: 0; }
    }

    /* Step labels — Step 2 covers both note + conversion */
    @keyframes demoStepLabel1 {
        0%      { opacity: 0; }
        2%      { opacity: 1; }
        19%     { opacity: 1; }
        23%     { opacity: 0; }
        100%    { opacity: 0; }
    }
    @keyframes demoStepLabel2 {
        0%      { opacity: 0; }
        23%     { opacity: 0; }
        27%     { opacity: 1; }
        56%     { opacity: 1; }
        59%     { opacity: 0; }
        100%    { opacity: 0; }
    }
    @keyframes demoStepLabel3 {
        0%      { opacity: 0; }
        59%     { opacity: 0; }
        62%     { opacity: 1; }
        95%     { opacity: 1; }
        100%    { opacity: 0; }
    }

    /* Document drags from top-right into center, box turns blue */
    @keyframes demoDragIn {
        0%      { opacity: 0; top: -20px; right: -10px; transform: rotate(8deg) scale(0.8); }
        4%      { opacity: 1; top: -20px; right: -10px; transform: rotate(8deg) scale(0.8); }
        12%     { opacity: 1; top: 50%;   right: 50%;   transform: translate(50%, -50%) rotate(0deg) scale(0.7); }
        16%     { opacity: 0; top: 50%;   right: 50%;   transform: translate(50%, -50%) rotate(0deg) scale(0.5); }
        100%    { opacity: 0; }
    }
    /* Upload box highlight — turns light blue when doc arrives */
    @keyframes demoUploadHighlight {
        0%      { background: white; border-color: #cbd5e1; }
        8%      { background: white; border-color: #cbd5e1; }
        10%     { background: #eff6ff; border-color: #60a5fa; }
        19%     { background: #eff6ff; border-color: #60a5fa; }
        22%     { background: white; border-color: #cbd5e1; }
        100%    { background: white; border-color: #cbd5e1; }
    }

    /* Progress bar fills during conversion window */
    @keyframes demoProgressFill {
        0%      { width: 0%; }
        45%     { width: 0%; }
        48%     { width: 15%; }
        53%     { width: 60%; }
        56%     { width: 100%; }
        100%    { width: 0%; }
    }

    /* Cursor slides in and clicks the publish button */
    @keyframes demoCursorClick {
        0%      { opacity: 0; transform: translate(30px, 20px); }
        36%     { opacity: 0; transform: translate(30px, 20px); }
        39%     { opacity: 1; transform: translate(0, 0); }
        41%     { opacity: 1; transform: translate(0, 0) scale(0.9); }
        42%     { opacity: 1; transform: translate(0, 0) scale(1); }
        44%     { opacity: 0; transform: translate(0, 0); }
        100%    { opacity: 0; }
    }
    /* Button depresses on cursor click */
    @keyframes demoBtnPress {
        0%      { filter: brightness(1); transform: scale(1); }
        41%     { filter: brightness(1); transform: scale(1); }
        42%     { filter: brightness(0.9); transform: scale(0.97); }
        43%     { filter: brightness(1); transform: scale(1); }
        100%    { filter: brightness(1); transform: scale(1); }
    }

    /* Type-in: 3 blanks filled one at a time during state 3 (62%-95%) */
    @keyframes demoTypeIn1 {
        0%      { color: transparent; }
        67%     { color: transparent; }
        70%     { color: #4f46e5; }
        95%     { color: #4f46e5; }
        100%    { color: transparent; }
    }
    @keyframes demoTypeIn2 {
        0%      { color: transparent; }
        73%     { color: transparent; }
        76%     { color: #4f46e5; }
        95%     { color: #4f46e5; }
        100%    { color: transparent; }
    }
    @keyframes demoTypeIn3 {
        0%      { color: transparent; }
        79%     { color: transparent; }
        82%     { color: #4f46e5; }
        95%     { color: #4f46e5; }
        100%    { color: transparent; }
    }
}